/* Pirate Force: Resurrection — promo site v3 ("sunny day"). One stylesheet for every page.
   v3 keeps every v2 page, band, carousel and line of copy, and re-skins it after the owner's poster S02:
   a bright blue sky with white clouds, turquoise sea, warm wood/sand, gold rope portholes, navy lettering
   from the A3 logo, coral from the poster's ribbons. Decoration (all hand-made SVG/CSS, see make_art_v3.py):
   terraced "Hanging Gardens", gold rings + compass rose, a daytime moon and stars, a "gypsy" coin-fringe band.

   ONE LOOK ONLY: the site commits to a light scheme (color-scheme: light, explicit backgrounds everywhere);
   it does not follow the OS dark mode.
   Fonts stay v2's: Chonburi's heavy bracketed serif is the closest Thai+Latin match to the poster's navy title
   lettering (a rounded face such as Mitr fought the logo), Cinzel for small Latin labels, IBM Plex Sans Thai
   Looped for reading text.
   Text contrast (WCAG AA): navy/ink 11-14:1 on every light ground; muted #4a5878 >= 5.9:1 and gold-text
   #7f5200 >= 5.6:1 on white/parchment/sky-wash; sea-deep and coral-deep >= 4.8:1. Text never sits on mid sky.
   Motion: one moment only, the hero clouds drift (off under prefers-reduced-motion). */
:root {
  color-scheme: light;
  --navy: #14285c;
  --ink: #1f2f55;
  --muted: #4a5878;
  --sky: #63bdf5;
  --sky-mid: #a9dbfa;
  --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;
  --cloud: #ffffff;
  --body: #fdf8ee;
  --parchment: #f8eed6;
  --sand: #ead6a8;
  --line: rgba(176, 122, 18, .3);
  --line-soft: rgba(20, 40, 92, .12);
  --shadow: 0 14px 34px -20px rgba(20, 40, 92, .45);
  /* v2 names still used by inline styles in the page bodies */
  --deep: #e8f5fd;
  --abyss: #14285c;

  --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;

  --t-xs: .8125rem; --t-sm: .9375rem; --t-md: 1.0625rem; --t-lg: 1.3125rem;
  --t-xl: clamp(1.625rem, 1.15rem + 2vw, 2.5rem);
  --t-2xl: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
  --t-hero: clamp(2rem, 1.2rem + 3.6vw, 3.875rem);
  --gutter: clamp(16px, 4vw, 56px);
  --wrap: 1240px;
  --card-w: clamp(250px, 72vw, 300px);
  --radius: 16px;
  /* gold rope for the round portholes */
  --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); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--body); color: var(--ink);
  font: 400 var(--t-md)/1.75 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--sea-deep); }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.3; margin: 0; color: var(--navy); text-wrap: balance; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--sea-deep); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap > *, .grid-2 > *, .hero-copy > * { min-width: 0; }

/* both languages live in the page; the root's data-lang shows one */
html[data-lang="en"] [lang="th"]:not(html) { display: none !important; }
html:not([data-lang="en"]) [lang="en"]:not(html) { display: none !important; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 14px; z-index: 60; }
.skip:focus { left: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- small parts ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em; margin: 0;
  font: 700 var(--t-xs)/1.4 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text);
}
.eyebrow [lang="th"] { font-family: var(--f-body); font-weight: 600; letter-spacing: .02em; font-size: var(--t-sm); text-transform: none; }
.eyebrow svg { width: 22px; height: 22px; flex: none; color: var(--gold-deep); }
.lede { color: var(--muted); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); max-width: 40em; }

.btn {
  --b: var(--gold-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .7em 1.4em; border-radius: 999px;
  font: 600 var(--t-sm)/1.2 var(--f-body); text-decoration: none; cursor: pointer;
  border: 1px solid var(--b); transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.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,.88); --b: rgba(20,40,92,.28); }
.btn-ghost:hover { --b: var(--gold-deep); background: #fff; }
.btn[disabled] { cursor: not-allowed; color: #5a6684; background: rgba(238,242,247,.92); --b: rgba(20,40,92,.18); box-shadow: none; }
.btn small { font-weight: 400; color: #5a6684; }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; font-size: var(--t-sm); color: var(--sea-deep); text-decoration: none; }
.link-arrow::after { content: "\2192"; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(3px); }
.tag {
  display: inline-block; font: 700 11px/1 var(--f-body); letter-spacing: .04em;
  color: #fff; background: var(--sea-deep); padding: 5px 9px 4px; border-radius: 999px;
}
.tag-soon { background: var(--coral-deep); }

/* ---------- header ---------- */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .9); 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 .wrap { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.bar-logo { flex: none; }
.bar-logo img { height: 50px; width: auto; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  color: var(--navy); text-decoration: none; font-size: var(--t-sm); padding: 8px 12px; border-radius: 999px;
  transition: background-color .2s, color .2s;
}
.nav a:hover { background: rgba(242,182,50,.18); }
.nav a[aria-current="page"] { background: rgba(242,182,50,.28); box-shadow: inset 0 0 0 1px rgba(176,122,18,.35); font-weight: 600; }
.lang {
  font: 700 var(--t-xs)/1 var(--f-label); letter-spacing: .12em; color: var(--navy);
  background: #fff; border: 1px solid rgba(20,40,92,.25); border-radius: 999px; padding: 0 14px; min-height: 38px; cursor: pointer;
}
.lang:hover { border-color: var(--gold-deep); }
.bar .btn { min-height: 40px; padding: .45em 1.1em; font-size: var(--t-xs); }
.menu-btn {
  display: none; align-items: center; justify-content: center; width: 42px; height: 42px; 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; }
@media (max-width: 1020px) {
  .menu-btn { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px -18px rgba(20,40,92,.5);
  }
  .nav.open { display: flex; }
  .nav a { border-radius: 8px; padding: 12px; font-size: var(--t-md); }
  .bar .lang { margin-left: 0; }
}
@media (max-width: 460px) { .bar .btn { display: none; } .bar-logo img { height: 42px; } .bar .wrap { gap: 10px; } }

/* ---------- sky scene (home hero) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--sky) 0%, #8fcff8 28%, var(--sky-hi) 62%, #f1f9ff 86%);
}
.scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.scene .sun {
  position: absolute; width: 520px; height: 520px; left: 18%; top: -250px; border-radius: 50%;
  background: radial-gradient(closest-side, #fffef5 0 22%, rgba(255,240,180,.85) 32%, rgba(255,236,170,.35) 58%, rgba(255,236,170,0) 100%);
}
.scene .clouds {
  position: absolute; left: 0; top: 10px; height: 360px; width: calc(100% + 1600px);
  display: none; /* lsite2: drawn clouds removed */
}
@media (prefers-reduced-motion: no-preference) {
  .scene .clouds { animation: drift 220s linear infinite; }
  @keyframes drift { to { transform: translateX(-1600px); } }
}
.scene .marks { position: absolute; width: 150px; height: auto; right: 4%; top: 18px; opacity: .9; }
.scene .gulls { position: absolute; width: 120px; left: 46%; top: 64px; fill: none; stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; opacity: .55; }
.scene .gardens { position: absolute; left: -3%; bottom: 52px; width: max(1000px, 86%); height: auto; max-width: none; opacity: .45; }
.scene .sea {
  position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(180deg, transparent 38px, #25bfcd 38px, #15a5b9 100%);
}
.hero-inner {
  padding-block: clamp(36px, 6vh, 72px) 132px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 28px clamp(24px, 4vw, 64px); align-items: center;
}
.hero-copy { display: grid; gap: 20px; max-width: 640px; }
.hero-logo { width: min(100%, 470px); position: relative; }
.hero-logo::before {  /* a soft cloud of light behind the logo keeps its edge crisp on the sky */
  content: ""; position: absolute; inset: -18% -10%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.6) 55%, rgba(255,255,255,0));
}
.hero-logo img { width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(20,40,92,.18)); }
.hero h1 { font-size: var(--t-hero); line-height: 1.22; color: var(--navy); text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.hero h1 em { font-style: normal; color: var(--coral-deep); }
.hero h1 small { display: block; margin-top: .35em; font-size: .5em; line-height: 1.35; color: var(--ink); }
.hero .lede { color: var(--ink); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.proof {
  grid-column: 1 / -1; margin: 6px 0 0; padding: 16px clamp(16px, 3vw, 28px);
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px;
  background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.proof li { display: grid; gap: 2px; }
.proof b { font: 400 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1.1 var(--f-display); color: var(--coral-deep); }
.proof span { font-size: var(--t-sm); color: var(--ink); }

/* the round gold-rope porthole (home hero) */
.porthole { position: relative; margin: 0; aspect-ratio: 1; width: 100%; max-width: 500px; justify-self: center; }
.porthole img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  padding: 5.4%; background: var(--rope);
  box-shadow: 0 0 0 3px #9c6512, 0 26px 50px -24px rgba(20,40,92,.6), inset 0 0 0 2px #9c6512;
}
.porthole::after { content: ""; position: absolute; inset: -7.5%; display: none; /* lsite2: rope ring removed */ pointer-events: none; }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .hero-copy { display: contents; }
  .hero-logo { order: 1; justify-self: center; width: min(100%, 400px); }
  .porthole { order: 2; width: min(78vw, 360px); }
  .hero h1 { order: 3; }
  .hero .lede { order: 4; }
  .cta-row { order: 5; }
  .proof { order: 6; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene .sun { left: -120px; }
  .scene .marks { width: 104px; top: 8px; right: 2%; }
  .scene .gulls { left: auto; right: 30%; top: 30px; width: 90px; }
}

/* ---------- page hero (sub-pages): sky, clouds, gardens, porthole picture ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line);
  background:
    
    
    linear-gradient(180deg, var(--sky) 0%, #9ad6fa 40%, var(--sky-hi) 75%, #f1f9ff 100%);
}
.page-hero::before {  /* a pale veil so the text column reads on the sky */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(241,249,255,.9) 0%, rgba(241,249,255,.72) 42%, rgba(241,249,255,0) 68%);
}
.page-hero > img {
  position: absolute; z-index: 0; right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  top: 50%; transform: translateY(-50%); width: clamp(220px, 26vw, 340px); height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: 50%; padding: 12px; background: var(--rope);
  box-shadow: 0 0 0 3px #9c6512, 0 0 0 9px rgba(255,255,255,.75), 0 0 0 11px rgba(176,122,18,.5), 0 24px 44px -22px rgba(20,40,92,.6);
}
.page-hero .wrap { position: relative; z-index: 1; padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 88px); display: grid; gap: 16px; max-width: var(--wrap); }
.page-hero .wrap > * { max-width: min(100%, 640px); }
.page-hero h1 { font-size: var(--t-2xl); max-width: 14em; }
.page-hero .lede { color: var(--ink); }
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 0; list-style: none; }
.subnav a { display: inline-block; padding: 8px 14px; border: 1px solid rgba(20,40,92,.22); border-radius: 999px; color: var(--navy); text-decoration: none; font-size: var(--t-sm); background: rgba(255,255,255,.9); }
.subnav a:hover { border-color: var(--gold-deep); background: #fff; }
@media (max-width: 860px) {
  .page-hero { background-size: auto; }
  .page-hero::before { background: linear-gradient(180deg, rgba(241,249,255,0) 0, rgba(241,249,255,.75) 220px, rgba(241,249,255,.85) 100%); }
  .page-hero > img { position: relative; right: auto; top: auto; transform: none; width: 190px; margin: 32px auto 0; }
  .page-hero .wrap { padding-top: 24px; }
}

/* ---------- bands ---------- */
.band { padding-block: clamp(64px, 9vw, 112px); position: relative; isolation: isolate; }
.band + .band { border-top: 1px solid var(--line-soft); }
.band-alt {  /* sky wash, with the daytime moon and stars in the corner */
  background:
    
    linear-gradient(180deg, var(--sky-wash) 0%, #f5fbff 100%);
}
.chart-bg {  /* parchment chart, with a gold compass-rose watermark */
  background-color: var(--parchment);
  background-image:
    
    linear-gradient(rgba(176,122,18,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,122,18,.07) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px;
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
}
.band-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.band-head .txt { display: grid; gap: 12px; max-width: 760px; }
.band-head h2 { font-size: var(--t-2xl); }
.band-head .actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .band-head { grid-template-columns: minmax(0, 1fr); } .band-head .actions { justify-content: space-between; }
  .band-alt { background-size: auto; }
  .chart-bg { background-size: 88px 88px, 88px 88px; }
}

/* ---------- carousel ---------- */
.carousel { position: relative; }
.c-nav { display: flex; gap: 8px; }
.c-nav button {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--navy); border: 2px solid var(--gold); box-shadow: 0 6px 14px -8px rgba(20,40,92,.5);
  transition: background-color .2s, border-color .2s, opacity .2s;
}
.c-nav button:hover:not(:disabled) { background: #fff6dc; border-color: var(--gold-deep); }
.c-nav button:disabled { opacity: .4; cursor: default; }
.c-nav svg { width: 18px; height: 18px; }
.track {
  display: flex; gap: clamp(14px, 1.6vw, 22px); list-style: none; margin: 0;
  --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding: 6px var(--edge) 26px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  scrollbar-width: thin; scrollbar-color: var(--gold) transparent;
}
.track:focus-visible { outline-offset: -3px; }
.track > li { flex: 0 0 var(--card-w); scroll-snap-align: start; display: flex; }

/* one card shape everywhere: 4:5 picture, title, one or two lines, link */
.card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid #ecdcb6; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 10px 26px -18px rgba(20,40,92,.45);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card:hover, .card:focus-within { border-color: var(--gold); box-shadow: 0 18px 36px -18px rgba(20,40,92,.5), 0 0 0 2px rgba(242,182,50,.35); }
@media (prefers-reduced-motion: no-preference) { .card:hover { transform: translateY(-3px); } }
.card .media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sky-wash); margin: 0; }
.card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
@media (prefers-reduced-motion: no-preference) { .card:hover .media.cover img { transform: scale(1.03); } }
/* picture shown whole on a decorated tile: game cards, cut-outs, native-size icon sheets */
.media.tile {
  display: grid; place-items: center; padding: 18px;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(255,255,255,.95), transparent 70%),
    linear-gradient(rgba(10,110,125,.08) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(10,110,125,.08) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, #e6f5fd, #cfeaf7);
}
.media.tile img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(20,40,92,.25)); }
.media.tile.native img { image-rendering: auto; }
.media.glow { --cc: var(--gold); background: radial-gradient(60% 55% at 50% 52%, color-mix(in srgb, var(--cc) 34%, transparent), transparent 74%), linear-gradient(180deg, #f2f9ff, #dceffb); }
.media .badge { position: absolute; left: 12px; top: 12px; z-index: 2; }
.media .src { position: absolute; right: 10px; bottom: 8px; z-index: 2; font-size: 11px; color: var(--navy); background: rgba(255,255,255,.9); padding: 2px 8px; border-radius: 999px; }
.card .body { display: grid; gap: 8px; padding: 16px 18px 18px; flex: 1; align-content: start; }
.card h3 { font-size: var(--t-lg); line-height: 1.35; }
.card h3.latin { font-family: var(--f-label); font-weight: 700; letter-spacing: .03em; }
.card p { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; }
.card .link-arrow { margin-top: auto; padding-top: 4px; }
.card .stretch::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.card .media.glow img { object-fit: contain; padding: 14px 12px 30px; filter: drop-shadow(0 12px 18px rgba(20,40,92,.3)); }
.card .media.glow.cover img { object-fit: cover; padding: 0; }
.card .media img.icon { width: 48px; height: 48px; padding: 3px; object-fit: contain; filter: none; }
.card .icon { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); padding: 3px; z-index: 2; box-shadow: 0 4px 10px -4px rgba(20,40,92,.5); }
.card.has-icon .body { padding-top: 14px; text-align: center; justify-items: center; }
.card.locked .media { filter: saturate(.8); }
.card.locked h3 { color: var(--muted); }

/* ---------- CTA strip: sky band, coin fringe, a porthole view ---------- */
.cta-strip {
  position: relative; isolation: isolate; overflow: hidden; border-block: 1px solid var(--line);
  background:
    
    linear-gradient(180deg, #8fd0f8 0%, var(--sky-hi) 70%, #eaf6fd 100%);
}
.cta-strip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; z-index: 1;
  display: none; /* lsite2: coin fringe removed */
}
.cta-strip > img {
  position: absolute; z-index: 0; top: 50%; transform: translateY(-50%);
  left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  width: 168px; height: 168px; object-fit: cover; border-radius: 50%; padding: 8px; background: var(--rope);
  box-shadow: 0 0 0 2px #9c6512, 0 0 0 7px rgba(255,255,255,.8), 0 16px 30px -16px rgba(20,40,92,.6);
}
.cta-strip .wrap {
  position: relative; z-index: 1; padding-block: clamp(56px, 7vw, 76px) clamp(40px, 6vw, 60px);
  padding-left: calc(var(--gutter) + 200px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap;
}
.cta-strip .wrap > div { background: rgba(255,255,255,.8); padding: 14px 20px; border-radius: 14px; }
.cta-strip h2 { font-size: var(--t-xl); }
.cta-strip p { color: var(--ink); }
@media (max-width: 640px) {
  .cta-strip > img { position: relative; left: auto; top: auto; transform: none; width: 132px; height: 132px; margin: 52px auto 0; }
  .cta-strip .wrap { padding-left: var(--gutter); padding-top: 20px; }
}

/* ---------- roadmap ---------- */
.roadmap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--sea) 70%, rgba(34,188,203,.2)); }
.timeline li { position: relative; display: grid; gap: 6px; justify-items: start; padding-right: 12px; }
.timeline .dot { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--gold); font: 400 var(--t-sm)/1 var(--f-display); color: var(--gold-text); position: relative; z-index: 1; box-shadow: 0 0 0 4px rgba(255,255,255,.8); }
.timeline li.next .dot { border-color: var(--sea); color: var(--sea-deep); }
.timeline li.future .dot { border-style: dashed; border-color: #8b97b0; color: var(--muted); }
.timeline h3 { font-size: var(--t-md); margin-top: 8px; }
.timeline p { color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }
.timeline .cap { font: 400 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--f-display); color: var(--coral-deep); }
.cadence { display: grid; gap: 14px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.cadence h3 { font-size: var(--t-lg); }
.cadence dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: var(--t-sm); }
.cadence dt { color: var(--gold-text); font-weight: 600; }
.cadence dd { margin: 0; color: var(--ink); }
.future-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.future-list li { padding: 14px 16px; border: 1px dashed rgba(176,122,18,.45); border-radius: 12px; background: rgba(255,255,255,.8); font-size: var(--t-sm); color: var(--ink); }
.future-list b { display: block; color: var(--navy); font-weight: 600; }
@media (max-width: 980px) {
  .roadmap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .timeline::before { left: 22px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, var(--gold), var(--sea) 70%, rgba(34,188,203,.2)); }
  .timeline li { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .timeline li > :not(.dot) { grid-column: 2; }
  .timeline .dot { grid-row: 1 / span 3; align-self: start; }
  .timeline h3 { margin-top: 0; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { border: 1px solid #ecdcb6; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px -18px rgba(20,40,92,.5); }
.faq details[open] { border-color: var(--gold); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; position: relative; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--gold); font: 600 1.15rem/1 var(--f-body); color: var(--gold-text); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 20px 18px; color: var(--muted); font-size: var(--t-sm); }

/* ---------- beta sign-up: the terraced gardens under a full sky ---------- */
.beta {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    
    linear-gradient(180deg, var(--sky) 0%, #9ad6fa 45%, var(--sky-hi) 80%, #e9f6fd 100%);
}
.beta > img { position: absolute; left: 0; bottom: 0; width: max(1000px, 100%); max-width: none; height: auto; z-index: -1; }
.beta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; z-index: -1; background: linear-gradient(180deg, #5cbc62, #3f9b50); }
.beta .wrap { padding-block: clamp(72px, 10vw, 130px) clamp(150px, 18vw, 230px); }
.beta-card {
  position: relative; max-width: 620px; margin-left: auto; padding: clamp(52px, 6vw, 64px) clamp(22px, 4vw, 44px) clamp(24px, 4vw, 40px);
  background: #fffaf0; border: 2px solid var(--gold); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 0 0 6px rgba(255,255,255,.6), 0 28px 50px -26px rgba(20,40,92,.6); display: grid; gap: 18px;
}
.beta-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; display: none; }
.beta-card h2 { font-size: var(--t-2xl); }
.signup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.signup label { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--navy); font-weight: 600; }
.signup input { min-height: 52px; width: 100%; min-width: 0; padding: 0 18px; font: 400 var(--t-md) var(--f-body); color: var(--ink); background: #fff; border: 1px solid rgba(20,40,92,.3); border-radius: 999px; }
.signup input::placeholder { color: #69728a; }
.signup input:focus-visible { outline: 3px solid var(--sea-deep); outline-offset: 1px; border-color: var(--sea-deep); }
.signup .btn { min-height: 52px; }
.form-note { font-size: var(--t-xs); color: var(--muted); }
.form-status { font-size: var(--t-sm); color: var(--sea-deep); min-height: 1.75em; }
.form-status.err { color: var(--coral-deep); }
@media (max-width: 520px) { .signup { grid-template-columns: minmax(0, 1fr); } }

/* ---------- content sections (sub-pages) ---------- */
.sec { padding-block: clamp(56px, 8vw, 104px); scroll-margin-top: 76px; }
.sec + .sec { border-top: 1px solid var(--line-soft); }
.sec-head { display: grid; gap: 12px; margin-bottom: clamp(24px, 4vw, 40px); max-width: 780px; }
.sec-head h2 { font-size: var(--t-xl); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.facts-list li { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.facts-list b { color: var(--navy); font-weight: 600; }
.facts-list span { color: var(--muted); }
@media (max-width: 560px) { .facts-list li { grid-template-columns: minmax(0, 1fr); } }
.shot { margin: 0; display: grid; gap: 8px; }
.shot img { width: 100%; height: auto; border-radius: 12px; border: 1px solid #ecdcb6; box-shadow: 0 10px 24px -18px rgba(20,40,92,.5); }
.shot figcaption { font-size: var(--t-xs); color: var(--muted); }
.shot.native img { width: auto; max-width: 100%; }
kbd { font: 600 var(--t-xs)/1 var(--f-body); color: var(--navy); border: 1px solid var(--gold-deep); border-bottom-width: 3px; padding: 4px 8px; background: #fff; border-radius: 4px; }
.note { font-size: var(--t-xs); color: var(--muted); margin-top: 16px; }
.seachart { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seachart > div { background: #fff; padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.seachart h3 { font-family: var(--f-label); font-weight: 700; font-size: var(--t-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.seachart ul { list-style: none; margin: 0; padding: 0; color: var(--ink); font-size: var(--t-sm); }
.seachart li::before { content: "~ "; color: var(--sea-deep); }

/* story timeline (opening movie) */
.opening { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gold); }
.opening li { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 12px; padding: 12px 0 12px 18px; position: relative; }
.opening li::before { content: ""; position: absolute; left: -6px; top: 22px; width: 9px; height: 9px; transform: rotate(45deg); background: #fff; border: 2px solid var(--gold-deep); }
.opening time { font: 500 var(--t-xs)/2.1 var(--f-label); letter-spacing: .08em; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.opening .line { font-family: var(--f-display); font-size: clamp(1.125rem, 1rem + .6vw, 1.4375rem); line-height: 1.5; color: var(--navy); }
.opening li.key .line { color: var(--coral-deep); }

/* classes: the create room */
.select { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.roster { display: grid; gap: 8px; }
.roster button {
  --cc: var(--gold);
  display: grid; grid-template-columns: 44px minmax(0,1fr); column-gap: 12px; align-items: center;
  text-align: left; width: 100%; padding: 8px 12px 8px 8px; cursor: pointer; border-radius: 12px;
  background: #fff; color: var(--ink);
  border: 1px solid #ecdcb6; border-left: 4px solid transparent; font-family: var(--f-body);
}
.roster button img { grid-row: 1 / 3; width: 44px; height: 44px; }
.roster .lock { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed #8b97b0; color: var(--muted); font: 700 1.1rem/1 var(--f-label); }
.roster .r-name { font: 700 var(--t-sm)/1.25 var(--f-label); letter-spacing: .06em; color: var(--navy); }
.roster .r-role { font-size: var(--t-xs); line-height: 1.4; color: var(--muted); }
.roster button:hover { border-color: var(--gold); }
.roster button[aria-selected="true"] { border-color: var(--cc); border-left-color: var(--cc); background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 18%, #fff), #fff); box-shadow: 0 8px 18px -14px rgba(20,40,92,.6); }
.cls { --cc: var(--gold); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.cls[hidden] { display: none; }
.stage { margin: 0; position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; border: 2px solid color-mix(in srgb, var(--cc) 60%, var(--gold)); box-shadow: var(--shadow); }
.stage img { width: 100%; height: 100%; object-fit: contain; padding: 16px; filter: drop-shadow(0 14px 20px rgba(20,40,92,.3)); }
.stage.full img { object-fit: cover; padding: 0; }
.dossier { display: grid; gap: 14px; }
.dossier .kicker { font: 700 var(--t-xs)/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--cc) 62%, #000); }
.dossier .kicker [lang="th"] { font-family: var(--f-body); letter-spacing: .04em; }
.dossier h3 { font-family: var(--f-label); font-weight: 700; font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height: 1.05; color: var(--navy); text-shadow: 0 3px 0 color-mix(in srgb, var(--cc) 25%, transparent); }
.dossier h3.th { font-family: var(--f-display); font-weight: 400; }
.dossier .role { font-size: var(--t-sm); color: var(--ink); display: flex; flex-wrap: wrap; gap: 8px; }
.dossier .role span { border: 1px solid color-mix(in srgb, var(--cc) 60%, transparent); background: color-mix(in srgb, var(--cc) 8%, #fff); padding: 2px 12px; border-radius: 999px; }
.dossier .desc { max-width: 34em; }
.dossier dl { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.dossier dt { font-size: var(--t-xs); color: var(--gold-text); font-weight: 600; }
.dossier dd { margin: 0; font-size: var(--t-sm); color: var(--muted); }
@media (max-width: 900px) {
  .select { grid-template-columns: minmax(0, 1fr); }
  .roster { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; }
  .roster button { flex: 0 0 auto; width: auto; grid-template-columns: 36px auto; padding: 6px 14px 6px 6px; }
  .roster button img, .roster .lock { width: 36px; height: 36px; }
  .roster .r-role { display: none; }
  .cls { grid-template-columns: minmax(0, 1fr); }
  .stage { width: min(100%, 420px); margin-inline: auto; }
}

/* media page */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.gallery figure { margin: 0; display: grid; gap: 8px; }
.gallery a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid #ecdcb6; background: #fff; box-shadow: 0 10px 24px -18px rgba(20,40,92,.5); }
.gallery img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s; }
@media (prefers-reduced-motion: no-preference) { .gallery a:hover img { transform: scale(1.03); } }
.gallery figcaption { font-size: var(--t-xs); color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.label-old { font: 700 10px/1 var(--f-body); letter-spacing: .04em; color: #fff; background: var(--navy); padding: 4px 7px 3px; border-radius: 999px; }
.poster { position: relative; display: block; border-radius: var(--radius); border: 3px solid var(--gold); overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.poster img { width: 100%; height: auto; aspect-ratio: 1600 / 608; object-fit: cover; }
.play { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: clamp(56px, 8vw, 88px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.92); border: 3px solid var(--gold); display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(242,182,50,.3); }
.play svg { width: 36%; height: 36%; margin-left: 8%; fill: var(--navy); }
.facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; font-size: var(--t-sm); }
.facts dt { color: var(--gold-text); font-weight: 600; }
.facts dd { margin: 0; }

/* ---------- footer: sand, under the coin fringe ---------- */
footer { position: relative; border-top: 1px solid var(--line); background: #f6e9cc; }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; display: none; }
footer .wrap { padding-block: 72px 52px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 48px; align-items: start; }
footer .f-logo img { width: 210px; height: auto; }
.f-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 24px; list-style: none; margin: 0; padding: 0; }
.f-links a, .socials a { color: var(--navy); text-decoration: none; font-size: var(--t-sm); }
.f-links a:hover, .socials a:hover { color: var(--coral-deep); text-decoration: underline; }
.socials { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 12px 0 0; padding: 0; }
.legal { font-size: var(--t-xs); color: var(--muted); text-align: right; }
@media (max-width: 860px) { footer .wrap { grid-template-columns: minmax(0, 1fr); } .legal { text-align: left; } }

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

/* ---------- lsite 20/10: footer legal links, hidden social channels, gallery overlay ---------- */
.socials li[hidden] { display: none; }
footer .legal { display: grid; gap: 10px; }
footer .legal a { color: var(--navy); }
.beta-card .cta-row { margin-top: 4px; }
.lightbox { width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 12px; border: 3px solid var(--gold); border-radius: var(--radius); background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.lightbox::backdrop { background: rgba(20, 40, 92, .72); }
.lightbox img { width: 100%; height: auto; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 10px; background: var(--sky-wash); }
.lightbox-cap { margin-top: 8px; font-size: var(--t-sm); color: var(--muted); }
.lightbox-close { position: sticky; top: 0; float: right; margin: 0 0 8px 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gold-deep); background: var(--gold); color: #2a1a00; font: 600 var(--t-sm) var(--f-body); cursor: pointer; }

/* ---------- one long painted background per page (owner 20/10: "ไม่เอา background แบบเป็น section") ----------
   Off until the art exists: build_pages_v3.py writes <div id="longbg"> plus a small style block naming the picture first in
   the body only when assets/long-<page>.webp is there. The picture covers the whole page (cover, top centre) and scrolls
   with it: at 1920 wide it fits the page exactly; on a narrower or taller page its sides are cropped, never its top or
   bottom. Phones use long-<page>-m.webp (the same art at half size) when it exists. Bands lose their own skies and
   parchment; text-heavy bands sit on a light reading panel so any art stays readable. */
body { position: relative; }
#longbg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: #f6e9cc; background-position: center top; background-size: cover; background-repeat: no-repeat;
}
#longbg ~ main, #longbg ~ footer { position: relative; z-index: 1; }
#longbg ~ main > section, #longbg ~ footer { background: transparent; border-color: transparent; }
#longbg ~ main .scene, #longbg ~ main .beta > img, #longbg ~ main .beta::after, #longbg ~ main .cta-strip::before, #longbg ~ footer::before { display: none; }
#longbg ~ main .page-hero::before {
  background: linear-gradient(90deg, rgba(253,248,238,.86) 0%, rgba(253,248,238,.74) 48%, rgba(253,248,238,0) 78%);
  /* task009: the veil fades out at the hero's bottom edge, so there is no hard line across the long picture where the hero ends */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 100%);
}
@media (max-width: 860px) {
  /* the hero text spans the full width on a phone, so the veil runs top to bottom instead of left to right */
  #longbg ~ main .page-hero::before {
    background: linear-gradient(180deg, rgba(253,248,238,0) 0, rgba(253,248,238,.8) 180px, rgba(253,248,238,.88) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
  }
}
#longbg ~ main .hero .hero-copy { background: rgba(253, 248, 238, .82); border-radius: 24px; padding: clamp(16px, 2vw, 28px); }
@media (max-width: 860px) { #longbg ~ main .hero .hero-inner { background: rgba(253, 248, 238, .86); border-radius: 24px; padding-bottom: 24px; } }
#longbg ~ main > .band > .wrap, #longbg ~ main > .sec > .wrap, #longbg ~ footer > .wrap {
  background: rgba(253, 248, 238, .9); border-radius: 28px; box-shadow: 0 18px 40px -26px rgba(20, 40, 92, .55);
  padding-block: clamp(24px, 3.5vw, 44px);
}
@supports (backdrop-filter: blur(4px)) {
  #longbg ~ main > .band > .wrap, #longbg ~ main > .sec > .wrap, #longbg ~ footer > .wrap { background: rgba(253, 248, 238, .82); backdrop-filter: blur(4px); }
}
@media (max-width: 760px) {
  #longbg ~ main > .band > .wrap, #longbg ~ main > .sec > .wrap, #longbg ~ footer > .wrap { border-radius: 0; }
}

/* ==========================================================================================================
   lsite2 (20/10): the owner's phone review ("แปลกแปลกไม่สมดุล", leftover vector art, images out of place,
   empty scenery-only gaps, heavy text panels, plain type) + strengths taken from ds.in.th/launch
   (see web/REF_DS_LAUNCH.md). Phone first. This layer overrides the rules above; delete it to roll back.
   - Type: Kanit (headings, buttons, labels) + Anuphan (reading text); bigger, airier on phones.
   - No drawn decoration: rope portholes, rings, compass marks, coin fringe, gardens, clouds are gone; pictures are
     painted crops in plain rounded frames.
   - Light glass instead of heavy blocks: only the text sits on frosted white, the painting shows everywhere else.
   - Tighter section rhythm, so no stretch of page is scenery only.
   - Headline lettering slots (tools/lettering.py): a designed image replaces the typed Thai heading when it exists.
   ========================================================================================================== */
: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;
  --t-xs: .875rem; --t-sm: 1rem; --t-md: 1.0625rem; --t-lg: 1.25rem;
  --t-xl: clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);
  --t-2xl: clamp(1.875rem, 1.35rem + 2.4vw, 3.125rem);
  --t-hero: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .8);
  --glass-line: rgba(255, 255, 255, .85);
  --glass-shadow: 0 18px 44px -30px rgba(20, 40, 92, .55);
  --radius: 20px;
  --card-w: clamp(240px, 70vw, 290px);
}
body { font: 400 var(--t-md)/1.75 var(--f-body); }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.lede { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.75; color: var(--ink); }

/* ---- lettering slots: typed heading until the image exists ---- */
[data-lt-slot] { color: var(--navy); }
[data-lt-slot] > [lang="th"] { display: block; }
.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)); }
.lt-img + .lt-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- small parts ---- */
.eyebrow { font: 500 var(--t-sm)/1.4 var(--f-display); letter-spacing: .03em; text-transform: none; color: var(--gold-text); }
.eyebrow [lang="th"] { font-family: var(--f-display); font-weight: 500; font-size: var(--t-sm); }
.eyebrow svg { display: none; }
.eyebrow::before { content: ""; flex: none; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.btn { font: 500 var(--t-md)/1.2 var(--f-display); min-height: 50px; padding: .7em 1.5em; }
.btn small { font-family: var(--f-body); font-size: .8125rem; }
.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,.78); --b: rgba(20,40,92,.22); }
.link-arrow { font-family: var(--f-display); font-weight: 500; }
.card h3 { font-weight: 600; }
.card p { line-height: 1.65; }

/* ---- header: lighter, slimmer on phones ---- */
.bar { background: rgba(255,255,255,.84); border-bottom: 1px solid rgba(20,40,92,.08); box-shadow: 0 8px 24px -20px rgba(20,40,92,.6); }
.nav a { font-family: var(--f-display); font-weight: 500; }
.nav a[aria-current="page"] { font-weight: 600; }
@media (max-width: 760px) { .bar .wrap { min-height: 58px; } .bar-logo img { height: 38px; } .menu-btn, .lang { min-height: 40px; height: 40px; } }

/* ---- the one long painting: fixed behind the page, panned top to bottom as the page scrolls ----
   (so every phone and window sees the whole picture once, top to bottom, whatever the page height;
   CSS scroll-timeline where supported, site.js sets --lp elsewhere; under reduced motion it scrolls with the page, unpanned) */
#longbg { position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh; background-size: cover; background-position: 50% var(--lp, 0%); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    #longbg { animation: lb-pan linear both; animation-timeline: scroll(root block); }
    @keyframes lb-pan { from { background-position: 50% 0%; } to { background-position: 50% 100%; } }
  }
}
@media (prefers-reduced-motion: reduce) { #longbg { position: absolute; inset: 0; height: auto; background-position: center top; } }

/* panels of the earlier layer: off. Text gets light glass instead (below). */
#longbg ~ main > .band > .wrap, #longbg ~ main > .sec > .wrap, #longbg ~ footer > .wrap,
#longbg ~ main .hero .hero-copy, #longbg ~ main .hero .hero-inner { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
#longbg ~ main .page-hero::before { display: none; }
.glass, .band-head .txt, .sec > .wrap, .page-hero .wrap, .beta-card, .hero .lede, .proof {
  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);
}
#longbg ~ main > .sec > .wrap { background: var(--glass); border-radius: 24px; padding-block: clamp(22px, 3.2vw, 44px); }

/* ---- home hero: logo + headline on the painting, the crew in a plain frame, no panel ---- */
.hero { overflow: visible; }
.hero-inner { padding-block: clamp(20px, 4vw, 56px) clamp(28px, 4vw, 56px); gap: 22px clamp(28px, 4vw, 64px); }
.hero-logo::before { display: none; }
.hero-logo img { filter: drop-shadow(0 10px 18px rgba(20,40,92,.28)); }
.hero h1 { font-weight: 700; 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); }
.hero h1 small { font: 500 .46em/1.4 var(--f-display); color: var(--navy); margin-top: .4em; }
.hero .lede { border-radius: 18px; padding: 14px 18px; }
.hero-art { position: relative; margin: 0; justify-self: center; width: 100%; max-width: 520px; border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 5px rgba(242,182,50,.6), 0 34px 60px -30px rgba(20,40,92,.75); }
.hero-art img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.proof { border-radius: 22px; padding: 16px clamp(16px, 3vw, 30px); }
.proof b { font: 700 clamp(2rem, 1.5rem + 1.6vw, 2.75rem)/1.05 var(--f-display); color: var(--coral-deep); }
.proof span { font-size: var(--t-sm); line-height: 1.45; }
@media (max-width: 860px) {
  .hero-inner { justify-items: center; text-align: center; gap: 18px; padding-top: 18px; }
  .hero-logo { width: min(86vw, 380px); }
  .hero h1 { font-size: clamp(1.875rem, 1.2rem + 3.6vw, 2.5rem); }
  .hero-art { order: 3; width: 100%; max-width: 560px; border-radius: 22px; }
  .hero-art img { aspect-ratio: 4 / 3; object-position: 50% 35%; }
  .hero .lede { order: 4; text-align: left; }
  .cta-row { order: 5; justify-content: center; width: 100%; }
  .cta-row .btn { flex: 1 1 200px; }
  .proof { order: 6; width: 100%; text-align: left; }
}

/* ---- bands: tight rhythm, only the heading block is on glass ---- */
.band { padding-block: clamp(28px, 4vw, 60px); }
.band + .band, .sec + .sec { border-top: 0; }
.band-head { margin-bottom: clamp(16px, 2.6vw, 32px); align-items: center; }
.band-head .txt { border-radius: 22px; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px); gap: 10px; max-width: 820px; }
.band-head h2 { font-size: var(--t-2xl); }
.track { padding-bottom: 14px; }
.card { border-color: rgba(255,255,255,.9); border-radius: var(--radius); box-shadow: 0 16px 34px -22px rgba(20,40,92,.6); }
.c-nav button { background: rgba(255,255,255,.88); }
/* text that sits in a band but outside the heading (roadmap timeline, the notes under a carousel): on glass too */
.band > .carousel ~ .wrap, #longbg ~ main > .band > .carousel ~ .wrap { width: min(calc(100% - 20px), var(--wrap)); background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); border-radius: 22px;
  padding-block: clamp(18px, 2.4vw, 30px); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.timeline { background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); border-radius: 22px; padding: 22px 20px 18px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.timeline::before { left: 20px; right: 20px; top: 45px; }
@media (max-width: 760px) { .timeline::before { left: 42px; right: auto; top: 22px; bottom: 22px; } }
@media (max-width: 760px) {
  .band-head .actions { width: 100%; }
}

/* ---- sub-page sections: one light glass sheet per section ---- */
.sec { padding-block: clamp(18px, 3.5vw, 56px); }
.sec > .wrap { border-radius: 24px; }
@media (max-width: 760px) {
  .sec > .wrap { width: calc(100% - 20px); padding-inline: 16px; border-radius: 20px; }
}

/* ---- CTA banners: a painted scene with the call on its light side (was: sky band, coin fringe, rope porthole) ---- */
.cta-strip, #longbg ~ main > .cta-strip {
  display: grid; position: relative; isolation: isolate; overflow: hidden;
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2 * var(--gutter)));
  margin: clamp(18px, 3vw, 40px) auto; border: 0; border-radius: 26px; background: var(--sky-wash);
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 5px rgba(242,182,50,.45), 0 30px 60px -36px rgba(20,40,92,.8);
}
.cta-strip > img.cta-art {
  grid-area: 1 / 1; position: static; transform: none; width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: 70% 50%;
  border-radius: 0; padding: 0; background: none; box-shadow: none; margin: 0;
}
.cta-strip > .wrap {
  grid-area: 1 / 1; z-index: 1; max-width: none; margin: 0; align-self: stretch;
  padding: clamp(26px, 4vw, 52px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px;
  background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 40%, rgba(255,255,255,0) 68%);
}
.cta-strip .wrap > div { background: none; padding: 0; border-radius: 0; max-width: 560px; display: grid; gap: 8px; }
.cta-strip h2 { font-size: var(--t-xl); }
.cta-strip p { font-weight: 500; }
@media (max-width: 760px) {
  .cta-strip, #longbg ~ main > .cta-strip { width: calc(100% - 20px); border-radius: 22px; }
  .cta-strip > img.cta-art { grid-area: auto; min-height: 0; height: auto; aspect-ratio: 2 / 1; }
  .cta-strip > .wrap { grid-area: auto; padding: 18px 18px 22px; background: rgba(255,255,255,.88); align-items: stretch; gap: 14px; }
  .cta-strip .wrap > .btn { width: 100%; }
}

/* ---- Closed Beta date block: centred glass card, no fringe, no gardens ---- */
.beta { background: none; }
.beta .wrap { padding-block: clamp(28px, 5vw, 72px) clamp(40px, 6vw, 88px); }
.beta-card { margin-inline: auto; max-width: 720px; padding: clamp(24px, 4vw, 44px); border-radius: 26px; text-align: center; justify-items: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 5px rgba(242,182,50,.5), 0 30px 60px -34px rgba(20,40,92,.75); }
.beta-card h2 { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem); font-weight: 700; line-height: 1.2; }
.beta-card .cta-row { justify-content: center; }
.beta-card .lt-img img { margin-inline: auto; }

/* ---- sub-page heroes: text on glass, the painting in a plain rounded frame beside it (phone: above it) ---- */
.page-hero, #longbg ~ main > .page-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(20px, 3vw, 48px); align-items: center;
  width: min(100%, var(--wrap)); margin-inline: auto; padding: clamp(24px, 4vw, 64px) var(--gutter) clamp(12px, 2vw, 28px);
  border: 0; overflow: visible; background: none;
}
.page-hero > img.ph-art {
  grid-column: 2; grid-row: 1; position: static; transform: none; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 24px; padding: 0; background: var(--sky-wash);
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 5px rgba(242,182,50,.5), 0 30px 56px -30px rgba(20,40,92,.75);
}
.page-hero > img.ph-art.square { aspect-ratio: 4 / 3; object-position: 50% 35%; }
.page-hero .wrap { grid-column: 1; grid-row: 1; width: auto; max-width: none; margin: 0; padding: clamp(20px, 3vw, 36px); border-radius: 24px; }
.page-hero .wrap > * { max-width: none; }
.page-hero h1 { font-size: var(--t-2xl); font-weight: 700; max-width: none; }
@media (max-width: 860px) {
  .page-hero, #longbg ~ main > .page-hero { grid-template-columns: minmax(0, 1fr); padding: 14px 10px 6px; gap: 14px; }
  .page-hero > img.ph-art { grid-column: 1; margin: 0; width: 100%; border-radius: 20px; }
  .page-hero .wrap { grid-column: 1; grid-row: 2; padding: 20px 16px; border-radius: 20px; }
}

/* ---- footer: one light strip, no fringe ---- */
footer, #longbg ~ footer { background: rgba(255,255,255,.86); border-top: 1px solid rgba(20,40,92,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
footer .wrap { padding-block: 40px 32px; }
footer .f-logo img { width: 180px; }

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

.hero h1 small.lt-ribbon { font-size: .42em; margin-top: .55em; color: #fff6dc; }
.beta-card .lt-ribbon, .cta-strip .lt-ribbon { margin-inline: 0; }
/* lead 20/10: .cta-strip p (0,1,1) painted the ribbon text navy on navy */
.cta-strip p.lt-ribbon { color: #fff6dc; }
.beta-card .lt-ribbon { margin-inline: auto; }
@media (max-width: 860px) { .hero h1 small.lt-ribbon { margin-inline: auto; } }
@media (max-width: 760px) { .cta-strip .lt-ribbon { width: auto; text-align: center; border-radius: 18px; } }
/* the drawn VS mark on the Nelson vs Jason picture: hidden until web/lettering/vs-mark.* exists; sits on the empty top of the split */
.vs-wrap { position: relative; display: block; height: 100%; }
.vs-mark { position: absolute; left: 57%; top: 4%; z-index: 2; width: clamp(84px, 36%, 230px); transform: translateX(-50%); pointer-events: none; }
.vs-mark:not(:has(.lt-img)) { display: none; }
.vs-mark .lt-img img, .card .media .vs-mark .lt-img img { width: 100%; height: auto; max-width: none; object-fit: contain; padding: 0; transition: none; transform: none; border: 0; border-radius: 0; box-shadow: none; }
/* the CBT key art (TASK-010 keyart_cbt_hero, art-only layer) in the home hero frame, once delivered */
.hero-art.keyart-frame { max-width: 640px; }
.hero-art.keyart-frame img { aspect-ratio: 16 / 10; object-position: 50% 30%; }
@media (max-width: 860px) { .hero-art.keyart-frame img { aspect-ratio: 4 / 3; } }
/* room for the big lettering */
.band-head .txt { max-width: 980px; }
.cta-strip .wrap > div { max-width: 740px; }
.beta-card { max-width: 860px; }

/* 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, buttons, menus and labels: Prompt, the free face closest to the one in his 4th screenshot (DB Helvethaica
     Bold on that page, a licensed face). Headings stay Kanit, class names stay Cinzel.
   - Lettering tiers (tools/lettering.py): simple-tier slots are shown smaller and lighter than the grand marks.
   - classes.html: the class pictures become a slider (site.js).
   ========================================================================================================== */
:root { --f-body: "Prompt", "Anuphan", "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif; }
body { font: 400 var(--t-md)/1.75 var(--f-body); }
.eyebrow, .eyebrow [lang="th"], .btn, .link-arrow, .nav a, .roster button, .dossier .kicker [lang="th"] { font-family: var(--f-body); }
.btn { font-weight: 500; }

/* the hero logo over the painting: the landing's thin dark outline + soft shadow (owner 21/10: the logo "sank" into the art) */
.hero img[src*="logo-std"] { filter: drop-shadow(0 0 1px #0c1f45) drop-shadow(0 0 1.2px #0c1f45) drop-shadow(0 0 5px rgba(12,31,69,.55)) drop-shadow(0 7px 14px rgba(12,31,69,.45)); }

/* lettering tiers */
.lt-tx[data-lt-tier="simple"] { font-size: .86em; }
.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 (max-width: 760px) { .lt-img.lt-simple img { max-height: 116px; } }

/* classes: slider */
.cls-slider { display: none; }
.select.has-slider .panels { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 36px); align-items: center; }
.select.has-slider .cls-slider {
  display: block; position: relative; grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; overflow: hidden; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; border-radius: var(--radius);
}
.select.has-slider .panels > .cls { grid-column: 2; grid-row: 1; display: block; transition: opacity .42s ease, visibility .42s; }
.select.has-slider .cls .stage { display: none; }
.select.has-slider .dossier h3 { font-size: clamp(1.75rem, 1rem + 1.9vw, 2.35rem); overflow-wrap: normal; }
.select.has-slider .cls.is-off { visibility: hidden; opacity: 0; }
.select.has-slider .cls:not(.is-off) .dossier { 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; } }
.cs-item {
  position: absolute; left: 50%; bottom: 0; height: 96%; aspect-ratio: 1400 / 1800; translate: -50% 0; margin: 0;
  transform-origin: 50% 100%; cursor: pointer; filter: grayscale(1) brightness(.8) contrast(.9);
  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)); 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%; padding: 0;
  display: grid; place-items: center; color: var(--navy); background: rgba(255,255,255,.92); 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); }
.cs-btn[disabled] { opacity: 0; pointer-events: none; }
.cs-prev { left: 10px; } .cs-next { right: 10px; }
@media (max-width: 900px) {
  .select.has-slider .panels { grid-template-columns: minmax(0, 1fr); }
  .select.has-slider .cls-slider { aspect-ratio: auto; height: min(56vh, 440px); margin-inline: -16px; border-radius: 0; }
  .select.has-slider .panels > .cls { grid-column: 1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-item, .select.has-slider .panels > .cls { transition: none; }
  .select.has-slider .cls:not(.is-off) .dossier { animation: none; }
}