/* ================================================================
   Innova Polish · Version A — "Faithful Newsprint"
   Layer ON TOP of innova.css. Does not touch tokens; restrains red,
   sharpens typography, fixes drop cap, differentiates map dots, and
   tightens editorial rhythm.
   ================================================================ */

/* ---------- 1. RED RESTRAINT ------------------------------------ */
/* Spec: red reserved for <a>, <em> in headlines, rule dividers.
   Legacy aliases were remapping --brass* to --red — so anything
   calling --brass-deep / --brass-soft picks up red incorrectly.
   Neutralize them back to ink/muted; keep red only for headline <em>
   and real accents. */
:root{
  --brass:      var(--ink);
  --brass-deep: var(--ink);
  --brass-soft: var(--muted);
  --brass-wash: rgba(10,10,10,0.04);
}

/* Kickers: ink, not red */
.kicker{ color: var(--ink); }
.kicker::before{ background: var(--ink); }
.section.bg-ink .kicker,
.section.bg-ink .kicker::before{ color: var(--on-dark); background: var(--on-dark); }

/* Headline <em> KEEPS red (the one italic accent moment) */
.display-1 em,
.display-2 em,
.hero h1 em,
.home-hero h1 em,
.article-hero h1 em,
.area-hero h1 em{ color: var(--red); font-style: italic; font-weight: 400; }

/* Topic cards: pull red out of eyebrows + hovers.
   Hover is a single signal: left border bar in ink, nothing else. */
.topic-cat{ color: var(--ink); }
.topic-cat .num{ color: var(--muted); }
.topic{
  transition: background .18s var(--ease-out), box-shadow .18s var(--ease-out);
  border-left: 3px solid transparent;
  padding-left: 25px;   /* 28 - 3 to compensate */
}
.topic:hover{
  background: var(--paper);
  border-left-color: var(--ink);
  box-shadow: none;
}
.topic:hover .topic-read{ color: var(--ink); }
.topic:hover .topic-read .arrow,
.topic:hover .topic-read .arrow::after{
  background: var(--ink); border-color: var(--ink);
}

/* Drop cap: ink, not red, and properly-tuned metrics */
.prose > p:first-of-type:not(.no-cap)::first-letter{
  color: var(--ink);
  font-weight: 700;
  font-size: 5.6em;
  line-height: 0.82;
  padding: 4px 12px 0 0;
  margin-top: 6px;
  margin-left: -3px;   /* optical kern */
}

/* End mark stays red — that's a legitimate emphasis moment */
.prose.with-end-mark > *:last-child::after{ color: var(--red); }

/* ---------- 2. TYPOGRAPHY HIERARCHY ----------------------------- */
/* Widen the gap between hero and section h2s so the page crescendos */
.hero h1{
  font-size: clamp(48px, 6vw, 82px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.028em !important;
}
.home-hero h1{
  font-size: clamp(52px, 6.4vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.display-1{
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.display-2{
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.018em;
}
.display-3{
  font-size: 24px;
  line-height: 1.14;
  letter-spacing: -0.012em;
  font-weight: 500;
}

/* Lede breathing room */
.lede{
  font-size: 18.5px;
  line-height: 1.58;
  color: var(--muted);
  max-width: 56ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

/* Kicker spacing: tight above, looser below */
.sec-head{ margin-bottom: 56px; gap: 56px; }
.sec-head .kicker{ margin-bottom: 18px; }

/* Section rhythm: alternating padding feels composed, not uniform */
.section{ padding: 112px 0; }
.section.tight{ padding: 72px 0; }
.section + .section.bg-paper,
.section.bg-paper + .section{ padding-top: 88px; }

/* Body prose: Lora wants a touch more size + leading */
.prose{ font-size: 18px; line-height: 1.72; }
.prose p{ margin: 0 0 1.4em; }

/* ---------- 3. DECORATIVE ELEMENTS ------------------------------ */
/* Map dots: real weight hierarchy by community tier.
   Tier 1 (major: Summerlin, Henderson, Anthem, Green Valley, Lake LV):
     r=7 + subtle outer ring on hover
   Tier 2 (mid): r=5 (default)
   Tier 3 (minor): r=3.5 */
.map-dot circle{ transition: r .15s var(--ease-out), stroke-opacity .15s; }
.map-dot[data-tier="1"] circle{ r: 7; }
.map-dot[data-tier="3"] circle{ r: 3.5; }
.map-dot:hover{ transform: scale(1.15); }   /* softer than 1.4 */
.map-dot:hover circle{
  stroke: currentColor; stroke-width: 1.4; stroke-opacity: 0.35;
}
.map-dot.is-active circle{
  stroke: var(--ink); stroke-width: 2; stroke-opacity: 1;
}

/* Map silhouette: pull opacity down so the dots breathe */
.map-svg path[fill*="url(#hatch)"],
.map-svg > g > path:first-child{ opacity: 0.42; }

/* Map side-head pill: ink on paper, not red — red is reserved */
.map-side-head .pill{
  background: var(--ink);
  color: var(--paper);
  border-radius: 0;   /* the one pill that shouldn't be a pill */
  letter-spacing: 0.16em;
  padding: 5px 10px;
}

/* ---------- 4. DETAILS THAT SIGNAL "SHIPPED" -------------------- */
/* Focus rings — consistent, visible, on everything */
:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 0;
}
.section.bg-ink :focus-visible,
.topstrip :focus-visible,
.lead-section :focus-visible{ outline-color: var(--paper); }

/* Button transitions: tight and ink-confident, no red flash on primary */
.btn{ transition: background .14s var(--ease-out), color .14s var(--ease-out), border-color .14s var(--ease-out); }
.btn-primary:hover{ background: var(--ink); color: var(--paper); filter: brightness(1.15); }

/* FAQ accordion marker — custom chevron, no native triangle */
details summary{ list-style: none; }
details summary::-webkit-details-marker{ display: none; }
.faqs details summary::after{
  content: "+";
  font-family: var(--mono);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  transition: transform .18s var(--ease-out);
  line-height: 1;
  margin-left: auto;
}
.faqs details[open] summary::after{ content: "−"; }

/* Reading progress — 2px red, butter-smooth transform-based */
.reading-progress{
  height: 2px;
  background: var(--red);
  transform-origin: left center;
  will-change: transform;
}

/* Chip (suggestion pills on ask-search): ink hover, not red */
.chip:hover{ color: var(--ink); border-color: var(--ink); }

/* Pullquote: true editorial treatment with hairline rules */
.pullquote{
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 28px 0;
  margin: 40px 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  text-align: left;
  max-width: none;
  text-wrap: balance;
}

/* Smart ordinal for the § kicker symbol — always same height as text */
.kicker{ font-variant-numeric: lining-nums tabular-nums; }

/* Marginalia: real editorial sidebar treatment */
@media (min-width: 1120px){
  .marginalia{
    float: right;
    clear: right;
    width: 220px;
    margin: 0 -260px 20px 32px;
    padding-left: 18px;
    border-left: 2px solid var(--ink);
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--muted);
  }
  .marginalia .note-label{
    display: block;
    font-family: var(--mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 8px;
  }
}

/* Topic feature card: restrain the contrast shift */
.topic.feature h3{ font-size: clamp(24px, 2.4vw, 32px); }

/* Hero lead form: brass soft accent bar at top — switch to ink */
.hero-lead::before{ background: var(--ink) !important; }
.hero-lead h3 em{ color: var(--red); font-style: italic; }

/* ---------- 5. THEME VARIANT SWITCHER (footer) ------------------ */
/* A small segmented control that lives next to the Light/Auto/Dark
   pill so the team can preview both editorial variants in one shot.
   Squared — the "no rounded corners" rule applies to any new UI. */
.theme-variant-toggle{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(245,241,228,0.22);
  border-radius: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 18px;
}
.theme-variant-toggle button{
  padding: 4px 10px;
  border: 0;
  border-radius: 0;
  color: rgba(244,239,230,0.45);
  background: transparent;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color .18s var(--ease-out), background .18s var(--ease-out);
}
.theme-variant-toggle button[aria-pressed="true"],
.theme-variant-toggle button.is-on{
  background: var(--paper);
  color: var(--ink);
}
.theme-variant-toggle button:hover:not([aria-pressed="true"]){
  color: rgba(244,239,230,0.85);
}

/* ---------- 6. VIDEO FACADE + NEWS-GRID VIDEO TILES ------------ */
/* Hero right column becomes a click-to-play poster. The facade is
   a real <button> for keyboard + SR access; the iframe is only
   mounted on click (no third-party JS on initial page load). */
.video-facade{
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0; margin: 0;
  background: var(--ink);
  cursor: pointer;
  overflow: hidden;
  color: var(--paper);
  font: inherit;
}
.video-facade img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease-out), opacity .2s var(--ease-out);
}
.video-facade:hover img,
.video-facade:focus-visible img{ transform: scale(1.02); opacity: .9; }
.video-facade .play{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--paper);
  padding: 10px 18px;
  border-radius: 0;
  white-space: nowrap;
}
.video-facade:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.home-hero-visual.home-hero-video .label{
  z-index: 2;
  color: var(--paper);
  mix-blend-mode: difference;
}
.home-hero-visual.home-hero-video .est{
  z-index: 2;
  color: var(--paper);
  border-top-color: rgba(245,241,228,0.35);
  mix-blend-mode: difference;
}

/* Iframe wrapper used after the facade has been activated */
.video-frame{
  position: relative;
  width: 100%; height: 100%;
  background: var(--ink);
}

/* News grid: asymmetric 2+3 editorial layout for TV segments.
   Kept as a modifier so the default 4-col .news-grid still works
   wherever it's used today. */
.news-grid.asymmetric{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px 20px;
}
.news-grid.asymmetric .news:nth-child(-n+2){ grid-column: span 3; }
.news-grid.asymmetric .news:nth-child(n+3){ grid-column: span 2; }
@media (max-width: 960px){
  .news-grid.asymmetric{ grid-template-columns: repeat(2, 1fr); }
  .news-grid.asymmetric .news{ grid-column: auto !important; }
}
@media (max-width: 560px){
  .news-grid.asymmetric{ grid-template-columns: 1fr; }
}

/* News video tile: thumbnail-first, Newsprint-disciplined.
   No card background, no lift, no red hover — one editorial signal
   only: the h4 gets a hairline underline. */
.news.video{
  padding: 0;
  background: transparent;
  border: 0;
  gap: 10px;
}
.news.video:hover{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.news.video .news-thumb{
  position: relative;
  aspect-ratio: 16/9;
  background: var(--ink);
  overflow: hidden;
  margin: 0 0 8px;
  border: 1px solid var(--ink);
}
.news.video .news-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
.news.video:hover .news-thumb img{ transform: scale(1.03); opacity: .95; }
.news.video .news-thumb .play{
  position: absolute;
  left: 14px; bottom: 14px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--paper);
  padding-left: 2px; /* optical center for the ▸ glyph */
}
.news.video .publication{ color: var(--ink); }
.news.video :is(h3, h4){ margin: 0; }
.news.video :is(h3, h4) em{ color: var(--red); font-style: italic; }
.news.video:hover :is(h3, h4){
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.news.video .date{ color: var(--muted); }