/* Kol Vkal home page. Sits on top of scrollcraft.css (the scroll engine's own stylesheet).

   Colour: the two colours in the logo file and nothing else.
     amber #ECA31F is the loud one: buttons, the line, the mark, the highlight under one phrase.
     navy  #091851 is the ink, and the ground of the one "turn" section.
   Amber is never text on a light ground (2.1:1). Navy on amber is 8:1.
   Logical properties only, so the Yiddish version is dir="rtl" plus new words. */

@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --sc-canvas: #f3f5fb;
  --sc-surface: #ffffff;
  --sc-ink: #091851;
  --sc-ink-soft: #46507e;
  --sc-accent: #eca31f;
  --sc-accent-ink: #091851;
  --sc-font-display: "Outfit", system-ui, "Segoe UI", sans-serif;
  --sc-font-text: "Outfit", system-ui, "Segoe UI", sans-serif;
  --sc-shadow-color: 228 60% 18%;
  --navy: #091851;
  --amber: #eca31f;
  --bar-h: 4.5rem;
  --curve: clamp(2rem, 5vw, 4rem);
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home { overflow-x: clip; }
.home .sc-display { font-weight: 400; color: var(--sc-ink); margin: 0; }
/* One accent phrase per headline: a soft serif italic with an amber marker stroke under it. */
.home .sc-display em { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 420; letter-spacing: -0.02em; background: linear-gradient(var(--amber), var(--amber)) 0 88% / 100% 0.16em no-repeat; padding-inline: 0.04em; }
.home .sc-lede, .home .sc-body { color: var(--sc-ink-soft); }
.home :focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }

.skip { position: absolute; inset-inline-start: 0.5rem; inset-block-start: -5rem; z-index: 120; background: var(--navy); color: #fff; padding: 0.5rem 1rem; border-radius: 8px; }
.skip:focus { inset-block-start: 0.5rem; }

/* ---------- brand opening ---------- */

.curtain {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none;
  background: var(--navy);
  border-end-start-radius: 50% 9vh; border-end-end-radius: 50% 9vh;
  animation: curtain-up 900ms var(--ease) 950ms forwards;
}
.curtain-mark { inline-size: clamp(5rem, 16vmin, 8rem); block-size: auto; overflow: visible; animation: curtain-mark 900ms var(--ease) both; }
.curtain-mark .lip-up { animation: lip-up 700ms var(--ease) 350ms both; }
.curtain-mark .lip-down { animation: lip-down 700ms var(--ease) 350ms both; }
@keyframes curtain-up { to { translate: 0 -112%; visibility: hidden; } }
@keyframes curtain-mark { from { opacity: 0; scale: 0.8; } }
@keyframes lip-up { 50% { transform: translateY(-9px); } }
@keyframes lip-down { 50% { transform: translateY(9px); } }

.progress { position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 70; block-size: 3px; background: var(--amber); transform-origin: 0 50%; }
[dir="rtl"] .progress { transform-origin: 100% 50%; }

/* ---------- bar ---------- */

.bar {
  position: fixed; inset-inline: 0; inset-block-start: 0; z-index: var(--sc-z-chrome);
  block-size: var(--bar-h); padding-inline: var(--sc-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: color-mix(in oklab, var(--sc-canvas) 80%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bar-brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--navy); min-block-size: 44px; }
.bar-mark { inline-size: 2.25rem; block-size: 2.25rem; fill: var(--amber); }
.bar-nav { display: flex; align-items: center; gap: 1.5rem; }
.bar-link { color: var(--navy); font-weight: 500; min-block-size: 44px; display: inline-flex; align-items: center; }

/* ---------- buttons: big, amber, and they squish ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 3.75rem; padding: 0.875rem 2.25rem;
  font: inherit; font-weight: 650; font-size: 1.1875rem; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  color: var(--navy); background: var(--amber); border: 0; border-radius: 999px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.45) inset, 0 14px 26px -14px rgb(180 110 0 / 0.75), 0 3px 6px -2px rgb(9 24 81 / 0.18);
  transition: transform 420ms var(--spring), background-color 200ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out);
}
.btn:hover { transform: scale(1.065, 1.095); background: #f4b03a; color: var(--navy); }
.btn:active { transform: scale(0.955, 0.925); transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.btn .ch { display: inline-block; white-space: pre; }
.btn:hover .ch { animation: hop 460ms var(--ease); }
@keyframes hop { 40% { translate: 0 -0.22em; } }
.btn-bar { min-block-size: 3rem; padding: 0.5rem 1.5rem; font-size: 1.0625rem; }
.btn-hero { min-block-size: 4.75rem; min-inline-size: 15rem; padding: 1rem 3.25rem; font-size: 1.5rem; }
.btn-big { min-block-size: 5rem; padding: 1.25rem 3.75rem; font-size: 1.625rem; }
.btn-quiet { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); min-block-size: 3.5rem; }
.btn-quiet:hover { background: var(--navy); color: #fff; }
.text-link { color: var(--navy); font-weight: 500; font-size: 1.0625rem; display: inline-block; padding-block: 0.625rem; }
.text-link::after { content: "\2192"; display: inline-block; margin-inline-start: 0.4em; transition: translate 200ms var(--sc-ease-out); }
.text-link:hover::after { translate: 0.3em 0; }
[dir="rtl"] .text-link::after { content: "\2190"; }
[dir="rtl"] .text-link:hover::after { translate: -0.3em 0; }

/* ---------- the drawn line ---------- */

.voice { position: absolute; pointer-events: none; overflow: visible; }
.voice-line { fill: none; stroke: var(--amber); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
[dir="rtl"] .voice { transform: scaleX(-1); }

.lip { fill: var(--amber); }
.hero-mark .lip-up, .close-mark .lip-up { transform: translateY(calc(var(--open, 0) * -1px)); }
.hero-mark .lip-down, .close-mark .lip-down { transform: translateY(calc(var(--open, 0) * 1px)); }

/* ---------- 1 · hero ---------- */

.hero-stage {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
  padding-inline: var(--sc-gutter); padding-block: calc(var(--bar-h) + 1rem) 2rem;
  overflow: clip; background: var(--sc-canvas);
}
.hero-copy { grid-column: 1; grid-row: 1; display: grid; position: relative; z-index: var(--sc-z-copy); max-inline-size: 40rem; }
.hero-beat { grid-area: 1 / 1; align-self: center; }
.hero-title { font-size: clamp(2.6rem, 1.4rem + 4.9vw, 5.75rem); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.hero-lede { margin-block: 1.75rem 2.25rem; max-inline-size: 34rem; font-size: var(--sc-t-lg); line-height: 1.45; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
/* The first screen arrives after the curtain lifts. */
.hero-beat:not(.hero-beat-two) > * { animation: rise 900ms var(--ease) 1250ms both; }
.hero-beat:not(.hero-beat-two) > .hero-lede { animation-delay: 1350ms; }
.hero-beat:not(.hero-beat-two) > .hero-actions { animation-delay: 1450ms; }
@keyframes rise { from { opacity: 0; translate: 0 1.5rem; } }

.hero-mark { grid-column: 2; grid-row: 1; position: relative; z-index: 3; justify-self: center; inline-size: min(36vw, 60vh, 31rem); aspect-ratio: 1; animation: mark-in 1100ms var(--ease) 1100ms both; }
.hero-mark svg { inline-size: 100%; block-size: 100%; overflow: visible; scale: calc(1 + var(--open, 0) * 0.007); filter: drop-shadow(0 28px 34px rgb(180 110 0 / 0.28)); }
@keyframes mark-in { from { opacity: 0; scale: 0.86; rotate: -8deg; } }

/* Planes placed around the mark. landing.js measures the mark and writes --mx, --my, --ms on the stage. */
.hero-rings, .hero-glow { position: absolute; inset-inline-start: var(--mx, 72%); inset-block-start: var(--my, 52%); translate: -50% -50%; pointer-events: none; }
[dir="rtl"] .hero-rings, [dir="rtl"] .hero-glow { translate: 50% -50%; }
.hero-rings { z-index: 0; inline-size: calc(var(--ms, 30rem) * 2.05); aspect-ratio: 1; }
.hero-rings svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.ring { fill: none; vector-effect: non-scaling-stroke; }
.ring-far { stroke: color-mix(in oklab, var(--navy) 11%, transparent); stroke-width: 1.5; }
.ring-dots { stroke: color-mix(in oklab, var(--amber) 75%, transparent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 26; transform-origin: 400px 400px; animation: turn 120s linear infinite; }
/* Sound leaving the mouth: three rings that swell and fade, only once the mark has opened. */
.ripple { stroke: var(--amber); stroke-width: 2; opacity: 0; transform-origin: 400px 400px; }
.is-open .ripple { animation: ripple 4.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.is-open .ripple-2 { animation-delay: 1.4s; }
.is-open .ripple-3 { animation-delay: 2.8s; }
@keyframes ripple { 0% { opacity: 0; scale: 0.72; } 18% { opacity: 0.55; } 100% { opacity: 0; scale: 1.75; } }
.hero-glow { z-index: 4; inline-size: calc(var(--ms, 30rem) * 1.5); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--amber) 26%, transparent), transparent); margin-block-start: calc(var(--ms, 30rem) * 0.28); margin-inline-start: calc(var(--ms, 30rem) * 0.22); }
.voice-hero { z-index: 2; inset: 0; inline-size: 100%; block-size: 100%; }
@keyframes turn { to { rotate: 360deg; } }

/* ---------- panels that rise over what came before, on a curved edge ---------- */

.curve, .curve-dark {
  position: relative; z-index: 5;
  border-start-start-radius: 50% var(--curve); border-start-end-radius: 50% var(--curve);
  margin-block-start: calc(var(--curve) * -1);
}
.curve { background: var(--sc-surface); padding-block-start: calc(var(--curve) + clamp(3rem, 7vw, 6rem)); }

/* ---------- 2 · things a parent has heard ---------- */

.heard { padding-block-end: clamp(6rem, 12vw, 11rem); }
.heard-wrap { position: relative; display: grid; justify-items: center; gap: 2rem; min-block-size: clamp(34rem, 78vh, 46rem); align-content: center; }
.heard-head { text-align: center; position: relative; z-index: 2; }
.heard-head .sc-display { font-size: var(--sc-t-3xl); letter-spacing: -0.04em; line-height: 1.04; max-inline-size: 12ch; margin-inline: auto; text-wrap: balance; }
.heard-foot { text-align: center; margin: 0; position: relative; z-index: 2; color: var(--sc-ink); }
.thing { position: absolute; z-index: 1; }
.thing-in { transition-property: opacity, transform; }
.thing-text { inset-inline-start: 0; inset-block-start: 6%; }
.thing-text .thing-in { rotate: -4deg; }
.thing-note { inset-inline-end: 2%; inset-block-start: 14%; }
.thing-note .thing-in { rotate: 5deg; }
.thing-remind { inset-inline-start: 8%; inset-block-end: 4%; }
.thing-remind .thing-in { rotate: 2deg; }
.thing-from { margin: 0 0 0.375rem 0.75rem; font-size: 0.8125rem; color: var(--sc-ink-soft); }
.bubble { margin: 0; max-inline-size: 17rem; padding: 0.875rem 1.25rem; font-size: 1.125rem; line-height: 1.35; color: var(--navy); background: #e9ecf6; border-radius: 1.5rem 1.5rem 1.5rem 0.375rem; box-shadow: var(--sc-e2); }
.note-paper { margin: 0; inline-size: 13.5rem; padding: 1.5rem 1.25rem 2rem; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 1.5rem; line-height: 1.25; color: var(--navy); background: #fbe3a6; box-shadow: var(--sc-e2); border-end-end-radius: 1.5rem 0.5rem; }
.remind { margin: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: start; inline-size: min(21rem, 78vw); padding: 1rem 1.125rem; font-size: 1rem; line-height: 1.35; color: var(--navy); background: var(--sc-surface); border-radius: 1.125rem; box-shadow: var(--sc-e2), 0 0 0 1px var(--sc-hairline); }
.remind-dot { inline-size: 0.875rem; block-size: 0.875rem; margin-block-start: 0.25rem; border-radius: 50%; background: var(--amber); }
.remind-when { font-size: 0.8125rem; color: var(--sc-ink-soft); }

/* ---------- 3 · the turn: navy, and the line smooths out ---------- */

.how { background: var(--navy); --sc-ink: #ffffff; --sc-ink-soft: #c5cbea; --sc-hairline-strong: rgb(255 255 255 / 0.24); color: #fff; }
.how-stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-block: calc(var(--bar-h) + var(--curve)) clamp(2.5rem, 8vh, 5rem); overflow: clip; }
.how-label { margin: 0; padding-inline: var(--sc-gutter); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #c5cbea; }
.voice-wave { position: relative; align-self: center; inline-size: 100%; block-size: clamp(9rem, 34vh, 18rem); }
.how .voice-line { stroke-width: 6; filter: drop-shadow(0 10px 14px rgb(236 163 31 / 0.35)); }
.voice-head { position: absolute; z-index: 3; inset-inline-start: 0; inset-block-start: 0; inline-size: 1.25rem; block-size: 1.25rem; margin: -0.625rem 0 0 -0.625rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px var(--navy), 0 0 0 8px rgb(255 255 255 / 0.35); will-change: transform; }
.steps { list-style: none; margin: 0; padding-inline: var(--sc-gutter); display: grid; min-block-size: 11rem; position: relative; z-index: var(--sc-z-copy); }
.sc-ready .steps > .step { grid-area: 1 / 1; }
.step { max-inline-size: 34rem; }
.step:nth-child(2) { justify-self: center; text-align: center; }
.step:nth-child(3) { justify-self: end; text-align: end; }
.home .step .sc-display { font-size: var(--sc-t-2xl); line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; color: #fff; }
.home .step .sc-display em { background: none; color: var(--amber); }
.home .how :focus-visible { outline-color: #fff; }

/* ---------- 4 · what it covers ---------- */

.covers-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.covers-head { position: sticky; inset-block-start: calc(var(--bar-h) + 2rem); }
.covers-head .sc-body { margin-block-start: 1.25rem; max-inline-size: 26rem; font-size: var(--sc-t-base); }
.topics { list-style: none; margin: 0; padding: 0; }
.topics li {
  position: relative; font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.025em; padding-block: 1.625rem; padding-inline-start: 0;
  border-block-start: 1px solid var(--sc-hairline-strong); text-wrap: balance;
  transition: padding-inline-start 420ms var(--ease);
}
.topics li:last-child { border-block-end: 1px solid var(--sc-hairline-strong); }
.topics li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; inline-size: 1.75rem; block-size: 5px; margin-block-start: -2.5px; border-radius: 3px; background: var(--amber); scale: 0 1; transform-origin: 0 50%; transition: scale 420ms var(--ease); }
[dir="rtl"] .topics li::before { transform-origin: 100% 50%; }
@media (hover: hover) {
  .topics li:hover { padding-inline-start: 2.75rem; }
  .topics li:hover::before { scale: 1 1; }
}

/* ---------- 5 · two invitations ---------- */

.invites { padding-block: 0 clamp(5rem, 10vw, 9rem); }
.invites-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.invite { display: grid; gap: 0.875rem; align-content: start; justify-items: start; padding: clamp(1.75rem, 4vw, 3.25rem); background: var(--sc-canvas); border-radius: 2rem; }
.tag { margin: 0; padding: 0.25rem 0.875rem; font-size: 0.875rem; font-weight: 600; color: var(--navy); background: #fbe3a6; border-radius: 999px; }
.invite-date { margin: 0; font-size: var(--sc-t-lg); font-weight: 500; color: var(--navy); }
.invite .btn { margin-block-start: 1rem; }

/* ---------- 6 · close ---------- */

.close-stage { display: grid; place-items: center; padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 4.5rem; overflow: clip; background: var(--sc-canvas); }
.close-word { position: absolute; inset-inline: 0; inset-block-end: -0.2em; margin: 0; z-index: 0; text-align: center; font-size: clamp(5rem, 21vw, 22rem); font-weight: 650; line-height: 0.8; letter-spacing: -0.06em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--navy) 12%, transparent); pointer-events: none; user-select: none; }
.voice-close { z-index: 1; inset: 0; inline-size: 100%; block-size: 100%; }
.close-inner { position: relative; z-index: var(--sc-z-copy); display: grid; justify-items: center; gap: 1.25rem; text-align: center; }
.close-mark { inline-size: clamp(5.5rem, 15vh, 8rem); aspect-ratio: 1; margin-block-end: 0.75rem; }
.close-mark svg { inline-size: 100%; block-size: 100%; overflow: visible; filter: drop-shadow(0 16px 20px rgb(180 110 0 / 0.26)); }
.close-title { text-wrap: balance; letter-spacing: -0.045em; }
.close-price { margin: 0 0 0.75rem; }
.close-aside { margin: 0.5rem 0 0; color: var(--sc-ink-soft); }
.close-aside a { color: var(--navy); font-weight: 500; }
.foot { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 1.25rem; text-align: center; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.foot p { margin: 0; }

/* ---------- pause ---------- */

.motion-toggle {
  position: fixed; inset-inline-start: 1rem; inset-block-end: 1rem; z-index: var(--sc-z-chrome);
  min-block-size: 2.75rem; padding: 0.5rem 1rem; font: inherit; font-size: 0.875rem; font-weight: 500;
  color: var(--navy); background: color-mix(in oklab, #fff 92%, transparent); border: 1px solid rgb(9 24 81 / 0.2); border-radius: 999px; cursor: pointer;
}
.motion-off .ring-dots, .motion-off .ripple { animation-play-state: paused; }

/* ---------- phones ---------- */

@media (max-width: 820px) {
  :root { --bar-h: 4rem; }
  .hero-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 1rem; padding-block-start: calc(var(--bar-h) + 0.5rem); }
  .hero-mark { grid-column: 1; grid-row: 1; inline-size: min(44vw, 24vh); }
  .hero-copy { grid-column: 1; grid-row: 2; align-self: start; }
  .hero-title { font-size: clamp(2.25rem, 1.3rem + 5.6vw, 3.4rem); }
  .hero-lede { margin-block: 1rem 1.5rem; font-size: 1.0625rem; }
  .btn-hero { inline-size: 100%; }
  .hero-actions { gap: 0.75rem; }
  .bar-link { display: none; }
  .heard-wrap { min-block-size: 0; gap: 1.5rem; justify-items: start; }
  .heard-head { text-align: start; max-inline-size: none; }
  .thing { position: static; }
  .thing-note { justify-self: end; }
  .heard-foot { text-align: start; }
  .step, .step:nth-child(2), .step:nth-child(3) { justify-self: start; text-align: start; }
  .home .step .sc-display { font-size: var(--sc-t-xl); }
  .covers-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .covers-head { position: static; }
  .topics li { font-size: var(--sc-t-lg); padding-block: 1.25rem; }
  .invites-grid { grid-template-columns: minmax(0, 1fr); }
  .btn-big { inline-size: 100%; padding-inline: 1.5rem; font-size: 1.5rem; }
  .foot { inset-block-end: 4.75rem; }
  .close-stage { padding-block-end: 7rem; }
}

/* ---------- when the engine never starts (a blocked or broken script) ----------
   The engine's stylesheet hides cued content until its script runs. If the script has
   not started after three seconds, show everything as an ordinary page. */

html:not(.sc-ready) [data-sc-cue],
html:not(.sc-ready) [data-sc-in],
html:not(.sc-ready) [data-sc-stagger] > *,
html:not(.sc-ready) [data-sc-reveal] { animation: show-late 1ms 3s forwards; }
html:not(.sc-ready) .hero-beat-two { animation: none; }
@keyframes show-late { to { opacity: 1; transform: none; clip-path: none; } }

@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
  .ring-dots, .ripple, .hero-mark, .hero-beat:not(.hero-beat-two) > *, .btn:hover .ch { animation: none; }
  .btn, .text-link::after, .topics li, .topics li::before { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* ==========================================================================================
   The always-moving layer. Joel: "They should really feel animation here."
   Everything below runs on its own, slowly and smoothly, and all of it stops with the Pause
   button (.motion-off) and for visitors who ask their device for less motion.
   ========================================================================================== */

/* The mark floats, the dotted ring turns, the glow breathes, sound rings keep leaving the mouth. */
.hero-mark { animation: mark-in 1100ms var(--ease) 1100ms both, bob 6.5s ease-in-out 2.4s infinite; }
@keyframes bob { 50% { translate: 0 -2.4%; } }
.ring-dots { animation-duration: 46s; }
.hero-glow { animation: glow 5.5s ease-in-out infinite; }
@keyframes glow { 50% { scale: 1.16; opacity: 0.72; } }
.ripple { animation: ripple 4.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.ripple-2 { animation-delay: 1.4s; }
.ripple-3 { animation-delay: 2.8s; }

/* The broken line keeps travelling out of the mouth. 153 is the length of one run of its dashes. */
.voice-hero .voice-line { animation: march 2.6s linear infinite; }
@keyframes march { to { stroke-dashoffset: -153; } }

/* Letters and dots drift out of the mouth and fade: the sounds of speech. */
.hero-sounds { position: absolute; z-index: 3; inset-inline-start: var(--mx, 72%); inset-block-start: var(--my, 52%); inline-size: 0; block-size: 0; pointer-events: none; }
.snd {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; margin: -0.5em 0 0 -0.3em;
  font-family: "Fraunces", "Frank Ruhl Libre", "David", "Times New Roman", serif; font-style: normal; font-weight: 500;
  font-size: calc(var(--ms, 30rem) * 0.09); line-height: 1; color: var(--navy); opacity: 0;
  animation: fly 6.4s cubic-bezier(0.2, 0.6, 0.3, 1) var(--d, 0s) infinite;
}
.snd-dot { inline-size: 0.3em; block-size: 0.3em; border-radius: 50%; background: var(--amber); }
.snd:nth-child(1) { --dx: -0.66; --dy: -0.5; --r: -22deg; --d: 2.2s; }
.snd:nth-child(2) { --dx: -0.34; --dy: -0.78; --r: 0deg; --d: 2.9s; }
.snd:nth-child(3) { --dx: 0.08; --dy: -0.82; --r: 14deg; --d: 3.7s; }
.snd:nth-child(4) { --dx: 0.52; --dy: -0.62; --r: 24deg; --d: 4.6s; }
.snd:nth-child(5) { --dx: -0.78; --dy: -0.16; --r: 0deg; --d: 5.2s; }
.snd:nth-child(6) { --dx: -0.52; --dy: 0.56; --r: -16deg; --d: 6s; }
.snd:nth-child(7) { --dx: 0.6; --dy: 0.42; --r: 18deg; --d: 6.9s; }
.snd:nth-child(8) { --dx: 0.3; --dy: 0.74; --r: 0deg; --d: 7.6s; }
@keyframes fly {
  0% { opacity: 0; transform: translate(0, 0) scale(0.35) rotate(0deg); }
  14% { opacity: 0.8; }
  68% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(calc(var(--ms, 30rem) * var(--dx)), calc(var(--ms, 30rem) * var(--dy))) scale(1.25) rotate(var(--r)); }
}

/* A turning seal beside the mark: the free evening. */
.badge {
  position: absolute; z-index: 6; display: block; border-radius: 50%;
  inset-inline-start: calc(var(--mx, 72%) + var(--ms, 30rem) * 0.28); inset-block-start: calc(var(--my, 52%) + var(--ms, 30rem) * 0.24);
  inline-size: clamp(7.5rem, 11vw, 10rem); aspect-ratio: 1;
  animation: rise 900ms var(--ease) 1800ms both; transition: scale 420ms var(--spring);
}
.badge:hover { scale: 1.1; }
.badge:active { scale: 0.95; }
.badge svg { inline-size: 100%; block-size: 100%; overflow: visible; filter: drop-shadow(0 14px 18px rgb(9 24 81 / 0.28)); }
.badge-disc { fill: var(--navy); }
.badge-text { fill: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transform-origin: 100px 100px; animation: turn 18s linear infinite; }
.badge-arrow { fill: none; stroke: var(--amber); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; transition: translate 300ms var(--spring); }
.badge:hover .badge-arrow { translate: 6px 0; }

/* The headline arrives a word at a time, then the marker is drawn under the accent phrase. */
.hero-beat .hero-title.is-split { animation: none; }
.hero-title .w { display: inline-block; animation: word-up 900ms var(--ease) var(--wd, 1250ms) both; }
@keyframes word-up { from { opacity: 0; translate: 0 0.85em; rotate: 5deg; } }
.hero-beat:not(.hero-beat-two) .hero-title em { animation: marker 800ms var(--ease) 2150ms both; }
@keyframes marker { from { background-size: 0 0.16em; } }

/* The things a parent has heard keep floating. */
.bubble { animation: float-a 5.2s ease-in-out infinite; }
.note-paper { animation: float-b 6.4s ease-in-out infinite; }
.remind { animation: float-a 7.1s ease-in-out -2s infinite; }
@keyframes float-a { 50% { translate: 0 -12px; rotate: 1.4deg; } }
@keyframes float-b { 50% { translate: 0 10px; rotate: -2deg; } }

/* A moving band of the course's subjects. */
.ticker { margin-block-start: clamp(3.5rem, 8vw, 7rem); overflow: clip; rotate: -1.6deg; inline-size: 104%; margin-inline-start: -2%; padding-block: 0.25rem; }
.ticker-track { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding-inline-end: clamp(1.5rem, 3vw, 3rem); inline-size: max-content; white-space: nowrap; font-size: clamp(2.75rem, 7.5vw, 6.5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.15; color: var(--navy); animation: ticker 34s linear infinite; }
.ticker .hollow { color: transparent; -webkit-text-stroke: 1.5px var(--navy); }
.ticker i { flex: none; inline-size: 0.3em; block-size: 0.3em; border-radius: 50%; background: var(--amber); }
@keyframes ticker { to { translate: -50% 0; } }
[dir="rtl"] .ticker-track { animation-direction: reverse; }

/* A light crosses the amber buttons every few seconds, and the last button calls with a ring. */
.btn:not(.btn-quiet) { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.btn-quiet)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / 0.6) 50%, transparent 64%); translate: -120% 0; animation: shine 4.4s var(--ease) 2.8s infinite; }
@keyframes shine { 0% { translate: -120% 0; } 36%, 100% { translate: 120% 0; } }
.btn-big { animation: call 2.8s ease-out infinite; }
.btn-big:focus-visible { animation: none; }
@keyframes call { 0% { outline: 3px solid rgb(236 163 31 / 0.75); outline-offset: 0; } 70%, 100% { outline: 3px solid rgb(236 163 31 / 0); outline-offset: 22px; } }

/* The two invitations lift under the pointer. */
.invite { transition: translate 420ms var(--spring), box-shadow 300ms var(--sc-ease-out); }
@media (hover: hover) { .invite:hover { translate: 0 -8px; box-shadow: var(--sc-e3); } }

/* The mark at the close keeps sending rings too. */
.close-mark { position: relative; }
.close-mark::before, .close-mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; animation: ring-out 3.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.close-mark::after { animation-delay: 1.8s; }
@keyframes ring-out { 0% { opacity: 0.6; scale: 1; } 100% { opacity: 0; scale: 2.3; } }

@media (max-width: 820px) {
  .badge { inset-inline-start: auto; inset-inline-end: 0.75rem; inset-block-start: calc(var(--bar-h) + 0.25rem); inline-size: 6.25rem; }
  .badge-text { font-size: 17px; }
}

/* Pause, and less-motion devices: everything that moves by itself stops. */
.motion-off *, .motion-off *::before, .motion-off *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after { animation: none !important; }
  .snd, .ripple, .close-mark::before, .close-mark::after { opacity: 0; }
  .invite, .badge, .badge-arrow { transition: none; }
}

/* Fixes after looking at it. */
html { overflow-x: clip; }
.heard { overflow-x: clip; }
/* Outline type: Outfit's letter shapes overlap inside, so the stroke is painted first and the fill covers the inner lines. */
.ticker .hollow { color: var(--sc-surface); -webkit-text-stroke: 3px var(--navy); paint-order: stroke fill; }
.close-word { color: var(--sc-canvas); -webkit-text-stroke: 3px color-mix(in oklab, var(--navy) 13%, var(--sc-canvas)); paint-order: stroke fill; }

/* The two invitations are real cards: white on the page ground, one even soft shadow, nothing clipped.
   (Before, the card was the same colour as the page and a wipe effect cut its shadow off at the corners.) */
.invites { padding-block-start: clamp(2.5rem, 6vw, 5rem); }
.invite { background: var(--sc-surface); border-radius: 1.75rem; box-shadow: 0 0 0 1px rgb(9 24 81 / 0.08), 0 2px 4px rgb(9 24 81 / 0.04), 0 18px 40px -18px rgb(9 24 81 / 0.22); }
@media (hover: hover) { .invite:hover { translate: 0 -8px; box-shadow: 0 0 0 1px rgb(9 24 81 / 0.1), 0 4px 8px rgb(9 24 81 / 0.05), 0 32px 60px -22px rgb(9 24 81 / 0.32); } }

/* ==========================================================================================
   MODERN CLASSIC. Joel, 2026-11-10: "How can we make it feel very modern and classic? And, of
   course, clean." Serif headlines, amber used less, one thing moving per screen, more air,
   finer lines. This block comes last and decides wherever it and the rules above disagree.
   ========================================================================================== */

@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --sc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sc-gutter: clamp(1.5rem, 6.5vw, 7.5rem);
  --sc-section: clamp(5.5rem, 11vw, 13rem);
  --curve: clamp(1.25rem, 3vw, 2.5rem);
  --rule: color-mix(in oklab, var(--navy) 16%, transparent);
}

/* Type: an upright light serif for every headline; its own italic for the one accent phrase. */
.home .sc-display { font-family: var(--sc-font-display); font-weight: 340; letter-spacing: -0.028em; }
.home .sc-display em { font-weight: 340; letter-spacing: -0.02em; background: none; padding: 0; }
.hero-title { letter-spacing: -0.035em; line-height: 1.04; }
/* The amber stroke lives under ONE phrase on the whole page: the first headline. */
.hero-beat:not(.hero-beat-two) .hero-title em { background: linear-gradient(var(--amber), var(--amber)) 0 91% / 100% 0.09em no-repeat; }
.home .step .sc-display em { color: #fff; }
.bar-brand { font-family: var(--sc-font-display); font-weight: 480; font-size: 1.375rem; letter-spacing: -0.015em; }
.hero-lede { font-size: 1.1875rem; line-height: 1.55; }

/* Small spaced capitals for every label. */
.label, .tag, .how-label { margin: 0; padding: 0; background: none; border-radius: 0; font-family: var(--sc-font-text); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.how-label { color: #c5cbea; padding-inline: var(--sc-gutter); }
.covers-head .label { margin-block-end: 1.25rem; }

/* Buttons stay big and amber. No light sweep, no hopping letters, no calling ring. */
.btn { font-family: var(--sc-font-text); box-shadow: 0 12px 22px -14px rgb(180 110 0 / 0.7); transition: transform 320ms var(--sc-ease-out), background-color 200ms var(--sc-ease-out); }
.btn:hover { transform: scale(1.03, 1.05); }
.btn:not(.btn-quiet)::before { content: none; }
.btn-big { animation: none; }
.btn-quiet { box-shadow: inset 0 0 0 1.5px var(--navy); }

/* One thing moving per screen, and slower. On the first screen that is the mark. */
.hero-mark { animation: mark-in 1100ms var(--ease) 1100ms both, bob 10s ease-in-out 2.4s infinite; }
.hero-glow { animation-duration: 10s; }
.ring-dots { animation-duration: 90s; stroke: color-mix(in oklab, var(--navy) 22%, transparent); stroke-width: 2; }
.ripple { animation-duration: 7s; stroke-width: 1.5; }
.ripple-2 { animation-delay: 2.3s; }
.ripple-3 { animation-delay: 4.6s; }
.voice-hero .voice-line { animation-duration: 4.2s; }
.snd { animation-duration: 10s; color: color-mix(in oklab, var(--navy) 70%, transparent); }
.snd-dot, .snd:nth-child(n + 6) { display: none; }
.badge-text { animation-duration: 32s; font-weight: 500; letter-spacing: 0.08em; }
.badge-arrow { stroke: #fff; stroke-width: 5; }
.badge svg { filter: drop-shadow(0 10px 14px rgb(9 24 81 / 0.2)); }
.bubble, .note-paper, .remind { animation-duration: 10s; }
@keyframes float-a { 50% { translate: 0 -6px; } }
@keyframes float-b { 50% { translate: 0 5px; } }
.remind-dot { background: var(--navy); }
.close-mark::before, .close-mark::after { animation-duration: 6.5s; border-width: 1.5px; }
.close-mark::after { animation-delay: 3.2s; }
.progress { block-size: 2px; }

/* The subjects band: one light serif line between two hairlines, drifting slowly. */
.ticker { rotate: 0deg; inline-size: 100%; margin-inline-start: 0; padding-block: 1.25rem; border-block: 1px solid var(--rule); }
.ticker-track { font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.75rem, 4vw, 3.5rem); letter-spacing: -0.02em; animation-duration: 75s; }
.ticker .hollow { color: var(--navy); -webkit-text-stroke: 0; font-style: italic; }
.ticker i { inline-size: 0.18em; block-size: 0.18em; background: color-mix(in oklab, var(--navy) 35%, transparent); }

/* Lists and cards: hairlines, less rounding, a small lift. */
.topics li { font-family: var(--sc-font-display); font-weight: 340; letter-spacing: -0.02em; border-color: var(--rule); }
.topics li:last-child { border-color: var(--rule); }
.topics li::before { block-size: 1.5px; margin-block-start: -0.75px; border-radius: 0; background: var(--navy); }
.invite { border-radius: 0.75rem; padding: clamp(2rem, 4vw, 3.5rem); box-shadow: 0 0 0 1px var(--rule); transition: translate 300ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out); }
@media (hover: hover) { .invite:hover { translate: 0 -4px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--navy) 30%, transparent), 0 26px 44px -28px rgb(9 24 81 / 0.32); } }
.invite-date { font-family: var(--sc-font-display); font-weight: 400; font-style: italic; }
.heard-head .sc-display { max-inline-size: 14ch; }

/* The close: content in the middle, a quiet one-row footer on a hairline at the bottom. */
.close-stage { grid-template-rows: minmax(0, 1fr) auto; padding-block-end: 1.5rem; }
.close-inner { grid-row: 1; }
.close-word { font-family: var(--sc-font-display); font-weight: 300; letter-spacing: -0.04em; inset-block-end: 3.5rem; -webkit-text-stroke-width: 2px; }
.foot { grid-row: 2; position: relative; z-index: 2; inset: auto; inline-size: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 2rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--rule); text-align: start; font-size: 0.875rem; color: var(--sc-ink-soft); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 0; padding: 0; list-style: none; }
.foot a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--navy); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

@media (max-width: 820px) {
  .close-stage { padding-block-end: 4.25rem; }
  .foot { inset: auto; justify-content: center; text-align: center; }
  .foot-links { justify-content: center; }
  .close-word { inset-block-end: 8rem; }
}

/* The serif runs wider than the sans did, so the first headline steps down a size and gets a wider column. */
.hero-title { font-size: clamp(2.4rem, 1.2rem + 4.1vw, 4.9rem); }
.hero-copy { max-inline-size: 44rem; }
@media (max-width: 820px) { .hero-title { font-size: clamp(2.1rem, 1.2rem + 5vw, 3rem); } }
/* The footer sits above the Pause button on every screen size. */
.close-stage { padding-block-end: 4.25rem; }
/* On phones the giant outlined wordmark crowds the footer, so it is left out. */
@media (max-width: 820px) { .close-word { display: none; } }