/* ════════════════════════════════════════════════════════════════
   cards.css · the story-card system (entries, home feed, print sheet)
   Loaded after style.css on the home page, every entry page and the
   calculator. Uses style.css tokens; adds only what the cards need.

   An ENTRY is exactly four cards (.sc-card) in one deck (.sc-deck).
   Each card has a front (the claim) and a back (the evidence). The
   faces sit in one grid cell, so a card is as tall as its taller face.
   Without JS both faces show, front above back. With JS (cards.js adds
   .is-interactive) the card flips in 3D. In print, every card shows
   front + condensed back, four quadrants on one Letter page.

   Never put overflow / opacity / filter / clip-path on .sc-inner: any
   of them flattens the 3D and the flip breaks. Never use <header>,
   <section> or <footer> inside an entry: style.css styles those bare
   elements (fixed header, 820px sections, maroon footer).
   ════════════════════════════════════════════════════════════════ */

/* ── message colors: one per core message, plus alternatives ──
   Meaning never rests on color alone: every band also names the
   message in words, and print swaps color for a rule pattern. */
:root {
  --sc-dur: 650ms;
  --lake-deep: #17607C;  /* lake, deepened so white text clears AA */
}
.msg-taxes      { --msg: var(--maroon);    --msg-deep: var(--maroon-deep); --msg-tint: var(--maroon-tint); }
.msg-voice,
.msg-priorities { --msg: var(--maroon);    --msg-deep: var(--maroon-deep); --msg-tint: var(--maroon-tint); }
.msg-alt        { --msg: var(--lake-deep); --msg-deep: #0F4A60;            --msg-tint: #E3F0F5; }

/* ════════════════ Entry page frame ════════════════ */
.entry .page-title { background: var(--msg, var(--maroon)); padding-bottom: clamp(2rem, 4.5vw, 3rem); }
.entry .page-title h1 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.entry-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: .9rem; }
.chip-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--display); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .7rem; border-radius: 4px; text-decoration: none;
  background: rgba(255,255,255,.14); color: var(--white); border: 2px solid rgba(255,255,255,.75);
}
a.chip-tag:hover { background: rgba(255,255,255,.26); color: var(--white); }
/* a card with no head keeps one for screen readers (its band) */
.sc-head-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.entry-byline { margin: .9rem 0 0; font-size: .9rem; color: rgba(255,255,255,.78); }
.entry-author { font-weight: 700; color: var(--white); }

.sc-wrap { max-width: 980px; margin: 0 auto; padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1rem, 4vw, 1.5rem) 0; }
.sc-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.sc-toolbar[hidden] { display: none; }
.sc-sharebar { display: flex; justify-content: center; margin-top: 1.4rem; }
.sc-sharebar[hidden] { display: none; }
.sc-hint { font-size: .85rem; color: var(--gray); margin: 0; }
.sc-tools { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn-sm { padding: .55rem .95rem; font-size: .85rem; }

/* ════════════════ The deck ════════════════ */
.sc-deck {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: clamp(1.1rem, 2.6vw, 1.7rem);
}
@media (min-width: 760px) { .sc-deck { grid-template-columns: 1fr 1fr; } }
.sc-card { margin: 0; position: relative; scroll-margin-top: 96px; }
/* trading-card proportions as a MINIMUM height (an aspect-ratio would clip a long back:
   grid items with aspect-ratio don't grow to fit their content) */
@media (min-width: 760px) { .sc-deck.is-interactive .sc-inner { min-height: clamp(30rem, 48vw, 35rem); } }

/* ── faces (shared) ── */
.sc-face {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 2px solid var(--msg);
  border-radius: 12px;
  overflow: hidden; outline-offset: 4px;
}
.sc-front { background: var(--paper); }
.sc-face:focus { outline: none; }
.sc-face:focus-visible { outline: 3px solid var(--focus); }

/* the band: the card's message name, lettered like a street sign, with a white inner keyline */
.sc-band {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  margin: 0; padding: .75rem 1rem;
  background: var(--msg); color: var(--white);
  font-family: var(--display); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  box-shadow: inset 0 0 0 4px var(--msg), inset 0 0 0 6px var(--white);
}
.sc-band { text-align: center; }
.sc-band-msg { display: none; }
.sc-print-only { display: none; }            /* a key moved to the front on screen (key_front) */
.sc-key-front { margin: .9rem 0 0; }   /* the message name, for print: the band reads "Your taxes · <mini-header>" there */
.sc-back .sc-band {
  background: var(--msg-tint); color: var(--msg-deep); justify-content: space-between;
  box-shadow: inset 0 0 0 4px var(--msg-tint), inset 0 0 0 6px var(--msg);
}
.sc-back .sc-band .exhibit-badge { font-family: var(--sans); font-size: .72rem; padding: .2rem .5rem; letter-spacing: 0; text-transform: none; }
.sc-back .sc-band .badge-measured { background: var(--msg); border-color: var(--msg); color: var(--white); }
.sc-back .sc-band .badge-model { background: var(--white); border-color: var(--msg); color: var(--msg); }

.sc-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.1rem 1.35rem 1.15rem; }

/* front: the "art box" holds the big number */
.sc-stat {
  margin: 0 0 1rem; padding: 1rem .9rem .95rem; text-align: center;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  position: relative;
}
.sc-stat::after {   /* inset keyline, echoing the hero */
  content: ''; position: absolute; inset: 5px; border-radius: 8px; pointer-events: none;
  border: 1px solid var(--msg-tint);
}
.sc-num {
  display: block; font-family: var(--display); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: clamp(2.3rem, 5.2vw, 3.1rem); line-height: 1.02; letter-spacing: 0;
  color: var(--msg);
}
.sc-num-label { display: block; margin-top: .35rem; font-size: .8rem; line-height: 1.35; color: #5a5156; }
/* the art box takes up whatever height the (taller) back leaves over, like a
   trading card's picture frame; the claim text sits below it */
.sc-front .sc-stat {
  flex: 1 1 auto; min-height: 7.5rem; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, var(--white) 0%, var(--msg-tint) 140%);
}
.sc-front .sc-num { font-size: clamp(2.5rem, 5.6vw, 3.5rem); }
.sc-qt { display: block; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 1.95rem); font-weight: 700; font-style: italic; line-height: 1.2; letter-spacing: -.01em; color: var(--msg); }
.sc-head { font-size: clamp(1.5rem, 2.8vw, 1.8rem); line-height: 1.08; margin: 0 0 .55rem; letter-spacing: .005em; }
.sc-thesis { font-size: 1rem; line-height: 1.55; color: #2e272b; margin: 0 0 1rem; }

/* chart-on-front layout (every entry, .sc-cf): the number becomes a
   compact line, the chart sits under the claim, and the back's extras fold into <details> */
.sc-cf .sc-front .sc-stat {
  flex: none; min-height: 0; flex-direction: row; align-items: baseline; gap: .7rem;
  text-align: left; padding: 0; margin: 0 0 .7rem; background: none; border: 0;
}
.sc-cf .sc-front .sc-stat::after { display: none; }
.sc-cf .sc-front .sc-num { font-size: clamp(2.6rem, 5.4vw, 3.4rem); flex: none; }
.sc-cf .sc-front .sc-num-label { margin: 0; }
.sc-cf .sc-front .sc-thesis { margin-bottom: .9rem; }
.sc-cf .sc-front .sc-visual { margin: auto 0 .9rem; padding: .8rem; background: var(--white); border: 2px solid #e2d9dc; border-radius: 8px; }
.sc-details { margin: 0 0 .7rem; font-size: .86rem; }
.sc-details summary { cursor: pointer; font-weight: 700; color: var(--msg-deep); margin-bottom: .45rem; }
.sc-details[open] summary { margin-bottom: .6rem; }
@media (min-width: 760px) { .sc-deck.is-interactive .sc-cf .sc-inner { min-height: 0; } }

/* charts and images on the front open larger on click (cards.js) */
.sc-zoomable { position: relative; cursor: zoom-in; }
.sc-zoomable::after {
  content: 'Enlarge +'; display: block; text-align: right; margin-top: .35rem;
  font-size: .72rem; font-weight: 700; color: var(--msg-deep); opacity: .8; pointer-events: none;
}
.sc-zoomable:hover::after, .sc-zoomable:focus-visible::after { opacity: 1; }
.sc-zoomable:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sc-zoom {
  margin: auto; width: min(94vw, 960px); max-height: 92vh; padding: clamp(1rem, 3vw, 2rem); border: 0; border-radius: 14px;
  background: var(--white); box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: auto;
}
.sc-zoom::backdrop { background: rgba(28, 22, 25, .72); }
.sc-zoom .sc-visual { margin: 0; padding: 0; border: 0; background: none; }
.sc-zoom svg { display: block; width: 100%; height: auto; max-height: 80vh; }
.sc-zoom img { display: block; max-width: 100%; max-height: 80vh; width: auto; margin: 0 auto; border-radius: 8px; }
.sc-zoom figcaption { font-size: .85rem; margin-top: .5rem; color: var(--gray); }
.sc-zoom-close {
  position: sticky; top: 0; float: right; margin: -.4rem -.4rem .4rem .8rem; width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--border); border-radius: 50%; background: var(--white); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 1;
}
.sc-zoom-close:hover { background: var(--paper-2); }
@media (prefers-reduced-motion: no-preference) {
  .sc-zoom[open] { animation: sc-zoom-in .18s ease-out; }
  @keyframes sc-zoom-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
}

/* back: the evidence */
.sc-visual { margin: 0 0 .85rem; }
.sc-visual svg, .sc-visual img { display: block; width: 100%; height: auto; }
.sc-visual img { border-radius: 8px; border: 1px solid var(--border); }
.sc-visual figcaption { font-size: .72rem; color: var(--gray); margin-top: .3rem; line-height: 1.4; }
.sc-key { font-size: .95rem; line-height: 1.5; margin: 0 0 .7rem; color: var(--ink); }
.sc-key p { margin: 0 0 .3rem; }
.sc-key-list { margin: 0; padding-left: 1.2rem; }
.sc-key-list li { margin: 0 0 .2rem; }
.sc-more { font-size: .86rem; line-height: 1.5; color: #4a4247; margin: 0 0 .7rem; }
.sc-more p { margin: 0 0 .5rem; }
/* the city's side: burnt orange, set apart from the alternatives' blue (print keeps its own small rules below) */
.sc-city {
  margin: 0 0 .8rem; padding: .75rem .9rem; font-size: .92rem; line-height: 1.5;
  background: #FBEDE3; border-left: 6px solid #A84A12; border-radius: 6px; color: #3a3338;
}
.sc-city b { display: block; font-family: var(--display); font-size: 1.08rem; letter-spacing: .02em; color: #A84A12; margin-bottom: .15rem; }
.sc-city.sc-has-answer { margin-bottom: 0; border-radius: 6px 6px 0 0; }
.sc-answer {
  margin: 0 0 .8rem; padding: .7rem .9rem; font-size: .92rem; line-height: 1.5;
  background: var(--msg-tint); border-left: 6px solid var(--msg); border-radius: 0 0 6px 6px; color: #3a3338;
}
.sc-answer b { display: block; font-family: var(--display); font-size: 1.08rem; letter-spacing: .02em; color: var(--msg-deep); margin-bottom: .15rem; }
.sc-aside {
  margin: 0 0 .7rem; padding: .55rem .75rem; font-size: .84rem; line-height: 1.45;
  background: var(--msg-tint); border-left: 5px solid var(--msg); border-radius: 6px; color: #3a3338;
}
.sc-aside b { display: block; font-family: var(--display); font-size: 1rem; letter-spacing: .02em; color: var(--msg-deep); margin-bottom: .1rem; }
.sc-terms { margin: 0 0 .7rem; font-size: .8rem; line-height: 1.4; display: grid; gap: .3rem; }
.sc-terms dt { font-weight: 700; color: var(--msg-deep); display: inline; }
.sc-terms dt::after { content: ' \2014 '; font-weight: 400; color: var(--gray); }
.sc-terms dd { display: inline; margin: 0; color: #4a4247; }
.sc-terms div { margin: 0; }
.sc-src { font-size: .72rem; line-height: 1.45; color: #6b6166; margin: 0 0 .6rem; font-style: italic; }   /* darker than --gray: small text needs 4.5:1 */
.sc-src a { color: var(--msg-deep); }
dfn { font-style: normal; font-weight: 700; }   /* no dotted underline: it read as a tooltip that never opened; definitions live in the card's terms */

/* the flip control, bottom of each face */
.sc-flip {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .85rem; line-height: 1;
  padding: .6rem 1rem; border-radius: 5px;
  background: var(--white); color: var(--msg); border: 2px solid var(--msg);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sc-flip:hover { background: var(--msg); color: var(--white); }
.sc-flip .sc-flip-ic { font-size: 1.05em; transition: transform var(--sc-dur) var(--ease); }
.sc-flip:hover .sc-flip-ic { transform: rotate(180deg); }
.sc-deck:not(.is-interactive) .sc-flip { display: none; }

/* no JS: front then back, one readable column per card */
.sc-deck:not(.is-interactive) .sc-back { margin-top: .6rem; }

/* ════════════════ Interactive: the 3D flip ════════════════
   At rest a card is flat: one face shown, the other visibility:hidden, no
   transforms. Text inside a 3D context is painted as a cached bitmap and goes
   soft on some phones and in-app browsers, so cards.js adds .is-3d (and
   .is-turning for the transition) only while a card turns, then removes them. */
.sc-deck.is-interactive .sc-inner { display: grid; height: 100%; }
.sc-deck.is-interactive .sc-face { grid-area: 1 / 1; cursor: pointer; transition: box-shadow var(--dur) var(--ease); }
.sc-deck.is-interactive .sc-back { visibility: hidden; }
.sc-deck.is-interactive .is-flipped .sc-front { visibility: hidden; }
.sc-deck.is-interactive .is-flipped .sc-back  { visibility: visible; }

.sc-deck.is-interactive .sc-card.is-3d { perspective: 1800px; }
.sc-deck.is-interactive .is-3d .sc-inner { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.sc-deck.is-interactive .is-3d .sc-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sc-deck.is-interactive .is-3d .sc-front { transform: rotateY(0deg); }
.sc-deck.is-interactive .is-3d .sc-back  { transform: rotateY(180deg); }
.sc-deck.is-interactive .is-3d.is-flipped .sc-inner { transform: rotateY(180deg); }
.sc-deck.is-interactive .is-turning .sc-inner { transition: transform var(--sc-dur) cubic-bezier(.3, .1, .2, 1); }
.sc-deck.is-interactive .is-turning .sc-face { transition: visibility 0s linear calc(var(--sc-dur) / 2), box-shadow var(--dur) var(--ease); }
.sc-deck.is-interactive.is-flipping-all .is-turning .sc-inner { transition-delay: calc(var(--i, 0) * 80ms); }

/* lift on hover (uses `translate`, so it composes with the deal-in animation) */
.sc-deck.is-interactive .sc-card { transition: translate var(--dur) var(--ease); }
@media (hover: hover) {
  .sc-deck.is-interactive .sc-card:hover { translate: 0 -3px; }
  .sc-deck.is-interactive .sc-card:hover .sc-face { box-shadow: var(--shadow-lg); }
}

/* deal the cards in on load */
@keyframes sc-deal {
  from { opacity: 0; transform: translateY(26px) rotate(-1.2deg) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .sc-deck.is-interactive .sc-card { animation: sc-deal .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
}

/* reduced motion: no rotation, an instant swap. The visibility delay
   must be zeroed too: style.css zeroes durations, not delays. */
@media (prefers-reduced-motion: reduce) {
  .sc-deck.is-interactive .sc-inner { transform: none !important; transition: none; }
  .sc-deck.is-interactive .sc-face { transform: none !important; transition-delay: 0s !important; }
}

/* ════════════════ Mini charts (inline SVG, built by cards/build_card_charts.py) ════════════════
   Colors by class, never hex, so print can recolor them. Labels sit on the bars:
   no color-only legends. */
.sc-chart { font-family: var(--sans); overflow: visible; }
.sc-chart text { fill: var(--ink); font-size: 11px; }
.sc-chart .t-sm { font-size: 9.5px; fill: #5a5156; }
.sc-chart .t-lg { font-size: 13px; font-weight: 700; }
.sc-chart .t-num { font-family: var(--mono); font-weight: 600; }
.sc-chart .t-on { fill: var(--white); }
.sc-chart .hl  { fill: var(--msg); }
.sc-chart .s1  { fill: #C9B7BC; }
.sc-chart .s2  { fill: var(--msg-tint); stroke: var(--msg); stroke-width: 1; }
.sc-chart .s3  { fill: var(--slate); }
.sc-chart .pie-tid    { fill: var(--maroon); }
.sc-chart .tl-b5 { fill: #E9D6DB; }
.sc-chart .tl-gap { stroke: #fff; stroke-width: 1.5; }
.sc-chart .pie-city   { fill: #B05A6C; }
.sc-chart .pie-school { fill: var(--slate); }
.sc-chart .pie-county { fill: #D49A3A; }
.sc-chart .pie-mmsd   { fill: #4E8B6A; }
.sc-chart .pie-matc   { fill: #7E6FA8; }
.sc-chart .ln  { fill: none; stroke: var(--msg); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sc-chart .ln-2 { fill: none; stroke: #9a8f94; stroke-width: 2; stroke-dasharray: 4 3; }
.sc-chart .ax  { stroke: var(--border); stroke-width: 1; }
.sc-chart .ax-strong { stroke: #b9adb2; stroke-width: 1; }
.sc-chart .dot { fill: var(--msg); }
.sc-chart .dot-off { fill: #DCD2D5; }
.sc-chart .gap { fill: none; stroke: var(--msg); stroke-width: 1.5; stroke-dasharray: 3 3; }
.sc-chart .map-lake  { fill: #DCEBF1; }
.sc-chart .map-major { fill: none; stroke: #b9adb2; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sc-chart .map-mid   { fill: none; stroke: #c9bfc3; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sc-chart .map-minor { fill: none; stroke: #e2dcde; stroke-width: 1; }
.sc-chart .map-water { fill: #3d6f82; font-style: italic; }
.sc-chart .map-parcel { stroke: var(--msg); stroke-width: 1; stroke-linejoin: round; }

/* timeline visual (HTML, not SVG: dates and short labels read better as text) */
.sc-timeline { list-style: none; margin: 0; padding: .1rem 0 .1rem .9rem; border-left: 2px solid var(--msg-tint); display: grid; gap: .4rem; }
.sc-timeline li { margin: 0; position: relative; display: grid; grid-template-columns: 4.6rem 1fr; gap: .5rem; font-size: .82rem; line-height: 1.35; }
.sc-timeline li::before { content: ''; position: absolute; left: -1.24rem; top: .32rem; width: 9px; height: 9px; border-radius: 50%; background: var(--msg); border: 2px solid var(--white); }
.sc-timeline .tl-d { font-family: var(--mono); font-size: .74rem; font-weight: 600; color: var(--msg-deep); }
.sc-timeline .tl-t { color: var(--ink); }
.sc-timeline li.tl-hl .tl-t { font-weight: 700; }
.sc-timeline.tl-3 li { grid-template-columns: 4.6rem 7.5rem 1fr; }
.sc-timeline .tl-x { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--msg-deep); }
@media print {
  .sc-timeline { border-left: 1pt solid #000; padding-left: .1in; gap: .02in; }
  .sc-timeline li { grid-template-columns: .62in 1fr; font-size: 7pt; gap: .04in; }
  .sc-timeline li::before { background: #000 !important; left: -.135in; top: .03in; width: 5pt; height: 5pt; border: 0; }
  .sc-timeline .tl-d { font-size: 6.5pt; color: #000; }
  .sc-timeline.tl-3 li { grid-template-columns: .62in 1.05in 1fr; }
  .sc-timeline .tl-x { color: #000; }
}

/* two-sided timeline: one date line, one side moving in (left), the other moving out (right) */
.sc-versus { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: .74rem; line-height: 1.25; table-layout: fixed; }
.sc-versus thead th { font-family: var(--display); font-size: .95rem; letter-spacing: .02em; padding: 0 .45rem .3rem; border-bottom: 2px solid var(--msg); }
.sc-versus thead th.vs-l { text-align: right; color: var(--msg-deep); }
.sc-versus thead th.vs-r { text-align: left; color: #6a6065; }
.sc-versus thead td { width: 3.4rem; border-bottom: 2px solid var(--msg); }
.sc-versus td { padding: .3rem .45rem; vertical-align: middle; }
.sc-versus .vs-l { text-align: right; }
.sc-versus td.vs-l.vs-on { background: var(--msg); color: var(--white); font-weight: 600; border-radius: 5px 0 0 5px; }
.sc-versus td.vs-r.vs-on { background: #ECE6E8; color: #3a3338; border-radius: 0 5px 5px 0; }
.sc-versus tr.vs-end td.vs-r { background: var(--ink); color: var(--white); font-weight: 700; }
.sc-versus .vs-d { font-family: var(--mono); font-size: .66rem; font-weight: 600; color: var(--msg-deep); text-align: center; padding: .3rem .1rem;
  border-left: 2px solid var(--msg-tint); border-right: 2px solid var(--msg-tint); }
@media print {
  .sc-versus { font-size: 6.6pt; border-spacing: 0 1.5pt; }
  .sc-versus thead th { font-size: 8pt; padding: 0 .05in .02in; border-bottom: 1pt solid #000; color: #000 !important; }
  .sc-versus thead td { width: .5in; border-bottom: 1pt solid #000; }
  .sc-versus td { padding: .02in .05in; }
  .sc-versus td.vs-l.vs-on { background: #000 !important; color: #fff !important; }
  .sc-versus td.vs-r.vs-on { background: #fff !important; color: #000 !important; box-shadow: inset 0 0 0 .6pt #000; }
  .sc-versus tr.vs-end td.vs-r { background: #fff !important; color: #000 !important; box-shadow: inset 0 0 0 1.4pt #000; }
  .sc-versus .vs-d { font-size: 6pt; color: #000; padding: .02in 0; border-color: #bbb; }
}

/* ════════════════ Below the deck ════════════════ */
.entry-block { max-width: 980px; margin: 0 auto; padding: clamp(2.6rem, 6vw, 4rem) clamp(1rem, 4vw, 1.5rem) 0; }
.entry-block > h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: .4rem; }
.entry-block > .block-lede { color: #4a4247; margin-bottom: 1.2rem; max-width: 62ch; }

/* video slot (moved from episode.css) */
.episode-video {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: var(--msg-deep, var(--maroon-deep)); border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; text-align: center;
}
.episode-video::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 2.5px solid rgba(255,255,255,.6); border-radius: 8px;
}
.episode-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.episode-video .ev-soon { color: rgba(255,255,255,.82); margin: 0; padding: 1rem; line-height: 1.4; }
.episode-video .ev-soon strong {
  display: block; color: var(--gold); font-family: var(--display); font-size: 1.3rem; font-weight: 700;
  letter-spacing: .02em; margin-bottom: .3rem;
}

/* Connect St. Francis call to action */
.entry-connect { display: grid; gap: 1rem; align-items: center; background: var(--msg, var(--maroon)); }
@media (min-width: 720px) { .entry-connect { grid-template-columns: 1fr auto; } }
.entry-connect h2 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); margin: 0 0 .3rem; }
.entry-connect p { margin: 0; }
.entry-connect ul { margin: .8rem 0 0; padding-left: 1.2rem; display: grid; gap: .2rem; }
.btn-on-dark { background: var(--white); color: var(--msg, var(--maroon)); }
.btn-on-dark:hover { background: var(--paper-2); color: var(--msg-deep, var(--maroon-deep)); }
.entry-connect .btn-on-dark { color: var(--msg, var(--maroon)); }

/* previous / next entry (moved from episode.css) */
.entry-nav {
  max-width: 980px; margin: clamp(2.6rem, 6vw, 4rem) auto 0;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.entry-nav a {
  display: flex; flex-direction: column; gap: .2rem; text-decoration: none;
  background: var(--white); border: 2px solid var(--ink); border-radius: 10px;
  padding: 1rem 1.2rem; color: var(--ink);
  transition: background var(--dur) var(--ease);
}
.entry-nav a:hover { background: var(--paper-2); color: var(--ink); }
.entry-nav .en-dir { font-size: .85rem; font-weight: 700; color: var(--maroon); }
.entry-nav .en-title { font-family: var(--display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; }
.entry-nav .next { grid-column: 2; text-align: right; }

/* Alternatives carry their lake color through the page's own controls and the footer banner.
   The header nav and its SF sign stay maroon: they are the site's identity, not the article's. */
.msg-alt .btn-secondary { color: var(--msg-deep); border-color: var(--msg); }
.msg-alt .btn-secondary:hover { background: var(--msg-tint); color: var(--msg-deep); }
.msg-alt .entry-nav .en-dir { color: var(--msg); }
.msg-alt .entry-nav a:hover { background: var(--msg-tint); }
body.msg-alt > footer { background: var(--msg); }
@media (max-width: 560px) {
  .entry-nav { grid-template-columns: 1fr; }
  .entry-nav .next { grid-column: 1; }
}

/* placeholder for material still being added (moved from episode.css) */
.coming-soon { border: 1.5px dashed var(--gold); background: #FFF7E6; border-radius: 10px; padding: 1rem 1.3rem; margin: 1.4rem 0; }
.coming-soon .cs-label { display: block; font-size: .85rem; font-weight: 700; color: #7A5C00; margin-bottom: .3rem; }
.coming-soon p { margin: 0; }

/* Contribute page */
.connect-info p { max-width: 66ch; }
.connect-info p + h2 { margin-top: 2.2rem; }
#connect-go[aria-disabled="true"] { opacity: .7; pointer-events: none; }

/* print-only blocks stay out of the screen layout */
.sc-printhead, .sc-printfoot { display: none; }

/* ════════════════ Home: hero, explainer, article table ════════════════ */
/* title and purpose share one maroon sign over the photo: white lettering, white inner keyline */
.hero .hero-panel {
  width: fit-content; max-width: min(100%, 40rem); padding: clamp(1.3rem, 3vw, 2rem) clamp(1.4rem, 3.4vw, 2.3rem);
  background: var(--maroon); border-radius: 12px;
  box-shadow: inset 0 0 0 5px var(--maroon), inset 0 0 0 7.5px var(--white);
}
.hero .hero-panel h1 { color: var(--white); margin-bottom: .7rem; text-transform: uppercase; letter-spacing: .02em; line-height: .98; }
.hero .hero-panel .lede { color: rgba(255,255,255,.92); margin-bottom: 0; }
.home .hero { min-height: 78vh; }
.home .band { scroll-margin-top: 80px; }
.explainer { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
@media (min-width: 820px) { .explainer { grid-template-columns: 1fr 1fr; } }
.ex-card {
  display: flex; flex-direction: column; padding: clamp(1.3rem, 3vw, 1.9rem);
  background: var(--white); border: 7px double var(--ink); border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: transform .2s var(--ease);
}
a.ex-card:hover { transform: translateY(-2px); }
.ex-card p a { color: var(--maroon); font-weight: 600; }
.ex-card h2 { margin: .3rem 0 .6rem; font-size: clamp(1.7rem, 3vw, 2.1rem); }
.ex-card p { color: #3a3338; }
.ex-points { margin: 0 0 1rem; padding-left: 1.2rem; color: #3a3338; }
.ex-points li + li { margin-top: .35rem; }
.ex-kinds { margin: .4rem 0 0; display: grid; gap: .7rem; }
.ex-kinds div { display: flex; gap: .8rem; align-items: baseline; }
.ex-kinds dt { flex: none; width: 6.6rem; }
.ex-kinds dd { margin: 0; color: #3a3338; }
/* type plates: lettered like a sign, with a white inner keyline */
.ex-chip { display: inline-block; padding: .2rem .65rem; border-radius: 4px; font-family: var(--display); font-size: 1rem; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--white); }
.ex-issue { background: var(--maroon); box-shadow: inset 0 0 0 2px var(--maroon), inset 0 0 0 3.5px var(--white); }
.ex-alt { background: #17607C; box-shadow: inset 0 0 0 2px #17607C, inset 0 0 0 3.5px var(--white); }
.ex-go { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; font-weight: 700; color: var(--maroon); }
.ex-go::after { content: '\00A0\2192'; }
/* the author's note: a signed letter, not another panel */
.author-note { max-width: 66ch; margin: 0 auto; padding-left: clamp(1rem, 3vw, 1.6rem); border-left: 6px solid var(--maroon); }
.author-note h2 { margin: 0 0 1rem; }
.author-note p { color: #3a3338; }
.author-note p a { color: var(--maroon); font-weight: 600; }
.author-sign { margin-top: 1.4rem; font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--ink) !important; line-height: 1.1; }
.author-sign span { display: block; font-family: var(--sans); font-size: .9rem; font-weight: 400; color: #5a5257; }
.feed-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.4rem; }
.feed-head h2 { margin: 0; }
.feed-head p { margin: .3rem 0 0; color: #4a4247; max-width: 56ch; }
.feed-filter { display: inline-flex; gap: .45rem; }
.feed-filter button {
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
  padding: .5rem .95rem; border-radius: 5px; border: 2px solid var(--maroon); background: var(--white); color: var(--maroon);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.feed-filter button:hover { background: var(--maroon-tint); color: var(--maroon); }
.feed-filter button[aria-pressed="true"] { background: var(--maroon); color: var(--maroon-on); box-shadow: inset 0 0 0 2px var(--maroon), inset 0 0 0 3.5px var(--white); }
.feed-filter[hidden] { display: none; }

.feed { width: 100%; border-collapse: collapse; }
.feed th { text-align: left; font-size: .9rem; font-weight: 700; color: var(--ink); border-bottom: 3px solid var(--ink); padding: .7rem 1rem; }
.feed td { padding: .9rem 1rem; border-top: 2px solid #e2d9dc; vertical-align: top; }
.feed tr[hidden] { display: none; }
.feed tbody tr { position: relative; }
.feed tbody tr:hover { background: var(--paper); }
.feed .ft-title a { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; letter-spacing: .01em; color: var(--ink); text-decoration: none; }
.feed .ft-title a::after { content: ''; position: absolute; inset: 0; }   /* whole row opens the article */
.feed .ft-title a:hover, .feed .ft-title a:focus-visible { color: var(--maroon); text-decoration: underline; }
.feed .ft-desc { display: block; margin-top: .2rem; font-size: .92rem; color: #4a4247; }
.feed .ft-type, .feed .ft-date { white-space: nowrap; }
.feed .ft-date { font-size: .88rem; color: #5a5156; }
@media (max-width: 639px) {   /* phone: type and date sit under the description */
  .feed thead { display: none; }
  .feed tbody tr { display: grid; grid-template-columns: auto 1fr; gap: .4rem .7rem; padding: .9rem 1rem; border-top: 1px solid var(--border); }
  .feed tbody tr:first-child { border-top: 0; }
  .feed td { padding: 0; border: 0; }
  .feed .ft-title { grid-column: 1 / -1; }
  .feed .ft-date { align-self: center; }
}
.feed-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.feed-pager[hidden] { display: none; }
.feed-pager button { font: inherit; font-weight: 700; font-size: .9rem; padding: .45rem 1rem; border-radius: 5px; border: 2px solid var(--maroon); background: var(--white); color: var(--maroon); cursor: pointer; }
.feed-pager button:disabled { color: #aaa1a5; cursor: default; }
.feed-count { font-size: .88rem; color: #5a5156; }

/* ════════════════ Print: one entry = one side of Letter ════════════════
   2×2 quadrants, each = the card's front + a condensed back. Backgrounds
   are off by default when printing, so nothing depends on fills: bands go
   black text with a per-message rule pattern; badges get outlines. */
@media print {
  @page { size: letter portrait; margin: .35in; }
  html { font-size: 10pt; }
  body { background: #fff !important; color: #000; }
  #site-header, footer, .toc-rail, .lightbox, .page-title, .sc-toolbar, .sc-sharebar,
  .entry-block, .entry-nav, .sc-flip, .sc-more, .sc-terms, .sc-details, .sc-zoom, .skip-link { display: none !important; }
  .sc-zoomable::after { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  * { box-shadow: none !important; animation: none !important; }
  a { color: #000 !important; text-decoration: none !important; }

  /* the sheet: head, deck, foot; the deck takes whatever height is left (11in − 2 × .35in margins) */
  main { display: flex; flex-direction: column; height: 10.2in; }
  .sc-printhead {
    display: grid !important; grid-template-columns: 1fr auto; gap: .2in; align-items: end; flex: none;
    margin: 0 0 .08in; padding: 0 0 .06in; border-bottom: 1.5pt solid #000;
  }
  .sc-printhead .ph-kicker { font-family: var(--display); font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  .sc-printhead .ph-title { font-family: var(--display); font-size: 19pt; font-weight: 800; line-height: 1.02; margin: .02in 0; letter-spacing: .005em; }
  .sc-printhead .ph-dek { font-size: 8pt; line-height: 1.25; margin: 0; }
  .sc-printhead .ph-url { text-align: right; font-family: var(--mono); font-size: 7.5pt; line-height: 1.3; }
  .sc-printhead .ph-url b { display: block; font-family: var(--display); font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em; }

  .sc-wrap { max-width: none; padding: 0; margin: 0; flex: 1 1 auto; min-height: 0; display: flex; }
  .sc-deck {
    display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 1fr 1fr;
    gap: .1in; flex: 1 1 auto; min-height: 0; width: 100%;
  }
  .sc-card { aspect-ratio: auto; break-inside: avoid; page-break-inside: avoid; overflow: hidden; perspective: none !important; translate: none !important;
    border: .75pt solid #000; border-radius: 6pt; padding: 0; }
  .sc-inner { display: flex !important; flex-direction: column; height: 100%; transform: none !important; }
  .sc-face {
    transform: none !important; visibility: visible !important; backface-visibility: visible !important; -webkit-backface-visibility: visible !important;
    border: 0; border-radius: 0; background: none !important; overflow: visible; cursor: auto;
  }
  .sc-back { flex: 1 1 auto; margin: 0 !important; }
  .sc-band {
    background: none !important; color: #000 !important; padding: .05in .1in .04in; justify-content: flex-start;
    font-size: 8.5pt; letter-spacing: .06em; border-bottom: 1.5pt solid #000;
  }
  .sc-band-msg { display: inline; }
  .sc-city.sc-has-answer, .sc-answer, .sc-screen-only { display: none !important; }
  .sc-band-msg::after { content: " \00b7 "; }
  .msg-alt .sc-band { border-bottom-style: double; border-bottom-width: 3pt; }
  .sc-back .sc-band { border-bottom: .5pt solid #000; justify-content: space-between; padding-top: .03in; }
  .sc-back .sc-band > span:first-child { display: none; }   /* "The evidence" label: the quadrant is already labeled */
  .exhibit-badge { background: none !important; color: #000 !important; border: 1pt solid #000 !important; font-size: 5.5pt !important; padding: .01in .05in !important; }
  .badge-model { border-style: dashed !important; }
  .sc-body { padding: .06in .1in .05in; }
  .sc-stat, .sc-front .sc-stat { display: flex; flex: none; flex-direction: row; justify-content: flex-start; min-height: 0; align-items: baseline; gap: .08in; margin: 0 0 .04in; padding: 0; border: 0; text-align: left; background: none !important; }
  .sc-front .sc-num { font-size: 19pt; }
  .sc-qt { font-size: 12pt; color: #000 !important; }
  .sc-stat::after { display: none; }
  .sc-num { font-size: 19pt; color: #000 !important; }
  .sc-num-label { margin: 0; font-size: 7pt; color: #000; }
  .sc-head { font-size: 13pt; line-height: 1.08; margin: 0 0 .03in; }
  .sc-thesis { font-size: 8.4pt; line-height: 1.3; margin: 0; color: #000; }
  .sc-visual { margin: 0 0 .04in; }
  .sc-visual svg { max-height: 1.55in; }
  .sc-visual img { max-height: 1.45in; width: auto; max-width: 100%; margin: 0 auto; border-color: #000; }
  .sc-visual figcaption { display: none; }
  /* chart-on-front layout: drop the screen box and size it like the back-of-card charts */
  .sc-cf .sc-front .sc-stat { margin: 0 0 .04in; }
  .sc-cf .sc-front .sc-num { font-size: 19pt; }
  .sc-cf .sc-front .sc-thesis { margin: 0 0 .04in; }
  .sc-cf .sc-front .sc-visual { margin: 0 0 .03in; padding: 0; border: 0; background: none; }
  .sc-cf .sc-front .sc-visual svg { max-height: 1.3in; }
  .sc-key { font-size: 7.6pt; line-height: 1.28; margin: 0 0 .03in; color: #000; }
  .sc-key p { margin: 0; }
  .sc-key-list { padding-left: .16in; }
  .sc-key-list li { margin: 0; }
  .sc-city { font-size: 7pt; line-height: 1.25; margin: 0 0 .03in; padding: .02in .06in; background: none !important; border-left: 1.5pt solid #000; font-style: italic; color: #000; }
  .sc-city b { color: #000; font-size: 8pt; font-style: normal; }
  .sc-aside { font-size: 7pt; line-height: 1.25; margin: 0 0 .03in; padding: .02in .06in; background: none !important; border-left: 1.5pt solid #000; color: #000; }
  .sc-aside b { color: #000; font-size: 8pt; }
  .sc-src { display: none !important; }
  .sc-print-only { display: block !important; }
  .sc-key-front { display: none !important; }   /* sources live on the website; the sheet's footer says so */
  dfn { border-bottom: 0; }
  /* charts in black and gray */
  .sc-chart text { fill: #000 !important; }
  .sc-chart .t-on { fill: #fff !important; }
  .sc-chart .hl, .sc-chart .dot { fill: #000 !important; }
  .sc-chart .s1, .sc-chart .dot-off { fill: #bdbdbd !important; }
  .sc-chart .s2 { fill: #fff !important; stroke: #000 !important; }
  .sc-chart .s3 { fill: #6d6d6d !important; }
  .sc-chart .pie-tid { fill: #000 !important; }
  .sc-chart .tl-b5 { fill: #e2e2e2 !important; }
  .sc-chart .pie-city { fill: #555 !important; }
  .sc-chart .pie-school { fill: #8f8f8f !important; }
  .sc-chart .pie-county { fill: #bdbdbd !important; }
  .sc-chart .pie-mmsd { fill: #dcdcdc !important; }
  .sc-chart .pie-matc { fill: #fff !important; stroke: #000 !important; }
  .sc-chart .ln { stroke: #000 !important; }
  .sc-chart .ln-2 { stroke: #777 !important; }
  .sc-chart .gap { stroke: #000 !important; }
  .sc-chart .map-lake { fill: #e6e6e6 !important; }
  .sc-chart .map-parcel { stroke: #000 !important; }
  .sc-chart .map-major { stroke: #9a9a9a !important; }
  .sc-chart .map-mid { stroke: #b5b5b5 !important; }
  .sc-chart .map-minor { stroke: #dcdcdc !important; }

  .sc-printfoot { display: block !important; flex: none; margin-top: .06in; font-size: 6pt; line-height: 1.3; text-align: center; }
  .entry-nav, .sc-printfoot + * { display: none !important; }
}