/* Hena (حەنا) — original work for Ahang, 2026-08-18, REDESIGNED 2026-08-27.
   Loaded as a <link> for this template only; every rule is scoped by
   .hena-scope / .hn-.

   THIS FILE IS PUBLIC AND THE GUEST DOWNLOADS EVERY BYTE, comments included.
   The reasoning lives in the components and in docs/templates/HENA_PLAN.md —
   only traps are written here.

   TWO DECISIONS CARRY THE WHOLE FILE. HENA_PLAN §7 and §9 carry the argument
   for both, including everything each of them replaced.

   THE PAGE IS A NIGHT (2026-08-19). It was rosewater paper between a dark gate
   and a dark closing, which is one product either side of another.

   THE LINE NEVER LIFTS (2026-08-27). A guest opens this template by drawing a
   henna vine with their own finger, and then never saw that vine again. A
   length of it now stands between every pair of sections and DRAWS ITSELF as
   the guest scrolls into it — `stroke-dasharray: 1` and a transition on
   `stroke-dashoffset`, fired by ScrollReveal's `.is-visible`. No scroll
   handler, no animation frame, no measurement. */

.hena-scope {
  /* ── THE PALETTE ─────────────────────────────────────────────────────
     Retuned by the founder 2026-08-22 and NOT touched by the 2026-08-27
     redesign: what changed is where each colour is spent, not what it is.
     THREE COPIES OF THESE VALUES HAVE TO AGREE — HenaTemplate.TPL_VARS,
     lib/templates/themes.js and this block. Change one, change all three;
     darga's two drifted for two days and its gallery swatch advertised a
     palette the template had already left.

     ── THE CONTRAST RULES INVERT WITH THE GROUND ──────────────────────────
     and getting this backwards is the one way to make the page unreadable:

       on NIGHT  ivory 15.9:1, gold 6.1:1, gold-soft 9.2:1 — all three set
                 text. Copper is 4.0:1: large type, a FILL or a drawn line,
                 never a caption.
       on IVORY  (the invitation leaf only) ink 13.5:1, copper-deep 6.0:1,
                 gold-deep 5.0:1. Plain gold is 2.6:1 here and is illegal.

     Measured against the real tokens, not estimated. */

  /* The ground, and the panels lifted off it. */
  --hn-night: #16090f; /* deep plum */
  --hn-night-deep: #0e050a; /* the gate and the closing, deeper still */
  --hn-panel: #2a101a; /* dark burgundy */
  --hn-panel-hi: #3a1822; /* warm burgundy */

  /* Warm ivory — the invitation leaf, and the type on the night. */
  --hn-ivory: #f1e7d5;
  --hn-ivory-hi: #f8f0e0;

  --hn-copper: #9c653f; /* muted copper — fills, and the henna stain itself */
  --hn-copper-deep: #7a4a2b; /* legal as text on the ivory leaf */
  --hn-olive: #69704a; /* the gate only, while the vine is wet */

  --hn-gold: #b08a4a; /* antique gold */
  --hn-gold-deep: #7d5c25; /* legal as text on IVORY */
  --hn-gold-soft: #cfae74; /* the brighter gold, for type on the NIGHT */

  --hn-ink: #2b1a1e; /* body text on the invitation leaf */
  --hn-ink-soft: rgba(43, 26, 30, 0.62);
  --hn-on-night: #f1e7d5;
  --hn-on-night-soft: rgba(241, 231, 213, 0.7);

  /* THREE WEIGHTS OF LINE. Nearly every rule here is `hair`: a page whose
     ornament is a drawn vine cannot also be ruled in visible gold every 200px
     without the two competing. `line` is for what is HELD — the leaf's
     keyline, a chip's edge. */
  --hn-line: rgba(176, 138, 74, 0.38);
  --hn-line-soft: rgba(176, 138, 74, 0.2);
  --hn-line-hair: rgba(176, 138, 74, 0.13);

  /* Candlelight. One radial, reused wherever something needs to look lit from
     within rather than merely coloured. */
  --hn-glow: radial-gradient(
    ellipse 68% 74% at 50% 42%,
    rgba(176, 138, 74, 0.13),
    rgba(176, 138, 74, 0) 72%
  );

  /* The bracket colour for the four objects held at their corners — see HELD
     AT THE CORNERS, below. */
  --hn-br: rgba(176, 138, 74, 0.45);

  /* THE SHARED GUEST COMPONENTS' RADIUS, OVERRIDDEN FOR THIS TEMPLATE ONLY.
     RsvpForm, the album and the music control read `--radius-sm`/`--radius-lg`
     from whatever they are mounted inside, and the app's 12/20px defaults are
     right for a web form and wrong inside an invitation whose own corner is
     4px. Declared here rather than edited in those components: the two names
     belong to all five templates. */
  --radius-sm: 5px;
  --radius-lg: 7px;

  --hn-r: 10px; /* the leaf's foot, the map window */
  --hn-r-sm: 4px; /* every control */

  /* ── THE RHYTHM ──────────────────────────────────────────────────────
     One 5.5rem margin used to separate all eight sections equally. The page is
     four MOVEMENTS now and the distance between them is carried by the VINE:
     `--hn-beat` is the air either side of a link, and a link between movements
     is simply twice as many lobes tall. THERE IS NO PER-SECTION MARGIN TOKEN
     LEFT IN THIS FILE, and adding one back is adding a second, invisible
     spacing system on top of a visible one. */
  --hn-gut: clamp(1.15rem, 5.2vw, 1.75rem);
  --hn-col: 29rem;
  --hn-col-wide: 37rem;
  --hn-beat: clamp(2rem, 7vw, 2.9rem);
  --hn-trail-w: clamp(1.75rem, 6.4vw, 2.4rem);

  /* ── THE TYPE SCALE. Six steps, and the display face carries every heading;
     it was four sizes with everything between body and head missing. ── */
  --hn-t-micro: 0.75rem;
  --hn-t-label: 0.83rem;
  --hn-t-body: 1.02rem;
  --hn-t-lede: 1.1rem;
  --hn-t-head: clamp(1.65rem, 7.6vw, 2.15rem);
  --hn-t-display: clamp(2.5rem, 12.5vw, 3.9rem);

  position: relative;
  width: 100%;
  min-height: 100vh;

  /* The silk, held far back, over the night. It is the same cloth the scene is
     shot on, so the page is the table the invitation is lying on rather than a
     colour that happens to be dark. */
  background-color: var(--hn-night);
  background-image:
    linear-gradient(180deg, rgba(30, 13, 20, 0.93), rgba(14, 5, 10, 0.97)),
    url("/media/hena/silk.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: scroll, fixed;

  color: var(--hn-on-night);
  font-size: var(--hn-t-body);
  line-height: 1.9;
  overflow-x: clip;
  /* Never letter-space Kurdish: it pulls a joining script apart. */
  letter-spacing: normal;
}

/* ══ THE COVER ══════════════════════════════════════════════════════════ */

.hena-scope .hn-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* svh, NOT dvh: dvh grows as a phone toolbar retracts and shoves the whole
     cover down mid-gesture. */
  height: 100svh;

  /* The scene, dimmed hard. The vine is a 2.1px stroke drawn over this, so the
     picture has to sit far enough back that a thin line reads on it — the
     gradients are not decoration, they are what makes the drawing legible. The
     image is the video's own first frame, so when the gate lifts the hero is
     the same picture rather than a cut to somewhere else. */
  background-color: var(--hn-night-deep);
  background-image:
    linear-gradient(180deg, rgba(18, 7, 12, 0.62) 0%, rgba(18, 7, 12, 0.72) 45%, rgba(18, 7, 12, 0.94) 100%),
    url("/media/hena/night.webp");
  background-size: cover, cover;
  background-position: center, center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

/* The veil closes the four corners of the photograph, which the flat vertical
   gradient above cannot: the scene is lit in its upper third, so on a tall
   phone the top two corners read as the edges of an image rather than as the
   dark of a room. */
.hena-scope .hn-gate-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 96% 62% at 50% 30%,
    rgba(10, 3, 7, 0) 32%,
    rgba(10, 3, 7, 0.5) 72%,
    rgba(10, 3, 7, 0.88) 100%
  );
}

/* The keyline this design carries everywhere, standing an inch inside the
   glass. It is what makes the cover read as a card rather than as a photograph
   with words on it, and it is the one thing here that never moves. */
.hena-scope .hn-gate-frame {
  position: absolute;
  inset: clamp(0.8rem, 3.8vw, 1.35rem);
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(207, 174, 116, 0.2);
  border-radius: 3px;
}

/* Z-INDEX 1, MATCHING THE TWO LAYERS ABOVE, AND IT IS LOAD-BEARING. The veil
   and the frame come EARLIER in the DOM, so with equal z-index the vine — which
   comes later — paints over both. Left at `auto` it would have painted UNDER
   them, and the whole mechanic would have been drawn behind a wash. */
.hena-scope .hn-vine {
  position: absolute;
  z-index: 1;
  /* Defaults put the figure mid-screen; the gate overwrites both the instant a
     finger lands. Logical properties are not used here on purpose — this is a
     pointer coordinate measured from the element's own left edge, and it must
     not flip with direction. */
  left: var(--hn-x, 50%);
  top: var(--hn-y, 46%);
  width: 74vmin;
  height: 74vmin;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

.hena-scope .hn-stem {
  fill: none;
  stroke: var(--hn-olive);
  stroke-width: 2.1;
  stroke-linecap: round;
  /* pathLength="1" on the element makes every strand one unit long whatever its
     real geometry, so this draws 0 to 100% with nothing measured at runtime. */
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p, 0));
}

/* THE VINE'S ORNAMENTS ARE `hn-vleaf` / `hn-vdot`, RENAMED IN THE REDESIGN, and
   the `v` is the whole reason: they were `hn-leaf` and `hn-dot`, and `.hn-leaf`
   is now the invitation card while `.hn-dot` has always ALSO been the gallery's
   page indicator (shared/Slider builds it from the prefix). The second
   collision survived a year only because the indicator's rule is scoped to
   `.hn-dots .hn-dot` — a bare `.hn-dot { rotate: 45deg }` would have turned
   forty berries on this cover, silently, on the one screen nobody re-checks.
   Scoping a collision is a note to the next author; not colliding is a fix. */
.hena-scope .hn-vleaf,
.hena-scope .hn-vdot,
.hena-scope .hn-rosette path {
  fill: var(--hn-olive);
}

/* Drying: wet olive to deep henna, and a warm sheen coming up off the line. The
   drop-shadow is ONLY on this phase — it is a filter, and a filter on a tree
   repainting sixty times a second while a finger is held is the one thing here
   capable of dropping frames on a cheap phone. While the vine grows there is
   nothing on it; once it stops growing it catches the candlelight. */
.hena-scope .hn-gate--drying .hn-stem {
  stroke: var(--hn-copper);
  transition: stroke 550ms ease-out;
}

.hena-scope .hn-gate--drying .hn-vleaf,
.hena-scope .hn-gate--drying .hn-vdot,
.hena-scope .hn-gate--drying .hn-rosette path {
  fill: var(--hn-copper);
  transition: fill 550ms ease-out;
}

.hena-scope .hn-gate--drying .hn-vine {
  filter: drop-shadow(0 0 9px rgba(176, 138, 74, 0.42));
  transition: filter 550ms ease-out;
}

.hena-scope .hn-gate--drying {
  animation: hn-dry 550ms ease-out forwards;
}

/* The bloom as it dries. KEEP IT SMALL — the first cut washed the whole screen
   amber, which threw away the plum ground and left henna-on-brown, the one
   pairing on this palette with no contrast in it.

   Drying LIFTS THE DIM rather than repainting the ground: the scene comes up as
   the henna sets, which is the same move the hero then completes. An earlier
   cut replaced the background with a gradient and threw the photograph away at
   the exact moment it should have been arriving. */
@keyframes hn-dry {
  to {
    background-image:
      linear-gradient(180deg, rgba(18, 7, 12, 0.34) 0%, rgba(18, 7, 12, 0.46) 45%, rgba(18, 7, 12, 0.88) 100%),
      url("/media/hena/night.webp");
  }
}

/* LIFTED OFF THE BOTTOM EDGE. The copy sat 3rem from the foot of the screen,
   under a photograph whose subject is in its upper third — so the two things
   worth looking at were as far apart as the glass allows. It reads at about two
   thirds down now, which is where the velvet in the picture is empty. */
.hena-scope .hn-gate-copy {
  position: relative;
  z-index: 2;
  padding: 0 var(--hn-gut) calc(clamp(3.5rem, 14vh, 6.5rem) + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--hn-ivory);
  pointer-events: none;
}

.hena-scope .hn-gate-kicker {
  font-size: var(--hn-t-label);
  color: var(--hn-gold-soft);
  margin: 0 0 0.5rem;
}

.hena-scope .hn-gate-names {
  font-size: clamp(2rem, 8.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  color: var(--hn-ivory-hi);
  text-shadow: 0 2px 22px rgba(10, 3, 7, 0.65);
}

/* The names and the instruction are two different jobs and they were stacked
   two lines apart, competing for one block of attention. */
.hena-scope .hn-gate-sep {
  display: block;
  inline-size: 3.4rem;
  block-size: 1px;
  margin: 1.4rem auto;
  background: linear-gradient(90deg, transparent, var(--hn-gold-soft), transparent);
  opacity: 0.7;
}

.hena-scope .hn-gate-hold {
  font-size: 0.98rem;
  margin: 0;
  color: rgba(251, 240, 232, 0.86);
  animation: hn-breathe 2.8s ease-in-out infinite;
}

/* The target. There is nothing to aim at on this cover — the vine grows
   wherever the finger lands — but a screen that asks for a press and shows no
   place to press is a screen a guest waits seven seconds on. */
.hena-scope .hn-gate-ring {
  display: block;
  inline-size: 2.7rem;
  block-size: 2.7rem;
  margin: 1.6rem auto 0;
  border: 1px solid rgba(207, 174, 116, 0.42);
  border-radius: 50%;
  animation: hn-pulse 2.9s ease-in-out infinite;
}

.hena-scope .hn-gate--growing .hn-gate-hold,
.hena-scope .hn-gate--drying .hn-gate-hold {
  animation: none;
  opacity: 0.45;
}

/* Once the drawing starts, everything that was asking for it gets out of the
   way — the ring most of all, because it is a circle sitting in the middle of a
   screen where the vine is now growing somewhere else. */
.hena-scope .hn-gate--growing .hn-gate-ring,
.hena-scope .hn-gate--drying .hn-gate-ring,
.hena-scope .hn-gate--growing .hn-gate-sep,
.hena-scope .hn-gate--drying .hn-gate-sep {
  animation: none;
  opacity: 0;
  transition: opacity 320ms ease-out;
}

.hena-scope .hn-gate.is-nudged .hn-gate-hold {
  color: var(--hn-gold-soft);
  animation: none;
}

@keyframes hn-breathe {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

@keyframes hn-pulse {
  0%, 100% { transform: scale(0.84); opacity: 0.3; }
  50% { transform: scale(1); opacity: 0.85; }
}

.hena-scope .hn-gate-skip {
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 3;
  padding: 0.55rem 1.3rem;
  border: 1px solid rgba(207, 174, 116, 0.4);
  border-radius: var(--hn-r-sm);
  background: rgba(14, 5, 10, 0.5);
  color: var(--hn-gold-soft);
  font: inherit;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease-out;
}

.hena-scope .hn-gate-skip.is-shown {
  opacity: 1;
  pointer-events: auto;
}

/* The keyboard path. Off-screen until focused, then a real button. */
.hena-scope .hn-gate-a11y {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--hn-ivory-hi);
  color: var(--hn-ink);
  border: 0;
  border-radius: var(--hn-r-sm);
  padding: 0.6rem 1rem;
  font: inherit;
}

.hena-scope .hn-gate-a11y:focus-visible {
  inset-inline-start: 1rem;
  top: 1rem;
  z-index: 4;
}

/* ══ THE HERO ═══════════════════════════════════════════════════════════ */

.hena-scope .hn-reveal {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}

.hena-scope .hn-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* CENTRED, WITH THE BOTTOM PADDING NEARLY TWICE THE TOP. The names sit under
   the lit third of the photograph now rather than in the empty velvet at the
   foot of it, and the asymmetric padding is what puts them at the OPTICAL
   centre — `justify-content: center` alone reads low, because the eye takes the
   middle of a screen to be above its geometric middle. */
.hena-scope .hn-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* THE TOP PADDING IS THE LARGER ONE, and it is the whole composition. With
     `justify-content: center` the copy sits at the midpoint of the CONTENT box,
     so an unequal pair moves it: this puts the type just below the geometric
     centre, which is where this photograph's velvet is empty and its still-life
     — bowl, cones, bangles, three candles — is clear above it. It was 5/9 the
     other way, lifting the kicker onto the brightest object in the frame. */
  padding: 6.5rem var(--hn-gut) calc(5rem + env(safe-area-inset-bottom));
  text-align: center;
  overflow: hidden;
  background: var(--hn-night-deep);
}

.hena-scope .hn-hero-scene { position: absolute; inset: 0; z-index: 0; }

.hena-scope .hn-hero-clip {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The subject sits in the picture's upper third, so pull the crop up — the
     default 50% buries the bowl and shows a screen of empty cloth. */
  object-position: 50% 34%;
  display: block;
}

/* Two layers, each doing one job. The vignette closes the four corners so the
   clip stops being a rectangle; the shore is the fall that carries the picture
   into the page's own velvet, so the hero has no bottom edge at all. One flat
   gradient was doing both and could only do one well — the picture's lower half
   is ALREADY dark, and darkening it further crushed the one part of the frame
   that needed no help. */
.hena-scope .hn-hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 94% 66% at 50% 32%,
    rgba(14, 5, 10, 0) 34%,
    rgba(14, 5, 10, 0.52) 76%,
    rgba(14, 5, 10, 0.9) 100%
  );
}

.hena-scope .hn-hero-shore {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 46%;
  background: linear-gradient(
    180deg,
    rgba(22, 9, 15, 0) 0%,
    rgba(22, 9, 15, 0.7) 48%,
    var(--hn-night) 100%
  );
}

.hena-scope .hn-hero-copy { position: relative; z-index: 1; }

/* THE COPY CARRIES ITS OWN SHADOW. The brightest thing in this frame is a
   stack of polished gold bangles, and 0.83rem of antique gold on it was
   unreadable however far the scrim above was pushed — darkening the WHOLE
   frame to fix one 200px patch is throwing the photograph away to save a
   caption. A wide, very soft radial has no edge near the type, so it reads as
   the scene being darker there rather than as a plate. `z-index: -1` stays
   inside this element's own stacking context and can never rise above the
   words. Keep it even if the clip is re-cut: a hero whose legibility depends on
   where the candles happen to be breaks the next time they move. */
.hena-scope .hn-hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3rem -2.5rem;
  pointer-events: none;
  background: radial-gradient(
    ellipse 64% 58% at 50% 50%,
    rgba(12, 4, 8, 0.72),
    rgba(12, 4, 8, 0.34) 52%,
    rgba(12, 4, 8, 0) 74%
  );
}

/* Two hairlines rather than a closed box: the type is HELD without being boxed,
   and a closed rectangle over a photograph is a caption plate. */
.hena-scope .hn-hero-brace {
  display: block;
  inline-size: 5.5rem;
  block-size: 1px;
  margin: 0 auto 1.4rem;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hn-gold-soft) 28%,
    var(--hn-gold-soft) 72%,
    transparent
  );
  opacity: 0.7;
}

.hena-scope .hn-hero-brace--end { margin: 1.7rem auto 0; }

.hena-scope .hn-hero-kicker {
  font-size: var(--hn-t-label);
  color: var(--hn-gold-soft);
  margin: 0;
}

.hena-scope .hn-hero-names {
  font-size: var(--hn-t-display);
  font-weight: 700;
  line-height: 1.35;
  color: var(--hn-ivory-hi);
  margin: 0.45rem 0 0;
  text-shadow: 0 3px 26px rgba(10, 3, 7, 0.6);
}

.hena-scope .hn-hero-tag {
  font-size: 1rem;
  color: var(--hn-on-night-soft);
  margin: 0.7rem auto 0;
  max-width: 24rem;
}

/* THE CUE IS THE FIRST STROKE OF THE VINE. It was a word that breathed, on its
   own, at the bottom of the screen. It is a hairline with a bead running down
   it now, standing exactly where the interior's first link stands — so the line
   the guest drew on the cover appears to carry on down the page.

   Absolute, NOT `margin-top: auto` — an auto margin on the last flex child eats
   all the free space and beats `justify-content`. */
.hena-scope .hn-hero-cue {
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  bottom: calc(1.4rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.hena-scope .hn-hero-cue-word {
  font-size: 0.8rem;
  color: var(--hn-on-night-soft);
}

.hena-scope .hn-hero-cue-rail {
  position: relative;
  inline-size: 1px;
  block-size: 3.4rem;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(176, 138, 74, 0.42), rgba(176, 138, 74, 0));
}

.hena-scope .hn-hero-cue-bead {
  position: absolute;
  /* Centred on a 1px rail: half the bead either side. `left`, not a logical
     property — this is a hairline's own centre line and it does not flip. */
  left: -1.5px;
  top: 0;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--hn-gold-soft);
  animation: hn-bead 2.9s ease-in-out infinite;
}

@keyframes hn-bead {
  0% { transform: translateY(-5px); opacity: 0; }
  22% { opacity: 1; }
  72% { opacity: 1; }
  100% { transform: translateY(3.4rem); opacity: 0; }
}

/* ══ THE INTERIOR ═══════════════════════════════════════════════════════ */

.hena-scope .hn-body {
  position: relative;
  padding-bottom: 2rem;
}

/* THREE CANDLES DOWN THE SCROLL. The interior was one flat wash from the hero
   to the closing — seven screens of exactly the same value, which is what made
   a long page read as a list however well each section was set. Three soft
   pools of warmth give the scroll a middle, and they cost one absolutely
   positioned element with no image in it.

   NOT `background-attachment: fixed`: a viewport-anchored radial that follows
   the guest down the page is a torch, and this is a room with candles standing
   in it. */
.hena-scope .hn-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 20% at 50% 14%, rgba(176, 138, 74, 0.11), rgba(176, 138, 74, 0) 70%),
    radial-gradient(ellipse 88% 17% at 50% 51%, rgba(156, 101, 63, 0.11), rgba(156, 101, 63, 0) 72%),
    radial-gradient(ellipse 78% 19% at 50% 87%, rgba(176, 138, 74, 0.09), rgba(176, 138, 74, 0) 70%);
}

/* NO MARGIN. Every gap on this page belongs to the vine standing in it — see
   `.hn-lk` below — and a section that also carried its own vertical rhythm
   would be adding a second, invisible spacing system on top of a visible one. */
.hena-scope .hn-sec {
  padding: 0 var(--hn-gut);
  margin-block: 0;
}

.hena-scope .hn-inner { max-width: var(--hn-col); margin-inline: auto; }
.hena-scope .hn-inner--wide { max-width: var(--hn-col-wide); }

/* ── the vine between two sections ─────────────────────────────────────
   `.hn-lk` is ITSELF the `.hn-reveal` element, so the three properties below
   cancel the page's default reveal on it. What arrives here is not a block
   sliding up — it is a line being drawn, and a line that slides while it draws
   reads as a glitch. */
.hena-scope .hn-lk {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: var(--hn-beat);
  opacity: 1;
  transform: none;
  transition: none;
}

/* THE NEGATIVE MARGIN IS NOT COSMETIC. Each lobe is a separate <svg> sized in
   CSS, so its rendered height is a fraction of the viewport width and lands on
   a fractional pixel at most widths. Stacked flush, consecutive lobes leave a
   sub-pixel gap that shows as a dotted line down the page at exactly the widths
   nobody tests. A pixel of overlap closes it, and the stems are tangent-vertical
   at both ends so nothing kinks. */
.hena-scope .hn-lk-seg {
  display: block;
  inline-size: var(--hn-trail-w);
  block-size: auto;
  margin-block: -1px;
  overflow: visible;
}

/* Every other lobe, so a run reads as a plant and not as a repeat. The segment's
   two ends are both on its own centre line, which is what lets a mirrored copy
   join up at any length. */
.hena-scope .hn-lk-seg.is-flip { transform: scaleX(-1); }

/* DRIED HENNA, NOT GOLD: the line the guest drew on the cover dries from olive
   to copper and this is that line continuing. Copper is 4.0:1 on the night —
   below the floor for a caption, fine for a 1.3px drawn line — and the gold
   leaves are what carry the figure at arm's length. */
.hena-scope .hn-lk-stem {
  fill: none;
  stroke: var(--hn-copper);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.9;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1150ms cubic-bezier(0.35, 0, 0.25, 1);
  transition-delay: calc(var(--k, 0) * 620ms);
}

.hena-scope .hn-lk.is-visible .hn-lk-stem { stroke-dashoffset: 0; }

/* `--k` is set on the <svg> and `--n` on each ornament, and custom properties
   inherit — so one calc gives every leaf on every lobe its own place in the
   sequence, and the drawing fills in BEHIND the line rather than arriving with
   it. A vine whose leaves appear at the same instant as its stem is a stamp
   that faded in. */
.hena-scope .hn-lk-leaf,
.hena-scope .hn-lk-seed {
  opacity: 0;
  transition: opacity 700ms ease-out;
  transition-delay: calc(var(--k, 0) * 620ms + var(--n, 0) * 120ms + 340ms);
}

.hena-scope .hn-lk-leaf { fill: var(--hn-gold); }
.hena-scope .hn-lk-seed { fill: var(--hn-gold-soft); }

.hena-scope .hn-lk.is-visible .hn-lk-leaf { opacity: 0.62; }
.hena-scope .hn-lk.is-visible .hn-lk-seed { opacity: 0.75; }

/* ── a heading. The mark is the page's own boteh at its smallest — the same
   drawing the links and the seal are built from — and it draws itself the way
   everything else here does. ── */
.hena-scope .hn-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 2rem;
}

.hena-scope .hn-node {
  display: block;
  inline-size: 1.4rem;
  block-size: auto;
  overflow: visible;
}

.hena-scope .hn-node-out,
.hena-scope .hn-node-in {
  fill: none;
  stroke: var(--hn-gold);
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms ease-out;
}

.hena-scope .hn-node-out { stroke-width: 3.2; opacity: 0.95; }
.hena-scope .hn-node-in { stroke-width: 2.4; opacity: 0.4; transition-delay: 200ms; }

.hena-scope .hn-reveal.is-visible .hn-node-out,
.hena-scope .hn-reveal.is-visible .hn-node-in { stroke-dashoffset: 0; }

/* THE DISPLAY FACE — the single biggest change to the page's voice. Every
   heading was Vazirmatn 300, the same face and nearly the same size as the body
   under it, so eight movements read as eight paragraphs with bold first lines.
   Aref Ruqaa is the face the couple's own names are set in. */
.hena-scope .hn-h2 {
  font-size: var(--hn-t-head);
  font-weight: 700;
  line-height: 1.55;
  color: var(--hn-gold-soft);
  margin: 0;
  text-align: center;
}

.hena-scope .hn-lede {
  text-align: center;
  color: var(--hn-on-night-soft);
  font-size: 0.98rem;
  margin: -1rem 0 1.7rem;
}

/* ── the invitation leaf ───────────────────────────────────────────────
   THE DOME IS A PERCENTAGE RADIUS, not a clip-path and not an image. Both radii
   are proportions of the card's own box, so the head keeps its curve at 320px
   and at 480px and through every length of Kurdish the couple writes — a fixed
   rise looks like an arch on a short card and like a hinge on a long one. */
.hena-scope .hn-leaf {
  position: relative;
  max-inline-size: 24rem;
  margin-inline: auto;
  padding: 5.2rem 1.9rem 4rem;
  text-align: center;
  color: var(--hn-ink);
  background-color: var(--hn-ivory-hi);
  /* Paper tooth. An feTurbulence tile inlined as a data URI — about 240 bytes,
     no request, and it is the whole difference between ivory paper and an ivory
     rectangle. Kept far under a tenth of an opacity: grain you can SEE is a
     texture, and grain you cannot quite see is paper. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 140px 140px;
  border-radius: 47% 47% var(--hn-r) var(--hn-r) / 15% 15% var(--hn-r) var(--hn-r);
  /* Lifted off the cloth with a real shadow — a card lying on velvet casts one,
     and it is what stops it reading as a hole cut in the page. */
  box-shadow:
    0 1px 0 rgba(176, 138, 74, 0.3),
    0 34px 66px -30px rgba(0, 0, 0, 0.92);
}

/* The keyline, following the head. In henna rather than gold: on paper gold is
   2.0:1, and this is a line you are meant to see. */
.hena-scope .hn-leaf::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(156, 101, 63, 0.26);
  border-radius: 46% 46% 5px 5px / 14% 14% 5px 5px;
  pointer-events: none;
}

/* The crown, sitting IN the dome — which is what the 5.2rem of head padding is
   for. Drawn (shared/Ornament): it was a cut-out photograph of petals for one
   day and it read as a sticker even where the blend behaved.

   HENNA-DEEP, NOT GOLD. This sits on ivory and the contrast rule inverts with
   the ground — gold on this paper is 2.0:1, copper-deep is 6.0:1. The single
   easiest thing in this template to get backwards. */
.hena-scope .hn-leaf-mark {
  display: block;
  inline-size: 104px;
  block-size: auto;
  margin: 0 auto 1.4rem;
  color: var(--hn-copper-deep);
}

.hena-scope .hn-bismillah {
  font-size: 0.9rem;
  color: var(--hn-gold-deep);
  margin: 0 0 1.4rem;
}

/* The verse, and the one rule inside the leaf. Set BELOW the verse rather than
   between the verse and the names, because it is closing a thought rather than
   opening one. */
.hena-scope .hn-verse {
  position: relative;
  font-size: 1.12rem;
  line-height: 2.1;
  color: var(--hn-copper-deep);
  margin: 0 0 2.1rem;
}

.hena-scope .hn-verse::after {
  content: "";
  display: block;
  inline-size: 3.4rem;
  block-size: 1px;
  margin: 1.5rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(156, 101, 63, 0.55), transparent);
}

.hena-scope .hn-leaf-kicker {
  font-size: var(--hn-t-micro);
  color: var(--hn-ink-soft);
  margin: 0;
}

.hena-scope .hn-leaf-names {
  font-size: clamp(1.85rem, 8.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--hn-copper-deep);
  margin: 0.4rem 0 0.2rem;
}

.hena-scope .hn-invite {
  margin: 1.6rem 0 0;
  color: var(--hn-ink);
  font-size: 1rem;
  line-height: 1.95;
}

/* Ruled between, not merely spaced apart. Two families on an invitation are a
   list of two things, and a gap alone does not say so. */
.hena-scope .hn-hosts {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
}

.hena-scope .hn-host + .hn-host {
  margin-block-start: 1.15rem;
  padding-block-start: 1.15rem;
  border-block-start: 1px solid rgba(156, 101, 63, 0.16);
}

.hena-scope .hn-host-lbl {
  display: block;
  font-size: var(--hn-t-micro);
  color: var(--hn-ink-soft);
  margin-block-end: 0.15rem;
}

.hena-scope .hn-host-name {
  display: block;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--hn-copper-deep);
}

.hena-scope .hn-host-name--solo { margin: 2rem 0 0; }

/* The seal. A disc of henna straddling the foot of the leaf — the one object on
   the page that is pressed rather than printed, and the reason this card needs
   no ribbon and no second keyline to read as stationery. The disc is CSS; only
   the boteh in it is drawn. */
.hena-scope .hn-seal {
  position: absolute;
  inset-block-end: -1.4rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #a86d45, var(--hn-copper-deep) 58%, #57331d);
  box-shadow:
    0 0 0 1px rgba(176, 138, 74, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.16),
    0 10px 18px -9px rgba(0, 0, 0, 0.88);
}

.hena-scope .hn-seal-art {
  inline-size: 0.95rem;
  block-size: auto;
  fill: rgba(248, 240, 224, 0.7);
}

/* ── the evening's order ───────────────────────────────────────────────
   A RULED MANUSCRIPT COLUMN. It was a centred rail with a lozenge node per row
   — darga's geometry — and that cannot survive this redesign for one reason:
   the PAGE has a line now, between every pair of sections, and a second
   vertical rail inside one of them is two answers to one question a foot apart.

   The mechanic is unchanged: shared/Timeline still drives `.is-on` per row and
   `--prog-p` for the fill, and it is still REVERSIBLE on the way back up, which
   is the whole reason it is worth doing rather than a one-shot reveal. */
.hena-scope .hn-prog-wrap { padding: 0; }

.hena-scope .hn-prog {
  position: relative;
  max-inline-size: 24rem;
  margin: 0 auto;
  padding: 0;
  padding-inline-start: 1.3rem;
  list-style: none;
}

/* THE RULE. It fades out at both ends rather than stopping on a measured inset:
   rows are not a fixed height once a title wraps, so any rem value that lines up
   with the first and last tick at one width is wrong at another. */
.hena-scope .hn-prog::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  background: linear-gradient(
    to bottom,
    rgba(176, 138, 74, 0),
    var(--hn-line-hair) 8%,
    var(--hn-line-hair) 92%,
    rgba(176, 138, 74, 0)
  );
}

/* DRIVEN BY THE SCROLL: `--prog-p` is how far the reading line has travelled
   between the first row and the last, set every frame by shared/Timeline.
   `transform` only, so it never costs layout however fast the guest flicks. */
.hena-scope .hn-prog::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  background: linear-gradient(to bottom, rgba(176, 138, 74, 0), var(--hn-gold) 8%, var(--hn-gold-soft));
  transform: scaleY(var(--prog-p, 0));
  transform-origin: top;
}

/* `--i` is the row's index, set inline by Timeline — no CSS counter multiplies
   into a delay. `baseline` rather than centre: the hour is set larger than the
   entry beside it, and two type sizes centred on each other in a two-column row
   is the one alignment the eye reads as an accident. */
.hena-scope .hn-prog-row {
  position: relative;
  display: grid;
  /* `auto`, NOT A FIXED WIDTH. A grid `auto` track sizes to the widest cell in
     the COLUMN, so every hour lines up without anyone measuring one — and a
     formatted time here is not "7:00", it is "7:00" plus the word for evening
     (lib/format), which wrapped to two lines inside the 3.4rem this started
     as. The dialects disagree on that word's length, so there is no number
     that is right for both. */
  grid-template-columns: auto 1fr;
  column-gap: 1.1rem;
  align-items: baseline;
  padding-block: 1.15rem;
  transition-delay: calc(var(--i, 0) * 80ms);
}

.hena-scope .hn-prog-row + .hn-prog-row {
  border-block-start: 1px solid var(--hn-line-hair);
}

/* The tick off the rule, growing outward as its hour is reached. `inline-size`
   grows from the `inset-inline-start` edge, so it runs from the rule INTO the
   column in both directions of writing. */
.hena-scope .hn-prog-row::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.3rem;
  inset-block-start: 1.7rem;
  inline-size: 0.5rem;
  block-size: 1px;
  background: var(--hn-line-soft);
  transition: background-color 420ms ease, inline-size 420ms ease;
}

.hena-scope .hn-prog-row.is-on::before {
  inline-size: 0.9rem;
  background: var(--hn-gold-soft);
}

/* THE HOUR IS THE THING THAT LIGHTS, and it is set at body size for the first
   time — it was 0.88rem in a colour one step off the title's, which is a
   timetable, on the one fact a guest actually scans for.

   NO `direction: ltr`: with the element forced to ltr, `text-align: start`
   resolves to its LEFT edge, which in an RTL grid is the column's far side, and
   the hour drifts away from its own row. darga sets neither, on the same
   dictionary and the same formatTime output, and reads correctly. */
.hena-scope .hn-prog-time {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--hn-gold);
  opacity: 0.55;
  text-align: start;
  font-variant-numeric: tabular-nums lining-nums;
  transition: color 420ms ease, opacity 420ms ease;
}

.hena-scope .hn-prog-row.is-on .hn-prog-time {
  color: var(--hn-gold-soft);
  opacity: 1;
}

.hena-scope .hn-prog-title {
  text-align: start;
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--hn-on-night-soft);
  overflow-wrap: break-word;
  transition: color 420ms ease;
}

.hena-scope .hn-prog-row.is-on .hn-prog-title { color: var(--hn-on-night); }

/* ── the night itself: a medallion ─────────────────────────────────────
   A month grid stood here, then a frameless glow, then darga's bound desk
   calendar. HenaDate carries the argument for why the calendar had to go. The
   ring is drawn out of the same boteh as the page's nodes and the leaf's seal
   (hena/marks.js), so it belongs to the design rather than being one more
   object with a vocabulary of its own. */
.hena-scope .hn-date { text-align: center; }

/* `aspect-ratio: 1` and `place-items: center`, so the ring and the type share
   one grid cell rather than one containing the other. A long Kurdish weekday
   cannot then push the ring out of round, and the ring cannot clip the type. */
.hena-scope .hn-date-ring {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: min(84vw, 19.5rem);
  aspect-ratio: 1;
  margin-inline: auto;
}

.hena-scope .hn-date-med {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.hena-scope .hn-med-ring {
  fill: none;
  stroke: var(--hn-line-soft);
  stroke-width: 0.7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.35, 0, 0.25, 1);
}

.hena-scope .hn-med-ring--in { transition-delay: 260ms; }

.hena-scope .hn-reveal.is-visible .hn-med-ring { stroke-dashoffset: 0; }

.hena-scope .hn-med-boteh {
  fill: none;
  stroke: var(--hn-gold);
  stroke-width: 3.2;
  stroke-linejoin: round;
}

.hena-scope .hn-med-boteh,
.hena-scope .hn-med-seed {
  opacity: 0;
  transition: opacity 620ms ease-out;
  transition-delay: calc(var(--n, 0) * 70ms + 420ms);
}

.hena-scope .hn-med-seed { fill: var(--hn-gold-soft); }

.hena-scope .hn-reveal.is-visible .hn-med-boteh { opacity: 0.82; }
.hena-scope .hn-reveal.is-visible .hn-med-seed { opacity: 0.5; }

/* The clear middle. Held to 62% of the ring so nothing can ever touch the band,
   whatever the dialect makes of a weekday. */
.hena-scope .hn-date-face {
  position: relative;
  z-index: 1;
  max-inline-size: 62%;
}

.hena-scope .hn-date-wd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hn-on-night-soft);
}

/* THE DAY. Vazirmatn, NOT the display face — Aref Ruqaa's numerals fall apart
   at this size. IVORY, not gold: on a dark page ivory is the ink, and the
   numeral is the one thing in this block that is a fact rather than an
   ornament. line-height under 1 because a numeral has no descender and 1 left a
   band of nothing under it. */
.hena-scope .hn-date-num {
  margin: 0.1rem 0 0.15rem;
  font-family: var(--font-vazir), system-ui, sans-serif;
  font-size: clamp(3.2rem, 16vw, 4.3rem);
  font-weight: 200;
  line-height: 0.98;
  color: var(--hn-ivory-hi);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 0 34px rgba(176, 138, 74, 0.26);

  /* The whole animation in this section. See the reduced-motion block. */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.85s ease-out 0.1s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.hena-scope .hn-reveal.is-visible .hn-date-num {
  opacity: 1;
  transform: none;
}

.hena-scope .hn-date-moy {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--hn-gold-soft);
}

.hena-scope .hn-date-year {
  /* A word space is not enough between a script face and a run of lining
     numerals — they sit on different rhythms and the year reads as attached.
     Logical, so the air stays BEFORE the year whichever way the page runs. */
  margin-inline-start: 0.4rem;
  font-family: var(--font-vazir), system-ui, sans-serif;
  font-size: 0.82em;
  font-weight: 400;
  color: var(--hn-gold);
  font-variant-numeric: lining-nums tabular-nums;
}

.hena-scope .hn-date-time {
  margin: 1.6rem 0 1.5rem;
  font-size: 1.02rem;
  color: var(--hn-on-night);
  font-variant-numeric: lining-nums tabular-nums;
}

/* The clock face itself, inside the sentence around it. */
.hena-scope .hn-date-clock {
  color: var(--hn-gold-soft);
  font-weight: 600;
}

/* ══ THE CONTROLS ═══════════════════════════════════════════════════════

   THE PILL IS GONE. A chip is a small engraved plate: a 4px corner, a gold
   keyline and a second hairline 3px inside it — the invitation leaf's double
   keyline at a twentieth of the size.

   IT IS STILL 46px TALL. Small is a VISUAL property here and not a hit-target
   one: shrinking the target is how a design like this stops working for the
   grandmother trying to ring the number, and the padding is what gives it
   back. */

.hena-scope .hn-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.hena-scope .hn-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.6rem 1.35rem;
  border: 1px solid var(--hn-line);
  border-radius: var(--hn-r-sm);
  color: var(--hn-gold-soft);
  background: rgba(42, 16, 26, 0.5);
  text-decoration: none;
  font-size: 0.94rem;
  /* A <button> may also wear this class — the add-to-calendar control is a
     button on Apple devices, because it builds the .ics locally rather than
     navigating. Without these three a button renders in the UA's own font at
     the UA's own size and does not match the links beside it. */
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  transition: border-color 300ms ease, background-color 300ms ease;
}

.hena-scope .hn-chip::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(176, 138, 74, 0.16);
  border-radius: 2px;
  pointer-events: none;
}

.hena-scope .hn-chip:hover {
  border-color: var(--hn-gold);
  background: rgba(58, 24, 34, 0.68);
}

/* FILLED, and there are exactly three of these in the interior: add the date,
   ring the number, and the RSVP's submit. Each is the one thing to press in its
   own section, and nothing else on the page is a solid colour.

   Copper-DEEP, not copper: ivory on the deep is 6.52:1 and on the plain copper
   only 4.26:1, and these labels are small. */
.hena-scope .hn-chip--fill {
  border-color: transparent;
  background: var(--hn-copper-deep);
  color: var(--hn-ivory-hi);
  font-weight: 600;
  box-shadow: 0 14px 26px -18px rgba(0, 0, 0, 0.9);
  transition: transform 0.15s ease-out, background-color 300ms ease;
}

.hena-scope .hn-chip--fill::before { border-color: rgba(248, 240, 224, 0.2); }
.hena-scope .hn-chip--fill:hover { border-color: transparent; background: var(--hn-copper); }
.hena-scope .hn-chip--fill:active { transform: translateY(1px); }

/* The chip's mark. A row of centred Kurdish text with two more bits of centred
   Kurdish text in plates is not obviously two things to press; the glyph is
   what says "open", so the label can shorten to the destination. */
.hena-scope .hn-chip-ico {
  display: inline-grid;
  place-items: center;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin-inline-end: 0.45rem;
  flex: none;
}

.hena-scope .hn-chip-ico svg {
  inline-size: 100%;
  block-size: 100%;
}

/* ── where it is ──────────────────────────────────────────────────────── */

.hena-scope .hn-venue { text-align: center; }

/* The hall's name is a NAME, so it is set in the face this template sets names
   in. It was Vazirmatn at 300 and read as a subheading of the section above it.
   The shared VenueBlock renders a bare <p>, so the face is applied here rather
   than by a class on the markup. */
.hena-scope .hn-venue-name {
  font-family: var(--font-script), var(--font-vazir), serif;
  font-size: clamp(1.5rem, 6.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--hn-ivory-hi);
  margin: 0 0 0.4rem;
}

.hena-scope .hn-venue-addr {
  color: var(--hn-on-night-soft);
  font-size: 0.98rem;
  margin: 0 0 1.5rem;
}

/* ── the map, behind a tap ─────────────────────────────────────────────
   A WINDOW ONTO THE TABLE, made of the silk photograph rather than a gradient.
   Two earlier shapes are worth not repeating: a large empty box with a pin in
   it, which is what a tile server looks like when it FAILS, and a 66px control
   bar, which reads as a toolbar.

   THE EMBED STAYS BEHIND A TAP AND THAT IS NOT NEGOTIABLE — an invitation's URL
   is a secret and a Google iframe hands it over as a Referer the moment it
   loads. See shared/VenueBlock. */
.hena-scope .hn-map {
  position: relative;
  margin-block-start: 1.5rem;
  border: 1px solid var(--hn-line-soft);
  border-radius: var(--hn-r);
  overflow: hidden;
  background: var(--hn-night-deep);
}

/* NO aspect-ratio ON THE CONTAINER. The two states want different heights — the
   window is a band, the live map wants a map's proportion — so each child sets
   its own and neither inherits a compromise. */
.hena-scope .hn-map-frame {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  border: 0;
}

.hena-scope .hn-map-hit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  inline-size: 100%;
  padding: 2.6rem 1.25rem;
  border: 0;
  background-color: var(--hn-night-deep);
  background-image:
    radial-gradient(ellipse 62% 72% at 50% 44%, rgba(176, 138, 74, 0.2), rgba(16, 6, 11, 0.78) 70%),
    url("/media/hena/silk.webp");
  background-size: cover, cover;
  background-position: center, center;
  color: var(--hn-gold-soft);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

/* The leaf's keyline, at the other end of the page: stationery rather than UI,
   and the thing that stops a wide window reading as a panel. */
.hena-scope .hn-map-hit::before {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border: 1px solid rgba(176, 138, 74, 0.22);
  border-radius: 3px;
  pointer-events: none;
}

/* The pin: three round corners and one square, turned 45 degrees, so the square
   corner becomes the point. THE HOLE IS WHAT MAKES IT A PIN — solid, at this
   size, it is a gold balloon, confirmed on the render. The radial punches the
   eye out in the element's own local space, which the rotation cannot disturb
   because a circle is the same shape at every angle. */
.hena-scope .hn-map-pin {
  position: relative;
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background:
    radial-gradient(circle at 50% 50%, var(--hn-night-deep) 0 26%, rgba(0, 0, 0, 0) 27%),
    linear-gradient(135deg, var(--hn-gold-soft), var(--hn-gold));
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.7);
}

/* One ring leaving the pin — the only movement on the window, and the thing
   that says this is WAITING for a tap rather than failing to load. The parent
   is rotated; a circle does not care. */
.hena-scope .hn-map-pin::after {
  content: "";
  position: absolute;
  inset: -0.9rem;
  border: 1px solid rgba(176, 138, 74, 0.55);
  border-radius: 50%;
  animation: hn-ping 3s ease-out infinite;
}

@keyframes hn-ping {
  0% { transform: scale(0.45); opacity: 0.85; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

/* The label wears the chip's plate rather than a pill, so the one control on
   the window belongs to the same set as the two under it. Outlined, not filled:
   the window is already the emphasis in this section. */
.hena-scope .hn-map-lbl {
  position: relative;
  padding: 0.5rem 1.15rem;
  border: 1px solid rgba(176, 138, 74, 0.45);
  border-radius: var(--hn-r-sm);
  background: rgba(20, 8, 13, 0.55);
  color: var(--hn-gold-soft);
}

/* ── a few words before the night. THEY ARE NUMBERED: a note that is one of
   three reads differently from a note that is floating, and the lozenge that
   used to sit here was the page's smallest ornament doing the job of an index.
   The counter is CSS and the markup is an <ol>, which is what it is. ── */
.hena-scope .hn-notes {
  counter-reset: hn-note;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: start;
}

.hena-scope .hn-note {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  column-gap: 0.95rem;
  align-items: baseline;
  padding-block: 1.15rem;
  transition-delay: calc(var(--i, 0) * 70ms);
}

.hena-scope .hn-note + .hn-note {
  border-block-start: 1px solid var(--hn-line-hair);
}

/* A grid ITEM, not a decoration hanging off the side: the pseudo-element of a
   grid container is itself placed in the grid, so the numeral gets a real
   column and a wrapped note stays hung on it at every width. */
.hena-scope .hn-note::before {
  counter-increment: hn-note;
  content: counter(hn-note);
  font-family: var(--font-vazir), system-ui, sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--hn-gold);
  opacity: 0.72;
  text-align: end;
}

.hena-scope .hn-note-txt {
  color: var(--hn-on-night);
  line-height: 1.9;
}

/* ── who to ask ────────────────────────────────────────────────────────
   A name, what they are to the couple, and the number as the one thing you can
   press. The gold rule that used to sit between the role and the number is gone
   — the whole page is ruled far more quietly now, and a 4.5rem gradient rule
   under two lines of text was the loudest hairline left in the interior. */
.hena-scope .hn-contact { text-align: center; }

.hena-scope .hn-contact-name {
  display: block;
  font-size: clamp(1.45rem, 6.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--hn-ivory-hi);
}

.hena-scope .hn-contact-role {
  margin: 0.35rem 0 1.5rem;
  font-size: 0.92rem;
  color: var(--hn-on-night-soft);
}

/* ── the gallery ───────────────────────────────────────────────────────
   Behaviour is shared (components/templates/shared/Slider.js); everything below
   is this template's own look. */

.hena-scope .hn-slides {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding: 0 0 0.35rem;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hena-scope .hn-slides::-webkit-scrollbar { display: none; }

/* The centring spacers are FLEX ITEMS, not padding on the track. With
   border-box sizing the track's padding comes off the width before a slide's
   percentage basis resolves against it, so 11% padding and a 78% slide gave a
   213px slide in a 350px track — solving the two together wants 50% padding. As
   items they share one basis: 78 + 11 + 11 = 100. */
.hena-scope .hn-slides::before,
.hena-scope .hn-slides::after {
  content: "";
  flex: 0 0 11%;
}

.hena-scope .hn-slide {
  flex: 0 0 78%;
  scroll-snap-align: center;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}

.hena-scope .hn-reveal.is-visible .hn-slide { opacity: 1; transform: none; }

/* A GILT FRAME, not a burgundy mount. The photograph sat inside a burgundy
   border with a keyline on top of it — a dark band around a dark picture on a
   dark page, three values within a few percent of each other, so the frame did
   nothing but eat 8px. The mat is the gold itself now.

   The neighbours sit back and dim, so the centred one is told where it is
   without a caption — TRANSFORM AND OPACITY ONLY, so a flick never triggers
   layout. */
.hena-scope .hn-slide-btn {
  display: block;
  inline-size: 100%;
  padding: 0.3rem;
  border: 0;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(155deg, rgba(207, 174, 116, 0.85), rgba(122, 74, 43, 0.9) 62%, rgba(176, 138, 74, 0.7));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: scale(0.9);
  opacity: 0.42;
  box-shadow: 0 26px 46px -26px rgba(0, 0, 0, 0.95);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease-out;
}

.hena-scope .hn-slide.is-active .hn-slide-btn { transform: scale(1); opacity: 1; }

.hena-scope .hn-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1px;
  background: var(--hn-night-deep);
}

.hena-scope .hn-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
}

/* TICKS, NOT LOZENGES, and the change is not only taste. `.hn-dot` is ALSO
   every berry on the gate's vine — HenaGate renders <circle className="hn-dot">
   — and the old rule set `rotate: 45deg`, which the scoping below is the only
   thing that kept off forty berries on the opening. Scoped it stays; a bare
   `.hn-dot` rule in this file is a bug waiting for whoever writes the next one.

   The active tick GROWS rather than scaling: a page indicator that changes size
   under a photograph is the one place a 2px element can afford to be measured
   rather than transformed. */
.hena-scope .hn-dots .hn-dot {
  inline-size: 14px;
  block-size: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(176, 138, 74, 0.3);
  cursor: pointer;
  transition: background-color 0.3s ease-out, inline-size 0.3s ease-out;
}

.hena-scope .hn-dots .hn-dot.is-on {
  inline-size: 26px;
  background: var(--hn-gold-soft);
}

/* ---- no photographs yet -------------------------------------------------
   A host on the gallery package who has not uploaded anything used to get the
   heading and then nothing at all. An elegant empty state is the difference
   between "there will be pictures here" and a section that looks broken. */
.hena-scope .hn-gallery-empty {
  display: grid;
  justify-items: center;
  gap: 1.05rem;
  padding: 2.4rem 1.2rem 2.2rem;
  text-align: center;
}

.hena-scope .hn-gallery-empty-mark {
  display: block;
  inline-size: 3.8rem;
  block-size: auto;
  color: var(--hn-gold);
  opacity: 0.62;
}

.hena-scope .hn-gallery-empty-msg {
  margin: 0;
  max-inline-size: 17rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--hn-on-night-soft);
}

.hena-scope .hn-gallery-hint {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--hn-on-night-soft);
}

/* The viewer. Portalled to .hena-scope so these custom properties resolve. */
.hena-scope .hn-lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hena-scope .hn-lb-veil {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(12, 5, 9, 0.94);
  cursor: zoom-out;
}

.hena-scope .hn-lb-bar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(0.9rem + env(safe-area-inset-top)) 1rem 0.9rem;
}

/* SIZE THE BOX, AND SIZE THE GLYPH INSIDE IT SEPARATELY. These were
   `min-width/min-height` with no size on the chevron, and an SVG with no
   dimensions takes its own aspect from the viewBox — the arrows measured 48x81,
   a tall lozenge rather than a button. A fixed box with `place-items: center`
   and an explicitly sized glyph is the whole fix. */
.hena-scope .hn-lb-x {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--hn-line-soft);
  border-radius: var(--hn-r-sm);
  background: rgba(42, 16, 26, 0.62);
  color: var(--hn-gold-soft);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

/* `1 / 4` renders as `4 / 1` in an RTL page — bidi reorders the numbers around
   the slash, so the DOM text is right and the screen is wrong. Only a
   screenshot catches it. */
.hena-scope .hn-lb-count {
  color: var(--hn-gold-soft);
  font-size: 0.9rem;
  direction: ltr;
  unicode-bidi: isolate;
}

.hena-scope .hn-lb-img {
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: 78svh;
  object-fit: contain;
  border-radius: 3px;
}

.hena-scope .hn-lb-nav {
  position: absolute;
  inset-inline: 0;
  bottom: calc(1.4rem + env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.hena-scope .hn-lb-arrow {
  display: grid;
  place-items: center;
  /* 2.75rem = 44px, the touch-target floor, and no larger. */
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid var(--hn-line-soft);
  border-radius: var(--hn-r-sm);
  background: rgba(42, 16, 26, 0.62);
  color: var(--hn-gold-soft);
  font: inherit;
  cursor: pointer;
}

.hena-scope .hn-lb-arrow svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
}

.hena-scope .hn-lb-arrow:disabled { opacity: 0.35; cursor: default; }

/* ══ HELD AT THE CORNERS ════════════════════════════════════════════════

   The countdown cells, the wishes, the RSVP card and the guest album. It is the
   page's one panel treatment: the invitation leaf is the ONLY closed shape left
   in the interior, and it is closed because it is the document.

   Eight background gradients per object rather than a border, so the two
   pseudo-elements each of these has stay free for what they actually need.
   `left`/`right` are physical here and that is correct — four corners are
   symmetric, so there is nothing for direction to flip. */
.hena-scope .hn-cd-unit,
.hena-scope .hn-wish,
.hena-scope .hn-rsvp,
.hena-scope .ah-album {
  background-image:
    linear-gradient(var(--hn-br), var(--hn-br)), linear-gradient(var(--hn-br), var(--hn-br)),
    linear-gradient(var(--hn-br), var(--hn-br)), linear-gradient(var(--hn-br), var(--hn-br)),
    linear-gradient(var(--hn-br), var(--hn-br)), linear-gradient(var(--hn-br), var(--hn-br)),
    linear-gradient(var(--hn-br), var(--hn-br)), linear-gradient(var(--hn-br), var(--hn-br));
  background-repeat: no-repeat;
  background-size:
    12px 1px, 1px 12px, 12px 1px, 1px 12px,
    12px 1px, 1px 12px, 12px 1px, 1px 12px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
}

/* ══ THE COUNTDOWN ══════════════════════════════════════════════════════

   STILL FOUR CELLS, and deliberately: darga un-boxed its countdown on
   2026-08-22 and the founder reverted it the same day. Four numbers that each
   mean a different unit want four edges. What changed is what the edge is MADE
   of, and that the fill is now the whole cell rising rather than a 2px
   underline. `--f` is set inline by the shared component, and what the browser
   animates is a transform on a pseudo-element, never a layout. */
.hena-scope .hn-cd {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
}

.hena-scope .hn-cd-unit {
  position: relative;
  overflow: hidden;
  padding: 1.3rem 0.2rem 1.2rem;
  text-align: center;
  background-color: rgba(42, 16, 26, 0.42);
}

.hena-scope .hn-cd-unit::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: 100%;
  background: linear-gradient(to top, rgba(176, 138, 74, 0.24), rgba(176, 138, 74, 0));
  transform: scaleY(var(--f, 0));
  transform-origin: bottom;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

/* IVORY, NOT GOLD. The numeral is the fact and the label is the note; when both
   were gold the cell had no hierarchy in it and read as one gold smudge at
   arm's length. Above the fill, or the rising warmth would wash over it. */
.hena-scope .hn-cd-num {
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(1.6rem, 7vw, 2rem);
  font-weight: 200;
  line-height: 1.2;
  color: var(--hn-ivory-hi);
  font-variant-numeric: lining-nums tabular-nums;
}

.hena-scope .hn-cd-lbl {
  position: relative;
  z-index: 1;
  display: block;
  margin-block-start: 0.15rem;
  font-size: 0.72rem;
  color: var(--hn-gold);
}

.hena-scope .hn-arrived {
  text-align: center;
  font-size: 1.15rem;
  color: var(--hn-gold-soft);
}

/* ══ THE REPLY ══════════════════════════════════════════════════════════

   NOTHING INSIDE THE FORM IS RESTYLED but the two heights below: it is the
   shared RsvpForm, and restyling it from here is the fastest way to break its
   accessibility and its duplicate-submit guard. What it gets is a surface —
   corner brackets, the page's warm glow behind it, and enough padding to read
   as the answer to the invitation rather than as a form dropped on velvet. */
.hena-scope .hn-rsvp {
  position: relative;
  margin-top: 0.5rem;
  padding: 1.6rem 1.2rem 1.4rem;
  background-color: rgba(42, 16, 26, 0.42);
  text-align: start;
}

/* TWO EXCEPTIONS, both height: the yes/no pair comes in at 42px and the stepper
   at 36px, under the 44px touch minimum. Selected by ARIA, not by utility
   class, so a Tailwind change cannot silently unmatch them — which is the trap
   the music toggle at the foot of this file is still sitting in. */
.hena-scope .hn-rsvp button[aria-pressed] {
  min-block-size: 2.9rem;
}

.hena-scope .hn-rsvp button[aria-label="+"],
.hena-scope .hn-rsvp button[aria-label="-"] {
  block-size: 2.75rem;
  inline-size: 2.75rem;
}

/* ══ WHAT PEOPLE HAVE ALREADY WRITTEN ═══════════════════════════════════

   These stay objects and are the only ones in the interior that do — a message
   from somebody else genuinely IS a separate thing on the page, and the brief
   that removed every other card asked for these to read as notes rather than as
   social-media comments.

   What says "a person wrote this" is the SIGNATURE: the guest's name in the
   display face, at the reading end, under a short rule. The message is Amiri,
   the face the blessing lines use, which is the closest thing on this platform
   to a hand. */
.hena-scope .hn-wishes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.hena-scope .hn-wish {
  position: relative;
  padding: 1.5rem 1.35rem 1.25rem;
  border: 0;
  background-color: rgba(42, 16, 26, 0.46);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.hena-scope .hn-wish-msg {
  margin: 0 0 0.9rem;
  font-size: 1.06rem;
  line-height: 2;
  color: var(--hn-ivory);
}

.hena-scope .hn-wish-name {
  margin: 0;
  text-align: end;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--hn-gold-soft);
}

/* The rule above a signature, hung on the END edge. `margin-inline-start: auto`
   is the only form of this that flips: `margin-left: auto` would put the rule
   on the wrong side of an RTL note, above a name sitting on the other one. */
.hena-scope .hn-wish-name::before {
  content: "";
  display: block;
  inline-size: 2.6rem;
  block-size: 1px;
  margin-block-end: 0.5rem;
  margin-inline-start: auto;
  margin-inline-end: 0;
  background: linear-gradient(to left, var(--hn-gold), rgba(176, 138, 74, 0));
}

/* ══ THE CLOSE ══════════════════════════════════════════════════════════

   The deepest night on the page, bookending the gate the guest came in through.
   Seven screens of one ground with no beat in them is why darga's scroll read
   flat before it grew a second dark panel.

   THE MARK THAT USED TO STAND HERE IS GONE — a 74px hairline with a lozenge in
   it, doing duty as a full stop. The last link in `.hn-body` ends in a coil
   instead, so the line the guest started with their finger finishes here. */
.hena-scope .hn-closing {
  position: relative;
  margin-top: var(--hn-beat);
  padding: 4rem var(--hn-gut) calc(4rem + env(safe-area-inset-bottom));
  text-align: center;
  background: var(--hn-night-deep);
  color: var(--hn-ivory);
  overflow: hidden;
}

/* Real cloth under the last words. A child rather than a background on the
   panel, because the panel's height comes from its text — a `cover` background
   would make the padding the picture's height, which is how darga ended up with
   a screen of wallpaper under three lines. */
.hena-scope .hn-closing-silk {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(14, 5, 10, 0.5), rgba(14, 5, 10, 0.82)),
    url("/media/hena/silk.webp");
  background-size: cover, cover;
  background-position: center, center;
}

.hena-scope .hn-closing > *:not(.hn-closing-silk):not(.hn-closing-glow) {
  position: relative;
  z-index: 1;
}

/* The last candle. A radial over the cloth, low and warm, so the page ends on
   the light it opened with rather than merely on the same dark colour. */
.hena-scope .hn-closing-glow {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -3rem;
  block-size: 20rem;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 58% 50% at 50% 62%,
    rgba(176, 138, 74, 0.22),
    rgba(156, 101, 63, 0.1) 45%,
    rgba(176, 138, 74, 0) 72%
  );
}

.hena-scope .hn-closing-msg {
  font-size: clamp(1.15rem, 5.2vw, 1.38rem);
  line-height: 2.05;
  margin: 0;
  max-inline-size: 22rem;
  margin-inline: auto;
  color: var(--hn-ivory-hi);
}

.hena-scope .hn-hashtag {
  display: inline-block;
  margin: 1.6rem 0 0;
  padding: 0.42rem 1rem;
  border: 1px solid var(--hn-line-soft);
  border-radius: var(--hn-r-sm);
  font-size: 0.92rem;
  color: var(--hn-gold-soft);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ══ EMBERS ═════════════════════════════════════════════════════════════

   TWO SHAPES NOW, round-robined by the shared builder. One shape repeated
   fourteen times is the shape the eye starts recognising, and a recognised
   particle is what breaks the illusion — not the count, which was measured on a
   real phone and did not move. */
.hena-scope .hn-embers {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 900ms ease-out;
}

.hena-scope .hn-embers.is-live { opacity: 1; }

.hena-scope .hn-ember {
  position: absolute;
  bottom: -8vh;
  inset-inline-start: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  animation: hn-rise var(--d) linear var(--delay) infinite;
  will-change: transform, opacity;
}

/* The ember: a soft disc of candlelight, which is what this layer always drew. */
.hena-scope .hn-ember.is-v0 {
  background: radial-gradient(circle, var(--hn-gold-soft) 0%, rgba(176, 138, 74, 0) 70%);
}

/* The spark: smaller, harder, and warmer — a mote off the wick rather than a
   mote in the air. It takes the same size from the builder and shrinks itself
   with a scale, so the two variants cannot drift apart in the arithmetic. */
.hena-scope .hn-ember.is-v1 {
  background: radial-gradient(circle, rgba(248, 240, 224, 0.95) 0%, rgba(176, 138, 74, 0.5) 42%, rgba(156, 101, 63, 0) 72%);
  scale: 0.62;
}

/* Paused rather than removed when the interior is off-screen: the embers keep
   their positions, so scrolling back does not restart all fourteen at once. */
.hena-scope .hn-embers:not(.is-live) .hn-ember { animation-play-state: paused; }

@keyframes hn-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: var(--peak); }
  85% { opacity: var(--peak); }
  100% { transform: translate3d(var(--drift), -116vh, 0); opacity: 0; }
}

/* Sections and the vine between them sit above the embers. */
.hena-scope .hn-sec,
.hena-scope .hn-lk { position: relative; z-index: 1; }

/* The hero and the closing are whole scenes of their own and no ember may drift
   across them — they sit above the layer explicitly rather than relying on a
   z-index:auto positioned element happening to paint over z-index:0. */
.hena-scope .hn-hero,
.hena-scope .hn-closing { z-index: 2; }

/* ══ THE MORNING AFTER, AND THE DOORSTEP ════════════════════════════════

   The guest album and the credit footer render INSIDE .hena-scope but OUTSIDE
   .hn-body, and until this pass this template dressed neither — they arrived in
   the app's default skin, under a page rebuilt around a drawn vine.

   BOTH ARE SELECTED BY A REAL CLASS NAME (`ah-album`, `ah-madewith`), which
   those components carry for exactly this. The music toggle at the foot of this
   file is still selected by its Tailwind utilities, which is a silent break
   waiting for the day one of them changes. Do not add more of those — add a
   hook. Every rule here is inside .hena-scope, so the other four templates keep
   the default skin exactly as it was. */

/* THE ALBUM IS THE NEXT MORNING, so it is a panel held at the corners like the
   reply card was — the same object, one day later. */
.hena-scope .ah-album {
  inline-size: min(var(--hn-col-wide), 100% - var(--hn-gut) * 2);
  max-inline-size: none;
  margin-inline: auto;
  margin-block-end: 3rem;
  padding: 2.6rem 1.3rem 2.4rem;
  background-color: rgba(42, 16, 26, 0.42);
  text-align: center;
}

/* The heading takes the page's own voice — the display face, gold, with a
   hairline running out either side of it. `.ah-album-head` is a bare <h2>, so
   its two pseudos are free and this needs no markup. */
.hena-scope .ah-album-head {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 3.4vw, 1.1rem);
  margin: 0 0 0.4rem;
  font-family: var(--font-script), var(--font-vazir), serif;
  font-size: clamp(1.4rem, 5.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--hn-gold-soft);
}

/* `line-soft`, not `line-hair`. The hairline weight is right everywhere it
   divides two things that are already next to each other; here it is the only
   thing holding a heading across a panel, and at 0.13 alpha on burgundy it was
   invisible on the render — a script heading floating with two gaps beside it. */
.hena-scope .ah-album-head::before,
.hena-scope .ah-album-head::after {
  content: "";
  flex: 1 1 2rem;
  min-inline-size: 0.75rem;
  block-size: 1px;
  background: var(--hn-line-soft);
}

/* The sealed note, the revealed note, the empty note and the thanks are all a
   bare <p> under the heading. The shared component dims these with a utility;
   the colour below IS the dimming, and 0.7 on top of it is a note nobody can
   read on velvet. */
.hena-scope .ah-album p {
  margin-block-start: 0.7rem;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--hn-on-night-soft);
  opacity: 1;
}

.hena-scope .ah-album-add {
  gap: 0.8rem;
  margin-block-start: 1.7rem;
}

.hena-scope .ah-album-add input[type="text"],
.hena-scope .ah-album-add input:not([type]) {
  border-radius: var(--hn-r-sm);
  border-color: var(--hn-line-soft);
  background: rgba(20, 8, 13, 0.6);
  color: var(--hn-ivory);
}

.hena-scope .ah-album-add label {
  min-block-size: 2.9rem;
  border-radius: var(--hn-r-sm);
  border: 1px solid rgba(248, 240, 224, 0.2);
  background: var(--hn-copper-deep);
  color: var(--hn-ivory-hi);
}

/* THE DOORSTEP. The credit footer belongs to Ahang, not to the couple, so it is
   the last and deepest dark with a gold ledge across the top. The generic
   Ornament is HIDDEN rather than recoloured: it draws a diamond between two
   rules, which is a vocabulary this template spent the redesign replacing with
   one boteh. */
.hena-scope .ah-madewith {
  position: relative;
  gap: 1.1rem;
  padding-block: 2.6rem calc(2.8rem + env(safe-area-inset-bottom));
  border-block-start: 0;
  background: var(--hn-night-deep);
}

.hena-scope .ah-madewith::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--hn-gold) 30%, var(--hn-gold) 70%, transparent);
  opacity: 0.6;
}

.hena-scope .ah-madewith-orn { display: none; }

.hena-scope .ah-madewith p {
  font-size: 0.86rem;
  color: var(--hn-on-night-soft);
}

/* The brand, in the face this template sets names in. */
.hena-scope .ah-madewith p span {
  font-family: var(--font-script), var(--font-vazir), serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--hn-gold-soft);
}

/* Still filled, and deliberately: this is the growth loop and the one thing on
   the page we ask a guest to tap for our own sake. Sized down and given the
   plate every other control here wears, so it belongs to the design instead of
   shouting over it. */
.hena-scope .ah-madewith a {
  min-block-size: 2.75rem;
  padding-inline: 1.4rem;
  border: 1px solid rgba(248, 240, 224, 0.2);
  border-radius: var(--hn-r-sm);
  background: var(--hn-copper-deep);
  font-size: 0.86rem;
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.85);
}

/* THE MUSIC CONTROL — the shared MusicToggle, shrunk off a 3.5rem FAB.
   TRAP: selected by its Tailwind utility classes. If those change these stop
   matching and it falls back to the shared circle — a silent downgrade.
   2.75rem is the 44px touch minimum; do not go under. */
.hena-scope button.fixed.bottom-5.end-5 {
  /* bottom-5 is a flat 1.25rem, which lands in the home-bar gesture strip.
     Added, not replaced: the inset is 0px where there is no bar. */
  inset-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  block-size: 2.75rem;
  inline-size: 2.75rem;
  border: 1px solid rgba(207, 174, 116, 0.45);
  background: var(--hn-copper-deep);
  color: var(--hn-ivory-hi);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.7);
  /* A slow breath, so the invitation reads as having sound without a label. */
  animation: hn-halo 4.5s ease-in-out infinite;
}

.hena-scope button.fixed.bottom-5.end-5:hover {
  scale: 1;
  background: var(--hn-copper);
}

@keyframes hn-halo {
  0%, 100% { box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.7), 0 0 0 0 rgba(207, 174, 116, 0.3); }
  50% { box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.7), 0 0 0 7px rgba(207, 174, 116, 0); }
}

/* ══ REDUCED MOTION ═════════════════════════════════════════════════════

   EVERY DRAWN THING ON THIS PAGE STARTS INVISIBLE, and that is what makes this
   block load-bearing rather than polite. `stroke-dashoffset: 1` hides a path
   completely; the only thing that ever reveals it is the transition. Suppress
   the transition without RESOLVING the value and the ornament is invisible
   forever — a date section with no ring, headings with no marks, and eight gaps
   with nothing in them. The failure is completely silent, which is why each one
   is named here rather than covered by a blanket rule. */
@media (prefers-reduced-motion: reduce) {
  /* ScrollReveal marks everything visible immediately here, so without this the
     sections would still travel — just on a delay. */
  .hena-scope .hn-reveal,
  .hena-scope .hn-prog-row,
  .hena-scope .hn-note,
  .hena-scope .hn-wish,
  .hena-scope .hn-slide,
  .hena-scope .hn-gate-hold,
  .hena-scope .hn-gate-ring {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* THE VINE BETWEEN THE SECTIONS. Shown already drawn, in full. */
  .hena-scope .hn-lk-stem {
    stroke-dashoffset: 0;
    transition: none;
  }

  .hena-scope .hn-lk-leaf { opacity: 0.62; transition: none; }
  .hena-scope .hn-lk-seed { opacity: 0.75; transition: none; }

  /* THE BOTEH OVER EVERY HEADING. */
  .hena-scope .hn-node-out,
  .hena-scope .hn-node-in {
    stroke-dashoffset: 0;
    transition: none;
  }

  /* THE DATE'S MEDALLION — two rings and twelve botehs, all of which start at
     zero. This is the largest single ornament on the page and the one whose
     absence would be read as a broken image rather than as a missing flourish. */
  .hena-scope .hn-med-ring {
    stroke-dashoffset: 0;
    transition: none;
  }

  .hena-scope .hn-med-boteh { opacity: 0.82; transition: none; }
  .hena-scope .hn-med-seed { opacity: 0.5; transition: none; }

  /* AND THE DAY NUMERAL, which is the one piece of TEXT that starts invisible.
     Same trap, same fix, as darga's. */
  .hena-scope .hn-date-num {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* The embers are not slowed, they are not rendered at all — HenaEmbers
     returns null. This is the belt to that braces. */
  .hena-scope .hn-embers { display: none; }

  /* The timeline arrives already lit rather than being dragged into place by
     the scroll — shared/Timeline sets every row on and the rail to full when
     `reduce` matches, and these turn off the transitions that would otherwise
     animate it getting there. */
  .hena-scope .hn-prog-row::before,
  .hena-scope .hn-prog-time,
  .hena-scope .hn-prog-title { transition: none; }

  /* Two things on this page loop forever with no end state worth freezing: the
     ring leaving the map pin, and the bead running down the hero's cue. Asked
     for stillness they are simply not drawn — a paused ring frozen at 40% of
     its travel is a stray circle around the pin, and a bead stopped halfway
     down a hairline is a speck of dirt on the glass. */
  .hena-scope .hn-map-pin::after { animation: none; display: none; }
  .hena-scope .hn-hero-cue-bead { animation: none; display: none; }

  .hena-scope .ah-madewith::before,
  .hena-scope button.fixed.bottom-5.end-5 { animation: none; }

  /* The gate collapses to one tap (see HenaGate), so the vine is drawn and
     dried the moment it is touched rather than growing. */
  .hena-scope .hn-gate--drying {
    animation: none;
  }

  .hena-scope .hn-gate--drying .hn-vine,
  .hena-scope .hn-gate--drying .hn-stem,
  .hena-scope .hn-gate--drying .hn-vleaf,
  .hena-scope .hn-gate--drying .hn-vdot,
  .hena-scope .hn-gate--drying .hn-rosette path {
    transition: none;
  }

  /* The one filter in the file. It is a drying flourish and nothing depends on
     it, and a filter is the most expensive thing here to have left running on a
     device whose owner asked for less. */
  .hena-scope .hn-gate--drying .hn-vine { filter: none; }
}

/* ══ SHORT SCREENS ══════════════════════════════════════════════════════

   A phone held sideways, and the 4.7-inch portrait screens still a real share
   of this audience. The cover and the hero are two full-height scenes and the
   only thing here that cannot be scrolled past, so both give back padding.
   Nothing else changes: the interior is one column, already sized in vw. */
@media (max-height: 620px) {
  .hena-scope .hn-hero {
    padding-block: 3rem calc(5rem + env(safe-area-inset-bottom));
  }

  .hena-scope .hn-hero-names { font-size: clamp(2rem, 9vw, 2.8rem); }
  .hena-scope .hn-hero-cue-rail { block-size: 2.2rem; }

  .hena-scope .hn-gate-copy {
    padding-block-end: calc(2.6rem + env(safe-area-inset-bottom));
  }

  .hena-scope .hn-gate-ring {
    inline-size: 2.2rem;
    block-size: 2.2rem;
    margin-block-start: 1.1rem;
  }

  .hena-scope .hn-gate-sep { margin-block: 1rem; }
}