/* ==========================================================================
   MSQUARE Works: site.css
   Operator with taste. A confident European brand operator, set like the
   corporate site of a design-led fashion group: warm paper, blue-black ink,
   one oxblood accent used sparingly, a heavy condensed grotesque as image,
   a contrast serif for narrative lines, a quiet sans for reading.
   Photography leads. Rules, not boxes. Every value below is a token;
   page files in css/pages/ use these tokens and nothing else.
   The full specification is DESIGN.md.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset, variable) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Colour: light. One warm family in three registers: paper (four light tones),
     ink (the deep ink and its steps) and one oxblood accent with a tint and a
     deep shade. Contrast on --paper in brackets unless stated. */

  /* Paper: the light surfaces, lightest to deepest */
  --paper-light: #f8f5f0;    /* sheet: a document lifted off the ground (boards, reports, the route) */
  --paper: #f2eee7;          /* page ground, warm paper */
  --stone: #e8e2d8;          /* quiet section surface, one step down from paper */
  --sand: #dcd4c6;           /* deep quiet surface: the working sections (planner) and framed lists */
  --paper-2: var(--stone);   /* pressed option, image placeholder behind a loading photo */

  /* Ink: the deep ink and its steps towards paper */
  --ink: #15171c;            /* headings, primary text, structural rules (15.5:1) */
  --ink-2: #383a40;          /* body text (9.8:1) */
  --ink-3: #575860;          /* captions, credits, metadata (6.1:1; 4.8:1 on sand) */
  --rule: #d3ccc0;           /* hairlines between rows (decorative) */
  --rule-on-stone: #cfc7ba;  /* the same hairline on each deeper surface */
  --rule-on-sand: #c3bbad;
  --rule-on-tint: #d6c3bc;
  --rule-strong: #8c877e;    /* UI boundaries on paper: option and input borders (3.1:1) */
  --rule-strong-deep: #6f6a62; /* UI boundaries on stone, sand and the accent tint (3.0:1 and up) */

  /* Night: the deep ink used as a surface */
  --night: #15171c;          /* ink sections and footer */
  --night-2: #1e2128;        /* a sheet or panel raised on night */
  --night-ink: #eee8de;      /* text on night (14.7:1) */
  --night-ink-3: #a7a39c;    /* secondary text on night (7.1:1) */
  --night-rule: #2e3139;     /* hairlines on night */
  --night-accent: #e0a193;   /* the accent's light tint, for text and buttons on night (8.3:1) */

  /* Accent: oxblood, with a light tint and a deep shade from the same base */
  --accent: #7b2a22;         /* the full tone: primary buttons, live state, current location (8.3:1) */
  --accent-press: #5e1e18;   /* hover of a primary button */
  --accent-deep: #431410;    /* the deep shade: pressed button; the closing surface in dark mode */
  --accent-tint: #ecdcd6;    /* the light tint: quiet surfaces that carry the primary action (closing) */
  --on-accent: #f8f5f0;      /* text on an accent fill (8.8:1) */

  --signal: #ffd000;         /* trace of the previous identity: text selection only */
  --on-photo: #f2eee7;       /* type set on a photograph (behind --scrim), both themes */
  --on-photo-2: rgb(242 238 231 / 0.72);
  --photo-ink: #15171c;      /* text on a light button placed over a photograph */
  --scrim: linear-gradient(to top, rgb(12 13 17 / 0.82) 0%, rgb(12 13 17 / 0.46) 42%, rgb(12 13 17 / 0) 72%);
  --scrim-deep: linear-gradient(to top, rgb(12 13 17 / 0.86) 0%, rgb(12 13 17 / 0.66) 38%, rgb(12 13 17 / 0.4) 62%, rgb(12 13 17 / 0) 88%);   /* under type that sits in the middle of a photograph (Home, MSQ WEAVE) */

  /* Type families */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale */
  --fs-display-1: clamp(3rem, 1.2rem + 7.4vw, 9.5rem);   /* hero h1: 48 to 152 */
  --fs-display-2: clamp(2.5rem, 1.1rem + 5vw, 6.25rem);  /* statement and closing: 40 to 100 */
  --fs-display-3: clamp(2.25rem, 1.2rem + 3.6vw, 4.75rem); /* long titles (articles): 36 to 76 */
  --fs-h2: clamp(2.25rem, 1.25rem + 3.2vw, 4.5rem);      /* section head: 36 to 72 (66 at 1440) */
  --fs-title: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);   /* large item title: 28 to 44 (modules, map groups, rules) */
  --fs-h3: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);    /* item title: 22 to 30 */
  --fs-h4: 1.125rem;                                     /* small title, 18 */
  --fs-quote: clamp(1.875rem, 1.1rem + 2.8vw, 3.75rem);  /* serif statement: 30 to 60 */
  --fs-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);   /* serif lead: 20 to 28 */
  --fs-sub: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);     /* serif section subheading: 18 to 22 */
  --fs-num: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);     /* serif index numeral */
  --fs-caption: 1.0625rem;                               /* serif caption, 17: never larger than body */
  --fs-photo-caption: 0.9375rem;                         /* the serif line under a photograph, 15 */
  --fs-credit: 0.75rem;                                  /* photo credit, 12: fine print, the one size below 13 */
  --fs-email: clamp(1.625rem, 0.1rem + 5.2vw, 5rem);     /* the address on contact: 26 to 80 */
  --fs-reading: 1.1875rem;                               /* long-form article body, 19 */
  --fs-body: 1.0625rem;                                  /* body, 17 */
  --fs-small: 0.9375rem;                                 /* small body and UI, 15 */
  --fs-micro: 0.8125rem;                                 /* labels, buttons, credits, 13 */

  --lh-display: 0.9;
  --lh-h2: 1;
  --lh-h3: 1.1;
  --lh-quote: 1.1;
  --lh-lead: 1.3;
  --lh-sub: 1.4;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-micro: 1.4;
  --lh-on-night: 1.66;     /* body on night bands: slightly looser */

  --tr-display: -0.03em;
  --tr-h2: -0.02em;
  --tr-h3: -0.01em;
  --tr-micro: 0.1em;
  --tr-btn: 0.08em;
  --tr-on-night: 0.006em;  /* body on night bands: slightly wider */

  --wd-display: 80%;   /* Archivo width axis */
  --wd-h2: 88%;
  --wd-h3: 100%;

  --wt-light: 300;
  --wt-body: 400;
  --wt-medium: 500;
  --wt-strong: 600;
  --wt-h3: 600;
  --wt-h2: 700;
  --wt-display: 800;

  /* Space: one ladder */
  --s-1: 0.25rem;   /* 4 */
  --s-2: 0.5rem;    /* 8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */
  --s-7: 3rem;      /* 48 */
  --s-8: 4rem;      /* 64 */
  --s-9: 6rem;      /* 96 */
  --s-10: 8rem;     /* 128 */

  --band: clamp(var(--s-8), 9vw, var(--s-10));        /* section padding */
  --band-tight: clamp(var(--s-7), 6vw, var(--s-9));
  --gutter: clamp(var(--s-4), 4vw, var(--s-7));
  --col-gap: clamp(var(--s-4), 2.2vw, var(--s-6));
  --stack: var(--s-5);                                 /* default gap inside a text block */
  --head-gap: var(--s-7);                              /* section head to its content: tight to the group */
  --sheet-pad: clamp(var(--s-4), 2.4vw, var(--s-6));   /* inside a sheet */

  /* Size */
  --max: 90rem;              /* 1440 */
  --measure: 62ch;
  --measure-narrow: 52ch;
  --nav-h: 4.5rem;           /* 72 */
  --nav-h-phone: 3.75rem;    /* 60 */
  --control-h: 3rem;         /* 48 */
  --control-h-sm: 2.75rem;   /* 44, the touch minimum */
  --icon: 1.125rem;
  --thumb-w: clamp(10rem, 14vw, 15rem);
  --hero-h: calc(100svh - var(--nav-h));
  --hero-media-phone: 34svh;
  --hero-min-h: 40rem;
  --channel-step-h: 56svh;
  --channel-step-phone: 36svh;
  --channel-stage-phone: 30svh;
  --channel-stage-h: calc(100svh - var(--nav-h) - var(--s-10));
  --band-media-h: clamp(16rem, 40svh, 34rem);
  --portrait-max-h: calc(100svh - var(--nav-h) - var(--s-9));
  --address-photo-h: 52svh;    /* Contact: the photograph leaves room for the address in the first screen */
  --hero-title-max: 82%;
  --fig-offset-w: 66%;
  --pub-indent: 25%;
  --quote-max: 22ch;
  --cross-pull: -0.3em;      /* a title pulled up over an image edge */
  --cross-depth: 0.3em;      /* the part of that title drawn in paper over the image: a cap, not a half */
  --slide-from: 30%;         /* start offset for type that slides into place */
  --weave-pitch: 1.5rem;     /* thread spacing of the platform reveal */
  /* Grid geometry for full-width children of a 12-column grid (resolved where used) */
  --cols-4: calc(4 * (100% - 11 * var(--col-gap)) / 12 + 3 * var(--col-gap));
  --cols-5: calc(5 * (100% - 11 * var(--col-gap)) / 12 + 4 * var(--col-gap));
  --col-6-start: calc(5 * (100% - 11 * var(--col-gap)) / 12 + 5 * var(--col-gap));
  --bleed-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--max)) / 2)));
  --bleed-left: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--max)) / 2)));
  --hair: 1px;
  --focus-offset: 3px;
  --next-min-w: 18rem;
  --lockup-w: clamp(9rem, 14vw, 12rem);
  --rule-heavy: 2px;
  --radius: 0;               /* one radius, everywhere */

  /* Motion */
  --t-press: 120ms;
  --t-quick: 240ms;
  --t-base: 480ms;
  --t-slow: 800ms;
  --t-reveal: 1100ms;
  --t-page: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-settle: 1600ms;        /* image settling after a reveal */
  --t-none: 1ms;             /* reduced motion: state changes are instant */
  --delay-load: 200ms;       /* first motion after page load */
  --stagger: 70ms;
  --press-y: 1px;            /* every control drops 1px when pressed */
  --zoom-hover: 1.04;        /* image push-in on hover */
  --zoom-reveal: 1.12;       /* image scale at the start of a reveal */
  --zoom-drift: 1.06;        /* hero photograph during parallax */
  --drift: 6%;               /* hero parallax travel */

  /* Layers */
  --z-raise: 2;
  --z-sticky: 80;
  --z-nav: 100;
  --z-menu: 110;
  --z-skip: 120;

  --o-inactive: 0.46;  /* channel names not yet in view (large text, 3.6:1 on night) */
  --o-arrive: 0.16;    /* type that inks or slides in starts here */

  --print-ground: #fff;
  --print-ink: #000;
}

/* Dark: a designed night palette, not an inversion. Ground is blue-black and
   every quieter surface steps *up* from it (stone, sand, night, night-2), so
   section changes stay visible; the accent lightens to a dusty rose-clay and
   its tint becomes a deep oxblood-ink surface. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper-light: #1b1f26;
    --paper: #111318;
    --stone: #171a21;
    --sand: #1d2129;
    --ink: #ece6db;
    --ink-2: #cac4b9;
    --ink-3: #9e998f;
    --rule: #2b2f37;
    --rule-on-stone: #30353e;
    --rule-on-sand: #353a44;
    --rule-on-tint: #4a3330;
    --rule-strong: #6e6a64;
    --rule-strong-deep: #7a756d;
    --accent: #db9a8c;
    --accent-press: #e9b3a7;
    --accent-deep: #f0c3b9;
    --accent-tint: #2a1b19;
    --on-accent: #111318;
    --night: #22262f;
    --night-2: #2c313b;
    --night-ink: #ece6db;
    --night-ink-3: #a8a39a;
    --night-rule: #363b46;
    --night-accent: #db9a8c;
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper-light: #1b1f26;
  --paper: #111318;
  --stone: #171a21;
  --sand: #1d2129;
  --ink: #ece6db;
  --ink-2: #cac4b9;
  --ink-3: #9e998f;
  --rule: #2b2f37;
  --rule-on-stone: #30353e;
  --rule-on-sand: #353a44;
  --rule-on-tint: #4a3330;
  --rule-strong: #6e6a64;
  --rule-strong-deep: #7a756d;
  --accent: #db9a8c;
  --accent-press: #e9b3a7;
  --accent-deep: #f0c3b9;
  --accent-tint: #2a1b19;
  --on-accent: #111318;
  --night: #22262f;
  --night-2: #2c313b;
  --night-ink: #ece6db;
  --night-ink-3: #a8a39a;
  --night-rule: #363b46;
  --night-accent: #db9a8c;
}

@media (max-width: 47.99em) {
  :root { --nav-h: var(--nav-h-phone); }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--s-5));
  scrollbar-color: var(--rule-strong) var(--paper);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  caret-color: var(--accent);
  font: var(--wt-body) var(--fs-body) / var(--lh-body) var(--font-sans);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overflow-wrap: break-word;   /* a long word or address never pushes past the column */
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }   /* alt text reads cleanly if an image fails */
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
address { font-style: normal; }
::selection { background: var(--signal); color: var(--photo-ink); }   /* fixed dark ink: readable on every surface and in both themes */
:focus-visible { outline: var(--rule-heavy) solid var(--accent); outline-offset: var(--focus-offset); }
.band--night :focus-visible, .footer :focus-visible { outline-color: var(--night-accent); }

.visually-hidden {
  position: absolute !important; width: var(--hair); height: var(--hair); padding: 0; margin: calc(-1 * var(--hair));
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: var(--z-skip);
  display: inline-flex; align-items: center; min-height: var(--control-h-sm);
  padding: 0 var(--s-4); background: var(--ink); color: var(--paper);
  font: var(--wt-medium) var(--fs-small) / 1 var(--font-sans);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.i { width: var(--icon); height: var(--icon); flex: none; fill: currentColor; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.band { padding-block: var(--band); }
.band--tight { padding-block: var(--band-tight); }
.band--flush-top { padding-top: 0; }

/* Surfaces. Every section sits on one of five grounds, so a fast scroll shows
   where one section ends and the next begins: paper (default), stone, sand,
   the accent tint (the closing) and night. A surface re-points --paper so
   panels laid on it (the model text, the stage) match their ground. */
.band--stone { background: var(--stone); --paper: var(--stone); --paper-2: var(--sand); --rule: var(--rule-on-stone); --rule-strong: var(--rule-strong-deep); }
.band--sand { background: var(--sand); --paper: var(--sand); --paper-2: var(--stone); --rule: var(--rule-on-sand); --rule-strong: var(--rule-strong-deep); }
.band--tint { background: var(--accent-tint); --paper: var(--accent-tint); --paper-2: var(--sand); --rule: var(--rule-on-tint); --rule-strong: var(--rule-strong-deep); }
.band--night { background: var(--night); color: var(--night-ink-3); }
.band--night :is(h1, h2, h3, h4, .t-quote, .t-lead) { color: var(--night-ink); }
/* Light text on night: a touch more air on all three axes */
.band--night :is(p, li, dd, td) { line-height: var(--lh-on-night); letter-spacing: var(--tr-on-night); }
.band--night :is(.t-quote, .t-lead) { letter-spacing: normal; }
.band--night .t-quote { line-height: var(--lh-quote); }
.band--night .t-lead { line-height: var(--lh-lead); }   /* display serif keeps its own leading on night */
.band--night { --rule: var(--night-rule); --rule-strong: var(--night-ink-3); --ink: var(--night-ink); --ink-2: var(--night-ink); --ink-3: var(--night-ink-3); --accent: var(--night-accent); --accent-press: var(--night-accent); --accent-deep: var(--night-accent); --paper: var(--night); --paper-light: var(--night-2); --paper-2: var(--night-2); --stone: var(--night-2); --on-accent: var(--night); }
.stack > * + * { margin-top: var(--stack); }
.nowrap { white-space: nowrap; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { color: var(--ink); font-weight: var(--wt-h2); }
.t-display-1 {
  font: var(--wt-display) var(--fs-display-1) / var(--lh-display) var(--font-display);
  font-stretch: var(--wd-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
.t-display-2, .closing__title {
  font: var(--wt-display) var(--fs-display-2) / var(--lh-display) var(--font-display);
  font-stretch: var(--wd-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
h2 {
  font: var(--wt-h2) var(--fs-h2) / var(--lh-h2) var(--font-display);
  font-stretch: var(--wd-h2);
  letter-spacing: var(--tr-h2);
  text-wrap: balance;
}
h3, .t-h3 {
  color: var(--ink);
  font: var(--wt-h3) var(--fs-h3) / var(--lh-h3) var(--font-display);
  font-stretch: var(--wd-h3);
  letter-spacing: var(--tr-h3);
  text-wrap: balance;
}
/* Large item title: the step between h2 and h3 (module names, map groups, rules) */
.t-title {
  color: var(--ink);
  font: var(--wt-h2) var(--fs-title) / var(--lh-h2) var(--font-display);
  font-stretch: var(--wd-h2);
  letter-spacing: var(--tr-h2);
  text-wrap: balance;
}
h4, .t-h4 { font: var(--wt-strong) var(--fs-h4) / var(--lh-h3) var(--font-sans); }
.t-quote {
  font: italic var(--wt-medium) var(--fs-quote) / var(--lh-quote) var(--font-serif);
  color: var(--ink);
  text-wrap: balance;
  padding-bottom: var(--s-1);
}
.t-lead {
  font: var(--wt-medium) var(--fs-lead) / var(--lh-lead) var(--font-serif);
  color: var(--ink);
  max-width: var(--measure-narrow);
  text-wrap: pretty;
}
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-label {
  font: var(--wt-medium) var(--fs-micro) / var(--lh-micro) var(--font-sans);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-num, .sheet td, .sheet th { font-variant-numeric: lining-nums tabular-nums; }
.t-num {
  font: italic var(--wt-body) var(--fs-num) / 1 var(--font-serif);
  color: var(--accent);   /* the one key detail of an indexed layout */
  font-variant-numeric: lining-nums;
}
.muted { color: var(--ink-3); }
p { max-width: var(--measure); text-wrap: pretty; }
strong, b { font-weight: var(--wt-strong); color: var(--ink); }
/* Section head: the heading, then one serif line that says what the section holds.
   Tight to each other, then one clear step down to the content. */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-bottom: var(--head-gap); max-width: var(--measure); }
.section-head p, .t-sub { font: var(--wt-medium) var(--fs-sub) / var(--lh-sub) var(--font-serif); color: var(--ink-2); max-width: var(--measure-narrow); }
.band--night .section-head p { color: var(--night-ink-3); }

/* Inline links in running text */
p a, li a, dd a, .footer address a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: 0.22em;
  text-decoration-color: var(--rule-strong);
  transition: color var(--t-quick) var(--ease-out), text-decoration-color var(--t-quick) var(--ease-out);
}
p a:hover, li a:hover, dd a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ---------- Buttons ----------
   The primary button is the accent: the one solid oxblood block in a viewport.
   On night bands the accent tokens resolve to the light tint, so the button
   turns light with dark text. The quiet button is the outlined secondary. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: var(--control-h);
  padding: 0 var(--s-5);
  border: var(--hair) solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: var(--wt-medium) var(--fs-micro) / 1 var(--font-sans);
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.btn .i { transition: transform var(--t-quick) var(--ease-out); }
.btn:hover { background: var(--accent-press); border-color: var(--accent-press); color: var(--on-accent); }
.btn:hover .i { transform: translateX(var(--s-1)); }
.btn:active { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(var(--press-y)); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--quiet:active { background: var(--accent-press); border-color: var(--accent-press); color: var(--on-accent); }
.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--s-4); }
/* Disabled: drawn in colour, not opacity, so the label keeps 5.6:1 */
.btn[aria-disabled="true"], .btn:disabled,
.btn[aria-disabled="true"]:hover, .btn:disabled:hover,
.btn[aria-disabled="true"]:active, .btn:disabled:active { background: transparent; border-color: var(--rule-strong); color: var(--ink-3); cursor: not-allowed; transform: none; }
.btn[aria-disabled="true"] .i, .btn:disabled .i { transform: none; }
.btn[hidden] { display: none; }
/* At 400% zoom (or the narrowest phones) a long label may wrap rather than overflow */
@media (max-width: 22.49em) { .btn { white-space: normal; text-align: center; max-width: 100%; padding-block: var(--s-2); } }

/* Arrow link: the secondary action. The underline draws in on hover. */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--control-h-sm);
  color: var(--ink);
  font: var(--wt-medium) var(--fs-small) / 1.2 var(--font-sans);
  text-decoration: none;
}
.link-arrow > span {
  background:
    linear-gradient(var(--accent), var(--accent)) left bottom / 0% var(--hair) no-repeat,
    linear-gradient(var(--rule-strong), var(--rule-strong)) left bottom / 100% var(--hair) no-repeat;
  padding-bottom: var(--s-1);
  transition: background-size var(--t-base) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.link-arrow .i { transition: transform var(--t-quick) var(--ease-out); }
.link-arrow:hover > span { background-size: 100% var(--hair), 100% var(--hair); color: var(--accent); }
.link-arrow:hover .i { transform: translateX(var(--s-1)); color: var(--accent); }
.link-arrow:active { transform: translateY(var(--press-y)); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.actions--spaced { margin-top: var(--s-6); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--paper);
  border-bottom: var(--hair) solid transparent;
  transition: border-color var(--t-quick) var(--ease-out);
  view-transition-name: nav;
}
.nav.is-stuck { border-bottom-color: var(--rule); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--control-h-sm); color: var(--ink); text-decoration: none; }
.brand__mark { width: var(--s-6); height: var(--s-6); }
.brand__mark svg { width: 100%; height: 100%; }
.brand__name { font: var(--wt-strong) var(--fs-small) / 1 var(--font-sans); letter-spacing: var(--tr-btn); text-transform: uppercase; white-space: nowrap; }
@media (max-width: 22.49em) { .brand { gap: var(--s-2); } .brand__name { letter-spacing: 0; } }
.brand__name span { font-weight: var(--wt-body); }
.nav__menu { display: flex; align-items: center; gap: var(--s-6); }
.nav__links { display: flex; gap: var(--s-5); }
.nav__links a {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h-sm); min-width: var(--control-h-sm);
  color: var(--ink-2); text-decoration: none;
  font: var(--wt-medium) var(--fs-small) / 1 var(--font-sans);
  background: linear-gradient(var(--ink), var(--ink)) left calc(100% - var(--s-3)) / 0% var(--hair) no-repeat;
  transition: color var(--t-quick) var(--ease-out), background-size var(--t-base) var(--ease-out);
}
.nav__links a:hover { color: var(--ink); background-size: 100% var(--hair); }
.nav__links a[aria-current="page"] { color: var(--ink); background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% var(--rule-heavy); }
.nav .btn[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.nav .btn[aria-current="page"]:hover { background: var(--accent); color: var(--on-accent); }
.nav__toggle {
  display: none; align-items: center; gap: var(--s-2);
  min-height: var(--control-h-sm); padding: 0 var(--s-3);
  background: transparent; border: var(--hair) solid var(--rule-strong); border-radius: var(--radius);
  color: var(--ink); font: var(--wt-medium) var(--fs-micro) / 1 var(--font-sans);
  letter-spacing: var(--tr-btn); text-transform: uppercase; cursor: pointer;
}
.nav__toggle:hover { border-color: var(--ink); }

@media (max-width: 63.99em) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: var(--z-menu);
    display: none; flex-direction: column; align-items: stretch; justify-content: space-between; gap: var(--s-7);
    padding: var(--s-6) var(--gutter) var(--s-7);
    background: var(--paper); overflow-y: auto;
  }
  .nav.is-open .nav__menu { display: flex; }
  .nav__links { flex-direction: column; gap: 0; }
  .nav__links li { border-bottom: var(--hair) solid var(--rule); }
  .nav__links a {
    width: 100%; min-height: auto; padding-block: var(--s-4); justify-content: flex-start;
    font: var(--wt-display) var(--fs-h2) / 1 var(--font-display); font-stretch: var(--wd-display);
    letter-spacing: var(--tr-h2); color: var(--ink); background: none;
  }
  .nav__links a[aria-current="page"] { color: var(--accent); background: none; }
  .nav__menu .btn { align-self: flex-start; }
  body.nav-open { overflow: hidden; }

  /* No JavaScript: no toggle; the links wrap under the brand */
  html:not(.js) .nav__toggle { display: none; }
  html:not(.js) .nav { position: static; }   /* a wrapped bar never stays stuck over the page */
  html:not(.js) .nav__bar { flex-wrap: wrap; height: auto; padding-block: var(--s-3); }
  html:not(.js) .nav__menu { position: static; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding: 0; background: none; overflow: visible; }
  html:not(.js) .nav__links { flex-direction: row; flex-wrap: wrap; gap: 0 var(--s-5); }
  html:not(.js) .nav__links li { border: 0; }
  html:not(.js) .nav__links a { width: auto; min-height: var(--control-h-sm); padding: 0; font: var(--wt-medium) var(--fs-small) / 1 var(--font-sans); letter-spacing: 0; }
}

/* ---------- Heroes (shared parts; each page sets its own composition) ---------- */
.hero { position: relative; }
.hero__media { position: relative; overflow: hidden; margin: 0; view-transition-name: hero; background: var(--paper-2); }
.hero__media--dark { background: var(--night); }
.hero__media--dark img { color: var(--on-photo); font-size: var(--fs-small); }
.hero__media img, .hero__media picture { width: 100%; height: 100%; object-fit: cover; }
.hero__lead { margin-top: var(--s-4); }
.hero .actions { margin-top: var(--s-5); }

/* Display type that crosses an image edge: the ::after copy is set in the
   on-photo colour and clipped to the part of the title over the photograph. */
.cross { position: relative; }
.cross::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute; inset: 0;
  color: var(--on-photo);
  pointer-events: none;
}

/* ---------- Figures and captions ---------- */
.fig { margin: 0; }
.fig__media { position: relative; overflow: hidden; background: var(--paper-2); }
.fig__media picture, .fig__media img { width: 100%; height: 100%; }
.fig__media img { object-fit: cover; }   /* every photograph fills its frame, whatever the crop of its file */
.cap {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-5);
  margin-top: var(--s-3);
}
.cap > span:first-child { font: italic var(--wt-medium) var(--fs-photo-caption) / var(--lh-small) var(--font-serif); color: var(--ink-2); }
.cap > span:last-child, .credits { font: var(--wt-body) var(--fs-credit) / var(--lh-micro) var(--font-sans); color: var(--ink-3); }
/* a caption without a credit (example documents) keeps the small sans at 13 */
.cap > span:only-child { font: var(--wt-body) var(--fs-micro) / var(--lh-micro) var(--font-sans); color: var(--ink-3); }
.cap a, .credits a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; text-decoration-color: var(--rule-strong); }
.cap a:hover, .credits a:hover { color: var(--accent); text-decoration-color: currentColor; }
.credits { margin-top: var(--s-5); }
.credits span + span::before { content: " / "; }

/* Image hover inside links: a slow push-in */
a .fig__media img, a .thumb img { transition: transform var(--t-slow) var(--ease-out); }
a:hover .fig__media img, a:hover .thumb img { transform: scale(var(--zoom-hover)); }

/* ---------- Index: the editorial list (modules, routes, articles, choices) ----------
   Title, text and arrow per row. No numerals: none of these lists has an order. */
.index { border-top: var(--hair) solid var(--ink); }
.index__item { border-bottom: var(--hair) solid var(--rule); }
.index__row {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) var(--s-6);
  align-items: baseline; column-gap: var(--col-gap);
  padding-block: var(--s-5);
  color: inherit; text-decoration: none;
}
.index__title { transition: transform var(--t-base) var(--ease-out), color var(--t-quick) var(--ease-out); }
.index__text { color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.index__row > .i { justify-self: end; align-self: center; color: var(--ink); transition: transform var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out); }
a.index__row:hover .index__title, a.index__row:focus-visible .index__title { transform: translateX(var(--s-2)); color: var(--accent); }
a.index__row:hover > .i { transform: translateX(var(--s-1)); color: var(--accent); }
a.index__row:active, .disclosure summary:active { transform: translateY(var(--press-y)); }
@media (max-width: 47.99em) {
  .index__row { grid-template-columns: minmax(0, 1fr) var(--s-5); row-gap: var(--s-2); }
  .index__text { grid-column: 1; }
  .index__row > .i { grid-row: 1; grid-column: 2; }
}
.index--big .index__title { font: var(--wt-display) var(--fs-h2) / var(--lh-h2) var(--font-display); font-stretch: var(--wd-display); letter-spacing: var(--tr-h2); color: var(--ink); }
.index--big .index__row { padding-block: var(--s-6); }

/* Thumbnail revealed by a hovered index row (decorative; pointer devices only) */
.thumb { position: absolute; pointer-events: none; overflow: hidden; z-index: var(--z-raise); opacity: 0; clip-path: inset(50% 0 50% 0); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .thumb { transition: opacity var(--t-quick) var(--ease-out), clip-path var(--t-base) var(--ease-out); }
  a:hover > .thumb, a:focus-visible > .thumb, summary:hover .thumb { opacity: 1; clip-path: inset(0 0 0 0); }
}
@media (hover: none), (pointer: coarse) { .thumb { display: none; } }

/* ---------- Rows: a term and its text, hairline-separated ---------- */
.rows { border-top: var(--hair) solid var(--ink); }
.rows__item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--col-gap); padding-block: var(--s-5); border-bottom: var(--hair) solid var(--rule); }
.rows__item > :last-child { color: var(--ink-2); }
@media (max-width: 47.99em) { .rows__item { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); } }

/* ---------- Sequence: steps read left to right ---------- */
.seq { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--col-gap); }
.seq--3 { --n: 3; }
.seq--4 { --n: 4; }
.seq--5 { --n: 5; }
.seq__step { border-top: var(--hair) solid var(--ink); padding-top: var(--s-4); }
.seq__step .t-num { display: block; margin-bottom: var(--s-5); }
.seq__step p { color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.seq__step > * + * { margin-top: var(--s-3); }
@media (max-width: 63.99em) { .seq { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); } }
@media (max-width: 47.99em) { .seq { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); } .seq__step .t-num { margin-bottom: var(--s-4); } }

/* ---------- Disclosure: hairline rows that open ---------- */
.disclosure { border-top: var(--hair) solid var(--ink); }
.disclosure details { border-bottom: var(--hair) solid var(--rule); }
.disclosure summary {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--control-h-sm); align-items: start; column-gap: var(--s-5);
  padding-block: var(--s-5);
  cursor: pointer; list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure__title { display: block; font: var(--wt-h3) var(--fs-h3) / var(--lh-h3) var(--font-display); letter-spacing: var(--tr-h3); color: var(--ink); text-wrap: balance; }
.disclosure__sub { display: block; margin-top: var(--s-2); color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small); max-width: var(--measure); }
.disclosure__meta { display: block; margin-top: var(--s-3); }
.disclosure__icon {
  display: inline-grid; place-items: center; justify-self: end;
  width: var(--control-h-sm); height: var(--control-h-sm);
  border: var(--hair) solid var(--rule-strong); border-radius: var(--radius); color: var(--ink);
  transition: background-color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.disclosure__icon .i { transition: transform var(--t-base) var(--ease-out); }
.disclosure__title { transition: color var(--t-quick) var(--ease-out), transform var(--t-base) var(--ease-out); }
.disclosure summary:hover .disclosure__title, .disclosure summary:focus-visible .disclosure__title { transform: translateX(var(--s-2)); color: var(--accent); }
.disclosure summary:hover .disclosure__icon { border-color: var(--accent); color: var(--accent); }
.disclosure details[open] summary:hover .disclosure__icon { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.disclosure details[open] .disclosure__icon { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.disclosure details[open] .disclosure__icon .i { transform: rotate(45deg); }
.disclosure__body { padding-bottom: var(--s-7); max-width: var(--measure); }
.disclosure__body > * + * { margin-top: var(--s-4); }
.disclosure__body ul { padding-left: var(--s-5); }
.disclosure__body li + li { margin-top: var(--s-2); }

/* ---------- Fold: a quiet row that opens detail under a module or a map group ---------- */
.fold { margin-top: var(--s-6); }
.fold summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: var(--control-h); padding-block: var(--s-2); border-top: var(--hair) solid var(--rule);
  cursor: pointer; list-style: none;
}
.fold summary::-webkit-details-marker { display: none; }
.fold__label { font: var(--wt-medium) var(--fs-small) / var(--lh-small) var(--font-sans); color: var(--ink); transition: color var(--t-quick) var(--ease-out), transform var(--t-base) var(--ease-out); }
.fold summary:hover .fold__label, .fold summary:focus-visible .fold__label { color: var(--accent); transform: translateX(var(--s-2)); }
.fold summary:hover .disclosure__icon { border-color: var(--accent); color: var(--accent); }
.fold summary:active { transform: translateY(var(--press-y)); }
.fold[open] .disclosure__icon { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fold[open] .disclosure__icon .i { transform: rotate(45deg); }
.fold[open] summary:hover .disclosure__icon { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- Split: a side head and its content ----------
   The section head sits in a narrow left column (sticky on wide screens),
   the content runs in the wide right column. */
.split { row-gap: var(--s-7); align-items: start; }
.split__head { grid-column: 1 / span 4; }
.split__head--sticky { position: sticky; top: calc(var(--nav-h) + var(--s-6)); }
.split__body { grid-column: 6 / -1; }
@media (max-width: 63.99em) {
  .split__head, .split__body { grid-column: 1 / -1; }
  .split__head--sticky { position: static; }
}

/* ---------- Document: a printed sheet (status board, report, route, map) ----------
   A sheet is the lightest paper tone, lifted off whatever ground it sits on,
   with a 2px ink rule on top and a hairline frame. */
.doc {
  background: var(--paper-light); --paper: var(--paper-light);
  border: var(--hair) solid var(--rule); border-top: var(--rule-heavy) solid var(--ink);
  padding: var(--s-4) var(--sheet-pad) var(--sheet-pad);
}
.doc__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-5); }
.doc .cap { margin-top: var(--s-5); }

/* ---------- Monday report: one row per step of the weekly cycle ----------
   The same document on Home (a steady week) and on How it works (a week during rollout). */
.weekly__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline; padding-block: var(--s-4); border-bottom: var(--hair) solid var(--rule); }
.weekly__row:first-child { border-top: var(--hair) solid var(--ink); }
.weekly dt { display: flex; align-items: baseline; gap: var(--s-3); }
.weekly__num { min-width: var(--s-6); font: italic var(--wt-body) var(--fs-sub) / 1 var(--font-serif); color: var(--accent); font-variant-numeric: lining-nums; }
.weekly dd { font: var(--wt-medium) var(--fs-sub) / var(--lh-sub) var(--font-serif); color: var(--ink); }
.weekly dd .status { margin-right: var(--s-2); vertical-align: 0.1em; }
/* the decision the client is asked for keeps the accent and reads in italic */
.weekly__row--decision dt .t-label { color: var(--accent); }
.weekly__row--decision dd { font-style: italic; }
/* markets and their phase, inside the Status row */
.weekly__markets { display: grid; }
.weekly__markets li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-1); }
.weekly__markets li + li { border-top: var(--hair) solid var(--rule); }
.weekly__markets .status { margin: 0; }
@media (max-width: 47.99em) { .weekly__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); } }

/* ---------- Note: one line with an icon ---------- */
.note { display: flex; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.note .i { margin-top: var(--s-1); color: var(--ink-3); }
.note--risk .i { color: var(--accent); }

/* ---------- Sheet: editorial table ---------- */
.sheet { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-small); }
.sheet caption { text-align: left; }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: var(--hair) solid var(--rule); }
.sheet thead th { padding-block: 0 var(--s-3); border-bottom: var(--hair) solid var(--ink); font: var(--wt-medium) var(--fs-micro) / var(--lh-micro) var(--font-sans); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--ink-3); }
.sheet tbody th { color: var(--ink); font-weight: var(--wt-strong); }
.sheet td { color: var(--ink-2); }
.sheet .ta-r { text-align: right; padding-right: 0; }

/* Status words: plain text; the one live state carries the accent */
.status { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--wt-medium) var(--fs-micro) / 1 var(--font-sans); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--ink-2); }
.status--live { color: var(--accent); font-weight: var(--wt-strong); }
.status--risk { color: var(--ink); }   /* named plainly, with its warning icon; the accent is kept for actions and Live */
.status .i { width: var(--s-4); height: var(--s-4); }

/* ---------- Options (planner): controls with a square marker, flip fully when chosen ----------
   The marker is empty at rest; a chosen single answer fills it, a chosen multiple answer shows a check. */
.opts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.opt { position: relative; display: inline-flex; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.opt span {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: var(--control-h-sm); padding: 0 var(--s-4) 0 var(--s-3);
  border: var(--hair) solid var(--rule-strong-deep); border-radius: var(--radius);
  color: var(--ink); font: var(--wt-medium) var(--fs-small) / 1.2 var(--font-sans);
  transition: background-color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.opt span::before {
  content: ""; flex: none; width: var(--s-3); height: var(--s-3);
  border: var(--hair) solid currentColor; background: transparent;
  transition: background-color var(--t-quick) var(--ease-out);
}
.opt span::after {
  content: ""; position: absolute; left: var(--s-3); top: 50%; width: var(--s-3); height: var(--s-3); translate: 0 -50%;
  background: var(--ink); opacity: 0;
  -webkit-mask: url("../assets/icons/check.svg") center / 100% 100% no-repeat; mask: url("../assets/icons/check.svg") center / 100% 100% no-repeat;
}
.opt:hover span { border-color: var(--ink); background: var(--paper); }
.opt input:active + span { background: var(--paper-2); transform: translateY(var(--press-y)); }
.opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper-light); }
.opt input:checked + span::before { background: var(--paper-light); border-color: var(--paper-light); }
.opt input[type="checkbox"]:checked + span::after { opacity: 1; }
.opt input:focus-visible + span { outline: var(--rule-heavy) solid var(--accent); outline-offset: var(--focus-offset); }
.opt input:disabled + span { border-color: var(--rule); color: var(--ink-3); cursor: not-allowed; }

/* ---------- Closing (every page but 404) ----------
   Its own surface: the accent tint in light, the deep oxblood-ink in dark,
   so the end of every page reads as a destination with the one action on it. */
.closing { padding-block: var(--band); background: var(--accent-tint); --paper: var(--accent-tint); --paper-2: var(--sand); --rule: var(--rule-on-tint); --rule-strong: var(--rule-strong-deep); }
.closing__grid { row-gap: var(--s-6); align-items: end; }
.closing__title { grid-column: 1 / span 9; color: var(--ink); }
.closing__body { grid-column: 1 / span 6; }
.closing__body .t-lead { color: var(--ink-2); }
.next {
  grid-column: 9 / -1; justify-self: end;
  display: grid; gap: var(--s-2); justify-items: start;
  color: var(--ink); text-decoration: none; text-align: left;
  border-top: var(--hair) solid var(--ink); padding-top: var(--s-3); min-width: min(100%, var(--next-min-w));
}
.next__title { display: inline-flex; align-items: center; gap: var(--s-3); font: var(--wt-h3) var(--fs-h3) / var(--lh-h3) var(--font-display); letter-spacing: var(--tr-h3); transition: color var(--t-quick) var(--ease-out); }
.next__title .i { transition: transform var(--t-quick) var(--ease-out); }
.next:hover .next__title { color: var(--accent); }
.next:hover .next__title .i { transform: translateX(var(--s-2)); }
.next:active { transform: translateY(var(--press-y)); }
@media (max-width: 63.99em) {
  .closing__title, .closing__body { grid-column: 1 / -1; }
  .next { grid-column: 1 / -1; justify-self: stretch; }
}

/* ---------- Mobile contact button ---------- */
.sticky-cta {
  position: fixed; right: var(--gutter); bottom: var(--s-4); z-index: var(--z-sticky);
  transform: translateY(calc(100% + var(--s-6)));
  visibility: hidden;   /* out of the tab order while parked off-screen */
  transition: transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base), background-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out);
}
.sticky-cta.is-shown { transform: none; visibility: visible; transition-delay: 0s; }
.sticky-cta.is-on-night { background: var(--night-accent); border-color: var(--night-accent); color: var(--photo-ink); }
.sticky-cta.is-on-night:hover { background: var(--on-photo); border-color: var(--on-photo); color: var(--photo-ink); }
.sticky-cta.is-on-night:focus-visible { outline-color: var(--night-accent); }
@media (min-width: 64em) { .sticky-cta { display: none; } }
/* Below 1024px it is a square tab with the envelope, set against the window's right edge, so it
   sits mostly in the gutter and covers at most 32px of the text column (17px at 768) as lines
   scroll past; the label stays in its accessible name. Its focus ring is drawn inside, because
   an outside ring would be cut by the window edge. */
@media (max-width: 63.99em) {
  .sticky-cta { right: 0; bottom: var(--s-6); width: var(--control-h); height: var(--control-h); min-height: 0; padding: 0; gap: 0; }
  .sticky-cta:focus-visible { outline-color: var(--on-accent); outline-offset: calc(-1 * var(--s-2)); }
  .sticky-cta.is-on-night:focus-visible { outline-color: var(--photo-ink); }
  .sticky-cta__label { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Short windows (zoomed to 200% and beyond, landscape phones) ----------
   Nothing sticks to the top or bottom, so the content keeps the screen. */
@media (max-height: 30em) {
  .nav { position: relative; }
  .sticky-cta { display: none; }
  .split__head--sticky { position: static; }
}

/* ---------- Footer (night) ---------- */
.footer { background: var(--night); color: var(--night-ink-3); padding-block: var(--band-tight) var(--s-6); font-size: var(--fs-small); line-height: var(--lh-small); }
.footer__grid { row-gap: var(--s-7); }
/* The brand block is as wide as its description, so the lockup centres over that text */
.footer__brand { grid-column: 1 / span 5; display: grid; gap: var(--s-5); align-content: start; justify-self: start; max-width: var(--measure-narrow); }
.footer__lockup { width: var(--lockup-w); height: auto; color: var(--night-ink); justify-self: center; }
.footer__about { max-width: var(--measure-narrow); }
.footer__col { grid-column: span 2; }
.footer__col--wide { grid-column: span 3; }
.footer h2 { margin-bottom: var(--s-4); font: var(--wt-medium) var(--fs-micro) / var(--lh-micro) var(--font-sans); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--night-ink-3); }
.footer ul { display: grid; gap: var(--s-1); }
.footer a { display: inline-flex; align-items: center; min-height: var(--control-h-sm); min-width: var(--control-h-sm); color: var(--night-ink); text-decoration: none; background: linear-gradient(var(--night-accent), var(--night-accent)) left calc(100% - var(--s-2)) / 0% var(--hair) no-repeat; transition: background-size var(--t-base) var(--ease-out), color var(--t-quick) var(--ease-out); }
.footer a:hover { color: var(--night-accent); background-size: 100% var(--hair); }
.footer__sub { margin-top: var(--s-6); }   /* "Offices" under the email */
.footer ul.footer__offices { grid-template-columns: repeat(2, max-content); gap: var(--s-1) var(--s-6); }   /* two by two */
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-6); margin-top: var(--s-9); padding-top: var(--s-5); border-top: var(--hair) solid var(--night-rule); font-size: var(--fs-micro); }
.footer__base p { max-width: none; }
@media (max-width: 63.99em) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__col, .footer__col--wide { grid-column: span 4; }
}
@media (max-width: 47.99em) { .footer__col, .footer__col--wide { grid-column: 1 / -1; } }

/* ==========================================================================
   Motion. Content is visible without JavaScript and under reduced motion;
   every pattern below is opt-in through `.js` and `no-preference`.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Page transitions: the hero photograph carries over between pages */
  @view-transition { navigation: auto; }
  ::view-transition-group(hero) { animation-duration: var(--t-page); animation-timing-function: var(--ease-out); }
  ::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; object-fit: cover; overflow: hidden; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-quick); }

  /* Fade-rise for text blocks */
  .js [data-reveal] { opacity: 0; transform: translateY(var(--s-5)); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
  .js [data-reveal].is-in, .js [data-reveal]:focus-within { opacity: 1; transform: none; }
  .js [data-reveal]:focus-within { transition: none; }   /* keyboard focus never waits for a fade */

  /* Image reveals: a wipe, never a plain fade. Direction set per figure. */
  .js [data-wipe] .fig__media { clip-path: inset(0 100% 0 0); transition: clip-path var(--t-reveal) var(--ease-in-out); }
  .js [data-wipe="rise"] .fig__media { clip-path: inset(100% 0 0 0); }
  .js [data-wipe="curtain"] .fig__media { clip-path: inset(0 50% 0 50%); }
  .js [data-wipe] .fig__media img { transform: scale(var(--zoom-reveal)); transition: transform var(--t-settle) var(--ease-out); }
  .js [data-wipe].is-in .fig__media { clip-path: inset(0 0 0 0); }
  .js [data-wipe].is-in .fig__media img { transform: none; }

  /* Soft parallax on hero photographs */
  @supports (animation-timeline: scroll()) {
    .hero__media img {
      animation: hero-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
      transform-origin: 50% 100%;
    }
    @keyframes hero-drift { from { transform: scale(var(--zoom-drift)) translateY(0); } to { transform: scale(var(--zoom-drift)) translateY(var(--drift)); } }
  }
}

/* Reduced motion: nothing moves, scales, wipes or drifts. State changes stay
   visible as short colour and opacity cross-fades, so feedback is not lost. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--t-none) !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, text-decoration-color, opacity !important;   /* the focus ring never fades in */
    transition-duration: var(--t-quick) !important; transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .nav, .sticky-cta, .footer, .thumb, .closing .next { display: none !important; }
  body { background: var(--print-ground); color: var(--print-ink); }
  .band--night, .band--stone, .band--sand, .band--tint, .closing, .doc { background: none; color: var(--print-ink); }
}