/* site.css: brand tokens + pieces every page shares. Loaded after scrollcraft.css. */
/* The engine writes --sc-p on every act at scroll rate. Not inherited, so descendants are never re-styled by it. */
@property --sc-p { syntax: '<number>'; inherits: false; initial-value: 0; }
:root {
  --sc-canvas: #EEF1E4;  --sc-surface: #FBFCF6;
  --sc-ink: #0F2A20;     --sc-ink-soft: #456050;
  --sc-accent: #FFB81C;  --sc-accent-ink: #0F2A20;
  --sc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --sc-font-text: "Figtree", system-ui, sans-serif;
  --sc-shadow-color: 150 45% 10%;
  --sc-r-sm: 10px; --sc-r-md: 16px; --sc-r-lg: 26px;
  --leaf: #1F7A4D; --mint: #BFE8C9; --sky: #A9DDF0; --tomato: #FF5A36; --kraft: #D9A45B; --paper2: #E2E8D3; --ink: #0F2A20; --sun: #FFB81C;
  --focus: #1F7A4D;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
body { font-family: var(--sc-font-text); }
h1, h2, h3, .display { font-family: var(--sc-font-display); font-weight: 800; font-stretch: 88%; letter-spacing: -0.03em; line-height: .98; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
.ico { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em; }
.item { width: 100%; height: 100%; overflow: visible; }
.coin { width: 1.4em; height: 1.4em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
#nav { position: fixed; inset: 12px 0 auto; z-index: 60; pointer-events: none; }
.bar {
  pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(82rem, calc(100% - 1.5rem)); margin-inline: auto; padding: 8px 8px 8px 16px;
  background: var(--sc-surface); border-radius: 999px;
  box-shadow: 0 1px 0 #fff inset, 0 2px 4px hsl(var(--sc-shadow-color) / .10), 0 12px 28px -10px hsl(var(--sc-shadow-color) / .28);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand b { font: 800 1.35rem/1 var(--sc-font-display); font-stretch: 85%; letter-spacing: -.04em; }
.brand__mark { width: 30px; height: 30px; transition: transform 260ms var(--pop); }
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.1); }
.pills { display: flex; gap: 2px; }
.pills a { padding: .5rem .95rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .94rem; transition: background 140ms, color 140ms; }
.pills a:hover { background: var(--paper2); }
.pills a[aria-current] { background: var(--ink); color: var(--sc-surface); }
.bar__end { display: flex; align-items: center; gap: 8px; }
.purse { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem .3rem .4rem; border-radius: 999px; background: var(--paper2); text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; transition: transform 260ms var(--pop); }
.purse:hover { transform: scale(1.05) rotate(-2deg); }
.purse em { font-style: normal; font-weight: 600; font-size: .78rem; color: var(--sc-ink-soft); }
.purse .coin { width: 1.55rem; height: 1.55rem; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--paper2); cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu__sheet { position: absolute; right: 0; top: 52px; min-width: 14rem; display: grid; padding: .5rem; background: var(--sc-surface); border-radius: 22px; box-shadow: 0 18px 40px -10px hsl(var(--sc-shadow-color) / .4); }
.menu__sheet a { padding: .8rem 1rem; border-radius: 14px; text-decoration: none; font-weight: 600; }
.menu__sheet a:hover { background: var(--paper2); }
@media (max-width: 920px) { .pills { display: none; } .menu { display: block; } .purse em { display: none; } }
@media (max-width: 560px) { .purse { display: none; } }
@media (max-width: 480px) { .bar { padding-left: 12px; gap: .5rem; } .brand b { font-size: 1.2rem; } .bar .btn--sm { padding: .68em .95em; font-size: .86rem; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; white-space: nowrap; cursor: pointer;
  padding: .95em 1.55em; border: 0; border-radius: 999px; text-decoration: none;
  background: var(--sc-accent); color: var(--sc-accent-ink); font: 700 1.02rem/1 var(--sc-font-text);
  box-shadow: 0 1px 0 rgb(255 255 255 / .55) inset, 0 2px 3px hsl(var(--sc-shadow-color) / .18), 0 12px 22px -10px hsl(var(--sc-shadow-color) / .5);
  transition: transform 260ms var(--pop), box-shadow 160ms;
}
.btn .ico { transition: transform 260ms var(--pop); }
.btn:hover { transform: translateY(-3px) rotate(-1deg); }
.btn:hover .ico { transform: translateX(4px); }
.btn:active { transform: scale(.95); transition-duration: 90ms; }
.btn--ink { background: var(--ink); color: var(--sc-surface); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn--sm { padding: .72em 1.2em; font-size: .95rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.linkbtn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: .22em; cursor: pointer; font: inherit; }

/* ---------- delight layer ---------- */
.fx-coin { position: fixed; z-index: 200; width: 30px; height: 30px; pointer-events: none; will-change: transform; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 20px; display: flex; align-items: center; gap: .6rem; padding: .5rem 1.2rem .5rem .6rem; max-width: calc(100% - 2rem);
  background: var(--ink); color: var(--sc-surface); border-radius: 999px; font-weight: 600; opacity: 0; transform: translate(-50%, 30px) scale(.94); pointer-events: none;
  box-shadow: 0 18px 40px -12px hsl(var(--sc-shadow-color) / .6); transition: opacity 180ms, transform 320ms var(--pop); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast__b { width: 38px; height: 44px; flex: none; margin-top: -14px; }
.baggu { width: 100%; height: 100%; overflow: visible; }
.baggu__eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.8s infinite; }
.baggu__scan { opacity: 0; }
.baggu__arm--r { transform-box: fill-box; transform-origin: 0 100%; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.1); } }
@keyframes wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-24deg); } }
.baggu--wave .baggu__arm--r { animation: wave 1.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes thunk { 0% { transform: scale(1.7) rotate(var(--r, -8deg)); opacity: 0; } 55% { transform: scale(.94) rotate(var(--r, -8deg)); opacity: 1; } 75% { transform: scale(1.04) rotate(var(--r, -8deg)); } 100% { transform: scale(1) rotate(var(--r, -8deg)); opacity: 1; } }

/* ---------- footer ---------- */
.foot { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 2rem; align-items: end; width: min(82rem, 100%); margin-inline: auto; padding: 3.5rem var(--sc-gutter) 2.5rem; font-size: .92rem; }
.foot p { max-width: 34ch; color: var(--sc-ink-soft); margin: .8rem 0 0; }
.foot nav { display: grid; gap: .35rem; }
.foot a { text-decoration: none; } .foot nav a:hover { text-decoration: underline; }
@media (max-width: 720px) { .foot { grid-template-columns: 1fr; gap: 1.4rem; } }

@media (prefers-reduced-motion: reduce) {
  .baggu__eyes, .baggu--wave .baggu__arm--r { animation: none; }
  .btn, .btn .ico, .brand__mark, .purse { transition: none; }
}

.soon { padding: .4rem .8rem; border-radius: 999px; background: var(--mint); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 720px) { .soon { display: none; } }