/* ============================================================
   ATELIER AMOD — Nocturne Atelier design system
   A museum vitrine at night: warm-black stage, hairline bronze,
   engraved type, one wax-seal red moment per page.
   ============================================================ */

:root {
  /* stage — warm-tinted blacks, layered like museum lighting */
  --ink-0: #131316;        /* page */
  --ink-1: #18181c;        /* raised section */
  --ink-2: #1e1e23;        /* card */
  --ink-3: #26262c;        /* hover card */

  /* text — warm whites (a candle, not a fluorescent tube) */
  --text: #ece9e2;
  --text-dim: #a8a49b;
  --text-faint: #6d6a63;

  /* the two accents */
  --bronze: #a3854f;       /* hairlines, numerals, labels — the quiet signal */
  --bronze-dim: #6e5c3c;
  --seal: #a80505;         /* the wax seal — one moment per page */
  --seal-bright: #c41111;

  --line: rgba(236, 233, 226, 0.09);
  --line-bronze: rgba(163, 133, 79, 0.35);

  /* type */
  --font-display: "Mohave", sans-serif;
  --font-label: "Dosis", sans-serif;
  --font-body: "Open Sans", sans-serif;

  --track-wide: 0.28em;
  --track-mid: 0.16em;

  --measure: 34em;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-gap: clamp(5rem, 12vh, 9rem);

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--seal); color: #fff; }

/* keyboard focus reads as an engraved bronze line, not the browser default */
:focus-visible { outline: 1.5px solid var(--bronze); outline-offset: 3px; }

/* faint grain so the dark reads as material, not as empty pixels */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type utilities ---------- */
.label {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--bronze);
}
.display {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.04;
}
h1.display { font-size: clamp(2.3rem, 6.4vw, 5.4rem); }
h2.display { font-size: clamp(1.7rem, 3.6vw, 2.9rem); }
h3 {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}
.lede {
  font-size: 1.05rem;
  color: var(--text-dim);
  max-width: var(--measure);
}
.prose { max-width: var(--measure); color: var(--text-dim); }
.prose strong { color: var(--text); font-weight: 600; }

/* hairline bronze rule with a small square terminal — the house ornament */
.rule {
  display: block;
  width: 72px; height: 1px;
  background: var(--line-bronze);
  position: relative;
  margin: 1.4rem 0;
}
.rule::after {
  content: ""; position: absolute; right: -3px; top: -2px;
  width: 5px; height: 5px; background: var(--bronze);
}

/* ---------- layout ---------- */
.shell { max-width: 1480px; margin: 0 auto; padding-inline: var(--gutter); }
/* inside the hero grids, the shell must stretch — auto margins on a grid item
   otherwise shrink it to fit-content and the title drifts off the gutter */
.hero > .shell, .page-hero > .shell { width: 100%; }
section { padding-block: var(--section-gap); }

/* ---------- header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background 0.5s, box-shadow 0.5s;
}
.site-head.scrolled {
  background: rgba(19, 19, 22, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand img { height: 40px; width: auto; display: block; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 500; font-size: 1.25rem;
  letter-spacing: 0.3em; text-transform: uppercase;
}
.brand-sub {
  font-family: var(--font-label); font-size: 0.62rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-faint);
}
.site-nav { display: flex; gap: clamp(1rem, 2.5vw, 2.4rem); align-items: center; }
.site-nav a {
  font-family: var(--font-label);
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.3s;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta {
  border: 1px solid var(--line-bronze);
  padding: 0.55rem 1.2rem !important;
  color: var(--text) !important;
  transition: border-color 0.3s, background 0.3s;
}
.nav-cta::after { display: none; }
.nav-cta:hover { border-color: var(--bronze); background: rgba(163, 133, 79, 0.08); }

/* mobile nav */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .site-nav {
    position: fixed; inset: 0; z-index: 9;
    flex-direction: column; justify-content: center; gap: 2rem;
    background: rgba(19, 19, 22, 0.98);
    opacity: 0; pointer-events: none; transition: opacity 0.4s;
  }
  .site-nav.open { opacity: 1; pointer-events: auto; }
  .site-nav a { font-size: 1rem; }
  .nav-toggle {
    display: block; z-index: 11; position: relative;
    width: 44px; height: 44px;
  }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after {
    content: ""; position: absolute; left: 50%; width: 30px; height: 1px;
    transform: translateX(-50%);
    background: var(--text); transition: transform 0.3s, opacity 0.3s;
  }
  .nav-toggle::before { top: 12px; }
  .nav-toggle span { top: 22px; }
  .nav-toggle::after { bottom: 12px; }
  .nav-toggle[aria-expanded="true"]::before { transform: translateX(-50%) translateY(9.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span { opacity: 0; }
  .nav-toggle[aria-expanded="true"]::after { transform: translateX(-50%) translateY(-9.5px) rotate(-45deg); }
}

/* ---------- hero ---------- */
.hero {
  min-height: 92vh;
  display: grid; align-items: end;
  position: relative;
  padding-block: 0 clamp(3rem, 8vh, 6rem);
  isolation: isolate;
}
.hero-media {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink-0) 2%, rgba(19,19,22,0.55) 40%, rgba(19,19,22,0.35) 100%);
}
/* dusk duotone — a deliberate departure from the neutral vignette, mimicking the
   blue-hour-and-warm-windows mood the home hero gets naturally from its own photo */
.hero-media--dusk::after {
  background:
    linear-gradient(to top, var(--ink-0) 2%, rgba(19,19,22,0.55) 40%, rgba(19,19,22,0.35) 100%),
    linear-gradient(to bottom, rgba(24,42,74,0.55) 0%, rgba(24,42,74,0.22) 35%,
      transparent 50%, rgba(107,42,32,0.26) 72%, rgba(107,42,32,0.52) 100%);
}
.hero-inner { position: relative; }
.hero .label { display: block; margin-bottom: 1.2rem; }
.hero-title { max-width: 12em; }
.hero-title em {
  font-style: normal;
  color: var(--bronze);
}
.hero-foot {
  margin-top: 2.2rem;
  display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center;
}
.hero-facts {
  display: flex; gap: 2.5rem;
  font-family: var(--font-label);
  font-size: 0.72rem; letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--text-dim);
}
.hero-facts b { display: block; color: var(--text); font-weight: 500; font-size: 0.85rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  padding: 0.95rem 2.1rem;
  border: 1px solid var(--line-bronze);
  color: var(--text);
  position: relative;
  transition: color 0.35s, border-color 0.35s;
  overflow: hidden;
}
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--bronze);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
  z-index: -1;
}
.btn:hover { color: var(--ink-0); border-color: var(--bronze); }
.btn:hover::before { transform: scaleX(1); }

.btn-seal {
  border-color: var(--seal);
  background: var(--seal);
  color: #fff;
}
.btn-seal::before { background: var(--seal-bright); transform-origin: left; }
.btn-seal:hover { color: #fff; border-color: var(--seal-bright); }

.btn-ghost { border-color: var(--line); color: var(--text-dim); }
.btn-ghost:hover { color: var(--ink-0); }

/* ---------- section head pattern ---------- */
.sec-head { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.sec-head .label { display: block; margin-bottom: 0.9rem; }
.sec-index {
  font-family: var(--font-display);
  color: var(--text-faint);
  font-size: 0.95rem; letter-spacing: 0.2em;
  margin-right: 0.9em;
}

/* ---------- work grid (editorial, staggered) ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2.2rem);
  row-gap: clamp(2.5rem, 6vh, 4.5rem);
}
.work-card { position: relative; }
.work-card a { display: block; }
.work-card figure {
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 4 / 3;
}
.work-card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.92);
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out), filter 0.6s;
}
.work-card a:hover img { transform: scale(1.07); filter: saturate(1.05); }
.work-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  margin-top: 0.9rem;
}
.work-caption h3 { font-size: 0.95rem; color: var(--text); }
.work-caption .meta {
  font-family: var(--font-label);
  font-size: 0.66rem; letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--bronze);
  white-space: nowrap;
}
/* staggered editorial placement on wide screens */
@media (min-width: 861px) {
  .work-card:nth-child(6n+1) { grid-column: 1 / span 5; }
  .work-card:nth-child(6n+2) { grid-column: 7 / span 6; margin-top: 4.5rem; }
  .work-card:nth-child(6n+3) { grid-column: 2 / span 4; }
  .work-card:nth-child(6n+4) { grid-column: 7 / span 5; margin-top: 3rem; }
  .work-card:nth-child(6n+5) { grid-column: 1 / span 6; }
  .work-card:nth-child(6n+6) { grid-column: 8 / span 5; margin-top: 4.5rem; }
}
@media (max-width: 860px) {
  .work-card { grid-column: 1 / -1; }
}

/* uniform grid variant (work page) */
.work-grid.uniform .work-card { margin-top: 0 !important; }
@media (min-width: 861px) {
  .work-grid.uniform .work-card { grid-column: span 4 !important; }
}

/* ---------- archive pager ---------- */
.pager {
  display: flex; align-items: center; justify-content: center;
  gap: 1.6rem;
  margin-top: clamp(2.4rem, 5vh, 3.6rem);
}

/* filter chips */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 3rem; }
.chip {
  font-family: var(--font-label);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: var(--track-mid); text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  color: var(--text-dim);
  transition: all 0.3s;
}
.chip:hover { border-color: var(--line-bronze); color: var(--text); }
.chip[aria-pressed="true"] { border-color: var(--bronze); color: var(--bronze); }

/* ---------- plaques (the engraved claims) ---------- */
.plaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.plaque {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.8rem, 4vw, 3rem);
  position: relative;
}
.plaque .label { display: block; margin-bottom: 1rem; color: var(--text-faint); }
.plaque h3 { color: var(--text); margin-bottom: 0.8rem; font-weight: 500; }
.plaque p { color: var(--text-dim); font-size: 0.9rem; }
.plaque::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--bronze);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.plaque:hover::before { transform: scaleX(1); }

/* ---------- process (numbered bronze ledger) ---------- */
/* a wide grid of short entries, not one tall column: at full width all five
   sit in a single row; narrower viewports wrap it down progressively */
.process {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.6rem 1.8rem;
}
.process li {
  list-style: none;
  counter-increment: step;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.process li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem; letter-spacing: 0.1em;
  color: var(--bronze);
  margin-bottom: 0.5rem;
}
.process h3 { font-size: 0.86rem; color: var(--text); margin-bottom: 0.3rem; }
.process p { color: var(--text-dim); font-size: 0.84rem; }

/* ---------- process tabs (the four stages, as on the old homepage) ---------- */
.ptab-list {
  display: flex; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.ptab {
  font-family: var(--font-label);
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.95rem clamp(0.9rem, 2.4vw, 1.9rem);
  position: relative;
  transition: color 0.3s;
}
.ptab:hover { color: var(--text); }
.ptab .ptab-num {
  font-family: var(--font-display);
  color: var(--text-faint);
  letter-spacing: 0.14em;
  margin-right: 0.7em;
  transition: color 0.3s;
}
.ptab::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 1px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.ptab[aria-selected="true"] { color: var(--text); }
.ptab[aria-selected="true"] .ptab-num { color: var(--bronze); }
.ptab[aria-selected="true"]::after { transform: scaleX(1); }

.ptab-panels { display: grid; margin-top: clamp(1.8rem, 4vh, 2.8rem); }
.ptab-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.8rem, 4.5vw, 4rem);
  align-items: center;
  animation: ptab-in 0.7s var(--ease-out);
}
.ptab-panel[hidden] { display: none; }
@keyframes ptab-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.ptab-panel figure {
  margin: 0; overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  aspect-ratio: 3 / 2;
  max-width: 440px;
}
.ptab-panel img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.92);
}
.ptab-text h3 { font-size: 0.88rem; color: var(--text); margin-bottom: 0.35rem; }
.ptab-text h3 + p { color: var(--text-dim); font-size: 0.92rem; max-width: 34em; }
.ptab-text p + h3 { margin-top: 1.5rem; }
@media (max-width: 860px) {
  .ptab-panel { grid-template-columns: 1fr; }
  .ptab-panel figure { max-width: 340px; }
  .ptab { padding-inline: 0.8rem; font-size: 0.7rem; }
  .ptab .ptab-num { margin-right: 0.45em; }
}

/* raised section band — background variation between the dark stretches */
.band {
  background: var(--ink-1);
  border-block: 1px solid var(--line);
}

/* ---------- split section (media + text) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.split.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split figure { overflow: hidden; background: var(--ink-2); }
.split img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); }
@media (max-width: 860px) {
  /* minmax(0,…), not 1fr: the auto minimum would otherwise be the widest
     child's min-content and push scrollable content past the viewport */
  .split, .split.rev { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- story trio (three framed visits, one row) ---------- */
.story-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: clamp(2.4rem, 5vh, 3.6rem);
}
.story-trio figure { margin: 0; }
.story-trio .frame {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.story-trio img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.92) grayscale(0.15);
}
.story-trio figcaption {
  margin-top: 0.8rem;
  color: var(--text-faint);
  font-family: var(--font-label);
  font-size: 0.78rem; letter-spacing: var(--track-mid); text-transform: uppercase;
}
.story-trio-project {
  display: block;
  margin-top: 0.3rem;
  color: var(--bronze-dim);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: normal;
  text-transform: none;
}
@media (max-width: 720px) {
  .story-trio { grid-template-columns: minmax(0, 1fr); }
}

/* two-column text — a pair of equal-width paragraphs, side by side */
.text-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 720px) {
  .text-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- testimonials (the guestbook carousel) ---------- */
/* one framed plaque at a time, like a mounted letter in a vitrine */
.testi-carousel {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.testi-frame {
  border: 1px solid var(--line-bronze);
  background: var(--ink-1);
  padding: clamp(2rem, 5vw, 3.6rem);
  position: relative;
}
.testi-frame::before {
  /* inner mat line — the picture-frame double border */
  content: "";
  position: absolute; inset: 9px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.testi-frame::after {
  /* small bronze square at the frame's top center, like a hanging pin */
  content: "";
  position: absolute; top: -3.5px; left: 50%;
  width: 7px; height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--bronze);
}
.testi-track { display: grid; }
.testi-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease-out), visibility 0s 0.9s;
  margin: 0;
}
.testi-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s var(--ease-out);
}
.testi-slide::before {
  content: "“";
  font-family: var(--font-display);
  font-size: 3.4rem; line-height: 0.6;
  display: block;
  color: var(--bronze);
  margin-bottom: 1.1rem;
}
.testi-slide p {
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.85;
  max-width: 44em;
}
.testi-slide p + p { margin-top: 0.85rem; }
.testi-slide p a { color: var(--bronze); border-bottom: 1px solid var(--line-bronze); }
.testi-slide footer {
  margin-top: 1.8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.testi-slide cite {
  display: block; font-style: normal;
  color: var(--text); font-weight: 600; font-size: 0.92rem;
}
.testi-slide .org {
  font-family: var(--font-label);
  font-size: 0.68rem; letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--bronze);
}
.testi-slide .org a { color: inherit; }
.testi-slide .org a:hover { border-bottom: 1px solid var(--line-bronze); }

.testi-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 1.6rem;
  margin-top: 1.8rem;
}
.testi-arrow {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-dim);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  transition: color 0.3s, border-color 0.3s;
}
.testi-arrow:hover { color: var(--bronze); border-color: var(--line-bronze); }
.testi-dots { display: flex; }
.testi-dot {
  position: relative;
  width: 20px; height: 20px;
  background: none;
  border: none;
  padding: 0;
}
.testi-dot::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%);
  background: var(--ink-3);
  border: 1px solid var(--line);
  transition: background 0.3s, border-color 0.3s;
}
.testi-dot[aria-current="true"]::before { background: var(--bronze); border-color: var(--bronze); }

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 7vh, 5rem) var(--gutter) 2.5rem;
  margin-top: var(--section-gap);
}
.foot-grid {
  max-width: 1480px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.foot-grid h3 { font-size: 0.72rem; color: var(--bronze); margin-bottom: 1.1rem; letter-spacing: var(--track-wide); }
.foot-grid a, .foot-grid p { display: block; color: var(--text-dim); font-size: 0.88rem; line-height: 2; }
.foot-grid a:hover { color: var(--text); }
.foot-logo { height: 44px; width: auto; display: block; }
.foot-brand p { max-width: 24em; margin-top: 1.2rem; font-size: 0.85rem; }
.foot-legal {
  max-width: 1480px; margin: 3.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.75rem; color: var(--text-faint);
}
@media (max-width: 860px) {
  /* single column, not 2: the brand blurb and Contact block run long enough
     now that pairing them with a short nav column strands the nav in a tall
     empty row (grid rows size to their tallest cell) */
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
}

/* ---------- configurator ---------- */
.config-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 980px) { .config-layout { grid-template-columns: 1fr; } }

.config-step {
  border-top: 1px solid var(--line);
  padding: 2rem 0 2.4rem;
}
.config-step > .label { display: block; margin-bottom: 1.3rem; }
.config-step .hint { font-size: 0.82rem; color: var(--text-faint); margin-top: 0.8rem; max-width: 36em; }

/* step icons — same hairline-bronze-with-square-terminal vocabulary as .rule,
   drawn from the live site's old clarifying diagrams (width/height, scale
   comparison, relief profile, finish split, destination) rather than a
   generic icon set. Purely decorative: the label text already says the same
   thing, so the svg is aria-hidden and never carries meaning on its own.
   Sits to the left of each step's actual inputs/tiles, not the heading —
   the field-row/tiles child wraps below it on narrow screens rather than
   squeezing, since it can't shrink past min-width. */
.step-choices { display: flex; align-items: flex-start; gap: 1.3rem; flex-wrap: wrap; }
.step-choices > .field-row, .step-choices > .tiles { flex: 1 1 auto; min-width: 200px; }
.step-icon { flex: none; width: 52px; height: 52px; color: var(--bronze); margin-top: 0.3rem; }

.field-row { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-family: var(--font-label);
  font-size: 0.68rem; letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--text-dim);
}
.field input, .field select {
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  min-width: 9.5rem;
  transition: border-color 0.3s;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--bronze);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a3854f'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.2rem; }

/* option tiles (scale / toggles) */
.tiles { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.tile {
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 0.8rem 1.3rem;
  font-family: var(--font-label);
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em;
  color: var(--text-dim);
  transition: all 0.3s;
  text-align: center;
}
.tile small { display: block; font-size: 0.62rem; color: var(--text-faint); letter-spacing: 0.08em; margin-top: 0.2rem; }
.tile:hover { border-color: var(--line-bronze); color: var(--text); }
.tile[aria-pressed="true"] {
  border-color: var(--bronze);
  color: var(--text);
  background: rgba(163, 133, 79, 0.09);
}
.tile[aria-pressed="true"] small { color: var(--bronze); }

/* swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.swatch {
  width: 52px; height: 52px;
  border: 1px solid var(--line);
  position: relative;
  transition: transform 0.25s, border-color 0.25s;
}
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-pressed="true"] { border-color: var(--bronze); box-shadow: 0 0 0 1px var(--bronze); }
.swatch span {
  position: absolute; left: 50%; top: calc(100% + 6px);
  transform: translateX(-50%);
  font-family: var(--font-label); font-size: 0.58rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
.swatch-group { padding-bottom: 1.6rem; }
.swatch-group > .field label { margin-bottom: 0.6rem; }

/* the docket (order summary) */
.docket {
  position: sticky; top: 90px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.docket::before {
  content: "";
  display: block;
  width: 100%; height: 1px;
  background: linear-gradient(to right, var(--bronze), transparent 70%);
  margin-bottom: 1.6rem;
}
.docket h2 {
  font-family: var(--font-label);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1.4rem;
}
.docket dl { display: grid; grid-template-columns: 1fr auto; gap: 0.55rem 1rem; font-size: 0.88rem; }
.docket dt { color: var(--text-faint); }
.docket dd { color: var(--text-dim); text-align: right; }
.docket .docket-total {
  margin-top: 1.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line-bronze);
  display: flex; justify-content: space-between; align-items: baseline;
}
.docket .docket-total .label { color: var(--text-dim); }
.docket .price {
  font-family: var(--font-display);
  font-size: 2rem; letter-spacing: 0.06em;
  color: var(--text);
}
.docket .btn { width: 100%; text-align: center; margin-top: 1.5rem; }
.docket .note { font-size: 0.72rem; color: var(--text-faint); margin-top: 0.9rem; line-height: 1.6; }
.docket .warn { color: #d08484; font-size: 0.8rem; margin-top: 0.9rem; display: none; }
.docket .warn.show { display: block; }

/* scale ghost (door reference) */
.scale-ghost {
  display: flex; align-items: flex-end; gap: 1.6rem;
  padding: 1.4rem 0 0.4rem;
}
.scale-ghost .door {
  background: var(--ink-3);
  border: 1px solid var(--line-bronze);
  position: relative;
}
.scale-ghost figcaption {
  font-family: var(--font-label); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}

/* ---------- FAQ / GEO ---------- */
.faq { max-width: 800px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.3rem 0;
  font-family: var(--font-label);
  font-size: 0.95rem; letter-spacing: 0.08em;
  display: flex; justify-content: space-between; align-items: center;
  transition: color 0.3s;
}
.faq summary:hover { color: var(--bronze); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); color: var(--bronze); font-size: 1.2rem; transition: transform 0.3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.4rem; color: var(--text-dim); max-width: 42em; }

/* ---------- choice (commission chooser) ---------- */
.choice-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 860px) { .choice-grid { grid-template-columns: 1fr; } }
.choice {
  position: relative;
  border: 1px solid var(--line);
  background: var(--ink-1);
  padding: clamp(1.8rem, 4vw, 3rem);
  display: flex; flex-direction: column;
  transition: border-color 0.4s, transform 0.4s var(--ease-out);
}
.choice:hover { border-color: var(--line-bronze); transform: translateY(-4px); }
/* Side by side, the photograph directly above names this column, so printing
   the name again here is the redundancy. It stays in the document for screen
   readers, and becomes visible only once the columns stack and that
   above/below relationship is gone. */
.choice-name {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* must follow the rule above, not precede it — same specificity, later wins */
@media (max-width: 860px) {
  .choice-name {
    position: static;
    width: auto; height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 6vw, 2rem);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 0.6rem;
  }
}
.choice .label { display: block; margin-bottom: 0.9rem; }
.choice .prose { margin-bottom: 1.5rem; }
.choice ul { list-style: none; margin: 0 0 2rem; }
.choice ul li {
  font-size: 0.88rem; color: var(--text-dim);
  padding: 0.45rem 0 0.45rem 1.4rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.choice ul li::before {
  content: ""; position: absolute; left: 0; top: 0.95rem;
  width: 5px; height: 5px; background: var(--bronze);
}
.choice .btn { margin-top: auto; align-self: flex-start; }

.dot-list { list-style: none; margin: 0 0 1.5rem; }
.dot-list li {
  font-size: 0.88rem; color: var(--text-dim);
  padding: 0.45rem 0 0.45rem 1.4rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.dot-list li::before {
  content: ""; position: absolute; left: 0; top: 0.95rem;
  width: 5px; height: 5px; background: var(--bronze);
}
.dot-list li strong { color: var(--text); font-weight: 600; }

/* ---------- legal / policy pages ---------- */
/* a hero with no photograph: the plain stage, for text-only pages */
.page-hero--plain { min-height: 34vh; padding-top: 9rem; }

.policy { max-width: var(--measure); padding-bottom: var(--section-gap); }
.policy-meta {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 1.2rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--line-bronze);
}
.policy-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin: 3rem 0 1rem;
}
.policy-h2:first-of-type { margin-top: 2rem; }
.policy-h3 {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--bronze);
  margin: 2rem 0 0.6rem;
}
.policy .prose { margin-bottom: 1rem; }
.policy .dot-list { margin: 1rem 0 1.5rem; }

/* ---------- contact ---------- */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { border-top: 1px solid var(--line); padding: 1.4rem 0; }
.contact-card h3 { font-size: 0.78rem; color: var(--bronze); margin-bottom: 0.5rem; }
.contact-card p, .contact-card a { color: var(--text-dim); font-size: 0.92rem; line-height: 1.9; display: block; }
.contact-card a:hover { color: var(--text); }
.form-grid { display: grid; gap: 1.2rem; }
.form-grid .field input, .form-grid .field textarea, .form-grid .field select { width: 100%; }
.form-grid textarea {
  background: var(--ink-2); border: 1px solid var(--line); color: var(--text);
  font-family: var(--font-body); font-size: 0.95rem; padding: 0.8rem 0.9rem;
  min-height: 9rem; resize: vertical;
}
.form-grid textarea:focus { outline: none; border-color: var(--bronze); }

/* ---------- reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- page hero (interior pages) ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 62vh;
  padding-block: clamp(9rem, 18vh, 12rem) clamp(2.5rem, 6vh, 4rem);
}
.page-hero .label { display: block; margin-bottom: 1.1rem; }
.page-hero .lede { margin-top: 1.6rem; }
.hero-media::after { pointer-events: none; }

/* ---------- before/after comparison slider ---------- */
.compare { position: relative; overflow: hidden; touch-action: pan-y; }
.compare > img,
.compare .after img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.compare .after {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--cut, 50%));
}
/* slider hero: a full-width band locked to the source images' native aspect
   ratio (hero-render.jpg, 2617×1472) so neither shot is cropped and neither is
   upscaled beyond its width — as sharp as the files allow. hero-model.jpg is
   2617×1461, 0.7% wider, so it loses a hair off the sides and nothing else.
   If the pair is ever replaced, this ratio has to follow them. */
.compare-hero {
  position: relative;
  isolation: isolate;
  padding: 0;
  min-height: 0;
  display: block;
}
.compare-hero .compare {
  width: 100%;
  aspect-ratio: 2617 / 1472;
}
.compare-hero .compare::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    var(--ink-0) 0%, rgba(19, 19, 22, 0.65) 12%, rgba(19, 19, 22, 0) 38%);
}
.compare-hero > .shell {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1.2rem, 3.5vh, 2.6rem);
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 900px) {
  /* band gets short on narrow screens — title drops below it */
  .compare-hero > .shell { position: static; padding-block: 2rem 0; pointer-events: auto; }
  .compare-hero .compare::after { background: none; }
  .cmp-tag { top: 4.6rem; }
}
.compare .cmp-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--cut, 50%);
  width: 2px; margin-left: -1px;
  background: var(--bronze);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
  z-index: 2; pointer-events: none;
}
.compare .cmp-handle::after {
  content: "◂ ▸";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; letter-spacing: 0.1em;
  color: var(--bronze);
  background: rgba(19, 19, 22, 0.85);
  border: 1px solid var(--bronze);
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.compare input[type="range"] {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  margin: 0;
}
.cmp-tag {
  position: absolute; top: 5.6rem; z-index: 2;
  font-family: var(--font-label);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--text);
  background: rgba(19, 19, 22, 0.72);
  border: 1px solid var(--line);
  padding: 0.45rem 0.85rem;
  pointer-events: none;
}
.cmp-tag.left { left: 1.4rem; }
.cmp-tag.right { right: 1.4rem; }

/* compact title cluster so the slider stays the hero */
.hero-compact h1.display { font-size: clamp(1.8rem, 4.2vw, 3.4rem); }
.hero-compact .lede { font-size: 0.95rem; max-width: 30em; }

/* ---------- filter groups (work page) ---------- */
.filter-groups { margin-bottom: 3rem; border-top: 1px solid var(--line); }
.filter-group {
  display: flex; align-items: baseline; gap: 1.4rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.filter-group > .label { min-width: 8rem; color: var(--text-faint); font-size: 0.64rem; }
.filter-group .chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.filter-group .chip { padding: 0.35rem 0.85rem; border-color: transparent; }
.filter-group .chip:hover { border-color: var(--line-bronze); }
.filter-group .chip[aria-pressed="true"] { border-color: var(--bronze); }

/* ---------- project detail ---------- */
.spec-bar {
  display: flex; flex-wrap: wrap; gap: 0;
  border-block: 1px solid var(--line);
}
.spec-bar > div {
  padding: 1.2rem clamp(1.2rem, 3vw, 2.8rem);
  border-right: 1px solid var(--line);
}
.spec-bar > div:first-child { padding-left: 0; }
.spec-bar > div:last-child { border-right: 0; }
.spec-bar .label { display: block; margin-bottom: 0.4rem; color: var(--text-faint); }
.spec-bar a, .spec-bar span.val {
  font-family: var(--font-label);
  font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text);
}
.spec-bar a { border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.spec-bar a:hover { color: var(--bronze); border-color: var(--line-bronze); }
.spec-bar a + a::before { content: " · "; color: var(--text-faint); }

/* one feature plate per project, shown uncropped at its native aspect;
   the full photo set opens in the lightbox below */
.gallery-feature {
  margin: 0 auto;
  max-width: 900px;
}
.gallery-feature-link {
  display: block;
  border: 1px solid var(--line);
  background: var(--ink-2);
  cursor: zoom-in;
}
.gallery-feature-link img {
  width: 100%; height: auto;
  display: block;
  filter: saturate(0.94);
  transition: opacity 0.4s;
}
.gallery-feature-link:hover img { opacity: 0.92; }
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 108px));
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.gallery-thumb {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
  cursor: zoom-in;
}
.gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.94);
  transition: opacity 0.4s;
}
.gallery-thumb:hover img { opacity: 0.8; }
.gallery-feature-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  padding-top: 0.9rem;
}
.gallery-feature-caption .label { color: var(--text-faint); }
.gallery-cta {
  font-family: var(--font-label);
  font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--line-bronze);
  transition: color 0.3s;
  cursor: pointer;
}
.gallery-feature:hover .gallery-cta { color: var(--bronze); }

/* lightbox — the vitrine goes dark, one photograph lit at a time */
.lightbox {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  background: rgba(15, 15, 18, 0.99);
  opacity: 0;
  transition: opacity 0.35s;
}
.lightbox.open { opacity: 1; }
.lightbox-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem var(--gutter);
}
.lightbox-count {
  font-family: var(--font-display);
  font-size: 0.85rem; letter-spacing: 0.22em;
  color: var(--text-dim);
}
.lightbox-close {
  font-family: var(--font-label);
  font-size: 0.78rem; letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.3rem 0;
  transition: color 0.3s;
}
.lightbox-close:hover { color: var(--bronze); }
.lightbox-stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(3.4rem, 9vw, 7rem) 2.2rem;
}
.lightbox-stage img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  padding: 1.2rem 0.9rem;
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1;
  color: var(--text-dim);
  transition: color 0.3s;
}
.lightbox-prev:hover, .lightbox-next:hover { color: var(--bronze); }
.lightbox-prev { left: clamp(0.3rem, 2vw, 1.6rem); }
.lightbox-next { right: clamp(0.3rem, 2vw, 1.6rem); }
@media (max-width: 700px) {
  .lightbox-stage { padding: 0 2.6rem 1.4rem; }
  .gallery-feature-caption { flex-direction: column; gap: 0.2rem; }
}

/* ---------- versus (one building, both ways) -----------------------------
   The live site makes the full-building/Slice distinction with a single
   photograph of one model split by a diagonal. Same two photographs here,
   cut apart so each half can carry its own label and stack on a phone —
   the diagonal is kept because it is what makes the pair read as one
   comparison rather than as two unrelated projects. */
.versus { margin: 0; }
/* the same two columns and gap as .choice-grid, so each photograph sits
   directly above the column that explains it — that alignment is what lets
   the name be printed once, on the image, instead of again on the card */
.versus-pair {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.versus-half {
  position: relative;
  aspect-ratio: 10 / 9;
  overflow: hidden;
  background: var(--ink-2);
}
.versus-half img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.95);
}
/* the seam: the left panel falls away to the left as it descends, the right
   picks the same line up — the geometry of the original composite */
.versus-full { clip-path: polygon(0 0, 100% 0, 94.5% 100%, 0 100%); }
.versus-slice { clip-path: polygon(5.5% 0, 100% 0, 100% 100%, 0 100%); }
.versus-tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-0);
  background: var(--bronze);
  padding: 0.5rem 1.05rem;
}
/* sits in the gutter, on the seam, at the vertical middle of the photographs */
.versus-or {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: var(--ink-0);
  padding: 0.4rem 0;
  font-family: var(--font-label);
  font-size: 0.62rem; letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--bronze);
}
/* phones: no sliver of a panorama — stack the two halves and let "or" fall
   back into the flow between them */
/* same breakpoint as .choice-grid: the two must stack together or the
   photographs stop sitting above the columns they name */
@media (max-width: 860px) {
  .versus-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* keep the crop's own proportion — a comparison image is the wrong place
     to lose 18% of each photograph to a wider box */
  .versus-half { clip-path: none; }
  .versus-or {
    position: static; transform: none;
    display: block; text-align: center; padding: 0.9rem 0;
  }
}

/* ---------- origin carousel (the model, then what came out of it) --------
   Slide one is always the photographed model; every slide after it is a
   rendering made from that photograph. The bronze source badge and the
   arrow in the filmstrip keep that lineage on screen the whole way round. */
/* min-width:0 so the filmstrip scrolls rather than widening the grid track */
.origin { position: relative; min-width: 0; }
.origin-stage {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.origin-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s var(--ease-out), visibility 0s 0.8s;
}
.origin-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s var(--ease-out);
}
.origin-slide img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95); }

/* the tag in the corner of the stage: bronze on the model, quiet on renders */
.origin-badge {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text);
  background: rgba(19, 19, 22, 0.84);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line-bronze);
  border-right: 1px solid var(--line-bronze);
  padding: 0.5rem 1.05rem;
  transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
.origin-badge.is-source {
  color: var(--ink-0);
  background: var(--bronze);
  border-color: var(--bronze);
}

.origin-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: 0.85rem;
}
.origin-cap { display: flex; align-items: baseline; gap: 0.85rem; min-width: 0; }
.origin-num {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.8rem; letter-spacing: 0.2em;
  color: var(--bronze);
}
.origin-name {
  font-family: var(--font-label);
  font-size: 0.72rem; letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.origin-arrows { display: flex; gap: 0.3rem; flex: none; }
.origin-arrow {
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: var(--font-display); font-size: 0.95rem; line-height: 1;
  transition: color 0.3s, border-color 0.3s;
}
.origin-arrow:hover { color: var(--bronze); border-color: var(--line-bronze); }

.origin-strip {
  display: flex; align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.45rem;
}
.origin-thumb {
  flex: none;
  width: clamp(56px, 6.4vw, 72px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 1px solid transparent;
  opacity: 0.4;
  transition: opacity 0.35s, border-color 0.35s;
}
.origin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.origin-thumb:hover { opacity: 0.8; }
.origin-thumb.is-active { opacity: 1; border-color: var(--line-bronze); }
.origin-thumb.is-source { opacity: 0.72; border-color: var(--bronze-dim); }
.origin-thumb.is-source:hover { opacity: 0.92; }
.origin-thumb.is-source.is-active { opacity: 1; border-color: var(--bronze); }
/* the arrow that reads "from this one, all of these" */
.origin-link {
  flex: none;
  width: 1.7rem;
  display: grid; place-items: center;
  color: var(--bronze);
  font-family: var(--font-display); font-size: 0.9rem; line-height: 1;
}
/* narrow: let the caption wrap rather than clip — the "from that photograph"
   tail is the whole point of the line */
@media (max-width: 560px) {
  .origin-foot { align-items: flex-start; }
  .origin-cap { flex-wrap: wrap; gap: 0.3rem 0.7rem; }
  .origin-name { white-space: normal; line-height: 1.5; }
}
.origin-strip::-webkit-scrollbar { height: 5px; }
.origin-strip::-webkit-scrollbar-thumb { background: var(--bronze-dim); }
.origin-strip::-webkit-scrollbar-track { background: var(--ink-2); }

/* ---------- plate row (the four photographs of your model) ---------- */
.plate-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1rem);
}
.plate-link {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  cursor: zoom-in;
}
.plate-link img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.94);
  transition: opacity 0.4s, transform 1.2s var(--ease-out);
}
.plate-link:hover img { opacity: 0.9; transform: scale(1.03); }
.plate-link::after {
  content: attr(data-plate);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display);
  font-size: 0.68rem; letter-spacing: 0.18em;
  color: var(--bronze);
  background: rgba(19, 19, 22, 0.8);
  border-right: 1px solid var(--line-bronze);
  border-bottom: 1px solid var(--line-bronze);
  padding: 0.28rem 0.6rem;
}
@media (max-width: 720px) {
  .plate-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- scale specimens (one model, photographed at several scales) -----
   Each group is a justified filmstrip: the photographs share one row height and
   each keeps its own aspect ratio, so a wide line-up and a portrait detail sit
   in the same band uncropped and the row comes out flush. flex-grow carries the
   aspect ratio (set inline per image) — that is what does the justifying.
   Anchors keep .plate-link so main.js's delegated lightbox picks them up. */
.spec + .spec { margin-top: clamp(2.2rem, 5vh, 3.4rem); }
.spec-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.2rem 1.6rem;
  padding-bottom: 0.7rem; margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-bronze);
}
.spec-head h3 {
  font-family: var(--font-label);
  font-size: 0.84rem; font-weight: 500;
  letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--text);
}
.spec-head .label { color: var(--text-faint); }

/* --strip is the row's combined aspect ratio (the sum of its photographs'),
   set inline per row. Driving the strip's own aspect-ratio from it gives each
   row the height at which its pictures fill the width at their true shapes —
   so a row of three portraits stands tall and a row of wide shots sits low,
   instead of every row being forced to one height and cropped to reach it. */
.spec-strip {
  display: flex;
  gap: clamp(0.35rem, 0.8vw, 0.7rem);
  /* width stays pinned: without it, max-height would shrink the box on both
     axes to preserve the ratio and the row would stop short of the margin */
  width: 100%;
  aspect-ratio: var(--strip, 4);
  max-height: clamp(320px, 58vh, 560px);
}
.spec-strip .plate-link {
  flex-basis: 0; flex-shrink: 1; min-width: 0;
  height: 100%; aspect-ratio: auto;
}
.spec-strip .plate-link img { width: 100%; height: 100%; }

/* phones: squeezing four plates into 375px would make the comparison useless,
   so the strip becomes a swipeable filmstrip at natural widths instead */
@media (max-width: 720px) {
  .spec-strip {
    aspect-ratio: auto;
    height: clamp(165px, 30vh, 215px);
    max-height: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bronze-dim) transparent;
  }
  .spec-strip .plate-link { flex: 0 0 auto; width: auto; scroll-snap-align: start; }
  .spec-strip .plate-link img { width: auto; }
}

/* these photographs carry their own printed scale labels, so the plate badge
   would only repeat them (and land on the logo watermark) — drop it when no
   data-plate is set, rather than rendering an empty bronze box */
.plate-link:not([data-plate])::after { display: none; }

/* the hairline that carries the eye from the model down into the sheet */
.handoff {
  display: flex; align-items: center; gap: 1rem;
  margin-top: clamp(2rem, 5vh, 3.2rem);
  color: var(--bronze);
}
.handoff::before, .handoff::after {
  content: ""; height: 1px; background: var(--line-bronze); flex: 1;
}
.handoff span {
  font-family: var(--font-label);
  font-size: 0.66rem; letter-spacing: var(--track-wide); text-transform: uppercase;
  text-align: center;
}

/* ---------- contact sheet (the same model, rendered every way) ---------- */
.sheet {
  border: 1px solid var(--line-bronze);
  background: var(--ink-1);
  padding: clamp(0.9rem, 2.2vw, 1.6rem);
  margin-top: clamp(2rem, 5vh, 3.2rem);
}
.sheet-bar {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.4rem 1.6rem;
  padding-bottom: 0.9rem;
  margin-bottom: clamp(0.7rem, 1.8vw, 1.1rem);
  border-bottom: 1px solid var(--line);
}
.sheet-bar .label { color: var(--text-faint); }
/* five across, four down: twenty frames, and the column count quietly
   rehearses the number you get to keep */
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.1vw, 0.95rem);
}
@media (max-width: 900px) { .sheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sheet-cell {
  display: block;
  cursor: zoom-in;
}
.sheet-cell .frame {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  transition: border-color 0.35s;
}
.sheet-cell img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) brightness(0.94);
  transition: filter 0.45s, opacity 0.4s;
}
.sheet-cell:hover .frame { border-color: var(--line-bronze); }
.sheet-cell:hover img { filter: saturate(1) brightness(1); }
.sheet-cap {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding-top: 0.45rem;
}
.sheet-idx {
  font-family: var(--font-display);
  font-size: 0.64rem; letter-spacing: 0.16em;
  color: var(--bronze);
}
.sheet-style {
  font-family: var(--font-label);
  font-size: 0.62rem; letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--text-faint);
}
.sheet-cell:hover .sheet-style { color: var(--text-dim); }
.sheet-note {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.5rem 1.4rem;
  margin-top: clamp(0.9rem, 2vw, 1.3rem);
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.88rem;
}

/* big quiet statement band */
.statement {
  padding-block: clamp(6rem, 14vh, 10.5rem);
  border-block: 1px solid var(--line);
  text-align: center;
}

/* statement with a blurred photograph behind it — a memory of the workshop.
   The bg layer is oversized and moved slowly by JS (data-parallax); the
   ::before overlay dims it and feathers it into the page black at the edges */
.statement-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.statement-media .statement-bg {
  position: absolute;
  left: 0; right: 0; top: -28%; bottom: -28%;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: blur(1.4px) saturate(0.8) brightness(0.62);
  transform: scale(1.15);
  will-change: transform;
}
.statement-media::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    var(--ink-0) 0%, rgba(19, 19, 22, 0.64) 26%,
    rgba(19, 19, 22, 0.64) 74%, var(--ink-0) 100%);
}
.statement blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.8vw, 2.3rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.35;
  max-width: 24em;
  margin: 0 auto;
}
.statement blockquote em { font-style: normal; color: var(--bronze); }
.statement cite { display: block; margin-top: 1.6rem; font-style: normal; }

.statement-tall { padding-block: clamp(8rem, 18vh, 13.5rem); }

/* ---------- home page: tighter vertical rhythm ---------- */
/* the home scroll was one long exhale — pull the sections closer together */
.home { --section-gap: clamp(3.2rem, 8vh, 5.5rem); }
.home .hero { min-height: 80vh; }
.home .sec-head { margin-bottom: clamp(1.8rem, 4vh, 3rem); }
.home .work-grid { row-gap: clamp(1.6rem, 3.5vh, 2.4rem); }
.home .plaque { padding: clamp(1.4rem, 3vw, 2.2rem); }
.home .statement { padding-block: clamp(5.5rem, 13vh, 9rem); }