@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Gochi+Hand&family=Quicksand:wght@400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Bo'Hou Design System — Fonts
   ------------------------------------------------------------
   Webfonts are loaded from Google Fonts (close matches to the
   original hand-lettered poster type). If you have the studio's
   real lettering files, drop the .woff2 into /assets/fonts and
   swap the @import below for local @font-face rules.

   Roles:
   - Fredoka      → display / headings / buttons (rounded, bubbly,
                    matches "THE HAINANESE COOKED" + title caps)
   - Gochi Hand   → storybook narration & playful captions
                    (felt-tip marker, matches "Meet Bo'Hou")
   - Quicksand    → body & UI copy (rounded, friendly, legible)
   ============================================================ */

/* ===== tokens/colors.css ===== */
/* ============================================================
   Bo'Hou Design System — Color
   Sampled directly from the Bo'Hou mascot & Grand Feast posters.
   Warm, sunny, playful — pastel lemon + marigold tiger + sky blue,
   with festive red / green / pink accents from the lion-dance face.
   ============================================================ */

:root {
  /* —— Brand core —————————————————————————————————— */
  --marigold:        #FDBB43;  /* Bo'Hou's body + title caps — PRIMARY */
  --marigold-deep:   #E89A1C;  /* pressed / shadow / on-light text */
  --marigold-soft:   #FED98A;  /* tints, fills, hover wash */
  --cream:           #FDE37F;  /* belly stripes, soft highlights */
  --lemon-mist:      #F8F9D5;  /* page background — the poster paper */
  --lemon-deep:      #EFF0BE;  /* alt background band */

  --sky:             #93CDEC;  /* secondary — poster body text blue */
  --sky-deep:        #4FA3D6;  /* sky pressed / links on light */
  --sky-soft:        #CFE9F7;  /* sky tint fills */

  /* —— Festive accents (lion-dance face) ——————————— */
  --tiger-red:       #EF3C3E;  /* the 王 mark + nose — alerts, hearts */
  --tiger-red-deep:  #C92A2C;
  --lucky-green:     #64B262;  /* swirl curls + leaves — success */
  --lucky-green-deep:#3F8A4D;
  --blossom:         #E99095;  /* cheek roses — soft accent, tags */
  --blossom-deep:    #D46B72;

  /* —— Ink & neutrals ————————————————————————————— */
  --ink:             #1F1A14;  /* warm near-black — outlines & text */
  --ink-soft:        #5C544A;  /* secondary text */
  --ink-faint:       #9A9183;  /* tertiary text, captions, disabled */
  --paper:           #FFFDF2;  /* card / surface white (warm) */
  --paper-2:         #FBF6E4;  /* sunken / hover surface */
  --hairline:        #E7E0CB;  /* warm borders & dividers */

  /* —— Semantic aliases ——————————————————————————— */
  --bg-page:         var(--lemon-mist);
  --bg-band:         var(--lemon-deep);
  --surface-card:    var(--paper);
  --surface-sunken:  var(--paper-2);

  --text-strong:     var(--ink);
  --text-body:       var(--ink-soft);
  --text-muted:      var(--ink-faint);
  --text-on-marigold:var(--ink);
  --text-on-sky:     var(--ink);
  --text-inverse:    var(--paper);

  --border-line:     var(--hairline);
  --border-ink:      var(--ink);     /* the signature hand-drawn outline */

  --accent-primary:  var(--marigold);
  --accent-secondary:var(--sky);
  --accent-festive:  var(--tiger-red);

  --state-success:   var(--lucky-green);
  --state-danger:    var(--tiger-red);
  --state-info:      var(--sky-deep);
  --state-warning:   var(--marigold-deep);

  /* focus ring */
  --ring: 0 0 0 4px color-mix(in srgb, var(--sky) 55%, transparent);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   Bo'Hou Design System — Typography
   Three voices: a bubbly display, a felt-tip storybook hand,
   and a rounded, child-legible body sans.
   ============================================================ */

:root {
  /* —— Families ———————————————————————————————————— */
  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;   /* headings, titles, buttons */
  --font-hand:    "Gochi Hand", "Comic Sans MS", cursive;             /* narration & playful accents */
  --font-body:    "Quicksand", "Trebuchet MS", system-ui, sans-serif; /* paragraphs & UI */

  /* —— Weights —————————————————————————————————————— */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */

  /* —— Fluid type scale (1.25 major-third-ish) ——————— */
  --fs-display:  clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem); /* @kind other */
  --fs-h1:       clamp(2rem, 1.3rem + 3.2vw, 3.25rem); /* @kind other */
  --fs-h2:       clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem); /* @kind other */
  --fs-h3:       clamp(1.3rem, 1.05rem + 1vw, 1.6rem); /* @kind other */
  --fs-lead:     clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); /* @kind other */
  --fs-body:     1.0625rem; /* @kind other */
  --fs-small:    0.9375rem; /* @kind other */
  --fs-tiny:     0.8125rem; /* @kind other */

  /* —— Line heights ———————————————————————————————— */
  --lh-tight:   1.04; /* @kind other */
  --lh-snug:    1.2;  /* @kind other */
  --lh-body:    1.6;  /* @kind other */
  --lh-hand:    1.45; /* @kind other */

  /* —— Tracking ———————————————————————————————————— */
  --ls-caps:    0.02em; /* @kind other */
  --ls-tight:  -0.01em; /* @kind other */
  --ls-normal:  0; /* @kind other */
}

/* —— Helper roles (optional utility classes) ——————————— */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-strong);
}
.t-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); }
.t-h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-snug); }
.t-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); }
.t-hand { font-family: var(--font-hand); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-hand); }
.t-body { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.t-small { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-small); line-height: var(--lh-body); }

/* ===== tokens/spacing.css ===== */
/* ============================================================
   Bo'Hou Design System — Spacing, Radii, Borders, Shadows
   Generous, rounded, hand-drawn. Everything is soft and bouncy.
   ============================================================ */

:root {
  /* —— Spacing scale (4px base) ———————————————————— */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */

  /* —— Radii — chunky & rounded, like the mascot ——— */
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-2xl: 44px;
  --radius-pill: 999px;
  --radius-blob: 62% 38% 55% 45% / 55% 50% 50% 45%; /* organic mascot-y blob */

  /* —— Borders — the signature hand-drawn ink outline —— */
  --border-w:        2.5px;   /* default outline weight */
  --border-w-bold:   3.5px;   /* emphasised / large elements */
  --border-w-hair:   1.5px;   /* dividers */
  --border-ink-line: var(--border-w) solid var(--ink);

  /* —— Shadows — soft, warm, NO grey; offset "sticker" look —— */
  --shadow-sm:  0 2px 0 0 var(--ink);                    /* flat sticker lip */
  --shadow-md:  0 4px 0 0 var(--ink);                    /* raised button */
  --shadow-lg:  0 6px 0 0 var(--ink);                    /* hero card */
  --shadow-soft: 0 8px 24px -8px color-mix(in srgb, var(--marigold-deep) 45%, transparent);
  --shadow-pop:  0 4px 0 0 var(--ink), 0 14px 28px -10px color-mix(in srgb, var(--marigold-deep) 50%, transparent);

  /* —— Motion — bouncy, friendly ————————————————— */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */

  /* —— Layout ————————————————————————————————————— */
  --container:    1160px; /* @kind spacing */
  --container-narrow: 760px; /* @kind spacing */
}

/* ===== tokens/base.css ===== */
/* ============================================================
   Bo'Hou Design System — Base / Reset
   Light, opinionated defaults so cards & kits look right.
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  margin: 0 0 0.4em;
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--sky-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

::selection { background: var(--marigold-soft); color: var(--ink); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== tokens/components.css ===== */
/* ============================================================
   Bo'Hou Design System — Component styles
   Class-based styles for the React primitives in /components.
   Shipped to consumers via styles.css so components stay
   logic-only (no injected <style>).
   ============================================================ */

/* —— Button ———————————————————————————————————————— */
.bh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-display); font-weight: 600; line-height: 1;
  color: var(--ink); background: var(--marigold);
  border: var(--border-w-bold) solid var(--ink);
  border-radius: var(--radius-pill);
  padding: .72em 1.35em; font-size: 1rem;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 0 0 var(--ink);
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.bh-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--ink); }
.bh-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--ink); }
.bh-btn:focus-visible { outline: none; box-shadow: 0 4px 0 0 var(--ink), var(--ring); }
.bh-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 0 var(--ink); }
.bh-btn--secondary { background: var(--sky); }
.bh-btn--festive  { background: var(--tiger-red); color: var(--paper); }
.bh-btn--ghost    { background: var(--paper); }
.bh-btn--sm { font-size: .85rem; padding: .55em 1em; }
.bh-btn--lg { font-size: 1.2rem; padding: .85em 1.7em; }
.bh-btn--block { display: flex; width: 100%; }
.bh-btn__icon { display: inline-flex; font-size: 1.1em; }

/* —— Badge —————————————————————————————————————————— */
.bh-badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  line-height: 1; letter-spacing: .01em;
  color: var(--ink); background: var(--marigold-soft);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-pill);
  padding: .4em .75em; white-space: nowrap;
}
.bh-badge--sky    { background: var(--sky-soft); }
.bh-badge--green  { background: color-mix(in srgb, var(--lucky-green) 30%, var(--paper)); }
.bh-badge--pink   { background: color-mix(in srgb, var(--blossom) 38%, var(--paper)); }
.bh-badge--red    { background: var(--tiger-red); color: var(--paper); }
.bh-badge--solid  { background: var(--marigold); }
.bh-badge--ghost  { background: var(--paper); }
.bh-badge__dot { width: .5em; height: .5em; border-radius: 999px; background: currentColor; }

/* —— Card ——————————————————————————————————————————— */
.bh-card {
  background: var(--surface-card);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 0 0 var(--ink);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.bh-card--flat { box-shadow: none; }
.bh-card--pop { box-shadow: var(--shadow-pop); }
.bh-card--interactive { cursor: pointer; transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base) var(--ease-out); }
.bh-card--interactive:hover { transform: translateY(-4px); box-shadow: 0 10px 0 0 var(--ink); }
.bh-card__media { background: var(--lemon-mist); display: grid; place-items: center; overflow: hidden; }
.bh-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.bh-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink); margin: 0; }
.bh-card__text { font-family: var(--font-body); font-weight: 500; font-size: .95rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* —— Input / Field ————————————————————————————————— */
.bh-field { display: flex; flex-direction: column; gap: .4em; font-family: var(--font-body); }
.bh-field__label { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink); }
.bh-field__hint { font-size: .8rem; color: var(--ink-faint); }
.bh-field__error { font-size: .8rem; color: var(--tiger-red-deep); font-weight: 600; }
.bh-input {
  font-family: var(--font-body); font-weight: 500; font-size: 1rem;
  color: var(--ink); background: var(--paper);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-md);
  padding: .7em .9em; width: 100%;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bh-input::placeholder { color: var(--ink-faint); }
.bh-input:focus { outline: none; box-shadow: var(--ring); }
.bh-input--error { border-color: var(--tiger-red); }
.bh-input[disabled] { opacity: .55; cursor: not-allowed; background: var(--paper-2); }

/* —— StampSpot ————————————————————————————————————— */
.bh-stamp {
  width: var(--_size, 96px); height: var(--_size, 96px);
  position: relative; display: inline-grid; place-items: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700;
  transition: transform var(--dur-base) var(--ease-bounce);
  -webkit-tap-highlight-color: transparent; background: none; border: 0; padding: 0;
}
.bh-stamp[data-clickable="true"] { cursor: pointer; }
.bh-stamp[data-clickable="true"]:hover { transform: rotate(-4deg) scale(1.04); }
.bh-stamp--empty {
  color: var(--ink-faint);
  border: var(--border-w) dashed var(--ink-faint);
  background: var(--paper);
}
.bh-stamp--empty .bh-stamp__num { font-size: calc(var(--_size, 96px) * .34); }
.bh-stamp--done {
  background: var(--marigold);
  border: var(--border-w-bold) solid var(--ink);
  box-shadow: 0 4px 0 0 var(--ink);
  color: var(--ink);
}
.bh-stamp__icon { width: 62%; height: 62%; object-fit: contain; }
.bh-stamp__label {
  position: absolute; bottom: -1.5em; left: 50%; transform: translateX(-50%);
  font-family: var(--font-body); font-weight: 600; font-size: .72rem;
  color: var(--ink-soft); white-space: nowrap;
}
.bh-stamp__tick {
  position: absolute; top: -6px; right: -6px;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--lucky-green); border: 2.5px solid var(--ink);
  display: grid; place-items: center; color: var(--paper); font-size: 15px;
}

/* —— ProgressTrail ————————————————————————————————— */
.bh-trail { font-family: var(--font-body); display: flex; flex-direction: column; gap: .55em; }
.bh-trail__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.bh-trail__label { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1rem; }
.bh-trail__count { font-family: var(--font-display); font-weight: 700; color: var(--marigold-deep); font-size: 1rem; }
.bh-trail__track {
  position: relative; height: 18px; border-radius: var(--radius-pill);
  background: var(--paper); border: var(--border-w) solid var(--ink);
  overflow: hidden;
}
.bh-trail__fill {
  height: 100%; background: var(--marigold);
  border-right: var(--border-w) solid var(--ink);
  transition: width var(--dur-slow) var(--ease-bounce);
}
.bh-trail__fill[data-full="true"] { border-right: 0; }
.bh-trail__dots { display: flex; justify-content: space-between; margin-top: .3em; }
.bh-trail__dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--paper); border: 2px solid var(--ink);
}
.bh-trail__dot[data-on="true"] { background: var(--tiger-red); }
.bh-trail__done { font-family: var(--font-hand); color: var(--lucky-green-deep); font-size: 1.05rem; }

/* ===== site/site.css ===== */
/* ============================================================
   Bo'Hou & the Grand Feast — Website
   Site-specific styles, built on the design system (styles.css).
   ============================================================ */


body { margin: 0; background: var(--lemon-mist); color: var(--ink); }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { padding: 64px 0; }

/* —— Nav ———————————————————————————————————————————— */
.nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--lemon-mist) 90%, transparent); backdrop-filter: blur(8px); border-bottom: var(--border-w) solid var(--ink); }
.nav__in { display: flex; align-items: center; gap: 16px; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 44px; }
.brand small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; }
.nav__links { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.nav__links a { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); padding: 9px 15px; border-radius: var(--radius-pill); text-decoration: none; }
.nav__links a:hover { background: var(--marigold-soft); text-decoration: none; }
.nav__links a[aria-current="page"] { background: var(--marigold); }

/* —— Hero ——————————————————————————————————————————— */
.hero { position: relative; overflow: hidden; }
.hero__in { display: grid; grid-template-columns: 1.12fr .88fr; gap: 30px; align-items: center; padding: 54px 24px 60px; max-width: var(--container); margin: 0 auto; }
.eyebrow { font-family: var(--font-display); font-weight: 600; color: var(--sky-deep); letter-spacing: .04em; text-transform: uppercase; font-size: 15px; margin: 0 0 10px; }
.hero h1 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.4rem); line-height: .98; letter-spacing: .01em; color: var(--marigold-deep); margin: 0 0 16px; }
.hero h1 b { color: var(--ink); display: block; }
.hero__lead { font-family: var(--font-hand); font-size: 24px; line-height: 1.4; color: var(--ink-soft); margin: 0 0 34px; max-width: 30rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__art { position: relative; display: grid; place-items: center; }
.hero__art img.star { width: min(100%, 400px); filter: drop-shadow(0 18px 30px rgba(232,154,28,.4)); animation: bob 4s var(--ease-out) infinite; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-12px) rotate(1deg)} }
.blob { position: absolute; inset: 6% 2%; background: var(--sky-soft); border-radius: var(--radius-blob); border: var(--border-w) solid var(--ink); z-index: -1; }

/* —— Section heads —————————————————————————————————— */
.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head .eyebrow { color: var(--marigold-deep); }
.sec-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,1.4rem+2vw,2.8rem); text-transform: uppercase; margin: 0; }
.sec-head p { font-family: var(--font-hand); font-size: 20px; color: var(--ink-soft); margin: 12px auto 0; max-width: 60ch; }

/* —— Countdown —————————————————————————————————————— */
.countdown { background: var(--paper); border-top: var(--border-w) solid var(--ink); border-bottom: var(--border-w) solid var(--ink); }
.cd-card { max-width: 880px; margin: 0 auto; text-align: center; }
.cd-card .kicker { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sky-deep); font-size: 15px; margin: 0 0 6px; }
.cd-card h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.8rem,1.3rem+1.8vw,2.6rem); margin: 0 0 6px; }
.cd-card .when { font-family: var(--font-hand); font-size: 22px; color: var(--ink-soft); margin: 0 0 32px; }
.cd-grid { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cd-unit { width: 132px; }
.cd-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 1.6rem + 3vw, 4rem); line-height: 1; color: var(--ink); background: var(--marigold); border: var(--border-w-bold) solid var(--ink); border-radius: var(--radius-lg); box-shadow: 0 6px 0 0 var(--ink); padding: 22px 0 18px; font-variant-numeric: tabular-nums; }
.cd-unit:nth-child(2) .cd-num { background: var(--sky); }
.cd-unit:nth-child(3) .cd-num { background: var(--blossom); }
.cd-unit:nth-child(4) .cd-num { background: var(--cream); }
.cd-label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.cd-live { margin-top: 30px; font-family: var(--font-hand); font-size: 24px; color: var(--lucky-green-deep); }
.cd-desc { max-width: 620px; margin: 28px auto 0; text-align: center; font-family: var(--font-body); font-weight: 500; font-size: 17px; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }

/* —— Feature / info bands ——————————————————————————— */
.band { background: var(--paper); border-top: var(--border-w) solid var(--ink); border-bottom: var(--border-w) solid var(--ink); }
.band__in { display: grid; grid-template-columns: 220px 1fr; gap: 38px; align-items: center; padding: 48px 24px; max-width: var(--container); margin: 0 auto; }
.band img { width: 100%; }
.band__in img { }
@media (prefers-reduced-motion: reduce) { .band__in img { animation: none; } }
.band h2 { font-family: var(--font-display); font-size: 34px; margin: 0 0 12px; }
.band p { font-family: var(--font-hand); font-size: 22px; line-height: 1.45; color: var(--ink-soft); margin: 0 0 14px; max-width: 60ch; }
.zh { color: var(--marigold-deep); }

/* —— Card grids ————————————————————————————————————— */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tile { background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: 0 6px 0 0 var(--ink); padding: 26px 24px; }
.tile h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0 0 8px; }
.tile p { font-family: var(--font-body); font-weight: 500; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.tile .pin { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); border: var(--border-w) solid var(--ink); margin-bottom: 16px; }
.tile .pin img { width: 34px; }

/* —— Team —————————————————————————————————————————— */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.member { background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: 0 6px 0 0 var(--ink); overflow: hidden; text-align: center; }
.member__top { height: 150px; display: grid; place-items: center; border-bottom: var(--border-w) solid var(--ink); }
.member__top img { height: 120px; }
.member__body { padding: 20px; }
.member__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 2px; }
.member__role { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--marigold-deep); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }
.member a { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: var(--sky-deep); word-break: break-all; }

/* —— Contact ———————————————————————————————————————— */
.contact-page .sec-head h2 { color: var(--marigold-deep); }
.contact-page .sec-head p { font-family: 'Quicksand', var(--font-body); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.contact-single { max-width: 620px; margin: 0 auto; }
.form-card { background: var(--paper); border: var(--border-w-bold) solid var(--ink); border-radius: var(--radius-2xl); box-shadow: var(--shadow-pop); padding: 32px 32px 36px; }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-row label { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.form-row input, .form-row textarea, .form-row select {
  font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--ink);
  background: var(--lemon-mist); border: var(--border-w) solid var(--ink); border-radius: var(--radius-md);
  padding: 12px 14px; width: 100%; box-sizing: border-box;
}
.form-row textarea { resize: vertical; min-height: 130px; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; box-shadow: var(--ring); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-status { margin-top: 14px; font-family: var(--font-hand); font-size: 19px; min-height: 24px; }
.form-card form > button[type="submit"] { width: 100%; justify-content: center; }
.form-status[data-state="ok"] { color: var(--lucky-green-deep); }
.form-status[data-state="err"] { color: var(--tiger-red-deep); }

.info-list { display: flex; flex-direction: column; gap: 16px; }
.info-item { display: flex; gap: 14px; align-items: flex-start; background: var(--paper); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: 0 4px 0 0 var(--ink); padding: 18px 20px; }
.info-item .ic { width: 44px; height: 44px; border-radius: var(--radius-pill); border: var(--border-w) solid var(--ink); display: grid; place-items: center; flex: none; background: var(--marigold-soft); }
.info-item .ic img { width: 26px; }
.info-item h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0 0 4px; }
.info-item p, .info-item a { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.info-item a { color: var(--sky-deep); display: block; word-break: break-all; }

/* —— About Us ———————————————————————————————————————— */
.about-us { background: var(--ink); color: var(--paper); padding: 72px 0; }
.about-us__in { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 760px; }
.about-us__head { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem,1.4rem+2vw,2.8rem); color: var(--sky); margin: 0; text-align: center; }
.about-us__photo { margin: 0; width: 100%; max-width: 460px; }
.about-us__photo img { width: 100%; display: block; border-radius: var(--radius-2xl); border: var(--border-w-bold) solid var(--paper); }
.about-us__copy { display: flex; flex-direction: column; gap: 18px; text-align: center; }
.about-us__copy p { font-family: var(--font-body); font-weight: 500; font-size: 19px; line-height: 1.75; color: var(--paper); margin: 0; text-wrap: pretty; }
.about-us__copy a { color: var(--marigold); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) {
  .about-us__in { gap: 32px; }
}

/* —— Coming-soon pages ———————————————————————————————— */
.soon { padding: 80px 0 96px; }
.soon__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; max-width: 720px; margin: 0 auto; }
.soon__art { width: min(100%, 440px); margin: 0; }
.soon__art img { width: 100%; height: auto; display: block; }
.soon__msg { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); color: var(--ink); margin: 0; }
@media (max-width: 860px) {
  .soon { padding: 56px 0 64px; }
}

/* —— FAQ ———————————————————————————————————————————— */
.faq { background: var(--paper); border-top: var(--border-w) solid var(--ink); border-bottom: var(--border-w) solid var(--ink); }
.faq__in { max-width: 820px; margin: 0 auto; padding: 64px 24px; }
.faq__list { display: flex; flex-direction: column; gap: 14px; }
.faq__item { background: var(--lemon-mist); border: var(--border-w) solid var(--ink); border-radius: var(--radius-lg); overflow: hidden; }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; cursor: pointer; background: none; border: 0; padding: 20px 24px; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); }
.faq__q::after { content: "+"; flex: none; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--marigold-deep); transition: transform .2s var(--ease-out); }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q::-webkit-details-marker { display: none; }
.faq__a { padding: 0 24px 22px; font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.faq__a a { color: var(--marigold-deep); font-weight: 600; }

/* —— Footer ————————————————————————————————————————— */
/* Sticky-footer layout: body fills the viewport so the footer sits at the
   very bottom even when a page's content is short (no empty band below it). */
body { min-height: 100vh; display: flex; flex-direction: column; }
.foot { background: var(--ink); color: var(--paper); padding: 40px 0; margin-top: auto; }
.foot__in { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.foot .brand { color: var(--paper); }
.foot .brand small { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.foot__links { display: flex; gap: 18px; }
.foot__links a { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--paper); }
.foot__note { font-family: var(--font-body); font-size: 13px; color: color-mix(in srgb, var(--paper) 70%, transparent); width: 100%; margin-top: 8px; }

/* Partner logos strip */
.foot__partners { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 20px; margin-top: 24px; }
.foot__partners-label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: color-mix(in srgb, var(--paper) 75%, transparent); margin: 0; }
.foot__logos { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.foot__logos img { height: 40px; width: auto; display: block; background: #fff; border-radius: var(--radius-md); padding: 12px 18px; box-sizing: content-box; }

/* —— Responsive ————————————————————————————————————— */
@media (max-width: 880px) {
  .hero__in, .band__in, .contact-grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; margin-bottom: 8px; }
  .band__in { justify-items: center; text-align: center; }
  .band__in img { max-width: 280px; margin: 0 auto; transform: translateX(-7%); }
  .band p { margin-left: auto; margin-right: auto; }
  .grid-3, .team-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .nav__links a:not(.cta) { display: none; }
  .foot__in { flex-direction: column; align-items: flex-start; gap: 22px; }
  .foot__links { flex-direction: column; gap: 14px; }
}