/* =========================================================================================
   Makateeb Envelope 2.0 - the invitation opening (invitation-envelope-v2.js drives it).
   The front: the guest's name lettered by hand, an engraved stamp, a postmark. The back: pocket, flap,
   wax seal. One light, top-left. Only transform and opacity ever animate; filters, masks and blends sit
   on leaf elements that never move on their own (they flatten preserve-3d).
   Colours come from the invitation (sa_envelope_intro_css: --env-base paper, --env-text ink,
   --env-accent) and the family (--env-wax-family, the ornament, the fold); data-tone says whether the
   paper is light or dark.
   ========================================================================================= */

/* ---------- fonts: one family per ROLE, a face per script (Latin / Arabic / Hebrew) by unicode-range.
   A Latin name on an Arabic page gets the Latin script face, Hebrew never falls to a system font, and
   every static face declares a weight RANGE so asking for 600 of a 500-only face draws it as designed
   instead of faking bold. Accented Latin (Latin Extended: Łucja, Šárka, Ştefan) comes from the same two
   faces; Cyrillic names get Great Vibes (Pinyon has none) and Cyrillic labels Cormorant SC.
   Arabic is Amiri Bold (classical Naskh) and Hebrew Frank Ruhl Libre (variable, the name at 600) - the
   faces the invitations set their own Arabic and Hebrew titles in; the handwriting faces read weak and
   informal next to the English script (owner, 2026-09-25).
   EVERY face of a family declares the SAME weight range (300 900): Chrome groups a unicode-range family by
   its descriptors and uses only the best-matching group, so one variable face at 300 900 among 400 700 static
   ones made every other script fall back to the page's fonts.
   All SIL Open Font License (see /assets/fonts/envelope/OFL.txt). */
@font-face{font-family:'E2 NameA';font-style:normal;font-weight:300 900;font-display:block;src:url(/assets/fonts/envelope/pinyon-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'E2 NameA';font-style:normal;font-weight:300 900;font-display:block;src:url(/assets/fonts/envelope/pinyon-latinext-400.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'E2 NameA';font-style:normal;font-weight:300 900;font-display:block;src:url(/assets/fonts/envelope/greatvibes-cyrillic-400.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'E2 NameA';font-style:normal;font-weight:300 900;font-display:block;src:url(/assets/fonts/envelope/greatvibes-cyrillicext-400.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'E2 NameA';font-style:normal;font-weight:300 900;font-display:block;src:url(/assets/fonts/envelope/amiri-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'E2 NameA';font-style:normal;font-weight:300 900;font-display:block;src:url(/assets/fonts/envelope/frankruhllibre-hebrew-var.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'E2 LabelA';font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/envelope/cinzel-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'E2 LabelA';font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/envelope/cinzel-latinext-600.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'E2 LabelA';font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/envelope/cormorantsc-cyrillic-600.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'E2 LabelA';font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/envelope/amiri-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'E2 LabelA';font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/envelope/frankruhllibre-hebrew-var.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}

html.sa-lock,body.sa-lock{overflow:hidden!important;height:100%;touch-action:none}

/* ---------- 1. overlay + tokens ---------- */
.sa-intro-env.e2{
  --env-paper:var(--env-base,var(--ivory,#F6F1E7));
  --env-ink:var(--env-text,var(--ink,#3B362E));
  --env-accent:var(--gold,#8C7448);
  --e2-surface:color-mix(in oklab,color-mix(in oklab,var(--env-paper) 74%,var(--env-accent) 26%) 62%,#17110a 38%);
  --e2-wax:color-mix(in oklab,var(--env-wax-family,#C3B294) 78%,var(--env-accent) 22%);
  --e2-name-ink:color-mix(in oklab,var(--env-ink) 90%,#000 10%);
  /* the small tracked labels (caption, sender) take the ink itself; the script checks the contrast */
  --e2-label:var(--e2-name-ink);
  --e2-mark-ink:#2A2833;--e2-mark-op:.56;--e2-mark-blend:multiply;
  --e2-tex-blend:multiply;--e2-tex-op:.34;--e2-light:.24;
  --e2-liner-edge:color-mix(in oklab,var(--env-paper) 90%,#000 10%);
  position:fixed;inset:0;z-index:9999;display:none;isolation:isolate;overflow:hidden;
  container-type:size;color:var(--e2-name-ink);font-synthesis:none;
  -webkit-tap-highlight-color:transparent;
}
.sa-intro-env.e2[data-tone=dark]{
  --e2-name-ink:color-mix(in oklab,var(--env-accent) 72%,#fff 28%);
  --e2-label:color-mix(in oklab,var(--env-accent) 50%,#fff 50%);
  --e2-mark-ink:#EDE3CC;--e2-mark-op:.46;--e2-mark-blend:screen;
  --e2-tex-blend:soft-light;--e2-tex-op:.2;--e2-light:.1;
}
.sa-intro-env.e2.is-ready{display:block}
.sa-intro-env.e2.hidden{display:none!important}
/* set before the overlay is parsed (envelope_renderer_v2.php): already opened in this tab -> never shown;
   script on but the envelope not mounted yet -> the name waits, unwritten, for the write-on */
html.sa-env-seen .sa-intro-env.e2:not(.sa-intro-env--inline){display:none!important}
html.sa-env-js .sa-intro-env.e2:not([data-mounted]) :is(.e2-name,.e2-flourish,.e2-caption){visibility:hidden}
.sa-intro-env.e2.sa-intro-env--inline{position:absolute;z-index:2;width:100%;height:100%}
.sa-intro-env.e2:focus{outline:0}
/* the page sets *{max-width:100%} globally; the postmark and shadows are deliberately larger than their boxes */
.sa-intro-env.e2,.sa-intro-env.e2 *,.sa-intro-env.e2 *::before,.sa-intro-env.e2 *::after{max-width:none}

/* ---------- 2. the table the envelope lies on ---------- */
.e2-stage{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 42%;
  background:radial-gradient(120% 80% at 50% 28%,color-mix(in oklab,var(--e2-surface) 78%,#fff 22%),var(--e2-surface) 56%,color-mix(in oklab,var(--e2-surface) 70%,#000 30%))}
.e2-shadow{position:absolute;inset:0;opacity:0;pointer-events:none}
.e2-shadow::before{content:'';position:absolute;inset:3% 4% -1% 4%;border-radius:3%;background:rgba(8,5,2,.55);filter:blur(22px)}
/* transform only on the 3D rig: will-change:opacity would group it and flatten the turn (the front then
   shows through, mirrored, while the back comes round) */
.sa-intro-env.e2.is-armed .e2-flip{will-change:transform}
.sa-intro-env.e2.is-armed .e2-shadow{will-change:transform,opacity}

/* ---------- 3. the flip rig: front and back, each a leaf face ---------- */
.e2-flip{position:absolute;inset:0;transform-style:preserve-3d}
.e2-face{position:absolute;inset:0;overflow:hidden;isolation:isolate;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.e2-front{transform:rotateY(0deg) translateZ(.01px)}
.e2-back{transform:rotateY(180deg) translateZ(.01px)}
.e2-shade{position:absolute;inset:0;pointer-events:none;background:#0a0703;opacity:0}
.e2-shade--svg{background:none;inline-size:100%;block-size:100%;overflow:visible}

/* paper: the invitation's paper colour, the family's cotton grain, one light */
.e2-paper{position:absolute;inset:0;background-color:var(--env-paper)}
.e2-paper::before{content:'';position:absolute;inset:0;background:var(--env-grain,none) 0 0/100% 100% no-repeat;
  mix-blend-mode:var(--e2-tex-blend);opacity:var(--e2-tex-op)}
.e2-paper::after{content:'';position:absolute;inset:0;
  background:radial-gradient(130% 90% at 18% 6%,rgba(255,255,255,var(--e2-light)),rgba(255,255,255,0) 55%),
             linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(20,12,4,.08))}

/* ---------- 4. the front ---------- */
/* the family ornament, in the corner it was drawn for (v1's measured anchors, section 12) */
.e2-orn{position:absolute;pointer-events:none;
  inline-size:var(--env-art-w,38%);block-size:auto;max-block-size:var(--env-art-h,34%);
  object-fit:contain;object-position:var(--env-art-pos,left bottom);opacity:var(--env-art-o,.9);
  inset-inline-start:var(--env-art-is,4%);inset-inline-end:var(--env-art-ie,auto);
  inset-block-start:var(--env-art-bs,auto);inset-block-end:var(--env-art-be,4%)}
.sa-intro-env.e2[dir=rtl] .e2-orn{transform:scaleX(var(--env-art-rtl,-1))}

/* stamp top-right in every language (where post offices want it); the postmark overlaps its inner
   lower edge and its waves run away from the stamp. All in container units of the envelope. */
.e2-post{position:absolute;right:6cqw;top:3.4cqh;inline-size:29cqmin;block-size:34.8cqmin}
.e2-stamp{position:absolute;inset:0;transform:rotate(1.6deg);
  filter:drop-shadow(.4px .7px .6px rgba(30,20,8,.28)) drop-shadow(1.5px 3.5px 5px rgba(30,20,8,.16))}
.e2-stamp svg,.e2-mark svg{display:block;inline-size:100%;block-size:100%}
.e2-mark{position:absolute;left:-239.02%;top:21.16%;inline-size:280.43%;block-size:85.69%;
  transform-origin:81.667% 50%;transform:rotate(-7deg);pointer-events:none;
  color:var(--e2-mark-ink);opacity:var(--e2-mark-op);mix-blend-mode:var(--e2-mark-blend);
  -webkit-mask:url(/assets/envelope-v2/grain.png) 0 0/140px 140px;mask:url(/assets/envelope-v2/grain.png) 0 0/140px 140px}
/* A pale ink screened onto dark paper vanishes on the stamp's cream: there the same strike prints dark.
   A copy clipped to the stamp's paper (inside the perforation) and turned back square carries it. */
.e2-stamp-ink{position:absolute;inset:0;transform:rotate(1.6deg);clip-path:inset(calc(2.25% + 1px) calc(2.7% + 1px));pointer-events:none;display:none}
.sa-intro-env.e2[data-tone=dark] .e2-stamp-ink{display:block}
.e2-stamp-ink>.e2-mark-on{position:absolute;inset:0;transform:rotate(-1.6deg)}
.e2-stamp-ink .e2-mark{color:#1E2638;opacity:.6;mix-blend-mode:multiply}

.e2-name{position:absolute;top:41.5cqh;inset-inline:7cqw;text-align:center;color:var(--e2-name-ink);
  font:400 15.8cqmin/1.15 'E2 NameA',var(--font-script,Georgia),serif;text-wrap:balance;font-kerning:normal;unicode-bidi:isolate;
  overflow-wrap:normal;word-break:keep-all;hyphens:none}
.e2-name[data-script=arab]{font-size:13.6cqmin}
.e2-name[data-script=hebr]{font-size:13.2cqmin;font-weight:600}
.e2-name .run{unicode-bidi:isolate}
.e2-name .w{display:inline-block;padding:.12em .1em .22em;margin:-.12em -.1em -.22em}
/* while it writes, the mask needs room for swashes, ascenders and marks (the box is the mask's edge);
   equal negative margins keep the layout exactly as measured */
.e2-writing .e2-name .w{padding:.55em .45em .7em;margin:-.55em -.45em -.7em}
/* the write-on: a soft-edged mask sweeps each word from where ITS script starts (only while writing, so
   the name is never hidden if the script does not run) */
.e2-writing .e2-name .w{
  -webkit-mask-image:linear-gradient(90deg,#000 46%,transparent 54%);mask-image:linear-gradient(90deg,#000 46%,transparent 54%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:92.6% 0;mask-position:92.6% 0}
.e2-writing .e2-name .w:dir(rtl){
  -webkit-mask-image:linear-gradient(270deg,#000 46%,transparent 54%);mask-image:linear-gradient(270deg,#000 46%,transparent 54%);
  -webkit-mask-position:7.4% 0;mask-position:7.4% 0}
.e2-flourish{position:absolute;left:50%;top:55cqh;inline-size:52cqmin;margin-left:-26cqmin;color:var(--e2-name-ink);opacity:.62;overflow:visible}
.e2-flourish path{stroke-dasharray:1 1}
.e2-writing .e2-flourish path{stroke-dashoffset:1}
.e2-writing .e2-caption{opacity:0}
.e2-caption{position:absolute;top:64.5cqh;inset-inline:0;margin:0;text-align:center;color:var(--e2-label);
  font:600 11px/1 'E2 LabelA',var(--font-body,system-ui),sans-serif;letter-spacing:.34em;text-transform:uppercase;padding-inline-start:.34em}
.e2-caption small{display:block;margin-top:14px;font-size:11.5px;letter-spacing:.06em;text-transform:none;font-weight:500;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:.5px}
.sa-intro-env.e2:is([lang=ar],[lang=he]) .e2-caption,.sa-intro-env.e2:is([lang=ar],[lang=he]) .e2-caption small{letter-spacing:0;padding:0;text-transform:none}
.sa-intro-env.e2:is([lang=ar],[lang=he]) .e2-caption{font-size:14.5px;font-weight:500}

/* ---------- 5. the back and the opening layers (built by the script) ---------- */
.e2-L{position:absolute;inset:0;overflow:hidden}   /* clipped to the paper like the back face, so the swap frame matches */
.sa-intro-env.e2 svg.e2-geo{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.e2-pocket{position:absolute;inset:0}
/* inset from the outer edges: it is only ever seen through the mouth, and flush it showed as a dark
   anti-aliased seam wherever the flap's and pocket's edges composited over it */
.e2-wall{position:absolute;inset:1.5px 1.5px 2px;background:color-mix(in oklab,var(--env-paper) 90%,#000 10%)}
.e2-wall::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.04) 12%,rgba(0,0,0,0) 30%)}
.e2-flapL{position:absolute;inset:0;perspective:1700px;perspective-origin:50% 0;pointer-events:none}
.e2-flap{position:absolute;inset:0 0 auto 0;block-size:var(--flap-h);transform-origin:50% 0;transform-style:preserve-3d}
.e2-flap__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.e2-flap__face svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
/* WebKit culls a back-facing plane reliably only when BOTH faces are 3D layers */
.e2-flapL .e2-flap__outer{transform:rotateX(0deg) translateZ(.01px)}
.e2-flap__liner{transform:rotateX(180deg) translateZ(.01px)}
.e2-flap__sender{position:absolute;inset-inline:0;text-align:center;color:var(--e2-label);
  font:600 11px/1.5 'E2 LabelA',var(--font-body,system-ui),sans-serif;letter-spacing:.3em;text-transform:uppercase;padding-inline-start:.3em}
/* by the script of the couple's names, not the page language: tracking breaks Arabic joins in WebKit */
.e2-flap__sender:not([data-script=latn]){letter-spacing:0;padding:0;font-size:13.5px;font-weight:500;text-transform:none}
.e2-flap__orn{position:absolute;top:1.5%;inset-inline-end:1.5%;inline-size:38%;opacity:.9}
.sa-intro-env.e2[dir=rtl] .e2-flap__orn{transform:scaleX(var(--env-art-rtl,-1))}

/* wax: the photograph in grey at the wax's own lightness, hue from the family colour, one specular */
.e2-seal{position:absolute;left:50%;inline-size:30%;aspect-ratio:850/808;margin-left:-15%;display:grid;place-items:center;isolation:isolate}
.e2-seal img{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:contain;
  filter:grayscale(1) brightness(var(--env-wax-l,.8)) contrast(1.22)}
.e2-seal::before{content:'';position:absolute;inset:0;z-index:1;background:var(--e2-wax);mix-blend-mode:color;
  -webkit-mask:var(--env-seal-image) center/contain no-repeat;mask:var(--env-seal-image) center/contain no-repeat}
.e2-seal::after{content:'';position:absolute;inset:0;z-index:2;background:radial-gradient(58% 48% at 34% 28%,#ffffff8c,#ffffff00 62%);
  mix-blend-mode:soft-light;-webkit-mask:var(--env-seal-image) center/contain no-repeat;mask:var(--env-seal-image) center/contain no-repeat}
.e2-seal__mark{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;white-space:nowrap;transform:rotate(3deg);
  font:400 calc(var(--e2-seal-w,30cqmin)*.3)/1 'E2 NameA',var(--font-script,Georgia),serif;   /* sized by the seal (the script sets --e2-seal-w) */
  color:color-mix(in oklab,var(--e2-wax) 56%,#0d0906 44%);mix-blend-mode:multiply;
  text-shadow:0 -.5px 0 color-mix(in oklab,var(--e2-wax) 46%,#0d0906 54%),0 1px .5px color-mix(in oklab,var(--e2-wax) 76%,#fff 24%)}
.e2-seal__mark[data-script=arab],.e2-seal__mark[data-script=hebr]{font-size:calc(var(--e2-seal-w,30cqmin)*.22)}
.e2-seal__mark[data-script=hebr]{font-weight:600}
.e2-seal__mark .amp{font-size:.45em;margin-inline:.08em;vertical-align:.3em}
/* nobody named: a rosette pressed into the wax (light edge below, shade above, like the letters' text-shadow) */
/* static: '.e2-flap__face svg' (the flap's own art) would otherwise pin it by its corner in the flap's copy */
.e2-seal__mark--emblem .e2-emblem{position:static;inset:auto;inline-size:calc(var(--e2-seal-w,30cqmin)*.4);block-size:auto;overflow:visible}
.e2-seal__mark--emblem .e2-emblem g{fill:none;stroke-width:1.2;stroke-linejoin:round}
.e2-seal__mark--emblem .e2-emb{stroke:currentColor}
.e2-seal__mark--emblem .e2-emb-hi{stroke:color-mix(in oklab,var(--e2-wax) 46%,#0d0906 54%)}
.e2-seal__mark--emblem .e2-emb-lo{stroke:color-mix(in oklab,var(--e2-wax) 76%,#fff 24%)}
.e2-sealwrap{position:absolute;inset:0;pointer-events:none}
.e2-sealwrap .e2-seal{filter:drop-shadow(1px 2px 2px rgba(22,14,6,.34)) drop-shadow(3px 7px 10px rgba(22,14,6,.2))}
/* whole until it cracks (so the swap frame matches the back face exactly), then two halves; the
   polygons reach past the box so each half keeps its own shadow, except across the crack */
.e2-seal--bot{visibility:hidden}
.sa-intro-env.e2[data-cracked] .e2-seal--bot{visibility:visible;clip-path:polygon(-30% 52.5%,0 52.5%,19% 51%,33% 56.5%,47% 50.6%,61% 57%,74% 51%,88% 55.5%,100% 52%,130% 52%,130% 150%,-30% 150%)}
.sa-intro-env.e2[data-cracked] .e2-seal--top{clip-path:polygon(-30% -30%,130% -30%,130% 52%,100% 52%,88% 55.5%,74% 51%,61% 57%,47% 50.6%,33% 56.5%,19% 51%,0 52.5%,-30% 52.5%)}
.e2-crack{position:absolute;inset:0;z-index:4;inline-size:100%;block-size:100%;visibility:hidden;
  -webkit-mask:var(--env-seal-image) center/contain no-repeat;mask:var(--env-seal-image) center/contain no-repeat}
.sa-intro-env.e2[data-cracked] .e2-crack{visibility:visible}
.e2-glint{position:absolute;inset:0;z-index:4;overflow:hidden;
  -webkit-mask:var(--env-seal-image) center/contain no-repeat;mask:var(--env-seal-image) center/contain no-repeat}
.e2-glint i{position:absolute;inset:-20% auto -20% 0;inline-size:34%;
  background:linear-gradient(100deg,#fff0,#ffffffb0 50%,#fff0);mix-blend-mode:soft-light;transform:translateX(-120%) skewX(-14deg)}

/* the card: laid out at full size so it ends sharp; scaled down into the envelope */
.e2-card{position:absolute;inset:0;transform-origin:0 0;overflow:hidden;
  background:var(--env-paper) center/cover no-repeat;box-shadow:3px 10px 22px -10px rgba(10,6,2,.45)}
.e2-card__shade{position:absolute;pointer-events:none;opacity:0}

/* the whole overlay is one tap target; the button carries the name for assistive tech */
.sa-intro-env.e2 .sa-env__open{position:absolute;inset:0;z-index:20;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;
  background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.sa-intro-env.e2 .sa-env__open:focus-visible{outline:2px solid var(--e2-label);outline-offset:-6px}
.sa-intro-env.e2.is-open .sa-env__open{cursor:default}

/* ---------- 6. per-family ornament anchors (measured on the artwork; see v1 section 12) ---------- */
.sa-intro-env.e2[data-family=cotton]{--env-art-w:34%;--env-art-o:.94;--env-art-h:40%;--env-art-pos:center;--env-art-is:4%;--env-art-ie:auto;--env-art-bs:auto;--env-art-be:5%}
.sa-intro-env.e2[data-family=botanical]{--env-art-w:54%;--env-art-o:.94;--env-art-h:34%;--env-art-pos:left bottom;--env-art-is:3%;--env-art-ie:auto;--env-art-bs:auto;--env-art-be:4%}
.sa-intro-env.e2[data-family=floral]{--env-art-w:54%;--env-art-o:.94;--env-art-h:34%;--env-art-pos:right bottom;--env-art-is:auto;--env-art-ie:3%;--env-art-bs:auto;--env-art-be:4%}
.sa-intro-env.e2[data-family=travel]{--env-art-w:46%;--env-art-o:.94;--env-art-h:30%;--env-art-pos:right bottom;--env-art-rtl:1;--env-art-is:auto;--env-art-ie:6%;--env-art-bs:auto;--env-art-be:6%}
.sa-intro-env.e2[data-family=heritage]{--env-art-w:48%;--env-art-o:.94;--env-art-h:34%;--env-art-pos:left bottom;--env-art-is:4%;--env-art-ie:auto;--env-art-bs:auto;--env-art-be:4%}
.sa-intro-env.e2[data-family=midnight]{--env-art-w:34%;--env-art-o:.88;--env-art-h:26%;--env-art-pos:right top;--env-art-is:auto;--env-art-ie:2%;--env-art-bs:3%;--env-art-be:auto}
.sa-intro-env.e2[data-family=celestial]{--env-art-w:50%;--env-art-o:.94;--env-art-h:34%;--env-art-pos:left bottom;--env-art-is:3%;--env-art-ie:auto;--env-art-bs:auto;--env-art-be:5%}
.sa-intro-env.e2[data-family=celebration]{--env-art-w:62%;--env-art-o:.94;--env-art-h:26%;--env-art-pos:left bottom;--env-art-is:2%;--env-art-ie:auto;--env-art-bs:auto;--env-art-be:4%}

@media(prefers-reduced-motion:reduce){.e2-writing .e2-name .w{-webkit-mask-image:none;mask-image:none}}