/* ════════════════════════════════════════════════════════════════════════════
   LINDSTRÖM GROWTH — the shared editorial system
   One stylesheet for every page. Page files add only what is unique to them.
   Reference: /styleguide.html (every primitive, live) and
   .staging/design-contract.md (markup, rules, page recipes).

   Contents
     01 Fonts            07 Type            13 Film strip, contact sheet
     02 Tokens           08 Rules, slugs    14 Lists: credits, spec, index
     03 Base             09 Buttons, links  15 Pull-quote, drop cap, numerals
     04 Layout + grid    10 Forms           16 Lightbox
     05 Masthead (nav)   11 Plates          17 Motion
     06 Footer           12 Portraits       18 Reduced motion + lite mode
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 01 FONTS — self-hosted latin subsets, no third-party requests ───
   Bodoni Moda is variable on the optical-size axis only (one weight, 400): large
   sizes get hairline serifs, small sizes sturdier ones, automatically. */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bodoni-moda-latin.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/bodoni-moda-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/archivo-var.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrains-mono-var.woff2") format("woff2"); }

/* ─── 02 TOKENS ─── */
:root {
  /* Palette: paper and ink. There is no accent colour; photographs and films are
     the only colour on the site. */
  --paper:    #F3EEE4;
  --paper-hi: #F8F5EE;   /* raised: mats, fields, panels */
  --paper-lo: #E8E1D3;   /* recessed: image wells while loading */
  --print:    #EDE7DA;   /* the shared paper tone black-and-white prints sit on */
  --ink:      #141210;
  --ink-2:    #2A2622;   /* hover on ink surfaces */
  --ink-soft: #5E574D;   /* secondary text, 6.2:1 on paper */
  --on-ink-soft: #B9B1A3;/* secondary text on ink, 8.8:1 */

  /* Semantic layer — every primitive reads these, so .on-ink flips a whole section. */
  --bg:      var(--paper);
  --fg:      var(--ink);
  --fg-soft: var(--ink-soft);
  --surface: var(--paper-hi);
  --well:    var(--paper-lo);
  --rule:    rgba(20, 18, 16, 0.14);
  --rule-2:  rgba(20, 18, 16, 0.3);
  --shade:   rgba(60, 46, 30, 0.2);

  /* Type families */
  --f-serif: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --f-sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (fluid). Display sizes are Bodoni; everything from body down is Archivo/mono. */
  --t-mega:  clamp(4.25rem, 15.4vw, 17rem);     /*  68 → 272  cover lines, one to three words */
  --t-xl:    clamp(3.25rem, 8.4vw, 9.25rem);    /*  52 → 148  the stance line, chapter openers */
  --t-l:     clamp(2.625rem, 5.5vw, 6.125rem);  /*  42 →  98  page and section headlines */
  --t-m:     clamp(2rem, 3.5vw, 3.75rem);       /*  32 →  60  sub-heads, names */
  --t-s:     clamp(1.5rem, 2.1vw, 2.125rem);    /*  24 →  34  titles, list rows */
  --t-deck:  clamp(1.25rem, 1.65vw, 1.75rem);   /*  20 →  28  standfirst */
  --t-body:  1.0625rem;                         /*  17 */
  --t-small: 0.9375rem;                         /*  15 */
  --t-mono:  0.6875rem;                         /*  11 */
  --t-micro: 0.65625rem;                        /*  10.5 */

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(72px, 10vw, 168px);          /* vertical breathing room between sections */
  --gutter:  clamp(20px, 4vw, 56px);            /* page margin */
  --gap:     clamp(12px, 1.7vw, 28px);          /* grid column gap */
  --max:     1440px;                            /* widest the text block gets */
  --bleed:   calc(var(--gutter) + max(0px, (100vw - var(--max)) / 2));  /* page edge → text block */
  --measure: 62ch;
  --measure-narrow: 40ch;
  --nav-h:   72px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 0.2s;
  --d-base: 0.6s;
  --d-slow: 1.1s;
}

/* Ink pages: a section, or a band turned to night. Films look best here. */
.on-ink {
  --bg:      var(--ink);
  --fg:      var(--paper);
  --fg-soft: var(--on-ink-soft);
  --surface: #1D1A17;
  --well:    #221F1B;
  --rule:    rgba(243, 238, 228, 0.16);
  --rule-2:  rgba(243, 238, 228, 0.36);
  --shade:   rgba(0, 0, 0, 0.6);
  background: var(--bg); color: var(--fg);
}
.on-paper {
  --bg: var(--paper); --fg: var(--ink); --fg-soft: var(--ink-soft); --surface: var(--paper-hi); --well: var(--paper-lo);
  --rule: rgba(20, 18, 16, 0.14); --rule-2: rgba(20, 18, 16, 0.3); --shade: rgba(60, 46, 30, 0.2);
  background: var(--bg); color: var(--fg);
}

/* ─── 03 BASE ─── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--paper); scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Page turns: a soft cross-fade between pages where the browser supports it. */
  @view-transition { navigation: auto; }
}
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--f-sans); font-size: var(--t-body); font-weight: 400; line-height: 1.55;
  font-optical-sizing: auto; font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; overflow-x: clip;
}
::selection { background: var(--fg); color: var(--bg); }
a { color: inherit; text-decoration: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; }
h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1; text-wrap: balance; }
h1 em, h2 em, h3 em, h4 em { font-style: italic; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 18px; transform: translateY(-200%); transition: transform var(--d-fast) ease-out;
}
.skip-link:focus-visible { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ─── 04 LAYOUT + THE 12-COLUMN MAGAZINE GRID ─── */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.55); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--ruled { border-top: 1px solid var(--rule); }
/* The first block on a page that has no cover: clears the fixed masthead. */
.page-top { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 112px)); }
/* A full screen, content centred. Use for single-idea moments only. */
.screen { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.screen > .wrap { width: 100%; }

/* 12 columns. Place children with .span-N (width) and .at-N (start column).
   Good spreads are asymmetric: 7 + 4 with a gap column, 5 + 6, 8 + 3 — not 6 + 6. */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--row-gap, var(--s-7)); align-items: start; }
.grid--end { align-items: end; }       /* headline and deck share a baseline at the foot */
.grid--center { align-items: center; }
.grid--tight { --row-gap: var(--s-5); }
.grid > * { grid-column: 1 / -1; min-width: 0; }
.span-1  { grid-column-end: span 1; }  .span-2  { grid-column-end: span 2; }  .span-3  { grid-column-end: span 3; }
.span-4  { grid-column-end: span 4; }  .span-5  { grid-column-end: span 5; }  .span-6  { grid-column-end: span 6; }
.span-7  { grid-column-end: span 7; }  .span-8  { grid-column-end: span 8; }  .span-9  { grid-column-end: span 9; }
.span-10 { grid-column-end: span 10; } .span-11 { grid-column-end: span 11; } .span-12 { grid-column-end: span 12; }
.grid > [class*="span-"] { grid-column-start: auto; }
.grid > .at-1  { grid-column-start: 1; }  .grid > .at-2  { grid-column-start: 2; }  .grid > .at-3  { grid-column-start: 3; }
.grid > .at-4  { grid-column-start: 4; }  .grid > .at-5  { grid-column-start: 5; }  .grid > .at-6  { grid-column-start: 6; }
.grid > .at-7  { grid-column-start: 7; }  .grid > .at-8  { grid-column-start: 8; }  .grid > .at-9  { grid-column-start: 9; }
.grid > .at-10 { grid-column-start: 10; } .grid > .at-11 { grid-column-start: 11; } .grid > .at-12 { grid-column-start: 12; }
.row-1 { grid-row: 1; } .row-2 { grid-row: 2; } .row-3 { grid-row: 3; }   /* put two children on one row regardless of source order */
.self-start { align-self: start; } .self-center { align-self: center; } .self-end { align-self: end; }
.justify-end { justify-self: end; }
/* Vertical offsets: step a column down so two images never sit on one line. */
.drop-1 { margin-top: var(--s-8); } .drop-2 { margin-top: var(--s-10); } .drop-3 { margin-top: calc(var(--s-10) * 1.6); }
/* Run an image off the page edge, like a bleed in print. */
.bleed-r { margin-right: calc(var(--bleed) * -1); }
.bleed-l { margin-left: calc(var(--bleed) * -1); }
.sticky { position: sticky; top: calc(var(--nav-h) + 24px); }     /* a caption or heading that stays while a column scrolls */

/* Stacks: vertical rhythm without margin soup. */
.stack > * + * { margin-top: var(--stack, var(--s-5)); }
.stack--xs { --stack: var(--s-2); } .stack--s { --stack: var(--s-4); } .stack--l { --stack: var(--s-7); } .stack--xl { --stack: var(--s-9); }
.mt-0 { margin-top: 0 !important; } .mt-s { margin-top: var(--s-4); } .mt-m { margin-top: var(--s-6); } .mt-l { margin-top: var(--s-8); } .mt-xl { margin-top: var(--s-9); }
.measure { max-width: var(--measure); } .measure-narrow { max-width: var(--measure-narrow); }
.center { text-align: center; margin-inline: auto; }

@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--row-gap, var(--s-6)); }
  .grid > [class*="span-"], .grid > [class*="at-"] { grid-column: 1 / -1; }
  .grid > [class*="row-"] { grid-row: auto; }
  .grid > .sm-span-1 { grid-column: auto / span 1; } .grid > .sm-span-2 { grid-column: auto / span 2; } .grid > .sm-span-3 { grid-column: auto / span 3; }
  .grid > .sm-at-2 { grid-column-start: 2; } .grid > .sm-at-3 { grid-column-start: 3; }
  .grid > .sm-first { order: -1; }
  .drop-1, .drop-2, .drop-3 { margin-top: 0; }
  .sm-drop { margin-top: var(--s-7); }
  .sticky { position: static; }
  .sm-hide { display: none !important; }
}
@media (min-width: 861px) { .lg-hide { display: none !important; } }

/* ─── 05 MASTHEAD (NAV) — links left, wordmark centred, proposal button right ───
   Fixed; clear at the top of the page, frosted cream once the page scrolls
   (js/site.js adds .scrolled). The proposal button is visible at every width. */
.word { font-family: var(--f-serif); font-weight: 400; font-size: 1.625rem; line-height: 1; letter-spacing: -0.012em; color: var(--fg); white-space: nowrap; }
.word em { font-style: italic; }
.word--lg { font-size: clamp(2rem, 3.4vw, 3.25rem); }

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent; color: var(--ink);
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out);
}
.nav.scrolled, .nav.menu-open {
  background: rgba(243, 238, 228, 0.86);
  -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px);
  border-bottom-color: rgba(20, 18, 16, 0.14);
}
.nav.menu-open { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
/* Over an ink section (js/site.js adds .on-ink): light type on dark glass. */
.nav.on-ink:not(.menu-open) { color: var(--paper); }
.nav.on-ink.scrolled:not(.menu-open) { background: rgba(20, 18, 16, 0.82); border-bottom-color: rgba(243, 238, 228, 0.16); }
.nav.on-ink:not(.menu-open) .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.nav-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; }
.nav .word { color: inherit; justify-self: center; grid-column: 2; }
.nav-links { grid-column: 1; grid-row: 1; display: flex; gap: clamp(18px, 2.2vw, 32px); align-items: center; }
.nav-links a, .nav-toggle { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.nav-links a { position: relative; padding: 14px 0; opacity: 0.66; transition: opacity .25s var(--ease-out); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { opacity: 1; } .nav-links a:hover::after { transform: scaleX(1); } }
.nav-end { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 6px; }
.nav .btn { padding: 12px 18px; }
/* Over a dark cover image: paper-coloured until the page scrolls. */
.nav--over-dark:not(.scrolled):not(.menu-open) { color: var(--paper); }
.nav--over-dark:not(.scrolled):not(.menu-open) .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* Two hairlines, not a hamburger. 44 × 44 touch target. */
.nav-toggle { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; flex: none; color: inherit; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease-out); }
.nav-toggle span:nth-child(1) { top: 18px; } .nav-toggle span:nth-child(2) { top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
html:not(.js) .nav-toggle { display: none !important; }
@media (max-width: 860px) {
  :root { --nav-h: 64px; }
  .nav-row { grid-template-columns: auto 1fr; }
  .nav .word { grid-column: 1; justify-self: start; font-size: 1.3125rem; }
  .nav-links { display: none; }
  .nav-end { grid-column: 2; }
  .nav-toggle { display: block; margin-right: -11px; }
  .nav .btn { padding: 11px 13px; letter-spacing: 0.1em; }
  .nav .btn .long { display: none; }
}
@media (max-width: 860px) { html:not(.js) .nav-links { display: flex; position: absolute; top: 100%; left: var(--gutter); } }

/* Full-screen menu (small screens): the links at headline size. */
.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--paper); color: var(--ink);
  display: flex; align-items: flex-end; padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease-out), visibility 0s linear .3s;
}
html:not(.js) .menu { display: none; }
.menu.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s var(--ease-out), visibility 0s; }
.menu-inner { display: flex; flex-direction: column; width: 100%; }
.menu-inner > * { transform: translateY(16px); opacity: 0; transition: transform .5s var(--ease-out), opacity .5s var(--ease-out); }
.menu.open .menu-inner > * { transform: none; opacity: 1; }
.menu.open .menu-inner > :nth-child(2) { transition-delay: .05s; }
.menu.open .menu-inner > :nth-child(3) { transition-delay: .1s; }
.menu.open .menu-inner > :nth-child(4) { transition-delay: .15s; }
.menu.open .menu-inner > :nth-child(5) { transition-delay: .2s; }
.menu-inner > a:not(.btn) {
  font-family: var(--f-serif); font-size: clamp(2.75rem, 13vw, 4.5rem); line-height: 1; letter-spacing: -0.025em;
  padding: 14px 0 18px; border-top: 1px solid var(--rule);
  display: flex; justify-content: flex-start; align-items: baseline; gap: 0;
}
.menu-inner > a:not(.btn) em { font-style: italic; }
.menu-inner > a:not(.btn) .mono { flex: none; }
.menu-inner > a:not(.btn) em { margin-left: 0.22em; }
.menu-inner > a:not(.btn) .mono { margin-left: auto; padding-left: 16px; }
.menu-inner .btn { margin-top: 28px; padding: 19px 22px; }
.menu-inner .menu-note { margin-top: 20px; }
body.menu-open { overflow: hidden; }
/* The very narrowest phones: the masthead keeps the wordmark and the menu button; the
   proposal button is the first thing inside the menu. */
@media (max-width: 350px) { .nav .nav-end .btn { display: none; } }

/* ─── 06 FOOTER (compact; identical on every page) ─── */
.foot { border-top: 1px solid var(--ink); padding: clamp(28px, 3.4vw, 48px) 0 clamp(24px, 2.6vw, 36px); background: var(--paper); color: var(--ink); }
.foot-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px 40px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 2.4vw, 36px); font-size: var(--t-small); }
.foot-links a, .foot-mail { padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1px no-repeat; transition: background-size .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover, .foot-mail:hover { background-size: 100% 1px; } }
.foot-base { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 40px; margin-top: clamp(24px, 3vw, 44px); padding-top: 16px; border-top: 1px solid var(--rule); }
.foot-legal { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.7; }
.foot-mail { font-size: var(--t-small); overflow-wrap: anywhere; }
/* "Cookie settings": a button that reads as one of the footer links (shown by js/consent.js). */
.foot-cookie { -webkit-appearance: none; appearance: none; border: 0; border-radius: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1px no-repeat; transition: background-size .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot-cookie:hover { background-size: 100% 1px; } }
@media (max-width: 560px) {
  .foot-top { display: block; }
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; margin-top: 22px; font-size: var(--t-body); }
  .foot-links a, .foot-cookie { justify-self: start; padding: 8px 0; }
  .foot-base { display: block; }
  .foot-mail { display: inline-block; margin-top: 10px; }
}

/* ─── 07 TYPE ───
   Display = Bodoni Moda, set tight and large, roman paired with italic (<em>).
   One italic phrase per headline; the italic carries the emphasis, never bold. */
.t-mega, .t-xl, .t-l, .t-m, .t-s { font-family: var(--f-serif); font-weight: 400; text-wrap: balance; }
.t-mega { font-size: var(--t-mega); line-height: 0.84; letter-spacing: -0.035em; }
.t-xl   { font-size: var(--t-xl);   line-height: 0.94; letter-spacing: -0.028em; }
.t-l    { font-size: var(--t-l);    line-height: 0.98; letter-spacing: -0.022em; }
.t-m    { font-size: var(--t-m);    line-height: 1.02; letter-spacing: -0.02em; }
.t-s    { font-size: var(--t-s);    line-height: 1.1;  letter-spacing: -0.012em; }
.t-mega em, .t-xl em, .t-l em, .t-m em, .t-s em, .it { font-style: italic; }
.roman { font-style: normal; }
/* Stepped lines: mark each line with .ln and push some in. A two- or three-line
   headline stepped like this is the quickest way out of "centred heading". */
.ln { display: block; }
.in-1 { padding-left: 0.55em; } .in-2 { padding-left: 1.1em; } .in-3 { padding-left: 1.65em; }
.nowrap { white-space: nowrap; }

/* Deck (standfirst): the sentence under a headline. Serif, never more than three lines. */
.deck { font-family: var(--f-serif); font-size: var(--t-deck); line-height: 1.3; letter-spacing: -0.008em; max-width: 34ch; text-wrap: balance; }
.deck em { font-style: italic; }
.deck--wide { max-width: 46ch; }

/* Body */
.body { font-size: var(--t-body); line-height: 1.62; max-width: var(--measure); }
.body > * + * { margin-top: 1em; }
.body a, .text-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--rule-2); transition: text-decoration-color .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .body a:hover, .text-link:hover { text-decoration-color: currentColor; } }
.small { font-size: var(--t-small); line-height: 1.55; }
.soft { color: var(--fg-soft); }
.cols-2 { columns: 2; column-gap: var(--gap); max-width: none; }
.cols-2 > * { break-inside: avoid; }
@media (max-width: 860px) { .cols-2 { columns: 1; } }

/* Mono: labels, captions, credits. Uppercase, widely tracked, always small. */
.mono, .label, .caption, .credit {
  font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.6;
  color: var(--fg-soft);
}
.mono--ink, .caption b, .credit b { color: var(--fg); font-weight: 400; }
/* Label: the kicker above a headline, led by a short ink rule. */
.label { display: flex; align-items: center; gap: 12px; letter-spacing: 0.16em; }
.label::before { content: ""; width: 28px; height: 1px; background: var(--fg); flex: none; }
.label--bare::before { content: none; }
/* Credit line: who made it, where. "Made by August at Remotion" lives here. */
.credit { display: flex; flex-wrap: wrap; gap: 4px 0; }
.credit > * + *::before { content: "·"; margin: 0 0.9em; color: var(--fg-soft); }

/* ─── 08 RULES + SLUGS ─── */
.rule { border: 0; border-top: 1px solid var(--rule); width: 100%; }
.rule--ink { border-top-color: var(--fg); }
.rule--double { border-top: 3px solid var(--fg); position: relative; height: 7px; overflow: visible; }
.rule--double::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--fg); }
.rule--short { width: 56px; border-top-color: var(--fg); }
/* Slug: the running line that opens a section — label, hairline, note. */
.slug { display: flex; align-items: center; gap: 16px; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-soft); line-height: 1.6; }
.slug::before { content: ""; order: 2; flex: 1; height: 1px; background: var(--rule-2); min-width: 24px; }
.slug > :first-child { order: 1; color: var(--fg); }
.slug > :last-child:not(:first-child) { order: 3; text-align: right; }
.slug--ink::before { background: var(--fg); }
.slug-h { font: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; }

/* ─── 09 BUTTONS + LINKS ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2;
  padding: 16px 22px; border: 1px solid var(--fg); border-radius: 0; background: var(--fg); color: var(--bg);
  cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none;
  transition: transform .18s var(--ease-out), background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn.ghost, .btn--ghost { background: transparent; color: var(--fg); border-color: var(--rule-2); }
.btn--lg { padding: 21px 30px; font-size: 0.75rem; }
.btn--block { display: flex; width: 100%; }
.btn .arr, .arrow-link .arr { display: inline-block; transition: transform .3s var(--ease-out); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
  .on-ink .btn:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }
  .btn.ghost:hover, .btn--ghost:hover, .on-ink .btn--ghost:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
  .btn:hover .arr, .arrow-link:hover .arr { transform: translateX(4px); }
}
/* Arrow link: the quiet call to action. Serif, underlined by a hairline that draws in. */
.arrow-link {
  display: inline-flex; align-items: baseline; gap: 0.5em; font-family: var(--f-serif); font-size: var(--t-s); line-height: 1.15; letter-spacing: -0.012em;
  padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.arrow-link--mono { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 5px; }

/* ─── 10 FORMS — lines to write on, not boxes ─── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field + .field { margin-top: var(--s-5); }
.field-lab { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); transition: color .2s var(--ease-out); }
.field-lab i { font-style: normal; text-transform: none; letter-spacing: 0; font-family: var(--f-sans); font-size: 0.8125rem; }
.field:focus-within .field-lab { color: var(--fg); }
.field input, .field textarea, .field select, .input {
  font-family: var(--f-serif); font-size: clamp(1.375rem, 2vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--fg);
  background: transparent; border: 0; border-bottom: 1px solid var(--field-line, rgba(20, 18, 16, 0.5)); border-radius: 0; padding: 8px 0 12px; width: 100%;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 3.6em; font-family: var(--f-sans); font-size: var(--t-body); line-height: 1.55; letter-spacing: 0; }
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: var(--fg-soft); opacity: 1; font-style: italic; }
.on-ink .field input, .on-ink .field textarea, .on-ink .field select, .on-ink .input { --field-line: rgba(243, 238, 228, 0.5); }
.field input:focus, .field textarea:focus, .field select:focus, .input:focus { outline: none; border-bottom-color: var(--fg); box-shadow: 0 1px 0 0 var(--fg); }
.field [aria-invalid="true"] { border-bottom-color: var(--fg); box-shadow: 0 2px 0 0 var(--fg); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--fg); -webkit-box-shadow: 0 0 0 1000px var(--bg) inset, 0 1px 0 0 var(--fg); caret-color: var(--fg); }
.field-msg, .form-msg { font-size: var(--t-small); line-height: 1.5; color: var(--fg); margin-top: 10px; }
.field-msg::before, .form-msg::before { content: "— "; }
.field-msg:empty, .form-msg:empty { display: none; }
.form-note { font-size: 0.8125rem; line-height: 1.6; color: var(--fg-soft); }
.form-note a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--rule-2); }

/* Choices: a radio set as numbered editorial rows. The checked row turns to ink. */
.choices { counter-reset: choice; border-bottom: 1px solid var(--rule-2); }
.choice { position: relative; display: block; cursor: pointer; counter-increment: choice; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice > span {
  display: grid; grid-template-columns: 2.6em 1fr auto; align-items: baseline; column-gap: 8px;
  padding: clamp(14px, 1.5vw, 22px) clamp(10px, 1vw, 16px) clamp(15px, 1.6vw, 24px) 0;
  border-top: 1px solid var(--rule-2);
  font-family: var(--f-serif); font-size: clamp(1.5rem, 2.5vw, 2.625rem); line-height: 1.05; letter-spacing: -0.018em;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), padding .4s var(--ease-out);
}
.choice > span::before { content: counter(choice, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; color: var(--fg-soft); transition: color .3s var(--ease-out); }
.choice > span::after { content: "→"; font-family: var(--f-sans); font-size: 0.6em; opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease-out), transform .4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .choice:hover > span { padding-left: clamp(10px, 1vw, 16px); }
  .choice:hover > span::after { opacity: 1; transform: none; }
}
.choice input:checked + span { background: var(--fg); color: var(--bg); padding-left: clamp(10px, 1vw, 16px); }
.choice input:checked + span::before { color: inherit; opacity: 0.7; }
.choice input:checked + span::after { opacity: 1; transform: none; }
.choice input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
html:not(.js) .choice input { position: static; opacity: 1; width: auto; height: auto; margin-right: 10px; }
/* The quiet extra option under the set ("Not sure yet"). */
.choice--quiet { counter-increment: none; margin-top: 14px; display: inline-block; }
.choice--quiet > span { display: inline; border: 0; padding: 0; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.choice--quiet > span::before, .choice--quiet > span::after { content: none; }
.choice--quiet:hover > span { padding: 0; }
.choice--quiet input:checked + span { background: none; color: var(--fg); padding: 0; }
/* Steps: "1 / 3" and a hairline that fills. Set --step and --steps on .steps. */
.steps { display: flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); }
.steps-bar { flex: 1; height: 1px; background: var(--rule-2); position: relative; max-width: 220px; }
.steps-bar::after { content: ""; position: absolute; inset: -0.5px 0; background: var(--fg); height: 2px; transform-origin: left; transform: scaleX(calc(var(--step, 1) / var(--steps, 3))); transition: transform .6s var(--ease-out); }

/* ─── 11 PLATES — every image and film on the site is a plate ───
   <figure class="plate ar-16x9"> <div class="plate-frame"> img | video </div>
     <figcaption class="plate-cap"> .plate-no · .plate-title · .plate-credit </figcaption> </figure>
   Plates number themselves ("Plate 01") inside the nearest [data-plates] ancestor. */
[data-plates] { counter-reset: plate; }
.plate { --ar: 16 / 9; display: block; position: relative; min-width: 0; }
.ar-16x9 { --ar: 16 / 9; } .ar-3x2 { --ar: 3 / 2; } .ar-4x3 { --ar: 4 / 3; } .ar-1x1 { --ar: 1 / 1; }
.ar-4x5 { --ar: 4 / 5; } .ar-3x4 { --ar: 3 / 4; } .ar-2x3 { --ar: 2 / 3; } .ar-9x16 { --ar: 9 / 16; } .ar-21x9 { --ar: 21 / 9; } .ar-3x1 { --ar: 3 / 1; }
.plate-frame { position: relative; display: block; width: 100%; aspect-ratio: calc(var(--ar)); overflow: hidden; background: var(--well); isolation: isolate; }
.plate-frame > img, .plate-frame > picture, .plate-frame > picture > img, .plate-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate-frame--contain > img, .plate-frame--contain > picture > img, .plate-frame--contain > video { object-fit: contain; }
/* Caption bar: number left, title in the middle, credit right; a hairline above. */
.plate-cap {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px; row-gap: 2px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.6; color: var(--fg-soft);
}
.plate-no { color: var(--fg); counter-increment: plate; white-space: nowrap; }
.plate-no:empty::before { content: "Plate " counter(plate, decimal-leading-zero); }
.plate-title { color: var(--fg); min-width: 0; }
.plate-credit { text-align: right; }
.plate-cap--stack { grid-template-columns: auto minmax(0, 1fr); }
.plate-cap--stack .plate-credit { grid-column: 2; text-align: left; }
/* A serif title under the caption bar, when a plate is the entry to a project. */
.plate-head { margin-top: 14px; font-family: var(--f-serif); font-size: var(--t-s); line-height: 1.08; letter-spacing: -0.012em; }
.plate-head em { font-style: italic; }
@media (max-width: 560px) {
  .plate-cap { grid-template-columns: auto minmax(0, 1fr); }
  .plate-cap .plate-credit { grid-column: 2; text-align: left; }
}
/* Inset (matted): the image sits in a lighter mat with a hairline, like a mounted print. */
.plate--mat .plate-frame { outline: 1px solid var(--rule); outline-offset: clamp(6px, 0.8vw, 12px); margin: clamp(7px, calc(0.8vw + 1px), 13px); width: auto; box-shadow: 0 0 0 clamp(6px, 0.8vw, 12px) var(--surface), 0 34px 60px -38px var(--shade); }
.plate--mat .plate-cap { border-top: 0; }
/* Soft floor shadow for a plate that should lift off the page. */
.plate--lift .plate-frame { box-shadow: 0 40px 70px -44px var(--shade); }
/* Full bleed: edge to edge. Place it outside .wrap; the caption keeps the page margin. */
.plate--bleed .plate-cap { margin-inline: var(--bleed); }
.plate--bleed .plate-frame { max-height: 92vh; max-height: 92svh; }
/* Corner tag (format or running time) and the play mark, for films. */
.plate-tag { position: absolute; z-index: 3; top: 12px; left: 12px; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; padding: 7px 8px 6px; background: var(--paper); color: var(--ink); }
.plate-tag--r { left: auto; right: 12px; }
.plate-play {
  position: absolute; z-index: 3; right: 14px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink); display: grid; place-items: center;
  transition: transform .35s var(--ease-out), background-color .25s var(--ease-out);
}
.plate-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.plate-play--lg { width: clamp(64px, 7vw, 104px); height: clamp(64px, 7vw, 104px); right: clamp(16px, 2.4vw, 36px); bottom: clamp(16px, 2.4vw, 36px); }
/* The whole frame is the hit area when the play mark is the only control. */
.plate-play--cover::after { content: ""; position: absolute; inset: -200vmax; }
.plate-frame:has(.plate-play--cover) { cursor: pointer; }
/* The hover/in-view loop that js/site.js lays over the poster. */
.plate-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity .5s var(--ease-out); pointer-events: none; }
.plate-loop.is-playing { opacity: 1; }
/* Interactive plates breathe on hover: the image eases in 2 %. */
.plate-frame > img, .plate-frame > picture > img { transition: transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.plate:hover .plate-frame > img, a.plate:hover .plate-frame > picture > img,
  .plate-frame[data-film]:hover > img, .plate-frame[data-film]:hover > picture > img,
  .plate-frame:has(.plate-play):hover > img, .plate-frame:has(.plate-play):hover > picture > img { transform: scale(1.025); }
  .plate-frame:hover .plate-play, .plate-play:hover { transform: scale(1.08); }
}

/* Cover: a full-bleed opening image with the headline set on it, like a magazine cover.
   Put .nav--over-dark on the masthead of a page that opens with one. */
.cover { position: relative; min-height: min(100vh, 1100px); min-height: min(100svh, 1100px); display: flex; align-items: flex-end; color: var(--paper); background: var(--ink); overflow: hidden; isolation: isolate; }
.cover-media { position: absolute; inset: 0; z-index: -2; }
.cover-media > img, .cover-media > picture > img, .cover-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A reading scrim, bottom and top, so type and masthead hold on any frame. */
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20, 18, 16, 0.78) 0%, rgba(20, 18, 16, 0.3) 38%, rgba(20, 18, 16, 0) 62%), linear-gradient(to bottom, rgba(20, 18, 16, 0.5) 0%, rgba(20, 18, 16, 0) 22%); }
.cover-body { width: 100%; padding-top: calc(var(--nav-h) + 40px); padding-bottom: clamp(20px, 3vw, 40px); --fg: var(--paper); --fg-soft: rgba(243, 238, 228, 0.78); --rule: rgba(243, 238, 228, 0.3); --rule-2: rgba(243, 238, 228, 0.5); --bg: var(--ink); }
.cover-cap { margin-top: clamp(20px, 3vw, 44px); padding-top: 12px; border-top: 1px solid var(--rule-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.6; color: var(--fg-soft); }
.cover-cap b { font-weight: 400; color: var(--paper); }

/* Overlap: a headline that crosses from the page onto a photograph and inverts where
   it does. Use only over black-and-white or near-monochrome images (colour would
   shift). The container needs its own background so the blend has something to read. */
.overlap { position: relative; isolation: isolate; background: var(--bg); }
.knockout { position: relative; z-index: 2; color: var(--paper); mix-blend-mode: difference; }
.on-ink .knockout { color: var(--paper); }
.pull-up-1 { margin-top: -0.42em; } .pull-up-2 { margin-top: -0.62em; }   /* on the headline: rise into the image above */
.pull-left-1 { margin-left: -0.6em; } .pull-right-1 { margin-right: -0.6em; }
@media (max-width: 860px) { .pull-left-1 { margin-left: 0; } .pull-right-1 { margin-right: 0; } }

/* ─── 12 PORTRAITS — black-and-white photographs on a cream page ───
   The sources are shot against slightly different whites. Each print is multiplied
   onto one shared paper tone (--print) and mounted in a lighter mat with a weighted
   foot, so four photographs read as one set of prints. The people are untouched. */
.portrait { display: block; min-width: 0; }
.portrait-print { display: block; background: var(--paper-hi); border: 1px solid rgba(20, 18, 16, 0.14); padding: clamp(6px, 0.8vw, 14px); box-shadow: 0 30px 56px -40px var(--shade); transition: box-shadow .6s var(--ease-out), transform .6s var(--ease-out); }
.portrait-print > picture, .portrait-print > .portrait-img { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--print); isolation: isolate; }
.portrait-print img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.03); }
.portrait--4x5 .portrait-print > picture, .portrait--4x5 .portrait-print > .portrait-img { aspect-ratio: 4 / 5; }
/* Mat caption: plate number and name printed on the weighted foot of the mat. */
.portrait-mat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: clamp(10px, 1vw, 16px) 2px clamp(4px, 0.4vw, 8px); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; color: var(--ink-soft); }
.portrait-mat b { font-weight: 400; color: var(--ink); }
/* Caption under the print: name in serif, role in mono. */
.portrait-cap { padding-top: 14px; display: grid; gap: 5px; }
.portrait-name { font-family: var(--f-serif); font-size: var(--t-s); line-height: 1.02; letter-spacing: -0.015em; }
.portrait-role { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-soft); line-height: 1.5; }
/* Bare: no mat, the print tone straight on the page (small sizes, contact rows). */
.portrait--bare .portrait-print { padding: 0; border: 0; box-shadow: none; background: none; }
@media (hover: hover) and (pointer: fine) { a.portrait:hover .portrait-print { box-shadow: 0 44px 64px -40px var(--shade); transform: translateY(-4px); } }

/* Profile: one person as a spread. The print holds one side, full height. The name,
   at cover size, starts on the page and crosses into the headroom of the photograph,
   inverting wherever it meets hair or cloth (the backdrop there is always light, so
   it stays readable). .profile--flip mirrors it. Alternate the two down the Team page.
     <article class="profile"> .profile-print (a .portrait) · .profile-name · .profile-intro · .profile-more */
.profile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--gap); position: relative; isolation: isolate; background: var(--bg); }
.profile > * { min-width: 0; }
.profile-print { grid-column: 1 / span 5; grid-row: 1 / span 3; }
.profile-name  { grid-column: 4 / -1; grid-row: 1; align-self: start; position: relative; z-index: 2; pointer-events: none;
  font-family: var(--f-serif); font-weight: 400; font-size: var(--t-mega); line-height: 0.8; letter-spacing: -0.04em;
  color: var(--paper); mix-blend-mode: difference; margin-top: clamp(22px, 3.2vw, 56px); padding-bottom: 0.08em; }
.profile-name em { font-style: italic; }
.profile-intro { grid-column: 7 / -1; grid-row: 2; margin-top: clamp(24px, 3vw, 48px); }
.profile-more  { grid-column: 7 / -1; grid-row: 3; align-self: end; margin-top: clamp(32px, 4vw, 64px); }
.profile--flip .profile-print { grid-column: 8 / -1; }
.profile--flip .profile-name  { grid-column: 1 / span 9; text-align: right; }
.profile--flip .profile-intro, .profile--flip .profile-more { grid-column: 1 / span 6; }
@media (max-width: 860px) {
  .profile, .profile--flip { display: flex; flex-direction: column; }
  .profile .profile-name { order: 1; margin: 0 0 -0.36em; font-size: clamp(5rem, 27vw, 9rem); text-align: right; }
  .profile--flip .profile-name { text-align: left; }
  .profile .profile-print { order: 2; margin-right: 14%; }
  .profile--flip .profile-print { margin-right: 0; margin-left: 14%; }
  .profile .profile-intro { order: 3; margin-top: var(--s-6); }
  .profile .profile-more { order: 4; margin-top: var(--s-6); }
}

/* ─── 13 FILM STRIP + CONTACT SHEET ───
   Strip: one horizontal row of frames at a shared height, numbered, scrollable
   (drag, wheel, keys). Give each frame its ratio: style="--ar: 9 / 16". */
.strip { --strip-h: clamp(220px, 27vw, 420px); counter-reset: frame; display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: var(--bleed); scroll-padding-inline: var(--bleed); -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.strip--s { --strip-h: clamp(150px, 18vw, 260px); }
.strip-frame { --ar: 16 / 9; flex: none; scroll-snap-align: start; counter-increment: frame; width: calc(var(--strip-h) * var(--ar)); }
.strip-frame .plate-frame { height: var(--strip-h); width: 100%; aspect-ratio: auto; }
.strip-cap { display: block; margin-top: 9px; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; color: var(--fg-soft); }
.strip-cap::before { content: counter(frame, decimal-leading-zero); color: var(--fg); margin-right: 12px; }
/* Marquee strip: the same row, drifting on its own (decorative; duplicate the frames
   once inside .strip-track and mark the copy aria-hidden). Pauses on hover. */
.strip--auto { overflow: hidden; padding-inline: 0; }
.strip-track { display: flex; gap: var(--gap); padding-right: var(--gap); flex: none; animation: strip-drift var(--strip-speed, 80s) linear infinite; }
.strip--auto:hover .strip-track, .strip--auto:focus-within .strip-track { animation-play-state: paused; }
@keyframes strip-drift { to { transform: translateX(-100%); } }

/* Contact sheet: many frames, small, each at its true ratio, rows justified.
   style="--ar: 9 / 16" on every .sheet-frame; --rh sets the row height. */
.sheet { --rh: clamp(120px, 15vw, 230px); counter-reset: frame; display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 16px); }
.sheet::after { content: ""; flex: 100 1 0; }                 /* keeps the last row from stretching */
.sheet-frame { --ar: 1 / 1; flex: calc(var(--ar)) 1 calc(var(--ar) * var(--rh)); min-width: 0; counter-increment: frame; display: block; position: relative; }
.sheet-frame .plate-frame { aspect-ratio: calc(var(--ar)); }
.sheet-cap { display: block; margin-top: 7px; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.45; color: var(--fg-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sheet-cap::before { content: counter(frame, decimal-leading-zero); color: var(--fg); margin-right: 10px; }
.sheet--l { --rh: clamp(200px, 26vw, 420px); gap: var(--gap); }
@media (max-width: 560px) { .sheet { --rh: 30vw; } .sheet--l { --rh: 58vw; } }

/* ─── 14 LISTS ─── */
/* Credits: term in mono, value in sans, hairlines between. <dl class="credits"> */
.credits { display: grid; grid-template-columns: minmax(7em, auto) minmax(0, 1fr); border-top: 1px solid var(--fg); }
.credits dt { padding-right: var(--s-5) !important; }
.credits dt, .credits dd { padding: 11px 0 12px; border-bottom: 1px solid var(--rule); }
.credits dt { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); line-height: 1.9; }
.credits dd { font-size: var(--t-small); line-height: 1.5; }
/* Spec: a numbered list of specialties or facts, serif rows. <ol class="spec"> */
.spec { counter-reset: spec; border-top: 1px solid var(--fg); }
.spec > li { counter-increment: spec; display: grid; grid-template-columns: 3em minmax(0, 1fr); align-items: baseline; padding: 12px 0 14px; border-bottom: 1px solid var(--rule); font-family: var(--f-serif); font-size: clamp(1.25rem, 1.6vw, 1.625rem); line-height: 1.15; letter-spacing: -0.01em; }
.spec > li::before { content: counter(spec, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; color: var(--fg-soft); }
.spec > li small { grid-column: 2; display: block; margin-top: 4px; font-family: var(--f-sans); font-size: var(--t-small); line-height: 1.5; letter-spacing: 0; color: var(--fg-soft); }
/* Index: a contents list of links. Number, title, note, arrow. <ol class="index"> */
.index { counter-reset: idx; border-bottom: 1px solid var(--rule-2); }
.index > li { counter-increment: idx; }
.index a { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto 1.5em; align-items: baseline; column-gap: 12px; padding: clamp(14px, 1.6vw, 24px) 0 clamp(16px, 1.8vw, 28px); border-top: 1px solid var(--rule-2); transition: padding .45s var(--ease-out), border-color .3s var(--ease-out); }
.index a::before { content: counter(idx, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; color: var(--fg-soft); }
.index a::after { content: "→"; font-size: 1.1rem; text-align: right; transition: transform .45s var(--ease-out); }
.index-title { font-family: var(--f-serif); font-size: clamp(1.75rem, 3.4vw, 3.5rem); line-height: 1; letter-spacing: -0.022em; }
.index-title em { font-style: italic; }
.index-note { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); text-align: right; }
@media (hover: hover) and (pointer: fine) {
  .index a:hover { padding-left: 14px; border-top-color: var(--fg); }
  .index a:hover::after { transform: translateX(4px); }
}
@media (max-width: 700px) {
  .index a { grid-template-columns: 2.6em minmax(0, 1fr) 1.2em; }
  .index-note { grid-column: 2; grid-row: 2; text-align: left; margin-top: 6px; }
}

/* ─── 15 PULL-QUOTE, DROP CAP, NUMERALS ─── */
/* Pull-quote: only for words someone actually said or the company's own lines. */
.pullquote { font-family: var(--f-serif); font-style: italic; font-size: var(--t-m); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; position: relative; padding-top: 22px; border-top: 1px solid var(--fg); max-width: 22ch; }
.pullquote--xl { font-size: var(--t-l); line-height: 1; max-width: 16ch; }
.pullquote > footer, .pullquote > cite { display: block; margin-top: 18px; font-family: var(--f-mono); font-style: normal; font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); line-height: 1.6; }
.pullquote--hang { padding-left: 0; }
.pullquote--hang::before { content: "“"; position: absolute; right: 100%; margin-right: 0.08em; }
/* Drop cap: on the first paragraph of a longer text, never on a one-liner. */
.dropcap::first-letter { font-family: var(--f-serif); float: left; font-size: 5.1em; line-height: 0.74; padding: 0.08em 0.1em 0 0; margin-left: -0.03em; font-weight: 400; }
/* Numeral: an oversized Bodoni figure as a graphic (step numbers, plate numbers). */
.numeral { font-family: var(--f-serif); font-size: var(--t-xl); line-height: 0.8; letter-spacing: -0.03em; font-feature-settings: "lnum" 1; }
.numeral--mega { font-size: var(--t-mega); }
.numeral--it { font-style: italic; }
.numeral--ghost { color: transparent; -webkit-text-stroke: 1px var(--rule-2); }
/* Ticker: one line of display type drifting across the page (decorative; duplicate
   the content once and mark the copy aria-hidden). */
.ticker { overflow: hidden; white-space: nowrap; display: flex; border-block: 1px solid var(--rule); padding-block: clamp(14px, 1.8vw, 28px); }
.ticker-track { flex: none; display: flex; align-items: baseline; gap: 0.6em; padding-right: 0.6em; font-family: var(--f-serif); font-size: var(--t-l); line-height: 1; letter-spacing: -0.022em; animation: strip-drift var(--ticker-speed, 60s) linear infinite; }
.ticker-track em { font-style: italic; }
.ticker-track .sep { width: 0.14em; height: 0.14em; border-radius: 50%; background: currentColor; align-self: center; flex: none; margin-inline: 0.25em; }

/* ─── 17 MOTION — short, precise, transform and opacity only ───
   js/site.js adds .in when an element enters the viewport (once).
   Everything here is switched off in section 18 for reduced motion and lite mode. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal--fade { transform: none; }
.js .reveal--left { transform: translateX(-22px); }
.js .reveal--right { transform: translateX(22px); }
.js .reveal.in { opacity: 1; transform: none; }
/* Stagger: children of a revealed parent arrive 80 ms apart. */
.js .stagger > * { opacity: 0; transform: translateY(14px); transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); }
.js .stagger.in > * { opacity: 1; transform: none; }
.js .stagger.in > :nth-child(2) { transition-delay: 80ms; }  .js .stagger.in > :nth-child(3) { transition-delay: 160ms; }
.js .stagger.in > :nth-child(4) { transition-delay: 240ms; } .js .stagger.in > :nth-child(5) { transition-delay: 320ms; }
.js .stagger.in > :nth-child(6) { transition-delay: 400ms; } .js .stagger.in > :nth-child(7) { transition-delay: 480ms; }
.js .stagger.in > :nth-child(n+8) { transition-delay: 560ms; }
/* Image settle: the picture inside a frame eases from 106 % to rest as it appears. */
.js .reveal-img { opacity: 0; transition: opacity var(--d-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal-img .plate-frame > img, .js .reveal-img .plate-frame > picture > img, .js .reveal-img .portrait-print img, .js .reveal-img .cover-media > img, .js .reveal-img .cover-media > picture > img { transform: scale(1.06); transition: transform 1.6s var(--ease-out); transition-delay: inherit; }
.js .reveal-img.in { opacity: 1; }
.js .reveal-img.in .plate-frame > img, .js .reveal-img.in .plate-frame > picture > img, .js .reveal-img.in .portrait-print img, .js .reveal-img.in .cover-media > img, .js .reveal-img.in .cover-media > picture > img { transform: none; }
/* Line rise: each .ln slides up from behind its own baseline.
   <h1 class="t-xl rise"><span class="ln"><span>Proof of</span></span><span class="ln in-1"><span><em>work.</em></span></span></h1> */
.rise .ln { overflow: hidden; padding: 0.1em 0.14em 0.16em; margin: -0.1em -0.14em -0.16em; }
.rise .ln.in-1 { padding-left: calc(0.55em + 0.14em); } .rise .ln.in-2 { padding-left: calc(1.1em + 0.14em); } .rise .ln.in-3 { padding-left: calc(1.65em + 0.14em); }
.rise .ln > span { display: inline-block; }
.js .rise .ln > span { transform: translateY(112%); transition: transform 1s var(--ease-out); }
.js .rise.in .ln > span { transform: none; }
.js .rise.in .ln:nth-child(2) > span { transition-delay: 90ms; } .js .rise.in .ln:nth-child(3) > span { transition-delay: 180ms; } .js .rise.in .ln:nth-child(4) > span { transition-delay: 270ms; }
/* Write-in: words darken one after another (js/site.js wraps the words in .w). */
.writein .w { display: inline-block; opacity: 0.1; transform: translateY(0.1em); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--w, 0) * 60ms); }
.writein.in .w { opacity: 1; transform: none; }
html:not(.js) .writein .w { opacity: 1; transform: none; }
/* Rule draw: a hairline that draws from the left as it enters. */
.js .draw { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out); }
.js .draw.in { transform: none; }
/* Drift: a held image that moves almost imperceptibly while on screen. */
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06); } }
.drift.in .plate-frame > img, .drift.in .cover-media > img, .drift.in .cover-media > picture > img, .drift.in .plate-frame > picture > img { animation: drift 18s linear both; transition: none; }

/* ─── 18 REDUCED MOTION + LITE MODE — everything above stands still ─── */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in, .js .stagger > *, .js .reveal-img, .js .rise .ln > span, .writein .w, .js .draw,
  .menu-inner > *, .plate-frame > img, .plate-frame > picture > img,
  .js .reveal-img .plate-frame > img, .js .reveal-img .plate-frame > picture > img, .js .reveal-img .portrait-print img, .js .reveal-img .cover-media > img, .js .reveal-img .cover-media > picture > img {
    opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important;
  }
  .strip-track, .ticker-track, .drift.in img { animation: none !important; }
  .strip--auto { overflow-x: auto; }
  .portrait-print, .plate-play, .btn, .btn .arr, .index a, .choice > span, .steps-bar::after, .nav, .menu { transition: none !important; animation: none !important; }
  .plate-loop { display: none; }
}
/* Lite mode (weak computers, see js/guard.js): no blur, no blend-heavy effects, no motion. */
.lite *, .lite *::before, .lite *::after, .lite ::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.lite .nav.scrolled { background: rgba(243, 238, 228, 0.98); }
.lite .nav.on-ink.scrolled:not(.menu-open) { background: rgba(20, 18, 16, 0.97); }
.lite.js .reveal, .lite.js .stagger > *, .lite.js .reveal-img, .lite.js .rise .ln > span, .lite .writein .w, .lite.js .draw,
.lite .plate-frame > img, .lite .plate-frame > picture > img, .lite.js .reveal-img .portrait-print img, .lite.js .reveal-img .cover-media > img, .lite.js .reveal-img .cover-media > picture > img {
  opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important;
}
.lite .strip-track, .lite .ticker-track, .lite .drift.in img { animation: none !important; }
.lite .strip--auto { overflow-x: auto; }
.lite .plate-loop { display: none; }

/* If js/site.js never ran (see the safety net in js/guard.js), show everything. */
.reveal-all .reveal, .reveal-all .stagger > *, .reveal-all .reveal-img, .reveal-all .rise .ln > span, .reveal-all .writein .w, .reveal-all .draw,
.reveal-all .reveal-img img { opacity: 1 !important; transform: none !important; }

@media print {
  .nav, .menu, .skip-link { display: none !important; }
  .js .reveal, .js .stagger > *, .js .reveal-img, .js .rise .ln > span, .writein .w { opacity: 1 !important; transform: none !important; }
}

/* ─── 19 CONSENT — the cookie strip (js/consent.js). A slim band of raised paper at the
   foot of the window, never an overlay: the page stays readable and usable behind it.
   The two answers are the same button, same size, same weight. ─── */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  background: var(--paper-hi); color: var(--ink); border-top: 1px solid var(--ink);
  padding: clamp(16px, 1.8vw, 24px) 0; padding-bottom: max(clamp(16px, 1.8vw, 24px), env(safe-area-inset-bottom));
  max-height: 86vh; max-height: 86svh; overflow-y: auto;
  opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out);
}
.consent.is-in { opacity: 1; transform: none; }
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: 18px clamp(24px, 4vw, 64px); }
.consent-copy { min-width: 0; max-width: 64ch; }
.consent-label { color: var(--ink-soft); margin-bottom: 6px; }
.consent-text { font-size: var(--t-small); line-height: 1.5; }
.consent-text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--rule-2); white-space: nowrap; }
.consent-acts { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px 10px; flex: none; }
.consent-btn { min-width: 10.5rem; }
.consent-link {
  grid-column: 1 / -1; justify-self: center; -webkit-appearance: none; appearance: none; background: none; border: 0; cursor: pointer; padding: 4px 0;
  font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--rule-2);
}
@media (hover: hover) and (pointer: fine) { .consent-link:hover, .consent-text a:hover { text-decoration-color: currentColor; } }

/* Choosing: the two purposes, each with its own switch. */
.consent-opts, .consent-save { display: none; }
.consent.is-choosing .consent-opts { display: grid; gap: 0; margin-top: 14px; border-top: 1px solid var(--rule-2); }
.consent.is-choosing .consent-save { display: inline-flex; grid-column: 1 / -1; }
.consent.is-choosing .consent-choose { display: none; }
.consent-opt { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.consent-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent-switch { flex: none; position: relative; width: 38px; height: 22px; margin-top: 1px; border: 1px solid var(--ink); background: transparent; transition: background-color .2s var(--ease-out); }
.consent-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--ink); transition: transform .25s var(--ease-out), background-color .2s var(--ease-out); }
.consent-opt input:checked + .consent-switch { background: var(--ink); }
.consent-opt input:checked + .consent-switch::after { transform: translateX(16px); background: var(--paper-hi); }
.consent-opt input:focus-visible + .consent-switch { outline: 2px solid var(--ink); outline-offset: 3px; }
.consent-opt-copy { font-size: var(--t-small); line-height: 1.45; }
.consent-opt-copy b { display: block; font-weight: 600; }
.consent-opt-copy span { color: var(--ink-soft); }

@media (max-width: 860px) {
  .consent-row { display: block; }
  .consent-acts { margin-top: 16px; }
  .consent-btn { min-width: 0; width: 100%; padding-left: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .consent, .consent-switch, .consent-switch::after { transition: none; } .consent { opacity: 1; transform: none; } }
.lite .consent { transition: none; opacity: 1; transform: none; }
@media print { .consent { display: none !important; } }