/* Corrum "The Skyline" r4. Layout/spacing/type/colour -> Tailwind utilities
   (tw-utilities.css, var(--*)-only; @layer base has the tag reset). Left
   here: pseudo-els + keyframes, clamp() type, checkbox nav, nth-child. */

.on-dark .eyebrow, .on-photo .eyebrow { color: var(--semantic-inverse-ink); }

/* fade-media: 4 containers x 2 imgs each — one rule beats repeating on all 8 */
.fade-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* fluid clamp() type, with the line-height each was tuned against */
.section-head h2 { font-size: clamp(var(--fs-3), 3.6vw, var(--fs-4)); line-height: var(--line-height-display); }
.on-dark .section-head h2 { color: var(--semantic-inverse-ink); }
.hero__statement { font-size: clamp(var(--fs-2), 2.4vw + 0.8rem, 30px); line-height: 1.42; }
.story__lead { font-size: clamp(var(--fs-2), 2.2vw + 0.6rem, var(--fs-3)); line-height: 1.3; }
.stat__value { line-height: 1.05; }
.stat__value:not(.stat__value--tight) { font-size: clamp(var(--fs-3), 3vw, var(--fs-4)); }
.quote__text { font-size: clamp(var(--fs-3), 3.4vw, var(--fs-4)); line-height: 1.28; }
.closing h2 { font-size: clamp(var(--fs-3), 4vw, var(--fs-4)); line-height: var(--line-height-display); }

/* nav dropdown: native [open] + webkit pseudo-el */
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown[open] .nav-dropdown__caret { transform: rotate(180deg); }

/* header solid-on-scroll: JS class */
.site-header, .site-header.is-scrolled { background: var(--color-header-scrolled-bg); border-bottom-color: var(--semantic-rule); }
.site-header .site-header__inner, .site-header.is-scrolled .site-header__inner { color: var(--semantic-ink); }

/* mobile nav checkbox-hack: sibling->nested-descendant, peer-* can't reach */
@media (max-width: 860px) {
  .nav__list { display: none; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .nav-toggle-input:checked ~ .site-header__inner .nav__list {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: sticky; top: 64px; left: 0; right: 0;
    background: var(--color-neutral-0); color: var(--semantic-ink);
    padding: var(--space-4) var(--container-pad) var(--space-6);
    border-bottom: 1px solid var(--semantic-rule);
  }
  .nav-toggle-input:checked ~ .site-header__inner .nav__list .nav__link,
  .nav-toggle-input:checked ~ .site-header__inner .nav__list .nav-dropdown > summary { width: 100%; padding-block: var(--space-3); }
  .nav-toggle-input:checked ~ .site-header__inner .nav-dropdown__panel {
    position: static; transform: none; border: 0; padding-left: var(--space-3);
  }
  .nav-toggle-input:checked ~ .site-header__inner { color: var(--semantic-ink); }
  .nav-toggle-input:checked ~ .site-header { background: var(--color-neutral-0); }
}

/* hero: bleed-under-header negative margin + curtain pseudo-el */
.hero__band-wrap {
  position: relative;
  margin-left: calc(var(--container-pad) * -1);
  margin-top: calc(var(--space-8) * -1);
  width: min(760px, 88vw);
}
.hero__band-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--color-plum-band); /* translucent — never solid */
  clip-path: inset(0 0 100% 0);
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__band-wrap::before { animation: curtain-draw var(--motion-duration-curtain) var(--motion-easing-entrance) forwards; }
}
@keyframes curtain-draw { to { clip-path: inset(0 0 0% 0); } }
html.capture-mode .hero__band-wrap::before { animation: none; clip-path: inset(0 0 0% 0); }

.hero__scrim { background: linear-gradient(190deg, var(--hero-scrim-near) 0%, var(--hero-scrim-mid) 58%, var(--hero-scrim-far) 100%); }
.hero__panel {
  position: relative; z-index: 2; width: 100%;
  padding: var(--space-6) var(--space-6) var(--space-5) calc(var(--container-pad) + var(--space-2));
}

@media (max-width: 700px) {
  .hero { min-height: 100vh; }
  .hero__content { padding-block-start: calc(var(--space-8) + var(--space-4)); }
  .hero__band-wrap { margin-left: 0; margin-top: 0; width: 100%; }
  .hero__panel { padding: var(--space-5) var(--container-pad); }
  .hero__statement { font-size: var(--fs-2); max-width: none; }
  .proof-rail { grid-template-columns: 1fr; max-width: none; }
  .story__media { aspect-ratio: 4 / 5; max-height: none; }
}

/* scroll fade: tint->desat, view-timeline */
.fade-media__desat { position: absolute; inset: 0; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fade-media__desat { animation: media-crossfade linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}
@keyframes media-crossfade { to { opacity: 1; } }

.reveal { }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal-in var(--motion-duration-slow) var(--motion-easing-entrance) both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
/* contrast fix: from-opacity .55->.9 (axe reads .reveal pre-scroll, where
   .55 drops 4 pairs below AA). Settled opacity:1 state is unchanged. */
@keyframes reveal-in { from { opacity: .9; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

html.capture-mode .fade-media__desat,
html.capture-mode .reveal {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* numbers: nth-child x two breakpoints, real media queries for exact order */
.stat { padding-right: var(--space-4); }
.stat:nth-child(3n) { padding-right: 0; }
@media (max-width: 860px) {
  .numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3n) { padding-right: var(--space-4); }
  .stat:nth-child(2n) { padding-right: 0; }
}
@media (max-width: 480px) {
  .numbers__grid { grid-template-columns: 1fr; }
  .stat { padding-right: 0; }
}