/* Blog — shares the site's palette and type. Served alongside the static
   pages under /blog/; index.html keeps its own inline styles. */
:root{
  color-scheme:light dark;
  --bg:#f4f1ea;
  --ink:#1d1b18;
  --muted:#7e7768;
  --accent:#003b71;
  --accent-soft:rgba(0,59,113,0.30);
  --rule:#e3dccd;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:Newsreader,Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
html,body{overflow-x:hidden}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:var(--serif)}
a{color:inherit;text-decoration:none}
em{font-style:italic}

/* Header (mirrors index.html) */
.site-header{position:sticky;top:0;z-index:20;background:rgba(244,241,234,0.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.header-inner{max-width:820px;margin:0 auto;padding:17px 30px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.brand{font-size:20px;font-weight:500;letter-spacing:-0.01em}
.nav{display:flex;gap:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.13em;text-transform:uppercase}
.nav-link{padding-bottom:3px;border-bottom:1.5px solid transparent;color:var(--muted);transition:color .2s,border-color .2s}
.nav-link:hover{color:var(--ink)}
.nav-link.is-active{color:var(--accent);border-bottom-color:var(--accent)}

main{flex:1;width:100%;max-width:820px;margin:0 auto;padding:0 30px}
.section{padding:74px 0 60px}

/* Shared bits */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin-bottom:26px}
.eyebrow .dot{color:#cbc4b5;margin:0 8px}
/* Post eyebrow: meta on the left, the A−/A+ text-size pair on the right */
.post-head .eyebrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px 20px;flex-wrap:wrap}
.text-size{white-space:nowrap}
.text-size button{font:inherit;letter-spacing:inherit;text-transform:none;background:none;border:0;padding:0 2px;cursor:pointer;color:var(--muted);transition:color .2s}
.text-size button:hover{color:var(--ink)}
.text-size button:disabled{color:#cbc4b5;cursor:default}
.text-size button:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px;border-radius:2px}
.page-title{font-size:34px;font-weight:500;letter-spacing:-0.02em;margin:0 0 12px}
.page-subtitle{font-size:17px;line-height:1.6;color:#6a655c;margin:0 0 36px;max-width:32em}
.chip{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent-soft);padding-bottom:1px;transition:border-color .2s}
.chip:hover{border-bottom-color:var(--accent)}

/* Index: list of posts */
.post-list{margin-top:8px}
.post-item{display:grid;grid-template-columns:62px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--rule)}
.post-item.has-thumb{grid-template-columns:62px 1fr 176px}
.post-thumb{display:block;margin-top:5px}
.post-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid #ddd5c5;border-radius:3px;background:#e6e1d5}
.post-item:last-child{border-bottom:1px solid var(--rule)}
.post-year{font-family:var(--mono);font-size:12px;color:#9b958a;padding-top:5px}
.post-title{font-size:21px;line-height:1.35;font-weight:500;letter-spacing:-0.01em;display:inline;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s}
.post-title:hover{background-size:100% 1px}
.post-dek{font-size:14.5px;font-style:italic;line-height:1.4;color:#8a8479;margin-top:4px}
.post-meta{font-family:var(--mono);font-size:11.5px;color:#6f695f;margin-top:9px;letter-spacing:0.01em}
.post-summary{font-size:16.5px;line-height:1.55;color:#56514a;margin:11px 0 0;max-width:36em}

/* Post */
.post{padding:74px 0 60px;max-width:38em}
.post-head{margin-bottom:44px}
.post-head h1{font-size:38px;line-height:1.15;font-weight:500;letter-spacing:-0.02em;margin:0 0 14px;text-wrap:balance}
.post-head .dek{font-size:20px;line-height:1.45;font-style:italic;color:#6a655c;margin:0;text-wrap:pretty}
.post-body{font-size:18.5px;line-height:1.66;color:#2a2722;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.post-body p{margin:0 0 1.35em;text-wrap:pretty}
.post-body p:last-child{margin-bottom:0}
.post-body a{color:var(--accent);background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:1px}
.post-body .ref{display:inline-block;padding:0 0.1em}
/* Footnote markers: tabular mono superscripts, no underline */
.fn-ref{font-family:var(--mono);font-size:0.62em;line-height:0;vertical-align:baseline;position:relative;top:-0.55em;color:var(--accent);background:none!important;padding:0 0.08em}
.fn-ref:hover{color:var(--ink)}

/* Cover image under the title, with its attribution line */
.post-cover{margin:0 0 42px}
.post-cover img{display:block;width:100%;height:auto;border:1px solid #ddd5c5;border-radius:3px;background:#e6e1d5}
.post-cover figcaption{margin-top:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.01em;color:#645f55;line-height:1.5}
.post-cover figcaption em{font-style:italic}

/* Rule between body and apparatus */
.post-apparatus{margin-top:56px;padding-top:28px;border-top:1px solid var(--rule)}
.post-apparatus h2{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 18px}
.post-apparatus + .post-apparatus{margin-top:40px;padding-top:0;border-top:0}
.notes{margin:0;padding:0 0 0 1.8em;font-size:15.5px;line-height:1.6;color:#56514a}
.notes li{margin:0 0 12px;padding-left:0.3em}
.notes li::marker{font-family:var(--mono);font-size:11.5px;color:#9b958a}
.notes li:target{color:var(--ink)}
.notes a{color:var(--accent);background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:1px}
.fn-back{font-family:var(--mono);font-size:12px;margin-left:6px;background:none!important;color:#9b958a!important}
.fn-back:hover{color:var(--ink)!important}
.refs{margin:0;padding:0;list-style:none;font-size:15.5px;line-height:1.6;color:#56514a}
.refs li{margin:0 0 10px;padding-left:1.8em;text-indent:-1.8em}
.refs a{color:var(--accent);background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:1px}
.colophon{margin-top:36px;font-size:14px;font-style:italic;line-height:1.55;color:#8a8275}
.colophon + .colophon{margin-top:10px}
.colophon a{color:var(--accent);background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:1px}
.post-nav{margin-top:44px;display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--mono);font-size:12.5px;letter-spacing:0.02em}
.post-nav.top{margin-top:0;margin-bottom:36px}
.post-nav a{border-bottom:1px solid #cdc6b7;padding-bottom:2px;transition:border-color .2s}
.post-nav a:hover{border-bottom-color:var(--ink)}
.post-nav a.back{color:var(--accent);border-bottom-color:var(--accent-soft)}

/* Footer (mirrors index.html) */
footer{width:100%;max-width:820px;margin:20px auto 0;padding:30px 30px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:0.03em;color:#7e7768}
footer span{line-height:1.8}
footer a{border-bottom:1px solid #d6cfc0;padding-bottom:1px}
.foot-meta{display:flex;flex-direction:column;align-items:flex-end;gap:7px}

@media (max-width:560px){
  .post-item,.post-item.has-thumb{grid-template-columns:1fr;gap:14px}
  .post-thumb{order:-1;margin-top:0}
  .post-year{padding-top:0}
  .post-head h1{font-size:30px}
  .post-head .dek{font-size:18px}
  .post-body{font-size:17.5px}
  .foot-meta{align-items:flex-start}
}
@media (max-width:480px){
  .header-inner{flex-wrap:wrap;padding:14px 20px;gap:10px 14px}
  .brand{font-size:18px}
  .nav{flex-wrap:wrap;gap:8px 18px;font-size:11px}
  .nav-link{padding-bottom:6px;padding-top:2px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* Dark mode — follows the OS/browser setting, no manual toggle. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15130f;
    --ink:#eae5d9;
    --muted:#948c7a;
    --accent:#6fa3d8;
    --accent-soft:rgba(111,163,216,0.35);
    --rule:#322e26;
  }
  .site-header{background:rgba(21,19,15,0.82)}
  .eyebrow .dot{color:#4a4536}
  .text-size button:disabled{color:#524d40}
  .page-subtitle{color:#a89f8d}
  .post-thumb img{border-color:#39352b;background:#29261f}
  .post-year{color:#948c7a}
  .post-dek{color:#948c7a}
  .post-meta{color:#a89f8d}
  .post-summary{color:#c9c3b5}
  .post-head .dek{color:#a89f8d}
  .post-body{color:#d8d2c3}
  .post-cover img{border-color:#39352b;background:#29261f}
  .post-cover figcaption{color:#a89f8d}
  .notes{color:#c9c3b5}
  .notes li::marker{color:#948c7a}
  .fn-back{color:#948c7a!important}
  .refs{color:#c9c3b5}
  .colophon{color:#948c7a}
  .post-nav a{border-bottom-color:#4a4536}
  footer{color:#948c7a}
  footer a{border-bottom-color:#4a4536}
}