/* Corpus, one-page site.
   Theme: single dark manuscript-night theme, locked.
   Shapes: cards 18px, buttons and chips full-pill. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-garamond-v21-latin_latin-ext-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-garamond-v21-latin_latin-ext-500italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-garamond-v21-latin_latin-ext-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-v9-latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-v9-latin_latin-ext-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-v9-latin_latin-ext-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Neither display face carries Cyrillic, so Russian would drop to a system
   font. These cover just that range, keeping the page's own voice: Cormorant
   behind Cormorant Garamond, Inter behind Figtree.

   Each weight is declared on its own. A single face spanning `400 700` reads
   as a variable font and wins the family's weight match outright; its
   unicode-range then excludes Latin, and the browser leaves the family
   altogether rather than falling back to the Latin faces above — which
   silently dropped every Latin heading and paragraph to a system font. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-v24-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-v24-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-v24-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/inter-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/inter-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/inter-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Menbere';
  src: url('assets/fonts/menbere-v1-ethiopic_latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('assets/fonts/frank-ruhl-libre-v23-hebrew_latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Heebo';
  src: url('assets/fonts/heebo-v28-hebrew_latin_latin-ext_math_symbols-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('assets/fonts/amiri-v30-arabic_latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('assets/fonts/cairo-v31-arabic_latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Devanagari';
  src: url('assets/fonts/noto-serif-devanagari-v34-devanagari_latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/poppins-v24-devanagari_latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Thai';
  src: url('assets/fonts/noto-serif-thai-v28-latin_latin-ext_thai-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('assets/fonts/noto-sans-thai-v29-thai-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* 4 MB against a Latin face's 14 kB, and it still leads the Chinese stack:
   every face this page uses is served from this server, so the page reads the
   same everywhere and never depends on what the visitor happens to have
   installed. It is fetched only when Chinese is chosen. */
@font-face {
  font-family: 'Noto Sans SC';
  src: url('assets/fonts/noto-sans-sc-v40-chinese-simplified_cyrillic_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ink: #12100c;
  --ink-2: #181510;
  --ink-3: #1f1b14;
  --bone: #eae3d3;
  --bone-dim: rgba(234, 227, 211, 0.64);
  --bone-faint: rgba(234, 227, 211, 0.42);
  --gold: #c9a35c;
  --gold-bright: #e3c084;
  --gold-deep: rgba(201, 163, 92, 0.14);
  --line: rgba(234, 227, 211, 0.12);
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --ethiopic: 'Menbere', 'Nyala', serif;
  --hebrew: 'Frank Ruhl Libre', 'David', serif;
  --r-card: 18px;
  --shadow: 0 24px 70px rgba(4, 3, 1, 0.55);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* The gutter is reserved always, so locking the page behind an open
     panel cannot widen the viewport and shift the fixed nav sideways. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- scrollbar (desktop widths only; phones use overlay bars) ---------- */
@media (min-width: 861px) {
  html {
    scrollbar-width: auto;
    scrollbar-color: var(--gold) var(--ink-2);
  }
  ::-webkit-scrollbar { width: 14px; height: 14px; }
  ::-webkit-scrollbar-track {
    background: var(--ink-2);
    border-inline-start: 1px solid var(--line);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 999px;
    /* Padding-box clipping leaves the border as breathing room around the
       thumb, so the bar reads as a rail rather than a filled block. */
    border: 3px solid var(--ink-2);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); background-clip: padding-box; }
  ::-webkit-scrollbar-corner { background: var(--ink-2); }
}

/* ---------- Hebrew and right-to-left ----------
   Cormorant and Figtree carry no Hebrew, so the whole page swaps type stacks
   with the language. Everything directional elsewhere in this file uses
   logical properties, so dir="rtl" on <html> is all the mirroring needs. */
html[lang="he"] {
  --serif: 'Frank Ruhl Libre', 'David', serif;
  --sans: 'Heebo', 'Arial Hebrew', sans-serif;
}
html[lang="he"] h1,
html[lang="he"] h2,
html[lang="he"] h3 { letter-spacing: 0; line-height: 1.2; }
html[lang="he"] .eyebrow { letter-spacing: 0.08em; }
/* Hebrew has no italic tradition; gold already carries the emphasis. */
html[lang="he"] .hero-title em,
html[lang="he"] .feature-quote,
html[lang="he"] .feature-kicker,
html[lang="he"] .originals-note { font-style: normal; }
/* Arabic: Amiri for display, Cairo for text. Both need looser leading than
   the Latin faces, and Arabic has no italic. */
html[lang="ar"] {
  --serif: 'Amiri', 'Traditional Arabic', serif;
  --sans: 'Cairo', 'Segoe UI', sans-serif;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.4; }
html[lang="ar"] .eyebrow { letter-spacing: 0; }
html[lang="ar"] .hero-title em,
html[lang="ar"] .feature-quote,
html[lang="ar"] .feature-kicker,
html[lang="ar"] .originals-note { font-style: normal; }

/* Devanagari sits taller than Latin, so headings need room for the matras. */
html[lang="hi"] {
  --serif: 'Noto Serif Devanagari', serif;
  --sans: 'Poppins', 'Nirmala UI', sans-serif;
}
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3 { letter-spacing: 0; line-height: 1.35; }
html[lang="hi"] .eyebrow { letter-spacing: 0.06em; }
html[lang="hi"] .hero-title em,
html[lang="hi"] .feature-quote,
html[lang="hi"] .feature-kicker,
html[lang="hi"] .originals-note { font-style: normal; }

/* Thai stacks tall — vowel signs and tone marks ride above and below the
   letters — so lines need more room than Latin, and Thai has no italic. The
   serif face carries Latin too, which keeps "Corpus", "GPL-3.0" and the file
   names in the same voice as the Thai around them. */
html[lang="th"] {
  --serif: 'Noto Serif Thai', 'Leelawadee UI', serif;
  --sans: 'Noto Sans Thai', 'Leelawadee UI', 'Tahoma', sans-serif;
}
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3 { letter-spacing: 0; line-height: 1.4; }
html[lang="th"] .eyebrow { letter-spacing: 0.06em; }
html[lang="th"] .hero-title em,
html[lang="th"] .feature-quote,
html[lang="th"] .feature-kicker,
html[lang="th"] .originals-note { font-style: normal; }
html[lang="th"] p,
html[lang="th"] .lede { line-height: 1.85; }

/* Chinese: the bundled Noto Sans SC for both roles. It is the only Han face
   the app's font set carries, and self-hosting beats a display/text split that
   would rest on the reader's own system. Han glyphs fill their em square, so
   headings need leading the Latin faces do not, and there is no italic. */
html[lang="zh-Hans"] {
  --serif: 'Noto Sans SC', 'Songti SC', 'SimSun', serif;
  --sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
html[lang="zh-Hans"] h1,
html[lang="zh-Hans"] h2,
html[lang="zh-Hans"] h3 { letter-spacing: 0; line-height: 1.35; }
html[lang="zh-Hans"] .eyebrow { letter-spacing: 0.14em; }
html[lang="zh-Hans"] .hero-title em,
html[lang="zh-Hans"] .feature-quote,
html[lang="zh-Hans"] .feature-kicker,
html[lang="zh-Hans"] .originals-note { font-style: normal; }

/* Search operators and file names are Latin fragments: keep them LTR runs. */
[dir="rtl"] .query-chips span { direction: ltr; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h3 { font-size: 1.45rem; line-height: 1.2; }

.lede {
  color: var(--bone-dim);
  max-width: 56ch;
  margin-top: 1rem;
  font-size: 1.1rem;
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

section { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 4rem); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.85rem 1.7rem;
      box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s, border-color 0.25s;
}
@media (min-width: 1440px) {
  .hero-ctas .btn { font-size: 1.1rem; padding: 1rem 2.1rem; }
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-gold { background: var(--gold); color: #1a1508; }
.btn-gold:hover { background: var(--gold-bright); }
.btn-ghost { color: var(--bone);     border: 1px solid rgb(150 150 150 / 28%); background: #262626; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 72px;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  transition: background-color 0.35s, border-color 0.35s, backdrop-filter 0.35s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(18, 16, 12, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
/* The app's own icon, a raster square rather than the old gold glyph, so it
   carries its own colour and needs its corners kept. */
.mark { width: 50px; height: 50px; border-radius: 6px; display: block; }
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; letter-spacing: 0.01em; }
.nav-links { display: flex; gap: 1.6rem; margin-inline-start: auto; }
.nav-links a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bone-dim);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold-bright); }
.nav-cta { padding: 0.6rem 1.3rem; font-size: 0.92rem; }

.lang-switch { position: relative; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(0deg, #181818, #282828);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  border: 1px solid #282726;
  border-radius: 999px;
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.lang-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.lang-caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}
/* The menu sets display:flex, which would otherwise beat the hidden
   attribute's UA display:none and leave the menu open on load. */
.lang-menu[hidden] { display: none; }
.lang-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(234, 227, 211, 0.22);
}
.lang-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  inset-inline-end: 0;
  min-width: 168px;
  background: rgba(24, 21, 16, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 50;
  /* Fourteen rows outgrow a short phone, so the list scrolls inside itself
     rather than running off the bottom of the screen. */
  max-height: calc(100dvh - 5.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lang-menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  color: var(--bone-dim);
  font-family: var(--sans);
  font-size: 0.95rem;
  text-align: start;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
}
.lang-menu button:hover { background: var(--gold-deep); color: var(--gold-bright); }
.lang-menu button[aria-selected="true"] { color: var(--gold-bright); }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .lang-switch { margin-inline-start: auto; }
}
/* On phones the hero's own button is right below; one CTA is enough. */
@media (max-width: 700px) {
  .nav-cta { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding-top: 96px;
  overflow: clip;
}
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 72% 30%, rgba(201, 163, 92, 0.16), transparent 70%),
    radial-gradient(40% 34% at 18% 78%, rgba(201, 163, 92, 0.07), transparent 70%);
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 2.5rem);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}
.hero-title {
  font-size: clamp(2.05rem, 3.4vw, 3.3rem);
  font-weight: 500;
}
.hero-title em { font-style: normal; color: var(--gold-bright); white-space: nowrap; }
.line-mask { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.06em; }
.line { display: block; }
.hero-title .w { display: inline-block; will-change: transform; }
.hero-sub { color: var(--bone-dim); font-size: 1.15rem; max-width: 44ch; margin-top: 1.4rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }

.hero-phones {
  position: relative;
  height: min(72dvh, 640px);
}
.phone {
  border-radius: 40px;
  border: 1px solid rgba(234, 227, 211, 0.16);
  background: #060504;
  padding: 10px;
  box-shadow: var(--shadow);
  width: min(280px, 30vw);
}
.phone img { border-radius: 30px; }
.hero-phones .phone { position: absolute; }
/* A desktop window behind a phone: the pair says at a glance that the library
   runs on a computer as well, without a word of copy spent on it. */
.screen {
  border-radius: 14px;
  border: 1px solid rgba(234, 227, 211, 0.16);
  background: #060504;
  padding: 8px;
  box-shadow: var(--shadow);
}
.screen img { border-radius: 7px; }
.hero-phones .screen {
  position: absolute;
  inset-inline-end: 0;
  top: 30px;
  /* Sized against the column, not the viewport: 55vw outgrew the grid cell
     between about 960px and 1320px and laid the window over the headline. */
  width: min(600px, 100%);
  rotate: -3deg;
}
.phone-front {
  /* Off the window's right edge: the whole library row stays readable behind
     it, and the bright phone sits away from the headline. */
  inset-inline-end: 24px;
  /* Sized and placed against the column so the phone keeps its proportion to
     the window as the grid narrows, instead of swallowing it. */
  top: clamp(120px, 18vw, 200px);
  rotate: 4deg;
  width: min(205px, 40%);
}

@media (max-width: 960px) {
  .hero { padding-top: 110px; }
  .hero-inner { grid-template-columns: 1fr; }
  /* Stacked on narrow screens: the window on top, the phone tucked into its
     lower edge, so both stay legible without shrinking either to nothing. */
  .hero-phones { height: auto; display: flex; flex-direction: column; align-items: center; margin-top: 1.5rem; }
  .hero-phones .screen { position: static; width: min(100%, 560px); rotate: -1.5deg; }
  /* Pulled up over the window rather than hanging below it: the pair reads as
     one object and the whole block is shorter on a phone screen. Percentage
     margins resolve against the container width, hence the large figure. */
  .hero-phones .phone { position: static; width: min(34vw, 150px); rotate: 3deg; align-self: flex-end; margin-top: -40%; margin-inline-end: 4%; }
}

/* ---------- scroll hint ---------- */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  translate: -50% 0;
  display: block;
  padding: 0.5rem;
  opacity: 0.75;
  transition: opacity 0.3s;
}
.scroll-hint:hover { opacity: 1; }
.scroll-hint-pill {
  display: block;
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(234, 227, 211, 0.45);
  border-radius: 999px;
  position: relative;
}
.scroll-hint-dot {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--gold-bright);
  translate: -50% 0;
  animation: hint-drop 2.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes hint-drop {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint-dot { animation: none; opacity: 1; }
}

/* ---------- section rules and quote lines (drawn on reveal) ---------- */
.shelf-head h2::after, .reading > h2::after, .originals > h2::after,
.languages > h2::after, .download > h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: var(--gold);
  margin-top: 0.55em;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.languages > h2::after, .download > h2::after { margin-inline: auto; transform-origin: center; }
h2.revealed::after { transform: scaleX(1); }
.reduced-motion h2::after { transform: scaleX(1); }

.script-quote { position: relative; border-inline-start: none; }
.script-quote::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.script-quote.revealed::before, .reduced-motion .script-quote::before { transform: scaleY(1); }

/* ---------- nav section highlight ---------- */
.nav-links a.active { color: var(--gold-bright); }

/* ---------- the little book feature ---------- */
.feature-book {
  background: linear-gradient(180deg, var(--ink) 0%, #16120c 50%, var(--ink) 100%);
}
.feature-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.feature-cover { position: relative; }
.feature-cover .book {
  rotate: -2deg;
  transition: rotate 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-cover:hover .book { rotate: 0deg; }
.feature-copy h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
.feature-body { color: var(--bone-dim); max-width: 54ch; margin-top: 1.1rem; }
.feature-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.3;
  color: var(--gold-bright);
  margin-top: 1.6rem;
  padding-bottom: 0.15em;
}
.feature-meta {
  color: var(--gold);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-top: 1.6rem;
}
.feature-companion { background: none; padding-top: 0; }
.feature-companion .feature-inner { grid-template-columns: 1.2fr 0.65fr; }
.feature-cover-small { max-width: 300px; justify-self: center; }
.feature-cover-small img { rotate: 2deg; }
.feature-kicker {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold);
  margin-top: 0.5rem;
  padding-bottom: 0.15em;
}
@media (max-width: 900px) {
  .feature-inner, .feature-companion .feature-inner { grid-template-columns: 1fr; }
  .feature-cover { max-width: 320px; margin: 0 auto; }
  .feature-companion .feature-cover-small { order: -1; max-width: 260px; }
}

/* ---------- interface languages band ---------- */
.ui-band { padding-top: 0; padding-bottom: 0; text-align: center; }
.ui-band-caption {
  color: var(--bone-faint);
  font-size: 0.95rem;
  margin-bottom: 1.2rem;
}
.marquee-ui { border-top: 1px solid rgba(201, 163, 92, 0.18); border-bottom: 1px solid rgba(201, 163, 92, 0.18); padding: 1rem 0; }
/* Scoped tighter than the book-language marquee rules further down, which
   would otherwise win the specificity tie and restyle this band. */
.marquee-ui .marquee-track {
  animation-name: marquee-reverse;
  animation-duration: 120s;
  gap: 2rem;
}
.marquee-ui .marquee-track span {
  font-family: var(--sans);
  font-size: 1.02rem;
  color: var(--bone-dim);
}
.marquee-ui .marquee-track span:nth-child(3n) { color: var(--gold); }
@keyframes marquee-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- shelf ---------- */
.shelf-head { padding-bottom: 0; max-width: 1320px; margin: 0 auto; }
.shelf { padding: 0; overflow: hidden; min-height: 100dvh; display: flex; align-items: center; }
.shelf-track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: 2rem clamp(1.25rem, 5vw, 4rem);
  width: max-content;
}
.book-card { width: clamp(240px, 24vw, 330px); flex-shrink: 0; }
@media (min-width: 1024px) {
  .book-card:nth-child(even) { transform: translateY(20px); }
}
.book-card:hover .book { transform: translateY(-8px); }
.book-card h3 { margin-top: 1.3rem; }
.book-sub { color: var(--bone-dim); font-size: 0.95rem; margin-top: 0.2rem; }
.book-meta {
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 0.55rem;
}
@media (max-width: 1023px) {
  .shelf { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; min-height: 0; padding: 1rem 0 2rem; }
  .shelf::-webkit-scrollbar { display: none; }
  .book-card { scroll-snap-align: center; }
}

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 0;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.stat-label { color: var(--bone-faint); font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- reading bento ---------- */
.reading { max-width: 1320px; margin: 0 auto; }
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: 1.25rem;
  margin-top: 3rem;
}
.cell {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cell-body { padding: 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; }
.cell-body p { color: var(--bone-dim); font-size: 0.99rem; }
.cell-tall { grid-row: span 2; }
.cell-tall .cell-shot { position: relative; flex: 1; min-height: 340px; }
.cell-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cell-tinted {
  background: linear-gradient(145deg, var(--ink-3), var(--ink-2) 65%);
}
.cell-media .cell-shot-bottom {
  position: relative;
  /* Pinned to the shot's own ratio, so the whole frame shows at every width
     rather than having its sides cropped away on a phone. */
  aspect-ratio: 1544 / 686;
  flex: 0 0 auto;
}
.cell-shot-bottom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.query-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.query-chips span {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.8rem;
  color: var(--gold-bright);
  background: var(--gold-deep);
  border: 1px solid rgba(201, 163, 92, 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}
.swatches { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.swatches i { width: 20px; height: 20px; border-radius: 50%; }
.s1 { background: #e5c25a; } .s2 { background: #d98a4f; } .s3 { background: #c96a6a; }
.s4 { background: #b878ad; } .s5 { background: #7f8fd1; } .s6 { background: #62aebe; }
.s7 { background: #7cae74; } .s8 { background: #9a9a90; }

@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr; }
  .cell-tall { grid-row: auto; }
  .cell-tall .cell-shot { max-height: 340px; }
  /* ratio is pinned above; no floor needed here */
}

/* ---------- originals ---------- */
.originals {
  background: linear-gradient(180deg, var(--ink) 0%, #0c0a07 18%, #0c0a07 82%, var(--ink) 100%);
}
.originals > h2, .originals > .eyebrow, .originals > .lede, .originals-note, .callouts {
  max-width: 1100px; margin-left: auto; margin-right: auto;
}
.plate {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 1100px;
  margin: clamp(4rem, 8vw, 7rem) auto 0;
}
.plate-flip { grid-template-columns: 0.9fr 1.1fr; }
.plate-flip .plate-script { order: 2; }
.plate-center { display: block; text-align: center; }

.script-title {
  font-family: var(--ethiopic);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.25;
  color: var(--gold-bright);
}
.script-hebrew { font-family: var(--hebrew); }
.script-caption { color: var(--bone-faint); font-size: 0.9rem; letter-spacing: 0.06em; margin-top: 0.8rem; }
.plate-center .script-caption { margin-top: 0.4rem; }
.script-quote { margin-top: 2rem; border-inline-start: 2px solid var(--gold); padding-inline-start: 1.2rem; }
.script-quote p { font-family: var(--ethiopic); font-size: 1.25rem; color: var(--bone); line-height: 1.9; }
.script-quote footer { color: var(--bone-dim); font-size: 0.95rem; margin-top: 0.7rem; }
.script-quote cite { color: var(--bone-faint); font-style: normal; font-size: 0.85rem; display: block; margin-top: 0.2rem; }

.plate-copy h3 { font-size: 1.9rem; }
.plate-copy p { color: var(--bone-dim); margin-top: 0.9rem; max-width: 52ch; }
.phone-plate { margin-top: 2rem; width: min(240px, 60vw); }
.plate-copy-center { max-width: 60ch; margin: 0 auto; }
.plate-copy-center p { margin-inline: auto; }
.phone-plate-center { margin: 2.2rem auto 0; }

.callouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: clamp(4rem, 7vw, 6rem);
}
.callout {
  border: 1px solid rgba(201, 163, 92, 0.22);
  background: var(--gold-deep);
  border-radius: var(--r-card);
  padding: 1.8rem;
}
.callout h3 { color: var(--gold-bright); font-size: 1.35rem; }
.callout p { color: var(--bone-dim); font-size: 0.98rem; margin-top: 0.7rem; }

.originals-note {
  margin-top: 3rem;
  color: var(--bone-dim);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  text-align: center;
}

@media (max-width: 900px) {
  .plate, .plate-flip { grid-template-columns: 1fr; }
  .plate-flip .plate-script { order: 0; }
  .callouts { grid-template-columns: 1fr; }
}

/* ---------- languages ---------- */
.languages { text-align: center; }
.languages h2 { margin-bottom: 2.5rem; }
.marquee {
  overflow: hidden;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 calc(-1 * clamp(1.25rem, 5vw, 4rem));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: inline-flex;
  gap: 2.6rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee 160s linear infinite;
}
.marquee-track span {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--bone-dim);
}
.marquee-track span:nth-child(4n) { color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* translateX is physical, and it is the one direction-sensitive thing on this
   page that logical properties cannot mirror. In RTL an inline-flex track lays
   out from the right and overflows leftward, so travelling left carries it away
   from the window instead of through it: the book band opened a visible gap and
   the interface band went off screen entirely. Both travel the other way. */
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .marquee-ui .marquee-track { animation-name: marquee-ui-rtl; }
@keyframes marquee-ui-rtl { from { transform: translateX(50%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

.lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1100px;
  margin: 3.5rem auto 0;
  text-align: start;
}
.lang-grid h3 { font-size: 1.3rem; }
.lang-grid p { color: var(--bone-dim); font-size: 0.98rem; margin-top: 0.6rem; }
@media (max-width: 860px) { .lang-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- enochian calendar ---------- */
.calendar { background: linear-gradient(180deg, var(--ink) 0%, #16120c 45%, var(--ink) 100%); }
.calendar-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.phone-calendar { width: min(300px, 100%); justify-self: center; rotate: -2deg; }
.calendar-copy .lede { margin-bottom: 2.4rem; }
.calendar-list { display: grid; gap: 0; }
.calendar-list > div {
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.calendar-list > div:last-child { border-bottom: 1px solid var(--line); }
.calendar-list dt {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold-bright);
  margin-bottom: 0.3rem;
}
.calendar-list dd { color: var(--bone-dim); font-size: 0.99rem; max-width: 62ch; }
.calendar-note {
  margin-top: 1.6rem;
  color: var(--bone-faint);
  font-size: 0.92rem;
}
@media (max-width: 900px) {
  .calendar-inner { grid-template-columns: 1fr; }
  .phone-calendar { order: -1; width: min(260px, 70vw); }
}

/* ---------- privacy ---------- */
.privacy { text-align: center; background: #0c0a07; }
.privacy h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
.privacy .lede { margin: 1.4rem auto 0; }

/* ---------- download ---------- */
.download { max-width: 1320px; margin: 0 auto; text-align: center; }
.download .lede { margin-inline: auto; }
.dl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
  margin-top: 3rem;
}
.dl-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 0.45rem;
  text-decoration: none;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.5rem;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
}
.dl-card:hover { transform: translateY(-5px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); background: rgb(255 255 255 / 8%); border: 1px solid rgb(143 128 100 / 30%); }
.dl-card .picon { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.dl-card:hover .picon { transform: translateY(-3px) scale(1.08); }
.dl-card:active { transform: translateY(-3px) scale(0.99); }
.picon {
  width: 30px; height: 30px;
  background-color: var(--gold);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  margin-bottom: 0.5rem;
}
.picon-svg { background: none; color: var(--gold); }
.picon-inline { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; margin: 0 0.2rem 0 0.4rem; background-color: var(--bone-dim); }
.picon-inline.picon-svg { background: none; color: var(--bone-dim); }
.dl-name { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; }
.dl-note { color: var(--bone-dim); font-size: 0.92rem; }
.dl-file { color: var(--gold); font-size: 0.82rem; font-weight: 500; margin-top: auto; padding-top: 0.6rem; }
.dl-side { color: var(--bone-dim); margin-top: 2rem; font-size: 0.98rem; }
.dl-side a { color: var(--gold-bright); }
.dl-verify { display: flex; align-items: center; justify-content: center; gap: 0.55rem; flex-wrap: wrap; }
.verify-mark { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; }
@media (max-width: 1100px) { .dl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dl-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 3rem clamp(1.25rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  text-align: center;
}
.footer-brand { display: flex; align-items: center; gap: 0.7rem; color: var(--bone-dim); }
.footer-brand .mark { width: 40px; height: 40px; border-radius: 5px; }
.footer-brand a { color: var(--gold-bright); text-decoration: none; white-space: nowrap; }
.footer-brand a:hover { text-decoration: underline; }
.footer-fine { color: var(--bone-faint); font-size: 0.85rem; }

/* ---------- reveal defaults (JS enhances) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }
.js.reduced-motion [data-reveal] { opacity: 1; transform: none; }

/* ---------- translation-provenance popup (English only) ----------
   Hover opens it, a click pins it open, and it closes on the X, on a click
   outside, or on Escape. It is a top-level element so position:fixed is not
   trapped by the transforms GSAP puts on the revealed cells. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.tip-trigger {
  font: inherit;
  /* A button resets these in the UA sheet, which left the trigger set tighter
     than the tracked-out .feature-meta line it sits in. */
  letter-spacing: inherit;
  word-spacing: inherit;
  color: var(--gold);
  background: none;
  border: 0;
  padding: 0;
  cursor: help;
  /* A dotted underline reads as "there is more here" without looking like a
     link that navigates away. */
  border-block-end: 1px dotted currentColor;
  transition: color 0.2s;
}
.tip-trigger:hover,
.tip-trigger[aria-expanded="true"] { color: var(--gold-bright); }
.tip-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.tip-pop[hidden] { display: none; }
.tip-pop {
  position: fixed;
  z-index: 80;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: min(560px, calc(100vw - 24px));
  max-height: min(72vh, 520px);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.15rem 1.25rem 1rem;
  background: rgba(24, 21, 16, 0.98);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  /* The panel's own chrome follows the page, so it mirrors for Hebrew and
     Arabic; only the table below stays left-to-right, being English data. */
  text-align: start;
}
.tip-pop h3 {
  font-size: 1.3rem;
  padding-inline-end: 2rem;
}
.tip-stats {
  color: var(--bone-dim);
  font-size: 0.85rem;
  margin-block-start: -0.35rem;
}
.tip-stats b { color: var(--gold-bright); font-weight: 600; }

.tip-close {
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-end: 0.7rem;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--bone-dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.tip-close svg { width: 15px; height: 15px; }
.tip-close:hover { color: var(--gold-bright); border-color: var(--line); background: var(--gold-deep); }
.tip-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.tip-filter input {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--bone);
  background: rgba(234, 227, 211, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}
.tip-filter input::placeholder { color: var(--bone-faint); }
.tip-filter input:focus-visible { outline: none; border-color: var(--gold); }

.tip-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  border-block-start: 1px solid var(--line);
  margin-inline: -0.25rem;
  padding-inline: 0.25rem;
}
.tip-scroll:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.tip-pop table { width: 100%; border-collapse: collapse; font-size: 0.85rem; direction: ltr; }
.tip-pop thead th {
  position: sticky;
  inset-block-start: 0;
  background: rgba(24, 21, 16, 0.98);
  color: var(--gold);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: start;
  padding: 0.55rem 0.6rem;
  border-block-end: 1px solid var(--line);
}
.tip-pop tbody td {
  padding: 0.4rem 0.6rem;
  border-block-end: 1px solid rgba(234, 227, 211, 0.06);
  color: var(--bone-dim);
  vertical-align: top;
}
.tip-pop tbody th {
  padding: 0.4rem 0.6rem;
  border-block-end: 1px solid rgba(234, 227, 211, 0.06);
  font-weight: 400;
  text-align: start;
  color: var(--bone);
  white-space: nowrap;
}
.tip-pop tbody tr:hover th,
.tip-pop tbody tr:hover td { background: rgba(234, 227, 211, 0.04); }
/* The two hand-made editions are the point of the sentence that opens this. */
.tip-pop tr.is-human th { color: var(--gold-bright); }
.tip-pop tr.is-human td:first-of-type { color: var(--gold); }
.tip-pop s { color: var(--bone-faint); text-decoration-thickness: 1px; }
.tip-pop td:empty::after { content: "—"; color: var(--bone-faint); }
.tip-empty { padding: 1rem 0.6rem; color: var(--bone-faint); font-size: 0.9rem; }

.tip-note {
  /* The footnote is the file's own English closing paragraph, so it reads
     left-to-right even when the panel around it is mirrored. */
  direction: ltr;
  text-align: start;
  color: var(--bone-faint);
  font-size: 0.76rem;
  line-height: 1.5;
  border-block-start: 1px solid var(--line);
  padding-block-start: 0.7rem;
}

/* Phones get a sheet pinned to the bottom instead of a floating card. */
@media (max-width: 620px) {
  .tip-pop {
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline: 0;
    width: 100%;
    max-height: 82vh;
    border-radius: var(--r-card) var(--r-card) 0 0;
    border-block-end: 0;
  }
}

/* Narrow screens: tighter cells so "Kagi Translate" does not wrap every row. */
@media (max-width: 620px) {
  .tip-pop table { font-size: 0.78rem; }
  .tip-pop thead th { letter-spacing: 0.05em; padding: 0.5rem 0.4rem; }
  .tip-pop tbody td,
  .tip-pop tbody th { padding: 0.38rem 0.4rem; }
}

/* ---------- release marker ----------
   The version is on screen from the first paint, so nobody has to reach the
   download section to learn how fresh the build is. */

.hero-release {
  margin-top: 1.6rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--bone-faint);
}
.hero-release-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.hero-release a { text-decoration: none; }
.hero-release b {
  color: var(--gold-bright);
  font-weight: 600;
  font-size: 0.95rem;
  border-block-end: 1px dotted rgba(201, 163, 92, 0.5);
}
.hero-release a:hover b { border-block-end-color: var(--gold-bright); }
.hero-release time { color: var(--bone-dim); }

/* ---------- covers as books ----------
   The artwork is a flat 3:4 illustration, so the binding is built in CSS: a
   shaded spine down the hinge edge, a sheen across the boards, and stacked
   hairlines along the fore-edge standing in for the page block. Logical
   properties throughout, so the whole thing rebinds itself for Hebrew and
   Arabic instead of hanging its spine on the wrong side. */
.book {
  position: relative;
  display: block;
  /* Square where the binding is, rounded at the fore-edge, as a real board. */
  border-start-start-radius: 3px;
  border-end-start-radius: 3px;
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
  /* The offsets are the page block: three hairlines of exposed paper. */
  box-shadow:
    2px 0 0 rgba(234, 227, 211, 0.16),
    4px 0 0 rgba(234, 227, 211, 0.09),
    6px 0 0 rgba(234, 227, 211, 0.045),
    0 26px 60px rgba(4, 3, 1, 0.6),
    0 0 100px rgba(201, 163, 92, 0.1);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
[dir="rtl"] .book {
  box-shadow:
    -2px 0 0 rgba(234, 227, 211, 0.16),
    -4px 0 0 rgba(234, 227, 211, 0.09),
    -6px 0 0 rgba(234, 227, 211, 0.045),
    0 26px 60px rgba(4, 3, 1, 0.6),
    0 0 100px rgba(201, 163, 92, 0.1);
}
.book img {
  border-radius: inherit;
  border: 1px solid rgba(234, 227, 211, 0.1);
  width: 100%;
}

/* The spine: dark at the hinge, a thin catch of light where it turns. */
.book::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: clamp(9px, 3.4%, 15px);
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.32) 30%,
    rgba(0, 0, 0, 0.05) 62%,
    rgba(255, 255, 255, 0.13) 80%,
    rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
}
[dir="rtl"] .book::before { transform: scaleX(-1); }

/* A soft sheen across the boards, so the cover reads as printed stock. */
.book-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(148deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 22%,
    rgba(255, 255, 255, 0) 46%,
    rgba(0, 0, 0, 0.14) 100%);
}

/* Lifting it tips the fore-edge toward the reader and deepens the page block. */
.book-card:hover .book,
.feature-cover:hover .book {
  transform: translateY(-8px);
  box-shadow:
    3px 0 0 rgba(234, 227, 211, 0.2),
    6px 0 0 rgba(234, 227, 211, 0.12),
    9px 0 0 rgba(234, 227, 211, 0.06),
    0 40px 80px rgba(4, 3, 1, 0.7),
    0 0 130px rgba(201, 163, 92, 0.16);
}
[dir="rtl"] .book-card:hover .book,
[dir="rtl"] .feature-cover:hover .book {
  box-shadow:
    -3px 0 0 rgba(234, 227, 211, 0.2),
    -6px 0 0 rgba(234, 227, 211, 0.12),
    -9px 0 0 rgba(234, 227, 211, 0.06),
    0 40px 80px rgba(4, 3, 1, 0.7),
    0 0 130px rgba(201, 163, 92, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .book { transition: none; }
}

/* ---------- the cross back to the top ----------
   It needs clear ground beside the content column; below 1100px the page is
   wide enough that the cross would sit on the text, so it is simply absent. */
.to-top[hidden] { display: none; }
.to-top {
  position: fixed;
  inset-block-end: 28px;
  inset-inline-end: 28px;
  z-index: 70;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  color: var(--gold);
  background: rgba(24, 21, 16, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  /* Kept out of the tab order and off the pointer until it is actually
     showing, so it cannot be reached while invisible. */
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s, transform 0.35s, visibility 0.35s, color 0.2s, border-color 0.2s, background 0.2s;
}
.to-top.is-in { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 21px; height: 21px; }
.to-top:hover {
  color: var(--gold-bright);
  border-color: rgba(201, 163, 92, 0.45);
  background: rgba(31, 27, 20, 0.95);
}
.to-top.is-in:hover { transform: translateY(-3px); }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1099px) { .to-top { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 0.2s, visibility 0.2s; transform: none; }
  .to-top.is-in:hover { transform: none; }
}

/* ---------- footer: what's new ---------- */
.footer-links {
  margin-block-start: 0.9rem;
  font-size: 0.9rem;
}
.whatsnew-trigger {
  font: inherit;
  color: var(--gold);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-block-end: 1px dotted currentColor;
  transition: color 0.2s;
}
.whatsnew-trigger:hover { color: var(--gold-bright); }
.whatsnew-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ---------- overlay panels: book summary and what's new ----------
   Both are top-level elements, so position:fixed is not trapped by the
   transforms GSAP leaves on revealed sections. */
.bk-pop[hidden], .wn-pop[hidden] { display: none; }
.bk-pop, .wn-pop {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 48px);
}
.bk-veil {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 2, 0.74);
  backdrop-filter: blur(7px);
}
.bk-sheet, .wn-sheet {
  position: relative;
  background: rgba(24, 21, 16, 0.98);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  text-align: start;
}

/* The book, then its summary beside it. In Hebrew and Arabic the grid follows
   the writing direction, so the cover moves to the other side with the text. */
.bk-sheet {
  width: min(880px, 100%);
  max-height: min(88vh, 660px);
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.3rem, 3.2vw, 2.4rem);
  padding: clamp(1.5rem, 3.2vw, 2.4rem);
  overflow: auto;
  overscroll-behavior: contain;
}
.bk-cover .book { display: block; width: 100%; }
.bk-cover img { display: block; width: 100%; height: auto; border-radius: inherit; }
.bk-body { min-width: 0; padding-inline-end: 1.6rem; }
.bk-kicker {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bk-kicker:empty { display: none; }
.bk-sheet h3 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.15;
  margin-block-start: 0.5rem;
}
.bk-sub {
  color: var(--bone-dim);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  margin-block-start: 0.25rem;
}
.bk-blurb {
  margin-block-start: 1.1rem;
  color: var(--bone-dim);
  font-size: 0.97rem;
  line-height: 1.7;
}
.bk-meta {
  margin-block-start: 1.1rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--line);
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .bk-sheet {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    /* Stacked, the sheet is much taller than it is wide, so the 660px cap that
       suits the two-column layout would push the download button out of sight
       on a phone. */
    max-height: 88vh;
  }
  .bk-cover { width: min(132px, 38%); }
  .bk-body { padding-inline-end: 0; }
  .bk-blurb { font-size: 0.92rem; margin-block-start: 0.9rem; }
  .bk-meta { text-align: center; margin-block-start: 0.9rem; }
}

/* Each card carries an overlay button rather than becoming one, because a
   button may not contain a heading. */
.book-card { position: relative; }
.book-open {
  position: absolute;
  inset: 0;
  background: none;
  border: 0;
  border-radius: var(--r-card);
  cursor: pointer;
}
.book-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

/* ---------- what's new ---------- */
.wn-sheet {
  width: min(620px, 100%);
  max-height: min(80vh, 620px);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: clamp(1.3rem, 3vw, 1.9rem);
}
.wn-sheet h3 { font-size: 1.5rem; padding-inline-end: 2.2rem; }
.wn-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  border-block-start: 1px solid var(--line);
  padding-block-start: 0.9rem;
  /* The notes are English whatever the page is set to, so this block reads
     left-to-right even inside a mirrored panel. */
  direction: ltr;
  text-align: start;
}
.wn-scroll:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.wn-rel {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-start: 1.6rem;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--line);
}
.wn-rel:first-child { margin-block-start: 0; }
.wn-sub {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bone);
  margin-block-start: 1rem;
}
.wn-scroll p {
  color: var(--bone-dim);
  font-size: 0.93rem;
  line-height: 1.65;
  margin-block-start: 0.7rem;
}
.wn-scroll ul {
  list-style: none;
  margin-block-start: 0.7rem;
}
.wn-scroll li {
  position: relative;
  color: var(--bone-dim);
  font-size: 0.93rem;
  line-height: 1.6;
  padding-inline-start: 1.1rem;
  margin-block-start: 0.35rem;
}
.wn-scroll li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.62em;
  inset-inline-start: 0.1rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}
.wn-empty { color: var(--bone-faint); font-size: 0.9rem; padding-block: 0.6rem; }

/* An open panel owns the scroll: the shelf behind it is pinned by ScrollTrigger
   and would otherwise pan under the reader. The padding replaces the scrollbar
   that locking removes, so the page does not jump sideways. */
body.is-locked { overflow: hidden; }

/* ---------- Android upgrade warning ----------
   1.2 changed the Android signing key, so the store-less upgrade path breaks:
   this has to be read before the APK is downloaded, not after. Amber rather
   than the page's gold, so it reads as a caution and not as another accent. */
.dl-warn {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  max-width: 62ch;
  margin: 2rem auto 0;
  padding: 1rem 1.15rem;
  text-align: start;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--bone-dim);
  background: rgba(224, 150, 62, 0.07);
  border: 1px solid rgba(224, 150, 62, 0.3);
  border-radius: var(--r-card);
}
.dl-warn-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-block-start: 0.1rem;
  color: #e0963e;
}
.dl-warn b { color: var(--bone); font-weight: 600; }