:root {
  --ink: #262019;
  --ink-soft: #4a4034;
  --parchment: #f7f0df;
  --parchment-deep: #efe4c8;
  --gold: #b9902e;
  --gold-bright: #d4af37;
  --maroon: #7a1f2b;
  --indigo: #232a5c;
  --terracotta: #8a3324;
  --royal-blue: #1a3a8f;
  --shadow: rgba(38, 32, 25, 0.18);
  --carousel-fade: #fffdf6;
  --radius-lg: 22px;
  --radius-md: 14px;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-gurmukhi: "Noto Serif Gurmukhi", "Noto Sans Gurmukhi", serif;
  --accent: var(--gold);
  --accent-strong: var(--maroon);
}

.theme-indigo {
  --accent: var(--indigo);
  --accent-strong: var(--terracotta);
}

.theme-accent {
  --accent: var(--royal-blue);
  --accent-strong: var(--royal-blue);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

html {
  background: #fffdf6;
}

body {
  background: radial-gradient(circle at top, #fffdf6 0%, var(--parchment) 45%, var(--parchment-deep) 100%);
  color: var(--ink);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  /* Top safe-area is handled by the hero carousel itself on pages that have
     one (it bleeds under the notch/status bar) — see .sources-page for the
     plain pages that don't. */
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  animation: page-fade-in 0.35s ease both;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hero carousel — bleeds full-bleed edge to edge and under the status
   bar/notch (the safe-area inset is added to its height rather than as
   padding, so the image itself extends up there, not empty space). Only
   two slides are ever loaded at once (see app.js); the rest sit inert
   with data-src until their turn. A soft gradient at the base blends it
   into the page background so it reads as one continuous surface rather
   than a photo pasted on top. */
.hero-carousel {
  position: relative;
  width: 100%;
  height: calc(clamp(190px, 34vh, 340px) + env(safe-area-inset-top));
  overflow: hidden;
  background: #14110d;
}

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: opacity;
}

.hero-slide.active {
  opacity: 1;
}

.hero-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 45%, var(--carousel-fade) 96%);
  pointer-events: none;
}

.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.hero-dot {
  width: 7px;
  height: 7px;
  /* Padding + background-clip give this a comfortable ~23px tap target
     on touch devices while keeping the visible dot small. */
  padding: 8px;
  background-clip: content-box;
  border-radius: 999px;
  border: none;
  background-color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.hero-dot.active {
  background-color: #fffdf6;
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}

.masthead {
  text-align: center;
  margin-bottom: 22px;
}

.eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--accent-strong);
  margin: 0 0 10px;
}

.site-title {
  font-family: var(--font-gurmukhi);
  font-weight: 600;
  font-size: clamp(22px, 5vw, 30px);
  margin: 0 0 4px;
  color: var(--ink);
}

.site-title-en {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0;
}

.source-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  background: rgba(0,0,0,0.05);
  padding: 6px;
  border-radius: 20px;
  margin-bottom: 22px;
  max-width: 100%;
}

.toggle-btn {
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.toggle-btn.active {
  background: var(--accent);
  color: #fff8ea;
}

/* The border art is applied as a CSS border-image (9-slice) rather than a
   stretched background: a background-image sized to 100% 100% combined with
   percentage padding (which CSS resolves against the element's WIDTH, even
   for top/bottom) meant the ornamental corners shrank to a sliver of the
   frame's height for long shabads, letting the growing text card cover
   them. border-image keeps each corner a fixed, undistorted pixel size no
   matter how tall the content gets — only the straight edges between
   corners stretch, and only along their own axis (top/bottom stretch
   horizontally, left/right stretch vertically), which is what an ornate
   letter border actually looks like when the "page" grows longer. */
.letter-frame {
  width: 100%;
  border-style: solid;
  border-image-source: var(--frame-image);
  border-image-repeat: stretch;
  display: flex;
  justify-content: center;
}

.theme-gold .letter-frame {
  border-width: 44px 34px;
  border-image-slice: 27% 28% fill;
}

.theme-indigo .letter-frame {
  border-width: 78px 30px 34px;
  border-image-slice: 43% 9% 11% fill;
}

.theme-accent .letter-frame {
  border-width: 70px 28px 32px;
  border-image-slice: 39% 14% 11% fill;
}

.letter-inner {
  background: rgba(255, 253, 246, 0.96);
  border-radius: var(--radius-md);
  padding: 28px clamp(16px, 4vw, 36px) 34px;
  box-shadow: 0 18px 44px var(--shadow);
  width: 100%;
  text-align: center;
}

.citation {
  font-family: var(--font-gurmukhi);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-strong);
  margin: 0 0 20px;
  line-height: 1.5;
}

.citation-en {
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.verse-block {
  text-align: center;
}

.verse-block .verse {
  font-family: var(--font-gurmukhi);
  /* 600 rather than the font's default 400: at reading size, Gurmukhi's
     subjoined-consonant marks (rakar/vakar/haha, e.g. ਬ੍ਰਹਮ vs ਬਰਹਮ) are a
     small hooked stroke that all but disappears at regular weight, making
     conjunct and non-conjunct spellings look identical at a glance. */
  font-weight: 600;
  font-size: clamp(19px, 3.4vw, 24px);
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 18px;
}

.verse-block .translation {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 2.6vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

.controls {
  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.controls-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.btn {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  color: #fffaf0;
  box-shadow: 0 8px 20px var(--shadow);
}

.btn-outline {
  background: transparent;
  border-color: rgba(38,32,25,0.25);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--accent-strong);
}

.status {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink-soft);
  min-height: 16px;
  margin: 0;
}

.site-footer {
  margin-top: 46px;
  text-align: center;
  font-family: var(--font-gurmukhi);
  color: var(--ink-soft);
  font-size: 14px;
}

.footnote {
  font-family: var(--font-ui);
  font-size: 11px;
  margin-top: 8px;
}

.footnote a {
  color: var(--ink-soft);
}

.sources-page {
  text-align: left;
  font-family: var(--font-serif);
  /* These pages have no hero carousel bleeding under the status bar, so
     they need their own top safe-area allowance. */
  padding-top: max(32px, calc(env(safe-area-inset-top) + 12px));
}

.sources-page h1 {
  font-family: var(--font-gurmukhi);
}

.sources-page section {
  margin-bottom: 22px;
}

.faq-page {
  text-align: left;
  font-family: var(--font-serif);
  max-width: 640px;
}

.faq-page h1 {
  font-family: var(--font-gurmukhi);
  text-align: center;
  margin-top: 0;
}

.faq-hero {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: 22px;
  box-shadow: 0 12px 30px var(--shadow);
}

.faq-page details {
  border-bottom: 1px solid rgba(38, 32, 25, 0.12);
  padding: 16px 2px;
}

.faq-page summary {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
}

.faq-page summary::-webkit-details-marker {
  display: none;
}

.faq-page summary::after {
  content: "+";
  font-size: 20px;
  color: var(--accent-strong);
  margin-left: 12px;
  transition: transform 0.2s ease;
}

.faq-page details[open] summary::after {
  transform: rotate(45deg);
}

.faq-body {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.faq-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(38, 32, 25, 0.08);
  padding: 1px 6px;
  border-radius: 6px;
}

.faq-body ul,
.faq-body ol {
  padding-left: 22px;
}

.faq-body li {
  margin-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

@media (max-width: 420px) {
  .theme-gold .letter-frame { border-width: 32px 22px; }
  .theme-indigo .letter-frame { border-width: 56px 20px 24px; }
  .theme-accent .letter-frame { border-width: 50px 20px 22px; }
  .letter-inner { padding: 22px 14px 28px; }
}

/* Dark mode — the letter card itself always stays parchment-toned (a lit
   page in a dark room), so only the chrome around it inverts. This block
   is intentionally last so it wins cascade ties against the base rules
   above it (same selector specificity, later source order). */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3ead2;
    --ink-soft: #cabf9d;
    --gold: #e0b84a;
    --gold-bright: #f0cf6b;
    --carousel-fade: #23201c;
  }
  body {
    background: radial-gradient(circle at top, #23201c 0%, #17140f 55%, #0f0d0a 100%);
    color: var(--ink);
  }
  .letter-inner {
    background: rgba(255, 253, 246, 0.97);
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  }
  .citation { color: var(--maroon); }
  .theme-indigo .citation { color: var(--terracotta); }
  .theme-accent .citation { color: var(--royal-blue); }
  .citation-en { color: #4a4034; }
  .verse-block .verse { color: #262019; }
  .verse-block .translation { color: #4a4034; }
  .btn-outline { border-color: rgba(243,234,210,0.35); color: var(--ink); }
  .source-toggle { background: rgba(255,255,255,0.08); }
  .toggle-btn { color: var(--ink-soft); }
  .faq-page details { border-bottom-color: rgba(243, 234, 210, 0.18); }
  .faq-body code { background: rgba(243, 234, 210, 0.12); }
}