/* ============================================================
   TRIANGLE — riso poster wall design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root{
  /* paper + ink */
  --paper:#FBF6EC;
  --paper-2:#F4EBD8;
  --ink:#1A1622;
  --ink-soft:#2A2433;

  /* riso spot inks */
  --pink:#FF3D9A;
  --blue:#1956E8;
  --yellow:#FFD400;
  --green:#00A05A;
  --orange:#FF6A2C;
  --violet:#7A3CF0;

  /* registration offset */
  --offset:6px;

  --maxw:1240px;

  /* fonts */
  --display:'Anton',sans-serif;
  --heavy:'Archivo Black',sans-serif;
  --body:'Space Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:500;
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* paper grain — very subtle multiplied speckle */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:multiply;
  opacity:.5;
  background-image:radial-gradient(rgba(26,22,34,.05) 1px,transparent 1.4px);
  background-size:4px 4px;
}

a{color:inherit}
img{max-width:100%;display:block}

/* ---------- type ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  line-height:.86;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0;
}
.heavy{font-family:var(--heavy);text-transform:uppercase;margin:0;line-height:.95}
.mono{font-family:var(--mono)}
.eyebrow{
  font-family:var(--mono);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:13px;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- diagonal ink underline for headlines ---------- */
.huge{font-family:var(--display);text-transform:uppercase;line-height:.94;margin:0;
  padding-bottom:.06em;font-size:clamp(54px,9vw,140px)}
.big{font-family:var(--display);text-transform:uppercase;line-height:.94;margin:0;
  padding-bottom:.06em;font-size:clamp(38px,5.2vw,76px)}

/* ============================================================
   OVERPRINT — the core multiply aesthetic
   ============================================================ */
.overprint{isolation:isolate}
.overprint > *{mix-blend-mode:multiply}

/* halftone dot field (use sparingly — one per view) */
.halftone{
  background-image:radial-gradient(var(--dot,var(--ink)) 28%,transparent 30%);
  background-size:10px 10px;
}

/* ============================================================
   STICKER NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:200;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:12px 28px;
  display:flex;align-items:center;gap:20px;
}
.nav-links{display:flex;gap:10px;margin-left:auto;align-items:center;flex-wrap:wrap}

/* triangle wordmark: 3 overprinting bars folded into a mark */
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none}
.wm-mark{width:40px;height:36px;position:relative;isolation:isolate;flex:none}
.wm-mark i{
  position:absolute;inset:0;mix-blend-mode:multiply;
  clip-path:polygon(50% 4%,100% 96%,0 96%);
}
.wm-mark i:nth-child(1){background:var(--pink);transform:translate(-3px,2px)}
.wm-mark i:nth-child(2){background:var(--blue);transform:translate(3px,2px)}
.wm-mark i:nth-child(3){background:var(--yellow);transform:translate(0,-2px) scale(.78)}
.wm-text{font-family:var(--display);font-size:30px;text-transform:uppercase;
  letter-spacing:.01em;line-height:1}

/* riso chip / sticker */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.04em;
  padding:7px 13px;border-radius:999px;
  border:2.5px solid var(--ink);
  background:var(--paper);color:var(--ink);
  text-decoration:none;white-space:nowrap;
  transition:transform .12s ease;
}
.chip:hover{transform:translateY(-2px) rotate(-2deg)}
.chip.is-active{background:var(--ink);color:var(--paper)}
.chip-pink{background:var(--pink);color:#fff}
.chip-blue{background:var(--blue);color:#fff}
.chip-yellow{background:var(--yellow)}
.chip-green{background:var(--green);color:#fff}
.chip-orange{background:var(--orange);color:#fff}
.chip-violet{background:var(--violet);color:#fff}

/* ============================================================
   BUTTONS — flat ink, hard registration offset, squash on click
   ============================================================ */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-family:var(--body);font-weight:700;font-size:17px;
  text-transform:uppercase;letter-spacing:.02em;
  padding:15px 26px;border:3px solid var(--ink);border-radius:4px;
  background:var(--bg);color:var(--fg);
  text-decoration:none;cursor:pointer;
  box-shadow:var(--offset) var(--offset) 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:calc(var(--offset) + 1px) calc(var(--offset) + 1px) 0 var(--ink)}
.btn:active{transform:translate(var(--offset),var(--offset));box-shadow:0 0 0 var(--ink)}
.btn-primary{--bg:var(--pink);--fg:#fff}
.btn-blue{--bg:var(--blue);--fg:#fff}
.btn-yellow{--bg:var(--yellow);--fg:var(--ink)}
.btn-ghost{--bg:var(--paper);--fg:var(--ink)}
.btn-lg{font-size:20px;padding:18px 34px}
.btn-sm{font-size:14px;padding:10px 16px;--offset:4px}

/* ============================================================
   POSTER CARD — registration slip on hover
   ============================================================ */
.card{
  position:relative;background:var(--paper);
  border:3px solid var(--ink);border-radius:6px;
  box-shadow:var(--offset) var(--offset) 0 var(--ink);
  transition:transform .14s ease, box-shadow .14s ease;
  overflow:hidden;
}
.card:hover{transform:translate(-2px,-2px);box-shadow:calc(var(--offset) + 2px) calc(var(--offset) + 2px) 0 var(--ink)}

/* the color layers in a mark slip on card hover */
.card:hover .slip-a{transform:translate(-3px,2px)}
.card:hover .slip-b{transform:translate(3px,-2px)}
.slip-a,.slip-b{transition:transform .18s ease}

/* dashed cut-here border */
.cut{border:2.5px dashed var(--ink);border-radius:6px}

/* rubber stamp */
.stamp{
  display:inline-block;font-family:var(--mono);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;
  border:3px solid currentColor;border-radius:6px;
  padding:8px 14px;line-height:1.05;
  transform:rotate(-7deg);
  opacity:.92;
}

/* tag — slightly rotated label */
.tag{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;
  padding:5px 10px;background:var(--ink);color:var(--paper);
  transform:rotate(-2deg);
}

/* section divider strip */
.rule{height:3px;background:var(--ink);border:0;margin:0}
.rule-dash{height:0;border:0;border-top:3px dashed var(--ink)}

/* footer */
.foot{background:var(--ink);color:var(--paper);margin-top:80px}
.foot a{color:var(--paper);text-decoration:none}
.foot .wm-text{color:var(--paper)}

/* utility */
.rotn1{transform:rotate(-1.5deg)}
.rotp1{transform:rotate(1.5deg)}
.rotn3{transform:rotate(-3deg)}
.center{text-align:center}
.hide-sm{}

@media(max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 18px}
  .nav-in{padding:10px 18px;gap:12px}
  .wm-text{font-size:24px}
  .hide-sm{display:none !important}
}

/* ============================================================
   MOTION
   ============================================================ */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* reveal: transition-based so the END state (opacity:1) is declarative and
   always lands, even in environments that don't advance the transition */
.reveal{opacity:0;transform:translateY(16px) rotate(var(--r,2.5deg));
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,1.25,.4,1)}
.reveal.in{opacity:1;transform:translateY(0) rotate(0)}

/* stamp: same transition approach */
.stamp-in{opacity:0;transform:scale(1.5) rotate(-12deg);
  transition:opacity .45s ease, transform .5s cubic-bezier(.2,1.3,.4,1)}
.stamp-in.in,.reveal.in .stamp-in{opacity:.92;transform:rotate(-7deg)}

.marquee{overflow:hidden;white-space:nowrap}
.marquee > *{display:inline-block;animation:marquee 26s linear infinite}
.marquee:hover > *{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important}
  .reveal,.stamp-in{opacity:1 !important;transform:none !important;transition:none !important}
  .marquee > *{transform:none !important}
}

/* ============================================================
   TOAST — shared notice (wallet.js)
   ============================================================ */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);z-index:9998;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.01em;
  padding:13px 20px;border:3px solid var(--ink);border-radius:8px;
  box-shadow:var(--offset) var(--offset) 0 rgba(26,22,34,.22);
  opacity:0;pointer-events:none;max-width:min(90vw,440px);text-align:center;
  transition:opacity .22s ease, transform .22s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){ .toast{transition:none} }