/* ============================================================================
   kit.css - the BLOG COMPONENT KIT
   The owner's chosen component for each job, materialized as clean, reusable
   classes. Loaded site-wide via @import in style.css. Every component uses ONLY
   the locked palette (green bg, parchment, gold + the site accent rhythm) and the
   three fonts (Century Supra / Segoe UI / Commit Mono).
   Vocabulary: most components use `.u-*` classes; a few chosen bespoke designs keep
   their own class names (.debateA, .dlnum-*, .stat-bartab*, .pillbar*). See
   STYLE.md for the markup of each.
   Treatments: Soft (Family DNA) is the default; a few jobs use Sharp (Linear) or
   Editorial (Stripe Press). Existing post winners (hero, pull-quote, table, photo
   grid) were re-expressed on .u-* classes here so they never collide with old posts.
   ============================================================================ */

/* ---- Soft helper tokens (the Soft components reference these) ---- */
:root {
  --s-surface:     rgba(245,241,234,0.03);
  --s-surface-2:   var(--bg-raised);
  --s-hair:        rgba(245,241,234,0.05);
  --s-divide:      rgba(245,241,234,0.06);
  --s-gold-tint:   rgba(212,196,160,0.08);
  --s-gold-tint-2: rgba(212,196,160,0.13);
  --s-gold-hair:   rgba(212,196,160,0.22);
  --s-shadow-1:    0 1px 2px rgba(8,12,9,0.40);
  --s-shadow-2:    0 1px 2px rgba(8,12,9,0.40), 0 10px 30px -10px rgba(8,12,9,0.55);
  --s-shadow-3:    0 1px 2px rgba(8,12,9,0.40), 0 18px 44px -14px rgba(8,12,9,0.60);
  --s-shadow-gold: 0 1px 2px rgba(8,12,9,0.35), 0 12px 32px -12px rgba(8,12,9,0.50);
}

/* ============================================================================
   SOFT treatment (Family DNA) - the default for most components
   ============================================================================ */
.u-link{ color: var(--accent); background-image: linear-gradient(var(--s-gold-hair), var(--s-gold-hair)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 1px; transition: color .2s ease, background-size .2s ease; }
.u-link:hover{ color: var(--accent-hover); background-size: 100% 2px; }
.u-eyebrow{ display: inline-block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); background: var(--s-gold-tint); padding: .42em .9em; border-radius: 999px; margin: 0 0 1.1em; }
.u-meta{ font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; color: var(--text-dim); margin: 0; } .u-meta .u-sep{ color: var(--accent); margin: 0 .5em; opacity:.8; }
.u-h2{ font-family: var(--font-heading); font-weight:700; font-size: clamp(1.6rem,3.6vw,2.1rem); color: var(--text-bright); margin: 0; padding-left: 18px; position: relative; }
.u-h2::before{ content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:5px; border-radius:999px; background: var(--accent); opacity:.85; }
.u-lead{ font-size: clamp(1.18rem,2.6vw,1.4rem); line-height: 1.6; color: var(--text); margin: 0; }
/* Dictionary-style definition opener - .u-def (one set-apart entry; .dlnum-* below is the multi-term numbered glossary) */
.u-def{ margin: 0 0 1.5rem; padding: .1rem 0 .1rem 1.25rem; border-left: 3px solid var(--accent); }
.u-def-term{ font-family: var(--font-heading); line-height: 1.12; margin: 0 0 .55rem; }
.u-def-word{ font-size: clamp(1.35rem,2.8vw,1.7rem); font-weight: 700; font-style: normal; color: var(--text-bright); }
.u-def-pos{ font-style: italic; font-weight: 400; font-size: .78em; color: var(--text-dim); margin-left: .45em; }
.u-def-gloss{ font-family: var(--font-heading); font-style: italic; font-size: clamp(1.05rem,2.2vw,1.2rem); line-height: 1.5; color: var(--text); margin: 0; }
/* Numbered senses inside a .u-def gloss (hanging indent, accent numerals) */
.u-def-sense{ display: block; padding-left: 1.5em; text-indent: -1.5em; }
.u-def-sense + .u-def-sense{ margin-top: .5em; }
.u-def-n{ font-style: normal; font-weight: 700; color: var(--accent); margin-right: .4em; }
.u-figure{ margin: 0; } .u-figure-img{ display:block; width:100%; height:auto; border-radius: 20px; box-shadow: var(--s-shadow-3); background: var(--s-surface-2); }
.u-figure-cap{ margin: 1em 0 0; font-size: .92rem; font-style: italic; line-height: 1.5; color: var(--text-dim); text-align: center; }
.u-callout{ background: var(--s-gold-tint); border: 1px solid var(--s-gold-hair); border-radius: 14px; padding: clamp(15px,3vw,22px); box-shadow: var(--s-shadow-gold); margin: 1.6rem 0; }
/* internals scoped under .u-callout so the kit standard beats post section rules (.sec p / .gsec p / .essay p), which are more specific than a bare class and would otherwise inflate callout text + inject a stray bottom margin */
.u-callout .u-callout-k{ display:flex; align-items:center; gap:.5em; font-family: var(--font-heading); font-variant: small-caps; letter-spacing:.06em; color: var(--accent); font-size:.98rem; margin:0 0 .55em; }
.u-callout-k::before{ content:""; width:8px; height:8px; border-radius:999px; background: var(--accent); box-shadow: 0 0 0 3px var(--s-gold-tint-2); flex:none; }
.u-callout .u-callout-body{ font-size: 1.18rem; line-height: 1.55; color: var(--text-bright); margin: 0; }
/* .u-move - the recurring "essay takeaway" line. Add it to a .u-callout (markup unchanged) when a boxed, labelled callout after every section reads like homework: drops the box + the repeated label for a quiet gold marker line in the essay's own italic voice. Keep plain .u-callout for one-off, meaningfully-labelled highlights. */
.u-callout.u-move{ background:none; border:none; box-shadow:none; padding:0; border-radius:0; margin:1.7rem 0; }
.u-move .u-callout-k{ display:none; }
.u-move .u-callout-body{ color: var(--accent); font-style:italic; font-size:1.16rem; line-height:1.6; padding-left:1.7rem; text-indent:-1.7rem; }
/* the marker is a CSS-drawn triangle, not a glyph: bare U+25B6 falls back to the blue
   Apple Color Emoji play button on iOS (device font substitution ignores our color) */
.u-move .u-callout-body::before{ content:""; display:inline-block; width:0.5em; height:0.6em; background:var(--accent); clip-path:polygon(0 0, 100% 50%, 0 100%); margin-right:.7em; }
/* .u-aside - a label-less "synthesis / connective" aside: a quiet gold left-rule line in the essay's voice, NOT a box, so a post that leans on this device a lot does not become a wall of identical cards. Reserves the boxed .u-callout for titled highlights + disclaimers. Bold the opening sentence as a run-in lead. */
.u-callout.u-aside{ background:none; border:none; box-shadow:none; border-radius:0; margin:1.7rem 0; padding:.1rem 0 .1rem 1.3rem; border-left:2px solid var(--s-gold-hair); }
.u-callout.u-aside .u-callout-body{ font-size:1.1rem; line-height:1.6; color: var(--text-bright); }
.u-callout.u-aside .u-callout-body b, .u-callout.u-aside .u-callout-body strong{ color: var(--accent); font-weight:700; }
.u-stats{ display:flex; flex-wrap:wrap; gap:14px; } .u-stat{ flex:1 1 140px; display:flex; flex-direction:column; gap:.35em; padding:8px 4px; } .u-stat + .u-stat{ border-left:1px solid var(--s-divide); padding-left:22px; }
.u-fig{ font-family: var(--font-heading); font-size: clamp(2.2rem,5vw,2.8rem); font-weight:700; line-height:1; color: var(--accent); } .u-fig-lbl{ font-size:.86rem; line-height:1.4; color: var(--text-dim); }
/* big stat: figure on the LEFT, caption + source fill the right, so the card never reads as a number floating in empty space. Grid carries long captions; stacks on narrow screens. */
.u-bignum{ background: var(--s-gold-tint); border: 1px solid var(--s-gold-hair); border-radius: 22px; padding: clamp(24px,4vw,38px); box-shadow: var(--s-shadow-gold); margin: 2.1rem 0; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; align-content:center; column-gap:clamp(1.2rem,3vw,2rem); row-gap:.5em; text-align:left; }
.u-bignum-fig{ grid-area:1 / 1 / 3 / 2; align-self:center; font-family: var(--font-heading); font-size: clamp(3rem,8vw,4.8rem); font-weight:700; line-height:.9; color: var(--accent); } .u-bignum-u{ font-size:.42em; vertical-align:super; color: var(--accent-hover); }
.u-bignum-cap{ grid-area:1 / 2 / 2 / 3; align-self:end; font-size: 1.12rem; line-height:1.5; color: var(--text-bright); } .u-bignum-src{ grid-area:2 / 2 / 3 / 3; align-self:start; justify-self:start; font-family: var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); background: rgba(245,241,234,0.05); padding:.4em .9em; border-radius:999px; }
@media (max-width:560px){ .u-bignum{ grid-template-columns:1fr; row-gap:.4em; } .u-bignum-fig,.u-bignum-cap,.u-bignum-src{ grid-area:auto; align-self:start; justify-self:start; } }
.u-divider{ border:none; margin:8px 0; text-align:center; } .u-divider::before{ content:"\00b7 \00b7 \00b7"; letter-spacing:.7em; font-size:1.2rem; color: var(--accent); opacity:.7; padding-left:.7em; }
.u-sechead{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.8em; }
.u-sechead-k{ font-family: var(--font-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color: var(--accent); background: var(--s-gold-tint); padding:.45em 1.1em; border-radius:999px; margin:0; }
.u-sechead-h{ font-family: var(--font-heading); font-weight:700; font-size: clamp(1.8rem,4.5vw,2.5rem); color: var(--text-bright); margin:0; }
.u-citep{ font-size:1rem; line-height:1.6; color: var(--text); margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:.5em; }
.u-src a{ font-family: var(--font-mono); font-size:.82rem; color: var(--accent); background: rgba(245,241,234,0.05); padding:.25em .7em; border-radius:999px; } .u-src a::after{ content:" \2197"; opacity:.7; }
.u-grade{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:.35em .8em; border-radius:999px; } .u-grade-a{ color: var(--bg); background: var(--accent); } .u-grade-b{ color:#a9cad9; background:rgba(143,179,199,0.16); border:1px solid rgba(143,179,199,0.4); } .u-grade-c{ color: var(--text-dim); background: rgba(245,241,234,0.06); border:1px solid var(--s-hair); } .u-grade-d{ color:#d9978c; background:rgba(233,142,127,0.14); border:1px solid rgba(233,142,127,0.4); }
.u-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1.6rem clamp(1.5rem,4vw,2.7rem); }
.u-cards .u-card{ padding:1.15rem 0 0; border-top:1px solid var(--rule); }
.u-cards .u-card-h{ font-family:var(--font-heading); font-size:1.35rem; line-height:1.3; color:var(--text-bright); margin:0 0 .65em; }
.u-cards .u-card-p{ font-family:var(--font-body); font-size:1.05rem; line-height:1.7; color:var(--text); margin:0; }
.u-toc{ background: var(--s-surface); border:1px solid var(--s-hair); border-radius:20px; padding: clamp(20px,4vw,28px); box-shadow: var(--s-shadow-2); }
.u-toc-k{ font-family: var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); margin:0 0 .6em; } .u-toc-list{ list-style:none; margin:0; padding:0; }
.u-toc-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:14px 16px; border-radius:12px; color: var(--text); text-decoration:none; transition: background .2s ease, color .2s ease; } .u-toc-row:hover{ background: var(--s-gold-tint); color: var(--text-bright); }
.u-toc-name{ display:flex; align-items:baseline; gap:.8em; font-size:1.05rem; } .u-toc-n{ font-family: var(--font-mono); font-size:.8rem; color: var(--accent); min-width:2ch; } .u-toc-m{ font-family: var(--font-mono); font-size:.8rem; color: var(--text-dim); white-space:nowrap; }
.u-collapse{ background: var(--s-surface); border:1px solid rgba(245,241,234,0.09); border-radius:18px; padding:6px clamp(18px,3vw,26px); box-shadow: var(--s-shadow-1); }
.u-collapse-s{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.7em; font-family: var(--font-heading); font-size:1.12rem; font-weight:700; color: var(--text-bright); padding:18px 0; } .u-collapse-s::-webkit-details-marker{ display:none; }
.u-collapse-s::before{ content:"\276F"; color: var(--accent); font-size:.9em; transition: transform .25s ease; } .u-collapse[open] .u-collapse-s::before{ transform: rotate(90deg); }
.u-collapse .u-collapse-list{ margin:0; padding:16px 0 18px 1.4em; border-top:1px solid var(--s-divide); color: var(--text-dim); font-size:.96rem; line-height:1.65; } .u-collapse .u-collapse-list li{ margin-bottom:.7em; } .u-collapse .u-collapse-list b{ color: var(--text-bright); } .u-collapse .u-collapse-list a{ color: var(--accent); }

/* .u-textcheck - a reusable transmission confidence readout for sacred texts.
   It deliberately separates manuscript evidence, source wording, and translation.
   Labels and qualitative rails share a column, leaving room for the evidence.
   A subtle green surface keeps gold reserved for the rails and source links. */
.u-textcheck{ margin:0; padding:clamp(22px,3vw,32px); border:1px solid var(--rule); border-radius:12px; background:color-mix(in srgb,var(--bg) 68%,var(--bg-raised)); }
.u-textcheck-head{ padding-bottom:1.35rem; border-bottom:1px solid var(--rule); }
.u-textcheck-k{ margin:0 0 .55rem; font-family:var(--font-mono); font-size:.64rem; line-height:1.35; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.u-textcheck-verdict{ margin:0; max-width:42ch; font-family:var(--font-heading); font-size:clamp(1.25rem,2.7vw,1.5rem); line-height:1.3; letter-spacing:-.015em; color:var(--text-bright); text-wrap:pretty; }
.u-textcheck-rule{ margin:.7rem 0 0; max-width:60ch; font-family:var(--font-body); font-size:.82rem; line-height:1.55; color:var(--text-dim); }
.u-textcheck-rows{ margin:0; }
.u-textcheck-row{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2fr); grid-template-rows:auto 1fr; column-gap:clamp(1.5rem,4vw,3rem); row-gap:.5rem; align-items:start; padding:1.35rem 0; border-bottom:1px solid var(--s-divide); }
.u-textcheck-row:last-child{ border-bottom:0; padding-bottom:0; }
.u-textcheck-name{ grid-column:1; grid-row:1; font-family:var(--font-heading); font-size:1rem; font-weight:700; line-height:1.4; color:var(--text-bright); }
.u-textcheck-read{ grid-column:1; grid-row:2; display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.u-textcheck-grade{ font-family:var(--font-body); font-size:.77rem; line-height:1.45; color:var(--text-dim); }
.u-textcheck-scale{ display:grid; grid-template-columns:repeat(4,1fr); width:4.5rem; gap:3px; height:3px; }
.u-textcheck-scale i{ display:block; border-radius:999px; background:var(--rule); }
.u-textcheck-scale[data-level="2"] i:nth-child(-n+2),
.u-textcheck-scale[data-level="3"] i:nth-child(-n+3),
.u-textcheck-scale[data-level="4"] i{ background:color-mix(in srgb,var(--accent) 75%,var(--bg)); }
.u-textcheck-note{ grid-column:2; grid-row:1 / 3; margin:0; font-size:.91rem; line-height:1.65; color:var(--text); text-wrap:pretty; }
.u-textcheck-foot{ margin:1.35rem 0 0; padding-top:1.05rem; border-top:1px solid var(--rule); font-family:var(--font-body); font-size:.75rem; line-height:1.65; color:var(--text-dim); }
@media(max-width:560px){
  .u-textcheck-row{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; gap:.5rem; padding-block:1.3rem; }
  .u-textcheck-name,.u-textcheck-read,.u-textcheck-note{ grid-column:1; grid-row:auto; }
  .u-textcheck-read{ flex-direction:row; align-items:center; justify-content:space-between; gap:1rem; }
  .u-textcheck-scale{ flex:none; }
  .u-textcheck-note{ margin-top:.3rem; }
}
/* .u-kpis / .u-kpi - dashboard readout. LEGACY: kept for big-enough (its only user); not offered for new posts or the archive migration. */
.u-kpis{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:16px; } .u-kpi{ background: var(--s-surface); border:1px solid var(--s-hair); border-radius:18px; padding:24px 22px; box-shadow: var(--s-shadow-2); display:flex; flex-direction:column; gap:.3em; }
.u-kpi-lbl{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); } .u-kpi-val{ font-family: var(--font-heading); font-size: clamp(2.2rem,5vw,2.8rem); font-weight:700; line-height:1; color: var(--text-bright); margin:.1em 0; } .u-kpi-sub{ font-size:.86rem; line-height:1.4; color: var(--text-dim); }
.u-kpi.u-kpi-main{ background: var(--s-gold-tint); border-color: var(--s-gold-hair); box-shadow: var(--s-shadow-gold); } .u-kpi.u-kpi-main .u-kpi-lbl{ color: var(--accent); } .u-kpi.u-kpi-main .u-kpi-val{ color: var(--accent); }

/* ============================================================================
   SHARP treatment (Linear DNA) - the do/skip checklist
   ============================================================================ */
.u-checks{ list-style:none; margin:0; padding:0; border:1px solid rgba(245,241,234,0.08); border-radius:10px; background: var(--bg-raised); overflow:hidden; box-shadow: inset 0 1px 0 rgba(245,241,234,0.05); }
.u-checks .u-check{ position:relative; font-size:1rem; line-height:1.5; color: var(--text); padding:14px 18px 14px 46px; border-bottom:1px solid rgba(245,241,234,0.08); } .u-checks .u-check:last-child{ border-bottom:0; }
.u-check::before{ position:absolute; left:18px; top:14px; font-family: var(--font-mono); font-size:.95rem; line-height:1.5; font-weight:700; width:16px; text-align:center; } .u-check.u-use::before{ content:"\2713"; color: var(--accent); } .u-check.u-meh::before{ content:"\00b7"; color: var(--text-dim); } .u-check.u-skip::before{ content:"\2717"; color: var(--text-dim); opacity:.6; } .u-check.u-skip{ color: var(--text-dim); }

/* Open reading sections and sequences. Long prose stays visible and unboxed. */
.u-reading-list { display: block; }
.u-reading-list > .u-reading-section { padding: clamp(1.6rem, 3vw, 2.2rem) 0; border-top: 1px solid var(--rule); }
.u-reading-section > h3 { margin: 0 0 .75rem; font-family: var(--font-heading); font-size: clamp(1.35rem, 3vw, 1.5rem); line-height: 1.28; letter-spacing: -.015em; color: var(--text-bright); text-wrap: pretty; }
.u-reading-section > p { margin: 0; font-family: var(--font-heading); font-size: 1.12rem; line-height: 1.75; color: var(--text); text-wrap: pretty; }
.u-reading-section > p + p { margin-top: 1em; }
.u-reading-list--columns > .u-reading-section { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 2fr); gap: .5rem clamp(1.5rem, 4vw, 2.7rem); }
.u-reading-list--columns > .u-reading-section > h3 { grid-column: 1; margin-bottom: 0; }
.u-reading-list--columns > .u-reading-section > p { grid-column: 2; }
.u-reading-list--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem clamp(1.8rem, 4vw, 3rem); }
.u-reading-list--grid > .u-reading-section { padding-block: 1.3rem; }
.u-reading-list .u-reading-k { margin: 0 0 .55rem; font-family: var(--font-mono); font-size: .64rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.u-sequence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 4vw, 2.5rem); counter-reset: u-sequence; }
.u-sequence-step { position: relative; counter-increment: u-sequence; padding-top: 1rem; border-top: 1px solid var(--rule); }
.u-sequence-step::before { content: counter(u-sequence, decimal-leading-zero); display: block; margin-bottom: 1rem; font-family: var(--font-mono); font-size: .72rem; line-height: 1.4; color: var(--accent); }
.u-sequence .u-sequence-k { margin: 0 0 .4rem; font-family: var(--font-mono); font-size: .64rem; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.u-sequence-step > h3 { margin: 0 0 .75rem; font-family: var(--font-heading); font-size: 1.4rem; line-height: 1.25; color: var(--text-bright); }
.u-sequence-step > p:last-child { margin: 0; font-family: var(--font-heading); font-size: 1.08rem; line-height: 1.75; color: var(--text); text-wrap: pretty; }
@media (max-width: 720px) {
  .u-reading-list--columns > .u-reading-section { display: block; }
  .u-reading-list--columns > .u-reading-section > h3 { margin-bottom: .75rem; }
  .u-reading-list--grid { grid-template-columns: 1fr; gap: 0; }
  .u-sequence { grid-template-columns: 1fr; gap: 0; }
  .u-sequence-step { padding: 0 0 2rem 2.2rem; border-top: 0; }
  .u-sequence-step:last-child { padding-bottom: 0; }
  .u-sequence-step::before { position: absolute; top: .05rem; left: 0; margin: 0; }
  .u-sequence-step:not(:last-child)::after { content: ""; position: absolute; top: 1.7rem; bottom: .6rem; left: .4rem; border-left: 1px solid var(--rule); }
}

/* ============================================================================
   EDITORIAL treatment (Stripe Press DNA) - entries, steps, footnotes
   ============================================================================ */
.u-fnp{ font-family: var(--font-heading); font-size:1.05rem; line-height:1.6; color: var(--text); margin:0; } .u-cite{ font-size:.62em; vertical-align:super; line-height:0; margin-left:.1em; } .u-cite a{ font-family: var(--font-mono); text-decoration:none; color: var(--accent); padding:0 .15em; }
.u-entries{ border-top:1px solid var(--rule); } .u-entry{ display:grid; grid-template-columns:5rem 1fr; gap:0 1.8rem; padding:1.5rem 0; border-bottom:1px solid var(--rule); } .u-entry-num{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:11px; color: var(--accent); padding-top:.5rem; grid-row: span 2; } .u-entry-h{ font-family: var(--font-heading); font-weight:400; font-size:1.45rem; line-height:1.22; color: var(--text-bright); margin:0 0 .5rem; } .u-entry-p{ font-family: var(--font-heading); font-size:1.02rem; line-height:1.5; color: var(--text-dim); margin:0; }
.u-steps{ list-style:none; counter-reset:u-step; margin:0; padding:0; } .u-step{ counter-increment:u-step; position:relative; padding:0 0 1.1rem 2.2rem; margin-bottom:1.1rem; border-bottom:1px solid var(--rule); } .u-step:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; } .u-step::before{ content: counter(u-step, decimal-leading-zero); position:absolute; left:0; top:0.12rem; font-family: var(--font-heading); font-size:1.1rem; line-height:1; color: var(--accent); } .u-step-h{ display:block; font-family: var(--font-heading); font-size:1.22rem; color: var(--text-bright); margin-bottom:.3rem; } .u-step .u-step-p{ font-family: var(--font-heading); font-size:1rem; line-height:1.5; color: var(--text-dim); margin:0; }
@media (max-width:560px){ .u-entry{ grid-template-columns:1fr; row-gap:6px; } .u-entry-p{ grid-column:1; } }

/* ============================================================================
   EXISTING WINNERS, re-expressed on .u-* classes
   hero (Field guide), pull-quote (Left bar), data table, photo grid (Reflows 2-3-4)
   ============================================================================ */
.u-hero{ margin: 0; }
.u-hero .u-eyebrow{ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); background: none; padding: 0; border-radius: 0; margin: 0 0 1rem; display:block; }
.u-hero .u-title{ font-family: var(--font-heading); font-weight: 700; font-size: clamp(3rem, 11vw, 6rem); line-height: 0.96; letter-spacing: -0.025em; color: var(--text-bright); margin: 0; }
.u-hero .u-dek{ font-family: var(--font-heading); font-style: italic; font-size: clamp(1.2rem, 3.2vw, 1.6rem); line-height: 1.46; color: var(--text-dim); margin: 1.2rem 0 0; max-width: 40ch; }
.u-hero .u-meta{ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0.5em 1.1em; }
.u-hero .u-meta b{ color: var(--accent); font-weight: 400; } .u-hero .u-meta .u-sep{ opacity: 0.4; }
.u-pq{ font-family: var(--font-heading); font-style: italic; font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.3; color: var(--text-bright); margin: 2.1rem 0; padding-left: 1.1rem; border-left: 3px solid var(--accent); text-wrap: balance; }
.u-pq .u-pq-cite{ display: block; margin-top: 0.55rem; font-family: var(--font-mono); font-style: normal; font-size: 0.72rem; color: var(--text-dim); }
.u-table{ width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 1rem; }
.u-table thead th{ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; color: var(--text-dim); text-align: left; padding: 0 0.8rem 0.55rem 0.45rem; border-bottom: 1px solid var(--rule); }
.u-table tbody td{ padding: 0.72rem 0.8rem; border-bottom: 1px solid rgba(74, 84, 75, 0.55); color: var(--text); vertical-align: top; line-height: 1.45; }
.u-table .u-num{ font-family: var(--font-mono); font-size: 0.92rem; white-space: nowrap; }
.u-table tr.u-feature td{ background: rgba(212, 196, 160, 0.07); color: var(--text-bright); } .u-table tr.u-feature td:first-child{ box-shadow: inset 3px 0 0 var(--accent); }
.u-table .u-dim{ color: var(--text-dim); font-size: 0.92em; }
.u-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin: 0; }
@media (min-width: 640px){ .u-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px){ .u-grid{ grid-template-columns: repeat(4, 1fr); } }
.u-grid figure{ margin: 0; } .u-grid img{ display: block; width: 100%; height: auto; aspect-ratio: 466 / 591; object-fit: cover; object-position: 50% 18%; border-radius: 4px; background: var(--bg-raised); filter: saturate(0.88); }
.u-grid figcaption{ font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.42; color: var(--text-dim); margin-top: 0.45rem; } .u-grid figcaption b{ display: block; font-family: var(--font-body); color: var(--text); font-size: 0.8rem; margin-bottom: 0.14rem; }

/* ============================================================================
   BESPOKE WINNERS (kept their own class names)
   debate (Stacked tint), define (Numbered glossary),
   stat cards (neutral bar-tab), control panel (Pillbar)
   ============================================================================ */

/* debate - Stacked tint (light: no outer card/shadow, low-alpha fill) */
.debateA{max-width:580px;margin:0 auto;font-family:var(--font-body)}.debateA-claim,.debateA-truth{border-radius:10px;padding:13px 17px}.debateA-claim{background:rgba(233,142,127,0.09)}.debateA-truth{background:rgba(158,199,154,0.09);margin-top:8px}.debateA-kicker{display:block;font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:8px}.debateA-claim .debateA-kicker{color:#e98e7f}.debateA-truth .debateA-kicker{color:#9ec79a}.debateA-kicker::before{margin-right:0.5em}.debateA-claim .debateA-kicker::before{content:"\2717"}.debateA-truth .debateA-kicker::before{content:"\2713"}.debateA .debateA-text{margin:0;font-family:var(--font-heading);font-size:1rem;line-height:1.5;color:var(--text-bright)}.debateA .debateA-claim .debateA-text{color:var(--text);font-style:italic}

/* define - Numbered glossary */
.dlnum-wrap{max-width:660px;margin:0 auto;font-family:var(--font-body)}.dlnum-head{font-family:var(--font-heading);font-style:italic;font-size:1.05rem;color:var(--text-dim);margin:0 0 1.8rem 0}.dlnum-item{display:grid;grid-template-columns:auto 1fr;column-gap:1.5rem;padding:1.7rem 0;border-top:1px solid var(--rule);align-items:start}.dlnum-item:last-child{border-bottom:1px solid var(--rule)}.dlnum-numeral{font-family:var(--font-heading);font-size:2.9rem;font-weight:400;line-height:0.85;color:var(--accent);opacity:0.9;padding-top:0.05em;min-width:1.4em;text-align:right}.dlnum-body{padding-top:0.15rem}.dlnum-term{font-family:var(--font-heading);font-size:1.42rem;font-weight:700;line-height:1.2;color:var(--text-bright);margin:0 0 0.4rem 0}.dlnum-def{font-family:var(--font-heading);font-size:1.08rem;font-style:italic;line-height:1.5;color:var(--text);margin:0}@media(max-width:480px){.dlnum-item{column-gap:1rem;padding:1.4rem 0}.dlnum-numeral{font-size:2.3rem}}
/* .dlnum-2up - a COMPACT 2-up grid for a short glossary (roughly 4 to 6 terms), about half the height of the single-column list. Hairline rules drop (they break across the column gap); the gold numerals + row gaps carry it. Stacks to one column on narrow screens; an odd last term spans both columns so it never orphans a cell. */
.dlnum-2up{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.6rem,3.5vw,2.6rem);row-gap:1.15rem;align-items:start}
.dlnum-2up .dlnum-head{grid-column:1 / -1;margin:0}
.dlnum-2up .dlnum-item{border:none;padding:0;column-gap:1rem}
.dlnum-2up .dlnum-item:last-child:nth-child(even){grid-column:1 / -1}/* odd term count (the head shifts parity): last term spans both columns so it never orphans an empty cell */
.dlnum-2up .dlnum-numeral{font-size:1.6rem}
.dlnum-2up .dlnum-term{font-size:1.15rem;margin-bottom:0.12rem}
.dlnum-2up .dlnum-def{font-size:0.96rem;line-height:1.4}
@media(max-width:640px){.dlnum-2up{grid-template-columns:1fr;row-gap:1rem}}

/* stat cards - neutral bar-tab (cream figure, dim top rule; gold is the site's POSITIVE accent, so stat numbers stay neutral - the old sky/amber/green colored variants were retired) */
.stat-bartab-row{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--font-body)}.stat-bartab{flex:1 1 0;min-width:160px;position:relative;border-radius:14px;padding:16px 18px 15px;overflow:hidden;background:rgba(245,241,234,0.035);box-shadow:0 4px 12px rgba(8,12,9,0.18)}.stat-bartab::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--rule)}.stat-bartab .stat-num{font-family:var(--font-heading);font-weight:700;font-size:34px;line-height:1;color:var(--text-bright);letter-spacing:-0.01em}.stat-bartab .stat-label{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--text-dim)}

/* control panel - Pillbar */
.pillbar{font-family:var(--font-body);background:var(--bg-raised);border:1px solid var(--rule);border-radius:22px;padding:18px 20px 20px;max-width:560px;box-shadow:0 8px 24px rgba(0,0,0,0.32),inset 0 1px 0 rgba(245,241,234,0.04);color:var(--text)}.pillbar-stage{height:132px;border-radius:16px;margin-bottom:18px;background:radial-gradient(120px 80px at 30% 35%,rgba(212,196,160,0.16),transparent 70%),radial-gradient(160px 120px at 78% 80%,rgba(143,179,199,0.12),transparent 72%),var(--bg);border:1px solid var(--rule);box-shadow:inset 0 1px 0 rgba(245,241,234,0.03),inset 0 -20px 40px rgba(0,0,0,0.25)}.pillbar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:0 4px}.pillbar-title{font-family:var(--font-heading);font-size:1.18rem;font-weight:700;color:var(--text-bright)}.pillbar-readout{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--font-mono);background:rgba(212,196,160,0.10);border:1px solid rgba(212,196,160,0.28);border-radius:999px;padding:5px 13px}.pillbar-readout b{color:var(--accent-hover);font-weight:600;font-size:0.96rem}.pillbar-readout span{color:var(--text-dim);font-size:0.72rem;letter-spacing:0.06em}.pillbar-sliderrow{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:0 4px}.pillbar-sliderrow label{font-size:0.82rem;color:var(--text-dim);min-width:66px}.pillbar-sliderval{font-family:var(--font-mono);font-size:0.86rem;color:var(--text);min-width:44px;text-align:right}.pillbar input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:18px;background:transparent;cursor:pointer;margin:0}.pillbar input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--rule);border:none}.pillbar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--accent);border:none;box-shadow:0 0 0 1px rgba(8,12,9,0.25),0 1px 3px rgba(8,12,9,0.4);transition:background .15s,box-shadow .15s,transform .1s}.pillbar input[type=range]:hover::-webkit-slider-thumb,.pillbar input[type=range]:focus-visible::-webkit-slider-thumb{background:var(--accent-hover);box-shadow:0 0 0 1px rgba(8,12,9,0.25),0 0 0 4px rgba(212,196,160,0.18);transform:scale(1.08)}.pillbar input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--rule);border:none}.pillbar input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--accent)}.pillbar input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:none;box-shadow:0 0 0 1px rgba(8,12,9,0.25),0 1px 3px rgba(8,12,9,0.4)}.pillbar-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px;flex-wrap:wrap}.pillbar-seg{display:inline-flex;background:var(--bg);border:1px solid var(--rule);border-radius:999px;padding:3px;gap:2px}.pillbar-seg button{font-family:var(--font-body);font-size:0.78rem;color:var(--text-dim);background:transparent;border:none;border-radius:999px;padding:6px 15px;cursor:pointer}.pillbar-seg button.is-on{color:var(--bg-raised);background:var(--accent);font-weight:600}.pillbar-actions{display:inline-flex;gap:8px}.pillbar-btn{font-family:var(--font-body);font-size:0.82rem;border-radius:999px;padding:8px 18px;cursor:pointer;border:1px solid transparent}.pillbar-btn--primary{background:var(--accent);color:var(--bg-raised);font-weight:600;box-shadow:0 2px 8px rgba(212,196,160,0.18)}.pillbar-btn--reset{background:transparent;color:var(--text-dim);border-color:var(--rule);display:inline-flex;align-items:center;gap:6px}.pillbar-btn--reset .gl{font-size:0.95rem;line-height:1}


/* endcap next-post nav - the quiet exit at the end of a collection post: kicker, the next post's title, then the collection + Home. Injected between </main> and the footer by tools/gen-post-nav.mjs (data in tools/gen-hubs.mjs), so it inherits no post-local wrappers; it centers itself on the common post measure. */
.u-next{max-width:var(--measure,760px);margin:2.75rem auto 0;padding:1.7rem var(--gutter,1.5rem) 2rem;border-top:1px solid var(--rule);font-family:var(--font-body)}
/* The footer's own top clearance is for pages that end at the footer rule; after
   the endcap (which now carries its own bottom padding) it would double up, so
   the two rules share one even rhythm: rule, nav, rule, copyright. */
.u-next + .site-footer{padding-top:0}
.u-next-k{margin:0 0 0.55rem;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-faint)}
.u-next-t{margin:0;font-family:var(--font-heading);font-size:1.65rem;line-height:1.22;letter-spacing:-0.01em}
.u-next-link{color:var(--text-bright);text-decoration:none;transition:color .25s}
.u-next-link:hover{color:var(--accent-hover)}
.u-next-more{margin:0.85rem 0 0;font-size:0.95rem;color:var(--text-faint)}
.u-next-more a{color:var(--text-dim);text-decoration:none;transition:color .25s}
.u-next-more a:hover{color:var(--text-bright)}
.u-next-sep{margin:0 0.6rem;color:var(--rule-strong)}