/* Moonsglare · page styles. The engine (scrollcraft.css) is untouched; this
   file themes its tokens and styles this page's own markup. */

:root {
  --sc-canvas: #EEF0F1;      /* moon plaster: their mirror frame, not cream  */
  --sc-surface: #F8F9F9;
  --sc-ink: #131925;         /* night ink                                     */
  --sc-ink-soft: #4A5364;
  --sc-accent: #2C4A86;      /* lunar blue, one hue for the page              */
  --sc-accent-ink: #F8F9F9;
  --sc-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 220 30% 22%;
  --sc-edge: inset 0 1px 0 rgba(255,255,255,.7);

  --night: #0B1019;
  --night-2: #141B28;
  --night-ink: #EEF0F3;
  --night-soft: #A9B2C2;
  --night-accent: #A9C2F0;
  --gold: #E8C77D;
  --silver: #E6EBF2;
  --ms-r: 14px;
}

html { scroll-padding-top: 0; }
body { overflow-x: clip; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
.sc-grain { opacity: .035; }

em { font-style: italic; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--sc-4); top: -60px; z-index: 100; background: var(--sc-ink); color: var(--sc-canvas); padding: var(--sc-2) var(--sc-4); border-radius: 8px; }
.skip:focus { top: var(--sc-4); }

/* ---------- type ---------- */
.d-xl, .d-lg, .d-md, .d-sm, .hero__h, .ask__q {
  font-family: var(--sc-font-display); font-weight: 400;
  letter-spacing: -0.012em; line-height: 1; margin: 0;
  text-wrap: balance;
}
.d-xl { font-size: clamp(3.4rem, 2rem + 6vw, 7.2rem); line-height: .94; }
.d-lg { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.8rem); }
.d-md { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem); }
.d-sm { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.lede { font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); margin: 0; text-wrap: pretty; }
p { text-wrap: pretty; }
.fine { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin: 0; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.4em; border-radius: 999px;
  font: 500 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn:active { transform: scale(.97); }
.btn--solid { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e1); }
.btn--line { color: var(--sc-ink); box-shadow: inset 0 0 0 1.5px currentColor; }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: #22396a; box-shadow: var(--sc-e2); }
  .btn--line:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
}
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 6px; }
.link { color: var(--sc-accent); font-weight: 500; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- masthead (not fixed) ---------- */
.mast {
  position: absolute; z-index: 50; inset: 0 0 auto 0;
  display: flex; align-items: center; gap: var(--sc-6);
  padding: var(--sc-5) var(--sc-gutter);
}
.mast__mark { display: inline-flex; align-items: center; gap: .45em; color: var(--sc-ink); text-decoration: none; font: 400 1.65rem/1 var(--sc-font-display); letter-spacing: -0.01em; }
.mast__mark svg { width: 1.15em; height: 1.15em; }
.mast__nav { display: flex; gap: var(--sc-5); margin-left: auto; }
.mast__nav a { color: var(--sc-ink); text-decoration: none; font-size: var(--sc-t-sm); padding: .4em 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 180ms var(--sc-ease-out); }
.mast__nav a:hover { background-size: 100% 1px; }
.mast__menu { display: none; }

/* ---------- La orejita (fixed chart) ---------- */
.orejita {
  position: fixed; z-index: var(--sc-z-chrome); right: var(--sc-5); bottom: var(--sc-5);
  display: flex; align-items: center; gap: var(--sc-3);
  padding: 8px 18px 8px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--sc-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--sc-e2), var(--sc-edge);
  color: var(--sc-ink); text-decoration: none; font-size: var(--sc-t-sm);
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
  transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out), visibility 0s linear 240ms;
}
.orejita.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.orejita__ear { width: 34px; height: 46px; flex: none; }
.orejita__ear use { fill: none; stroke: var(--sc-ink); stroke-width: 1.2; }
.orejita__ear circle { fill: var(--sc-accent); }
.orejita__t b { font-weight: 600; font-variant-numeric: tabular-nums; }
.orejita__go { color: var(--sc-accent); font-weight: 500; }
.orejita.is-bump .orejita__ear { animation: bump 420ms var(--sc-ease-out); }
@keyframes bump { 40% { transform: scale(1.18) rotate(-4deg); } }

/* ear symbol strokes, wherever it is used */
#ear path, symbol path { vector-effect: non-scaling-stroke; }

/* =============================================================== HERO == */
.hero__stage { --mx: 0; --my: 0; background: var(--sc-canvas); }
.hero__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 72% 18%, rgba(255,255,255,.0) 0 40%, rgba(255,255,255,0) 41%),
    linear-gradient(180deg, #8EA2BA 0%, #AFBECF 38%, #D5DCE4 68%, var(--sc-canvas) 92%);
}
/* geometry, shared by moon and disc */
.hero { --D: min(64vh, 41vw); --cx: 72vw; --cy: 45vh; }
.hero__orbit {
  position: absolute; width: var(--D); height: var(--D);
  left: calc(var(--cx) - var(--D) / 2); top: calc(var(--cy) - var(--D) / 2);
  transform: translate3d(calc(var(--mx) * -6px), calc(var(--my) * -5px + var(--sc-p, 0) * -2vh), 0);
}
.hero__moon {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: screen; opacity: .97;
  filter: contrast(1.08) brightness(1.04);
}
.hero__corona {
  position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,0) 55.5%, #fff 57.2%, rgba(255,255,255,.85) 59%, rgba(240,246,255,.42) 68%, rgba(240,246,255,.12) 82%, rgba(240,246,255,0) 100%);
  opacity: calc(var(--sc-p, 0) * var(--sc-p, 0) * 1.1);
  transform: scale(calc(.9 + var(--sc-p, 0) * .14));
}
.hero__copy {
  position: absolute; z-index: 2;
  left: var(--sc-gutter); bottom: clamp(5rem, 14vh, 9rem);
  width: min(40rem, 44vw);
  transform: translate3d(0, calc(var(--sc-p, 0) * -4vh), 0);
}
.hero__h { font-size: clamp(3.6rem, 1.8rem + 6.2vw, 8.4rem); line-height: .92; letter-spacing: -0.02em; }
.hero__h em { display: inline-block; padding-right: .06em; }
.hero__sub { max-width: 30rem; margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }

/* the eclipse: the ear disc travels from low right to concentric with the moon */
.hero__disc {
  --k: calc(1 - var(--sc-p, 0));
  position: absolute; z-index: 3; margin: 0;
  width: calc(var(--D) * .955); height: calc(var(--D) * .955);
  left: calc(var(--cx) - var(--D) * .4775); top: calc(var(--cy) - var(--D) * .4775);
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 30px 60px -20px hsl(220 40% 18% / .45), 0 8px 18px -6px hsl(220 40% 18% / .3);
  transform: translate3d(
    calc(var(--D) * .34 * var(--k) + var(--mx) * 10px),
    calc(var(--D) * .52 * var(--k) + var(--my) * 8px - var(--sc-p, 0) * 2vh), 0);
}
.hero__disc-in { position: absolute; inset: 0; transform: scale(calc(1 + .14 * var(--k))) translate3d(calc(var(--mx) * -6px), calc(var(--my) * -6px), 0); transform-origin: 45% 50%; }
.hero__disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.glint {
  position: absolute; left: var(--x); top: var(--y); width: 9%; aspect-ratio: 1;
  translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.4) 18%, rgba(255,255,255,0) 60%);
  mix-blend-mode: screen; opacity: 0;
}
.glint::before, .glint::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 3%; translate: -50% -50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); border-radius: 50%; }
.glint::after { rotate: 90deg; }
@media (prefers-reduced-motion: no-preference) {
  .glint { animation: glint 4.2s var(--d) infinite var(--sc-ease-out); }
}
@keyframes glint { 0%, 70%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(25deg); } }

.hero__pearls {
  position: absolute; z-index: 4; pointer-events: none;
  width: min(25vw, 400px); height: auto; max-width: none;
  left: 40vw; bottom: -12vh;
  filter: drop-shadow(0 18px 22px hsl(220 30% 20% / .28));
  transform: translate3d(calc(var(--mx) * 18px), calc(var(--my) * 14px + var(--sc-p, 0) * -22vh), 0) rotate(calc(-10deg + var(--sc-p, 0) * 8deg));
}

/* =============================================================== STARS == */
.stars__stage { display: flex; align-items: center; background: var(--sc-canvas); }
.stars__rail { display: flex; align-items: stretch; gap: clamp(1rem, 2vw, 2rem); padding: 0 var(--sc-gutter); will-change: transform; }
.stars__lead, .stars__end { flex: none; width: clamp(18rem, 30vw, 27rem); display: flex; flex-direction: column; justify-content: center; gap: var(--sc-4); padding-right: var(--sc-6); }
.stars__end { width: clamp(16rem, 24vw, 22rem); padding: 0 var(--sc-6); }
.stars__end p { margin: 0; color: var(--sc-ink-soft); }
.star {
  flex: none; width: clamp(15rem, 19vw, 18.5rem);
  display: flex; flex-direction: column; gap: var(--sc-3);
  padding: var(--sc-5); border-radius: var(--ms-r);
  background: var(--sc-surface); box-shadow: var(--sc-e1), var(--sc-edge);
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out);
}
.star__chart { width: 100%; height: auto; aspect-ratio: 520 / 700; max-height: 38vh; }
.star__chart > use:first-child { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 55%, transparent); stroke-width: 1.4; }
.star__halo { fill: var(--sc-accent); opacity: .12; transition: opacity 240ms var(--sc-ease-out); }
.star__pt { color: var(--sc-accent); }
.star__name { font: 400 var(--sc-t-xl)/1 var(--sc-font-display); margin: var(--sc-1) 0 0; }
.star__label { margin: 0; display: grid; gap: var(--sc-2); font-size: var(--sc-t-sm); }
.star__label div { display: grid; grid-template-columns: 3.6em 1fr; gap: var(--sc-2); }
.star__label dt { color: var(--sc-ink-soft); }
.star__label dd { margin: 0; }
.star__btn {
  margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0 1.1em; border: 0; border-radius: 999px;
  font: 500 var(--sc-t-sm)/1 var(--sc-font-text); cursor: pointer;
  background: transparent; color: var(--sc-accent); box-shadow: inset 0 0 0 1.5px currentColor;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.star__btn:active { transform: scale(.97); }
.star__btn .on { display: none; }
.star__btn[aria-pressed="true"] { background: var(--gold); color: var(--night); box-shadow: none; }
.star__btn[aria-pressed="true"] .on { display: inline; }
.star__btn[aria-pressed="true"] .off { display: none; }
.star.is-lit { background: var(--night); color: var(--night-ink); box-shadow: var(--sc-e2); }
.star.is-lit .star__chart > use:first-child { stroke: color-mix(in oklab, var(--night-ink) 55%, transparent); }
.star.is-lit .star__label dt { color: var(--night-soft); }
.star.is-lit .star__pt { color: var(--gold); }
.star.is-lit .star__halo { fill: var(--gold); opacity: .22; }
@media (hover: hover) and (pointer: fine) { .star__btn:hover { background: color-mix(in oklab, var(--sc-accent) 10%, transparent); } .star__btn[aria-pressed="true"]:hover { background: #f0d390; } }

/* ================================================================= ASK == */
.ask { padding-block: calc(var(--sc-section) * .8) var(--sc-section); }
.ask__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sc-8); align-items: end; }
.ask__q { font-size: clamp(5rem, 2rem + 13vw, 15rem); line-height: .85; letter-spacing: -0.03em; font-style: italic; }
.ask__a { max-width: 34rem; padding-bottom: var(--sc-4); }
.ask__a p:not(.lede) { color: var(--sc-ink-soft); margin: 0; }

/* ============================================================== RITUAL == */
.ritual__stage { display: grid; align-items: center; background: var(--sc-canvas); }
.ritual__grid { display: grid; grid-template-columns: minmax(18rem, 30rem) 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; padding: var(--sc-7) var(--sc-gutter); max-width: 92rem; margin: 0 auto; width: 100%; }
.ritual__steps { list-style: none; counter-reset: s; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-5); }
.ritual__steps li { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: var(--sc-3); color: var(--sc-ink-soft); transition: color 240ms var(--sc-ease-out); }
.ritual__steps li::before { content: ""; grid-row: span 2; width: 12px; height: 12px; margin-top: .45em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sc-ink-soft); transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out); }
.ritual__steps li.is-done, .ritual__steps li.is-now { color: var(--sc-ink); }
.ritual__steps li.is-done::before { background: var(--sc-accent); box-shadow: none; }
.ritual__steps li.is-now::before { background: var(--sc-accent); box-shadow: 0 0 0 5px color-mix(in oklab, var(--sc-accent) 18%, transparent); }
.ritual__steps b { font: 400 var(--sc-t-xl)/1.1 var(--sc-font-display); }
.ritual__steps span { font-size: var(--sc-t-sm); margin-top: .3em; }
.ritual__steps li:not(.is-now) span { color: var(--sc-ink-soft); }
.ritual__win { margin: 0; }
.ritual__frame {
  position: relative; aspect-ratio: 5 / 4; max-height: 72vh; margin-left: auto;
  border-radius: 999px 999px var(--ms-r) var(--ms-r); overflow: hidden;
  background: #dfe3e6; box-shadow: var(--sc-e3);
}
.ritual__frame video, .ritual__frame .sc-stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ritual__win figcaption { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: var(--sc-3); text-align: right; }

/* =============================================================== JEWEL == */
.jewel { padding-block: var(--sc-7) var(--sc-section); }
.jewel__grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.75rem, 1.6vw, 1.5rem);
  grid-template-areas:
    "a a a a a c c c c c c c"
    "a a a a a b b b d d d d"
    "a a a a a b b b d d d d";
}
.jewel__grid figure { margin: 0; border-radius: var(--ms-r); overflow: hidden; background: #d7dde2; }
.jewel__grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jewel__a { grid-area: a; aspect-ratio: 3 / 4; }
.jewel__copy { grid-area: c; align-self: center; padding: var(--sc-6) 0 var(--sc-6) var(--sc-6); }
.jewel__copy p { margin: 0; max-width: 34rem; color: var(--sc-ink-soft); }
.jewel__b { grid-area: b; aspect-ratio: 3 / 4; }
.jewel__c { display: none; }
.jewel__d { grid-area: d; aspect-ratio: 4 / 4.4; }
.jewel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); font-size: var(--sc-t-sm); }
.jewel__list li { display: flex; align-items: center; gap: .55em; }
.jewel__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); }

/* ================================================================ TEAM == */
.team { padding-block: var(--sc-section); background: var(--sc-surface); }
.team__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sc-8) clamp(2rem, 5vw, 5rem); align-items: center; }
.team__photo { margin: 0; border-radius: var(--ms-r); overflow: hidden; aspect-ratio: 3 / 2; box-shadow: var(--sc-e2); }
.team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team__quote { margin: 0; }
.team__quote p { font: italic 400 var(--sc-t-xl)/1.25 var(--sc-font-display); margin: 0; text-wrap: balance; }
.team__quote footer { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.team__copy > p { color: var(--sc-ink-soft); margin: 0; }
.team__nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--sc-9); margin: 0; border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-6); }
.team__nums dt { font: 400 clamp(3rem, 2rem + 3vw, 5rem)/1 var(--sc-font-display); font-variant-numeric: tabular-nums; }
.team__nums dd { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* ================================================================ PEAK == */
.peak, .close { --sc-ink: var(--night-ink); --sc-ink-soft: var(--night-soft); --sc-accent: var(--night-accent); --sc-accent-ink: var(--night); --sc-hairline-strong: rgba(238,240,243,.2); color: var(--sc-ink); background: var(--night); }
.peak__stage { background: var(--night); }
.sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.peak__svg { position: absolute; top: 4vh; bottom: 4vh; right: 4vw; width: min(62vw, 92vh); height: 92vh; overflow: visible; }
.peak__ear path { fill: none; stroke: rgba(226, 234, 248, .78); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.peak__lines line { stroke: rgba(200, 216, 245, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.peak__sweep { mix-blend-mode: screen; opacity: 0; }
.peak__copy { position: absolute; left: var(--sc-gutter); bottom: 14vh; width: min(34rem, 40vw); z-index: 2; }
.peak__line { position: absolute; left: 0; bottom: 0; margin: 0; font: italic 400 clamp(2rem, 1.4rem + 2.2vw, 3.4rem)/1.08 var(--sc-font-display); text-wrap: balance; }
.peak__end { position: relative; }
.peak__names { margin: var(--sc-4) 0 0; font-size: var(--sc-t-lg); color: var(--night-soft); }

/* =============================================================== CLOSE == */
.close { position: relative; overflow: clip; padding-top: var(--sc-9); }
.close .sky { position: absolute; }
.close__moon { position: absolute; width: min(30vw, 420px); height: auto; left: -7vw; top: -7vw; opacity: .9; pointer-events: none; filter: drop-shadow(0 0 60px rgba(210,225,255,.25)); }
.close__grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.close__ear { position: relative; aspect-ratio: 580 / 720; max-height: 78vh; width: 100%; }
.close__ear svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.close__ear svg > use { fill: none; stroke: rgba(226,234,248,.8); stroke-width: 2.2; }
.spot {
  position: absolute; width: 44px; height: 44px; translate: -50% -50%;
  border: 0; border-radius: 50%; cursor: pointer; background: transparent;
}
.spot::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(200,216,245,.7); transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .spot:hover::before { transform: scale(1.35); box-shadow: inset 0 0 0 1.5px #fff; } }
.spot[aria-pressed="true"]::before { box-shadow: none; }
.spot:focus-visible { outline-offset: 0; border-radius: 50%; }
.gem-flare { mix-blend-mode: screen; }

.combo { position: relative; display: grid; gap: var(--sc-4); }
.combo h2 { margin-bottom: var(--sc-2); }
.combo__hint { margin: 0; color: var(--night-soft); }
.combo fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-2); }
.combo legend { float: left; width: 5.5em; font-size: var(--sc-t-sm); color: var(--night-soft); padding: 0; }
.combo label { position: relative; }
.combo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.combo label span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1em; border-radius: 999px; font-size: var(--sc-t-sm); box-shadow: inset 0 0 0 1.5px rgba(238,240,243,.28); transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out); }
.combo input:checked + span { background: var(--night-ink); color: var(--night); box-shadow: none; }
.combo input:focus-visible + span { outline: 2px solid var(--night-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .combo label:hover span { box-shadow: inset 0 0 0 1.5px rgba(238,240,243,.7); } }
.combo__msg { display: block; margin-top: var(--sc-2); padding: var(--sc-4) var(--sc-5); border-radius: var(--ms-r); background: var(--night-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); font-size: var(--sc-t-sm); line-height: 1.55; color: var(--night-ink); white-space: pre-line; }
.combo__acts { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-2); }
.btn--glow { background: var(--gold); color: var(--night); box-shadow: 0 10px 30px -10px rgba(232,199,125,.55); }
@media (hover: hover) and (pointer: fine) { .btn--glow:hover { background: #f1d898; } }
.close .btn--line { color: var(--night-ink); }
.close .fine { color: var(--night-soft); }
.close .link { color: var(--night-accent); }

.visit { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-7); margin-top: var(--sc-10); padding-top: var(--sc-7); border-top: 1px solid rgba(238,240,243,.16); }
.visit__h { font: 400 var(--sc-t-xl)/1 var(--sc-font-display); margin: 0 0 var(--sc-3); }
.visit p { margin: 0 0 var(--sc-3); color: var(--night-soft); }
.visit a:not(.link) { color: var(--night-ink); text-decoration: underline; text-decoration-color: rgba(238,240,243,.35); text-underline-offset: .2em; }
.foot { position: relative; display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-7); align-items: center; justify-content: space-between; padding-block: var(--sc-8) var(--sc-7); font-size: var(--sc-t-sm); color: var(--night-soft); }
.foot a { color: var(--night-soft); }
.foot__mark { display: inline-flex; align-items: center; gap: .4em; font: 400 1.4rem/1 var(--sc-font-display); color: var(--night-ink); }
.foot__mark svg { width: 1.1em; height: 1.1em; }

/* ============================================================== PHONES == */
@media (max-width: 860px) {
  .mast { padding: var(--sc-4) var(--sc-gutter); gap: var(--sc-3); }
  .mast__nav { display: none; }
  .mast__cta { margin-left: auto; min-height: 42px; padding: 0 1.1em; }
  .mast__menu { display: block; position: relative; }
  .mast__menu summary { list-style: none; cursor: pointer; min-height: 42px; display: inline-flex; align-items: center; padding: 0 .9em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: var(--sc-t-sm); font-weight: 500; }
  .mast__menu summary::-webkit-details-marker { display: none; }
  .mast__menu nav { position: absolute; right: 0; top: calc(100% + 8px); display: grid; min-width: 12rem; padding: var(--sc-3); border-radius: var(--ms-r); background: var(--sc-surface); box-shadow: var(--sc-e3); }
  .mast__menu nav a { color: var(--sc-ink); text-decoration: none; padding: .7em .8em; border-radius: 8px; }
  .mast__menu nav a:active { background: var(--sc-canvas); }

  .orejita { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 6px 12px 6px 8px; gap: 6px; }
  .orejita__go { display: none; }
  .orejita__ear { width: 26px; height: 36px; }

  .hero { --D: min(78vw, 42svh); --cx: 46vw; --cy: calc(var(--D) / 2 + 12svh); }
  .hero__copy { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: max(3.5rem, 6svh); }
  .hero__h { font-size: clamp(2.9rem, 13.5vw, 4.6rem); }
  .hero__sub { font-size: var(--sc-t-base); margin-top: var(--sc-3); }
  .hero__acts { margin-top: var(--sc-5); }
  .hero__disc { transform: translate3d(calc(var(--D) * .34 * var(--k)), calc(var(--D) * .2 * var(--k) - var(--sc-p, 0) * 2svh), 0); }
  .hero__pearls { width: 32vw; left: -11vw; right: auto; bottom: auto; top: calc(var(--cy) - var(--D) * .02); }

  .stars__lead { width: 78vw; }
  .stars__end { width: 70vw; }
  .star { width: 72vw; padding: var(--sc-4); }
  .star__chart { max-height: 30svh; }

  .ask__grid { grid-template-columns: 1fr; gap: var(--sc-5); }
  .ask__q { font-size: clamp(4.5rem, 30vw, 8rem); }

  .ritual__grid { grid-template-columns: 1fr; gap: var(--sc-5); padding: var(--sc-8) var(--sc-gutter) var(--sc-5); align-content: center; height: 100%; }
  .ritual__win { order: -1; }
  .ritual__frame { aspect-ratio: 5 / 4; max-height: 38svh; width: 100%; margin: 0 auto; }
  .ritual__win figcaption { display: none; }
  .ritual__copy .d-lg { font-size: 2.3rem; }
  .ritual__steps { margin-top: var(--sc-4); gap: var(--sc-3); }
  .ritual__steps b { font-size: 1.35rem; }

  .jewel__grid { grid-template-columns: repeat(6, 1fr); grid-template-areas: "c c c c c c" "a a a a b b" "a a a a d d"; }
  .jewel__a { aspect-ratio: auto; }
  .jewel__b, .jewel__d { aspect-ratio: 3 / 4; }
  .jewel__copy { padding: 0 0 var(--sc-5); }

  .team__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .team__nums { grid-template-columns: repeat(3, 1fr); gap: var(--sc-4); }
  .team__nums dd { font-size: var(--sc-t-xs); }

  .peak__svg { left: 0; right: 0; top: 2svh; width: 100%; height: 62svh; }
  .peak__copy { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: 9svh; }
  .peak__line { font-size: 1.9rem; }
  .peak .d-xl { font-size: 3.4rem; }

  .close { padding-top: var(--sc-8); }
  .close__moon { width: 46vw; left: auto; right: -14vw; top: -12vw; opacity: .7; }
  .close__grid { grid-template-columns: 1fr; gap: var(--sc-5); }
  .close__ear { max-height: none; width: min(100%, 26rem); margin: 0 auto; }
  .visit { grid-template-columns: 1fr; gap: var(--sc-6); margin-top: var(--sc-8); }
  .combo legend { width: 100%; float: none; margin-bottom: var(--sc-1); }
}
html.ms-short .hero__sub { display: none; }
html.ms-short .ritual__steps span { display: none; }

/* ======================================================= REDUCED MOTION == */
@media (prefers-reduced-motion: reduce) {
  .hero__orbit, .hero__copy, .hero__pearls, .hero__disc-in { transform: none !important; }
  .hero__disc { transform: translate3d(calc(var(--D) * .12), calc(var(--D) * .16), 0) !important; }
  .hero__corona { opacity: .25; }
  .orejita, .btn, .star, .star__btn { transition-duration: 1ms; }
  /* No motion, no held scroll: pinned acts become ordinary screens. */
  .sc-act--pinned { height: auto !important; }
  .sc-act--pinned > .sc-stage { position: relative; }
  .peak__line { display: none; }
  .peak .peak__end { opacity: 1 !important; transform: none !important; }
}