/* =================================================================
   home-v2.css  —  home page (/) only. The "v2" naming is historical.
   Loaded AFTER style.css, and ONLY by the home page.

   ISOLATION RULE: every selector in this file must start with
   [data-page="home-v2"]. The archived /v1/ page is data-page="home", so
   nothing written here can reach it. Never edit style.css to restyle the
   home page.

   KEEP THIS FILE SMALL. Layout and type come from style.css's existing
   classes (.hero for the hero, the .sym family for sections, .diagram-wrap
   /.diagram for artwork) so proportions always match the live pages.
   Only things style.css has no equivalent for live here:
     - full-viewport-height sections + per-section palette
     - the title/tag row, body copy, links row
     - the giant-letter placeholder (until the letterform SVGs arrive)
     - the topbar activities nav
   ================================================================= */

/* ---- Safari oblique fix ----
   style.css declares Acumin's @font-face with "font-style: oblique
   0deg 12deg" (its variable slnt axis). WebKit has a long-standing bug
   where that range makes NORMAL text render slanted. Re-declare the
   face here (this file loads after style.css, and only on the home
   page) as a plain normal-style face — normal text then matches this
   face exactly and Safari never engages the slnt mapping. Nothing uses
   italics, so forcing slnt to 0 below is safe belt-and-braces. */
@font-face {
  font-family: "Acumin Variable Concept";
  src: url("../assets/fonts/acumin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 115%;
  font-style: normal;
  font-display: swap;
}
body[data-page="home-v2"] { font-variation-settings: "slnt" 0; }

/* ---- 傳/承 in Noto Sans TC (regular) ----
   The shared noto-cjk-tc-black subset doesn't carry 傳 (U+50B3) or
   承 (U+627F) — see assets/fonts/_subset-chars.txt — so they fell
   through to the system font. This 1.2KB two-glyph subset (Noto Sans TC
   Regular — the client wants the heiti design at body weight, not bold)
   slots into the SAME family via unicode-range; for these two
   codepoints its 400 weight also out-matches the 900 black face against
   the 300 body text. v2-only because only this file loads it. */
@font-face {
  font-family: "Noto Sans CJK TC";
  src: url("../assets/fonts/noto-tc-regular.legacy-chars.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+50B3, U+627F;
}

/* ---- activities nav (topbar, v2 only) ---- */
/* comp proportions: label→menu gap 80px, column gap 40px, ~27px line
   pitch (18px x 1.5, no extra item margins) */
[data-page="home-v2"] .v2-nav-label {
  margin: 1px var(--s-80) 0 auto;
  font-size: 16px;
  white-space: nowrap;
}
[data-page="home-v2"] .v2-nav { margin: 0 var(--s-32) 0 0; padding-right: var(--s-32); }
[data-page="home-v2"] .v2-nav__list {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: var(--s-40);
  font-size: 16px;
  line-height: 1.4;
}
[data-page="home-v2"] .v2-nav__list li { break-inside: avoid; }
[data-page="home-v2"] .v2-nav a { opacity: 0.85; transition: opacity 0.2s var(--ease); }
[data-page="home-v2"] .v2-nav a:hover { opacity: 1; text-decoration: underline; }

/* ---- persistent header ----
   The client wants the header on EVERY section: the topbar sticks to the
   viewport top for the whole page, opaque so sections slide beneath it. */
/* registered so the logo backing colour can cross-fade between sections */
@property --v2-topbar-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #192346;
}

[data-page="home-v2"] .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  /* the WHOLE header band is backed in the current section's own bg
     colour (fed by home-v2.js) — invisible against the section, but it
     cleanly hides content scrolling up underneath. Its content takes the
     section's ink colour the same way. */
  background: var(--v2-topbar-bg);
  transition: color 0.4s var(--ease, ease), --v2-topbar-bg 0.4s var(--ease, ease);
  /* half of style.css's bottom padding (client, 2026-08-13); the burger's
     bottom offset below mirrors the halved value to stay aligned with
     the logo's W */
  padding-bottom: var(--s-16);
}
/* the animated NOW logo is an inline SVG with a baked fill — retarget it
   (and the masked seal below) to the inherited header colour */
[data-page="home-v2"] .logo-anim .cls-1 { fill: currentColor; }
[data-page="home-v2"] .brand-seal__logo--ink {
  display: block;
  aspect-ratio: 89.02 / 62.11;   /* home-right-logo.svg viewBox */
  background-color: currentColor;
  -webkit-mask: url("/assets/home-right-logo.svg") no-repeat center / contain;
  mask: url("/assets/home-right-logo.svg") no-repeat center / contain;
}

/* ---- mobile burger + menu overlay ----
   Hidden on desktop (the topbar activities nav serves there). The burger
   hangs just below the header, right-aligned like the comp; the overlay
   is a fixed navy sheet UNDER the sticky topbar (z 15 < 20) so the
   header chrome stays visible while it is open. */
[data-page="home-v2"] .v2-burger {
  display: none;
  position: absolute;
  /* visual bottom line sits flush with the logo's W (button padding 8px
     eats into the topbar's own bottom padding); the offset formula is
     (topbar bottom padding - 18px), so it tracks the halved padding */
  bottom: calc(var(--s-12) - 18px);
  right: var(--s-20);
  width: 48px;
  height: 36px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
/* two lines with explicit symmetric geometry (8px apart, centres 4px
   either side of y=17) so the open state folds into a TRUE centred X */
[data-page="home-v2"] .v2-burger::before,
[data-page="home-v2"] .v2-burger::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease, ease);
}
[data-page="home-v2"] .v2-burger::before { top: 13px; }
[data-page="home-v2"] .v2-burger::after { top: 21px; }
[data-page="home-v2"] .v2-burger[aria-expanded="true"]::before {
  transform: translateY(4px) rotate(45deg);
}
[data-page="home-v2"] .v2-burger[aria-expanded="true"]::after {
  transform: translateY(-4px) rotate(-45deg);
}

/* while the menu is open the topbar must NOT be sticky: locking scroll
   (html overflow:hidden) makes iOS Safari drop sticky positioning and
   the header (logo + X) vanishes off-screen. Fixed pins it for real. */
.v2-menu-open [data-page="home-v2"] .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

[data-page="home-v2"] .v2-mmenu {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  padding: calc(var(--v2-topbar, 120px) + var(--s-64)) var(--s-20) var(--s-32);
  /* follows the current section's palette like the desktop header does —
     home-v2.js paints the live values in on open; these are fallbacks */
  background: var(--v2-menu-bg, #192346);
  color: var(--v2-menu-ink, #a1782e);
  overflow-y: auto;
  /* slides in from the right; home-v2.js keeps [hidden] until the
     sheet has fully slid back out */
  transform: translateX(100%);
  transition: transform 0.45s var(--ease, ease);
}
[data-page="home-v2"] .v2-mmenu.is-open { transform: translateX(0); }
[data-page="home-v2"] .v2-mmenu[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-page="home-v2"] .v2-mmenu { transition: none; }
}
[data-page="home-v2"] .v2-mmenu__links { font-size: 26px; font-weight: 300; }
[data-page="home-v2"] .v2-mmenu__links li + li { margin-top: var(--s-20); }
[data-page="home-v2"] .v2-mmenu__links a { text-decoration: none; }
[data-page="home-v2"] .v2-mmenu__social {
  display: flex;
  gap: var(--s-16);
  margin-top: auto;
  padding-top: var(--s-48);
}
[data-page="home-v2"] .v2-mmenu__icon {
  display: block;
  width: 40px;
  height: 40px;
  background: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
[data-page="home-v2"] .v2-mmenu__legal {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-32);
  font-size: 22px;
  font-weight: 300;
}
[data-page="home-v2"] .v2-mmenu__copy { margin-top: var(--s-16); font-size: 16px; font-weight: 300; }

/* ---- full-height sections ----
   .sym (style.css) supplies the grid, gap, padding and responsive behavior;
   .v2s only adds the designer's screen-fit rule and the section palette.
   With the header permanently visible, one "screen" for a section is the
   viewport minus the topbar (measured into --v2-topbar by home-v2.js);
   scroll-margin keeps anchor jumps from landing underneath it. */
[data-page="home-v2"] .v2s {
  /* full screen again: each section scrolls TO the viewport top and the
     transparent header floats over the section's own padded top strip
     (so the strip always shows the current section's background) */
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--v2-topbar, 170px) + var(--s-24));
  align-items: start;
  background: var(--sec-bg, var(--bg));
  color: var(--sec-ink, var(--ink));
}
[data-page="home-v2"] .v2s .sym__info {
  padding: 0 0 var(--s-48);
  /* wider measure than style.css's 560px default, every section (client,
     2026-08-13, twice) — the desktop grid below tilts 1.2fr/1fr so the
     column can actually reach this */
  max-width: 720px;
}
[data-page="home-v2"] #tree-planting { display: none; }

/* hero: the live home's .hero fills the viewport via .stage flex; on this
   longer page it can't, so pin the same result explicitly (topbar height
   is measured into --v2-topbar by home-v2.js). */
[data-page="home-v2"] .hero {
  min-height: calc(100vh - var(--v2-topbar, 170px));
  min-height: calc(100dvh - var(--v2-topbar, 170px));
}

/* ---- title + tag row (comp-specific; no style.css equivalent) ---- */
[data-page="home-v2"] .v2s__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-24);
}
/* SVG title lockups (assets/title/*.svg) bake the title AND its tag into
   one 600-wide artwork — span the full info column so the internal
   title:tag proportions match the comps (style.css caps at 504px). */
[data-page="home-v2"] .v2s .sym__title { flex: 1; width: 100%; }
[data-page="home-v2"] .v2s .sym__title-img { width: 100%; }
[data-page="home-v2"] .v2s__tag {
  min-width: 154px;
  /* optical: lines the 16px cap top up with the 64px title's cap top
     (title line-height is 0.96, so its caps sit almost at the box top;
     measured 4px difference at padding 2px → -2px) */
  margin-top: -2px;
  font-size: 16px;
  line-height: 1.2;
}

/* ---- body copy — style.css has no body-paragraph style; sizes borrow
   from its scale (18px = .sym__label, weight 300 = .sym__value) ---- */
[data-page="home-v2"] .v2s__body {
  margin-top: var(--s-32);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
}
[data-page="home-v2"] .v2s .sym__meta { margin-top: var(--s-32); }
[data-page="home-v2"] .v2s .sym__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--s-12);
  margin-top: var(--s-24);
}
[data-page="home-v2"] .v2s .sym__value {
  margin-top: 0;
  font-size: 26px;
  line-height: 1.2;
}
/* honorifics inside a 26px value line (e.g. "GBS, IDSM, JP") */
[data-page="home-v2"] .v2s .sym__value small {
  font-size: 16px;
  font-weight: 400;
}
[data-page="home-v2"] .v2s__people { margin-top: var(--s-48); }
[data-page="home-v2"] .v2s__people-group + .v2s__people-group { margin-top: var(--s-48); }
/* group/person type — shared by every section that lists people or
   labelled tables (Symposium, Photography, …) */
[data-page="home-v2"] .v2s .v2s__people-group > .sym__label {
  font-size: 16px;
  font-weight: 400;
  opacity: 1;
  line-height: 1.2;
}
[data-page="home-v2"] .v2s .v2s__people-group > .sym__meta { margin-top: var(--s-8); }
[data-page="home-v2"] .v2s .v2s__people-group > .v2s__person { margin-top: var(--s-8); }
[data-page="home-v2"] .v2s .v2s__people-group > .sym__value { margin-top: var(--s-8); }
[data-page="home-v2"] .v2s .v2s__person + .v2s__person { margin-top: var(--s-16); }
[data-page="home-v2"] .v2s__person strong,
[data-page="home-v2"] .v2s__person span { display: block; }
[data-page="home-v2"] .v2s .v2s__person strong {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
[data-page="home-v2"] .v2s .v2s__person strong small {
  font-size: 16px;
  font-weight: 400;
}
/* honorifics ("GBM, SBS, PDSM, PMSM") slant via Acumin's real slnt axis
   (client, 2026-08-14). Deliberately NOT font-style:italic — the v2 face
   is declared normal-only (Safari fix above), so italic would synthesise
   a fake skew instead of using the variable axis. */
[data-page="home-v2"] .v2s .v2s__person strong small,
[data-page="home-v2"] .v2s .sym__value small {
  font-variation-settings: "slnt" 12;
}
/* …but NOTHING in Guided Tours slants (client, 2026-08-14): its <small>s
   are times, fee notes and remarks, not honorifics */
[data-page="home-v2"] #guided-tours,
[data-page="home-v2"] #guided-tours * {
  font-variation-settings: "slnt" 0;
}
/* the small support lines (time / fee note / remarks) hug the big line
   they belong to (client, 2026-08-14): block-level so they escape the
   26px value line box, pulled up against their parent line */
[data-page="home-v2"] #guided-tours .sym__value small {
  display: block;
  margin-top: -3px;
  line-height: 1.2;
}
[data-page="home-v2"] .v2s .v2s__person span {
  /* name→role reads as a ~6px gap (client halved it twice, 2026-08-13):
     the line boxes alone contribute ~9px of leading, so the margin has
     to claw some of it back */
  margin-top: -2px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}
[data-page="home-v2"] .v2s__notice {
  margin-top: var(--s-56);
  font-size: 18px;
  line-height: 1.3;
}
/* linked text inside body/notice copy is always underlined (client) */
[data-page="home-v2"] .v2s__notice a,
[data-page="home-v2"] .v2s__body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-page="home-v2"] .v2s__notice a:hover,
[data-page="home-v2"] .v2s__body a:hover { opacity: 0.7; }

/* Section 2 spacing follows the approved full-page composition. */
/* wider than style.css's 560px default so the venue lines survive the
   26px value scale without ugly mid-word breaks (same as Guided Tours) */
[data-page="home-v2"] #symposium .v2s__body { margin-top: var(--s-48); }
[data-page="home-v2"] #symposium .sym__meta { margin-top: var(--s-64); }
[data-page="home-v2"] #symposium .sym__row {
  /* wide enough for "24 Nov 26 (Tue)" nowrap at the 26px value scale */
  grid-template-columns: 228px minmax(0, 1fr);
  /* --s-28 doesn't exist in style.css's token scale — it silently
     resolved to 0 and glued the two date rows together. */
  margin-top: var(--s-12);
}
[data-page="home-v2"] #symposium .sym__row .sym__label { white-space: nowrap; }
/* keeps hyphenated names ("Pre-function Area") off the hyphen break */
[data-page="home-v2"] .nowrap { white-space: nowrap; }
[data-page="home-v2"] #symposium .v2s__people { margin-top: var(--s-40); }

/* Section 3 (Photography) — comp: title + tag in white; Division/Category
   rows need a wider label column so "Member Division" holds one line. */
[data-page="home-v2"] .v2s--photography .sym__title,
[data-page="home-v2"] .v2s--photography .v2s__tag { color: #ffffff; }
[data-page="home-v2"] #photography .sym__row { grid-template-columns: 208px minmax(0, 1fr); }
/* jury honorifics ("CStJ, JP" / "BBS") italic — client comp, 2026-08-13 */
[data-page="home-v2"] #photography .v2s__person strong small { font-style: italic; }
[data-page="home-v2"] #photography .v2s__people { margin-top: var(--s-56); }
[data-page="home-v2"] #photography .v2s__people-group + .v2s__people-group { margin-top: var(--s-56); }

/* Section 5 (Publication) — comp: white title/tag, body keeps section ink */
[data-page="home-v2"] .v2s--publication .sym__title,
[data-page="home-v2"] .v2s--publication .v2s__tag { color: #ffffff; }

/* Section 7 (Annual Dinner) — three stacked meta groups; slightly
   tighter than the default 48px so the section fits one screen. */
[data-page="home-v2"] #annual-dinner .v2s__people { margin-top: var(--s-40); }
[data-page="home-v2"] #annual-dinner .v2s__people-group + .v2s__people-group { margin-top: var(--s-32); }

/* Section 11 (Young Architect Award) — comp breaks the title as
   "YOUNG ARCHITECT / AWARD". At 64px that first line is ~550px, so widen
   the info column, drop the tag's reserved width and the tracking. */
[data-page="home-v2"] #yaa .sym__title { white-space: nowrap; letter-spacing: 0; }
[data-page="home-v2"] .v2s--yaa .v2s__tag { min-width: 0; }

/* Section 4 (Guided Tours) — comp: white title/tag; bold body-size group
   heading; each tour row is a bold tour number over a one-line date. */
[data-page="home-v2"] .v2s--tours .sym__title,
[data-page="home-v2"] .v2s--tours .v2s__tag { color: #ffffff; }
/* one-word tag: don't reserve the 154px tag column, so "GUIDED TOURS"
   holds a single line like the comp */
[data-page="home-v2"] .v2s--tours .v2s__tag { min-width: 0; }
[data-page="home-v2"] .v2s__group-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}
/* comp: descriptions start 240px in from the label column, and need
   ~400px to wrap like the comp — together that outgrows .sym__info's
   560px cap, so relax it (the 50% grid column box is ~648px). */
[data-page="home-v2"] #guided-tours .sym__row {
  grid-template-columns: 228px minmax(0, 1fr);
  margin-top: var(--s-32);
}
[data-page="home-v2"] #guided-tours .sym__row .sym__value strong { font-weight: 600; }
[data-page="home-v2"] #symposium .v2s__people-group + .v2s__people-group { margin-top: var(--s-48); }
[data-page="home-v2"] #symposium .v2s__person { margin-top: var(--s-8); }
[data-page="home-v2"] #symposium .v2s__person + .v2s__person { margin-top: var(--s-16); }
[data-page="home-v2"] #symposium .v2s__person span { margin-top: -2px; }

/* ---- symposium date/venue — dates left, venues right in ONE uniform
   type size (client image, 2026-08-12), and that size follows the other
   sections' 26px .sym__value scale (client, 2026-08-13 — the earlier
   18px read as undersized next to Photography/Tours). ---- */
[data-page="home-v2"] #symposium .sym__row {
  column-gap: var(--s-32);
  align-items: start;
}
[data-page="home-v2"] #symposium .sym__row .sym__label,
[data-page="home-v2"] #symposium .sym__row .sym__value {
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
  opacity: 1;
}

/* ---- links row — 16px like .sitefoot__links ---- */
[data-page="home-v2"] .v2s__links { margin-top: var(--s-32); font-size: 16px; }
/* TEMP (client, 2026-08-13): rows whose destinations don't exist yet
   stay hidden (still pending: More / Buy Tickets). Delete this one line
   to bring them all back. */
[data-page="home-v2"] .v2s__links { display: none; }
/* …except the ones with live URLs (client, 2026-08-14): Guided Tours
   Register + Photography Submit (Google Forms), and the Detail buttons
   on Annual Awards / CADA / YAA (hkia.net event pages) */
[data-page="home-v2"] #guided-tours .v2s__links,
[data-page="home-v2"] #photography .v2s__links,
[data-page="home-v2"] #annual-awards .v2s__links,
[data-page="home-v2"] #cada .v2s__links,
[data-page="home-v2"] #yaa .v2s__links { display: block; }
[data-page="home-v2"] #guided-tours .v2s__links a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}
[data-page="home-v2"] .v2s__links a { text-decoration: underline; text-underline-offset: 3px; }
[data-page="home-v2"] .v2s__links a:hover { opacity: 0.7; }
[data-page="home-v2"] .v2s__links .sep { margin: 0 var(--s-12); opacity: 0.5; }

/* ---- supplied section symbols ---- */
[data-page="home-v2"] .v2-symbol {
  position: relative;
  width: 100%;
  line-height: 0;
}
[data-page="home-v2"] .v2-symbol__detail {
  position: absolute;
  inset: 0;
}
/* the hero base img only sizes the box — it must never paint, or it
   flashes before the JS intro hides it (the detail layer covers the
   no-JS / reduced-motion fallback) */
[data-page="home-v2"] .v2-symbol--hero .v2-symbol__base {
  opacity: 0;
}
[data-page="home-v2"] .v2-symbol__drawing {
  position: absolute;
  inset: 0;
  display: block;
}
[data-page="home-v2"] .v2-symbol__drawing svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* section variant: the DETAIL img sits in-flow and sizes the box (the
   hero uses a separate base img for that); the drawing overlays it */
[data-page="home-v2"] .v2-symbol--sec .v2-symbol__detail {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

/* ---- giant letter — placeholder until the letterform SVGs arrive ---- */
[data-page="home-v2"] .v2s__letter {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: min(72vh, 34vw);
  line-height: 0.8;
  color: var(--sec-art, var(--sec-ink));
  user-select: none;
}
[data-page="home-v2"] .v2s__letter--outline {
  color: transparent;
  -webkit-text-stroke: 3px var(--sec-art, var(--sec-ink));
}

/* =================================================================
   Section palettes  (client-confirmed hex values, 2026-08)
   Letters and outline letters take --sec-ink too (--sec-art fallback).
   ================================================================= */

/* section 1 — hero. Set both colours explicitly here so the v2 palette
   stays independent from any future changes to the shared theme. The wordmark
   and programme diagram are <img> SVGs with baked-in gold — they need
   re-exported assets to change. */
[data-page="home-v2"] { --bg: #192346; --ink: #a1782e; }

[data-page="home-v2"] .v2s--symposium   { --sec-bg: #cbeeed; --sec-ink: #194245; }  /* 2 */
[data-page="home-v2"] .v2s--photography { --sec-bg: #737db9; --sec-ink: #192346; }  /* 3 */
[data-page="home-v2"] .v2s--tours       { --sec-bg: #c25c65; --sec-ink: #192346; }  /* 4 */
[data-page="home-v2"] .v2s--publication { --sec-bg: #5facb4; --sec-ink: #192346; }  /* 5 */
[data-page="home-v2"] .v2s--tree        { --sec-bg: #80a96a; --sec-ink: #192346; }  /* 6 */
[data-page="home-v2"] .v2s--dinner      { --sec-bg: #c6c7c9; --sec-ink: #221f20; }  /* 7 */
[data-page="home-v2"] .v2s--gold        { --sec-bg: #282424; --sec-ink: #afa34e; }  /* 8 */
[data-page="home-v2"] .v2s--awards      { --sec-bg: #221f20; --sec-ink: #c6c7c9; }  /* 9 */
[data-page="home-v2"] .v2s--cada        { --sec-bg: #e27839; --sec-ink: #000000; }  /* 10 */
[data-page="home-v2"] .v2s--yaa         { --sec-bg: #afa34e; --sec-ink: #282424; }  /* 11 */

/* =================================================================
   PPT-style cover transition (desktop only)

   Sections stay in normal document flow so long left-column content must
   be read/scrolled before the following section arrives. On desktop only,
   the artwork sticks within its own section while that text scrolls.
   ================================================================= */
@media (min-width: 1025px) {
  /* tilt the 50/50 split toward the text so the 720px measure fits
     (at 1440 the equal split caps the info column at ~648px) */
  [data-page="home-v2"] .v2s {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  [data-page="home-v2"] .v2s > .sym__info {
    padding-top: var(--diagram-top-offset, 0px);
  }

  [data-page="home-v2"] .v2s > .diagram-wrap {
    position: sticky;
    /* stick below the persistent header, not the viewport top */
    top: calc(var(--v2-topbar, 170px) + var(--s-24));
    align-items: center;
    min-height: calc(100vh - var(--v2-topbar, 170px) - (2 * var(--s-24)));
    min-height: calc(100dvh - var(--v2-topbar, 170px) - (2 * var(--s-24)));
  }
}

/* =================================================================
   RESPONSIVE — .sym's own 1024/640 rules handle section stacking;
   only v2-specific bits need media rules.
   ================================================================= */
@media (max-width: 1024px) {
  [data-page="home-v2"] .v2-nav,
  [data-page="home-v2"] .v2-nav-label { display: none; }
  /* half of style.css's 24px tablet bottom padding */
  [data-page="home-v2"] .topbar { padding-bottom: var(--s-12); }
  [data-page="home-v2"] .v2-burger { display: block; }
  [data-page="home-v2"] .v2s__letter { font-size: min(36vh, 52vw); }
  /* nowrap is a desktop fit trick — "YOUNG ARCHITECT" at 64px overflows
     narrow viewports (412px scroll width at 390px) */
  [data-page="home-v2"] #yaa .sym__title { white-space: normal; letter-spacing: 0.01em; }
}
@media (max-width: 640px) {
  /* half of style.css's 20px phone bottom padding; burger keeps the
     (bottom padding - 18px) alignment formula */
  [data-page="home-v2"] .topbar { padding-bottom: calc(var(--s-20) / 2); }
  [data-page="home-v2"] .v2-burger { bottom: calc(var(--s-20) / 2 - 18px); }
  [data-page="home-v2"] .v2s__head { flex-direction: column; gap: var(--s-8); }
  [data-page="home-v2"] .v2s__letter { font-size: min(30vh, 60vw); }
  [data-page="home-v2"] #symposium .v2s__person strong { white-space: normal; }
  /* the fixed label columns leave no room for values on a phone —
     stack each row (id selectors repeated to outweigh the per-section
     column rules above) */
  [data-page="home-v2"] .v2s .sym__row,
  [data-page="home-v2"] #symposium .sym__row,
  [data-page="home-v2"] #photography .sym__row,
  [data-page="home-v2"] #guided-tours .sym__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  /* tighter vertical rhythm on phones — the desktop 48-64px group gaps
     read as holes in a single narrow column (id selectors repeated to
     outweigh the per-section desktop spacing) */
  [data-page="home-v2"] .v2s__body,
  [data-page="home-v2"] #symposium .v2s__body { margin-top: var(--s-24); }
  [data-page="home-v2"] .v2s .sym__meta,
  [data-page="home-v2"] #symposium .sym__meta { margin-top: var(--s-32); }
  [data-page="home-v2"] .v2s .sym__row,
  [data-page="home-v2"] #symposium .sym__row,
  [data-page="home-v2"] #guided-tours .sym__row { margin-top: var(--s-20); }
  [data-page="home-v2"] .v2s__people,
  [data-page="home-v2"] #symposium .v2s__people,
  [data-page="home-v2"] #photography .v2s__people,
  [data-page="home-v2"] #annual-dinner .v2s__people { margin-top: var(--s-32); }
  [data-page="home-v2"] .v2s__people-group + .v2s__people-group,
  [data-page="home-v2"] #photography .v2s__people-group + .v2s__people-group,
  [data-page="home-v2"] #annual-dinner .v2s__people-group + .v2s__people-group { margin-top: var(--s-32); }
  [data-page="home-v2"] .v2s .v2s__person + .v2s__person,
  [data-page="home-v2"] #symposium .v2s__person + .v2s__person { margin-top: calc(var(--s-20) / 2); }
  [data-page="home-v2"] .v2s__notice { margin-top: var(--s-32); }

  /* content type steps down so the (scaled-down) SVG titles keep a clear
     hierarchy over the text (whole scale nudged -2px, 2026-08-13) */
  [data-page="home-v2"] .v2s__body,
  [data-page="home-v2"] #symposium .v2s__body { font-size: 20px; }
  [data-page="home-v2"] .v2s .sym__value { font-size: 20px; }
  [data-page="home-v2"] .v2s__group-title { font-size: 20px; }
  [data-page="home-v2"] .v2s .v2s__person strong { font-size: 18px; }
  [data-page="home-v2"] #symposium .v2s__person strong { font-size: 18px; }
  [data-page="home-v2"] .v2s .v2s__people-group > .sym__label { font-size: 12px; }
  [data-page="home-v2"] #symposium .v2s__people-group > .sym__label { font-size: 12px; }
  [data-page="home-v2"] .v2s .sym__value small,
  [data-page="home-v2"] .v2s .v2s__person strong small,
  [data-page="home-v2"] .v2s .v2s__person span,
  [data-page="home-v2"] #symposium .v2s__person span { font-size: 12px; }
  [data-page="home-v2"] #symposium .sym__row .sym__label,
  [data-page="home-v2"] #symposium .sym__row .sym__value { font-size: 20px; }
  [data-page="home-v2"] .v2s__notice { font-size: 14px; }
  [data-page="home-v2"] .v2s__links { font-size: 12px; }
}