/*
Theme Name: Thrift Wagon
Theme URI: https://thriftwagon.com
Description: Bespoke content theme for Thrift Wagon — a cited, verified reselling resource. Editorial "verified ledger" identity: sage-green ledger accent, humanist serif body, monospaced figures and labels. Styles the tw-* article structure emitted by the content pipeline (verified date, key takeaways, sources, "how we checked this" provenance, field evidence) so every published article carries the brand automatically. Light and dark themes.
Author: Thrift Wagon
Version: 1.5.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: thriftwagon
Tags: blog, one-column, editorial, custom-colors, full-width-template, featured-images, threaded-comments
*/

/* ============================================================
   0. Self-hosted fonts (no external requests)
   Body: IBM Plex Sans (readable on screen). Headings: Source Serif 4
   (screen-reading serif, editorial). Labels/figures: IBM Plex Mono.
   ============================================================ */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-sans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-sans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/ibm-plex-sans-600.woff2') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/source-serif-4-600.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:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');}

/* ============================================================
   1. Design tokens — the "verified ledger" brand
   ============================================================ */
:root {
  --tw-paper:#F2F5F0;         /* page ground — cool sage-white, chosen not defaulted */
  --tw-surface:#FBFCFA;       /* cards */
  --tw-ink:#1B211D;           /* body text — green-biased near-black */
  --tw-muted:#4B564E;         /* secondary text — darkened for AA contrast */
  --tw-accent:#2C7A4E;        /* ledger green — money, verification, thrift */
  --tw-accent-ink:#1E5C39;    /* accent text on paper (AA) */
  --tw-accent-soft:#E4EFE8;   /* accent wash */
  --tw-hairline:#D6DDD5;
  --tw-hairline-strong:#C2CCC1;
  --tw-warn:#9A5B12;          /* semantic, distinct from accent */

  --tw-sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* body/UI — readable */
  --tw-serif:'Source Serif 4',Georgia,'Times New Roman',serif;   /* headings only — editorial */
  --tw-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* labels/figures */

  --tw-measure:44rem;         /* reading column (~66ch at 18px body) — widened from 40rem, which
                                 read narrow against the desktop margins */
  --tw-wide:70rem;            /* full container */
  --tw-radius:8px;

  --tw-step--1:.86rem;
  --tw-step-0:1.02rem;
  --tw-step-1:1.28rem;
  --tw-step-2:1.5rem;
  --tw-step-3:2.05rem;
  --tw-step-4:2.7rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --tw-paper:#12150F; --tw-surface:#191D17; --tw-ink:#E9EEE7; --tw-muted:#95A198;
    --tw-accent:#63B482; --tw-accent-ink:#8ACBA1; --tw-accent-soft:#1D2A22;
    --tw-hairline:#29312A; --tw-hairline-strong:#38423A; --tw-warn:#E0A458;
  }
}
:root[data-theme="dark"]{
  --tw-paper:#12150F; --tw-surface:#191D17; --tw-ink:#E9EEE7; --tw-muted:#95A198;
  --tw-accent:#63B482; --tw-accent-ink:#8ACBA1; --tw-accent-soft:#1D2A22;
  --tw-hairline:#29312A; --tw-hairline-strong:#38423A; --tw-warn:#E0A458;
}
:root[data-theme="light"]{
  --tw-paper:#F2F5F0; --tw-surface:#FBFCFA; --tw-ink:#1B211D; --tw-muted:#4B564E;
  --tw-accent:#2C7A4E; --tw-accent-ink:#1E5C39; --tw-accent-soft:#E4EFE8;
  --tw-hairline:#D6DDD5; --tw-hairline-strong:#C2CCC1; --tw-warn:#9A5B12;
}

/* ============================================================
   2. Reset & base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--tw-paper); color:var(--tw-ink);
  font-family:var(--tw-sans); font-size:1.125rem; line-height:1.68;   /* 18px readable sans */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block;}
figure{margin:0;}
:focus-visible{outline:2px solid var(--tw-accent); outline-offset:2px; border-radius:2px;}

.tw-container{max-width:var(--tw-wide); margin:0 auto; padding:0 24px;}
.tw-measure{max-width:var(--tw-measure); margin-left:auto; margin-right:auto;}

/* One left rail for the whole page.
   The masthead and the card grids sit in a 70rem container while the reading column was a 44rem
   block centred independently — so on a wide screen the article started ~200px inboard of the
   logo and of the "More in ..." heading, and nothing shared an edge. Above the breakpoint the
   reading wrapper takes the full container width and its children align left inside it, so the
   logo, the article text, the card grid and the comments all start on the same rail. Below it,
   the column stays centred as before. */
@media (min-width:1180px){
  .tw-container.tw-measure{max-width:var(--tw-wide);}
  .tw-container.tw-measure > *{max-width:var(--tw-measure); margin-left:0; margin-right:0;}
}
.tw-skip{position:absolute; left:-9999px;}
.tw-skip:focus{left:16px; top:12px; z-index:100; background:var(--tw-accent); color:#fff; padding:8px 14px; border-radius:6px;}

/* headings */
h1,h2,h3,h4{font-family:var(--tw-serif); font-weight:700; line-height:1.18; letter-spacing:-.01em; text-wrap:balance;}
h1{font-size:var(--tw-step-4); margin:0 0 .5em;}
h2{font-size:var(--tw-step-2); margin:2.2em 0 .6em;}
h3{font-size:var(--tw-step-1); margin:1.8em 0 .4em;}
p{margin:0 0 1.1em;}

/* links — full state set so no host/parent blue leaks through */
a:link{color:var(--tw-accent-ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb,var(--tw-accent) 45%,transparent);}
a:visited{color:var(--tw-accent-ink);}
a:hover{color:var(--tw-accent-ink); text-decoration-color:var(--tw-accent);}
a:focus{color:var(--tw-accent-ink);}
a:active{color:var(--tw-accent);}

/* labels / eyebrows */
.tw-eyebrow{font-family:var(--tw-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tw-accent-ink); display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;}
.tw-eyebrow .tw-dot{width:4px; height:4px; border-radius:50%; background:var(--tw-hairline-strong);}

/* ============================================================
   3. Header / masthead
   ============================================================ */
.tw-mast{border-bottom:1px solid var(--tw-hairline); background:var(--tw-paper); position:sticky; top:0; z-index:40;}
.tw-mast-inner{max-width:var(--tw-wide); margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:20px;}
.tw-brand{display:flex; flex-direction:row; align-items:center; gap:11px; text-decoration:none; margin-right:auto;}
.tw-brand:link,.tw-brand:visited,.tw-brand:hover,.tw-brand:focus,.tw-brand:active{text-decoration:none; color:var(--tw-ink);}
/* Covered-wagon logo mark — currentColor picks up the ledger green and re-tints in dark mode. */
.tw-brand-mark{display:inline-flex; color:var(--tw-accent); flex:0 0 auto;}
.tw-brand-mark svg{width:34px; height:auto; display:block;}
.tw-brand:hover .tw-brand-mark,.tw-brand:focus .tw-brand-mark{color:var(--tw-accent-ink);}
.tw-brand-text{display:flex; flex-direction:column; gap:2px;}
.tw-wordmark{font-family:var(--tw-mono); font-size:.9rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;}
.tw-wordmark span{color:var(--tw-accent);}
.tw-brand .tw-tag{font-family:var(--tw-mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tw-muted);}
.tw-brand img{max-height:40px; width:auto;}

.tw-nav{display:flex; align-items:center; gap:22px;}
.tw-nav ul{list-style:none; display:flex; gap:22px; margin:0; padding:0;}
.tw-nav a{font-family:var(--tw-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none;}
.tw-nav a:link,.tw-nav a:visited{color:var(--tw-muted); text-decoration:none;}
.tw-nav a:hover,.tw-nav a:focus,.tw-nav .current-menu-item>a{color:var(--tw-accent-ink);}

.tw-iconbtn{background:none; border:1px solid var(--tw-hairline); border-radius:6px; padding:7px; cursor:pointer;
  color:var(--tw-muted); display:inline-flex; line-height:0;}
.tw-iconbtn:hover{color:var(--tw-accent-ink); border-color:var(--tw-hairline-strong);}
.tw-iconbtn svg{width:17px; height:17px;}
.tw-nav-toggle{display:none;}

@media (max-width:820px){
  .tw-nav-toggle{display:inline-flex;}
  .tw-nav{position:fixed; inset:64px 0 auto 0; background:var(--tw-surface); border-bottom:1px solid var(--tw-hairline);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 20px; display:none;}
  .tw-nav.is-open{display:flex;}
  .tw-nav ul{flex-direction:column; gap:0; width:100%;}
  .tw-nav li{width:100%; border-bottom:1px solid var(--tw-hairline);}
  .tw-nav a{display:block; padding:14px 0; font-size:.8rem;}
}

/* ============================================================
   4. Homepage
   ============================================================ */
.tw-hero{padding:64px 0 40px; border-bottom:1px solid var(--tw-hairline);}
.tw-hero .tw-eyebrow{margin-bottom:22px;}
.tw-hero h1{font-size:clamp(2.2rem,5vw,3.4rem); max-width:16ch; margin:0 0 20px;}
.tw-hero-lead{font-size:var(--tw-step-1); color:var(--tw-ink); max-width:52ch; margin:0 0 26px;}
.tw-promise{display:inline-flex; align-items:center; gap:9px; font-family:var(--tw-mono); font-size:.76rem;
  color:var(--tw-accent-ink); background:var(--tw-accent-soft); border:1px solid color-mix(in srgb,var(--tw-accent) 30%,transparent);
  padding:8px 13px; border-radius:6px;}
.tw-promise svg{width:15px; height:15px;}

.tw-section{padding:52px 0;}
.tw-section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:26px; border-bottom:1px solid var(--tw-hairline); padding-bottom:12px;}
.tw-section-head h2{margin:0; font-size:var(--tw-step-2);}
.tw-section-head a{font-family:var(--tw-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; white-space:nowrap;}

/* card grids */
.tw-grid{display:grid; gap:28px;}
.tw-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.tw-grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:820px){ .tw-grid.cols-3{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .tw-grid.cols-3,.tw-grid.cols-2{grid-template-columns:1fr;} }

.tw-card{display:flex; flex-direction:column; background:var(--tw-surface); border:1px solid var(--tw-hairline);
  border-radius:var(--tw-radius); overflow:hidden;}
.tw-card:hover{border-color:var(--tw-hairline-strong);}
/* Card thumbnails carry the article's hero PHOTO (the branded title card is the OG/social image,
   not the grid thumbnail — showing it here repeated the title next to the card heading). 16:10 is
   the better proportion for a photo, and cover-cropping a photograph is harmless. */
.tw-card-thumb{aspect-ratio:16/10; background:var(--tw-accent-soft); overflow:hidden;}
.tw-card-thumb img{width:100%; height:100%; object-fit:cover;}
.tw-card-body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.tw-card .tw-cat{font-family:var(--tw-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tw-accent-ink);}
.tw-card h3{margin:0; font-size:1.16rem; line-height:1.3;}
.tw-card h3 a:link,.tw-card h3 a:visited{color:var(--tw-ink); text-decoration:none;}
.tw-card h3 a:hover,.tw-card h3 a:focus{color:var(--tw-accent-ink);}
.tw-card-excerpt{font-size:.94rem; color:var(--tw-muted); line-height:1.5; margin:0;}
.tw-card-meta{margin-top:auto; padding-top:4px; font-family:var(--tw-mono); font-size:.66rem; letter-spacing:.04em; color:var(--tw-muted);}

/* cluster hubs */
.tw-clusters{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:820px){ .tw-clusters{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .tw-clusters{grid-template-columns:1fr;} }
.tw-cluster{display:block; padding:22px; border:1px solid var(--tw-hairline); border-radius:var(--tw-radius);
  background:var(--tw-surface); text-decoration:none;}
.tw-cluster:link,.tw-cluster:visited{text-decoration:none; color:var(--tw-ink);}
.tw-cluster:hover{border-color:var(--tw-accent); background:var(--tw-accent-soft);}
.tw-cluster .tw-cluster-num{font-family:var(--tw-mono); font-size:.68rem; color:var(--tw-accent-ink);}
.tw-cluster h3{margin:8px 0 6px; font-size:1.14rem;}
.tw-cluster p{margin:0; font-size:.9rem; color:var(--tw-muted); line-height:1.45;}

/* ============================================================
   5. Article (single) — styles the pipeline's tw-* classes
   ============================================================ */
.tw-article{padding:36px 0 20px;}
.tw-article .tw-eyebrow{margin-bottom:14px;}
/* Fill the reading column. This was capped at 22ch and inherited `text-wrap:balance` from the
   heading rule, so a 55-character title collapsed into three stubby, equal-length lines and read
   as a boxy block instead of a headline. `pretty` still avoids a one-word last line, but it does
   not shrink the measure to balance them. */
.tw-article-title{font-size:clamp(2rem,4.5vw,2.7rem); margin:0 0 16px; max-width:none;
  line-height:1.14; text-wrap:pretty;}

/* breadcrumbs */
.tw-breadcrumbs{font-family:var(--tw-mono); font-size:.74rem; margin:0 0 20px;}
.tw-breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; padding:0;}
.tw-breadcrumbs li{display:flex; align-items:center; gap:8px; color:var(--tw-muted);}
.tw-breadcrumbs li:not(:last-child)::after{content:"/"; color:var(--tw-hairline-strong);}
.tw-breadcrumbs a:link,.tw-breadcrumbs a:visited{color:var(--tw-muted); text-decoration:none;}
.tw-breadcrumbs a:hover,.tw-breadcrumbs a:focus{color:var(--tw-accent-ink);}
.tw-breadcrumbs li[aria-current] span{color:var(--tw-ink);}

/* byline */
.tw-byline{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 30px;
  font-family:var(--tw-mono); font-size:.78rem; color:var(--tw-muted);}
.tw-byline .tw-byline-author{color:var(--tw-ink);}
.tw-byline .tw-dot{width:3px; height:3px; border-radius:50%; background:var(--tw-hairline-strong);}

/* table of contents (injected by functions.php) */
.tw-toc{background:var(--tw-surface); border:1px solid var(--tw-hairline); border-radius:var(--tw-radius);
  padding:22px 26px; margin:34px 0;}
.tw-toc-title{font-family:var(--tw-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tw-muted); margin:0 0 14px;}
.tw-toc ol{list-style:none; counter-reset:toc; margin:0; padding:0; columns:2; column-gap:32px;}
.tw-toc li{counter-increment:toc; margin:0 0 10px; break-inside:avoid;}
.tw-toc a{display:flex; gap:11px; align-items:baseline; font-size:1rem; line-height:1.35; text-decoration:none;}
.tw-toc a:link,.tw-toc a:visited{color:var(--tw-ink);}
.tw-toc a:hover,.tw-toc a:focus{color:var(--tw-accent-ink);}
.tw-toc a::before{content:counter(toc,decimal-leading-zero); font-family:var(--tw-mono); font-size:.72rem;
  color:var(--tw-accent-ink); flex:0 0 auto;}
@media (max-width:600px){ .tw-toc ol{columns:1;} }

/* jump-link offset for the sticky masthead */
.tw-content h2{scroll-margin-top:84px;}

/* verified stamp (render.js: p.tw-verified > em) */
/* Quiet metadata chip. It was reading at nearly heading weight directly under the title and
   competing with the H1 — this is a provenance stamp, not a headline. */
.tw-verified{display:inline-flex; align-items:center; gap:6px; margin:0 0 22px !important;
  font-family:var(--tw-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tw-accent-ink);
  background:var(--tw-accent-soft); border:1px solid color-mix(in srgb,var(--tw-accent) 26%,transparent);
  padding:4px 9px; border-radius:20px;}
.tw-verified em{font-style:normal;}
.tw-verified::before{content:""; width:10px; height:10px; flex:0 0 10px;
  background:var(--tw-accent-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;}

.tw-content{font-size:1.2rem; line-height:1.78;}   /* ~19px, airy — the reading text */
.tw-content p{margin:0 0 1.25em;}
/* Lead paragraph. Must exclude the verified chip: it is the first <p> the pipeline emits, so
   `p:first-of-type` was styling the provenance stamp at lead size (21px) instead of the intro. */
.tw-content > p:first-of-type:not(.tw-verified),.tw-content .tw-intro{font-size:1.34rem; line-height:1.6; color:var(--tw-ink);}
.tw-content h2{font-size:var(--tw-step-2); margin-top:1.8em;}
.tw-content h3{font-size:var(--tw-step-1);}

/* key takeaways card (render.js: div.tw-takeaways > h2 + ul) */
.tw-takeaways{background:var(--tw-surface); border:1px solid var(--tw-hairline); border-radius:var(--tw-radius);
  padding:24px 28px; margin:34px 0;}
.tw-takeaways h2{font-family:var(--tw-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tw-muted); margin:0 0 15px; font-weight:600;}
.tw-takeaways ul{list-style:none !important; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.tw-takeaways li{padding-left:26px; position:relative; font-size:1.02rem; line-height:1.5; margin:0;}
/* Drawn tick, not an empty box (an unticked checkbox beside "Key takeaways" reads as a to-do
   list) and not a ✓ glyph (the self-hosted fonts are subsetted, so a glyph risks tofu). */
.tw-takeaways li::before{content:""; position:absolute; left:2px; top:.42em; width:6px; height:11px;
  border:solid var(--tw-accent); border-width:0 2px 2px 0; transform:rotate(45deg);}

/* provenance "how we checked this" (render.js: div.tw-method) */
.tw-method{border:1px dashed var(--tw-hairline-strong); border-radius:var(--tw-radius); padding:20px 26px; margin:38px 0;}
.tw-method h2{font-family:var(--tw-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tw-accent-ink); margin:0 0 10px; font-weight:600;}
.tw-method p{margin:0; font-size:.97rem;}

/* field evidence blockquotes (render.js: div.tw-evidence > blockquote) */
.tw-evidence blockquote,blockquote.tw-evidence-item{margin:0 0 16px; padding:16px 20px; border-left:3px solid var(--tw-accent);
  background:var(--tw-surface); border-radius:0 var(--tw-radius) var(--tw-radius) 0;}
.tw-evidence blockquote p,.tw-evidence-item p{margin:0 0 8px; font-size:1rem;}
.tw-evidence cite,.tw-evidence-item cite{font-style:normal; font-family:var(--tw-mono); font-size:.76rem; color:var(--tw-muted);}

/* limits (render.js: div.tw-limits) */
.tw-limits h2{font-size:1.05rem; color:var(--tw-muted); margin:2em 0 .4em;}
.tw-limits p{font-size:.92rem; color:var(--tw-muted); border-left:2px solid var(--tw-hairline-strong); padding-left:16px;}

/* sources (render.js: ol.tw-sources) */
.tw-sources{list-style:none !important; counter-reset:ref; margin:0 0 1.1em; padding:0; display:flex; flex-direction:column; gap:15px;}
.tw-sources li{counter-increment:ref; padding-left:38px; position:relative; font-size:.93rem; line-height:1.5; margin:0;}
.tw-sources li::before{content:counter(ref); position:absolute; left:0; top:0; font-family:var(--tw-mono); font-size:.72rem;
  font-weight:600; color:var(--tw-accent-ink); background:var(--tw-accent-soft); width:24px; height:24px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;}

/* related (render.js: ul.tw-related) — a real component, not bare links. Chevron is drawn with
   borders rather than an arrow glyph, because the self-hosted fonts are subsetted. */
.tw-related{list-style:none !important; padding:0; margin:0; border-top:1px solid var(--tw-hairline);}
.tw-related li{margin:0; border-bottom:1px solid var(--tw-hairline);}
.tw-related a{display:flex; align-items:flex-start; gap:14px; padding:14px 4px;
  font-family:var(--tw-serif); font-size:1.06rem; line-height:1.45;}
.tw-related a:link,.tw-related a:visited{color:var(--tw-ink); text-decoration:none;}
.tw-related a:hover,.tw-related a:focus{color:var(--tw-accent-ink); text-decoration:none;}
.tw-related a::before{content:""; flex:0 0 auto; width:7px; height:7px; margin-top:.52em;
  border:solid var(--tw-accent); border-width:2px 2px 0 0; transform:rotate(45deg);
  transition:transform .15s ease;}
.tw-related a:hover::before,.tw-related a:focus::before{transform:rotate(45deg) translate(2px,-2px);}

/* prose lists / tables / images inside content */
.tw-content ul{list-style:disc !important; padding-left:1.4em; margin:0 0 1.1em;}
.tw-content ol{list-style:decimal !important; padding-left:1.5em; margin:0 0 1.1em;}
.tw-content li{margin:0 0 .5em; line-height:1.55;}
/* component lists (takeaways, TOC, sources, related) must beat the prose disc/decimal above */
.tw-content .tw-takeaways ul,.tw-content .tw-toc ol,
.tw-content ol.tw-sources,.tw-content ul.tw-related{list-style:none !important; padding-left:0 !important;}
.tw-content .tw-toc li,.tw-content .tw-takeaways li,
.tw-content .tw-sources li,.tw-content .tw-related li{margin:0;}
.tw-content .tw-toc li{margin-bottom:10px;}
.tw-content .wp-block-table,.tw-content figure.wp-block-table{margin:28px 0; overflow-x:auto;
  border:1px solid var(--tw-hairline); border-radius:var(--tw-radius); background:var(--tw-surface);}
.tw-content table{border-collapse:collapse; width:100%; min-width:560px; font-size:.93rem; font-variant-numeric:tabular-nums;}
.tw-content thead th{font-family:var(--tw-mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tw-muted); font-weight:600; text-align:left; padding:13px 16px; border-bottom:1.5px solid var(--tw-hairline-strong); white-space:nowrap;}
.tw-content tbody td{padding:13px 16px; border-bottom:1px solid var(--tw-hairline); vertical-align:top;}
.tw-content tbody tr:last-child td{border-bottom:none;}
.tw-content tbody td:first-child{font-weight:700;}
/* Content figures. Sourced photos arrive in wildly different shapes (incl. tall portraits that
   swamp the reading column), so photos are normalised to one landscape ratio for a steady rhythm.
   Data infographics are never cropped — their numbers must stay readable. Images always fill the
   column so a small source file can't sit inset and misaligned against the others. */
.tw-content figure.wp-block-image{margin:30px 0;}
.tw-content figure.wp-block-image img{width:100%; height:auto; display:block;
  border-radius:var(--tw-radius); border:1px solid var(--tw-hairline);}
.tw-content figure.tw-figure--photo img{aspect-ratio:16/10; object-fit:cover; object-position:center;}
.tw-content figure.tw-figure--data img{object-fit:contain; background:var(--tw-surface);}
.tw-content figure figcaption{font-family:var(--tw-mono); font-size:.7rem; letter-spacing:.04em;
  color:var(--tw-muted); margin-top:9px; text-align:center;}
.tw-content blockquote{margin:1.4em 0; padding:4px 0 4px 20px; border-left:3px solid var(--tw-accent); color:var(--tw-ink);}

/* article footer / share */
.tw-article-foot{margin-top:44px; padding-top:24px; border-top:1px solid var(--tw-hairline);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;}
.tw-share{display:flex; gap:10px;}
.tw-share a{font-family:var(--tw-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--tw-hairline); border-radius:20px; padding:6px 14px; text-decoration:none;}
.tw-share a:hover{border-color:var(--tw-accent); background:var(--tw-accent-soft);}

/* ============================================================
   6. Archive / search list
   ============================================================ */
.tw-page-head{padding:48px 0 8px; border-bottom:1px solid var(--tw-hairline); margin-bottom:36px;}
.tw-page-head h1{font-size:var(--tw-step-3); margin:12px 0 8px;}
.tw-page-head p{color:var(--tw-muted); max-width:60ch; margin:0;}
.tw-list{display:flex; flex-direction:column; gap:0;}
.tw-list-item{display:grid; grid-template-columns:200px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--tw-hairline);}
.tw-list-item .tw-thumb{aspect-ratio:16/10; border-radius:var(--tw-radius); overflow:hidden; background:var(--tw-accent-soft);}
.tw-list-item .tw-thumb img{width:100%; height:100%; object-fit:cover;}
.tw-list-item h2{margin:6px 0 8px; font-size:1.4rem;}
.tw-list-item h2 a:link,.tw-list-item h2 a:visited{color:var(--tw-ink); text-decoration:none;}
.tw-list-item h2 a:hover{color:var(--tw-accent-ink);}
.tw-list-item p{color:var(--tw-muted); font-size:.96rem; margin:0 0 8px;}
@media (max-width:640px){ .tw-list-item{grid-template-columns:1fr; gap:14px;} .tw-list-item .tw-thumb{max-width:100%;} }

.tw-pagination{display:flex; gap:8px; justify-content:center; padding:40px 0; font-family:var(--tw-mono); font-size:.8rem;}
.tw-pagination a,.tw-pagination span{padding:8px 14px; border:1px solid var(--tw-hairline); border-radius:6px; text-decoration:none;}
.tw-pagination .current{background:var(--tw-accent); color:#fff; border-color:var(--tw-accent);}

/* ============================================================
   7. Footer
   ============================================================ */
.tw-foot{margin-top:70px; border-top:1px solid var(--tw-hairline); background:var(--tw-surface);}
.tw-foot-inner{max-width:var(--tw-wide); margin:0 auto; padding:44px 24px; display:grid;
  grid-template-columns:1.4fr 1fr 1fr; gap:36px;}
@media (max-width:720px){ .tw-foot-inner{grid-template-columns:1fr; gap:28px;} }
.tw-foot h4{font-family:var(--tw-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tw-muted); margin:0 0 14px;}
.tw-foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
.tw-foot a{font-size:.92rem; text-decoration:none;}
.tw-foot a:hover{text-decoration:underline;}
.tw-foot-brand .tw-wordmark{font-size:1rem;}
.tw-foot-brand p{color:var(--tw-muted); font-size:.9rem; margin:12px 0 0; max-width:34ch;}
.tw-foot-legal{border-top:1px solid var(--tw-hairline); padding:18px 24px; text-align:center;
  font-family:var(--tw-mono); font-size:.68rem; letter-spacing:.04em; color:var(--tw-muted);}

/* ============================================================
   8. Static pages, forms (Contact Form 7), misc
   ============================================================ */
.tw-page{padding:20px 0 40px;}
.tw-page .tw-content{font-size:19px;}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 textarea{
  width:100%; font-family:var(--tw-serif); font-size:1rem; padding:12px 14px; margin-top:6px;
  background:var(--tw-surface); border:1px solid var(--tw-hairline-strong); border-radius:6px; color:var(--tw-ink);}
.wpcf7 input[type=submit]{font-family:var(--tw-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  background:var(--tw-accent); color:#fff; border:none; border-radius:6px; padding:12px 22px; cursor:pointer;}
.wpcf7 input[type=submit]:hover{background:var(--tw-accent-ink);}
.wpcf7 label{font-family:var(--tw-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tw-muted);}

@media (prefers-reduced-motion:no-preference){
  .tw-reveal{opacity:0; transform:translateY(10px); animation:tw-rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
  @keyframes tw-rise{to{opacity:1; transform:none;}}
}

/* ============================================================
   9. Comments
   ------------------------------------------------------------
   The theme previously shipped no comments.php, so WordPress fell back to its
   theme-compat markup and the form rendered as raw browser-default controls
   (inset 2px borders, monospace textarea, grey system button). This styles the
   whole thread + form to the ledger identity, light and dark.
   ============================================================ */
.tw-comments{margin-top:52px; padding-top:32px; border-top:1px solid var(--tw-hairline);}
.tw-comments__title{font-family:var(--tw-serif); font-size:var(--tw-step-2); margin:0 0 6px;}
.tw-comments__note{font-size:.9rem; color:var(--tw-muted); margin:0 0 26px;}

/* thread */
.tw-commentlist{list-style:none !important; margin:0 0 40px; padding-left:0 !important;}
.tw-commentlist ol.children{list-style:none !important; margin:16px 0 0 0; padding-left:22px !important;
  border-left:2px solid var(--tw-hairline);}
.tw-commentlist li.comment{margin:0 0 16px;}
.tw-comment{background:var(--tw-surface); border:1px solid var(--tw-hairline);
  border-radius:var(--tw-radius); padding:18px 20px;}
.tw-comment__head{display:flex; align-items:center; gap:10px; margin-bottom:9px; flex-wrap:wrap;}
.tw-comment__head img.avatar{border-radius:50%; width:34px; height:34px; display:block;}
.tw-comment__author{font-weight:600; color:var(--tw-ink);}
.tw-comment__author a:link,.tw-comment__author a:visited{color:var(--tw-ink); text-decoration:none;}
.tw-comment__author a:hover,.tw-comment__author a:focus{color:var(--tw-accent-ink); text-decoration:underline;}
.tw-comment__date{font-family:var(--tw-mono); font-size:.68rem; letter-spacing:.04em; color:var(--tw-muted);}
.tw-comment__body{font-size:.97rem; line-height:1.65;}
.tw-comment__body p{margin:0 0 .8em;}
.tw-comment__body p:last-child{margin-bottom:0;}
.tw-comment__foot{margin-top:10px; display:flex; gap:14px;}
.tw-comment__foot a{font-family:var(--tw-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;}
.tw-comment__foot a:link,.tw-comment__foot a:visited{color:var(--tw-accent-ink); text-decoration:none;}
.tw-comment__foot a:hover,.tw-comment__foot a:focus{color:var(--tw-accent-ink); text-decoration:underline;}
.tw-comment.is-moderation{border-style:dashed; color:var(--tw-muted);}

/* form */
.comment-respond{background:var(--tw-surface); border:1px solid var(--tw-hairline);
  border-radius:var(--tw-radius); padding:26px 26px 28px;}
.comment-respond .comment-reply-title{font-family:var(--tw-serif); font-size:var(--tw-step-1); margin:0 0 4px;}
.comment-respond .comment-reply-title small{font-family:var(--tw-mono); font-size:.68rem; letter-spacing:.05em;
  text-transform:uppercase; margin-left:10px;}
.comment-respond .comment-notes,.comment-respond .logged-in-as{font-size:.85rem; color:var(--tw-muted); margin:0 0 20px;}
.comment-form-comment,.comment-form-author,.comment-form-email,.comment-form-url,.comment-form-captcha{margin:0 0 16px;}
/* anti-spam honeypot: kept in the DOM for bots, removed from view and a11y tree */
.comment-respond .tw-hp{position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden;}
.comment-respond label{display:block; font-family:var(--tw-mono); font-size:.7rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--tw-muted); margin-bottom:7px;}
.comment-respond input[type=text],.comment-respond input[type=email],
.comment-respond input[type=url],.comment-respond textarea{
  width:100%; font-family:var(--tw-sans); font-size:1rem; line-height:1.6; color:var(--tw-ink);
  background:var(--tw-paper); border:1px solid var(--tw-hairline-strong); border-radius:6px;
  padding:12px 14px; -webkit-appearance:none; appearance:none;}
.comment-respond textarea{min-height:150px; resize:vertical;}
.comment-respond input[type=text]:focus,.comment-respond input[type=email]:focus,
.comment-respond input[type=url]:focus,.comment-respond textarea:focus{
  outline:none; border-color:var(--tw-accent); box-shadow:0 0 0 3px var(--tw-accent-soft);}
.comment-respond input::placeholder,.comment-respond textarea::placeholder{color:var(--tw-muted); opacity:.75;}
/* three-up name/email/url on wide screens */
@media (min-width:620px){
  .comment-respond .tw-field-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
  .comment-respond .tw-field-row>p{margin-bottom:16px;}
}
.comment-form-cookies-consent{display:flex; align-items:flex-start; gap:9px; margin:4px 0 20px;}
.comment-form-cookies-consent input[type=checkbox]{margin-top:3px; width:16px; height:16px;
  accent-color:var(--tw-accent); flex:0 0 auto;}
.comment-form-cookies-consent label{font-family:var(--tw-sans); font-size:.85rem; letter-spacing:0;
  text-transform:none; color:var(--tw-muted); margin:0;}
.comment-respond .form-submit{margin:0;}
.comment-respond input[type=submit]{font-family:var(--tw-mono); font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:500; background:var(--tw-accent); color:#fff; border:none;
  border-radius:6px; padding:13px 26px; cursor:pointer; transition:background .15s ease;}
.comment-respond input[type=submit]:hover{background:var(--tw-accent-ink);}
.comment-respond input[type=submit]:focus-visible{outline:2px solid var(--tw-accent-ink); outline-offset:2px;}
.comment-respond .form-submit #cancel-comment-reply-link{margin-left:14px; font-family:var(--tw-mono);
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;}
.tw-comments .no-comments,.tw-comments .comments-closed{font-size:.9rem; color:var(--tw-muted);}
.comment-nav{display:flex; gap:16px; margin:0 0 24px; font-family:var(--tw-mono); font-size:.72rem;}

/* ============================================================
   10. Article layout + sidebar (sticky TOC / newsletter / ad)
   ------------------------------------------------------------
   The reading column and the sidebar share one grid, so the article text starts
   on the same left rail as the logo and the card grids. Content is printed
   before the aside in source order; the grid only moves it visually.
   ============================================================ */
.screen-reader-text{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

.tw-main{min-width:0;}
/* Below the breakpoint the sidebar simply stacks under the article. The inline
   "On this page" block inside the content serves navigation there, so the
   sidebar's own copy stays hidden to avoid two tables of contents. */
.tw-side{margin-top:46px; display:flex; flex-direction:column; gap:22px;}
.tw-side-toc{display:none;}

@media (min-width:1180px){
  .tw-container.tw-layout{display:grid; grid-template-columns:var(--tw-measure) minmax(250px,1fr);
    gap:56px; align-items:start;}
  .tw-side{margin-top:0; position:sticky; top:92px; max-height:calc(100vh - 116px); overflow-y:auto;
    scrollbar-width:thin;}
  .tw-side-toc{display:block;}
  .tw-content > .tw-toc{display:none;}   /* the sticky sidebar copy replaces it on desktop */
}

.tw-side-block{background:var(--tw-surface); border:1px solid var(--tw-hairline);
  border-radius:var(--tw-radius); padding:18px 20px;}
.tw-side-title{font-family:var(--tw-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tw-muted); margin:0 0 12px; font-weight:600;}
.tw-side-label{font-family:var(--tw-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tw-muted); margin:0 0 8px; opacity:.8;}
.tw-side-copy{font-size:.88rem; line-height:1.55; color:var(--tw-muted); margin:0 0 14px;}
.tw-side-note{font-family:var(--tw-mono); font-size:.6rem; letter-spacing:.05em; color:var(--tw-muted);
  margin:9px 0 0; opacity:.75;}

/* sticky TOC */
.tw-side-toc ol{list-style:none; margin:0; padding:0; counter-reset:twtoc; display:flex;
  flex-direction:column; gap:2px;}
.tw-side-toc li{counter-increment:twtoc; margin:0;}
.tw-side-toc a{display:block; padding:6px 8px 6px 26px; position:relative; font-size:.86rem;
  line-height:1.4; border-radius:5px;}
.tw-side-toc a:link,.tw-side-toc a:visited{color:var(--tw-muted); text-decoration:none;}
.tw-side-toc a:hover,.tw-side-toc a:focus{color:var(--tw-accent-ink); background:var(--tw-accent-soft);}
.tw-side-toc a::before{content:counter(twtoc,decimal-leading-zero); position:absolute; left:8px; top:6px;
  font-family:var(--tw-mono); font-size:.62rem; color:var(--tw-accent); opacity:.85;}
.tw-side-toc a.is-current{color:var(--tw-accent-ink); background:var(--tw-accent-soft); font-weight:500;}

/* newsletter */
.tw-news-form{display:flex; flex-direction:column; gap:9px;}
.tw-news-form input[type=email]{width:100%; font-family:var(--tw-sans); font-size:.9rem;
  padding:10px 12px; color:var(--tw-ink); background:var(--tw-paper);
  border:1px solid var(--tw-hairline-strong); border-radius:6px; -webkit-appearance:none; appearance:none;}
.tw-news-form input[type=email]:focus{outline:none; border-color:var(--tw-accent);
  box-shadow:0 0 0 3px var(--tw-accent-soft);}
.tw-news-form button{font-family:var(--tw-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; background:var(--tw-accent); color:#fff; border:none; border-radius:6px;
  padding:11px 16px; cursor:pointer; transition:background .15s ease;}
.tw-news-form button:hover{background:var(--tw-accent-ink);}

/* ad slot — fixed box so a late-loading creative cannot shift the page */
.tw-side-ad{padding:14px;}
.tw-ad-slot{width:100%; max-width:300px; height:250px; margin:0 auto; display:flex;
  align-items:center; justify-content:center; background:var(--tw-accent-soft);
  border:1px dashed var(--tw-hairline-strong); border-radius:6px;}
.tw-ad-slot:empty::after{content:"300 x 250"; font-family:var(--tw-mono); font-size:.62rem;
  letter-spacing:.12em; color:var(--tw-muted); opacity:.7;}