/* ============================================================
   Tufte + Tokyo Night theme  (colors lifted from herdr.dev)
   ============================================================ */

:root{
  --bg:#e1e2e7; --surface:#d8d9e0; --surface-2:#c4c8da; --code-bg:#c4c8da;
  --text:#1f2f66; --muted:#68709a; --accent:#2e7de9; --hairline:#b6bbd1; --heading:#1f2f66; --avatar-bg:#1f2f66;
}
html[data-theme="dark"]{
  --bg:#1a1b26; --surface:#202331; --surface-2:#24283b; --code-bg:#24283b;
  --text:#a9b1d6; --muted:#7e88b8; --accent:#7aa2f7; --hairline:#2a2e42; --heading:#c0caf5; --avatar-bg:#7aa2f7;
}

*{box-sizing:border-box;}
html{font-size:16px;}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased;
  transition:background .2s ease,color .2s ease;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{color:var(--heading);font-weight:600;line-height:1.25;letter-spacing:-0.01em;}
em{font-style:italic;}
hr{border:none;border-top:0.5px solid var(--hairline);margin:2rem 0;}
code{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--code-bg);color:var(--heading);padding:.12em .4em;border-radius:4px;font-size:.82em;}
pre{font-family:'JetBrains Mono',ui-monospace,monospace;background:var(--surface-2);
  border:0.5px solid var(--hairline);border-radius:8px;padding:1rem 1.1rem;overflow:auto;font-size:.82rem;line-height:1.6;}
pre code{background:none;padding:0;color:var(--text);font-size:1em;}
img{max-width:100%;height:auto;border-radius:8px;}

/* ---- Layout: nav | content ---- */
.layout{display:grid;grid-template-columns:16rem minmax(0,1fr);min-height:100vh;}
.sidebar{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  background:var(--surface);border-right:0.5px solid var(--hairline);padding:1.7rem 1.35rem;}
.main{padding:2.6rem clamp(1.1rem,3vw,2.75rem);}

/* ---- Sidebar ---- */
.brand{display:flex;align-items:center;gap:.65rem;margin-bottom:.4rem;text-decoration:none;}
.brand:hover{text-decoration:none;}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--avatar-bg);color:var(--bg);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.05rem;flex:0 0 auto;}
.brand-name{font-weight:600;color:var(--heading);font-size:1rem;display:block;}
.brand-sub{color:var(--muted);font-size:.78rem;display:block;margin-top:.1rem;}
.nav-note{font-size:.72rem;color:var(--muted);font-style:italic;margin:1rem 0 .2rem;opacity:.85;}
.navgroup{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin:1.15rem 0 .35rem;font-weight:600;}
.navlink{display:block;padding:.16rem 0;color:var(--text);font-size:.92rem;}
.navlink:hover{color:var(--accent);text-decoration:none;}
.navlink.active{color:var(--accent);font-weight:500;}
.navlink.muted{color:var(--muted);}
.sidebar-foot{margin-top:1.8rem;padding-top:1rem;border-top:0.5px solid var(--hairline);
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;}
.sidebar-foot a{color:var(--muted);font-size:.8rem;}
.theme-toggle{margin-left:auto;background:transparent;border:0.5px solid var(--hairline);
  color:var(--muted);border-radius:6px;padding:.25rem .5rem;font:inherit;font-size:.75rem;cursor:pointer;}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent);}

/* ---- Article: Tufte text column + right margin ---- */
.article{max-width:68rem;margin:0;counter-reset:sn;}
.post-meta{color:var(--muted);font-size:.82rem;margin:.4rem 0 1.6rem;}
.article > h1{font-size:2rem;margin:0;}
.article p,.article h2,.article h3,.article ul,.article ol,.article blockquote,.article .post-meta,.article > h1,.article pre,.article table,.article .arithmatex{
  width:62%;max-width:44rem;}
.marginnote mjx-container[display="true"]{text-align:center;}
.marginnote img{display:block;margin-left:auto;margin-right:auto;max-width:90%;border-radius:0;}
.article table{border-collapse:collapse;font-size:.9rem;}
.article th,.article td{border:0.5px solid var(--hairline);padding:.35rem .6rem;text-align:left;}
.article thead th{background:var(--surface);color:var(--heading);}
blockquote{border-left:2px solid var(--accent);margin:1.4rem 0;padding:.2rem 0 .2rem 1rem;color:var(--muted);font-style:italic;}

.sidenote,.marginnote{float:right;clear:right;width:34%;max-width:20rem;margin-bottom:1rem;text-align:center;
  font-size:.78rem;line-height:1.5;color:var(--muted);position:relative;}
.sidenote-number{counter-increment:sn;}
.sidenote-number::after{content:counter(sn);font-size:.68em;vertical-align:super;color:var(--accent);margin-left:1px;font-weight:600;}
.sidenote::before{content:counter(sn) " ";font-size:.78em;vertical-align:super;color:var(--accent);font-weight:600;}

figure{margin:1.8rem 0;width:100%;}
figcaption{color:var(--muted);font-size:.78rem;margin-top:.5rem;}

/* ---- Index / listing pages ---- */
.listing{max-width:46rem;}
.listing h2{font-size:1.05rem;margin:2rem 0 .6rem;padding-bottom:.3rem;border-bottom:0.5px solid var(--hairline);}
.listing ul{list-style:none;padding:0;margin:0;}
.listing li{display:flex;gap:.9rem;padding:.32rem 0;align-items:baseline;}
.listing .yr{color:var(--muted);font-size:.82rem;flex:0 0 3rem;font-variant-numeric:tabular-nums;}
.listing .it{flex:1;}
.listing .venue{color:var(--muted);font-size:.82rem;}

/* ---- Responsive ---- */
@media (max-width:1040px){
  .article p,.article h2,.article h3,.article ul,.article ol,.article blockquote,.article .post-meta,.article > h1,.article pre,.article table,.article .arithmatex{width:100%;}
  .sidenote,.marginnote{float:none;width:auto;margin:.7rem 0;display:block;background:var(--surface);
    border-left:2px solid var(--accent);padding:.55rem .8rem;border-radius:0 6px 6px 0;}
}
@media (max-width:820px){
  .layout{grid-template-columns:1fr;}
  .sidebar{position:static;height:auto;border-right:none;border-bottom:0.5px solid var(--hairline);}
}

/* ---- Syntax highlighting: Tokyo Night (switches with light/dark) ---- */
:root{
  --syn-comment:#6f76a0; --syn-keyword:#7847bd; --syn-func:#2e7de9; --syn-string:#587539;
  --syn-number:#b15c00; --syn-type:#007197; --syn-name:#3760bf; --syn-op:#006a83; --syn-punct:#6172b0;
}
html[data-theme="dark"]{
  --syn-comment:#565f89; --syn-keyword:#bb9af7; --syn-func:#7aa2f7; --syn-string:#9ece6a;
  --syn-number:#ff9e64; --syn-type:#2ac3de; --syn-name:#c0caf5; --syn-op:#89ddff; --syn-punct:#9aa5ce;
}
.highlight{background:transparent;}
.highlight .c,.highlight .ch,.highlight .cm,.highlight .cp,.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--syn-comment);font-style:italic;}
.highlight .k,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr{color:var(--syn-keyword);}
.highlight .kt{color:var(--syn-type);}
.highlight .nf,.highlight .fm,.highlight .na{color:var(--syn-func);}
.highlight .nb,.highlight .bp,.highlight .nc,.highlight .nn,.highlight .ne{color:var(--syn-type);}
.highlight .nd{color:var(--syn-keyword);}
.highlight .nv,.highlight .vc,.highlight .vg,.highlight .vi{color:var(--syn-name);}
.highlight .no{color:var(--syn-number);}
.highlight .s,.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--syn-string);}
.highlight .m,.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .il,.highlight .mo{color:var(--syn-number);}
.highlight .o,.highlight .ow{color:var(--syn-op);}
.highlight .p{color:var(--syn-punct);}