/* ============================================================
   efrelly — the archive at dusk
   palette sampled from the film: ink dusk, seam gold, cosmic violet
   ============================================================ */

:root {
  --ink:        #06090f;
  --ink-2:      #0a0f1a;
  --parchment:  #e9e3d4;
  --parchment-dim: #b9b3a4;
  --slate:      #7d8496;
  --gold:       #e8a33d;
  --gold-deep:  #a8721f;
  --gold-glow:  #ffd98a;
  --violet:     #8b7bff;
  --violet-deep:#4d3fae;

  --serif: "Iowan Old Style", "Palatino Nova", Palatino, "Palatino Linotype", Georgia, serif;
  --mono:  "SF Mono", "Menlo", "Cascadia Mono", "Consolas", monospace;

  --ease-out: cubic-bezier(.16, .84, .28, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* faint starfield between sections */
  background-image:
    radial-gradient(1px 1px at 18% 32%, rgba(233,227,212,.20) 0, transparent 100%),
    radial-gradient(1px 1px at 73% 11%, rgba(233,227,212,.12) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 64%, rgba(139,123,255,.14) 0, transparent 100%),
    radial-gradient(1px 1px at 42% 78%, rgba(233,227,212,.10) 0, transparent 100%),
    radial-gradient(1px 1px at 8% 88%, rgba(232,163,61,.12) 0, transparent 100%);
}

::selection { background: rgba(232,163,61,.85); color: #100a02; }

.mono {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ---------------- atmosphere ---------------- */

.grain {
  position: fixed; inset: -40px; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .05;
  will-change: transform;
  transform: translateZ(0);
  animation: grain 1400ms steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-24px, 14px, 0); }
  50%  { transform: translate3d(16px, -26px, 0); }
  75%  { transform: translate3d(22px, 18px, 0); }
  100% { transform: translate3d(0,0,0); }
}

.vignette {
  position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 42%, transparent 55%, rgba(3,5,9,.55) 100%);
}

/* ---------------- language switcher ---------------- */

.lang {
  position: fixed;
  top: 1.4rem; right: 1.6rem;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: .6em;
  color: var(--slate);
}
.lang a {
  color: var(--slate);
  text-decoration: none;
  padding: .3em .2em;
  transition: color 300ms;
}
@media (hover: hover) {
  .lang a:hover { color: var(--gold); }
}
.lang a[aria-current="page"] { color: var(--parchment); }
.lang span { opacity: .5; }

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: end center;
  background: #000;
}

.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(4,6,10,.42) 0%, transparent 26%, transparent 62%, rgba(4,6,10,.78) 100%);
}

.hero__chrome {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-bottom: 13vh;
  transition: opacity 1600ms ease;
}
.hero__chrome.is-off { opacity: 0; }

.wordmark {
  margin: 0;
  direction: ltr;            /* latin wordmark — never mirrors under RTL */
  unicode-bidi: isolate;
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--parchment);
  text-shadow: 0 2px 40px rgba(0,0,0,.6);
}
.wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em);
  filter: blur(6px);
  animation: trackin 1100ms var(--ease-out) forwards;
}
.wordmark span:nth-child(1) { animation-delay: 200ms; }
.wordmark span:nth-child(2) { animation-delay: 300ms; }
.wordmark span:nth-child(3) { animation-delay: 400ms; }
.wordmark span:nth-child(4) { animation-delay: 500ms; }
.wordmark span:nth-child(5) { animation-delay: 600ms; }
.wordmark span:nth-child(6) { animation-delay: 700ms; }
.wordmark span:nth-child(7) { animation-delay: 800ms; }
@keyframes trackin {
  to { opacity: 1; transform: none; filter: blur(0); }
}

.hero__tagline {
  margin-top: 1.1rem;
  font-size: clamp(1rem, 2.1vw, 1.3rem);
  font-style: italic;
  color: var(--parchment-dim);
  opacity: 0;
  animation: fadeup 1200ms var(--ease-out) 1400ms forwards;
}

.hero__cite {
  margin-top: 1.4rem;
  color: var(--gold);
  opacity: 0;
  animation: fadeup 1200ms var(--ease-out) 2100ms forwards;
}

@keyframes fadeup {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* line that surfaces once the lights go off */
.hero__after {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; gap: 2rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 2200ms var(--ease-out), visibility 0s 2200ms;
}
.hero__after.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 2200ms var(--ease-out);
}
.hero__afterline {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.35;
  color: var(--parchment);
  text-wrap: balance;
}
.hero__afterline br { content: ""; }

.replay {
  justify-self: center;
  background: none;
  border: 1px solid rgba(233,227,212,.25);
  color: var(--parchment-dim);
  padding: .65em 1.4em;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 300ms, color 300ms;
}
.replay:hover { border-color: var(--gold); color: var(--gold); }

.scrollcue {
  position: absolute; z-index: 4;
  bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 56px;
  overflow: hidden;
}
.scrollcue span {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, var(--gold) 45%, transparent);
  animation: cue 2200ms var(--ease-out) infinite;
}
@keyframes cue {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}

/* ---------------- premise strip ---------------- */

.premise {
  padding: clamp(5rem, 12vh, 9rem) 6vw;
  border-top: 1px solid rgba(232,163,61,.14);
  border-bottom: 1px solid rgba(232,163,61,.14);
  background: linear-gradient(to bottom, var(--ink-2), var(--ink));
}
.premise__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4vw;
  max-width: 1100px;
  margin: 0 auto;
}
.premise__list li { text-align: center; }
.premise__num {
  display: block;
  color: var(--gold);
  margin-bottom: 1rem;
}
.premise__list p:not(.premise__num) {
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-style: italic;
  color: var(--parchment);
}

/* ---------------- story sections ---------------- */

.story {
  padding: clamp(6rem, 16vh, 12rem) 6vw clamp(4rem, 10vh, 8rem);
  max-width: 1500px;
  margin: 0 auto;
}

.story__head { max-width: 720px; margin-bottom: 3.5rem; }
.story--alt .story__head { margin-left: auto; text-align: right; }

.kicker { color: var(--gold); margin-bottom: 1.3rem; }

.story h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: .01em;
  text-wrap: balance;
}

.story__sub {
  margin-top: 1.2rem;
  color: var(--slate);
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  max-width: 54ch;
}
.story--alt .story__sub { margin-left: auto; }

.cite-tag {
  color: var(--gold);
  border: 1px solid rgba(232,163,61,.35);
  border-radius: 3px;
  padding: .2em .55em;
  white-space: nowrap;
}

.story__media {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 40px 120px -30px rgba(0,0,0,.8),
    0 0 0 1px rgba(233,227,212,.07);
}
.storyvideo {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}
.replay--media {
  position: absolute;
  right: 1.2rem; bottom: 1.2rem;
  background: rgba(6,9,15,.55);
  backdrop-filter: blur(6px);
}

/* ---------------- CTA ---------------- */

.cta {
  margin-top: 3.5rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .02em;
  padding: .95em 2.2em;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform 300ms var(--ease-out), box-shadow 300ms, background 300ms, color 300ms;
}
.btn:active { transform: scale(.97); }

.btn--gold {
  border: none;
  color: #14100a;
  background: linear-gradient(160deg, var(--gold-glow), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 10px 40px -8px rgba(232,163,61,.45);
}
.btn--gold:hover { box-shadow: 0 14px 55px -8px rgba(232,163,61,.65); transform: translateY(-2px); }

.btn--ghost {
  background: none;
  border: 1px solid rgba(233,227,212,.3);
  color: var(--parchment-dim);
}
.btn--ghost:hover { border-color: var(--violet); color: var(--violet); }

.cta__soon { width: 100%; text-align: center; color: var(--gold); margin-top: .6rem; }

/* ---------------- the shelf ---------------- */

.shelf {
  padding: clamp(6rem, 16vh, 12rem) 6vw clamp(3rem, 8vh, 6rem);
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.shelf .story__head { margin: 0 auto 4rem; }
.shelf .story__sub { margin-left: auto; margin-right: auto; }

.shelf__row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  padding: 0 2vw;
}

.book {
  position: relative;
  width: clamp(38px, 5.5vw, 62px);
  height: clamp(180px, 26vw, 300px);
  border-radius: 3px 6px 6px 3px;
  display: grid;
  place-items: center;
  overflow: hidden;          /* hard clip: iOS ignores text-overflow on vertical inline text */
  transition: transform 400ms var(--ease-out);
}
.book:hover { transform: translateY(-10px); }

.book__title {
  display: block;            /* text-overflow needs a block box (where supported at all) */
  writing-mode: vertical-rl;
  font-size: .6rem;
  font-family: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
  white-space: nowrap;
  max-height: calc(100% - 1.4em);
  overflow: hidden;
  text-overflow: ellipsis;
}
:lang(es) .book__title, :lang(ru) .book__title, :lang(de) .book__title,
:lang(fr) .book__title, :lang(pt) .book__title, :lang(it) .book__title { font-size: .55rem; letter-spacing: .11em; }

.book--cosmic {
  background:
    radial-gradient(circle at 50% 18%, rgba(139,123,255,.55) 0, transparent 42%),
    radial-gradient(circle at 50% 80%, rgba(233,227,212,.14) 0, transparent 45%),
    linear-gradient(to bottom, #1b1840, #0e0c26);
  box-shadow: 0 0 34px -6px rgba(139,123,255,.5), inset 0 0 0 1px rgba(139,123,255,.35);
  color: #cfc8ff;
}
.book--mythic {
  background:
    radial-gradient(circle at 50% 22%, rgba(255,217,138,.5) 0, transparent 46%),
    linear-gradient(to bottom, #3a2a12, #1d1406);
  box-shadow: 0 0 34px -6px rgba(232,163,61,.5), inset 0 0 0 1px rgba(232,163,61,.4);
  color: var(--gold-glow);
}
.book--empty {
  background: linear-gradient(to bottom, rgba(233,227,212,.05), rgba(233,227,212,.02));
  box-shadow: inset 0 0 0 1px rgba(233,227,212,.12);
  color: var(--slate);
  height: clamp(160px, 23vw, 265px);
}
.book--next {
  background: none;
  box-shadow: inset 0 0 0 1px dashed rgba(232,163,61,.0);
  border: 1px dashed rgba(232,163,61,.45);
  color: var(--gold);
  height: clamp(160px, 23vw, 265px);
}

.shelf__ledge {
  height: 1px;
  margin: 0 auto;
  max-width: 760px;
  background: linear-gradient(to right, transparent, rgba(232,163,61,.55), transparent);
  box-shadow: 0 6px 24px rgba(232,163,61,.18);
}

/* ---------------- footer ---------------- */

.footer {
  padding: 6rem 6vw 3.5rem;
  text-align: center;
}
.footer__mark {
  font-size: 1.6rem;
  letter-spacing: .08em;
  margin-bottom: .8rem;
}
.footer__about {
  color: var(--parchment-dim);
  font-style: italic;
  max-width: 52ch;
  margin: 0 auto 1.1rem;
  font-size: .95rem;
}
.footer__note { color: var(--slate); }

/* ---------------- reveal-on-scroll ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1100ms var(--ease-out) var(--d, 0ms),
    transform 1100ms var(--ease-out) var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------------- reader ---------------- */

/* day mode (reader pages only — set via data-theme on <html>) */
html[data-theme="day"] {
  --ink: #f4efe3;
  --ink-2: #ede6d3;
  --parchment: #221c11;
  --parchment-dim: #4f4735;
  --slate: #6e6552;
  --gold: #9a6d1c;
  --gold-deep: #7a5314;
  --gold-glow: #8a5f16;
}
html[data-theme="day"] body { background-image: none; }
html[data-theme="day"] .vignette { display: none; }
html[data-theme="day"] .grain { opacity: .03; }
html[data-theme="day"] .replay,
html[data-theme="day"] .theme-toggle {
  border-color: rgba(34,28,17,.3);
  color: var(--parchment-dim);
}
html[data-theme="day"] ::selection { background: rgba(154,109,28,.5); color: #16120a; }

.theme-toggle {
  position: fixed;
  top: 1.3rem; right: 1.6rem;
  z-index: 70;
  background: none;
  border: 1px solid rgba(233,227,212,.25);
  color: var(--parchment-dim);
  padding: .5em 1em;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 300ms, color 300ms;
}
@media (hover: hover) {
  .theme-toggle:hover { border-color: var(--gold); color: var(--gold); }
}

.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 80;
  background: rgba(232,163,61,.12);
}
.progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(to right, var(--gold-deep), var(--gold));
  box-shadow: 0 0 12px rgba(232,163,61,.6);
}

.reader-home {
  position: fixed; top: 1.4rem; left: 1.6rem; z-index: 70;
  color: var(--slate); text-decoration: none;
  transition: color 300ms;
}
.reader-home:hover { color: var(--gold); }

.reader {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 6vw;
}

.reader__cover {
  min-height: 88vh; min-height: 88svh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1.6rem;
}
.reader__cover .kicker { margin-bottom: 0; }
.reader__title {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.1;
}
.reader__byline { color: var(--slate); font-style: italic; }
.reader__note {
  color: var(--parchment-dim);
  font-size: .95rem;
  font-style: italic;
  max-width: 34ch;
  margin: 0 auto;
}
.reader__seam {
  width: 1px; height: 72px;
  margin: 0 auto;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}

.reader__body {
  padding: 4rem 0 2rem;
  font-size: 1.13rem;
  line-height: 1.85;
  color: var(--parchment);
}
.reader__body p { margin: 0 0 1.5em; text-wrap: pretty; }
.reader__body p:first-of-type::first-letter {
  font-size: 3.1em;
  line-height: .85;
  float: left;
  padding-right: .12em;
  color: var(--gold);
}
.reader__break {
  text-align: center;
  color: var(--gold);
  margin: 2.6em 0;
  letter-spacing: 1.2em;
  text-indent: 1.2em;
}

.record {
  margin: 4rem 0;
  padding: 2.2rem 2.4rem;
  border: 1px solid rgba(232,163,61,.25);
  border-radius: 6px;
  background: linear-gradient(to bottom, rgba(232,163,61,.05), transparent);
}
.record h2 {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 1.4rem;
  letter-spacing: .04em;
}
.record ul { list-style: none; }
.record li {
  margin-bottom: 1.1rem;
  padding-left: 1.2rem;
  position: relative;
  font-size: .98rem;
  color: var(--parchment-dim);
}
.record li::before {
  content: "·";
  position: absolute; left: 0;
  color: var(--gold);
}
.record cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: .3rem;
}

.reader__end {
  text-align: center;
  padding: 3rem 0 7rem;
}
.reader__endline {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-style: italic;
  color: var(--parchment);
  margin-bottom: 2.2rem;
  text-wrap: balance;
}

/* ---------------- narration player ---------------- */

.listen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: .6rem;
}
.listen__btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 1rem;
  color: #14100a;
  background: linear-gradient(160deg, var(--gold-glow), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 8px 30px -8px rgba(232,163,61,.5);
  transition: transform 300ms var(--ease-out), box-shadow 300ms;
}
.listen__btn:active { transform: scale(.94); }
.listen__bar {
  position: relative;
  width: min(300px, 44vw);
  height: 2px;
  border-radius: 2px;
  background: rgba(232,163,61,.18);
  cursor: pointer;
}
.listen__bar span {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(to right, var(--gold-deep), var(--gold));
}
.listen__time { color: var(--slate); }

/* ---------------- RTL (Hebrew) ---------------- */

[dir="rtl"] .lang { right: auto; left: 1.6rem; }
[dir="rtl"] .story--alt .story__head { margin-left: 0; margin-right: auto; text-align: left; }
[dir="rtl"] .story--alt .story__sub { margin-left: 0; margin-right: auto; }
[dir="rtl"] .replay--media { right: auto; left: 1.2rem; }

/* ---------------- mobile ---------------- */

@media (max-width: 720px) {
  .lang {
    left: 1rem; right: 1rem; top: .9rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: .3em; column-gap: .4em;
  }
  .lang span { display: none; }         /* dots orphan badly across wrapped rows */
  .lang a { padding: .35em .45em; text-shadow: 0 1px 8px rgba(0,0,0,.85); }
  [dir="rtl"] .lang { justify-content: flex-start; }
  .premise__list { grid-template-columns: 1fr; gap: 2.6rem; }
  .story--alt .story__head { text-align: left; margin-left: 0; }
  .story--alt .story__sub { margin-left: 0; }
  [dir="rtl"] .story--alt .story__head { text-align: right; margin-right: 0; }
  [dir="rtl"] .story--alt .story__sub { margin-right: 0; }
  .hero__chrome { padding-bottom: 17vh; }
  .shelf__row { gap: 7px; }
  .cta { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .wordmark span { animation-duration: 1ms; }
  .hero__tagline, .hero__cite { animation-duration: 1ms; animation-delay: 0ms; }
  .reveal { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}