/* Brand direction B+C (brand/brand-board.html, docs/brand-system.md): cyan neon strike-through + neon "V." sign.
   One neon colour per page: sign and strikes share the same cyan (CMO switched from violet 2026-11-08). Type: Fixel by MacPaw (Ukraine, OFL). */
@font-face{font-family:"Fixel Display";src:url(https://cdn.jsdelivr.net/gh/MacPaw/Fixel@main/fonts/webfonts/FixelDisplay-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Fixel Display";src:url(https://cdn.jsdelivr.net/gh/MacPaw/Fixel@main/fonts/webfonts/FixelDisplay-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fixel Display";src:url(https://cdn.jsdelivr.net/gh/MacPaw/Fixel@main/fonts/webfonts/FixelDisplay-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fixel Text";src:url(https://cdn.jsdelivr.net/gh/MacPaw/Fixel@main/fonts/webfonts/FixelText-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fixel Text";src:url(https://cdn.jsdelivr.net/gh/MacPaw/Fixel@main/fonts/webfonts/FixelText-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:oklch(0.13 0.012 230);
  --s1:oklch(0.165 0.014 230);
  --line:oklch(0.26 0.016 230);
  --line-2:oklch(0.36 0.018 230);
  --ink:oklch(0.965 0.006 230);
  --ink-2:oklch(0.82 0.012 230);
  --ink-3:oklch(0.68 0.016 230);
  --dim:oklch(0.6 0.02 230);
  --neon:oklch(0.88 0.15 200);
  --neon-hot:oklch(0.72 0.14 225);
  --tube-off:oklch(0.29 0.045 215);
  --display:"Fixel Display",system-ui,sans-serif;
  --text:"Fixel Text",system-ui,sans-serif;
  --g:16px;
  --max:1200px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
@media (min-width:760px){:root{--g:40px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink-2);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--g)}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.24em;transition:text-decoration-color .3s var(--ease),color .3s var(--ease)}
a:hover{text-decoration-color:var(--neon)}
:focus-visible{outline:2px solid var(--neon);outline-offset:4px;border-radius:4px}
h1,h2,h3{margin:0;color:var(--ink);font-family:var(--display);text-wrap:balance}
p{margin:0;max-width:66ch;text-wrap:pretty}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* placeholders + draft notes (hidden until "Show draft notes") */
.todo{border:1px dashed var(--line-2);border-radius:6px;padding:0 .35em;color:var(--ink-3)}
.note{display:none;margin-top:16px;padding:10px 14px;max-width:72ch;border:1px dashed var(--line-2);border-radius:8px;color:var(--ink-3);font-size:.875rem;line-height:1.5}
body.notes .note{display:block}
body.notes .todo{border-color:var(--neon);color:var(--ink)}

/* header */
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding-block:24px}
.brand{font:500 1.0625rem/1.2 var(--display);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.site-nav ul{display:flex;flex-wrap:wrap;gap:2px 24px}
.site-nav a{display:inline-block;padding-block:6px;color:var(--ink-2);text-decoration:none;font-size:.9375rem}
.site-nav a:hover{color:var(--ink)}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-block:clamp(24px,6vw,88px) clamp(48px,7vw,96px)}
@media (min-width:960px){.hero{grid-template-columns:minmax(0,1fr) 320px;align-items:center;gap:56px}}
.sign-wrap{position:relative;order:-1;justify-self:start;width:clamp(128px,30vw,180px)}
@media (min-width:960px){.sign-wrap{order:0;justify-self:end;width:320px}}
.sign-wrap::before{content:"";position:absolute;inset:-35% -45%;background:radial-gradient(closest-side,oklch(0.88 0.15 200 / .22),transparent 72%);pointer-events:none}
.sign{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.sign svg{display:block;width:100%;height:auto;overflow:visible}
.sign .tube{fill:none;stroke:var(--tube-off);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.sign .dot.tube{fill:var(--tube-off);stroke:none}
.sign .lit path{fill:none;stroke:var(--neon);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.sign .lit circle{fill:var(--neon)}
.sign .lit{filter:drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 10px var(--neon)) drop-shadow(0 0 26px oklch(0.72 0.14 225 / .45))}
.sign:hover .lit{filter:drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 14px var(--neon)) drop-shadow(0 0 34px oklch(0.72 0.14 225 / .6))}

.routine{display:flex;flex-wrap:wrap;gap:.2em 1.1em;max-width:none;margin-bottom:clamp(20px,3vw,32px);font:300 clamp(1.125rem,.95rem + .8vw,1.75rem)/1.35 var(--display);color:var(--dim)}
.routine li{position:relative}
.routine li::after{content:"";position:absolute;left:-3%;right:-3%;top:55%;height:2px;border-radius:2px;background:var(--neon);box-shadow:0 0 8px var(--neon),0 0 2px var(--neon-hot);transform-origin:left}
.hero h1{font-weight:300;font-size:clamp(2.35rem,1.35rem + 4.3vw,5.5rem);line-height:1.02;letter-spacing:-.03em;max-width:15ch}
.hero h1 b{font-weight:600}
.hero h1 span{color:var(--ink-3)}
.lede{margin-top:clamp(24px,3vw,36px);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.55;max-width:50ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:36px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--bg);font:500 1rem/1 var(--text);text-decoration:none;transition:background .3s var(--ease)}
.btn:hover{background:oklch(0.9 0.05 200)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* signature sequence: lights on, then the routine gets struck. Default state = final state. */
@media (prefers-reduced-motion:no-preference){
  .sign .lit{animation:flicker 1.5s steps(1,end) .25s both}
  .sign-wrap::before{animation:halo 1s var(--ease) 1.3s both}
  .routine li::after{animation:strike .5s var(--ease) both}
  .routine li{animation:fade .6s var(--ease) both}
  .routine li:nth-child(1)::after{animation-delay:1.7s}.routine li:nth-child(1){animation-delay:1.9s}
  .routine li:nth-child(2)::after{animation-delay:1.85s}.routine li:nth-child(2){animation-delay:2.05s}
  .routine li:nth-child(3)::after{animation-delay:2s}.routine li:nth-child(3){animation-delay:2.2s}
  .routine li:nth-child(4)::after{animation-delay:2.15s}.routine li:nth-child(4){animation-delay:2.35s}
  .routine li:nth-child(5)::after{animation-delay:2.3s}.routine li:nth-child(5){animation-delay:2.5s}
}
/* replay: flipping .again swaps to identical keyframes under new names, which restarts them (pseudo-elements included) */
@media (prefers-reduced-motion:no-preference){
  .hero.again .sign .lit{animation-name:flicker2;animation-delay:.05s}
  .hero.again .sign-wrap::before{animation-name:halo2;animation-delay:1.1s}
  .hero.again .routine li::after{animation-name:strike2}
  .hero.again .routine li{animation-name:fade2}
}
@keyframes flicker{0%{opacity:0}9%{opacity:1}13%{opacity:.08}22%{opacity:1}26%{opacity:0}42%{opacity:1}46%{opacity:.35}55%,100%{opacity:1}}
@keyframes flicker2{0%{opacity:0}9%{opacity:1}13%{opacity:.08}22%{opacity:1}26%{opacity:0}42%{opacity:1}46%{opacity:.35}55%,100%{opacity:1}}
@keyframes halo{from{opacity:0}to{opacity:1}}
@keyframes halo2{from{opacity:0}to{opacity:1}}
@keyframes strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes strike2{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fade{from{color:var(--ink-2)}to{color:var(--dim)}}
@keyframes fade2{from{color:var(--ink-2)}to{color:var(--dim)}}

/* proof line */
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:860px){.proof{grid-template-columns:repeat(4,minmax(0,1fr))}}
.proof > div{padding:20px 16px 20px 0}
@media (min-width:860px){.proof > div + div{padding-left:24px;border-left:1px solid var(--line)}}
@media (max-width:859px){.proof > div:nth-child(n+3){border-top:1px solid var(--line)}}
.proof dt{font-size:.8125rem;color:var(--ink-3)}
.proof dd{margin-top:4px;font:300 1.5rem/1.2 var(--display);color:var(--ink);letter-spacing:-.015em;font-variant-numeric:tabular-nums}

/* sections */
.section{padding-block:clamp(72px,10vw,136px)}
.section + .section{border-top:1px solid var(--line)}
.section h2{font-weight:300;font-size:clamp(1.85rem,1.2rem + 2.4vw,3.25rem);line-height:1.06;letter-spacing:-.025em;max-width:20ch}
.section .intro{margin-top:18px;color:var(--ink-3)}
.row-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px}

/* what the system took off my desk */
.swaps{margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--line)}
.swap{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:24px 0;border-bottom:1px solid var(--line)}
@media (min-width:900px){.swap{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr) 200px;gap:40px;align-items:baseline}.swap > a{justify-self:end}}
.was{position:relative;justify-self:start;color:var(--dim);font-size:1rem}
.was::after{content:"";position:absolute;left:0;right:0;top:56%;height:1.5px;background:var(--neon);opacity:.85}
.now h3{font-weight:500;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
.now p{margin-top:6px;font-size:1rem}
.swap > a{justify-self:start;font-size:.9375rem;white-space:nowrap}

/* writing */
.posts{margin-top:40px;border-top:1px solid var(--line)}
.posts li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:22px 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){.posts li{grid-template-columns:150px minmax(0,1fr) 180px;gap:28px;align-items:baseline}}
.posts .t{font:500 1.1875rem/1.35 var(--display);color:var(--ink)}
.meta{font-size:.875rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* closing */
.closing h2{font-size:clamp(2.35rem,1.35rem + 4.3vw,5.5rem);line-height:1.02;letter-spacing:-.03em;max-width:14ch}
.closing h2 em{font-style:normal;font-weight:600;color:var(--neon);text-shadow:0 0 22px oklch(0.88 0.15 200 / .55)}
.sub-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:40px}
@media (min-width:900px){.sub-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}}
.sub{display:flex;flex-wrap:wrap;gap:10px}
.sub input{flex:1 1 220px;min-width:0;min-height:48px;padding:0 20px;border:1px solid var(--line-2);border-radius:999px;background:var(--s1);color:var(--ink);font:inherit}
.sub input::placeholder{color:var(--ink-3)}
.sub .btn{border:0;cursor:pointer}
.form-msg{flex-basis:100%;min-height:1.4em;font-size:.875rem;color:var(--ink-3)}

/* footer */
.site-foot{border-top:1px solid var(--line);padding-block:40px 56px;font-size:.875rem;color:var(--ink-3)}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 32px}
.site-foot a{color:var(--ink-2)}
.notes-btn{font:500 .8125rem/1 var(--text);color:var(--ink-2);background:none;border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;cursor:pointer}
.notes-btn:hover{color:var(--ink);border-color:var(--ink-3)}

/* ---- inner pages (os, now, about) ---- */
.mark{display:inline-flex;align-items:center;gap:10px}
.mark svg{width:22px;height:auto;overflow:visible}
.mark path{fill:none;stroke:var(--neon);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.mark circle{fill:var(--neon)}
.mark svg g{filter:drop-shadow(0 0 3px var(--neon))}
.site-nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--neon)}
.site-nav .soon{display:inline-block;padding-block:6px;font-size:.9375rem;color:var(--ink-3)}

.page-head{padding-block:clamp(32px,7vw,104px) clamp(40px,6vw,72px)}
.page-head h1{font-weight:300;font-size:clamp(2.35rem,1.35rem + 4.3vw,5.5rem);line-height:1.02;letter-spacing:-.03em;max-width:16ch}
.page-head h1 b{font-weight:600}
.page-head .lede{max-width:56ch}

/* generic strike = "the system removed / finished this" */
/* text-decoration (not a pseudo line) so the strike follows the text when it wraps onto two lines */
.struck{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--neon);text-decoration-thickness:1.5px;-webkit-text-decoration-skip:none;text-decoration-skip-ink:none}

/* os: how it fits */
.chain{max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:300 clamp(1.0625rem,1rem + .3vw,1.3rem)/1.3 var(--display);color:var(--ink)}
.chain i{font-style:normal;color:var(--neon)}
.chain span:first-child,.chain span:last-child{color:var(--ink-2)}

/* os: systems */
.systems{margin-top:clamp(40px,6vw,72px)}
.system{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 48px;padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.system:last-child{border-bottom:1px solid var(--line)}
@media (min-width:960px){.system{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr)}}
.system h2{font-weight:300;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);line-height:1.08;letter-spacing:-.02em}
.system .struck{display:inline-block;margin-top:12px;font-size:.9375rem}
.facts{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 32px}
@media (min-width:640px){.facts{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.facts dt{font-size:.8125rem;color:var(--ink-3);margin-bottom:6px}
.facts dd{color:var(--ink-2);font-size:1rem}
.facts code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.9em;color:var(--ink)}
.system:target h2{color:var(--neon)}

.code{margin-top:28px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--s1);color:var(--ink);font:400 .9375rem/1.7 ui-monospace,"Cascadia Mono",Consolas,monospace;overflow-x:auto;white-space:pre}
.code .c{color:var(--ink-3)}
.removed{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;font:300 clamp(1.25rem,1rem + 1vw,1.875rem)/1.3 var(--display)}

/* now */
.status{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-size:.9375rem;color:var(--ink-2)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon)}
.now-grid{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.now-grid > section{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 48px;padding:clamp(28px,4vw,40px) 0;border-bottom:1px solid var(--line)}
@media (min-width:860px){.now-grid > section{grid-template-columns:220px minmax(0,1fr)}}
.now-grid h2{font-weight:500;font-size:1.25rem;letter-spacing:-.01em}
.items li{font:300 clamp(1.125rem,1rem + .45vw,1.4rem)/1.4 var(--display);color:var(--ink)}
.items li + li{margin-top:10px}
.items .struck{display:inline}

/* about */
.about-head{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
@media (min-width:960px){.about-head{grid-template-columns:minmax(0,1fr) 280px;align-items:end;gap:64px}.about-head .photo{order:0;max-width:280px}}
.photo{order:-1;aspect-ratio:4/5;width:100%;max-width:160px;display:grid;place-items:center;border:1px dashed var(--line-2);border-radius:12px;color:var(--ink-3);font-size:.875rem}
body.notes .photo{border-color:var(--neon);color:var(--ink)}
.bio{margin-top:28px;font:300 clamp(1.25rem,1.05rem + .8vw,1.75rem)/1.4 var(--display);color:var(--ink);max-width:34ch}
.tbl{width:100%;margin-top:32px;border-collapse:collapse;font-size:.9375rem}
.tbl th{text-align:left;font-weight:500;font-size:.8125rem;color:var(--ink-3);padding:0 16px 12px 0;border-bottom:1px solid var(--line)}
.tbl td:first-child{white-space:nowrap}
.tbl td{padding:18px 16px 18px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
@media (max-width:719px){
  .tbl thead{display:none}
  .tbl tr{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
  .tbl td{padding:0;border:0}
  .tbl td[data-k]::before{content:attr(data-k) ": ";color:var(--ink-3)}
}
.built{margin-top:32px;border-top:1px solid var(--line)}
.built li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:22px 0;border-bottom:1px solid var(--line);font:300 1.25rem/1.4 var(--display);color:var(--ink)}
.built .n{color:var(--neon);font-weight:500;font-variant-numeric:tabular-nums}
.links li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.links{margin-top:28px;border-top:1px solid var(--line)}

/* writing hubs */
.hub h2{margin-bottom:0}
.hub .posts{margin-top:28px}
.hub:first-of-type{padding-top:clamp(24px,4vw,48px)}

/* stack */
.stack{border-top:1px solid var(--line)}
.stack li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:22px 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){.stack li{grid-template-columns:160px 240px minmax(0,1fr);gap:28px;align-items:baseline}}
.stack .t{font:500 1.1875rem/1.35 var(--display);color:var(--ink)}