/* =========================================================
   DOSSIER MARIEM — V2
   Direction : nuit bleue profonde, verre dépoli, lueurs PSG/or,
   typographie Fraunces (display) + Manrope (corps) + Caveat (manuscrit)
   ========================================================= */

:root{
  --night-1:#080b1c;
  --night-2:#0e1538;
  --night-3:#16215a;
  --bleu:#2a3a8c;
  --bleu-glow:#4a5fd9;
  --rouge:#e0405c;
  --rouge-deep:#c8334d;
  --gold:#e3b65f;
  --cream:#f7f1e6;
  --ink:#0d1224;
  --glass:rgba(255,255,255,0.06);
  --glass-border:rgba(255,255,255,0.14);
  --glass-strong:rgba(255,255,255,0.1);
  --text-soft:rgba(247,241,230,0.72);
  --text-faint:rgba(247,241,230,0.45);
  --r-sm:12px;
  --r-md:20px;
  --r-lg:30px;
  --shadow-deep: 0 40px 80px -30px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 0 1px var(--glass-border), 0 20px 50px -20px rgba(74,95,217,0.35);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--night-1);
  color:var(--cream);
  font-family:'Manrope',sans-serif;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}

/* ---------- mesh gradient animé de fond ---------- */
.bg-mesh{
  position:fixed; inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(74,95,217,0.35), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 20%, rgba(224,64,92,0.18), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(227,182,95,0.10), transparent 60%),
    linear-gradient(180deg, var(--night-1), var(--night-2) 50%, var(--night-1));
  animation:meshShift 22s ease-in-out infinite alternate;
}
@keyframes meshShift{
  0%{background-position:0% 0%, 0% 0%, 0% 0%, 0 0;}
  100%{background-position:6% 4%, -5% 3%, 3% -4%, 0 0;}
}
.bg-grain{
  position:fixed; inset:0; z-index:-1;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 1.6px);
  background-size:26px 26px;
  pointer-events:none;
  opacity:0.5;
}
.bg-stars{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
}
.bg-stars span{
  position:absolute;
  width:3px;height:3px;
  background:rgba(255,255,255,0.55);
  border-radius:50%;
  animation:twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:0.15;}50%{opacity:0.85;}}

h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:560;
  letter-spacing:-0.01em;
  color:var(--cream);
}
.script{
  font-family:'Caveat',cursive;
  color:var(--gold);
}
button{font-family:inherit;cursor:pointer;}
.screen{
  position:relative;
  min-height:100vh;
  width:100%;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 20px 60px;
  z-index:1;
}
.screen.active{display:flex; animation:screenIn .7s cubic-bezier(.2,.7,.2,1);}
@keyframes screenIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}
.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0);
}

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

/* ============ COMPOSANT : carte verre ============ */
.glass-card{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-deep), var(--shadow-glow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  position:relative;
}
.glass-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(160deg, rgba(255,255,255,0.10), transparent 40%);
  pointer-events:none;
}

/* ============ SCREEN 0 : ENVELOPPE / LANCEMENT ============ */
#screen-start{text-align:center;}
.envelope-wrap{
  position:relative;
  width:min(360px, 84vw);
  aspect-ratio:1.45/1;
  cursor:pointer;
  perspective:1400px;
}
.envelope-back{
  position:absolute; inset:0;
  background:linear-gradient(160deg,var(--night-3) 0%, var(--bleu) 100%);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-deep), 0 0 0 1px rgba(255,255,255,0.08);
}
.envelope-flap{
  position:absolute;
  top:0; left:0; right:0;
  height:58%;
  background:linear-gradient(160deg,var(--bleu), var(--night-3));
  clip-path:polygon(0 0, 100% 0, 50% 92%);
  border-radius:var(--r-md) var(--r-md) 0 0;
  transform-origin:top;
  transition:transform 1s cubic-bezier(.7,0,.3,1);
  z-index:3;
}
.envelope-flap::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
}
.envelope-wrap.open .envelope-flap{transform:rotateX(180deg); z-index:1;}
.envelope-seal{
  position:absolute;
  top:42%; left:50%;
  width:56px; height:56px;
  background:linear-gradient(150deg, var(--rouge), var(--rouge-deep));
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream);
  font-family:'Fraunces',serif;
  font-size:1.4rem;
  box-shadow:0 8px 20px rgba(224,64,92,0.45);
  z-index:4;
  transition:opacity .4s ease, transform .4s ease;
}
.envelope-wrap.open .envelope-seal{opacity:0; transform:translate(-50%,-50%) scale(0.5);}
.envelope-card{
  position:absolute;
  left:6%; right:6%; bottom:6%; height:62%;
  background:var(--cream);
  border-radius:var(--r-sm);
  box-shadow:0 15px 35px rgba(0,0,0,0.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:14px;
  transition:transform 1s cubic-bezier(.5,0,.2,1) .15s;
  z-index:2;
}
.envelope-wrap.open .envelope-card{transform:translateY(-46%) scale(1.04);}
.envelope-card .to{font-family:'Caveat',cursive; font-size:1.6rem; color:var(--night-3);}
.envelope-card .sub{font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); opacity:0.55;}
.start-hint{margin-top:28px; font-size:0.95rem; color:var(--text-soft);}
.start-hint .pulse-dot{
  display:inline-block; width:7px;height:7px;border-radius:50%;
  background:var(--gold); margin-right:8px;
  animation:pulse 1.6s ease-in-out infinite;
  box-shadow:0 0 12px var(--gold);
}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(0.85);}50%{opacity:1;transform:scale(1);}}
#screen-start.leaving{animation:fadeOutUp .7s ease forwards;}
@keyframes fadeOutUp{to{opacity:0; transform:translateY(-26px);}}

/* ============ MINI PLAYER ============ */
#mini-player{
  position:fixed; bottom:18px; right:18px; z-index:50;
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(14px);
  color:var(--cream);
  border-radius:999px;
  padding:10px 18px 10px 14px;
  display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-deep);
  font-size:0.82rem;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
#mini-player.show{opacity:1; transform:translateY(0);}
#mini-player .bars{display:flex; align-items:flex-end; gap:2px; height:14px;}
#mini-player .bars span{width:3px; background:var(--gold); border-radius:2px; animation:bar 1s ease-in-out infinite;}
#mini-player .bars span:nth-child(1){height:40%;animation-delay:0s;}
#mini-player .bars span:nth-child(2){height:100%;animation-delay:.15s;}
#mini-player .bars span:nth-child(3){height:65%;animation-delay:.3s;}
#mini-player.paused .bars span{animation-play-state:paused; opacity:.4;}
@keyframes bar{0%,100%{transform:scaleY(0.4);}50%{transform:scaleY(1);}}

/* ============ progress rail (haut d'écran, global) ============ */
.step-rail{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background:rgba(255,255,255,0.08);
}
.step-rail-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--rouge));
  transition:width .6s cubic-bezier(.4,0,.2,1);
}

/* ============ SCREEN 1 : INTRO MOT ============ */
.paper-card{
  max-width:620px; width:100%;
  padding:clamp(28px,5vw,52px);
}
.eyebrow{
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:18px; height:1.5px; background:var(--gold);}
#screen-intro h1{font-size:clamp(1.9rem,5vw,2.7rem); margin:0 0 18px;}
#screen-intro p{font-size:1.05rem; line-height:1.75; margin:0 0 14px; color:var(--text-soft);}
.btn-primary{
  margin-top:22px;
  background:linear-gradient(135deg, var(--bleu-glow), var(--night-3));
  color:var(--cream); border:none; border-radius:999px;
  padding:15px 32px; font-size:1rem; font-weight:600;
  display:inline-flex; align-items:center; gap:10px;
  box-shadow:0 16px 32px -10px rgba(74,95,217,0.6);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.1);}
.btn-primary:active{transform:translateY(0);}
.btn-primary svg{width:18px;height:18px;}

/* ============ SCREEN 2 : QUIZ ============ */
#screen-quiz{align-items:stretch;}
.quiz-shell{max-width:640px; width:100%; margin:0 auto;}
.chart-header{
  background:linear-gradient(135deg, var(--night-3), var(--bleu));
  color:var(--cream);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:22px clamp(20px,5vw,40px);
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:14px; flex-wrap:wrap;
  border:1px solid var(--glass-border);
  border-bottom:none;
}
.chart-header .title{font-family:'Fraunces',serif; font-size:1.3rem;}
.chart-header .meta{font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.65;}
.progress-track{height:6px; background:rgba(255,255,255,0.18); border-radius:999px; overflow:hidden; width:100%;}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--rouge)); border-radius:999px; width:0%; transition:width .5s cubic-bezier(.4,0,.2,1);}
.quiz-card{
  border-top:none;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:clamp(24px,5vw,44px);
}
.q-counter{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;}
.mistake-badge{
  font-size:0.68rem; letter-spacing:0.05em; text-transform:none;
  color:var(--text-faint); font-weight:600;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--glass-border);
  padding:3px 10px; border-radius:999px;
}
.mistake-badge.has-mistakes{color:var(--rouge); border-color:rgba(224,64,92,0.4); background:rgba(224,64,92,0.08);}
.q-text{font-family:'Fraunces',serif; font-size:clamp(1.25rem,3.6vw,1.6rem); margin:0 0 22px; line-height:1.35;}
.options{display:grid; gap:11px;}
.opt-btn{
  text-align:left;
  background:rgba(255,255,255,0.04);
  border:1.5px solid var(--glass-border);
  border-radius:var(--r-sm);
  padding:14px 18px;
  font-size:0.98rem;
  color:var(--cream);
  display:flex; align-items:center; gap:12px;
  transition:border-color .2s ease, transform .15s ease, background .2s ease;
}
.opt-btn:hover{border-color:var(--bleu-glow); background:rgba(74,95,217,0.12); transform:translateX(2px);}
.opt-btn .tag{
  width:24px;height:24px; border-radius:50%;
  border:1.5px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;
  font-size:0.72rem; font-weight:700; color:var(--cream); opacity:0.6; flex-shrink:0;
}
.opt-btn.correct{background:rgba(92,191,122,0.15); border-color:#5cbf7a;}
.opt-btn.correct .tag{background:#5cbf7a;color:#06210d;border-color:#5cbf7a;opacity:1;}
.opt-btn.wrong{background:rgba(224,64,92,0.15); border-color:var(--rouge); animation:shake .4s ease;}
.opt-btn.wrong .tag{background:var(--rouge);color:#fff;border-color:var(--rouge);opacity:1;}
.opt-btn.disabled{pointer-events:none;}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(5px);}60%{transform:translateX(-4px);}80%{transform:translateX(3px);}}
.feedback-line{min-height:24px; margin-top:16px; font-size:0.92rem; font-weight:600; color:var(--rouge); opacity:0; transition:opacity .25s ease;}
.feedback-line.show{opacity:1;}
.feedback-line.ok{color:#7ed99a;}
.multi-hint{font-size:0.78rem; color:var(--text-faint); margin-top:-12px; margin-bottom:16px;}
.validate-btn{
  margin-top:16px;
  background:linear-gradient(135deg, var(--bleu-glow), var(--night-3));
  color:var(--cream); border:none; border-radius:999px;
  padding:12px 26px; font-size:0.92rem; font-weight:600;
  opacity:0.35; pointer-events:none;
  transition:opacity .25s ease, transform .2s ease;
}
.validate-btn.ready{opacity:1; pointer-events:auto;}
.validate-btn.ready:hover{transform:translateY(-2px);}

/* ============ SCREEN 3 : TRANSITION ============ */
#screen-loading{text-align:center;}
.stamp{
  width:140px;height:140px; border:3px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:0.95rem; text-align:center; color:var(--gold);
  transform:rotate(-8deg); margin:0 auto 28px;
  animation:stampIn .6s cubic-bezier(.34,1.56,.64,1);
  line-height:1.3; padding:10px;
  box-shadow:0 0 30px rgba(227,182,95,0.25);
}
@keyframes stampIn{from{transform:rotate(-8deg) scale(0); opacity:0;}to{transform:rotate(-8deg) scale(1); opacity:1;}}
#screen-loading p{color:var(--text-soft); max-width:420px;}
.dots-loader{display:flex; gap:6px; margin-top:18px;}
.dots-loader span{width:8px;height:8px;border-radius:50%; background:var(--bleu-glow); animation:dot 1.2s ease-in-out infinite;}
.dots-loader span:nth-child(2){animation-delay:.2s;}
.dots-loader span:nth-child(3){animation-delay:.4s;}
@keyframes dot{0%,100%{opacity:.25;transform:translateY(0);}50%{opacity:1;transform:translateY(-5px);}}

/* ============ SCREEN SCORE / RECAP ============ */
#screen-score{text-align:center;}
.score-card{max-width:520px; width:100%; padding:clamp(28px,5vw,48px); text-align:center;}
.score-ring{
  width:160px; height:160px; margin:0 auto 20px; position:relative;
}
.score-ring svg{transform:rotate(-90deg);}
.score-ring-bg{fill:none; stroke:rgba(255,255,255,0.1); stroke-width:10;}
.score-ring-fill{fill:none; stroke:url(#scoreGradient); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);}
.score-ring-label{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.score-ring-label .num{font-family:'Fraunces',serif; font-size:2.2rem; color:var(--cream);}
.score-ring-label .lbl{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint);}
.score-verdict-title{font-size:clamp(1.4rem,4vw,1.9rem); margin:6px 0 10px;}
.score-verdict-text{color:var(--text-soft); line-height:1.65; margin:0 0 24px;}
.score-detail-list{
  list-style:none; padding:0; margin:0 0 26px; display:grid; gap:8px; text-align:left;
}
.score-detail-list li{
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--glass-border);
  border-radius:var(--r-sm);
  padding:9px 14px;
  font-size:0.85rem;
}
.score-detail-list .q-label{color:var(--text-soft);}
.score-detail-list .q-mistakes{font-weight:700; color:var(--gold);}
.score-detail-list .q-mistakes.zero{color:#7ed99a;}
.share-actions{display:flex; flex-direction:column; gap:10px; align-items:stretch;}
.btn-whatsapp{
  background:linear-gradient(135deg,#25D366,#1aa84f);
  color:#062b13; border:none; border-radius:999px;
  padding:14px 24px; font-size:0.95rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 14px 28px -10px rgba(37,211,102,0.5);
  transition:transform .2s ease;
}
.btn-whatsapp:hover{transform:translateY(-2px);}
.btn-continue{
  background:transparent; border:1.5px solid var(--glass-border); color:var(--cream);
  border-radius:999px; padding:13px 24px; font-size:0.92rem; font-weight:600;
  transition:background .2s ease, border-color .2s ease;
}
.btn-continue:hover{background:rgba(255,255,255,0.07); border-color:var(--bleu-glow);}

/* ============ SCREEN 4 : JARDIN + BOUQUET ============ */
#screen-garden{overflow:hidden; padding-top:40px;}
.garden-title{text-align:center; margin-bottom:6px; font-size:clamp(1.8rem,5vw,2.6rem);}
.garden-sub{text-align:center; max-width:560px; margin:0 auto 18px; color:var(--text-soft); line-height:1.6; font-size:1.02rem;}
.diploma-line{text-align:center; font-family:'Caveat',cursive; font-size:1.5rem; color:var(--gold); margin-bottom:30px;}
#garden-field{position:relative; width:100%; max-width:780px; height:340px; margin:0 auto 18px;}
.flower{position:absolute; bottom:0; transform:scale(0) translateY(10px); transform-origin:bottom center; opacity:0; animation:bloom .6s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes bloom{to{transform:scale(1) translateY(0); opacity:1;}}
.flower .sway{animation:sway 4s ease-in-out infinite; transform-origin:bottom center;}
@keyframes sway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}
.bouquet-wrap{display:flex; flex-direction:column; align-items:center; margin-top:8px;}
.bouquet-card{padding:clamp(20px,5vw,36px); text-align:center; max-width:460px;}
.bouquet-card h3{margin-top:0;}
.bouquet-card p{color:var(--text-soft); line-height:1.65;}
.gift-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:24px;}
.btn-secondary{
  background:transparent; border:1.5px solid var(--glass-border); color:var(--cream);
  border-radius:999px; padding:12px 24px; font-size:0.92rem; font-weight:600;
  transition:background .2s ease, border-color .2s ease;
}
.btn-secondary:hover{background:rgba(255,255,255,0.08); border-color:var(--gold);}
.footer-sig{display:block; text-align:center; margin-top:34px; font-family:'Caveat',cursive; font-size:1.3rem; color:var(--gold); opacity:0.9;}

/* confetti petal */
.petal{position:fixed; top:-20px; width:14px;height:14px; background:var(--rouge); border-radius:0 50% 0 50%; opacity:0.9; z-index:40; pointer-events:none;}

/* ============ SCREEN SCÈNE TORTUES NINJA ============ */
#screen-tmnt{padding-top:40px;}
.tmnt-shell{max-width:780px; width:100%; text-align:center;}
#tmnt-stage{
  position:relative;
  width:100%;
  max-width:680px;
  height:320px;
  margin:30px auto 10px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(92,191,122,0.12), transparent 70%);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.tmnt-sewer-glow{
  position:absolute; bottom:0; left:0; right:0; height:60%;
  background:linear-gradient(180deg, transparent, rgba(92,191,122,0.08));
}
.turtle{
  position:absolute;
  bottom:6%;
  transform:translateY(120%) scale(0.7);
  opacity:0;
  transition:transform .7s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
}
.turtle.in{
  transform:translateY(0) scale(1);
  opacity:1;
}
.turtle .hop{
  animation:turtleHop 1.8s ease-in-out infinite;
}
@keyframes turtleHop{
  0%,100%{transform:translateY(0) rotate(0deg);}
  25%{transform:translateY(-10px) rotate(-2deg);}
  50%{transform:translateY(0) rotate(0deg);}
  75%{transform:translateY(-5px) rotate(2deg);}
}
.turtle-name{
  position:absolute;
  top:-22px; left:50%; transform:translateX(-50%);
  font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--text-faint); font-weight:700; white-space:nowrap;
}
.tmnt-bubble{
  position:absolute;
  top:6%;
  background:#fff;
  color:var(--ink);
  font-family:'Fraunces',serif;
  font-size:0.82rem;
  padding:8px 14px;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,0.3);
  opacity:0;
  transform:scale(0.6) translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
  white-space:nowrap;
}
.tmnt-bubble.show{opacity:1; transform:scale(1) translateY(0);}
.tmnt-bubble::after{
  content:"";
  position:absolute; bottom:-7px; left:24px;
  width:14px; height:14px;
  background:#fff;
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.pizza-fall{
  position:absolute;
  top:-30px;
  font-size:1.6rem;
  animation:pizzaFall linear forwards;
  z-index:5;
}
@keyframes pizzaFall{to{transform:translateY(360px) rotate(380deg); opacity:0.15;}}
.tmnt-caption{
  text-align:center; font-family:'Caveat',cursive; color:var(--gold); font-size:1.4rem; margin:18px 0 6px;
}

@media (max-width:480px){
  #tmnt-stage{height:280px;}
}

/* ============ SCREEN LETTRE CACHÉE ============ */
#screen-letter{text-align:center;}
.letter-lock{
  width:140px; height:140px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 26px;
  position:relative;
}
.letter-lock svg{width:64px; height:64px; color:var(--gold);}
.letter-lock-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--glass-border);
  animation:lockPulse 2.4s ease-in-out infinite;
}
@keyframes lockPulse{0%,100%{transform:scale(1); opacity:0.5;}50%{transform:scale(1.08); opacity:1;}}
.letter-envelope-card{max-width:560px; width:100%; padding:clamp(26px,5vw,46px); text-align:left;}
.letter-text{
  font-family:'Fraunces',serif;
  font-size:clamp(1.05rem,2.6vw,1.25rem);
  line-height:1.85;
  color:var(--cream);
  white-space:pre-line;
}
.letter-sig{text-align:right; font-family:'Caveat',cursive; color:var(--gold); font-size:1.6rem; margin-top:18px;}

@media (max-width:480px){
  .envelope-card .to{font-size:1.35rem;}
  .chart-header{flex-direction:column; align-items:flex-start;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}