/* work.css: the one stylesheet for the static pages (work/<id>/, work/, quick/). C2 Notebook: ruled paper, flat sticker
   colours, ink-stamp S/T/A/R. No JS. Mobile first. Hand-written; build-seo.mjs does not overwrite it. */
:root {
  --paper: #fbfaf6; --page: #f7f5ef; --ink: #161616; --muted: rgba(22,22,22,.66); --line: rgba(22,22,22,.16);
  --mustard: #f3c63f; --pink: #ec5b9b; --red: #e03b2e; --blue: #2d4fd8; --green: #3fae6a; --coral: #e2703f;
  --rule: rgba(45,79,216,.11); --margin: rgba(236,91,155,.5);
  --font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --hand: 'Caveat', 'Comic Sans MS', cursive;
  --gutter: 16px; --read: 720px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 400 17px/1.6 var(--font); letter-spacing: -.005em; overflow-x: hidden;
  background: repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px) 0 0 / 100% 32px, var(--paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--pink); }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, dd, li { text-wrap: pretty; overflow-wrap: break-word; }
p { margin: 0; }

/* skip link: off-screen until focused */
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 10; padding: 10px 14px; background: var(--mustard); color: var(--ink); font: 700 15px/1 var(--font); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.skip:focus { top: 10px; }

/* ---------- top bar ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; max-width: 1120px; margin: 0 auto; padding: 14px var(--gutter); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand img { width: 28px; height: 28px; rotate: -6deg; transition: rotate .3s cubic-bezier(.3,1.5,.5,1); }
.brand:hover img { rotate: 6deg; }
.brand span { display: grid; gap: 2px; }
.brand b { font: 800 16px/1 var(--font); letter-spacing: -.03em; }
.brand small { font: 700 15px/1 var(--hand); color: var(--blue); rotate: -1.5deg; transform-origin: 0 50%; }
.top-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.top-nav a { padding: 10px 0; text-decoration: none; opacity: .72; }
.top-nav a:hover, .top-nav a[aria-current] { opacity: 1; text-decoration: underline; }
.top-nav .go { opacity: 1; padding: 9px 12px; background: var(--ink); color: var(--paper); }
.top-nav .go:hover { background: var(--blue); text-decoration: none; }

/* ---------- buttons, tags, kicker ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; background: var(--ink); color: var(--paper); font: 700 15px/1.1 var(--font); letter-spacing: -.01em; text-decoration: none; box-shadow: 3px 3px 0 var(--mustard); transition: translate .15s, box-shadow .15s; }
.btn:hover { translate: -1px -1px; box-shadow: 4px 4px 0 var(--mustard); text-decoration: none; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--ink), 3px 3px 0 var(--mustard); }
.btn.yellow { background: var(--mustard); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 3px 3px 0 var(--ink); }
.kicker { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kicker span + span::before { content: '·'; margin-right: 18px; }
.tag { display: inline-block; padding: 6px 12px; background: rgba(243,198,63,.85); font: 600 11px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; rotate: -1deg; }
.tag.sm { font-size: 10px; padding: 4px 9px; }
.hand { font: 700 22px/1.1 var(--hand); color: var(--blue); }

/* ---------- the case file ---------- */
main { display: block; padding: 0 var(--gutter); }
.paper { position: relative; max-width: 880px; margin: 8px auto 40px; padding: 28px 18px 30px 30px; background: var(--paper);
  box-shadow: 5px 5px 0 -1px #ebe8de, 5px 5px 0 0 rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.14); }
.paper::before { content: ''; position: absolute; top: 0; bottom: 0; left: 10px; width: 7px; background: linear-gradient(90deg, var(--margin) 0 1.5px, transparent 1.5px 5.5px, var(--margin) 5.5px 7px); opacity: .7; }
.file-head { display: grid; gap: 16px; padding-bottom: 28px; border-bottom: 1.5px solid var(--ink); }
.file-head .tag { justify-self: start; }
.file-head h1 { font: 800 clamp(40px, 10vw, 76px)/.95 var(--font); letter-spacing: -.045em; }
.lede { font: 500 clamp(19px, 2.6vw, 23px)/1.35 var(--font); letter-spacing: -.015em; max-width: 34ch; }
.filed { justify-self: start; order: -1; padding: 6px 12px; border: 2.5px solid #b8322a; color: #b8322a; font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; rotate: -4deg; opacity: .85; }
.soon .filed { border-color: var(--ink); color: var(--ink); background: var(--mustard); opacity: 1; }
.office-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.office-cta span { font: 700 18px/1.15 var(--hand); color: var(--blue); }
.tldr { padding: 14px 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 16px; line-height: 1.55; }
.tldr span { display: block; margin-bottom: 6px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* stamps: S blue · T coral · A green · R red, a round double-ring ink stamp pressed on at a tilt */
[data-st="S"] { --st: var(--blue); --r: -8deg; } [data-st="T"] { --st: var(--coral); --r: 6deg; } [data-st="A"] { --st: var(--green); --r: -5deg; } [data-st="R"] { --st: var(--red); --r: 9deg; }
.stamp-s, .stamp-l { flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--st); rotate: var(--r); font: 900 14px/1 var(--font); letter-spacing: -.04em; }
.stamp-s { width: 28px; height: 28px; box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 4px #fff, inset 0 0 0 5px currentColor; }
.stamp-l { position: relative; width: 56px; height: 56px; font-size: 26px; box-shadow: inset 0 0 0 2.5px currentColor, inset 0 0 0 5px var(--paper), inset 0 0 0 6.5px currentColor; }
.stamp-l::after { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: .55;
  background: radial-gradient(circle at 30% 70%, var(--paper) 0 1.2px, transparent 2px) 0 0 / 9px 11px, radial-gradient(circle at 60% 20%, var(--paper) 0 1px, transparent 1.6px) 0 0 / 13px 7px; }

.star { margin: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.star div { display: grid; gap: 6px; padding: 12px 14px; }
.star div + div { border-top: 1px solid var(--line); }
.star dt { align-self: start; display: flex; align-items: center; gap: 10px; font: 600 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.star dd { margin: 0; font-size: 15px; line-height: 1.55; }

.facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 600 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: 15px; line-height: 1.5; }
.live { display: flex; flex-wrap: wrap; gap: 10px; }
.live a { display: inline-grid; gap: 3px; padding: 9px 14px; background: var(--green); color: #fff; text-decoration: none; box-shadow: 3px 3px 0 var(--ink); min-width: 0; max-width: 100%; }
.live a b { font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.live a span { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.live a:hover { background: #33935a; }

.intro { margin: 32px 0 0; font: 500 19px/1.6 var(--font); letter-spacing: -.01em; }
.results { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.results li { display: grid; gap: 6px; padding: 18px 0; }
.results li + li { border-top: 1px solid var(--line); }
.results b { font: 800 clamp(34px, 8vw, 52px)/.95 var(--font); letter-spacing: -.045em; }
.results span { font-size: 14px; line-height: 1.45; color: var(--muted); }
.rnote { margin-top: 10px; font: 500 12px/1.5 var(--mono); color: var(--muted); }

.stage { margin-top: 56px; }
.stage.plain { margin-top: 40px; }
.stage-h { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1.5px dashed rgba(22,22,22,.35); }
.st-l { display: grid; gap: 4px; }
.st-k { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.st-w { font: 700 clamp(26px, 5vw, 32px)/1 var(--hand); letter-spacing: 0; }
.st-n { margin-left: auto; align-self: flex-start; font: 600 11px/1 var(--mono); letter-spacing: .1em; color: var(--muted); }
.stage .results { margin-top: 22px; }
.part { margin-top: 26px; }
.part h2, .part h3 { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; font: 750 clamp(21px, 3.4vw, 26px)/1.2 var(--font); letter-spacing: -.025em; }
.part h2 b, .part h3 b { flex: none; font: 600 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); translate: 0 -3px; }
.part > p { max-width: var(--read); }

.figs, .pair { display: grid; gap: 18px; margin-top: 20px; }
.fig { margin: 0; padding: 8px 8px 0; background: #fff; box-shadow: 0 0 0 1px rgba(22,22,22,.12), 4px 4px 0 rgba(22,22,22,.08); }
.fig img { width: 100%; background: #eeece5; }
.fig figcaption { padding: 10px 4px 12px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.pair .fig:first-child { rotate: -.6deg; } .pair .fig:last-child { rotate: .6deg; }
.fig.tall .window { max-height: 70vh; overflow: auto; overscroll-behavior: contain; }

.learned { margin-top: 48px; padding: 18px 18px 8px; background: rgba(243,198,63,.22); box-shadow: inset 4px 0 0 var(--mustard); }
.learned h2 { font: 700 28px/1 var(--hand); }
.learned ul { padding-left: 20px; }
.learned li { margin: 8px 0; }
.nextline { display: flex; gap: 10px; margin-top: 28px; font-weight: 600; }
.credits { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--muted); }

.file-end { display: grid; gap: 18px; margin-top: 44px; padding-top: 22px; border-top: 1.5px solid var(--ink); }
.next { display: grid; gap: 4px; text-decoration: none; }
.next span { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.next b { font: 800 26px/1.1 var(--font); letter-spacing: -.03em; }
.next:hover b { color: var(--blue); }
.file-end .links { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- footer ---------- */
.foot { display: grid; justify-items: center; gap: 14px; max-width: 880px; margin: 0 auto; padding: 34px var(--gutter) 40px; text-align: center; }
.foot-hi { font: 700 30px/1 var(--hand); color: var(--blue); }
.foot-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.foot-cta .ghost { overflow-wrap: anywhere; }
.foot-small { font-size: 13px; color: var(--muted); }
.stickers { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.stickers a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--c); color: #fbfaf6; rotate: var(--r); box-shadow: 0 0 0 3px #fbfaf6, 0 0 0 4px rgba(22,22,22,.14), 0 4px 3px -1px rgba(0,0,0,.2); transition: rotate .2s, translate .2s; }
.stickers a[data-dark] { color: var(--ink); }
.stickers a:hover { rotate: 0deg; translate: 0 -3px; }
.stickers svg { width: 21px; height: 21px; }

/* ---------- work index ---------- */
main.wide { max-width: 1120px; margin: 0 auto; }
.index-head { display: grid; gap: 14px; padding: 18px 0 8px; }
.index-head h1 { font: 800 clamp(48px, 12vw, 96px)/.9 var(--font); letter-spacing: -.05em; }
.index-head .lede { max-width: 44ch; }
.drawer { margin-top: 44px; }
.drawer h2 { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); font: 800 clamp(24px, 4vw, 32px)/1.1 var(--font); letter-spacing: -.03em; }
.d-code { display: inline-grid; place-items: center; min-width: 44px; height: 32px; padding: 0 8px; background: var(--d); color: #fff; font: 700 14px/1 var(--mono); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.18); }
/* drawer codes read as large text (19px bold), and pale drawers get ink codes, for contrast */
.d-code { font-size: 19px; }
.drawer[style*="#f3c63f"] .d-code, .drawer[style*="#3fae6a"] .d-code, .drawer[style*="#a8d8c0"] .d-code { color: var(--ink); }
.cards { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.card a { display: grid; height: 100%; background: #fff; text-decoration: none; box-shadow: 0 0 0 1px rgba(22,22,22,.14), 4px 4px 0 var(--d); transition: translate .15s, box-shadow .15s; }
.card a:hover { translate: -2px -2px; box-shadow: 0 0 0 1px rgba(22,22,22,.14), 6px 6px 0 var(--d); }
.thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eeece5; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.thumb.blank { display: grid; place-items: center; background: var(--d); color: #fff; font: 700 32px/1 var(--hand); text-align: center; padding: 16px; }
.card-body { display: grid; align-content: start; gap: 8px; padding: 14px 16px 16px; }
.card-body .tag { justify-self: start; }
.card-t { font: 800 22px/1.1 var(--font); letter-spacing: -.03em; }
.card-k { font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card-b { font-size: 15px; line-height: 1.5; }
.card-c { font-size: 13px; line-height: 1.45; color: var(--muted); }
.card-s { justify-self: start; padding: 5px 10px 6px; background: #f6d65a; font: 700 18px/1 var(--hand); rotate: -1.5deg; box-shadow: 0 5px 8px -6px rgba(0,0,0,.4); }
.card-go { font: 700 13px/1 var(--mono); letter-spacing: .04em; color: var(--blue); }
.card.soon .card-go { color: var(--muted); }

/* ---------- quick (the 60-second version) ---------- */
.quick { display: grid; gap: 36px; max-width: 1180px; margin: 0 auto; padding-bottom: 40px; }
.q-me { display: grid; gap: 16px; align-content: start; }
.q-id { display: flex; align-items: center; gap: 18px; }
.q-photo { flex: none; width: 104px; margin: 0; padding: 6px 6px 18px; background: #fff; rotate: -3deg; box-shadow: 0 10px 16px -10px rgba(0,0,0,.45), 0 0 0 1px rgba(22,22,22,.08); position: relative; }
.q-photo::before { content: ''; position: absolute; left: 50%; top: -9px; width: 54px; height: 18px; translate: -50% 0; rotate: 4deg; background: rgba(157,176,238,.85); }
.q-photo img { aspect-ratio: 1; object-fit: cover; }
.q-me h1 { font: 800 clamp(34px, 9vw, 56px)/.95 var(--font); letter-spacing: -.045em; }
.q-aka { margin-top: 6px; font: 700 21px/1.1 var(--hand); color: var(--blue); }
.q-aka b { color: var(--ink); }
.q-role { display: inline-block; margin-top: 8px; padding: 5px 10px; background: var(--ink); color: var(--paper); font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.q-sum { font: 500 18px/1.55 var(--font); letter-spacing: -.01em; max-width: 46ch; }
.q-facts { display: grid; margin: 0; border-top: 1px solid var(--line); }
.q-facts div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.q-facts dt { font: 600 11px/1.7 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.q-facts dd { margin: 0; font-size: 15px; line-height: 1.5; }
.q-facts dd span { color: var(--muted); }
.q-jobs { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.q-jobs li { font-size: 14px; line-height: 1.4; }
.q-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.q-mail a { font: 600 15px/1.3 var(--mono); overflow-wrap: anywhere; }
.q-top h2 { display: grid; gap: 4px; font: 800 clamp(26px, 4vw, 34px)/1 var(--font); letter-spacing: -.035em; }
.q-cards { display: grid; gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: q; }
.q-card a { position: relative; display: grid; gap: 8px; padding: 14px 16px 14px 52px; background: #fff; text-decoration: none; box-shadow: 0 0 0 1px rgba(22,22,22,.14), 4px 4px 0 var(--qc, var(--mustard)); transition: translate .15s, box-shadow .15s; }
.q-card:nth-child(2) a { --qc: var(--blue); } .q-card:nth-child(3) a { --qc: var(--green); }
.q-card a::before { counter-increment: q; content: counter(q); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--qc, var(--mustard)); box-shadow: inset 0 0 0 2px currentColor; font: 900 14px/1 var(--font); rotate: -6deg; }
.q-card:first-child a::before { color: #b8901a; }
.q-card a:hover { translate: -2px -2px; box-shadow: 0 0 0 1px rgba(22,22,22,.14), 6px 6px 0 var(--qc, var(--mustard)); }
.q-card .tag { justify-self: start; }
.q-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 800 22px/1.1 var(--font); letter-spacing: -.03em; }
.q-t i { font: 600 11px/1.3 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.q-c { font-size: 13px; line-height: 1.4; color: var(--muted); }
.q-b { font-size: 15px; line-height: 1.45; }
.q-r { display: grid; gap: 6px; }
.q-r span { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.q-r b { flex: none; min-width: 64px; font: 800 20px/1 var(--font); letter-spacing: -.03em; color: var(--ink); }
.q-more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font: 700 14px/1.3 var(--mono); }

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .paper { padding: 44px 44px 40px 52px; }
  .paper::before { left: 22px; }
  .file-head { grid-template-columns: minmax(0, 1fr) auto; }
  .file-head > * { grid-column: 1 / -1; }
  .file-head .filed { grid-column: 2; grid-row: 1; order: 0; align-self: start; rotate: -9deg; font-size: 14px; }
  .file-head .kicker { grid-column: 1; grid-row: 1; }
  .star div { grid-template-columns: 128px minmax(0, 1fr); gap: 14px; }
  .facts { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .results { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .results li { padding: 20px 18px 20px 0; }
  .results li + li { border-top: 0; border-left: 1px solid var(--line); padding-left: 18px; }
  .figs.n2, .pair { grid-template-columns: 1fr 1fr; align-items: start; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file-end { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
@media (min-width: 960px) {
  .paper { padding: 64px 72px 52px 84px; }
  .paper::before { left: 40px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the 60-second version: one screen */
  .page-quick .top { max-width: 1180px; }
  .quick { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; padding-top: 6px; }
  .q-id { gap: 22px; }
  .q-photo { width: 120px; }
  .q-me { gap: 14px; }
}
@media (min-width: 960px) and (max-height: 820px) {
  .q-sum { font-size: 16.5px; }
  .q-cards { gap: 12px; }
  .q-card a { padding-block: 11px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .top, .foot, .office-cta, .file-end .links { display: none; } body { background: #fff; } .paper { box-shadow: none; } }