@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;
  --work:  #c98a3c;
  --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{
  background:var(--ink);color:var(--bg);
  padding:0.06em 0.22em 0.08em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  display:inline-block;
  -webkit-clip-path:inset(0);
  clip-path:inset(0);
  white-space:nowrap;
}
.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)}
}

/* ledger / project rows */
.ledger{
  display:flex;flex-direction:column;
  border-top:1px solid var(--rule);
}
.row{
  display:grid;
  grid-template-columns:42px 140px 1fr auto auto;
  gap:24px;padding:18px 0;
  border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.row.gap-above{margin-top:32px}
.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;
}
.num{
  color:var(--muted);
  font-size:10.5px;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  align-self:center;
}
.label{
  color:var(--muted);
  text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;
  align-self:center;
}
.value{
  font-size:clamp(20px,2.4vw,30px);
  font-weight:400;letter-spacing:-0.015em;
  color:var(--ink);line-height:1;
}
.value.empty{color:var(--muted)}

.value-cell{
  display:flex;flex-direction:column;gap:7px;
  align-self:center;min-width:0;
}
span.value{
  display:inline-flex;align-items:baseline;gap:14px;
  width:fit-content;
}
.tags{
  color:var(--muted);
  font-size:11.5px;letter-spacing:.02em;
  line-height:1.3;
}
span.value a{
  color:inherit;position:relative;
}
span.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);
}
span.value a:focus-visible::after{width:100%}
span.value a:active::after{width:100%}
@media (hover:hover){
  span.value a:hover::after{width:100%}
  span.value:hover .arr{transform:translate(4px,-2px);color:var(--ink)}
}
span.value .arr{
  font-size:0.62em;color:var(--live);
  transition:transform .25s ease, color .2s ease;
}
span.value:focus-within .arr{transform:translate(4px,-2px);color:var(--ink)}

.meta-col{
  color:var(--muted);
  font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;
  align-self:center;
  font-variant-numeric:tabular-nums;
  text-align:right;
  display:inline-flex;align-items:center;gap:8px;justify-self:end;
}
.meta-col .tick{
  width:6px;height:6px;border-radius:50%;
  background:var(--live);display:inline-block;
}
.meta-col.idle .tick{background:var(--rule)}
.meta-col.wip .tick{background:var(--work)}

/* ── 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 h1 .hl,
  .intro h1 .tail{display:block}
  .intro h1 .hl{margin:0.18em 0;max-width:100%;overflow:hidden}
  .intro p{font-size:14.5px;max-width:34ch}
  .row{
    grid-template-columns:32px 1fr;
    grid-template-areas:
      "num   label"
      ".     value"
      ".     meta";
    gap:6px 16px;padding:20px 0;
  }
  .row .num{grid-area:num}
  .row .label{grid-area:label;align-self:baseline}
  .row .value-cell{grid-area:value;margin-top:4px;align-self:start}
  .row .meta-col{grid-area:meta;justify-self:start;text-align:left;margin-top:6px}
  .row .date{grid-area:meta;justify-self:end;text-align:right;margin-top:6px}
  span.value a{padding:4px 0;min-height:32px;display:inline-flex;align-items:center}
  span.value a::after{bottom:-2px}
  .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}
}