:root{
  --red:#c11a1f; --red-1:#d4242a; --red-2:#a8181d; --red-3:#7d0d12;
  --gold:#ffce00; --gold-1:#ffd84a;
  --paper:#f2eada; --paper-2:#e6dcc1;
  --ink:#16100c; --ink-soft:#3a2a24;
  --void:#0c0a0a;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html, body{ background:var(--red-2); color:var(--paper); font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden }
body{ min-height:100vh }
a{ color:inherit }
img{ display:block; max-width:100% }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0 }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px }

.poster{
  position:relative; min-height:100vh; width:100%; overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,.4), transparent 60%),
    linear-gradient(120deg, var(--red-1) 0%, var(--red) 40%, var(--red-2) 70%, var(--red-3) 100%);
  isolation:isolate;
}
.poster::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(0,0,0,.07) 22px 24px, transparent 24px 60px, rgba(255,255,255,.04) 60px 62px),
    repeating-linear-gradient(75deg, transparent 0 40px, rgba(0,0,0,.05) 40px 42px);
}
.star-field{ position:absolute; inset:0; z-index:1; pointer-events:none }
.star-field .star{ position:absolute; color:var(--gold); font-size:38px; text-shadow:0 0 16px rgba(255,206,0,.5), 0 2px 0 rgba(0,0,0,.4); line-height:1; transform-origin:center }
.star.s1{ top:6%; left:4%; font-size:80px; transform:rotate(-12deg) }
.star.s2{ top:11%; left:14%; font-size:34px; transform:rotate(8deg) }
.star.s3{ top:18%; left:6%; font-size:50px; transform:rotate(-20deg) }
.star.s4{ top:4%; left:22%; font-size:30px; transform:rotate(14deg) }
.star.s5{ bottom:8%; left:48%; font-size:46px; transform:rotate(-5deg); opacity:.85 }
.star.s6{ top:36%; right:18%; font-size:30px; transform:rotate(10deg); opacity:.7 }
.star.s7{ bottom:18%; right:8%; font-size:52px; transform:rotate(-14deg) }
.star.s8{ bottom:42%; left:38%; font-size:24px; transform:rotate(20deg); opacity:.55 }

.hero-portrait{
  position:absolute; right:-3%; top:6%;
  width:55%; max-width:780px; height:auto; z-index:3;
  filter:drop-shadow(-14px 24px 0 rgba(0,0,0,.35)) drop-shadow(0 0 60px rgba(0,0,0,.35));
  transform:rotate(2deg);
  clip-path:polygon(2% 4%, 14% 0%, 32% 2%, 56% 0%, 78% 2%, 96% 0%, 100% 12%, 98% 36%, 100% 60%, 99% 84%, 100% 96%, 80% 100%, 56% 98%, 32% 100%, 8% 99%, 0% 92%, 2% 64%, 0% 36%, 2% 18%);
}

.rhtc-burst{
  position:absolute; top:60px; left:34px; z-index:6;
  width:200px; height:200px; transform:rotate(-12deg);
  animation:burst-wobble 6s ease-in-out infinite;
}
@keyframes burst-wobble{ 0%,100%{ transform:rotate(-12deg) scale(1) } 50%{ transform:rotate(-9deg) scale(1.03) } }
.rhtc-burst svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 6px 0 rgba(0,0,0,.4)) }

.poster-title{
  position:absolute; top:8%; left:5%; z-index:5; max-width:780px;
  font-family:"Bowlby One",system-ui;
  font-size:clamp(54px, 9.8vw, 142px);
  line-height:.86; color:var(--paper); letter-spacing:-2px;
  text-shadow:6px 6px 0 var(--red-3), 12px 12px 0 rgba(0,0,0,.35);
  transform:rotate(-2.5deg); pointer-events:none;
}
.poster-title .li-2{ display:block; margin-left:42px }
.poster-title .li-3{ display:block; margin-left:96px }
.poster-title .accent{ color:var(--gold) }

.lore{
  position:absolute; top:48%; left:5%; z-index:5; max-width:480px;
  font-family:"Inter",sans-serif; font-size:17px; line-height:1.55; color:var(--paper);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.lore p{ margin-bottom:10px }
.lore .lead::first-letter{
  font-family:"Bowlby One",system-ui; font-size:64px; line-height:.85;
  float:left; color:var(--gold); padding:6px 12px 0 0;
  text-shadow:3px 3px 0 var(--red-3);
}
.lore .ledger-link{
  color:var(--gold); font-family:"Bowlby One",system-ui;
  font-size:14px; letter-spacing:1.5px; padding:0 4px; white-space:nowrap;
  text-decoration:underline wavy var(--gold); text-underline-offset:4px; cursor:pointer;
}
.lore .ledger-link.disabled{ opacity:.5; cursor:not-allowed; text-decoration:none }
.lore .ledger-link:not(.disabled):hover{ color:#fff }
.lore .star-bullet{ color:var(--gold); margin:0 6px }

.wax-ca{
  position:absolute; top:62%; left:46%; z-index:7;
  width:260px; height:260px;
  transform:translateX(-50%) rotate(-8deg);
  cursor:pointer; transition:transform .25s ease;
}
.wax-ca:hover{ transform:translateX(-50%) rotate(-6deg) scale(1.03) }
.wax-ca:active{ transform:translateX(-50%) rotate(-8deg) scale(.97) }
.wax-ca svg{ position:absolute; inset:0; width:100%; height:100%; display:block }
.wax-disc{
  position:absolute; inset:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e63a3f 0%, #b81418 40%, #7d0d12 90%);
  box-shadow:inset -10px -16px 24px rgba(0,0,0,.6), inset 8px 12px 14px rgba(255,90,90,.35), 0 18px 0 rgba(0,0,0,.45), 0 0 28px rgba(212,36,42,.4);
  display:flex; align-items:center; justify-content:center; padding:30px;
}
.wax-disc::before{ content:""; position:absolute; inset:14px; border-radius:50%; border:2px dashed rgba(255,255,255,.15) }
.wax-ca-text{
  position:relative; font-family:"IBM Plex Mono",monospace; font-weight:700;
  font-size:11px; letter-spacing:.5px; text-align:center; line-height:1.35;
  color:var(--gold-1); word-break:break-all;
  text-shadow:0 1px 0 rgba(0,0,0,.6); max-width:160px;
}
.wax-ca-text small{ display:block; font-size:9px; letter-spacing:2px; color:var(--paper); margin-bottom:6px; opacity:.7; text-transform:uppercase }
.arc-text{ fill:var(--gold); font-family:"Bowlby One",system-ui; font-size:13px; letter-spacing:2px }
.copied-flash{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Bowlby One",system-ui; font-size:36px; color:var(--gold);
  background:rgba(0,0,0,.7); border-radius:50%; opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.wax-ca.is-copied .copied-flash{ opacity:1 }

.masking-tape{
  position:absolute; top:18%; right:-30px; z-index:8;
  transform:rotate(7deg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 30%, rgba(0,0,0,.06) 100%),
    repeating-linear-gradient(90deg, var(--gold-1) 0 12px, #ffe17a 12px 14px, var(--gold-1) 14px 26px),
    var(--gold-1);
  padding:9px 50px 9px 40px;
  font-family:"Kalam",cursive; font-weight:700; font-size:18px;
  color:var(--ink); letter-spacing:.5px;
  box-shadow:-2px 4px 0 rgba(0,0,0,.18), inset 0 -1px 2px rgba(0,0,0,.08);
  clip-path:polygon(0 6%, 96% 0, 99% 94%, 2% 100%);
  max-width:340px; text-decoration:none;
}
.masking-tape .at{ color:var(--red-3); padding-right:4px }
.masking-tape.disabled{ opacity:.55; cursor:not-allowed }
.masking-tape:not(.disabled):hover{ filter:brightness(1.05) }

.chili-buy{
  position:absolute; bottom:-40px; left:-30px; z-index:9;
  width:380px; height:240px; transform:rotate(-14deg);
  transition:transform .2s ease;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.5));
}
.chili-buy:hover:not(.disabled){ transform:rotate(-12deg) translateY(-6px) scale(1.03) }
.chili-buy:active:not(.disabled){ transform:rotate(-14deg) translateY(2px) scale(.98) }
.chili-buy.disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(.4) drop-shadow(0 6px 12px rgba(0,0,0,.4)) }
.chili-buy svg{ width:100%; height:100%; overflow:visible }
.chili-buy .label{
  position:absolute; top:42%; left:28%; transform:rotate(14deg);
  font-family:"Bowlby One",system-ui; font-size:38px; color:var(--gold);
  letter-spacing:1px;
  text-shadow:3px 3px 0 var(--red-3), 0 0 24px rgba(0,0,0,.5);
  pointer-events:none; white-space:nowrap;
}
.chili-buy .label small{
  display:block; font-size:14px; letter-spacing:4px; color:var(--paper);
  text-shadow:2px 2px 0 var(--red-3); margin-top:-2px;
}

.censor-bar{
  position:absolute; bottom:18%; right:0; z-index:8;
  background:var(--void); color:var(--paper);
  padding:8px 22px 8px 18px;
  font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:500;
  letter-spacing:2.5px; text-transform:uppercase; text-decoration:none;
  box-shadow:-2px 6px 0 rgba(0,0,0,.4); transform:rotate(-2deg);
  display:flex; align-items:center; gap:10px;
}
.censor-bar::before{
  content:""; width:10px; height:10px; background:var(--red); border-radius:50%;
  box-shadow:0 0 10px var(--red); animation:pulse-tg 1.4s ease-in-out infinite;
}
@keyframes pulse-tg{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.censor-bar .redacted{
  background:linear-gradient(180deg, #ffe17a 0%, var(--gold) 100%);
  color:transparent; user-select:none; padding:0 6px; margin-left:4px; letter-spacing:.5px;
}
.censor-bar:hover .redacted{ color:var(--ink) }
.censor-bar.disabled{ pointer-events:none; opacity:.55 }

.promise-zone{
  position:absolute; top:32%; right:8%; z-index:7;
  width:280px; pointer-events:auto;
}
.balloon{
  position:relative; width:170px; height:200px; margin:0 auto 6px;
  transform:scale(0); transform-origin:bottom center; pointer-events:none;
}
.balloon.is-inflating{ animation:inflate 1.15s cubic-bezier(.2,.7,.3,1.4) forwards }
.balloon.is-popping{ animation:popout .42s ease-out forwards }
@keyframes inflate{
  0%{ transform:scale(0) rotate(-6deg) }
  45%{ transform:scale(.92) rotate(3deg) }
  65%{ transform:scale(1.08) rotate(-2deg) }
  85%{ transform:scale(.98) rotate(1deg) }
  100%{ transform:scale(1) rotate(0deg) }
}
@keyframes popout{
  0%{ transform:scale(1); opacity:1 }
  35%{ transform:scale(1.3); opacity:1 }
  100%{ transform:scale(1.7); opacity:0 }
}
.balloon-body{
  position:absolute; left:0; top:0; width:170px; height:170px;
  background:radial-gradient(circle at 32% 28%, #ff6a72 0%, var(--red-1) 50%, var(--red-3) 92%);
  border-radius:50%;
  box-shadow:inset -12px -18px 26px rgba(0,0,0,.4), 0 12px 24px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; padding:0 22px;
}
.balloon-body::after{
  content:""; position:absolute; left:28%; top:12%; width:34px; height:26px;
  background:rgba(255,255,255,.45); border-radius:50%; filter:blur(2px);
}
.balloon-text{
  position:relative; z-index:2; font-family:"Bowlby One",system-ui;
  font-size:13px; line-height:1.15; color:var(--paper); text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,.4); letter-spacing:.3px;
}
.balloon-knot{
  position:absolute; left:50%; top:168px; transform:translateX(-50%);
  width:12px; height:16px; background:var(--red-3);
  clip-path:polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.balloon-string{
  position:absolute; left:50%; top:180px; width:2px; height:24px;
  background:#5a0408; transform:translateX(-50%);
}
.speech-btn{
  position:relative; display:block; width:100%; padding:18px 22px;
  background:var(--paper); color:var(--ink);
  font-family:"Bowlby One",system-ui; font-size:20px;
  letter-spacing:1px; text-align:center; text-transform:uppercase;
  clip-path:polygon(4% 12%, 16% 4%, 32% 8%, 50% 2%, 70% 6%, 88% 4%, 96% 14%, 100% 38%, 98% 60%, 100% 80%, 88% 92%, 70% 86%, 60% 100%, 56% 88%, 40% 94%, 22% 90%, 10% 96%, 4% 84%, 0% 60%, 2% 40%, 0% 18%);
  transition:transform .14s ease;
}
.speech-btn:hover{ transform:translateY(-2px) }
.speech-btn:active{ transform:translateY(1px) }
.speech-btn.is-busy{ opacity:.55; cursor:wait }
.promise-slip{
  margin-top:14px; background:var(--paper); color:var(--ink);
  padding:14px 18px 16px; font-family:"Kalam",cursive; font-weight:700;
  font-size:14px; line-height:1.3; transform:rotate(2.5deg);
  box-shadow:0 8px 14px rgba(0,0,0,.35);
  clip-path:polygon(0 6%, 14% 0, 28% 4%, 44% 1%, 62% 5%, 78% 2%, 92% 4%, 100% 8%, 99% 70%, 100% 88%, 84% 100%, 64% 96%, 42% 100%, 22% 96%, 0 90%);
  position:relative;
}
.promise-slip .made{ display:block; color:var(--ink-soft); margin-bottom:4px; font-size:13px }
.promise-slip .made b{ color:var(--ink); font-size:18px; font-variant-numeric:tabular-nums }
.promise-slip .delivered{
  display:block; font-family:"Bowlby One",system-ui; font-size:15px;
  color:var(--red); letter-spacing:1.5px; cursor:pointer;
}
.promise-slip .delivered b{ font-family:"IBM Plex Mono",monospace; font-size:18px; padding:0 4px }
.promise-slip .delivered::after{
  content:""; position:absolute; left:14px; right:14px; bottom:14px;
  height:3px; background:var(--red); transform:rotate(-1deg);
}

.scroll-cue{
  position:absolute; bottom:24px; left:50%;
  transform:translateX(-50%); z-index:7;
  font-family:"Kalam",cursive; font-weight:700;
  font-size:14px; letter-spacing:2px; color:var(--gold);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  animation:scroll-bounce 1.6s ease-in-out infinite; pointer-events:none;
}
@keyframes scroll-bounce{
  0%,100%{ transform:translateX(-50%) translateY(0); opacity:.8 }
  50%{ transform:translateX(-50%) translateY(6px); opacity:1 }
}

.dossier{
  position:relative; padding:80px 32px 100px; min-height:520px;
  color:var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    var(--paper);
}
.dossier-head{ max-width:720px; margin:0 auto 50px; text-align:center }
.dossier-head h2{
  font-family:"Bowlby One",system-ui; font-size:clamp(40px, 6vw, 72px); line-height:1;
  color:var(--red); transform:rotate(-1.5deg); letter-spacing:-1px;
  text-shadow:5px 5px 0 var(--ink), 10px 10px 0 var(--gold);
}
.dossier-head .sub{ margin-top:18px; font-family:"Kalam",cursive; font-weight:700; font-size:18px; color:var(--red-3); transform:rotate(.4deg) }
.stamps{ position:relative; max-width:1100px; margin:0 auto; min-height:580px }
.stamp{
  position:absolute; width:280px; background:var(--paper); padding:10px 10px 0;
  transform-origin:center;
  -webkit-mask:radial-gradient(circle 6px at 6px 6px, transparent 98%, #000 100%) -6px -6px / 12px 12px, linear-gradient(#000, #000);
  mask:radial-gradient(circle 6px at 6px 6px, transparent 98%, #000 100%) -6px -6px / 12px 12px, linear-gradient(#000, #000);
  -webkit-mask-composite:source-out;
  mask-composite:exclude;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.18)) drop-shadow(0 12px 18px rgba(0,0,0,.18));
}
.stamp.s-1{ top:0; left:0; transform:rotate(-3deg) }
.stamp.s-2{ top:30px; right:30px; transform:rotate(4.5deg) }
.stamp.s-3{ top:330px; left:80px; transform:rotate(-5.5deg) }
.stamp.s-4{ top:310px; right:0; transform:rotate(2deg) }
.stamp:hover{ transform:rotate(0deg) scale(1.04); transition:transform .35s ease; z-index:5 }
.stamp-photo{ width:100%; aspect-ratio:4/3; background:#000; overflow:hidden }
.stamp-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.stamp-caption{ padding:10px 6px 14px; font-family:"Kalam",cursive; font-weight:700; font-size:14px; line-height:1.4; color:var(--red); text-align:center }
.stamp-caption strong{
  display:block; font-family:"Bowlby One",system-ui; font-size:13px;
  color:var(--ink); letter-spacing:1.5px; margin-bottom:4px; text-transform:uppercase;
}
.stamp-postmark{
  position:absolute; top:8px; right:8px; width:60px; height:60px;
  border:2px solid var(--red-3); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono",monospace; font-size:9px; font-weight:700;
  color:var(--red-3); transform:rotate(8deg);
  letter-spacing:1px; line-height:1.05; text-align:center; opacity:.7;
}

.ribbon-footer{
  position:relative; background:var(--void); color:var(--gold);
  padding:18px 24px; font-family:"IBM Plex Mono",monospace;
  font-size:13px; letter-spacing:3px; text-align:center; text-transform:uppercase;
  overflow:hidden;
}
.ribbon-footer::before, .ribbon-footer::after{
  content:""; position:absolute; top:0; bottom:0; width:30px;
  background:repeating-linear-gradient(45deg, var(--gold) 0 8px, var(--red) 8px 16px);
}
.ribbon-footer::before{ left:0 }
.ribbon-footer::after{ right:0 }
.ribbon-footer .star-line{ color:var(--gold); margin:0 8px }
.ribbon-footer .dim{ color:#9a8a4a; padding:0 8px }

.toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(40px);
  background:var(--void); color:var(--gold); border:2px solid var(--red);
  padding:12px 22px; font-family:"IBM Plex Mono",monospace;
  font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.6); opacity:0;
  transition:transform .25s, opacity .25s; z-index:200; pointer-events:none;
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0) }

.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

@media (max-width:960px){
  .poster{ min-height:auto; padding-bottom:80px }
  .hero-portrait{ position:relative; right:auto; top:auto; width:90%; max-width:480px; margin:160px auto 0; transform:rotate(0deg) }
  .star-field .star{ font-size:24px !important }
  .star.s1{ font-size:40px !important }
  .rhtc-burst{ width:120px; height:120px; top:24px; left:14px }
  .poster-title{
    position:relative; top:auto; left:auto; text-align:center;
    font-size:48px; max-width:none; padding:80px 14px 0; transform:none;
    text-shadow:3px 3px 0 var(--red-3), 6px 6px 0 rgba(0,0,0,.35);
  }
  .poster-title .li-2, .poster-title .li-3{ margin-left:0 }
  .lore{ position:relative; top:auto; left:auto; max-width:none; padding:24px 22px 0; margin-top:24px }
  .wax-ca{ position:relative; top:auto; left:auto; margin:36px auto 0; transform:rotate(-8deg) }
  .wax-ca:hover{ transform:rotate(-6deg) scale(1.02) }
  .masking-tape{ position:relative; top:auto; right:auto; margin:30px auto 0; display:inline-block; max-width:90% }
  .censor-bar{ position:relative; bottom:auto; right:auto; margin:24px 0 0 14px; display:inline-flex; max-width:calc(100% - 28px) }
  .promise-zone{ position:relative; top:auto; right:auto; margin:36px auto 0; max-width:280px }
  .chili-buy{ position:relative; bottom:auto; left:auto; margin:30px auto 0; width:90%; max-width:340px; height:200px; transform:rotate(-6deg) }
  .chili-buy .label{ font-size:30px }
  .scroll-cue{ display:none }
  .stamps{ min-height:auto; display:grid; grid-template-columns:1fr; gap:30px }
  .stamp{ position:relative; top:auto !important; left:auto !important; right:auto !important; width:auto; max-width:340px; margin:0 auto }
  .stamp.s-1, .stamp.s-3{ transform:rotate(-2deg) }
  .stamp.s-2, .stamp.s-4{ transform:rotate(2deg) }
}
@media (prefers-reduced-motion: reduce){
  .balloon.is-inflating, .balloon.is-popping, .rhtc-burst, .scroll-cue, .censor-bar::before{ animation:none !important }
  .stamp:hover{ transition:none }
}