/* Home: split stage over a fixed WebGL ring. --split (0..1) is written by home.js:
   desktop it is the divider's x as a fraction of the width, phones its y. */
:root {
  --sc-canvas: #0A0A0A;
  --sc-surface: #161614;
  --sc-ink: #F5F3EE;
  --sc-ink-soft: #B9B6AC;
  --sc-accent: #B88B3B;
  --sc-accent-ink: #0A0A0A;
  --sc-font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --sc-font-text: "Manrope", "Segoe UI", system-ui, sans-serif;
  --split: .5;
  --ring-r: min(16vw, 30vh);
}
body.page-home { background: var(--sc-canvas); color: var(--sc-ink); }

/* ---------- top: scrolls away with the first screen ---------- */
.home-top { position: absolute; top: 0; left: 0; right: 0; z-index: 70; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem var(--gutter); color: #fff; }
.home-menu { display: block; position: relative; }
.home-menu summary { list-style: none; cursor: pointer; font-weight: 700; padding: .55rem 1rem; border: 1px solid #3a3a35; border-radius: 999px; font-size: .9rem; background: rgba(10,10,10,.6); }
.home-menu summary::-webkit-details-marker { display: none; }
.home-menu[open] summary { border-color: var(--gold); }
.home-menu .menu-panel { position: absolute; right: 0; top: calc(100% + .6rem); width: min(19rem, calc(100vw - 2rem)); background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 16px; padding: .5rem; box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); }
.home-menu .menu-panel a { display: block; padding: .8rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 600; color: #fff; }
.home-menu .menu-panel a:hover { background: var(--ink-3); }
.home-menu .menu-panel .btn { width: 100%; margin-top: .4rem; color: var(--ink); }

/* ---------- the fixed world ---------- */
.world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-fallback { display: none; position: absolute; left: 50%; top: 50%; width: calc(var(--ring-r) * 2.4); translate: -50% -50%; opacity: .9; }
.no-webgl .ring-fallback { display: block; }
.divider { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: linear-gradient(transparent, rgba(232,212,166,.55) 18%, rgba(232,212,166,.55) 82%, transparent); transform: translateX(calc(var(--split) * 100vw)); will-change: transform; }
.divider-cap { position: absolute; top: 5.25rem; left: 0; translate: -50% 0; display: flex; align-items: center; gap: .75rem; white-space: nowrap; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cap-l { color: #9A9A92; translate: -.25rem 0; }
.cap-r { color: var(--gold-soft); }
.cap-band { padding: .4rem .8rem; border: 1px solid rgba(184,139,59,.6); border-radius: 999px; background: #0A0A0A; color: var(--gold); min-width: 9.5rem; text-align: center; }

.divider-cap { transition: opacity .2s var(--ease); }
.is-collapsing .divider-cap { opacity: 0; }
.is-gone .divider { opacity: 0; transition: opacity .3s var(--ease); }

/* ---------- acts ---------- */
#main { position: relative; z-index: 2; }

.side { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.side--today { left: 0; width: calc(var(--split) * 100vw); }
.side--after { right: 0; width: calc((1 - var(--split)) * 100vw); }
.side-copy { position: absolute; }
.side--today .side-copy { left: var(--gutter); bottom: 14vh; width: min(25vw, 26rem, calc(var(--split) * 100vw - 2 * var(--gutter))); }
.side--after .side-copy { right: var(--gutter); top: 50%; translate: 0 -50%; width: min(27vw, 30rem); }
#act-hero .side--after .side-copy { top: 54%; }

.eyebrow-l, .eyebrow-r, .area { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; }
.eyebrow-l, .side--today .area { color: #9A9A92; }
.eyebrow-r, .side--after .area { color: var(--gold); }
.today-line { font-size: clamp(1.25rem, .9rem + 1.1vw, 1.9rem); line-height: 1.22; letter-spacing: -.02em; font-weight: 600; color: #CFCCC3; margin: 0; }
.today-line--small { font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem); }
.hero-h1 { font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; color: #fff; margin: 0 0 1.1rem; }
.after-line { font-size: clamp(1.45rem, 1rem + 1.35vw, 2.4rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; color: #fff; margin: 0; }
.seal-line { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.6rem); line-height: .98; letter-spacing: -.045em; font-weight: 800; color: #fff; margin: 0; }
.after-sub { color: var(--sc-ink-soft); font-size: var(--t-base); margin: 1.1rem 0 1.5rem; max-width: 34ch; }

/* close: one column, the right side has won */
.split-stage--close { display: flex; align-items: center; }
.close-copy { position: relative; margin-left: auto; margin-right: var(--gutter); width: min(40rem, 46vw); }
.close-h { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.8rem); line-height: 1; letter-spacing: -.04em; font-weight: 800; margin: 0 0 1.5rem; color: #fff; }
.facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 2rem; font-size: var(--t-lg); color: #E9E6DD; font-weight: 600; }
.facts .num { color: var(--gold); font-weight: 800; }
.close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.text-link { color: #E9E6DD; font-weight: 700; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.text-link:hover { color: #fff; }

/* ---------- phones: the split turns horizontal ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  :root { --ring-r: min(30vw, 15vh); }
  .divider { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,212,166,.55) 12%, rgba(232,212,166,.55) 88%, transparent); transform: translateY(calc((var(--split) - .09) * 100dvh)); }
  .divider-cap { top: 0; left: auto; right: var(--gutter); translate: 0 -50%; font-size: .62rem; }
  .cap-l, .cap-r { display: none; }
  .cap-band { min-width: 0; }
  .side { left: 0; right: 0; width: auto; }
  .side--today { top: 0; bottom: auto; height: calc((var(--split) - .09) * 100dvh); }
  .side--after { top: calc((var(--split) - .09) * 100dvh); bottom: 0; }
  .side--today .side-copy { left: var(--gutter); right: var(--gutter); width: auto; bottom: auto; top: 4.5rem; }
  .side--after .side-copy, #act-hero .side--after .side-copy { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 1.5rem; translate: none; }
  #act-areas .side--today .side-copy, #act-seal .side--today .side-copy { top: 1.25rem; }
  .today-line { font-size: 1.12rem; }
  .eyebrow-l, .eyebrow-r, .area { margin-bottom: .5rem; font-size: .68rem; }
  .hero-h1 { font-size: clamp(1.75rem, 7.4vw, 2.3rem); }
  .after-line { font-size: clamp(1.3rem, 5.6vw, 1.7rem); }
  .seal-line { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .after-sub { margin: .7rem 0 1rem; font-size: .95rem; }
  .ring-fallback { top: 41%; }
  .close-copy { margin: 0 var(--gutter); width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .divider { will-change: auto; }
}

/* the footer sits above the fixed world */
.page-home .site-foot { position: relative; z-index: 3; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .split-stage--close { align-items: flex-end; padding-bottom: 2.5rem; }
}