@font-face{font-family:"Figtree";font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/Figtree-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/Figtree-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Monochrome, white to black, with one accent taken from the cap on the
   photo. Tints are grey backgrounds that carry ink text, deep is the black
   card, on-accent is text on the full-strength accent. */
:root{
  --bg:#FFFFFF;
  --paper:#FFFFFF;
  --ink:#111111;
  --muted:#5A5A5A;
  --quiet:#8A8A8A;
  --line:#E5E5E5;
  --deep:#111111;
  --deep-fg:#FFFFFF;
  --accent:#B4202E;
  --accent-deep:#7E1220;
  --accent-soft:#E04C5A;
  --on-accent:#FFFFFF;
  --tint-1:#F7F7F7;
  --tint-2:#EFEFEF;
  --tint-3:#E3E3E3;
  --sans:"Figtree",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:Menlo,Consolas,"Liberation Mono",monospace;
  --r:24px;
  --r-sm:14px;
  --gap:24px;
  --col:1160px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--quiet)}
a:hover{text-decoration-color:var(--accent)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--deep);color:var(--deep-fg);padding:8px 16px;border-radius:0 0 var(--r-sm) 0;z-index:10}
.skip:focus{left:0}
img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Buttons, chips, pills */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--bg);font-weight:600;font-size:17px;line-height:1;padding:18px 28px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,translate .15s;border:0;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--accent);color:var(--on-accent);translate:0 -1px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.btn.ghost.light{color:var(--deep-fg);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--deep-fg) 50%,transparent)}
.btn.ghost.light:hover{background:var(--deep-fg);color:var(--deep)}
.btn.small{padding:12px 20px;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;transition:background .15s,border-color .15s,translate .15s;color:var(--ink);font-family:inherit}
.chip:hover{background:var(--tint-2);border-color:var(--ink);translate:0 -1px}
.chip .note{font-weight:400}
.pill{display:inline-block;padding:7px 12px;border-radius:999px;font-weight:700;font-size:14px;line-height:1;white-space:nowrap}
.pill.hot{background:var(--accent);color:var(--on-accent)}
.pill.soft{background:var(--tint-3)}
.pill.mono{font-family:var(--mono);font-weight:500;font-size:13px;background:var(--line)}
.tag{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1;padding:5px 8px;border-radius:999px;background:var(--tint-3);color:var(--ink);vertical-align:middle;white-space:nowrap}
.tag.lang{background:var(--line)}
.dim{color:var(--quiet)}
.note{color:var(--muted);font-size:15px}
.eyebrow{margin:0 0 16px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.kicker{margin:0 0 12px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}

/* Top bar and reading progress */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);transform-origin:left;scale:var(--p,0) 1;z-index:6;pointer-events:none}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:24px;max-width:var(--col);margin:0 auto;padding:16px 24px;background:var(--bg);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top .brand{font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none;margin-right:auto}
.top nav{display:flex;gap:4px}
.top nav a{text-decoration:none;font-weight:600;font-size:15px;padding:8px 14px;border-radius:999px;color:var(--muted);transition:background .15s,color .15s}
.top nav a:hover{background:var(--paper);color:var(--ink)}
.top nav a.on{background:var(--ink);color:var(--bg)}
@media (max-width:760px){.top nav{display:none}.top{gap:12px}}

main{max-width:var(--col);margin:0 auto;padding:0 24px}

/* Hero */
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--gap);align-items:center;background:var(--tint-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(32px,6vw,80px) clamp(32px,6vw,80px) 0;margin:8px 0 var(--gap)}
.hero .eyebrow{color:var(--accent)}
h1{font-size:clamp(42px,6.4vw,80px);line-height:.98;letter-spacing:-.036em;font-weight:800;margin:0 0 24px;text-wrap:balance}
h1 .w{display:inline-block;animation:up .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*70ms)}
@keyframes up{from{opacity:0;transform:translateY(.5em) rotate(2deg)}to{opacity:1;transform:none}}
.sub{font-size:clamp(18px,1.7vw,22px);line-height:1.45;margin:0 0 32px;max-width:36ch;text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-art{position:relative;justify-self:end;width:min(100%,380px)}
.hero-photo{position:relative;margin:0;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--accent);transition:scale .4s cubic-bezier(.2,.7,.2,1)}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.hero-art:hover .hero-photo{scale:1.03}
.ticker{grid-column:1/-1;margin:clamp(24px,4vw,48px) calc(-1*clamp(32px,6vw,80px)) 0;padding:14px 0;border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent);overflow:hidden;position:relative}
.ticker .track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.ticker span{padding-right:48px;font-weight:700;font-size:15px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
.ticker:hover .track{animation-play-state:paused}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:24px;text-align:center}
  .hero-text{display:flex;flex-direction:column;align-items:center}
  .hero-art{order:-1;justify-self:center;width:min(60%,220px);margin:8px auto 48px}
  .hero .actions{justify-content:center}
  .hero-art .cloud{inset:-30%;width:160%;height:160%}
}

/* Dot clouds: one SVG per cloud, every dot drifting on its own clock, and the
   hero one leaning away from the pointer, big dots more than small ones */
.cloud{position:absolute;pointer-events:none}
.cloud circle{fill:var(--accent);transform-box:fill-box;transform-origin:center;animation:drift 8s ease-in-out infinite alternate}
.hero-art .cloud{inset:-38%;width:176%;height:176%}
.hero-art .cloud circle{translate:calc(var(--mx,0)*var(--k)*-14px) calc(var(--my,0)*var(--k)*-14px);transition:translate .6s cubic-bezier(.2,.7,.2,1)}
.band .cloud{right:-8%;top:-14%;width:min(60%,560px);height:auto;opacity:.55}
.band>:not(.cloud){position:relative}
@keyframes drift{from{transform:translate(-4px,3px) scale(.85)}to{transform:translate(4px,-4px) scale(1.15)}}

/* Three doors */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:0 0 clamp(64px,8vw,112px)}
.door{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 28px 64px;border-radius:var(--r);text-decoration:none;transition:translate .15s;overflow:hidden}
.door::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,var(--ink) 14%,transparent) 1.6px,transparent 2px);background-size:14px 14px;-webkit-mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 55%);mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 55%)}
.door>*{position:relative}
.door:hover{translate:0 -3px}
.door .k{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.door .v{color:var(--ink);opacity:.75;font-size:16px}
.door .arrow{position:absolute;right:20px;bottom:20px;width:40px;height:40px;border-radius:999px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:20px;font-weight:600;transition:translate .2s,background .2s,color .2s}
.door:hover .arrow{translate:4px 0;background:var(--accent);color:var(--on-accent)}
@media (max-width:760px){.doors{grid-template-columns:1fr}.door{padding-bottom:28px;padding-right:80px}}

/* Marquee of every stage, doubled so the loop is seamless */
.marquee{overflow:hidden;margin:-8px -24px 40px;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;width:max-content;animation:marquee 70s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{padding-right:48px;font-size:clamp(30px,4.2vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.1;white-space:nowrap}
.marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--ink)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* One accent, three tints, shared by doors, stats and tiles */
.t1,.card.t1{background:var(--tint-1)}
.t2,.card.t2{background:var(--tint-2)}
.t3,.card.t3{background:var(--tint-3)}

/* Sections */
.sec{padding:0 0 clamp(64px,8vw,112px)}
h2{font-size:clamp(36px,5vw,56px);line-height:1;letter-spacing:-.036em;font-weight:800;margin:0 0 32px;text-wrap:balance}
h3{font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:56px 0 16px}
h3:first-of-type{margin-top:0}
.lead{font-size:20px;color:var(--muted);margin:0 0 32px;max-width:60ch;text-wrap:pretty}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.card.t1,.card.t2,.card.t3,.door,.stat,.next{border:1px solid var(--line)}
.card.dark{position:relative;background:var(--deep);color:var(--deep-fg);border-color:var(--deep)}
.card.dark::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(360px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.card.dark:hover::before{opacity:1}
.card.dark>*{position:relative}
.card.dark a{text-decoration-color:color-mix(in srgb,var(--deep-fg) 40%,transparent)}
.card.dark a:hover{text-decoration-color:var(--accent-soft)}
.card.dark figcaption,.card.dark .note{color:color-mix(in srgb,var(--deep-fg) 65%,transparent)}

/* Who: the layers as slabs, narrow on top, wide at the engine */
.who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.kv{display:grid;grid-template-columns:auto 1fr;gap:14px 24px;margin:0}
.kv dt{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-top:4px}
.kv dd{margin:0}
.layers{margin:0;padding:28px 28px 24px}
.stack{list-style:none;margin:0;padding:0}
.stack li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 20px;padding:18px 24px;border-radius:20px;color:var(--ink);margin-top:-12px;transition:translate .2s;box-shadow:0 -6px 0 rgba(0,0,0,.3),0 0 0 1px var(--line)}
.stack li:hover{translate:0 -6px;z-index:5}
.stack li:nth-child(1){margin:0 12% 0;z-index:4;background:var(--paper)}
.stack li:nth-child(2){margin-inline:8%;z-index:3;background:var(--tint-1)}
.stack li:nth-child(3){margin-inline:4%;z-index:2;background:var(--tint-2)}
.stack li:nth-child(4){z-index:1;background:var(--tint-3)}
.stack li a{text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.stack li a:hover{text-decoration-color:var(--ink)}
.stack li.you .l-stack::after{content:"You";display:inline-block;margin-left:10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);vertical-align:middle}
.across{margin-top:16px;padding:18px 24px;border-radius:20px;background:var(--accent);color:var(--on-accent);display:grid;grid-template-columns:auto 1fr;gap:2px 20px}
.across a{text-decoration-color:rgba(255,255,255,.5)}
.across a:hover{text-decoration-color:var(--on-accent)}
.l-name{grid-row:1/3;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.6;padding-top:4px;min-width:10ch}
.l-stack{font-weight:800;font-size:18px;letter-spacing:-.01em}
.l-did{font-size:15px;opacity:.85}
.layers figcaption{margin-top:20px;font-size:14px}
@media (max-width:820px){.who{grid-template-columns:1fr}.kv{grid-template-columns:1fr;gap:4px}.kv dd{margin-bottom:12px}.stack li,.across{grid-template-columns:1fr}.l-name{grid-row:auto}.stack li:nth-child(1),.stack li:nth-child(2),.stack li:nth-child(3){margin-inline:0}.stack li:nth-child(1){margin-top:0}}

/* Talks */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:0 0 var(--gap)}
.stat{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:var(--r)}
.stat::after{content:"";position:absolute;right:0;bottom:0;width:55%;height:100%;background-image:radial-gradient(circle,color-mix(in srgb,var(--ink) 14%,transparent) 1.8px,transparent 2.2px);background-size:14px 14px;-webkit-mask-image:radial-gradient(circle at 100% 100%,#000 10%,transparent 65%);mask-image:radial-gradient(circle at 100% 100%,#000 10%,transparent 65%)}
.stat>*{position:relative}
.stat .n{font-size:clamp(56px,7vw,96px);font-weight:800;line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stat.t3 .n{color:var(--accent)}
.stat .l{font-weight:600;font-size:17px;opacity:.8}
@media (max-width:640px){.stats{grid-template-columns:1fr}.stat{flex-direction:row;align-items:baseline;gap:16px}}

/* The map: dotted land, arcs drawn from home once in view, a button per city */
.mapcard{margin:0 0 56px;padding:28px 28px 24px}
.wmap{display:block;width:100%;height:auto;margin:0 0 20px;overflow:hidden}
.wmap .land{fill:url(#dots)}
.wmap #dots circle{fill:color-mix(in srgb,var(--deep-fg) 30%,transparent)}
.wmap .arc{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-opacity:.55;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.mapcard.seen .arc{stroke-dashoffset:0}
.wmap .city circle{fill:var(--accent-soft);transition:fill .2s,r .2s}
.wmap .city .halo{fill:var(--accent);opacity:.18;animation:halo 2.6s ease-in-out infinite}
.wmap .city:nth-of-type(3n) .halo{animation-delay:-.9s}
.wmap .city:nth-of-type(3n+1) .halo{animation-delay:-1.7s}
@keyframes halo{0%,100%{opacity:.12;transform:scale(1)}50%{opacity:.35;transform:scale(1.25)}}
.wmap .city .halo{transform-box:fill-box;transform-origin:center}
.wmap text{font:700 13px var(--sans);fill:var(--deep-fg);text-anchor:middle;opacity:0;transition:opacity .2s;pointer-events:none;paint-order:stroke;stroke:var(--deep);stroke-width:4px;stroke-linejoin:round}
.wmap .city:hover text,.wmap .city:focus-visible text,.wmap .city.on text{opacity:1}
.wmap .city:hover circle:not(.halo),.wmap .city:focus-visible circle:not(.halo),.wmap .city.on circle:not(.halo){fill:var(--deep-fg)}
.wmap.lit .city:not(.on){opacity:.3}
.legend{display:flex;flex-wrap:wrap;gap:8px}
.legend .chip{background:color-mix(in srgb,var(--deep-fg) 8%,transparent);border-color:color-mix(in srgb,var(--deep-fg) 14%,transparent);color:var(--deep-fg)}
.legend .chip:hover,.legend .chip:focus-visible,.legend .chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.legend .chip b{font-weight:800;opacity:.6}
.legend .chip:hover b{opacity:1}

/* The next stage, with a live countdown and a calendar file */
.next{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:32px;align-items:center;border-radius:var(--r);padding:clamp(24px,4vw,40px);margin:0 0 56px}
.next .eyebrow{color:var(--accent);margin-bottom:10px}
.next .k{margin:0 0 8px;font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.next .v{margin:0 0 20px;opacity:.85}
.next .actions{gap:10px}
.count{display:flex;gap:12px}
.count div{display:flex;flex-direction:column;align-items:center;min-width:92px;padding:16px 12px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line)}
.count b{font-size:clamp(34px,4vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--accent)}
.count span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-top:6px}
html:not(.js) .count span,html:not(.js) .count div+div{display:none}
@media (max-width:760px){.next{grid-template-columns:1fr}.count div{min-width:0;flex:1}}

/* Every past talk on one line, wide screens only */
.tl{margin:0 0 24px;padding:24px 28px 20px}
@media (max-width:760px){.tl{display:none}}
.tl-scroll{overflow-x:auto;overflow-y:hidden;padding:36px 0 30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tl-in{position:relative;height:40px;min-width:900px;margin:0 20px}
.tl-in::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line)}
.tick{position:absolute;left:var(--x);top:50%;translate:-50% 0;padding-top:26px;font-size:12px;font-weight:700;color:var(--quiet);letter-spacing:.06em}
.tick i{position:absolute;left:50%;top:-6px;width:2px;height:12px;background:var(--line);translate:-50% 0}
.tl .dot{position:absolute;left:var(--x);top:50%;width:calc(var(--r)*2);height:calc(var(--r)*2);translate:-50% -50%;border-radius:50%;background:var(--accent-soft);border:2px solid var(--paper);transition:scale .15s,background .15s;z-index:1}
.tl .dot:hover,.tl .dot:focus-visible{scale:1.35;background:var(--accent);z-index:2}
.tl .dot[style*="--r:12px"]{background:var(--accent)}
.tl figcaption{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.dot-key{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent-soft)}
.dot-key.mid{width:14px;height:14px}
.dot-key.big{width:18px;height:18px;background:var(--accent)}
tr.flash td{animation:flash 1.6s ease-out}
@keyframes flash{from{background:var(--tint-3)}to{background:transparent}}

/* Tables */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{text-align:left;font-weight:700;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.08em;padding:0 20px 12px 0}
td{padding:16px 20px 16px 0;border-top:1px solid var(--line);vertical-align:top}
td:last-child,th:last-child{padding-right:0}
td.d{white-space:nowrap;color:var(--muted);width:11ch;font-weight:600}
td.n{white-space:nowrap;text-align:right}
td.s{white-space:nowrap}
td.r{white-space:nowrap}
td.r .chip{margin-right:6px}
td.e{min-width:16ch;font-weight:600}
tbody tr{transition:background .15s}
.log tbody tr:hover{background:var(--paper)}
tbody tr:last-child td{border-bottom:1px solid var(--line)}
.log .t a{text-decoration-color:var(--line)}
.log .t a:hover{text-decoration-color:var(--accent)}
.board{margin:0 0 8px}
.board td{padding:20px 20px 20px 0;font-size:18px}
.board td.d{color:var(--ink);width:14ch}
.board tr.open td{background:var(--tint-1);border-color:transparent}
.board tr.open td:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm);padding-left:20px}
.board tr.open td:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0;padding-right:20px}
details.year{border-top:1px solid var(--line)}
details.year:last-of-type{border-bottom:1px solid var(--line)}
details.year summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;padding:20px 0;font-size:24px;font-weight:800;letter-spacing:-.02em}
details.year summary::-webkit-details-marker{display:none}
details.year summary::after{content:"+";margin-left:auto;width:36px;height:36px;border-radius:999px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font-size:22px;font-weight:500;transition:transform .2s,background .15s}
details.year[open] summary::after{content:"−";background:var(--ink);color:var(--bg);border-color:var(--ink)}
details.year summary:hover::after{background:var(--tint-2)}
details.year summary .note{font-weight:500}
details.year table{margin:0 0 24px}
details.year th{padding-top:4px}
details.year tbody tr:last-child td{border-bottom:0}

/* Security, as a timeline */
.timeline td.d{position:relative;padding-left:30px}
.timeline td.d::before{content:"";position:absolute;left:0;top:23px;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.timeline td.d::after{content:"";position:absolute;left:5px;top:37px;bottom:-16px;width:2px;background:var(--line)}
.timeline tr:last-child td.d::after{display:none}

/* Code */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.grid+.note{margin:12px 0 0}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:translate .15s}
.tile:hover{translate:0 -3px}
.tile .k{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.tile .v{font-size:16px;opacity:.8}
.tile .note{color:var(--ink);opacity:.6;margin-top:auto;padding-top:8px}
.tile .ghost{position:absolute;right:-4px;bottom:-26px;font-size:104px;font-weight:800;letter-spacing:-.06em;line-height:1;opacity:.12;pointer-events:none;transition:translate .3s,opacity .3s}
.tile:hover .ghost{translate:0 -8px;opacity:.2}
.tile.contrib{background:var(--paper);border:1px solid var(--line)}
.tile.contrib .n{font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--accent)}
.tile.contrib .bar{display:block;height:12px;width:calc(var(--v)/var(--max)*100%);min-width:12px;background-image:radial-gradient(circle,var(--accent) 3px,transparent 3.6px);background-size:12px 12px;background-repeat:repeat-x;margin:2px 0 6px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

/* Writing: a book you can almost pick up */
.book{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center;text-decoration:none;margin:0 0 40px;padding:clamp(28px,4vw,48px)}
.book .text{display:flex;flex-direction:column;gap:8px}
.book .eyebrow{margin:0 0 8px;color:var(--accent)}
.book .k{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1}
.book .v{font-size:18px;max-width:60ch;text-wrap:pretty}
.book .note{color:var(--ink);opacity:.7}
.cover{position:relative;width:clamp(120px,16vw,180px);aspect-ratio:3/4;background:var(--deep);color:var(--accent-soft);border-radius:4px 14px 14px 4px;padding:18px 18px 18px 26px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:14px 14px 0 rgba(0,0,0,.14);rotate:-5deg;transition:rotate .4s cubic-bezier(.2,.7,.2,1),translate .4s}
.cover::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.18)}
.cover .t{font-weight:800;font-size:clamp(18px,2vw,24px);line-height:1.05;letter-spacing:-.02em}
.cover .p{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;opacity:.7}
.book:hover .cover{rotate:0deg;translate:0 -6px}
@media (max-width:640px){.book{grid-template-columns:1fr}}

/* Contact */
.band{position:relative;overflow:hidden;background:var(--tint-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(32px,5vw,64px)}
.contact{display:flex;flex-direction:column;gap:20px;margin:0 0 40px}
.email{font-size:clamp(24px,4vw,44px);font-weight:800;letter-spacing:-.03em;text-decoration-color:var(--accent);overflow-wrap:anywhere}
.bios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin:0 0 40px}
.bios .card{position:relative}
.bios h3{margin:0 0 12px;font-size:18px;padding-right:90px}
.copy{position:absolute;top:22px;right:22px;font:inherit;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);cursor:pointer;transition:background .15s,color .15s}
.copy:hover{background:var(--accent);color:var(--on-accent)}
.copy.done{background:var(--accent);color:var(--on-accent)}
html:not(.js) .copy{display:none}
.bio{white-space:pre-wrap;font:inherit;font-size:15px;line-height:1.55;margin:0;user-select:all;color:var(--muted)}
@media (max-width:760px){.bios{grid-template-columns:1fr}}
.photo{margin:0;max-width:320px}
.photo img{display:block;width:100%;height:auto;border-radius:var(--r-sm)}
.photo figcaption{color:var(--muted);font-size:14px;margin-top:10px}

/* Footer */
.foot{background:var(--deep);color:var(--deep-fg);margin-top:clamp(32px,5vw,64px);padding:clamp(40px,6vw,72px) 24px}
.foot-in{max-width:var(--col);margin:0 auto}
.foot .big{margin:0 0 24px;font-size:clamp(44px,9.6vw,150px);font-weight:800;letter-spacing:-.05em;line-height:.9;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--deep-fg) 45%,transparent);white-space:nowrap;overflow:hidden}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:0 0 32px}
.meta{margin:0;color:color-mix(in srgb,var(--deep-fg) 65%,transparent);font-size:15px;display:flex;flex-wrap:wrap;gap:0 12px}
.meta a{text-decoration-color:color-mix(in srgb,var(--deep-fg) 40%,transparent)}
.meta span+span::before{content:"·";margin-right:12px}
.meta code{font:inherit;font-family:var(--mono);font-size:14px;color:var(--deep-fg);background:color-mix(in srgb,var(--deep-fg) 10%,transparent);padding:2px 8px;border-radius:6px}
.rev{font-size:14px;max-width:70ch}
.rev th{color:color-mix(in srgb,var(--deep-fg) 50%,transparent);padding-bottom:8px}
.rev td{padding:8px 16px 8px 0;border-color:color-mix(in srgb,var(--deep-fg) 12%,transparent);color:color-mix(in srgb,var(--deep-fg) 75%,transparent)}
.rev td.d{width:14ch;font-weight:600;color:var(--accent-soft)}
.rev tbody tr:hover{background:none}
.rev tbody tr:last-child td{border-bottom:0}

@media (max-width:700px){
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tr{padding:14px 0;border-top:1px solid var(--line)}
  td{border:0;padding:0 0 4px}
  tbody tr:last-child td{border:0}
  td.d,td.n{width:auto;text-align:left}
  td.e{min-width:0}
  .timeline td.d{padding-left:24px}
  .timeline td.d::before{top:6px}
  .timeline td.d::after{display:none}
  .board td{padding:0 0 4px;font-size:17px}
  .board tr.open{padding:16px;border-radius:var(--r-sm);background:var(--tint-2)}
  .board tr.open td,.board tr.open td:first-child,.board tr.open td:last-child{background:none;padding:0 0 4px;border-radius:0}
  .board tr.open td.s{padding-top:8px}
  .rev tr{border-color:color-mix(in srgb,var(--deep-fg) 12%,transparent)}
}

@media print{
  :root{--bg:#fff;--paper:#fff;--ink:#000;--tint-1:#fff;--tint-2:#fff;--tint-3:#fff;--deep:#fff;--deep-fg:#000}
  body{font-size:11pt;line-height:1.4}
  .top,.skip,.doors,.arrow,.marquee,.ticker,.cloud,.copy,.foot .big,.ghost,.progress,.tl,.count{display:none}
  .card,.hero,.band,.door,.stat,.tile,.stack li,.across,.next{border:1px solid #999}
  .card.dark,.foot{border:1px solid #999}
  a{text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";color:#555;font-size:9pt}
  .cover{rotate:0deg;box-shadow:none}
  .wmap .arc{stroke-dashoffset:0}
}

/* Cards rise as they enter the viewport, where the browser drives animations from scroll */
@supports (animation-timeline:view()){
  .door,.stat,.tile,.card,.book,.mapcard,.next{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  h1 .w,.cloud circle,.track,.wmap .halo,.door,.stat,.tile,.card,.book,.mapcard,.next,tr.flash td{animation:none}
  .wmap .arc{stroke-dashoffset:0}
}

/* Blog */
.posts{list-style:none;margin:0 0 16px;padding:0}
.posts li{display:grid;grid-template-columns:11ch 1fr;gap:4px 20px;padding:16px 0;border-top:1px solid var(--line)}
.posts li:last-child{border-bottom:1px solid var(--line)}
.posts time{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.posts a{font-weight:600;font-size:18px;text-decoration-color:var(--line)}
.posts a:hover{text-decoration-color:var(--accent)}
.posts .note{grid-column:2}
@media (max-width:700px){.posts li{grid-template-columns:1fr}.posts .note{grid-column:1}}
.post{max-width:72ch;margin:0 auto;padding-top:clamp(24px,4vw,56px)}
.post-head{margin:0 0 40px}
.post-head .kicker a{text-decoration:none}
.post-head h1{font-size:clamp(34px,4.6vw,56px);line-height:1.04;margin:0 0 20px}
.post-head .lead{margin:0}
.facts{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);gap:10px 24px}
.facts dd{display:flex;align-items:center;min-height:28px}
.facts code{font-family:var(--mono);font-size:14px;background:var(--tint-2);padding:4px 8px;border-radius:6px}
.prose{font-size:18px;line-height:1.65}
.prose>*{margin:0 0 1.2em}
.prose h2{font-size:clamp(26px,3vw,32px);line-height:1.15;letter-spacing:-.025em;font-weight:800;margin:2em 0 .6em}
.prose h3{font-size:clamp(20px,2.2vw,24px);margin:1.8em 0 .5em}
.prose h4{font-size:18px;margin:1.6em 0 .4em}
.prose h2 a,.prose h3 a{text-decoration:none}
.prose p,.prose li{text-wrap:pretty}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin:.3em 0}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--tint-2);padding:2px 6px;border-radius:6px}
.prose pre{background:var(--deep);color:var(--deep-fg);padding:20px 24px;border-radius:var(--r-sm);overflow:auto;font-size:14px;line-height:1.6;-webkit-overflow-scrolling:touch}
.prose pre code{display:block;background:none;padding:0;font-size:inherit;color:inherit}
.prose blockquote{margin:0 0 1.2em;padding:4px 0 4px 20px;border-left:3px solid var(--accent);color:var(--muted)}
.prose blockquote>*:last-child{margin-bottom:0}
.prose img{display:block;max-width:100%;height:auto;border-radius:var(--r-sm)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose table{font-size:16px;margin:0 0 1.6em}
.prose td,.prose th{padding:10px 16px 10px 0}
.prose strong{font-weight:700}
.prose kbd{font-family:var(--mono);font-size:.85em;border:1px solid var(--line);border-bottom-width:2px;padding:1px 6px;border-radius:6px}
.post-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.post-foot .note{margin:0}

/* Code, on the dark block: ink in white, strings and numbers in the accent,
   comments quiet, a diff in the two conventional colours. */
.chroma .c,.chroma .c1,.chroma .cm,.chroma .cp,.chroma .cs{color:#8A8A8A}
.chroma .k,.chroma .kd,.chroma .kn,.chroma .kr,.chroma .kt,.chroma .kc,.chroma .kp{color:#FFFFFF;font-weight:700}
.chroma .s,.chroma .s1,.chroma .s2,.chroma .sb,.chroma .sc,.chroma .sx,.chroma .sr,.chroma .se,.chroma .sh,.chroma .si,.chroma .sd{color:#F07C86}
.chroma .m,.chroma .mi,.chroma .mf,.chroma .mh,.chroma .mo,.chroma .mb,.chroma .il{color:#F07C86}
.chroma .nv,.chroma .vi,.chroma .vg,.chroma .vc{color:#D7D7D7}
.chroma .nf,.chroma .fm,.chroma .nc,.chroma .nn,.chroma .nb,.chroma .bp,.chroma .nd{color:#FFFFFF}
.chroma .nx,.chroma .na,.chroma .nt,.chroma .no,.chroma .nl{color:#E6E6E6}
.chroma .o,.chroma .ow,.chroma .p{color:color-mix(in srgb,#FFFFFF 62%,transparent)}
.chroma .gi{color:#8FD694}
.chroma .gd{color:#F07C86}
.chroma .gh,.chroma .gu{color:#8A8A8A;font-weight:700}
.chroma .err{color:inherit}