/* =====================================================================
   v3 — bilingual text in two columns on every page (27-Aug feedback:
   "ปรับทุกหน้าตามนี้" — the Text level keeps 2 columns, Thai left, English
   right, flush left). Loaded only by the *-v3.html pages, so the v2 set
   stays exactly as it was (restore point: git tag v2-before-bilingual).

   Running text shows both languages at once. Short UI labels (buttons,
   form labels, small heads, the nav) keep the EN/TH toggle — splitting a
   one-word label into two columns only adds noise.

   The grid is self-sizing: two columns when the block has room for two
   readable measures (≥ 2 × 17rem), otherwise Thai stacked over English.
   So a full-width lede splits, while a note inside a narrow card or a
   location row stacks — no per-page breakpoints needed.
   ===================================================================== */

:root { --bi-gap: clamp(1.5rem, 4vw, 3rem); }

.page-hero .lede:not(.bi),
.collab .nt,
.contact .form-note, .form-note,
.contact-info p,
.tester-hint2,
.map-loc__desc:not(:has(.map-loc__count)),
.mag-cover__lede,
.mag .mag-body p,
.mag-quote blockquote,
.mag-step p,
.mag-specimen__line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  column-gap: var(--bi-gap);
  row-gap: .5rem;
  max-width: none;
  text-align: left;
}
:is(.page-hero .lede:not(.bi), .collab .nt, .form-note, .contact-info p, .tester-hint2,
    .map-loc__desc:not(:has(.map-loc__count)), .mag-cover__lede, .mag .mag-body p,
    .mag-quote blockquote, .mag-step p, .mag-specimen__line) > :is(.i18n-th, .i18n-en) {
  display: block !important;   /* beats the toggle's display:none */
  margin: 0;
}
:is(.page-hero .lede:not(.bi), .collab .nt, .form-note, .contact-info p, .tester-hint2,
    .map-loc__desc:not(:has(.map-loc__count)), .mag-cover__lede, .mag .mag-body p,
    .mag-quote blockquote, .mag-step p, .mag-specimen__line) > .i18n-th { order: -1; }   /* Thai first / left */

/* Thesis: the drop cap was a ::first-letter on the paragraph; with Thai and
   English side by side a cap on one column only reads as a mistake, so v3
   drops it (a grid container gets no ::first-letter anyway). */

/* Thesis spreads: text + plate side by side left the text ~490px wide, too
   narrow for two languages. The text now runs the full measure (Thai |
   English) and the plate sits under it in one of the same two columns —
   right for a normal spread, left for a flipped one. */
.mag-spread, .mag-spread--text-lead { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; row-gap: clamp(1.6rem,4vh,2.6rem); }
.mag-spread > :not(.mag-spread__media) { grid-column: 1 / -1; }
.mag-spread__media { grid-column: 2; order: 0; }
.mag-spread--flip .mag-spread__media { grid-column: 1; order: 0; }
@media (max-width: 820px) { .mag-spread__media, .mag-spread--flip .mag-spread__media { grid-column: 1 / -1; } }

/* Thesis pull quote: both languages at the headline size, side by side
   (was English 40px with a 16px Thai line underneath). */
.mag-quote blockquote { max-width: none; }
.mag-quote blockquote > .i18n-th { font-size: var(--fs-section); color: inherit; line-height: 1.2; letter-spacing: 0; }

/* Collaborators cards: content sits at the top of every card, so the
   names line up across a row (space-between pushed them down by
   different amounts depending on how long each note was). */
.collab { justify-content: flex-start; gap: 1.2rem; }

/* Page titles sit on one line and show in full (14-Oct brief, §8): no 16ch cap
   and no forced breaks — the title may run past the content grid below. On a
   narrow screen it scales down with the viewport instead of wrapping or
   pushing the page sideways. The Thai subtitle underneath still wraps. */
.page-hero h1 { max-width: none; white-space: nowrap; font-size: min(var(--fs-section), 9vw); }
.page-hero h1 .th { white-space: normal; }
/* Title block rhythm (21-Oct: the Thai line sat on the title's descenders): kicker,
   title and Thai subtitle on clear steps, with room for Thai's stacked marks */
.page-hero .kicker { display: flex; margin-bottom: .9rem; }
.page-hero h1 .th { margin-top: .8rem; line-height: 1.6; letter-spacing: 0; }

/* The KWAN mark and the menu (21-Oct): never closer than one and a half menu lines.
   On a tall left column the menu still drops to the foot (margin-top: auto); on a
   phone, where the column is only as tall as its content, this is the gap. */
.desk__brand { margin-bottom: calc(var(--fs-section) * 1.5); }

/* EN / ไทย: a 24 px+ tap target round each short label, without moving the labels */
.lang-toggle button { padding: .35rem .25rem; margin: -.35rem -.25rem; }

/* =====================================================================
   Opening screen + screensaver (14-Oct brief §7), one design for both: the
   lecture-slide cover — black, a grey hairline across the lower part, the
   address set under it, flush left to the rule's width. js/screensaver-v3.js
   runs it; the opening screen is written in by the inline script at the top
   of <body> so it is there on the very first paint.
   Display size on purpose: it is a cover, not running text — the one place
   outside the 40/16/13 scale.
   ===================================================================== */
.splash { position: fixed; inset: 0; z-index: 3000; background: #000; color: #f7f7f5; cursor: none;
  opacity: 1; transition: opacity .5s ease, visibility 0s linear 0s; }
.splash.is-off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility 0s linear .45s; }
.splash__rule { position: absolute; left: 5.5vw; right: 5.5vw; top: 64%; height: 1px; background: #787878; }
/* "sirin-kwan.co" is 5.67em wide in Lava 200: (100vw − 2 × 5.5vw) / 5.7 fills the rule;
   the vh cap keeps it inside the band under the rule on wide, short screens */
.splash__name { position: absolute; left: 5.5vw; top: 64%; height: 36%; display: flex; align-items: center;
  font-family: var(--serif); font-weight: 200; font-size: min(15.6vw, 24vh); line-height: 1; letter-spacing: 0; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .splash, .splash.is-off { transition: none; } }

/* Contrast (14-Oct brief §11, Lighthouse): the dim grey was 3.1:1 on paper; #6e6e6e
   is 4.9:1, the WCAG AA minimum for small text, and still reads as the quiet tone. */
:root { --muted: #6e6e6e; }
.desk__tools .lang-toggle button, .desk__overlay .lang-toggle button { opacity: .62; }
.desk__tools .lang-toggle button[aria-pressed="true"], .desk__overlay .lang-toggle button[aria-pressed="true"] { opacity: 1; }

/* Accessibility pass (Lighthouse): decorative page numbers come from data-n, so they
   stay ornament rather than low-contrast text; Contact's side heads are h2 now (no
   level skipped) and keep the small-caps look the h4 had. */
.page-hero .idx[data-n]::before { content: attr(data-n); }
.contact-info .contact-info__h { font-family: inherit; font-size: var(--fs-small); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); margin: 1.5rem 0 .5rem; line-height: inherit; }
/* Fonts page: the foundry links sit on a grey card — a step darker to stay AA there */
.font-item__meta .btn { color: #555; }