/* ShopShot Studio, homepage stylesheet ("The Corridor").
   Loaded by index.html after the shared /assets/styles.css. Order matters: tokens, then the
   base rules, then the sections in page order. Every file is copied as-is by the build. */
/* ==== tokens.css ==== */
/* ShopShot Studio, homepage tokens ("The Corridor").
   Loaded only by /assets/home/home.css, after the shared /assets/styles.css.
   Every home token is prefixed --h- so nothing collides with the shared file.
   Section CSS must use these names and never hard-code a colour.
   This file is copied as-is by the build: never write a double curly brace in it. */

:root {
  /* ---------- Rooms: light ---------- */
  --h-paper: #f1f0ec;        /* ground of the light rooms; equals the shared --paper so the header blends */
  --h-paper-2: #e7e5df;      /* pricing band, card edges on paper */
  --h-surface: #fbfbf9;      /* raised light surfaces: order bar, step cards, price cards */
  --h-line: #d9d6cf;         /* hairlines on paper */
  --h-ink: #111014;          /* text on paper; darkest fill on paper */
  --h-ink-2: #3c3a43;        /* secondary text on paper, 9.6:1 */
  --h-muted: #67656e;        /* muted text and mono labels on paper, 5.1:1 (4.7:1 on paper-2) */

  /* ---------- Rooms: dark ---------- */
  --h-dark: #0e0d12;         /* ground of the dark rooms */
  --h-dark-2: #1a1920;       /* raised dark surfaces: canvas panel, nodes, video card, check card */
  --h-dark-3: #24222a;       /* hover of dark-2 surfaces */
  --h-dark-line: #2e2c35;    /* hairlines and dot grids on dark */
  --h-bone: #f3f2ef;         /* text on dark, 17:1 */
  --h-dark-muted: #a5a2aa;   /* muted text and mono labels on dark, 7.7:1 (6.9:1 on dark-2) */

  /* ---------- The one accent ---------- */
  --h-amber: #f0a32b;        /* fills with ink text (9.2:1), lines, knobs, rings, large words on dark. Never small text on paper. */
  --h-amber-deep: #8a4f00;   /* small text, links, eyebrows and focus rings on paper, 5.7:1 */
  --h-amber-deeper: #6e3f00; /* hover of amber-deep */
  --h-amber-soft: #fbebd0;   /* soft tint: checklist discs, notices, hover tints on paper */
  --h-rose: #f3ded6;         /* glow behind the corridor and the turntable, backgrounds only */
  --h-rec: #ff3b30;          /* the blinking rec dot only */

  /* ---------- Alpha helpers ---------- */
  --h-ink-a18: rgba(17, 16, 20, 0.18);
  --h-ink-a30: rgba(17, 16, 20, 0.30);
  --h-bone-a10: rgba(243, 242, 239, 0.10);
  --h-bone-a30: rgba(243, 242, 239, 0.30);
  --h-dark-a92: rgba(26, 25, 32, 0.92);
  --h-amber-a18: rgba(240, 163, 43, 0.18);
  --h-amber-a10: rgba(240, 163, 43, 0.10);

  /* ---------- Type ---------- */
  --h-font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --h-serif: "Instrument Serif", Georgia, "Times New Roman", Times, serif;
  --h-display: "Big Shoulders Display", "Arial Narrow", Impact, "Helvetica Neue", sans-serif;
  --h-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --h-mono-family: var(--h-mono);               /* alias: --h-mono is the family; sizes are --h-mono-lg/-md/-sm */

  --h-display-hero: clamp(36px, 6.2vw, 84px);   /* hero headline, serif, line-height 0.96 */
  --h-display-1: clamp(38px, 5.4vw, 76px);      /* section titles, serif, line-height 0.98 */
  --h-display-2: clamp(72px, 12vw, 200px);      /* closing CLOSE-UP?, Big Shoulders 900, line-height 0.86 */
  --h-numeral: clamp(64px, 8vw, 120px);         /* step numbers, Big Shoulders 800 */
  --h-amount: clamp(52px, 5vw, 72px);           /* price amounts, Big Shoulders 900 */
  --h-h3: clamp(20px, 2vw, 24px);               /* card headings, Figtree 700 */
  --h-lead: clamp(17px, 1.6vw, 19px);           /* lead paragraphs */
  --h-body: 17px;                               /* body; 16px under 640px, see below */
  --h-small: 15px;                              /* notes, credits */
  --h-mono-lg: 13px;                            /* mono sentence case (node bodies) */
  --h-mono-md: 12px;                            /* mono uppercase labels (readouts, eyebrows, chips) */
  --h-mono-sm: 11px;                            /* mono badges and card captions */
  --h-track: 0.1em;                             /* letter-spacing for uppercase mono */
  --h-lh-display: 0.96;
  --h-lh-body: 1.6;

  /* ---------- Spacing ---------- */
  --h-s1: 4px;
  --h-s2: 8px;
  --h-s3: 12px;
  --h-s4: 16px;
  --h-s5: 24px;
  --h-s6: 32px;
  --h-s7: 48px;
  --h-s8: 64px;
  --h-s9: 96px;
  --h-s10: 128px;
  --h-room-pad: clamp(72px, 9vw, 120px);  /* vertical padding of a room */
  --h-gap: clamp(24px, 4vw, 48px);        /* column gap inside a room */
  --h-gutter: 20px;                       /* side gutter, matches .wrap */
  --h-header: 66px;                       /* shared sticky header height */
  --h-rail: 40px;                         /* phone rail height */

  /* ---------- Hangs (elements that overlap the next room) ---------- */
  --h-hang-proof: 48px;      /* light table into the turntable room */
  --h-hang-turntable: 48px;  /* 3D stage into the process room */
  --h-hang-process: 40px;    /* step cards into the pricing band */
  --h-hang-pricing: 64px;    /* price cards into the check room */

  /* ---------- Radii ---------- */
  --h-r1: 4px;
  --h-r2: 6px;
  --h-r3: 10px;
  --h-r4: 22px;
  --h-r-pill: 999px;

  /* ---------- Shadows (box-shadow only; never filter: drop-shadow on 3D cards) ---------- */
  --h-shadow-card: 0 1px 2px rgba(17, 16, 20, 0.06), 0 40px 60px rgba(17, 16, 20, 0.18);
  --h-shadow-float: 0 2px 4px rgba(17, 16, 20, 0.06), 0 26px 50px rgba(17, 16, 20, 0.16);
  --h-shadow-bar: 0 10px 30px rgba(17, 16, 20, 0.14);
  --h-shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* ---------- Motion ---------- */
  --h-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --h-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --h-t1: 200ms;   /* hover */
  --h-t2: 300ms;   /* state change */
  --h-t3: 600ms;   /* draw, redraw */
  --h-t4: 900ms;   /* enter, develop */
  --h-lean: 4deg;  /* max pointer lean of a corridor scene */

  /* ---------- Z-index plan ----------
     Shared header is 20, skip link 10. Rooms count DOWN in page order so anything that hangs past
     a room's bottom edge paints over the next room. Inside a room: scene 1, front 3, hang 5, sticky 6, loupe 8. */
  --h-z-rail: 19;
  --h-z-room-corridor: 10;
  --h-z-room-looks: 9;
  --h-z-room-proof: 8;
  --h-z-room-turntable: 7;
  --h-z-room-process: 6;
  --h-z-room-pricing: 5;
  --h-z-room-check: 4;
  --h-z-room-faq: 3;
  --h-z-room-closing: 2;
  --h-z-scene: 1;
  --h-z-front: 3;
  --h-z-hang: 5;
  --h-z-sticky: 6;
  --h-z-loupe: 8;
}

/* Shared tokens remapped on the home page only, so the shared header, buttons, focus rings,
   checklist discs and the generated pricing partial turn amber here and stay cobalt elsewhere. */
body.home {
  --cobalt: var(--h-amber-deep);
  --cobalt-deep: var(--h-amber-deeper);
  --cobalt-soft: var(--h-amber-soft);
  --accent: var(--h-amber-deep);
  --accent-hover: var(--h-amber-deeper);
  --accent-soft: var(--h-amber-soft);
  --amber: var(--h-amber);
  --logo-dot: var(--h-amber-deep);
}

/* Registered custom properties: one keyframe can drive a whole scene, and the JS fallback
   writes the same names. All unitless so calc() math works everywhere. */
@property --fly {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --draw {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --enter {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --dev {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --px {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --py {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --lx {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --ly {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@media (max-width: 639px) {
  :root {
    --h-body: 16px;
    --h-room-pad: 72px;
    --h-hang-proof: 24px;
    --h-hang-turntable: 24px;
    --h-hang-process: 0px;
    --h-hang-pricing: 32px;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  :root {
    --h-hang-proof: 24px;
    --h-hang-turntable: 24px;
    --h-hang-process: 0px;
    --h-hang-pricing: 32px;
  }
}

/* Rest values with reduced motion. The shared stylesheet already sets animation: none and
   transition: none everywhere; these make sure every scene renders its complete composition. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --h-lean: 0deg;
  }
}


/* ==== base.css ==== */
/* ShopShot Studio, homepage: base rules shared by every room ("The Corridor").
   Loaded by home.css after tokens.css and before the section files. Everything here is
   prefixed h- (or scoped to body.home) so nothing leaks into the other pages.
   Tokens used: every --h- colour, type, spacing, radius and motion token in tokens.css.
   Copied as-is by the build: never write a double curly brace in this file. */

/* ---------- The page ---------- */

/* Safety net: no room can ever make the page scroll sideways, at any width down to 360px. */
body.home {
  overflow-x: clip;
}

/* Anchor jumps (the six rooms, #looks-tab-*, #faq-*) and keyboard focus moves must land below
   the sticky header. The shared stylesheet sets scroll-padding-top for the header alone; on
   phones the 40px rail sits under the header too, so this page needs the taller value. */
@media (max-width: 899px) {
  html {
    scroll-padding-top: calc(var(--h-header) + var(--h-rail) + 13px);
  }
}

/* No white flash overlay on the home page (the shared stylesheet no longer has one either). */
body.home::after {
  content: none;
}

/* The shared footer follows the closing corridor; keep it above the room stack (rooms use 2-10)
   so no receding card can ever paint over it. */
body.home .site-footer {
  position: relative;
  z-index: 11;
}

/* "You are here" in the shared header on desktop (rail.js sets aria-current). */
body.home .main-nav a[aria-current="location"]:not(.btn) {
  color: var(--h-ink);
  box-shadow: inset 0 -2px 0 var(--h-amber-deep);
}

/* The logo's inner dot turns amber-deep here (tokens.css sets --logo-dot under body.home). */

/* ---------- Rooms ----------
   A room is <section class="h-room" data-room="paper|paper-2|ink">. The room sets a handful of
   colour roles as custom properties; the h- helpers below read them, so base rules stay at low
   specificity and a section can always override a colour with a single class. */

.h-room {
  --h-room-bg: var(--h-paper);
  --h-room-fg: var(--h-ink);
  --h-room-fg-2: var(--h-ink-2);
  --h-room-muted: var(--h-muted);
  --h-room-accent: var(--h-amber-deep);
  --h-room-accent-hover: var(--h-amber-deeper);
  --h-room-line: var(--h-line);
  position: relative;
  padding-block: var(--h-room-pad);
  background-color: var(--h-room-bg);
  color: var(--h-room-fg);
}

.h-room[data-room="paper-2"] {
  --h-room-bg: var(--h-paper-2);
}

.h-room[data-room="ink"] {
  --h-room-bg: var(--h-dark);
  --h-room-fg: var(--h-bone);
  --h-room-fg-2: var(--h-dark-muted);
  --h-room-muted: var(--h-dark-muted);
  --h-room-accent: var(--h-amber);
  --h-room-accent-hover: var(--h-bone);
  --h-room-line: var(--h-dark-line);
  /* 24px dot grid at bone 8%. The first declaration is the fallback for browsers without color-mix(). */
  background-image: radial-gradient(circle, var(--h-bone-a10) 1px, transparent 1.5px);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--h-bone) 8%, transparent) 1px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Hangs (an element that overlaps the next room). The numbers live in tokens.css so both sides
   of every seam agree: proof -> turntable 48/24, turntable -> process 48/24, process -> pricing
   40/0, pricing -> check 64/32 (desktop / under 900px). The hanging element gets
   margin-bottom: calc(-1 * hang) and z-index var(--h-z-hang); the receiving room adds the hang
   to its padding-top. Each section's own CSS does both; nothing more to do here. */

/* ---------- Readouts and labels ---------- */

/* Mono 12px uppercase: counters, captions, credits. Muted on paper, dark-muted on ink. */
.h-readout {
  margin: 0;
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: var(--h-mono-md);
  line-height: 1.4;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-room-muted, var(--h-muted));
}

/* A readout in the room's accent, above a title. */
.h-eyebrow {
  margin: 0 0 var(--h-s4);
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: var(--h-mono-md);
  line-height: 1.4;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-room-accent, var(--h-amber-deep));
}

/* The blinking "rec" dot (keyframe `rec` lives in the shared stylesheet). */
.h-eyebrow-rec::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--h-rec);
  vertical-align: 1px;
  /* Three blinks (under 5 s), then solid: auto-updating content that runs longer than five
     seconds would need its own pause control. */
  animation: rec 1.6s steps(2, jump-none) 3;
}

/* Model badge on an image: "GPT Image 2", "Runway Gen-4". */
.h-tag {
  display: inline-block;
  padding: 6px 8px;
  border-radius: var(--h-r1);
  background: var(--h-dark-a92);
  color: var(--h-bone);
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: var(--h-mono-sm);
  line-height: 1;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
}

/* Canvas node: a raised dark surface with port dots. Used in looks and for the credits in check. */
.h-node {
  background-color: var(--h-dark-2);
  border: 1px solid var(--h-bone-a10);
  border-radius: var(--h-r3);
  color: var(--h-bone);
}

.h-port {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--h-dark-muted);
}

.h-node.is-active .h-port,
.h-port.is-active {
  background: var(--h-amber);
}

/* ---------- Titles ---------- */

.h-title {
  margin: 0 0 var(--h-s5);
  font-family: var(--h-serif);
  font-weight: 400;
  font-size: var(--h-display-1);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--h-room-fg, var(--h-ink));
  text-wrap: balance;
}

.h-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--h-room-accent, var(--h-amber-deep));
}

/* ---------- Buttons, focus and links in the dark rooms ---------- */

.h-room[data-room="ink"] .btn-primary {
  background: var(--h-amber);
  color: var(--h-ink);
  border-color: transparent;
}

.h-room[data-room="ink"] .btn-primary:hover,
.h-room[data-room="ink"] .btn-primary:focus-visible {
  background: var(--h-bone);
  color: var(--h-ink);
}

.h-room[data-room="ink"] .btn-ghost {
  background: transparent;
  color: var(--h-bone);
  border-color: var(--h-bone);
}

.h-room[data-room="ink"] .btn-ghost:hover {
  background: var(--h-bone);
  color: var(--h-ink);
}

/* Amber-deep is under 3:1 on dark, so focus rings in ink rooms are amber. */
.h-room[data-room="ink"] :focus-visible {
  outline-color: var(--h-amber);
}

/* Links inside copy: amber-deep on paper, bone underlined on ink (amber on hover). Scoped to
   text containers so card and chip anchors keep their own styling. */
.h-room:is([data-room="paper"], [data-room="paper-2"]) :is(p, li, figcaption) a:not(.btn) {
  color: var(--h-amber-deep);
}

.h-room:is([data-room="paper"], [data-room="paper-2"]) :is(p, li, figcaption) a:not(.btn):hover {
  color: var(--h-amber-deeper);
}

.h-room[data-room="ink"] :is(p, li, figcaption) a:not(.btn) {
  color: var(--h-bone);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.h-room[data-room="ink"] :is(p, li, figcaption) a:not(.btn):hover {
  color: var(--h-amber);
}

/* ---------- Checklist ticks ----------
   The shared tick is a cobalt stroke baked into a data URI, so the colour remap cannot reach it.
   Paper: amber-deep stroke (%238A4F00) on an amber-soft disc. Dark cards: ink stroke (%23111014)
   on an amber disc. */
body.home .checklist li::before {
  background: var(--h-amber-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%238A4F00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.h-room[data-room="ink"] .checklist li::before,
#home-pricing .price-card.featured .checklist li::before {
  background: var(--h-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%23111014' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ---------- Reveals ----------
   motion.js adds .is-pending to .h-reveal elements below the fold at load and removes it when
   they enter. Transform only; opacity is never animated, so nothing is ever invisible at rest. */
.h-reveal {
  transition: transform var(--h-t4) var(--h-ease);
}

.h-reveal.is-pending {
  transform: translateY(34px);
}

/* ---------- QA: ?fallback=1 forces the JavaScript scroll path ----------
   motion.js adds html.h-fallback and reports no scroll/view timeline support; this switches the
   CSS scroll-driven animations off so the values the scripts write are the ones that show. */
html.h-fallback :is(.corridor-scene, .corridor-fly, .corridor-ribbon-track, .process-line, .closing-scene, .closing-fly, .closing-ribbon) {
  animation: none;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .h-reveal,
  .h-reveal.is-pending {
    transform: none;
    transition: none;
  }

  .h-eyebrow-rec::before {
    animation: none;
  }
}


/* ==== corridor.css ==== */
/* ShopShot Studio home: the corridor (opening screen).
   Tokens used: --h-paper --h-paper-2 --h-surface --h-line --h-ink --h-ink-2 --h-muted --h-dark-2
   --h-bone --h-dark-muted --h-amber --h-amber-deep --h-rose --h-ink-a30 --h-dark-a92
   --h-font --h-serif --h-mono --h-display-hero --h-lead --h-mono-sm --h-track --h-lh-display
   --h-s* --h-gap --h-gutter --h-room-pad --h-r1 --h-r2 --h-r-pill
   --h-shadow-card --h-shadow-float --h-shadow-bar --h-ease --h-ease-out --h-t1 --h-t2 --h-t3 --h-t4
   --h-lean --h-z-room-corridor --h-z-scene --h-z-front.
   Registered properties (tokens.css): --fly (scroll push), --dev (print develop), --px/--py (pointer).
   Mobile first; breakpoints 640 / 900 / 1200. No hard-coded colours. */

/* ---------- Room ---------- */
.h-room.corridor {
  position: relative;
  z-index: var(--h-z-room-corridor);
  min-height: max(640px, 100svh);
  padding-top: 40px;
  padding-bottom: var(--h-room-pad);
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  perspective: 1100px;
  perspective-origin: 50% 46%;
  background-color: var(--h-paper);
  color: var(--h-ink);
}

/* Warm glow (no mask) and the dot grid (masked toward the edges) live on two pseudo-elements so
   the mask never clips the room's content. */
.corridor::before,
.corridor::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.corridor::before {
  background: radial-gradient(ellipse 62% 48% at 50% 46%,
    var(--h-rose) 0%,
    color-mix(in srgb, var(--h-rose) 12%, transparent) 60%,
    transparent 100%);
}
.corridor::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--h-muted) 14%, transparent) 1px, transparent 1.4px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 64% 62% at 50% 46%, var(--h-ink) 18%, transparent 100%);
  mask-image: radial-gradient(ellipse 64% 62% at 50% 46%, var(--h-ink) 18%, transparent 100%);
}

/* ---------- Layer 1: the front (normal flow) ---------- */
.corridor-front {
  position: relative;
  z-index: var(--h-z-front);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--h-gap);
  row-gap: 0;
  align-items: start;
}

.corridor-eyebrow {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 var(--h-s4);
}
/* When the label and the pause pill can't share a line (phones), the pill lands at the right end
   of the next line instead of dangling under the first word. */
.corridor-eyebrow-text { min-width: 0; }
.corridor-cycle-toggle { margin-left: auto; }
@media (min-width: 640px) {
  .corridor-cycle-toggle { margin-left: var(--h-s3); }
}

/* Pause / resume for the cycling headline phrase (WCAG 2.2.2). Hidden in the HTML; corridor.js
   shows it only when the cycle actually runs (scripts on, motion allowed). */
.corridor-cycle-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--h-line);
  border-radius: var(--h-r-pill);
  background: transparent;
  color: var(--h-ink-2);
  font: 500 var(--h-mono-sm) / 1 var(--h-mono);
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
  transition: border-color var(--h-t1) var(--h-ease), color var(--h-t1) var(--h-ease);
}
.corridor-cycle-toggle:hover {
  border-color: var(--h-ink);
  color: var(--h-ink);
}
.corridor-cycle-toggle:focus-visible { border-radius: var(--h-r-pill); }

.corridor-title {
  order: 2;
  margin: 0 0 var(--h-s5);
  font: 400 var(--h-display-hero) / var(--h-lh-display) var(--h-serif);
  letter-spacing: -0.01em;
  color: var(--h-ink);
  text-wrap: initial;
  max-width: 100%;
}
.corridor-line {
  display: block;
  max-width: 100%;
  animation: corridor-rise var(--h-t4) var(--h-ease-out) both;
  --corridor-rise: 0.3em;
}
.corridor-line-slot {
  animation-delay: 80ms;
}

/* The phrase slot: every phrase sits in the same grid cell, so the slot is as wide as the longest
   phrase and the headline never reflows while the words change. */
.corridor-slot {
  display: inline-grid;
  max-width: 100%;
  vertical-align: top;
}
.corridor-phrase {
  grid-area: 1 / 1;
  font-style: italic;
  color: var(--h-amber-deep);
  clip-path: inset(100% 0 0 0);
  translate: 0 0.3em;
  transition: clip-path 420ms var(--h-ease), translate 420ms var(--h-ease);
}
.corridor-phrase.is-visible {
  clip-path: inset(0 0 0 0);
  translate: 0 0;
}
.corridor-phrase.is-leaving {
  clip-path: inset(0 0 100% 0);
  translate: 0 -0.3em;
}

/* Copy column */
.corridor-copy {
  order: 4;
  min-width: 0;
}
.corridor-lead {
  margin: 0 0 var(--h-s5);
  font-size: var(--h-lead);
  line-height: 1.55;
  color: var(--h-ink-2);
  max-width: 46ch;
}

/* The order bar */
.corridor-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--h-s3);
  width: 100%;
  max-width: 560px;
  min-height: 56px;
  box-sizing: border-box;
  padding: 6px 6px 6px 18px;
  background: var(--h-surface);
  border: 1px solid var(--h-line);
  border-radius: var(--h-r-pill);
  box-shadow: var(--h-shadow-bar);
  color: var(--h-ink);
  text-decoration: none;
  transition: box-shadow var(--h-t1) var(--h-ease), border-color var(--h-t1) var(--h-ease);
}
.corridor-bar:hover { color: var(--h-ink); }
.corridor-bar:focus-visible { border-radius: var(--h-r-pill); }
.corridor-bar-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--h-ink-2);
}
.corridor-bar-text {
  min-width: 0;
  font: 600 16px / 1.2 var(--h-font);
  color: var(--h-ink);
}
.corridor-bar-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--h-amber);
  color: var(--h-ink);
  transition: transform var(--h-t1) var(--h-ease);
}

/* Three promises */
.corridor-points {
  list-style: none;
  margin: var(--h-s5) 0 var(--h-s5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--h-s2);
}
.corridor-points li {
  position: relative;
  margin: 0;
  padding-left: 16px;
  font: 500 var(--h-mono-md) / 1.4 var(--h-mono);
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-muted);
}
.corridor-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--h-amber-deep);
}
.corridor-ghost {
  align-self: flex-start;
}

/* ---------- The developing print ---------- */
.corridor-print {
  order: 3;
  align-self: start;
  width: 100%;
  margin: 0 0 var(--h-s6);
  perspective: 900px;
  --dev: 0;
  transition: --dev var(--h-t4) var(--h-ease-out);
}
.corridor-print.is-developing { --dev: 1; }
.corridor-print.is-peeking {
  --dev: 0;
  transition-duration: var(--h-t3);
}
.corridor-print.is-before {
  --dev: 0;
  transition-duration: var(--h-t2);
}

.corridor-print-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 60vw;           /* phones: the frame is 60vw; the readout strip below sizes to its text */
  max-width: 300px;
  overflow: hidden;
  border-radius: var(--h-r2);
  border: 1px solid var(--h-line);
  box-shadow: var(--h-shadow-card);
  background: var(--h-paper-2);
  transform: rotateX(calc(var(--py) * -2deg)) rotateY(calc(var(--px) * 2deg));
  transition: transform var(--h-t1) var(--h-ease);
}
.corridor-print-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.corridor-print-before { z-index: 1; }
.corridor-print-after {
  z-index: 2;
  clip-path: inset(0 0 calc((1 - var(--dev)) * 100%) 0);
}
.corridor-print-tint {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--h-rose);
  mix-blend-mode: multiply;
  opacity: calc(0.35 * (1 - var(--dev)));
  pointer-events: none;
}
.corridor-print-frame > .corridor-print-inset {
  inset: auto auto 8px 8px;
  z-index: 4;
  width: 30%;
  height: auto;
  aspect-ratio: 3 / 4;
  box-sizing: border-box;
  border: 3px solid var(--h-bone);
  border-radius: var(--h-r1);
  box-shadow: 0 2px 8px var(--h-ink-a30);
  transform-origin: 0% 100%;
  transform: scale(calc(0.6 + 0.4 * var(--dev)));
  opacity: clamp(0, (var(--dev) - 0.5) * 2, 1);
}
.corridor-print.is-before .corridor-print-inset {
  transform: none;
  opacity: 1;
}
/* Four bone corner marks drawn with eight tiny gradients on one element. */
.corridor-print-marks {
  position: absolute;
  inset: 10px;
  z-index: 5;
  pointer-events: none;
  --corridor-mark: linear-gradient(var(--h-bone), var(--h-bone));
  background:
    var(--corridor-mark) left top / 14px 2px no-repeat,
    var(--corridor-mark) left top / 2px 14px no-repeat,
    var(--corridor-mark) right top / 14px 2px no-repeat,
    var(--corridor-mark) right top / 2px 14px no-repeat,
    var(--corridor-mark) left bottom / 14px 2px no-repeat,
    var(--corridor-mark) left bottom / 2px 14px no-repeat,
    var(--corridor-mark) right bottom / 14px 2px no-repeat,
    var(--corridor-mark) right bottom / 2px 14px no-repeat;
}

/* Readout strip: both strings are always in the DOM; the track rolls with --dev so the roll
   happens during the middle third of the develop (about 300ms of the 900ms wipe). */
.corridor-print-readout {
  width: max-content;
  max-width: 100%;
  margin: var(--h-s3) 0 0;
  padding: 0 var(--h-s2);
  height: 34px;
  overflow: hidden;
  border-radius: var(--h-r1);
  background: var(--h-dark-2);
  color: var(--h-bone);
  /* 11px with lighter tracking so both strings fit the 300px strip without an ellipsis. */
  font: 500 var(--h-mono-sm) / 34px var(--h-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.corridor-print-readout-track {
  display: block;
  translate: 0 calc(-50% * clamp(0, (var(--dev) - 0.35) * 3, 1));
}
.corridor-print-readout-track > span {
  display: block;
  height: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.corridor-print-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--h-s3);
  padding: 0 var(--h-s4);
  border: 1px solid var(--h-line);
  border-radius: var(--h-r-pill);
  background: transparent;
  color: var(--h-ink-2);
  font: 500 var(--h-mono-md) / 1 var(--h-mono);
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--h-t1) var(--h-ease), color var(--h-t1) var(--h-ease), background-color var(--h-t1) var(--h-ease);
}
.corridor-print-toggle:hover {
  border-color: var(--h-ink);
  color: var(--h-ink);
}
.corridor-print-toggle[aria-pressed="true"] {
  background: var(--h-ink);
  border-color: var(--h-ink);
  color: var(--h-bone);
}
.corridor-print-toggle:focus-visible { border-radius: var(--h-r-pill); }

/* ---------- Layer 2: the 3D scene (desktop) ----------
   Two nested elements, two inputs: the scene leans with the pointer (eased, 200ms), the inner
   .corridor-fly pushes into the tunnel with scroll (linear, no transition, so a scroll-mapped
   --fly never trails the scroll position or keeps animating after scrolling stops). */
.corridor-scene {
  display: none;
  position: absolute;
  inset: 0;
  z-index: var(--h-z-scene);
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
  transform: rotateX(calc(var(--py) * -3deg)) rotateY(calc(var(--px) * var(--h-lean)));
  transition: transform var(--h-t1) var(--h-ease);
}
.corridor-fly {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(calc(var(--fly) * 1500px));
}
.corridor-wall {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.corridor-wall[data-side="left"]  { --side: -1; }
.corridor-wall[data-side="right"] { --side: 1; }

/* Depth (--i, 1 = nearest) and the hand-laid vertical offset (--y) per card, by position in the
   wall. Set here rather than as inline style attributes because the site's Content-Security-Policy
   (style-src 'self') blocks inline styles. */
.corridor-wall > .corridor-card:nth-child(1) { --i: 1; --y: -6vh; }
.corridor-wall > .corridor-card:nth-child(2) { --i: 2; --y: 5vh; }
.corridor-wall > .corridor-card:nth-child(3) { --i: 3; --y: -2vh; }
.corridor-wall > .corridor-card:nth-child(4) { --i: 4; --y: 4vh; }
.corridor-wall > .corridor-card:nth-child(5) { --i: 5; --y: -5vh; }
.corridor-wall > .corridor-card:nth-child(6) { --i: 6; --y: 3vh; }

.corridor-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 400px;
  margin: -200px 0 0 -150px;
  border-radius: var(--h-r2);
  transform-style: preserve-3d;
  /* --wall: how far out each wall sits; --yspread: how far the cards stagger up and down. Both
     grow on wide screens so the right-hand wall clears the framed hero photo instead of hiding
     behind it. */
  --wall: 44vw;
  --yspread: 1;
  transform: translate3d(calc(var(--side) * var(--wall)), calc(var(--y) * var(--yspread)), calc(var(--i) * -440px)) rotateY(calc(var(--side) * 64deg));
  opacity: clamp(0, calc((440 * var(--i) - 180 - 1500 * var(--fly)) / 260), 1);
  pointer-events: auto;
  text-decoration: none;
  color: var(--h-bone);
}
.corridor-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--h-shadow-card);
}
.corridor-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  border: 1px solid var(--h-paper-2);
  box-sizing: border-box;
  background: var(--h-paper-2);
  transform: translateZ(0);
  transition: transform var(--h-t1) var(--h-ease);
}
.corridor-card-inner > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.corridor-card.is-near .corridor-card-inner {
  animation: corridor-rise var(--h-t4) var(--h-ease-out) both;
  --corridor-rise: 24px;
}

.corridor-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--h-s2);
  padding: 8px 10px;
  background: var(--h-dark-a92);
  color: var(--h-bone);
  font: 500 var(--h-mono-sm) / 1.3 var(--h-mono);
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  transition: color var(--h-t1) var(--h-ease);
}
.corridor-caption-model {
  color: var(--h-dark-muted);
  text-align: right;
  transition: color var(--h-t1) var(--h-ease);
}

/* ---------- The phone ribbon (replaces both walls under 900px) ---------- */
.corridor-ribbon {
  position: relative;
  z-index: var(--h-z-scene);
  height: 240px;
  margin-top: var(--h-s7);
  perspective: 700px;
  perspective-origin: 30% 50%;
  pointer-events: none;
}
.corridor-ribbon-track {
  position: absolute;
  left: var(--h-gutter);
  top: 32px;
  display: flex;
  gap: 12px;
  transform-origin: 0% 50%;
  transform: translateX(calc(var(--fly) * -320px)) rotateY(34deg);
  will-change: transform;
}
.corridor-ribbon-card {
  position: relative;
  flex: none;
  width: 132px;
  height: 176px;
  overflow: hidden;
  border-radius: var(--h-r2);
  border: 1px solid var(--h-paper-2);
  box-sizing: border-box;
  background: var(--h-paper-2);
  box-shadow: var(--h-shadow-card);
  pointer-events: auto;
  text-decoration: none;
  color: var(--h-bone);
}
.corridor-ribbon-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 10px with light tracking, and the look name may take two lines: "Sculptural interior" must
   read in full inside a 132px card, never as an ellipsis. */
.corridor-ribbon-card .corridor-caption {
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.corridor-ribbon-card .corridor-caption-look {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---------- Load motion ---------- */
@keyframes corridor-rise {
  from { translate: 0 var(--corridor-rise, 24px); }
  to   { translate: 0 0; }
}

/* ---------- Scroll: CSS scroll-driven push, JS fallback writes the same --fly ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .corridor-fly,
    .corridor-ribbon-track {
      animation: corridor-fly linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}
@keyframes corridor-fly {
  to { --fly: 1; }
}

/* ---------- Pointer effects: fine pointers only ---------- */
@media (hover: hover) and (pointer: fine) {
  .corridor-bar:hover {
    box-shadow: var(--h-shadow-float);
    border-color: var(--h-paper-2);
  }
  .corridor-bar:hover .corridor-bar-go {
    transform: scale(1.08);
  }
  .corridor-card:hover .corridor-card-inner {
    transform: translateZ(10px);
  }
  .corridor-card:hover .corridor-caption,
  .corridor-card:hover .corridor-caption-model {
    color: var(--h-bone);
  }
  .corridor-print-frame {
    cursor: zoom-in;
  }
}
/* Coarse pointers need no guard for the lean and tilt: motion.js only writes --px/--py on fine
   pointers, so both transforms stay at identity there. */

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .corridor-bar {
    min-height: 64px;
    padding: 8px 8px 8px 22px;
  }
  .corridor-bar-text {
    font-size: 17px;
  }
  .corridor-points {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--h-s2) var(--h-s5);
  }
}

@media (min-width: 900px) {
  .corridor-front {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  /* Explicit rows: the phone order (print before copy via `order`) would otherwise auto-place
     the copy column on a new row under the print. */
  .corridor-eyebrow,
  .corridor-title {
    grid-column: 1 / -1;
  }
  .corridor-eyebrow {
    grid-row: 1;
  }
  .corridor-title {
    grid-row: 2;
    margin-bottom: var(--h-s6);
  }
  .corridor-copy {
    grid-column: 1 / 8;
    grid-row: 3;
    position: relative;
  }
  /* A soft paper haze behind the copy: the nearest wall cards pass behind the lead and the order
     bar, and dark ink on a dark photo is unreadable. The haze paints above the scene (it sits in
     the front layer's stacking context) and below the text. */
  .corridor-copy::before {
    content: "";
    position: absolute;
    inset: -56px -140px -56px -96px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 66% at 40% 48%,
      var(--h-paper) 0%,
      color-mix(in srgb, var(--h-paper) 84%, transparent) 40%,
      color-mix(in srgb, var(--h-paper) 45%, transparent) 70%,
      transparent 100%);
  }
  .corridor-print {
    grid-column: 9 / -1;
    grid-row: 3;
    /* Columns 9 to 12 are narrower than 300px between 900 and about 1015px: shrink with them
       so the frame's right edge never leaves the gutter. */
    width: min(300px, 100%);
    margin-bottom: 0;
  }
  .corridor-print-frame {
    width: 100%;
    max-width: none;
  }
  .corridor-print-readout {
    width: 100%;
  }
  .corridor-scene {
    display: block;
  }
  .corridor-ribbon {
    display: none;
  }
}

@media (min-width: 1200px) {
  /* Wide screens: push the walls out and stagger the cards further so the right-hand wall reads
     beside the framed hero photo rather than behind it. */
  .corridor-card { --wall: 50vw; --yspread: 2.4; }
}

@media (min-width: 1200px) {
  .corridor-title {
    margin-bottom: var(--h-s7);
  }
}

/* ---------- Reduced motion: a complete static composition ---------- */
@media (prefers-reduced-motion: reduce) {
  .corridor-scene,
  .corridor-fly,
  .corridor-ribbon-track {
    --fly: 0;
    animation: none;
  }
  .corridor-line,
  .corridor-card.is-near .corridor-card-inner {
    animation: none;
    translate: 0 0;
  }
  .corridor-phrase {
    translate: 0 0;
  }
  /* The print renders developed from the first frame; the toggle still works instantly. */
  .corridor-print { --dev: 1; }
  .corridor-print.is-before { --dev: 0; }
}


/* ==== rail.css ==== */
/* ShopShot Studio, homepage: the in-page rail (#home-rail).
   Tokens used: --h-paper, --h-line, --h-ink, --h-ink-2, --h-amber-deep, --h-mono (family and
   12px size), --h-track, --h-header, --h-rail, --h-z-rail, --h-gutter, --h-s1, --h-s3,
   --h-t1, --h-ease. No hard-coded colours.
   Mobile-first: the phone chip row is the base; from 900px the rail is display: none and the
   "you are here" state lives on the shared header links (styled in base.css, set by rail.js).
   This file is copied as-is by the build: never write a double curly brace in it. */

/* ---------- The bar (phones) ---------- */

#home-rail {
  position: sticky;
  top: var(--h-header);
  z-index: var(--h-z-rail);
  box-sizing: border-box;
  height: var(--h-rail);
  margin: 0;
  padding: 0;
  /* Fallback for browsers without color-mix(): the plain paper tone. */
  background: var(--h-paper);
  background: color-mix(in srgb, var(--h-paper) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* The bottom hairline is a shadow rather than a border so the 40px bar keeps a full 40px
     content box for the chips (their inset underline would otherwise be clipped by 1px). */
  box-shadow: 0 1px 0 var(--h-line);
  transform: translateY(0);
  transition: transform var(--h-t1) var(--h-ease);
}

/* Auto-hidden on scroll down (rail.js): slides up behind the header, which paints above it. */
#home-rail.is-hidden {
  transform: translateY(-100%);
}

/* ---------- The chip row ---------- */

.rail-list {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: var(--h-s1);
  height: 100%;
  margin: 0;
  list-style: none;
  /* Extra room on the right so the last chip clears the fade when scrolled to the end. */
  padding: 0 calc(var(--h-gutter) + 24px) 0 var(--h-gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--h-gutter);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* 24px right-edge fade. Only the alpha of the mask colour matters. */
  -webkit-mask-image: linear-gradient(to right, var(--h-ink) calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, var(--h-ink) calc(100% - 24px), transparent 100%);
}

.rail-list::-webkit-scrollbar {
  display: none;
}

.rail-item {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

/* ---------- Chips ---------- */

.rail-link {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--h-rail);
  padding: 0 var(--h-s3);
  font-family: var(--h-mono);
  font-size: var(--h-mono-md);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--h-ink-2);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
  transition:
    color var(--h-t1) var(--h-ease),
    box-shadow var(--h-t1) var(--h-ease);
}

.rail-link:hover {
  color: var(--h-ink);
}

/* Current chip: ink text with a 2px amber-deep underline (set by rail.js). */
.rail-link[aria-current="location"] {
  color: var(--h-ink);
  box-shadow: inset 0 -2px 0 var(--h-amber-deep);
}

/* The row clips vertically, so keep the shared 3px focus ring inside the chip. */
.rail-link:focus-visible {
  outline-offset: -3px;
}

/* ---------- 640px: nothing changes; the chip row still scrolls in its own container ---------- */

/* ---------- 900px and up: the shared header nav takes over ---------- */

@media (min-width: 900px) {
  #home-rail {
    display: none;
  }
}

/* ---------- 1200px: nothing to add; the rail stays hidden ---------- */

/* ---------- Reduced motion: always visible, instant state changes ---------- */

@media (prefers-reduced-motion: reduce) {
  #home-rail,
  #home-rail.is-hidden {
    transform: none;
    transition: none;
  }

  .rail-list {
    scroll-behavior: auto;
  }

  .rail-link {
    transition: none;
  }
}


/* ==== looks.css ==== */
/* looks.css: "The canvas" room (#home-looks).
   Tokens used: --h-dark, --h-dark-2, --h-dark-3, --h-dark-a92, --h-bone, --h-bone-a10, --h-bone-a30,
   --h-dark-muted, --h-amber, --h-ink, --h-serif, --h-display-1, --h-mono, --h-mono-lg, --h-mono-sm,
   --h-track, --h-r1, --h-r2, --h-r3, --h-r-pill, --h-gap, --h-s1..--h-s6, --h-header, --h-room-pad,
   --h-t1, --h-t2, --h-t3, --h-ease, --h-shadow-dark, --h-z-room-looks, --h-z-sticky.
   Note: tokens.css declares --h-mono twice (family, then 12px); the size wins. This file reads the
   family from --h-mono-family when the integrator adds it, falling back to the shared --mono.
   Copied as-is by the build: no double curly braces in here. */

#home-looks {
  --looks-mono-family: var(--h-mono, var(--mono));
  --looks-mono-size: var(--h-mono-md, 12px);
  --looks-seam: 3vw;
  position: relative;
  z-index: var(--h-z-room-looks);
  background-color: var(--h-dark);
  background-image: radial-gradient(color-mix(in srgb, var(--h-bone) 8%, transparent) 1px, transparent 1.5px);
  background-size: 24px 24px;
  color: var(--h-bone);
  padding-top: 120px;
  padding-bottom: calc(var(--h-room-pad) + var(--looks-seam));
  overflow-x: clip;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--looks-seam)));
}

@media (min-width: 640px) {
  #home-looks { --looks-seam: 6vw; }
}

/* ---------- Row 1: eyebrow and title (base.css owns .h-eyebrow/.h-title; these only pin the room's values) ---------- */
#home-looks .h-eyebrow {
  margin: 0 0 var(--h-s4);
  font-family: var(--looks-mono-family);
  font-size: var(--looks-mono-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-amber);
}

#home-looks .h-title {
  margin: 0 0 var(--h-s6);
  max-width: 16ch;
  font-family: var(--h-serif);
  font-weight: 400;
  font-size: var(--h-display-1);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--h-bone);
  text-wrap: balance;
}

#home-looks .h-title em {
  font-style: italic;
  color: var(--h-amber);
}

/* ---------- Row 2: the tab row ---------- */
.looks-tabs-wrap {
  position: relative;
  margin: 0 0 var(--h-s6);
}

.looks-tabs {
  display: flex;
  gap: var(--h-s2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: var(--h-s1);
  margin: calc(-1 * var(--h-s1));
}

.looks-tabs::-webkit-scrollbar { display: none; }

.looks-tabs-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--h-dark));
}

.looks-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--h-s4);
  border: 1px solid var(--h-bone-a10);
  border-radius: var(--h-r-pill);
  background: var(--h-dark-2);
  color: var(--h-bone);
  font-family: var(--looks-mono-family);
  font-size: var(--looks-mono-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--h-t1) var(--h-ease), color var(--h-t1) var(--h-ease), border-color var(--h-t1) var(--h-ease);
}

.looks-tab:hover { background: var(--h-dark-3); }

.looks-tab[aria-selected="true"] {
  background: var(--h-amber);
  border-color: var(--h-amber);
  color: var(--h-ink);
}

.looks-tab[aria-disabled="true"],
.looks-tab:disabled {
  cursor: not-allowed;
  color: var(--h-dark-muted);
  background: var(--h-dark-2);
  border-style: dashed;
  opacity: 1;
}

.looks-tab-note { color: var(--h-dark-muted); text-transform: none; letter-spacing: 0; }

#home-looks :focus-visible { outline: 3px solid var(--h-amber); outline-offset: 2px; }

/* ---------- Row 3: canvas and panels ---------- */
.looks-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--h-gap);
  align-items: start;
}

/* The canvas panel */
.looks-panel {
  position: relative;
  border: 1px solid var(--h-bone-a10);
  border-radius: var(--h-r3);
  background-color: var(--h-dark-2);
  background-image: radial-gradient(color-mix(in srgb, var(--h-bone) 6%, transparent) 1px, transparent 1.5px);
  background-size: 16px 16px;
}

.looks-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.looks-wire {
  fill: none;
  stroke: var(--h-bone-a30);
  stroke-width: 1.5px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--h-t3) var(--h-ease), stroke var(--h-t2) var(--h-ease);
}

.looks-wires.is-reset .looks-wire {
  transition: none;
  stroke-dashoffset: 1;
}

.looks-wire.is-active { stroke: var(--h-amber); }

.looks-node {
  border: 1px solid var(--h-bone-a10);
  border-radius: var(--h-r3);
  background: var(--h-dark-2);
  box-shadow: var(--h-shadow-dark);
  font-family: var(--looks-mono-family);
  font-size: var(--h-mono-lg);
  font-weight: 500;
  line-height: 1.4;
  color: var(--h-bone);
}

.looks-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--h-s2);
  padding: var(--h-s2) var(--h-s3);
  border-bottom: 1px solid var(--h-bone-a10);
  font-size: var(--looks-mono-size);
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-dark-muted);
}

.looks-node-type { flex: 1 1 auto; text-align: center; }

.looks-port {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--h-dark-muted);
  transition: background-color var(--h-t2) var(--h-ease);
}

.looks-node.is-active .looks-port { background: var(--h-amber); }

.looks-port.is-pulse { animation: looks-pulse var(--h-t3) var(--h-ease) 1; }

@keyframes looks-pulse {
  0% { box-shadow: 0 0 0 0 var(--h-amber); }
  100% { box-shadow: 0 0 0 10px transparent; }
}

.looks-node-body { padding: var(--h-s3); }

.looks-node-photo .looks-node-body {
  display: flex;
  align-items: flex-start;
  gap: var(--h-s3);
}

.looks-node-thumbs {
  display: flex;
  gap: var(--h-s1);
  flex: 0 0 auto;
}

.looks-thumb {
  display: block;
  width: 48px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--h-r1);
  border: 1px solid var(--h-bone-a10);
  background: var(--h-dark-3);
}

.looks-node-text { margin: 0; }

.looks-node-line,
.looks-node-desc,
.looks-node-sub { display: block; }

.looks-node-line + .looks-node-line { margin-top: var(--h-s1); }

.looks-node-label,
.looks-node-model-name {
  display: block;
  font-weight: 500;
  color: var(--h-bone);
}

.looks-node-desc,
.looks-node-sub,
.looks-node-line { color: var(--h-dark-muted); }

.looks-counter {
  position: absolute;
  top: var(--h-s3);
  right: var(--h-s3);
  margin: 0;
  font-family: var(--looks-mono-family);
  font-size: var(--looks-mono-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-dark-muted);
  font-variant-numeric: tabular-nums;
}

/* The recipe row: five pills joined by short amber arrows. Phones and tablets, and every
   desktop viewport too small for the absolute node canvas (under 1200px wide or under 760px
   tall), where five fixed-percentage nodes would overlap each other. */
@media (max-width: 1199px), (max-height: 759px) {
  .looks-recipe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--h-s2) var(--h-s1);
    padding: var(--h-s3);
  }

  .looks-recipe .looks-wires,
  .looks-recipe .looks-counter,
  .looks-recipe .looks-node-thumbs,
  .looks-recipe .looks-port { display: none; }

  .looks-recipe .looks-node {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 var(--h-s2);
    padding: var(--h-s2) var(--h-s3);
    border-radius: var(--h-r-pill);
    box-shadow: none;
    max-width: 100%;
  }

  .looks-recipe .looks-node-head,
  .looks-recipe .looks-node-body { padding: 0; border: 0; }

  .looks-recipe .looks-node-type { text-align: left; }

  .looks-recipe .looks-node-label,
  .looks-recipe .looks-node-model-name { display: inline; }

  .looks-recipe .looks-node-desc,
  .looks-recipe .looks-node-sub,
  .looks-recipe .looks-node-line { display: inline; }

  .looks-recipe .looks-node-line + .looks-node-line { margin: 0; }

  .looks-recipe .looks-node-line:not([hidden]) ~ .looks-node-line::before { content: " · "; }

  .looks-recipe .looks-node-desc::before,
  .looks-recipe .looks-node-sub::before { content: " · "; }

  .looks-recipe .looks-node:not(:last-of-type)::after {
    content: "\2192";
    display: inline-block;
    margin-left: var(--h-s2);
    color: var(--h-amber);
    font-weight: 500;
  }
}

/* Panels */
.looks-panels { min-width: 0; }

.looks-tabpanel {
  display: grid;
  gap: var(--h-s4);
}

.looks-tabpanel[hidden] { display: none; }

.looks-tabpanel.is-entering { animation: looks-fade var(--h-t2) var(--h-ease) 1; }

@keyframes looks-fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

.looks-frame {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  margin: 0;
  border-radius: var(--h-r2);
  border: 1px solid var(--h-bone-a10);
  background: var(--h-dark-2);
  overflow: hidden;
  transition: transform var(--h-t1) var(--h-ease);
}

.looks-frame > img,
.looks-video-el {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--h-dark-3);
}

.looks-frame .h-tag {
  position: absolute;
  top: var(--h-s3);
  left: var(--h-s3);
  z-index: 1;
  display: inline-block;
  padding: 6px 8px;
  border-radius: var(--h-r1);
  background: var(--h-dark-a92);
  color: var(--h-bone);
  font-family: var(--looks-mono-family);
  font-size: var(--h-mono-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  transition: filter var(--h-t1) var(--h-ease);
}

.looks-caption {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--h-s3) var(--h-s4);
  font-family: var(--looks-mono-family);
  font-size: var(--h-mono-sm);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-dark-muted);
}

.looks-video .looks-video-btn {
  grid-column: 1;
  margin: var(--h-s3) 0 var(--h-s3) var(--h-s4);
  min-height: 44px;
  padding: 0 var(--h-s4);
  border: 1px solid var(--h-amber);
  border-radius: var(--h-r-pill);
  background: var(--h-amber);
  color: var(--h-ink);
  font-family: var(--looks-mono-family);
  font-size: var(--looks-mono-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--h-t1) var(--h-ease), color var(--h-t1) var(--h-ease);
}

.looks-video .looks-video-btn:hover { background: var(--h-bone); border-color: var(--h-bone); }

.looks-video .looks-caption {
  grid-column: 2;
  padding-left: var(--h-s3);
}

.looks-slate {
  margin: 0;
  padding: var(--h-s6) var(--h-s5);
  border: 1px dashed var(--h-bone-a30);
  border-radius: var(--h-r2);
  font-family: var(--looks-mono-family);
  font-size: var(--h-mono-lg);
  font-weight: 500;
  line-height: 1.5;
  color: var(--h-dark-muted);
}

/* Credits */
.looks-credits {
  margin: var(--h-s6) 0 0;
  max-width: 78ch;
  font-family: var(--looks-mono-family);
  font-size: var(--looks-mono-size);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-dark-muted);
}

/* ---------- Tablet and up ---------- */
@media (min-width: 640px) {
  .looks-video .looks-caption { padding-right: var(--h-s4); }
}

/* ---------- Desktop: two columns, sticky panel ---------- */
@media (min-width: 900px) {
  .looks-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

  .looks-tabs { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
  .looks-tabs-wrap::after { content: none; }

  .looks-panel {
    position: sticky;
    top: calc(var(--h-header) + 18px);
    z-index: var(--h-z-sticky);
  }
}

/* ---------- The node canvas: absolute nodes and wires ----------
   Five nodes at fixed percentages need about 590px of panel height to sit apart. That exists
   from 1200px wide (the 5/12 column is at least 472px, so 4:5 gives 590px) with at least 760px
   of viewport height (the sticky max-height stays above 590px). Smaller viewports keep the
   recipe row above, which lays the same five nodes out in flow. */
@media (min-width: 1200px) and (min-height: 760px) {
  .looks-panel {
    aspect-ratio: 4 / 5;
    max-height: calc(100svh - var(--h-header) - 36px);
    overflow: hidden;
  }

  .looks-node {
    position: absolute;
    width: 200px;
    max-width: 42%;
    transform: translate(-50%, -50%);
  }

  /* Node 1 shows up to two thumbnails: put them on their own row so the text keeps the node's
     full width instead of wrapping one word per line beside them. */
  .looks-node-photo .looks-node-body {
    flex-wrap: wrap;
  }
  .looks-node-photo .looks-node-text {
    flex: 1 1 100%;
    font-size: var(--h-mono-md);
  }
  .looks-node-photo .looks-thumb {
    width: 40px;
    height: 54px;
  }

  /* Centres per the spec (28/10, 72/30, 28/50, 72/70, 44/90). Nodes 1 and 5 are anchored by their
     top and bottom edges instead of their centres so a tall node never leaves the panel. */
  .looks-node[data-node="1"] { left: 28%; top: 3%; transform: translate(-50%, 0); }
  .looks-node[data-node="2"] { left: 72%; top: 30%; }
  .looks-node[data-node="3"] { left: 28%; top: 50%; }
  .looks-node[data-node="4"] { left: 72%; top: 70%; }
  .looks-node[data-node="5"] { left: 44%; top: auto; bottom: 3%; transform: translate(-50%, 0); }
}

@media (min-width: 900px) and (max-height: 700px) {
  .looks-panel { position: relative; top: auto; }
}

/* ---------- Pointer effects: fine pointers only ---------- */
@media (hover: hover) and (pointer: fine) {
  .looks-frame .h-tag { filter: brightness(0.85); }
  .looks-frame:hover { transform: scale(1.01); }
  .looks-frame:hover .h-tag { filter: brightness(1); }
}

/* ---------- Reduced motion: everything at rest, wires fully drawn ---------- */
@media (prefers-reduced-motion: reduce) {
  .looks-tab,
  .looks-wire,
  .looks-port,
  .looks-frame,
  .looks-frame .h-tag,
  .looks-video .looks-video-btn { transition: none; }

  .looks-wire,
  .looks-wires.is-reset .looks-wire { stroke-dashoffset: 0; }

  .looks-port.is-pulse,
  .looks-tabpanel.is-entering { animation: none; }

  .looks-frame:hover { transform: none; }
}


/* ==== proof.css ==== */
/* ShopShot Studio, home: "proof", the light table (before and after).
   Tokens used: --h-paper, --h-surface, --h-line, --h-paper-2, --h-ink, --h-ink-2, --h-muted,
   --h-dark-2, --h-bone, --h-amber, --h-amber-deep, --h-amber-soft, --h-amber-a18, --h-dark-a92,
   --h-font, --h-mono, --h-lead, --h-small, --h-mono, --h-mono-sm, --h-track,
   --h-s1..--h-s6, --h-gap, --h-gutter, --h-room-pad, --h-hang-proof,
   --h-r1, --h-r2, --h-r3, --h-shadow-card, --h-shadow-dark, --h-ease, --h-t1, --h-t2,
   --h-z-room-proof, --h-z-hang, and the registered --lx / --ly.
   Mobile first; breakpoints 640 / 900 / 1200. No hard-coded colours. */

/* ---------- Room ---------- */
.proof {
  position: relative;
  z-index: var(--h-z-room-proof);
  background: var(--h-paper);
  color: var(--h-ink);
  padding-top: var(--h-room-pad);
  /* Phones: the table does not hang (the pair list clears it), so the room gives back the hang
     the turntable room adds to its padding-top and the rhythm stays one room-pad. */
  padding-bottom: calc(var(--h-room-pad) - var(--h-hang-proof));
}

.proof-head {
  margin-bottom: var(--h-s6);
}

.proof-lead {
  max-width: 54ch;
  margin: var(--h-s4) 0 0;
  font-family: var(--h-font);
  font-size: var(--h-lead);
  line-height: 1.55;
  color: var(--h-ink-2);
}

/* ---------- Layout ---------- */
.proof-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--h-s5);
  align-items: start;
}

/* ---------- The light table ---------- */
.proof-table {
  position: relative;
  z-index: var(--h-z-hang);
  width: 100%;
  min-width: 0;
  padding: var(--h-s3);
  background: var(--h-surface);
  border-radius: var(--h-r3);
  box-shadow: var(--h-shadow-card), 0 30px 80px var(--h-amber-a18);
  margin-bottom: calc(-1 * var(--h-hang-proof));
  transform: none;
}

.proof-frame {
  --pos: 50%;
  position: relative;
  isolation: isolate;
  aspect-ratio: 3 / 4;
  border-radius: var(--h-r2);
  overflow: hidden;
  background: var(--h-dark-2);
  touch-action: pan-y;
}

.proof-frame img {
  display: block;
  transition: opacity var(--h-t2) var(--h-ease);
}

.proof-frame.is-swapping img {
  opacity: 0.35;
}

.proof-before {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Blurred, cover-fit copy of the "before" photo: the letterbox fill behind the contained image,
   so landscape and 2:3 starting photos are never cropped and nothing in the before is hidden. */
.proof-before-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(24px);
  opacity: 0.55;
  transform: scale(1.1);
}

.proof-before-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.proof-after {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 var(--pos));
}

.proof-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: var(--h-amber);
  pointer-events: none;
}

.proof-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--h-r-pill);
  background: var(--h-amber);
  color: var(--h-ink);
  box-shadow: var(--h-shadow-dark);
  transform: translate(-50%, -50%);
}

.proof-knob svg {
  width: 26px;
  height: 26px;
}

.proof-tag {
  position: absolute;
  bottom: var(--h-s3);
  z-index: 3;
  padding: 6px 8px;
  border-radius: var(--h-r1);
  font-family: var(--h-mono);
  font-size: var(--h-mono-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  pointer-events: none;
}

.proof-tag-before {
  left: var(--h-s3);
  background: var(--h-dark-a92);
  color: var(--h-bone);
}

.proof-tag-after {
  right: var(--h-s3);
  background: var(--h-amber);
  color: var(--h-ink);
}

.proof-corner {
  position: absolute;
  z-index: 3;
  width: 14px;
  height: 14px;
  border: 0 solid var(--h-bone);
  opacity: 0.9;
  pointer-events: none;
}

.proof-corner-tl { top: var(--h-s2); left: var(--h-s2); border-top-width: 2px; border-left-width: 2px; }
.proof-corner-tr { top: var(--h-s2); right: var(--h-s2); border-top-width: 2px; border-right-width: 2px; }
.proof-corner-bl { bottom: var(--h-s2); left: var(--h-s2); border-bottom-width: 2px; border-left-width: 2px; }
.proof-corner-br { bottom: var(--h-s2); right: var(--h-s2); border-bottom-width: 2px; border-right-width: 2px; }

/* The native range covers the whole frame: drag, tap, arrow keys all work with no custom code. */
.proof-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.proof-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
}

.proof-range::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border: 0;
}

.proof-frame:has(input:focus-visible) {
  outline: 3px solid var(--h-amber-deep);
  outline-offset: 4px;
}

/* ---------- Right side: readout, pair list, credit ---------- */
.proof-side {
  min-width: 0;
}

.proof-readout {
  margin: 0 0 var(--h-s4);
  font-family: var(--h-mono);
  font-size: var(--h-mono-md);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-amber-deep);
}

.proof-list {
  display: grid;
  gap: var(--h-s2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.proof-list li {
  min-width: 0;
}

.proof-pair {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "thumbs text index";
  align-items: center;
  gap: var(--h-s3);
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--h-s2) var(--h-s3);
  border: 1px solid transparent;
  border-radius: var(--h-r3);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--h-t1) var(--h-ease), background-color var(--h-t1) var(--h-ease);
}

.proof-pair[aria-pressed="true"] {
  border-color: var(--h-amber-deep);
  background: var(--h-amber-soft);
}

.proof-pair-thumbs {
  grid-area: thumbs;
  display: flex;
  gap: var(--h-s1);
}

.proof-pair-thumb {
  display: block;
  width: 44px;
  height: 58px;
  object-fit: cover;
  border-radius: var(--h-r1);
  background: var(--h-paper-2);
}

.proof-pair-text {
  grid-area: text;
  display: block;
  min-width: 0;
}

.proof-pair-name {
  display: block;
  font-family: var(--h-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--h-ink);
}

.proof-pair-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--h-mono);
  font-size: var(--h-mono-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--h-muted);
}

.proof-pair-index {
  grid-area: index;
  font-family: var(--h-mono);
  font-size: var(--h-mono-md);
  font-weight: 500;
  letter-spacing: var(--h-track);
  color: var(--h-muted);
}

.proof-credit {
  margin: var(--h-s5) 0 0;
  font-family: var(--h-font);
  font-size: var(--h-small);
  line-height: 1.5;
  color: var(--h-muted);
}

/* ---------- Phone and tablet (under 900px) ----------
   The readout sits above the frame, the pair list becomes a horizontal snap row. */
@media (max-width: 899px) {
  .proof-side {
    display: contents;
  }

  .proof-readout { order: 1; margin-bottom: 0; }
  .proof-table { order: 2; }
  .proof-list { order: 3; }
  .proof-credit { order: 4; margin-top: var(--h-s2); }

  .proof-layout {
    gap: var(--h-s4);
  }

  /* The hang pulls the table into the next room; keep the list clear of it. The row clips
     vertically, so 6px of block padding (given back as negative margin) keeps the shared 3px
     focus ring and its 2px offset inside the box; the end padding and scroll-padding keep a
     focused last chip clear of the 24px fade. */
  .proof-list {
    display: flex;
    gap: var(--h-s2);
    margin-top: calc(var(--h-hang-proof) - 6px);
    margin-bottom: -6px;
    margin-inline: calc(-1 * var(--h-gutter));
    padding-block: 6px;
    padding-inline: var(--h-gutter) calc(var(--h-gutter) + var(--h-s5) + 24px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--h-gutter) calc(var(--h-s5) + 24px);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, var(--h-ink) calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, var(--h-ink) calc(100% - 24px), transparent);
  }

  .proof-list::-webkit-scrollbar {
    display: none;
  }

  .proof-list li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .proof-pair {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "thumbs" "text";
    align-items: start;
    gap: var(--h-s2);
    width: 88px;
    padding: 6px;
  }

  .proof-pair-thumbs {
    position: relative;
    gap: var(--h-s1);
  }

  .proof-pair-thumb {
    width: 36px;
    height: 48px;
  }

  .proof-pair-index {
    position: absolute;
    top: var(--h-s1);
    left: var(--h-s1);
    z-index: 1;
    padding: 2px 4px;
    border-radius: var(--h-r1);
    background: var(--h-dark-a92);
    color: var(--h-bone);
    font-size: var(--h-mono-sm);
    line-height: 1;
    letter-spacing: 0;
  }

  /* Names and looks wrap to two lines instead of ending in an ellipsis; the model name is
     dropped from the 88px chip (the readout above spells out the pressed pair in full). */
  .proof-pair-name,
  .proof-pair-meta {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .proof-pair-name {
    font-size: 13px;
  }

  .proof-pair-model {
    display: none;
  }
}

/* Tablet: single column still, but the frame stops growing past the desktop size. */
@media (min-width: 640px) and (max-width: 899px) {
  .proof-table {
    max-width: 560px;
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  /* Desktop: no bottom padding, so the table's negative margin carries it 48px into the
     turntable room (which adds the same 48px to its padding-top). align-self: end keeps that
     overlap exact even when the pair list is the taller column. */
  .proof {
    padding-bottom: 0;
  }

  .proof-layout {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: var(--h-gap);
  }

  .proof-table {
    align-self: end;
  }

  .proof-knob {
    width: 50px;
    height: 50px;
  }
}

@media (min-width: 1200px) {
  .proof-head {
    margin-bottom: var(--h-s7);
  }
}

/* ---------- Pointer effects: fine pointers only ---------- */
@media (hover: hover) and (pointer: fine) {
  .proof-table {
    transform: perspective(1200px) rotateX(calc(var(--ly) * -3deg)) rotateY(calc(var(--lx) * 3deg));
    transition: transform var(--h-t1) var(--h-ease);
    will-change: transform;
  }

  .proof-pair:hover {
    border-color: var(--h-line);
  }

  .proof-pair[aria-pressed="true"]:hover {
    border-color: var(--h-amber-deep);
  }
}

/* ---------- Reduced motion: no tilt, no fades ---------- */
@media (prefers-reduced-motion: reduce) {
  .proof-table {
    transform: none;
    transition: none;
    will-change: auto;
  }

  .proof-frame img,
  .proof-pair {
    transition: none;
  }
}


/* ==== turntable.css ==== */
/* ShopShot Studio, home: the turntable (3D, click to load).
   Tokens used: --h-dark, --h-dark-2, --h-dark-3, --h-bone, --h-dark-muted, --h-amber, --h-ink,
   --h-bone-a10, --h-bone-a30, --h-dark-a92, --h-amber-a10, --h-amber-a18, --h-font, --h-mono,
   --h-lead, --h-small, --h-mono (size), --h-mono-sm, --h-track, --h-lh-body, --h-s1..--h-s6,
   --h-room-pad, --h-gap, --h-hang-proof, --h-hang-turntable, --h-r4, --h-r-pill, --h-shadow-dark,
   --h-ease, --h-t1, --h-t2, --h-z-room-turntable, --h-z-hang, and the registered --lx / --ly.
   The pointer tilt reads --lx / --ly (registered, non-inheriting) written by turntable.js on the
   poster image and on the shine layer. --p (0..1) is written on the load button and drives the
   progress ring. No hard-coded colours. Copied as-is by the build: never write a double curly brace. */

/* ---------- Room ---------- */
#home-turntable {
  position: relative;
  z-index: var(--h-z-room-turntable);
  background-color: var(--h-dark); /* colour only, so the ink-room dot grid from base.css shows through */
  color: var(--h-bone);
  padding-top: calc(var(--h-room-pad) + var(--h-hang-proof));
  padding-bottom: var(--h-room-pad);
  overflow-x: clip;
}

/* Phone first: one column. The checklist and note follow the stage here, so the stage cannot
   hang out of the room; the phone hang token is consumed as trimmed bottom padding instead
   (the process room adds the same amount to its padding-top), so the rhythm stays even. */
.turntable-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}
.turntable-copy { display: contents; }
.turntable-copy > .h-eyebrow { order: 1; }
.turntable-copy > .h-title { order: 2; margin-bottom: var(--h-s5); }
.turntable-copy > .turntable-lead { order: 3; }
.turntable-figure { order: 4; }
.turntable-copy > .turntable-list { order: 5; }
.turntable-copy > .turntable-note { order: 6; }

@media (max-width: 899px) {
  #home-turntable { padding-bottom: calc(var(--h-room-pad) - var(--h-hang-turntable)); }
}

/* ---------- Copy ---------- */
.turntable-lead {
  margin: 0 0 var(--h-s5);
  max-width: 56ch;
  font-size: var(--h-lead);
  line-height: 1.55;
  color: var(--h-dark-muted);
}
#home-turntable .turntable-list { margin: 0 0 var(--h-s5); max-width: 56ch; }
#home-turntable .turntable-list li { color: var(--h-bone); }
.turntable-note {
  margin: 0;
  max-width: 56ch;
  font-size: var(--h-small);
  line-height: 1.5;
  color: var(--h-dark-muted);
}
.turntable-note a { color: var(--h-bone); text-decoration: underline; text-underline-offset: 3px; }
.turntable-note a:hover { color: var(--h-amber); }
.turntable-note-phone { display: inline; }

/* ---------- The stage ---------- */
.turntable-figure {
  position: relative;
  z-index: var(--h-z-hang);
  width: 100%;
  max-width: 620px;
  margin: var(--h-s4) 0 var(--h-s6);
}
.turntable-stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
  width: 100%;
  max-width: 620px;
  border-radius: var(--h-r4);
  border: 1px solid var(--h-bone-a10);
  overflow: hidden;
  perspective: 900px;
  background:
    radial-gradient(60% 55% at 50% 44%, var(--h-amber-a18), var(--h-amber-a10) 45%, transparent 100%),
    var(--h-dark-2);
}
/* Floor: a thin turntable disc and a soft contact shadow under the model. */
.turntable-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 17%;
  right: 17%;
  bottom: 8%;
  height: 15%;
  border-radius: 50%;
  border: 1px solid var(--h-bone-a10);
  pointer-events: none;
}
.turntable-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 24%;
  right: 24%;
  bottom: 10%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--h-dark), transparent);
  opacity: 0.8;
  pointer-events: none;
}
.turntable-stage model-viewer {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-height: 0px;
}
/* The poster: contained, padded, screened onto the glow so its white ground disappears. */
.turntable-stage model-viewer > img[slot="poster"] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
  /* The poster is a photo of the model on a white ground, shown as a rounded print inside the
     dark stage: a screen blend would keep the white ground, a multiply blend would crush the bag. */
  clip-path: inset(10% round var(--h-r3));
  will-change: transform;
}
/* Specular highlight that follows the pointer before load (fine pointers only). */
.turntable-shine {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, var(--h-bone-a10), transparent) no-repeat;
  background-size: 90% 90%;
  background-position: calc(50% + var(--lx) * 70%) calc(50% + var(--ly) * 70%);
  transition: opacity var(--h-t2) var(--h-ease);
}
.turntable-stage.is-loading .turntable-shine,
.turntable-stage.is-loaded .turntable-shine { opacity: 0; }

.turntable-tag {
  position: absolute;
  z-index: 3;
  top: var(--h-s4);
  left: var(--h-s4);
  max-width: calc(100% - 2 * var(--h-s4));
}

/* ---------- Load button ---------- */
.turntable-load {
  --p: 0;
  position: absolute;
  z-index: 3;
  left: var(--h-s4);
  right: var(--h-s4);
  bottom: var(--h-s4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--h-s3);
  min-height: 48px;
  padding: var(--h-s2) var(--h-s5) var(--h-s2) var(--h-s3);
  border: 1px solid var(--h-bone-a10);
  border-radius: var(--h-r-pill);
  background: var(--h-dark-2);
  color: var(--h-bone);
  font: 600 15px/1.25 var(--h-font);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--h-shadow-dark);
  transition: background-color var(--h-t1) var(--h-ease), border-color var(--h-t1) var(--h-ease);
}
.turntable-load:hover { background: var(--h-dark-3); border-color: var(--h-bone-a30); }
/* aria-disabled rather than disabled while loading, so keyboard focus stays on the button. */
.turntable-load:disabled,
.turntable-load[aria-disabled="true"] { cursor: progress; }
.turntable-load:focus-visible { outline: 3px solid var(--h-amber); outline-offset: 3px; }
.turntable-load-ring { flex: 0 0 28px; width: 28px; height: 28px; }
.turntable-ring-track { fill: none; stroke: var(--h-bone-a30); stroke-width: 2.5; }
.turntable-ring-fill {
  fill: none;
  stroke: var(--h-amber);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 75.4;
  stroke-dashoffset: calc(75.4 * (1 - var(--p)));
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset var(--h-t2) var(--h-ease);
}
.turntable-ring-cube { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.turntable-load-label { min-width: 0; }

/* ---------- Camera tools ---------- */
.turntable-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--h-s2);
  margin-top: var(--h-s3);
}
.turntable-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--h-s1);
  min-height: 56px;
  padding: var(--h-s2) var(--h-s1);
  border: 1px solid var(--h-bone-a10);
  border-radius: var(--h-r3);
  background: var(--h-dark-a92);
  color: var(--h-bone);
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: var(--h-mono-sm);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--h-t1) var(--h-ease), color var(--h-t1) var(--h-ease);
}
.turntable-tool:hover:not(:disabled) { background: var(--h-dark-3); }
.turntable-tool[aria-pressed="true"]:not(:disabled) { background: var(--h-amber); color: var(--h-ink); border-color: var(--h-amber); }
.turntable-tool:disabled { opacity: 0.55; cursor: not-allowed; }
.turntable-tool:focus-visible { outline: 3px solid var(--h-amber); outline-offset: 2px; }
.turntable-tool-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Caption ---------- */
.turntable-caption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--h-s2) var(--h-s3);
  margin-top: var(--h-s3);
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: var(--h-mono-md);
  line-height: 1.4;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-dark-muted);
}

/* ---------- Pointer tilt (fine pointers only, before load) ---------- */
@media (hover: hover) and (pointer: fine) {
  .turntable-stage:not(.is-loading):not(.is-loaded) model-viewer > img[slot="poster"] {
    transform: rotateX(calc(var(--ly) * -6deg)) rotateY(calc(var(--lx) * 6deg));
    transition: transform var(--h-t1) var(--h-ease);
  }
  .turntable-stage.is-hover:not(.is-loading):not(.is-loaded) .turntable-shine { opacity: 1; }
}

/* ---------- 640px ---------- */
@media (min-width: 640px) {
  .turntable-figure { margin-top: var(--h-s5); }
  .turntable-tool { letter-spacing: var(--h-track); }
}

/* ---------- 900px: two columns, centred pill, tools pinned over the stage ---------- */
@media (min-width: 900px) {
  .turntable-load {
    left: 50%;
    right: auto;
    bottom: 20px;
    translate: -50% 0;
    display: inline-flex;
    width: max-content;
    max-width: calc(100% - 32px);
  }
  .turntable-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--h-gap);
    align-items: center;
  }
  /* No bottom padding: the stage's negative margin carries it 48px into the process room, which
     adds the same 48px to its padding-top. align-self: end keeps the overlap exact whatever the
     copy column's height. */
  #home-turntable { padding-bottom: 0; }
  .turntable-copy { display: block; order: 0; }
  .turntable-copy > * { order: 0; }
  .turntable-figure { order: 0; align-self: end; margin: 0 0 calc(-1 * var(--h-hang-turntable)); }
  .turntable-note-phone { display: none; }
  /* The camera tools stay under the stage here (the phone layout above): between 900 and
     1199px the stage is only 430 to 500px wide, too narrow for the tag and four pills to share
     its top edge. The caption sits in the 48px that hangs over the paper process room, so it
     uses the paper-room muted tone there (dark-muted would be about 2:1 on paper). */
  .turntable-caption { margin-top: var(--h-s4); color: var(--h-muted); }
}

/* ---------- 1200px: tools pinned top-right, tag top-left ----------
   The stage is at least 590px wide from here, so the two-line tag (at most the stage width
   minus the 301px tool row and its gutters) and the four pills fit side by side. */
@media (min-width: 1200px) {
  .turntable-tag {
    top: 20px;
    left: 20px;
    max-width: calc(100% - 360px);
    white-space: normal;
    line-height: 1.35;
  }

  .turntable-tools {
    position: absolute;
    z-index: 3;
    top: 20px;
    right: 20px;
    display: flex;
    gap: var(--h-s1);
    margin: 0;
  }
  .turntable-tool {
    flex-direction: row;
    min-height: 40px;
    padding: 0 var(--h-s3);
    border-radius: var(--h-r-pill);
    letter-spacing: var(--h-track);
    white-space: nowrap;
  }
  .turntable-tool-icon { display: none; }
}

/* ---------- Under 900px: more room for the poster ----------
   On phones the full-width load button (48px plus its 16px inset) and the two-line tag both sit
   inside the stage, so the poster gets a deeper top and bottom band than the 10% it has on
   desktop; otherwise the button hides the bottom of the bag on a 320px stage. */
@media (max-width: 899px) {
  .turntable-stage model-viewer > img[slot="poster"] {
    padding: 18% 10% 22%;
    clip-path: inset(18% 10% 22% round var(--h-r3));
  }
}

/* ---------- Reduced motion: no tilt, no highlight, ring without transition ---------- */
@media (prefers-reduced-motion: reduce) {
  .turntable-stage model-viewer > img[slot="poster"] { transform: none !important; transition: none !important; will-change: auto; }
  .turntable-shine { display: none; }
  .turntable-ring-fill, .turntable-load, .turntable-tool { transition: none !important; }
}


/* ==== process.css ==== */
/* Home: "How it works" (process). Three step cards on paper, an amber progress line behind them.
   Tokens used: --h-paper, --h-paper-2, --h-surface, --h-ink, --h-ink-2, --h-amber-deep, --h-font,
   --h-display, --h-mono, --h-numeral, --h-h3, --h-body, --h-lh-body, --h-mono-sm, --h-track,
   --h-s*, --h-gap, --h-room-pad, --h-hang-turntable, --h-hang-process, --h-r2, --h-r3,
   --h-shadow-card, --h-shadow-float, --h-ease, --h-t1, --h-t4, --h-z-room-process, --h-z-scene,
   --h-z-hang, and the registered --draw. No hard-coded colours. Copied as-is by the build. */

/* ---------- Room ---------- */
#home-process {
  position: relative;
  z-index: var(--h-z-room-process);
  background: var(--h-paper);
  color: var(--h-ink);
  padding-top: calc(var(--h-room-pad) + var(--h-hang-turntable)); /* receives the 3D stage */
  padding-bottom: var(--h-room-pad);
}

#home-process .h-title {
  margin: 0 0 var(--h-s6);
}

/* ---------- Board: line + list ---------- */
.process-board {
  position: relative;
}

/* The amber line. Absolutely positioned behind the cards; --draw 1 = fully drawn at rest. */
.process-line {
  --draw: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--h-z-scene);
  display: none; /* phones use the vertical rail on the list instead */
  overflow: visible;
  pointer-events: none;
}

.process-line polyline {
  fill: none;
  stroke: var(--h-amber-deep);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw));
}

/* The list. Hangs into the pricing band by the shared token (0 under 900px). */
.process-steps {
  position: relative;
  z-index: var(--h-z-hang);
  list-style: none;
  margin: 0;
  margin-bottom: calc(-1 * var(--h-hang-process));
  padding: 0 0 0 var(--h-s6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--h-gap);
}

/* Phone rail: a 2px vertical amber line down the left of the list. */
.process-steps::before {
  content: "";
  position: absolute;
  left: var(--h-s2);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--h-amber-deep);
  border-radius: 1px;
}

/* ---------- Card ---------- */
.process-step {
  --process-stagger: 0px;
  --process-lift: 0px;
  position: relative;
  overflow: visible;
  min-width: 0;
  background: var(--h-surface);
  border: 1px solid var(--h-paper-2);
  border-radius: var(--h-r3);
  box-shadow: var(--h-shadow-card);
  padding: var(--h-s5);
  translate: 0 calc(var(--process-stagger) - var(--process-lift));
  transition:
    transform var(--h-t4) var(--h-ease),
    translate var(--h-t1) var(--h-ease),
    box-shadow var(--h-t1) var(--h-ease);
  transition-delay: var(--process-delay, 0ms), 0ms, 0ms;
}

.process-step:nth-child(2) { --process-delay: 90ms; }
.process-step:nth-child(3) { --process-delay: 180ms; }

/* Big numeral. Phones: a 64px bead centred on the rail, in the gutter left of the card
   (the list's left padding is 32px, the rail sits 8px in, so the numeral's centre is 24px left of the card). */
.process-number {
  position: absolute;
  z-index: 0;
  top: var(--h-s3);
  left: calc(-1 * var(--h-s5));
  translate: -50% 0;
  text-align: center;
  white-space: nowrap;
  font-family: var(--h-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--h-amber-deep);
  background: var(--h-paper);
  padding: var(--h-s1) var(--h-s1);
  user-select: none;
  pointer-events: none;
  transition: transform var(--h-t1) var(--h-ease);
}

/* Media frame, 3:4. Phones: floated right of the heading at 120px. */
.process-media {
  position: relative;
  z-index: 1;
  float: right;
  width: 120px;
  max-width: 45%;
  aspect-ratio: 3 / 4;
  margin: 0 0 var(--h-s2) var(--h-s3);
}

.process-media > img,
.process-grid {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--h-r2);
  object-fit: cover;
  background: var(--h-paper-2);
}

/* 2x2 grid of look thumbnails (86x115 each at 180px wide) */
.process-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--h-s1);
  overflow: hidden;
}

.process-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--h-r1);
}

/* Stamp across the bottom-right corner of the frame: double amber-deep ring, rotated. */
.process-stamp {
  position: absolute;
  right: calc(-1 * var(--h-s2));
  bottom: var(--h-s4);
  max-width: calc(100% + var(--h-s4));
  padding: var(--h-s1) var(--h-s2);
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: var(--h-mono-sm);
  line-height: 1.3;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  text-align: center;
  color: var(--h-amber-deep);
  background: var(--h-surface);
  border: 2px solid var(--h-amber-deep);
  outline: 1px solid var(--h-amber-deep);
  outline-offset: -5px;
  border-radius: var(--h-r1);
  transform: rotate(-8deg);
  transform-origin: 50% 50%;
  pointer-events: none;
}

.process-step h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--h-font);
  font-weight: 700;
  font-size: var(--h-h3);
  line-height: 1.2;
  color: var(--h-ink);
}

.process-step p {
  position: relative;
  z-index: 1;
  margin: var(--h-s2) 0 0;
  font-family: var(--h-font);
  font-size: var(--h-body);
  line-height: var(--h-lh-body);
  color: var(--h-ink-2);
}

/* Clear the float so the card closes below the frame. */
.process-step::after {
  content: "";
  display: block;
  clear: both;
}

/* ---------- 640: room for a wider stamp ---------- */
@media (min-width: 640px) {
  .process-stamp {
    right: calc(-1 * var(--h-s3));
  }
}

/* ---------- 900: three columns, the drawn line, the stagger, the hang ---------- */
@media (min-width: 900px) {
  /* No bottom padding: the list's negative margin carries the step cards 40px (plus their
     stagger) into the pricing band, which adds the same 40px to its padding-top. */
  #home-process {
    padding-bottom: 0;
  }

  .process-line {
    display: block;
  }

  .process-steps {
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .process-steps::before {
    content: none;
  }

  .process-step {
    overflow: hidden;
    padding: 28px;
  }

  .process-step:nth-child(2) { --process-stagger: 40px; }
  .process-step:nth-child(3) { --process-stagger: 80px; }

  .process-number {
    top: var(--h-s4);
    left: var(--h-s5);
    translate: none;
    text-align: left;
    font-size: var(--h-numeral);
    color: var(--h-paper-2);
    background: transparent;
    padding: 0;
  }

  .process-media {
    float: none;
    width: 180px;
    max-width: 100%;
    margin: 0 0 0 auto; /* to the right, so the numeral shows beside it */
  }

  .process-grid {
    gap: var(--h-s2);
  }

  .process-step h3 {
    margin-top: var(--h-s5);
  }

  .process-step::after {
    content: none;
  }
}

/* ---------- 1200: a little more air ---------- */
@media (min-width: 1200px) {
  .process-step {
    padding: 28px 32px 32px;
  }
}

/* ---------- Scroll-driven draw (CSS path) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .process-line {
      animation: process-draw linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 90%;
    }
  }
}

@keyframes process-draw {
  from { --draw: 0; }
  to { --draw: 1; }
}

/* ---------- Hover (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .process-step:hover {
    --process-lift: 8px;
    box-shadow: var(--h-shadow-float);
  }

  .process-step:hover .process-number {
    transform: translateX(6px);
  }
}

/* ---------- Reduced motion: line drawn, cards at rest, hover only deepens the shadow ---------- */
@media (prefers-reduced-motion: reduce) {
  .process-line {
    --draw: 1;
    animation: none;
  }

  .process-step,
  .process-number {
    transition: none;
  }

  .process-step:hover {
    --process-lift: 0px;
  }

  .process-step:hover .process-number {
    transform: none;
  }
}


/* ==== pricing.css ==== */
/* ShopShot Studio, home: pricing (prices with an output preview).
   Tokens used (from tokens.css): --h-paper-2, --h-surface, --h-ink, --h-ink-2, --h-muted, --h-bone,
   --h-amber, --h-amber-deep, --h-line, --h-font, --h-display, --h-mono, --h-amount, --h-h3, --h-lead,
   --h-small, --h-mono-sm, --h-track, --h-s2..--h-s6, --h-room-pad, --h-hang-process, --h-hang-pricing,
   --h-r1, --h-r3, --h-r-pill, --h-shadow-card, --h-shadow-float, --h-ease, --h-t1, --h-t2,
   --h-z-room-pricing, --h-z-hang, --lx, --ly.
   Every selector is scoped under #home-pricing so the shared price-card styles on order.html are untouched.
   This file is copied as-is by the build: never write a double curly brace in it. */

/* ---------- Room ---------- */
#home-pricing {
  position: relative;
  z-index: var(--h-z-room-pricing);
  background: var(--h-paper-2);
  color: var(--h-ink);
  padding-top: calc(var(--h-room-pad) + var(--h-hang-process));
  /* No bottom padding: the cards block's negative margin carries the note pill 64px (32px on
     phones) into the check room, which adds the same amount to its padding-top. */
  padding-bottom: 0;
}

#home-pricing .pricing-lead {
  margin: 0 0 var(--h-s5);
  max-width: 46ch;
  font: 400 var(--h-lead) / 1.55 var(--h-font);
  color: var(--h-ink-2);
}

/* The cards (and the preview under them) hang into the check room. */
#home-pricing .pricing-cards {
  position: relative;
  z-index: var(--h-z-hang);
  margin-bottom: calc(-1 * var(--h-hang-pricing));
}

/* ---------- Price cards (generated partial, restyled) ---------- */
#home-pricing .pricing-grid {
  gap: var(--h-s5);
  margin-top: var(--h-s3);
  perspective: 1000px;
}

#home-pricing .price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--h-surface);
  color: var(--h-ink);
  border: 1px solid var(--h-paper-2);
  border-radius: var(--h-r1);
  padding: 32px 26px 26px;
  box-shadow: var(--h-shadow-card);
  transform: rotateX(calc(var(--ly) * -3deg)) rotateY(calc(var(--lx) * 3deg));
  transition:
    rotate var(--h-t2) var(--h-ease),
    translate var(--h-t2) var(--h-ease),
    transform var(--h-t1) var(--h-ease),
    box-shadow var(--h-t2) var(--h-ease),
    border-color var(--h-t1) var(--h-ease);
}
#home-pricing .price-card:nth-child(1) { rotate: -1.4deg; translate: none; }
#home-pricing .price-card:nth-child(2) { rotate: 0.8deg; translate: 0 -10px; }
#home-pricing .price-card:nth-child(3) { rotate: 1.5deg; translate: none; }

#home-pricing .price-card.is-previewed:not(.featured) { border-color: var(--h-amber-deep); }

#home-pricing .price-card h3 {
  margin: 0 0 var(--h-s1);
  font: 700 22px / 1.2 var(--h-font);
  letter-spacing: 0;
  text-transform: none;
}

#home-pricing .price {
  display: flex;
  align-items: baseline;
  gap: var(--h-s2);
  margin: var(--h-s1) 0 var(--h-s4);
  color: var(--h-muted);
}
#home-pricing .amount {
  font: 900 var(--h-amount) / 1 var(--h-display);
  letter-spacing: 0.01em;
  color: var(--h-ink);
}
#home-pricing .per {
  font: 500 var(--h-mono-md) / 1.4 var(--h-mono);
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-muted);
}

#home-pricing .badge {
  position: absolute;
  top: -16px;
  right: 20px;
  margin: 0;
  rotate: 4deg;
  background: var(--h-amber);
  color: var(--h-ink);
  font: 500 var(--h-mono-md) / 1 var(--h-mono);
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  padding: 8px 11px;
  border-radius: var(--h-r1);
}

#home-pricing .price-card .checklist { margin: 0 0 var(--h-s5); }
#home-pricing .price-card .checklist li { color: var(--h-ink-2); }
#home-pricing .price-card .btn { margin-top: auto; }

/* Featured card: ink surface, bone text, amber amount and ticks. */
#home-pricing .price-card.featured {
  background: var(--h-ink);
  color: var(--h-bone);
  border: 2px solid var(--h-ink);
}
#home-pricing .price-card.featured h3 { color: var(--h-bone); }
#home-pricing .price-card.featured .amount { color: var(--h-amber); }
#home-pricing .price-card.featured .per { color: var(--h-bone); opacity: 0.8; }
#home-pricing .price-card.featured .checklist li { color: var(--h-bone); }
/* Tick: amber disc, ink stroke. The stroke inside the data URI is the --h-ink value, %23111014. */
#home-pricing .price-card.featured .checklist li::before {
  background: var(--h-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%23111014' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
#home-pricing .price-card.featured .btn-primary {
  background: var(--h-amber);
  color: var(--h-ink);
  border-color: transparent;
}
#home-pricing .price-card.featured .btn-primary:hover,
#home-pricing .price-card.featured .btn-primary:focus-visible {
  background: var(--h-bone);
  color: var(--h-ink);
}
#home-pricing .price-card.featured :focus-visible { outline-color: var(--h-amber); }

/* ---------- Preview panel ---------- */
#home-pricing .pricing-preview {
  margin-top: var(--h-s6);
  padding: 20px;
  background: var(--h-surface);
  border: 1px solid var(--h-paper-2);
  border-radius: var(--h-r3);
  box-shadow: var(--h-shadow-float);
}

#home-pricing .pricing-preview-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--h-s2);
}
#home-pricing .pricing-preview-tabs:empty { display: none; }

#home-pricing .pricing-preview-tab {
  appearance: none;
  min-height: 44px;
  padding: 0 var(--h-s4);
  border: 1px solid var(--h-line);
  border-radius: var(--h-r-pill);
  background: var(--h-paper-2);
  color: var(--h-ink);
  font: 500 var(--h-mono-md) / 1 var(--h-mono);
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--h-t1) var(--h-ease), border-color var(--h-t1) var(--h-ease);
}
#home-pricing .pricing-preview-tab:hover { border-color: var(--h-ink); }
#home-pricing .pricing-preview-tab[aria-pressed="true"] {
  background: var(--h-amber);
  border-color: var(--h-amber);
  color: var(--h-ink);
}

#home-pricing .pricing-preview-label {
  margin: var(--h-s4) 0 0;
  color: var(--h-amber-deep);
}
#home-pricing .pricing-preview-label:empty { display: none; }

#home-pricing .pricing-slots {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--h-s2);
  margin: var(--h-s4) 0 0;
  padding: 0;
}
#home-pricing .pricing-slot {
  flex: 0 0 auto;
  width: 72px;
  height: 96px;
  margin: 0;
  border-radius: var(--h-r1);
  overflow: hidden;
  background: var(--h-paper-2);
}
#home-pricing .pricing-slot[hidden] { display: none; }
#home-pricing .pricing-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#home-pricing .pricing-slot-video {
  display: flex;
  align-items: center;
  gap: var(--h-s3);
  width: auto;
  overflow: visible;
  background: none;
}
#home-pricing .pricing-slot-thumb {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 72px;
  height: 96px;
  border-radius: var(--h-r1);
  overflow: hidden;
  background: var(--h-paper-2);
}
#home-pricing .pricing-slot-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 28px;
  height: 28px;
  pointer-events: none;
}
#home-pricing .pricing-slot-play circle { fill: var(--h-amber); }
#home-pricing .pricing-slot-play path { fill: var(--h-ink); }
#home-pricing .pricing-slot-video-len {
  display: block;
  max-width: 6.5em;
  font: 500 var(--h-mono-sm) / 1.4 var(--h-mono);
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-muted);
}

#home-pricing .pricing-preview-caption {
  margin: var(--h-s4) 0 0;
  font: 400 var(--h-small) / 1.5 var(--h-font);
  color: var(--h-muted);
}

/* The note sits at the bottom of the hang, so it gets its own surface to stay readable over the ink room. */
#home-pricing .pricing-note {
  display: inline-block;
  margin: var(--h-s4) 0 0;
  padding: var(--h-s2) var(--h-s3);
  background: var(--h-surface);
  border: 1px solid var(--h-paper-2);
  border-radius: var(--h-r-pill);
  color: var(--h-muted);
}

/* ---------- Slot re-entry (motion only) ---------- */
@keyframes pricing-slot-in {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}
#home-pricing .pricing-slot.is-entering {
  animation: pricing-slot-in var(--h-t2) var(--h-ease) both;
}

/* ---------- Hover and tilt: fine pointers only ---------- */
@media (hover: hover) and (pointer: fine) {
  #home-pricing .price-card:hover,
  #home-pricing .price-card:focus-within {
    rotate: 0deg;
    translate: 0 -14px;
    box-shadow: var(--h-shadow-float);
  }
}

/* ---------- Phone and tablet (≤ 899px) ---------- */
@media (max-width: 899px) {
  #home-pricing .pricing-grid {
    grid-template-columns: 1fr;
    max-width: none;
    margin-inline: 0;
    perspective: none;
  }
  #home-pricing .price-card:nth-child(n) {
    rotate: 0deg;
    translate: none;
    transform: none;
  }
  #home-pricing .price-card.featured { order: -1; }
  #home-pricing .amount { font-size: 56px; }

  /* Slots: one horizontal row inside the panel, hidden scrollbar, right-edge fade. */
  #home-pricing .pricing-slots {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: -20px;
    padding-inline: 20px 44px;
    padding-bottom: var(--h-s1);
    /* Any opaque colour works for a mask; the ink token keeps the file free of literal colours. */
    -webkit-mask-image: linear-gradient(to right, var(--h-ink) calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, var(--h-ink) calc(100% - 24px), transparent);
  }
  #home-pricing .pricing-slots::-webkit-scrollbar { display: none; }
  #home-pricing .pricing-slot { scroll-snap-align: start; }
  #home-pricing .pricing-slot,
  #home-pricing .pricing-slot-thumb {
    width: 64px;
    height: 86px;
  }
  #home-pricing .pricing-slot-video { width: auto; height: auto; }
}

/* ---------- Reduced motion: no tilt, no slide, hover only deepens the shadow ---------- */
@media (prefers-reduced-motion: reduce) {
  #home-pricing .price-card,
  #home-pricing .price-card:is(:hover, :focus-within) {
    transform: none;
    transition: none;
    box-shadow: var(--h-shadow-card);
  }
  #home-pricing .price-card:is(:hover, :focus-within) { box-shadow: var(--h-shadow-float); }
  #home-pricing .price-card:nth-child(1):is(:hover, :focus-within) { rotate: -1.4deg; translate: none; }
  #home-pricing .price-card:nth-child(2):is(:hover, :focus-within) { rotate: 0.8deg; translate: 0 -10px; }
  #home-pricing .price-card:nth-child(3):is(:hover, :focus-within) { rotate: 1.5deg; translate: none; }
  #home-pricing .pricing-slot.is-entering { animation: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  #home-pricing .price-card:nth-child(n):is(:hover, :focus-within) { rotate: 0deg; translate: none; }
}


/* ==== check.css ==== */
/* ShopShot Studio, home: "A person checks every set" (#home-check).
   Tokens used: --h-dark, --h-dark-2, --h-dark-3, --h-bone, --h-bone-a10, --h-bone-a30,
   --h-dark-muted, --h-dark-a92, --h-amber, --h-ink, --h-font, --h-mono, --h-mono-lg, --h-mono-sm,
   --h-track, --h-lead, --h-small, --h-lh-body, --h-s1..--h-s6, --h-room-pad, --h-hang-pricing,
   --h-gap, --h-r1, --h-r2, --h-r3, --h-shadow-dark, --h-ease, --h-ease-out, --h-t1, --h-t2,
   --h-z-room-check, --h-z-loupe. No hard-coded colours. Copied as-is by the build. */

/* ---------- Room ---------- */
#home-check {
  position: relative;
  z-index: var(--h-z-room-check);
  background-color: var(--h-dark);
  background-image: radial-gradient(circle, var(--h-bone-a10) 1px, transparent 1.5px);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--h-bone) 8%, transparent) 1px, transparent 1.5px);
  background-size: 24px 24px;
  color: var(--h-bone);
  padding-top: calc(var(--h-room-pad) + var(--h-hang-pricing));
  padding-bottom: var(--h-room-pad);
}

.check-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--h-gap);
  align-items: start;
}

/* ---------- Copy ---------- */
.check-copy .h-eyebrow { color: var(--h-amber); }

.check-lead {
  font-size: var(--h-lead);
  line-height: 1.55;
  color: var(--h-bone);
  max-width: 54ch;
  margin: 0 0 var(--h-s5);
}

.check-credits {
  list-style: none;
  margin: 0 0 var(--h-s5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--h-s2);
}

.check-credit {
  display: flex;
  align-items: center;
  gap: var(--h-s3);
  min-height: 40px;
  padding: var(--h-s2) var(--h-s3);
  background: var(--h-dark-2);
  border: 1px solid var(--h-bone-a10);
  border-radius: var(--h-r3);
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: var(--h-mono-lg);
  line-height: 1.4;
  color: var(--h-bone);
}

.check-credit .h-port {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--h-dark-muted);
}

.check-credit-text { flex: 1 1 auto; min-width: 0; }

.check-list { margin-bottom: 0; }
.check-list li { color: var(--h-bone); }
.check-list a,
.check-copy a {
  color: var(--h-bone);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.check-list a:hover,
.check-copy a:hover { color: var(--h-amber); }

/* ---------- Card ---------- */
.check-card {
  position: relative;
  background: var(--h-dark-2);
  border: 1px solid var(--h-bone-a10);
  border-radius: var(--h-r3);
  padding: var(--h-s3);
  box-shadow: var(--h-shadow-dark);
}

.check-pill {
  position: absolute;
  top: var(--h-s3);
  right: var(--h-s3);
  z-index: 5;
  background: var(--h-amber);
  color: var(--h-ink);
}

.check-pair {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: var(--h-s6);
}

/* ---------- Frames ---------- */
.check-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--h-r2);
  background: var(--h-dark-3);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: zoom-in;
}

.check-frame:focus-visible {
  outline: 3px solid var(--h-amber);
  outline-offset: 2px;
}

.check-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-touch-callout: none;
}

.check-label {
  position: absolute;
  top: var(--h-s2);
  left: var(--h-s2);
  z-index: 2;
  padding: 5px 7px;
  border-radius: var(--h-r1);
  background: var(--h-dark-a92);
  color: var(--h-bone);
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: var(--h-mono-sm);
  line-height: 1.2;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  max-width: calc(100% - 2 * var(--h-s2));
  /* One line at every width: a second line would land on callout dot 1 (top 19 to 20%). Under
     640px the model name is dropped from the label instead (it stays in the copy and credits). */
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 639px) {
  .check-label-model { display: none; }
}

/* ---------- Callout dots ---------- */
.check-dot {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 2px solid var(--h-amber);
  border-radius: 50%;
  background: var(--h-dark-a92);
  color: var(--h-bone);
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--h-shadow-dark);
  transition: transform var(--h-t2) var(--h-ease), background-color var(--h-t1) var(--h-ease), color var(--h-t1) var(--h-ease);
}

.check-dot:focus-visible {
  outline: 3px solid var(--h-amber);
  outline-offset: 2px;
}

/* Appendix B positions (x from left, y from top) */
.check-frame[data-side="before"] .check-dot[data-point="1"] { left: 50%; top: 20%; }
.check-frame[data-side="before"] .check-dot[data-point="2"] { left: 63%; top: 36%; }
.check-frame[data-side="before"] .check-dot[data-point="3"] { left: 50%; top: 60%; }
.check-frame[data-side="before"] .check-dot[data-point="4"] { left: 31%; top: 79%; }
.check-frame[data-side="before"] .check-dot[data-point="5"] { left: 88%; top: 67%; }
.check-frame[data-side="after"] .check-dot[data-point="1"] { left: 51%; top: 19%; }
.check-frame[data-side="after"] .check-dot[data-point="2"] { left: 63%; top: 33%; }
.check-frame[data-side="after"] .check-dot[data-point="3"] { left: 50%; top: 55%; }
.check-frame[data-side="after"] .check-dot[data-point="4"] { left: 34%; top: 74%; }
.check-frame[data-side="after"] .check-dot[data-point="5"] { left: 82%; top: 63%; }

.check-card[data-active="1"] .check-dot[data-point="1"],
.check-card[data-active="2"] .check-dot[data-point="2"],
.check-card[data-active="3"] .check-dot[data-point="3"],
.check-card[data-active="4"] .check-dot[data-point="4"],
.check-card[data-active="5"] .check-dot[data-point="5"] {
  background: var(--h-amber);
  color: var(--h-ink);
  transform: translate(-50%, -50%) scale(1.3);
}

/* ---------- Wire ---------- */
.check-wire {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.check-wire-line {
  fill: none;
  stroke: var(--h-amber);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--h-t2) var(--h-ease-out);
}

.check-card[data-active] .check-wire-line { stroke-dashoffset: 0; }

/* ---------- Loupe ---------- */
.check-loupe {
  position: absolute;
  z-index: var(--h-z-loupe);
  width: 96px;
  height: 96px;
  border: 3px solid var(--h-amber);
  border-radius: 50%;
  box-shadow: var(--h-shadow-dark);
  background-color: var(--h-dark-3);
  background-repeat: no-repeat;
  background-size: 200%;
  background-position: 50% 50%;
  pointer-events: none;
  transform: scale(0.6);
  transition: transform calc(var(--h-t1) * 0.75) var(--h-ease-out);
}
.check-loupe[hidden] { display: none; }
.check-loupe.is-in { transform: scale(1); }

.check-frame[data-side="before"] .check-loupe { background-image: url("/assets/gallery/bag-before-phone-photo.jpg"); }
.check-frame[data-side="after"] .check-loupe { background-image: url("/assets/gallery/bag-studio-float.jpg"); }

/* ---------- Legend ---------- */
.check-legend {
  list-style: none;
  margin: var(--h-s4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--h-s1);
}

.check-legend-btn {
  display: flex;
  align-items: center;
  gap: var(--h-s3);
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--h-s2) var(--h-s3);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--h-r1);
  background: transparent;
  color: var(--h-bone);
  font-family: var(--h-font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--h-t1) var(--h-ease), border-color var(--h-t1) var(--h-ease);
}

.check-legend-btn:hover { background: var(--h-dark-3); }

.check-legend-btn:focus-visible {
  outline: 3px solid var(--h-amber);
  outline-offset: 2px;
}

.check-legend-index {
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: var(--h-mono-sm);
  letter-spacing: var(--h-track);
  color: var(--h-dark-muted);
}

.check-legend-btn[aria-pressed="true"],
.check-card[data-active="1"] .check-legend-btn[data-point="1"],
.check-card[data-active="2"] .check-legend-btn[data-point="2"],
.check-card[data-active="3"] .check-legend-btn[data-point="3"],
.check-card[data-active="4"] .check-legend-btn[data-point="4"],
.check-card[data-active="5"] .check-legend-btn[data-point="5"] {
  border-left-color: var(--h-amber);
  background: var(--h-dark-3);
}

.check-legend-btn[aria-pressed="true"] .check-legend-index,
.check-card[data-active="1"] .check-legend-btn[data-point="1"] .check-legend-index,
.check-card[data-active="2"] .check-legend-btn[data-point="2"] .check-legend-index,
.check-card[data-active="3"] .check-legend-btn[data-point="3"] .check-legend-index,
.check-card[data-active="4"] .check-legend-btn[data-point="4"] .check-legend-index,
.check-card[data-active="5"] .check-legend-btn[data-point="5"] .check-legend-index {
  color: var(--h-amber);
}

/* ---------- Readouts under the legend ---------- */
.check-legend-caption,
.check-loupe-hint,
.check-loupe-readout {
  margin: var(--h-s3) 0 0;
  color: var(--h-dark-muted);
}

.check-loupe-hint span[data-input="fine"] { display: none; }
.check-loupe-hint span[data-input="coarse"] { display: inline; }

.check-loupe-readout {
  min-height: 1.4em;
  color: var(--h-amber);
}
.check-loupe-readout:empty::before { content: "\00a0"; }

/* ---------- Pointer-dependent rules ---------- */
@media (hover: hover) and (pointer: fine) {
  .check-loupe-hint span[data-input="fine"] { display: inline; }
  .check-loupe-hint span[data-input="coarse"] { display: none; }
  .check-loupe { width: 160px; height: 160px; background-size: 250%; }
  .check-dot:hover { background: var(--h-amber); color: var(--h-ink); }
}

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .check-card { padding: var(--h-s4); }
  .check-pill { top: var(--h-s4); right: var(--h-s4); }
  .check-pair { gap: 12px; }
  .check-dot { width: 24px; height: 24px; font-size: 11px; }
  .check-credits { flex-direction: row; flex-wrap: wrap; }
  .check-credit { flex: 1 1 auto; }
  .check-legend { flex-direction: row; flex-wrap: wrap; gap: var(--h-s2); }
  .check-legend li { flex: 1 1 auto; }
  .check-legend-btn { width: auto; }
}

@media (min-width: 900px) {
  .check-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .check-credit { flex: 0 1 auto; }
}

@media (min-width: 1200px) {
  .check-lead { max-width: 58ch; }
}

/* ---------- Reduced motion: the loupe stays (user-driven); only motion goes ---------- */
@media (prefers-reduced-motion: reduce) {
  .check-dot,
  .check-wire-line,
  .check-loupe,
  .check-legend-btn { transition: none; }
  .check-loupe { transform: none; }
}


/* ==== faq.css ==== */
/* ShopShot Studio homepage, section "faq": Before you book the shoot.
   Tokens used: --h-paper, --h-line, --h-ink, --h-ink-2, --h-muted, --h-amber-deep,
   --h-amber-deeper, --h-font, --h-mono, --h-body, --h-mono, --h-track, --h-lh-body,
   --h-gap, --h-room-pad, --h-header, --h-s2, --h-s4, --h-s5, --h-s6, --h-r1,
   --h-t1, --h-t2, --h-ease, --h-z-room-faq, --h-z-sticky.
   Everything is scoped under #home-faq so the shared details/summary look on the
   other pages is untouched. Mobile-first; breakpoints 640 / 900 / 1200.
   Copied as-is by the build: never write a double curly brace in this file. */

#home-faq {
  position: relative;
  z-index: var(--h-z-room-faq);
  background: var(--h-paper);
  color: var(--h-ink);
  padding-block: var(--h-room-pad);
}

/* ---------- Layout ----------
   Phone first: one column. The head is display: contents so its three children become
   grid items and the contact line can be ordered below the list without touching the DOM. */
#home-faq .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--h-s6);
  align-items: start;
}

#home-faq .faq-head {
  display: contents;
}

#home-faq .faq-head .h-eyebrow {
  order: 1;
  margin-bottom: 0;
}

#home-faq .faq-head .h-title {
  order: 2;
  margin: 0;
}

/* The contact line stays above the list on phones, matching the DOM and the tab order. */
#home-faq .faq-contact {
  order: 3;
  margin: 0;
  color: var(--h-muted);
}

#home-faq .faq-list {
  order: 4;
  min-width: 0;
}

#home-faq .faq-contact a {
  color: var(--h-amber-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

#home-faq .faq-contact a:hover {
  color: var(--h-amber-deeper);
}

/* ---------- Rows ---------- */
#home-faq .faq-item {
  border-top: 0;
  border-bottom: 1px solid var(--h-line);
  margin: 0;
  padding: 0;
  background: transparent;
}

#home-faq .faq-item:first-of-type {
  border-top: 1px solid var(--h-line);
}

#home-faq .faq-item > summary {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--h-s4);
  padding: 20px 0;
  margin: 0;
  cursor: pointer;
  list-style: none;
  font: 700 17px / 1.3 var(--h-font);
  color: var(--h-ink);
  border-radius: var(--h-r1);
}

#home-faq .faq-item > summary::-webkit-details-marker {
  display: none;
}

#home-faq .faq-item > summary::marker {
  content: "";
}

#home-faq .faq-index {
  flex: 0 0 auto;
  font: 500 var(--h-mono-md) / 1.4 var(--h-mono);
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-muted);
  min-width: 2.2em;
  transition: translate var(--h-t1) var(--h-ease);
}

#home-faq .faq-q {
  flex: 1 1 auto;
  min-width: 0;
}

/* The plus sign, amber-deep, at the right edge; rotates into a cross when open. */
#home-faq .faq-item > summary::after {
  content: "+";
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  width: 1em;
  text-align: center;
  font: 400 28px / 0.8 var(--h-font);
  color: var(--h-amber-deep);
  transition: rotate var(--h-t2) var(--h-ease);
}

#home-faq .faq-item[open] > summary::after {
  rotate: 45deg;
}

/* ---------- Answers ---------- */
#home-faq .faq-body {
  padding-left: 0;
}

#home-faq .faq-body p {
  margin: 0;
  padding: 0 0 20px;
  max-width: 64ch;
  font-size: 16px;
  line-height: var(--h-lh-body);
  color: var(--h-ink-2);
}

#home-faq .faq-body a {
  color: var(--h-amber-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

#home-faq .faq-body a:hover {
  color: var(--h-amber-deeper);
}

/* ---------- Progressive height animation ----------
   Only where the browser can interpolate to auto; elsewhere details opens instantly. */
@supports (interpolate-size: allow-keywords) {
  #home-faq .faq-item {
    interpolate-size: allow-keywords;
  }

  #home-faq .faq-item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size var(--h-t2) var(--h-ease),
      content-visibility var(--h-t2) allow-discrete;
  }

  #home-faq .faq-item[open]::details-content {
    block-size: auto;
  }
}

/* ---------- Hover (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  #home-faq .faq-item > summary:hover .faq-index {
    translate: 4px 0;
  }

  #home-faq .faq-item > summary:hover::after {
    color: var(--h-amber-deeper);
  }
}

/* ---------- 640px and up ---------- */
@media (min-width: 640px) {
  #home-faq .faq-item > summary {
    font-size: 18px;
  }

  #home-faq .faq-body p {
    font-size: var(--h-body);
  }
}

/* ---------- 900px and up: two columns, sticky head ---------- */
@media (min-width: 900px) {
  #home-faq .faq-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--h-gap);
  }

  #home-faq .faq-head {
    display: block;
    position: sticky;
    top: calc(var(--h-header) + 30px);
    z-index: var(--h-z-sticky);
    min-width: 0;
  }

  #home-faq .faq-head .h-eyebrow {
    margin-bottom: var(--h-s4);
  }

  #home-faq .faq-head .h-title {
    margin: 0 0 var(--h-s5);
  }

  #home-faq .faq-contact {
    order: 0;
  }

  #home-faq .faq-list {
    order: 0;
  }

  #home-faq .faq-item > summary {
    font-size: 19px;
  }

  #home-faq .faq-body p {
    font-size: var(--h-body);
  }
}

/* ---------- 1200px and up ---------- */
@media (min-width: 1200px) {
  #home-faq .faq-item > summary {
    gap: var(--h-s5);
  }

  #home-faq .faq-index {
    min-width: 2.6em;
  }
}

/* ---------- Reduced motion: instant open, no index slide ----------
   The shared stylesheet already removes every transition; these are the rest values. */
@media (prefers-reduced-motion: reduce) {
  #home-faq .faq-index,
  #home-faq .faq-item > summary::after,
  #home-faq .faq-item::details-content {
    transition: none;
  }

  #home-faq .faq-item > summary:hover .faq-index {
    translate: 0 0;
  }
}


/* ==== closing.css ==== */
/* home-closing: leaving through the corridor (closing call to action).
   Tokens used: --h-dark, --h-dark-2, --h-bone, --h-bone-a10, --h-dark-muted, --h-amber,
   --h-serif, --h-display, --h-mono, --h-display-1, --h-display-2, --h-lead, --h-mono, --h-mono-sm,
   --h-track, --h-r2, --h-shadow-dark, --h-ease, --h-t1, --h-lean, --h-room-pad, --h-gutter,
   --h-s2 ... --h-s7, --h-z-room-closing, --h-z-scene, --h-z-front, and the registered --fly / --px / --py.
   No hard-coded colours. Mobile-first: the single-wall ribbon is the base, the two walls arrive at 900px.
   This file is copied as-is by the build: never write a double curly brace in it. */

/* ---------- The room ---------- */

.closing {
  position: relative;
  z-index: var(--h-z-room-closing);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  align-content: center;
  row-gap: var(--h-s6);
  min-height: 90svh;
  padding-block: var(--h-room-pad);
  background-color: var(--h-dark);
  color: var(--h-bone);
  overflow-x: clip;
  perspective: 1100px;
  perspective-origin: 50% 46%;
}

/* ---------- Corridor scene (desktop; hidden until 900px) ----------
   Two nested elements, two inputs: the scene leans with the pointer (eased), the inner
   .closing-fly recedes with scroll (linear, no transition, so the scroll-mapped --fly is never
   smoothed into a lag). --fly inherits, so the rest value on the scene reaches the cards. */

.closing-scene {
  --fly: 0.4;                               /* plain rest value: near and far cards visible */
  display: none;
  position: absolute;
  inset: 0;
  z-index: var(--h-z-scene);
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
  transform:
    rotateX(calc(var(--py) * -3deg))
    rotateY(calc(var(--px) * var(--h-lean)));
  transition: transform var(--h-t1) var(--h-ease);
}

.closing-fly {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(calc(var(--fly) * 1500px));
}

.closing-wall {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.closing-wall[data-side="left"]  { --side: -1; }
.closing-wall[data-side="right"] { --side: 1; }

/* Depth (--i, 1 = nearest) and vertical offset (--y) per card, by position in the wall. In CSS,
   not inline style attributes, because the site's Content-Security-Policy blocks inline styles. */
.closing-wall > .closing-card:nth-child(1) { --i: 1; --y: -6vh; }
.closing-wall > .closing-card:nth-child(2) { --i: 2; --y: 5vh; }
.closing-wall > .closing-card:nth-child(3) { --i: 3; --y: -2vh; }
.closing-wall > .closing-card:nth-child(4) { --i: 4; --y: 4vh; }
.closing-wall > .closing-card:nth-child(5) { --i: 5; --y: -5vh; }
.closing-wall > .closing-card:nth-child(6) { --i: 6; --y: 3vh; }

.closing-card {
  position: absolute;
  left: calc(50% - 150px);
  top: calc(50% - 200px);
  width: 300px;
  height: 400px;
  border-radius: var(--h-r2);
  border: 1px solid var(--h-bone-a10);
  pointer-events: auto;
  transform-style: preserve-3d;
  transform:
    translate3d(calc(var(--side) * 44vw), var(--y), calc(var(--i) * -440px))
    rotateY(calc(var(--side) * 64deg));
  /* Fade as the card passes the camera plane; unitless so the JS fallback needs nothing extra. */
  opacity: clamp(0, calc((440 * var(--i) - 180 - 1500 * var(--fly)) / 260), 1);
}

.closing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--h-shadow-dark);
}

.closing-card-inner {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: var(--h-dark-2);
  transition: transform var(--h-t1) var(--h-ease);
}

.closing-card-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption strips: dark-2 ground, muted text, so they sit quietly behind the headline. */
.closing-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--h-s2);
  padding: var(--h-s2) var(--h-s3);
  background: var(--h-dark-2);
  color: var(--h-dark-muted);
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: var(--h-mono-sm);
  line-height: 1.4;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--h-t1) var(--h-ease);
}

.closing-caption > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Phone ribbon: one receding wall of eight cards ---------- */

.closing-ribbon {
  --fly: 0.4;                               /* same rest value as the scene */
  position: relative;
  z-index: var(--h-z-scene);
  width: 100%;
  height: 200px;
  perspective: 700px;
  perspective-origin: 12% 50%;
  pointer-events: none;
}

.closing-ribbon-track {
  position: absolute;
  top: 50%;
  left: var(--h-gutter);
  display: flex;
  gap: var(--h-s3);
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateY(-50%) translateX(calc((1 - var(--fly)) * -240px));
}

.closing-ribbon-card {
  position: relative;
  flex: 0 0 132px;
  width: 132px;
  height: 176px;
  border-radius: var(--h-r2);
  border: 1px solid var(--h-bone-a10);
  overflow: hidden;
  background: var(--h-dark-2);
  box-shadow: var(--h-shadow-dark);
  pointer-events: auto;
  transform: rotateY(-34deg);
}

.closing-ribbon-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ribbon captions: 10px with light tracking, and the look name may take two lines, so
   "Floating luxury" and "Sculptural interior" read in full inside a 132px card. */
.closing-ribbon-card .closing-caption {
  padding: var(--h-s1) var(--h-s2);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: normal;
}

.closing-ribbon-card .closing-caption > span {
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* ---------- Front: the call to action ---------- */

.closing > .wrap {
  position: relative;
  z-index: var(--h-z-front);
}

.closing-front {
  position: relative;
  z-index: var(--h-z-front);
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.closing-title {
  margin: 0;
  font-weight: 400;
}

.closing-lead-in {
  display: block;
  font-family: var(--h-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--h-display-1);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--h-amber);
}

.closing-word {
  display: block;
  margin-top: var(--h-s2);
  font-family: var(--h-display);
  font-weight: 900;
  font-size: clamp(64px, 18vw, 72px);       /* phones: 64 to 72px; the display-2 token arrives at 900px */
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--h-bone);
}

.closing-line {
  max-width: 46ch;
  margin: var(--h-s5) auto 0;
  font-size: var(--h-lead);
  line-height: 1.5;
  color: var(--h-dark-muted);
}

.closing-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--h-s3);
  margin-top: var(--h-s6);
}

.closing-actions .btn {
  width: 100%;
  text-align: center;
}

/* Honesty credit: in normal flow under the buttons on phones, pinned to the bottom of the room at 900px. */
.closing-credit {
  position: relative;
  z-index: var(--h-z-front);
  width: 100%;
  max-width: 900px;
  margin: 0;
  padding-inline: var(--h-gutter);
  box-sizing: border-box;
  text-align: center;
  font-family: var(--h-mono);
  font-weight: 500;
  font-size: var(--h-mono-md);
  line-height: 1.5;
  letter-spacing: var(--h-track);
  text-transform: uppercase;
  color: var(--h-dark-muted);
  overflow-wrap: anywhere;
}

/* ---------- Pointer effects (fine pointers only) ---------- */

@media (hover: hover) and (pointer: fine) {
  .closing-card:hover .closing-card-inner { transform: translateZ(10px); }
  .closing-card:hover .closing-caption { color: var(--h-bone); }
}

/* ---------- Scroll-driven recede: cards drift away into the dark as the room enters ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .closing-fly,
    .closing-ribbon {
      animation: closing-recede linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
  }
}

@keyframes closing-recede {
  from { --fly: 1; }
  to   { --fly: 0; }
}

/* ---------- Breakpoints ---------- */

@media (min-width: 640px) {
  .closing-actions {
    max-width: 420px;
    margin-inline: auto;
  }
}

@media (min-width: 900px) {
  .closing-scene { display: block; }
  .closing-ribbon { display: none; }

  /* A soft dark haze behind the call to action: the far cards gather at the centre of the
     corridor, and muted text across a photo is unreadable. Paints above the scene, below the text. */
  .closing-front::before {
    content: "";
    position: absolute;
    inset: -48px -96px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 58% 60% at 50% 52%,
      color-mix(in srgb, var(--h-dark) 94%, transparent) 0%,
      color-mix(in srgb, var(--h-dark) 78%, transparent) 48%,
      color-mix(in srgb, var(--h-dark) 35%, transparent) 76%,
      transparent 100%);
  }

  .closing-word {
    margin-top: var(--h-s3);
    font-size: var(--h-display-2);
  }

  .closing-actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    max-width: none;
  }

  .closing-actions .btn { width: auto; }

  .closing-credit {
    position: absolute;
    left: 50%;
    bottom: var(--h-s5);
    width: min(900px, 100% - 2 * var(--h-gutter));
    padding-inline: 0;
    transform: translateX(-50%);
  }
}

/* ---------- Reduced motion: a static perspective composition at --fly 0.4, nothing moves ---------- */

@media (prefers-reduced-motion: reduce) {
  .closing-scene,
  .closing-fly,
  .closing-ribbon {
    --fly: 0.4;
    animation: none;
    transition: none;
    will-change: auto;
  }
  .closing-ribbon-track { will-change: auto; }
  .closing-card-inner,
  .closing-caption { transition: none; }
  .closing-card:hover .closing-card-inner { transform: none; }
}


/* ==== subscribe.css ==== */
/* The first-order offer dialog. Uses the native <dialog> so the browser handles the focus trap,
   the Escape key, and the backdrop. */

.offer {
  width: min(31rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: var(--h-radius, 4px);
  background: var(--h-paper, #f1f0ec);
  color: var(--h-ink, #111014);
  box-shadow: 0 2.4rem 5rem rgba(0, 0, 0, 0.3);
}

.offer::backdrop {
  background: rgba(10, 10, 12, 0.62);
}

.offer-close-form {
  margin: 0;
}

.offer-close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}

.offer-close:hover,
.offer-close:focus-visible {
  opacity: 1;
}

.offer-body {
  padding: var(--h-s6, 2rem) var(--h-s5, 1.5rem) var(--h-s5, 1.5rem);
}

.offer-eyebrow {
  margin: 0 0 var(--h-s2, 0.5rem);
  font-family: var(--h-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.66;
}

.offer-title {
  margin: 0 0 var(--h-s3, 0.75rem);
  font-family: var(--h-display, Georgia, serif);
  font-size: clamp(1.6rem, 4.6vw, 2.1rem);
  line-height: 1.1;
  font-weight: 400;
}

.offer-text {
  margin: 0 0 var(--h-s4, 1rem);
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.82;
}

.offer-form {
  display: grid;
  gap: var(--h-s2, 0.5rem);
}

.offer-label {
  font-size: 0.82rem;
  opacity: 0.75;
}

.offer-input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(17, 16, 20, 0.28);
  border-radius: 3px;
  background: #fff;
  color: inherit;
  font: inherit;
}

.offer-input:focus-visible {
  outline: 2px solid var(--h-accent, #2f45ff);
  outline-offset: 1px;
}

/* Off-screen rather than display:none, so bots that skip hidden inputs still fill it. */
.offer-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.offer-submit,
.offer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  margin-top: var(--h-s2, 0.5rem);
  padding: 0 1.1rem;
  border: 0;
  border-radius: 3px;
  background: var(--h-ink, #111014);
  color: var(--h-paper, #f1f0ec);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.offer-submit[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

.offer-note {
  margin: var(--h-s2, 0.5rem) 0 0;
  font-size: 0.78rem;
  opacity: 0.62;
}

.offer-error {
  margin: var(--h-s2, 0.5rem) 0 0;
  font-size: 0.85rem;
  color: #a3241c;
}

.offer-code-row {
  display: flex;
  align-items: center;
  gap: var(--h-s3, 0.75rem);
  margin: 0 0 var(--h-s4, 1rem);
}

.offer-code {
  padding: 0.5rem 0.9rem;
  border: 1px dashed rgba(17, 16, 20, 0.4);
  border-radius: 3px;
  font-family: var(--h-mono, ui-monospace, monospace);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
}

.offer-copy {
  min-height: 2.5rem;
  padding: 0 0.8rem;
  border: 1px solid rgba(17, 16, 20, 0.28);
  border-radius: 3px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}