/* Tap-to-open demo v2 (2026-10-16). The opening plays frame by frame on a canvas (see-through WebP frames from his
   Kling run), so iPhone shows no blue box and the envelope is drawn before any tap. After it opens: the card slides
   up out of the pocket (the pocket front is a separate layer over it), the envelope drops until its bottom is just
   off screen, everything behind blurs. The card is a stand-in; its design is still open. */
:root { --s0: 11.1px; --s1: 18px; --s2: 29.1px; --s3: 47.1px; --col: min(100vw, 460px); }
body { background: var(--ivory); overflow-x: clip; }
.pg2 { position: relative; min-height: 100svh; width: var(--col); margin: 0 auto; box-sizing: border-box; padding: 32px 24px 24px; display: flex; flex-direction: column; isolation: isolate; }
.pg2 .logo { width: 180px; height: auto; }
.pg2 h1 { margin: 26px 0 0; font: 400 min(var(--s3), 12.07vw)/1.04 "Instrument Serif", Georgia, serif; letter-spacing: -.02em; }
.pg2 h1 .script { font: 400 1.1em/.9 "Pinyon Script", cursive; color: var(--pink); white-space: nowrap; }
.sp { flex: 1; } /* centre the envelope in the space under the headline */
.sp:last-child { flex: .6; }
.blurs { transition: filter .6s ease, opacity .6s ease; }
body.open .blurs { filter: blur(6px); opacity: .7; }

/* The stage is the square video frame; the envelope only fills its middle at first, so pull the empty bands in. */
.stage { --w: calc(var(--col) * 1.12); position: relative; z-index: 2; display: block; width: var(--w); aspect-ratio: 1; margin: calc(var(--w) * -.24) 0 calc(var(--w) * -.22) calc((var(--col) - 48px - var(--w)) / 2); transition: transform 1.1s cubic-bezier(.45,0,.2,1); }
/* Ivory/pink split runs through the sealed envelope's middle (the layering); script sets --split. */
body::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: var(--split, 56%); height: 200vh; background: var(--blush); }
body { position: relative; }
.stage canvas, .stage .first, .stage .front { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage .front { z-index: 3; opacity: 0; }
body.open .stage .front { opacity: 1; }
.hit { position: absolute; z-index: 4; inset: 18% 4%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hit:focus-visible { outline: 2px solid var(--olive); }
body.opening .hit { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .stage.idle canvas, .stage.idle .first { animation: nudge 1.7s ease-in-out .5s infinite; transform-origin: 50% 60%; }
  @keyframes nudge { 0%, 52%, 100% { transform: none; } 60% { transform: translateY(-9px) rotate(-3deg); } 68% { transform: translateY(-5px) rotate(3deg); } 76% { transform: translateY(-2px) rotate(-1.5deg); } 84% { transform: none; } }
}

/* The card lives inside the stage, between the open envelope and its pocket front, clipped at the envelope's bottom. */
.slot { position: absolute; z-index: 2; left: 0; right: 0; top: -200vh; bottom: 1.6%; overflow: hidden; pointer-events: none; }
/* Locked card (2026-10-16): torn-edge cotton card with a pressed panel and the ribbon B pressed in, no ink.
   Its plain bottom margin stays in the pocket; the panel closes just above it. */
.card { position: absolute; left: 0; right: 0; margin-inline: auto; width: min(70%, calc(var(--b) * 16.94)); bottom: 0; /* card width from the same base: 305 phone, 339 desktop */ transform: translateY(var(--hide, 100%)); visibility: hidden; transition: transform 1.1s cubic-bezier(.45,0,.2,1); pointer-events: auto;
  filter: drop-shadow(0 1px 1px rgba(59,61,48,.14)) drop-shadow(0 12px 14px rgba(59,61,48,.22)); }
body.open .card { visibility: visible; }
body.out .card { transform: translateY(var(--lift, -40%)); }
/* Everything on the card scales with the card (--u = 1px on the 297px phone card). */
.card, .rest { container-type: inline-size; }
/* Golden scale (Brayden, 2026-10-17): one base, everything else base x 1.618^n, base itself 18 on phone, 20 on desktop. */
:root { --b: 18px; --g-2: calc(var(--b) / 2.618); --g-1: calc(var(--b) / 1.618); --g0: var(--b); --g1: calc(var(--b) * 1.618); --g2: calc(var(--b) * 2.618); --g3: calc(var(--b) * 4.236); }
@media (min-width: 900px) { :root { --b: 20px; } }
.deckle { --u: calc(100cqw / 297); position: relative; display: flex; flex-direction: column; gap: var(--g0); padding: calc(var(--g1) + var(--g-1)) var(--g1) calc(var(--g2) + var(--g1)); background: var(--ivory); clip-path: polygon(0.00% 0.41%, 3.33% 0.50%, 6.67% 0.83%, 10.00% 0.42%, 13.33% 0.46%, 16.67% 0.53%, 20.00% 0.17%, 23.33% 0.46%, 26.67% 0.57%, 30.00% 0.71%, 33.33% 0.08%, 36.67% 0.27%, 40.00% 0.08%, 43.33% 0.73%, 46.67% 0.62%, 50.00% 0.04%, 53.33% 0.88%, 56.67% 0.87%, 60.00% 0.59%, 63.33% 0.55%, 66.67% 0.14%, 70.00% 0.01%, 73.33% 0.48%, 76.67% 0.05%, 80.00% 0.17%, 83.33% 0.22%, 86.67% 0.03%, 90.00% 0.42%, 93.33% 0.40%, 96.67% 0.76%, 100.00% 0.47%, 99.68% 3.33%, 99.55% 6.67%, 99.70% 10.00%, 99.51% 13.33%, 99.35% 16.67%, 100.00% 20.00%, 100.00% 23.33%, 99.86% 26.67%, 99.74% 30.00%, 99.38% 33.33%, 99.31% 36.67%, 99.36% 40.00%, 99.16% 43.33%, 99.79% 46.67%, 99.46% 50.00%, 99.86% 53.33%, 99.45% 56.67%, 99.96% 60.00%, 99.86% 63.33%, 99.10% 66.67%, 99.29% 70.00%, 99.92% 73.33%, 99.52% 76.67%, 99.98% 80.00%, 99.46% 83.33%, 99.17% 86.67%, 99.67% 90.00%, 99.80% 93.33%, 99.34% 96.67%, 99.18% 100.00%, 96.67% 99.40%, 93.33% 99.97%, 90.00% 99.78%, 86.67% 99.21%, 83.33% 99.32%, 80.00% 99.19%, 76.67% 99.15%, 73.33% 99.82%, 70.00% 99.26%, 66.67% 99.60%, 63.33% 99.50%, 60.00% 99.27%, 56.67% 99.76%, 53.33% 99.22%, 50.00% 99.68%, 46.67% 99.20%, 43.33% 99.48%, 40.00% 99.29%, 36.67% 99.34%, 33.33% 99.97%, 30.00% 99.82%, 26.67% 99.37%, 23.33% 99.90%, 20.00% 99.29%, 16.67% 99.45%, 13.33% 99.87%, 10.00% 99.68%, 6.67% 99.19%, 3.33% 99.99%, 0.00% 99.29%, 0.23% 96.67%, 0.70% 93.33%, 0.30% 90.00%, 0.27% 86.67%, 0.07% 83.33%, 0.08% 80.00%, 0.52% 76.67%, 0.22% 73.33%, 0.54% 70.00%, 0.33% 66.67%, 0.41% 63.33%, 0.86% 60.00%, 0.44% 56.67%, 0.52% 53.33%, 0.78% 50.00%, 0.16% 46.67%, 0.14% 43.33%, 0.82% 40.00%, 0.74% 36.67%, 0.22% 33.33%, 0.17% 30.00%, 0.67% 26.67%, 0.85% 23.33%, 0.18% 20.00%, 0.86% 16.67%, 0.79% 13.33%, 0.54% 10.00%, 0.38% 6.67%, 0.09% 3.33%); }
.deckle::after { content: ""; position: absolute; inset: var(--g-1) var(--g-1) calc(var(--g2) + var(--g-1)) var(--g-1); border-radius: 2px; pointer-events: none;
  box-shadow: inset 2px 2px 3px rgba(59,61,48,.22), inset -1.5px -1.5px 1px rgba(255,255,255,1), 1.5px 1.5px 1px rgba(255,255,255,.95), -1.5px -1.5px 2px rgba(59,61,48,.12); }
.deckle > :not(.press) { position: relative; z-index: 1; }
.press { position: absolute; right: var(--g1); top: var(--g1); filter: drop-shadow(-1px -1px 0 #fff) drop-shadow(1px 1px .5px rgba(59,61,48,.42)); }
.press i { display: block; width: var(--g1); height: calc(var(--g1) * 1.545); background: #ECE7DE; -webkit-mask: url("/img/bravessa-mark-ribbon-even.svg") center / contain no-repeat; mask: url("/img/bravessa-mark-ribbon-even.svg") center / contain no-repeat; }
.card .big, .rest .big { margin: 0 0 var(--g-2); padding-right: var(--g1); font: 400 var(--g1)/1.1 "Instrument Serif", Georgia, serif; text-wrap: balance; }
.card .big .script, .rest .big .script { font: 400 1.1em/.9 "Pinyon Script", cursive; color: var(--pink); }
.card form { display: flex; flex-direction: column; gap: var(--g-2); }
.card label { font: 600 var(--g-1)/1.3 "Nunito Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.card input { box-sizing: border-box; min-height: max(44px, var(--g2)); padding: 0 var(--g0); border: 1px solid rgba(59,61,48,.68); border-radius: 999px; background: var(--ivory); color: var(--olive); font: 400 var(--g0) "Nunito Sans", sans-serif; }
.card input::placeholder { color: var(--taupe); opacity: 1; }
.card input:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 4px rgba(163,170,147,.35); }
/* Lit from above (brand rule): gradient, top highlight, darker bottom edge, contact shadow, Sage glow; press flips it. */
.card form button { min-height: max(44px, var(--g2)); border: 0; border-radius: 999px; background: linear-gradient(to bottom, #ADB49E, #9AA18A); color: var(--ivory); font: 700 var(--g0)/1 "Nunito Sans", sans-serif; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(59,61,48,.22), 0 1px 2px rgba(32,33,30,.32), 0 8px 22px -6px rgba(163,170,147,.75); transition: box-shadow .12s ease-out, background .12s ease-out; }
.card form button:active { background: linear-gradient(to top, #ADB49E, #9AA18A); box-shadow: inset 0 2px 4px rgba(59,61,48,.32); }
.card form button:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.legal a { color: var(--olive); }

@media (prefers-reduced-motion: reduce) { .card, .stage, .blurs, .close { transition: none !important; } }
/* Too short for the open card (phone on its side, big zoom): the card comes in front of the envelope and the page
   scrolls so the form is always reachable. Normal screens never scroll. */
html.tight, html.tight body { height: auto; overflow: auto; }
html.tight body { position: static; }
html.tight .slot { z-index: 4; overflow: visible; }
html.tight .legal { position: static; transform: none; margin: 0 auto; }
/* One screen, no scrolling (Brayden, 2026-10-16): the page stops at the Privacy and Accessibility links. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; touch-action: manipulation; }
.pg2 { min-height: 0; height: 100%; padding-bottom: 52px; }
.legal { position: fixed; z-index: 1; left: 50%; bottom: 0; width: var(--col); transform: translateX(-50%); box-sizing: border-box; margin: 0; padding: 12px 24px calc(14px + env(safe-area-inset-bottom)); }

/* Close X: fades in 3 s after the card is out, just above its top-right corner. */
.close { position: absolute; z-index: 3; right: 2px; top: -48px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; -webkit-tap-highlight-color: transparent; }
.close span { display: none; }
.close svg { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; }
.close:focus-visible { outline: 2px solid var(--olive); outline-offset: -6px; }
body.can-close .close { opacity: 1; visibility: visible; transition: opacity .2s ease; }

/* Form states: inline error under the box, busy button, thank-you in place of the form. */
.card .note { margin: 2px 0 0; font: 400 var(--g-1)/1.3 "Nunito Sans", sans-serif; color: var(--olive); }
.card .note a { color: var(--olive); font-weight: 600; text-underline-offset: 3px; }
.card input, .card form button { margin-left: -6px; width: calc(100% + 6px); } /* pills hang 6px left so their round ends line up with the text */
.card .big:focus { outline: none; }
.card .err { display: none; margin: 2px 0 0 4px; font: 600 var(--g-1)/1.3 "Nunito Sans", sans-serif; color: #B3261E; } /* error red, about 6:1 on Ivory */
.card form.invalid .err { display: block; }
.card form.invalid input { border-color: #B3261E; box-shadow: 0 0 0 2px rgba(179,38,30,.25); }
.card form button:disabled { background: #C9C7C0 !important; color: #6E6D66; box-shadow: none !important; cursor: default; }
.card .done { display: none; margin: 0; font: 400 var(--s1)/1.4 "Nunito Sans", sans-serif; }
.card.joined form, .rest form, .rest .close { display: none; }
/* Thank-you (option 10, 2026-10-17): pressed words above a pressed line, resting at the bottom of the same-size card. */
.card.joined .done, .rest .done { display: flex; flex-direction: column; gap: var(--g0); margin-top: auto; }
.done .small { text-wrap: balance; }
.done .rule { height: 0; border-top: 1px solid #fff; box-shadow: 0 -1px 0 rgba(59,61,48,.3); }
.card .done:focus { outline: none; }
.emb { margin: 0; font: 400 var(--g2)/1 "Instrument Serif", Georgia, serif; color: #ECE7DE; text-shadow: -1px -1px 0 #fff, 1px 1px .5px rgba(59,61,48,.42); }
.small { margin: 0; font: 400 var(--g0)/1.45 "Nunito Sans", sans-serif; }
/* Welcome screen: after joining and closing, and on every later visit from this device. No envelope. */
/* After the X (option 9, 2026-10-17): the envelope drops away, the thank-you card glides down and rests tilted on
   the page, the headline changes to "You're on the list." Same screen on every later visit from this device. */
.rest { position: fixed; z-index: 3; left: 50%; bottom: 76px; width: min(300px, 78vw); transform: translateX(-50%) rotate(-3deg); transform-origin: 50% 50%;
  filter: drop-shadow(0 1px 1px rgba(59,61,48,.14)) drop-shadow(0 12px 14px rgba(59,61,48,.22)); }
.rest.moving { transition: transform .9s cubic-bezier(.45,0,.2,1); }
body.welcomed .stage { opacity: 0; transform: translateY(45vh) !important; pointer-events: none; transition: opacity .6s ease, transform .8s cubic-bezier(.45,0,.2,1) !important; }
body.welcomed .pg2 h1 { transition: opacity .35s ease; }
body.swap .pg2 h1 { opacity: 0; }
body.welcomed .blurs { filter: none; opacity: 1; }
/* Returning visitor (js/early.js): hold the page until the welcome screen is set up, and never animate the
   envelope away. Shown once the script adds .ready (fonts loaded or 1 s, whichever first). */
.card .ts { position: absolute; width: 0; height: 0; overflow: hidden; } /* invisible bot check, no space in the card */
html.joined body { visibility: hidden; animation: show-anyway 0s 2s forwards; } /* if the script fails, show the page anyway */
@keyframes show-anyway { to { visibility: visible; } }
html.joined.ready body { visibility: visible; }
html.joined .stage, html.joined .stage * { visibility: hidden !important; transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .rest.moving, body.welcomed .stage, body.welcomed .pg2 h1 { transition: none !important; } }
@media (min-width: 900px) {
  :root { --col: min(1180px, 100vw - 2 * var(--inset)); }
  .pg2 { display: grid; grid-template-columns: 1fr 1.05fr; grid-template-rows: auto 1fr; column-gap: 5%; padding: 32px 0 24px; height: 100svh; min-height: 560px; }
  .pg2 .logo { grid-area: 1 / 1; }
  .pg2 h1 { grid-area: 2 / 1; align-self: start; margin: 4vh 0 0; font-size: min(76.2px, 9.5vh, 5.8vw); text-wrap: balance; } /* whole headline on Ivory, above the pink */
  .sp { display: none; }
  .stage { grid-area: 1 / 2 / 3 / 3; align-self: center; justify-self: center; width: min(115%, 104vh); margin: 0; }
}