/* Scratch & Reveal — shared scratch-card engine (see engine.js). Every style sets the theme variables below in its own style.css. */
:root {
  --bg: #0c2619; --bg-tile: none; --on-bg: #ead9ae; --on-bg-soft: rgba(234, 217, 174, .8);
  --ink: #2c3b2f; --ink-soft: #5d6a5c; --accent: #b8913f; --accent-deep: #8a6a2e; --accent-light: #ecd59b;
  --serif: 'Cormorant Garamond', Georgia, serif; --caps: 'Cinzel', 'Cormorant Garamond', serif; --script: 'Pinyon Script', cursive;
  --names-font: var(--script); --names-ink: var(--accent-deep); --names-shadow: 0 2px 0 rgba(255, 250, 236, .9), 0 -1px 1px rgba(80, 55, 15, .3);
  --amp-font: italic 400 .6em/1 var(--serif); --amp-ink: var(--ink);
  --hint-font: 500 25px/1.3 var(--caps); --hint-ls: .2em; --hint-ink: var(--ink);
  --date-font: 600 92px/1 var(--caps); --date-ls: .01em; --date-ink: #6d4b17;
  --date-shadow: 0 2.4px 0 rgba(255, 251, 238, .95), 0 -1.6px 1.2px rgba(70, 45, 10, .55);
  --date-face: linear-gradient(175deg, #f4dc9c 0%, #d2a650 36%, #9a6c22 60%, #dcb86c 100%);
  --label-font: 600 19px/1 var(--caps); --label-ink: var(--ink);
  --title-font: 400 clamp(40px, 12vw, 54px)/1.15 var(--script); --title-fill: none; --title-ink: var(--accent);
  --eyebrow-font: italic 400 21px/1.2 var(--serif);
  --paper: #f3ecdc; --paper-img: none; --paper-size: 512px;
  --sheet-radius: 3px; --sheet-edge: 0 0 0 1.5px #c9a35a, 0 14px 32px rgba(0, 0, 0, .3);
  --sheet-line: 1px solid rgba(184, 145, 63, .7); --sheet-line2: inset 0 0 0 3px rgba(243, 236, 220, .4), inset 0 0 0 4px rgba(44, 59, 47, .28);
  --h2-font: 400 54px/1.05 var(--script); --h2-ink: var(--accent-deep);
  --cd-font: 600 38px/1.1 var(--caps); --cd-fill: none; --cd-ink: var(--accent-deep);
  --btn-font: 600 12px/1 var(--caps); --btn-ls: .22em; --btn-ink: var(--ink); --btn-bg: rgba(255, 252, 242, .55); --btn-line: var(--accent); --btn-radius: 999px;
  --details-ink: var(--on-bg); --details-bg: rgba(0, 0, 0, .12); --details-line: var(--on-bg-soft);
  --photo-filter: none; --photo-blend: multiply; --photo-opacity: .96;
  --ease: cubic-bezier(.22, .8, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { font-family: var(--serif); color: var(--ink); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; background: var(--bg) var(--bg-tile) center top / 420px repeat; }
body.locked { overflow: hidden; height: 100svh; }
.app { position: relative; max-width: 480px; margin: 0 auto; min-height: 100svh; overflow: hidden; background: var(--bg); box-shadow: 0 0 80px rgba(0, 0, 0, .25); }

/* ───────── first screen ───────── */
.hero { position: relative; height: 100svh; min-height: 480px; overflow: hidden; background: var(--bg); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.stage-wrap { position: absolute; inset: 0; opacity: 0; }
.hero:not(.ready) .b-hint, .hero:not(.ready) .top-copy .eyebrow, .hero:not(.ready) .tap-reveal { opacity: 0; }
.hero.ready .stage-wrap { animation: tkSettle .75s cubic-bezier(.2, .75, .2, 1) both; }
.hero.rm.ready .stage-wrap { animation: tkFade .4s ease both; }
@keyframes tkSettle { from { opacity: 0; transform: scale(1.035) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tkFade { from { opacity: 0; } to { opacity: 1; } }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.scene { position: absolute; left: 0; top: 0; pointer-events: none; }

/* the photo window: the buyer's photo printed into the card (each style its own look), or a drawn fallback */
.portrait { position: absolute; overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: var(--photo-filter); mix-blend-mode: var(--photo-blend); opacity: 0; }
.hero.ready .portrait img { animation: tkDevelop 1s cubic-bezier(.3, .6, .3, 1) .15s both; }
@keyframes tkDevelop { from { opacity: 0; transform: scale(1.02); } to { opacity: var(--photo-opacity); transform: none; } }
.portrait .engrave { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--photo-overlay, none); mix-blend-mode: multiply; }
.portrait.blank { display: grid; place-items: center; }
.pm-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pm-ring > * { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.pm-ring > * + * { stroke: var(--ink); stroke-opacity: .35; stroke-width: 1; }
.hero.ready .pm-ring > * { animation: tkDraw 1.3s cubic-bezier(.45, 0, .2, 1) .1s forwards; }
.hero.ready .pm-ring > * + * { animation-delay: .3s; }
@keyframes tkDraw { to { stroke-dashoffset: 0; } }
.pm { position: relative; font: 400 104px/1 var(--names-font); color: var(--names-ink); white-space: nowrap; display: flex; align-items: baseline; }
.pm-l, .pm-amp { display: inline-block; padding: .12em .14em .2em; margin: -.12em -.14em -.2em; color: var(--names-ink); text-shadow: var(--names-shadow); }
.pm-amp { font: var(--amp-font); font-size: .48em; color: var(--amp-ink); padding: 0 .2em; margin: 0; }
.hero.ready:not(.rm) .pm-l, .hero.ready:not(.rm) .pm-amp {
  -webkit-mask-image: linear-gradient(90deg, #000 32%, transparent 68%); mask-image: linear-gradient(90deg, #000 32%, transparent 68%);
  -webkit-mask-size: 340% 100%; mask-size: 340% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: tkPenM .8s cubic-bezier(.33, 0, .2, 1) .3s both; }
.hero.ready:not(.rm) .pm-amp { animation-delay: .6s; animation-duration: .4s; }
.hero.ready:not(.rm) .pm-l ~ .pm-l { animation-delay: .75s; }
@keyframes tkPenM { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.pm-l.pw, .pm-amp.pw { -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; }
.pm-icon { margin: 0; color: var(--accent-deep); }
.pm-icon svg { width: 46%; height: auto; min-width: 90px; }
.portrait .line-icons svg { width: 120px; height: 120px; }

/* the plain band of the card: the hint, then the names written by an invisible pen */
.band { position: absolute; display: grid; place-items: center; text-align: center; }
.band > * { grid-area: 1 / 1; }
.b-hint { font: var(--hint-font); letter-spacing: var(--hint-ls); text-transform: uppercase; color: var(--hint-ink); max-width: 88%; opacity: .82; text-wrap: balance; text-shadow: var(--hint-shadow, none); }
.hero.ready .b-hint { animation: tkInk .8s cubic-bezier(.33, 0, .2, 1) .25s both; }
.hero.fin .b-hint { --o0: .82; animation: tkOut .45s ease forwards; }
@keyframes tkInk { from { opacity: 0; filter: blur(2px); transform: translateY(4px); } 60% { filter: blur(.3px); } to { opacity: .82; filter: none; transform: none; } }
@keyframes tkOut { from { opacity: var(--o0, 1); } to { opacity: 0; filter: blur(2px); } }
.b-names { position: relative; font: 400 100px/1 var(--names-font); white-space: nowrap; color: var(--names-ink); visibility: hidden; }
.b-names.two { white-space: normal; line-height: 1; max-width: 92%; }
.b-names .n, .b-names .amp { display: inline-block; padding: .14em .3em .26em; margin: -.14em -.3em -.26em; position: relative; color: var(--names-ink); text-shadow: var(--names-shadow); }
.b-names .amp { font: var(--amp-font); color: var(--amp-ink); margin: 0 .1em; vertical-align: .08em; }
.hero.fin .b-names { visibility: visible; }
.hero.fin:not(.rm):not(.fin-now) .b-names .n, .hero.fin:not(.rm):not(.fin-now) .b-names .amp {
  -webkit-mask-image: linear-gradient(90deg, #000 32%, transparent 68%); mask-image: linear-gradient(90deg, #000 32%, transparent 68%);
  -webkit-mask-size: 340% 100%; mask-size: 340% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: tkPen 1s cubic-bezier(.33, 0, .2, 1) .2s both; }
.hero.fin:not(.rm):not(.fin-now) .b-names .amp { animation-name: tkPenA; animation-duration: .5s; animation-delay: .7s; }
.hero.fin:not(.rm):not(.fin-now) .b-names .n ~ .n { animation-delay: .85s; }
@keyframes tkPen { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes tkPenA { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.b-names .n::after { content: ''; position: absolute; top: 10%; bottom: 20%; left: 0; width: .5em; pointer-events: none;
  background: radial-gradient(closest-side, var(--nib, rgba(255, 228, 170, .5)), transparent) no-repeat center / 0 0; }
.hero.fin:not(.rm):not(.fin-now) .b-names .n::after { animation: tkNib 1s cubic-bezier(.33, 0, .2, 1) .2s both; }
.hero.fin:not(.rm):not(.fin-now) .b-names .n ~ .n::after { animation-delay: .85s; }
@keyframes tkNib { 0% { left: 0; background-size: 0 0; } 30%, 70% { background-size: 100% 100%; } 100% { left: calc(100% - .5em); background-size: 0 0; } }
.b-names .pw { -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; }
.b-names .pw::after { display: none; }
.hero.rm.fin .b-names { animation: tkFade .6s ease both; }
.pg { position: absolute; width: 22px; height: 22px; opacity: 0; pointer-events: none; background: radial-gradient(closest-side, var(--glint, rgba(255, 246, 222, .9)), transparent 75%); }
.g1 { left: 4%; top: 12%; } .g2 { right: 6%; top: 2%; width: 16px; height: 16px; } .g3 { right: 30%; bottom: 8%; width: 18px; height: 18px; }
.hero.fin:not(.rm):not(.fin-now) .g1 { animation: tkGlint 1.4s ease-in-out 1.0s both; }
.hero.fin:not(.rm):not(.fin-now) .g2 { animation: tkGlint 1.4s ease-in-out 1.3s both; }
.hero.fin:not(.rm):not(.fin-now) .g3 { animation: tkGlint 1.4s ease-in-out 1.55s both; }
@keyframes tkGlint { 0% { opacity: 0; transform: scale(.5); } 50% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(.7); } }

/* what the windows reveal: the style's type pressed into the card (a light edge below, a shade above, the face on top) */
.win { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: var(--win-pad, 6px); }
.dv { position: relative; font: var(--date-font); letter-spacing: var(--date-ls); color: var(--date-ink); text-shadow: var(--date-shadow); white-space: nowrap; }
.dv.long { font-size: var(--date-long, 54px); letter-spacing: 0; }
.dv.short { font-size: var(--date-short, 92px); }
.win.w1 .dv:not(.short) { font-size: var(--date-mid, 70px); letter-spacing: .03em; }
.dv::after { content: attr(data-t); position: absolute; inset: 0; text-shadow: none; color: transparent;
  background: linear-gradient(100deg, rgba(255, 248, 220, 0) 35%, rgba(255, 250, 230, var(--face-sheen, .9)) 48%, rgba(255, 248, 220, 0) 60%) 200% 0 / 300% 100% no-repeat, var(--date-face);
  -webkit-background-clip: text; background-clip: text; }
.win small { margin-top: 10px; font: var(--label-font); letter-spacing: .26em; text-transform: uppercase; color: var(--label-ink); opacity: .8; padding-left: .26em; }
.win.on .dv { animation: tkPress .7s cubic-bezier(.2, .8, .2, 1) both; }
.win.on .dv::after { animation: tkFaceSheen 1.1s ease-out .15s both; }
@keyframes tkPress { from { transform: scale(.94); filter: blur(1.5px); } to { transform: none; filter: none; } }
@keyframes tkFaceSheen { from { background-position: 200% 0, 0 0; } to { background-position: -100% 0, 0 0; } }

.foil, .glint { position: absolute; }
.foil { touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.foil:active { cursor: grabbing; }
.glint { pointer-events: none; mix-blend-mode: screen; }
.hero.fin .foil { pointer-events: none; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }

/* finale: a soft light bloom over the windows and a handful of glints round the card */
.bloom { position: absolute; pointer-events: none; opacity: 0; mix-blend-mode: var(--bloom-blend, screen);
  background: radial-gradient(ellipse 50% 46% at 50% 52%, var(--bloom1, rgba(255, 240, 200, .75)), var(--bloom2, rgba(255, 226, 160, .25)) 45%, transparent 75%); }
.hero.fin:not(.rm):not(.fin-now) .bloom { animation: tkBloom 1.3s cubic-bezier(.3, .6, .3, 1) both; }
@keyframes tkBloom { 0% { opacity: 0; transform: scale(.8); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.12); } }
.sparks { position: absolute; inset: 0; pointer-events: none; }
.spk { position: absolute; width: 46px; height: 46px; margin: -23px; opacity: 0;
  background: radial-gradient(closest-side, #fffaf0 0, var(--spark, rgba(255, 238, 190, .9)) 18%, transparent 60%),
    linear-gradient(90deg, transparent 47%, var(--spark-ray, rgba(255, 246, 220, .95)) 50%, transparent 53%) center / 100% 100%,
    linear-gradient(0deg, transparent 47%, var(--spark-ray, rgba(255, 246, 220, .95)) 50%, transparent 53%) center / 100% 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.s9, .s10 { width: 34px; height: 34px; margin: -17px; }
.hero.fin:not(.rm):not(.fin-now) .spk { animation: tkSpark .9s cubic-bezier(.3, .6, .3, 1) both; }
.s1 { animation-delay: .05s !important; } .s2 { animation-delay: .12s !important; } .s3 { animation-delay: .2s !important; } .s4 { animation-delay: .26s !important; }
.s5 { animation-delay: .32s !important; } .s6 { animation-delay: .38s !important; } .s7 { animation-delay: .44s !important; } .s8 { animation-delay: .5s !important; }
.s9 { animation-delay: .62s !important; } .s10 { animation-delay: .7s !important; }
@keyframes tkSpark { 0% { opacity: 0; transform: scale(.3) rotate(0); } 40% { opacity: 1; transform: scale(1) rotate(25deg); } 100% { opacity: 0; transform: scale(.6) rotate(50deg); } }

/* lines on the background above and below the card */
.top-copy { position: absolute; left: 0; right: 0; top: 0; display: grid; align-items: end; justify-items: center; padding: 0 22px 14px; text-align: center; pointer-events: none; z-index: 3; }
.top-copy > * { grid-area: 1 / 1; }
.top-copy .eyebrow { font: var(--eyebrow-font); color: var(--on-bg); letter-spacing: .02em; text-shadow: var(--on-bg-shadow, none); }
.hero.ready .top-copy .eyebrow { animation: tkRise .7s var(--ease) .15s both; }
.hero.fin .top-copy .eyebrow { animation: tkOut .45s ease forwards; }
@keyframes tkRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.top-copy .std { font: var(--title-font); letter-spacing: var(--title-ls, 0); padding: 0 .2em .05em; opacity: 0; transform: translateY(8px); color: var(--title-ink); filter: var(--title-shadow, none); }
.top-copy .std.tex { background: linear-gradient(100deg, rgba(255, 246, 214, 0) 30%, rgba(255, 248, 222, .55) 45%, rgba(255, 246, 214, 0) 60%) -200% 0 / 300% 100% no-repeat, var(--title-fill) center / 260px;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero.fin .top-copy .std { animation: tkStd .9s var(--ease) .35s both, tkSheen 1.6s ease-in-out 1.2s both; }
.hero.fin-now .top-copy .std, .hero.rm.fin .top-copy .std { animation: none; opacity: 1; transform: none; }
.hero.fin-now .top-copy .eyebrow, .hero.fin-now .b-hint { animation: none; opacity: 0; }
@keyframes tkStd { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tkSheen { from { background-position: -200% 0, center; } to { background-position: 200% 0, center; } }

.bot-copy { position: absolute; left: 0; right: 0; bottom: 0; display: grid; align-items: start; justify-items: center; padding: 18px 22px 0; z-index: 3; }
.bot-copy > * { grid-area: 1 / 1; }
.tap-reveal { font: 500 15px/1.3 var(--serif); letter-spacing: .08em; color: var(--on-bg); background: none; border: 0; border-bottom: 1px solid var(--on-bg-soft); padding: 6px 2px 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero.ready .tap-reveal { animation: tkRise .7s var(--ease) .5s both; }
.revealed .tap-reveal { visibility: hidden; pointer-events: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 22px; padding: 14px 30px; border-radius: var(--btn-radius); text-decoration: none; cursor: pointer;
  font: var(--btn-font); letter-spacing: var(--btn-ls); text-transform: uppercase; position: relative; overflow: hidden; isolation: isolate; }
.btn.gild { color: var(--btn-ink); background: var(--btn-bg); border: 1px solid var(--btn-line); box-shadow: var(--btn-shadow, inset 0 0 0 3px rgba(255, 252, 242, .55), inset 0 0 0 4px rgba(184, 145, 63, .35), 0 6px 18px rgba(80, 60, 20, .12)); }
.btn.gild::after { content: ''; position: absolute; inset: -2px; z-index: -1; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, var(--btn-sheen, rgba(255, 238, 190, .7)) 50%, transparent 70%); animation: tkBtnSheen 5.5s ease-in-out 1.5s infinite; }
@keyframes tkBtnSheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.details-btn { margin-top: 0; color: var(--details-ink) !important; background: var(--details-bg) !important; border-color: var(--details-line) !important; box-shadow: none !important; opacity: 0; transform: translateY(10px); pointer-events: none; }
.revealed .details-btn { animation: tkRise .7s var(--ease) 1.25s both; pointer-events: auto; }
.hero.fin-now .details-btn, .hero.rm .details-btn { animation-delay: 0s; }

.music-btn { position: fixed; right: max(14px, calc(50vw - 240px + 14px)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--music-line, rgba(0, 0, 0, .2)); background: var(--music-bg, rgba(255, 255, 255, .7)); color: var(--music-ink, var(--ink)); cursor: pointer; transition: opacity .5s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.locked .music-btn { opacity: 0; pointer-events: none; }
.music-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* ───────── the pages: the style's paper sheets on its background ───────── */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
.sheets { position: relative; padding: 18px 12px 46px; display: flex; flex-direction: column; gap: 16px; background: var(--bg) var(--bg-tile) center top / 420px repeat; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; z-index: 2; background: linear-gradient(transparent, var(--hero-foot, rgba(0, 0, 0, .06))); }
.sheet { position: relative; padding: 52px 28px 50px; text-align: center; border-radius: var(--sheet-radius); background: var(--paper) var(--paper-img) center / var(--paper-size) repeat; box-shadow: var(--sheet-edge); }
.sheet::before { content: ''; position: absolute; inset: var(--sheet-inset, 9px); pointer-events: none; border: var(--sheet-line); border-radius: var(--sheet-inner-radius, 0); box-shadow: var(--sheet-line2); }
.sheet h2 { font: var(--h2-font); letter-spacing: var(--h2-ls, 0); color: var(--h2-ink); margin: 8px 0 6px; padding: 0 .1em; }
.sheet p { max-width: 330px; margin: 0 auto; }
.sheet p.pre { white-space: pre-line; }
.caps { font: var(--caps-font, 600 11.5px/1.5 var(--caps)); letter-spacing: .24em; text-transform: uppercase; }
.muted { color: var(--ink-soft); }
.rule { display: flex; align-items: center; justify-content: center; gap: 12px; width: 72%; margin: 14px auto 16px; }
.rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.rule span { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--accent); box-shadow: var(--rule-dot, none); }
.note { margin-top: 20px; font: italic 400 19px/1.3 var(--serif); color: var(--accent-deep); }
.line-icons { color: var(--icon-ink, var(--accent-deep)); }
.line-icons svg { width: 68px; height: 68px; }
.orn { position: relative; width: var(--orn-w, 132px); margin: 0 auto 14px; }
.orn img { width: 100%; height: auto; display: block; }
.orn[data-reveal] { transform: rotate(var(--orn-rot, -40deg)) scale(.86); transition: opacity 1.2s var(--ease), transform 2.2s cubic-bezier(.2, .7, .2, 1); }
.orn[data-reveal].in { transform: none; }
.o-foot { --orn-w: var(--orn-foot-w, 190px); margin-bottom: 18px; }
.r-mono { position: absolute; inset: 0; display: grid; place-items: center; white-space: nowrap; font: 400 27px/1 var(--names-font); color: var(--names-ink); padding-top: 2px; }
.f-mono { position: relative; height: 70px; margin: -6px 0 10px; }
.f-mono .r-mono { font-size: 54px; }
.r-mono .amp { font: var(--amp-font); color: var(--amp-ink); padding: 0 .16em; }
.sig { font-style: italic; color: var(--ink-soft); }

/* countdown: the style's frame (an image cartouche, or a drawn double line) */
.cd-sheet { padding: 22px 14px 40px; }
.cd-sheet .btn { margin-top: 12px; }
.cartouche { position: relative; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 1016 / 1462; padding: 12% 15% 6%; background: center / 100% 100% no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cartouche.css-frame { aspect-ratio: auto; padding: 40px 22px 34px; border: var(--frame-line, 1px solid var(--accent)); border-radius: var(--frame-radius, 0); box-shadow: var(--frame-shadow, none); }
.cartouche .line-icons { margin-bottom: 6px; }
.cartouche .line-icons svg { width: 54px; height: 54px; }
.cartouche h2 { font-size: var(--cd-h2, 44px); margin: 4px 0 2px; }
.countdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 10px 0 6px; width: 100%; max-width: 210px; }
.countdown div { display: flex; flex-direction: column; align-items: center; }
.cd-num { font: var(--cd-font); font-variant-numeric: tabular-nums lining-nums; color: var(--cd-ink); }
.cd-num.tex { padding: .14em .08em; margin: -.14em -.08em; /* the textured fill is painted only inside the box: keep the whole digit in it */ background: var(--cd-fill) center / 260px; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(255, 252, 240, .9)); }
.countdown span { font: 600 9.5px/1 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; padding-left: .22em; }
.cd-date { font: italic 400 17px/1.3 var(--serif); color: var(--ink); margin-top: 6px; text-wrap: balance; }

.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.gal.n1 { grid-template-columns: 1fr; }
.gal.odd figure:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.gal figure { aspect-ratio: 3 / 4; padding: var(--fig-pad, 5px); background: var(--fig-bg, #fbf6ea); border-radius: var(--fig-radius, 0); box-shadow: var(--fig-shadow, 0 0 0 1px rgba(184, 145, 63, .7), 0 8px 18px rgba(60, 45, 20, .18)); overflow: hidden; }
.gal img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--fig-img-radius, 0); }
.venue-name { font: var(--venue-font, 600 21px/1.3 var(--caps)); letter-spacing: .06em; color: var(--ink); margin: 6px 0 4px; }
.foot { padding: 40px 28px 44px; }

@media (max-width: 340px) { .sheet { padding: 46px 20px 44px; } .sheet h2 { font-size: calc(var(--h2-size, 54px) * .86); } .tap-reveal { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: opacity .4s ease; transform: none !important; }
  .btn.gild::after { animation: none; }
  .hero .top-copy .eyebrow, .hero .tap-reveal, .hero .b-hint { animation: none !important; opacity: 1; }
  .hero.fin .top-copy .eyebrow, .hero.fin .b-hint { opacity: 0; }
  .portrait img { animation: none !important; opacity: var(--photo-opacity); }
  .pm-ring > * { animation: none !important; stroke-dashoffset: 0; }
}
/* short phones (iPhone SE 1st gen, 320×568): the lines above the card get less room — the title a little smaller */
@media (max-height: 640px) { .top-copy { padding-bottom: 8px; } .top-copy .std, .top-copy .eyebrow { zoom: .82; } }