.about-copy .skill-list[data-grouped] { display:grid; grid-template-columns:1fr; gap:1rem; }
.about-copy .skill-list .apc-skill-group { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.about-copy .skill-list .apc-skill-group strong { width:100%; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.about-copy .skill-list .apc-skill-group span { white-space:normal; }
.apc-resume-preview { display:block; width:100%; height:min(55vh,580px); margin:1rem 0; border:1px solid #d8e1e8; background:#fff; }
.apc-resume-open { display:block; margin-top:.8rem; font-size:.9rem; text-underline-offset:3px; }
@media(max-width:600px) { .apc-resume-preview { height:42vh; } }

/* Scope every change to identified website cases; category disclosure is unchanged. */
.project.apc-website-project .project-cover {
  display: block;
  aspect-ratio: auto;
  padding: 14px;
  overflow: hidden;
  background: #dbe5ec;
  border: 1px solid #8ca1b2;
}
.apc-website-project .apc-browser-frame {
  color: var(--ink, #0e0f3c);
}
.apc-website-project .apc-browser-bar,
.apc-website-case .apc-browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 38px;
  padding: 8px 14px;
  background: #f5f7fa;
  border-bottom: 1px solid #cad5df;
  color: #405567;
  text-align: left;
}
.apc-website-project .apc-browser-dots,
.apc-website-case .apc-browser-dots {
  display: flex;
  gap: 5px;
  flex: none;
}
.apc-website-project .apc-browser-dot,
.apc-website-case .apc-browser-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9aaebd;
}
.apc-website-project .apc-browser-address,
.apc-website-case .apc-browser-address {
  min-width: 0;
  overflow-wrap: anywhere;
  font: 600 10px/1.4 var(--body, sans-serif);
  letter-spacing: .02em;
}
.project.apc-website-project .apc-browser-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  background: #fff;
}
.project.apc-website-project .apc-browser-screen img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
.apc-website-project .project-info {
  gap: 12px;
}
.apc-website-project .project-info strong {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.3;
}
.apc-website-project .project-type {
  font-size: 11px;
  line-height: 1.6;
  color: #d4dfe7;
}
.apc-website-project .apc-web-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
}
.apc-website-project .apc-web-stage,
.apc-website-case .apc-web-stage {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid #b7cad6;
  background: #e5eef4;
  color: #233f53;
  font: 600 10px/1.4 var(--body, sans-serif);
  letter-spacing: .02em;
}
.apc-website-project .apc-web-stage-development,
.apc-website-case .apc-web-stage-development {
  border-color: #d9d1b6;
  background: #f6f0df;
  color: #594923;
}
.apc-website-project .apc-web-summary {
  flex-basis: 100%;
  color: #d4dfe7;
  font-size: 11px;
  line-height: 1.65;
}
.apc-website-project .project-action {
  margin-top: 3px;
}
.apc-website-case h1 {
  max-width: 1050px;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.15;
}
.apc-website-case .project-lead {
  max-width: 900px;
  line-height: 1.7;
}
.apc-website-case .project-meta {
  align-items: center;
  gap: 10px;
}
.apc-website-case .project-meta > span {
  font-size: 11px;
  line-height: 1.5;
}
.apc-website-case .apc-website-links {
  margin: 0 0 24px;
}
.apc-website-case .project-hero-image.apc-browser-frame {
  display: block;
  padding: 0;
  margin: 28px 0 0;
  background: #fff;
  border: 1px solid #b9c9d4;
  overflow: hidden;
}
.apc-website-case .apc-browser-screen {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0;
  background: #fff;
}
.apc-website-case .project-hero-image .apc-browser-screen img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  margin: 0;
}
.apc-website-case .apc-screen-note {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 24px;
  flex-wrap: wrap;
  margin: 12px 0 36px;
  color: #405567;
  font-size: 12px;
  line-height: 1.7;
}
.apc-website-case .apc-screen-open {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--ink, #0e0f3c);
}
.apc-website-case .apc-website-content {
  max-width: 1040px;
}
.apc-website-case .apc-website-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.apc-website-case .apc-website-gallery > * {
  grid-column: 1 / -1;
  margin-top: 0;
}
.apc-website-case .apc-website-gallery > .apc-website-mobile-screen {
  grid-column: auto;
}
.apc-website-case .apc-website-screen-figure {
  padding: 16px;
  border: 1px solid #cad5df;
  background: #f5f7fa;
}
.apc-website-case .apc-website-screen-figure a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.apc-website-case .apc-website-screen-figure img {
  display: block;
  max-height: 760px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: auto;
}
.apc-website-case .apc-website-screen-figure figcaption {
  margin-top: 12px;
  color: #405567;
  font-size: 12px;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .project.apc-website-project .project-cover { padding: 8px; }
  .apc-website-project .apc-browser-bar,
  .apc-website-case .apc-browser-bar { min-height: 34px; gap: 10px; padding: 7px 10px; }
  .apc-website-project .project-info { flex-wrap: wrap; }
  .apc-website-project .project-info > span:first-child { flex: 1 1 240px; }
  .apc-website-project .project-action { margin-top: 6px; }
  .apc-website-case .apc-website-gallery { grid-template-columns: 1fr; gap: 20px; }
  .apc-website-case .apc-website-gallery > .apc-website-mobile-screen { grid-column: 1 / -1; }
  .apc-website-case .apc-screen-note { margin-bottom: 28px; }
  .apc-website-case .apc-website-screen-figure { padding: 12px; }
}

/* Amin geometric signature, original vector geometry inspired by Persian girih.
   Three touchpoints only. SVG masks inherit the existing brand palette.
   Decorative surfaces have no text content, no motion and no pointer events. */
:root {
  --apc-signature-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.15%22%20stroke-linejoin%3D%22miter%22%3E%0A%20%20%3Cpolygon%20points%3D%2248.000%2C8.000%2059.716%2C19.715%2076.284%2C19.716%2076.285%2C36.284%2088.000%2C48.000%2076.285%2C59.716%2076.284%2C76.284%2059.716%2C76.285%2048.000%2C88.000%2036.284%2C76.285%2019.716%2C76.284%2019.715%2C59.716%208.000%2C48.000%2019.715%2C36.284%2019.716%2C19.716%2036.284%2C19.715%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M48%2028%2068%2048%2048%2068%2028%2048Z%20M34%2034H62V62H34Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M0%2040%208%2048%200%2056%20M96%2040%2088%2048%2096%2056%20M40%200%2048%208%2056%200%20M40%2096%2048%2088%2056%2096%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E");
  --apc-signature-border: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2224%22%20viewBox%3D%220%200%2064%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.05%22%20stroke-linejoin%3D%22miter%22%3E%0A%20%20%3Cpolygon%20points%3D%2232.000%2C2.000%2034.929%2C4.929%2039.071%2C4.929%2039.071%2C9.071%2042.000%2C12.000%2039.071%2C14.929%2039.071%2C19.071%2034.929%2C19.071%2032.000%2C22.000%2029.071%2C19.071%2024.929%2C19.071%2024.929%2C14.929%2022.000%2C12.000%2024.929%2C9.071%2024.929%2C4.929%2029.071%2C4.929%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M0%208H8L16%2016H24%20M0%2016H8L10.5%2013.5%20M13.5%2010.5%2016%208H24%20M40%2016H48L56%208H64%20M40%208H48L50.5%2010.5%20M53.5%2013.5%2056%2016H64%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E");
  --apc-signature-size: 96px;
  --apc-signature-hero-opacity: .25;
  --apc-signature-strip-opacity: .24;
  --apc-signature-footer-opacity: .21;
}

@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
/* The motif replaces the construction grid around the original mark.
   The solid mark-board remains in front, preserving all logo artwork. */
.hero .construction-grid {
  inset: -36px;
  background-image: none;
  background-color: var(--ink, #0e0f3c);
  -webkit-mask-image: var(--apc-signature-tile);
  mask-image: var(--apc-signature-tile);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: var(--apc-signature-size) var(--apc-signature-size);
  mask-size: var(--apc-signature-size) var(--apc-signature-size);
  -webkit-mask-position: center;
  mask-position: center;
  opacity: var(--apc-signature-hero-opacity);
  pointer-events: none;
}

/* A narrow frieze sits in its own space above the disciplines. */
.discipline-strip {
  position: relative;
  padding-top: 24px;
}
.discipline-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background-color: var(--slate, #5c758a);
  -webkit-mask-image: var(--apc-signature-border);
  mask-image: var(--apc-signature-border);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 64px 24px;
  mask-size: 64px 24px;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: var(--apc-signature-strip-opacity);
  pointer-events: none;
}

/* The footer repeats the same frieze, safely above its text and links. */
.contact footer {
  position: relative;
  padding-top: 48px;
}
.contact footer::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  height: 24px;
  background-color: var(--paper, #fefefe);
  -webkit-mask-image: var(--apc-signature-border);
  mask-image: var(--apc-signature-border);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 64px 24px;
  mask-size: 64px 24px;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: var(--apc-signature-footer-opacity);
  pointer-events: none;
}

@media (max-width: 760px) {
  .hero .construction-grid {
    inset: -24px;
    --apc-signature-size: 72px;
  }
  .discipline-strip { padding-top: 24px; }
  .contact footer { padding-top: 48px; }
}
@media (forced-colors: active) {
  .hero .construction-grid,
  .discipline-strip::before,
  .contact footer::before { display: none; }
  .discipline-strip { padding-top: 0; }
  .contact footer { padding-top: 24px; }
}
}