/*
  CLOCK-IT! public landing page (brand track B-2, final design B-2.7).
  Served by middleware.ts to signed-out visitors at "/". Static: no data, no API calls.
  Markup is generated by tools/landing/build.py; this stylesheet and landing.js are edited directly.
  Single visual world (the brand is light-only, like the app): ivory paper, ink, gold, vermilion pen.
*/
@font-face { font-family: "Gabarito"; font-weight: 800; font-display: swap; src: url("/landing/fonts/display-800.woff2?v=7a58847c48") format("woff2"); }
@font-face { font-family: "Gabarito"; font-weight: 700; font-display: swap; src: url("/landing/fonts/display-700.woff2?v=1efc5d2cf0") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/landing/fonts/text-400.woff2?v=b5ad7bd39f") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/landing/fonts/text-600.woff2?v=fff0ab3a88") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url("/landing/fonts/hand-700.woff2?v=9fb973a773") format("woff2"); }

:root {
  color-scheme: light;
  /* colour: the app's own tokens */
  --paper: #FAF3E6;      /* canvas: the logo's ivory */
  --sheet: #FFFFFF;      /* a sheet on the paper */
  --sunk: #F3E8D2;
  --rule: #D9CDB4;
  --ink: #191919;
  --ink-2: #4A453D;
  --ink-3: #6A6458;
  --gold: #FFB800;       /* action: the logo's minute hand */
  --gold-h: #F5A800;
  --pen: #CD3419;        /* drawn strokes only */
  --pen-deep: #952611;   /* small handwriting */
  --focus: #2B45F5;
  --link: #1B3FCF;
  --k-exam: #D9CCFF; --k-job: #FFD3A8; --k-sch: #FFC2DD;
  --ok: #0A4F2C;   --ok-bg: #E4F7E7;   --ok-line: #2E9E5B;
  --yours: #5C3B00; --yours-bg: #FFF1C2; --yours-line: #D9A400;
  --ours: #123F7A;  --ours-bg: #E5F2FF;  --ours-line: #3A82D0;
  --no: #761206;    --no-bg: #FFE4DE;    --no-line: #E0573F;
  /* the scattered world: whatever face the notice happened to use */
  --scrap-paper: #FFFDF7; --scrap-line: #CDBFA3; --scrap-ink: #3B3833;
  /* type */
  --f-display: "Gabarito", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --f-memo: "Times New Roman", Times, "Liberation Serif", serif;
  --f-form: Arial, Helvetica, "Liberation Sans", sans-serif;
  --f-type: "Courier New", Courier, "Liberation Mono", monospace;
  /* layout */
  --header-h: 56px;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (min-width: 768px) { :root { --header-h: 64px; --gut-l: max(24px, env(safe-area-inset-left, 0px)); --gut-r: max(24px, env(safe-area-inset-right, 0px)); } }
@media (min-width: 1024px) { :root { --gut-l: max(32px, env(safe-area-inset-left, 0px)); --gut-r: max(32px, env(safe-area-inset-right, 0px)); } }

* { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
img { max-width: 100%; }
[hidden]:not([hidden=until-found i]) { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 var(--f-body);
  overflow-x: clip; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: rgb(255 184 0 / .85); color: var(--ink); }
.wrap { max-width: 1200px; margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: 8px; z-index: 60; transform: translateY(-200%); background: var(--gold); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 10px 16px; font-weight: 600; text-decoration: none; }
.skip:focus-visible { transform: none; }

/* ---------- header: identical on both pages, so it stays still through the transition ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: var(--sheet); }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  height: var(--header-h); background: var(--sheet); border-bottom: 2px solid var(--ink);
  view-transition-name: site-header;
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 12px; }
.lockup { display: flex; align-items: center; min-height: 44px; border-radius: 8px; }
.lockup img { height: 32px; width: auto; display: block; }
@media (min-width: 768px) { .lockup img { height: 38px; } }
.header-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.proto-tag { font: 600 12px/1.2 var(--f-body); color: var(--ink-2); border: 1.5px dashed var(--ink-3); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
@media (max-width: 520px) { .proto-tag { display: none; } }

/* ---------- buttons: the app's press mechanic ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 18px; border: 2px solid var(--ink); border-radius: 8px;
  font: 600 16px/1.2 var(--f-body); color: var(--ink); text-decoration: none; cursor: pointer;
  background: var(--sheet); box-shadow: 2px 2px 0 0 var(--ink);
  transition: transform 100ms var(--ease), box-shadow 100ms var(--ease), background-color 100ms var(--ease);
}
.btn-primary { background: var(--gold); }
.btn-lg { min-height: 52px; padding: 12px 26px; font-size: 18px; box-shadow: 3px 3px 0 0 var(--ink); }
@media (hover: hover) {
  .btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--ink); }
  .btn-primary:hover { background: var(--gold-h); }
  .btn-lg:hover { box-shadow: 4px 4px 0 0 var(--ink); }
}
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--ink); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- small parts shared with the app's vocabulary ---------- */
.mark {
  background: var(--gold); color: var(--ink);
  padding: 0.02em 0.16em 0.07em; margin-inline: -0.02em;
  border-radius: 0.3em 0.55em 0.3em 0.5em / 0.5em 0.3em 0.55em 0.3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tag { display: inline-block; font: 600 12px/1 var(--f-body); color: var(--ink); padding: 4px 7px 5px; border: 1.5px solid var(--ink); border-radius: 6px; vertical-align: 2px; white-space: nowrap; }
.k-exam { --k: var(--k-exam); } .k-job { --k: var(--k-job); } .k-sch { --k: var(--k-sch); }
.tag { background: var(--k, var(--sheet)); }
.stamp {
  transform-origin: left center;
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font: 600 13px/1.25 var(--f-body); padding: 4px 9px 5px 7px; border-radius: 6px; border: 1.5px solid;
}
.stamp svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.t-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.t-yours { color: var(--yours); background: var(--yours-bg); border-color: var(--yours-line); }
.t-ours { color: var(--ours); background: var(--ours-bg); border-color: var(--ours-line); }
.t-no { color: var(--no); background: var(--no-bg); border-color: var(--no-line); }

/* the stack of forms behind a sign-in card (the app's .paper-stack) */
.paper-stack { position: relative; isolation: isolate; }
.paper-stack::before, .paper-stack::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 2px solid var(--ink); border-radius: 12px; }
.paper-stack::before { background: #F58AB8; transform: translate(-6px, 5px) rotate(-2deg); }
.paper-stack::after { background: #A8D8FF; transform: translate(7px, 7px) rotate(1.5deg); }
.card { background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 12px; }

/* ---------- the cross-document hand-off into sign-in ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(root) { animation-duration: 280ms; animation-timing-function: var(--ease); }
::view-transition-group(signin-card) { animation-duration: 460ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
::view-transition-old(signin-card), ::view-transition-new(signin-card) { height: 100%; overflow: clip; }
::view-transition-old(signin-card) { animation: vt-out 200ms var(--ease) both; }
::view-transition-new(signin-card) { animation: vt-in 320ms 120ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1.5px solid var(--rule); padding-block: 28px 40px; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.site-footer .wrap { display: grid; gap: 10px; }
.site-footer p { max-width: 72ch; }

/* ================================================================= B-2.5: one mechanism
   The logo is a brain beside a clock, and the page is built from its two halves.
   - The brain: ivory paper, the vermilion pen line, the student's scraps in the scatter pastels.
   - The clock: ink and gold. The gold minute hand becomes the timeline; ink-and-gold surfaces
     (the marquee, "How it decides", the finale) are where CLOCK-IT! states its rules.
   Colour roles are fixed:
   - scatter (the student's own scraps on the wall): Clear Sky Sea, Toes in the Lagoon, Golf Club Special;
   - opportunity kinds (pins on the wall, tags on the timeline): exam = Moonlit Lily,
     recruitment = Beach at Sunset, scholarship = Cotton Candy Cheeks;
   - eligibility states (tint + line + icon + words, never colour alone): meets = Jungle Getaway,
     needs a detail from you = Lemon Sunshine, still verifying = Mountain Breeze Waves, not met = Watermelon Spring.
   State hues never appear on the wall, and Lemon appears only as "needs a detail from you". */
:root {
  --p-lemon: #FFDC74; --p-sunset: #FBAC87; --p-melon: #FF8C87; --p-candy: #F3A6C8; --p-lily: #DEACF9;
  --p-sky: #AEB5FF; --p-breeze: #95C8F3; --p-lagoon: #81E3E1; --p-jungle: #7DE198; --p-golf: #B3E561;
  --k-exam: var(--p-lily); --k-job: var(--p-sunset); --k-sch: var(--p-candy);
  --ok: #0A4F2C;    --ok-bg: #D8F6E0;    --ok-line: #2E9E5B;
  --yours: #5C3B00; --yours-bg: #FFF0C2; --yours-line: #C99700;
  --ours: #123F7A;  --ours-bg: #DCEDFC;  --ours-line: #3A82D0;
  --no: #761206;    --no-bg: #FFDCDA;    --no-line: #D9483F;
  --board: #FFFBF0;
  --on-ink: #FAF3E6; --on-ink-2: #CFC7B6; --on-ink-line: rgb(250 243 230 / .32);
  --fh: 58px; --fh-top: 10px;
  --sec: 88px;
  --pen-w: 3.2px;
}
@media (min-width: 768px) { :root { --sec: 128px; --fh-top: 14px; } }
html { overflow-x: clip; scroll-padding-top: 92px; }
.wrap { max-width: 1240px; }
.wrap-w { max-width: 1400px; }

/* ---------- the floating header: one compact sheet, out of the way while you read ---------- */
.fh { position: fixed; z-index: 40; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--fh-top)); display: flex; justify-content: center;
  padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); pointer-events: none;
  transition: transform 380ms var(--ease), opacity 260ms var(--ease); }
.fh.is-off { transform: translateY(calc(-100% - var(--fh-top) - 14px)); opacity: 0; }
html.still .fh, html.still .fh.is-off { transition: none; }
.fh-in { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 4px; width: 100%; max-width: 560px; height: var(--fh);
  padding: 0 5px 0 12px; background: rgb(255 255 255 / .95); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 0 var(--ink); overflow: hidden; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fh-in { background: rgb(255 253 248 / .84); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
}
.fh .lockup { min-height: 44px; padding-right: 6px; }
.fh .lockup img { height: 34px; width: auto; display: block; }
.fh-cta { margin-left: auto; min-height: 44px; padding: 6px 18px; font-size: 15.5px; box-shadow: 2px 2px 0 0 var(--ink); }
.fh-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; }
.fh-prog i { display: block; height: 100%; width: calc(var(--sp, 0) * 100%); background: var(--gold); }
.hnav { display: none; }
@media (min-width: 1040px) {
  .fh-in { width: auto; max-width: none; gap: 2px; padding-left: 14px; }
  .fh .lockup { padding-right: 14px; margin-right: 6px; border-right: 2px solid var(--ink); border-radius: 0; }
  .hnav { display: flex; gap: 0; margin-right: 8px; }
  .hnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); font: 600 15px/1 var(--f-body); text-decoration: none; }
  .hnav a:hover { background: rgb(25 25 25 / .06); }
  .fh-cta { margin-left: 4px; }
}

/* ---------- shared type ---------- */
.kicker { font: 700 27px/1 var(--f-hand); color: var(--pen); display: block; transform: rotate(-2deg); transform-origin: left; }
.sec-h { font-size: clamp(36px, 7vw, 74px); line-height: .98; letter-spacing: -.03em; margin-top: 10px; }
.sec-p { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.ch-h { font-size: clamp(30px, 5.6vw, 48px); line-height: 1.02; letter-spacing: -.025em; }
.ch-p { font-size: 16.5px; line-height: 1.58; color: var(--ink-2); max-width: 58ch; }
.nw { white-space: nowrap; }

/* ---------- the wall: one board, used by the hero and by the first moment of the stage ---------- */
.board { position: relative; --bf: 1; padding: 10px; border-radius: 20px;
  border: 2px solid rgb(25 25 25 / var(--bf)); background-color: rgb(255 248 232 / var(--bf));
  box-shadow: calc(var(--bf) * 6px) calc(var(--bf) * 6px) 0 0 rgb(25 25 25 / var(--bf)); }
.board::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--bf);
  background-image: radial-gradient(rgb(25 25 25 / .09) 1.2px, transparent 1.7px); background-size: 22px 22px; background-position: 11px 11px; }
@media (min-width: 1100px) { .board { padding: 18px; border-radius: 24px; } }
.board-seq, .tlwin.board { --bf: 0; }
.crop { aspect-ratio: 360 / 690; overflow: hidden; max-width: 480px; margin-inline: auto; border-radius: 12px; }

/* ---------- the canvas: a fixed design surface, scaled; on desktop seen through a moving window ---------- */
.cv { position: relative; width: 100%; aspect-ratio: var(--W) / var(--H); --k: 1; --cx: 0px; overflow: visible; margin-inline: auto; }
.cv-d { width: calc(var(--W) * var(--k) * 1px); height: calc(var(--H) * var(--k) * 1px); aspect-ratio: auto; margin: 0; }
.cv-in { position: absolute; left: 0; top: 0; width: calc(var(--W) * 1px); height: calc(var(--H) * 1px); transform: translateX(var(--cx)) scale(var(--k)); transform-origin: 0 0; }
.tlwin { position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border-radius: 14px; }
.tlwin-hero { overflow: hidden; }
.cv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ln-t, .ln-r { stroke: var(--pen); stroke-width: var(--pen-w); }
.ln-s, .ln-g { stroke: var(--gold); stroke-width: 7.5; }
.ln-so, .ln-go { stroke: var(--ink); stroke-width: 12; }
.ln-r, .ln-g, .ln-go, .nib { display: none; }
.knot { fill: var(--pen); stroke: var(--sheet); stroke-width: 2.5; }
.nib { fill: var(--pen); stroke: var(--sheet); stroke-width: 2.5; }
.guide { stroke: var(--ink); stroke-opacity: .2; stroke-width: 1; stroke-dasharray: 3 5; }
.tail { stroke: var(--paper); stroke-width: 14; stroke-dasharray: 7 9; stroke-linecap: butt; }
.cv-sym { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w) * 1px); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 3; }
/* The symbol is the approved logo file seen through a window: the region (99, 29, 284 x 368) of clock-it-logo.png
   (480 x 541), so no derived logo asset exists. */
.sym { display: block; width: 100%; aspect-ratio: 284 / 368; background: url("/brand/clock-it-logo.png") 50.5105% 16.7631% / 169.0141% auto no-repeat; }
.cv-sym b { font: 800 13px/1 var(--f-display); background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 7px; white-space: nowrap; }
.cv-d .cv-sym b { font-size: 15px; padding: 5px 9px; }
.cv-m .cv-sym b { position: absolute; left: calc(100% + 6px); top: 61%; transform: translateY(-50%); }
.cv-label { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); z-index: 1; font: 700 30px/1 var(--f-hand); color: var(--pen); transform: rotate(-2deg); transform-origin: left; white-space: nowrap; }
.cv-m .cv-label { font-size: 23px; }
.wall-ann { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); z-index: 4; font: 700 27px/1 var(--f-hand); color: var(--pen); transform: rotate(var(--r)); transform-origin: left; white-space: nowrap; text-shadow: 0 0 6px var(--board), 0 0 3px var(--board); }
.cv-m .wall-ann { font-size: 22px; }
.cv-scale { position: absolute; inset: 0; pointer-events: none; }
.sc-l { position: absolute; font: 700 12.5px/1 var(--f-display); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.cv-d .sc-l { left: calc(var(--x) * 1px); top: 92px; transform: translateX(-50%); font-size: 15px; padding: 5px 11px; }
.cv-d .sc-l:first-child { visibility: hidden; }
.cv-m .sc-l { left: 40px; top: calc(var(--y) * 1px); transform: translate(-50%, -50%); z-index: 2; }

/* points: everything that rides on the line */
.pt { position: absolute; left: calc(var(--tx) * 1px); top: calc(var(--ty) * 1px); width: 0; height: 0; z-index: 2; }
.messy { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(var(--r)); }
.en { position: absolute; width: 136px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 10px; padding: 9px 11px 10px; z-index: 3; }
.en.lane-up { left: -14px; bottom: 20px; }
.en.lane-down { left: -14px; top: 20px; }
.en-tray.lane-down { left: -68px; border-style: dashed; background: rgb(255 255 255 / .7); }
.en.lane-right { left: 26px; top: 0; width: 290px; transform: translateY(-50%); }
.en-stem { position: absolute; left: 13px; width: 2px; height: 20px; background: var(--ink); }
.lane-up .en-stem { top: 100%; } .lane-down .en-stem { bottom: 100%; }
.en-stem::after { content: ""; position: absolute; left: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 2.5px solid var(--ink); }
.lane-up .en-stem::after { bottom: -9px; } .lane-down .en-stem::after { top: -9px; }
.lane-right .en-stem { left: -26px; top: 50%; width: 26px; height: 2px; }
.lane-right .en-stem::after { left: -8px; top: -6px; }
.en .tag { font-size: 11px; padding: 3px 5px 4px; margin-right: 2px; }
.en-name { font: 700 14.5px/1.22 var(--f-display); }
.en-date { margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.en-date b { color: var(--ink); font-weight: 600; }
.en-rev { margin-top: 2px; font: 600 12px/1.3 var(--f-body); color: var(--pen-deep); }
.en-src { margin-top: 4px; display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); }
.en-src svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.en-k { font: 600 12px/1 var(--f-body); color: var(--ink-2); margin-bottom: 5px; }
.en .stamp { display: flex; width: fit-content; font-size: 12px; margin-top: 7px; padding: 3px 7px 4px 6px; align-items: flex-start; }
.en .stamp svg { width: 12px; height: 12px; margin-top: 1px; }
.cv-m .en-name { font-size: 16px; } .cv-m .en-date { font-size: 13.5px; } .cv-m .en .stamp { font-size: 13px; }
.cv-d .en { width: 184px; padding: 11px 13px 12px; border-radius: 12px; }
.cv-d .en.lane-up, .cv-d .en.lane-down { left: -16px; }
.cv-d .en-tray.lane-down { left: -92px; }
/* Stepping back without fading: when one entry is lifted out, the entries it is not being
   compared with, and the month scale, recede by losing their white sheet and their solid ink border (--dim, 0 to 1).
   Their words keep full colour, so they stay readable at WCAG AA in every state. */
.en, .cv-scale { --dim: 0; }
.en:not(.en-tray) { background: color-mix(in srgb, var(--sheet), var(--sunk) calc(var(--dim) * 100%)); }
.en { border-color: color-mix(in srgb, var(--ink), var(--ink-3) calc(var(--dim) * 100%)); }
.en .en-src { color: color-mix(in srgb, var(--ink-3), var(--ink-2) calc(var(--dim) * 100%)); }
.sc-l { background: color-mix(in srgb, var(--paper), var(--sunk) calc(var(--dim) * 100%));
  border-color: color-mix(in srgb, var(--ink), var(--rule) calc(var(--dim) * 100%));
  color: color-mix(in srgb, var(--ink), var(--ink-2) calc(var(--dim) * 100%)); }
.cv-d .en-stem { left: 15px; height: 22px; }
.cv-d .en.lane-up { bottom: 22px; } .cv-d .en.lane-down { top: 22px; }
.cv-d .en .tag { font-size: 12.5px; padding: 3px 6px 4px; }
.cv-d .en-name { font-size: 18px; } .cv-d .en-date { font-size: 15px; margin-top: 6px; } .cv-d .en-rev { font-size: 14px; }
.cv-d .en-src { font-size: 13.5px; margin-top: 6px; } .cv-d .en-src svg { width: 13px; height: 13px; }
.cv-d .en-k { font-size: 14px; }
.cv-d .en .stamp { font-size: 14px; padding: 4px 8px 5px 7px; } .cv-d .en .stamp svg { width: 14px; height: 14px; }
.stamp { border-left-width: 4px; }
/* the bank's date: the old one is struck and replaced as the corrigendum lands */
.sw { position: relative; display: inline-block; }
.sw .o { display: none; }
.live .sw .o { display: inline-block; opacity: calc(1 - var(--rv, 0)); background: linear-gradient(var(--pen), var(--pen)) 0 58% / calc(var(--rvs, 0) * 100%) 2px no-repeat; }
.live .sw .nw { position: absolute; left: 0; top: 0; opacity: var(--rv, 0); transform: translateY(calc((1 - var(--rv, 0)) * .5em)); }

/* the fragments (sized in em so the wall scales with the layout) */
.fr { position: relative; width: 15em; background: var(--sheet); border: 1.5px solid var(--ink); color: var(--ink); font: 12.5px/1.32 var(--f-body); box-shadow: 2px 3px 0 rgb(25 25 25 / .13); }
.cv-d .fr { font-size: 14px; }
.cv-m .fr { font-size: 11px; }
.fr-k { display: block; margin-top: .4em; font-size: .88em; color: var(--ink-3); }
.fr-pdf { width: 18em; padding: 1.7em 1em .85em; border-radius: 3px 1.1em 3px 3px; font-family: var(--f-memo); }
.fr-pdf .tab { position: absolute; left: -1.5px; top: -1.5px; font: 700 .75em/1 var(--f-body); color: #fff; background: var(--pen); padding: .35em .5em; border-radius: 3px 0 4px 0; }
.fr-pdf b { display: block; font-size: 1.1em; margin-bottom: .15em; }
.fr-pdf .sc { font-variant: small-caps; letter-spacing: .02em; }
.fr-pdf mark { background: rgb(179 229 97 / .85); color: inherit; padding: 0 .15em; }
.fr-pdf s { text-decoration-color: var(--pen); text-decoration-thickness: 2px; }
.fr-chat { width: 16em; padding: .65em; border-radius: 1.1em; background: #CFF3F2; }
.fr-chat .fw { display: block; font-size: .84em; font-style: italic; color: var(--ink-3); margin: 0 0 .25em .25em; }
.fr-chat .bub { display: block; background: var(--sheet); border: 1.2px solid var(--ink); border-radius: 4px .9em .9em .9em; padding: .5em .65em; }
.fr-chat .bub + .bub { margin-top: .5em; }
.fr-chat .bub.me { margin-left: 2em; border-radius: .9em 4px .9em .9em; background: #E4F6C6; }
.fr-chat .circ { font-weight: 600; padding: 0 .2em; border: 2px solid var(--pen); border-radius: 50%; }
.fr-note { width: 13em; padding: .95em 1.05em 1.1em; border-radius: 2px; border-color: rgb(25 25 25 / .55); box-shadow: 1px 5px 0 rgb(25 25 25 / .16);
  background-image: linear-gradient(rgb(25 25 25 / .06) 0 .9em, transparent .9em); }
.fr-note.sm { width: 10.5em; }
.fr-note span { display: block; font: 700 1.8em/1.08 var(--f-hand); color: #4A1408; }
.fr-note u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.n-candy { background-color: var(--p-candy); } .n-golf { background-color: var(--p-golf); } .n-sunset { background-color: var(--p-sunset); }
.n-sky { background-color: var(--p-sky); } .n-sky span { color: #1E2350; } .n-jungle { background-color: var(--p-jungle); } .n-jungle span { color: #0F3B1E; }
.fr-shot { width: 14.5em; padding: .55em .7em .7em; border-radius: 1.25em; border-width: 2px; }
.fr-shot .sb { display: flex; justify-content: flex-end; gap: 3px; margin-bottom: .5em; }
.fr-shot .sb i { width: .8em; height: .32em; border-radius: 2px; background: var(--ink-3); }
.fr-shot .banner { display: block; background: var(--p-sky); border: 1.2px solid var(--ink); border-radius: .5em; padding: .5em .55em; font-weight: 600; }
.fr-shot .lines i { display: block; height: .4em; border-radius: 3px; background: var(--sunk); margin-top: .5em; }
.fr-shot .lines i + i { width: 70%; }
.fr-corr { width: 16em; padding: .8em 1em; border-radius: 3px; background: #FFFCF5; font-family: var(--f-form); }
.fr-corr .stampbox { display: inline-block; margin-bottom: .4em; padding: .05em .5em; border: 2.5px double var(--pen); color: var(--pen-deep); font: 700 .88em/1.4 var(--f-form); letter-spacing: .1em; transform: rotate(-3deg); }
.fr-corr > span:last-child { display: block; }
.fr-bm { width: 16em; display: flex; gap: .6em; align-items: flex-start; padding: .7em .9em; border-radius: .8em; border-left: .45em solid var(--p-lily); }
.fr-bm svg { flex: none; width: 1.25em; height: 1.25em; margin-top: .05em; fill: var(--p-lily); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.fr-bm b, .fr-card b { display: block; font-weight: 600; }
.fr-card { width: 17em; padding: 1em 1.1em .9em; border-radius: 3px; border-top: .5em solid var(--p-sunset); font-family: var(--f-memo); }
.fr-card b { font-size: 1.12em; margin-bottom: .2em; }
.fr-ruled { width: 16em; padding: .7em .9em .8em 2.1em; border-radius: 2px; background: #FFFEFA repeating-linear-gradient(transparent 0 1.55em, rgb(58 130 208 / .28) 1.55em calc(1.55em + 1px)); background-position: 0 .55em; }
.fr-ruled::after { content: ""; position: absolute; left: 1.4em; top: 0; bottom: 0; width: 1.5px; background: rgb(205 52 25 / .5); }
.fr-ruled span { display: block; font: 700 1.55em/1 var(--f-hand); color: #2A2620; line-height: 1.55em; }
.fr-cal { width: 15em; padding: 0 0 .6em; border-radius: 4px; overflow: visible; }
.cal-h { display: block; background: var(--p-melon); border-bottom: 1.5px solid var(--ink); padding: .45em .7em; font: 800 .86em/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.cal-w, .cal-g { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 .55em; text-align: center; font-size: .82em; }
.cal-w { padding-top: .45em; color: var(--ink-3); font-weight: 600; }
.cal-g i { font-style: normal; line-height: 1.85; position: relative; font-variant-numeric: tabular-nums; }
.cal-g i[class]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.9em; height: 1.75em; margin: -.9em 0 0 -.95em; border: 2px solid var(--pen); border-radius: 50%; transform: rotate(-8deg); }
.cal-q { position: absolute; right: .5em; bottom: .1em; font: 700 1.9em/1 var(--f-hand); color: var(--pen); }
.taped::after { content: ""; position: absolute; left: 50%; top: -.75em; width: 5.5em; height: 1.5em; margin-left: -2.75em; background: rgb(243 166 200 / .62); border-left: 1px dashed rgb(25 25 25 / .15); border-right: 1px dashed rgb(25 25 25 / .15); transform: rotate(-4deg); }
.fr-chat.taped::after { background: rgb(174 181 255 / .6); transform: rotate(3deg); }

/* pins: the opportunity's kind colour; on the wall they pop in as the thread reaches each piece */
.messy::before, .mom-fig > .fr::before, .stack > .fr-corr::before { content: ""; position: absolute; left: 50%; top: -8px; z-index: 4; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, rgb(255 255 255 / .85) 0 2px, transparent 3px), var(--pin, var(--sheet)); border: 1.5px solid var(--ink); transform: scale(var(--ps, 1)); }
.cv-d .messy::before { width: 17px; height: 17px; margin-left: -8.5px; top: -9px; }
.messy:has(.taped)::before { display: none; }
.k-exam { --pin: var(--k-exam); } .k-job { --pin: var(--k-job); } .k-sch { --pin: var(--k-sch); }
.pt-noise { --pin: var(--sheet); }
.mom-fig > .fr, .stack > .fr { position: relative; }

/* static states (no JavaScript, reduced motion, and the hero) */
.st-tangle .en, .st-tangle .ln-s, .st-tangle .ln-so, .st-tangle .tail, .st-tangle .cv-scale, .st-tangle .guide, .st-tangle .cv-sym b, .st-tangle .cv-sheet { display: none; }
.st-line .messy, .st-table .messy, .st-lift .messy, .st-line .ln-t, .st-table .ln-t, .st-lift .ln-t,
.st-line .pt-noise, .st-table .pt-noise, .st-lift .pt-noise, .st-line .knot, .st-table .knot, .st-lift .knot,
.st-line .cv-label, .st-table .cv-label, .st-lift .cv-label, .st-line .wall-ann, .st-table .wall-ann, .st-lift .wall-ann { display: none; }
.st-line .pt, .st-table .pt, .st-lift .pt { left: calc(var(--sx) * 1px); top: calc(var(--sy) * 1px); }
.st-line .pt:not([data-p]), .st-table .pt:not([data-p]), .st-lift .pt:not([data-p]) { display: none; }
.cv-m.st-lift .pt { top: calc(var(--sy3) * 1px); }
.cv-m.st-lift .sc-l { top: calc(var(--y3) * 1px); }
.st-line .stamp { display: none; }
.cv-sheet, .cv-ann { display: none; }
.cv-ann { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.st-lift .cv-sheet, .st-lift .cv-ann { display: block; }
.st-lift .en { --dim: 1; }
.st-lift .en[data-o="mba"] { opacity: 0; }
.st-lift .en[data-o="ins"] { --dim: 0; }
.st-lift .cv-scale { --dim: 1; }
.cv-d .cv-sheet { position: absolute; left: 676px; top: 44px; width: 388px; z-index: 6; }
.cv-m .cv-sheet { position: absolute; left: 66px; top: 334px; width: 290px; z-index: 6; }
/* while JavaScript drives a canvas */
.live .ln-t, .live .ln-s, .live .ln-so { display: none; }
.live .ln-r, .live .ln-g, .live .ln-go { display: block; }
.live .pt, .live .pt-noise, .live .knot, .live .cv-label, .live .wall-ann { display: block; }
.live .stamp { overflow: hidden; }
.live .messy, .live .en, .live .cv-sheet, .live .cv-ann { display: block; }
.live .cv-sheet { transform-origin: 0 0; }
html.js:not(.still) .board-hero .nib { display: block; }

/* the lifted entry: the reasons arrive one by one, the result last */
.sheet { background: var(--sheet); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 0 var(--ink); position: relative; }
.sheet-in { padding: 15px 18px 0; }
.sheet-name { font: 700 17px/1.3 var(--f-display); }
.cv-d .sheet-name { font-size: 19px; }
.sheet-name .tag { margin-right: 4px; font-size: 12px; }
.sheet-st { margin-top: 10px; font: 800 27px/1.08 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cv-d .sheet-st { font-size: 31px; }
.sheet-st .nb { white-space: nowrap; }
.ring-t { position: relative; display: inline-block; white-space: nowrap; }
.ring { position: absolute; left: -14%; top: -30%; width: 128%; height: 160%; overflow: visible; pointer-events: none; }
.ring path { fill: none; stroke: var(--pen); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sheet-date { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.cv-d .sheet-date { font-size: 15px; }
.sheet-why { list-style: none; margin: 12px 18px 0; padding: 11px 0 0; border-top: 1.5px dashed var(--rule); display: grid; gap: 5px; font-size: 14px; counter-reset: why; }
.cv-d .sheet-why { font-size: 16px; gap: 7px; }
.sheet-why li { display: flex; align-items: center; gap: 8px; }
.sheet-why svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ok); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.sheet-res { display: flex; align-items: center; gap: 10px; margin: 12px 18px 16px; }
.sheet-res .eq { font: 800 22px/1 var(--f-display); }
.sheet-res .res { font: 800 17px/1 var(--f-display); background: var(--ink); color: var(--gold); border-radius: 8px; padding: 8px 12px; }
.cv-d .sheet-res .res { font-size: 20px; padding: 9px 14px; }
.note { display: block; margin: -4px 18px 14px; font: 700 24px/1 var(--f-hand); color: var(--pen-deep); transform: rotate(-3deg); transform-origin: left; }
.cv-d .note { display: none; }
/* handwritten notes on the line (stage 3) */
.ann { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); font: 700 26px/1.05 var(--f-hand); color: var(--pen-deep); white-space: nowrap; }
.ann-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ann-svg path { fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ann-first { transform: rotate(-4deg); transform-origin: left; }
.cv-m .ann { font-size: 21px; }

/* layout switch: the wide canvas from 1100px, the tall one below */
.cv-m { max-width: 480px; }
.only-d { display: none; }
@media (min-width: 1100px) { .only-d { display: block; } .only-m { display: none; } }
/* no-JavaScript scale steps (JavaScript sets --k exactly) */
.cv-m { --k: .88; } @media (min-width: 400px) { .cv-m { --k: 1; } } @media (min-width: 520px) { .cv-m { --k: 1.3; } }
.cv-d { --k: .64; } @media (min-width: 1300px) { .cv-d { --k: .76; } } @media (min-width: 1500px) { .cv-d { --k: .86; } }
.tl-hint { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
html.anim .tl-hint, html.pinned .tl-hint { display: none; }
html.anim .tlwin { overflow: hidden; }

/* ---------- 1 hero: the student's cork wall, the headline pinned over it, the planning board mounted below ---------- */
:root { --cork: #C29766; --w-lily: #F1E5FC; --w-peach: #FFE8DA; --w-lagoon: #DCF5F3; }
.hero { padding: calc(var(--fh-top) + var(--fh) + 14px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); }
@media (min-width: 768px) { .hero { padding-inline: 16px; } }
.cork { background-color: var(--cork);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .62 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(circle at 20% 30%, rgb(255 230 190 / .18) 0 1.2px, transparent 2px), radial-gradient(circle at 70% 80%, rgb(80 50 20 / .22) 0 1.4px, transparent 2.2px);
  background-size: 220px 220px, 23px 19px, 29px 31px; }
.cork-board { position: relative; max-width: 1640px; margin: 0 auto; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 0 var(--ink); }
.cork-board::after { content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none; z-index: 9; box-shadow: inset 0 0 0 6px rgb(255 255 255 / .14), inset 0 0 0 7px rgb(25 25 25 / .22); }
.cover { position: relative; overflow: hidden; border-radius: 20px 20px 0 0; min-height: clamp(620px, calc(100svh - 104px), 820px); display: flex; align-items: center; padding: 48px 0; }
.cover-notes { position: absolute; inset: 0; }
.pin { position: absolute; left: 50%; top: -8px; width: 18px; height: 18px; margin-left: -9px; z-index: 2; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, rgb(255 255 255 / .75) 0 2px, transparent 3.5px), var(--pc); border: 1.5px solid rgb(0 0 0 / .55); box-shadow: 2px 4px 0 rgb(40 22 5 / .35); }
.pin-red { --pc: #D8432B; } .pin-ink { --pc: #2A2A2A; } .pin-gold { --pc: var(--gold); }
.tape { position: absolute; left: 50%; top: -12px; z-index: 2; width: 80px; height: 24px; margin-left: -40px; background: rgb(255 244 200 / .74); border: 1px solid rgb(190 170 110 / .4); transform: rotate(-4deg); }
.cn { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translate(-50%, -50%) rotate(var(--r)); z-index: 1; }
.cn-sticky { padding: 20px 15px 16px; min-height: calc(var(--w) * .76); box-shadow: 2px 6px 0 rgb(60 35 10 / .3); }
.cn-sticky::before { content: ""; position: absolute; inset: 0 0 auto; height: 22%; background: linear-gradient(rgb(0 0 0 / .07), transparent); pointer-events: none; }
.cn-h { display: block; font: 700 25px/1.04 var(--f-hand); color: #23324F; }
.n-melon { background-color: var(--p-melon); } .n-lagoon { background-color: var(--p-lagoon); } .n-lily { background-color: var(--p-lily); } .n-breeze { background-color: var(--p-breeze); }
.cn-h u { text-decoration-color: #C3341A; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cn-paper { background: #FCFBF7; border: 1px solid #D9D2C3; box-shadow: 2px 5px 0 rgb(60 35 10 / .25); }
.cn-todo { padding: 14px 16px 14px 40px; background: repeating-linear-gradient(transparent 0 25px, #B9D2EA 25px 26px); background-position: 0 38px; position: relative; }
.cn-todo::before { content: ""; position: absolute; left: 28px; top: 0; bottom: 0; width: 1.5px; background: #E58C8C; }
.cn-todo b { display: block; font: 700 26px/1 var(--f-hand); color: #A0331E; margin-bottom: 4px; }
.cn-todo span { display: block; font: 700 21px/26px var(--f-hand); color: #23324F; }
.cn-ticket { padding: 14px 16px 12px; border-top: 8px solid var(--p-sky); font: 14px/1.35 var(--f-form); color: #2F2C28; }
.cn-ticket b { display: block; font-size: 16px; }
.cn-ticket .cn-k { display: block; margin-top: 4px; font-size: 12px; color: #6A6458; }
.hero-card { position: relative; z-index: 3; margin-left: max(var(--gut-l), 4.5%); width: min(560px, calc(100% - 2 * var(--gut-l))); background: var(--sheet); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 0 var(--ink); padding: 32px 32px 26px; }
.hero-card .hc-l { left: 30px; } .hero-card .hc-r { left: auto; right: 20px; }
.eyebrow { font: 600 14px/1.3 var(--f-body); color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 26px; height: 6px; background: var(--gold); border: 1.5px solid var(--ink); border-radius: 4px; }
.hero-h1 { font-size: clamp(40px, 10.5vw, 72px); line-height: .96; letter-spacing: -.035em; margin-top: 14px; }
.hero-h1 .l1, .hero-h1 .l2 { display: block; }
.hero-h1 .mark { padding-inline: .1em; }
@media (min-width: 1100px) { .hero-h1 { font-size: clamp(54px, 4.6vw, 72px); } .hero-h1 .l1, .hero-h1 .l2 { white-space: nowrap; } }
.lede { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.invite { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.scroll-hint { margin-top: 18px; display: flex; align-items: center; gap: 10px; font: 600 14px/1.3 var(--f-body); color: var(--ink-2); }
.scroll-hint svg { width: 16px; height: 22px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
html.js:not(.still) .scroll-hint .wheel { animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(4px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.illus-note { position: absolute; left: 16px; bottom: 14px; z-index: 3; margin: 0; background: rgb(255 255 255 / .86); border: 1px solid rgb(25 25 25 / .25); border-radius: 6px; padding: 3px 8px; font: 600 12px/1.4 var(--f-body); color: var(--ink-2); }
.wall-mount { position: relative; z-index: 2; padding: 6px 12px 64px; }
.wall-mount .board-hero { max-width: 1400px; margin: 0 auto; }
@media (min-width: 1100px) { .wall-mount { padding: 10px 28px 96px; } }
html.js:not(.still) .cover .cn { animation: cn-in .55s calc(.15s + var(--n) * .05s) var(--ease) both; }
@keyframes cn-in { from { opacity: 0; } }
@media (max-width: 899px) {
  .cover { display: block; min-height: 0; padding: 150px 0 210px; }
  .cn { display: none; width: calc(var(--w) * .8); }
  .cn[data-m] { display: block; left: var(--mx); }
  .cn[data-m="t"] { top: var(--mo); }
  .cn[data-m="b"] { top: auto; bottom: var(--mo); transform: translate(-50%, 50%) rotate(var(--r)); }
  .cn-h { font-size: 21px; } .cn-sticky { padding: 16px 12px 12px; }
  .hero-card { margin: 0 auto; width: calc(100% - 24px); padding: 26px 20px 22px; }
}

/* the pieces arrive once; the thread then draws with the visitor's scroll (JavaScript) */
html.js:not(.still) .board-hero .pt .messy { animation: pop .5s calc(.2s + var(--n) * .06s) var(--ease) both; }
html.js:not(.still) .board-hero .cv-label { animation: fade .6s .1s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -44%) rotate(var(--r)) scale(.94); } }
@keyframes fade { from { opacity: 0; } }

/* the bridge: the same thread, carried from the wall into the week (drawn by JavaScript) */
main { position: relative; }
.bridge { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.bridge path { fill: none; stroke: var(--pen); stroke-width: var(--pen-w); stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 2 the problem ---------- */
.piles { padding-block: calc(var(--sec) * 1.15) calc(var(--sec) * .8); }
.piles-row { position: relative; margin-top: 56px; display: grid; gap: 40px; }
.thread { position: absolute; pointer-events: none; overflow: visible; }
.thread path { fill: none; stroke: var(--pen); stroke-width: var(--pen-w); stroke-linecap: round; }
.thread-d { display: none; }
.thread-m { left: 20px; top: 0; width: 40px; height: 100%; }
.mom { position: relative; padding-left: 64px; }
.mom-day { font: 700 27px/1 var(--f-hand); color: var(--pen); }
.mom h3 { font-size: 26px; margin-top: 6px; letter-spacing: -.015em; }
.mom-fig { margin: 22px 0 16px; min-height: 120px; display: flex; align-items: flex-start; }
.mom-fig .fr { transform: rotate(-2deg); }
.mom:nth-child(even) .mom-fig .fr { transform: rotate(2deg); }
.mom p { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 34ch; }
.stack { position: relative; width: 196px; height: 130px; }
.stack .fr-pdf { position: absolute; left: 0; top: 0; transform: rotate(-3deg); }
.stack .fr-corr { position: absolute; left: 30px; top: 58px; transform: rotate(4deg); }
.piles-end { font-family: var(--f-display); font-weight: 800; margin-top: 80px; font-size: clamp(34px, 6.2vw, 70px); line-height: 1; letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
.piles-end em { font-style: normal; color: var(--pen); }
@media (min-width: 1000px) {
  .piles-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .thread-m { display: none; }
  .thread-d { display: block; left: -4%; width: 108%; top: 112px; height: 120px; }
  .mom { padding-left: 0; }
  .mom-fig { height: 150px; position: relative; z-index: 1; }
}

/* ---------- the turn: a thin band of the clock's ink ---------- */
.mq { position: relative; background: var(--ink); color: var(--on-ink); }
.mq::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); }
.mq-view { overflow: hidden; padding-bottom: 3px; }
.mq-track { display: flex; flex-wrap: wrap; justify-content: center; padding: 10px var(--gut-r) 10px var(--gut-l); }
.mq-list { display: flex; flex-wrap: wrap; justify-content: center; flex: 1 1 auto; max-width: 100%; margin: 0; padding: 0; list-style: none; row-gap: 2px; }
.mq-list[aria-hidden] { display: none; }
.mq-list li { display: flex; align-items: center; white-space: nowrap; min-height: 34px; font: 700 13.5px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.mq-list li::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 14px; background: var(--gold); transform: rotate(45deg); }
.mq-list li { margin-inline: 14px; }
.mq-pause { display: none; }
html.js:not(.still) .mq-track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0; animation: mq 64s linear infinite; }
html.js:not(.still) .mq-list { flex-wrap: nowrap; flex: none; max-width: none; }
html.js:not(.still) .mq-list li { margin-inline: 0; }
html.js:not(.still) .mq-list li::before { display: none; }
html.js:not(.still) .mq-list li::after { content: ""; flex: none; width: 7px; height: 7px; margin-inline: 22px; background: var(--gold); transform: rotate(45deg); }
html.js:not(.still) .mq-list[aria-hidden] { display: flex; }
html.js:not(.still) .mq-list li { height: 46px; }
html.js:not(.still) .mq-view:hover .mq-track, html.js:not(.still) .mq.is-paused .mq-track { animation-play-state: paused; }
html.js:not(.still) .mq-pause { display: grid; place-items: center; position: absolute; right: 0; top: 0; bottom: 3px; width: 64px; padding-left: 16px; border: 0; color: var(--on-ink); cursor: pointer;
  background: linear-gradient(90deg, rgb(25 25 25 / 0), var(--ink) 36%); }
.mq-pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mq-pause .i-play { display: none; fill: currentColor; stroke-width: 1.4; }
.mq.is-paused .i-pause { display: none; } .mq.is-paused .i-play { display: block; }
.mq-pause:focus-visible { outline-color: var(--gold); outline-offset: -4px; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- 3 how it works ---------- */
.how { padding-block: var(--sec) 0; }
.how-intro { max-width: 800px; margin-inline: 0; }
@media (min-width: 1240px) { .how-intro { margin-inline: auto; max-width: 1240px; } .how-intro .sec-p { max-width: 62ch; } }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; }
.legend .stamp { margin-top: 0; font-size: 12.5px; }
.lg { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1.2 var(--f-body); color: var(--ink); background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 10px; }
.lg svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); }
.lg-rev { color: var(--pen-deep); border-color: var(--pen-deep); }
.lg-tray { border-style: dashed; }
.lg-rule { border-radius: 8px; box-shadow: 2px 2px 0 0 var(--ink); }
.lg-res { border-radius: 8px; background: var(--ink); color: var(--gold); }
.lg-op { font: 800 16px/1 var(--f-display); font-style: normal; }

/* ---------- the strip: three chapters of one horizontal timeline, joined end to end ---------- */
.how-stage { position: relative; margin-top: 40px; }
.band, .strip-hint { display: none; }
.strip-track { display: grid; gap: 80px; max-width: 1240px; margin: 0 auto; padding-inline: var(--gut-l) var(--gut-r); }
.chap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.chap > *, .chap .only-d { min-width: 0; }
.chap-cap .ch-h { margin-top: 12px; }
.chap-txt .ch-p { margin-top: 10px; }
.conn-o, .lead-o { stroke: var(--ink); stroke-width: 12; stroke-linecap: round; }
.conn, .lead { stroke: var(--gold); stroke-width: 7.5; stroke-linecap: round; }
.conn-o, .conn { stroke-dasharray: 18 14; }
@media (min-width: 760px) and (max-width: 1099px) {
  .chap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 36px; align-items: start; }
  .chap-cap { position: sticky; top: 96px; }
}
@media (min-width: 1100px) {
  .how-strip { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: 4px 0 16px; }
  .strip-track { display: flex; width: max-content; max-width: none; gap: 0; margin: 0; padding: 0 0 0 var(--A, 32px); }
  .chap { display: flex; flex-direction: column; gap: 22px; flex: none; }
  .chap-cap { position: sticky; left: var(--A, 32px); width: min(1240px, calc(100vw - 2 * var(--A, 32px))); display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); column-gap: 36px; align-items: start; }
  .chap-cap .stg-k { grid-column: 1 / -1; }
  .chap-cap .ch-h { grid-column: 1; }
  .chap-txt { grid-column: 2; } .chap-txt .ch-p { margin-top: 0; }
  .chap-cv { position: relative; }
  .strip-hint { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
}
.board-frame { position: absolute; left: 0; top: 0; padding: 0; pointer-events: none; }
/* pinned (desktop, motion allowed, JavaScript on): scrolling moves a camera left to right across all three chapters.
   The top band stays clear for the floating header, which keeps its normal hide/show behaviour. */
html.pinned .how-stage { height: 660vh; margin-top: 24px; }
html.pinned .how-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
html.pinned .band { display: block; position: relative; height: 88px; }
html.pinned .how-strip { overflow: hidden; padding: 0; }
html.pinned .strip-track { padding: 0; will-change: transform; }
html.pinned .chap { gap: 14px; }
html.pinned .chap-cap { position: relative; left: 0; will-change: transform; }
html.pinned .chap-cap .ch-h { font-size: clamp(30px, 2.9vw, 44px); }
html.pinned .chap-cap .ch-p { font-size: 16px; }
html.pinned .chap-cap .stg-k { display: none; }
html.pinned.compact .band { height: 70px; }
html.pinned.compact .cnt { top: 22px; }
html.pinned.compact .chap-cap .ch-h { font-size: 28px; }
html.pinned.compact .chap-cap .ch-p { font-size: 14px; line-height: 1.45; }
html.pinned.compact .chap-cap .legend { margin-top: 8px; }
html.pinned.compact .chap-cap .lg, html.pinned.compact .chap-cap .legend .stamp { font-size: 11.5px; padding-block: 2px 3px; }
.cnt { position: absolute; top: 31px; left: max(var(--gut-l), calc(50% - 700px + var(--gut-l))); display: flex; align-items: baseline; gap: 6px; font: 800 22px/1 var(--f-display); }
.cnt em { font: 700 14px/1 var(--f-display); font-style: normal; color: var(--ink-3); }
.cnt-dots { display: inline-flex; gap: 4px; margin-left: 10px; align-self: center; }
.cnt-dots i { width: 26px; height: 8px; border: 2px solid var(--ink); border-radius: 6px; background: var(--sheet); }
.cnt-dots i.on { background: var(--gold); }
.cnt-line { position: absolute; left: 0; right: 0; bottom: 6px; height: 4px; background: rgb(25 25 25 / .08); }
.cnt-line i { display: block; height: 100%; width: calc(var(--prog, 0) * 100%); background: var(--gold); }
/* A legend key not yet shown on the canvas waits as a plain dashed outline; its words stay
   dark (ink-2 on paper), so it is readable before it lights up. */
.legend.dimmable [data-ev] { transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.legend.dimmable [data-ev]:not(.lit) { color: var(--ink-2); background: transparent; border-color: var(--ink-3); border-style: dashed; box-shadow: none; }
.legend.dimmable [data-ev]:not(.lit) .lg-dot { background: transparent; border-color: var(--ink-3); }
.legend.dimmable .stamp[data-ev]:not(.lit) { border-left-width: 1.5px; padding-left: 9.5px; }   /* same box as when lit: no shift */
html.still .legend.dimmable [data-ev] { transition: none; }
.fig-cap { font-size: 13px; color: var(--ink-3); text-align: center; margin-top: 18px; }

/* ---------- 4 read one entry: one point on the line, opened up ---------- */
.anat { background: var(--w-lily); border-block: 2px solid var(--ink); padding-block: var(--sec); margin-top: var(--sec); }
.anat-grid { margin-top: 48px; display: grid; gap: 40px; align-items: start; }
.case-wrap { position: relative; padding-top: 70px; }
.case-line { position: absolute; left: -6px; right: -6px; top: 26px; height: 12px; background: var(--gold); border: 2px solid var(--ink); border-radius: 8px; }
.cl-today { position: absolute; left: -4px; top: 50%; transform: translateY(-50%); font: 800 12.5px/1 var(--f-display); background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 7px; }
.cl-mark { position: absolute; left: 64%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--gold); border: 2.5px solid var(--ink); }
.cl-mark::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 34px; margin-left: -1px; background: var(--ink); }
.cl-mark b { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); font: 700 12.5px/1 var(--f-display); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.case { position: relative; background: var(--sheet); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 7px 7px 0 0 var(--ink); padding: 22px 20px 22px; }
.case-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag-ex { background: var(--sheet); border-style: dashed; }
.case h3 { font-size: 26px; margin-top: 10px; }
.case-date { margin-top: 14px; padding: 14px 0; border-block: 1.5px dashed var(--rule); }
.case-date .big { font: 800 30px/1.1 var(--f-display); letter-spacing: -.02em; }
.case-date .src { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--ink-2); }
.case-date .src a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; pointer-events: none; }
.case-rev { color: var(--pen-deep); font-weight: 600; }
.case-k { margin-top: 18px; font: 700 17px/1.2 var(--f-display); }
.rules { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.rules li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 10px; }
.rules .r-t { font-weight: 600; }
.rules .stamp { margin-top: 0; justify-self: start; }
.n { position: absolute; display: inline-grid; place-items: center; width: 30px; height: 30px; font: 700 22px/1 var(--f-hand); color: var(--pen); border: 2px solid var(--pen); border-radius: 50%; background: var(--sheet); transform: rotate(-6deg); }
.case .n { right: -14px; }
.rules li .n { right: -26px; top: 50%; margin-top: -15px; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.notes li { position: relative; padding-left: 50px; }
.notes .n { left: 0; top: -2px; }
.notes b { display: block; font: 800 20px/1.2 var(--f-display); }
.notes span { display: block; margin-top: 6px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
@media (min-width: 1000px) { .anat-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; } .case { padding: 30px 32px 30px; } .notes { padding-top: 70px; } }

/* ---------- 5 how it decides: the clock's face ---------- */
.decide { background: var(--ink); color: var(--on-ink); padding-block: var(--sec); }
.decide .kicker { color: var(--gold); }
.decide .sec-p { color: var(--on-ink-2); }
.rule { position: relative; margin-top: 56px; display: grid; gap: 12px; padding-left: 46px; }
.rule-line { position: absolute; left: 6px; top: 4px; bottom: 4px; width: 12px; background: var(--gold); border: 2px solid var(--on-ink); border-radius: 8px; }
.rule-c { position: relative; }
.rule-c p { display: flex; flex-direction: column; justify-content: center; background: var(--sheet); color: var(--ink); border: 2px solid var(--on-ink); border-radius: 12px; padding: 14px 16px; font: 700 19px/1.2 var(--f-display); }
.rule-s { position: absolute; left: -34px; top: 50%; width: 34px; height: 2px; background: var(--on-ink); }
.rule-s::after { content: ""; position: absolute; left: -5px; top: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 2.5px solid var(--ink); box-shadow: 0 0 0 2px var(--on-ink); }
.rule-op { font: 800 24px/1 var(--f-display); font-style: normal; color: var(--gold); padding-left: 14px; }
.rule-res p { background: var(--gold); box-shadow: 5px 5px 0 0 var(--on-ink); }
.rr-k { display: block; font-size: 24px; letter-spacing: -.01em; }
.rule-res p { font-family: var(--f-body); font-weight: 600; font-size: 15px; }
.rule-res .rr-k { font-family: var(--f-display); font-weight: 800; }
@media (min-width: 1000px) {
  .rule { grid-template-columns: 1fr auto 1fr auto 1fr auto 1.1fr; align-items: end; gap: 12px; padding: 0 0 52px; }
  .rule-line { left: 0; right: 0; top: auto; bottom: 14px; width: auto; height: 12px; }
  .rule-c p { height: 100%; }
  .rule-c { align-self: stretch; display: grid; }
  .rule-s { left: 26px; top: 100%; width: 2px; height: 26px; }
  .rule-s::after { left: -7px; top: auto; bottom: -9px; }
  .rule-op { align-self: center; padding: 0 2px; }
}
.rule-fine { margin-top: 20px; font-size: 16px; color: var(--on-ink-2); max-width: 66ch; }
.promise-list { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--on-ink-line); }
.promise-list li { padding: 22px 22px 0 0; }
.promise-list li + li { border-left: 2px solid var(--on-ink-line); padding-left: 22px; }
.promise-list b { display: block; font: 800 22px/1.15 var(--f-display); }
.promise-list b::before { content: ""; display: block; width: 34px; height: 6px; margin-bottom: 14px; background: var(--gold); border-radius: 4px; }
.promise-list span { display: block; margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--on-ink-2); }
@media (max-width: 900px) { .promise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promise-list li:nth-child(3) { border-left: 0; padding-left: 0; } .promise-list li:nth-child(n+3) { border-top: 2px solid var(--on-ink-line); margin-top: 22px; } }
@media (max-width: 560px) { .promise-list { grid-template-columns: minmax(0, 1fr); } .promise-list li, .promise-list li + li { border-left: 0; padding-left: 0; } .promise-list li + li { border-top: 2px solid var(--on-ink-line); margin-top: 20px; } }

/* ---------- 6 what's on it, and what isn't yet ---------- */
.today { background: var(--w-peach); padding-block: var(--sec); }
.dateline { font: 600 14px/1.3 var(--f-body); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 14px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 28px; }
.dateline span + span::before { content: "\00b7"; margin-right: 14px; color: var(--ink-3); }
.cols { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col { padding: 16px 22px 0 0; border-top: 1.5px solid var(--ink); }
.col + .col { padding-left: 22px; border-left: 1.5px dashed var(--rule); }
.col h3 { font-size: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.col p { margin-top: 10px; color: var(--ink-2); font-size: 16px; }
/* "Not yet" uses the timeline's "No date yet" tray: dashed, shown, not guessed */
.notyet { margin-top: 44px; display: grid; gap: 14px; padding: 22px 22px 24px; border: 2px dashed var(--ink); border-radius: 14px; background: rgb(255 255 255 / .55); }
.notyet h3 { font-size: 22px; }
.ny-k { display: inline-block; }
.notyet ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.notyet li { padding-left: 26px; position: relative; color: var(--ink-2); }
.notyet li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 2.5px; background: var(--pen); border-radius: 2px; }
@media (max-width: 760px) { .cols { grid-template-columns: minmax(0, 1fr); } .col, .col + .col { padding: 16px 0 18px; border-left: 0; } }
@media (min-width: 900px) { .notyet { grid-template-columns: 220px 1fr; align-items: start; } }

/* ---------- 7 questions ---------- */
.faq { background: var(--w-lagoon); border-top: 2px solid var(--ink); padding-block: var(--sec); }
.faq-list { margin-top: 40px; display: grid; gap: 0 48px; }
@media (min-width: 1000px) { .faq-list { grid-template-columns: 1fr 1fr; } }
.faq details { border-top: 1.5px solid var(--ink); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; font: 700 19px/1.3 var(--f-display); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; background:
  linear-gradient(var(--ink), var(--ink)) center / 10px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 10px no-repeat; }
.faq details[open] summary::after { background: var(--gold) linear-gradient(var(--ink), var(--ink)) center / 10px 2px no-repeat; }
.faq details > div { padding: 0 0 20px; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 60ch; }
.faq details > div p + p { margin-top: 10px; }

/* ---------- 8 finale: the line ends in the sign-in card ---------- */
.finale { background: var(--ink); color: var(--on-ink); padding-block: var(--sec); position: relative; overflow: clip; }
.finale-line { position: absolute; left: 0; top: 50%; width: 62%; height: 12px; margin-top: -6px; background: var(--gold); border-block: 2px solid var(--on-ink); }
.fl-sym { position: absolute; left: max(12px, calc(50vw - 588px)); top: 50%; width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; background: var(--paper); border: 2px solid var(--on-ink); box-shadow: 0 0 0 4px var(--ink); }
.fl-sym::before { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; aspect-ratio: 284 / 368; transform: translate(-50%, -50%); background: url("/brand/clock-it-logo.png") 50.5105% 16.7631% / 169.0141% auto no-repeat; }
.finale .wrap { position: relative; display: grid; justify-items: end; }
.finale-card { position: relative; width: min(100%, 720px); background: var(--sheet); color: var(--ink); border: 2px solid var(--on-ink); border-radius: 16px; box-shadow: 7px 7px 0 0 var(--gold); display: grid; gap: 22px 36px; padding: 28px 22px 30px; }
.fc-dot { position: absolute; left: -11px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--gold); border: 2.5px solid var(--ink); box-shadow: 0 0 0 2px var(--on-ink); }
.finale-logo { width: 150px; height: auto; display: block; }
.finale h2 { font-size: clamp(56px, 12vw, 96px); line-height: .9; letter-spacing: -.04em; }
.finale h2 span { color: var(--pen); }
.finale-card p { margin-top: 14px; font-size: 17px; color: var(--ink-2); max-width: 42ch; }
@media (min-width: 720px) { .finale-card { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 38px 40px; } .finale-logo { width: 190px; } }
@media (max-width: 719px) { .finale-line { top: 64px; width: 100%; } .fl-sym { top: 64px; } .fc-dot { display: none; } .finale-card { margin-top: 84px; } }

body::before { background: var(--paper); }
.board-frame { display: none; }
html.pinned .board-frame { display: block; }
html.pinned .strip-hint, html.anim .strip-hint { display: none; }