/* Lanyard's one page: an office on paper. Ink on cream, one red, and objects you could pick up.
   Plain CSS, light only. Motion is driven by scrolling and stops for reduced motion. */

/* Three faces, all OFL and served from here, Latin only.
   Bricolage Grotesque for headlines: a heavy grotesque with ink traps and a narrow axis, like the name on a
   staff badge printed in a hurry (opsz 96, wdth 75–100, weights 500–800; bricolage-OFL.txt).
   Atkinson Hyperlegible Next for reading: built so letters can't be mistaken for each other (atkinson-next-OFL.txt).
   Martian Mono for what a badge or a log prints: addresses, numbers, times (martian-mono-OFL.txt). */
@font-face {
  font-family: "Bricolage"; src: url("/assets/bricolage-latin-134ef526.woff2") format("woff2");
  font-weight: 500 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Next"; src: url("/assets/atkinson-next-latin-ddd9255f.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Martian Mono"; src: url("/assets/martian-mono-latin-c5925ba5.woff2") format("woff2");
  font-weight: 400 600; font-stretch: 87.5% 100%; font-style: normal; font-display: swap;
}
/* Kalam: a plain, legible hand, for Robin's red pen (OFL; kalam-OFL.txt). */
@font-face {
  font-family: "Lanyard Hand"; src: url("/assets/kalam-latin-1588aa46.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* The one accent is lanyard red: the strap, the rubber stamp and the manager's pen are the same ink,
     so the colour always means "this is the office's mark", never decoration. */
  --red: #c4372b;
  --red-deep: #a32a20;
  --paper: #f4ede1;
  --sheet: #fffdf8;
  --ink: #221c16;
  --ink-soft: #594e44;
  --rule: #d6c8b1;
  --kraft: #d3bd96;
  --measure: 76rem;
  --display: "Bricolage", "Arial Narrow", system-ui, sans-serif;
  --text: "Atkinson Next", system-ui, sans-serif;
  --hand: "Lanyard Hand", "Bradley Hand", "Segoe Print", cursive;
  --mono: "Martian Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink); overflow-x: clip;
  font: 400 clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem) / 1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 750; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 1.4rem + 6vw, 6.25rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem); letter-spacing: -0.015em; }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.3em; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--red-deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2.5px solid var(--red); outline-offset: 3px; border-radius: 2px; }
code { font: 0.86em var(--mono); padding: 0.05em 0.3em; border-radius: 3px; background: rgb(34 28 22 / 7%); }
strong { font-weight: 650; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hand { font-family: var(--hand); font-weight: 400; letter-spacing: 0; }
.small { font-size: 0.875rem; color: var(--ink-soft); }
.kicker { margin: 0 0 1.25rem; font: 500 0.75rem / 1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.section__lede { max-width: 38rem; font-size: 1.1875rem; color: var(--ink-soft); }
.svg-display { font-family: var(--display); font-weight: 700; }
.svg-mono { font-family: var(--mono); font-stretch: 87.5%; letter-spacing: -0.02em; }

/* A raffle ticket: the one button that matters. The notches take the colour behind them. */
.tab {
  --behind: var(--paper);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 1.75rem; border: 0; border-radius: 3px; cursor: pointer;
  background:
    radial-gradient(circle at 0 50%, var(--behind) 0 0.45rem, transparent 0.5rem),
    radial-gradient(circle at 100% 50%, var(--behind) 0 0.45rem, transparent 0.5rem),
    var(--tab, var(--red));
  color: var(--tab-ink, #fff8f0); font: 600 1.0625rem / 1 var(--display); letter-spacing: 0.01em; text-decoration: none;
  box-shadow: 0 2px 0 var(--tab-edge, var(--red-deep)), 0 6px 14px -6px rgb(34 28 22 / 45%);
  transition: translate 120ms ease-out, box-shadow 120ms ease-out;
  &::before { content: ""; position: absolute; inset: 0.3rem 0.85rem; border: 1.5px dashed rgb(255 248 240 / 55%); border-radius: 2px; pointer-events: none; }
  &:hover { translate: 0 -1px; box-shadow: 0 3px 0 var(--tab-edge, var(--red-deep)), 0 10px 18px -8px rgb(34 28 22 / 50%); }
  &:active { translate: 0 1px; box-shadow: 0 1px 0 var(--tab-edge, var(--red-deep)); }
}
.tab--small { min-height: 2.75rem; padding: 0 1.25rem; font-size: 0.9375rem; }
/* GitHub's mark beside a link to GitHub: the text's size and colour. */
.mark { flex: none; inline-size: 1em; block-size: 1em; }
.tab .mark { margin-inline-end: 0.5em; }
.quiet-link {
  display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
  &:hover { color: var(--red-deep); }
}

/* Letterhead and sign-off. */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--measure); margin: 0 auto; padding: 1rem max(1.25rem, env(safe-area-inset-left)) 0.75rem;
  border-bottom: 3px double var(--ink);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem;
  color: var(--ink); font: 650 1.5rem / 1 var(--display); letter-spacing: -0.03em; text-decoration: none;
}
.site-nav {
  display: none; gap: 0.25rem 1.75rem; margin-inline: auto 1.5rem;
  & a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-soft); text-decoration: none; font: 500 0.75rem / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
  & a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.4em; }
  @media (min-width: 760px) { display: flex; }
}
main { max-width: var(--measure); margin: 0 auto; padding: 0 max(1.25rem, env(safe-area-inset-left)); }
.section { padding-block: clamp(4.5rem, 3rem + 6vw, 9rem); }
.site-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem;
  max-width: var(--measure); margin: 0 auto; padding: 1.5rem max(1.25rem, env(safe-area-inset-left)) max(2rem, env(safe-area-inset-bottom));
  border-top: 3px double var(--ink); font-size: 0.9375rem; color: var(--ink-soft);
  & p { margin: 0; }
}
.origin { display: inline-flex; align-items: center; gap: 0.25rem; }
.ajent { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; color: var(--ink-soft); }
.ajent:hover { color: var(--ink); }
.ajent-mark { height: 1rem; width: auto; }

/* Hero: the promise on the left, the badge on its peg on the right. */
/* The top of the page, after the X header: a dark board, you in the middle, four agents around you.
   It runs edge to edge; the paper office starts below it. Lime is used here and nowhere else. */
.boss {
  --board: #141410; --board-2: #1d1d18; --chalk: #f2efe6; --chalk-soft: #b9b5a8; --lime: #d6f03a;
  margin-inline: calc(50% - 50vw); background: radial-gradient(60rem 40rem at 72% 45%, #23261a, var(--board) 70%); color: var(--chalk);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
.boss__inner {
  max-width: var(--measure); margin: 0 auto; padding-inline: max(1.25rem, env(safe-area-inset-left));
  display: grid; gap: 3rem; align-items: center;
  @media (min-width: 1000px) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.boss__kicker { margin: 0 0 1.25rem; font: 500 0.75rem / 1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--chalk-soft); & span { color: var(--lime); } }
.boss h1 {
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem); font-weight: 800; font-stretch: 90%; line-height: 1; letter-spacing: -0.012em;
  & em { display: block; font-style: normal; color: var(--lime); }
}
.boss__lede { max-width: 32rem; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); line-height: 1.55; color: var(--chalk-soft); }
.boss__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.boss__link { color: var(--chalk); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.tab--lime { --behind: #1a1b15; --tab: var(--lime); --tab-ink: var(--board); --tab-edge: #9fb81c; &::before { border-color: rgb(20 20 16 / 45%); } }

.chart { position: relative; margin: 0; }
.chart__agents { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.agent-card {
  position: relative; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 0.75rem; align-items: center;
  padding: 0.9rem 1rem; border: 1px solid #34342c; border-radius: 0.6rem; background: var(--board-2);
  box-shadow: 0 14px 30px -18px rgb(0 0 0 / 70%);
  & p { margin: 0; grid-column: 2; }
}
.agent-card__initial {
  grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.45rem;
  font: 800 1.15rem / 1 var(--display); color: var(--board); background: var(--tone);
}
.agent-card--lime { --tone: #d6f03a; } .agent-card--lilac { --tone: #b9a7f5; } .agent-card--peach { --tone: #f6a96b; } .agent-card--mint { --tone: #86d8c4; }
.agent-card__name { font: 750 1.125rem / 1.2 var(--display); }
.agent-card__role { font: 500 0.6875rem / 1.4 var(--mono); font-stretch: 87.5%; color: var(--lime); white-space: nowrap; }
.agent-card__line {
  grid-column: 1 / -1 !important; display: flex; align-items: center; gap: 0.6rem; margin-top: 0.35rem !important;
  font: 400 0.6875rem / 1.4 var(--mono); font-stretch: 87.5%; color: var(--chalk-soft); white-space: nowrap;
  &:first-of-type { margin-top: 0.7rem !important; }
  & svg { width: 1rem; height: 1rem; flex: none; color: var(--chalk-soft); }
}
.agent-card__line + .agent-card__line { margin-top: 0.3rem !important; }
.chart__you {
  display: grid; place-items: center; align-content: center; width: 8.5rem; height: 8.5rem; margin: 0 auto 1.5rem; border-radius: 50%;
  border: 2px solid var(--lime); background: var(--board); box-shadow: 0 0 0 10px rgb(214 240 58 / 6%), 0 0 60px rgb(214 240 58 / 12%);
  & strong { font: 800 1.75rem / 1 var(--display); }
  & span { margin-top: 0.35rem; font: 500 0.6875rem / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--chalk-soft); }
}
.chart__wires, .chart__tag { display: none; }

/* Wide enough for the drawing: you in the middle, an agent in each corner, wires between. */
@media (min-width: 700px) {
  .chart { aspect-ratio: 1.5; min-height: 26rem; }
  .chart__wires { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .chart__ring { fill: none; stroke: #8d8a7c; stroke-width: 1.2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
  .chart__line { fill: none; stroke: var(--lime); stroke-width: 1.6; opacity: 0.7; vector-effect: non-scaling-stroke; }
  .chart__you { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; }
  .chart__agents { position: absolute; inset: 0; grid-template-columns: repeat(2, minmax(0, 17rem)); justify-content: space-between; align-content: space-between; gap: 0; }
  .chart__tag {
    display: block; position: absolute; left: 50%; translate: -50% -50%; padding: 0.2rem 0.5rem; border-radius: 3px;
    font: 500 0.6875rem / 1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; background: var(--chalk); color: var(--board);
  }
  .chart__tag--ask { top: 10%; } .chart__tag--answer { top: 90%; }
}

.hero {
  display: grid; gap: 1rem 3rem; align-items: center; padding-block: clamp(2rem, 1rem + 4vw, 4rem) clamp(3rem, 2rem + 4vw, 6rem);
  @media (min-width: 900px) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.hero__title { font-size: clamp(2.75rem, 1.4rem + 6vw, 6.25rem); letter-spacing: -0.02em; }
.hero__words .lede { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.55; color: var(--ink-soft); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.scribbled {
  position: relative; display: inline-block; white-space: nowrap;
  & svg { position: absolute; left: -2%; bottom: -0.12em; width: 104%; height: 0.24em; color: var(--red); overflow: visible; }
}

/* The badge on its lanyard. --strap is the length of strap above the clip. */
.lanyard {
  --strap: 12rem; --width: min(19.5rem, calc(100vw - 3rem));
  position: relative; margin: 0 auto; width: var(--width); height: calc(var(--strap) + 27rem);
  @media (max-width: 899px) { --strap: 6rem; height: calc(var(--strap) + 27rem); }
}
.lanyard__peg {
  position: absolute; top: 0; left: 50%; z-index: 3; width: 2rem; height: 2rem; translate: -50% -30%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f1d58e, #c59a3d 45%, #7d5c1c);
  box-shadow: 0 3px 4px rgb(34 28 22 / 35%), inset 0 -2px 3px rgb(0 0 0 / 25%);
}
.lanyard__swing { position: absolute; inset: 0 0 auto; transform-origin: 50% 0; rotate: -2deg; }
.lanyard__strap { position: relative; height: var(--strap); }
.lanyard__band {
  position: absolute; top: -0.5rem; left: 50%; width: 1.5rem; height: calc(var(--strap) + 1.25rem); margin-left: -0.75rem; overflow: hidden;
  transform-origin: 50% 0; border-radius: 2px; box-shadow: 0 2px 5px rgb(34 28 22 / 28%);
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / 9%) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 7%) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, #9b261d, #c93a2e 25%, #cf4033 70%, #a02a20);
  & span {
    display: block; writing-mode: vertical-rl; white-space: nowrap; line-height: 1.5rem; text-align: center; padding-top: 1.5rem;
    font: 600 0.5625rem / 1.5rem var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: rgb(255 242 232 / 78%);
  }
}
.lanyard__band--left { translate: -0.95rem 0; rotate: -3.5deg; }
.lanyard__band--right { translate: 0.95rem 0; rotate: 3.5deg; z-index: 1; }
.lanyard__clip {
  position: absolute; top: calc(var(--strap) - 0.25rem); left: 50%; z-index: 2; width: 1.75rem; height: 2.4rem; translate: -50% 0;
  border-radius: 0.8rem 0.8rem 0.35rem 0.35rem; border: 1px solid #6f685e;
  background: linear-gradient(90deg, #8d867b, #ece7de 45%, #b0a89c 60%, #7c766c);
  &::after {
    content: ""; position: absolute; left: 50%; bottom: -0.85rem; width: 1rem; height: 1rem; translate: -50% 0;
    border-radius: 50%; border: 3px solid #a39b8f; box-shadow: inset 0 0 0 1px #6f685e;
  }
}
.badge {
  position: relative; margin-top: 2.6rem; overflow: hidden; border-radius: 0.9rem;
  background: var(--sheet); border: 1px solid rgb(34 28 22 / 16%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 90%) inset, 0 22px 36px -16px rgb(34 28 22 / 45%), 0 3px 8px rgb(34 28 22 / 12%);
  transform-origin: 50% -2.5rem;
  /* The laminate: a soft sheen across the pouch and a slot punched for the clip. */
  &::before {
    content: ""; position: absolute; top: 0.55rem; left: 50%; z-index: 2; width: 2.75rem; height: 0.55rem; translate: -50% 0;
    border-radius: 1rem; background: var(--paper); box-shadow: inset 0 1px 2px rgb(34 28 22 / 45%);
  }
  &::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background:
      linear-gradient(112deg, transparent 38%, rgb(255 255 255 / 45%) 46%, transparent 54%),
      linear-gradient(180deg, rgb(255 255 255 / 30%), transparent 25%);
    box-shadow: inset 0 0 0 0.35rem rgb(255 255 255 / 35%);
  }
}
.badge__band {
  display: flex; justify-content: space-between; margin: 0; padding: 1.5rem 1.25rem 0.55rem;
  background: var(--red); color: #fff4ea; font: 600 0.6875rem / 1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
}
.badge__body { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: end; padding: 1.25rem 1.25rem 0.9rem; }
.badge__photo { display: block; width: 6rem; height: auto; aspect-ratio: 80 / 88; border: 1px solid rgb(34 28 22 / 25%); box-shadow: 0 1px 2px rgb(34 28 22 / 15%); }
.badge__name { margin: 0; font: 600 2.75rem / 0.95 var(--display); letter-spacing: -0.03em; }
.badge__role { margin: 0.5rem 0 0; font: 500 0.6875rem / 1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.badge__facts {
  display: grid; gap: 0.35rem; margin: 0 1.25rem; padding-top: 0.75rem; border-top: 1.5px solid var(--ink); font-size: 0.9375rem;
  & div { display: flex; align-items: baseline; gap: 0.5rem; }
  & div::before { content: ""; order: 1; flex: 1; min-width: 1rem; border-bottom: 1.5px dotted rgb(34 28 22 / 35%); }
  & dt { order: 0; font: 500 0.6875rem / 1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
  & dd { order: 2; margin: 0; font-weight: 550; overflow-wrap: anywhere; text-align: right; }
}
.badge__barcode {
  height: 1.6rem; margin: 1rem 1.25rem 1.15rem; opacity: 0.85;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 17px);
}

/* A day: the words stay put while the diary page scrolls past. */
.day {
  display: grid; gap: 2.5rem 4rem; align-items: start;
  @media (min-width: 960px) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); & .day__words { position: sticky; top: 2.5rem; } }
}
.diary { margin: 0; }
.diary__sheet {
  position: relative; padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); background: var(--sheet); rotate: 0.6deg;
  box-shadow: 0 1px 2px rgb(34 28 22 / 12%), 0 24px 40px -24px rgb(34 28 22 / 45%);
  /* A paper clip holds the page. */
  &::before {
    content: ""; position: absolute; top: -1.1rem; left: 2.25rem; width: 0.85rem; height: 3.1rem; rotate: 8deg;
    border: 2.5px solid #8d867b; border-radius: 1rem; box-shadow: inset 0.2rem 0.4rem 0 -0.05rem var(--sheet), inset 0 0 0 0.25rem var(--sheet), inset 0 0 0 0.4rem #a39b8f;
  }
}
.diary__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem;
  padding-bottom: 0.75rem; border-bottom: 2px solid var(--ink);
}
.diary__form { margin: 0; font: 600 clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem) / 1 var(--display); letter-spacing: -0.02em; }
.diary__fields {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0;
  & div { display: flex; align-items: baseline; gap: 0.4rem; }
  & dt { font: 500 0.625rem / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
  & dd { margin: 0; padding: 0 0.3rem; border-bottom: 1px solid var(--rule); font: 400 1.25rem / 1.3 var(--hand); }
}
.diary__entries {
  margin: 0; padding: 0; list-style: none;
  & li {
    position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 7.5rem; column-gap: 1rem; align-items: start;
    padding: 0.95rem 0; border-bottom: 1px solid var(--rule);
  }
  & time { grid-row: span 2; padding-top: 0.15rem; font: 600 1rem / 1.4 var(--mono); font-variant-numeric: tabular-nums; border-right: 3px double var(--rule); height: 100%; }
  & p { grid-column: 2; margin: 0; }
  & .diary__kind { margin-bottom: 0.2rem; font: 500 0.6875rem / 1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
  & li > :is(.tick, .stamp) { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: center; }
}
.tick { width: 1.75rem; height: auto; color: var(--red); rotate: -6deg; }
.diary__entries li:nth-child(3n + 2) .tick { rotate: 4deg; width: 1.6rem; }
.diary__entries li:nth-child(3n) .tick { rotate: -12deg; }
.stamp {
  display: inline-block; padding: 0.4rem 0.6rem; rotate: -14deg; margin-inline: 0 -1rem;
  border: 2.5px solid currentColor; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3.25px currentColor;
  color: var(--red); font: 800 0.9375rem / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.88; mix-blend-mode: multiply;
  mask-image: linear-gradient(100deg, #000 55%, rgb(0 0 0 / 55%) 68%, #000 82%);
}
.stamp--second { rotate: -6deg; }
.diary__note {
  position: relative; width: fit-content; margin: 1.75rem 0.5rem 0 auto; rotate: -4deg;
  color: var(--red); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1;
  & span { font-size: 0.7em; }
}
.diary__arrow { position: absolute; left: -4.75rem; top: -2.5rem; width: 4.5rem; height: auto; }
.diary figcaption { max-width: 34rem; margin-top: 2rem; font-size: 0.9375rem; color: var(--ink-soft); }

/* Day one: the packet, opened out on a desk blotter. */
.desk {
  position: relative; margin-top: 3rem; padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.25rem, 0.5rem + 4vw, 4.5rem);
  border-radius: 0.5rem; color: var(--ink);
  background:
    linear-gradient(135deg, #5a3e2b 0 2.25rem, transparent 2.3rem) top left / 50% 50% no-repeat,
    linear-gradient(225deg, #5a3e2b 0 2.25rem, transparent 2.3rem) top right / 50% 50% no-repeat,
    linear-gradient(45deg, #5a3e2b 0 2.25rem, transparent 2.3rem) bottom left / 50% 50% no-repeat,
    linear-gradient(315deg, #5a3e2b 0 2.25rem, transparent 2.3rem) bottom right / 50% 50% no-repeat,
    radial-gradient(rgb(255 255 255 / 14%) 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(rgb(34 28 22 / 7%) 1px, transparent 1.5px) 3px 4px / 9px 9px,
    var(--kraft);
  box-shadow: inset 0 0 0 1px rgb(34 28 22 / 12%), 0 30px 50px -40px rgb(34 28 22 / 60%);
}
.desk__welcome {
  position: absolute; top: -1.5rem; right: clamp(1rem, 4vw, 4rem); z-index: 1; margin: 0; padding: 0.8rem 1.1rem 0.9rem; rotate: 3deg;
  background: #f9eec9; color: var(--ink); font-size: 1.35rem; line-height: 1.15;
  box-shadow: 0 10px 14px -10px rgb(34 28 22 / 50%);
  & span { display: block; text-align: right; font-size: 1.05rem; color: var(--red-deep); }
}
.desk__objects {
  display: grid; gap: 3rem 2.75rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
  @media (min-width: 1000px) {
    /* Three across, then two centred under them. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    & .obj { grid-column: span 2; } & .obj:nth-child(4) { grid-column: 2 / span 2; }
    & .obj:nth-child(2) { margin-top: 3rem; } & .obj:nth-child(3) { margin-top: -0.5rem; }
    & .obj:nth-child(4) { margin-top: -1rem; } & .obj:nth-child(5) { margin-top: 1.5rem; }
  }
  & h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
  & p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #3b3027; }
}
.obj__art {
  display: block; width: 100%; max-width: 15rem; height: auto; margin: 0 0 1.25rem -0.25rem; rotate: var(--r, 0deg);
  filter: drop-shadow(0 8px 6px rgb(34 28 22 / 25%));
}
.obj--card { --r: -4deg; --fx: 30%; --fy: 50%; }
.obj--key { --r: 7deg; --fx: 0%; --fy: 70%; }
.obj--laptop { --r: -2deg; --fx: -30%; --fy: 50%; }
.obj--slip { --r: -5deg; --fx: 0%; --fy: -60%; }
.obj--notebook { --r: 3deg; --fx: -30%; --fy: -40%; }

/* The real thing: the words, then the app in a laptop and a phone. Then the film's empty frame. */
.product {
  display: grid; gap: 3rem 4rem; align-items: center;
  @media (min-width: 960px) { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
  & .product__words > p:not(.kicker) { color: var(--ink-soft); }
}
.devices { margin: 0; }
.devices__stage { position: relative; padding: 0 clamp(2.5rem, 8vw, 5rem) clamp(2rem, 4vw, 3rem) 0; }
.laptop__lid {
  position: relative; padding: 3.2% 3.2% 3.8%; border-radius: 1.1rem 1.1rem 0.35rem 0.35rem; background: #1f1a15;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #3a322a;
  &::before { content: ""; position: absolute; top: 1.4%; left: 50%; width: 0.35rem; height: 0.35rem; translate: -50% 0; border-radius: 50%; background: #3f382f; }
  & img { display: block; width: 100%; height: auto; border-radius: 2px; }
}
.laptop__base {
  position: relative; height: clamp(0.7rem, 1.6vw, 1.1rem); margin: 0 -6%; border-radius: 0 0 1.2rem 1.2rem / 0 0 0.9rem 0.9rem;
  background: linear-gradient(#e2dcd2, #b5ada1 60%, #8f887c); box-shadow: 0 18px 28px -14px rgb(34 28 22 / 55%);
  &::before { content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 40%; translate: -50% 0; border-radius: 0 0 0.6rem 0.6rem; background: #a39b8f; }
}
.phone {
  position: absolute; right: 0; bottom: 0; width: 29%; max-width: 13.5rem; padding: 2.4%; border-radius: 13% / 6%;
  background: #1f1a15; box-shadow: inset 0 0 0 1.5px #4a4037, 0 26px 40px -18px rgb(34 28 22 / 60%);
  & img { display: block; width: 100%; height: auto; border-radius: 10% / 4.6%; }
}
.devices figcaption, .film figcaption { max-width: 34rem; margin-top: 1.5rem; font-size: 1rem; color: var(--ink-soft); }
.devices figcaption { color: var(--ink); font-size: 1.0625rem; }

.film { grid-column: 1 / -1; margin: clamp(2rem, 4vw, 4rem) 0 0; }
.film__frame {
  padding: 1.6rem 0; border-radius: 0.35rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 0.6rem, var(--paper) 0.6rem 1.5rem, transparent 1.5rem 2.2rem) 0 0.55rem / 100% 0.55rem no-repeat,
    repeating-linear-gradient(90deg, transparent 0 0.6rem, var(--paper) 0.6rem 1.5rem, transparent 1.5rem 2.2rem) 0 calc(100% - 0.55rem) / 100% 0.55rem no-repeat,
    #221c16;
}
.film__poster {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem clamp(1.5rem, 4vw, 4rem);
  min-height: clamp(14rem, 30vw, 24rem); padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 5rem);
  background: radial-gradient(ellipse at 30% 45%, #fdf8ee, #ead9bd 75%);
}
.film__iris { width: clamp(4.5rem, 10vw, 8.5rem); height: auto; }
.film__words p { margin: 0; }
.film__tag { font: 500 0.75rem / 1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.film__title { margin-block: 0.4rem 1rem !important; font: 600 clamp(2rem, 1.2rem + 3.5vw, 4.25rem) / 1 var(--display); letter-spacing: -0.035em; }
.film__soon {
  display: inline-block; padding: 0.4rem 0.7rem; border: 1.5px solid var(--ink);
  font: 600 0.75rem / 1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
}
.film__note {
  position: absolute; top: -0.9rem; right: clamp(1rem, 5vw, 4rem); margin: 0; padding: 0.6rem 0.9rem 0.5rem; rotate: 4deg;
  background: var(--sheet); color: var(--red); font-size: 1.3rem; line-height: 1; box-shadow: 0 8px 12px -8px rgb(34 28 22 / 50%);
  &::before { content: ""; position: absolute; top: -0.6rem; left: 50%; width: 4rem; height: 1.2rem; translate: -50% 0; rotate: -3deg; background: rgb(220 205 175 / 75%); }
}

/* Four doors: the office's floor plan, and its key. */
.reach__words { max-width: 46rem; }
.plan {
  view-timeline: --plan; display: grid; gap: 2rem 4rem; align-items: center; margin-top: 2.5rem;
  @media (min-width: 960px) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
.plan__drawing { display: block; width: 100%; height: auto; }
.plan__label { font-weight: 600; }
@media (max-width: 559px) {
  .plan__label { font-size: 26px; }
  .plan__room, .plan__titleblock { display: none; }
}
.plan__walker { translate: 320px 352px; }
.plan__notes {
  margin: 0; padding: 0; list-style: none;
  & li { padding: 1.1rem 0; border-top: 1px solid var(--ink); }
  & li:last-child { border-bottom: 1px solid var(--ink); }
  & h3 { font-size: 1.35rem; }
  & p { margin: 0; color: var(--ink-soft); }
}
.plan__key { margin-bottom: 0.35rem !important; font: 600 0.75rem / 1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-deep) !important; }

/* Concourse: an internal-mail envelope, crossed off line by line. */
.concourse {
  display: grid; gap: 3rem 4rem; align-items: start;
  @media (min-width: 960px) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
  & .concourse__words > p:not(.kicker) { color: var(--ink-soft); }
}
.envelope {
  position: relative; margin: 0; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 2vw, 2rem); rotate: 1.2deg;
  background:
    radial-gradient(rgb(255 255 255 / 12%) 1px, transparent 1.5px) 0 0 / 6px 6px,
    linear-gradient(160deg, #e0c896, #d4b780);
  border-radius: 3px; box-shadow: 0 1px 2px rgb(34 28 22 / 20%), 0 26px 40px -26px rgb(34 28 22 / 55%);
  @media (min-width: 960px) { margin-top: 3.5rem; }
}
.envelope__tie { position: absolute; top: 0.5rem; right: 1rem; width: 3.5rem; height: auto; filter: drop-shadow(0 1px 1px rgb(34 28 22 / 30%)); }
.envelope__title {
  margin: 0 0 1.25rem; font: 600 1.75rem / 1 var(--display); letter-spacing: -0.02em;
  & span { display: block; margin-top: 0.4rem; font: 500 0.6875rem / 1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #4a3d2e; }
}
.envelope__routing {
  width: 100%; border-collapse: collapse; border: 1.5px solid var(--ink); table-layout: fixed;
  & th { padding: 0.4rem 0.5rem; text-align: left; font: 600 0.625rem / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid rgb(34 28 22 / 55%); }
  & th:last-child { width: 40%; }
  & td { height: 2.75rem; padding: 0.4rem 0.5rem; border: 1px solid rgb(34 28 22 / 55%); font: 400 clamp(0.6875rem, 0.6rem + 0.3vw, 0.8125rem) / 1.25 var(--mono); }
  & td:last-child { font: 400 1.125rem / 1.15 var(--hand); }
}
.envelope__done td { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.envelope__rules {
  margin: 1.5rem 0 0; padding: 0.4rem 1.1rem; list-style: none; border: 1.5px solid var(--ink); background: rgb(255 253 248 / 40%);
  & li { padding: 0.7rem 0; font-size: 0.9375rem; line-height: 1.5; }
  & li + li { border-top: 1px dashed rgb(34 28 22 / 40%); }
  & strong { display: block; font-size: 1.0625rem; }
}

/* Yours to run: a calm, ruled list. */
.ledger {
  margin: 2.5rem 0 0;
  & div { display: grid; gap: 0.25rem 2rem; padding: 1.4rem 0; border-top: 1px solid var(--ink); @media (min-width: 760px) { grid-template-columns: 18rem 1fr; } }
  & div:last-child { border-bottom: 1px solid var(--ink); }
  & dt { font: 600 1.375rem / 1.25 var(--display); letter-spacing: -0.01em; }
  & dd { margin: 0; max-width: 40rem; color: var(--ink-soft); }
}

/* The limits, as a notice pinned to the wall. */
.limits {
  position: relative; max-width: 48rem; margin: 0 auto; padding: clamp(2.5rem, 2rem + 2vw, 3.5rem) clamp(1.25rem, 1rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--sheet); rotate: -0.4deg; box-shadow: 0 1px 2px rgb(34 28 22 / 12%), 0 24px 40px -26px rgb(34 28 22 / 45%);
  &::before {
    content: ""; position: absolute; top: 0.9rem; left: 50%; width: 1.1rem; height: 1.1rem; translate: -50% 0; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f08a7c, var(--red) 55%, #7d1d16); box-shadow: 0 4px 4px -1px rgb(34 28 22 / 45%);
  }
  & h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
}
.section.limits { margin-block: clamp(3rem, 2rem + 4vw, 6rem); }
.wont {
  margin: 1rem 0 0; padding: 0; list-style: none;
  & li { position: relative; padding: 1rem 0 1rem 2.75rem; border-top: 1px solid var(--rule); }
  & li::before, & li::after {
    content: ""; position: absolute; left: 0.45rem; top: 1.65rem; width: 1.3rem; height: 2.5px; border-radius: 2px; background: var(--red);
  }
  & li::before { rotate: 42deg; }
  & li::after { rotate: -48deg; width: 1.4rem; }
}

/* The waitlist: a sign-up sheet on a clipboard. */
.waitlist { padding-top: clamp(2rem, 1rem + 4vw, 5rem); }
.clipboard {
  position: relative; max-width: 42rem; margin: 0 auto; padding: 3.25rem clamp(0.75rem, 0.5rem + 1.5vw, 1.5rem) clamp(0.75rem, 0.5rem + 1.5vw, 1.5rem);
  border-radius: 1.25rem; rotate: 0.5deg;
  background: radial-gradient(rgb(255 255 255 / 8%) 1px, transparent 1.5px) 0 0 / 5px 5px, linear-gradient(160deg, #b5895b, #94683e);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%), 0 30px 50px -30px rgb(34 28 22 / 65%);
}
.clipboard__clip {
  position: absolute; top: -1rem; left: 50%; z-index: 1; width: 9rem; height: 3.4rem; translate: -50% 0;
  border-radius: 0.6rem 0.6rem 1.4rem 1.4rem; border: 1px solid #6f685e;
  background: linear-gradient(180deg, #ece7de, #b0a89c 55%, #8d867b);
  box-shadow: 0 6px 8px -4px rgb(34 28 22 / 45%);
  &::before { content: ""; position: absolute; top: 0.55rem; left: 50%; width: 2.25rem; height: 0.9rem; translate: -50% 0; border-radius: 1rem; background: #94683e; box-shadow: inset 0 2px 3px rgb(0 0 0 / 40%); }
}
.clipboard__sheet {
  padding: clamp(1.75rem, 1rem + 3vw, 3rem) clamp(1.25rem, 0.75rem + 3vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--sheet); box-shadow: 0 2px 4px rgb(34 28 22 / 25%);
  & h2 { font-size: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem); }
  & > p:not(.kicker) { color: var(--ink-soft); }
  & .tab { --behind: var(--sheet); }
}
.waitlist__form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; margin: 2rem 0 1rem;
}
.waitlist__label { flex-basis: 100%; margin-bottom: -0.75rem; font: 600 0.6875rem / 1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.input {
  flex: 1 1 14rem; min-width: 0; min-height: 3.25rem; padding: 0 0.25rem; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font: 400 1.25rem / 1.2 var(--display);
  &::placeholder { color: #8a7d70; }
  &:focus-visible { outline: 2.5px solid var(--red); outline-offset: 4px; }
  &[aria-invalid="true"] { border-bottom-color: var(--red); }
}
.field-error { color: var(--red-deep); font-weight: 600; }

/* Questions. */
.faq { max-width: 50rem; }
.faq details { border-bottom: 1px solid var(--ink); }
.faq details:first-of-type { border-top: 1px solid var(--ink); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; cursor: pointer; list-style: none;
  font: 600 1.1875rem / 1.3 var(--display);
  &::-webkit-details-marker { display: none; }
  &::after { content: "+"; font: 400 1.5rem / 1 var(--mono); color: var(--red); }
}
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 42rem; color: var(--ink-soft); }

.prose { max-width: 40rem; & ul { padding-left: 1.25rem; } & li { margin-bottom: 0.5rem; } & h1 { font-size: clamp(2.5rem, 2rem + 3vw, 4rem); } }
.prose .tab { --behind: var(--paper); }

/* Phones: the diary and the envelope give their columns back. */
@media (max-width: 559px) {
  .diary__entries li { grid-template-columns: 3.4rem minmax(0, 1fr) 2rem; column-gap: 0.75rem; }
  .diary__entries time { font-size: 0.875rem; }
  .diary__entries li.diary__decision { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .diary__entries li > .stamp { grid-column: 2; grid-row: 3; justify-self: start; margin: 0.6rem 0 0.2rem; rotate: -4deg; }
  .diary__arrow { display: none; }
  .desk__welcome { position: relative; top: auto; right: auto; width: fit-content; margin: -1rem 0 2rem auto; }
  .film__poster { grid-template-columns: 1fr; }
  .film__iris { width: 4rem; }
}

/* Motion, only where the page scrolls it, and never for reduced motion. Without support, everything is at rest.
   Nothing fades in: the desk's objects only move into place, so no capture or crawler sees a bare desk. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lanyard__swing { animation: swing linear both; animation-timeline: scroll(root); animation-range: 0 110vh; }
    .badge { animation: swing-card linear both; animation-timeline: scroll(root); animation-range: 0 110vh; }
    .obj__art { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
    .plan__walker { animation: walk linear both; animation-timeline: --plan; animation-range: cover 22% cover 78%; }
  }
}
@keyframes swing {
  0% { rotate: -2deg; } 16% { rotate: 6deg; } 36% { rotate: -4.5deg; } 56% { rotate: 3deg; } 76% { rotate: -1.5deg; } 100% { rotate: 0.5deg; }
}
@keyframes swing-card {
  0% { rotate: 0deg; } 18% { rotate: -2.5deg; } 38% { rotate: 2deg; } 58% { rotate: -1.25deg; } 100% { rotate: 0deg; }
}
@keyframes settle {
  from { translate: var(--fx) var(--fy); rotate: calc(var(--r) * -3); }
  to { translate: 0 0; rotate: var(--r); }
}
/* Iris's route: round her desk, out to each door and back. */
@keyframes walk {
  0% { translate: 320px 352px; } 7% { translate: 480px 352px; } 14% { translate: 480px 268px; } 20% { translate: 562px 268px; }
  26% { translate: 480px 268px; } 33% { translate: 480px 128px; } 40% { translate: 320px 128px; } 46% { translate: 320px 76px; }
  52% { translate: 320px 128px; } 59% { translate: 160px 128px; } 66% { translate: 160px 268px; } 72% { translate: 82px 268px; }
  78% { translate: 160px 268px; } 85% { translate: 160px 352px; } 92% { translate: 320px 352px; } 100% { translate: 320px 444px; }
}

/* The line under the day-one desk: what else an agent can have. */
.day-one > .section__lede { margin-top: 2.5rem; }