@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,400&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0d0d0c;
  --paper:#f6f3ee;
  --paper-dim:#eae5db;
  --graphite:#54514a;
  --fog:#b9b4a8;
  --crayon:#d4381f;
  --crayon-dim:#a92d18;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  -webkit-font-smoothing:antialiased;
}

html[lang="sa"] .hero-title,
html[lang="sa"] .chapter-title,
html[lang="sa"] h2,
html[lang="sa"] .toc-item .num,
html[lang="sa"] .site-footer .sign {
  font-family:'Fraunces', serif;
  text-transform:none;
  letter-spacing:normal;
}

html[lang="sa"] .kicker,
html[lang="sa"] .hero-eyebrow,
html[lang="sa"] .scroll-cue,
html[lang="sa"] .toc-item,
html[lang="sa"] .toc-item .label,
html[lang="sa"] .story-pending p,
html[lang="sa"] .also-video-line,
html[lang="sa"] .watch-caption,
html[lang="sa"] .back-link a,
html[lang="sa"] .site-footer .meta,
html[lang="sa"] .site-footer .meta a {
  font-family:'Inter', sans-serif;
  text-transform:none;
  letter-spacing:normal;
}

::selection{ background:var(--crayon); color:var(--paper); }
a{ color:inherit; }

/* ---------- HERO (home) ---------- */
.hero{
  min-height:100svh;
  background:var(--ink);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8vh 6vw;
  position:relative;
  overflow:hidden;
}
.hero-eyebrow{
  font-size:.7rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--fog);
  margin-bottom:2.2rem;
}
.type-line{
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(.95rem,1.6vw,1.25rem);
  color:#d9d5c9;
  max-width:46ch;
  line-height:1.65;
  min-height:6.5em;
  white-space:pre-wrap;
}
.type-line .cursor{
  display:inline-block;
  width:.55em;
  height:1.05em;
  background:var(--crayon);
  vertical-align:text-bottom;
  margin-left:2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

html[lang="sa"] .hero-title{
  font-weight:700;
  font-style:italic;
  font-size:clamp(3.9rem,11.8vw,9rem);
  line-height:1.12;
}

html[lang="sa"] .hero-eyebrow,
html[lang="sa"] .scroll-cue,
html[lang="sa"] .kicker {
  font-size:.75rem;
  line-height:1.6;
}

html[lang="sa"] .type-line {
  font-size:clamp(1.03rem,1.8vw,1.32rem);
  line-height:1.8;
  min-height:7.2em;
}

html[lang="sa"] .hero-sub {
  font-size:clamp(.95rem,1.6vw,1.08rem);
  line-height:1.72;
  max-width:40ch;
}

.hero-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-style:italic;
  font-size:clamp(3.2rem,11vw,8rem);
  line-height:.92;
  margin:1.4rem 0 0 0;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1.1s ease, transform 1.1s ease;
}
.hero-title.show{ opacity:1; transform:translateY(0); }
.hero-title .scribble{ position:relative; color:var(--crayon); font-style:italic; }
html[lang="sa"] .hero-title .scribble{ font-style:italic; }

.hero-sub{
  font-family:'Inter', sans-serif;
  font-size:.85rem;
  color:var(--fog);
  margin-top:1.6rem;
  max-width:38ch;
  line-height:1.6;
  opacity:0;
  transition:opacity 1s ease 1.2s;
}
.hero-sub.show{ opacity:1; }

.scroll-cue{
  position:absolute;
  bottom:6vh;
  left:6vw;
  font-family:'Inter', sans-serif;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--graphite);
}
.scroll-cue::after{
  content:"";
  display:block;
  width:1px;
  height:34px;
  background:var(--fog);
  margin-top:.6rem;
  animation:drop 1.8s ease-in-out infinite;
}
@keyframes drop{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  50.01%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ---------- CHAPTER PAGE HERO ---------- */
.chapter-hero{
  padding:14vh 6vw 6vh;
  max-width:920px;
  margin:0 auto;
}
.chapter-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-style:italic;
  font-size:clamp(2.6rem,7vw,4.5rem);
  line-height:1;
  margin:.4rem 0 1rem;
  color:var(--ink);
}
html[lang="sa"] .chapter-title{
  font-size:clamp(3rem,7.6vw,5.1rem);
  line-height:1.12;
}
.chapter-summary{
  font-family:'Fraunces', serif;
  font-weight:300;
  font-size:clamp(1.1rem,2vw,1.4rem);
  line-height:1.6;
  max-width:38ch;
  color:var(--graphite);
}

/* ---------- STORY (full chapter prose) ---------- */
.story{
  padding:2vh 6vw 8vh;
  max-width:920px;
  margin:0 auto;
}
.story-body{
  max-width:62ch;
  font-family:'Fraunces', serif;
  font-weight:300;
  font-size:clamp(1.1rem,1.9vw,1.3rem);
  line-height:1.75;
  color:var(--ink);
}
html[lang="sa"] .story-body{
  font-size:clamp(1.26rem,2.15vw,1.5rem);
  line-height:1.95;
}

html[lang="sa"] .story-body p {
  margin-bottom:1.7rem;
}
.story-body p{ margin:0 0 1.5rem 0; }
.story-body p:first-of-type::first-letter{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-style:italic;
  font-size:3.4em;
  float:left;
  line-height:.8;
  padding-right:.1em;
  color:var(--crayon);
}
.story-body em{ color:var(--graphite); font-style:italic; }

.story-pending{
  padding:2vh 6vw 6vh;
  max-width:920px;
  margin:0 auto;
}
.story-pending p{
  font-family:'Inter', sans-serif;
  font-size:.95rem;
  color:var(--graphite);
  border-left:2px solid var(--fog);
  padding-left:1rem;
}

.also-video{
  padding:2vh 6vw 9vh;
  max-width:920px;
  margin:0 auto;
}
.also-video-line{
  font-family:'Inter', sans-serif;
  font-size:.85rem;
  color:var(--graphite);
}
.also-video-line a{
  color:var(--crayon-dim);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- SECTION SHARED ---------- */
section{
  padding:9vh 6vw;
  max-width:920px;
  margin:0 auto;
}
.kicker{
  font-family:'Inter', sans-serif;
  font-size:.7rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--crayon-dim);
  margin-bottom:1rem;
}
html[lang="sa"] h2{
  font-weight:700;
}

h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(1.8rem,3.6vw,2.6rem);
  margin:0 0 1.6rem 0;
  line-height:1.15;
}

/* ---------- PREMISE ---------- */
.premise p{
  font-family:'Fraunces', serif;
  font-weight:300;
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  line-height:1.6;
  color:var(--ink);
  max-width:40ch;
}
html[lang="sa"] .premise p{
  font-size:clamp(1.24rem,2.2vw,1.68rem);
  line-height:1.82;
}

/* ---------- TRANSCRIPT / VERSE ---------- */
.verse{
  background:var(--ink);
  color:var(--paper);
}
.verse-inner{
  padding:9vh 6vw;
  max-width:920px;
  margin:0 auto;
}
.verse .kicker{ color:var(--crayon); }
.verse-lines{
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}
.verse-line{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:1.4rem;
  align-items:baseline;
  border-top:1px solid rgba(246,243,238,.12);
  padding-top:1.3rem;
}
.verse-line:first-child{ border-top:none; padding-top:0; }
.verse-time{
  font-family:'IBM Plex Mono', monospace;
  font-size:.75rem;
  color:var(--fog);
}
.verse-text{
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(.95rem,1.6vw,1.1rem);
  line-height:1.75;
  color:#e7e3d8;
}
.verse-text .mark{
  background:linear-gradient(180deg, transparent 62%, rgba(212,56,31,.55) 62%);
  color:var(--paper);
  padding:0 .05em;
}

/* ---------- WATCH ---------- */
.watch-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--paper-dim);
  border:1px solid var(--fog);
}
.watch-frame iframe{ width:100%; height:100%; border:0; display:block; }
.watch-caption{
  font-family:'Inter', sans-serif;
  font-size:.78rem;
  color:var(--graphite);
  margin-top:1rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.watch-caption a{
  color:var(--crayon-dim);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- CONTENTS / TOC ---------- */
.toc-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--fog); }
.toc-item{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--fog);
  font-family:'Inter', sans-serif;
}
.toc-item .num{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.1rem;
  color:var(--crayon-dim);
  min-width:2.4rem;
}
.toc-item .label{
  flex:1;
  font-size:.95rem;
  line-height:1.5;
  text-decoration:none;
}

html[lang="sa"] .toc-item .label {
  font-size:1rem;
  line-height:1.6;
}
.toc-item .label:hover{ text-decoration:underline; text-underline-offset:3px; }
.toc-item .status{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fog);
}
.toc-item.active .status{ color:var(--crayon-dim); }
.toc-item.locked{ color:var(--graphite); }

/* ---------- BACK LINK (chapter pages) ---------- */
.back-link a{
  font-family:'Inter', sans-serif;
  font-size:.85rem;
  color:var(--crayon-dim);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- FOOTER ---------- */
.site-footer{
  padding:7vh 6vw 5vh;
  max-width:920px;
  margin:0 auto;
  border-top:1px solid var(--fog);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:1.5rem;
}
.site-footer .sign{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.1rem;
  color:var(--ink);
}
.site-footer .sign a{ color:var(--crayon-dim); text-decoration:underline; text-underline-offset:3px; }
.site-footer .meta{
  font-family:'Inter', sans-serif;
  font-size:.72rem;
  color:var(--graphite);
  text-align:right;
  line-height:1.6;
}
.site-footer .meta a{ color:var(--graphite); text-decoration:underline; text-underline-offset:2px; }

/* ---------- LANGUAGE SELECTOR (Overlay) ---------- */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding: 1.2rem 2rem;
  display: flex;
  justify-content: flex-end;
  z-index: 1000;
  background: transparent;
  pointer-events: none; /* Allow clicks to pass through to hero */
}

.language-dropdown {
  position: relative;
  display: inline-block;
  pointer-events: auto; /* Re-enable clicks on dropdown */
}

.lang-toggle {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.45rem 1rem;
  cursor: pointer;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}

.lang-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.lang-toggle .arrow {
  margin-left: 0.3rem;
  font-size: 0.6rem;
  opacity: 0.6;
}

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  background: rgba(13, 13, 12, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  list-style: none;
  padding: 0.4rem 0;
  margin: 0;
  min-width: 110px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 100;
  overflow: hidden;
}

.language-dropdown.is-open .lang-menu,
.language-dropdown:hover .lang-menu,
.language-dropdown:focus-within .lang-menu {
  display: block;
}

.lang-menu li {
  padding: 0;
}

.lang-menu a {
  display: block;
  padding: 0.5rem 1.2rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s ease;
}

.lang-menu a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.lang-menu a.active {
  color: #fff;
  font-weight: 500;
}

.lang-menu a.active::before {
  content: "✓ ";
  opacity: 0.6;
}

/* On light backgrounds (chapter pages, contents section) */
.contents ~ .site-header .lang-toggle,
body:not(.has-hero) .lang-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
}

body:not(.has-hero) .lang-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #000;
  border-color: rgba(0, 0, 0, 0.15);
}

body:not(.has-hero) .lang-menu {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

body:not(.has-hero) .lang-menu a {
  color: rgba(0, 0, 0, 0.6);
}

body:not(.has-hero) .lang-menu a:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #000;
}

body:not(.has-hero) .lang-menu a.active {
  color: #000;
}

@media (max-width:600px){
  .verse-line{ grid-template-columns:44px 1fr; gap:.9rem; }
  .site-footer{ flex-direction:column; align-items:flex-start; }
  .site-footer .meta{ text-align:left; }
}

@media (prefers-reduced-motion: reduce){
  .hero-title, .hero-sub{ transition:none; opacity:1; transform:none; }
  .scroll-cue::after{ animation:none; }
  .type-line .cursor{ animation:none; }
}