/* ==========================================================================
   Potatchi — 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; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: 'Karla', 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; }

.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); }

/* ------------------------------------------------------------------ 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); }

@media (max-width: 800px) {
  .nav__links { display: none; }
}

/* ----------------------------------------------------------------- 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); }

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { 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;
  align-items: center;
  justify-content: center;
  padding: 20px;
  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%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 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__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; }
.gate__card .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ----------------------------------------------------------------- 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 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); }

@media (max-width: 800px) {
  .docs__body { grid-template-columns: 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 { opacity: 1; transform: 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; }
}