/* society101 — the society signal.
   Tokens mirror ../design-system/tokens.css, derived from trends101's editorial sheet
   (Newsreader display over Inter, the blue primary, paper at 98%) and the Side Effects
   design canvas. The design card (design-system/ui_kits/blotter/blotter.html, synced
   to the claude.ai/design project "society101") embeds this sheet verbatim: after an
   edit here, run `python3 design-system/sync.py` and sync the card. */

:root {
  color-scheme: light;

  /* ground */
  --paper: #fafafa;
  --surface: #ffffff;
  --line: #e3e3e3;
  --chip: #ececec;
  --hairline: #c7c7c7;
  --box: #b5b5b5;

  /* text */
  --ink: #1a1a1a;
  --ink-soft: #3d3d3d;
  --ink-faint: #5c5c5c;
  --ink-mute: #8a8a8a;

  /* signal: one accent, the builders' side's primary */
  --accent: #2a5be6;

  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --fs-eyebrow: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-title: clamp(36px, 4.6vw, 46px);
  --fs-headline: clamp(22px, 2.4vw, 26px);
  --fs-wire: clamp(20px, 2.2vw, 24px);
  --fs-day: 30px;

  /* space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 22px;
  --s6: 32px;
  --s7: 56px;

  /* shape */
  --r-sm: 4px;
  --r-md: 8px;
  --width: 1120px;
  --gutter: clamp(16px, 5vw, 80px);
  --rail: 320px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.5 var(--font); font-feature-settings: "cv11", "ss01";
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
p { margin: 0; }

/* --- the site masthead ----------------------------------------------------------- */
.site {
  position: sticky; top: 0; z-index: 40; height: 56px;
  border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .9); backdrop-filter: blur(8px);
}
.site-inner {
  max-width: calc(var(--width) + 2 * var(--gutter)); margin: auto; height: 100%; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.wordmark { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.wordmark .brand { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.wordmark .bar { color: var(--hairline); }
.wordmark .signal { font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.site nav { display: flex; align-items: center; gap: var(--s1); font-size: var(--fs-sm); }
.site nav a { padding: 8px 12px; border-radius: 6px; color: var(--ink-faint); font-weight: 500; white-space: nowrap; }
.site nav a:hover { color: var(--ink); background: rgb(236 236 236 / .5); }
.site nav a.is-active { color: var(--ink); background: var(--chip); font-weight: 600; }
.site nav a.other { color: var(--ink-soft); }

/* --- the page --------------------------------------------------------------------- */
.shell { max-width: calc(var(--width) + 2 * var(--gutter)); margin: auto; padding: 44px var(--gutter) 64px; }
.page-head { display: flex; flex-direction: column; gap: 14px; }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 40px; }
h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-title); line-height: 1.05; letter-spacing: -.02em; }
.stamp { font-size: var(--fs-sm); color: var(--ink-faint); padding-bottom: 6px; }
.intro { max-width: 760px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.intro a { color: var(--ink); border-bottom: 1px solid var(--hairline); }
.intro a:hover { color: var(--accent); border-color: var(--accent); }

/* --- the wire strip: three cells, a rule above in ink ------------------------------- */
.wire {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
}
.wire-cell { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4) 20px; border-right: 1px solid var(--line); }
.wire-cell:first-child { padding-left: 0; }
.wire-cell:last-child { padding-right: 0; border-right: 0; }
.wire-label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.wire-label.accent { color: var(--accent); }
.wire-value { font-family: var(--font-display); font-size: var(--fs-wire); line-height: 1.15; text-wrap: pretty; }
.wire-note { font-size: var(--fs-sm); color: var(--ink-faint); }
.mute { color: var(--ink-mute); }
.accent { color: var(--accent); }

/* --- the two columns -------------------------------------------------------------- */
.columns { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: var(--s7); padding-top: var(--s6); align-items: start; }
.reading { min-width: 0; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); }
.section-head .label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.section-head .meta { font-size: var(--fs-xs); color: var(--ink-faint); }
.empty { padding: 48px 0; text-align: center; color: var(--ink-faint); }

/* --- the blotter: one case per row, the date in the gutter ------------------------- */
.case { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.case time { display: flex; flex-direction: column; gap: var(--s1); }
.case .day { font-family: var(--font-display); font-size: var(--fs-day); line-height: 1; font-variant-numeric: tabular-nums; }
.case .month { font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.case .year { font-size: var(--fs-eyebrow); font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.case .seen { font-size: 10px; color: var(--ink-mute); }
.case .body { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-xs); }
.mech { padding: 3px 8px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.cat { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.dot { color: var(--hairline); }
.inst { font-weight: 600; color: var(--ink-soft); }
.case h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-headline); line-height: 1.2; letter-spacing: -.01em; text-wrap: pretty; }
.effect { font-size: var(--fs-base); line-height: 1.5; color: var(--ink-soft); }
.pays { font-size: var(--fs-sm); color: var(--ink-soft); }
.pays strong { color: var(--ink); font-weight: 600; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--fs-xs); color: var(--ink-faint); }
.meta small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.squares { display: inline-flex; gap: 3px; vertical-align: -1px; }
.squares i { display: inline-block; width: 9px; height: 9px; border: 1px solid var(--box); }
.squares i.on { background: var(--ink); border-color: var(--ink); }
.sources { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sources a { font-weight: 600; color: var(--ink-soft); }
.sources a:hover { color: var(--accent); }
@media (min-width: 640px) { .sources { margin-left: auto; } }

/* --- the rail: the tipping board ------------------------------------------------- */
.rail { display: flex; flex-direction: column; gap: var(--s4); }
.card { display: flex; flex-direction: column; gap: var(--s3); padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.card-title { font-family: var(--font-display); font-size: 19px; line-height: 1.2; }
.card-meta { font-size: var(--fs-xs); color: var(--ink-faint); white-space: nowrap; }
.card-note { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-faint); }
.bars { display: flex; align-items: flex-end; gap: var(--s1); height: 32px; }
.bar { flex: 1; border-radius: 2px; background: var(--chip); }
.bar.on { background: var(--accent); }
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ladder li { padding: 3px 7px; border-radius: var(--r-sm); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--box); }
.ladder li.passed { background: var(--chip); color: var(--ink-faint); }
.ladder li.from { text-decoration: line-through; }
.ladder li.reached { background: var(--ink); color: #fff; }
.moved { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }

/* --- resilience: the rung as the lead chip, "collected" for the ledger's positive cases --- */
.rung { padding: 3px 8px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.rung.reform { background: var(--accent); }
.lane { padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid var(--ink); color: var(--ink); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.effect strong { color: var(--ink); font-weight: 600; }

/* --- who pays: one block per group, the cases under it; the share strip on the rail --- */
.group { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.group h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-headline); line-height: 1.2; letter-spacing: -.01em; }
.group-meta { font-size: var(--fs-xs); color: var(--ink-faint); white-space: nowrap; }
.group-cases { list-style: none; margin: var(--s1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.group-cases li { display: grid; grid-template-columns: 57px minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.case-line { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-sm); }
.case-line a { font-weight: 600; color: var(--ink); }
.case-line a:hover { color: var(--accent); }
.case-line .mute { font-size: var(--fs-xs); }
.pays-sentence { color: var(--ink-soft); }
.shares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.shares li { display: grid; grid-template-columns: minmax(0, 1fr) 96px 2ch; gap: var(--s2); align-items: center; font-size: var(--fs-xs); }
.share-name { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-track { display: block; height: 8px; background: var(--chip); border-radius: 2px; overflow: hidden; }
.share-track i { display: block; height: 100%; background: var(--accent); }
.share-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-faint); }

/* --- narrow screens ---------------------------------------------------------------- */
@media (max-width: 960px) {
  .columns { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 720px) {
  .site nav a.other { display: none; }
  .wordmark { gap: 8px; }
  .wordmark .brand { font-size: 15px; }
  .wordmark .signal { font-size: 17px; }
  .wire { grid-template-columns: minmax(0, 1fr); }
  .wire-cell { padding: var(--s4) 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .wire-cell:last-child { border-bottom: 0; }
  .case { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); }
}