@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("/fonts/jetbrains-mono-latin-variable.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:"JetBrains Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/jetbrains-mono-latin-variable.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:"JetBrains Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/jetbrains-mono-latin-variable.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;
}

:root{
  --bg:    #f4f4f1;
  --ink:   #0f0f0e;
  --muted: #8a8884;
  --rule:  #d8d6d0;
  --live:  #4a8a5c;
  --wip:   #c8a93a;
  --font:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:14px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* paper-grain overlay */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.06'/></svg>");
  mix-blend-mode:multiply;opacity:.7;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
::selection{background:var(--ink);color:var(--bg)}

.wrap{
  max-width:920px;
  margin:0 auto;
  padding:
    24px
    max(clamp(20px,4vw,40px), env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(clamp(20px,4vw,40px), env(safe-area-inset-left));
  min-height:100vh;
  min-height:100dvh;
  display:flex;flex-direction:column;
  position:relative;z-index:2;
}

/* ── header ── */
header{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:16px;border-bottom:1px solid var(--rule);
  font-size:12.5px;gap:16px;flex-wrap:wrap;row-gap:6px;
}
.mark{color:var(--ink);letter-spacing:-0.01em;display:inline-flex;align-items:center;gap:8px}
.mark .glyph{width:16px;height:16px;display:block;flex:0 0 16px}
.mark .glyph .bg{fill:var(--ink)}
.mark .glyph .fg{fill:var(--bg)}
header .meta{color:var(--muted);font-size:11.5px;letter-spacing:.02em}
.status{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);font-size:11.5px;letter-spacing:.02em;
}
.status .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--live);
  box-shadow:0 0 0 0 rgba(74,138,92,.55);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(74,138,92,.45)}
  50%{box-shadow:0 0 0 6px rgba(74,138,92,0)}
}

/* ── main ── */
main{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(28px,5vh,56px);
  padding:24px 0;
}

/* intro */
.intro h1{
  font-size:clamp(32px,4.6vw,56px);
  font-weight:500;letter-spacing:-0.02em;line-height:1.2;
  margin-bottom:16px;
}
.intro h1 .hl,
.intro h1 .tail{display:block}
.intro h1 .hl{
  background:var(--ink);color:var(--bg);
  padding:0.06em 0.22em 0.08em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  -webkit-clip-path:inset(0);
  clip-path:inset(0);
  white-space:nowrap;
  margin:0.18em 0;
  max-width:100%;
  overflow:hidden;
  width:max-content;
}
.intro p{
  color:var(--muted);max-width:52ch;font-size:14px;
}
.intro p a{
  color:var(--ink);border-bottom:1px solid var(--rule);
  padding-bottom:1px;transition:border-color .25s ease;
}
.intro p a:focus-visible,.intro p a:active{border-bottom-color:var(--ink)}
@media (hover:hover){
  .intro p a:hover{border-bottom-color:var(--ink)}
}

/* sections / tabs */
.sections{display:flex;flex-direction:column;gap:22px}
.tabs{
  display:flex;align-items:stretch;
  gap:0;
  padding:0 0 14px;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.tab{
  appearance:none;background:none;border:0;
  font-family:inherit;color:var(--muted);
  display:inline-flex;align-items:baseline;gap:10px;
  padding:4px 18px 4px 0;
  cursor:pointer;
  position:relative;
  transition:color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.tab + .tab{
  padding-left:18px;
  border-left:1px solid var(--rule);
}
.tab-idx{
  font-size:10.5px;letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
  font-weight:500;
  padding:1px 4px 2px;
  background:transparent;color:var(--muted);
  transition:background .3s ease, color .3s ease;
}
.tab-name{
  font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
}
.tab-meta{
  font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.tab.is-active{color:var(--ink)}
.tab.is-active .tab-idx{
  background:var(--ink);color:var(--bg);
}
.tab.is-active::after{
  content:"";position:absolute;
  left:0;right:18px;bottom:-15px;
  height:1px;background:var(--ink);
}
.tab + .tab.is-active::after{left:18px}

.tab.is-disabled{
  cursor:not-allowed;
  opacity:.6;
}
.tab.is-disabled:focus-visible{outline:1px dotted var(--muted);outline-offset:4px}

@media (hover:hover){
  .tab:not(.is-active):not(.is-disabled):hover{color:var(--ink)}
  .tab:not(.is-active):not(.is-disabled):hover .tab-idx{color:var(--ink)}
}

/* ledger / project rows */
.ledger{
  display:flex;flex-direction:column;
  border-top:1px solid var(--rule);
}
.row{
  display:grid;
  grid-template-columns:42px 1fr auto auto;
  gap:24px;padding:20px 0;
  border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.num{
  color:var(--muted);
  font-size:10.5px;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  align-self:center;
}
.value-cell{
  display:flex;flex-direction:column;gap:8px;
  align-self:center;min-width:0;
}
.value{
  font-size:clamp(20px,2.4vw,30px);
  font-weight:400;letter-spacing:-0.015em;
  color:var(--ink);line-height:1;
  display:inline-flex;align-items:baseline;gap:14px;
  width:fit-content;
}
.value.empty{color:var(--muted)}
.value a{color:inherit;position:relative}
.value a::after{
  content:"";position:absolute;left:0;bottom:-6px;
  width:0;height:1px;background:var(--ink);
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.value a:focus-visible::after,
.value a:active::after{width:100%}
@media (hover:hover){
  .value a:hover::after{width:100%}
  .value:hover .arr{transform:translate(4px,-2px);color:var(--ink)}
}
.value .arr{
  font-size:0.62em;color:var(--live);
  transition:transform .25s ease, color .2s ease;
}
.value:focus-within .arr{transform:translate(4px,-2px);color:var(--ink)}
.tags{
  color:var(--muted);
  font-size:11.5px;letter-spacing:.02em;
  line-height:1.3;
}
.note{
  color:var(--muted);
  font-size:11.75px;line-height:1.5;
  font-style:italic;
  max-width:54ch;
}
.date{
  color:var(--muted);
  font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  align-self:center;text-align:right;
  white-space:nowrap;
}
.meta-col{
  color:var(--muted);
  font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;
  align-self:center;
  display:inline-flex;align-items:center;gap:8px;justify-self:end;
}
.meta-col .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--rule);display:inline-block;
}
.meta-col.wip .dot{
  background:var(--wip);
  box-shadow:0 0 0 0 rgba(200,169,58,.55);
  animation:pulse-wip 2.6s ease-in-out infinite;
}
.meta-col.shipped .dot{background:var(--live)}
.meta-col.beta .dot{background:var(--live)}
.meta-col.idle .dot{background:var(--muted)}
@keyframes pulse-wip{
  0%,100%{box-shadow:0 0 0 0 rgba(200,169,58,.45)}
  50%{box-shadow:0 0 0 5px rgba(200,169,58,0)}
}

/* ── footer ── */
footer{
  padding-top:20px;
  font-size:12.5px;
  position:relative;z-index:2;
}
.foot-line{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--rule);
}
.foot-line .links{display:flex;gap:28px;flex-wrap:wrap}
.foot-line a{
  color:var(--ink);position:relative;
}
.foot-line a::after{
  content:"";position:absolute;left:0;bottom:-3px;
  width:0;height:1px;background:var(--ink);
  transition:width .3s ease;
}
.foot-line a:focus-visible::after,.foot-line a:active::after{width:100%}
@media (hover:hover){
  .foot-line a:hover::after{width:100%}
}
.foot-line .year{color:var(--muted)}

.colophon{
  margin-top:18px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.colophon .left{display:inline-flex;gap:10px;align-items:center}

/* reveal */
.reveal{opacity:0;transform:translateY(8px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.reveal.d1{animation-delay:.05s}
.reveal.d2{animation-delay:.18s}
.reveal.d3{animation-delay:.32s}
@keyframes rise{to{opacity:1;transform:none}}

@media (max-width:640px){
  .wrap{min-height:0;min-height:100dvh}
  main{gap:36px;padding:24px 0}
  .intro h1{
    font-size:clamp(24px,7.4vw,32px);
    line-height:1.18;
    margin-bottom:14px;
  }
  .intro h1 .hl{padding:0.04em 0.18em 0.06em}
  .intro p{font-size:14.5px;max-width:34ch}
  .sections{gap:20px}
  .tabs{padding-bottom:12px}
  .tab{padding:4px 12px 4px 0;gap:8px}
  .tab + .tab{padding-left:12px}
  .tab-name{font-size:11px;letter-spacing:.16em}
  .tab-meta{font-size:9.5px}
  .tab.is-active::after{right:12px;bottom:-13px}
  .tab + .tab.is-active::after{left:12px}
  .row{
    grid-template-columns:32px 1fr;
    grid-template-areas:
      "num   value"
      ".     meta";
    gap:6px 16px;padding:20px 0;
  }
  .row .num{grid-area:num;align-self:start}
  .row .value-cell{grid-area:value;align-self:start}
  .row .meta-col{grid-area:meta;justify-self:start;text-align:left;margin-top:8px}
  .row .date{grid-area:meta;justify-self:end;text-align:right;margin-top:8px}
  .value{font-size:clamp(22px,6vw,26px)}
  .value a{padding:4px 0;min-height:32px;display:inline-flex;align-items:center}
  .value a::after{bottom:-2px}
  .note{font-size:12px}
  .foot-line{flex-direction:column;gap:14px;align-items:flex-start}
  .foot-line .links{gap:18px}
  .foot-line a{padding:4px 0;display:inline-block}
  .foot-line a::after{bottom:1px}
  .colophon{font-size:9.5px;flex-direction:column;align-items:flex-start;gap:8px}
}

@media (max-width:380px){
  header{font-size:12px;gap:12px}
  .status{font-size:11px}
  .mark .glyph{width:14px;height:14px;flex:0 0 14px}
}

@media (prefers-reduced-motion: reduce){
  .reveal,.status .dot{animation:none}
  .reveal{opacity:1;transform:none}
}