/* styles.css — Penumbra Tattoo. Built on design-system.css tokens (single source of truth).
   "Single Source": cool charcoal museum dark, one oxblood light, editorial serif + gallery wall-labels,
   the hero portrait emerging from the penumbra on scroll. All-sharp, gallery whitespace. */

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:auto }            /* Lenis owns smoothing */
body{ margin:0; overflow-x:hidden }
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none }
:where(h1,h2,h3,h4,p,dl,dd,figure,ol,ul){ margin:0 }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,3rem) }
.section{ padding-block:var(--section-y); position:relative }

.skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--accent); color:var(--on-accent);
  padding:.6rem 1rem; font-family:var(--font-mono); font-size:var(--step--2) }
.skip-link:focus{ left:1rem; top:1rem }

/* ── the wall-label — the gallery through-line ── */
.wall-label{ font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--faint); font-weight:400; line-height:1.5 }
.wall-label .dot{ color:var(--accent-soft); margin-inline:.45em; opacity:.85 }

/* ── buttons ── */
.btn{ display:inline-flex; align-items:center; gap:.5em; padding:.95em 1.6em; border-radius:var(--radius);
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase;
  border:1px solid transparent; transition:transform .25s var(--ease), background-color .25s var(--ease),
  color .25s var(--ease), border-color .25s var(--ease) }
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent) }
.btn-primary:hover{ background:var(--accent-soft); border-color:var(--accent-soft) }
.btn-ghost{ border-color:var(--line); color:var(--text) }
.btn-ghost:hover{ border-color:var(--text); background:color-mix(in srgb,var(--text) 7%,transparent) }
.btn--block{ width:100%; justify-content:center }

.link{ color:var(--text); position:relative; padding-bottom:2px;
  background:linear-gradient(var(--accent-soft),var(--accent-soft)) 0 100%/0 1px no-repeat;
  transition:background-size .4s var(--ease), color .25s var(--ease) }
.link:hover{ color:var(--accent-soft); background-size:100% 1px }

/* ── nav ── */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:100; height:74px; display:flex; align-items:center }
.site-header .backdrop{ position:absolute; inset:0; height:200%;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 72%,transparent),transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent); mask-image:linear-gradient(to bottom,#000 50%,transparent);
  opacity:0; transition:opacity .4s var(--ease) }
.site-header.scrolled .backdrop{ opacity:1 }
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header.scrolled .backdrop{ background:color-mix(in srgb,var(--bg) 94%,transparent) } }
.nav{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; width:100% }
.wordmark{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:500;
  font-size:var(--step-1); letter-spacing:-.01em }
.wordmark__mark{ width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--text), var(--accent) 75%); box-shadow:0 0 0 1px var(--line) }
.nav-links{ display:flex; align-items:center; gap:clamp(1.2rem,2.6vw,2.4rem) }
.nav-links a:not(.btn){ font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); transition:color .25s var(--ease); position:relative }
.nav-links a:not(.btn):hover{ color:var(--text) }
.nav-toggle{ display:none; width:42px; height:42px; flex-direction:column; gap:5px; align-items:center; justify-content:center }
.nav-toggle span{ width:22px; height:1.5px; background:var(--text); transition:transform .3s var(--ease), opacity .3s var(--ease) }

/* ═══════════════════ hero — portrait emerging from the penumbra ═══════════════════ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:clamp(3rem,9vh,7rem); overflow:hidden; isolation:isolate }
.hero__stage{ position:absolute; inset:0; z-index:-2 }
.hero__media{ position:absolute; inset:0; margin:0 }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:62% 42%;
  /* THE PENUMBRA: starts near-black, scroll lifts it into light. JS sets --reveal 0..1 */
  filter:brightness(calc(.34 + var(--reveal,0) * .82)) contrast(calc(1.08 + var(--reveal,0) * .12));
  transform:scale(calc(1.08 - var(--reveal,0) * .06));
  transition:filter .15s linear, transform .15s linear; will-change:filter,transform }
/* a clip wipe of light that opens left→right as you arrive (the single light sweeping the face) */
.hero__veil{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 130% at 78% 45%, transparent 0%, transparent 30%,
    color-mix(in srgb,var(--bg) 70%,transparent) 64%, var(--bg) 100%) }
.hero__fade{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, var(--bg) 2%, color-mix(in srgb,var(--bg) 55%,transparent) 30%, transparent 60%),
    linear-gradient(to right, var(--bg) 4%, color-mix(in srgb,var(--bg) 40%,transparent) 34%, transparent 64%) }
.hero__content{ position:relative; z-index:1; max-width:none }
.hero__label{ color:var(--muted); margin-bottom:clamp(1.4rem,3vh,2.2rem) }
.hero__headline{ font-size:var(--step-5); font-weight:300; line-height:.98; letter-spacing:-.025em;
  margin-bottom:1.4rem; max-width:18ch }
.hero__headline em{ font-style:italic; font-weight:400; color:var(--text) }
.hero__sub{ font-size:var(--step-1); color:var(--muted); max-width:38ch; line-height:1.5;
  margin-bottom:clamp(1.8rem,4vh,2.6rem) }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem }
.hero__meta{ font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--faint); line-height:1.4 }
.hero__scroll{ position:absolute; right:clamp(1.25rem,5vw,3rem); bottom:clamp(2rem,5vh,3rem); z-index:1;
  display:flex; align-items:center; gap:.7rem; color:var(--faint); writing-mode:vertical-rl; rotate:180deg }
.hero__scroll-line{ width:1px; height:46px; background:linear-gradient(var(--faint),transparent);
  animation:scrollPulse 2.4s var(--ease) infinite }
@keyframes scrollPulse{ 0%,100%{ opacity:.3; transform:scaleY(.7) } 50%{ opacity:1; transform:scaleY(1) } }

/* ═══════════════════ ethos / manifesto ═══════════════════ */
.ethos__inner{ max-width:960px }
.ethos .wall-label{ margin-bottom:clamp(1.1rem,2.4vh,1.7rem) }
.ethos__lead{ font-family:var(--font-display); font-weight:300; font-size:var(--step-4); line-height:1.22;
  letter-spacing:-.018em; color:var(--text); max-width:24ch }
.ethos__lead em{ font-style:italic; color:var(--accent-soft) }
.ethos__marks{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2rem,4vh,3rem); padding-top:clamp(1.6rem,3vh,2.2rem); border-top:1px solid var(--line) }
.ethos__mark{ display:flex; flex-direction:column; gap:.7rem }
.ethos__mark .num{ font-family:var(--font-display); font-weight:300; font-size:clamp(2.6rem,5vw,3.8rem);
  line-height:1; color:var(--text) }
.ethos__mark .num small{ font-size:.5em; color:var(--accent-soft); margin-left:.05em }
.ethos__mark .lbl{ font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); line-height:1.6 }

/* ═══════════════════ selected work — the gallery ═══════════════════ */
.work__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  margin-bottom:clamp(2rem,4vh,3rem) }
.work__title{ font-size:var(--step-4); font-weight:400; letter-spacing:-.02em }
.work__note{ font-size:var(--step-0); color:var(--muted); max-width:34ch; line-height:1.55 }

/* asymmetric editorial gallery — NOT a 3-equal-card grid */
.work__gallery{ display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,3vw,3.2rem) clamp(1.5rem,3vw,2.6rem); align-items:start }
.plate{ position:relative; margin:0 }
.plate__frame{ position:relative; overflow:hidden; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--radius) }
.plate__frame img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04); transition:transform .9s var(--ease), filter .9s var(--ease) }
.plate:hover .plate__frame img{ transform:scale(1.035); filter:grayscale(.94) contrast(1.08) }
/* a faint single-light vignette on each plate, oxblood at the deepest corner */
.plate__frame::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 70% 28%, transparent 42%, color-mix(in srgb,var(--bg) 55%,transparent) 100%);
  mix-blend-mode:multiply }
.plate figcaption{ display:flex; flex-direction:column; gap:.3rem; padding-top:1rem }
.plate__no{ color:var(--accent-soft) }
.plate__title{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:var(--step-1);
  letter-spacing:0; text-transform:none; color:var(--text) }
.plate__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .85rem; color:var(--muted) }
.plate__meta > span{ position:relative }
.plate__meta > span + span::before{ content:""; position:absolute; left:-.5rem; top:50%; width:3px; height:3px;
  border-radius:50%; background:var(--accent-soft); transform:translateY(-50%); opacity:.8 }

/* spans — offset masonry feel */
.plate--lg{ grid-column:span 7 }
.plate--portrait{ grid-column:span 5 }
.plate--sq{ grid-column:span 4 }
.plate--wide{ grid-column:span 8 }
.plate--lg .plate__frame{ aspect-ratio:3/2 }
.plate--portrait .plate__frame{ aspect-ratio:4/5 }
.plate--sq .plate__frame{ aspect-ratio:1/1 }
.plate--wide .plate__frame{ aspect-ratio:3/2 }
/* nudge a couple down for the gallery-hang rhythm */
.plate--portrait:nth-of-type(2){ margin-top:clamp(2.5rem,7vw,5rem) }
.plate--sq:nth-of-type(6){ margin-top:clamp(2rem,5vw,3.5rem) }

.work__more{ margin-top:clamp(2.2rem,4.5vh,3.2rem); font-family:var(--font-mono); font-size:var(--step--1);
  letter-spacing:.04em; text-transform:uppercase }

/* ═══════════════════ artists ═══════════════════ */
.artists__head{ margin-bottom:clamp(2rem,4vh,3rem) }
.artists__title{ font-size:var(--step-4); font-weight:400; letter-spacing:-.02em; margin-bottom:.8rem }
.artists__note{ font-size:var(--step-0); color:var(--muted); max-width:40ch }
.artists__list{ display:flex; flex-direction:column; gap:clamp(2.4rem,5vh,4rem) }
.artist{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1.5rem,5vw,4rem);
  align-items:center }
.artist--flip{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) }
.artist--flip .artist__portrait{ order:2 }
.artist__portrait{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--surface);
  border:1px solid var(--line-2) }
.artist__portrait img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05);
  transition:transform 1s var(--ease) }
.artist:hover .artist__portrait img{ transform:scale(1.04) }
.artist__portrait::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 110% at 30% 25%, transparent 45%, color-mix(in srgb,var(--bg) 50%,transparent)) }
.artist__role{ color:var(--accent-soft); margin-bottom:1rem }
.artist__name{ font-family:var(--font-display); font-weight:400; font-size:var(--step-3); letter-spacing:-.02em;
  margin-bottom:1.1rem }
.artist__line{ font-size:var(--step-1); color:var(--muted); line-height:1.55; max-width:46ch; font-weight:300;
  margin-bottom:1.4rem }

/* ═══════════════════ process ═══════════════════ */
.process{ background:var(--surface); border-block:1px solid var(--line-2) }
.process__inner{ max-width:1000px }
.process__head{ margin-bottom:clamp(1.8rem,3.5vh,2.6rem); text-align:center }
.process__title{ font-size:var(--step-4); font-weight:400; letter-spacing:-.02em; margin-bottom:.8rem }
.process__note{ font-size:var(--step-0); color:var(--muted) }
.process__steps{ list-style:none; padding:0; display:flex; flex-direction:column }
.process__step{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(1.8rem,4vh,2.8rem); border-top:1px solid var(--line) }
.process__step:last-child{ border-bottom:1px solid var(--line) }
.step__no{ font-size:var(--step-0); color:var(--accent-soft); letter-spacing:.18em; padding-top:.5rem }
.step__title{ font-family:var(--font-display); font-weight:400; font-size:var(--step-2); letter-spacing:-.015em;
  margin-bottom:.7rem }
.step__body p{ font-size:var(--step-0); color:var(--muted); line-height:1.6; max-width:58ch }

/* ═══════════════════ faq / considerations ═══════════════════ */
.faq__inner{ max-width:960px }
.faq__head{ margin-bottom:clamp(1.6rem,3.5vh,2.4rem) }
.faq__title{ font-size:var(--step-4); font-weight:400; letter-spacing:-.02em; margin-bottom:.8rem }
.faq__note{ font-size:var(--step-0); color:var(--muted) }
.faq__list{ display:flex; flex-direction:column }
.faq__row{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1rem,4vw,3rem);
  padding-block:clamp(1.5rem,3.5vh,2.4rem); border-top:1px solid var(--line) }
.faq__row:last-child{ border-bottom:1px solid var(--line) }
.faq__row dt{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:var(--step-2);
  color:var(--text); line-height:1.2 }
.faq__row dd{ font-size:var(--step-0); color:var(--muted); line-height:1.65; max-width:54ch }

/* ═══════════════════ visit / consultation ═══════════════════ */
.visit__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2.5rem,6vw,5rem);
  align-items:start }
.visit__form-col .wall-label{ color:var(--accent-soft); margin-bottom:1.2rem }
.visit__title{ font-size:var(--step-4); font-weight:300; letter-spacing:-.02em; line-height:1.02; margin-bottom:1.2rem }
.visit__lead{ font-size:var(--step-0); color:var(--muted); line-height:1.6; max-width:46ch;
  margin-bottom:clamp(2rem,4vh,2.8rem) }
.visit__form{ display:flex; flex-direction:column; gap:1.3rem }
.field{ display:flex; flex-direction:column; gap:.5rem }
.field label{ font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted) }
.field input, .field select, .field textarea{ width:100%; background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius); padding:.85em 1em; font-family:var(--font-body);
  font-size:var(--step-0); transition:border-color .25s var(--ease), background-color .25s var(--ease) }
.field textarea{ resize:vertical; min-height:120px }
.field input::placeholder, .field textarea::placeholder{ color:var(--faint) }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent-soft);
  background:var(--surface-2) }
.field select{ appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat }
.visit__fineprint{ margin-top:.4rem; color:var(--faint); text-align:center }

.visit__info-col{ display:flex; flex-direction:column; gap:1.5rem }
.visit__card{ background:var(--surface); border:1px solid var(--line-2); padding:clamp(1.5rem,3vw,2.2rem) }
.visit__card .wall-label{ color:var(--faint); margin-bottom:1rem }
.visit__address{ font-family:var(--font-display); font-style:normal; font-size:var(--step-2); font-weight:400;
  line-height:1.3; letter-spacing:-.01em; color:var(--text); margin-bottom:1.8rem }
.visit__details{ display:flex; flex-direction:column; gap:1.1rem }
.visit__details > div{ display:grid; grid-template-columns:80px 1fr; gap:1rem; align-items:baseline;
  padding-top:1.1rem; border-top:1px solid var(--line-2) }
.visit__details dt{ color:var(--faint) }
.visit__details dd{ font-size:var(--step-0); color:var(--text); line-height:1.5 }
.visit__details dd a{ transition:color .25s var(--ease) }
.visit__details dd a:hover{ color:var(--accent-soft) }

/* the abstract map — drawn, no third-party embed */
.visit__map{ position:relative; aspect-ratio:4/3; background:var(--surface); border:1px solid var(--line-2);
  overflow:hidden; margin:0; display:flex; align-items:flex-end; padding:1rem }
.visit__map-grid{ position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:28px 28px, 28px 28px, 140px 140px, 140px 140px;
  -webkit-mask-image:radial-gradient(120% 100% at 60% 40%, #000 50%, transparent 85%);
          mask-image:radial-gradient(120% 100% at 60% 40%, #000 50%, transparent 85%); opacity:.7 }
.visit__pin{ position:absolute; left:60%; top:40%; width:12px; height:12px; border-radius:50%;
  background:var(--accent); z-index:2 }
.visit__pin::before{ content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%;
  transform:translate(-50%,-50%); border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);
  animation:pinRing 3s var(--ease) infinite }
@keyframes pinRing{ 0%{ width:12px; height:12px; opacity:.7 } 100%{ width:42px; height:42px; opacity:0 } }
.visit__map figcaption{ position:relative; z-index:1; color:var(--muted) }

/* ═══════════════════ footer ═══════════════════ */
.site-footer{ border-top:1px solid var(--line); padding-block:clamp(2.4rem,4.5vh,3.4rem) var(--space);
  background:var(--surface) }
.footer__inner{ display:grid; grid-template-columns:1fr auto; gap:2.5rem 4rem; align-items:start }
.footer__brand{ display:flex; flex-direction:column; gap:.8rem }
.wordmark--footer{ font-size:var(--step-2) }
.footer__tag{ font-size:var(--step--1); color:var(--muted); max-width:30ch }
.footer__nav{ display:flex; flex-wrap:wrap; gap:1.4rem; align-self:center }
.footer__nav a{ font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); transition:color .25s var(--ease) }
.footer__nav a:hover{ color:var(--text) }
.footer__meta{ grid-column:1/-1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-top:2rem; margin-top:1rem; border-top:1px solid var(--line-2); color:var(--faint) }

/* ═══════════════════ motion primitives ═══════════════════
   Reveals are ENHANCEMENT ONLY — hidden state is gated behind .js so a no-JS
   (or IO-failure) visitor always sees content. main.js has a safety net that
   force-reveals after a timeout + reveals anything already in the viewport. */
.js .reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal);
  transition-delay:var(--delay,0s); will-change:opacity,transform }
.reveal.is-visible{ opacity:1; transform:none }
/* line-reveal — text rising from behind a mask (the "expensive" mechanic) */
.line-reveal .line{ display:block; overflow:hidden; padding-bottom:.04em }
.js .line-reveal .line__inner{ display:block; transform:translateY(110%);
  transition:transform 1.05s var(--ease-reveal); transition-delay:var(--delay,0s) }
.line-reveal.is-visible .line:nth-child(1) .line__inner{ transform:none }
.line-reveal.is-visible .line:nth-child(2) .line__inner{ transform:none; transition-delay:.14s }
/* line-mask — a single block of prose rising once */
.js .line-mask{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease-reveal), opacity 1.2s var(--ease-reveal) }
.line-mask.is-visible{ clip-path:inset(0 0 0 0) }

/* cursor "single-light" halo — very low opacity, oxblood-tinted (gated to fine pointers in JS) */
.cursor-glow{ position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px; z-index:0;
  pointer-events:none; border-radius:50%; opacity:0; transition:opacity .6s var(--ease); mix-blend-mode:screen;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent-soft) 16%,transparent) 0%, transparent 62%) }
body.cursor-on .cursor-glow{ opacity:1 }

@media (prefers-reduced-motion:reduce){
  /* override the .js reveal-hiding so content is visible immediately (no motion) */
  .js .reveal, .reveal, .js .line-mask, .line-mask{ opacity:1!important; transform:none!important;
    clip-path:none!important; transition:none!important }
  .js .line-reveal .line__inner, .line-reveal .line__inner{ transform:none!important; transition:none!important }
  .hero__media img{ filter:brightness(1) contrast(1.12); transform:none }
  .hero__scroll-line, .visit__pin::before{ animation:none }
  .visit__pin::before{ display:none }
}

/* ═══════════════════ responsive ═══════════════════ */
@media (max-width:900px){
  .artist, .artist--flip{ grid-template-columns:1fr; gap:1.5rem }
  .artist--flip .artist__portrait{ order:0 }
  .artist__portrait{ max-width:420px; aspect-ratio:4/5 }
  .visit__grid{ grid-template-columns:1fr; gap:3rem }
  .faq__row, .ethos__marks{ grid-template-columns:1fr }
  .faq__row{ gap:.6rem }
  .ethos__marks{ gap:2rem; row-gap:2.4rem; grid-template-columns:repeat(3,1fr) }
}
@media (max-width:768px){
  .nav-toggle{ display:flex }
  .nav-links{ position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:color-mix(in srgb,var(--bg) 97%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line); padding:.5rem clamp(1.25rem,5vw,3rem) 1.5rem;
    clip-path:inset(0 0 100% 0); transition:clip-path .4s var(--ease); pointer-events:none }
  .nav-links.open{ clip-path:inset(0 0 0 0); pointer-events:auto }
  .nav-links a:not(.btn){ padding:1rem 0; border-bottom:1px solid var(--line-2); font-size:var(--step-0) }
  .nav-links .btn{ margin-top:1rem; justify-content:center }
  [data-open] .nav-toggle span:first-child{ transform:translateY(3.25px) rotate(45deg) }
  [data-open] .nav-toggle span:last-child{ transform:translateY(-3.25px) rotate(-45deg) }

  /* gallery → single column, restore natural order */
  .work__gallery{ grid-template-columns:1fr; gap:2.5rem }
  .plate, .plate--lg, .plate--portrait, .plate--sq, .plate--wide{ grid-column:1/-1; margin-top:0 }
  .plate--lg .plate__frame, .plate--wide .plate__frame{ aspect-ratio:3/2 }

  .ethos__marks{ grid-template-columns:1fr; gap:0 }
  .ethos__mark{ flex-direction:row; align-items:baseline; gap:1.2rem; padding-block:1.4rem;
    border-top:1px solid var(--line-2) }
  .ethos__mark:first-child{ border-top:none }
  .ethos__mark .num{ min-width:2.4em }

  .process__step{ grid-template-columns:1fr; gap:.6rem }
  .step__no{ padding-top:0 }
  .footer__inner{ grid-template-columns:1fr; gap:2rem }
  .footer__meta{ flex-direction:column; gap:.5rem }
  .hero{ min-height:92svh }
  .hero__headline{ max-width:14ch }
  .visit__details > div{ grid-template-columns:1fr; gap:.3rem }
}
@media (max-width:420px){
  .hero__cta{ flex-direction:column; align-items:stretch }
  .hero__cta .btn{ justify-content:center }
}

/* ── CTA CHARACTER: quiet-luxury text-link (gallery) ── */
.cta-link{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:var(--step--1); color:var(--accent); padding-bottom:.4rem; border-bottom:1px solid currentColor; transition:color .25s ease, gap .25s ease, border-color .25s ease; }
.cta-link:hover{ color:var(--text); border-color:var(--text); gap:.95em; }
.cta-link::after{ content:""; width:.45em; height:.45em; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); flex:none; }