/* Chapters: the day cards inside #garden (one to four per guest).
   chapters.js shows a card while the film rests on its day (.is-shown, time-based fades below) and runs the reveals.
   Hidden reveal states live under .chapter--armed (set by JS only when motion is on) and stop
   applying once .chapter--done is set (reveal finished, animations cancelled, stylesheet state shows).
   Cards never scroll inside themselves: every phone size down to 320x454 (and 314x527, 125 percent page zoom) fits the
   card in the viewport; only the 300x500-and-under last resort below scrolls.
   Plain text only in comments. */

/* Geometry (v22, see step.js): every day owns one step of scroll (--hn-step) and its pin is stuck for all of it. The
   sections overlap by one pin height (#garden overlaps the parchment, each day the one before), so a pin starts
   sticking exactly when the previous one releases: no transit, no empty stretch. Pins are 100svh, so the Safari
   toolbar never resizes them. */
#garden { position: relative; margin-top: calc(-1 * var(--hn-pin, 100vh)); }
#garden .chapter { position: relative; height: calc(var(--hn-pin, 100vh) + var(--hn-step, 100vh)); }
#garden .chapter + .chapter { margin-top: calc(-1 * var(--hn-pin, 100vh)); }
#garden .chapter__pin {
  position: sticky;
  top: 0;
  z-index: 6;
  overflow: hidden;   /* nothing inside may widen the page (see overture.css) */
  height: 100vh;
  height: var(--hn-pin, 100svh);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: max(5vw, 48px);
}

/* Per-theme accents. The card stays ivory; only the rule and the Urdu word change. Cards sit over a bright hall, so plum text and champagne rules. */
#garden .chapter { --acc: #b8955a; --acc2: #2a1215; --urdu-hi: #b8955a; --urdu-lo: #2a1215; }
#garden .chapter[data-theme="moon"] { --acc: #b8955a; --acc2: #6e1a28; --urdu-hi: #b8955a; --urdu-lo: #6e1a28; }
#garden .chapter[data-theme="marigold"] { --acc: #d9bf8a; --acc2: #8c6a3a; --urdu-hi: #b8955a; --urdu-lo: #6e1a28; }
#garden .chapter[data-theme="dawn"] { --acc: #E9CFCB; --acc2: #8c6a3a; --urdu-hi: #b8955a; --urdu-lo: #2a1215; }
#garden .chapter[data-theme="candle"] { --acc: #d9bf8a; --acc2: #6e1a28; --urdu-hi: #b8955a; --urdu-lo: #6e1a28; }

/* Card: parchment, soft shadow, 4px corners, left of centre on desktop.
   Inner padding is 48px on the sides so text clears the double rule.
   No inner scroller: the card is sized to fit, and overflow stays hidden as a last resort. */
#garden .chapter__card {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  column-gap: 14px;
  align-items: start;
  width: min(440px, 34vw);
  min-width: 340px;
  max-width: 440px;
  max-height: 90vh;
  max-height: 90svh;
  overflow: hidden;
  padding: 32px 48px 28px;
  border-radius: 4px;
  color: var(--ink, #2a1215);
  background-color: var(--paper, #fbf7f1);
  /* Paper texture washed to near-ivory (no brown), so the card is solid enough to read over a bright film. */
  background-image: linear-gradient(rgba(251, 247, 241, .94), rgba(251, 247, 241, .94)), url("assets/paper.webp");
  border: 1px solid rgba(140, 106, 58, .55);
  box-shadow: 0 24px 60px rgba(28,10,13, .55), 0 2px 6px rgba(28,10,13, .35);
  text-align: left;
}

/* Show / hide (chapters.js adds .hn-gated to #garden, v22): a card shows only while the film rests on its day (.is-shown on the article), so its
   text never runs ahead of the film. Both ways are time-based CSS transitions on opacity and transform (compositor
   only): 140 ms out as the film leaves, 240 ms in as it arrives (opacity crosses 0.05-0.95 in ~110 ms, so no
   half-transparent card lingers), with a 6 px drift. A card at rest is either fully shown or fully gone.
   A hidden card takes no taps; it stays in the accessibility tree and keyboard focus can still reach it (it then shows). */
#garden.hn-gated .chapter__card {
  will-change: opacity, transform;   /* built once (the ch-warm pass rasterises it), so each fade is pure compositing */
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  pointer-events: none;
  transition: opacity .14s cubic-bezier(0, 0, .2, 1), transform .14s cubic-bezier(0, 0, .2, 1);
}
#garden.hn-gated .chapter.is-shown .chapter__card {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .24s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.16, 1, .3, 1);
}
html.still #garden .chapter__card { transition: none !important; }
/* The pins overlap while one slides in under another (hidden) one: the pin boxes take no taps, only a shown card does. */
#garden.hn-gated .chapter__pin { pointer-events: none; }

/* Every real child is a full-width grid row, except the date and the art (side by side).
   The ornament frame (.illum__deco) is absolute and must not take a grid placement: it spans the whole card. */
#garden .chapter__card > :not(.illum__deco) { grid-column: 1 / -1; min-width: 0; }
#garden .chapter__card > .chapter__date { grid-column: 1; }
#garden .chapter__card > .chapter__art { grid-column: 2; align-self: start; }

/* Urdu word: Nastaliq, gold tint under a single glint band; the band sweeps right to left (background-position-x, one layer). */
#garden .chapter__urdu {
  margin: 0;
  font-weight: 400;
  padding: .06em 0 .14em;
  font-family: var(--f-urdu, 'Noto Nastaliq Urdu'), 'Noto Nastaliq Urdu', serif;
  font-size: 4.75rem;
  line-height: 1.9;
  text-align: right;
  direction: rtl;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-color: var(--urdu-lo);
  background-image: linear-gradient(100deg, transparent 42%, var(--urdu-hi) 50%, transparent 58%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
}

#garden .chapter__kicker {
  margin: 0 0 6px;
  font-family: var(--f-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft, #5e4245);
}

#garden .chapter__title {
  position: relative;
  margin: 0 0 12px;
  padding-bottom: .2em;
  font-family: var(--f-script);
  font-style: italic;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.35;
  /* background-clip: text paints only inside the padding box, so the italic overhang needs room on every side. */
  padding-top: .12em;
  padding-left: .16em;
  padding-right: .26em;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--foil-script-paper);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Hairline under the title. A child, not the background shorthand, so the foil can clip the text. */
#garden .chapter__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--acc2), var(--acc) 60%, transparent);
}

/* Date: day and weekday on one row, month under. The numeral rolls up inside a mask with foil. */
#garden .chapter__date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
}

#garden .chapter__dow {
  font-family: var(--f-italic);
  font-weight: 500;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft, #5e4245);
}

#garden .chapter__day {
  position: relative;
  font-family: var(--f-display, Georgia, serif);
  font-size: 4rem;
  font-weight: 600;
  line-height: .95;
  font-variant-numeric: lining-nums;
}

#garden .chapter__roll {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .06em .08em .12em;
}

#garden .chapter__roll-in {
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--foil-ink, linear-gradient(135deg, #8c6a3a 0%, #8c6a3a 40%, #b8955a 62%, #8c6a3a 100%));
  -webkit-background-clip: text;
  background-clip: text;
}

#garden .chapter__month {
  flex-basis: 100%;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft, #5e4245);
}

/* Art: transparent vignette, multiplied onto the parchment. Sits beside the date. */
#garden .chapter__art { margin: 0; }
#garden .chapter__art img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* v51: art held back (data-art-src, chapters.js) or not loaded yet (data-art-wait) is hidden: WebKit draws an empty grey
   frame for an img with no src, Chromium for one still loading. */
#garden .chapter__art img:not([src]),
#garden .chapter__art img[data-art-wait] { visibility: hidden; }

/* Facts: two columns (label above value). */
#garden .chapter__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 18px;
  margin: 12px 0 0;
}
#garden .chapter__fact {
  display: grid;
  align-content: start;   /* v38: a short fact beside a tall one (time beside a three-line venue) keeps its value under its label */
  gap: 2px;
  padding: 7px 0 6px;
  border-top: 1px solid rgba(140, 106, 58, .28);
}
#garden .chapter__fact dt {
  font-family: var(--f-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft, #5e4245);
}
#garden .chapter__fact dd { margin: 0; font-size: 1.05rem; font-weight: 300; line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }
#garden .chapter__addr { display: block; text-wrap: balance; font-family: var(--f-italic); font-size: .9rem; font-weight: 400; font-style: italic; color: var(--ink-soft, #5e4245); }

/* Buttons: one row. */
#garden .chapter__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);   /* "Add to calendar" is the longer label */
  gap: 10px;
  margin-top: 12px;
}
#garden .chapter__actions .btn {
  min-width: 0;
  min-height: 42px;
  padding: 0 6px;
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .05em;
  white-space: nowrap;
}

#garden .chapter__hint {
  margin: 8px 0 0;
  font-family: var(--f-italic);
  font-weight: 400;
  font-style: italic;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--ink-soft, #5e4245);
}

/* Hidden start states for the time-based reveals (JS adds .chapter--armed when motion is on).
   The values match the first keyframe of each WAAPI reveal in chapters.js.
   .chapter--done means the reveal has finished: the stylesheet state shows and no animation is held. */
#garden .chapter--armed:not(.chapter--done) .chapter__urdu { clip-path: inset(0 0 0 100%); background-position: 0% 0; }
#garden .chapter--armed:not(.chapter--done) .chapter__kicker { opacity: 0; transform: translateY(8px); }
#garden .chapter--armed:not(.chapter--done) .chapter__title { opacity: 0; clip-path: inset(-.4em 100% -.4em -.4em); filter: blur(3px); }
#garden .chapter--armed:not(.chapter--done) .chapter__dow,
#garden .chapter--armed:not(.chapter--done) .chapter__month { opacity: 0; transform: translateY(8px); }
#garden .chapter--armed:not(.chapter--done) .chapter__roll-in { transform: translateY(110%); }
#garden .chapter--armed:not(.chapter--done) .chapter__art img { clip-path: circle(0% at 50% 50%); transform: scale(1.06); }
#garden .chapter--armed:not(.chapter--done) .chapter__fact,
#garden .chapter--armed:not(.chapter--done) .chapter__actions .btn,
#garden .chapter--armed:not(.chapter--done) .chapter__hint { opacity: 0; transform: translateY(14px); }

/* Print: no foil or background-clip text, so the dates, title and Urdu word print in ink.
   The card and reveal states are forced to their final look, so nothing prints hidden. */
@media print {
  #garden .chapter__day,
  #garden .chapter__urdu,
  #garden .chapter__title,
  #garden .chapter__roll-in {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background: none !important;
  }
  #garden .chapter__card { opacity: 1 !important; transform: none !important; filter: none !important; visibility: visible !important; }
  #garden, #garden .chapter + .chapter { margin-top: 0 !important; }
  #garden .chapter__card .chapter__art,
  #garden .chapter__card .chapter__art img,
  #garden .chapter__card .chapter__urdu,
  #garden .chapter__card .chapter__roll-in,
  #garden .chapter__card .chapter__kicker,
  #garden .chapter__card .chapter__dow,
  #garden .chapter__card .chapter__month,
  #garden .chapter__card .chapter__fact,
  #garden .chapter__card .chapter__actions .btn,
  #garden .chapter__card .chapter__hint {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* Short desktop and laptop viewports: tighter type and art so the card fits 90svh without scrolling. */
@media (min-width: 600px) and (max-height: 820px) {
  #garden .chapter__card { padding: 24px 48px 22px; }
  #garden .chapter__urdu { font-size: 3.8rem; line-height: 1.8; }
  #garden .chapter__kicker { margin-bottom: 4px; }
  #garden .chapter__title { font-size: 2.9rem; margin-bottom: 8px; padding-bottom: .2em; }
  #garden .chapter__day { font-size: 3.4rem; }
  #garden .chapter__dow { font-size: 1.05rem; }
  #garden .chapter__art img { width: 100px; height: 100px; }
  #garden .chapter__facts { margin-top: 8px; }
  #garden .chapter__fact { padding: 5px 0 4px; }
  #garden .chapter__fact dd { font-size: .98rem; }
  #garden .chapter__actions { margin-top: 10px; }
  #garden .chapter__actions .btn { min-height: 44px; }
  #garden .chapter__hint { margin-top: 6px; font-size: .86rem; }
}

@media (min-width: 600px) and (max-height: 700px) {
  #garden .chapter__card { padding: 18px 48px 16px; }
  #garden .chapter__urdu { font-size: 3.1rem; line-height: 1.7; }
  #garden .chapter__kicker { font-size: .75rem; margin-bottom: 2px; }
  #garden .chapter__title { font-size: 2.5rem; margin-bottom: 6px; padding-bottom: .2em; }
  #garden .chapter__day { font-size: 2.8rem; }
  #garden .chapter__dow { font-size: .95rem; }
  #garden .chapter__month { font-size: .75rem; }
  #garden .chapter__art img { width: 84px; height: 84px; }
  #garden .chapter__fact dt { font-size: .75rem; }
  #garden .chapter__fact dd { font-size: .9rem; }
  #garden .chapter__actions .btn { min-height: 34px; }
  #garden .chapter__hint { font-size: .8rem; }
}

/* Narrower desktops and tablets: less side padding so both buttons keep their labels on one line. */
@media (min-width: 600px) and (max-width: 1100px) {
  #garden .chapter__card { padding-left: 32px; padding-right: 32px; }
}

/* Phones: a bottom sheet above the index bar. Fits the viewport (no inner scroll): the card is capped at the space
   between the motion toggle (top right, 7 + 44 px, ambient.css) and the index bar, and the short-phone rules below
   tighten type and spacing step by step so every line and both buttons still fit.
   Display type is capped in px with min(): at the default 16 px root it is the same size as before, and a larger root
   font (browser text size) no longer pushes the buttons out of the card. Facts and buttons were already px or capped.
   Padding is 48px on the sides; .illum--narrow cards use 28px. */
@media (max-width: 599px) {
  #garden .chapter__pin { display: block; padding: 0; }

  #garden .chapter__card {
    position: absolute;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(var(--index-h, 0px) + 12px);
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: calc(100vh - var(--index-h, 0px) - 68px);
    max-height: calc(100svh - var(--index-h, 0px) - 68px);   /* 12 px under the card, 56 px above it for the toggle */
    grid-template-columns: minmax(0, 1fr) 84px;
    column-gap: 10px;
    padding: 18px 48px 16px;
    /* Paper is 2048 px: at its natural size it is upscaled 3x on a 3x phone (soft). Cover draws it at card size. */
    background-size: cover;
  }

  /* Narrow cards (ornament.js adds .illum--narrow under 520 px): 28 px clears the rule. */
  #garden .chapter__card.illum--narrow { padding-left: 28px; padding-right: 28px; }

  #garden .chapter__urdu { font-size: min(3.2rem, 51.2px); line-height: 1.75; }
  #garden .chapter__kicker { margin-bottom: 2px; font-size: min(.75rem, 13px); letter-spacing: .24em; }
  #garden .chapter__title { margin-bottom: 8px; padding-bottom: .2em; font-size: min(2.4rem, 38.4px); }
  #garden .chapter__dow { font-size: min(.95rem, 15.2px); }
  #garden .chapter__day { font-size: min(3.2rem, 51.2px); }
  #garden .chapter__month { font-size: min(.75rem, 13px); letter-spacing: .16em; }
  #garden .chapter__art img { width: 80px; height: 80px; }
  #garden .chapter__facts { margin-top: 8px; gap: 0 12px; }
  #garden .chapter__fact { gap: 0; padding: 5px 0 4px; }
  #garden .chapter__fact dt { font-size: min(.75rem, 13px); letter-spacing: .14em; }
  #garden .chapter__fact dd { font-size: 15px; line-height: 1.25; }
  #garden .chapter__addr { font-size: 15px; }
  #garden .chapter__actions { margin-top: 10px; gap: 8px; }
  #garden .chapter__actions .btn { min-height: 44px; padding: 0 6px; font-size: min(.75rem, 12px); letter-spacing: .08em; }
  #garden .chapter__hint { margin-top: 6px; font-size: 15px; }
}

/* Narrow phones (340 px and under, e.g. 320 wide or 375 at 110 percent page zoom): ADD TO CALENDAR is 136 px at the
   default tracking and its slot is 118 px. Tighter tracking and a 3:2 split give it 125 px of text in a 131 px box. */
@media (max-width: 340px) {
  #garden .chapter__actions { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  #garden .chapter__actions .btn { padding: 0 3px; letter-spacing: .02em; }
}

/* Very narrow (300 px and under, 150 percent page zoom and up): the labels may wrap to two lines inside the 44 px button. */
@media (max-width: 300px) {
  #garden .chapter__card { left: 8px; right: 8px; }
  #garden .chapter__card.illum--narrow { padding-left: 24px; padding-right: 24px; }
  #garden .chapter__actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #garden .chapter__actions .btn { white-space: normal; line-height: 1.15; text-align: center; }
}

/* Last resort, 300 x 500 px and under only (150 percent page zoom on a phone with both Safari bars, 262x439): the
   tightest card is still about 60 px taller than the room, so here alone it scrolls inside itself rather than clip
   the buttons. Everywhere else it fits, so no card is a scroller that could catch the page swipe. */
@media (max-width: 300px) and (max-height: 500px) {
  #garden .chapter__card { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Short phones (portrait), three steps by viewport height so the card fits between the toggle and the index bar.
   Budget is the viewport height minus 126 px (index bar 58, gaps 12 + 56). The tallest card is the Shaadi (long venue).
   640 and under (375x629): smaller art and Urdu. */
@media (max-width: 599px) and (max-height: 640px) {
  #garden .chapter__art img { width: 64px; height: 64px; }
  #garden .chapter__urdu { font-size: min(1.9rem, 30.4px); }
}

/* 620 and under (320x568, 375x548, 125 percent page zoom): tighter type and rows. The facts stack (label left, value
   right, full card width), so the venue and address wrap to fewer lines than in two narrow columns. */
@media (max-width: 599px) and (max-height: 620px) {
  #garden .chapter__card { padding-top: 15px; padding-bottom: 16px; }   /* 16 keeps the buttons off the inner hairline (inset 14) */
  #garden .chapter__urdu { line-height: 1.2; }
  #garden .chapter__kicker { margin-bottom: 0; }
  #garden .chapter__title { margin-bottom: 4px; font-size: min(2.1rem, 33.6px); }
  #garden .chapter__dow { font-size: min(.9rem, 14.4px); }
  #garden .chapter__day { font-size: min(2.6rem, 41.6px); }
  #garden .chapter__art img { width: 56px; height: 56px; }
  #garden .chapter__facts { margin-top: 6px; grid-template-columns: minmax(0, 1fr); }
  #garden .chapter__fact { grid-template-columns: 58px minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 4px 0 3px; }
  #garden .chapter__fact dd { font-size: 14px; line-height: 1.2; }
  #garden .chapter__addr { font-size: 14px; }
  #garden .chapter__actions { margin-top: 8px; }
  #garden .chapter__hint { margin-top: 4px; font-size: 13px; line-height: 1.3; }
}

/* 500 and under (iPhone SE with both Safari bars, 320x454): the Urdu word moves beside the title, one row less. */
@media (max-width: 599px) and (max-height: 500px) {
  #garden .chapter__card { padding-top: 14px; padding-bottom: 16px; grid-template-columns: minmax(0, 1fr) 56px; }
  #garden .chapter__card > .chapter__title { grid-row: 2; grid-column: 1; }
  #garden .chapter__card > .chapter__urdu { grid-row: 2; grid-column: 2; align-self: center; justify-self: end; white-space: nowrap; font-size: min(1.6rem, 25.6px); }
  #garden .chapter__title { margin-bottom: 2px; font-size: min(1.75rem, 28px); }   /* The Mayoun: 163 px of 174 beside the Urdu */
  #garden .chapter__day { font-size: min(2.3rem, 36.8px); }
  #garden .chapter__art img { width: 48px; height: 48px; }
  #garden .chapter__facts { margin-top: 2px; }
  #garden .chapter__fact { padding: 3px 0 2px; }
  #garden .chapter__fact dd { line-height: 1.15; }
  #garden .chapter__actions { margin-top: 6px; }
  #garden .chapter__hint { font-size: 12.5px; line-height: 1.25; }
}

/* Warm-up (chapters.js): while .ch-warm is on html, the cards are drawn once, inside the viewport behind the loader
   (or, once the loader is gone, off to the side of it, below). The reveal states show their final look so the
   Urdu word, art and text are rasterised too. Pointer events pass through the fixed pin. */
.ch-warm #garden .chapter__pin { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; }
.ch-warm #garden .chapter__card { opacity: .02 !important; }
/* v38: the warm pass is drawn in the viewport only while something opaque covers it: the loader, or the name gate
   (90 % opaque, until html.hn-unlocked). Once the page shows (the sealed scroll), the cards are drawn beside the screen:
   at .02 over the dark hero the card and its Urdu word showed as a ghost for ~2.4 s. (Under the film is not possible:
   #journey is its own stacking context above #stage.) */
.ch-warm.loaded.hn-unlocked #garden .chapter__pin { transform: translate3d(-200vw, 0, 0); }
.ch-warm.ch-warm-idle #garden .chapter__card { opacity: .01 !important; }
.ch-warm #garden .chapter--armed:not(.chapter--done) .chapter__urdu { clip-path: none; background-position: 100% 0; }
.ch-warm #garden .chapter--armed:not(.chapter--done) .chapter__kicker,
.ch-warm #garden .chapter--armed:not(.chapter--done) .chapter__title,
.ch-warm #garden .chapter--armed:not(.chapter--done) .chapter__dow,
.ch-warm #garden .chapter--armed:not(.chapter--done) .chapter__month,
.ch-warm #garden .chapter--armed:not(.chapter--done) .chapter__fact,
.ch-warm #garden .chapter--armed:not(.chapter--done) .chapter__actions .btn,
.ch-warm #garden .chapter--armed:not(.chapter--done) .chapter__hint,
.ch-warm #garden .chapter--armed:not(.chapter--done) .chapter__roll-in { opacity: 1; transform: none; }
.ch-warm #garden .chapter--armed:not(.chapter--done) .chapter__title { clip-path: none; filter: none; }
.ch-warm #garden .chapter--armed:not(.chapter--done) .chapter__art img { clip-path: none; transform: none; }

/* Touch screens keep :hover after a tap (iOS). styles.css owns the shared .btn:hover (emerald fill, lift), and this file
   has no hover rule of its own, so on touch-only devices the chapter buttons are reset to their resting look. */
@media (hover: none) {
  #garden .chapter__actions .btn:not(:disabled):not([aria-disabled="true"]):hover {
    background: rgba(255, 255, 255, .45);
    color: var(--ink, #2a1215);
    transform: none;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), inset 0 0 0 4px rgba(140, 106, 58, .35), 0 3px 8px -5px rgba(28,10,13, .45);
  }
}

/* Landscape phones (height 500 px or less): a wide two-column card on the left, clear of the index bar, the notch and
   the motion toggle (top right). Left: Urdu word, kicker, title, date and art. Right: the facts stacked (label left,
   value right), the buttons and the hint. One narrow column was 330 to 385 px tall in 284 to 317 px of room
   (852x393, 740x360, 667x375); two columns are about 230 px. Display type is capped in px, as in the phone rule. */
@media (max-height: 500px) and (orientation: landscape) {
  #garden .chapter__pin { display: block; padding: 0; }

  #garden .chapter__card {
    --card-l: max(5vw, calc(env(safe-area-inset-left, 0px) + 12px));
    position: absolute;
    left: var(--card-l);
    right: auto;
    top: auto;
    bottom: calc(var(--index-h, 0px) + 8px);
    /* 59 px on the right keeps the card clear of the motion toggle (7 + 44 px from the right edge, plus 8). */
    width: min(560px, calc(100vw - var(--card-l) - 59px - env(safe-area-inset-right, 0px)));
    min-width: 0;
    max-width: 560px;
    max-height: calc(100vh - var(--index-h, 0px) - 16px);
    max-height: calc(100svh - var(--index-h, 0px) - 16px);
    padding: 16px 32px;   /* content clears the inner hairline (inset 14) */
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.7fr);
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "urdu   urdu   facts"
      "kicker kicker facts"
      "title  title  facts"
      "date   art    actions"
      "date   art    hint";
    column-gap: 10px;
  }
  #garden .chapter__card > .chapter__urdu { grid-area: urdu; }
  #garden .chapter__card > .chapter__kicker { grid-area: kicker; }
  #garden .chapter__card > .chapter__title { grid-area: title; }
  #garden .chapter__card > .chapter__date { grid-area: date; }
  #garden .chapter__card > .chapter__art { grid-area: art; }
  #garden .chapter__card > .chapter__facts { grid-area: facts; }
  #garden .chapter__card > .chapter__actions { grid-area: actions; }
  #garden .chapter__card > .chapter__hint { grid-area: hint; }

  #garden .chapter__card.illum--narrow { padding-left: 28px; padding-right: 28px; }

  #garden .chapter__urdu { font-size: min(2.25rem, 36px); line-height: 1.6; }   /* the tall kaf of the Nikkah word stays inside the rule */
  #garden .chapter__kicker { margin-bottom: 0; font-size: min(.75rem, 13px); letter-spacing: .2em; }
  #garden .chapter__title { margin-bottom: 4px; padding-bottom: .2em; font-size: min(2rem, 32px); }
  #garden .chapter__dow { font-size: min(.85rem, 13.6px); }
  #garden .chapter__day { font-size: min(2.4rem, 38.4px); }
  #garden .chapter__month { font-size: min(.75rem, 13px); letter-spacing: .12em; }
  #garden .chapter__art img { width: 48px; height: 48px; }
  #garden .chapter__facts { margin: 0; grid-template-columns: minmax(0, 1fr); }
  #garden .chapter__fact { grid-template-columns: 58px minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 4px 0 3px; }
  #garden .chapter__fact dt { font-size: min(.75rem, 13px); letter-spacing: .12em; }
  #garden .chapter__fact dd { font-size: min(.85rem, 13.6px); line-height: 1.25; }
  #garden .chapter__addr { font-size: min(.8rem, 12.8px); }
  #garden .chapter__actions { margin-top: 8px; gap: 8px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  #garden .chapter__actions .btn { min-height: 44px; padding: 0 6px; font-size: min(.75rem, 12px); letter-spacing: .08em; }
  #garden .chapter__hint { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; }
}

/* Very short landscape phones (852x345, 740x360, 667x375 and similar): smaller Urdu, title and date. */
@media (max-height: 380px) and (orientation: landscape) {
  #garden .chapter__urdu { font-size: min(1.9rem, 30.4px); }
  #garden .chapter__title { font-size: min(1.9rem, 30.4px); margin-bottom: 2px; }
  #garden .chapter__day { font-size: min(2.1rem, 33.6px); }
}

/* Narrow landscape (568x320, iPhone SE first generation): less side padding and tracking, and a more even split so
   DIRECTIONS fits its button. ADD TO CALENDAR wraps to two centred lines inside its 44 px button there. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 640px) {
  #garden .chapter__card,
  #garden .chapter__card.illum--narrow { padding-left: 24px; padding-right: 24px; }
  #garden .chapter__actions { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  #garden .chapter__actions .btn { padding: 0 3px; letter-spacing: .03em; white-space: normal; line-height: 1.15; text-align: center; }
}

/* v38: short desktop windows: the card's lower left corner reached into the motion toggle (bottom left, 11 + 44 px,
   ambient.css) by 4 to 7 px at 560 px of height and less. The card starts 10 px right of the toggle; at 500 px and less
   the landscape rule above places it by --card-l, so that moves too. After that rule on purpose. */
@media (min-width: 960px) and (max-height: 560px) {
  #garden .chapter__pin { padding-left: max(5vw, calc(65px + env(safe-area-inset-left, 0px))); }
  #garden .chapter__card { --card-l: max(5vw, calc(65px + env(safe-area-inset-left, 0px))); }
}