/* assets/css/tokens.css */
:root {
  --color-ink: #3f3a3b;
  --color-muted: #74686c;
  /* Logo lettering sample shared by UI, section backgrounds and connecting waves. */
  --color-brand: #a40d5e;
  --color-brand-ui: var(--color-brand);
  --color-brand-deep: #7e1748;
  --color-brand-bright: #bd2c70;
  --color-blush: #fdf3f3;
  --color-blush-strong: #f7ebe9;
  --color-surface-edge: #eccaca;
  --color-gold: #c9a15a;
  /* Section ribbons share the page/brand palette, never a baked image ground. */
  --color-wave-soft: color-mix(in srgb, var(--color-brand) 18%, var(--color-blush));
  --color-wave-middle: color-mix(in srgb, var(--color-brand) 42%, var(--color-blush));
  --color-wave-light: color-mix(in srgb, var(--color-brand) 5%, var(--color-blush));
  --color-wave-light-accent: color-mix(in srgb, var(--color-brand) 9%, var(--color-blush));
  --color-white: #ffffff;
  --font-serif: "Noto Serif JP", "Yu Mincho", YuMincho, serif;
  --font-sans: "Noto Sans JP", "Yu Gothic", YuGothic, sans-serif;
  --font-script: "Great Vibes", cursive;
  --font-script-skew: -14deg;
  --font-signature: "Great Vibes", cursive;
  --heading-h1-size: 44px;
  --heading-h2-size: 34px;
  --heading-h3-size: 26px;
  --heading-h4-size: 20px;
  /* Approved FV: 1554px canvas, 145.6875px edges, 1262.625px content.
   * Share edge parameters, not a forced width on the foreground artwork.
   * Above the 1800px stage the content follows the same capped/fluid scale. */
  --container: max(1462.5px, calc(100% * .709090909));
  --gutter-ratio: .09375;
  --gutter-offset: 0px;
  --gutter-min: 0px;
  --gutter-max: 1000px;
  --section-gutter: clamp(var(--gutter-min), calc(100% * var(--gutter-ratio) + var(--gutter-offset)), var(--gutter-max));
  --section-gutter-phone: 24px;
  /* ウェーブ素材の左右端を常に画面外へ逃がす全幅用サイズ。 */
  --full-bleed-wave-width: max(102vw, 1960px);
  --reading: 920px;
  --header-height: 96px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --shadow-card: 0 12px 32px rgba(110, 32, 38, 0.12);
}

/* Landscape tablets blend into the compact-PC edge without a large jump. */
@media (600px <= width < 1024px) and (orientation: landscape) {
  :root { --gutter-ratio: .2224; --gutter-offset: -129.8px; --gutter-min: 32px; --gutter-max: 94.6px; }
}
@media (600px <= width <= 1100px) and (orientation: portrait) {
  :root { --gutter-ratio: .06; --gutter-min: 32px; --gutter-max: 64px; }
}
@media (width < 600px) {
  :root { --gutter-ratio: 0; --gutter-min: var(--section-gutter-phone); --gutter-max: var(--section-gutter-phone); }
}
@media (width < 1024px) and (height <= 500px) and (orientation: landscape) {
  :root { --gutter-ratio: .04; --gutter-offset: 0px; --gutter-min: 24px; --gutter-max: 36px; }
}

/* Share the compact-tablet content edge across sections, not the header. */
@media (540px <= width < 768px) and (2/3 <= aspect-ratio <= 1) {
  :root { --gutter-ratio: .06; --gutter-offset: 0px; --gutter-min: 32px; --gutter-max: 46px; }
}

/* assets/css/design-system.css */
/* FV responsive tokens use .design-scale inside an inline-size container.
 * Shared content-section tokens follow below; the FV remains independent.
 * Reference: 1554px content
 * width (1569px browser viewport minus its 15px scrollbar), 2026-09-05.
 * Base brand/font tokens stay in tokens.css; layout-specific rules stay out. */
:root {
  --design-reference-width: 1554;
  --design-stage-max: 1800px;
  --design-title-reference: 44;
  --design-h2-reference: 34;
  --design-h3-reference: 26;
  --design-h4-reference: 20;
  --design-lead-reference: 20;
  --design-signature-reference: 50;
  --design-name-reference: 30;
  --design-meta-reference: 12;
  --design-gap-reference: 24;
}
.design-scale {
  --design-unit: calc(min(100cqw, var(--design-stage-max)) / var(--design-reference-width));
  /* Readable compact baseline -> approved 1554px baseline. Artwork does not
   * determine the minimum type size. These tokens are opt-in, not global h*. */
  --type-step: calc((100cqw - 1009px) / 545);
  --text-title: clamp(2rem, calc(2rem + 12 * var(--type-step)), 2.75rem);
  --text-h2: clamp(1.625rem, calc(1.625rem + 8 * var(--type-step)), 2.125rem);
  --text-h3: clamp(1.375rem, calc(1.375rem + 4 * var(--type-step)), 1.625rem);
  --text-h4: clamp(1.125rem, calc(1.125rem + 2 * var(--type-step)), 1.25rem);
  --text-lead: clamp(1.125rem, calc(1.125rem + 2 * var(--type-step)), 1.25rem);
  --text-signature: clamp(2.375rem, calc(2.375rem + 12 * var(--type-step)), 3.125rem);
  --text-name: clamp(1.625rem, calc(1.625rem + 4 * var(--type-step)), 1.875rem);
  --text-meta: .75rem;
  --space-copy: clamp(1rem, calc(1rem + 8 * var(--type-step)), 1.5rem);
  --leading-title: 1.5;
  --leading-lead: 1.8;
  --tracking-title: .04em;
  --tracking-copy: calc(.56 * var(--design-unit));
}

/* Large PC: retain the approved proportional scale of both type and scene. */
@container (min-width: 1554px) {
  .design-scale {
    --text-title: max(2.75rem, calc(var(--design-title-reference) * var(--design-unit)));
    --text-h2: max(2.125rem, calc(var(--design-h2-reference) * var(--design-unit)));
    --text-h3: max(1.625rem, calc(var(--design-h3-reference) * var(--design-unit)));
    --text-h4: max(1.25rem, calc(var(--design-h4-reference) * var(--design-unit)));
    --text-lead: max(1.25rem, calc(var(--design-lead-reference) * var(--design-unit)));
    --text-signature: max(3.125rem, calc(var(--design-signature-reference) * var(--design-unit)));
    --text-name: max(1.875rem, calc(var(--design-name-reference) * var(--design-unit)));
    --text-meta: max(.75rem, calc(var(--design-meta-reference) * var(--design-unit)));
    --space-copy: max(1.5rem, calc(var(--design-gap-reference) * var(--design-unit)));
  }
}

/* Portrait tablet: reflow the composition, not a miniature desktop. */
@media (600px <= width <= 1100px) and (orientation: portrait) {
  .design-scale {
    --text-title: 2.25rem;
    --text-h2: 1.875rem;
    --text-h3: 1.5rem;
    --text-h4: 1.25rem;
    --text-lead: 1.125rem;
    --text-signature: 2.75rem;
    --text-name: 1.75rem;
    --text-meta: .75rem;
    --space-copy: 1.5rem;
    --tracking-copy: .035em;
  }
}

/* Phones share readable type in both orientations. Short landscape screens
 * use layout/scrolling, not smaller body text, to accommodate the content. */
@media (width < 600px), (width < 1024px) and (height <= 500px) and (orientation: landscape) {
  .design-scale {
    --text-title: 1.75rem;
    --text-h2: 1.5rem;
    --text-h3: 1.25rem;
    --text-h4: 1.125rem;
    --text-lead: 1rem;
    --text-signature: 2.25rem;
    --text-name: 1.5rem;
    --text-meta: .75rem;
    --space-copy: 1.25rem;
    --tracking-copy: .035em;
  }
}
@media (width < 360px) {
  .design-scale {
    --text-title: 1.625rem;
    --text-signature: 2.125rem;
  }
}

/* Compact, tablet-shaped viewports: readable type independent of artwork.
 * This is not the tall-phone mode even though the width can be below 600px. */
@media (540px <= width < 768px) and (2/3 <= aspect-ratio <= 1) {
  .design-scale {
    --text-title: 2rem;
    --text-h2: 1.75rem;
    --text-h3: 1.375rem;
    --text-h4: 1.125rem;
    --text-lead: 1.125rem;
    --text-signature: 2.5rem;
    --text-name: 1.625rem;
    --text-meta: .75rem;
    --space-copy: 1.25rem;
  }
}

/* Content system — all .section-pad sections and the footer, never the FV/header.
 * Reuse the approved type references, but keep body copy independent of the
 * FV lead. Viewport-based values also work on future standalone pages.
 * 1569px browser width is the approved 1554px + scrollbar reference. */
.section-pad,
.site-footer {
  --section-type-step: clamp(0px, calc((100vw - 1024px) / 545), 1px);
  --text-h2: calc(1.625rem + (var(--design-h2-reference) - 26) * var(--section-type-step));
  --text-h3: calc(1.375rem + (var(--design-h3-reference) - 22) * var(--section-type-step));
  --text-h4: calc(1.125rem + (var(--design-h4-reference) - 18) * var(--section-type-step));
  --text-body: 1rem;
  --text-small: .875rem;
  --text-label: 1rem;
  --text-button: 1rem;
  /* Section scripts share the FV signature's 38 -> 50px reference scale. */
  --text-display: clamp(2.375rem, calc(2.375rem + (var(--design-signature-reference) - 38) * var(--section-type-step)), 3.125rem);
  --heading-h2-size: var(--text-h2);
  --heading-h3-size: var(--text-h3);
  --heading-h4-size: var(--text-h4);
  --leading-body: 1.9;
  --space-section: 6rem;
  --space-heading: 3rem;
  --space-heading-label: 1.5rem;
  --space-paragraph: 1.5rem;
  --space-content: 3rem;
  --space-grid: 2rem;
  --space-card: 2rem;
  --space-action: 2.5rem;
  --section-wave-height: 335px;
  --section-contact-wave-height: 300px;
  /* Optical intrusion of the existing wave artwork, separate from whitespace.
   * The top and bottom assets have different silhouettes. Do not resize them. */
  --section-wave-top-inset: calc(var(--section-wave-height) * .72);
  --section-wave-bottom-inset: calc(var(--section-wave-height) * .64);
  --section-art-top: 0px;
  --section-art-bottom: 0px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
@media (min-width: 1569px) {
  .section-pad,
  .site-footer {
    --section-type-unit: calc(min(100vw, 1818px) / 1569);
    --text-h2: max(2.125rem, calc(var(--design-h2-reference) * var(--section-type-unit)));
    --text-h3: max(1.625rem, calc(var(--design-h3-reference) * var(--section-type-unit)));
    --text-h4: max(1.25rem, calc(var(--design-h4-reference) * var(--section-type-unit)));
    /* Follow the FV's capped/fluid stage on extra-wide displays as well. */
    --section-display-unit: calc(min(100vw, max(1818px, calc(100vw * 1920 / 2200))) / 1569);
    --text-display: max(3.125rem, calc(var(--design-signature-reference) * var(--section-display-unit)));
    --text-body: clamp(1rem, calc(16 * var(--section-type-unit)), 1.125rem);
    --space-section: clamp(6rem, calc(6rem + (100vw - 1569px) * .0456), 7rem);
  }
}
@media (max-width: 1199px) {
  .section-pad,
  .site-footer {
    --space-section: 5rem;
    --space-heading: 2.5rem;
    --space-content: 2.5rem;
    --space-card: 1.5rem;
    --space-action: 2rem;
  }
}
@media (600px <= width <= 1100px) and (orientation: portrait) {
  .section-pad,
  .site-footer {
    --text-h2: 1.875rem;
    --text-h3: 1.5rem;
    --text-h4: 1.25rem;
    --text-display: 2.75rem;
  }
}
@media (max-width: 800px) {
  .section-pad,
  .site-footer {
    --section-wave-height: 120px;
    --section-contact-wave-height: 105px;
  }
}
@media (width < 600px), (width < 1024px) and (height <= 500px) and (orientation: landscape) {
  .section-pad,
  .site-footer {
    --text-h2: 1.5rem;
    --text-h3: 1.25rem;
    --text-h4: 1.125rem;
    --text-display: 2.25rem;
    --text-label: .875rem;
    --space-section: 4rem;
    --space-heading: 2rem;
    --space-heading-label: 1.25rem;
    --space-content: 2rem;
    --space-grid: 1.5rem;
    --space-action: 2rem;
    --section-wave-height: 120px;
    --section-contact-wave-height: 105px;
  }
}
@media (width < 360px) {
  .section-pad,
  .site-footer {
    --text-display: 2.125rem;
  }
}
@media (540px <= width < 768px) and (2/3 <= aspect-ratio <= 1) {
  .section-pad,
  .site-footer {
    --text-h2: 1.75rem;
    --text-h3: 1.375rem;
    --text-h4: 1.125rem;
    --text-display: 2.5rem;
    --text-label: 1rem;
    --space-section: 5rem;
  }
}

/* assets/css/base.css */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); overflow-x: clip; }
body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-blush);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.035em;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, figure { margin-top: 0; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.55; }
@media (min-width: 801px) {
  h1 { font-size: var(--heading-h1-size); }
  h2 { font-size: var(--heading-h2-size); }
  h3 { font-size: var(--heading-h3-size); }
  h4 { font-size: var(--heading-h4-size); }
}
main { overflow: clip; }
::selection { color: #fff; background: var(--color-brand); }
:focus-visible { outline: 3px solid #ed5ca5; outline-offset: 4px; }
.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  padding: 8px 14px;
  color: #fff;
  background: var(--color-brand-ui);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* assets/css/layout.css */
.container {
  width: min(calc(100% - 2 * var(--section-gutter)), var(--container));
  margin-inline: auto;
}

.reading-width { max-width: var(--reading); }
.section-pad {
  position: relative;
  padding-block: calc(var(--space-section) + var(--section-art-top)) calc(var(--space-section) + var(--section-art-bottom));
}
.section-pad.section-framed {
  --section-art-top: var(--section-wave-top-inset);
  --section-art-bottom: var(--section-wave-bottom-inset);
}
.section-pad.contact { --section-art-top: calc(var(--section-contact-wave-height) * .6); }
.section-pad :is(h2, h3, h4, p, label) { overflow-wrap: anywhere; }
.section-pad h4 { font-size: var(--text-h4); }
.section-pad .container > *, .section-pad article > * { min-width: 0; }

.section--magenta {
  color: #fff;
  background-color: var(--color-brand);
  background-image: url("/assets/images/retake/brand-pattern.svg");
  background-position: calc(100% + 285px) 50%;
  background-repeat: no-repeat;
  background-size: 720px;
}

/* Reserve exactly the original header height so fixing it never moves the FV. */
body.office-eri-site { padding-top: var(--header-height); }
.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-height);
  isolation: isolate;
  background: transparent;
}
/* Blur only the background layer, not the header or the fixed mobile drawer. */
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: var(--color-blush);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled::before {
  background: rgba(253, 243, 243, .70);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
  backdrop-filter: blur(16px) saturate(112%);
  box-shadow: 0 4px 20px rgba(74, 11, 36, .07);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled::before { background: rgba(253, 243, 243, .97); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 64px), 1850px);
  height: 100%;
  margin-inline: auto;
  gap: 30px;
}

.site-brand { flex: 0 0 300px; }
.site-brand img { width: 300px; max-height: 68px; object-fit: contain; object-position: left center; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(30px, 2.55vw, 48px);
  color: var(--color-brand-ui);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}

.primary-nav a { position: relative; white-space: nowrap; }
.primary-nav a:not(.nav-contact)::after {
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 1px;
  content: "";
  background: currentColor;
  transition: right .25s, left .25s;
}
.primary-nav a:hover::after,
.primary-nav a.is-active::after { right: 0; left: 0; }
.nav-contact { padding: 12px 27px; color: #fff; background: var(--color-brand-ui); border-radius: 5px; }
.menu-toggle { display: none; align-items: center; border: 0; color: var(--color-brand-ui); background: transparent; gap: 7px; }

.site-footer {
  --footer-wave-height: 310px;
  position: relative;
  z-index: 1;
  padding-top: calc(var(--space-section) + var(--footer-wave-height) * .72);
  overflow: hidden;
  color: #fff;
  background: var(--color-brand);
}

.site-footer__wave {
  position: absolute;
  z-index: 0;
  top: -1px;
  left: 50%;
  width: var(--full-bleed-wave-width);
  height: var(--footer-wave-height);
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  transform: translateX(-50%);
}

.site-footer__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: var(--space-content);
}

.footer-address { padding-bottom: var(--space-content); font-family: var(--font-sans); font-size: var(--text-small); line-height: 1.8; }
.footer-name { font-family: var(--font-serif); font-size: var(--text-h4); }
.footer-phone { margin-block: var(--space-paragraph); }
.footer-phone a { display: inline-block; margin-left: 5px; font-family: var(--font-serif); font-size: var(--text-h3); }
.footer-phone small { font-size: inherit; }
.footer-address .button { min-width: 0; max-width: 100%; text-align: center; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: center; gap: 16px 24px; font-family: var(--font-sans); font-size: var(--text-small); }
.footer-visual { position: relative; z-index: 3; align-self: end; }
.footer-visual img { width: 100%; max-height: 285px; object-fit: contain; object-position: center bottom; }
.site-footer__bottom { position: relative; z-index: 4; background: rgba(82, 11, 20, .26); }
.site-footer__bottom .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 80px; padding-block: 16px; gap: 16px; }
.site-footer__bottom img { width: 245px; }
.site-footer__bottom small { font-family: var(--font-sans); font-size: 12px; letter-spacing: .08em; }

/* assets/css/components.css */
.script-text {
  display: inline-block;
  font-family: var(--font-script);
  font-size: clamp(58px, 5.3vw, 96px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: 0;
  /* Share the approved additional slant across headings and signature. */
  transform: skewX(var(--font-script-skew));
  transform-origin: left bottom;
}
.section-heading { position: relative; z-index: 1; margin-bottom: var(--space-heading); text-align: center; }
.section-heading .script-text { font-size: calc(var(--text-display) * 1.04); line-height: 1.1; }
.section-heading > p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; margin-bottom: var(--space-heading-label); color: var(--color-brand-ui); gap: 16px 36px; }
.section-heading > p:last-child { margin-bottom: 0; }
/* Follow the FV role's responsive scale, with a small 12 -> 13px lift. */
.section-heading > p > span:last-child { flex-shrink: 0; font-family: var(--font-sans); font-size: calc(var(--section-label-size, .75rem) * 13 / 12); font-weight: 400; }
.section-heading h2 { margin-bottom: 0; font-size: var(--heading-h2-size); font-weight: 400; }
.section-heading--left { text-align: left; }
.section-heading--left > p { justify-content: flex-start; }
.section-heading--inline { display: flex; align-items: baseline; justify-content: flex-start; text-align: left; gap: var(--space-content); }
.section-heading--inline > p { flex: none; justify-content: flex-start; }
.section-heading--inline > h2 { min-width: 0; }
.section-heading--light > p, .section-heading--light h2 { color: #fff; }
/* Readable section copy, with serif headings retained. FV/header are excluded. */
.section-pad { font-family: var(--font-sans); }
.section-pad :is(h2, h3, h4),
.timeline-card > strong,
.contact__phone a { font-family: var(--font-serif); }
.prose p { margin-bottom: var(--space-paragraph); font-size: var(--text-body); line-height: var(--leading-body); }
.prose p:last-child { margin-bottom: 0; }
.prose--light { color: #fff; }
/* Running Japanese copy only. Keep the last (or sole) line left-aligned;
 * headings, signatures and centered short card captions are not included. */
.hero__copy > p,
.section-pad .prose p,
.voice-card p,
.policy-box p {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-character;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 275px;
  min-height: 52px;
  padding: 12px 28px;
  border: 1px solid var(--color-brand-ui);
  color: #fff;
  background: var(--color-brand-ui);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-button, 1rem);
  font-weight: 600;
  transition: color .2s, background .2s, transform .2s;
  gap: 10px;
}
.button:hover { color: var(--color-brand-ui); background: #fff; transform: translateY(-2px); }
.button svg { width: 17px; }
.button--light { border-color: #fff; color: var(--color-brand-ui); background: #fff; }
.button--light:hover { color: #fff; background: transparent; }
.button--outline-light { border-color: rgba(255,255,255,.75); color: #fff; background: transparent; }
.button--outline-light:hover { color: var(--color-brand-ui); background: #fff; }
.button--small { min-width: 0; min-height: 44px; font-size: var(--text-button, 1rem); }
.section-pad .button { min-width: min(275px, 100%); max-width: 100%; text-align: center; }
.section-action { position: relative; z-index: 2; margin-top: var(--space-action); text-align: center; }
.text-link { display: inline-flex; align-items: center; color: var(--color-brand-ui); font-family: var(--font-sans); font-size: var(--text-small, .875rem); font-weight: 600; gap: 8px; }
.text-link svg { width: 15px; }
.section-flower { position: absolute; z-index: 0; pointer-events: none; }
.carousel-controls { display: flex; align-items: center; justify-content: center; margin-top: var(--space-action); gap: 18px; }
.carousel-controls button { display: grid; width: 52px; height: 52px; padding: 0; border: 0; color: #fff; background: var(--color-brand-ui); border-radius: 50%; place-items: center; cursor: pointer; }
.carousel-controls button:disabled { opacity: .35; cursor: default; }
.carousel-controls--light button { color: var(--color-brand-ui); background: #fff; }
.carousel-dots { display: flex; align-items: center; min-width: 170px; gap: 14px; }
.carousel-dots i { width: 8px; height: 8px; background: #d4c4cc; border-radius: 50%; }
.carousel-dots i.is-active { width: 12px; height: 12px; background: var(--color-brand-ui); }

/* assets/css/sections.css */
/* Profile ------------------------------------------------------------ */
.profile { isolation: isolate; overflow: hidden; background: var(--color-blush); }
.profile__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: var(--space-content); }
.profile__visual { position: relative; container-type: inline-size; width: min(100%, 490px); margin-top: 88px; padding-bottom: 64px; }
.profile__portrait { width: 100%; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 11px rgba(255,255,255,.72); }
.profile__portrait img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }
.profile__content { max-width: 835px; }
.profile__visual .flower-cluster--profile { --profile-flower-unit: calc(100cqw / 700); top: calc(120 * var(--profile-flower-unit)); left: calc(-150 * var(--profile-flower-unit)); bottom: auto; width: calc(665 * var(--profile-flower-unit)); height: calc(700 * var(--profile-flower-unit)); transform: none; }
.profile__visual .flower-cluster--profile img:nth-child(1) { top: 0; left: calc(42 * var(--profile-flower-unit)); width: calc(250 * var(--profile-flower-unit)); }
.profile__visual .flower-cluster--profile img:nth-child(2) { top: calc(125 * var(--profile-flower-unit)); left: calc(-2 * var(--profile-flower-unit)); width: calc(242 * var(--profile-flower-unit)); }
.profile__visual .flower-cluster--profile img:nth-child(3) { top: calc(250 * var(--profile-flower-unit)); left: calc(90 * var(--profile-flower-unit)); width: calc(255 * var(--profile-flower-unit)); }
.profile__visual .flower-cluster--profile img:nth-child(4) { top: calc(382 * var(--profile-flower-unit)); left: calc(220 * var(--profile-flower-unit)); width: calc(238 * var(--profile-flower-unit)); }
.profile__visual .flower-cluster--profile img:nth-child(5) { top: calc(478 * var(--profile-flower-unit)); left: calc(368 * var(--profile-flower-unit)); width: calc(215 * var(--profile-flower-unit)); }

.timeline { position: relative; z-index: 5; margin-top: var(--space-content); }
.timeline__track { display: flex; gap: var(--space-grid); padding: 16px max(var(--section-gutter), calc((100% - var(--container))/2)); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; scroll-snap-type: x mandatory; }
.timeline__track::-webkit-scrollbar,
.voice-carousel__track::-webkit-scrollbar { display: none; }
.timeline-card { flex: 0 0 305px; padding: var(--space-card); background: #fff; box-shadow: var(--shadow-card); scroll-snap-align: center; }
.timeline-card strong { display: block; margin-bottom: 8px; color: var(--color-brand-ui); font-size: var(--text-h3); font-weight: 500; }
.timeline-card strong small { font-size: var(--text-small); }
.timeline-card p { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); }

/* Lecture ------------------------------------------------------------ */

.lecture__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-content); }

.lecture__visuals { padding-top: 0; }
.lecture__main { width: 100%; height: 470px; object-fit: cover; object-position: center; border-radius: 5px; }
.lecture-gallery { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 9px; gap: 9px; }
.lecture-gallery img { width: 100%; height: 130px; object-fit: cover; border-radius: 5px; }

.schedule-list { position: relative; margin: var(--space-content) 0 0; padding: 0 0 0 32px; list-style: none; }
.schedule-list::before { position: absolute; top: 15px; bottom: 15px; left: 8px; width: 1px; content: ""; background: rgba(255,255,255,.8); }
.schedule-list li { position: relative; display: flex; flex-direction: column; margin-bottom: 16px; }
.schedule-list li:last-child { margin-bottom: 0; }
.schedule-list li::before { position: absolute; top: 12px; left: -32px; width: 17px; height: 17px; content: ""; background: #fff; border-radius: 50%; }
.schedule-list strong { font-size: var(--text-body); font-weight: 500; }
.schedule-list span { font-size: var(--text-small); }

/* Lessons ------------------------------------------------------------ */
.lessons { background: var(--color-blush); }
.lesson-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-grid); }
.lesson-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 7px; box-shadow: 0 8px 18px rgba(98, 0, 44, .08); }
.lesson-card__copy { flex: 1; padding: var(--space-card); text-align: center; }
.lesson-card--basic .lesson-card__copy { background: #f8eeee; }
.lesson-card--advance .lesson-card__copy { background: #dfb7b8; }
.lesson-card--master .lesson-card__copy { color: #fff; background: #bd6870; }
.lesson-card h3 { margin-bottom: 16px; color: var(--color-brand-ui); font-size: var(--heading-h3-size); }
.lesson-card--master h3 { color: #fff; }
.lesson-card span { display: inline-block; margin-bottom: 16px; padding: 4px 24px; color: var(--color-brand-ui); background: #fff; border-radius: 4px; font-family: var(--font-sans); font-size: var(--text-small); font-weight: 600; }
.lesson-card p { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); }
.lesson-card img { width: 100%; height: 290px; object-fit: cover; transition: transform .45s; }
.lesson-card a:hover img { transform: scale(1.035); }

/* Voice -------------------------------------------------------------- */

.voice-carousel { position: relative; z-index: 3; }
.voice-carousel__track { display: flex; gap: var(--space-grid); padding: 16px max(var(--section-gutter), calc((100% - var(--container))/2)); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; scroll-snap-type: x mandatory; }
.voice-card { flex: 0 0 320px; padding: var(--space-card); color: var(--color-ink); background: #fff; border-radius: 5px; scroll-snap-align: center; }
.voice-card p { margin-bottom: var(--space-paragraph); font-size: var(--text-body); line-height: var(--leading-body); }
.voice-card strong { font-size: var(--text-small); font-weight: 400; }
.voice-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: var(--space-action); gap: var(--space-grid) var(--space-content); padding-inline: var(--section-gutter); }
.voice-actions .carousel-controls { margin-top: 0; }

/* Projects ----------------------------------------------------------- */

.projects > .container { position: relative; z-index: 3; }
.projects .section-heading h2 { font-size: var(--heading-h2-size); }
.project-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); max-width: 1370px; overflow: hidden; margin: 0 auto var(--space-content); background: var(--color-blush); border-radius: 7px; }
.project-feature > img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.project-feature > div { align-self: center; padding: var(--space-content); text-align: center; }
.project-feature h3 { margin-bottom: var(--space-paragraph); color: var(--color-brand-ui); font-size: var(--heading-h3-size); }
.project-feature p { margin-bottom: var(--space-paragraph); }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1370px; margin-inline: auto; gap: var(--space-grid); }
.project-card { display: flex; flex-direction: column; align-items: center; overflow: hidden; padding-bottom: var(--space-card); background: var(--color-blush); text-align: center; border-radius: 7px; }
.project-card > a:first-child { width: 100%; }
.project-card > .text-link { margin-top: auto; padding-inline: var(--space-card); }
.project-card img { width: 100%; height: 220px; object-fit: cover; }
.project-card h3 { padding-inline: var(--space-card); margin: var(--space-card) 0 16px; color: var(--color-brand-ui); font-size: var(--heading-h3-size); }
.project-card p { padding-inline: var(--space-card); margin-bottom: var(--space-paragraph); font-size: var(--text-body); }

/* Book / Media ------------------------------------------------------- */

.book__grid,
.media__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-content); }

.book .section-heading > p { white-space: normal; }
.book__grid > div > p,
.media__grid > div > p { margin-bottom: var(--space-paragraph); }
.book__image { width: min(100%, 560px); justify-self: center; }

.media__grid { position: relative; z-index: 3; }
.media__image { width: min(100%, 550px); justify-self: center; }

/* Instagram ---------------------------------------------------------- */

.instagram-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1240px; margin-inline: auto; gap: var(--space-grid); }
.instagram-grid a { display: block; box-shadow: var(--shadow-card); transition: transform .25s; }
.instagram-grid a:hover { transform: translateY(-5px); }
.instagram-grid img { width: 100%; height: auto; }

/* Contact ------------------------------------------------------------ */
.contact { overflow: hidden; background: var(--color-blush); }
.contact__inner { position: relative; z-index: 3; }
.contact__phone { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; margin: 0 0 var(--space-content); color: var(--color-brand-ui); gap: 8px; }
.contact__phone small { font-family: var(--font-sans); font-size: var(--text-small); }
.contact__phone a { font-size: var(--text-h2); font-weight: 600; letter-spacing: .04em; }
.contact__phone span { margin-left: 0; font-size: var(--text-small); }
.contact-form { display: flex; flex-direction: column; width: min(100%, 1040px); margin-inline: auto; gap: var(--space-paragraph); }
.form-row { display: grid; grid-template-columns: 190px 60px minmax(0, 1fr); align-items: center; gap: 10px; }
.form-row label,
.form-row > span:first-child { font-size: var(--text-body); }
.required { justify-self: start; padding: 0 12px; border: 1px solid var(--color-brand-ui); color: var(--color-brand-ui); border-radius: 999px; font-family: var(--font-sans); font-size: .75rem; line-height: 25px; }
.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea { width: 100%; min-width: 0; border: 1px solid #b96470; background: rgba(255,255,255,.78); border-radius: 5px; font-size: var(--text-body); }
.contact-form input:not([type="checkbox"]),
.contact-form select { min-height: 44px; padding: 6px 14px; }
.contact-form textarea { padding: 15px; resize: vertical; }
.form-row--textarea { align-items: start; }
.form-row--textarea label,
.form-row--textarea .required,
.form-row--policy > span:first-child,
.form-row--policy .required { margin-top: 10px; }
.form-row--policy { align-items: start; }
.policy-box { max-height: 220px; padding: var(--space-card); overflow-y: auto; border: 1px solid #b96470; background: #fff; border-radius: 5px; font-size: var(--text-small); }
.policy-box p { margin-block: 16px 0; }
.form-consent { display: flex; align-items: center; margin-left: 270px; font-size: var(--text-small); gap: 10px; }
.form-consent input { flex-shrink: 0; width: 20px; height: 20px; accent-color: var(--color-brand-ui); }
.form-status { min-height: 25px; margin: 0; text-align: center; font-family: var(--font-sans); font-size: var(--text-small); }
.form-status.is-error { color: #b00020; }
.form-status.is-success { color: #087d50; }
.form-submit { width: calc(100% - 270px); margin-left: 270px; border: 0; cursor: pointer; }

/* assets/css/decorations.css */
/*
 * Decorative layers
 * FV: 1 geometry, 2 flowers, 3 petals, 4 copy,
 * 7 ribbon, 8 original transparent portrait. All FV flowers stay behind it.
 * Other sections keep their own local stacking contexts.
 */
.section-framed { position: relative; isolation: isolate; overflow: hidden; }
.section-framed > .container,
.section-framed > .voice-carousel,
.section-framed > .section-action { position: relative; z-index: 3; }

.section-wave-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.section-wave__ground { fill: var(--color-blush); }
.section-wave__soft { fill: var(--color-wave-soft); }
.section-wave__middle { fill: var(--color-wave-middle); }
.section-wave__main { fill: currentColor; }
.section-wave__light { fill: var(--color-wave-light); }
.section-wave__light-accent { fill: var(--color-wave-light-accent); }
.section-wave__gold { fill: none; stroke: var(--color-gold); stroke-width: 1; }
.site-footer__wave { display: block; color: var(--color-brand); }

.section-wave {
  display: block;
  /* Use the exact section background colour at the wave-to-section join. */
  color: var(--color-brand);
  position: absolute;
  z-index: 1;
  left: 50%;
  width: var(--full-bleed-wave-width);
  height: var(--section-wave-height, 335px);
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  transform: translateX(-50%);
  user-select: none;
}

.section-wave--top { top: -1px; }
.section-wave--bottom { bottom: -1px; }
.section-wave--contact { top: -1px; height: var(--section-contact-wave-height, 300px); object-fit: fill; }

.flower-cluster,
.petal-field { position: absolute; pointer-events: none; }
.flower-cluster { z-index: 2; }
.flower-cluster img,
.petal-field img { position: absolute; max-width: none; }

/* Default FV bouquet coordinates. Portrait tablets recompose these groups
 * in hero.css, including omitting a redundant filler. Source PNG colours
 * and alpha are never modified. Check roots against the ribbon after reflow. */
.flower-cluster--hero {
  --bouquet-unit: var(--hero-unit);
  top: calc(125 * var(--bouquet-unit));
  right: calc(130 * var(--bouquet-unit));
  width: calc(600 * var(--bouquet-unit));
  height: calc(740 * var(--bouquet-unit));
}
.flower-cluster--hero .flower,
.flower-cluster--hero-low .flower {
  top: calc(var(--flower-y) * var(--hero-unit));
  left: calc(var(--flower-x) * var(--hero-unit));
  width: calc(var(--flower-size) * var(--hero-unit));
  z-index: var(--flower-layer);
  transform: rotate(var(--flower-tilt));
}
/* Complete blooms continue behind the portrait, independent of its silhouette. */
.flower-cluster--hero .flower--bridge-middle { --flower-x: -60; --flower-y: 215; --flower-size: 380; --flower-tilt: -8deg; --flower-layer: 0; }
.flower-cluster--hero .flower--bridge-low { --flower-x: -240; --flower-y: 300; --flower-size: 390; --flower-tilt: -16deg; --flower-layer: 0; }
.flower-cluster--hero .flower--bridge-base { --flower-x: -225; --flower-y: 420; --flower-size: 385; --flower-tilt: 12deg; --flower-layer: 0; }
.flower-cluster--hero .flower--bridge-link { --flower-x: 15; --flower-y: 415; --flower-size: 300; --flower-tilt: 12deg; --flower-layer: 0; }
.flower-cluster--hero .flower--crown { --flower-x: 338; --flower-y: -27; --flower-size: 300; --flower-tilt: 18deg; --flower-layer: 2; }
.flower-cluster--hero .flower--upper { --flower-x: 135; --flower-y: 80; --flower-size: 500; --flower-tilt: 12deg; --flower-layer: 3; }
.flower-cluster--hero .flower--outer-bud { --flower-x: 482; --flower-y: 302; --flower-size: 125; --flower-tilt: 20deg; --flower-layer: 2; }
.flower-cluster--hero .flower--lower { --flower-x: 212; --flower-y: 375; --flower-size: 310; --flower-tilt: -10deg; --flower-layer: 6; }
.flower-cluster--hero .flower--base { --flower-x: 196; --flower-y: 510; --flower-size: 180; --flower-tilt: -18deg; --flower-layer: 7; }
/* Slender bud: the approved root-to-wave contact is part of the scene. */
.flower-cluster--hero .flower--base-outer { --flower-x: 420; --flower-y: 430; --flower-size: 225; --flower-tilt: 30deg; --flower-layer: 7; }
.flower-cluster--hero-low {
  top: calc(530 * var(--hero-unit));
  left: calc(610 * var(--hero-unit));
  width: calc(590 * var(--hero-unit));
  height: calc(350 * var(--hero-unit));
}
.flower-cluster--hero-low .flower--bud { --flower-x: 220; --flower-y: 18; --flower-size: 105; --flower-tilt: -18deg; --flower-layer: 1; }
.flower-cluster--hero-low .flower--1 { --flower-x: 64; --flower-y: 146; --flower-size: 185; --flower-tilt: -42deg; --flower-layer: 3; }
.flower-cluster--hero-low .flower--2 { --flower-x: 80; --flower-y: -65; --flower-size: 415; --flower-tilt: -4deg; --flower-layer: 2; }
.flower-cluster--hero-low .flower--3 { --flower-x: 252; --flower-y: 136; --flower-size: 165; --flower-tilt: 20deg; --flower-layer: 4; }

.petal-field { z-index: 3; inset: 0; }
.petal-field--hero > :nth-child(1) { top: calc(38 * var(--hero-unit)); right: 8%; width: calc(54 * var(--hero-unit)); transform: rotate(25deg); }
.petal-field--hero > :nth-child(2) { top: calc(225 * var(--hero-unit)); right: 31%; width: calc(42 * var(--hero-unit)); transform: rotate(-42deg); }
.petal-field--hero > :nth-child(3) { top: calc(145 * var(--hero-unit)); right: 21%; width: calc(46 * var(--hero-unit)); transform: rotate(62deg); }
.petal-field--hero .petal--left { top: calc(640 * var(--hero-unit)); left: calc(650 * var(--hero-unit)); width: calc(64 * var(--hero-unit)); transform: rotate(-20deg); }
/* Lower-left accent: centred near the marked (460,739) point at 1569px. */
.petal-field--hero .petal--left-low { top: calc(765 * var(--hero-unit)); left: calc(540 * var(--hero-unit)); width: calc(60 * var(--hero-unit)); transform: rotate(-55deg); }

/* Profile bouquet wraps the portrait in one tapered S-shaped mass. */
.flower-cluster--profile { z-index: 4; top: 240px; left: -8px; width: 665px; height: 700px; }
.flower-cluster--profile img:nth-child(1) { top: 0; left: 42px; width: 250px; transform: rotate(-28deg); }
.flower-cluster--profile img:nth-child(2) { top: 125px; left: -2px; width: 242px; transform: rotate(18deg); }
.flower-cluster--profile img:nth-child(3) { top: 250px; left: 90px; width: 255px; transform: rotate(-12deg); }
.flower-cluster--profile img:nth-child(4) { top: 382px; left: 220px; width: 238px; transform: rotate(27deg); }
.flower-cluster--profile img:nth-child(5) { top: 478px; left: 368px; width: 215px; transform: rotate(44deg); }

/* Decorative bouquets sit at section edges and meet the wave boundary. */
.flower-cluster--lecture { z-index: 5; right: 8px; bottom: 45px; width: 575px; height: 470px; }
.flower-cluster--lecture img:nth-child(1) { right: 8px; bottom: 0; width: 245px; transform: rotate(25deg); }
.flower-cluster--lecture img:nth-child(2) { right: 162px; bottom: 18px; width: 235px; transform: rotate(-18deg); }
.flower-cluster--lecture img:nth-child(3) { right: 36px; bottom: 170px; width: 220px; transform: rotate(43deg); }
.flower-cluster--lecture img:nth-child(4) { right: 265px; bottom: 154px; width: 195px; transform: rotate(-34deg); }

.flower-cluster--voice { z-index: 5; bottom: 40px; left: -22px; width: 520px; height: 440px; }
.flower-cluster--voice img:nth-child(1) { bottom: 0; left: 0; width: 230px; transform: rotate(-20deg); }
.flower-cluster--voice img:nth-child(2) { bottom: 118px; left: 96px; width: 222px; transform: rotate(18deg); }
.flower-cluster--voice img:nth-child(3) { right: 36px; bottom: 38px; width: 205px; transform: rotate(42deg); }
.flower-cluster--voice img:nth-child(4) { top: 2px; left: 5px; width: 182px; transform: rotate(-43deg); }

.flower-cluster--projects { z-index: 4; top: -72px; left: -15px; width: 445px; height: 360px; }
.flower-cluster--projects img:nth-child(1) { top: 0; left: 95px; width: 210px; transform: rotate(20deg); }
.flower-cluster--projects img:nth-child(2) { top: 112px; left: 0; width: 220px; transform: rotate(-32deg); }
.flower-cluster--projects img:nth-child(3) { top: 142px; right: 5px; width: 195px; transform: rotate(38deg); }

.flower-cluster--contact { z-index: 4; bottom: -12px; left: -18px; width: 540px; height: 480px; }
.flower-cluster--contact img:nth-child(1) { bottom: 0; left: 0; width: 235px; transform: rotate(-28deg); }
.flower-cluster--contact img:nth-child(2) { bottom: 90px; left: 128px; width: 225px; transform: rotate(17deg); }
.flower-cluster--contact img:nth-child(3) { top: 0; left: 24px; width: 205px; transform: rotate(-40deg); }
.flower-cluster--contact img:nth-child(4) { right: 0; bottom: 28px; width: 190px; transform: rotate(43deg); }

.flower-cluster--footer { z-index: 2; right: 0; bottom: 66px; width: 520px; height: 360px; }
.flower-cluster--footer img:nth-child(1) { right: 0; bottom: 0; width: 225px; transform: rotate(26deg); }
.flower-cluster--footer img:nth-child(2) { right: 150px; bottom: 8px; width: 215px; transform: rotate(-18deg); }
.flower-cluster--footer img:nth-child(3) { right: 22px; bottom: 145px; width: 200px; transform: rotate(40deg); }
.flower-cluster--footer img:nth-child(4) { right: 245px; bottom: 126px; width: 170px; transform: rotate(-34deg); }

/* assets/css/responsive.css */
@media (max-width: 1420px) {
  :root { --header-height: 92px; --full-bleed-wave-width: max(138vw, 1900px); }
  .site-brand { flex-basis: 250px; }
  .site-brand img { width: 250px; }
  .primary-nav { gap: 16px; font-size: 11px; }
  .nav-contact { padding-inline: 18px; }
}

@media (max-width: 1100px) {
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1023.98px) {
  .menu-toggle { display: flex; margin-left: auto; cursor: pointer; }
  .primary-nav {
    position: fixed;
    z-index: 1001;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(390px, 88vw);
    padding: clamp(20px, 5vh, 40px) 32px;
    color: var(--color-brand-ui);
    background: var(--color-blush);
    box-shadow: -15px 20px 40px rgba(70, 0, 35, .16);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility .28s, opacity .28s ease;
    gap: 0;
  }
  .primary-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
  .primary-nav a { padding: 14px 5px; border-bottom: 1px solid #f0dce6; font-size: 14px; }
  .primary-nav .nav-contact { margin-top: 20px; padding: 13px 20px; color: #fff; text-align: center; }
}

@media (max-width: 800px) {
  :root { --header-height: 78px; --full-bleed-wave-width: max(190vw, 1050px); }
  body { font-size: 15px; }
  .site-header__inner { width: calc(100% - 30px); }
  .site-brand { flex-basis: 208px; }
  .site-brand img { width: 208px; }
  .script-text { font-size: 58px; }
  .section-heading--left > p { align-items: flex-start; }
  .section-heading--inline { display: block; text-align: center; }
  .section-heading--inline > p { align-items: center; }
  .profile__grid { display: flex; flex-direction: column; }
  .profile__portrait { order: 1; align-self: center; margin: 0; }
  .profile__content { order: 0; }
  .profile__content .section-heading { text-align: center; }
  .profile__content .section-heading > p { align-items: center; }
  .timeline-card { flex-basis: 260px; }
  .carousel-dots { display: none; }
  .lecture__grid { display: flex; flex-direction: column; }
  .lecture__copy { padding-left: 0; }
  .lecture__visuals { padding-top: 0; }
  .lecture__main { height: 320px; }
  .lecture-gallery { grid-template-columns: repeat(2, 1fr); }
  .lecture-gallery img { height: 115px; }

  .lesson-grid,
  .project-grid,
  .instagram-grid { grid-template-columns: 1fr; }
  .lesson-grid { max-width: 460px; margin-inline: auto; }
  .lesson-card img { height: 260px; }
  .voice-card { flex-basis: min(310px, calc(100vw - 80px)); }
  .voice-actions { flex-direction: column; }
  .flower-cluster--voice { bottom: -60px; left: -195px; transform: scale(.58); transform-origin: bottom left; }
  .flower-cluster--lecture { right: -235px; bottom: -38px; transform: scale(.58); transform-origin: bottom right; }
  .flower-cluster--projects { top: -142px; left: -190px; transform: scale(.57); transform-origin: top left; }
  .project-feature { grid-template-columns: 1fr; }
  .project-feature > img { height: 285px; min-height: 0; }
  .project-grid { max-width: 500px; margin-inline: auto; }
  .project-card img { height: 260px; }

  .book__grid,
  .media__grid { grid-template-columns: 1fr; text-align: center; }
  .book .section-heading > p { white-space: normal; }
  .book .section-heading,
  .media .section-heading { text-align: center; }
  .book .section-heading > p,
  .media .section-heading > p { align-items: center; }
  .book__image { width: min(420px, 90%); }
  .media__image { width: min(480px, 95%); justify-self: center; }
  .instagram-grid { grid-template-columns: repeat(2, 1fr); max-width: 550px; }
  .contact__phone { flex-wrap: wrap; }
  .contact__phone span { flex-basis: 100%; text-align: center; }
  .form-row { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .form-row > input,
  .form-row > select,
  .form-row > textarea,
  .form-row > .policy-box { grid-column: 1 / -1; }
  .form-consent,
  .form-submit { width: 100%; margin-left: 0; }
  .flower-cluster--contact { bottom: -80px; left: -195px; transform: scale(.58); transform-origin: bottom left; opacity: .82; }

  .site-footer { --footer-wave-height: 125px; }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-content); }
  .footer-address { padding-bottom: 0; text-align: center; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); max-width: 450px; margin-inline: auto; }
  .footer-visual { justify-self: center; max-width: 430px; }
  .flower-cluster--footer { right: -205px; bottom: 82px; transform: scale(.52); }
  .site-footer__bottom .container { flex-direction: column; justify-content: center; padding-block: 24px; text-align: center; }
  .site-footer__bottom img { width: 250px; }
}

@media (max-width: 480px) {
  :root { --header-height: 62px; }
  .section--magenta { background-position: calc(100% + 205px) 62%; background-size: 520px; }
  .site-brand { flex-basis: 145px; }
  .site-brand img { width: 145px; }
  .menu-toggle { font-size: 10px; }
  .menu-toggle svg { width: 20px; }
  .profile__content .section-heading { text-align: left; }
  .profile__content .section-heading > p { align-items: flex-start; }
  .timeline-card { flex-basis: calc(100vw - 64px); }
  .lecture .section-heading,
  .voice .section-heading { text-align: left; }
  .lecture .section-heading > p,
  .voice .section-heading > p { align-items: flex-start; justify-content: flex-start; }
  .voice-card { flex-basis: calc(100vw - 64px); }
  .projects .section-heading,
  .book .section-heading { text-align: left; }
  .projects .section-heading > p,
  .book .section-heading > p { align-items: flex-start; justify-content: flex-start; }
  .project-feature > img { height: 250px; min-height: 0; }
  .project-card img { height: 180px; }
  .button { min-width: min(270px, 100%); }
  .instagram-grid { grid-template-columns: 1fr 1fr; }
}


/* Content reflow follows readable text, independent of FV composition.
 * Keep long headings/paragraphs out of narrow legacy fixed-width columns. */
@media (max-width: 1199px) {
  .section-heading--inline { display: block; }
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .profile__grid { display: flex; flex-direction: column; gap: var(--space-content); }
  .profile__content { order: 0; width: 100%; max-width: none; }
  .profile__visual { order: 1; align-self: center; width: min(80%, 400px); margin: 0; }
  .profile__portrait { width: 100%; }
  .profile__content .section-heading { text-align: left; }
  .profile__content .section-heading > p { align-items: baseline; justify-content: flex-start; }
  .lecture__grid { display: flex; flex-direction: column; gap: var(--space-content); }
  .book__grid, .media__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-content); }
  .book__grid, .media__grid, .book .section-heading, .media .section-heading { text-align: left; }
  .book .section-heading > p, .media .section-heading > p { align-items: flex-start; justify-content: flex-start; }
  .book__image, .media__image { width: min(100%, 480px); justify-self: center; }
  .lesson-grid, .project-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .project-feature { grid-template-columns: minmax(0, 1fr); }
  .project-feature > img { height: 320px; min-height: 0; }
  .project-feature > div { padding: var(--space-content); }
  .instagram-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  .form-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .form-row > input, .form-row > select, .form-row > textarea, .form-row > .policy-box { grid-column: 1 / -1; }
  .form-consent, .form-submit { width: 100%; margin-left: 0; }
  .form-row--textarea label, .form-row--textarea .required,
  .form-row--policy > span:first-child, .form-row--policy .required { margin-top: 0; }
}
@media (width < 600px), (width < 1024px) and (height <= 500px) and (orientation: landscape) {
  .section-heading > p { row-gap: 12px; }
  .section-heading--left > p { align-items: flex-start; }
  .profile__visual { width: min(85%, 360px); }
  .project-feature > img { height: 260px; }
  .timeline-card, .voice-card { flex-basis: min(320px, calc(100vw - 2 * var(--section-gutter))); }
  .contact__phone span { flex-basis: 100%; text-align: center; }
  .section-pad br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* assets/css/hero.css */
/* FV responsive composition
 * Typography: approved at 1554px; artwork coordinates: legacy 1920-unit board.
 * Portrait and wave share ONE scene to preserve the hand contact. Portrait
 * tablets recompose the bouquets behind the full-sized figure instead of
 * shrinking the whole desktop arrangement to fit the viewport.
 */
.hero-frame {
  position: relative;
  isolation: isolate;
  z-index: 1;
  container: hero-stage / inline-size;
  background: var(--color-blush);
}
.hero {
  /* Wide displays expand the whole composition, not just the artwork. Keep
   * the PNG ends beyond the viewport without a hero-only fog/fade mask. */
  --design-stage-max: max(1800px, calc(100cqw * 1920 / 2200));
  --hero-unit: calc(min(100cqw, var(--design-stage-max)) / 1920);
  /* Same parameters as section edges, resolved against the actual canvas.
   * cqw avoids resolving percentages against a flower/image's own parent. */
  --hero-content-gutter: clamp(var(--gutter-min), calc(min(100cqw, var(--design-stage-max)) * var(--gutter-ratio) + var(--gutter-offset)), var(--gutter-max));
  position: relative;
  width: min(100%, var(--design-stage-max));
  margin-inline: auto;
  background: var(--color-blush);
}
.hero .hero__inner {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}
.hero__copy {
  position: absolute;
  z-index: 4;
  top: calc(90 * var(--hero-unit));
  left: calc(180 * var(--hero-unit));
  width: calc(700 * var(--hero-unit));
  letter-spacing: var(--tracking-copy);
}
.hero h1 {
  margin-bottom: var(--space-copy);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  white-space: nowrap;
}
.hero h1 em { color: var(--color-brand-ui); font-style: normal; }
.hero__copy > p {
  margin-bottom: var(--space-copy);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}
.hero__signature { display: flex; flex-direction: column; align-items: flex-start; color: var(--color-brand-ui); }
.hero__signature .script-text { font-family: var(--font-signature); font-size: var(--text-signature); }
.hero__signature > span:nth-child(2) { margin-top: var(--space-copy); color: var(--color-ink); font-size: var(--text-meta); }
.hero__signature strong { color: var(--color-ink); font-size: var(--text-name); font-weight: 400; }
.hero__signature small { margin-left: calc(10 * var(--hero-unit)); color: var(--color-brand-ui); font-family: var(--font-sans); font-size: var(--text-meta); }
/* Local accents for the compact tablet layouts. Keep them outside the
 * artwork clip so the upper petal can sit above the portrait scene. */
.hero__compact-petals { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero__compact-petals img { position: absolute; max-width: none; }
.hero__compact-petal--lower { display: none; }
.hero__scene { position: relative; isolation: isolate; width: calc(1920 * var(--hero-unit)); height: calc(930 * var(--hero-unit)); }
/* Keep foreground coordinates shared, but clip only the decorations so the
 * portrait's hat can extend above the art board. Neither wrapper creates a
 * stacking context: the portrait still paints above the ribbon. */
.hero__art { position: absolute; inset: 0; overflow: visible; }
.hero__decor { position: absolute; inset: 0; overflow: hidden; }
.hero__portrait { position: absolute; inset: 0; }
.hero__portrait img {
  position: absolute;
  z-index: 8;
  left: calc(821 * var(--hero-unit));
  bottom: calc(62 * var(--hero-unit));
  width: calc(812 * var(--hero-unit));
  max-width: none;
  object-fit: contain;
}
.hero__pattern {
  position: absolute;
  z-index: 1;
  top: calc(36 * var(--hero-unit));
  right: calc(350 * var(--hero-unit));
  width: calc(900 * var(--hero-unit));
  aspect-ratio: 1;
  background: url("/assets/images/decor/gentian-geometry-v2.svg") center/92% no-repeat;
  opacity: .20;
  clip-path: inset(0 0 14% 0);
}
.hero__ribbon {
  position: absolute;
  z-index: 7;
  bottom: calc(-65 * var(--hero-unit));
  left: 50%;
  width: calc(1960 * var(--hero-unit));
  max-width: none;
  pointer-events: none;
  transform: translateX(-50%) scaleX(1.25);
}
.hero__rim-reflections {
  /* Same box, transform and stacking as the approved ribbon image. */
  height: auto;
  aspect-ratio: 2172 / 724;
  opacity: 0;
}

/* Compact PC: align the hat with the heading while keeping a modest amount
 * of room beneath the name. The type scale remains independent of the art. */
@media (min-width: 1024px) {
  @container hero-stage (max-width: 1300px) {
    .hero {
      --hero-unit: calc(100cqw / 1920 + clamp(0px, calc((1300px - 100cqw) * .000103), .03px));
      --compact-art-top: clamp(0px, calc((1300px - 100cqw) * .055), 16px);
      --leading-title: 1.4;
      --leading-lead: 1.7;
      padding-top: var(--compact-art-top);
      padding-bottom: calc(65 * var(--hero-unit));
    }
    .hero__scene { left: calc((100% - 1920 * var(--hero-unit)) / 2); }
    .hero__signature strong { line-height: 1.6; }
  }
}

/* Compact landscape tablets retain the PC-like composition.
 * Interpolate toward the approved 1024px compact-PC scene.
 * At 768px (753px content), the scene starts at x-114/y64 and uses .47px/u.
 * Keep these offsets shared with the atmosphere's wave-registered clip. */
@media (768px <= width < 1024px) and (orientation: landscape),
       (640px <= width < 768px) and (height > 500px) and (1 < aspect-ratio <= 3/2) {
  .hero {
    --hero-unit: clamp(.47px, calc(.47px + (100cqw - 753px) * .00021875), .526px);
    --tablet-art-shift: clamp(-114px, calc((100cqw - 1009px) * .445), 0px);
    --tablet-art-top: clamp(0px, calc((1009px - 100cqw) * .25), 64px);
    --tablet-copy-top: 2rem;
    --leading-title: 1.4;
    --leading-lead: 1.7;
    padding-top: var(--tablet-art-top);
    padding-bottom: calc(65 * var(--hero-unit));
    overflow: clip;
  }
  .hero__copy {
    top: var(--tablet-copy-top);
    left: var(--hero-content-gutter);
    width: clamp(340px, 44cqw, 390px);
  }
  .hero__scene { left: var(--tablet-art-shift); }
  .hero__signature strong { line-height: 1.6; }
}

/* Portrait tablets: lead with a large figure beside the heading. Anchor the
 * figure's visible right edge, not the PC bouquet's outer envelope. Recompose
 * flowers behind her; preserve the original portrait-to-ribbon registration. */
@media (768px <= width <= 1100px) and (orientation: portrait),
       (540px <= width < 768px) and (2/3 <= aspect-ratio <= 1) {
  .hero {
    --portrait-gutter: var(--hero-content-gutter);
    --hero-unit: clamp(.62px, calc(100cqw / 1380), .69px);
    --portrait-art-left: calc(100cqw - var(--portrait-gutter) - 1490 * var(--hero-unit));
    --portrait-copy-top: clamp(1.5rem, 4cqw, 2.5rem);
    --portrait-art-top: max(0px, calc(var(--portrait-copy-top) - 60 * var(--hero-unit)));
    --portrait-low-shift: clamp(24px, calc(24px + (897px - 100cqw) * .28), 64px);
    --leading-title: 1.5;
    --leading-lead: 1.8;
    --tracking-copy: .035em;
    padding-top: var(--portrait-art-top);
    padding-bottom: calc(65 * var(--hero-unit));
    overflow: clip;
  }
  .hero__copy {
    top: var(--portrait-copy-top);
    left: var(--portrait-gutter);
    width: calc(100% - 2 * var(--portrait-gutter));
  }
  .hero__scene { left: var(--portrait-art-left); }
  /* Move the complete foreground, keeping the ribbon/particles fixed. Use
   * offsets (not a transform) so the portrait still paints above the ribbon. */
  .hero__art { left: calc(-64 * var(--hero-unit)); right: calc(64 * var(--hero-unit)); }
  .hero__portrait img { left: calc(821 * var(--hero-unit) + 8px); }
  .flower-cluster--hero {
    transform: translateX(calc(-215 * var(--hero-unit))) scale(.84);
    transform-origin: bottom right;
  }
  /* Broad, edge-cropped blooms rather than three complete flowers stacked
   * vertically. The upper bloom's base tucks into the main flower; the slim
   * foreground bud joins the petals to the ribbon. */
  .flower-cluster--hero .flower--crown {
    --flower-x: 320; --flower-y: -215; --flower-size: 420; --flower-tilt: -15deg;
  }
  .flower-cluster--hero .flower--upper {
    --flower-x: 250; --flower-y: 30; --flower-size: 620; --flower-tilt: -10deg;
  }
  .flower-cluster--hero .flower--lower { display: none; }
  .flower-cluster--hero .flower--base-outer { --flower-y: 470; }
  .flower-cluster--hero .flower--outer-bud { display: none; }
  /* This filler is redundant behind the larger portrait and its pointed
   * base would otherwise emerge underneath the re-registered ribbon. */
  .flower-cluster--hero .flower--bridge-base { display: none; }
  /* Avoid near-coincident petal tips with the main lower-left bloom. */
  .flower-cluster--hero .flower--bridge-low { display: none; }
  .flower-cluster--hero-low {
    transform: translateX(calc(var(--portrait-low-shift) + 16px)) scale(.92);
    transform-origin: bottom right;
  }
  .hero__signature strong { line-height: 1.9; }
  .hero__signature small { margin-left: .625rem; }
  /* Floating accents must not sit on the role/name after portrait reflow. */
  .petal-field--hero > :not(.petal--left-low) { display: none; }
}

/* Narrow screens: full-width heading/lead, then a shared row for identity and
 * the right-aligned portrait. Grid starts that row after the actual paragraph
 * height, so wrapping never pushes the figure through the text. */
@media (width < 540px), (540px <= width < 768px) and (aspect-ratio < 2/3) {
  .hero {
    --mobile-gutter: var(--hero-content-gutter);
    /* Keep the hat on the signature row; shorten the shared scene below it
     * instead of moving the hat into the full-width paragraph. */
    /* Signature-row artwork grows gently with the text, not with the full
     * viewport width. The second bound keeps the ribbon's left end offscreen. */
    --hero-unit: max(clamp(.29px, calc(.30px + (100cqw - 375px) * .00016), .35px), calc((100cqw - var(--mobile-gutter) + 48px) / 1755));
    --mobile-art-left: calc(100cqw - var(--mobile-gutter) - 1490 * var(--hero-unit));
    --tracking-copy: .035em;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    padding-top: clamp(1.5rem, 4cqw, 2.5rem);
    padding-bottom: calc(65 * var(--hero-unit));
    overflow: clip;
  }
  .hero .hero__inner,
  .hero__copy { display: contents; }
  .hero h1,
  .hero__copy > p,
  .hero__signature {
    position: relative;
    z-index: 4;
    grid-column: 1;
    margin-inline: var(--mobile-gutter);
  }
  .hero h1 { grid-row: 1; }
  .hero__copy > p { grid-row: 2; text-wrap: pretty; }
  .hero__copy > p br { display: none; }
  .hero__signature {
    grid-row: 3;
    align-self: start;
    justify-self: start;
  }
  .hero__signature strong { line-height: 1.9; }
  .hero__signature small { display: block; margin-left: 0; line-height: 1.8; }
  .hero__scene {
    grid-area: 3 / 1;
    left: var(--mobile-art-left);
    /* Hat ink begins at scene y73 (including the PNG's transparent top).
     * Align it to the signature's ink, slightly above its line box. */
    margin-top: calc(-74 * var(--hero-unit) - .18 * var(--text-signature));
    align-self: start;
  }
  .flower-cluster--hero {
    transform: translateX(calc(-308 * var(--hero-unit))) scale(.8);
    transform-origin: bottom right;
  }
  .flower-cluster--hero .flower--bridge-base,
  .flower-cluster--hero .flower--bridge-low,
  .flower-cluster--hero .flower--bridge-link { display: none; }
  .flower-cluster--hero-low {
    transform: translateX(calc(-75 * var(--hero-unit))) scale(.8);
    transform-origin: bottom right;
  }
  .petal-field--hero > :not(.petal--left-low) { display: none; }
  .petal-field--hero .petal--left-low {
    left: calc(690 * var(--hero-unit));
    top: calc(735 * var(--hero-unit));
  }
}
/* Phone portrait: give the signature 8px more breathing room above it.
 * A relative offset moves only the text, not the shared grid row/artwork.
 * Do not replace this with paragraph margin or row-gap: those move the wave. */
@media (width < 540px) and (orientation: portrait),
       (540px <= width < 600px) and (aspect-ratio < 2/3) {
  /* Share section text edges with the artwork's mobile anchor. */
  .hero h1,
  .hero__copy > p,
  .hero__signature { margin-inline: var(--hero-content-gutter); }
  .hero__signature { top: 8px; }
  /* Keep the floating petal clear of the low bouquet on phone portrait. */
  .petal-field--hero .petal--left-low {
    left: calc(690 * var(--hero-unit) - 32px);
  }
  /* Optical phone adjustment: move only the figure, not the bouquet/ribbon. */
  .hero__portrait img { left: calc(821 * var(--hero-unit) - 16px); }
  /* All phone portraits use two role lines; only the name below moves. */
  .hero__role-separator { display: none; }
  .hero__role-specialty { display: block; }
  /* Phone bouquet: generous blooms frame the hat/shoulder and may crop at
   * the right viewport edge. Text, portrait and hand-to-wave stay fixed. */
  .flower-cluster--hero {
    --phone-flower-bleed: clamp(12px, 4cqw, 18px);
    transform: translateX(calc(-308 * var(--hero-unit) + var(--phone-flower-bleed))) scale(.8);
  }
  .flower-cluster--hero .flower--crown {
    --flower-x: 305; --flower-y: -330; --flower-size: 460; --flower-tilt: 14deg;
  }
  .flower-cluster--hero .flower--upper {
    --flower-x: 170; --flower-y: -50; --flower-size: 690; --flower-tilt: 14deg;
  }
  /* Bury the attachment points rather than leaving the blooms floating. */
  .flower-cluster--hero .flower--lower { --flower-y: 407; }
  .flower-cluster--hero .flower--base-outer { --flower-y: 470; }
  .flower-cluster--hero .flower--outer-bud { display: none; }
  /* Omit the small bloom squeezed between the hand and the ribbon. */
  .flower-cluster--hero-low .flower--3 { display: none; }
}

/* Squarer small tablets (e.g. a 540x720 Duo viewport) keep the tablet
 * foreground, not the phone's post-paragraph row. Let readable text set
 * the height; anchor the shared wave/portrait scene below that content. */
@media (540px <= width < 768px) and (2/3 <= aspect-ratio <= 1) {
  .hero {
    --hero-unit: clamp(.5px, calc(.5px + (100cqw - 525px) * .000526316), .62px);
    --portrait-low-shift: clamp(24px, calc(24px + (100cqw - 525px) * .175), 64px);
    padding-top: var(--portrait-copy-top);
    padding-bottom: 0;
  }
  .hero .hero__inner { position: relative; inset: auto; height: auto; }
  .hero__copy {
    position: relative;
    top: auto;
    left: auto;
    margin-inline: var(--portrait-gutter);
    /* Use existing clearance for the romanized name's new line, keeping
     * the bottom-anchored portrait and wave at their approved height. */
    padding-bottom: calc(240 * var(--hero-unit) - 1.8 * var(--text-meta));
  }
  .hero__copy > p { max-width: clamp(260px, 52cqw, 350px); text-wrap: pretty; }
  .hero__copy > p br { display: none; }
  .hero__signature small { display: block; margin-left: 0; line-height: 1.8; }
  .hero__scene { position: absolute; bottom: calc(65 * var(--hero-unit)); }
  .hero__art {
    --compact-foreground-shift: clamp(-40px, calc((525px - 100cqw) * .175), 0px);
    left: var(--compact-foreground-shift);
    right: calc(-1 * var(--compact-foreground-shift));
  }
  .flower-cluster--hero-low {
    --compact-low-clearance: clamp(0px, calc((753px - 100cqw) * .614036), 140px);
    transform: translateX(calc(var(--portrait-low-shift) + 16px + var(--compact-low-clearance))) scale(.92);
  }
  .hero__role-separator { display: none; }
  .hero__role-specialty { display: block; }
  .flower-cluster--hero .flower--bridge-low { display: none; }
  .petal-field--hero { display: none; }
  .hero__compact-petals { display: block; }
  .hero__compact-petal--upper {
    right: calc(var(--hero-content-gutter) + 52 * var(--hero-unit));
    top: calc(var(--portrait-copy-top) + 190 * var(--hero-unit));
    width: calc(68 * var(--hero-unit));
    transform: translate(50%, -50%) rotate(62deg);
  }
  .hero__compact-petal--lower {
    display: block;
    left: calc(var(--hero-content-gutter) + 339 * var(--hero-unit));
    bottom: calc(255 * var(--hero-unit));
    width: calc(60 * var(--hero-unit));
    transform: translate(-50%, 50%) rotate(-24deg);
  }
}

/* Keep 24px edges at 320px without reducing the approved 26px title.
 * Break at the phrase boundary, never leave punctuation alone on a line. */
@media (width < 360px) and (orientation: portrait) {
  .hero h1 em { display: block; }
}

/* Short, narrow landscape keeps the signature-row composition, with an
 * optical figure scale rather than the tall portrait-tablet scale. */
@media (width < 540px) and (height <= 500px) and (orientation: landscape) {
  .hero { --hero-unit: clamp(.29px, calc(100cqw / 1400 - .05px), .39px); }
}

/* Wider phone landscape: lift the figure beside the heading. Keep readable
 * copy in flow; the source PNG's transparent edge is not the alignment edge.
 * Flowers are independently recomposed, not squeezed in from the PC layout. */
@media (540px <= width < 1024px) and (height <= 500px) and (orientation: landscape) {
  .hero {
    --phone-gutter: var(--hero-content-gutter);
    --phone-copy-width: clamp(260px, calc(100cqw - 352px), 350px);
    --phone-portrait-inset: clamp(28px, calc((100cqw - 610px) * .25), 72px);
    --hero-unit: clamp(.57px, calc(100cqw / 1350 - .04px), .66px);
    --phone-art-left: calc(100cqw - var(--phone-gutter) - 1490 * var(--hero-unit));
    --phone-art-top: calc(32px - 74 * var(--hero-unit));
    --leading-title: 1.5;
    --leading-lead: 1.8;
    padding-top: 1.5rem;
    padding-bottom: 0;
    min-height: calc(var(--phone-art-top) + 995 * var(--hero-unit));
    overflow: clip;
  }
  .hero .hero__inner { position: relative; inset: auto; height: auto; }
  .hero__copy { position: relative; top: auto; left: auto; width: var(--phone-copy-width); margin: 0 0 0 var(--phone-gutter); padding-bottom: 3rem; }
  .hero__copy > p { max-width: none; text-wrap: pretty; }
  .hero__copy > p br { display: none; }
  .hero__signature strong { line-height: 1.9; }
  .hero__signature small { margin-left: .625rem; }
  .hero__scene { position: absolute; top: var(--phone-art-top); left: var(--phone-art-left); margin-top: 0; }
  .hero__portrait img { left: calc(821 * var(--hero-unit) - var(--phone-portrait-inset)); }
  .flower-cluster--hero {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: translateX(calc(-40 * var(--hero-unit)));
  }
  /* A connected diagonal bouquet: a small crown, one broad shoulder bloom,
   * then a lower bloom that conceals its base and meets the fixed ribbon. */
  .flower-cluster--hero .flower--crown { --flower-x: 1330; --flower-y: 125; --flower-size: 270; --flower-tilt: 15deg; }
  .flower-cluster--hero .flower--upper { --flower-x: 1160; --flower-y: 245; --flower-size: 490; --flower-tilt: 12deg; }
  .flower-cluster--hero .flower--outer-bud { display: none; }
  .flower-cluster--hero .flower--lower { --flower-x: 1250; --flower-y: 555; --flower-size: 360; --flower-tilt: 12deg; }
  .flower-cluster--hero .flower--base-outer { --flower-x: 1470; --flower-y: 640; --flower-size: 170; --flower-tilt: 28deg; }
  .flower-cluster--hero .flower--base { --flower-x: 1190; --flower-y: 755; --flower-size: 175; --flower-tilt: -18deg; }
  .flower-cluster--hero .flower--bridge-middle { --flower-x: 1020; --flower-y: 560; --flower-size: 340; --flower-tilt: -8deg; }
  .flower-cluster--hero .flower--bridge-low,
  .flower-cluster--hero .flower--bridge-base,
  .flower-cluster--hero .flower--bridge-link,
  .petal-field--hero { display: none; }
  .flower-cluster--hero-low {
    display: block;
    top: calc(525 * var(--hero-unit));
    left: calc(685 * var(--hero-unit));
    transform: none;
  }
  .flower-cluster--hero-low .flower--2 { --flower-x: 0; --flower-y: 0; --flower-size: 350; --flower-tilt: -16deg; }
  .flower-cluster--hero-low .flower--3 { --flower-x: 145; --flower-y: 180; --flower-size: 130; --flower-tilt: 16deg; }
  .flower-cluster--hero-low .flower--bud,
  .flower-cluster--hero-low .flower--1 { display: none; }
  /* Two floating petals use the section's open areas, not the bouquet's
   * coordinates. They remain independent of the figure's inward offset. */
  .hero__compact-petals { display: block; }
  .hero__compact-petal--upper {
    right: calc(var(--phone-gutter) + 8px);
    top: 32px;
    width: 28px;
    transform: rotate(48deg);
  }
  .hero__compact-petal--lower {
    display: block;
    left: calc(var(--phone-gutter) + var(--phone-copy-width) * .7);
    bottom: calc(200 * var(--hero-unit));
    width: 26px;
    transform: rotate(-28deg);
  }
}
/* The lower bouquet follows the space below the name as the copy wraps. */
@media (640px <= width < 740px) and (height <= 500px) and (orientation: landscape) {
  .flower-cluster--hero-low { top: calc(550 * var(--hero-unit)); left: calc(810 * var(--hero-unit)); }
  .flower-cluster--hero-low .flower--2 { --flower-size: 320; }
  .flower-cluster--hero-low .flower--3 { --flower-x: 145; --flower-y: 165; --flower-size: 120; }
}
/* The narrowest side-by-side view needs a little more clearance beside the
 * lead and romanized name; adjust the figure, never the text size. */
@media (540px <= width < 640px) and (height <= 500px) and (orientation: landscape) {
  /* The four-line lead already closes the name-to-wave gap here. Ease back
   * toward the larger figure rather than forcing the wider-phone scale. */
  .hero { --hero-unit: clamp(.57px, calc(.58px - (100cqw - 553px) * .0001), .58px); --phone-portrait-inset: 0px; }
  .hero__compact-petal--lower { left: calc(var(--phone-gutter) + var(--phone-copy-width) * .5); }
  .flower-cluster--hero-low { top: calc(750 * var(--hero-unit)); left: calc(890 * var(--hero-unit)); }
  .flower-cluster--hero-low .flower--1 { display: block; --flower-x: 0; --flower-y: 0; --flower-size: 150; --flower-tilt: -42deg; }
  .flower-cluster--hero-low .flower--2,
  .flower-cluster--hero-low .flower--3 { display: none; }
}

/* Approved PC baseline B (1554px content / 1569px browser).
 * Retain the approved copy position and optically centred foreground.
 * The opaque flower tip is scene x1796.9, not the transparent PNG box edge.
 * Moving it -56.9 scene units leaves about 146px on each side at reference.
 * Keep the foreground group Y and the original copy-to-wave gap intact.
 * Do not translate/transform the shared scene: wave and particles must stay
 * fixed, and a transform on the art would trap the portrait beneath the wave.
 * Account for the compact scene's overflow when aligning its visible edge. */
@media (width >= 1024px) and (orientation: landscape), (width > 1100px) {
  .hero__copy {
    left: var(--hero-content-gutter);
    top: calc(90 * var(--hero-unit));
  }
  .hero__art {
    --foreground-shift: calc(min(100cqw, var(--design-stage-max)) / 2 - var(--hero-content-gutter) - 836.9 * var(--hero-unit));
    left: var(--foreground-shift);
    right: calc(-1 * var(--foreground-shift));
  }
  /* Portrait +3%; nudge right 12 and down 5 scene units (~10px / 4px). */
  .hero__portrait img {
    left: calc(826 * var(--hero-unit));
    bottom: calc(57 * var(--hero-unit));
    width: calc(836 * var(--hero-unit));
  }
  /* Re-seat only exposed roots after the foreground's horizontal shift.
   * Upper flowers keep the bouquet's silhouette; the ribbon never moves.
   * Lift the hidden bridge so its lowest petal stays behind the thin centre. */
  .flower-cluster--hero .flower--base-outer { --flower-y: 442; }
  .flower-cluster--hero .flower--lower { --flower-y: 385; }
  .flower-cluster--hero .flower--base { --flower-y: 515; }
  .flower-cluster--hero .flower--bridge-base { --flower-y: 400; }
}

/* Landscape tablets have a deliberately offset scene. Centre the visible
 * bouquet against the same content edge without moving its wave/hand plane. */
@media (768px <= width < 1024px) and (height > 500px) and (orientation: landscape),
       (640px <= width < 768px) and (height > 500px) and (1 < aspect-ratio <= 3/2) {
  .hero__art {
    --foreground-shift: calc(100cqw - var(--hero-content-gutter) - var(--tablet-art-shift) - 1796.9 * var(--hero-unit));
    left: var(--foreground-shift);
    right: calc(-1 * var(--foreground-shift));
  }
  .flower-cluster--hero .flower--base-outer { --flower-y: 442; }
  .flower-cluster--hero .flower--lower { --flower-y: 385; }
  .flower-cluster--hero .flower--base { --flower-y: 515; }
  .flower-cluster--hero .flower--bridge-base { --flower-y: 400; }
}

/* Compact 4:3 landscape: same side-by-side reading order as a tablet.
 * Grow the figure upward from the hand, not by lifting the shared ribbon. */
@media (640px <= width < 768px) and (height > 500px) and (1 < aspect-ratio <= 3/2) {
  .hero__copy > p { max-width: 280px; text-wrap: pretty; }
  .hero__copy > p br { display: none; }
  .hero__portrait img {
    left: calc(800 * var(--hero-unit) + 52px);
    width: calc(920 * var(--hero-unit));
  }
  .flower-cluster--hero { transform: translateX(8px); }
  /* The round side bud must tuck into the lower bloom, not float beside it. */
  .flower-cluster--hero .flower--outer-bud { --flower-x: 440; --flower-y: 326; }
  /* The lower bloom covers the upper bloom's pinched base and the bud's
   * attachment. The bottom roots tuck into the unchanged ribbon. */
  .flower-cluster--hero .flower--base-outer { --flower-y: 460; }
  .flower-cluster--hero .flower--lower { --flower-x: 254; --flower-y: 385; }
  .flower-cluster--hero .flower--base { --flower-y: 525; }
  .flower-cluster--hero-low {
    transform: translateX(88px) scale(.8);
    transform-origin: bottom right;
  }
  .petal-field--hero { display: none; }
  .hero__compact-petals { display: block; }
  .hero__compact-petal--upper {
    right: calc(var(--hero-content-gutter) + 68 * var(--hero-unit));
    top: calc(var(--tablet-copy-top) + 92 * var(--hero-unit));
    width: calc(68 * var(--hero-unit));
    transform: translate(50%, -50%) rotate(62deg);
  }
}

/* assets/css/hero-atmosphere.css */
/* Single pink source. Keep the approved responsive wrapper and composition;
 * colour is supplied by per-flower SVG filters, not a second red bitmap. */
.hero__flower-pair {
  position: absolute;
  aspect-ratio: 1;
  pointer-events: none;
}
.hero__flower-pair > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
}
.flower-color-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero__flower-pair > .hero__flower-pink { filter: none !important; }
}

/* FV atmosphere
 * One shared palette; responsive composition may omit redundant circles.
 * The scene/wave coordinates below hide circle bottoms inside the opaque PNG.
 * No viewport-edge opacity masks: the other sections have no such fog either.
 */
.hero__ambience,
.hero__glints {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.hero__ambience {
  z-index: 0;
  --ambience-unit: var(--hero-unit);
  --ambience-center: 960;
  --ambience-top: 0px;
  --ambience-shift: calc(50cqw - var(--ambience-center) * var(--ambience-unit));
  left: calc(50% - 50cqw);
  right: auto;
  width: 100cqw;
  clip-path: polygon(0 0, 100% 0,
    calc(var(--ambience-shift) + 2185 * var(--ambience-unit)) calc(var(--ambience-top) + 643 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 2020 * var(--ambience-unit)) calc(var(--ambience-top) + 725 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 1920 * var(--ambience-unit)) calc(var(--ambience-top) + 769 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 1760 * var(--ambience-unit)) calc(var(--ambience-top) + 816 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 1600 * var(--ambience-unit)) calc(var(--ambience-top) + 844 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 1440 * var(--ambience-unit)) calc(var(--ambience-top) + 857 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 1280 * var(--ambience-unit)) calc(var(--ambience-top) + 856 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 1120 * var(--ambience-unit)) calc(var(--ambience-top) + 845 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 960 * var(--ambience-unit)) calc(var(--ambience-top) + 829 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 800 * var(--ambience-unit)) calc(var(--ambience-top) + 832 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 640 * var(--ambience-unit)) calc(var(--ambience-top) + 849 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 480 * var(--ambience-unit)) calc(var(--ambience-top) + 855 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 320 * var(--ambience-unit)) calc(var(--ambience-top) + 844 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 160 * var(--ambience-unit)) calc(var(--ambience-top) + 813 * var(--ambience-unit)),
    calc(var(--ambience-shift) + 0 * var(--ambience-unit)) calc(var(--ambience-top) + 765 * var(--ambience-unit)),
    calc(var(--ambience-shift) - 265 * var(--ambience-unit)) calc(var(--ambience-top) + 682 * var(--ambience-unit)));
}
.hero__glints {
  z-index: 9; /* Fine light sits in front of the portrait (z8). */
  /* Full 1960 x scaleX(1.25) ribbon, including its offscreen continuation. */
  left: calc(-265 * var(--hero-unit));
  right: auto;
  width: calc(2450 * var(--hero-unit));
}
.hero__particle-canvas { display: block; width: 100%; height: 100%; }

/* Circle tones stay static, using each circle's approved colour and opacity.
 * Pattern lighting remains independent of the circles. */

/* The pattern and bottom clip stay fixed. The SVG masks the moving light. */
.hero .hero__pattern { background: none; opacity: 1; }
.hero__pattern-rotor,
.hero__pattern-rotor::before,
.hero__pattern-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__pattern-rotor {
  transform-origin: 50% 50%;
  /* Keep the geometry stationary; the highlight animates independently. */
  animation: none;
}
.hero__pattern-rotor::before {
  content: "";
  background: url("/assets/images/decor/gentian-geometry-v2.svg") center/92% no-repeat;
  opacity: .20;
}
.hero__pattern-light {
  mask: url("/assets/images/decor/gentian-geometry-v2.svg") center/92% no-repeat;
  -webkit-mask: url("/assets/images/decor/gentian-geometry-v2.svg") center/92% no-repeat;
  opacity: .5;
}
.hero__pattern-light::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 10.437deg,
    rgba(153,13,62,.72) 22.512deg, rgba(204,109,144,.95) 28deg,
    transparent 49.954deg,
    transparent 62.753deg, rgba(153,13,62,.72) 78.121deg,
    rgba(204,109,144,.95) 88deg, transparent 108.857deg,
    transparent 129.338deg, rgba(153,13,62,.72) 141.414deg,
    rgba(204,109,144,.95) 148deg, transparent 161.173deg,
    transparent 190.437deg, rgba(153,13,62,.72) 202.512deg,
    rgba(204,109,144,.95) 208deg, transparent 229.954deg,
    transparent 242.753deg, rgba(153,13,62,.72) 258.121deg,
    rgba(204,109,144,.95) 268deg, transparent 288.857deg,
    transparent 309.338deg, rgba(153,13,62,.72) 321.414deg,
    rgba(204,109,144,.95) 328deg, transparent 341.173deg, transparent 360deg);
  transform-origin: 50% 50%;
  animation: hero-pattern-turn 60s linear -4s infinite;
}
@keyframes hero-pattern-turn { to { transform: rotate(1turn); } }

.hero.is-light-out-of-view :is(.hero__bokeh, .hero__pattern-rotor),
.hero.is-light-out-of-view .hero__pattern-light::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero :is(.hero__bokeh, .hero__pattern-rotor),
  .hero .hero__pattern-light::before { animation: none; }
  .hero .hero__pattern-light { display: none; }
}
/* End combined FV trial. */

.hero__bokeh {
  position: absolute;
  left: calc(50% + (var(--light-x) - var(--ambience-center)) * var(--ambience-unit));
  top: calc(var(--ambience-top) + var(--light-y) * var(--ambience-unit));
  width: var(--circle-size, calc(var(--light-size) * var(--ambience-unit)));
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--bokeh-strength);
  background: var(--bokeh-color);
  filter: blur(calc(1.5 * var(--ambience-unit)));
  animation: none;
  transform: none;
}
/* Approved normal-desktop palette. Never replace these with an old palette
 * at another breakpoint. The smallest right accent is intentionally palest.
 * Left large arc: its visible top at x0 is y112, matching the right arc. */
.hero__bokeh--left-high { --light-x: -640; --light-y: 32; --light-size: 800; --bokeh-strength: .11; --bokeh-color: #d994ad; }
.hero__bokeh--left-middle { --light-x: -190; --light-y: 475; --light-size: 420; --bokeh-strength: .17; --bokeh-color: #bd6f90; }
.hero__bokeh--crown { --light-x: 1100; --light-y: 112; --light-size: 840; --bokeh-strength: .11; --bokeh-color: #d994ad; }
.hero__bokeh--middle { --light-x: 1660; --light-y: 430; --light-size: 560; --bokeh-strength: .15; --bokeh-color: #ca7e9d; }
.hero__bokeh--low { --light-x: 680; --light-y: 675; --light-size: 520; --bokeh-strength: .13; --bokeh-color: #ce89a5; }
.hero__bokeh--accent { --light-x: 1760; --light-y: 146; --light-size: 180; --bokeh-strength: .10; --bokeh-color: #e5b5c9; }
/* Side arcs follow the viewport edges on wide displays, not a capped column. */
.hero__bokeh--left-high,
.hero__bokeh--left-middle { left: calc(var(--light-x) * var(--ambience-unit)); }
.hero__bokeh--crown,
.hero__bokeh--middle,
.hero__bokeh--accent { left: calc(100% - (1920 - var(--light-x)) * var(--ambience-unit)); }

@media (min-width: 1024px) and (orientation: landscape) {
  @container hero-stage (max-width: 1300px) {
    .hero__ambience { --ambience-top: var(--compact-art-top); }
    .hero__bokeh:not(.hero__bokeh--low) { top: calc(var(--light-y) * var(--ambience-unit)); }
  }
}

/* Stacked composition: the SAME circles surround the copy and artwork.
 * Their two offset pairs keep deliberate lateral bleed, but no top cropping.
 * The bottom clip stays registered to the shared artwork scene (930 + 65). */
@media (width < 768px), (768px <= width <= 1100px) and (orientation: portrait) {
  .hero__ambience {
    --ambience-unit: calc(min(100cqw, 720px) / 1280);
    --ambience-center: 1180;
    --ambience-top: calc(100% - 995 * var(--ambience-unit));
    --copy-top: clamp(1.5rem, 4cqw, 2.5rem);
  }
  .hero__bokeh--left-high {
    --circle-size: min(68cqw, 520px);
    left: calc(-.74 * var(--circle-size));
    top: calc(var(--copy-top) - .0614 * var(--circle-size));
  }
  .hero__bokeh--left-middle {
    --circle-size: min(44cqw, 340px);
    left: calc(-.45 * var(--circle-size));
    top: calc(var(--copy-top) + min(47.6cqw, 364px));
  }
  .hero__bokeh--crown {
    --circle-size: min(100cqw, 620px);
    left: calc(100% - .34 * var(--circle-size));
    top: calc(var(--copy-top) - .0263 * var(--circle-size));
  }
  .hero__bokeh--middle {
    --circle-size: min(62cqw, 380px);
    left: calc(100% - .49 * var(--circle-size));
    top: calc(var(--copy-top) + min(73cqw, 452.6px));
  }
  .hero__bokeh--accent {
    --circle-size: min(22cqw, 136px);
    left: calc(100% - .7 * var(--circle-size));
    top: calc(var(--copy-top) + min(12cqw, 74.4px));
  }
}

/* Tablet copy and artwork are staggered. Upper circles align with the copy,
 * while their lower clip and the low circle stay registered to the wave. */
@media (768px <= width < 1024px) and (orientation: landscape),
       (640px <= width < 768px) and (height > 500px) and (1 < aspect-ratio <= 3/2) {
  .hero__ambience {
    --ambience-unit: var(--hero-unit);
    --ambience-shift: var(--tablet-art-shift);
    --ambience-top: var(--tablet-art-top);
  }
  .hero__bokeh {
    top: calc(var(--tablet-copy-top) + 7px + (var(--light-y) - 112) * var(--ambience-unit));
  }
  .hero__bokeh--low {
    left: calc(var(--tablet-art-shift) + var(--light-x) * var(--ambience-unit));
    top: calc(var(--tablet-art-top) + var(--light-y) * var(--ambience-unit));
  }
}

/* Register the circles to the large, right-aligned portrait scene. */
@media (768px <= width <= 1100px) and (orientation: portrait),
       (540px <= width < 768px) and (2/3 <= aspect-ratio <= 1) {
  .hero__ambience {
    --ambience-unit: var(--hero-unit);
    --ambience-shift: var(--portrait-art-left);
  }
  .hero__bokeh--low {
    left: calc(var(--portrait-art-left) + var(--light-x) * var(--ambience-unit));
  }
  /* The desktop accent is swallowed by the larger portrait-side disc here.
   * Omit it instead of retaining a redundant, invisible layer. */
  .hero__bokeh--accent { display: none; }
}

/* The mobile scene shares the signature row; derive its top from the actual
 * grid height rather than a fixed paragraph height. Omit redundant accents. */
@media (width < 540px), (540px <= width < 768px) and (aspect-ratio < 2/3) {
  .hero__ambience {
    --ambience-unit: var(--hero-unit);
    --ambience-shift: var(--mobile-art-left);
  }
  .hero__bokeh--low {
    left: calc(var(--mobile-art-left) + var(--light-x) * var(--ambience-unit));
  }
  .hero__bokeh--accent { display: none; }
}

@media (540px <= width < 1024px) and (height <= 500px) and (orientation: landscape) {
  .hero__ambience {
    --ambience-unit: var(--hero-unit);
    --ambience-shift: var(--phone-art-left);
    --ambience-top: var(--phone-art-top);
    --copy-top: 1.5rem;
  }
  .hero__bokeh--low {
    left: calc(var(--phone-art-left) + var(--light-x) * var(--ambience-unit));
    top: calc(var(--phone-art-top) + var(--light-y) * var(--ambience-unit));
  }
  .hero__bokeh--left-high {
    --circle-size: 360px;
    left: calc(-.78 * var(--circle-size));
    top: 0;
  }
  .hero__bokeh--left-middle {
    --circle-size: 240px;
    left: calc(-.64 * var(--circle-size));
    top: 240px;
  }
  .hero__bokeh--crown {
    --circle-size: clamp(400px, 56cqw, 560px);
    left: calc(100% - .64 * var(--circle-size));
    top: 32px;
  }
  .hero__bokeh--middle {
    --circle-size: 280px;
    left: calc(100% - .5 * var(--circle-size));
    top: 270px;
  }
  .hero__bokeh--low,
  .hero__bokeh--accent { display: none; }
}


/* assets/css/surfaces.css */
/* All light section backgrounds share one flat blush colour at every width.
 * No side tint or vertical fade. Cards, dark sections and artwork stay intact. */
.hero-frame,
.section-pad:not(.section--magenta) {
  background: var(--color-blush);
}

/* Paint across the full frame, not twice inside the capped desktop stage. */
.hero { background: transparent; }

/* assets/css/section-theme.css */
/* Client-reference palette, scoped exclusively to the existing downstream frame.
 * Do not add :root, body, header or hero selectors to this file.
 * No typography, layout, spacing, asset, or animation changes belong here. */
.section-pad,
.site-footer {
  --section-wine: #680525;
  --section-ground: #fdf3f3;
  /* Inherited by SVG <use> instances as well as ordinary section descendants. */
  --color-blush: var(--section-ground);
  --section-paper: #fff8f4;
  --section-rose: #f3e2e1;
  --section-rose-middle: #e7c3cb;
  --section-metal-edge: rgba(183, 137, 82, .25);
  --section-card-shadow: 0 10px 28px rgba(88, 26, 36, .07);
}

/* Shared edge colours. The approved FV/header tokens are untouched. */
.section-pad:not(.section--magenta) { background-color: var(--section-ground); }

/* Deep red wine supports the rose satin at the boundaries. */
.section-pad.section--magenta,
.site-footer { background-color: var(--section-wine); }
.section-pad.section--magenta { background-image: none; }

/* Broad stationary light/shadow fields, behind existing content/art.
 * Fade to the solid edge colour BEFORE either SVG join. No new geometry. */
.section-pad::before {
  content: "";
  position: absolute;
  inset: var(--space-section) 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 12% 36%, rgba(222, 165, 183, .18), transparent 64%),
    radial-gradient(ellipse at 89% 64%, rgba(232, 192, 184, .2), transparent 60%);
  -webkit-mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent);
  mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent);
}
.section-pad.section--magenta::before {
  inset: calc(var(--section-wave-height) + 2px) 0 calc(var(--section-wave-height) * 1.34 + 2px);
  background: radial-gradient(ellipse at 7% 26%, rgba(194, 39, 98, .48), transparent 65%),
    radial-gradient(ellipse at 92% 78%, rgba(42, 0, 17, .68), transparent 70%),
    radial-gradient(ellipse at 65% 10%, rgba(140, 16, 58, .32), transparent 60%);
}
.site-footer .site-footer__bottom { background-color: rgba(43, 4, 16, .24); }

/* One shared colour for the last fill and section body; no seam. */
.section-pad .section-wave,
.site-footer .site-footer__wave { color: var(--section-wine); }
/* Metallic strokes live inside the SVG symbols so <use> retains their paint. */

/* Warm paper surfaces; inset edges do not change card sizes or grids. */
.section-pad .timeline-card,
.section-pad .voice-card,
.section-pad .project-feature,
.section-pad .project-card {
  background-color: var(--section-paper);
  box-shadow: inset 0 0 0 1px var(--section-metal-edge), var(--section-card-shadow);
}
.section-pad .lesson-card,
.section-pad .instagram-grid a { box-shadow: var(--section-card-shadow); }
.section-pad .lesson-card--basic .lesson-card__copy { background-color: var(--section-rose); }
.section-pad .lesson-card--advance .lesson-card__copy { background-color: var(--section-rose-middle); }
.section-pad .lesson-card--master .lesson-card__copy { background-color: var(--section-wine); }
.section-pad .lesson-card span { background-color: var(--section-paper); }
.section-pad .profile__portrait {
  box-shadow: 0 0 0 10px var(--section-paper), 0 0 0 11px var(--section-metal-edge);
}
.section-pad .lecture__main,
.section-pad .lecture-gallery img { box-shadow: 0 0 0 1px rgba(255, 241, 176, .22); }

/* Logo-coloured buttons retain their existing states, size and movement. */
.section-pad .button,
.site-footer .button {
  box-shadow: inset 0 0 0 1px rgba(255, 241, 176, .26), 0 4px 12px rgba(87, 9, 42, .09);
}
.section-pad .button--light,
.site-footer .button--light { background-color: var(--section-paper); }
.section-pad .button:hover,
.site-footer .button:hover { background-color: var(--section-paper); }
.section-pad .button--light:hover,
.site-footer .button--light:hover { background-color: transparent; }
.section-pad .carousel-controls--light button { background-color: var(--section-paper); }
.section-pad .carousel-dots i { background-color: var(--section-rose-middle); }
.section-pad .carousel-dots i.is-active { background-color: var(--color-brand-ui); }
.section-pad.section--magenta .carousel-dots i.is-active { background-color: #f3ce68; }
.section-pad .schedule-list::before { background-color: rgba(255, 241, 176, .45); }
.section-pad .schedule-list li::before {
  background-color: var(--section-paper);
  box-shadow: inset 0 0 0 1px rgba(190, 141, 37, .45);
}

/* Same form fields and hierarchy, with softer rose outlines. */
.section-pad .contact-form input:not([type="checkbox"]),
.section-pad .contact-form select,
.section-pad .contact-form textarea,
.section-pad .policy-box {
  border-color: #d9bbb8;
  background-color: var(--section-paper);
}
.section-pad .contact-form input:focus-visible,
.section-pad .contact-form select:focus-visible,
.section-pad .contact-form textarea:focus-visible {
  border-color: var(--color-brand-ui);
  outline-color: #c59430;
}

/* assets/css/section-composition.css */
/* 01_トップページ: downstream composition only. The approved FV/header,
 * shared type tokens and content gutters must remain untouched. */
.section-pad,
.site-footer {
  --section-wave-height: clamp(100px, 10.5vw, 190px);
  --section-contact-wave-height: var(--section-wave-height);
  --section-art-top: 0px;
  --section-art-bottom: 0px;
  --composition-edge-space: calc(var(--space-section) * .5);
}

/* Keep the transition inside the content rhythm. Reserve the visible ribbon
 * depth plus half a section-space for text/CTA clearance, without adding a
 * whole wave-sized spacer. Upper paint reaches about .82 of the SVG height;
 * the lower satin extends upwards through its full height. */
.section-pad.section-framed {
  z-index: 1;
  /* Non-FV flowers may cross the section boundary; clip only the screen edges. */
  overflow: visible;
  clip-path: inset(-180px 0);
  --section-art-top: 0px;
  --section-art-bottom: 0px;
  margin-block: calc(-1 * var(--composition-edge-space));
  --wave-content-clearance: calc(var(--space-section) * .5);
  padding-block-start: max(
    calc(var(--space-section) + var(--composition-edge-space)),
    calc(var(--section-wave-height) * .82 + var(--wave-content-clearance))
  );
  padding-block-end: max(
    calc(var(--space-section) + var(--composition-edge-space)),
    calc(var(--section-wave-height) + var(--wave-content-clearance))
  );
}
.section-pad .section-wave,
.site-footer .site-footer__wave { width: 100%; }
.section-pad .section-wave--top { top: -1px; }
.section-pad .section-wave--bottom { bottom: -1px; z-index: 2; overflow: visible; }
.section-pad > .container,
.section-framed > .voice-carousel,
.section-framed > .section-action,
.site-footer__inner { position: relative; z-index: 5; }
.section-pad .section-action { padding-inline: var(--section-gutter); }
/* Keep English/Japanese on one baseline whenever they fit. flex-wrap from the
 * shared component handles the available width instead of device-based stacks. */
.section-pad .section-heading > p { flex-direction: row; align-items: baseline; }

/* Portrait and prose are a pair. An asymmetric bouquet emerges from behind
 * the lower-left of the photo; it must not form a ring or cover the portrait. */
.profile.section-pad { overflow: clip; padding-top: calc(var(--space-section) * .55); }
.profile .profile__grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(48px, 5vw, 88px); }
.profile .section-heading { margin-bottom: 2rem; }
.profile .section-heading h2 { font-size: calc(1.5rem + 2 * var(--section-type-step)); }
/* Centre the actual circle between the title and the third intro paragraph.
 * The bouquet follows the photo; its overhang is not part of the alignment box. */
.profile .profile__visual { align-self: center; width: 92%; max-width: 450px; margin-top: 0; padding-bottom: 0; }
.profile .profile__portrait { position: relative; z-index: 2; box-shadow: none; }
.profile .profile__visual .flower-cluster--profile {
  --profile-flower-unit: calc(100cqw / 500);
  top: 0; bottom: auto; left: 0; width: 100%; height: calc(500 * var(--profile-flower-unit)); z-index: 1;
}
.profile .profile__visual .flower-cluster--profile img:nth-child(1) { top: calc(95 * var(--profile-flower-unit)); left: calc(-110 * var(--profile-flower-unit)); width: calc(245 * var(--profile-flower-unit)); transform: rotate(-24deg); }
.profile .profile__visual .flower-cluster--profile img:nth-child(2) { top: calc(155 * var(--profile-flower-unit)); left: calc(-150 * var(--profile-flower-unit)); width: calc(430 * var(--profile-flower-unit)); transform: rotate(-18deg); }
.profile .profile__visual .flower-cluster--profile img:nth-child(3) { top: calc(320 * var(--profile-flower-unit)); left: calc(-45 * var(--profile-flower-unit)); width: calc(260 * var(--profile-flower-unit)); transform: rotate(-62deg); }
.profile .profile__story { margin-top: var(--space-content); }
.profile .timeline { margin-top: var(--space-content); }

/* Photo mosaics and cards keep their reference proportions, not fixed heights. */
.lecture .lecture__grid { column-gap: clamp(40px, 5vw, 88px); }
.lecture .lecture__visuals { padding-top: calc(var(--text-display) * .7); }
.lecture .lecture__main { height: auto; aspect-ratio: 1.5; border-radius: 4px; }
.lecture .lecture-gallery { gap: 8px; margin-top: 8px; }
.lecture .lecture-gallery img { height: auto; aspect-ratio: 1.55; border-radius: 3px; }
.lecture .section-action { margin-top: var(--space-action); }
.lessons .lesson-grid { gap: clamp(32px, 6vw, 112px); }
.lessons .lesson-card { border-radius: 4px; box-shadow: none; }
.lessons .lesson-card__copy { position: relative; z-index: 1; border-radius: 0 0 50% 6% / 0 0 9px 3px; margin-bottom: -8px; padding-bottom: calc(var(--space-card) + 8px); }
.lessons .lesson-card img { height: auto; aspect-ratio: 1.34; }
.lessons .section-heading--inline { gap: var(--space-content); }
.lessons .section-heading--inline h2 { font-family: var(--font-sans); font-size: var(--text-body); }
.voice .voice-card { flex-basis: clamp(255px, 19vw, 315px); border-radius: 4px; }
.voice .voice-carousel__track { padding-inline: max(var(--section-gutter), calc((100% - var(--container)) / 2)); }
.voice .voice-actions { gap: 24px 70px; }
.projects.section-pad { overflow: clip; }
.projects > .flower-cluster--projects { display: none; }
.projects .section-heading h2 { font-family: var(--font-sans); font-size: var(--text-body); }
.projects .project-feature { grid-template-columns: 1fr 1.12fr; box-shadow: none; border-radius: 4px; background: var(--section-paper); }
.projects .project-feature > img { min-height: 0; aspect-ratio: 1.48; object-fit: cover; }
.projects .project-card { border-radius: 3px; box-shadow: none; background: var(--section-paper); }
.projects .project-card img { height: auto; aspect-ratio: 1.75; }
.projects .project-card h3 { font-size: var(--text-h4); }

/* Book -> Media: the centred heading is independent of the right-hand image. */
.book.section-pad { isolation: isolate; overflow: clip; }
.book .book__grid { grid-template-columns: 1.15fr .85fr; }
.book .book__image { width: min(100%, 510px); }
.book .section-heading > p { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
.media .media__grid { display: block; text-align: center; min-height: 260px; }
.media .media__copy { position: relative; z-index: 3; max-width: 670px; margin-inline: auto; }
.media .section-heading { text-align: center; }
.media .section-heading > p { justify-content: center; }
.media .media__copy > p { margin-bottom: var(--space-action); }
.media .media__image { position: absolute; width: clamp(260px, 29vw, 480px); right: calc(-.55 * var(--section-gutter)); bottom: calc(-.5 * var(--space-section)); z-index: 2; }
.media .flower-cluster--media { right: -45px; bottom: 0; width: clamp(165px, 18vw, 280px); height: clamp(220px, 23vw, 355px); z-index: 1; }
.media .flower-cluster--media img:nth-child(1) { width: 58%; top: 0; right: 5%; transform: rotate(20deg); }
.media .flower-cluster--media img:nth-child(2) { width: 85%; bottom: 16%; left: 0; transform: rotate(10deg); }
.media .flower-cluster--media img:nth-child(3) { width: 62%; bottom: 0; right: 14%; transform: rotate(30deg); }
.instagram .instagram-grid { width: 84%; max-width: 1150px; gap: clamp(24px, 4.5vw, 72px); }

/* Contact uses a shallower ribbon, but the same half-section breathing room
 * between the visible decoration and the content as the wine sections. */
.contact.section-pad {
  --section-art-top: 0px;
  --section-contact-wave-height: calc(var(--section-wave-height) * .62);
  padding-top: max(var(--space-section), calc(var(--section-contact-wave-height) + var(--space-section) * .5));
}
.contact .section-wave--contact { top: 0; height: var(--section-contact-wave-height); z-index: 0; }
.contact .contact-form { width: min(100%, 960px); }
.contact .form-row { grid-template-columns: 176px 56px minmax(0, 1fr); }
.contact .form-consent { margin-left: 252px; }
.contact .form-submit { margin-left: 252px; width: calc(100% - 252px); }
.contact .contact__phone { margin-bottom: var(--space-content); }

/* Golden flowers also sit above the complete wave (2), below content (5).
 * Do not tie their layer to the wave: later SVG siblings would cover the stems. */
.section-pad .section-botanical { position: absolute; z-index: 3; width: clamp(230px, 28vw, 475px); pointer-events: none; user-select: none; }
.lecture .section-botanical { left: -110px; bottom: -115px; width: 300px; transform: none; opacity: .75; }
.voice .section-botanical { right: -9%; top: -50px; transform: rotate(197deg); opacity: .75; }
.book .section-botanical { right: -6%; bottom: -20px; width: clamp(240px, 30vw, 460px); transform: rotate(-22deg); opacity: .62; }
.media .section-botanical { left: -9%; top: -100px; transform: rotate(138deg); opacity: .7; }

/* Accepted botanical study 02. Keep the old 560:650 positioning frame;
 * contain preserves the new illustration's proportions inside it.
 * Raster shape and editable gold paint are independent. No animation.
 * Warm metallic midtones and a restrained gold reflection avoid yellow/white ink. */
.section-pad .section-botanical--v2 {
  --botanical-gold-angle: 138deg;
  --botanical-gold-shine: 44%;
  --botanical-gold-opacity: 1;
  aspect-ratio: 560 / 650;
  opacity: var(--botanical-gold-opacity);
  background: linear-gradient(var(--botanical-gold-angle), #986c3c 0%, #c59951 16%, #e5c37a 28%, #ac7b3f 43%, #d2a75b 57%, #ecd39a 69%, #a7793e 82%, #d4ae67 100%);
  -webkit-mask: url("/assets/images/decor/gentian-gold-mask-v2.svg") center / contain no-repeat;
  mask: url("/assets/images/decor/gentian-gold-mask-v2.svg") center / contain no-repeat;
  mask-mode: alpha;
}
.section-pad .section-botanical--v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--botanical-gold-angle), transparent calc(var(--botanical-gold-shine) - 9%), #dfb86640 calc(var(--botanical-gold-shine) - 3%), #efd39780 var(--botanical-gold-shine), #ddb36440 calc(var(--botanical-gold-shine) + 3%), transparent calc(var(--botanical-gold-shine) + 9%));
}
.section-pad:not(.section--magenta) .section-botanical--v2 {
  background: linear-gradient(var(--botanical-gold-angle), #865a32 0%, #b28240 16%, #d2a75b 28%, #986837 43%, #bd914c 57%, #d9b976 69%, #956637 82%, #c29954 100%);
}
.section-pad:not(.section--magenta) .section-botanical--v2::after { opacity: .58; }

/* Scalable bouquets overlap the full ribbon and connect adjacent sections. */
.section-pad .flower-cluster--lecture,
.section-pad .flower-cluster--voice,
.section-pad .flower-cluster--contact,
.site-footer .flower-cluster--footer { --edge-flower-unit: clamp(.44px, .0625vw, 1px); transform: none; width: calc(450 * var(--edge-flower-unit)); height: calc(440 * var(--edge-flower-unit)); z-index: 2; }
.section-pad .flower-cluster--lecture { right: calc(-65 * var(--edge-flower-unit)); bottom: 0; }
.section-pad .flower-cluster--voice { left: calc(-60 * var(--edge-flower-unit)); bottom: 0; }
.section-pad .flower-cluster--contact { left: calc(-72 * var(--edge-flower-unit)); bottom: -24px; }
.section-pad :is(.flower-cluster--lecture,.flower-cluster--voice,.flower-cluster--contact) img { right: auto; bottom: auto; }
.section-pad :is(.flower-cluster--lecture,.flower-cluster--voice,.flower-cluster--contact) img:nth-child(1) { width: calc(280 * var(--edge-flower-unit)); left: calc(138 * var(--edge-flower-unit)); top: calc(112 * var(--edge-flower-unit)); transform: rotate(34deg); }
.section-pad :is(.flower-cluster--lecture,.flower-cluster--voice,.flower-cluster--contact) img:nth-child(2) { width: calc(254 * var(--edge-flower-unit)); left: calc(25 * var(--edge-flower-unit)); top: calc(217 * var(--edge-flower-unit)); transform: rotate(-18deg); }
.section-pad :is(.flower-cluster--lecture,.flower-cluster--voice,.flower-cluster--contact) img:nth-child(3) { width: calc(191 * var(--edge-flower-unit)); left: calc(235 * var(--edge-flower-unit)); top: calc(8 * var(--edge-flower-unit)); transform: rotate(21deg); }
.section-pad :is(.flower-cluster--lecture,.flower-cluster--voice,.flower-cluster--contact) img:nth-child(4) { width: calc(162 * var(--edge-flower-unit)); left: calc(77 * var(--edge-flower-unit)); top: calc(302 * var(--edge-flower-unit)); transform: rotate(-38deg); }
.section-pad .flower-cluster--voice,
.section-pad .flower-cluster--contact { transform: scaleX(-1); }
/* Non-FV: the complete wave (2) stays behind the flowers (3), with content (5)
 * above both. No foreground wave/mask: root-covering is an FV-only rule.
 * Reset the mobile legacy transform-origin so mirrored bouquets stay in view. */
.section-pad .flower-cluster--lecture,
.section-pad .flower-cluster--voice,
.section-pad .flower-cluster--media { z-index: 3; transform-origin: center; }

/* Keep footer content below the ribbon, with the same half-section clearance
 * as Contact. The wave/contact bouquet stay anchored to the footer's top;
 * the address, utility links and portrait remain in the content grid. */
.site-footer {
  --footer-wave-height: clamp(65px, 7vw, 125px);
  padding-top: max(calc(var(--space-section) * .75), calc(var(--footer-wave-height) + var(--space-section) * .5));
  margin-top: 0; background: transparent; overflow: visible; clip-path: inset(-420px 0 0);
}
.site-footer::before { content: ""; position: absolute; z-index: 1; inset: calc(var(--footer-wave-height) - 2px) 0 0; background: var(--section-wine); }
.site-footer::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  inset: calc(var(--footer-wave-height) + 2px) 0 0;
  background: radial-gradient(ellipse at 8% 52%, rgba(194, 39, 98, .38), transparent 68%),
    radial-gradient(ellipse at 93% 88%, rgba(42, 0, 17, .56), transparent 70%);
  -webkit-mask-image: linear-gradient(transparent, #000 100px);
  mask-image: linear-gradient(transparent, #000 100px);
}
.site-footer .site-footer__wave { z-index: 1; }
/* Contact flowers bridge into the footer in front of its complete wave. */
.site-footer .flower-cluster--contact { --edge-flower-unit: clamp(.44px, .0625vw, 1px); z-index: 2; left: calc(-65 * var(--edge-flower-unit)); top: calc(-365 * var(--edge-flower-unit)); width: calc(450 * var(--edge-flower-unit)); height: calc(440 * var(--edge-flower-unit)); transform: scaleX(-1); transform-origin: center; }
.site-footer .flower-cluster--contact img { right: auto; bottom: auto; }
.site-footer .flower-cluster--contact img:nth-child(1) { width: calc(280 * var(--edge-flower-unit)); left: calc(138 * var(--edge-flower-unit)); top: calc(112 * var(--edge-flower-unit)); transform: rotate(34deg); }
.site-footer .flower-cluster--contact img:nth-child(2) { width: calc(254 * var(--edge-flower-unit)); left: calc(25 * var(--edge-flower-unit)); top: calc(217 * var(--edge-flower-unit)); transform: rotate(-18deg); }
.site-footer .flower-cluster--contact img:nth-child(3) { width: calc(191 * var(--edge-flower-unit)); left: calc(210 * var(--edge-flower-unit)); top: calc(80 * var(--edge-flower-unit)); transform: rotate(21deg); }
.site-footer .flower-cluster--contact img:nth-child(4) { width: calc(162 * var(--edge-flower-unit)); left: calc(77 * var(--edge-flower-unit)); top: calc(302 * var(--edge-flower-unit)); transform: rotate(-38deg); }
.site-footer .site-footer__inner { grid-template-columns: .85fr 1.35fr .85fr; align-items: end; gap: 32px; }
.site-footer .footer-address { grid-column: 1 / 3; }
.site-footer .footer-utility { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.site-footer .footer-utility a { text-decoration: underline; text-underline-offset: .3em; text-decoration-color: rgba(255, 248, 244, .45); }
.site-footer .footer-visual { isolation: isolate; grid-column: 3; }
.site-footer .footer-visual > img { position: relative; z-index: 3; max-height: 330px; }
.site-footer .site-footer__bottom { border-top: 1px solid rgba(243,206,104,.35); }
.site-footer .flower-cluster--footer { right: calc(-110 * var(--edge-flower-unit)); bottom: 0; width: calc(340 * var(--edge-flower-unit)); height: calc(315 * var(--edge-flower-unit)); }
.site-footer .flower-cluster--footer img:nth-child(1) { width: calc(185 * var(--edge-flower-unit)); right: 0; bottom: 0; transform: rotate(26deg); }
.site-footer .flower-cluster--footer img:nth-child(2) { width: calc(180 * var(--edge-flower-unit)); right: calc(108 * var(--edge-flower-unit)); bottom: 0; transform: rotate(-12deg); }
.site-footer .flower-cluster--footer img:nth-child(3) { width: calc(160 * var(--edge-flower-unit)); right: calc(44 * var(--edge-flower-unit)); bottom: calc(110 * var(--edge-flower-unit)); transform: rotate(19deg); }
.site-footer .flower-cluster--footer img:nth-child(4) { display: none; }

@media (min-width: 1569px) {
  .profile .section-heading h2 { font-size: max(1.625rem, calc(26 * var(--section-type-unit))); }
}
@media (max-width: 1199px) {
  .profile .profile__grid { gap: 40px; }
  .lessons .lesson-grid { gap: 28px; }
  .media .media__copy { margin-left: 8%; max-width: 56%; }
  .media .media__image { right: -4%; width: 36%; bottom: 0; }
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .section-pad, .site-footer { --section-wave-height: clamp(88px, 12vw, 132px); }
  .profile .profile__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .profile .profile__content { display: contents; }
  .profile .section-heading { grid-row: 1; }
  .profile .section-heading h2 { font-size: 1.5rem; }
  .profile .profile__visual { grid-row: 2; align-self: start; width: min(74%, 460px); max-width: 490px; justify-self: center; margin: 0 0 16px; padding-bottom: 70px; }
  .profile .profile__content > .prose { grid-row: 3; }
  .profile .profile__story { margin-top: var(--space-paragraph); }
  .profile .section-heading { margin-bottom: 0; }
  .lecture .lecture__visuals { padding-top: 0; }
  .lecture .lecture__grid { row-gap: var(--space-content); }
  .lecture .lecture-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lessons .lesson-grid { max-width: 560px; grid-template-columns: 1fr; gap: var(--space-content); }
  .projects .project-feature { grid-template-columns: 1fr; }
  .projects .project-feature > img { height: auto; aspect-ratio: 1.8; }
  .book .book__grid { grid-template-columns: 1fr; }
  .book .book__image { width: min(74%, 440px); }
  .book .section-botanical { width: 280px; bottom: -50px; right: -80px; }
  .media .media__grid { min-height: 0; }
  .media .media__copy { max-width: 100%; margin-inline: auto; }
  .media .media__image { position: relative; right: auto; bottom: auto; display: block; width: min(72%, 400px); margin: var(--space-content) auto 0; }
  .media .flower-cluster--media { right: -45px; width: 220px; height: 280px; }
  .media .section-heading > p { align-items: baseline; justify-content: center; }
  .instagram .instagram-grid { width: 100%; gap: var(--space-grid); }
  .contact .form-row { grid-template-columns: minmax(0, 1fr) auto; }
  .contact .form-consent, .contact .form-submit { width: 100%; margin-left: 0; }
  .site-footer .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer .footer-address { grid-column: 1; text-align: left; }
  .site-footer .footer-visual { grid-column: 2; grid-row: 1; width: 100%; }
}
@media (width < 600px), (width < 1024px) and (height <= 500px) and (orientation: landscape) {
  .section-pad, .site-footer { --section-wave-height: 84px; --composition-edge-space: 24px; }
  .section-pad .section-heading > p { gap: 14px 28px; }
  .profile .profile__grid { gap: var(--space-content); }
  .profile .section-heading h2 { font-size: 1.375rem; }
  .profile .profile__visual { width: min(77%, 350px); padding-bottom: 55px; }
  .lecture .lecture-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .lecture .section-action { text-align: left; }
  .section-pad :is(.flower-cluster--lecture,.flower-cluster--voice,.flower-cluster--contact) { --edge-flower-unit: .37px; }
  .section-pad .flower-cluster--lecture { right: -49px; bottom: -8px; }
  .section-pad .flower-cluster--voice { left: -64px; bottom: -5px; }
  .section-pad .flower-cluster--contact { left: -76px; bottom: -40px; }
  .section-pad .section-botanical { width: 210px; opacity: .45; }
  .lecture .section-botanical { display: none; }
  .voice .section-botanical { width: 190px; right: -102px; top: -32px; }
  .book .section-botanical { width: 240px; right: -108px; bottom: -24px; }
  .media .section-botanical { width: 200px; left: -115px; top: -58px; }
  .media .media__copy > p { text-align: left; }
  .media .media__image { width: 85%; }
  .media .flower-cluster--media { right: -48px; width: 140px; height: 205px; }
  .contact .contact__phone a { font-size: var(--text-h2); }
  .site-footer { --footer-wave-height: 60px; }
  .site-footer .flower-cluster--contact { --edge-flower-unit: .37px; left: -76px; top: -60px; }
  .site-footer .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-content); }
  .site-footer .footer-address { grid-column: 1; text-align: center; }
  .site-footer .footer-utility { justify-content: center; }
  .site-footer .footer-visual { grid-column: 1; grid-row: 2; width: min(76%, 320px); justify-self: center; }
  .site-footer .footer-visual > img { max-height: 245px; }
  .site-footer .flower-cluster--footer { right: -45px; }
}

/* assets/css/section-wave-responsive.css */
/* Non-FV ribbons: a fixed-proportion artboard, cropped at the screen edges.
 * The SVG symbols retain their approved paths and fixed construction transform.
 * Width AND height use the same scale; no mobile height floor compresses X only.
 * 9.5:1 preserves the adopted ~1440px desktop composition. */
.section-pad,
.site-footer {
  --section-wave-canvas-width: max(760px, 100vw);
  --section-wave-height: calc(var(--section-wave-canvas-width) / 9.5);
  --section-contact-wave-height: calc(var(--section-wave-height) * .62);
  --footer-wave-height: calc(var(--section-wave-canvas-width) * .07);
}

.section-pad .section-wave,
.site-footer .site-footer__wave {
  width: var(--section-wave-canvas-width);
  max-width: none;
}

/* Override Contact's local custom-property definition too. The shallower
 * contact/footer compositions have their own FIXED ratios, not distorted ones. */
.contact.section-pad {
  --section-contact-wave-height: calc(var(--section-wave-height) * .62);
}

/* Same metallic stroke geometry, with a viewport-aware static gradient.
 * JS adds only one path per ribbon; the original remains a no-JS fallback. */
.section-wave__responsive-gold { pointer-events: none; }

/* assets/css/header-collapse.css */
/* The header and its reserved body space share one fluid height; FV stays untouched. */
:root {
  --header-height: clamp(62px, calc(1.83824vw + 53.1765px), 72px);
}
.site-header {
  --header-logo-width: clamp(145px, calc(10.1103vw + 96.4706px), 200px);
  --header-gutter: clamp(15px, 3.125vw, 32px);
}
.site-header .site-header__inner {
  position: relative;
  width: min(calc(100% - 2 * var(--header-gutter)), 1850px);
  gap: clamp(16px, 2vw, 30px);
}
.site-header .site-brand { flex: 0 0 var(--header-logo-width); }
.site-header .site-brand img {
  width: 100%;
  max-height: min(var(--header-logo-max-height, 68px), calc(var(--header-height) - 24px));
}
.site-header.is-scrolled::before {
  background: var(--color-blush);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* The full logo and desktop link row stay in place at every scroll position. */
.header-nav-track {
  min-width: 0;
  margin-left: auto;
  padding-block: 6px;
}
.site-header .primary-nav {
  font-size: clamp(14px, calc(.240385vw + 11.5385px), 15px);
  line-height: 1.5;
  gap: clamp(20px, calc(3.846154vw - 19.384615px), 36px);
}
.site-header .primary-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-header .primary-nav .nav-contact {
  padding: 8px clamp(14px, calc(2.40385vw - 10.6154px), 24px);
}
.site-header .menu-toggle {
  --menu-icon-size: 32px;
  --menu-icon-stroke: 1.8px;
  position: absolute;
  z-index: 1003;
  top: 50%;
  right: 0;
  display: none;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  margin: 0;
  padding: 6px;
  gap: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}
.site-header .menu-toggle span {
  display: none;
}
.site-header .menu-toggle svg {
  flex: none;
  width: var(--menu-icon-size);
  height: var(--menu-icon-size);
}
.site-header .menu-toggle svg line {
  /* Keep stroke weight independent from the SVG's display size, including the X. */
  vector-effect: non-scaling-stroke;
  stroke-width: var(--menu-icon-stroke);
  transition: transform .3s ease, opacity .2s ease;
}
.site-header .menu-toggle svg line:nth-child(2) { transform-origin: 12px 6px; }
.site-header .menu-toggle svg line:nth-child(3) { transform-origin: 12px 18px; }
.site-header .menu-toggle[aria-expanded="true"] svg line:nth-child(1) { opacity: 0; }
.site-header .menu-toggle[aria-expanded="true"] svg line:nth-child(2) { transform: translateY(6px) rotate(45deg); }
.site-header .menu-toggle[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Keep the existing accessible mobile drawer and its opaque reading surface. */
.header-drawer {
  position: fixed;
  z-index: 1002;
  top: var(--header-height);
  right: max(15px, calc((100vw - 1850px) / 2));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(240px, calc(100vw - 30px));
  max-height: calc(100dvh - var(--header-height) - 16px);
  padding: 8px 20px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(164, 13, 94, .12);
  border-radius: 4px;
  background: #fdf3f3;
  color: var(--color-brand-ui);
  box-shadow: 0 12px 32px rgba(65, 0, 25, .15);
  font-family: var(--font-sans);
  font-size: 16px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  transition: opacity .25s ease, transform .32s ease, visibility 0s .32s;
}
.header-drawer.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  transition: opacity .25s ease, transform .32s ease, visibility 0s;
}
.header-drawer a { padding: 12px 4px; border-bottom: 1px solid #ead4de; }
.header-drawer a:hover { color: #680525; }
.header-drawer .nav-contact { margin-top: 16px; padding: 12px 18px; color: #fff; text-align: center; }
.header-drawer .nav-contact:hover { background: #680525; color: #fff; }
/* Keep phone sizing, then ease into a more readable tablet logo without a breakpoint jump. */
@media (min-width: 600px) {
  :root { --header-height: clamp(64.2px, calc(8.214286vw + 14.914286px), 78px); }
  .site-header { --header-logo-width: clamp(157.14px, calc(37.416667vw - 67.36px), 220px); }
}
@media (min-width: 768px) {
  :root { --header-height: clamp(78px, calc(1.5625vw + 66px), 82px); }
  .site-header { --header-logo-width: clamp(220px, calc(7.8125vw + 160px), 240px); }
}
/* Desktop stays inline from 1024px; match the tablet logo and height at the handoff. */
@media (min-width: 1024px) {
  :root { --header-height: clamp(82px, calc(3.365385vw + 47.538462px), 96px); }
  .site-header { --header-logo-width: clamp(240px, calc(14.423077vw + 92.307692px), 300px); }
}
/* Grow each part gently alongside the wider composition; don't scale the header as one image. */
@media (min-width: 1440px) {
  :root { --header-height: clamp(96px, calc(2.142857vw + 65.142857px), 120px); }
  .site-header {
    --header-logo-width: clamp(300px, calc(5.357143vw + 222.857143px), 360px);
    --header-logo-max-height: clamp(68px, calc(1.607143vw + 44.857143px), 86px);
  }
  .site-header .primary-nav {
    font-size: clamp(15px, calc(.357143vw + 9.857143px), 19px);
    gap: clamp(36px, calc(1.071429vw + 20.571429px), 48px);
  }
  .site-header .primary-nav a {
    min-height: clamp(44px, calc(.714286vw + 33.714286px), 52px);
  }
  .site-header .primary-nav .nav-contact {
    padding: clamp(8px, calc(.357143vw + 2.857143px), 12px)
      clamp(24px, calc(.714286vw + 13.714286px), 32px);
  }
}
@media (max-width: 1023.98px) {
  .header-nav-track { display: none; }
  .site-header .menu-toggle { display: flex; }
}
@media (max-width: 600px) {
  .site-header .menu-toggle {
    --menu-icon-size: 24px;
    --menu-icon-stroke: 1.6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::before,
  .site-header .menu-toggle svg line,
  .header-drawer { transition: none !important; }
}

/* assets/css/header-hero-spacing.css */
/* Move the COMPLETE approved FV via its outer frame, never individual layers.
 * Normal-flow margin keeps the following Profile section at the same distance
 * from the wave. No transforms, scale changes or inner artwork coordinates. */
.hero-frame {
  --header-fv-offset: 2px;
  margin-block-start: var(--header-fv-offset);
}

/* Keep the approved desktop composition at its original vertical position.
 * Only phone/tablet compositions receive additional outer breathing room. */
@media (width >= 1024px) and (orientation: landscape), (width > 1100px) {
  .hero-frame {
    --header-fv-offset: 0px;
  }
}

/* Home navigation must preserve the added outer breathing room. This affects
 * only the anchor's scroll destination, not the FV's layout or composition. */
.hero-frame > .hero {
  scroll-margin-top: max(0px, var(--header-fv-offset));
}

/* assets/css/profile-pages.css */
/* Profile only. The completed hero, header and other section layouts stay untouched. */
.profile-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Tighten only the gap after the profile copy, never the card's own box. */
.profile .timeline { margin-top: calc(var(--space-content) - 1rem); }
.profile .timeline__toolbar { display: flex; align-items: center; justify-content: flex-end; height: 24px; }
/* Optical right alignment: 14px inside the hit area + 3.5px inside the SVG.
 * Keep the 44px hit target; even the phone gutter still contains it. */
.profile .timeline__pause { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin-inline-end: -17.5px; padding: 0; border: 0; background: none; color: #a40d5e; cursor: pointer; }
.profile .timeline__pause svg { width: 16px; height: 16px; stroke-width: 1.6; }
.profile .timeline__pause [hidden], .profile .timeline__pause[hidden] { display: none; }
.profile .timeline__pause:focus-visible, .profile .timeline__track:focus-visible { outline: 2px solid #a40d5e; outline-offset: -2px; }
.profile .timeline--loop .timeline__track { display: block; scroll-snap-type: none; scroll-behavior: auto; overscroll-behavior-x: contain; }
.profile .timeline__rail { display: flex; gap: var(--space-grid); width: max-content; }
.profile .timeline__rail .timeline-card { width: 305px; flex: 0 0 305px; scroll-snap-align: none; }
/* Generated botanical raster, not the rejected hand-drawn SVG.
 * Flip the display only: the bloom faces out to the card's right edge.
 * Decoration must not change card padding, text width or intrinsic height. */
.profile .timeline-card {
  --timeline-flower-color: var(--color-brand-ui);
  --timeline-flower-size: 96px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Keep the original gold edge; only the outer halo uses the text's pink. */
  box-shadow:
    inset 0 0 0 1px var(--section-metal-edge),
    0 0 6px color-mix(in srgb, var(--color-brand-ui) 8%, transparent),
    0 0 12px color-mix(in srgb, var(--color-brand-ui) 14%, transparent);
}
.profile .timeline-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -10px;
  bottom: -16px;
  width: var(--timeline-flower-size);
  aspect-ratio: 1;
  background-color: var(--timeline-flower-color);
  -webkit-mask: url("/assets/images/decor/gentian-card-mask-v1.svg") center / contain no-repeat;
  mask: url("/assets/images/decor/gentian-card-mask-v1.svg") center / contain no-repeat;
  transform: scaleX(-1);
  opacity: .85;
  pointer-events: none;
}
.profile .timeline-card > strong, .profile .timeline-card > p { position: relative; z-index: 1; }
.profile .timeline--loop.is-ready .timeline__track { cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; }
.profile .timeline--loop.is-dragging .timeline__track { cursor: grabbing; }
.profile .profile__more { margin-top: var(--space-action); text-align: center; }

.office-eri-site.profile-detail-page { overflow-x: clip; }
.profile-detail.section-pad { padding-top: clamp(24px, 3vw, 48px); padding-bottom: clamp(120px, 12vw, 200px); }
.profile-detail__breadcrumb { display: flex; gap: 12px; align-items: center; margin-bottom: clamp(32px, 4vw, 56px); font-size: 12px; color: #78676d; }
.profile-detail__breadcrumb a { color: #a40d5e; }
.profile-detail__layout { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.8fr); column-gap: clamp(48px, 5.4vw, 88px); align-items: start; max-width: 1220px; margin-inline: auto; }
.profile-detail__heading { grid-column: 2; grid-row: 1; margin-bottom: 38px; }
.profile-detail__heading h1 { display: flex; align-items: baseline; gap: 28px; margin: 0 0 26px; color: #a40d5e; font-weight: 400; }
.profile-detail__heading h1 .script-text { font-size: clamp(48px, 4.2vw, 62px); line-height: 1.15; }
.profile-detail__heading h1 > span:last-child { font-family: var(--font-sans); font-size: 13px; white-space: nowrap; font-weight: 400; }
.profile-detail__lead { margin: 0; font-family: var(--font-serif); font-size: clamp(22px, 1.9vw, 28px); line-height: 1.75; font-weight: 400; }
.profile-detail__aside { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.profile-detail__photo { position: relative; width: 100%; max-width: 305px; margin: 10px auto 30px; }
.profile-detail__portrait { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 50%; }
.profile-detail__flower { position: absolute; z-index: 0; width: 65%; max-width: none; left: -22%; bottom: -8%; transform: rotate(-21deg); }
.profile-detail__name { margin: 0 0 10px; text-align: center; font-family: var(--font-serif); font-size: 30px; letter-spacing: .12em; font-weight: 400; }
.profile-detail__role { text-align: center; font-size: 11px; margin: 0; color: #75676b; line-height: 1.9; }
.profile-detail__contents { display: grid; margin-top: 38px; border-top: 1px solid #ddbac7; }
.profile-detail__contents a { padding: 17px 2px; border-bottom: 1px solid #e8ccd6; color: #a40d5e; font-size: 13px; line-height: 1.8; text-decoration: none; }
.profile-detail__contents a:hover { color: #680525; background: #a40d5e05; }
.profile-detail__article { grid-column: 2; grid-row: 2; min-width: 0; }
.profile-detail__chapter { scroll-margin-top: 28px; }
.profile-detail__chapter + .profile-detail__chapter { margin-top: 42px; }
.profile-detail__chapter h2 { position: relative; padding-left: 17px; margin: 0 0 17px; font-family: var(--font-serif); font-size: clamp(20px, 1.6vw, 24px); font-weight: 400; color: #a40d5e; line-height: 1.65; }
.profile-detail__chapter h2::before { content: ''; position: absolute; left: 0; top: .25em; bottom: .2em; width: 2px; background: #a40d5e; border-radius: 2px; }
.profile-detail__chapter .prose p { margin: 0; }
.profile-detail__chapter .prose p + p { margin-top: 1.35em; }
.profile-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; margin-top: 48px; }
.profile-detail__actions .button { min-width: 230px; }
.profile-detail__back { color: #a40d5e; font-size: 13px; text-underline-offset: 5px; }
.profile-detail__contents a:focus-visible, .profile-detail__back:focus-visible { outline: 2px solid #a40d5e; outline-offset: 4px; }
@media (min-width: 901px) and (min-height: 800px) {
  .profile-detail__aside { position: sticky; top: calc(var(--header-height) + 28px); }
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .profile-detail__layout { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .profile-detail__heading { display: contents; }
  .profile-detail__heading h1 { grid-column: 1; grid-row: 1; justify-content: center; margin-bottom: 32px; }
  .profile-detail__lead { grid-column: 1; grid-row: 3; text-align: center; margin-bottom: 36px; }
  .profile-detail__aside { grid-column: 1; grid-row: 2; position: static; margin-bottom: 32px; }
  .profile-detail__photo { width: 240px; margin-top: 0; }
  .profile-detail__contents { display: none; }
  .profile-detail__article { grid-column: 1; grid-row: 4; }
  .profile-detail__actions { justify-content: center; }
}
@media (max-width: 600px) {
  .profile .timeline-card { --timeline-flower-size: 88px; }
  .profile .timeline__rail .timeline-card { width: 260px; flex-basis: 260px; }
  .profile .profile__more .button { min-width: 0; width: min(100%, 310px); }
  .profile-detail__heading h1 { gap: 24px; margin-bottom: 24px; }
  .profile-detail__heading h1 .script-text { font-size: 48px; }
  .profile-detail__heading h1 > span:last-child { font-size: 12px; }
  .profile-detail__lead { font-size: 20px; }
  .profile-detail__lead br { display: none; }
  .profile-detail__photo { width: min(220px, 76%); }
  .profile-detail__name { font-size: 26px; }
  .profile-detail__chapter + .profile-detail__chapter { margin-top: 36px; }
  .profile-detail__chapter h2 { font-size: 20px; padding-left: 13px; }
  .profile-detail__chapter .prose { font-size: 15px; line-height: 1.95; }
  .profile-detail__actions { flex-direction: column; gap: 24px; }
  .profile-detail__actions .button { min-width: 0; width: min(100%, 310px); }
}