:root {
  --ink: #111214;
  --muted: #5b6068;
  --line: #d9dde2;
  --paper: #f7f7f5;
  --white: #ffffff;
  --black: #050505;
  --red: #e51b2f;
  --deep-red: #b80f22;
  --blue: #0f4c81;
  --gold: #e1a63a;
  --green: #176b58;
  --purple: #6b2d8c;
  --max: 1220px;
  --max-narrow: 760px;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Per-topic accent colours (applied via [data-accent] on nav + section pages) */
  --accent-national: var(--red);
  --accent-control-desk: var(--deep-red);
  --accent-media: var(--blue);
  --accent-economy: var(--gold);
  --accent-transport: var(--green);
  --accent-civic: var(--purple);
  --accent-education: #2f6f6a;
  --accent-safety: #b8631a;
  --accent-public-mood: #8a2d5a;
  --accent-health: #1f7a8c;
  --accent: var(--red);
}

/* Topic accent: set --accent from the data-accent key, used by nav + sections. */
[data-accent="national"] { --accent: var(--accent-national); }
[data-accent="control-desk"] { --accent: var(--accent-control-desk); }
[data-accent="media"] { --accent: var(--accent-media); }
[data-accent="economy"] { --accent: var(--accent-economy); }
[data-accent="transport"] { --accent: var(--accent-transport); }
[data-accent="civic"] { --accent: var(--accent-civic); }
[data-accent="education"] { --accent: var(--accent-education); }
[data-accent="safety"] { --accent: var(--accent-safety); }
[data-accent="public-mood"] { --accent: var(--accent-public-mood); }
[data-accent="health"] { --accent: var(--accent-health); }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The sticky masthead changes height as it condenses. Scroll anchoring would
     otherwise compensate for that layout shift by moving scrollY across the
     JS thresholds, creating a collapse/expand feedback loop. */
  overflow-anchor: none;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
}

button {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.utility-bar,
.masthead,
.site-footer {
  max-width: var(--max);
  margin: 0 auto;
}

.utility-bar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.icon-button {
  width: 42px;
  height: 34px;
  border: 0;
  background: transparent;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 0;
  cursor: pointer;
}

.icon-button span {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--ink);
}

.utility-links {
  display: flex;
  gap: 18px;
  color: var(--muted);
}

.utility-links a:hover {
  color: var(--red);
}

.edition {
  margin-right: auto;
  color: var(--muted);
}

.site-search {
  flex: 0 1 250px;
  min-width: 176px;
  height: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: stretch;
  border: 1px solid var(--line);
  background: #f7f7f5;
}

.site-search:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(229, 27, 47, 0.12);
}

.site-search input {
  min-width: 0;
  height: 30px;
  border: 0;
  background: transparent;
  padding: 0 9px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  outline: 0;
}

.site-search input::placeholder {
  color: var(--muted);
  opacity: 0.82;
}

.site-search button {
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.site-search button:hover {
  color: var(--red);
}

.masthead {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 20px;
}

/* Rotating wordplay under the wordmark — deadpan tagline, set apart from the
   brand so it reads as a recurring quip rather than a fixed strapline. */
.masthead-quip {
  margin: 0;
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: center;
}

.masthead-quip:empty,
.footer-quip:empty {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
}

.brand-mark {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: var(--white);
  font-weight: 900;
  font-size: 1.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 8px var(--white), inset 0 0 0 12px var(--red);
}

.brand-word {
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  line-height: 0.88;
  letter-spacing: 0;
}

/* Condense the masthead once the reader scrolls, so the big brand moment lives
   at the top of the page but the header shrinks out of the way while browsing.
   The .condensed class is toggled on .site-header by script.js. */
.masthead,
.brand-mark,
.brand-word {
  transition: all 0.25s ease;
}

.masthead-quip {
  max-height: 2.4rem;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.25s ease, margin 0.25s ease;
}

.site-header.condensed .masthead {
  min-height: 0;
  padding: 8px 20px;
}

.site-header.condensed .brand-mark {
  width: 42px;
  height: 42px;
  font-size: 1.05rem;
  box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 6px var(--red);
}

.site-header.condensed .brand-word {
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
}

.site-header.condensed .masthead-quip {
  opacity: 0;
  max-height: 0;
  margin: 0;
}

.drawer {
  display: none;
  max-width: var(--max);
  margin: 0 auto;
  padding: 4px 20px 18px;
  border-top: 1px solid var(--line);
}

.drawer.open {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.drawer a {
  padding: 9px 12px;
  background: #eef0f2;
  font-weight: 800;
  font-size: 0.9rem;
}

.breaking {
  background: var(--red);
  color: var(--white);
}

/* Label sits at the left and the close button at the right (absolute), so the
   ticker headline can be centered in the bar like the nav above it. */
.breaking-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 165px;
}

.breaking.hidden {
  display: none;
}

.breaking-label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: var(--deep-red);
  font-weight: 900;
  text-transform: uppercase;
}

.ticker {
  max-width: 100%;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.close-breaking {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 58px;
  border: 0;
  background: var(--deep-red);
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.reader-launch {
  display: none;
}

.kicker {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 18px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(2.35rem, 4.8vw, 4.65rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.text-link {
  display: inline-block;
  border-bottom: 2px solid var(--gold);
  color: var(--white);
  font-weight: 900;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 28px 20px 44px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.site-footer p {
  max-width: 680px;
  margin-bottom: 0;
  line-height: 1.45;
}

.footer-quip {
  margin-bottom: 8px;
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
}

.site-footer a {
  color: var(--ink);
  font-weight: 900;
}

.reader-shell {
  display: none;
}

@media (max-width: 980px) {
  .masthead {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.reader-active {
    overflow: hidden;
  }

  .utility-links {
    display: none;
  }

  .utility-bar,
  .masthead,
  .site-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .site-search {
    flex-basis: min(52vw, 210px);
    min-width: 148px;
  }

  .site-search input {
    font-size: 0.72rem;
    padding: 0 8px;
  }

  .brand-mark {
    width: 58px;
    height: 58px;
    font-size: 1.25rem;
    box-shadow: inset 0 0 0 6px var(--white), inset 0 0 0 9px var(--red);
  }

  .brand-word {
    font-size: clamp(2.25rem, 17vw, 4rem);
  }

  .breaking-inner {
    padding: 0 60px;
  }

  .breaking-label {
    display: none;
  }

  .ticker {
    padding: 14px 0;
  }

  .reader-launch {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 18;
    display: grid;
    gap: 2px;
    min-width: 156px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: var(--black);
    color: var(--white);
    padding: 11px 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    text-align: left;
  }

  .reader-launch span {
    color: #c5cbd3;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .reader-launch strong {
    font-size: 0.95rem;
    line-height: 1.05;
  }

  .reader-shell {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    background: #08090b;
    color: var(--white);
    overflow: hidden;
  }

  .reader-shell.open {
    display: block;
    touch-action: none;
  }

  .reader-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top) + 12px) 14px 10px;
    background: linear-gradient(180deg, rgba(8, 9, 11, 0.96), rgba(8, 9, 11, 0));
    pointer-events: none;
  }

  .reader-topbar span {
    display: block;
    color: #b8c0ca;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .reader-topbar strong {
    display: block;
    margin-top: 2px;
    font-size: 1.08rem;
    line-height: 1;
  }

  .reader-topbar button {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-size: 1.7rem;
    line-height: 1;
    pointer-events: auto;
  }

  .reader-feed {
    position: absolute;
    inset: 0;
    height: 100dvh;
    overflow: visible;
    overscroll-behavior: contain;
    scrollbar-width: none;
    transform: translate3d(0, 0, 0);
    transition: transform 560ms cubic-bezier(0.22, 0.74, 0.22, 1);
    will-change: transform;
  }

  .reader-feed::-webkit-scrollbar,
  .reader-pages::-webkit-scrollbar {
    display: none;
  }

  .reader-story {
    position: relative;
    height: 100dvh;
    min-height: 100dvh;
    display: flex;
    align-items: stretch;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background:
      radial-gradient(circle at 20% 10%, rgba(229, 27, 47, 0.24), transparent 32%),
      linear-gradient(145deg, #11151a, #050506 62%);
  }

  .reader-story:nth-child(2n) {
    background:
      radial-gradient(circle at 88% 18%, rgba(15, 76, 129, 0.32), transparent 30%),
      linear-gradient(145deg, #111111, #150708 66%);
  }

  .reader-pages {
    width: 100%;
    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    overflow: visible;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    transform: translate3d(0, 0, 0);
    transition: transform 560ms cubic-bezier(0.22, 0.74, 0.22, 1);
    will-change: transform;
  }

  .reader-page {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top) + 74px) 22px calc(env(safe-area-inset-bottom) + 74px);
    scroll-snap-align: start;
  }

  .reader-title-page {
    justify-content: center;
  }

  .reader-body-page {
    justify-content: center;
  }

  .reader-image {
    width: 100%;
    max-height: 30dvh;
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  }

  .reader-page .reader-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: #d9dee6;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .reader-page .reader-meta span,
  .reader-page .reader-meta time {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    padding: 6px 9px;
  }

  .reader-page h2 {
    margin: 0;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(1.8rem, 9.4vw, 2.75rem);
    line-height: 1.05;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: balance;
  }

  .reader-page p {
    margin: 0;
    color: #eef1f4;
    font-size: clamp(1.05rem, 4.7vw, 1.34rem);
    font-weight: 700;
    line-height: 1.36;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .reader-page p strong {
    color: var(--white);
  }

  .reader-kicker {
    color: #ff5667;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .reader-progress {
    display: flex;
    gap: 6px;
    margin-top: 4px;
  }

  .reader-progress span {
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
  }

  .reader-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
  }

  .reader-action {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    padding: 9px 15px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .reader-action:active {
    transform: scale(0.97);
  }

  .reader-action-ghost {
    background: transparent;
  }

  .reader-hint {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + 14px);
    z-index: 3;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 32px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(8, 9, 11, 0.72);
    color: #d9dee6;
    padding: 8px 12px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    backdrop-filter: blur(14px);
  }

  .reader-rail {
    position: absolute;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom) + 92px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .reader-rail-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.55));
  }

  .reader-rail-btn:active {
    transform: scale(0.88);
  }

  .reader-rail-btn.liked {
    color: var(--red);
  }

  .reader-rail-icon {
    display: grid;
    place-items: center;
  }

  .reader-rail-count {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.02em;
  }

  h1 {
    font-size: clamp(2rem, 12vw, 3.2rem);
  }

  .site-footer {
    display: block;
  }

  .site-footer a {
    display: inline-block;
    margin-top: 18px;
  }
}

/* ---------- Article pages (hash-routed #/article/<slug>) ---------- */

.article-view {
  display: none;
}

body.route-article main > *:not(.article-view) {
  display: none;
}

body.route-article .article-view {
  display: block;
}

/* While reading a story, slim the sticky banner right down so the header does
   not eat the top of the screen. The homepage keeps its full masthead. */
body.route-article .masthead {
  min-height: 0;
  padding: 8px 20px;
}

body.route-article .masthead-quip {
  display: none;
}

body.route-article .brand-mark {
  width: 40px;
  height: 40px;
  font-size: 1rem;
  box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 6px var(--red);
}

body.route-article .brand-word {
  font-size: clamp(1.5rem, 6vw, 2.1rem);
}

.article-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 20px 64px;
}

.article-back {
  display: inline-block;
  margin: 10px 0 22px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}

.article-full > .kicker {
  color: var(--red);
}

.control-desk-kicker {
  color: var(--deep-red);
}

.article-full h1 {
  margin: 6px 0 14px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 1.08;
}

.article-dek {
  margin: 0 0 20px;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--muted);
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.article-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #d9dde2;
  margin: 0 0 24px;
}

.article-body p {
  margin: 0 0 18px;
  color: #26292e;
  font-size: 1.12rem;
  line-height: 1.7;
}

.article-body p:first-child::first-letter {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 0.8;
  float: left;
  margin: 6px 10px 0 0;
  color: var(--ink);
}

.article-body--continuation p:first-child::first-letter {
  float: none;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Parallel Editions: one fact record moving through three editorial frames. */
.parallel-editions {
  margin: 34px 0 30px;
  overflow: hidden;
  border: 1px solid #b9b5b0;
  border-top: 6px solid var(--ink);
  background: #f5f3ee;
  box-shadow: 0 18px 46px rgba(20, 22, 25, 0.12);
}

.parallel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px 22px;
  background: var(--ink);
  color: var(--white);
}

.parallel-head h2 {
  margin: 4px 0 7px;
  color: inherit;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.12;
}

.parallel-head p {
  max-width: 650px;
  margin: 0;
  color: #c9cbd0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.parallel-kicker,
.parallel-head > strong {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.parallel-kicker {
  color: #ff7979;
}

.parallel-head > strong {
  flex: 0 0 auto;
  padding-bottom: 3px;
  color: #ffce5c;
}

.parallel-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #b9b5b0;
  background: #e8e5df;
}

.parallel-tab {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 15px 18px 16px;
  border: 0;
  border-right: 1px solid #b9b5b0;
  background: transparent;
  color: #5c5b58;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.parallel-tab:last-child {
  border-right: 0;
}

.parallel-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 4px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.parallel-tab small {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.parallel-tab span {
  font-size: 0.82rem;
  font-weight: 900;
}

.parallel-tab:hover,
.parallel-tab:focus-visible,
.parallel-tab.is-active {
  background: var(--white);
  color: var(--ink);
}

.parallel-tab.is-active::after {
  transform: scaleX(1);
}

.parallel-panel {
  background: var(--white);
}

.parallel-panel[data-edition="briefed"] {
  --parallel-accent: #2b5578;
}

.parallel-panel[data-edition="subject"] {
  --parallel-accent: #8b3a66;
}

.parallel-panel[data-edition="public"] {
  --parallel-accent: #b11c2b;
}

.parallel-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 22px;
  border-bottom: 1px solid #d7d4ce;
  color: var(--parallel-accent);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.parallel-panel-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.parallel-panel-head strong {
  padding: 3px 6px;
  border: 1px solid currentColor;
}

.parallel-panel-head p {
  margin: 0;
  color: #77736d;
}

.parallel-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(220px, 0.8fr);
}

.parallel-copy {
  min-width: 0;
  padding: 27px 28px 29px;
  border-left: 6px solid var(--parallel-accent);
}

.parallel-copy h3 {
  margin: 0 0 12px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.45rem, 3.5vw, 2.25rem);
  line-height: 1.12;
}

.parallel-copy .parallel-dek {
  margin-bottom: 22px;
  color: #5c5b58;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.parallel-copy > p:not(.parallel-dek) {
  margin: 0 0 13px;
  color: #292b2e;
  font-size: 0.92rem;
  line-height: 1.62;
}

.parallel-copy > p:last-child {
  margin-bottom: 0;
}

.parallel-ledger {
  padding: 23px 20px;
  border-left: 1px solid #d7d4ce;
  background: #f4f2ed;
}

.parallel-ledger dl {
  margin: 0 0 22px;
}

.parallel-ledger dl div {
  padding: 8px 0;
  border-bottom: 1px solid #d7d4ce;
}

.parallel-ledger dt,
.parallel-frame-list > span {
  color: #77736d;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parallel-ledger dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.parallel-frame-list + .parallel-frame-list {
  margin-top: 18px;
}

.parallel-frame-list ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.parallel-frame-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.76rem;
  line-height: 1.4;
}

.parallel-frame-list li::before {
  position: absolute;
  left: 0;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-weight: 900;
}

.parallel-frame-list--kept li::before {
  content: "+";
  color: #2e7653;
}

.parallel-frame-list--omitted li::before {
  content: "−";
  color: var(--red);
}

.parallel-record {
  padding: 19px 24px 22px;
  border-top: 1px solid #b9b5b0;
  background: #ebe8e1;
}

.parallel-record header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.parallel-record header span,
.parallel-record header strong {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parallel-record header strong {
  color: #77736d;
}

.parallel-record ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 28px;
  margin: 0;
  padding-left: 21px;
}

.parallel-record li {
  padding-left: 3px;
  color: #454542;
  font-size: 0.76rem;
  line-height: 1.42;
}

.parallel-award {
  margin: 0;
  padding: 11px 24px 13px;
  border-top: 1px solid #2e7653;
  background: #dcebe2;
  color: #245b41;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .parallel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding: 21px 18px 18px;
  }

  .parallel-head > strong {
    padding-bottom: 0;
  }

  .parallel-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .parallel-tab {
    min-width: 0;
    padding: 13px 8px 14px;
  }

  .parallel-tab small {
    font-size: 0.5rem;
  }

  .parallel-tab span {
    font-size: 0.76rem;
  }

  .parallel-panel-grid {
    grid-template-columns: 1fr;
  }

  .parallel-copy {
    padding: 23px 19px 24px;
  }

  .parallel-ledger {
    border-top: 1px solid #d7d4ce;
    border-left: 0;
  }

  .parallel-record {
    padding-inline: 18px;
  }

  .parallel-record header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .parallel-record ol {
    grid-template-columns: 1fr;
  }
}

/* Counter Edition: the source record stays fixed while its rhetoric is
   disassembled in public. The module is driven by article.counterEdition. */
.counter-edition {
  margin: 34px 0 30px;
  overflow: hidden;
  border: 1px solid #b9b5b0;
  border-top: 6px solid var(--red);
  background: #f5f3ee;
  box-shadow: 0 18px 46px rgba(20, 22, 25, 0.12);
}

.counter-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 26px;
  padding: 25px 26px 23px;
  background: var(--ink);
  color: var(--white);
}

.counter-head h2 {
  margin: 4px 0 8px;
  color: inherit;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.1;
}

.counter-head p {
  max-width: 630px;
  margin: 0;
  color: #c9cbd0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.counter-kicker,
.counter-source span,
.counter-source small,
.counter-record-column header,
.counter-phrases > header,
.counter-quote small,
.counter-ruling span,
.counter-citation {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.counter-kicker {
  color: #ff7979;
  font-size: 0.63rem;
}

.counter-source {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px 15px;
  border: 1px solid #5d6066;
  border-left: 4px solid var(--red);
  color: var(--white);
  background: #181a1e;
}

.counter-source:hover,
.counter-source:focus-visible {
  border-color: #ff7979;
  color: var(--white);
}

.counter-source span,
.counter-source small {
  color: #9ea2a9;
  font-size: 0.52rem;
}

.counter-source strong {
  margin: 7px 0 5px;
  font-size: 0.82rem;
  line-height: 1.25;
}

.counter-record {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid #b9b5b0;
}

.counter-record-column {
  padding: 21px 23px 23px;
  background: var(--white);
}

.counter-record-column + .counter-record-column {
  border-left: 1px solid #b9b5b0;
  background: #eeeae4;
}

.counter-record-column header,
.counter-phrases > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #6d6964;
  font-size: 0.58rem;
}

.counter-record-column header strong {
  color: #2e7653;
}

.counter-record-column--open header strong {
  color: var(--red);
}

.counter-record-column ul {
  display: grid;
  gap: 9px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.counter-record-column li {
  position: relative;
  padding-left: 21px;
  color: #383a3d;
  font-size: 0.8rem;
  line-height: 1.45;
}

.counter-record-column li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #2e7653;
  content: "✓";
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-weight: 900;
}

.counter-record-column--open li::before {
  color: var(--red);
  content: "?";
}

.counter-phrases {
  background: var(--white);
}

.counter-phrases > header {
  padding: 13px 22px;
  border-bottom: 1px solid #d7d4ce;
  background: #e6e2dc;
}

.counter-phrases > header strong {
  color: var(--ink);
}

.counter-phrase {
  display: grid;
  grid-template-columns: 42px minmax(180px, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  border-bottom: 1px solid #d7d4ce;
}

.counter-phrase-number {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 100%;
  border-right: 1px solid #d7d4ce;
  color: #9b9791;
  background: #f1efeb;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.64rem;
  font-weight: 900;
}

.counter-quote {
  padding: 18px 19px 19px;
  border-right: 1px solid #d7d4ce;
}

.counter-quote small {
  color: var(--red);
  font-size: 0.53rem;
}

.counter-quote blockquote {
  margin: 8px 0 0;
  color: var(--ink);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.35;
}

.counter-phrase > p {
  margin: 0;
  padding: 19px 21px 20px;
  color: #3d3f42;
  font-size: 0.84rem;
  line-height: 1.55;
}

.counter-memes {
  border-bottom: 1px solid #b9b5b0;
  background: #ebe8e1;
}

.counter-memes > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px;
  border-bottom: 1px solid #b9b5b0;
  color: #6d6964;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.counter-memes > header strong {
  color: var(--red);
}

.counter-meme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.counter-meme {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 19px 18px 21px;
  background: #f7f5f0;
}

.counter-meme + .counter-meme {
  border-left: 1px solid #c7c2bb;
}

.counter-meme-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--red);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.counter-meme-label span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
}

.counter-meme p {
  margin: 0 0 9px;
  color: #5b5955;
  font-size: 0.76rem;
  line-height: 1.45;
}

.counter-meme strong {
  margin-top: auto;
  padding-top: 12px;
  border-top: 3px solid var(--ink);
  color: var(--ink);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.35;
}

.counter-ruling {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  background: var(--ink);
  color: var(--white);
}

.counter-ruling > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  border-right: 1px solid #4a4d52;
}

.counter-ruling span {
  color: #ff7979;
  font-size: 0.54rem;
}

.counter-ruling strong {
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.3;
}

.counter-ruling p {
  margin: 0;
  padding: 19px 22px 20px;
  color: #d5d7da;
  font-size: 0.84rem;
  line-height: 1.55;
}

.counter-citation {
  margin: 0;
  padding: 11px 22px 12px;
  border-top: 1px solid #b9b5b0;
  color: #77736d;
  background: #e6e2dc;
  font-size: 0.55rem;
}

.counter-citation a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

/* The counterpoint is a news photograph, not an explanatory apparatus. */
.counter-story-image {
  margin: 30px 0 36px;
}

.counter-story-image img {
  display: block;
  width: 100%;
  height: auto;
}

.counter-story-image figcaption {
  margin-top: 8px;
  color: #66625e;
  font-size: 0.63rem;
  font-weight: 750;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .counter-head,
  .counter-record,
  .counter-ruling {
    grid-template-columns: 1fr;
  }

  .counter-head {
    gap: 18px;
    padding: 21px 18px 19px;
  }

  .counter-source {
    min-height: 86px;
  }

  .counter-record-column {
    padding-inline: 18px;
  }

  .counter-record-column + .counter-record-column {
    border-top: 1px solid #b9b5b0;
    border-left: 0;
  }

  .counter-phrases > header {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 18px;
  }

  .counter-phrase {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .counter-phrase-number {
    grid-row: 1 / 3;
  }

  .counter-quote {
    padding: 17px 16px 12px;
    border-right: 0;
  }

  .counter-phrase > p {
    padding: 0 16px 19px;
  }

  .counter-memes > header {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 18px;
  }

  .counter-meme-grid {
    grid-template-columns: 1fr;
  }

  .counter-meme {
    padding-inline: 18px;
  }

  .counter-meme + .counter-meme {
    border-top: 1px solid #c7c2bb;
    border-left: 0;
  }

  .counter-ruling > div {
    border-right: 0;
    border-bottom: 1px solid #4a4d52;
  }

}

/* Redacted text: a black bar over "unapproved facts". Open bars lift on hover;
   gated/sealed bars need a click and may just loop you to nowhere. */
.redact {
  position: relative;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 2px;
  color: transparent;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.redact--open:hover,
.redact.revealed {
  color: inherit;
  background: rgba(225, 166, 58, 0.28);
  box-shadow: none;
  user-select: text;
}

.redact-denied {
  animation: redact-shake 0.3s ease;
}

.redact-denied::after {
  content: "Subscribe to see the truth";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  z-index: 5;
  white-space: nowrap;
  background: var(--ink);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 4px;
  pointer-events: none;
}

@keyframes redact-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* Unlock notices — the deadpan "this device has developed a …" moment. */
.nrx-notices {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100% - 28px));
  pointer-events: none;
}

.nrx-notice {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #0b0d10;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nrx-notice.in {
  opacity: 1;
  transform: translateY(0);
}

.nrx-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nrx-text strong {
  font-size: 0.9rem;
}

.nrx-text span {
  font-size: 0.78rem;
  color: #b9c1cc;
  line-height: 1.35;
}

.nrx-go {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nrx-go:hover {
  background: var(--deep-red);
}

.nrx-x {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #8b93a0;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.nrx-x:hover {
  color: #fff;
}

/* Reader-File portals HUD — unlocked layers + progress toward the sealed ones. */
.rf-portals {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.rf-portal {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 12px 14px;
}

.rf-portal-open {
  border-color: var(--ink);
}

.rf-portal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.rf-portal-title {
  font-weight: 800;
  font-size: 0.95rem;
}

.rf-portal-go {
  margin-left: auto;
  color: var(--red);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rf-portal-seal {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rf-portal-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.rf-portal-req {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}

.rf-portal-req-label {
  flex: 0 0 44%;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rf-portal-bar {
  flex: 1 1 auto;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.rf-portal-bar i {
  display: block;
  height: 100%;
  background: var(--accent, var(--red));
}

.rf-portal-n {
  flex: 0 0 auto;
  font-weight: 900;
  color: var(--ink);
}

.article-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 30px 0 18px;
  padding-top: 22px;
  border-top: 5px solid var(--ink);
}

.article-btn {
  padding: 11px 18px;
  border: 0;
  background: var(--red);
  color: var(--white);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.article-btn:hover {
  background: var(--deep-red);
}

.article-btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.article-btn-ghost:hover {
  background: var(--ink);
  color: var(--white);
}

.article-watch {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
}

.article-watch-link {
  padding: 11px 18px;
  background: var(--green);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-watch-link:hover {
  background: #115845;
}

/* The swipe reader is a mobile mode; only offer it where it actually opens. */
.article-btn[data-open-reader] {
  display: none;
}

@media (max-width: 640px) {
  .article-btn[data-open-reader] {
    display: inline-block;
  }
}

.article-satire-note {
  margin: 4px 0 0;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--muted);
}

.archive-note {
  margin: 4px 0 20px;
  padding: 12px 16px;
  border-left: 4px solid var(--ink);
  background: #f3f1ec;
}

.archive-note .kicker {
  margin: 0 0 4px;
  color: var(--ink);
}

.archive-note p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.5;
}

.article-related {
  margin-top: 44px;
  border-top: 5px solid var(--ink);
  padding-top: 18px;
}

.article-related h2 {
  margin: 0 0 16px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.related-card {
  display: block;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.related-card:first-of-type {
  border-top: 0;
}

.related-desk {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}

.related-card strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.22;
  color: var(--ink);
}

.related-card:hover strong {
  color: var(--red);
}

/* Make linked dispatch headlines/images on the homepage feel clickable. */

/* ---------- Comment theatre ---------- */

/* Keep-moving bar: previous / shuffle / next, shown under each story. */
.article-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
  margin: 30px 0 8px;
}

.article-nav-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--white);
  min-width: 0;
}

.article-nav-btn:hover {
  border-color: var(--ink);
}

.article-nav-next {
  text-align: right;
  align-items: flex-end;
}

.article-nav-dir {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}

.article-nav-title {
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-nav-shuffle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 16px;
  border: 0;
  background: var(--ink);
  color: var(--white);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.article-nav-shuffle:hover {
  background: var(--red);
}

.article-nav-shuffle svg {
  transition: transform 0.3s ease;
}

.article-nav-shuffle:hover svg {
  transform: rotate(180deg);
}

@media (max-width: 560px) {
  .article-nav-title {
    display: none;
  }
  .article-nav {
    grid-template-columns: 1fr auto 1fr;
  }
  .article-nav-btn {
    justify-content: center;
    text-align: center;
    align-items: center;
  }
}

.article-comments {
  margin-top: 44px;
  border-top: 5px solid var(--ink);
  padding-top: 18px;
}

.cmt-loading,
.cmt-empty {
  color: var(--muted);
  font-style: italic;
}

/* Comments live in their own collapsible compartment so a long thread never
   dominates the story. The toggle carries the title + contribution count. */
.cmt-panel {
  background: var(--paper);
  border: 1px solid var(--line);
}

.cmt-toggle {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.cmt-toggle-label {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.4rem;
  color: var(--ink);
}

.cmt-count {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.cmt-chevron {
  font-size: 0.9rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.cmt-panel.cmt-collapsed .cmt-chevron {
  transform: rotate(-90deg);
}

.cmt-panel-body {
  padding: 0 16px 18px;
}

.cmt-panel.cmt-collapsed .cmt-panel-body {
  display: none;
}

/* Reels comment sheet: a slide-up panel over the swipe reader. */
.cmt-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}

.cmt-sheet.open {
  display: block;
}

.cmt-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.cmt-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
  animation: cmt-sheet-up 0.28s cubic-bezier(0.22, 0.74, 0.22, 1);
}

@keyframes cmt-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.cmt-sheet-grab {
  width: 40px;
  height: 5px;
  margin: 10px auto 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
}

.cmt-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.cmt-sheet-title {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.1rem;
}

.cmt-sheet-count {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.cmt-sheet-x {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.cmt-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(env(safe-area-inset-bottom) + 20px);
}

body.cmt-sheet-open {
  overflow: hidden;
}

.cmt-composer {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.cmt-composer textarea {
  flex: 1;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: inherit;
  font-size: 0.98rem;
  line-height: 1.45;
}

.cmt-composer textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.cmt-list,
.cmt-replies {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cmt {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.cmt-replies {
  margin-top: 12px;
  padding-left: 16px;
  border-left: 2px solid var(--line);
}

.cmt-reply {
  padding: 12px 0;
}

.cmt-reply:first-child {
  padding-top: 0;
}

.cmt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cmt-author {
  font-weight: 800;
  font-size: 0.92rem;
}

.cmt-persona {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(15, 76, 129, 0.08);
  padding: 2px 6px;
  border-radius: 2px;
}

.cmt-time {
  font-size: 0.74rem;
  color: var(--muted);
}

.cmt-badge {
  margin-left: auto;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--deep-red);
  background: rgba(184, 15, 34, 0.08);
  padding: 2px 7px;
  border-radius: 2px;
}

/* Discoverable archetype marker: hidden category, revealed on hover/tap */
.cmt-decode {
  position: relative;
  display: inline-flex;
}

.cmt-decode-btn {
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.cmt-decode-btn:hover,
.cmt-decode.open .cmt-decode-btn {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.cmt-decode-pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 40;
  width: max-content;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.cmt-decode.open .cmt-decode-pop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Bot-detection easter-egg toast: slides up from the bottom on completion. */
.cmt-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 140%);
  z-index: 200;
  max-width: min(90vw, 420px);
  padding: 12px 18px;
  background: var(--ink);
  color: var(--white);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(5, 5, 5, 0.28);
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0;
  transition: transform 0.32s ease, opacity 0.32s ease;
  pointer-events: none;
}

.cmt-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.cmt-toast-glyph {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin-right: 4px;
}

.cmt-toast em {
  color: var(--gold);
  font-style: normal;
  font-weight: 700;
}

/* In the floating popup the chip must be fully opaque — a translucent tint
   lets the comment behind it bleed through and read as overlap. Bots keep
   their own dark styling (handled below), so exclude them here. */
.cmt-decode-pop .cmt-persona:not(.cmt-persona--bot) {
  display: inline-block;
  color: var(--white);
  background: var(--blue);
}

.cmt-decode-pop .cmt-persona {
  box-shadow: 0 6px 18px rgba(5, 5, 5, 0.22);
}

/* Bot reveal: not a colourful human archetype but a flat system tag. Monospace
   + dark slate reads as "machine", the category collapse the joke depends on. */
.cmt-persona--bot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--white);
  background: var(--ink);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  letter-spacing: 0.12em;
}

.cmt-bot-glyph {
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0.85;
}

/* The marker itself turns slate (not blue) on a bot, hinting before the reveal. */
.cmt-decode--bot .cmt-decode-btn:hover,
.cmt-decode--bot.open .cmt-decode-btn {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

@media (hover: hover) {
  .cmt-decode--bot:hover .cmt-decode-btn {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--white);
  }
}

@media (hover: hover) {
  .cmt-decode:hover .cmt-decode-pop,
  .cmt-decode:focus-within .cmt-decode-pop {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .cmt-decode:hover .cmt-decode-btn {
    border-color: var(--blue);
    background: var(--blue);
    color: var(--white);
  }
}

.cmt-body {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.55;
  color: #26292e;
}

.cmt-foot {
  display: flex;
  gap: 14px;
}

.cmt-like,
.cmt-reply-btn {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.cmt-like:hover,
.cmt-reply-btn:hover {
  color: var(--ink);
}

.cmt-like.liked {
  color: var(--red);
}

/* ---------- Fake registration / paywall modal ---------- */

body.paywall-open {
  overflow: hidden;
}

.paywall[hidden] {
  display: none;
}

.paywall {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.paywall-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.62);
}

.paywall-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-top: 6px solid var(--red);
  padding: 30px 26px 24px;
  box-shadow: 0 24px 60px rgba(5, 5, 5, 0.4);
}

.paywall-x {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.paywall-eyebrow {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

.paywall-card h3 {
  margin: 0 0 10px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.18;
}

.paywall-body {
  margin: 0 0 16px;
  color: #30343a;
  line-height: 1.55;
}

.paywall-field {
  width: 100%;
  padding: 11px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 0.98rem;
}

.paywall-field:focus {
  outline: none;
  border-color: var(--ink);
}

.paywall-next {
  width: 100%;
}

.paywall-fineprint {
  margin: 14px 0 0;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--muted);
}

/* ---------- Primary section nav ---------- */

.primary-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.primary-nav::-webkit-scrollbar {
  display: none;
}

.primary-nav a {
  flex: 0 0 auto;
  padding: 12px 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.primary-nav a:hover {
  color: var(--accent);
}

.primary-nav a.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- Section / topic landing pages ---------- */

.section-view {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 20px 64px;
}

.section-head {
  border-bottom: 5px solid var(--accent);
  padding-bottom: 14px;
  margin-bottom: 24px;
}

.section-head .kicker {
  color: var(--accent);
}

.section-head h1 {
  margin: 4px 0 8px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.05;
}

.section-dek {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.5;
}

.section-count {
  display: block;
  margin-top: 10px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Archive Blue: a cooler reality-tunnel layer. Overrides --accent in scope so
   the section head border + kicker turn blue-grey automatically, and washes the
   whole view in a colder archive palette. */
.blue-view {
  --accent: #2f6690;
  background: linear-gradient(180deg, #eaf1f6 0%, #dce7ef 100%);
  border: 1px solid #cad6e1;
  border-radius: 14px;
  box-shadow: inset 0 2px 26px rgba(15, 76, 129, 0.07);
}

.blue-view .section-head h1 {
  color: #16283a;
}

.blue-view .section-dek,
.blue-view .section-count {
  color: #52657a;
}

/* Archive Blue reading mode: full article rendered from the briefed side. */
.blue-view.article-shell .article-full h1 {
  color: #16283a;
}

.blue-briefed {
  margin: 4px 0 20px;
  padding: 12px 16px;
  border-left: 4px solid #2f6690;
  background: rgba(47, 102, 144, 0.09);
}

.blue-briefed .kicker {
  margin: 0 0 4px;
  color: #2f6690;
}

.blue-briefed p:last-child {
  margin: 0;
  color: #24405a;
  font-size: 0.96rem;
  line-height: 1.5;
}

.blue-memos-title {
  margin: 32px 0 12px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.4rem;
  color: #16283a;
}

.blue-memos {
  display: grid;
  gap: 12px;
}

.blue-memo {
  border: 1px solid #cad6e1;
  background: rgba(255, 255, 255, 0.6);
  padding: 14px 16px;
}

.blue-memo-ref {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f6690;
}

.blue-memo h3 {
  margin: 4px 0 6px;
  font-size: 1rem;
  color: #16283a;
}

.blue-memo p {
  margin: 0;
  color: #3a4a5a;
  font-size: 0.9rem;
  line-height: 1.5;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.archive-empty {
  padding: 18px;
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.65);
}

.archive-empty strong {
  display: block;
  margin-bottom: 4px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.2rem;
}

.archive-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.search-panel {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--white);
}

.search-panel label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.search-panel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.search-panel input {
  min-width: 0;
  height: 44px;
  border: 1px solid var(--line);
  padding: 0 12px;
  color: var(--ink);
  font-size: 1rem;
  outline: 0;
}

.search-panel input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(229, 27, 47, 0.12);
}

.search-panel button {
  min-width: 92px;
  height: 44px;
  border: 0;
  background: var(--ink);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.search-panel button:hover {
  background: var(--accent);
}

.search-results {
  display: grid;
  gap: 12px;
}

.search-result {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border-left: 4px solid var(--accent);
  background: var(--white);
  color: var(--ink);
}

.search-result:hover {
  box-shadow: 0 8px 22px rgba(28, 28, 28, 0.08);
}

.search-result img {
  grid-row: 1 / span 4;
  width: 148px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #d9dde2;
}

.search-result h2 {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.18;
}

.search-result p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.search-result-meta {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.search-empty {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.65);
}

.search-empty strong {
  display: block;
  margin-bottom: 4px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.2rem;
}

.search-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .search-panel {
    padding: 12px;
  }

  .search-panel-row {
    grid-template-columns: 1fr;
  }

  .search-panel button {
    width: 100%;
  }

  .search-result {
    grid-template-columns: 1fr;
  }

  .search-result img {
    grid-row: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* ---------- News card component ---------- */

.news-card {
  display: block;
  background: var(--white);
  border-top: 4px solid var(--accent);
}

.news-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #d9dde2;
}

.card-copy {
  padding: 14px 16px 18px;
}

.card-tag {
  display: block;
  margin-bottom: 6px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.news-card h3 {
  margin: 0 0 8px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.3rem;
  line-height: 1.18;
  color: var(--ink);
}

.news-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.news-card:hover h3 {
  color: var(--accent);
}

.card--lead {
  margin-bottom: var(--space-5);
}

.card--lead h3 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}

@media (min-width: 700px) {
  .card--lead {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
  }

  .card--lead img {
    height: 100%;
    min-height: 300px;
    aspect-ratio: auto;
  }

  .card--lead .card-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-5);
  }
}

/* ---------- Data-assembled homepage ---------- */

.home {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px 64px;
}

.home-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-5) 0 var(--space-6);
}

.hero-lead {
  display: block;
  background: var(--white);
  border-top: 5px solid var(--accent);
}

.hero-lead img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #d9dde2;
}

.hero-copy {
  padding: var(--space-4) var(--space-4) var(--space-5);
}

.hero-copy h2 {
  margin: 6px 0 10px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.05;
}

.hero-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.hero-lead:hover h2 {
  color: var(--accent);
}

.hero-rail {
  display: flex;
  flex-direction: column;
}

.hero-rail > h2 {
  margin: 0 0 4px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rail-item {
  display: block;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.rail-item strong {
  display: block;
  margin-top: 4px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.2;
  color: var(--ink);
}

.rail-item:hover strong {
  color: var(--accent);
}

@media (min-width: 880px) {
  .home-hero {
    grid-template-columns: 2fr 1fr;
  }
}

/* Bands */
.home-band {
  margin-bottom: var(--space-7);
}

.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 8px;
  margin-bottom: var(--space-5);
}

.band-head h2 {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.band-sub {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.band-more {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

/* Card tag uses its own accent when set on the card */
.card-tag {
  color: var(--accent);
}

/* Latest carousel */
.latest-rail {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.latest-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border-top: 3px solid var(--accent);
  padding: 14px;
}

.latest-card strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.2;
  color: var(--ink);
}

.latest-card time {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.latest-card:hover strong {
  color: var(--accent);
}

/* Most Recalibrated numbered list */
.ranked-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.ranked-item {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.ranked-item .rank {
  flex: 0 0 auto;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  min-width: 1.4em;
}

.ranked-item strong {
  display: block;
  margin-top: 3px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--ink);
}

.ranked-item:hover strong {
  color: var(--accent);
}

@media (min-width: 760px) {
  .ranked-list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
  }
}

/* In Pictures strip */
.picture-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}

.picture-item {
  position: relative;
  scroll-snap-align: start;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d9dde2;
}

.picture-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.picture-item:hover img {
  transform: scale(1.05);
}

.picture-item span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(transparent, rgba(5, 5, 5, 0.82));
  color: var(--white);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.2;
}

/* Mood Weather */
.mood-weather .mood-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  background: var(--white);
  border-left: 6px solid var(--accent);
  padding: var(--space-5);
}

.mood-reading {
  display: flex;
  flex-direction: column;
}

.mood-temp {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
}

.mood-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.mood-line {
  flex: 1;
  min-width: 240px;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #30343a;
}

/* Custodial note — earned on a perfect Spot the Narrative */
.game-custodial {
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-top: 1px dashed #c9c9bd;
  padding-top: 10px;
}

/* Blue memo rotation counter */
.blue-memos-sub {
  margin-left: 10px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Desk-aware: earned by reading three staff profiles; the interest is mutual */
.desk-aware-note {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.vane-note {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: #fffdf8;
  border-left: 6px solid var(--red);
}

.vane-note p {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}

.vane-note .kicker {
  margin-bottom: 8px;
  font-family: Inter, system-ui, sans-serif;
  font-style: normal;
}

.vane-note .vane-sig {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

/* A comment whose commenter is on approved leave: body withdrawn, likes and
   decode marker deliberately intact. */
.cmt--moderated .cmt-body {
  color: var(--muted);
  font-style: italic;
}

/* Daily notice — one per day, gone tomorrow */
.daily-notice .notice-body {
  background: var(--white);
  border-left: 6px solid var(--accent);
  padding: var(--space-5);
}

.daily-notice .notice-body h3 {
  margin: 0 0 8px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--ink);
}

.daily-notice .notice-body p {
  margin: 0;
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #30343a;
}

/* Opinion */
.opinion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.opinion-item {
  display: block;
  background: #fffdf8;
  border-top: 4px solid var(--accent);
  padding: var(--space-4);
}

.opinion-item h3 {
  margin: 6px 0 10px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.22;
  color: var(--ink);
}

.opinion-by {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.opinion-item:hover h3 {
  color: var(--accent);
}

/* ---------- Motion & polish (Phase D) ---------- */

@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.article-shell,
.section-view {
  animation: viewIn 0.35s ease both;
}

/* Card hover: lift + contained image zoom */
.news-card,
.hero-lead,
.latest-card,
.opinion-item {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.news-card:hover,
.hero-lead:hover,
.latest-card:hover,
.opinion-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(5, 5, 5, 0.12);
}

.news-card,
.hero-lead {
  overflow: hidden;
}

.news-card img,
.hero-lead img {
  transition: transform 0.4s ease;
}

.news-card:hover img,
.hero-lead:hover img {
  transform: scale(1.04);
}

/* Reveal on scroll — only active when homepage.js adds .home--animate (so the
   page is fully visible without JS or under reduced motion). */
.home--animate .home-hero,
.home--animate .home-band {
  opacity: 0;
  transform: translateY(16px);
}

.home--animate .home-hero.in,
.home--animate .home-band.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Live breaking indicator + smooth ticker swap */
.breaking-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breaking-label::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--white);
  animation: livePulse 1.4s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.65); }
}

.ticker span {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.ticker.swap span {
  opacity: 0;
}

/* Skeleton loaders (shown in [data-homepage] until homepage.js renders) */
.skeleton {
  background: linear-gradient(90deg, #ececea 25%, #f5f5f3 37%, #ececea 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
}

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.skel-hero {
  height: clamp(220px, 38vw, 360px);
  margin: var(--space-5) 0 var(--space-6);
}

.skel-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.skel-card {
  height: 240px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .home--animate .home-hero,
  .home--animate .home-band {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Games / Compliance Arcade (Phase E) ---------- */

.games-view {
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 18px 20px 64px;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.game-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--white);
  border-top: 4px solid var(--accent);
  padding: var(--space-4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.game-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(5, 5, 5, 0.12);
}

.game-card h3 {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.4rem;
}

.game-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.game-play,
.games-promo-cta {
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.civic-record h2 {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.4rem;
  margin: 0 0 12px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.badge {
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
}

.games-empty {
  color: var(--muted);
  font-style: italic;
}

/* In-game */
.game-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 8px;
  margin: 8px 0 var(--space-5);
}

.game-title {
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.86rem;
}

.game-progress {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
}

.game-q {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.2;
  margin: 0 0 var(--space-5);
}

.game-options {
  display: grid;
  gap: var(--space-3);
}

.pick-grid {
  grid-template-columns: 1fr;
}

.game-option {
  text-align: left;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  font-size: 1.02rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.game-option:hover {
  border-left-color: var(--accent);
}

.game-option:active {
  transform: scale(0.99);
}

.pick-option.is-correct {
  border-color: var(--green);
  border-left-color: var(--green);
  background: #f1f8f4;
}

.pick-option.is-wrong {
  border-color: var(--deep-red);
  border-left-color: var(--deep-red);
  background: #fdf1f2;
}

.pick-feedback {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--white);
  border-left: 4px solid var(--accent);
}

.pick-feedback strong {
  display: block;
  margin-bottom: 6px;
}

.pick-feedback p {
  margin: 0 0 14px;
  color: #30343a;
  line-height: 1.5;
}

.game-btn {
  display: inline-block;
  padding: 11px 18px;
  border: 0;
  background: var(--accent);
  color: var(--white);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.game-btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.game-result .kicker {
  color: var(--accent);
}

.game-result h2 {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.8rem, 4.4vw, 2.8rem);
  margin: 6px 0 12px;
}

.result-line {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #30343a;
}

.result-score {
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-5);
}

/* Homepage promo */
.games-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: linear-gradient(120deg, #2a1340, #4a1d5e);
  color: var(--white);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
}

.games-promo .card-tag {
  color: #e3b8f5;
}

.games-promo h2 {
  margin: 6px 0 6px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.games-promo p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
}

.games-promo-cta {
  flex: 0 0 auto;
  color: var(--white);
}

/* ---------- Header responsive (fix desktop hamburger redundancy) ---------- */
/* Desktop: show the section nav, hide the hamburger + drawer. */
@media (min-width: 760px) {
  .icon-button { display: none; }
  .drawer { display: none !important; }
}
/* Mobile: hide the horizontal section nav; use the hamburger drawer instead. */
@media (max-width: 759px) {
  .primary-nav { display: none; }
}

/* ---------- Hero rail brand filler (desktop) ---------- */
.rail-brand {
  display: none;
}

@media (min-width: 880px) {
  /* Auto top + bottom margins center the lockup in the rail's leftover space. */
  .rail-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: auto 0;
    padding: var(--space-6) 0;
  }

  .rail-brand-img {
    width: clamp(150px, 16vw, 210px);
    height: auto;
    object-fit: contain;
  }
}

/* ---------- psyop.news breadcrumb ---------- */
.psyop-eye {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--ink) 0 28%,
    transparent 28% 54%,
    var(--ink) 54% 100%
  );
  opacity: 0.65;
  vertical-align: -1px;
}

.site-disclosure {
  margin: 14px 0 0;
  max-width: 680px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.85;
}

.site-reader-status {
  margin-top: 7px;
}

.site-disclosure a {
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px dotted currentColor;
}

.site-disclosure a:hover {
  color: var(--red);
}

.paywall-note {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.paywall-note a {
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px dotted currentColor;
}

.paywall-note a:hover {
  color: var(--red);
}

/* ---------- Approved Sources page ---------- */
.sources-view .source-list {
  display: grid;
  gap: var(--space-4);
}

.source-row {
  background: var(--white);
  border-left: 4px solid var(--accent);
  padding: var(--space-4);
}

.source-row h3 {
  margin: 0 0 4px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.25rem;
}

.source-motto {
  display: inline-block;
  margin-bottom: 8px;
  font-style: italic;
  color: var(--accent);
  font-size: 0.9rem;
}

.source-row p {
  margin: 0;
  color: #30343a;
  line-height: 1.5;
}

.source-accreditation {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--muted);
}

.source-accreditation a,
.mood-credit a,
.civic-hint a {
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px dotted currentColor;
}

.source-accreditation a:hover,
.mood-credit a:hover,
.civic-hint a:hover {
  color: var(--red);
}

/* Mood Weather calibration credit */
.mood-credit {
  margin: 12px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  opacity: 0.85;
}

/* Footer links */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  text-align: right;
}

.footer-links a {
  color: var(--ink);
  font-weight: 800;
  font-size: 0.86rem;
}

.footer-links a:hover {
  color: var(--red);
}

/* Games civic-record psyop hint */
.civic-hint {
  margin: 16px 0 0;
  font-size: 0.84rem;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .footer-links {
    align-items: flex-start;
    text-align: left;
    margin-top: 16px;
  }
}

/* ---------- Staff layer: avatars, bylines, The Desk ---------- */

/* Avatar shows initials by default; a portrait <img> (if it loads) covers them.
   The img removes itself on error, so initials remain the graceful fallback. */
.staff-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue);
  color: var(--white);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.staff-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-avatar--blank {
  background: #111;
  border: 1px solid var(--ink);
}

.staff-initials {
  font-size: 0.9rem;
  line-height: 1;
}

.staff-avatar--sm {
  width: 34px;
  height: 34px;
}

.staff-avatar--sm .staff-initials {
  font-size: 0.72rem;
}

.staff-avatar--card {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
}

.staff-avatar--card .staff-initials {
  font-size: 1.2rem;
}

.staff-avatar--profile {
  width: 96px;
  height: 96px;
}

.staff-avatar--profile .staff-initials {
  font-size: 1.9rem;
}

/* Byline block on article pages */
.article-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 6px;
}

.article-author-text {
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--ink);
}

.byline-name {
  font-weight: 900;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.byline-name:hover {
  border-bottom-color: var(--ink);
}

.byline-role {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

/* The Desk: directory */
.staff-group {
  margin-bottom: var(--space-6);
}

.staff-group-title {
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}

.staff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.staff-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(5, 5, 5, 0.08);
}

.staff-card-name {
  font-weight: 900;
  color: var(--ink);
  font-size: 0.98rem;
}

.staff-card-role {
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--ink);
  line-height: 1.3;
}

.staff-card-desk {
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Profile page */
.staff-profile-head {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 5px solid var(--accent);
  padding-bottom: 18px;
  margin-bottom: 20px;
}

.staff-profile-head h1 {
  margin: 2px 0 4px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1.05;
}

.staff-profile-role {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
}

.staff-profile-bio {
  max-width: 640px;
  font-size: 1.15rem;
  line-height: 1.55;
  margin: 0 0 16px;
}

.staff-profile-voice {
  max-width: 640px;
  margin: 0 0 18px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}

.staff-profile-voice span {
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--ink);
  margin-right: 6px;
}

.staff-accreditation {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 12px 14px;
  background: var(--paper);
  border-left: 3px solid var(--blue);
  border-radius: 2px;
  margin: 0 0 22px;
}

.staff-articles {
  margin-top: 10px;
}

.staff-articles h2 {
  font-size: 1.2rem;
  margin: 0 0 12px;
}

.staff-noarticles {
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .staff-profile-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Corrections & Clarifications ---------- */

.correction-editor {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-bottom: 26px;
  background: var(--paper);
  border-left: 3px solid var(--ink);
  border-radius: 2px;
}

.correction-editor-text {
  margin: 0 0 6px;
  font-style: italic;
  line-height: 1.5;
}

.correction-editor-by {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.correction-editor-by a {
  color: var(--ink);
}

.correction-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.correction {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}

.correction-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.correction-head .cmt-badge {
  margin-left: auto;
}

.correction-re {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--blue);
  text-decoration: none;
}

.correction-re:hover {
  text-decoration: underline;
}

.correction-original {
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.5;
}

.correction-fix {
  margin: 0;
  line-height: 1.55;
}

.correction-fix span {
  font-weight: 900;
  color: var(--deep-red);
  letter-spacing: 0.02em;
}

.correction-signoff {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}

.correction-signoff a {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Reader file (psyop.me audience mirror) ---------- */

.readerfile {
  max-width: 680px;
  margin: 0 auto;
  padding: 22px 22px 26px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(5, 5, 5, 0.08);
}

.rf-stamp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rf-classmark {
  color: var(--deep-red);
}

.rf-fileno {
  color: var(--muted);
}

.rf-title {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  margin: 0 0 6px;
}

.rf-intro {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.5;
}

.rf-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 22px;
}

.rf-field {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  background: var(--paper);
}

.rf-key {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.rf-val {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.rf-section-title {
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.rf-activity {
  margin: 0 0 20px;
  padding-left: 18px;
  line-height: 1.6;
}

.rf-activity li {
  margin-bottom: 4px;
}

.rf-recommendation {
  padding: 12px 14px;
  background: var(--paper);
  border-left: 3px solid var(--deep-red);
  border-radius: 2px;
  margin: 0 0 22px;
  line-height: 1.5;
}

.rf-recommendation span {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: var(--deep-red);
  margin-right: 6px;
}

.rf-bridge {
  padding: 16px 18px;
  background: var(--ink);
  color: var(--white);
  border-radius: 4px;
  margin-bottom: 18px;
}

.rf-bridge p {
  margin: 0 0 12px;
  line-height: 1.5;
}

.rf-bridge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rf-request-note {
  margin: 12px 0 0 !important;
  font-style: italic;
  color: var(--gold);
}

.rf-disclaimer {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Reader-file entry points */
.readerfile-promo {
  margin-top: var(--space-6);
  padding: 22px;
  border: 1px dashed var(--ink);
  border-radius: 6px;
  background: var(--paper);
  text-align: center;
}

.readerfile-promo h2 {
  font-family: "Libre Baskerville", Georgia, serif;
  margin: 4px 0 8px;
}

.readerfile-promo p {
  max-width: 520px;
  margin: 0 auto 14px;
  color: var(--muted);
  line-height: 1.5;
}

.staff-readerfile {
  margin: 0 0 22px;
}

/* ---------- Opinion columns ---------- */

/* Column article: branded kicker + Opinion tag */
.column-kicker {
  display: inline-block;
  color: var(--purple);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.column-kicker:hover {
  border-bottom-color: var(--purple);
}

.opinion-tag {
  margin-left: auto;
  padding: 3px 9px;
  background: var(--purple);
  color: var(--white);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
}

.article-column .article-body p:first-of-type::first-letter {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 3.1rem;
  font-weight: 700;
  float: left;
  line-height: 0.8;
  margin: 4px 8px 0 0;
  color: var(--purple);
}

/* Opinion hub: column tiles */
.column-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.column-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--purple);
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.column-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(5, 5, 5, 0.08);
}

.column-tile-name {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 8px;
}

.column-tile-tagline {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 6px;
}

.column-tile-by {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--purple);
  margin-top: 10px;
}

.column-tile-count {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 4px;
}

/* Column landing page */
.column-head {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 4px solid var(--purple);
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.column-head h1 {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  margin: 2px 0 6px;
}

.column-head .kicker {
  color: var(--purple);
}

.column-tagline {
  margin: 0 0 6px;
  color: var(--muted);
  font-style: italic;
}

.column-author-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}

.column-card-dek {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}

/* Columnist profile: column links */
.staff-columns {
  margin: 0 0 22px;
}

.staff-columns h2 {
  font-size: 1.1rem;
  margin: 0 0 10px;
}

.staff-column-link {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple);
  border-radius: 4px;
  text-decoration: none;
  margin-bottom: 8px;
}

.staff-column-link strong {
  display: block;
  color: var(--ink);
}

.staff-column-link span {
  font-size: 0.84rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .column-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Together (feed + persona files) ---------- */

.feed-view .feed-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* Discourse weather: the daily dominance draw, rendered as a forecast. */
.feed-weather {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--white);
  padding: 14px 16px;
  margin: 6px 0 4px;
}

.fw-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.fw-kicker {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.fw-pressure {
  margin-left: auto;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.fw-line {
  margin: 8px 0 12px;
  font-size: 0.92rem;
  color: var(--ink);
}

.fw-row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr 38px;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
}

.fw-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.fw-bar {
  height: 7px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.fw-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  opacity: 0.85;
}

.fw-share {
  font-size: 0.74rem;
  font-weight: 900;
  color: var(--muted);
  text-align: right;
}

/* Posts */
.feed-post {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 14px 16px;
}

.fp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-weight: 900;
  font-size: 0.95rem;
  text-decoration: none;
  flex: 0 0 auto;
}

.fp-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 1.4rem;
}

.fp-who {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.fp-handle {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
}

.fp-handle:hover {
  text-decoration: underline;
}

.fp-chip {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
}

.fp-chip--plain,
.fp-chip--bot {
  --accent: var(--muted);
}

.fp-time {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--muted);
}

.fp-body {
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* The headline being argued about: quiet citation back into the newspaper. */
.fp-re {
  display: block;
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  background: var(--paper);
}

.fp-re:hover {
  color: var(--ink);
}

.fp-actions {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

.fp-like,
.fp-act {
  border: 0;
  background: transparent;
  padding: 2px 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.fp-like.liked {
  color: var(--accent);
}

.fp-replies {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--line);
  display: grid;
  gap: 10px;
}

.fp-reply .fp-body {
  margin-top: 6px;
  font-size: 0.9rem;
}

/* Bots look normal in the feed; the tell is the numbers, not the styling. */
.feed-post--bot .fp-time::after {
  content: " · promoted";
  letter-spacing: 0.04em;
}

.feed-disclosure {
  margin: 18px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Persona files */
.persona-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 6px 0 14px;
}

.persona-meta h1 {
  margin: 2px 0 4px;
  font-size: 1.6rem;
}

.persona-label {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--muted);
}

.persona-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.persona-faction-line {
  font-size: 0.9rem;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin: 0 0 6px;
}

.persona-bot-note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--deep-red);
  background: var(--white);
  padding: 12px 14px;
  margin: 0 0 14px;
  font-size: 0.9rem;
}

.persona-bot-note p {
  margin: 0;
}

.persona-statements {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.persona-statements li {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--ink);
}

@media (max-width: 640px) {
  .fw-row {
    grid-template-columns: 100px 1fr 34px;
  }
}

/* ---------- Together: correctly weighted, visibly this time ---------- */

.feed-view {
  --feed-plum: #8a2d5a;
  --feed-plum-dark: #3b162c;
  --feed-plum-soft: #f5eaf0;
  --feed-card: #fff;
  --feed-shadow: 0 12px 32px rgba(35, 25, 31, 0.08);
  max-width: 1180px;
  padding-top: 24px;
}

.feed-view > .article-back {
  margin-bottom: 16px;
}

.feed-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 290px);
  align-items: end;
  gap: 32px;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 34px 36px;
  border-top: 6px solid #b94e82;
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.13) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 44%, rgba(255, 255, 255, 0.08) 0 90px, transparent 91px),
    linear-gradient(128deg, #23131f 0%, #4e1d3a 57%, #79244f 100%);
  color: #fff;
  box-shadow: 0 18px 48px rgba(49, 20, 38, 0.18);
}

.feed-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -120px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px rgba(255, 255, 255, 0.025),
    0 0 0 68px rgba(255, 255, 255, 0.018);
  pointer-events: none;
}

.feed-hero-copy,
.feed-alignment {
  position: relative;
  z-index: 1;
}

.feed-hero .kicker {
  margin: 0 0 8px;
  color: #eeb9d2;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.feed-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.feed-title-row h1 {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(3.1rem, 8vw, 5.8rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.feed-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.feed-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef6b83;
  box-shadow: 0 0 0 4px rgba(239, 107, 131, 0.13);
  animation: feedPulse 2.2s ease-in-out infinite;
}

@keyframes feedPulse {
  0%, 100% { opacity: 0.72; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

.feed-hero .section-dek {
  max-width: 600px;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(1rem, 2vw, 1.16rem);
}

.feed-alignment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 13px;
  background: rgba(10, 6, 9, 0.28);
  backdrop-filter: blur(8px);
}

.feed-alignment span,
.feed-alignment small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feed-alignment strong {
  margin: 3px 0;
  color: #fff;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.3rem;
  line-height: 1.2;
}

.feed-chamber {
  margin: 0 0 26px;
  padding: 24px;
  border: 1px solid #dfd8dc;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--feed-shadow);
}

.feed-chamber-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.feed-chamber-head h2 {
  margin: 4px 0 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.15;
}

.chamber-state {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #dfd8dc;
  border-radius: 999px;
  color: var(--feed-plum);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chamber-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 34px minmax(0, 1.1fr);
  align-items: stretch;
  gap: 14px;
}

.chamber-source,
.chamber-frame {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e4dfe2;
  border-radius: 12px;
  background: #faf9fa;
}

.chamber-source h3 {
  margin: 8px 0 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1rem;
  line-height: 1.35;
}

.chamber-source p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.chamber-label,
.chamber-echo > span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chamber-transform {
  display: grid;
  place-items: center;
  color: #b9aeb4;
  font-family: Georgia, serif;
  font-size: 1.5rem;
}

.chamber-frame {
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--accent);
  background: #fff;
}

.chamber-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  opacity: 0;
  pointer-events: none;
}

.chamber-frame.is-echoing::after {
  animation: chamberEcho 0.55s ease-out;
}

@keyframes chamberEcho {
  0% { opacity: 0; }
  32% { opacity: 1; }
  100% { opacity: 0; }
}

.chamber-frame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chamber-frame > p {
  min-height: 3.1em;
  margin: 12px 0 14px;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.52;
}

.chamber-echo {
  padding-top: 12px;
  border-top: 1px solid #ece8ea;
}

.chamber-echo p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.chamber-controls {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-top: 14px;
  padding: 2px 0;
  scrollbar-width: none;
}

.chamber-controls::-webkit-scrollbar {
  display: none;
}

.chamber-faction {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #dfdadd;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.chamber-faction:hover,
.chamber-faction.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.chamber-console {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-top: 18px;
}

.chamber-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  flex: 1 1 auto;
  margin: 0;
  border: 1px solid #e4dfe2;
  border-radius: 10px;
  background: #faf9fa;
}

.chamber-metrics div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.chamber-metrics div + div {
  border-left: 1px solid #e4dfe2;
}

.chamber-metrics dt,
.chamber-metrics dd {
  margin: 0;
}

.chamber-metrics dt {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.chamber-metrics dd {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.9rem;
  font-weight: 900;
}

.chamber-send {
  flex: 0 0 auto;
  min-width: 168px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--feed-plum);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.chamber-send:hover {
  background: var(--feed-plum-dark);
}

.chamber-award {
  margin: 10px 0 0;
  color: var(--feed-plum);
  font-size: 0.72rem;
  font-weight: 800;
}

.chamber-trace {
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid #e4dfe2;
  border-radius: 10px;
  background: #faf9fa;
}

.chamber-trace-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.chamber-trace-toggle > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.chamber-trace-toggle small,
.chamber-trace-origin > span,
.chamber-trace-origin > small,
.chamber-trace-copies > span,
.chamber-trace-verdict dt {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chamber-trace-toggle strong {
  font-size: 0.76rem;
}

.chamber-trace-action {
  color: var(--feed-plum);
  font-size: 0.68rem;
  font-weight: 900;
}

.chamber-trace-toggle:hover,
.chamber-trace-toggle.is-open {
  background: #f4f0f2;
}

.chamber-trace-panel {
  padding: 14px;
  border-top: 1px solid #e4dfe2;
  background: #fff;
}

.chamber-trace-map {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) 38px minmax(0, 1.35fr);
  align-items: stretch;
  gap: 10px;
}

.chamber-trace-origin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 13px;
  border: 1px solid #d9d2d6;
  border-left: 4px solid var(--feed-plum);
  border-radius: 9px;
  background: #fbf8fa;
  color: var(--ink);
  text-decoration: none;
}

.chamber-trace-origin strong {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 0.76rem;
  line-height: 1.35;
}

.chamber-trace-origin:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chamber-trace-flow {
  display: grid;
  place-items: center;
  color: #b9aeb4;
  font-family: Georgia, serif;
  font-size: 1.35rem;
}

.chamber-trace-branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.chamber-trace-branch {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #e4dfe2;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.trace-branch-dot {
  width: 7px;
  height: 7px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.chamber-trace-branch strong,
.chamber-trace-branch small {
  display: block;
}

.chamber-trace-branch strong {
  color: var(--accent);
  font-size: 0.62rem;
  line-height: 1.25;
}

.chamber-trace-branch small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.59rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.chamber-trace-branch:hover,
.chamber-trace-branch.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}

.chamber-trace-copies {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 25px;
  margin-top: 11px;
  padding: 8px 10px;
  border: 1px dashed #ded6da;
  border-radius: 8px;
}

.chamber-trace-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.chamber-trace-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--feed-plum);
  opacity: calc(0.35 + (var(--copy-index) * 0.05));
}

.chamber-trace-dots b {
  color: var(--feed-plum);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.65rem;
}

.chamber-trace-verdict {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 11px 0 0;
  border: 1px solid #e4dfe2;
  border-radius: 8px;
}

.chamber-trace-verdict div {
  padding: 9px 10px;
}

.chamber-trace-verdict div + div {
  border-left: 1px solid #e4dfe2;
}

.chamber-trace-verdict dt,
.chamber-trace-verdict dd {
  margin: 0;
}

.chamber-trace-verdict dd {
  margin-top: 3px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.84rem;
  font-weight: 900;
}

.feed-cascade {
  margin: 0 0 28px;
  overflow: hidden;
  border: 1px solid #dcd5d9;
  border-top: 5px solid var(--feed-plum);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--feed-shadow);
}

.feed-cascade-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 24px 17px;
}

.feed-cascade-head h2 {
  margin: 4px 0 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  line-height: 1.15;
}

.cascade-origin-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: min(680px, 100%);
  margin-top: 11px;
  color: var(--muted);
  text-decoration: none;
}

.cascade-origin-link span {
  flex: 0 0 auto;
  color: var(--feed-plum);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cascade-origin-link strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cascade-origin-link:hover strong,
.cascade-origin-link:focus-visible strong {
  color: var(--feed-plum);
  text-decoration: underline;
}

.cascade-position {
  flex: 0 0 auto;
  color: var(--feed-plum);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.cascade-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid #e4dfe2;
  border-bottom: 1px solid #e4dfe2;
  background: #faf9fa;
}

.cascade-tick {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 13px 12px;
  border: 0;
  border-right: 1px solid #e4dfe2;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.cascade-tick:last-child {
  border-right: 0;
}

.cascade-tick::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--feed-plum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.cascade-tick time {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.58rem;
  font-weight: 800;
}

.cascade-tick span {
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cascade-tick:hover,
.cascade-tick.is-past {
  color: var(--ink);
}

.cascade-tick.is-active {
  background: #f4eff2;
  color: var(--feed-plum);
}

.cascade-tick.is-active::after,
.cascade-tick.is-past::after {
  transform: scaleX(1);
}

.cascade-tick.is-past::after {
  opacity: 0.32;
}

.cascade-stage-view {
  padding: 20px 24px 0;
}

.cascade-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 205px;
  align-items: stretch;
  gap: 14px;
}

.cascade-current {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e4dfe2;
  border-left: 5px solid var(--accent);
  border-radius: 11px;
  background: #fff;
}

.cascade-current > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.cascade-current > header > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cascade-stage-kind {
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cascade-current time,
.cascade-burst time {
  color: var(--muted);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
}

.cascade-actor {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cascade-actor > a,
.cascade-actor > strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.67rem;
  font-weight: 900;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cascade-actor > a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cascade-current blockquote {
  margin: 17px 0 0;
  padding: 0;
  border: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1rem, 2.2vw, 1.28rem);
  font-weight: 700;
  line-height: 1.45;
}

.cascade-note {
  max-width: 72ch;
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.cascade-quote {
  margin-top: 15px;
  padding: 11px 12px;
  border-left: 3px solid #d7ced3;
  background: #f7f5f6;
}

.cascade-quote span,
.cascade-context p,
.cascade-burst-head span,
.cascade-custody > span,
.cascade-metrics dt {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cascade-quote p {
  display: -webkit-box;
  overflow: hidden;
  margin: 5px 0 0;
  color: #5e565a;
  font-size: 0.68rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cascade-context {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid #d7dfe8;
  border-radius: 8px;
  background: #f5f8fb;
  color: #31506f;
}

.cascade-context span {
  font-size: 0.85rem;
}

.cascade-context p {
  margin: 1px 0 0;
  color: #31506f;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.cascade-custody {
  padding: 16px;
  border: 1px solid #e4dfe2;
  border-radius: 11px;
  background: #faf9fa;
}

.cascade-custody ol {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.cascade-custody li {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-height: 29px;
  color: #aaa0a6;
  font-size: 0.65rem;
  font-weight: 800;
}

.cascade-custody li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: -1px;
  left: 4px;
  width: 2px;
  background: #ded8db;
}

.cascade-custody i {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border: 2px solid #cfc7cb;
  border-radius: 50%;
  background: #faf9fa;
}

.cascade-custody li.is-past,
.cascade-custody li.is-current {
  color: var(--ink);
}

.cascade-custody li.is-past i,
.cascade-custody li.is-current i {
  border-color: var(--feed-plum);
  background: var(--feed-plum);
}

.cascade-custody li.is-current i {
  box-shadow: 0 0 0 4px var(--feed-plum-soft);
}

.cascade-burst {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #e4dfe2;
  border-radius: 10px;
  background: #fdfcfd;
}

.cascade-burst-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cascade-burst-head strong {
  color: var(--feed-plum);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
}

.cascade-burst ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.cascade-burst li {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e8e3e6;
  border-radius: 8px;
  background: #fff;
}

.cascade-burst li > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cascade-burst a {
  overflow: hidden;
  color: var(--feed-plum);
  font-size: 0.62rem;
  font-weight: 900;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cascade-burst a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cascade-burst p {
  display: -webkit-box;
  overflow: hidden;
  margin: 5px 0 0;
  color: #4f484c;
  font-size: 0.67rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cascade-console {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 15px 24px 22px;
}

.cascade-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  flex: 1 1 auto;
  margin: 0;
  border: 1px solid #e4dfe2;
  border-radius: 10px;
  background: #faf9fa;
}

.cascade-metrics div {
  padding: 10px 11px;
}

.cascade-metrics div + div {
  border-left: 1px solid #e4dfe2;
}

.cascade-metrics dt,
.cascade-metrics dd {
  margin: 0;
}

.cascade-metrics dd {
  margin-top: 3px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 900;
}

.cascade-advance-wrap {
  display: flex;
  flex: 0 0 190px;
  flex-direction: column;
  gap: 6px;
}

.cascade-advance-wrap > span {
  color: var(--feed-plum);
  font-size: 0.58rem;
  font-weight: 800;
  text-align: center;
}

.cascade-advance {
  flex: 1 1 auto;
  min-height: 45px;
  padding: 10px 15px;
  border: 0;
  border-radius: 10px;
  background: var(--feed-plum);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.cascade-advance:hover {
  background: var(--feed-plum-dark);
}

.cascade-award {
  margin: -10px 24px 18px;
  color: var(--feed-plum);
  font-size: 0.7rem;
  font-weight: 900;
}

.feed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 326px;
  align-items: start;
  gap: 24px;
}

.feed-stream {
  min-width: 0;
}

.feed-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  margin-bottom: 12px;
  padding: 10px 4px 10px 2px;
  border-bottom: 1px solid var(--line);
}

.feed-toolbar > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 auto;
}

.feed-toolbar-kicker {
  color: var(--feed-plum);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.feed-toolbar strong {
  font-size: 0.9rem;
}

.feed-filters {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 3px 1px;
  scrollbar-width: none;
}

.feed-filters::-webkit-scrollbar {
  display: none;
}

.feed-filter {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.feed-filter:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.feed-filter.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}

.feed-view .feed-list {
  gap: 14px;
  margin-top: 0;
}

.feed-post {
  position: relative;
  overflow: hidden;
  padding: 18px 20px 16px;
  border: 1px solid #e2dde0;
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--feed-card);
  box-shadow: var(--feed-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.feed-post:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 36%, #e2dde0);
  box-shadow: 0 17px 38px rgba(35, 25, 31, 0.12);
}

.feed-post[hidden] {
  display: none;
}

.feed-post--bot {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, #fff), #fff 34%);
}

.feed-post--bot::after {
  content: "AMPLIFIED";
  position: absolute;
  top: 15px;
  right: -30px;
  width: 110px;
  padding: 4px 0;
  transform: rotate(35deg);
  background: color-mix(in srgb, var(--accent) 13%, #fff);
  color: var(--accent);
  text-align: center;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.feed-post--coordinated {
  background:
    linear-gradient(90deg, rgba(101, 35, 70, 0.055), transparent 46%),
    var(--feed-card);
}

.feed-post--coordinated::after {
  top: 50px;
}

.fp-burst-marker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -18px -20px 15px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(101, 35, 70, 0.18);
  background: var(--feed-plum-soft);
}

.fp-burst-marker span {
  color: var(--feed-plum);
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fp-burst-marker strong {
  color: #4c3140;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
}

.fp-burst-marker button {
  margin-left: auto;
  padding: 4px 7px;
  border: 1px solid rgba(101, 35, 70, 0.3);
  border-radius: 999px;
  background: #fff;
  color: var(--feed-plum);
  font-size: 0.58rem;
  font-weight: 900;
  cursor: pointer;
}

.fp-burst-marker button:hover {
  border-color: var(--feed-plum);
  background: var(--feed-plum);
  color: #fff;
}

.fp-head {
  gap: 10px;
  flex-wrap: nowrap;
}

.fp-avatar {
  width: 42px;
  height: 42px;
  border: 3px solid var(--white);
  outline: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: 0 2px 8px rgba(10, 8, 9, 0.1);
}

.fp-avatar--sm {
  width: 28px;
  height: 28px;
  border-width: 2px;
  font-size: 0.72rem;
}

.fp-who {
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.fp-handle {
  overflow: hidden;
  max-width: 270px;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-chip {
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 0.57rem;
}

.fp-time {
  flex: 0 0 auto;
  font-size: 0.7rem;
}

.feed-post > .fp-body {
  margin-top: 14px;
  color: #242126;
  font-size: clamp(0.98rem, 1.8vw, 1.06rem);
  line-height: 1.58;
}

.fp-re {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  align-items: stretch;
  overflow: hidden;
  min-height: 92px;
  margin-top: 15px;
  padding: 0;
  border: 1px solid #ded9dc;
  border-left: 0;
  border-radius: 10px;
  background: #f6f4f5;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.fp-re:hover {
  border-color: var(--accent);
  background: var(--white);
}

.fp-re-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
}

.fp-re-kicker {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fp-re-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.fp-re-copy > span:last-child {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.fp-re img {
  width: 126px;
  height: 100%;
  min-height: 92px;
  object-fit: cover;
}

.fp-actions {
  gap: 7px;
  margin-top: 12px;
}

.fp-like,
.fp-act {
  min-height: 31px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f4f2f3;
  color: #626067;
  font-size: 0.72rem;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.fp-like:hover,
.fp-act:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  color: var(--accent);
}

.fp-like.liked {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
}

.fp-replies {
  margin-top: 14px;
  padding: 12px 0 0 14px;
  border-top: 1px solid #ece8ea;
  border-left: 0;
  gap: 12px;
}

.fp-reply {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  position: relative;
}

.fp-reply:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 31px;
  bottom: -10px;
  width: 1px;
  background: #ddd7da;
}

.fp-reply-copy {
  min-width: 0;
  padding: 1px 0 8px;
}

.fp-reply .fp-head {
  min-height: 28px;
}

.fp-reply .fp-body {
  margin: 3px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
}

.fp-reply .fp-actions {
  margin-top: 7px;
}

.fp-reply .fp-like,
.fp-reply .fp-act {
  min-height: 26px;
  padding: 4px 8px;
  font-size: 0.65rem;
}

.feed-filter-empty {
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
  font-size: 0.88rem;
}

.feed-side {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 130px;
}

.feed-weather {
  margin: 0;
  padding: 18px;
  border: 1px solid #dfd8dc;
  border-top: 5px solid var(--feed-plum);
  border-left-width: 1px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--feed-shadow);
}

.fw-head {
  display: grid;
  gap: 5px;
}

.fw-kicker {
  color: var(--feed-plum);
  font-size: 0.67rem;
  letter-spacing: 0.11em;
}

.fw-pressure {
  margin-left: 0;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
}

.fw-line {
  margin: 12px 0 16px;
  padding: 10px 11px;
  border-radius: 8px;
  background: var(--feed-plum-soft);
  color: #4c3140;
  font-size: 0.82rem;
  line-height: 1.45;
}

.fw-bars {
  display: grid;
  gap: 11px;
}

.fw-row {
  grid-template-columns: 1fr 36px;
  gap: 4px 8px;
  margin: 0;
}

.fw-name {
  appearance: none;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.fw-name:hover,
.fw-name.is-active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fw-share {
  grid-column: 2;
  grid-row: 1;
}

.fw-bar {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: #ece8ea;
}

.fw-bar i {
  border-radius: inherit;
}

.feed-method {
  padding: 19px;
  border-radius: 14px;
  background: #1d191c;
  color: #fff;
  box-shadow: var(--feed-shadow);
}

.feed-method-kicker {
  color: #dfa8c3;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.feed-method h2 {
  margin: 7px 0 9px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.25;
}

.feed-method p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.77rem;
  line-height: 1.5;
}

.feed-method dl {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
}

.feed-method dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.feed-method dt,
.feed-method dd {
  margin: 0;
  font-size: 0.69rem;
}

.feed-method dt {
  color: rgba(255, 255, 255, 0.52);
}

.feed-method dd {
  font-weight: 800;
}

.feed-disclosure {
  margin-top: 24px;
  padding: 13px 15px;
  border: 1px solid #dfdadd;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

/* Persona files inherit the better cards without inheriting the feed grid. */
.persona-view {
  max-width: 880px;
}

.persona-view .feed-list {
  margin-top: 14px;
}

.persona-head {
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--feed-shadow);
}

.persona-head .fp-avatar--lg {
  width: 64px;
  height: 64px;
}

.persona-meta h1 {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.persona-bot-note,
.persona-statements li {
  border-radius: 10px;
}

@media (max-width: 980px) {
  .feed-layout {
    grid-template-columns: minmax(0, 1fr) 286px;
    gap: 18px;
  }

  .feed-hero {
    grid-template-columns: minmax(0, 1fr) 230px;
  }

  .feed-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .feed-filters {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .feed-view {
    padding-inline: 14px;
  }

  .feed-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 22px;
    border-radius: 14px;
  }

  .feed-alignment {
    max-width: 320px;
  }

  .feed-chamber {
    padding: 20px;
  }

  .chamber-grid {
    grid-template-columns: 1fr;
  }

  .chamber-transform {
    display: none;
  }

  .chamber-console {
    flex-direction: column;
  }

  .chamber-send {
    min-height: 44px;
  }

  .chamber-trace-map {
    grid-template-columns: minmax(0, 0.72fr) 28px minmax(0, 1.28fr);
  }

  .cascade-timeline {
    grid-template-columns: repeat(5, 116px);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .cascade-stage-grid {
    grid-template-columns: 1fr;
  }

  .cascade-custody {
    display: none;
  }

  .cascade-console {
    flex-direction: column;
  }

  .cascade-advance-wrap {
    flex-basis: auto;
  }

  .feed-layout {
    grid-template-columns: 1fr;
  }

  .feed-side {
    position: static;
    order: -1;
    grid-template-columns: 1fr;
  }

  .feed-weather {
    height: 100%;
  }

  .feed-method {
    display: none;
  }
}

@media (max-width: 560px) {
  .feed-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }

  .feed-title-row h1 {
    font-size: clamp(3.25rem, 21vw, 4.5rem);
  }

  .feed-chamber {
    padding: 16px 14px;
    border-radius: 12px;
  }

  .feed-chamber-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .chamber-source,
  .chamber-frame {
    padding: 14px;
  }

  .chamber-metrics {
    grid-template-columns: 1fr;
  }

  .chamber-metrics div + div {
    border-top: 1px solid #e4dfe2;
    border-left: 0;
  }

  .chamber-trace-toggle {
    align-items: flex-start;
  }

  .chamber-trace-toggle > span:first-child {
    flex-direction: column;
    gap: 3px;
  }

  .chamber-trace-map {
    grid-template-columns: 1fr;
  }

  .chamber-trace-flow {
    min-height: 18px;
    transform: rotate(90deg);
  }

  .chamber-trace-origin {
    min-height: 104px;
  }

  .feed-cascade {
    border-radius: 12px;
  }

  .feed-cascade-head {
    align-items: flex-start;
    padding: 18px 14px 15px;
  }

  .cascade-origin-link {
    display: grid;
    gap: 4px;
  }

  .cascade-origin-link strong {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .cascade-timeline {
    grid-template-columns: repeat(5, 104px);
  }

  .cascade-tick {
    padding-inline: 10px;
  }

  .cascade-stage-view {
    padding: 14px 14px 0;
  }

  .cascade-current {
    padding: 14px;
  }

  .cascade-current > header {
    flex-direction: column;
  }

  .cascade-current blockquote {
    font-size: 1rem;
  }

  .cascade-burst ul {
    grid-template-columns: 1fr;
  }

  .cascade-console {
    padding: 13px 14px 17px;
  }

  .cascade-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cascade-metrics div:nth-child(3) {
    border-top: 1px solid #e4dfe2;
    border-left: 0;
  }

  .cascade-metrics div:nth-child(4) {
    border-top: 1px solid #e4dfe2;
  }

  .cascade-award {
    margin: -7px 14px 16px;
  }

  .feed-post {
    padding: 15px 14px 13px;
    border-radius: 12px;
  }

  .fp-burst-marker {
    flex-wrap: wrap;
    margin: -15px -14px 13px;
    padding-right: 44px;
  }

  .fp-burst-marker button {
    margin-left: 0;
  }

  .fp-head {
    align-items: flex-start;
  }

  .fp-who {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .fp-time {
    margin-left: auto;
  }

  .fp-re {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .fp-re img {
    width: 88px;
  }

  .fp-actions {
    flex-wrap: wrap;
  }

  .fp-replies {
    padding-left: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feed-live i {
    animation: none;
  }

  .feed-post {
    transition: none;
  }

  .chamber-frame.is-echoing::after {
    animation: none;
  }
}