/* ------------------------------------------------------------------
   The Least Significant Bit — style.css
   The entire design system, per "A Manual of Style".
   One file, no build step. If it cannot be expressed here, it
   does not happen.
   ------------------------------------------------------------------ */

/* --- faces · §3 — self-hosted, SIL OFL, latin subsets ------------- */
@font-face{font-family:"EB Garamond";src:url("fonts/eb-garamond-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("fonts/eb-garamond-latin-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("fonts/eb-garamond-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Mono";src:url("fonts/fira-mono-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Mono";src:url("fonts/fira-mono-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"UnifrakturMaguntia";src:url("fonts/unifrakturmaguntia-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* --- the palette · §2 ---------------------------------------------- */
:root{
  color-scheme:light dark;
  --paper:oklch(95.5% 0.015 90);
  --ink:oklch(30% 0.022 60);
  --faded:oklch(52% 0.025 70);
  --rule:oklch(87% 0.02 85);
  --wash:oklch(93.5% 0.015 88);
  --acc:oklch(44% 0.12 22);
  --tk-t:oklch(45% 0.05 265);
  --tk-s:oklch(47% 0.07 130);
  --tk-n:oklch(50% 0.09 65);
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --black:"UnifrakturMaguntia",serif;
  --mono:"Fira Mono","Courier New",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:oklch(22.5% 0.012 70);
    --ink:oklch(86.5% 0.02 85);
    --faded:oklch(63% 0.02 78);
    --rule:oklch(34% 0.015 70);
    --wash:oklch(26% 0.012 70);
    --acc:oklch(70% 0.1 32);
    --tk-t:oklch(75% 0.06 265);
    --tk-s:oklch(76% 0.08 130);
    --tk-n:oklch(79% 0.09 70);
  }
}

/* --- base · §1, §5 -------------------------------------------------- */
body{
  margin:0;min-height:100vh;box-sizing:border-box;
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:20px;line-height:1.62;
  padding:3rem 1.25rem 4rem;
  container-type:inline-size;
  text-rendering:optimizeLegibility;font-kerning:normal;
  -webkit-text-size-adjust:100%;
}
::selection{background:color-mix(in oklab,var(--acc) 25%,transparent)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

article{max-width:44rem;margin:0 auto;position:relative;counter-reset:sec noteref notebody listing tbl}

p{margin:0 0 1em;text-wrap:pretty}
article > p,section > p{text-indent:1.5em}
p.dropcap{text-indent:0}
a{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:color-mix(in oklab,var(--acc) 45%,transparent)}
a:hover{text-decoration-color:var(--acc)}
strong{font-weight:600}
em cite{font-style:normal}
ul,ol{margin:0 0 1.1em;padding-left:1.6rem}
li{margin:.35em 0}

/* --- masthead ------------------------------------------------------- */
.masthead{text-align:center;margin:0 0 2.4rem}
.mast-name{font-family:var(--black);font-weight:400;color:var(--ink);font-size:clamp(2.05rem,6.5cqw,3.05rem);line-height:1.12}
.mast-name a{color:inherit;text-decoration:none}
.mast-name a:hover{color:var(--acc)}
.masthead .meta{display:block;border-top:3px double var(--ink);border-bottom:1px solid var(--rule);margin-top:.9rem;padding:.42em 0}
.masthead-post .mast-name{font-size:1.4rem}
.masthead-post .meta{margin-top:.55rem;border-top-width:2px}

/* --- meta lines, titles · §3, §5 ------------------------------------ */
.meta{font-size:.8em;font-variant-caps:small-caps;letter-spacing:.1em;color:var(--faded)}
.post-title{font-family:var(--black);font-size:1.9em;font-weight:400;line-height:1.2;margin:0 0 .3em}
.title-block{text-align:center;margin-bottom:2rem}
.title-block .meta{margin:0}

/* --- headings & numbering · §8 -------------------------------------- */
h2,h3{line-height:1.25}
h2{font-size:1.28em;font-weight:600;font-variant-caps:small-caps;letter-spacing:.055em;margin:2.7em 0 .85em;counter-increment:sec;counter-reset:sub}
h2::before{content:counter(sec) ".";color:var(--acc);margin-right:.65ch}
h2 a{color:inherit;text-decoration:none}
h2 a::after{content:"§";color:var(--acc);opacity:.5;font-size:.7em;margin-left:.6ch;font-weight:400}
h2 a:hover::after{opacity:1}
h3{font-size:1.12em;font-weight:400;font-style:italic;margin:1.9em 0 .6em;counter-increment:sub}
h3::before{content:counter(sec) "." counter(sub);color:var(--acc);margin-right:.65ch;font-style:normal;font-size:.82em;letter-spacing:.04em}

/* --- prose furniture · §5 ------------------------------------------- */
p.dropcap::first-letter{font-family:var(--black);float:left;font-size:3.6em;line-height:.76;padding:.1em .12em 0 0;color:var(--acc)}
abbr{font-variant-caps:all-small-caps;letter-spacing:.07em;text-decoration:none}
blockquote{margin:1.4em 1.6rem 1.4em 2rem;font-size:.97em}
blockquote footer{text-align:right;font-style:italic;font-size:.88em;color:var(--faded);margin-top:.3em}
hr{border:0;margin:2.3em 0;text-align:center}
hr::after{content:"❦";color:var(--acc);font-size:1.05em}

/* --- tooltips · §6 (acronyms), §7 (relative dates) ------------------ */
abbr[aria-label],time[aria-label]{position:relative;cursor:help;text-decoration:underline dotted;text-decoration-thickness:1px;text-decoration-color:color-mix(in oklab,var(--faded) 75%,transparent);text-underline-offset:.2em}
abbr[aria-label]::after,time[aria-label]::after{
  content:attr(aria-label);position:absolute;left:50%;bottom:calc(100% + .5em);transform:translateX(-50%);
  width:max-content;max-width:14rem;background:var(--wash);color:var(--ink);border:1px solid var(--rule);
  padding:.28em .65em;font-size:.72em;font-variant-caps:normal;letter-spacing:normal;line-height:1.4;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:3;
}
abbr[aria-label]:hover::after,abbr[aria-label]:focus::after,
time[aria-label]:hover::after,time[aria-label]:focus::after{opacity:1}

/* --- code · §9 ------------------------------------------------------- */
code{font-family:var(--mono);font-size:.85em;font-variant-ligatures:none;background:var(--wash);border:1px solid var(--rule);border-radius:3px;padding:.08em .35em}
pre{font-variant-ligatures:none}
figure.listing{margin:1.7em 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--wash)}
.listing figcaption{display:flex;justify-content:space-between;gap:1em;font-family:var(--mono);font-size:.68em;letter-spacing:.03em;color:var(--faded);padding:.6em 1em .5em;border-bottom:1px solid var(--rule)}
.listing figcaption::before{counter-increment:listing;content:"Listing " counter(listing)}
.listing pre{margin:0;padding:.85em 1em .95em;overflow-x:auto;line-height:1.55;counter-reset:line}
.listing pre>code{display:block;font-size:.8em;white-space:pre;background:none;border:0;border-radius:0;padding:0}
.listing pre>code::before{counter-increment:line;content:counter(line);display:inline-block;width:2.2ch;margin-right:1.6ch;text-align:right;color:color-mix(in oklab,var(--faded) 62%,transparent);-webkit-user-select:none;user-select:none}
/* hand-marked tokens — mark less, not more */
.k{color:var(--acc);font-weight:500}
.t{color:var(--tk-t)}
.s{color:var(--tk-s)}
.n{color:var(--tk-n)}
.c{color:var(--faded);font-style:italic}
.m{color:var(--acc)}

/* --- mathematics · §10 ----------------------------------------------- */
var{font-family:inherit;font-style:italic}
sup,sub{font-size:.66em;line-height:0}
.frac{display:inline-flex;flex-direction:column;text-align:center;font-size:.8em;line-height:1.25;vertical-align:-.8em;margin:0 .15em}
.frac>span{padding:0 .3em}
.frac>span:last-child{border-top:1px solid var(--ink)}
.bar{text-decoration:overline}
.mathd{text-align:center;margin:1.4em 0}
.mathd math{font-size:1.1em}

/* --- marginalia · §11 ------------------------------------------------ */
.notes{margin:1.7em 0 1em}
.notes::before{content:"";display:block;width:5.5rem;border-top:1px solid var(--rule);margin-bottom:.8em}
.note{font-size:.78em;line-height:1.5;color:var(--faded);margin:0 0 .55em;text-indent:0}
.note::before{counter-increment:notebody;content:counter(notebody) ". ";color:var(--acc)}
.note-ref::after{counter-increment:noteref;content:counter(noteref);font-size:.6em;vertical-align:.55em;color:var(--acc);margin-left:.1ch}

/* --- tables · §12 ----------------------------------------------------- */
table{border-collapse:collapse;margin:1.7em auto;font-variant-numeric:lining-nums tabular-nums;font-size:.95em;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
th{font-variant-caps:small-caps;font-weight:600;letter-spacing:.05em;font-size:.9em;text-align:left;border-bottom:1px solid var(--ink);padding:.4em .9em}
td{padding:.34em .9em;vertical-align:baseline}
.r{text-align:right}
caption{caption-side:bottom;font-size:.8em;font-style:italic;color:var(--faded);padding-top:.7em;white-space:nowrap}
caption::before{content:"Table " counter(tbl) " · ";counter-increment:tbl}

/* --- the index · §13 --------------------------------------------------- */
ol.index{list-style:none;margin:0 0 1.1em;padding:0}
.index li{display:flex;align-items:baseline;gap:.7ch;margin:.3em 0}
.lead{flex:1;min-width:3ch;border-bottom:1px dotted color-mix(in oklab,var(--faded) 70%,transparent);transform:translateY(-.3em)}
.idx-date{font-size:.8em;color:var(--faded);letter-spacing:.04em;font-variant-numeric:lining-nums;white-space:nowrap}
.tag{font-size:.72em;font-variant-caps:small-caps;letter-spacing:.09em;color:var(--acc);white-space:nowrap}
.yr{letter-spacing:.16em;margin-bottom:.6em}

/* --- footer ------------------------------------------------------------ */
footer.colophon{margin-top:3rem;text-align:center}

/* --- wide screens: lift notes into the margin · §11 -------------------- */
@container (min-width:68rem){
  article.post{margin:0 17.5rem 0 auto}
  @supports (anchor-name:--a){
    .note{position:absolute;top:anchor(top);left:calc(100% + 2rem);width:13.5rem;margin:0}
    .notes{margin:0}
    .notes::before{display:none}
  }
}

/* --- narrow screens ----------------------------------------------------- */
@media (max-width:40rem){body{padding:2rem 1.05rem 3rem}}
@container (max-width:40rem){
  .post-title{font-size:1.5em}
  blockquote{margin:1.3em .9rem 1.3em 1.3rem}
  th,td{padding-left:.55em;padding-right:.55em}
}