/* ═══════════════════════════════════════════════════════════════
   MOZEART DESIGNZ — v4
   sans-only · earth tones · broken grid · afrofuturist
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* earth tones — grounded palette, pulled from gallery wood + bronze */
  --bone:     #E8DFCC;   /* paper */
  --bone-2:   #D9CFB6;
  --clay:     #C8A375;
  --ochre:    #B07A3A;
  --umber:    #6B4A2A;
  --bark:     #3A2818;
  --ink:      #1A1108;   /* deep earth, not pure black */
  --ink-2:    #241810;
  --stone:    #8A7A68;

  /* afrofuturist chroma — kept narrow and earthen */
  --c-sun:    oklch(0.72 0.14 60);     /* amber */
  --c-rust:   oklch(0.58 0.15 35);     /* rust */
  --c-copper: oklch(0.68 0.13 45);     /* copper */
  --c-moss:   oklch(0.55 0.08 130);    /* moss */
  --c-sky:    oklch(0.70 0.08 220);    /* dusty sky */

  --accent:   var(--c-sun);
  --border:   rgba(232,223,204,0.10);
  --border-dk:rgba(26,17,8,0.12);

  /* architectural: mono-ish sans headlines, tighter sans body */
  --display:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:     "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1440px;
  --pad:  clamp(20px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior: smooth; }
body{
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }

/* ─── UTILITY TYPE ─── */
.eyebrow, .tag, .kicker{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow{ color: var(--accent); }
.tag{ color: var(--stone); }

.display{
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.95;
}

/* ═══════════════════════════════════════════════════════════════
   TOP NAV  —  minimal, left-aligned, architectural
   ═══════════════════════════════════════════════════════════════ */
.topbar{
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 20px var(--pad);
  background: linear-gradient(to bottom, rgba(26,17,8,0.82), rgba(26,17,8,0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wordmark{
  display:flex; align-items:center; gap: 12px;
  color: var(--bone);
}
.wordmark .mark{
  width: 36px; height: 34px;
  background-image: url("assets/mozeart-logo-bone.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex:none;
  filter: drop-shadow(0 0 10px color-mix(in oklch, var(--accent) 35%, transparent));
  transition: filter .3s;
}
.wordmark:hover .mark{
  filter: drop-shadow(0 0 16px color-mix(in oklch, var(--accent) 60%, transparent));
}
.wordmark .name{
  font-family: var(--display);
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.wordmark .llc{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--stone);
}
.nav{
  justify-self: center;
  display:flex; gap: 4px;
  background: rgba(26,17,8,0.6);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 999px;
}
.nav a{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(232,223,204,0.7);
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .25s, color .25s;
}
.nav a:hover{ color: var(--bone); }
.nav a.active{ background: rgba(232,223,204,0.08); color: var(--bone); }
.status{
  display:flex; align-items:center; gap:10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--stone);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.status .dot{
  width:6px;height:6px;
  background: var(--c-moss);
  box-shadow: 0 0 8px var(--c-moss);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.4} 50%{opacity:1} }

/* ═══════════════════════════════════════════════════════════════
   HERO  —  experimental, broken-grid, photo-forward
   ═══════════════════════════════════════════════════════════════ */
.hero{
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 120px var(--pad) 40px;
  overflow: hidden;
  isolation: isolate;
}
.hero-photo{
  position:absolute; inset:0; z-index:-3;
  background-image: url("assets/dg-installation.jpg");
  background-size: cover;
  background-position: center 38%;
  filter: saturate(0.95) contrast(1.06);
}
.hero-grade{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(26,17,8,0.58) 0%, rgba(26,17,8,0.30) 30%, rgba(26,17,8,0.52) 62%, rgba(26,17,8,0.92) 100%),
    radial-gradient(ellipse 60% 55% at 25% 45%, color-mix(in oklch, var(--c-sun) 20%, transparent), transparent 65%);
}
/* broken grid overlay: a giant offset rotated type block */
.hero-ghost{
  position:absolute; z-index:-1;
  left: -4%; bottom: 8%;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(180px, 26vw, 420px);
  letter-spacing: -0.06em;
  line-height: 0.82;
  color: rgba(232,223,204,0.04);
  text-transform: uppercase;
  pointer-events:none;
  white-space: nowrap;
}
/* hero content grid — asymmetric, "breaks" */
.hero-body{
  align-self: end;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  row-gap: 28px;
}
.hero-top{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: auto;
  padding-top: 0;
}
.hero-coord{
  grid-column: 3 / span 4;
  margin-left: -72px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(232,223,204,0.88);
  line-height: 1.9;
  margin-top: -18px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.hero-coord .k{ color: var(--accent); }
.hero-coord.c-right{ grid-column: 9 / -1; text-align: right; }

.hero-tag-chip{
  grid-column: 6 / 8;
  justify-self: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(232,223,204,0.7);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(26,17,8,0.45);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

/* big title spans, with offset aside that "breaks" the row */
.hero-title-wrap{
  grid-column: 1 / 9;
  align-self: end;
}
.hero-title{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(60px, 10vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--bone);
  text-transform: uppercase;
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.hero-title .thin{ font-weight: 400; }
.hero-title .wide{ letter-spacing: 0.02em; font-weight: 400; text-transform:none; font-style: italic; color: color-mix(in oklch, var(--accent) 75%, #fff); }
.hero-title .strike{
  position: relative;
  display: inline-block;
}
.hero-title .strike::after{
  content:""; position:absolute;
  left:-4%; right:-4%; top:56%;
  height: 6px;
  background: var(--accent);
  opacity: .75;
}

.hero-aside{
  grid-column: 9 / -1;
  align-self: end;
  padding-bottom: 10px;
  display: grid; gap: 22px;
}
.hero-aside .lead{
  font-family: var(--body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--bone);
  text-shadow: 0 1px 14px rgba(0,0,0,0.8), 0 0 3px rgba(0,0,0,0.5);
  margin: 0;
  max-width: 44ch;
}
.hero-aside .lead b{ color: var(--bone); font-weight: 500; }
.hero-cta{
  display:inline-flex; align-items:center; gap: 14px;
  justify-self: start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bone);
  padding: 14px 20px;
  border: 1px solid var(--bone);
  transition: background .3s, color .3s;
  cursor: pointer;
}
.hero-cta:hover{ background: var(--accent); border-color: var(--accent); color: var(--ink); }
.hero-cta .arr{ width:24px; height:1px; background:currentColor; position:relative; }
.hero-cta .arr::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-right:1px solid currentColor; border-top:1px solid currentColor; transform: rotate(45deg); }

.hero-foot{
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(232,223,204,0.18);
  display:flex; justify-content: space-between; align-items:center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232,223,204,0.55);
}
.hero-foot .scroll{ display:flex; align-items:center; gap:10px; }
.hero-foot .scroll .bar{
  width:40px; height:1px;
  background: linear-gradient(to right, var(--bone), transparent);
  animation: slide 2.6s ease-in-out infinite;
}
@keyframes slide{ 0%{transform:translateX(-6px);opacity:.3} 50%{opacity:.9} 100%{transform:translateX(6px);opacity:.3} }

/* ═══════════════════════════════════════════════════════════════
   SECTION SCAFFOLD
   ═══════════════════════════════════════════════════════════════ */
.section{
  position: relative;
  padding: clamp(80px, 9vw, 140px) var(--pad);
}
.section.paper{ background: var(--bone); color: var(--ink); }
.section.paper .tag{ color: color-mix(in oklch, var(--ink) 55%, transparent); }

/* section head — architectural: number + big title, asymmetric */
.section-head{
  display:grid;
  grid-template-columns: 120px 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 56px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.section.paper .section-head{ border-bottom-color: var(--border-dk); }
.section-head .num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--accent);
}
.section-head h2{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
  text-transform: uppercase;
}
/* Portfolio "Gallery Exhibitions" — oversized, full-width */
#work .section-head{ grid-template-columns: 120px 1fr; row-gap: 20px; }
.gallery-title{
  grid-column: 1 / -1;
  font-size: clamp(56px, 11vw, 168px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.04em !important;
  width: 100%;
}
.gallery-title .italic{ display: inline-block; margin-left: 0.14em; }
@media (max-width: 700px){ .gallery-title .italic{ display:block; margin-left: 0; } }
.section-head h2 .italic{
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  font-size: 0.7em;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--accent);
  display:block;
  margin-top: 6px;
}
.section-head .meta{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform:uppercase;
  color: var(--stone);
  text-align:right;
  padding-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   STUDIO NOTE — broken text grid
   ═══════════════════════════════════════════════════════════════ */
.studio-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  row-gap: 32px;
}
.studio-lede{
  grid-column: 2 / 10;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: uppercase;
}
.studio-lede em{
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--accent);
}
.studio-body{
  grid-column: 7 / 12;
  display: grid; gap: 14px;
  margin-top: 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: color-mix(in oklch, var(--ink) 72%, transparent);
}
.studio-body b{ color: var(--ink); font-weight: 500; }
.studio-side{
  grid-column: 2 / 6;
  margin-top: 24px;
  border-top: 1px solid var(--border-dk);
  padding-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--umber);
}
.studio-side ul{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap: 8px; }
.studio-side li{ display:grid; grid-template-columns: 110px 1fr; gap: 12px; }
.studio-side li span:first-child{ color: var(--stone); }

/* stats band */
.stats{
  grid-column: 1 / -1;
  margin-top: 64px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-dk);
}
.stat{
  padding: 28px 22px;
  border-right: 1px solid var(--border-dk);
}
.stat:last-child{ border-right:none; }
.stat .n{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat .l{
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink) 55%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO — by category, broken grid, big hero per project
   ═══════════════════════════════════════════════════════════════ */
.cat-bar{
  display:flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 8px;
  border: 1px solid var(--border);
  background: rgba(232,223,204,0.02);
  width: fit-content;
}
.cat-btn{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232,223,204,0.65);
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .25s, color .25s;
  border-radius: 2px;
}
.cat-btn:hover{ color: var(--bone); }
.cat-btn.on{
  background: var(--accent);
  color: var(--ink);
}
.cat-btn .count{
  font-size: 9px;
  margin-left: 6px;
  opacity: .7;
}

/* Portfolio is a masonry-ish CSS grid with "breaks" — cards span different widths */
.portfolio{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: 24px;
  row-gap: 32px;
}
.proj{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display:flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--border);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.proj:hover{ border-color: rgba(232,223,204,0.22); }
.proj:hover .proj-img .ph{ transform: scale(1.04); }
.proj-img{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bark);
}
.proj-img .ph{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.proj-img .ph::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(26,17,8,0) 40%, rgba(26,17,8,0.85) 100%);
}
.proj-img .idx{
  position:absolute; top:16px; left:16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--bone);
  padding: 4px 10px;
  border: 1px solid rgba(232,223,204,0.45);
  background: rgba(26,17,8,0.45);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.proj-img .cat{
  position:absolute; top:16px; right:16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 5px 10px;
  background: var(--accent);
  z-index: 2;
}
.proj-img .title{
  position:absolute; bottom: 18px; left:18px; right: 18px;
  z-index: 2;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-transform: uppercase;
}
.proj-img .title em{
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  font-size: 0.7em;
  letter-spacing: -0.005em;
  text-transform: none;
  display:block;
  color: color-mix(in oklch, var(--accent) 70%, #fff);
  margin-top: 6px;
}
.proj-body{
  padding: 18px 18px 20px;
  display:grid; gap: 10px;
}
.proj-meta{ display:flex; flex-wrap: wrap; gap: 14px; }
.proj-meta .m{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform:uppercase;
  color: var(--stone);
}
.proj-meta .m b{ color: var(--bone); font-weight: 400; margin-left: 6px; letter-spacing: 0.04em; }
.proj-desc{
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(232,223,204,0.72);
  max-width: 58ch;
}
.proj-foot{
  display:flex; justify-content: space-between; align-items:center;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.proj-foot .dossier{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform:uppercase;
  color: var(--bone);
}
.proj-foot .dossier:hover{ color: var(--accent); }
.proj-foot .coord{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--stone);
}

/* broken-grid spans */
.proj.hero-span    { grid-column: span 12; }   /* full-bleed featured */
.proj.hero-span .proj-img{ aspect-ratio: 21 / 9; }
.proj.hero-span .proj-body{ padding: 22px 24px 26px; display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; align-items: start; }
.proj.hero-span .proj-desc{ grid-column: 1 / 3; }
.proj.hero-span .proj-foot{ border-top: none; padding-top: 0; margin-top: 0; flex-direction: column; gap: 10px; align-items:flex-end; }
.proj.wide-span   { grid-column: span 7; }
.proj.normal-span { grid-column: span 5; }
.proj.small-span  { grid-column: span 4; }
.proj.med-span    { grid-column: span 6; }
.proj.offset      { grid-column: 2 / span 6; } /* inset to break the grid */
.proj.offset-r    { grid-column: 7 / span 5; }

@media (max-width: 1100px){
  .proj.hero-span{ grid-column: 1 / -1; }
  .proj.hero-span .proj-body{ grid-template-columns: 1fr; }
  .proj.hero-span .proj-foot{ align-items:flex-start; }
  .proj.wide-span, .proj.normal-span, .proj.small-span, .proj.med-span{ grid-column: span 6; }
  .proj.offset, .proj.offset-r{ grid-column: 1 / -1; }
}

/* colored background stand-ins for portfolio tiles (until real photos) */
.bg-clay    { background: linear-gradient(135deg, #5C3A1F, #2A1A0E); }
.bg-moss    { background: linear-gradient(135deg, #2E3324, #171C12); }
.bg-rust    { background: linear-gradient(135deg, #5A2F1A, #2A1510); }
.bg-copper  { background: linear-gradient(135deg, #6B3E20, #301808); }
.bg-sky     { background: linear-gradient(135deg, #2A3540, #111820); }
.bg-ochre   { background: linear-gradient(135deg, #6B4A20, #30200F); }
.bg-bone    { background: linear-gradient(135deg, #8A7A60, #3C3222); }
.bg-gallery { background-image: url("assets/hero-rib.jpg"); background-size: cover; background-position: center 55%; }

/* ─── multi-view portfolio tile (click to cycle photos) ─── */
.proj-img[data-gallery]{ cursor: zoom-in; }
.proj-img[data-gallery] .ph{
  opacity: 0;
  transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.proj-img[data-gallery] .ph.on{ opacity: 1; }
.proj:hover .proj-img[data-gallery] .ph.on{ transform: scale(1.04); }
.proj-img[data-gallery] .title{ right: 100px; }
.proj-img[data-gallery] .title{ bottom: 46px; }
.gallery-dots{
  position:absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display:flex; gap: 7px; z-index: 3;
}
.gallery-dots .gd{
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(232,223,204,0.4);
  border: none; padding: 0; cursor: pointer;
  transition: background .25s, transform .25s;
}
.gallery-dots .gd.on{ background: var(--accent); transform: scale(1.25); }
.view-badge{
  position:absolute; bottom: 14px; right: 16px; z-index: 4;
  display:flex; align-items:center; gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 5px 9px;
  background: rgba(26,17,8,0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(232,223,204,0.25);
  border-radius: 2px;
  pointer-events: none;
}
.view-badge .count{ color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   SOCIAL NETWORKING PROJECT — STEAM / interactive
   ═══════════════════════════════════════════════════════════════ */
.snp{
  position: relative;
  background:
    radial-gradient(ellipse 50% 60% at 15% 20%, color-mix(in oklch, var(--c-sky) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 80%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 60%),
    #0C0A07;
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
}
/* blueprint grid + live network overlay */
.snp-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(232,223,204,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,223,204,0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 55%, transparent 100%);
}
.snp-net{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9; }
.snp-net line{ stroke: color-mix(in oklch, var(--accent) 45%, transparent); stroke-width:1; }
.snp-net .node{ fill: var(--bone); }
.snp-net .node.hot{ fill: var(--accent); }
.snp-inner{ position:relative; z-index:1; }

/* kicker row */
.snp-kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.snp-kicker .ln{ flex:1; height:1px; background: var(--border); }
.snp-kicker .steam{ color: var(--stone); }
.snp-kicker .steam b{ color: var(--bone); font-weight: 500; }

.snp-title{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(38px, 6.2vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0 0 32px;
  max-width: 15ch;
}
.snp-title .flow{
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
  color: color-mix(in oklch, var(--accent) 78%, #fff);
}
.snp-lede-row{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 80px;
}
.snp-lede{
  grid-column: 1 / 8;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.65;
  color: rgba(232,223,204,0.82);
  margin: 0;
}
.snp-lede b{ color: var(--bone); font-weight: 500; }
.snp-defn{
  grid-column: 9 / 13;
  border-left: 1px solid var(--border);
  padding-left: 24px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--stone);
}
.snp-defn b{ color: var(--accent); display:block; margin-bottom: 8px; letter-spacing: 0.18em; text-transform: uppercase; font-size: 10px; }
.snp-defn .term{ color: var(--bone); }

/* process flow — mapped to STEAM */
.snp-process{
  margin-bottom: 88px;
}
.snp-process-head{
  display:flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 40px;
}
.snp-process-head h3{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.snp-process-head span{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}
.snp-steps{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  counter-reset: step;
}
.snp-step{
  position: relative;
  padding: 0 20px 0 0;
}
.snp-step::before{
  content:"";
  position:absolute; top: 7px; left: 0; right: 0;
  height:1px; background: var(--border);
}
.snp-step::after{
  content:"";
  position:absolute; top: 3px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.snp-step .disc{
  display:block;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.snp-step h4{
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  margin: 10px 0 8px;
  color: var(--bone);
}
.snp-step p{
  font-size: 13px;
  line-height: 1.6;
  color: rgba(232,223,204,0.62);
  margin: 0;
}

/* photo gallery — broken grid */
.snp-gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-bottom: 72px;
}
.snp-shot{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #17130D;
}
.snp-shot .img{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.snp-shot:hover .img{ transform: scale(1.05); }
.snp-shot::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,10,7,0) 45%, rgba(12,10,7,0.82) 100%);
  z-index:1;
}
.snp-shot .cap{
  position:absolute; left:16px; right:16px; bottom:14px; z-index:2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bone);
  line-height: 1.4;
}
.snp-shot .cap .n{
  display:block;
  color: var(--accent);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.snp-shot .frame-h{ aspect-ratio: 16/10; }
.snp-shot .frame-v{ aspect-ratio: 3/4; }
/* spans */
.snp-shot.s-a{ grid-column: span 5; }
.snp-shot.s-a .img{ position:absolute; }
.snp-shot.s-a{ aspect-ratio: 4/3; }
.snp-shot.s-b{ grid-column: span 7; aspect-ratio: 16/10; }
.snp-shot.s-c{ grid-column: span 4; aspect-ratio: 3/4; }
.snp-shot.s-d{ grid-column: span 4; aspect-ratio: 3/4; }
.snp-shot.s-e{ grid-column: span 4; aspect-ratio: 3/4; }
.snp-shot.s-f{ grid-column: span 7; aspect-ratio: 16/10; }
.snp-shot.s-g{ grid-column: span 5; aspect-ratio: 4/3; }

/* impact band */
.snp-impact{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 56px;
}
.snp-impact .cell{
  padding: 32px 24px;
  border-right: 1px solid var(--border);
}
.snp-impact .cell:last-child{ border-right: none; }
.snp-impact .n{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.snp-impact .n em{ font-style: normal; color: var(--accent); }
.snp-impact .l{
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.snp-cta{
  display:flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.snp-cta p{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  max-width: 20ch;
}
.snp-cta p em{ font-family: var(--body); font-weight: 300; font-style: italic; text-transform: none; color: var(--accent); }
.snp-cta a{
  display:inline-flex; align-items:center; gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  padding: 16px 24px;
  white-space: nowrap;
  transition: background .3s;
}
.snp-cta a:hover{ background: var(--bone); }

/* ═══════════════════════════════════════════════════════════════
   SHOP — Originals & Collectibles (Kemetic / artifact treatment)
   ═══════════════════════════════════════════════════════════════ */
.shop{
  position: relative;
  background:
    radial-gradient(ellipse 60% 70% at 78% 30%, color-mix(in oklch, var(--c-sun) 24%, transparent), transparent 62%),
    linear-gradient(160deg, #2A1B0E 0%, #1A1108 55%, #120C07 100%);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
}
/* faint sun-disk / cosmogram motif */
.shop-disc{
  position:absolute; z-index:0; pointer-events:none;
  top: -12%; right: -8%;
  width: min(560px, 55vw); height: min(560px, 55vw);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--c-sun) 30%, transparent), transparent 60%);
  opacity: .5;
}
.shop-rings{
  position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.4;
}
.shop-inner{ position: relative; z-index:1; }
.shop-kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-sun);
  margin-bottom: 26px;
}
.shop-kicker .ln{ flex:1; height:1px; background: var(--border); }
.shop-kicker .r{ color: var(--stone); }
.shop-head{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 56px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.shop-title{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
}
.shop-title .italic{
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
  color: color-mix(in oklch, var(--c-sun) 80%, #fff);
}
.shop-head .sub{
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(232,223,204,0.72);
  max-width: 42ch;
  text-align: right;
}

/* product feature */
.product{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
}
.product-visual{
  position: relative;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, color-mix(in oklch, var(--c-sun) 22%, transparent), transparent 68%),
    linear-gradient(180deg, #241811, #17100A);
  min-height: 520px;
  overflow: hidden;
  display:flex; align-items:center; justify-content:center;
}
.product-visual img{
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}
.product-visual .artifact-tag{
  position:absolute; top: 18px; left: 18px; z-index:2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 6px 12px;
  background: rgba(18,12,7,0.6);
  border: 1px solid rgba(232,223,204,0.3);
  backdrop-filter: blur(4px);
}
.product-visual .glyphs{
  position:absolute; bottom: 16px; left: 18px; right: 18px; z-index:2;
  display:flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232,223,204,0.7);
}
.product-info{
  display:flex; flex-direction: column;
  padding: 8px 0;
}
.product-info .cat{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-sun);
  margin-bottom: 16px;
}
.product-info h3{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.product-info h3 em{ font-family: var(--body); font-weight: 300; font-style: italic; text-transform: none; color: color-mix(in oklch, var(--c-sun) 80%, #fff); }
.product-price{
  font-family: var(--display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 14px 0 22px;
  display:flex; align-items: baseline; gap: 12px;
}
.product-price .note{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.product-info p{
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(232,223,204,0.8);
  margin: 0 0 16px;
  max-width: 52ch;
}
.product-info p b{ color: var(--bone); font-weight: 500; }
.product-specs{
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 8px 0 26px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.product-specs .sp .k{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 5px;
}
.product-specs .sp .v{
  font-family: var(--body);
  font-size: 14px;
  color: var(--bone);
}
.product-actions{
  display:flex; align-items:center; gap: 16px;
  margin-top: auto;
  flex-wrap: wrap;
}
.buy-btn{
  display:inline-flex; align-items:center; gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--c-sun);
  padding: 17px 28px;
  transition: background .3s, transform .2s;
}
.buy-btn:hover{ background: var(--bone); transform: translateY(-1px); }
.product-actions .terms{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}
@media (max-width: 900px){
  .shop-head{ grid-template-columns: 1fr; }
  .shop-head .sub{ text-align: left; }
  .product{ grid-template-columns: 1fr; }
  .product-visual{ min-height: 400px; }
}

/* branded Afrofuturist banner */
.shop-banner{
  position: relative;
  margin-bottom: 48px;
  border: 1px solid var(--border);
  overflow: hidden;
  aspect-ratio: 2.5 / 1;
}
.shop-banner img{ width:100%; height:100%; object-fit: cover; display:block; }
.shop-banner::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(18,12,7,0.35), transparent 40%, transparent 70%, rgba(18,12,7,0.35));
  pointer-events:none;
}
.shop-banner .cap{
  position:absolute; left: 20px; bottom: 16px; z-index:2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(232,223,204,0.85);
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
/* product gallery (main + thumbnails) */
.product-visual{ cursor: zoom-in; }
.product-visual .pv{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .5s ease;
}
.product-visual .pv.on{ opacity: 1; }
.product-thumbs{
  display:flex; gap: 10px;
  margin-top: 14px;
}
.product-thumbs .th{
  flex: 1;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  background-size: cover; background-position: center;
  cursor: pointer;
  opacity: .55;
  transition: opacity .25s, border-color .25s, transform .2s;
  padding: 0;
}
.product-thumbs .th:hover{ opacity: .85; transform: translateY(-2px); }
.product-thumbs .th.on{ opacity: 1; border-color: var(--c-sun); }

/* ═══════════════════════════════════════════════════════════════
   PUBLIC ART — commission dossier / fabrication
   ═══════════════════════════════════════════════════════════════ */
.pub{
  position: relative;
  background:
    radial-gradient(ellipse 55% 60% at 20% 15%, color-mix(in oklch, var(--c-sky) 12%, transparent), transparent 62%),
    radial-gradient(ellipse 55% 60% at 82% 85%, color-mix(in oklch, var(--c-copper) 12%, transparent), transparent 62%),
    #14100B;
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
}
.pub-blueprint{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(232,223,204,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,223,204,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 45%, #000 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 45%, #000 50%, transparent 100%);
}
.pub-inner{ position: relative; z-index:1; }
.pub-siteview{
  position: relative;
  margin: 0 0 48px;
  border: 1px solid var(--border);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: #0B0D12;
  --split: 50%;
}
.pub-siteview .half{
  position:absolute; top:0; bottom:0;
  width: 56%;
  overflow: hidden;
}
.pub-siteview .half.day{ left: 0; }
.pub-siteview .half.night{ right: 0; }
.pub-siteview .half img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover; display:block;
}
/* keep each sculpture inside its own visible wedge, clear of the seam */
.pub-siteview .half.day img{ object-position: 88% 42%; }
.pub-siteview .half.night img{ object-position: 2% 48%; }
/* diagonal reveal: day on the left, dusk on the right */
.pub-siteview .half.day{
  clip-path: polygon(0 0, 100% 0, 78.6% 100%, 0 100%);
}
.pub-siteview .half.night{
  clip-path: polygon(21.4% 0, 100% 0, 100% 100%, 0 100%);
}
/* luminous seam along the cut */
.pub-siteview .seam{
  position:absolute; inset:-2% -2%;
  z-index: 3; pointer-events:none;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    color-mix(in oklch, var(--accent) 85%, #fff) 50%,
    transparent calc(50% + 1px));
  clip-path: polygon(calc(var(--split) + 6%) 0, calc(var(--split) + 7.2%) 0, calc(var(--split) - 4.8%) 100%, calc(var(--split) - 6%) 100%);
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 55%, transparent),
    color-mix(in oklch, var(--accent) 95%, #fff) 50%,
    color-mix(in oklch, var(--accent) 55%, transparent));
  box-shadow: 0 0 24px color-mix(in oklch, var(--accent) 60%, transparent);
  mix-blend-mode: screen;
}
.pub-siteview .stamp{
  position:absolute; top: 16px; left: 16px; z-index:4;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 6px 10px;
  background: rgba(11,13,18,0.6);
  border: 1px solid rgba(232,223,204,0.28);
  backdrop-filter: blur(4px);
}
/* per-half labels sitting either side of the seam */
.pub-siteview .tag{
  position:absolute; z-index:4;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display:flex; align-items:center; gap: 9px;
  white-space: nowrap;
}
.pub-siteview .tag i{ width: 6px; height: 6px; border-radius: 50%; display:block; }
.pub-siteview .tag.l{
  left: 18px; bottom: 44px;
  color: #F5F2EA;
  text-shadow: 0 1px 12px rgba(0,0,0,0.85);
}
.pub-siteview .tag.l i{ background: var(--c-sky); box-shadow: 0 0 10px var(--c-sky); }
.pub-siteview .tag.r{
  right: 18px; bottom: 44px;
  color: var(--bone);
  text-shadow: 0 1px 12px rgba(0,0,0,0.9);
}
.pub-siteview .tag.r i{ background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.pub-siteview .cap{
  position:absolute; left:18px; right:18px; bottom:14px; z-index:4;
  display:flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232,223,204,0.85);
  text-shadow: 0 1px 10px rgba(0,0,0,0.85);
}
@media (max-width: 700px){
  .pub-siteview{ aspect-ratio: 4 / 3; }
  .pub-siteview .tag{ font-size: 9px; letter-spacing: 0.14em; }
}
.pub-kicker{
  display:flex; align-items:center; gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 26px;
}
.pub-kicker .ln{ flex:1; height:1px; background: var(--border); }
.pub-kicker .st{ color: var(--stone); }
.pub-kicker .st b{ color: var(--c-moss); font-weight: 500; }
.pub-title{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0 0 40px;
}
.pub-title .italic{
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
  color: color-mix(in oklch, var(--accent) 80%, #fff);
}
/* project brief */
.pub-brief{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap: 40px;
  align-items: start;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}
.pub-brief h3{
  grid-column: 1 / 6;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.pub-brief h3 span{
  display:block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 12px;
}
.pub-brief .copy{ grid-column: 7 / 13; display:grid; gap: 14px; }
.pub-brief .copy p{
  font-size: 15px;
  line-height: 1.75;
  color: rgba(232,223,204,0.8);
  margin: 0;
  max-width: 58ch;
}
.pub-brief .copy p b{ color: var(--bone); font-weight: 500; }
/* fact strip */
.pub-facts{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 64px;
}
.pub-facts .f{ padding: 26px 22px; border-right: 1px solid var(--border); }
.pub-facts .f:last-child{ border-right: none; }
.pub-facts .k{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.pub-facts .v{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 23px);
  letter-spacing: -0.01em;
  color: var(--bone);
}
.pub-facts .v.live{ color: var(--c-moss); }
/* creature plinths */
.pub-figures{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 64px;
}
.figure-card{
  border: 1px solid var(--border);
  background: rgba(232,223,204,0.02);
  display:flex; flex-direction: column;
  overflow: hidden;
}
.figure-plinth{
  position: relative;
  background: #EDEDED;
  aspect-ratio: 4 / 3;
  display:flex; align-items:center; justify-content:center;
  overflow: hidden;
}
.figure-plinth img{
  height: 88%;
  width: auto;
  object-fit: contain;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.figure-card:hover .figure-plinth img{ transform: scale(1.05); }
.figure-plinth .stamp{
  position:absolute; top: 14px; left: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6B5A46;
  border: 1px solid rgba(107,90,70,0.35);
  padding: 5px 9px;
}
.figure-plinth .scalebar{
  position:absolute; bottom: 14px; right: 14px;
  display:flex; align-items:center; gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6B5A46;
}
.figure-plinth .scalebar i{ display:block; width: 42px; height: 1px; background: #6B5A46; }
.figure-body{ padding: 24px 24px 26px; }
.figure-body .role{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.figure-body h4{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.figure-body h4 em{
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  font-size: 0.62em;
  text-transform: none;
  letter-spacing: -0.005em;
  color: color-mix(in oklch, var(--accent) 78%, #fff);
  display:block;
  margin-top: 6px;
}
.figure-body p{
  font-size: 14px;
  line-height: 1.7;
  color: rgba(232,223,204,0.75);
  margin: 0 0 16px;
}
.figure-specs{
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.figure-specs .k{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 4px;
}
.figure-specs .v{ font-size: 13.5px; color: var(--bone); }
/* phase tracker */
.pub-phases{ margin-bottom: 56px; }
.pub-phases-head{
  display:flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 36px;
}
.pub-phases-head h3{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.pub-phases-head span{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}
.phase-track{ display:grid; grid-template-columns: repeat(5,1fr); gap: 0; }
.phase{ position: relative; padding-right: 20px; }
.phase::before{
  content:""; position:absolute; top: 6px; left: 0; right: 0; height: 1px;
  background: var(--border);
}
.phase::after{
  content:""; position:absolute; top: 2px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: #3A2F22;
  border: 1px solid rgba(232,223,204,0.25);
}
.phase.done::after{ background: var(--c-moss); border-color: var(--c-moss); box-shadow: 0 0 10px color-mix(in oklch, var(--c-moss) 60%, transparent); }
.phase.active::after{ background: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px var(--accent); }
.phase .n{
  display:block; margin-top: 22px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}
.phase h5{
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  margin: 8px 0 6px;
  color: var(--bone);
}
.phase.active h5{ color: var(--accent); }
.phase p{ font-size: 12.5px; line-height: 1.6; color: rgba(232,223,204,0.58); margin: 0; }
/* CTA */
.pub-cta{
  display:flex; flex-wrap: wrap; align-items:center; justify-content: space-between; gap: 24px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}
.pub-cta p{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  max-width: 24ch;
}
.pub-cta p em{ font-family: var(--body); font-weight: 300; font-style: italic; text-transform: none; color: var(--accent); }
.pub-cta a{
  display:inline-flex; align-items:center; gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  padding: 16px 26px;
  white-space: nowrap;
  transition: background .3s;
}
.pub-cta a:hover{ background: var(--bone); }
@media (max-width: 900px){
  .pub-brief{ grid-template-columns: 1fr; gap: 24px; }
  .pub-brief h3, .pub-brief .copy{ grid-column: 1 / -1; }
  .pub-facts{ grid-template-columns: 1fr 1fr; }
  .pub-facts .f:nth-child(2){ border-right: none; }
  .pub-facts .f:nth-child(1), .pub-facts .f:nth-child(2){ border-bottom: 1px solid var(--border); }
  .pub-figures{ grid-template-columns: 1fr; }
  .phase-track{ grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .phase::before{ display:none; }
}

@media (max-width: 900px){
  .snp-lede-row{ grid-template-columns: 1fr; gap: 24px; }
  .snp-lede, .snp-defn{ grid-column: 1 / -1; }
  .snp-defn{ border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 20px; }
  .snp-steps{ grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .snp-step::before{ display:none; }
  .snp-gallery{ gap: 12px; }
  .snp-shot.s-a, .snp-shot.s-b, .snp-shot.s-c, .snp-shot.s-d,
  .snp-shot.s-e, .snp-shot.s-f, .snp-shot.s-g{ grid-column: span 6; aspect-ratio: 3/4; }
  .snp-impact{ grid-template-columns: 1fr 1fr; }
  .snp-impact .cell:nth-child(2){ border-right: none; }
  .snp-impact .cell:nth-child(1), .snp-impact .cell:nth-child(2){ border-bottom: 1px solid var(--border); }
}

/* subtle guide marks inside placeholder tiles */
.ph-guide::before{
  content:""; position:absolute; inset: 12% 18%;
  border: 1px dashed rgba(232,223,204,0.22);
}
.ph-guide::after{
  content: attr(data-label);
  position:absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform:uppercase;
  color: rgba(232,223,204,0.55);
  text-align:center;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT  (bio) — broken grid with portrait + pull quote
   ═══════════════════════════════════════════════════════════════ */
.about-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  row-gap: 40px;
  align-items: start;
}
.about-portrait{
  grid-column: 1 / 6;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at 30% 30%, color-mix(in oklch, var(--c-sun) 28%, transparent), transparent 60%),
    linear-gradient(135deg, #3A2818, #1A1108);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-dk);
}
.about-portrait::after{
  content: "[ portrait · Chris Mosley ]";
  position: absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(232,223,204,0.55);
}
.about-portrait .meta{
  position:absolute; left: 16px; bottom: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232,223,204,0.6);
  z-index:2;
}
.about-quote{
  grid-column: 7 / 13;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
}
.about-quote em{
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  font-size: 0.78em;
  letter-spacing: -0.005em;
  color: var(--accent);
  text-transform: none;
  display:block;
  margin-top: 10px;
}
.about-text{
  grid-column: 7 / 12;
  display: grid; gap: 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: color-mix(in oklch, var(--ink) 72%, transparent);
}
.about-text p{ margin:0; max-width: 56ch; }
.about-more{
  grid-column: 7 / 12;
  margin-top: 4px;
  display:inline-flex; gap: 10px; align-items:center;
  justify-self: start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 12px 16px;
  border: 1px solid var(--ink);
  transition: background .25s, color .25s;
}
.about-more:hover{ background: var(--accent); border-color: var(--accent); }

/* CV strip */
.cv{
  grid-column: 1 / -1;
  margin-top: 40px;
  border-top: 1px solid var(--border-dk);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.cv .cv-col{
  padding: 28px 0 0 0;
  padding-right: 24px;
  border-right: 1px solid var(--border-dk);
}
.cv .cv-col:last-child{ border-right: none; padding-right: 0; padding-left: 24px; }
.cv .cv-col:first-child{ padding-left: 0; }
.cv .cv-col:nth-child(2){ padding-left: 24px; }
.cv h5{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  font-weight: 500;
}
.cv ul{ list-style:none; padding:0; margin:0; display:grid; gap: 10px; }
.cv li{
  display:grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  font-size: 13.5px;
  color: var(--umber);
}
.cv li .y{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--stone); }

/* ─── STORY / NARRATIVE BIO ─── */
.story-open{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 8px;
}
.story-portrait{
  grid-column: 1 / 5;
  position: sticky;
  top: 96px;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at 30% 28%, color-mix(in oklch, var(--c-sun) 30%, transparent), transparent 60%),
    linear-gradient(135deg, #3A2818, #1A1108);
  border: 1px solid var(--border-dk);
  overflow: hidden;
}
.story-portrait .cap{
  position:absolute; left:16px; bottom:16px; z-index:2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232,223,204,0.6);
}
.story-lede-wrap{ grid-column: 5 / 13; }
.story-lede{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.7vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}
.story-lede em{
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.story-lede-sub{
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in oklch, var(--ink) 72%, transparent);
  max-width: 56ch;
  margin: 0;
}

/* chapters: era label + prose */
.chapters{
  grid-column: 1 / -1;
  margin-top: 40px;
}
.chapter{
  display:grid;
  grid-template-columns: 150px 1fr;
  gap: 44px;
  padding: 44px 0;
  border-top: 1px solid var(--border-dk);
}
.chapter:first-child{ border-top: none; padding-top: 8px; }
.chapter-era{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.7;
  padding-top: 6px;
}
.chapter-era .place{ color: var(--umber); display:block; margin-top: 4px; }
.chapter-body h4{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
  text-transform: uppercase;
}
.chapter-body p{
  font-size: 15.5px;
  line-height: 1.8;
  color: color-mix(in oklch, var(--ink) 74%, transparent);
  margin: 0 0 14px;
  max-width: 60ch;
}
.chapter-body p:last-child{ margin-bottom: 0; }
.chapter-body b{ color: var(--ink); font-weight: 500; }
.chapter-photo{ position: relative; align-self: start; }
.chapter-photo .cap{
  display:block; margin-top: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--stone);
}
.chapter{ grid-template-columns: 118px minmax(0,1fr) clamp(210px, 23%, 300px); gap: 44px; }
.chapter-era{ grid-column: 1; grid-row: 1; }
.chapter-body{ grid-column: 2; grid-row: 1; }
.chapter-photo{ grid-column: 3; grid-row: 1; }
.chapter.flip{ grid-template-columns: clamp(210px, 23%, 300px) minmax(0,1fr) 118px; }
.chapter.flip .chapter-photo{ grid-column: 1; grid-row: 1; }
.chapter.flip .chapter-body{ grid-column: 2; grid-row: 1; }
.chapter.flip .chapter-era{ grid-column: 3; grid-row: 1; }
@media (max-width: 1200px){
  .chapter{ grid-template-columns: 96px minmax(0,1fr) clamp(180px, 20%, 230px); gap: 30px; }
  .chapter.flip{ grid-template-columns: clamp(180px, 20%, 230px) minmax(0,1fr) 96px; }
}
@media (max-width: 900px){
  .chapter, .chapter.flip{ grid-template-columns: 1fr; }
  .chapter .chapter-era, .chapter .chapter-body, .chapter .chapter-photo,
  .chapter.flip .chapter-era, .chapter.flip .chapter-body, .chapter.flip .chapter-photo{ grid-column: 1; }
  .chapter .chapter-era{ grid-row: 1; }
  .chapter .chapter-body{ grid-row: 2; }
  .chapter .chapter-photo{ grid-row: 3; max-width: 320px; }
}

/* full-bleed pull quote between movements */
.story-pull{
  grid-column: 1 / -1;
  margin: 8px 0;
  padding: 56px 0;
  border-top: 1px solid var(--border-dk);
  border-bottom: 1px solid var(--border-dk);
  text-align: center;
}
.story-pull blockquote{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 4.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 20ch;
  text-transform: uppercase;
}
.story-pull blockquote em{
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.story-pull .attr{
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}
/* closing statement */
.story-close{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap: 40px;
  margin-top: 8px;
  padding-top: 40px;
}
.story-close .big{
  grid-column: 1 / 7;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
}
.story-close .big em{ font-family: var(--body); font-weight: 300; font-style: italic; text-transform:none; color: var(--accent); }
.story-close .p{
  grid-column: 7 / 13;
  font-size: 15px;
  line-height: 1.75;
  color: color-mix(in oklch, var(--ink) 74%, transparent);
}
.story-close .p p{ margin: 0 0 14px; max-width: 58ch; }
.story-close .p p:last-child{ margin: 0; }

@media (max-width: 900px){
  .story-portrait{ grid-column: 1 / -1; position: static; }
  .story-lede-wrap, .chapters{ grid-column: 1 / -1; }
  .chapter{ grid-template-columns: 1fr; gap: 12px; }
  .chapter-era{ padding-top: 0; }
  .story-close{ grid-template-columns: 1fr; gap: 20px; }
  .story-close .big, .story-close .p{ grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════════ */
.contact-wrap{
  display:grid;
  grid-template-columns: 5fr 6fr;
  gap: 80px;
  align-items: start;
}
.contact-left .big{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 32px;
  text-transform: uppercase;
}
.contact-left .big em{
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  font-size: 0.58em;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--accent);
  display:block;
  margin-top: 10px;
}
.contact-left .lines{
  display:grid; gap: 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--stone);
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.contact-left .lines .line{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.contact-left .lines .k{ color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; }
.contact-left .lines a{ color: var(--bone); border-bottom: 1px solid transparent; transition: border-bottom-color .25s, color .25s; padding-bottom: 2px; }
.contact-left .lines a:hover{ color: var(--accent); border-bottom-color: var(--accent); }

.form{
  display:grid; gap: 18px;
  padding: 32px;
  border: 1px solid var(--border);
  background: rgba(232,223,204,0.02);
}
.form-head{
  display:flex; justify-content: space-between; align-items:baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.form-head .t{
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
}
.form-head .s{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--stone);
  text-transform: uppercase;
}
.form .row{ display:grid; gap: 6px; }
.form .two{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}
.form input,
.form select,
.form textarea{
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--bone);
  font-family: var(--body);
  font-size: 14.5px;
  padding: 8px 2px;
  outline: none;
  transition: border-bottom-color .2s;
}
.form input::placeholder,
.form textarea::placeholder{ color: color-mix(in oklch, var(--stone) 70%, transparent); }
.form input:focus,
.form select:focus,
.form textarea:focus{ border-bottom-color: var(--accent); }
.form textarea{ resize: vertical; min-height: 100px; }
.form select option{ background: var(--ink); color: var(--bone); }
.form button{
  margin-top: 8px;
  background: var(--accent);
  color: var(--ink);
  border: none;
  padding: 15px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
  font-weight: 500;
}
.form button:hover{ background: var(--bone); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
footer{
  padding: 48px var(--pad) 24px;
  background: var(--ink);
  border-top: 1px solid var(--border);
  display:grid;
  grid-template-columns: 2.5fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
footer .brand{ display:flex; flex-direction: column; gap: 12px; }
footer .brand .line{ display:flex; align-items:center; gap: 12px; }
footer .brand .line .mark{
  width: 36px; height: 34px;
  background-image: url("assets/mozeart-logo-bone.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 10px color-mix(in oklch, var(--accent) 35%, transparent));
}
footer .brand .name{
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
footer .brand small{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--stone);
  line-height: 1.7;
  margin-top: 4px;
}
footer .col h5{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform:uppercase;
  color: var(--accent);
  margin: 4px 0 16px;
  font-weight: 500;
}
footer .col ul{ list-style:none; padding:0; margin:0; display:grid; gap: 10px; }
footer .col a{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--stone);
  transition: color .2s;
}
footer .col a:hover{ color: var(--bone); }
.credit{
  max-width: var(--maxw);
  margin: 32px auto 0;
  padding: 18px var(--pad) 0;
  border-top: 1px solid var(--border);
  display:flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ═══════════════════════════════════════════════════════════════
   TWEAKS
   ═══════════════════════════════════════════════════════════════ */
.tweaks{
  position: fixed;
  right: 20px; bottom: 20px;
  width: 290px;
  background: rgba(26,17,8,0.94);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  z-index: 100;
  padding: 16px 18px 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bone);
  display: none;
  max-height: 80vh; overflow:auto;
}
.tweaks.show{ display: block; }
.tweaks h6{
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform:uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  font-weight: 500;
  display:flex; justify-content: space-between; align-items:center;
}
.tweaks .close{ cursor:pointer; color: var(--stone); background:none; border:none; font-family: var(--mono); font-size: 14px; }
.tweaks .group{ margin-bottom: 14px; }
.tweaks .group > label{
  display:block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform:uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.tweaks .opts{ display:grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tweaks .opt{
  padding: 8px 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--bone);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform:uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color .2s, background .2s, color .2s;
  text-align:left;
}
.tweaks .opt:hover{ border-color: var(--stone); }
.tweaks .opt.on{ border-color: var(--accent); background: color-mix(in oklch, var(--accent) 30%, transparent); }
.tweaks .swatches{ display:flex; gap: 6px; }
.tweaks .sw{
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid transparent; cursor:pointer;
  transition: transform .15s, border-color .15s;
}
.tweaks .sw:hover{ transform: scale(1.08); }
.tweaks .sw.on{ border-color: var(--bone); }

/* ─── responsive cleanup ─── */
@media (max-width: 1120px){
  .nav{ gap: 2px; }
  .nav a{ padding: 8px 9px; letter-spacing: 0.14em; }
}
@media (max-width: 900px){
  .topbar{ grid-template-columns: 1fr auto; }
  .nav{ display:none; }
  .hero-body{ grid-template-columns: repeat(6, 1fr); }
  .hero-top{ grid-template-columns: 1fr; }
  .hero-coord, .hero-coord.c-right{ grid-column: 1 / -1; text-align: left; }
  .hero-tag-chip{ grid-column: 1 / -1; justify-self: start; }
  .hero-title-wrap{ grid-column: 1 / -1; }
  .hero-aside{ grid-column: 1 / -1; }
  .section-head{ grid-template-columns: 1fr; }
  .section-head .meta{ text-align:left; padding-bottom:0; }
  .studio-lede, .studio-body, .studio-side{ grid-column: 1 / -1; }
  .about-portrait, .about-quote, .about-text, .about-more, .cv{ grid-column: 1 / -1; }
  .cv{ grid-template-columns: 1fr; }
  .cv .cv-col{ border-right:none; padding: 24px 0 0 0 !important; border-top: 1px solid var(--border-dk); }
  .cv .cv-col:first-child{ border-top:none; }
  .stats{ grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2){ border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2){ border-bottom: 1px solid var(--border-dk); }
  .contact-wrap{ grid-template-columns: 1fr; gap: 40px; }
  footer{ grid-template-columns: 1fr 1fr; }
}

/* ─── LIGHTBOX ─── */
.lb{position:fixed;inset:0;z-index:900;display:none;background:rgba(10,7,4,.94);backdrop-filter:blur(10px)}
.lb.open{display:grid;grid-template-rows:auto 1fr auto}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px clamp(16px,3vw,36px);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.lb-bar .t{color:var(--bone)}
.lb-close{background:none;border:1px solid var(--border);color:var(--bone);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;cursor:pointer;transition:background .2s,border-color .2s}
.lb-close:hover{background:rgba(232,223,204,.08);border-color:var(--bone)}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:0 clamp(16px,6vw,84px);min-height:0}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(10,7,4,.55);border:1px solid var(--border);color:var(--bone);width:46px;height:46px;cursor:pointer;font-size:18px;line-height:1;display:grid;place-items:center;transition:background .2s,border-color .2s}
.lb-nav:hover{background:rgba(232,223,204,.12);border-color:var(--bone)}
.lb-nav.prev{left:clamp(8px,2vw,26px)}
.lb-nav.next{right:clamp(8px,2vw,26px)}
.lb-foot{display:flex;justify-content:center;gap:8px;padding:18px}
.lb-foot .gd{width:8px;height:8px;border-radius:50%;background:rgba(232,223,204,.35);border:none;padding:0;cursor:pointer;transition:background .2s,transform .2s}
.lb-foot .gd.on{background:var(--accent);transform:scale(1.3)}
.lb[hidden]{display:none}
@media (max-width:700px){.lb-nav{width:38px;height:38px}}


/* ─── show media band: video + installation still ─── */
.show-media{display:grid;grid-template-columns:7fr 5fr;gap:20px;align-items:start;padding:44px var(--pad) 0;background:var(--ink)}
.show-media figure{margin:0;border:1px solid var(--border);background:#0B0A07;overflow:hidden}
.show-media .frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.show-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.show-media .sm-still .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.show-media .sm-still:hover .frame img{transform:scale(1.04)}
.show-media figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);border-top:1px solid var(--border)}
.show-media figcaption .t{color:var(--bone)}
@media (max-width:900px){.show-media{grid-template-columns:1fr;gap:16px}}