/* =================================================================
   int-symposium.css — /international_symposium/ page only.
   Loaded AFTER style.css, and ONLY by the symposium page.

   ISOLATION RULE: every selector in this file must start with
   [data-page="int-symposium"]. Never edit style.css for this page.

   Structure mirrors the live home (css/home-v2.css): topbar band,
   section palettes, .v2s/.sym typography — but this page scrolls
   normally (no snap) and adds speaker cards + the speaker popup.

   PLACEHOLDER STAGE (2026-09-13): bios / job refs / FAQ / schedule
   times are placeholders until the client supplies content.
   ================================================================= */

/* ---- Safari oblique fix (same as home-v2.css) ---- */
@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="int-symposium"] { font-variation-settings: "slnt" 0; }

/* ---- page tokens ----
   Palette sampled from the client comp (new page_sy.pdf) + the duotone
   speaker photos; the base pair is the campaign teal/mint inverted. */
body[data-page="int-symposium"] {
  --sy-teal: #194245;      /* page ground */
  --sy-mint: #cbeeed;      /* ink on teal */
  /* UNUSED since 2026-09-14 — the client collapsed the per-band colours onto
     the two campaign tones. Kept as the record of the original comp palette. */
  --sy-blue: #6f93a8;      /* was: OPPORTUNITIES band */
  --sy-navy: #192346;
  --sy-cream: #e9e2d6;     /* was: WELLBEING band */
  --sy-dark: #221f20;
  --sy-green: #80a96a;     /* was: SCHEDULE band */
  --sy-pop-bg: #ecebe8;    /* popup sheet (client comp) */
  --sy-mint-lt: #d4e7e5;   /* was: KEYNOTE band (unused since 2026-09-14) */
  /* speaker-section accents (client, 2026-09-14) — ink + card fill per band */
  --sy-acc-keynote: #194245;
  --sy-acc-netzero: #22926b;
  --sy-acc-opp: #267095;
  --sy-acc-wellbeing: #da7650;
  /* style.css semantics — the curtain/footer read these */
  --bg: var(--sy-teal);
  --ink: var(--sy-mint);
  --line: rgba(203, 238, 237, 0.4);
  background: var(--sy-teal);
  color: var(--sy-mint);
}

/* ---- persistent header (same behavior as home) ---- */
@property --sy-topbar-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #194245;
}
[data-page="int-symposium"] .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--sy-topbar-bg, var(--sy-teal));
  transition: color 0.4s var(--ease, ease), --sy-topbar-bg 0.4s var(--ease, ease);
  padding-bottom: var(--s-16);
}
[data-page="int-symposium"] .logo-anim .cls-1 { fill: currentColor; }
[data-page="int-symposium"] .brand-seal__logo--ink {
  display: block;
  aspect-ratio: 89.02 / 62.11;
  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;
}

/* page menu (this page's own header nav — anchors within the page) */
/* One right-hand cluster (client, 2026-09-15):
   < BACK TO HOME —40px— | —40px— INTERNATIONAL > SYMPOSIUM —20px— menu.
   The back link's auto left margin pushes the whole cluster toward the
   menu; the divider is the label's own left border so it can never
   drift from the text. */
[data-page="int-symposium"] .sy-back {
  white-space: nowrap;   /* "< BACK TO HOME" must never wrap mid-label */
  margin-left: auto;
  /* 64, not 40: the page label and its divider used to stand between the
     back link and the menu. With those gone (client, 2026-09-15) this
     margin is the whole gap, so it carries the separation on its own. */
  margin-right: var(--s-64);
  font-size: 16px;
  line-height: 1.35;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease);
}
[data-page="int-symposium"] .sy-back:hover { opacity: 1; text-decoration: underline; }
/* the back link is a different KIND of item from the section jumps below
   it, so it sits apart: 48px clear (this margin collapses with the
   next li's 20px --s-20 top margin, so 48 is the gap you see) */
[data-page="int-symposium"] .v2-mmenu__back { margin-bottom: var(--s-48); }

/* highlighted "Register" chip (comp; the comp called it "Buy Tickets",
   renamed by the user 2026-09-16): inverted against the header —
   the li paints itself in the header's ink (currentColor), the label
   takes the bg colour the header currently wears */
[data-page="int-symposium"] .v2-nav__buy {
  /* last item of the right-hand list — it is the third <li> there, so it
     needs no grid pinning any more (client, 2026-09-14: it must never drift
     to the left column). width keeps the filled box around the label rather
     than stretched across the column. */
  width: max-content;
  /* The chip's BOX lines up with the column, not its label (user,
     2026-09-15: "the button still a bit not align with other tabs" — with
     the box pulled out by its own padding it read as sticking out to the
     left, because a filled rectangle's edge is what the eye aligns to, not
     the ink inside it).
     NO gap above it (client, 2026-09-16 — "adjust the padding between FAQ
     and Register so it will look like not dropping"): with the box down to
     2px padding, margin 0 is what puts the label back ON the menu's own
     line rhythm. Measured at 1440: the column's baselines step 22-23px
     (Schedule 46, Guided Tour 68, FAQ 91) and Register's lands at 114 —
     23px on, exactly one line. Any gap here pushes it off that ruler and
     it reads as having dropped away from the list. */
  margin: 0;
  background: currentColor;
  /* the same box on both pages, and the same gap on all four sides
     (user, 2026-09-15: "align the padding of 4 sides"). line-height 1
     makes the label's own box its em square, so one padding value really
     does read as even top, right, bottom and left. */
  line-height: 1;
  /* 2px (client, 2026-09-16 — "maybe try 2px"; 8px, then 6px, still read
     as the button having dropped off its line). The box now barely clears
     the word, which is what lets it sit on the menu's line rhythm above. */
  padding: 2px;
  /* "bling bling" (client, 2026-09-14): a glossy highlight travels across
     the chip on a loop. position+overflow contain the sweep; isolation
     keeps the blend from reaching the header behind it. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* the travelling gloss. A bright band, angled, parked off the left edge and
   swept past the right. It rides ABOVE the chip's currentColor fill but
   BELOW the label (which gets z-index 1 below), so the text stays crisp
   teal while the light passes under it.

   Strength note (client, 2026-09-14 — "not strong enough, I can't see it"):
   the chip is mint (#cbeeed, ~93% bright), so a white highlight has almost
   no headroom to brighten INTO. What makes the sweep readable is the pair
   of translucent TEAL shoulders flanking the white core: the band dims the
   chip just ahead of and behind the light, so the eye sees a moving
   contrast edge rather than a faint wash. */
[data-page="int-symposium"] .v2-nav__buy::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: 0;
  width: 85%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(25, 66, 69, 0) 0%,
    rgba(25, 66, 69, 0.16) 28%,
    rgba(255, 255, 255, 0.95) 46%,
    rgba(255, 255, 255, 1) 54%,
    rgba(25, 66, 69, 0.16) 72%,
    rgba(25, 66, 69, 0) 100%
  );
  transform: translateX(-140%) skewX(-18deg);
  /* LINEAR on purpose: the page's --ease is a quint ease-out, which fires
     the gloss across in ~150ms and reads as a flicker. Light travelling at
     a constant speed is what looks like a reflection. */
  animation: sy-bling 2.6s linear infinite;
}
/* the crossing takes ~45% of the loop (~1.2s) so the eye can follow it,
   then the chip rests for the remainder. A continuous slide would read as
   a nervous shimmer rather than an occasional catch of light. */
@keyframes sy-bling {
  0%   { transform: translateX(-140%) skewX(-18deg); }
  45%  { transform: translateX(260%)  skewX(-18deg); }
  100% { transform: translateX(260%)  skewX(-18deg); }
}
[data-page="int-symposium"] .v2-nav__buy a {
  /* Optical centring. The padding IS even on all four sides, but the ink is
     not centred in the em box: at 16px the cap top sits flush with the box
     top while the baseline stops 5px short of the bottom, so a
     mathematically even chip reads 2px top-heavy. Nudge the ink, not the
     box (user, 2026-09-15: "the padding still looks un even"). */
  display: inline-block;   /* transform is ignored on an inline box */
  transform: translateY(2px);
  color: var(--sy-topbar-bg, var(--sy-teal));
  font-weight: 500;
  opacity: 1;
  cursor: pointer;
  position: relative;
  z-index: 1;            /* keep the label above the travelling gloss */
}
[data-page="int-symposium"] .v2-mmenu .v2-nav__buy { margin-top: var(--s-20); }
[data-page="int-symposium"] .v2-mmenu .v2-nav__buy a { color: var(--v2-menu-bg, var(--sy-teal)); }
/* two columns, each its own list (client, 2026-09-15: "Wellbeing under
   Opportunities") — see the markup comment for why they are not one grid */
[data-page="int-symposium"] .v2-nav {
  margin: 0 var(--s-32) 0 0;
  padding-right: var(--s-32);
  display: flex;
  align-items: flex-start;
  gap: var(--s-40);
}
[data-page="int-symposium"] .v2-nav__list { font-size: 16px; line-height: 1.4; }
[data-page="int-symposium"] .v2-nav a { opacity: 0.85; transition: opacity 0.2s var(--ease); }
[data-page="int-symposium"] .v2-nav a:hover { opacity: 1; text-decoration: underline; }

/* ---- mobile burger + menu overlay (same pattern as home) ---- */
[data-page="int-symposium"] .v2-burger {
  display: none;
  position: absolute;
  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;
}
[data-page="int-symposium"] .v2-burger::before,
[data-page="int-symposium"] .v2-burger::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease, ease);
}
[data-page="int-symposium"] .v2-burger::before { top: 13px; }
[data-page="int-symposium"] .v2-burger::after { top: 21px; }
[data-page="int-symposium"] .v2-burger[aria-expanded="true"]::before { transform: translateY(4px) rotate(45deg); }
[data-page="int-symposium"] .v2-burger[aria-expanded="true"]::after { transform: translateY(-4px) rotate(-45deg); }

.v2-menu-open [data-page="int-symposium"] .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
[data-page="int-symposium"] .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);
  background: var(--v2-menu-bg, #194245);
  color: var(--v2-menu-ink, #cbeeed);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease, ease);
}
[data-page="int-symposium"] .v2-mmenu.is-open { transform: translateX(0); }
[data-page="int-symposium"] .v2-mmenu[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-page="int-symposium"] .v2-mmenu { transition: none; }
  /* no looping shine for readers who asked for stillness */
  [data-page="int-symposium"] .v2-nav__buy::after { animation: none; opacity: 0; }
}
[data-page="int-symposium"] .v2-mmenu__links { font-size: 26px; font-weight: 300; }
[data-page="int-symposium"] .v2-mmenu__links li + li { margin-top: var(--s-20); }
[data-page="int-symposium"] .v2-mmenu__links a { text-decoration: none; }
[data-page="int-symposium"] .v2-mmenu__social { display: flex; gap: var(--s-16); margin-top: auto; padding-top: var(--s-48); }
[data-page="int-symposium"] .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="int-symposium"] .v2-mmenu__legal { display: grid; gap: var(--s-8); margin-top: var(--s-32); font-size: 22px; font-weight: 300; }
[data-page="int-symposium"] .v2-mmenu__copy { margin-top: var(--s-16); font-size: 16px; font-weight: 300; }

/* ---- sections (normal scroll — NOT the home page's snap) ----
   SIDE PADDING RULE: always equals the header's (.topbar) horizontal
   padding — 48px desktop / 32px ≤1024 / 20px ≤640 — so every section
   shares the logo's left edge. Never a custom value. */
[data-page="int-symposium"] .sy-s {
  /* the topbar is sticky, so it floats OVER the section once scrolled past.
     Top padding must clear its height (measured into --v2-topbar by
     int-symposium.js) or a section landing at the viewport top has its
     title cropped behind the header — same rule as home-v2.css. */
  padding: calc(var(--v2-topbar, 154px) + var(--s-24)) var(--s-48) var(--s-80);
  background: var(--sec-bg, var(--sy-teal));
  color: var(--sec-ink, var(--sy-mint));
  scroll-margin-top: var(--v2-topbar, 140px);
  /* PPT-style advance (client, 2026-09-14 — "like the one in homepage"):
     a section must be at least one screen tall, so its last screen is a
     real resting place for the wheel handler in int-symposium.js. Short
     sections (Guided Tour) then fill the viewport instead of letting two
     bands share one screen. Sections taller than this scroll normally
     until their content has been read to the end.

     Padding sits inside the screen height (border-box) so a short section
     is exactly one screen, not a screen plus its padding. Sections that
     overflow are handled in js — see the boundary clamp in the wheel
     handler, which refuses to rest where a title would sit under the
     sticky header (client, 2026-09-14: "sometimes the title gets
     cropped"). */
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
}
[data-page="int-symposium"] .sy-s__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s-64);
  align-items: start;
}
[data-page="int-symposium"] .sy-s__info { max-width: 720px; }

/* topic sections (Net-Zero / Opportunities / Wellbeing): the small label sits
   BESIDE the title on the comp's top line, not under the body copy (user,
   2026-09-14). The label wraps to two lines and hangs from the title's cap
   line, so the row is top-aligned and the label gets its own measure. */
[data-page="int-symposium"] .sy-s__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-40);
}
[data-page="int-symposium"] .sy-s__head .sy-s__title { flex: 0 1 auto; }
[data-page="int-symposium"] .sy-s__head .sy-s__tag {
  flex: 0 0 auto;
  max-width: 18ch;
  /* bigger and at normal weight, not the label's light default (user,
     2026-09-14) */
  font-size: 19px;
  font-weight: 500;
  padding-top: 0.1em;   /* optical: drops the label onto the title's cap line */
  text-align: left;
}
/* the topic artwork is smaller than the hero's so the speaker grid rides up
   (user, 2026-09-14 — "make the svg smaller ... speaker part move upward") */
[data-page="int-symposium"] .sy-s--netzero .diagram-wrap,
[data-page="int-symposium"] .sy-s--opportunities .diagram-wrap,
[data-page="int-symposium"] .sy-s--wellbeing .diagram-wrap {
  /* ~1.5x a speaker card wide (user, 2026-09-14). The cards are a 5-up track
     across the section's content box, while this box is the grid's right
     column. Both track the content width, so 1.5x a card works out to a
     near-constant 69% of this column (68.1-69.6% from 1200 to 1920) — a
     percentage holds the ratio at every width, where a fixed px cap drifted
     (450px measured 2.05x at 1200 but only 1.24x at 1920). The wrap is a
     flex item, so it needs the explicit width: without it the box shrinks to
     the SVG's intrinsic size and the cap never binds. */
  width: 100%;
  max-width: 69%;
  margin-left: auto;
  align-items: flex-start;
  align-self: start;
}

/* per-section palettes (client, 2026-09-14: the four speaker/tour bands all
   wear the campaign mint; Schedule and FAQ sit on the teal ground. Card
   panels keep inverting against their band, so every mint section now
   carries teal cards and the teal sections carry mint ones.) */
[data-page="int-symposium"] .sy-s--hero { --sec-bg: var(--sy-teal); --sec-ink: var(--sy-mint); }
[data-page="int-symposium"] .sy-s--keynote,
[data-page="int-symposium"] .sy-s--netzero,
[data-page="int-symposium"] .sy-s--opportunities,
[data-page="int-symposium"] .sy-s--wellbeing,
[data-page="int-symposium"] .sy-s--tours {
  --sec-bg: var(--sy-mint);
  --sec-ink: var(--sy-teal);
  --card-bg: var(--sy-teal);
  --card-ink: var(--sy-mint);
}
/* Each speaker section now carries its OWN accent (client, 2026-09-14) on the
   shared mint ground. --sec-ink drives the title, the body copy and the
   draw-on-scroll symbol (js reads the section's computed colour), and
   --card-bg fills the speaker panels — so one pair per section does all four. */
[data-page="int-symposium"] .sy-s--keynote { --sec-ink: var(--sy-acc-keynote); --card-bg: var(--sy-acc-keynote); }
[data-page="int-symposium"] .sy-s--netzero { --sec-ink: var(--sy-acc-netzero); --card-bg: var(--sy-acc-netzero); }
[data-page="int-symposium"] .sy-s--opportunities { --sec-ink: var(--sy-acc-opp); --card-bg: var(--sy-acc-opp); }
[data-page="int-symposium"] .sy-s--wellbeing { --sec-ink: var(--sy-acc-wellbeing); --card-bg: var(--sy-acc-wellbeing); }
[data-page="int-symposium"] .sy-s--schedule,
[data-page="int-symposium"] .sy-s--faq { --sec-bg: var(--sy-teal); --sec-ink: var(--sy-mint); }

/* ---- hero ---- */
[data-page="int-symposium"] .sy-hero {
  /* the section's own padding already clears the topbar and the bottom
     inset, so the inner grid only needs what is left of the screen —
     subtracting the bar again would push the hero past one viewport */
  min-height: calc(100vh - var(--v2-topbar, 154px) - var(--s-24) - var(--s-80));
  min-height: calc(100dvh - var(--v2-topbar, 154px) - var(--s-24) - var(--s-80));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-64);
  /* comp: the artwork and the title share ONE top edge — the columns hang
     from the top of the grid rather than each centring in its own track
     (user, 2026-09-14). */
  align-items: start;
}
/* comp: bold condensed-feeling title with the three themes stacked beside it */
[data-page="int-symposium"] .sy-hero__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-40);
}
/* The title is the SAME wordmark lockup the home page uses
   (assets/title/1.svg). Its paths are baked to #194245 — invisible on this
   section's teal ground — so the artwork is used as a MASK and the colour
   comes from the section ink, keeping the hero's existing mint (user,
   2026-09-14). The <img> stays in the markup for alt text / no-mask
   fallback. */
[data-page="int-symposium"] .sy-hero__title {
  width: 100%;
  max-width: 760px;   /* the lockup already carries the three theme words */
  line-height: 0;     /* the SVG carries its own optical spacing */
}
[data-page="int-symposium"] .sy-hero__title-img {
  display: block;
  width: 100%;
  height: auto;
}
@supports (mask-image: url("/assets/title/1.svg")) {
  [data-page="int-symposium"] .sy-hero__title picture {
    display: block;
    background: var(--sec-ink, var(--sy-mint));
    mask: url("/assets/title/1.svg") no-repeat left top / 100% 100%;
    -webkit-mask: url("/assets/title/1.svg") no-repeat left top / 100% 100%;
  }
  /* the mask needs the box the image used to give it */
  [data-page="int-symposium"] .sy-hero__title-img { visibility: hidden; }
  @media (max-width: 640px) {
    [data-page="int-symposium"] .sy-hero__title picture {
      mask-image: url("/assets/title/mobile/1.svg");
      -webkit-mask-image: url("/assets/title/mobile/1.svg");
    }
  }
}
/* ---- hero dates (client comp, 2026-09-16) ----
   Two dated strands side by side between the title and the intro: a big
   date over a small caption, the same lockup the Schedule / Guided Tour
   rows use, so the page keeps ONE date scale (40/600, 32 on mobile —
   .sy-sched__date / .sy-tour__date) and the caption takes the home's
   support-text size (18/1.3). The comp sets the second column ~293px in
   from the left edge, which is what two equal tracks capped at 520px with
   the 64px gutter give. */
[data-page="int-symposium"] .sy-hero__dates {
  margin-top: var(--s-56);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-64);
  max-width: 520px;
}
/* the page's .sym__row is a label-BESIDE-value grid (further down this file);
   in the hero each entry stacks instead — date over caption */
[data-page="int-symposium"] .sy-hero__dates .sym__row { display: block; margin-top: 0; }
/* .sym__row .sym__label further down sets nowrap and comes later in the
   file, so this needs the same row in its selector to win — without it the
   caption runs past its column at phone width */
[data-page="int-symposium"] .sy-hero__dates .sym__row .sym__label { white-space: normal; }
[data-page="int-symposium"] .sy-hero__dates .sym__value {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}
/* the symposium's own dates stay bold; the TOUR date beside them steps down
   to normal, so the main event leads (user, 2026-09-16 — "the date of
   International Symposium keeps bold, only change Guided Tour dates") */
[data-page="int-symposium"] .sy-hero__dates .sym__row--tour .sym__value { font-weight: 300; }
[data-page="int-symposium"] .sy-hero__dates .sym__label {
  /* the caption hangs straight off the number above it — no gap of its own;
     the line boxes supply what little air there is (user, 2026-09-16 —
     "still need reduce the padding between date and text") */
  margin-top: 0;
  /* one step UP from the home's 18px support text, still clearly under the
     26px body copy (user, 2026-09-16 — "can enlarge a bit, but still
     smaller than content"). 20px is the page's own next size — the Guided
     Tour time/quota line and .sy-sched__ampm already use it. */
  font-size: 20px;
  /* LIGHT, like the body copy — the captions read as support under the
     dates, not as labels (user, 2026-09-16) */
  font-weight: 300;
  line-height: 1.3;
}
/* the dates now carry the gap the intro used to take off the title */
[data-page="int-symposium"] .sy-hero__dates + .sy-hero__intro { margin-top: var(--s-48); }

/* the intro reads in the HOME page's body style — 26px / 300 / 1.2
   (24px ≤640), same measure cap as home's info column. Never a custom
   size/leading (user, 2026-09-15). */
[data-page="int-symposium"] .sy-hero__intro {
  margin-top: var(--s-56);
  max-width: 720px;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
}

/* ---- shared type (comp: section titles are BOLD, in the section ink;
   size measured off the comps — the title spans ~29% of the page width,
   i.e. ~42px at 1440) ---- */
[data-page="int-symposium"] .sy-s__title {
  font-size: clamp(34px, 2.95vw, 44px);
  font-weight: 600;
  line-height: 0.96;
  text-transform: uppercase;
}
[data-page="int-symposium"] .sy-s__body {
  margin-top: var(--s-32);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
}
[data-page="int-symposium"] .sy-s__body + .sy-s__body { margin-top: var(--s-24); }
[data-page="int-symposium"] .sym__meta { margin-top: var(--s-32); }
[data-page="int-symposium"] .sym__row {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: var(--s-12);
  margin-top: var(--s-12);
}
[data-page="int-symposium"] .sym__row .sym__label { white-space: nowrap; }
[data-page="int-symposium"] .sym__label { font-size: 16px; font-weight: 400; line-height: 1.2; opacity: 1; }
[data-page="int-symposium"] .sym__value { margin-top: 0; font-size: 26px; font-weight: 300; line-height: 1.2; }
[data-page="int-symposium"] .sym__value small { font-size: 16px; font-weight: 400; }
[data-page="int-symposium"] .nowrap { white-space: nowrap; }
[data-page="int-symposium"] .sy-tbc { opacity: 0.55; }

/* ---- speaker cards (comp: duotone photo over a solid panel; tag at the
   panel top, name + firm lower; hairline gaps between cards) ---- */
[data-page="int-symposium"] .sy-speakers {
  margin-top: var(--s-48);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;   /* client, 2026-09-14 */
}
[data-page="int-symposium"] .spk { display: flex; }
[data-page="int-symposium"] .spk__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
[data-page="int-symposium"] .spk__photo-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
[data-page="int-symposium"] .spk__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease, ease);
}
[data-page="int-symposium"] .spk__card:hover .spk__photo { transform: scale(1.04); }
/* hover reveals the NORMAL-colour photo (client, 2026-09-13): the pair's
   natural shot sits on top and crossfades in */
[data-page="int-symposium"] .spk__photo--color {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s var(--ease, ease), transform 0.4s var(--ease, ease);
}
[data-page="int-symposium"] .spk__card:hover .spk__photo--color,
[data-page="int-symposium"] .spk__card:focus-visible .spk__photo--color { opacity: 1; }
/* photo-less speaker (asset not yet supplied) */
[data-page="int-symposium"] .spk__photo--tbc {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--card-bg, currentColor);
  color: var(--sec-ink);
  font-size: 13px;
  opacity: 0.6;
}
[data-page="int-symposium"] .spk__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: var(--s-16) var(--s-16) var(--s-24);
  background: var(--card-bg, var(--sy-teal));
  color: var(--card-ink, var(--sy-mint));
}
[data-page="int-symposium"] .spk__tag {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
[data-page="int-symposium"] .spk__names { display: block; margin-top: var(--s-56); }
[data-page="int-symposium"] .spk__name {
  display: block;
  font-size: clamp(19px, 1.6vw, 26px);
  font-weight: 400;
  line-height: 1.1;
}
[data-page="int-symposium"] .spk__firm {
  display: block;
  margin-top: var(--s-8);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.3;
}

/* ---- artwork column (draw-on-scroll symbols, home mechanism) ---- */
[data-page="int-symposium"] .diagram-wrap { position: relative; }
/* hero artwork hangs from the title's cap-height instead of centring in its
   column: the shared .diagram-wrap centres with flex, which this hero must
   override (user, 2026-09-14 — title/SVG share one top edge). --sy-hero-art-top
   is the optical nudge that lines the SVG's top edge up with the title's caps
   (the wordmark SVG carries blank space above its cap-height). Measured with
   headless screenshots: 14px against the full 760px lockup, stepped to 10px
   below 1280 where the title shrinks with its track — within 1px everywhere. */
[data-page="int-symposium"] .sy-hero .diagram-wrap {
  align-items: flex-start;
  align-self: start;
  margin-top: var(--sy-hero-art-top, 14px);
}
[data-page="int-symposium"] .v2-symbol { position: relative; width: 100%; line-height: 0; }
[data-page="int-symposium"] .v2-symbol__drawing { display: block; }
[data-page="int-symposium"] .v2-symbol__drawing svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---- schedule (client comp, 2026-09-14) ----
   One row per A.M./P.M. slot: date | time | location + keynotes | theme +
   panel. The rule sits ABOVE each row, and a slot continuing the same day
   leaves its date cell empty (24/11 P.M.), exactly as the comp reads. */
[data-page="int-symposium"] .sy-sched { margin-top: var(--s-48); display: grid; gap: var(--s-56); }
[data-page="int-symposium"] .sy-sched__slot {
  padding-top: var(--s-24);
  display: grid;
  grid-template-columns: 150px 60px minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-24);
  align-items: start;
}
/* A new DAY gets a full-width rule. A slot that continues the same day
   (24/11 P.M.) is ruled only from the time column across, leaving the date
   column open so the two slots read as one day (comp, 2026-09-14). The rule
   is inset with a transparent left border rather than drawn per-column, so
   it stays unbroken across the grid gutters. */
[data-page="int-symposium"] .sy-sched__slot { border-top: 1px solid currentColor; }
[data-page="int-symposium"] .sy-sched__slot--cont {
  border-top: 0;
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: calc(100% - 150px - var(--s-24)) 1px;
  background-position: 100% 0;
}
[data-page="int-symposium"] .sy-sched__date { font-size: 40px; font-weight: 600; line-height: 1; }
[data-page="int-symposium"] .sy-sched__ampm { font-size: 20px; font-weight: 300; line-height: 1.2; }
[data-page="int-symposium"] .sy-sched__venue {
  margin-top: var(--s-8);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.3;
}
/* names sit large and light; the firm that follows is a size down */
[data-page="int-symposium"] .sy-sched__person {
  margin-top: var(--s-8);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.25;
}
[data-page="int-symposium"] .sy-sched__firm { font-size: 18px; }
[data-page="int-symposium"] .sy-sched__person em { font-size: 17px; font-style: italic; }
/* the small captions (Location / Panel / Moderator …) read semibold in the
   comp, against the light names beneath them (client, 2026-09-14). Scoped to
   the schedule so .sym__label stays as-is everywhere else on the page. */
[data-page="int-symposium"] .sy-sched__detail .sym__label,
[data-page="int-symposium"] .sy-sched__theme .sym__label { margin-top: var(--s-20); font-weight: 600; }
[data-page="int-symposium"] .sy-sched__detail > .sym__label:first-child,
[data-page="int-symposium"] .sy-sched__theme > .sym__label:first-child { margin-top: 0; }
[data-page="int-symposium"] .sy-sched__theme h4 {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
}
[data-page="int-symposium"] .sy-sched__theme h4 + .sym__label { margin-top: var(--s-24); }

/* ---- guided tour ---- */
/* GUIDED TOUR (client comp, 2026-09-14) — same date-column rhythm as the
   Schedule section: big date | italic tour id | bold title + time/quota.
   A rule sits above each row; rows that continue 26/11 (tours B and C) are
   ruled only from the tour-id column across, so the day reads as one block
   (the same device as .sy-sched__slot--cont). */
/* the section head now carries an intro paragraph (client copy, 2026-09-16),
   so the title steps down one notch and the language line drops to the
   home's support-text size (18/1.3) so the hierarchy reads title > intro >
   note (user, 2026-09-16 — "make the language line and GUIDED TOUR
   smaller"). Scoped to this section: the other titles keep .sy-s__title. */
[data-page="int-symposium"] .sy-s--tours .sy-s__title { font-size: clamp(28px, 2.3vw, 34px); }
[data-page="int-symposium"] .sy-tour__intro { max-width: 720px; }   /* same measure cap as the hero intro */
[data-page="int-symposium"] .sy-tour__lang {
  margin-top: var(--s-24);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
}
[data-page="int-symposium"] .sy-tours { margin-top: var(--s-40); display: grid; }
[data-page="int-symposium"] .sy-tour {
  padding: var(--s-24) 0 var(--s-32);
  display: grid;
  grid-template-columns: 150px 150px minmax(0, 1fr);
  gap: var(--s-24);
  align-items: start;
  border-top: 1px solid currentColor;
}
/* the 26/11 blurb row carries no rule of its own below the date, and the
   tour rows under it are inset — matching the comp's single-day grouping */
[data-page="int-symposium"] .sy-tour--intro { padding-bottom: var(--s-16); }
[data-page="int-symposium"] .sy-tour--sub {
  border-top: 0;
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: calc(100% - 150px - var(--s-24)) 1px;
  background-position: 100% 0;
}
/* tours B and C have no date cell: start them in the tour-id column */
[data-page="int-symposium"] .sy-tour--sub .sy-tour__id { grid-column: 2; }
[data-page="int-symposium"] .sy-tour__date { font-size: 40px; font-weight: 600; line-height: 1; }
/* "Tour A/B/C" reads semi-bold and the tour copy normal rather than light
   (user, 2026-09-14) */
[data-page="int-symposium"] .sy-tour__id { font-size: 26px; font-weight: 600; font-style: italic; line-height: 1.1; }
[data-page="int-symposium"] .sy-tour__detail--wide { grid-column: 2 / -1; }
[data-page="int-symposium"] .sy-tour h4 { font-size: 20px; font-weight: 700; line-height: 1.35; }
/* comp wraps the blurb well before the full column width; the 32px top
   margin is the blank line the client asked for between the time/quota
   line and the description (one blurb line box = 29px) */
[data-page="int-symposium"] .sy-tour__blurb { margin-top: var(--s-32); max-width: 66ch; font-size: 20px; font-weight: 400; line-height: 1.45; }
/* 500, not 400: Acumin at 400 reads as light copy next to the bold title
   (user, 2026-09-15 — the time/quota line must read normal, not light) */
[data-page="int-symposium"] .sy-tour__meta { margin-top: var(--s-4); font-size: 20px; font-weight: 500; }

/* ---- FAQ (client copy, 2026-09-15) ----
   The section carries 14 questions in 6 groups, so it borrows the Schedule /
   Guided Tour device rather than the old flat list: a fixed label column (the
   Q number, set like .sy-tour__id) beside the question and answer, one
   hairline per row, and a category heading opening each group. Type follows
   the Guided Tour rows — question 20/700 like .sy-tour h4, answer and bullets
   20/400/1.45 like .sy-tour__blurb — so the two lower sections read as one
   family. currentColor, not --line: the section is teal-on-mint and the rule
   should track the section ink like the tour rules do. */
[data-page="int-symposium"] .sy-faq { margin-top: var(--s-40); display: grid; }
[data-page="int-symposium"] .sy-faq__cat {
  margin-top: var(--s-56);
  font-size: 26px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.1;
}
[data-page="int-symposium"] .sy-faq__cat:first-child { margin-top: 0; }
/* Same three-column track as .sy-tour, with the first (date) column left
   empty, so a question sits exactly on Tour B/C's ruler: the Q number under
   "Tour C" and the question under the tour title (user, 2026-09-15 — "it
   should align with the Tour C"). The answer sits on its own row under the
   question, unlabelled — an "A" marker beside it was tried and dropped
   (user, 2026-09-15 — "remove 'A' sounds better"). */
[data-page="int-symposium"] .sy-faq__item {
  padding: var(--s-24) 0 var(--s-32);
  display: grid;
  grid-template-columns: 150px 150px minmax(0, 1fr);
  column-gap: var(--s-24);
  row-gap: var(--s-16);
  align-items: start;
  /* drawn as a background, not a border, so it can be inset to the Q column
     the way the Guided Tour insets its continuation rows (.sy-tour--sub):
     inside a group the rule starts at the Q number, so the group reads as
     one block (user, 2026-09-15 — "let them stop at the place ard Q2, u see
     the guided tour part") */
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: calc(100% - 150px - var(--s-24)) 1px;
  background-position: 100% 0;
}
/* the first question of a group opens it, so its rule runs full width,
   directly under the category heading */
[data-page="int-symposium"] .sy-faq__cat + .sy-faq__item { background-size: 100% 1px; }
/* and the last row closes the whole list */
[data-page="int-symposium"] .sy-faq__item:last-child { border-bottom: 1px solid currentColor; }
[data-page="int-symposium"] .sy-faq__id { grid-column: 2; font-size: 26px; font-weight: 600; font-style: italic; line-height: 1.1; }
[data-page="int-symposium"] .sy-faq__q,
[data-page="int-symposium"] .sy-faq__detail { grid-column: 3; }
[data-page="int-symposium"] .sy-faq__q { font-size: 20px; font-weight: 700; line-height: 1.35; }
/* the row gap already sets the question off from the answer */
[data-page="int-symposium"] .sy-faq__a,
[data-page="int-symposium"] .sy-faq__list { max-width: 66ch; font-size: 20px; font-weight: 400; line-height: 1.45; }
[data-page="int-symposium"] .sy-faq__list { margin-top: var(--s-16); padding-left: 1.15em; list-style: disc; }
/* Q13 answers with bullets alone — the row gap already sets them off, so the
   list's own top margin would double it */
[data-page="int-symposium"] .sy-faq__detail > .sy-faq__list:first-child { margin-top: 0; }
[data-page="int-symposium"] .sy-faq__list li + li { margin-top: var(--s-8); }
/* an answer that introduces its own list ("…as well as online:") owns the
   list, so the two sit a line apart, not a paragraph apart */
[data-page="int-symposium"] .sy-faq__a + .sy-faq__list { margin-top: var(--s-12); }
[data-page="int-symposium"] .sy-faq__a a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---- speaker popup ----
   Desktop: 80% viewport width (client spec). Mobile: full screen.
   Sheet palette follows the popup comp (light ground, teal ink). */
[data-page="int-symposium"] .pop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-32);
  background: rgba(0, 0, 0, 0.75);   /* client: black 75% */
}
[data-page="int-symposium"] .pop[hidden] { display: none; }
[data-page="int-symposium"] .pop__sheet:focus { outline: none; }
[data-page="int-symposium"] .pop__sheet {
  position: relative;
  width: 80vw;          /* client spec */
  max-width: 1280px;
  /* ONE height for every popup, whatever is in it (user, 2026-09-15:
     "should be all pop window height is the same"). A bio longer than the
     sheet scrolls inside it; the ref slide's image fills the frame. */
  height: min(86vh, 860px);
  /* ONE side gutter for everything in the sheet — the bio column, the
     caption and the dots all read off it, so they can never drift apart.
     Trimmed from the comp's 5.3% (user, 2026-09-15: "reduce the left-right
     padding of the popup window"): 61px -> 40px on a 1440px screen. */
  --pop-pad: 3.5%;
  display: flex;
  flex-direction: column;
  background: var(--sy-pop-bg);
  color: var(--sy-teal);
}
[data-page="int-symposium"] .pop__close {
  position: absolute;
  /* flush into the sheet's top-right corner (user, 2026-09-15: "the close
     button should be exactly at the right upper corner") */
  top: 0;
  right: 0;
  z-index: 2;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1.5px solid currentColor;
  /* filled, not transparent (user, 2026-09-15) — it sits over the full-bleed
     job-ref photo, and an outline alone disappears into a busy shot */
  background: var(--sy-pop-bg);
  color: inherit;
  cursor: pointer;
}
/* the comp's ⊠ mark: the X runs corner to corner */
[data-page="int-symposium"] .pop__close::before,
[data-page="int-symposium"] .pop__close::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
}
[data-page="int-symposium"] .pop__close::before { transform: rotate(45deg) scaleX(1.414); }
[data-page="int-symposium"] .pop__close::after { transform: rotate(-45deg) scaleX(1.414); }

[data-page="int-symposium"] .pop__viewport { flex: 1; min-height: 0; overflow: hidden; }
[data-page="int-symposium"] .pop__slide { height: 100%; overflow-y: auto; padding: var(--s-56) var(--pop-pad) var(--s-24); }
[data-page="int-symposium"] .pop__slide[hidden] { display: none; }

/* bio slide (slide 1 — always the speaker's bio; NO photo).
   Proportions measured off the client comp (sheet = 100%): --pop-pad side
   padding, bold tag, BOLD name at ~5.3% of sheet width, firm tight
   under it, body at ~1.8% sheet width / 1.4 line-height, left-aligned
   and full width. Sheet width is 80vw, so sheet-relative sizes map to
   vw × 0.8. */
/* The tag / name / firm stay put and only the paragraphs scroll, and only
   when they overrun the sheet (user, 2026-09-15: "I want B, dont change
   the height of the popup"). The slide itself must not scroll, or both
   would; the sheet keeps its one fixed height. */
[data-page="int-symposium"] .pop__slide--bio { overflow: hidden; }
[data-page="int-symposium"] .pop__bio {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
[data-page="int-symposium"] .pop__bio > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
[data-page="int-symposium"] .pop__tag { font-size: clamp(14px, 1.15vw, 19px); font-weight: 700; }
[data-page="int-symposium"] .pop__name {
  margin-top: var(--s-32);
  font-size: clamp(40px, 4.3vw, 68px);
  font-weight: 700;
  line-height: 1;
}
[data-page="int-symposium"] .pop__firm { margin-top: var(--s-8); font-size: clamp(18px, 1.6vw, 26px); font-weight: 300; }
/* the speaker's role, under the firm (client, 2026-09-16 — "add the
   speaker's title here", arrowed at the gap below MVRDV). Set at the bio
   size so it reads as the caption line it is, one step down from the firm;
   the firm clause the client's own title repeats is dropped, since the line
   above already carries it. */
[data-page="int-symposium"] .pop__title {
  margin-top: var(--s-4);
  /* no measure cap: at 48ch a long title (Jane Cassidy's runs 74 characters)
     broke onto a second line far short of the sheet edge, while the bio
     under it ran full width (user, 2026-09-16 — "why there will hv line
     break in the bio title?"). It wraps now only when it truly runs out. */
  /* a step DOWN from the bio text (user, 2026-09-16 — "maybe make it
     smaller"): the sheet's small scale, the one .pop__tag already uses */
  font-size: clamp(14px, 1.15vw, 19px);
  font-weight: 400;
  line-height: 1.3;
}
[data-page="int-symposium"] .pop__bio-text { margin-top: var(--s-48); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
[data-page="int-symposium"] .pop__bio-text p { font-size: clamp(17px, 1.45vw, 23px); font-weight: 300; line-height: 1.4; }
[data-page="int-symposium"] .pop__bio-text p + p { margin-top: var(--s-20); }

/* job-ref slide: full-bleed image + caption bar (comp: Tainan Spring) */
[data-page="int-symposium"] .pop__slide--ref { padding: 0; display: flex; flex-direction: column; }
/* cover crops the photo to the frame; object-position pulls the crop
   window up so more of the top of the shot survives — roofs, skyline —
   instead of the centred default (user, 2026-09-15: "shift the photo a
   bit lower, I want show more upper part"). */
[data-page="int-symposium"] .pop__ref-img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
/* A photo taller than the frame keeps only about a third of itself under
   cover, so portrait and square shots are matted on the sheet instead —
   whole picture, no crop (user, 2026-09-15: "I want show more"). The
   margins are the sheet colour, so it reads as a mount, not a border.
   The generator applies --fit from each file's aspect ratio. */
[data-page="int-symposium"] .pop__ref-img--fit { object-fit: contain; object-position: 50% 50%; }
/* per-photo overrides, written as "@top" / "@bottom" / "@fit" / "@cover"
   after the caption in content/speakers.md. 50% 25% suits most shots, but
   a building with a point wants its top edge kept (user, 2026-09-15:
   "I want show the JIAN JIAN of the building"). */
[data-page="int-symposium"] .pop__ref-img--top { object-position: 50% 0%; }
[data-page="int-symposium"] .pop__ref-img--bottom { object-position: 50% 100%; }
[data-page="int-symposium"] .pop__ref-tbc {
  flex: 1;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  margin: var(--s-32);
  font-size: 16px;
  opacity: 0.6;
}
/* kept in the markup (it is the caption's source of truth, and what JS
   copies up into the nav bar) but not painted here — caption and dots share
   one line at the foot of the sheet (user, 2026-09-15). */
[data-page="int-symposium"] .pop__ref-caption,
[data-page="int-symposium"] .pop__ref-credit { display: none; }

/* footer bar — comp: dots only, bottom-right. The CURRENT slide's dot is
   FILLED and the ones you can jump to are hollow (user, 2026-09-15 —
   swapped from the comp, which had it the other way round). Arrows stay in
   the DOM for keyboard users but are not part of the comp, so they don't
   paint. */
[data-page="int-symposium"] .pop__nav {
  --cap-fs: 22px;
  --cap-lh: 1.3;
  /* a rung below the sheet's small scale, so the credit sits clearly
     under the project name (user, 2026-09-17: "a bit smaller"). Both
     ends are sizes the page already uses - 13px is .spk__ref-tbc, 16px
     is the label size the home sets. */
  --credit-fs: clamp(13px, 0.95vw, 16px);
  /* the gap the card already puts between a name and the line under it
     (.spk__firm), reused here (user, 2026-09-17: "more spacing") */
  --credit-gap: var(--s-8);
  --dot: 13px;
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: var(--s-32);
  padding: var(--s-16) var(--pop-pad) var(--s-40);
}
/* The bar always holds two lines of caption, so the photo above it is the
   same height on every slide and the dots never shift (user, 2026-09-15:
   "the caption height should preserve two lines height"). A bio slide has
   no caption and simply leaves the room empty. */
[data-page="int-symposium"] .pop__cap {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--cap-fs);
  font-weight: 300;
  line-height: var(--cap-lh);
  min-height: calc(var(--cap-fs) * var(--cap-lh) * 2
                 + var(--credit-gap)
                 + var(--credit-fs) * var(--cap-lh));
}
[data-page="int-symposium"] .pop__cap-text { display: block; }
/* photo credit, under the caption (client mark-up, 2026-09-17 — the
   credit the photographer's name carries in the delivered file name).
   Smaller and lighter than the caption so the project still reads first;
   it keeps its line whether or not the slide has a credit. */
[data-page="int-symposium"] .pop__cap-credit {
  display: block;
  margin-top: var(--credit-gap);
  font-size: var(--credit-fs);
  line-height: var(--cap-lh);
  opacity: 0.7;
}
[data-page="int-symposium"] .pop__arrow {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  padding: 0;
}
/* sat on the caption's FIRST line, not the middle of the two-line bar —
   that is where the client comp puts them. Gap tightened from 14px
   (user, 2026-09-15: "the dots should be closer"). */
[data-page="int-symposium"] .pop__dots {
  flex: none;
  display: flex;
  gap: 8px;
  margin-left: auto;
  margin-top: calc((var(--cap-fs) * var(--cap-lh) - var(--dot)) / 2);
}
/* moderators show a bio only — one slide, so no dots to paint (the nav bar
   still holds its height so every sheet keeps the same slide area) */
[data-page="int-symposium"] .pop__dots[hidden] { display: none; }
/* Swapped against the original comp (user, 2026-09-15): FILLED = the slide
   you are on, HOLLOW = a slide you can go to. */
[data-page="int-symposium"] .pop__dot {
  width: var(--dot);
  height: var(--dot);
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
[data-page="int-symposium"] .pop__dot[aria-current="true"] { background: currentColor; }

/* lock page scroll while the popup is open */
.sy-pop-open, .sy-pop-open body { overflow: hidden; }

/* ================= responsive ================= */
/* the title shrinks with its track below ~1280 while the art nudge is a fixed
   measurement, so step it down to keep the shared top edge (user, 2026-09-14) */
@media (max-width: 1280px) {
  [data-page="int-symposium"] .sy-hero { --sy-hero-art-top: 10px; }
}
@media (max-width: 1024px) {
  [data-page="int-symposium"] .sy-back,
  [data-page="int-symposium"] .v2-nav { display: none; }
  [data-page="int-symposium"] .v2-burger { display: block; }
  [data-page="int-symposium"] .topbar { padding-bottom: var(--s-12); }
  [data-page="int-symposium"] .sy-s { padding-left: var(--s-32); padding-right: var(--s-32); }
  [data-page="int-symposium"] .sy-s__grid,
  [data-page="int-symposium"] .sy-hero { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the artwork leads and the copy follows — the home page's own
     portrait order (style.css: .sym .diagram-wrap{order:1}; .sym__info{order:2}),
     asked for here too (user, 2026-09-15: "the svg should come first and
     follow by the description, like homepage"). Before this the reader had to
     scroll a full screen of body copy before the symbol appeared. */
  [data-page="int-symposium"] .sy-s__grid > .diagram-wrap,
  [data-page="int-symposium"] .sy-hero > .diagram-wrap { order: 1; }
  [data-page="int-symposium"] .sy-s__info,
  [data-page="int-symposium"] .sy-hero__copy { order: 2; }
  [data-page="int-symposium"] .sy-hero { gap: var(--s-40); }
  /* single column below this width — nothing to align the art against */
  [data-page="int-symposium"] .sy-hero { --sy-hero-art-top: 0px; }
  [data-page="int-symposium"] .diagram-wrap { max-width: 420px; }
  /* the grid is single-column here, so the topic artwork's 69%-of-column cap
     would resolve against the FULL width (662px at 1024). Fall back to the
     shared 420px and keep it on the left, above the copy. */
  [data-page="int-symposium"] .sy-s--netzero .diagram-wrap,
  [data-page="int-symposium"] .sy-s--opportunities .diagram-wrap,
  [data-page="int-symposium"] .sy-s--wellbeing .diagram-wrap {
    max-width: 420px;
    margin-left: 0;
  }
  [data-page="int-symposium"] .sy-speakers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  [data-page="int-symposium"] .sy-s { padding-left: var(--s-20); padding-right: var(--s-20); }
  [data-page="int-symposium"] .topbar { padding-bottom: calc(var(--s-20) / 2); }
  [data-page="int-symposium"] .sy-s__body { font-size: 24px; }   /* home's -2px mobile scale */
  [data-page="int-symposium"] .sy-hero__intro { font-size: 24px; margin-top: var(--s-40); }   /* home mobile body */
  [data-page="int-symposium"] .sy-hero__dates { margin-top: var(--s-40); gap: var(--s-24); }
  [data-page="int-symposium"] .sy-hero__dates .sym__value { font-size: 32px; }   /* page's mobile date scale */
  [data-page="int-symposium"] .sy-hero__dates .sym__label { font-size: 18px; }   /* home support text, under the 24px mobile body */
  [data-page="int-symposium"] .sy-hero__dates + .sy-hero__intro { margin-top: var(--s-40); }
  /* schedule stacks: date+time on one line, then detail, then theme */
  [data-page="int-symposium"] .sy-sched__slot { grid-template-columns: auto 1fr; gap: var(--s-16); }
  [data-page="int-symposium"] .sy-sched__date { font-size: 32px; }
  /* stacked, there IS no date column to inset against, so the continuation
     slot (24/11 P.M.) ran its rule and its "P.M." in from an empty cell and
     read as broken (user, 2026-09-15 — "looks weird in mobile"). Full-width
     rule, empty date cell removed, P.M. back on the section's left edge —
     the same treatment .sy-tour--sub already gets down here. */
  [data-page="int-symposium"] .sy-sched__slot--cont { background-size: 100% 1px; }
  [data-page="int-symposium"] .sy-sched__slot--cont .sy-sched__date { display: none; }
  [data-page="int-symposium"] .sy-sched__slot--cont .sy-sched__ampm { grid-column: 1 / -1; }
  [data-page="int-symposium"] .sy-sched__ampm { align-self: end; }
  [data-page="int-symposium"] .sy-sched__detail,
  [data-page="int-symposium"] .sy-sched__theme { grid-column: 1 / -1; }
  [data-page="int-symposium"] .sy-sched__venue,
  [data-page="int-symposium"] .sy-sched__person { font-size: 20px; }
  [data-page="int-symposium"] .sy-sched__firm { font-size: 16px; }
  /* stacked, the theme needs to clear the detail column above it */
  [data-page="int-symposium"] .sy-sched__theme { margin-top: var(--s-24); }
  [data-page="int-symposium"] .sy-sched__theme h4 { font-size: 32px; }
  [data-page="int-symposium"] .sym__value { font-size: 24px; }
  [data-page="int-symposium"] .sym__row { grid-template-columns: 1fr; gap: var(--s-4, 4px); margin-top: var(--s-20); }
  /* guided tour stacks: date on its own line, then tour id, then detail —
     the fixed 150px columns have no room at phone width */
  [data-page="int-symposium"] .sy-tour { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); padding-bottom: var(--s-24); }
  [data-page="int-symposium"] .sy-tour__date { font-size: 32px; }
  [data-page="int-symposium"] .sy-tour__id,
  [data-page="int-symposium"] .sy-tour--sub .sy-tour__id { grid-column: 1; }
  [data-page="int-symposium"] .sy-tour__detail,
  [data-page="int-symposium"] .sy-tour__detail--wide { grid-column: 1; }
  /* stacked, the inset rule would float mid-row: run it full width */
  [data-page="int-symposium"] .sy-tour--sub { background-size: 100% 1px; }
  [data-page="int-symposium"] .sy-s--tours .sy-s__title { font-size: 28px; }
  [data-page="int-symposium"] .sy-tour__lang { font-size: 16px; }   /* home label size */
  [data-page="int-symposium"] .sy-tour h4,
  [data-page="int-symposium"] .sy-tour__blurb,
  [data-page="int-symposium"] .sy-tour__meta { font-size: 18px; }

  /* FAQ stacks the same way: the 150px Q column has no room at phone width,
     so the number sits on its own line above the question */
  [data-page="int-symposium"] .sy-faq__item { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-8); padding-bottom: var(--s-24); }
  /* stacked there is no Q column to inset against — same call as
     .sy-tour--sub down here */
  [data-page="int-symposium"] .sy-faq__item { background-size: 100% 1px; }
  [data-page="int-symposium"] .sy-faq__id,
  [data-page="int-symposium"] .sy-faq__q,
  [data-page="int-symposium"] .sy-faq__detail { grid-column: 1; }
  [data-page="int-symposium"] .sy-faq__cat { margin-top: var(--s-40); font-size: 22px; }
  [data-page="int-symposium"] .sy-faq__id { font-size: 22px; }
  [data-page="int-symposium"] .sy-faq__q,
  [data-page="int-symposium"] .sy-faq__a,
  [data-page="int-symposium"] .sy-faq__list { font-size: 18px; }

  /* mobile: the speaker cards become a single-row horizontal carousel
     (user, 2026-09-14 — "in one row, users can scroll horizontaly, the next
     item cards will show ard 1/3"). The track bleeds to both screen edges so
     a card can sit flush on the section's left edge while the next one peeks
     in from the right; the trailing padding keeps the last card from jamming
     against the edge. Scroll-snap makes each swipe land on a card. */
  [data-page="int-symposium"] .sy-speakers {
    display: flex;
    grid-template-columns: none;
    margin-left: calc(var(--s-20) * -1);
    margin-right: calc(var(--s-20) * -1);
    /* the selected card sits in the MIDDLE of the screen (client,
       2026-09-15). Half the leftover width at each end, or the first and
       last cards could never scroll far enough to reach the centre. */
    padding-left: calc((100vw - (76vw - var(--s-20))) / 2);
    padding-right: calc((100vw - (76vw - var(--s-20))) / 2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-page="int-symposium"] .sy-speakers::-webkit-scrollbar { display: none; }
  [data-page="int-symposium"] .spk {
    /* card width is measured against the SCREEN, not the padded track, so the
       next card's visible sliver really is ~1/3 of a card (user, 2026-09-14) */
    flex: 0 0 calc(76vw - var(--s-20));
    scroll-snap-align: center;
  }
  /* on touch there is no hover, so the natural-colour photo marks the
     SELECTED card instead (client, 2026-09-15): whichever card the carousel
     has centred wears it, and the rest stay duotone. js/int-symposium.js
     puts .is-current on it as the track scrolls. */
  [data-page="int-symposium"] .spk__card.is-current .spk__photo { transform: scale(1.04); }
  [data-page="int-symposium"] .spk__card.is-current .spk__photo--color { opacity: 1; }
  [data-page="int-symposium"] .spk__name { font-size: 19px; }

  /* the comp's title|label row is a desktop arrangement: at phone width the
     two cannot share a line, and the non-shrinking label pushed the whole
     page into horizontal overflow. Stack it under the title instead
     (user, 2026-09-14). */
  [data-page="int-symposium"] .sy-s__head {
    display: block;
  }
  [data-page="int-symposium"] .sy-s__head .sy-s__tag {
    max-width: none;
    padding-top: 0;
    margin-top: var(--s-12);
  }

  /* popup: full screen (client spec) */
  [data-page="int-symposium"] .pop { padding: 0; }
  [data-page="int-symposium"] .pop__sheet {
    width: 100vw; height: 100dvh; max-width: none; max-height: none;
    --pop-pad: var(--s-20);   /* the page's own phone left edge */
  }
  [data-page="int-symposium"] .pop__slide { padding-top: var(--s-64); }
  /* ...except the job-ref slide, which runs its photo edge to edge here just
     as it does on desktop. The blanket padding above is for the bio, and it
     was insetting the picture and cutting its height (user, 2026-09-15:
     "make the image height higher so the style will be same as desktop"). */
  [data-page="int-symposium"] .pop__slide--ref { padding: 0; }

  /* 打橫 photos keep their ratio and stay wide; 打直 ones fill the frame
     (user, 2026-09-15). The sheet is a portrait frame at this width, so
     cropping a landscape shot to fill it threw most of the picture away.
     js/int-symposium.js tags each image from its natural size, which also
     outranks the --fit classes the markup carries from the older rule.
     .is-tall sets the fit only, so the per-photo --top / --bottom crop
     positions still apply. */
  [data-page="int-symposium"] .pop__ref-img.is-wide {
    object-fit: contain;
    object-position: 50% 50%;
  }
  [data-page="int-symposium"] .pop__ref-img.is-tall { object-fit: cover; }

  /* caption and dots take a row each, both centred (user, 2026-09-15);
     on desktop they share one line with the dots pushed right */
  [data-page="int-symposium"] .pop__nav {
    --cap-fs: 17px;
    flex-direction: column;
    align-items: center;
    gap: var(--s-12);
  }
  [data-page="int-symposium"] .pop__cap { flex: none; text-align: center; }
  [data-page="int-symposium"] .pop__dots { margin-left: 0; margin-top: 0; }

  /* the mark shrinks, the tap target does not (user, 2026-09-15). A
     transparent border keeps the button 54px under the finger while the
     painted box is 38px: the fill is clipped to the padding box and the
     ring is an inset shadow, which draws at that same edge. The X bars are
     absolutely positioned, so they resolve against the padding box too and
     follow the smaller box on their own.

     The border is on the bottom and left ONLY, so the painted square stays
     flush in the sheet's top-right corner and the slack is taken inwards
     (user, 2026-09-15: "the close button should still be at the right upper
     corner"). */
  [data-page="int-symposium"] .pop__close {
    box-sizing: border-box;
    border: 0 solid transparent;
    border-width: 0 0 16px 16px;
    background: var(--sy-pop-bg) padding-box;
    box-shadow: inset 0 0 0 1.5px currentColor;
  }
}