/* Asia Pacific Mokkoji — final/style.css
   Reference: assets/identity-v2/DESIGN-SPEC.md (1728-wide artboard). Desktop reproduces the artboard
   proportionally: --u = one artboard pixel; every measurement is calc(N * var(--u)). Phones (≤ 900 px)
   restack in flow with rem/px type. Colours and the two shadow recipes are tokens; never approximate. */

@font-face { font-family: "APM Rounded"; src: url("fonts/APMRounded-Regular.woff2") format("woff2"); font-display: swap; }

/* ===================== 1. Tokens ===================== */
:root {
  --core: #008733;          /* hero ground */
  --leaf: #86BC24;          /* band, highlights, ring P */
  --deep: #006633;          /* wordmark */
  --tagline: #006A35;
  --ink: #001D25;           /* every dark box */
  --yellow: #F0D400;
  --blue: #0055C3;
  --red: #930D1D;
  --mint: #59FFD8;
  --section-blue: #31649F;  /* "Need" ground */
  --body: #434343;
  --grey: #515254;
  --white: #FFFFFF;
  --ink-57: rgb(0 29 37 / 0.57);

  /* Page width (iteration 27 Sep): the page takes the window's width, but never more than 1440 px (a 1080p screen's
     look; wider screens get white either side) nor more than lets the whole first section (1728 × 1117) fit the
     window's height; and never under 960 px unless the window itself is narrower. Phones: always the window's width. */
  --page: max(min(100vw, 960px), min(100vw, 1440px, 100vh * 1728 / 1117));
  --u: calc(var(--page) / 1728);   /* artboard unit */
  --b: calc(100vw / 1728);         /* the curtain photos stay full bleed (the window's width), photo + ribbon registered */

  --shadow-big:
    calc(9 * var(--u)) calc(5 * var(--u)) calc(23 * var(--u)) rgb(0 0 0 / 0.10),
    calc(37 * var(--u)) calc(21 * var(--u)) calc(42 * var(--u)) rgb(0 0 0 / 0.09),
    calc(83 * var(--u)) calc(46 * var(--u)) calc(57 * var(--u)) rgb(0 0 0 / 0.05),
    calc(148 * var(--u)) calc(82 * var(--u)) calc(68 * var(--u)) rgb(0 0 0 / 0.01);
  --shadow-small:
    calc(1.66 * var(--u)) calc(2.48 * var(--u)) calc(7.45 * var(--u)) rgb(0 0 0 / 0.10),
    calc(8.28 * var(--u)) calc(10.76 * var(--u)) calc(13.25 * var(--u)) rgb(0 0 0 / 0.09),
    calc(18.21 * var(--u)) calc(23.18 * var(--u)) calc(17.38 * var(--u)) rgb(0 0 0 / 0.05),
    calc(32.29 * var(--u)) calc(42.22 * var(--u)) calc(20.7 * var(--u)) rgb(0 0 0 / 0.01);

  /* Corners (made consistent, 27 Sep): every surface — card, photo frame, ink box, the map — takes --r-big; small
     controls — icon tiles, form fields — take --r-small; buttons and pills stay fully round */
  --r-big: calc(24.16 * var(--u));
  --r-small: calc(10 * var(--u));
  --r-box: var(--r-big);

  --font-latin: Mulish, "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "APM Rounded", "Black Han Sans", "Noto Sans KR", Impact, sans-serif;   /* APM Rounded everywhere (iteration 27 Sep) */
  --font-jua: Jua, "Noto Sans KR", sans-serif;
  --font-apm: "APM Rounded", "Black Han Sans", sans-serif;
  --font-ko: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --lh-body: 1.255;   /* Mulish "normal" */
}

/* ===================== 2. Base ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--white); color: var(--body);
  font-family: var(--font-latin); font-weight: 700; line-height: var(--lh-body);
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
[id] { scroll-margin-top: 80px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: 16px; top: -120px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 8px; font-weight: 800; text-decoration: none;
}
.skip:focus { top: 16px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===================== 3. Shared components ===================== */
.pattern-maze { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; pointer-events: none; }
.ground { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ground__rect, .tag__rect { transform-origin: 0 0; }

.label { font-family: var(--font-display); font-weight: 400; line-height: 1.255; }
.label--yellow { color: var(--yellow); }   /* the reference's choice on white; organisers' note */
.label--ink { color: var(--ink); }

.body { font-weight: 700; color: var(--body); }
.hl { font-weight: 800; }
.hl--yellow { color: var(--yellow); }
.hl--red { color: var(--red); }
.c--yellow { color: var(--yellow); }
.c--blue { color: var(--blue); }
.c--leaf { color: var(--leaf); }
.c--red { color: var(--red); }
.c--mint { color: var(--mint); }

.card { background: var(--white); border-radius: var(--r-big); box-shadow: var(--shadow-big); }

.tag {
  position: relative; overflow: hidden; background: var(--ink); color: #fff;
  border-radius: var(--r-big); box-shadow: var(--shadow-small);   /* an ink box: the surface radius */
  font-family: var(--font-display); font-weight: 400; line-height: 1.255;
  display: flex; align-items: center;
}
.tag__pattern { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tag > span { position: relative; display: block; }

.inkbox {
  position: absolute; background: var(--ink-57); color: #fff;
  font-family: var(--font-display); font-weight: 400; line-height: 1.2;
}
.inkbox--right { right: 0; border-radius: var(--r-box) 0 0 var(--r-box); }
.inkbox--left { left: 0; border-radius: 0 var(--r-box) var(--r-box) 0; }

/* IofC lockups (hero + footer) */
.lockup { position: relative; font-family: var(--font-latin); white-space: nowrap; }
.lockup__mark { position: absolute; left: 0; top: 0; display: block; }
.lockup__text { position: absolute; }
.lockup__name, .lockup__sub { display: block; line-height: 1.255; }
.lockup__name { font-weight: 600; color: var(--deep); }
.lockup__sub { font-weight: 600; color: var(--leaf); }
.lockup__sub--ko { font-family: var(--font-ko); font-weight: 400; letter-spacing: -0.08em; }
.lockup__country { position: absolute; right: 0; top: 0; font-weight: 600; color: var(--grey); line-height: 1.255; }
.lockup--light .lockup__name { color: #fff; }
.lockup--light .lockup__country { color: rgb(255 255 255 / 0.7); }

.hero { position: relative; background: var(--core); overflow: hidden; }
.hero__maze { position: absolute; color: var(--ink); opacity: 0.08; pointer-events: none; }
.hero__card { position: relative; background: var(--white); border-radius: var(--r-big); box-shadow: var(--shadow-big); }
.hero__star { position: absolute; overflow: hidden; clip-path: url(#star-clip); }   /* inline clipPath: svg/hero-star-mask.svg scaled to the box */
.hero__photo { position: absolute; max-width: none; object-fit: cover; }
.hero__band { position: absolute; left: 0; right: 0; background: var(--leaf); }
.hero__title { position: absolute; margin: 0; }
.hero__title svg { display: block; width: 100%; height: 100%; fill: #fff; }
.hero__ko {
  position: absolute; background: var(--ink); color: #fff; font-family: var(--font-jua); font-weight: 400; line-height: 1;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.hero__tagline { text-align: center; font-weight: 800; color: var(--tagline); line-height: 1.255; white-space: nowrap; }   /* cased in the source: "From Seeds of Change to Forests of Hope" (28 Sep: "of" and "to" lower case) */

/* Split text (iteration 26 Sep): the title's 18 glyphs rise out of the leaf band one by one (the SVG's own viewport
   clips them, so they come up from a line), then the Korean syllables rise out of the ink box. CSS only; each
   glyph / syllable carries its index as --i. */
@keyframes split-rise { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } }
.hero__title path { transform-box: fill-box; animation: split-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(200ms + var(--i) * 45ms); }
.hero__ko { overflow: hidden; }
.hero__ko .ch { display: inline-block; animation: split-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(900ms + var(--i) * 60ms); }
.hero__tagline .split { text-transform: none; }
.hero__tagline .line { display: inline-block; overflow: hidden; vertical-align: top; }
.hero__tagline .ch { display: inline-block; animation: split-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(1300ms + var(--i) * 22ms); }

/* Need card stars (iteration 27 Sep): four 8-armed stars in section blue, clipped by the card, turning slowly */
@keyframes star-spin { to { transform: rotate(1turn); } }
.star { position: absolute; display: none; color: #31649E; pointer-events: none; animation: star-spin 60s linear infinite; }
.star--2, .star--4 { animation-duration: 30s; }

/* Section 4 gallery (iteration 27 Sep): five photos crossfade behind the two arrow buttons; each caption sits on a
   57 % ink pill between the arrows and travels with its photo */
.gallery { position: absolute; overflow: hidden; background: var(--ink); outline: none;
  box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.10), 25px 22px 33px rgba(0, 0, 0, 0.09), 56px 50px 45px rgba(0, 0, 0, 0.05), 99px 88px 53px rgba(0, 0, 0, 0.01); }
.gallery__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.6s ease; }
.gallery__slide.is-active { opacity: 1; }
.gallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.gallery__slide.is-active img { transform: none; }
.gallery__cap { position: absolute; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; border-radius: 999px;
  background: var(--ink-57); color: #fff; font-family: var(--font-latin); font-weight: 700; line-height: 1.3; }
.gallery__btn { position: absolute; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: transform 0.2s ease; }
.gallery__btn svg { display: block; width: 100%; height: 100%; }
.gallery__btn--prev svg { transform: scaleX(-1); }
.gallery__btn:hover { transform: scale(1.08); }
.gallery__btn:focus-visible, .gallery:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* Section 5 "Small acts" (iteration 27 Sep) — base: the photo and ribbon as one scaled picture; desktop adds the section-2
   treatment below */
.what2__red { display: contents; }   /* phones: the red band behind the gallery and the second paragraph */
.gallery__frame { display: contents; }   /* gallery 1's photos; phones give them a frame of their own, so the arrows can sit on its edges */
.what2__ribbons--m, .insp2__note { display: none; }   /* phones only: section 4's own two ribbons, section 5's statement under the photo */
.insp2 { position: relative; background: var(--ink); overflow: hidden; }
.insp2__stage { position: relative; aspect-ratio: 1726.55 / 971.699; overflow: hidden; }
.insp2__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.insp2__ribbon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* The gathering, before Event Details (iteration 27 Sep) — base: the garden painting and the yellow ribbon as one scaled
   picture (frame 1724 × 979; the painting overhangs it 7.648 each side); desktop adds the section-2 treatment below */
.gather { position: relative; background: var(--ink); overflow: hidden; }
.gather__stage { position: relative; aspect-ratio: 1724 / 979; overflow: hidden; }
.gather__photo { position: absolute; left: -0.4436%; top: 0; display: block; width: 100.8872%; height: 100%; max-width: none; object-fit: cover; }
.gather__ribbon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* Section 6 "Experience Growth" (iteration 27 Sep): the star turns like the Need stars; the "Why join" lines run as a
   ticker (two copies of the list, the track slides by one copy's width, so it loops without a seam; pauses on hover) */
.grow { position: relative; background: var(--white); overflow: hidden; }
.grow__star { position: absolute; color: var(--yellow); pointer-events: none; animation: star-spin 60s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker { position: relative; overflow: hidden; background: var(--yellow); }
.ticker__track { display: flex; align-items: center; width: max-content; animation: ticker 60s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__seq { display: flex; margin: 0; padding: 0; list-style: none; }
.ticker__seq li { display: block; white-space: nowrap; color: #fff; font-family: var(--font-latin); font-weight: 700; }   /* not flex: flex items trim the spaces around the dark words */
.ticker__seq li::before { content: "\2022"; display: inline-block; }
.ticker__hl { color: rgba(0, 0, 0, 0.25); }

/* Section 7 "What Might Emerge" (iteration 27 Sep): the flowers turn like the stars; gallery 2 keeps its photos in a
   rounded frame and its captions in the ink box below, both crossfading together */
.emerge { position: relative; background: var(--white); overflow: hidden; }
.emerge__flower { position: absolute; pointer-events: none; animation: star-spin 60s linear infinite; }
.emerge__flower--small { animation-duration: 30s; }
.gallery2 { position: absolute; outline: none; }
.gallery2:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.gallery2__frame { position: absolute; overflow: hidden; background: var(--ink); }
.gallery2__box { position: absolute; background: var(--ink); box-shadow: var(--shadow-small); }
.gallery2__cap { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; font-family: var(--font-apm); font-weight: 400; opacity: 0; transition: opacity 0.6s ease; }
.gallery2__cap.is-active { opacity: 1; }
.cap-hl { color: var(--yellow); }   /* the words to notice in each caption (27 Sep) */
.cap-in { display: block; }   /* the caption's words as one run: as separate flex items they lost the spaces around the highlights */

/* Section 8 "invitation" (iteration 27 Sep) */
.invite { position: relative; background: #006A35; overflow: hidden; }
.card--invite .star { color: var(--leaf); }
.star--i2, .star--i4 { animation-duration: 30s; }

/* Nav: hamburger -> menu (iteration 27 Sep). The three .topbar__line spans are the hamburger; app.js moves them: the outer
   two travel out to become the separators either side of the menu, the middle one the underline of the section on
   screen. The menu opens by max-width, so the centred pill widens from both sides. */
.topbar__burger { flex: none; width: 44px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer;
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1), margin 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.topbar__burger:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.topbar__menu { display: flex; align-items: center; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap;
  transition: max-width 0.6s cubic-bezier(0.65, 0, 0.35, 1), margin 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease; }
.topbar.is-open .topbar__menu { max-width: var(--menu-w, 40rem); opacity: 1; transition-delay: 0s, 0s, 0.2s; }
.topbar__menu a { font-family: var(--font-latin); font-weight: 700; color: var(--body); text-decoration: none; transition: color 0.2s; }
.topbar__menu a:hover, .topbar__menu a.is-current { color: var(--ink); }
.topbar__menu a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
.topbar__line { position: absolute; left: 0; top: 0; width: var(--w, 0); height: var(--h, 0); border-radius: 2px; background: var(--ink); pointer-events: none;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), width 0.6s cubic-bezier(0.65, 0, 0.35, 1), height 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.topbar.no-anim, .topbar.no-anim * { transition: none !important; }

/* Section 9 "Event details" (iteration 27 Sep) */
.details { position: relative; background: var(--ink); overflow: hidden; color: #fff; }
.details__maze { position: absolute; color: #fff; opacity: 0.015; pointer-events: none; }   /* was 0.05, then 0.025: too loud behind the facts and form */
.details__flower { position: absolute; color: var(--yellow); pointer-events: none; animation: star-spin 60s linear infinite; }   /* Vishrut's rosette (redd.svg), 27 Sep, in yellow */
.details__title { margin: 0; font-family: var(--font-apm); font-weight: 400; color: #fff; }
.facts { margin: 0; }
.fact { display: grid; align-items: start; }
.fact__tile { grid-row: 1 / span 3; display: block; border-radius: var(--r-small); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }
.fact dt { font-family: var(--font-apm); font-weight: 400; color: var(--yellow); }   /* subheads in APM Rounded, content in Mulish (iteration 27 Sep) */.fact dd { margin: 0; }
.fact__value { font-family: var(--font-latin); font-weight: 700; color: #fff; }
.fact__value a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.fact__value a:hover { color: var(--yellow); }
.fact__note { font-family: var(--font-latin); font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.details__actions { display: flex; }
.btn-pill { display: inline-flex; align-items: center; border-radius: 999px; font-family: var(--font-apm); text-decoration: none; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s; }
.btn-pill--yellow { background: var(--yellow); color: var(--ink); border: 2px solid var(--yellow); }
.btn-pill--yellow:hover { background: #fff; border-color: #fff; }
.btn-pill:focus-visible, .btn-send:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.interest { position: absolute; background: #fff; color: var(--ink); box-shadow: var(--shadow-big); }
.interest__title { margin: 0; font-family: var(--font-apm); font-weight: 400; color: var(--ink); }
.interest__intro, .interest__note { margin: 0; font-family: var(--font-latin); color: var(--body); }
.interest__grid { display: grid; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-family: var(--font-latin); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }
.field__label em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--body); }
.field input, .field select, .field textarea { width: 100%; font-family: var(--font-latin); font-weight: 600; color: var(--ink); background: #F7F8F5;
  border: 1.5px solid #D3D9D4; border-radius: var(--r-small); }
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8A958F; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(240, 212, 0, 0.55); }
.field [aria-invalid="true"] { border-color: var(--red); }
.interest__error { margin: 0; color: var(--red); font-family: var(--font-latin); font-weight: 700; }
.btn-send { display: inline-flex; align-items: center; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--font-apm); cursor: pointer; transition: background 0.2s; }
.btn-send:hover { background: #0B3A44; }
.btn-send__arrow { display: inline-grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--ink); font-family: var(--font-latin); font-weight: 800; }   /* yellow, like the rosette (27 Sep) */
.details__map { position: absolute; overflow: hidden; background: #2A3A3F; }
.details__map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05) brightness(0.95); }
.details__pin { position: absolute; margin: 0; background: var(--ink-57); color: #fff; font-family: var(--font-apm); border-radius: 999px; }

/* Smooth scroll (Lenis 1.3.26, iteration 27 Sep): its own recommended rules, plus native smooth scrolling off while it
   runs (the two would fight). Frames ignore the pointer while it's on, so the map no longer catches the wheel. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Entrance choreography (iteration 27 Sep, app.js §11). Stars and flowers sprout through `scale` (their turn is a CSS
   animation on `transform`, so the growth rides the separate property, driven by --grow); the sign-off's letters rise
   out of the page's bottom edge (its line box clips them); the ticker hands its loop to GSAP so it can quicken with
   the scroll. Split lines keep justified text justified (app.js sets text-align-last per line). */
.star, .grow__star, .emerge__flower, .details__flower { scale: var(--grow, 1); }
.foot__mark { overflow: clip; }   /* its line box clips the letters while they rise (the ink sits inside it) */
.ticker--js .ticker__track { animation: none; }

/* Language (iteration 27 Sep, app.js §0). The globe sits at the pill's right end; its menu drops below it, a surface
   (--r-big) with pill-shaped options. Korean text (html[lang="ko"]): body copy in Noto Sans KR — Mulish has no Hangul —
   at 500, which reads better than 700 in Hangul at these sizes; lines break between words (keep-all), as Korean is set;
   no tracking on the small caps labels. A switch dims the page for a moment while its words change. */
.lang { position: relative; flex: none; }
.lang__btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--ink); cursor: pointer; transition: background 0.2s; }
.lang__btn:hover, .lang__btn[aria-expanded="true"] { background: rgb(0 29 37 / 0.07); }
.lang__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lang__btn svg { width: 62%; height: 62%; }
.lang__menu { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); z-index: 1; min-width: 168px; margin: 0; padding: 8px; list-style: none;
  background: #fff; border-radius: var(--r-big); box-shadow: var(--shadow-big); }
.lang__menu[hidden] { display: none; }
.lang__menu button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 16px; border: 0;
  border-radius: 999px; background: none; font: 700 15px/1.2 var(--font-latin); color: var(--ink); cursor: pointer; text-align: left; }
.lang__menu button[lang="ko"] { font-family: "Noto Sans KR", sans-serif; }
.lang__menu button:hover, .lang__menu button:focus-visible { background: rgb(0 29 37 / 0.06); outline: none; }
.lang__menu button[aria-checked="true"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); }
:root:lang(ko) { --font-latin: "Noto Sans KR", Mulish, system-ui, -apple-system, "Segoe UI", sans-serif; }
:lang(ko) body { word-break: keep-all; }
:lang(ko) .body, :lang(ko) .interest__intro, :lang(ko) .fact__value, :lang(ko) .fact__note, :lang(ko) .gallery2__cap { font-weight: 500; }
:lang(ko) .field__label { letter-spacing: 0; text-transform: none; }   /* capitals would turn IofC into IOFC */
main { transition: opacity 0.18s ease; }
.lang-swap main { opacity: 0.12; }
.split--static .ch { animation: none; }   /* the hero tagline rebuilt by a language switch doesn't rise again */

/* Intro (iteration 27 Sep): a white sheet over everything with the gathering-mark animation at its centre; the box is
   1/φ of the screen's smaller side (the animation is square), so screen : animation is the golden ratio everywhere.
   When the animation ends the sheet slides up like a curtain. While it's down the page doesn't scroll and the hero's
   entrance waits (html.intro-hold, lifted 0.3 s into the curtain). Set up by the <head> script on fresh visits only. */
.intro { display: none; }
.intro-on { overflow: hidden; }
.intro-on .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #fff;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1); will-change: transform; }
.intro.is-up { transform: translateY(-100%); }
.intro__anim { width: calc(min(100vw, 100vh) / 1.618034); aspect-ratio: 1; }
.intro__anim svg { display: block; }
.intro-hold .hero__title path, .intro-hold .hero__ko .ch, .intro-hold .hero__tagline .ch { animation-play-state: paused; }

/* Sign-off (iteration 27 Sep): the Korean name small and centred, the Latin name stretched across the window below it
   (inside a gutter), the whole word fading steadily through the five tile colours (yellow, blue, leaf, red, then white
   in the ink tile's place, since it sits on section 9's ink: the order of the facts above).
   Sizes come from the footer's own width (container units): "ASIA PACIFIC MOKKOJI" in APM Rounded is 11.745 em of
   advance and 11.677 em of ink, starting 0.0078 em in, so at 100cqw / 11.677 its ink is exactly the width (the -0.0078em
   margin puts it flush). The Korean line keeps its earlier proportion to the Latin (24 : 128.8); the gap under it and
   the space below the Latin keep theirs too (28 and 72 : 128.8), measured from the Korean ink foot to the Latin cap
   top (0.04 em under its line top) and from the Latin baseline (0.79 em) */
.foot { position: relative; container-type: inline-size; padding: 40px 10px 0; text-align: center; }   /* 10 px sides: the name's ink sits 10 px from the window's edges at every width */
.foot__ko { margin: 0; font-family: var(--font-apm); font-weight: 400; line-height: 1; color: #fff; font-size: max(13px, calc(100cqw / 11.677 * 0.18634)); }
.foot__mark { margin: 0.1383em 0 calc(10px - 0.21em) -0.0078em; font-family: var(--font-apm);   /* bottom: the baseline (0.79 of the 1 em line) 10 px above the page's end, like the sides; C, O, S overshoot 0.018 em into it */ font-weight: 400; line-height: 1; white-space: nowrap; text-align: left; color: #fff;
  font-size: calc(100cqw / 11.677); animation: fill-cycle 15s ease-in-out infinite; }
@keyframes fill-cycle {
  0%, 100% { color: var(--yellow); }
  20% { color: var(--blue); }
  40% { color: var(--leaf); }
  60% { color: var(--red); }
  80% { color: #fff; }
}

.band, .insp { position: relative; overflow: hidden; background: var(--ink); }
.band__stage, .insp__stage { position: absolute; top: 0; bottom: 0; }
.band__photo, .insp__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.band__ribbon, .insp__ribbon { position: absolute; max-width: none; pointer-events: none; }

.need { position: relative; background: var(--section-blue); overflow: hidden; }
.what { position: relative; background: var(--white); }

.card-ink { position: relative; overflow: hidden; background: var(--ink); border-radius: var(--r-small); box-shadow: var(--shadow-small); }
.card-ink__photo { width: 100%; object-fit: cover; object-position: 50% 50%; }
.card-ink__maze { position: absolute; color: #fff; opacity: 0.07; }
.card-ink__caption {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; font-family: var(--font-display); font-weight: 400; line-height: 1.255;
}

.strip { background: var(--white); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.strip__row { display: flex; flex: none; }
.tile { display: block; flex: none; }

/* Medallion: each ring = peel (scale/opacity) around spin (rotation), CLAUDE.md §14 */
.medallion { position: relative; background: var(--white); }
.medallion__frame { position: relative; overflow: hidden; }
.m-part, .m-zoom__bloom, .m-zoom__brush { position: absolute; }
.m-peel, .m-spin { width: 100%; height: 100%; }
.m-part img, .m-zoom img { width: 100%; height: 100%; max-width: none; }
.m-zoom { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.m-zoom__bloom { transform-origin: 50% 50%; }
.m-zoom__brush {
  -webkit-mask: linear-gradient(100deg, #000 45%, transparent 55%) 100% 0 / 250% 100% no-repeat;
          mask: linear-gradient(100deg, #000 45%, transparent 55%) 100% 0 / 250% 100% no-repeat;
}
/* rest: slow counter-rotation */
.m-part--A .m-spin { animation: m-spin 140s linear infinite; }
.m-part--P .m-spin { animation: m-spin-rev 110s linear infinite; }
.m-part--M .m-spin { animation: m-spin 80s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-spin-rev { to { transform: rotate(-360deg); } }
/* the push-in, once (5.2 s): A slides out of frame, then P, then M; the bloom fills the frame; the brush draws; settle */
.is-playing .m-part--A .m-peel { animation: m-peel-a 5.2s linear forwards; }
.is-playing .m-part--P .m-peel { animation: m-peel-p 5.2s linear forwards; }
.is-playing .m-part--M .m-peel { animation: m-peel-m 5.2s linear forwards; }
.is-playing .m-part--circle .m-peel, .is-playing .m-part--bloom .m-peel, .is-playing .m-part--brush .m-peel { animation: m-rest-hide 5.2s linear forwards; }
.is-playing .m-zoom { animation: m-zoom-layer 5.2s linear forwards; }
.is-playing .m-zoom__bloom { animation: m-zoom-bloom 5.2s linear forwards; }
.is-playing .m-zoom__brush { animation: m-zoom-brush 5.2s linear forwards; }
@keyframes m-peel-a {
  0% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
  21% { transform: scale(2.6); opacity: 0; }
  21.1% { transform: scale(1); opacity: 0; }
  88% { transform: scale(1); opacity: 0; animation-timing-function: ease-out; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes m-peel-p {
  0%, 10.5% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
  31.5% { transform: scale(2.6); opacity: 0; }
  31.6% { transform: scale(1); opacity: 0; }
  88% { transform: scale(1); opacity: 0; animation-timing-function: ease-out; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes m-peel-m {
  0%, 21% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
  42% { transform: scale(2.6); opacity: 0; }
  42.1% { transform: scale(1); opacity: 0; }
  88% { transform: scale(1); opacity: 0; animation-timing-function: ease-out; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes m-rest-hide {
  0%, 33% { opacity: 1; }
  40%, 88% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes m-zoom-layer {
  0%, 32.5% { opacity: 0; }
  33%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes m-zoom-bloom {
  0%, 33% { transform: scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.3); }
  62%, 100% { transform: scale(20); }
}
@keyframes m-zoom-brush {
  0%, 62% { -webkit-mask-position: 100% 0; mask-position: 100% 0; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  82%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
.is-done .m-peel, .is-done .m-zoom, .is-done .m-zoom__bloom, .is-done .m-zoom__brush { animation: none; }

/* Top bar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--white); box-shadow: var(--shadow-small);
  transform: translateY(-100%); visibility: hidden;
  transition: transform 0.24s ease-out, visibility 0s linear 0.24s;
}
.topbar.is-visible { transform: none; visibility: visible; transition: transform 0.24s ease-out, visibility 0s; }
.topbar__in { height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.topbar__brand { display: inline-flex; align-items: center; font-family: var(--font-apm); font-weight: 400; line-height: 1; color: var(--ink); text-decoration: none; }
.topbar__mark { display: block; flex: none; }
.topbar__nav { display: flex; align-items: center; }
.topbar__nav a { font-weight: 700; color: var(--body); text-decoration: none; }
.topbar__nav a:hover { text-decoration: underline; }
.topbar__pill {
  display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff !important;
  border-radius: var(--r-small); box-shadow: var(--shadow-small); font-family: var(--font-display); font-weight: 400 !important;
  text-decoration: none !important; transition: background 0.2s, color 0.2s;
}
.topbar__pill:hover { background: var(--leaf); color: var(--ink) !important; }

/* Footer */
.footer { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.footer__maze { position: absolute; color: #fff; opacity: 0.05; pointer-events: none; }
.footer__in { position: relative; }
.footer__signoff { text-align: center; }
.footer__l1 { font-family: var(--font-display); font-weight: 400; line-height: 1.255; }
.footer__l2 { font-weight: 800; color: var(--leaf); }
.footer__l3 { font-weight: 700; }
.dot { color: var(--yellow); }
.footer__facts { text-align: center; }
.footer__when { opacity: 0.8; }
.footer__mail a { color: var(--leaf); font-weight: 700; text-decoration: none; }
.footer__mail a:hover { text-decoration: underline; }

/* ---- Extension blocks 06–14 (CONTENT-PLAN §06–§14), composed from the devices above ---- */
.ground--maze { position: absolute; color: var(--ink); opacity: 0.08; pointer-events: none; }   /* the hero's maze recipe on the green grounds */
.hl--blue { color: var(--blue); }
.body p + ul, .body ul + p { margin-top: calc(var(--lh-body) * 1em); }
.take__body li + li { margin-top: calc(var(--lh-body) * 1em); }
.why, .reg { position: relative; background: var(--core); overflow: hidden; }
.vision { position: relative; background: var(--section-blue); overflow: hidden; }
.xp, .take, .seeds { position: relative; background: var(--white); }

/* 07: white card, colourway panel on top (the banner/badge vocabulary), description below */
.xp-card { position: relative; overflow: hidden; background: var(--white); border-radius: var(--r-small); box-shadow: var(--shadow-small); }
.xp-card__panel { position: relative; overflow: hidden; }
.xp-card--ink .xp-card__panel { background: var(--ink); }
.xp-card--leaf .xp-card__panel { background: var(--leaf); }
.xp-card--blue .xp-card__panel { background: var(--blue); }
.xp-card--mint .xp-card__panel { background: var(--mint); }
.xp-card--red .xp-card__panel { background: var(--red); }
.xp-card--yellow .xp-card__panel { background: var(--yellow); }
.xp-card__pattern { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: #fff; opacity: 0.12; }   /* petals, white on blue / leaf */
.xp-card__pattern--maze { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.xp-card--ink .xp-card__pattern { opacity: 0.08; }                                                                                   /* maze, white on ink */
.xp-card--red .xp-card__pattern, .xp-card--mint .xp-card__pattern, .xp-card--yellow .xp-card__pattern { color: var(--ink); opacity: 0.05; }   /* ink on the light grounds */
.xp-card__arc { position: absolute; left: 0; top: 0; pointer-events: none; }
.xp-card__title { position: absolute; margin: 0; color: #fff; font-family: var(--font-display); font-weight: 400; line-height: 1.255; }
.xp-card--mint .xp-card__title, .xp-card--yellow .xp-card__title { color: var(--ink); }
.xp-card__desc { font-weight: 700; color: var(--body); line-height: 1.35; }
.xp-card:nth-child(2), .cards--seeds .card-ink:nth-child(2) { --i: 1; }
.xp-card:nth-child(3), .cards--seeds .card-ink:nth-child(3) { --i: 2; }
.xp-card:nth-child(4), .cards--seeds .card-ink:nth-child(4) { --i: 3; }
.xp-card:nth-child(5), .cards--seeds .card-ink:nth-child(5) { --i: 4; }
.xp-card:nth-child(6) { --i: 5; }

/* 08 / 09 / 12: full-bleed painterly photos with 57 % ink boxes */
.seeds__photo { position: relative; overflow: hidden; background: var(--ink); }
.seeds__img, .who__photo, .rband__photo { width: 100%; height: 100%; object-fit: cover; }
.seeds__img { object-position: 50% 40%; }
.card-ink__letter { position: absolute; font-family: var(--font-display); font-weight: 400; line-height: 1; }
.who { position: relative; }
.who__band { position: relative; overflow: hidden; background: var(--ink); }
.who__photo { object-position: 50% 50%; }
.rband { position: relative; overflow: hidden; background: var(--ink); }
.rband__photo { object-position: 50% 60%; }

/* 13: the decision card's own lines, buttons and the link/QR placeholder */
.reg__date { font-weight: 800; color: var(--ink); }
.reg__fee { font-family: var(--font-display); font-weight: 400; color: var(--ink); line-height: 1.255; }
.reg__actions { display: flex; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: var(--r-small); transition: background 0.2s, color 0.2s; }
.btn--primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-small); font-family: var(--font-display); font-weight: 400; }
.btn--primary:hover { background: var(--leaf); color: var(--ink); }
.btn--secondary { border: 2px solid var(--ink); color: var(--ink); font-weight: 700; }
.btn--secondary:hover { text-decoration: underline; }
.reg__slot { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px dashed rgb(0 29 37 / 0.35); border-radius: var(--r-small); color: var(--grey); font-weight: 700; line-height: 1.35; }
.reg__slot small { display: block; font-weight: 400; font-size: 0.85em; margin-top: 0.5em; }

/* reveal: the one motion recipe (opacity 0→1, translateY 16→0, 240 ms) on cards and tags entering the viewport; app.js adds .is-in */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.24s ease-out, transform 0.24s ease-out; transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ===================== 4. Desktop artboard (≥ 901 px) ===================== */
@media (min-width: 901px) {
  .ab { position: relative; width: calc(1728 * var(--u)); left: 50%; transform: translateX(-50%); }   /* centred even when 100vw includes a scrollbar */

  /* Full-width sections, content in the page column (iteration 27 Sep): every section's ground, colour and pattern runs
     to the window's edges; its artboard (.ab, 1728u = --page) stays centred.
     The curtain boxes reach a stage-height past their slots, behind their neighbours; their photo always covers the slot,
     so on desktop they carry no ink of their own (it showed as a dark hairline where two neighbours meet mid-pixel), and
     the neighbours that meet over a parked photo overlap by 1 px so no seam lets it through. */
  .band, .insp2, .gather { background: none; }
  .what2, .emerge, .invite { margin-top: -1px; }

  /* --- top bar --- */
  .topbar { height: calc(52 * var(--u)); }   /* was 64: thinner (iteration 27 Sep) */
  .topbar__in { width: calc(1728 * var(--u)); padding: 0 calc(112 * var(--u)); }
  .topbar__brand { gap: calc(10 * var(--u)); font-size: max(14px, calc(16 * var(--u))); }
  .topbar__mark { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
  .topbar__nav { gap: calc(32 * var(--u)); }
  .topbar__nav a { font-size: max(14px, calc(16 * var(--u))); }
  .topbar__pill { height: calc(34 * var(--u)); min-width: calc(120 * var(--u)); padding: 0 calc(20 * var(--u)); font-size: max(14px, calc(16 * var(--u))); }
  /* floating pill (iteration 26 Sep): the bar hugs its content, centred, 20u below the top; "APM" in APM Rounded.
     Solid white again (27 Sep: the frosted-glass try is dropped; the thinner size stays) */
  .topbar { top: calc(20 * var(--u)); left: 50%; right: auto; width: max-content; border-radius: 999px; transform: translate(-50%, calc(-100% - 40px)); }
  .topbar.is-visible { transform: translate(-50%, 0); }
  .topbar__in { width: auto; gap: calc(64 * var(--u)); padding: 0 calc(9 * var(--u)) 0 calc(26 * var(--u)); }   /* right = the pill's own top/bottom gap */
  .topbar__brand { font-size: calc(27 * var(--u)); }
  .lang { margin-right: calc(-12 * var(--u)); }   /* between the hamburger and Register, a little nearer Register */
  .lang__btn { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .lang__menu { top: calc(100% + 18 * var(--u)); }
  .topbar__pill { border-radius: 999px; }

  /* --- 01 hero (Block 1, 1117 tall) --- */
  .hero .ab { height: calc(1117 * var(--u)); }
  /* The wide maze (#p-maze-wide, -1200..3600 in #p-maze's units) keeps the lattice exactly where #p-maze had it: symbol
     origin at the artboard's (-855, 804), turned -45°; the box's corner, symbol (-1200, -1200), sits 2400 × 0.7071 =
     1697.06 further left. Anchored to the artboard (50% - 864u), so it covers full-width sections on both sides. */
  .hero__maze, .what2__maze, .details__maze {
    left: calc(50% - 3416.06 * var(--u)); top: calc(804 * var(--u));
    width: calc(4800 * var(--u)); height: calc(4800 * var(--u));
    transform-origin: 0 0; transform: rotate(-45deg);
  }
  .hero__card {
    position: absolute; left: calc(112 * var(--u)); top: calc(101 * var(--u));
    width: calc(1504 * var(--u)); height: calc(914 * var(--u));
  }
  .hero__lockups { display: contents; }
  .hero .lockup { position: absolute; width: calc(232 * var(--u)); height: calc(64 * var(--u)); }
  .hero .lockup--ap { left: calc(52 * var(--u)); top: calc(52 * var(--u)); }
  .hero .lockup--kr { left: calc(1228 * var(--u)); top: calc(30 * var(--u)); }
  .lockup__mark { width: calc(39.34 * var(--u)); height: calc(39.35 * var(--u)); }
  .lockup__text { left: calc(48 * var(--u)); top: calc(-4 * var(--u)); }
  .lockup--kr .lockup__mark { top: calc(21 * var(--u)); }
  .lockup--kr .lockup__text { left: calc(44 * var(--u)); top: calc(16 * var(--u)); }
  .lockup__name { font-size: calc(18.5 * var(--u)); }
  .lockup__sub { font-size: calc(14.65 * var(--u)); }
  .lockup__sub--ko { font-size: calc(17.33 * var(--u)); }
  .lockup__country { font-size: calc(15 * var(--u)); }

  .hero__stage { display: contents; }
  .hero__star { left: calc(456 * var(--u)); top: calc(117 * var(--u)); width: calc(618 * var(--u)); height: calc(618 * var(--u)); }
  .hero__photo { left: calc(-160 * var(--u)); top: calc(-141 * var(--u)); width: calc(984 * var(--u)); height: calc(984 * var(--u)); }   /* crop matched to ref-01 by eye */
  .hero__band { top: calc(369 * var(--u)); height: calc(115 * var(--u)); }
  .hero__title { left: calc(367 * var(--u)); top: calc(33 * var(--u)); width: calc(770 * var(--u)); height: calc(52.1 * var(--u)); }
  .hero__ko { left: calc(629.5 * var(--u)); top: calc(484 * var(--u)); width: calc(244.7 * var(--u)); height: calc(56.5 * var(--u)); font-size: calc(20 * var(--u)); }
  .hero__tagline { position: absolute; left: calc(539.5 * var(--u)); top: calc(780 * var(--u)); width: calc(425 * var(--u)); font-size: calc(30.56 * var(--u)); }

  /* --- 02 photo band (Block 2, 948 tall, full bleed) --- */
  .band { height: calc(948 * var(--b)); }
  .band__stage { left: 0; width: 100%; }
  .band__ribbon { left: 0; top: calc(2 * var(--b)); width: calc(1731.8 * var(--b)); height: calc(944.096 * var(--b)); }
  .band__date {
    top: calc(47 * var(--u)); width: calc(490 * var(--u)); height: calc(174 * var(--u));
    padding: calc(14 * var(--u)) 0 0 calc(24 * var(--u)); font-size: calc(64 * var(--u));
  }
  .band__place {
    bottom: calc(54 * var(--u)); width: calc(630 * var(--u)); height: calc(174 * var(--u));
    padding: calc(7 * var(--u)) 0 0 calc(109 * var(--u)); font-size: calc(64 * var(--u));
  }

  /* 02 rebuilt from Figma "Frame 122" (iteration 27 Sep): the whole composition (photo, ribbon, date, place) holds
     still while the page moves over it. The stage is sticky to the top and bottom of the viewport inside a band whose
     box reaches one band-height above and below its slot (::before/::after, cancelled by negative margins): it rests
     at the bottom while the hero slides up off it, then at the top while "Need" slides up over it. */
  /* Revised (iteration 27 Sep): full bleed, and the stage is exactly one window tall. Figma's 1728 × 948 frame is scaled
     to cover it (--s) and centred (--fx, --fy ≤ 0): a stage shorter than the window made the photo drag between its two
     rests, a taller one never showed its foot. The date and place boxes keep to the stage's corners at the scale that
     fits (--s0). The side margins take the section out of the page column to the window's edges. */
  .band { --s: max(100vw / 1728, 100vh / 948); --s0: min(100vw / 1728, 100vh / 948);
    --fx: calc((100vw - 1728 * var(--s)) / 2); --fy: calc((100vh - 948 * var(--s)) / 2);
    height: auto; overflow: visible; margin: -100vh calc(50% - 50vw); z-index: 0; }
  .band::before, .band::after { content: ""; display: block; height: 100vh; }
  .hero, .need { z-index: 1; }
  .band__win { position: absolute; left: 0; right: 0; top: 100vh; height: 100vh; pointer-events: none; }
  .band__stage { position: sticky; top: 0; bottom: 0; width: 100%; height: 100vh; overflow: hidden; }
  .band__photo { position: absolute; left: calc(var(--fx) - 0.27 * var(--s)); top: calc(var(--fy) - 103.98 * var(--s)); width: calc(1729.475 * var(--s)); height: calc(1152.98 * var(--s)); max-width: none; }
  .band__ribbon { left: calc(var(--fx) - 2.42 * var(--s)); top: var(--fy); width: calc(1731.8 * var(--s)); height: calc(944.096 * var(--s)); }
  .band__date, .band__place { font-family: var(--font-apm); line-height: normal; font-size: calc(64 * var(--s0)); }
  .band__date { top: calc(45.5 * var(--s0)); width: calc(490 * var(--s0)); height: calc(173.93 * var(--s0)); padding: calc(13.93 * var(--s0)) calc(112.53 * var(--s0)) 0 0; text-align: right; }
  .band__place { top: auto; bottom: calc(55.42 * var(--s0)); width: calc(631.17 * var(--s0)); height: calc(173.93 * var(--s0)); padding: calc(6.96 * var(--s0)) 0 0 calc(109.03 * var(--s0)); }

  /* --- 03 need (Block 3, 1030 tall) --- */
  .need .ab { height: calc(1030 * var(--u)); }
  .ground__rect { transform: scale(var(--u)); }
  .card--need { position: absolute; left: calc(112 * var(--u)); top: calc(101 * var(--u)); width: calc(1504 * var(--u)); height: calc(828 * var(--u)); }
  .need__label { position: absolute; left: calc(155 * var(--u)); top: calc(157 * var(--u)); }
  .label { font-size: calc(23.18 * var(--u)); }
  .body { font-size: calc(24 * var(--u)); line-height: var(--lh-body); text-align: justify; }
  .body p + p { margin-top: calc(var(--lh-body) * 1em); }
  .need__body { position: absolute; left: calc(390 * var(--u)); top: calc(150 * var(--u)); width: calc(500 * var(--u)); }
  .tag { font-size: calc(23.18 * var(--u)); }
  .tag__rect { transform: scale(var(--u)); }
  .need__tag { position: absolute; left: calc(1324 * var(--u)); top: calc(841 * var(--u)); width: calc(375 * var(--u)); height: calc(153 * var(--u)); padding-left: calc(62 * var(--u)); }
  /* 03 rebuilt from Figma frame 197:12366 (iteration 27 Sep): new copy on Figma's grid (column at 562.35 from the
     card's left edge, 500.45 wide, 30u lines), the label placed by its ink box, the ground as drawn, four stars */
  .need__ground { position: absolute; left: calc(-3000 * var(--u)); top: 0; width: calc(7728 * var(--u)); height: calc(2400 * var(--u)); pointer-events: none; }   /* one repeating Figma tile, edge to edge (2400 tall since 5 Oct, for the phone layout; the section clips it at 1030) */
  .card--need { overflow: hidden; }
  .need__label { left: calc(154 * var(--u)); top: calc(157 * var(--u)); margin: 0; font-size: calc(22.707 * var(--u)); line-height: 1; }
  .need__body { left: calc(562.35 * var(--u)); top: calc(150 * var(--u)); width: calc(500.45 * var(--u)); line-height: calc(30 * var(--u)); }
  .need__body p, .need__body p + p { margin: 0; }   /* beats the shared .body p + p gap */
  .need__body p.gap { margin-top: calc(30 * var(--u)); }
  .star { display: block; }
  .star--1 { left: calc(-264.23 * var(--u)); top: calc(504 * var(--u)); width: calc(587.95 * var(--u)); height: calc(587.95 * var(--u)); }
  .star--2 { left: calc(13.75 * var(--u)); top: calc(13.05 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
  .star--3 { left: calc(1269.15 * var(--u)); top: calc(-175.91 * var(--u)); width: calc(409.91 * var(--u)); height: calc(409.91 * var(--u)); }
  .star--4 { left: calc(1458.11 * var(--u)); top: calc(13.05 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); }

  /* --- 04 What is Asia Pacific Mokkoji — Figma "Frame 123" (203:17080), iteration 27 Sep. Frame x + 0.43 = artboard x --- */
  .what2 { position: relative; z-index: 1; background: var(--white); overflow: hidden; }   /* sits over the band's lower spacer */
  .what2 .ab { height: calc(1303 * var(--u)); }
  .what2__maze { position: absolute; color: #000; opacity: 0.02; pointer-events: none; }   /* placed with the hero's maze */
  .what2__band { position: absolute; left: 0; right: 0; top: calc(634.955 * var(--u)); height: calc(488.047 * var(--u)); background: var(--red); }
  .what2__ribbons { position: absolute; left: calc(0.43 * var(--u)); top: 0; width: calc(1722 * var(--u)); height: calc(1303 * var(--u)); pointer-events: none; }
  .what2__title { position: absolute; left: calc(915.13 * var(--u)); top: calc(181.93 * var(--u)); margin: 0; font-size: calc(22.004 * var(--u)); line-height: 1; color: var(--red); }
  .what2__body { position: absolute; top: calc(227.54 * var(--u)); width: calc(500.45 * var(--u)); line-height: calc(30 * var(--u)); }
  .what2__body p { margin: 0; }
  .what2__body--a { left: calc(915.415 * var(--u)); color: var(--ink); }
  .what2__body--b { left: calc(125.615 * var(--u)); top: calc(755.98 * var(--u)); color: #fff; }
  .gallery { left: calc(769.356 * var(--u)); top: calc(686.908 * var(--u)); width: calc(845.806 * var(--u)); height: calc(463.675 * var(--u)); border-radius: var(--r-big); }
  .gallery__btn { top: calc(388.532 * var(--u)); width: calc(47.562 * var(--u)); height: calc(47.562 * var(--u)); }
  .gallery__btn--prev { left: calc(21.317 * var(--u)); }
  .gallery__btn--next { left: calc(776.924 * var(--u)); }
  .gallery__cap { top: calc(412.313 * var(--u)); padding: calc(7 * var(--u)) calc(18 * var(--u)); font-size: calc(16 * var(--u)); }

  /* --- 05 "Small acts" — Figma "section 5" (210:17088), iteration 27 Sep: the section-2 treatment. The stage (photo,
     ribbon, statement) is sticky to the top and bottom of the viewport inside a box one stage-height taller at each end
     (::before/::after, cancelled by negative margins); section 4 paints over the upper spacer, section 6 over the lower
     one, which is capped at section 6's height (849u < 971.7b). Frame x + 1.45 = stage x. --- */
  /* Revised like section 2: one window tall, the 1728 × 971.699 frame scaled to cover (the photo fills the whole
     frame, the ribbon keeps its +1.45), the statement box on the stage's top-left at the scale that fits */
  .insp2 { --s: max(100vw / 1728, 100vh / 971.699); --s0: min(100vw / 1728, 100vh / 971.699);
    --fx: calc((100vw - 1728 * var(--s)) / 2); --fy: calc((100vh - 971.699 * var(--s)) / 2);
    z-index: 0; overflow: visible; margin: -100vh calc(50% - 50vw); }
  .insp2::before, .insp2::after { content: ""; display: block; height: 100vh; }   /* the lower spacer is no longer capped at section 6's height: section 7 covers the rest, and the cap made the photo drag at the end */
  .insp2__win { position: absolute; left: 0; right: 0; top: 100vh; height: 100vh; pointer-events: none; }
  .insp2__stage { position: sticky; top: 0; bottom: 0; width: 100%; height: 100vh; aspect-ratio: auto; }
  .insp2__photo { inset: auto; left: var(--fx); top: var(--fy); width: calc(1728 * var(--s)); height: calc(971.699 * var(--s)); max-width: none; }
  .insp2__ribbon { left: calc(var(--fx) + 1.45 * var(--s)); top: var(--fy); width: calc(1726.55 * var(--s)); height: calc(971.699 * var(--s)); }
  .insp2__text { top: calc(56.41 * var(--s0)); width: calc(622.46 * var(--s0)); height: calc(291.651 * var(--s0)); margin: 0;
    padding: calc(55.82 * var(--s0)) calc(28.37 * var(--s0)) 0 calc(31.58 * var(--s0)); border-radius: 0 var(--r-big) var(--r-big) 0;
    font-family: var(--font-apm); font-size: calc(36 * var(--s0)); line-height: calc(45 * var(--s0)); }

  /* --- 06 Experience Growth — Figma "Frame 125" (211:17089), iteration 27 Sep (frame x = artboard x) --- */
  .grow { z-index: 1; }   /* slides over section 5's photo */
  .grow .ab { height: calc(849 * var(--u)); }
  .grow__star { left: calc(557.36 * var(--u)); top: calc(-302.69 * var(--u)); width: calc(618.05 * var(--u)); height: calc(618.05 * var(--u)); }
  .grow__title { position: absolute; left: calc(602.57 * var(--u)); top: calc(402.95 * var(--u)); width: calc(522 * var(--u)); margin: 0;
    font-size: calc(24 * var(--u)); line-height: calc(29 * var(--u)); color: var(--yellow); white-space: nowrap; }
  .grow__body { position: absolute; left: calc(513.95 * var(--u)); top: calc(457.15 * var(--u)); width: calc(699.23 * var(--u)); line-height: calc(30 * var(--u)); color: var(--ink); }
  .grow__body p { margin: 0; }
  .ticker { position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: calc(761 * var(--u)); height: calc(88 * var(--u)); }
  .ticker__track { position: absolute; top: 0; bottom: 0; left: calc(50% - 864 * var(--u) - 262 * var(--u)); }   /* "Take" starts at Figma's x -192.4 */
  .ticker__seq li { font-size: calc(32 * var(--u)); line-height: calc(40 * var(--u)); }
  .ticker__seq li::before { margin: 0 calc(30 * var(--u)); }

  /* --- 07 What Might Emerge — Figma "Frame 126" (211:17090), iteration 27 Sep (frame x = artboard x) --- */
  .emerge .ab { height: calc(923 * var(--u)); }
  .emerge__flower--big { left: calc(6.84 * var(--u)); top: calc(584.49 * var(--u)); width: calc(206.79 * var(--u)); height: calc(206.79 * var(--u)); }
  .emerge__flower--small { left: calc(1065.5 * var(--u)); top: calc(99.58 * var(--u)); width: calc(90.69 * var(--u)); height: calc(90.69 * var(--u)); }
  .gallery2 { left: calc(105.19 * var(--u)); top: calc(140.02 * var(--u)); width: calc(1038.38 * var(--u)); height: calc(612.87 * var(--u)); }
  .gallery2__frame { left: 0; top: 0; width: calc(1007.94 * var(--u)); height: calc(552.56 * var(--u)); border-radius: var(--r-big); }
  .gallery2__box { left: calc(62.38 * var(--u)); top: calc(499.87 * var(--u)); width: calc(976 * var(--u)); height: calc(113 * var(--u)); border-radius: var(--r-big); }
  .gallery2__cap { padding: 0 calc(40 * var(--u)); font-size: calc(23.1793 * var(--u)); line-height: calc(29 * var(--u)); }
  .gallery2 .gallery__btn { top: calc(238.78 * var(--u)); width: calc(47.562 * var(--u)); height: calc(47.562 * var(--u)); }
  .gallery2 .gallery__btn--prev { left: calc(20.49 * var(--u)); }
  .gallery2 .gallery__btn--next { left: calc(941.54 * var(--u)); }
  .emerge__title { position: absolute; left: calc(1210.03 * var(--u)); top: calc(230.81 * var(--u)); width: calc(256 * var(--u)); margin: 0;
    font-size: calc(24 * var(--u)); line-height: calc(29 * var(--u)); color: var(--yellow); white-space: nowrap; }
  .emerge__body { position: absolute; left: calc(1210.025 * var(--u)); top: calc(334.36 * var(--u)); width: calc(401.99 * var(--u)); line-height: calc(30 * var(--u)); color: var(--ink); }
  .emerge__body p { margin: 0; }
  /* Korean (1 Oct; 3 Oct a size more and aligned): the four section headings at 1.5x. In Hangul the display face reads
     small at body size (the Korean review asked for headings bigger than the text); English keeps the composition's sizes.
     Each keeps about the English gap to its text: the need label centres on the first line of its paragraph, the what-is
     and growth titles move up by what they grew, and the growth title centres over its paragraph (its box was the width
     of the English line) */
  :lang(ko) .need__label { top: calc((165 - 22.707 * 1.5 / 2) * var(--u)); font-size: calc(22.707 * 1.5 * var(--u)); }
  :lang(ko) .what2__title { top: calc((227.54 - 22.004 * 1.5 - 22) * var(--u)); font-size: calc(22.004 * 1.5 * var(--u)); }
  :lang(ko) .grow__title { left: calc(513.95 * var(--u)); top: calc((457.15 - 24 * 1.5 * 1.1 - 24) * var(--u)); width: calc(699.23 * var(--u)); text-align: center; }
  :lang(ko) .grow__title, :lang(ko) .emerge__title { font-size: calc(24 * 1.5 * var(--u)); line-height: calc(24 * 1.5 * 1.1 * var(--u)); }

  /* --- 08 The invitation — Figma "MacBook Pro 16" - 6" (198:14087), iteration 27 Sep --- */
  .invite { z-index: 1; }
  .invite .ab { height: calc(581 * var(--u)); }
  .invite__ground { position: absolute; left: calc(-3000 * var(--u)); top: 0; width: calc(7728 * var(--u)); height: calc(700 * var(--u)); pointer-events: none; }   /* 700 tall since 5 Oct (phones); clipped at 581 */
  .hl--m { color: inherit; font-weight: inherit; }   /* a highlight of the phone layout only (5 Oct) */
  .card--invite { position: absolute; left: calc(112 * var(--u)); top: calc(101.04 * var(--u)); width: calc(1504 * var(--u)); height: calc(379 * var(--u)); overflow: hidden; }
  .invite__text { position: absolute; left: calc(471.145 * var(--u)); top: calc(150 * var(--u)); width: calc(539.71 * var(--u)); margin: 0;
    font-family: var(--font-apm); font-weight: 400; font-size: calc(24 * var(--u)); line-height: calc(30 * var(--u)); text-align: justify; color: #027E30; }
  .star--i1 { left: calc(-146.99 * var(--u)); top: calc(193.51 * var(--u)); width: calc(332.47 * var(--u)); height: calc(332.47 * var(--u)); }
  .star--i2 { left: calc(13.75 * var(--u)); top: calc(13.05 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
  .star--i3 { left: calc(1223.72 * var(--u)); top: calc(-175.91 * var(--u)); width: calc(455.34 * var(--u)); height: calc(455.34 * var(--u)); }
  .star--i4 { left: calc(1458.11 * var(--u)); top: calc(13.05 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); }

  /* --- 08b The gathering — Figma "Frame 127" (218:17193), iteration 27 Sep: the section-2 treatment. The stage (painting,
     ribbon) is sticky to the top and bottom of the viewport inside a box one stage-height taller at each end
     (::before/::after, cancelled by negative margins). Section 8 is shorter than the stage, so section 7 joins it on
     z-index 1 to cover the upper spacer; section 9 covers the lower one. Frame x = stage x. --- */
  .emerge { z-index: 1; }
  /* Revised like section 2: one window tall, the frame (1724 × 979 at x 0 of a 1728 page) scaled to cover and centred */
  .gather { --s: max(100vw / 1728, 100vh / 979); --fx: calc((100vw - 1728 * var(--s)) / 2); --fy: calc((100vh - 979 * var(--s)) / 2);
    z-index: 0; overflow: visible; margin: -100vh calc(50% - 50vw); }
  .gather::before, .gather::after { content: ""; display: block; height: 100vh; }   /* no cap needed: main clips at the page's end (below) */
  main { overflow: clip; }   /* clip, not hidden: no scroll box, so the sticky stages still follow the window; nothing reaches past the last section */
  .gather__win { position: absolute; left: 0; right: 0; top: 100vh; height: 100vh; pointer-events: none; }
  .gather__stage { position: sticky; top: 0; bottom: 0; width: 100%; height: 100vh; aspect-ratio: auto; }
  .gather__photo { left: calc(var(--fx) - 7.648 * var(--s)); top: var(--fy); width: calc(1739.29 * var(--s)); height: calc(979 * var(--s)); }
  .gather__ribbon { left: var(--fx); top: var(--fy); width: calc(1724 * var(--s)); height: calc(979 * var(--s)); }

  /* --- nav: hamburger that unfolds (iteration 27 Sep). Always on screen now, so "Intro" can be underlined over the hero --- */
  .topbar, .topbar.is-visible { transform: translate(-50%, 0); visibility: visible; }
  .topbar__in { position: relative; gap: calc(28 * var(--u)); }
  .topbar__burger { width: calc(40 * var(--u)); height: calc(34 * var(--u)); }
  .topbar__menu { gap: calc(36 * var(--u)); margin: 0 calc(-14 * var(--u)); }       /* shut: cancels one of the two gaps it sits between */
  .topbar.is-open .topbar__menu { margin: 0 calc(22 * var(--u)); }
  .topbar.is-open .topbar__burger { width: 0; margin: 0 calc(-14 * var(--u)); }       /* open: the burger's slot closes */
  .topbar__menu a { font-size: max(14px, calc(17 * var(--u))); padding: calc(8 * var(--u)) 0; }

  /* --- 09 Event details (designed 27 Sep in the identity-v2 language) --- */
  .details { z-index: 1; }
  .details .ab { height: calc(1398 * var(--u)); }   /* was 1470; the sign-off follows inside the section, its Korean ink 72 into it, so 120 below the map as the map is below the card */
  .details__flower { left: calc(1536 * var(--u)); top: calc(48 * var(--u)); width: calc(160 * var(--u)); height: calc(160 * var(--u)); }
  /* Alignment (iteration 27 Sep): the title's ink starts on the 112 line with the tiles and the map ("E" has a 60-unit
     side bearing), and its cap top is level with the card's top (cap top = 9.06u into its 77u line box). A subhead
     line (29) and a value line (5 + 30) together are the tile's height (64). The rows are spaced so the last fact's
     bottom lands on the card's bottom (889.25, measured): 268 + 380 of facts (64, 64, 94, 94, 64) + 4 × 60.31 of gaps.
     (Was 37.85 with the "Add to calendar" button below, removed 27 Sep.) (".fact .x": the base ".fact dd { margin: 0 }"
     outranked plain ".fact__value" and ate its margin.) */
  .details__title { position: absolute; left: calc(108.16 * var(--u)); top: calc(118.94 * var(--u)); font-size: calc(64 * var(--u)); line-height: calc(77 * var(--u)); }
  .facts { position: absolute; left: calc(112 * var(--u)); top: calc(268 * var(--u)); width: calc(660 * var(--u)); display: grid; row-gap: calc(60.3125 * var(--u)); }
  .fact { grid-template-columns: calc(64 * var(--u)) 1fr; column-gap: calc(24 * var(--u)); }
  .fact__tile { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
  .fact dt { font-size: calc(24 * var(--u)); line-height: calc(29 * var(--u)); }
  .fact .fact__value { margin-top: calc(5 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(30 * var(--u)); }
  .fact .fact__note { margin-top: calc(4 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); }
  .details__actions { position: absolute; left: calc(112 * var(--u)); top: calc(837.25 * var(--u)); gap: calc(16 * var(--u)); }
  .btn-pill { height: calc(52 * var(--u)); padding: 0 calc(26 * var(--u)); font-size: calc(18 * var(--u)); }
  .interest { left: calc(880 * var(--u)); top: calc(128 * var(--u)); width: calc(736 * var(--u)); height: calc(761.25 * var(--u)); padding: calc(48 * var(--u)); border-radius: var(--r-big); }   /* fixed height: bottom at 889.25 at every width (the fields' px borders grow it ~5u at 1440), level with the button */
  .interest__title { font-size: calc(32 * var(--u)); line-height: calc(40 * var(--u)); }
  .interest__intro { margin-top: calc(12 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(27 * var(--u)); font-weight: 700; }
  .interest__grid { margin-top: calc(28 * var(--u)); gap: calc(20 * var(--u)) calc(16 * var(--u)); }
  .field { gap: calc(8 * var(--u)); }
  .field__label { font-size: calc(13 * var(--u)); }
  .field input, .field select, .field textarea { font-size: calc(17 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); }
  .interest__error { min-height: calc(24 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(15 * var(--u)); }
  .btn-send { margin-top: calc(8 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(26 * var(--u)); gap: calc(16 * var(--u)); font-size: calc(18 * var(--u)); }
  .btn-send__arrow { width: calc(40 * var(--u)); height: calc(40 * var(--u)); font-size: calc(18 * var(--u)); }
  .interest__note { margin-top: calc(16 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .details__map { left: calc(112 * var(--u)); top: calc(1010 * var(--u)); width: calc(1504 * var(--u)); height: calc(340 * var(--u)); border-radius: var(--r-big); }
  .details__pin { left: calc(24 * var(--u)); bottom: calc(24 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)); font-size: calc(20 * var(--u)); }

  /* --- Sign-off (iteration 27 Sep), the foot of section 9: sizes in the base rules (container units); here only the
     space above it and the window-wide gutters --- */
  .foot { padding: calc(72 * var(--u)) 10px 0; }   /* 72 below the artboard = 120 below the map; 10 px from the window's edges */

  /* --- 04 what is (Block 4, 1133 tall) + strip --- */
  .what .ab { height: calc(1133 * var(--u)); }
  .what__label { position: absolute; left: calc(268 * var(--u)); top: calc(283 * var(--u)); white-space: nowrap; }
  .what__body { position: absolute; left: calc(614 * var(--u)); top: calc(272 * var(--u)); width: calc(500 * var(--u)); }
  .cards { position: absolute; left: 0; top: calc(643 * var(--u)); width: 100%; height: calc(419 * var(--u)); }
  .card-ink { position: absolute; top: 0; width: calc(282 * var(--u)); height: calc(419 * var(--u)); }
  .card-ink:nth-child(1) { left: calc(111 * var(--u)); }
  .card-ink:nth-child(2) { left: calc(417 * var(--u)); }
  .card-ink:nth-child(3) { left: calc(724 * var(--u)); }
  .card-ink:nth-child(4) { left: calc(1030 * var(--u)); }
  .card-ink:nth-child(5) { left: calc(1337 * var(--u)); }
  .card-ink__photo { height: calc(280 * var(--u)); }
  .card-ink__maze { left: calc(141 * var(--u)); top: calc(349.5 * var(--u)); width: calc(580 * var(--u)); height: calc(436 * var(--u)); transform: translate(-50%, -50%) rotate(45deg); }
  .card-ink__caption { top: calc(280 * var(--u)); width: calc(245 * var(--u)); height: calc(139 * var(--u)); font-size: calc(23.18 * var(--u)); }
  .strip { height: calc(174 * var(--u)); }
  .tile { width: calc(91.3027 * var(--u)); height: calc(91.3027 * var(--u)); }

  /* --- 05 inspiration (Block 5, 972 tall, full bleed) --- */
  .insp { height: calc(972 * var(--b)); }
  .insp__stage { left: 0; width: 100%; }
  .insp__ribbon { left: calc(531 * var(--b)); top: calc(436 * var(--b)); width: calc(1084.17 * var(--b)); height: calc(556.52 * var(--b)); }
  .insp__statement {
    top: calc(56 * var(--u)); width: calc(619 * var(--u)); height: calc(292 * var(--u));
    padding: calc(55 * var(--u)) calc(25 * var(--u)) 0 calc(32 * var(--u)); font-size: calc(36 * var(--u));
  }

  /* --- 06 medallion (Block 6, 1403 tall) --- */
  .medallion .ab { height: calc(1403 * var(--u)); }
  .medallion__frame { --m: var(--u); position: absolute; left: calc(256 * var(--u)); top: calc(42 * var(--u)); }

  /* --- footer --- */
  .footer__maze { left: 50%; top: 50%; width: calc(2791.69 * var(--u)); height: calc(2097.25 * var(--u)); transform: translate(-50%, -50%) rotate(45deg); }
  .footer__in { padding: calc(80 * var(--u)) calc(112 * var(--u)) calc(64 * var(--u)); }
  .footer__l1 { font-size: calc(23.18 * var(--u)); }
  .footer__l2 { font-size: calc(18 * var(--u)); margin-top: calc(8 * var(--u)); }
  .footer__l3 { font-size: calc(16 * var(--u)); margin-top: calc(8 * var(--u)); }
  .footer__row { display: flex; align-items: flex-start; justify-content: space-between; margin-top: calc(40 * var(--u)); }
  .footer .lockup { width: calc(232 * var(--u)); height: calc(64 * var(--u)); flex: none; }
  .footer__when { font-size: calc(16 * var(--u)); }
  .footer__mail { margin-top: calc(6 * var(--u)); }
  .footer__mail a { font-size: calc(18 * var(--u)); display: inline-block; padding: calc(6 * var(--u)) 0; }

  /* --- 06 why join · 10 vision · 13 register: the Need card's exact geometry (1030 tall, card 1504 × 828 at 112/101) --- */
  .ground--maze {
    left: calc(-855 * var(--u)); top: calc(804 * var(--u));
    width: calc(2791.69 * var(--u)); height: calc(2097.25 * var(--u));
    transform-origin: 0 0; transform: rotate(-45deg);
  }
  .why .ab, .vision .ab, .reg .ab { height: calc(1030 * var(--u)); }
  .card--why, .card--vision, .card--reg { position: absolute; left: calc(112 * var(--u)); top: calc(101 * var(--u)); width: calc(1504 * var(--u)); height: calc(828 * var(--u)); }
  .why__label, .vision__label, .reg__label { position: absolute; left: calc(155 * var(--u)); top: calc(157 * var(--u)); white-space: nowrap; }
  .why__body, .vision__body, .reg__body { position: absolute; left: calc(390 * var(--u)); top: calc(150 * var(--u)); width: calc(500 * var(--u)); }
  .why__tag, .vision__tag, .reg__tag {
    position: absolute; left: calc(1324 * var(--u)); bottom: calc(36 * var(--u)); width: calc(375 * var(--u));   /* bottom = 994, Block 3's overlap */
    padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)) calc(62 * var(--u));
  }
  .why__tag { min-height: calc(214 * var(--u)); }
  .vision__tag { min-height: calc(180 * var(--u)); }
  .reg__tag { height: calc(153 * var(--u)); }

  /* --- 07 experience (white, 840 tall; six cards 230 × 380 on the six-card grid) --- */
  .xp .ab { height: calc(840 * var(--u)); }
  .xp__label { position: absolute; left: calc(268 * var(--u)); top: calc(140 * var(--u)); white-space: nowrap; }
  .xp__intro { position: absolute; left: calc(614 * var(--u)); top: calc(130 * var(--u)); width: calc(500 * var(--u)); }
  .xp__cards { position: absolute; left: 0; top: calc(330 * var(--u)); width: 100%; height: calc(380 * var(--u)); }
  .xp-card { position: absolute; top: 0; width: calc(230 * var(--u)); height: calc(380 * var(--u)); }
  .xp-card:nth-child(1) { left: calc(112 * var(--u)); }
  .xp-card:nth-child(2) { left: calc(366.5 * var(--u)); }
  .xp-card:nth-child(3) { left: calc(621 * var(--u)); }
  .xp-card:nth-child(4) { left: calc(875.5 * var(--u)); }
  .xp-card:nth-child(5) { left: calc(1130 * var(--u)); }
  .xp-card:nth-child(6) { left: calc(1384.5 * var(--u)); }
  .xp-card__panel { height: calc(150 * var(--u)); }
  .xp-card__pattern--maze { width: calc(580 * var(--u)); height: calc(436 * var(--u)); }   /* the card-caption maze, same scale */
  .xp-card__arc { width: calc(230 * var(--u)); height: calc(150 * var(--u)); }
  .xp-card__title { left: calc(24 * var(--u)); bottom: calc(24 * var(--u)); width: calc(182 * var(--u)); font-size: calc(23.18 * var(--u)); }
  .xp-card__desc { padding: calc(20 * var(--u)) calc(24 * var(--u)) 0; font-size: calc(16 * var(--u)); }

  /* --- 08 seeds (photo 972 + white tail 340; the five cards straddle the photo's bottom edge by 200) --- */
  .seeds__photo { height: calc(972 * var(--u)); }
  .seeds__statement {
    top: calc(56 * var(--u)); width: calc(580 * var(--u)); min-height: calc(370 * var(--u));
    padding: calc(55 * var(--u)) calc(32 * var(--u)) calc(44 * var(--u)); font-size: calc(36 * var(--u));
  }
  .seeds .ab { height: calc(340 * var(--u)); z-index: 1; }
  .cards--seeds { top: calc(-200 * var(--u)); height: calc(420 * var(--u)); }
  .card-ink--letter { height: calc(420 * var(--u)); }
  .card-ink__letter { left: calc(28 * var(--u)); top: calc(20 * var(--u)); font-size: calc(140 * var(--u)); }
  .card-ink--letter .card-ink__maze { top: calc(210 * var(--u)); }
  .card-ink--letter .card-ink__caption { top: calc(236 * var(--u)); height: calc(172 * var(--u)); }

  /* --- 09 who (950 tall, full bleed, two ink boxes) --- */
  .who__band { height: calc(950 * var(--b)); }
  .who__lead {
    top: calc(56 * var(--u)); width: calc(619 * var(--u)); min-height: calc(292 * var(--u));
    padding: calc(55 * var(--u)) calc(25 * var(--u)) calc(40 * var(--u)) calc(32 * var(--u)); font-size: calc(36 * var(--u));
  }
  .who__list {   /* 720 wide, not the plan's 630: Chrome's Black Han Sans runs a sixth line at 562, and the box must stay ≤ 200 tall to clear the third child's face */
    bottom: calc(54 * var(--u)); width: calc(720 * var(--u)); min-height: calc(187 * var(--u));
    padding: calc(24 * var(--u)) calc(32 * var(--u)); font-size: calc(23.18 * var(--u));
  }

  /* --- 11 take home (the What-is geometry, 560 tall) --- */
  .take .ab { height: calc(560 * var(--u)); }
  .take__label { position: absolute; left: calc(268 * var(--u)); top: calc(130 * var(--u)); white-space: nowrap; }
  .take__body { position: absolute; left: calc(614 * var(--u)); top: calc(120 * var(--u)); width: calc(500 * var(--u)); }

  /* --- 12 register band (948 tall, full bleed; Block 2's date box) --- */
  .rband { height: calc(948 * var(--b)); }
  .rband__deadline {
    top: calc(47 * var(--u)); width: calc(490 * var(--u)); height: calc(174 * var(--u));
    padding: calc(14 * var(--u)) 0 0 calc(24 * var(--u)); font-size: calc(64 * var(--u));
  }

  /* --- 13 register: lines, buttons, placeholder --- */
  .reg__fee { font-size: calc(23.18 * var(--u)); }
  .reg__actions { gap: calc(24 * var(--u)); margin-top: calc(24 * var(--u)); width: max-content; max-width: calc(1000 * var(--u)); }
  .btn { height: calc(64 * var(--u)); padding: 0 calc(32 * var(--u)); }
  .btn--primary { font-size: calc(23.18 * var(--u)); }
  .btn--secondary { font-size: calc(20 * var(--u)); border-width: calc(2 * var(--u)); }
  .reg__slot {
    position: absolute; left: calc(1100 * var(--u)); top: calc(150 * var(--u)); width: calc(240 * var(--u)); height: calc(240 * var(--u));
    padding: calc(24 * var(--u)); font-size: calc(16 * var(--u));
  }
}

/* Medallion geometry in its own unit --m (desktop: --u; phones: the 358 frame), frame 1198 */
.medallion__frame { width: calc(1198 * var(--m)); height: calc(1198 * var(--m)); }
.m-part--A { left: calc(78 * var(--m)); top: calc(79 * var(--m)); width: calc(1041.53 * var(--m)); height: calc(1040.57 * var(--m)); }
.m-part--P { left: calc(238 * var(--m)); top: calc(237 * var(--m)); width: calc(721.843 * var(--m)); height: calc(720.933 * var(--m)); }
.m-part--M { left: calc(380 * var(--m)); top: calc(381 * var(--m)); width: calc(442.119 * var(--m)); height: calc(438.149 * var(--m)); }
.m-part--circle { left: calc(382 * var(--m)); top: calc(382 * var(--m)); width: calc(435.681 * var(--m)); height: calc(435.681 * var(--m)); }
.m-part--bloom { left: calc(548 * var(--m)); top: calc(548 * var(--m)); width: calc(102.489 * var(--m)); height: calc(102.487 * var(--m)); }
.m-part--brush { left: calc(331 * var(--m)); top: calc(476 * var(--m)); width: calc(467.618 * var(--m)); height: calc(263.928 * var(--m)); }
.m-zoom__bloom { left: calc(548 * var(--m)); top: calc(548 * var(--m)); width: calc(102.489 * var(--m)); height: calc(102.487 * var(--m)); }
.m-zoom__brush { left: calc(120 * var(--m)); top: calc(310 * var(--m)); width: calc(958 * var(--m)); height: calc(541 * var(--m)); }

/* ===================== 5. Phones (≤ 900 px) ===================== */
@media (max-width: 900px) {
  /* Phones and tablets in portrait (≤ 900 px), rebuilt 5 Oct from Vishrut's phone layout (Figma "APM-mess", node 283:2,
     "iPhone 17 - jh1", 951 wide). --pu is one pixel of that layout: every measurement is calc(N * var(--pu)), so the page
     is his frame at any phone width, as the desktop is the 1728 artboard (--u). The layout reuses the desktop pieces at
     1 : 1 (cards, shadows, type sizes, stars, the maze and petal tiles), so many numbers are the desktop's. The three
     photos are curtains as on desktop: each stage is sticky inside a box one window taller at each end, so it rests at the
     bottom of the screen while the section above slides off it, travels with the page, then holds at the top while the
     next section slides over it (app.js §11 adds the desktop's settle from a slight zoom). Text blocks are in flow, so a
     longer translation pushes what follows instead of overlapping it; the decorations hang from the block they belong to.
     Section 9 (details, form, map) isn't in the layout and keeps its own rules at the end of this block. */
  :root {
    --pu: calc(100vw / 951);
    --shadow-big:
      calc(9 * var(--pu)) calc(5 * var(--pu)) calc(23 * var(--pu)) rgb(0 0 0 / 0.10),
      calc(37 * var(--pu)) calc(21 * var(--pu)) calc(42 * var(--pu)) rgb(0 0 0 / 0.09),
      calc(83 * var(--pu)) calc(46 * var(--pu)) calc(57 * var(--pu)) rgb(0 0 0 / 0.05),
      calc(148 * var(--pu)) calc(82 * var(--pu)) calc(68 * var(--pu)) rgb(0 0 0 / 0.01);
    --shadow-small:
      calc(1.66 * var(--pu)) calc(2.48 * var(--pu)) calc(7.45 * var(--pu)) rgb(0 0 0 / 0.10),
      calc(8.28 * var(--pu)) calc(10.76 * var(--pu)) calc(13.25 * var(--pu)) rgb(0 0 0 / 0.09),
      calc(18.21 * var(--pu)) calc(23.18 * var(--pu)) calc(17.38 * var(--pu)) rgb(0 0 0 / 0.05),
      calc(32.29 * var(--pu)) calc(42.22 * var(--pu)) calc(20.7 * var(--pu)) rgb(0 0 0 / 0.01);
    --r-big: calc(24.16 * var(--pu)); --r-small: 10px; --r-box: var(--r-big);
    --g: clamp(20px, 5.5vw, 48px);            /* section 9: side gutter */
    --col: 640px;                              /* section 9: the content column (tablets) */
    --sp: clamp(64px, 13vw, 112px);           /* section 9: section padding */
  }
  .ab { position: relative; width: 100%; }
  .body { font-size: calc(36 * var(--pu)); line-height: calc(45 * var(--pu)); text-align: justify; }
  .body p + p { margin-top: 0; }
  main { overflow: clip; }   /* as on desktop: the curtains' spacers and their settle zoom stop at the page's edges */

  /* The neighbours of the three curtains paint over their spacers. The two pairs that meet over a parked photo (the ink
     band and section 6 over the second, sections 7 and 8 over the third) overlap by 1 px, so no seam lets it through;
     the box above each is 1 px longer, so nothing moves */
  .hero, .need, .what2, .insp2__note, .grow, .emerge, .invite, .details { position: relative; z-index: 1; }
  .grow, .invite { margin-top: -1px; }

  /* nav: the same pill, its menu drops below it as a card and the hamburger turns into a cross (app.js §9). It waits
     until the white strip with the IofC lockups has scrolled away (app.js §2), so it never sits on them */
  .topbar { top: 12px; left: 50%; right: auto; width: max-content; max-width: calc(100vw - 24px); height: 50px; border-radius: 999px;
    transform: translate(-50%, calc(-100% - 16px)); }
  .topbar.is-visible { transform: translate(-50%, 0); }
  .topbar__in { position: relative; gap: 12px; padding: 0 7px 0 20px; }
  .topbar__brand { font-size: 23px; }
  .topbar__burger { width: 40px; height: 36px; }
  .topbar__menu { position: absolute; top: calc(100% + 10px); left: 50%; flex-direction: column; align-items: stretch; gap: 2px; min-width: 210px;
    max-width: none; margin: 0; padding: 8px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-big);
    opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s; }
  .topbar.is-open .topbar__menu { max-width: none; opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
  .topbar__menu a { padding: 13px 20px; border-radius: 999px; font-size: 17px; }
  .topbar__menu a.is-current { background: rgb(0 29 37 / 0.06); }
  .topbar__pill { height: 36px; min-width: 0; padding: 0 16px; font-size: 14px; border-radius: 999px; }
  .lang { margin-right: -4px; }
  .lang__btn { width: 36px; height: 36px; }
  .lang__menu { border-radius: 18px; }

  /* 01 hero: a white strip with the two IofC lockups (144), then the green ground (1117) with the card 101 in from its top
     and bottom, laid out like the desktop card (the same star, band, title, Korean box and tagline, narrower) */
  .hero { height: calc(1261 * var(--pu)); }
  .hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: calc(144 * var(--pu)); background: var(--white); }
  .hero .ab { z-index: 2; height: 100%; }
  .hero__maze { left: calc(-2561.56 * var(--pu)); top: calc(948.02 * var(--pu)); width: calc(4800 * var(--pu)); height: calc(4800 * var(--pu));
    transform-origin: 0 0; transform: rotate(-45deg); color: #000; opacity: 0.04; }   /* the desktop maze tile, 9.5 left of its desktop place, black at 4 % as drawn */
  .hero__card { position: absolute; left: calc(91 * var(--pu)); top: calc(245 * var(--pu)); width: calc(769 * var(--pu)); height: calc(915 * var(--pu)); }
  .hero__lockups { display: contents; }
  .hero .lockup { position: absolute; width: calc(232 * var(--pu)); height: calc(64 * var(--pu)); }
  .hero .lockup--ap { left: calc(-40.95 * var(--pu)); top: calc(-192.45 * var(--pu)); }
  .hero .lockup--kr { left: calc(577.26 * var(--pu)); top: calc(-213.68 * var(--pu)); }
  .lockup__mark { width: calc(39.34 * var(--pu)); height: calc(39.35 * var(--pu)); }
  .lockup__text { left: calc(48 * var(--pu)); top: calc(-4 * var(--pu)); }
  .lockup--kr .lockup__mark { top: calc(21 * var(--pu)); }
  .lockup--kr .lockup__text { left: calc(44 * var(--pu)); top: calc(16 * var(--pu)); }
  .lockup__name { font-size: calc(18.5 * var(--pu)); }
  .lockup__sub { font-size: calc(14.65 * var(--pu)); }
  .lockup__sub--ko { font-size: calc(17.33 * var(--pu)); }
  .lockup__country { top: calc(5 * var(--pu)); font-size: calc(15 * var(--pu)); }
  .hero .lockup__name { position: relative; }
  .hero .lockup--ap .lockup__name { top: calc(5 * var(--pu)); font-size: calc(19.13 * var(--pu)); }   /* matched to the layout's lockup artwork, which runs ~3 % wider and ~5 lower than the desktop's live text */
  .hero .lockup--ap .lockup__sub { position: relative; top: calc(2.2 * var(--pu)); }
  .hero .lockup--kr .lockup__name { top: calc(3 * var(--pu)); font-size: calc(19.45 * var(--pu)); }
  .hero .lockup--kr .lockup__sub { position: relative; top: calc(-1.19 * var(--pu)); }
  .hero__stage { display: contents; }
  .hero__star { left: calc(75.47 * var(--pu)); top: calc(116.56 * var(--pu)); width: calc(618.05 * var(--pu)); height: calc(618.05 * var(--pu)); }
  .hero__photo { left: calc(-156.31 * var(--pu)); top: calc(-130.79 * var(--pu)); width: calc(984.13 * var(--pu)); height: calc(984.13 * var(--pu)); }
  .hero__band { top: calc(369.1 * var(--pu)); height: calc(114.97 * var(--pu)); }
  .hero__title { left: calc(29.5 * var(--pu)); top: calc(37.39 * var(--pu)); width: calc(713.07 * var(--pu)); height: calc(48.24 * var(--pu)); }
  .hero__ko { left: calc(262.16 * var(--pu)); top: calc(484.07 * var(--pu)); width: calc(244.68 * var(--pu)); height: calc(56.48 * var(--pu)); padding-bottom: calc(6 * var(--pu)); font-size: calc(18.5 * var(--pu)); }
  .hero__tagline { position: absolute; left: 0; right: 0; top: calc(845.48 * var(--pu)); font-size: calc(30.56 * var(--pu)); }
  .hero__tagline br { display: none; }   /* one line here; the space before the break keeps the words apart */

  /* 02 the photo band, a curtain 767 tall: the desktop frame (photo + ribbon) at 0.81289 of its size, 309.73 left of the
     page's edge, top on the window's top */
  .band { --B: calc(767 * var(--pu)); --s: calc(0.81289 * var(--pu)); --fx: calc(-309.73 * var(--pu));
    height: auto; overflow: visible; background: none; margin: calc(-1 * var(--B)) 0; z-index: 0; }
  .band::before, .band::after { content: ""; display: block; height: var(--B); }
  .band__win { position: absolute; left: 0; right: 0; top: var(--B); height: var(--B); pointer-events: none; }
  .band__stage { position: sticky; top: 0; bottom: 0; left: auto; width: 100%; height: var(--B); overflow: hidden; }
  .band__photo { position: absolute; left: calc(var(--fx) - 0.27 * var(--s)); top: calc(-103.98 * var(--s)); width: calc(1729.475 * var(--s)); height: calc(1152.98 * var(--s)); max-width: none; }
  .band__ribbon { left: calc(var(--fx) - 2.42 * var(--s)); top: 0; width: calc(1731.8 * var(--s)); height: calc(944.096 * var(--s)); }

  /* 03 Need: the petal ground as on desktop (it grows from seeds, app.js §6), the card with a star on each top corner, the
     label and the paragraphs centred in it, the tag astride its foot */
  .need .ab { padding: calc(101 * var(--pu)) 0 calc(100.59 * var(--pu)); }   /* on the artboard, so the ground below is placed from the section's top */
  .need__ground { display: block; position: absolute; left: calc(-3013.44 * var(--pu)); top: calc(-16.65 * var(--pu)); width: calc(7728 * var(--pu)); height: calc(2400 * var(--pu)); pointer-events: none; }
  .card--need { position: relative; width: calc(769 * var(--pu)); margin: 0 auto; padding: calc(106.33 * var(--pu)) 0 calc(204.68 * var(--pu)); overflow: hidden; }
  .need__label { margin: 0; text-align: center; font-size: calc(42.67 * var(--pu)); line-height: 1; }
  .need__body { width: calc(500.45 * var(--pu)); margin: calc(83.32 * var(--pu)) auto 0; }
  .need__body p.gap { margin-top: calc(45 * var(--pu)); }
  .card--need .star--1, .card--need .star--3 { display: block; top: calc(-161.67 * var(--pu)); width: calc(323.33 * var(--pu)); height: calc(323.33 * var(--pu)); }
  .card--need .star--1 { left: calc(-161.66 * var(--pu)); }
  .card--need .star--3 { left: calc(607.34 * var(--pu)); }
  .tag { font-size: calc(35.71 * var(--pu)); }
  /* Chrome sets a line's first baseline a little higher than Figma does: each text block is nudged down by what was
     measured against the layout (1 to 2.5 of its pixels), without moving anything around it */
  .need__label, .what2__title { position: relative; top: calc(1 * var(--pu)); }
  .need__body { position: relative; top: calc(1.5 * var(--pu)); }
  .what2__body, .grow__body, .emerge__body { position: relative; top: calc(2.5 * var(--pu)); }
  .need__tag > span { top: calc(1 * var(--pu)); }
  .need__tag { position: relative; justify-content: center; width: calc(579.25 * var(--pu)); height: calc(236.33 * var(--pu)); margin: calc(-117.92 * var(--pu)) auto 0;
    padding: 0; text-align: center; line-height: 1.255; border-radius: calc(12.79 * var(--pu));
    box-shadow: calc(2.56 * var(--pu)) calc(3.84 * var(--pu)) calc(11.51 * var(--pu)) rgb(0 0 0 / 0.10), calc(12.79 * var(--pu)) calc(16.62 * var(--pu)) calc(20.46 * var(--pu)) rgb(0 0 0 / 0.09),
      calc(28.13 * var(--pu)) calc(35.8 * var(--pu)) calc(26.85 * var(--pu)) rgb(0 0 0 / 0.05), calc(49.87 * var(--pu)) calc(65.21 * var(--pu)) calc(31.97 * var(--pu)) rgb(0 0 0 / 0.01); }

  /* 04 What is: the maze at 2 %, the arc from the top edge, the title and first paragraph; then the red band (it sweeps in,
     app.js §11) with the wave across its edge, the gallery (arrows on its sides) and the second paragraph */
  .what2 { overflow: hidden; background: var(--white); }
  .what2 .ab { padding-top: calc(178.65 * var(--pu)); }
  .what2__maze { position: absolute; left: calc(-2670.46 * var(--pu)); top: calc(919 * var(--pu)); width: calc(4800 * var(--pu)); height: calc(4800 * var(--pu));
    transform-origin: 0 0; transform: rotate(-45deg); color: #000; opacity: 0.02; pointer-events: none; }
  .what2__band, .what2__ribbons { display: none; }
  .what2__ribbons--m { display: block; position: absolute; left: 0; width: calc(951 * var(--pu)); pointer-events: none; }
  .what2__arc { top: 0; height: calc(240 * var(--pu)); }
  .what2__wave { top: 0; height: calc(160 * var(--pu)); }
  .what2__title { margin: 0; text-align: center; font-size: calc(42.67 * var(--pu)); line-height: 1; color: var(--red); }
  .what2__body { width: calc(765 * var(--pu)); margin-left: calc(96.5 * var(--pu)); }
  .what2__body--a { margin-top: calc(42.46 * var(--pu)); color: var(--ink); }
  .what2__red { position: relative; isolation: isolate; display: flex; flex-direction: column; margin-top: calc(205.22 * var(--pu)); padding: calc(51.91 * var(--pu)) 0 calc(89.4 * var(--pu)); }
  .what2__red::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: scaleX(var(--sweep, 1)); transform-origin: 0 50%; }
  .what2__body--b { order: 2; margin-top: calc(68.1 * var(--pu)); color: #fff; }
  .what2__body--b .hl { font-weight: 700; }   /* coloured only, as the layout draws them (bold, "reflect," no longer fits its line) */
  .gallery { order: 1; position: relative; width: calc(845.81 * var(--pu)); height: calc(463.67 * var(--pu)); margin-left: calc(55.93 * var(--pu));
    overflow: visible; background: none; box-shadow: none; border-radius: calc(15 * var(--pu)); }
  .gallery__frame { display: block; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--ink);
    box-shadow: calc(6 * var(--pu)) calc(6 * var(--pu)) calc(18 * var(--pu)) rgb(0 0 0 / 0.10), calc(25 * var(--pu)) calc(22 * var(--pu)) calc(33 * var(--pu)) rgb(0 0 0 / 0.09),
      calc(56 * var(--pu)) calc(50 * var(--pu)) calc(45 * var(--pu)) rgb(0 0 0 / 0.05), calc(99 * var(--pu)) calc(88 * var(--pu)) calc(53 * var(--pu)) rgb(0 0 0 / 0.01); }
  .gallery__cap { top: auto; bottom: calc(26 * var(--pu)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 60 * var(--pu));
    padding: calc(10 * var(--pu)) calc(28 * var(--pu)); white-space: normal; text-align: center; font-size: calc(28 * var(--pu)); line-height: 1.3; }   /* not in the layout: kept, at the size of its smallest type */
  .gallery .gallery__btn { top: calc(50% - 40.8 * var(--pu)); width: calc(81.61 * var(--pu)); height: calc(81.61 * var(--pu));
    background: radial-gradient(closest-side, var(--red) 72%, transparent 73%); }   /* white discs with red arrows, astride the photo's sides */
  .gallery .gallery__btn--prev { left: calc(-40.8 * var(--pu)); }
  .gallery .gallery__btn--next { left: auto; right: calc(-40.8 * var(--pu)); }

  /* 05 Small acts: a curtain 819.92 tall (the desktop frame at 0.84309, 379 left of the page's edge); the statement in an
     ink band under it, which slides over the photo with section 6 */
  .insp2 { --B: calc(819.92 * var(--pu)); --s: calc(0.84309 * var(--pu)); --fx: calc(-379 * var(--pu));
    z-index: 0; overflow: visible; background: none; margin: calc(-1 * var(--B)) 0; }
  .insp2::before, .insp2::after { content: ""; display: block; height: var(--B); }
  .insp2__win { position: absolute; left: 0; right: 0; top: var(--B); height: var(--B); pointer-events: none; }
  .insp2__stage { position: sticky; top: 0; bottom: 0; width: 100%; height: var(--B); aspect-ratio: auto; overflow: hidden; }
  .insp2__photo { inset: auto; left: var(--fx); top: 0; width: calc(1728 * var(--s)); height: var(--B); max-width: none; }
  .insp2__ribbon { left: calc(var(--fx) + 1.45 * var(--s)); top: 0; width: calc(1726.55 * var(--s)); height: calc(971.699 * var(--s)); }
  .insp2__text { display: none; }
  .insp2__note { display: block; min-height: calc(246.1 * var(--pu) + 1px); margin: 0; padding: calc(47.5 * var(--pu)) calc(117.5 * var(--pu)) calc(21.5 * var(--pu)) calc(113.5 * var(--pu));
    background: var(--ink); color: #fff; text-align: center; font-family: var(--font-apm); font-weight: 400; font-size: calc(35 * var(--pu)); line-height: calc(44.33 * var(--pu)); }

  /* 06 Experience: the star hangs from the top edge (the ink band and the photo hide its top half), the title on two lines,
     the paragraph, then the ticker (the desktop's at 1.208) */
  .grow { background: var(--white); overflow: hidden; }
  .grow .ab { padding-top: calc(424.43 * var(--pu)); }
  .grow__star { left: calc(166.47 * var(--pu)); top: calc(-309.03 * var(--pu)); width: calc(618.05 * var(--pu)); height: calc(618.05 * var(--pu)); }
  .grow__title { width: calc(522 * var(--pu)); margin: 0 auto; text-align: center; text-wrap: balance; font-size: calc(44 * var(--pu)); line-height: calc(53 * var(--pu)); color: var(--yellow); }   /* balanced: the Korean breaks after its comma, as the English after "Growth." */
  .grow__body { width: calc(771 * var(--pu)); margin: calc(46.47 * var(--pu)) 0 0 calc(89.5 * var(--pu)); color: var(--ink); }
  .grow__body p { margin: 0; }
  .ticker { margin-top: calc(103.99 * var(--pu)); height: calc(106.31 * var(--pu)); }
  .ticker__track { position: relative; left: calc(-983.6 * var(--pu)); height: 100%; }
  .ticker__seq li { font-size: calc(38.66 * var(--pu)); line-height: calc(48.32 * var(--pu)); }
  .ticker__seq li::before { margin: 0 calc(32 * var(--pu)); }

  /* 07 What might emerge: the title and paragraph, then the gallery: the photo in its frame, the caption box astride its
     foot, the arrows on the photo; two flowers turning behind it (held to the gallery, from the section's foot) */
  .emerge .ab { display: flex; flex-direction: column; padding: calc(115.41 * var(--pu)) 0 calc(77.5 * var(--pu) + 1px); }
  .emerge__title { order: 1; margin: 0; text-align: center; font-size: calc(44 * var(--pu)); line-height: calc(53 * var(--pu)); color: var(--yellow); }
  .emerge__body { order: 2; width: calc(768.2 * var(--pu)); margin: calc(46.59 * var(--pu)) 0 0 calc(89.9 * var(--pu)); color: var(--ink); }
  .emerge__body p { margin: 0; }
  .gallery2 { order: 3; position: relative; width: calc(778.12 * var(--pu)); height: calc(489.83 * var(--pu)); margin: calc(125.39 * var(--pu)) 0 0 calc(89.7 * var(--pu)); }
  .gallery2__frame { left: 0; top: 0; width: 100%; height: calc(426.57 * var(--pu)); border-radius: calc(6.95 * var(--pu)); }
  .gallery2__box { left: calc(99.3 * var(--pu)); top: calc(385.83 * var(--pu)); width: calc(726 * var(--pu)); height: calc(104 * var(--pu)); border-radius: calc(7.62 * var(--pu));
    box-shadow: calc(1.52 * var(--pu)) calc(2.29 * var(--pu)) calc(6.86 * var(--pu)) rgb(0 0 0 / 0.10), calc(7.62 * var(--pu)) calc(9.91 * var(--pu)) calc(12.19 * var(--pu)) rgb(0 0 0 / 0.09),
      calc(16.77 * var(--pu)) calc(21.34 * var(--pu)) calc(16 * var(--pu)) rgb(0 0 0 / 0.05), calc(29.72 * var(--pu)) calc(38.87 * var(--pu)) calc(19.05 * var(--pu)) rgb(0 0 0 / 0.01); }
  .gallery2__cap { padding: calc(4 * var(--pu)) calc(36.72 * var(--pu)) 0; font-size: calc(21.28 * var(--pu)); line-height: calc(26.62 * var(--pu)); }
  .gallery2 .gallery__btn { top: calc(162.7 * var(--pu)); width: calc(80 * var(--pu)); height: calc(80 * var(--pu)); }
  .gallery2 .gallery__btn--prev { left: calc(20.81 * var(--pu)); }
  .gallery2 .gallery__btn--next { left: calc(683.08 * var(--pu)); }
  .emerge__flower--big { left: calc(13.78 * var(--pu)); bottom: calc(64.56 * var(--pu) + 1px); width: calc(159.64 * var(--pu)); height: calc(159.64 * var(--pu)); }
  .emerge__flower--small { left: calc(831.05 * var(--pu)); bottom: calc(528.55 * var(--pu) + 1px); width: calc(70.01 * var(--pu)); height: calc(70.01 * var(--pu)); }

  /* 08 the invitation: the petal ground (it grows from seeds), the card with the question, a leaf star on two corners */
  .invite .ab { padding: calc(100.67 * var(--pu)) 0 calc(100.33 * var(--pu)); }
  .invite__ground { display: block; position: absolute; left: calc(-2978.95 * var(--pu)); top: calc(-58.58 * var(--pu)); width: calc(7728 * var(--pu)); height: calc(700 * var(--pu)); pointer-events: none; }
  .card--invite { position: relative; width: calc(773 * var(--pu)); margin-left: calc(89.38 * var(--pu)); padding: calc(109.22 * var(--pu)) 0 calc(109.78 * var(--pu)) calc(137.56 * var(--pu)); overflow: hidden; }
  .invite__text { position: relative; top: calc(2.5 * var(--pu)); width: calc(499.57 * var(--pu)); margin: 0; font-family: var(--font-apm); font-weight: 400; font-size: calc(32 * var(--pu)); line-height: calc(40 * var(--pu));
    text-align: justify; color: #027E30; }
  .card--invite .star--i1, .card--invite .star--i3 { display: block; }
  .star--i1 { left: calc(-114.16 * var(--pu)); bottom: calc(-126.71 * var(--pu)); width: calc(267.2 * var(--pu)); height: calc(267.2 * var(--pu)); }
  .star--i3 { right: calc(-119.69 * var(--pu)); top: calc(-120.54 * var(--pu)); width: calc(270.54 * var(--pu)); height: calc(270.54 * var(--pu)); }

  /* 08b the gathering: a curtain 820.52 tall (the desktop frame at 0.83812, 251.06 left of the page's edge) */
  .gather { --B: calc(820.52 * var(--pu)); --s: calc(0.83812 * var(--pu)); --fx: calc(-251.059 * var(--pu));
    z-index: 0; overflow: visible; background: none; margin: calc(-1 * var(--B)) 0; }
  .gather::before, .gather::after { content: ""; display: block; height: var(--B); }
  .gather__win { position: absolute; left: 0; right: 0; top: var(--B); height: var(--B); pointer-events: none; }
  .gather__stage { position: sticky; top: 0; bottom: 0; width: 100%; height: var(--B); aspect-ratio: auto; overflow: hidden; }
  .gather__photo { left: calc(var(--fx) - 7.648 * var(--s)); top: 0; width: calc(1739.29 * var(--s)); height: var(--B); }
  .gather__ribbon { left: var(--fx); top: 0; width: calc(1724 * var(--s)); height: calc(979 * var(--s)); }

  /* Korean: the four headings a size up, as on desktop (Hangul in the display face reads small next to the text) */
  :lang(ko) .need__label, :lang(ko) .what2__title { font-size: calc(55 * var(--pu)); }
  :lang(ko) .grow__title, :lang(ko) .emerge__title { font-size: calc(55 * var(--pu)); line-height: calc(66 * var(--pu)); }
  /* 09 Event details */
  .details { padding: var(--sp) var(--g) 0; }
  .details .ab { max-width: var(--col); margin: 0 auto; }
  .details__maze { left: 50%; top: 40%; width: 1700px; height: 1700px; transform: translate(-50%, -50%) rotate(-45deg); }
  .details .ab { position: static; }   /* the rosette hangs from the section's top-right corner, clear of the title */
  .details__flower { right: -56px; top: -80px; width: 150px; height: 150px; }
  .details__title { margin-bottom: 36px; font-size: clamp(36px, 8.4vw, 52px); line-height: 1.1; }
  .facts { display: grid; row-gap: 28px; margin-bottom: 48px; }
  .fact { grid-template-columns: 48px 1fr; column-gap: 16px; }
  .fact__tile { width: 48px; height: 48px; }
  .fact dt { font-size: 20px; line-height: 1.2; }
  .fact .fact__value { margin-top: 4px; font-size: 17px; line-height: 1.4; }
  .fact .fact__note { margin-top: 3px; font-size: 14px; line-height: 1.45; }
  .interest { position: relative; padding: 30px 22px 28px; border-radius: var(--r-big); }
  .interest__title { font-size: clamp(24px, 4.4vw, 30px); line-height: 1.2; }
  .interest__intro { margin-top: 10px; font-size: 15px; line-height: 1.5; font-weight: 700; }
  .interest__grid { margin-top: 24px; gap: 16px 12px; grid-template-columns: 1fr; }
  .field { gap: 6px; }
  .field__label { font-size: 12px; }
  .field input, .field select, .field textarea { font-size: 16px; padding: 12px 14px; }   /* 16 px: iOS doesn't zoom into the field */
  .interest__error { min-height: 20px; margin-top: 10px; font-size: 14px; }
  .btn-send { margin-top: 6px; height: 52px; padding: 0 6px 0 22px; gap: 14px; font-size: 16px; }
  .btn-send__arrow { width: 40px; height: 40px; font-size: 17px; }
  .interest__note { margin-top: 14px; font-size: 13px; line-height: 1.45; }
  .details__map { position: relative; margin-top: 48px; aspect-ratio: 16 / 10; border-radius: var(--r-big); }
  .details__pin { left: 14px; bottom: 14px; padding: 8px 16px; font-size: 15px; }
  .foot { padding-top: 72px; }

  /* tablets in portrait: the form's fields two by two */
  @media (min-width: 600px) {
    .interest__grid { grid-template-columns: 1fr 1fr; }
    .interest { padding: 36px 32px 32px; }
  }
}

/* ===================== 6. Reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .topbar, .topbar__pill, .btn { transition: none; }
  .m-spin, .m-peel, .m-zoom, .m-zoom__bloom, .m-zoom__brush { animation: none !important; }
  .m-zoom { display: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero__title path, .hero__ko .ch, .hero__tagline .ch { animation: none; }
  .star { animation: none; }
  .details__flower { animation: none; }
  .foot__mark { animation: none; }   /* the name stays white */
  .grow__star, .ticker__track { animation: none; }
  .emerge__flower { animation: none; }
  .gallery2__cap { transition: none; }
  .gallery__slide, .gallery__slide img, .gallery__btn { transition: none; }
}