/* overture.css: the sealed-scroll intro (#overture) and the open parchment (#opening).
   Owner: overture coder. Every rule is scoped under #overture or #opening. Entrances are WAAPI (overture.js),
   so the CSS here holds final states only. Still mode (html.still) drops the looping CSS animations. */

/* ---------- Overture: intro text centred in the upper third, over the dark film ---------- */
#overture .ov-intro {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: 0;
  height: 34vh;
  height: 34svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 6vw;
  text-align: center;
  color: var(--ivory, #fbf7f1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 22px rgba(0, 0, 0, .5);
  will-change: opacity;
  transition: opacity .24s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}

/* The intro and the hint show only while the film rests on the sealed scroll (overture.js sets .ov-off otherwise).
   Time-based: a 140 ms fade out as the seal clip starts, a 240 ms fade in when the film is back. Never scrubbed. */
#overture.ov-off .ov-intro,
#overture.ov-off .ov-hint {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s cubic-bezier(0, 0, .2, 1), visibility 0s linear .14s;
}

#overture .ov-kicker {
  margin: 0 0 clamp(14px, 3vh, 26px);
  margin: 0 0 clamp(14px, 3svh, 26px);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(12px, 3.2vw, 14px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-hi, #d9bf8a);
}

/* Phones: the round motion toggle sits top right (7px inset, 44px). Symmetric side padding keeps the line centred and clear of it. */
@media (max-width: 959px) {
  #overture .ov-kicker { padding: 0 52px; line-height: 1.35; margin-bottom: 12px; }
  /* A little more room for the intro on phones, so the two-line kicker stays inside the top edge at 320 and 375 wide. */
  #overture .ov-intro { height: calc(34vh + 24px); height: calc(34svh + 24px); }
}

#overture .ov-names {
  margin: 0;
  font-family: var(--f-script);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, min(11.5vw, 15vh), 150px);
  line-height: 1.4;
  letter-spacing: 0;
  /* Descenders and the italic overhang sit inside the box, so the ink reveal clip (inset -.4em) never cuts them. */
  padding: .08em .06em .26em;
  text-wrap: balance;
  /* Solid ivory with a soft champagne glow: names read first on the dark plum film. */
  color: #fbf7f1;
  -webkit-text-fill-color: #fbf7f1;
  text-shadow: 0 0 18px rgba(217, 191, 138, .3);
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .55));
}

#overture .ov-names .amp {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  font-size: .7em;
  margin: 0 .12em;
  vertical-align: .08em;
}

/* Phones: groom, ampersand and bride each on their own line, nowrap, so "Nimra Fatima" never breaks. */
@media (max-width: 600px) {
  #overture .ov-names > span { display: block; white-space: nowrap; }
  #overture .ov-names .amp { font-size: .6em; line-height: 1.5; }
@media (max-width: 959px) {
  #overture .ov-names { line-height: 1.3; }
}
}

/* Desktop and landscape: the title is one line, sized by width and height so it sits fully inside the upper area. */
@media (min-width: 601px) {
  #overture .ov-names {
    font-size: clamp(36px, min(5.4vw, 11vh), 112px);
    font-size: clamp(36px, min(5.4vw, 11svh), 112px);
    line-height: 1.25;
    white-space: nowrap;
  }
  #overture .ov-kicker { margin-bottom: clamp(8px, 2.4vh, 22px); margin-bottom: clamp(8px, 2.4svh, 22px); }
  #overture .ov-dates { margin-top: clamp(4px, 1.4vh, 14px); margin-top: clamp(4px, 1.4svh, 14px); font-size: clamp(15px, min(2.2vw, 3.6vh), 24px); font-size: clamp(15px, min(2.2vw, 3.6svh), 24px); }
}

/* Short screens: tighter kicker and dates. */
@media (min-width: 601px) and (max-height: 600px) {
  #overture .ov-kicker { margin-bottom: 6px; }
  #overture .ov-names { font-size: clamp(36px, min(5vw, 12vh), 96px); }
  #overture .ov-dates { margin-top: 2px; }
}

#overture .ov-dates {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  margin: clamp(12px, 2.6vh, 22px) 0 0;
  margin: clamp(12px, 2.6svh, 22px) 0 0;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(16px, min(3vw, 4.4vh), 28px);
  line-height: 1.35;
  color: var(--gold-hi, #d9bf8a);
  text-shadow: 0 1px 3px rgba(28,10,13, .9), 0 0 14px rgba(28,10,13, .7);
}

/* Days (26 27 28) in Playfair; the month in Montserrat. Before the password only the month has text, so an empty days span takes no row and no gap. */
#overture .ov-dates__days {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.45em;
  line-height: 1.1;
  letter-spacing: .06em;
  color: var(--ivory, #fbf7f1);
}

#overture .ov-dates__days:empty { display: none; }

#overture .ov-dates__month {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 1em;
  letter-spacing: .12em;
  color: var(--gold-hi, #d9bf8a);
}

/* Hint: bottom centre, above the index bar. Mouse on desktop, a finger swipe on coarse pointers. */
#overture .ov-hint {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(var(--index-h, 0px) + 26px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--gold-hi, #d9bf8a);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
  -webkit-tap-highlight-color: transparent;
  will-change: opacity;
  transition: opacity .24s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}

#overture .ov-hint__label {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

#overture .ov-hint__glyph {
  position: relative;
  display: block;
  width: 20px;
  height: 32px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 12px;
  animation: ov-pulse 2.8s ease-in-out infinite;
}

#overture .ov-hint__dot {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: currentColor;
  animation: ov-wheel 1.9s cubic-bezier(.65, .05, .36, 1) infinite;
}

@media (pointer: coarse) {
  #overture .ov-hint__glyph {
    width: 2px;
    height: 44px;
    border: 0;
    border-radius: 2px;
    background: linear-gradient(to bottom, transparent, currentColor 25%, currentColor 75%, transparent);
  }
  #overture .ov-hint__dot {
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -3px;
    background: var(--ivory, #fbf7f1);
    box-shadow: 0 0 10px rgba(217, 191, 138, .9);
    animation: ov-swipe 1.9s cubic-bezier(.65, .05, .36, 1) infinite;
  }
}

/* ---------- Geometry (v22, see step.js): the sealed scroll owns half a step of scroll, the parchment two steps (leaf one,
   leaf two). Each pin is stuck for its whole window: #opening overlaps #overture by one pin height, so its pin starts
   sticking exactly when #overture's releases (no transit). Pins are 100svh, so the Safari toolbar never resizes them. ---------- */
#overture { position: relative; z-index: 1; height: calc(var(--hn-pin, 100vh) + .5 * var(--hn-step, 100vh)); }
#opening { position: relative; z-index: 2; height: calc(var(--hn-pin, 100vh) + 2 * var(--hn-step, 100vh)); margin-top: calc(-1 * var(--hn-pin, 100vh)); }
#overture > .scene__pin,
#opening > .scene__pin { height: var(--hn-pin, 100vh); overflow: hidden; }
/* (overflow: the parchment box is sized by reel.js from the film; for the moment between a rotation and the film's
   re-measure it can be wider than the new viewport, and an overflowing box widens the page's layout viewport, which
   then keeps everything wide. Clipped to the pin it never reaches the page.) */

/* ---------- Opening: the open parchment, positioned over the film's parchment ---------- */
#opening .parchment {
  /* Fallback box when film.js has not written --px/--py/--pw/--ph yet: centred 30vw x 60vh on desktop. */
  --fb-w: 30vw;
  --fb-h: 60vh;
  --fb-l: calc((100vw - var(--fb-w)) / 2);
  --fb-t: calc((100vh - var(--fb-h)) / 2);
  --ov-w: var(--pw, var(--fb-w));
  --ov-h: var(--ph, var(--fb-h));
  /* Type unit: the smaller of width-based and height-based scales, so text fits both ways. */
  --u: min(calc(var(--ov-w) / 17), calc(var(--ov-h) / 28));
  position: absolute;
  z-index: 6;
  left: var(--px, var(--fb-l));
  top: var(--py, var(--fb-t));
  width: var(--ov-w);
  height: var(--ov-h);
  color: var(--ink, #2a1215);
  text-align: center;
  /* Both leaves are clipped to this box, so nothing moving (the entrance slide, the exit lift) draws outside it. */
  clip-path: inset(0);
}

/* Phones (aspect 9:10 or narrower, the same test the film uses for the m set): 56vw x 52svh, centred. */
@media (max-aspect-ratio: 9/10) {
  #opening .parchment {
    --fb-w: 56vw;
    --fb-h: 52vh;
  }
  @supports (height: 100svh) {
    #opening .parchment { --fb-h: 52svh; }
  }
}

#opening .leaf {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(var(--ov-h) * .04) calc(var(--ov-w) * .04);
  will-change: opacity;
}

/* Leaves (overture.js adds .hn-leaves to #opening): a leaf shows only while the film rests on its stop (.is-on): leaf
   one on the open parchment, leaf two once the camera has pushed in. Time-based fades, never scrubbed; the ink
   entrances inside run once the leaf is on. Hidden leaves take no taps; keyboard focus still reaches leaf two. */
#opening.hn-leaves .leaf {
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s cubic-bezier(0, 0, .2, 1);
}
/* The parchment's pin slides in over the sealed scroll (and its hint link): only a shown leaf takes taps. The section
   itself too: it overlaps #overture by one pin height (above, z-index 2), and its empty box sat over the hint. v30 */
#opening.hn-leaves,
#opening.hn-leaves > .scene__pin,
#opening.hn-leaves .parchment { pointer-events: none; }
#opening.hn-leaves .leaf.is-on {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .24s cubic-bezier(.16, 1, .3, 1);
}

/* Each leaf sets its own type unit: leaf one is a tall stack (Bismillah, ayah, hosts), leaf two a stack with the names hero. */
#opening .leaf--one {
  --u: min(calc(var(--ov-w) / 17), calc(var(--ov-h) / 29));
  opacity: 1;
}
#opening .leaf--two {
  --u: min(calc(var(--ov-w) / 18), calc(var(--ov-h) / 21));
  opacity: 0;
}

/* Keyboard focus inside a leaf shows that leaf through overture.js (.is-on on :focus-visible). There is no CSS
   :focus-within override: a jump focuses h1#names programmatically, and an override forced leaf two (and its countdown
   labels) visible over the moving film. */

/* The real h1 stays in the accessibility tree; the visible names are the aria-hidden line clone (overture.js). */
#opening #names {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Leaf one: Bismillah in gold, the ayah, the hosts. */
#opening .bismillah {
  margin: 0;
  font-family: var(--f-arabic, 'Amiri Quran', 'Amiri', serif);
  direction: rtl;
  font-size: clamp(13px, min(calc(var(--u) * 2.7), calc(var(--ov-w) * .105)), 64px);
  line-height: 1.95;
  padding: .2em .08em;
  background-image: linear-gradient(100deg, #8c6a3a 0%, #8c6a3a 38%, #a8844a 50%, #8c6a3a 62%, #8c6a3a 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#opening .bismillah__tr {
  margin: .5em 0 0;
  font-family: var(--f-italic);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(15px, calc(var(--u) * .92), 19px);
  line-height: 1.35;
  color: var(--ink-soft, #5e4245);
  text-wrap: balance;
}

#opening .leaf__rule {
  width: clamp(12px, calc(var(--u) * 1.3), 30px);
  height: clamp(12px, calc(var(--u) * 1.3), 30px);
  margin: clamp(6px, calc(var(--u) * .9), 16px) auto;
  color: var(--gold-lo, #8c6a3a);
}

#opening .leaf__rule svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

#opening .ayah-ar {
  margin: 0;
  font-family: var(--f-arabic, 'Amiri Quran', 'Amiri', serif);
  direction: rtl;
  font-size: clamp(12px, min(calc(var(--u) * 1.9), calc(var(--ov-w) * .085)), 52px);
  line-height: 1.95;
  padding: .2em 0;
  color: var(--ink, #2a1215);
}

#opening .ayah-en {
  margin: .35em 0 0;
  font-family: var(--f-italic);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(15px, calc(var(--u) * 1.02), 24px);
  line-height: 1.35;
  color: var(--ink, #2a1215);
  text-wrap: balance;
}

#opening .ayah-ref {
  margin: .5em 0 0;
  font-family: var(--f-body);
  font-size: clamp(12px, calc(var(--u) * .62), 14px);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft, #5e4245);
}

#opening .hosts {
  margin: clamp(6px, calc(var(--u) * .9), 18px) 0 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(15px, calc(var(--u) * .98), 22px);
  line-height: 1.42;
  color: var(--ink-soft, #5e4245);
  text-wrap: balance;
}

/* Leaf two: names (ink write), programme, countdown. */
#opening .names-kicker {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(12px, calc(var(--u) * .72), 15px);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The hosts: their own unbroken line above the invitation, a step larger and in full ink. */
#opening .names-hosts {
  display: block;
  margin-bottom: .45em;
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: .14em;
  white-space: nowrap;
  color: var(--ink);
}
/* The invitation under the hosts: a sentence in the italic serif, not the tracked capitals. */
#opening .names-invite {
  display: block;
  max-width: 30em;
  margin: 0 auto;
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 1.22em;
  line-height: 1.38;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
/* The narrowest phones (320-374 wide): tighter tracking keeps both lines inside the border. */
@media (max-width: 374px) {
  #opening .names-kicker { letter-spacing: .12em; }
  #opening .names-hosts { font-size: 1.05em; letter-spacing: .06em; }
  #opening .names-invite { font-size: 1em; line-height: 1.2; }
}
/* Short leaves (small phones, phones on their side): the three-line invitation sits tighter so the countdown keeps
   its labels inside the border. */
@media (max-width: 600px) and (max-height: 700px), (orientation: landscape) and (max-height: 500px) {
  #opening .names-kicker { line-height: 1.25; font-size: 11px; }
  #opening .names-hosts { margin-bottom: .2em; }
  #opening .countdown-wrap { margin-top: 2px; }
}
/* Phones on their side 400px tall or less (375-414 tall): the invitation runs on one line under the hosts. */
@media (orientation: landscape) and (max-height: 400px) {
  #opening .names-kicker { font-size: 9.5px; letter-spacing: .1em; }
  #opening .names-invite { font-size: 1.05em; line-height: 1.15; max-width: 46em; }
  #opening .names-hosts { font-size: 1.1em; }
  #opening .cd__n { font-size: 20px; }
  #opening .names-hosts { margin-bottom: 0; }
  #opening .parchment--wide .names-visual { margin: 0; padding-top: .05em; padding-bottom: .05em; white-space: nowrap; }
}
/* v94: the smallest phones on their side (568-667 wide): the names keep one line (above) and the programme sits
   closer, so overture.js's leaf fit (a uniform scale-down when the stack overflows) needs less of a step. (.leaf--two
   in each selector: it outranks the wide-box rules further down, which would otherwise win the margin.) */
@media (orientation: landscape) and (max-height: 400px) and (max-width: 700px) {
  #opening .parchment--wide .leaf--two .names-visual > * { padding-top: 0; padding-bottom: .1em; }
  #opening .parchment--wide .leaf--two .programme { margin-top: 2px; }
  #opening .parchment--wide .leaf--two .programme__link { padding: .3em .2em; }
}
/* v94: without WAAPI (Safari before 13.1) overture.js builds no ink-written clone of the names and marks #opening
   .hn-names-plain: the real h1 then shows in place, set like the clone (solid ink, no write-in). */
#opening.hn-names-plain #names {
  position: static !important;
  display: block;
  flex-shrink: 0;
  width: auto;
  height: auto;
  margin: .1em 0 .2em;
  padding: .2em .1em .18em;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  font-family: var(--f-script);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, min(calc(var(--ov-w) * .095), calc(var(--ov-h) * .075)), 110px);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink, #2a1215);
}
#opening.hn-names-plain #names > * { display: block; white-space: nowrap; padding: .1em .2em .26em; }
#opening.hn-names-plain #names .amp { font-family: var(--f-italic); font-weight: 400; font-size: .5em; line-height: 1.6; padding: 0; color: var(--plum, #6e1a28); }
#opening.hn-names-plain .parchment--wide #names { font-size: clamp(22px, min(calc(var(--u) * 2.2), calc(var(--ov-w) * .05)), 60px); }
#opening.hn-names-plain .parchment--wide #names > * { display: inline-block; }
#opening.hn-names-plain .parchment--wide #names .amp { margin: 0 .3em; vertical-align: .35em; }
@media (orientation: landscape) and (max-height: 400px) {
  #opening.hn-names-plain .parchment--wide #names { margin: 0; padding-top: .05em; padding-bottom: .05em; white-space: nowrap; }
}

#opening .names-visual {
  display: block;
  flex-shrink: 0; /* overflow hidden gives min-height 0, so a tight leaf would otherwise crop the names */
  margin: .1em 0 .2em;
  padding: .2em .1em .18em;
  font-family: var(--f-script);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, min(calc(var(--ov-w) * .095), calc(var(--ov-h) * .075)), 110px);
  line-height: 1.3;
  letter-spacing: 0;
  color: transparent;
}

/* Names: explicit lines. Groom, ampersand and bride are block lines on phones (& on its own line), each nowrap.
   The wide box (desktop) sets them inline on one line. The padding keeps swashes inside the clip of the ink reveal. */
#opening .names-visual > * {
  display: block;
  white-space: nowrap;
  padding: .1em .2em .26em;
  background-image: linear-gradient(100deg, #2a1215 0%, #6e1a28 50%, #2a1215 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#opening .names-visual .amp {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  font-size: .5em;
  line-height: 1.6;
  padding: 0;
  background: none;
  color: var(--plum, #6e1a28);
  -webkit-text-fill-color: var(--plum, #6e1a28);
}

#opening .place {
  margin: 0;
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(13px, calc(var(--u) * .95), 20px);
  font-weight: 500;
  color: var(--ink-soft, #5e4245);
}

#opening .programme {
  list-style: none;
  margin: clamp(6px, calc(var(--u) * 1.1), 22px) auto 0;
  padding: 0;
  width: min(100%, 15.5em);
  display: flex;
  flex-direction: column;
}

#opening .programme li + li {
  border-top: 1px solid rgba(140, 106, 58, .45);
}

#opening .programme__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8em;
  padding: .62em .2em;
  color: inherit;
  text-decoration: none;
}

#opening .programme__name {
  font-family: var(--f-body);
  font-size: clamp(12px, calc(var(--u) * .85), 17px);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink, #2a1215);
}

#opening .programme__date {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(13px, calc(var(--u) * 1.02), 20px);
  color: var(--ink-soft, #5e4245);
}

#opening .programme__link:focus-visible {
  outline: 2px solid #8c6a3a;
  outline-offset: 3px;
}

#opening .countdown-wrap {
  margin-top: clamp(6px, calc(var(--u) * 1), 18px);
}

#opening .countdown:not([hidden]) {
  display: flex;
  justify-content: center;
  gap: clamp(10px, calc(var(--u) * 1.2), 22px);
}

#opening .cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.6em;
}

#opening .cd__n {
  font-family: var(--f-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(15px, calc(var(--u) * 1.9), 40px);
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink, #2a1215);
}

#opening .cd__l {
  margin-top: .3em;
  font-family: var(--f-body);
  font-size: clamp(12px, calc(var(--u) * .62), 13px);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft, #5e4245);
}

#opening .date-tba {
  margin: 0;
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(13px, calc(var(--u) * 1.02), 20px);
  color: var(--ink-soft, #5e4245);
}

/* Leaf two programme dates and countdown labels: full ink, like the names and digits (not the softer ink-soft). */
#opening .leaf--two .programme__date,
#opening .leaf--two .cd__l {
  color: var(--ink, #2a1215);
}

/* Four days in the portrait box: a 2 x 2 grid (name over date, centred) instead of four stacked rows, so the leaf fits short phones. */
#opening .parchment:not(.parchment--wide) .programme.hn4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 19em);
}

#opening .parchment:not(.parchment--wide) .programme.hn4 li:nth-child(even) {
  border-top: 0;
  border-left: 1px solid rgba(140, 106, 58, .45);
}

#opening .parchment:not(.parchment--wide) .programme.hn4 li:nth-child(n+3) {
  border-top: 1px solid rgba(140, 106, 58, .45);
}

#opening .parchment:not(.parchment--wide) .programme.hn4 .programme__link {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15em;
  height: 100%;
  text-align: center;
  padding: .5em .2em;
}

/* ---------- Wide box (landscape parchment, class set by overture.js): use the width ---------- */
#opening .parchment--wide .leaf--two {
  --u: min(calc(var(--ov-w) / 24), calc(var(--ov-h) / 18));
}

#opening .parchment--wide .leaf--two {
  justify-content: center;
}

#opening .parchment--wide .programme {
  /* One row of equal columns whatever the day count (1 to 4): auto columns, no fixed track count, so no wrapped row or stray divider. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: min(100%, 34em);
  margin-top: clamp(6px, calc(var(--u) * .8), 14px);
}

#opening .parchment--wide .programme.hn4 {
  width: min(100%, 42em);
}

#opening .parchment--wide .programme.hn1 {
  width: min(100%, 14em);
}

#opening .parchment--wide .programme li + li {
  border-top: 0;
  border-left: 1px solid rgba(140, 106, 58, .45);
}

#opening .parchment--wide .programme__link {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15em;
  height: 100%;
  text-align: center;
}

#opening .parchment--wide .hosts {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

#opening .parchment--wide .names-visual {
  font-size: clamp(22px, min(calc(var(--u) * 2.2), calc(var(--ov-w) * .05)), 60px);
}

#opening .parchment--wide .names-visual > * {
  display: inline-block;
}

#opening .parchment--wide .names-visual .amp {
  margin: 0 .3em;
  vertical-align: .35em;
}

/* ---------- Short phones (portrait, 700px tall or less: 360x640, 375x667): fit everything without clipping ---------- */
@media (max-width: 600px) and (max-height: 700px) {
  /* Opening: the block hangs from the top edge and stays compact, so the kicker is fully on screen and the dates end above the scroll's gold cap. */
  #overture .ov-intro {
    height: auto;
    justify-content: flex-start;
    padding-top: 10px;
  }
  #overture .ov-kicker { font-size: 11.5px; line-height: 1.3; margin-bottom: 2px; }
  #overture .ov-names {
    font-size: clamp(26px, min(9.4vw, 5.3vh), 40px);
    font-size: clamp(26px, min(9.4vw, 5.3svh), 40px);
    line-height: 1.08;
    padding: .02em .06em .1em;
  }
  #overture .ov-names .amp { line-height: 1.05; font-size: .55em; }
  #overture .ov-dates { margin-top: 0; font-size: 14px; gap: .15em; }

  /* Leaf one: type scales with the leaf's own height; lower floors than the default. */
  #opening .leaf--one .bismillah { font-size: clamp(12px, min(calc(var(--u) * 2.3), calc(var(--ov-w) * .1)), 64px); line-height: 1.6; padding: .1em .08em; }
  #opening .leaf--one .bismillah__tr { font-size: clamp(11.5px, calc(var(--u) * .95), 19px); line-height: 1.28; margin-top: .3em; }
  #opening .leaf--one .leaf__rule { width: 11px; height: 11px; margin: 4px auto; }
  #opening .leaf--one .ayah-ar { font-size: clamp(12px, min(calc(var(--u) * 1.7), calc(var(--ov-w) * .085)), 52px); line-height: 1.6; padding: .1em 0; }
  #opening .leaf--one .ayah-en { font-size: clamp(12.5px, calc(var(--u) * 1.02), 24px); line-height: 1.28; margin-top: .2em; }
  #opening .leaf--one .ayah-ref { font-size: 11px; margin-top: .35em; letter-spacing: .2em; }
  #opening .leaf--one .hosts { font-size: clamp(12.5px, calc(var(--u) * .98), 22px); line-height: 1.32; margin-top: 6px; }
}

/* ---------- Phones in landscape (v38): the parchment is only ~175-225 px tall, so leaf one takes two columns ----------
   Bismillah, translation, ayah and reference on the left, the hosts' line on the right, type scaled to the box (the 15 px
   floors above clipped it: on 667x375 the Bismillah was gone and the hosts' line stopped mid-sentence). Wide box only
   (overture.js), short landscape viewports only; every other size keeps its layout. */
@media (orientation: landscape) and (max-height: 500px) {
  #opening .parchment--wide .leaf--one {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-auto-rows: auto;
    align-content: center;
    justify-items: center;
    column-gap: calc(var(--ov-w) * .05);
    padding: calc(var(--ov-h) * .1) calc(var(--ov-w) * .085);
  }
  #opening .parchment--wide .leaf--one > * { grid-column: 1; max-width: 100%; }
  /* (stretched to the column and padded: its gold is a background clipped to the text, painted only inside its box, so
     a tight box left the descenders of the last word unpainted) */
  #opening .parchment--wide .leaf--one .bismillah { justify-self: stretch; text-align: center; font-size: clamp(12px, min(calc(var(--ov-h) * .095), calc(var(--ov-w) * .045)), 30px); line-height: 1.9; padding: .2em .08em .3em; }
  #opening .parchment--wide .leaf--one .bismillah__tr { font-size: clamp(9.5px, calc(var(--ov-h) * .056), 14px); line-height: 1.25; margin-top: .15em; }
  #opening .parchment--wide .leaf--one .leaf__rule { width: 9px; height: 9px; margin: 3px auto; }
  #opening .parchment--wide .leaf--one .ayah-ar { font-size: clamp(11px, calc(var(--ov-h) * .07), 22px); line-height: 1.5; padding: 0; }
  #opening .parchment--wide .leaf--one .ayah-en { font-size: clamp(9.5px, calc(var(--ov-h) * .058), 15px); line-height: 1.25; margin-top: .1em; }
  #opening .parchment--wide .leaf--one .ayah-ref { font-size: clamp(8.5px, calc(var(--ov-h) * .045), 11px); margin-top: .3em; letter-spacing: .18em; }
  #opening .parchment--wide .leaf--one .hosts {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
    margin: 0;
    max-width: none;
    font-size: clamp(10px, calc(var(--ov-h) * .064), 16px);
    line-height: 1.35;
  }
}

/* ---------- Looping CSS animations: off in still mode ---------- */
html.still #overture .ov-names,
html.still #overture .ov-hint__glyph,
html.still #overture .ov-hint__dot,
html.still #opening .names-visual {
  animation: none;
}
html.still #overture .ov-intro,
html.still #overture .ov-hint,
html.still #opening .leaf { transition: none !important; }

/* ---------- Keyframes ---------- */
@keyframes ov-foil {
  0% { background-position: 100% 50%; }
  55% { background-position: 0% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ov-wheel {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

@keyframes ov-swipe {
  0% { transform: translateY(18px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(-18px); opacity: 0; }
}

@keyframes ov-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* ---------- Print: the intro and both leaves as plain stacked text on paper (no film, no motion, no clones) ---------- */
@media print {
  #opening {
    margin-top: 0 !important;
    z-index: auto !important;
  }
  #overture.ov-off .ov-intro { visibility: visible !important; opacity: 1 !important; }

  /* Scroll-driven inline states (visibility, opacity, filter) must not hide the printed text. */
  #overture .ov-intro,
  #opening .leaf {
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
  }

  #overture .ov-intro,
  #opening .parchment,
  #opening .leaf {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }

  #overture .ov-intro {
    padding: 0 0 14pt !important;
    color: var(--ink) !important;
  }

  #overture .ov-hint {
    display: none !important;
  }

  /* Script foil heading: the gradient is clipped to text, so print the fill as solid black. */
  #overture .ov-names {
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
  }

  #overture .ov-kicker,
  #overture .ov-dates {
    color: var(--ink-soft) !important;
  }

  #opening .parchment {
    padding: 0 !important;
    color: var(--ink) !important;
    clip-path: none !important;
  }

  #opening .leaf {
    display: flex !important;
    padding: 10pt 0 !important;
    break-inside: avoid;
  }

  /* The real names text prints; the aria-hidden line clone does not. */
  #opening #names {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    border: 0 !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    font-family: var(--f-script) !important;
    font-style: italic !important;
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
  }

  #opening .names-visual {
    display: none !important;
  }

  /* Gold-foil text would print as a box or vanish: plain gold-lo and ink. */
  #opening .bismillah {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--gold-lo) !important;
    color: var(--gold-lo) !important;
  }
}