/* The invitation as a real object (round 06, art director changes 1 to 4).
   Loaded after invitation.css and site-polish.css. invitation.js still owns every
   transform it writes inline; this file only changes surfaces, size and placement,
   so the measured folds, the 2.5 s hold and the keyboard path stay intact.
   Plates: Blender Cycles renders of ambientCG Paper001 / Paper003 (CC0) and an
   oxblood wax seal pressed with the arch-and-eye mark; builder in
   artifacts/site-rounds/2026-10-21/round-06/invitation-impl/plates/. */

.invitation-ending{
 --env-w:min(440px,30vw);
 --env-h:calc(var(--env-w) * 5 / 11);
 --env-x:20vw;
 --env-bottom:max(72px,8svh);
 --flow-top:clamp(135px,17svh,185px);
 --paper-w:min(664px,calc(86vw - 36px));
 --read-x:calc(50vw - var(--env-x) - var(--env-w) / 2);
 --ink:#351924;
}

/* 1. Envelope plates. Same layers, photographic surfaces. */
.invitation-ending .envelope-back{background:url(/studies/film-sovereign/film/invitation/envelope-back.webp) center/100% 100% no-repeat;border:0;box-shadow:none}
/* Contact shadow on the sill. The window is behind, so it falls toward the viewer. */
.invitation-ending .envelope-back::after{content:"";position:absolute;inset:auto 3% -9px;height:20px;opacity:1;background:radial-gradient(closest-side,#1a0a10a6,transparent);filter:blur(5px);z-index:-1}
.invitation-ending .envelope-back::before{content:"";position:absolute;inset:auto -6% -26px;height:52px;background:radial-gradient(closest-side,#1a0a1040,transparent);filter:blur(10px);z-index:-1}
.invitation-ending .envelope-face{background:url(/studies/film-sovereign/film/invitation/envelope-face.webp) center/100% 100% no-repeat;filter:none}
.invitation-ending .envelope-face>span{display:none}
.invitation-ending .envelope-flap>span{clip-path:none;box-shadow:none}
.invitation-ending .flap-outside{background:url(/studies/film-sovereign/film/invitation/flap-outside.webp) center/100% 100% no-repeat;filter:drop-shadow(0 1.5px 1.5px #3a1a1033)}
.invitation-ending .envelope-flap .flap-lining{background:url(/studies/film-sovereign/film/invitation/flap-lining.webp) center/100% 100% no-repeat;box-shadow:none}
/* The seal image keeps its element (invitation.js fades it); the plate replaces its picture. */
/* Round 14 layout B: the 3D wax seal (shadow and grade are in the image). */
.invitation-ending .invitation-wax{--seal:min(120px,calc(var(--env-w) * .3));width:var(--seal);height:var(--seal);left:calc(50% - var(--seal) / 2);top:calc(57% - var(--seal) / 2);object-position:0 -9999px;background:image-set(url(/studies/film-sovereign/film/invitation/seal/atelier-seal.webp) 1x,url(/studies/film-sovereign/film/invitation/seal/atelier-seal@2x.webp) 2x) center/contain no-repeat;filter:none}
.invitation-ending .envelope-address{inset:auto 10% 7%;color:#4a1d2b;font:italic clamp(12px,calc(var(--env-w) * .036),16px)/1.3 Redaction,serif;text-shadow:0 1px 0 #fffaf0b3,0 -.5px 0 #3a10201f}
.invitation-ending .envelope-address span{margin-top:3px;font-size:clamp(7px,calc(var(--env-w) * .018),8px);letter-spacing:.16em;color:#6b4148}
.invitation-ending .invitation-cue{top:calc(100% + 12px);font-size:13px}

/* 2. Small, low and to the left, resting on the sill; the tower and bouquet stay clear. */
.motion-enabled .invitation-ending .invitation-flow{padding-top:var(--flow-top)}
.motion-enabled .invitation-ending .invitation-assembly{
 width:var(--env-w);height:var(--env-h);align-self:flex-start;margin-left:var(--env-x);
 margin-top:calc(100svh - var(--env-bottom) - var(--env-h) - var(--flow-top));
 transform-origin:50% 100%;transform:perspective(900px) rotateX(9deg) rotate(-2.5deg);
 transition:transform .9s cubic-bezier(.45,0,.2,1);
}
.motion-enabled .invitation-ending:is([data-phase=unfold],[data-phase=read]) .invitation-assembly{transform:perspective(900px) rotateX(0deg) rotate(0deg)}
/* The sheet keeps letter proportions, independent of the smaller envelope. */
.motion-enabled .invitation-ending .invitation-paper{left:calc(50% - var(--paper-w) / 2);right:auto;width:var(--paper-w);translate:0 0}
/* While it unfolds, the sheet glides to its reading place (individual translate composes with the inline transform). */
.motion-enabled .invitation-ending[data-phase=unfold] .invitation-paper{translate:var(--read-x) 0;transition:translate 1.2s cubic-bezier(.45,0,.2,1)}
.motion-enabled .invitation-ending[data-phase=read] .invitation-paper{translate:var(--read-x) 0}
@media(min-width:1100px){
 .invitation-ending{--paper-w:600px;--read-x:calc(48px + var(--paper-w) * .48 - var(--env-x) - var(--env-w) / 2)}
 /* A 16:9 film in a 16:10 window has 80 px of slack; ease it right so the tower clears the sheet. */
 .motion-enabled :is(#film,#film-change-cover,.film-poster){transition:opacity .3s ease,object-position 1.4s cubic-bezier(.45,0,.2,1)}
 .motion-enabled .stage:has(.invitation-ending:is([data-phase=unfold],[data-phase=read])) :is(#film,#film-change-cover,.film-poster){object-position:0% 50%!important}
}

/* 4. Garden message: dark oxblood ink in the clear sky, left of the tower. */
.motion-enabled .invitation-ending .flower-heading{--exposure-ink:var(--ink);color:var(--ink);text-shadow:none}
.motion-enabled .invitation-ending .flower-heading :is(h2,p,em,span){color:var(--ink);text-shadow:none}
.motion-enabled .invitation-ending .flower-heading{position:absolute;top:var(--flow-top);left:14vw;width:min(440px,30vw);align-items:flex-start;text-align:left;transition:opacity .7s ease}
.motion-enabled .invitation-ending .flower-heading h2{font-size:clamp(36px,3.7vw,56px)}
.motion-enabled .invitation-ending .flower-heading h2 em{font-size:clamp(70px,7vw,104px);line-height:1.25;margin:0}
.motion-enabled .invitation-ending .flower-heading>p:last-child{font-size:19px;margin-top:6px}
.motion-enabled .invitation-ending:not([data-phase=rest]):not([data-phase=seal]) .flower-heading{opacity:0!important}

/* 3. The letter as cotton paper. */
.invitation-paper .letter-paper{background-color:#f1e8da;background-image:url(/studies/film-sovereign/film/invitation/cotton.webp),repeating-linear-gradient(0deg,transparent 0,transparent 3px,#8b735205 3px,#8b735205 4px);background-size:512px 512px,auto;box-shadow:none}
.invitation-paper :is(.panel-content,.panel-reverse){border:0;box-shadow:none}
.invitation-paper .panel-reverse{background-image:linear-gradient(#5a3a2a0d,#5a3a2a0d),url(/studies/film-sovereign/film/invitation/cotton.webp);background-size:auto,512px 512px}
/* The top panel darkens slightly into its crease. */
.invitation-paper .paper-top .panel-content{background-image:linear-gradient(transparent calc(100% - 6px),#5a3a2a08),url(/studies/film-sovereign/film/invitation/cotton.webp);background-size:auto,512px 512px}
/* Folds read as soft valleys, never as hairlines; panels differ by a few percent of light. */
.invitation-paper .paper-middle .panel-content{background-image:linear-gradient(#5a3a2a0c,transparent 7px),linear-gradient(transparent calc(100% - 6px),#5a3a2a08),url(/studies/film-sovereign/film/invitation/cotton.webp);background-size:auto,auto,512px 512px}
.invitation-paper .paper-bottom .panel-content{background-image:linear-gradient(#5a3a2a0c,transparent 7px),linear-gradient(transparent,transparent),url(/studies/film-sovereign/film/invitation/cotton.webp);background-size:auto,auto,512px 512px}
/* Deckle on the outer edges only, masked on the leaf .panel-content (never on a 3D parent). */
.invitation-paper .panel-content{
 --dl:url(/studies/film-sovereign/film/invitation/deckle-left.svg) 0 0/8px 640px repeat-y;
 --dr:url(/studies/film-sovereign/film/invitation/deckle-right.svg) 100% 0/8px 640px repeat-y;
 -webkit-mask:var(--dl),var(--dr),linear-gradient(#000 0 0) 8px 0/calc(100% - 16px) 100% no-repeat;
 mask:var(--dl),var(--dr),linear-gradient(#000 0 0) 8px 0/calc(100% - 16px) 100% no-repeat;
}
.invitation-paper .paper-top .panel-content{
 -webkit-mask:url(/studies/film-sovereign/film/invitation/deckle-top.svg) 0 0/1200px 8px repeat-x,var(--dl),var(--dr),linear-gradient(#000 0 0) 8px 8px/calc(100% - 16px) calc(100% - 8px) no-repeat;
 mask:url(/studies/film-sovereign/film/invitation/deckle-top.svg) 0 0/1200px 8px repeat-x,var(--dl),var(--dr),linear-gradient(#000 0 0) 8px 8px/calc(100% - 16px) calc(100% - 8px) no-repeat;
}
.invitation-paper .paper-bottom .panel-content{
 -webkit-mask:url(/studies/film-sovereign/film/invitation/deckle-bottom.svg) 0 100%/1200px 8px repeat-x,var(--dl),var(--dr),linear-gradient(#000 0 0) 8px 0/calc(100% - 16px) calc(100% - 8px) no-repeat;
 mask:url(/studies/film-sovereign/film/invitation/deckle-bottom.svg) 0 100%/1200px 8px repeat-x,var(--dl),var(--dr),linear-gradient(#000 0 0) 8px 0/calc(100% - 16px) calc(100% - 8px) no-repeat;
}
/* Sheet shadow: contact plus a soft fall toward the viewer. Drawn by each fold so it follows the folding. */
.invitation-paper .paper-fold::before{content:"";position:absolute;inset:-1px 6px;background:#ece2d3;pointer-events:none;box-shadow:1px 0 2px #2a121a33,-1px 0 2px #2a121a33;transform:translateZ(-.2px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* Only the lowest panel casts the fall toward the viewer, so no fold shades its neighbour in WebKit's 3D ordering. */
.invitation-paper .paper-bottom::before{box-shadow:0 1px 2px #2a121a40,0 30px 60px -20px #2a121a55,1px 0 2px #2a121a33,-1px 0 2px #2a121a33}
/* WebKit draws a filtered mask inside a masked panel as a box; keep the pressed lip to Chromium and Gecko. */
@supports (background:-webkit-named-image(i)){.invitation-paper .pressed-wordmark{filter:none}}
/* Pressed type: a lit lower lip on each stroke. */
.invitation-paper p{text-shadow:0 .5px 0 #fffaf2a6}
/* Actions printed flat in burgundy ink, taking the paper's fibre. */
.invitation-paper .flower-actions a{box-shadow:none!important;mix-blend-mode:multiply;justify-content:center;text-shadow:none}
.invitation-paper .flower-actions a span{display:none}
.invitation-paper .flower-actions a:focus-visible{mix-blend-mode:normal}

/* Phone: the envelope rests beside the vase; the letter stays centred for reading. */
@media(max-width:700px){
 .invitation-ending{--env-w:56vw;--env-x:5vw;--env-bottom:calc(128px + env(safe-area-inset-bottom));--flow-top:clamp(125px,18svh,170px);--paper-w:calc(92vw - 18px);--read-x:calc(50vw - var(--env-x) - var(--env-w) / 2)}
 .motion-enabled .invitation-ending .flower-heading{top:96px;left:16px;width:calc(100vw - 32px)}
 .motion-enabled .invitation-ending .flower-heading h2{font-size:34px}
 .motion-enabled .invitation-ending .flower-heading h2 em{font-size:64px}
 .motion-enabled .invitation-ending .flower-heading>p:last-child{font-size:16px}
 .invitation-ending .envelope-address span{display:none}
}
@media(prefers-reduced-motion:reduce){
 .motion-enabled .invitation-ending .invitation-assembly,.motion-enabled .invitation-ending .invitation-paper,.motion-enabled .invitation-ending .flower-heading{transition:none}
}

/* Round 7 art director: the invitation joins the photograph's light, focus and grain. */
/* (round 8 replaces this grade below) */
.envelope-back,.envelope-face,.flap-outside,.flap-lining{filter:sepia(.16) brightness(.86) contrast(.95) blur(.4px)}
.invitation-ending .paper-fold::before{inset:-1px 9px!important;background:#e6dac8 url('/studies/film-sovereign/film/invitation/cotton.webp') center/cover!important;box-shadow:0 18px 36px -18px #1a0c1266,1px 0 2px #2a121a33,-1px 0 2px #2a121a33!important}
body:has(.invitation-ending[data-phase="unfold"]) .film-timecode,body:has(.invitation-ending[data-phase="read"]) .film-timecode{opacity:0!important;transition:opacity .6s ease}
@media(max-width:700px){.invitation-ending{--env-w:38vw;--env-x:6vw;--env-bottom:37svh}}

/* Round 7 web: the keyboard ring hugs the rotated envelope itself, not the axis-aligned button box. */
.invitation-ending .open-invitation:focus-visible{outline:none!important;box-shadow:none!important}
.invitation-ending .invitation-assembly:has(.open-invitation:focus-visible) .envelope-face{outline:2px solid #f1e6d7;outline-offset:6px;box-shadow:0 0 0 9px #1a101666}
/* Round 7 web: short phones (375x667) read the whole letter at 14px or more after fitting; actions stay 44px or taller. */
@media(max-width:700px) and (max-height:760px){
 .invitation-ending{--paper-w:calc(100vw - 20px)}
 .motion-enabled .invitation-paper .panel-content{padding:4px 16px}
 .motion-enabled .invitation-paper .paper-top .panel-content{padding-top:12px}
 .motion-enabled .invitation-paper .paper-bottom .panel-content{padding-bottom:12px}
 .motion-enabled .invitation-paper p{font-size:14.5px;line-height:1.36;margin-bottom:7px}
 .motion-enabled .invitation-paper .letter-salutation{font-size:14.5px;margin-bottom:7px}
 .motion-enabled .invitation-letterhead{margin-bottom:6px}
 .motion-enabled .pressed-wordmark{width:96px;height:36px}
 .motion-enabled .invitation-paper .flower-actions a{font-size:14.5px;min-height:47px;padding:6px 8px}
 .motion-enabled .invitation-paper .invitation-sponsor-note{font-size:14px;line-height:1.3;margin-top:6px}
}

/* Round 8 art director change 5 and Nicole's eye change 2: the envelope stays paper from rest to departure.
   Warmer grade toward the fallen petal, film grain on the face, a tight contact shadow on the sill;
   the open envelope shows cotton inside (no flat brown), the seal stays on the paper, and the folded
   letter rises with its pressed mark showing (no blank card). */
/* The earlier grade never reached the face: '.invitation-ending .envelope-face{filter:none}' outranked it. Same specificity now.
   Tuned by measurement toward the petal on the sill (art director 233,198,149; face lands near 221,194,151). */
.invitation-ending :is(.envelope-back,.envelope-face,.flap-lining){filter:sepia(.5) saturate(1.12) hue-rotate(-7deg) brightness(.93) contrast(.94) blur(.4px)}
.invitation-ending .flap-outside{filter:sepia(.5) saturate(1.12) hue-rotate(-7deg) brightness(.93) contrast(.94) blur(.4px) drop-shadow(0 1.5px 1.5px #3a1a1033)}
.invitation-ending .envelope-back::after{inset:auto 1% -4px;height:10px;background:radial-gradient(closest-side,#1a0a10cc,transparent);filter:blur(3px)}
.invitation-ending .envelope-back::before{inset:auto -2% -14px;height:30px;background:radial-gradient(closest-side,#1a0a1033,transparent);filter:blur(7px)}
.invitation-ending .envelope-face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:overlay;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/160px 160px;
 -webkit-mask:url(/studies/film-sovereign/film/invitation/envelope-face.webp) center/100% 100% no-repeat;mask:url(/studies/film-sovereign/film/invitation/envelope-face.webp) center/100% 100% no-repeat}
/* Inside of the envelope: the same cotton, in its own shade. */
.invitation-ending .envelope-back{background:linear-gradient(#2e161e8c,#2e161e40 55%,#2e161e73),url(/studies/film-sovereign/film/invitation/cotton.webp) center/512px 512px #cbb79c}
.invitation-ending .envelope-flap .flap-lining{background:linear-gradient(#3a1d2433,#3a1d2466),url(/studies/film-sovereign/film/invitation/cotton.webp) center/512px 512px #d6c4a9;
 -webkit-mask:url(/studies/film-sovereign/film/invitation/flap-lining.webp) center/100% 100% no-repeat;mask:url(/studies/film-sovereign/film/invitation/flap-lining.webp) center/100% 100% no-repeat}
/* The folded letter's outer face carries the pressed mark, so the packet reads as the letter, not a card. */
.invitation-paper .paper-top .panel-reverse{display:flex;align-items:center;justify-content:center}
.invitation-paper .paper-top .panel-reverse::before{content:"";width:min(150px,40%);aspect-ratio:190/75;background:#572237;opacity:.82;-webkit-mask:url('/brand/atelier-wordmark-light.svg') center/contain no-repeat;mask:url('/brand/atelier-wordmark-light.svg') center/contain no-repeat}
@media(max-width:700px){.invitation-paper .paper-top .panel-reverse::before{width:min(110px,42%)}}

/* Round 8 web change 5: WebKit's text-wrap:pretty made short ragged lines in the letter; use ordinary wrapping in every engine. */
.invitation-paper :is(p,.invitation-sponsor-note){text-wrap:wrap}
/* Only the lowest panel casts the fall toward the viewer; the upper folds keep just their edge contact (WebKit drew the top fold raised). */
.invitation-ending .paper-fold:not(.paper-bottom)::before{box-shadow:1px 0 2px #2a121a33,-1px 0 2px #2a121a33!important}

/* Round 9 art director 1: the read letter has one deckled edge. The fold backings sit fully inside the 8 px deckle on
   every side they share with it (no 1 px side lines, no backing proud of the sheet), so no ruled inner line, no notch. */
.invitation-ending .paper-fold::before{inset:0 10px!important;box-shadow:none!important}
.invitation-ending .paper-top::before{inset:10px 10px 0!important}
.invitation-ending .paper-bottom::before{inset:0 10px 10px!important;box-shadow:0 18px 36px -18px #1a0c1266!important}
/* The deckle layers and the body rectangle overlap by 2 px, so no anti-aliased seam is left 8 px inside the edge
   (it drew a thin straight line through the paper once the backing moved inside), and the top and bottom corners are
   torn off at 45 degrees so the top deckle no longer pokes out past the side deckle. */
.invitation-paper .panel-content{
 -webkit-mask:var(--dl),var(--dr),linear-gradient(#000 0 0) 6px 0/calc(100% - 12px) 100% no-repeat;
 mask:var(--dl),var(--dr),linear-gradient(#000 0 0) 6px 0/calc(100% - 12px) 100% no-repeat}
.invitation-paper .paper-top .panel-content{
 -webkit-mask:url(/studies/film-sovereign/film/invitation/deckle-top.svg) 0 0/1200px 8px repeat-x,var(--dl),var(--dr),linear-gradient(#000 0 0) 6px 6px/calc(100% - 12px) calc(100% - 6px) no-repeat;
 mask:url(/studies/film-sovereign/film/invitation/deckle-top.svg) 0 0/1200px 8px repeat-x,var(--dl),var(--dr),linear-gradient(#000 0 0) 6px 6px/calc(100% - 12px) calc(100% - 6px) no-repeat;
 clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%,0 9px)}
.invitation-paper .paper-bottom .panel-content{
 -webkit-mask:url(/studies/film-sovereign/film/invitation/deckle-bottom.svg) 0 100%/1200px 8px repeat-x,var(--dl),var(--dr),linear-gradient(#000 0 0) 6px 0/calc(100% - 12px) calc(100% - 6px) no-repeat;
 mask:url(/studies/film-sovereign/film/invitation/deckle-bottom.svg) 0 100%/1200px 8px repeat-x,var(--dl),var(--dr),linear-gradient(#000 0 0) 6px 0/calc(100% - 12px) calc(100% - 6px) no-repeat;
 clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px))}
/* Paper warmed toward the envelope it came from (#efe2cf mean): a multiply over the cotton keeps its fibre;
   a fine grain on every face so the sheet and the folded packet read as paper, not a card. Behind the ink. */
.invitation-paper .letter-paper::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:multiply;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .25 .7 0 0 0 -.27'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px,linear-gradient(#fdf8f1,#fdf8f1)}
/* The folded packet keeps an uneven cotton edge on its sides, like the open sheet. */
.invitation-paper .panel-reverse{
 -webkit-mask:url(/studies/film-sovereign/film/invitation/deckle-left.svg) 0 0/8px 640px repeat-y,url(/studies/film-sovereign/film/invitation/deckle-right.svg) 100% 0/8px 640px repeat-y,linear-gradient(#000 0 0) 6px 0/calc(100% - 12px) 100% no-repeat;
 mask:url(/studies/film-sovereign/film/invitation/deckle-left.svg) 0 0/8px 640px repeat-y,url(/studies/film-sovereign/film/invitation/deckle-right.svg) 100% 0/8px 640px repeat-y,linear-gradient(#000 0 0) 6px 0/calc(100% - 12px) 100% no-repeat}
/* While the film sits behind the open letter it dims a little, like a lamp behind a page; reverses on scroll back. */
.motion-enabled .stage :is(#film,.film-poster,#film-change-cover:not(.holding)){transition:opacity .3s ease,object-position 1.4s cubic-bezier(.45,0,.2,1),filter .9s ease}
.motion-enabled .stage:has(.invitation-ending:is([data-phase=read],[data-envelope=open])) :is(#film,.film-poster,#film-change-cover){filter:brightness(.8) saturate(.95)}

/* Round 9 art director 2 and Nicole's eye 2: the envelope in the sill's own light and focus.
   Warmer hue (no lime in the highlights), a warm multiply over the face, grain that survives 1x, and a focus pull:
   at rest the leaves share the sill's depth of field (1 px), and as the seal breaks the focus comes to the letter. */
.invitation-ending :is(.envelope-back,.flap-lining){filter:sepia(.5) saturate(1.12) hue-rotate(-11deg) brightness(.93) contrast(.94) blur(0px)}
.invitation-ending .envelope-face{filter:sepia(.5) saturate(1.12) hue-rotate(-11deg) brightness(.93) contrast(.94) blur(0px) drop-shadow(0 -2px 3px #2a121a38)}
.invitation-ending .flap-outside{filter:sepia(.5) saturate(1.12) hue-rotate(-11deg) brightness(.93) contrast(.94) blur(0px) drop-shadow(0 1.5px 1.5px #3a1a1033)}
.invitation-ending:is([data-phase=rest],:not([data-phase])) :is(.envelope-back,.flap-lining){filter:sepia(.5) saturate(1.12) hue-rotate(-11deg) brightness(.93) contrast(.94) blur(1px)}
.invitation-ending:is([data-phase=rest],:not([data-phase])) .envelope-face{filter:sepia(.5) saturate(1.12) hue-rotate(-11deg) brightness(.93) contrast(.94) blur(1px) drop-shadow(0 -2px 3px #2a121a38)}
.invitation-ending:is([data-phase=rest],:not([data-phase])) .flap-outside{filter:sepia(.5) saturate(1.12) hue-rotate(-11deg) brightness(.93) contrast(.94) blur(1px) drop-shadow(0 1.5px 1.5px #3a1a1033)}
.invitation-ending :is(.envelope-back,.envelope-face,.flap-outside,.flap-lining){transition:filter .6s cubic-bezier(.2,.7,.2,1)}
.invitation-ending .envelope-face::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.35;
 background:radial-gradient(120% 90% at 30% 20%,#f3d9b8 0,#e8c9a3 60%,#d9b48c 100%);
 -webkit-mask:url(/studies/film-sovereign/film/invitation/envelope-face.webp) center/100% 100% no-repeat;mask:url(/studies/film-sovereign/film/invitation/envelope-face.webp) center/100% 100% no-repeat}
.invitation-ending .envelope-face::after{opacity:.45}
/* The open flap reads as paper: the cotton lining in shade, lit toward its rounded tip, with faint laid lines. */
.invitation-ending .envelope-flap .flap-lining{background:repeating-linear-gradient(90deg,#3a1d2410 0 1px,transparent 1px 7px),radial-gradient(90% 120% at 50% 100%,#3a1d2400 30%,#3a1d2440 100%),linear-gradient(#3a1d2426,#3a1d2459),url(/studies/film-sovereign/film/invitation/cotton.webp) center/512px 512px #d6c4a9}
/* As it leaves the envelope the packet tilts slightly, then squares up to be read. */
.motion-enabled .invitation-ending .invitation-paper{transition:rotate .8s cubic-bezier(.45,0,.2,1)}
.motion-enabled .invitation-ending:is([data-phase=flap],[data-phase=extract],[data-phase=release]) .invitation-paper{rotate:-1.5deg}
.motion-enabled .invitation-ending[data-phase=unfold] .invitation-paper{transition:translate 1.2s cubic-bezier(.45,0,.2,1),rotate .8s cubic-bezier(.45,0,.2,1)}
@media(prefers-reduced-motion:reduce){.invitation-ending :is(.envelope-back,.envelope-face,.flap-outside,.flap-lining),.motion-enabled .stage :is(#film,.film-poster,#film-change-cover){transition:none}}

/* Round 10 art director 1: "A letter awaits you" reads on the envelope's own shadow, not on a field of its own.
   The shadow is centred on the envelope's base on the sill (the cue sits 12 px below it), flattened to an ellipse about
   1.6 times the envelope's width, densest at the base, so it reads as the envelope resting on the brick. A light optical
   text shadow on the words, as on the film's other lines. */
.motion-enabled .invitation-ending .invitation-cue{isolation:isolate;text-shadow:0 1px 2px #170e17e6,0 0 10px #170e17b3!important}
.motion-enabled .invitation-ending .invitation-cue::before{content:"";position:absolute;left:50%;top:-12px;width:calc(var(--env-w) * 1.6);height:max(64px,calc(var(--env-h) * .5));translate:-50% -50%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#1a0a10d9 0%,#1a0a10b3 38%,#1a0a1059 68%,#1a0a1000 100%)}

/* Round 9 web 5: the plates, deckles and cotton wait for the film's own release (html[data-bytes-released]),
   so they do not share the line with the film's first seconds. The ending is not on screen before then. */
html:not([data-bytes-released]) .invitation-ending *,html:not([data-bytes-released]) .invitation-ending *::before,html:not([data-bytes-released]) .invitation-ending *::after{background-image:none!important;-webkit-mask-image:none!important;mask-image:none!important}

/* Round 10 art director (carried): the read letter at least 12 L* apart from the sky beside it. The dim does reach the read
   frame (computed filter on #film and the posters); at .8 the brightest open sky measured 78 L* against the paper's 87.8.
   One small step deeper, same ease and same reversal on scroll back. */
.motion-enabled .stage:has(.invitation-ending:is([data-phase=read],[data-envelope=open])) :is(#film,.film-poster,#film-change-cover){filter:brightness(.72) saturate(.95)}

/* Round 10 art director 5 and Nicole's eye 2: the envelope in the letter's cotton.
   - Leaves: copies of the plates with a 2 px deckle on every edge (the outer rectangle, the face's V, the flap's diagonals)
     and the letter's cotton.webp multiplied in at 0.5 (round-10/envelope-masks/make-masks.py). The grain overlay and the
     warm multiply follow the deckled outline.
   - Lining: the same cotton in shade, with one soft gradient toward the fold; the laid lines (pinstripes) are gone.
   - Packet in the mouth: its cotton keeps a 2 px deckle on its top and bottom edges too.
   - Contact: a narrow dense shadow where the face meets the sill, in every phase, so the focus pull still interpolates. */
.invitation-ending .envelope-face{background:url(/studies/film-sovereign/film/invitation/envelope-face-deckled.webp) center/100% 100% no-repeat}
.invitation-ending .flap-outside{background:url(/studies/film-sovereign/film/invitation/flap-outside-deckled.webp) center/100% 100% no-repeat}
.invitation-ending .envelope-face::before,.invitation-ending .envelope-face::after{-webkit-mask:url(/studies/film-sovereign/film/invitation/envelope-face-deckled.webp) center/100% 100% no-repeat;mask:url(/studies/film-sovereign/film/invitation/envelope-face-deckled.webp) center/100% 100% no-repeat}
.invitation-ending .envelope-face::after{opacity:.3}
.invitation-ending .envelope-flap .flap-lining{background:linear-gradient(0deg,#3a1d2447 0%,#3a1d2414 42%,#3a1d2400 78%),url(/studies/film-sovereign/film/invitation/cotton.webp) center/512px 512px #d9c8ae;background-blend-mode:normal,multiply;
 -webkit-mask:url(/studies/film-sovereign/film/invitation/flap-lining-deckled.webp) center/100% 100% no-repeat;mask:url(/studies/film-sovereign/film/invitation/flap-lining-deckled.webp) center/100% 100% no-repeat}
.invitation-ending .envelope-face{filter:sepia(.5) saturate(1.12) hue-rotate(-11deg) brightness(.93) contrast(.94) blur(0px) drop-shadow(0 -2px 3px #2a121a38) drop-shadow(0 2px 2px #1408068c)}
.invitation-ending:is([data-phase=rest],:not([data-phase])) .envelope-face{filter:sepia(.5) saturate(1.12) hue-rotate(-11deg) brightness(.93) contrast(.94) blur(1px) drop-shadow(0 -2px 3px #2a121a38) drop-shadow(0 2px 2px #1408068c)}
.invitation-paper .panel-reverse{
 -webkit-mask:url(/studies/film-sovereign/film/invitation/deckle-top.svg) 0 0/1200px 3px repeat-x,url(/studies/film-sovereign/film/invitation/deckle-bottom.svg) 0 100%/1200px 3px repeat-x,url(/studies/film-sovereign/film/invitation/deckle-left.svg) 0 0/8px 640px repeat-y,url(/studies/film-sovereign/film/invitation/deckle-right.svg) 100% 0/8px 640px repeat-y,linear-gradient(#000 0 0) 6px 2px/calc(100% - 12px) calc(100% - 4px) no-repeat;
 mask:url(/studies/film-sovereign/film/invitation/deckle-top.svg) 0 0/1200px 3px repeat-x,url(/studies/film-sovereign/film/invitation/deckle-bottom.svg) 0 100%/1200px 3px repeat-x,url(/studies/film-sovereign/film/invitation/deckle-left.svg) 0 0/8px 640px repeat-y,url(/studies/film-sovereign/film/invitation/deckle-right.svg) 100% 0/8px 640px repeat-y,linear-gradient(#000 0 0) 6px 2px/calc(100% - 12px) calc(100% - 4px) no-repeat}

/* Round 11 art director 2, Nicole's eye 3: the envelope lit from the window; plates and notes in round-11/envelope-plates/make-plates.py. Colour lives in the plates; filters keep focus and contact only. About twice the vase's width at 1440. */
@media(min-width:701px){.invitation-ending{--env-w:min(270px,18.75vw)}}
.invitation-ending .envelope-face{background:url(/studies/film-sovereign/film/invitation/envelope-face-r11.webp) center/100% 100% no-repeat}
.invitation-ending .flap-outside{background:url(/studies/film-sovereign/film/invitation/flap-outside-r11.webp) center/100% 100% no-repeat}
.invitation-ending .envelope-flap .flap-lining{background:url(/studies/film-sovereign/film/invitation/flap-lining-r11.webp) center/100% 100% no-repeat}
.invitation-ending .envelope-face::before{display:none}
.invitation-ending .envelope-face::after{opacity:.18}
.invitation-ending .envelope-face{filter:brightness(1) blur(0px) drop-shadow(0 -2px 3px #2a121a38) drop-shadow(0 2px 2px #1408068c)}
.invitation-ending:is([data-phase=rest],:not([data-phase])) .envelope-face{filter:brightness(1) blur(1px) drop-shadow(0 -2px 3px #2a121a38) drop-shadow(0 2px 2px #1408068c)}
.invitation-ending .flap-outside{filter:brightness(1) blur(0px) drop-shadow(0 1.5px 1.5px #3a1a1033)}
.invitation-ending:is([data-phase=rest],:not([data-phase])) .flap-outside{filter:brightness(1) blur(1px) drop-shadow(0 1.5px 1.5px #3a1a1033)}
.invitation-ending .flap-lining{filter:brightness(1) blur(0px)}
.invitation-ending:is([data-phase=rest],:not([data-phase])) .flap-lining{filter:brightness(1) blur(1px)}
.invitation-ending .invitation-wax{filter:none}
/* Address below the seal at the smaller size. */
@media(min-width:701px){
 .invitation-ending .envelope-address{inset:auto 5% 2.5%;line-height:1;padding:0!important;gap:0!important}
 .invitation-ending .envelope-address span{margin-top:2px;line-height:1;letter-spacing:.05em;white-space:nowrap}}

/* Round 12 art director 1, Nicole's eye 2: backlit cotton, not card. Plates and notes in
   artifacts/site-rounds/2026-10-21/round-12/envelope-plates/make-plates.py (ivory in shade, a* 4 b* 13; a thin luminous
   edge on the window side; a few long faint fibres, no speckle; lining and inside back the same cotton in shade).
   Only the r12 plates are requested now: the grain overlay and the deckled masks that still fetched the round 10 plates are off. */
.invitation-ending .envelope-face{background:url(/studies/film-sovereign/film/invitation/envelope-face-r12.webp) center/100% 100% no-repeat}
.invitation-ending .flap-outside{background:url(/studies/film-sovereign/film/invitation/flap-outside-r12.webp) center/100% 100% no-repeat}
.invitation-ending .envelope-flap .flap-lining{background:url(/studies/film-sovereign/film/invitation/flap-lining-r12.webp) center/100% 100% no-repeat;-webkit-mask:none;mask:none}
.invitation-ending .envelope-back{background:url(/studies/film-sovereign/film/invitation/envelope-back-r12.webp) center/100% 100% no-repeat}
.invitation-ending .envelope-back{filter:brightness(1) blur(0px)}
.invitation-ending:is([data-phase=rest],:not([data-phase])) .envelope-back{filter:brightness(1) blur(1px)}
.invitation-ending .envelope-face::after{display:none}
/* The folded letter reads faintly through the face (about 3 L* darker over the sheet), and leaves with it. */
.invitation-ending .envelope-face::before{display:block;content:"";position:absolute;inset:26% 20% 13% 19.5%;pointer-events:none;background:#f5f4f2;mix-blend-mode:multiply;opacity:1;filter:blur(2px);-webkit-mask:none;mask:none;transition:opacity .6s ease}
.invitation-ending:is([data-phase=extract],[data-phase=release],[data-phase=unfold],[data-phase=read]) .envelope-face::before{opacity:0}
@media(max-width:700px){.invitation-ending .envelope-face::before{inset:29% 34% 24% 35%;filter:blur(1px)}}
/* Seated on the sill top, back from its front edge, almost square to the window (1 degree). Size unchanged. */
.motion-enabled .invitation-ending .invitation-assembly{transform:perspective(900px) rotateX(9deg) rotate(-1deg)}
@media(min-width:701px){.invitation-ending{--env-bottom:max(86px,9.5svh)}}
@media(max-width:700px){.invitation-ending{--env-bottom:40svh}}

/* Round 13 art director 1, Nicole's eye 4: the envelope takes the ending's light. Plates and notes in
   artifacts/site-rounds/2026-10-21/round-13/envelope-plates/make-plates.py: warm ivory in shade (face L* about 78, a* 5, b* 20.5),
   one step below the white anemones on the same sill; darker under the flap; a 1 px lighter top edge and a 1 px darker base.
   Only the r13 plates are requested; the r12 plates stay on disk. */
.invitation-ending .envelope-face{background:url(/studies/film-sovereign/film/invitation/envelope-face-r13.webp) center/100% 100% no-repeat}
.invitation-ending .flap-outside{background:url(/studies/film-sovereign/film/invitation/flap-outside-r13.webp) center/100% 100% no-repeat}
.invitation-ending .envelope-flap .flap-lining{background:url(/studies/film-sovereign/film/invitation/flap-lining-r13.webp) center/100% 100% no-repeat}
.invitation-ending .envelope-back{background:url(/studies/film-sovereign/film/invitation/envelope-back-r13.webp) center/100% 100% no-repeat}
/* Seated: a soft contact shadow on the sill directly under the base (about 6 px), nothing around the sides. */
.invitation-ending .envelope-back::after{inset:auto 1.5% -7px;height:14px;background:linear-gradient(to bottom,#12060900,#120609e0 50%,#12060900);-webkit-mask:linear-gradient(to right,#0000,#000 6%,#000 94%,#0000);mask:linear-gradient(to right,#0000,#000 6%,#000 94%,#0000);filter:blur(1px)}
.invitation-ending .envelope-back::before{display:none}
/* The sheet's outside, seen in the envelope's mouth, in the same warm light (it was a bluish white, b* 11); the tint leaves
   as the letter is released, so the read letter keeps its own ivory. */
.invitation-ending .invitation-paper .letter-paper{box-shadow:inset 0 0 0 2000px #c08a4a00!important;transition:box-shadow .9s ease}
.invitation-ending:is([data-phase=rest],[data-phase=seal],[data-phase=flap],[data-phase=extract],:not([data-phase])) .invitation-paper .letter-paper{box-shadow:inset 0 0 0 2000px #c08a4a30!important}
/* Desktop: lowered so its base sits on the petal and vase line (about y 847 at 1440x900; round 12 stood at y 813). Phone unchanged. */
@media(min-width:701px){.invitation-ending{--env-bottom:max(52px,5.8svh)}}
/* While the letter is still inside, its packet's soft fall shadow (paper-bottom) would spill 20 px under the envelope's base. */
.invitation-ending:is([data-phase=rest],[data-phase=seal],[data-phase=flap],:not([data-phase])) .invitation-paper .paper-bottom::before{box-shadow:none!important}

/* Round 14 layout B: the small seal inside the letter, beside the signature. */
.invitation-paper .letter-signature{position:relative}
.invitation-paper .letter-seal{position:absolute;right:0;top:50%;width:96px;height:96px;translate:0 -50%;pointer-events:none}
@media(max-width:700px){.invitation-paper .letter-seal{width:72px;height:72px}}

/* Round 14 layout B (coordinator for Nicole): on phones the open letter's body stays at 16 px or larger. The sheet is set a
   little tighter, and it is no longer scaled below that size; where it is taller than the screen, the letter scrolls. */
@media(max-width:700px){
 .cinema.motion-enabled .invitation-paper p{font-size:16.5px!important;line-height:1.42!important;margin-bottom:12px!important}
 .cinema.motion-enabled .invitation-paper .panel-content{padding-left:18px!important;padding-right:18px!important}
 .cinema.motion-enabled .invitation-ending[data-envelope=open]{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .cinema.motion-enabled .invitation-ending[data-envelope=open] .invitation-flow{padding-bottom:96px}
 /* Realign (10-22): the open letter's scroll view ends 8 px above the fixed theme and sound buttons (44 px, 12 px up), so no
    line of the letter ever passes under them while it scrolls; the 96 px flow padding lets the last line rest above that edge. */
 .cinema.motion-enabled .invitation-ending[data-envelope=open]{clip-path:inset(0 0 calc(64px + env(safe-area-inset-bottom)) 0)}}