:root{
    /* paper + ink, single mode, no dark variant: this site is meant to look printed, not lit */
    --bg:#f3eee1;
    --panel:#ece4d1;
    --panel-2:#e3d9c2;
    --line:#c7bba0;
    --text:#1e1b16;
    --text-dim:#4b4436;
    --text-faint:#8a806a;
    --amber:#8b4a26;
    --amber-dim:#8b4a2620;
    --teal:#35506b;
    --teal-dim:#35506b1c;
    --mono:'Courier Prime', 'Courier New', monospace;
    --sans:'EB Garamond', Georgia, serif;
    --display:'Cormorant Garamond', Georgia, serif;
    --hand:'Caveat', cursive;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);}
  body{
    font-family:var(--sans);
    font-size:18px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(ellipse at 20% 0%, #ffffff22 0%, transparent 60%),
      radial-gradient(ellipse at 100% 100%, #00000008 0%, transparent 55%);
  }
  ::selection{ background:var(--amber-dim); }

  a{ color:var(--teal); }

  .wrap{
    max-width:640px;
    margin:0 auto;
    padding:28px 20px 90px;
  }

  header.masthead{
    border-bottom:1px solid var(--line);
    padding-bottom:18px;
    margin-bottom:22px;
  }
  .kicker{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.02em;
    color:var(--text-faint);
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
  }
  .kicker a{color:var(--text-faint); text-decoration:underline; text-decoration-color:var(--line);}
  h1.title{
    font-family:var(--display);
    font-size:2.7rem;
    font-weight:600;
    font-style:italic;
    line-height:1.15;
    margin:0 0 10px;
    color:var(--text);
  }
  .subtitle{
    color:var(--text-dim);
    font-size:1.08rem;
    max-width:56ch;
  }

  /* ---- ink illustrations: hand-drawn SVG line art that draws itself once, then sits still ---- */
  .hero-anim{
    margin-top:22px;
  }
  .ink-illust{
    display:block;
    width:100%;
    max-width:340px;
    height:auto;
    overflow:visible;
  }
  .ink-illust path, .ink-illust circle, .ink-illust ellipse{
    fill:none;
    stroke:var(--text);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:var(--len, 600);
    stroke-dashoffset:var(--len, 600);
    animation:inkDraw 2.4s cubic-bezier(.35,.05,.25,1) forwards;
    animation-delay:var(--delay, 0s);
  }
  .ink-illust .ink-faint{ stroke:var(--text-faint); stroke-width:1.1; }
  .ink-illust .ink-accent{ stroke:var(--amber); }
  .ink-illust .ink-dot.ink-accent{ fill:var(--amber); }
  .ink-illust .ink-dot{
    fill:var(--text);
    stroke:none;
    animation:none;
    opacity:0;
    animation:inkDot .5s ease forwards;
    animation-delay:var(--delay, 0s);
  }
  @keyframes inkDraw{ to{ stroke-dashoffset:0; } }
  @keyframes inkDot{ from{ opacity:0; } to{ opacity:1; } }
  @media (prefers-reduced-motion: reduce){
    .ink-illust path, .ink-illust circle, .ink-illust ellipse{ animation:none; stroke-dashoffset:0; }
    .ink-illust .ink-dot{ animation:none; opacity:1; }
  }
  .hero-anim-label{
    font-family:var(--hand);
    font-size:20px;
    color:var(--text-faint);
    max-width:32ch;
    margin-top:2px;
    display:inline-block;
    transform:rotate(-0.6deg);
  }

  .mode-row{
    margin-top:14px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .pill{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--text-dim);
    border:1px solid var(--line);
    padding:4px 10px;
    border-radius:0;
    background:transparent;
    cursor:pointer;
    user-select:none;
  }
  .pill.active{ border-color:var(--teal); color:var(--teal); }

  nav.toc{
    margin:22px 0 32px;
    border:1px solid var(--line);
    border-radius:0;
    background:var(--panel);
  }

  nav.side-toc{
    display:none;
    position:fixed;
    top:120px;
    left:calc(50vw - 560px);
    width:190px;
    max-height:70vh;
    overflow-y:auto;
  }
  nav.side-toc .side-toc-title{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.04em;
    color:var(--text-faint);
    margin-bottom:10px;
  }
  nav.side-toc ol{
    list-style:none;
    margin:0; padding:0;
    border-left:1px solid var(--line);
  }
  nav.side-toc li{ margin:0; }
  nav.side-toc a{
    display:block;
    padding:6px 0 6px 14px;
    margin-left:-1px;
    border-left:1px solid transparent;
    font-family:var(--sans);
    font-size:13px;
    line-height:1.3;
    color:var(--text-faint);
    text-decoration:none;
    transition:color .15s ease, border-color .15s ease;
  }
  nav.side-toc a:hover{ color:var(--text-dim); }
  nav.side-toc a.active{
    color:var(--amber);
    border-left-color:var(--amber);
  }
  @media (min-width:1180px){
    nav.side-toc{ display:block; }
    nav.toc{ display:none; }
  }
  nav.toc .toc-title{
    padding:11px 14px;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--text-dim);
    border-bottom:1px solid var(--line);
  }
  nav.toc ol{
    margin:0; padding:2px 14px 14px 30px;
    font-size:14.5px;
  }
  nav.toc li{ margin-bottom:6px; }
  nav.toc a{ color:var(--text-dim); text-decoration:none; }
  nav.toc a:hover{ color:var(--teal); }

  section.sec{
    margin-bottom:38px;
    scroll-margin-top:16px;
  }
  h2.sec-title{
    font-family:var(--display);
    font-size:1.6rem;
    font-weight:600;
    font-style:italic;
    color:var(--text);
    margin:0 0 6px;
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  h2.sec-title .num{ color:var(--text-faint); font-weight:400; font-family:var(--mono); font-size:0.95rem; font-style:normal; }
  h3.sub-title{
    font-family:var(--display);
    font-size:1.2rem;
    font-style:italic;
    color:var(--text);
    margin:22px 0 8px;
    font-weight:600;
  }
  p{ margin:0 0 14px; max-width:64ch; }
  ul.plain{ margin:0 0 14px; padding-left:22px; max-width:64ch; }
  ul.plain li{ margin-bottom:8px; }
  .lead{ color:var(--text-dim); font-size:0.96rem; margin-bottom:18px; }

  .term{
    color:var(--text);
    border-bottom:1.5px dotted var(--amber);
    cursor:pointer;
    padding:0 1px;
    transition:background .15s ease;
  }
  .term.tight{ white-space:nowrap; }
  .term:hover{ background:var(--amber-dim); }
  .term.open{ background:var(--amber-dim); border-bottom-style:solid; }

  .note{
    display:inline-block;
    width:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .28s ease;
    margin:0;
    vertical-align:top;
  }
  .note.open{ display:block; width:auto; margin:8px 0 16px; }
  .note-inner{
    border-left:2px solid var(--teal);
    background:var(--panel);
    padding:11px 14px;
    border-radius:0;
    font-size:0.93rem;
    color:var(--text-dim);
  }
  .note-inner .tag{
    display:block;
    font-family:var(--mono);
    font-size:11px;
    color:var(--teal);
    margin-bottom:5px;
    letter-spacing:.02em;
  }
  .note-inner b{ color:var(--text); font-weight:600; }

  .formula-box{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:0;
    padding:14px 16px;
    margin:14px 0 18px;
    font-family:var(--mono);
    font-size:0.92rem;
    color:var(--text);
    overflow-x:auto;
    white-space:nowrap;
  }
  .formula-box .lbl{
    display:block;
    font-size:10.5px;
    color:var(--text-faint);
    margin-bottom:6px;
    white-space:normal;
  }

  .derivation-box{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:0;
    padding:14px 16px;
    margin:14px 0 18px;
    font-family:var(--mono);
    font-size:0.85rem;
    color:var(--text);
    overflow-x:auto;
    white-space:pre;
    line-height:1.9;
  }
  .derivation-box .lbl{
    display:block;
    font-size:10.5px;
    color:var(--text-faint);
    margin-bottom:8px;
    white-space:normal;
  }
  .derivation-box .step-n{ color:var(--amber); }

  .diagram-box{
    border:1px solid var(--line);
    border-radius:0;
    background:var(--panel);
    padding:14px 10px 12px;
    margin:14px 0 18px;
    text-align:center;
  }
  .diagram-box .lbl{
    display:block;
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--text-faint);
    margin-bottom:8px;
    text-align:left;
  }
  .diagram-box svg{ max-width:100%; height:auto; display:block; margin:0 auto; }
  .diagram-box .dg-note{
    font-size:11px;
    color:var(--text-faint);
    margin-top:8px;
    text-align:left;
  }

  .math-box{
    border:1px solid var(--line);
    border-radius:0;
    background:var(--panel);
    padding:16px 14px;
    margin:14px 0 18px;
    overflow-x:auto;
  }
  .math-box .lbl{
    display:block;
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--text-faint);
    margin-bottom:10px;
  }
  .math-box math{
    color:var(--text);
    font-size:1.15rem;
  }
  .math-box math + math{ margin-top:12px; }
  .math-box math .wmat{ color:var(--amber); }
  .math-box .wmat-label{
    font-family:var(--mono);
    color:var(--amber);
    font-weight:600;
  }
  .math-box .eq-cap{
    font-size:11.5px;
    color:var(--text-dim);
    margin:6px 0 16px;
    line-height:1.5;
  }
  .math-box .eq-cap b{ color:var(--text); }
  .math-box .plain{
    margin-top:12px;
    padding-top:10px;
    border-top:1px dashed var(--line);
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--text-faint);
    white-space:pre;
    overflow-x:auto;
  }

  table.acc{
    width:100%;
    border-collapse:collapse;
    font-size:0.85rem;
    margin:14px 0 18px;
    font-family:var(--mono);
  }
  table.acc caption{
    text-align:left;
    font-family:var(--sans);
    font-size:0.8rem;
    color:var(--text-faint);
    margin-bottom:6px;
    caption-side:top;
  }
  table.acc th, table.acc td{
    border-bottom:1px solid var(--line);
    padding:7px 8px;
    text-align:left;
    white-space:nowrap;
  }
  table.acc th{ color:var(--text-faint); font-weight:500; font-size:0.75rem; }
  table.acc td.num{ color:var(--teal); }
  .acc-scroll{ overflow-x:auto; margin:14px 0 18px; }

  .shapes-note{
    font-family:var(--mono);
    font-size:11px;
    color:var(--text-dim);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:0;
    padding:9px 11px;
    margin:-8px 0 16px;
    line-height:1.7;
  }
  .shapes-note .stag{
    display:block;
    font-family:var(--mono);
    font-weight:400;
    font-size:11px;
    color:var(--text-faint);
    letter-spacing:.01em;
    margin-bottom:4px;
  }

  .callout{
    border:1px solid var(--line);
    background:var(--panel-2);
    border-radius:0;
    padding:12px 14px;
    font-size:0.9rem;
    color:var(--text-dim);
    margin:14px 0;
  }
  .callout .tag{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--amber);
    display:block;
    margin-bottom:4px;
  }

  .takeaway-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin:14px 0 6px;
  }
  .tk-item{
    border:1px solid var(--line);
    border-radius:0;
    padding:11px 13px;
    background:var(--panel);
    font-size:0.9rem;
    color:var(--text-dim);
  }
  .tk-item b{ color:var(--text); }

  .gridviz{
    border:1px solid var(--line);
    border-radius:0;
    background:var(--panel);
    padding:13px 14px 14px;
    margin:6px 0 18px;
  }
  .gv-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    flex-wrap:wrap;
    gap:4px 10px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--text-faint);
    margin-bottom:2px;
  }
  .gv-head .gv-shape{ color:var(--teal); }
  .gv-triple{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin:4px 0 2px;
  }
  .gv-mat-label{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--text-faint);
    margin:8px 0 5px;
  }
  .gv-mat-label:first-child{ margin-top:0; }
  .gv-op{
    font-family:var(--mono);
    font-size:15px;
    color:var(--text-faint);
    text-align:center;
    padding:2px 0;
  }
  .gv-grid{
    display:inline-grid;
    gap:3px;
  }
  .gv-cell{
    width:30px; height:26px;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:0;
    font-family:var(--mono);
    font-size:9.5px;
    color:var(--text-dim);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    transition:background .12s, border-color .12s, color .12s;
  }
  .gv-cell.result{ cursor:pointer; }
  .gv-cell.result:hover{ border-color:var(--teal); }
  .gv-cell.src{ border-color:var(--teal); background:var(--teal-dim); color:var(--text); }
  .gv-cell.sel{ border-color:var(--amber); background:var(--amber-dim); color:var(--text); }
  .gv-cell.computed{ background:var(--amber); border-color:var(--amber); color:var(--panel); }
  .gv-scale-note{
    font-size:10.5px;
    color:var(--text-faint);
    margin:8px 0 0;
  }
  .gv-hint{
    font-size:11.5px;
    color:var(--text-faint);
    margin:8px 0 0;
    font-style:italic;
  }
  .gv-breakdown{
    max-height:0;
    overflow:hidden;
    transition:max-height .22s ease;
  }
  .gv-breakdown.open{ margin-top:10px; }
  .gv-bd-inner{
    padding-top:10px;
    border-top:1px dashed var(--line);
  }
  .gv-bd-label{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--text);
    margin-bottom:6px;
    word-break:break-word;
  }
  .gv-bd-label b{ color:var(--amber); }
  .gv-cell-sum{
    font-family:var(--mono);
    font-size:12px;
    color:var(--text);
    margin-top:8px;
  }
  .gv-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
    padding-top:11px;
    border-top:1px solid var(--line);
  }
  .gv-formula{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--text-dim);
    line-height:1.5;
  }
  .gv-total-num{ color:var(--amber); font-weight:600; }
  .gv-count-label{
    display:block;
    color:var(--text-faint);
    font-size:11px;
    margin-bottom:3px;
  }
  .gv-tally-btn{
    font-family:var(--mono);
    font-size:11px;
    border:1px solid var(--teal);
    color:var(--teal);
    background:transparent;
    padding:6px 11px;
    border-radius:0;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
  }
  .gv-tally-btn:active{ background:var(--teal-dim); }
  .worked-example{
    border:1px solid var(--teal);
    background:var(--teal-dim);
    border-radius:0;
    padding:12px 14px;
    font-size:0.87rem;
    color:var(--text-dim);
    margin:14px 0 20px;
    font-family:var(--mono);
    line-height:1.7;
  }
  .worked-example .tag{
    font-family:var(--sans);
    font-size:12.5px;
    color:var(--text);
    font-weight:600;
    display:block;
    margin-bottom:6px;
    font-style:normal;
  }

  footer.foot{
    margin-top:44px;
    padding-top:18px;
    border-top:1px solid var(--line);
    font-size:0.82rem;
    color:var(--text-faint);
    font-family:var(--mono);
  }
  footer.foot a{ color:var(--text-faint); }

  .progress{
    position:fixed;
    top:0; left:0; height:2px;
    background:var(--teal);
    width:0%;
    z-index:50;
    transition:width .1s linear;
  }

  @media (max-width:420px){
    body{ font-size:15.5px; }
    h1.title{ font-size:1.4rem; }
    .formula-box{ font-size:0.82rem; }
  }

/* ---- site-wide additions (nav, cards, portfolio), same tokens as the artifact above ---- */

.site-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.02em;
  color:var(--text-faint);
  margin-bottom:18px;
}
.site-nav .brand{ color:var(--text-dim); }
.site-nav .links{ display:flex; gap:16px; }
.site-nav a{ color:var(--text-faint); text-decoration:underline; text-decoration-color:var(--line); }
.site-nav a:hover, .site-nav a.current{ color:var(--teal); text-decoration-color:var(--teal); }

.role-line{
  font-family:var(--mono);
  font-size:0.95rem;
  color:var(--teal);
  margin:2px 0 14px;
}

.link-row{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.link-row a.pill{ text-decoration:none; }

h3.block-title{
  font-family:var(--display);
  font-style:italic;
  font-size:1.35rem;
  font-weight:600;
  color:var(--text);
  margin:38px 0 14px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
}

.work-item{ margin-bottom:20px; }
.work-item .when{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--text-faint);
}
.work-item h4{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  margin:3px 0 5px;
  color:var(--text);
}
.work-item ul{ margin:6px 0 0; padding-left:18px; }
.work-item li{ margin-bottom:5px; color:var(--text-dim); font-size:0.95rem; }

.post-card{
  display:block;
  border:1px solid var(--line);
  border-radius:0;
  background:var(--panel);
  padding:16px 18px;
  margin-bottom:14px;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s ease;
}
.post-card:hover{ border-color:var(--teal); }
.post-card .when{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--text-faint);
}
.post-card h3{
  font-family:var(--mono);
  font-size:1.05rem;
  color:var(--text);
  margin:6px 0 6px;
}
.post-card p{ color:var(--text-dim); font-size:0.93rem; margin:0; }

footer.foot{ margin-top:44px; }