/* Pirate Force: Resurrection - CBT landing (site4_landing).
   Look = site3 v3 "sunny day" tokens and fonts; theme = sunny pirate seaport (no floating islands).
   Layout: phones and short windows get a stacked page (max 640 px column, no scroll-snap).
   Desktop (>= 960 x 600) gets five full-screen pages with native scroll-snap (y mandatory) and a 1920x900
   composition ("stage") scaled to the window: stage sizes use cqw (1cqw = 19.2 design px), text uses clamp().
   Motion: section reveal, scroll cue, carousel/scroll smoothing; all off under prefers-reduced-motion. */
:root {
  color-scheme: light;
  --navy: #14285c;
  --ink: #1f2f55;
  --muted: #4a5878;
  --sky: #63bdf5;
  --sky-hi: #d6effd;
  --sky-wash: #e8f5fd;
  --sea: #22bccb;
  --sea-deep: #0a6e7d;
  --gold: #f2b632;
  --gold-hi: #ffd76a;
  --gold-deep: #b07a12;
  --gold-text: #7f5200;
  --coral: #ef6f5b;
  --coral-deep: #b8392a;
  --body: #fdf8ee;
  --parchment: #f8eed6;
  --sand: #ead6a8;
  --line: rgba(176, 122, 18, .3);
  --shadow: 0 14px 34px -20px rgba(20, 40, 92, .45);
  --c-glad: #d23a4f; --c-knight: #2f7fd0; --c-sharp: #dd7424;
  --c-locked: #8a52c8; --c-storm: #239a5a; --c-priest: #d9a514;
  --f-display: "Chonburi", "Noto Serif Thai", Georgia, serif;
  --f-label: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --f-body: "IBM Plex Sans Thai Looped", "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
  --bar-h: 64px;
  --rope: repeating-conic-gradient(from 3deg, #fbe4a2 0deg 3.2deg, #e2a93c 3.2deg 6.4deg, #b07a12 6.4deg 7.2deg, #ffd76a 7.2deg 9deg);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--body); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--body); color: var(--ink);
  font: 400 1rem/1.7 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: var(--sea-deep); }
p, h1, h2, h3, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.3; color: var(--navy); text-wrap: balance; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--sea-deep); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 14px; z-index: 90; }
.skip:focus { left: 16px; }

/* ---------- small parts ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font: 600 .9375rem/1.4 var(--f-body); letter-spacing: .02em; color: var(--gold-text);
}
.eyebrow svg { width: 22px; height: 22px; color: var(--gold-deep); flex: none; }
.kicker { font: 600 .875rem/1.4 var(--f-body); letter-spacing: .02em; color: var(--gold-text); }
.lede { color: var(--muted); font-size: 1.0625rem; }
.btn {
  --b: var(--gold-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .65em 1.35em; border-radius: 999px;
  font: 600 .9375rem/1.2 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--b); transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn small { font-weight: 400; font-size: .8125rem; color: #5a6684; }
.btn-lg { min-height: 54px; font-size: 1.0625rem; padding-inline: 1.6em; }
.btn-gold {
  color: #2a1a00;
  background: linear-gradient(180deg, #ffe597, var(--gold) 58%, #e09a1f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px -10px rgba(176,122,18,.9);
}
.btn-gold:hover { background: linear-gradient(180deg, #fff2c4, var(--gold-hi) 55%, var(--gold)); }
.btn-ghost { color: var(--navy); background: rgba(255,255,255,.92); --b: rgba(20,40,92,.28); }
.btn-ghost:hover { --b: var(--gold-deep); background: #fff; }
.btn.is-disabled { cursor: not-allowed; color: #5a6684; background: rgba(238,242,247,.94); --b: rgba(20,40,92,.18); box-shadow: none; }
.link-site {
  display: inline-flex; align-items: center; gap: .3em; min-height: 44px;
  font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--gold);
}
.link-site svg { width: 18px; height: 18px; transition: transform .2s; }
.link-site:hover svg { transform: translateX(3px); }
.link-btn { background: none; border: 0; padding: 8px; font: inherit; color: var(--sea-deep); text-decoration: underline; cursor: pointer; }
.lock-dot {
  display: inline-grid; place-items: center; font: 700 1.1rem/1 var(--f-label); font-style: normal; color: #fff;
  background: radial-gradient(circle at 35% 30%, #6b4a9a, #2a1c46); border-radius: 50%;
}

/* ---------- top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px -14px rgba(20,40,92,.5);
}
.bar-logo { flex: none; }
.bar-logo img { height: 46px; width: auto; }
.nav { display: none; }
.nav a { color: var(--navy); text-decoration: none; font-size: .9375rem; padding: 8px 12px; border-radius: 999px; transition: background-color .2s; }
.nav a:hover { background: rgba(242,182,50,.18); }
.nav a[aria-current="true"] { background: rgba(242,182,50,.3); box-shadow: inset 0 0 0 1px rgba(176,122,18,.35); font-weight: 600; }
.nav .nav-site { color: var(--sea-deep); }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto;
  background: #fff; border: 1px solid rgba(20,40,92,.25); border-radius: 999px; color: var(--navy); cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; }
.bar-cta { min-height: 40px; padding: .45em 1.05em; font-size: .875rem; }
.bar.is-open .nav {
  display: flex; flex-direction: column; position: absolute; top: var(--bar-h); left: 0; right: 0;
  padding: 8px 16px 16px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
}
.bar.is-open .nav a { padding: 12px; }
@media (min-width: 1100px) {
  .bar { padding: 0 28px; gap: 20px; }
  .menu-btn { display: none; }
  .nav { display: flex; gap: 2px; margin-left: auto; }
  .bar.is-open .nav { position: static; flex-direction: row; padding: 0; box-shadow: none; border: 0; background: none; }
  .bar-cta { min-height: 44px; font-size: .9375rem; }
}

/* ---------- side dots + back to top (desktop) ---------- */
.dots { display: none; }
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 45; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--navy); background: #fff; border: 1px solid rgba(20,40,92,.25);
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.to-top svg { width: 22px; height: 22px; }
.to-top.is-on { opacity: 1; visibility: visible; }
.to-top:hover { border-color: var(--gold-deep); }

/* ---------- pages: phone-first stacked layout ---------- */
.page { position: relative; overflow: hidden; padding: calc(var(--bar-h) + 32px) 16px 56px; isolation: isolate; }
.bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #63bdf5, #d6effd 62%, #5fd0dc 62.2%, #0a6e7d); }
.bg img, .bg picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg img.is-missing { display: none; }
.wash { position: absolute; inset: 0; }
.stage { position: relative; width: 100%; min-width: 0; max-width: 640px; margin: 0 auto; }
.stage * { min-width: 0; }

/* reveal: only hides when JS is running, so no-JS readers see everything */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .page.is-in .reveal { opacity: 1; transform: none; }
.js .page.is-in .reveal:nth-child(2) { transition-delay: .08s; }
.js .page.is-in .reveal:nth-child(3) { transition-delay: .16s; }
.js .page.is-in .reveal:nth-child(4) { transition-delay: .24s; }
.js .page.is-in .reveal:nth-child(n+5) { transition-delay: .3s; }

/* 1. home */
.page-home { min-height: 100svh; display: grid; align-items: center; }
.page-home .wash { background: linear-gradient(180deg, rgba(232,245,253,.15) 0, rgba(232,245,253,.88) 38%, rgba(232,245,253,.94) 100%); }
.home-copy { display: grid; justify-items: center; text-align: center; gap: 18px; padding-top: 18vh; }
.home-logo { width: min(86vw, 520px); height: auto; filter: drop-shadow(0 10px 22px rgba(20,40,92,.25)); }
.hook { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); }
.hook em { font-style: normal; color: var(--coral-deep); }
.date-pill {
  display: inline-flex; align-items: center; gap: .55em; padding: .55em 1.2em; border-radius: 999px;
  font-weight: 600; color: var(--navy); background: var(--parchment);
  border: 1px solid var(--gold-deep); box-shadow: inset 0 0 0 3px #fff6dc, var(--shadow);
}
.date-pill svg { width: 22px; height: 22px; color: var(--gold-deep); flex: none; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 14px; }
.cta-row .btn { flex: 1 1 220px; white-space: normal; flex-wrap: wrap; text-align: center; }
.scroll-cue { display: none; }

/* 2. event */
.page-event .wash { background: rgba(253,248,238,.9); }
.event-copy { display: grid; gap: 16px; }
.event-copy h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
.facts { display: grid; gap: 12px; }
.fact {
  position: relative; display: grid; gap: 4px; align-content: start; padding: 18px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.fact-num { font: 400 2.75rem/1 var(--f-display); color: var(--navy); }
.fact-ico { width: 48px; height: 48px; }
.fact-label { font-weight: 600; font-size: 1.0625rem; color: var(--navy); }
.fact-note { font-size: .875rem; color: var(--muted); }
.fact-icons { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.fact-icons img, .fact-icons .lock-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--sky-wash); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold); }
.fact-icons .lock-dot { font-size: .95rem; background: radial-gradient(circle at 35% 30%, #6b4a9a, #2a1c46); }
.rewards-h { font-size: 1.375rem; margin-top: 8px; }
.rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reward {
  display: grid; justify-items: center; gap: 6px; padding: 16px 10px 14px; text-align: center;
  background: linear-gradient(180deg, #fffaf0, var(--parchment)); border: 1px dashed var(--gold-deep); border-radius: 18px;
  font-weight: 600; color: var(--gold-text);
}
.reward svg { width: 52px; height: 52px; opacity: .9; }
.fine { font-size: .875rem; color: var(--muted); }

/* 3. features */
.page-features .wash { background: rgba(232,245,253,.86); }
.sec-head { display: grid; gap: 6px; margin-bottom: 18px; }
.sec-head h2 { font-size: clamp(1.625rem, 1.15rem + 2.2vw, 2.6rem); }
.carousel { position: relative; display: grid; grid-template-columns: 1fr; }
.track {
  grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 20px;
}
.track::-webkit-scrollbar { display: none; }
.slide { scroll-snap-align: start; display: grid; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.slide-media { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--sky-hi), var(--parchment)); }
.slide-media img { width: 100%; height: 100%; object-fit: cover; }
.slide-text { display: grid; gap: 6px; padding: 18px 20px 22px; align-content: start; }
.slide-text h3 { font-size: 1.375rem; }
.slide-text p:not(.kicker) { color: var(--muted); }
.c-btn {
  position: absolute; top: calc((100vw - 32px) * .28 - 24px); z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--navy); background: rgba(255,255,255,.94); cursor: pointer;
  border: 1px solid rgba(20,40,92,.25); box-shadow: var(--shadow);
}
.c-btn svg { width: 22px; height: 22px; }
.c-btn:hover { border-color: var(--gold-deep); }
.c-btn[disabled] { opacity: .45; cursor: default; }
.c-prev { left: 8px; } .c-next { right: 8px; }
.c-dots { grid-column: 1 / -1; display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.c-dots button { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.c-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(20,40,92,.25); transition: background-color .2s, transform .2s; }
.c-dots button[aria-current="true"]::before { background: var(--gold-deep); transform: scale(1.3); }

/* 4. classes */
.page-classes .wash { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.55) 70%); }
.cls-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 16px; }
.cls-tabs button {
  display: grid; justify-items: center; gap: 4px; width: 92px; padding: 4px 0; background: none; border: 0; cursor: pointer;
  font: 600 .75rem/1.25 var(--f-body); color: var(--navy);
}
.cls-tabs img, .cls-tabs .lock-dot {
  width: 56px; height: 56px; border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(20,40,92,.2); transition: box-shadow .2s, transform .2s;
}
.cls-tabs img { background: #fff; }
.cls-tabs .lock-dot { font-size: 1.4rem; }
.cls-tabs button:hover img, .cls-tabs button:hover .lock-dot { transform: translateY(-2px); }
.cls-tabs button[aria-selected="true"] img, .cls-tabs button[aria-selected="true"] .lock-dot {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cc), 0 10px 22px -8px var(--cc);
}
.cls { display: grid; gap: 14px; }
.cls[hidden] { display: none; }
.cls-art { position: relative; height: min(62vh, 460px); }
.cls-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 24px rgba(20,40,92,.3));
}
.cls-info {
  display: grid; gap: 8px; padding: 18px 20px 20px; background: rgba(255,255,255,.94);
  border-radius: 20px; border-top: 5px solid var(--cc); box-shadow: var(--shadow);
}
.cls-info h3 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.roles { display: flex; flex-wrap: wrap; gap: 6px; }
.roles span { font-size: .8125rem; font-weight: 600; color: #fff; background: var(--cc); padding: 3px 12px; border-radius: 999px; }
.cls-locked .roles span { background: #5b3f86; }
.desc { color: var(--ink); }
.clip { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; margin-top: 6px; background: linear-gradient(135deg, var(--sky), var(--sea)); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold); }
.clip img, .clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip video { opacity: 0; transition: opacity .4s; }
.clip.is-playing video { opacity: 1; }
.clip-badge {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 12px; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; color: #fff; background: rgba(20,40,92,.82);
}
.clip.has-clip .clip-badge { display: none; }
.clip-play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--navy); font-size: 0; box-shadow: var(--shadow);
}
.clip-play::before { content: ""; display: block; margin: 0 auto; width: 0; height: 0; border-left: 18px solid currentColor; border-top: 11px solid transparent; border-bottom: 11px solid transparent; transform: translateX(3px); }
.clip-locked { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #4b3375, #1b1430); }
.lock-big { font: 400 4rem/1 var(--f-display); color: rgba(255,255,255,.35); }

/* 5. register */
.page-register .wash { background: rgba(232,245,253,.55); }
.page-register .stage { display: grid; gap: 16px; }
.reg-card {
  position: relative; display: grid; gap: 10px; padding: 24px 20px 22px;
  background: var(--parchment); border-radius: 22px; border: 1px solid var(--gold-deep);
  box-shadow: inset 0 0 0 4px #fff6dc, var(--shadow);
}
.reg-card h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); }
.reg-form { display: grid; gap: 12px; }
.field { display: grid; gap: 4px; }
.field label { font-weight: 600; color: var(--navy); }
.field small { font-size: .8125rem; color: var(--muted); }
.field input {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid rgba(20,40,92,.3); border-radius: 12px;
}
.field input:focus-visible { outline: 3px solid var(--sea-deep); outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: var(--coral-deep); box-shadow: 0 0 0 1px var(--coral-deep); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--sea-deep); }
.check.is-invalid span { color: var(--coral-deep); }
.reg-submit { width: 100%; }
.form-status { font-weight: 600; color: var(--sea-deep); }
/* the form ships closed (fieldset disabled) until the account service exists; see #reg-closed */
.reg-fields { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
.reg-fields:disabled .field, .reg-fields:disabled .check, .reg-fields:disabled .reg-submit { opacity: .55; }
.reg-fields:disabled .reg-submit { cursor: not-allowed; box-shadow: none; }
.reg-closed { padding: 10px 14px; border-radius: 12px; background: var(--sky-wash); border: 1px solid rgba(10,110,125,.35); color: var(--navy); font-weight: 600; font-size: .9375rem; }
.reg-closed[hidden] { display: none; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--coral-deep); }
.side-card {
  display: grid; gap: 12px; padding: 20px; background: rgba(255,255,255,.94);
  border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.btn-download { min-height: 64px; justify-content: flex-start; gap: .8em; padding-inline: 1.2em; border-radius: 16px; }
.btn-download span { display: grid; text-align: left; font-size: 1.125rem; }
.btn-download svg { width: 28px; height: 28px; }
.side-h { font-weight: 600; color: var(--navy); margin-top: 4px; }
.btn-fb { color: #fff; background: #1877f2; --b: #1464cc; }
.btn-fb:hover { background: #1464cc; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; color: var(--navy); background: var(--sky-wash); border: 1px solid rgba(20,40,92,.15); font-size: .875rem; font-weight: 600; }
.socials a:hover { border-color: var(--gold-deep); }

/* footer */
.foot { display: grid; justify-items: center; gap: 6px; padding: 24px 16px 28px; background: var(--sand); border-top: 1px solid var(--gold-deep); text-align: center; }
.foot img { width: 120px; height: auto; }
.legal { font-size: .875rem; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 14px; font-size: .9375rem; }
.foot-links a { color: var(--sea-deep); padding: 8px 0; }
.socials[hidden], .socials li[hidden] { display: none; }

/* cookie consent */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; display: grid; gap: 12px;
  padding: 16px 18px; background: #fff; border: 1px solid var(--gold-deep); border-radius: 18px; box-shadow: 0 18px 40px -16px rgba(20,40,92,.6);
  font-size: .9375rem;
}
.cookie[hidden] { display: none; }
.cookie-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btns .btn { flex: 1 1 120px; min-height: 44px; padding-inline: .8em; }
@media (max-width: 759px) { .cookie { font-size: .8125rem; line-height: 1.55; padding: 12px 14px; gap: 10px; left: 8px; right: 8px; bottom: 8px; } }

/* ---------- desktop: full-screen pages, snap, scaled stage ---------- */
@media (min-width: 960px) and (min-height: 600px) {
  :root { --bar-h: 72px; }
  html { scroll-snap-type: y mandatory; scroll-padding-top: 0; }
  .bar-logo img { height: 54px; }
  .page {
    height: 100vh; height: 100svh; min-height: 0; padding: var(--bar-h) 0 0;
    display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always;
  }
  .foot { scroll-snap-align: end; }
  .stage {
    max-width: none; margin: 0;
    width: min(100vw, calc((100svh - var(--bar-h)) * 2.1333));
    aspect-ratio: 1920 / 900; container-type: inline-size;
  }
  .dots {
    display: grid; gap: 6px; position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 45;
  }
  .dots a { position: relative; display: grid; place-items: center; width: 28px; height: 28px; }
  .dots a::before {
    content: ""; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.9);
    box-shadow: 0 0 0 2px var(--navy); transition: transform .2s, background-color .2s;
  }
  .dots a[aria-current="true"]::before { background: var(--gold); box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 5px rgba(255,255,255,.8); transform: scale(1.25); }
  .dots span {
    position: absolute; right: 34px; white-space: nowrap; font-size: .8125rem; font-weight: 600; color: var(--navy);
    background: #fff; padding: 3px 10px; border-radius: 999px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .dots a:hover span, .dots a:focus-visible span { opacity: 1; }
  .to-top { right: 22px; bottom: 22px; }

  /* home */
  .page-home .wash { background: radial-gradient(ellipse 62% 95% at 24% 52%, rgba(240,249,255,.94) 0, rgba(232,245,253,.82) 45%, rgba(232,245,253,0) 78%); }
  .home-copy { position: absolute; left: 6cqw; top: 50%; transform: translateY(-50%); width: 40cqw; padding: 0; gap: clamp(12px, 1.2cqw, 24px); }
  .home-logo { width: 34cqw; }
  .hook { font-size: clamp(1.5rem, 2.1cqw, 2.6rem); }
  .cta-row .btn { flex: 0 1 auto; }
  .scroll-cue {
    display: grid; place-items: center; position: absolute; left: 50%; bottom: 1.6cqw; margin-left: -24px;
    width: 48px; height: 48px; border-radius: 50%; color: var(--navy); background: rgba(255,255,255,.9); box-shadow: var(--shadow);
  }
  .scroll-cue svg { width: 24px; height: 24px; }

  /* event */
  .page-event .wash { background: linear-gradient(90deg, rgba(253,248,238,.97) 0, rgba(253,248,238,.93) 50%, rgba(253,248,238,.35) 66%, rgba(253,248,238,0) 76%); }
  .event-copy { position: absolute; left: 6cqw; top: 50%; transform: translateY(-50%); width: 52cqw; gap: clamp(8px, .9cqw, 18px); }
  .event-copy h2 { font-size: clamp(1.75rem, 2.6cqw, 3.2rem); }
  .facts { grid-template-columns: 1.25fr 1fr 1fr; gap: 1cqw; }
  .fact { padding: clamp(12px, 1.1cqw, 22px) clamp(14px, 1.2cqw, 24px); }
  .fact-num { font-size: clamp(2rem, 2.8cqw, 3.4rem); }
  .fact-ico { width: clamp(36px, 2.9cqw, 56px); height: clamp(36px, 2.9cqw, 56px); }
  .fact-icons img, .fact-icons .lock-dot { width: clamp(26px, 1.9cqw, 38px); height: clamp(26px, 1.9cqw, 38px); }
  .rewards-h { font-size: clamp(1.125rem, 1.4cqw, 1.6rem); margin-top: .4cqw; }
  .rewards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; }
  .reward { padding: clamp(10px, 1cqw, 20px) 8px; }
  .reward svg { width: clamp(36px, 3cqw, 58px); height: clamp(36px, 3cqw, 58px); }

  /* features */
  .page-features .wash { background: linear-gradient(180deg, rgba(232,245,253,.92) 0, rgba(232,245,253,.8) 60%, rgba(232,245,253,.6)); }
  .page-features .stage { display: grid; align-content: center; justify-items: center; padding: 0 7cqw; }
  .sec-head { justify-items: center; text-align: center; margin-bottom: 1.6cqw; }
  .sec-head h2 { font-size: clamp(1.625rem, 2.4cqw, 3rem); }
  .carousel { width: 100%; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 1.6cqw; }
  .carousel .track { grid-column: 2; grid-row: 1; gap: 0; }
  .c-btn { position: static; grid-row: 1; width: clamp(44px, 3.3cqw, 64px); height: clamp(44px, 3.3cqw, 64px); }
  .c-prev { grid-column: 1; } .c-next { grid-column: 3; }
  .c-dots { grid-column: 2; grid-row: 2; margin-top: 1cqw; }
  .slide { grid-template-columns: 62% 1fr; }
  .slide-text { padding: clamp(16px, 2cqw, 40px); align-content: center; gap: clamp(6px, .6cqw, 12px); }
  .slide-text h3 { font-size: clamp(1.25rem, 1.75cqw, 2.1rem); }
  .slide-text p:not(.kicker) { font-size: clamp(.9375rem, .95cqw, 1.125rem); }

  /* classes */
  .page-classes .wash { background: radial-gradient(ellipse 60% 70% at 72% 45%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%); }
  .cls-tabs { position: absolute; left: 48cqw; right: 6cqw; bottom: 2.6cqw; z-index: 2; justify-content: flex-start; gap: .9cqw; margin: 0; }
  .cls-tabs button { width: clamp(70px, 5.6cqw, 108px); font-size: clamp(.6875rem, .68cqw, .8125rem); }
  .cls-tabs img, .cls-tabs .lock-dot { width: clamp(46px, 3.9cqw, 74px); height: clamp(46px, 3.9cqw, 74px); }
  .cls { position: absolute; inset: 0; display: block; }
  .cls-art { position: absolute; left: 3cqw; bottom: 0; width: 42cqw; height: 46.5cqw; }
  .cls-info {
    position: absolute; left: 48cqw; top: 50%; transform: translateY(-58%); width: 44cqw; max-height: calc(100% - 13cqw); overflow: hidden;
    padding: clamp(14px, 1.4cqw, 28px) clamp(16px, 1.8cqw, 34px); gap: clamp(4px, .5cqw, 10px); align-content: start;
  }
  .cls-info h3 { font-size: clamp(1.75rem, 2.8cqw, 3.4rem); line-height: 1.15; }
  .desc { font-size: clamp(.875rem, .9cqw, 1.0625rem); line-height: 1.65; }
  .clip { width: min(100%, 30cqw); }

  /* register */
  .page-register .wash { background: linear-gradient(90deg, rgba(232,245,253,.5), rgba(232,245,253,.2)); }
  .page-register .stage { display: grid; grid-template-columns: 46cqw 26cqw; justify-content: center; align-content: center; gap: 2cqw; }
  .reg-card { padding: clamp(18px, 1.8cqw, 34px) clamp(20px, 2.2cqw, 40px); gap: clamp(6px, .6cqw, 12px); }
  .reg-card h2 { font-size: clamp(1.5rem, 2cqw, 2.4rem); }
  .reg-form { grid-template-columns: 1fr 1fr; gap: clamp(8px, .8cqw, 16px) clamp(12px, 1.2cqw, 22px); }
  .reg-form .check, .reg-form .reg-submit, .reg-form .form-status { grid-column: 1 / -1; }
  .side-card { align-self: center; padding: clamp(16px, 1.6cqw, 30px); }
  .cookie { left: 22px; right: auto; bottom: 22px; max-width: 520px; }
}
@media (min-width: 960px) and (min-height: 600px) and (max-height: 760px) {
  /* short laptop windows: tighten the copy so the stage never clips */
  .field small { display: none; }
  .fact-note { font-size: .8125rem; }
  .lede { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .track { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .track { scroll-behavior: smooth; }
  .scroll-cue svg { animation: cue 2.4s ease-in-out infinite; }
  @keyframes cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
}

/* ==========================================================================================================
   lsite2 (20/10): the owner's phone review + strengths from ds.in.th/launch (web/REF_DS_LAUNCH.md). Phone first.
   Overrides the rules above; delete this block to roll back.
   - Type: Kanit (headings, buttons, labels) + Anuphan (reading text).
   - No drawn decoration: compass glyphs, treasure-chest and coin drawings are gone.
   - Light glass instead of cream/white washes over the paintings; only the text blocks sit on frosted white.
   - Headline lettering slots (web/tools/lettering.py, run by _build/make_pub.py): a designed image replaces the
     typed heading when web/lettering/<name>.webp exists; the typed text stays as fallback and accessible name.
   ========================================================================================================== */
:root {
  --f-display: "Kanit", "Anuphan", "Leelawadee UI", "Noto Sans Thai", sans-serif;
  --f-body: "Anuphan", "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
  --f-label: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --glass: rgba(255, 255, 255, .64);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-line: rgba(255, 255, 255, .85);
  --glass-shadow: 0 18px 44px -30px rgba(20, 40, 92, .6);
}
body { font: 400 1.0625rem/1.75 var(--f-body); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.35; }
.lede { color: var(--ink); line-height: 1.75; }

/* lettering slots */
[data-lt-slot] { color: var(--navy); }
.lt-img { display: block; }
.lt-img img { width: auto; height: auto; max-width: 100%; filter: drop-shadow(0 0 10px rgba(255,255,255,.75)) drop-shadow(0 4px 6px rgba(20,40,92,.4)); margin-inline: auto; }
.lt-img + .lt-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn .lt-img img { max-height: 32px; }

/* small parts */
.eyebrow, .kicker { font-family: var(--f-display); font-weight: 500; letter-spacing: .03em; }
.eyebrow::before { content: ""; flex: none; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.btn { font: 500 1rem/1.2 var(--f-display); }
.btn-lg { font-size: 1.125rem; min-height: 56px; }
.btn small { font-family: var(--f-body); }
.btn-gold { color: #3a2200; background: linear-gradient(180deg, #ffe9a6 0%, #f7c645 45%, #e9a321 100%); border-color: #c98d18;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(150,90,0,.25), 0 10px 22px -12px rgba(176,122,18,.95); }
.btn-ghost { background: rgba(255,255,255,.8); }
.nav a { font-family: var(--f-display); font-weight: 500; }
.bar { background: rgba(255,255,255,.84); border-bottom-color: rgba(20,40,92,.08); }
.glass, .event-copy, .sec-head, .reg-card, .side-card, .cls-info, .fact, .reward {
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
}

/* 1. home: logo + hook on the painting; only a soft light rises under the text */
.page-home .wash { background: linear-gradient(180deg, rgba(240,249,255,0) 0, rgba(240,249,255,0) 34%, rgba(240,249,255,.5) 58%, rgba(240,249,255,.72) 100%); }
.hook { font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem); line-height: 1.25;
  text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.9); }
.date-pill { font: 600 1.0625rem/1.3 var(--f-display); background: var(--glass-strong); border: 1px solid rgba(201,141,24,.55); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.date-pill:has(.lt-img) { background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* 2. event: no cream wash; the copy sits on one glass sheet */
.page-event .wash { background: none; }
.event-copy { border-radius: 24px; padding: 20px 16px 22px; }
.fact { background: var(--glass-strong); border-radius: 18px; }
.fact-num { font: 700 2.5rem/1.05 var(--f-display); }
.fact-word { font-size: 1.75rem; line-height: 1.2; color: var(--navy); }
.rewards-h { font-weight: 600; }
.reward { background: rgba(255,255,255,.55); border: 1px dashed rgba(176,122,18,.55); border-radius: 18px; font-family: var(--f-display); font-weight: 500; }
.reward::before { content: "?"; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  font: 700 1.6rem/1 var(--f-display); color: var(--gold-text); background: linear-gradient(180deg, #fff4cf, #f6d27a); box-shadow: inset 0 0 0 2px rgba(201,141,24,.6); }

/* 3. features: a light veil only; the heading on glass */
.page-features .wash { background: rgba(232,245,253,.22); }
.sec-head { border-radius: 22px; padding: 14px 18px; }
.slide { border-color: rgba(255,255,255,.9); box-shadow: 0 18px 40px -26px rgba(20,40,92,.7); }
.slide-text h3 { font-weight: 600; }

/* 4. classes: visible title, info on glass */
.cls-title { text-align: center; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 700; margin-bottom: 10px;
  text-shadow: 0 2px 0 #fff, 0 0 16px rgba(255,255,255,.95); }
.cls-info { background: var(--glass-strong); border-top: 5px solid var(--cc); }
.cls-tabs button { font-family: var(--f-display); font-weight: 500; }

/* 5. register: white glass, no parchment */
.page-register .wash { background: none; }
.reg-card { background: var(--glass-strong); border-radius: 24px; }
.side-card { border-radius: 24px; }
.reg-closed { background: rgba(232,245,253,.85); }

/* footer: one light strip */
.foot { background: rgba(255,255,255,.92); border-top: 1px solid rgba(20,40,92,.1); }

/* phones: tighter rhythm so no page is scenery only */
@media (max-width: 959px), (max-height: 599px) {
  .page { padding: calc(var(--bar-h) + 18px) 12px 36px; }
  .page-home { padding-bottom: 28px; }
  .home-copy { gap: 14px; }
}

/* desktop: the same glass inside the scaled stage */
@media (min-width: 960px) and (min-height: 600px) {
  .page-home .wash { background: radial-gradient(ellipse 52% 80% at 25% 52%, rgba(240,249,255,.62) 0, rgba(240,249,255,.38) 50%, rgba(240,249,255,0) 78%); }
  .hook { font-size: clamp(1.75rem, 2.4cqw, 3rem); }
  .event-copy { padding: clamp(18px, 2cqw, 40px); border-radius: 28px; }
  .page-features .wash { background: rgba(232,245,253,.18); }
  .sec-head { padding: clamp(10px, 1cqw, 18px) clamp(18px, 2cqw, 36px); }
  .cls-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .reward::before { width: clamp(36px, 3cqw, 58px); height: clamp(36px, 3cqw, 58px); font-size: clamp(1.1rem, 1.5cqw, 1.8rem); }
}

/* owner 20/10 (promo phrases as drawn lettering, a ribbon sub-line where it fits): typed fallback looks like a navy ribbon;
   once the lettering image exists the ribbon is the picture itself and this chrome goes away */
.lt-ribbon { display: block; width: fit-content; max-width: 100%; margin: 6px 0 0; padding: .3em 1.3em .35em; border-radius: 999px;
  font: 500 1.0625rem/1.45 var(--f-display); letter-spacing: .01em; color: #fff6dc; text-shadow: none;
  background: linear-gradient(180deg, #23458f, #14285c); box-shadow: 0 0 0 2px rgba(242,182,50,.85), 0 8px 18px -10px rgba(20,40,92,.8); }
.lt-ribbon:has(.lt-img) { padding: 0; background: none; box-shadow: none; border-radius: 0; }

.home-copy .lt-ribbon { margin: 0 auto; }
@media (max-width: 959px), (max-height: 599px) { .home-copy .lt-ribbon { font-size: 1rem; } }

/* desktop stage: the hero's lettering scales with the stage so logo + hook + date + ribbon + buttons fit one screen */
@media (min-width: 960px) and (min-height: 600px) {
  .home-copy .hook .lt-img img { max-height: 13cqw; }
  .home-copy .date-pill .lt-img img { max-height: 9cqw; }
  .home-copy .lt-ribbon .lt-img img { max-height: 3.4cqw; }
  .event-copy h2 .lt-img img, .sec-head h2 .lt-img img, .reg-card h2 .lt-img img { max-height: 5.2cqw; }
  .rewards-h .lt-img img { max-height: 3.4cqw; }
}

/* ---------- CBT hero key art (owner 20/10 17:16; TASK-010 keyart_cbt_hero) ----------
   make_pub.py writes <picture class="keyart baked|art"> into the hero when the files exist (and comments the seaport out).
   baked = one painted picture with the cast, the CBT/OBT/hook lettering and the logo in it (owner 17/10 22:15: one pass):
           the page's own logo and lettering become screen-reader text, only the buttons stay, at the bottom.
   art   = the cast without lettering: the page's lettering slots stack under the cast in the order CBT, OBT, hook, buttons. */
.bg .keyart, .bg .keyart img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg .keyart img { object-fit: cover; object-position: 50% 30%; }
.page-home:has(.keyart) .wash { background: linear-gradient(180deg, rgba(240,249,255,0) 0, rgba(240,249,255,0) 62%, rgba(240,249,255,.35) 100%); }
.page-home:has(.keyart.baked) .wash { background: none; }
.page-home:has(.keyart) .home-logo,
.page-home:has(.keyart.baked) .hook, .page-home:has(.keyart.baked) .date-pill, .page-home:has(.keyart.baked) .lt-ribbon {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
.page-home:has(.keyart) .date-pill { order: 1; }
.page-home:has(.keyart) .home-copy > .lt-ribbon { order: 2; }
.page-home:has(.keyart) .hook { order: 3; }
.page-home:has(.keyart) .cta-row { order: 4; }
/* phones: the cast fills the top of the screen, the lettering and the buttons sit at the bottom of the first screen */
@media (max-width: 959px), (max-height: 599px) {
  .page-home:has(.keyart) { align-items: end; }
  .page-home:has(.keyart) .home-copy { padding-top: 0; gap: 10px; min-height: calc(100svh - var(--bar-h) - 46px); align-content: end; }
  .page-home:has(.keyart.art) .hook { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
}
/* desktop stage: the copy block moves under the cast, centred */
@media (min-width: 960px) and (min-height: 600px) {
  .page-home:has(.keyart) .home-copy { left: 50%; top: auto; bottom: 4.6cqw; transform: translateX(-50%); width: 64cqw; gap: .8cqw; }
  .page-home:has(.keyart.art) .home-copy .hook .lt-img img { max-height: 8cqw; }
  .page-home:has(.keyart.art) .home-copy .date-pill .lt-img img { max-height: 7cqw; }
  .page-home:has(.keyart.art) .home-copy .lt-ribbon .lt-img img { max-height: 3cqw; }
  .page-home:has(.keyart.art) .hook { font-size: clamp(1.5rem, 2cqw, 2.4rem); }
  /* lead 20/10: the baked picture paints CBT/OBT/hook down to ~85% of its height, so the buttons go to the bottom of the
     screen (the open sea under the hook), not the bottom of the 1920x900 stage, which put them on the painted OBT ribbon */
  .page-home:has(.keyart.baked) .bg .keyart img { object-position: 50% 55%; }
  .page-home:has(.keyart.baked) .stage { position: static; }
  .page-home:has(.keyart.baked) .home-copy { bottom: max(14px, 1.6vh); }
  .page-home:has(.keyart.baked) .scroll-cue { display: none; }
}

/* keep a Thai compound on one line (the hook's โจรสลัด) */
.nw { white-space: nowrap; }

/* ==========================================================================================================
   lsite3 (21/10): the owner's second phone review. Overrides the rules above; delete this block to roll back.
   - Reading text, labels, buttons and menus use Prompt: the free face closest to the one in his 4th screenshot (that page's
     form labels are DB Helvethaica Bold, a licensed face). Headings and lettering fallbacks stay Kanit.
   - Hero: the art-only key art + the real logo on top with a dark outline and shadow (it "sank" into the painting), three
     sizes chosen by data-logo on #home (a = today's size, b = bigger, c = smaller top right).
   - Lettering tiers: grand (short punchy marks) and simple (long phrases, shown smaller and lighter).
   - Classes: a slider (landing.js) with the chosen class in colour and the rest greyed and stacked aside.
   ========================================================================================================== */
:root {
  --f-body: "Prompt", "Anuphan", "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
  --logo-line: #0c1f45;
}
body { font: 400 1.0625rem/1.75 var(--f-body); }
.eyebrow, .kicker, .btn, .nav a, .cls-tabs button, .dots span, .roles span, .reward, .socials a, .link-site, .reg-closed,
.field label, .check, .clip-badge, .bar-cta { font-family: var(--f-body); }
.btn { font-weight: 500; }
.field label { font-weight: 600; }

/* ---------- lettering tiers ---------- */
/* grand typed fallback (an image is on its way from Codex): game-like cream letters with a navy outline */
.lt-tx[data-lt-tier="grand"] { -webkit-text-stroke: 0; }
/* simple tier: smaller and lighter than the grand marks, typed or drawn (files: lettering.SPECS_SIMPLE, shown at half size) */
.lt-tx[data-lt-tier="simple"] { font-size: .86em; font-weight: 600; }
.lt-img.lt-simple img { max-height: 124px; filter: drop-shadow(0 0 6px rgba(255,255,255,.7)) drop-shadow(0 2px 3px rgba(20,40,92,.3)); }
@media (min-width: 960px) and (min-height: 600px) {
  .event-copy h2 .lt-img.lt-simple img, .sec-head h2 .lt-img.lt-simple img, .reg-card h2 .lt-img.lt-simple img { max-height: 6.4cqw; }
  .rewards-h .lt-img.lt-simple img { max-height: 5.8cqw; }
}

/* ---------- hero over the art-only key art ---------- */
.page-home:has(.keyart.art) .wash { background: linear-gradient(180deg, rgba(8,30,70,.28) 0, rgba(8,30,70,0) 24%, rgba(8,30,70,0) 62%, rgba(240,249,255,.25) 100%); }
/* the art sits a little lower so the logo has sky above the cast; the band it uncovers fades into a matching sky */
.page-home:has(.keyart.art) .bg { background: linear-gradient(180deg, #2f8fe6, #4aa6f2 40%, #7cc3f7); }
.page-home:has(.keyart.art) .bg .keyart { top: var(--ka-drop, 0px); height: calc(100% - var(--ka-drop, 0px));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px); mask-image: linear-gradient(180deg, transparent 0, #000 70px); }
.page-home:has(.keyart.art) .bg .keyart img { object-position: 50% 0; }
.page-home:has(.keyart.art) .home-logo {
  position: absolute; z-index: 3; top: var(--logo-top, 6px); left: 0; right: 0; margin: 0 auto; padding: 0;
  width: var(--logo-w); max-width: var(--logo-max, none); height: auto; overflow: visible; clip: auto; white-space: normal;
  /* a thin dark outline + a soft shadow under it: the lettering's navy outline, lighter */
  filter: drop-shadow(0 0 1px var(--logo-line)) drop-shadow(0 0 1.2px var(--logo-line)) drop-shadow(0 0 5px rgba(12,31,69,.55))
          drop-shadow(0 7px 14px rgba(12,31,69,.45));
}
.page-home[data-logo="c"]:has(.keyart.art) .home-logo { left: auto; right: var(--logo-side, 6px); margin: 0; }
/* the dates when typed (until the short CBT/OBT lettering is drawn): big cream letters with a navy outline */
.page-home .date-pill:not(:has(.lt-img)) {
  padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font: 700 clamp(2.1rem, 1.3rem + 4.4vw, 3.4rem)/1.08 var(--f-display); color: #fff1c2; letter-spacing: .01em;
  --o: .045em; --oc: #13285e;
  text-shadow: var(--o) 0 0 var(--oc), calc(var(--o) * -1) 0 0 var(--oc), 0 var(--o) 0 var(--oc), 0 calc(var(--o) * -1) 0 var(--oc),
    calc(var(--o) * .7) calc(var(--o) * .7) 0 var(--oc), calc(var(--o) * -.7) calc(var(--o) * .7) 0 var(--oc),
    calc(var(--o) * .7) calc(var(--o) * -.7) 0 var(--oc), calc(var(--o) * -.7) calc(var(--o) * -.7) 0 var(--oc),
    0 .1em 0 var(--oc), 0 .16em .3em rgba(8,22,52,.5);
}
.page-home .home-copy > .lt-ribbon:not(:has(.lt-img)) { font-size: clamp(1.05rem, .9rem + 1vw, 1.45rem); padding: .3em 1.4em .38em; }

/* sizes: phones */
@media (max-width: 959px), (max-height: 599px) {
  .page-home { --ka-drop: 92px; }
  .page-home[data-logo="a"] { --logo-w: 64vw; --logo-max: 330px; }
  .page-home[data-logo="b"] { --logo-w: 86vw; --logo-max: 440px; --ka-drop: 128px; --logo-top: 0px; }
  .page-home[data-logo="c"] { --logo-w: 42vw; --logo-max: 210px; --ka-drop: 40px; --logo-top: 2px; }
  .page-home:has(.keyart.art) .home-copy { position: static; }
  .page-home:has(.keyart.art) .stage { position: static; }
  .page-home:has(.keyart.art) .home-logo { top: calc(var(--bar-h) + 6px + var(--logo-top, 0px)); }
  .page-home:has(.keyart.art) .home-copy .hook .lt-img img { max-height: 150px; }
}
/* sizes: the desktop stage (1cqw = 19.2 design px) */
@media (min-width: 960px) and (min-height: 600px) {
  .page-home { --ka-drop: 11vh; }
  .page-home[data-logo="a"] { --logo-w: 27cqw; --logo-top: .4cqw; }
  .page-home[data-logo="b"] { --logo-w: 37cqw; --logo-top: .2cqw; --ka-drop: 17vh; }
  .page-home[data-logo="c"] { --logo-w: 17cqw; --logo-top: 1cqw; --logo-side: 4.5cqw; --ka-drop: 0px; }
  /* the copy block spans the stage so the logo (absolute, inside it) can sit at the top while the rest stacks at the bottom */
  .page-home:has(.keyart.art) .home-copy { left: 0; right: 0; top: 0; bottom: 2.2cqw; width: auto; transform: none; gap: .5cqw;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
  .page-home:has(.keyart.art) .home-copy .hook .lt-img img { max-height: 6cqw; }
  .page-home .date-pill:not(:has(.lt-img)) { font-size: clamp(2rem, 3cqw, 3.8rem); }
  .page-home .home-copy > .lt-ribbon:not(:has(.lt-img)) { font-size: clamp(1rem, 1.3cqw, 1.6rem); }
  .page-home:has(.keyart.art) .scroll-cue { display: none; }
}

/* ---------- classes slider (landing.js builds .cs-item figures inside .cls-slider) ---------- */
.cls-slider { display: none; }
.has-slider .cls-slider {
  display: block; position: relative; height: min(56vh, 420px); margin: 0 -12px; overflow: hidden; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.has-slider .cls-art { display: none; }
.cs-item {
  position: absolute; left: 50%; bottom: 0; height: 100%; aspect-ratio: 1400 / 1800; translate: -50% 0; margin: 0;
  transform-origin: 50% 100%; cursor: pointer;
  filter: grayscale(1) brightness(.8) contrast(.9); opacity: 1;
  transition: transform .46s cubic-bezier(.22,.7,.2,1), filter .46s ease, opacity .46s ease;
  will-change: transform;
}
.cs-item img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; pointer-events: none; }
.cs-item.is-near { filter: grayscale(1) brightness(.9) contrast(.9); }
.cs-item.is-on { filter: drop-shadow(0 18px 24px rgba(20,40,92,.32)); opacity: 1; cursor: default; }
.cs-item.cs-spoiler { cursor: default; filter: brightness(0) drop-shadow(0 0 12px rgba(80,40,140,.6)); opacity: .82; }
.cs-btn {
  position: absolute; z-index: 20; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--navy); background: rgba(255,255,255,.9); cursor: pointer;
  border: 1px solid rgba(20,40,92,.25); box-shadow: var(--shadow); transition: opacity .2s;
}
.cs-btn svg { width: 22px; height: 22px; }
.cs-btn:hover { border-color: var(--gold-deep); }
.cs-btn[disabled] { opacity: 0; pointer-events: none; }
.cs-prev { left: 12px; } .cs-next { right: 12px; }
.has-slider .cls-tabs { flex-wrap: nowrap; gap: 4px; margin: 10px 0 12px; }
.has-slider .cls-tabs button { width: 70px; font-size: .6875rem; }
.has-slider .cls-tabs img { width: 48px; height: 48px; }
.has-slider .cls-tabs button[aria-selected="false"] img { filter: grayscale(.7); opacity: .8; }
/* all five panels share one grid cell, so a switch never moves the page; only the chosen one is visible */
.page-classes.has-slider .stage { display: grid; }
.page-classes.has-slider .stage > .cls { grid-area: 4 / 1; }
.js .cls { transition: opacity .42s ease, visibility .42s; }
.js .cls.is-off { visibility: hidden; opacity: 0; }
.js .cls:not(.is-off) .cls-info { animation: cls-in .46s cubic-bezier(.22,.7,.2,1); }
@keyframes cls-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 960px) and (min-height: 600px) {
  .has-slider .cls-slider { position: absolute; left: 0; bottom: 0; width: 47cqw; height: 46cqw; margin: 0; }
  .cs-item { height: 94%; }
  .cs-btn { width: clamp(44px, 3.1cqw, 60px); height: clamp(44px, 3.1cqw, 60px); margin-top: calc(clamp(44px, 3.1cqw, 60px) / -2); top: 55%; }
  .cs-prev { left: 1.2cqw; } .cs-next { right: 1.2cqw; }
  .page-classes.has-slider .stage { display: block; }
  .has-slider .cls-tabs { flex-wrap: nowrap; gap: .7cqw; }
  .has-slider .cls-tabs button { width: clamp(70px, 5.6cqw, 108px); font-size: clamp(.6875rem, .68cqw, .8125rem); }
  .has-slider .cls-tabs img { width: clamp(46px, 3.9cqw, 74px); height: clamp(46px, 3.9cqw, 74px); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-item, .js .cls { transition: none; }
  .js .cls:not(.is-off) .cls-info { animation: none; }
}

/* ---------- lead 21/10 19:1x (owner: phone C, desktop A; the phone hero had lost its sky and the cast sank) ----------
   The phone hero is taller than the screen (the copy stacks under it), and "cover" on that tall box zoomed the art in:
   the sky went off the top and the cast slid down behind the dates. The art box now covers the first screen only,
   so the picture keeps the proportions of the v9 baked hero (sky, cast, then the lettering over the sea);
   whatever lies below the first screen continues in the art's own bottom colour. */
@media (max-width: 959px), (max-height: 599px) {
  .page-home[data-logo-phone="c"] { --logo-w: 42vw; --logo-max: 210px; --logo-top: 2px; }
  .page-home[data-logo-phone="c"]:has(.keyart.art) .home-logo { left: auto; right: var(--logo-side, 6px); margin: 0; }
  .page-home:has(.keyart.art) { --ka-drop: calc(var(--bar-h) + 10px); }
  .page-home:has(.keyart.art) .bg { background: linear-gradient(180deg, #3597fb 0, #3597fb calc(var(--bar-h) + 12px), #7fd0f2 70svh, #eff4e6 100svh, #eff4e6 100%); }
  .page-home:has(.keyart.art) .bg .keyart { top: var(--ka-drop); bottom: auto; height: calc(100svh - var(--ka-drop));
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 40px), transparent 100%); }
  .page-home:has(.keyart.art) .bg .keyart img { object-position: 50% 0; }
}

/* ---------- lead 23/10 (owner: the chosen class must stand out; grey icons for the unchosen; icons must not cover the card) ----------
   The unchosen classes are smaller and farther out (landing.js OFF/SC), and now also faded and softly blurred behind the chosen one.
   Desktop: the info card is anchored above the icon row instead of centred, so a tall card (with its clip) never runs under it. */
.cs-item { filter: grayscale(1) brightness(1.08) contrast(.7) blur(2.5px); opacity: .5; }
.cs-item.is-near { filter: grayscale(1) brightness(1.04) contrast(.75) blur(1.5px); opacity: .62; }
.cs-item.is-on { filter: drop-shadow(0 18px 24px rgba(20,40,92,.32)); opacity: 1; }
.has-slider .cls-tabs button[aria-selected="false"] img { filter: grayscale(1) brightness(1.05); opacity: .55; }
.has-slider .cls-tabs button[aria-selected="false"]:hover img { filter: grayscale(.4); opacity: .85; }
.has-slider .cls-tabs button[aria-selected="false"] { color: var(--muted, #56637d); }
@media (min-width: 960px) and (min-height: 600px) {
  .cls-info {
    top: auto; transform: none;
    bottom: calc(2.6cqw + clamp(46px, 3.9cqw, 74px) + 4.6cqw);
    max-height: calc(100% - 2.6cqw - clamp(46px, 3.9cqw, 74px) - 4.6cqw - 3cqw);
  }
  .clip { width: min(100%, 26cqw); }
}
/* lead 23/10 (owner): side classes less blurred and fully opaque (no see-through); the locked Voodoo "?" icon is back in the row,
   shown like a tab but not one: it is not focusable and not clickable. */
.cs-item { filter: grayscale(1) brightness(1.06) contrast(.78) blur(.8px); opacity: 1; }
.cs-item.is-near { filter: grayscale(1) brightness(1.02) contrast(.82) blur(.5px); opacity: 1; }
.cls-tab-locked {
  display: grid; justify-items: center; align-content: start; gap: 4px; width: 92px; padding: 4px 0;
  font: 500 .75rem/1.25 var(--f-display); color: var(--muted, #56637d); cursor: default; user-select: none;
}
.cls-tab-locked .lock-dot { width: 56px; height: 56px; font-size: 1.4rem; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(20,40,92,.2); opacity: .85; }
.has-slider .cls-tab-locked { width: 70px; font-size: .6875rem; }
.has-slider .cls-tab-locked .lock-dot { width: 48px; height: 48px; }
@media (min-width: 960px) and (min-height: 600px) {
  .has-slider .cls-tab-locked { width: clamp(70px, 5.6cqw, 108px); font-size: clamp(.6875rem, .68cqw, .8125rem); }
  .has-slider .cls-tab-locked .lock-dot { width: clamp(46px, 3.9cqw, 74px); height: clamp(46px, 3.9cqw, 74px); }
}
/* phones: six icons in one row (was five) */
@media (max-width: 959px), (max-height: 599px) {
  .has-slider .cls-tabs { gap: 2px; justify-content: space-between; }
  .has-slider .cls-tabs button, .has-slider .cls-tab-locked { width: calc((100% - 10px) / 6); font-size: .625rem; }
  .has-slider .cls-tabs img, .has-slider .cls-tab-locked .lock-dot { width: 44px; height: 44px; }
  .has-slider .cls-tab-locked .lock-dot { font-size: 1.2rem; }
}
/* owner 23/10 ("แบบ 2"): the unchosen classes are dark, opaque near-silhouettes; the chosen one stays in full colour */
/* every state uses the SAME filter list (grayscale, brightness, contrast, drop-shadow): a transition between two different lists
   cannot interpolate, and iOS Safari then sometimes left the chosen class stuck dark (owner's phone, 23/10) */
.cs-item { filter: grayscale(1) brightness(.32) contrast(1.1) drop-shadow(0 0 0 rgba(20,40,92,0)); opacity: 1; }
.cs-item.is-near { filter: grayscale(1) brightness(.4) contrast(1.05) drop-shadow(0 0 0 rgba(20,40,92,0)); opacity: 1; }
.cs-item.is-on { filter: grayscale(0) brightness(1) contrast(1) drop-shadow(0 18px 24px rgba(20,40,92,.32)); }
.cs-item.cs-spoiler { filter: brightness(0) drop-shadow(0 0 12px rgba(80,40,140,.6)); opacity: .82; }

/* ---------- lead 23/10 (owner, on his phone): the chosen class, its clip and its name fit on ONE phone screen, like ds.in.th/launch ----------
   Order on phones: a smaller "อาชีพ" title, the icon row, the character, then the card pulled up over the character's legs with the
   clip first and the name and a 3-line description under it. */
@media (max-width: 959px), (max-height: 599px) {
  .page-classes.has-slider { padding-top: 10px; padding-bottom: 20px; }  /* the menu bar is already cleared by scroll-padding */
  .page-classes.has-slider .stage { grid-template-rows: auto auto auto auto; row-gap: 0; }
  .page-classes.has-slider .cls-title { grid-row: 1; margin-bottom: 4px; }
  .page-classes.has-slider .cls-title .lt-img img { max-height: 44px; width: auto; }
  .page-classes.has-slider .cls-tabs { grid-row: 2; margin: 2px 0 0; }
  .page-classes.has-slider .cls-slider { grid-row: 3; height: 44svh; min-height: 270px; }
  .page-classes.has-slider .stage > .cls { grid-row: 4; grid-column: 1; margin-top: -15svh; position: relative; z-index: 15; }
  .page-classes.has-slider .cls-info { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
  .page-classes.has-slider .cls-info .clip { order: -1; width: 100%; margin: 0; }
  .page-classes.has-slider .cls-info .kicker { display: none; }
  .page-classes.has-slider .cls-info h3 { font-size: 1.375rem; line-height: 1.2; margin: 2px 0 0; }
  .page-classes.has-slider .cls-info .roles { margin: 0; }
  .page-classes.has-slider .cls-info .desc {
    font-size: .8125rem; line-height: 1.55; margin: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
}

/* ---------- lead 23/10 (owner: let pictures move a little so they feel alive, like ds.in.th): a slow idle "breath" ----------
   Only the chosen class moves (the slider moves the figure, so the breath is on its picture inside); nothing moves under
   prefers-reduced-motion. */
@keyframes pf-breathe { 0%, 100% { transform: translateY(0) rotate(-.2deg); } 50% { transform: translateY(-6px) rotate(.25deg); } }
.cs-item.is-on img { animation: pf-breathe 7.5s ease-in-out infinite; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .cs-item.is-on img { animation: none; } }

/* ---------- lead 23/10 20:1x (owner, phone): role tags on the name line, a smaller clip, every class standing whole ABOVE the
   clip box (no overlap), and a calmer idle motion ---------- */
@media (max-width: 959px), (max-height: 599px) {
  .page-classes.has-slider .cls-slider { height: 36svh; min-height: 240px; }
  .page-classes.has-slider .stage > .cls { margin-top: 0; }
  .page-classes.has-slider .cls-info {
    display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 6px; }
  .page-classes.has-slider .cls-info .clip { grid-column: 1 / -1; grid-row: 1; width: 82%; justify-self: center; }
  .page-classes.has-slider .cls-info h3 { grid-column: 1; grid-row: 2; margin: 0; }
  .page-classes.has-slider .cls-info .roles { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px; }
  .page-classes.has-slider .cls-info .roles span { font-size: .6875rem; padding: 2px 8px; }
  .page-classes.has-slider .cls-info .desc { grid-column: 1 / -1; grid-row: 3; }
}
@keyframes pf-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.cs-item.is-on img { animation-duration: 11s; }
/* lead 23/10 20:4x (owner: bigger character, feet ON the video frame): the art is taller and reaches down over the card's top
   strip, so the feet stand on the clip's gold frame; the art layer sits above the card. */
@media (max-width: 959px), (max-height: 599px) {
  .page-classes.has-slider .cls-title .lt-img img { max-height: 38px; }
  .page-classes.has-slider .cls-slider { height: 42svh; min-height: 270px; z-index: 20; }
  .page-classes.has-slider .stage > .cls { margin-top: -44px; }
  .page-classes.has-slider .cls-info { padding-top: 16px; }
}
/* lead 23/10 20:5x (owner, Gladiator screenshot): the feet go back to the card's top edge, as in the first phone version, and the
   art no longer covers the clip's frame; the clip is a little wider. */
@media (max-width: 959px), (max-height: 599px) {
  .page-classes.has-slider .cls-slider { height: 38svh; min-height: 250px; }
  .page-classes.has-slider .stage > .cls { margin-top: -18px; }  /* the art box ends ~18px below the feet */
  .page-classes.has-slider .cls-info { padding-top: 12px; }
  .page-classes.has-slider .cls-info .clip { width: 85%; }  /* owner 21:0x: 85% */
}
/* lead 24/10 00:1x (owner): the clip back to 92% and a bigger character; the title gives up a few pixels to keep one screen */
@media (max-width: 959px), (max-height: 599px) {
  .page-classes.has-slider .cls-title .lt-img img { max-height: 32px; }
  .page-classes.has-slider .cls-slider { height: 42svh; min-height: 270px; }
  .page-classes.has-slider .stage > .cls { margin-top: -20px; }
  .page-classes.has-slider .cls-info .clip { width: 92%; }
}

/* ---------- lead 24/10 (owner's hero picks, raw one-pass pictures with the logo and lettering painted in) ----------
   Phones: the whole painted picture shows under the menu bar at full width, never cropped (its sign and hook are the
   message), and the buttons sit in one compact row on the painted pier under the hook. The page grows on a short phone
   rather than cutting the picture. */
@media (max-width: 959px), (max-height: 599px) {
  .page-home:has(.keyart.baked) { min-height: calc(var(--bar-h) + 100vw * 1672 / 941); height: auto; padding-bottom: 0; }
  .page-home:has(.keyart.baked) .stage { position: static; }
  .page-home:has(.keyart.baked) .bg .keyart { inset: var(--bar-h) 0 auto; height: auto; aspect-ratio: 941 / 1672; }
  .page-home:has(.keyart.baked) .bg .keyart img { position: static; height: auto; }
  .page-home:has(.keyart.baked) .home-copy { position: absolute; left: 12px; right: 12px; min-height: 0; padding: 0;
    top: calc(var(--bar-h) + 100vw * 1672 / 941 * .885); }
  .page-home:has(.keyart.baked) .cta-row { flex-wrap: nowrap; gap: 8px; }
  .page-home:has(.keyart.baked) .cta-row .btn-lg { min-height: 44px; padding: 8px 16px; font-size: .9375rem; }
  .page-home:has(.keyart.baked) .cta-row .btn small,
  .page-home:has(.keyart.baked) .cta-row .link-site,
  .page-home:has(.keyart.baked) .scroll-cue { display: none; }
}

/* ---------- lead 25/10 (owner: "ปรับหน้าเว็บให้เข้ากับภาพ") desktop: the page fits itself to the painted picture ----------
   The whole picture shows under the menu bar, never cropped (no logo under the bar, no button on the hook); the buttons get their
   own band under it; the screen's spare width shows a blurred, darker copy of the same picture (--ka-img), so no AI margin is needed.
   lead 26/10: OFF. The owner rejected the letterbox (25/10) and now uses the v9 picture, which fills the screen as it did in v9
   (the 20/10 rules above). The impossible media query keeps the block for reference; delete "and (max-width: 0px)" to turn it back on. */
@media (min-width: 960px) and (min-height: 600px) and (max-width: 0px) {
  .page-home:has(.keyart.baked) { --cta-h: 88px; }
  .page-home:has(.keyart.baked) .bg { background: #1d5f9e; }
  .page-home:has(.keyart.baked) .bg::before { content: ""; position: absolute; inset: -40px; background: var(--ka-img) center / cover no-repeat;
    filter: blur(28px) brightness(.72) saturate(1.1); }
  .page-home:has(.keyart.baked) .bg .keyart { top: var(--bar-h); bottom: var(--cta-h); left: 0; right: 0; height: auto; }
  .page-home:has(.keyart.baked) .bg .keyart img { object-fit: contain; object-position: 50% 50%;
    filter: drop-shadow(0 10px 28px rgba(8, 24, 56, .45)); }
  .page-home:has(.keyart.baked) .home-copy { bottom: calc((var(--cta-h) - 56px) / 2); }
}