/* ==========================================================================
   Sovereign Terminal — main.css · Edition II "Night Ledger"
   Ink-navy ground, one amber signal accent, blueprint hairlines, square
   geometry. Instrument Serif (display) · Inter Tight (headlines, body) ·
   JetBrains Mono (data, labels, meta)
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Ground & surfaces */
  --bg: #0a0e17;
  --bg-rgb: 10, 14, 23;
  --bg-2: #0e1320;
  --surface: #121929;
  --surface-2: #182033;
  --surface-3: #222c42;
  --line-rgb: 160, 185, 235;

  /* Text */
  --text: #eef1f6;
  --text-2: #a3adbf;
  --text-3: #6b768a;
  --text-prose: #ccd3df;
  --ink: #1a1203; /* text on the accent */

  /* Signal — the one accent */
  --accent: #ffb23f;
  --accent-rgb: 255, 178, 63;
  --accent-2: #ffd38a;
  --glow-rgb: 255, 178, 63;

  /* Market semantics */
  --up: #3ddc97;
  --up-rgb: 61, 220, 151;
  --down: #ff6b6b;
  --down-rgb: 255, 107, 107;
  --warn: #f5c451;

  /* Type */
  --f-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Layout */
  --wrap: 1320px;
  --gut: 24px;
  --gap: 20px;
  --r-xl: 6px;
  --r-lg: 4px;
  --r-md: 3px;
  --r-sm: 2px;
  --masthead-h: 72px;
  --shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.9);
}

/* Derived tokens — follow whichever scheme is active */
:root {
  --line: rgba(var(--line-rgb), 0.11);
  --line-strong: rgba(var(--line-rgb), 0.22);
  --panel: linear-gradient(180deg, rgba(var(--line-rgb), 0.045) 0%, rgba(var(--line-rgb), 0.015) 100%);
  --grid: linear-gradient(rgba(var(--line-rgb), 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(var(--line-rgb), 0.06) 1px, transparent 1px) 0 0 / 32px 32px;
  --hi: var(--accent);
  --hi-rgb: var(--accent-rgb);
  /* Legacy names kept for the archive / single templates */
  --metal: linear-gradient(180deg, var(--text) 0%, var(--text) 100%);
  --metal-h: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  --btn: var(--accent);
  --btn-hover: var(--accent-2);
  --sheen-1: var(--bg-2);
  --sheen-2: var(--surface-2);
  --sheen-3: rgba(var(--accent-rgb), 0.35);
}

/* ── 1b. Colour schemes ────────────────────────────────────────────────── */
/* Picked in Customizer → Colour scheme; printed as <html data-scheme="…">.
   "midnight" (Ink & Amber, the :root values above) prints no attribute. */

/* Ink & Ice — cold navy, ice-blue signal */
:root[data-scheme="graphite"] {
  --bg: #090d14;
  --bg-rgb: 9, 13, 20;
  --bg-2: #0d1320;
  --surface: #111a2a;
  --surface-2: #172236;
  --surface-3: #212e46;
  --line-rgb: 150, 190, 245;
  --ink: #04121f;
  --accent: #7cc4ff;
  --accent-rgb: 124, 196, 255;
  --accent-2: #b5ddff;
  --glow-rgb: 124, 196, 255;
}

/* Ink & Jade — green-black ground, jade signal */
:root[data-scheme="emerald"] {
  --bg: #08100f;
  --bg-rgb: 8, 16, 15;
  --bg-2: #0c1615;
  --surface: #111e1c;
  --surface-2: #172725;
  --surface-3: #213531;
  --line-rgb: 170, 235, 215;
  --text: #ebf4f1;
  --text-2: #9fb7b0;
  --text-3: #667e77;
  --text-prose: #cbdcd7;
  --ink: #04170f;
  --accent: #3fe0a8;
  --accent-rgb: 63, 224, 168;
  --accent-2: #9af0cf;
  --glow-rgb: 63, 224, 168;
}

/* Ink & Coral — warm aubergine-black, coral signal */
:root[data-scheme="sunset"] {
  --bg: #110c10;
  --bg-rgb: 17, 12, 16;
  --bg-2: #171016;
  --surface: #1e151c;
  --surface-2: #271c25;
  --surface-3: #342532;
  --line-rgb: 245, 200, 215;
  --text: #f7eef1;
  --text-2: #bea6ad;
  --text-3: #846b73;
  --text-prose: #e1d0d5;
  --ink: #240905;
  --accent: #ff7a59;
  --accent-rgb: 255, 122, 89;
  --accent-2: #ffb29e;
  --glow-rgb: 255, 122, 89;
}


/* ── 2. Reset & base ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
  background: var(--bg);
}

body {
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 78% -12%, rgba(var(--glow-rgb), 0.09), transparent 62%),
    radial-gradient(900px 600px at -10% 30%, rgba(var(--glow-rgb), 0.04), transparent 60%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.site-main {
  flex: 1 0 auto;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

body.admin-bar {
  min-height: calc(100vh - 32px);
  min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    min-height: calc(100vh - 46px);
    min-height: calc(100dvh - 46px);
  }
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--f-sans);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

::selection {
  background: var(--hi);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--hi);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--hi);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.icon {
  flex: none;
}

/* ── 3. Layout primitives ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.container--narrow {
  max-width: 880px;
}

.sec {
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

/* Media wrappers produced by st_thumb() */
[class*="__media"] {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
}

[class*="__media"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.4s;
}

article:hover [class*="__media"] img,
li:hover > [class*="__media"] img {
  transform: scale(1.04);
}

[class*="__media"][class*="--empty"] {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, var(--surface-3), var(--surface) 70%);
}

.media__fallback {
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.75rem;
  text-align: center;
}

/* Hover underline shared by every headline link */
h1 a,
h2 a,
h3 a,
h4 a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 96%;
  background-repeat: no-repeat;
  transition: background-size 0.35s, color 0.2s;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover {
  background-size: 100% 1px;
}

/* Whole-card links: the headline link stretches over its positioned card */
.tile__title a::after,
.spot__title a::after,
.cover__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.metal {
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ── 4. Buttons, pills, meta, arrows, section heads ────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.btn--chrome,
.btn--grad,
.btn--accent {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
}

.btn--chrome:hover,
.btn--grad:hover,
.btn--accent:hover {
  background: var(--accent-2);
  box-shadow: 4px 4px 0 0 rgba(var(--accent-rgb), 0.28);
  transform: translate(-1px, -1px);
}

.btn--line,
.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}

.btn--line:hover,
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--ink {
  background: var(--ink);
  color: var(--accent-2);
}

.btn--ink:hover {
  background: #000;
  color: #fff;
}

.btn--sm {
  padding: 0.78rem 1.1rem;
  font-size: 0.68rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Category pill */
.pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.36rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.pill::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--accent);
}

.pill:hover {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
}

.pill:hover::before {
  background: var(--ink);
}

.pill--accent {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
}

.pill--glass,
.pill--light {
  color: #fff;
  background: rgba(var(--bg-rgb), 0.62);
  border-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.pill--bare {
  padding: 0;
  border: none;
  color: var(--text-3);
}

.pill--bare::before {
  display: none;
}

.pill--bare:hover {
  background: none;
  color: var(--text);
}

/* Meta row */
.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
}

.meta__date,
.card__date,
.meta__read {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.meta__read::before {
  content: "/";
  margin-right: 0.7rem;
  color: var(--line-strong);
}

/* Square "open" button */
.arrow {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(var(--bg-rgb), 0.4);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  pointer-events: none;
}

.arrow svg {
  transition: transform 0.3s;
}

.arrow--lg {
  width: 54px;
  height: 54px;
}

.arrow--sm {
  width: 34px;
  height: 34px;
}

.arrow--sm svg {
  width: 15px;
  height: 15px;
}

article:hover .arrow,
a:hover > .arrow,
a:hover .arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

article:hover .arrow svg,
a:hover .arrow svg {
  transform: translateX(3px);
}

/* Section head: mono index + eyebrow, serif title left, kicker + link right,
   a ruled line underneath with an amber lead-in. */
.home {
  counter-reset: sec;
}

.shead {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  flex-wrap: wrap;
  padding-bottom: clamp(1rem, 2vw, 1.4rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}

.shead::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 2px;
  background: var(--accent);
}

.home .shead {
  counter-increment: sec;
}

.shead__titles {
  min-width: 0;
}

.shead__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.shead__eyebrow::before {
  content: "//";
  color: var(--accent);
}

.home .shead__eyebrow::before {
  content: counter(sec, decimal-leading-zero);
  padding: 0.22rem 0.4rem;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: var(--r-sm);
  font-size: 0.62rem;
  line-height: 1;
  color: var(--accent);
}

.shead__title {
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 4.8vw, 3.9rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--text);
  padding-bottom: 0.04em;
}

.shead__side {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem 2.5rem;
  flex-wrap: wrap;
}

.shead__kicker {
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-2);
}

.shead__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.shead__more,
.label-row__more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, gap 0.2s;
}

.shead__more:hover,
.label-row__more:hover {
  color: var(--accent);
  border-color: var(--accent);
  gap: 0.8rem;
}

.shead--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.shead--center::after {
  left: 50%;
  transform: translateX(-50%);
}

.shead--center .shead__eyebrow {
  justify-content: center;
}

.shead--center .shead__side {
  flex-direction: column;
  align-items: center;
}

/* Small mono label with a hairline under it */
.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.95rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text);
}

/* ── 5. Masthead ───────────────────────────────────────────────────────── */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(var(--bg-rgb), 0.8);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--line);
  transition: background 0.2s, border-color 0.2s;
}

.admin-bar .masthead {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .masthead {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  .admin-bar .masthead {
    top: 0;
  }
}

.masthead.is-stuck {
  background: rgba(var(--bg-rgb), 0.94);
  border-bottom-color: var(--line-strong);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--masthead-h);
}

.masthead__brand {
  flex: none;
  display: flex;
  align-items: center;
}

.masthead__logo .custom-logo-link,
.footer-logo-link .custom-logo-link,
.drawer__logo .custom-logo-link,
.masthead__logo,
.footer-logo-link,
.drawer__logo {
  display: inline-flex;
  align-items: center;
}

.masthead__logo img,
.masthead__logo-img {
  height: var(--logo-h, 45px);
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

/* The site logo is dark ink on transparent; knock it out to white on the
   dark ground. A dedicated light "Footer Logo" is shown untouched. */
.masthead__logo .custom-logo,
.drawer__logo .custom-logo,
.footer-logo-link .custom-logo {
  filter: grayscale(1) brightness(3.1) contrast(0.92);
}

.site-logo,
.footer-logo-text {
  font-family: var(--f-display);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
}

.masthead__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}

.nav-list a::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--line-strong);
  transition: background 0.2s;
}

.nav-list a:hover,
.nav-list .current-menu-item > a,
.nav-list .current-menu-parent > a,
.nav-list .current-post-parent > a {
  color: var(--text);
  background: rgba(var(--line-rgb), 0.06);
}

.nav-list a:hover::before,
.nav-list .current-menu-item > a::before,
.nav-list .current-menu-parent > a::before,
.nav-list .current-post-parent > a::before {
  background: var(--accent);
}

.masthead__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.search-btn:hover,
.search-btn[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

.masthead__sub {
  padding: 0.85rem 1.15rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
}

.nav-toggle__bar {
  display: block;
  height: 1.5px;
  background: var(--text);
}

.nav-toggle__bar:last-child {
  width: 60%;
  background: var(--accent);
}

/* Search panel */
.search-panel {
  border-top: 1px solid var(--line);
  background: rgba(var(--bg-rgb), 0.97);
  padding: 1.1rem 0;
}

.search-panel__form {
  display: flex;
  gap: 0.6rem;
}

.search-panel__input {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: rgba(var(--line-rgb), 0.03);
  font-family: var(--f-mono);
  font-size: 0.9rem;
  -webkit-appearance: none;
  appearance: none;
}

.search-panel__input::placeholder {
  color: var(--text-3);
}

.search-panel__input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── 6. Rate band ──────────────────────────────────────────────────────── */
.ticker {
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
}

.home .ticker {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.ticker__flag {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.3rem 0 var(--gut);
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.ticker__flag::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -12px;
  width: 12px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.ticker__dot {
  width: 7px;
  height: 7px;
  background: var(--ink);
  animation: st-blink 1.4s steps(2, start) infinite;
}

.hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 0 rgba(var(--up-rgb), 0.6);
  animation: st-pulse 2.2s infinite;
}

@keyframes st-blink {
  to { visibility: hidden; }
}

@keyframes st-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--up-rgb), 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(var(--up-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--up-rgb), 0); }
}

.ticker__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 95%, transparent);
}

.ticker__track {
  display: flex;
  width: max-content;
}

.ticker__track.is-animating {
  animation: st-marquee 60s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

@keyframes st-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.tick {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.85rem 1.5rem;
  border-right: 1px dashed var(--line);
  font-family: var(--f-mono);
  font-size: 0.76rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tick__sym {
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--text-3);
}

.tick__val {
  font-weight: 500;
  color: var(--text);
}

.tick__chg {
  font-size: 0.7rem;
  font-weight: 500;
}

.tick__chg.is-up::before {
  content: "▲ ";
  font-size: 0.55rem;
}

.tick__chg.is-down::before {
  content: "▼ ";
  font-size: 0.55rem;
}

.tick--idle {
  color: var(--text-3);
}

.is-up {
  color: var(--up);
}

.is-down {
  color: var(--down);
}

.is-flat {
  color: var(--text-3);
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track.is-animating {
    animation: none;
  }
  .ticker__viewport {
    overflow-x: auto;
  }
  .ticker__dot {
    animation: none;
  }
}


/* ── 7. Mobile drawer ──────────────────────────────────────────────────── */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  width: min(380px, 88vw);
  padding: 1.4rem 1.5rem 1.75rem;
  background: var(--bg-2);
  border-left: 1px solid var(--line-strong);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0.35s;
  overflow-y: auto;
}

.drawer.is-open {
  transform: none;
  visibility: visible;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.2rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.drawer__logo img,
.drawer__logo-img {
  height: 40px;
  width: auto;
  max-width: 200px;
}

.drawer__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text);
}

.nav-list--drawer {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.nav-list--drawer a {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--text);
}

.nav-list--drawer a::after {
  display: none;
}

.drawer__foot {
  margin-top: auto;
  padding-top: 2rem;
}

.drawer__note {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--text-2);
}

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s;
}

.drawer-scrim.is-visible {
  opacity: 1;
}


/* ── 8. Hero — status bar, nameplate, broadsheet front ─────────────────── */
.hero {
  position: relative;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* Blueprint grid fading out under the nameplate */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  height: min(620px, 80%);
  background: var(--grid);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  pointer-events: none;
}

.hero__bar {
  display: flex;
  align-items: stretch;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(var(--bg-rgb), 0.7);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.hero__bar > * {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1rem;
  white-space: nowrap;
}

.hero__bar > * + * {
  border-left: 1px solid var(--line);
}

.hero__live {
  color: var(--up);
}

.hero__bar-item--wide {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
}

.hero__bar-clock {
  margin-left: auto;
  color: var(--accent);
  transition: background 0.2s;
}

.hero__bar-clock:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.hero__bar-clock [data-hero-time] {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hero__bar-open {
  color: var(--text-2);
}

.hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: end;
  gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line-strong);
}

.hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 8.6vw, 8.4rem);
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--text);
}

.hero__title em {
  font-style: italic;
  color: var(--accent);
  padding-right: 0.04em;
}

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 0.4rem;
}

.hero__dek {
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 1.6;
  color: var(--text-2);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Broadsheet front: lead · seconds · side */
.front {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3.1fr) minmax(0, 3.3fr);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

.front--no-second {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.front > * {
  min-width: 0;
}

.lead {
  padding-right: clamp(1.25rem, 2.2vw, 1.85rem);
}

.lead__frame {
  position: relative;
}

.lead__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
}

.crop {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.crop--tl {
  top: -7px;
  left: -7px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
}

.crop--br {
  right: -7px;
  bottom: -7px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}

.lead__body {
  margin-top: 1.35rem;
}

.lead__title {
  margin-top: 0.9rem;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.lead__dek {
  margin-top: 0.85rem;
  max-width: 60ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-2);
}

.front__col {
  display: flex;
  flex-direction: column;
  padding: 0 clamp(1.25rem, 2.2vw, 1.85rem);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.second + .second {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.second__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
}

.second .meta {
  margin: 0.95rem 0 0.5rem;
}

.second__desk {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.second__title {
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.front__side {
  display: flex;
  flex-direction: column;
  padding-left: clamp(1.25rem, 2.2vw, 1.85rem);
}

.front--no-second .front__side {
  border-left: 1px solid var(--line);
}

/* The wire — fills the column so all three end on one line */
.wire {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wire__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wire__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
}

.wire__title::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
}

.wire__count {
  color: var(--text-3);
}

.wire__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wire__item {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem 0;
}

.wire__item + .wire__item {
  border-top: 1px solid var(--line);
}

.wire__time {
  padding-top: 0.15rem;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.wire__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.wire__desk {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.wire__headline {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.36;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wire__item:hover .wire__headline {
  color: var(--accent-2);
}

/* ── 9. Ledger figures ─────────────────────────────────────────────────── */
.figs-sec {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.fig {
  display: flex;
  flex-direction: column;
  padding: 1.15rem clamp(1rem, 2vw, 1.5rem) 1.35rem;
  transition: background 0.25s;
}

.fig + .fig {
  border-left: 1px solid var(--line);
}

.fig:hover {
  background: rgba(var(--accent-rgb), 0.04);
}

.fig__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fig__n {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  color: var(--text-3);
}

.fig__icon {
  color: var(--text-3);
  transition: color 0.25s;
}

.fig:hover .fig__icon {
  color: var(--accent);
}

.fig__num {
  margin-top: 0.9rem;
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.fig__label {
  margin-top: 0.55rem;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ── 10. Stock — overlay lead + horizontal cards ───────────────────────── */
.floor {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: var(--gap);
}

.floor--solo {
  grid-template-columns: 1fr;
}

.tile {
  position: relative;
  min-height: 420px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: var(--surface);
  isolation: isolate;
}

.tile__media {
  position: absolute;
  inset: 0;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb), 0.35) 0%, rgba(var(--bg-rgb), 0) 25%, rgba(var(--bg-rgb), 0.55) 55%, rgba(var(--bg-rgb), 0.96) 100%);
  pointer-events: none;
}

.tile__title,
.cover__title {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.tile__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.25rem, 2.6vw, 2rem);
}

.tile__title {
  margin-top: auto;
  max-width: 24ch;
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
  font-weight: 400;
  line-height: 1.02;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.tile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tile__meta .meta__date,
.tile__meta .meta__read {
  color: rgba(255, 255, 255, 0.72);
}

.floor__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.hcard {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.25s;
}

.hcard:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.hcard__media {
  height: 100%;
  min-height: 170px;
}

.hcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.1rem 1.2rem 1.15rem;
}

.hcard__n {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  color: var(--accent);
}

.hcard__title {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hcard .meta {
  margin-top: auto;
}

/* Whole-card links: the headline link stretches over its positioned card */
.tile__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── 11. Tech News — ruled columns ─────────────────────────────────────── */
.cols {
  --cg: clamp(2rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem var(--cg);
}

.colcard {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Hairline centred in the column gap */
.colcard + .colcard::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--cg) / -2);
  width: 1px;
  background: var(--line);
}

.colcard__frame {
  position: relative;
}

.colcard__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
}

.colcard__media img {
  filter: saturate(0.8);
}

.colcard:hover .colcard__media img {
  filter: none;
}

.colcard__n {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.3rem 0.45rem;
  border-radius: var(--r-sm);
  background: rgba(var(--bg-rgb), 0.78);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--accent);
  pointer-events: none;
}

.colcard .meta__date {
  display: block;
  margin-top: 1rem;
}

.colcard__title {
  margin-top: 0.45rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.colcard__dek {
  margin-top: 0.55rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 12. Business — lead + timeline ────────────────────────────────────── */
.biz {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.biz--solo {
  grid-template-columns: 1fr;
}

.biz__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
}

.biz__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.95rem;
  margin-top: 1.35rem;
}

.biz__title {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.biz__dek {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-2);
}

.timeline__label {
  display: block;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.timeline__list {
  position: relative;
}

.timeline__list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(3.2rem + 0.9rem + 4.5px);
  width: 1px;
  background: var(--line-strong);
}

.tl {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem 9px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 0.9rem;
  padding: 1.2rem 0;
}

.tl + .tl {
  border-top: 1px dashed var(--line);
}

.tl__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.tl__date b {
  font-family: var(--f-display);
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--text);
}

.tl__date span {
  margin-top: 0.25rem;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--text-3);
}

.tl__dot {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
  background: var(--bg);
  transition: background 0.2s;
}

.tl:hover .tl__dot {
  background: var(--accent);
}

.tl__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.tl__body .meta__read::before {
  display: none;
}

.tl__title {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.34;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tl__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
}

.tl__media img {
  filter: grayscale(0.6);
}

.tl:hover .tl__media img {
  filter: none;
}

/* ── 13. Market clock — the 24-hour dial ───────────────────────────────── */
.clock {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(520px 520px at 25% 50%, rgba(var(--accent-rgb), 0.07), transparent 70%),
    var(--grid),
    var(--bg-2);
}

.clock__dial {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
}

.dial {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dial__face {
  fill: rgba(var(--bg-rgb), 0.65);
  stroke: var(--line);
  stroke-width: 1;
}

.dial__ticks line {
  stroke: rgba(var(--line-rgb), 0.28);
  stroke-width: 1;
}

.dial__ticks line.is-major {
  stroke: rgba(var(--line-rgb), 0.6);
  stroke-width: 1.5;
}

.dial__ticks text {
  font-family: var(--f-mono);
  font-size: 9px;
  fill: var(--text-3);
  text-anchor: middle;
  dominant-baseline: central;
}

.dial__ticks .dial__midnight {
  stroke: rgba(var(--accent-rgb), 0.4);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.ring {
  transition: opacity 0.25s;
}

.ring__track {
  fill: none;
  stroke: rgba(var(--line-rgb), 0.07);
  stroke-width: 9;
}

.ring__arc {
  fill: none;
  stroke: rgba(var(--line-rgb), 0.3);
  stroke-width: 9;
}

.ring__arc.is-live {
  stroke: var(--accent);
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.55));
}

.ring__code {
  font-family: var(--f-mono);
  font-size: 6.5px;
  font-weight: 600;
  fill: var(--text-3);
  text-anchor: end;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: var(--bg-2);
  stroke-width: 3px;
}

.ring.is-open .ring__code {
  fill: var(--accent-2);
}

.dial.has-focus .ring {
  opacity: 0.22;
}

.dial.has-focus .ring.is-focus {
  opacity: 1;
}

.ring.is-focus .ring__track {
  stroke: rgba(var(--line-rgb), 0.18);
}

.dial__hand line {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.dial__hand circle {
  fill: var(--accent);
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.8));
}

.dial__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  pointer-events: none;
}

.dial__label,
.dial__open {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.dial__time {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dial__open b {
  font-weight: 600;
  color: var(--accent);
}

.clock__panel {
  min-width: 0;
}

.clock__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-strong);
}

.clock__fig {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.clock__fig + .clock__fig {
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

.clock__label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.clock__value {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--text);
  overflow-wrap: anywhere;
}

.clock__rows {
  display: flex;
  flex-direction: column;
}

.xv {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto minmax(150px, 13rem);
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0.45rem;
  padding: 0.6rem 0.4rem 0.55rem;
  cursor: default;
  transition: background 0.2s;
}

.xv + .xv {
  border-top: 1px dashed var(--line);
}

.xv.is-focus {
  background: rgba(var(--line-rgb), 0.05);
}

.xv__key {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--text-3);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.xv.is-open .xv__key {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.xv__name {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}

.xv__code {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.xv__city {
  font-size: 0.82rem;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xv__local {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.xv__clock {
  font-size: 0.78rem;
  color: var(--text);
}

.xv__clock:empty {
  display: none;
}

.xv__hours {
  font-size: 0.64rem;
  color: var(--text-3);
}

.xv__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.xv__status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid var(--text-3);
}

.xv.is-open .xv__status {
  color: var(--text);
}

.xv.is-open .xv__status::before {
  border-color: var(--up);
  background: var(--up);
  box-shadow: 0 0 0 3px rgba(var(--up-rgb), 0.18);
}

.xv.is-break .xv__status {
  color: var(--text-2);
}

.xv.is-break .xv__status::before {
  border-color: var(--warn);
  background: var(--warn);
}

.xv__prog {
  grid-column: 2 / -1;
  height: 2px;
  background: rgba(var(--line-rgb), 0.08);
  overflow: hidden;
}

.xv__prog i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--metal-h);
  transition: width 0.6s;
}

.xv.is-break .xv__prog i {
  background: var(--warn);
}

.clock__note {
  margin-top: 1rem;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-3);
}

/* ── 14. Rules — ruled grid ────────────────────────────────────────────── */
.rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line);
}

.rule {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.3rem 1.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.25s;
}

.rule:hover {
  background: rgba(var(--accent-rgb), 0.045);
}

.rule__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rule__n {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  color: var(--accent);
}

.rule__icon {
  color: var(--text-3);
  transition: color 0.25s;
}

.rule:hover .rule__icon {
  color: var(--accent);
}

.rule__title {
  margin-top: 1.6rem;
  font-family: var(--f-display);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.005em;
}

.rule__text {
  margin-top: 0.55rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-3);
}

/* ── 15. Politics — three-column broadsheet ────────────────────────────── */
.sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr);
}

.sheet--two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
}

.sheet--solo {
  grid-template-columns: minmax(0, 1fr);
}

.sheet__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sheet__col--left {
  padding-right: clamp(1rem, 2vw, 1.6rem);
  border-right: 1px solid var(--line);
}

.sheet__col--right {
  padding-left: clamp(1rem, 2vw, 1.6rem);
  border-left: 1px solid var(--line);
}

.sheet__lead {
  min-width: 0;
  padding: 0 clamp(1rem, 2vw, 1.6rem);
}

.sheet--two .sheet__lead {
  padding-right: 0;
}

.sheet--solo .sheet__lead {
  padding: 0;
}

.pcard + .pcard {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.pcard__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
}

.pcard .meta__date {
  display: block;
  margin-top: 0.85rem;
}

.pcard__title {
  margin-top: 0.4rem;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sheet__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
}

.sheet__lead .meta {
  margin: 1.15rem 0 0.85rem;
}

.sheet__title {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.01em;
}

.sheet__dek {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-2);
}

/* ── 16. Digital Assets — blueprint band + rail ────────────────────────── */
.band {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--grid), var(--bg-2);
  overflow: hidden;
  isolation: isolate;
}

.band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(800px 360px at 100% 0%, rgba(var(--accent-rgb), 0.12), transparent 70%);
  pointer-events: none;
}

.rail-nav {
  display: flex;
  gap: 0.4rem;
}

.rail-nav__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  font-size: 1rem;
  color: var(--text);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.rail-nav__btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--gap)) / 3.35);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
  padding: 4px 0 0.9rem;
  margin-bottom: -0.9rem;
}

.rail:focus-visible {
  outline-offset: 6px;
}

.railcard {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.25s, transform 0.3s;
}

.railcard:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  transform: translateY(-3px);
}

.railcard__frame {
  position: relative;
}

.railcard__media {
  aspect-ratio: 4 / 3;
}

.railcard__n {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.3rem 0.45rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ink);
  pointer-events: none;
}

.railcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem 1.2rem;
}

.railcard__title {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 17. The desks — index + amber card ────────────────────────────────── */
.desks__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

.desk-index {
  border-top: 1px solid var(--line-strong);
}

.desk {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.05rem 0.4rem 1.05rem 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s, padding 0.25s;
}

.desk:hover {
  padding-left: 0.75rem;
  background: rgba(var(--line-rgb), 0.035);
}

.desk__n {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--text-3);
  transition: color 0.2s;
}

.desk:hover .desk__n {
  color: var(--accent);
}

.desk__text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.desk__name {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1;
  color: var(--text);
}

.desk__eyebrow {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.desk__cover {
  display: block;
  width: 104px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-2);
  opacity: 0;
  transform: translateX(10px) scale(0.96);
  transition: opacity 0.3s, transform 0.35s;
}

.desk:hover .desk__cover {
  opacity: 1;
  transform: none;
}

.desk__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.desk__count {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.desk .arrow {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}

.desk-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 11px),
    var(--accent);
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}

.desk-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 rgba(var(--accent-rgb), 0.28);
}

.desk-cta__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: auto;
}

.desk-cta__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
}

.desk-cta__tag {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.desk-cta__title {
  margin-top: 2.5rem;
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1;
}

.desk-cta__text {
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.82;
}

.desk-cta .btn {
  margin-top: 0.4rem;
}

/* ── 18. Newsletter ────────────────────────────────────────────────────── */
.signup {
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.signup__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 4.5vw, 3.5rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  background:
    radial-gradient(640px 400px at 0% 100%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    var(--grid),
    var(--bg-2);
  box-shadow: var(--shadow);
}

.signup__pitch,
.signup__card {
  min-width: 0;
}

.signup__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.signup__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
}

.signup__title {
  margin-top: 1rem;
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 4.8vw, 4.2rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--text);
}

.signup__title em {
  font-style: italic;
  color: var(--accent);
}

.signup__sub {
  max-width: 48ch;
  margin-top: 1.1rem;
  font-size: 0.98rem;
  color: var(--text-2);
}

.perks {
  margin-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.perk {
  display: grid;
  grid-template-columns: 1.6rem 34px minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--line);
}

.perk__n {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  color: var(--accent);
}

.perk__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
}

.perk__text {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
}

.signup__card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 3vw, 2.1rem);
  border-radius: var(--r-lg);
  background: rgba(var(--bg-rgb), 0.88);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.signup__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.signup__card-title {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.signup__step {
  flex: none;
  padding: 0.36rem 0.6rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--accent);
}

.signup__form {
  margin-top: 1.4rem;
}

.signup__legal {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--text-3);
}

.signup__legal a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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


/* CF7 — markup is owned by the plugin, so we only restyle it.
   Expected wrappers in the form template:
     .form-options  edition checkboxes/radios → selectable tiles
     .form-topics   optional topic checkboxes → chips
     .form-fields   email, then submit
     .form-privacy  acceptance checkbox */
.signup .hidden-fields-container,
.signup .screen-reader-response {
  display: none;
}

.signup .wpcf7-form p {
  margin: 0;
}

.signup .wpcf7-form br {
  display: none;
}

.signup .wpcf7-list-item {
  display: block;
  margin: 0;
}

.signup .form-label {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Edition tiles */
.signup .form-options {
  margin-bottom: 1.3rem;
}

.signup .form-options .wpcf7-checkbox,
.signup .form-options .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.signup .form-options .wpcf7-list-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.signup .form-options .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  height: 100%;
  padding: 0.9rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(var(--line-rgb), 0.02);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.signup .form-options .wpcf7-list-item label:hover {
  border-color: rgba(var(--line-rgb), 0.35);
}

.signup .form-options .wpcf7-list-item label:has(input:checked) {
  background: rgba(var(--hi-rgb), 0.08);
  border-color: rgba(var(--hi-rgb), 0.6);
  color: var(--text);
}

.signup .form-options input[type="checkbox"],
.signup .form-options input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0.05rem 0 0;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: transparent center / 11px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.signup .form-options input[type="radio"] {
  border-radius: 50%;
}

.signup .form-options input:checked {
  background-color: var(--hi);
  border-color: var(--hi);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101115' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Topic chips */
.signup .form-topics {
  margin-bottom: 1.3rem;
}

.signup .form-topics .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.signup .form-topics .wpcf7-list-item label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.signup .form-topics .wpcf7-list-item label::before {
  content: "+";
  font-weight: 600;
  color: var(--text-3);
}

.signup .form-topics .wpcf7-list-item label:hover {
  border-color: rgba(var(--line-rgb), 0.35);
  color: var(--text);
}

.signup .form-topics input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.signup .form-topics .wpcf7-list-item label:has(input:checked) {
  background: var(--btn);
  border-color: transparent;
  color: var(--ink);
}

.signup .form-topics .wpcf7-list-item label:has(input:checked)::before {
  content: "✓";
  color: var(--ink);
}

.signup .form-options label:has(input:focus-visible),
.signup .form-topics label:has(input:focus-visible) {
  outline: 2px solid var(--hi);
  outline-offset: 2px;
}

/* Email + submit on one line. The control wrap is flattened so a
   validation tip drops into the same box as a full-width strip. */
.signup .form-fields p {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.35rem;
  border-radius: var(--r-md);
  background: rgba(var(--line-rgb), 0.03);
  border: 1px solid var(--line-strong);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.signup .form-fields p:focus-within {
  border-color: rgba(var(--hi-rgb), 0.6);
  box-shadow: 0 0 0 4px rgba(var(--hi-rgb), 0.08);
}

.signup .form-fields .wpcf7-form-control-wrap {
  display: contents;
}

.signup .wpcf7-email {
  flex: 999 1 200px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  color: var(--text);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d737e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") 0.85rem center / 18px no-repeat;
  border: none;
  padding: 0 0.75rem 0 2.6rem;
  -webkit-appearance: none;
  appearance: none;
}

.signup .wpcf7-email::placeholder {
  color: var(--text-3);
}

.signup .wpcf7-email:focus {
  outline: none;
}

.signup .wpcf7-submit {
  flex: 1 0 auto;
  order: 2;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--btn);
  color: var(--ink);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0.95rem 1.3rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  transition: background 0.18s, transform 0.18s;
}

.signup .wpcf7-submit:hover {
  background: var(--btn-hover);
  transform: translateY(-1px);
}

.signup .wpcf7-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.signup .wpcf7-spinner {
  position: absolute;
  right: 0.25rem;
  bottom: calc(100% + 0.5rem);
  margin: 0;
  background-color: var(--surface-3);
  pointer-events: none;
}

.signup .wpcf7-not-valid-tip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem 0.5rem 0.55rem;
  border-radius: var(--r-sm);
  background: rgba(var(--down-rgb), 0.1);
  border: 1px solid rgba(var(--down-rgb), 0.32);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: #ffc9c9;
  width: fit-content;
  max-width: 100%;
  animation: st-tip-in 0.25s ease-out;
}

.signup .wpcf7-not-valid-tip::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--down);
  font-size: 0.7rem;
  font-weight: 700;
  color: #1a0707;
}

@keyframes st-tip-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.signup .form-fields .wpcf7-not-valid-tip {
  order: 3;
  flex: 1 0 100%;
  width: auto;
  margin: 0;
}

.signup .form-fields p:has(.wpcf7-not-valid) {
  border-color: rgba(var(--down-rgb), 0.55);
}

.signup .wpcf7-checkbox.wpcf7-not-valid .wpcf7-list-item label {
  border-style: dashed;
  border-color: rgba(var(--down-rgb), 0.55);
}

/* Acceptance */
.signup .form-privacy {
  margin-top: 1.1rem;
}

.signup .form-privacy .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-2);
}

.signup .form-privacy input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 0.2em;
  accent-color: var(--hi);
  cursor: pointer;
}

.signup .wpcf7-list-item-label a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.signup .wpcf7-acceptance.wpcf7-not-valid .wpcf7-list-item-label {
  color: var(--text);
}

.signup .wpcf7-acceptance.wpcf7-not-valid input[type="checkbox"] {
  outline: 2px solid var(--down);
  outline-offset: 2px;
}

.signup .form-privacy .wpcf7-not-valid-tip {
  margin-left: 1.6rem;
}

/* Form-level response banner */
.signup .wpcf7-response-output {
  --tone: var(--text-2);
  --tone-rgb: var(--hi-rgb);
  --icon: "i";
  position: relative;
  display: none;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  column-gap: 0.8rem;
  width: 100%;
  margin: 1.3rem 0 0 !important;
  padding: 0.8rem 1rem 0.8rem 0.8rem !important;
  border: 1px solid rgba(var(--tone-rgb), 0.38) !important;
  border-radius: var(--r-md);
  background: rgba(var(--tone-rgb), 0.06);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  animation: st-tip-in 0.3s ease-out;
}

.signup .wpcf7-response-output::before {
  content: var(--icon);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(var(--tone-rgb), 0.55);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tone);
}

.signup .wpcf7-form.sent .wpcf7-response-output {
  --tone: var(--up);
  --tone-rgb: var(--up-rgb);
  --icon: "✓";
  display: grid;
}

.signup .wpcf7-form.invalid .wpcf7-response-output,
.signup .wpcf7-form.unaccepted .wpcf7-response-output,
.signup .wpcf7-form.payment-required .wpcf7-response-output {
  --tone: var(--warn);
  --tone-rgb: 241, 196, 108;
  --icon: "!";
  display: grid;
}

.signup .wpcf7-form.spam .wpcf7-response-output,
.signup .wpcf7-form.failed .wpcf7-response-output,
.signup .wpcf7-form.aborted .wpcf7-response-output {
  --tone: var(--down);
  --tone-rgb: var(--down-rgb);
  --icon: "×";
  display: grid;
}

/* ── 18. Archive, search & card grids ──────────────────────────────────── */
.archive-main,
.page-main,
.error-main {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 6rem);
}

.archive-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}

.archive-head__titles {
  min-width: 0;
}

.archive-head__title {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.04em;
  overflow-wrap: anywhere;
}

.archive-head__count {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

.feature__media {
  aspect-ratio: 5 / 3;
  height: 100%;
}

.feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.5rem, 3.5vw, 3rem);
}

.feature__title {
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.feature__dek {
  font-size: 0.95rem;
  color: var(--text-2);
}

.feature__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin-top: 0.5rem;
}

.feature__read {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}

.post-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.25s;
}

.post-card:hover {
  border-color: var(--line-strong);
}

.post-card__media {
  aspect-ratio: 5 / 3;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1;
  padding: 1.1rem 1.2rem 1.3rem;
}

.post-card__title {
  font-size: 1.04rem;
  line-height: 1.3;
}

.post-card__excerpt {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-3);
}

.post-card__read {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.pagination {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.pagination a.page-numbers:hover {
  color: var(--text);
  border-color: rgba(var(--line-rgb), 0.4);
}

.pagination .page-numbers.current {
  background: var(--btn);
  border-color: transparent;
  color: var(--ink);
}

.pagination .page-numbers.dots {
  border-color: transparent;
}

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-strong);
  text-align: center;
  color: var(--text-2);
}

/* ── 19. Single ────────────────────────────────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 300;
  pointer-events: none;
}

.reading-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--metal-h);
  box-shadow: 0 0 10px rgba(var(--glow-rgb), 0.7);
}

.single-main {
  padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(4rem, 8vw, 6rem);
}

.article-head {
  max-width: 980px;
  margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem);
  text-align: center;
}

.article-head__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 1.4rem;
}

.article-head__date,
.article-head__read {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.article-head__read::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 1rem 0.2em 0;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.article-head__title {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.article-head__dek {
  max-width: 62ch;
  margin: 1.3rem auto 0;
  font-size: 1.1rem;
  color: var(--text-2);
}

.article-hero {
  position: relative;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.article-hero__img {
  width: 100%;
  max-height: 660px;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
}

.article-hero__caption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--text-3);
}

.single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.single-col {
  max-width: 740px;
  width: 100%;
  justify-self: center;
}

.article-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--text-prose);
  overflow-wrap: break-word;
}

.article-content > * + * {
  margin-top: 1.3rem;
}

.single-article .article-content > p:first-child::first-letter {
  float: left;
  font-family: var(--f-display);
  font-size: 4.1em;
  line-height: 0.85;
  padding: 0.06em 0.12em 0 0;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.article-content h2,
.article-content h3,
.article-content h4 {
  color: var(--text);
}

.article-content h2 {
  font-size: 1.65rem;
  line-height: 1.2;
  margin-top: 2.6rem;
}

.article-content h3 {
  font-size: 1.3rem;
  margin-top: 2.1rem;
}

.article-content h4 {
  font-size: 1.08rem;
  margin-top: 1.8rem;
}

.article-content strong {
  color: var(--text);
}

.article-content a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(var(--hi-rgb), 0.45);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.article-content a:hover {
  text-decoration-color: var(--hi);
}

.article-content ul,
.article-content ol {
  padding-left: 1.5rem;
}

.article-content ul li {
  list-style: none;
  position: relative;
  padding-left: 0.25rem;
  margin-bottom: 0.5rem;
}

.article-content ul li::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.75em;
  width: 10px;
  height: 1px;
  background: var(--text-2);
}

.article-content ol {
  list-style: decimal;
}

.article-content ol li {
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

.article-content ol li::marker {
  font-weight: 600;
  color: var(--text-2);
}

.article-content blockquote {
  margin-block: 2.2rem;
  padding: 0.4rem 0 0.4rem 1.6rem;
  border-left: 1px solid var(--hi);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}

.article-content blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.article-content img,
.article-content figure {
  margin-block: 2rem;
}

.article-content img {
  border-radius: var(--r-md);
}

.article-content figure img {
  margin-block: 0;
}

.article-content .aligncenter {
  margin-inline: auto;
}

.article-content figcaption {
  margin-top: 0.55rem;
  font-size: 0.8rem;
  color: var(--text-3);
}

.article-content iframe,
.article-content video {
  max-width: 100%;
}

.article-content .wp-block-table,
.article-content .table-wrap {
  overflow-x: auto;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.article-content th,
.article-content td {
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0.85rem 0.65rem 0;
  text-align: left;
}

.article-content th {
  border-bottom-color: var(--line-strong);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
}

.article-content code {
  font-size: 0.875em;
  background: var(--surface-2);
  padding: 0.15em 0.4em;
  border-radius: 5px;
}

.article-content pre {
  overflow-x: auto;
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}

.article-content pre code {
  background: none;
  padding: 0;
}

.article-content hr {
  border: none;
  height: 1px;
  background: var(--line-strong);
}

.article-tags {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.article-tags__label {
  margin-right: 0.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.article-tags a {
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.article-tags a:hover {
  background: var(--hi);
  border-color: var(--hi);
  color: var(--ink);
}

.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 1.75rem;
}

.article-nav__side {
  padding: 1.2rem 1.35rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.2s;
}

.article-nav__side:hover {
  border-color: var(--line-strong);
}

.article-nav__side:empty {
  background: none;
  border-color: transparent;
}

.article-nav__side--next {
  text-align: right;
}

.article-nav__label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.article-nav__link {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.35;
}

.related {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}

.single-aside {
  position: sticky;
  top: calc(var(--masthead-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.aside-panel {
  padding: 1.3rem 1.3rem 0.5rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel);
}

.aside-panel__heading {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 0;
}

.row + .row {
  border-top: 1px solid var(--line);
}

.row__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
}

.row__date {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.row__title {
  font-size: 0.98rem;
  line-height: 1.32;
}

.row--aside {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.85rem 0;
}

.row--aside .row__title {
  font-size: 0.85rem;
  line-height: 1.38;
}

.aside-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.6rem;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--sheen-1) 0%, var(--sheen-2) 30%, var(--sheen-3) 50%, var(--sheen-2) 68%, var(--sheen-1) 100%);
  border: 1px solid var(--line-strong);
  color: #fff;
}

.aside-cta__eyebrow {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.aside-cta__title {
  font-family: var(--f-display);
  font-size: 2rem;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.aside-cta__text {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.aside-cta__btn {
  margin-top: 1rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--btn);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.15s;
}

.aside-cta:hover .aside-cta__btn {
  transform: translateY(-1px);
}

/* ── 20. Page & 404 ────────────────────────────────────────────────────── */
.page-head {
  text-align: center;
  margin-bottom: 2.25rem;
}

.page-head__eyebrow {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

.page-head__title {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.04em;
}

.page-hero {
  margin-bottom: 2.5rem;
}

.page-hero__img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}

.error-page {
  text-align: center;
}

.error-page__code {
  font-family: var(--f-display);
  font-size: clamp(8rem, 26vw, 17rem);
  line-height: 0.85;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.6));
}

.error-page__title {
  margin-top: 1.25rem;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}

.error-page__desc {
  max-width: 56ch;
  margin: 1rem auto 0;
  color: var(--text-2);
}

.error-page__actions {
  margin-top: 1.75rem;
}

.error-recent {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: 1.4rem 1.5rem 0.5rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: left;
}

.error-recent__heading {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ── 21. Footer ────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
  background: linear-gradient(180deg, rgba(var(--line-rgb), 0.015), transparent 60%);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.footer-logo-link img,
.footer-logo-img {
  height: var(--logo-h, 45px);
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

.footer-brand__desc {
  max-width: 40ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-2);
}

.footer-col__title {
  margin-bottom: 1.1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}

.footer-col__list {
  display: grid;
  gap: 0.65rem;
}

.footer-col__list a {
  font-size: 0.88rem;
  color: var(--text-2);
  transition: color 0.2s;
}

.footer-col__list a:hover {
  color: var(--text);
}

.footer-disclaimer {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  line-height: 1.65;
  color: var(--text-3);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.footer-copy {
  font-size: 0.72rem;
  color: var(--text-3);
}

.footer-copy a {
  color: var(--text-2);
}

.footer-top-link {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color 0.2s;
}

.footer-top-link:hover {
  color: var(--text);
}

.grecaptcha-badge {
	display: none !important;
}



/* ── 22. Edition II overrides for inner pages ──────────────────────────── */
body {
  background-image:
    radial-gradient(900px 520px at 85% -10%, rgba(var(--glow-rgb), 0.07), transparent 62%),
    radial-gradient(800px 600px at -10% 35%, rgba(var(--line-rgb), 0.04), transparent 60%);
}

.media__fallback {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.nav-list--drawer a {
  padding: 1rem 0;
  border-radius: 0;
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  background: none;
}

.nav-list--drawer a::before {
  display: none;
}

.nav-list--drawer a:hover {
  color: var(--accent);
  background: none;
}

.drawer {
  border-left: 2px solid var(--accent);
}

.drawer__close {
  border-radius: var(--r-sm);
}

.archive-head__title,
.page-head__title {
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.archive-head__count,
.page-head__eyebrow,
.article-head__date,
.article-head__read,
.feature__read,
.post-card__read,
.row__date,
.article-nav__label,
.article-tags__label,
.aside-panel__heading,
.error-recent__heading,
.footer-col__title,
.footer-top-link,
.pagination .page-numbers {
  font-family: var(--f-mono);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.article-head__title {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
}

.feature__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.04;
}

.feature:hover,
.post-card:hover,
.article-nav__side:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
}

.article-content blockquote {
  border-left: 2px solid var(--accent);
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
}

.article-content ul li::before {
  width: 6px;
  height: 6px;
  top: 0.65em;
  background: var(--accent);
}

.article-tags a {
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.7rem;
}

.aside-cta {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 11px),
    var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.aside-cta__eyebrow,
.aside-cta__text {
  color: var(--ink);
  text-shadow: none;
  opacity: 0.82;
}

.aside-cta__eyebrow {
  font-family: var(--f-mono);
}

.aside-cta__title {
  font-size: 2.4rem;
  text-transform: none;
  text-shadow: none;
}

.aside-cta__btn {
  background: var(--ink);
  color: var(--accent-2);
  font-family: var(--f-mono);
}

.error-page__code {
  font-style: italic;
  color: var(--accent);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.site-footer {
  border-top: 1px solid var(--line-strong);
  background: var(--grid), var(--bg-2);
}

.footer-col__list a:hover,
.footer-top-link:hover {
  color: var(--accent);
}

.footer-col__title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.55rem 0.12em 0;
  background: var(--accent);
}

/* ── 23. Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .masthead__nav {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }

  .front {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    row-gap: 2rem;
  }
  .front__col {
    border-right: none;
    padding-right: 0;
  }
  .front__side {
    grid-column: 1 / -1;
    padding: 1.75rem 0 0;
    border-top: 1px solid var(--line);
  }
  .wire__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 3vw, 2rem);
  }
  .wire__item:nth-child(2) {
    border-top: none;
  }
  .front--no-second .front__side {
    border-left: none;
  }

  .clock {
    grid-template-columns: 1fr;
  }
  .clock__dial {
    max-width: 440px;
  }

  .rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .single-layout {
    grid-template-columns: 1fr;
  }
  .single-aside {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .rail {
    grid-auto-columns: calc((100% - 2 * var(--gap)) / 2.3);
  }

  .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .colcard:nth-child(odd)::before {
    display: none;
  }

  .sheet {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 2rem;
  }
  .sheet__lead {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 0;
  }
  .sheet__col--left {
    padding-right: clamp(1rem, 2vw, 1.6rem);
  }
  .sheet__col--right {
    border-left: none;
  }
  .sheet--two .sheet__col--left {
    grid-column: 1 / -1;
    border-right: none;
    padding-right: 0;
  }
}

@media (max-width: 900px) {
  :root {
    --gut: 20px;
    --masthead-h: 64px;
  }

  .hero__bar-item--wide {
    display: none;
  }
  .hero__head {
    grid-template-columns: 1fr;
  }

  .front,
  .front--no-second {
    grid-template-columns: 1fr;
  }
  .lead {
    padding-right: 0;
  }
  .front__col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap);
    padding: 1.75rem 0 0;
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .second + .second {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .floor {
    grid-template-columns: 1fr;
  }
  .floor__list {
    flex-direction: row;
  }
  .hcard {
    grid-template-columns: 1fr;
  }
  .hcard__media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

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

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

  .split,
  .feature {
    grid-template-columns: 1fr;
  }
  .split__media,
  .feature__media {
    height: auto;
  }
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fig:nth-child(3) {
    border-left: none;
  }
  .fig:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .wire__list {
    grid-template-columns: 1fr;
  }
  .wire__item:nth-child(2) {
    border-top: 1px solid var(--line);
  }

  .xv {
    grid-template-columns: 22px minmax(0, 1fr) auto;
  }
  .xv__status {
    grid-column: 2 / -1;
    grid-row: 2;
  }
  .xv__prog {
    grid-row: 3;
  }
  .xv__hours {
    display: none;
  }

  .desk {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.9rem;
  }
  .desk__cover,
  .desk__count {
    display: none;
  }
}

@media (max-width: 600px) {
  .masthead__sub {
    display: none;
  }

  .hero__bar-open {
    display: none;
  }
  .hero__title {
    font-size: clamp(3rem, 15.5vw, 4.6rem);
  }

  .front__col {
    grid-template-columns: 1fr;
  }
  .second + .second {
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
  }

  .tile {
    min-height: 380px;
  }
  .floor__list {
    flex-direction: column;
  }
  .hcard {
    grid-template-columns: 38% minmax(0, 1fr);
  }
  .hcard__media {
    aspect-ratio: auto;
    min-height: 130px;
  }

  .cols {
    grid-template-columns: 1fr;
  }
  .colcard + .colcard::before {
    display: none;
  }
  .colcard + .colcard {
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
  }

  .tl {
    grid-template-columns: 2.6rem 9px minmax(0, 1fr);
  }
  .timeline__list::before {
    left: calc(2.6rem + 0.9rem + 4.5px);
  }
  .tl__media {
    display: none;
  }

  .clock__summary {
    grid-template-columns: 1fr;
  }
  .clock__fig + .clock__fig {
    padding: 0.85rem 0 0;
    border-left: none;
    border-top: 1px solid var(--line);
  }

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

  .sheet,
  .sheet--two {
    grid-template-columns: 1fr;
  }
  .sheet__col--left,
  .sheet__col--right,
  .sheet--two .sheet__col--left {
    padding: 1.4rem 0 0;
    border: none;
    border-top: 1px solid var(--line);
  }

  .rail {
    grid-auto-columns: 84%;
  }
  .band .shead {
    align-items: flex-start;
  }

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

  .signup .form-options .wpcf7-checkbox,
  .signup .form-options .wpcf7-radio {
    grid-template-columns: 1fr;
  }

  .single-aside {
    grid-template-columns: 1fr;
  }
  .article-nav {
    grid-template-columns: 1fr;
  }
  .article-nav__side--next {
    text-align: left;
  }
  .row {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

@media (max-width: 400px) {
  .hero__ctas .btn {
    flex: 1 1 100%;
  }
  .xv__status {
    font-size: 0.64rem;
  }
}

/* ==========================================================================
   24. Front-page layouts
   --------------------------------------------------------------------------
   Picked in Customizer → Front page layout (st_home_layout). The default
   "ledger" layout is everything above. "cover" and "mosaic" add their own
   hero, newsletter panel and a few cosmetic touches, scoped to the
   `st-layout-<slug>` body class and the `home--<slug>` main class.
   ========================================================================== */

/* Ticker opening the page (mosaic) sits flush under the masthead */
.home > .ticker:first-child {
  margin-top: 0;
  border-top: none;
}

/* ── 24a. Cover story hero ─────────────────────────────────────────────── */
.hero--cover::before {
  height: 220px;
}

.hline {
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 0.25rem 0 1.25rem;
}

.hline__brand {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}

.hline__brand em {
  font-style: italic;
  color: var(--accent);
}

.hline__date {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.hline__date::before {
  content: "";
  flex: 0 0 32px;
  height: 1px;
  background: var(--line-strong);
}

.hline__clock {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}

.hline__clock [data-hero-time] {
  font-weight: 600;
  color: var(--accent);
}

.hline__clock:hover {
  border-color: var(--accent);
  color: var(--text);
}

.cvh {
  position: relative;
  min-height: clamp(500px, 52vw, 660px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
}

.cvh__lead {
  position: absolute;
  inset: 0;
}

.cvh__media {
  position: absolute;
  inset: 0;
}

.cvh__lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(var(--bg-rgb), 0.92) 0%, rgba(var(--bg-rgb), 0.35) 45%, rgba(var(--bg-rgb), 0) 70%),
    linear-gradient(90deg, rgba(var(--bg-rgb), 0.6) 0%, rgba(var(--bg-rgb), 0) 55%, rgba(var(--bg-rgb), 0.45) 100%);
  pointer-events: none;
}

.cvh__cap {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  max-width: min(760px, calc(100% - 380px));
  padding: clamp(1.5rem, 4vw, 3rem);
  pointer-events: none;
}

.cvh--solo .cvh__cap {
  max-width: 860px;
}

.cvh__cap a {
  pointer-events: auto;
}

.cvh__kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.cvh__kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.cvh__cap .meta__date,
.cvh__cap .meta__read {
  color: rgba(255, 255, 255, 0.75);
}

.cvh__title {
  margin: 0.9rem 0 0.8rem;
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 4.6vw, 4.3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.cvh__dek {
  max-width: 58ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.cvh__panel {
  position: absolute;
  z-index: 3;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  width: 340px;
  padding: 1.1rem 1.25rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  background: rgba(var(--bg-rgb), 0.66);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}

.cvh__panel-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.cvh__panel-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.cvh__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.cvh__item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem 0;
}

.cvh__item + .cvh__item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cvh__n {
  font-family: var(--f-display);
  font-size: 2rem;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}

.cvh__item:hover .cvh__n {
  color: var(--accent);
  -webkit-text-stroke-color: var(--accent);
}

.cvh__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.cvh__desk {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.cvh__headline {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.32;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cvh__headline:hover {
  color: var(--accent-2);
}

.cvs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}

.cvs__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  transition: border-color 0.25s;
}

.cvs__item:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.cvs__media {
  aspect-ratio: 1;
  border-radius: var(--r-md);
}

.cvs__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.cvs__desk {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.cvs__title {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 24b. Mosaic hero ──────────────────────────────────────────────────── */
.hero--mosaic {
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.hero--mosaic::before {
  display: none;
}

.mhead {
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-bottom: 1.25rem;
}

.mhead__title {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.mhead__title em {
  font-style: italic;
  color: var(--accent);
}

.mhead__issue {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: 1.5rem;
  border-left: 1px solid var(--line-strong);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.mhead__clock {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--accent);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.2s;
}

.mhead__clock:hover {
  background: var(--accent-2);
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(210px, 19vw, 270px));
  gap: 10px;
}

.bento--1,
.bento--2,
.bento--3 {
  grid-template-rows: clamp(260px, 26vw, 380px);
}

.btile {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
}

.btile--lead {
  grid-column: span 2;
  grid-row: span 2;
}

.bento--1 .btile--lead,
.bento--2 .btile--lead,
.bento--3 .btile--lead {
  grid-row: span 1;
}

.btile__media {
  position: absolute;
  inset: 0;
}

.btile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 35%, rgba(var(--bg-rgb), 0.6) 65%, rgba(var(--bg-rgb), 0.95) 100%);
  pointer-events: none;
}

.btile__body {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 1rem 1.1rem 1.1rem;
  pointer-events: none;
}

.btile__body a {
  pointer-events: auto;
}

.btile--lead .btile__body {
  gap: 0.8rem;
  padding: clamp(1.25rem, 2.6vw, 2rem);
}

.btile__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.55rem 0.25rem 0.25rem;
  border-radius: var(--r-sm);
  background: rgba(var(--bg-rgb), 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

.btile__tag b {
  padding: 0.15rem 0.3rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  font-weight: 600;
  color: var(--ink);
}

.btile__title {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.28;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btile--lead .btile__title {
  max-width: 22ch;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  font-weight: 400;
  line-height: 1.02;
  -webkit-line-clamp: 4;
}

.btile .meta__date,
.btile .meta__read {
  color: rgba(255, 255, 255, 0.72);
}

.hrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
}

.hrow__item {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.1rem 1.1rem 0 0;
}

.hrow__item + .hrow__item {
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
}

.hrow__n {
  font-family: var(--f-display);
  font-size: 2.5rem;
  line-height: 0.85;
  color: var(--text-3);
  transition: color 0.2s;
}

.hrow__item:hover .hrow__n {
  color: var(--accent);
}

.hrow__meta {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.hrow__title {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 24c. Newsletter variants ──────────────────────────────────────────── */
/* Cover: one centred column — pitch, perks as a row, form underneath */
.signup--cover .signup__panel {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  border-top-width: 1px;
  background:
    radial-gradient(700px 360px at 50% 0%, rgba(var(--accent-rgb), 0.18), transparent 70%),
    var(--grid),
    var(--bg-2);
}

.signup--cover .signup__pitch {
  max-width: 900px;
}

.signup--cover .signup__sub {
  margin-inline: auto;
}

.signup--cover .perks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  border-top: none;
}

.signup--cover .perk {
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
  gap: 0.6rem;
  padding: 1.1rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(var(--bg-rgb), 0.5);
}

.signup--cover .perk__n {
  display: none;
}

.signup--cover .perk__icon {
  border-radius: 50%;
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.45);
}

.signup--cover .perk__text {
  font-size: 0.84rem;
}

.signup--cover .signup__card {
  width: 100%;
  max-width: 640px;
  text-align: left;
}

/* Mosaic: the pitch becomes a solid accent block beside the form */
.signup--mosaic .signup__panel {
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-top-width: 1px;
  background: var(--bg-2);
}

.signup--mosaic .signup__pitch {
  padding: clamp(1.5rem, 4.5vw, 3.25rem);
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 11px),
    var(--accent);
  color: var(--ink);
}

.signup--mosaic .signup__eyebrow,
.signup--mosaic .signup__title,
.signup--mosaic .signup__title em,
.signup--mosaic .perk__n,
.signup--mosaic .perk__text {
  color: var(--ink);
}

.signup--mosaic .signup__sub {
  color: var(--ink);
  opacity: 0.8;
}

.signup--mosaic .perks,
.signup--mosaic .perk {
  border-color: rgba(0, 0, 0, 0.16);
}

.signup--mosaic .perk__icon {
  border-color: rgba(0, 0, 0, 0.28);
  color: var(--ink);
}

.signup--mosaic .signup__card {
  align-self: center;
  margin: clamp(1.25rem, 3.5vw, 2.75rem);
  border: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── 24d. Cosmetics: Cover story — softer, rounder, italic heads ──────── */
.st-layout-cover {
  --r-xl: 20px;
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 8px;
}

.st-layout-cover .btn,
.st-layout-cover .pill,
.st-layout-cover .shead__more,
.st-layout-cover .rail-nav__btn,
.st-layout-cover .search-btn,
.st-layout-cover .nav-toggle,
.st-layout-cover .arrow,
.st-layout-cover .signup__step,
.st-layout-cover .xv__key {
  border-radius: 999px;
}

.st-layout-cover .pill::before,
.st-layout-cover .ticker__dot,
.st-layout-cover .wire__title::before,
.st-layout-cover .footer-col__title::before,
.st-layout-cover .nav-list a::before {
  border-radius: 50%;
}

.st-layout-cover .ticker__flag::after {
  display: none;
}

.st-layout-cover .ticker__flag {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.st-layout-cover .shead {
  padding-top: 1.1rem;
  padding-bottom: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: none;
}

.st-layout-cover .shead::after {
  top: -1px;
  bottom: auto;
  width: 120px;
}

.st-layout-cover .shead__title {
  font-style: italic;
}

.st-layout-cover.home .shead__eyebrow::before,
.st-layout-cover .home .shead__eyebrow::before {
  content: "§ " counter(sec, decimal-leading-zero);
  padding: 0;
  border: none;
  font-size: 0.68rem;
}

.st-layout-cover .crop {
  display: none;
}

/* ── 24e. Cosmetics: Mosaic — hard edges, square markers ───────────────── */
.st-layout-mosaic {
  --r-xl: 0;
  --r-lg: 0;
  --r-md: 0;
  --r-sm: 0;
}

.st-layout-mosaic .ticker__flag::after {
  display: none;
}

.st-layout-mosaic .ticker__flag {
  padding-right: var(--gut);
}

.st-layout-mosaic .hero__dot {
  border-radius: 0;
}

.st-layout-mosaic .pill {
  border-color: transparent;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.st-layout-mosaic .pill--glass {
  background: rgba(var(--bg-rgb), 0.7);
  color: #fff;
}

.st-layout-mosaic .shead {
  border-bottom-color: var(--line-strong);
}

.st-layout-mosaic .shead::after {
  bottom: -6px;
  width: 11px;
  height: 11px;
  background: var(--bg);
  border: 2px solid var(--accent);
}

.st-layout-mosaic .home .shead__eyebrow::before {
  content: "[" counter(sec, decimal-leading-zero) "]";
  padding: 0;
  border: none;
  font-size: 0.68rem;
}

.st-layout-mosaic .arrow {
  border-color: var(--accent);
  background: rgba(var(--bg-rgb), 0.7);
  color: var(--accent);
}

.st-layout-mosaic .meta__read::before {
  content: "·";
}

.st-layout-mosaic .crop {
  width: 10px;
  height: 10px;
  border: none;
  background: var(--accent);
}

/* ── 24f. Layout responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cvh {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .cvh__lead {
    position: relative;
    min-height: 480px;
  }
  .cvh__cap {
    max-width: 100%;
  }
  .cvh__panel {
    position: static;
    width: auto;
    padding: 1rem clamp(1.25rem, 3vw, 2rem) 0.4rem;
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--bg-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .cvh__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .cvh__item:nth-child(2) {
    border-top: none;
  }
  .cvs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signup--cover .perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .mhead__issue {
    display: none;
  }
  .mhead {
    justify-content: space-between;
  }
  .bento,
  .bento--1,
  .bento--2,
  .bento--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 200px;
  }
  .btile--lead,
  .bento--1 .btile--lead,
  .bento--2 .btile--lead,
  .bento--3 .btile--lead {
    grid-column: 1 / -1;
    grid-row: span 2;
  }
  .hrow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hrow__item:nth-child(3) {
    padding-left: 0;
    border-left: none;
  }
  .hrow__item:nth-child(n + 3) {
    margin-top: 1.1rem;
    border-top: 1px solid var(--line);
  }

  .signup--mosaic .signup__panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .hline__date,
  .hline__open {
    display: none;
  }
  .hline {
    justify-content: space-between;
  }
  .cvh__lead {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .cvh__media {
    position: relative;
    aspect-ratio: 4 / 3;
  }
  .cvh__lead::after {
    display: none;
  }
  .cvh__cap {
    position: relative;
    padding: 1.25rem 1.25rem 1.4rem;
  }
  .cvh__title {
    font-size: 2.1rem;
  }
  .cvh__list,
  .cvs {
    grid-template-columns: 1fr;
  }
  .cvh__item:nth-child(2) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mhead__clock [data-hero-open] {
    display: none;
  }
  .bento,
  .bento--1,
  .bento--2,
  .bento--3 {
    grid-auto-rows: 170px;
  }
  .btile__title {
    font-size: 0.86rem;
  }
  .hrow {
    grid-template-columns: 1fr;
  }
  .hrow__item,
  .hrow__item + .hrow__item {
    padding-left: 0;
    border-left: none;
  }
  .hrow__item + .hrow__item {
    margin-top: 1.1rem;
    border-top: 1px solid var(--line);
  }

  .signup--cover .perks {
    grid-template-columns: 1fr;
  }
  .signup--cover .perk {
    grid-template-columns: 34px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }
}