@font-face{font-family:'Pinyon Script';src:url(assets/fonts/pinyon.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url(assets/fonts/bodoni.woff2) format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'Gilda Display';src:url(assets/fonts/gilda.woff2) format('woff2');font-display:swap}

:root{
  --green-900:#1C2F24;--green-800:#24392C;--green-700:#2D4836;--green-600:#3A5B44;--green-glow:#5B7D5F;
  --gold:#CDAB62;--gold-deep:#9A7735;--gold-soft:rgba(205,171,98,.5);
  --on-green:#F4EEE1;--on-green-soft:#C8D2BC;
  --plum:#4A3456;--ink:#3D2A49;--plum-soft:#665470;
  --lilac:#B69ACF;--linen:#E5DBEE;--linen-deep:#D4C5E2;
  --paper:#FBF6EC;--paper-lit:#FFFCF4;--paper-shade:#F1E7D6;--paper-edge:#DDCFB8;
  --script:'Pinyon Script',cursive;--display:'Bodoni Moda',Didot,serif;--text:'Gilda Display',Georgia,serif;
  --ew:min(600px,86vw,calc((100svh - 290px) * 1.5));
  --eh:calc(var(--ew) * 2 / 3);
  --lw:min(640px,calc(100vw - 32px));
  color-scheme:light;
}
body[data-paper="white"]{--paper:#FFFFFF;--paper-lit:#FFFFFF;--paper-shade:#F2F1EE;--paper-edge:#DEDBD5}

*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;scrollbar-color:var(--green-600) var(--green-900);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--green-800);color:var(--on-green);font-family:var(--text);font-size:18px;line-height:1.55;overflow-x:hidden}
::selection{background:var(--lilac);color:var(--green-900)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
img,svg{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the name, set as the owner chose: Pinyon "Love," over Bodoni WISTERIA, small gold EVENTS ---------- */
.lockup{margin:0;display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-weight:400}
.lockup .l-love{font-family:var(--script);font-size:1.3em;margin-bottom:.06em}
.lockup .l-wis{font-family:var(--display);font-size:1em;letter-spacing:.16em;padding-left:.16em;text-transform:uppercase}
.lockup .l-ev{font-family:var(--display);font-size:max(11px,.42em);letter-spacing:.56em;padding-left:.56em;text-transform:uppercase;color:var(--gold);margin-top:.9em}

.masthead{position:absolute;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:flex-start;padding:22px clamp(16px,4vw,48px);pointer-events:none}
.masthead .lockup{font-size:19px}
.masthead .place{margin:6px 0 0;font-size:15px;color:var(--on-green-soft)}
@media (max-width:640px){.js[data-state="opening"] .masthead,.js[data-state="read"] .masthead{opacity:0}.masthead{justify-content:center;transition:opacity .5s}.masthead .place{display:none}.masthead .lockup{font-size:17px}}

/* ---------- 1. the glasshouse ---------- */
.glasshouse{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(150px,15vw,195px) 16px 40px;overflow:clip;isolation:isolate;
  background:radial-gradient(60% 55% at 50% 38%,var(--green-600) 0%,var(--green-700) 48%,var(--green-800) 100%)}
.garden{position:absolute;inset:0 0 auto;z-index:-1;pointer-events:none}
.garden img{width:100%;height:auto}
/* The wisteria moves in a light breeze: each cluster swings from its stem, out of step with its neighbours. */
.garden .spray{position:absolute;width:auto;max-width:none;transform-origin:50% 0;animation:breeze var(--d,5s) ease-in-out var(--dl,0s) infinite alternate;will-change:transform}
@keyframes breeze{from{transform:rotate(calc(var(--amp,3deg) * -1))}to{transform:rotate(var(--amp,3deg))}}
.glasshouse::after{content:'';position:absolute;inset:auto 0 0;height:min(10vh,80px);z-index:-1;background:linear-gradient(transparent,var(--green-800));pointer-events:none}

.stage{position:relative;width:100%;height:calc(var(--eh) + 48px)}
.env-layer{position:absolute;left:50%;top:24px;width:var(--ew);height:var(--eh);margin-left:calc(var(--ew) / -2)}
.env-layer svg{width:100%;height:100%;overflow:visible}
.env-back{z-index:1;border-radius:6px;box-shadow:0 34px 46px -22px rgba(8,20,12,.7),0 6px 14px -6px rgba(8,20,12,.4)}
.env-pocket{z-index:4;pointer-events:none}
.env-flap{z-index:5;height:calc(var(--eh) * .66);transform-style:preserve-3d}
.flap-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-in{transform:rotateX(180deg);visibility:hidden}
.seal-spot{position:absolute;left:36.5%;top:94%;width:27%;aspect-ratio:1;margin-top:-13.5%}
.letter .corner img{width:100%;height:auto}
.seal-spot .wax{position:absolute;inset:0;width:100%;height:100%;visibility:hidden}

.seal-spot .seal{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 3px 3px rgba(50,30,40,.35))}
/* the wax is poured as a drop that falls onto the flap tip, with a few flecks thrown off where it lands (app.js pourWax) */
.seal-spot .wax-drop{position:absolute;left:50%;top:50%;width:14%;height:21.5%;margin:-10.75% 0 0 -7%;visibility:hidden;overflow:visible}
.seal-spot .fleck{position:absolute;left:50%;top:50%;width:3.4%;aspect-ratio:1;margin:-1.7% 0 0 -1.7%;border-radius:50%;background:#7b566c;visibility:hidden}
/* a copy of the seal that lets go of the flap and falls (app.js sealFalls); no shadow, as a box shadow showed as a pale plate and a moving filter is slow on phones */
.seal-fall{position:absolute;z-index:6;max-width:none;pointer-events:none;will-change:transform}

.sheet{position:absolute;z-index:3;left:50%;top:calc(24px + var(--eh) * .07);width:calc(var(--ew) * .88);height:calc(var(--eh) * .8);margin-left:calc(var(--ew) * -.44);
  background:linear-gradient(180deg,var(--paper-lit),var(--paper) 46%,var(--paper-shade) 50%,var(--paper) 56%,var(--paper-shade));
  -webkit-mask-size:100% 100%;mask-size:100% 100%;transform-origin:50% 0}

/* The sealing film: a real hand pressing the seal, its green backdrop removed as it plays (app.js). */
.seal-film{max-width:none;position:absolute;z-index:9;pointer-events:none;visibility:hidden}   /* the frames carry their own soft round edge */

.cue{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px;text-align:center}
.seal-it{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 16px;margin-top:clamp(28px,4vw,44px)}
.listen-wrap{position:absolute;top:clamp(8px,1.2vw,14px);left:50%;transform:translateX(-50%);z-index:7}
.js:not([data-state="read"]) .listen-wrap{display:none}
.open.listen{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:10px 24px;min-height:46px}
.open.listen.on{background:var(--linen);border-color:var(--gold-deep)}
.cue .soon-line{margin:0 0 6px;font-size:18px;color:var(--on-green);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.cue .for-you{text-shadow:0 2px 12px rgba(0,0,0,.4);margin:0;font-family:var(--script);font-size:clamp(34px,3vw + 18px,46px);line-height:1.1;color:var(--on-green)}
.open{font:inherit;font-size:17px;letter-spacing:.03em;color:var(--plum);cursor:pointer;min-height:48px;padding:12px 30px;border:1px solid var(--gold);border-radius:999px;
  background:var(--paper);box-shadow:0 6px 10px -6px rgba(8,20,12,.7);transition:background-color .2s,box-shadow .2s,transform .2s}
.open:hover{background:var(--paper-lit);box-shadow:0 8px 12px -6px rgba(8,20,12,.75);transform:translateY(-1px)}
.open:active{transform:translateY(1px)}
/* after sealing: a quiet pointer down to the rest of the page */
.more{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px;padding:8px 14px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:16px;letter-spacing:.04em;color:var(--on-green);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.more::after{content:"";width:10px;height:10px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);animation:more 1.8s ease-in-out infinite}
@keyframes more{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(5px) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.more::after{animation:none}}

/* ---------- the letter ---------- */
.letter{position:relative;z-index:7;width:var(--lw);margin:0 auto;padding:clamp(34px,8vw,70px) clamp(24px,7vw,66px) clamp(40px,8vw,64px);color:var(--ink);
  background:radial-gradient(120% 70% at 30% 0%,var(--paper-lit),var(--paper) 55%,var(--paper-shade));
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  filter:drop-shadow(0 28px 30px rgba(8,20,12,.45));transform:perspective(1800px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
/* A soft sheen that slides across the paper as it tilts, so it reads as a real sheet in the light. */
.letter::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:soft-light;
  background:linear-gradient(calc(115deg + var(--tx,0deg) * 4),rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 48%,rgba(255,255,255,0) 66%),linear-gradient(180deg,rgba(255,255,255,.18),rgba(60,40,30,.06))}
.letter::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply;background-image:url(assets/letter-grain.webp)}
@media (pointer:coarse){.letter::before{display:none}.letter::after{mix-blend-mode:normal;opacity:.4}}
.letter .corner{display:none}   /* the wisteria sprig that used to hang from the top of the letter is gone (owner, 22 Oct) */
.letterhead{display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(26px,5vw,40px);color:var(--plum)}
.letterhead .lockup{font-size:clamp(17px,1.2vw + 12px,22px)}
.letterhead .rule{width:min(220px,50%);height:9px;margin-top:16px}
.letter .ink{font-family:var(--script);font-size:clamp(23px,1.1vw + 17px,29px);line-height:1.58}
.letter .ink p{margin:0 0 .75em}
.letter .salutation{font-size:1.18em}
.letter .signature{word-spacing:.18em;margin:1.2em 0 0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.letter .signature > span:first-child{font-size:1em}
.letter .signature > span:last-child{font-size:1.25em;margin-top:.1em}
.letter .place{margin:26px 0 0;text-align:center;font-family:var(--display);font-size:13px;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:#76591F}

/* ---------- 2. the table ---------- */
.table{position:relative;padding:clamp(72px,10vw,128px) clamp(16px,4vw,48px) clamp(150px,14vw,200px);color:var(--plum);text-align:center;
  background-color:var(--linen);
  background-image:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.4),transparent 70%)}
.table h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(34px,3.4vw + 16px,60px);line-height:1.08;letter-spacing:.01em;text-wrap:balance}
.table h2 em{font-family:var(--script);font-style:normal;font-size:1.15em;color:var(--plum-soft)}
.table .note{max-width:34rem;margin:18px auto 0;font-size:19px;color:var(--plum-soft)}
.table::before,.table::after{content:"";position:absolute;left:0;right:0;height:26px;background:var(--marble,var(--lilac)) center/640px 427px;box-shadow:inset 0 -1px 0 var(--gold-soft)}
.table::before{top:0}.table::after{bottom:0;box-shadow:inset 0 1px 0 var(--gold-soft)}
/* Place cards: plain torn-paper cards, each in its own soft colour, swaying a little like favours on a table; five in a row on a computer. */
.places{position:relative;z-index:1;list-style:none;margin:clamp(60px,7vw,88px) auto 0;padding:0;max-width:1320px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(40px,4vw,56px) clamp(22px,3vw,40px);perspective:900px}
.setting{width:clamp(184px,14.2vw,226px)}
.setting:nth-child(1){--c:#F3DCE3;transform:rotate(-1.8deg) translateY(8px)}
.setting:nth-child(2){--c:#E3D6F0;transform:rotate(1.4deg) translateY(30px)}
.setting:nth-child(3){--c:#F2E6C9;transform:rotate(-.8deg)}
.setting:nth-child(4){--c:#DCE6D2;transform:rotate(1.8deg) translateY(22px)}
.setting:nth-child(5){--c:#F4EFF8;transform:rotate(-1.4deg) translateY(8px)}
.sway{transform-origin:50% 0;animation:sway 6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.setting:nth-child(2) .sway{--d:-1.5s}.setting:nth-child(3) .sway{--d:-3s}.setting:nth-child(4) .sway{--d:-4.2s}.setting:nth-child(5) .sway{--d:-2.2s}
@keyframes sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
.setting:hover .sway{animation-play-state:paused}
.shadow{filter:drop-shadow(0 16px 12px rgba(60,35,80,.3))}
.card{position:relative;padding:34px 20px 26px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 42%),var(--c);transition:transform .4s cubic-bezier(.2,.8,.2,1);
  clip-path:polygon(0 1%,3% 0,9% .8%,16% 0,25% .7%,34% 0,45% .8%,57% 0,68% .7%,80% 0,90% .8%,97% 0,100% 1.2%,99.3% 12%,100% 25%,99.2% 40%,100% 55%,99.4% 70%,100% 85%,99.3% 99%,95% 100%,86% 99.3%,74% 100%,62% 99.4%,50% 100%,38% 99.3%,26% 100%,14% 99.4%,4% 100%,0 99%,.7% 85%,0 70%,.6% 55%,0 40%,.7% 25%,0 12%)}
.setting:hover .card{transform:translateY(-6px)}
.card::before{content:"";position:absolute;inset:9px;border:1px solid rgba(154,119,53,.6);pointer-events:none}
.card .kick{margin:0;font-family:var(--script);font-size:24px;line-height:1.2;color:var(--plum-soft)}
.card h3{margin:-2px 0 12px;font-family:var(--display);font-weight:500;font-size:15px;line-height:1.3;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:var(--ink)}
.card svg.art{display:block;width:108px;height:auto;margin:0 auto 10px;overflow:visible}
.card .blurb{display:block;margin:0;font-size:14.5px;line-height:1.45;color:var(--plum-soft);text-wrap:balance}
@media (max-width:560px){.places{gap:44px}.setting:nth-child(n){width:min(290px,84vw)}}
@media (prefers-reduced-motion:reduce){.sway{animation:none}.card{transition:none}}

/* ---------- 3. the close ---------- */
.close{position:relative;padding:clamp(150px,18vw,230px) 16px clamp(70px,9vw,110px);text-align:center;overflow:clip;isolation:isolate;
  background:radial-gradient(70% 60% at 50% 30%,var(--green-700),var(--green-800) 75%)}
.close .big-seal{width:clamp(150px,16vw,210px);height:auto;margin:0 auto 26px;filter:drop-shadow(0 12px 14px rgba(8,20,12,.5))}
.close .lockup{font-size:clamp(30px,3vw + 14px,52px)}
.close .soon{margin:30px auto 0;max-width:30rem;font-size:19px;color:var(--on-green-soft)}
.footer{padding:22px 16px 28px;text-align:center;font-size:14px;color:var(--on-green-soft);background:var(--green-900)}

.close .garden{z-index:-1}
.petals{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;perspective:700px}
.fall{position:absolute;top:-34px;animation:fall linear infinite;will-change:transform}
@media (pointer:coarse){.fall:nth-child(n+5){display:none}}
.sway{animation:sway ease-in-out infinite alternate;transform-style:preserve-3d}
.pt{animation:tumble ease-in-out infinite alternate}
@keyframes fall{to{transform:translateY(var(--drop,110vh))}}
@keyframes sway{from{transform:translateX(-30px)}to{transform:translateX(30px)}}
@keyframes tumble{0%{transform:rotateZ(-20deg) rotateX(0)}40%{transform:rotateZ(30deg) rotateX(26deg)}100%{transform:rotateZ(120deg) rotateX(-22deg)}}
.js[data-state="opening"] .bird,.js[data-state="read"] .bird{opacity:0}
/* while the page is busy folding or sealing: one flat picture of the garden stands in for its many swaying pieces, and the petals rest */
.garden-decor{position:absolute;left:0;top:0;pointer-events:none}
.busy-solid .garden>.garden-decor{visibility:hidden}
.garden-flat{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s;pointer-events:none}
.busy .garden-flat{opacity:1}
.busy-solid .garden>img{visibility:hidden}
.petals{transition:opacity .5s}
.busy .petals{opacity:0}
.bird{transition:opacity .4s;position:absolute;z-index:-1;width:clamp(40px,4vw,60px);height:auto;pointer-events:none}

/* ---------- folding the letter in three ---------- */
.fold{position:absolute;z-index:8;left:50%;width:var(--lw);margin-left:calc(var(--lw) / -2);perspective:2200px;pointer-events:none}
.fold .panel,.fold .hinge{position:absolute;left:0;width:100%;transform-style:preserve-3d;transform-origin:50% 0}
.fold .face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fold .face .letter{position:absolute;left:0;margin:0;filter:none;transform:none;transition:none}
.fold .face .letter::before,.fold .face .letter::after{display:none}
.fold .back{transform:rotateX(180deg);background:linear-gradient(180deg,var(--paper-shade),var(--paper) 60%,var(--paper-lit))}
.fold .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,25,30,.25),transparent 40%);opacity:0;pointer-events:none}

/* ---------- which parts show at each moment (only when the script runs) ---------- */
.intro-on main,.intro-on .masthead,.intro-on .footer{visibility:hidden}
.js:not([data-state="read"]) #letter{position:absolute;top:0;left:50%;margin-left:calc(var(--lw) / -2);visibility:hidden}
.js[data-state="read"] .env-layer,.js[data-state="read"] .sheet,.js[data-state="read"] .hand{display:none}
/* the cue keeps its place from the fold until the letter is open again, so the envelope never shifts when it shows or hides */
.js[data-state="read"] .cue{display:none}
/* the rest of the page waits below until the letter has been sealed */
.js:not(.unlocked) .table,.js:not(.unlocked) .close,.js:not(.unlocked) .footer{display:none}
.js:not([data-state="read"]) .seal-it{display:none}
html:not(.js) .env-layer,html:not(.js) .sheet,html:not(.js) .cue,html:not(.js) .hand,html:not(.js) .seal-it{display:none}
html:not(.js) .stage,.js[data-state="read"] .stage{height:auto}

@media (prefers-reduced-motion:reduce){.garden .spray{animation:none}.petals,.bird{display:none}.open,.letter{transition:none}}


/* ---------- the cinematic reading (Listen to the letter): the words light up as Dan reads, the camera follows, an arrow points at the button at the end ---------- */
.cine-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(105% 82% at 50% 44%,transparent 24%,rgba(7,17,11,.58) 60%,rgba(7,17,11,.93) 100%)}
.cine-on .cine-vignette{opacity:var(--vig,.7)}
.letter .w{transition:opacity .4s ease,color .4s ease}
/* The frame holds the stage's original footprint. CSS zoom lays out and paints
   at the camera's size, including the extra push toward the signature. */
.cine-frame{position:relative;width:100%;flex-shrink:0}
.stage.cine-layout{position:absolute;left:0;top:0;transform:none}
.cine-on .letter{filter:none;transform:none;transition:none}
.cine-on .letter::before,.cine-on .letter::after{mix-blend-mode:normal}
.cine-on .letter .ink .w{display:inline-block;position:relative;vertical-align:top;white-space:nowrap;text-align:center;opacity:.58}
.cine-on .letter .ink .w.read{opacity:.74}
.cine-on .letter .ink .w.cur{opacity:.9}   /* the sentence being spoken is lit as a whole */
.cine-on .letter .ink .w.cur.read{opacity:1}
.cine-on .letter .ink .w.now{opacity:1;color:#2a1736;text-shadow:0 0 .075em rgba(205,171,98,.35)}
.cine-on .letter .ink .w.now.em{text-shadow:0 0 .1em rgba(205,171,98,.45)}
/* Ornaments sit around the ink. They never filter, cover, or raster-scale the
   word itself, and their absolute boxes cannot change a line break. */
.letter .ink .word-ornament{position:absolute;display:block;pointer-events:none;font-size:inherit;opacity:0;margin:0;padding:0;z-index:3}
.word-star{width:.36em;height:.36em;background:#d4a640;clip-path:polygon(50% 0,60% 39%,100% 50%,60% 61%,50% 100%,40% 61%,0 50%,40% 39%)}
.word-petal{width:.24em;height:.42em;border-radius:75% 20% 70% 25%}
.word-rule{left:2%;right:2%;top:80%;height:2px;border-radius:2px;transform-origin:0 50%;background:linear-gradient(90deg,transparent,#c59a3c 12%,#e4c274 70%,transparent)}
.word-sheen{left:2%;right:2%;top:80%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#d9b45c 25%,#f0d588 55%,transparent);transform-origin:0 50%}
.word-halo{inset:0 -9%;border:1.5px solid rgba(190,148,58,.9);border-radius:50%}
.word-invitation{height:7px;background:none;border-bottom:2px solid rgba(190,148,58,.95);border-radius:50%}
/* the shimmer paints the word itself with a travelling band of gold, so its strokes stay as sharp as the rest */
.cine-on .letter .ink .w.shimmer{background-image:linear-gradient(105deg,#2a1736 0,#2a1736 38%,#e0b650 50%,#2a1736 62%,#2a1736 100%);background-size:270% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.cine-on .listen-wrap{opacity:.55;transition:opacity .3s}
.cine-on .listen-wrap:hover,.cine-on .listen-wrap:focus-within{opacity:1}   /* the pause button steps back while the camera is close to the words */
.seal-it{position:relative}
.press-here{position:absolute;left:50%;bottom:calc(100% - 2px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;visibility:hidden;white-space:nowrap}
.press-here.show{visibility:visible;opacity:1;transition:opacity .6s ease}
.ph-note{font-family:var(--script);font-size:clamp(26px,1.6vw + 16px,34px);line-height:1;color:#F6EBD0;padding:5px 20px 9px;border-radius:999px;background:rgba(22,40,30,.88);border:1px solid var(--gold-soft);box-shadow:0 8px 18px -8px rgba(0,0,0,.7);transform:rotate(-2deg)}
.ph-arrow{width:58px;height:60px;margin-top:2px;overflow:visible}
.ph-arrow path{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 5px rgba(0,0,0,.55))}
.press-here.show .ph-line{stroke-dasharray:90;stroke-dashoffset:90;animation:ph-draw .9s .2s ease-out forwards}
.press-here.show .ph-head{stroke-dasharray:44;stroke-dashoffset:44;animation:ph-draw .35s 1s ease-out forwards}
@keyframes ph-draw{to{stroke-dashoffset:0}}
.press-here.show .ph-arrow{animation:ph-bob 1.7s 1.5s ease-in-out infinite}
@keyframes ph-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.open.nudge{animation:ph-ring 2.3s 1.2s ease-out infinite}
@keyframes ph-ring{0%{box-shadow:0 0 0 0 rgba(205,171,98,.7),0 6px 10px -6px rgba(8,20,12,.7)}70%{box-shadow:0 0 0 20px rgba(205,171,98,0),0 6px 10px -6px rgba(8,20,12,.7)}100%{box-shadow:0 0 0 0 rgba(205,171,98,0),0 6px 10px -6px rgba(8,20,12,.7)}}
@media (prefers-reduced-motion:reduce){.letter .w,.cine-vignette{transition:none}.press-here.show .ph-line,.press-here.show .ph-head{animation:none;stroke-dashoffset:0}.press-here.show .ph-arrow,.open.nudge{animation:none}}
.seal-it{margin-top:clamp(116px,10vw,140px)}   /* room above the button for the arrow, so it never lands on the letter */
.js[data-state="read"] .glasshouse{padding-bottom:clamp(60px,40vh,420px)}   /* the page can scroll far enough to bring the button to the middle of the screen */

/* from Fold & seal until the seal is done the whole page stands still behind the hands: the arch's breeze, the falling petals, the bird */
html.still *,html.still *::before,html.still *::after{animation-play-state:paused!important}