/* 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:1.12;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;padding-top:.14em}
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}}

/* October 18 iPhone feedback: keep the copy and wordmark in normal flow,
   so short screens and translated text cannot consume their separation. */
@media(max-width:767px){
 html body .p-top-kv{height:auto;min-height:100svh}
 html body .p-top-kv__inner{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(64px,10svh,88px);height:auto;min-height:100svh;padding-top:180px;box-sizing:border-box}
 html body .p-top-kv__content{position:relative;top:auto;right:auto;transform:none;-webkit-transform:none;flex:none}
 html body .p-top-kv__bottom{position:relative;bottom:auto;flex:none}
}

/* October 22: keep detail in the photography and give white copy a calm, dark backing. */
.p-top-kv__slider::after{background:linear-gradient(0deg,rgba(18,24,19,.52),rgba(18,24,19,.06) 62%),linear-gradient(270deg,rgba(20,18,16,.65),rgba(20,18,16,.30) 40%,transparent 72%)}
html body .p-top-kv__text{color:#fff!important;text-shadow:0 1px 9px rgba(0,0,0,.15)}
@media(max-width:767px){.p-top-kv__slider::after{background:linear-gradient(0deg,rgba(18,24,19,.67),rgba(18,24,19,.37) 60%,rgba(18,24,19,.10))}}
/* Keep the centre of the photographs bright; shade the actual text areas rather than the whole frame.
   Specificity also takes precedence over the seasonal launch stylesheet. */
html body .p-top-kv__slider::after{background:linear-gradient(0deg,rgba(18,21,17,.40),transparent 42%),radial-gradient(ellipse at 85% 34%,rgba(18,21,17,.55),rgba(18,21,17,.22) 34%,transparent 64%),linear-gradient(rgba(18,21,17,.09),rgba(18,21,17,.09))}
@media(max-width:767px){html body .p-top-kv__slider::after{background:linear-gradient(180deg,rgba(20,18,16,.15) 0%,rgba(20,18,16,.42) 25%,rgba(20,18,16,.42) 70%,rgba(20,18,16,.35) 100%)}}
html body .p-top-kv__text{text-shadow:0 1px 14px rgba(0,0,0,.35)}
@media(min-width:1600px){html body .p-top-kv__content{width:480px!important;right:7vw!important}html body .p-top-kv__heading,html body .p-top-kv__text{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}
@media(min-width:1600px){html body .p-top-kv__content-inner{width:100%!important;max-width:none!important;padding-left:0!important;padding-right:0!important}html body .p-top-kv__content-box{width:100%!important;max-width:480px!important;margin-left:0!important}}
@media(min-width:768px) and (max-width:1024px){html body .p-top-kv .p-top-kv__content{width:440px!important;right:6vw!important}html body .p-top-kv__content-inner{width:100%!important;padding-left:0!important;padding-right:0!important}html body .p-top-kv__content-box,html body .p-top-kv__heading,html body .p-top-kv__text{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}
@media(min-width:768px) and (max-width:1024px){html body .tcs-mark{margin-bottom:48px!important;transform:translateY(-48px)}}
/* 10-25 (Kotaro): the copy column read squeezed. Give it a real measure at every desktop width, and set the
   "since 2016" line as a quiet label under the two paragraphs. */
@media(min-width:1025px) and (max-width:1599px){html body .p-top-kv .p-top-kv__content{width:clamp(440px,36vw,520px)!important;right:6vw!important}html body .p-top-kv__content-inner{width:100%!important;max-width:none!important;padding-left:0!important;padding-right:0!important}html body .p-top-kv__content-box,html body .p-top-kv__heading,html body .p-top-kv__text{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}
@media(min-width:1600px){html body .p-top-kv__content{width:540px!important}html body .p-top-kv__content-box{max-width:540px!important}}
@media(min-width:768px){html :is(#content,body) .p-top-kv__text{font-size:16.5px!important;line-height:1.65!important}}
html body .p-top-kv__text .tcs-hero-line.is-p+.tcs-hero-line.is-p{margin-top:.7em}
html body .p-top-kv__text .tcs-hero-line.is-p:last-child{margin-top:1.3em;font-size:12px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
html[lang=ja] body .p-top-kv__text .tcs-hero-line.is-p:last-child{font-size:13px;letter-spacing:.06em;text-transform:none}