/* ============================================================
   MAKERY · STORYFORGE design system  (the single source of truth)
   Bold comic/zine maker identity for ages 10–18, games-first.
   Import this on every page; add no hex, font, or radius that
   is not a token here.  Reference build: app/tales.html
   ============================================================ */

:root{
  /* --- palette --- */
  --paper:#FFFDF7;      /* ground */
  --paper-2:#F4F0E6;    /* sunk panels */
  --ink:#14110E;        /* text + every outline + hard shadow */
  --ink-2:#4a453d;      /* secondary text */
  --tang:#FF5A1F;       /* PRIMARY — the GO, you, your action */
  --sun:#FFC53D;        /* highlight / marker / earned */
  --cobalt:#2C4BFF;     /* the machine, cool depth */
  --leaf:#12B76A;       /* safe / correct / live-ok */
  --berry:#FF3D8B;      /* playful accent (sparingly) */
  --grape:#8B5CF6;      /* playful accent (sparingly) */

  /* semantic (kept separate from accents) */
  --ok:var(--leaf); --warn:var(--sun); --stop:var(--tang);

  /* --- ink lines + comic shadow --- */
  --line:2.5px solid var(--ink);
  --line-thin:2px solid var(--ink);
  --sh:5px 5px 0 var(--ink);
  --sh-sm:3px 3px 0 var(--ink);
  --sh-lg:7px 7px 0 var(--ink);
  --dots:radial-gradient(var(--ink) 1.3px, transparent 1.4px);

  /* --- radius --- */
  --r-sm:9px; --r:14px; --r-lg:18px; --r-pill:999px;

  /* --- type --- */
  --display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;

  --dark:#0d0b07;       /* the console screen well */
}

/* Load fonts once (pages may also preconnect for speed):
   @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600&family=Space+Mono:wght@700&display=swap'); */

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.6;font-size:1.06rem;-webkit-font-smoothing:antialiased}
body.sf{overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1;text-wrap:balance}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
.mono{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* --- highlight marker on key words --- */
.mark{background:linear-gradient(transparent 58%, var(--sun) 58%);padding:0 .06em}
.mark.t{background:linear-gradient(transparent 58%, color-mix(in srgb,var(--tang) 55%,transparent) 58%)}
.mark.g{background:linear-gradient(transparent 58%, color-mix(in srgb,var(--leaf) 50%,transparent) 58%)}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:1.05rem;
  border:var(--line);border-radius:var(--r);padding:14px 22px;background:var(--sun);color:var(--ink);
  cursor:pointer;text-decoration:none;box-shadow:var(--sh);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.btn.go{background:var(--tang);color:#fff}
.btn.ghost{background:var(--paper)}
.btn.sm{font-size:.92rem;padding:9px 15px;border-radius:var(--r-sm);box-shadow:var(--sh-sm)}
.btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* --- nav --- */
.sf-nav{background:var(--paper);position:sticky;top:0;z-index:50}
.sf-nav .row{display:flex;align-items:center;gap:14px;padding:12px 0}
.logo{display:inline-flex;align-items:center;gap:3px;font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;text-decoration:none}
.logo .tail{height:1.85em;width:auto;display:block;transform:rotate(-4deg);margin-right:-2px}
.sf-nav .sp{margin-left:auto;display:flex;align-items:center;gap:10px}
.sf-nav .authgroup{display:inline-flex;gap:8px;align-items:center}
.sf-nav .lnk{font-weight:600;font-size:.98rem;text-decoration:none;padding:8px 4px}
.sf-nav .lnk:hover{color:var(--tang)}
@media(max-width:640px){.sf-nav .lnk.hide{display:none}}

/* --- sections --- */
.blk{padding:clamp(54px,7vw,92px) 0;position:relative}
.kick{display:block;text-align:center;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:1rem;color:var(--tang)}
h2.big{font-size:clamp(1.9rem,4.4vw,3rem);margin:18px 0 0;text-align:center}
.lead{color:var(--ink-2);max-width:60ch;margin:20px auto 0;text-align:center;font-size:1.14rem}
.blk>.wrap>.btn,.sectcta{text-align:center}

/* --- eyebrow sticker --- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:var(--line);border-radius:var(--r-pill);padding:6px 14px;background:var(--paper);box-shadow:var(--sh-sm);font-size:.76rem;transform:rotate(-1.5deg)}
.eyebrow b{width:9px;height:9px;border-radius:50%;background:var(--leaf)}

/* --- cards / panels --- */
.card{border:var(--line);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh);padding:20px 18px}
.panel{border:var(--line);border-radius:var(--r);background:var(--paper);box-shadow:var(--sh);padding:20px 18px;position:relative}
.tilt-l{transform:rotate(-1deg)} .tilt-r{transform:rotate(1deg)}
.num{position:absolute;top:-16px;left:16px;width:34px;height:34px;border:var(--line);border-radius:var(--r-sm);display:grid;place-items:center;font-family:var(--display);font-weight:800;box-shadow:var(--sh-sm);background:var(--sun)}

/* --- badges / chips --- */
.badge{display:inline-flex;align-items:center;gap:7px;border:var(--line-thin);border-radius:var(--r-pill);padding:5px 12px;background:var(--paper);font-family:var(--display);font-weight:700;font-size:.82rem;box-shadow:var(--sh-sm)}
.badge.tang{background:var(--tang);color:#fff}.badge.sun{background:var(--sun)}.badge.cobalt{background:var(--cobalt);color:#fff}.badge.leaf{background:var(--leaf);color:#fff}

/* --- safety strip (ink band) --- */
.safe{background:var(--ink);color:var(--paper);border-top:var(--line);border-bottom:var(--line)}
.safe .wrap{padding:26px 22px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:center;text-align:center}
.safe .item{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:1.02rem}
.safe .item svg{width:20px;height:20px;fill:none;stroke:var(--sun);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* --- the console sticker (a live sample build) --- */
.console{border:var(--line);border-radius:var(--r-lg);background:var(--ink);box-shadow:var(--sh);overflow:hidden}
.console .bar{display:flex;gap:6px;padding:11px 13px;border-bottom:2.5px solid #2a2620}
.console .bar i{width:11px;height:11px;border-radius:50%;background:#3a352c}
.console .bar i:first-child{background:var(--tang)}.console .bar i:nth-child(2){background:var(--sun)}.console .bar i:nth-child(3){background:var(--leaf)}
.console .body{padding:16px 15px;font-family:var(--mono);font-size:.82rem;color:#e9e4d8}
.console .you{color:var(--sun)} .console .bot{color:#9de3bf;margin-top:8px}
.console .screen{margin-top:13px;border:2.5px solid #2a2620;border-radius:11px;background:var(--dark);height:132px;display:grid;place-items:center;position:relative;overflow:hidden}

/* --- value power-ups --- */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.vals{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vals{grid-template-columns:1fr}}
.val{border:var(--line);border-radius:var(--r);background:var(--paper);box-shadow:var(--sh-sm);padding:16px}
.val .ic{width:40px;height:40px;border:var(--line);border-radius:11px;display:grid;place-items:center;box-shadow:var(--sh-sm);margin-bottom:11px}
.val .ic svg{width:21px;height:21px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.val h3{font-size:1.12rem}.val p{color:var(--ink-2);font-size:.92rem;margin-top:4px}

/* --- footer --- */
.sf-foot{border-top:var(--line);background:var(--paper-2);padding:clamp(38px,5vw,58px) 0 24px;color:var(--ink-2);font-size:.92rem}
.sf-foot .foot-top{display:grid;grid-template-columns:1.3fr 2fr;gap:clamp(28px,4vw,48px)}
@media(max-width:760px){.sf-foot .foot-top{grid-template-columns:1fr;gap:30px}}
.sf-foot .foot-brand .logo{font-size:1.5rem}
.sf-foot .foot-brand p{margin-top:12px;max-width:38ch;line-height:1.55}
.sf-foot .foot-soc{display:flex;gap:9px;margin-top:16px}
.sf-foot .foot-soc a{width:40px;height:40px;border:var(--line);border-radius:11px;display:grid;place-items:center;background:var(--paper);box-shadow:var(--sh-sm);color:var(--ink);transition:transform .08s,box-shadow .08s}
.sf-foot .foot-soc a:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.sf-foot .foot-soc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sf-foot .foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:560px){.sf-foot .foot-cols{grid-template-columns:1fr 1fr}}
.sf-foot .foot-cols b{font-family:var(--display);font-weight:800;font-size:.98rem;color:var(--ink);display:block;margin-bottom:11px}
.sf-foot .foot-cols a{display:block;color:var(--ink-2);text-decoration:none;margin-bottom:9px;width:fit-content}
.sf-foot .foot-cols a:hover{color:var(--tang)}
.sf-foot .foot-bot{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;margin-top:clamp(30px,4vw,44px);padding-top:20px;border-top:var(--line-thin);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}

/* --- halftone / dotted field for hero grounds --- */
.dotfield{position:relative}
.dotfield::before{content:"";position:absolute;inset:0;background:var(--dots);background-size:22px 22px;opacity:.08;pointer-events:none}

/* --- fx host (assets/fx.js mounts a confetti canvas into [data-fx]) --- */
[data-fx]{position:relative;overflow:hidden}

/* --- decorative stickers (assets/decor.js scatters .sf-deco motifs into sections) --- */
.sf-deco{position:absolute;z-index:0;pointer-events:none;opacity:.92;filter:drop-shadow(2px 2px 0 var(--ink))}
.sf-deco svg{display:block;width:100%;height:100%}
@keyframes sffloat{0%,100%{transform:translateY(0) rotate(var(--rot,-6deg))}50%{transform:translateY(-11px) rotate(calc(var(--rot,-6deg) * -1))}}
@media(max-width:820px){.sf-deco{display:none}}

/* centered FAQ questions (overrides page-local .faqs summary) */
.faqs summary{justify-content:center!important;text-align:center!important;position:relative;padding-left:46px!important;padding-right:46px!important}
.faqs summary::after{position:absolute!important;right:18px;top:50%;transform:translateY(-50%);margin-left:0!important}

@media(prefers-reduced-motion:reduce){*{animation:none!important}}