/* 30+DA small pages (privacy policy, delete your data, the admin's "Try sign-in" result, GKVerify's back page) — served from
   src/lib/thirtyda-pages.mjs. Same tokens and type as the app (app.css): navy wordmark band, Archivo, a centred
   column on a soft desk, the Me page's little flag row. Short and big enough for tired eyes.
   No script, no inline style (the page CSP allows only this file and Google Fonts). */
:root {
  --navy: #0b1c3f;
  --ink: #0b1c3f;
  --muted: #5b6478;
  --desk: #eef1f6;
  --page: #ffffff;
  --line: #cfd6e2;
  --line-soft: #e4e8ef;
  --red: #d92d20;
  --red-soft: #fdecea;
  --green: #1e9e57;
  --green-soft: #e3f4ea;
  --body: 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--desk); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--desk);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); font-weight: 600; text-underline-offset: 2px; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid #3b6fe0; outline-offset: 2px; }

.doc { max-width: 560px; min-height: 100dvh; margin: 0 auto; background: var(--page); }
@media (min-width: 600px) {
  .doc { min-height: 0; margin: 32px auto; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-soft), 0 24px 64px rgb(11 28 63 / 0.08); }
}
.doc-bar { display: flex; align-items: center; height: 56px; padding: 0 20px; background: var(--navy); }
.doc-mark { color: #fff; font-weight: 900; font-size: 22px; letter-spacing: 0.02em; text-decoration: none; font-stretch: 112%; }
.doc-body { padding: 22px 20px 36px; }
@media (min-width: 600px) { .doc-body { padding: 28px 32px 40px; } }

/* The language row (as on the app's Me page): flag + short name, no boxes, one line; the current one navy. */
.langs { display: flex; justify-content: space-between; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
@media (min-width: 600px) { .langs { padding: 8px 24px; } }
.langs a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 7px; border-radius: 999px;
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow-wrap: normal; color: var(--ink);
}
.langs a[aria-current="true"] { background: var(--navy); color: #fff; }
/* Phones narrower than 380 px (360 px Android, 320 px): tighter, so the row still fits with no sideways scroll. */
@media (max-width: 379px) {
  .langs { padding: 8px 6px; gap: 0; }
  .langs a { padding: 0 4px; gap: 3px; }
}
.flag { display: inline-block; font-size: 1.1em; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }

h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 800; font-stretch: 108%; letter-spacing: -0.005em; overflow-wrap: anywhere; }
p { margin: 0 0 10px; }
.doc-date { margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.doc-lede { margin-top: 12px; font-size: 17px; }
.doc-fine { font-size: 14px; color: var(--muted); }
.doc-contact { margin-top: 22px; color: var(--muted); }
.doc-actions { margin-top: 26px; }
.doc-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  border-radius: 8px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 700;
}
/* GKVerify's back page (/30da/back): one button as wide as the column and big enough to hit without glasses,
   the "Open in the browser" link centred under it. */
.doc-btn-big { display: flex; width: 100%; min-height: 72px; padding: 12px 20px; border-radius: 14px; font-size: 24px; font-weight: 800; text-align: center; }
.doc-web { margin-top: 18px; text-align: center; font-size: 17px; }

/* Privacy: one plain line per point. */
.facts { list-style: none; margin: 16px 0 0; padding: 0; }
.facts li { margin: 0; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.facts li:last-child { border-bottom: 1px solid var(--line-soft); }
.facts b { font-weight: 800; }
/* The privacy policy's few headings (what we keep, who sees what, services, how long, your choices). */
.doc-body h2 { margin: 28px 0 0; font-size: 19px; line-height: 1.3; font-weight: 800; font-stretch: 104%; overflow-wrap: anywhere; }
.doc-body h2 + .facts { margin-top: 8px; }
.facts + .doc-fine { margin-top: 10px; }
/* Child safety: "If a child is in danger right now, call the police." */
.doc-alert { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--red-soft); color: var(--ink); font-weight: 700; }

/* Delete your data: three numbered steps. */
.steps { list-style: none; margin: 18px 0 14px; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; min-height: 28px; margin: 0 0 14px; padding-left: 40px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 14px; font-weight: 800;
}

/* The "Try sign-in" result: just the verdict, big. */
.try-big { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; font-size: 40px; line-height: 1.1; font-weight: 900; }
.try-big.ok { color: var(--green); }
.try-big.bad { color: var(--red); }
.try-mark { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 22px; }
.try-big.ok .try-mark { background: var(--green); }
.try-big.bad .try-mark { background: var(--red); }
.try-who { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.try-line { font-size: 17px; }
/* The try page carries all 5 languages (its address works once): only one shows. The first shown (the browser's
   language) is the last in the page, so a flag's #link (:target), always earlier, hides it. */
.tr { display: none; }
.tr.on, .tr:target { display: flow-root; }
.tr:target ~ .tr.on { display: none; }

/* Khmer / CJK: no tracking or capitals in the small date line, a touch more line height for Khmer. */
:lang(km) .doc-date, :lang(zh) .doc-date, :lang(ko) .doc-date, :lang(ja) .doc-date { font-family: var(--body); letter-spacing: 0; text-transform: none; font-size: 13px; }
:lang(km) body, .doc:lang(km), .tr:lang(km) { line-height: 1.7; }
:lang(km) h1, :lang(km) .doc-body h2 { line-height: 1.45; }
:lang(km) .try-big { line-height: 1.4; }
:lang(ko) .doc-body { word-break: keep-all; overflow-wrap: break-word; }
/* Khmer breaks at the spaces between its phrases: src/thirtyda-app/shared/khmer.js joins the clusters inside each
   phrase (a browser would split words by its own dictionary) and marks where a too-long phrase may break between two
   words. Last resort, a piece wider than its whole box still wraps rather than run out of it. */
html:lang(km), [lang="km"] { overflow-wrap: break-word; }

/* ==========================================================================================================
   The home page (/30da/home, src/lib/thirtyda-pages.mjs homePage): laid out like the owner's template
   (ggmt.sg/newsfeed/3una5aha) in the app's own colours — the navy night, white, the soft greys — with ONE accent,
   the app's red, as a fine thread (the teaser's red string). The template's gold is gone: navy and white instead.
   Phones: the top bar (wordmark + store icons, the flags under them), the phone-shaped card, the words, the strip.
   PC (900 px and up): the card left (it stays in view), the words right, like the template.
   Everything is under .page-home, so the other pages do not change.
   ========================================================================================================== */
.page-home {
  --navy-2: #13285a;
  --on-dark-muted: #aab4cf;
  --on-dark-soft: #d8def0;
  --hm-rule: rgb(255 255 255 / 0.14);
  --hm-gutter: 16px;
  background: var(--navy);
  color: #fff;
  font-size: 16px;
  line-height: 1.55;
}
/* The canvas behind the home page is navy too, so iOS overscroll (or any stray pixel) never shows the grey desk. */
:root:has(> body.page-home) { background: var(--navy); }
.page-home p, .page-home h1, .page-home h2, .page-home ul, .page-home ol, .page-home figure { margin: 0; }
.page-home ul, .page-home ol { padding: 0; list-style: none; }
.page-home a { color: inherit; overflow-wrap: normal; }
.page-home .hm-i { display: block; flex: none; }
.page-home .hm-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--hm-gutter); }
@media (min-width: 600px) { .page-home { --hm-gutter: 28px; } }
/* Chinese / Japanese: never break inside a word — only between phrases (the page's <wbr>s) and after punctuation.
   Korean keeps its words whole too. Khmer (its own lines on every page) breaks only between its phrases (khmerKeep). */
.page-home:lang(zh), .page-home:lang(ja), .page-home:lang(ko) { word-break: keep-all; line-break: strict; overflow-wrap: break-word; }
.page-home [lang="km"] { word-break: normal; line-break: auto; }

/* ---- Top bar: the wordmark, the flags, the store icons (phones: the icons beside the wordmark, the flags under). */
.page-home .hm-top { border-bottom: 1px solid var(--hm-rule); }
.page-home .hm-top-in {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo stores" "flags flags";
  align-items: center; column-gap: 12px; padding-top: 10px;
}
.page-home .hm-logo { grid-area: logo; font-size: 27px; line-height: 44px; font-weight: 900; font-stretch: 125%; letter-spacing: -0.01em; text-decoration: none; color: #fff; }
.page-home .hm-stores-top { grid-area: stores; justify-self: end; }
.page-home .langs { grid-area: flags; padding: 6px 0 8px; border-bottom: 0; }
.page-home .langs a { min-height: 44px; min-width: 44px; justify-content: center; color: #fff; }
.page-home .langs a[aria-current="true"] { background: #fff; color: var(--navy); }
/* Under 380 px the row sits inside the page's 16 px gutters (288 px at 320): tighter links so all five fit. */
@media (max-width: 379px) {
  .page-home .langs a { padding: 0 2px; gap: 2px; }
}
@media (min-width: 900px) {
  .page-home .hm-top-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo flags stores"; column-gap: 24px; padding-top: 0; }
  .page-home .langs { justify-self: end; gap: 4px; padding: 12px 0; }
  .page-home .hm-stores-top { padding-left: 24px; border-left: 1px solid var(--hm-rule); }
}

/* ---- The store icons (the template's): rounded squares, 44 px. App Store dark, Google Play white (both "coming
   soon": no link), Windows dark — the one that opens 30+DA (the web app). */
.page-home .hm-stores { display: flex; gap: 8px; }
.page-home .hm-store {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  background: rgb(11 28 63 / 0.82); border: 1px solid rgb(255 255 255 / 0.24); color: #fff;
}
.page-home .hm-store svg { display: block; width: 22px; height: 22px; }
.page-home .hm-store-play { background: #fff; border-color: #fff; }
.page-home span.hm-store { cursor: default; }
.page-home .hm-stores-top .hm-store-apple, .page-home .hm-stores-top .hm-store-windows { background: var(--navy-2); }
.page-home a.hm-store:hover { border-color: #fff; }
.page-home a.hm-store:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- The two columns. */
.page-home .hm-main { padding-top: 22px; padding-bottom: 56px; }
/* The teaser's red string through the top of the page too (owner 2026-10-14): one loose thread from edge to edge,
   behind the card and the words; thin at every size (non-scaling stroke). */
.page-home { overflow-x: clip; }
.page-home .hm-main { position: relative; }
.page-home .hm-thread { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; pointer-events: none; z-index: 0; }
.page-home .hm-thread path { fill: none; stroke: var(--red); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.9; }
.page-home .hm-cols { position: relative; z-index: 1; }
/* Phones: one column, the words would sit on the thread — the photos already carry it there. On PC it runs behind
   the card and the Reminder box, never across a line of text. */
@media (max-width: 899px) { .page-home .hm-thread { display: none; } }
.page-home .hm-cols { display: flex; flex-direction: column; gap: 30px; }
.page-home .hm-left { display: flex; justify-content: center; }
.page-home .hm-text { min-width: 0; }
@media (min-width: 900px) {
  .page-home .hm-main { padding-top: 44px; padding-bottom: 88px; }
  .page-home .hm-cols { flex-direction: row; align-items: flex-start; justify-content: center; gap: 72px; }
  .page-home .hm-left { flex: 0 0 380px; }
  .page-home .hm-text { flex: 0 1 560px; padding-top: 8px; }
}
/* The card (676 px tall) stays in view while the words scroll — only on screens tall enough to hold all of it
   (a 1366 × 768 laptop's window is ~657 px: there it scrolls with the page instead of being cut off). */
@media (min-width: 900px) and (min-height: 740px) {
  .page-home .hm-left { position: sticky; top: 24px; }
}

/* ---- The phone-shaped card: the photo fills it, the store icons top right, a navy fade at the bottom with the name,
   a line, two lines, and the sign-in pills (each opens the web app). */
.page-home .hm-card {
  position: relative; isolation: isolate; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden;
  background: var(--navy-2); border: 1px solid rgb(255 255 255 / 0.12); box-shadow: 0 18px 44px rgb(0 0 0 / 0.45);
}
@media (min-width: 900px) { .page-home .hm-card { max-width: 380px; } }
.page-home .hm-card > img, .page-home .hm-card > picture, .page-home .hm-card > .hm-ph { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.page-home .hm-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.page-home .hm-stores-card { position: absolute; top: 14px; right: 14px; z-index: 2; }
.page-home .hm-card-over {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 18px 18px;
  background: linear-gradient(180deg, rgb(11 28 63 / 0) 36%, rgb(11 28 63 / 0.72) 52%, rgb(11 28 63 / 0.93) 66%, rgb(11 28 63 / 0.97) 100%);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
}
.page-home .hm-card-h { font-size: 22px; line-height: 1.2; font-weight: 900; font-stretch: 112%; letter-spacing: -0.01em; }
.page-home .hm-card-sub { margin-top: 2px; font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--on-dark-soft); }
.page-home .hm-card-desc { margin-top: 6px; font-size: 14px; line-height: 1.45; color: rgb(255 255 255 / 0.84); }
.page-home .hm-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.page-home .hm-pill {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 6px 10px; border-radius: 12px;
  background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.26); color: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.page-home .hm-pill svg { display: block; flex: none; width: 17px; height: 17px; }
.page-home .hm-pill:hover { background: rgb(255 255 255 / 0.18); }
.page-home .hm-pill:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.page-home .hm-pill-guest { grid-column: 1 / -1; }

/* ---- The words. */
.page-home .hm-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); }
.page-home .hm-h1 { margin-top: 8px; font-size: 31px; line-height: 1.14; font-weight: 900; font-stretch: 106%; letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: break-word; }
/* A small loop of the red string before the headline (owner 2026-10-14: the 💞 was "too babyish"). */
.page-home .hm-knot { display: inline-block; width: 1.3em; height: 0.85em; margin-right: 0.15em; vertical-align: -0.04em; overflow: visible; }
.page-home .hm-knot path { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.page-home .hm-km { margin-top: 12px; font-size: 17px; line-height: 1.7; font-weight: 600; color: var(--on-dark-soft); }
.page-home .hm-km span { display: block; font-size: 14.5px; font-weight: 400; color: var(--on-dark-muted); }
.page-home .hm-lead { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--on-dark-soft); }
.page-home .hm-cta { margin-top: 22px; }
.page-home .hm-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 28px;
  border-radius: 14px; background: #fff; color: var(--navy); text-decoration: none; text-align: center;
  font-size: 21px; font-weight: 800; font-stretch: 108%; box-shadow: 0 14px 34px rgb(0 0 0 / 0.3);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.page-home .hm-btn:hover { background: var(--desk); transform: translateY(-1px); }
.page-home .hm-btn:active { transform: none; }
.page-home .hm-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (min-width: 900px) {
  .page-home .hm-h1 { font-size: 46px; line-height: 1.07; }
  .page-home .hm-km { font-size: 19px; }
  .page-home .hm-lead { font-size: 18px; }
  .page-home .hm-btn { display: inline-flex; width: auto; min-width: 300px; }
}

/* The ⚠️ Reminder (the template's amber box, here navy-2 with a soft white edge) and how it works (a quieter box:
   the three stops on a thin red thread, told in words). */
.page-home .hm-remind, .page-home .hm-how { margin-top: 24px; padding: 16px 18px; border-radius: 14px; }
.page-home .hm-remind { background: var(--navy-2); border: 1px solid rgb(255 255 255 / 0.18); }
.page-home .hm-how { margin-top: 14px; background: rgb(255 255 255 / 0.04); border: 1px solid var(--hm-rule); }
.page-home .hm-remind-h, .page-home .hm-how-h { font-size: 15px; line-height: 1.4; font-weight: 800; color: #fff; }
.page-home .hm-remind-text { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--on-dark-soft); }
.page-home .hm-remind-km { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--on-dark-muted); }
.page-home .hm-path { position: relative; display: grid; gap: 12px; margin-top: 12px; }
.page-home .hm-path::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 12px; width: 1.5px; background: var(--red); }
.page-home .hm-path li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.5; color: var(--on-dark-soft); }
.page-home .hm-path li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 3px var(--navy);
}
.page-home .hm-path b { display: block; font-size: 16px; font-weight: 800; color: #fff; }
.page-home .hm-how-fine { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hm-rule); font-size: 14px; line-height: 1.5; color: var(--on-dark-muted); }

/* Support & Contact (the template's), the hashtags. */
.page-home .hm-contact { display: flex; flex-direction: column; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--hm-rule); }
.page-home .hm-contact-h { font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); }
.page-home .hm-contact a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 600; text-decoration: none; color: #fff; }
.page-home .hm-contact a:hover { text-decoration: underline; }
.page-home .hm-tags { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--on-dark-muted); overflow-wrap: anywhere; }

/* ---- "30+ lives" (owner 2026-10-14 "need more photos"): 10 people at work, the red thread through each. Phones: one
   row that swipes sideways (inside the row, never the page); PC: two rows of five. */
.page-home .hm-lives { padding: 8px 0 60px; background: var(--navy-2); }
.page-home .hm-lives-h { max-width: 22em; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--on-dark-soft); text-wrap: balance; }
.page-home .hm-lives-row { display: grid; grid-auto-flow: column; grid-auto-columns: 36%; gap: 10px; margin: 22px 0 0; padding: 0 0 8px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.page-home .hm-lives-row::-webkit-scrollbar { display: none; }
.page-home .hm-lives-row li { scroll-snap-align: start; aspect-ratio: 220 / 394; border-radius: 12px; overflow: hidden; background: var(--navy); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1); }
.page-home .hm-lives-row img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .page-home .hm-lives { padding: 0 0 88px; }
  .page-home .hm-lives-h { font-size: 22px; }
  .page-home .hm-lives-row { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; gap: 18px; max-width: 900px; margin: 30px auto 0; overflow: visible; }
  .page-home .hm-lives-row li { border-radius: 14px; }
}

/* ---- The teaser's strip: people-2 → 3 → 4 side by side, in order, on ONE taut red thread that runs across the page
   behind them (each frame's box carries the same straight line at the same height, so it never breaks into loose
   pieces; the photos' own red threads do the rest). */
.page-home .hm-story { overflow: hidden; padding: 52px 0 60px; border-top: 1px solid var(--hm-rule); background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); }
.page-home .hm-string { max-width: 19em; margin: 0 auto; text-align: center; font-size: 22px; line-height: 1.3; font-weight: 800; font-stretch: 104%; text-wrap: balance; }
.page-home .hm-seq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 760px; margin: 26px auto 0; }
.page-home .hm-fr-box { position: relative; }
.page-home .hm-fr-box::before { content: ""; position: absolute; top: 50%; left: -10px; right: -10px; height: 1.5px; margin-top: -0.75px; background: var(--red); }
.page-home .hm-fr:first-child .hm-fr-box::before { left: -100vw; }
.page-home .hm-fr:last-child .hm-fr-box::before { right: -100vw; }
.page-home .hm-fr-ph { position: relative; aspect-ratio: 768 / 1376; border-radius: 12px; overflow: hidden; background: var(--navy-2); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1); }
.page-home .hm-fr-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-home .hm-fr figcaption { margin-top: 10px; font-size: 14px; line-height: 1.35; font-weight: 600; text-align: center; color: var(--on-dark-soft); text-wrap: balance; }
/* Phones: a frame is only ~90–110 px wide, narrower than a Chinese / Japanese phrase at 14 px (すれ違わないで。), which
   would then break inside the word and leave 。 alone. A little smaller, using half the grid gap, every phrase fits. */
@media (max-width: 399px) {
  .page-home:lang(zh) .hm-fr figcaption, .page-home:lang(ja) .hm-fr figcaption { margin-inline: -5px; font-size: 12px; line-height: 1.4; }
}
@media (min-width: 900px) {
  .page-home .hm-story { padding: 80px 0 88px; }
  .page-home .hm-string { font-size: 32px; }
  .page-home .hm-seq { gap: 28px; margin-top: 40px; }
  .page-home .hm-fr-box::before { left: -28px; right: -28px; }
  .page-home .hm-fr-ph { border-radius: 16px; }
  .page-home .hm-fr figcaption { margin-top: 14px; font-size: 17px; }
}

/* ---- A slot with no photo yet: a night-city placeholder (navy sky, soft bokeh lights, a low skyline). */
.page-home .hm-ph {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  background:
    radial-gradient(130% 55% at 50% 100%, rgb(216 222 240 / 0.2), rgb(216 222 240 / 0) 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 72%, var(--navy-2) 100%);
}
.page-home .hm-ph::before {
  content: ""; position: absolute; inset: -6%; filter: blur(2.5px);
  background:
    radial-gradient(circle at 12% 66%, rgb(255 255 255 / 0.26) 0 3.4%, rgb(255 255 255 / 0) 4%),
    radial-gradient(circle at 27% 78%, rgb(216 222 240 / 0.2) 0 5.5%, rgb(216 222 240 / 0) 6.2%),
    radial-gradient(circle at 43% 62%, rgb(255 255 255 / 0.16) 0 2.4%, rgb(255 255 255 / 0) 3%),
    radial-gradient(circle at 58% 82%, rgb(170 180 207 / 0.22) 0 7%, rgb(170 180 207 / 0) 7.8%),
    radial-gradient(circle at 71% 58%, rgb(255 255 255 / 0.2) 0 3%, rgb(255 255 255 / 0) 3.6%),
    radial-gradient(circle at 86% 74%, rgb(216 222 240 / 0.24) 0 4.6%, rgb(216 222 240 / 0) 5.3%),
    radial-gradient(circle at 35% 40%, rgb(255 255 255 / 0.08) 0 1.6%, rgb(255 255 255 / 0) 2.2%),
    radial-gradient(circle at 64% 30%, rgb(216 222 240 / 0.1) 0 2.2%, rgb(216 222 240 / 0) 2.8%);
}
.page-home .hm-ph::after {
  content: ""; position: absolute; left: -4%; right: -4%; bottom: 0; height: 34%; filter: blur(0.6px);
  background:
    radial-gradient(circle at 6% 70%, rgb(255 255 255 / 0.55) 0 1.1%, rgb(255 255 255 / 0) 1.6%),
    radial-gradient(circle at 23% 80%, rgb(255 255 255 / 0.4) 0 1.3%, rgb(255 255 255 / 0) 1.9%),
    radial-gradient(circle at 39% 74%, rgb(170 180 207 / 0.5) 0 1%, rgb(170 180 207 / 0) 1.5%),
    radial-gradient(circle at 54% 84%, rgb(255 255 255 / 0.45) 0 1.2%, rgb(255 255 255 / 0) 1.8%),
    radial-gradient(circle at 70% 76%, rgb(255 255 255 / 0.4) 0 0.8%, rgb(255 255 255 / 0) 1.3%),
    radial-gradient(circle at 86% 82%, rgb(170 180 207 / 0.5) 0 1.3%, rgb(170 180 207 / 0) 1.9%),
    linear-gradient(180deg, rgb(216 222 240 / 0) 0%, rgb(216 222 240 / 0.1) 70%, rgb(216 222 240 / 0.04) 100%);
}
.page-home .hm-ph-people-2::before, .page-home .hm-ph-people-4::before { transform: scaleX(-1); }

/* ---- Footer (the template's small line), who runs it, the small pages. */
.page-home .hm-foot { padding: 26px 0 calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hm-rule); text-align: center; font-size: 14px; color: var(--on-dark-muted); }
.page-home .hm-foot-brand { font-size: 12.5px; letter-spacing: 0.02em; }
.page-home .hm-foot-run { margin-top: 4px; }
.page-home .hm-foot-run b { color: #fff; font-weight: 800; }
.page-home .hm-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; margin-top: 4px; }
.page-home .hm-foot-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; color: #fff; font-weight: 600; }

/* ---- Khmer: more line height, a little less size, no capitals or tracking (they break its shapes). CJK: no tracking. */
.page-home:lang(km) { line-height: 1.7; }
.page-home:lang(km) .hm-h1 { font-size: 26px; line-height: 1.5; }
.page-home:lang(km) .hm-card-h { line-height: 1.3; }
.page-home:lang(km) .hm-card-desc, .page-home:lang(km) .hm-card-sub { line-height: 1.6; }
.page-home:lang(km) .hm-pill { font-size: 14px; }
.page-home:lang(km) .hm-btn { font-size: 19px; }
.page-home:lang(km) .hm-string { font-size: 20px; line-height: 1.6; }
.page-home:lang(km) .hm-fr figcaption { font-size: 13px; line-height: 1.6; }
.page-home:lang(km) .hm-path li, .page-home:lang(km) .hm-remind-text { line-height: 1.7; }
.page-home:lang(km) .hm-eyebrow, .page-home:lang(km) .hm-contact-h,
.page-home:lang(zh) .hm-eyebrow, .page-home:lang(zh) .hm-contact-h,
.page-home:lang(ko) .hm-eyebrow, .page-home:lang(ko) .hm-contact-h,
.page-home:lang(ja) .hm-eyebrow, .page-home:lang(ja) .hm-contact-h { letter-spacing: 0.02em; text-transform: none; font-size: 14px; }
@media (min-width: 900px) {
  .page-home:lang(km) .hm-h1 { font-size: 38px; line-height: 1.45; }
  .page-home:lang(km) .hm-string { font-size: 28px; }
  .page-home:lang(km) .hm-fr figcaption { font-size: 15px; }
  .page-home:lang(zh) .hm-h1, .page-home:lang(ja) .hm-h1 { font-size: 42px; line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hm-btn { transition: none; }
}