/* Fonts are self-hosted and subset to Latin. No third-party request, no
   render dependency on a network Google can rate-limit, and no visitor data
   leaving the site to load type. */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* =============================================================
   Cross Caribou Promise Foundation
   v2 — aged paper, ink, broken grid.

   Brand values live in :root. Everything downstream follows them.
   Texture is procedural (see make_paper.py); the grain tile is
   periodic by construction, and the stain plates are large and used
   at different scales so no repeat is detectable.
   ============================================================= */

:root {
  /* --- BRAND (sampled from the Foundation logo) --- */
  --brand-navy:     #001A3C;
  --brand-gold:     #C7994D;   /* accent on dark grounds only */
  --brand-gold-ink: #553D11;   /* gold as text on paper — darkened to clear 4.5:1
                                  against the darkest stained paper, measured */
  --paper:          #F2EADA;   /* warm stock */
  --paper-2:        #E7DAC0;   /* ledger stock, recessed */

  /* --- INK --- */
  --ink:        #131E2C;
  --ink-mute:   #3A4450;
  --ink-faint:  #453F32;
  --gold:       var(--brand-gold);
  --gold-ink:   var(--brand-gold-ink);

  /* Rules are ink at low strength, never gray */
  --rule:       rgba(19, 30, 44, 0.30);
  --rule-soft:  rgba(19, 30, 44, 0.15);
  --rule-firm:  rgba(19, 30, 44, 0.62);

  /* --- TYPE --- */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--2: clamp(0.68rem, 0.66rem + 0.08vw, 0.73rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1.03rem, 0.99rem + 0.2vw, 1.15rem);
  --step-1:  clamp(1.22rem, 1.13rem + 0.42vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.36rem + 0.9vw, 2.15rem);
  --step-3:  clamp(2.0rem, 1.62rem + 1.8vw, 3.2rem);
  --step-4:  clamp(2.5rem, 1.75rem + 3.2vw, 4.35rem);
  --step-5:  clamp(3.2rem, 1.7rem + 6.8vw, 7.4rem);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 33rem;
  --max: 86rem;

  /* This design commits to one visual world: ink on aged paper. There is no
     dark variant, and pretending otherwise would mean inventing a second
     palette that fights the whole premise.

     `only light` is the strong form. Plain `light` still lets Chrome's
     automatic dark theming repaint the page on Android; `only light` opts out
     of that as well. Without either, the browser leaves the page cream but
     renders form fields, dropdowns, scrollbars and autofill in its own dark
     colours — which is what made dark mode look broken. */
  color-scheme: only light;
}

/* =============================================================
   RESET
   ============================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* THE PAPER: cream stock multiplied by a seamless fiber tile. */
  background-color: var(--paper);
  background-image: url("../img/tex/grain.jpg");
  background-size: 640px 640px;
  background-blend-mode: multiply;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.6;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;      /* contains the full-bleed sections; keeps sticky working */
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.014em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

::selection { background: var(--brand-navy); color: var(--paper); }

:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; z-index: 100;
  font-family: var(--mono); font-size: var(--step--1);
}
.skip:focus { left: 1rem; top: 1rem; }

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================
   PAPER — stain plates, laid per section at different scales
   ============================================================= */

/* Each leaf carries its own sheet of paper.

   This matters: mix-blend-mode only blends against the backdrop inside the
   nearest stacking context, and any positioned element with a z-index makes
   one. Relying on the body background to be that backdrop breaks the moment a
   section needs z-index for an overlap — the stain then composites as a
   near-white plate and the section comes out LIGHTER than the page around it.
   Giving the leaf its own ground makes the blend correct in every case. */
.leaf {
  position: relative;
  background-color: var(--paper);
  background-image: url("../img/tex/grain.jpg");
  background-size: 640px 640px;
  background-blend-mode: multiply;
}
.leaf > * { position: relative; z-index: 1; }
.leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.leaf--a::before { background-image: url("../img/tex/stain-a.jpg"); background-position: 82% 12%; opacity: 0.8; }
.leaf--b::before { background-image: url("../img/tex/stain-b.jpg"); background-position: 10% 70%; transform: scaleX(-1); }
.leaf--c::before { background-image: url("../img/tex/stain-c.jpg"); background-position: 50% 40%; opacity: 0.9; }
.leaf--d::before { background-image: url("../img/tex/stain-a.jpg"); background-position: 20% 88%; transform: scale(-1, 1) rotate(180deg); }

/* =============================================================
   LAYOUT — a 12 column field the content deliberately ignores
   ============================================================= */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.25rem);
}

/* Deliberately irregular placements. Named, not numbered, so they are
   chosen per section rather than applied by reflex. */
.set-left    { grid-column: 1 / span 7; }
.set-indent  { grid-column: 3 / span 7; }
.set-right   { grid-column: 6 / span 7; }
.set-far     { grid-column: 8 / span 5; }
.set-narrow  { grid-column: 2 / span 5; }
.set-wide    { grid-column: 2 / span 10; }
.set-margin  { grid-column: 1 / span 2; }

@media (max-width: 62rem) {
  .set-left, .set-indent, .set-right, .set-far,
  .set-narrow, .set-wide, .set-margin { grid-column: 1 / -1; }

  /* Sections are placed with inline grid-column values so each one can be
     composed by hand. Inline styles outrank normal rules, so collapsing the
     field on small screens needs !important — without it a section keeps its
     desktop placement and tries to hold, say, 7 of 12 columns at 390px. */
  /* grid-row has to be reset alongside grid-column. Some sections pin two
     items to the same explicit row so they sit side by side on desktop; once
     every item is full width, that row assignment stacks them on top of each
     other instead of one after the other. */
  .grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* Break the container: run to the viewport edge on one side only. */
.bleed-r { margin-right: calc(50% - 50vw); }
.bleed-l { margin-left: calc(50% - 50vw); }
@media (max-width: 62rem) {
  .bleed-r { margin-right: calc(-1 * var(--gutter)); }
  .bleed-l { margin-left: calc(-1 * var(--gutter)); }
}

/* Overlap the section below. */
.lift { position: relative; z-index: 5; margin-bottom: clamp(-7.5rem, -6vw, -3rem); }
@media (max-width: 62rem) { .lift { margin-bottom: 0; } }

/* Section rhythm is set per section, never inherited. */
.s-xl { padding-block: clamp(4.5rem, 9vw, 9rem); }
.s-lg { padding-block: clamp(3.5rem, 7vw, 7rem); }
.s-md { padding-block: clamp(2.75rem, 5vw, 4.75rem); }
.s-sm { padding-block: clamp(2rem, 3.5vw, 3rem); }

/* =============================================================
   RULES — letterpress, ragged, never a full-width hairline by default
   ============================================================= */

.rule-dbl {
  border: 0;
  border-top: 1px solid var(--rule-firm);
  border-bottom: 1px solid var(--rule-firm);
  height: 3px;
  margin: 0;
  background: transparent;
}
.rule-rag {
  border: 0; border-top: 1px solid var(--rule);
  height: 0; margin: 0;
  width: var(--rag, 42%);
}
.rule-hair { border: 0; border-top: 1px solid var(--rule-soft); height: 0; margin: 0; }
.rule-top { border-top: 1px solid var(--rule); }

/* A dinkus — the ornament that separates passages in a printed record. */
.dinkus {
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem; color: var(--brand-navy);
  padding-block: clamp(2rem, 4vw, 3.25rem);
}
.dinkus span { width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); }
.dinkus span:nth-child(2) { width: 7px; height: 7px; }

/* =============================================================
   TYPE
   ============================================================= */

.mono {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  font-variant-numeric: lining-nums;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: lining-nums;
  display: flex; align-items: baseline; gap: 0.7rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.eyebrow b { font-weight: 500; color: var(--brand-navy); }
.eyebrow::after {
  content: ""; width: var(--rag, 3.5rem); height: 1px;
  background: var(--rule); transform: translateY(-0.25em);
}

/* Vertical label running up the outside edge. */
.spine {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
@media (max-width: 62rem) { .spine { display: none; } }

.display {
  font-size: var(--step-4);
  line-height: 0.97;
  letter-spacing: -0.03em;
}
.display em { font-style: italic; letter-spacing: -0.022em; }

.h2 { font-size: var(--step-3); line-height: 1.03; letter-spacing: -0.026em; }
.h3 { font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.018em; }
.h4 { font-size: var(--step-1); line-height: 1.22; }

.lede { font-size: var(--step-1); line-height: 1.48; color: var(--ink-mute); max-width: 32rem; }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.05em; }
.prose--wide { max-width: 42rem; }

/* Drop cap — set into three lines, the way a printed page opens. */
.dropcap::first-letter {
  float: left;
  font-size: 3.72em;
  line-height: 0.79;
  padding: 0.06em 0.09em 0 0;
  margin-right: 0.02em;
  color: var(--brand-navy);
  font-weight: 500;
}

.tlink {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 140ms ease, color 140ms ease;
}
.tlink:hover { text-decoration-color: var(--gold-ink); color: var(--gold-ink); }

/* Marginalia — a hand note in the gutter. */
.marginalia {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  border-left: 1px solid var(--brand-navy);
  padding-left: 0.85rem;
  max-width: 12rem;
}

/* =============================================================
   STAMPS AND SEALS — ink that breaks up, because real ink does
   ============================================================= */

.stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--brand-navy);
  border: 2px solid currentColor;
  padding: 0.5rem 0.9rem;
  text-align: center;
  opacity: 0.62;
  -webkit-mask-image: url("../img/tex/ink-mask.png");
  mask-image: url("../img/tex/ink-mask.png");
  -webkit-mask-size: 260px;
  mask-size: 260px;
  -webkit-mask-position: 30% 40%;
  mask-position: 30% 40%;
}
.stamp small { display: block; font-size: 0.62rem; letter-spacing: 0.14em; opacity: 0.85; margin-top: 0.2rem; }
.stamp--gold { color: var(--gold-ink); opacity: 0.7; }

.seal { width: clamp(7rem, 11vw, 9.5rem); height: auto; color: var(--gold-ink); opacity: 0.85; }

/* =============================================================
   HEADER
   ============================================================= */

.dateline {
  background: var(--brand-navy);
  background-image: url("../img/tex/ink-grain.jpg");
  background-size: 460px;
  background-blend-mode: screen;
  color: #C2CBD8;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-block: 0.6rem;
}
.dateline .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.masthead {
  position: sticky; top: 0; z-index: 40;
  background-color: var(--paper);
  background-image: url("../img/tex/grain.jpg");
  background-size: 640px;
  background-blend-mode: multiply;
  border-bottom: 1px solid var(--rule-firm);
  box-shadow: 0 1px 0 var(--rule-soft);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 5.4rem;
}

.wordmark { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.wordmark__logo { height: 3.7rem; width: auto; flex-shrink: 0; }
@media (max-width: 40rem) { .wordmark__logo { height: 2.6rem; } }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__list { display: flex; gap: clamp(1rem, 2vw, 2rem); align-items: center; }
.nav a {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease, color 140ms ease;
}
.nav a:hover { border-bottom-color: var(--ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--gold-ink); color: var(--gold-ink); }

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.72rem 1.15rem;
  background: var(--brand-navy);
  color: var(--paper);
  border: 1px solid var(--brand-navy);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.btn:hover { background: #0A2A50; border-color: #0A2A50; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-firm); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--lg { padding: 0.95rem 1.65rem; font-size: 0.76rem; }

.nav__toggle { display: none; }

@media (max-width: 62rem) {
  /* Only collapse the menu when there is a script to open it again.
     Without JS the links simply wrap and stay reachable. */
  .js .nav__list, .js .nav .btn { display: none; }
  .nav__list { flex-wrap: wrap; gap: 0.75rem 1.1rem; }
  .js .nav__toggle {
    display: block; background: none;
    border: 1px solid var(--rule-firm);
    padding: 0.6rem 0.9rem;
    font-family: var(--mono); font-size: 0.7rem;
    letter-spacing: 0.13em; text-transform: uppercase;
    cursor: pointer; color: inherit;
  }
  .js .nav--open .nav__list {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background-color: var(--paper);
    background-image: url("../img/tex/grain.jpg");
    background-size: 640px; background-blend-mode: multiply;
    border-bottom: 1px solid var(--rule-firm);
    padding: var(--gutter);
  }
  .js .nav--open .nav__list a { font-size: 0.9rem; padding-block: 0.85rem; }
  .js .nav--open .btn { display: inline-block; margin-top: 1rem; }
}

/* =============================================================
   HERO
   ============================================================= */

.hero { position: relative; z-index: 3; padding-block: clamp(3.25rem, 7vw, 7rem) clamp(2rem, 4vw, 3.5rem); }
.hero__head { grid-column: 1 / span 8; }
.hero__aside { grid-column: 9 / span 4; align-self: end; }
.hero__spine { grid-column: 12; justify-self: end; }
@media (max-width: 68rem) {
  .hero__head, .hero__aside { grid-column: 1 / -1; }
  .hero__aside { margin-top: 2.5rem; }
}

/* Headline hangs into the left margin — the optical alignment a
   compositor would set, not the mechanical one a container gives you. */
.hero h1 { margin-left: -0.055em; }

.hero__sub {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-left: clamp(0rem, 8vw, 7.5rem);   /* indented off-axis from the headline */
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-mute);
  max-width: 31rem;
}
.hero__actions {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  margin-left: clamp(0rem, 8vw, 7.5rem);
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}

/* The disclosure — a slip of paper laid on the page, slightly askew. */
.disclose {
  border-left: 3px solid var(--brand-navy);
  background-color: var(--paper-2);
  background-image: url("../img/tex/grain.jpg");
  background-size: 400px;
  background-blend-mode: multiply;
  border: 1px solid var(--rule-firm);
  padding: 1.5rem 1.35rem 1.25rem;
  position: relative;
  box-shadow: 0 10px 22px -20px rgba(19,30,44,0.6);
}
.disclose__label {
  position: absolute; top: -0.68em; left: 1.1rem;
  background: var(--paper-2);
  padding-inline: 0.55rem;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand-navy);
}
.disclose p { font-size: 0.95rem; line-height: 1.52; }
.disclose p + p { margin-top: 0.75em; }
.disclose a { display: inline-block; padding-block: 0.3rem; font-family: var(--mono); font-size: 0.69rem; letter-spacing: 0.11em; text-transform: uppercase; }

/* =============================================================
   LEDGER — the "happening now" band, set like a register page
   ============================================================= */

.ledger {
  position: relative;
  z-index: 1;
  background-color: var(--paper-2);
  background-image: url("../img/tex/stain-c.jpg"), url("../img/tex/grain.jpg");
  background-size: cover, 520px;
  background-position: 30% 50%, 0 0;
  background-blend-mode: multiply, multiply;
  border-top: 3px double var(--brand-navy);
  border-bottom: 3px double var(--brand-navy);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.ledger__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 0.9rem;
  border-bottom: 3px double var(--rule-firm);
  margin-bottom: 2rem;
}
.ledger__title {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}
.ledger__note { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--ink-faint); }

/* Deliberately unequal columns — a register is ruled by content, not by thirds. */
.ledger__list {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.85fr;
  gap: 0;
}
.ledger__item { padding-right: clamp(1rem, 3vw, 2.5rem); }
.ledger__item + .ledger__item {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1rem, 3vw, 2.5rem);
}
.ledger__when {
  font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-navy); display: block; margin-bottom: 0.6rem;
}
.ledger__what { font-size: var(--step-1); line-height: 1.22; letter-spacing: -0.016em; }
.ledger__meta {
  margin-top: 0.7rem;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.03em; color: var(--ink-faint); line-height: 1.6;
}
@media (max-width: 58rem) {
  .ledger__list { grid-template-columns: 1fr; }
  .ledger__item { padding-right: 0; }
  .ledger__item + .ledger__item {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule);
    margin-top: 1.4rem; padding-top: 1.4rem;
  }
}

/* =============================================================
   ENTRIES — staggered, with a ghosted numeral behind each
   ============================================================= */

/* Three columns: numeral, body, status. The numerals were previously absolute
   watermarks sitting behind headings of different lengths, at different left
   offsets — so no two lined up and each one collided with its own heading.
   In the grid they share one column and one baseline. */
.entry {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr) 7.5rem;
  column-gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding-block: clamp(2rem, 3.5vw, 3.25rem);
}
.entry + .entry { border-top: 1px solid var(--rule-soft); }

.entry__num {
  font-size: var(--step-2);
  line-height: 1.06;
  color: var(--brand-navy);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
  padding-top: 0.1em;              /* sits on the heading's cap line */
  border-top: 2px solid var(--brand-navy);
  padding-block-start: 0.5rem;
  user-select: none;
}
.entry__body { min-width: 0; }
.entry__body h3 { margin-bottom: 0.65rem; }
.entry__body p { color: var(--ink-mute); max-width: 36rem; }
.entry__body .tlink {
  display: inline-block; margin-top: 0.75rem;
  padding-block: 0.4rem;           /* keeps the target at least 24px tall */
  font-family: var(--mono); font-size: 0.69rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink);
}
.entry__tag { margin: 0; padding-top: 0.55rem; justify-self: start; }
@media (max-width: 62rem) {
  .entry { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .entry__num { font-size: var(--step-1); }
  .entry__tag { grid-column: 2; padding-top: 1rem; }
}

.tag {
  display: inline-block;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  white-space: nowrap;
}
.tag--live { border-color: var(--brand-navy); color: var(--brand-navy); }
.tag--soon { border-color: var(--gold-ink); color: var(--gold-ink); }

/* =============================================================
   PLATE — a photograph tipped into the page on corner mounts
   ============================================================= */

.plate { margin: 0; }
/* When a plate runs off the page, only the image runs off. The caption is
   reading matter and stays inside the measure. */
.plate--bleed-l .plate__frame { margin-left: calc(50% - 50vw); }
.plate--bleed-l .plate__slug { margin-left: auto; border-right: 0; border-left: 1px solid var(--rule); }
.plate--bleed-l .corner--tl, .plate--bleed-l .corner--bl { display: none; }
@media (max-width: 62rem) {
  .plate--bleed-l .plate__frame { margin-left: calc(-1 * var(--gutter)); }
}
.plate__frame {
  position: relative;
  background-color: var(--paper-2);
  background-image: url("../img/tex/grain.jpg");
  background-size: 380px;
  background-blend-mode: multiply;
  border: 1px solid var(--rule);
  aspect-ratio: var(--plate-ratio, 3 / 2);
  display: flex; align-items: flex-end;
  box-shadow: 0 16px 34px -28px rgba(19,30,44,0.9);
}
.plate__frame::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(19,30,44,0.055) 10px 11px);
}
.plate__slug {
  position: relative;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding: 0.5rem 0.8rem;
}
/* Corner mounts */
.corner {
  position: absolute; width: 1.6rem; height: 1.6rem;
  background: linear-gradient(135deg, rgba(19,30,44,0.42) 0 48%, transparent 48%);
  z-index: 2;
}
.corner--tl { top: -1px; left: -1px; }
.corner--tr { top: -1px; right: -1px; transform: rotate(90deg); }
.corner--br { bottom: -1px; right: -1px; transform: rotate(180deg); }
.corner--bl { bottom: -1px; left: -1px; transform: rotate(270deg); }

.plate figcaption {
  margin-top: 0.75rem;
  font-family: var(--mono); font-size: 0.66rem;
  line-height: 1.6; letter-spacing: 0.03em; color: var(--ink-faint);
}

/* =============================================================
   UPDATES
   ============================================================= */

.updates li { border-top: 1px solid var(--rule); }
.updates li:last-child { border-bottom: 3px double var(--rule-firm); }
.updates a {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 2rem;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: 1.5rem;
  text-decoration: none;
  align-items: baseline;
  transition: background 140ms ease;
}
.updates a:hover { background: rgba(19,30,44,0.045); }
.updates a:hover .updates__arrow { transform: translateX(4px); }
.updates__date {
  font-family: var(--mono); font-size: 0.67rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-faint);
  font-variant-numeric: lining-nums;
}
.updates__title { font-size: var(--step-1); line-height: 1.24; letter-spacing: -0.016em; }
.updates__src { display: block; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.05em; color: var(--ink-faint); }
.updates__arrow { justify-self: end; color: var(--ink-faint); transition: transform 160ms ease; }
@media (max-width: 44rem) {
  .updates a { grid-template-columns: minmax(0,1fr) 1.5rem; }
  .updates__date { grid-column: 1 / -1; margin-bottom: 0.35rem; }
}

/* =============================================================
   FORMS
   ============================================================= */

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 0.45rem;
}
.field input, .field textarea, .field select {
  width: 100%;
  color-scheme: only light;      /* dropdown list and caret follow the page */
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--serif); font-size: 1rem;
  color: var(--ink);
  background: rgba(255,253,247,0.62);
  border: 0;
  border-bottom: 1px solid var(--rule-firm);
  padding: 0.6rem 0.15rem;
  border-radius: 0;
  transition: border-color 140ms ease, background 140ms ease;
}
.field textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23131E2C' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  background-size: 0.7rem;
  padding-right: 1.6rem;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-bottom-color: var(--gold-ink);
  background: rgba(255,253,247,0.95);
  outline-offset: 1px;
}
.field__note {
  margin-top: 0.4rem;
  font-family: var(--mono); font-size: 0.63rem;
  letter-spacing: 0.03em; color: var(--ink-faint); line-height: 1.55;
}
/* Specificity has to beat `.field label`, which sets uppercase mono. */
.field label.check, .check {
  text-transform: none; letter-spacing: 0.01em; font-size: 0.85rem;
  font-family: var(--serif); color: var(--ink-mute);
  display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer;
  line-height: 1.45; margin-bottom: 0;
}
.field label.check input, .check input {
  width: auto; margin-top: 0.28rem; flex: none;
  -webkit-appearance: checkbox; appearance: checkbox;
  accent-color: var(--brand-navy);   /* checkmark uses the brand, not the UA blue */
}

/* A form set on a laid-in slip */
.slip {
  background-color: var(--paper);
  background-image: url("../img/tex/grain.jpg");
  background-size: 420px;
  background-blend-mode: multiply;
  border: 1px solid var(--rule-firm);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 18px 40px -34px rgba(19,30,44,0.9);
}

/* =============================================================
   SPEC LIST
   ============================================================= */

.spec { border-top: 3px double var(--rule-firm); }
.spec > div {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.spec dt {
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-navy); line-height: 1.5;
}
.spec dd { margin: 0; max-width: 40rem; }
.spec dd small {
  display: block; margin-top: 0.4rem;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.02em; color: var(--ink-faint);
  line-height: 1.6; text-transform: none;
}
@media (max-width: 46rem) { .spec > div { grid-template-columns: 1fr; gap: 0.45rem; } }

/* =============================================================
   TIMELINE
   ============================================================= */

.timeline { border-left: 1px solid var(--rule); margin-left: 0.35rem; }
.timeline li { position: relative; padding: 0 0 2.25rem 2rem; }
.timeline li::before {
  content: ""; position: absolute; left: -0.32rem; top: 0.6rem;
  width: 0.58rem; height: 0.58rem;
  background: var(--brand-navy);
  border: 2px solid var(--paper);
  transform: rotate(45deg);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline time {
  display: block; font-family: var(--mono); font-size: 0.67rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.4rem;
  font-variant-numeric: lining-nums;
}
.timeline h3 { font-size: var(--step-1); line-height: 1.25; margin-bottom: 0.4rem; }
.timeline p { color: var(--ink-mute); max-width: 42rem; font-size: 0.98rem; }

/* =============================================================
   PEOPLE
   ============================================================= */

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.person__frame {
  aspect-ratio: 4 / 5;
  background-color: var(--paper-2);
  background-image: url("../img/tex/grain.jpg");
  background-size: 320px; background-blend-mode: multiply;
  border: 1px solid var(--rule);
  position: relative;
}
.person__frame::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(19,30,44,0.06) 10px 11px);
}
.person h3 { font-size: 1.06rem; margin-top: 0.9rem; }
.person p { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.3rem; }

/* =============================================================
   DATA TABLE
   ============================================================= */

.tablewrap {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;                 /* grid items default to min-width:auto, which
                                   stops the scroller from ever shrinking */
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule-firm);
  background: rgba(255,253,247,0.4);
}
.grid > * { min-width: 0; }
table.data { width: 100%; border-collapse: collapse; min-width: 42rem; }
table.data th, table.data td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule-soft); font-size: 0.95rem; }
table.data th {
  font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--rule-firm);
  white-space: nowrap;
}
table.data tr:last-child td { border-bottom: 0; }
table.data td { color: var(--ink-faint); font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em; font-variant-numeric: lining-nums; }

.empty {
  border: 1px dashed var(--rule-firm);
  background: rgba(255,253,247,0.35);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.empty h2, .empty h3 { font-size: var(--step-1); margin-bottom: 0.6rem; line-height: 1.25; letter-spacing: -0.015em; }
.empty p { color: var(--ink-mute); max-width: 38rem; }
.empty p > .tlink { display: inline-block; padding-block: 0.3rem; }

/* =============================================================
   DOC LIST
   ============================================================= */

.docs li { border-top: 1px solid var(--rule-soft); padding-block: 1.4rem; }
.docs li:first-child { border-top: 3px double var(--rule-firm); }
.docs li:last-child { border-bottom: 1px solid var(--rule); }
.docs__row { display: grid; grid-template-columns: 7.5rem minmax(0,1fr) 6.5rem; gap: clamp(1rem,3vw,2rem); align-items: baseline; }
.docs__kind { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brand-navy); }
.docs__what h3 { font-size: var(--step-1); line-height: 1.25; }
.docs__what p { color: var(--ink-mute); font-size: 0.95rem; margin-top: 0.45rem; max-width: 42rem; }
@media (max-width: 46rem) { .docs__row { grid-template-columns: 1fr; gap: 0.45rem; } }

/* =============================================================
   NOTICE / BLANK
   ============================================================= */

.notice {
  border-left: 2px solid var(--brand-navy);
  padding: 0.85rem 0 0.85rem 1.15rem;
  font-family: var(--mono); font-size: 0.71rem;
  line-height: 1.65; letter-spacing: 0.03em;
  color: var(--ink-mute);
}

.blank {
  display: inline-block;
  background: repeating-linear-gradient(-45deg, rgba(119,87,28,0.16) 0 6px, transparent 6px 12px);
  border-bottom: 1px dashed var(--gold-ink);
  color: var(--gold-ink);
  font-family: var(--mono); font-size: 0.72em;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.1em 0.4em;
}

/* =============================================================
   PAGE HEAD (interior)
   ============================================================= */

.pagehead { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.pagehead__title { grid-column: 1 / span 8; }
.pagehead__meta { grid-column: 9 / span 4; align-self: end; }
@media (max-width: 68rem) {
  .pagehead__title, .pagehead__meta { grid-column: 1 / -1; }
  .pagehead__meta { margin-top: 1.75rem; }
}

/* =============================================================
   FOOTER — the colophon. The one large ink field on the site.
   ============================================================= */

.foot {
  background-color: var(--brand-navy);
  background-image: url("../img/tex/ink-grain.jpg");
  background-size: 700px;
  background-blend-mode: screen;
  color: #B3BECD;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  border-top: 3px double rgba(199,153,77,0.5);
}
.foot a { color: #E9E1CF; }
.foot__top { grid-column: 1 / span 4; }
.foot__nav { grid-column: 6 / span 3; }
.foot__contact { grid-column: 9 / span 4; }
@media (max-width: 62rem) {
  .foot__top, .foot__nav, .foot__contact { grid-column: 1 / -1; }
  .foot__nav, .foot__contact { margin-top: 2.5rem; }
}
.foot p { font-size: 0.9rem; line-height: 1.65; max-width: 26rem; }
.foot__label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.foot__nav li { margin-bottom: 0.35rem; }
.foot__nav a { display: inline-block; padding-block: 0.3rem; }
.foot__nav a, .foot__contact a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.22); padding-bottom: 1px; }
.foot__nav a:hover, .foot__contact a:hover { border-bottom-color: var(--gold); }
.foot__bar {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: #98A5B6;
}
.foot .blank {
  background: repeating-linear-gradient(-45deg, rgba(199,153,77,0.22) 0 6px, transparent 6px 12px);
  border-bottom-color: var(--gold);
  color: #E4C68D;
}

/* =============================================================
   REVEAL
   ============================================================= */

/* PROGRESSIVE ENHANCEMENT.

   Everything here is gated behind the `js` class, which a tiny inline script in
   <head> adds before first paint. That ordering matters in both directions:

   - Without it, `[data-reveal] { opacity: 0 }` would hide most of the page
     until the script ran. If site.js 404s, loads slowly, or is blocked, the
     visitor gets a header, a footer, and nothing in between.
   - Setting the class inline in <head> rather than from site.js means there is
     no flash of visible-then-hidden content on a normal load. */

.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js.reveal-ready [data-reveal] { transition: opacity 640ms cubic-bezier(.22,.61,.36,1), transform 640ms cubic-bezier(.22,.61,.36,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 40rem) {
  .eyebrow { flex-wrap: wrap; gap: 0.45rem 0.7rem; }
  .eyebrow::after { display: none; }
}

@media print {
  .masthead, .dateline { position: static; }
  body { background: #fff; }
  .leaf::before, .entry__num { display: none; }
}

/* The motto stamp is taken out of the grid entirely and pinned to the corner,
   so it cannot push the disclosure slip into a second row. */
.hero__mark {
  position: absolute;
  top: clamp(2rem, 5vw, 4.25rem);
  right: var(--gutter);
  z-index: 2;
}
@media (max-width: 68rem) { .hero__mark { display: none; } }

/* A fifth stain placement so no two adjacent sections share a plate. */
.leaf--e::before { background-image: url("../img/tex/stain-b.jpg"); background-position: 70% 30%; opacity: 0.85; }

/* A plate that runs off the page is read across, not down. */
.plate--bleed-l { --plate-ratio: 2 / 1; }

/* =============================================================
   THE BINDING — the deck's motif, carried through as structure

   The book metaphor was already in the markup before the deck turned up:
   a section is a .leaf, which is what a single sheet in a bound volume is
   called. The rules below extend that vocabulary rather than bolting a new
   one alongside it. A .stitch is thread through a signature; a .volume is a
   photograph mounted the way a plate is tipped into a book; .binding is the
   spread the two sit on.
   ============================================================= */

/* Thread. Dashes with a run of small ticks crossing them, the way a signature
   is sewn. Drawn with gradients so it scales to any width without an asset. */
.stitch {
  height: 9px;
  border: 0;
  margin: 0;
  background-image:
    /* the ticks, angled the way thread lies when it is pulled taut */
    repeating-linear-gradient(74deg,
      var(--rule-firm) 0 1px, transparent 1px 9px),
    /* the running dashes */
    repeating-linear-gradient(90deg,
      var(--rule-firm) 0 14px, transparent 14px 22px);
  background-size: 100% 9px, 100% 1px;
  background-position: 0 0, 0 4px;
  background-repeat: no-repeat;
  opacity: 0.5;
}
/* Against navy the thread has to be the light element, not the dark one. */
.foot .stitch { background-image:
    repeating-linear-gradient(74deg, rgba(242,234,218,0.55) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(242,234,218,0.55) 0 14px, transparent 14px 22px);
  opacity: 0.75; }

/* The spread. Text sits in a narrow measure with the plate running off the
   right edge, so the section reads as a page opened rather than a card. */
.binding__plate { position: relative; }
.binding__plate img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
  box-shadow: 0 20px 40px -32px rgba(19,30,44,0.85);
}
/* The photographs are graded warm on the way in, but they still arrive a shade
   brighter and cooler than the sheet. A flat wash of paper over the image
   seats them.

   This is a plain alpha overlay rather than mix-blend-mode. Blending was the
   obvious tool and it fails here: `.leaf > *` carries z-index 1, which makes
   the wrap a stacking context, so an image blending inside it has the leaf's
   paper for a backdrop in theory and an empty isolated group in practice.
   Chromium composites that to nothing and the plate renders as bare paper.
   Alpha has no backdrop to negotiate with, so it behaves the same everywhere. */
.binding__plate img + .volume__note { position: relative; }
.binding__plate::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: rgba(242, 234, 218, 0.13);
  pointer-events: none;
}
/* The note sits below the image, so the wash must not cover it. Height is set
   from the image itself rather than the box. */
.binding__plate { display: grid; }
.binding__plate::after { grid-area: 1 / 1; position: relative; inset: auto; }
.binding__plate img { grid-area: 1 / 1; }
.binding__plate .volume__note { grid-area: 2 / 1; }

/* Corner mounts, so a plate here is tipped in the same way as a plate anywhere
   else on the site. They are placed into the image cell rather than positioned
   against the whole box, which would hang the lower mount off the caption. */
.binding__plate > .corner {
  grid-area: 1 / 1;
  position: relative; inset: auto;
  justify-self: start; z-index: 3;
}
.binding__plate > .corner--tl { align-self: start; }
.binding__plate > .corner--bl { align-self: end; }

/* Run the plate off the right edge of the page.

   The element's right edge already sits on the wrap's inner right edge, so the
   distance left to travel is the page margin: the gutter, plus half of whatever
   the viewport has over --max. Writing it as 50% - 50vw instead measures 50% of
   the grid area, which at four columns overshoots by roughly 450px and crops a
   third of the photograph off-screen. */
@media (min-width: 62.01rem) {
  .binding__plate--bleed-r {
    margin-right: calc(-1 * max(var(--gutter),
                                (100vw - var(--max)) / 2 + var(--gutter)));
  }
}

/* The line the whole metaphor turns on, set as a colophon rather than a
   pull quote: small, spaced, and sitting under the thread. */
.colophon {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-navy);
  margin-top: 1.4rem;
}
.colophon b { font-weight: 600; }

/* A caption that names the photograph's job, so a metaphor is never mistaken
   for documentation of the site itself. */
.volume__note {
  margin-top: 0.8rem;
  font-family: var(--mono); font-size: 0.63rem;
  letter-spacing: 0.05em; line-height: 1.7;
  color: var(--ink-faint);
  max-width: 26rem;
}

/* A plate whose background has been keyed out to paper is already sitting on
   the sheet. Framing it would draw a rectangle around nothing. */
.binding__plate--cutout img { border: 0; box-shadow: none; }
.binding__plate--cutout::after { display: none; }