/* ============================================================
   VERSION B — WHITESPACE / DENSITY EXPLORATIONS (2026-07-13)
   Matthew: "Too much whitespace between the different content
   sections on each page … lots of scrolling and loss of signal."

   Where the scroll goes on master v1.2:
   - every hero fills the viewport (min-height 100svh − 70px)
     with a 70–140px dotted cue, so page content starts below
     the fold on every page;
   - .section carries 4.5–8.5rem vertical padding (back-to-back
     sections stack 9–17rem of void);
   - section-heads add 3–5rem, overview/feature blocks 3.5–6.5rem.

   Four treatments, switchable via the floating pill
   (js/density.js). html[data-den="0"] (or absent) = master.
   They are CUMULATIVE — each option keeps the previous ones and
   turns the dial further, so the pick is "how far to go":

   1 · TRIM   — same design, ~35% less air between sections.
                Heroes untouched.
   2 · FOLD   — + heroes shrink to content height (smaller
                figures, short cue) so the next section's
                headline is visible at the fold on every page.
   3 · RULED  — + tighter still; section seams get the dotted
                pipe-line rule so the eye meets a delimiter,
                not a void.
   4 · DENSE  — + maximum compression: minimal heroes, halved
                paddings, trimmed footer. The far end of the dial.
   ============================================================ */

/* ============================================================
   OPTION 1+ — TRIM: ~35% off the vertical rhythm (applies 1–4)
   ============================================================ */
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .section { padding-top: clamp(3rem, 6.5vh, 5.5rem); padding-bottom: clamp(3rem, 6.5vh, 5.5rem); }
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .section-head { margin-bottom: clamp(2rem, 4vh, 3.25rem); }
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .overview { padding-top: clamp(2.5rem, 5.5vh, 4.5rem); padding-bottom: clamp(2.5rem, 5.5vh, 4.5rem); }
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .feature-block { padding-top: clamp(2.5rem, 5.5vh, 4.5rem); padding-bottom: clamp(2.5rem, 5.5vh, 4.5rem); }
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .engine-detail { padding-top: clamp(2rem, 4.5vh, 3.5rem); padding-bottom: clamp(2rem, 4.5vh, 3.5rem); }
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .engine-nav { margin-bottom: clamp(2rem, 4vh, 3.25rem); }
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .feature-head { margin-bottom: 1.8rem; }
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .feature-grid { margin-top: 1.8rem; }
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .universe-core-wrap { padding-top: clamp(2rem, 4vw, 3rem); }
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .signals-seal { margin-top: clamp(3rem, 6vw, 4rem); }
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .site-foot { padding-top: clamp(2.25rem, 4.5vh, 3.25rem); padding-bottom: 1.8rem; gap: 2rem; }
html:is([data-den="1"], [data-den="2"], [data-den="3"], [data-den="4"]) .manifesto { gap: 1.6rem; }

/* Option 1 keeps the full-height hero — label the cue so the
   fold reads as an invitation, not an ending */
html[data-den="1"] .hero > .scroll-cue::before {
  content: 'SCROLL';
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.01rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--cream-45);
  white-space: nowrap;
  transition: color 0.25s;
}
html[data-den="1"] .hero > .scroll-cue {
  cursor: pointer;
  width: 2px;
  background-image: linear-gradient(to bottom, var(--cream-45) 45%, transparent 45%);
  background-size: 2px 9px;
}
html[data-den="1"] .hero > .scroll-cue::after {
  width: 11px;
  height: 11px;
  left: calc(50% - 5.5px);
  bottom: -4px;
}
html[data-den="1"] .hero > .scroll-cue:hover::before,
html[data-den="1"] .hero > .scroll-cue:focus-visible::before { color: var(--cream); }
html[data-den="1"] .hero > .scroll-cue:focus-visible { outline: none; }

/* ---- Trim: SCROLL landing frames (Chris's reference shots, 2026-07-13) ----
   The cue anchors the next section flush under the sticky header, and each
   page's first content section is compressed so the reference frame fits. */

/* land sections below the 70px sticky header */
html[data-den="1"] main section { scroll-margin-top: 70px; }
html[data-den="1"] :is(#sources, #transformation, #signals) { scroll-margin-top: 92px; }
html[data-den="1"] :is(#magellan, #raven, #flock) { scroll-margin-top: 90px; }
html[data-den="1"] :is(#sectors-analysts, #business, #brand-comms, #customer) { scroll-margin-top: 84px; }

/* Homepage: animated hero engraving (video from Bozzy Pipe Animated.pptx, used as-is) */

/* Top nav links +25% */
html[data-den="1"] .site-nav a { font-size: 0.98rem; }

/* Hero type: accents red/bold upright; hero subs italic */
html[data-den="1"] .hero em.accent { font-style: normal; }
html[data-den="1"] .hero .sub { font-style: italic; }

/* Homepage: "Our Ecosystem" sub on one line; triptych + full Magellan panel in frame */
html[data-den="1"] #ecosystem .section-head { max-width: none; margin-bottom: 1.9rem; }
html[data-den="1"] #ecosystem .sub { max-width: none; }
html[data-den="1"] .eco-item img.ring { width: clamp(120px, 12vw, 140px); }
html[data-den="1"] .eco-line::before { top: calc(clamp(120px, 12vw, 140px) / 2); }
html[data-den="1"] .eco-item { gap: 0.7rem; }
html[data-den="1"] .overview { padding-top: clamp(1.75rem, 3.5vh, 2.5rem); padding-bottom: clamp(1.75rem, 3.5vh, 2.5rem); }
html[data-den="1"] .overview { grid-template-columns: minmax(240px, 400px) 1fr; }
html[data-den="1"] .overview.flip { grid-template-columns: 1fr minmax(240px, 400px); }
html[data-den="1"] section[aria-label="Ecosystem overviews"] .wrap { max-width: 1360px; }
html[data-den="1"] .overview-body { gap: 1.1rem; }
html[data-den="1"] .overview-body h3 { font-size: clamp(2rem, 3.1vw, 2.9rem); }
html[data-den="1"] .overview-body p { max-width: 44em; font-size: 1.45rem; }
html[data-den="1"] .overview-body .eyebrow { font-size: 1rem; }
html[data-den="1"] .overview-media img { max-width: 330px; }

/* Magellan engine rows: italic supporting copy */
html[data-den="1"] .item-row p { font-style: italic; }

/* Magellan: breathing room under the one-line headline; seal clear of the chips */
html[data-den="1"] #data-signals .section-head { margin-bottom: clamp(2.75rem, 5.5vh, 3.75rem); }
html[data-den="1"] .universe-core-wrap { padding-top: clamp(4rem, 6vw, 5rem); }
html[data-den="1"] .signals-seal { margin-top: clamp(8rem, 13vh, 9rem); }

/* Raven: compact rail (ring un-clipped), one-line block headers,
   2-line intro, video sized by viewport height — full size on big screens */
html[data-den="1"] #props { padding-top: 1rem !important; padding-bottom: 0.25rem; }
html[data-den="1"] .props-rail {
  --pico: clamp(60px, 5.6vw, 78px);
  --pring: clamp(104px, 9.6vw, 136px);
  padding-bottom: 1rem;
}
html[data-den="1"] .props-rail .prop-center img { width: var(--pring); }
html[data-den="1"] .props-rail .prop-center { top: calc(var(--pico) / 2 - var(--pring) / 2); }
html[data-den="1"] .prop span { font-size: 0.86rem; }
html[data-den="1"] section[aria-label="Raven capabilities"] .feature-block:first-of-type { padding-top: 0.75rem; }
html[data-den="1"] .feature-head { display: block; max-width: none; margin-bottom: 0.9rem; }
html[data-den="1"] .feature-head .eyebrow {
  display: inline;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cream);
  margin-right: 0.2em;
}
html[data-den="1"] .feature-head .eyebrow::after { content: ':'; }
html[data-den="1"] .feature-head h3 { display: inline; font-style: italic; }
html[data-den="1"] .feature-head p { max-width: none; margin-top: 0.7rem; line-height: 1.5; }
html[data-den="1"] section[aria-label="Raven capabilities"] .feature-media {
  max-width: min(100%, calc((100svh - 395px) * 1.85));
  margin-inline: auto;
}

/* Flock: numbers inline with titles, uniform two-line copy, video sized by height */
html[data-den="1"] #builder .wrap { max-width: 1400px; }
html[data-den="1"] #builder .section-head { margin-bottom: 1rem; }
html[data-den="1"] #builder .builder-grid { margin-bottom: 1.1rem !important; }
html[data-den="1"] .builder-el { padding-top: 1rem; }
html[data-den="1"] .builder-el .n { display: inline; font-size: 1.3rem; line-height: 1; margin-right: 0.45em; }
html[data-den="1"] .builder-el h4 { display: inline; font-size: 1.3rem; }
html[data-den="1"] .builder-el p { margin-top: 0.5rem; font-size: 1.08rem; }
html[data-den="1"] #builder .feature-media {
  max-width: min(1150px, calc((100svh - 345px) * 1.9));
  margin-inline: auto;
}

/* About: kicker "curious" white/bold (red too hard to read at this size) */
html[data-den="1"] .manifesto .kicker .accent { color: var(--cream); font-weight: 600; }

/* About: wider manifesto measure; founders pulled up into the landing frame */
html[data-den="1"] .manifesto { max-width: 60em; gap: 1.4rem; }
html[data-den="1"] .manifesto p { text-wrap: balance; }
html[data-den="1"] #story { padding-bottom: 1.75rem; }
html[data-den="1"] #founders { padding-top: 1.75rem; }

/* Partner: red button CTAs */
html[data-den="1"] .partner-panel .textlink {
  background: var(--crimson);
  color: var(--cream);
  border-bottom: none;
  padding: 0.85rem 2rem;
  font-weight: 700;
  transition: background 0.25s, color 0.25s;
}
html[data-den="1"] .partner-panel .textlink:hover { background: var(--cream); color: var(--ink); }

/* ---- Trim on short (laptop) viewports: index + magellan frames fit the fold ----
   Big monitors (>850px tall) keep the roomier layout above. */
@media (max-height: 850px) {
  /* Homepage: full Magellan panel inside the fold */
  html[data-den="1"] #ecosystem .section-head { margin-bottom: 1.45rem; }
  html[data-den="1"] .eco-item img.ring { width: 116px; }
  html[data-den="1"] .eco-line::before { top: 58px; }
  html[data-den="1"] .eco-item { gap: 0.45rem; }
  html[data-den="1"] .eco-item .eco-name { font-size: 1.15rem; }
  html[data-den="1"] .eco-item .eco-role { font-size: 0.88rem; }
  html[data-den="1"] .overview { padding-top: 1.4rem; padding-bottom: 1.4rem; }
  html[data-den="1"] .overview-body { gap: 0.7rem; }
  html[data-den="1"] .overview-body h3 { font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
  html[data-den="1"] .overview-body p { font-size: 1.3rem; }
  html[data-den="1"] .overview-media img { max-width: 280px; }

  /* Magellan: universe scales by viewport height so graphic + seal fit the fold */
  html[data-den="1"] #data-signals .section-head { margin-bottom: 2.25rem; }
  html[data-den="1"] .universe-core { max-width: min(460px, calc(100svh - 425px)); }
  html[data-den="1"] .universe-core-wrap { padding-top: 4rem; }
  html[data-den="1"] .signals-seal { margin-top: 6.25rem; }
  html[data-den="1"] .stat-chip { width: 88px; height: 88px; }
  html[data-den="1"] .domain img { width: clamp(64px, 6.5vw, 88px); height: clamp(64px, 6.5vw, 88px); }
  html[data-den="1"] .domain-col { gap: clamp(1.25rem, 3.5vh, 2.4rem); }
}

/* ---- TRIM V2 (pill option 1b): side-by-side media layouts + expandable videos ---- */

/* Raven V2: smaller video left, the three capabilities stacked to its right */
html[data-denv="2"] section[aria-label="Raven capabilities"] .feature-block {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1.2fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 1.1rem;
  align-items: center;
}
html[data-denv="2"] section[aria-label="Raven capabilities"] .feature-head { grid-column: 1 / -1; margin-bottom: 0; }
html[data-denv="2"] section[aria-label="Raven capabilities"] .feature-media {
  grid-column: 1;
  margin: 0;
  justify-self: center;
  max-width: min(100%, calc((100svh - 385px) * 1.85));
}
html[data-denv="2"] section[aria-label="Raven capabilities"] .feature-grid {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: clamp(2.2rem, 5.5vh, 4rem);
  margin-top: 0;
}
html[data-denv="2"] section[aria-label="Raven capabilities"] .feature {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 1.1rem;
  row-gap: 0.4rem;
  align-items: center;
}
html[data-denv="2"] section[aria-label="Raven capabilities"] .feature img { width: 72px; height: 72px; grid-row: 1 / 3; margin: 0; }
html[data-denv="2"] section[aria-label="Raven capabilities"] .feature h4 { font-size: 1.34rem; align-self: end; }
html[data-denv="2"] section[aria-label="Raven capabilities"] .feature p {
  grid-column: 2;
  align-self: start;
  max-width: none;
  font-size: 1.1rem;
  font-style: italic;
}

/* Flock V2: the four components stacked left, smaller video right */
html[data-denv="2"] #builder .wrap {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(0, 2.3fr);
  column-gap: clamp(1.8rem, 3vw, 3rem);
  align-items: center;
}
html[data-denv="2"] #builder .section-head { grid-column: 1 / -1; }
html[data-denv="2"] #builder .builder-grid {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  margin: 0 !important;
}
html[data-denv="2"] #builder { padding-bottom: clamp(3.5rem, 7vh, 5.5rem); }
html[data-denv="2"] #builder .builder-el {
  padding-top: 0.6rem;
  display: grid;
  grid-template-columns: 66px 1fr;
  column-gap: 1rem;
  row-gap: 0.2rem;
  align-items: start;
}
html[data-denv="2"] #builder .builder-el img.bicon { display: block; width: 66px; height: 66px; grid-row: 1 / 3; margin-top: 0.1rem; }
html[data-denv="2"] #builder .builder-el .n { display: none; }
html[data-denv="2"] #builder .builder-el h4 { font-size: 1.44rem; }
html[data-denv="2"] #builder .builder-el p { font-size: 1.14rem; margin-top: 0.25rem; grid-column: 2; font-style: italic; }
html[data-denv="2"] #builder .feature-media {
  grid-column: 2;
  margin: 0;
  justify-self: center;
  max-width: min(100%, calc((100svh - 240px) * 1.9));
}

#builder .builder-el img.bicon { display: none; }

/* Expandable videos (V2): affordance + lightbox */
html[data-denv="2"] :is(section[aria-label="Raven capabilities"], #builder) .feature-media {
  cursor: zoom-in;
  position: relative;
}
html[data-denv="2"] :is(section[aria-label="Raven capabilities"], #builder) .feature-media::after {
  content: '\2922  EXPAND';
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: rgba(251, 248, 245, 0.75);
  background: rgba(0, 0, 0, 0.6);
  padding: 0.32rem 0.55rem;
  border-radius: 3px;
  pointer-events: none;
}
.vid-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.vid-lightbox video {
  max-width: 94vw;
  max-height: 90vh;
  width: auto;
  height: auto;
}

@media (max-width: 960px) {
  html[data-denv="2"] section[aria-label="Raven capabilities"] .feature-block,
  html[data-denv="2"] #builder .wrap { display: block; }
}

/* ============================================================
   OPTION 2+ — FOLD: content-height heroes (applies 2–4)
   ============================================================ */
html:is([data-den="2"], [data-den="3"], [data-den="4"]) .hero {
  min-height: 0;
  padding: clamp(2.5rem, 5vh, 3.5rem) var(--gutter) 0.75rem;
  gap: 1.6rem;
}
html:is([data-den="2"], [data-den="3"], [data-den="4"]) .hero > .scroll-cue { height: clamp(36px, 6vh, 60px); }
html:is([data-den="2"], [data-den="3"], [data-den="4"]) .hero-logo { height: clamp(110px, 14vh, 160px); }
html:is([data-den="2"], [data-den="3"], [data-den="4"]) .hero--lg .hero-figure { height: clamp(170px, 24vh, 270px); }
html:is([data-den="2"], [data-den="3"], [data-den="4"]) .hero--split .hero-figure { height: clamp(220px, 32vh, 340px); }
html:is([data-den="2"], [data-den="3"], [data-den="4"]) .hero + .section,
html:is([data-den="2"], [data-den="3"], [data-den="4"]) .hero + section { padding-top: clamp(1.25rem, 2.5vh, 2rem) !important; }
@media (max-width: 960px) {
  html:is([data-den="2"], [data-den="3"], [data-den="4"]) .hero--lg .hero-figure { height: clamp(140px, 20vh, 210px); }
  html:is([data-den="2"], [data-den="3"], [data-den="4"]) .hero--split .hero-figure { height: clamp(150px, 22vh, 220px); }
}

/* ============================================================
   OPTION 3+ — RULED: tighter + dotted seams (applies 3–4)
   ============================================================ */
html:is([data-den="3"], [data-den="4"]) .section { padding-top: clamp(2.25rem, 4.5vh, 3.5rem); padding-bottom: clamp(2.25rem, 4.5vh, 3.5rem); }
html:is([data-den="3"], [data-den="4"]) .section-head { margin-bottom: clamp(1.6rem, 3vh, 2.25rem); }
html:is([data-den="3"], [data-den="4"]) .overview { padding-top: clamp(2rem, 4vh, 3rem); padding-bottom: clamp(2rem, 4vh, 3rem); }
html:is([data-den="3"], [data-den="4"]) .feature-block { padding-top: clamp(2rem, 4vh, 3rem); padding-bottom: clamp(2rem, 4vh, 3rem); }
html:is([data-den="3"], [data-den="4"]) .engine-detail { padding-top: clamp(1.75rem, 3.5vh, 2.75rem); padding-bottom: clamp(1.75rem, 3.5vh, 2.75rem); }
html:is([data-den="3"], [data-den="4"]) .signals-seal { margin-top: clamp(2.25rem, 4.5vw, 3rem); }
html:is([data-den="3"], [data-den="4"]) :is(#contact, #partnership, #demo, #custom) { padding-top: clamp(1.5rem, 3vh, 2.25rem); }
html:is([data-den="3"], [data-den="4"]) .cta-cue { height: clamp(40px, 5vh, 60px); }
/* dotted pipe-line rule at each section seam (not before CTAs — they have the cue) */
html:is([data-den="3"], [data-den="4"]) main .section + .section:not(#contact):not(#partnership):not(#demo):not(#custom)::before {
  content: '';
  display: block;
  width: min(300px, 44%);
  height: 3px;
  margin: 0 auto clamp(2rem, 4vh, 3rem);
  background-image: radial-gradient(circle, var(--cream-45) 1.2px, transparent 1.4px);
  background-size: 9px 3px;
  background-repeat: repeat-x;
  background-position: center;
}

/* ============================================================
   OPTION 4 — DENSE: maximum compression
   ============================================================ */
html[data-den="4"] .section { padding-top: clamp(1.75rem, 3.5vh, 2.5rem); padding-bottom: clamp(1.75rem, 3.5vh, 2.5rem); }
html[data-den="4"] .section-head { margin-bottom: 1.4rem; }
html[data-den="4"] .overview { padding-top: clamp(1.5rem, 3vh, 2.25rem); padding-bottom: clamp(1.5rem, 3vh, 2.25rem); }
html[data-den="4"] .feature-block { padding-top: clamp(1.5rem, 3vh, 2.25rem); padding-bottom: clamp(1.5rem, 3vh, 2.25rem); }
html[data-den="4"] .engine-detail { padding-top: 1.5rem; padding-bottom: 1.5rem; }
html[data-den="4"] .engine-nav { margin-bottom: 1.6rem; }
html[data-den="4"] .engine-nav a.plate { min-height: 160px; }
html[data-den="4"] .feature-head { margin-bottom: 1.2rem; }
html[data-den="4"] .feature-grid { margin-top: 1.4rem; }
html[data-den="4"] .item-rows { gap: 1.1rem; }
html[data-den="4"] .hero { padding-top: clamp(1.75rem, 3.5vh, 2.5rem); gap: 1.2rem; }
html[data-den="4"] .hero > .scroll-cue { height: 28px; }
html[data-den="4"] .hero-logo { height: clamp(90px, 11vh, 130px); }
html[data-den="4"] .hero--lg .hero-figure { height: clamp(150px, 20vh, 220px); }
html[data-den="4"] .hero--split .hero-figure { height: clamp(180px, 26vh, 280px); }
html[data-den="4"] main .section + .section:not(#contact):not(#partnership):not(#demo):not(#custom)::before { margin-bottom: 1.5rem; }
html[data-den="4"] .universe-core-wrap { padding-top: 1.25rem; }
html[data-den="4"] .signals-seal { margin-top: 2rem; }
html[data-den="4"] .cta-cue { height: 32px; }
html[data-den="4"] .site-foot { padding-top: 1.75rem; padding-bottom: 1.4rem; gap: 1.4rem; }
html[data-den="4"] .founders { row-gap: 2rem; }
html[data-den="4"] .manifesto { gap: 1.3rem; }

/* ---------- Switcher pill ---------- */
.den-switch {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.88);
  border: 1px solid rgba(251, 248, 245, 0.25);
  border-radius: 999px;
  font-family: var(--serif);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.den-switch .den-label {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 248, 245, 0.6);
  padding: 0 6px 0 8px;
}
.den-switch button {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(251, 248, 245, 0.65);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.den-switch button:hover { color: #FBF8F5; }
.den-switch button[aria-pressed="true"] {
  color: #FBF8F5;
  border-color: var(--crimson);
  background: rgba(175, 16, 28, 0.25);
}
@media (max-width: 700px) {
  .den-switch { flex-wrap: wrap; border-radius: 18px; max-width: calc(100vw - 28px); }
}

/* ---- Responsive QA round (2026-07-15, branch 09) ----
   Stat chips scale with the shrinking universe core on phones; the
   88px laptop size (max-height:850 rule above) swamped a ~325px disk. */
@media (max-width: 600px) {
  html[data-den="1"] .stat-chip { width: clamp(56px, 17vw, 72px); height: clamp(56px, 17vw, 72px); }
  html[data-den="1"] .stat-chip b { font-size: 0.92rem; }
  html[data-den="1"] .stat-chip span { font-size: 0.48rem; letter-spacing: 0.14em; }
}

/* Overview panels stack ≤960px: the den=1 two-column rule above outranks
   style.css's mobile 1fr rule (attribute selector specificity), so the
   homepage overview text column was pushed off-viewport on phones. */
@media (max-width: 960px) {
  html[data-den="1"] .overview,
  html[data-den="1"] .overview.flip { grid-template-columns: 1fr; }
}