@font-face { font-family: "Hafs"; src: url("/assets/fonts/kfgqpc-hafs-v18.woff2?v=abcee74dcd") format("woff2"); font-display: block; }
@font-face { font-family: "Garamond"; src: url("/assets/fonts/ebgaramond-regular.woff2?v=299d946b8d") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Garamond"; src: url("/assets/fonts/ebgaramond-medium.woff2?v=72e10c566d") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Garamond"; src: url("/assets/fonts/ebgaramond-regularitalic.woff2?v=f784c83948") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- Scenes (time of day) ---------- */
:root {
  --paper: #faf6ee;
  --paper-2: #f3ecdf;
  --charcoal: #241f19;
  --gold: #a9843a;
  --gold-soft: rgba(169, 132, 58, .45);
  --serif: "Garamond", "EB Garamond", Georgia, serif;
  --arabic: "Hafs", "KFGQPC HAFS Uthmanic Script", "Amiri Quran", serif;

  --ink: #2a2218; --ink-soft: #54452f; --ink-floor: #3b3124;
  --g1: #fbecc0; --g2: #d4a447; --g3: #7a531a; --glow: rgba(255, 232, 170, .65); --edge: rgba(92, 60, 12, .38);
  --glass: rgba(255, 251, 243, .58); --glass-line: rgba(176, 138, 62, .55); --glass-ink: #2f271c;
  --veil: rgba(255, 250, 238, .38); --floorglow: rgba(255, 220, 150, .55);
  --dim: #8b8c87; --dim-on: #7e7769; --lit: #c48d2c; --lit-divine: #b07a1c; --lit-glow: rgba(255, 220, 140, .95);
  --sheen: rgba(255, 248, 228, .3);
}
:root[data-scene="dawn"] {
  --dim: #6b6770; --dim-on: #675d58;
  --ink: #2c2433; --ink-soft: #57495f; --ink-floor: #3d3446;
  --glow: rgba(255, 228, 236, .6); --veil: rgba(255, 246, 250, .3); --floorglow: rgba(255, 214, 226, .45); --sheen: rgba(255, 246, 244, .3);
  --glass: rgba(255, 249, 252, .55); --glass-line: rgba(176, 138, 62, .5);
}
:root[data-scene="sunset"] {
  --ink: #2a1810; --ink-soft: #4f3121; --ink-floor: #3a2418;
  /* the sky is a warm mid-tone, so the gold is burnished darker and the resting letters are deep plum to stand clear of it */
  --g1: #ffe7b0; --g2: #c27d24; --g3: #55290a; --sheen: rgba(255, 236, 200, .28);
  --glow: rgba(255, 196, 130, .32); --edge: rgba(48, 16, 4, .6); --veil: rgba(255, 238, 224, .3); --floorglow: rgba(255, 190, 120, .5);
  --glass: rgba(255, 244, 236, .55); --glass-line: rgba(190, 130, 60, .55);
  --dim: #43232c; --dim-on: #2f161c; --lit: #ffd56e; --lit-divine: #fff1c9; --lit-glow: rgba(255, 166, 54, .95);
}
:root[data-scene="night"] {
  --ink: #f6ecd8; --ink-soft: #dccdb2; --ink-floor: #3b3446;
  --g1: #fff6d6; --g2: #ecc46a; --g3: #b7862c;
  --glow: rgba(255, 205, 120, .55); --edge: rgba(0, 0, 0, .45); --veil: rgba(10, 16, 48, 0); --floorglow: rgba(255, 196, 110, .5); --sheen: rgba(255, 242, 210, .26);
  --glass: rgba(14, 20, 50, .62); --glass-line: rgba(230, 196, 120, .5); --glass-ink: #f6ecd8;
  --dim: #666c80; --dim-on: #898c95; --lit: #ffd77a; --lit-divine: #fff0c4; --lit-glow: rgba(255, 196, 90, .85);
}

/* The Arabic's colour (the Aa panel). Gold, above, is the default; ivory and ink are tuned to each
   light so the letters always stand clear of the sky. While a recitation plays, the letters still
   light up in gold: that is the recitation's light, whatever the resting colour. */
:root[data-ink="ivory"] {
  --g1: #ffffff; --g2: #f6efe4; --g3: #d8cab2; --sheen: rgba(255, 255, 255, .35);
  --glow: rgba(255, 252, 240, .28); --edge: rgba(58, 44, 26, .55); --outline: rgba(64, 48, 28, .75);
  --dim: #f3ece0; --dim-on: #e7dccb;
}
:root[data-ink="ivory"][data-scene="night"] { --edge: rgba(0, 0, 0, .6); --outline: rgba(0, 0, 0, .45); --glow: rgba(255, 250, 235, .22); --dim: #d6d1c7; --dim-on: #c4beb2; }
:root[data-ink="ivory"][data-scene="sunset"] { --outline: rgba(60, 26, 20, .45); --dim: #f7ebe2; --dim-on: #eadbd0; }
:root[data-ink="ink"] {
  --g1: #75614f; --g2: #3d2e23; --g3: #1b130e; --sheen: rgba(255, 238, 205, .16);
  --glow: rgba(255, 248, 232, .55); --edge: rgba(255, 250, 240, .25); --outline: transparent;
  --dim: #2f251d; --dim-on: #1f1812;
}
:root[data-ink="ink"][data-scene="dawn"] { --dim: #2c2333; --dim-on: #1e1724; }
:root[data-ink="ink"][data-scene="sunset"] { --g1: #6e4a3e; --g2: #3a1f1c; --g3: #1c0d0c; --dim: #2f161c; --dim-on: #1f0e12; --glow: rgba(255, 236, 214, .5); }
/* at night the ink letters take a fine gold rim, like gilded edges, and a soft lamp-glow */
:root[data-ink="ink"][data-scene="night"] { --g1: #56608a; --g2: #2e3658; --g3: #171c33; --glow: rgba(255, 205, 120, .4); --edge: rgba(255, 210, 140, .3);
  --dim: #2a3152; --dim-on: #1e2440; --rim: rgba(236, 196, 106, .95); }
:root[data-ink="ink"][data-scene="night"] .room__arabic { filter: drop-shadow(0 0 1px var(--rim)) drop-shadow(0 0 1px var(--rim)) drop-shadow(0 0 1px var(--rim)) drop-shadow(0 0 16px var(--glow)); }
/* while reciting, the rim is on the resting letters only (a text-shadow), so the lit gold keeps its own clean glow */
:root[data-ink="ink"][data-scene="night"] .room__arabic.is-reciting { filter: none; text-shadow: 0 0 1px var(--rim), 0 0 1px var(--rim), 0 0 1px var(--rim), 0 0 12px var(--glow); }

/* Each light is two layers: the sky behind, and the hall in front with its arch cut open,
   so the two can move apart for depth. */
:root {
  --front: image-set(url("/assets/img/front-day-1672.avif?v=9daaba03df") type("image/avif"), url("/assets/img/front-day-1672.webp?v=c5852e0c87") type("image/webp"));
  --front-sm: image-set(url("/assets/img/front-day-960.avif?v=c474fd0de5") type("image/avif"), url("/assets/img/front-day-960.webp?v=d56c934fd3") type("image/webp"));
  --sky: image-set(url("/assets/img/sky-day-1672.avif?v=e6c6e309f4") type("image/avif"), url("/assets/img/sky-day-1672.webp?v=7a9d102834") type("image/webp"));
  --sky-sm: image-set(url("/assets/img/sky-day-960.avif?v=e82e3686dc") type("image/avif"), url("/assets/img/sky-day-960.webp?v=211161ed07") type("image/webp"));
  --front-portrait: image-set(url("/assets/img/front-day-portrait.avif?v=c391cf96a5") type("image/avif"), url("/assets/img/front-day-portrait.webp?v=ab5aac4366") type("image/webp"));
  --sky-portrait: image-set(url("/assets/img/sky-day-portrait.avif?v=164453e66e") type("image/avif"), url("/assets/img/sky-day-portrait.webp?v=9566cc192c") type("image/webp"));
}
:root[data-scene="dawn"] {
  --front: image-set(url("/assets/img/front-dawn-1672.avif?v=6e29d7a372") type("image/avif"), url("/assets/img/front-dawn-1672.webp?v=58f3930a0f") type("image/webp"));
  --front-sm: image-set(url("/assets/img/front-dawn-960.avif?v=13b73eb8b7") type("image/avif"), url("/assets/img/front-dawn-960.webp?v=843a6ab9e6") type("image/webp"));
  --sky: image-set(url("/assets/img/sky-dawn-1672.avif?v=a2462e4882") type("image/avif"), url("/assets/img/sky-dawn-1672.webp?v=2d9729c860") type("image/webp"));
  --sky-sm: image-set(url("/assets/img/sky-dawn-960.avif?v=8a1514ce1b") type("image/avif"), url("/assets/img/sky-dawn-960.webp?v=cbbc859858") type("image/webp"));
  --front-portrait: image-set(url("/assets/img/front-dawn-portrait.avif?v=e65f073d0c") type("image/avif"), url("/assets/img/front-dawn-portrait.webp?v=2d524ea861") type("image/webp"));
  --sky-portrait: image-set(url("/assets/img/sky-dawn-portrait.avif?v=e3d1e527ca") type("image/avif"), url("/assets/img/sky-dawn-portrait.webp?v=58fe7f36cc") type("image/webp"));
}
:root[data-scene="sunset"] {
  --front: image-set(url("/assets/img/front-sunset-1672.avif?v=35b984f240") type("image/avif"), url("/assets/img/front-sunset-1672.webp?v=35041a8c7f") type("image/webp"));
  --front-sm: image-set(url("/assets/img/front-sunset-960.avif?v=52972c1ccc") type("image/avif"), url("/assets/img/front-sunset-960.webp?v=cb918c4ea0") type("image/webp"));
  --sky: image-set(url("/assets/img/sky-sunset-1672.avif?v=95678f0b37") type("image/avif"), url("/assets/img/sky-sunset-1672.webp?v=9b40578d5e") type("image/webp"));
  --sky-sm: image-set(url("/assets/img/sky-sunset-960.avif?v=4f4f067d2a") type("image/avif"), url("/assets/img/sky-sunset-960.webp?v=1ce4b32e78") type("image/webp"));
  --front-portrait: image-set(url("/assets/img/front-sunset-portrait.avif?v=e7e8cfd662") type("image/avif"), url("/assets/img/front-sunset-portrait.webp?v=d4d45712a3") type("image/webp"));
  --sky-portrait: image-set(url("/assets/img/sky-sunset-portrait.avif?v=9dacec37eb") type("image/avif"), url("/assets/img/sky-sunset-portrait.webp?v=3ecc45b67b") type("image/webp"));
}
:root[data-scene="night"] {
  --front: image-set(url("/assets/img/front-night-1672.avif?v=d6c2362107") type("image/avif"), url("/assets/img/front-night-1672.webp?v=09c110d470") type("image/webp"));
  --front-sm: image-set(url("/assets/img/front-night-960.avif?v=8cf0d6e41e") type("image/avif"), url("/assets/img/front-night-960.webp?v=852ebc3a95") type("image/webp"));
  --sky: image-set(url("/assets/img/sky-night-1672.avif?v=57e8bd9b31") type("image/avif"), url("/assets/img/sky-night-1672.webp?v=cbebd91e6b") type("image/webp"));
  --sky-sm: image-set(url("/assets/img/sky-night-960.avif?v=ca159b688f") type("image/avif"), url("/assets/img/sky-night-960.webp?v=109bdef8ca") type("image/webp"));
  --front-portrait: image-set(url("/assets/img/front-night-portrait.avif?v=7c78c05f60") type("image/avif"), url("/assets/img/front-night-portrait.webp?v=fc10956102") type("image/webp"));
  --sky-portrait: image-set(url("/assets/img/sky-night-portrait.avif?v=eb356721aa") type("image/avif"), url("/assets/img/sky-night-portrait.webp?v=456bc59968") type("image/webp"));
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--charcoal); font-family: var(--serif); font-size: 1.125rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- Masthead ---------- */
.masthead { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; gap: 2rem; padding: clamp(14px, 2.4vw, 28px) clamp(16px, 3.6vw, 52px); color: #2a2218; }
.wordmark { display: inline-flex; align-items: center; font-size: clamp(1.25rem, 2vw, 1.6rem); text-decoration: none; margin-right: auto; }
/* The logo is one traced shape (assets/logo.svg) used as a mask, so it takes the text colour around it. */
.logo { display: block; flex: none; height: 1.45em; width: 4.9em; /* 1904 x 563 artwork; explicit width for older Safari */ background: currentColor;
  -webkit-mask: url("/assets/logo.svg?v=0cd8334113") center / contain no-repeat; mask: url("/assets/logo.svg?v=0cd8334113") center / contain no-repeat; }
/* over the arches: a soft halo keeps it readable (on the link, since the mask would cut it off the logo itself) */
.masthead .wordmark { filter: drop-shadow(0 0 5px rgba(255, 250, 238, .9)); }
.nav { display: flex; gap: 1.6rem; }
.nav a { text-decoration: none; letter-spacing: .04em; padding: .3rem 0; border-bottom: 1px solid transparent; text-shadow: 0 0 14px rgba(255, 250, 238, .9); }
.nav a:hover { border-color: var(--gold); }
.nav a[aria-current="page"] { border-color: var(--gold-soft); }
.nav a[aria-current="page"]:hover { border-color: var(--gold); }
/* The menu button and sheet on phones and portrait screens (menu.js). */
.menu-btn { display: none; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: inherit; flex: none; }
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { display: block; width: 20px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .3s ease, background .3s ease; }
.menu-btn__bars { position: relative; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
.menu-btn__bars::before { top: -6px; }
.menu-btn__bars::after { top: 6px; }
.is-menu .menu-btn__bars { background: transparent; }
.is-menu .menu-btn__bars::before { transform: translateY(6px) rotate(45deg); }
.is-menu .menu-btn__bars::after { transform: translateY(-6px) rotate(-45deg); }
.nav__home { display: none; }
.is-menu { overflow: hidden; }
.scenes { display: flex; gap: 8px; padding-left: 1.4rem; border-left: 1px solid var(--gold-soft); }
.scenes button { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(120, 90, 30, .55); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); transition: transform .2s; }
.scenes button:hover { transform: scale(1.15); }
.scenes button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gold); }
/* the light that is on, in its quiet version (tap it again to switch): its dot dims */
.scenes button.is-quiet { box-shadow: inset 0 0 0 8px rgba(8, 10, 24, .4), 0 0 0 2px #fff, 0 0 0 3.5px var(--gold); }
/* The Mushaf's markers, the hizb sign ۞ and the prostration sign ۩, can be hidden from the Aa panel. */
/* They are kept in the reading text and hidden, unless shown, in the large Arabic at the top. */
:root:not([data-mk="on"]) .room__arabic .mk { display: none; }
.scenes [data-scene="dawn"] { background: linear-gradient(#9fb0e0, #f2c6d4); }
.scenes [data-scene="day"] { background: linear-gradient(#a9cdf2, #fff6e2); }
.scenes [data-scene="sunset"] { background: linear-gradient(#9b7fa6, #f4a564); }
.scenes [data-scene="night"] { background: radial-gradient(circle at 60% 40%, #e9c46a 0 2px, #1a2350 3px); }

/* ---------- The room ---------- */
.room { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; color: var(--ink); }
.room__bg { position: absolute; inset: 0; z-index: -1; background: #e9e2d4; }
.room__sky, .room__plate { position: absolute; inset: -14px; background: center / cover no-repeat; will-change: transform; }
/* The hall stands still; only scrolling gives it depth (the sky moves a little slower), and the clouds drift very slowly. */
.room__sky { inset: -44px; background-image: var(--sky); transform: translate3d(0, calc(var(--scroll, 0px) * .35), 0); animation: drift 60s ease-in-out infinite; }
.room__plate { background-image: var(--front); transform: translate3d(0, calc(var(--scroll, 0px) * .12), 0); }
@media (max-width: 900px) { .room__plate { background-image: var(--front-sm); } .room__sky { background-image: var(--sky-sm); } }
.room__veil { position: absolute; inset: 0; background: radial-gradient(ellipse 38% 34% at 50% 40%, var(--veil), transparent 70%); }
.room__floorglow { position: absolute; left: 30%; right: 30%; top: 80%; height: 16%; background: radial-gradient(ellipse at 50% 30%, var(--floorglow), transparent 70%); filter: blur(6px); animation: breathe 9s ease-in-out infinite; }

.room__stage { position: absolute; left: 50%; top: 11%; bottom: 41%; width: min(46vw, 820px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: opacity .45s ease; }
.room__ref { margin: 0 0 .2em; font-size: .82rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.room__arabic {
  margin: 0; font-family: var(--arabic); font-weight: normal; line-height: 1.75; padding: .1em .25em .25em;
  font-size: var(--ar-size, clamp(3rem, min(10.5vw, 20svh), 12rem));
  /* the gold, and a broad soft light that now and then passes slowly across it, right to left */
  background-image:
    linear-gradient(100deg, transparent 33%, var(--sheen) 50%, transparent 67%),
    linear-gradient(178deg, var(--g1) 8%, var(--g2) 40%, var(--g3) 68%, var(--g2) 88%);
  background-size: 300% 100%, 100% 100%; background-position: 150% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 .6px var(--outline, transparent)) drop-shadow(0 1px 0 rgba(255, 255, 255, .5)) drop-shadow(0 4px 5px var(--edge)) drop-shadow(0 0 34px var(--glow));
  animation: sheen 24s ease-in-out 3s infinite;
}
.room__caption { position: absolute; left: 50%; top: 60%; width: min(90vw, 760px); transform: translateX(-50%); text-align: center; transition: opacity .45s ease; }
.room__caption h1 { margin: 0; font-weight: 400; font-style: italic; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.1; letter-spacing: -.005em; text-shadow: 0 0 24px var(--veil); }
.room__caption p { margin: .5rem 0 0; font-size: clamp(.82rem, 1.1vw, .98rem); letter-spacing: .16em; color: var(--ink-soft); }
.btn-outline { display: none; }
.is-changing .room__stage, .is-changing .room__caption { opacity: 0; }

/* ---------- Player ---------- */
.player {
  position: absolute; left: 50%; bottom: calc(5.5% + 34px); transform: translateX(-50%); width: min(92vw, 1060px);
  display: grid; grid-template-columns: auto auto auto 1fr auto auto; align-items: center;
  padding: 8px 10px; border-radius: 999px; color: var(--glass-ink);
  background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 10px 40px rgba(60, 40, 10, .12), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.player > * + * { border-left: 1px solid var(--glass-line); }
.player__step { width: 54px; height: 40px; display: grid; place-items: center; }
.player__step svg, .room__scroll svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.player__step:disabled { opacity: .3; cursor: default; }
.player__ref { padding: 0 1.6rem; font-size: 1.05rem; letter-spacing: .06em; font-variant-numeric: lining-nums; }
.player__play { display: flex; align-items: center; gap: .7rem; padding: 0 1.6rem 0 1.2rem; font-size: 1.05rem; }
.player__disc { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center; flex: none; }
.player__disc svg { width: 18px; height: 18px; fill: currentColor; }
.i-pause { display: none; }
.is-playing .i-play { display: none; }
.is-playing .i-pause { display: block; }
.player__seek { --p: 0%; -webkit-appearance: none; appearance: none; height: 40px; margin: 0; padding: 0 1.6rem; background: transparent; cursor: pointer; min-width: 80px; }
.player__seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--gold) var(--p), rgba(140, 120, 90, .35) var(--p)); }
.player__seek::-moz-range-track { height: 2px; background: linear-gradient(90deg, var(--gold) var(--p), rgba(140, 120, 90, .35) var(--p)); }
.player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2c8, var(--gold)); box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
.player__seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2c8, var(--gold)); }
.player__read { margin: 0 1rem; padding: .35rem 1.2rem; border: 1px solid var(--glass-line) !important; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.player__read:hover { background: rgba(255, 255, 255, .25); }
.player > .player__read + .player__step { border-left: 1px solid var(--glass-line); }

.room__scroll { position: absolute; left: 50%; bottom: 1.6%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-style: italic; font-size: .95rem; letter-spacing: .06em; text-decoration: none; color: var(--ink-floor); }
.room__scroll svg { animation: nudge 2.6s ease-in-out infinite; }

/* ---------- Reading room ---------- */
.reading { background: radial-gradient(ellipse at 50% 0%, #fffdf8, var(--paper) 60%); padding: clamp(40px, 8vw, 110px) clamp(16px, 4vw, 40px); }
.folio { position: relative; max-width: 1040px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) clamp(20px, 7vw, 96px); text-align: center; border: 1px solid var(--gold); box-shadow: inset 0 0 0 7px var(--paper), inset 0 0 0 8px var(--gold-soft); }
.folio__corner { position: absolute; width: clamp(44px, 6vw, 72px); height: auto; color: var(--gold); }
.folio__corner.tl { top: 4px; left: 4px; }
.folio__corner.tr { top: 4px; right: 4px; transform: scaleX(-1); }
.folio__corner.bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.folio__corner.br { bottom: 4px; right: 4px; transform: scale(-1); }
.eyebrow { margin: 0; color: var(--gold); font-size: .8rem; letter-spacing: .34em; text-transform: uppercase; }
.reading h2 { margin: .7rem 0 0; font-weight: 400; font-style: italic; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.2; }
.surah-ar { display: block; font-family: var(--arabic); font-style: normal; font-size: .8em; color: var(--gold); margin-top: .2rem; }
.folio__ref { margin: .2rem 0 0; color: #6d6150; letter-spacing: .12em; }
.ayah { margin: 2.2rem auto 0; max-width: 34em; font-family: var(--arabic); font-size: clamp(1.7rem, 3.3vw, 2.55rem); line-height: 2.25; color: var(--charcoal); text-align: center; }
.divider { display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 2rem auto; color: var(--gold); }
.divider span { flex: 1; height: 1px; background: var(--gold-soft); }
.divider svg { width: 26px; height: 26px; }
.listen { display: inline-flex; align-items: center; gap: .9rem; font-size: 1.1rem; }
.listen .player__disc { width: 52px; height: 52px; }
.tabs { display: flex; gap: 2.4rem; margin: 2.6rem 0 0; border-bottom: 1px solid var(--gold-soft); text-align: left; }
.tabs button { padding: .6rem .4rem; font-size: 1.15rem; color: #8a7e6d; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--charcoal); border-color: var(--gold); }
.tabpanel { text-align: left; padding: 1.2rem .4rem 0; min-height: 4.5rem; }
.muted { color: #7b705f; font-style: italic; margin: 0; }
.tr-head { display: flex; justify-content: flex-end; margin-bottom: .4rem; }
.tr-head select { font: inherit; font-size: .95rem; color: var(--charcoal); background: transparent; border: 1px solid var(--gold-soft); border-radius: 999px; padding: .25rem 2rem .25rem .9rem; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px; background-repeat: no-repeat; }
.translation { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.75; }
.translation .add { color: #8f826f; }
.reflect-intro { margin: 0 0 .6rem; color: #7b705f; font-style: italic; }
.reflect { margin: 0; padding: 0; list-style: none; }
.reflect li { position: relative; padding: .55rem 0 .55rem 1.6rem; font-size: clamp(1.1rem, 1.5vw, 1.3rem); border-bottom: 1px solid rgba(169, 132, 58, .2); }
.reflect li:last-child { border-bottom: 0; }
.reflect li::before { content: ""; position: absolute; left: .2rem; top: 1.15rem; width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); }
.tr-credit { margin: .9rem 0 0; font-size: .85rem; color: #8a7e6d; }
.whole { margin: 2rem 0 0; }
.whole a { display: inline-block; padding: .5rem 1.5rem; border: 1px solid var(--gold); border-radius: 999px; text-decoration: none; }
.whole a:hover { background: rgba(246, 226, 170, .3); }
.note { margin: 2.4rem 0 0; font-size: .92rem; color: #7b705f; font-style: italic; }

.footer { padding: 48px 16px 64px; text-align: center; color: #6d6150; background: var(--paper-2); border-top: 1px solid var(--gold-soft); }
.footer p { margin: .4rem auto; max-width: 52rem; }
.wordmark--small { display: flex; justify-content: center; font-size: 1.1rem; color: var(--charcoal); margin-right: 0; }
.wordmark--small .logo { height: 1.6em; }
.credits { font-size: .85rem; }

/* ---------- Letter-by-letter recitation (recite.js) ----------
   Each word carries a lit copy of itself (::after), revealed from the right as the reciter goes. */
.rw { position: relative; display: inline-block; }
.rw::after { content: attr(data-t); position: absolute; inset: -.6em; padding: .6em; pointer-events: none; white-space: nowrap; opacity: 0;
  /* the box reaches .6em past the word so the glow can fade out inside it. A soft-edged mask reveals
     the right-hand share --pn (0 to 1) of the word, the way the reciter moves through it. */
  --edge-x: calc(.6em + (100% - 1.2em) * var(--pn, 0));
  -webkit-mask-image: linear-gradient(to left, #000 var(--edge-x), transparent calc(var(--edge-x) + .18em));
  mask-image: linear-gradient(to left, #000 var(--edge-x), transparent calc(var(--edge-x) + .18em)); }
.is-reciting .rw.is-on::after, .is-reciting .rw.is-lit::after { opacity: 1; }
.rw.is-lit::after { -webkit-mask-image: none; mask-image: none; }

/* Unlit letters use SOLID colours (one per light, matched to the faded look over that sky): Arabic
   letters overlap where they join, and a see-through colour would paint those joins twice as seams. */
/* In the room: unlit letters fade back, lit letters turn bright gold and glow. */
.room__arabic.is-reciting { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor;
  color: var(--dim); filter: drop-shadow(0 0 .6px var(--outline, transparent)) drop-shadow(0 2px 3px var(--edge)); animation: none; }
:root[data-ink="ink"] .room__arabic.is-reciting { filter: drop-shadow(0 0 18px var(--glow)); }
/* ivory's outline belongs to the resting letters only, so it is a text-shadow there (the lit gold copies set their own) */
:root[data-ink="ivory"] .room__arabic.is-reciting { filter: none; text-shadow: 0 0 1px var(--outline), 0 0 1px var(--outline), 0 2px 4px var(--edge); }
.room__arabic.is-reciting .rw::after { -webkit-text-fill-color: currentColor; }
.room__arabic { transition: opacity .28s ease; }
.room__arabic.is-swapping { opacity: 0; }
.room__arabic.is-reciting .rw.is-on { color: var(--dim-on); }
.room__arabic .rw::after { color: var(--lit); text-shadow: 0 0 .06em var(--lit-glow), 0 0 .28em var(--lit-glow); }
.room__arabic .rw.is-divine::after { color: var(--lit-divine); text-shadow: 0 0 .08em var(--lit-glow), 0 0 .3em var(--lit-glow), 0 0 .6em var(--lit-glow); }

/* In the reading room: charcoal fades back, lit letters turn gold. */
.ayah.is-reciting { color: #b1ada6; }
.ayah.is-reciting .rw.is-on { color: #848079; }
.ayah .rw::after { color: #a5782a; text-shadow: 0 0 .14em rgba(222, 178, 90, .55); }
.ayah .rw.is-divine::after { color: #b8862c; text-shadow: 0 0 .14em rgba(230, 186, 90, .75), 0 0 .4em rgba(230, 186, 90, .35); }

/* ---------- Recitation player (recitations/<id>/) ----------
   One column inside the arch, above the player bar: label, the phrase (sized by player.js to the space
   left), transliteration, English, title. Nothing is pinned, so nothing can run into the next line. */
.recital__flow { position: absolute; left: 50%; transform: translateX(-50%); width: min(48vw, 900px);
  top: clamp(70px, 11%, 120px); bottom: calc(5.5% + 34px + 58px + 18px);
  display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); transition: opacity .38s ease; }
.recital__flow > * { flex: none; margin: 0; }
.recital__ar { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; overflow: visible; }
.recital .room__arabic { line-height: 1.7; padding: 0 .1em; max-width: 100%; }
.recital .room__ref { margin-bottom: .2rem; }
.is-changing .recital__flow { opacity: 0; }
.tl { margin-top: .3rem !important; font-size: clamp(.88rem, 1.25vw, 1.08rem); line-height: 1.5; letter-spacing: .03em; color: var(--ink-soft); min-height: 1.5em; }
.tl span { opacity: .45; transition: opacity .3s, color .3s; }
.tl span.is-on { opacity: 1; color: var(--ink); }
.tl span.is-lit { opacity: .8; }
.recital__flow .en { margin-top: .9rem !important; min-height: 1.35em; max-width: 34em; font-style: italic; font-size: clamp(1.15rem, 2.1vw, 1.75rem); line-height: 1.35; color: var(--ink); text-shadow: 0 0 22px var(--veil); }
.en span { opacity: 0; transition: opacity .6s ease; }
.en span.is-shown { opacity: .62; }
.en span.is-hot { opacity: 1; }
.recital__title { margin-top: 1rem !important; }
.recital__title h1 { margin: 0; font-weight: 400; font-style: italic; font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1.15; }
.recital__title p { margin: .3rem 0 0; font-size: clamp(.78rem, 1vw, .92rem); letter-spacing: .12em; color: var(--ink-soft); }
@media (max-aspect-ratio: 4/5), (max-width: 700px) {
  .recital__flow { width: 86vw; top: clamp(64px, 10%, 110px); bottom: calc(4% + 30px + 110px + 14px); }
  .recital__flow .en { font-size: clamp(1.02rem, 4.4vw, 1.3rem); }
  .tl { font-size: .86rem; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .recital__flow { top: 58px; }
  .recital__title p { display: none; }
}

/* ---------- Focus mode (while reciting) ----------
   The hall dims and loses some colour, the sky deepens a little around the text, and the room holds
   still, so the lit Arabic is the brightest thing on screen. */
.room__plate, .room__sky, .room__floorglow { transition: filter 1.4s ease, opacity 1.4s ease; }
.room__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, transparent 35%, var(--focus-shade) 100%); }
:root { --focus-plate: brightness(.78) saturate(.55) contrast(.92); --focus-sky: brightness(.9) saturate(.85); --focus-shade: rgba(40, 30, 15, .28); }
:root[data-scene="night"] { --focus-plate: brightness(.5) saturate(.5); --focus-sky: brightness(.8); --focus-shade: rgba(0, 0, 10, .45); }
:root[data-scene="sunset"] { --focus-plate: brightness(.7) saturate(.55); --focus-sky: brightness(.85) saturate(.9); --focus-shade: rgba(40, 15, 10, .3); }
:root[data-scene="dawn"] { --focus-plate: brightness(.78) saturate(.5) contrast(.92); --focus-sky: brightness(.88); --focus-shade: rgba(30, 20, 45, .26); }
.is-focus .room__plate { filter: var(--focus-plate); }
.is-focus .room__sky { filter: var(--focus-sky); animation-play-state: paused; }
.is-focus .room__floorglow { opacity: .45; animation-play-state: paused; }
.is-focus .room__bg::after { opacity: 1; }
.masthead, .room__scroll { transition: color 1.4s ease, opacity 1.4s ease; }
.is-focus .room__scroll { opacity: 0; }
:root[data-scene="night"].is-focus .masthead, :root[data-scene="sunset"].is-focus .masthead { color: #f3e8d2; }
:root[data-scene="night"].is-focus .nav a, :root[data-scene="sunset"].is-focus .nav a { text-shadow: 0 0 12px rgba(0, 0, 0, .5); }
:root[data-scene="night"].is-focus .masthead .wordmark, :root[data-scene="sunset"].is-focus .masthead .wordmark { filter: drop-shadow(0 0 6px rgba(0, 0, 0, .55)); }

/* ---------- The Aa panel (display.js): the Arabic's colour, and which other text is shown ---------- */
.aa-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold-soft); color: inherit;
  font: inherit; font-size: .95rem; line-height: 1; letter-spacing: .02em; transition: border-color .2s, background-color .2s; }
.aa-btn:hover, .aa-btn[aria-expanded="true"] { border-color: var(--gold); background: rgba(255, 255, 255, .16); }
.aa-panel { position: fixed; z-index: 60; width: min(292px, calc(100vw - 24px)); padding: 14px 14px 10px; border-radius: 18px;
  color: var(--glass-ink); background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 14px 40px rgba(30, 20, 5, .22); opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
.aa-panel.is-open { opacity: 1; transform: none; }
.aa-panel__label { margin: 0 0 .45rem .15rem; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.aa-panel__label ~ .aa-panel__label { margin-top: .9rem; }
.aa-panel__label span { letter-spacing: .04em; text-transform: none; font-style: italic; color: var(--glass-ink); opacity: .7; }
.aa-panel__colours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.aa-panel__colours button { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .55rem .25rem .45rem; border-radius: 12px;
  border: 1px solid transparent; color: inherit; font: inherit; font-size: .92rem; transition: border-color .2s, background-color .2s; }
.aa-panel__colours button:hover { background: rgba(255, 255, 255, .12); }
.aa-panel__colours button[aria-checked="true"] { border-color: var(--gold); background: rgba(255, 255, 255, .18); }
.aa-swatch { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .18); }
.aa-swatch--auto { background: conic-gradient(from 200deg, #d4a447 0 33%, #f3ead9 0 66%, #2e231b 0); }
.aa-swatch--gold { background: linear-gradient(160deg, #fbecc0 8%, #d4a447 45%, #7a531a 85%); }
.aa-swatch--ivory { background: linear-gradient(160deg, #ffffff 8%, #f3ead9 50%, #cdbfa6 92%); }
.aa-swatch--ink { background: linear-gradient(160deg, #5e4d3e 8%, #2e231b 50%, #140e0a 92%); }
.aa-panel__switches { display: grid; }
.aa-panel__switches button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .5rem .15rem; border-radius: 8px;
  color: inherit; font: inherit; font-size: 1rem; text-align: left; }
.aa-panel__switches button + button { border-top: 1px solid var(--glass-line); border-radius: 0; }
.aa-panel__marks { margin-left: .4em; font-family: var(--arabic); font-size: 1.45em; line-height: 1; vertical-align: -.1em; color: var(--gold); }
.aa-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgba(120, 100, 70, .32); transition: background-color .2s; }
.aa-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s; }
[aria-checked="true"] > .aa-switch { background: var(--gold); }
[aria-checked="true"] > .aa-switch::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .aa-panel, .aa-switch, .aa-switch::after { transition: none; } }

/* What the switches hide: translations (surah pages, recitations, the homepage), transliterations
   (recitations). The homepage keeps its English title for screen readers. */
:root[data-tr="off"] :is(.ayah-row__tr, .tr-pick, .recital__flow .en, #tab-translation .tr-head, #tab-translation .translation) { display: none !important; }
:root[data-tl="off"] .recital__flow .tl { display: none !important; }
:root[data-tr="off"] .room__caption h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tr-off { display: none; margin: .4rem 0 .6rem; font-style: italic; color: var(--ink-soft); }
:root[data-tr="off"] .tr-off { display: block; }
.link-btn { padding: 0; border: 0; border-bottom: 1px solid var(--gold-soft); background: none; color: inherit; font: inherit; cursor: pointer; }
.link-btn:hover { border-color: var(--gold); }

/* ---------- Motion ---------- */
@keyframes sheen { 0%, 60% { background-position: 150% 0, 0 0; } 100% { background-position: -50% 0, 0 0; } }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: -8px 3px; } }
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .room__arabic, .room__floorglow, .room__scroll svg, .room__sky { animation: none; }
  .room__plate, .room__sky { transform: none; }
}

/* ---------- Portrait / small screens ---------- */
@media (max-aspect-ratio: 4/5), (max-width: 700px) {
  .masthead { gap: 1rem; }
  .nav { display: none; }
  .menu-btn { display: grid; }
  .is-menu .site-nav { display: flex; position: fixed; inset: 0; justify-self: stretch; align-self: stretch; z-index: 40; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem;
    background: rgba(250, 246, 238, .985); font-size: 1.9rem; font-style: italic; }
  .is-menu .site-nav a { color: var(--charcoal); text-shadow: none; border: 0; }
  .is-menu .site-nav a[aria-current="page"] { color: var(--gold); }
  .is-menu .nav__home { display: block; }
  .is-menu .menu-btn { position: relative; z-index: 41; color: var(--charcoal); }
  .scenes { padding-left: 0; border: 0; }
  .room__plate { background-image: var(--front-portrait); }
  .room__sky { background-image: var(--sky-portrait); }
  .room__stage { top: 13%; bottom: 49.5%; width: 88vw; } /* ends just above the title at 52% */
  .room__arabic { font-size: var(--ar-size, clamp(2.8rem, 17vw, 6.5rem)); }
  .room__caption { top: 52%; }
  .room__caption p { letter-spacing: .08em; }
  .btn-outline { display: inline-block; margin-top: 1.1rem; padding: .45rem 1.6rem; border: 1px solid var(--gold); border-radius: 8px; text-decoration: none; background: rgba(255, 252, 245, .35); color: var(--ink); }
  .player { bottom: calc(4% + 30px); width: min(92vw, 460px); border-radius: 22px; padding: 10px 14px 12px;
    grid-template-columns: 52px 1fr 52px; grid-template-areas: "prev play next" "seek seek seek"; row-gap: 4px; }
  .player > * + *, .player > .player__read + .player__step { border-left: 0; }
  .player__ref, .player__read { display: none; }
  #prev { grid-area: prev; } #next { grid-area: next; }
  .player__play { grid-area: play; justify-self: center; padding: 0; font-size: 1.15rem; }
  .player__seek { grid-area: seek; padding: 0 6px; height: 28px; }
  .tabs { gap: 1.4rem; }
}