/* Angels' Torah. The climb is Friday afternoon into Shabbat: each rung's sky is a little later. */
:root {
  --ink: oklch(24% 0.025 55);
  --ink-soft: oklch(41% 0.03 55);
  --moon: oklch(95% 0.02 85);
  --moon-soft: oklch(83% 0.03 80);
  --gold: oklch(55% 0.12 70);
  --gold-bright: oklch(84% 0.13 85);
  --candle: oklch(90% 0.11 88);
  --parch: oklch(95% 0.022 85);
  --rule: oklch(80% 0.04 75 / 0.6);
  --open: oklch(85% 0.14 95);
  --closed: oklch(82% 0.12 55);

  --serif: 'Alegreya', 'Iowan Old Style', Georgia, serif;
  --sans: 'Alegreya Sans', 'Gill Sans', 'Trebuchet MS', sans-serif;
  --hebrew: 'Frank Ruhl Libre', 'Times New Roman', serif;

  --step--1: clamp(0.88rem, 0.84rem + 0.2vw, 0.98rem);
  --step-0: clamp(1.08rem, 1.02rem + 0.3vw, 1.25rem);
  --step-1: clamp(1.32rem, 1.2rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.3rem, 1.8rem + 2.6vw, 3.9rem);
  --step-4: clamp(3.4rem, 2.2rem + 6vw, 7.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --measure: 62ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--parch);
  color: var(--ink);
  font: 400 var(--step-0)/1.65 var(--serif);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: color-mix(in oklch, currentColor 40%, transparent); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 3px; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-weight: 500; line-height: 1.1; margin: 0; text-wrap: balance; }
.he { font-family: var(--hebrew); unicode-bidi: isolate; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; z-index: 50; }
.skip:focus { left: 1rem; top: 1rem; background: var(--parch); padding: 0.5rem 1rem; }
.fine { font: 400 var(--step--1)/1.5 var(--sans); opacity: 0.78; max-width: var(--measure); }
.kicker { font: 500 var(--step--1)/1.3 var(--sans); letter-spacing: 0.06em; margin-bottom: 1rem; opacity: 0.85; }
.lede { font-size: var(--step-1); line-height: 1.45; max-width: 34ch; }
.disclaimer { font-size: var(--step--1); max-width: 46ch; opacity: 0.8; }

.badge { display: inline-block; font: 500 0.72rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35em 0.65em; border-radius: 99px; vertical-align: 0.2em; margin-inline-start: 0.4em; }
.badge-complete { background: oklch(88% 0.06 145 / 0.7); color: oklch(35% 0.07 145); }
.badge-draft { background: oklch(90% 0.07 80 / 0.8); color: oklch(42% 0.09 65); }

.cta {
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 48px; padding: 0.7em 1.4em;
  font: 500 var(--step-0)/1 var(--sans); text-decoration: none; border-radius: 99px;
  background: var(--ink); color: var(--parch);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px oklch(30% 0.05 60 / 0.5); }

/* ---------- Top bar ---------- */
.topbar {
  position: absolute; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 3rem) 1rem;
  font: 500 var(--step--1)/1 var(--sans);
}
.brand { display: inline-flex; align-items: center; gap: 0.55em; text-decoration: none; font-size: 1.05rem; letter-spacing: 0.01em; }
.brand-mark { width: 30px; height: 30px; display: block; }
.home .brand-mark { filter: drop-shadow(0 0 6px oklch(90% 0.1 85 / 0.5)); }
.topbar nav { display: flex; gap: clamp(0.9rem, 3vw, 1.8rem); }
.topbar nav a { text-decoration: none; opacity: 0.8; padding: 0.5rem 0; }
.topbar nav a:hover, .topbar nav a[aria-current] { opacity: 1; text-decoration: underline; }
.home .topbar { color: var(--moon); }

/* ---------- Stars (shared) ---------- */
.stars, .r7::before, .r8::before, .summit::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, var(--moon) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 72%, var(--moon) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 58% 31%, var(--candle) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 54%, var(--moon) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 91% 12%, var(--moon) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 90%, var(--moon) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 22% 44%, var(--moon) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 83%, var(--candle) 50%, transparent 51%);
  background-size: 340px 300px;
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }

/* ---------- Home: looking up the ladder ---------- */
.home-sky {
  position: relative; overflow: hidden;
  min-height: 100svh;
  padding: clamp(6rem, 14vh, 9rem) clamp(1.25rem, 5vw, 4rem) 4rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr auto; gap: 2rem clamp(2rem, 6vw, 6rem);
  color: var(--moon);
  background: linear-gradient(to bottom,
    oklch(17% 0.045 275) 0%, oklch(24% 0.07 295) 22%, oklch(40% 0.1 340) 40%,
    oklch(62% 0.12 40) 56%, oklch(80% 0.1 70) 70%, oklch(91% 0.05 82) 84%, var(--parch) 100%);
}
.home-sky .stars { height: 45%; inset: 0 0 auto; mask-image: linear-gradient(black 40%, transparent); }
.home-intro { grid-column: 1; grid-row: 1; position: relative; }
.home-mark { display: block; width: clamp(84px, 9vw, 120px); height: auto; margin-bottom: 1.25rem; filter: drop-shadow(0 0 24px oklch(88% 0.12 88 / 0.35)); }
.home-intro h1 { display: flex; flex-direction: column; gap: 0.2em; }
.h-en { font-size: var(--step-4); font-weight: 500; letter-spacing: -0.02em; line-height: 0.95; }
.h-he { font-size: var(--step-2); font-weight: 300; color: var(--candle); align-self: flex-start; }
.home-intro .lede { margin-top: 1.5rem; color: var(--moon-soft); }

.home-ladder {
  grid-column: 2; grid-row: 1 / span 2;
  list-style: none; margin: 0; padding: 0 0 0 0;
  position: relative; display: flex; flex-direction: column;
}
.home-ladder::before, .home-ladder::after {
  content: ''; position: absolute; top: -2rem; bottom: -3rem; width: 4px; border-radius: 2px;
  background: linear-gradient(to bottom, oklch(85% 0.08 85 / 0.2), oklch(75% 0.1 70 / 0.9) 60%, oklch(45% 0.07 60));
}
.home-ladder::before { left: 0.5rem; }
.home-ladder::after { left: 4.6rem; }
.hl-rung {
  position: relative; display: grid; grid-template-columns: 5.1rem 1fr; align-items: center; gap: 1.1rem;
  padding: 0.95rem 0;
  animation: rung-in 1s var(--ease) both; animation-delay: calc((8 - var(--i)) * -0.01s + var(--i) * 0.09s);
}
.hl-rung::before { content: ''; position: absolute; left: 0.5rem; width: 4.35rem; top: 50%; height: 4px; border-radius: 2px; background: oklch(78% 0.1 75 / 0.85); }
.hl-num { grid-column: 1; justify-self: center; position: relative; z-index: 1; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; background: oklch(22% 0.05 280); color: var(--candle); box-shadow: 0 0 0 1px oklch(80% 0.1 80 / 0.5), 0 0 18px oklch(85% 0.12 85 / 0.35); }
.hl-text { display: flex; flex-direction: column; line-height: 1.25; }
.hl-text strong { font-weight: 500; font-size: var(--step-1); }
.hl-text span { font: 400 var(--step--1)/1.35 var(--sans); opacity: 0.8; }
.hl-rung:nth-child(n+5) { color: var(--ink); }
.hl-rung:nth-child(n+5) .hl-num { background: var(--parch); color: var(--gold); box-shadow: 0 0 0 1px var(--rule); }
@keyframes rung-in { from { opacity: 0; transform: translateY(18px); } }

.home-ground { grid-column: 1; grid-row: 3; align-self: end; color: var(--ink); position: relative; }
.home-ground h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.5em; font-size: var(--step-3); letter-spacing: -0.01em; margin-bottom: 0.4rem; }
.big-he { font-weight: 700; color: var(--gold); }
.home-ground .ref { font: 400 var(--step-0)/1.4 var(--sans); color: var(--ink-soft); margin-bottom: 1.5rem; }

.home-why { max-width: calc(var(--measure) + 4rem); margin: 0 auto; padding: 4rem clamp(1.25rem, 5vw, 2rem) 5rem; font-size: var(--step-1); line-height: 1.5; }
.home-why p:last-child { font: 500 var(--step-0)/1.4 var(--sans); }

/* ---------- Parsha: hero on the ground ---------- */
.hero {
  position: relative; overflow: hidden; min-height: 100svh;
  display: grid; align-items: end;
  padding: 7rem clamp(1.25rem, 6vw, 5rem) clamp(3rem, 8vh, 6rem);
  background:
    radial-gradient(120% 60% at 75% 0%, oklch(98% 0.03 90) 0%, transparent 60%),
    linear-gradient(to bottom, oklch(96% 0.025 88), oklch(93% 0.035 82));
}
.hero-inner { position: relative; z-index: 2; max-width: 44rem; }
.hero h1 { display: flex; flex-direction: column; gap: 0.15em; margin-bottom: 1.25rem; }
.hero-he { font-size: clamp(4.5rem, 3rem + 10vw, 11rem); font-weight: 900; line-height: 0.95; color: var(--ink); letter-spacing: 0; align-self: flex-start; }
.hero-en { font-size: var(--step-2); font-weight: 400; font-style: italic; color: var(--ink-soft); }
.hero .ref { font: 400 var(--step-0)/1.4 var(--sans); color: var(--ink-soft); }
.hero .disclaimer { margin: 1.5rem 0 2rem; }
.draft { font: 500 var(--step--1)/1.4 var(--sans); color: oklch(45% 0.1 50); }
.hero-ladder {
  position: absolute; z-index: 1; right: clamp(-2rem, 8vw, 12rem); bottom: -6rem; width: clamp(9rem, 18vw, 15rem); height: 150%;
  transform: perspective(700px) rotateX(38deg) rotateZ(-4deg); transform-origin: bottom center;
  border-inline: 7px solid oklch(62% 0.08 65 / 0.55);
  background: repeating-linear-gradient(to top, transparent 0 58px, oklch(62% 0.08 65 / 0.55) 58px 65px);
  mask-image: linear-gradient(to top, black 30%, transparent 92%);
}

/* ---------- The rung sections: the sky gets later as you climb ---------- */
.rung { position: relative; padding: clamp(5rem, 14vh, 9rem) clamp(1.25rem, 6vw, 5rem); }
.rung-inner { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; }
.r1 { background: linear-gradient(oklch(93% 0.035 82), oklch(91% 0.045 80)); }
.r2 { background: linear-gradient(oklch(91% 0.045 80), oklch(88.5% 0.06 77)); }
.r3 { background: linear-gradient(oklch(88.5% 0.06 77), oklch(85.5% 0.075 70)); }
.r4 { background: linear-gradient(oklch(85.5% 0.075 70), oklch(81% 0.09 60)); }
.r5 { background: linear-gradient(oklch(81% 0.09 60) 0%, oklch(73% 0.11 45) 70%, oklch(46% 0.11 15) 100%); padding-bottom: clamp(9rem, 24vh, 14rem); }
.r6 { background: linear-gradient(oklch(46% 0.11 15), oklch(33% 0.09 330)); color: var(--moon); }
.r7 { background: linear-gradient(oklch(33% 0.09 330), oklch(23% 0.07 290)); color: var(--moon); }
.r8 { background: linear-gradient(oklch(23% 0.07 290), oklch(16% 0.045 270)); color: var(--moon); }
.r7::before { opacity: 0.5; }
.r6 .fine, .r7 .fine, .r8 .fine { opacity: 0.72; }

.rung-head { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: clamp(1rem, 3vw, 2rem); margin-bottom: clamp(2.5rem, 6vh, 4rem); align-items: end; }
.rung-he { grid-row: 1 / span 3; font-family: var(--hebrew); font-weight: 300; font-size: clamp(4.5rem, 3rem + 7vw, 9rem); line-height: 0.8; color: var(--gold); opacity: 0.9; }
.r6 .rung-he, .r7 .rung-he, .r8 .rung-he { color: var(--gold-bright); }
.rung-count { font: 500 var(--step--1)/1 var(--sans); letter-spacing: 0.08em; margin: 0 0 0.5rem; opacity: 0.7; }
.rung-head h2 { font-size: var(--step-3); letter-spacing: -0.015em; }
.rung-line { font-style: italic; font-size: var(--step-1); margin: 0.4rem 0 0; opacity: 0.8; }

/* Reveal on arrival (only once JS is present, so nothing hides without it). */
.js .rung-inner > :not(.rung-head) { transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .rung:not(.arrived) .rung-inner > :not(.rung-head) { opacity: 0; transform: translateY(24px); }

/* 1. Story */
.story p { font-size: var(--step-2); line-height: 1.4; max-width: 30ch; font-weight: 400; }
@media (min-width: 900px) { .story p { max-width: 38ch; } }

/* 2. Ein Yaakov: sources sit in the margin, the way commentary does on a page of Talmud */
.sages { display: grid; gap: 3rem; }
.sage { margin: 0; display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.sage figcaption { grid-column: 1; grid-row: 1; padding-top: 0.6rem; border-top: 1px solid var(--rule); font: 400 var(--step--1)/1.4 var(--sans); }
.sage figcaption strong { display: block; font-size: var(--step-0); font-weight: 700; color: var(--gold); }
.sage figcaption span { opacity: 0.75; }
.sage blockquote { grid-column: 2; margin: 0; font-size: var(--step-1); line-height: 1.5; max-width: var(--measure); }

.unconfirmed { font-size: var(--step-1); font-style: italic; opacity: 0.75; max-width: 40ch; }

/* 3. Zohar */
.zohar-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(14rem, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.zohar-text p:first-child { font-size: var(--step-1); line-height: 1.55; max-width: var(--measure); }
.hint { font: 400 var(--step--1)/1.4 var(--sans); opacity: 0.7; }
.sef-word {
  display: inline; margin: 0; line-height: inherit;
  background: oklch(90% 0.09 85 / 0.7); border: 0; padding: 0 0.25em; border-radius: 4px; cursor: pointer;
  font-style: italic; color: oklch(38% 0.1 60); transition: background 0.3s var(--ease);
}
.sef-word:hover, .sef-word.on { background: oklch(85% 0.13 85); }
.tree-wrap { margin: 0; }
.tree { width: 100%; max-width: 20rem; display: block; margin: 0 auto; overflow: visible; }
.tree .paths line { stroke: oklch(55% 0.06 65 / 0.35); stroke-width: 1.5; }
.tree .halo { fill: oklch(92% 0.12 90); opacity: 0; transition: opacity 0.6s var(--ease); }
.tree .core { fill: oklch(94% 0.025 85); stroke: oklch(55% 0.06 65 / 0.6); stroke-width: 1.5; transition: fill 0.5s var(--ease); }
.tree text { font: 500 9.5px var(--sans); fill: oklch(40% 0.04 60); text-anchor: middle; }
.tree .named .core { fill: oklch(80% 0.13 82); stroke: oklch(55% 0.12 70); }
.tree .named .halo { opacity: 0.45; }
.tree .named text { fill: oklch(32% 0.07 60); font-weight: 700; }
.tree .sef.on .halo { opacity: 1; animation: halo 1.4s var(--ease) infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes halo { from { transform: scale(0.9); } to { transform: scale(1.35); } }

/* 4. Numbers: letters come apart into their values and add up */
.gems { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: clamp(2.5rem, 6vh, 4rem); }
.gem { display: grid; grid-template-columns: 12rem 15rem 7rem minmax(0, 1fr); gap: 0.5rem 2rem; align-items: center; }
.gem-top h3 { font-size: var(--step-0); font-weight: 500; font-style: italic; }
.gem-word { display: block; font-size: var(--step-2); font-weight: 700; color: var(--ink); }
.tiles { display: flex; gap: 0.35rem; direction: rtl; justify-content: flex-start; }
.tile { display: grid; justify-items: center; min-width: 2.6rem; }
.tile-name { font: 400 var(--step--1)/1.4 var(--sans); font-style: italic; opacity: 0.75; direction: ltr; max-width: 16rem; }
.t-l { font-family: var(--hebrew); font-size: 2.6rem; font-weight: 500; line-height: 1.1; }
.t-v { font: 700 0.95rem/1 var(--sans); color: var(--gold); margin-top: 0.3rem; font-variant-numeric: tabular-nums; }
.gem-sum { margin: 0; font: 700 var(--step-3)/1 var(--sans); color: oklch(42% 0.11 60); font-variant-numeric: tabular-nums; text-align: center; }
.gem-sum output { display: inline-block; }
.gem-out p { margin: 0 0 0.3rem; }
.eq { font-family: var(--sans); color: var(--gold); font-weight: 700; margin-inline-end: 0.2em; }
.m-match { font-size: var(--step-1); line-height: 1.3; }
.m-he { font-weight: 700; font-size: 1.15em; }
.m-en { font-style: italic; }
.m-names p { font-size: var(--step-0); }
.nm-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; direction: rtl; justify-content: flex-end; }
.nm { font-size: 1rem; min-width: 2.2rem; text-align: center; padding: 0.15em 0.45em; border-radius: 4px; background: oklch(92% 0.09 88 / 0.75); color: oklch(40% 0.1 65); box-shadow: 0 0 14px oklch(92% 0.12 90 / 0.6); }
.m-src { font: 400 var(--step--1)/1.35 var(--sans); opacity: 0.7; margin-top: -0.1rem; }
.m-none { font-style: italic; opacity: 0.7; }
.gem.unmatched .gem-sum { color: var(--ink-soft); }
.gem-note { font: 400 var(--step--1)/1.45 var(--sans); opacity: 0.75; max-width: 40ch; }

.js .gem .t-v { opacity: 0; transform: translateY(-14px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i) * 0.16s); }
.js .gem .tile-name { font: 400 var(--step--1)/1.4 var(--sans); font-style: italic; opacity: 0.75; direction: ltr; max-width: 16rem; }
.t-l { transition: transform 0.6s var(--ease), color 0.6s var(--ease); transition-delay: calc(var(--i) * 0.16s); }
.js .gem .gem-sum, .js .gem .gem-out { opacity: 0; transition: opacity 0.8s var(--ease); }
.js .gem .nm { opacity: 0; transform: scale(0.6); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(1s + var(--j) * 0.12s); }
.js .gem.play .t-v { opacity: 1; transform: none; }
.js .gem.play .tile-name { font: 400 var(--step--1)/1.4 var(--sans); font-style: italic; opacity: 0.75; direction: ltr; max-width: 16rem; }
.t-l { transform: translateY(-4px); color: oklch(35% 0.06 60); }
.js .gem.play .gem-sum { opacity: 1; transition-delay: 0.5s; }
.js .gem.play .gem-out { opacity: 1; transition-delay: 1s; }
.js .gem.play .nm { opacity: 1; transform: none; }

/* 5. The angel's telling */
.telling { max-width: 40rem; }
.telling p { font-size: var(--step-1); line-height: 1.65; }
.telling p:first-child { font-size: var(--step-2); line-height: 1.4; }
.js .telling p { opacity: 0; transform: translateY(16px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .telling p.seen { opacity: 1; transform: none; }

/* 6. The debate */
.debate { display: grid; grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; margin-bottom: 1.5rem; }
.compass {
  position: relative; aspect-ratio: 1; display: grid;
  grid-template: 'a before b' 1fr 'left you right' 1fr 'c behind d' 1fr / 1fr 1fr 1fr;
  background: radial-gradient(circle at center, oklch(70% 0.08 40 / 0.18) 0 30%, transparent 62%);
  border-radius: 50%;
}
.compass::before { content: ''; position: absolute; inset: 16%; border-radius: 50%; border: 1px dashed oklch(90% 0.05 80 / 0.25); }
.orb { grid-area: var(--area); place-self: center; position: relative; display: grid; justify-items: center; gap: 0.15rem; background: none; border: 0; cursor: pointer; padding: 0.4rem; color: var(--moon); }
.orb-before { --area: before; } .orb-right { --area: right; } .orb-left { --area: left; } .orb-behind { --area: behind; }
.orb-light {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--orb-hi), var(--orb) 60%, transparent 72%);
  opacity: 0.45; transform: scale(0.85);
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease), box-shadow 0.8s var(--ease);
}
.orb-michael { --orb: oklch(78% 0.12 80); --orb-hi: oklch(96% 0.05 90); }
.orb-gavriel { --orb: oklch(62% 0.16 30); --orb-hi: oklch(88% 0.08 40); }
.orb-raphael { --orb: oklch(70% 0.11 160); --orb-hi: oklch(93% 0.05 150); }
.orb-uriel { --orb: oklch(88% 0.09 95); --orb-hi: oklch(99% 0.02 95); }
.orb-name { font: 500 var(--step--1)/1 var(--sans); }
.orb-he { font-size: 0.9rem; opacity: 0.7; }
.orb[aria-pressed='true'] .orb-light { opacity: 1; transform: scale(1.15); box-shadow: 0 0 40px 8px color-mix(in oklch, var(--orb) 55%, transparent); }
.orb:hover .orb-light { opacity: 0.85; }
.you { grid-area: you; place-self: center; display: grid; justify-items: center; }
.you span { width: 10px; height: 10px; border-radius: 50%; background: var(--moon); box-shadow: 0 0 0 6px oklch(95% 0.02 85 / 0.12); }
.speeches { min-height: 14rem; display: grid; }
.speech { margin: 0; grid-area: 1 / 1; }
.speech figcaption { font: 400 var(--step-0)/1.3 var(--sans); margin-bottom: 0.8rem; }
.speech figcaption strong { font-size: var(--step-1); font-weight: 700; color: var(--candle); }
.speech figcaption span { opacity: 0.75; }
.speech blockquote { margin: 0; }
.speech blockquote p { font-size: var(--step-2); line-height: 1.35; font-style: italic; max-width: 30ch; }
.cite { font-style: normal; font-family: var(--sans); font-weight: 700; color: var(--candle); padding: 0 0.15em; border-radius: 4px; background: oklch(95% 0.05 85 / 0.12); }
.js .speech { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease), visibility 0s linear 0.6s; }
.js .speech.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.debate-nav { margin: 1.5rem 0 0; }
.next-voice { background: oklch(95% 0.02 85 / 0.12); border: 1px solid oklch(95% 0.02 85 / 0.35); border-radius: 99px; padding: 0.65em 1.3em; min-height: 46px; cursor: pointer; font-family: var(--sans); font-weight: 500; }
.next-voice:hover { background: oklch(95% 0.02 85 / 0.22); }
.no-js-only { display: none; }
html:not(.js) .debate-nav { display: none; }
html:not(.js) .speeches { gap: 2rem; }
html:not(.js) .speech { grid-area: auto; }

/* 7. The spaces: the real scroll, columns of 42 lines, gaps aglow */
.facts { max-width: 44rem; margin-bottom: 2.5rem; }
.facts-sum { font-size: var(--step-1); line-height: 1.45; }
.facts ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font: 400 var(--step--1)/1.4 var(--sans); }
.k { font-weight: 700; margin-inline-end: 0.3em; }
.k-open { color: var(--open); }
.k-closed { color: var(--closed); }
.scroll-frame {
  position: relative; margin: 0 calc(-1 * clamp(1.25rem, 6vw, 5rem)); padding: 2rem clamp(1.25rem, 6vw, 5rem);
  background:
    linear-gradient(to right, oklch(52% 0.06 60) 0 10px, transparent 10px calc(100% - 10px), oklch(52% 0.06 60) calc(100% - 10px)),
    oklch(30% 0.06 300);
}
.scroll {
  --lh: 13.5px;
  font: 400 9.6px/var(--lh) var(--hebrew); color: oklch(22% 0.03 60);
  text-align: justify; text-align-last: right; hyphens: none;
  column-width: 9.5rem; column-gap: 1.6rem; column-fill: auto;
  height: calc(42 * var(--lh) + 3.2rem);
  padding: 1.6rem 1.4rem;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  background: linear-gradient(to bottom, oklch(93% 0.04 85), oklch(90% 0.05 80));
  border-radius: 3px;
  box-shadow: 0 30px 60px -30px oklch(10% 0.05 290 / 0.9), inset 0 0 40px oklch(70% 0.06 70 / 0.35);
  scrollbar-color: oklch(60% 0.07 65) transparent;
  transition: font-size 0.4s var(--ease);
}
.scroll.big { --lh: 22px; font-size: 16px; column-width: 15rem; }
.scroll .lg { font-size: 1.9em; font-weight: 700; line-height: 0; color: oklch(35% 0.09 60); }
.scroll .sm { font-size: 0.6em; }
.gap { border: 0; padding: 0; cursor: pointer; vertical-align: middle; border-radius: 3px; }
.gap-open { display: block; height: var(--lh); width: 100%; background: linear-gradient(to left, oklch(85% 0.15 95 / 0.95), oklch(90% 0.1 95 / 0.25)); }
.gap-closed { display: inline-block; width: 4.6em; height: 0.95em; margin: 0 0.3em; background: oklch(82% 0.14 60 / 0.9); }
.gap { animation: breathe 3.2s ease-in-out infinite; }
.gap:hover, .gap.on { animation: none; box-shadow: 0 0 0 2px oklch(40% 0.1 300), 0 0 18px 4px oklch(88% 0.15 90); }
@keyframes breathe { 50% { box-shadow: 0 0 14px 3px oklch(88% 0.14 90 / 0.8); } }
.scroll-tools { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.scroll-tools button { background: none; border: 1px solid oklch(95% 0.02 85 / 0.35); color: var(--moon); border-radius: 99px; padding: 0.45em 1em; font: 500 var(--step--1)/1 var(--sans); cursor: pointer; min-height: 40px; }
.gap-read { min-height: 4.5em; margin: 1.25rem 0 3rem; max-width: 44rem; font: 400 var(--step-0)/1.45 var(--sans); }
.gr-label { display: block; font-weight: 700; color: var(--candle); }
.gr-verse { display: block; font-family: var(--serif); font-style: italic; opacity: 0.85; }
.voice { max-width: 40rem; }
.voice h3 { font-size: var(--step-2); margin-bottom: 1.5rem; color: var(--candle); }
.voice h3 .he { font-size: 0.7em; opacity: 0.7; margin-inline-start: 0.3em; }
.voice p { font-size: var(--step-1); line-height: 1.6; }
.voice p:first-of-type { font-size: var(--step-2); line-height: 1.35; font-style: italic; }

/* 8. The vessel */
.vessel-grid { display: grid; grid-template-columns: minmax(10rem, 22rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.vessel-stage { position: sticky; top: 12vh; }
.vessel-svg { width: 100%; display: block; overflow: visible; --fill: 0; filter: drop-shadow(0 0 calc(var(--fill) * 50px) oklch(88% 0.13 88 / calc(var(--fill) * 0.9))); }
.vessel-line { fill: none; stroke: oklch(88% 0.06 85 / 0.85); stroke-width: 2.5; }
.vessel-fill { transform-box: fill-box; transform: translateY(calc((1 - var(--fill)) * 100%)); }
.the-vessel { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid oklch(90% 0.04 85 / 0.25); }
.the-vessel span { display: block; font: 500 var(--step--1)/1 var(--sans); letter-spacing: 0.08em; opacity: 0.7; margin-bottom: 0.6rem; }
.the-vessel strong { font-size: var(--step-3); font-weight: 500; line-height: 1.05; color: var(--candle); text-shadow: 0 0 40px oklch(88% 0.13 88 / 0.6); }

/* Summit: Shabbat has come in */
.summit { position: relative; overflow: hidden; background: oklch(16% 0.045 270); color: var(--moon); padding: 6rem clamp(1.25rem, 6vw, 5rem) 4rem; text-align: center; }
.summit-line { position: relative; display: grid; gap: 0.6rem; }
.summit-line .he { font-size: var(--step-4); font-weight: 300; color: var(--candle); text-shadow: 0 0 60px oklch(88% 0.13 88 / 0.55); }
.summit-line span:last-child { font-style: italic; opacity: 0.8; }
.prev-next { position: relative; display: flex; justify-content: space-between; max-width: 44rem; margin: 3rem auto 0; font: 500 var(--step-0)/1.4 var(--sans); }
.prev-next a { text-decoration: none; padding: 0.6rem 0; }
.prev-next a:hover { color: var(--candle); }

/* The climbing ladder at the edge of the screen */
.climb-nav { position: fixed; z-index: 30; right: clamp(0.6rem, 2vw, 1.75rem); top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease); }
.climb-nav.show { opacity: 1; pointer-events: auto; }
.climb-nav ol { list-style: none; margin: 0; padding: 0.6rem 0; display: flex; flex-direction: column-reverse; position: relative; }
.climb-nav ol::before, .climb-nav ol::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rail, oklch(55% 0.07 65 / 0.55)); }
.climb-nav ol::before { right: 4px; } .climb-nav ol::after { right: 26px; }
.climb-nav a { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 34px; text-decoration: none; }
.ln-dot { position: absolute; right: 4px; width: 24px; height: 2px; background: var(--rail, oklch(55% 0.07 65 / 0.55)); transition: background 0.4s var(--ease), height 0.4s var(--ease); }
.ln-t { margin-right: 40px; font: 500 0.82rem/1 var(--sans); white-space: nowrap; padding: 0.35em 0.6em; border-radius: 99px; background: oklch(96% 0.02 85 / 0.9); color: var(--ink); opacity: 0; transform: translateX(6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.climb-nav a:hover .ln-t, .climb-nav a:focus-visible .ln-t { opacity: 1; transform: none; }
.climb-nav a.passed .ln-dot { background: var(--gold); }
.climb-nav a.current .ln-dot { height: 4px; background: var(--gold-bright); box-shadow: 0 0 12px 2px oklch(88% 0.13 88 / 0.8); }
.climb-nav.dark { --rail: oklch(85% 0.05 80 / 0.4); }

/* ---------- Index ---------- */
.page-head { padding: 9rem clamp(1.25rem, 6vw, 5rem) 3rem; max-width: 72rem; margin: 0 auto; }
.page-head h1 { font-size: var(--step-4); letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.index, .about { background: linear-gradient(to bottom, oklch(95% 0.025 85), oklch(92% 0.04 80) 60%, oklch(88% 0.06 72)); }
.book { max-width: 72rem; margin: 0 auto; padding: 2rem clamp(1.25rem, 6vw, 5rem) 3rem; }
.book-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.25rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.75rem; margin-bottom: 1.25rem; }
.book-he { font-size: var(--step-3); font-weight: 700; color: var(--gold); }
.book-head h2 { font-size: var(--step-2); }
.book-head p { margin: 0 0 0 auto; font: 400 var(--step--1)/1 var(--sans); opacity: 0.7; }
.parsha-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.25rem 1rem; }
.pg a { display: grid; gap: 0.1rem; padding: 0.8rem 0.9rem; text-decoration: none; border-radius: 10px; transition: background 0.3s var(--ease); }
.pg-he { font-size: 1.6rem; font-weight: 500; line-height: 1.1; }
.pg-en { font-weight: 500; }
.pg-ref { font: 400 0.82rem/1.3 var(--sans); opacity: 0.65; }
.pg .badge { justify-self: start; margin: 0.35rem 0 0; }
.pg-dim { color: oklch(52% 0.03 60); }
.pg-dim .pg-he { color: oklch(62% 0.03 60); }
.pg-dim:hover { background: oklch(97% 0.015 85 / 0.6); }
.pg-complete a, .pg-draft a { background: radial-gradient(120% 140% at 85% 0%, oklch(95% 0.09 90), oklch(90% 0.06 82)); box-shadow: 0 0 0 1px oklch(75% 0.09 75 / 0.5), 0 12px 30px -16px oklch(70% 0.12 75); }
.pg-complete .pg-he, .pg-draft .pg-he { color: var(--gold); font-weight: 700; }

/* ---------- About ---------- */
.about-block { max-width: 72rem; margin: 0 auto; padding: 2rem clamp(1.25rem, 6vw, 5rem) 3rem; }
.about-block h2 { font-size: var(--step-2); margin-bottom: 1.25rem; }
.about-block > p { max-width: var(--measure); }
.about-rungs { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem 2rem; }
.about-rungs li { display: flex; gap: 1rem; align-items: baseline; }
.ar-he { font-size: 1.8rem; color: var(--gold); min-width: 1.6rem; }
.roster { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.ang-he { font-size: var(--step-3); font-weight: 300; color: var(--gold); line-height: 1; display: block; margin-bottom: 0.5rem; }
.ang h3 { font-size: var(--step-1); }
.ang-q { font: 500 var(--step--1)/1.3 var(--sans); opacity: 0.7; margin: 0.25rem 0 0.5rem; }
.sources { max-width: var(--measure); padding-left: 1.1rem; }
.sources li { margin-bottom: 0.8rem; }

/* ---------- Footer ---------- */
.foot { padding: 2.5rem clamp(1.25rem, 6vw, 5rem) max(2.5rem, env(safe-area-inset-bottom)); font: 400 var(--step--1)/1.5 var(--sans); }
.foot p { max-width: 60ch; margin: 0.3rem 0; opacity: 0.75; }
.parsha .foot { background: oklch(16% 0.045 270); color: var(--moon); border-top: 1px solid oklch(90% 0.03 85 / 0.1); }
.parsha.empty .foot { background: none; color: inherit; }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .home-sky { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .home-ladder { grid-column: 1; grid-row: 2; margin: 1rem 0 2rem; }
  .home-ground { grid-column: 1; grid-row: 3; }
  .home-sky { background: linear-gradient(to bottom, oklch(17% 0.045 275) 0%, oklch(24% 0.07 295) 25%, oklch(40% 0.1 340) 42%, oklch(62% 0.12 40) 56%, oklch(80% 0.1 70) 68%, oklch(91% 0.05 82) 80%, var(--parch) 100%); }
  .sage, .zohar-grid, .debate, .vessel-grid { grid-template-columns: 1fr; }
  .sage { gap: 0.75rem; }
  .sage figcaption, .sage blockquote { grid-column: 1; grid-row: auto; }
  .tree { max-width: 15rem; }
  .gem { grid-template-columns: 1fr auto; gap: 0.75rem 1rem; }
  .gem-top { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .tiles { grid-column: 1; justify-content: flex-end; flex-wrap: wrap; }
  .gem-sum { grid-column: 2; }
  .gem-out { grid-column: 1 / -1; }
  .tile-name { font: 400 var(--step--1)/1.4 var(--sans); font-style: italic; opacity: 0.75; direction: ltr; max-width: 16rem; }
.t-l { font-size: 2.1rem; }
  .tile { min-width: 2.1rem; }
  .compass { max-width: 20rem; margin: 0 auto; width: 100%; }
  .speeches { min-height: 16rem; }
  .vessel-stage { position: sticky; top: 0; z-index: 2; padding: 1rem 0; display: grid; justify-items: center; background: linear-gradient(oklch(20% 0.06 285) 70%, transparent); }
  .vessel-svg { width: 6.5rem; }
  /* On a phone the ladder lies down: a small pill at the bottom, rung 1 on the left. */
  .climb-nav { top: auto; right: auto; left: 50%; bottom: max(0.9rem, env(safe-area-inset-bottom)); transform: translateX(-50%); }
  .climb-nav ol { flex-direction: row; gap: 2px; padding: 0.55rem 0.9rem; border-radius: 99px; background: oklch(96% 0.02 85 / 0.88); backdrop-filter: blur(6px); box-shadow: 0 6px 24px -10px oklch(20% 0.05 60 / 0.5); }
  .climb-nav.dark ol { background: oklch(22% 0.05 285 / 0.85); }
  .climb-nav ol::before, .climb-nav ol::after { display: none; }
  .climb-nav a { width: 22px; height: 22px; justify-content: center; }
  .ln-dot { position: static; width: 3px; height: 14px; border-radius: 2px; }
  .climb-nav a.current .ln-dot { width: 5px; height: 18px; }
  .ln-t { display: none; }
  .hero-ladder { right: -3rem; width: 8rem; opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* ---------- This week: pairs, schedule, sharing ---------- */
.ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sched { margin: 1.25rem 0 0; font: 400 var(--step--1)/1.4 var(--sans); color: var(--ink-soft); }
.sched a { color: inherit; }
.sched [aria-current] { font-weight: 700; color: var(--ink); }
.pair { font: 500 var(--step-0)/1.45 var(--sans); max-width: 40ch; }
.hero .pair { margin: 0 0 1.25rem; padding: 0.7rem 1rem; border-radius: 10px; background: oklch(92% 0.06 85 / 0.7); }
.summit .pair { margin: 1.5rem auto 0; }
.summit .pair a { color: var(--candle); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1.25rem; font: 500 var(--step--1)/1 var(--sans); }
.share a, .share button { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; padding: 0 1rem; border-radius: 99px; text-decoration: none; cursor: pointer; font: inherit; }
.share-wa { background: oklch(52% 0.12 150); color: oklch(98% 0.01 150); }
.share-wa:hover { background: oklch(46% 0.12 150); }
.share-native, .share-print { background: transparent; border: 1px solid currentColor; color: inherit; opacity: 0.85; }
.share-native:hover, .share-print:hover { opacity: 1; }
.summit .share { justify-content: center; margin: 2rem auto 0; }

/* ---------- Weekly email signup ---------- */
.signup { max-width: calc(var(--measure) + 4rem); margin: 0 auto; padding: 3rem clamp(1.25rem, 5vw, 2rem); }
.signup h2 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.signup > p { max-width: 46ch; }
.signup-form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0.6rem; }
.signup-form input[type=email] { flex: 1 1 16rem; min-height: 48px; padding: 0 1rem; border-radius: 99px; border: 1px solid var(--rule); background: oklch(99% 0.01 85); font: 400 var(--step-0) var(--sans); color: var(--ink); }
.signup-form button { min-height: 48px; padding: 0 1.4rem; border: 0; border-radius: 99px; background: var(--ink); color: var(--parch); font: 500 var(--step-0) var(--sans); cursor: pointer; }
.signup-form button:hover { background: oklch(32% 0.04 60); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup-parsha { background: oklch(16% 0.045 270); color: var(--moon); max-width: none; text-align: center; }
.signup-parsha > * { margin-left: auto; margin-right: auto; }
.signup-parsha .signup-form { justify-content: center; max-width: 34rem; }
.signup-parsha .signup-form input[type=email] { background: oklch(24% 0.05 280); color: var(--moon); border-color: oklch(90% 0.03 85 / 0.3); }
.signup-parsha .signup-form button { background: var(--candle); color: oklch(20% 0.04 60); }

/* ---------- Listen to the angel's telling ---------- */
.listen { display: flex; align-items: center; gap: 0.9rem; max-width: 40rem; margin: 0 0 2rem; padding: 0.6rem 1rem 0.6rem 0.6rem; border-radius: 99px; background: oklch(96% 0.03 75 / 0.55); box-shadow: inset 0 0 0 1px oklch(70% 0.08 55 / 0.35); }
.listen-btn { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 1.1rem 0 0.9rem; border: 0; border-radius: 99px; background: var(--ink); color: var(--parch); font: 500 var(--step-0)/1 var(--sans); cursor: pointer; }
.li-play { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.listen.playing .li-play { width: 11px; height: 14px; border: 0; border-inline: 4px solid currentColor; }
.listen-track { flex: 1; height: 4px; border-radius: 2px; background: oklch(70% 0.06 55 / 0.35); overflow: hidden; cursor: pointer; }
.listen-fill { display: block; height: 100%; width: 0; background: oklch(45% 0.11 50); transition: width 0.25s linear; }
.listen-time { font: 500 var(--step--1)/1 var(--sans); font-variant-numeric: tabular-nums; opacity: 0.8; }
.telling p.speaking { color: oklch(30% 0.09 45); text-shadow: 0 0 22px oklch(96% 0.09 85 / 0.9); }
.telling p { transition: color 0.6s var(--ease), text-shadow 0.6s var(--ease), opacity 1.1s var(--ease), transform 1.1s var(--ease); }

.week-story { max-width: 46ch; font-size: var(--step-0); line-height: 1.55; margin: 0 0 1.5rem; }
.faq dt { font-weight: 700; margin-top: 1.25rem; }
.faq dd { margin: 0.3rem 0 0; max-width: var(--measure); }
.home-faq { max-width: calc(var(--measure) + 4rem); margin: 0 auto; padding: 3rem clamp(1.25rem, 5vw, 2rem) 0; }
.home-faq h2 { font-size: var(--step-2); margin-bottom: 0.5rem; }