:root{
  --kraft:#d9c4a3; --kraft-deep:#cbb28c; --kraft-pale:#e6d6ba;
  --ink:#1b1611; --ink-soft:#4a3f31;
  --red:#E53238; --blue:#0064D2; --yellow:#F5AF02; --green:#86B817;
  --display:'Archivo Black',sans-serif; --mono:'IBM Plex Mono',monospace; --body:'Public Sans',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); color:var(--ink); background:var(--kraft);
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 7px),
    radial-gradient(1200px 600px at 85% -10%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(107,79,40,.10), transparent 60%);
  line-height:1.55;
}
img{max-width:100%;display:block}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}

/* topbar */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:12px 28px;background:var(--ink);color:var(--kraft);
  border-bottom:3px dashed var(--kraft-deep);
}
.wordmark{font-family:var(--display);font-size:15px;letter-spacing:.14em;color:var(--kraft);text-decoration:none}
.wordmark b{color:var(--yellow)}
.topbar nav{display:flex;gap:4px}
.topbar nav a{
  font-family:var(--mono);font-size:12px;color:var(--kraft);text-decoration:none;
  padding:4px 8px;border:1px solid rgba(217,196,163,.35);
}
.topbar nav a:hover{background:var(--kraft);color:var(--ink)}
.topbar nav a.wild{border-color:var(--yellow);color:var(--yellow)}
.topbar nav a.wild:hover{background:var(--yellow);color:var(--ink)}

/* hero */
.hero{position:relative;max-width:1080px;margin:0 auto;padding:96px 28px 56px}
.stampgrid{position:absolute;right:48px;top:110px;width:130px;height:190px}
.stampgrid .sq{position:absolute;box-shadow:2px 3px 0 rgba(27,22,17,.30)}
.sq.red{background:var(--red);width:46px;height:40px;top:0;left:4px;transform:rotate(-9deg)}
.sq.blue{background:var(--blue);width:38px;height:44px;top:34px;left:70px;transform:rotate(6deg)}
.sq.yellow{background:var(--yellow);width:44px;height:36px;top:88px;left:16px;transform:rotate(11deg)}
.sq.green{background:var(--green);width:36px;height:42px;top:132px;left:76px;transform:rotate(-6deg)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.hero h1{
  font-family:var(--display);font-size:clamp(56px,10vw,124px);line-height:.92;
  margin:18px 0 26px;letter-spacing:-.01em;
}
.hero h1 .love{color:var(--red);text-shadow:4px 4px 0 var(--ink)}
.dek{max-width:640px;font-size:17px;color:var(--ink-soft)}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  padding:6px 12px;border:2.5px solid var(--ink);background:var(--kraft-pale);
  transform:rotate(-1.2deg);box-shadow:2px 2px 0 rgba(27,22,17,.30);
}
.chip:nth-child(even){transform:rotate(1.1deg)}
.chip.red{border-color:var(--red);color:var(--red)}
.chip.blue{border-color:var(--blue);color:var(--blue)}
.chip.yellow{border-color:#b57f00;color:#b57f00}
.chip.green{border-color:#5d820e;color:#5d820e}
.chip.ink{background:var(--ink);color:var(--kraft);border-color:var(--ink)}

/* why-now strip */
.strip{
  max-width:1080px;margin:8px auto 30px;padding:22px 28px;display:flex;gap:26px;align-items:baseline;
  border-top:3px dashed var(--ink);border-bottom:3px dashed var(--ink);
}
.strip .k{font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--red)}
.strip p{font-size:15px;color:var(--ink-soft);max-width:820px}

/* bands */
.band{position:relative;max-width:1080px;margin:0 auto;padding:64px 28px}
.band + .band{border-top:2px dashed rgba(27,22,17,.35)}
.band .index{
  position:absolute;top:44px;right:28px;font-family:var(--display);
  font-size:clamp(60px,8vw,110px);color:transparent;-webkit-text-stroke:2px rgba(27,22,17,.22);
  pointer-events:none;line-height:1;
}
.inner{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.band:nth-child(even) .inner{direction:rtl}
.band:nth-child(even) .inner>*{direction:ltr}
.art{position:relative;background:var(--ink);padding:10px;box-shadow:6px 6px 0 rgba(27,22,17,.30)}
.art img,.art video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000}
.art .tag{
  position:absolute;bottom:calc(100% + 2px);left:14px;z-index:2;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;background:var(--accent,#E53238);color:#fff;
  padding:4px 10px;transform:rotate(-2deg);box-shadow:2px 2px 0 rgba(27,22,17,.35);
}
.art .cap{
  position:absolute;top:calc(100% + 2px);right:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--kraft-pale);border:1.5px solid var(--ink);padding:3px 9px;color:var(--ink-soft);
}
.band h2{font-family:var(--display);font-size:clamp(30px,4vw,44px);line-height:1.02;margin:10px 0 14px}
.logline{font-size:16.5px;font-weight:600;margin-bottom:18px}
.band dl dt{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep,var(--red));margin-top:14px;
}
.band dl dd{font-size:14.5px;color:var(--ink-soft);margin-top:4px}
/* accent wiring */
.band[data-accent="red"]{--accent:var(--red);--accent-deep:#b3272c}
.band[data-accent="blue"]{--accent:var(--blue);--accent-deep:#00509f}
.band[data-accent="yellow"]{--accent:var(--yellow);--accent-deep:#a97600}
.band[data-accent="green"]{--accent:var(--green);--accent-deep:#5d820e}
.band .eyebrow{color:var(--accent-deep)}
/* wild band */
.wildband{
  background:var(--ink);color:var(--kraft);margin-top:34px;
  border-top:none !important;
}
.wildband .index{-webkit-text-stroke:2px rgba(217,196,163,.30)}
.wildband h2,.wildband .logline{color:var(--kraft)}
.wildband dl dd,.wildband .dek{color:#b7a684}
.wildband .eyebrow{color:var(--yellow)}
.wildband dl dt{color:var(--yellow)}
.wildband .art{background:var(--kraft);box-shadow:6px 6px 0 rgba(0,0,0,.5)}
.wildband .art .tag{background:linear-gradient(90deg,var(--red) 0 25%,var(--blue) 0 50%,var(--yellow) 0 75%,var(--green) 0)}
.wildband .art .cap{background:var(--ink);color:#b7a684;border-color:#b7a684}

/* footer */
footer{
  max-width:1080px;margin:0 auto;padding:56px 28px 72px;text-align:left;
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);
}
footer b{color:var(--ink)}

/* boards: the stamps on the parcel */
.crate{display:flex;flex-direction:column;gap:34px;min-width:0}
.boards{display:flex;gap:14px;padding:0 2px}
.board{
  flex:1;position:relative;padding:5px;background:var(--kraft-pale);
  border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(27,22,17,.30);
  cursor:zoom-in;transform:rotate(-1.2deg);
  transition:transform .22s ease,box-shadow .22s ease;font-family:var(--mono);
}
.board:nth-child(even){transform:rotate(1.1deg)}
.board:hover{transform:rotate(0) translateY(-3px);box-shadow:5px 6px 0 rgba(27,22,17,.35)}
.board img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000}
.board span{
  position:absolute;right:-2px;bottom:-2px;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  background:var(--ink);color:var(--kraft);padding:2px 7px;
}
.wildband .board{background:#2a2119;border-color:var(--kraft);box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.wildband .board span{background:var(--kraft);color:var(--ink)}

/* board lightbox */
.boardbox{
  position:fixed;inset:0;z-index:90;background:rgba(27,22,17,.96);
  display:none;align-items:center;justify-content:center;flex-direction:column;padding:28px;
}
.boardbox.on{display:flex}
.boardbox figure{max-width:min(1500px,94vw);background:var(--kraft);padding:10px;box-shadow:8px 8px 0 rgba(0,0,0,.5)}
.boardbox img{max-width:100%;max-height:76vh;display:block;background:#000}
.boardbox .bar{display:flex;align-items:center;gap:14px;margin-top:18px}
.boardbox .bcap{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:var(--bx-accent,#E53238);color:#fff;padding:5px 12px;transform:rotate(-1.2deg);
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.boardbox .bnav{
  font-family:var(--mono);font-size:15px;background:none;border:1.5px solid var(--kraft);
  color:var(--kraft);padding:4px 13px;cursor:pointer;
}
.boardbox .bnav:hover{background:var(--kraft);color:var(--ink)}

@media (max-width:840px){
  .inner{grid-template-columns:1fr;gap:30px}
  .band:nth-child(even) .inner{direction:ltr}
  .band .index{font-size:64px;top:20px}
  .stampgrid{display:none}
  .strip{flex-direction:column;gap:8px}
  .topbar nav{display:none}
  .boards{gap:10px}
  .boardbox{padding:14px}
}