/* Registered lengths interpolate continuously on native scroll timelines. */
@property --title-fade-start{syntax:"<length>";inherits:false;initial-value:-24px}
@property --title-fade-end{syntax:"<length>";inherits:false;initial-value:0px}
@property --backdrop-entry-feather{syntax:"<length>";inherits:false;initial-value:0px}
/* Frame the opening around the landscape; retain the original brand styling. */
body[data-page="home"]{--opening-edge:clamp(24px,5vw,96px);--opening-brand-top:calc(.75vw + clamp(21.375px,1.78125vw,32.0625px) + clamp(7.875px,.65625vw,11.8125px))}
html[lang] body[data-page="home"] .hero-title{padding:0 17.5vw;gap:0}
html[lang] body[data-page="home"] .hero-title::before{background:linear-gradient(180deg,rgb(var(--reading-shade)/.04),rgb(var(--reading-shade)/.16) 24%,rgb(var(--reading-shade)/.5) calc(50% - 4rem),rgb(var(--reading-shade)/.5) calc(50% + 4rem),rgb(var(--reading-shade)/.14) 82%,transparent)}
html[lang] body[data-page="home"].forest-home .hero-title::before{background:none}
.opening-quiet{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;height:100%;text-align:center}
.hero-introduction>span{display:block}
.opening-brand::before{content:"";position:absolute;inset:-8rem clamp(-28rem,-22vw,-8rem);z-index:-1;pointer-events:none;background:radial-gradient(ellipse closest-side,rgb(var(--reading-shade)/.42),rgb(var(--reading-shade)/.28) 35%,rgb(var(--reading-shade)/.1) 65%,transparent 100%)}
html[lang] body[data-page="home"] .hero-title h1.opening-brand{position:relative;isolation:isolate;max-width:100%;font:400 clamp(16px,1.2vw,21px)/1 Cinzel,"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;letter-spacing:.16em;text-transform:none;white-space:nowrap;color:var(--heading-paper);text-shadow:var(--heading-shadow)}
html[lang="en"] body[data-page="home"] .opening-brand .brand-lockup{gap:.6em}
html[lang] body[data-page="home"] .hero-introduction{position:absolute;top:calc(50% + clamp(0px,126px - 18svh,56px));bottom:auto;left:0;translate:0 -50%;display:block;width:100%;max-width:100%;margin:0;font:normal 400 clamp(10px,.8vw,12px)/1.5 Cinzel,Georgia,serif;letter-spacing:.18em;text-align:center;text-transform:uppercase;white-space:normal;text-wrap:balance;color:#f5f0e5;text-shadow:none}
/* Preserve reading clearance as the reference title sits lower in wide, short
   windows. The stable-height correction tapers to zero without a toolbar jump. */
html[lang] body[data-page="home"] .hero-introduction{margin-top:min(max(0px,var(--opening-brand-top) - clamp(16px,2svh,24px) - 12px),max(0px,var(--opening-brand-top) + 82px - 22svh))}
/* Carry the same small, spaced Cinzel treatment through the full sentence. */
.hero-introduction>span{max-width:48ch;margin-inline:auto;text-wrap:balance}
.hero-introduction>span+span{margin-top:clamp(18px,2vw,30px)}
/* Keep one visible title and retain the homepage heading for assistive readers. */
html[lang] body[data-page="home"] .hero-title h1.opening-brand{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%)}
/* Match the reference logo's visible origin, after its link padding. */
html[lang] body[data-page="home"] .header .wordmark{left:5vw;top:calc(var(--opening-brand-top) + env(safe-area-inset-top,0px));visibility:visible;opacity:1;pointer-events:auto;translate:none;color:var(--heading-paper);text-shadow:var(--heading-shadow);transition:none}
html[lang] body[data-page="home"] .header .wordmark:focus-visible{opacity:1}
/* The opening uses a corner fade; the lower scenes use the reading text's oval. */
@media(forced-colors:none){
 html[lang] body[data-page="home"] .header .wordmark::before,
 html[lang] body[data-page="home"] .header .wordmark::after{
  transition:opacity .45s ease;
 }
 html[lang] body[data-page="home"] .header .wordmark::before{
  display:block;position:fixed;inset:0 auto auto 0;opacity:1;
  width:clamp(300px,36vw,680px);height:clamp(220px,24vw,460px);
  mask-image:none;
  background:radial-gradient(ellipse 100% 100% at 0 0,
   rgb(24 35 30/.5) 0%,rgb(24 35 30/.4) 24%,
   rgb(24 35 30/.23) 48%,rgb(24 35 30/.08) 72%,
   rgb(24 35 30/.015) 90%,rgb(24 35 30/0) 100%);
 }
 html[lang] body[data-page="home"] .header .wordmark::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;opacity:0;
  inset:calc(-1 * clamp(48px,4vw,72px)) calc(-1 * clamp(64px,6vw,96px));
  /* Attenuate this deeper shade over the ceiling, then lift it over foliage. */
  background:radial-gradient(ellipse closest-side at 50% 50%,
   rgb(var(--reading-shade)/.66) 0%,rgb(var(--reading-shade)/.62) 36%,
   rgb(var(--reading-shade)/.43) 58%,rgb(var(--reading-shade)/.17) 78%,
   rgb(var(--reading-shade)/.043) 91%,transparent 100%);
 }
 html[lang] body[data-page="home"].home-brand-below-ceiling .header .wordmark{--brand-oval-opacity:1}
 html[lang] body[data-page="home"]:is(.home-sections-active,.footer-active) .header .wordmark::before{opacity:0}
 html[lang] body[data-page="home"]:is(.home-sections-active,.footer-active) .header .wordmark::after{opacity:var(--brand-oval-opacity,.7)}
 html[lang] body[data-page="home"].menu-open .header .wordmark::before,
 html[lang] body[data-page="home"].menu-open .header .wordmark::after{opacity:0}
}
@media(prefers-reduced-motion:reduce){
 html[lang] body[data-page="home"] .header .wordmark::before,
 html[lang] body[data-page="home"] .header .wordmark::after{transition:none}
}
html[lang] body[data-page="home"] .header{animation:none}
.opening-navigation,.opening-scroll{position:absolute;z-index:5;font:400 11px/1.4 Cinzel,Georgia,serif;letter-spacing:.04em;text-transform:uppercase;color:#f5f0e5;text-shadow:0 1px 3px rgb(var(--reading-shade)/.6)}
.opening-navigation{top:calc(clamp(28px,3.3vw,52px) + env(safe-area-inset-top,0px));right:var(--opening-edge);display:flex;gap:clamp(18px,2.5vw,40px)}
.opening-navigation a,.opening-scroll{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none}
.opening-navigation a{color:inherit;opacity:.84}
.opening-navigation a:hover,.opening-navigation a:focus-visible{opacity:1}
.opening-scroll{right:var(--opening-edge);bottom:calc(clamp(20px,3.2svh,40px) + env(safe-area-inset-bottom,0px));opacity:.84;gap:10px}
.opening-scroll::after{content:"↓";font:14px Georgia,serif}
.opening-navigation a:focus-visible,.opening-scroll:focus-visible{outline:1px solid currentColor;outline-offset:5px;opacity:1}
/* Only reading text fades at the fixed title; scenery and controls remain intact. */
body[data-page="home"] .title-clearance-text{
 -webkit-mask-image:linear-gradient(to bottom,transparent var(--title-fade-start,-24px),#000 var(--title-fade-end,0px));
 mask-image:linear-gradient(to bottom,transparent var(--title-fade-start,-24px),#000 var(--title-fade-end,0px));
}
@media(forced-colors:active){body[data-page="home"] .title-clearance-text{
 -webkit-mask-image:linear-gradient(to bottom,transparent var(--title-fade-end,0px),#000 var(--title-fade-end,0px));
 mask-image:linear-gradient(to bottom,transparent var(--title-fade-end,0px),#000 var(--title-fade-end,0px));
}}
body[data-page="home"] .edge-details{display:none}
/* Overlapping character fades, tightened to a 0.7s / 25ms cadence.
   Inline glyphs keep the existing position, spacing and line breaks. */
@keyframes quiet-mist-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
 body.is-loading .opening-quiet{opacity:0}
 body.opening-text-enter opening-letter{animation:quiet-mist-reveal .7s var(--opening-letter-delay,0ms) linear both}
 body.motion-paused opening-letter{animation-play-state:paused}
}
@media(max-width:767px){
 body[data-page="home"]{--opening-brand-top:4.9751243781vw}
 html[lang] body[data-page="home"] .header .wordmark{left:9.8880597015vw}
 html[lang] body[data-page="home"] .hero-title{padding-inline:24px}
 html[lang] body[data-page="home"] .hero-title h1.opening-brand{letter-spacing:.12em}
}
/* Keep the sentence below the fixed wordmark in a short landscape window. */
@media(max-height:500px){
 html[lang] body[data-page="home"] .hero-introduction{top:calc(50% + 56px);font-size:9px}
 .hero-introduction>span+span{margin-top:10px}
}
@media(prefers-reduced-motion:reduce),(forced-colors:active){.opening-quiet{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}}
@media(prefers-reduced-motion:reduce),(forced-colors:active){opening-letter{opacity:1!important;animation:none!important}}
@media(forced-colors:active){.opening-brand::before{display:none}html[lang] body[data-page="home"] :is(.header .wordmark,.hero-title h1.opening-brand,.hero-introduction,.opening-navigation,.opening-scroll){color:CanvasText;background:Canvas;text-shadow:none;filter:none}}