/* ==========================================================================
   Sam Chada — catalog design system
   Shared stylesheet for the landing (index) and post pages.
   Dark mode follows the OS by default, but an explicit html[data-theme]
   (set by the ND accessibility toggle) always wins.
   ========================================================================== */

/* ---- self-hosted fonts (no third-party requests) ---- */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/atkinson-400.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/atkinson-700.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/source-serif-4-400.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/source-serif-4-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2")}

/* ---- tokens: light is the default; dark via OS or the ND toggle ---- */
:root{
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --body:"Atkinson Hyperlegible", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* light: warm reading-room */
  --bg:#f4ecdb; --ink:#241d13; --dim:#5c4e33; --rust:#8a3a18; --rust-deep:#722d12;
  --rule:#dccdb0; --card:#ece0c8;
  --measure:66ch;
  /* alias the shared accessibility-widget accent to rust so its panel is on-brand */
  --clay:var(--rust); --sage:var(--rust-deep);
}
/* dark: the desk at night — applied when the user picks dark, OR when the OS is
   dark and the user has not explicitly forced light */
:root[data-theme="dark"]{
  --bg:#1c1813; --ink:#efe9dc; --dim:#bdae95; --rust:#e8865c; --rust-deep:#cf6339;
  --rule:#3a3324; --card:#24201a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1c1813; --ink:#efe9dc; --dim:#bdae95; --rust:#e8865c; --rust-deep:#cf6339;
    --rule:#3a3324; --card:#24201a;
  }
}
/* higher-contrast preference: deepen the accent + secondary text */
@media (prefers-contrast: more){ :root{--dim:#493c24; --rust:#762d0e} }
@media (prefers-contrast: more){ :root[data-theme="dark"]{--dim:#c6bba4; --rust:#f0916a} }
@media (prefers-contrast: more) and (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--dim:#c6bba4; --rust:#f0916a} }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
body{margin:0; color:var(--ink); font-family:var(--body); line-height:1.72; font-size:19px; -webkit-font-smoothing:antialiased; position:relative}

/* ---- moleskine paper: fixed grain + a graph-paper grid that fades from the top ---- */
body::after{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; mix-blend-mode:multiply; opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.19'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::before{content:""; position:absolute; top:0; left:0; right:0; height:820px; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px);
  background-size:50px 50px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent)}
body[data-page="post"]::before{height:620px}

:root[data-theme="dark"] body::after{mix-blend-mode:screen; opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.26'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::before{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::after{mix-blend-mode:screen; opacity:.45;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.26'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  :root:not([data-theme="light"]) body::before{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}
}

a{color:var(--rust); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--rust); outline-offset:3px; text-decoration:none}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; background:var(--bg); padding:.5rem .75rem; outline:2px solid var(--rust); z-index:20}

.wrap{max-width:var(--measure); margin:0 auto; padding:0 22px}

/* ---- reading-progress rule (post pages): fills like a marker as you scroll ---- */
.progress{position:fixed; top:0; left:0; height:3px; width:100%; background:var(--rust); transform:scaleX(0); transform-origin:0 50%; z-index:15}
@media(prefers-reduced-motion:no-preference){ .progress{animation:progress linear; animation-timeline:scroll(root)} }
@keyframes progress{to{transform:scaleX(1)}}

/* ==== LANDING ==== */
/* masthead: lead with the work */
.masthead{border-bottom:2px solid var(--rule); padding:clamp(3.5rem,8vw,5rem) 0 2.4rem}
.masthead h1{font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem,1rem + 5vw,3.1rem); line-height:1; letter-spacing:-.01em; margin:0 0 1.4rem}
.masthead .tag{font-size:1.05rem; color:var(--ink); line-height:1.62; margin:0; max-width:54ch}
.masthead .tag b{font-weight:700}

/* category nav */
.nav{display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; border-bottom:2px solid var(--rule); padding:1.1rem 0; font-size:.95rem}
.nav a{color:var(--ink)}
.nav a:hover{color:var(--rust); text-decoration:none}
.nav a[aria-current="page"]{color:var(--rust); font-weight:700; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px}

/* ---- mobile menu (hamburger). Button hidden on desktop; links flow normally ---- */
.nav-links{display:contents}
.nav-toggle{display:none; font-family:var(--mono); font-size:.88rem; letter-spacing:.04em; align-items:center; gap:.45rem;
  background:transparent; color:var(--ink); border:1.5px solid var(--rule); border-radius:6px; padding:.42rem .7rem; cursor:pointer; line-height:1}
.nav-toggle .bars{font-size:1.1em}
.nav-toggle:hover{border-color:var(--rust); color:var(--rust)}
.nav-toggle:focus-visible{outline:2px solid var(--rust); outline-offset:2px}

/* catalog header */
.catalog-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding:1.4rem 0 .3rem}
.catalog-head h2{margin:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit}
.catalog-head .all{letter-spacing:.08em}

/* the index: each row is a catalog card */
.index{margin:0; padding:0}
.post-row{display:grid; grid-template-columns:8rem 1fr; gap:1.6rem; padding:1.8rem 0; border-bottom:2px solid var(--rule)}
.card{position:relative; align-self:start; border:1.5px solid var(--rule); background:var(--card);
  padding:.7rem .75rem .6rem; display:flex; flex-direction:column; gap:.5rem}
.card .cn{font-family:var(--mono); font-weight:500; font-size:1.02rem; letter-spacing:.03em; color:var(--ink); line-height:1}
.card .div{height:1px; background:var(--rule)}
.card .class{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); line-height:1.3}
.card .series{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); line-height:1.3}
.card .acc{font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--dim); line-height:1.3}
.card .cited{font-family:var(--mono); font-size:.64rem; letter-spacing:.05em; color:var(--rust); line-height:1.3}
.card.overdue{border-color:var(--rust)}
.card.overdue .cn{color:var(--rust)}
.card.overdue .div{background:color-mix(in srgb,var(--rust) 45%,transparent)}
.card.field{border-style:dashed}
.card .flag{align-self:flex-start; font-family:var(--mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bg); background:var(--rust); padding:.14rem .42rem; line-height:1.35}
.entry h3{font-family:var(--serif); font-weight:700; font-size:1.32rem; line-height:1.3; margin:0 0 .55rem}
.entry h3 a{color:var(--ink)}
.entry h3 a:hover,.entry h3 a:focus-visible{color:var(--rust); text-decoration:none}
.entry .dek{margin:0 0 .7rem; color:var(--ink); font-size:1rem; line-height:1.6; max-width:58ch}
.entry .meta{font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--dim)}
.entry .meta .dot{opacity:.55; margin:0 .5em}

/* ==== POST ==== */
/* full-width site header — content in a wider bar than the 66ch article measure */
.topbar{border-bottom:2px solid var(--rule)}
.topbar .bar{max-width:80rem; margin:0 auto; padding:1.15rem 22px; display:flex; align-items:center; justify-content:space-between; gap:.5rem 2.5rem; flex-wrap:wrap}
.brand{font-family:var(--serif); font-weight:700; font-size:1.5rem; letter-spacing:-.015em; color:var(--ink); text-decoration:none; line-height:1}
.brand:hover{color:var(--rust); text-decoration:none}
.topnav{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.4rem; font-size:.92rem}
.topnav a{color:var(--dim)}
.topnav a:hover{color:var(--rust); text-decoration:none}
.topnav a[aria-current="page"]{color:var(--ink); font-weight:700}

.article-head{padding:clamp(2.4rem,5vw,3.4rem) 0 1.6rem; border-bottom:2px solid var(--rule)}
.accession{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 1.1rem}
.accession .cn{color:var(--rust); font-weight:500}
.accession a{color:var(--dim); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--dim) 40%,transparent)}
.accession a:hover,.accession a:focus-visible{color:var(--rust); border-color:var(--rust); text-decoration:none}
.accession .cited{color:var(--rust)}
.accession .sep{opacity:.55; margin:0 .5em}
.article-head h1{font-family:var(--serif); font-weight:700; font-size:clamp(2rem,1rem + 3.4vw,3rem); line-height:1.12; letter-spacing:-.01em; margin:0 0 1rem; text-wrap:balance}
.dek{font-size:1.16rem; line-height:1.5; color:var(--dim); margin:0 0 1.4rem; max-width:52ch}
.byline{font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; color:var(--dim); margin:0}
.byline .sep{opacity:.55; margin:0 .5em}

.prose{padding-top:2rem; font-size:1.12rem; line-height:1.76}
.prose p{margin:0 0 1.35em}
/* inline links in body prose carry an underline at rest (distinguishable without color) */
.prose a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.prose a:hover,.prose a:focus-visible{text-decoration-thickness:2px}
.prose > p:first-of-type{font-size:1.24rem; line-height:1.6}
.prose h2{font-family:var(--serif); font-weight:700; font-size:clamp(1.45rem,1rem + 1.1vw,1.75rem); line-height:1.22; margin:2.1em 0 .65em}
.prose blockquote{margin:1.6em 0; padding:.1em 0 .1em 1.2em; border-left:3px solid var(--rule); font-style:italic; color:var(--ink)}
.prose blockquote p{margin:0}
.pull{font-family:var(--serif); font-weight:700; font-size:clamp(1.35rem,1rem + 1.2vw,1.7rem); line-height:1.3;
  border-left:4px solid var(--rust); padding-left:1.1rem; margin:1.7em 0; color:var(--ink); text-wrap:balance}

/* ---- article finding aids: section tabs, subheads, list rhythm ---- */
.prose h2{scroll-margin-top:1.4rem}
.prose h2::before{content:""; display:block; width:2.6rem; height:3px; background:var(--rust); margin-bottom:.6rem}
.prose h3{font-family:var(--serif); font-weight:700; font-size:1.18rem; line-height:1.3; margin:1.8em 0 .55em; scroll-margin-top:1.4rem}
.prose ul,.prose ol{margin:0 0 1.35em; padding-left:1.35em}
.prose li{margin:0 0 .5em}
.prose li::marker{color:var(--rust)}
.prose hr{border:0; height:2px; width:6rem; background:var(--rule); margin:2.6em auto}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* the summary slip: TL;DR rendered as a checkout-card */
.tldr{border:1.5px solid var(--rule); border-left:4px solid var(--rust); background:var(--card); padding:1.05rem 1.2rem; margin:0 0 2em}
.tldr .tldr-h{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); margin:0 0 .65rem}
.tldr ul{margin:0; padding-left:1.2em}
.tldr li{margin:0 0 .55em; font-size:1.02rem; line-height:1.55}
.tldr li:last-child{margin-bottom:0}

/* the finding aid: contents card for long filings */
.toc{border:1.5px solid var(--rule); background:var(--card); padding:1rem 1.2rem 1.1rem; margin:0 0 2.2em}
.toc .toc-h{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 .6rem}
.toc ol{list-style:none; counter-reset:toc; margin:0; padding:0; column-gap:2.2rem}
.toc li{counter-increment:toc; margin:0 0 .45em; break-inside:avoid; font-size:.98rem; line-height:1.45}
.toc li::before{content:counter(toc,decimal-leading-zero); font-family:var(--mono); font-size:.72rem; color:var(--rust); margin-right:.6em}
.toc a{color:var(--ink); text-decoration:none}
.toc a:hover,.toc a:focus-visible{color:var(--rust); text-decoration:underline; text-underline-offset:3px}
@media (min-width:561px){ .toc ol{columns:2} }

/* the closing station: date-due stamp */
.stamp{margin:3rem 0 0}
.stamp-box{display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rust);
  border:2px solid var(--rust); border-radius:3px; padding:.5rem .95rem .45rem; transform:rotate(-2deg); opacity:.92}

.decoded{border:1.5px solid var(--rule); border-left:3px solid var(--rust); background:var(--card); padding:1rem 1.15rem; margin:1.9em 0}
.decoded .lbl{display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); margin-bottom:.55rem}
.decoded .q{font-family:var(--serif); font-style:italic; color:var(--dim); line-height:1.5}
.strike{text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--rust); color:var(--dim); font-style:normal}
.decoded .truth{display:block; margin-top:.6rem; font-weight:700; color:var(--ink)}

/* callouts converted from MDX <Callout> blocks */
.prose .callout{border:1.5px solid var(--rule); border-left:3px solid var(--rust); background:var(--card); padding:1rem 1.15rem; margin:1.9em 0}
.prose .callout .callout-h{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); margin:0 0 .6rem}
.prose .callout p{margin:0 0 .7em}
.prose .callout p:last-child,.prose .callout ul:last-child,.prose .callout ol:last-child{margin-bottom:0}
.prose .callout ul,.prose .callout ol{margin:0; padding-left:1.2em}
.prose .callout li{margin:0 0 .4em}
/* the one-sentence definition box reads bigger, like a pull-quote */
.prose .callout.info p{font-family:var(--serif); font-size:1.14rem; line-height:1.45}
/* the "ask your vendor" block is the propagation artifact — give it weight */
.prose .callout.questions{border-left-width:4px}
.prose .callout.questions li{font-weight:700; margin-bottom:.6em}

/* ==== data tables: sourced figures set as a ledger ==== */
.prose figure.table-fig{margin:2.1em 0}
.prose .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.prose .table-scroll:focus-visible{outline:2px solid var(--rust); outline-offset:3px}
.prose table{border-collapse:collapse; width:100%; min-width:32rem;
  font-family:var(--mono); font-size:.88rem; line-height:1.45}
.prose thead th{font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rust); font-weight:700; text-align:right; white-space:nowrap;
  padding:.55rem .8rem; border-bottom:2px solid var(--rule)}
.prose thead th:first-child,.prose thead th.l{text-align:left}
.prose tbody th{font-family:var(--serif); font-weight:600; font-size:.98rem;
  text-align:left; color:var(--ink); padding:.62rem .8rem;
  border-bottom:1px solid var(--rule); vertical-align:baseline}
.prose tbody th .sub{display:block; font-family:var(--mono); font-weight:400;
  font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin-top:.18rem}
.prose tbody td{padding:.62rem .8rem; border-bottom:1px solid var(--rule);
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
  color:var(--ink); vertical-align:baseline}
.prose tbody td.txt{text-align:left; white-space:normal; color:var(--ink)}
.prose tbody td.gouge{color:var(--rust); font-weight:700}
.prose tbody tr:last-child th,.prose tbody tr:last-child td{border-bottom:0}
.prose figure.table-fig figcaption{font-family:var(--body); font-size:.95rem;
  color:var(--ink); line-height:1.6; margin-top:.8rem}
@media (max-width:560px){ .prose table{font-size:.82rem} .prose thead th{font-size:.68rem} }

.receipts{border-top:2px solid var(--rule); margin-top:2.6rem; padding-top:1.7rem}
.receipts h2{font-family:var(--serif); font-weight:700; font-size:1.5rem; margin:0 0 .2rem}
.receipts .rlead{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:0 0 1.2rem}
.receipts ol{list-style:none; counter-reset:r; margin:0; padding:0}
.receipts li{position:relative; padding:0 0 1.1rem 2.5rem; counter-increment:r}
.receipts li:last-child{padding-bottom:0}
.receipts li::before{content:counter(r); position:absolute; left:0; top:.05rem; font-family:var(--mono); font-size:.78rem; color:var(--rust); border:1px solid var(--rule); border-radius:3px; padding:.05rem .45rem; line-height:1.3}
.receipts .claim{font-size:1.02rem; line-height:1.45}
.receipts .src{display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--dim); margin-top:.25rem; word-break:break-word}

.readnext{border-top:2px solid var(--rule); margin-top:2.6rem; padding-top:1.7rem}
.readnext-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin:0 0 1rem}
.readnext .item{display:block; text-decoration:none; margin-bottom:1.2rem}
.readnext .item:last-child{margin-bottom:0}
.readnext .rmeta{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rust); display:block; margin-bottom:.25rem}
.readnext .rt{font-family:var(--serif); font-weight:700; font-size:1.2rem; line-height:1.25; color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color:color-mix(in srgb,currentColor 30%,transparent)}
.readnext .item:hover .rt,.readnext .item:focus-visible .rt{text-decoration-color:currentColor; text-decoration-thickness:2px}

/* ==== FOOTER (both page types) — three tiers: wordmark, legend, fine print ==== */
.index-foot,.foot{text-align:center; border-top:2px solid var(--rule); margin-top:2.8rem; padding:2.8rem 0 4.5rem}
.foot-mark{display:inline-block; font-family:var(--serif); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; color:var(--ink); text-decoration:none; margin-bottom:1.3rem}
.foot-mark:hover{color:var(--rust); text-decoration:none}
.index-foot .legend,.foot .legend{font-family:var(--mono); font-size:.67rem; letter-spacing:.07em; color:var(--dim); line-height:1.9; margin:0 0 1.4rem}
.index-foot .legend b,.foot .legend b{color:var(--ink); font-weight:500}
.index-foot .legend .leg,.foot .legend .leg{white-space:nowrap}
.index-foot .legend .dot,.foot .legend .dot{opacity:.5; margin:0 .55em}
.index-foot .legal,.foot .legal{font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--ink); line-height:1.6; margin:0 0 .45rem}
.index-foot .legal a,.foot .legal a{color:var(--rust); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.index-foot .fineprint,.foot .fineprint{font-family:var(--mono); font-size:.64rem; letter-spacing:.03em; color:var(--dim); line-height:1.6; margin:0}

/* ---- reduced motion: gentle load rise on the landing rows ---- */
@media (prefers-reduced-motion:no-preference){
  .masthead,.nav,.catalog-head,.post-row{opacity:0; animation:rise .55s ease forwards}
  .nav{animation-delay:.08s}
  .catalog-head{animation-delay:.12s}
  .post-row:nth-child(1){animation-delay:.18s}
  .post-row:nth-child(2){animation-delay:.24s}
  .post-row:nth-child(3){animation-delay:.3s}
  .post-row:nth-child(4){animation-delay:.36s}
  .post-row:nth-child(5){animation-delay:.42s}
  .post-row:nth-child(6){animation-delay:.48s}
  .post-row:nth-child(7){animation-delay:.54s}
  @keyframes rise{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
}

/* ---- Windows High Contrast / forced-colors ---- */
@media (forced-colors: active){
  .card,.decoded,.receipts li::before,.tldr,.toc{border-color:CanvasText}
  .stamp-box{color:CanvasText; border-color:CanvasText}
  .prose h2::before{background:CanvasText}
  .card .flag{color:Canvas; background:CanvasText}
  body::before, body::after{display:none}
}

@media (max-width:560px){
  body{font-size:17px}
  /* show the hamburger; collapse the category links into a dropdown */
  .nav-toggle{display:inline-flex}
  .nav{flex-direction:column; align-items:flex-start; gap:.2rem}
  .topbar .bar{flex-wrap:wrap; row-gap:.3rem}
  .topnav{width:100%; order:3}
  .nav-links{display:none}
  .nav-links.open{display:flex; flex-direction:column; align-items:stretch; width:100%; gap:0; padding:.4rem 0 .2rem}
  .nav-links.open a{padding:.65rem .25rem; border-bottom:1px solid var(--rule)}
  .nav-links.open a:last-child{border-bottom:0}
  .post-row{grid-template-columns:1fr; gap:.9rem; padding:1.6rem 0}
  .card{flex-direction:row; align-items:center; flex-wrap:wrap; gap:.5rem .8rem; padding:.5rem .7rem}
  .card .div{display:none}
  .card .flag{margin-left:auto; order:9}
  /* footer legend stacks one pair per line, no dangling separators */
  .index-foot .legend,.foot .legend{display:flex; flex-direction:column; align-items:center; gap:.4rem}
  .index-foot .legend .dot,.foot .legend .dot{display:none}
}