/* Homepage hero (Vale, 2026-10-15) — rendered by hero.js */
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital@1&display=swap');
:root{--hero-ease:cubic-bezier(.16,1,.3,1)}
/* until hero.js has built its lines, keep the reference's split text out of sight (no flash, no jiggle) */
html:not(.tcs-hero-ready) .p-top-kv__heading,html:not(.tcs-hero-ready) .p-top-kv__text{visibility:hidden}
.p-top-kv__logo.tcs-mark-replaced{display:none!important}

/* masked lines: each line rises out of its own clip */
.tcs-hero-line{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.tcs-hero-line>span{display:block;transform:translateY(calc(100% + .3em));opacity:0;transition:transform 1.4s var(--hero-ease),opacity 300ms ease}
.tcs-hero-line.is-p>span{transform:translateY(40%);opacity:0;transition:transform 1.2s var(--hero-ease),opacity 1s ease}
html.tcs-hero-in .tcs-hero-line>span{transform:none;opacity:1}
html.tcs-hero-in .tcs-hero-line.is-h>span{transition-delay:calc(.9s + var(--i) * .1s)}
html.tcs-hero-in .tcs-hero-line.is-p>span{transition-delay:calc(1.25s + var(--i) * .08s)}

/* heading + text: top right, clear of the wordmark */
html :is(#content,body) .p-top-kv__heading{font-family:var(--tcs-serif,Cardo,serif)!important;font-size:clamp(34px,3.4vw,58px)!important;line-height:1.08!important;letter-spacing:-.01em!important;font-weight:400!important}
html[lang=ja] :is(#content,body) .p-top-kv__heading{line-height:1.3!important;letter-spacing:.02em!important}
html :is(#content,body) .p-top-kv__text{margin-top:22px!important;max-width:34em;font:400 16px/1.6 var(--tcs-sans,Inter,sans-serif)!important;letter-spacing:0!important;color:rgba(246,244,238,.88)!important}

/* the stepped wordmark: exaggerated stair, Cooking in Cardo italic */
.tcs-mark{position:relative;display:block;color:#fff;font-family:Cardo,'Noto Serif JP',serif;font-weight:400;font-size:clamp(64px,10.6vw,196px);line-height:.86;letter-spacing:-.035em;margin-bottom:clamp(14px,1.6vw,26px);pointer-events:none;user-select:none}
.tcs-mark__line{display:block;overflow:clip;padding:0 .06em .1em 0;margin-bottom:-.1em}
.tcs-mark__line>span{display:inline-block;transform:translateY(calc(100% + .45em)) rotate(2deg);opacity:0;transform-origin:0 100%;transition:transform 1.6s var(--hero-ease),opacity 400ms ease;transition-delay:calc(.25s + var(--i) * .13s)}
.tcs-mark__line:nth-child(2){padding-left:19vw;font-style:italic;letter-spacing:-.02em}
.tcs-mark__line:nth-child(3){padding-left:38vw}
html.tcs-hero-in .tcs-mark__line>span{transform:none;opacity:1}
/* the reference's thin rule under the logo stays; give the scroll label room */
.p-top-kv__bottom-border{margin-top:0}

@media(max-width:767px){
 .tcs-mark{font-size:clamp(52px,17vw,96px)}
 .tcs-mark__line:nth-child(2){padding-left:11vw}
 .tcs-mark__line:nth-child(3){padding-left:22vw}
 html :is(#content,body) .p-top-kv__heading{font-size:clamp(30px,8.4vw,40px)!important}
 html :is(#content,body) .p-top-kv__text{font-size:15px!important}
}
@media(prefers-reduced-motion:reduce){.tcs-hero-line>span,.tcs-mark__line>span{transition:none!important;transform:none!important;opacity:1!important}}
/* soft scrim so white type holds on bright slides (no hard edges) */
.p-top-kv__slider::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(0deg,rgba(18,24,19,.55) 0%,rgba(18,24,19,.18) 45%,rgba(18,24,19,0) 70%),linear-gradient(270deg,rgba(18,24,19,.38) 0%,rgba(18,24,19,0) 55%)}
html[lang=ja] .p-top-kv__text,html[lang=ja] .p-top-kv__heading{word-break:auto-phrase;line-break:strict}
/* masks need room for descenders (italic g, y) — the clip was cutting them */
.tcs-mark__line{padding-bottom:.3em!important;margin-bottom:-.3em!important}
.tcs-hero-line{padding-bottom:.22em!important;margin-bottom:-.22em!important}

/* Initial paint must hide descendants too: the reference assigns visibility to split glyphs. */
html:not(.tcs-hero-ready) :is(.p-top-kv__heading,.p-top-kv__text,.p-top-kv__logo,.tcs-mark),
html:not(.tcs-hero-ready) :is(.p-top-kv__heading,.p-top-kv__text,.p-top-kv__logo,.tcs-mark) *{visibility:hidden!important}
/* Extra mask padding protects descenders; pre-animation offsets include that padding. */
html:not(.tcs-hero-in) .tcs-hero-line>span,
html:not(.tcs-hero-in) .tcs-mark__line>span{opacity:0}
@media(prefers-reduced-motion:reduce){html.tcs-hero-ready .tcs-hero-line>span,html.tcs-hero-ready .tcs-mark__line>span{opacity:1;transform:none}}