:root{
  --pink:#e6007e; --on-pink:#ffffff;
  --ink-1:#161616; --ink-2:#454545; --ink-3:#767676;
  --ground:#ffffff; --sunk:#f4f4f4;
  --edge:#dcdcdc; --edge-strong:#161616;
  --grid:rgba(230,0,126,.05); --tint:rgba(230,0,126,.08);
  --display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --pink:#ff4fa8; --on-pink:#111111;
    --ink-1:#ededed; --ink-2:#b4b4b4; --ink-3:#8c8c8c;
    --ground:#111111; --sunk:#1c1c1c;
    --edge:#2e2e2e; --edge-strong:#ededed;
    --grid:rgba(255,79,168,.06); --tint:rgba(255,79,168,.12);
  }
}
:root[data-theme=dark]{
  --pink:#ff4fa8; --on-pink:#111111;
  --ink-1:#ededed; --ink-2:#b4b4b4; --ink-3:#8c8c8c;
  --ground:#111111; --sunk:#1c1c1c;
  --edge:#2e2e2e; --edge-strong:#ededed;
  --grid:rgba(255,79,168,.06); --tint:rgba(255,79,168,.12);
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink-1);font-family:var(--font);font-size:17px;line-height:1.62;
  -webkit-text-size-adjust:100%;background-color:var(--ground);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px}
.wrap{max-width:46rem;margin-inline:auto;padding-inline:1.4rem}
a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--edge)}
a:hover{color:var(--pink);text-decoration-color:var(--pink)}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
img{max-width:100%;height:auto}

/* the annotation */
.tag{display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:400;
  line-height:1.5;letter-spacing:.02em;white-space:nowrap;text-transform:none;
  background:var(--pink);color:var(--on-pink);padding:.08rem .38rem;border-radius:2px}

/* masthead */
header.top{border-bottom:1px solid var(--edge-strong);background:var(--ground)}
.topbar{display:flex;align-items:baseline;gap:.6rem 1.2rem;flex-wrap:wrap;padding-block:.95rem}
.wordmark,nav.site{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.wordmark{text-decoration:none;font-weight:500}
nav.site{display:flex;gap:1.1rem;flex-wrap:wrap}
nav.site a{text-decoration:none;color:var(--ink-2);padding-bottom:.1rem}
nav.site a.on{color:var(--ink-1);border-bottom:2px solid var(--pink)}
nav.site a:hover{color:var(--pink)}
.grow{flex:1 1 auto}

main{padding-block:3rem 5rem}
h1,h2,h3,h4,h5,h6{line-height:1.2;text-wrap:balance;margin:0}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6.4vw,3.6rem);line-height:.98;margin:0 0 1rem}
h2{font-size:clamp(1.8rem,4.4vw,2.3rem);line-height:1.05;margin:2.8rem 0 .7rem}
h3{font-size:1.14rem;font-weight:600;margin:2.2rem 0 .5rem}
h4{font-size:1rem;font-weight:600;margin:1.8rem 0 .4rem}
h5,h6{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin:1.6rem 0 .3rem}
p{margin:0 0 1.05rem;text-wrap:pretty}
.empty{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);border-top:1px solid var(--edge-strong);padding-top:1rem;margin-top:1.4rem}
.lede{font-size:1.08rem;color:var(--ink-2);max-width:36rem;margin-bottom:1.6rem}

/* home: the name in its bounding box, the tagline as layers */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:start}
.name{position:relative;display:inline-block;margin:1.6rem 0 1.5rem}
.name .tag{position:absolute;top:-1.55rem;left:-7px}
.name h1{font-size:clamp(3rem,9vw,4.8rem);line-height:.9;margin:0;
  outline:1px solid var(--pink);outline-offset:6px}
.name h1 i{color:var(--ink-3)}
ul.layers{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;margin:0 0 1.2rem;padding:0;
  font-family:var(--mono);font-size:.72rem}
ul.layers li{margin:0;padding:.2rem .6rem;border:1px solid var(--edge-strong);border-radius:2px;background:var(--ground)}
ul.layers li.sel{background:var(--ink-1);color:var(--ground)}
.portrait{position:relative;justify-self:start;margin:1.8rem 6px 1.6rem 0}
.portrait img{display:block;width:9rem;height:9rem;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.portrait::after{content:'';position:absolute;inset:-6px;border:1px dashed var(--pink);pointer-events:none}
.portrait .tag{position:absolute;left:-6px;bottom:-1.7rem}

.facts{border-top:1px solid var(--edge-strong);margin-top:1.4rem}
.fact{display:grid;grid-template-columns:7.5rem 1fr;gap:.4rem 1.2rem;padding:1rem 0;border-bottom:1px solid var(--edge)}
.fact .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:.3rem}
.fact p{margin:0;color:var(--ink-2)}
.section-head{margin:3.4rem 0 .2rem}
.section-head h2{margin:0}

/* the writing list */
ol.posts{list-style:none;margin:1.4rem 0 0;padding:0;border-top:1px solid var(--edge-strong)}
ol.posts li{display:grid;grid-template-columns:6.2rem minmax(0,1fr) auto;gap:.2rem 1rem;
  align-items:baseline;margin:0;padding:.95rem 0;border-bottom:1px solid var(--edge)}
.post-date,.post-group{font-family:var(--mono);font-size:.68rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
ol.posts h3{margin:0;font-size:1.05rem;line-height:1.3}
ol.posts h3 a{text-decoration:none}
ol.posts p{margin:.2rem 0 0;color:var(--ink-2);font-size:.92rem}

/* an article */
article ul.meta{display:flex;gap:.45rem;flex-wrap:wrap;list-style:none;margin:0 0 1.6rem;padding:0;
  font-family:var(--mono);font-size:.66rem}
article ul.meta li{margin:0;padding:.15rem .5rem;border:1px solid var(--edge-strong);border-radius:2px;background:var(--ground)}
article ul.meta li.pink{border-color:var(--pink);color:var(--pink)}
article ul.meta a{text-decoration:none}
article h1{font-size:clamp(2.3rem,6vw,3.6rem)}
article .standfirst{font-family:var(--display);font-style:italic;font-size:1.4rem;line-height:1.35;color:var(--ink-2);margin:0 0 1.6rem}
.note{border-left:2px solid var(--pink);background:var(--tint);padding:.75rem 1rem;margin:0 0 2rem;font-size:.92rem;color:var(--ink-2)}
.note a{color:var(--pink)}
article img{display:block;border:1px solid var(--edge-strong);margin:1.4rem 0}
blockquote{margin:1.8rem 0;padding:.1rem 0 .1rem 1.2rem;border-left:2px solid var(--pink);
  font-family:var(--display);font-style:italic;font-size:1.3rem;line-height:1.4;color:var(--ink-2)}
blockquote p{margin:0}
hr{border:0;border-top:1px solid var(--edge-strong);margin:2.6rem 0}
ul,ol{padding-left:1.25rem}
li{margin-bottom:.35rem}
p.embed a{font-family:var(--mono);font-size:.76rem;color:var(--ink-3)}

/* code: numbered lines, and the language as the one annotation */
.code{position:relative;margin:1.8rem 0}
.code[data-lang]::before{content:attr(data-lang);position:absolute;top:-.72rem;right:.8rem;z-index:1;
  font-family:var(--mono);font-size:.62rem;line-height:1.5;background:var(--pink);color:var(--on-pink);
  padding:.08rem .38rem;border-radius:2px}
pre{margin:0;background:var(--ground);border:1px solid var(--edge-strong);padding:.95rem 0;overflow-x:auto;counter-reset:ln}
pre code{font-family:var(--mono);font-size:.78rem;line-height:1.7;background:none;padding:0;border:0}
pre code .l{display:block;position:relative;padding:0 1.1rem 0 3.3rem;white-space:pre}
pre code .l::before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:2.3rem;
  text-align:right;color:var(--ink-3);opacity:.6;font-variant-numeric:tabular-nums}
code{font-family:var(--mono);font-size:.84em;background:var(--sunk);border-radius:2px;padding:.05em .3em}

/* talks: each one an artboard */
ul.boards{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:2.4rem 1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr))}
.board{position:relative;margin:0}
.board .lbl{display:flex;justify-content:space-between;gap:.6rem;margin-bottom:.4rem;
  font-family:var(--mono);font-size:.64rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.board .lbl a{text-decoration:none}
.board img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;margin:0;
  border:1px solid var(--edge-strong);filter:grayscale(1);transition:filter .25s}
.board:hover img{filter:none}
.board .inst{position:absolute;top:1.25rem;right:-.4rem}
.board h3{margin:.7rem 0 .2rem;font-size:1rem;line-height:1.3}
.board .where{font-family:var(--mono);font-size:.66rem;color:var(--ink-3)}

/* 404: a frame with a missing layer */
.missing{position:relative;width:min(22rem,100%);aspect-ratio:4/3;margin:1.8rem 0 1.6rem;
  border:1px dashed var(--pink);display:grid;place-items:center;
  font-family:var(--display);font-size:clamp(4.5rem,16vw,7rem);line-height:1;color:var(--pink)}
.missing::before,.missing::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - .5px),var(--tint) calc(50% - .5px),var(--tint) calc(50% + .5px),transparent calc(50% + .5px))}
.missing::after{transform:scaleX(-1)}
.missing .tag{position:absolute;top:-1.5rem;left:-1px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 1.3rem;border-radius:2px;
  background:var(--ink-1);color:var(--ground);text-decoration:none;font-weight:600}
.btn:hover{background:var(--pink);color:var(--on-pink)}

footer.foot{border-top:1px solid var(--edge-strong);padding-block:1.6rem 3rem;background:var(--ground);
  font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}
footer.foot .row{display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline}
footer.foot a{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){.board img{transition:none}}

/* ── the phone ──────────────────────────────────────────────────────────
   The masthead is two rows on a phone — wordmark, then navigation that
   scrolls rather than wraps — and the tap targets grow to something a thumb can hit. The portrait moves above the
   name, and the post list drops to one column. */
@media (max-width:44rem){
  .wrap{padding-inline:1.15rem}
  .topbar{row-gap:.45rem;padding-block:.75rem}
  .grow{display:none}
  nav.site{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.site::-webkit-scrollbar{display:none}
  nav.site a{padding:.55rem 0;white-space:nowrap}
  nav.site{mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent)}
  main{padding-block:2.2rem 3.4rem}
  .hero{grid-template-columns:1fr;gap:0}
  .portrait{order:-1;justify-self:start;margin:.4rem 0 3.4rem 6px}
  .portrait img{width:6.5rem;height:6.5rem}
  .name h1{font-size:clamp(2.6rem,13vw,3.4rem)}
  .fact{grid-template-columns:1fr;padding:.85rem 0}
  ol.posts li{grid-template-columns:1fr auto;padding:.9rem 0}
  ol.posts .t{grid-column:1 / -1;grid-row:2}
  pre code{font-size:.72rem;line-height:1.6}
  pre code .l{padding:0 .9rem 0 2.7rem}
  pre code .l::before{width:1.8rem}
  article img{margin:1.1rem 0}
}