/* ==========================================================================
   POTATCHO — site styles
   Palette is taken from the mascot herself: potato gold, cream fur, dark
   brown, with sky blue and blush as the only accents.
   ========================================================================== */

:root {
  --cream:        #FBF3E4;
  --surface:      #FFFCF6;
  --gold:         #D9A052;
  --gold-deep:    #8A5A16;
  --brown:        #332516;
  --brown-soft:   #6B563E;
  --sky:          #BFE0EC;
  --sky-soft:     #E8F4F9;
  --blush:        #E89B9B;
  --line:         #EBDCC0;
  --shadow-1:     rgba(51, 37, 22, 0.07);
  --shadow-2:     rgba(51, 37, 22, 0.14);
  --nav-bg:       rgba(251, 243, 228, 0.88);
  --focus:        #332516;

  --radius:       18px;
  --radius-lg:    26px;
  --ease:         cubic-bezier(.2, .7, .2, 1);

  --step-0:       1rem;
  --step-1:       1.125rem;
  --step-2:       clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --step-3:       clamp(1.7rem, 1.3rem + 1.9vw, 2.5rem);
  --step-4:       clamp(2.3rem, 1.6rem + 3.2vw, 3.9rem);
}

/* Single-theme on purpose: the warm beige is the brand, and it's the ground
   the mascot's own artwork was drawn against. Every colour is set explicitly
   so the page holds up regardless of the viewer's system theme. */
:root { color-scheme: light; }

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Until Karla arrives from Google Fonts, text is set in Arial scaled to Karla's width (measured on a long sample:
   Karla is 2.6 % wider than Arial, 4.7 % at weight 500, the same in bold, 7.3 % narrower in italic), so paragraphs
   break into the same lines and nothing moves when the font swaps in. The system font it replaces is 11 % narrower,
   which re-wrapped the long paragraphs on /docs. Phones without Arial (Android) keep their own system font. */
@font-face { font-family: 'Karla Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400; size-adjust: 102.6%; }
@font-face { font-family: 'Karla Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 500; size-adjust: 104.7%; }
@font-face { font-family: 'Karla Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700; size-adjust: 99.9%; }
@font-face { font-family: 'Karla Fallback'; src: local('Arial Italic'), local('Arial-ItalicMT'); font-weight: 400; font-style: italic; size-adjust: 92.7%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: 'Karla', 'Karla Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--step-1);
  line-height: 1.6;
}

h1, h2, h3 {
  margin: 0;
  font-family: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }

p { margin: 0; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brown);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* in-page links land below the sticky header instead of underneath it */
[id] { scroll-margin-top: 88px; }

.eyebrow {
  font-family: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: 'Fredoka', ui-rounded, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), border-color .2s var(--ease);
}

.btn--primary {
  background: var(--brown);
  color: var(--cream);
  box-shadow: 0 2px 4px var(--shadow-1), 0 10px 22px -14px var(--shadow-2);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-1), 0 16px 28px -14px var(--shadow-2);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--brown);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--gold); background: var(--surface); }

.btn--small {
  min-height: 42px;
  padding: 8px 18px;
  font-size: 0.95rem;
  background: var(--gold);
  color: #2A1C0C;
}
.btn--small:hover { transform: translateY(-2px); }

/* ------------------------------------------------ interaction kit -- */
/* Shared by every page (js/ui.js). Press: a quick squeeze, then a springy release. Busy: a spinner and a working
   label, and it can't be pressed again. Unavailable: flat, dashed and muted, with the reason written next to it.
   Copied: the button itself turns green with a check. Transform/opacity only; reduced motion turns it off. */
.btn {
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s var(--ease),
              background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.btn:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { transform: scale(.96); transition-duration: .08s; }
.btn:focus-visible { border-radius: 999px; }
.btn:disabled:not([aria-busy="true"]), .btn[aria-disabled="true"]:not([aria-busy="true"]) {
  background: #EFE6D6; color: #6E5E49; border: 1.5px dashed #C9B89C; box-shadow: none; transform: none; cursor: not-allowed; opacity: 1;
}
.btn[aria-busy="true"] { cursor: progress; transform: none; box-shadow: none; opacity: .92; }
.btn[aria-busy="true"]::before {
  content: ''; flex: none; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: ui-spin .7s linear infinite;
}
.btn[aria-busy="true"] .pts-ico { display: none; }
.btn.is-copied { background: #EAF4EC; color: #2F7A45; border-color: #BFDCC6; }
.btn.is-copy-failed { background: #FBEDEA; color: #8A3A2A; border-color: #EDC3C3; }
.btn--tiny { min-height: 44px; padding: 6px 14px; font-size: .88rem; }
.ui-why { font-size: .86rem; color: var(--brown-soft); }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-pop { 0% { transform: scale(.92); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .btn.is-copied, .btn.is-copy-failed { animation: ui-pop .22s cubic-bezier(.34, 1.56, .64, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled) { transform: none; }
  .btn[aria-busy="true"]::before { animation: none; border-right-color: currentColor; opacity: .55; }
}

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: transparent;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck {
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  margin-right: auto;
}
.nav__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.nav__links {
  display: flex;
  gap: 22px;
  font-size: 0.98rem;
}
.nav__links a {
  text-decoration: none;
  color: var(--brown-soft);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav__links a:hover { color: var(--brown); border-bottom-color: var(--gold); }

/* menu button: only shown on narrow screens, and only when scripts run */
.nav__toggle {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--surface);
  color: var(--brown);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 800px) {
  /* scripts on: the links move into a panel under the bar, behind the button */
  html.js .nav__toggle { display: inline-flex; }
  html.js .nav__links { display: none; }
  html.js .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 4px clamp(16px, 4vw, 40px) 12px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -22px var(--shadow-2);
  }
  html.js .nav.is-open .nav__links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--line);
  }
  html.js .nav.is-open .nav__links a:last-child { border-bottom-color: transparent; }
  html.js .nav.is-open {
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  /* scripts off: nothing to open a panel with, so the links stay in the
     header and wrap onto a second row */
  html:not(.js) .nav { flex-wrap: wrap; }
  html:not(.js) .nav__links { order: 5; flex-basis: 100%; flex-wrap: wrap; gap: 4px 18px; }
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  overflow: hidden;          /* the glow bleeds off-edge; don't let it scroll the page */
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px) clamp(20px, 5vw, 48px) clamp(56px, 8vw, 96px);
}

/* soft sky wash behind the mascot — she sits in the page, not in a box */
.hero__glow {
  position: absolute;
  z-index: -1;
  right: -6%;
  top: 46%;
  translate: 0 -50%;
  width: min(760px, 78vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, var(--sky-soft) 0%, transparent 66%);
  pointer-events: none;
}

.hero__copy > * + * { margin-top: 18px; }

.lede {
  max-width: 46ch;
  color: var(--brown-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px !important;
}

/* --------------------------------------------------------------- mascot -- */

/* The mascot is the original artwork. Her eyes and tail are cut out of that
   same image as feathered sprites layered back on top, so they can move while
   everything else stays exactly as drawn. Sprite positions are percentages of
   the 1254x1254 source, so the whole thing scales as one picture. */

.mascot {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mascot__base {
  width: 100%;
  height: auto;
  display: block;
}

.mascot__part {
  position: absolute;
  display: block;
  height: auto;
}

.mascot__tail {
  left: 2.711%;
  top: 32.695%;
  width: 19.458%;
  transform-origin: 50% 100%;      /* pivots where the tail meets her body */
  animation: tail-sway 4.2s ease-in-out infinite alternate;
}
.mascot.is-paused .mascot__tail { animation-play-state: paused; }

/* Each eye is one unit — the eye crop plus the socket that closes over it —
   and the gaze moves the unit, so the lid can never drift off the eye.
   --gaze-x / --gaze-y run -1..1; the percentages are of the unit itself. */
.mascot__eyeunit {
  position: absolute;
  transform: translate(calc(var(--gaze-x, 0) * 4.4%), calc(var(--gaze-y, 0) * 3.2%));
  transition: transform .45s var(--ease);
}
.mascot__eyeunit--l { left: 43.062%; top: 29.506%; width: 15.152%; aspect-ratio: 190 / 170; }
.mascot__eyeunit--r { left: 63.796%; top: 37.480%; width: 14.753%; aspect-ratio: 185 / 170; }
.mascot__eye {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Blink. Each socket is a window sitting exactly over one eye, masked with a
   soft radial falloff so its edge melts into her face instead of ending on a
   hard ellipse. Inside it, the lid — a strip of her own brow fur with the lash
   line along its bottom — parks just above the window and slides down to
   close. Nothing is replaced or redrawn: the eye underneath is the original
   artwork, simply covered. */
.mascot__socket {
  position: absolute;
  overflow: hidden;
  /* closest-side makes 100% the inscribed ellipse (the eye's own outline);
     without it the gradient reaches the box corners and the mask is nearly
     a rectangle. opaque past the iris, only the outer rim fades into fur. */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 84%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 84%, rgba(0,0,0,0) 100%);
}
/* positioned inside the eye unit, measured from the artwork */
.mascot__socket--l {
  left: 6.316%; top: -1.176%; width: 74.737%; height: 79.412%;
  transform: rotate(-4deg);
}
.mascot__socket--r {
  left: 4.324%; top: 8.824%; width: 82.162%; height: 72.941%;
  transform: rotate(-11deg);
}

.mascot__lid {
  position: absolute;
  left: 0;
  top: -100%;                 /* parked directly above the eye, out of sight */
  width: 100%;
  height: 100%;
  transform: translateY(0);
  transition: transform .21s cubic-bezier(.25,.1,.3,1);   /* reopening: softer */
}
.mascot.is-blinking .mascot__lid {
  transform: translateY(100%);
  transition: transform .13s cubic-bezier(.4,0,.8,.6);    /* closing: quicker */
}

@keyframes tail-sway {
  from { transform: rotate(3.5deg); }
  to   { transform: rotate(-6deg); }
}

/* no cursor to follow (touch): let her look around on her own */
@keyframes idle-gaze {
  0%, 16%   { transform: translate(0, 0); }
  26%, 44%  { transform: translate(3.4%, 1.8%); }
  54%, 72%  { transform: translate(-3.2%, -1.2%); }
  82%, 100% { transform: translate(0, 0); }
}
.mascot--idle .mascot__eyeunit { animation: idle-gaze 11s ease-in-out infinite; }

/* ------------------------------------------------------------- sections -- */

.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 88px) clamp(20px, 5vw, 48px);
}

.section__head { max-width: 58ch; }
.section__head > * + * { margin-top: 12px; }
.section__lede { color: var(--brown-soft); }

/* Sections fade up as they scroll into view — but only once scripts are
   known to be running. With scripts off nothing is ever hidden. If scripts
   are on but app.js never arrives (or dies before it can reveal anything),
   the safety animation shows everything after a moment regardless. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal:not(.is-in) { opacity: 0; transform: translateY(22px); }
html.js:not(.reveal-ok) .reveal { animation: reveal-safety 0s 2.5s forwards; }
@keyframes reveal-safety { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ her voice -- */

/* four quotes: 2x2 so no card is ever left alone on a row */
.quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 34px;
}
@media (max-width: 560px) {
  .quotes { grid-template-columns: 1fr; }
}

.quote-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: space-between;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quote-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px var(--shadow-1), 0 18px 30px -20px var(--shadow-2);
}
.quote-card__text { font-size: var(--step-1); }
.quote-card__tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown-soft);
}

/* -------------------------------------------------------- say something -- */

.say {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 56px);
  padding: clamp(28px, 4vw, 48px);
  background: var(--sky-soft);
  border-radius: var(--radius-lg);
}
.say__copy > * + * { margin-top: 14px; }
.say__copy .btn { margin-top: 26px; }

.bubble {
  position: relative;
  margin: 0;
  padding: 30px 30px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 4px var(--shadow-1), 0 20px 34px -24px var(--shadow-2);
}
/* little tail on the speech bubble */
.bubble::after {
  content: "";
  position: absolute;
  left: 38px;
  bottom: -11px;
  width: 20px;
  height: 20px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  rotate: 45deg;
}

.bubble__text {
  margin: 0;
  font-size: var(--step-2);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.32;
  text-wrap: balance;
  min-height: 3.6em;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.bubble__text.is-swapping { opacity: 0; transform: translateY(6px); }

.bubble__by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  color: var(--brown-soft);
}
.bubble__by img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* ----------------------------------------------------------- tagging her -- */

.threads {
  display: grid;
  /* min() keeps the track from forcing a horizontal scroll on narrow phones */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  margin-top: 34px;
}

.thread {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow-1);
}
.thread__label {
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown-soft);
}

.msg { display: flex; gap: 12px; }
.msg__who {
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  color: var(--brown-soft);
  margin-bottom: 3px;
}
.msg__text { font-size: 1.02rem; }

.avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
}
.avatar--img { object-fit: cover; }

/* --------------------------------------------------------------- notice -- */

.notice {
  padding: clamp(26px, 4vw, 38px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
}
.notice > * + * { margin-top: 14px; }
.notice p { color: var(--brown-soft); max-width: 72ch; font-size: 1rem; }

/* --------------------------------------------------------------- footer -- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px clamp(20px, 5vw, 48px) 64px;
  border-top: 1px solid var(--line);
}
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.footer__name { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; }
.footer__line { font-size: 0.9rem; color: var(--brown-soft); max-width: 42ch; }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 0.95rem;
}
.footer__links a {
  color: var(--brown-soft);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.footer__links a:hover { color: var(--brown); border-bottom-color: var(--gold); }

.footer__legal {
  flex-basis: 100%;
  max-width: 82ch;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--brown-soft);
}
.footer__legal a { color: var(--brown); }

.nav__links a[aria-current="page"] { color: var(--brown); border-bottom-color: var(--gold); }

/* ----------------------------------------------------------------- gate -- */

/* hidden unless the head script decided the visitor hasn't agreed yet;
   with scripts off there is no class, so the site stays reachable */
.gate { display: none; }
html.needs-gate .gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;                /* the card centres itself with auto margins… */
  overflow-y: auto;             /* …and the overlay scrolls when it can't fit */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(51, 37, 22, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html.needs-gate body { overflow: hidden; }

.gate__card {
  width: min(520px, 100%);
  margin: auto;                 /* centred when there's room, never clipped at the top */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 4vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px var(--shadow-2);
  animation: gate-in .3s var(--ease);
}
@keyframes gate-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.gate__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.gate__card h2 { font-size: var(--step-3); }
.gate__text { color: var(--brown-soft); }
.gate__text a { color: var(--brown); }
.gate__hint { font-size: 0.85em; }

.gate__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.gate__check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--brown);
}
.gate__card .btn { align-self: flex-start; }

/* narrow phones: tighter card, full-width button */
@media (max-width: 480px) {
  .gate__card { gap: 12px; }
  .gate__card .btn { align-self: stretch; }
  .gate__avatar { width: 52px; height: 52px; }
}
/* short viewports (landscape phones): drop the avatar so the controls fit */
@media (max-height: 560px) {
  .gate__avatar { display: none; }
  .gate__card { gap: 10px; padding: 18px 22px; }
  .gate__card h2 { font-size: var(--step-2); }
}

/* ----------------------------------------------------------------- docs -- */

.docs {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 48px) clamp(48px, 8vw, 88px);
}
.docs__head { max-width: 60ch; }
.docs__head > * + * { margin-top: 12px; }
.docs__updated {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--brown-soft);
}

.docs__body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-top: 40px;
}

.docs__toc {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.95rem;
}
.docs__toc a {
  color: var(--brown-soft);
  text-decoration: none;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.docs__toc a:hover { color: var(--brown); border-left-color: var(--gold); }

.docs__prose { max-width: 68ch; }
.docs__prose section + section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.docs__prose h2 { font-size: var(--step-2); }
.docs__prose h2 + * { margin-top: 14px; }
.docs__prose p + p,
.docs__prose p + ul,
.docs__prose ul + p { margin-top: 12px; }
.docs__prose p,
.docs__prose li { color: var(--brown-soft); }
.docs__prose strong { color: var(--brown); font-weight: 700; }
.docs__prose ul { list-style: disc; padding-left: 1.2em; }
.docs__prose li + li { margin-top: 8px; }
.docs__prose a { color: var(--brown); }
.docs__prose code {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.85em;
  padding: 1px 6px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--brown);
  overflow-wrap: anywhere;            /* a wallet address is one 42-character word: let it wrap on phones */
}

@media (max-width: 800px) {
  .docs__body { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .docs__toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 18px;
  }
  .docs__toc a { border-left: 0; padding: 8px 0; border-bottom: 2px solid var(--line); }
  .docs__toc a:hover { border-bottom-color: var(--gold); }
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 8px;
    text-align: left;
  }
  .mascot { order: -1; max-width: 320px; }
  .hero__glow { right: 50%; translate: 50% -50%; top: 24%; width: min(560px, 96vw); }
  .say { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .nav { gap: 12px; padding-inline: 16px; }
  .nav__brand span { display: none; }
  .mascot { max-width: 260px; }
}

/* ------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  html.js .reveal:not(.is-in) { opacity: 1; transform: none; animation: none; }

  /* she holds still: the rule above would otherwise park the tail at the end
     of its swing instead of where it was drawn */
  .mascot__tail,
  .mascot--idle .mascot__eyeunit { animation: none !important; transform: none !important; }
}

/* ======================================================================
   2026-09-16 — site sections, PFP Studio and launch status
   ====================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: #2A1C0C;
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.badge--soft { background: var(--sky-soft); color: var(--brown-soft); margin-left: 10px; font-size: 0.6rem; }

/* alternating section grounds so the long page has rhythm */
.section--alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: none; }
.section--alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* --- homepage: studio teaser --- */
.teaser {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  padding: clamp(24px, 4vw, 40px);
  background: var(--sky-soft);
  border-radius: var(--radius-lg);
}
.teaser__copy > * + * { margin-top: 14px; }
.teaser__copy .btn { margin-top: 22px; }
.teaser__demo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.demo-avatar {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, #F5E3C6, #D9A052);
  box-shadow: 0 2px 4px var(--shadow-1), 0 14px 24px -18px var(--shadow-2);
}
.demo-avatar--sky { background: linear-gradient(160deg, #E8F4F9, #BFE0EC); }
.demo-avatar--blush { background: linear-gradient(160deg, #FBE9E9, #E89B9B); }
.demo-avatar__face { position: absolute; left: 50%; top: 42%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,252,246,.85); transform: translate(-50%, -50%); }
.demo-avatar__pet { position: absolute; width: 58%; height: auto; }
.demo-avatar--beside .demo-avatar__pet { right: -6%; bottom: -8%; }
.demo-avatar--corner .demo-avatar__pet { left: -14%; bottom: -12%; width: 66%; transform: scaleX(-1); }
.demo-avatar--shoulder .demo-avatar__pet { right: 6%; top: 34%; width: 42%; }
.teaser__label { grid-column: 1 / -1; font-family: 'Space Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brown-soft); text-align: center; }

/* --- homepage: mood card --- */
.cards2 { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
.mood {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow-1);
}
.mood__text { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: var(--step-2); line-height: 1.3; margin-top: 10px; }
.mood__note { color: var(--brown-soft); font-size: 0.95rem; margin-top: 10px; }

/* --- homepage: spotlight + what's growing --- */
.spotlight-empty {
  margin-top: 28px;
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--cream);
}
.spotlight-empty img { width: 120px; height: auto; margin: 0 auto 12px; }
.spotlight-empty h3 { font-family: 'Fredoka', system-ui, sans-serif; font-size: var(--step-2); font-weight: 600; }
.spotlight-empty p { color: var(--brown-soft); max-width: 52ch; margin: 10px auto 0; }
.spotlight-empty .btn { margin-top: 18px; }

.growing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.growing__col { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.growing__col h3 { font-family: 'Space Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }
.growing__col ul { margin-top: 12px; display: grid; gap: 8px; }
.growing__col li { padding-left: 18px; position: relative; color: var(--brown-soft); font-size: 0.98rem; }
.growing__col li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.growing__col--now li::before { background: #7DB88A; }
.growing__col--planned li::before { background: var(--sky); }
.growing__col a { color: var(--brown); font-weight: 700; text-decoration-color: rgba(138, 90, 22, 0.35); text-underline-offset: 3px; }
.growing__col a:hover { text-decoration-color: currentColor; }
/* "Recently shipped": what went live and when (past facts; the columns above promise no dates) */
.shipped { margin-top: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.shipped__title { font-family: 'Space Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }
.shipped__list { position: relative; list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.shipped__list::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--line); }
.shipped__list li { position: relative; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 2px 14px; align-items: baseline; padding-left: 24px; color: var(--brown-soft); font-size: 0.98rem; }
.shipped__list li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--surface); }
.shipped__list li:first-child::before { background: #7DB88A; }
.shipped__list time { font-family: 'Space Mono', monospace; font-size: 0.78rem; color: var(--brown); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- studio page --- */
.studio { max-width: 1080px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 48px) clamp(48px, 8vw, 88px); }
.studio__head { max-width: 62ch; }
.studio__head > * + * { margin-top: 12px; }
.studio__privacy { padding: 12px 16px; background: var(--sky-soft); border-radius: 12px; color: var(--brown-soft); font-size: 0.98rem; }
.studio__privacy strong { color: var(--brown); }
.studio__steps { margin: 4px 0 0 1.3em; padding: 0; display: grid; gap: 2px; }

.studio__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: clamp(24px, 4vw, 44px); margin-top: 36px; align-items: start; }
.stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--line); box-shadow: 0 2px 4px var(--shadow-1), 0 20px 34px -24px var(--shadow-2); }
.stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.stage canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.stage__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; color: var(--brown-soft); background: var(--cream); pointer-events: none; }
.stage__empty img { width: min(46%, 240px); height: auto; }
.stage__hint { margin-top: 10px; font-size: 0.9rem; color: var(--brown-soft); }

.preview { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.preview__circle { flex: none; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 1px var(--line); }
.preview__circle canvas { display: block; width: 100%; height: 100%; }
.preview__title { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; }
.preview__text { color: var(--brown-soft); font-size: 0.92rem; margin-top: 4px; }

.control { margin: 0 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.control legend { padding: 0 6px; font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; }
.control__row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.control__row--wrap { flex-wrap: wrap; }
.control__row--slider label { min-width: 44px; font-size: 0.92rem; color: var(--brown-soft); }
.control__row input[type="range"] { flex: 1; min-width: 80px; accent-color: var(--brown); }
.control__note { margin-top: 10px; font-size: 0.88rem; color: var(--brown-soft); }
.control--actions { background: var(--cream); }
.btn--icon { min-height: 40px; min-width: 40px; padding: 6px 12px; font-size: 1.1rem; background: var(--surface); border-color: var(--line); color: var(--brown); }
.btn--icon:hover { border-color: var(--gold); }
.btn--file { position: relative; overflow: hidden; }
.btn--file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btn--file:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.chip { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--brown); font-family: 'Karla', system-ui, sans-serif; font-size: 0.95rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.nudge { display: grid; grid-template-columns: repeat(4, 40px); gap: 6px; }
.frames { gap: 8px 14px; }
.frame-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.frame-opt input { accent-color: var(--brown); width: 18px; height: 18px; }
.frame-opt span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); }
.swatch--cream { background: #FBF3E4; } .swatch--sky { background: #BFE0EC; } .swatch--gold { background: #D9A052; }
.swatch--img { width: auto; height: 18px; border: 0; border-radius: 0; vertical-align: -4px; margin-right: 6px; }
.status { min-height: 1.4em; margin-top: 12px; font-size: 0.92rem; color: var(--brown-soft); }
.status--error { color: #A23B2A; }
.status--ok { color: #3E7A4B; }

.result { margin-top: 40px; }
.result__card { padding: clamp(24px, 4vw, 40px); background: var(--sky-soft); border-radius: var(--radius-lg); }
.result__card h2 { margin-top: 8px; }
.result__grid { display: grid; grid-template-columns: 256px 1fr; gap: 28px; align-items: start; margin-top: 20px; }
.result__grid img { width: 256px; height: 256px; border-radius: 50%; box-shadow: 0 2px 4px var(--shadow-1), 0 20px 34px -24px var(--shadow-2); }
.result__actions > * + * { margin-top: 12px; }
.result__actions label { display: block; font-size: 0.92rem; color: var(--brown-soft); }
.result__actions textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 0.98rem; resize: vertical; background: var(--surface); color: var(--brown); }

.studio__notes { margin-top: 44px; max-width: 68ch; }
.studio__notes h2 { font-size: var(--step-2); }
.studio__notes ul { margin-top: 12px; list-style: disc; padding-left: 1.2em; color: var(--brown-soft); display: grid; gap: 8px; }
.studio__notes a { color: var(--brown); }

/* --- responsive --- */
@media (max-width: 900px) {
  .studio__grid { grid-template-columns: 1fr; }
  .teaser { grid-template-columns: 1fr; }
  .growing { grid-template-columns: 1fr; }
  .shipped__list li { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cards2 { grid-template-columns: 1fr; }
  .result__grid { grid-template-columns: 1fr; }
  .result__grid img { margin: 0 auto; }
}
@media (max-width: 420px) {
  .nudge { grid-template-columns: repeat(4, 36px); }
  .teaser__demo { gap: 8px; }
}
/* short landscape screens (phones turned sideways): keep the square stage
   inside the viewport so the photo and the controls are both reachable */
@media (min-width: 640px) and (max-height: 560px) and (orientation: landscape) {
  .stage { max-width: min(560px, 74vh); }
  .studio__grid { grid-template-columns: minmax(0, auto) minmax(280px, 1fr); }
}
/* the header's X button must stay on one line even at 200% text size */
.nav .btn--small { white-space: nowrap; }
/* fieldsets default to min-inline-size: min-content and refuse to shrink; the
   control rows wrap instead, so a narrow column never overflows the viewport */
.control { min-inline-size: 0; }
.control__row { flex-wrap: wrap; }
@media (min-width: 640px) and (max-height: 560px) and (orientation: landscape) {
  .studio__grid { grid-template-columns: min(560px, 74vh) minmax(0, 1fr); }
}
/* the hidden attribute must beat any display rule (the stage's empty state is
   display:flex, and .result / .stage__empty are toggled with `hidden`) */
[hidden] { display: none !important; }

/* ------------------------------------------------------- homepage ants --- */
/* three tiny decorative visitors (js/ants.js). two overlays, no layout, no
   pointer events; the picture layer is clipped by the mascot's rounded box.
   legs and antennae are posed by the script, so nothing animates in CSS */
.potatcho-ants { position: absolute; pointer-events: none; display: block; overflow: visible; }
.potatcho-ants--image { inset: 0; width: 100%; height: 100%; overflow: hidden; }
.potatcho-ants--page { top: 0; left: 0; z-index: 5; }
.potatcho-ants[hidden] { display: none !important; }
.potatcho-ant { fill: #4A3423; stroke: #4A3423; }
.potatcho-ant__seg { fill: url(#potatcho-ant-seg); stroke: none; }
.potatcho-ant__sheen { fill: #FFFFFF; stroke: none; opacity: 0.16; }
.potatcho-ant__shadow { fill: url(#potatcho-ant-shadow); stroke: none; }
.potatcho-ant__leg path, .potatcho-ant__antenna path { fill: none; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.potatcho-ant__antenna path { stroke-width: 0.7; }
@media (prefers-reduced-motion: reduce) { .potatcho-ants { display: none !important; } }

/* Telegram links in the community section (2026-09-18) */
.telegram-links { text-align: center; margin-top: 40px; }
.telegram-links__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }
.telegram-links__row .btn { flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 14px 18px; }
.telegram-links__hint { display: block; font-size: .8rem; font-weight: 400; opacity: .75; }
.telegram-links__note { margin: 16px auto 0; max-width: 46ch; font-size: .9rem; color: var(--ink-soft, inherit); }

/* POTATCHO pre-launch information card. */
.launch { max-width: 640px; margin: 0 auto; padding: clamp(20px, 4vw, 30px); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius); text-align: center; }
.launch__eyebrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
.launch__pill { font-family: 'Space Mono', ui-monospace, monospace; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--gold-deep); }
.launch__title { margin-top: 6px; font-size: var(--step-2); }
.launch__label { margin-top: 6px; font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.launch__address-label { margin: 22px auto 8px; }
.launch__address { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 10px 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; color: var(--brown); font: 600 .88rem/1.55 'Space Mono', ui-monospace, monospace; }