/* Derga (دەرگا) — original work for Ahang. Loaded as a <link> for this
   template only; every rule is scoped by its .dg-/.darga- prefix.

   THIS FILE IS PUBLIC AND EVERY BYTE REACHES THE GUEST, comments included, so
   the reasoning lives in components/templates/darga/*.js and in
   docs/templates/DERGA_PLAN.md. Only the traps are written here. */

/* ── THE THRESHOLD, 2026-08-27 ──────────────────────────────────────────
   A design pass, not a rewrite. Nothing about how this template WORKS
   changed: same gate, same three knocks, same escape hatch, same coverOpen
   handshake, same components, same assets, same five colours. What changed is
   the shape of the page, and the three things to know before editing here:

     THE ARCH IS RATIONED. It is for OPENINGS only — see the --dg-arch-* note
     below. Paper does not get one.

     THE PAGE IS A LEAF. `.dg-body` is one tall arched panel standing on stone,
     with a keyline down its whole length. It must never grow `overflow`,
     `transform`, `filter` or `will-change` — the note on it says why.

     ROOMS, NOT A BAND. `.dg-sec--dark` is gone. A dark ground is a property of
     a ROOM now, and there are exactly two of them.

   Reasoning lives in components/templates/darga/*.js and in
   docs/templates/DERGA_PLAN.md §21. Only the traps are written here.

   FIVE COLOURS, 2026-08-22. `--dg-clematis` is gone and so is every violet
   pixel in the artwork — see DERGA_PLAN.md section 13. Do not add a colour to
   this list without removing one. */
.darga-scope {

  --dg-emerald: #073f32; /* deep forest green — the dark grounds */
  --dg-emerald-deep: #042a22; /* darkest green — the closing panel */
  --dg-ink: #21302a; /* green-black, 12.3:1 on ivory */
  --dg-paper: #f7f1e4; /* warm ivory — the page */
  --dg-paper-light: #fffcf4; /* the stationery */
  /* The stone the door leaf stands on. NOT a sixth colour — it is the third
     value of the ivory family, the way brass has three. The leaf is what the
     invitation is printed on and this is what is around it. */
  --dg-paper-deep: #e9dfc8;

  /* NOT interchangeable. brass 2.40:1 on ivory — FILL ONLY. brass-deep
     5.65:1 — text on ivory. brass-light 6.70:1 — text on green. */
  --dg-brass: #b79a55;
  --dg-brass-deep: #745c25;
  --dg-brass-light: #d8c08a;

  /* sage 2.62:1 — FILL/hairline only. foliage 6.71:1 — captions on ivory. */
  --dg-sage: #8c9b82;
  --dg-foliage: #2e5d4b;

  --dg-line: rgba(183, 154, 85, 0.42);
  --dg-line-soft: rgba(183, 154, 85, 0.22);
  --dg-emboss: rgba(255, 255, 250, 0.94);
  --dg-shadow: rgba(7, 43, 34, 0.16);

  --dg-r: 12px;
  --dg-r-sm: 8px;
  --dg-r-pill: 999px;

  /* THE DISPLAY COLOUR. Every piece of type set large — the headings, the
     names on the sheet, the venue, the day, the entries in the evening — used
     to name --dg-emerald directly, so a section standing on a green ground had
     to be listed by hand in the dark override or render invisible on it. One
     token, swapped once per room. If you set something in the display face,
     colour it with THIS. */
  --dg-display: var(--dg-emerald);

  /* ── THE ARCH, IN FOUR SIZES ────────────────────────────────────────────
     The one shape this template is named after. Round-topped, square-footed,
     with the horizontal radius pinned at 50% so the head is always a segment
     of the full width and the rise is the only thing that changes.

     IT IS RATIONED, and the ration is the design: an arch is an OPENING. The
     door leaf, the invitation, the date niche, the map niche, the countdown
     niches, the photographs, and the three places words stand in a doorway
     (the cover, the hero, the closing panel). PAPER DOES NOT GET ONE — the
     notes, the contact, the wishes, the evening and the reply-card's contents
     are flat, and a fifth arched surface is how this becomes wallpaper.

     TRAP: a border-radius on an element with `overflow: hidden` clips its
     children to the curve, which is what makes a green lunette follow an arch
     — and also what will eat a child that is supposed to straddle the edge.
     Every use below says which of the two it wants. */
  --dg-arch-leaf: 50% 50% 0 0 / 4.5rem 4.5rem 0 0; /* the page itself */
  --dg-arch-lg: 50% 50% 0 0 / 4.2rem 4.2rem 0 0; /* the invitation */
  --dg-arch-win: 50% 50% 0 0 / 3.6rem 3.6rem 0 0; /* photographs, the map */
  --dg-arch-md: 50% 50% 0 0 / 2.4rem 2.4rem 0 0; /* the date, the reply card */
  --dg-arch-sm: 50% 50% var(--dg-r-sm) var(--dg-r-sm) / 1.5rem 1.5rem var(--dg-r-sm) var(--dg-r-sm);

  /* The leaf's own width, and the gutter of stone either side of it. */
  --dg-leaf: 33rem;
  --dg-gutter: clamp(0.5rem, 3vw, 1.25rem);

  /* The section's side padding and the leaf's inner keyline, as tokens,
     because the lintel has to reach from one to the other and cannot do the
     arithmetic against a `clamp()` it cannot see. */
  --dg-pad: clamp(1rem, 4vw, 1.75rem);
  --dg-keyline: 0.55rem;

  /* A lift, not a drop: a hard 1px edge under a card reads as a component. */
  --dg-shade-1: 0 1px 2px rgba(7, 43, 34, 0.04);
  --dg-shade-2: 0 18px 40px -32px rgba(7, 43, 34, 0.38);

  --dg-maxw: 30rem;
  /* Was 6.5rem: a section either side of a divider put 13rem of empty paper
     between them, which is most of a phone screen with nothing on it. */
  --dg-rhythm: 5rem;

  position: relative;
  width: 100%;
  min-height: 100vh;
  /* The ground, not the page. What the page is printed on is .dg-body. */
  background: var(--dg-paper-deep);
  color: var(--dg-ink);
  font-size: 1.05rem;
  line-height: 1.9;
  overflow-x: clip;

  letter-spacing: normal;
}

.dg-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: var(--dg-emerald);

  height: 100svh;
  height: 100dvh;
}

.dg-gate-hit {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dg-gate-poster,
.dg-gate-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;

  pointer-events: none;
}

.dg-gate-video {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.25s linear;
}

.dg-gate-video.is-playing {
  opacity: 1;
}

/* Gradient = the ground the names are read against. Radial = a vignette: the
   artwork's flowers run to the frame edge and pull the eye off the door. */
.dg-gate-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      to top,
      rgba(4, 42, 34, 0.82) 0%,
      rgba(4, 42, 34, 0.5) 24%,
      rgba(4, 42, 34, 0) 54%
    ),
    radial-gradient(
      ellipse 74% 62% at 50% 44%,
      rgba(4, 42, 34, 0) 42%,
      rgba(4, 42, 34, 0.22) 78%,
      rgba(4, 42, 34, 0.42) 100%
    );
  pointer-events: none;
}

/* THE COPY STANDS IN A DOORWAY. A thin brass arch, open at the foot, around
   the greeting, the names and the hint — the same outline the hero and the
   closing panel set their words in, so the page opens, arrives and ends on one
   shape. It is a LINE, not a panel: fill it and it is a card sitting on a
   photograph. See .dg-gate-inner::before. */
.dg-gate-inner {
  position: absolute;
  inset-inline: 0;
  bottom: max(9vh, 3rem);

  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding-inline: 1.75rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
  text-align: center;
  pointer-events: none;
}

/* z-index NEGATIVE, and it stays inside this element: .dg-gate-inner has a
   z-index of its own, so it is a stacking context and the arch cannot fall
   behind the video. Without the negative it paints OVER the names — a
   positioned pseudo outranks its parent's non-positioned text. */
.dg-gate-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: -2.6rem -2.2rem;
  /* ── ONE DOORWAY, MEASURED ONCE ───────────────────────────────────────
     The three arches a guest reads words inside — the cover, the hero and the
     closing panel — are the same object at the same proportion, and they are
     sized here rather than inherited from whatever their content happens to
     be. Left to `inset-inline`, each one took its parent's width: the hero's
     copy is 22rem and the closing message is 26ch, so the "doorway" came out
     full-bleed and 3.6rem deep, which is a banner, not a door.

     20.5rem across and 5.4rem of rise is roughly 3.8:1, which is the head of a
     door rather than the top of a rounded rectangle. `min()` with the parent's
     own width plus its inset keeps it from standing wider than the copy it
     frames on a very narrow phone. */
  inline-size: min(20.5rem, 100% + 3rem);
  /* `left`, NOT `inset-inline-start`, and this is a shipped bug rather than a
     preference. In RTL `inset-inline-start` resolves to `right`, so the arch's
     RIGHT edge landed on the centre line and `translate: -50%` — which is
     physical, and has no logical form — then pushed it a further half-width to
     the physical left. The doorway ended up entirely left of the copy with its
     far side off the screen. `left: 50%` + `translate: -50%` centres in both
     directions because both halves of it are physical. */
  left: 50%;
  translate: -50%;
  border: 1px solid rgba(216, 192, 138, 0.34);
  border-block-end: 0;
  border-radius: 50% 50% 0 0 / 5.4rem 5.4rem 0 0;
  pointer-events: none;
}

.dg-gate-greet {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 253, 247, 0.84);
  animation: dg-in 0.7s ease-out both;
}

/* 600, not 400: Aref Ruqaa loses its stroke contrast below it and the letters
   went soft over the door. The rule is an ::after so the markup is unchanged. */
.dg-gate-names {
  margin: 0;
  font-family: var(--font-script), var(--font-vazir), serif;
  font-size: clamp(2rem, 9vw, 2.9rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--dg-paper-light);
  text-shadow: 0 2px 20px rgba(4, 42, 34, 0.78), 0 1px 4px rgba(4, 42, 34, 0.5);
  text-wrap: balance;
}

.dg-gate-names::after {
  content: "";
  display: block;
  inline-size: 3rem;
  block-size: 1px;
  margin: 1.1rem auto 0;
  background: linear-gradient(
    to right,
    rgba(216, 192, 138, 0),
    rgba(216, 192, 138, 0.9) 35%,
    rgba(216, 192, 138, 0.9) 65%,
    rgba(216, 192, 138, 0)
  );
}

.dg-gate-hint {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 252, 244, 0.9);
  text-shadow: 0 1px 10px rgba(4, 42, 34, 0.75);
}

.dg-gate-out {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 253, 247, 0.8);
  animation: dg-in 0.6s ease-out both;
}

/* Diamonds, not discs — three circles in a row is a carousel's page dots. */
/* ── THREE NAILHEADS DOWN THE MEETING LINE ───────────────────────────────
   They were a row of three diamonds in the caption block at the foot of the
   screen — which is where a carousel puts its page dots, so the one affordance
   that says "this door is counting" was drawn as the one that means "there are
   more slides".

   They are on the DOOR now, down the stile where the two leaves meet, struck
   from the top as the knocks land. That is where a door of this kind carries
   its ironwork, and it puts the feedback on the thing being knocked rather
   than in a legend underneath it.

   POSITIONED AGAINST THE GATE, NOT THE COPY, which is why this had to leave
   .dg-gate-inner in the markup: that block is anchored to the bottom of the
   screen and the stile is not.

   The vertical band is 26%–46% of the gate. The clips are `object-fit: cover`
   at `50% 45%`, so the stile is dead centre at every aspect ratio and only the
   crop moves — these sit in the upper carved panels and clear the handles,
   which are on the centre line at about half height. */
.dg-studs {
  position: absolute;
  z-index: 11;
  inset-inline: 0;
  inset-block-start: 26%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 5.5vh, 2.8rem);
  pointer-events: none;
  opacity: 1;
}

/* The knock that opens the door also ends the count. The clip runs for seconds
   after that third tap, and studs still lit over doors already swinging read as
   leftover UI — so they leave, over a fifth of a second, rather than blinking
   out on the frame the doors start to move. */
.dg-studs.is-done {
  opacity: 0;
  transition: opacity 0.24s ease-out;
}

/* Round, not the diamond they were: this is a nailhead in wood, and the
   diamond is rationed to three structural uses on the interior. Unlit, it is a
   dark stud catching one line of light — visible against the carving, and not
   competing with the copy. */
.dg-stud {
  inline-size: 0.62rem;
  block-size: 0.62rem;
  border-radius: 50%;
  background: rgba(12, 8, 4, 0.42);
  box-shadow: inset 0 1px 1px rgba(255, 250, 235, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.55);
  transition: background 0.28s ease-out, box-shadow 0.28s ease-out,
    scale 0.32s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.dg-stud.is-lit {
  background: linear-gradient(150deg, var(--dg-brass-light), var(--dg-brass) 70%);
  scale: 1.2;
  box-shadow: 0 0 0 1px rgba(216, 192, 138, 0.45),
    0 0 16px 3px rgba(216, 192, 138, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.dg-shake {
  animation: dg-knock 0.18s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes dg-knock {
  0% { transform: translate3d(0, 0, 0); }
  22% { transform: translate3d(3.5px, 0, 0); }
  55% { transform: translate3d(-2.5px, 0, 0); }
  80% { transform: translate3d(1.25px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Shaken loose by the knock. Ivory, like every flower in the artwork. */
.dg-petal {
  position: absolute;
  z-index: 5;
  inline-size: 0.62rem;
  block-size: 0.48rem;
  background: rgba(255, 252, 244, 0.92);
  border-radius: 60% 40% 55% 45% / 65% 60% 40% 35%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: dg-fall 1.4s ease-in both;
}

@keyframes dg-fall {
  0% { opacity: 0; transform: translate3d(0, -8vh, 0) rotate(0deg); }
  12% { opacity: 0.75; }
  100% { opacity: 0; transform: translate3d(var(--dg-drift, 14px), 62vh, 0) rotate(190deg); }
}

.dg-puff {
  position: absolute;
  z-index: 5;
  inline-size: 3rem;
  block-size: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 247, 0.5) 0%, rgba(255, 253, 247, 0) 68%);
  pointer-events: none;
  will-change: transform, opacity;
  animation: dg-puff 0.5s ease-out both;
}

@keyframes dg-puff {
  0% { opacity: 0.85; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.7); }
}

.dg-bloom {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(
    ellipse 42% 55% at 50% 46%,
    rgba(255, 253, 247, 0.98) 0%,
    rgba(183, 154, 85, 0.7) 38%,
    rgba(183, 154, 85, 0) 74%
  );
  opacity: 0;
  pointer-events: none;
  animation: dg-bloom 0.9s ease-in both;
}

@keyframes dg-bloom {
  0% { opacity: 0; transform: scale(0.75); }
  100% { opacity: 1; transform: scale(1.9); }
}

.dg-gate.is-leaving {
  animation: dg-hand 0.7s ease-out both;
  pointer-events: none;
}

@keyframes dg-hand {
  0% { opacity: 1; filter: brightness(1.05); }
  100% { opacity: 0; filter: brightness(1); }
}

.dg-hero {
  position: relative;

  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  /* svh, NEVER dvh: dvh grows as a phone toolbar retracts, so the hero would
     grow while the guest scrolls past it and shove the page down under their
     thumb. The vh line is the fallback and must stay first. */
  min-block-size: 100vh;
  min-block-size: 100svh;

  /* The copy sits in the 55-80% band because that is where the clip was
     measured to have no bright pixel in any frame. */
  padding: 2rem 1.5rem clamp(6.5rem, 20svh, 11rem);
  overflow: hidden;

  background: var(--dg-emerald);
  text-align: center;
}

.dg-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.dg-hero-poster,
.dg-hero-video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;

  object-fit: cover;
  object-position: 50% 45%;
  pointer-events: none;
}

.dg-hero-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.45s ease-out;
}

.dg-hero-video.is-playing {
  opacity: 1;
}

.dg-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(4, 42, 34, 0.24) 0%,
      rgba(4, 42, 34, 0.05) 26%,
      rgba(4, 42, 34, 0.12) 44%,
      rgba(4, 42, 34, 0.46) 58%,
      rgba(4, 42, 34, 0.66) 70%,
      rgba(4, 42, 34, 0.74) 84%,
      rgba(4, 42, 34, 0.82) 100%
    ),
    /* Narrower and taller than it was, so the vignette has the doorway's
       proportion rather than the screen's — the light stays in the opening and
       the stone either side falls away. */
    radial-gradient(
      ellipse 54% 66% at 50% 40%,
      rgba(4, 42, 34, 0) 44%,
      rgba(4, 42, 34, 0.38) 100%
    );
}

.dg-hero-spill {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 46% at 50% 42%,
    rgba(255, 247, 228, 0.9) 0%,
    rgba(183, 154, 85, 0.38) 45%,
    rgba(183, 154, 85, 0) 78%
  );
  opacity: 0;
  animation: dg-spill 2.4s ease-out 0.1s both;
}

@keyframes dg-spill {
  0% { opacity: 0.92; }
  100% { opacity: 0; }
}

/* THE NAMES STAND IN THE THRESHOLD. Same brass outline as the cover and the
   closing panel — the guest has just walked through a doorway and the first
   thing on the other side is their own names framed by one.

   It is drawn on the copy's own ::before rather than as an element, so
   DargaHero's markup, its two timers, its reduced-motion branch and its
   fade-up are all untouched: the arch arrives with the words because it IS
   the words' box. */
.dg-hero-copy {
  position: relative;
  z-index: 4;
  inline-size: 100%;
  max-inline-size: 22rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dg-hero-copy.is-in {
  opacity: 1;
  transform: none;
}

/* Negative, and it cannot escape: this element has a z-index and an opacity
   transition, either of which makes it a stacking context. */
.dg-hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: -2.8rem -2.4rem;
  inline-size: min(20.5rem, 100% + 3rem);
  /* Physical, both halves — see the note on .dg-gate-inner::before. */
  left: 50%;
  translate: -50%;
  border: 1px solid rgba(216, 192, 138, 0.3);
  border-block-end: 0;
  border-radius: 50% 50% 0 0 / 5.4rem 5.4rem 0 0;
  pointer-events: none;
}

.dg-hero-kicker {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  font-weight: 500;

  letter-spacing: 0.04em;
  color: rgba(255, 253, 247, 0.9);
  text-shadow: 0 1px 12px rgba(4, 42, 34, 0.8);
}

.dg-hero-names {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.6rem, 13vw, 4rem);
  line-height: 1.34;
  letter-spacing: 0;
  color: var(--dg-paper-light);

  text-shadow: 0 2px 24px rgba(4, 42, 34, 0.72), 0 1px 4px rgba(4, 42, 34, 0.5);

  text-wrap: balance;
  overflow-wrap: break-word;
}

.dg-hero-rule {
  display: block;
  inline-size: 3.5rem;
  block-size: 1px;
  margin: 1.35rem auto 0;
  background: linear-gradient(
    to right,
    rgba(183, 154, 85, 0),
    rgba(183, 154, 85, 0.95) 35%,
    rgba(183, 154, 85, 0.95) 65%,
    rgba(183, 154, 85, 0)
  );
}

.dg-hero-tagline {
  margin: 1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.85;
  color: rgba(255, 253, 247, 0.94);
  text-shadow: 0 1px 16px rgba(4, 42, 34, 0.8);
}

.dg-cue {
  position: absolute;
  z-index: 4;
  inset-inline: 0;
  inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease-out;
}

.dg-cue.is-in {
  opacity: 1;
}

.dg-cue-txt {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(255, 253, 247, 0.82);
  text-shadow: 0 1px 10px rgba(4, 42, 34, 0.85);
}

.dg-cue-chev {
  inline-size: 1.15rem;
  block-size: auto;
  color: rgba(255, 253, 247, 0.8);
  filter: drop-shadow(0 1px 6px rgba(4, 42, 34, 0.8));
  animation: dg-cue 3s ease-in-out infinite;
}

@keyframes dg-cue {
  0%, 100% { opacity: 0.45; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(7px); }
}

/* ── THE PAGE IS INSIDE THE DOOR ──────────────────────────────────────────
   The whole interior is ONE leaf: arched at the head, square at the foot, a
   border down every side and a gold keyline inside it running the entire
   scroll height. Before this the sections floated on a full-bleed field of
   paper, which is why nine ivory screens read as one undifferentiated scroll —
   there was no edge anywhere for the eye to measure them against.

   IT HOLDS THE CLOSING PANEL TOO, as of 2026-08-27. The frame used to stop
   above the far door and the door's green then ran to both edges of the
   screen, past the gold line that had been framing everything above it. The
   founder caught it twice — first on the colonnade, then here — and it is the
   same mistake at two scales: a ground that is wider than the frame around it.

   TWO THINGS THIS MUST NOT GROW:

   `overflow` — DargaDrift's layer is `position: fixed` inside this and nothing
   here makes this a containing block for it, so the leaves fall across the
   whole window and past the leaf's edges onto the stone, which is the point.
   Add `overflow: hidden` here and you are betting on browsers agreeing about
   clipping a fixed descendant. Nothing needs it: sections have no background
   of their own, and the closing panel clips its own vines.

   `transform` / `filter` / `will-change` — any of them WOULD make this the
   containing block, and the drift layer would stop being fixed to the window
   and start being fixed to a seven-screen-tall element. */
.dg-leaf {
  position: relative;
  inline-size: min(var(--dg-leaf), 100% - var(--dg-gutter) * 2);
  margin-inline: auto;
  /* THE CROWN NEEDS AIR ABOVE IT. Measured at zero: the leaf's arched head
     began on the exact pixel the hero's video ended, so the doorway in the
     clip and the arch of the page collided edge to edge and read as one
     overlapping the other. A band of stone between them is what says the leaf
     is standing on the ground rather than growing out of the picture.
     A step of stone below it too — the leaf now ENDS at the far door, so
     without that the closing panel's frame and the footer's brass ledge would
     meet with nothing between them. */
  margin-block-start: 2.25rem;
  margin-block-end: 3rem;

  border: 1px solid var(--dg-line);
  border-radius: var(--dg-arch-leaf);

  background-color: var(--dg-paper);
  background-image: url("/templates/darga/paper.webp");
  background-repeat: repeat;
  background-size: 400px 400px;
}

/* The leaf's inner keyline — the same double rule the invitation and the reply
   card are drawn with, at the scale of the whole page. It runs the entire
   scroll height and CLOSES AT THE BOTTOM, because the panel it now ends on is
   inside it. */
.dg-leaf::before {
  content: "";
  position: absolute;
  inset: var(--dg-keyline);
  z-index: 2;
  /* Its own value rather than --dg-line-soft, and stronger than a hairline on
     open paper would need to be. This line crosses BOTH grounds and the dark
     ones stop DEAD AGAINST IT — it is the edge they are cut to, so if it
     cannot be seen against green then the green simply appears to end at
     nothing. 0.22 was the token, 0.3 was still too faint on the colonnade. */
  border: 1px solid rgba(183, 154, 85, 0.5);
  border-radius: 50% 50% 0 0 / 4rem 4rem 0 0;
  pointer-events: none;
}

/* The paper's own column. It carries no frame any more — the leaf does — and
   it is still what DargaDrift observes to know the interior is on screen, so
   the drift layer's parentElement must stay this element. */
.dg-body {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
}

/* ABOVE THE WEATHER — the drift layer is fixed at z-index 0. The z-index also
   makes every section a stacking context, which is why the photo viewer is
   portalled out rather than given a bigger number, and what keeps
   .dg-sec--wall's ground (z-index -1) behind the section's own content instead
   of behind the leaf's paper. */
.dg-sec {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  padding-block: calc(var(--dg-rhythm) * 0.5);
  padding-inline: var(--dg-pad);
}

/* ── THREE DENSITIES, AND ONLY THREE ─────────────────────────────────────
   Every section used to take the same padding, so a guest scrolling seven
   screens arrived nowhere. The two sections that ARE the invitation get air;
   the practical ones — a list of notes, a name and a number — tighten, because
   a short factual line surrounded by a screen of nothing reads as a mistake;
   everything else takes the middle. A fourth value is a section that thinks it
   is special. */
.dg-sec--air {
  padding-block: calc(var(--dg-rhythm) * 0.8);
}

.dg-sec--tight {
  padding-block: calc(var(--dg-rhythm) * 0.34);
}

/* THE COURTYARD WALL.
   One band of stone across the leaf, and the ONLY one: it exists because the
   photographs are drawn as windows, and a window needs a wall to be cut into.
   Floating an arched opening on open paper is a shape with nothing behind it.

   Same colour as the ground the leaf stands on, which is the point — this is
   the courtyard's own wall, not a fifth surface.

   It stops at the keyline like the colonnade does, for the same reason: the
   paper margin runs unbroken from the top of the leaf to the bottom.

   z-index -1 stays INSIDE the section: .dg-sec is `position: relative;
   z-index: 1`, so it is a stacking context and this cannot fall behind the
   leaf's paper, only behind the section's own content. */
.dg-sec--wall::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  /* +1px, for the reason on .dg-room--dark::before. */
  inset-inline: calc(var(--dg-keyline) + 1px);
  background-color: var(--dg-paper-deep);
  background-image:
    linear-gradient(to right, rgba(183, 154, 85, 0), var(--dg-line) 22%, var(--dg-line) 78%, rgba(183, 154, 85, 0)),
    linear-gradient(to right, rgba(183, 154, 85, 0), var(--dg-line) 22%, var(--dg-line) 78%, rgba(183, 154, 85, 0));
  background-repeat: no-repeat;
  background-position: top, bottom;
  background-size: 100% 1px, 100% 1px;
  box-shadow: inset 0 10px 20px -18px rgba(7, 43, 34, 0.5),
    inset 0 -10px 20px -18px rgba(7, 43, 34, 0.5);
  pointer-events: none;
}

/* Clears the leaf's own arch and no more. MEASURED: at 1.5 rhythms the sheet's
   own arch started 7.5rem below a 4.5rem curve, so the first screen of the
   invitation was fourteen rems of empty paper before the first word. This is
   the leaf's rise plus a line. */
.dg-sec--open {
  padding-block-start: calc(var(--dg-rhythm) * 0.98);
}

.dg-inner {
  width: 100%;
  max-width: var(--dg-maxw);
  margin-inline: auto;
  text-align: center;
}

.dg-inner--wide {
  max-width: 38rem;
}

/* ── ROOMS ───────────────────────────────────────────────────────────────
   A room is a run of sections standing on one ground. This replaces
   `.dg-sec--dark`, which was ONE section — the countdown — on green, with the
   evening's programme on ivory directly under it: the two sections that answer
   the same question split down the middle by a colour change.

   The page is four grounds now and they are a walk rather than a stripe:
   the ivory hall, the green colonnade where the arrangements are kept, the
   ivory courtyard where the guests are, and the far door. Two dark grounds,
   at the two ends of the walk. DO NOT ADD A THIRD: at three the arc is a
   pattern and the walk is a corridor. The reasoning is on Room in
   DargaTemplate.js.

   A light room is a plain wrapper and paints nothing — the leaf is already
   ivory, and a room that repainted it would only be a second opinion. */
.dg-room {
  position: relative;
}

/* THE COLONNADE. It redefines the TOKENS rather than restyling what is inside,
   so a component standing in here is legible without knowing which room it is
   in — which is the whole reason --dg-display exists. */
.dg-room--dark {
  --dg-ink: #fffcf4;
  --dg-display: #fffcf4;
  --dg-foliage: #b9c9ab;
  --dg-brass-deep: var(--dg-brass-light);
  --dg-line-soft: rgba(216, 192, 138, 0.24);
  --dg-line: rgba(216, 192, 138, 0.4);
  --dg-paper: var(--dg-emerald);
  --dg-paper-light: rgba(255, 252, 244, 0.055);
  --dg-shade-1: none;
  --dg-shade-2: none;

  position: relative;
  /* Its own padding is small — the sections inside carry the rhythm, and a
     room that added a full one at each end would leave a screen of empty wall
     above the first heading. This is the breath at the seam, nothing more. */
  padding-block: calc(var(--dg-rhythm) * 0.18);
  color: var(--dg-ink);
}

/* ── THE WALL IS A LAYER, NOT A BACKGROUND ON THE ROOM ────────────────────
   This is the founder's correction, 2026-08-27, and it is worth stating
   exactly because it is easy to reintroduce: the leaf's gold keyline runs down
   BOTH MARGINS FOR THE WHOLE PAGE, and a background painted to the room's own
   edges ran underneath it — so for the height of the colonnade there was a
   0.55rem strip of green OUTSIDE the gold frame. The frame stopped being a
   frame; the green leaked into the margin that is meant to stay paper.

   So the wall is an inset layer that stops exactly where the keyline is, and
   the paper margin runs unbroken from the top of the leaf to the bottom of it.

   THREE BACKGROUNDS ON ONE PSEUDO rather than a ground plus ::before/::after
   seams: the two gold hairlines have to stop at the same place the green does,
   and pinning three separate elements to the same two edges is three chances
   to disagree. Top seam, bottom seam, then the light.

   z-index 0, and .dg-sec is z-index 1 — the sections stand in front of the
   wall, which is the whole arrangement. */
.dg-room--dark::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  /* +1px: the keyline's own border occupies [keyline, keyline + 1px]. Starting
     the green at `keyline` puts it under the line's outer half and only a
     sub-pixel of gold survives the paint. This starts it on the line's INNER
     edge, so the full hairline stands between the paper and the wall. */
  inset-inline: calc(var(--dg-keyline) + 1px);
  pointer-events: none;

  /* FLAT, with light falling from the head of the room. NOT the damask: that
     picture is the FAR DOOR's, and `cover` on a three-screen-tall element
     would upscale an 820px file past the point where its pattern survives. */
  background-color: var(--dg-emerald);
  background-image:
    linear-gradient(
      to right,
      rgba(183, 154, 85, 0),
      rgba(183, 154, 85, 0.5) 20%,
      rgba(183, 154, 85, 0.5) 80%,
      rgba(183, 154, 85, 0)
    ),
    linear-gradient(
      to right,
      rgba(183, 154, 85, 0),
      rgba(183, 154, 85, 0.5) 20%,
      rgba(183, 154, 85, 0.5) 80%,
      rgba(183, 154, 85, 0)
    ),
    radial-gradient(
      ellipse 120% 42% at 50% 0%,
      rgba(216, 192, 138, 0.09),
      rgba(216, 192, 138, 0) 70%
    );
  background-repeat: no-repeat;
  background-position: top, bottom, center;
  background-size: 100% 1px, 100% 1px, 100% 100%;

  /* THE SEAMS' DEPTH. TRAP: an inset shadow, not two more gradient stops —
     two stops between flat greens band visibly here. */
  box-shadow: inset 0 12px 24px -20px rgba(0, 0, 0, 0.6),
    inset 0 -12px 24px -20px rgba(0, 0, 0, 0.6);
}

/* ── THE LINTEL ──────────────────────────────────────────────────────────
   The heading used to be a 2.75rem hairline with a diamond in it, floating
   above a centred title. Eleven of those down the page divided nothing: the
   rule was narrower than the words under it, so one section ran into the next
   with a small decoration in between.

   This is a line ACROSS THE PAGE with the title set into the middle of it. It
   reaches from the leaf's keyline to the leaf's keyline — which is why the
   negative margin is the section's own padding minus the keyline inset, and
   why both of those are tokens rather than literals.

   `.dg-inner` caps at --dg-maxw, but the leaf is narrower than that cap at
   every width this template is read at, so the head is never the thing that
   gets clipped. The cap is a belt, not a measurement. */
.dg-head {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 3.4vw, 1.15rem);
  margin-block-end: 1.9rem;
  margin-inline: calc(var(--dg-keyline) - var(--dg-pad));
}

/* The two halves. They grow OUT OF THE TITLE as the section arrives, which is
   the reading order of a lintel being laid.

   TRAP: `transform-origin` has no logical keyword, and these are two DIFFERENT
   physical values because the two rules grow in opposite directions. This
   template is RTL in both dialects, so the FIRST rule in the DOM is on the
   physical right and grows leftward, toward the title — which is `left`. Swap
   them and the lintel grows outward from the wall instead of from the words. */
.dg-lin {
  flex: 1 1 2rem;
  min-inline-size: 0.75rem;
  block-size: 1px;
  background: var(--dg-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.dg-lin--b {
  transform-origin: right;
}

.dg-reveal.is-visible .dg-lin {
  transform: scaleX(1);
}

/* AREF RUQAA, like Tîrêj's headings — the DISTRIBUTION of the three faces is
   what was borrowed, not the faces. NO letter-spacing anywhere in this file:
   Kurdish joins, and tracking pulls a word into loose letters. */
.dg-h2 {
  /* Shrinks before the lintel does, so a long heading in Badini takes the room
     it needs and the two rules give it up. */
  flex: 0 1 auto;
  margin: 0;
  font-family: var(--font-script), var(--font-vazir), serif;
  font-size: clamp(1.5rem, 6vw, 1.95rem);
  /* 700, not 300. Aref Ruqaa at a light weight loses the stroke contrast that
     makes it worth setting at all — it is a display face, and Tîrêj sets it
     the way it wants to be set. */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;

  color: var(--dg-display);
}

/* THE INVITATION ITSELF — the one door leaf on the page you can read.
   It was a square-cornered rectangle, on the argument that this is printed
   paper. It still is printed paper; it is now printed to the shape of the
   thing the guest just walked through, which is the only reason this template
   is called what it is. The foot stays square, because a door has a threshold.

   The head is EMPTY on purpose. A tympanum with an ornament crammed into it is
   a busy arch; a tympanum with nothing in it is an arch. The seal at the foot
   is what balances it. */
.dg-sheet {
  position: relative;
  max-width: 27rem;
  margin-inline: auto;
  /* Top padding clears the arch's rise plus a line of air, and NOT MORE — the
     tympanum is meant to be empty, not to be a second margin. */
  padding: 5.4rem 1.9rem 4rem;
  background: var(--dg-paper-light);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-arch-lg);
  box-shadow: var(--dg-shade-1), 0 26px 48px -38px var(--dg-shadow);
  text-align: center;
}

/* The inner keyline follows the curve. Its rise is the sheet's MINUS the
   inset — the two radii are concentric only if the second one is reduced, and
   an inner arch drawn at the outer arch's rise crosses it near the shoulders. */
.dg-sheet::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border: 1px solid var(--dg-line-soft);
  border-radius: 50% 50% 0 0 / 3.7rem 3.7rem 0 0;
  pointer-events: none;
}

/* The bismillah opens the card, so it sits above everything and is set
   SMALLER than the verse it opens — its weight is in what it is. A hairline
   under it, not the section divider: the two are one block. */
.dg-bismillah {
  margin: 0 auto 1.35rem;
  padding-bottom: 1.15rem;
  max-inline-size: 21rem;
  font-size: 0.94rem;
  line-height: 1.95;
  color: var(--dg-foliage);
  border-bottom: 1px solid var(--dg-line-soft);
}

/* Forest green, not the violet it was set in — that rhymed with a clematis
   that is ivory now. */
.dg-verse {
  margin: 0 0 2.2rem;
  font-size: 1.15rem;
  line-height: 2.05;
  color: var(--dg-foliage);
}

/* The small label above the names. Foliage rather than brass: brass at this
   size on ivory is 2.40:1 and unreadable. */
.dg-sheet-kicker {
  margin: 0 0 0.9rem;
  font-size: 0.76rem;
  color: var(--dg-foliage);
}

/* Set again here, and smaller than the hero. The hero is the moment; this is
   the document, and paper always repeats the names on the card inside. */
.dg-sheet-names {
  margin: 0;
  font-size: clamp(1.7rem, 8vw, 2.15rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--dg-display);
  text-wrap: balance;
}

.dg-sheet-place {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  color: var(--dg-foliage);
}

/* The sheet's own ornament, between the head and the words. Its own drawing
   rather than a fourth copy of the section divider — that one marks the three
   places the page changes subject and stops meaning anything at four. */
.dg-fleuron {
  display: block;
  inline-size: min(8.5rem, 48%);
  block-size: auto;
  margin: 1.75rem auto;
  opacity: 0.85;
}

/* THE SEAL. `bottom` and `left` are PHYSICAL: a seal is placed by hand and
   does not change sides with the writing. 2.5rem, down from 4rem and 5.5rem —
   bigger, the rendered wax read as an object dropped onto the sheet. */
.dg-seal {
  position: absolute;
  bottom: -1.15rem;
  left: 50%;
  z-index: 2;
  inline-size: 2.5rem;
  block-size: auto;
  opacity: 0.92;
  transform: translateX(-50%) rotate(-6deg);
  filter: drop-shadow(0 2px 4px rgba(4, 42, 34, 0.15));
}

/* Amiri: the words on the sheet are the thing being said. The measure cap in
   ch stays, so ten words and three hundred read as one column. */
.dg-invite {
  font-family: var(--font-verse), var(--font-vazir), serif;
  font-size: clamp(1rem, 3.9vw, 1.14rem);
  max-width: 34ch;
  margin: 0 auto;
  color: var(--dg-ink);
}

.dg-lede {
  max-width: 34ch;
  margin: 0 auto 1.6rem;
  color: var(--dg-foliage);
  text-align: center;
}

.dg-hosts {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding-block-start: 2.25rem;
  padding-inline: 0;
  list-style: none;
  border-block-start: 1px solid var(--dg-line-soft);
}

.dg-host-lbl {
  display: block;
  margin-block-end: 0.35rem;
  font-size: 0.76rem;
  color: var(--dg-brass-deep);
}

.dg-host-name {
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--dg-ink);
}

.dg-host-name--solo {
  margin: 2.5rem 0 0;
  padding-block-start: 2.25rem;
  border-block-start: 1px solid var(--dg-line-soft);
}

/* ---- the date: an arched niche ----------------------------------------
   A month grid, then one week row, then engraved type, then a page torn off a
   desk calendar. This is the same four pieces in the same order — the month,
   the day, the hour, the action — drawn as a recess in the wall of the house
   the guest has just been let into rather than as office stationery.

   Nothing here draws a day that is not this day, and nothing in it is
   navigable. See DargaDate, DERGA_PLAN §21. */
.dg-date {
  max-width: 19.5rem;
  margin-inline: auto;
  text-align: center;
}

/* `overflow: hidden` IS THE POINT NOW, and it used to be forbidden here — the
   old card's three binding pins straddled its top edge and clipping ate them.
   The pins are gone; what needs the clip is the green lunette, which is a flat
   rectangle that becomes an arched head only because the card cuts it to one.
   Nothing straddles this edge any more. If you put something back that does,
   it will vanish, and this comment is why. */
.dg-date-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-arch-md);
  background: var(--dg-paper-light);
  box-shadow: var(--dg-shade-1), 0 24px 46px -32px var(--dg-shadow);
}

/* THE KEYSTONE, at the crown. One of the three surviving uses of this page's
   diamond, and the only one that is load-bearing as a drawing: it is the stone
   holding the arch shut, which is what the doorway in this template's own
   artwork has carved above the doors. Brass, because every other piece of
   metal here is. */
.dg-keystone {
  position: absolute;
  z-index: 2;
  /* 0.95rem, not 0.7: at 0.7 the diamond's top point met the card's border on
     the crown and the clip took a bite out of it. */
  inset-block-start: 0.95rem;
  inset-inline-start: calc(50% - 0.34rem);
  inline-size: 0.68rem;
  block-size: 0.68rem;
  rotate: 45deg;
  background: linear-gradient(135deg, var(--dg-brass-light), var(--dg-brass));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* THE LUNETTE. The month, on the one green ground in this section. Square in
   its own right — the card's `overflow` is what gives it the arch, which is
   why there is no border-radius here to keep in sync with the card's. */
.dg-date-band {
  margin: 0;
  /* Clears the arch's rise and the keystone standing in it. */
  padding: 2.9rem 1rem 0.8rem;
  background: var(--dg-emerald);
  color: var(--dg-paper-light);
  font-family: var(--font-script), var(--font-vazir), serif;
  font-size: clamp(1.15rem, 4.8vw, 1.4rem);
  font-weight: 700;
  line-height: 1.6;
}

.dg-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.
     `inline-size` so it stays air 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.78em;
  font-weight: 400;
  color: var(--dg-brass-light);
  font-variant-numeric: lining-nums tabular-nums;
}

.dg-date-body {
  padding: 1.5rem 1.25rem 1.4rem;
}

.dg-date-wd {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--dg-foliage);
}

/* THE DAY. Vazirmatn, NOT the display face — Aref Ruqaa's numerals fall apart
   at this size. 300 is the lightest weight app/layout.js loads; 200 gets a
   synthesised face, not a thinner one. line-height under 1 because a numeral
   has no descender and 1 left a band of nothing under it. */
.dg-date-num {
  margin: 0.15rem 0 0;
  font-family: var(--font-vazir), system-ui, sans-serif;
  font-size: clamp(3.5rem, 18vw, 4.5rem);
  font-weight: 300;
  line-height: 0.95;
  color: var(--dg-display);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums;

  /* 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;
}

.dg-reveal.is-visible .dg-date-num {
  opacity: 1;
  transform: none;
}

/* A TAPERED HAIRLINE, not the broken rule it was. That one parted in the
   middle so the page's diamond could sit in the gap — and the diamond went in
   the ration (six uses down to three: the timeline's node, this card's
   keystone, and the closing mark). A rule that still breaks around a diamond
   that is no longer there is a rule with a hole in it. */
.dg-date-rule {
  display: block;
  inline-size: 6.5rem;
  block-size: 1px;
  margin: 0.95rem auto;
  background: linear-gradient(
    to right,
    rgba(183, 154, 85, 0),
    var(--dg-brass) 26%,
    var(--dg-brass) 74%,
    rgba(183, 154, 85, 0)
  );
}

.dg-date-time {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--dg-ink);
  font-variant-numeric: lining-nums tabular-nums;
}

/* The clock face itself, inside the sentence around it. */
.dg-date-clock {
  color: var(--dg-display);
  font-weight: 600;
}

/* THE SILL — the shelf the action stands on. It was a PERFORATION: a dashed
   rule with a page-coloured notch bitten out of each edge, back when this card
   was a leaf torn off a calendar. A niche cut into a wall does not tear off,
   and a dashed line across one is the seam of a different object.

   Same job, same negative inline margins so it runs the full width of the card
   rather than the width of the text column. Brass, lit from above, with the
   shadow it casts on the stone under it. */
.dg-date-sill {
  display: block;
  margin: 1.5rem -1.25rem 1.4rem;
  block-size: 3px;
  background: linear-gradient(
    to bottom,
    var(--dg-brass-light),
    var(--dg-brass) 55%,
    var(--dg-brass-deep)
  );
  box-shadow: 0 3px 7px -3px rgba(4, 42, 34, 0.45);
}

/* SIZED TO ITS LABEL, not to the card. A full-bleed green slab was the
   heaviest object in the section sitting directly under the lightest one.
   `max-inline-size` keeps it inside a 320px screen whatever the dialect. */
.dg-date .dg-btn {
  gap: 0.6rem;
  max-inline-size: 100%;
  padding: 0.7rem 1.4rem;
  font-size: 0.92rem;
  box-shadow: 0 14px 26px -18px rgba(4, 42, 34, 0.7);
}

.dg-btn-ico {
  display: inline-flex;
  flex: none;
  color: var(--dg-brass-light);
}





/* ---- countdown: each unit's foot hairline fills to the fraction it
   represents — seconds once a minute, days against a year. -------------- */
.dg-cd {
  display: flex;
  justify-content: center;
  gap: clamp(0.4rem, 2.4vw, 0.9rem);
}

/* STANDING CELLS. A hairline-separated row of columns was tried on
   2026-08-22 and reverted the same day at the founder's direction — the cells
   are the shape this band is meant to have. Do not un-box them again. */
.dg-cd-unit {
  position: relative;
  min-inline-size: clamp(3.9rem, 17vw, 5.2rem);
  /* Top padding clears the niche's rise. */
  padding: 1.9rem 0.4rem 0.85rem;
  border: 1px solid var(--dg-line-soft);
  /* FOUR NICHES IN A ROW — which is a colonnade, and this room is called one.
     The cells are STILL CELLS: a hairline-divided row of columns was tried on
     2026-08-22 and reverted the same day at the founder's direction, and this
     does not un-box them. It changes the box's head from a rounded rectangle
     to an arch, so the four of them belong to the wall they are cut into.
     `overflow: hidden` is what clips the fill bar; it also holds the arch. */
  border-radius: var(--dg-arch-sm);
  /* Flat, not a gradient: on the dark room --dg-paper-light is translucent and
     a two-stop gradient between two translucent colours banded visibly. The
     inset glow is not a gradient background — it is light falling into the
     recess from above, and it survives the translucency. */
  background: var(--dg-paper-light);
  box-shadow: var(--dg-shade-1), inset 0 1.4rem 1.6rem -1.5rem rgba(216, 192, 138, 0.55);
  overflow: hidden;
  text-align: center;
}

/* The fill. `transform` on a full-width bar rather than an animated `width`,
   so a value changing every second never costs a layout. */
.dg-cd-unit::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(to left, var(--dg-brass), var(--dg-brass-deep));
  /* Grows from the RIGHT: a bar filling against the text runs backwards.
     `transform-origin` has no logical keyword and this template is RTL in both
     dialects, so the physical value is correct, not a shortcut. */
  transform: scaleX(var(--f, 0));
  transform-origin: right;
  transition: transform 0.3s linear;
}

/* Vazirmatn, not the display face — same rule as the date's numeral. */
/* Vazirmatn, not the display face — same rule as the date's numeral. */
.dg-cd-num {
  display: block;
  font-family: var(--font-vazir), system-ui, sans-serif;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--dg-display);
  /* Latin digits inside an RTL paragraph reorder without this. */
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums lining-nums;
}

.dg-cd-lbl {
  display: block;
  margin-block-start: 0.15rem;
  font-size: 0.72rem;
  color: var(--dg-foliage);
}

.dg-arrived {
  margin: 0;
  font-family: var(--font-verse), var(--font-vazir), serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dg-brass-deep);
  text-align: center;
}

/* ---- the evening: time, node, title ------------------------------------
   Three columns. The hour on the reading-start side, the entry on the other,
   and the nodes on a rail down the middle — which is the shape an order of the
   day is printed in, and the reason the rail can be CONTINUOUS again. It was a
   start-aligned rail first (ragged under a centred heading), then a single
   centred column with segmented connectors (nothing could cross the middle).
   Now nothing needs to: the middle IS the gutter.

   Two grid columns, not three. The node is the row's ::before, placed on the
   element's centre line — with `1fr 1fr` and a symmetric gap that line is
   exactly the middle of the gutter, so there is no third column to keep in
   sync with the rail. */
.dg-prog-wrap {
  padding: 0;
}

.dg-prog {
  position: relative;
  max-inline-size: 23rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* THE RAIL. 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 node at one width is wrong at another. */
.dg-prog::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 0.5px);
  inline-size: 1px;
  background: linear-gradient(
    to bottom,
    rgba(183, 154, 85, 0),
    var(--dg-line-soft) 9%,
    var(--dg-line-soft) 91%,
    rgba(183, 154, 85, 0)
  );
}

/* THE RAIL IS DRIVEN BY THE SCROLL: --prog-p is how far the reading line has
   travelled between the first node and the last, set every frame by
   shared/Timeline. `transform` only, so it never costs layout however fast the
   guest flicks. This came back with the middle gutter — the centred single
   column had nowhere to put it. */
.dg-prog::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 0.5px);
  inline-size: 1px;
  background: linear-gradient(
    to bottom,
    rgba(183, 154, 85, 0),
    var(--dg-brass) 9%,
    var(--dg-brass-deep)
  );
  transform: scaleY(var(--prog-p, 0));
  transform-origin: top;
}

/* `--i` is the row's index, set inline — no CSS counter multiplies into a
   delay. Same on the notes, the wishes and the slides, and every one of them
   is listed again in the reduced-motion block.

   `align-items: center` rather than a baseline: a title that wraps to two
   lines still has to sit level with its hour and with its node. */
.dg-prog-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.9rem, 9vw, 2.6rem);
  align-items: center;
  padding-block: 1.15rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms + 250ms);
}

.dg-reveal.is-visible .dg-prog-row {
  opacity: 1;
  transform: none;
}

/* THE NODE — the page's own diamond, on the rail. Outlined until the hour is
   reached and filled once it is: unreached, then reached, is what the row is
   saying, and the scroll IS the timing, so there is no transition delay.
   The outer ring is a HALO in the page's colour, and it is what stops the rail
   showing through an outlined diamond. */
.dg-prog-row::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(50% - 0.25rem);
  inset-block-start: calc(50% - 0.25rem);
  inline-size: 0.5rem;
  block-size: 0.5rem;
  rotate: 45deg;
  background: var(--dg-paper);
  box-shadow: inset 0 0 0 1px var(--dg-brass), 0 0 0 4px var(--dg-paper);
  transition: background-color 0.35s ease-out, box-shadow 0.35s ease-out,
    scale 0.45s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.dg-prog-row.is-on::before {
  background: var(--dg-brass-deep);
  box-shadow: inset 0 0 0 1px var(--dg-brass-deep), 0 0 0 4px var(--dg-paper);
  scale: 1.2;
}

/* Both columns are set toward the gutter, so the two of them frame the rail
   instead of drifting to the outer edges. `end` on the hour and `start` on the
   entry is the same instruction twice — each is the edge nearer the middle —
   and it stays correct if this template is ever read left to right.

   The hour goes from a note to a fact as the guest reaches it. Colour only:
   changing the weight would reflow the row under their thumb. */
.dg-prog-time {
  align-self: center;
  text-align: end;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--dg-brass-deep);
  font-variant-numeric: tabular-nums lining-nums;
  transition: color 0.35s ease-out;
}

.dg-prog-row:not(.is-on) .dg-prog-time {
  color: var(--dg-foliage);
}

/* Vazirmatn: an entry in a running order is scanned, not read. */
.dg-prog-title {
  align-self: center;
  text-align: start;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--dg-display);
  overflow-wrap: break-word;
}



/* NO CARD — same argument as the timeline. The MAP is the object here and the
   only thing that gets a frame, because it is a picture. */
.dg-venue {
  padding: 0;
  text-align: center;
}

.dg-venue-name {
  margin: 0 0 0.5rem;
  font-family: var(--font-script), var(--font-vazir), serif;
  font-size: clamp(1.3rem, 5.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--dg-display);

  overflow-wrap: break-word;
}

.dg-venue-addr {
  margin: 0;
  font-size: 0.96rem;
  color: var(--dg-foliage);
  overflow-wrap: break-word;
}

/* 3:2, not the 5:4 it was: a near-square of ground is a lot of nothing. */
/* ---- the venue plate ---------------------------------------------------
   THE PRE-TAP STATE IS NOT A MAP, AND IT STOPPED PRETENDING TO BE ONE.

   It was: a 3:2 rectangle of drawn cartography — two street grids, an avenue,
   parkland — on the theory that a stand-in for a map should look like a map.
   That was the wrong theory. A grid of faint lines with a marker on it is
   exactly what a tile server looks like when it fails, so the section read as
   broken rather than as waiting, which is the one thing a stand-in must not do.

   What is here now says something true instead: a green plate, the pin, and
   the invitation to open the map. It is a piece of the invitation that happens
   to be a button, and it cannot be mistaken for a map that did not load.

   The embed is still 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. See
   shared/VenueBlock. */
/* THE WRAPPER DRAWS NOTHING NOW. It used to carry the border, the radius, the
   background and the clip for both states — which was fine while both states
   were rectangles. They are not: the pre-tap state is an ARCHED NICHE and the
   live map is a rectangle, and a rectangular frame drawn around an arch is a
   box with a curve inside it. Each child brings its own shape. */
.dg-map {
  margin-block-start: 1.5rem;
}

/* NO aspect-ratio ON THE CONTAINER, for the same reason: the two states want
   different heights. The live map wants a map's proportion; the niche is sized
   by what is standing in it. */
.dg-map-frame {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-r-sm);
  background: var(--dg-paper-light);
  box-shadow: var(--dg-shade-2);
}

/* IT IS A RECESS, AND A RECESS IS DARKER THAN THE WALL.
   It used to be a green plate on ivory paper, which worked because green was
   the contrast. It stands in the colonnade now, where the wall is already that
   green, so the plate would have disappeared into it. What reads as cut INTO a
   wall is a darker ground, an inner shadow all round, and light falling from
   the head of the opening — so that is what it is, and the two navigation
   chips beside it stay the lit objects in the section.

   It still says something true rather than pretending to be a map: the drawn
   cartography this replaced looked exactly like a tile server that had failed.
   The embed is still 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. See
   shared/VenueBlock. */
.dg-map-hit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  inline-size: 100%;
  /* Top padding clears the arch's rise. */
  padding: 3.9rem 1.25rem 2.2rem;
  border: 1px solid rgba(216, 192, 138, 0.34);
  border-radius: var(--dg-arch-win);
  background:
    radial-gradient(ellipse 58% 62% at 50% 12%, rgba(216, 192, 138, 0.16), rgba(216, 192, 138, 0) 72%),
    var(--dg-emerald-deep);
  box-shadow: inset 0 0 3.5rem -1.2rem rgba(0, 0, 0, 0.9);
  color: var(--dg-paper-light);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

/* The sheet's and the reply card's keyline, following the arch — same
   concentric rule as .dg-sheet::before: the inner rise is the outer one minus
   the inset, or the two curves cross at the shoulders. */
.dg-map-hit::before {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border: 1px solid rgba(216, 192, 138, 0.3);
  border-radius: 50% 50% 3px 3px / 3.15rem 3.15rem 3px 3px;
  pointer-events: none;
}

/* Gold on green now, so the ring that used to separate it from beige is gone
   and the shadow does the lifting instead. */
.dg-map-pin {
  position: relative;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: linear-gradient(135deg, var(--dg-brass-light), var(--dg-brass));
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.5);
}

/* One ring leaving the pin — the only movement on the plate, 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. */
.dg-map-pin::after {
  content: "";
  position: absolute;
  inset: -0.9rem;
  border: 1px solid rgba(216, 192, 138, 0.6);
  border-radius: 50%;
  animation: dg-ping 3s ease-out infinite;
}

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

/* An outlined pill rather than a filled one: the plate is already the emphasis
   and a solid slab inside it would be a second one. brass-light is 6.70:1 on
   this green — see the palette note at the top of this file. */
.dg-map-lbl {
  position: relative;
  padding: 0.5rem 1.15rem;
  border: 1px solid rgba(216, 192, 138, 0.5);
  border-radius: var(--dg-r-pill);
  background: rgba(255, 252, 244, 0.07);
  color: var(--dg-brass-light);
}


/* The small actions: Maps, Waze, ring the contact.
   TRAP: these are NOT .dg-btn. Reusing that put two coloured slabs across the
   venue card; these size to their own label and wrap. */
.dg-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: 1.25rem;
}

.dg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* Small to look at, still 44px to hit. */
  min-block-size: 2.75rem;
  padding-block: 0.45rem;
  padding-inline: 0.5rem 1rem;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-r-pill);
  background: var(--dg-paper-light);
  box-shadow: var(--dg-shade-1);
  color: var(--dg-ink);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out,
    transform 0.15s ease-out;
}

.dg-chip:hover {
  border-color: var(--dg-brass);
  background: var(--dg-paper);
}

.dg-chip:active {
  transform: translateY(1px);
}

.dg-chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 1.85rem;
  block-size: 1.85rem;
  border-radius: 50%;
  background: var(--dg-emerald);
  color: var(--dg-paper-light);
}

.dg-chip-ico svg {
  inline-size: 1rem;
  block-size: 1rem;
}

/* Latin digits inside RTL copy: tabular so the number reads as one block. */
.dg-chip--tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ONE USE: saving the date, at the foot of that section. The venue's two
   navigation links and the contact number are .dg-chip. */
.dg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--dg-r-pill);
  background: var(--dg-emerald);
  color: var(--dg-paper-light);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease-out;
}

.dg-btn:active {
  transform: translateY(1px);
}

/* Open on the page, no card. Centred: a rail of bullets under a centred
   heading was the one ragged edge in the layout. */
.dg-notes {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.dg-note {
  position: relative;
  padding-block: 0.9rem;
  color: var(--dg-ink);
  font-size: 1rem;
  line-height: 1.85;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms + 250ms);
}

.dg-reveal.is-visible .dg-note {
  opacity: 1;
  transform: none;
}

.dg-note + .dg-note {
  border-block-start: 1px solid var(--dg-line-soft);
}

/* NO ORNAMENT BETWEEN THE NOTES ANY MORE. There was a diamond centred on the
   hairline between every pair of them — the fourth of six copies of one 6px
   shape, in the section that needed decoration least. A list of short
   practical lines needs a rule between them and nothing else. The diamond is
   down to three uses on this page and all three are structural: the evening's
   node, the date niche's keystone, the closing mark. */

.dg-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}

.dg-contact-name {
  font-family: var(--font-script), var(--font-vazir), serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--dg-display);
}

/* Who to ring and why — one quiet line so the number is not a bare digit
   string under a heading. */
.dg-contact-role {
  margin: 0;
  font-size: 0.85rem;
  color: var(--dg-foliage);
}

.dg-contact .dg-acts {
  margin-block-start: 0.55rem;
}

/* ══ THE GALLERY ══════════════════════════════════════════════════════════
   A snap track: the current photograph centred, the next and previous peeking
   at both edges, swipe to move, tap to open full screen.

   FOUR ARRANGEMENTS IN A DAY AND THIS IS THE ONE THAT STUCK, which is where it
   started. The three that were rejected, so nobody spends the day again: a
   MOSAIC of large arched openings (955px of gallery for four pictures), an
   ARCADE of small ones (575px), and a single WINDOW that advanced on a tap.
   The founder's note on the last of them is the specification for this one —
   make the shape normal, and start from the centre so the guest can swipe.

   THE SHAPE IS A PLAIN RECTANGLE, and that is the lesson worth keeping.
   Everything else on this page is arched; a photograph is the one thing on it
   that came from outside. It is a picture of two real people, not a piece of
   the building, and cropping it into an arch was the template imposing itself
   on the one element that should be allowed to be itself. The prints hang ON
   the courtyard wall now instead of being cut into it — the wall band, the
   ledge and the brass are what make the section darga's, and the pictures are
   left alone.

   THE CENTRING IS THE SPACERS, and they are ::before/::after FLEX ITEMS rather
   than padding on the track. TRAP: with `box-sizing: border-box` the padding
   comes off the width BEFORE a slide's percentage basis resolves against it —
   11% padding gave a 213px slide in a 350px track, and solving the two
   simultaneously wants 50% padding. As items they share one basis:
   78 + 11 + 11 = 100. Same numbers as shared/Slider documents. */
.dg-slides {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  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;
}

.dg-slides::-webkit-scrollbar {
  display: none;
}

.dg-slides::before,
.dg-slides::after {
  content: "";
  flex: 0 0 11%;
}

.dg-slide {
  flex: 0 0 78%;
  scroll-snap-align: center;

  opacity: 0;
  transform: translateY(12px);
  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);
}

.dg-reveal.is-visible .dg-slide {
  opacity: 1;
  transform: none;
}

/* THE ONE IN THE MIDDLE LEADS — the neighbours sit back and dim, so the eye is
   told where it is without a caption, and the two peeking edges are what say
   this can be swiped at all. Driven by the class the observer already sets;
   transform and opacity only, so a flick costs no layout.

   The ground under it is the darkest green rather than ivory: a photograph
   that has not arrived yet should read as a dark plate, never as a pale
   rectangle waiting for something. */
.dg-slide-btn {
  position: relative;
  display: block;
  inline-size: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-r-sm);
  background: var(--dg-emerald-deep);
  box-shadow: var(--dg-shade-1), 0 18px 34px -24px rgba(7, 43, 34, 0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: scale(0.92);
  opacity: 0.5;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease-out;
}

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

/* 4:5. A normal photograph, and the proportion the track shipped with before
   any of this — portrait enough for two people standing, short enough that a
   centred slide is not the tallest object on the page. */
.dg-slide img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--dg-emerald-deep);
}

/* THE LEDGE, and the marks set into it — the same brass sill the date niche
   stands on, and the same nailheads the cover counts knocks with.

   Its inline margin is the lintel's reach, so the ledge stops on the wall band
   rather than on the text column. */
.dg-dots {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-block-start: 1.5rem;
  padding-block-start: 1.15rem;
}

.dg-dots::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: calc(var(--dg-keyline) + 1px - var(--dg-pad));
  block-size: 3px;
  background: linear-gradient(
    to bottom,
    var(--dg-brass-light),
    var(--dg-brass) 55%,
    var(--dg-brass-deep)
  );
  box-shadow: 0 3px 7px -3px rgba(4, 42, 34, 0.45);
}

.dg-dot {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dg-dot::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: rgba(33, 48, 42, 0.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 250, 0.55);
  transition: background 0.3s ease-out, transform 0.3s ease-out,
    box-shadow 0.3s ease-out;
}

.dg-dot.is-on::before {
  background: linear-gradient(150deg, var(--dg-brass-light), var(--dg-brass) 70%);
  box-shadow: 0 0 0 1px rgba(183, 154, 85, 0.45), 0 1px 2px rgba(4, 42, 34, 0.4);
  transform: scale(1.28);
}

.dg-gallery-hint {
  margin: 1.1rem 0 0;
  font-size: 0.78rem;
  color: var(--dg-foliage);
  text-align: center;
}

/* NOTHING UPLOADED YET — an empty mount. See DargaTemplate. */
/* NO BOX. It was a bordered rectangle with a rounded mark in it, floating on
   paper. It stands on the courtyard wall now like the windows do, so the host
   who has just switched the gallery on sees the opening their photographs will
   be cut into rather than a placeholder card. */
.dg-gallery-empty {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  max-inline-size: 19rem;
  margin-inline: auto;
  padding: 1.5rem 1.5rem 0;
}

/* AN EMPTY WINDOW — the same shape the photographs will arrive in, with
   nothing behind the glass yet. It was a small rectangle with the page's
   diamond in the middle of it, which said "ornament" where it needed to say
   "this is where they go". */
/* The same opening as a real slide, at a tenth of the size and with nothing
   behind the glass yet — the reveal shadow and all. */
.dg-gallery-empty-mark {
  position: relative;
  inline-size: 5rem;
  block-size: 5.6rem;
  border: 1px solid var(--dg-line);
  border-radius: 50% 50% 0 0 / 2.5rem 2.5rem 0 0;
  background: var(--dg-emerald-deep);
  box-shadow: inset 0 0 1.4rem -0.4rem rgba(4, 26, 20, 0.9);
}

.dg-gallery-empty-mark::before {
  content: "";
  position: absolute;
  inset: 0.35rem;
  border: 1px solid rgba(255, 252, 244, 0.28);
  border-radius: 50% 50% 0 0 / 2.15rem 2.15rem 0 0;
}

.dg-gallery-empty-msg {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--dg-foliage);
  text-align: center;
}

/* The photo viewer. Portalled to .darga-scope — <body> loses every --dg-*
   token, and .dg-sec is a stacking context that caps this z-index at 1. */
/* THE VIEWER — the photograph taken out of the wall and held up.
   It was a flat near-black field with a rounded picture floating in it, which
   is every lightbox. What it is now is the one place on the invitation where a
   photograph is a PRINT: an ivory mount, a brass keyline, square corners, on a
   lit green ground. Nothing here is arched, and that is the point — an arch is
   an opening in a wall, and this picture has been lifted off it. */
.dg-lb {
  position: fixed;
  inset: 0;

  z-index: 60;
  display: grid;
  place-items: center;
  padding: 4.5rem 1.15rem 5.5rem;

  background:
    radial-gradient(
      ellipse 82% 62% at 50% 40%,
      rgba(11, 52, 42, 0.985),
      rgba(3, 22, 17, 0.995) 78%
    ),
    rgba(3, 22, 17, 0.995);
  animation: dg-lb-in 0.22s ease-out;
}

.dg-lb-veil {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: default;
}

/* THE MOUNT IS THE BORDER. There is no wrapper element in shared/Slider to
   put one on, and a border does the job exactly: an ivory margin round the
   picture with a brass hairline outside it.

   `box-sizing: border-box` IS LOAD-BEARING — without it the mount is added
   OUTSIDE `max-block-size: 100%` and a tall photograph on a short phone
   overflows the viewer by the width of its own frame.

   Square corners: a print has them, and the rounded ones it had were the last
   thing on this page that read as a UI component. */
.dg-lb-img {
  position: relative;
  box-sizing: border-box;
  max-inline-size: 100%;
  max-block-size: 100%;

  object-fit: contain;
  border: 0.5rem solid var(--dg-paper-light);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--dg-brass), 0 32px 60px -34px rgba(0, 0, 0, 0.9);
  animation: dg-lb-img-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dg-lb-bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;

  padding-block-start: max(1rem, env(safe-area-inset-top));
}

/* "1 / 4" is an LTR construct: left in the page's direction, bidi reorders the
   numbers around the slash and it renders "4 / 1". The DOM text is right and
   only a screenshot catches it. */
.dg-lb-count {
  direction: ltr;
  unicode-bidi: isolate;
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(216, 192, 138, 0.32);
  border-radius: var(--dg-r-pill);
  font-size: 0.82rem;
  color: var(--dg-brass-light);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Brass on green, like every other control this template lets a guest touch.
   Still circles and still 2.75rem: these are the only three UI affordances on
   the invitation and dressing them as architecture would make them harder to
   find, not better. */
.dg-lb-x,
.dg-lb-arrow {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid rgba(216, 192, 138, 0.45);
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.07);
  color: var(--dg-brass-light);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.dg-lb-x svg,
.dg-lb-arrow svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.dg-lb-x:active,
.dg-lb-arrow:active {
  border-color: var(--dg-brass-light);
  background: rgba(216, 192, 138, 0.2);
}

.dg-lb-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.dg-lb-nav {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  padding: 1.1rem;
  padding-block-end: max(1.1rem, env(safe-area-inset-bottom));
}

@keyframes dg-lb-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dg-lb-img-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* THE ONE BOX THAT STAYED, drawn like the sheet so it reads as a reply card.
   NOTHING INSIDE IT 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. */
.dg-rsvp {
  position: relative;
  /* Top padding clears the arch's rise. */
  padding: 3.9rem 1.5rem 2rem;
  border: 1px solid var(--dg-line);
  /* A SHALLOW ARCH, against the invitation's tall one. The two are the only
     pieces of stationery on the page and they are a pair — the document and
     the answer to it — so the reply wears the same head at half the rise.
     Deeper and it is a second invitation; square and it is a form. */
  border-radius: var(--dg-arch-md);
  background: var(--dg-paper-light);
  box-shadow: var(--dg-shade-1), 0 22px 44px -36px var(--dg-shadow);
  text-align: start;
}

.dg-rsvp::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border: 1px solid var(--dg-line-soft);
  border-radius: 50% 50% 0 0 / 1.95rem 1.95rem 0 0;
  pointer-events: none;
}

/* TWO EXCEPTIONS, both height: the yes/no pair came 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. */
.dg-rsvp button[aria-pressed] {
  min-block-size: 3rem;
}

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

/* Entries in a book, not a feed: one keyline round the set, hairlines
   between. */
.dg-wishes {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-wish {
  padding: 1.6rem 1.35rem 1.4rem;
  background: var(--dg-paper-light);
  text-align: start;

  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms + 200ms);
}

.dg-reveal.is-visible .dg-wish {
  opacity: 1;
  transform: none;
}

.dg-wishes {
  border: 1px solid var(--dg-line-soft);
  border-radius: var(--dg-r-sm);
  overflow: hidden;
}

.dg-wish + .dg-wish {
  border-block-start: 1px solid var(--dg-line-soft);
}

.dg-wish-msg {
  margin: 0;
  font-family: var(--font-verse), var(--font-vazir), serif;
  font-size: 1.06rem;
  line-height: 1.95;
  color: var(--dg-ink);
  overflow-wrap: break-word;
}

/* No rule above it: a second horizontal line inside a bordered list is one
   too many. The dash is what a signed note has. */
.dg-wish-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.84rem;
  color: var(--dg-brass-deep);
}

.dg-wish-name::before {
  content: "";
  inline-size: 1.1rem;
  block-size: 1px;
  background: var(--dg-brass);
  flex: none;
}

/* INSET TO THE KEYLINE ON THREE SIDES, so the gold frame closes around it —
   the leaf's own bottom border is what it stops against. Its top edge is flush
   with the paper above: that is a change of ground inside one panel, not a
   seam between two objects. Margins rather than an inset layer, because unlike
   the colonnade this element IS the panel rather than a wrapper round
   sections. */
.dg-closing {
  position: relative;
  margin-inline: calc(var(--dg-keyline) + 1px);
  margin-block-end: calc(var(--dg-keyline) + 1px);

  z-index: 2;

  /* The damask is a `cover` background, so this padding IS the picture's
     height. It was 7rem and read as a screen of wallpaper under three lines. */
  padding-block: 4.25rem;
  padding-inline: 1.5rem;
  background: var(--dg-emerald);
  color: var(--dg-paper-light);
  text-align: center;
}

/* The vine, both edges of the closing panel, taller than it and cropped by it.
   One file, mirrored. PHYSICAL edges like the sheet's sprays: the drawing has
   a direction and a mirrored pair must stay one whichever way the text runs. */
.dg-vine {
  position: absolute;
  top: 50%;
  left: -1.6rem;
  z-index: 0;
  inline-size: 5.25rem;
  block-size: auto;
  transform: translateY(-50%);
  /* 0.5 again, down from 0.72. That number was raised when the flowers stopped
     being violet, and then the damask went: with a flat ground behind them the
     two vines were the loudest thing in the panel and the closing line was
     reading between them rather than in front of them. */
  opacity: 0.5;
  pointer-events: none;
}

.dg-vine--b {
  left: auto;
  right: -1.6rem;
  transform: translateY(-50%) scaleX(-1);
}

/* TRAP: the rules are a BACKGROUND on the unrotated span and the diamond is
   the pseudo-element. Rotating the span and hanging the rules off it sends
   them out at 45deg, and counter-rotating lands them in the wrong place. */
.dg-closing-mark {
  position: relative;
  display: block;
  inline-size: 7rem;
  block-size: 0.4rem;
  /* 2.9rem, up from 1.75rem: the closing arch now starts above this mark and
     encloses it, and at the old spacing the curve clipped the rule's ends. */
  margin: 0 auto 2.9rem;
  background: linear-gradient(
      to right,
      rgba(216, 192, 138, 0) 0%,
      rgba(216, 192, 138, 0.55) 22%,
      rgba(216, 192, 138, 0.55) 38%,
      rgba(216, 192, 138, 0) 40%,
      rgba(216, 192, 138, 0) 60%,
      rgba(216, 192, 138, 0.55) 62%,
      rgba(216, 192, 138, 0.55) 78%,
      rgba(216, 192, 138, 0) 100%
    )
    center / 100% 1px no-repeat;
}

.dg-closing-mark::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(50% - 0.2rem);
  inline-size: 0.4rem;
  block-size: 0.4rem;
  rotate: 45deg;
  background: var(--dg-brass-light);
}

/* THE LAST DOORWAY. The page opens on a door, arrives through one, and ends
   inside one: the same brass outline as the cover and the hero, drawn from
   above the closing mark so the mark sits in it as its crown. Third and last
   use — a fourth would make it a border style rather than a shape the page
   keeps returning to.

   The arch is hung off the MESSAGE rather than off a wrapper because there is
   no wrapper here and adding one to a twelve-line footer to hold a line is a
   poor trade. Its top inset reaches back over the mark on purpose. */
.dg-closing-msg {
  position: relative;
  max-width: 26ch;
  margin: 0 auto;
  font-size: 1.24rem;
  line-height: 2.1;
  color: var(--dg-paper-light);
}

.dg-closing-msg::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: -5rem -2.6rem;
  inline-size: min(20.5rem, 100% + 3.6rem);
  /* Physical, both halves — see the note on .dg-gate-inner::before. */
  left: 50%;
  translate: -50%;
  /* Stronger than the cover's and the hero's: with the damask gone this is the
     only drawn thing on a flat ground, and at 0.28 it disappeared. */
  border: 1px solid rgba(216, 192, 138, 0.42);
  border-block-end: 0;
  border-radius: 50% 50% 0 0 / 5.4rem 5.4rem 0 0;
  pointer-events: none;
}

.dg-hashtag {
  margin: 2rem 0 0;
  font-size: 0.88rem;
  color: var(--dg-brass-light);
}

/* 40%, not the 54% these were: two sprays at that size covered more than the
   page diagonal and the sheet read as a wreath with words in it. */
.dg-sheet-corner {
  position: absolute;
  z-index: 0;
  inline-size: 36%;
  max-inline-size: 11rem;
  block-size: auto;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1.4s ease-out 0.25s, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

/* PHYSICAL corners, not logical. The spray is drawn as a top-RIGHT corner and
   must stay there whichever way the text runs — one that flipped with the
   writing direction would point into the page.

   THE TOP ONE MOVED DOWN, 2026-08-27. The sheet has an arched head, so there
   is no top-right corner any more: at (-1px, -1px) the spray sat outside the
   curve and floated off the paper with a hand's width of nothing under it. It
   hangs from the arch's SHOULDER now, which is where a garland on a real
   doorway hangs from. The foot spray is untouched — that corner is still a
   corner. */
.dg-sheet-corner {
  top: 2.6rem;
  right: -0.4rem;
}

.dg-sheet-corner--b {
  top: auto;
  right: auto;
  bottom: -1px;
  left: -1px;
  transform: scale(0.94) rotate(180deg);
}

.dg-reveal.is-visible .dg-sheet-corner {
  opacity: 0.85;
  transform: scale(1);
}

.dg-reveal.is-visible .dg-sheet-corner--b {
  transform: scale(1) rotate(180deg);
}

/* Lifts the sheet's CONTENT above the corner sprays. It MUST keep excluding
   anything positioned by hand: at (0,2,0) it outranks a plain class, so
   .dg-seal's `absolute` lost to this `relative` and the seal landed 199px off
   centre, hanging past the edge of the paper. */
.dg-sheet > :not(.dg-sheet-corner):not(.dg-seal) {
  position: relative;
  z-index: 1;
}

/* At the 78% these were, the rule was as wide as the text and read as a third
   piece of content rather than as punctuation between two. */
.dg-div {
  display: flex;
  justify-content: center;
  padding-block: calc(var(--dg-rhythm) * 0.32);
  padding-inline: 1.5rem;
}

.dg-div img {
  inline-size: min(13rem, 56%);
  block-size: auto;
  opacity: 0.8;
}

/* THE DAMASK IS GONE, 2026-08-27, at the founder's call — they asked whether
   the picture behind this panel was still earning its place and said to change
   or remove it.

   It was not earning it. `panel.webp` is a mid-green damask under a 0.42 wash
   of darker green, which is what it took to make the panel the darkest thing
   on the page — and at that value the pattern is very nearly invisible. What
   the guest actually saw was a flat dark green rectangle, paid for with an
   820px image request and a `cover` upscale, with the two vines doing all of
   the visible work.

   THE FILE IS NOT ORPHANED. lib/templates/themes.js still uses it as this
   theme's `cardGround` — the ground the shareable story card is printed on,
   where it is seen at full strength on a small card and is exactly right. Do
   not delete it.

   What replaces it says something the damask could not: WARM LIGHT BEHIND THE
   DOORWAY. The guest is leaving, the arch below is the last opening, and there
   is light on the other side of it. Flat darkest green, one radial sitting
   inside the arch, and the sheen still crossing it. It also makes the two dark
   grounds the same material — the colonnade is flat green lit from its head
   and so is this, which is one house rather than two. */
.dg-closing {
  position: relative;
  background-color: var(--dg-emerald-deep);
  background-image:
    radial-gradient(
      ellipse 46% 52% at 50% 38%,
      rgba(216, 192, 138, 0.16),
      rgba(216, 192, 138, 0.05) 46%,
      rgba(216, 192, 138, 0) 74%
    );
  overflow: hidden;
}

.dg-closing::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  pointer-events: none;
  background: linear-gradient(
    75deg,
    rgba(255, 253, 247, 0) 42%,
    rgba(216, 192, 138, 0.13) 50%,
    rgba(255, 253, 247, 0) 58%
  );
  transform: translateX(-40%);
}

.dg-closing.is-visible::before {
  animation: dg-sheen 3.6s ease-in-out 0.6s both;
}

@keyframes dg-sheen {
  from { transform: translateX(-40%); }
  to { transform: translateX(40%); }
}

/* Same rule, same exclusion: the vines are placed by hand at the panel's edges
   and must not be dragged back into the flow by this. */
.dg-closing > :not(.dg-vine) {
  position: relative;
  z-index: 1;
}

/* FIXED, which is what makes the count mean anything: scattered down a
   seven-screen page only count/7 are ever on screen. Hero and closing are
   z-index 2 and opaque. DargaDrift toggles .is-running. */
.dg-drift {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.dg-drift-el {
  position: absolute;

  inset-block-start: -14%;
  block-size: auto;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: dg-fall-leaf;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.dg-drift.is-running .dg-drift-el {
  animation-play-state: running;
}

@keyframes dg-fall-leaf {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  12% { opacity: var(--dg-drift-o, 0.3); }
  82% { opacity: var(--dg-drift-o, 0.3); }
  100% {
    opacity: 0;
    transform: translate3d(var(--dg-drift-x, 30px), var(--dg-drift-y, 90vh), 0)
      rotate(var(--dg-drift-r, 160deg));
  }
}

.dg-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.dg-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* MOVEMENT stops; cross-fades do not — a blanket `animation: none` cuts the
   gate-to-hero handoff hard, which is worse than what was asked for. Nothing
   may be stranded at opacity 0, and the scroll cue stays: it is wayfinding. */
@media (prefers-reduced-motion: reduce) {

  .dg-shake,
  .dg-bloom,
  .dg-gate-greet,
  .dg-gate-out,
  .dg-map-pin::after,
  .dg-cue-chev {
    animation: none;
  }

  .dg-petal,
  .dg-puff,
  .dg-bloom,
  .dg-hero-spill {
    display: none;
  }

  .dg-reveal,
  .dg-hero-copy,
  .dg-cue,
  .dg-date-num,
  .dg-reveal.is-visible .dg-date-num,
  .dg-prog-row,
  .dg-note,
  .dg-wish,
  .dg-slide,
  .dg-reveal.is-visible .dg-prog-row,
  .dg-reveal.is-visible .dg-note,
  .dg-reveal.is-visible .dg-wish,
  .dg-reveal.is-visible .dg-slide {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* The nodes are DRAWN, not animated in. DargaProgramme marks every row
     `is-on` immediately here, so the fill below is the state they arrive in. */
  .dg-prog-row::before,
  .dg-prog-row.is-on::before {
    opacity: 1;
    transform: scale(1);
    transition: none;
  }

  /* The nailheads light without the spring. */
  .dg-stud {
    transition: none;
  }

  .dg-cd-unit::after {
    transition: none;
  }

  .dg-lb,
  .dg-lb-img {
    animation: none;
  }

  .dg-sheet-corner,
  .dg-reveal.is-visible .dg-sheet-corner {
    opacity: 0.92;
    transform: none;
    transition: none;
  }

  .dg-sheet-corner--b,
  .dg-reveal.is-visible .dg-sheet-corner--b {
    transform: rotate(180deg);
  }

  .dg-closing.is-visible::before {
    animation: none;
  }

  /* Every slide at full size and full strength: the dimming is a motion
     effect, and without the transition it would just be a permanently faded
     photograph on either side. */
  .dg-slide-btn,
  .dg-slide.is-active .dg-slide-btn,
  .darga-scope .ah-slide-btn,
  .darga-scope .ah-slide.is-active .ah-slide-btn {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .dg-slides {
    scroll-behavior: auto;
  }

  .dg-dot::before,
  .darga-scope .ah-dot::before {
    transition: none;
  }

  /* The lintel is LAID, not drawn out of the title. */
  .dg-lin {
    transform: scaleX(1);
    transition: none;
  }

  /* The rail is full rather than scroll-linked — DargaProgramme sets the
     variable to 1 and never binds a listener under `reduce`. */
  .dg-prog::after {
    transform: scaleY(1);
  }

  .dg-gate.is-leaving {
    animation: dg-fade-out 0.7s ease-out both;
  }

  .dg-gate-video {
    transition: opacity 0.25s linear;
  }
}

@keyframes dg-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (min-width: 48rem) {
  .darga-scope {
    --dg-rhythm: 6.5rem;
    --dg-maxw: 32rem;
    /* The leaf gets a little wider and the stone either side gets a lot. On a
       desktop this is a door standing in a room rather than a phone-shaped
       strip of paper, and it is the same object the phone sees. */
    --dg-leaf: 37rem;
    --dg-gutter: 3rem;
  }

  .dg-hero {
    padding-block-end: clamp(7rem, 18svh, 12rem);
  }

  .dg-hero-copy {
    max-inline-size: 30rem;
  }

  .dg-h2 {
    font-size: 2rem;
  }

}

@keyframes dg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

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

   Two shared components render INSIDE .darga-scope but OUTSIDE .dg-body — the
   guest album and the credit footer — and until now this template dressed
   neither. They arrived in the app's default skin: a plain ivory band, a
   generic gold ornament, a square photo grid. Sitting under a page that had
   just been rebuilt as a building, they read as two screens from a different
   product.

   BOTH ARE SELECTED BY A REAL CLASS NAME (`ah-album`, `ah-madewith`), added to
   those components for this pass. That is not decoration: the music toggle a
   few rules down 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 .darga-scope, so hena, zerf, perde and gulbaran
   keep the default skin exactly as it was. */

/* ── THE ALBUM IS A SECOND, SMALLER LEAF ─────────────────────────────────
   It is posted the morning after the wedding, which is a different day, so it
   is a different sheet rather than a continuation of the invitation — and it
   is STONE rather than paper, because what is set into it are the same arched
   openings the courtyard wall carries. A wall, with the morning's pictures in
   it, standing where the guest left. */
.darga-scope .ah-album {
  inline-size: min(var(--dg-leaf), 100% - var(--dg-gutter) * 2);
  max-inline-size: none;
  margin-inline: auto;
  margin-block-end: 3rem;
  padding: 3.6rem 1.4rem 3rem;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-arch-md);
  /* PAPER, NOT STONE, and this was got wrong once: it was --dg-paper-deep, the
     same value as the ground the whole page stands on, so the panel had no
     presence at all — its arch was a floating outline with the identical
     colour on both sides of it. It is the invitation's own leaf, one page
     later, so it is made of the same thing the invitation is. */
  background-color: var(--dg-paper);
  background-image: url("/templates/darga/paper.webp");
  background-repeat: repeat;
  background-size: 400px 400px;
  box-shadow: var(--dg-shade-1), 0 24px 46px -34px var(--dg-shadow);
  text-align: center;
}

/* And the wall inside it, so the openings have masonry to be cut into — the
   same band the invitation's gallery stands on, at the width of this panel.
   The hook is on the div GuestAlbum already wrapped the slider in. */
.darga-scope .ah-album-shelf {
  position: relative;
  margin-block-start: 2rem;
}

.darga-scope .ah-album-shelf::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: -1.4rem;
  inset-inline: -1.4rem;
  background-color: var(--dg-paper-deep);
  background-image:
    linear-gradient(to right, rgba(183, 154, 85, 0), var(--dg-line) 22%, var(--dg-line) 78%, rgba(183, 154, 85, 0)),
    linear-gradient(to right, rgba(183, 154, 85, 0), var(--dg-line) 22%, var(--dg-line) 78%, rgba(183, 154, 85, 0));
  background-repeat: no-repeat;
  background-position: top, bottom;
  background-size: 100% 1px, 100% 1px;
  box-shadow: inset 0 10px 20px -18px rgba(7, 43, 34, 0.5),
    inset 0 -10px 20px -18px rgba(7, 43, 34, 0.5);
  pointer-events: none;
}

/* Above the wall it is standing on. */
.darga-scope .ah-album-shelf > * {
  position: relative;
  z-index: 1;
}

/* The lintel, built out of the heading's own two pseudos — .dg-head gets two
   real spans because Block draws them, and there is no markup to add here. */
.darga-scope .ah-album-head {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 3.4vw, 1.15rem);
  margin: 0 0 1.6rem;
  font-family: var(--font-script), var(--font-vazir), serif;
  font-size: clamp(1.4rem, 5.6vw, 1.8rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--dg-display);
}

.darga-scope .ah-album-head::before,
.darga-scope .ah-album-head::after {
  content: "";
  flex: 1 1 2rem;
  min-inline-size: 0.75rem;
  block-size: 1px;
  background: var(--dg-brass);
}

/* The sealed note, the revealed note, the empty note and the thanks — every
   one of them is a bare <p> under the heading. */
.darga-scope .ah-album p {
  margin-block-start: 0.75rem;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--dg-foliage);
  /* The shared component dims these with a utility; the colour above is the
     dimming, and 0.7 on top of it is a note nobody can read on stone. */
  opacity: 1;
}

.darga-scope .ah-album-add {
  gap: 0.85rem;
  margin-block-start: 1.8rem;
}

/* Stationery, not a form field: square, ruled, on the paper the invitation is
   printed on rather than on the wall. */
.darga-scope .ah-album-add input[type="text"],
.darga-scope .ah-album-add input:not([type]) {
  border-radius: 2px;
  border-color: var(--dg-line);
  background: var(--dg-paper-light);
  color: var(--dg-ink);
}

.darga-scope .ah-album-add label {
  min-block-size: 2.9rem;
  border: 1px solid rgba(216, 192, 138, 0.5);
  background: var(--dg-emerald);
  color: var(--dg-paper-light);
}

/* ── THE DOORSTEP ────────────────────────────────────────────────────────
   The credit footer is the one part of the page that is genuinely OUTSIDE the
   building — it belongs to Ahang, not to the couple — so it is the stone the
   leaf has been standing on all along, with a brass ledge where you step down
   out of the far door onto it.

   The generic Ornament is hidden rather than recoloured. It draws a diamond
   between two rules with two dots, which is a fourth diamond on a page that
   spent this redesign getting down to three, and a vocabulary that is not this
   template's. The ledge says the same thing and says it in darga's words. */
.darga-scope .ah-madewith {
  position: relative;
  gap: 1.15rem;
  padding-block: 2.6rem 3rem;
  border-block-start: 0;
  background: var(--dg-paper-deep);
}

.darga-scope .ah-madewith::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(
    to bottom,
    var(--dg-brass-light),
    var(--dg-brass) 55%,
    var(--dg-brass-deep)
  );
  box-shadow: 0 3px 8px -3px rgba(4, 42, 34, 0.4);
}

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

.darga-scope .ah-madewith p {
  font-size: 0.86rem;
  color: var(--dg-foliage);
}

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

/* Still filled, and deliberately: this is the growth loop and the one thing on
   the page we are asking a guest to tap for our own sake. It is sized down and
   given the brass keyline every other emerald object here carries, so it
   belongs to the design instead of shouting over it. */
.darga-scope .ah-madewith a {
  min-block-size: 2.75rem;
  padding-inline: 1.4rem;
  border: 1px solid rgba(216, 192, 138, 0.5);
  border-radius: var(--dg-r-pill);
  background: var(--dg-emerald);
  font-size: 0.86rem;
  box-shadow: 0 12px 24px -16px rgba(4, 42, 34, 0.7);
}

/* ── THE ALBUM WEARS THE GALLERY ─────────────────────────────────────────
   GuestAlbum renders the same shared/Slider the invitation does, with
   `prefix="ah"` — so it draws .ah-slide / .ah-dot / .ah-lb, styled generically
   in app/globals.css from the --tpl-* tokens. That is why it re-colours itself
   per template without either side knowing about the other, and also why it
   still had square photographs and a pill-shaped page indicator under a
   gallery made of arched openings.

   Both are the same snap track — there is only one layout again, so the album
   behaves exactly the way the invitation's gallery does without either side
   having to be told. An album that browsed differently from the gallery above
   it would be a second gesture to learn for the same thing.

   Restated rather than folded into a selector list with the .dg-* rules,
   because the two live at different specificities and in different places: the
   .dg-* ones are the template's own and the .ah-* ones have to outrank a
   generic skin loaded before this file. */
.darga-scope .ah-slides {
  gap: 0.7rem;
  padding: 0;
}

.darga-scope .ah-slide-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-r-sm);
  background: var(--dg-emerald-deep);
  box-shadow: var(--dg-shade-1), 0 18px 34px -24px rgba(7, 43, 34, 0.5);
  transform: scale(0.92);
  opacity: 0.5;
}

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

.darga-scope .ah-slide img {
  aspect-ratio: 4 / 5;
  background: var(--dg-emerald-deep);
}

/* The ledge, reaching the album panel's own side padding. */
.darga-scope .ah-dots {
  position: relative;
  gap: 0.35rem;
  margin-block-start: 1.5rem;
  padding-block-start: 1.15rem;
}

.darga-scope .ah-dots::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: -1.4rem;
  block-size: 3px;
  background: linear-gradient(
    to bottom,
    var(--dg-brass-light),
    var(--dg-brass) 55%,
    var(--dg-brass-deep)
  );
  box-shadow: 0 3px 7px -3px rgba(4, 42, 34, 0.45);
}

/* A stud, and a target big enough to hit. The generic dot is a 6px button,
   which is a fifth of the touch minimum — restating the size here fixes that
   for this template as a side effect of restyling it. */
.darga-scope .ah-dot {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 0;
  background: none;
  transition: none;
}

.darga-scope .ah-dot::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: rgba(33, 48, 42, 0.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 250, 0.55);
  transition: background 0.3s ease-out, transform 0.3s ease-out;
}

.darga-scope .ah-dot.is-on {
  inline-size: 1.5rem;
  border-radius: 0;
  background: none;
}

.darga-scope .ah-dot.is-on::before {
  background: linear-gradient(150deg, var(--dg-brass-light), var(--dg-brass) 70%);
  box-shadow: 0 0 0 1px rgba(183, 154, 85, 0.45), 0 1px 2px rgba(4, 42, 34, 0.4);
  transform: scale(1.28);
}

.darga-scope .ah-gallery-hint {
  margin-block-start: 1.1rem;
  font-size: 0.78rem;
  color: var(--dg-foliage);
}

/* The viewer, the same print on the same lit ground. */
.darga-scope .ah-lb {
  background:
    radial-gradient(
      ellipse 82% 62% at 50% 40%,
      rgba(11, 52, 42, 0.985),
      rgba(3, 22, 17, 0.995) 78%
    ),
    rgba(3, 22, 17, 0.995);
}

.darga-scope .ah-lb-img {
  box-sizing: border-box;
  border: 0.5rem solid var(--dg-paper-light);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--dg-brass), 0 32px 60px -34px rgba(0, 0, 0, 0.9);
}

.darga-scope .ah-lb-x,
.darga-scope .ah-lb-arrow {
  border: 1px solid rgba(216, 192, 138, 0.45);
  background: rgba(255, 253, 247, 0.07);
  color: var(--dg-brass-light);
}

.darga-scope .ah-lb-count {
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(216, 192, 138, 0.32);
  border-radius: var(--dg-r-pill);
  color: var(--dg-brass-light);
}


/* 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 green circle — a silent downgrade.
   2.75rem is the 44px touch minimum; do not go under. */
.darga-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(216, 192, 138, 0.45);
  background: var(--dg-emerald);
  color: var(--dg-brass-light);
  box-shadow: 0 6px 20px -8px rgba(4, 42, 34, 0.55);
  /* A slow breath, so the invitation reads as having sound without a label. */
  animation: dg-pulse 4.5s ease-in-out infinite;
}

.darga-scope button.fixed.bottom-5.end-5:hover {
  scale: 1;
  background: var(--dg-emerald-deep);
}

@keyframes dg-pulse {
  0%, 100% { box-shadow: 0 6px 20px -8px rgba(4, 42, 34, 0.55), 0 0 0 0 rgba(216, 192, 138, 0.3); }
  50% { box-shadow: 0 6px 20px -8px rgba(4, 42, 34, 0.55), 0 0 0 7px rgba(216, 192, 138, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .darga-scope button.fixed.bottom-5.end-5 {
    animation: none;
  }
}