/* ============================================================================
   USA FAST LUXURY WATCH — The Certificate Folio
   Tokens are taken verbatim from the project design system (design-system.html
   / DESIGN.md). Nothing here introduces a fourth hue: forest ink, warm ivory,
   antique brass, and nothing else.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  --font-sans: "Urbanist", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Scheherazade New", Georgia, "Times New Roman", serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --background: #faf7ef;
  --foreground: #16211c;
  --card: #fdfbf5;
  --card-foreground: #16211c;
  --primary: #17362b;
  --primary-foreground: #faf7ef;
  --secondary: #efe9db;
  --secondary-foreground: #16211c;
  --muted: #f1ece0;
  --muted-foreground: #5c564a;
  --accent: #b9955c;
  --accent-foreground: #1d1710;
  --destructive: #9a3b2e;
  --border: #e3ddc9;
  --input: #d5cbaf;
  --ring: #17362b;
  --success: #2c7a52;

  --primary-700: #17362b;
  --primary-800: #102821;
  --primary-900: #0b1d18;

  --radius: 0.1875rem;
  --radius-sm: calc(var(--radius) * 0.75);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 2);
  --radius-xl: calc(var(--radius) * 3);
  --radius-full: 9999px;

  /* Type ramp — six steps, nothing off-ramp anywhere in this file.
     --t-ref is the single deliberate addition to DESIGN.md's four documented
     sizes: 11px is where Space Mono at 0.13em tracking sits as a reference
     line without competing with the 12px label step. */
  --t-ref: 0.6875rem;
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lead: clamp(1rem, 0.96rem + 0.3vw, 1.125rem);
  --t-title: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --t-quote: clamp(1.5rem, 1.1rem + 1.7vw, 2rem);
  --t-headline: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --t-display: clamp(2.375rem, 1.4rem + 4.2vw, 3.75rem);
  /* The cover plate's own display step. Measured against the plate, not
     the viewport: the longest headline line in any of the three languages
     needs 9.81x its font-size to stay unbroken (Spanish's "Estándar por
     Excelencia."), so the ceiling is 9.7% of the plate's measure (1/9.81 is
     10.19%, and 9.7 leaves room for the fallback face). Only a container may
     use it. The floor binds at the narrowest real plate (280px, a 320px
     phone after its gutter): 1.75rem is the measured minimum that still
     fits "Estándar por Excelencia." there. */
  --t-display-plate: clamp(1.75rem, 9.7cqw, 3.125rem);

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --shell: 1140px;
  --shell-narrow: 760px;
  --section-top: clamp(4.5rem, 9vw, 8.5rem);
  --section-bottom: clamp(3.5rem, 7vw, 6.5rem);

  --masthead-h: 84px;

  /* Plate surfaces */
  --plate-bg: var(--card);
  --plate-border: color-mix(in srgb, var(--foreground) 14%, transparent);
  --plate-inner: color-mix(in srgb, var(--foreground) 9%, transparent);
  --plate-blur: none;

  /* THE STAGE — a deliberate design-system addition, not drift.
     The photograph band is the one place the page keeps a local palette,
     and it now has two: the photograph was shot twice, once on forest and
     once on paper, so the stage carries whichever cut the theme is showing.
     Everything laid on the picture — the type, the hairlines, the mark, the
     engraving, the header glass — reads the stage and nothing else, so it
     all inverts with the photograph and no rule has to know which one it is.
     Every literal the stage needs lives here and nowhere else in this file,
     and each is taken verbatim from the theme it belongs to: three ground
     depths, that theme's ink and its counter, the colour the guilloché is
     cut in, the bloom under it, and the triple the veil is mixed from.

     --stage-shadow is deliberately NOT part of the pair. A shadow is dark in
     both themes; the drawer and the plates still mix their depth from it. */
  --stage-ground: #f1ece0;
  --stage-ground-lit: #fdfbf5;
  --stage-ground-deep: #efe9db;
  --stage-ink: #16211c;
  --stage-ink-on: #faf7ef;
  --stage-ink-dim: #5c564a;
  --stage-rings: 22 33 28;
  /* The bloom is the field's light source, not a tint: it has to LIFT the
     ground in both themes. A warm stone here read as a stain on paper — the
     one place inverting a value instead of its role went wrong. On paper the
     pool of light is the brightest paper there is. */
  --stage-bloom: 253 251 245;
  --stage-veil: 250 247 239;
  --stage-shadow: 8 16 13;

  /* The upright veil, stop by stop from the floor of the frame to its head.
     Both themes share the five positions and differ only in these numbers,
     because the same wash does opposite work: over the forest cut it reads as
     depth, over the paper cut it drains the dial. So the paper veil keeps its
     hem — the facts rail is protected by --veil-floor and --veil-hem, the two
     strongest — and then gets out of the middle of the frame, where the watch
     is. At the dial the paper veil now sits near 0.10 where it sat near 0.37. */
  --veil-floor: 0.92;
  --veil-hem: 0.86;
  --veil-mid: 0.10;
  --veil-clear: 0.02;
  --veil-head: 0.14;

  /* The left-weighted veil, which is the one that can tell the text side of
     the frame from the watch side. It carries the paper theme's protection,
     so the upright veil above is free to leave the dial alone. Both fade to
     nothing by 62%, well left of the watch, in either theme. */
  --veil-side-0: 0.86;
  --veil-side-1: 0.74;
  --veil-side-2: 0.34;
  --stage-line: rgb(22 33 28 / 0.16);

  --tick-major: color-mix(in srgb, var(--foreground) 34%, transparent);
  --tick-minor: color-mix(in srgb, var(--foreground) 16%, transparent);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --background: #0f1e19;
  --foreground: #f4efe3;
  --card: #17302a;
  --card-foreground: #f4efe3;
  --primary: #f4efe3;
  --primary-foreground: #14261f;
  --secondary: #1f3a32;
  --secondary-foreground: #f4efe3;
  --muted: #1c362e;
  --muted-foreground: #a9b5ac;
  --accent: #c9a667;
  --accent-foreground: #1d1710;
  --destructive: #e08668;
  --border: #2a473d;
  --input: #35544a;
  --ring: #f4efe3;
  --success: #4fae7c;

  --plate-bg: color-mix(in srgb, #17302a 90%, transparent);
  --plate-border: color-mix(in srgb, var(--foreground) 20%, transparent);
  --plate-inner: color-mix(in srgb, var(--foreground) 12%, transparent);
  --plate-blur: blur(18px) saturate(1.08);

  /* The stage's forest cut — the same six roles, the same order, the other
     photograph. --stage-shadow is absent on purpose: it does not invert. */
  --stage-ground: #0d1a16;
  --stage-ground-lit: #16332a;
  --stage-ground-deep: #091310;
  --stage-ink: #f4efe3;
  --stage-ink-on: #14261f;
  --stage-ink-dim: #a9b5ac;
  --stage-rings: 244 239 227;
  --stage-bloom: 92 133 113;
  --stage-veil: 8 16 13;
  --stage-line: rgb(244 239 227 / 0.18);
  --veil-floor: 0.92;
  --veil-hem: 0.788;
  --veil-mid: 0.514;
  --veil-clear: 0.161;
  --veil-head: 0.5;
  --veil-side-0: 0.78;
  --veil-side-1: 0.62;
  --veil-side-2: 0.2;

  --tick-major: color-mix(in srgb, var(--foreground) 38%, transparent);
  --tick-minor: color-mix(in srgb, var(--foreground) 18%, transparent);

  color-scheme: dark;
}

/* No-JS fallback: honour the system signal when nothing was stored. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #0f1e19;
    --foreground: #f4efe3;
    --card: #17302a;
    --card-foreground: #f4efe3;
    --primary: #f4efe3;
    --primary-foreground: #14261f;
    --secondary: #1f3a32;
    --secondary-foreground: #f4efe3;
    --muted: #1c362e;
    --muted-foreground: #a9b5ac;
    --accent: #c9a667;
    --destructive: #e08668;
    --border: #2a473d;
    --input: #35544a;
    --ring: #f4efe3;
    --success: #4fae7c;
    --plate-bg: color-mix(in srgb, #17302a 90%, transparent);
    --plate-border: color-mix(in srgb, var(--foreground) 20%, transparent);
    --plate-inner: color-mix(in srgb, var(--foreground) 12%, transparent);
    --plate-blur: blur(18px) saturate(1.08);
    --stage-ground: #0d1a16;
    --stage-ground-lit: #16332a;
    --stage-ground-deep: #091310;
    --stage-ink: #f4efe3;
    --stage-ink-on: #14261f;
    --stage-ink-dim: #a9b5ac;
    --stage-rings: 244 239 227;
    --stage-bloom: 92 133 113;
    --stage-veil: 8 16 13;
    --stage-line: rgb(244 239 227 / 0.18);
    --veil-floor: 0.92;
    --veil-hem: 0.788;
    --veil-mid: 0.514;
    --veil-clear: 0.161;
    --veil-head: 0.5;
    --veil-side-0: 0.78;
    --veil-side-1: 0.62;
    --veil-side-2: 0.2;
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------ 2. BASE/RESET */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ------------------------------------------- 3. BROWSER-OWNED SURFACES
   The parts nobody draws still carry the design. */
::selection {
  background: var(--primary);
  color: var(--primary-foreground);
}

:root { scrollbar-color: color-mix(in srgb, var(--foreground) 26%, transparent) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: color-mix(in srgb, var(--foreground) 5%, transparent); }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--foreground) 24%, transparent);
  border: 3px solid var(--background);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--foreground) 40%, transparent); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

input, textarea, select { caret-color: var(--ring); accent-color: var(--primary); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.65rem 1rem;
  border-radius: var(--radius-lg);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 1rem; }

/* ---------------------------------------------------------- 4. TYPOGRAPHY */
.display {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.display > span { display: block; text-wrap: balance; }

.headline {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-headline);
  line-height: 1.14;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

.title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-title);
  line-height: 1.25;
}

.body {
  font-size: var(--t-base);
  line-height: 1.68;
  color: var(--muted-foreground);
  max-width: 68ch;
}
.body--lead { font-size: var(--t-lead); color: var(--foreground); }

.lede {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--muted-foreground);
  max-width: 54ch;
}

/* The One Mono Rule: references and prices, nothing else. */
.ref, .mono, option.mono {
  font-family: var(--font-mono);
  font-size: var(--t-ref);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.ref--muted { font-weight: 400; color: var(--muted-foreground); }
.letterhead > * { min-width: 0; }
.letterhead .ref--muted { white-space: normal; text-align: end; }

/* -------------------------------------------------------------- 5. LAYOUT */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }

.doc {
  padding-top: var(--section-top);
  padding-bottom: var(--section-bottom);
}
.doc--slip { padding-bottom: clamp(5rem, 9vw, 8rem); }

/* ------------------------------------------------ 6. THE CHAPTER-RING RULE
   A strip of dial ticks, derived from the mark's own chapter ring. It is the
   page's only divider — no plain hairlines between sections. */
.tickrule {
  height: 13px;
  background-image:
    repeating-linear-gradient(90deg, var(--tick-major) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--tick-minor) 0 1px, transparent 1px 8px);
  background-size: 100% 13px, 100% 6px;
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ------------------------------------------------------------ 7. LETTERHEAD
   Each document opens on its own header band: reference on the left, a fact
   about the document on the right, a rule between them. */
.letterhead {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.letterhead__rule {
  flex: 1 1 auto;
  height: 7px;
  min-width: 1.5rem;
  background-image: repeating-linear-gradient(90deg, var(--tick-minor) 0 1px, transparent 1px 8px);
  background-repeat: repeat-x;
}

/* --------------------------------------------------------------- 8. BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
}
.btn--lg { min-height: 52px; padding: 0.9rem 1.75rem; font-size: var(--t-base); width: 100%; }
.btn--primary { background: var(--primary); color: var(--primary-foreground); }
.btn--primary:hover { background: color-mix(in srgb, var(--primary) 86%, var(--foreground)); }
.btn--outline { background: transparent; color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 24%, transparent); }
.btn--outline:hover { border-color: var(--foreground); background: color-mix(in srgb, var(--foreground) 5%, transparent); }
.btn--ghost { background: transparent; color: var(--muted-foreground); font-weight: 500; }
.btn--ghost:hover { color: var(--foreground); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn__arrow { width: 16px; height: 16px; flex: none; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn__wa { width: 19px; height: 19px; flex: none; }

/* --------------------------------------------------------- 9. THE SEAL/MARK */
.seal { width: auto; height: 100%; }
.seal--ivory { display: none; }
:root[data-theme="dark"] .seal--ink { display: none; }
:root[data-theme="dark"] .seal--ivory { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seal--ink { display: none; }
  :root:not([data-theme="light"]) .seal--ivory { display: block; }
}

.brandmark { display: block; }
.brandmark__img { height: 50px; width: auto; }
.brandmark__img--ivory { display: none; }
:root[data-theme="dark"] .brandmark__img--ink { display: none; }
:root[data-theme="dark"] .brandmark__img--ivory { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brandmark__img--ink { display: none; }
  :root:not([data-theme="light"]) .brandmark__img--ivory { display: block; }
}
/* Nothing to override over the photograph any more: the stage inverts with the
   theme, so the cut the theme already chose is the cut the picture wants. */

/* ------------------------------------------------------------ 10. MASTHEAD */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--masthead-h);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.masthead[data-atop="false"] {
  background: color-mix(in srgb, var(--background) 93%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--border);
}
/* Atop the hero the header still needs to stay legible over whatever
   scrolls under it — the photograph, the guilloché field, or the ivory
   plate itself once it slides up underneath. Same glass language as
   .plate--cover, tinted from the stage's own shadow token. */
.masthead[data-atop="true"] {
  color: var(--stage-ink);
  background: rgb(var(--stage-veil) / 0.5);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

.masthead__inner {
  height: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-inline-start: auto;
  font-size: var(--t-sm);
  font-weight: 500;
}
.masthead__nav a {
  position: relative;
  padding-block: 0.35rem;
  opacity: 0.78;
  transition: opacity 0.2s ease;
}
.masthead__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.masthead__nav a:hover { opacity: 1; }
.masthead__nav a:hover::after { transform: scaleX(1); }

.masthead__tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-inline-start: 0;
}

/* Engraved segmented language plate */
.langswitch {
  display: flex;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.langswitch button {
  padding: 0.4rem 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  transition: background-color 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}
.langswitch button + button { border-inline-start: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.langswitch button:hover { opacity: 1; }
.langswitch button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
  opacity: 1;
}
.masthead[data-atop="true"] .langswitch button[aria-pressed="true"] {
  background: var(--stage-ink);
  color: var(--stage-ink-on);
}

/* Day-night complication */
.complication {
  position: relative;
  width: 54px;
  height: 28px;
  flex: none;
}
.complication__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.complication__aperture {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, currentColor 7%, transparent);
  position: relative;
  overflow: hidden;
}
.complication__disc {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, currentColor 12%, transparent);
  transition: transform 0.46s cubic-bezier(0.16, 1, 0.3, 1);
}
.complication__disc svg { width: 13px; height: 13px; grid-area: 1 / 1; transition: opacity 0.3s ease, transform 0.46s cubic-bezier(0.16, 1, 0.3, 1); }
.complication__moon { opacity: 0; transform: rotate(-60deg) scale(0.6); }
.complication[aria-pressed="true"] .complication__disc { transform: translateX(26px); }
.complication[aria-pressed="true"] .complication__sun { opacity: 0; transform: rotate(60deg) scale(0.6); }
.complication[aria-pressed="true"] .complication__moon { opacity: 1; transform: none; }
.complication:hover .complication__aperture { border-color: color-mix(in srgb, currentColor 48%, transparent); }

/* ------------------------------------------------------- 10b. MOBILE MENU
   Hidden above 900px by default (see .masthead__nav's own breakpoint); the
   drawer holds exactly what the inline header holds at desktop width —
   navigation and language — reusing DOC. 01–04 as the wayfinding numbers
   already printed on each section's own letterhead. */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
}
.menu-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.menu-toggle__bars { position: relative; width: 19px; height: 13px; }
.menu-toggle__bars span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, top 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6px; }
.menu-toggle__bars span:nth-child(3) { top: 12px; }
#menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
#menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
#menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.drawer-backdrop {
  position: fixed;
  inset: var(--masthead-h) 0 0 0;
  z-index: 58;
  background: rgb(var(--stage-shadow) / 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* A floating chrome layer, not a resting card — the Hairline-Not-Shadow Rule's
   own carve-out for a popover applies (DESIGN.md, Elevation & Depth). */
.drawer {
  position: fixed;
  top: var(--masthead-h);
  left: 0;
  right: 0;
  z-index: 59;
  background: var(--card);
  color: var(--card-foreground);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 48px -26px rgb(var(--stage-shadow) / 0.5);
  max-height: calc(100svh - var(--masthead-h));
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer.is-open { opacity: 1; transform: none; pointer-events: auto; }

.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid var(--border);
  font-size: var(--t-lead);
  font-weight: 500;
  transition: background-color 0.2s ease;
}
.drawer__nav a .ref { color: var(--muted-foreground); }
.drawer__nav a:hover, .drawer__nav a:active { background: color-mix(in srgb, var(--foreground) 4%, transparent); }

.drawer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter) 1.35rem;
}
.drawer__label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* ---------------------------------------------------------------- 11. HERO */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--masthead-h) + clamp(2rem, 6vw, 5rem));
  overflow: hidden;
  color: var(--stage-ink);
}

/* Guilloché field — the dial's own engine-turning at architectural scale.
   It carries the viewport on its own until the photograph lands. */
.hero__ground {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: var(--stage-ground);
  background-image:
    repeating-radial-gradient(circle at 16% 52%, transparent 0 6px, rgb(var(--stage-rings) / 0.055) 6px 7px),
    repeating-radial-gradient(circle at 16% 52%, transparent 0 47px, rgb(var(--stage-rings) / 0.07) 47px 49px),
    radial-gradient(120% 95% at 16% 52%, rgb(var(--stage-bloom) / 0.4) 0%, transparent 62%),
    linear-gradient(160deg, var(--stage-ground-lit) 0%, var(--stage-ground) 55%, var(--stage-ground-deep) 100%);
}
.hero__ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 110% at 50% 40%, transparent 30%, rgb(var(--stage-veil) / 0.72) 100%);
}

.hero picture { display: contents; }
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.1s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.05);
}
.hero__photo.is-loaded { opacity: 1; transform: scale(1); }


.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      rgb(var(--stage-veil) / var(--veil-floor)) 0%,
      rgb(var(--stage-veil) / var(--veil-hem)) 14%,
      rgb(var(--stage-veil) / var(--veil-mid)) 40%,
      rgb(var(--stage-veil) / var(--veil-clear)) 68%,
      rgb(var(--stage-veil) / var(--veil-head)) 100%);
}

/* Where the plate is gone the words sit on the photograph itself, so the
   photograph has to give them a ground. A left-weighted veil, fully dissolved
   before it reaches the watch: no edge, no corner, nothing that reads as a
   panel — only the left of the frame settling into shadow. */
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .hero__scrim {
    background:
      linear-gradient(to right,
        rgb(var(--stage-veil) / var(--veil-side-0)) 0%,
        rgb(var(--stage-veil) / var(--veil-side-1)) 26%,
        rgb(var(--stage-veil) / var(--veil-side-2)) 46%,
        transparent 62%),
      linear-gradient(to top,
      rgb(var(--stage-veil) / var(--veil-floor)) 0%,
      rgb(var(--stage-veil) / var(--veil-hem)) 14%,
      rgb(var(--stage-veil) / var(--veil-mid)) 40%,
      rgb(var(--stage-veil) / var(--veil-clear)) 68%,
      rgb(var(--stage-veil) / var(--veil-head)) 100%);
  }
}

/* On a phone the words run the full width, so there is no left half for them to
   hide in and no veil strong enough to save the reading without burying the
   watch — bare, the display measured 1.00:1 over the polished steel.

   So the phone stops sharing one field between picture and type and splits
   them: the photograph takes a band at the top and keeps its light, then
   dissolves — mask on the image, gradient on the scrim, meeting in the same
   place — into the guilloché ground the words are set on. One height drives
   the band and the hero's top padding, so the two can never disagree. */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .hero {
    /* The band has to hold the whole watch. The photograph is 1.2:1 and its
       steel runs from 14% to 73% of the frame's height, so a band wider than
       about 1.65:1 cuts the case at the top — measured on the file, not
       estimated. 61vw is that ratio expressed as a floor: on a phone 42svh is
       always the larger term and nothing changes, and on a portrait tablet the
       band grows with the width instead of stopping at a phone's height. */
    --hero-photo-h: clamp(210px, max(42svh, 61vw), 60svh);
    /* masthead + less than the band: the band begins where the navigation
       ends, never behind it, and the letterhead begins inside the dissolve
       rather than after it. Picture and type meet; they do not stack. */
    padding-top: calc(var(--masthead-h) + var(--hero-photo-h) * 0.82);
  }
  .hero__photo {
    inset: var(--masthead-h) 0 auto 0;
    height: var(--hero-photo-h);
    /* the phone crop is already composed around the watch */
    object-position: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 99%);
  }
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        rgb(var(--stage-veil) / 0.3) 0%,
        rgb(var(--stage-veil) / 0.05) 12%,
        rgb(var(--stage-veil) / 0.05) 36%,
        rgb(var(--stage-veil) / 0.55) 48%,
        rgb(var(--stage-veil) / 0.9) 58%,
        rgb(var(--stage-veil) / 0.92) 100%);
  }
  /* the words sit directly under the picture, not at the floor */
  .hero__stage { margin-block: 0 auto; }
}

/* A short phone has no height to spend on a picture band: at 320x700 the band
   at 42svh pushed the call to action below the fold. The picture yields first,
   because a hero whose action you cannot see has failed at being a hero. */
@media (max-width: 900px) and (max-height: 730px) {
  /* The band shrinks, but not past the ratio that holds the whole case: 61vw
     survives here too, and the fold has room for it. */
  .hero { --hero-photo-h: clamp(165px, max(31svh, 61vw), 265px); }
}

/* Below ~660px of viewport height the type alone fills the screen: any band at
   all puts the call to action under the fold, and a band thin enough to fit
   shows a slice of a watch, which is worse than no watch. So the picture steps
   out entirely and the guilloché ground carries the hero — the same finished
   field the page falls back to when no photograph has been supplied. */
@media (max-width: 900px) and (max-height: 660px) {
  .hero {
    --hero-photo-h: 0px;
    padding-top: calc(var(--masthead-h) + clamp(1rem, 4vw, 2rem));
  }
  .hero__photo { display: none; }
  /* With the picture gone the scrim has nothing to protect, and its clear
     window at the top now falls straight on the guilloché's lit quarter —
     where the lede measured 4.32:1. An even veil instead of a split one. */
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        rgb(var(--stage-veil) / 0.42) 0%,
        rgb(var(--stage-veil) / 0.38) 42%,
        rgb(var(--stage-veil) / 0.66) 78%,
        rgb(var(--stage-veil) / 0.88) 100%);
  }
}

.hero__stage {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.hero__facts {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__facts .tickrule {
  --tick-major: rgb(var(--stage-rings) / 0.42);
  --tick-minor: rgb(var(--stage-rings) / 0.2);
  margin-bottom: 1.1rem;
}
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem clamp(1rem, 3vw, 2.5rem);
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  color: var(--stage-ink-dim);
}
.facts li { display: flex; align-items: baseline; gap: 0.55rem; }
.facts li::before {
  content: "";
  width: 1px;
  height: 11px;
  flex: none;
  background: var(--stage-line);
  transform: translateY(1px);
}

/* ---------------------------------------------------------- 12. THE PLATE */
.plate {
  position: relative;
  background: var(--plate-bg);
  backdrop-filter: var(--plate-blur);
  -webkit-backdrop-filter: var(--plate-blur);
  border: 1px solid var(--plate-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.4vw, 3rem);
  color: var(--card-foreground);
}
/* The engraved inner rule — a certificate's second border. */
.plate__rule {
  position: absolute;
  inset: 7px;
  border: 1px solid var(--plate-inner);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.plate__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem);
  border-bottom: 1px solid var(--plate-inner);
}
.plate__seal { display: block; height: 44px; opacity: 0.85; }

.plate--cover {
  /* The plate measures its own type. `Estándar de Excelencia.` is the
     longest line in any of the three languages; see --t-display-plate for
     its ratio and the ceiling it sets. Tying the display to the plate
     instead of the viewport means the headline can never outgrow the card
     that holds it, at any width, in any language — and the card stops
     eating the photograph as the window narrows. */
  container-type: inline-size;

  /* There is no card. The photograph is the ground, so the component keeps its
     markup and its container role and swaps only its local palette: every
     token inside resolves to the stage. The stage is the theme's own cut of
     the photograph, so this resolves twice over — forest ink on the paper
     picture, ivory on the forest one — without one value written here. */
  --plate-bg: transparent;
  --plate-blur: none;
  --card-foreground: var(--stage-ink);
  --foreground: var(--stage-ink);
  --muted-foreground: var(--stage-ink-dim);
  --primary: var(--stage-ink);
  --primary-foreground: var(--stage-ink-on);
  --plate-inner: var(--stage-line);
  padding: 0;
  border-color: transparent;
  box-shadow: none;
}
.plate--cover .plate__rule { display: none; }

.plate--cover .display {
  font-size: var(--t-display-plate);
  margin-bottom: 1.1rem;
}

/* With no plate to anchor them the words are the only object in the frame, and
   the frame's centre is where they belong. An auto block margin lets the flex
   column absorb the free space, leaving the facts rail at the floor. */
.hero__stage { margin-block: auto; }

/* The type column ends where the watch begins. `cover` magnifies a photograph
   by 1.5/aspect in any frame narrower than its own 3:2, which walks the watch
   leftward as the window tightens — so the column cannot be a fixed width.
   Measured across fourteen frames from 901x720 to 2560x1440, the first pixel
   bright enough to break 4.5:1 never appears left of 50vw + 11vh. Cap the
   column there, subtract its own offset and a clear rem, and the words can
   never land on polished steel at any window shape, with no card to hide
   behind. The headline follows on its own: it is measured in cqw against this
   very box, so a narrower column sets smaller type rather than wrapping. */
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .plate--cover {
    max-width: clamp(
      300px,
      calc(50vw + 11vh - max(0px, (100vw - var(--shell)) / 2) - var(--gutter) - 1rem),
      520px);
  }
}

/* In a portrait frame the photograph is overhead, not beside: nothing crowds
   the column and it only wants a readable measure. */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .plate--cover { max-width: 560px; }
}

.plate--cover .lede { margin-bottom: clamp(1.6rem, 3vw, 2.25rem); }

.plate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
}
.attest {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-sm);
  color: var(--muted-foreground);
}
.attest__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  flex: none;
}

/* ------------------------------------------------ 13. DOC 01 — THE MANIFEST */
.doc__intro { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.doc__intro .headline { margin-bottom: 1rem; }
.doc__foot { margin-top: clamp(2rem, 4vw, 3rem); display: flex; justify-content: center; }

.manifest {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.15rem);
}
.frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 11%, transparent);
}
.frame[data-frame="1"] {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.frame:not(.is-empty) img { opacity: 1; }
.frame:not(.is-empty):hover img { transform: scale(1.035); }

/* Placeholder state — a guilloché plate, never a stock photograph. */
.frame__pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.75rem;
  justify-items: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background-image:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 5px, color-mix(in srgb, var(--foreground) 5%, transparent) 5px 6px),
    repeating-linear-gradient(45deg, transparent 0 11px, color-mix(in srgb, var(--foreground) 3%, transparent) 11px 12px);
  opacity: 1;
  transition: opacity 0.4s ease;
}
.frame__pending::before {
  content: "";
  width: 26px;
  height: 46px;
  background: currentColor;
  opacity: 0.5;
  -webkit-mask: url("../img/brand/icon-light.png") center / contain no-repeat;
  mask: url("../img/brand/icon-light.png") center / contain no-repeat;
}
.frame:not(.is-empty) .frame__pending { opacity: 0; pointer-events: none; }

/* -------------------------------------------------- 14. DOC 02 — THE STORY
   Three leaves of one document, turned one at a time while the founder's plate
   is held. The base state below is a plain stacked spread — every word visible,
   nothing pinned. The pin and the turn are added only by `has-story`, which JS
   sets above the md breakpoint and never under reduced motion. */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.story__col { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-content: center; }
.story__beats { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.story__beat { display: grid; gap: 1.35rem; align-content: center; }
/* Title and story read as one block: the heading sits closer to its own text
   than the paragraphs sit to each other. */
.story__beat .headline { margin-bottom: clamp(0.25rem, 1vw, 0.6rem); }
.story__index { display: none; }

/* The founder's plate — the system's own photography frame, credited beneath.
   A person's plate and an object's plate carry the same frame on purpose; the
   credit line is what tells them apart. Square, not 4:5: it is the held column's
   anchor, and a 4:5 plate is taller than the story it has to outlast. */
.portrait .frame { aspect-ratio: 1 / 1; }
.portrait__credit {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.portrait__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-lead);
  line-height: 1.25;
  text-wrap: balance;
}
.portrait__role {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* The customer's own question, set as a marginal annotation on the document. */
.marginal {
  position: relative;
  padding-inline-start: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 26rem;
}
.marginal__mark {
  position: absolute;
  inset-inline-start: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 7px;
  background-image: repeating-linear-gradient(180deg, var(--tick-minor) 0 1px, transparent 1px 8px);
}
.marginal blockquote {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-quote);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--foreground);
  text-wrap: balance;
}
.marginal blockquote::before { content: "\201C"; }
.marginal blockquote::after { content: "\201D"; }
.marginal figcaption {
  margin-top: 0.85rem;
  font-size: var(--t-sm);
  color: var(--muted-foreground);
}

/* --- Enhanced: the held plate and the turning leaves ---------------------- */
@media (min-width: 901px) {
  html.has-story .story { position: relative; height: 210vh; }
  html.has-story .story__stage {
    position: sticky;
    top: var(--masthead-h);
    height: calc(100svh - var(--masthead-h));
    display: flex;
    align-items: center;
  }
  /* The plate shrinks on short screens so the whole stage always fits. */
  html.has-story .portrait { width: min(100%, 52svh); margin-inline: auto; }

  html.has-story .story__beats { gap: 0; }
  html.has-story .story__beat {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0;
    transform: translateY(26px);
    filter: blur(4px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  }
  html.has-story .story__beat.is-active {
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
  }
  /* A leaf already turned leaves upward, the way the scroll took it. */
  html.has-story .story__beat.is-past { transform: translateY(-26px); }

  /* Chapter-ring dashes laid on their side, ranged right under the text.
     The showing leaf's dash runs full length in foreground ink. */
  html.has-story .story__index {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    height: 1px;
  }
  /* Scaled, not resized: animating width would lay the row out every frame. */
  html.has-story .story__index span {
    width: 32px;
    height: 1px;
    background: var(--tick-major);
    transform: scaleX(0.42);
    transform-origin: right;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.42s ease;
  }
  html.has-story .story__index span.is-on { transform: none; background: var(--foreground); }
}

/* ----------------------------------------------- 15. DOC 03 — THE REGISTER */
.doc--register .headline { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.register { border-top: 1px solid var(--border); }

.entry { border-bottom: 1px solid var(--border); }
.entry summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-inline: -0.85rem;
  padding: 1.35rem 0.85rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.4;
  transition: background-color 0.2s ease;
}
.entry summary::-webkit-details-marker { display: none; }
.entry summary:hover { background: color-mix(in srgb, var(--foreground) 4%, transparent); }
.entry summary:hover .entry__mark::before,
.entry summary:hover .entry__mark::after { opacity: 1; }

.entry__mark {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
.entry__mark::before,
.entry__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.entry__mark::after { transform: rotate(90deg); transition: opacity 0.3s ease; }
.entry[open] .entry__mark { transform: rotate(180deg); }
.entry[open] .entry__mark::after { opacity: 0; }

.entry__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.entry[open] .entry__body { grid-template-rows: 1fr; }
.entry__body > p {
  overflow: hidden;
  min-height: 0;
  color: var(--muted-foreground);
  max-width: 64ch;
  line-height: 1.68;
}
/* The padding rides inside the clipped grid row, so it opens with the row
   instead of being animated itself. */
.entry__body > p { padding-bottom: 1.5rem; }

/* --------------------------------------------- 16. DOC 04 — THE REQUEST SLIP */
.plate--slip .headline { margin-bottom: 0.85rem; }
.plate--slip > .body { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

/* The one plate on the page that has to be found, not just read: this is
   where the visitor commits. In light mode it borrows dark mode's own card
   — Forest Ink solid, ivory ink — rather than inventing a third hue, per
   the Inversion Rule. Sits on the flat page background, not a photograph,
   so it goes solid with no blur: dark mode's translucency has nothing to
   dissolve here. Dark mode is untouched; it was already this color. */
.plate--slip {
  --plate-bg: #17302a;
  --plate-blur: none;
  --plate-border: color-mix(in srgb, #f4efe3 20%, transparent);
  --plate-inner: color-mix(in srgb, #f4efe3 12%, transparent);
  --card-foreground: #f4efe3;
  --foreground: #f4efe3;
  --muted-foreground: #a9b5ac;
  --primary: #f4efe3;
  --primary-foreground: #14261f;
  --background: #102821;
  --input: #35544a;
  --ring: #f4efe3;
  --destructive: #e08668;
  --border: #2a473d;
}
.plate--slip .seal--ink { display: none; }
.plate--slip .seal--ivory { display: block; }

/* Dark mode inverts the other way: this plate borrows the *light* theme's
   card wholesale — ivory solid, forest ink — the same move mirrored, so the
   slip stands out on a dark page exactly the way it stands out on a light
   one. Nothing here happens to equal dark mode's own globals (that
   coincidence only ran one direction), so every token gets an explicit
   value; literal, not var() pointing at itself. */
:root[data-theme="dark"] .plate--slip {
  --plate-bg: #fdfbf5;
  --plate-blur: none;
  --plate-border: color-mix(in srgb, #16211c 14%, transparent);
  --plate-inner: color-mix(in srgb, #16211c 9%, transparent);
  --card-foreground: #16211c;
  --foreground: #16211c;
  --muted-foreground: #5c564a;
  --primary: #17362b;
  --primary-foreground: #faf7ef;
  --background: #faf7ef;
  --input: #d5cbaf;
  --ring: #17362b;
  --destructive: #9a3b2e;
  --border: #e3ddc9;
}
:root[data-theme="dark"] .plate--slip .seal--ink { display: block; }
:root[data-theme="dark"] .plate--slip .seal--ivory { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plate--slip {
    --plate-bg: #fdfbf5;
    --plate-blur: none;
    --plate-border: color-mix(in srgb, #16211c 14%, transparent);
    --plate-inner: color-mix(in srgb, #16211c 9%, transparent);
    --card-foreground: #16211c;
    --foreground: #16211c;
    --muted-foreground: #5c564a;
    --primary: #17362b;
    --primary-foreground: #faf7ef;
    --background: #faf7ef;
    --input: #d5cbaf;
    --ring: #17362b;
    --destructive: #9a3b2e;
    --border: #e3ddc9;
  }
  :root:not([data-theme="light"]) .plate--slip .seal--ink { display: block; }
  :root:not([data-theme="light"]) .plate--slip .seal--ivory { display: none; }
}

.slip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem clamp(1rem, 2.4vw, 1.5rem);
}
.field { display: grid; gap: 0.45rem; align-content: start; }
.field--wide, .slip__submit, .slip__failure,
#field-other, #field-brand, #field-budget { grid-column: 1 / -1; }

.field label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.015em;
}
.field__optional {
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.85rem;
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  font-size: var(--t-base);
  line-height: 1.45;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.field textarea { resize: vertical; min-height: 92px; font-family: var(--font-sans); }
.field ::placeholder { color: var(--muted-foreground); opacity: 1; }

.field input:hover,
.field textarea:hover,
.field select:hover { border-color: color-mix(in srgb, var(--ring) 45%, var(--input)); }

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 34%, transparent);
}

.field [aria-invalid="true"] {
  border-color: var(--destructive);
  background: color-mix(in srgb, var(--destructive) 5%, var(--background));
}
.field [aria-invalid="true"]:focus-visible {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 30%, transparent);
}

.field__error {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--destructive);
  min-height: 0;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.field__error:not(:empty) { opacity: 1; transform: none; margin-top: -0.1rem; }

.field__count {
  justify-self: end;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.select { position: relative; display: grid; }
.select select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.5rem;
  cursor: pointer;
}
.select__chevron {
  position: absolute;
  inset-inline-end: 0.85rem;
  top: 50%;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  pointer-events: none;
  color: var(--muted-foreground);
}

.slip__submit { margin-top: 0.5rem; display: grid; gap: 0.85rem; justify-items: center; }
.slip__note {
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--muted-foreground);
  text-align: center;
  max-width: 46ch;
}
.slip__failure {
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--destructive) 45%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--destructive) 8%, transparent);
  color: var(--destructive);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.slip__failure code {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* Confirmation — the slip comes back stamped. */
.slip__done { display: grid; justify-items: center; gap: 1rem; text-align: center; padding-block: 1rem; }
.slip__stamp { display: block; height: 62px; opacity: 0.9; animation: stamp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.slip__done .body { text-align: center; max-width: 46ch; }
.slip__done .btn--primary { margin-top: 0.35rem; }

@keyframes stamp {
  from { opacity: 0; transform: scale(1.5) rotate(-8deg); }
  to { opacity: 0.9; transform: none; }
}

/* -------------------------------------------------------------- 17. FOOTER */
.colophon { padding-bottom: clamp(2rem, 4vw, 3rem); }
.colophon .tickrule { margin-bottom: clamp(2rem, 4vw, 3rem); }
.colophon__inner {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  text-align: center;
}
.brandmark--foot .brandmark__img { height: 52px; }
.colophon__line { font-size: var(--t-sm); color: var(--muted-foreground); }

/* ------------------------------------------------ 18. FLOATING REQUEST HAIL */
.hail {
  position: fixed;
  z-index: 55;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius-full);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.015em;
  box-shadow: 0 14px 34px -14px rgb(var(--stage-shadow) / 0.55);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s ease;
}
.hail.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.hail:hover { background: color-mix(in srgb, var(--primary) 86%, var(--foreground)); }
.hail__icon { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------- 19. MOTION
   One authored moment: the certificate settling onto the photograph, its
   inner rule drawn left to right. Everything else is a quiet arrival. */
.hero__stage .plate,
.hero__facts { opacity: 1; }

html.has-motion .hero .plate__rule { clip-path: inset(0 100% 0 0); }
html.has-motion .hero.is-loaded .plate__rule {
  animation: ruleIn 0.9s 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ruleIn { to { clip-path: inset(0 0 0 0); } }

html.has-motion .hero__stage .plate > *:not(.plate__rule),
html.has-motion .hero__facts > * {
  opacity: 0;
  transform: translateY(16px);
}
html.has-motion .hero.is-loaded .plate > *:not(.plate__rule),
html.has-motion .hero.is-loaded .hero__facts > * {
  animation: settle 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.has-motion .hero.is-loaded .plate > .plate__head { animation-delay: 0.1s; }
html.has-motion .hero.is-loaded .plate > .display { animation-delay: 0.2s; }
html.has-motion .hero.is-loaded .plate > .lede { animation-delay: 0.32s; }
html.has-motion .hero.is-loaded .plate > .plate__actions { animation-delay: 0.44s; }
html.has-motion .hero.is-loaded .hero__facts > .tickrule { animation-delay: 0.5s; }
html.has-motion .hero.is-loaded .hero__facts > .facts { animation-delay: 0.6s; }

@keyframes settle { to { opacity: 1; transform: none; } }

/* Section arrivals — deliberately not one identical entrance everywhere:
   the manifest staggers frame by frame, the story turns its own leaves, the
   register does not move at all, and the slip repeats the hero's rule. */
html.has-motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.75s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
html.has-motion .reveal.is-in { opacity: 1; transform: none; }
/* Scoped to the manifest: only those frames get the staggered observer, so a
   frame outside it (the founder's plate) must never start hidden. */
html.has-motion .manifest .frame { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
html.has-motion .manifest .frame.is-in { opacity: 1; transform: none; }
html.has-motion .plate--slip .plate__rule { clip-path: inset(0 100% 0 0); }
html.has-motion .plate--slip.is-in .plate__rule { animation: ruleIn 0.9s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
  html.has-motion .reveal,
  html.has-motion .frame,
  html.has-motion .hero__stage .plate > *,
  html.has-motion .hero__facts > * { opacity: 1 !important; transform: none !important; }
  html.has-motion .plate__rule { clip-path: none !important; }
}

/* --------------------------------------------------------- 20. RESPONSIVE */
@media (max-width: 1000px) {
  .story__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .masthead__nav { display: none; }
  .masthead__tools { margin-inline-start: auto; }
  .masthead__tools .langswitch { display: none; } /* lives in the drawer below */
  .menu-toggle { display: inline-flex; }
  .manifest { grid-template-columns: repeat(2, 1fr); }
  .frame[data-frame="1"] { grid-column: span 2; grid-row: span 1; aspect-ratio: 3 / 2; }
  /* Frame 1's own span eats one slot from the pairing, so whichever frame
     ends up last is alone in its row exactly when the total count is even —
     a plain nth-child parity check, not a fixed number, so it keeps working
     whether a photo is added or removed. */
  .manifest .frame:last-child:nth-child(even) { grid-column: span 2; aspect-ratio: 3 / 2; }
  .facts { grid-template-columns: repeat(2, 1fr); }
}

/* Force the mobile chrome off above the breakpoint even if JS state lags a
   resize — the drawer must never be reachable once the inline nav is back. */
@media (min-width: 901px) {
  .drawer, .drawer-backdrop { display: none !important; }
}

@media (max-width: 640px) {
  :root { --masthead-h: 66px; }
  .brandmark__img { height: 38px; }
  .brandmark--foot .brandmark__img { height: 44px; }
  .hero { min-height: 100svh; }
  .plate--cover { max-width: none; }
  .slip { grid-template-columns: 1fr; }
  .hail__text { display: none; }
  .hail { padding: 0; width: 54px; height: 54px; justify-content: center; }
  .hail__icon { width: 23px; height: 23px; }
  .langswitch button { padding: 0.4rem 0.5rem; font-size: var(--t-ref); }
  .complication { width: 48px; height: 26px; }
  .complication__disc { width: 18px; height: 18px; }
  .complication[aria-pressed="true"] .complication__disc { transform: translateX(22px); }
  .doc__foot .btn { width: 100%; }
}

/* The manifest keeps two columns all the way down. A single column turned six
   frames into three thousand pixels of identical scroll on a phone. */
@media (max-width: 420px) {
  .facts { grid-template-columns: 1fr; }
  .manifest { gap: 0.6rem; }
}

@media print {
  .masthead, .hail, .skip-link { display: none; }
  .hero { min-height: auto; }
}