/* Field Notebook: a data scientist's working notebook, on a lab bench.
   One stylesheet for every page the build generates. The lab-bench surround,
   the paper sheet with its margin rule and punched holes, index tabs, sticky
   notes, taped prints, and the hand-drawn ink that js/notebook.js draws. */

:root {
  --bench: #22302b;
  --bench-2: #2b3b35;
  --bench-ink: #efe8d6;
  --paper: #fbf8f1;
  --card: #fffefa;
  --legal: #fff2ad;
  --ink: #1d2633;
  --ink-2: #4a5463;
  --pen: #2447a6;          /* blue ballpoint: margin notes */
  --red: #b8352a;          /* red pen: stamps, marks */
  --margin: #e7a2a0;       /* notebook margin rule */
  --grid: rgba(64, 120, 168, .12);
  --grid-major: rgba(64, 120, 168, .2);
  --rule: rgba(64, 120, 168, .28);
  --hl-yellow: #ffe56b;
  --hl-green: #b9f0a0;
  --hl-pink: #ffc0d2;
  --hl-blue: #bfe3ff;
  --sticky: #ffe17a;
  --sticky-pink: #ffbdcc;
  --tape: rgba(232, 220, 186, .82);
  --tab-1: #f6c453; --tab-2: #9ccbea; --tab-3: #a9d8a1; --tab-4: #f3a391;
  --tab-5: #cdb8e8; --tab-6: #8ed3c7; --tab-7: #f5b5c8; --tab-8: #e9dfc4;
  /* Names the travel map, campus map, and CV timeline read through. */
  --white: var(--card);
  --paper-2: #ece5d3;
  --line: #d9cfba;
  --accent: var(--red);
  --accent-ink: #9c2b21;
  --ink-soft: var(--ink-2);
  --gutter: 168px;
  --pad-r: 64px;
  --serif-d: "Young Serif", Georgia, serif;
  --serif: "Literata", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hand: "Kalam", "Comic Sans MS", cursive;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
  margin: 0;
  background-color: var(--bench);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.06), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-color: var(--pen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--pen); }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 4px; border-radius: 3px; }
.sr-only { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--sticky); padding: 10px 14px; font-family: var(--mono); font-size: 14px; }
.skip:focus { top: 12px; }

/* ---------- Header: a sticky strip of bench with index tabs ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background-color: var(--bench);
  background-image: var(--noise);
}
.topbar-in {
  position: relative;
  max-width: 1280px; margin: 0 auto;
  padding: 18px 196px 0 28px;
  display: flex; align-items: flex-end; gap: 22px;
  min-height: 78px;
}
.brand {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding-bottom: 12px;
  color: var(--bench-ink); text-decoration: none;
  font-family: var(--hand); font-weight: 700; font-size: 25px; line-height: 1;
}
.brand:hover { color: #fff; }
.badge { position: relative; width: 46px; height: 46px; flex: none; transition: opacity .25s ease, transform .3s cubic-bezier(.3,1.6,.5,1); }
.badge img { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 3px solid #fff; object-fit: cover; }
.badge svg { position: absolute; inset: -7px; width: 60px; height: 60px; overflow: visible; color: var(--sticky); }
.home .badge { opacity: 0; transform: scale(.6); }
.home .topbar.docked .badge { opacity: 1; transform: none; }
.topbar-in > nav { flex: 1 1 auto; min-width: 0; }
.tabs {
  display: flex; gap: 5px;
  margin: 0; padding: 10px 0 0;
  list-style: none;
  flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs li { flex: none; }
.tabs a {
  display: block; position: relative;
  padding: 9px 14px 13px;
  border-radius: 9px 9px 0 0;
  font-family: var(--mono); font-size: 13.5px; font-weight: 500; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
  background: var(--c, var(--tab-8));
  box-shadow: inset 0 -8px 10px -8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transform: translateY(4px);
  transition: transform .18s ease;
}
.tabs a:hover, .tabs a:focus-visible { transform: translateY(0); color: var(--ink); }
.tabs a:focus-visible { outline-offset: -4px; }
.tabs a[aria-current="page"] { transform: translateY(0); font-weight: 600; background: var(--paper); }
.tabs a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; background: var(--c); border-radius: 2px;
}

.sticky-cta {
  position: absolute; right: 28px; top: 16px;
  display: block; width: 166px;
  padding: 16px 16px 13px;
  background: var(--sticky); color: var(--ink);
  font-family: var(--hand); font-weight: 700; font-size: 23px; line-height: 1.05;
  text-decoration: none;
  transform: rotate(4deg);
  box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 12px 18px -8px rgba(0,0,0,.45);
  transition: transform .25s ease;
  z-index: 4;
}
.sticky-cta::before { /* tape */
  content: ""; position: absolute; top: -11px; left: 50%; width: 64px; height: 22px; margin-left: -32px;
  background: var(--tape); transform: rotate(-5deg); box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.sticky-cta small { display: block; font-family: var(--mono); font-weight: 400; font-size: 11.5px; margin-top: 6px; letter-spacing: .02em; }
.sticky-cta:hover, .sticky-cta:focus-visible { transform: rotate(0deg) scale(1.04); color: var(--ink); }
.topbar.docked .sticky-cta { transform: translateY(-6px) rotate(2deg) scale(.92); }
.topbar.docked .sticky-cta:hover { transform: rotate(0) scale(.98); }

/* ---------- The notebook sheet ---------- */
.sheet {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  border-radius: 3px 3px 6px 6px;
  box-shadow:
    0 2px 0 #e8e0cc, 0 4px 0 #f6f2e7, 0 6px 0 #e3dac4, 0 8px 0 #f3eee1,
    0 40px 70px -20px rgba(0,0,0,.6);
  padding: 0 var(--pad-r) 40px var(--gutter);
}
.sheet::before { /* margin rule */
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) - 32px); width: 2px;
  background: var(--margin); box-shadow: 5px 0 0 -0px rgba(231,162,160,.45);
}
.sheet::after { /* punched holes showing the bench */
  content: ""; position: absolute; top: 40px; bottom: 40px; left: 34px; width: 26px;
  background: radial-gradient(circle at 13px 13px, var(--bench) 0 10px, rgba(0,0,0,.18) 11px, transparent 12px) 0 0 / 26px 120px repeat-y;
}

/* notebook header fields */
.sheet-head {
  display: flex; flex-wrap: wrap; gap: 10px 36px; align-items: baseline;
  padding: 34px 0 0;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.sheet-head .field { display: flex; align-items: baseline; gap: 10px; }
.sheet-head .val {
  font-family: var(--hand); font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--pen);
  border-bottom: 1.5px solid var(--rule); padding: 0 10px 0 6px; line-height: 1.2; text-decoration: none;
}
.sheet-head a.val:hover { color: var(--red); }
.sheet-head .pageno { margin-left: auto; }

/* ---------- Generic section scaffolding ---------- */
.sec { position: relative; padding: 50px 0 20px; }
.sec.headless { padding-top: 18px; }   /* a section with no heading of its own, right under the page head */
.sec-no {
  position: absolute; left: calc(-1 * var(--gutter) + 72px); top: 80px;
  font-family: var(--mono); font-size: 13px; color: var(--red); letter-spacing: .08em;
}
.kicker { font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
h1, h2, h3 { font-family: var(--serif-d); font-weight: 400; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(32px, 3.7vw, 50px); margin-bottom: 26px; max-width: 22em; }
h2 .u, h1 .u { white-space: nowrap; }
h3 { font-size: 24px; line-height: 1.15; }
p { margin: 0 0 1em; }
.lede { font-size: 22px; line-height: 1.5; max-width: 34em; }
.muted { color: var(--ink-2); }
.prose { max-width: 40em; }

/* hand-written margin notes */
.note {
  font-family: var(--hand); font-weight: 400; color: var(--pen); font-size: 21px; line-height: 1.1;
  margin: 0; transform: rotate(-4deg); display: inline-block;
}
.note.red { color: var(--red); }
.mnote { position: absolute; z-index: 2; }
.mnote .note { width: 100%; }
.arrow { position: absolute; overflow: visible; pointer-events: none; }

/* ---------- Doodle ink (generated SVG strokes) ----------
   Everything is visible by default. Only when JS has armed the page (html.js-anim)
   does a .reveal block wait in its "before" state until it scrolls into view. */
.ink { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000); stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur, .8s) cubic-bezier(.55,.1,.35,1) var(--d, 0s); }
.js-anim .reveal:not(.drawn) .ink { stroke-dashoffset: var(--len, 1000); }
.dot { transform-box: fill-box; transform-origin: center; transition: opacity .3s ease var(--d, 0s), transform .45s cubic-bezier(.3,1.7,.5,1) var(--d, 0s); }
.js-anim .reveal:not(.drawn) .dot { opacity: 0; transform: scale(.1); }
.fade { transition: opacity .5s ease var(--d, 0s), transform .5s ease var(--d, 0s); }
.js-anim .reveal:not(.drawn) .fade { opacity: 0; transform: translateY(6px); }

/* sticky notes land with a little bounce */
.js-anim .reveal:not(.drawn) .land { opacity: 0; transform: translateY(-26px) rotate(calc(var(--rot, -2deg) * 3)) scale(1.08); }
.js-anim .reveal.drawn .land { animation: land .7s cubic-bezier(.3,1.5,.5,1) var(--d, .3s) backwards; }
@keyframes land {
  0% { opacity: 0; transform: translateY(-26px) rotate(calc(var(--rot, -2deg) * 3)) scale(1.08); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--rot, -2deg)); }
}
/* index cards are dealt onto the page */
.js-anim .reveal:not(.drawn) .deal { opacity: 0; transform: translate(-30px, 40px) rotate(-8deg); }
.deal { transition: opacity .5s ease var(--d, 0s), transform .7s cubic-bezier(.25,1.3,.5,1) var(--d, 0s); }
/* rubber stamps thunk down */
.js-anim .reveal:not(.drawn) .thunk { opacity: 0; transform: scale(1.8) rotate(-12deg); }
.thunk { transition: opacity .15s ease var(--d, 0s), transform .35s cubic-bezier(.5,1.8,.6,1) var(--d, 0s); }
/* photos drop in under their tape */
.js-anim .reveal:not(.drawn) .drop { opacity: 0; transform: translateY(-18px) rotate(calc(var(--rot, 2deg) - 6deg)); }
.drop { transition: opacity .5s ease var(--d, 0s), transform .8s cubic-bezier(.25,1.4,.5,1) var(--d, 0s); }

/* underline / circle overlays on text */
.u, .circ { position: relative; white-space: nowrap; }
.u > svg.ov, .circ > svg.ov { position: absolute; overflow: visible; pointer-events: none; color: var(--red); }
.circ > svg.ov { color: var(--pen); }

/* highlighter */
mark, .hl {
  color: inherit;
  background-image: linear-gradient(100deg, transparent .15em, var(--hlc, var(--hl-yellow)) .3em, var(--hlc, var(--hl-yellow)) calc(100% - .3em), transparent calc(100% - .1em));
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 72%;
  background-position: 0 70%;
  padding: 0 .12em; margin: 0 -.12em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size 1.1s cubic-bezier(.6,.1,.3,1) var(--d, .35s);
}
.js-anim .reveal:not(.drawn) mark, .js-anim .reveal:not(.drawn) .hl { background-size: 0% 72%; }
mark.g { --hlc: var(--hl-green); }
mark.p { --hlc: var(--hl-pink); }
mark.b { --hlc: var(--hl-blue); }

/* ---------- Taped photos ---------- */
.polaroid {
  position: relative; margin: 0; background: #fff; padding: 12px 12px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 18px 30px -14px rgba(0,0,0,.45);
  transform: rotate(var(--rot, 2deg));
}
.polaroid img { width: 100%; height: auto; background: #ddd; }
.polaroid figcaption { font-family: var(--hand); font-size: 22px; color: var(--ink); padding: 8px 4px 12px; text-align: center; line-height: 1.15; }
.tape {
  position: absolute; width: 96px; height: 28px; background: var(--tape);
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  background-image: linear-gradient(90deg, rgba(255,255,255,.25), transparent 30%, rgba(255,255,255,.2) 70%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0),
                repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px);
  -webkit-mask-composite: source-over;
  z-index: 3;
}
.tape.tl { top: -12px; left: -22px; transform: rotate(-35deg); }
.tape.tr { top: -10px; right: -24px; transform: rotate(38deg); }
.tape.tc { top: -15px; left: 50%; margin-left: -48px; transform: rotate(-3deg); }
.tape.br { bottom: -10px; right: -22px; transform: rotate(-32deg); }

/* sticky note */
.sticky {
  position: relative; background: var(--sticky); padding: 22px 22px 20px; color: var(--ink);
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 16px 22px -12px rgba(0,0,0,.4);
  transform: rotate(var(--rot, -2deg));
}
.sticky.pink { background: var(--sticky-pink); }
.sticky .big { font-family: var(--hand); font-weight: 700; font-size: 30px; line-height: 1.05; display: block; }
a.sticky { display: block; text-decoration: none; transition: transform .2s ease; }
a.sticky:hover, a.sticky:focus-visible { transform: rotate(0) scale(1.03); color: var(--ink); }

/* links with a pencil arrow */
.go { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.go::after { content: " \2192"; }

/* rubber stamp */
.stamp {
  display: inline-block; font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); border: 2px solid currentColor; border-radius: 4px; padding: 5px 10px 4px;
  transform: rotate(var(--rot, -2deg));
  box-shadow: inset 0 0 0 1.5px rgba(184,53,42,.0);
  background: rgba(255,255,255,.35);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Footer ---------- */
.foot {
  max-width: 1280px; margin: 0 auto; padding: 56px 24px 48px calc(var(--gutter));
  color: var(--bench-ink); font-size: 15.5px;
  display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: baseline; justify-content: space-between;
}
.foot a { color: var(--bench-ink); text-decoration-color: rgba(239,232,214,.5); }
.foot a:hover { color: #fff; }
.foot .sign { font-family: var(--hand); font-size: 26px; color: var(--sticky); transform: rotate(-3deg); display: inline-block; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--mono); font-size: 13.5px; }
.foot p { margin: 0; }
.foot .foot-note { flex-basis: 100%; order: 3; font-size: 13px; opacity: .72; max-width: 60em; }

/* ---------- Portrait that docks into the header ---------- */
.portrait-morph { position: relative; z-index: 45; will-change: transform; transform-origin: 0 0; }
.portrait-morph .ph { position: relative; }
.portrait-morph .hedcut { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; background: #fff; }

/* ---------- Robot that pops in to say hi ---------- */
.bot {
  position: fixed; right: 26px; bottom: 0; z-index: 60;
  width: 132px; height: 150px;
  transform: translateY(110%);
  transition: transform .7s cubic-bezier(.3,1.4,.5,1);
  cursor: pointer;
}
.bot[hidden] { display: none; }
.bot.out { transform: translateY(18%); animation: bot-bounce .9s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes bot-bounce { 0% { transform: translateY(110%); } 55% { transform: translateY(8%) scaleY(1.04); } 72% { transform: translateY(22%) scaleY(.96); } 86% { transform: translateY(15%); } 100% { transform: translateY(18%); } }
.bot.hop svg { animation: bot-hop .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes bot-hop { 0% { transform: none; } 40% { transform: translateY(-22px) rotate(-4deg); } 70% { transform: translateY(2px) scaleY(.95); } 100% { transform: none; } }
.bot.rewave .arm { animation: wave .45s ease-in-out 0s 4 alternate; }
.bot.tuck { transform: translateY(110%); animation: bot-tuck .5s cubic-bezier(.6,0,.8,.3) both; }
@keyframes bot-tuck { from { transform: translateY(18%); } to { transform: translateY(110%); } }
.bot svg { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 0 1.2px #fbf8f1) drop-shadow(0 0 1.2px #fbf8f1) drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.bot .arm { transform-box: view-box; transform-origin: 94px 94px; }
.bot.out .arm { animation: wave .55s ease-in-out .7s 4 alternate; }
@keyframes wave { from { transform: rotate(8deg); } to { transform: rotate(-38deg); } }
.bot .eye { transform-box: fill-box; transform-origin: center; animation: blink 3.2s infinite 1.4s; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.bot-hit { position: absolute; inset: 0; cursor: pointer; border-radius: 30px; }
.bubble {
  position: absolute; right: 104px; bottom: 112px; width: max-content; max-width: 210px;
  background: var(--card); color: var(--ink);
  font-family: var(--hand); font-weight: 700; font-size: 21px; line-height: 1.1;
  padding: 12px 16px; border: 2.5px solid var(--ink); border-radius: 18px 18px 4px 18px;
  box-shadow: 3px 4px 0 rgba(0,0,0,.25);
  opacity: 0; transform: scale(.5) rotate(-6deg); transform-origin: 100% 100%;
  transition: opacity .25s ease, transform .4s cubic-bezier(.3,1.7,.5,1);
  pointer-events: none;
}
.bot.out .bubble { opacity: 1; transform: rotate(-3deg); transition-delay: .55s; }
.bubble { font-size: 26px; padding: 10px 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 120px; --pad-r: 40px; }
  .mnote.hide-md { display: none; }
}
@media (max-width: 760px) {
  :root { --gutter: 46px; --pad-r: 18px; }
  body { font-size: 17px; }
  .topbar-in { flex-wrap: wrap; padding: 12px 0 0 14px; gap: 6px; min-height: 0; }
  .brand { width: 100%; padding: 0 120px 2px 0; font-size: 22px; gap: 10px; }
  .badge, .badge img { width: 38px; height: 38px; }
  .badge svg { inset: -6px; width: 50px; height: 50px; }
  .tabs {
    padding: 4px 40px 0 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent);
  }
  .tabs a { font-size: 12.5px; padding: 8px 11px 11px; }
  .sticky-cta { right: 12px; top: 12px; width: auto; padding: 8px 12px 6px; font-size: 18px; white-space: nowrap; }
  .sticky-cta::before { width: 44px; margin-left: -22px; top: -8px; height: 16px; }
  .sticky-cta small { display: none; }
  .sheet { margin: 0 8px; }
  .sheet::after { left: 9px; width: 18px; background: radial-gradient(circle at 9px 9px, var(--bench) 0 6px, rgba(0,0,0,.18) 7px, transparent 8px) 0 0 / 18px 96px repeat-y; }
  .sheet::before { left: calc(var(--gutter) - 12px); }
  .sheet-head { gap: 6px 18px; padding-top: 24px; }
  .sheet-head .val { font-size: 19px; }
  .sheet-head .pageno { display: none; }
  .sec { padding-top: 52px; }
  .sec-no { position: static; display: block; margin-bottom: 6px; }
  .lede { font-size: 19px; }
  h2 { margin-bottom: 20px; }
  .mnote.hide-sm { display: none; }
  .foot { padding: 44px 20px 40px 24px; flex-direction: column; }
}

.bot.pos-bl { right: auto; left: 26px; }
.bot.pos-bl .bubble { right: auto; left: 104px; border-radius: 18px 18px 18px 4px; transform-origin: 0 100%; }
@media (max-width: 760px) {
  .bot { right: 6px; width: 92px; height: 104px; }
  .bot.pos-bl { left: 6px; }
  .bubble { right: 76px; bottom: 80px; font-size: 17px; max-width: 170px; }
  .bot.pos-bl .bubble { left: 76px; }
}
/* Visit 3: the robot walks along the bottom of the window carrying the
   "Book a call" note it lifted out of the header. */
.bot.walker { left: 0; right: auto; transform: translateX(var(--x, -200px)) translateY(18%); transition: transform var(--walk, 2.6s) linear; animation: none; }
.bot.walker .bubble { right: auto; left: 168px; bottom: 96px; border-radius: 18px 18px 18px 4px; transform-origin: 0 100%; max-width: 250px; pointer-events: none; }
.bot.walker.out-say .bubble { opacity: 1; transform: rotate(-3deg); transition-delay: .35s; }
.bot.walking svg { animation: bot-step .42s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes bot-step { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-7px) rotate(3deg); } }
.bot.holding .arm { transform: rotate(-58deg); transition: transform .3s ease; }
.bot-sign { position: absolute; left: 50%; bottom: calc(100% - 4px); width: 166px; margin-left: -60px;
  padding: 14px 14px 11px; background: var(--sticky); color: var(--ink); text-decoration: none;
  font-family: var(--hand); font-weight: 700; font-size: 21px; line-height: 1.05; transform: rotate(-6deg) scale(.8); transform-origin: 50% 100%;
  box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 12px 18px -8px rgba(0,0,0,.45); pointer-events: auto; cursor: pointer; }
.bot-sign small { display: block; font-family: var(--mono); font-weight: 400; font-size: 11.5px; margin-top: 6px; }
.bot-sign:hover, .bot-sign:focus-visible { color: var(--ink); transform: rotate(-2deg) scale(.86); }
.bot.walking .bot-sign { animation: sign-sway .42s ease-in-out infinite alternate; }
@keyframes sign-sway { from { transform: rotate(-9deg) scale(.8); } to { transform: rotate(-3deg) scale(.8); } }
.sign-fly { position: fixed; z-index: 61; margin: 0; right: auto; transition: transform .9s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.sticky-cta.lifted { opacity: 0; transition: opacity .2s ease; }
@media (max-width: 760px) {
  .bot.walker .bubble { left: 98px; bottom: 70px; max-width: 170px; }
  .bot-sign { width: 130px; font-size: 17px; margin-left: -46px; padding: 10px 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .bot { display: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===================== Home ===================== */
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 48px; padding: 40px 0 30px; align-items: start; }
.hero-text { padding-top: 34px; }
.hero h1 { font-size: clamp(64px, 8.4vw, 128px); line-height: .9; margin: 26px 0 26px -4px; letter-spacing: -.025em; }
.hero .lede { font-size: clamp(22px, 2.1vw, 29px); line-height: 1.38; max-width: 21em; margin-bottom: 22px; }
.hero-more { max-width: 31em; color: var(--ink-2); font-size: 18px; }
.cta-row { display: flex; align-items: center; gap: 30px 36px; margin-top: 40px; flex-wrap: wrap; }
.cta-row .sticky { width: 232px; padding: 22px 20px 20px; }
.cta-row .sticky .big { font-size: 27px; }
.hero-art { position: relative; padding-top: 8px; }
.hero-art .polaroid { width: min(300px, 76%); margin: 0 26px 0 auto; }
/* a clear gap under the portrait: two white cards overlapping read as one smudged card */
.figcard { position: relative; background: var(--card); padding: 18px 18px 10px; margin: 22px 0 0 -10px; width: min(360px, 88%);
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 16px 26px -16px rgba(0,0,0,.4); transform: rotate(var(--rot, -3deg)); }
.figcard svg { width: 100%; height: auto; color: var(--ink); display: block; }
.figcap { font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin: 6px 0 0; line-height: 1.4; }
.hero-note { position: absolute; right: -8px; bottom: -58px; width: 190px; transform: rotate(-3deg); }

/* Course-assistant launcher: a torn-off legal-pad note for my students.
   js/course-assistant.js opens it into the full pad (css/handoff.css). */
.ca-note { width: 216px; padding: 22px 16px 16px 34px; background-color: var(--legal);
  background-image: linear-gradient(90deg, transparent 22px, var(--margin) 22px 24px, transparent 24px),
    repeating-linear-gradient(180deg, transparent 0 25px, var(--rule) 25px 26px);
  background-position: 0 0, 0 8px; }
.ca-note .big { font-size: 25px; }
/* The header's small launcher, left of "Book a call" (home and /courses/ only). Phones keep the note in the page. */
.ca-cta { position: absolute; top: 14px; right: 212px; z-index: 4; display: block; white-space: nowrap;
  padding: 8px 14px 6px 26px; color: var(--ink); text-decoration: none;
  font-family: var(--hand); font-weight: 700; font-size: 19px; line-height: 1.05;
  background-color: var(--legal);
  background-image: linear-gradient(90deg, transparent 14px, var(--margin) 14px 16px, transparent 16px);
  transform: rotate(-3deg); transition: transform .25s ease;
  box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 12px 18px -8px rgba(0,0,0,.45); }
.ca-cta small { display: block; font-family: var(--mono); font-weight: 400; font-size: 11px; margin-top: 4px; color: var(--ink-2); letter-spacing: .02em; }
.ca-cta:hover, .ca-cta:focus-visible { transform: rotate(0deg) scale(1.04); color: var(--ink); }
a.ca-cta:focus-visible { outline: 3px solid var(--pen); outline-offset: 4px; }
.ca-cta.ca-lifted { visibility: hidden; }
.topbar.docked .ca-cta { transform: translateY(-6px) rotate(-2deg) scale(.92); }
@media (max-width: 760px) { .ca-cta { display: none; } }
.ca-note .sub { display: block; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; margin-top: 10px; color: var(--ink-2); letter-spacing: .01em; }
.ca-note .tape.tc { width: 70px; margin-left: -35px; top: -13px; height: 24px; }
a.ca-note:focus-visible { outline: 3px solid var(--pen); outline-offset: 6px; }
.ca-note.ca-lifted { visibility: hidden; }
.ca-note.ca-lifted .tape { visibility: visible; }
.ca-face { position: absolute; left: 0; top: 0; margin: 0; transform: none; box-shadow: none; }
.hero > .ca-note { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; margin: -10px 0 0 -14px; }
@media (min-width: 961px) and (max-width: 1240px) { .hero > .ca-note { margin-top: 36px; } }
.hero.has-ca { grid-template-rows: auto 1fr; }
.ca-head { margin: 30px 0 4px 2px; }
.hero.has-ca > .hero-text { grid-row: 1 / span 2; }

.bio-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.bio .prose { font-size: 18px; }
.tl-fig { margin: 6px 0 0; padding: 16px 0 0; }
.tl-fig svg { display: block; width: 100%; color: var(--ink); overflow: visible; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 12px; }
.stat {
  display: flex; flex-direction: column; position: relative; padding: 22px 22px 18px; text-decoration: none; color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px;
  background: rgba(255,254,250,.75);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.stat:nth-child(2n) { border-radius: 14px 225px 14px 255px / 255px 14px 225px 14px; }
.stat:hover, .stat:focus-visible { transform: translateY(-5px) rotate(-.8deg); background: #fff; color: var(--ink); box-shadow: 6px 8px 0 rgba(29,38,51,.12); }
.stat .n { font-family: var(--serif-d); font-size: 76px; line-height: 1; display: block; }
.stat .yr { display: inline-block; color: var(--red); }
.stat svg { display: block; height: auto; margin: 10px 0 14px; color: var(--ink); overflow: visible; }
.stat .l { font-size: 16.5px; line-height: 1.4; display: block; flex: 1; }
.stat .more { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--pen); margin-top: 14px; display: block; }
.stat .more::after { content: " \2192"; }
.stat-note { right: 150px; top: 92px; width: 230px; }

.courses-note { left: 470px; top: 96px; width: 300px; display: flex; gap: 4px; align-items: flex-start; }
.courses-note .arrow { position: relative; flex: none; margin-top: 18px; }
.courses-note .note { width: auto; transform: rotate(-3deg); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 50px; }
.icard {
  position: relative; display: flex; flex-direction: column; min-height: 400px;
  padding: 14px 20px 18px; text-decoration: none; color: var(--ink);
  background-color: var(--card);
  /* blue ruled lines below the header; the red header rule is .ic-top's border, so it moves down when the header wraps */
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(64,120,168,.2) 27px 28px);
  background-position: 0 82px;
  background-repeat: repeat;
  background-size: 100% calc(100% - 82px);
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 16px 26px -16px rgba(0,0,0,.45);
  transform: rotate(var(--rot, 0deg));
}
.icard:hover, .icard:focus-visible { transform: rotate(0deg) translateY(-6px); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 26px 34px -18px rgba(0,0,0,.5); }
.icard .tape.tc { width: 70px; margin-left: -35px; top: -12px; }
.ic-top { display: flex; flex-direction: column; gap: 2px; height: 52px; margin-bottom: 16px; }
.icard .code { font-family: var(--mono); font-weight: 600; font-size: 17px; color: var(--red); letter-spacing: .02em; line-height: 1.2; }
.icard .lvl { font-family: var(--mono); font-size: 11px; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; }
.icard h3 { font-size: 22px; line-height: 28px; margin: 0 0 14px; }
.icard p { font-size: 15.5px; line-height: 28px; margin: 0; color: var(--ink-2); flex: 1; }
.icard .ic-doodle { width: 112px; height: auto; color: var(--ink); margin: 12px 0 6px; overflow: visible; }
.icard .go { color: var(--pen); }
.after { margin-top: 30px; }

.pad {
  position: relative; margin: 8px -10px 0 -28px; padding: 54px 48px 48px 112px;
  background-color: var(--legal);
  background-image:
    linear-gradient(90deg, transparent 76px, rgba(184,53,42,.5) 76px 78px, transparent 78px 82px, rgba(184,53,42,.5) 82px 84px, transparent 84px),
    repeating-linear-gradient(transparent 0 31px, rgba(64,120,168,.3) 31px 32px);
  background-position: 0 0, 0 22px;
  box-shadow: 0 2px 0 #efe19a, 0 4px 0 #fff7c9, 0 6px 0 #ecdc8f, 0 26px 40px -22px rgba(0,0,0,.5);
  transform: rotate(-.5deg);
}
.pad::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 22px; background: #7b2f25; border-radius: 4px 4px 0 0;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.pad p, .pad li { line-height: 32px; }
.pad-intro { font-size: 21px; max-width: 36em; margin-bottom: 32px; }
.pad-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 250px; gap: 44px; align-items: start; }
.pad h3 { font-size: 25px; line-height: 32px; margin: 0 0 16px; }
.checks, .dashes { list-style: none; margin: 0 0 18px; padding: 0; }
.checks li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; margin-bottom: 16px; font-size: 16.5px; }
.checks svg { width: 34px; height: 34px; overflow: visible; color: var(--ink); margin-top: -1px; }
.dashes li { position: relative; padding-left: 26px; font-size: 16.5px; }
.dashes li::before { content: "~"; position: absolute; left: 4px; top: -2px; font-family: var(--hand); font-weight: 700; font-size: 22px; color: var(--red); }
.pad p { font-size: 16.5px; }
.pad .small { font-size: 15px; color: var(--ink-2); }
.pad-cta { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; padding-top: 10px; }
.pad-cta .sticky { width: 240px; padding: 30px 22px 24px; }
.pad-cta .sub { display: block; font-size: 15.5px; line-height: 1.4; margin-top: 10px; }
.pad-cta .go { margin-left: 8px; }

.news-note { position: absolute; left: 420px; top: 128px; transform: rotate(-5deg); }
.log { list-style: none; margin: 0; padding: 0; max-width: 1000px; }
.log li { display: grid; grid-template-columns: 140px minmax(0, 1fr) 190px; gap: 30px; padding: 26px 0; border-top: 2px dashed rgba(29,38,51,.16); align-items: start; }
.log li:last-child { border-bottom: 2px dashed rgba(29,38,51,.16); }
.log time { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--red); padding-top: 4px; letter-spacing: .03em; }
.log p { margin: 0; font-size: 17px; }
.thumb { position: relative; display: block; background: #fff; padding: 7px 7px 18px; transform: rotate(var(--rot, 2deg)); box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 10px 18px -10px rgba(0,0,0,.45); transition: transform .2s ease; }
.thumb:hover { transform: rotate(0) scale(1.04); }
.thumb::before { content: ""; position: absolute; top: 2px; right: -14px; width: 58px; height: 20px; background: var(--tape); transform: rotate(40deg); z-index: 1; box-shadow: 0 1px 2px rgba(0,0,0,.1); }

.talks-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.video { display: block; text-decoration: none; padding-bottom: 0; }
.video .ph { position: relative; display: block; }
.video .play { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; overflow: visible; transition: transform .25s cubic-bezier(.3,1.6,.5,1); filter: drop-shadow(0 2px 6px rgba(255,255,255,.7)); }
.video .play::before { content: ""; }
.video:hover .play, .video:focus-visible .play { transform: scale(1.12) rotate(-4deg); }
.video .cap { display: block; font-family: var(--hand); font-size: 22px; color: var(--ink); padding: 10px 6px 14px; text-align: center; }
.talks-text h2 { margin-bottom: 20px; }
.also { margin-top: 30px; padding-top: 16px; border-top: 2px dashed rgba(29,38,51,.16); }
.also .note { font-size: 20px; margin-bottom: 8px; }
.also ul { list-style: none; margin: 0 0 12px; padding: 0; }
.also li { font-size: 16px; line-height: 1.4; margin-bottom: 12px; }
.also .when { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: .03em; }

@media (max-width: 1240px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-note { display: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pad-grid { grid-template-columns: 1fr 1fr; }
  .pad-cta { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 20px; }
  .hero-art { max-width: 520px; }
  .hero.has-ca { grid-template-rows: none; }
  .hero.has-ca > .hero-text { grid-row: auto; }
  /* After the figures, not before: the portrait flies up through the space
     above them as it docks, and would pass over the note. */
  .hero > .ca-note { grid-column: 1; grid-row: auto; margin: 34px 0 6px 2px; }
  .bio-grid, .talks-grid { grid-template-columns: 1fr; gap: 30px; }
  .courses-note { left: auto; right: 0; }
}
@media (max-width: 760px) {
  .hero { padding-top: 22px; }
  .hero-text { padding-top: 6px; }
  .hero h1 { font-size: 64px; margin: 22px 0 18px; }
  .hero .lede { font-size: 22px; }
  .cta-row { margin-top: 28px; gap: 20px; }
  .cta-row .sticky { width: 230px; }
  .hero-art { display: grid; grid-template-columns: 1fr; padding-top: 24px; }
  .hero-art .polaroid { width: 70%; margin: 0 8% 0 auto; }
  .figcard { width: 92%; margin: 18px 0 0 0; }
  .hero-note { position: static; justify-self: end; margin: 14px 8px 0 0; }
  .stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stat { padding: 14px 12px 12px; min-width: 0; }
  .stat .n { font-size: 46px; }
  .stat .yr { font-size: 40px; }
  .topbar-in > nav { flex-basis: 100%; }
  .stat .l { font-size: 14.5px; }
  .courses-note { position: static; margin: -6px 0 -20px 4px; width: auto; }
  .courses-note .arrow { display: none; }
  .cards { grid-template-columns: 1fr; gap: 30px; margin-top: 34px; }
  .icard { min-height: 0; }
  .pad { margin: 0 -10px 0 -36px; padding: 44px 18px 34px 52px;
    background-image: linear-gradient(90deg, transparent 32px, rgba(184,53,42,.5) 32px 34px, transparent 34px 38px, rgba(184,53,42,.5) 38px 40px, transparent 40px), repeating-linear-gradient(transparent 0 31px, rgba(64,120,168,.3) 31px 32px); }
  .pad-intro { font-size: 18.5px; }
  .pad-grid { grid-template-columns: 1fr; gap: 26px; }
  .pad-cta { flex-direction: column; align-items: flex-start; }
  .news-note { position: static; margin: -10px 0 18px; }
  .pad { margin-top: 30px; }
  .talks-grid { margin-top: 26px; }
  .log li { grid-template-columns: minmax(0, 1fr) 128px; grid-template-areas: "t th" "p p"; gap: 12px 16px; padding: 22px 0; align-items: end; }
  .log time { grid-area: t; padding: 0 0 4px; }
  .log li > p { grid-area: p; }
  .log .thumb { grid-area: th; }
  .log p { font-size: 16px; }
  .thumb { padding: 4px 4px 10px; }
  .video .play { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
}

/* ===================== Course page ===================== */
.crumbs .val a { color: var(--pen); text-decoration-thickness: 1.5px; }
.c-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; padding: 40px 0 20px; align-items: start; }
.c-stamps { display: flex; align-items: center; gap: 22px; margin: 18px 0 0; }
.seal {
  display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: var(--sticky); color: var(--ink); text-align: center;
  font-family: var(--hand); font-weight: 700; font-size: 17px; line-height: 1;
  box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 8px 12px -6px rgba(0,0,0,.35), inset 0 0 0 4px rgba(255,255,255,.35);
  transform: rotate(var(--rot, 8deg));
}
.c-code { font-family: var(--serif-d); font-size: clamp(72px, 10vw, 150px); line-height: .85; margin: 22px 0 22px -6px; color: transparent;
  -webkit-text-stroke: 2px var(--red); letter-spacing: -.02em; }
.c-hero h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; margin: 0 0 22px; max-width: 13em; }
.c-hero .lede { font-size: clamp(20px, 1.8vw, 24px); }
.c-intro { max-width: 36em; }
.facts { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.facts li { font-family: var(--mono); font-size: 13px; font-weight: 500; padding: 6px 12px; background: var(--card); border: 1.5px solid var(--ink);
  border-radius: 14px 4px 12px 4px / 4px 12px 4px 14px; box-shadow: 2px 3px 0 rgba(29,38,51,.12); }
.facts li:nth-child(odd) { background: #eef6fb; }
.c-hero-art { position: relative; min-height: 600px; margin-top: 16px; }
.slide { position: absolute; margin: 0; background: #fff; padding: 9px; width: 82%; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 18px 28px -14px rgba(0,0,0,.45); transform: rotate(var(--rot)); }
.slide .tape.tr, .proj-frame .tape.tr { top: calc(10.5% - 6px); right: calc(4.5% - 40px); width: 96px; height: 30px; transform: rotate(38deg); }
.slide.s1 { left: 0; top: 0; }
.slide.s2 { right: 0; top: 168px; width: 78%; }
.slide.s3 { left: 6%; top: 356px; width: 76%; }
.c-note { position: absolute; right: 0; bottom: -12px; width: 220px; transform: rotate(-4deg); }

.sched { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px; align-items: start; margin-top: 26px; }
.weeks { list-style: none; margin: 0; padding: 0; }
.wk-body { min-width: 0; }
.wk { position: relative; display: grid; grid-template-columns: 112px 44px minmax(0, 1fr); gap: 12px; padding: 12px 10px; border-top: 1.5px solid rgba(64,120,168,.25); align-items: baseline; border-radius: 4px; transition: background-color .2s ease; }
.wk.newmod { border-top: 2px solid rgba(29,38,51,.4); }
.wk:last-child { border-bottom: 1.5px solid rgba(64,120,168,.25); }
.wk time { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.wk-m { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--red); }
.wk-t { font-size: 16.5px; line-height: 1.4; }
.wk[data-s] { cursor: pointer; }
.wk[data-s] .wk-t { font-weight: 600; }
.wk.on { background: rgba(255,229,107,.45); }
.wk.off { color: var(--ink-2); }
.wk.off .wk-t { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.wk-tag { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 3px; vertical-align: 2px; }
.wk-tag.ex { background: var(--hl-green); }
.wk-tag.off { background: #eee; }
.wk-tag.case { background: var(--hl-pink); }
.wk-tag.pres { background: var(--hl-blue); }
.wk-has { display: inline-block; margin-left: 8px; font-family: var(--hand); font-size: 16px; color: var(--pen); }
.wk-strip { display: none; }
.today-note { position: absolute; right: -78px; top: 8px; font-size: 20px; color: var(--red); transform: rotate(-4deg); }
.projector { position: sticky; top: 120px; }
.proj-frame { position: relative; background: #fff; padding: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 22px 34px -18px rgba(0,0,0,.5); transform: rotate(.8deg); }
.proj-main { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #eee; }
.proj-cap { margin: 16px 0 10px; font-size: 15px; color: var(--ink-2); }
.proj-cap b { font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--red); margin-right: 6px; }
.proj-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.proj-strip button { padding: 3px; border: 0; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
.proj-strip button:hover { transform: translateY(-3px) rotate(-2deg); }
.proj-strip button[aria-pressed="true"] { outline: 3px solid var(--red); outline-offset: 1px; }
.proj-note { margin-top: 16px; font-size: 18px; }

.how-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.gens-card { width: 100%; margin: 0; padding: 18px 18px 12px; }

.as-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 52px; align-items: start; margin-top: 10px; }
.bars { list-style: none; margin: 0; padding: 0; }
.bar-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: center; padding: 8px 0; }
.bar-row .bl b { font-weight: 600; font-size: 16px; display: block; line-height: 1.3; }
.bar { width: 100%; height: 34px; overflow: visible; color: var(--ink); display: block; }
.weights { margin: 0; padding: 18px 20px 14px; background: rgba(255,254,250,.85); border: 2px solid var(--ink); border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px; }
.weights .bar-row { grid-template-columns: 180px minmax(0, 1fr); }
.as-cards { display: grid; gap: 20px; }
.acard, .lab { position: relative; background: var(--card); padding: 18px 20px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 12px 22px -14px rgba(0,0,0,.4); transform: rotate(var(--rot, 0deg)); }
.acard h3 { font-size: 22px; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pct { font-family: var(--hand); font-weight: 700; color: var(--red); font-size: 24px; }
.acard p, .lab p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.labs-h { margin: 52px 0 18px; font-size: 28px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.labs-h .note { font-size: 20px; }
.labs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.lab { border-top: 6px solid var(--c, var(--tab-2)); }
.lab:nth-child(2) { --c: var(--tab-3); } .lab:nth-child(3) { --c: var(--tab-1); } .lab:nth-child(4) { --c: var(--tab-7); }
.lab-no { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.lab h4 { font-family: var(--serif-d); font-weight: 400; font-size: 19px; line-height: 1.2; margin: 6px 0 10px; }

.cats { margin: 26px 0 0; max-width: 1000px; }
.cats .bar-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: 10px 0; border-top: 1.5px dashed rgba(29,38,51,.14); }
.cats .bl span { display: block; font-size: 15px; color: var(--ink-2); line-height: 1.4; }
.every { margin: 34px 0 12px; }
.terms { display: grid; gap: 14px; max-width: 1000px; }
.proj-term { background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 10px 18px -12px rgba(0,0,0,.35); border-left: 6px solid var(--tab-2); }
.proj-term + .proj-term { border-left-color: var(--tab-4); }
.proj-term summary { cursor: pointer; padding: 14px 20px; display: flex; align-items: baseline; gap: 14px; list-style: none; }
.proj-term summary::-webkit-details-marker { display: none; }
.proj-term summary::before { content: "+"; font-family: var(--mono); font-weight: 600; color: var(--red); width: 14px; }
.proj-term[open] summary::before { content: "\2212"; }
.proj-term .term { font-family: var(--serif-d); font-size: 22px; white-space: nowrap; }
.nw { white-space: nowrap; }
.proj-term .pcount { font-family: var(--hand); font-size: 19px; color: var(--pen); white-space: nowrap; }
.proj-term ul { margin: 0; padding: 4px 24px 18px 52px; }
.proj-term li { font-size: 15.5px; line-height: 1.55; margin: 0 0 12px; }
.proj-approach { display: block; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--ink-2); margin-top: 4px; }

.hist { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; }
.hist::before { content: ""; position: absolute; left: 8px; right: 0; top: 38px; border-top: 3px dashed rgba(29,38,51,.35); }
.hist li { position: relative; }
.hist .when { display: block; font-family: var(--hand); font-weight: 700; font-size: 24px; color: var(--red); line-height: 1; }
.dot-i { display: block; width: 20px; height: 20px; margin: 6px 0 14px; background: var(--paper); border: 3px solid var(--ink); border-radius: 50% 45% 55% 48% / 52% 50% 46% 50%; position: relative; z-index: 1; }
.hist li:last-child .dot-i { background: var(--sticky); }
.hist p { font-size: 16px; line-height: 1.5; margin: 0; }
.offer { margin-top: 44px; }
.offer h3 { font-size: 24px; margin-bottom: 12px; }
.chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { font-family: var(--mono); font-size: 13px; font-weight: 500; padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 14px 4px 12px 4px / 4px 12px 4px 14px; background: var(--card); }
.chips li.hy { background: #eef6fb; }
.chips li.now { background: var(--sticky); }

.c-cta-in { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; padding: 30px 34px; border: 2.5px dashed rgba(29,38,51,.3); border-radius: 10px; }
.c-cta-text { font-size: 21px; max-width: 26em; margin: 0; }
.c-cta .sticky { width: 260px; }

@media (max-width: 1100px) {
  .c-hero { grid-template-columns: 1fr; }
  .c-hero-art { max-width: 620px; min-height: 560px; }
  .sched { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .as-grid, .how-grid { grid-template-columns: 1fr; }
  .labs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .c-hero { padding-top: 20px; gap: 10px; }
  .c-stamps { gap: 14px; }
  .seal { width: 70px; height: 70px; font-size: 15px; }
  .c-code { font-size: 76px; -webkit-text-stroke-width: 1.5px; }
  .c-hero h1 { font-size: 36px; }
  .c-hero-art { min-height: 420px; }
  .slide { width: 86%; padding: 6px; }
  .slide.s2 { top: 120px; width: 80%; }
  .slide.s3 { top: 250px; width: 80%; }
  .c-note { bottom: -26px; width: 190px; font-size: 18px; }
  .sched { grid-template-columns: 1fr; }
  .projector { display: none; }
  .wk { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 6px; }
  .wk time { display: inline; }
  .wk-m { position: absolute; right: 8px; top: 13px; }
  .wk-strip { display: flex; gap: 6px; overflow-x: auto; margin: 10px -6px 2px 0; padding-bottom: 4px; scrollbar-width: thin; }
  .wk-strip img { width: 132px; flex: none; border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
  .wk-has { display: none; }
  .today-note { right: 40px; top: 4px; }
  .bar-row, .weights .bar-row, .cats .bar-row { grid-template-columns: 1fr; gap: 4px; }
  .weights { padding: 14px 14px 10px; }
  .labs { grid-template-columns: 1fr; }
  .proj-term ul { padding: 4px 14px 14px 30px; }
  .hist { grid-template-columns: 1fr; gap: 18px; padding-left: 34px; }
  .hist::before { left: 9px; top: 0; bottom: 0; right: auto; border-top: 0; border-left: 3px dashed rgba(29,38,51,.35); }
  .dot-i { position: absolute; left: -34px; top: 2px; margin: 0; }
  .hist .when { margin-bottom: 4px; }
  .c-cta-in { padding: 22px 18px; gap: 26px; }
  .c-cta-text { font-size: 18px; }
}
.static .badge, .static .sticky-cta, .static .tabs a { transition: none !important; }
.static .portrait-morph { z-index: 2; }
/* keep rotated tape and sticky corners from widening the phone viewport */
html { overflow-x: hidden; }
.sheet, .topbar { overflow-x: clip; }

/* ===================== Slide stacks: prints on a pile ===================== */
.stack { position: relative; display: block; aspect-ratio: 16 / 9; margin: 6px 6px 18px; }
.stack .print {
  position: absolute; inset: 0; background: #fff; padding: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 12px -6px rgba(0,0,0,.35);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rr, 0deg));
  transition: transform .55s cubic-bezier(.3,1.3,.5,1), opacity .4s ease;
  z-index: var(--z, 0);
}
.stack .print img { width: 100%; height: 100%; object-fit: cover; display: block; background: #eee; }
/* depth 0 is the top print; the next two peek out from behind; the rest wait unseen */
.stack .print[data-k="0"] { --z: 5; --rr: calc(var(--r) * .45); }
.stack .print[data-k="1"] { --z: 4; --rr: var(--r); --x: 5px; --y: 4px; }
.stack .print[data-k="2"] { --z: 3; --rr: calc(var(--r) * -1.1); --x: -5px; --y: 6px; }
.stack .print[data-k="3"], .stack .print[data-k="4"] { --z: 2; --rr: 0deg; --x: 0; --y: 6px; opacity: 0; }
.stack .print.lift { --z: 6; transform: translate(-14%, -16%) rotate(-11deg); opacity: 0; transition: transform .5s cubic-bezier(.5,0,.7,.4), opacity .45s ease .05s; }
.stack-tape {
  position: absolute; z-index: 8; top: -9px; right: 14%; width: 58px; height: 18px;
  background: var(--tape); transform: rotate(6deg); box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.stack-tag {
  position: absolute; z-index: 9; left: -6px; bottom: -10px; padding: 1px 8px 0;
  background: var(--sticky); font-family: var(--hand); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink);
  transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.icard:hover .stack .print[data-k="0"] { --rr: 0deg; }
.static .stack .print { transition: none; }

/* course cards: the slides lead, the doodle becomes a corner accent */
.icard .stack { margin: 2px 4px 22px; }
.icard .ic-top {
  height: auto; min-height: 66px; margin: 0 -20px 20px; padding: 0 20px 8px;
  border-bottom: 2px solid rgba(184,53,42,.55); background: var(--card);
}
.icard { padding-bottom: 20px; }
.icard .ic-doodle.corner { position: absolute; right: 12px; bottom: 10px; width: 58px; margin: 0; opacity: .8; }

/* news: the stack sits in the taped thumbnail spot */
.thumb.has-stack { background: transparent; padding: 0; box-shadow: none; }
.thumb.has-stack::before { display: none; }
.thumb.has-stack .stack { margin: 4px 6px 10px; }
.thumb.has-stack .print { padding: 4px; }
@media (max-width: 760px) {
  .thumb.has-stack .stack { margin: 2px 4px 8px; }
  .thumb.has-stack .print { padding: 3px; }
  .stack-tag { font-size: 13px; }
  .icard .ic-doodle.corner { width: 52px; }
}


/* =====================================================================
   Site-wide additions: everything below extends the prototype to every
   page the build generates.
   ===================================================================== */

/* Nine index tabs: a little tighter so they all fit beside the name. */
.topbar-in { gap: 16px; }
.tabs { gap: 3px; }
.tabs a { padding: 9px 7px 13px; font-size: 13px; }
@media (max-width: 1279px) { .tabs a { padding: 9px 6px 13px; font-size: 12.5px; } }
.sticky-cta[aria-current="page"] { transform: rotate(0deg) scale(1.02); }

/* Without the script, drawn charts have nothing in them: hide the empty
   frames and show their plain-text versions instead. */
html:not(.nb) svg[data-chart], html:not(.nb) svg[data-arrow], html:not(.nb) .needs-js { display: none !important; }
.bar-val { font-family: var(--hand); font-weight: 700; font-size: 22px; color: var(--red); }
.nb .bar-val { display: none; }
.tl-table { border-collapse: collapse; font-size: 15.5px; margin-top: 8px; }
.tl-table caption { text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 6px; }
.tl-table th, .tl-table td { text-align: left; font-weight: 400; padding: 6px 12px 6px 0; border-bottom: 1.5px dashed rgba(29,38,51,.16); vertical-align: top; }
.tl-table td { font-family: var(--mono); font-size: 13px; color: var(--red); white-space: nowrap; }
.nb .tl-table { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* A plain play button for video stills (the drawn one replaces it when JS runs). */
.vplay { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--red); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.vplay::after { content: ""; position: absolute; left: 18px; top: 13px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.vplay.big { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
.vplay.big::after { left: 35px; top: 26px; border-width: 20px 0 20px 32px; }
.nb .vplay.big { display: none; }

/* Buttons: an inked box, or a sticky note for the main action. */
.btn {
  display: inline-block; font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: .02em;
  color: var(--ink); background: var(--card); text-decoration: none; cursor: pointer;
  padding: 10px 16px 9px; border: 2px solid var(--ink);
  border-radius: 14px 4px 12px 4px / 4px 12px 4px 14px; box-shadow: 3px 4px 0 rgba(29,38,51,.16);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px) rotate(-.6deg); box-shadow: 4px 6px 0 rgba(29,38,51,.2); color: var(--ink); }
.btn.primary { background: var(--sticky); }
.cta-row .btn + .muted { font-size: 16px; }

/* ---------- Inside pages: the opening block ---------- */
.page-head { position: relative; padding: 44px 0 10px; max-width: 980px; }
.page-head .stamp { margin-bottom: 18px; }
.page-head h1 { font-size: clamp(44px, 6vw, 84px); line-height: .98; margin: 6px 0 26px -3px; letter-spacing: -.02em; max-width: 14em; }
.page-head .lede { font-size: clamp(19px, 1.8vw, 23px); max-width: 38em; }
.page-head .cta-row { margin-top: 26px; }
.partners { color: var(--ink-2); max-width: 46em; font-size: 16.5px; }
.sub-h { font-size: 22px; margin: 34px 0 18px; }
.sec .prose + .prose { margin-top: 0; }
.prose p { margin: 0 0 1em; }

/* ---------- Home: no-JS fallbacks and small extras ---------- */
.thumb .vplay { width: 34px; height: 34px; margin: -22px 0 0 -17px; }
.thumb .vplay::after { left: 13px; top: 9px; border-width: 8px 0 8px 12px; }
.thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.thumb.icon { display: grid; place-items: center; gap: 4px; aspect-ratio: 16 / 10; padding: 12px; color: var(--pen); }
.thumb.icon svg { width: 46px; height: 46px; }
.thumb.icon span { font-family: var(--hand); font-weight: 700; font-size: 18px; color: var(--ink); }
.thumb.icon::before { display: none; }
span.thumb { cursor: default; }
span.thumb:hover { transform: rotate(var(--rot, 2deg)); }
.log li > p { min-width: 0; }
.log p a { overflow-wrap: anywhere; }

/* ---------- Courses index ---------- */
.cards .icard { min-height: 0; }
.cards + .cta-row, .static-stats + .cards { margin-top: 40px; }
.static-stats { list-style: none; padding: 0; margin: 26px 0 0; }
.static-stats .stat { padding: 18px 18px 16px; }
.static-stats .n { font-size: 56px; }
.static-stats .stat:hover { transform: none; box-shadow: none; background: rgba(255,254,250,.75); }
.cards.era .icard { background-color: #fdfaf0; }
.icard .ic-doodle:not(.corner) { width: 150px; margin: 6px 0 22px; }

/* ---------- Course page ---------- */
.c-hero.noart { grid-template-columns: minmax(0, 1fr); }
.c-hero.noart .c-hero-text { max-width: 860px; }
.c-code.long { font-size: clamp(56px, 6.6vw, 104px); }
.c-stamps .stamp { max-width: 100%; line-height: 1.5; }
.c-hero-art.n2 { min-height: 420px; }
.c-hero-art.n1 { min-height: 0; }
.c-hero-art.n1 .slide { position: relative; }
.slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #eee; }
.scale-note { display: block; margin: -4px 0 18px; font-size: 21px; }
.c-hero .panel { margin-top: 26px; }
.wk-part { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); padding: 26px 10px 8px; border-bottom: 2px solid rgba(29,38,51,.4); }
.wk-part:first-child { padding-top: 4px; }
.wk-part + .wk { border-top: 0; }
.wk-note { display: block; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); margin-top: 3px; }
.wk.has-slides { cursor: pointer; }
.wk.has-slides .wk-t { font-weight: 600; }
.wk.has-slides:focus-visible { outline-offset: -3px; }
.wk.is-past:not(.on) time { opacity: .7; }
.sched.solo { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
html:not(.nb) .wk-strip { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
html:not(.nb) .wk-strip img { width: 110px; border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.wk-strip img.is-on { outline: 3px solid var(--red); outline-offset: -3px; }
.proj-say { margin: -4px 0 12px; font-size: 15px; font-style: italic; color: var(--ink-2); min-height: 1.5em; }
.proj-main { transition: opacity .35s ease; }
.proj-main.fading { opacity: .25; }
.proj-strip button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wk .today-note { pointer-events: none; }
.how-grid.solo { grid-template-columns: 1fr; }
.panel-card { margin: 0; padding: 22px 22px 16px; }
.panel { margin: 0; }
.panel figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.panel table { border-collapse: collapse; width: 100%; font-size: 16px; }
.panel th, .panel td { text-align: left; font-weight: 400; padding: 7px 0; border-bottom: 1.5px dashed rgba(29,38,51,.18); }
.panel td { text-align: right; font-family: var(--hand); font-weight: 700; font-size: 21px; color: var(--pen); }
.panel p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.slide-fig { position: relative; margin: 0; background: #fff; padding: 9px 9px 4px; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 18px 28px -14px rgba(0,0,0,.45); transform: rotate(var(--rot, 1.5deg)); }
.slide-fig .tape.tr { top: -8px; right: -26px; transform: rotate(38deg); }
.slide-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.slide-fig .figcap { margin: 8px 4px 6px; }
.as-cards.wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.acard h3 { flex-wrap: wrap; }
.pct.soft { font-size: 18px; font-weight: 400; }
.labs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lab:nth-child(5) { --c: var(--tab-4); } .lab:nth-child(6) { --c: var(--tab-5); }
.cats .bar-row { grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr); }
.bar-row { grid-template-columns: 210px auto minmax(0, 1fr); }
.weights .bar-row { grid-template-columns: 180px auto minmax(0, 1fr); }
.proj-term .term { white-space: normal; }
.topics { counter-reset: t; list-style: none; padding: 0; margin: 0; max-width: 46em; }
.topics li { counter-increment: t; position: relative; padding: 10px 0 10px 52px; border-top: 1.5px solid rgba(64,120,168,.25); }
.topics li::before { content: counter(t, decimal-leading-zero); position: absolute; left: 6px; top: 10px; font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--red); }
.hist li:last-child .dot-i { background: var(--sticky); }
.chips li.now { background: var(--sticky); }

/* ---------- Coding with AI projects ---------- */
.portfolio { display: grid; gap: 30px; padding-bottom: 20px; }
.pf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 54px; padding: 50px 0 30px; border-top: 2px dashed rgba(29,38,51,.16); align-items: start; }
.pf:first-child { border-top: 0; }
.pf.tall { grid-template-columns: minmax(0, 3.6fr) minmax(0, 7fr); }
.pf-shot { display: block; padding: 12px; margin: 10px 10px 0; }
.pf-shot img { width: 100%; height: auto; }
.pf-shot:hover { transform: rotate(0deg) scale(1.01); }
.pf h2 { font-size: clamp(28px, 3vw, 40px); margin: 0 0 10px; }
.pf-tools { font-family: var(--mono); font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.pf-body > p { font-size: 17px; }
.pf-body .dashes li { margin-bottom: 8px; font-size: 16px; line-height: 1.5; }
.pf-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.aside { font-family: var(--hand); font-size: 19px; line-height: 1.25; color: var(--pen); border-left: 3px solid var(--margin); padding-left: 14px; }
.aside a { color: var(--pen); }
.mini-stats { list-style: none; padding: 0; margin: 4px 0 18px; display: flex; flex-wrap: wrap; gap: 12px; }
.mini-stats li { padding: 8px 14px 6px; border: 2px solid var(--ink); border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px; background: rgba(255,254,250,.8); }
.mini-stats b { display: block; font-family: var(--serif-d); font-weight: 400; font-size: 28px; line-height: 1; }
.mini-stats span { font-size: 13.5px; color: var(--ink-2); }

/* ---------- Advising ---------- */
.advised { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 44px; padding: 34px 0; border-top: 2px dashed rgba(29,38,51,.16); align-items: start; }
.sec h2 + .advised { border-top: 0; padding-top: 6px; }
/* Each diagram is a print taped to the page. It flips face up as it lands, jiggles when
   you pick it up, and a click turns it over to the note on the back. */
.art-print { position: relative; margin: 6px 10px 0 4px; transform: rotate(var(--rot, -2deg)); }
.art-print .tape.tr { top: -10px; right: -28px; transform: rotate(38deg); width: 80px; height: 24px; }
.art-print .advising-art, .art-print svg { display: block; width: 100%; height: auto; }
.art-print .flip { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: default; transform-origin: 70% 0; perspective: 1100px; }
html.nb .art-print .flip { cursor: pointer; }
.art-print .flipper { display: grid; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3,1.25,.5,1); }
.art-print.flipped .flipper { transform: rotateY(180deg); }
.art-print .face, .art-print .back { grid-area: 1 / 1; background: #fff; padding: 9px; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 16px 26px -14px rgba(0,0,0,.45); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: box-shadow .3s ease; }
.art-print .back { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px 26px;
  background: #fffdf7 repeating-linear-gradient(transparent 0 25px, rgba(60,90,160,.16) 25px 26px); font-family: var(--hand); color: var(--pen); }
.art-print .b-who { font-size: 27px; font-weight: 700; line-height: 1.05; transform: rotate(-2deg); }
.art-print .b-logo { display: block; max-width: 62%; max-height: 74px; width: auto; height: auto; object-fit: contain; margin: 0 0 6px; transform: rotate(-3deg);
  padding: 8px 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.art-print .back.has-logo .b-who { font-size: 21px; }
.art-print .b-when { font-size: 19px; line-height: 1.2; color: var(--ink-2); }
.art-print .b-turn { font-family: var(--mono); font-size: 12px; color: var(--red); margin-top: 10px; }
html:not(.nb) .art-print .back { display: none; }
@media (hover: hover) {
  html.nb .art-print .flip:hover { animation: jiggle .55s ease; }
  html.nb .art-print .flip:hover .face, html.nb .art-print .flip:hover .back { box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 26px 34px -16px rgba(0,0,0,.5); }
}
@keyframes jiggle {
  0%, 100% { transform: none; }
  20% { transform: rotate(2.6deg) translateY(-3px); }
  45% { transform: rotate(-2deg) translateY(-4px); }
  70% { transform: rotate(1.1deg) translateY(-2px); }
  88% { transform: rotate(-.5deg); }
}
.art-print .flip:focus-visible { outline: 3px solid var(--pen); outline-offset: 6px; }
/* landing: the print arrives face down and turns over */
/* landing: the print arrives face down, shows who it was for, then turns over to the work */
.js-anim .advised.reveal.drawn .art-print .flipper { animation: flipin 2.1s cubic-bezier(.3,1.15,.5,1) .2s backwards; }
@keyframes flipin { 0%, 48% { transform: rotateY(-180deg); } 100% { transform: rotateY(0); } }
/* then the diagram inks itself in */
.trace { stroke-dasharray: var(--len, 1000); stroke-dashoffset: 0; transition: stroke-dashoffset .7s cubic-bezier(.55,.1,.35,1) calc(var(--d, 0s) + 1.5s); }
.js-anim .reveal:not(.drawn) .trace { stroke-dashoffset: var(--len, 1000); }
.advising-art .pop { transform-box: fill-box; transform-origin: center; transition: opacity .3s ease calc(var(--d, 0s) + 1.5s), transform .45s cubic-bezier(.3,1.7,.5,1) calc(var(--d, 0s) + 1.5s); }
.js-anim .reveal:not(.drawn) .advising-art .pop { opacity: 0; transform: scale(.2); }
/* the kind of project is stamped on; methods pop up like tags */
.advised .meta .kind { display: table; font-size: 11.5px; padding: 4px 8px 3px; margin: 0 0 10px; letter-spacing: .1em; }
.methods li { transition: opacity .35s ease var(--d, 0s), transform .5s cubic-bezier(.3,1.6,.5,1) var(--d, 0s); }
.js-anim .reveal:not(.drawn) .methods li { opacity: 0; transform: translateY(10px) scale(.8) rotate(-4deg); }
/* the tally note in the margin of the page head */
.adv-tally { width: 214px; padding: 24px 20px 16px; text-align: center; margin-top: 30px; }
.adv-tally .big { font-size: 34px; }
.adv-tally svg { display: block; margin: 8px auto 4px; color: var(--ink); overflow: visible; }
.adv-tally .since { font-family: var(--hand); font-size: 18px; color: var(--ink-2); }
@media (min-width: 1180px) {
  .page-head .adv-tally { position: absolute; top: 60px; right: -130px; margin: 0; }
}
.advised .meta { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin: 0 0 8px; line-height: 1.5; }
.advised h3 { font-size: 25px; margin: 0 0 12px; }
.advised p { font-size: 16.5px; max-width: 40em; }
.methods { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.methods li { font-family: var(--mono); font-size: 12px; padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 14px 4px 12px 4px / 4px 12px 4px 14px; background: var(--card); }
.methods li:nth-child(3n+2) { background: #eef6fb; }
.methods li:nth-child(3n) { background: #f2fae9; }
.earlier-list { list-style: none; padding: 0; margin: 10px 0 0; max-width: 980px; }
.earlier-list li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 28px; padding: 14px 0; border-top: 2px dashed rgba(29,38,51,.16); font-size: 16.5px; line-height: 1.5; }
.earlier-list li:last-child { border-bottom: 2px dashed rgba(29,38,51,.16); }
.earlier-list span { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--red); padding-top: 3px; }
.earlier-list em { color: var(--ink-2); }

/* ---------- Consulting ---------- */
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin: 40px 0 10px; align-items: start; }
.kind { position: relative; background-color: var(--card);
  background-image: linear-gradient(transparent 74px, rgba(184,53,42,.5) 74px, rgba(184,53,42,.5) 76px, transparent 76px), repeating-linear-gradient(transparent 0 27px, rgba(64,120,168,.18) 27px 28px);
  background-position: 0 0, 0 76px; background-repeat: no-repeat, repeat; background-size: 100% 100%, 100% calc(100% - 76px);
  padding: 22px 28px 26px; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 16px 26px -16px rgba(0,0,0,.45); transform: rotate(var(--rot, 0deg)); }
.kind .tape.tc { width: 80px; margin-left: -40px; top: -13px; }
.kind .kicker { margin-bottom: 6px; color: var(--red); }
.kind h2 { font-size: clamp(28px, 2.6vw, 36px); margin: 18px 0 18px; }
.kind h3 { font-size: 20px; margin: 22px 0 10px; }
.kind p, .kind li { font-size: 16px; line-height: 1.55; }
.kind .dashes li { margin-bottom: 9px; }
.kind .checks li { font-size: 16px; }
.vtl { list-style: none; margin: 18px 0 0; padding: 0 0 0 34px; position: relative; max-width: 900px; }
.vtl::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; border-left: 3px dashed rgba(29,38,51,.35); }
.vtl li { position: relative; padding: 0 0 22px; }
.vtl .dot-i { position: absolute; left: -34px; top: 4px; margin: 0; }
.vtl li:first-child .dot-i { background: var(--sticky); }
.vtl .when { display: block; font-family: var(--hand); font-weight: 700; font-size: 22px; color: var(--red); line-height: 1.1; margin-bottom: 4px; }
.vtl p { margin: 0; font-size: 16.5px; }
.vtl strong { font-weight: 600; }

/* ---------- Book a call ---------- */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px; margin: 36px 0 20px; max-width: 1000px; align-items: start; }
.sticky-card { position: relative; display: flex; flex-direction: column; gap: 2px; background: var(--sticky); padding: 30px 30px 28px; box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 18px 26px -12px rgba(0,0,0,.4); transform: rotate(var(--rot, -2deg)); }
.sticky-card.pink { background: var(--sticky-pink); }
.sticky-card .tape.tc { width: 80px; margin-left: -40px; top: -14px; }
.sticky-card h2 { font-family: var(--hand); font-weight: 700; font-size: 40px; line-height: 1; margin: 6px 0 14px; }
.sticky-card .kicker { color: var(--ink); }
.sticky-card p, .sticky-card li { font-size: 16.5px; line-height: 1.55; }
.sticky-card .dashes { margin-bottom: 20px; }
.sticky-card .btn { align-self: flex-start; margin-top: auto; background: var(--card); }
.checks.prose li { font-size: 17px; }

/* ---------- News ---------- */
.feed.log li { grid-template-columns: 140px minmax(0, 1fr); }
.feed .post { min-width: 0; }
.feed .post p { margin: 0 0 .6em; font-size: 16.5px; }
.feed .post .body.clamped { max-height: 9em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.feed .post button.more { all: unset; cursor: pointer; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--pen); text-decoration: underline; }
.feed .post button.more:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.feed .source { font-family: var(--mono); font-size: 12.5px; margin-top: 4px; }
.people { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.people span { font-family: var(--hand); font-size: 16px; background: var(--hl-yellow); padding: 0 8px; }
#linkedin-all:empty { display: none; }
.sec:has(#linkedin-all:empty) { display: none; }

/* ---------- Talks ---------- */
.talk h2 { font-size: clamp(28px, 3vw, 42px); max-width: 26em; }
.talk .kicker { color: var(--red); letter-spacing: .08em; }
.tslides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 30px; margin: 10px 0 10px; }
.tprint { position: relative; margin: 0; background: #fff; padding: 9px 9px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 14px 24px -14px rgba(0,0,0,.45); transform: rotate(var(--rot, 1deg)); transition: transform .2s ease; }
.tprint:hover { transform: rotate(0deg) scale(1.02); z-index: 2; }
.tprint .tape.tc { width: 70px; margin-left: -35px; top: -13px; height: 24px; }
.tprint img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #eee; }
.tprint figcaption { font-size: 14px; line-height: 1.45; color: var(--ink-2); margin: 10px 4px 0; }
.talk .talks-grid { margin-top: 10px; }
.talk-row { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px 56px; align-items: start; }
.talk-row .prose { max-width: 40em; }
.talk-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 14px 10px 0 0; padding: 26px 22px 22px;
  background-color: var(--card); background-image: repeating-linear-gradient(transparent 0 27px, rgba(60,90,160,.18) 27px 28px);
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 16px 26px -14px rgba(0,0,0,.4); transform: rotate(var(--rot, 2deg)); }
.talk-card .tape.tc { width: 76px; margin-left: -38px; top: -13px; height: 24px; }
.talk-card .tc-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); padding-top: 5px; }
.talk-card .tc-v { font-family: var(--hand); font-size: 19px; line-height: 1.25; color: var(--pen); }
@media (max-width: 900px) {
  .talk-row { grid-template-columns: 1fr; }
  .talk-card { max-width: 340px; margin: 10px 0 6px; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); gap: 60px; align-items: start; }
.card-lined { position: relative; background-color: var(--card); background-image: linear-gradient(90deg, transparent 150px, rgba(184,53,42,.45) 150px, rgba(184,53,42,.45) 152px, transparent 152px);
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 16px 26px -16px rgba(0,0,0,.45); transform: rotate(var(--rot, 0deg)); }
.contact-list { list-style: none; margin: 0; padding: 14px 26px 14px 0; }
.contact-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 22px; padding: 11px 0; border-bottom: 1.5px solid rgba(64,120,168,.2); font-size: 16.5px; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list span { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); text-align: right; padding: 3px 0 0; }
.contact-list div { min-width: 0; overflow-wrap: anywhere; }
.contact-side { padding-top: 30px; }
.contact-side .sticky { width: 240px; }

/* ---------- Travel ---------- */
.travel-sec { padding-top: 30px; }
.view-tabs { display: inline-flex; gap: 6px; margin: 0 0 -1px 18px; position: relative; z-index: 2; }
.view-tabs button { font-family: var(--mono); font-size: 13.5px; font-weight: 500; border: 0; cursor: pointer; color: var(--ink); background: var(--tab-8); padding: 8px 18px 10px; border-radius: 9px 9px 0 0; box-shadow: inset 0 -8px 10px -8px rgba(0,0,0,.2); }
.view-tabs button[aria-selected="true"] { background: var(--card); font-weight: 600; box-shadow: none; }
.map-card { position: relative; background: var(--card); padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 18px 30px -16px rgba(0,0,0,.45); }
.map-card .tape.tr { top: -10px; right: -24px; }
.list-note { margin: 34px 0 14px 6px; }
.travel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.globe { max-width: 40rem; width: 100%; margin: 0 auto; touch-action: none; cursor: grab; }
.globe:active { cursor: grabbing; }
.globe svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-ocean { fill: #eef6fb; stroke: var(--line); stroke-width: 1; }
.g-grat { fill: none; stroke: rgba(64,120,168,.25); stroke-width: .5; }
.g-land { fill: #e7dfcb; stroke: var(--card); stroke-width: .5; }
.g-land.visited { fill: #f3b49a; cursor: pointer; transition: fill .2s ease; }
.g-land.visited:hover { fill: #ea8f6f; }
.g-dot { cursor: pointer; outline: none; }
.g-dot .core { fill: var(--red); stroke: #fff; stroke-width: 1.6; transition: r .2s ease; }
.g-dot .pulse { fill: var(--red); opacity: 0; transform-box: fill-box; transform-origin: center; }
.g-dot.on .pulse, .g-dot:hover .pulse, .g-dot:focus-visible .pulse { animation: g-pulse 1.6s ease-out infinite; }
.g-dot.on .core { fill: var(--pen); }
@keyframes g-pulse { from { opacity: .55; transform: scale(.6); } to { opacity: 0; transform: scale(2.2); } }
.globe-card { position: relative; background: #fff; padding: 10px 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 18px 30px -16px rgba(0,0,0,.45); transform: rotate(1deg); }
.globe-card.pinned { outline: 3px solid var(--red); }
.gc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 2px 4px 8px; }
.gc-head strong { font-family: var(--hand); font-weight: 700; font-size: 28px; line-height: 1; }
.gc-head span { font-family: var(--mono); color: var(--ink-2); font-size: 12.5px; text-align: right; }
.gc-stage { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.gc-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .8s ease, transform 3.5s ease-out; }
.gc-stage img.on { opacity: 1; transform: scale(1); }
.gc-cap { position: absolute; left: 8px; bottom: 8px; background: var(--sticky); color: var(--ink); font-family: var(--hand); font-size: 16px; padding: 1px 8px; transform: rotate(-2deg); }
.gc-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; margin-top: 8px; }
.gc-thumbs button { padding: 0; border: 3px solid #fff; background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.gc-thumbs button img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.gc-thumbs button.on { outline: 3px solid var(--red); }
.gc-thumbs button.on img, .gc-thumbs button:hover img { opacity: 1; }
.country-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.country-list button { font-family: var(--mono); font-size: 13px; cursor: pointer; color: var(--ink); background: var(--card); padding: 5px 11px; border: 1.5px solid var(--ink); border-radius: 14px 4px 12px 4px / 4px 12px 4px 14px; }
.country-list li:nth-child(3n+2) button { background: #eef6fb; }
.country-list li:nth-child(3n) button { background: #f2fae9; }
.country-list button:hover { background: var(--hl-yellow); }
.country-list button.on { background: var(--sticky); box-shadow: 2px 3px 0 rgba(29,38,51,.2); }
.worldmap-wrap { position: relative; }
.worldmap svg { display: block; width: 100%; height: auto; }
.m-sphere { fill: #eef6fb; stroke: var(--line); stroke-width: 1; }
.worldmap .g-land { stroke-width: .4; }
.m-dot .hit { fill: transparent; }
.m-dot .pulse { r: 7; }
.map-pop { position: absolute; z-index: 5; left: 12px; bottom: 12px; width: 290px; background: #fff; padding: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 18px 30px -14px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(14px) rotate(-1deg) scale(.96); transform-origin: 0 100%;
  transition: opacity .28s ease, transform .42s cubic-bezier(.2,.9,.25,1.15); }
.map-pop.show { opacity: 1; transform: rotate(-1deg); }
.map-pop.out { opacity: .25; transform: translateY(4px); transition-duration: .14s; }
.map-pop.pinned { outline: 3px solid var(--red); }
.map-pop.swap .mp-thumbs button { animation: mp-in .42s cubic-bezier(.2,.9,.25,1.2) both; animation-delay: calc(var(--i) * 45ms + 60ms); }
.map-pop.swap .mp-head { animation: mp-in .3s ease both; }
@keyframes mp-in { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.m-leader { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 3; pointer-events: none; opacity: .9; }
.mp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 2px 8px; }
.mp-head strong { font-family: var(--hand); font-weight: 700; font-size: 22px; line-height: 1; }
.mp-head span { font-family: var(--mono); color: var(--ink-2); font-size: 11.5px; white-space: nowrap; }
.mp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mp-thumbs button { padding: 0; border: 0; background: var(--paper-2); aspect-ratio: 1; overflow: hidden; cursor: zoom-in; }
.mp-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.mp-thumbs button:hover img { transform: scale(1.06); }
.m-label { font-family: var(--hand); font-size: 12px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.m-dot.labelled .m-label { opacity: 1; }
.m-dot.on .m-label { fill: var(--red); }
.photo-view { border: 0; padding: 12px 12px 10px; background: #fff; max-width: min(92vw, 1100px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.photo-view::backdrop { background: rgba(20, 28, 25, .85); }
.photo-view img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; }
.photo-view p { font-family: var(--hand); font-size: 20px; text-align: center; margin: 8px 0 0; color: var(--ink); }
.photo-view button { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 700 20px/1 var(--mono); cursor: pointer; }

/* ---------- CV ---------- */
.cv-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 50px; align-items: center; padding: 50px 0 20px; }
.cv-portrait { width: 200px; margin: 10px 0 0 10px; }
.cv-portrait img { aspect-ratio: 1; object-fit: cover; }
.cv-portrait .tape.tc { width: 80px; margin-left: -40px; top: -14px; }
.cv-portrait::after { content: ""; display: block; height: 14px; }
.cv-card .stamp { margin-bottom: 16px; }
.cv-head h1 { font-size: clamp(44px, 5.4vw, 76px); line-height: 1; margin: 0 0 18px -3px; }
.cv-roles { font-size: 19px; line-height: 1.5; margin: 0 0 18px; }
.cv-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cv-contact > li { font-family: var(--mono); font-size: 12.5px; padding: 5px 11px; border: 1.5px solid var(--ink); border-radius: 14px 4px 12px 4px / 4px 12px 4px 14px; background: var(--card); overflow-wrap: anywhere; }
.cv-contact > li:nth-child(3n+2) { background: #eef6fb; }
.cv-contact > li:nth-child(3n) { background: #f2fae9; }
.cv-actions { margin: 20px 0 0; }
.glance-sec { padding-top: 34px; }
.cv-glance { margin: 0; padding: 18px 22px 14px; background: rgba(255,254,250,.85); border: 2px solid var(--ink); border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px; }
.cv-glance figcaption { font-family: var(--hand); font-weight: 700; font-size: 22px; color: var(--pen); margin: 0 0 10px; transform: rotate(-1.5deg); display: inline-block; }
.glance-scroll { overflow-x: auto; padding: 18px 2px 4px; }
.glance { min-width: 640px; display: grid; gap: 8px; }
.lane { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 12px; }
.lane-name { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
.track { position: relative; height: 32px; border-bottom: 1.5px dashed rgba(29,38,51,.2); }
.band { position: absolute; top: 4px; bottom: 4px; color: var(--ink); text-decoration: none; font-family: var(--hand); font-weight: 700; font-size: 15px; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; border-radius: 3px 8px 4px 9px / 9px 4px 8px 3px; transition: transform .15s ease, box-shadow .15s ease; }
.band span { overflow: hidden; text-overflow: ellipsis; }
.band.academia { background: #9ccbea; }
.band.industry { background: #f3a391; }
.band.consulting { background: #f6c453; }
.band:hover, .band:focus-visible { transform: translateY(-2px) rotate(-.5deg); box-shadow: 2px 3px 0 rgba(29,38,51,.2); color: var(--ink); }
.track.degrees { border-bottom-style: dashed; }
.degree { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background: var(--paper); border: 3px solid var(--red); border-radius: 50% 45% 55% 48% / 52% 50% 46% 50%; }
.degree span { position: absolute; left: 50%; transform: translateX(-50%); top: -22px; font-family: var(--hand); font-weight: 700; font-size: 15px; color: var(--red); white-space: nowrap; }
.track.ticks { height: 20px; border: 0; }
.track.ticks span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.cv-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; margin-top: 40px; }
.cv-toc { position: sticky; top: 110px; align-self: start; }
.cv-toc .note { margin: 0 0 10px 4px; font-size: 20px; }
.cv-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; }
.cv-toc a { display: block; font-family: var(--mono); font-size: 13px; line-height: 1.35; color: var(--ink-2); text-decoration: none; padding: 6px 10px 6px 14px; border-left: 3px solid transparent; }
.cv-toc a:hover { color: var(--pen); }
.cv-toc a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--red); background: rgba(255,229,107,.45); }
.cv { max-width: 900px; min-width: 0; }
.cv-sec { padding: 8px 0 34px; }
.cv-sec > h2 { font-size: clamp(30px, 3vw, 40px); margin: 0 0 22px; display: flex; align-items: baseline; gap: 16px; }
.cv-sec > h2::after { content: ""; flex: 1; height: 3px; background: var(--red); opacity: .55; border-radius: 2px; transform: translateY(-6px) rotate(-.4deg); }
.cv-sub { margin-bottom: 22px; }
.cv-sub h3 { font-size: 21px; margin: 0 0 12px; color: var(--ink); }
.cv-list { list-style: none; padding: 0; margin: 0; }
.cv-list p { margin: 4px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.cv-list .when { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--red); }
.cv-list a.pill { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-decoration: none; border: 1.5px solid var(--ink); border-radius: 10px 3px 9px 3px; padding: 0 6px; margin-left: 4px; vertical-align: .1em; background: var(--hl-blue); }
.cv-list.plain .entry, .cv-list.compact .entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; padding: 9px 0; border-bottom: 1.5px dashed rgba(29,38,51,.14); font-size: 16px; line-height: 1.5; }
.cv-list.plain .when, .cv-list.compact .when { order: 2; text-align: right; white-space: nowrap; }
.cv-list.compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 30px; }
.cv-list.timeline { border-left: 3px dashed rgba(29,38,51,.3); margin-left: 9px; }
.cv-list.timeline .entry { position: relative; padding: 0 0 22px 28px; display: grid; gap: 2px; }
.cv-list.timeline .entry::before { content: ""; position: absolute; left: -12px; top: 3px; width: 15px; height: 15px; background: var(--paper); border: 3px solid var(--ink); border-radius: 50% 45% 55% 48% / 52% 50% 46% 50%; }
.cv-list.timeline .entry.dated:first-child::before { background: var(--sticky); }
.cv-list.timeline .when { font-family: var(--hand); font-weight: 700; font-size: 19px; }
.cv-list.timeline .head { font-size: 16.5px; line-height: 1.45; }
.cv-list .head .title { display: block; font-weight: 600; }
.cv-list .head .org { display: block; color: var(--ink-2); font-size: 15.5px; }
.cv-list.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.cv-list.cards .entry { position: relative; background: var(--card); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 12px 22px -14px rgba(0,0,0,.4); border-top: 6px solid var(--tab-2); font-size: 15.5px; line-height: 1.5; }
.cv-list.cards .entry:nth-child(4n+2) { border-top-color: var(--tab-3); transform: rotate(.6deg); }
.cv-list.cards .entry:nth-child(4n+3) { border-top-color: var(--tab-1); transform: rotate(-.5deg); }
.cv-list.cards .entry:nth-child(4n) { border-top-color: var(--tab-7); }
.cv-list.cards .when { align-self: flex-start; }
.cv-list.cards strong.title { font-family: var(--serif-d); font-weight: 400; font-size: 19px; line-height: 1.2; }
.cv-list.citations { counter-reset: cite; }
.cv-list.citations .entry { counter-increment: cite; position: relative; padding: 10px 0 10px 44px; border-bottom: 1.5px dashed rgba(29,38,51,.14); font-size: 16px; line-height: 1.5; }
.cv-list.citations .entry::before { content: counter(cite); position: absolute; left: 0; top: 9px; width: 28px; height: 28px; display: grid; place-items: center; font-family: var(--hand); font-weight: 700; font-size: 16px; color: var(--red); border: 2px solid var(--red); border-radius: 50% 45% 55% 48% / 52% 50% 46% 50%; }
.cv-list.citations b { background-image: linear-gradient(100deg, transparent .1em, var(--hl-yellow) .25em, var(--hl-yellow) calc(100% - .25em), transparent); background-size: 100% 70%; background-position: 0 70%; background-repeat: no-repeat; font-weight: 600; }
.cv-subs.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 26px; }
.cv-subs.columns .cv-sub { background: var(--card); padding: 18px 20px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 12px 22px -14px rgba(0,0,0,.4); margin: 0; }
.cv-subs.columns .cv-list.plain .entry:last-child { border-bottom: 0; }
.cv-subs.citations .cv-sub + .cv-sub { margin-top: 26px; }
.cv-list.links { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-list.links .entry { font-family: var(--mono); font-size: 13px; padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 14px 4px 12px 4px / 4px 12px 4px 14px; background: var(--card); overflow-wrap: anywhere; }

/* CV header place popovers: an animated campus map and a building photo. */
.place-pop { position: relative; }
.pp-trigger { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: .2em; text-decoration-color: var(--red); }
.pp-card { position: absolute; z-index: 40; top: calc(100% + 10px); left: -12px; width: min(30rem, 86vw); background: #fff; padding: 9px; text-align: left;
  font-family: var(--serif); box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 22px 40px -18px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(8px) rotate(-1deg) scale(.97); transform-origin: 1.5rem 0;
  transition: opacity .22s ease, transform .35s cubic-bezier(.2,.9,.25,1.15), visibility 0s linear .35s; }
.place-pop.flip .pp-card { left: auto; right: -12px; transform-origin: calc(100% - 1.5rem) 0; }
.place-pop.open .pp-card { opacity: 1; visibility: visible; transform: rotate(-1deg); transition-delay: 0s; }
.pp-photo img { display: block; width: 100%; height: auto; }
.pp-note { margin: 8px 4px 2px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.pp-credit { margin: 4px; font-size: 12px; color: var(--ink-2); }
.pp-photo.play img { animation: pp-photo 1.2s ease-out both; }
@keyframes pp-photo { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.campus-map { display: block; width: 100%; height: auto; }
.cm-bg { fill: #f6f1e7; }
.cm-walk { fill: none; stroke: #e0d7c6; stroke-width: 1; }
.cm-minor { fill: none; stroke: #fffaf0; stroke-width: 4; stroke-linecap: round; }
.cm-major { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; }
.cm-bld path { fill: #e3dacb; stroke: #d2c6b1; stroke-width: .6; }
.cm-tepper { fill: var(--red); stroke: var(--accent-ink); stroke-width: 1.4; }
.cm-label { font: 600 9px "IBM Plex Mono", ui-monospace, monospace; fill: #7c7263; text-anchor: middle; paint-order: stroke; stroke: #f6f1e7; stroke-width: 3px; }
.cm-street { font: italic 600 10px "Literata", Georgia, serif; fill: #6c6357; letter-spacing: .04em; }
.cm-credit { font: 7px "IBM Plex Mono", ui-monospace, monospace; fill: #9b9183; }
.cm-ring { fill: var(--red); opacity: .35; }
.cm-dot { fill: var(--accent-ink); stroke: #fff; stroke-width: 2; }
.cm-tag rect { fill: var(--ink); }
.cm-t1 { font: 600 11px "IBM Plex Mono", ui-monospace, monospace; fill: #fbf8f2; }
.cm-t2 { font: 10px "IBM Plex Mono", ui-monospace, monospace; fill: #d9d0c2; }
.pp-map.play .cm-roads path { stroke-dasharray: 600; animation: cm-road 1.1s ease-out both; }
.pp-map.play .cm-bld path { animation: cm-rise .5s ease-out both; animation-delay: calc(.25s + var(--d)); }
.pp-map.play .cm-tepper { animation: cm-pop .6s cubic-bezier(.2,.9,.3,1.3) .75s both; transform-box: fill-box; transform-origin: center; }
.pp-map.play .cm-pin { animation: cm-drop .5s cubic-bezier(.3,1.4,.5,1) 1.15s both; }
.pp-map.play .cm-ring { animation: cm-ping 1.8s ease-out 1.6s infinite; transform-box: fill-box; transform-origin: center; }
.pp-map.play .cm-tag { animation: cm-tag .4s ease-out 1.5s both; }
@keyframes cm-road { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes cm-rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes cm-drop { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }
@keyframes cm-ping { from { transform: scale(1); opacity: .45; } to { transform: scale(3); opacity: 0; } }
@keyframes cm-tag { from { opacity: 0; translate: -6px 0; } to { opacity: 1; translate: 0 0; } }

/* ---------- 404 and the moved-page stub ---------- */
.links-404 { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; }
.big-note { font-size: 26px; margin-top: 30px; }
.sheet.moved { max-width: 760px; margin: 60px auto; padding: 60px 40px 60px 120px; min-height: 0; }

/* ---------- Inside pages, narrower screens ---------- */
@media (max-width: 1240px) {
  .tslides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .kinds, .offers { grid-template-columns: 1fr; max-width: 720px; }
  .cv-layout { grid-template-columns: 1fr; gap: 26px; }
  .cv-toc { position: static; }
  .cv-toc ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .cv-toc a { border: 1.5px solid var(--ink); border-radius: 14px 4px 12px 4px / 4px 12px 4px 14px; background: var(--card); padding: 4px 10px; }
  .cv-toc a[aria-current] { border-left-color: var(--ink); }
  .pf, .pf.tall { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pf-shot { max-width: 560px; }
  .pf.tall .pf-shot { max-width: 340px; }
  .advised { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 30px; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-side { padding-top: 0; }
  .travel { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .page-head { padding-top: 28px; }
  .page-head h1 { font-size: 44px; margin-bottom: 18px; }
  .page-head .lede { font-size: 18.5px; }
  .tslides { grid-template-columns: 1fr; gap: 30px; }
  .advised { grid-template-columns: 1fr; gap: 22px; padding: 26px 0; }
  .art-print { max-width: 360px; }
  .earlier-list li { grid-template-columns: 1fr; }
  .contact-list { padding: 8px 14px; }
  .card-lined { background-image: none; }
  .contact-list li { grid-template-columns: 1fr; gap: 2px; }
  .contact-list span { text-align: left; }
  .cv-head { grid-template-columns: 1fr; gap: 20px; padding-top: 28px; }
  .cv-portrait { width: 150px; }
  .cv-head h1 { font-size: 44px; }
  .cv-roles { font-size: 17px; }
  .cv-glance { padding: 14px 12px 10px; border-radius: 14px; }
  .glance { min-width: 520px; }
  .lane { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
  .lane-name { font-size: 10.5px; }
  .band { font-size: 13px; padding: 0 5px; }
  .cv-subs.columns { grid-template-columns: 1fr; }
  .cv-list.plain .entry, .cv-list.compact .entry { grid-template-columns: 1fr; }
  .cv-list.plain .when, .cv-list.compact .when { order: 0; text-align: left; }
  .kind { padding: 18px 16px 20px; }
  .sticky-card { padding: 26px 20px 22px; }
  .sticky-card h2 { font-size: 34px; }
  .bar-row, .weights .bar-row, .cats .bar-row { grid-template-columns: 1fr; }
  .bar-row .bar-val { justify-self: start; }
  .map-card { padding: 8px; }
  .map-pop { position: static; width: auto; margin-top: 10px; transform-origin: 50% 0; }
  .map-pop[hidden] { display: none; }
  .view-tabs { margin-left: 8px; }
  .sheet.moved { padding: 40px 20px 40px 60px; }
  .feed.log li { grid-template-columns: 1fr; }
  .c-code.long { font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-stage img { transform: none; }
  .pp-card, .pp-map.play *, .pp-photo.play img { animation: none !important; }
}

/* ---------- Paper version: black on white, no bench, no navigation ---------- */
@media print {
  body { background: #fff !important; font-size: 11pt; }
  .topbar, .foot, .skip, .bot, .sheet-head, .sec-no, .cv-toc, .glance-sec, .cv-actions, .cv-portrait, .pp-card, .projector { display: none !important; }
  .sheet { max-width: none; margin: 0; padding: 0; background: none !important; box-shadow: none !important; }
  .sheet::before, .sheet::after { display: none !important; }
  a { color: inherit; text-decoration: none; }
  .cv-head { display: block; padding: 0 0 8pt; border-bottom: 2px solid #000; }
  .cv-head .stamp { display: none; }
  .cv-head h1 { font-size: 26pt; }
  .cv-head .u > svg { display: none; }
  .cv-contact > li { border: 0; background: none !important; padding: 0 8pt 0 0; }
  .pp-trigger { text-decoration: none; }
  .cv-layout { display: block; margin: 0; }
  .cv { max-width: none; }
  .cv-sec { padding: 10pt 0 6pt; break-inside: auto; }
  .cv-sec > h2 { font-size: 16pt; }
  .cv-sec > h2::after { background: #000; opacity: 1; height: 1px; transform: none; }
  .cv-list .entry { break-inside: avoid; }
  .cv-list.cards, .cv-subs.columns { display: block; }
  .cv-list.cards .entry, .cv-subs.columns .cv-sub { box-shadow: none; border: 0; padding: 0 0 6pt; background: none; transform: none; }
  .cv-list.timeline { border: 0; margin: 0; }
  .cv-list.timeline .entry { padding-left: 0; }
  .cv-list.timeline .entry::before, .cv-list.citations .entry::before { display: none; }
  .cv-list.citations .entry { padding-left: 0; }
  .cv-list a.pill { border: 0; padding: 0; background: none; }
  .cv-list.citations b { background: none; }
  body, .cv-list p, .cv-list .when, .cv-sub h3, .cv-list.timeline .when { color: #000 !important; }
  .reveal * { opacity: 1 !important; transform: none !important; }
}

/* On the big inside-page titles the pen line sits just under the letters,
   not a fixed distance below, so it never runs through the lede. */
.page-head h1 .u > svg.ov, .cv-head h1 .u > svg.ov { bottom: -.08em !important; }
html:not(.nb) .checks li::before { content: "\2713"; font-family: var(--hand); font-weight: 700; font-size: 26px; line-height: 1; color: var(--red); }

/* ---------- Strengths ----------
   Gallup's four domains get their own inks: strategic thinking green,
   executing purple, relationship building blue, influencing orange. */
:root { --d-think: #2f8a5b; --d-exec: #7a3b8f; --d-rel: #2a6fb3; --d-infl: #c76a12; }
.sf-snap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.sf-fig { margin: 0; background: var(--card); border: 1.5px solid var(--ink); padding: 14px 10px 6px; transform: rotate(-.6deg); box-shadow: 4px 5px 0 rgba(29, 38, 51, .12); }
.sf-chart { display: block; width: 100%; height: auto; overflow: visible; }
.sf-yr { font: 600 15px var(--mono); fill: var(--ink-2); letter-spacing: .08em; }
.sf-out { stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 4 6; }
.sf-outlab { font: 22px var(--hand); fill: var(--pen); }
.sf-line { stroke-width: 3.2; opacity: .85; }
.sf-line.think, .sf-pt.think { color: var(--d-think); }
.sf-line.exec, .sf-pt.exec { color: var(--d-exec); }
.sf-line.rel, .sf-pt.rel { color: var(--d-rel); }
.sf-pt { fill: currentColor; stroke: var(--card); stroke-width: 2.5; }
.sf-pt.ghost { fill: var(--card); stroke: currentColor; stroke-dasharray: 3 3; }
.sf-name { font: 600 15px var(--serif); fill: var(--ink); }
.sf-rk { font: 600 13px var(--mono); fill: var(--red); }
.sf-domains { list-style: none; padding: 0; margin: 10px 0 6px; display: grid; gap: 8px; }
.sf-domains li { display: grid; grid-template-columns: 6.5em 1fr; align-items: baseline; gap: 12px; border-bottom: 1px dashed var(--rule); padding-bottom: 6px; }
.sf-domains .sf-n { font: 600 15px var(--mono); }
.sf-domains .think .sf-n { color: var(--d-think); } .sf-domains .exec .sf-n { color: var(--d-exec); }
.sf-domains .rel .sf-n { color: var(--d-rel); } .sf-domains .infl .sf-n { color: var(--d-infl); }
.sf-sticks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 8px; }
.sf-stick { cursor: default; }
.sf-stick .sub { display: block; font-family: var(--serif); font-size: 16px; line-height: 1.4; margin-top: 10px; }
.sf-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 10px; }
.sf-card { position: relative; background: var(--card); border: 1.5px solid var(--ink); padding: 22px 24px 18px; transform: rotate(var(--rot, 0deg)); box-shadow: 4px 5px 0 rgba(29, 38, 51, .1); min-width: 0; }
.sf-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.sf-card.think::before { background: var(--d-think); } .sf-card.exec::before { background: var(--d-exec); } .sf-card.rel::before { background: var(--d-rel); }
.sf-dom { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 4px; }
.sf-card h3 { font-family: var(--serif-d); font-size: 30px; margin: 0 0 6px; }
.sf-tag { display: inline-block; font: 500 12.5px var(--mono); color: var(--red); border: 1.5px solid var(--red); padding: 2px 8px; border-radius: 3px; transform: rotate(-1.5deg); }
.sf-line { font-family: var(--hand); font-size: 22px; color: var(--pen); line-height: 1.2; margin: 14px 0 8px; }
.sf-gallup { color: var(--ink-2); font-size: 15.5px; margin: 0 0 10px; }
.sf-card .dashes { margin: 0; }
.sf-work { list-style: none; padding: 0; margin: 0; max-width: 46em; display: grid; gap: 4px; }
.sf-work li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; padding: 12px 0; border-bottom: 1px dashed var(--rule); font-size: 18px; }
.sf-work em { font: 13px var(--mono); font-style: normal; color: var(--ink-2); }
@media (max-width: 900px) {
  .sf-snap, .sf-cards, .sf-sticks { grid-template-columns: minmax(0, 1fr); }
  .sf-card { transform: none; }
}
.sf-snap .sf-domains li { background: none; border: 0; border-bottom: 1px dashed var(--rule); box-shadow: none; transform: none; margin: 0; padding: 0 0 6px; }
.sf-snap .sf-domains li::before, .sf-snap .sf-domains li::after { content: none; }

/* ===================== Evaluations ===================== */
.ev-kpis { margin-top: 10px; }
.ev-kpis .stat .n { font-size: 68px; }
.ev-kpis .stat .n small { font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--ink-2); margin-left: 4px; }
.ev-kpis .stat svg.spark { width: 150px; height: 44px; margin: 8px 0 10px; }
.ev-kpis .stat .l { font-size: 15.5px; }
.ev-award { max-width: 320px; margin: 30px 0 0 6px; }
.ev-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 4px 0 18px; }
.ev-controls .lab { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-right: 2px; }
.ev-chip { all: unset; cursor: pointer; font-family: var(--mono); font-size: 13px; padding: 5px 12px 4px; border: 1.5px solid var(--ink); border-radius: 14px 4px 12px 4px / 4px 12px 4px 14px; background: var(--card); display: inline-flex; align-items: center; gap: 7px; line-height: 1.3; }
.ev-chip .sw { width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--ink)); flex: none; }
.ev-chip[aria-pressed="true"] { background: var(--hl-yellow); }
.ev-chip:focus-visible, #ev-item:focus-visible, .ev-toggle:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
#ev-item { font-family: var(--mono); font-size: 13px; padding: 5px 10px 4px; border: 1.5px solid var(--ink); border-radius: 4px 12px 4px 14px / 12px 4px 14px 4px; background: var(--card); color: var(--ink); }
.ev-fig { margin: 0; max-width: 1040px; }
.ev-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.ev-grid { fill: none; stroke: rgba(29,38,51,.14); stroke-width: 1; }
.ev-mono { font-family: var(--mono); font-size: 11.5px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.ev-hit { fill: transparent; stroke: none; cursor: default; }
.ev-hit:focus { outline: none; }
.ev-hit:focus-visible { stroke: var(--pen); stroke-width: 2; stroke-dasharray: 3 3; fill: rgba(36,71,166,.06); }
.ev-ring { opacity: .95; }
.ev-tip { position: absolute; z-index: 60; max-width: 280px; padding: 12px 16px 12px; background: var(--sticky); color: var(--ink); font-family: var(--hand); font-size: 16px; line-height: 1.3;
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 14px 20px -12px rgba(0,0,0,.45); transform: rotate(-1.5deg); pointer-events: none; display: flex; flex-direction: column; gap: 2px; }
.ev-tip strong { font-size: 21px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
.ev-tip span:last-child { color: var(--ink-2); font-size: 14.5px; }
.ev-toggle { all: unset; cursor: pointer; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--pen); text-decoration: underline; margin-top: 14px; display: inline-block; }
.ev-table { border-collapse: collapse; width: 100%; max-width: 1040px; margin-top: 14px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ev-table th, .ev-table td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px dashed rgba(29,38,51,.2); vertical-align: top; }
.ev-table th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.ev-table td.num, .ev-table th.num { text-align: right; padding-right: 14px; }
.ev-multiples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; max-width: 1040px; }
.ev-multiple { margin: 0; }
.ev-multiple h3 { font-size: 19px; margin: 0 0 4px; }
.ev-multiple svg { display: block; width: 100%; height: auto; overflow: visible; }
.ev-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); margin: 0 0 12px; }
.ev-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ev-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); display: inline-block; }
.ev-legend i.round { border-radius: 50%; }
.ev-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 28px; margin-top: 18px; max-width: 1140px; align-items: start; }
.ev-quote { position: relative; margin: 0; background: var(--card); padding: 22px 22px 18px;
  background-image: repeating-linear-gradient(transparent 0 26px, rgba(64,120,168,.18) 26px 27px); background-position: 0 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 16px 26px -16px rgba(0,0,0,.45); transform: rotate(var(--rot, -1deg)); }
.ev-quote .tape.tc { width: 70px; margin-left: -35px; top: -12px; }
.ev-quote p { font-family: var(--serif); font-size: 17px; line-height: 27px; margin: 0; }
.ev-quote p::before { content: "\201C"; color: var(--red); font-family: var(--serif-d); font-size: 30px; line-height: 0; vertical-align: -10px; margin-right: 3px; }
.ev-quote p::after { content: "\201D"; color: var(--red); font-family: var(--serif-d); font-size: 30px; line-height: 0; vertical-align: -10px; margin-left: 3px; }
.ev-quote figcaption { font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.ev-quote.small { background: var(--sticky); background-image: none; padding: 18px 20px 16px; }
.ev-quote.small p { font-family: var(--hand); font-size: 21px; line-height: 1.2; font-weight: 700; }
.ev-quote.small p::before, .ev-quote.small p::after { content: none; }
.ev-course { margin-top: 36px; }
.ev-course h3 { font-size: 24px; margin: 0 0 2px; }
.ev-course .ev-cstat { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); margin: 0 0 6px; }
.ev-course .ev-cstat b { color: var(--red); font-weight: 600; }
@media (max-width: 1100px) { .ev-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ev-quotes, .ev-multiples { grid-template-columns: 1fr; }
  .ev-kpis .stat .n { font-size: 54px; }
  .ev-table { font-size: 13px; }
}
/* travel: the map leads, the title and note follow it */
.travel-first { padding-top: 14px; }
.travel-first + .page-head { padding-top: 26px; }
.travel-first + .page-head h1 { font-size: clamp(38px, 4.6vw, 64px); margin-bottom: 16px; }
.travel-list { padding-top: 0; }
/* evaluations: notes that arrived unasked, as letters tucked in envelopes */
.ev-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 26px; margin-top: 22px; max-width: 1180px; align-items: start; }
.ev-note { position: relative; margin: 0; transform: rotate(var(--rot, -1deg)); transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.ev-letter { position: relative; background: var(--card); padding: 18px 18px 52px; margin: 0 10px -40px;
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(64,120,168,.17) 23px 24px); background-position: 0 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.14); transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.ev-letter p { font-family: var(--hand); font-size: 17px; line-height: 24px; color: var(--pen); margin: 0; }
.ev-env { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-height: 64px; padding: 26px 14px 10px;
  background: #e9dcc0; box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 14px 22px -14px rgba(0,0,0,.45);
  background-image: linear-gradient(160deg, transparent 49.5%, rgba(29,38,51,.12) 50%, transparent 51%), linear-gradient(20deg, transparent 49.5%, rgba(29,38,51,.12) 50%, transparent 51%); }
.ev-from { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-2); line-height: 1.35; }
.ev-postmark { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--red); color: var(--red); display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600; transform: rotate(-14deg); opacity: .8; margin-top: -40px; background: rgba(255,255,255,.25); }
@media (hover: hover) {
  .ev-note:hover { transform: rotate(0deg); z-index: 2; }
  .ev-note:hover .ev-letter { transform: translateY(-14px); }
}
@media (max-width: 1100px) { .ev-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ev-notes { grid-template-columns: 1fr; } }

/* ---------- Index tabs: always one row, never cut off ----------
   Eleven tabs do not fit beside the name, so on every screen wider than a
   phone the tabs get their own full-width row under the name and the
   "Book a call" note shrinks to one line. */
@media (min-width: 761px) {
  .tabs { gap: 4px; }
  .tabs a { font-size: 12.5px; padding: 8px 9px 12px; }
  .tabs a[aria-current="page"]::after { left: 9px; right: 9px; }
}
@media (min-width: 761px) {
  .topbar-in { flex-wrap: wrap; padding: 12px 28px 0; gap: 2px 22px; min-height: 0; }
  .brand { padding-bottom: 2px; }
  .topbar-in > nav { flex-basis: 100%; }
  .tabs { padding-top: 6px; }
  .sticky-cta { right: 24px; top: 12px; width: auto; padding: 8px 14px 6px; font-size: 19px; white-space: nowrap; }
  .sticky-cta small { display: none; }
  .sticky-cta::before { width: 44px; margin-left: -22px; top: -8px; height: 16px; }
}
@media (min-width: 761px) and (max-width: 909px) {
  /* the one width band where the tab row still has to scroll: fade its edge */
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 50px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 50px), transparent); }
}
/* contact: the office lines carry the same map and photo pop-ups as the CV */
.office-lines .place-pop { display: inline-block; }
@media (min-width: 761px) and (max-width: 1019px) {
  .tabs { gap: 3px; }
  .tabs a { font-size: 12px; padding: 8px 7px 12px; }
  .tabs a[aria-current="page"]::after { left: 7px; right: 7px; }
}

/* US city dots: same red as the countries, smaller, drawn above the US. */
.m-city .core, .g-city .core { stroke-width: 1.1; }
.m-city .m-label { font-size: 10px; }
.mp-sub { font: 500 11px var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 10px 0 4px; }
.mp-cities { display: flex; flex-wrap: wrap; gap: 4px; max-height: 8.5rem; overflow-y: auto; }
.mp-cities button { font: 12px var(--mono, ui-monospace, monospace); padding: 2px 7px; border: 1px solid var(--line, #d9cfba); border-radius: 999px; background: var(--card, #fff); color: var(--ink); cursor: pointer; }
.mp-cities button:hover, .mp-cities button:focus-visible { border-color: var(--accent); color: var(--accent-ink); }
/* ---------- Home: the editor's caret that adds "PhD" to the name ----------
   A red proofreading caret pops in after "Collier" and "PhD" is written in
   above it, letter by letter, then gets a little nudge. Visible at rest
   without JS; the animation only plays once the hero is drawn. */
.phd-ins { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: baseline; margin-left: .09em; }
.phd-caret { position: absolute; left: -.02em; bottom: -.05em; width: .26em; height: .22em; overflow: visible; }
.phd-caret path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 0; }
.phd { position: absolute; left: .07em; bottom: .32em; font-family: var(--hand); font-weight: 700; font-size: .42em; line-height: 1; color: var(--red);
  letter-spacing: .02em; white-space: nowrap; transform: rotate(-9deg); transform-origin: 0 100%; }
.phd i { font-style: normal; display: inline-block; }
.js-anim .hero.reveal.drawn .phd-caret path { animation: phd-caret .45s cubic-bezier(.5,0,.3,1) 1.9s backwards; }
.js-anim .hero.reveal.drawn .phd i { animation: phd-write .26s cubic-bezier(.3,1.6,.5,1) backwards; }
.js-anim .hero.reveal.drawn .phd i:nth-child(1) { animation-delay: 2.35s; }
.js-anim .hero.reveal.drawn .phd i:nth-child(2) { animation-delay: 2.55s; }
.js-anim .hero.reveal.drawn .phd i:nth-child(3) { animation-delay: 2.75s; }
.js-anim .hero.reveal.drawn .phd { animation: phd-nudge .5s ease-in-out 3.15s; }
.js-anim .hero.reveal:not(.drawn) .phd i, .js-anim .hero.reveal:not(.drawn) .phd-caret { opacity: 0; }
@keyframes phd-caret { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes phd-write { from { opacity: 0; transform: translateY(-.35em) scale(1.6) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes phd-nudge { 0%, 100% { transform: rotate(-9deg); } 35% { transform: rotate(-3deg) translateY(-.06em); } 70% { transform: rotate(-12deg); } }
.hero h1:hover .phd { animation: phd-nudge .5s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .phd, .phd i, .phd-caret path { animation: none !important; } }

/* ---- Reels (/reels/): two taped projector prints, played by js/reels.js ---- */
.reels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: start; margin-top: 8px; }
.reel { position: relative; margin: 0; background: var(--card); border: 1.5px solid var(--ink); padding: 14px 14px 12px;
  transform: rotate(var(--rot, 0deg)); box-shadow: 4px 5px 0 rgba(29, 38, 51, .12); min-width: 0; }
.reel .tape.tc { top: -14px; }
.reel-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 2px 10px; }
.reel-title h3 { font-family: var(--serif-d); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; margin: 0; text-wrap: balance; }
.reel-count { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.reel-stage { position: relative; width: 100%; max-width: 100%; aspect-ratio: 4 / 5; max-height: 78vh; margin: 0 auto;
  background: var(--bench); overflow: hidden; outline-offset: 3px; }
.reel-stage:focus-visible { outline: 3px solid var(--pen); }
.reel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0;
  transform-origin: 50% 40%; will-change: opacity, transform;
  transition: opacity .35s ease, transform 1.7s linear; }
.reel-img.on { opacity: 1; }
.reel-img:not([src]) { visibility: hidden; }
.reel-place { position: absolute; left: 12px; bottom: 14px; z-index: 2; max-width: calc(100% - 24px);
  font: 400 19px/1.15 var(--hand); color: var(--ink); background: var(--legal); padding: 5px 12px 4px;
  transform: rotate(-2deg); box-shadow: 0 2px 5px rgba(0, 0, 0, .25); }
.reel-place::before { content: ""; position: absolute; top: -9px; left: 50%; width: 46px; height: 16px; margin-left: -23px;
  background: var(--tape); transform: rotate(4deg); }
.reel-play { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%) rotate(-2deg);
  display: flex; align-items: center; gap: 8px; padding: 12px 22px 12px 16px; cursor: pointer;
  font: 400 24px var(--hand); color: var(--ink); background: var(--card); border: 2px solid var(--ink);
  border-radius: 18px 6px 16px 6px / 6px 16px 6px 18px; box-shadow: 4px 5px 0 rgba(0, 0, 0, .3); transition: transform .15s ease; }
.reel-play[hidden] { display: none; }
.reel-play svg { width: 30px; height: 30px; fill: var(--red); }
.reel-play:hover { transform: translate(-50%, -50%) rotate(-2deg) scale(1.05); }
.reel-play:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.reel-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.reel-btn { font: 600 12px var(--mono); letter-spacing: .04em; color: var(--ink); background: var(--card); cursor: pointer;
  border: 1.5px solid var(--ink); border-radius: 10px 3px 9px 3px / 3px 9px 3px 10px; padding: 6px 10px 5px; min-height: 32px; white-space: nowrap; }
.reel-btn:disabled { opacity: .45; cursor: default; }
.reel-btn:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; }
.reel-mute[aria-pressed="true"] { color: var(--red); border-color: var(--red); }
.reel-track { flex: 1; min-width: 40px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.reel-fill { display: block; width: 0; height: 100%; background: var(--red); transition: width .3s linear; }
.reel-counter { font: 500 12px var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 7ch; text-align: right; }
.reel-credit { font: 12px/1.5 var(--mono); color: var(--ink-2); margin: 22px 0 0; padding: 0; list-style: none; max-width: 80ch; display: grid; gap: 4px; }
.reel-credit a { color: inherit; }
@media (max-width: 760px) {
  .reels { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .reel { padding: 10px 10px 10px; }
  .reel-place { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel { transform: none; }
  .reel-img { transition: opacity .4s ease !important; transform: none !important; }
  .reel-play, .reel-play:hover { transform: translate(-50%, -50%); }
}

/* ---- Reels version 2: the music video (js/reels-v2.js) ---- */
.v2-h { margin-bottom: 18px; }
.v2 { position: relative; }
.v2-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 82vh; margin: 0 auto; background: #0b0312; overflow: hidden;
  border: 2px solid var(--ink); box-shadow: 6px 7px 0 rgba(29, 38, 51, .18); outline-offset: 4px; }
.v2-stage:focus-visible { outline: 3px solid var(--pen); }
.v2-stage:fullscreen { max-height: none; aspect-ratio: auto; border: 0; }
.v2-stage canvas, .v2-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v2-poster { object-fit: cover; z-index: 1; }
.v2-poster[hidden] { display: none; }
.v2-play { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%) rotate(-2deg);
  display: flex; align-items: center; gap: 10px; padding: 14px 26px 14px 18px; cursor: pointer;
  font: 400 28px var(--hand); color: #fff; background: #ff2d95; border: 2px solid #fff;
  border-radius: 20px 7px 18px 7px / 7px 18px 7px 20px; box-shadow: 0 0 0 4px rgba(255, 45, 149, .35), 0 0 36px rgba(255, 45, 149, .8);
  transition: transform .15s ease; }
.v2-play[hidden] { display: none; }
.v2-play svg { width: 32px; height: 32px; fill: #ffd23f; }
.v2-play:hover { transform: translate(-50%, -50%) rotate(-2deg) scale(1.05); }
.v2-play:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
.v2-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.v2-seek { flex: 1; min-width: 120px; accent-color: #ff2d95; }
.v2-time { font: 500 12px var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 10ch; text-align: right; }
.v2-full[hidden] { display: none; }
.v2-note { font: 12px/1.5 var(--mono); color: var(--ink-2); margin: 10px 0 0; max-width: 80ch; }
.v2-nogl .v2-play { display: none; }
.reels-sec { margin-top: 26px; }
.reel-notes h3 { font-family: var(--serif-d); font-size: 20px; margin: 0 0 8px; }
.notes-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.notes-cols ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; line-height: 1.55; }
@media (max-width: 760px) {
  .v2-stage { aspect-ratio: 4 / 5; }
  .notes-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .v2-play { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-play, .v2-play:hover { transform: translate(-50%, -50%); }
}
/* ?capture: the stage alone, filling the window, for rendering a video file. */
.v2-capture body { visibility: hidden; }
.v2-capture .v2-stage { visibility: visible; position: fixed; inset: 0; width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border: 0; z-index: 9999; box-shadow: none; }
.v2-capture .v2-play, .v2-capture .v2-poster { display: none; }

/* ---- Evaluation A/B comparison ---- */
.eval-variant-bar { margin: 0 auto 34px; max-width: 1180px; padding: 13px 18px; border: 2px solid var(--ink); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 13px/1.4 var(--mono); }
.eval-variant-bar p, .eval-variant-bar nav { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 9px 15px; }
.eval-variant-bar strong { color: var(--red); text-transform: uppercase; letter-spacing: .08em; }
.eval-variant-bar span + span::before { content: "·"; margin-right: 15px; color: var(--ink-2); }
.eval-variant-bar a { color: var(--ink); text-underline-offset: 3px; }
.eval-variant-bar nav a:last-child { padding: 7px 10px; background: var(--yellow); text-decoration: none; }
.eval-compare { margin-top: 50px; }
.eval-compare > .prose { max-width: 78ch; }
.eval-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 34px; }
.eval-version-card { position: relative; padding: 28px; border: 2px solid var(--ink); background: var(--paper); box-shadow: 7px 8px 0 rgba(29, 38, 51, .18); }
.eval-version-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 9px; background: var(--red); }
.eval-version-b::before { background: var(--pen); }
.eval-version-card h3 { margin: 3px 0 22px; font: 400 clamp(30px, 4vw, 48px)/1 var(--serif-d); }
.eval-version-card dl { margin: 0 0 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.eval-version-card dl div { padding: 13px; background: var(--paper); }
.eval-version-card dt { margin-bottom: 4px; color: var(--ink-2); font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.eval-version-card dd { margin: 0; font: 700 18px/1.25 var(--sans); }
.eval-version-card > p:not(.kicker) { min-height: 4.8em; }
.eval-count-note { margin-top: 28px; padding: 17px 20px; border-left: 7px solid var(--yellow); background: rgba(246, 196, 83, .14); max-width: 92ch; }
@media (max-width: 760px) {
  .eval-variant-bar, .eval-variant-bar p { align-items: flex-start; }
  .eval-variant-bar { flex-direction: column; }
  .eval-compare-grid { grid-template-columns: minmax(0, 1fr); }
  .eval-version-card dl { grid-template-columns: minmax(0, 1fr); }
  .eval-version-card > p:not(.kicker) { min-height: 0; }
}
/* reels: the note linking to the AI pipeline write-up */
.page-head .pipe-note { width: 300px; margin-top: 22px; }
.page-head .pipe-note .big { font-size: 25px; }
.page-head .pipe-note .sub { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; margin-top: 6px; line-height: 1.4; }
/* strengths: the note on how the page was written */
.sf-made { display: block; max-width: 34em; margin: 26px 0 4px; padding: 22px 24px 18px; }
.sf-made .big { font-size: 24px; }
.sf-made .sub { display: block; font-family: var(--serif); font-weight: 400; font-size: 16.5px; line-height: 1.5; margin-top: 8px; }

/* ===================== Search =====================
   The magnifier tab at the end of the index tabs opens a legal pad over the
   page (js/search.js); results are index cards filed by kind. The same pad
   and cards sit inline on /search/. */
.topbar-in > nav { display: flex; align-items: flex-end; gap: 6px; }
.topbar-in > nav > .tabs { flex: 0 1 auto; }
.search-tab {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 11px 11px; margin-bottom: 0; text-decoration: none;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  border-radius: 9px 9px 0 0; background: var(--legal); color: var(--ink);
  box-shadow: inset 0 -8px 10px -8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transform: translateY(4px); transition: transform .18s ease;
}
.search-tab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.search-tab:hover, .search-tab:focus-visible, .search-tab[aria-current="page"] { transform: translateY(0); color: var(--ink); }
.search-tab[aria-current="page"] { background: var(--paper); }
.search-tab:focus-visible { outline-offset: -4px; }
@media (max-width: 760px) {
  .topbar-in > nav { flex-basis: 100%; padding-right: 10px; }
  .search-tab { width: 40px; padding: 6px 0 9px; }
  .search-tab .st-l { display: none; }
}

html.srch-open { overflow: hidden; }
.srch { position: fixed; inset: 0; z-index: 90; }
.srch, .srch-page {
  --s-paper: var(--paper); --s-card: var(--card); --s-ink: var(--ink); --s-ink-2: var(--ink-2);
  --s-legal: var(--legal); --s-line: rgba(64,120,168,.28); --s-rule: rgba(184,53,42,.5); --s-chip: var(--card); }
.srch[hidden] { display: none; }
.srch-backdrop { position: absolute; inset: 0; background: rgba(23, 33, 29, .72); }
.srch-dialog {
  position: relative; display: flex; flex-direction: column;
  width: min(780px, calc(100% - 32px)); max-height: calc(100vh - 9vh); max-height: calc(100dvh - 9vh);
  margin: 5vh auto 0; background: var(--s-paper); color: var(--s-ink);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  animation: srch-in .22s cubic-bezier(.3,1.3,.5,1);
}
@keyframes srch-in { from { opacity: 0; transform: translateY(14px) rotate(-.6deg); } to { opacity: 1; transform: none; } }
.srch-top { flex: none; padding: 26px 22px 0; }
/* the legal pad: red binding on top, two red margin rules, blue lines */
.srch-pad {
  position: relative; padding: 14px 16px 12px 58px;
  background-color: var(--s-legal);
  background-image: linear-gradient(90deg, transparent 40px, var(--s-rule) 40px 42px, transparent 42px 45px, var(--s-rule) 45px 47px, transparent 47px),
                    repeating-linear-gradient(transparent 0 31px, var(--s-line) 31px 32px);
  background-position: 0 0, 0 8px;
  box-shadow: 0 2px 0 #efe19a, 0 4px 0 #fff7c9, 0 14px 24px -14px rgba(0,0,0,.45);
}
.srch-pad::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 16px; background: #7b2f25; border-radius: 4px 4px 0 0; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.srch-label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-ink-2); margin: 0 0 2px; }
.srch-row { display: flex; align-items: center; gap: 10px; }
.srch-glass { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }
.srch-row input, .srch-form input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--s-ink, var(--ink));
  font-family: var(--hand); font-weight: 700; font-size: 30px; line-height: 44px; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none;
}
.srch-row input::placeholder, .srch-form input::placeholder { color: var(--pen); opacity: .55; font-weight: 400; }
.srch-row input:focus, .srch-form input:focus { outline: none; }
.srch-pad:focus-within { box-shadow: 0 0 0 3px var(--pen), 0 14px 24px -14px rgba(0,0,0,.45); }
.srch-row input::-webkit-search-cancel-button { -webkit-appearance: none; }
.srch-x { flex: none; border: 1px solid rgba(29,38,51,.35); background: var(--s-card); color: var(--s-ink); border-radius: 4px;
  font-family: var(--mono); font-size: 12px; padding: 3px 7px; cursor: pointer; }
.srch-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 14px 22px 0; }
.srch-chips { flex: none; display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.srch-chips:empty, .srch-status:empty { display: none; }
.srch-chip {
  border: 0; border-radius: 8px 8px 0 0; padding: 6px 10px 7px; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--c, var(--tab-8));
  box-shadow: inset 0 -6px 8px -6px rgba(0,0,0,.25); transform: translateY(3px); transition: transform .15s ease;
}
.srch-chip .n { font-weight: 600; opacity: .75; }
.srch-chip[aria-pressed="true"] { transform: none; font-weight: 600; box-shadow: inset 0 -3px 0 var(--ink); }
.srch-chip:hover:not([disabled]) { transform: none; }
.srch-chip[disabled] { opacity: .4; cursor: default; }
.k-all { --c: var(--card); } .k-course { --c: #f6c453; } .k-project { --c: #9ccbea; } .k-app { --c: #ffd96b; }
.k-talk { --c: #8ed3c7; } .k-news { --c: #f5b5c8; } .k-cv { --c: #cdb8e8; } .k-page { --c: #e9dfc4; }
.srch-status { flex: none; font-family: var(--mono); font-size: 12.5px; color: var(--s-ink-2, var(--ink-2)); margin: 4px 0 8px; min-height: 1.2em; }
.srch-list { overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 18px 2px; }
.srch .srch-list { flex: 1 1 auto; min-height: 0; }
.srch-group { margin: 0 0 18px; }
.srch-gh { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-family: var(--hand); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--s-ink, var(--ink)); }
.srch-gl { background: linear-gradient(transparent 55%, var(--c, var(--hl-yellow)) 55%); padding: 0 4px; }
.srch-gc { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--s-ink-2, var(--ink-2)); border: 1.5px solid currentColor; border-radius: 999px; padding: 0 7px; }
/* an index card: red head rule, blue lines */
.srch-card, .srch-more { margin: 0 0 10px; border-radius: 2px; cursor: pointer; }
.srch-card a {
  display: block; padding: 10px 14px 11px; text-decoration: none; color: var(--s-ink, var(--ink));
  background-color: var(--s-card, var(--card));
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 8px 14px -10px rgba(0,0,0,.4);
  border-left: 5px solid var(--c, var(--tab-8));
  transform: rotate(var(--r, 0deg)); transition: transform .15s ease, box-shadow .15s ease;
}
.srch-card[aria-selected="true"] a { transform: translateX(4px) rotate(0deg); box-shadow: 0 0 0 3px var(--pen), 0 10px 18px -10px rgba(0,0,0,.45); }
.srch-crumb { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--s-ink-2, var(--ink-2)); line-height: 1.3; }
.srch-t { display: block; font-family: var(--serif-d); font-size: 20px; line-height: 1.25; padding-bottom: 3px; border-bottom: 1.5px solid var(--s-rule, rgba(184,53,42,.5)); }
.srch-meta { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--red); margin-top: 2px; }
.srch-snip { display: block; font-size: 15px; line-height: 26px; color: var(--s-ink-2, var(--ink-2)); margin-top: 2px;
  background: repeating-linear-gradient(transparent 0 25px, var(--s-line, rgba(64,120,168,.2)) 25px 26px); }
.srch-card mark { color: var(--ink); transition: none; background-size: 100% 72%; }
.srch-more a { display: block; padding: 4px 6px; font-family: var(--mono); font-size: 13px; color: var(--pen); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.srch-more[aria-selected="true"] a { outline: 3px solid var(--pen); outline-offset: 1px; border-radius: 3px; }
.srch-empty:empty { display: none; }
.srch-empty { padding: 0 2px 16px; overflow-y: auto; }
.srch-try { margin: 6px 0 14px; }
.srch-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.srch-pill {
  border: 0; cursor: pointer; padding: 6px 12px 5px; background: var(--sticky); color: var(--ink);
  font-family: var(--hand); font-weight: 700; font-size: 18px; line-height: 1.1;
  box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 6px 10px -6px rgba(0,0,0,.4); transform: rotate(-1deg);
}
.srch-pill:nth-child(2n) { transform: rotate(1.2deg); background: var(--sticky-pink); }
.srch-pill:hover { transform: rotate(0) scale(1.04); }
.srch-pill.recent { background: var(--hl-blue); }
.srch-clear { border: 0; background: none; cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--s-ink-2, var(--ink-2)); text-decoration: underline; }
.srch-none { font-family: var(--hand); font-size: 26px; font-weight: 700; color: var(--red); margin: 6px 0 6px; }
.srch-none-sub { font-size: 16px; margin: 8px 0; color: var(--s-ink, var(--ink)); }
.srch-keys { flex: none; margin: 0; padding: 9px 22px 11px; border-top: 1px dashed rgba(29,38,51,.25); font-family: var(--mono); font-size: 11.5px; color: var(--s-ink-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.srch-keys kbd { font-family: var(--mono); font-size: 11px; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; }
.srch-keys a { margin-left: auto; color: var(--pen); }
@media (max-width: 760px) {
  .srch-dialog { width: 100%; max-height: none; height: 100%; margin: 0; }
  .srch-top { padding: 22px 12px 0; }
  .srch-pad { padding: 10px 10px 8px 40px; background-image: linear-gradient(90deg, transparent 24px, var(--s-rule) 24px 26px, transparent 26px 29px, var(--s-rule) 29px 31px, transparent 31px), repeating-linear-gradient(transparent 0 31px, var(--s-line) 31px 32px); }
  .srch-glass { width: 22px; height: 22px; }
  .srch-row { gap: 6px; }
  .srch-row input, .srch-form input { font-size: 23px; line-height: 40px; }
  .srch-body { padding: 12px 12px 0; }
  .srch-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; }
  .srch-chip { flex: none; }
  .srch-t { font-size: 18px; }
  .srch-snip { font-size: 14.5px; }
  .srch-keys { display: none; }
}
/* At night the pad is read under a desk lamp. */
@media (prefers-color-scheme: dark) {
  .srch { --s-paper: #1c2420; --s-card: #29322d; --s-ink: #efe8d6; --s-ink-2: #b9b3a2; --s-legal: #4a4423;
    --s-line: rgba(239,232,214,.12); --s-rule: rgba(231,120,108,.55); }
  .srch-dialog { --grid: rgba(239,232,214,.05); }
  .srch-pad { box-shadow: 0 2px 0 #3d381d, 0 4px 0 #5a5330, 0 14px 24px -14px rgba(0,0,0,.6); }
  .srch-row input::placeholder { color: #c9c1a0; opacity: .7; }
  .srch-glass { stroke: #f08f80; }
  .srch-meta { color: #f08f80; }
  .srch-x { border-color: rgba(239,232,214,.35); }
  .srch-keys { border-color: rgba(239,232,214,.2); }
  .srch-keys a, .srch-more a { color: #9fb8f2; }
  .srch-card[aria-selected="true"] a { box-shadow: 0 0 0 3px #9fb8f2, 0 10px 18px -10px rgba(0,0,0,.6); }
  .srch-more[aria-selected="true"] a { outline-color: #9fb8f2; }
  .srch .srch-card mark { color: #1d2633; }
  .srch .srch-none { color: #f08f80; }
  .srch .srch-gl { color: #1d2633; background: var(--c, var(--hl-yellow)); padding: 1px 7px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .srch-dialog { animation: none; }
  .srch-card a, .srch-chip, .search-tab { transition: none; }
}

/* /search/: the same pad inline, then every page as a plain list */
.srch-page { margin: 10px 0 30px; max-width: 820px; }
.srch-form .srch-pad { display: flex; align-items: center; gap: 10px; }
.srch-form .srch-label { font-family: var(--hand); font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 18px; }
.srch-form .btn { flex: none; font-size: 14px; padding: 6px 12px; }
.srch-page .srch-mount { margin-top: 18px; }
.srch-page .srch-list { overflow: visible; }
.srch-page:not(:focus-within) .srch-card[aria-selected="true"] a { transform: rotate(var(--r, 0deg)); box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 8px 14px -10px rgba(0,0,0,.4); }
.srch-all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 34px; }
.srch-all-g h3 { font-family: var(--hand); font-weight: 700; font-size: 23px; margin: 0 0 8px; }
.srch-all-g ul { margin: 0 0 16px; padding: 0; list-style: none; }
.srch-all-g li { font-size: 16.5px; line-height: 1.5; padding: 3px 0; border-bottom: 1px solid var(--rule); }
.srch-num { white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
@media (max-width: 760px) {
  .srch-form .srch-pad { padding-left: 40px; }
  .srch-form .btn { display: none; }
}

/* ---------- /connections/: the theme picker and the game's frame ----------
   The game itself is styled by css/connections.css (synced from the
   connections_demo repo). These are the site's sticky notes around it. */
.cx-themes { display: flex; flex-wrap: wrap; gap: 18px 16px; margin: 6px 0 30px; }
.cx-theme {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 196px; min-height: 96px; padding: 18px 16px 14px; cursor: pointer; text-align: left;
  border: 0; color: var(--ink); background: var(--bg, var(--sticky));
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 14px 20px -12px rgba(0,0,0,.42);
  transform: rotate(var(--rot, -2deg));
  transition: transform .2s ease, box-shadow .2s ease;
}
.cx-theme .tape.tc { width: 60px; height: 20px; margin-left: -30px; top: -11px; opacity: 0; transition: opacity .2s ease; }
.cx-theme .big { font-family: var(--hand); font-weight: 700; font-size: 25px; line-height: 1.02; }
.cx-theme .sub { font-family: var(--mono); font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.cx-theme:hover, .cx-theme:focus-visible { transform: rotate(0deg) translateY(-3px); }
.cx-theme[aria-pressed="true"] { transform: rotate(0deg) translateY(-4px) scale(1.04); box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 22px 26px -14px rgba(0,0,0,.5); }
.cx-theme[aria-pressed="true"] .tape.tc { opacity: 1; }
.cx-theme[aria-pressed="true"]::after { content: "playing"; position: absolute; right: 10px; bottom: 8px; font-family: var(--hand); font-size: 16px; color: var(--red); transform: rotate(-6deg); }
.cx-card { position: relative; max-width: 760px; background: var(--card); padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 18px 30px -16px rgba(0,0,0,.45); }
.cx-card .tape.tl { top: -12px; left: -22px; }
.cx-card .tape.tr { top: -10px; right: -24px; }
.cx-noscript { padding: 24px; margin: 0; }
@media (max-width: 760px) {
  .cx-themes { gap: 14px 10px; }
  .cx-theme { width: calc(50% - 5px); min-height: 84px; padding: 14px 12px 12px; }
  .cx-theme .big { font-size: 20px; }
  .cx-theme .sub { font-size: 11px; }
  .cx-theme[aria-pressed="true"]::after { font-size: 14px; right: 8px; bottom: 4px; }
  .cx-card { padding: 6px; margin: 0 calc(-1 * var(--pad-r) + 4px) 0 -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-theme, .cx-theme .tape.tc { transition: none; }
}