/* ---- fonts (bundled woff2, no CDN) ---- */
@font-face{font-family:"Gaegu";src:url("/assets/fonts/gaegu-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Gaegu";src:url("/assets/fonts/gaegu-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Gaegu";src:url("/assets/fonts/gaegu-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Patrick Hand";src:url("/assets/fonts/patrick-hand-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schoolbell";src:url("/assets/fonts/schoolbell-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --ink:#141414; --paper:#ffffff; --line:#bfe3ff; --margin:#ffb3c1;
  --red:#ed1c24; --grn:#22b14c; --blu:#3f48cc; --pur:#a349a4; --cyn:#00bff0; --yel:#ffca18; --pnk:#ec1c8f;
  --cover:#ffd21a; --cover-edge:#e8b800;
  --stroke:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:"Gaegu",system-ui,sans-serif; font-size:20px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
b{font-weight:700}

/* ---- topbar ---- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  border-bottom:var(--stroke) solid var(--ink);
}
.brand-mark{height:38px;transform:rotate(-3deg)}
.chrome{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stamp{
  font-family:"Gaegu";font-weight:700;font-size:18px;text-decoration:none;
  padding:6px 14px;border:var(--stroke) solid var(--ink);border-radius:22px;
  background:#fff;color:var(--ink);white-space:nowrap;
  box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s;
  transform:rotate(-1.5deg);
}
.stamp:nth-child(2){transform:rotate(1.5deg)}
.stamp:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.stamp-buy{background:var(--grn);color:#fff}
.stamp-x{background:var(--blu);color:#fff}
.stamp-dex{background:var(--yel)}

/* ---- hero ---- */
.hero{
  max-width:1120px;margin:0 auto;padding:46px 22px 26px;
  display:grid;grid-template-columns:1.35fr .9fr;gap:30px;align-items:center;
}
.hero-wordmark{max-width:min(560px,86%);margin-bottom:6px;transform:rotate(-1deg)}
.tagline{font-family:"Patrick Hand";font-size:clamp(24px,4.4vw,40px);margin:.1em 0 .25em;line-height:1.05}
.lede{font-size:21px;max-width:36ch;margin:.2em 0 1em}
.lede .flag{font-size:1.1em}
.hero-fig{margin:0;transform:rotate(2deg)}
.hero-fig img{
  border:var(--stroke) solid var(--ink);border-radius:14px;
  box-shadow:8px 8px 0 var(--ink);background:#fff;
}

/* CA line - like marker on the spine */
.ca-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border:3px dashed var(--ink);border-radius:12px;padding:7px 12px;background:#fffdf0;max-width:max-content}
.ca-label{font-weight:700;background:var(--pnk);color:#fff;padding:1px 9px;border-radius:8px}
.ca-code{font-family:"Patrick Hand";font-size:18px;word-break:break-all}
.ca-copy{font-family:"Gaegu";font-weight:700;border:3px solid var(--ink);background:var(--cyn);
  border-radius:9px;padding:2px 10px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.ca-copy:active{transform:translate(2px,2px);box-shadow:none}

/* ---- preview banner ---- */
.preview-banner{
  max-width:1120px;margin:6px auto 0;padding:12px 18px;
  background:var(--yel);border:var(--stroke) solid var(--ink);border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);font-size:18px;transform:rotate(-.6deg);
}
.preview-banner b{background:var(--red);color:#fff;padding:0 6px;border-radius:6px}

/* ---- stats ---- */
.ledger-wrap{max-width:1120px;margin:0 auto;padding:22px}
.stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-family:"Patrick Hand";font-size:20px;margin-bottom:12px}
.stats b{font-family:"Gaegu";font-weight:700;color:var(--pur)}
.stat b#stat-listed{color:var(--red)}
.dot{opacity:.5}
.sound-toggle{margin-left:auto;font-family:"Gaegu";font-weight:700;font-size:16px;
  border:3px solid var(--ink);background:#fff;border-radius:20px;padding:3px 12px;cursor:pointer;
  box-shadow:2px 2px 0 var(--ink)}
.sound-toggle[aria-pressed="true"]{background:var(--grn);color:#fff}
.sound-toggle:active{transform:translate(2px,2px);box-shadow:none}

/* ---- the notebook spread ---- */
.notebook{
  position:relative;border-radius:18px;padding:16px;
  background:var(--cover);border:var(--stroke) solid var(--ink);
  box-shadow:10px 12px 0 var(--ink);
}
.ledger{
  display:grid;grid-template-columns:1fr 46px 1fr;gap:0;
  background:#fff;border:3px solid var(--ink);border-radius:10px;overflow:hidden;min-height:340px;
}
.page{padding:16px 18px;position:relative;
  background:
    repeating-linear-gradient(transparent,transparent 37px,var(--line) 37px,var(--line) 39px);
  background-position:0 14px;
}
.page-left{border-right:2px solid #eee;
  box-shadow:inset -18px 0 22px -18px rgba(0,0,0,.18)}
.page-right{box-shadow:inset 18px 0 22px -18px rgba(0,0,0,.18)}
.page-head{font-family:"Gaegu";font-weight:700;font-size:26px;margin:0 0 8px;
  color:var(--pur);text-transform:lowercase;transform:rotate(-1deg)}
.page-left .page-head{color:var(--red)}
.spiral{
  background-image:radial-gradient(circle at 50% 10px,#111 0 6px,transparent 7px);
  background-size:100% 40px;background-repeat:repeat-y;
  border-left:3px solid var(--ink);border-right:3px solid var(--ink);
  background-color:var(--cover);
}

/* ---- rows ---- */
.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:10px;min-height:39px;padding:2px 2px;
  font-family:"Patrick Hand";font-size:20px}
.row .addr{letter-spacing:.3px}
.row.sold .addr{color:var(--ink)}
.row .meta{font-family:"Gaegu";font-weight:300;font-size:15px;color:#7a7a7a;margin-left:2px}
.row .sol{width:20px;height:20px;flex:0 0 20px;border-radius:4px;
  background:linear-gradient(120deg,var(--cyn),var(--pur));
  clip-path:polygon(0 22%,88% 22%,100% 40%,12% 40%,0 22%,0 58%,88% 58%,100% 76%,12% 76%,0 58%)}
.row .box{width:19px;height:19px;flex:0 0 19px;border:3px solid var(--ink);border-radius:4px}
.row .check{margin-left:auto;font-family:"Gaegu";font-weight:700;color:var(--grn);
  border:3px solid var(--grn);border-radius:7px;padding:0 8px;transform:rotate(-3deg);font-size:15px}
.row.empty{color:#9a9a9a;font-family:"Gaegu";min-height:60px;align-items:center}

/* new-entry landing animation */
@keyframes land{0%{opacity:0;transform:translateY(-10px) rotate(-4deg) scale(.9)}
  60%{opacity:1;transform:translateY(2px) rotate(1deg) scale(1.02)}100%{transform:none}}
@keyframes flash{0%,100%{background:transparent}30%{background:#fff7b0}}
.row.just-landed{animation:land .5s ease-out}
.row.just-landed .check{animation:flash .9s ease-out}

.persist-note{max-width:1120px;margin:10px auto 0;text-align:center;color:#b06a00;
  font-family:"Gaegu";font-size:15px}

/* ---- how ---- */
.how{max-width:1000px;margin:26px auto;padding:22px}
.how-head{font-family:"Gaegu";font-weight:700;font-size:30px;text-align:center;margin:.2em 0 .6em;color:var(--blu)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{border:var(--stroke) solid var(--ink);border-radius:14px;padding:16px;background:#fff;
  box-shadow:6px 6px 0 var(--ink);position:relative}
.step:nth-child(1){background:#fff4f5;transform:rotate(-1deg)}
.step:nth-child(2){background:#f2fff5;transform:rotate(.6deg)}
.step:nth-child(3){background:#f3f4ff;transform:rotate(-.6deg)}
.step-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:#fff;font-weight:700;margin-bottom:6px;font-family:"Gaegu"}
.step p{margin:0;font-size:19px}
.how-fine{text-align:center;color:#888;font-size:16px;margin-top:14px}

/* ---- footer ---- */
.foot{border-top:var(--stroke) solid var(--ink);margin-top:30px;padding:26px 20px 40px;text-align:center;background:#fafafa}
.foot-mark{height:34px;margin:0 auto 10px;transform:rotate(-2deg)}
.foot-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-family:"Gaegu";font-weight:700;font-size:19px}
.foot-links a{text-decoration:none;border-bottom:3px solid var(--yel)}
.foot-fine{color:#999;font-size:15px;max-width:52ch;margin:12px auto 0}

.flag{filter:saturate(1.1)}

/* ---- responsive ---- */
@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:30px}
  .hero-wordmark{margin:0 auto 6px}
  .lede{margin-left:auto;margin-right:auto}
  .ca-line{margin:0 auto}
  .hero-fig{max-width:420px;margin:6px auto 0}
  .steps{grid-template-columns:1fr}
  .ledger{grid-template-columns:1fr 30px 1fr}
  .row{font-size:17px}
  .row .meta{display:none}
  body{font-size:18px}
}
@media (max-width:460px){
  .ledger{grid-template-columns:1fr;min-height:0}
  .spiral{display:none}
  .page-left{border-right:none;border-bottom:3px dashed #ddd}
  .stamp{font-size:16px;padding:5px 11px}
  .sound-toggle{margin-left:0}
}