/* ═══════════════════════════════════════════════════════════════════════════
   Rollcall · the bulletin
   Page styles only. scrollcraft.css and scrollcraft.js are the engine and are
   copied here unmodified; nothing below restyles .sc-stage, .sc-copy or any
   [data-sc-*] selector that the engine drives.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Newsreader";
  src: url("/welcome/fonts/newsreader.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/welcome/fonts/archivo.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* A third face, and it is content rather than costume: the page depicts a
   handwritten sign-in sheet, and the signature move is the transformation of
   that handwriting into type. */
@font-face {
  font-family: "Caveat";
  src: url("/welcome/fonts/caveat.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* paper, ink, ledger green. Two accent stops because the cover is a
     photograph and every other item is paper: one hue cannot clear 4.5:1 on
     both grounds. */
  --sc-canvas:     #efe9dc;
  --sc-surface:    #e5ddcc;
  --sc-ink:        #1e1a14;
  --sc-ink-soft:   #665d4f;
  --sc-accent:     #14624a;
  --sc-accent-ink: #f3efe6;
  --accent-lit:    #8fd0ae;   /* the same hue, on the photographic cover */
  --bone:          #f6f1e6;
  --bone-soft:     #ded5c6;
  --sheet:         #fbf7ee;   /* the sign-in paper, whiter than the page */
  --rule:          #cabfa9;
  --board:         #6f5c43;

  --sc-font-display: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --sc-font-text:    "Archivo", system-ui, -apple-system, sans-serif;
  --sc-font-hand:    "Caveat", "Bradley Hand", "Segoe Script", cursive;

  --sc-hairline:        color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 30%, transparent);

  /* the engine's edge light is an ink-tinted inset, tuned for a near-black
     ground. On paper that reads as dirt along the top lip, so it inverts. */
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.7);
  /* and the elevation alphas halve, re-tinted toward the paper hue. */
  --sc-shadow-color: 36 28% 14%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.12), 0 1px 1px hsl(var(--sc-shadow-color) / 0.07);
  --sc-e2: 0 3px 7px hsl(var(--sc-shadow-color) / 0.13), 0 1px 2px hsl(var(--sc-shadow-color) / 0.09);
  --sc-e3: 0 10px 26px hsl(var(--sc-shadow-color) / 0.17), 0 3px 7px hsl(var(--sc-shadow-color) / 0.10);

  --rail-w: 12.5rem;
}

body {
  background: var(--sc-canvas);
  font-feature-settings: "kern" 1;
}
.sc-grain { opacity: 0.032; }

.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 460;
  letter-spacing: -0.012em;
}
.sc-display--xl { font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.6rem); line-height: 1.02; }
.sc-display--lg { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem); line-height: 1.06; }
.sc-display--md { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.3rem); line-height: 1.1; }
.sc-body { color: var(--sc-ink-soft); max-width: 46ch; font-size: var(--sc-t-base); }
.sc-lede { font-family: var(--sc-font-text); }

/* the accent ring is a dark green: it needs its light stop wherever the ground
   under the focused element is the photograph or the reversed order card. */
.cover__mast :focus-visible,
.order.is-over-cover :focus-visible { outline-color: var(--accent-lit); }

.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: 0.6rem 1rem; border-radius: var(--sc-r-sm); text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ───────────────────────────────────────────────────────────── the mark ── */
.mark { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.mark__glyph { width: 1.35em; height: 1.35em; flex: none; }
.mark__glyph rect { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0.55; }
.mark__glyph path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.mark__word {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: 1.32rem; letter-spacing: -0.015em;
}

/* ────────────────────────────────────────────────────── the call to action ── */
.cta {
  display: inline-block;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 560; font-size: 0.98rem; letter-spacing: 0.002em;
  padding: 0.82rem 1.4rem; border-radius: var(--sc-r-sm);
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: background var(--sc-d-fast) var(--sc-ease-out),
              transform 110ms var(--sc-ease-out),
              box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: #107554; box-shadow: var(--sc-e3), var(--sc-edge); }
}
.cta:active { transform: translateY(1px); box-shadow: var(--sc-e1), var(--sc-edge); }
.cta--big { font-size: 1.05rem; padding: 0.95rem 1.7rem; }

/* ───────────────────────────── the call to action's panel (<dialog id=ask>) ── */
.ask {
  width: min(30rem, calc(100vw - 2rem));
  padding: 1.6rem 1.5rem 1.3rem;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md);
  background: var(--sheet); color: var(--sc-ink);
  font-family: var(--sc-font-text);
  box-shadow: var(--sc-e3);
}
.ask::backdrop { background: rgb(30 26 20 / 0.55); }
.ask__title { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.6rem; }
.ask__run { font-size: 1rem; line-height: 1.55; color: var(--sc-ink-soft); margin: 0 0 0.9rem; }
.ask__to { font-size: 1rem; margin: 0 0 1.1rem; overflow-wrap: anywhere; }
.ask__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ask__acts .cta { min-height: 44px; }
.ask__btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.7rem 1.1rem; border-radius: var(--sc-r-sm);
  border: 1px solid var(--sc-hairline-strong); background: transparent; color: var(--sc-ink);
  font: inherit; font-weight: 520; font-size: 0.98rem; text-decoration: none; cursor: pointer;
}
.ask__btn:hover { background: var(--sc-surface); }
.ask__close {
  margin-top: 1rem; min-height: 44px; padding: 0 0.4rem;
  border: 0; background: none; color: var(--sc-ink-soft); font: inherit; font-size: 0.95rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ask :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

/* ─────────────────────────────────────────── 1 · the cover (item one) ── */
.cover {
  position: relative;
  height: 100svh; min-height: 40rem;
  overflow: clip;
  background: #23201a;
  color: var(--bone);
  isolation: isolate;
}
.cover__photo { position: absolute; inset: -8% -4%; z-index: 0; }
.cover__photo img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.cover__wash {
  position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(48% 42% at 62% 34%, rgb(255 226 178 / 0.20), transparent 70%),
    radial-gradient(70% 60% at 50% 120%, rgb(20 16 12 / 0.45), transparent 70%);
}
.cover__fore {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(20 17 12 / 0.68) 0%, rgb(20 17 12 / 0.40) 11%, transparent 26%),
    linear-gradient(to left, rgb(18 15 11 / 0.62) 0%, rgb(18 15 11 / 0.30) 12%, transparent 24%),
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgb(18 15 11 / 0.40) 100%);
}
.cover__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 230px; z-index: 7;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--sc-canvas) 84%);
}

/* masthead: reversed out on the photograph, above the printed panel */
.cover__mast {
  position: absolute; z-index: 5;
  top: clamp(1.1rem, 2.6vh, 2rem);
  left: var(--sc-gutter); right: calc(var(--sc-gutter) + var(--rail-w));
  display: flex; align-items: baseline; gap: 1.5rem;
  color: var(--bone);
  text-shadow: 0 1px 14px rgb(15 12 9 / 0.75), 0 1px 3px rgb(15 12 9 / 0.6);
}
.order__note {
  margin: 0.85rem 0 0; font-size: 0.78rem; line-height: 1.45;
  color: var(--sc-ink-soft); max-width: 34ch;
}

/* the printed panel: a page of the bulletin laid on the photograph */
.cover__panel {
  position: absolute; z-index: 3;
  left: 0; top: clamp(5.5rem, 17%, 10rem); bottom: 0;
  width: clamp(21rem, 42%, 33rem);
  background:
    linear-gradient(to right, rgb(255 255 255 / 0.28), transparent 42%),
    var(--sc-canvas);
  color: var(--sc-ink);
  padding: clamp(1.8rem, 3.2vw, 3rem) clamp(1.6rem, 3vw, 3rem) clamp(2rem, 4vh, 3.4rem) var(--sc-gutter);
  display: flex; flex-direction: column; justify-content: center; gap: 0.9rem;
  box-shadow: 14px 0 34px rgb(24 18 12 / 0.34), 3px 0 0 rgb(255 255 255 / 0.22) inset;
}
.cover__panel::after {   /* a printed hairline down the outer edge */
  content: ""; position: absolute; top: 0; bottom: 0; right: 0;
  width: 1px; background: color-mix(in oklab, var(--sc-ink) 22%, transparent);
}
.panel__kicker {
  margin: 0; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--sc-accent);
}
.cover__title { margin: 0.1rem 0 0; text-wrap: balance; max-width: 13ch; }
.cover__lede { margin: 0.2rem 0 0.6rem; color: var(--sc-ink-soft); font-size: var(--sc-t-base); max-width: 34ch; }
.cover__panel .cta { align-self: flex-start; }

/* mid plane: the clipboard, overlapping the panel's outer edge */
.cover__board {
  position: absolute; z-index: 4;
  left: clamp(15rem, 31%, 26rem); bottom: -2.5%;
  width: clamp(12rem, 19vw, 17rem);
  rotate: -5deg;
  filter: drop-shadow(-10px 16px 26px rgb(18 13 9 / 0.5));
}
/* mid-front plane: the phone. Above the floor wash (z-index 7): it is the
   nearest object in the scene, and its caption has to stay readable. */
.cover__phone {
  position: absolute; z-index: 8;
  right: calc(var(--rail-w) + 1.5rem); bottom: clamp(1.2rem, 4%, 2.6rem);
  width: max-content;
  rotate: 3.5deg;
  filter: drop-shadow(-8px 18px 30px rgb(18 13 9 / 0.55));
}
.cover__phone .phone { --pu: clamp(0.92rem, 1.5vw, 1.42rem); }
.phone__note {
  margin: 0.6rem 0 0; text-align: center; font-size: 0.72rem;
  color: var(--sc-ink-soft); letter-spacing: 0.03em; rotate: -3.5deg;
}

/* ─────────────────────────────────────────── the clipboard, as an object ── */
.board {
  position: relative;
  background: linear-gradient(160deg, #8a7152, var(--board) 46%, #5b4a35);
  border-radius: 7px 7px 5px 5px;
  padding: 1.1em 0.5em 0.75em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22);
}
.board__clip {
  position: absolute; top: -0.37em; left: 50%; translate: -50% 0;
  width: 34%; height: 0.94em; border-radius: 3px;
  background: linear-gradient(to bottom, #d9d3c8, #8e887c 60%, #b6b0a4);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.3);
}
.board__paper {
  background: var(--sheet);
  padding: 0.7em 0.6em 0.5em;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.22);
}
.board__head {
  margin: 0 0 0.7em; font-size: 0.5em; letter-spacing: 0.14em;
  text-transform: uppercase; color: #9a9080; font-family: var(--sc-font-text);
}
.board__lines { list-style: none; margin: 0; padding: 0; }
.board__lines li {
  border-bottom: 1px solid var(--rule);
  height: 1.55em; display: flex; align-items: flex-end;
  overflow: hidden;
}
.hand {
  font-family: var(--sc-font-hand); font-weight: 500;
  font-size: 1.02em; line-height: 1; color: #2b3550;
  translate: 0 0.12em; white-space: nowrap;
}
.hand--fast { rotate: -1.4deg; color: #33405e; font-weight: 600; }
.hand--struck { text-decoration: line-through; opacity: 0.78; }

/* ──────────────────────────────────────── the order of the morning (nav) ── */
.order {
  background: var(--sc-canvas);
  border-top: 1px solid var(--sc-hairline);
  border-bottom: 1px solid var(--sc-hairline);
  padding: clamp(1.6rem, 4vw, 2.4rem) var(--sc-gutter);
}
.order__head {
  margin: 0 0 0.7rem; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.order__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem;
  font-family: var(--sc-font-display); font-size: 1rem;
}
.order__list a { color: var(--sc-ink); text-decoration: none; opacity: 0.72; }
.order__list a:hover { opacity: 1; text-decoration: underline; }
.order__list .is-here > a { opacity: 1; font-weight: 600; }
.order__list .is-here > a::before {
  content: ""; display: inline-block; width: 0.45em; height: 0.45em;
  border-radius: 50%; background: var(--sc-accent); margin-right: 0.45em;
  vertical-align: 0.12em;
}
.order__ask a { color: var(--sc-accent); font-weight: 600; opacity: 1; text-decoration: underline; text-underline-offset: 0.25em; }

@media (min-width: 1060px) {
  /* the printed order moves into the right margin and stays there: every item
     of the morning visible at once, from the first screen. */
  .order {
    position: fixed; z-index: 60;
    top: 50%; translate: 0 -50%;
    right: 1.1rem; width: var(--rail-w);
    padding: 1.05rem 1.05rem 1.15rem;
    border: 1px solid var(--sc-hairline);
    background: var(--bone);
    box-shadow: var(--sc-e2);
  }
  .order__head { font-size: 0.6rem; margin-bottom: 0.85rem; opacity: 0.75; }
  .order__list { display: block; font-size: 0.86rem; line-height: 1.5; }
  .order__list li + li { margin-top: 0.42rem; }
  .order__ask { margin-top: 0.9rem !important; padding-top: 0.75rem; border-top: 1px solid var(--sc-hairline); }
  .order__note { font-size: 0.72rem; margin-top: 0.8rem; }
  /* over the photographic cover the same card is printed in reverse. */
  .order.is-over-cover {
    color: var(--bone); background: rgb(26 22 17 / 0.82);
    border-color: rgb(246 241 230 / 0.22);
  }
  .order.is-over-cover .order__head,
  .order.is-over-cover .order__note { color: #cfc4b0; }
  .order.is-over-cover .order__list a { color: var(--bone); }
  .order.is-over-cover .order__ask { border-top-color: rgb(246 241 230 / 0.28); }
  .order.is-over-cover .order__ask a { color: var(--accent-lit); }
  .order.is-over-cover .order__list .is-here > a::before { background: var(--accent-lit); }
}

/* ──────────────────────────────────────────────── items, shared printing ── */
.item { position: relative; background: var(--sc-canvas); }
.item__folio {
  margin: 0; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.item__folio--flow { color: var(--sc-accent); }

/* ─────────────────────────────────────────────── 2 · the clipboard (pin) ── */
.item--tension { background: var(--sc-surface); }
.tension {
  background: var(--sc-surface);
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 0 clamp(1.8rem, 3.6vw, 3.6rem);
  padding: clamp(4rem, 9vh, 6rem) calc(var(--sc-gutter) + var(--rail-w)) clamp(3rem, 7vh, 5rem) var(--sc-gutter);
}
.tension .item__folio { grid-column: 1 / -1; align-self: start; }
.tension__stack { position: relative; justify-self: center; align-self: center; width: min(23rem, 88%); }
.tension__stack { font-size: 1.32rem; }
.tension__stack .board { position: absolute; inset: 0; }
.tension__stack .board--front { position: relative; }
.board--stale {
  background: linear-gradient(160deg, #8a7152, var(--board) 46%, #5b4a35);
  border-radius: 7px;
  opacity: calc(0.16 + var(--sc-p, 0) * 0.84);
}
.board--p1 { translate: 3% -3.2%; rotate: 2.4deg; }
.board--p2 { translate: 6% -6%; rotate: 4.6deg; }
.board--p3 { translate: 9% -8.6%; rotate: 6.9deg; }
.board--front {
  z-index: 3;
  /* the top sheet settles into the pile as the act runs */
  translate: 0 calc(var(--sc-p, 0) * 1.4rem);
  rotate: calc(var(--sc-p, 0) * -1.6deg);
}
.board--front .board__paper { filter: saturate(calc(1 - var(--sc-p, 0) * 0.55)); }
.board--front .hand { opacity: calc(1 - var(--sc-p, 0) * 0.42); }
.tension__copy { position: relative; min-height: 11rem; }
.tension .line {
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(1.3rem, 0.95rem + 1.25vw, 2.05rem);
  line-height: 1.22; letter-spacing: -0.012em;
  max-width: 21ch; text-wrap: pretty;
}
.tension .line--4 { color: var(--sc-ink); font-weight: 560; }

/* ──────────────────────────────────────── 3 · what we propose (flow) ── */
.item--propose { padding-block: clamp(3rem, 7vw, 6.5rem) clamp(4.5rem, 9vw, 8rem); }
.propose {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-right: calc(var(--sc-gutter) + var(--rail-w));
}
.keys { margin: 1.6rem 0 0; display: grid; gap: 0.9rem; }
.keys div { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: 0.6rem; }
.keys dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sc-ink-soft); }
.keys dd { margin: 0; }
.keys__mono { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.keys__mono b { color: var(--sc-accent); font-weight: 600; }
.propose__figure { margin: 0; }
.propose__figure figcaption {
  margin-top: 0.9rem; font-size: 0.82rem; color: var(--sc-ink-soft); max-width: 40ch;
}

/* the spreadsheet, as a real table */
.gridsheet {
  background: var(--bone);
  border: 1px solid var(--sc-hairline-strong);
  box-shadow: var(--sc-e2);
  overflow-x: auto;
  overflow-y: hidden;
}
.gridsheet table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.gridsheet caption {
  caption-side: top; text-align: left; padding: 0.55rem 0.7rem;
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sc-ink-soft); background: var(--bone-soft);
  border-bottom: 1px solid var(--sc-hairline-strong);
}
.gridsheet th, .gridsheet td {
  border-right: 1px solid var(--sc-hairline);
  border-bottom: 1px solid var(--sc-hairline);
  padding: 0.42rem 0.55rem; text-align: left; font-weight: 400;
  white-space: nowrap;
}
.gridsheet thead th {
  background: var(--bone-soft); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.02em; color: var(--sc-ink);
}
.gridsheet th:last-child, .gridsheet td:last-child { border-right: 0; }
.gridsheet tbody tr:last-child td { border-bottom: 0; }
.gridsheet .col--old { color: var(--sc-ink-soft); text-align: center; width: 3.4rem; }
.gridsheet .col--today { text-align: center; width: 3.6rem; background: color-mix(in oklab, var(--sc-accent) 9%, transparent); }
.gridsheet thead .col--today { background: color-mix(in oklab, var(--sc-accent) 20%, var(--bone-soft)); color: var(--sc-accent); font-weight: 700; }
.gridsheet--quiet { rotate: -0.35deg; }
.gridsheet--quiet table { font-size: 0.72rem; }
.gridsheet--quiet th, .gridsheet--quiet td { padding: 0.36rem 0.46rem; }
.gridsheet--quiet .col--old { width: 2.9rem; }

/* ────────────────────────────────────── 4 · four ways to take it (pan) ── */
.item--ways { background: var(--sc-canvas); }
.ways {
  display: flex; align-items: center;
  background: var(--sc-canvas);
  border-top: 1px solid var(--sc-hairline);
}
.ways__rail {
  display: flex; align-items: stretch; gap: clamp(1rem, 2vw, 2rem);
  padding-left: var(--sc-gutter);
  /* the printed order is fixed in the right margin, so the rail's travel has
     to stop short of it or the closing note lands underneath it */
  padding-right: calc(var(--sc-gutter) + var(--rail-w));
}
.way {
  flex: none; width: clamp(15rem, 23vw, 20rem);
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem;
  background: var(--bone);
  border: 1px solid var(--sc-hairline);
  box-shadow: var(--sc-e1);
}
.way--lead {
  width: clamp(17rem, 26vw, 24rem); background: none; border: 0; box-shadow: none;
  padding-left: 0; justify-content: center; gap: 0.7rem;
}
.way--lead .sc-body { max-width: none; }
.way__photo { width: 100%; height: 11.5rem; object-fit: cover; margin-top: 0.9rem; border: 1px solid var(--sc-hairline-strong); }
.way--note {
  width: clamp(15rem, 22vw, 19rem); background: none; border: 0; box-shadow: none;
  justify-content: center; border-left: 1px solid var(--sc-hairline); padding-left: 2rem;
}
.way--note .sc-body { font-family: var(--sc-font-display); font-size: 1.15rem; line-height: 1.4; color: var(--sc-ink); }
.way__n {
  margin: 0 0 1rem; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--sc-accent);
}
.way h3 {
  margin: 0 0 0.5rem; padding-top: 1.2rem; font-family: var(--sc-font-display);
  font-weight: 500; font-size: 1.28rem; line-height: 1.16; letter-spacing: -0.012em;
}
.way p { margin: 0; color: var(--sc-ink-soft); font-size: 0.92rem; }

/* each way of taking attendance shows the screen it actually is. The four
   phones drift at four rates as the rail travels, so the row reads as objects
   at different distances rather than as a strip of pictures. */
.way__device {
  width: min(100%, 15.5rem); align-self: center;
  margin: 1.1rem 0 auto;
  translate: 0 calc(var(--sc-p, 0) * var(--drift, 0px));
}
.way--a { --drift: -20px; }
.way--b { --drift: -7px;  }
.way--c { --drift: -26px; }
.way--d { --drift: -12px; }
.way--a .phone--card { rotate: -1.3deg; }
.way--b .phone--card { rotate:  0.9deg; }
.way--c .phone--card { rotate: -0.6deg; }
.way--d .phone--card { rotate:  1.4deg; }

/* ─────────────────────────── the desktop view, once, inside the turn ──── */
.screenband {
  width: 100%; max-width: var(--sc-maxw);
  margin: clamp(3rem, 7vw, 5.5rem) auto 0;
  padding-inline: var(--sc-gutter) calc(var(--sc-gutter) + var(--rail-w));
}
.browser {
  width: min(64rem, 100%);
  background: var(--bone);
  border: 1px solid var(--sc-hairline-strong);
  box-shadow: var(--sc-e3);
  overflow: hidden;
}
.browser__bar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  background: var(--bone-soft);
  border-bottom: 1px solid var(--sc-hairline-strong);
}
.browser__dot {
  flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: color-mix(in oklab, var(--sc-ink) 24%, transparent);
}
.browser__url {
  margin-left: 0.75rem; min-width: 0;
  font-size: 0.74rem; letter-spacing: 0.015em; color: var(--sc-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser__shot { display: block; width: 100%; height: auto; background: #f1f3f7; }
.screenband figcaption {
  margin-top: 0.9rem; font-size: 0.82rem; color: var(--sc-ink-soft); max-width: 42ch;
}

/* ──────────────────────────────────────────────── 5 · a notice (silence) ── */
.item--notice { background: var(--sc-canvas); }
.notice {
  padding-block: clamp(5rem, 15vh, 10rem);
  padding-right: calc(var(--sc-gutter) + var(--rail-w));
  min-height: 62svh; display: flex; flex-direction: column; justify-content: center;
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 2.1rem, var(--rule) 2.1rem, var(--rule) calc(2.1rem + 1px));
  background-position: 0 1.4rem;
}
.notice__line {
  margin: 1.4rem 0 0; font-family: var(--sc-font-display);
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem); line-height: 2.1rem;
  max-width: 30ch; text-wrap: pretty;
}

/* ──────────────────────────────────── 6 · the sheet reads itself (peak) ── */
.item--peak { background: var(--sc-surface); }
.peak {
  background: var(--sc-surface);
  display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(0.8rem, 2vh, 1.6rem);
  padding: clamp(1.6rem, 4vh, 2.8rem) calc(var(--sc-gutter) + var(--rail-w)) clamp(1.4rem, 3.5vh, 2.4rem) var(--sc-gutter);
}
.peak__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.peak__disclaim { margin: 0; font-size: 0.74rem; color: var(--sc-ink-soft); }
.peak__field {
  position: relative; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.peak__side { min-width: 0; }
.peak__side--paper { position: relative; }

.sheet {
  background: var(--sheet); padding: 0.9rem 1rem 0.7rem;
  box-shadow: var(--sc-e2);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 8%, transparent);
}
.sheet__head {
  margin: 0 0 0.5rem; font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #9a9080;
}
.sheet__lines { list-style: none; margin: 0; padding: 0; counter-reset: l; }
.sheet__lines li {
  border-bottom: 1px solid var(--rule); height: 2.05rem;
  display: flex; align-items: flex-end;
}
.sheet__lines .hand { font-size: 1.22rem; }
.peak.is-live .sheet__lines .hand { opacity: 0; }
.sheet { position: relative; }
.peak__sweep {
  position: absolute; left: -0.5rem; right: -0.5rem; height: 2.05rem; top: 0;
  background: linear-gradient(to right, color-mix(in oklab, var(--sc-accent) 16%, transparent), color-mix(in oklab, var(--sc-accent) 4%, transparent));
  border-left: 2px solid var(--sc-accent);
  opacity: 0; pointer-events: none;
}

.peak__flight { position: absolute; inset: 0; pointer-events: none; }
.flyer {
  position: absolute; left: 0; top: 0;
  transform-origin: 50% 50%; white-space: nowrap;
  padding: 0.3rem 0.55rem;
  will-change: transform, opacity;
}
/* the name travels on a torn-off chip of the same paper, so it never reads as
   loose type colliding with the cell text it passes over. The chip is not
   there while the name is still on the sheet: it lifts with it. */
.flyer__chip {
  position: absolute; inset: 0; opacity: 0;
  background: var(--sheet);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent);
  border-radius: 3px;
  box-shadow: var(--sc-e2);
}
/* the script is in flow, so it is what gives the chip its size; the typed
   version is laid over it and fades in as the name straightens out. */
.flyer__script { display: block; font-family: var(--sc-font-hand); font-weight: 500; font-size: 1.22rem; color: #2b3550; line-height: 1.15; }
.flyer__type {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  font-family: var(--sc-font-text); font-size: 0.74rem; color: var(--sc-ink); line-height: 1;
}

.gridsheet--live table { font-size: 0.78rem; }
.gridsheet--live td { height: 2.05rem; }
.gridsheet--live .c-last, .gridsheet--live .c-first { color: var(--sc-ink); }
.gridsheet--live tbody tr { transition: background 200ms var(--sc-ease-out); }
.gridsheet--live tbody tr.is-landing { background: color-mix(in oklab, var(--sc-accent) 8%, transparent); }
.cellmark {
  display: inline-block; width: 0.72rem; height: 0.72rem; position: relative;
  opacity: 0; scale: 0.6;
}
.cellmark::after {
  content: ""; position: absolute; inset: 0;
  border-left: 2px solid var(--sc-accent); border-bottom: 2px solid var(--sc-accent);
  rotate: -45deg; translate: 0 -0.08rem; border-radius: 1px;
}
.peak__copy { position: relative; min-height: 5.2rem; }
.peak__copy .line {
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(1.15rem, 0.9rem + 0.95vw, 1.75rem); line-height: 1.25;
  max-width: 44ch; text-wrap: pretty;
}

/* ────────────────────────────────── 7 · what stays on the phone (reveal) ── */
.item--care { background: var(--sc-canvas); position: relative; }
.care__plate { position: relative; }
.care__plate img {
  width: 100%; height: clamp(18rem, 46vh, 30rem); object-fit: cover;
  object-position: 50% 42%;
}
.care__body { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 7rem); }
.care__text { max-width: 54ch; padding-right: calc(var(--rail-w) * 0.4); }
.care__text .sc-body { max-width: 52ch; }

/* ─────────────────────────────────────────────── 8 · the back page (pin) ── */
.item--back { background: var(--sc-canvas); }
.back {
  background: var(--sc-canvas);
  display: grid; grid-template-rows: 1fr auto auto;
  padding: clamp(3rem, 8vh, 5rem) calc(var(--sc-gutter) + var(--rail-w)) clamp(1.2rem, 3vh, 2rem) var(--sc-gutter);
}
.back__plate {
  align-self: center; max-width: 42rem;
  border-top: 2px solid var(--sc-ink); padding-top: 1.3rem;
}
.back__head { margin: 0.9rem 0 0; text-wrap: balance; max-width: 18ch; }
.back__run { margin: 1.1rem 0 0; color: var(--sc-ink-soft); max-width: 50ch; }
.back__act { margin: 1.8rem 0 0; }
.back__strip { margin-top: 1.5rem; overflow: hidden; height: clamp(4.5rem, 11vh, 8rem); }
.back__strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; opacity: 0.9; }
.back__foot {
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--sc-hairline);
  display: flex; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--sc-ink-soft);
}
.back__foot p { margin: 0; }
.back__foot .mark__word { font-size: 0.95rem; color: var(--sc-ink); }

/* ─────────────────────────────────────────────────── the phone, operable ── */
/* Every measurement in the phone is a multiple of one unit, so the whole
   object scales as a photograph of a phone would rather than keeping desktop
   text inside a phone-sized frame. */
.phone {
  --pu: 1rem;
  width: calc(12 * var(--pu));
  background: #1b1915; border-radius: calc(1.5 * var(--pu)); padding: calc(0.42 * var(--pu));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.phone__screen {
  background: var(--bone); border-radius: calc(1.15 * var(--pu)); overflow: hidden;
  display: flex; flex-direction: column; color: var(--sc-ink);
}
/* a screenshot of the app, printed inside a frame. width and height are
   overridden together: the attributes reserve the ratio, these two drive it. */
.shot { display: block; width: 100%; height: auto; background: #f1f3f7; }

/* the cover's phone: the frame scales off --pu, the screen is the shot */
.phone--shot .phone__screen { display: block; }

/* the rail's phones: one per way of taking attendance */
.phone--card {
  width: 100%;
  padding: 0.44rem; border-radius: 1.4rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), var(--sc-e3);
}
.phone--card .phone__screen { display: block; border-radius: 1.05rem; }

/* ═══════════════════════════════════════════════════════════════ phone ══ */
@media (max-width: 1059px) {
  .tension, .peak, .back { padding-right: var(--sc-gutter); }
  .propose, .notice { padding-right: var(--sc-gutter); }
  .cover__mast { right: var(--sc-gutter); }
  .cover__phone { right: 6%; }
}

@media (max-width: 820px) {
  :root { --rail-w: 0rem; }

  /* the cover is re-composed, not shrunk: a photographic band at the top with
     the masthead on it, the printed page below, and the two objects laid
     across the seam so the depth survives the smaller frame. */
  .cover {
    height: auto; min-height: 0;
    display: block; padding-bottom: 6.5rem;
    background: var(--sc-canvas); color: var(--sc-ink);
  }
  .cover__photo { position: relative; inset: auto; height: 42svh; min-height: 15rem; }
  .cover__wash { height: 42svh; inset: 0 0 auto 0; }
  .cover__fore { height: 42svh; bottom: auto; background: linear-gradient(to bottom, rgb(20 17 12 / 0.72) 0%, rgb(20 17 12 / 0.44) 13%, transparent 42%); }
  .cover__floor { display: none; }
  .cover__mast {
    top: 1rem; left: var(--sc-gutter); right: var(--sc-gutter);
    display: block; color: var(--bone);
  }
  .cover__panel {
    position: relative; inset: auto; width: auto;
    /* the clipboard and the phone hang over this much of the printed page, so
       the headline starts below them rather than behind them */
    padding: 6.6rem var(--sc-gutter) 0;
    background: none; box-shadow: none; gap: 0.75rem;
  }
  .cover__panel::after { display: none; }
  .cover__title { max-width: 16ch; font-size: clamp(2.1rem, 1.3rem + 4.4vw, 3rem); }
  .cover__lede { max-width: 40ch; }
  .cover__board {
    position: absolute; z-index: 6;
    left: var(--sc-gutter); top: calc(42svh - 4.6rem); bottom: auto;
    width: 8.2rem; rotate: -6deg; font-size: 0.6rem;
  }
  .cover__phone {
    position: absolute; z-index: 8;
    right: calc(var(--sc-gutter) + 0.4rem); top: calc(42svh - 8.5rem); bottom: auto;
    width: max-content; rotate: 4deg;
  }
  .cover__phone .phone { --pu: 0.6rem; }
  .phone__note { display: none; }

  .tension {
    grid-template-columns: 1fr; grid-template-rows: auto auto 1fr;
    gap: 1.6rem; padding-block: clamp(3rem, 8vh, 4.5rem) clamp(2rem, 5vh, 3rem);
    align-content: center;
  }
  .tension__stack { width: min(13rem, 52%); justify-self: start; font-size: 0.78rem; }
  .tension__copy { min-height: 9rem; }

  .propose { grid-template-columns: 1fr; gap: 2.2rem; }
  .propose__figure { order: 2; }
  .gridsheet { overflow-x: auto; }
  .gridsheet--quiet { rotate: 0deg; }

  /* the desktop view goes edge to edge on a phone: it is the one thing on the
     page that wants every pixel of width it can get. */
  .screenband { padding-inline: 0; margin-top: clamp(2.5rem, 8vw, 4rem); }
  .browser { width: 100%; border-inline: 0; }
  .screenband figcaption { padding-inline: var(--sc-gutter); }

  .way { width: min(78vw, 19rem); }
  .way__photo { height: 9rem; }
  .way__device { width: min(100%, 11.5rem); margin-top: 0.9rem; }
  .way--lead { width: min(80vw, 20rem); }
  .way--note { width: min(76vw, 18rem); padding-left: 1.4rem; }

  .peak {
    padding-block: clamp(1.2rem, 3vh, 2rem) clamp(1rem, 2.5vh, 1.6rem);
    gap: 0.7rem;
  }
  .peak__field { grid-template-columns: 1fr; grid-template-rows: minmax(0, 0.92fr) minmax(0, 1fr); gap: 1.1rem; align-items: stretch; }
  .peak__side--paper { display: flex; align-items: center; }
  .peak__side--paper .sheet { width: 100%; }
  .sheet__lines li { height: 1.75rem; }
  .sheet__lines .hand { font-size: 1.05rem; }
  .flyer__script { font-size: 1.05rem; }
  .peak__sweep { height: 1.75rem; }
  .peak__side--grid { display: flex; align-items: center; }
  .peak__side--grid .gridsheet { width: 100%; }
  .gridsheet--live .col--old { display: none; }
  .gridsheet--live table { font-size: 0.72rem; }
  .gridsheet--live td { height: 1.75rem; }
  .peak__copy { min-height: 4.6rem; }
  .peak__disclaim { font-size: 0.68rem; }

  .care__text { padding-right: 0; }
  .back { padding-block: clamp(2.5rem, 6vh, 4rem) 1rem; }
  .back__foot { font-size: 0.75rem; }
}

@media (max-width: 420px) {
  .keys div { grid-template-columns: 1fr; gap: 0.1rem; }
  .keys__mono { overflow-wrap: anywhere; }
  .cover__board { width: 7.2rem; top: calc(42svh - 4rem); font-size: 0.53rem; }
  .cover__phone .phone { --pu: 0.54rem; }
  .cover__phone { top: calc(42svh - 8rem); }
  .cover__panel { padding-top: 7rem; }
}

/* ═════════════════════════════════════════════════════ reduced motion ══ */
@media (prefers-reduced-motion: reduce) {
  /* the peak's flight does not run. The page shows the settled result: the
     handwritten sheet on the left, the same names already typed into the
     grid on the right, which is the whole meaning of the act. */
  .peak.is-live .sheet__lines .hand { opacity: 1; }
  .peak__flight { display: none; }
  .peak__sweep { display: none; }
  .cellmark { opacity: 1 !important; scale: 1 !important; }
  .board--stale { opacity: 0.75; }
  .board--front { translate: 0; rotate: 0deg; }
  .way__device { translate: 0; }
}