/* version2beta — Broadsheet.
   Newsreader for prose; JetBrains Mono for code and small labels.
   Fonts: SIL OFL 1.1, self-hosted (see /fonts/OFL-*.txt). No dark mode, no JavaScript.
   The earlier two-variant stylesheet is preserved in reference/prototype/site.css. */

@font-face{font-family:"Newsreader";src:url("../fonts/newsreader.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:optional}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:optional}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrainsmono.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:optional}

/* ---- shared tokens ---- */
:root{
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4.5rem;
  --shadow:none;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* ---- Variant A: Broadsheet ---- */
.v-a{
  --bg:#FAF7F0;--text:#1D1B17;--muted:#5E584E;--accent:#0F5C57;--link:#0B4F7A;
  --border:#DDD5C6;--code-bg:#F0EBE0;
  --font-body:"Newsreader",Georgia,"Times New Roman",serif;
  --font-head:"Newsreader",Georgia,"Times New Roman",serif;
  --font-meta:"Newsreader",Georgia,serif;
  --fs-body:clamp(1.125rem,1rem + .4vw,1.25rem);--lh-body:1.6;--measure:33em;
  --fs-h1:clamp(2.25rem,1.6rem + 2.4vw,3.05rem);--fw-h1:500;--lh-h1:1.1;
  --fs-h2:1.95rem;--fs-h3:1.56rem;--fs-h4:1.25rem;--fw-h:500;--lh-h:1.2;
  --ff-h3:var(--font-head);--fw-h3:500;
  --fs-meta:.875rem;--meta-style:italic;--code-fs:.875rem;--radius:4px;
  --tok-kw:#7A2E5C;--tok-str:#3D6B1F;--tok-cmt:#6B6457;--tok-num:#0F5C57;--tok-fn:#0B4F7A;
}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);
  font-size:var(--fs-body);line-height:var(--lh-body);font-optical-sizing:auto;
  text-rendering:optimizeLegibility;font-kerning:normal}
a{color:var(--link);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--bg);color:var(--text);padding:var(--space-2) var(--space-4);z-index:10}
.skip:focus{left:var(--space-4);top:var(--space-2)}
img,svg{max-width:100%;height:auto}

/* ---- header / footer ---- */
.site-header{border-bottom:1px solid var(--border);padding:var(--space-5) var(--space-4) var(--space-4)}
.site-header .inner,.site-footer .inner{max-width:62rem;margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-6)}
.wordmark{font-family:var(--font-head);font-weight:var(--fw-h);font-size:clamp(1.75rem,1.4rem + 1.2vw,2.35rem);
  letter-spacing:-.01em;color:var(--text);text-decoration:none;line-height:1.1}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5)}
.site-nav a{font-family:var(--font-meta);font-size:1rem;color:var(--text);text-decoration:none;
  padding:var(--space-1) 0;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current]{border-bottom-color:var(--accent);color:var(--accent)}
.site-footer{border-top:1px solid var(--border);margin-top:var(--space-8);padding:var(--space-5) var(--space-4) var(--space-7);
  font-family:var(--font-meta);font-size:var(--fs-meta);color:var(--muted)}
.site-footer a{color:var(--muted)}

/* ---- article ---- */
.article{display:grid;
  grid-template-columns:[full-start] minmax(var(--space-4),1fr) [text-start] min(var(--measure),100% - 2*var(--space-4)) [text-end] minmax(var(--space-4),1fr) [full-end];
  padding-top:var(--space-7)}
.article>*{grid-column:text}
.kicker{font-family:var(--font-meta);font-variant-caps:all-small-caps;letter-spacing:.08em;font-size:1rem;
  color:var(--accent);font-weight:600;margin:0 0 var(--space-3)}
.article h1{font-family:var(--font-head);font-size:var(--fs-h1);font-weight:var(--fw-h1);line-height:var(--lh-h1);
  letter-spacing:-.015em;margin:0 0 var(--space-4);text-wrap:balance}
.dek{font-family:var(--font-head);font-style:italic;font-weight:400;font-size:1.3em;line-height:1.35;color:var(--muted);margin:0 0 var(--space-4)}
.meta{font-family:var(--font-meta);font-size:var(--fs-meta);font-style:var(--meta-style);color:var(--muted);margin:0 0 var(--space-6)}
.meta .sep{padding:0 .4em}
.toc{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:var(--space-4) 0;margin:0 0 var(--space-6);
  font-family:var(--font-meta);font-size:.95rem;line-height:1.5}
.toc strong{display:block;font-variant-caps:all-small-caps;letter-spacing:.08em;color:var(--muted);margin-bottom:var(--space-2)}
.toc ul{margin:0;padding-left:1.1em}.toc ul ul{margin-top:.15em}
.toc a{color:var(--link)}
.article h2{font-family:var(--font-head);font-size:var(--fs-h2);font-weight:var(--fw-h);line-height:var(--lh-h);margin:var(--space-7) 0 var(--space-3);letter-spacing:-.01em}
.article h3{font-family:var(--ff-h3);font-size:var(--fs-h3);font-weight:var(--fw-h3);line-height:1.25;margin:var(--space-6) 0 var(--space-2)}
.article h4{font-size:var(--fs-h4);font-weight:600;margin:var(--space-5) 0 var(--space-2)}
.article p,.article ul,.article ol{margin:0 0 var(--space-4)}
.article li{margin-bottom:var(--space-1)}
.article blockquote{margin:var(--space-5) 0;padding:0 0 0 var(--space-4);border-left:3px solid var(--accent);color:var(--text)}
.article blockquote p{margin:0}
.article hr{border:0;border-top:1px solid var(--border);margin:var(--space-6) 0}
.article table{border-collapse:collapse;width:100%;font-size:.95em;margin:0 0 var(--space-5)}
.article th,.article td{text-align:left;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);vertical-align:top}
.article th{font-family:var(--font-meta);font-size:var(--fs-meta);color:var(--muted);font-weight:600}

/* code: prose width and code width are independent */
code,kbd,samp{font-family:var(--font-mono);font-size:.86em;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
:not(pre)>code{background:var(--code-bg);padding:.08em .32em;border-radius:var(--radius)}
.codeblock{grid-column:full;justify-self:center;width:min(calc(88ch + 2.5rem),100% - 2*var(--space-4));margin:var(--space-5) 0;
  font-family:var(--font-mono);font-size:var(--code-fs);line-height:1.55;background:var(--code-bg);
  border:1px solid var(--border);border-radius:var(--radius);position:relative}
.codeblock .lang{display:block;text-align:right;font-family:var(--font-meta);font-variant-caps:all-small-caps;letter-spacing:.08em;
  font-size:.9rem;color:var(--muted);padding:var(--space-2) var(--space-4) 0}
.codeblock .highlight{margin:0}
.codeblock pre{margin:0;padding:var(--space-2) var(--space-4) var(--space-4);overflow-x:auto;tab-size:4;-moz-tab-size:4;background:transparent!important}
.codeblock pre code{background:none;padding:0;font-size:inherit;white-space:pre}
.chroma .k,.chroma .kd,.chroma .kn,.chroma .kr,.chroma .kc,.chroma .kt,.chroma .kp{color:var(--tok-kw)}
.chroma .s,.chroma .s1,.chroma .s2,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .se{color:var(--tok-str)}
.chroma .c,.chroma .c1,.chroma .cm,.chroma .cs,.chroma .cp{color:var(--tok-cmt);font-style:italic}
.chroma .m,.chroma .mi,.chroma .mf,.chroma .mh{color:var(--tok-num)}
.chroma .nf,.chroma .fm{color:var(--tok-fn)}

/* figure */
.article figure.fig{margin:var(--space-6) 0}
.article figure.fig{overflow-x:auto}
.article figure.fig svg{display:block;width:100%;min-width:34rem;height:auto}
.article figcaption{font-family:var(--font-meta);font-size:var(--fs-meta);font-style:var(--meta-style);color:var(--muted);margin-top:var(--space-2)}
.fig .box{fill:var(--code-bg);stroke:var(--border);stroke-width:1.5}
.fig .box.accent{stroke:var(--accent);stroke-width:2}
.fig text{font-family:var(--font-meta);font-size:15px;fill:var(--text)}
.fig .note{fill:var(--muted);font-size:13px}
.fig .arrow{stroke:var(--text);stroke-width:1.5;fill:none}

/* footnotes */
.footnotes{font-family:var(--font-meta);font-size:.92rem;color:var(--muted);margin-top:var(--space-7)}
.footnotes hr{margin:0 0 var(--space-3)}
.footnotes ol{padding-left:1.2em}
sup a,.footnote-ref{text-decoration:none;font-family:var(--font-meta)}
.link-note-ref{font-family:var(--font-meta);font-size:.72em;font-style:normal;line-height:0;margin-left:.08em}
.link-notes{border-top:1px solid var(--border);padding-top:var(--space-4)}
.link-notes h2{font-size:1.4rem}.link-notes a{overflow-wrap:anywhere}

/* tags, series nav, prototype banner */
.tags{font-family:var(--font-meta);font-size:var(--fs-meta);font-variant-caps:all-small-caps;letter-spacing:.08em;margin-top:var(--space-6);color:var(--muted)}
.tags a{color:var(--muted)}.tags .dot{padding:0 .5em}
.series-nav{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-6);padding-top:var(--space-4);
  border-top:1px solid var(--border);font-family:var(--font-meta);font-size:1rem}
.series-nav .label{display:block;font-size:var(--fs-meta);color:var(--muted);font-variant-caps:all-small-caps;letter-spacing:.08em}
.fixture-note{font-family:var(--font-meta);font-size:var(--fs-meta);background:var(--code-bg);border:1px dashed var(--muted);
  padding:var(--space-2) var(--space-3);margin:0 0 var(--space-5);color:var(--muted)}

/* index rows (Writing list) */
.index{max-width:var(--measure);margin:0 auto;padding:0 var(--space-4)}
.index h2.year{font-family:var(--font-head);font-weight:var(--fw-h);font-size:1.5rem;color:var(--muted);margin:var(--space-6) 0 var(--space-2);
  border-bottom:1px solid var(--border);padding-bottom:var(--space-1)}
.index .row{display:grid;grid-template-columns:7.5rem 1fr;gap:var(--space-1) var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--border)}
.index .row time{font-family:var(--font-meta);font-size:var(--fs-meta);font-style:var(--meta-style);color:var(--muted);font-variant-numeric:tabular-nums;padding-top:.3em}
.index .row a.title{font-family:var(--font-head);font-weight:var(--fw-h);font-size:1.3rem;line-height:1.25;color:var(--text);text-decoration:none}
.index .row a.title:hover{color:var(--link);text-decoration:underline}
.index .row .d{grid-column:2;color:var(--muted);font-size:.95em;line-height:1.45}
/* tool hub details block */
.details{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-1) var(--space-5);margin:var(--space-4) 0;padding:var(--space-3) 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-family:var(--font-meta);font-size:.95rem}
.details dt{color:var(--muted);font-variant-caps:all-small-caps;letter-spacing:.06em}.details dd{margin:0}

/* ---- Broadsheet site ---- */
html{color-scheme:light}
.site-header .inner,.site-footer .inner{max-width:64rem}
.site-nav a{display:inline-block;min-height:2.75rem;padding:.55rem 0}
.wordmark{padding:.3rem 0}
.footer-sep{padding:0 .6em}
.home{max-width:64rem;margin:0 auto;padding:0 var(--space-4)}
.home-intro{padding:var(--space-8) 0 var(--space-5)}
.home h1{font-size:clamp(2.75rem,1.8rem + 4.4vw,5.5rem);font-weight:500;line-height:1.04;letter-spacing:-.035em;margin:0 0 var(--space-5);text-wrap:balance}
.home-lead{max-width:37rem;font-size:1.15em;line-height:1.5}
.home-lead p{margin:0 0 var(--space-3)}
.section-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2);font-family:var(--font-mono);font-size:.75rem;line-height:1.6;color:var(--muted)}
.section-label span:first-child{color:var(--accent)}
.featured-essay{border-top:2px solid var(--accent);border-bottom:1px solid var(--border);padding:var(--space-4) 0 var(--space-7)}
.featured-essay h2{margin:var(--space-5) 0 var(--space-3);font-size:clamp(2rem,1.4rem + 2.6vw,3.7rem);font-weight:500;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.featured-essay h2 a,.work-columns h3 a{color:var(--text);text-decoration:none}
.featured-essay h2 a:hover,.work-columns h3 a:hover{color:var(--accent);text-decoration:underline}
.featured-essay>p{max-width:37rem;margin:0 0 var(--space-4)}
.featured-essay .dek{font-size:1.25em}
.writing-start{padding-bottom:var(--space-5)}
.text-link{font-size:1rem}
.text-link span{padding-left:.25em}
.work-together{padding-top:var(--space-7)}
.home-intro+.work-together,.writing-start+.work-together{border-top:1px solid var(--border)}
.work-together>h2{font-size:1.75rem;font-weight:500;margin:0 0 var(--space-5)}
.work-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7)}
.work-columns h3{font-size:1.5rem;font-weight:500;margin:0 0 var(--space-2)}
.work-columns p{max-width:26rem;margin:0 0 var(--space-3)}
.writing-index{max-width:44rem;margin:0 auto;padding:var(--space-7) var(--space-4) 0}
.writing-index h1{font-size:var(--fs-h1);font-weight:500;line-height:1.1;letter-spacing:-.015em;margin:0 0 var(--space-4)}
.writing-index header>p:not(.kicker){color:var(--muted);margin:0 0 var(--space-6)}
.essay-list-item{border-top:1px solid var(--border);padding:var(--space-5) 0}
.essay-list-item h2{font-size:1.8rem;line-height:1.2;font-weight:500;margin:0 0 var(--space-3)}
.essay-list-item h2 a{color:var(--text);text-decoration:none}
.essay-list-item h2 a:hover{color:var(--accent);text-decoration:underline}
.essay-list-item p{margin:0 0 var(--space-3)}
.article .meta{line-height:1.7;margin-bottom:var(--space-6)}
.article .toc{margin-bottom:var(--space-6)}
.article .kicker{margin-bottom:var(--space-3)}
.article .dek{margin-bottom:var(--space-5)}
.meta a{color:var(--muted)}
.article a{overflow-wrap:anywhere}
.essay-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);border-top:1px solid var(--border);margin-top:var(--space-6);padding-top:var(--space-4);font-size:1rem}
.revision-notes{border-top:1px solid var(--border);margin-top:var(--space-6);font-size:.95em}
.revision-notes h3{font-size:1.2rem}
@media (max-width:40rem){
  .home-intro{padding-top:var(--space-7)}
  .work-columns{grid-template-columns:1fr;gap:var(--space-6)}
  .section-label{flex-direction:column;gap:0}
  .site-header .inner{gap:var(--space-3)}
  .site-nav{width:100%}
  .site-nav ul{justify-content:space-between;gap:var(--space-2)}
  .site-footer .inner{flex-direction:column}
  .index .row{grid-template-columns:1fr}.index .row .d{grid-column:1}
  .article{padding-top:var(--space-6)}
  .series-nav{flex-direction:column}
}
@media print{
  body{background:#fff;color:#000;font-size:11pt}.site-header,.site-footer,.skip,.series-nav,.fixture-note,.toc,.essay-end{display:none}
  .article{display:block}.codeblock{width:auto;break-inside:avoid;border-color:#999}a{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
}