/* ============================================================
   THE RETICLE — GMAG template × DEFENSE TECH, VERSION 3
   (ULTIMATE — creative license, upscale discipline)
   Cinematic contractor editorial: ivory ground, carbon zones,
   ONE safety-orange accent. Signature moves: duotone imagery
   that resolves to color on hover, ghost section numerals,
   staggered reveals, a sticky article rail, numbered hero
   index, giant outline footer wordmark. No gimmicks — every
   effect is CSS-quiet and reduced-motion guarded.
   ============================================================ */

:root {
  --ivory: #fbfaf7;
  --zone: #f1efe9;
  --ink: #16181a;
  --gray: #585d61;
  --faint: #999da1;
  --line: #e3e1da;
  --line-dark: #c8c5bc;
  --carbon: #131517;
  --carbon-ink: #f0efe9;
  --sig: #e8501e;                /* the ONE accent — safety orange */
  --disp: "Archivo", "Inter", sans-serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --maxw: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.62; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(232, 80, 30, 0.22); }
input, select, textarea { font: inherit; font-size: 14.5px; color: var(--ink); background: #fff; border: 1px solid var(--line-dark); border-radius: 0; padding: 10px 13px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); }
::placeholder { color: var(--faint); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }

/* reveal with stagger */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* duotone imagery: grayscale at rest, color on hover */
.lmedia img, .gimg img, .bmedia img, .tstrip-item img {
  filter: grayscale(0.9) contrast(1.02);
  transition: filter 0.45s ease, transform 0.45s ease;
}
a:hover .lmedia img, .gcard:hover .gimg img, a.bmedia:hover img { filter: grayscale(0); }

.kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); position: relative; padding-left: 20px; }
.kicker::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 3px; background: var(--sig); transform: translateY(-50%); }
a.kicker:hover { color: var(--ink); }
.kicker.op { color: var(--ink); font-weight: 500; }
.byline { font-size: 12.5px; color: var(--faint); }
.byline.mono { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; }
.dek { color: var(--gray); }
.caption { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 8px; }

/* ---------- topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--ivory) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; white-space: nowrap; }
.bdot { width: 9px; height: 9px; border-radius: 50%; background: var(--sig); }
.nav { display: flex; gap: 24px; }
.nav a { font-size: 14px; font-weight: 550; color: var(--gray); }
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--ink); box-shadow: 0 2px 0 var(--sig); }
.topmeta { margin-left: auto; font-size: 9.5px; letter-spacing: 0.2em; color: var(--faint); }
.searchbox { position: relative; width: 180px; }
.searchbox input { padding: 7px 12px; font-size: 13px; border-color: var(--line); background: transparent; }
.menu-btn { display: none; margin-left: auto; color: var(--gray); font-size: 21px; }
.mobile-panel { display: none; }

/* ---------- HERO — cinematic index ---------- */
.hero { position: relative; }
.hero-slides { position: relative; height: clamp(460px, 66vh, 680px); background: var(--carbon); overflow: hidden; }
.hslide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.hslide.on { opacity: 1; z-index: 2; }
.hslide img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; filter: grayscale(0.35); }
.hshade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,21,23,0.12) 26%, rgba(19,21,23,0.94) 100%); }
.hcontent { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 0 46px; color: var(--carbon-ink); }
.hwrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.hcontent .kicker { color: rgba(240, 239, 233, 0.66); }
.hcontent .kicker.op { color: var(--carbon-ink); }
.hcontent h2 { font-family: var(--disp); font-size: clamp(30px, 4.8vw, 62px); line-height: 0.98; font-weight: 800; letter-spacing: -0.034em; margin: 14px 0 14px; max-width: 20ch; }
.hcontent h2 a:hover { opacity: 0.85; }
.hdek { font-size: 16px; color: rgba(240, 239, 233, 0.72); max-width: 58ch; margin-bottom: 10px; }
.hmeta .byline, .hmeta .byline.mono { color: rgba(240, 239, 233, 0.55); }
.hero-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.htab { text-align: left; padding: 16px 18px 16px 0; display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; color: var(--faint); position: relative; }
.htab + .htab { padding-left: 18px; border-left: 1px solid var(--line); }
.htab::after { content: ""; position: absolute; left: 0; right: 18px; top: 0; height: 3px; background: transparent; transition: background 0.2s ease; }
.htab + .htab::after { left: 18px; right: 0; }
.htab .hnum { font-family: var(--disp); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--line-dark); transition: color 0.2s ease; }
.htab .httl { font-family: var(--disp); font-size: 13.5px; line-height: 1.26; font-weight: 700; letter-spacing: -0.014em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.htab:hover { color: var(--gray); }
.htab:hover .hnum { color: var(--gray); }
.htab.on { color: var(--ink); }
.htab.on .hnum { color: var(--sig); }
.htab.on::after { background: var(--sig); }
.hero-bar { height: 3px; background: var(--line); }
.hero-bar span { display: block; height: 100%; width: 0; background: var(--sig); }

/* ---------- sections with ghost numerals ---------- */
.section { padding: 64px 0 4px; }
.sec-head { display: flex; align-items: baseline; gap: 18px; padding: 0 0 26px; position: relative; }
.secnum {
  font-family: var(--disp); font-weight: 800; font-size: clamp(64px, 8vw, 110px);
  line-height: 0.8; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-dark);
  user-select: none; flex: 0 0 auto;
}
.sec-head h2 { font-family: var(--disp); font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: -0.028em; }
.sec-head .more { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); border-bottom: 2px solid var(--sig); padding-bottom: 2px; }
.sec-head .more:hover { color: var(--ink); }

/* ---------- MAIN FEED ---------- */
.mainfeed { display: grid; grid-template-columns: 1fr 300px; gap: 44px; }
.feed3 { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 28px; min-width: 0; }
.feed3 > * { min-width: 0; }
.lpost { display: block; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.lcol .lpost:last-child { border-bottom: 0; margin-bottom: 0; }
.lpost .lmedia img { width: 100%; }
.lpost .kicker { display: inline-block; margin-top: 12px; }
.lpost h3 { font-family: var(--disp); font-size: 17px; line-height: 1.18; font-weight: 780; letter-spacing: -0.02em; margin: 8px 0 8px; }
.lpost:hover h3 { color: var(--sig); }
.ocard { display: block; position: relative; margin-bottom: 28px; overflow: hidden; background: var(--carbon); }
.ocol .ocard:last-child { margin-bottom: 0; }
.ocard img { width: 100%; opacity: 0.85; filter: grayscale(0.5); transition: filter 0.45s ease, transform 0.5s ease; }
.ocard:hover img { filter: grayscale(0); transform: scale(1.025); }
.oshade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,21,23,0) 36%, rgba(19,21,23,0.94) 100%); }
.obody { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; color: var(--carbon-ink); }
.obody .kicker { color: rgba(240, 239, 233, 0.62); }
.obody h4 { font-family: var(--disp); font-size: 22px; line-height: 1.06; font-weight: 800; letter-spacing: -0.026em; margin: 9px 0 8px; }
.odate { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: rgba(240, 239, 233, 0.48); }

.widget { margin-bottom: 32px; }
.wlabel { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); padding-bottom: 10px; border-bottom: 2px solid var(--ink); display: block; }
.opitem { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
.owho { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.opitem h4 { font-family: var(--disp); font-size: 16px; line-height: 1.22; font-weight: 780; letter-spacing: -0.018em; margin-top: 5px; }
.opitem:hover h4 { color: var(--sig); }
.tcloud { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.tcloud a { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--line-dark); padding: 7px 13px; }
.tcloud a:hover { border-color: var(--sig); color: var(--ink); }
.deskbox { background: var(--carbon); color: var(--carbon-ink); padding: 24px; position: relative; overflow: hidden; }
.deskbox::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 5px; background: var(--sig); }
.deskbox .wlabel { color: rgba(240, 239, 233, 0.48); border-bottom-color: rgba(240, 239, 233, 0.22); }
.deskbox h4 { font-family: var(--disp); font-size: 18.5px; font-weight: 800; letter-spacing: -0.024em; margin: 12px 0 6px; }
.deskbox p { font-size: 13px; color: rgba(240, 239, 233, 0.62); margin-bottom: 16px; }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--sig); color: #fff; font-family: var(--disp); font-size: 13.5px; font-weight: 750; letter-spacing: -0.005em; padding: 12px 24px; transition: transform 0.15s ease, opacity 0.15s ease; }
.btn:hover { opacity: 0.9; transform: translateX(2px); color: #fff; }

/* ---------- CARBON BAND ---------- */
.band { background: var(--carbon); color: var(--carbon-ink); margin-top: 66px; padding: 62px 0 64px; position: relative; }
.band::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--sig) 0 180px, transparent 180px); }
.band .sec-head h2 { color: var(--carbon-ink); }
.band .secnum { -webkit-text-stroke-color: rgba(240, 239, 233, 0.25); }
.band .sec-head .more { color: rgba(240, 239, 233, 0.55); }
.band .sec-head .more:hover { color: var(--carbon-ink); }
.band-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 50px; }
.band-feature .bmedia { display: block; }
.band-feature .bmedia img { width: 100%; filter: grayscale(0.6); }
.band-feature .bmedia:hover img { filter: grayscale(0); }
.bcopy { padding-top: 22px; }
.bcopy .kicker { color: rgba(240, 239, 233, 0.55); }
.bcopy h2 { font-family: var(--disp); font-size: clamp(25px, 3.4vw, 42px); line-height: 1.0; font-weight: 800; letter-spacing: -0.032em; margin: 14px 0 12px; }
.bcopy h2 a:hover { opacity: 0.85; }
.bcopy .dek { color: rgba(240, 239, 233, 0.66); font-size: 15.5px; margin-bottom: 10px; }
.bcopy .byline, .bcopy .byline.mono { color: rgba(240, 239, 233, 0.48); }
.bitem { display: block; padding: 18px 0; border-bottom: 1px solid rgba(240, 239, 233, 0.15); position: relative; }
.bitem:first-child { padding-top: 2px; }
.bitem .kicker { color: rgba(240, 239, 233, 0.48); }
.bitem h4 { font-family: var(--disp); font-size: 18.5px; line-height: 1.14; font-weight: 780; letter-spacing: -0.022em; margin: 8px 0 7px; transition: transform 0.2s ease; }
.bitem:hover h4 { transform: translateX(6px); }
.bmeta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: rgba(240, 239, 233, 0.42); }

/* ---------- LATEST GRID ---------- */
.latest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; padding-bottom: 26px; }
.latest-grid > .rv:nth-child(2) { transition-delay: 0.08s; }
.latest-grid > .rv:nth-child(3) { transition-delay: 0.16s; }
.latest-grid > .rv:nth-child(5) { transition-delay: 0.08s; }
.latest-grid > .rv:nth-child(6) { transition-delay: 0.16s; }
.gcard { min-width: 0; }
.gcard .gimg { display: block; overflow: hidden; }
.gcard .gimg img { width: 100%; }
.gcard:hover .gimg img { transform: scale(1.02); }
.gcard .kicker { display: inline-block; margin-top: 14px; }
.gcard h3 { font-family: var(--disp); font-size: 20.5px; line-height: 1.1; font-weight: 800; letter-spacing: -0.026em; margin: 8px 0 9px; }
.gcard h3 a { background-image: linear-gradient(var(--sig), var(--sig)); background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.25s ease; padding-bottom: 3px; }
.gcard h3 a:hover { background-size: 100% 3px; }
.gcard .dek { font-size: 14px; line-height: 1.55; margin-bottom: 9px; }

/* ---------- TOPIC STRIP — oversized index ---------- */
.tstrip { background: var(--zone); border-top: 1px solid var(--line-dark); margin-top: 30px; }
.tstrip-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 34px 24px 38px; }
.tstrip-item { display: block; padding: 0 24px; min-width: 0; }
.tstrip-item:first-child { padding-left: 0; }
.tstrip-item + .tstrip-item { border-left: 1px solid var(--line-dark); }
.tnum { font-family: var(--disp); font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1.3px var(--line-dark); display: block; transition: all 0.2s ease; }
.tstrip-item:hover .tnum { color: var(--sig); -webkit-text-stroke: 0px transparent; }
.tstrip-item h4 { font-family: var(--disp); font-size: 17px; font-weight: 800; letter-spacing: -0.022em; margin: 10px 0 4px; }
.tcount { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* ---------- SECTION page ---------- */
.pagehead { padding: 54px 0 28px; border-bottom: 1px solid var(--line-dark); margin-bottom: 40px; }
.pagehead .kicker { font-size: 11px; }
.pagehead h1 { font-family: var(--disp); font-size: clamp(34px, 5.4vw, 68px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; margin-top: 16px; }
.pagehead .blurb { color: var(--gray); font-size: 16.5px; margin-top: 14px; max-width: 60ch; }
.pagehead .tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 26px; }
.pagehead .tools .spacer { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--line-dark); padding: 8px 15px; }
a.chip:hover, button.chip:hover { color: var(--ink); border-color: var(--ink); cursor: pointer; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--sig); }
.count { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.06em; }
.seclist { padding-bottom: 54px; }

/* ---------- ARTICLE ---------- */
.article-head { max-width: 820px; margin: 0 auto; padding: 50px 0 0; }
.article-head h1 { font-family: var(--disp); font-size: clamp(31px, 5vw, 56px); line-height: 0.98; font-weight: 800; letter-spacing: -0.038em; margin: 16px 0 16px; }
.article-head .dek { font-size: 18.5px; line-height: 1.5; }
.ahead-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 13px; margin-top: 22px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13.5px; }
.avatar { width: 42px; height: 42px; background: var(--zone); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--gray); flex: 0 0 auto; }
.avatar.big { width: 52px; height: 52px; font-size: 15px; }
.avatar.ideo { width: auto; min-width: 42px; padding: 0 13px; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); box-shadow: inset 0 -3px 0 var(--sig); }
.ahead-meta b { font-weight: 700; }
.arole { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.adate { margin-left: auto; text-align: right; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--faint); }
.article-media { max-width: 1040px; margin: 30px auto 0; }
.article-media img { width: 100%; }
.article-cols { display: grid; grid-template-columns: 164px 1fr; gap: 52px; max-width: 960px; margin: 40px auto 0; align-items: start; }
.a-rail { border-right: 1px solid var(--line); padding-right: 30px; position: sticky; top: 88px; }
.rail-block { padding: 13px 0; border-bottom: 1px solid var(--line); }
.rail-block:last-child { border-bottom: 0; }
.rlabel { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.rval { font-family: var(--disp); font-size: 14.5px; font-weight: 780; letter-spacing: -0.014em; }
.rshare { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); padding: 0; border-bottom: 2px solid var(--sig); }
.rshare:hover { color: var(--ink); }
.article-body { min-width: 0; font-size: 16.5px; line-height: 1.74; max-width: 660px; }
.article-body p { margin-bottom: 23px; }
.pullquote { margin: 36px 0; font-family: var(--disp); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.18; font-weight: 800; letter-spacing: -0.03em; position: relative; padding-top: 20px; }
.pullquote::before { content: ""; position: absolute; top: 0; left: 0; width: 54px; height: 5px; background: var(--sig); }
.subhead { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); margin: 36px 0 15px; position: relative; padding-left: 20px; }
.subhead::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 3px; background: var(--sig); transform: translateY(-50%); }
.themesbox { background: var(--zone); padding: 20px 24px; margin: 28px 0; }
.themesbox h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); margin-bottom: 12px; }
.themesbox ul { list-style: none; }
.themesbox li { font-size: 15px; padding: 6px 0 6px 22px; position: relative; line-height: 1.5; }
.themesbox li::before { content: ""; position: absolute; left: 0; top: 15px; width: 10px; height: 3px; background: var(--sig); }
.counterbox { border-left: 3px solid var(--ink); padding: 2px 0 2px 22px; margin: 28px 0; font-size: 15.5px; line-height: 1.64; color: var(--gray); }
.counterbox h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 9px; }
.bottomline { font-family: var(--disp); font-size: 21px; font-weight: 800; letter-spacing: -0.026em; margin: 28px 0; line-height: 1.22; }
.bottomline b { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--gray); display: block; margin-bottom: 7px; }
.sourcebox { background: var(--carbon); color: var(--carbon-ink); padding: 22px 26px; margin: 34px 0 0; position: relative; }
.sourcebox::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 5px; background: var(--sig); }
.sourcebox h4 { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 239, 233, 0.5); margin-bottom: 10px; }
.srcline { font-family: var(--disp); font-size: 17.5px; font-weight: 780; letter-spacing: -0.02em; }
.srcmeta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: rgba(240, 239, 233, 0.6); margin-top: 7px; }
.watch { color: var(--carbon-ink); font-weight: 500; border-bottom: 2px solid var(--sig); }
.watch:hover { opacity: 0.8; }
.article-foot { max-width: 960px; margin: 0 auto; }
.a-tags { margin-top: 28px; max-width: 660px; }
.a-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.pnbox { display: block; min-width: 0; border: 1px solid var(--line-dark); padding: 17px 19px; transition: border-color 0.15s ease, transform 0.15s ease; }
.pnbox:hover { border-color: var(--ink); transform: translateY(-2px); }
.pnbox .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.pnbox h5 { font-family: var(--disp); font-size: 15px; line-height: 1.22; font-weight: 780; letter-spacing: -0.018em; margin-top: 7px; }
.pnbox.next { text-align: right; }
.biobox { background: var(--zone); padding: 22px 24px; display: flex; gap: 16px; align-items: flex-start; margin-top: 20px; }
.biobox h5 { font-family: var(--disp); font-size: 15.5px; font-weight: 800; letter-spacing: -0.016em; }
.biobox p { font-size: 13.5px; color: var(--gray); margin-top: 6px; }

/* ---------- prose / forms ---------- */
.prosehead { max-width: 780px; margin: 0 auto; padding: 58px 0 4px; }
.prosehead .kicker { font-size: 11px; }
.prosehead h1 { font-family: var(--disp); font-size: clamp(34px, 5.6vw, 70px); font-weight: 800; letter-spacing: -0.042em; line-height: 0.96; margin-top: 16px; }
.prosehead .dek { font-size: 17.5px; color: var(--gray); margin-top: 14px; line-height: 1.55; max-width: 56ch; }
.prose { max-width: 680px; margin: 30px auto 0; font-size: 16.5px; line-height: 1.72; }
.prose p { margin-bottom: 22px; }
.prose h2 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); margin: 38px 0 14px; position: relative; padding-left: 20px; }
.prose h2::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 3px; background: var(--sig); transform: translateY(-50%); }
.prose ul { list-style: none; }
.prose li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.prose a { font-weight: 600; border-bottom: 2px solid var(--sig); }
.prose a:hover { opacity: 0.7; }
.formcard { max-width: 620px; margin: 32px auto 82px; border: 1px solid var(--line-dark); padding: 30px; background: #fff; }
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.formrow.single { grid-template-columns: 1fr; }
label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
.form-ok { display: none; background: var(--zone); border-left: 4px solid var(--sig); padding: 12px 16px; font-size: 14.5px; margin-top: 16px; }

/* ---------- desk ---------- */
.desk { padding: 46px 0 82px; }
.desk .kicker { font-size: 11px; }
.desk h1 { font-family: var(--disp); font-size: clamp(30px, 4.2vw, 50px); font-weight: 800; letter-spacing: -0.036em; margin-top: 12px; }
.desk .sub { font-size: 14px; color: var(--gray); margin-top: 8px; max-width: 70ch; }
.desk-tabs { display: flex; gap: 8px; margin-top: 28px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.desk-tabs::-webkit-scrollbar { display: none; }
.desk-tabs button { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); padding: 10px 17px; border: 1px solid var(--line-dark); white-space: nowrap; background: transparent; }
.desk-tabs button:hover { color: var(--ink); border-color: var(--ink); }
.desk-tabs button.on { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: inset 0 -3px 0 var(--sig); }
.desk-note { margin: 24px 0; background: var(--zone); border-left: 4px solid var(--sig); padding: 12px 16px; font-family: var(--mono); font-size: 11.5px; color: var(--gray); }
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 26px 0; }
.stat { border: 1px solid var(--line-dark); padding: 17px 19px; min-width: 0; background: #fff; position: relative; }
.stat::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 4px; background: var(--sig); }
.stat .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.stat .v { font-family: var(--disp); font-size: 32px; font-weight: 800; letter-spacing: -0.032em; margin-top: 8px; line-height: 1; }
.stat .d { font-family: var(--mono); font-size: 10.5px; color: var(--gray); margin-top: 7px; }
.deskrow { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.deskrow > * { min-width: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding: 10px 12px 10px 0; border-bottom: 2px solid var(--ink); }
.table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tablewrap { margin-top: 24px; overflow-x: auto; }
.idcell { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.libtitle { font-family: var(--disp); font-weight: 780; font-size: 14.5px; letter-spacing: -0.016em; }
.libauthor { color: var(--gray); font-size: 12.5px; }
.warncell { font-family: var(--mono); font-size: 11px; color: var(--gray); }
.pill { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--line-dark); color: var(--gray); }
.pill.ok { color: var(--ink); border-color: var(--ink); }
.pill.warn { color: var(--gray); border-color: var(--gray); }
.pill.op { background: var(--ink); color: #fff; border-color: var(--ink); }
.pipe { border-top: 2px solid var(--ink); margin-top: 14px; }
.pipe .step { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.pipe .num { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.pipe .step.active { background: var(--zone); box-shadow: inset 3px 0 0 var(--sig); padding-left: 12px; }
.pipe .step.active h4, .pipe .step.active .num { color: var(--ink); }
.pipe .step.done .num { color: var(--ink); }
.pipe h4 { font-family: var(--disp); font-size: 13.5px; font-weight: 780; letter-spacing: -0.014em; display: inline; }
.pipe p { font-size: 12px; color: var(--gray); margin-top: 2px; }
.claude-preview { display: none; margin-top: 18px; border: 1px solid var(--line-dark); border-left: 4px solid var(--sig); padding: 14px 18px; background: #fff; }
.claude-preview .t { font-family: var(--disp); font-weight: 800; font-size: 16.5px; letter-spacing: -0.022em; margin-top: 6px; }
.claude-preview .d { font-family: var(--mono); font-size: 10.5px; color: var(--gray); margin-top: 6px; }

/* ---------- footer: giant outline wordmark ---------- */
footer { background: var(--carbon); color: var(--carbon-ink); margin-top: 70px; overflow: hidden; }
.foot-word {
  font-family: var(--disp); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(70px, 14.5vw, 218px); line-height: 0.82; text-align: center;
  color: transparent; -webkit-text-stroke: 1.5px rgba(240, 239, 233, 0.16);
  user-select: none; padding: 44px 0 0; white-space: nowrap;
}
.foot-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding: 40px 0 40px; }
.foot-inner .brand { color: var(--carbon-ink); font-size: 19px; }
.foot-inner p { font-size: 13.5px; color: rgba(240, 239, 233, 0.55); max-width: 34ch; margin-top: 12px; }
.foot-inner h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 239, 233, 0.38); margin-bottom: 13px; font-weight: 500; }
.foot-inner ul { list-style: none; display: grid; gap: 9px; }
.foot-inner ul a { font-size: 13.5px; color: rgba(240, 239, 233, 0.7); }
.foot-inner ul a:hover { color: #fff; }
.foot-legal { border-top: 1px solid rgba(240, 239, 233, 0.13); padding: 18px 0 30px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: rgba(240, 239, 233, 0.42); display: flex; flex-wrap: wrap; gap: 8px 30px; justify-content: space-between; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .mainfeed { grid-template-columns: 1fr; }
  .feed3 { grid-template-columns: 1fr 1fr; }
  .feed3 > *:nth-child(2) { order: -1; grid-column: 1 / -1; }
  .band-grid { grid-template-columns: 1fr; gap: 28px; }
  .latest-grid { grid-template-columns: 1fr 1fr; }
  .tstrip-grid { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .tstrip-item { padding-right: 24px; }
  .tstrip-item + .tstrip-item { border-left: 0; }
  .article-cols { grid-template-columns: 1fr; gap: 0; }
  .a-rail { position: static; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 14px; display: flex; flex-wrap: wrap; gap: 0 30px; margin-bottom: 24px; }
  .rail-block { border-bottom: 0; padding: 4px 0; }
  .statrow { grid-template-columns: 1fr 1fr; }
  .deskrow { grid-template-columns: 1fr; }
  .hero-tabs { grid-template-columns: 1fr 1fr; }
  .htab:nth-child(3) { border-left: 0; padding-left: 0; }
  .topmeta { display: none; }
  .secnum { font-size: clamp(46px, 9vw, 72px); }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  body.navopen .mobile-panel { display: block; position: absolute; top: 64px; left: 0; right: 0; background: var(--ivory); border-bottom: 1px solid var(--line); padding: 14px 24px 18px; z-index: 99; }
  .mobile-panel a { display: inline-block; font-size: 15px; font-weight: 600; margin: 7px 20px 7px 0; }
  .feed3 { grid-template-columns: 1fr; }
  .latest-grid { grid-template-columns: 1fr; }
  .hero-slides { height: clamp(400px, 66vh, 520px); }
  .hero-tabs { grid-template-columns: 1fr; }
  .htab { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line); grid-template-columns: 34px 1fr; }
  .htab::after { left: 0 !important; right: 0 !important; }
  .htab .hnum { font-size: 20px; }
  .formrow { grid-template-columns: 1fr; }
  .a-pn { grid-template-columns: 1fr; }
  .pnbox.next { text-align: left; }
  .tstrip-grid { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .foot-word { font-size: clamp(56px, 17vw, 110px); }
}
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .foot-inner { grid-template-columns: 1fr; gap: 26px; }
  .stat .v { font-size: 25px; }
  .secnum { display: none; }
}
/* ---------- MAP PAGES (map.html geographic · map2.html grid) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; align-items: start; margin-bottom: 40px; }
.map-stage { min-width: 0; }
.usmap-wrap { position: relative; }
.usmap-wrap svg { width: 100%; height: auto; display: block; }
.st { fill: #edebe3; transition: fill-opacity 0.18s ease; }
.st.on { cursor: pointer; fill: var(--sig); }
.st.on.t1 { fill-opacity: 0.55; }
.st.on.t2 { fill-opacity: 0.78; }
.st.on.t3 { fill-opacity: 1; }
.st.on.nom { fill: url(#dsHatch); fill-opacity: 1; }
.st.on:hover, .st.on:focus-visible { fill-opacity: 1; filter: brightness(0.94); outline: none; }
.st.on.nom:hover, .st.on.nom:focus-visible { filter: brightness(0.97); }
.st.sel, .dcmark.sel rect { stroke: var(--ink); stroke-width: 2px; }
.stb { fill: none; stroke: var(--ivory); stroke-width: 1; pointer-events: none; }
.sto { fill: none; stroke: var(--line-dark); stroke-width: 1; pointer-events: none; }
.chipnum { pointer-events: none; }
.chipnum circle { fill: var(--carbon); stroke: var(--ivory); stroke-width: 1.5; }
.chipnum text { fill: var(--carbon-ink); font: 700 12px var(--disp); text-anchor: middle; }
.chiplead { stroke: var(--faint); stroke-width: 1; pointer-events: none; }
.dcmark { cursor: default; }
.dcmark.on { cursor: pointer; }
.dcmark line { stroke: var(--faint); stroke-width: 1; }
.dcmark rect { fill: #edebe3; }
.dcmark.on rect { fill: var(--sig); }
.dcmark.on.nom rect { fill: url(#dsHatch); stroke: var(--sig); stroke-width: 1.5; }
.dcmark text { font: 700 12px var(--disp); text-anchor: middle; fill: var(--gray); pointer-events: none; }
.dcmark.on text { fill: var(--carbon); }
.dcmark.on:hover rect, .dcmark.on:focus-visible rect { filter: brightness(0.94); outline: none; }
.map-tip { position: absolute; pointer-events: none; background: var(--carbon); color: var(--carbon-ink); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; padding: 7px 10px; transform: translate(-50%, -140%); opacity: 0; transition: opacity 0.12s ease; white-space: nowrap; z-index: 5; }
.map-legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--gray); align-items: center; }
.map-legend .sw { width: 14px; height: 14px; display: inline-block; vertical-align: -3px; margin-right: 8px; border: 1px solid var(--line-dark); }
.map-legend .sw-off { background: var(--sig); border-color: var(--sig); }
.map-legend .sw-nom { background: repeating-linear-gradient(45deg, #e8501e 0 3px, #f6d9c9 3px 7px); border-color: var(--sig); }
.map-legend .sw-none { background: #edebe3; }
.map-legend .sw-tile-off { background: var(--sig); border-color: var(--sig); }
.map-legend .sw-tile-nom { background: #fff; border: 2px solid var(--sig); }
.map-panel { border: 1px solid var(--line-dark); padding: 20px 22px 16px; position: sticky; top: 88px; }
.mp-state { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-dark); padding-bottom: 12px; margin-bottom: 4px; }
.mp-state h3 { font-family: var(--disp); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.mp-sum { font-size: 14px; line-height: 1.6; color: var(--gray); padding: 10px 0 2px; }
.mp-sum b { color: var(--ink); }
.mp-hint { font-size: 12.5px; color: var(--faint); padding: 6px 0 2px; }
.mp-quick { padding-top: 12px; padding-bottom: 6px; }
.mp-card { display: block; padding: 14px 0 12px; border-bottom: 1px solid var(--line); }
.mp-card:last-of-type { border-bottom: 0; }
.mp-card h4 { font-family: var(--disp); font-size: 15.5px; font-weight: 780; letter-spacing: -0.016em; margin: 7px 0 5px; }
.mp-card .byline { display: block; margin-bottom: 6px; }
.mp-go { font-size: 9.5px; letter-spacing: 0.12em; color: var(--gray); }
.mp-card:hover h4 { color: var(--sig); }
.mp-card:hover .mp-go { color: var(--sig); }
.mp-note { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--faint); padding: 12px 0 4px; border-top: 1px solid var(--line); }
.stx { border-top: 1px solid var(--line-dark); padding: 6px 0 56px; }
.stx .sec-head { margin-top: 26px; }
.stx-state { border: 1px solid var(--line-dark); margin-bottom: 14px; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.stx-state.sel { border-color: var(--ink); box-shadow: inset 0 3px 0 var(--sig); }
.stx-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 18px; font-family: var(--disp); font-weight: 800; font-size: 16.5px; letter-spacing: -0.02em; text-align: left; }
.stx-head .mono { font-size: 9.5px; color: var(--gray); letter-spacing: 0.12em; font-weight: 500; }
.stx-head:hover { background: var(--zone); }
.stx-rows { padding: 0 18px; border-top: 1px solid var(--line); }
.tilemap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.tile { position: relative; aspect-ratio: 1; border: 1px solid var(--line); background: var(--zone); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--disp); font-weight: 800; font-size: clamp(9px, 1.35vw, 14.5px); color: var(--faint); padding: 0; letter-spacing: 0; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.tile .ab { line-height: 1; }
.tile.on { background: var(--sig); border-color: var(--sig); color: #fff; cursor: pointer; }
.tile.on.nom { background: #fff; color: var(--sig); border: 2px solid var(--sig); }
.tile.on:hover, .tile.on:focus-visible { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); outline: none; }
.tile.sel { outline: 2px solid var(--ink); outline-offset: 2px; }
.tile .dots { display: flex; gap: 3px; }
.tile .dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tile .dots i.ring { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
@media (max-width: 1020px) {
  .map-grid { grid-template-columns: 1fr; gap: 26px; }
  .map-panel { position: static; }
}
@media (max-width: 480px) {
  .tilemap { gap: 3px; }
  .tile .dots { gap: 2px; }
  .tile .dots i { width: 4px; height: 4px; }
  .map-panel { padding: 16px 16px 12px; }
  .stx-head { padding: 13px 14px; font-size: 15px; }
  .stx-rows { padding: 0 14px; }
}

/* ---------- RACES PAGES (races.html slate · races2.html board) ---------- */
.rc-date { display: flex; align-items: center; gap: 18px; margin: 34px 0 18px; font-size: 11px; letter-spacing: 0.14em; color: var(--gray); }
.rc-date:first-child { margin-top: 6px; }
.rc-date i { flex: 1; height: 1px; background: var(--line-dark); }
.rc { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 26px; align-items: center; border: 1px solid var(--line-dark); padding: 22px 26px; margin-bottom: 14px; transition: border-color 0.15s ease, transform 0.15s ease; }
.rc:hover { border-color: var(--ink); transform: translateY(-2px); }
.rc h3 { font-family: var(--disp); font-size: 21px; font-weight: 800; letter-spacing: -0.024em; margin: 9px 0 8px; line-height: 1.12; }
.rc h3 a { background-image: linear-gradient(var(--sig), var(--sig)); background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.25s ease; padding-bottom: 3px; }
.rc h3 a:hover { background-size: 100% 3px; }
.rc h3 em { font-style: italic; font-weight: 500; font-size: 0.72em; color: var(--faint); }
.rc .dek { font-size: 14px; margin-bottom: 9px; }
.rc-odds { text-align: right; }
.rc-num { font-family: var(--disp); font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; display: block; }
.rc-num i { font-style: normal; font-size: 0.5em; color: var(--gray); }
.rc-lbl { display: block; font-size: 9px; letter-spacing: 0.16em; color: var(--faint); margin: 4px 0 10px; }
.rc-bar { height: 8px; background: var(--zone); border: 1px solid var(--line-dark); position: relative; }
.rc-bar i { position: absolute; inset: 0 auto 0 0; background: var(--sig); }
.rc-foot { font-size: 9.5px; letter-spacing: 0.1em; color: var(--faint); line-height: 1.9; padding: 26px 0 60px; max-width: 86ch; }
.rc-foot a { border-bottom: 1px solid var(--sig); }
/* the board */
.board { background: var(--carbon); color: var(--carbon-ink); padding: 30px 32px; margin-bottom: 26px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; position: relative; }
.board::before { content: ""; position: absolute; top: 0; left: 0; width: 54px; height: 5px; background: var(--sig); }
.bh-next h3 { font-family: var(--disp); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 6px; }
.bh-next p { font-size: 13px; color: rgba(240, 239, 233, 0.6); margin-bottom: 16px; }
.bh-next .wlabel { color: var(--sig); }
.cd { display: flex; gap: 18px; font-family: var(--mono); }
.cd b { font-family: var(--disp); font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.cd span { display: block; font-size: 8.5px; letter-spacing: 0.18em; color: rgba(240, 239, 233, 0.45); margin: -16px 0 0 2px; padding-top: 20px; }
.bh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.bstat { border-left: 1px solid rgba(240, 239, 233, 0.16); padding-left: 14px; }
.bstat b { font-family: var(--disp); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; display: block; line-height: 1.05; }
.bstat span { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; color: rgba(240, 239, 233, 0.45); }
.board-list { margin-bottom: 8px; }
.brow { display: grid; grid-template-columns: 74px minmax(0, 1fr) 150px 84px; gap: 22px; align-items: center; border: 1px solid var(--line-dark); border-left: 4px solid var(--sig); padding: 18px 22px; margin-bottom: 12px; transition: border-color 0.15s ease, transform 0.15s ease; }
.brow:hover { border-color: var(--ink); border-left-color: var(--sig); transform: translateY(-2px); }
.b-when b { display: block; font-size: 13px; letter-spacing: 0.06em; color: var(--ink); font-weight: 500; }
.b-when span { font-size: 8.5px; letter-spacing: 0.12em; color: var(--faint); }
.brow h3 { font-family: var(--disp); font-size: 18.5px; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 6px; line-height: 1.14; }
.brow h3 a:hover { color: var(--sig); }
.brow h3 em { font-style: italic; font-weight: 500; font-size: 0.74em; color: var(--faint); }
.brow .dek { font-size: 13px; margin-bottom: 4px; }
.b-gauge { text-align: center; }
.needle { width: 92px; height: auto; display: inline-block; }
.n-track { fill: none; stroke: var(--line-dark); stroke-width: 7; stroke-linecap: butt; }
.n-val { fill: none; stroke: var(--sig); stroke-width: 7; }
.n-pin { stroke: var(--ink); stroke-width: 2.4; }
.n-hub { fill: var(--ink); }
.b-price { display: block; font-size: 17px; letter-spacing: 0.02em; color: var(--ink); font-weight: 500; margin-top: 2px; font-variant-numeric: tabular-nums; }
.b-price i { font-style: normal; font-size: 0.7em; color: var(--gray); }
.b-sub { display: block; font-size: 8px; letter-spacing: 0.1em; color: var(--faint); margin-top: 3px; }
.b-x { justify-self: end; font-size: 9.5px; letter-spacing: 0.12em; color: var(--gray); border: 1px solid var(--line-dark); padding: 9px 12px; white-space: nowrap; }
.b-x:hover { color: var(--ink); border-color: var(--ink); }
.brx { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; }
.brx p { font-size: 13.5px; color: var(--gray); line-height: 1.66; }
.brx p.mono { font-size: 9.5px; letter-spacing: 0.1em; color: var(--faint); margin-top: 8px; }
.brx a { border-bottom: 1px solid var(--sig); color: var(--ink); }
.brx-note { background: var(--zone); padding: 20px 24px; margin: 24px 0 60px; }
.brx-note h4 { font-size: 9.5px; letter-spacing: 0.16em; color: var(--gray); margin-bottom: 8px; }
.brx-note p { font-size: 13.5px; color: var(--gray); line-height: 1.66; max-width: 86ch; }
@media (max-width: 1020px) {
  .board { grid-template-columns: 1fr; }
  .brow { grid-template-columns: minmax(0, 1fr) 150px; }
  .b-when { display: flex; gap: 10px; align-items: baseline; grid-column: 1 / -1; }
  .b-x { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 720px) {
  .rc { grid-template-columns: 1fr; gap: 14px; }
  .rc-odds { text-align: left; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .rc-num { font-size: 34px; }
  .rc-bar { flex: 1 0 100%; }
  .brow { grid-template-columns: 1fr; }
  .b-gauge { text-align: left; display: flex; align-items: center; gap: 14px; }
  .cd { gap: 12px; }
  .bh-stats { grid-template-columns: 1fr 1fr; }
  .board { padding: 22px 20px; }
}

/* ---------- POLICIES PAGES (policies.html docket · policies2.html ledger) ---------- */
.pol-soc { font-size: 13px; color: var(--gray); line-height: 1.6; margin: 2px 0 10px; }
.pol-soc b { color: var(--ink); font-weight: 700; }
.pol-role { color: var(--faint); text-transform: none; letter-spacing: 0.02em; }
.rc-num.pol-disp { font-size: 30px; letter-spacing: -0.02em; white-space: nowrap; }
.rc-num.pol-disp.txt { font-size: 20px; letter-spacing: -0.01em; white-space: normal; line-height: 1.12; display: block; padding-top: 4px; max-width: 150px; margin-left: auto; }
@media (max-width: 720px) { .rc-num.pol-disp.txt { margin-left: 0; } }
.pol-strip { border: 1px solid var(--line-dark); padding: 18px 22px 22px; margin-bottom: 26px; }
.pol-strip .wlabel { margin-bottom: 12px; display: block; }
.tilemap.mini { max-width: 560px; gap: 3px; }
.tilemap.mini .tile { font-size: clamp(6px, 1vw, 9px); gap: 2px; border-radius: 1px; }
.tilemap.mini .tile .dots i { width: 3px; height: 3px; }
.ledger { position: relative; }
.plg { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) 170px; gap: 24px; align-items: start; border: 1px solid var(--line-dark); border-left: 4px solid var(--sig); padding: 24px 26px 20px; margin-bottom: 16px; overflow: hidden; transition: border-color 0.15s ease, transform 0.15s ease; }
.plg:hover { border-color: var(--ink); border-left-color: var(--sig); transform: translateY(-2px); }
.plg-num { position: absolute; top: -14px; right: 10px; font-family: var(--disp); font-weight: 800; font-size: 92px; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--line-dark); user-select: none; pointer-events: none; line-height: 1; }
.plg-when b { display: block; font-family: var(--disp); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.plg-when span { display: block; font-size: 8.5px; letter-spacing: 0.12em; color: var(--faint); margin-top: 5px; }
.plg-when .plg-note { color: var(--sig); font-weight: 500; }
.plg-main h3 { font-family: var(--disp); font-size: 20px; font-weight: 800; letter-spacing: -0.022em; margin: 8px 0 7px; line-height: 1.12; }
.plg-main .dek { font-size: 13.5px; margin-bottom: 8px; }
.plg .rc-odds { position: relative; z-index: 1; }
.plg .b-x { grid-column: 2 / -1; justify-self: start; margin-top: 4px; }
.plg .brx { grid-column: 1 / -1; }
.plg .brx b { font-weight: 700; color: var(--ink); }
.plg .brx p { margin-bottom: 7px; }
@media (max-width: 1020px) {
  .plg { grid-template-columns: minmax(0, 1fr) 160px; }
  .plg-when { display: flex; gap: 12px; align-items: baseline; grid-column: 1 / -1; }
  .plg-when span { margin-top: 0; }
  .plg .b-x { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .plg { grid-template-columns: 1fr; padding: 20px 18px 16px; }
  .plg-num { font-size: 64px; top: -8px; }
  .plg .rc-odds { text-align: left; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .plg .rc-odds .rc-bar { flex: 1 0 100%; }
  .tilemap.mini { max-width: 100%; }
}

/* ---------- FRONT PAGES (index.html snapshot · index2.html dashboard) ---------- */
.fronttoggle { margin-top: 24px; }
.fp-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: center; margin-bottom: 20px; }
.fp-feature .gimg { display: block; overflow: hidden; }
.fp-feature h3 { font-family: var(--disp); font-size: clamp(24px, 3vw, 37px); font-weight: 800; letter-spacing: -0.032em; line-height: 1.05; margin: 10px 0 11px; }
.fp-feature h3 a { background-image: linear-gradient(var(--sig), var(--sig)); background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.25s ease; padding-bottom: 3px; }
.fp-feature h3 a:hover { background-size: 100% 3px; }
.fp-feature .dek { font-size: 14.5px; margin-bottom: 10px; }
.fp-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line-dark); padding-top: 6px; }
.fp-more { font-size: 9.5px; letter-spacing: 0.12em; margin-top: 14px; }
.fp-more a { color: var(--gray); border-bottom: 2px solid var(--sig); padding-bottom: 1px; }
.fp-more a:hover { color: var(--ink); }
.fp-map-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 46px; align-items: center; }
.fp-map-side .mp-sum { font-size: 15px; }
.fp-map-side .map-legend { margin: 16px 0 4px; }
.fp-board { margin-bottom: 16px; }
@media (min-width: 1021px) { .brow.lite { grid-template-columns: 74px minmax(0, 1fr) 150px; } }
.plg.lite .plg-when { display: flex; gap: 12px; align-items: baseline; }
.plg.lite .plg-when span { margin-top: 0; }
.plg.lite h3 a:hover { color: var(--sig); }
/* the wire ticker */
.ticker-wrap { background: var(--carbon); border-top: 1px solid rgba(240, 239, 233, 0.14); }
.ticker { overflow: hidden; padding: 13px 0; position: relative; }
.ticker-in { display: inline-flex; gap: 48px; white-space: nowrap; padding-right: 48px; animation: deso-tick 45s linear infinite; }
.ticker:hover .ticker-in { animation-play-state: paused; }
.ticker a { color: rgba(240, 239, 233, 0.72); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 11px; }
.ticker a:hover { color: #fff; }
.ticker a i { width: 7px; height: 7px; background: var(--sig); flex: 0 0 auto; }
@keyframes deso-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-in { animation: none; } .ticker { overflow-x: auto; } }
/* the state of the movement */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stattile { position: relative; border: 1px solid var(--line-dark); padding: 28px 22px 22px; transition: border-color 0.15s ease, transform 0.15s ease; }
.stattile b { font-family: var(--disp); font-size: clamp(42px, 5vw, 66px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; display: block; margin-bottom: 10px; }
.stattile span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--gray); }
.stattile::after { content: "\2192"; position: absolute; right: 20px; top: 20px; color: var(--faint); font-size: 18px; transition: transform 0.15s ease, color 0.15s ease; }
.stattile:hover { border-color: var(--ink); transform: translateY(-3px); }
.stattile:hover::after { transform: translateX(4px); color: var(--sig); }
/* dashboard columns */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 46px; align-items: start; }
.d-news { min-width: 0; }
.d-rail { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.d-card { border: 1px solid var(--line-dark); padding: 18px 20px; }
.d-card.carbon { background: var(--carbon); color: var(--carbon-ink); border-color: var(--carbon); position: relative; }
.d-card.carbon::before { content: ""; position: absolute; top: 0; left: 0; width: 38px; height: 4px; background: var(--sig); }
.d-card.carbon .wlabel { color: var(--sig); }
.d-card.carbon h4 { font-family: var(--disp); font-weight: 800; font-size: 16px; letter-spacing: -0.015em; margin: 9px 0 4px; }
.d-card.carbon p { font-size: 12px; color: rgba(240, 239, 233, 0.6); margin-bottom: 13px; }
.d-card.carbon .cd { gap: 12px; }
.d-card.carbon .cd b { font-size: 27px; }
.d-go { display: inline-block; margin-top: 13px; font-size: 9.5px; letter-spacing: 0.12em; border-bottom: 2px solid var(--sig); color: inherit; }
.d-card .tilemap.mini { max-width: 100%; margin-top: 4px; }
/* november band */
.novband .nov-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.nov-chip { background: rgba(240, 239, 233, 0.05); border: 1px solid rgba(240, 239, 233, 0.16); padding: 16px 10px 13px; text-align: center; transition: border-color 0.15s ease, transform 0.15s ease; }
.nov-chip:hover { border-color: var(--sig); transform: translateY(-3px); }
.nov-chip .needle { width: 62px; }
.nov-chip .n-track { stroke: rgba(240, 239, 233, 0.18); }
.nov-chip .n-pin { stroke: var(--carbon-ink); }
.nov-chip .n-hub { fill: var(--carbon-ink); }
.nov-chip b { display: block; font-family: var(--disp); font-weight: 800; font-size: 13px; letter-spacing: -0.01em; color: var(--carbon-ink); margin: 7px 0 4px; line-height: 1.15; }
.nov-chip span { font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; color: rgba(240, 239, 233, 0.5); }
/* ledger tape */
.tape { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.tapecard { min-width: 252px; flex: 0 0 auto; scroll-snap-align: start; border: 1px solid var(--line-dark); border-top: 4px solid var(--sig); padding: 16px 18px 15px; position: relative; transition: border-color 0.15s ease, transform 0.15s ease; }
.tapecard:hover { border-color: var(--ink); border-top-color: var(--sig); transform: translateY(-3px); }
.tc-num { position: absolute; top: 12px; right: 14px; font-size: 9px; letter-spacing: 0.12em; color: var(--faint); }
.tapecard b { font-family: var(--disp); font-weight: 800; font-size: 23px; letter-spacing: -0.02em; }
.tapecard h4 { font-family: var(--disp); font-weight: 780; font-size: 15px; line-height: 1.2; letter-spacing: -0.015em; margin: 7px 0 9px; min-height: 36px; }
.tapecard > span.mono { font-size: 8.5px; letter-spacing: 0.1em; color: var(--gray); }
/* contact: honeypot, notes, the address card */
.hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; opacity: 0; pointer-events: none; }
.form-note { font-size: 9px; letter-spacing: 0.12em; color: var(--faint); margin-top: 14px; }
.form-fb { border-left-color: var(--sig); }
.addr-card { border: 1px solid var(--line-dark); border-top: 4px solid var(--sig); padding: 26px 28px 24px; max-width: 560px; margin-bottom: 60px; }
.addr-card .wlabel { display: block; margin-bottom: 16px; }
.addr-card img { margin: 2px 0 6px; }
.addr-card .btn { margin-top: 12px; }
.addr-card .form-note { margin: 12px 0 4px; max-width: 46ch; line-height: 1.8; }
/* the news docket */
.dkt { border-top: 1px solid var(--line-dark); }
.dkt-row { display: grid; grid-template-columns: 62px 190px minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 15px 4px; border-bottom: 1px solid var(--line); transition: background 0.12s ease; }
.dkt-row:hover { background: var(--zone); }
.dkt-date { font-size: 10px; letter-spacing: 0.08em; color: var(--faint); }
.dkt-topic { font-size: 9px; letter-spacing: 0.14em; color: var(--sig); }
.dkt-row h4 { font-family: var(--disp); font-size: 17px; font-weight: 780; letter-spacing: -0.018em; line-height: 1.22; }
.dkt-go { font-size: 9px; letter-spacing: 0.12em; color: var(--faint); justify-self: end; }
.dkt-row:hover .dkt-go { color: var(--sig); }
@media (max-width: 720px) {
  .dkt-row { display: block; padding: 14px 2px; }
  .dkt-topic { margin-left: 14px; }
  .dkt-row h4 { margin-top: 7px; }
  .dkt-go { display: none; }
}
@media (max-width: 1020px) {
  .fp-map-grid { grid-template-columns: 1fr; gap: 24px; }
  .dash-grid { grid-template-columns: 1fr; }
  .d-rail { position: static; }
  .novband .nov-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .nov-chip { min-width: 148px; flex: 0 0 auto; scroll-snap-align: start; }
}
@media (max-width: 720px) {
  .fp-feature { grid-template-columns: 1fr; gap: 0; }
  .fp-list { grid-template-columns: 1fr; gap: 0; }
  .statgrid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .lmedia img, .gimg img, .bmedia img, .ocard img { filter: none; }
}

/* ============================================================
   QUOTE-HERO FRONT-PAGE VARIANTS
   Used only by index-quote-1/2/3.html — the standard front page
   (index.html) is untouched. Same tokens, same laws: one accent,
   sentence case, hairlines, mono micro-labels, .rv reveals.
   Quote anatomy everywhere: .q-a (large opening sentence, last
   word emphasized) / .q-b (the 79-word passage, small) /
   .q-c (large closing sentence, three bolds) / .q-attr.
   ============================================================ */

.qhero .q-kick { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qhero .q-kick i { width: 7px; height: 7px; background: var(--sig); flex: 0 0 auto; }
.qhero .q-attr { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--faint); }
.qhero .q-attr b { color: var(--gray); font-weight: 500; }

/* ---------- VARIANT 1 · the expected treatment ---------- */
.qhero-1 { border-bottom: 1px solid var(--line); background: var(--ivory); }
.qhero-1 .q-in { max-width: 920px; margin: 0 auto; padding: 78px 26px 70px; text-align: center; }
.qhero-1 .q-kick { justify-content: center; margin-bottom: 30px; }
.qhero-1 .q-kick::before { content: ""; display: none; }
.qhero-1 .q-a {
  font-family: var(--disp); font-weight: 800; letter-spacing: -0.022em;
  font-size: clamp(28px, 4.4vw, 52px); line-height: 1.08; margin-bottom: 28px;
}
.qhero-1 .q-a .qx { border-bottom: 5px solid var(--sig); padding-bottom: 2px; }
.qhero-1 .q-b { font-size: 16.5px; line-height: 1.78; color: var(--gray); max-width: 62ch; margin: 0 auto 30px; }
.qhero-1 .q-c {
  font-family: var(--disp); font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(21px, 2.9vw, 34px); line-height: 1.2; margin-bottom: 30px;
}
.qhero-1 .q-c b { font-weight: 800; }
.qhero-1 .q-attr { display: inline-flex; align-items: center; gap: 14px; border-top: 1px solid var(--line-dark); padding-top: 18px; }
.qhero-1 .q-attr a { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.qhero-1 .q-attr a:hover { color: var(--sig); border-color: var(--sig); }

/* ---------- VARIANT 2 · the carbon plate ---------- */
.qhero-2 { background: var(--carbon); color: var(--carbon-ink); }
.qhero-2 .q-in {
  max-width: var(--maxw); margin: 0 auto; padding: 72px 26px 76px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(18px, 3vw, 40px); align-items: start;
}
.qhero-2 .q-ghost {
  font-family: var(--disp); font-weight: 800; line-height: 0.62;
  font-size: clamp(160px, 22vw, 320px);
  color: transparent; -webkit-text-stroke: 2px rgba(240, 239, 233, 0.2);
  user-select: none; transform: translateY(-8px);
}
.qhero-2 .q-plate { border-left: 6px solid var(--sig); padding-left: clamp(22px, 3vw, 44px); }
.qhero-2 .q-kick { color: rgba(240, 239, 233, 0.5); margin-bottom: 30px; }
.qhero-2 .q-a {
  font-family: var(--disp); font-weight: 800; letter-spacing: -0.024em;
  font-size: clamp(32px, 5.2vw, 62px); line-height: 1.02; margin-bottom: 32px; color: var(--carbon-ink);
}
.qhero-2 .q-a .qx {
  background: var(--sig); color: var(--carbon); padding: 0 0.16em 0.04em;
  border-bottom: 5px solid var(--carbon-ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.qhero-2 .q-b {
  font-size: 15px; line-height: 1.75; color: rgba(240, 239, 233, 0.72); margin-bottom: 32px; max-width: 68ch;
}
.qhero-2 .q-c {
  font-family: var(--disp); font-weight: 800; letter-spacing: -0.018em;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.1; margin-bottom: 34px; color: var(--carbon-ink); max-width: 26ch;
}
.qhero-2 .q-c b { color: var(--sig); font-weight: 800; }
.qhero-2 .q-attr { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; color: rgba(240, 239, 233, 0.5); }

/* ---------- VARIANT 3 · the galley proof ---------- */
.qhero-3 { background: var(--ivory); border-bottom: 1px solid var(--line); }
.qhero-3 .q-in {
  max-width: var(--maxw); margin: 0 auto; padding: 66px 26px 78px;
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 clamp(26px, 4vw, 60px);
}
.qhero-3 .q-rail {
  border-right: 1px solid var(--line-dark);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--faint);
}
.qhero-3 .q-mark {
  font-family: var(--disp); font-weight: 800; line-height: 0.7;
  font-size: 118px; color: transparent; -webkit-text-stroke: 1.6px var(--line-dark);
  user-select: none; margin-bottom: 26px;
}
.qhero-3 .q-tick { display: flex; align-items: center; gap: 8px; }
.qhero-3 .q-tick::before { content: ""; width: 18px; height: 1px; background: var(--line-dark); }
.qhero-3 .q-tick + .q-tick { margin-top: auto; }
.qhero-3 .q-railword {
  margin-top: auto; writing-mode: vertical-rl; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--line-dark); user-select: none;
}
.qhero-3 .q-spec { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }
.qhero-3 .q-a {
  font-family: var(--disp); font-weight: 800; letter-spacing: -0.028em;
  font-size: clamp(36px, 6vw, 76px); line-height: 0.99; max-width: 17ch; margin-bottom: 30px;
}
.qhero-3 .q-a .qw { display: inline-block; }
.qhero-3 .draw {
  background-image: linear-gradient(var(--sig), var(--sig));
  background-repeat: no-repeat; background-position: 0 94%; background-size: 0% 7px;
  transition: background-size 0.55s cubic-bezier(0.2, 0.6, 0.2, 1) 0.35s;
  padding-bottom: 0.04em;
}
.qhero-3 .rv.in .draw, .qhero-3 .draw.rv.in { background-size: 100% 7px; }
.qhero-3 .q-turn {
  display: flex; justify-content: flex-end; border-top: 1px solid var(--line-dark);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); padding-top: 8px; margin-bottom: 22px;
}
.qhero-3 .q-b {
  border-left: 1px solid var(--line-dark); padding-left: 28px;
  font-size: 15.5px; line-height: 1.8; color: var(--gray); max-width: 58ch; margin-bottom: 34px;
}
.qhero-3 .q-c {
  font-family: var(--disp); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(26px, 3.8vw, 46px); line-height: 1.06; max-width: 24ch; margin-bottom: 26px;
}
.qhero-3 .q-c b { font-weight: 800; }
.qhero-3 .q-base {
  height: 14px; margin-bottom: 26px;
  border-top: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--line-dark) 0 1px, transparent 1px 48px);
}
.qhero-3 .q-attr { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .qhero-2 .q-ghost { display: none; }
  .qhero-2 .q-in { grid-template-columns: 1fr; }
  .qhero-2 .q-b { columns: 1; }
  .qhero-3 .q-in { grid-template-columns: 1fr; }
  .qhero-3 .q-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qhero-3 .draw { background-size: 100% 7px !important; transition: none !important; }
}