/*
 * DIRECCIÓN ESTÉTICA: celebración editorial de lujo, inspirada en una invitación
 * de alta papelería y una campaña de perfumería: negro cálido de la fotografía,
 * marfil, oro champán, vidrio ahumado, metal cepillado y papel con relieve.
 * El medallón es una pieza de orfebrería fotográfica: canto estriado, laurel,
 * letras acuñadas y una luz de estudio que revela el relieve del metal.
 * JERARQUÍA: bienvenida = nombre → composición de cumpleaños → continuar;
 * carta = título → palabras → firma; huella = idea central → materiales → reverso;
 * deseo = torta → invitación → velas; final = dedicatoria → firma → celebración.
 * Los cinco capítulos conservan un solo lienzo. No hay desplazamiento de página.
 */
@font-face { font-family:'Allura'; src:url('assets/fonts/Allura-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
:root {
  --script: 'Allura', 'Brush Script MT', cursive;
  --calligraphy-ink: #403b32;
  --script-body: 32px;
  --script-body-mobile: 28px;
  --paper-glint: rgb(255 252 228 / .76);
  --foil-glint: rgb(255 243 212 / .94);
  --candle-spill: rgb(255 187 89 / .22);
  --paper-fiber: rgb(136 111 74 / .055);
  --paper-edge: #cbb68c;
  --paper-crease-light: rgb(255 250 240 / .8);
  --paper-crease-shade: rgb(108 84 49 / .08);
  --envelope: #d5c3a0;
  --envelope-shadow: #a58d64;
  --wax: #b1884c;
  --wax-light: #efd29a;
  --wax-dark: #755527;
  --canvas: #13110d;
  --canvas-rgb: 19 17 13;
  --surface: #1d1a15;
  --surface-raised: #27221b;
  --surface-input: #17140f;
  --ink: #f5efe3;
  --muted: #b9b0a1;
  --quiet: #978d7d;
  --gold: #e5c18a;
  --gold-light: #f6dfb4;
  --gold-dark: #a18356;
  --gold-ink: #2c2114;
  --paper: #f3ecdc;
  --paper-light: #fffaf0;
  --paper-ink: #332b21;
  --paper-muted: #68604f;
  --steel: #c5c0b6;
  --coral: #edab96;
  --sage: #bacaac;
  --error: #f6a99b;
  --focus: #ff675f;
  --black: #000;
  --white: #fff;
  --clear: transparent;
  --accent: var(--gold);
  --accent-dark: var(--gold-ink);
  --bg: var(--canvas);
  --cream: var(--ink);
  --line: rgb(197 192 182 / .18);
  --line-soft: rgb(197 192 182 / .09);
  --line-gold: rgb(229 193 138 / .32);
  --glow-gold: rgb(229 193 138 / .14);
  --glow-gold-soft: rgb(229 193 138 / .045);
  --glass: rgb(39 34 27 / .7);
  --glass-light: rgb(255 250 240 / .035);
  --shade: rgb(0 0 0 / .26);
  --shade-deep: rgb(0 0 0 / .54);
  --paper-line: rgb(104 96 79 / .22);
  --paper-shadow: rgb(0 0 0 / .28);
  --spark-color: rgb(246 223 180 / .6);
  --flame-edge: #e77b20;
  --flame-mid: #ffbd4b;
  --flame-core: #fff4ce;
  --flame-white: #fffdf1;
  --flame-blue: #8996bc;
  --wick: #50402a;
  --smoke: rgb(235 230 208 / .48);
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Manrope', Arial, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;
  --text-hero: 5rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s14: 56px; --s16: 64px; --s20: 80px;
  --s24: 96px; --s28: 112px; --s32: 128px;
  --medallion-size: 160px;
  --medallion-shadow: drop-shadow(0 3px 2px var(--shade-deep)) drop-shadow(0 12px 12px var(--shade-deep));
  --radius-sm: 4px; --radius: 8px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-card: 0 2px 2px var(--shade), 0 16px 40px var(--shade), inset 0 1px 0 var(--glass-light);
  --shadow-paper: 0 4px 8px var(--shade), 0 24px 64px var(--paper-shadow);
  --shadow-paper-glow: 0 4px 8px var(--shade), 0 24px 72px var(--glow-gold);
  --shadow-popover: 0 16px 64px var(--shade-deep);
  --shadow-button: 0 4px 16px var(--shade), inset 0 1px 0 var(--gold-light);
  --ease: cubic-bezier(.16,1,.3,1);
  --fast: 200ms;
  --medium: 400ms;
  --header-h: 88px;
  --dock-h: 112px;
  --gutter: clamp(var(--s6), 5.2vw, var(--s20));
  --scene-pad: var(--s20);
}

/* Foundation and shared material language. */
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { background:var(--canvas); color:var(--ink); font:400 var(--text-base)/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
body::before { content:''; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.22' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
body.loading { overflow:hidden; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:var(--clear); touch-action:manipulation; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:default; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:400; }
em,.serif-italic { font-family:var(--serif); font-weight:400; font-style:italic; }
img { max-width:100%; display:block; }
[hidden] { display:none!important; }
::selection { background:var(--accent); color:var(--gold-ink); }
:focus-visible { outline:2px solid var(--focus); outline-offset:var(--s1); }
.icon { width:var(--s5); height:var(--s5); fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-defs { position:absolute; width:0; height:0; overflow:hidden; }
.eyebrow { display:block; color:var(--muted); font-size:var(--text-xs); font-weight:600; line-height:1.5; letter-spacing:.12em; }
.accent { color:var(--accent); }
.skip-link { position:fixed; top:var(--s4); left:var(--s4); padding:var(--s3) var(--s5); background:var(--paper); color:var(--paper-ink); border-radius:var(--radius); z-index:120; transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:var(--s6); min-height:var(--s14); padding:var(--s4) var(--s6); border-radius:var(--radius); border:1px solid var(--clear); font-size:var(--text-sm); font-weight:700; line-height:1.4; transition:transform var(--fast) var(--ease), box-shadow var(--fast), background var(--fast), opacity var(--fast); }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(0) scale(.985); }
.button:disabled { opacity:.5; transform:none; }
.button.primary { background:linear-gradient(135deg,var(--gold-light),var(--accent)); color:var(--gold-ink); border-color:var(--line-gold); box-shadow:var(--shadow-button); }
.button.primary:hover { box-shadow:var(--shadow-button), 0 8px 32px var(--glow-gold); }
.button.outline { background:var(--glass-light); color:var(--ink); border-color:var(--line-gold); box-shadow:var(--shadow-card); }
.button.outline:hover { background:var(--glow-gold-soft); }
.text-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); border:0; padding:var(--s2) 0; background:none; color:var(--muted); font-size:var(--text-xs); line-height:1.5; transition:color var(--fast); }
.text-button:hover { color:var(--accent); }
.text-button .icon { width:var(--s4); height:var(--s4); }
.icon-button { display:inline-grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--radius); background:var(--glass-light); transition:background var(--fast),border-color var(--fast); }
.icon-button:hover { background:var(--glow-gold-soft); border-color:var(--line-gold); }

/* A single uninterrupted canvas, sampled from the photograph (#13110d). */
#site-content { position:relative; height:100dvh; isolation:isolate; }
.header { position:absolute; inset:0 var(--gutter) auto; height:var(--header-h); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:var(--s6); z-index:30; }
.brand { display:flex; align-items:center; gap:var(--s4); flex-shrink:0; }
.brand-mark { display:grid; place-items:center; width:var(--s12); height:var(--s12); font:400 var(--text-2xl)/1 var(--serif); letter-spacing:-.1em; padding-right:var(--s1); border:1px solid var(--line-gold); border-radius:var(--radius); background:linear-gradient(145deg,var(--glass-light),var(--clear)); color:var(--gold-light); box-shadow:inset 0 1px 0 var(--glass-light); }
.brand-caption { font-size:var(--text-xs); line-height:1.5; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.brand-caption b { font:inherit; }
.brand-caption>span { display:block; color:var(--quiet); font-size:var(--text-xs); letter-spacing:.08em; font-weight:400; }
.header nav { display:flex; align-items:center; gap:var(--s6); margin-left:auto; }
.header nav a { display:flex; align-items:center; gap:var(--s2); min-height:44px; position:relative; font-size:var(--text-xs); color:var(--muted); transition:color var(--fast); }
.header nav a::before { content:attr(data-index); color:var(--gold-dark); font-size:var(--text-xs); }
.header nav a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--fast); }
.header nav a:hover,.header nav a[aria-current] { color:var(--gold-light); }
.header nav a[aria-current]::after { transform:scaleX(1); }


.floating-controls { display:flex; align-items:center; background:var(--glass-light); border:1px solid var(--line); border-radius:var(--radius-pill); flex-shrink:0; }
.floating-controls button { min-width:44px; min-height:44px; padding:var(--s3); border:0; background:none; display:flex; align-items:center; gap:var(--s2); color:var(--muted); font-size:var(--text-xs); transition:color var(--fast); }
.floating-controls button:hover,.floating-controls button[aria-pressed="true"] { color:var(--gold-light); }
.floating-controls>span { width:1px; height:var(--s4); background:var(--line); }
.floating-controls #quick-confetti { color:var(--accent); }
.menu-button { display:none; }
#story-stage { position:absolute; top:var(--header-h); bottom:var(--dock-h); inset-inline:0; overflow:hidden; perspective:1600px; isolation:isolate; }
.story-panel { position:absolute; inset:0; width:100%; height:100%; min-height:0; overflow:hidden; padding:var(--scene-pad) var(--gutter); background:var(--clear); z-index:1; }
.story-panel.is-active { z-index:2; }
.story-panel::before { content:attr(data-chapter); position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%); color:var(--glow-gold-soft); font:400 clamp(180px,24vw,380px)/1 var(--serif); letter-spacing:-.08em; pointer-events:none; z-index:-1; }
.story-panel .entrance,.story-panel .reveal { opacity:1; }
.story-panel h1:focus,.story-panel h2:focus { outline:none; }
.ambient-particles { position:fixed; top:var(--header-h); bottom:var(--dock-h); inset-inline:0; pointer-events:none; overflow:hidden; z-index:0; opacity:.6; }
.ambient-particles i { position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size); border-radius:var(--radius-pill); background:var(--spark-color); opacity:0; animation:ambient-drift var(--duration) var(--delay) ease-in-out infinite; }
.scene-transition { position:fixed; top:var(--header-h); bottom:var(--dock-h); width:60%; left:0; z-index:20; pointer-events:none; opacity:0; background:linear-gradient(90deg,var(--clear),var(--glow-gold),var(--clear)); }
.ticker,footer,.hero-bottom { display:none; }

/* 01 — an asymmetric campaign cover; the art intentionally crosses the grid. */
.hero { display:grid; grid-template-columns:1fr 1.12fr; align-items:center; gap:var(--s6); }
.hero::before { display:none; }
.hero-copy { position:relative; z-index:3; max-width:600px; }
.hero-eyebrow { display:flex; align-items:center; gap:var(--s3); color:var(--gold); font-size:var(--text-xs); letter-spacing:.12em; font-weight:600; }
.live-dot { width:var(--s2); height:var(--s2); border:1px solid var(--accent); border-radius:var(--radius-pill); background:var(--accent); box-shadow:0 0 0 var(--s1) var(--glow-gold-soft); }
.hero h1 { font:400 var(--text-hero)/1.03 var(--serif); letter-spacing:-.055em; margin-top:var(--s6); }
.title-line { display:block; }
.hero h1 .name-line { font-size:var(--text-4xl); line-height:1.15; letter-spacing:-.045em; overflow-wrap:anywhere; }
.title-spark { width:var(--s8); height:var(--s8); margin-left:var(--s3); color:var(--accent); fill:none; stroke:currentColor; stroke-width:1.25; vertical-align:middle; }
.hero-description { margin-top:var(--s8); font-size:var(--text-base); line-height:1.7; color:var(--muted); }
.hero-recipient { font-size:var(--text-xs); line-height:1.65; margin-top:var(--s5); max-width:440px; }
.hero-recipient [data-professor] { color:var(--ink); font-weight:600; }
.hero-recipient>span:nth-child(2) { padding-inline:var(--s1); }
.hero-copy>.button { display:none; }
.hero-signature { display:flex; align-items:center; gap:var(--s3); font-size:var(--text-xs); color:var(--muted); margin-top:var(--s6); }
.hero-signature .icon { color:var(--accent); width:var(--s4); height:var(--s4); }
.hero-visual { height:100%; min-height:0; position:relative; background:var(--canvas); }
.visual-halo { position:absolute; inset:0 -5%; border-radius:50%; background:radial-gradient(ellipse at 55% 55%,var(--glow-gold-soft),var(--clear) 68%); }
.hero-image-wrap { position:absolute; inset-block:0; width:125%; left:-12%; display:flex; align-items:center; background:var(--canvas); mask-image:radial-gradient(ellipse 65% 75% at 50% 50%,var(--black) 50%,var(--clear) 98%); }
.hero-image { width:100%; height:auto; max-height:100%; object-fit:contain; mix-blend-mode:lighten; mask-image:linear-gradient(to bottom,var(--clear),var(--black) 12%,var(--black) 88%,var(--clear)); animation:art-breathe 8s ease-in-out infinite; user-select:none; pointer-events:none; }
.date-tag { position:absolute; top:0; right:0; width:var(--s28); min-height:var(--s32); padding:var(--s4) var(--s3); display:flex; align-items:center; flex-direction:column; gap:var(--s1); border:1px solid var(--line-gold); border-radius:var(--radius); background:linear-gradient(145deg,var(--surface-raised),var(--canvas)); box-shadow:var(--shadow-card); transform:rotate(5deg); z-index:4; }
.date-tag::before { content:''; position:absolute; inset:var(--s1); border:1px solid var(--line-soft); border-radius:var(--radius-sm); }
.date-tag>span:first-child { font-size:var(--text-xs); letter-spacing:.1em; color:var(--muted); }
.date-tag strong { font:400 var(--text-4xl)/1 var(--serif); color:var(--gold-light); letter-spacing:-.06em; }
.date-tag>span:last-child { font-size:var(--text-xs); text-align:center; line-height:1.4; color:var(--quiet); }
.round-seal { position:absolute; bottom:0; left:calc(-1 * var(--s4)); width:var(--medallion-size); height:var(--medallion-size); transform:rotate(-9deg); perspective:600px; z-index:4; }
.medallion-face { position:relative; width:100%; height:100%; transform:rotateX(var(--medal-x,0deg)) rotateY(var(--medal-y,0deg)); transition:transform var(--fast) var(--ease); filter:var(--medallion-shadow); }
.medallion-object { width:100%; height:100%; object-fit:contain; user-select:none; }
.medallion-glint { position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(110deg,var(--clear) 43%,var(--foil-glint) 50%,var(--clear) 57%); background-size:260% 100%; background-position:150% 0; mask:url('assets/medalla-gracias-profe.webp') center/contain no-repeat; mix-blend-mode:soft-light; }
.medallion-fallback { display:none; position:absolute; inset:var(--s2); border-radius:50%; border:1px solid var(--gold-light); background:radial-gradient(circle at 28% 20%,var(--gold-light),var(--gold) 45%,var(--gold-dark)); color:var(--gold-ink); box-shadow:var(--shadow-card); align-items:center; justify-content:center; flex-direction:column; gap:var(--s2); font-size:var(--text-xs); }
.medallion-fallback .icon { width:var(--s6); height:var(--s6); }
.round-seal[data-media-state="error"] .medallion-face { display:none; }
.round-seal[data-media-state="error"] .medallion-fallback { display:flex; }
.visual-note { display:none; }
.visual-cross { position:absolute; color:var(--gold-dark); stroke-width:1; }
.cross-one { right:0; top:55%; width:var(--s8); height:var(--s8); }
.cross-two { left:0; top:0; width:var(--s6); height:var(--s6); }

/* 02 — engraved stationery, offset against the same dark photography canvas. */
.letter-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--s20); align-items:center; padding-block:var(--s10); }
.section-side h2 { font:400 var(--text-3xl)/1.12 var(--serif); letter-spacing:-.04em; margin-top:var(--s6); }
.section-side h2 em { color:var(--accent); }
.letter-heading-compact { display:none; }
.letter-scribble { margin-top:var(--s10); display:flex; align-items:center; gap:var(--s4); color:var(--gold); font:italic 400 var(--text-xl)/1.4 var(--serif); }
.letter-scribble .icon { width:var(--s6); height:var(--s6); stroke-width:1.25; }
.letter { position:relative; display:flex; flex-direction:column; height:100%; max-height:620px; min-height:0; padding:var(--s8); color:var(--paper-ink); background:linear-gradient(135deg,var(--paper-light),var(--paper)); border:1px solid var(--paper-light); border-radius:var(--radius); box-shadow:var(--shadow-paper); transform:rotate(-.6deg); isolation:isolate; }
.letter::before { content:''; position:absolute; inset:var(--s2); border:1px solid var(--paper-line); border-radius:var(--radius-sm); pointer-events:none; z-index:-1; }
.letter::after { content:attr(data-monogram); position:absolute; right:var(--s6); bottom:var(--s24); font:400 160px/1 var(--serif); letter-spacing:-.12em; color:var(--paper-line); opacity:.18; pointer-events:none; z-index:-1; }
.letter-top { display:flex; justify-content:space-between; align-items:center; gap:var(--s4); border-bottom:1px solid var(--paper-line); padding-bottom:var(--s4); color:var(--paper-muted); font-size:var(--text-xs); line-height:1.4; text-transform:uppercase; }
.letter-top>span:last-child { white-space:nowrap; color:var(--paper-muted); }
.recipient-avatar { position:absolute; top:var(--s20); right:var(--s8); width:var(--s10); height:var(--s10); border:1px solid var(--paper-line); border-radius:50%; overflow:hidden; display:grid; place-items:center; font:400 var(--text-lg)/1 var(--serif); color:var(--paper-muted); background:var(--paper); }
.recipient-avatar img { width:100%; height:100%; object-fit:cover; }
.recipient-avatar:has(img:not([hidden]))>span { display:none; }
.letter h3 { font:400 var(--text-2xl)/1.15 var(--serif); letter-spacing:-.035em; margin:var(--s6) 0 var(--s5); padding-right:var(--s12); }
.letter-page-note { display:flex; justify-content:flex-end; align-items:center; gap:var(--s4); color:var(--paper-muted); font-size:var(--text-xs); line-height:1.4; margin-bottom:var(--s4); }
#letter-page-count { letter-spacing:.06em; font-weight:700; }
#letter-copy { flex:1; min-height:0; overflow:auto; display:flex; align-items:center; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--gold-dark) var(--clear); }
.letter p { color:var(--paper-ink); font-size:var(--text-base); line-height:1.85; }
.letter:not(.last-page) .letter-closing { display:none; }
.letter .letter-closing { font-size:var(--text-sm); font-weight:600; line-height:1.6; margin-top:var(--s4); }
.letter-closing em { color:var(--paper-muted); font-size:var(--text-lg); }
.signature { display:flex; align-items:center; gap:var(--s3); border-top:1px solid var(--paper-line); padding-top:var(--s4); margin-top:var(--s5); color:var(--paper-muted); font-size:var(--text-xs); line-height:1.4; position:relative; }
.signature>.icon { color:var(--gold-dark); }
.signature strong { display:block; font-size:var(--text-sm); font-weight:600; margin-top:var(--s1); color:var(--paper-ink); }
.signature-star { margin-left:auto; width:var(--s8); height:var(--s8); stroke-width:1.25; }

/* 03 — material studies, tactile cards and restrained specular highlights. */
.impact-section { display:flex; flex-direction:column; justify-content:center; padding-block:var(--s12); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:var(--s8); margin-bottom:var(--s8); flex-shrink:0; }
.section-heading h2 { font:400 var(--text-3xl)/1.12 var(--serif); letter-spacing:-.04em; margin-top:0; }
.section-heading h2 em { color:var(--accent); }
.section-heading>p { color:var(--muted); font-size:var(--text-sm); line-height:1.7; max-width:300px; }
.section-heading>p>span { display:block; font-size:var(--text-xs); margin-top:var(--s2); color:var(--quiet); }
.impact-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); position:relative; perspective:1600px; }
.flip-card { min-width:0; height:clamp(300px,36vh,390px); text-align:left; border:0; padding:0; background:none; perspective:1200px; }
.card-inner { display:block; position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform var(--medium) var(--ease); }
.flip-card.is-flipped .card-inner { transform:rotateY(180deg); }
.flip-card:hover:not(.is-flipped) .card-inner { transform:translateY(calc(-1 * var(--s2))) rotateY(-3deg); }
.card-face { position:absolute; inset:0; display:flex; flex-direction:column; padding:var(--s6); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); background:radial-gradient(circle at var(--px,50%) var(--py,0%),var(--glow-gold-soft),var(--clear) 62%),linear-gradient(145deg,var(--surface-raised),var(--surface) 35%,var(--canvas)); box-shadow:var(--shadow-card); overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; isolation:isolate; }
.card-face::before { content:''; position:absolute; inset:var(--s2); border:1px solid var(--line-soft); border-radius:var(--radius-sm); z-index:-1; pointer-events:none; }
.card-front::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,var(--clear) 25%,var(--glass-light) 46%,var(--clear) 65%); transform:translateX(-140%); pointer-events:none; }
.flip-card:hover .card-front::after { animation:card-glint 1s var(--ease) both; }
.card-coral .card-face { border-color:color-mix(in srgb,var(--coral) 24%,var(--clear)); }
.card-gold .card-face { border-color:var(--line-gold); }
.card-sage .card-face { border-color:color-mix(in srgb,var(--sage) 24%,var(--clear)); }
.card-number { display:block; color:var(--muted); font-size:var(--text-xs); letter-spacing:.045em; line-height:1.5; }
.card-art { position:relative; display:grid; place-items:center; flex:1; min-height:0; container-type:size; margin-block:var(--s3); overflow:hidden; transition:transform var(--fast) var(--ease); }
.card-art::before { content:''; width:min(100cqw,100cqh); height:min(100cqw,100cqh); position:absolute; inset:auto; background-image:url('assets/materiales.webp'); background-size:200% 200%; background-repeat:no-repeat; filter:drop-shadow(0 8px 8px var(--shade)); }
.art-support::before { background-position:0 0; }
.art-compass::before { background-position:100% 0; }
.art-energy::before { background-position:0 100%; }
.art-company::before { background-position:100% 100%; }
.art-fallback { width:var(--s16); height:var(--s16); color:var(--gold); stroke-width:1; filter:drop-shadow(0 4px 2px var(--shade)); }
.art-ready .art-fallback { visibility:hidden; }
.flip-card:hover .card-art { transform:scale(1.05); }
.card-front>strong { font:400 var(--text-2xl)/1.15 var(--serif); letter-spacing:-.035em; margin-bottom:var(--s5); }
.card-hint { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-top:auto; padding-top:var(--s4); border-top:1px solid var(--line); color:var(--muted); font-size:var(--text-xs); line-height:1.5; flex-shrink:0; }
.card-hint .icon { width:var(--s4); height:var(--s4); color:var(--accent); }
.card-back { transform:rotateY(180deg); }
.card-back>strong { font:400 var(--text-2xl)/1.15 var(--serif); margin-top:var(--s6); letter-spacing:-.035em; color:var(--gold-light); }
.card-back-copy { color:var(--muted); font-size:var(--text-sm); line-height:1.8; margin-top:var(--s5); }
.impact-caption { display:flex; align-items:center; justify-content:space-between; gap:var(--s6); margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--line); }
.impact-caption>span { font-size:var(--text-xs); color:var(--quiet); letter-spacing:.04em; }
.impact-caption>p { font:400 var(--text-xl)/1.3 var(--serif); }
.impact-caption em { color:var(--accent); }
.impact-caption .icon { color:var(--gold-dark); width:var(--s6); height:var(--s6); }
.impact-controls { display:none; }

/* 04 — a photographic still life with individually anchored, living flames. */
.wish-section { display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s20); align-items:center; }
.wish-stage { height:min(560px,100%); width:100%; position:relative; display:grid; place-items:center; container-type:size; }
.cake-scene { position:relative; width:min(100cqw,100cqh); height:min(100cqw,100cqh); max-width:600px; max-height:600px; container-type:inline-size; animation:atelier-float 7s ease-in-out infinite; }
.cake-render { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform var(--medium) var(--ease); }
.couture-cake { position:relative; width:100%; height:auto; z-index:1; filter:drop-shadow(0 12px 16px var(--shade)); pointer-events:none; user-select:none; }
.cake-contact-shadow { position:absolute; left:28%; right:28%; bottom:3%; height:5%; border-radius:50%; background:var(--shade-deep); filter:blur(14px); transform:scaleX(1.25); }
.candle-fire { position:absolute; left:var(--x); top:var(--y); width:0; height:0; z-index:2; pointer-events:none; }
.fire-left { --x:38.36%; --y:8.7%; --flame-delay:-.4s; }
.fire-center { --x:49.68%; --y:14.5%; --flame-delay:-1.1s; }
.fire-right { --x:60.85%; --y:8.7%; --flame-delay:-.8s; }
.candle-fire .flame { position:absolute; left:0; bottom:0; translate:-50% 0; width:2.35cqw; height:7.1cqw; min-width:5px; min-height:14px; max-width:15px; max-height:44px; border-radius:52% 48% 44% 45% / 70% 72% 29% 30%; background:radial-gradient(ellipse at 50% 77%,var(--flame-white) 0 15%,var(--flame-core) 28%,var(--flame-mid) 60%,var(--flame-edge)); box-shadow:0 0 8px var(--glow-gold),0 0 24px var(--glow-gold); transform-origin:50% 95%; animation:atelier-flame 1.9s var(--flame-delay) ease-in-out infinite; transition:opacity var(--medium),transform var(--medium); }
.candle-fire .flame::before { content:''; position:absolute; left:28%; right:25%; bottom:4%; height:53%; border-radius:50% 50% 35% 35%; background:linear-gradient(to top,var(--flame-core),var(--flame-white)); filter:blur(.8px); }
.candle-fire .flame::after { content:''; position:absolute; left:25%; right:25%; bottom:0; height:12%; border-radius:50%; background:radial-gradient(ellipse,var(--flame-blue),var(--clear)); opacity:.45; filter:blur(.8px); }
.candle-fire .flame i { position:absolute; bottom:0; left:43%; width:16%; height:21%; background:var(--wick); border-radius:70% 35% 0 0; transform:rotate(-9deg); opacity:.65; }
.flame-aura { position:absolute; bottom:-2cqw; left:0; translate:-50% 0; width:16cqw; height:15cqw; border-radius:50%; background:radial-gradient(ellipse,var(--glow-gold),var(--clear) 66%); filter:blur(4px); animation:atelier-aura 3s var(--flame-delay) ease-in-out infinite; transition:opacity var(--medium); }
.candle-fire .smoke { position:absolute; bottom:0; left:0; width:0; height:0; }
.candle-fire .smoke i { position:absolute; left:-.7cqw; bottom:0; width:1.5cqw; height:7cqw; border-radius:50%; background:linear-gradient(to top,var(--smoke),var(--clear)); filter:blur(2px); opacity:0; transform-origin:50% 100%; }
.candle-fire .smoke i:nth-child(2) { left:.2cqw; width:1.8cqw; height:6cqw; }
.cake-scene.blown .flame { opacity:0; animation:none; transform:translateX(10px) scale(.1,.65); }
.cake-scene.blown .flame-aura { opacity:0; animation:none; }
.cake-scene.blown .smoke i { animation:atelier-smoke 2.6s ease-out both; }
.cake-scene.blown .smoke i:nth-child(2) { animation-delay:.15s; }
.cake-scene.wish-complete .cake-render { animation:atelier-wish 1.6s var(--ease) both; }
.wish-copy { position:relative; z-index:3; }
.wish-copy h2 { font:400 var(--text-4xl)/1.06 var(--serif); letter-spacing:-.045em; margin-top:var(--s6); }
.wish-copy h2 em { color:var(--accent); }
.wish-copy>p:not(.wish-result) { font-size:var(--text-sm); line-height:1.8; color:var(--muted); margin-top:var(--s8); }
.wish-copy .button { margin-top:var(--s8); }
.wish-copy>.text-button { display:flex; width:max-content; margin-top:var(--s3); }
.wish-result { color:var(--gold-light); font:italic 400 var(--text-lg)/1.5 var(--serif); margin-top:var(--s4); }

/* 05 — a signed closing, on the same warm black, with a foil medallion. */
.final-section { display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; }
.final-section::before { content:'27'; top:50%; left:50%; right:auto; transform:translate(-50%,-50%); font-size:clamp(280px,36vw,540px); opacity:.75; }
.final-spark { display:grid; place-items:center; width:var(--s24); height:var(--s24); border:1px solid var(--line-gold); border-radius:50%; background:radial-gradient(circle at 30% 20%,var(--surface-raised),var(--canvas)); box-shadow:var(--shadow-card),0 0 72px var(--glow-gold-soft); color:var(--gold-light); margin-bottom:var(--s8); }
.final-spark .icon { width:var(--s12); height:var(--s12); stroke-width:1.25; }
.final-section h2 { font:400 var(--text-4xl)/1.1 var(--serif); letter-spacing:-.045em; margin-top:var(--s6); }
.final-section h2 em { color:var(--accent); }
.final-section>p { font-size:var(--text-base); line-height:1.8; color:var(--muted); margin:var(--s6) 0 var(--s8); }
.final-sign { display:block; font-size:var(--text-xs); letter-spacing:.12em; color:var(--quiet); margin-top:var(--s8); text-transform:uppercase; }

/* Persistent chapter navigation and complete control states. */
.story-dock { position:absolute; bottom:0; left:var(--gutter); right:var(--gutter); height:var(--dock-h); display:flex; align-items:center; gap:var(--s8); border-top:1px solid var(--line); background:var(--canvas); z-index:30; }
.story-back { display:inline-flex; align-items:center; justify-content:center; gap:var(--s3); min-height:var(--s12); padding:var(--s3) var(--s4); border:1px solid var(--line); border-radius:var(--radius); background:var(--glass-light); font-size:var(--text-xs); transition:background var(--fast),opacity var(--fast); }
.story-back .icon { transform:rotate(180deg); }
.story-back:hover { background:var(--glow-gold-soft); }
.story-back:disabled { opacity:.28; }
.story-position { margin-right:auto; }
.story-count { display:flex; align-items:baseline; gap:var(--s1); }
#story-number { color:var(--gold-light); font:400 var(--text-xl)/1 var(--serif); }
.story-total { color:var(--quiet); font-size:var(--text-xs); }
.story-current { color:var(--muted); font-size:var(--text-xs); margin-left:var(--s3); }
.story-dots { display:flex; gap:0; height:var(--s8); }
.story-dots button { width:44px; height:44px; border:0; padding:0; background:none; position:relative; }
.story-dots button::before { content:''; position:absolute; top:var(--s4); left:var(--s1); right:var(--s1); height:2px; background:var(--line); transition:background var(--fast),transform var(--fast); }
.story-dots button.is-complete::before { background:var(--gold-dark); }
.story-dots button.is-current::before { background:var(--gold-light); transform:scaleY(1.5); }
.story-next { min-width:280px; justify-content:space-between; position:relative; overflow:hidden; }
.story-next .icon { transition:transform var(--fast); }
.story-next:hover .icon { transform:translateX(var(--s1)); }
.story-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.toast { position:fixed; bottom:calc(var(--dock-h) + var(--s4)); left:50%; transform:translate(-50%,var(--s3)); z-index:120; max-width:calc(100% - var(--s12)); width:max-content; padding:var(--s4) var(--s6); background:var(--surface-raised); border:1px solid var(--line-gold); border-radius:var(--radius); box-shadow:var(--shadow-popover); font-size:var(--text-sm); color:var(--ink); opacity:0; pointer-events:none; transition:opacity var(--fast),transform var(--fast); }
.toast.show { opacity:1; transform:translate(-50%,0); }
#confetti { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:70; }

/* Loading, media fallbacks and drawers. */
.loader { position:fixed; inset:0; z-index:100; background:var(--canvas); display:flex; align-items:center; justify-content:center; flex-direction:column; padding:var(--s8); transition:opacity var(--medium),visibility var(--medium); }
.loader.finished { opacity:0; visibility:hidden; pointer-events:none; }
.loader-star { width:var(--s24); height:var(--s24); display:grid; place-items:center; border:1px solid var(--line-gold); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-card); color:var(--gold); margin-bottom:var(--s10); }
.loader-star .icon { width:var(--s12); height:var(--s12); stroke-width:1.25; animation:loader-breathe 2s ease-in-out infinite; }
.loader>.eyebrow { color:var(--gold); text-align:center; }
.loader p { font:400 var(--text-3xl)/1.15 var(--serif); text-align:center; margin-top:var(--s6); letter-spacing:-.035em; }
.loader em { color:var(--accent); }
.load-track { width:min(340px,100%); height:2px; background:var(--line); margin-top:var(--s10); overflow:hidden; }
.load-track i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--gold-dark),var(--gold-light)); transition:width var(--fast) linear; }
.load-info { display:flex; justify-content:space-between; gap:var(--s4); width:min(340px,100%); font-size:var(--text-xs); color:var(--muted); margin-top:var(--s4); }
.skip-intro { margin-top:var(--s6); }
.media-fallback { position:absolute; inset:var(--s8); display:none; align-items:center; justify-content:center; flex-direction:column; gap:var(--s5); border:1px solid var(--line-gold); border-radius:var(--radius); background:var(--surface); color:var(--muted); font-size:var(--text-sm); text-align:center; padding:var(--s6); }
.media-fallback .icon { width:var(--s20); height:var(--s20); color:var(--gold-dark); stroke-width:1; }
[data-media-state="error"] .media-fallback { display:flex; }
[data-media-state="error"] .hero-image-wrap,[data-media-state="error"] .cake-render { visibility:hidden; }
[data-media-state="loading"]::after { content:''; position:absolute; inset:var(--s8); border-radius:var(--radius); background:linear-gradient(110deg,var(--surface),var(--surface-raised),var(--surface)); background-size:200% 100%; animation:skeleton-sweep 1.6s linear infinite; }
dialog { position:fixed; inset:0; margin:0 0 0 auto; width:480px; max-width:100%; height:100dvh; max-height:100dvh; border:0; border-left:1px solid var(--line); padding:var(--s8); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-popover); overflow:auto; overscroll-behavior:contain; }
dialog::backdrop { background:var(--shade-deep); backdrop-filter:blur(8px); }
dialog[open] { animation:drawer-in var(--medium) var(--ease); }
.drawer-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--s4); }
dialog h2 { font:400 var(--text-3xl)/1.1 var(--serif); letter-spacing:-.04em; margin-top:var(--s6); }
dialog h2 em { color:var(--accent); }
.chapter-menu-list { display:grid; gap:var(--s3); margin-top:var(--s10); }
.chapter-menu-list button { min-height:var(--s20); display:flex; align-items:center; gap:var(--s5); border:1px solid var(--line); background:var(--glass-light); padding:var(--s4) var(--s5); border-radius:var(--radius); text-align:left; font:400 var(--text-xl)/1.3 var(--serif); }
.chapter-menu-list button>span { font:400 var(--text-xs)/1 var(--sans); color:var(--gold); }
.chapter-menu-list button>.icon { margin-left:auto; color:var(--gold-dark); }
.chapter-menu-list button:hover { background:var(--glow-gold-soft); border-color:var(--line-gold); }
.no-js { position:fixed; inset:0; padding:var(--s20) var(--gutter); background:var(--canvas); font:400 var(--text-2xl)/1.5 var(--serif); z-index:110; }

@keyframes art-breathe { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(calc(-1 * var(--s2))) scale(1.01)} }
@keyframes ambient-drift { 0%,100%{opacity:0;transform:translate(0,var(--s4))}40%,60%{opacity:.5}80%{transform:translate(var(--s4),calc(-1 * var(--s8)))} }
@keyframes card-glint { to{transform:translateX(140%)} }
@keyframes loader-breathe { 0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.04)} }
@keyframes skeleton-sweep { to{background-position:200% 0} }
@keyframes drawer-in { from{transform:translateX(100%)}to{transform:translateX(0)} }
@keyframes atelier-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-1 * var(--s1)))} }
@keyframes atelier-flame { 0%,100%{transform:rotate(-2deg) scale(.97,1)}25%{transform:rotate(1deg) scale(1.02,.96)}55%{transform:rotate(2deg) scale(.94,1.04)}80%{transform:rotate(-1deg) scale(1,1.01)} }
@keyframes atelier-aura { 0%,100%{opacity:.55;scale:.95}50%{opacity:.85;scale:1.04} }
@keyframes atelier-smoke { 0%{opacity:0;transform:translate(0,0) scale(.6,.3)}12%{opacity:.48}45%{opacity:.32;transform:translate(-6px,-24px) rotate(-12deg) scale(1.2,1.1)}100%{opacity:0;transform:translate(16px,-64px) rotate(16deg) scale(2,1.6);filter:blur(6px)} }
@keyframes atelier-wish { 0%,100%{transform:scale(1)}35%{transform:scale(1.025)} }

/* A viewport story needs tighter rhythm on short screens, not page scrolling. */
@media(min-width:1024px) and (max-height:840px) {
  :root { --header-h:80px; --dock-h:96px; --scene-pad:var(--s10); }
  .hero h1 { font-size:var(--text-4xl); }.hero h1 .name-line { font-size:var(--text-3xl); }
  .hero-description { margin-top:var(--s6); }.hero-signature { margin-top:var(--s4); }
  .impact-section { padding-block:var(--s8); }.section-heading { margin-bottom:var(--s6); }
  .section-heading h2 { font-size:var(--text-2xl); }.flip-card { height:280px; }
  .card-face { padding:var(--s5); }.card-front>strong { font-size:var(--text-xl); }.card-back>strong { font-size:var(--text-xl); margin-top:var(--s4); }.card-back-copy { font-size:var(--text-xs); margin-top:var(--s4); }
  .impact-caption { margin-top:var(--s5); padding-top:var(--s4); }.impact-caption>p { font-size:var(--text-lg); }
  .letter-section { padding-block:var(--s6); }.letter { padding:var(--s6); }.letter h3 { font-size:var(--text-xl); margin-block:var(--s4); }.letter p { font-size:var(--text-base); line-height:1.8; }.recipient-avatar { top:var(--s16); right:var(--s6); width:var(--s8); height:var(--s8); }.signature { padding-top:var(--s3); margin-top:var(--s4); }
  .wish-copy h2 { font-size:var(--text-3xl); }.wish-copy>p:not(.wish-result) { margin-top:var(--s6); }.wish-copy .button { margin-top:var(--s6); }
  .final-spark { width:var(--s16); height:var(--s16); margin-bottom:var(--s6); }.final-spark .icon { width:var(--s8); height:var(--s8); }.final-section h2 { font-size:var(--text-3xl); }.final-sign { margin-top:var(--s6); }
}
@media(max-width:1279px) { .brand-caption { display:none; }.header { gap:var(--s4); }.header nav { gap:var(--s5); }.floating-controls button>span { display:none; }.letter-section,.wish-section { gap:var(--s10); }.section-side h2 { font-size:var(--text-2xl); }.impact-caption>span { max-width:260px; }.card-face { padding:var(--s5); }.card-front>strong { font-size:var(--text-xl); } }
@media(min-width:768px) and (max-width:1023px) {
  :root { --header-h:80px; --dock-h:104px; --scene-pad:var(--s8); }
  .header nav { gap:var(--s4); }.header nav a::before { display:none; }
  .hero { grid-template-columns:1fr 1fr; gap:var(--s3); }.hero h1 { font-size:clamp(48px,6.7vw,64px); }.hero h1 .name-line { font-size:var(--text-3xl); }.hero-description { font-size:var(--text-sm); }.hero-recipient { font-size:var(--text-xs); }.round-seal { --medallion-size:var(--s32); }.date-tag { width:var(--s24); min-height:var(--s28); }.date-tag strong { font-size:var(--text-3xl); }.date-tag>span:last-child { display:none; }
  .story-next { min-width:240px; }.story-dock { gap:var(--s5); }.story-back>span { display:none; }.story-back { width:var(--s12); padding:0; }
  .letter-section { grid-template-columns:.7fr 1.3fr; gap:var(--s6); padding-block:var(--s6); }.letter { padding:var(--s6); }.letter p { font-size:var(--text-sm); }.letter h3 { font-size:var(--text-xl); }.recipient-avatar { right:var(--s6); }.section-side h2 { font-size:var(--text-2xl); }
  .impact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); flex:1; min-height:0; max-height:440px; }.flip-card { height:100%; }.section-heading h2 { font-size:var(--text-2xl); }.section-heading>p { display:none; }.impact-caption { display:none; }.card-art { margin-block:0; }.card-front>strong { margin-bottom:var(--s3); }.card-hint { padding-top:var(--s3); }
  .impact-grid:has(.is-flipped) .flip-card:not(.is-flipped) { visibility:hidden; }.impact-grid .flip-card.is-flipped { position:absolute; inset:0; width:100%; height:100%; z-index:5; }.card-back>strong { font-size:var(--text-2xl); }.card-back-copy { font-size:var(--text-base); max-width:500px; }
  .wish-section { gap:var(--s8); }.wish-copy h2 { font-size:var(--text-3xl); }.wish-copy>p:not(.wish-result) { font-size:var(--text-sm); }.final-section h2 { font-size:var(--text-3xl); }
}
@media(min-width:768px) and (max-width:1023px) and (min-height:900px) {
  .hero { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:var(--s8); padding-block:var(--s10); }
  .hero-copy { flex-shrink:0; max-width:none; }.hero h1 { font-size:var(--text-4xl); }.hero h1 .name-line { font-size:var(--text-3xl); }
  .hero-visual { flex:1; min-height:240px; width:100%; height:auto; }.hero-image-wrap { width:120%; left:-10%; }
  .date-tag { top:0; right:0; }.round-seal { bottom:0; left:0; }.cross-one { top:45%; }.cross-two { top:0; }
}
@media(max-width:767px) {
  :root { --header-h:72px; --dock-h:calc(132px + env(safe-area-inset-bottom,0px)); --gutter:var(--s6); --scene-pad:var(--s6); }
  .header { gap:var(--s2); }.brand-mark { width:44px; height:44px; font-size:var(--text-xl); }.header nav { display:none; }.floating-controls { margin-left:auto; }.floating-controls button { padding:var(--s3); }.floating-controls button>span { display:none; }.menu-button { display:grid; }.floating-controls { border-radius:var(--radius); }
  .story-panel::before { font-size:240px; right:var(--s4); opacity:.55; }
  .hero { display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:var(--s4); }.hero-copy { flex-shrink:0; }.hero-eyebrow { font-size:var(--text-xs); letter-spacing:.08em; }.hero h1 { font-size:var(--text-3xl); margin-top:var(--s4); letter-spacing:-.05em; }.hero h1 .name-line { font-size:calc(var(--text-3xl) * .85); }.title-spark { width:var(--s5); height:var(--s5); margin-left:var(--s2); }.hero-description { font-size:var(--text-sm); line-height:1.65; margin-top:var(--s5); }.hero-recipient { font-size:var(--text-xs); margin-top:var(--s3); }.hero-signature { font-size:var(--text-xs); margin-top:var(--s4); line-height:1.5; }.hero-visual { flex:1; min-height:140px; max-height:340px; width:100%; }.hero-image-wrap { width:120%; left:-10%; }.date-tag { width:var(--s20); min-height:var(--s24); padding:var(--s3) var(--s2); top:0; }.date-tag strong { font-size:var(--text-3xl); }.date-tag>span:last-child { display:none; }.round-seal { --medallion-size:104px; left:0; }.cross-one { width:var(--s5); height:var(--s5); }.cross-two { width:var(--s4); height:var(--s4); }
  .letter-section { display:grid; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:var(--s4); padding-block:var(--s5); }.letter-heading-full { display:none; }.letter-heading-compact { display:block; }.section-side>.eyebrow { font-size:var(--text-xs); letter-spacing:.06em; }.section-side h2 { font-size:var(--text-xl); margin-top:var(--s2); }.letter-scribble { display:none; }.letter { padding:var(--s5); height:100%; max-height:none; transform:rotate(-.3deg); }.letter-top { font-size:var(--text-xs); padding-bottom:var(--s3); }.letter-top>span:first-child { max-width:80%; }.letter-top>span:last-child { display:none; }.letter h3 { font-size:var(--text-xl); margin:var(--s4) 0 var(--s3); }.recipient-avatar { width:var(--s8); height:var(--s8); top:var(--s16); right:var(--s5); font-size:var(--text-sm); }.letter-page-note { font-size:var(--text-xs); margin-bottom:var(--s3); }.letter p { font-size:var(--text-sm); line-height:1.85; }.letter .letter-closing { font-size:var(--text-xs); margin-top:var(--s3); }.letter-closing em { font-size:var(--text-base); }.signature { gap:var(--s2); font-size:var(--text-xs); padding-top:var(--s3); margin-top:var(--s3); }.signature strong { font-size:var(--text-xs); }.signature-star { width:var(--s6); height:var(--s6); }.signature>.icon:first-child { display:none; }
  .impact-section { justify-content:center; padding-block:var(--s6); }.section-heading { display:block; margin-bottom:var(--s5); }.section-heading h2 { font-size:var(--text-2xl); margin-top:var(--s3); }.section-heading>p { font-size:var(--text-sm); margin-top:var(--s3); line-height:1.5; }.section-heading>p>span { display:inline; font-size:var(--text-xs); margin:0; }.impact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); flex:1; min-height:0; max-height:420px; gap:var(--s3); }.flip-card { height:100%; }.card-face { padding:var(--s4); }.card-face::before { inset:var(--s1); }.card-number { font-size:var(--text-xs); letter-spacing:0; line-height:1.4; }.card-art { margin-block:0; }.card-front>strong { font-size:var(--text-xl); margin-bottom:var(--s2); }.card-hint { font-size:var(--text-xs); padding-top:var(--s2); line-height:1.35; }.card-front .card-hint { display:none; }.card-back>strong { font-size:var(--text-xl); margin-top:var(--s4); }.card-back-copy { font-size:var(--text-sm); margin-top:var(--s4); line-height:1.8; }.card-back { overflow:auto; }.impact-caption,.impact-controls { display:none; }
  .impact-grid:has(.is-flipped) .flip-card:not(.is-flipped) { visibility:hidden; }.impact-grid .flip-card.is-flipped { position:absolute; inset:0; width:100%; height:100%; z-index:5; }
  .wish-section { display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:var(--s3); }.wish-copy { flex-shrink:0; }.wish-copy h2 { font-size:var(--text-2xl); margin-top:var(--s3); line-height:1.08; }.wish-copy>.eyebrow { font-size:var(--text-xs); letter-spacing:.06em; }.wish-copy>p:not(.wish-result) { font-size:var(--text-xs); line-height:1.7; margin-top:var(--s4); }.wish-copy .button { margin-top:var(--s4); min-height:44px; padding:var(--s3) var(--s4); font-size:var(--text-xs); }.wish-copy>.text-button { display:inline-flex; margin:0 0 0 var(--s3); }.wish-result { font-size:var(--text-base); margin-top:var(--s3); }.wish-stage { flex:1; height:auto; min-height:140px; max-height:350px; }
  .final-section { padding-block:var(--s6); }.final-section::before { font-size:330px; }.final-spark { width:var(--s20); height:var(--s20); margin-bottom:var(--s6); }.final-spark .icon { width:var(--s10); height:var(--s10); }.final-section h2 { font-size:var(--text-2xl); margin-top:var(--s5); }.final-section>.eyebrow { font-size:var(--text-xs); letter-spacing:.06em; }.final-section>p { font-size:var(--text-sm); margin:var(--s5) 0 var(--s6); }.final-section .button { font-size:var(--text-xs); padding-inline:var(--s4); }.final-sign { font-size:var(--text-xs); letter-spacing:.04em; margin-top:var(--s6); }
  .story-dock { display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-rows:44px 48px; align-content:start; gap:var(--s2) var(--s3); padding-top:var(--s3); padding-bottom:max(var(--s4),env(safe-area-inset-bottom,0px)); }.story-back { min-height:44px; width:44px; padding:0; border-color:var(--clear); background:none; }.story-back>span { display:none; }.story-position { margin:0; display:flex; justify-content:flex-end; align-items:center; }.story-count { align-items:baseline; }.story-current { margin-left:var(--s3); font-size:var(--text-xs); }.story-dots { display:none; }.story-next { grid-column:1/-1; width:100%; min-width:0; min-height:48px; padding:var(--s3) var(--s5); font-size:var(--text-sm); }
  .loader p { font-size:var(--text-2xl); }.loader>.eyebrow { font-size:var(--text-xs); letter-spacing:.05em; }.loader-star { width:var(--s20); height:var(--s20); margin-bottom:var(--s8); }.load-info { font-size:var(--text-xs); }
  dialog { padding:var(--s6); }.theme-options { gap:var(--s2); }.theme-option { gap:var(--s1); }.drawer-bottom { gap:var(--s2); }.toast { padding:var(--s3) var(--s4); font-size:var(--text-xs); }
}
@media(max-width:767px) and (max-height:740px) {
  :root { --header-h:64px; --scene-pad:var(--s4); }
  .hero { gap:var(--s2); }.hero h1 { font-size:40px; margin-top:var(--s3); }.hero h1 .name-line { font-size:var(--text-2xl); }.hero-description { font-size:var(--text-xs); margin-top:var(--s3); }.hero-recipient { margin-top:var(--s2); }.hero-signature { margin-top:var(--s2); }.hero-visual { min-height:100px; }.date-tag { min-height:var(--s20); width:var(--s16); padding:var(--s2); }.date-tag strong { font-size:var(--text-2xl); }.date-tag>span:first-child { font-size:var(--text-xs); }.round-seal { --medallion-size:88px; }
  .section-heading h2 { font-size:var(--text-xl); }.section-heading>p { display:none; }.section-heading { margin-bottom:var(--s3); }.impact-section { padding-block:var(--s4); }.card-face { padding:var(--s3); }.card-front>strong { font-size:var(--text-lg); }.card-number { font-size:var(--text-xs); }.card-back>strong { font-size:var(--text-lg); margin-top:var(--s3); }.card-back-copy { font-size:var(--text-xs); line-height:1.6; margin-top:var(--s3); }.card-back .card-hint { display:none; }
  .letter-section { padding-block:var(--s4); gap:var(--s3); }.letter { padding:var(--s4); }.letter h3 { font-size:var(--text-lg); margin-block:var(--s3); }.letter-top { padding-bottom:var(--s2); }.recipient-avatar { top:var(--s14); right:var(--s4); width:var(--s6); height:var(--s6); font-size:var(--text-xs); }.letter p { font-size:var(--text-xs); line-height:1.75; }.letter-page-note { margin-bottom:var(--s2); }.letter-closing em { font-size:var(--text-sm); }.signature-star { display:none; }.signature { padding-top:var(--s2); margin-top:var(--s2); }
  .wish-copy h2 { font-size:var(--text-xl); }.wish-copy>p:not(.wish-result) { margin-top:var(--s3); }.wish-copy .button { margin-top:var(--s3); }.wish-stage { min-height:120px; }.wish-section { gap:var(--s2); }.wish-result { font-size:var(--text-sm); margin-top:var(--s2); }
  .final-spark { width:var(--s14); height:var(--s14); margin-bottom:var(--s4); }.final-spark .icon { width:var(--s6); height:var(--s6); }.final-section h2 { font-size:var(--text-2xl); margin-top:var(--s4); }.final-section>p { font-size:var(--text-xs); margin-block:var(--s4); }.final-sign { margin-top:var(--s4); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }.ambient-particles { display:none; }.hero-image-wrap,.cake-render { transform:none!important; } }
body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
body.reduced-motion .ambient-particles { display:none; }body.reduced-motion .hero-image-wrap,body.reduced-motion .cake-render { transform:none!important; }

/* REVISION 01 — physical stationery: laid paper, folded envelope and wax. */
.letter-shell { position:relative; height:100%; max-height:640px; min-height:0; padding:var(--s2); perspective:1400px; isolation:isolate; }
.letter-shell .letter { position:relative; z-index:3; height:100%; max-height:none; border-radius:var(--radius-sm); border-color:var(--paper-edge); transform:rotate(-.7deg); background:linear-gradient(95deg,var(--paper-crease-shade),var(--clear) 18%,var(--clear) 76%,var(--paper-crease-shade)),repeating-linear-gradient(0deg,var(--paper-fiber) 0 1px,var(--clear) 1px var(--s1)),linear-gradient(140deg,var(--paper-light),var(--paper)); box-shadow:0 1px 0 var(--paper-light),0 4px 2px var(--shade),0 16px 32px var(--paper-shadow); }
.paper-underlay { position:absolute; inset:var(--s2); z-index:2; border:1px solid var(--paper-edge); border-radius:var(--radius-sm); background:var(--paper); transform:translate(var(--s1),var(--s1)) rotate(.7deg); box-shadow:0 1px 3px var(--shade); }
.envelope-assembly { position:absolute; inset:12% 0 0; z-index:1; border:1px solid var(--envelope-shadow); border-radius:var(--radius-sm); background:var(--envelope); box-shadow:0 12px 32px var(--shade); transform:rotate(1.2deg) translateY(var(--s2)); overflow:hidden; }
.envelope-liner { position:absolute; inset:0; background:repeating-linear-gradient(45deg,var(--paper-fiber) 0 1px,var(--clear) 1px var(--s2)),linear-gradient(135deg,var(--paper-edge),var(--envelope)); }
.envelope-fold { position:absolute; inset:0; background:linear-gradient(125deg,var(--paper-light),var(--envelope)); filter:drop-shadow(1px 0 1px var(--paper-crease-shade)); }
.fold-left { clip-path:polygon(0 0,55% 58%,0 100%); }.fold-right { clip-path:polygon(100% 0,45% 58%,100% 100%); }
.envelope-pocket { position:absolute; inset:0; background:linear-gradient(0deg,var(--envelope),var(--paper)); clip-path:polygon(0 100%,0 83%,50% 37%,100% 83%,100% 100%); }
.paper-crease { position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:4; background:linear-gradient(90deg,var(--clear) 49.7%,var(--paper-crease-shade) 49.9%,var(--paper-crease-light) 50.1%,var(--clear) 50.4%),linear-gradient(0deg,var(--clear) 65.9%,var(--paper-crease-shade) 66%,var(--paper-crease-light) 66.2%,var(--clear) 66.5%); opacity:.55; }
.wax-mark { position:absolute; z-index:5; bottom:var(--s6); right:calc(-1 * var(--s1)); width:var(--s16); height:var(--s16); display:grid; place-items:center; border-radius:46% 52% 47% 54% / 51% 45% 54% 48%; border:1px solid var(--wax-dark); background:radial-gradient(circle at 32% 24%,var(--wax-light),var(--wax) 42%,var(--wax-dark)); color:var(--wax-dark); box-shadow:inset 0 1px 2px var(--gold-light),inset 0 -3px 5px var(--wax-dark),0 4px 8px var(--shade); transform:rotate(12deg); }
.wax-mark::before { content:''; position:absolute; inset:var(--s2); border:1px solid var(--wax-dark); border-radius:50%; box-shadow:0 1px 0 var(--wax-light); opacity:.65; }
.wax-mark span { font:400 var(--text-xl)/1 var(--serif); letter-spacing:-.08em; text-shadow:0 1px 0 var(--wax-light); }
.letter-shell .signature { padding-right:var(--s12); }.letter-shell .signature-star { display:none; }
@media(max-width:767px) { .letter-shell { padding:var(--s1); max-height:none; }.wax-mark { width:var(--s12); height:var(--s12); bottom:var(--s5); right:0; }.wax-mark span { font-size:var(--text-lg); }.wax-mark::before { inset:var(--s1); }.letter-shell .signature { padding-right:var(--s8); }.paper-underlay { inset:var(--s1); } }

/* REVISION 02 — genuine connected calligraphy, fountain-pen ink and signature. */
.letter-shell .letter h3 { font:400 var(--text-3xl)/1 var(--script); letter-spacing:0; color:var(--calligraphy-ink); margin-block:var(--s5); }
.letter-shell .letter p { font:400 var(--script-body)/1.24 var(--script); letter-spacing:0; color:var(--calligraphy-ink); text-shadow:0 .3px .2px var(--paper-crease-shade); }
.letter-shell .letter .letter-closing { font:400 var(--script-body)/1.1 var(--script); margin-top:var(--s3); }
.letter-shell .letter-closing em { font:400 var(--script-body)/1.1 var(--script); color:var(--calligraphy-ink); }
.letter-shell .signature strong { font:400 var(--script-body)/1 var(--script); margin-top:var(--s2); color:var(--calligraphy-ink); }
.letter-scribble { font:400 var(--text-2xl)/1.1 var(--script); }
@media(max-width:767px) { .letter-shell .letter h3 { font-size:40px; margin-block:var(--s4); }.letter-shell .letter p { font-size:var(--script-body-mobile); line-height:1.16; }.letter-shell .letter .letter-closing,.letter-shell .letter-closing em,.letter-shell .signature strong { font-size:var(--script-body-mobile); }.letter-shell .signature { padding-top:var(--s2); }.letter-shell .letter-top { font-size:var(--text-xs); } }
@media(max-width:767px) and (max-height:740px) { .letter-shell .letter h3 { font-size:var(--text-2xl); margin-block:var(--s3); }.letter-shell .letter p { font-size:24px; line-height:1.12; }.letter-shell .letter .letter-closing,.letter-shell .letter-closing em,.letter-shell .signature strong { font-size:24px; } }

/* REVISION 03 — open the envelope, lift the letter and sweep it with light. */
.letter-shell .letter { overflow:hidden; transform-origin:50% 90%; }
.letter-shell:not(.is-open) .letter,.letter-shell:not(.is-open) .paper-underlay,.letter-shell:not(.is-open)>.envelope-assembly,.letter-shell:not(.is-open)>.wax-mark { opacity:0; pointer-events:none; }
.envelope-invitation { position:absolute; z-index:10; width:100%; height:64%; min-height:260px; max-height:380px; top:50%; left:50%; translate:-50% -50%; transform:rotate(-3deg); padding:0; border:0; background:none; border-radius:var(--radius-sm); perspective:1200px; transform-style:preserve-3d; }
.invitation-paper { position:absolute; inset:0; border:1px solid var(--paper-edge); border-radius:var(--radius-sm); background:repeating-linear-gradient(0deg,var(--paper-fiber) 0 1px,var(--clear) 1px var(--s1)),linear-gradient(150deg,var(--paper-light),var(--envelope)); box-shadow:inset 0 1px 0 var(--paper-light),0 16px 32px var(--shade-deep),0 2px 3px var(--shade); }
.invitation-paper::before,.invitation-paper::after { content:''; position:absolute; inset:0; background:linear-gradient(140deg,var(--paper-light),var(--envelope)); }
.invitation-paper::before { clip-path:polygon(0 0,52% 53%,0 100%); }.invitation-paper::after { clip-path:polygon(100% 0,48% 53%,100% 100%); }
.invitation-flap { position:absolute; top:0; left:0; width:100%; height:52%; background:linear-gradient(165deg,var(--paper-light),var(--paper-edge)); clip-path:polygon(0 0,100% 0,50% 100%); filter:drop-shadow(0 2px 1px var(--paper-shadow)); transform-origin:50% 0; backface-visibility:visible; z-index:3; }
.invitation-postmark { position:absolute; top:var(--s4); right:var(--s4); padding:var(--s2); width:var(--s12); height:var(--s12); border:1px solid var(--paper-edge); outline:1px solid var(--paper-line); outline-offset:var(--s1); color:var(--paper-muted); font:600 var(--text-xs)/1.25 var(--sans); transform:rotate(4deg); z-index:4; }
.invitation-address { position:absolute; left:var(--s8); right:var(--s8); bottom:12%; display:flex; flex-direction:column; align-items:center; gap:var(--s2); color:var(--calligraphy-ink); z-index:4; }
.invitation-address small { font:400 var(--text-xs)/1.4 var(--sans); letter-spacing:.08em; color:var(--paper-muted); }
.invitation-address strong { font:400 var(--text-3xl)/1.05 var(--script); }
.invitation-seal { position:absolute; left:50%; top:44%; translate:-50% -20%; width:var(--s16); height:var(--s16); display:grid; place-items:center; border-radius:47% 53% 46% 54% / 54% 47% 53% 46%; background:radial-gradient(circle at 30% 25%,var(--wax-light),var(--wax) 44%,var(--wax-dark)); border:1px solid var(--wax-dark); color:var(--wax-dark); box-shadow:inset 0 1px 2px var(--wax-light),inset 0 -3px 5px var(--wax-dark),0 4px 6px var(--shade); z-index:5; }
.invitation-seal::before { content:''; position:absolute; inset:var(--s2); border:1px solid var(--wax-dark); border-radius:50%; box-shadow:0 1px 0 var(--wax-light); opacity:.65; }
.invitation-seal>span { font:400 var(--text-xl)/1 var(--serif); letter-spacing:-.08em; text-shadow:0 1px 0 var(--wax-light); }
.invitation-action { position:absolute; top:calc(100% + var(--s6)); left:0; right:0; display:flex; align-items:center; justify-content:center; gap:var(--s4); color:var(--muted); font:400 var(--text-sm)/1.5 var(--sans); transform:rotate(3deg); }
.invitation-action>.icon { width:var(--s4); height:var(--s4); color:var(--accent); }
.envelope-invitation:hover .invitation-seal { filter:brightness(1.08); }
.envelope-invitation:focus-visible { outline-offset:var(--s3); }
.letter-shell.is-open .envelope-invitation { visibility:hidden; opacity:0; pointer-events:none; }
.letter-light { position:absolute; inset:-15% -35%; z-index:8; pointer-events:none; background:linear-gradient(105deg,var(--clear) 35%,var(--paper-glint) 49%,var(--clear) 62%); opacity:0; mix-blend-mode:screen; }
.wax-mark::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,var(--clear) 20%,var(--foil-glint),var(--clear) 80%); opacity:0; pointer-events:none; }
@media(max-width:767px) { .envelope-invitation { min-height:230px; height:58%; }.invitation-address { left:var(--s4); right:var(--s4); bottom:10%; }.invitation-address small { font-size:var(--text-xs); letter-spacing:0; }.invitation-address strong { font-size:36px; }.invitation-seal { width:var(--s14); height:var(--s14); top:40%; }.invitation-postmark { top:var(--s3); right:var(--s3); }.invitation-action { font-size:var(--text-xs); top:calc(100% + var(--s5)); } }

/* REVISION 04 — champagne foil typography, grazing light and an embossed seal. */
.hero .serif-italic { width:max-content; max-width:100%; color:var(--gold); background:linear-gradient(110deg,var(--gold) 18%,var(--gold-light) 36%,var(--foil-glint) 45%,var(--gold-dark) 53%,var(--gold) 68%); background-size:260% 100%; background-position:100% 0; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:var(--clear); filter:drop-shadow(0 1px 0 var(--shade)); }
.hero-light-sweep { position:absolute; inset:0 -10%; z-index:2; pointer-events:none; background:linear-gradient(110deg,var(--clear) 35%,var(--glow-gold) 49%,var(--clear) 62%); mask-image:radial-gradient(ellipse 65% 70% at 50% 50%,var(--black) 30%,var(--clear) 90%); opacity:0; mix-blend-mode:screen; }
.loader-star { position:relative; border-color:var(--wax-dark); border-radius:48% 52% 49% 51% / 52% 47% 53% 48%; background:radial-gradient(circle at 28% 20%,var(--wax-light),var(--wax) 48%,var(--wax-dark)); color:var(--wax-dark); box-shadow:inset 0 1px 3px var(--gold-light),inset 0 -4px 6px var(--wax-dark),0 12px 24px var(--shade); }
.loader-star::before { content:''; position:absolute; inset:var(--s2); border:1px solid var(--wax-dark); border-radius:50%; box-shadow:0 1px 0 var(--wax-light); opacity:.7; }
.loader-star .icon { filter:drop-shadow(0 1px 0 var(--wax-light)); animation:none; }
.date-tag { box-shadow:inset 0 1px 0 var(--line-gold),0 2px 3px var(--shade),0 12px 28px var(--shade); }


/* REVISION 05 — recessed display cases, foil edges and object parallax. */
.card-inner::before { content:''; position:absolute; inset:2px; border-radius:var(--radius); background:linear-gradient(145deg,var(--gold-dark),var(--surface),var(--gold-dark)); transform:translateZ(-3px); opacity:.5; }
.card-front { transform:translateZ(1px); }.card-back { transform:rotateY(180deg) translateZ(1px); }
.card-front .card-art { border:1px solid var(--line-soft); border-radius:var(--radius); background:radial-gradient(ellipse at var(--px,50%) 0,var(--glow-gold),var(--clear) 67%),linear-gradient(160deg,var(--surface-input),var(--canvas)); box-shadow:inset 0 6px 16px var(--shade),inset 0 -1px 0 var(--glass-light); }
.card-art::before { transform:perspective(600px) rotateX(var(--artifact-x,0deg)) rotateY(var(--artifact-y,0deg)) translateZ(6px); transform-origin:50% 65%; transition:transform var(--medium) var(--ease),filter var(--medium); z-index:2; }
.card-art::after { content:''; position:absolute; left:22%; right:22%; bottom:7%; height:8%; border-radius:50%; background:radial-gradient(ellipse,var(--shade-deep),var(--clear) 70%); filter:blur(3px); transform:rotate(-7deg); z-index:1; }
.flip-card:hover .card-face { border-color:var(--line-gold); }.flip-card:focus-visible { border-radius:var(--radius); }
.card-back { background:radial-gradient(circle at 85% 10%,var(--glow-gold-soft),var(--clear) 60%),linear-gradient(140deg,var(--surface-raised),var(--surface),var(--canvas)); }
@media(max-width:767px) { .card-front .card-art { margin-block:var(--s1); border:0; background:radial-gradient(ellipse at 50% 30%,var(--glow-gold-soft),var(--clear) 70%); box-shadow:none; }.card-art::before { transform:none; }.card-art::after { bottom:4%; } }
body.reduced-motion .card-art::before { transform:none!important; }

/* REVISION 06 — grounded patisserie, living candlelight and a passing breeze. */
.cake-scene { animation:none; }
.cake-candlelight { position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 38% 28%,var(--candle-spill),var(--clear) 23%),radial-gradient(ellipse at 50% 36%,var(--candle-spill),var(--clear) 27%),radial-gradient(ellipse at 61% 28%,var(--candle-spill),var(--clear) 23%); mix-blend-mode:soft-light; opacity:.85; transition:opacity 1100ms var(--ease); mask-image:radial-gradient(ellipse at 50% 45%,var(--black) 15%,var(--clear) 70%); }
.cake-scene.blown .cake-candlelight { opacity:0; }
.fire-left { --smoke-delay:0ms; --flame-rate:1.7s; }.fire-center { --smoke-delay:70ms; --flame-rate:2.1s; }.fire-right { --smoke-delay:140ms; --flame-rate:1.9s; }
.candle-fire .flame { animation-duration:var(--flame-rate); }
.cake-scene.blown .flame { transition-delay:var(--smoke-delay); }
.cake-scene.blown .smoke i { animation-delay:var(--smoke-delay); }.cake-scene.blown .smoke i:nth-child(2) { animation-delay:calc(var(--smoke-delay) + 150ms); }
.wish-copy h2 em { font:400 calc(var(--text-4xl) * 1.2)/.9 var(--script); letter-spacing:0; }
.wish-result { border-left:1px solid var(--line-gold); padding-left:var(--s4); font:400 var(--text-xl)/1.1 var(--script); color:var(--gold-light); }
@media(max-width:767px) { .wish-copy h2 em { font-size:var(--text-3xl); }.wish-result { font-size:var(--text-xl); }.cake-candlelight { opacity:.75; } }
@media(max-width:767px) and (max-height:740px) { .wish-copy h2 em { font-size:40px; }.wish-result { font-size:var(--text-lg); } }

/* REVISION 07 — photographic balloons rise behind the farewell and controls. */
.balloon-layer { position:fixed; top:var(--header-h); bottom:var(--dock-h); inset-inline:0; z-index:0; pointer-events:none; overflow:hidden; contain:layout paint; }
.balloon-rise { position:absolute; top:0; display:block; height:auto; pointer-events:none; user-select:none; will-change:transform,opacity; filter:drop-shadow(0 8px 12px var(--shade)); }
.final-section::after { content:''; position:absolute; inset:12% 8%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 52%,var(--canvas) 16%,color-mix(in srgb,var(--canvas) 86%,var(--clear)) 43%,var(--clear) 72%); opacity:.72; }
.final-section h2 { text-shadow:0 2px 12px var(--canvas),0 0 24px var(--canvas); }
.final-section h2 em { font:400 calc(var(--text-4xl) * 1.2)/.9 var(--script); letter-spacing:0; }
.final-sign { text-transform:none; letter-spacing:.06em; }
.final-sign [data-sender] { display:block; font:400 40px/1.05 var(--script); letter-spacing:0; color:var(--gold-light); margin-top:var(--s2); }
@media(max-width:767px) { .final-section h2 em { font-size:var(--text-3xl); }.final-sign [data-sender] { font-size:var(--text-2xl); }.final-section::after { inset:8% 0; opacity:.78; } }
@media(max-width:767px) and (max-height:740px) { .final-section h2 em { font-size:40px; }.final-sign [data-sender] { font-size:28px; } }

/* REVISION 08 — one material story, compact screens and a quiet celebration. */
.final-spark { position:relative; border-color:var(--wax-dark); color:var(--wax-dark); background:radial-gradient(circle at 30% 24%,var(--wax-light),var(--wax) 46%,var(--wax-dark)); box-shadow:inset 0 1px 3px var(--gold-light),inset 0 -4px 6px var(--wax-dark),0 12px 24px var(--shade); }
.final-spark::before { content:''; position:absolute; inset:var(--s2); border:1px solid var(--wax-dark); border-radius:50%; box-shadow:0 1px 0 var(--wax-light); opacity:.7; }
.final-spark .icon { filter:drop-shadow(0 1px 0 var(--wax-light)); }
.letter-shell .letter p { overflow-wrap:break-word; }
.quiet-balloon { display:none; position:absolute; width:220px; height:auto; bottom:8%; left:calc(-1 * var(--s4)); opacity:.72; transform:rotate(-9deg); filter:drop-shadow(0 8px 12px var(--shade)); }
.quiet-right { left:auto; right:calc(-1 * var(--s4)); bottom:38%; transform:rotate(8deg); }
body.reduced-motion[data-step="4"] .quiet-balloon { display:block; }
@media(max-width:767px) {
  .final-spark { width:var(--s16); height:var(--s16); margin-bottom:var(--s4); flex-shrink:0; }.final-spark .icon { width:var(--s8); height:var(--s8); }
  .final-section h2 { margin-top:var(--s4); }.final-section h2 em { font-size:40px; }
  .final-section>p { font-size:var(--text-xs); line-height:1.7; margin:var(--s4) 0; }.final-section .button { min-height:var(--s12); padding:var(--s3) var(--s4); }
  .final-sign { margin-top:var(--s4); }.final-sign [data-sender] { font-size:var(--text-2xl); }.quiet-balloon { width:150px; opacity:.65; }
}
@media(max-width:767px) and (max-height:740px) {
  .envelope-invitation { min-height:200px; height:58%; }.invitation-action { top:calc(100% + var(--s3)); }
  .invitation-address strong { font-size:var(--text-2xl); }.invitation-address small { font-size:var(--text-xs); line-height:1.2; }.invitation-postmark { width:var(--s10); height:var(--s10); padding:var(--s1); }.invitation-seal { width:var(--s12); height:var(--s12); top:35%; }
  .final-spark { width:var(--s12); height:var(--s12); margin-bottom:var(--s3); }.final-spark .icon { width:var(--s6); height:var(--s6); }.final-section h2 { font-size:28px; margin-top:var(--s3); }.final-section h2 em { font-size:36px; }.final-sign { margin-top:var(--s3); }.final-sign [data-sender] { font-size:28px; }
}
@media(prefers-reduced-motion:reduce) { body[data-step="4"] .quiet-balloon { display:block; }.card-art::before { transform:none!important; } }
.letter-shell .letter:not(.first-page) h3 { display:none; }
.letter-shell .letter:not(.first-page) .recipient-avatar { display:none; }
.letter-shell .letter:not(.first-page) .letter-page-note { margin-top:var(--s6); }
.letter-shell .letter.closing-only #letter-copy { display:none; }
.letter-shell .letter.closing-only .letter-closing { flex:1; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; gap:var(--s3); margin:0; font-size:40px; }
.letter-shell .letter.closing-only .letter-closing br { display:none; }
.letter-shell .letter.closing-only .letter-closing em { font-size:36px; line-height:1.15; }
@media(max-width:767px) { .letter-shell .letter.closing-only .letter-closing { font-size:var(--text-2xl); }.letter-shell .letter.closing-only .letter-closing em { font-size:var(--script-body-mobile); } }
@media(max-width:767px) and (max-height:740px) { .letter-shell .letter:not(.first-page) .letter-page-note { margin-top:var(--s4); }.letter-shell .letter.closing-only .letter-closing { font-size:28px; }.letter-shell .letter.closing-only .letter-closing em { font-size:24px; } }

/* The sculpted medal stays still when motion is reduced. */
body.reduced-motion .medallion-face { transform:none; }
@media(prefers-reduced-motion:reduce) { .medallion-face { transform:none; } }