/* ============================================================
   ANONYMOUS PEPE — style.css
   Desktop-first (1920x1080). No mobile layout by design.
   ============================================================ */

/* ---------------- fonts ---------------- */
@font-face{
  font-family:'Bricolage';
  src:url('../assets/fonts/bricolage-var.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument';
  src:url('../assets/fonts/instrument-sans-var.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'SpaceMono';
  src:url('../assets/fonts/space-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'SpaceMono';
  src:url('../assets/fonts/space-mono-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Hand';
  src:url('../assets/fonts/caveat-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

/* ---------------- tokens ---------------- */
:root{
  --paper:      #F4EAD7;
  --paper-2:    #EEE0C6;
  --kraft:      #E3CFAC;
  --kraft-deep: #CBAA7B;
  --ink:        #2A2318;
  --ink-soft:   #54452F;
  --ink-mute:   #7A6749;
  --green:      #82AE4B;
  --green-deep: #4E6B2E;
  --rust:       #9A5832;

  --shadow-soft: 0 24px 60px rgba(58,40,20,.20);
  --shadow-card: 0 18px 42px rgba(58,40,20,.16), 0 2px 0 rgba(255,255,255,.5) inset;

  --font-display:'Bricolage', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Instrument', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'SpaceMono', ui-monospace, monospace;
  --font-hand:'Hand', 'Segoe Script', cursive;

  --ease: cubic-bezier(.22,.72,.18,1);

  --mx:0; --my:0;         /* mouse offset, -1..1 */
  --sy:0;                 /* scroll progress for hero */
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  background:#D8C3A0;
  overflow-x:clip;
}

body{
  margin:0;
  min-width:1180px;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  color:var(--ink-soft);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--green); color:#16210c; }

/* paper grain overlay */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------------- shared type ---------------- */
.kicker{
  margin:0 0 18px;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-mute);
}
.h2{
  margin:0 0 26px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(54px, 4.6vw, 84px);
  line-height:.94;
  letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}
.h2--wide{ font-size:clamp(44px, 3.7vw, 68px); }
.h2--wide span{ color:var(--ink-mute); font-weight:700; }
.lead{
  font-family:var(--font-display);
  font-weight:600;
  font-size:26px; line-height:1.32;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 22px;
  max-width:22ch;
}

/* ---------------- reveal ---------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .95s var(--ease), transform 1.05s var(--ease);
  transition-delay:var(--d, 0ms);
}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg:var(--paper);
  --fg:var(--ink);
  --edge:var(--ink);
  --hard:rgba(42,35,24,.85);
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px 17px;
  border:2px solid var(--edge);
  border-radius:14px;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-display);
  font-weight:700; font-size:16px; letter-spacing:.01em;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--hard);
  transform:translate(0,0) rotate(-.4deg);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s, color .22s;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{
  transform:translate(-2px,-3px) rotate(.6deg);
  box-shadow:7px 8px 0 var(--hard);
}
.btn:active{
  transform:translate(3px,3px) rotate(0deg);
  box-shadow:0 0 0 var(--hard);
  transition-duration:.08s;
}
.btn:focus-visible{ outline:3px solid var(--green-deep); outline-offset:3px; }

.btn--sm{ padding:11px 18px 12px; font-size:14px; border-radius:11px; box-shadow:3px 3px 0 var(--hard); }
.btn--lg{ padding:19px 32px 20px; font-size:18px; }

.btn--ink{
  --bg:var(--ink); --fg:#F7EEDC; --edge:var(--ink); --hard:rgba(42,35,24,.30);
}
.btn--ink:hover{ --bg:#1a150e; }

.btn--green{
  --bg:var(--green); --fg:#17250c; --edge:#243016; --hard:#243016;
}
.btn--green:hover{ --bg:#8dbd51; }

.ico{ width:1.05em; height:1.05em; fill:currentColor; flex:none; }
.btn__arrow{ font-size:1.05em; line-height:1; opacity:.85; }
.btn__arrow--up{ transform:rotate(-45deg); }

/* copy button */
.btn--copy{
  --bg:#FBF4E4;
  --hard:rgba(42,35,24,.9);
  padding:13px 22px 14px;
  font-family:var(--font-mono);
  font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  border-style:dashed;
  border-radius:10px;
  flex:none;
}
.btn--copy .btn__done{ display:none; }
.btn--copy.is-copied{
  --bg:var(--green);
  --fg:#17250c;
  border-style:solid;
  border-color:#243016;
}
.btn--copy.is-copied .btn__label{ display:none; }
.btn--copy.is-copied .btn__done{ display:inline; }
.btn--copy.is-copied::before{
  content:"✓";
  font-size:14px; letter-spacing:0;
}
@keyframes pop{
  0%{ transform:scale(1) rotate(-.4deg); }
  40%{ transform:scale(1.07) rotate(1.6deg); }
  100%{ transform:scale(1) rotate(-.4deg); }
}
.btn--copy.is-copied{ animation:pop .45s var(--ease); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  gap:36px;
  height:92px; padding:0 clamp(28px, 3.2vw, 62px);
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease), backdrop-filter .4s;
}
.nav.is-stuck{
  height:78px;
  background:rgba(243,232,212,.86);
  backdrop-filter:blur(10px) saturate(1.05);
  box-shadow:0 1px 0 rgba(42,35,24,.14), 0 18px 40px rgba(58,40,20,.10);
}
.nav__brand{ display:flex; align-items:center; gap:13px; }
.nav__avatar{
  width:44px; height:44px; border-radius:12px; overflow:hidden;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 rgba(42,35,24,.75);
  transform:rotate(-3deg);
  transition:transform .3s var(--ease);
  flex:none;
  background:#C9AE86;
}
.nav__brand:hover .nav__avatar{ transform:rotate(4deg) scale(1.04); }
.nav__avatar img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 50%;
  transform:scale(1.02);
}
.nav__brandtext{ display:flex; flex-direction:column; line-height:1.05; }
.nav__name{
  font-family:var(--font-display); font-weight:800; font-size:17px;
  letter-spacing:-.01em; color:var(--ink); text-transform:uppercase;
}
.nav__ticker{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.19em;
  color:var(--ink-mute); text-transform:uppercase;
}
.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a{
  position:relative;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft);
  padding:4px 0;
  transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--green-deep); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__actions{ display:flex; align-items:center; gap:12px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:max(100vh, 900px);
  height:100vh;
  max-height:1180px;
  padding:112px clamp(28px, 5vw, 96px) 96px;
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__bg-tex{
  position:absolute; inset:-8%;
  background-image:url('../assets/background/kraft-tile.jpg');
  background-size:cover; background-position:38% 50%;
  transform:translate3d(calc(var(--mx) * 12px), calc(var(--my) * 12px), 0) scale(1.04);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.hero__bg-tex::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(58% 58% at 30% 44%, rgba(255,247,229,.86), rgba(255,247,229,0) 72%),
    radial-gradient(48% 52% at 76% 46%, rgba(255,246,224,.55), rgba(255,246,224,0) 76%),
    radial-gradient(120% 100% at 50% 112%, rgba(94,68,40,.46), rgba(94,68,40,0) 60%),
    linear-gradient(180deg, rgba(250,241,224,.68) 0%, rgba(250,241,224,0) 24%);
}
.hero__bg-glow{
  position:absolute; width:58vw; height:58vw; right:-6vw; top:2vh;
  background:radial-gradient(circle, rgba(255,247,226,.62) 0%, rgba(255,247,226,0) 62%);
  transform:translate3d(calc(var(--mx) * -26px), calc(var(--my) * -18px), 0);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  filter:blur(6px);
}
.hero__bg-lines{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, rgba(60,42,24,.055) 0 1px, rgba(60,42,24,0) 1px 3px);
  opacity:.5;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0) 55%);
}

/* decor */
.hero__decor{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.decor-ring{
  position:absolute; right:5.5vw; top:8vh; width:520px; height:520px;
  background-image:url('../assets/decor/coffee-ring.png');
  background-size:contain; background-repeat:no-repeat;
  opacity:.55; mix-blend-mode:multiply;
  transform:translate3d(calc(var(--mx) * 30px), calc(var(--my) * 22px), 0) rotate(-6deg);
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.decor-tape{
  position:absolute;
  padding:9px 18px 10px;
  background-color:rgba(236,223,190,.92);
  background-image:url('../assets/decor/tape.png');
  background-size:cover;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
  box-shadow:0 6px 14px rgba(60,42,24,.14);
}
.decor-tape--hero{
  left:calc(44% - 20px); top:22.5%;
  transform:rotate(-7deg) translate3d(calc(var(--mx) * 22px), calc(var(--my) * 16px),0);
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
  z-index:3;
  max-width:184px;
  line-height:1.35;
  text-align:center;
  border-radius:2px;
}
.decor-dots{
  position:absolute; left:4%; top:16%;
  width:120px; height:120px;
  background-image:radial-gradient(rgba(70,52,32,.32) 1.4px, transparent 1.4px);
  background-size:14px 14px;
  opacity:.5;
}

.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:1880px; margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(480px, 0.86fr);
  align-items:center;
  gap:clamp(20px, 3vw, 64px);
}

.hero__copy{ max-width:660px; }

.label-line{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.label-line__tape{
  position:relative;
  display:inline-block;
  padding:7px 14px 8px;
  background:rgba(238,227,199,.95);
  border:1px solid rgba(42,35,24,.35);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  transform:rotate(-2.2deg);
  box-shadow:2px 3px 0 rgba(42,35,24,.16);
}
.label-line__txt{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-mute);
  padding-bottom:1px; border-bottom:1px dashed rgba(90,70,44,.4);
}

.hero__ticker{
  margin:0 0 14px;
  display:inline-block;
}
.hero__ticker span{
  display:inline-block;
  padding:8px 16px 9px;
  background:var(--green);
  color:#17250c;
  border:2px solid #243016;
  border-radius:8px;
  font-family:var(--font-mono); font-weight:700; font-size:14px; letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:3px 3px 0 rgba(36,48,22,.9);
  transform:rotate(-2.4deg);
}

.hero__title{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(70px, 6.6vw, 150px);
  line-height:.83;
  letter-spacing:-.045em;
  color:var(--ink);
  text-transform:uppercase;
}
.hero__title-line{ display:block; }
.hero__title-line--2{ position:relative; padding-left:.03em; }
.hero__title-line--2::after{
  content:""; position:absolute; left:2px; right:.22em; bottom:.1em; height:.06em;
  background:var(--green);
  opacity:.55;
  transform:rotate(-.6deg) scaleX(0);
  transform-origin:left;
  animation:strike 1.1s var(--ease) 1.1s forwards;
}
@keyframes strike{ to{ transform:rotate(-.6deg) scaleX(1); } }
.hero__title-dot{ color:var(--green-deep); }

.hero__lede{
  margin:0 0 26px;
  font-size:20px; line-height:1.5;
  color:var(--ink-soft);
  max-width:44ch;
}
.hero__lede em{
  font-style:normal;
  font-family:var(--font-hand);
  font-size:1.35em; line-height:1;
  color:var(--green-deep);
  letter-spacing:.01em;
}

/* contract address block */
.ca{
  position:relative;
  max-width:600px;
  margin:0 0 26px;
  padding:14px 16px 15px;
  background:rgba(251,244,228,.72);
  border:1px solid rgba(42,35,24,.28);
  border-radius:12px;
  transform:rotate(-.5deg);
  box-shadow:0 10px 26px rgba(58,40,20,.13);
  backdrop-filter:blur(3px);
}
.ca::before,.ca::after{
  content:""; position:absolute; width:74px; height:26px;
  background-image:url('../assets/decor/tape.png'); background-size:100% 100%;
  opacity:.9;
}
.ca::before{ left:-22px; top:-13px; transform:rotate(-9deg); }
.ca::after{ right:-20px; bottom:-12px; transform:rotate(-7deg); }
.ca__head{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:9px; }
.ca__label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-mute);
}
.ca__hint{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  color:rgba(122,103,73,.8);
}
.ca__row{ display:flex; align-items:center; gap:14px; }
.ca__value{
  flex:1 1 auto;
  font-family:var(--font-mono); font-size:15.5px; font-weight:400;
  letter-spacing:-.01em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:8px 0 9px;
  border-bottom:1px dashed rgba(90,70,44,.42);
  user-select:all;
}

.hero__actions{ display:flex; align-items:center; gap:16px; }

/* stage / character */
.hero__stage{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  min-height:640px;
  padding-bottom:6px;
}
.stage__sun{
  position:absolute; left:50%; top:44%; width:520px; height:520px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,248,231,.92) 0%, rgba(255,248,231,.35) 42%, rgba(255,248,231,0) 70%);
  filter:blur(4px);
  z-index:0;
}
.stage__shadow{
  position:absolute; left:50%; bottom:8px;
  width:min(78%, 470px); height:64px;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(58,38,18,.42) 0%, rgba(58,38,18,0) 72%);
  filter:blur(7px);
  animation:shadowPulse 7s ease-in-out infinite;
  z-index:0;
}
@keyframes shadowPulse{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:.9; }
  50%{ transform:translateX(-50%) scale(.93); opacity:.72; }
}
.stage__figure{
  position:relative; z-index:2;
  transform:translate3d(calc(var(--mx) * 16px), calc(var(--my) * 10px), 0) rotate(calc(var(--mx) * 1.2deg));
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.stage__img{
  height:clamp(540px, 76vh, 900px);
  width:auto;
  filter:drop-shadow(0 34px 44px rgba(52,34,16,.34)) drop-shadow(0 6px 10px rgba(52,34,16,.18));
  animation:floaty 7.5s ease-in-out infinite;
  user-select:none;
  -webkit-user-drag:none;
}
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(-.5deg); }
}
.stage__hit{
  position:absolute; inset:0;
  background:transparent; border:0; padding:0;
  cursor:pointer;
  border-radius:20px;
}
.stage__hit:focus-visible{ outline:3px dashed var(--green-deep); outline-offset:8px; }

.stage__bubble{
  position:absolute; right:96%; top:24%;
  width:236px;
  padding:14px 18px 15px;
  background:#FBF4E4;
  border:1.5px solid rgba(42,35,24,.55);
  border-radius:16px 16px 16px 4px;
  font-family:var(--font-hand); font-size:23px; line-height:1.15; color:var(--ink);
  box-shadow:5px 6px 0 rgba(42,35,24,.18);
  opacity:0; transform:translateY(10px) rotate(-3deg) scale(.94);
  transition:opacity .35s var(--ease), transform .45s var(--ease);
  pointer-events:none;
  z-index:3;
}
.stage__bubble::after{
  content:""; position:absolute; right:-13px; top:34px;
  width:0; height:0;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  border-left:13px solid #FBF4E4;
  filter:drop-shadow(1px 0 0 rgba(42,35,24,.45));
}
.stage__bubble.is-on{ opacity:1; transform:translateY(0) rotate(-2deg) scale(1); }

.stage__hint{
  position:absolute; left:34%; bottom:-8px; transform:translateX(-50%) rotate(-3deg);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
  animation:hintPulse 3.4s ease-in-out infinite;
  white-space:nowrap;
}
@keyframes hintPulse{ 0%,100%{opacity:.45;} 50%{opacity:.95;} }

.stage__caption{
  position:absolute; right:-34px; bottom:26px;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(74,58,36,.8);
  writing-mode:vertical-rl;
}

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:3;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(90,70,44,.78);
}
.hero__scroll-arrow{ display:inline-block; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  position:relative; z-index:5;
  margin:-14px calc(-1 * clamp(0px, 0vw, 0px)) 0;
  transform:rotate(-1.1deg) scale(1.02);
}
.marquee__strip{
  position:relative;
  padding:14px 0 15px;
  background:#F7EEDC;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  box-shadow:0 18px 34px rgba(58,40,20,.18);
  overflow:hidden;
}
.marquee__strip::before,
.marquee__strip::after{
  content:""; position:absolute; left:0; right:0; height:9px;
  background-image:url('../assets/decor/torn-strip-dark.png');
  background-size:auto 100%; background-repeat:repeat-x;
  opacity:.16;
}
.marquee__strip::before{ top:0; }
.marquee__strip::after{ bottom:0; transform:scaleY(-1); }
.marquee__track{
  display:flex; align-items:center; gap:0;
  width:max-content;
  animation:marqueeRun 34s linear infinite;
  will-change:transform;
}
.marquee__track span{
  display:inline-block;
  padding:0 22px;
  font-family:var(--font-display); font-weight:800;
  font-size:23px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}
.marquee__track span.dot{ color:var(--green-deep); font-size:16px; padding:0; }
.marquee--reverse .marquee__track{ animation-direction:reverse; }
.marquee--tight .marquee__strip{ padding:10px 0 11px; }
.marquee--tight .marquee__track span{ font-size:18px; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marqueeRun{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-33.3333%,0,0);} }

/* ============================================================
   THE BAG
   ============================================================ */
.bag{
  position:relative;
  display:grid;
  grid-template-columns:minmax(380px, 0.82fr) minmax(0, 1fr);
  gap:clamp(48px, 6vw, 120px);
  align-items:center;
  padding:130px clamp(28px, 5vw, 96px) 140px;
  background:
    radial-gradient(70% 60% at 78% 22%, rgba(255,250,238,.85), rgba(255,250,238,0) 70%),
    linear-gradient(180deg, #F6EDDA 0%, #F0E4CC 100%);
  overflow:hidden;
}
.bag::before{
  content:""; position:absolute; inset:0;
  background-image:url('../assets/background/kraft-tile-small.jpg');
  background-size:900px auto; opacity:.12; mix-blend-mode:multiply;
  pointer-events:none;
}
.bag__media{ position:relative; }
.bag__media-inner{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  transform:rotate(-1.6deg);
  box-shadow:0 30px 60px rgba(58,40,20,.24), 0 0 0 1px rgba(42,35,24,.12);
  background:#E3CFAC;
}
.bag__media-inner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,248,232,.18), rgba(58,40,20,.10));
  pointer-events:none;
}
.bag__media-inner img{
  width:100%; height:min(70vh, 720px); object-fit:contain; object-position:bottom;
  background:
    radial-gradient(60% 60% at 50% 40%, #FBF3E2 0%, #E9D8B9 78%, #DBC5A0 100%);
  padding:14px 8px 0;
}
.bag__media-note{
  display:flex; justify-content:space-between; gap:20px;
  margin-top:16px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
  padding:0 4px;
}
.bag__media::after{
  content:""; position:absolute; left:50%; top:-26px; transform:translateX(-50%) rotate(-3deg);
  width:176px; height:44px;
  background-image:url('../assets/decor/tape.png'); background-size:100% 100%;
  opacity:.92;
}
.bag__body{ max-width:660px; }
.bag__body p{ margin:0 0 20px; font-size:19px; line-height:1.68; color:var(--ink-soft); max-width:56ch; }
.bag__body .lead{ max-width:28ch; }

.rules{ list-style:none; margin:38px 0 0; padding:0; display:grid; gap:18px; }
.rules__item{
  display:flex; align-items:flex-start; gap:18px;
  padding:18px 22px 19px;
  background:rgba(251,244,228,.72);
  border:1px solid rgba(42,35,24,.16);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(58,40,20,.08);
}
.rules__num{
  flex:none;
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--green);
  color:#17250c;
  font-family:var(--font-display); font-weight:800; font-size:18px;
  border:2px solid #243016;
  box-shadow:2px 2px 0 rgba(36,48,22,.9);
  transform:rotate(-4deg);
}
.rules__item:nth-child(2) .rules__num{ background:var(--kraft-deep); transform:rotate(3deg); }
.rules__item:nth-child(3) .rules__num{ background:#E8B98B; transform:rotate(-2deg); }
.rules__text{ font-size:17px; line-height:1.55; color:var(--ink-soft); padding-top:4px; }

/* ============================================================
   FIELD NOTES
   ============================================================ */
.notes{
  position:relative;
  padding:120px clamp(28px, 5vw, 96px) 130px;
  background:#E9D9BC;
  overflow:hidden;
}
.notes::before{
  content:""; position:absolute; inset:0;
  background-image:url('../assets/background/kraft-tile.jpg');
  background-size:cover; background-position:30% 60%;
  opacity:.5; mix-blend-mode:multiply;
  pointer-events:none;
}
.notes::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(70,52,32,.20) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.1));
  pointer-events:none;
}
.notes__head{ position:relative; z-index:2; max-width:920px; margin:0 auto 56px; text-align:center; }
.notes__head .kicker{ margin-bottom:14px; }
.notes__sub{
  margin:0; font-size:18px; color:var(--ink-soft);
  font-family:var(--font-hand); font-size:26px; letter-spacing:.01em;
}
.notes__grid{
  position:relative; z-index:2;
  max-width:1560px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(18px, 2vw, 34px);
  align-items:start;
}
.card{
  position:relative;
  padding:34px 26px 26px;
  background:linear-gradient(180deg, #FBF5E6 0%, #F6EDD8 100%);
  border-radius:3px;
  box-shadow:0 20px 38px rgba(58,40,20,.20), 0 0 0 1px rgba(42,35,24,.10);
  transform:rotate(var(--rot, -1deg));
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:nth-child(1){ --rot:-1.4deg; }
.card:nth-child(2){ --rot:1.1deg; margin-top:44px; }
.card:nth-child(3){ --rot:-.7deg; margin-top:12px; }
.card:nth-child(4){ --rot:1.6deg; margin-top:64px; }
.card:hover{
  transform:rotate(0deg) translateY(-8px);
  box-shadow:0 30px 50px rgba(58,40,20,.26), 0 0 0 1px rgba(42,35,24,.12);
}
.card.reveal.in:hover{ transform:rotate(0deg) translateY(-8px); }
.card__tape{
  position:absolute; left:50%; top:-16px; transform:translateX(-50%) rotate(-4deg);
  width:104px; height:30px;
  background-image:url('../assets/decor/tape.png'); background-size:100% 100%;
  opacity:.95;
}
.card:nth-child(2) .card__tape{ transform:translateX(-50%) rotate(5deg); }
.card:nth-child(4) .card__tape{ transform:translateX(-50%) rotate(-2deg); }
.card__time{
  display:inline-block;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  color:var(--ink-mute);
  padding:3px 8px;
  border:1px solid rgba(42,35,24,.22);
  border-radius:4px;
  margin-bottom:16px;
  transform:rotate(-1.4deg);
}
.card p{
  margin:0 0 20px;
  font-size:16.5px; line-height:1.6; color:var(--ink-soft);
}
.card__tag{
  display:inline-block;
  font-family:var(--font-hand); font-size:22px; line-height:1;
  color:var(--green-deep);
  transform:rotate(-2deg);
}

/* ============================================================
   INTERLUDE
   ============================================================ */
.interlude{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:150px clamp(28px, 5vw, 96px);
  background:#241C13;
  color:#EFE2CA;
  overflow:hidden;
  isolation:isolate;
}
.interlude__tex{
  position:absolute; inset:0;
  background-image:url('../assets/background/kraft-tile.jpg');
  background-size:cover; background-position:60% 40%;
  filter:brightness(.5) contrast(1.2) saturate(.75) sepia(.18);
  opacity:.9;
}
.interlude__tex::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(55% 55% at 22% 45%, rgba(255,236,198,.20), rgba(255,236,198,0) 70%),
    radial-gradient(80% 80% at 80% 100%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
}
.interlude__word{
  position:absolute; left:-3vw; bottom:-4vh;
  font-family:var(--font-display); font-weight:800; font-size:26vw; line-height:.7;
  letter-spacing:-.05em; text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(239,226,202,.14);
  pointer-events:none;
  z-index:0;
}
.interlude__inner{ position:relative; z-index:2; max-width:840px; }
.interlude__title{
  margin:0 0 30px;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(48px, 4.6vw, 84px);
  line-height:.96; letter-spacing:-.03em;
  color:#F7EBD6;
}
.interlude__title span{ display:block; }
.interlude__title-em{
  font-family:var(--font-hand); font-weight:600;
  font-size:1.16em; line-height:1;
  color:var(--green);
  padding:.06em 0 .02em;
  transform:rotate(-1.4deg);
  transform-origin:left;
}
.interlude__cap{
  margin:0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(239,226,202,.6);
}
.interlude__figure{
  position:absolute; right:3vw; bottom:8vh; z-index:1;
  width:min(43vw, 690px);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.5));
}
.interlude__figure img{ width:100%; height:auto; }
.interlude__edge{
  position:absolute; left:0; right:0; height:80px; z-index:3;
  background-image:url('../assets/decor/torn-strip-light.png');
  background-size:auto 100%; background-repeat:repeat-x;
}
.interlude__edge--top{ top:-1px; height:72px; }
.interlude__edge--bottom{ bottom:-1px; height:72px; transform:scaleY(-1); }

/* ============================================================
   SIGHTINGS
   ============================================================ */
.sightings{
  position:relative;
  padding:150px clamp(28px, 5vw, 96px) 160px;
  background:linear-gradient(180deg, #F6EDDA 0%, #EEE0C6 100%);
  overflow:hidden;
}
.sightings__bg{
  position:absolute; inset:0;
  background-image:url('../assets/background/kraft-tile-small.jpg');
  background-size:1200px auto; background-position:20% 30%;
  opacity:.16; mix-blend-mode:multiply;
}
.sightings__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(58% 62% at 26% 40%, rgba(255,250,238,.9), rgba(255,250,238,0) 72%);
}
.sightings__ring{
  position:absolute; right:6vw; bottom:6vh; width:420px; height:420px;
  background-image:url('../assets/decor/coffee-ring.png');
  background-size:contain; background-repeat:no-repeat;
  opacity:.35; mix-blend-mode:multiply;
  transform:rotate(14deg);
}
.sightings__wrap{
  position:relative; z-index:2;
  max-width:1620px; margin:0 auto;
  display:grid;
  grid-template-columns:minmax(320px, 0.78fr) minmax(0, 1.22fr);
  gap:clamp(40px, 5vw, 96px);
  align-items:center;
}
.sightings__left{ position:relative; padding-top:10px; }
.sightings__label{
  margin:0 0 6px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-mute);
  text-align:center;
}
.sightings__figure{
  position:relative;
  width:100%; max-width:420px; margin:0 auto;
  transition:transform .5s var(--ease);
}
.sightings__figure img{
  width:100%; height:auto;
  transform:
    translate3d(calc(var(--mx) * 22px), calc(var(--my) * 14px), 0)
    rotate(calc(-2deg + var(--mx) * 2deg));
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 30px 38px rgba(58,40,20,.30));
  animation:floaty 8.5s ease-in-out infinite;
}
.sightings__left::after{
  content:""; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  width:72%; height:34px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(58,38,18,.32), rgba(58,38,18,0) 72%);
  filter:blur(6px);
}
.sightings__hint{
  position:relative; z-index:2;
  margin:26px 0 0;
  text-align:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(122,103,73,.85);
}
.sightings__card{
  position:relative;
  padding:58px 62px 56px;
  background:linear-gradient(180deg, #FCF7EA 0%, #F5EBD7 100%);
  border-radius:14px;
  box-shadow:0 36px 70px rgba(58,40,20,.20), 0 0 0 1px rgba(42,35,24,.12);
  transform:rotate(.6deg);
}
.sightings__tape{
  position:absolute; width:150px; height:40px; top:-20px;
  background-image:url('../assets/decor/tape.png'); background-size:100% 100%;
}
.sightings__tape--l{ left:46px; transform:rotate(-6deg); }
.sightings__tape--r{ right:46px; transform:rotate(5deg); }
.sightings__card .kicker{ margin-bottom:18px; }
.sightings__card .h2{ margin-bottom:22px; }
.sightings__text{
  max-width:56ch; margin:0 0 34px;
  font-size:19px; line-height:1.66; color:var(--ink-soft);
}
.sightings__actions{ display:flex; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.sightings__foot{
  margin:0;
  font-family:var(--font-hand); font-size:22px; color:var(--green-deep);
  transform:rotate(-1.2deg);
}

/* ============================================================
   ADDRESS / FINAL
   ============================================================ */
.address{
  position:relative;
  padding:150px clamp(28px, 5vw, 96px) 170px;
  background:
    radial-gradient(60% 60% at 26% 40%, rgba(255,248,231,.8), rgba(255,248,231,0) 66%),
    linear-gradient(180deg, #E7D6B7 0%, #DCC7A2 100%);
  overflow:hidden;
}
.address::before{
  content:""; position:absolute; inset:0;
  background-image:url('../assets/background/kraft-tile.jpg');
  background-size:cover; background-position:70% 30%;
  opacity:.42; mix-blend-mode:multiply;
}
.address__figure{
  position:absolute; left:1vw; bottom:34px; z-index:1;
  width:min(37vw, 560px);
  filter:drop-shadow(0 34px 44px rgba(58,40,20,.34));
  pointer-events:none;
}
.address__panel{
  position:relative; z-index:2;
  max-width:880px; margin-left:auto;
  padding:60px 64px 58px;
  background:linear-gradient(180deg, #FCF6E8, #F4EAD5);
  border-radius:16px;
  box-shadow:0 40px 80px rgba(58,40,20,.24), 0 0 0 1px rgba(42,35,24,.12);
  transform:rotate(.5deg);
}
.address__panel::before{
  content:""; position:absolute; left:50%; top:-19px; transform:translateX(-50%) rotate(-3deg);
  width:170px; height:40px;
  background-image:url('../assets/decor/tape.png'); background-size:100% 100%;
}
.address__text{ margin:0 0 30px; font-size:19px; line-height:1.65; color:var(--ink-soft); max-width:52ch; }
.ca--big{ max-width:none; margin:0 0 34px; background:rgba(236,224,199,.72); transform:rotate(-.25deg); }
.ca--big .ca__value{ font-size:17px; }
.address__actions{ display:flex; gap:16px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;
  padding:64px clamp(28px, 5vw, 96px) 56px;
  background:#241C13;
  color:#DCCDB2;
}
.footer__row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  max-width:1720px; margin:0 auto 26px;
  padding-bottom:26px;
  border-bottom:1px solid rgba(220,205,178,.18);
}
.footer__brand{ display:flex; align-items:baseline; gap:14px; }
.footer__name{
  font-family:var(--font-display); font-weight:800; font-size:26px;
  letter-spacing:-.01em; text-transform:uppercase; color:#F4E9D4;
}
.footer__ticker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:#9DB86C;
}
.footer__links{ display:flex; gap:30px; }
.footer__links a{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.19em; text-transform:uppercase;
  color:rgba(220,205,178,.78);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .25s, border-color .25s;
}
.footer__links a:hover{ color:#F4E9D4; border-color:#9DB86C; }
.footer__note{
  max-width:1720px; margin:0 auto;
  font-family:var(--font-hand); font-size:22px;
  color:rgba(220,205,178,.6);
}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:38px; z-index:1000;
  display:flex; align-items:center; gap:12px;
  padding:14px 24px 15px 18px;
  background:#F7EEDC;
  border:2px solid var(--ink);
  border-radius:12px;
  box-shadow:5px 6px 0 rgba(42,35,24,.75);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink);
  opacity:0; transform:translate(-50%, 26px) rotate(-1deg);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%, 0) rotate(-1deg); }
.toast__ico{ display:grid; place-items:center; width:22px; height:22px; color:var(--green-deep); }
.toast__ico svg{ width:100%; height:100%; }

/* ============================================================
   utility
   ============================================================ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- extra motion + anchors ---------- */
section[id]{ scroll-margin-top:96px; }

@keyframes dustDrift{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:.35; }
  50%{ transform:translate3d(16px,-26px,0) scale(1.25); opacity:.85; }
  100%{ transform:translate3d(0,0,0) scale(1); opacity:.35; }
}

body.is-loading .hero__copy .reveal{ opacity:0; }

@media (min-width:1700px){
  :root{ font-size:17px; }
}

/* very large desktops: keep the composition full-bodied */
@media (min-width:2100px){
  .hero__inner{ max-width:2100px; }
  .hero__copy{ max-width:760px; }
  .hero__title{ font-size:clamp(120px, 7vw, 178px); }
  .hero__lede{ font-size:22px; max-width:46ch; }
  .stage__img{ height:clamp(720px, 78vh, 1010px); }
  .ca{ max-width:680px; }
  .ca__value{ font-size:17px; }
  .bag{ grid-template-columns:minmax(440px, .84fr) minmax(0, 1fr); padding-left:7vw; padding-right:7vw; }
  .bag__media-inner img{ height:min(74vh, 900px); }
  .bag__body{ max-width:780px; }
  .bag__body p{ font-size:20px; }
  .notes{ padding-left:7vw; padding-right:7vw; }
  .notes__grid{ max-width:1820px; }
  .card p{ font-size:18px; }
  .sightings__wrap{ max-width:1860px; }
  .address__panel{ max-width:1000px; padding:72px 78px 68px; }
  .address__figure{ width:min(34vw, 640px); }
  .interlude__inner{ max-width:960px; }
}