/* GoWordToday — design tokens
   Layout: a single column that reads like the scripture card — deep sapphire night, gold WORD,
   a gold "north line" running up the page edge; the four stream doors are the one bold element. */
:root {
  --night: #061526;
  --sapphire: #073059;
  --panel: #0a2340;
  --panel-2: #0d2b4d;
  --ink: #eef2f8;
  --muted: #a8b6c9;
  --gold: #f0c552;
  --gold-deep: #b8912a;
  --scarlet: #d9414f;
  --ice: #8fc6ea;
  --purple: #a37ae0;
  --line: rgba(240, 197, 82, 0.22);
  --line-soft: rgba(168, 182, 201, 0.16);
  --focus: #ffe08a;

  --display: 'Cormorant Garamond', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --caps: 'Cormorant SC', 'Palatino Linotype', Palatino, Georgia, serif;
  --body: 'Literata', 'Palatino Linotype', Palatino, Georgia, serif;
  --lh: 1.65;
  --measure: 38rem;
  color-scheme: dark;
}
:lang(ar) {
  --display: 'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', serif;
  --caps: 'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', serif;
  --body: 'Noto Naskh Arabic', 'Amiri', 'Geeza Pro', 'Traditional Arabic', serif;
  --lh: 1.9;
}
:lang(hi) {
  --display: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', 'Kohinoor Devanagari', 'Mangal', serif;
  --caps: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', 'Mangal', serif;
  --body: 'Noto Serif Devanagari', 'Tiro Devanagari Hindi', 'Kohinoor Devanagari', 'Mangal', serif;
  --lh: 1.8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: var(--lh);
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, rgba(7, 48, 89, 0.9), transparent 70%),
    radial-gradient(40rem 24rem at 0% 40%, rgba(7, 48, 89, 0.45), transparent 70%);
  background-repeat: no-repeat;
}
a { color: var(--gold); text-underline-offset: 0.2em; }
a:hover { color: var(--focus); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; }

.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; background: var(--gold); color: var(--night); padding: 0.5rem 1rem; border-radius: 6px; z-index: 10; }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 48rem) { .wrap { padding-inline: 2rem; } }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: rgba(6, 21, 38, 0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.head-row { display: flex; align-items: center; gap: 1rem; padding-block: 0.75rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink); margin-inline-end: auto; }
.brand svg { width: 2rem; height: 2rem; flex: none; }
.brand-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.45rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; }
.brand-name b { color: var(--gold); font-weight: 600; }
.brand-sub { display: block; font-family: var(--caps); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.06em; margin-top: 0.2rem; }
:lang(ar) .brand-sub, :lang(hi) .brand-sub { letter-spacing: 0; }

.langs { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.langs a {
  display: block; padding: 0.3rem 0.6rem; border-radius: 999px; text-decoration: none;
  color: var(--muted); font-size: 0.9rem; line-height: 1.4; border: 1px solid transparent;
}
.langs a[aria-current="true"] { color: var(--night); background: var(--gold); }
.langs a:not([aria-current="true"]):hover { border-color: var(--line); color: var(--ink); }
.langs a[lang="ar"] { font-family: 'Noto Naskh Arabic', serif; }
.langs a[lang="hi"] { font-family: 'Noto Serif Devanagari', serif; }

.nav { overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line-soft); }
.nav::-webkit-scrollbar { display: none; }
.nav ul { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding-block: 0.4rem; padding-inline: 0; white-space: nowrap; }
.nav a { display: block; padding: 0.35rem 0.75rem; text-decoration: none; color: var(--muted); border-radius: 6px; font-size: 0.97rem; }
.nav a:hover { color: var(--ink); background: var(--panel); }
.nav a[aria-current="page"] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }

/* ---------- common sections ---------- */
main { display: block; }
.section { padding-block: 3.5rem; }
.section + .section { border-top: 1px solid var(--line-soft); }
.eyebrow {
  font-family: var(--caps); color: var(--gold); font-size: 1rem; letter-spacing: 0.12em;
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem;
}
:lang(ar) .eyebrow, :lang(hi) .eyebrow { letter-spacing: 0; font-size: 1.05rem; }
.eyebrow::before { content: ''; width: 1.75rem; height: 1px; background: var(--gold); }
.h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.lede { color: var(--muted); max-width: var(--measure); margin-top: 0.9rem; font-size: 1.1rem; }
.stack { display: grid; gap: 1rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
  padding: 0.8rem 1.35rem; border-radius: 999px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--gold); background: var(--gold); color: var(--night);
}
.btn:hover { background: var(--focus); border-color: var(--focus); color: var(--night); }
.btn.ghost { background: transparent; color: var(--gold); }
.btn.ghost:hover { background: rgba(240, 197, 82, 0.1); color: var(--focus); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- hero ---------- */
.hero { padding-block: 3.5rem 3rem; position: relative; }
.hero-grid { display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: -0.01em; }
:lang(ar) .hero h1, :lang(hi) .hero h1 { letter-spacing: 0; line-height: 1.35; }
.hero .lede { font-size: 1.15rem; }

.verse {
  margin: 0; position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, rgba(7, 48, 89, 0.55), rgba(7, 48, 89, 0.9));
  border-top: 1px solid var(--gold);
}
.verse p { font-family: var(--display); font-size: 1.45rem; line-height: 1.5; color: var(--gold); font-variant: small-caps; }
:lang(ar) .verse p, :lang(hi) .verse p { font-variant: normal; font-size: 1.4rem; line-height: 1.9; }
.verse cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--caps); color: var(--ink); letter-spacing: 0.1em; font-size: 0.95rem; }
:lang(ar) .verse cite, :lang(hi) .verse cite { letter-spacing: 0; }
.verse .lord { font-variant: small-caps; }

/* ---------- player ---------- */
.watch-grid { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) { .watch-grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.player {
  position: relative; aspect-ratio: 16 / 9; max-width: 100%; width: 100%;
  background: radial-gradient(circle at 50% 40%, var(--sapphire), #03101f 75%);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-btn {
  position: absolute; inset: 0; width: 100%; display: grid; place-content: center; justify-items: center; gap: 1rem;
  background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; padding: 1rem;
}
.player-btn .disc {
  width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--gold); background: rgba(240, 197, 82, 0.1); transition: transform 0.2s;
}
.player-btn:hover .disc { transform: scale(1.06); background: rgba(240, 197, 82, 0.2); }
.player-btn svg { width: 1.6rem; height: 1.6rem; fill: var(--gold); margin-inline-start: 0.25rem; }

.player-btn span { font-weight: 600; }
.live-tag { position: absolute; top: 0.9rem; inset-inline-start: 0.9rem; display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--muted); pointer-events: none; }
.live-tag::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--scarlet); box-shadow: 0 0 0 4px rgba(217, 65, 79, 0.25); }
.player-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.9rem; font-size: 0.95rem; }

.airs { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; padding: 1.25rem 1.35rem; }
.airs h3 { font-family: var(--caps); font-size: 1.05rem; color: var(--gold); letter-spacing: 0.08em; font-weight: 600; }
:lang(ar) .airs h3, :lang(hi) .airs h3 { letter-spacing: 0; }
.airs dl { margin: 0.9rem 0 0; display: grid; gap: 0.8rem; }
.airs dt { font-size: 0.9rem; color: var(--muted); }
.airs dd { margin: 0; font-family: var(--display); font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.airs dd small { font-family: var(--body); font-size: 0.85rem; color: var(--muted); margin-inline-start: 0.4rem; }
.airs .note { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); }
.player-note { color: var(--muted); font-size: 0.95rem; margin-top: 0.75rem; }

/* ---------- stream doors (the bold element) ---------- */
.doors { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 2rem; }
.door {
  --c: var(--gold);
  position: relative; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0;
  padding: 1.5rem 1.35rem 1.35rem; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-soft); border-radius: 10px 10px 4px 4px;
  transition: border-color 0.2s, transform 0.2s;
}
.door::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--c); border-radius: 10px 10px 0 0; }
.door:hover { border-color: var(--c); transform: translateY(-2px); color: var(--ink); }
.door.scarlet { --c: var(--scarlet); } .door.ice { --c: var(--ice); } .door.purple { --c: var(--purple); } .door.gold { --c: var(--gold); }
.door .region { font-family: var(--caps); font-size: 1rem; letter-spacing: 0.08em; color: var(--c); }
:lang(ar) .door .region, :lang(hi) .door .region { letter-spacing: 0; }
.door .native { font-size: 2.2rem; line-height: 1.2; font-weight: 600; }
.door .native[lang="ar"] { font-family: 'Amiri', 'Noto Naskh Arabic', serif; }
.door .native[lang="hi"] { font-family: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif; }
.door .native[lang="ru"], .door .native[lang="en"] { font-family: 'Cormorant Garamond', Georgia, serif; }
.door .desc { color: var(--muted); font-size: 0.95rem; }
.door .time { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--line-soft); font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.door .time b { color: var(--ink); font-weight: 600; }
.door .tag { position: absolute; top: 0.9rem; inset-inline-end: 0.9rem; font-size: 0.75rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--c); color: var(--night); font-weight: 600; }
.door[aria-current="true"] { border-color: var(--c); }
.door.suggested { box-shadow: 0 0 0 1px var(--c), 0 12px 40px -18px var(--c); }

/* ---------- lists of items ---------- */
.cols { display: grid; gap: 1.75rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 2.25rem; }
.item h3 { font-size: 1.45rem; color: var(--ink); }
.item p { color: var(--muted); margin-top: 0.45rem; }
.item .ref { display: block; margin-top: 0.6rem; font-family: var(--caps); color: var(--gold); letter-spacing: 0.06em; font-size: 0.95rem; }
:lang(ar) .item .ref, :lang(hi) .item .ref { letter-spacing: 0; }
.item { padding-inline-start: 1rem; border-inline-start: 1px solid var(--line); min-width: 0; }

.warehouses { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--line-soft); }
.warehouses li { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.warehouses li h3 { font-size: 1.5rem; color: var(--gold); }
.warehouses li p { color: var(--muted); min-width: 0; }
@media (max-width: 34rem) { .warehouses li { grid-template-columns: 1fr; gap: 0.25rem; } }
ul.plain { list-style: none; margin: 0; padding: 0; }

.band { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .band { grid-template-columns: 1fr 1fr; } }
.panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.panel h2 { font-size: 1.9rem; }
.panel p { color: var(--muted); }
.panel .btn { margin-top: 0.5rem; }

.facts { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-top: 2rem; }
.facts div { display: flex; flex-direction: column; }
.facts b { font-family: var(--display); font-size: 2.4rem; color: var(--gold); line-height: 1.1; font-weight: 600; }
.facts span { color: var(--muted); font-size: 0.95rem; }

.prose { max-width: var(--measure); display: grid; gap: 1.1rem; margin-top: 1.25rem; font-size: 1.12rem; }

.contact-list { display: grid; gap: 0; margin-top: 2rem; max-width: 40rem; border-top: 1px solid var(--line-soft); }
.contact-list li { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; padding-block: 1.1rem; border-bottom: 1px solid var(--line-soft); }
.contact-list .k { width: 8rem; color: var(--muted); font-size: 0.95rem; }
.contact-list .v { font-size: 1.2rem; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; min-width: 0; }
.contact-list .v.loc { direction: inherit; }
.copy { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--gold); cursor: pointer; margin-inline-start: auto; }
.copy:hover { background: rgba(240, 197, 82, 0.1); }

/* ---------- chooser (root) ---------- */
.chooser { padding-block: 3rem 4rem; }
.chooser-titles { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-items: baseline; }
.chooser-titles h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.chooser-titles span { font-size: clamp(1.3rem, 3vw, 1.8rem); color: var(--muted); }
.chooser-titles [lang="ar"] { font-family: 'Amiri', serif; }
.chooser-titles [lang="hi"] { font-family: 'Tiro Devanagari Hindi', serif; }
.chooser .doors { margin-top: 2.5rem; }
.door .go { font-size: 0.95rem; color: var(--c); font-weight: 600; }

/* ---------- logos ---------- */
.brand-logo { width: 3.3rem; height: auto; flex: none; }
.foot-logo { width: 4.5rem; height: auto; flex: none; }
.hero-side { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; min-width: 0; }
.hero-side .verse { width: 100%; }
.seal { width: 11rem; height: auto; max-width: 100%; border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 18px 50px -20px rgba(240, 197, 82, 0.45); }
.seal-sm { width: 8rem; }
.seal-chooser { width: 9rem; margin-bottom: 1.5rem; }
.about-verse { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 48rem) { .about-verse { grid-template-columns: auto 1fr; gap: 2.5rem; } }
@media (max-width: 34rem) { .seal { width: 8.5rem; } }

/* ---------- 24/7 live channel ---------- */
.live-label {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 0.9rem;
  font-family: var(--caps); color: var(--gold); font-size: 1rem; letter-spacing: 0.1em; font-weight: 600;
}
:lang(ar) .live-label, :lang(hi) .live-label { letter-spacing: 0; font-size: 1.05rem; }
.live-label::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--scarlet); box-shadow: 0 0 0 4px rgba(217, 65, 79, 0.25); flex: none; }
.features { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-top: 2.5rem; }
.features li { display: flex; flex-direction: column; padding-inline-start: 1rem; border-inline-start: 1px solid var(--line); }
.features b { font-family: var(--display); font-size: 1.3rem; font-weight: 600; }
.features span { color: var(--muted); font-size: 0.95rem; }
.live-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.5rem; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(90deg, rgba(7, 48, 89, 0.9), rgba(10, 35, 64, 0.6));
}
.live-strip .live-label { margin-bottom: 0.35rem; }
.live-text { color: var(--muted); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); margin-top: 1rem; padding-block: 2.5rem 2rem; background: rgba(3, 12, 23, 0.6); }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-foot p, .site-foot li { color: var(--muted); font-size: 0.93rem; }
.site-foot h2 { font-family: var(--caps); font-size: 1rem; color: var(--gold); letter-spacing: 0.08em; margin-bottom: 0.6rem; }
:lang(ar) .site-foot h2, :lang(hi) .site-foot h2 { letter-spacing: 0; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.site-foot a { color: var(--ink); text-decoration: none; }
.site-foot a:hover { color: var(--gold); }
.foot-base { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot-base p { font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }