/* ===========================================================
   SOLTEMBER — a silly symphony in autumn color
   pure css, no build step
   =========================================================== */

:root{
  --paper:#f0dfbe;
  --paper-2:#e3cb9f;
  --paper-3:#d8bb87;
  --ink:#2a1607;
  --ink-soft:#4a2c14;
  --orange:#d9641d;
  --pumpkin:#ef8c22;
  --gold:#f3b436;
  --red:#9d2b19;
  --olive:#7a5322;
  --script:'Grand Hotel', 'Brush Script MT', cursive;
  --slab:'Bevan', Georgia, serif;
  --type:'Special Elite', 'Courier New', monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* курсор — тот самый пиксельный лист */
body, .grain, .vignette, canvas{
  cursor:url("assets/cursor-leaf.png") 6 3, auto;
}
a, button, .mascot, .ca, .navlinks a, .brand, summary, [role="button"]{
  cursor:url("assets/cursor-leaf-hot.png") 7 3, pointer;
}

body{
  margin:0;
  background:
    radial-gradient(120% 90% at 50% 0%, #f7ecd3 0%, var(--paper) 38%, var(--paper-2) 72%, var(--paper-3) 100%);
  color:var(--ink);
  font-family:var(--type);
  overflow-x:hidden;
  min-height:100vh;
}

/* ---------- film overlays ---------- */
#leafCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

.grain{
  position:fixed;inset:-150px;z-index:60;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift .6s steps(1) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}
  20%{transform:translate(-18px,10px)}
  40%{transform:translate(12px,-14px)}
  60%{transform:translate(-8px,-6px)}
  80%{transform:translate(16px,8px)}
  100%{transform:translate(0,0)}
}

.scratches{position:fixed;inset:0;z-index:61;pointer-events:none;overflow:hidden}
.scratches i{
  position:absolute;top:-10%;height:120%;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(60,30,10,.35),transparent);
  opacity:0;
}
.scratches i:nth-child(1){left:18%;animation:scr 5.2s steps(1) infinite}
.scratches i:nth-child(2){left:47%;width:2px;animation:scr 7.9s steps(1) infinite .8s}
.scratches i:nth-child(3){left:71%;animation:scr 4.3s steps(1) infinite 1.9s}
.scratches i:nth-child(4){left:88%;animation:scr 9.1s steps(1) infinite 3.1s}
@keyframes scr{
  0%,88%{opacity:0;transform:translateX(0)}
  90%{opacity:.7;transform:translateX(-14px)}
  92%{opacity:0}
  94%{opacity:.55;transform:translateX(9px)}
  96%,100%{opacity:0}
}

.flicker{
  position:fixed;inset:0;z-index:59;pointer-events:none;
  background:rgba(255,238,200,.35);mix-blend-mode:overlay;
  animation:flick 2.4s steps(1) infinite;
}
@keyframes flick{
  0%{opacity:.10} 12%{opacity:.28} 20%{opacity:.06} 33%{opacity:.22}
  41%{opacity:.12} 55%{opacity:.31} 66%{opacity:.09} 78%{opacity:.24}
  90%{opacity:.13} 100%{opacity:.10}
}

.vignette{
  position:fixed;inset:0;z-index:58;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%, transparent 42%, rgba(70,36,12,.30) 78%, rgba(40,18,4,.62) 100%);
}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 22px;
  background:linear-gradient(to bottom, rgba(42,22,7,.92), rgba(42,22,7,.72) 70%, transparent);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--gold);
  font-family:var(--slab);letter-spacing:2px;font-size:15px}
.brand-leaf{width:26px;height:26px;image-rendering:pixelated;
  animation:brandspin 6s ease-in-out infinite}
@keyframes brandspin{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.navlinks{display:flex;gap:20px}
.navlinks a{color:#f6e3bd;text-decoration:none;font-size:12px;letter-spacing:2px;opacity:.85}
.navlinks a:hover{color:var(--gold);opacity:1}
.sound{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:transparent;border:1px solid rgba(243,180,54,.55);border-radius:2px;
  color:#f6e3bd;font-family:var(--type);font-size:11px;letter-spacing:2px;padding:6px 11px;
}
.sound:hover{border-color:var(--gold);color:var(--gold)}
.sound-dot{width:8px;height:8px;border-radius:50%;background:#6b4423;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.sound.on .sound-dot{background:var(--gold);box-shadow:0 0 8px var(--gold)}

/* ---------- shared section furniture ---------- */
main{position:relative;z-index:5}
section{position:relative;padding:96px 22px;max-width:1120px;margin:0 auto}
.section-title{
  font-family:var(--slab);font-size:clamp(26px,4.6vw,44px);letter-spacing:4px;
  text-align:center;margin:0 0 6px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;gap:18px;
  text-shadow:2px 2px 0 rgba(217,100,29,.35);
}
.section-title .rule{height:3px;width:min(90px,12vw);background:var(--ink);opacity:.5;border-radius:2px}
.section-sub{text-align:center;letter-spacing:4px;font-size:12px;color:var(--olive);margin:0 0 44px}

.reveal{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{padding-top:120px;padding-bottom:40px}
.cardframe{
  position:relative;
  border:10px double var(--ink);
  border-radius:6px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 8px, transparent 8px 16px),
    radial-gradient(80% 70% at 50% 30%, #fbf0d6, #e9d1a6 70%, #ddc191 100%);
  padding:42px 26px 34px;
  box-shadow:0 22px 60px rgba(60,30,10,.35), inset 0 0 90px rgba(140,80,25,.20);
  text-align:center;
  overflow:hidden;
  animation:gate 6s ease-in-out infinite;
}
@keyframes gate{0%,100%{transform:translateY(0)}48%{transform:translateY(-1.5px)}52%{transform:translateY(1px)}}
.beam{
  position:absolute;top:-60%;left:50%;width:130%;height:180%;transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,231,175,.65), transparent 70%);
  pointer-events:none;animation:beam 3.6s ease-in-out infinite;
}
@keyframes beam{0%,100%{opacity:.55}50%{opacity:.85}}
.presents{position:relative;letter-spacing:6px;font-size:11px;color:var(--olive);margin:0 0 4px}
.logotitle{
  position:relative;margin:0;font-family:var(--script);
  font-size:clamp(64px,13vw,168px);line-height:.95;
  animation:titlebreathe 5s ease-in-out infinite;
}
.logotitle .sold{
  color:#c62b16;
  text-shadow:3px 3px 0 #6b1408, 6px 6px 0 var(--ink), 0 0 40px rgba(198,43,22,.55);
}
.logotitle .tember{
  color:var(--orange);
  text-shadow:3px 3px 0 var(--red), 6px 6px 0 var(--ink), 0 0 40px rgba(243,180,54,.55);
}
@keyframes titlebreathe{0%,100%{transform:rotate(-1deg) scale(1)}50%{transform:rotate(1deg) scale(1.02)}}
.undertitle{position:relative;letter-spacing:4px;font-size:clamp(10px,1.6vw,13px);color:var(--ink-soft);margin:14px 0 0}
.undertitle .dot{color:var(--orange)}

.stage{position:relative;display:flex;flex-direction:column;align-items:center;margin:18px 0 6px}
.tagline{margin:6px 0 0;font-size:clamp(13px,2vw,17px);color:var(--ink-soft)}
.tagline p{margin:2px 0}

/* ---------- mascot ---------- */
.mascot{width:min(300px,72vw);height:auto;overflow:visible;animation:dance 2.4s ease-in-out infinite}
@keyframes dance{
  0%,100%{transform:translateY(0) rotate(-2.5deg)}
  50%{transform:translateY(-14px) rotate(2.5deg)}
}
.leafshape{fill:var(--pumpkin);stroke:var(--ink);stroke-width:6;stroke-linejoin:round}
.vein{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;opacity:.75}
.m-shadow ellipse{fill:rgba(70,38,12,.22);animation:shadowpulse 2.4s ease-in-out infinite}
@keyframes shadowpulse{0%,100%{transform:scale(1)}50%{transform:scale(.82);opacity:.7}}
.m-arm path,.m-leg path{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round}
.glove{fill:#fff7e6;stroke:var(--ink);stroke-width:6}
.shoe{fill:var(--ink)}
.m-arm-l{transform-origin:104px 186px;animation:swingL 1.2s ease-in-out infinite}
.m-arm-r{transform-origin:196px 186px;animation:swingR 1.2s ease-in-out infinite}
@keyframes swingL{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(16deg)}}
@keyframes swingR{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-16deg)}}
.m-leg-l{transform-origin:140px 218px;animation:kickL 1.2s ease-in-out infinite}
.m-leg-r{transform-origin:160px 218px;animation:kickR 1.2s ease-in-out infinite}
@keyframes kickL{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-11deg)}}
@keyframes kickR{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(11deg)}}
.sclera{fill:#fffaf0;stroke:var(--ink);stroke-width:4}
.pupil{fill:var(--ink)}
.pie{fill:#fffaf0}
.m-pupils{animation:look 3.4s ease-in-out infinite}
@keyframes look{0%,40%{transform:translate(0,0)}55%,75%{transform:translate(-6px,2px)}90%,100%{transform:translate(4px,-1px)}}
.smile{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.frown{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.brow{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.tongue{fill:var(--red)}
.blush{fill:rgba(157,43,25,.30)}
.m-hat{transform-origin:150px 46px;animation:tiphat 4.8s ease-in-out infinite}
@keyframes tiphat{0%,78%,100%{transform:translateY(0) rotate(-4deg)}86%{transform:translateY(-24px) rotate(-22deg)}}
.hatbody{fill:var(--ink)}
.hatbrim{fill:var(--ink)}
.hatband{fill:var(--gold)}
.cloud{fill:#fdf3df;stroke:var(--ink);stroke-width:6;stroke-linejoin:round}
.puff{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;opacity:.7}
.trunk{fill:var(--olive);stroke:var(--ink);stroke-width:6;stroke-linejoin:round}

/* ---------- contract + buttons ---------- */
.ca-row{position:relative;margin:26px 0 18px;display:flex;justify-content:center}
.ca{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  background:rgba(42,22,7,.92);color:#f7e6c2;border:2px solid var(--ink);border-radius:3px;
  padding:11px 16px;font-family:var(--type);font-size:12px;letter-spacing:1.5px;
  max-width:min(620px,92vw);transition:transform .15s ease;
}
.ca:hover{transform:translateY(-2px)}
.ca-label{color:var(--gold);letter-spacing:3px}
.ca-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-copy{border-left:1px solid rgba(243,180,54,.45);padding-left:12px;color:var(--gold)}

.buttons{position:relative;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{
  text-decoration:none;font-family:var(--slab);letter-spacing:2px;font-size:13px;
  padding:13px 22px;border:3px solid var(--ink);border-radius:3px;
  background:var(--paper);color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-main{background:var(--orange);color:#fff5df}
.btn.soon{opacity:.45;pointer-events:none}

.scrollhint{text-align:center;margin-top:34px;letter-spacing:4px;font-size:11px;color:var(--olive);
  animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}

/* ---------- reel / title cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.titlecard{
  position:relative;border:4px solid var(--ink);border-radius:4px;
  background:radial-gradient(70% 70% at 50% 30%, #fbf1d8, #e6cea3);
  padding:34px 22px 26px;text-align:center;
  box-shadow:0 12px 28px rgba(60,30,10,.22);
}
.titlecard::after{
  content:"";position:absolute;inset:8px;border:1px solid rgba(42,22,7,.35);border-radius:2px;pointer-events:none;
}
.cardnum{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;line-height:30px;border-radius:50%;
  background:var(--ink);color:var(--gold);font-family:var(--slab);font-size:14px;
  border:2px solid var(--paper);
}
.titlecard p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}

/* ---------- cast ---------- */
.castgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.castcard{
  border:4px solid var(--ink);border-radius:4px;padding:18px;text-align:center;
  background:linear-gradient(180deg,#fbf1d8,#e9d3a8);
  box-shadow:0 12px 28px rgba(60,30,10,.22);
}
.castcard:hover .castart svg{transform:rotate(-4deg) scale(1.06)}
.castart svg{width:150px;height:150px;overflow:visible;transition:transform .3s ease}
.castcard h3{font-family:var(--slab);letter-spacing:3px;font-size:17px;margin:8px 0 6px}
.castcard p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-soft)}

/* ---------- marquee ---------- */
.board{
  border:5px solid var(--ink);border-radius:6px;
  background:linear-gradient(180deg,#3a1f0c,#251305);
  padding:16px;box-shadow:0 18px 44px rgba(40,18,4,.45), inset 0 0 60px rgba(243,180,54,.10);
}
.bulbs{height:14px;display:flex;gap:12px;justify-content:center;align-items:center}
.bulbs::before{
  content:"";flex:1;height:8px;
  background-image:radial-gradient(circle, var(--gold) 0 3px, transparent 3.5px);
  background-size:22px 8px;background-repeat:repeat-x;background-position:center;
  animation:bulbs 1s steps(2) infinite;
}
@keyframes bulbs{0%{background-position:0 center;opacity:1}100%{background-position:11px center;opacity:.7}}
.boardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;padding:22px 10px}
.stat{text-align:center;padding:12px 6px;border:1px dashed rgba(243,180,54,.35);border-radius:3px}
.stat-k{display:block;font-size:10px;letter-spacing:3px;color:#c79a52;margin-bottom:8px}
.stat-v{display:block;font-family:var(--slab);font-size:clamp(18px,3vw,28px);color:var(--gold);
  text-shadow:0 0 16px rgba(243,180,54,.45)}
.stat-v.up{color:#8ed07a;text-shadow:0 0 16px rgba(142,208,122,.4)}
.stat-v.down{color:#e2735c;text-shadow:0 0 16px rgba(226,115,92,.4)}
.boardnote{text-align:center;font-size:11px;letter-spacing:3px;color:#a87c42;margin:0 0 8px}
.counter{text-align:center;margin-top:26px;letter-spacing:3px;font-size:12px;color:var(--olive)}
.counter b{color:var(--red);font-size:15px}

/* ---------- tickets ---------- */
.stubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.stub{
  position:relative;padding:26px 20px 22px;border:3px dashed var(--ink);border-radius:5px;
  background:linear-gradient(180deg,#fbf1d8,#ecd7ad);
}
.stub::before,.stub::after{
  content:"";position:absolute;top:50%;width:18px;height:18px;border-radius:50%;
  background:var(--paper-2);border:3px dashed var(--ink);
}
.stub::before{left:-11px;clip-path:inset(0 0 0 50%)}
.stub::after{right:-11px;clip-path:inset(0 50% 0 0)}
.stubnum{display:block;font-family:var(--slab);font-size:26px;color:var(--orange);margin-bottom:6px}
.stub h3{font-family:var(--slab);letter-spacing:2px;font-size:14px;margin:0 0 8px}
.stub p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-soft)}

/* ---------- the end ---------- */
.theend{position:relative;z-index:5;text-align:center;padding:80px 22px 70px;
  background:radial-gradient(70% 100% at 50% 0%, rgba(42,22,7,.06), rgba(42,22,7,.35));}
.iris{
  width:min(300px,80vw);aspect-ratio:1;margin:0 auto 18px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #f7ecd3 55%, #2a1607 56%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 0 0 12px rgba(42,22,7,.9), 0 20px 50px rgba(40,18,4,.5);
  animation:iris 7s ease-in-out infinite;
}
@keyframes iris{0%,100%{transform:scale(1)}50%{transform:scale(.94)}}
.endleaf{width:88px;image-rendering:pixelated;animation:endfall 4s ease-in-out infinite}
@keyframes endfall{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(8deg)}}
.endtext{font-family:var(--script);font-size:44px;color:var(--red);margin:2px 0 0;
  text-shadow:2px 2px 0 var(--ink)}
.ticker-foot{font-family:var(--slab);letter-spacing:6px;font-size:22px;margin:10px 0 4px;color:var(--ink)}
.ca-foot{font-size:11px;letter-spacing:2px;color:var(--olive);word-break:break-all;margin:0 0 16px}
.madein{font-size:10px;letter-spacing:4px;color:var(--olive);opacity:.8;margin:0}

/* ---------- SOLD stamp ---------- */
.stamp{
  position:absolute;top:67%;left:26%;z-index:6;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-17deg) scale(3.2);
  opacity:0;animation:stampin .5s cubic-bezier(.2,1.6,.5,1) 1.1s forwards;
}
.stamp span{
  display:block;font-family:var(--slab);font-size:clamp(30px,5.4vw,64px);letter-spacing:8px;
  color:rgba(157,43,25,.78);border:7px solid rgba(157,43,25,.72);border-radius:8px;
  padding:6px 26px 10px;
  mix-blend-mode:multiply;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 1 0 0 0 -0.25'/%3E%3C/filter%3E%3Crect width='200' height='200' fill='%23fff'/%3E%3Crect width='200' height='200' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 1 0 0 0 -0.25'/%3E%3C/filter%3E%3Crect width='200' height='200' fill='%23fff'/%3E%3Crect width='200' height='200' filter='url(%23r)'/%3E%3C/svg%3E");
}
@keyframes stampin{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-17deg) scale(3.2)}
  70%{opacity:1;transform:translate(-50%,-50%) rotate(-17deg) scale(.92)}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(-17deg) scale(1)}
}
.cardframe.thump{animation:thump .35s ease-out}
@keyframes thump{
  0%{transform:translateY(0)}25%{transform:translate(3px,5px) rotate(.35deg)}
  50%{transform:translate(-2px,-3px) rotate(-.25deg)}100%{transform:translateY(0)}
}

/* ---------- speech bubble + poke hint ---------- */
.stage{position:relative}
.bubble{
  position:absolute;top:-6px;left:50%;transform:translate(-50%,-8px) scale(.9);
  z-index:7;pointer-events:none;opacity:0;transition:opacity .18s ease, transform .18s ease;
  background:#fffaee;border:4px solid var(--ink);border-radius:14px;
  padding:11px 16px;max-width:min(320px,86vw);font-size:14px;line-height:1.4;color:var(--ink);
  box-shadow:4px 5px 0 rgba(42,22,7,.35);
}
.bubble::after{
  content:"";position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);
  border:11px solid transparent;border-top-color:var(--ink);
}
.bubble.show{opacity:1;transform:translate(-50%,0) scale(1)}
.mascot{cursor:pointer}
.poke{margin:2px 0 0;font-size:10px;letter-spacing:3px;color:var(--olive);opacity:.6}

/* ---------- mascot: the red candle ---------- */
.m-candle .wick{stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.m-candle .candlebody{fill:#a8321c;stroke:var(--ink);stroke-width:5}

/* ---------- squirrel ---------- */
.fur{fill:#b8712c;stroke:var(--ink);stroke-width:6}
.tail{fill:none;stroke:var(--ink);stroke-width:22;stroke-linecap:round;opacity:1}
.ear{fill:#b8712c;stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.nose{fill:var(--ink)}

/* ---------- running marquee strip ---------- */
.strip{
  position:relative;z-index:5;overflow:hidden;
  background:linear-gradient(180deg,#3a1f0c,#251305);
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
  padding:10px 0;
}
.strip-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.strip-track span{
  font-family:var(--slab);font-size:14px;letter-spacing:3px;color:var(--gold);
  white-space:nowrap;padding-right:0;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- four seasons ---------- */
.seasongrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.seasoncard{
  border:4px solid var(--ink);border-radius:4px;padding:16px 16px 18px;text-align:center;
  background:linear-gradient(180deg,#fbf1d8,#e9d3a8);box-shadow:0 12px 28px rgba(60,30,10,.22);
}
.seasoncard h3{font-family:var(--slab);letter-spacing:3px;font-size:14px;margin:10px 0 6px}
.seasoncard p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-soft)}
.seasoncard svg{width:100%;height:96px;display:block}
.seasoncard .base{stroke:rgba(42,22,7,.35);stroke-width:2}

/* ---------- verdict + counters ---------- */
.verdict{
  text-align:center;margin:2px 0 10px;font-family:var(--slab);
  font-size:clamp(13px,2.2vw,17px);letter-spacing:2px;color:var(--gold);
}
.counters{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:center;margin-top:24px}
.counter{margin:0;letter-spacing:3px;font-size:12px;color:var(--olive)}
.counter b{color:var(--red);font-size:15px}

/* ---------- ledger ---------- */
.ledgerbox{
  position:relative;max-width:760px;margin:0 auto;
  border:3px solid var(--ink);border-radius:3px;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(42,22,7,.10) 27px 28px),
    linear-gradient(180deg,#fdf6e2,#efdcb6);
  padding:44px 28px 30px;text-align:center;
  box-shadow:0 14px 32px rgba(60,30,10,.25);
  transform:rotate(-.6deg);
}
.pin{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e2603a, #8d2314);
  box-shadow:0 3px 6px rgba(42,22,7,.5);
}
.ledgerline{
  margin:0 0 14px;min-height:3.2em;font-size:clamp(15px,2.4vw,20px);line-height:1.6;color:var(--ink);
  transition:opacity .35s ease;
}
.ledgerline.fade{opacity:0}
.ledgersig{margin:0;font-size:11px;letter-spacing:3px;color:var(--olive)}

.madein.small{margin-top:8px;letter-spacing:2px;opacity:.6;font-size:9px}

/* ---------- the receipt ---------- */
.paper{
  max-width:460px;margin:0 auto;position:relative;
  background:linear-gradient(180deg,#fffdf4,#f6ecd4);
  color:#3a2410;
  padding:30px 10px 34px;text-align:center;
  box-shadow:0 16px 40px rgba(60,30,10,.30);
  transform:rotate(-1.2deg);
  --zig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpolygon points='0,0 16,0 16,4 8,10 0,4' fill='%23000'/%3E%3C/svg%3E");
  /* первый слой — вся бумага, второй — зубчатый оторванный край снизу */
  -webkit-mask-image:linear-gradient(#000,#000), var(--zig);
          mask-image:linear-gradient(#000,#000), var(--zig);
  -webkit-mask-size:100% calc(100% - 10px), 16px 10px;
          mask-size:100% calc(100% - 10px), 16px 10px;
  -webkit-mask-repeat:no-repeat, repeat-x;
          mask-repeat:no-repeat, repeat-x;
  -webkit-mask-position:top, bottom;
          mask-position:top, bottom;
}
.paper pre{
  display:inline-block;text-align:left;
  margin:0;font-family:var(--type);font-size:clamp(10px,2.5vw,13px);line-height:1.65;
  white-space:pre;
}
.paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(120,80,30,.05) 0 2px, transparent 2px 5px);
}

/* ---------- panic sell button ---------- */
.panicwrap{
  position:fixed;right:18px;bottom:18px;z-index:45;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.panichint{
  margin:0;font-family:var(--type);font-size:10px;letter-spacing:2px;
  color:#f6e3bd;background:rgba(42,22,7,.85);padding:3px 8px;border-radius:2px;
  transform:rotate(-3deg);
}
.panic{
  width:96px;height:96px;border-radius:50%;
  border:6px solid var(--ink);
  background:radial-gradient(circle at 38% 32%, #f0563a, #b81f0d 62%, #7d1408);
  color:#fff2e0;font-family:var(--slab);font-size:12px;letter-spacing:2px;line-height:1.25;
  box-shadow:0 8px 0 #5f0f06, 0 14px 26px rgba(40,18,4,.5);
  transition:transform .08s ease, box-shadow .08s ease;
  animation:panicpulse 1.9s ease-in-out infinite;
}
.panic b{font-size:19px;letter-spacing:1px}
.panic:hover{transform:translateY(-2px)}
.panic:active{transform:translateY(6px);box-shadow:0 2px 0 #5f0f06, 0 6px 14px rgba(40,18,4,.5)}
@keyframes panicpulse{
  0%,100%{box-shadow:0 8px 0 #5f0f06, 0 14px 26px rgba(40,18,4,.5), 0 0 0 0 rgba(198,43,22,.55)}
  60%{box-shadow:0 8px 0 #5f0f06, 0 14px 26px rgba(40,18,4,.5), 0 0 0 20px rgba(198,43,22,0)}
}

/* ---------- panic effects ---------- */
.sellfx{
  position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,240,215,.9), rgba(198,43,22,.75));
}
.sellfx.go{animation:sellflash .8s ease-out}
@keyframes sellflash{0%{opacity:.95}100%{opacity:0}}

.soldcard{
  position:fixed;inset:0;z-index:71;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  opacity:0;
}
.soldcard.go{animation:soldcard 2.1s ease-out}
.soldcard-big{
  font-family:var(--slab);font-size:clamp(42px,11vw,120px);letter-spacing:10px;
  color:#c62b16;text-shadow:5px 5px 0 var(--ink);transform:rotate(-4deg);
}
.soldcard-sub{
  font-family:var(--type);font-size:clamp(12px,2.4vw,17px);letter-spacing:3px;color:var(--ink);
  background:rgba(240,223,190,.9);padding:6px 14px;border:2px solid var(--ink);
}
@keyframes soldcard{
  0%{opacity:0;transform:scale(2.4)}
  14%{opacity:1;transform:scale(.94)}
  22%{transform:scale(1)}
  82%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.05)}
}
body.quake{animation:quake .55s linear}
@keyframes quake{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-8px,5px) rotate(.3deg)}
  25%{transform:translate(7px,-6px) rotate(-.4deg)}
  40%{transform:translate(-6px,-3px)}
  55%{transform:translate(5px,6px) rotate(.2deg)}
  70%{transform:translate(-4px,2px)}
  85%{transform:translate(3px,-2px)}
}
.counter em{font-style:normal;color:var(--red)}

/* ---------- responsive ---------- */
@media (max-width:1150px){
  .navlinks{gap:13px}
  .navlinks a{font-size:11px;letter-spacing:1px}
}
@media (max-width:820px){
  .navlinks{display:none}
  .strip-track span{font-size:12px}
  .ledgerbox{padding:38px 18px 24px}
  .stamp{top:52%;left:31%}
  .panic{width:74px;height:74px;font-size:10px;border-width:5px}
  .panic b{font-size:15px}
  .panicwrap{right:12px;bottom:12px}
  section{padding:70px 16px}
  .cardframe{padding:30px 16px 26px;border-width:7px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .reveal{opacity:1;transform:none}
}