/* =========================================================================
   HIDDEN TORAH — התורה הנסתרת
   A design system for study by candlelight.

   Two worlds:  [data-theme="night"]  ink and gold leaf   (default)
                [data-theme="day"]    vellum and iron gall ink

   Everything is drawn in CSS. No images.
   ========================================================================= */

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

::selection { background: rgba(201,162,39,.28); color: var(--text-bright); }

/* ------------------------------------------------------------------ tokens */

:root {
  /* type ------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:    'EB Garamond', 'Iowan Old Style', Georgia, serif;

  /* Local, professionally-hinted Hebrew faces win when the reader has
     them installed; Google webfonts are the fallback. Ordering matters —
     the first three names in each stack carry cantillation properly. */
  --font-ashkenaz: 'Taamey Frank CLM', 'Taamey Ashkenaz', 'Frank Ruhl Libre',
                   'FrankRuehl', 'SBL Hebrew', 'Times New Roman', serif;
  --font-sephardi: 'Keter YG', 'Shofar', 'David Libre',
                   'David', 'Noto Serif Hebrew', 'SBL Hebrew', serif;
  --font-teimani:  'Keter Aram Tsova', 'Taamey David CLM', 'Noto Serif Hebrew',
                   'SBL Hebrew', 'Ezra SIL', serif;

  --font-hebrew: var(--font-ashkenaz);   /* rebound by the nusach switcher */

  --fs-body:  clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-small: .8125rem;
  --fs-micro: .6875rem;

  /* the letterspaced small-caps label used throughout */
  --track-label: .34em;

  /* rhythm ----------------------------------------------------------- */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 46rem;
  --section-y: clamp(5rem, 12vh, 9rem);

  /* motion — slow. nothing here is in a hurry. ----------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: 1.1s;
  --med: .55s;
  --fast: .25s;
}

/* --- night: the default. ink, candle, gold leaf. ------------------- */
[data-theme="night"] {
  --bg:          #07060a;
  --bg-raised:   #0d0b12;
  --bg-sunken:   #050409;
  --bg-panel:    #100d17;

  --text:        #d9d1bf;
  --text-bright: #f2ece0;
  --text-dim:    #8b8271;
  --text-faint:  #56503f;

  --gold:        #c9a227;
  --gold-bright: #f0dda0;
  --gold-dim:    #7e631a;
  --gold-glow:   rgba(201, 162, 39, .16);

  --tekhelet:    #4a7fb5;
  --crimson:     #b04a3c;

  --line:        rgba(201, 162, 39, .18);
  --line-soft:   rgba(201, 162, 39, .09);
  --shadow:      0 24px 70px -20px rgba(0, 0, 0, .9);

  --noise-opacity: .04;
  --star-opacity: 1;
  --vignette-opacity: 1;
  color-scheme: dark;
}

/* --- day: aged vellum, iron gall, rubrication ---------------------- */
[data-theme="day"] {
  --bg:          #efe8d8;
  --bg-raised:   #f7f1e4;
  --bg-sunken:   #e5dcc7;
  --bg-panel:    #f9f4e9;

  --text:        #241f18;
  --text-bright: #100d08;
  --text-dim:    #6b6151;
  --text-faint:  #a2977f;

  --gold:        #8a6a16;
  --gold-bright: #6b5210;
  --gold-dim:    #b9a45f;
  --gold-glow:   rgba(138, 106, 22, .10);

  --tekhelet:    #2c5a8a;
  --crimson:     #8f2f22;

  --line:        rgba(90, 68, 20, .26);
  --line-soft:   rgba(90, 68, 20, .13);
  --shadow:      0 20px 50px -24px rgba(60, 44, 12, .45);

  --noise-opacity: .055;
  --star-opacity: 0;          /* no stars by daylight */
  --vignette-opacity: .32;    /* but the page still darkens at its edges */
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------- atmosphere (fixed) */

/* grain — a fine tooth over everything, like paper or film */
body::before {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* vignette — one light source, centred, falling off into the dark */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, transparent 40%, rgba(0,0,0,.5) 100%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 45%, rgba(0,0,0,.42) 100%);
  opacity: var(--vignette-opacity);
  transition: opacity var(--slow) var(--ease);
}

/* starfield — three layers of dust, only at night */
.firmament {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--star-opacity);
  transition: opacity var(--slow) var(--ease);
  background-image:
    radial-gradient(1px 1px at 12% 18%,  rgba(240,221,160,.55), transparent),
    radial-gradient(1px 1px at 74% 9%,   rgba(240,221,160,.40), transparent),
    radial-gradient(1px 1px at 31% 62%,  rgba(255,255,255,.30), transparent),
    radial-gradient(1px 1px at 88% 44%,  rgba(240,221,160,.45), transparent),
    radial-gradient(1px 1px at 57% 78%,  rgba(255,255,255,.22), transparent),
    radial-gradient(1px 1px at 6%  86%,  rgba(240,221,160,.35), transparent),
    radial-gradient(1px 1px at 45% 31%,  rgba(255,255,255,.26), transparent),
    radial-gradient(1px 1px at 94% 71%,  rgba(240,221,160,.30), transparent),
    radial-gradient(2px 2px at 22% 40%,  rgba(201,162,39,.22),  transparent),
    radial-gradient(2px 2px at 68% 55%,  rgba(201,162,39,.18),  transparent);
  animation: breathe 14s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: calc(var(--star-opacity) * .55); }
  50%      { opacity: calc(var(--star-opacity) * 1); }
}

/* everything that isn't atmosphere sits above it */
.page { position: relative; z-index: 2; }

/* ------------------------------------------------------ shared elements */

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 52rem; }

/* the letterspaced small-cap label. used for every eyebrow on the site. */
.label {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  /* EB Garamond defaults to oldstyle figures, which sit below the caps */
  font-variant-numeric: lining-nums tabular-nums;
}
.label--dim { color: var(--text-faint); }

/* a manuscript rule: hairline — lozenge — hairline */
.rule {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  color: var(--gold);
}
.rule::before, .rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
}
.rule > span {
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--gold);
  opacity: .75;
  flex: none;
}
.rule--tight::before, .rule--tight::after { max-width: 4rem; }

h2.section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.1;
  color: var(--text-bright);
  letter-spacing: .01em;
}
.section-title em {
  font-style: italic;
  color: var(--gold);
}

.section-lede {
  max-width: 40rem;
  color: var(--text-dim);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.he { font-family: var(--font-hebrew); direction: rtl; unicode-bidi: isolate; }

/* Hebrew set at scripture size needs air for the ta'amim above and below */
.he-verse {
  font-family: var(--font-hebrew);
  direction: rtl;
  text-align: right;
  line-height: 2.05;
  font-weight: 400;
  font-variant-ligatures: none;
}

section { padding-block: var(--section-y); position: relative; }

/* reveal-on-scroll, driven by IntersectionObserver in app.js */
.rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.rise.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
}

/* ============================================================== THE GATE */

.gate {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  /* the deep bottom padding keeps the actions clear of the scroll cue */
  padding: 5rem var(--gutter) 10rem;
  overflow: hidden;
}

/* the light behind the letters */
.gate::before {
  content: '';
  position: absolute;
  left: 50%; top: 46%;
  width: min(160vw, 70rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 62%);
  pointer-events: none;
  animation: pulse 11s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .6; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%,-50%) scale(1.06); }
}

.gate__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 2rem; }

/* --- the wheel of 22 letters (Sefer Yetzirah: 3 mothers, 7 doubles, 12 simples) */
.wheel {
  position: relative;
  width: min(84vw, 34rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: -1rem;
}
.wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* A pool of dark at the centre of the wheel. Letters on the inner rings
   rotate behind the title and are absorbed by it rather than colliding.
   Sized off the square wheel, so it stays symmetrical at every width. */
.wheel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 19% at 50% 50%,
    var(--bg) 0%, var(--bg) 42%, transparent 100%);
}

.wheel__ring { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.wheel__ring--lit { stroke: var(--line); }

.wheel__letter {
  font-family: var(--font-hebrew);
  fill: var(--gold);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill var(--med) var(--ease), opacity var(--med) var(--ease);
}
.wheel__group { transform-origin: 50% 50%; transform-box: fill-box; }

.wheel__group--simples { animation: spin 300s linear infinite; }
.wheel__group--doubles { animation: spin 210s linear infinite reverse; }
.wheel__group--mothers { animation: spin 140s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* counter-rotate each glyph so letters stay upright while the ring turns */
.wheel__spin { transform-origin: center; transform-box: fill-box; }
.wheel__group--simples .wheel__spin { animation: spin 300s linear infinite reverse; }
.wheel__group--doubles .wheel__spin { animation: spin 210s linear infinite; }
.wheel__group--mothers .wheel__spin { animation: spin 140s linear infinite reverse; }

.wheel__core {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .35rem;
  justify-items: center;
}

.gate__he {
  font-family: var(--font-hebrew);
  direction: rtl;
  font-size: clamp(2.4rem, 1.3rem + 5vw, 5rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-bright);
  text-shadow: 0 0 42px var(--gold-glow), 0 0 90px var(--gold-glow);
}

.gate__en {
  font-family: var(--font-display);
  font-size: clamp(.7rem, .6rem + .35vw, .875rem);
  letter-spacing: .52em;
  text-indent: .52em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.gate__lede {
  max-width: 34rem;
  color: var(--text-dim);
  font-size: clamp(1rem, .95rem + .3vw, 1.1875rem);
  line-height: 1.8;
  font-style: italic;
  text-wrap: balance;
}
.gate__lede b { color: var(--text); font-style: normal; font-weight: 400; }

.gate__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* --- buttons ------------------------------------------------------- */

.btn {
  --btn-fg: var(--gold);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 2rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid var(--line);
  background: transparent;
  transition: color var(--med) var(--ease), border-color var(--med) var(--ease),
              background-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.btn::before, .btn::after {
  content: '';
  position: absolute;
  width: 7px; height: 7px;
  border: 1px solid var(--gold);
  opacity: 0;
  transition: opacity var(--med) var(--ease), inset var(--med) var(--ease);
}
.btn::before { inset: -1px auto auto -1px; border-width: 1px 0 0 1px; }
.btn::after  { inset: auto -1px -1px auto; border-width: 0 1px 1px 0; }
.btn:hover, .btn:focus-visible {
  color: var(--gold-bright);
  border-color: rgba(201,162,39,.42);
  background: rgba(201,162,39,.05);
  box-shadow: 0 0 40px -12px var(--gold-glow);
}
.btn:hover::before, .btn:hover::after,
.btn:focus-visible::before, .btn:focus-visible::after { opacity: 1; }
.btn:hover::before { inset: -5px auto auto -5px; }
.btn:hover::after  { inset: auto -5px -5px auto; }

.btn--ghost { --btn-fg: var(--text-dim); border-color: transparent; }
.btn--ghost:hover { --btn-fg: var(--gold); }

/* --- scroll cue ---------------------------------------------------- */
.gate__cue {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  gap: .8rem;
  justify-items: center;
  color: var(--text-faint);
}
.gate__cue .label { color: var(--text-faint); font-size: .625rem; }
.gate__cue i {
  display: block;
  width: 1px; height: 3.2rem;
  background: linear-gradient(var(--gold), transparent);
  animation: drip 3.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drip {
  0%       { transform: scaleY(0);   opacity: 0; }
  35%      { transform: scaleY(1);   opacity: 1; }
  100%     { transform: scaleY(1);   opacity: 0; transform-origin: bottom; }
}

/* ============================================================ NAVIGATION */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .7rem var(--gutter);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.topbar__mark {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex: none;
}
.topbar__mark .he {
  font-size: 1.35rem;
  color: var(--gold);
  line-height: 1;
}
.topbar__mark span {
  font-family: var(--font-display);
  font-size: .625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.topbar__spacer { flex: 1; }

.navlink {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: color var(--med) var(--ease), border-color var(--med) var(--ease);
  white-space: nowrap;
}
.navlink:hover, .navlink[aria-current="page"] { color: var(--gold); border-color: var(--line); }

/* --- the nusach switcher: three traditions ------------------------- */

.nusach {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-soft);
  flex: none;
}
.nusach button {
  position: relative;
  padding: .42rem .8rem;
  font-family: var(--font-hebrew);
  font-size: .95rem;
  line-height: 1.4;
  color: var(--text-faint);
  border-right: 1px solid var(--line-soft);
  transition: color var(--med) var(--ease), background-color var(--med) var(--ease);
}
.nusach button:last-child { border-right: 0; }
.nusach button:hover { color: var(--text); }
.nusach button[aria-pressed="true"] {
  color: var(--gold-bright);
  background: rgba(201,162,39,.08);
}
.nusach button[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -1px;
  width: 4px; height: 4px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--gold);
}
/* each button previews its own tradition's face */
.nusach button[data-nusach="ashkenaz"] { font-family: var(--font-ashkenaz); }
.nusach button[data-nusach="sephardi"] { font-family: var(--font-sephardi); }
.nusach button[data-nusach="teimani"]  { font-family: var(--font-teimani); }

/* --- theme toggle (a waxing/waning lamp) --------------------------- */
.lamp {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  border: 1px solid transparent;
  transition: color var(--med) var(--ease), border-color var(--med) var(--ease);
}
.lamp:hover { color: var(--gold); border-color: var(--line-soft); }
.lamp svg { width: 15px; height: 15px; fill: currentColor; }
[data-theme="night"] .lamp .lamp--sun { display: none; }
[data-theme="day"]   .lamp .lamp--moon { display: none; }

/* ========================================================== THE FIVE BOOKS */

/* Five books want five columns. Anything that divides five unevenly
   leaves a hole, so the last card spans the remainder when it wraps. */
.books {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: 3.5rem;
}
@media (max-width: 64rem) {
  .books { grid-template-columns: repeat(2, 1fr); }
  .book:last-child { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .books { grid-template-columns: 1fr; }
  .book:last-child { grid-column: auto; }
}

.book {
  position: relative;
  display: grid;
  gap: .5rem;
  justify-items: center;
  padding: 2.6rem 1.1rem 2.1rem;
  background: var(--bg);
  text-align: center;
  overflow: hidden;
  transition: background-color var(--slow) var(--ease);
}
.book::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--gold-glow), transparent 70%);
  opacity: 0;
  transition: opacity var(--slow) var(--ease);
}
.book:hover { background: var(--bg-raised); }
.book:hover::before { opacity: 1; }

.book__num {
  font-family: var(--font-display);
  font-size: .625rem;
  letter-spacing: .3em;
  color: var(--text-faint);
  position: relative;
}
.book__he {
  font-family: var(--font-hebrew);
  direction: rtl;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.25;
  color: var(--text-bright);
  position: relative;
  transition: color var(--med) var(--ease), text-shadow var(--med) var(--ease);
}
.book:hover .book__he { color: var(--gold-bright); text-shadow: 0 0 30px var(--gold-glow); }
.book__en {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-dim);
  position: relative;
}
.book__meta {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  letter-spacing: .08em;
  position: relative;
  font-variant-numeric: tabular-nums;
}

/* ==================================================== THE THREE TRADITIONS */

.traditions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
/* three abreast or stacked — never two with an orphan */
@media (max-width: 64rem) { .traditions { grid-template-columns: 1fr; } }

.tradition {
  position: relative;
  display: grid;
  gap: 1.1rem;
  padding: 2.2rem 1.8rem;
  border: 1px solid var(--line-soft);
  background: var(--bg-raised);
  text-align: left;
  transition: border-color var(--med) var(--ease), background-color var(--med) var(--ease),
              transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}
.tradition:hover {
  border-color: var(--line);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.tradition[aria-pressed="true"] {
  border-color: rgba(201,162,39,.45);
  background: color-mix(in srgb, var(--gold) 5%, var(--bg-raised));
}
/* corner marks on the selected tradition */
.tradition[aria-pressed="true"]::before,
.tradition[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--gold);
}
.tradition[aria-pressed="true"]::before { inset: 6px auto auto 6px; border-width: 1px 0 0 1px; }
.tradition[aria-pressed="true"]::after  { inset: auto 6px 6px auto; border-width: 0 1px 1px 0; }

.tradition__he {
  direction: rtl;
  font-size: 1.9rem;
  line-height: 1.3;
  color: var(--text-bright);
}
.tradition__en {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}
.tradition__sample {
  direction: rtl;
  text-align: right;
  font-size: 1.45rem;
  line-height: 2.1;
  color: var(--text);
  padding-block: 1rem;
  border-block: 1px solid var(--line-soft);
}
.tradition__note {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-dim);
}
.tradition__note strong { color: var(--text); font-weight: 500; }

/* per-card faces, so all three are visible side by side at once */
.tradition[data-nusach="ashkenaz"] .tradition__he,
.tradition[data-nusach="ashkenaz"] .tradition__sample { font-family: var(--font-ashkenaz); }
.tradition[data-nusach="sephardi"] .tradition__he,
.tradition[data-nusach="sephardi"] .tradition__sample { font-family: var(--font-sephardi); }
.tradition[data-nusach="teimani"]  .tradition__he,
.tradition[data-nusach="teimani"]  .tradition__sample { font-family: var(--font-teimani); }

/* ========================================================= THE INSTRUMENTS */

.instruments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: 3.5rem;
}

.instrument {
  position: relative;
  display: grid;
  gap: .55rem;
  align-content: start;
  padding: 1.9rem 1.5rem 1.7rem;
  background: var(--bg);
  min-height: 11rem;
  transition: background-color var(--med) var(--ease);
}
.instrument:hover { background: var(--bg-raised); }

.instrument__glyph {
  font-family: var(--font-hebrew);
  direction: rtl;
  unicode-bidi: isolate;
  /* keep the letters in Hebrew order but sit them on the card's left edge,
     clear of the state badge pinned to the right */
  text-align: left;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--gold);
  opacity: .85;
  margin-bottom: .3rem;
  transition: opacity var(--med) var(--ease), text-shadow var(--med) var(--ease);
}
.instrument:hover .instrument__glyph { opacity: 1; text-shadow: 0 0 24px var(--gold-glow); }

.instrument__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-bright);
  letter-spacing: .02em;
}
.instrument__he {
  font-family: var(--font-hebrew);
  direction: rtl;
  font-size: .95rem;
  color: var(--text-dim);
}
.instrument__desc {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-dim);
}

.instrument__state {
  position: absolute;
  top: 1.1rem; right: 1.2rem;
  font-family: var(--font-display);
  font-size: .5625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border: 1px solid var(--line-soft);
  color: var(--text-faint);
}
.instrument[data-state="live"] .instrument__state {
  color: var(--gold);
  border-color: rgba(201,162,39,.35);
}

/* ===================================================== GEMATRIA WORKBENCH */

.bench {
  border: 1px solid var(--line);
  background: var(--bg-raised);
  margin-top: 3rem;
  box-shadow: var(--shadow);
}

.bench__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.bench__head .label { flex: 1; }

.bench__input {
  width: 100%;
  padding: 2.1rem 1.5rem;
  font-family: var(--font-hebrew);
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: 1.9;
  direction: rtl;
  text-align: center;
  color: var(--text-bright);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
}
.bench__input::placeholder { color: var(--text-faint); opacity: .6; }
.bench__input:focus { outline: none; background: rgba(201,162,39,.03); }

.bench__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--line-soft);
}
.bench__cell {
  display: grid;
  gap: .3rem;
  padding: 1.15rem 1.2rem;
  background: var(--bg-raised);
}
.bench__cell dt {
  font-family: var(--font-display);
  font-size: .5625rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bench__cell dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums lining-nums;
}
.bench__cell dd.is-he {
  font-family: var(--font-hebrew);
  direction: rtl;
  color: var(--text-bright);
  font-size: 1.5rem;
}

/* letter-by-letter breakdown */
.breakdown {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  gap: .4rem;
  padding: 1.4rem 1.5rem;
  direction: rtl;
  border-top: 1px solid var(--line-soft);
  min-height: 5.5rem;
  align-items: center;
}
.glyph {
  display: grid;
  justify-items: center;
  gap: .15rem;
  padding: .5rem .55rem .35rem;
  border: 1px solid var(--line-soft);
  min-width: 2.9rem;
  background: var(--bg);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.glyph:hover { border-color: var(--line); transform: translateY(-2px); }
.glyph b {
  font-family: var(--font-hebrew);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--text-bright);
}
.glyph i {
  font-family: var(--font-display);
  font-style: normal;
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.glyph em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ==================================================== READER (read.html) */

.reader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  min-height: calc(100vh - 3.4rem);
  align-items: start;
}
@media (max-width: 60rem) {
  .reader { grid-template-columns: minmax(0, 1fr); }
}

/* --- chapter navigation strip -------------------------------------- */
.chapbar {
  position: sticky;
  top: 3.4rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem var(--gutter);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow-x: auto;
  scrollbar-width: thin;
}

.select {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.select select {
  appearance: none;
  padding: .4rem 2rem .4rem .8rem;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: border-color var(--med) var(--ease), color var(--med) var(--ease);
}
.select select:hover { border-color: var(--line); color: var(--gold); }
.select::after {
  content: '';
  position: absolute;
  right: .75rem;
  width: 4px; height: 4px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color var(--med) var(--ease);
  cursor: pointer;
}
.toggle:hover { color: var(--text-dim); }
.toggle i {
  width: 1.6rem; height: .85rem;
  border: 1px solid var(--line-soft);
  position: relative;
  flex: none;
  transition: border-color var(--med) var(--ease), background-color var(--med) var(--ease);
}
.toggle i::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: .55rem; height: calc(100% - 2px);
  background: var(--text-faint);
  transition: transform var(--med) var(--ease), background-color var(--med) var(--ease);
}
.toggle[aria-pressed="true"] { color: var(--gold); }
.toggle[aria-pressed="true"] i { border-color: rgba(201,162,39,.4); background: rgba(201,162,39,.08); }
.toggle[aria-pressed="true"] i::after { transform: translateX(calc(1.6rem - .55rem - 4px)); background: var(--gold); }

/* --- the scripture column ------------------------------------------ */

.scripture {
  padding: clamp(2rem, 6vh, 4.5rem) var(--gutter) 8rem;
  max-width: 58rem;
  margin-inline: auto;
  width: 100%;
}

.scripture__head {
  display: grid;
  gap: .9rem;
  justify-items: center;
  text-align: center;
  margin-bottom: 3.2rem;
}
.scripture__book {
  font-family: var(--font-hebrew);
  direction: rtl;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  line-height: 1.2;
  color: var(--text-bright);
}
.scripture__chap {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}

/* the illuminated opening letter */
.illum {
  float: right;
  margin: .1em 0 .15em .45em;
  font-family: var(--font-hebrew);
  font-size: 3.6em;
  line-height: .92;
  color: var(--gold);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold) 45%, var(--gold-dim));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px var(--gold-glow));
  padding-inline: .06em;
}

.verses {
  font-family: var(--font-hebrew);
  direction: rtl;
  text-align: right;
  font-size: clamp(1.35rem, 1.1rem + 1.05vw, 1.85rem);
  line-height: 2.15;
  color: var(--text);
}

.verse {
  display: block;
  padding: .18rem .5rem .18rem 0;
  border-right: 1px solid transparent;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  scroll-margin-top: 8rem;
}
.verse:hover { background: color-mix(in srgb, var(--gold) 3.5%, transparent); }
.verse.is-target {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border-right-color: var(--gold);
}

/* verse number, set in Hebrew numerals in the margin */
.verse__n {
  font-family: var(--font-hebrew);
  font-size: .5em;
  color: var(--gold);
  opacity: .55;
  vertical-align: .55em;
  margin-left: .45em;
  user-select: none;
  transition: opacity var(--fast) var(--ease);
  font-variant-ligatures: none;
}
.verse:hover .verse__n { opacity: 1; }

/* a word — the atom of the whole site */
.w {
  cursor: pointer;
  border-radius: 2px;
  padding-inline: .04em;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.w:hover { color: var(--gold-bright); background: rgba(201,162,39,.09); }
.w.is-picked {
  color: var(--gold-bright);
  background: rgba(201,162,39,.16);
  box-shadow: inset 0 -1px 0 var(--gold);
}

/* the star in the margin where the two witnesses disagree */
.verse__flag {
  font-size: .48em;
  color: var(--tekhelet);
  vertical-align: .5em;
  padding: 0 .25em;
  line-height: 1;
  opacity: .75;
  transition: opacity var(--fast) var(--ease), text-shadow var(--fast) var(--ease);
}
.verse__flag:hover {
  opacity: 1;
  text-shadow: 0 0 14px color-mix(in srgb, var(--tekhelet) 70%, transparent);
}

/* petuchah and setumah — the scribal breaks between sections */
.parashah {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  margin-block: .4rem;
}
.parashah span {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-soft) 30%, var(--line-soft) 70%, transparent);
}
/* an open break runs the full measure; a closed break is a short gap */
.parashah--petucha span { width: 100%; }
.parashah--setuma  span { width: 5rem; }
.parashah--setuma::before,
.parashah--setuma::after {
  content: '';
  width: 3px; height: 3px;
  margin-inline: .6rem;
  transform: rotate(45deg);
  background: var(--gold);
  opacity: .4;
}

/* equidistant-letter-sequence hits, once that tool is wired up */
.els-hit {
  color: var(--tekhelet);
  text-shadow: 0 0 16px color-mix(in srgb, var(--tekhelet) 55%, transparent);
  font-weight: 500;
}

/* display modes toggled from the chapter bar */
.verses.no-teamim { --hide-teamim: 1; }

/* --- analysis panel ------------------------------------------------- */

.panel {
  position: sticky;
  top: 3.4rem;
  align-self: start;
  /* fill the column even on a short chapter, so the rule down the side
     runs the height of the page instead of stopping in mid-air */
  min-height: calc(100vh - 3.4rem);
  max-height: calc(100vh - 3.4rem);
  overflow-y: auto;
  border-left: 1px solid var(--line-soft);
  background: var(--bg-panel);
  padding: 1.6rem 1.5rem 4rem;
  display: grid;
  gap: 1.5rem;
  align-content: start;
  scrollbar-width: thin;
}
@media (max-width: 60rem) {
  .panel {
    position: static;
    min-height: 0;
    max-height: none;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

.panel__empty {
  display: grid;
  gap: .8rem;
  justify-items: center;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-faint);
}
.panel__empty .he { font-size: 2.2rem; color: var(--gold); opacity: .35; }
.panel__empty p { font-size: var(--fs-small); line-height: 1.7; max-width: 15rem; }

.panel__word {
  display: grid;
  gap: .5rem;
  justify-items: center;
  text-align: center;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line-soft);
}
.panel__word b {
  font-family: var(--font-hebrew);
  direction: rtl;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-bright);
}
.panel__word span { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }

.panel__rows { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.panel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .85rem;
  background: var(--bg-panel);
}
.panel__row dt {
  font-family: var(--font-display);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.panel__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums lining-nums;
}
.panel__row dd.is-he {
  font-family: var(--font-hebrew);
  direction: rtl;
  font-size: 1.25rem;
  color: var(--text-bright);
}

.panel h3 {
  font-family: var(--font-display);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .7rem;
}

/* ================================================================ FOOTER */

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 4rem var(--gutter) 3rem;
  background: var(--bg-sunken);
}
.foot__grid {
  max-width: 74rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.5rem;
}
.foot h4 {
  font-family: var(--font-display);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
}
.foot li { margin-bottom: .45rem; }
.foot a, .foot p { font-size: var(--fs-small); color: var(--text-dim); line-height: 1.7; }
.foot a { transition: color var(--med) var(--ease); }
.foot a:hover { color: var(--gold); }

.foot__seal {
  max-width: 74rem;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.foot__seal .he { font-size: 1.05rem; color: var(--text-faint); }
.foot__seal small { font-size: var(--fs-micro); letter-spacing: .1em; color: var(--text-faint); }

/* ---------------------------------------------------------- utilities */

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stack { display: grid; gap: 1.2rem; }
.center { justify-items: center; text-align: center; }

@media (max-width: 44rem) {
  .topbar { gap: .7rem; padding-inline: 1rem; }
  .topbar .navlink { display: none; }
  /* keep the Hebrew mark, drop the latin, and tighten the switcher so the
     three traditions and the lamp all stay on screen at 375px */
  .topbar__mark span:not(.he) { display: none; }
  .topbar__mark .he { font-size: 1rem; }
  .nusach button { padding: .38rem .5rem; font-size: .82rem; }
  .gate { min-height: 92svh; }
}