/* ==========================================================================
   Editorial Ledger: base.css
   Shared by all five pages: tokens, fonts, reset, base type, grid, rules,
   masthead (front and compact), section bar, sections menu, back page footer,
   buttons, links, editorial primitives, letters, reveal states and the page
   turn (view transitions).
   Order: Variables, Reset, Base, Layout, Components, Sections, Utilities,
   Animations, Media Queries. Mobile first: min-width queries at 30rem,
   48rem, 64rem and 80rem.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */

/* Web fonts: instanced, latin subset, self-hosted (fonts/LICENSES.md). */
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-roman.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("../fonts/libre-franklin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

/* Metric-matched fallbacks (next/font method): Windows, macOS, iOS.
   Franklin is always set in caps at 600 and 700, so those two faces are bold
   cuts matched on capital widths; 500 (sentence-case form hints) is matched
   on lowercase. One regular face for all three weights set the caps labels
   at the wrong width, and the swap moved them (DESIGN.md 12). */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); font-weight: 400; size-adjust: 93.8%; ascent-override: 78.4%; descent-override: 28.3%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 800; size-adjust: 86.5%; ascent-override: 84.9%; descent-override: 30.6%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; size-adjust: 87.6%; ascent-override: 83.9%; descent-override: 30.2%; line-gap-override: 0%; }
@font-face { font-family: "Franklin Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 500; size-adjust: 106.1%; ascent-override: 91.1%; descent-override: 23.2%; line-gap-override: 0%; }
@font-face { font-family: "Franklin Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 100.8%; ascent-override: 95.9%; descent-override: 24.4%; line-gap-override: 0%; }
@font-face { font-family: "Franklin Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 101.9%; ascent-override: 94.8%; descent-override: 24.1%; line-gap-override: 0%; }

/* Metric-matched fallbacks: Android. */
@font-face { font-family: "Newsreader Noto Fallback"; src: local("Noto Serif"), local("Noto Serif Regular"), local("NotoSerif-Regular"); font-weight: 400; size-adjust: 86%; ascent-override: 85.5%; descent-override: 30.8%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Noto Fallback"; src: local("Noto Serif Bold"), local("NotoSerif-Bold"); font-weight: 600 800; size-adjust: 87.2%; ascent-override: 84.3%; descent-override: 30.4%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Noto Fallback"; src: local("Noto Serif Italic"), local("NotoSerif-Italic"); font-style: italic; size-adjust: 84.5%; ascent-override: 87%; descent-override: 31.4%; line-gap-override: 0%; }
@font-face { font-family: "Franklin Roboto Fallback"; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); font-weight: 500; size-adjust: 105.6%; ascent-override: 91.5%; descent-override: 23.3%; line-gap-override: 0%; }
@font-face { font-family: "Franklin Roboto Fallback"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600; size-adjust: 109%; ascent-override: 88.6%; descent-override: 22.6%; line-gap-override: 0%; }
@font-face { font-family: "Franklin Roboto Fallback"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 700; size-adjust: 110.3%; ascent-override: 87.6%; descent-override: 22.3%; line-gap-override: 0%; }

:root {
  /* Paper */
  --paper:         #F3EDDF; /* page ground: warm newsprint */
  --paper-deep:    #E8E0CE; /* inside fold: numbers strip, table heads, alternate bands */
  --paper-bright:  #FBF8F1; /* ledger sheet, form panel, letters of the week */
  /* Ink */
  --ink:           #16130F; /* text, heavy rules, ink plates, footer */
  --ink-soft:      #433E36; /* decks, secondary text */
  --ink-muted:     #625B50; /* folios, captions, tags, metadata */
  --hairline:      #CAC0AC; /* decorative rules only, never a control boundary */
  --rule:          #8A8170; /* form field borders, chart tracks (3:1 non-text) */
  /* The one spot color: rubric red. Never encodes a data value. */
  --accent:        #B8291A;
  --accent-deep:   #8C2216; /* hover and pressed accent; error text */
  --accent-wash:   #F4D9CF; /* active ledger row, active filter, footnote :target */
  /* Reverse plates (ink ground) */
  --on-ink:        #F3EDDF;
  --on-ink-soft:   #BAB2A2;
  --accent-on-ink: #FF8B73;
  /* Functional */
  --ledger-line:   #C2CBD3; /* blue ledger ruling, decorative */
  --error:         var(--accent-deep);

  /* Type families */
  --font-serif: "Newsreader", "Newsreader Fallback", "Newsreader Noto Fallback", Georgia, serif;
  --font-sans: "Libre Franklin", "Franklin Fallback", "Franklin Roboto Fallback", Arial, sans-serif;
  --font-arabic: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, serif; /* r035 only, system font */

  /* Fluid type scale, 390px to 1440px. The two Home display sizes also follow
     the viewport height, so short laptop screens keep the deck above the fold. */
  --fs-nameplate: clamp(2.75rem, min(1.357rem + 5.714vw, 10.5vh), 6.5rem);
  --fs-hed-xl:    clamp(2.75rem, min(1.079rem + 6.857vw, 12.5vh), 7.25rem);
  --fs-hed-l:     clamp(2.5rem, 1.293rem + 4.952vw, 5.75rem);
  --fs-figure:    clamp(3.5rem, 1.457rem + 8.381vw, 9rem);
  --fs-plate:     clamp(1.75rem, 0.914rem + 3.429vw, 4rem);
  --fs-hed-m:     clamp(1.875rem, 1.364rem + 2.095vw, 3.25rem);
  --fs-hed-s:     clamp(1.375rem, 1.189rem + 0.762vw, 1.875rem);
  --fs-deck:      clamp(1.1875rem, 1.025rem + 0.667vw, 1.625rem);
  --fs-body:      clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);
  --fs-small:     clamp(0.9375rem, 0.914rem + 0.095vw, 1rem);
  --fs-label:     clamp(0.75rem, 0.727rem + 0.095vw, 0.8125rem);
  --fs-micro:     0.6875rem;

  /* Grid and spacing */
  --margin: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);
  --gutter: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --sheet-max: 85rem;
  --cols: 4;
  --bar-h: 3.25rem;
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --section-pad: clamp(3.5rem, 2.2rem + 5.5vw, 8rem);

  /* Motion: CSS twins of the GSAP eases (main.js registers the same curves) */
  --ease-press: cubic-bezier(.2, .86, .28, 1);
  --ease-rule: cubic-bezier(.7, 0, .2, 1);
  --ease-turn: cubic-bezier(.55, .05, .25, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 640ms;
  --dur-turn: 550ms;

  /* Drawing tools (gradients only as rules, dots and screens) */
  --halftone: radial-gradient(circle, var(--ink) .0625rem, transparent .07rem) 0 0 / .3125rem .3125rem;
  --leader-dots: radial-gradient(circle, var(--ink-muted) .0625rem, transparent .075rem) 0 100% / .375rem .375rem repeat-x;
  /* Paper grain: fractal noise tinted #2A2015, alpha capped at .021 (DESIGN.md 2.6) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .165 0 0 0 0 .125 0 0 0 0 .082 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .021'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
  font-optical-sizing: auto;
  color-scheme: light;
  background-color: var(--paper); /* any gap during a page turn is paper */
}

body,
h1, h2, h3, h4,
p, figure, blockquote, dl, dd, ol, ul { margin: 0; }

ol[class],
ul[class] { padding: 0; list-style: none; }

img { display: block; max-width: 100%; height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; letter-spacing: inherit; }

button { cursor: pointer; }

/* Touch: no grey browser flash on a flat two-ink page; :hover and :active
   states give the feedback. */
a,
button { -webkit-tap-highlight-color: transparent; }

table { border-collapse: collapse; }

dialog { color: inherit; }

/* Lenis (MIT, vendor/LICENSES.md): the three rules of its stylesheet that
   this site needs, kept here so no page waits for a second vendor request. */
html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-stopped { overflow: clip; }

.lenis [data-lenis-prevent] { overscroll-behavior: contain; }


/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

body {
  min-height: 100vh;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: proportional-nums; /* tables and strips switch back to tabular */
  font-kerning: normal;
  color: var(--ink);
  background: var(--grain) 0 0 / 180px 180px, var(--paper);
}

h1, h2, h3 {
  font-weight: 600;
  text-wrap: balance;
}

p { text-wrap: pretty; }

b, strong { font-weight: 650; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  text-underline-offset: .2em;
  transition: color var(--dur-1), text-decoration-color var(--dur-1);
}

a:hover {
  color: var(--accent-deep);
  text-decoration-color: var(--accent);
}

::selection {
  background: var(--accent);
  color: var(--paper-bright);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Every anchor target clears the sticky section bar. */
[id] { scroll-margin-top: calc(var(--bar-h) + 1.5rem); }


/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.sheet {
  width: min(100% - 2 * var(--margin), var(--sheet-max));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

.section { padding-block: var(--section-pad); }

.band-deep { background: var(--paper-deep); }


/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* Icons: inline SVG, 24 grid, square caps, drawn in currentColor. */
.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.icon--brand { fill: currentColor; stroke: none; }

/* Regmark: the wordmark's registration mark, centered on the x-height. */
.regmark {
  display: inline-block;
  width: .36em;
  height: .36em;
  margin-inline: .16em;
  vertical-align: .033em; /* (x-height .426em / 2) - (.36em / 2) */
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: max(1.25px, .022em); /* non-scaling: weighty at nameplate size, never a hairline when compact */
  stroke-linecap: square;
}

/* Rules: hairline, ink, heavy (top of every section head) and double. */
.rule {
  display: block;
  height: 1px;
  background: var(--ink);
  transform-origin: 0 50%;
}

.rule--heavy { height: 3px; }

.rule--double {
  height: calc(4px + .1875rem);
  background: none;
  border-style: solid;
  border-color: var(--ink);
  border-width: 3px 0 1px;
}

/* Kicker: folio first, "A2 · The desks". */
.kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Section head: heavy rule, kicker, h2, optional deck. */
.section-head {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.section-head .rule--heavy { margin-bottom: var(--space-2xs); }

.section-head h2,
.hed-m {
  font-size: var(--fs-hed-m);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -.012em;
  max-width: 20ch;
}

.deck {
  font-size: var(--fs-deck);
  font-style: italic;
  line-height: 1.32;
  color: var(--ink-soft);
  max-width: 40ch;
}

.byline {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Running text: newspaper paragraphs, indented after the first. */
.prose { max-width: 62ch; }
.prose p + p { text-indent: 1.5em; }

/* Drop cap: three lines, rubric red. */
.dropcap::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  font-weight: 680;
  color: var(--accent);
  margin-right: .5rem;
}

@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
  .dropcap::first-letter {
    float: left;
    font-size: 4.1em;
    line-height: .8;
    padding: .06em .08em 0 0;
  }
}

/* Tag: Franklin caps after a small red square. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.tag::before {
  content: "";
  flex: none;
  width: .375rem;
  height: .375rem;
  background: var(--accent);
}

/* The "+" of open-ended figures is rubric red. */
.plus { color: var(--accent); }

/* Buttons: a red layer rises from the bottom on hover. */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 0;
  background: var(--ink);
  color: var(--paper-bright);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-rule);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--dur-2) var(--ease-rule);
}

.btn:hover { color: var(--paper-bright); }
.btn:hover::before { transform: scaleY(1); }
.btn:active::before { transform: scaleY(1); background: var(--accent-deep); }

.btn--line {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

.btn--line::before { background: var(--ink); }

.btn--paper {
  background: var(--paper);
  color: var(--ink);
}

.btn--paper:hover { color: var(--paper-bright); }

/* Jump line: "Continued on B1: Work". */
.jump {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 .3em;
  padding-block: .375rem;
  font-size: var(--fs-deck);
  font-style: italic;
  line-height: 1.3;
  text-decoration: none;
  color: var(--ink);
}

.jump__folio {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
}

.jump__label + .jump__folio { margin-left: .1em; }
.jump__folio + .jump__label { margin-left: -.3em; }

/* A folio and the label after it stay on one line when they share a .nowrap;
   the pair wraps as a unit and the flex gap no longer sits between them. */
.jump .nowrap .jump__label { margin-left: 0; }

.jump .icon {
  align-self: center;
  width: .9em;
  height: .9em;
  transition: transform var(--dur-2) var(--ease-press);
}

.jump::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .125rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease-rule);
}

.jump:hover { color: var(--ink); }
.jump:hover::after { transform: scaleX(1); }
.jump:hover .icon { transform: translateX(4px); }

/* External link marker. The arrow sits left in its box, so the negative right
   margin closes the gap before trailing punctuation. Keep that punctuation on
   the line with <span class="nowrap">...</span>. */
.ext .icon {
  width: .75em;
  height: .75em;
  margin-left: .15em;
  margin-right: -.1em;
  vertical-align: 0;
}

/* Dotted leader for contents and fact lists. */
.leader {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  height: .375rem;
  background: var(--leader-dots);
}

/* Boxes: 1px ink frames ("ears", sidebars, notices). */
.notice {
  position: relative;
  padding: .75rem;
  border: 1px solid var(--ink);
}

.notice__kicker,
.notice__head {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.notice__kicker { color: var(--accent); }

.notice__text {
  margin-top: .375rem;
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-soft);
}

.notice--open {
  padding: 0;
  border: 0;
}

.notice--open + .notice--open {
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--hairline);
}

.notice--placed {
  background: var(--paper-bright);
  border: 0;
}

.notice--placed .notice__head {
  font-family: var(--font-serif);
  font-size: var(--fs-hed-s);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Key: a numbered square tying an explainer callout to the story text. */
.key {
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  margin-inline: .15em;
  vertical-align: -.1em;
  background: var(--accent);
  color: var(--paper-bright);
  font-family: var(--font-sans);
  font-size: .8em;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-indent: 0; /* a key in an indented paragraph keeps its numeral centered */
}

.key--callout {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  font-size: .75rem;
  transform: translate(-50%, -50%);
}

/* Footnotes: letters a to f, both ways. */
.fn-ref {
  font-family: var(--font-sans);
  font-size: .625em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
}

/* A return from the note lands with the whole row (two lines) below the bar. */
.fn-ref a {
  padding: .2em .25em;
  color: var(--accent);
  text-decoration: none;
  scroll-margin-top: calc(var(--bar-h) + 3.5rem);
}

.fn-ref a:hover { color: var(--accent-deep); }

.footnotes {
  display: grid;
  gap: .25rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
}

.footnotes > li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .5rem;
  padding: .375rem .5rem;
  margin-inline: -.5rem;
  transition: background-color var(--dur-3);
}

.footnotes > li:target { background: var(--accent-wash); }

.footnotes__mark {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
}

.footnotes__back {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-block: -.875rem;
  color: var(--ink-muted);
}

/* Numbers strip: figures above labels, tabular. Columns never go narrower
   than their longest word ("FREELANCER.COM"), so no label can overflow.
   2 x 4 below 360px, 4 x 2 up to 64rem, one row of 8 from there (each label
   on one line from 80rem). */
.numbers {
  --cell-pad: .5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(min-content, 1fr));
  font-variant-numeric: tabular-nums;
}

.numbers__cell {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .3125rem;
  padding: .75rem var(--cell-pad) .8125rem;
  border-left: 1px solid var(--hairline);
}

/* The first cell of each row has no rule and no inset. */
.numbers__cell:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
}

.numbers__cell:nth-child(n + 3) { border-top: 1px solid var(--hairline); }

.numbers dt {
  font-family: var(--font-sans);
  font-size: .625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.numbers dd {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
}

.numbers .i-star {
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-left: .06em;
  vertical-align: .02em;
  fill: var(--accent);
}

.numbers__link {
  text-decoration: none;
}

.numbers__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.numbers__link:hover { color: var(--accent-deep); }

/* Slug: a figure that drops into its slot like a type slug. */
.slug {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  padding-block: .12em .06em;
  margin-block: -.12em -.06em;
}

.slug__type { display: inline-block; }

/* Letter (review card). Quote marks are drawn here, never typed in [data-quote]. */
.letter {
  display: grid;
  align-content: start;
  gap: .625rem;
}

.letter__tags {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.letter__tags::before {
  content: "";
  flex: none;
  width: .375rem;
  height: .375rem;
  background: var(--accent);
}

.letter__text {
  font-size: var(--fs-small);
  line-height: 1.45;
}

.letter__text::before { content: "\201C"; }
.letter__text::after { content: "\201D"; }

.letter__sig {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: .25rem .5rem;
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink-muted);
}

.letter__sig::before {
  content: "";
  align-self: center;
  width: 1.5rem;
  height: 1px;
  background: var(--hairline);
}

/* Small caps link with a 2.75rem tall hit area (the padding is taken back by
   the margins, so the line does not grow). */
.letter__more {
  padding-block: .875rem;
  margin-block: -.875rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

.letter--lead .letter__text {
  position: relative;
  font-size: clamp(1.375rem, 1.236rem + .571vw, 1.625rem);
  line-height: 1.35;
}

.letter--lead .letter__text::before {
  position: absolute;
  left: -.05em;
  top: -.42em;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  transform: translateX(-100%);
}

.letter--brief .letter__text {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.004em;
}

.letter--brief .letter__text::before {
  margin-left: -.42em;
  color: var(--accent);
}

.letter--regular .letter__text {
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.4;
}

.letter[data-len="xs"] .letter__text {
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.3;
}

.letter[lang="ar"] .letter__text {
  font-family: var(--font-arabic);
  font-size: 1.25rem;
  font-style: normal;
}

.letter[lang="ar"] .letter__text::before,
.letter[lang="ar"] .letter__text::after { content: none; }

/* Reverse plate (M4): a full-bleed ink plate for one quote. The quote size
   also follows the viewport height, so the longest quote fits the sticky frame. */
.plate {
  --plate-size: min(var(--fs-plate), 7.2vh - .5rem);
  position: relative;
  color: var(--on-ink);
}

.plate__ink {
  position: absolute;
  inset: 0;
  background: var(--ink);
}

.plate__frame {
  position: relative;
  display: grid;
  align-content: center;
  padding-block: var(--section-pad);
}

.plate__body {
  position: relative;
  display: grid;
  gap: var(--space-m);
}

.plate__mark {
  display: block;
  height: .5em;
  margin-bottom: -.06em;
  font-size: calc(var(--plate-size) * 3);
  font-weight: 600;
  line-height: .78;
  color: var(--accent-on-ink);
}

.plate__mark::before { content: "\201C"; }

.plate__quote {
  font-size: var(--plate-size);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  max-width: 24ch;
  text-wrap: balance;
}

.plate__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-xs) var(--space-l);
  max-width: 62rem;
  padding-top: var(--space-s);
  border-top: 1px solid rgb(243 237 223 / .28);
}

.plate__tags {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
}

.plate__sig {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--on-ink-soft);
}

.plate :focus-visible { outline-color: var(--accent-on-ink); }


/* --------------------------------------------------------------------------
   6. Sections: masthead, section bar, sections menu, page head, back page
   -------------------------------------------------------------------------- */

/* Skip link: first focusable, visible on focus. */
.skip-link {
  position: absolute;
  top: .5rem;
  left: var(--margin);
  z-index: 60;
  padding: .75rem 1rem;
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

/* Masthead: utility strip (both variants). */
.masthead__utility {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  min-height: 2.25rem;
  padding-block: .5rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.masthead__date .date-long { display: none; }

/* Wordmark: "Amr" + regmark + "Sakr", with an aria-hidden red twin (the plate). */
.wordmark {
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 560;
  line-height: .9;
  letter-spacing: -.015em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}

.wordmark__ink,
.wordmark__plate { display: block; }

/* Positioned so the black ink prints over its red plate, never under it. */
.wordmark__ink { position: relative; }

.wordmark__word { display: inline-block; }

.wordmark__plate {
  position: absolute;
  inset: 0;
  display: none;
  color: var(--accent);
  pointer-events: none;
}

.motion .wordmark__plate {
  display: block;
  opacity: 0;
}

.wordmark--compact { font-size: 1.375rem; }
.wordmark--nameplate { font-size: var(--fs-nameplate); }

/* At 22px a .36em mark closes up into a dot: the compact mark is larger and finer. */
.wordmark--compact .regmark {
  width: .5em;
  height: .5em;
  margin-inline: .12em;
  vertical-align: -.037em;
  stroke-width: 1px;
}

a.wordmark:hover { color: var(--ink); }

/* Front plate (Home): ears, nameplate, double rule, role line. */
.masthead__plate {
  display: grid;
  justify-items: center;
  padding-top: var(--space-m);
}

.masthead__ear { display: none; }

.masthead__nameplate { padding-block: .25rem .5rem; }

.masthead__rule {
  justify-self: stretch;
  margin-top: var(--space-xs);
}

.masthead__role {
  justify-self: stretch;
  padding-block: .625rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

.masthead__note {
  justify-self: stretch;
  padding-block: .625rem .75rem;
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-soft);
}

.masthead__note a { text-decoration-color: var(--hairline); }

/* Compact plate (inner pages): wordmark left, folio right. */
.masthead__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  min-height: 3.5rem;
  border-bottom: 1px solid var(--ink);
}

.masthead__folio {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Section bar: sticky navigation with letter boxes. */
.sectionbar-sentinel { height: 1px; margin-bottom: -1px; }

.sectionbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--grain) 0 0 / 180px 180px, var(--paper);
  border-bottom: 2px solid var(--ink);
}

.sectionbar__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-m);
  min-height: calc(var(--bar-h) - 2px);
}

.sectionbar__mark {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
}

.sectionbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-s);
}

.sectionbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.sectionbar__link:hover { color: var(--ink); }

.letterbox {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}

.sectionbar__link:hover .letterbox,
.menu__link:hover .letterbox {
  background: var(--ink);
  color: var(--paper-bright);
}

[aria-current="page"] .letterbox {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper-bright);
}

.sectionbar__current {
  display: none;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sectionbar__current b { color: var(--accent); font-weight: 700; }

.sectionbar__toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  margin-left: auto;
  padding: 0 .75rem;
  border: 1.5px solid var(--ink);
  background: transparent;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sectionbar__toggle .icon { width: 1.125rem; height: 1.125rem; }

.sectionbar__cta { display: none; }

/* With JS below 64rem: current section label and a Sections button. */
.js .sectionbar__list { display: none; }
.js .sectionbar__current { display: block; }
.js .sectionbar__toggle { display: inline-flex; }

/* Sections menu: a native modal dialog with a table of contents. */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--grain) 0 0 / 180px 180px, var(--paper);
}

.menu::backdrop { background: var(--paper); }

.menu__sheet { padding-bottom: var(--space-xl); }

.menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--bar-h);
  border-bottom: 2px solid var(--ink);
}

.menu__close {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: 0 .75rem;
  border: 1.5px solid var(--ink);
  background: transparent;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.menu__close .icon { width: 1.125rem; height: 1.125rem; }

.menu__label {
  margin-top: var(--space-l);
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--ink);
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding-block: .875rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: none;
}

.menu__link .letterbox { align-self: center; }

.menu__folio {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
}

.menu__foot {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.menu__note {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--ink-soft);
}

/* Page head (inner pages): heavy rule, kicker, h1, deck. */
.page-head { padding-block: var(--space-xl) var(--space-2xl); }

.page-head__inner { row-gap: var(--space-xs); }

.page-head__inner > * { grid-column: 1 / -1; }

.page-head__hed {
  margin-top: var(--space-2xs);
  font-size: var(--fs-hed-l);
  font-weight: 680;
  line-height: .95;
  letter-spacing: -.02em;
}

.page-head__deck { margin-top: var(--space-s); }

/* A boxed sidebar beside the h1 (Work, Contact): only where the head has 12 columns. */
.page-head__aside { display: none; }

/* Back page: the ink footer. */
.backpage {
  padding-block: var(--space-2xl) var(--space-l);
  background: var(--ink);
  color: var(--on-ink);
}

.backpage a { text-decoration-color: rgb(243 237 223 / .35); }
.backpage a:hover { color: var(--accent-on-ink); text-decoration-color: var(--accent-on-ink); }
.backpage :focus-visible { outline-color: var(--accent-on-ink); }

.backpage__lead {
  display: grid;
  gap: var(--space-m);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgb(243 237 223 / .28);
}

.backpage__line {
  font-size: var(--fs-hed-m);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.012em;
  max-width: 18ch;
}

.backpage__top {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}

.backpage__top .icon { transform: rotate(-90deg); }

.backpage__cols {
  display: grid;
  gap: var(--space-xl) var(--gutter);
  padding-block: var(--space-xl);
}

.backpage__head {
  margin-bottom: var(--space-s);
  padding-bottom: .5rem;
  border-bottom: 1px solid rgb(243 237 223 / .28);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-on-ink);
}

.backpage__links {
  display: grid;
  gap: .125rem;
}

.backpage__links a {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;
  text-decoration: none;
}

.backpage__links .letterbox { border-color: var(--on-ink-soft); }
.backpage__links a:hover .letterbox { background: var(--accent-on-ink); border-color: var(--accent-on-ink); color: var(--ink); }

.backpage__links .icon--brand { width: 1.125rem; height: 1.125rem; color: var(--on-ink-soft); }

.backpage__text {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--on-ink-soft);
  max-width: 34ch;
}

.backpage__text + .btn { margin-top: var(--space-s); }

.backpage__base {
  display: grid;
  gap: var(--space-xs);
  padding-top: var(--space-m);
  border-top: 1px solid rgb(243 237 223 / .28);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
}

/* Each separator is held to the word before it (.nowrap from 30rem), so no
   line starts with one. Below that an item may wrap: the longest one is wider
   than a 320px page. */
.backpage__proof { text-wrap: balance; }
.backpage__proof .nowrap { white-space: normal; }

/* Next: the closing jump to E1 at the foot of Work, Reviews and About. */
.next { padding-block: var(--space-2xl) var(--section-pad); }

.next__inner {
  display: grid;
  justify-items: start;
  gap: var(--space-2xs);
}

.next__note {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.next__jump {
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 3.25rem);
  line-height: 1.1;
}

.next__jump .jump__folio { font-size: .5em; }


/* --------------------------------------------------------------------------
   7. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A drawn column rule (real element, so it can draw top-down: data-reveal="rule-y"). */
.col-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) / -2);
  width: 1px;
  background: var(--hairline);
  transform-origin: 50% 0;
}

.halftone { background: var(--halftone); }

.honeypot {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Keeps a short run together: a last word with its icon and punctuation. */
.nowrap { white-space: nowrap; }


/* --------------------------------------------------------------------------
   8. Animations: hidden states, reveal end states, page turn
   -------------------------------------------------------------------------- */

/* Only .motion hides anything; main.js adds .is-in when a reveal ends.
   Scroll reveals hide with opacity or a transform, never with visibility:
   a heading or a figure that waits below the fold stays in the accessibility
   tree, so the heading order holds and a screen reader reads every word. */
.motion:not([data-arrival="vt"]) [data-intro]:not(.is-in) { visibility: hidden; }
.motion [data-reveal="fade"]:not(.is-in),
.motion [data-reveal="lines"]:not(.is-in),
.motion [data-reveal-item]:not(.is-in),
.motion [data-reveal="slug"]:not(.is-in) .slug__type { opacity: 0; }
.motion [data-reveal="rule"]:not(.is-in) { transform: scaleX(0); }
.motion [data-reveal="rule-y"]:not(.is-in) { transform: scaleY(0); }

/* Line masks: room for ascenders and descenders at tight line heights. The
   mask adds no height: one bottom margin takes back both paddings (a top and
   a bottom margin would collapse between two lines), and the mask moves up by
   its top padding. A paragraph is the same height split and set. */
.split-line-mask {
  position: relative;
  top: -.08em;
  padding-block: .08em .16em;
  margin-bottom: -.24em;
}

/* The nameplate sets from its baseline (M1): its masks stop at the baseline,
   so the letters rise out of the line and never show below it. "Amr Sakr"
   has no descenders, so nothing at rest is clipped. */
.wordmark--nameplate .split-line-mask {
  padding-bottom: 0;
  margin-bottom: -.08em;
  clip-path: inset(-.1em -.1em .22em -.1em);
}

/* No cross-document view transitions: a short entry after an internal link.
   CSS only, so the page never waits for a script; it fills backwards only, so
   no transform stays on main. */
.motion.is-entering main { animation: entry var(--dur-3) var(--ease-press) backwards; }

/* Page turn (M2): native cross-document view transitions. The spine names
   and the turn itself are set in section 9, only when motion is welcome. */
@view-transition { navigation: auto; }

/* The leaf stays opaque for three quarters of the turn, so the old page never
   ghosts over the new headline; it fades only once it is nearly edge-on. */
@keyframes entry {
  from { opacity: 0; transform: translateX(1.5rem); }
}

@keyframes leaf-forward {
  0% { transform: perspective(1800px) rotateY(0); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: perspective(1800px) rotateY(64deg); opacity: 0; }
}

@keyframes leaf-back {
  0% { transform: perspective(1800px) rotateY(0); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: perspective(1800px) rotateY(-64deg); opacity: 0; }
}

/* The page underneath is opaque from the start and settles into place. */
@keyframes leaf-under {
  from { transform: scale(.985); }
  to { transform: none; }
}

/* Wordmark hover: the red plate slips out of register, holds there, snaps
   back into register, then lifts away (at least 2px at the compact size). */
@keyframes misregister {
  0%, 30% { opacity: 1; transform: translate(max(2px, .03em), min(-1px, -.02em)); }
  65% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}


/* --------------------------------------------------------------------------
   9. Media Queries
   -------------------------------------------------------------------------- */

/* Phones from 360px: the numbers strip runs 4 x 2 with tight cells, so the
   headline stays in the first screen (2 x 4 below, where "FREELANCER.COM"
   cannot share a row with three other labels). */
@media (min-width: 22.5rem) {
  .numbers {
    --cell-pad: .375rem;
    grid-template-columns: repeat(4, minmax(min-content, 1fr));
  }

  .numbers__cell:nth-child(odd) { padding-left: var(--cell-pad); border-left: 1px solid var(--hairline); }
  .numbers__cell:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
  .numbers__cell:nth-child(n + 3) { border-top: 0; }
  .numbers__cell:nth-child(n + 5) { border-top: 1px solid var(--hairline); }
  .numbers dt { letter-spacing: .05em; }
}

@media (min-width: 30rem) {
  .backpage__proof .nowrap { white-space: nowrap; }

  .numbers { --cell-pad: .5rem; }
  .numbers dt { letter-spacing: .08em; }
  .numbers dd { font-size: 1.75rem; }
}

@media (min-width: 48rem) {
  :root { --cols: 6; }

  .masthead__date .date-long { display: inline; }
  .masthead__date .date-short { display: none; }
  .masthead__folio { display: block; }

  .numbers { --cell-pad: .75rem; }
  .numbers dt { font-size: var(--fs-micro); letter-spacing: .12em; }
  .numbers dd { font-size: 2rem; }

  .backpage__lead {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .backpage__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .backpage__base {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--gutter);
  }

  .backpage__proof { text-align: right; }
}

@media (min-width: 64rem) {
  :root { --cols: 12; }

  .numbers {
    --cell-pad: .625rem;
    grid-template-columns: repeat(8, minmax(min-content, 1fr));
  }

  .numbers__cell:nth-child(4n + 1) { padding-left: var(--cell-pad); border-left: 1px solid var(--hairline); }
  .numbers__cell:first-child { padding-left: 0; border-left: 0; }
  .numbers__cell:nth-child(n + 5) { border-top: 0; }

  .masthead__plate {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
    padding-top: min(var(--space-m), 2vh);
  }

  .masthead__plate > * { grid-column: 1 / -1; }

  .masthead__ear {
    display: block;
    align-self: center;
  }

  .masthead__ear--left { grid-column: 1 / span 3; grid-row: 1; }
  .masthead__nameplate { grid-column: 4 / span 6; grid-row: 1; justify-self: center; }
  .masthead__ear--right { grid-column: 10 / span 3; grid-row: 1; }
  .masthead__note { display: none; }

  .js .sectionbar__list,
  .sectionbar__list { display: flex; }
  .js .sectionbar__current,
  .js .sectionbar__toggle { display: none; }

  .sectionbar__inner { flex-wrap: nowrap; }

  .sectionbar__list {
    gap: 0 clamp(.75rem, -.5rem + 2vw, 1.75rem);
    transition: transform var(--dur-2) var(--ease-press);
  }

  .sectionbar__link { min-height: calc(var(--bar-h) - 2px); }

  .sectionbar__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--accent);
  }

  .sectionbar__cta {
    display: inline-flex;
    margin-left: auto;
  }

  /* Stuck: the compact wordmark slides in and the links make room. */
  .sectionbar__mark {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-.5rem);
    transition: opacity var(--dur-2) var(--ease-press), transform var(--dur-2) var(--ease-press), visibility 0s linear var(--dur-2);
  }

  .sectionbar.is-stuck .sectionbar__mark {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .sectionbar.is-stuck .sectionbar__list { transform: translateX(8.5rem); }

  .page-head__hed { grid-column: 1 / span var(--span, 10); }
  .page-head__deck { grid-column: 1 / span 7; }

  .page-head__aside {
    display: block;
    grid-column: 9 / -1;
    grid-row: 3 / span 2;
    align-self: end;
  }

  /* Plates: the giant mark hangs in two columns beside the first line. */
  .plate__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .plate__mark {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    justify-self: end;
    margin: 0;
  }

  .plate__quote,
  .plate__foot { grid-column: 3 / span 9; }

  /* Plates (M4): a one-screen sticky frame inside a 130vh plate (a 30vh hold), only with motion. */
  .motion .plate { min-height: 130vh; }

  .motion .plate__frame {
    position: sticky;
    top: var(--bar-h);
    height: calc(100vh - var(--bar-h));
    padding-block: var(--space-l);
  }

  /* A short quote (Work, About) is set larger and narrower, so it fills the plate. */
  .plate--short { --plate-size: min(clamp(2.25rem, 1rem + 4.6vw, 5.5rem), 10vh); }
  .plate--short .plate__quote { max-width: 18ch; }

  .backpage__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 80rem) {
  .numbers dt { white-space: nowrap; }
}

@media (hover: hover) {
  .motion a.wordmark:hover .wordmark__plate,
  .motion .wordmark--nameplate:hover .wordmark__plate { animation: misregister var(--dur-3) var(--ease-press); }
}

/* The page turn runs only when motion is welcome; otherwise a short crossfade. */
@media (prefers-reduced-motion: no-preference) {
  /* The spine: one element each per page, held in place while the leaf turns. */
  .masthead__utility { view-transition-name: utility; }
  .masthead .wordmark { view-transition-name: wordmark; }
  .sectionbar { view-transition-name: sectionbar; }

  /* Past the masthead (section bar stuck) the spine is off screen or pinned
     to the top, so a morph would slide it. The boot script sets .vt-scrolled
     on that page: its spine turns with the leaf instead. */
  .vt-scrolled .masthead__utility,
  .vt-scrolled .masthead .wordmark,
  .vt-scrolled .sectionbar { view-transition-name: none; }

  /* A turn to or from the front page (.vt-front, boot script): a morph between
     the compact wordmark and the nameplate would cross the ears, so each
     wordmark turns with its own leaf. */
  .vt-front .masthead .wordmark { view-transition-name: none; }

  ::view-transition-group(*) {
    animation-duration: var(--dur-turn);
    animation-timing-function: var(--ease-turn);
  }

  /* A spine part on one page only (the other page was scrolled): a short fade
     in place, above the turning leaf, never a slide. */
  ::view-transition-new(utility):only-child,
  ::view-transition-new(wordmark):only-child,
  ::view-transition-new(sectionbar):only-child,
  ::view-transition-old(utility):only-child,
  ::view-transition-old(wordmark):only-child,
  ::view-transition-old(sectionbar):only-child {
    animation-duration: var(--dur-2);
    animation-timing-function: var(--ease-press);
  }

  /* mix-blend-mode: normal on both root snapshots: the UA default (plus-lighter) would add the pages and flash */
  html:active-view-transition-type(forward, back)::view-transition-old(root) { z-index: 1; mix-blend-mode: normal; }
  html:active-view-transition-type(forward, back)::view-transition-new(root) { z-index: 0; mix-blend-mode: normal; }

  /* Thin fold shade on the free edge only: a 1px paper edge plus a narrow shade */
  html:active-view-transition-type(forward)::view-transition-old(root) {
    transform-origin: 0 50%;
    box-shadow: 1px 0 0 rgb(22 19 15 / .14), .5rem 0 .75rem -.5rem rgb(22 19 15 / .2);
    animation: leaf-forward var(--dur-turn) var(--ease-turn) both;
  }

  html:active-view-transition-type(back)::view-transition-old(root) {
    transform-origin: 100% 50%;
    box-shadow: -1px 0 0 rgb(22 19 15 / .14), -.5rem 0 .75rem -.5rem rgb(22 19 15 / .2);
    animation: leaf-back var(--dur-turn) var(--ease-turn) both;
  }

  html:active-view-transition-type(forward)::view-transition-new(root),
  html:active-view-transition-type(back)::view-transition-new(root) {
    animation: leaf-under var(--dur-turn) var(--ease-turn) both;
  }
}

/* The only !important: reduced motion zeroes CSS animation and transition time. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  /* The page turn: no spine names here, so nothing slides or scales; the
     whole page crossfades, quickly. (* never matches these pseudo-elements,
     and the fade runs on the two snapshots, not on the group.) */
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 160ms; }
}

@media (forced-colors: active) {
  .rule,
  .col-rule,
  .leader { background: CanvasText; forced-color-adjust: none; }
  .rule--double { background: none; border-color: CanvasText; }
  .letterbox,
  .key { border: 1px solid CanvasText; }
  :focus-visible { outline-color: Highlight; }
  .plate__ink { background: Canvas; border-block: 1px solid CanvasText; }
}