/* MSA — Home prototype v10 (review only)
 * V10 rule: the film is the page. Over the film: a light nav, one project title, one link,
 * one round pause control. Everything else (ticker, headline, lede, CTA) lives below the film.
 * Layout principles taken from the-boundary.com (full-bleed film, quiet nav, one text group
 * lower-left, regular-weight sentence case) — adapted to MSA type and colour, not copied.
 * Brand kept from msa.in.th: Inter + Noto Sans Thai, bold italic display, Cormorant "and",
 * DotGothic16 ticker, MSA blue, motion 400/700/900 ms · cubic-bezier(.25,.46,.45,.94).
 */

:root {
  --bg: #ffffff;
  --bg-soft: #f7f6f3;
  --ink: #111111;
  --ink-2: #555555;
  --hairline: #e8e6e0;
  --accent: #a8c7d6;
  --accent-ink: #6f8e9c;
  --film-ink: #14120f;
  --on-film: #ffffff;
  --on-film-2: rgba(255, 255, 255, .72);

  --font-body: "Inter", "Noto Sans Thai", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-accent: "Cormorant Garamond", Georgia, serif;
  --font-pixel: "DotGothic16", ui-monospace, monospace;

  --dur-s: 400ms;
  --dur: 700ms;
  --dur-l: 900ms;
  --ease: cubic-bezier(.25, .46, .45, .94);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(20px, 2.3vw, 40px);

  --nav-h: 88px;
  --focus-x: 50%;           /* set per shot by app.js */
  --focus-y: 50%;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.hero :focus-visible, .nav :focus-visible { outline-color: currentColor; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: var(--s3) var(--s4); text-decoration: none;
}
.skip:focus { top: var(--s4); }

/* ───────── Nav: quiet, sentence case, no bar over the film ───────── */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; }
.nav {
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s6);
  padding: 0 var(--gutter);
  color: var(--on-film);
  transition: background-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease), height var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.site-header.is-solid .nav {
  --nav-h: 64px;
  background: var(--bg); color: var(--ink);
  box-shadow: 0 1px 0 var(--hairline);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; text-decoration: none;
  font: 700 30px/1 var(--font-body); letter-spacing: .01em;
}
.brand img { width: 28px; height: 28px; }
.nav-links { display: none; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; }
.lang { display: inline-flex; align-items: center; gap: 2px; font: 400 13px/1 var(--font-body); }
.lang span { opacity: .5; }
.lang button { min-width: 32px; min-height: 44px; background: none; border: 0; cursor: pointer; opacity: .6; padding: 0 4px; }
.lang button[aria-pressed="true"] { opacity: 1; }
.lang { margin-left: auto; }
.menu-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer; margin-right: -10px;
}
.menu-lines, .menu-lines::before { display: block; width: 28px; height: 1.5px; background: currentColor; position: relative; }
.menu-lines { transform: translateY(-4px); }
.menu-lines::before { content: ""; position: absolute; top: 8px; left: 0; transition: transform var(--dur-s) var(--ease); }
.menu-btn[aria-expanded="true"] .menu-lines { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-lines::before { top: 0; transform: rotate(-90deg); }
/* open menu: full-screen dark sheet, big regular-weight links */
.site-header.menu-open .nav { background: var(--film-ink); color: var(--on-film); box-shadow: none; }
.site-header.menu-open .nav-links {
  display: grid; align-content: start; gap: var(--s2);
  position: fixed; inset: var(--nav-h) 0 0 0; margin: 0;
  padding: var(--s7) var(--gutter); background: var(--film-ink); color: var(--on-film);
}
.site-header.menu-open .nav-links a { font: 400 clamp(36px, 5vw, 64px)/1.15 var(--font-body); opacity: .6; }
.site-header.menu-open .nav-links a[aria-current="page"] { opacity: 1; }

/* ───────── Hero: full-bleed film, one text group lower-left ───────── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  background: var(--film-ink);
  color: var(--on-film);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media video,
.hero-still, .hero-still img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus-x) var(--focus-y);
}
.hero-media video { z-index: 1; }            /* still sits underneath and acts as the poster */
.hero.is-failed video { display: none; }
.watch { display: none; }
/* shade only where text sits: top edge for the nav, lower-left for the title */
.hero-shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(20, 18, 15, .38) 0, rgba(20, 18, 15, 0) 160px),
    linear-gradient(90deg, rgba(20, 18, 15, .58) 0%, rgba(20, 18, 15, .26) 45%, rgba(20, 18, 15, 0) 70%),
    linear-gradient(to top, rgba(20, 18, 15, .52) 0%, rgba(20, 18, 15, 0) 48%);
}

.hero-copy {
  z-index: 3;
  position: absolute; left: var(--gutter); bottom: clamp(48px, 11svh, 112px);
  width: min(66vw, 1000px);
  display: grid; justify-items: start; gap: 0;
}
.hero-statement {
  margin: 0;
  font: 400 clamp(40px, 4.3vw, 68px)/1.1 var(--font-body);
  letter-spacing: -.025em; color: #f7f4ee;
  text-wrap: balance;
}
html[lang="th"] .hero-statement { letter-spacing: 0; line-height: 1.3; font-size: clamp(38px, 4.6vw, 68px); }
.hero-actions { margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.hero .pill-light {
  min-height: 60px; padding: 0 var(--s7);
  border-color: rgba(247, 244, 238, .9); color: #f7f4ee;
  font-size: clamp(18px, 1.6vw, 24px);
}
.pill-explore { gap: 10px; }   /* v13: "Explore Almond House" — arrow spacing */
.film-status { margin: var(--s3) 0 0; font-size: 13px; color: var(--on-film-2); }
.film-status:empty { display: none; }

.hero-meta {
  z-index: 3;
  position: absolute; right: var(--gutter); bottom: var(--s5);
  display: flex; align-items: center; gap: var(--s3);
}
.film-toggle {
  position: relative; flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; border-radius: 50%;
  color: var(--on-film); cursor: pointer;
}
.film-toggle:disabled { opacity: .45; cursor: not-allowed; }
.ring { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ring-bg { stroke: rgba(255, 255, 255, .45); }
.ring-p { stroke: var(--on-film); stroke-width: 1.5; stroke-dasharray: 195 195; stroke-dashoffset: calc(195 - 195 * var(--p, 0)); }
.ft-icon { width: 8px; height: 10px; position: relative; }
.ft-icon::before, .ft-icon::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: currentColor; }
.ft-icon::before { left: 1px; } .ft-icon::after { right: 1px; }
.film-toggle[aria-pressed="true"] .ft-icon::before {
  left: 2px; width: 0; background: none;
  border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.film-toggle[aria-pressed="true"] .ft-icon::after { display: none; }
.hero-note { margin: 0; font: 400 13px/1.4 var(--font-body); color: var(--on-film-2); }
.hero-note a { color: var(--on-film); text-underline-offset: 3px; }

/* statement enters once, after the film has had a moment (reduced motion: shown at once) */
.hero-statement, .hero-actions { transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease); }
/* v12.2: hidden for the entrance only while the page script is running (html.js); without it the text simply shows */
html.js .hero:not(.is-ready) .hero-statement, html.js .hero:not(.is-ready) .hero-actions { opacity: 0; transform: translateY(24px); }
.hero-actions { transition-delay: 150ms; }
.hero.is-ready .hero-statement, .hero.is-ready .hero-actions { opacity: 1; transform: none; }

.hero-sentinel { height: 1px; margin-top: -1px; }

/* ───────── Ticker: MSA personality, now below the film ───────── */
.ticker {
  height: 32px;
  background: var(--accent);
  color: var(--ink);
  overflow: hidden;
  font: 400 12px/32px var(--font-pixel);
  letter-spacing: .08em;
  white-space: nowrap;
}
.ticker-track { display: flex; width: max-content; animation: ticker 80s linear infinite; }
.ticker-track span { padding-right: var(--s2); }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ───────── Transition: brand headline ───────── */
.intro { max-width: 1440px; margin: 0 auto; padding: var(--s9) var(--gutter) var(--s8); }
.intro-meta {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding-top: var(--s3); border-top: 1px solid var(--ink);
  font: 500 12px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
}
.intro-meta p { margin: 0; }
.intro-meta .dot { color: var(--accent-ink); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; text-decoration: none; }
.link-arrow span[aria-hidden] { transition: transform var(--dur-s) var(--ease); }

.display {
  margin: var(--s7) 0 0;
  font: italic 700 clamp(34px, 9.1vw, 130px)/.92 var(--font-body);
  letter-spacing: -.02em; text-transform: uppercase;
  overflow-wrap: anywhere; min-width: 0;
}
.display .line { display: block; overflow: hidden; padding-bottom: .04em; }
.display .line > span { display: inline-block; }
.display .line.and {
  font: italic 400 .5em/1.15 var(--font-accent);
  text-transform: none; letter-spacing: 0; color: var(--accent-ink);
  padding-left: .3em; margin: -.05em 0 .05em;
  font-size: max(.5em, 30px);   /* v10: never smaller than 30px — at 390px it was ~18px and hard to read */
}
html[lang="th"] .display { line-height: 1.12; letter-spacing: 0; }

/* ───────── Selected work ───────── */
.work { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) var(--s10); }
.work-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s5); row-gap: var(--s9);
}
.card { position: relative; min-width: 0; display: grid; gap: var(--s4); align-content: start; }
.card figure { position: relative; margin: 0; overflow: hidden; background: var(--bg-soft); aspect-ratio: 3 / 2; }
.card figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-l) var(--ease);
}
.card .tag {
  position: absolute; top: var(--s3); right: var(--s3);
  padding: 5px 8px; background: rgba(17, 17, 17, .82); color: #fff;
  font: 400 11px/1 var(--font-pixel); letter-spacing: .06em;
}
.card .ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s5);
  background: repeating-linear-gradient(135deg, #f1efe9 0 2px, #ece9e1 2px 12px);
  color: var(--ink-2); font: 500 12px/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
.card .cat {
  margin: 0; color: var(--accent-ink);
  font: italic 700 13px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
.card h3 { margin: 0; font: 500 22px/1.2 var(--font-body); letter-spacing: -.01em; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable, one tab stop */
.card .loc { margin: 0; font: 500 11px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.card .meta { margin: 0; font: 400 13px/1.5 var(--font-body); color: var(--ink-2); max-width: 42ch; }
.card .more {
  margin: var(--s2) 0 0; display: inline-flex; gap: var(--s2); align-items: center;
  font: 500 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
}
.card .more span[aria-hidden] { transition: transform var(--dur-s) var(--ease); }
.card .body { display: grid; gap: var(--s2); align-content: end; }

/* layouts — desktop: first two cards full row (image-right, image-left), then alternating big / small pairs */
.card.row-r { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); align-items: end; }
.card.row-r figure { grid-column: 5 / 13; grid-row: 1; }
.card.row-r .body { grid-column: 1 / 5; grid-row: 1; padding-bottom: var(--s2); }
.card.row-l { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); align-items: end; }
.card.row-l figure { grid-column: 1 / 8; grid-row: 1; }
.card.row-l .body { grid-column: 9 / 13; grid-row: 1; padding-bottom: var(--s2); }
.card.row-r h3, .card.row-l h3 { font-size: clamp(22px, 2vw, 30px); }
.card.big-l { grid-column: 1 / 8; }
.card.small-r { grid-column: 9 / 13; margin-top: var(--s10); }
.card.small-l { grid-column: 1 / 6; margin-top: var(--s10); }
.card.big-r { grid-column: 6 / 13; }
.card.small-r figure, .card.small-l figure { aspect-ratio: 4 / 3; }

.work-end { margin-top: var(--s9); display: flex; justify-content: center; }

/* reveal (enter once) */
.reveal-card { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.js .reveal-card:not(.is-in) { opacity: 0; transform: translateY(24px); }
.reveal-card.is-in { opacity: 1; transform: none; }
.display .line.reveal > span { transition: transform var(--dur-l) var(--ease); }
html.js .display .line.reveal:not(.is-in) > span { transform: translateY(105%); }
.display .line.reveal.is-in > span { transform: none; }
.display .line.reveal:nth-child(2) > span { transition-delay: 80ms; }
.display .line.reveal:nth-child(3) > span { transition-delay: 160ms; }


.pill {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s6);
  border: 1px solid var(--ink); border-radius: 999px;
  font: 400 17px/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.btn {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: 0 var(--s5);
  border: 1px solid transparent; border-radius: 0;
  font: 500 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-s) var(--ease);
}
.btn-ink { background: var(--ink); color: var(--bg); }

@media (hover: hover) and (pointer: fine) {
  .site-header.menu-open .nav-links a:hover { opacity: 1; }
  .hero .pill-light:hover { background: #f7f4ee; color: var(--ink); }
  .film-toggle:hover .ring-bg { stroke: var(--on-film); }
  .pill:hover { background: var(--ink); color: var(--bg); }
  .btn-ink:hover { background: var(--accent-ink); }
  .link-arrow:hover span[aria-hidden] { transform: translateX(4px); }
  .card:hover figure img { transform: scale(1.03); }
  .card:hover .more span[aria-hidden] { transform: translateX(4px); }
  .card:hover h3 { color: var(--accent-ink); }
}

.review {
  max-width: 1440px; margin: 0 auto var(--s8); padding: var(--s4) var(--gutter);
  background: var(--bg-soft); border-top: 1px solid var(--hairline);
  font-size: 13px; color: var(--ink-2);
}
.review p { margin: var(--s1) 0; }

/* ───────── Tablet / phone ─────────
 * The film stays full-screen (100svh) like the reference. Crop test on V8
 * (v10 portrait crop test): shots 02 and 03 are one-point perspective and read well
 * centred; shot 01 (facade) loses the side wings — a video limitation, needs a vertical cut. */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .site-header.is-solid .nav { --nav-h: 56px; }
  .brand { font-size: 24px; }
  .brand img { width: 22px; height: 22px; }
  .hero-copy { width: auto; right: var(--gutter); }

  .intro { padding: var(--s8) var(--gutter) var(--s7); }
  .intro-meta { flex-wrap: wrap; }
  .display { margin-top: var(--s5); }

  .work-list { row-gap: var(--s8); }
  .card.row-r, .card.row-l, .card.big-l, .card.big-r, .card.small-l, .card.small-r {
    grid-column: 1 / -1; margin-top: 0; grid-template-columns: minmax(0, 1fr);
  }
  .card.row-r figure, .card.row-l figure, .card.row-r .body, .card.row-l .body { grid-column: 1; grid-row: auto; padding-bottom: 0; }
  .card.small-r figure, .card.small-l figure { aspect-ratio: 3 / 2; }
  .work-end .btn { width: 100%; justify-content: center; }
}

/* ───────── Portrait screens (phones, portrait tablets) ─────────
 * The V8 film is 16:9. Cropped to a tall screen it loses the facade's wings
 * (v10 portrait crop test), and a full-height crop of 1080p source is only
 * ~500px wide — soft on phones. Portrait uses the existing 4:5 composition with a
 * looping muted film, as requested. The entrance still is its fallback. Reduced
 * motion / data-saving preferences suppress autoplay; Watch the film opens 16:9. */
@media (max-aspect-ratio: 1/1) {
  /* v13 (integration preview, Stage C1): portrait is a full-viewport film as well — the same rule as landscape.
     The 16:9 film is cropped to the tall screen with the per-shot focus from app.js (the facade's wings are lost in
     shot 01 — a limitation of the source, documented); the 4:5 cover still remains the poster and the fallback. */
  .hero { height: 100svh; min-height: 560px; }
  .hero-media video { display: block; }
  .hero-shade {
    background:
      linear-gradient(to bottom, rgba(20, 18, 15, .44) 0, rgba(20, 18, 15, 0) 140px),
      linear-gradient(to top, rgba(20, 18, 15, .8) 0%, rgba(20, 18, 15, .42) 34%, rgba(20, 18, 15, 0) 60%);
  }
  .hero-copy { left: var(--gutter); right: var(--gutter); bottom: clamp(88px, 13svh, 136px); width: auto; }
  .hero-statement { font-size: clamp(34px, 9.4vw, 60px); }
  html[lang="th"] .hero-statement { font-size: clamp(30px, 8vw, 52px); }
  .hero-actions { margin-top: var(--s5); gap: var(--s3) var(--s3); }
  .hero .pill-light { min-height: 48px; padding: 0 var(--s5); font-size: 16px; }
  .hero-meta { left: var(--gutter); right: var(--gutter); bottom: var(--s4); justify-content: space-between; flex-direction: row-reverse; }
  .film-toggle { display: inline-grid; flex-shrink: 0; }   /* grid keeps the pause/play glyph centred in the ring (site-audit P2 fix) */
  .hero-note { text-align: left; }
  .watch {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 20px 0 16px;
    background: none; border: 1px solid rgba(255, 255, 255, .72); border-radius: 999px;
    color: var(--on-film); cursor: pointer; font: 400 16px/1 var(--font-body);
  }
  .watch-icon { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
}

/* short landscape screens (phones on their side): film fills the screen, no 560px floor */
@media (min-aspect-ratio: 1/1) and (max-height: 600px) {
  .hero { min-height: 0; }
  .hero-copy { bottom: 24px; }
  .hero-statement { font-size: clamp(26px, 3.6vw, 40px); }
  .hero-actions { margin-top: var(--s4); }
  .hero .pill-light { min-height: 44px; font-size: 16px; padding: 0 var(--s5); }
}

/* full film viewer */
.film-dialog {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #000; color: #fff;
}
.film-dialog[open] { display: grid; place-items: center; }
.film-dialog::backdrop { background: #000; }
.film-dialog video { width: 100%; max-height: 100dvh; aspect-ratio: 16 / 9; background: #000; }
.dialog-close {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: var(--gutter); z-index: 1;
  min-height: 44px; padding: 0 var(--s4);
  background: none; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; color: #fff; cursor: pointer;
  font: 400 15px/1 var(--font-body);
}
.film-dialog-status { position: absolute; left: var(--gutter); bottom: var(--s6); margin: 0; font-size: 14px; }
.film-dialog-status:empty { display: none; }

/* ───────── Reduced motion (system setting, or ?state=reduced for review) ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .reveal-card, .display .line.reveal > span, .hero-statement, .hero-actions { opacity: 1; transform: none; }
}
html[data-reduced] .ticker-track { animation: none; }
html[data-reduced] *, html[data-reduced] *::before, html[data-reduced] *::after { transition-duration: 1ms !important; }
html[data-reduced] .reveal-card, html[data-reduced] .display .line.reveal > span, html[data-reduced] .hero-statement, html[data-reduced] .hero-actions { opacity: 1; transform: none; }


/* ═════════════════ v10.2 — Home sequence after the film ═════════════════ */

/* header rides on the film (absolute) and returns as a fixed solid bar after it */
.site-header { position: absolute; }
.site-header.is-solid { position: fixed; animation: navIn var(--dur-s) var(--ease) both; }
@keyframes navIn { from { transform: translateY(-100%); } to { transform: none; } }
.site-header.menu-open { position: fixed; animation: none; }
.site-header.is-solid .brand { font-size: 24px; }
.site-header.is-solid .brand img { width: 22px; height: 22px; }

/* hero statement: one strong line + a quieter line, so the building keeps the frame */
.hero-copy { width: min(56vw, 860px); }
.hero-statement { font-size: inherit; line-height: inherit; }
.hs-main {
  display: block;
  font: 400 clamp(34px, 3.8vw, 58px)/1.1 var(--font-body); letter-spacing: -.022em;
  text-wrap: balance;
}
.hs-sub {
  display: block; margin-top: var(--s3);
  font: 400 clamp(17px, 1.35vw, 21px)/1.4 var(--font-body); letter-spacing: 0;
  color: rgba(247, 244, 238, .86);
}
html[lang="th"] .hs-main { line-height: 1.3; letter-spacing: 0; font-size: clamp(30px, 3.3vw, 50px); }
.hero-actions { margin-top: var(--s5); }

.eyebrow {
  margin: 0 0 var(--s4);
  font: 500 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
.eyebrow .tag { font: 400 12px/1 var(--font-pixel); letter-spacing: .04em; margin-right: var(--s2); }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.reveal-up { transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease); }
html.js .reveal-up:not(.is-in) { opacity: 0; transform: translateY(28px); }
.reveal-up.is-in { opacity: 1; transform: none; }

/* 1 · feature — continues the film's darkness and project */
.feature {
  position: relative;
  background: var(--film-ink); color: #f7f4ee;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5);
  align-items: end;
  padding: clamp(96px, 12vw, 176px) var(--gutter) clamp(96px, 11vw, 160px);
  overflow: clip;
}
.feature-media { grid-column: 1 / 9; position: relative; }
.feature-media figure { margin: 0; overflow: hidden; will-change: transform; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.fm-main { aspect-ratio: 3 / 2; }
.fm-detail {
  position: absolute; right: -14%; bottom: -12%;
  width: 30%; aspect-ratio: 4 / 5;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.feature-copy { grid-column: 10 / 13; padding-bottom: var(--s2); }
.feature .eyebrow { color: rgba(247, 244, 238, .7); }
.feature-title { margin: 0; font: 400 clamp(40px, 4.2vw, 64px)/1.05 var(--font-body); letter-spacing: -.02em; }
.feature-meta { margin: var(--s4) 0 0; font-size: 15px; color: rgba(247, 244, 238, .78); }
.feature-note { margin: var(--s4) 0 0; font-size: 13px; line-height: 1.5; color: rgba(247, 244, 238, .56); max-width: 36ch; }
.feature-links { margin-top: var(--s6); display: grid; justify-items: start; gap: var(--s2); }
.feature .link-arrow { font-size: 16px; }

/* 2 · selected work — the brand headline now heads the work, not a separator */
.work { padding-top: 0; }
.work-head { padding: clamp(80px, 9vw, 128px) 0 clamp(56px, 6vw, 88px); }
.work-head .display { margin-top: var(--s6); font-size: clamp(34px, 7.2vw, 104px); }

/* 3 · approach */
.approach {
  max-width: 1440px; margin: 0 auto;
  padding: clamp(96px, 10vw, 160px) var(--gutter);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5);
  border-top: 1px solid var(--hairline);
}
.approach-lead { grid-column: 1 / 6; align-self: start; position: sticky; top: 96px; }
.approach .eyebrow { color: var(--accent-ink); }
.approach-title { margin: 0; font: 400 clamp(34px, 3.4vw, 52px)/1.1 var(--font-body); letter-spacing: -.02em; }
.approach-text { margin: var(--s5) 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.approach-onestop { margin: var(--s5) 0 0; font: italic 500 17px/1.5 var(--font-body); max-width: 40ch; }
.approach-links { margin-top: var(--s6); display: grid; justify-items: start; gap: var(--s1); }
.phases { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; }
.phase { padding: var(--s6) 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 110px 1fr; column-gap: var(--s5); }
.phase:last-child { border-bottom: 1px solid var(--ink); }
.phase .wk { grid-row: 1 / 3; font: 400 13px/1.6 var(--font-pixel); letter-spacing: .04em; color: var(--accent-ink); }
.phase h3 { margin: 0; font: 500 22px/1.25 var(--font-body); letter-spacing: -.01em; }
.phase p { margin: var(--s2) 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* 4 · track record */
.record { background: var(--bg-soft); padding: clamp(80px, 8vw, 128px) var(--gutter); }
.facts { max-width: 1440px; margin: 0 auto; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.fact { border-top: 1px solid var(--ink); padding-top: var(--s4); display: grid; gap: var(--s2); }
.fact-n { font: italic 700 clamp(44px, 4.6vw, 72px)/1 var(--font-body); letter-spacing: -.02em; }
.fact-t { font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 24ch; }
.fact-t a { color: inherit; text-underline-offset: 3px; }
.clients { max-width: 1440px; margin: clamp(64px, 7vw, 104px) auto 0; }
.clients .eyebrow { color: var(--ink-2); }
.logo-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--s4); align-items: center; }
.logo-row li { display: grid; place-items: center; height: 72px; }
.logo-row img { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease); }

/* 5 · contact — back to the film's darkness, MSA ticker as the threshold */
.contact { background: var(--film-ink); color: #f7f4ee; }
.contact .ticker { background: var(--accent); }
.contact-inner { max-width: 1440px; margin: 0 auto; padding: clamp(96px, 11vw, 168px) var(--gutter) clamp(72px, 8vw, 120px); }
.contact .eyebrow { color: rgba(247, 244, 238, .7); }
.contact-title { margin: 0; max-width: 16ch; font: 400 clamp(40px, 5vw, 80px)/1.06 var(--font-body); letter-spacing: -.025em; }
.contact-sub { margin: var(--s5) 0 0; font-size: 18px; color: rgba(247, 244, 238, .8); }
.contact-actions { margin-top: var(--s7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s7); }
.pill-cream { min-height: 60px; padding: 0 var(--s7); border-color: rgba(247, 244, 238, .9); color: #f7f4ee; font-size: clamp(18px, 1.6vw, 22px); }
.contact-line { font-size: 18px; text-decoration: none; border-bottom: 1px solid rgba(247, 244, 238, .5); padding-bottom: 2px; min-height: 44px; display: inline-flex; align-items: center; }
.contact-addr { margin: var(--s8) 0 0; font-size: 13px; color: rgba(247, 244, 238, .56); }
.site-foot { max-width: 1440px; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s7); border-top: 1px solid rgba(247, 244, 238, .16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); font-size: 13px; color: rgba(247, 244, 238, .6); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s5); }
.site-foot a { color: #f7f4ee; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.site-foot p { margin: 0; align-self: center; }
.review { margin-top: 0; }

@media (hover: hover) and (pointer: fine) {
  .logo-row li:hover img { filter: none; opacity: 1; }
  .pill-cream:hover { background: #f7f4ee; color: var(--ink); }
  .contact-line:hover, .site-foot a:hover { border-color: #f7f4ee; opacity: .8; }
}

/* ── tablet / phone ── */
@media (max-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr); row-gap: var(--s8); padding-top: var(--s8); }
  .feature-media, .feature-copy { grid-column: 1; }
  .fm-detail { right: 4%; bottom: -18%; width: 38%; }
  .approach { grid-template-columns: minmax(0, 1fr); row-gap: var(--s7); }
  .approach-lead, .phases { grid-column: 1; }
  .approach-lead { position: static; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s6); }
  .logo-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .phase { grid-template-columns: minmax(0, 1fr); }
  .phase .wk { grid-row: auto; margin-bottom: var(--s1); }
  .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s3); }
  .logo-row li { height: 60px; }
  .contact-actions { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .pill-cream { justify-content: center; }
  .contact-line { justify-content: center; }
  .site-foot { flex-direction: column; }
}
/* portrait hero (v13): statement sits on the film's lower shade — full viewport in both orientations */
@media (max-aspect-ratio: 1/1) {
  .hero-copy { width: auto; }
  .hs-main { font-size: clamp(30px, 8.4vw, 50px); }
  html[lang="th"] .hs-main { font-size: clamp(28px, 7.4vw, 44px); }
  .hs-sub { font-size: 17px; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 600px) {
  .hs-main { font-size: clamp(24px, 3.2vw, 36px); }
  .hs-sub { font-size: 15px; margin-top: var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1; transform: none; }
  .parallax { transform: none !important; }
  .site-header.is-solid { animation: none; }
}
html[data-reduced] .reveal-up { opacity: 1; transform: none; }
html[data-reduced] .parallax { transform: none !important; }

/* ═════════════════ v10.3 — owner review fixes ═════════════════ */
/* Record: one design-development perspective gives the facts a face */
.studio-frames {
  max-width: 1440px; margin: 0 auto clamp(64px, 7vw, 104px);
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: end;
}
.studio-frames figure { margin: 0; }
.studio-frames img { width: 100%; height: auto; display: block; }
.sf-wide img { aspect-ratio: 3 / 2; object-fit: cover; }
.studio-frames figcaption { margin-top: var(--s3); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.studio-frames figcaption .tag { font: 400 11px/1 var(--font-pixel); letter-spacing: .04em; color: var(--accent-ink); margin-right: var(--s1); }
.studio-frames figcaption a { color: var(--ink); text-underline-offset: 3px; }

@media (max-width: 900px) {
  .studio-frames { grid-template-columns: minmax(0, 1fr); }
}

/* ═════════════════ v11 — links between the prototype pages and msa.in.th ═════════════════ */
.nav-links .ext small { display: block; margin-top: 2px; font: 500 11px/1.2 var(--font-body); letter-spacing: .1em; opacity: .55; }
.site-header.menu-open .nav-links a.ext { display: inline-block; }
/* v11.1 — card numbers are positions in a list ("02/08"), not project codes */
.tag-of { opacity: .6; }

/* v11.2 — DD03 plans removed from Home (not approved for publication).
   Record keeps one perspective: image on 8 of 12 columns, caption beside it at the bottom — no empty slot. */
.studio-frames.is-single { display: block; }
.studio-frames.is-single .sf-wide {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); align-items: end;
}
.studio-frames.is-single .sf-wide img { grid-column: 1 / 9; }
.studio-frames.is-single .sf-wide figcaption { grid-column: 9 / 13; margin: 0; max-width: 34ch; }
@media (max-width: 900px) {
  .studio-frames.is-single .sf-wide { display: block; }
  .studio-frames.is-single .sf-wide figcaption { margin-top: var(--s3); max-width: none; }
}

/* ═════════════════ v12.2 — works without JavaScript ═════════════════
   Every page sets html.js from an inline <head> script and removes it again if its page script did not
   run (failed download, blocked, error). Content is hidden for motion ONLY while html.js is on.
   Without it: content is visible, the menu shows as plain links, and controls that need a script are hidden. */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal-card:not(.is-in), html.js .reveal-up:not(.is-in), html.js .display .line.reveal:not(.is-in) > span,
  html.js .hero:not(.is-ready) .hero-statement, html.js .hero:not(.is-ready) .hero-actions { opacity: 1; transform: none; }
}
html.js[data-reduced] .reveal-card:not(.is-in), html.js[data-reduced] .reveal-up:not(.is-in), html.js[data-reduced] .display .line.reveal:not(.is-in) > span,
html.js[data-reduced] .hero:not(.is-ready) .hero-statement, html.js[data-reduced] .hero:not(.is-ready) .hero-actions { opacity: 1; transform: none; }
html:not(.js) .needs-js { display: none !important; }
/* the hero film only gets its source from app.js; without it Chrome would still show an empty player with
   controls that takes keyboard focus behind the still image */
html:not(.js) #film { display: none; }
html:not(.js) .nav-links {
  display: flex; flex: 1 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: wrap;
  gap: 4px var(--s4); margin-left: auto;
}
html:not(.js) .nav-links a { font: 500 14px/1.3 var(--font-body); padding: 4px 0; white-space: nowrap; }
html:not(.js) .nav-links a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
html:not(.js) .nav-links .ext small { display: none; }
html:not(.js) .nav { height: auto; min-height: var(--nav-h); flex-wrap: wrap; row-gap: 0; }
@media (max-width: 560px) {
  html:not(.js) .brand span { display: none; }
  html:not(.js) .nav { gap: var(--s3); }
  html:not(.js) .nav-links { gap: 2px var(--s3); }
  html:not(.js) .nav-links a { font-size: 13px; }
}

/* ═════════════════ v12.2 — Thai small labels: no tracking ═════════════════
   The uppercase labels are tracked (.04–.14em) for Latin. In Thai the same spacing pulls the letters of a
   word apart ("ป ร ะ เ ภ ท"), so it is removed in Thai only. Labels whose visible text is always digits or
   Latin (index numbers, "msa.in.th ↗", WK 01) keep their tracking. English is unchanged. */
html[lang="th"] :is(.intro-meta, .card .cat, .card .loc, .card .more, .btn, .eyebrow, .flabel, .fresult p,
  .ix-cat, .ix-go, .ah-facts .k, .ah-h3, .badge, .g-cap, .plan-zoom, .check-table thead th, .ah-dl dt,
  .ah-facts2 dt, .ah-pn-link .k, .ab-vision-label, .ab-tile-cat, .ct-k, .field label, .jn-label, .jn-count, .jn-kicker,
  .ar-kicker, .jn-chapters-label, .jn-note-k, .ar-toc-label, .ar-section-k) { letter-spacing: 0; }
html[lang="th"] .check-table td::before { letter-spacing: 0; }

/* v12.2 — the big headings clip each line (overflow: hidden) so the words can rise into place. The clip box
   was the line box, which cut the tops of Thai tone marks (ที่, ตั้ง) and the left foot of the first italic
   capital (A in ARCHITECTURAL), and the bottom of the comma and of Thai vowels below the line (มูฟ). The box now
   reaches further up (Thai), left and down (all); the hidden start position moves down by the same amount; the negative margins
   cancel the padding, so the heading sits exactly where it did. */
.display { display: flex; flex-direction: column; }   /* the lines' margins add up instead of collapsing */
.display .line:not(.and) { padding-left: .08em; margin-left: -.08em; padding-bottom: .16em; margin-bottom: -.12em; }
.display .line.and { padding-bottom: .16em; margin-bottom: -.07em; }
html.js .display .line.reveal:not(.is-in) > span { transform: translateY(calc(105% + .12em)); }
html[lang="th"] .display .line:not(.and) { padding-top: .24em; margin-top: -.24em; }
html[lang="th"] .display .line.and { padding-top: .3em; margin-top: -.35em; }

/* Existing MSA tokens, scoped media integration; no global redesign. */
.media-integration { max-width: 1440px; margin: 0 auto; padding: var(--s8) var(--gutter); }
.media-integration h2 { font-size: clamp(32px, 5vw, 64px); line-height: 1.15; margin: 0 0 var(--s5); overflow-wrap: anywhere; }
.media-integration-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5); }
.media-integration-head p, .media-integration-caption { color: var(--ink-2); }
.media-integration video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--film-ink); }
.media-integration-caption { font-size: 14px; line-height: 1.6; margin-top: var(--s4); }
.study-entry { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.study-entry-image { display: block; }
.study-entry-image img { display: block; width: 100%; height: auto; }
.study-entry-copy p { line-height: 1.7; }
.study-entry-copy .link-arrow { margin-top: var(--s5); }
@media (max-width: 767px) {
  .media-integration-head { display: block; }
  .study-entry { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}

/* v13: an exactly square short screen (e.g. 600×600) matches both the portrait block and the short-landscape block above;
   keep the statement above the meta row, which is absolute in portrait now */
@media (max-aspect-ratio: 1/1) and (max-height: 600px) { .hero-copy { bottom: 76px; } }

/* ═══════════════ hybrid (owner brief 27 Sep 2026): the live site's identity pieces, on the prototype's tokens ═══════════════ */
/* loader — brand beat only; hides itself at 2.4 s with or without JS, hidden outright for reduced motion / repeat visits */
.msa-loader { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; align-items: center; justify-content: center; transition: opacity .4s ease, visibility 0s linear .4s; animation: loaderAuto .4s ease 2.4s forwards; }
html.no-loader .msa-loader, .msa-loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.js) .msa-loader { display: none; }   /* no JavaScript / page script failed: never cover the page */
html.no-loader .msa-loader { display: none; }
@keyframes loaderAuto { to { opacity: 0; visibility: hidden; pointer-events: none; } }   /* last-resort safety only */
.msa-loader .mark { font: 400 clamp(56px, 9vw, 84px)/1 var(--font-pixel); color: #fff; letter-spacing: .08em; animation: markEnter .95s cubic-bezier(.2,.6,.2,1) both, pixelBlink 1.4s steps(2) .95s infinite; }
@keyframes markEnter { from { opacity: 0; letter-spacing: .55em; filter: blur(12px); } 60% { opacity: 1; filter: blur(0); } to { opacity: 1; letter-spacing: .08em; filter: blur(0); } }
@keyframes pixelBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: .55; } }
.msa-loader .sub { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font: 400 11px/1 var(--font-pixel); color: #777; letter-spacing: .2em; text-transform: uppercase; opacity: 0; animation: loaderFadeIn .7s ease .65s forwards; white-space: nowrap; }
@keyframes loaderFadeIn { to { opacity: 1; } }
.msa-loader .barfill { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); width: 160px; height: 4px; background: #1a1a1a; overflow: hidden; opacity: 0; animation: loaderFadeIn .5s ease .75s forwards; }
.msa-loader .barfill::after { content: ""; display: block; height: 100%; width: 0; background: #fff; animation: barfill 1.5s steps(20) .75s forwards; }
@keyframes barfill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .msa-loader { display: none; } }

/* closing round (trace: ~1.4 s of Layout on a 4x-throttled phone right after DOMContentLoaded, Thai text across the whole page):
   below-the-fold Home sections are laid out only when they come near the screen. The design does not change. */
@supports (content-visibility: auto) {
  /* 2026-09-28: only sections whose height does not change after load. #delivered and #latest grow when their photos
     arrive; with a stale remembered size their links spilled over the footer at 390 px (evidence/mobile-link-before.png). */
  #work, #feature, #approach, #why, #studio-film, #record, #concept-study { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
  /* A direct hash needs real heights for preceding sections before the browser
     chooses its scroll position. Keep the fast path for ordinary visits. */
  html:has(:target) #work, html:has(:target) #feature, html:has(:target) #delivered,
  html:has(:target) #approach, html:has(:target) #why, html:has(:target) #studio-film,
  html:has(:target) #record, html:has(:target) #concept-study, html:has(:target) #latest,
  html:has(:target) #journal, html:has(:target) #contact, html:has(:target) #foot {
    content-visibility: visible;
    contain-intrinsic-size: none;
  }
}
#latest { scroll-margin-top: 100px; }

/* section head — eyebrow column · italic display word · Cormorant sub-line (live site) */
.sec-head { max-width: 1440px; margin: 0 auto; padding: 0 0 var(--s6); display: grid; grid-template-columns: minmax(220px, 34%) 1fr; gap: var(--s6); align-items: end; border-bottom: 1px solid var(--hairline); }
.sec-eye { display: grid; gap: var(--s2); }
.submeta { margin: 0; font: 400 11px/1.4 var(--font-pixel); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.sec-display { margin: 0; font: italic 700 clamp(44px, 6.4vw, 92px)/.95 var(--font-body); letter-spacing: -.02em; text-transform: uppercase; }
html[lang="th"] .sec-display { font-style: normal; font-size: clamp(34px, 5vw, 68px); letter-spacing: 0; line-height: 1.1; }
.sub-italic { margin: var(--s3) 0 0; font: italic 500 clamp(16px, 1.5vw, 21px)/1.35 var(--font-accent); color: var(--accent-ink); }
html[lang="th"] .sub-italic { font: 400 clamp(15px, 1.4vw, 19px)/1.5 var(--font-body); }

/* pixel marks on the selected-work cards */
.card .pmark { width: 40px; height: 40px; padding: 5px; background: var(--ink); display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 0; }
.card .pmark i { display: block; } .card .pmark i.on { background: #fff; }

/* delivered */
.delivered { max-width: 1440px; margin: 0 auto; padding: clamp(80px, 9vw, 128px) var(--gutter) 0; }
.dl-reel { position: relative; margin: clamp(32px, 4vw, 56px) 0 0; background: #000; }
.dl-reel video { display: block; width: 100%; height: auto; aspect-ratio: 1296 / 704; object-fit: cover; }
.vid-meta { position: absolute; padding: 6px 10px; background: rgba(0,0,0,.55); color: #fff; font: 400 11px/1 var(--font-pixel); letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.vid-tl { top: var(--s4); left: var(--s4); } .vid-br { right: var(--s4); bottom: var(--s4); }
.vid-meta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.dl-toggle { position: absolute; right: var(--s4); top: var(--s4); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.5); color: #fff; cursor: pointer; display: grid; place-items: center; }
.dl-ico { width: 12px; height: 12px; border-left: 4px solid #fff; border-right: 4px solid #fff; }            /* pause bars */
.dl-toggle[aria-pressed="true"] .dl-ico { border: 0; width: 0; height: 0; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }   /* play */
.dl-reel figcaption { position: static; padding: var(--s3) 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); background: var(--bg); }
.dl-grid { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s5); }
.dl-grid figure { margin: 0; display: grid; gap: var(--s3); }
.dl-grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-soft); }
.dl-grid figcaption { font-size: 14px; line-height: 1.5; color: var(--ink-2); display: grid; gap: 2px; }
.dl-grid figcaption b { font-weight: 500; color: var(--ink); }
.dl-grid .tag, .dl-reel .tag { justify-self: start; padding: 4px 7px; background: var(--ink); color: #fff; font: 400 10px/1 var(--font-pixel); letter-spacing: .08em; }
.dl-more { margin: var(--s7) 0 0; }

/* why */
.why { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 8vw, 112px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s7); }
.why-col { border-top: 1px solid var(--ink); padding-top: var(--s5); }
.why-list { margin: var(--s4) 0 var(--s4); padding: 0 0 0 1.4em; display: grid; gap: var(--s3); font-size: 17px; line-height: 1.5; }
.why-list li::marker { font: 400 13px var(--font-pixel); color: var(--accent-ink); }

/* latest / journal */
.latest, .journal-fb { max-width: 1440px; margin: 0 auto; padding: clamp(72px, 8vw, 112px) var(--gutter) 0; }
.journal-fb { padding-bottom: clamp(72px, 8vw, 112px); }
.news-grid { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.news-card a { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--s3); height: 100%; border: 1px solid var(--hairline); text-decoration: none; color: inherit; background: var(--bg); }
.news-card figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.news-card figure img { width: 100%; height: 100%; object-fit: cover; }
.news-card .news-ph { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f1efe9 0 2px, #ece9e1 2px 12px); color: var(--muted); font: 400 12px/1 var(--font-pixel); letter-spacing: .14em; }
.news-card .news-meta { padding: 0 var(--s4); font: 400 11px/1 var(--font-pixel); letter-spacing: .14em; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.news-card .news-meta .dot { width: 6px; height: 6px; background: var(--accent); }
.news-card h3 { margin: 0; padding: 0 var(--s4); font: 500 17px/1.3 var(--font-body); letter-spacing: -.01em; }
.news-card p { margin: 0; padding: 0 var(--s4); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .news-read { padding: var(--s3) var(--s4) var(--s4); font: 500 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.news-cta-row { margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); align-items: center; }
.news-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 var(--s6); background: var(--ink); color: #fff; text-decoration: none; font: 500 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.fb-host { margin-top: clamp(32px, 4vw, 48px); padding: var(--s6); border: 1px solid var(--hairline); background: var(--bg-soft); display: grid; gap: var(--s4); }
.fb-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 70ch; }
.fb-actions { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; }
.fb-status { margin: 0; font-size: 13px; color: var(--ink-2); min-height: 1em; }
.fb-host .fb-page, .fb-host iframe { max-width: 100%; }

/* live footer (white) after the dark contact band */
.foot { background: var(--bg); color: var(--ink); }
.pixel-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 14px; grid-template-rows: repeat(4, 14px); width: 100%; overflow: hidden; }
.pixel-strip span { background: var(--ink); } .pixel-strip span.off { background: var(--bg); } .pixel-strip span.alt { background: var(--accent); } .pixel-strip span.dim { background: var(--hairline); }
.foot-meta { max-width: 1440px; margin: 0 auto; padding: var(--s8) var(--gutter) var(--s7); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: var(--s6); align-items: start; font-size: 13px; color: var(--ink-2); }
.foot-meta .col h4 { margin: 0 0 var(--s4); font: 500 10px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.foot-meta .col p, .foot-meta .col a { display: block; margin: 0; color: var(--ink); font-size: 14px; line-height: 1.7; text-decoration: none; }
.foot-meta .col a { min-height: 32px; }
.foot-meta .foot-brand { display: grid; gap: var(--s3); justify-items: start; }
.foot-meta .foot-brand img { width: 150px; height: auto; }
.foot-meta .foot-brand .longname { font: italic 500 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
html[lang="th"] .foot-meta .foot-brand .longname { font-style: normal; text-transform: none; letter-spacing: 0; font-size: 13px; }
.foot-meta .foot-brand small { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.copyright { max-width: 1440px; margin: 0 auto; padding: var(--s4) var(--gutter) var(--s7); border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3) var(--s5); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.copyright nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.copyright a { color: var(--ink); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
html[lang="th"] .copyright { text-transform: none; letter-spacing: 0; font-size: 12px; }
.fact-word { font-size: clamp(22px, 2.6vw, 34px) !important; letter-spacing: .04em; }
@media (hover: hover) and (pointer: fine) { .foot-meta .col a:hover, .copyright a:hover { color: var(--accent-ink); } .news-card a:hover { border-color: var(--ink); } }

@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: var(--s4); }
  .dl-grid, .why, .news-grid { grid-template-columns: 1fr; }
  .foot-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot-meta { grid-template-columns: 1fr; gap: var(--s6); }
  .vid-br { display: none; }
  .dl-grid img { aspect-ratio: 3 / 2; }
}