/* =========================================================================
   SOV — "The SOV Sketchbook" (v4)
   Hand-drawn comic of the manifesto on cream paper. Ink + gold.
   Nav · ticker · 3 acts · illustrated chapters. Static, vanilla.
   ========================================================================= */

:root{
  --paper:    #f4efe5;
  --paper-2:  #efe8da;
  --ink:      #201e1a;
  --ink-soft: #4b463e;
  --ink-faint:#8a8275;
  --gold:     #f4b400;
  --gold-deep:#d99300;
  --gold-wash:rgba(244,180,0,0.40);

  --hand: "Shantell Sans", "Comic Sans MS", "Segoe Print", cursive;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  --maxw: 72rem;
  --pad: clamp(1.15rem, 4.5vw, 3.5rem);
  --sect: clamp(4rem, 11vw, 9rem);
  --wobble: 14px 8px 16px 10px / 8px 16px 10px 14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:4rem; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; font-family:var(--body); color:var(--ink); background-color:var(--paper);
  font-size:clamp(1.02rem,0.78rem+0.7vw,1.2rem); line-height:1.68; overflow-x:hidden;
  background-image:
    radial-gradient(130% 90% at 50% -10%, rgba(0,0,0,0.045), transparent 60%),
    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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
img{ max-width:100%; height:auto; }
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

h1,h2,h3{ font-family:var(--hand); font-weight:700; line-height:1.04; margin:0; letter-spacing:-0.01em; overflow-wrap:break-word; }
p{ margin:0 0 1.05em; }
em{ font-style:italic; }
.mono{ font-family:var(--mono); font-size:0.82em; letter-spacing:0.01em; }
.dim{ color:var(--ink-soft); }
.tiny{ font-family:var(--mono); font-size:0.5em; color:var(--ink-faint); letter-spacing:0.04em; vertical-align:middle; }
a{ color:var(--ink); text-underline-offset:3px; text-decoration-thickness:2px; text-decoration-color:var(--gold); transition:color .2s ease; }
a:hover{ color:var(--gold-deep); }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--paper); padding:.6em 1em; font-family:var(--mono); font-size:.8rem; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.kicker{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 1rem; max-width:100%; overflow-wrap:anywhere; }
.ink-mark{ background:linear-gradient(105deg,var(--gold-wash),rgba(244,180,0,0.30) 60%,var(--gold-wash)); padding:0.04em 0.28em; margin:0 -0.05em; border-radius:60% 40% 55% 45%/50%; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* buttons */
.btn{ font-family:var(--hand); font-weight:700; font-size:1.05rem; padding:0.7em 1.5em; cursor:pointer; background:var(--paper); color:var(--ink); border:2.5px solid var(--ink); border-radius:18px 10px 20px 8px/10px 18px 9px 16px; display:inline-flex; align-items:baseline; gap:0.4em; text-decoration:none; box-shadow:3px 3px 0 var(--ink); transition:transform .15s ease, box-shadow .2s ease; }
.btn:hover:not([disabled]){ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); color:var(--ink); }
.btn:active:not([disabled]){ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn__sub{ font-size:0.78em; color:var(--ink-soft); }
.btn--buy{ background:var(--gold); }
.btn--buy[disabled]{ cursor:not-allowed; opacity:0.92; }
.btn--ghost{ background:transparent; box-shadow:none; border-style:dashed; }
.btn--sm{ padding:0.4em 1em; font-size:0.9rem; box-shadow:2px 2px 0 var(--ink); }
/* pump.fun buy button (logo + "Buy $SOV") */
.btn--pump{ align-items:center; gap:0.5em; padding:0.55em 1.25em; }
.btn--pump .btn__pumplogo{ width:1.6em; height:1.6em; flex:0 0 auto; display:block; }
.btn--pump .btn__pumpmain{ white-space:nowrap; }
.btn--sm.btn--pump{ padding:0.4em 0.95em; gap:0.4em; }
.btn--sm.btn--pump .btn__pumplogo{ width:1.4em; height:1.4em; }

/* nav */
.nav{ position:sticky; top:0; z-index:40; min-height:3.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.45rem clamp(1rem,4vw,2.5rem); background:rgba(244,239,229,0.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-bottom:2.5px solid var(--ink); }
.nav__brand{ display:flex; align-items:center; gap:0.5rem; text-decoration:none; font-family:var(--hand); font-weight:700; font-size:1.35rem; color:var(--ink); }
.nav__brand img{ width:38px; height:38px; }
.nav__links{ display:flex; align-items:center; gap:clamp(0.9rem,2vw,1.8rem); }
.nav__links a{ font-family:var(--hand); font-weight:600; font-size:1.02rem; text-decoration:none; color:var(--ink); }
.nav__links a:hover,.nav__links a.is-active{ color:var(--gold-deep); }
.nav__toggle{ display:none; background:none; border:none; font-size:1.7rem; line-height:1; cursor:pointer; color:var(--ink); }

/* ticker / marquee */
.ticker{ overflow:hidden; background:var(--ink); color:var(--paper); border-bottom:2.5px solid var(--ink); }
.ticker__track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
.ticker__track--rev{ animation-direction:reverse; animation-duration:40s; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__group{ font-family:var(--mono); font-size:0.8rem; letter-spacing:0.05em; padding:0.5rem 0; white-space:nowrap; text-transform:none; }
.ticker__group b{ color:var(--gold); font-weight:700; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker--interlude{ margin:clamp(3rem,7vw,6rem) 0; border-top:2.5px solid var(--ink); }

/* ink-line scroll progress */
.inkline{ position:fixed; left:clamp(8px,2vw,26px); top:0; width:6px; height:100vh; z-index:5; opacity:0.5; pointer-events:none; }
.inkline path{ stroke-dasharray:1; stroke-dashoffset:1; filter:url(#sketch); }
@media (max-width:760px){ .inkline{ display:none; } }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; min-height:calc(82svh - 5.4rem); padding:clamp(1.25rem,3vh,2.25rem) var(--pad) clamp(2.5rem,6vw,5rem); display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; grid-template-columns:1.05fr 0.95fr; }
.hero__inner{ min-width:0; max-width:38rem; }
.hero__title{ font-size:clamp(5rem,24vw,16rem); line-height:0.82; margin:0.06em 0 0; letter-spacing:-0.02em; color:var(--ink); text-shadow:4px 4px 0 var(--gold); }
.hero__hook{ font-family:var(--hand); font-weight:700; font-size:clamp(1.7rem,1.1rem+2.3vw,2.9rem); line-height:1.2; margin:clamp(1.2rem,3vw,1.8rem) 0 0; max-width:26rem; }
.hero__sub{ font-family:var(--hand); font-style:italic; font-weight:500; font-size:clamp(1.05rem,0.9rem+0.6vw,1.35rem); color:var(--ink-soft); margin:0.7rem 0 0; max-width:24rem; }
.hero__art{ min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(0.7rem,2vw,1.3rem); }
.wojak--hero{ width:min(100%,30rem); }
/* hover swap: calm wojak → relieved (open mouth). Both same crop, cross-fade. */
.wojak-stack{ position:relative; display:block; width:min(100%,30rem); }
.wojak-stack img{ display:block; width:100%; height:auto; }
.wojak--relieved{ position:absolute; inset:0; opacity:0; transition:opacity .22s ease; pointer-events:none; }
.wojak-stack:hover .wojak--relieved,.wojak-stack:focus-within .wojak--relieved{ opacity:1; }
@media (hover:none){ .wojak--relieved{ display:none; } }
.hero__caption{ font-family:var(--hand); font-weight:600; font-size:clamp(1.1rem,0.95rem+0.6vw,1.5rem); color:var(--ink-soft); text-align:center; margin:0; transform:rotate(-1.6deg); }
.cta-row{ display:flex; flex-wrap:wrap; gap:0.9rem; align-items:center; margin-top:clamp(1.6rem,4vw,2.2rem); }
.cta-row--center{ justify-content:center; }
/* contract-address copy box */
.ca{ display:flex; align-items:center; gap:0.5rem; width:max-content; max-width:100%; margin-top:clamp(1.4rem,3.5vw,2rem); padding:0.4rem 0.45rem 0.4rem 0.85rem; background:var(--paper-2); position:relative; border-radius:11px; }
.ca::before{ content:""; position:absolute; inset:0; border:2.5px solid var(--ink); border-radius:13px 10px 14px 9px; filter:url(#sketch); pointer-events:none; }
.ca__addr{ font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ca__copy{ flex:0 0 auto; font-family:var(--hand); font-weight:700; font-size:0.85rem; line-height:1; cursor:pointer; background:var(--gold); color:var(--ink); border:2px solid var(--ink); border-radius:7px; padding:0.32rem 0.7rem; transition:background .18s ease; }
.ca__copy:hover{ background:var(--gold-deep); color:var(--ink); }
.scroll-cue{ position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); font-size:1.6rem; color:var(--gold-deep); text-decoration:none; animation:bob 1.8s ease-in-out infinite; }

/* =========================================================================
   ACT INTRO + INTERLUDE
   ========================================================================= */
.act-intro{ text-align:center; padding:clamp(4rem,10vw,8rem) var(--pad) clamp(1.5rem,4vw,3rem); }
.act-intro__no{ font-family:var(--mono); letter-spacing:0.35em; text-transform:uppercase; color:var(--gold-deep); font-size:0.8rem; margin:0 0 0.8rem; }
.act-intro__title{ font-size:clamp(2.6rem,1.4rem+5vw,6rem); line-height:0.95; text-shadow:3px 3px 0 var(--gold); }
.act-intro__sub{ font-family:var(--hand); font-style:italic; color:var(--ink-soft); font-size:clamp(1.1rem,0.9rem+0.8vw,1.5rem); margin:0.8rem 0 0; }
.interlude{ padding:clamp(3.5rem,9vw,7rem) var(--pad); text-align:center; }
.interlude__q{ max-width:46rem; margin:0 auto; }
.interlude__q a{ display:block; font-family:var(--hand); font-weight:700; font-size:clamp(1.8rem,1.1rem+3vw,3.6rem); line-height:1.16; color:var(--ink); text-decoration:none; }
.interlude__q a:hover{ color:var(--gold-deep); }
.interlude__q cite{ display:block; margin-top:1rem; font-family:var(--mono); font-style:normal; font-size:0.8rem; letter-spacing:0.06em; color:var(--gold-deep); }

/* =========================================================================
   CHAPTERS (comic)
   ========================================================================= */
.chapter{ max-width:78rem; margin:0 auto; padding:var(--sect) var(--pad); display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,5vw,4.5rem); align-items:center; }
.chapter--right{ direction:rtl; }
.chapter--right > *{ direction:ltr; }
.chapter--full{ display:block; max-width:60rem; text-align:center; }
.chapter__text{ min-width:0; max-width:100%; }
.chapter__text--center{ max-width:42rem; margin:0 auto; }
.chapter__no{ font-family:var(--hand); font-weight:700; font-size:1.4rem; color:var(--gold-deep); letter-spacing:0.2em; text-transform:uppercase; margin:0 0 0.4rem; }
.chapter h2{ font-size:clamp(1.9rem,1.2rem+3vw,3.3rem); margin-bottom:0.8rem; }
.lead{ font-size:1.12em; }
.chapter p:not(.lead):not(.chapter__no):not(.shout):not(.aside):not(.pull){ color:var(--ink-soft); }
.aside{ font-family:var(--hand); font-style:italic; color:var(--ink-soft); margin:1.2rem 0 0; }
.pull{ font-family:var(--hand); font-weight:700; font-size:clamp(1.5rem,1rem+2.2vw,2.6rem); line-height:1.12; color:var(--ink); margin-top:1rem; }
.shout{ font-family:var(--hand); font-weight:700; font-size:clamp(1.8rem,1.2rem+2.5vw,3rem); margin-top:1rem; transform:rotate(-1.5deg); }
.shout a{ color:var(--ink); text-shadow:2px 2px 0 var(--gold); text-decoration:none; }
.shout a:hover{ color:var(--gold-deep); }
.panel{ position:relative; margin:0; display:flex; flex-direction:column; align-items:center; gap:0.7rem; min-width:0; }
.panel img{ width:min(100%,24rem); }
.panel .coin{ width:min(72%,14rem); }
.panel .scene-art{ width:100%; max-width:44rem; height:auto; display:block; border-radius:3px; box-shadow:0 6px 20px rgba(32,30,26,0.16); }
.panel figcaption{ font-family:var(--hand); font-style:italic; color:var(--ink-soft); font-size:1.02rem; text-align:center; transform:rotate(-1.2deg); max-width:20rem; }
.wojak--flip{ transform:scaleX(-1); }

/* inked quote (linked) */
.quote{ margin:1.4rem 0 0; }
.quote a{ display:block; padding:0.9rem 0 0.9rem 1.2rem; border-left:3px solid var(--gold); font-family:var(--hand); font-weight:500; font-size:1.08rem; line-height:1.4; color:var(--ink); text-decoration:none; border-radius:0 6px 6px 0; transition:border-color .25s ease, background .25s ease; }
.quote a:hover{ border-left-color:var(--gold-deep); background:rgba(244,180,0,0.06); color:var(--ink); }
.quote cite{ display:block; margin-top:0.5rem; font-family:var(--mono); font-style:normal; font-size:0.74rem; letter-spacing:0.04em; color:var(--gold-deep); }
.quote--center{ max-width:40rem; margin-left:auto; margin-right:auto; }

/* divider */
.divider{ max-width:38rem; margin:0 auto; padding:0 var(--pad); color:var(--gold-deep); }
.squig{ display:block; width:100%; height:12px; }

/* mechanics cards */
.cards{ list-style:none; margin:clamp(2rem,4vw,3rem) auto 0; padding:0; display:grid; gap:clamp(1.1rem,2.5vw,1.8rem); grid-template-columns:repeat(2,1fr); max-width:46rem; text-align:left; }
.card{ position:relative; padding:clamp(1.6rem,2.5vw,2.2rem); background:var(--paper-2); }
.card::before{ content:""; position:absolute; inset:0; border:2.5px solid var(--ink); border-radius:18px 12px 20px 10px/12px 18px 10px 16px; filter:url(#sketch); pointer-events:none; }
.card__num{ position:absolute; top:-0.7em; left:-0.5rem; width:2.1em; height:2.1em; display:grid; place-items:center; font-family:var(--hand); font-weight:700; font-size:1.4rem; color:var(--ink); background:var(--gold); border:2.5px solid var(--ink); border-radius:50% 48% 52% 50%; transform:rotate(-6deg); }
.card h3{ font-size:clamp(1.3rem,1rem+1vw,1.6rem); margin:0.4rem 0 0.6rem; }
.card p{ color:var(--ink-soft); font-size:1.01em; margin:0; }

/* =========================================================================
   BURN DASHBOARD
   ========================================================================= */
.burn{ padding:var(--sect) var(--pad); }
.burn__frame{ position:relative; max-width:58rem; margin:0 auto; padding:clamp(2rem,4vw,3.5rem); background:var(--paper-2); }
.burn__frame::before{ content:""; position:absolute; inset:0; border:3px solid var(--ink); border-radius:var(--wobble); filter:url(#sketch); pointer-events:none; }
.burn__head{ text-align:center; max-width:44rem; margin:0 auto clamp(2rem,4vw,2.8rem); }
.burn__head h2{ font-size:clamp(2.1rem,1.3rem+3.4vw,3.6rem); margin-bottom:0.7rem; }
.burn__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,3vw,2rem); text-align:center; }
.stat{ display:flex; flex-direction:column; gap:0.3rem; }
.stat__num{ font-family:var(--hand); font-weight:700; font-size:clamp(2.6rem,1.5rem+5vw,5rem); line-height:1; color:var(--ink); }
.stat__label{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
.burn__foot{ text-align:center; margin:clamp(1.8rem,4vw,2.6rem) 0 0; color:var(--ink-soft); font-size:0.78rem; }
.badge{ background:var(--gold); color:var(--ink); padding:0.15em 0.6em; border:2px solid var(--ink); border-radius:10px 6px 12px 5px; font-weight:600; }

/* =========================================================================
   IN TOLY'S WORDS
   ========================================================================= */
.words{ max-width:var(--maxw); margin:0 auto; padding:var(--sect) var(--pad); }
.words__head{ text-align:center; max-width:42rem; margin:0 auto clamp(2.5rem,5vw,4rem); }
.words__head h2{ font-size:clamp(2.2rem,1.3rem+3.4vw,3.8rem); margin-bottom:0.7rem; }
.bubbles{ display:grid; gap:clamp(1.2rem,3vw,2rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); }
.bubble{ position:relative; margin:0; padding:clamp(1.5rem,2.5vw,2rem); background:var(--paper); }
.bubble::before{ content:""; position:absolute; inset:0; border:2.5px solid var(--ink); border-radius:24px 22px 26px 22px/22px 26px 20px 24px; filter:url(#sketch); pointer-events:none; }
.bubble::after{ content:""; position:absolute; left:2.4rem; bottom:-13px; width:22px; height:22px; background:var(--paper); border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink); transform:rotate(52deg) skew(-8deg); }
.bubble blockquote{ margin:0 0 1rem; font-family:var(--hand); font-weight:500; font-size:clamp(1.1rem,0.95rem+0.7vw,1.4rem); line-height:1.34; }
.bubble blockquote::before{ content:"\201C"; color:var(--gold); }
.bubble blockquote::after{ content:"\201D"; color:var(--gold); }
.bubble figcaption a{ font-family:var(--mono); font-size:0.76rem; letter-spacing:0.04em; color:var(--ink-faint); text-decoration:none; }
.bubble figcaption a:hover{ color:var(--gold-deep); }
.bubble figcaption .mono{ color:var(--gold-deep); }
.bubble:nth-child(odd){ transform:rotate(-0.8deg); }
.bubble:nth-child(even){ transform:rotate(0.8deg); }

/* =========================================================================
   CLOSING + FOOTER
   ========================================================================= */
.closing{ padding:clamp(4rem,9vw,8rem) var(--pad); text-align:center; }
.closing__inner{ max-width:40rem; margin:0 auto; }
.closing__deal{ letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-deep); font-size:clamp(1.05rem,0.9rem+0.55vw,1.45rem); margin-bottom:1.4rem; }
.closing__lines{ display:flex; flex-direction:column; gap:0.1em; font-family:var(--hand); font-weight:700; font-size:clamp(2.1rem,1.3rem+4vw,4rem); line-height:1.08; margin:0 0 0.4em; }
.closing__lines span:last-child{ color:var(--gold-deep); }
.coin--big{ width:min(46%,11rem); margin:1rem auto 0; display:block; }
.closing__sign{ font-family:var(--hand); font-weight:500; font-size:1.25rem; color:var(--ink-soft); margin-top:2rem; }
.footer{ border-top:2.5px dashed var(--ink); padding:clamp(2.5rem,5vw,4rem) var(--pad); }
.footer__inner{ max-width:var(--maxw); margin:0 auto; text-align:center; }
.footer__coin{ width:54px; height:54px; display:block; margin:0 auto 1.2rem; }
.footer__links{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.8rem; justify-content:center; margin-bottom:1.6rem; font-family:var(--hand); font-weight:600; font-size:1.05rem; }
.footer__links a{ color:var(--ink); text-decoration:none; transition:color .2s ease; }
.footer__links a:hover{ color:var(--gold-deep); }
.footer__disclaimer{ max-width:46rem; margin:0 auto; font-size:0.9rem; color:var(--ink-faint); line-height:1.6; }

/* =========================================================================
   MOTION
   ========================================================================= */
.js-reveal .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(0.16,1,0.3,1); }
.js-reveal .reveal.is-visible{ opacity:1; transform:none; }
[data-parallax]{ will-change:transform; }
@keyframes bob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(6px); } }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-10px) rotate(1deg); } }
.coin--spin{ animation:float 5s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-cue,.coin--spin{ animation:none; }
  .ticker__track{ animation:none; }
  [data-parallax]{ transform:none !important; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:860px){
  .hero{ grid-template-columns:1fr; text-align:center; min-height:auto; }
  .hero__inner{ margin:0 auto; } .hero__hook,.hero__sub{ margin-left:auto; margin-right:auto; }
  .hero .cta-row{ justify-content:center; } .hero .ca{ margin-left:auto; margin-right:auto; } .hero__art{ order:-1; }
  .chapter,.chapter--right{ grid-template-columns:1fr; direction:ltr; text-align:center; }
  .panel{ order:-1; }
  .chapter__text{ display:flex; flex-direction:column; align-items:center; }
  .cards{ grid-template-columns:1fr; max-width:26rem; }
  .burn__grid{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:760px){
  .nav__toggle{ display:block; }
  .nav__links{ position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:flex-start; gap:0.1rem; background:var(--paper); border-bottom:2.5px solid var(--ink); padding:0.6rem clamp(1rem,4vw,2.5rem) 1rem; }
  .nav__links.open{ display:flex; } .nav__links a{ padding:0.55rem 0; width:100%; } .nav__links .btn--sm{ margin-top:0.4rem; }
}
@media (max-width:480px){
  .cta-row{ flex-direction:column; align-items:stretch; } .btn{ width:100%; justify-content:center; }
}