/* The Butler Club: one stylesheet for every page. No external requests: fonts are served from /assets/fonts.
   Colours are the eatslips app's (src/theme/colors.ts); the hero purple #6A4BD6 is the only one from outside it.
   The CSP allows no script, so every motion is CSS, and the un-animated state of every element is the finished
   scene: prefers-reduced-motion just switches the animations off. */

@font-face { font-family: "Kodchasan"; src: url("/assets/fonts/Kodchasan-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Kodchasan"; src: url("/assets/fonts/Kodchasan-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Mali"; src: url("/assets/fonts/Mali-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #FBF8FF; --surface: #FFFFFF; --surface-alt: #F2ECFD; --line: #E7DFF6; --edge: #CBBFE8;
  --ink: #2B2140; --soft: #5F547A; --accent: #5A3EC2; --primary: #B9A3F8; --primary-lip: #8E72E3; --primary-soft: #EDE6FF;
  --bubble: #FFFFFF; --leaf: #C4EFA4; --leaf-soft: #E3F7D5; --leaf-ink: #2C681A; --leaf-line: #3C7F29;
  --pink-soft: #FFE8EE; --pink-ink: #A5173F; --sky-soft: #E4F2FF; --butter: #FFE08C; --butter-soft: #FFF5D2;
  --hero: #6A4BD6; --hero-deep: #5A3EC2; --hero-glow: #8E72E3; --hero-ring: #3E2A9A;
  --blk-eatie: #FFE08C; --blk-next: #A8D8FF; --blk-how: #DCD3FF; --blk-ink: #2B2140; --blk-soft: #5F547A;
  --mood-sleep: #DCD3FF; --mood-wake: #FFEDB0; --mood-eat: #FFDDC7; --mood-done: #CBF1E0;
  --z: #5A3EC2; --wm: rgb(43 33 64 / .07); --grain: #7C6EA3; --grain-o: .16; --floor: rgb(43 33 64 / .14); --focus: #5A3EC2;
  --edge-card: url("/assets/crayon/edge-card-7c6ea3.png"); --edge-pill: url("/assets/crayon/edge-pill-7c6ea3.png");
  --edge-btn: url("/assets/crayon/edge-pill-7a5cd6.png"); --bar: url("/assets/crayon/bar-ffe08c.png");
  --door: #E4F2FF; --door-line: #7C6EA3; --curtain-a: #8E72E3; --curtain-b: #7A5CD6;
  --card-lip: #EDB940; --chip: rgb(255 255 255 / .6); --chip-on: #FFFFFF;
  --swell: cubic-bezier(.37, 0, .63, 1); --out: cubic-bezier(.5, 1, .89, 1); --pop: cubic-bezier(.3, 1.6, .6, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1626; --surface: #2A2440; --surface-alt: #362E54; --line: #463D68; --edge: #6B6095;
    --ink: #F5F0FF; --soft: #C8BEE0; --accent: #CDBDFF; --primary-lip: #7F64D6; --primary-soft: #40347A;
    --bubble: #E6DEFF; --leaf-soft: #2A4620; --leaf-ink: #C4EFA4; --leaf-line: #C4EFA4;
    --pink-soft: #55263A; --pink-ink: #FFB6C6; --sky-soft: #22405F; --butter-soft: #4B3F19;
    --blk-eatie: #4F3A60; --blk-next: #22405F; --blk-how: #352C66; --blk-ink: #F5F0FF; --blk-soft: #C8BEE0;
    --mood-sleep: #352C66; --mood-wake: #4F3A60; --mood-eat: #63344A; --mood-done: #1E4A3A;
    --z: #CDBDFF; --wm: rgb(255 255 255 / .06); --grain: #FFFFFF; --grain-o: .10; --floor: rgb(8 6 14 / .45); --focus: #CDBDFF;
    --edge-card: url("/assets/crayon/edge-card-9c90c2.png"); --edge-pill: url("/assets/crayon/edge-pill-9c90c2.png");
    --edge-btn: url("/assets/crayon/edge-pill-b9a3f8.png"); --bar: url("/assets/crayon/bar-7f64d6.png");
    --door: #2A2440; --door-line: #9C90C2; --curtain-a: #40347A; --curtain-b: #362E54;
    --card-lip: #2B2140; --chip: #2A2440; --chip-on: #40347A;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 17px/1.75 "Kodchasan", -apple-system, "Sukhumvit Set", "Noto Sans Thai", system-ui, sans-serif;
}
a { color: var(--accent); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.hand { font-family: "Mali", "Kodchasan", system-ui, sans-serif; font-weight: 700; line-height: 1.35; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ─── header / documents ─────────────────────────────────────────────────── */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding: 12px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; white-space: nowrap; }
.brand img { width: 28px; height: 28px; flex: none; }
.top nav { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 15px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }

.doc h1 { font-size: 30px; margin: 24px 0 4px; }
.doc h2 { font-size: 20px; margin: 28px 0 6px; }
.doc .meta { color: var(--soft); font-size: 14px; }
.doc ul { padding-left: 20px; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }

@media (max-width: 420px) {
  .top nav { gap: 0 12px; font-size: 14px; }
}

/* ─── shared pieces ──────────────────────────────────────────────────────── */
.bleed { position: relative; width: 100%; overflow: hidden; }
.bleed > .wrap { position: relative; z-index: 1; }
.wordmark { font-family: "Mali", "Kodchasan", system-ui, sans-serif; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; margin: 0; }

/* scalloped seams: a strip painted in the neighbour's colour with see-through half circles */
.deco { position: absolute; inset: 0; pointer-events: none; z-index: 2; --r: 16px; }
.deco::before, .deco::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--r);
  background-size: calc(2 * var(--r)) var(--r); background-repeat: repeat-x; background-position: 50% 0;
}
.seam-t::before { top: 0; background-image: radial-gradient(circle at 50% 100%, #0000 calc(var(--r) - .5px), var(--seam-t) var(--r)); }
.seam-b::after { bottom: 0; background-image: radial-gradient(circle at 50% 0, #0000 calc(var(--r) - .5px), var(--seam-b) var(--r)); }

.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain); opacity: var(--grain-o);
  -webkit-mask: url("/assets/crayon/paper-grain.png") 0 0 / 64px 64px repeat; mask: url("/assets/crayon/paper-grain.png") 0 0 / 64px 64px repeat;
}

/* crayon edges from the app's own PNGs (9-slice): cards are radius 24 and 68px+ tall, pills 16-22 and 44px+ */
.crayon { position: relative; }
.crayon::after, .btn::after {
  content: ""; position: absolute; inset: -3px; pointer-events: none;
  border: 34px solid transparent; border-image: var(--edge-card) 102 / 34px stretch;
}
.bubble.crayon::after, .btn::after { border-width: 22px; border-image: var(--edge-pill) 66 / 22px stretch; }
.btn::after { border-image-source: var(--edge-btn); }

/* crayon underline, three-slice; the .35em keeps it clear of ุ and ู */
.under { position: relative; display: inline-block; padding-bottom: .35em; isolation: isolate; }
.under::after {
  content: ""; position: absolute; left: -4px; right: -6px; bottom: 0; height: 14px; z-index: -1;
  border-style: solid; border-width: 0 14px; border-image: var(--bar) 0 42 fill / 0 14px stretch;
}

.spark {
  position: absolute; aspect-ratio: 1; background: var(--c, #fff);
  -webkit-mask: url("/assets/deco/sparkle.svg") center / contain no-repeat; mask: url("/assets/deco/sparkle.svg") center / contain no-repeat;
  animation: twinkle 1.8s var(--swell) infinite alternate;
}

/* candy button: a face and a 4px lip, the app's CandyButton */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px;
  border-radius: 18px; background: var(--primary); color: #2B2140; font: 700 17px/1.4 "Mali", "Kodchasan", system-ui, sans-serif;
  text-decoration: none; box-shadow: 0 4px 0 var(--primary-lip); transition: translate 110ms var(--out), box-shadow 110ms var(--out);
}
.btn:active { translate: 0 4px; box-shadow: 0 0 0 var(--primary-lip); transition-duration: 60ms; }
.btn-white { background: #fff; color: #5A3EC2; --primary-lip: #3E2A9A; }
.btn-white::after { content: none; }
.btn-charm { margin-left: 8px; }
.btn-charm::before {
  content: ""; position: absolute; left: -14px; top: -12px; width: 30px; height: 30px; rotate: -18deg;
  background: url("/assets/bowtie.svg") center / contain no-repeat;
}

/* speech bubble: the app's SpeechBubble (radius 22, 16px tail turned 45deg) */
.bubble {
  position: relative; margin: 0; padding: 10px 18px; border-radius: 22px; background: var(--bubble); color: #2B2140;
  font: 700 16px/1.6 "Mali", "Kodchasan", system-ui, sans-serif; white-space: nowrap;
}
.bubble::before {
  content: ""; position: absolute; left: calc(50% - 8px); bottom: -6px; width: 16px; height: 16px;
  border-radius: 3px; background: inherit; rotate: 45deg;
}

.pill { display: inline-block; padding: 4px 16px; border-radius: 999px; font: 700 15px/1.6 "Kodchasan", system-ui, sans-serif; }
.pill-leaf { background: var(--leaf-soft); color: var(--leaf-ink); }
.pill-soon { background: var(--surface-alt); color: var(--soft); }

.eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--soft);
  font: 700 16px/1.5 "Mali", "Kodchasan", system-ui, sans-serif; }
.eyebrow img { width: 18px; height: 18px; }

/* sticker outline: a ring of hard text-shadows behind the letters, never a text stroke (it fills Thai loops) */
.sticker-text { --ring: var(--hero-ring); --drop: var(--hero-ring); text-shadow:
  0 -.05em 0 var(--ring), .035em -.035em 0 var(--ring), .05em 0 0 var(--ring), .035em .035em 0 var(--ring),
  0 .05em 0 var(--ring), -.035em .035em 0 var(--ring), -.05em 0 0 var(--ring), -.035em -.035em 0 var(--ring), 0 .11em 0 var(--drop); }
.member.eatie .sticker-text { --ring: #fff; --drop: #EDB940; }
.member.how .sticker-text { --ring: #fff; --drop: #B9A3F8; }
@media (prefers-color-scheme: dark) {
  .member.eatie .sticker-text, .member.how .sticker-text { --ring: #2B2140; --drop: #1A1626; }
}

/* tap to poke: details/summary, so a tap is real state and screen readers hear expanded / collapsed */
.poke { position: relative; }
.poke summary { display: block; list-style: none; cursor: pointer; border-radius: 24px; }
.poke summary::-webkit-details-marker { display: none; }
.poke summary img { transform-origin: 50% 96.8%; }
.poke[open] summary img { animation: squish 450ms var(--out); }
.poke .say { position: absolute; bottom: 100%; left: 50%; translate: -50% 0; z-index: 3;
  transform-origin: 50% 100%; animation: pop 300ms var(--pop) both;
  animation-timing-function: linear(0, .36 8%, .78 18%, 1.06 30%, 1.12 38%, 1.06 50%, .98 62%, 1.01 76%, 1); }

/* ─── home hero ──────────────────────────────────────────────────────────── */
.club-hero { --focus: #FFE08C; background: var(--hero); color: #fff; }
.club-hero .top a, .club-hero .brand { color: #fff; }
.club-hero .brand img, .club-hero .kicker img { filter: brightness(0) invert(1); }
.club-hero > .wrap { max-width: 1040px; }
.club-hero .inner { position: relative; min-height: clamp(460px, 78vw, 640px); padding-bottom: 72px; }
.club-hero .deco { z-index: 2; }
.club-hero .deco::after {
  content: ""; bottom: -1px; height: clamp(36px, 7vw, 64px); background-size: auto;
  background-image: radial-gradient(62% 100% at 18% 100%, var(--bg) 98%, #0000 100%), radial-gradient(58% 86% at 84% 100%, var(--bg) 98%, #0000 100%);
}
.hero-copy { position: relative; z-index: 1; max-width: 55%; }
.club-hero .kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 14px; padding: 4px 14px 4px 10px; border-radius: 18px;
  background: var(--hero-deep); color: #fff; font-size: 15px; line-height: 1.6;
}
.club-hero .kicker img { width: 18px; height: 18px; flex: none; }
.club-hero .wordmark { font-size: clamp(54px, 11vw, 104px); color: #fff; }
.club-hero .lede { max-width: 30em; margin: 20px 0 24px; font-size: 18px; color: #fff; }

.hero-art { position: absolute; right: -6%; bottom: -12px; width: clamp(300px, 50vw, 460px); aspect-ratio: 420 / 385; }
.hero-art > * { position: absolute; }
.hero-art .glow { inset: 10% 5% 0; border-radius: 50%; background: radial-gradient(closest-side, var(--hero-glow), #0000); }
.hero-art .peek { inset: 0; width: 100%; height: 100%; transform-origin: 50% 96.8%; rotate: -8deg;
  animation: peek 3.6s var(--swell) infinite alternate; }
.hero-art .prop { rotate: var(--r); animation: drift 6s var(--swell) infinite alternate; }
.hero-art .p1 { left: 0; top: 6%; width: 12%; --r: -18deg; }
.hero-art .p2 { left: 22%; top: -4%; width: 13%; --r: 12deg; animation-delay: -1.5s; }
.hero-art .k1 { right: 20%; top: 0; width: 7%; --c: var(--butter); }
.hero-art .k2 { left: 1%; top: 30%; width: 5%; --c: #fff; animation-delay: -.9s; }
.hero-art .moon { display: none; right: 8%; top: 2%; width: 10%; animation: moonrise 1.4s var(--out) both; }
@media (prefers-color-scheme: dark) {
  .hero-art .moon { display: block; }
  .hero-art .k2 { display: none; }
}

@media (max-width: 640px) {
  .club-hero .inner { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
  .hero-copy { max-width: none; }
  .hero-art { position: relative; right: auto; bottom: auto; width: 90%; margin: 4px -16% -10px auto; }
  .hero-art .moon { right: auto; left: 46%; top: -2%; }
}

/* ─── quiet sections ─────────────────────────────────────────────────────── */
.overview { text-align: center; padding-top: 32px; }
.overview h2 { font-size: clamp(22px, 6.4vw, 28px); color: var(--accent); margin: 0 0 14px; }
.overview p { max-width: 36em; margin: 0 auto 12px; color: var(--soft); }
.spark-pair { position: relative; display: inline-block; }
.spark-pair::before, .spark-pair::after {
  content: ""; position: absolute; top: -8px; width: 16px; height: 16px; background: #FF9FB6;
  -webkit-mask: url("/assets/deco/sparkle.svg") center / contain no-repeat; mask: url("/assets/deco/sparkle.svg") center / contain no-repeat;
  animation: twinkle 1.8s var(--swell) infinite alternate;
}
.spark-pair::before { right: calc(100% + 14px); }
.spark-pair::after { left: calc(100% + 14px); background: #EDB940; animation-delay: -1.2s; }
@media (max-width: 359px) { .spark-pair::before, .spark-pair::after { display: none; } }

/* member lineup: a roll call of ring portraits on a dotted arc */
.lineup { padding-top: 40px; }
.lineup .row { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(20px, 8vw, 80px); padding-top: 72px; }
.lineup .row::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 40px; height: 200px; pointer-events: none;
  border-top: 3px dotted var(--edge); border-radius: 50% / 100% 100% 0 0;
}
.lineup figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.lineup .m2 { margin-bottom: 18px; }
.ring { position: relative; width: clamp(140px, 38vw, 200px); aspect-ratio: 1; border-radius: 50%; isolation: isolate; }
.ring::before { content: ""; position: absolute; left: 15%; width: 70%; bottom: -14px; height: 10px; border-radius: 50%; background: var(--floor); z-index: -1; }
.m1 .ring { background: var(--leaf-soft); }
.m1 .ring::after {
  content: ""; position: absolute; inset: -9px; z-index: -1; background: var(--leaf-line); opacity: .5;
  -webkit-mask: url("/assets/crayon/loop.png") 0 0 / 100% 100% no-repeat; mask: url("/assets/crayon/loop.png") 0 0 / 100% 100% no-repeat;
}
.lineup .poke { position: absolute; left: -6%; width: 112%; bottom: 6%; z-index: 1; }
.lineup .poke summary { border-radius: 50%; }
.lineup .eatie { width: 100%; height: auto; animation: sway 800ms var(--swell) -400ms infinite alternate; }
.lineup .poke[open] summary img { animation: squish 450ms var(--out), sway 800ms var(--swell) -400ms infinite alternate; }
.lineup .say { bottom: calc(100% + 4px); }
.badge {
  position: absolute; top: -6px; right: -8px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 3px solid #fff; background: var(--butter); color: #2B2140; rotate: 12deg;
  font: 700 15px/1 "Mali", "Kodchasan", system-ui, sans-serif;
}
.badge-soon { background: var(--surface-alt); color: var(--soft); border: 2px dashed var(--soft); }
.ring-dashed { border: 3px dashed var(--soft); }
.silhouette {
  display: grid; place-items: center; border: 3px dashed var(--soft); border-radius: 48% 48% 22% 22%;
  color: var(--soft); font: 700 clamp(34px, 9vw, 52px)/1 "Mali", system-ui, sans-serif;
}
.ring-dashed .silhouette { position: absolute; left: 22%; width: 56%; bottom: 9%; height: 74%; animation: wait 3.2s var(--swell) infinite; }

/* promise: a receipt with a torn edge, น้องอีท standing on top */
.promise { padding-top: 32px; }
.receipt-wrap { position: relative; max-width: 520px; margin: 88px auto 0; }
.perch { position: absolute; top: -82px; right: 18px; width: 96px; height: auto; z-index: 1; transform-origin: 50% 96.8%;
  animation: breathe 2.4s var(--swell) infinite alternate; }
.paper { rotate: .8deg; filter: drop-shadow(0 4px 0 var(--edge)) drop-shadow(1.5px 0 0 var(--edge)) drop-shadow(-1.5px 0 0 var(--edge)) drop-shadow(0 -1.5px 0 var(--edge)); }
.receipt {
  --z: 10px; position: relative; background: var(--surface); color: var(--ink); padding: 28px 22px calc(22px + var(--z)); border-radius: 20px 20px 0 0;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--z)) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(2 * var(--z)) var(--z) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--z)) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(2 * var(--z)) var(--z) repeat-x;
}
.receipt h2 { font-size: 24px; margin: 0 0 6px; padding-right: 92px; }
.receipt ul { list-style: none; padding: 0; margin: 0; }
.receipt li { position: relative; padding: 10px 0 10px 34px; border-top: 1.5px dashed var(--line); }
.receipt li:first-child { border-top: 0; }
.receipt li::before { content: ""; position: absolute; left: 0; top: calc(10px + .45em); width: 22px; height: 22px;
  background: url("/assets/props/check.svg") center / contain no-repeat; }

/* ─── member blocks ──────────────────────────────────────────────────────── */
.member .inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; padding-top: 64px; padding-bottom: 64px; min-height: 440px; }
.member.flip .art { order: -1; }
.member .art { display: grid; place-items: center; }
.member .wordmark { font-size: clamp(52px, 11vw, 96px); }
.member .spirit { font: 700 clamp(20px, 4vw, 26px)/1.4 "Mali", system-ui, sans-serif; margin: 10px 0 16px; }
.member.eatie { background: var(--blk-eatie); color: var(--blk-ink); }
.member.eatie .deco { --seam-t: var(--bg); --seam-b: var(--blk-next); }
.member.next { background: var(--blk-next); color: var(--blk-ink); }
.member.next .deco { --seam-b: var(--bg); }
.member.how { background: var(--blk-how); color: var(--blk-ink); }
.member.how .deco { --seam-b: var(--bg); }
.member:not(.app-hero) { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* big faint น้องอีท behind a block, on the art's side; a mask so it reads in dark mode too */
.watermark::before {
  content: ""; position: absolute; pointer-events: none; width: clamp(420px, 95vw, 900px); aspect-ratio: 1;
  right: -18%; top: 50%; translate: 0 -50%; rotate: -10deg; background: var(--wm);
  -webkit-mask: url("/assets/eatie-mark-mask.svg") center / contain no-repeat; mask: url("/assets/eatie-mark-mask.svg") center / contain no-repeat;
}

/* member ID card */
.id-card {
  margin: 22px 0 28px; padding: 18px 20px; border-radius: 24px; background: var(--bubble); color: #2B2140;
  rotate: -1.5deg; box-shadow: 0 4px 0 var(--card-lip); transition: rotate 200ms var(--out), translate 200ms var(--out);
}
.id-card::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 84px; height: 22px; translate: -50% 0; rotate: -4deg;
  background: repeating-linear-gradient(45deg, rgb(255 159 182 / .75) 0 6px, rgb(255 232 238 / .75) 6px 12px);
}
.id-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 700 16px/1.5 "Mali", "Kodchasan", system-ui, sans-serif; }
.id-head img { width: 36px; height: 36px; border-radius: 10px; }
.id-card dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; font-size: 16px; line-height: 1.6; }
.id-card dt { color: #5A3EC2; font-weight: 700; padding: 6px 14px 6px 0; }
.id-card dd { margin: 0; padding: 6px 0; }
.id-card dt:not(:first-of-type), .id-card dd:not(:first-of-type) { border-top: 1.5px dashed #CBBFE8; }

/* next member: a door with a curtain; the dashed "?" peeks out. Nothing about who it is. */
.door {
  position: relative; width: min(78%, 300px); aspect-ratio: 3 / 4; overflow: hidden; background: var(--door);
  border: 3px solid var(--door-line); border-radius: 50% 50% 24px 24px / 34% 34% 24px 24px;
}
.door .silhouette { position: absolute; left: 12%; width: 46%; bottom: 0; height: 66%; border-color: var(--blk-ink); color: var(--blk-ink);
  border-bottom: 0; border-radius: 48% 48% 0 0; opacity: .7; animation: peekout 5s var(--swell) infinite; }
.curtain {
  position: absolute; top: 0; right: 0; width: 56%; height: 88%;
  background: repeating-linear-gradient(90deg, var(--curtain-a) 0 14px, var(--curtain-b) 14px 28px);
}
.curtain::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px;
  background: radial-gradient(circle at 50% 0, #0000 11.5px, var(--door) 12px) 0 0 / 24px 12px repeat-x;
}
.stamp {
  position: absolute; left: 8%; bottom: 7%; z-index: 1; padding: 0 10px; border: 2px dashed var(--pink-ink); border-radius: 10px;
  background: var(--pink-soft); color: var(--pink-ink); rotate: -10deg; font: 700 18px/1.6 "Mali", system-ui, sans-serif;
}

@media (max-width: 640px) {
  .member .inner { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 48px; min-height: 0; }
  .member.flip .art { order: 0; }
  .watermark::before { right: -40%; top: 62%; }
}

/* ─── the story: หลับ → เจอสลิป → กิน → จดลงสมุด, a 12 s loop, each scene a quarter ─────────────
   Positions are the app's 393×388 scene frame (MonsterStage.tsx) in % and container units. */
.story { --cycle: 12s; width: 100%; max-width: 400px; justify-self: center; }
.story-lg { max-width: 520px; }
.stage { position: relative; aspect-ratio: 393 / 388; container-type: inline-size; border-radius: 24px; }
.stage > * { position: absolute; }
.st-sky { inset: 0; border-radius: inherit; overflow: hidden; }
.st-sky i { position: absolute; inset: 0; opacity: 0; animation: var(--cycle) linear infinite; }
.st-sky i:nth-child(1) { background: var(--mood-sleep) url("/assets/story/sleeping.svg") 0 0 / 100% 100% no-repeat; animation-name: scene1; }
.st-sky i:nth-child(2) { background: var(--mood-wake) url("/assets/story/waking.svg") 0 0 / 100% 100% no-repeat; animation-name: scene2; }
.st-sky i:nth-child(3) { background: var(--mood-eat) url("/assets/story/eating.svg") 0 0 / 100% 100% no-repeat; animation-name: scene3; }
.st-sky i:nth-child(4) { background: var(--mood-done) url("/assets/story/done.svg") 0 0 / 100% 100% no-repeat; opacity: 1; animation-name: scene4; }
.st-shadow { left: 30.9%; top: 87.6%; width: 38.2%; height: 3.6%; border-radius: 50%; background: var(--floor); }
.st-bob { left: 22.5%; top: 42.3%; width: 55%; aspect-ratio: 240 / 220; }
.st-bob img, .st-mouth { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform-origin: 50% 96.8%; }
.st-bob .s1 { animation: scene1 var(--cycle) linear infinite, breathe 2.4s var(--swell) infinite alternate; }
.st-bob .s2 { animation: scene2 var(--cycle) linear infinite, wake var(--cycle) linear infinite; }
.st-bob .s3 { animation: scene3 var(--cycle) linear infinite, chew 210ms var(--swell) infinite alternate; }
.st-bob .s4 { opacity: 1; animation: scene4 var(--cycle) linear infinite, hop var(--cycle) linear infinite, sway 800ms var(--swell) -400ms infinite alternate; }
.st-mouth { animation: scene3 var(--cycle) linear infinite, chew 210ms var(--swell) infinite alternate; }
.mouth-slip { animation: feed 900ms linear infinite; }

.st-zz { inset: 0; opacity: 0; animation: scene1 var(--cycle) linear infinite; --rise: -4.6cqw; }
.st-zz i, .zz i {
  position: absolute; aspect-ratio: 10 / 11; background: var(--z);
  -webkit-mask: url("/assets/deco/z.svg") center / contain no-repeat; mask: url("/assets/deco/z.svg") center / contain no-repeat;
  animation: zrise 2.4s linear infinite;
}
.st-zz i:nth-child(1) { left: 67.7%; top: 54.6%; width: 3.05%; }
.st-zz i:nth-child(2) { left: 72%; top: 49%; width: 4.33%; animation-delay: -1.6s; }
.st-zz i:nth-child(3) { left: 77.6%; top: 41.2%; width: 6.36%; animation-delay: -.8s; }

.st-slip { width: 10.2%; opacity: 0; animation: stackpop var(--cycle) var(--out) infinite; }
.st-slip.a { left: 8.65%; top: 76.3%; rotate: -16deg; }
.st-slip.b { left: 12.7%; top: 75%; rotate: -4deg; animation-delay: .12s; }
.st-slip.c { left: 16.8%; top: 76.3%; rotate: 9deg; animation-delay: .24s; }

.st-flies { inset: 0; opacity: 0; animation: scene3 var(--cycle) linear infinite; }
.st-fly { position: absolute; opacity: 0; animation: fly1 900ms linear infinite; }
.st-fly.f1 { left: 11.7%; top: 54.1%; width: 9.2%; rotate: -22deg; }
.st-fly.f2 { left: 78.4%; top: 49%; width: 9.7%; rotate: 18deg; animation-name: fly2; animation-delay: -450ms; }

.st-book {
  right: 2%; top: 3%; width: 50%; padding: .7em .9em .8em; border-radius: 24px; background: var(--bubble); color: #2B2140;
  box-shadow: 0 4px 0 var(--edge); font-size: clamp(11px, 3.2cqw, 14px); line-height: 1.5; animation: book var(--cycle) var(--out) infinite;
}
.st-book b { display: block; font: 700 1.1em/1.5 "Mali", system-ui, sans-serif; margin-bottom: 2px; }
.st-book p { display: flex; justify-content: space-between; gap: 8px; margin: 0; border-top: 1px solid #E7DFF6; padding-top: 2px; }
.st-say {
  left: 3%; top: 24%; max-width: 42%; padding: 10px 14px; border-radius: 18px; white-space: normal;
  font: 700 clamp(13px, 3.6cqw, 17px)/1.6 "Mali", "Kodchasan", system-ui, sans-serif;
  transform-origin: 85% 100%; animation: say var(--cycle) var(--out) infinite;
}
.st-say span { display: inline-block; }
.st-say::before { left: auto; right: 18%; }

.story-steps { list-style: none; counter-reset: step; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.story-steps li {
  counter-increment: step; position: relative; isolation: isolate; padding: 8px 6px 10px; border-radius: 14px; text-align: center;
  background: var(--chip); color: var(--blk-ink); font-size: 14px; line-height: 1.4; opacity: .7; animation: var(--cycle) linear infinite;
}
.story-steps li::before {
  content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto 4px; border-radius: 50%;
  font: 700 15px/1 "Mali", system-ui, sans-serif;
}
.story-steps li::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--chip-on); opacity: 0; animation: var(--cycle) linear infinite; }
.story-steps li:nth-child(1) { animation-name: step1; }
.story-steps li:nth-child(2) { animation-name: step2; }
.story-steps li:nth-child(3) { animation-name: step3; }
.story-steps li:nth-child(4) { animation-name: step4; opacity: 1; scale: 1.04; }
.story-steps li:nth-child(1)::before { background: var(--mood-sleep); }
.story-steps li:nth-child(2)::before { background: var(--mood-wake); }
.story-steps li:nth-child(3)::before { background: var(--mood-eat); }
.story-steps li:nth-child(4)::before { background: var(--mood-done); }
.story-steps li:nth-child(1)::after { animation-name: scene1; }
.story-steps li:nth-child(2)::after { animation-name: scene2; }
.story-steps li:nth-child(3)::after { animation-name: scene3; }
.story-steps li:nth-child(4)::after { animation-name: scene4; opacity: 1; }

@media (max-width: 640px) {
  .story-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ─── eatslips page ──────────────────────────────────────────────────────── */
.app-hero { --bar: url("/assets/crayon/bar-b9a3f8.png"); }
.member.app-hero .deco { --seam-b: var(--blk-how); }
.app-hero .top a, .app-hero .brand { color: var(--blk-ink); }
.app-hero .inner { padding-top: 16px; }
.app-hero p { margin: 0 0 10px; }
.app-hero .spirit { margin: 14px 0 14px; }
.app-hero .btn { margin-top: 14px; }
.app-hero .tile { width: 88px; height: 88px; padding: 4px; margin: 0 0 18px 4px; border-radius: 22px; background: #fff; rotate: -6deg; box-shadow: 0 4px 0 var(--card-lip); }
.app-hero h1.wordmark { display: inline-block; transform-origin: 50% 100%; animation: hop-in 620ms var(--out) both; }
.hero-poke { position: relative; width: min(100%, 380px); padding-top: 64px; }
.hero-poke .say-1 { position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 3; transform-origin: 50% 100%; animation: pop 300ms var(--pop) 400ms both; }
.hero-poke:has(details[open]) .say-1 { display: none; }
.hero-poke .poke .say { bottom: auto; top: -64px; }
.hero-poke summary img { width: 100%; height: auto; }
.hero-poke .k1 { left: 2%; top: 22%; width: 7%; --c: #fff; }
.hero-poke .k2 { right: 4%; top: 18%; width: 6%; --c: #FF9FB6; animation-delay: -.9s; }
@media (prefers-color-scheme: dark) {
  .app-hero { --bar: url("/assets/crayon/bar-7f64d6.png"); }
}

.member.how p { margin: 0 0 10px; }
.member.how .inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
.member.how .inner > div:first-child { max-width: 36em; }
.member.how .art { width: 100%; margin-top: 16px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 44px 22px; margin-top: 72px; }
.feat {
  position: relative; padding: 38px 18px 18px; border-radius: 24px; box-shadow: 0 4px 0 var(--edge); rotate: -1deg;
  transition: rotate 200ms var(--out), translate 200ms var(--out);
}
.feat:nth-child(even) { rotate: 1deg; }
.feat > img { position: absolute; top: -22px; left: 16px; width: auto; height: 52px; z-index: 1; }
.feat h3 { margin: 0 0 4px; font-size: 18px; color: var(--ink); }
.feat p { margin: 0; color: var(--soft); font-size: 15px; }
.feat-sky { background: var(--sky-soft); }
.feat-leaf { background: var(--leaf-soft); }
.feat-butter { background: var(--butter-soft); }
.feat-pink { background: var(--pink-soft); }

.links { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 0; font-weight: 700; }
.links a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 16px; background: var(--surface-alt);
  color: var(--accent); line-height: 1.4; text-decoration: none; }

/* ─── footer and 404 ─────────────────────────────────────────────────────── */
.foot-bleed { margin-top: 64px; background: var(--surface-alt); color: var(--soft); }
.foot-bleed .deco { --seam-t: var(--bg); }
.foot { display: flex; align-items: center; gap: 16px; padding-top: 40px; padding-bottom: 40px; font-size: 14px; line-height: 1.6; }
.foot p { margin: 4px 0; }
.nap { position: relative; flex: none; width: 88px; }
.nap img { width: 100%; height: auto; }
.zz { position: absolute; inset: 0; --rise: -14px; }
.nap .zz i:nth-child(1) { left: 70%; top: 4%; width: 8px; }
.nap .zz i:nth-child(2) { left: 80%; top: -12%; width: 11px; animation-delay: -1.6s; }
.nap .zz i:nth-child(3) { left: 92%; top: -30%; width: 15px; animation-delay: -.8s; }

/* a short page keeps its footer at the bottom of the screen */
.short { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.short > .wrap { width: 100%; }
.short .foot-bleed { margin-top: auto; }
.lost { padding: 40px 0 64px; text-align: center; }
.lost .nap { width: 120px; margin: 24px auto 8px; }
.lost .nap .zz { --rise: -18px; }
.lost h1 { font-size: clamp(30px, 8vw, 44px); margin: 0 0 8px; }
.lost p { margin: 0 auto 6px; max-width: 30em; color: var(--soft); }
.lost .btn { margin-top: 20px; }

/* ─── motion ─────────────────────────────────────────────────────────────── */
@keyframes scene1 { 0%, 23% { opacity: 1; } 25%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes scene2 { 0%, 23% { opacity: 0; } 25%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes scene3 { 0%, 48% { opacity: 0; } 50%, 73% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes scene4 { 0%, 73% { opacity: 0; } 75%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes step1 { 0%, 23% { opacity: 1; scale: 1.04; } 25%, 98% { opacity: .7; scale: 1; } 100% { opacity: 1; scale: 1.04; } }
@keyframes step2 { 0%, 23% { opacity: .7; scale: 1; } 25%, 48% { opacity: 1; scale: 1.04; } 50%, 100% { opacity: .7; scale: 1; } }
@keyframes step3 { 0%, 48% { opacity: .7; scale: 1; } 50%, 73% { opacity: 1; scale: 1.04; } 75%, 100% { opacity: .7; scale: 1; } }
@keyframes step4 { 0%, 73% { opacity: .7; scale: 1; } 75%, 97% { opacity: 1; scale: 1.04; } 100% { opacity: .7; scale: 1; } }

@keyframes breathe { to { scale: .985 1.035; } }
@keyframes chew { to { scale: 1 .94; } }
@keyframes wake {
  0%, 25% { scale: 1 1; rotate: 0deg; } 26.25% { scale: 1.05 .9; } 27.9% { scale: .97 1.08; } 29% { rotate: 0deg; } 29.5% { scale: 1.004 .992; }
  30% { rotate: -4deg; } 31% { scale: 1 1; rotate: 4deg; } 32% { rotate: -4deg; } 33%, 100% { rotate: 0deg; }
}
@keyframes hop {
  0%, 75% { translate: 0 0; } 76.2% { translate: 0 -3.6cqw; } 77.6% { translate: 0 .3cqw; } 78.9% { translate: 0 0; }
  80.1% { translate: 0 -3.6cqw; } 81.5% { translate: 0 .3cqw; } 82.8%, 100% { translate: 0 0; }
}
@keyframes sway { from { rotate: -2deg; } to { rotate: 2deg; } }
/* px on an SVG <g> are viewBox units; plain transform is fine here, nothing else moves this group */
@keyframes feed { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(29px); opacity: 1; } }
@keyframes zrise { 0% { opacity: 0; translate: 0 0; } 35%, 65% { opacity: 1; } 100% { opacity: 0; translate: 0 var(--rise, -14px); } }
@keyframes stackpop { 0%, 25% { opacity: 0; translate: 0 -6cqw; scale: .6; } 27.5% { opacity: 1; translate: 0 0; scale: 1.08; } 29% { scale: 1; } 48% { opacity: 1; scale: 1; } 50%, 100% { opacity: 0; scale: .6; } }
@keyframes fly1 { 0% { translate: 0 0; scale: 1; opacity: 0; } 10% { opacity: 1; } 35% { translate: 16.9cqw -12.1cqw; } 70% { translate: 33.7cqw -2.1cqw; scale: .6; } 75% { opacity: 1; } 100% { translate: 33.7cqw 8cqw; scale: .4; opacity: 0; } }
@keyframes fly2 { 0% { translate: 0 0; scale: 1; opacity: 0; } 10% { opacity: 1; } 35% { translate: -16.6cqw -7.3cqw; } 70% { translate: -33.2cqw 2.7cqw; scale: .6; } 75% { opacity: 1; } 100% { translate: -33.2cqw 12.8cqw; scale: .4; opacity: 0; } }
@keyframes book { 0%, 74% { opacity: 0; translate: 0 16px; } 80%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes say { 0%, 77% { opacity: 0; scale: .4; } 79% { opacity: 1; scale: 1.08; } 80.5% { scale: 1; } 97% { opacity: 1; } 100% { opacity: 0; } }

@keyframes peek { from { rotate: -8deg; translate: 0 0; } to { rotate: -3deg; translate: 0 -10px; } }
@keyframes drift { to { rotate: calc(var(--r) + 6deg); translate: 0 -10px; } }
@keyframes twinkle { from { scale: .6; opacity: .5; } to { scale: 1; opacity: 1; } }
@keyframes moonrise { from { opacity: 0; translate: 0 40%; } }
@keyframes wait { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes peekout { 0%, 30% { translate: 0 0; } 45%, 60% { translate: 72% 0; } 75%, 100% { translate: 0 0; } }
@keyframes squish { 30% { scale: 1.12 .88; } 60% { scale: .95 1.06; } 100% { scale: 1 1; } }
@keyframes pop { from { opacity: 0; scale: .4; } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -8deg; } 75% { rotate: 8deg; } }
@keyframes hop-in { 0% { opacity: 0; translate: 0 .4em; scale: 1 .7; } 55% { opacity: 1; translate: 0 -.1em; scale: .96 1.06; } 80% { translate: 0 .02em; scale: 1.02 .98; } 100% { translate: 0 0; scale: 1 1; } }

/* the club name hops in once, word by word (never letter by letter: each piece paints its own ring) */
.hop > span { display: inline-block; transform-origin: 50% 100%; animation: hop-in 620ms var(--out) both; }
.hop > span:nth-of-type(2) { animation-delay: 110ms; }
.hop > span:nth-of-type(3) { animation-delay: 220ms; }

/* hover reactions only on devices that really hover; iOS keeps :hover stuck after a tap */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { translate: 0 2px; box-shadow: 0 2px 0 var(--primary-lip); }
  .btn-charm:hover::before { animation: wiggle .5s ease-in-out; }
  .lineup .poke summary:hover img, .app-hero .tile:hover { animation: wiggle .5s ease-in-out; }
  .feat:hover, .id-card:hover { rotate: 0deg; translate: 0 -4px; }
}

/* sections rise in as they scroll into view, where the browser supports scroll timelines */
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  @keyframes rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
}

/* น้องอีท morphs between the home page and /eatslips/ (Chrome 126, Safari 18.2; others change page normally) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.member.eatie .art { view-transition-name: eatie; }

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