/* TV screens display. 16:9, designed at 1920×1080 and scaling to 4K: 1rem = 1% of the stage height. */
@font-face { font-family: 'Fraunces'; font-weight: 400 600; font-display: swap; src: url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-weight: 400 600; font-display: swap; src: url(fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400 700; font-display: swap; src: url(fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400 700; font-display: swap; src: url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Amiri'; font-weight: 400; font-display: swap; src: url(fonts/amiri-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Amiri'; font-weight: 400; font-display: swap; src: url(fonts/amiri-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ground: #0a5f58; --raise: #0c726a; --sand: #f8f4ea; --gold: #c9ac74; --gold-soft: #e6d3a6; --ink: #15231f;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Hanken Grotesk', 'Amiri', system-ui, sans-serif;   /* Amiri second: ﷺ and other Arabic marks inside English text */
  --ar: 'Amiri', 'Traditional Arabic', serif;
  --sk-base: var(--raise); --sk-shine: rgb(255 255 255 / .07);
  font-size: min(1vh, .5625vw);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--ground); color: var(--sand); cursor: none; user-select: none; }
body { font-family: var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .8s; }
html.dark body { background: #000; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.stage { position: absolute; left: 50%; top: 50%; width: 177.78rem; height: 100rem; transform: translate(-50%, -50%); overflow: hidden; }

/* Plain shimmer skeleton (masjid: no ASCII look). Stops after 5 s (WCAG 2.2.2). */
.sk { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; height: .8em; border-radius: .5rem; background: var(--sk-base); }
.layer .sk { display: block; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--sk-shine), transparent); animation: sk 1.5s ease-in-out infinite; }
  .sk-still .sk::after { display: none; }
}
@keyframes sk { to { transform: translateX(100%); } }
@media (forced-colors: active) { .sk { border: 1px solid GrayText; } }

/* Header: date, Islamic date, weekday · clock, sunrise · logo */
.hd { position: absolute; left: 3.2rem; right: 3.2rem; top: 2.4rem; height: 18rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
.hd-date { font: 600 4.1rem/1.2 var(--body); white-space: nowrap; }
.hd-date .day, .gold { color: var(--gold-soft); }
.hd-date .day { font-weight: 700; }
.hd-mid { text-align: center; }
.clock { font: 700 12.4rem/1 var(--body); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sun { font: 600 4.4rem/1.2 var(--body); margin-top: 1rem; }
.hd-logo { justify-self: end; width: 26rem; height: 18rem; padding: 1.6rem 2rem; border-radius: 2.4rem; background: var(--sand); }
.hd-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tm12 small { font-size: .5em; margin-left: .18em; font-weight: inherit; }

/* Slides area and its cross-fading layers */
.slides { position: absolute; left: 3.2rem; right: 3.2rem; top: 22rem; bottom: 4.8rem; }
.has-band .slides { bottom: 14.4rem; }   /* band + the credit's strip */
.layer { position: absolute; inset: 0; }
.band { position: absolute; left: 0; right: 0; bottom: 0; height: 9.4rem; padding: .9rem 3.2rem; background: var(--gold); color: var(--ink); display: flex; }
.band .fit { flex: 1; font-weight: 700; line-height: 1.12; }
.credit { position: absolute; right: 3.2rem; bottom: .6rem; height: 4rem; width: auto; opacity: .6; }
.has-band .credit { bottom: 10rem; }

/* Fitted text boxes: display.js shrinks the font until the content fits; .in centres it without hiding overflow above */
.fit { flex: 1; min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.fit > .in { margin: auto 0; }

/* Timetable */
.tt { display: grid; grid-template-columns: 27rem 1fr 27rem; column-gap: 2.6rem; }
.tt-side { display: flex; flex-direction: column; gap: 2rem; padding-top: 8.8rem; }
.panel { flex: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.6rem 1rem;
  border-radius: 2.4rem; background: var(--raise); text-align: center; }
.panel + .panel { flex: 2; }
.panel h3 { font: 600 4.2rem/1.04 var(--display); color: var(--gold-soft); letter-spacing: -.01em; }
.panel .big { font: 700 6rem/1 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel .sub { font: 600 3.8rem/1.1 var(--body); }
.tbl { display: grid; grid-template-rows: 7.2rem repeat(5, 1fr); row-gap: 1.6rem; }
.tbl-h, .row { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; text-align: center; }
.tbl-h { align-items: end; font: 600 5.8rem/1 var(--display); color: var(--gold-soft); letter-spacing: -.01em; }
.row { position: relative; border-radius: 99rem; background: var(--raise); }
.row .nm { font: 600 7.2rem/1 var(--display); letter-spacing: -.01em; }
.row .tm { font: 600 7.4rem/1 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .tm:first-child { padding-left: 3rem; }
.row .tm:last-child { padding-right: 3rem; font-weight: 700; }
.row.on { background: var(--gold); color: var(--ink); }
.row .mk { position: absolute; right: 2.6rem; top: 50%; width: 2.4rem; height: 3.4rem; margin-top: -1.7rem; background: currentColor;
  clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.tt-none { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 2rem; }

/* Content slides */
.sl { display: flex; flex-direction: column; gap: 2.4rem; padding: .4rem 3rem 0; }
.sl h2 { font: 600 6.4rem/1.05 var(--display); color: var(--gold-soft); letter-spacing: -.01em; }
.quote { text-align: center; }
.quote .in { display: flex; flex-direction: column; gap: .7em; }
.ar { font-family: var(--ar); direction: rtl; font-size: 1.22em; line-height: 1.75; }
.en { font-family: var(--display); font-weight: 400; line-height: 1.32; white-space: pre-line; }
.en p, .txt p { margin: 0; }   /* pre-line already turns the newlines between paragraphs into breaks */
.txt { font-weight: 500; line-height: 1.35; white-space: pre-line; }
.ref { font: 600 4.4rem/1.2 var(--body); color: var(--gold-soft); text-align: center; }
.ref:empty { display: none; }

.poster { display: flex; gap: 4rem; min-height: 0; flex: 1; }
.poster .fig { position: relative; flex: 1.25; min-width: 0; overflow: hidden; }
.poster .fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* The blurred bands beside a tall poster: a still filter (never animated), scaled up so its soft edges stay outside */
.poster .fig .bg { object-fit: cover; filter: blur(3rem) brightness(.45); transform: scale(1.2); }
.poster .fig.sk { display: block; border-radius: 0; }
.poster .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2.4rem; }
.poster.solo .fig { flex: 1; }

.list .in { display: grid; gap: .55em; }
.item { display: grid; grid-template-columns: 1fr auto; column-gap: 1.2em; align-items: baseline; padding: .3em .6em; border-radius: .4em; background: var(--raise); }
.item b { font: 600 1em/1.15 var(--display); }
.item span { font-weight: 600; font-size: .78em; color: var(--gold-soft); text-align: right; }
.item i { grid-column: 1 / -1; font-style: normal; font-size: .7em; font-weight: 500; line-height: 1.3; margin-top: .2em; }

.pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.pair > div:only-child { grid-column: 1 / -1; }   /* the last fast's Iftar, or the first Sehri, alone */
.pair > div { border-radius: 2.4rem; background: var(--raise); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; text-align: center; }
.pair h3 { font: 600 7.2rem/1.05 var(--display); color: var(--gold-soft); }
.pair .big { font: 700 17rem/1 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pair p { font: 600 4.6rem/1.2 var(--body); }

.centre { justify-content: center; align-items: center; text-align: center; }
.centre .lead { font-size: 10rem; }
.centre .lead.gold { font-size: 7.2rem; }
.centre .note { font-size: 5.2rem; }
.huge { font: 700 24rem/1 var(--body); font-variant-numeric: tabular-nums; }
.lead { font: 600 7rem/1.1 var(--display); }
.note { font: 500 4.6rem/1.3 var(--body); max-width: 130rem; }
.times { display: flex; gap: 3rem; justify-content: center; flex-wrap: wrap; }
.times { margin-top: 2rem; }
.times .tm12 { font: 700 10rem/1 var(--body); padding: 2rem 4rem; border-radius: 2.4rem; background: var(--raise); }
.times .past { opacity: .4; }

.don { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 6rem; align-items: center; }
.don dl { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem 4rem; align-items: baseline; }
.don dt { font: 600 4.4rem/1.1 var(--body); color: var(--gold-soft); }
.don dd { font: 700 7rem/1.05 var(--body); font-variant-numeric: tabular-nums; }
.don dd.name { font-size: 5.4rem; }
.qr { background: var(--sand); color: var(--ink); border-radius: 2.4rem; padding: 3rem 3rem 2.2rem; text-align: center; }
.qr canvas { display: block; width: 46rem; height: 46rem; image-rendering: pixelated; }
.qr p { font: 700 4rem/1.2 var(--body); margin-top: 1.4rem; }

.bar { width: 100%; max-width: 140rem; height: 5rem; border-radius: 99rem; background: var(--raise); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 99rem; }

.urgent { background: var(--gold); color: var(--ink); border-radius: 2.4rem; padding: 3.6rem 5rem; }
.urgent h2 { color: var(--ink); }
.urgent .fit { font-weight: 700; line-height: 1.2; }

/* Takeovers */
.to { position: absolute; left: 0; right: 0; top: 22rem; bottom: 0; z-index: 5; background: var(--ground); visibility: hidden; opacity: 0; }
.to.full { top: 0; }
.to .layer { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 6rem 4rem; gap: 2rem; }
.to-adhan h2 { font: 600 10rem/1 var(--display); color: var(--gold-soft); }
.to-adhan .lead { font-size: 26rem; line-height: 1.05; letter-spacing: -.02em; }
.to-dua { padding-top: 1rem !important; }
.to-dua h2, .to-count h2 { font: 600 7rem/1.05 var(--display); color: var(--gold-soft); }
.to-dua .fit { width: 100%; }
.to-silence { background: var(--gold); color: var(--ink); }
.to-silence .lead { font-size: 15rem; line-height: 1.08; letter-spacing: -.02em; max-width: 150rem; }
.to-salah { background: #000; color: #4c5754; }
.to-salah .lead { font-size: 8rem; }
.to-salah .clock { font-size: 9rem; font-weight: 600; }
.to-count .huge { font-size: 26rem; }
.to-count .huge small { font-size: .26em; margin-left: .2em; letter-spacing: 0; }
.to-count .fit { width: 100%; flex: 0 1 24rem; }

.stage { transition: opacity .8s, visibility .8s; }
html.dark .stage { opacity: 0; visibility: hidden; }   /* night and "off": black, faded gently */