/* gs-v2 — the shared v2 design system for Geranium Street pages.
   A page opts in with <body class="gs-v2">. Components are gs- prefixed and
   element rules sit under :where(.gs-v2), so this file changes nothing on a
   page that has not opted in. Catalogue: docs/design/v2-components.md */

/* ── Tokens ── */
.gs-v2 {
  --gs-night: #0C0C0C;
  --gs-night-warm: #141210;
  --gs-night-raised: #1C1918;
  --gs-day: #ECE8DF;
  --gs-ink: #F5F2EB;
  --gs-ink-day: #1B1D1A;
  --gs-muted: rgba(245, 242, 235, 0.68);
  --gs-muted-day: #5E625B;
  --gs-line: rgba(245, 242, 235, 0.14);
  --gs-line-day: rgba(27, 29, 26, 0.14);
  --gs-green: #00C853;
  --gs-green-hover: #00E676;
  --gs-green-day: #1E5C35;
  --gs-gold: #C4A265;
  --gs-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --gs-font-body: 'Inter', sans-serif;
  --gs-font-mono: 'JetBrains Mono', monospace;
  --gs-h1: clamp(2.6rem, 5vw, 4.4rem);
  --gs-h2: clamp(2rem, 3.6vw, 3rem);
  --gs-h3: clamp(1.3rem, 1.8vw, 1.55rem);
  --gs-body: 1.0625rem;
  --gs-small: 0.9375rem;
  --gs-xs: 0.8125rem;
  --gs-label: 0.75rem;
  --gs-max: 1200px;
  --gs-gutter: clamp(16px, 4vw, 40px);
  --gs-section-y: clamp(4.5rem, 7.5vw, 6.5rem);
  --gs-radius: 2px;
  --gs-pill: 999px;
  --gs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gs-fast: 0.2s;
  --gs-base: 0.6s;
  --gs-slow: 0.9s;
  /* The shared shell (nav, menus, footer) reads these unprefixed names. */
  --bg: var(--gs-night);
  --bg-warm: var(--gs-night-warm);
  --surface: var(--gs-night-raised);
  --text: var(--gs-ink);
  --text-muted: var(--gs-muted);
  --accent: var(--gs-green);
  --accent-hover: var(--gs-green-hover);
  --accent-3: var(--gs-gold);
  --border: var(--gs-ink);
  --border-subtle: rgba(245, 242, 235, 0.12);
  --border-w: 3px;
  --nav-h: 68px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: var(--gs-font-body);
  --font-mono: var(--gs-font-mono);
  --font-serif: var(--gs-font-display);
  --ease-out-expo: var(--gs-ease);
}

/* Surface context: components read these, so one component works on both. */
.gs-v2, .gs-night {
  --gs-fg: var(--gs-ink);
  --gs-fg-muted: var(--gs-muted);
  --gs-rule: var(--gs-line);
  --gs-link: var(--gs-green);
  --gs-focus: var(--gs-green);
  --gs-tag: var(--gs-gold);
  --gs-tb-line: rgba(245, 242, 235, 0.2);
}
.gs-day {
  --gs-fg: var(--gs-ink-day);
  --gs-fg-muted: var(--gs-muted-day);
  --gs-rule: var(--gs-line-day);
  --gs-link: var(--gs-green-day);
  --gs-focus: var(--gs-green-day);
  --gs-tag: var(--gs-muted-day);
  --gs-tb-line: rgba(27, 29, 26, 0.22);
}
.gs-night { background: var(--gs-night); color: var(--gs-ink); }
.gs-night--warm { background: var(--gs-night-warm); }
.gs-day { background: var(--gs-day); color: var(--gs-ink-day); }

/* ── Base ── */
:where(.gs-v2) *, :where(.gs-v2) *::before, :where(.gs-v2) *::after { margin: 0; padding: 0; box-sizing: border-box; }
html:has(> body.gs-v2) { scrollbar-color: #4a4742 #0C0C0C; -webkit-text-size-adjust: 100%; }
body:where(.gs-v2) { margin: 0; font-family: var(--gs-font-body); font-size: var(--gs-body); line-height: 1.65; background: var(--gs-night); color: var(--gs-ink); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; caret-color: var(--gs-green); }
:where(.gs-v2) a { color: inherit; text-decoration: none; }
:where(.gs-v2) img { display: block; max-width: 100%; height: auto; }
:where(.gs-v2) button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
:where(.gs-v2) :is(ul, ol) { list-style: none; }
:where(.gs-v2) ::selection { background: var(--gs-green); color: var(--gs-night); }
:where(.gs-v2) .gs-day ::selection { background: var(--gs-ink-day); color: var(--gs-day); }
:where(.gs-v2) :focus-visible { outline: 2px solid var(--gs-focus); outline-offset: 3px; }
/* sections that receive focus after an in-page jump aren't controls */
:where(.gs-v2) [tabindex="-1"]:focus { outline: none; }
:where(.gs-v2) :is(section, figure)[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }
:where(.gs-v2) .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 0.6rem 1rem; background: var(--gs-green); color: var(--gs-night); font-size: 0.875rem; font-weight: 600; }
:where(.gs-v2) .skip-link:focus { left: 1rem; top: 1rem; }
:where(.gs-v2) :is(h1, h2, h3) { font-family: var(--gs-font-display); font-weight: 300; text-wrap: balance; letter-spacing: -0.015em; }
:where(.gs-v2) h2 { font-size: var(--gs-h2); line-height: 1.06; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
:where(.gs-v2) h3 { font-size: var(--gs-h3); line-height: 1.25; font-weight: 400; }
:where(.gs-v2) p { text-wrap: pretty; }
.gs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gs-wrap { width: min(var(--gs-max), 100% - 2 * var(--gs-gutter)); margin-inline: auto; }
.gs-section { padding-block: var(--gs-section-y); }
.gs-lede { color: var(--gs-fg-muted); max-width: 52ch; }
.gs-mono { font-family: var(--gs-font-mono); font-variant-numeric: tabular-nums; }

/* ── Links ── */
.gs-ul { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(196, 162, 101, 0.7); transition: color 0.2s, text-decoration-color 0.2s; }
.gs-ul:hover { color: var(--gs-gold); text-decoration-color: currentColor; }
.gs-day .gs-ul { text-decoration-color: rgba(30, 92, 53, 0.45); }
.gs-day .gs-ul:hover { color: var(--gs-green-day); }
/* Link row: a quiet line of related links under a section */
.gs-linkrow { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.1rem; border-top: 1px solid var(--gs-rule); display: flex; flex-wrap: wrap; gap: 0.2rem 0; font-size: var(--gs-small); }
.gs-linkrow a { color: var(--gs-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--gs-rule); padding: 0.35rem 0; transition: text-decoration-color 0.2s, color 0.2s; }
.gs-linkrow a:not(:last-child)::after { content: '\00B7'; display: inline-block; padding: 0 0.7rem; color: var(--gs-fg-muted); text-decoration: none; }
.gs-linkrow a:hover { color: var(--gs-link); text-decoration-color: currentColor; }

/* ── Buttons: primary and ghost, with an optional arrow that nudges ── */
.gs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 48px; padding: 0.8rem 1.35rem; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; border-radius: var(--gs-radius); transition: background-color 0.2s, border-color 0.2s, color 0.2s, scale 0.25s var(--gs-ease); }
.gs-btn:has(> .gs-ar) { padding-right: 1.2rem; }
.gs-ar { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.4s var(--gs-ease); }
.gs-btn:hover .gs-ar, .gs-btn:focus-visible .gs-ar { translate: 3px 0; }
.gs-btn:active { scale: 0.98; transition-duration: 0.2s, 0.2s, 0.2s, 0.08s; }
.gs-btn--primary { background: var(--gs-green); color: var(--gs-night); }
.gs-btn--primary:hover { background: var(--gs-green-hover); }
.gs-btn--primary:active { background: #00B34A; }
.gs-btn--ghost { border: 1px solid rgba(245, 242, 235, 0.55); color: var(--gs-ink); background: rgba(12, 12, 12, 0.25); }
.gs-btn--ghost:hover { border-color: var(--gs-ink); background: rgba(12, 12, 12, 0.5); }
.gs-btn--ghost:active { background: rgba(12, 12, 12, 0.7); }
.gs-day .gs-btn--primary { background: var(--gs-ink-day); color: var(--gs-day); }
.gs-day .gs-btn--primary:hover { background: var(--gs-green-day); }
.gs-day .gs-btn--primary:active { background: #174A2A; }

/* ── Photo frame and measured overlay ──
   .gs-ov is drawn in the photo's own pixel space (viewBox = image size,
   sliced like object-fit: cover), so a line sits on the thing it measures
   at every crop. .gs-ovl labels are HTML placed on image coordinates
   (--gs-x, --gs-y over --gs-iw x --gs-ih) with container units. */
.gs-ph { position: relative; overflow: hidden; background: #2a2825; container-type: size; }
.gs-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gs-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 1px rgba(12, 12, 12, 0.75)); }
.gs-ov path { fill: none; stroke: #F5F2EB; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.gs-ov .gs-dot { stroke-width: 7; stroke-linecap: round; }
.gs-ov .gs-ln { stroke-dasharray: 1; stroke-dashoffset: 0; }
.gs-ovl {
  --gs-ovs: max(100cqw / var(--gs-iw), 100cqh / var(--gs-ih));
  position: absolute; z-index: 1;
  left: calc(50% + (var(--gs-x) - var(--gs-iw) / 2) * var(--gs-ovs));
  top: calc(50% + (var(--gs-y) - var(--gs-ih) / 2) * var(--gs-ovs));
  transform: translate(var(--gs-tx, -50%), -50%);
  padding: 0.42em 0.6em; background: rgba(12, 12, 12, 0.86); color: #F5F2EB;
  font: 500 var(--gs-label)/1 var(--gs-font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.gs-ovl--l { --gs-tx: 0%; }
.gs-ovl--r { --gs-tx: -100%; }
/* Corner frame + tag, for a fact that is not one measurable line */
.gs-frame::before, .gs-frame::after { content: ''; position: absolute; z-index: 1; width: 18px; height: 18px; border: 1.5px solid rgba(245, 242, 235, 0.95); filter: drop-shadow(0 0 1px rgba(12, 12, 12, 0.8)); pointer-events: none; }
.gs-frame::before { top: 12px; right: 12px; border-left: 0; border-bottom: 0; transform-origin: 100% 0; }
.gs-frame::after { bottom: 12px; left: 12px; border-right: 0; border-top: 0; transform-origin: 0 100%; }
.gs-frame .gs-ovl { left: 12px; top: 12px; transform: none; }
/* Dimension line: an SVG <g class="gs-dim"> of .gs-dim-line, .gs-dim-tick
   and a .gs-dim-label; stroke widths and label size belong to the page,
   because they depend on the drawing's viewBox. */
.gs-dim-line, .gs-dim-tick { stroke: #F5F2EB; fill: none; }
.gs-dim-line { filter: drop-shadow(0 0 1.5px rgba(12, 12, 12, 0.7)); }
.gs-dim-label { fill: #F5F2EB; font-family: var(--gs-font-mono); letter-spacing: 0.1em; paint-order: stroke; stroke: rgba(12, 12, 12, 0.6); stroke-linejoin: round; font-variant-numeric: tabular-nums; }
/* Photo with a caption below it */
.gs-fig { margin: 0; }
.gs-fig > figcaption { padding-top: 0.7rem; font-size: 0.875rem; color: var(--gs-fg-muted); }
/* Hero scroll-out: the media eases larger and dims as it leaves (--gs-out 0..1) */
.gs-scrollout { position: absolute; inset: 0; scale: calc(1 + var(--gs-out, 0) * 0.06); transform-origin: var(--gs-out-origin, 50% 35%); }
.gs-scrollout::after { content: ''; position: absolute; inset: 0; z-index: 2; background: #0C0C0C; opacity: calc(var(--gs-out, 0) * 0.55); pointer-events: none; }
.gs-scrollout img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Parallax: the photo drifts up to --gs-py px inside its frame (set by script) */
.gs-ph[data-parallax] > img { top: -16px; height: calc(100% + 32px); translate: 0 calc(var(--gs-py, 0) * 1px); }

/* ── Reveal and draw states. Only with JS and motion allowed: gs-v2.js adds
   .gs-motion to <html>. Without it every element is in its final state. ── */
.gs-motion :is([data-reveal=""], [data-reveal="rise"]) { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--gs-ease), transform 0.9s var(--gs-ease); }
.gs-motion :is([data-reveal=""], [data-reveal="rise"]).is-in { opacity: 1; transform: none; }
.gs-motion [data-reveal="wipe"] { clip-path: inset(100% 0 0 0); transition: clip-path 0.9s var(--gs-ease); }
.gs-motion [data-reveal="wipe"].is-in { clip-path: inset(0); }
.gs-motion [data-reveal="wipe"] > img { transform: scale(1.06); transition: transform 0.9s var(--gs-ease); }
.gs-motion [data-reveal="wipe"].is-in > img { transform: none; }
.gs-motion .gs-tb > div::before, .gs-motion .gs-tb::after { transition: transform 0.9s var(--gs-ease) calc(var(--gs-d, 0) * 80ms); }
.gs-motion .gs-tb > div::after, .gs-motion .gs-tb::before { transition: transform 0.9s var(--gs-ease) calc(var(--gs-d, 0) * 80ms + 120ms); }
.gs-motion .gs-tb dt, .gs-motion .gs-tb dd { transition: opacity 0.6s linear calc(var(--gs-d, 0) * 80ms + 350ms); }
.gs-motion .gs-tb[data-reveal]:not(.is-in) > div::before, .gs-motion .gs-tb[data-reveal]:not(.is-in)::after { transform: scaleX(0); }
.gs-motion .gs-tb[data-reveal]:not(.is-in) > div::after, .gs-motion .gs-tb[data-reveal]:not(.is-in)::before { transform: scaleY(0); }
.gs-motion .gs-tb[data-reveal]:not(.is-in) :is(dt, dd) { opacity: 0; }
/* Measured overlays draw on enter: the label leads, the line follows, and a
   line retracts before its label goes. */
.gs-motion [data-measure]:not([data-measure="load"]) .gs-ovl { transition: opacity 0.2s linear 0.2s; }
.gs-motion [data-measure]:not([data-measure="load"]).is-drawn .gs-ovl { transition: opacity 0.3s linear 0.05s; }
.gs-motion [data-measure]:not([data-measure="load"]) .gs-ov .gs-ln { transition: stroke-dashoffset 0.2s linear; }
.gs-motion [data-measure]:not([data-measure="load"]).is-drawn .gs-ov .gs-ln { transition: stroke-dashoffset 0.8s var(--gs-ease) 0.4s; }
.gs-motion [data-measure]:not([data-measure="load"]) .gs-ov .gs-tk { transition: opacity 0.15s linear; }
.gs-motion [data-measure]:not([data-measure="load"]).is-drawn .gs-ov .gs-tk { transition: opacity 0.3s linear 0.9s; }
.gs-motion [data-measure]:not([data-measure="load"]):not(.is-drawn) .gs-ov .gs-ln { stroke-dashoffset: 1; }
.gs-motion [data-measure]:not([data-measure="load"]):not(.is-drawn) :is(.gs-ov .gs-tk, .gs-ovl) { opacity: 0; }
.gs-motion .gs-frame[data-measure]::before, .gs-motion .gs-frame[data-measure]::after { transition: transform 0.8s var(--gs-ease) 0.4s; }
.gs-motion .gs-frame[data-measure]:not(.is-drawn)::before, .gs-motion .gs-frame[data-measure]:not(.is-drawn)::after { transform: scale(0); }
/* data-measure="load": drawn by CSS as the page first paints, so nothing
   flashes before the script runs. Needs html.js (set by the inline head
   snippet) and motion allowed. --gs-i staggers groups by 200ms. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-measure="load"] .gs-dim-line { stroke-dasharray: 1; animation: gs-draw 0.9s var(--gs-ease) calc(250ms + var(--gs-i, 0) * 200ms) both; }
  .js [data-measure="load"] .gs-dim-label { animation: gs-show 1ms linear calc(250ms + var(--gs-i, 0) * 200ms) both; }
  .js [data-measure="load"] .gs-ovl { animation: gs-show 0.3s linear 0.05s both; }
  .js [data-measure="load"] .gs-ov .gs-ln { animation: gs-draw 0.8s var(--gs-ease) 0.4s both; }
  .js [data-measure="load"] .gs-ov .gs-tk { animation: gs-show 0.3s linear 0.9s both; }
}
@keyframes gs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gs-show { from { opacity: 0; } to { opacity: 1; } }

/* ── Title block: a drawing's title block as a <dl> grid ── */
.gs-tb { position: relative; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.gs-tb > div { position: relative; padding: 1.15rem 1.35rem 1.4rem; }
.gs-tb > div::before, .gs-tb > div::after, .gs-tb::before, .gs-tb::after { content: ''; position: absolute; background: var(--gs-tb-line); }
.gs-tb > div::before { left: 0; right: 0; top: 0; height: 1px; transform-origin: 0 0; }
.gs-tb > div::after { top: 0; bottom: 0; left: 0; width: 1px; transform-origin: 0 0; }
.gs-tb::before { top: 0; bottom: 0; right: 0; width: 1px; transform-origin: 0 0; }
.gs-tb::after { left: 0; right: 0; bottom: 0; height: 1px; transform-origin: 0 0; }
.gs-tb dt { font: 500 var(--gs-label)/1.3 var(--gs-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gs-tag); margin-bottom: 0.7rem; }
.gs-tb dd { font-family: var(--gs-font-display); font-weight: 300; font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.35; letter-spacing: -0.005em; color: var(--gs-fg); text-wrap: pretty; }
/* Figures: one equal column per entry, big numbers */
.gs-tb--figures { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.gs-tb--figures > div { padding: 1.1rem 1.3rem 1.3rem; }
.gs-tb--figures dt { margin-bottom: 0.6rem; }
.gs-tb--figures dd { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: normal; text-wrap: wrap; }

/* ── Sticky stage (scrollytelling) ──
   Default (no JS, reduced motion, under 900px): photos with the caption laid
   over a scrim. With motion at 900px+, the script adds .is-stage: one sticky
   photo beside the captions, swapped as each caption's heading crosses the
   middle of the screen. Up to six items. */
.gs-stage { width: min(var(--gs-max), 100% - 2 * var(--gs-gutter)); margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.gs-stage-item { position: relative; margin: 0; }
.gs-stage-media { aspect-ratio: 4 / 3; }
.gs-stage-cap { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.35rem 1.35rem 1.2rem; color: #F5F2EB; background: linear-gradient(to top, rgba(12, 12, 12, 0.92) 0%, rgba(12, 12, 12, 0.84) 38%, rgba(12, 12, 12, 0) 72%); pointer-events: none; }
.gs-stage-cap h3 { font-size: clamp(1.45rem, 2.1vw, 1.8rem); font-weight: 300; margin-bottom: 0.2rem; }
.gs-stage-cap p { font-size: var(--gs-small); line-height: 1.5; color: rgba(245, 242, 235, 0.86); }
.gs-stage-go { pointer-events: auto; display: inline-block; margin-top: 0.55rem; padding: 0.2rem 0; font-size: var(--gs-small); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(245, 242, 235, 0.45); }
.gs-stage-go::after { content: ''; position: absolute; inset: 0; }
.gs-stage-go:focus-visible { outline-color: #F5F2EB; }
.gs-stage-item:hover .gs-stage-go, .gs-stage-go:focus-visible { text-decoration-color: currentColor; }
.gs-stage-item .gs-ph > img { transition: transform 0.9s var(--gs-ease); }
.gs-stage-item:hover .gs-ph > img { transform: scale(1.025); }
@media (min-width: 900px) {
  .gs-motion .gs-stage.is-stage { width: auto; margin: 0; padding-left: max(var(--gs-gutter), (100% - var(--gs-max)) / 2); grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 0; }
  .is-stage .gs-stage-item { display: contents; }
  .gs-motion .is-stage .gs-stage-media { grid-column: 2; grid-row: 1 / span 7; align-self: start; position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); aspect-ratio: auto; clip-path: inset(100% 0 0 0); transition: clip-path 0.9s var(--gs-ease); }
  .gs-motion .is-stage .gs-stage-media > img { transform: scale(1.08); transition: transform 0.9s var(--gs-ease); }
  .gs-motion .is-stage .gs-stage-item:first-child .gs-stage-media, .gs-motion .is-stage .gs-stage-media.is-on { clip-path: inset(0); }
  .gs-motion .is-stage .gs-stage-item:first-child .gs-stage-media > img, .gs-motion .is-stage .gs-stage-media.is-on > img { transform: none; }
  .gs-motion .gs-stage.is-stage::after { content: ''; grid-column: 1; grid-row: 7; height: 44vh; }
  .is-stage .gs-stage-cap { grid-column: 1; position: relative; inset: auto; min-height: 46vh; justify-content: center; padding: 1.5rem 0; background: none; color: var(--gs-ink-day); pointer-events: auto; opacity: 0.35; transition: opacity 0.6s var(--gs-ease); }
  .is-stage .gs-stage-cap.is-on, .is-stage .gs-stage-cap:focus-within { opacity: 1; }
  .is-stage .gs-stage-cap::before { content: ''; width: 3rem; height: 1px; margin-bottom: 1.4rem; background: var(--gs-green-day); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--gs-ease); }
  .is-stage .gs-stage-cap.is-on::before { transform: scaleX(1); }
  .is-stage .gs-stage-cap h3 { transition: color 0.5s linear; }
  .is-stage .gs-stage-cap.is-on h3 { color: var(--gs-green-day); }
  .is-stage .gs-stage-item:nth-child(1) .gs-stage-cap { grid-row: 1; }
  .is-stage .gs-stage-item:nth-child(2) .gs-stage-cap { grid-row: 2; }
  .is-stage .gs-stage-item:nth-child(3) .gs-stage-cap { grid-row: 3; }
  .is-stage .gs-stage-item:nth-child(4) .gs-stage-cap { grid-row: 4; }
  .is-stage .gs-stage-item:nth-child(5) .gs-stage-cap { grid-row: 5; }
  .is-stage .gs-stage-item:nth-child(6) .gs-stage-cap { grid-row: 6; }
  .is-stage .gs-stage-cap h3 { font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.08; margin-bottom: 0.6rem; }
  .is-stage .gs-stage-cap p { color: var(--gs-muted-day); font-size: 1rem; max-width: 34ch; }
  .is-stage .gs-stage-go { color: var(--gs-green-day); text-decoration-color: rgba(30, 92, 53, 0.4); }
  .is-stage .gs-stage-go::after { content: none; }
  .is-stage .gs-stage-go:focus-visible { outline: 2px solid var(--gs-ink-day); }
}

/* ── Filmstrip: a horizontal run of photo cards with arrows and a progress line ── */
.gs-film-track { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gs-gutter), (100% - var(--gs-max)) / 2); padding-inline: max(var(--gs-gutter), (100% - var(--gs-max)) / 2); padding-bottom: 0.5rem; scrollbar-width: thin; scrollbar-color: rgba(27, 29, 26, 0.35) transparent; }
.js .gs-film-track { scrollbar-width: none; }
.js .gs-film-track::-webkit-scrollbar { display: none; }
.gs-film-track:focus-visible { outline: 2px solid var(--gs-fg); outline-offset: -2px; }
@media (pointer: fine) { .js .gs-film-track { cursor: grab; user-select: none; -webkit-user-select: none; } }
.gs-film-track.no-snap { scroll-snap-type: none; }
.gs-film-track.is-drag { cursor: grabbing; }
.gs-film-list { display: flex; gap: clamp(1rem, 2vw, 1.75rem); width: max-content; }
.gs-film-list::after { content: ''; flex: none; width: 1px; }
.gs-film-card { flex: none; width: clamp(280px, 44vw, 640px); scroll-snap-align: start; }
.gs-film-card a { display: block; color: inherit; -webkit-user-drag: none; }
.gs-film-card figure { margin: 0; }
.gs-film-card .gs-ph { aspect-ratio: 4 / 3; }
.gs-film-card .gs-ph > img { transition: transform 0.9s var(--gs-ease); }
.gs-film-card a:hover .gs-ph > img { transform: scale(1.025); }
.gs-film-card figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.75rem; padding-top: 0.85rem; }
.gs-film-card h3 { font-size: 1.3rem; }
.gs-film-card a:hover h3 { color: var(--gs-link); }
.gs-film-card p { font-size: var(--gs-small); color: var(--gs-fg-muted); }
.gs-film-ctl { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; }
.gs-film-ctl[hidden] { display: none; }
.gs-film-bar { position: relative; flex: 1; height: 1px; margin-right: 1rem; background: var(--gs-rule); }
.gs-film-bar i { position: absolute; left: 0; right: 0; top: -0.5px; height: 2px; background: var(--gs-fg); transform: scaleX(var(--gs-film-p, 0.3)); transform-origin: 0 50%; }
.gs-film-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(27, 29, 26, 0.3); border-radius: 50%; color: var(--gs-fg); transition: border-color 0.2s, background-color 0.2s, color 0.2s, opacity 0.2s; }
.gs-night .gs-film-btn { border-color: rgba(245, 242, 235, 0.3); }
.gs-film-btn:hover:not(:disabled) { border-color: var(--gs-fg); background: var(--gs-fg); color: var(--gs-day); }
.gs-night .gs-film-btn:hover:not(:disabled) { color: var(--gs-night); }
.gs-film-btn:disabled { opacity: 0.35; cursor: default; }
.gs-film-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ── Statements: large <details>, a sentence you can open for the detail ── */
.gs-statements { border-bottom: 1px solid var(--gs-rule); }
.gs-statement { border-top: 1px solid var(--gs-rule); }
.gs-statement summary { list-style: none; cursor: pointer; text-wrap: balance; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: clamp(1.1rem, 2.2vw, 1.6rem) 0; font-family: var(--gs-font-display); font-weight: 300; font-size: clamp(1.4rem, 2.7vw, 2.25rem); line-height: 1.15; letter-spacing: -0.015em; transition: color 0.2s; }
.gs-statement summary::-webkit-details-marker { display: none; }
.gs-statement summary:hover { color: var(--gs-gold); }
.gs-statement-i { position: relative; width: 22px; height: 22px; transition: transform 0.45s var(--gs-ease); }
.gs-statement-i::before, .gs-statement-i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--gs-gold); }
.gs-statement-i::after { transform: rotate(90deg); }
.gs-statement[open] .gs-statement-i { transform: rotate(45deg); }
.gs-statement-body { padding: 0 0 clamp(1.4rem, 2.5vw, 2rem); max-width: 64ch; color: var(--gs-fg-muted); }
.gs-statement-body a { color: var(--gs-fg); }
.gs-motion .gs-statement[open] .gs-statement-body { animation: gs-in 0.6s var(--gs-ease); }
@keyframes gs-in { from { opacity: 0; transform: translateY(8px); } }

/* ── FAQ: compact <details>; keep the text identical to the FAQPage JSON-LD ── */
.gs-faq { max-width: 860px; }
.gs-faq details { border-top: 1px solid var(--gs-rule); }
.gs-faq details:last-child { border-bottom: 1px solid var(--gs-rule); }
.gs-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-size: var(--gs-body); font-weight: 500; line-height: 1.45; transition: color 0.2s; }
.gs-faq summary::-webkit-details-marker { display: none; }
.gs-faq summary::after { content: ''; flex: none; width: 10px; height: 10px; margin-top: 0.4rem; border-right: 1.5px solid var(--gs-gold); border-bottom: 1.5px solid var(--gs-gold); transform: rotate(45deg); transition: transform 0.25s var(--gs-ease); }
.gs-faq details[open] summary::after { transform: rotate(225deg); margin-top: 0.65rem; }
.gs-faq summary:hover { color: var(--gs-gold); }
.gs-faq details p { padding: 0 0 1.2rem; font-size: 0.9875rem; line-height: 1.65; color: var(--gs-fg-muted); max-width: 64ch; }
.gs-faq a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(196, 162, 101, 0.7); }

/* ── Process steps: a real sequence; the line fills with the scroll ── */
.gs-steps { counter-reset: gs-step; position: relative; display: grid; grid-template-columns: repeat(var(--gs-steps, 5), minmax(0, 1fr)); border-top: 1px solid var(--gs-rule); }
.gs-steps::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--gs-link); transform-origin: 0 50%; transform: scaleX(var(--gs-sp, 0)); opacity: 0; }
.gs-motion .gs-steps::before { opacity: 1; }
.gs-motion .gs-steps > li { opacity: 0; translate: 0 14px; transition: opacity 0.5s linear, translate 0.9s var(--gs-ease); }
.gs-motion .gs-steps > li.is-in { opacity: 1; translate: none; }
.gs-steps > li { counter-increment: gs-step; padding: 1.25rem 1.25rem 0 0; }
.gs-steps > li::before { content: counter(gs-step); display: block; margin-bottom: 0.75rem; font-family: var(--gs-font-display); font-weight: 300; font-size: 2.4rem; line-height: 1; color: var(--gs-link); }
.gs-steps > li + li { padding-left: 1.25rem; border-left: 1px solid var(--gs-rule); }
.gs-steps p { font-size: 1rem; line-height: 1.5; }
.gs-steps a { color: var(--gs-link); text-decoration: underline; text-underline-offset: 0.2em; }

/* ── Chips: selectable materials or options (aria-pressed carries the state) ── */
.gs-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.5rem; }
.gs-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.3rem 0.85rem 0.3rem 0.35rem; border: 1px solid color-mix(in srgb, var(--gs-fg) 25%, transparent); border-radius: var(--gs-pill); font-size: 0.875rem; color: var(--gs-fg); background: rgba(255, 255, 255, 0.35); transition: border-color 0.2s, background-color 0.2s, color 0.2s, scale 0.3s var(--gs-ease); }
.gs-night .gs-chip { background: rgba(245, 242, 235, 0.04); }
.gs-chip:hover { border-color: var(--gs-fg); }
.gs-chip:active { scale: 0.95; transition-duration: 0.2s, 0.2s, 0.2s, 0.08s; }
.gs-chip[aria-pressed="true"] { border-color: var(--gs-fg); background: var(--gs-fg); color: var(--gs-day); }
.gs-night .gs-chip[aria-pressed="true"] { color: var(--gs-night); }
.gs-chip-sw { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.gs-chip-sw img { width: 100%; height: 100%; object-fit: cover; }
.gs-chip-sw::after { content: ''; position: absolute; inset: 0; background: rgba(12, 12, 12, 0.45); opacity: 0; transition: opacity 0.25s linear; }
.gs-chip-ck { position: absolute; inset: 0; z-index: 1; margin: auto; width: 18px; height: 18px; fill: none; stroke: #F5F2EB; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.15s linear; }
.gs-chip[aria-pressed="true"] .gs-chip-sw::after { opacity: 1; }
.gs-chip[aria-pressed="true"] .gs-chip-ck { stroke-dashoffset: 0; transition: stroke-dashoffset 0.45s var(--gs-ease) 0.08s; }
.gs-chip-note { min-height: 1.5em; margin-bottom: 1rem; font-size: var(--gs-xs); color: var(--gs-fg-muted); }

/* ── Cards: a material or product swatch with its name and an arrow ── */
.gs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem) clamp(0.75rem, 1.6vw, 1.25rem); }
.gs-card { display: block; color: var(--gs-fg); transition: translate 0.5s var(--gs-ease); }
.gs-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #1f2a1f; }
.gs-card-media > img { width: 100%; height: 100%; object-fit: cover; scale: var(--gs-z, 1); transition: scale 0.9s var(--gs-ease), transform 0.9s var(--gs-ease); }
.gs-card-name { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.1rem 0; font-size: var(--gs-small); line-height: 1.4; transition: color 0.2s; }
.gs-card-name .gs-ar { color: var(--gs-gold); }
.gs-card:hover, .gs-card:focus-visible { translate: 0 -4px; }
.gs-card:hover .gs-card-media > img, .gs-card:focus-visible .gs-card-media > img { scale: calc(var(--gs-z, 1) * 1.05); }
.gs-card:hover .gs-card-name { color: var(--gs-gold); }
.gs-card:hover .gs-ar, .gs-card:focus-visible .gs-ar { translate: 3px 0; }
.gs-card--ask .gs-card-media { display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--gs-night-raised); border: 1px solid var(--gs-line); font-family: var(--gs-font-display); font-weight: 300; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.2; text-align: center; color: var(--gs-ink); }
.gs-motion .gs-cards > li:nth-child(4n + 2) [data-reveal="wipe"] { transition-delay: 70ms; }
.gs-motion .gs-cards > li:nth-child(4n + 3) [data-reveal="wipe"] { transition-delay: 140ms; }
.gs-motion .gs-cards > li:nth-child(4n + 4) [data-reveal="wipe"] { transition-delay: 210ms; }

/* ── Tablet ── */
@media (max-width: 1024px) {
  /* the steps run down a rail instead of across */
  .gs-steps { grid-template-columns: minmax(0, 1fr); max-width: 40rem; border-top: 0; border-left: 1px solid var(--gs-rule); }
  .gs-steps::before { top: 0; bottom: 0; left: -1px; right: auto; width: 2px; height: auto; transform-origin: 50% 0; transform: scaleY(var(--gs-sp, 0)); }
  .gs-steps > li, .gs-steps > li + li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; padding: 0.8rem 0 0.8rem 1.25rem; border-left: 0; }
  .gs-steps > li::before { margin: 0; font-size: 1.8rem; }
}
@media (max-width: 899px) {
  .gs-stage { grid-template-columns: minmax(0, 1fr); }
  .gs-stage-media { aspect-ratio: 3 / 2; }
}

/* ── Phone ── */
@media (max-width: 768px) {
  .gs-v2 { --nav-h: 60px; --gs-section-y: 3.5rem; }
  :where(.gs-v2) h2 { margin-bottom: 1.25rem; }
  .gs-tb { grid-template-columns: minmax(0, 1fr); }
  .gs-tb > div { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 0.75rem; padding: 0.85rem 1rem 0.95rem; }
  .gs-tb dt { margin: 0.2rem 0 0; letter-spacing: 0.08em; }
  .gs-tb dd { font-size: 1.0625rem; }
  .gs-tb--figures { grid-auto-flow: row; }
  .gs-tb--figures > div { align-items: baseline; padding: 0.85rem 1rem 0.95rem; }
  .gs-tb--figures dt { margin: 0; }
  .gs-tb--figures dd { font-size: 1.5rem; }
  .gs-stage-cap { padding: 1rem; }
  .gs-stage-cap h3 { font-size: 1.5rem; }
  .gs-linkrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  .gs-linkrow a { padding: 0.55rem 0; }
  .gs-linkrow a:not(:last-child)::after { content: none; }
  .gs-film-card { width: 82vw; }
  .gs-film-card h3 { font-size: 1.15rem; }
  .gs-film-card p { font-size: 0.875rem; }
  .gs-steps > li, .gs-steps > li + li { grid-template-columns: 2.3rem minmax(0, 1fr); padding-left: 1rem; }
  .gs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-motion .gs-cards > li [data-reveal="wipe"] { transition-delay: 0s; }
  .gs-motion .gs-cards > li:nth-child(2n) [data-reveal="wipe"] { transition-delay: 70ms; }
}
@media (max-width: 600px) {
  .gs-stage-media { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-ph > img, .gs-card, .gs-card-media > img, .gs-btn, .gs-ar, .gs-chip, .gs-chip-ck, .gs-chip-sw::after, .gs-statement-i, .gs-faq summary::after, .gs-film-btn { transition: none; }
  .gs-stage-item:hover .gs-ph > img, .gs-film-card a:hover .gs-ph > img { transform: none; }
  .gs-card:hover, .gs-card:focus-visible, .gs-btn:hover .gs-ar, .gs-btn:focus-visible .gs-ar, .gs-card:hover .gs-ar, .gs-card:focus-visible .gs-ar { translate: none; }
  .gs-card:hover .gs-card-media > img, .gs-card:focus-visible .gs-card-media > img { scale: var(--gs-z, 1); }
  .gs-btn:active, .gs-chip:active { scale: none; }
}