/* OrQuest home: the story, chapter by chapter.

   Two kinds of ground. The two pinned stages (kindle, gate) are films, so
   they are night paper in both themes, on the film's own colours (--night,
   --sky). Everything between them follows the theme. The last chapter, the
   form, is always paper: the lit gate opens into it (design-system MASTER.md).

   Every motion start state lives under .js-motion, which the head script sets
   only when motion is allowed and home.js removes if GSAP never arrives.
   Without it this file lays the same story out as a still page, in the same
   reading order, with nothing waiting at opacity 0. */

:root {
  --night: #012C74;
  --edge-far: color-mix(in srgb, var(--bg) 55%, var(--night));
  --night-deep: #011E52;
  --nav-h: 64px;
  --section-y: clamp(6rem, 14vw, 11rem);
}
/* The pins re-measure after load; the browser's scroll anchoring would carry
   the reader elsewhere (home.js keeps the pin's progress instead), and a
   focused item must never land under the floating nav. */
html { overflow-anchor: none; scroll-padding-top: calc(var(--nav-h) + 24px); }

/* ---- Nav: a floating island ----------------------------------------------
   Web glass, an approximation (backdrop-filter plus a hairline), not Apple's
   Liquid Glass. It takes the colour of whatever is under it: night over the
   films, the theme between them, paper at the end. */
.nav {
  position: fixed; inset-inline: 0; top: max(10px, env(safe-area-inset-top)); z-index: 40;
  display: flex; justify-content: center; padding-inline: 12px; pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 1rem;
  width: min(1120px, 100%); height: var(--nav-h); padding-inline: 1.1rem .45rem;
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 10px 40px -18px rgba(var(--shadow-rgb), .35);
  backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px);
  transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.nav[data-skin="night"] .nav-pill {
  color: var(--on-sky);
  background: rgba(1, 22, 62, .34);
  box-shadow: inset 0 0 0 1px rgba(201, 218, 245, .16), 0 10px 40px -18px rgba(0, 0, 0, .5);
}
.nav[data-skin="paper"] .nav-pill, .nav.on-glow .nav-pill {
  color: #12161C;
  background: rgba(241, 243, 246, .72);
  box-shadow: inset 0 0 0 1px rgba(18, 22, 28, .08), 0 10px 40px -18px rgba(18, 22, 28, .25);
}
.nav .brand { color: inherit; min-width: 0; overflow: hidden; }
.nav .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .brand-mark { transition: opacity .6s var(--ease-soft); }
.nav-tools { display: flex; align-items: center; gap: .2rem; margin-inline-start: auto; flex-shrink: 0; }
:root[data-theme="dark"] .nav[data-skin="theme"] .nav-pill { background: color-mix(in srgb, var(--bg) 86%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .nav[data-skin="theme"] .nav-pill { background: color-mix(in srgb, var(--bg) 86%, transparent); } }
/* Focus that reads on every ground: pale on night, techelet on paper. */
.nav[data-skin="night"] :focus-visible, .kindle :focus-visible, .skip:focus-visible { outline-color: var(--on-sky); }
.nav[data-skin="paper"] :focus-visible, .nav.on-glow :focus-visible { outline-color: #1A4FA0; }
html:not(.js) .theme-btn { display: none; }
.nav .icon-btn { color: inherit; opacity: .82; }
.nav .icon-btn:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.nav-cta { min-height: 46px; padding: .5rem 1.15rem; font-size: .95rem; margin-inline-start: .35rem; }
.nav[data-skin="night"] .nav-cta { background: var(--on-sky); color: var(--paper-deep); box-shadow: 0 3px 0 #0A2450; }
.nav[data-skin="paper"] .nav-cta, .nav.on-glow .nav-cta { background: #1A4FA0; color: #fff; box-shadow: 0 3px 0 #0A2450; }
.theme-btn .i-moon { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-btn .i-sun { display: none; }
  :root:not([data-theme]) .theme-btn .i-moon { display: block; }
}
/* Cancel a subscription: a plain link in the island from the first screen,
   always in reach while the nav floats (BRIEF 1.3). It takes the island's
   colour, like the other controls, so it reads on night and on paper. */
.nav-cancel {
  display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .7rem; border-radius: 999px;
  color: inherit; font-weight: 600; font-size: .92rem; line-height: 1.15; text-align: center;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.nav-cancel:hover { text-decoration-color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }
/* On a phone the words take two short lines rather than push the brand out. */
@media (max-width: 560px) { .nav-cancel { font-size: .8rem; max-width: 7.4em; padding-inline: .4rem; } }
/* Below 23em the flame alone is the brand (the link keeps its aria-label), so
   the wordmark is never cut to "O...". */
@media (max-width: 23em) { .nav .brand span { display: none; } }
@media (max-width: 17em) { .nav .brand span { display: none; } }
/* 200% zoom on a phone: the island keeps every control inside it */
@media (max-width: 19.9em) {
  .nav { padding-inline: 6px; }
  .nav-pill { padding-inline: .6rem .2rem; gap: .25rem; }
  .nav .icon-btn { min-width: 36px; padding-inline: .35rem; }
}
@media (max-width: 560px) {
  .nav-pill { padding-inline: .9rem .35rem; gap: .5rem; }
  .nav-cta { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-pill { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .nav[data-skin="night"] .nav-pill { background: var(--night-deep); }
}

/* Source-mode language switch; the build removes the other language's
   elements outright. */
html[lang="he"] [data-only="en"], html:not([lang="he"]) [data-only="he"] { display: none !important; }

/* =========================================================================
   Kindle
   ========================================================================= */
.kindle { position: relative; background: var(--sky); color: var(--on-sky); isolation: isolate; }
.k-stage { position: relative; }
.k-scene { position: relative; min-height: 100svh; display: grid; align-content: start; overflow: hidden; }
/* The still page: the valley sits below the headline, its ridge and gate
   clear of the text (anchored at the top, so only the near hills crop). */
.k-plate { position: absolute; inset: 36svh 0 0; }
.k-plate picture, .k-plate img, .k-plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-plate img { object-fit: cover; object-position: 50% 0%; }
.js-motion .k-plate img { object-position: 50% 50%; }
.k-night, .k-film, .k-dusk, .k-veil, .k-halo, .k-ner { display: none; }
/* The still page: the valley fades into the night the letter stands on. */
.k-scene::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(1, 44, 116, 0), var(--night)); }
.js-motion .k-scene::after { display: none; }

.k-hero {
  position: relative; z-index: 3;
  padding: calc(var(--nav-h) + 9svh) var(--gutter) 0;
  display: grid; justify-items: center; gap: 1.1rem; text-align: center;
}
.k-hero h1 { font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5.2rem); line-height: 1.02; max-width: 21ch; letter-spacing: -.025em; }
[dir="rtl"] .k-hero h1 { font-size: clamp(2.7rem, 1.3rem + 5vw, 5.9rem); max-width: 16ch; }
.k-line { font-size: var(--step-1); color: var(--on-sky-2); max-width: 34ch; }
.k-hero .btn { margin-top: .6rem; white-space: normal; }
.k-small { font-size: .9rem; color: var(--on-sky-2); letter-spacing: .01em; }

.k-beat {
  position: relative; z-index: 3;
  display: grid; justify-items: center; align-content: center; gap: 1rem;
  padding: 12svh var(--gutter); text-align: center; background: var(--night);
}
.k-alef { font-family: var(--f-display); font-weight: 700; font-size: clamp(9rem, 30svh, 18rem); line-height: 1; color: #E4ECFA; }
.k-cap { font-size: var(--step-1); line-height: 1.35; color: var(--on-sky-2); max-width: 22ch; }
.k-cap strong { display: block; font-weight: 600; color: var(--on-sky); }
.k-he { font-family: var(--f-display); font-weight: 600; font-size: clamp(3rem, 7.2vw, 7.4rem); line-height: 1.25; color: #E4ECFA; }
.k-slot { display: inline-block; }
.k-en { font-family: var(--f-display); font-size: var(--step-2); color: var(--on-sky); }
.k-ref { font-size: .95rem; color: var(--on-sky-2); letter-spacing: .02em; }
.k-verse .k-cap { margin-top: 1.4rem; }
.k-edge, .g-edge { display: block; position: relative; z-index: 4; width: 100%; height: clamp(40px, 7vw, 110px); overflow: visible; fill: var(--bg); pointer-events: none; }
.k-edge { margin-top: calc(-1 * clamp(40px, 7vw, 110px) + 1px); }
.g-edge { margin-bottom: calc(-1 * clamp(40px, 7vw, 110px)); }
.k-edge-far { fill: var(--edge-far); }

/* ---- Kindle, told by scroll --------------------------------------------- */
.js-motion .kindle { background: var(--night); }
.js-motion .k-stage { height: 100vh; height: 100lvh; overflow: hidden; background: var(--night); }
.js-motion .k-scene { position: absolute; inset: 0; min-height: 0; }
.js-motion .k-plate { inset: 0; transform: translateY(22svh); will-change: transform; }
.js-motion .k-night, .js-motion .k-film { display: block; }
.js-motion .k-lit { opacity: 0; }
.js-motion .k-plate[data-live] .k-lit { visibility: hidden; }
.js-motion .k-dusk { display: block; position: absolute; inset: 0; background: var(--sky); opacity: 0; z-index: 0; }
.js-motion .k-plate { z-index: 1; }
.js-motion .k-veil {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(1, 12, 36, .72), rgba(1, 12, 36, .18) 55%, transparent 80%);
}
.js-motion .k-halo {
  display: block; position: absolute; z-index: 2; left: var(--ner-x, 50%); bottom: calc(4svh + 100lvh - 100svh); width: 70svh; height: 70svh;
  margin-left: -35svh; margin-bottom: -26svh; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 218, 245, .55), rgba(201, 218, 245, .16) 45%, transparent 72%);
  opacity: 0; transform: scale(.6);
}
.js-motion .k-ner { display: block; position: absolute; z-index: 3; left: var(--ner-x, 50%); bottom: calc(3.2svh + 100lvh - 100svh); height: 13svh; aspect-ratio: 100 / 120; transform: translateX(-50%); }
/* Layers that animate for the length of the pin, and only then. */
.js-motion .k-dusk, .js-motion .k-veil { will-change: opacity; }
.js-motion .k-halo, .js-motion .k-verse { will-change: transform, opacity; }
.k-ner svg { width: 100%; height: 100%; overflow: visible; }
/* Ner at night: the app's dark-theme skin (Ner.tsx), faceless like the
   streak flame; the pale copy of the flame is what the kindle lights. */
.k-ner { --ner-body: #79A6F7; --ner-vessel: #3E6BB8; --ner-hot: #F5F8FF; }
.js-motion .k-ner .ner-flame-lit { opacity: 0; }
.get-ner { --ner-body: #1A4FA0; --ner-vessel: #4E7EC4; --ner-hot: #FFFFFF; --ner-face: #12161C; }
.js-motion .k-he { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .23em; }
.js-motion .k-hero { position: absolute; inset: 0 0 auto; }
.js-motion .nav .brand-mark { opacity: .35; }
.js-motion .k-beat { position: absolute; inset: 0; padding: 0 var(--gutter); background: none; pointer-events: none; }
.js-motion .k-letter { grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: stretch; column-gap: 4vw; }
.js-motion .k-letter .k-alef { grid-column: 2; grid-row: 1; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.js-motion .k-letter .k-cap { grid-column: 1; grid-row: 1; justify-self: end; text-align: end; opacity: 0; }
.js-motion .k-verse { align-content: start; padding-top: calc(var(--nav-h) + 9svh); }
.js-motion .kw { display: inline-block; opacity: 0; transform: translateY(10px); }
.js-motion .k-slot { opacity: 0; }
.js-motion .k-en, .js-motion .k-ref, .js-motion .k-verse .k-cap { opacity: 0; }
/* After the pin the lit land scrolls up under a sheet of paper: this edge
   rides just behind the stage and overlaps its last few pixels. */
.js-motion .k-edge { margin-top: calc(-1 * clamp(40px, 7vw, 110px)); }
/* Until the kindle pin exists its spacer would push the edge down the first
   screen, a layout shift at load; once pinned, the edge is off-screen. */
.js-motion:not(.st-pinned) .k-edge { visibility: hidden; }

@media (max-width: 767px) {
  .k-hero { padding-top: calc(var(--nav-h) + 7svh); gap: .9rem; }
  .k-hero h1 { font-size: clamp(2.3rem, 10vw, 3.4rem); }
  .k-hero .btn { width: min(100%, 22rem); justify-content: space-between; }
  .k-plate { inset-block-start: 46svh; }
  .js-motion .k-plate { transform: translateY(30svh); }
  .js-motion .k-ner { height: 11svh; bottom: calc(2.4svh + 100lvh - 100svh); }
  .js-motion .k-verse { padding-top: calc(var(--nav-h) + 7svh); }
  .js-motion .k-letter { grid-template-columns: 1fr; grid-template-rows: auto auto; row-gap: 1.4rem; align-content: center; }
  .js-motion .k-letter .k-alef { grid-column: 1; grid-row: 1; justify-self: center; font-size: 44vw; }
  .js-motion .k-letter .k-cap { grid-column: 1; grid-row: 2; justify-self: center; text-align: center; }
  .k-he { font-size: 11vw; }
  .k-en { font-size: 1.1rem; }
}

/* =========================================================================
   The quiet chapters
   ========================================================================= */
.start, .table, .stories, .shabbat, .land, .faq { position: relative; padding-block: var(--section-y); }
.js-motion [data-rise] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js-motion [data-rise].in { opacity: 1; transform: none; }

/* ---- Start ---------------------------------------------------------------- */
.start-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.start h2 { margin-bottom: 2.4rem; }
.rows { display: grid; }
.row {
  display: grid; gap: .7rem; text-align: start; width: 100%;
  padding: 1.25rem 0 1.35rem; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer;
  transition: opacity .35s var(--ease-soft);
}
.row:last-child { border-bottom: 1px solid var(--line); }
.row-name { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem); line-height: 1.2; letter-spacing: -.01em; }
.bar { display: flex; gap: 3px; height: 7px; }
.seg { flex: var(--n) 1 0; min-width: 2px; border-radius: 2px; background: var(--line-strong); transform-origin: left center; forced-color-adjust: none; }
[dir="rtl"] .seg { transform-origin: right center; }
.seg.torah { background: var(--brand); }
.seg.known { opacity: .35; }
.row-then { font-size: 1.02rem; color: var(--ink-2); }
.js .rows:has(.row[aria-checked="true"]) .row[aria-checked="false"] { opacity: .62; }
.js .row[aria-checked="false"] .row-then { opacity: 0; }
.row:hover { opacity: 1 !important; }
.row:focus-visible { outline-offset: 6px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.2rem; font-size: .9rem; color: var(--ink-3); }
.sw { width: 18px; height: 7px; border-radius: 2px; background: var(--line-strong); }
.sw-torah { background: var(--brand); margin-inline-start: 1rem; }
.start-phone { justify-self: center; width: 100%; display: grid; justify-items: center; }
.start-phone .phone { position: relative; }
.shot { position: absolute; inset: 2.4%; width: 95.2%; height: 95.2%; border-radius: 11.6% / 5.4%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .45s var(--ease-soft); }
.shot.on { opacity: 1; }
.shot-dark { display: none; }
:root[data-theme="dark"] .shot-light { display: none; }
:root[data-theme="dark"] .shot-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .shot-light { display: none; }
  :root:not([data-theme]) .shot-dark { display: block; }
}
.js-motion .start .seg.torah { transform: scaleX(0); }
@media (max-width: 860px) {
  .start-grid { grid-template-columns: minmax(0, 1fr); }
  .start-phone .phone { --pw: 62vw !important; max-width: 280px; }
}

/* ---- Table ---------------------------------------------------------------- */
.table-in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.table h2 { font-size: var(--step-4); max-width: 20ch; }
/* a phrase that breaks as one piece, and still wraps inside when it must */
.nw { display: inline-block; }
.t-verse {
  position: relative; margin-top: clamp(2.5rem, 6vw, 4.5rem);
  font-family: var(--f-display); font-weight: 600; font-size: clamp(3.4rem, 1.4rem + 7.4vw, 8.6rem); line-height: 1.2; color: var(--ink);
}
.tw { position: relative; transition: color .25s var(--ease-soft); }
.t-or { display: inline-block; }
.t-pool {
  position: absolute; inset: -30% -40%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--paper-pale) 70%, transparent), transparent);
  opacity: .5; transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
:root[data-theme="dark"] .t-pool { background: radial-gradient(closest-side, rgba(121, 166, 247, .28), transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .t-pool { background: radial-gradient(closest-side, rgba(121, 166, 247, .28), transparent); } }
.table.playing .t-pool { opacity: 1; transform: scale(1.12); }
.tw.said { color: var(--brand); }
.t-ref { margin-top: .6rem; font-size: .95rem; color: var(--ink-3); letter-spacing: .02em; }
.t-ref a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.t-ref a:hover { color: var(--brand); text-decoration-color: currentColor; }
.t-switch {
  display: none; margin-top: 2.6rem; padding: 5px; border-radius: 999px; gap: 2px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.js .t-switch { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.t-switch button {
  border: 0; background: none; cursor: pointer; font-weight: 700; font-size: .98rem; color: var(--ink-2);
  min-height: 44px; padding: .5rem 1.3rem; border-radius: 999px;
  transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.t-switch button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(var(--shadow-rgb), .4); }
:root[data-theme="dark"] .t-switch button[aria-selected="true"] { background: var(--brand); color: var(--on-brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .t-switch button[aria-selected="true"] { background: var(--brand); color: var(--on-brand); } }

.t-quotes { display: grid; gap: 2rem; margin-top: 2.2rem; }
.js .t-quotes { gap: 0; }
.js .t-q { grid-area: 1 / 1; }
.js .t-q[hidden] { display: block; visibility: hidden; }
.t-q { margin: 0; width: min(100%, 34rem); justify-self: center; }
.t-q p { margin-inline: auto; max-width: 24ch; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.05rem); line-height: 1.3; letter-spacing: -.01em; }
.t-lab { display: block; margin-bottom: .4rem; font-size: .85rem; font-weight: 700; color: var(--brand); }
.js .t-lab { display: none; }
.js .t-q:not([hidden]) p { animation: quote-in .5s var(--ease) both; }
@keyframes quote-in { from { opacity: 0; transform: translateY(6px); } }
.t-foot { display: flex; align-items: center; gap: .7rem; margin-top: 2rem; min-height: 44px; }
.t-hear {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1.1rem .5rem .9rem;
  border: 0; border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--brand);
  background: var(--brand-tint); transition: transform .2s var(--ease-soft), background-color .2s;
}
.t-hear[hidden] { display: none; }
.t-hear svg { width: 20px; height: 20px; }
.t-hear:active { transform: scale(.97); }
.t-ai { font-size: .82rem; color: var(--ink-3); }
.t-line { margin-top: 2.2rem; font-size: var(--step-1); color: var(--ink-2); }

/* ---- Stories: the wall ---------------------------------------------------- */
.stories-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.stories-head .lede { margin-top: 1rem; }
.wall {
  list-style: none; margin: 0; padding: 0 8px;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
}
.tile { position: relative; aspect-ratio: 960 / 638; border-radius: var(--r-md); overflow: hidden; background: var(--paper-deep); }
.tile-link { position: absolute; inset: 0; display: block; color: inherit; border-radius: inherit; }
.tile-link:focus-visible { outline: 3px solid var(--on-sky); outline-offset: -3px; box-shadow: inset 0 0 0 6px #0A2450; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-soft); }
.tile-veil { position: absolute; inset: 0; background: #07101F; opacity: 0; pointer-events: none; }
.js-motion .tile-veil { opacity: .72; }
.tile-cap {
  position: absolute; inset: auto 0 0; padding: 1.6rem .7rem .55rem; display: grid; gap: .05rem;
  /* Dark under every line of text, the fade only in the empty top padding,
     so the words keep at least 4.5:1 over any picture (WCAG 1.4.3). */
  background: linear-gradient(to top, rgba(4, 16, 40, .9), rgba(4, 16, 40, .85) calc(100% - 1.6rem), rgba(4, 16, 40, 0));
  color: #F4F8FF; font-size: .8rem; line-height: 1.25; opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
}
.tile-cap [lang="he"] { font-family: var(--f-display); font-size: .95rem; }
.tile:hover img { transform: scale(1.04); }
.tile:hover .tile-cap, .tile-link:focus-visible .tile-cap { opacity: 1; transform: none; }
@media (hover: none) { .tile-cap { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[dir="ltr"] .tile-cap [lang="he"] { text-align: left; }
@media (max-width: 560px) {
  .wall { gap: 5px; padding: 0 5px; }
  .tile { border-radius: var(--r-sm); }
  .tile-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
}

/* ---- Shabbat: a week as one line ------------------------------------------
   Six streak flames, amber only while they are warm (the one place amber
   means what it means in the app), and on the seventh day Ner at rest, in
   techelet, with no flame asked of it. */
.shabbat-in { display: grid; justify-items: start; }
.shabbat .lede { margin-top: 1rem; }
.week {
  list-style: none; margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; padding: 0; width: 100%; position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line);
  --gx: 93%; --go: 1;
}
/* One warmth travels along the week and comes to rest on Shabbat. */
.week::before {
  content: ""; position: absolute; inset: -20% 0 0; z-index: -1; pointer-events: none; opacity: var(--go);
  background: radial-gradient(ellipse 12% 60% at var(--gx) 55%, color-mix(in srgb, var(--flame) 16%, transparent), transparent 70%);
}
[dir="rtl"] .week { --gx: 7%; }
.day { display: grid; justify-items: center; gap: 1rem; padding-block: 1.4rem 1.6rem; }
.day-art { width: 88px; height: 96px; display: grid; place-items: end center; position: relative; }
.day-art svg { position: absolute; bottom: 0; left: 50%; width: 72px; height: 82px; margin-left: -36px; transform-origin: 50% 90%; }
.day-art .warm { opacity: 1; }
.js-motion .day-art .warm { clip-path: inset(100% 0 0 0); }
.day-art .cool path { fill: var(--brand); }
.day-art .cool { opacity: .5; }
.day-art .warm path { fill: var(--flame); stroke: var(--flame); }
.day-art .warm path[fill="none"] { fill: none; }
.day-art .cool path[fill="none"] { fill: none; stroke: var(--brand); }
.day-rest .day-art { width: 96px; }
.day-rest .ner { position: absolute; bottom: -8px; left: 50%; width: 88px; height: 106px; margin-left: -44px; overflow: visible; --ner-body: var(--brand); --ner-vessel: color-mix(in srgb, var(--brand) 60%, var(--bg)); --ner-hot: #FFFFFF; }
.js-motion .day-rest .ner { opacity: .4; }
.day-name { font-size: .92rem; font-weight: 600; color: var(--ink-3); }
.day-rest .day-name { color: var(--ink); }
@media (max-width: 560px) {
  .day { gap: .7rem; }
  .day-art { width: 44px; height: 54px; }
  .day-art svg { width: 40px; height: 46px; margin-left: -20px; }
  .day-rest .day-art { width: 48px; }
  .day-rest .ner { width: 48px; height: 58px; margin-left: -24px; bottom: -4px; }
  .day-name { font-size: .78rem; }
}

/* ---- Land ------------------------------------------------------------------- */
.land { padding-bottom: calc(var(--section-y) * .7); }
.land-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.land-head .lede { margin-top: 1rem; }
.plate { position: relative; margin: 0 0 clamp(7rem, 12vw, 9rem); }
.plate-img { height: min(100svh, 62vw); overflow: hidden; background: var(--paper-deep); }
.plate-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: 50% 50%; }
.card {
  position: absolute; inset-inline-start: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); bottom: -5.5rem;
  width: min(390px, calc(100% - 2 * var(--gutter))); padding: 1.6rem 1.7rem 1.5rem; border-radius: var(--r-card);
  background: #F1F3F6; color: #12161C; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(18, 22, 28, .06), 0 30px 60px -30px rgba(4, 16, 40, .55);
}
.phrase-card { display: grid; justify-items: start; gap: .1rem; text-align: start; font: inherit; border: 0; cursor: pointer; transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft); }
.phrase-card:hover { transform: translateY(-2px); }
.phrase-card:active { transform: translateY(1px); }
.phrase-card:focus-visible, .place-card:focus-visible { outline: 2px solid #0A2450; outline-offset: 2px; box-shadow: 0 0 0 6px #F4F8FF; }
html:not(.js) .pc-tag { display: none; }
.pc-tag { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: #E4ECFA; color: #1A4FA0; font-size: .78rem; font-weight: 700; }
.pc-he { display: block; margin-top: .9rem; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.2rem, 1.6rem + 1.6vw, 2.9rem); line-height: 1.15; transform-origin: right center; }
.pc-tr { display: block; margin-top: .6rem; font-size: 1rem; color: #464E5A; }
.pc-en { display: block; font-size: 1.02rem; color: #12161C; font-weight: 600; }
.place-card { display: grid; gap: .3rem; }
.pl-name { font-family: var(--f-display); font-weight: 600; font-size: 2rem; line-height: 1.15; }
.pl-city { color: #464E5A; }
.pl-tabs { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .7rem; font-size: .95rem; font-weight: 600; color: #1A4FA0; }
/* Show large: the phrase filling the screen, to hold up to someone, as the
   app's own button does. */
.large { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--gutter); border: 0; background: #F1F3F6; color: #12161C; }
.large[open] { display: grid; place-items: center; align-content: center; gap: 3rem; }
.large::backdrop { background: rgba(4, 16, 40, .5); }
.large-he { font-family: var(--f-display); font-weight: 600; font-size: clamp(3.4rem, 14vw, 11rem); line-height: 1.05; text-align: center; }
.large .btn-quiet { color: #12161C; box-shadow: inset 0 0 0 1.5px #C3C9D3; }
.land-links, .stories-links { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.stories-links { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.land .lede a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.land .lede a:hover { color: var(--brand); text-decoration-color: currentColor; }
.more { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--brand); text-decoration: none; }
.more svg { width: 18px; height: 18px; transition: transform .3s var(--ease-soft); }
.more:hover svg { transform: translateX(3px); }
[dir="rtl"] .more:hover svg { transform: scaleX(-1) translateX(3px); }
.js-motion .card { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js-motion .card.in { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .plate-img { height: 70svh; }
  .card { inset-inline: var(--gutter); width: auto; bottom: -6rem; }
}

/* ---- Questions -------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq h2 { font-size: var(--step-4); }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none;
  padding: 1.25rem 0; font-weight: 600; font-size: 1.12rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); transition: transform .3s var(--ease-soft); }
.qa details[open] summary svg { transform: rotate(45deg); }
.answer { padding: 0 0 1.4rem; max-width: 56ch; color: var(--ink-2); }
.answer a { color: var(--brand); text-underline-offset: 3px; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Gate
   ========================================================================= */
.gate { position: relative; background: var(--glow); }
html:not(.js-motion) .g-stage { background: var(--glow); }
.js-motion .gate { background: var(--sky); }
.g-stage { position: relative; height: min(100svh, 56.25vw); overflow: hidden; background: var(--sky); }
.g-poster, .g-poster img, .g-first, .g-first img, .g-film, .g-bloom { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-poster img, .g-first img { object-fit: cover; }
/* The still page ends on the gate close up, fading into the light below. */
.g-poster img { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.js-motion .g-poster img { -webkit-mask-image: none; mask-image: none; }
.g-film, .g-arch, .g-first, .g-bloom { display: none; }
.js-motion .g-stage { height: 100vh; height: 100lvh; }
.js-motion .g-film, .js-motion .g-first { display: block; }
.js-motion .g-stage[data-live] .g-first { visibility: hidden; }
/* no film and no close-up still yet: stay on the lit valley, with no arch */
.js-motion .g-stage:not([data-live]):not([data-poster]) .g-first { opacity: 1 !important; }
.js-motion .g-stage:not([data-live]):not([data-poster]) .g-arch { visibility: hidden; }
/* The light blooms out of the opening with a soft edge, and never reads as
   a shape laid over the paper. */
.js-motion .g-bloom {
  display: block; pointer-events: none; opacity: 0; --r: 0px;
  background: radial-gradient(circle at var(--ax, 50%) var(--ay, 45%), var(--glow) 0 var(--r), rgba(224, 239, 255, 0) calc(var(--r) * 1.5 + 40px));
}
.js-motion .g-arch {
  display: block; position: absolute; left: 0; top: 0; width: 100px; height: 200px;
  /* brighter than the film's own opening, so it reads as light arriving */
  background: #F7FBFF; box-shadow: 0 0 48px 16px var(--glow); opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity;
}
@media (max-aspect-ratio: 1/1) { .g-stage { height: min(100svh, 178vw); } }
/* very narrow, or text at 200%: the verse and the week still fit */
@media (max-width: 19.9em) {
  .t-verse { font-size: 15vw; }
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .week::before { display: none; }
}

/* ---- Get: always paper --------------------------------------------------- */
.get, .foot, .large {
  --bg: #F1F3F6; --surface: #FFFFFF; --surface-2: #E9ECF1; --ink: #12161C; --ink-2: #464E5A; --ink-3: #5F6873;
  --line: #D9DDE4; --line-strong: #C3C9D3; --field-line: #7C8592; --brand: #1A4FA0; --brand-hover: #16407F; --brand-edge: #0A2450;
  --brand-tint: #E4ECFA; --on-brand: #FFFFFF; --shadow-rgb: 18, 22, 28;
  color-scheme: light; color: var(--ink);
}
.get { position: relative; margin-top: -1px; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(5rem, 10vw, 8rem); background: linear-gradient(to bottom, var(--glow), #F1F3F6 70%); }
.get-in { display: grid; justify-items: center; text-align: center; }
.get-ner { width: 64px; margin-bottom: 1.6rem; }
.get-ner svg { width: 100%; height: auto; overflow: visible; }
.get h2 { font-size: var(--step-5); max-width: 14ch; }
.get .lede { margin-top: 1rem; }
.get .waitlist { margin-top: 2.4rem; width: min(100%, 560px); text-align: start; }

.foot { background: #F1F3F6; border-top: 1px solid #D9DDE4; padding-block: 2.4rem 3rem; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.foot .brand { font-size: 1.1rem; }
.foot .brand svg { width: 24px; height: 24px; }
.foot-links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.foot-links a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; }
.foot-links a:hover { color: var(--ink); }
.foot-note { margin-inline-start: auto; font-size: .88rem; color: var(--ink-3); }
@media (max-width: 700px) { .foot-note { margin-inline-start: 0; width: 100%; } }
.foot .foot-legal { margin-top: .4rem; }

/* =========================================================================
   Reduced motion: every message and action, nothing moving.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .nav-pill, .row, .shot, .tile img, .tile-cap, .t-switch button, .t-pool, .more svg, .qa summary svg, .t-hear, .phrase-card { transition: none; }
  .js .t-q:not([hidden]) p { animation: none; }
}

/* Forced colours: every control keeps an edge, the selected tab keeps its
   highlight in any theme, and the legend's swatches keep their colours. */
@media (forced-colors: active) {
  .t-switch, .t-hear, .btn, .phrase-card { border: 1px solid ButtonText; }
  .sw { forced-color-adjust: none; }
  :root:is([data-theme], :not([data-theme])) .t-switch button[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}