/* ==========================================================================
   Tatsuya — site stylesheet v2 (brand system v1)
   Replaces /assets/site.css. Written for the existing markup and site.js:
   same views (home, about, experience, collaboration, contact), same copy,
   same concierge dialog. No mountains, no snow.
   ========================================================================== */
:root{
  --sumi:#1C1A17; --washi:#F4F2EC; --kinu:#E7E2D7; --hinoki:#B39A6E; --kon:#0F1A2C; --shu:#B23A2A;
  --hai:#67655E; --kasumi:#B9BFC9; --hinoki-pale:#C2A97C; --wood-text:#6B5735;
  --line:#D2CBBD; --line-dark:#33435E; --ink-soft:#34322D;
  --display:"Shippori Mincho", Georgia, "Times New Roman", serif;
  --sans:"Zen Kaku Gothic New", "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.22,.8,.22,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --hh:92px;                                   /* header height */
  --gut:clamp(20px,4.4vw,72px);                /* side gutter */
}
*{box-sizing:border-box}
html{background:var(--washi);scrollbar-gutter:stable}
body{margin:0;background:var(--washi);color:var(--sumi);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sumi);outline-offset:4px}
.site{min-height:100svh;padding:0;background:var(--washi)}
.frame{position:relative;min-height:100svh;background:var(--washi);overflow:hidden}

/* ---------- retired layers of the previous design ---------- */
.viewport,.mountains,.snow{display:none!important}

/* ---------- header: a quiet washi bar with a hairline ---------- */
.header{position:fixed;z-index:20;top:0;left:0;right:0;height:var(--hh);padding:0 var(--gut);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;
  background:rgba(244,242,236,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:block;width:clamp(150px,13vw,196px);padding:0;border:0;background:none;cursor:pointer}
.logo img{width:100%;height:auto}
.nav{display:flex;justify-content:center;align-items:center;gap:clamp(18px,3vw,48px)}
.nav button,.nav a,.languages a,.concierge-trigger{position:relative;border:0;background:none;padding:8px 2px;cursor:pointer;
  font:500 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--sumi);opacity:.68;
  transition:opacity .3s ease}
.nav button:hover,.nav a:hover,.nav .active,.languages a:hover,.languages a.active,.concierge-trigger:hover{opacity:1}
.nav button:not(.concierge-trigger):after,.nav a:after{content:"";position:absolute;left:2px;right:2px;bottom:2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--ease)}
.nav button:hover:after,.nav a:hover:after,.nav .active:after{transform:scaleX(1);transform-origin:0 50%}
.concierge-trigger{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.concierge-trigger svg{width:14px;height:14px;fill:currentColor}
.header-actions{display:flex;align-items:center;gap:28px}
.languages{display:flex;gap:12px}
.languages a.active{box-shadow:inset 0 -1px 0 currentColor}
.concierge-trigger-mobile{display:none}

/* ---------- home: words on paper on the left, photographs on the right ---------- */
.art{position:absolute;inset:var(--hh) 0 0 0;pointer-events:none}
.hero-media{position:absolute;top:0;right:0;bottom:0;width:50%;margin:0;overflow:hidden;background:var(--sumi)}
.hero-media i{position:absolute;inset:0;background:center 30%/cover no-repeat;opacity:0;animation:tz-slide 21s infinite}
.hero-media i:nth-child(1){animation-delay:0s}
.hero-media i:nth-child(2){animation-delay:7s}
.hero-media i:nth-child(3){animation-delay:14s}
@keyframes tz-slide{0%{opacity:0;transform:scale(1.07)}5%{opacity:1}33%{opacity:1}39%{opacity:0;transform:scale(1)}100%{opacity:0}}
.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,26,23,.18),rgba(28,26,23,0) 30%)}

.hero{position:absolute;z-index:3;left:var(--gut);top:calc(var(--hh) + 15vh);width:min(44%,640px);margin:0}
.hero :is(h1,h2){margin:0;font:500 clamp(48px,6.2vw,98px)/.98 var(--display);letter-spacing:-.025em;color:var(--sumi)}
.hero p{margin:28px 0 0;font:500 12px/1 var(--sans);letter-spacing:.26em;color:var(--wood-text)}
.accent{color:var(--shu)}
.hero p.accent{color:var(--wood-text)}
.place{position:absolute;z-index:3;left:var(--gut);bottom:clamp(28px,7vh,72px);width:min(40%,420px);padding-top:20px;border-top:1px solid var(--line);
  font:500 clamp(20px,1.8vw,26px)/1.25 var(--display);color:var(--sumi)}
.place-locations{display:block}
.place-and{color:var(--shu);font-size:.8em}
.place-season{display:block;margin-top:12px;font:500 12px/1 var(--sans);letter-spacing:.26em;color:var(--wood-text)}
.place-season .accent{color:var(--wood-text)}

/* leaving home: the home layer steps aside, the section page takes over */
.art,.hero,.place{transition:opacity .5s ease,visibility .5s}
.frame:not([data-view=home]):not(.is-closing) :is(.art,.hero,.place){opacity:0;visibility:hidden}
.frame:not([data-view=home]){min-height:100svh}

/* ---------- section pages ---------- */
.panel{display:none;position:relative;z-index:4;margin-top:var(--hh);padding:clamp(56px,7vw,112px) var(--gut) clamp(88px,10vw,150px);background:var(--washi);color:var(--sumi)}
.frame:not([data-view=home]) .panel{display:block;animation:tz-panel .9s var(--ease) both}
.frame.is-closing .panel{animation:none;opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .6s var(--ease)}
@keyframes tz-panel{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
.panel>section{display:none;max-width:1180px;margin:0 auto}
.frame[data-view=about] [data-section=about],.frame[data-view=experience] [data-section=experience],
.frame[data-view=collaboration] [data-section=collaboration],.frame[data-view=contact] [data-section=contact]{display:block}
.close{position:absolute;z-index:5;top:28px;right:var(--gut);width:44px;height:44px;border:0;background:none;cursor:pointer;
  font:300 34px/1 var(--sans);color:var(--sumi);transition:transform .6s var(--ease)}
.close:hover{transform:rotate(90deg)}
.panel :is(h1,h2){margin:0 0 28px;font:500 clamp(36px,4.3vw,62px)/1.04 var(--display);letter-spacing:-.02em;color:var(--sumi)}
.panel p{margin:0 0 22px;max-width:62ch;font:400 clamp(16px,1.2vw,18px)/1.75 var(--sans);color:var(--ink-soft)}
.panel small{font:500 11px/1 var(--sans);letter-spacing:.2em}

/* about */
.about-editorial .lead,.about-editorial .story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:start}
.about-editorial .portrait{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 30%}
.about-editorial .lead>div{padding-top:clamp(0px,3vw,40px)}
.about-editorial .story{margin-top:clamp(64px,8vw,120px);align-items:center}
.about-editorial .details{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.about-editorial .details :is(video,img){width:100%;aspect-ratio:9/16;object-fit:cover}
.about-editorial .motion-toggle{display:block;margin:14px 0 0 auto;border:0;background:none;cursor:pointer;font:500 10.5px/1 var(--sans);letter-spacing:.18em;color:var(--hai)}
.chef-restaurant-link,.about-editorial a[href*="guide.michelin.com"]{color:var(--sumi);text-decoration:underline;text-decoration-color:var(--shu);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .3s ease}
.chef-restaurant-link:hover{color:var(--shu)}

/* experience */
.experience-opening{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:center}
.experience-photo{width:100%;object-fit:cover}
.experience-photo-top{aspect-ratio:5/4}
.experience-narrative{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);margin:clamp(56px,7vw,104px) 0;padding-top:40px;border-top:1px solid var(--line)}
.experience-narrative p{margin:0}
.experience-service{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,96px);align-items:center}
.experience-photo-bottom{aspect-ratio:1/1}
.panel .experience-rest{font:500 clamp(20px,1.7vw,24px)/1.4 var(--display);color:var(--sumi);margin:8px 0 0}
.experience-sake{margin-top:clamp(64px,8vw,112px);padding:36px 0;border-block:1px solid var(--line);text-align:center}
.panel .experience-sake p{margin:0 auto;max-width:36em;font:500 clamp(19px,1.6vw,23px)/1.5 var(--display);color:var(--sumi)}

/* collection: full-bleed bands */
.frame[data-view=collaboration] .panel{padding:0}
.frame[data-view=collaboration] .panel>section{max-width:none}
.frame[data-view=collaboration] .close{color:var(--washi);top:24px}
.collab-native em{font-style:normal}
.collab-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--sumi)}
.collab-cards article{position:relative;min-height:min(78vh,720px);overflow:hidden;color:var(--washi)}
.collab-cards article>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.collab-cards article:hover>img{transform:scale(1.05)}
.collab-cards article:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,26,23,.92),rgba(28,26,23,.35) 42%,rgba(28,26,23,0) 70%)}
.collab-cards article>b{position:absolute;z-index:2;top:26px;right:26px;font:500 13px/1 var(--display);color:var(--washi)}
.collab-cards article>div{position:absolute;z-index:2;left:clamp(24px,3vw,44px);right:clamp(24px,3vw,44px);bottom:36px;transition:transform .9s var(--ease)}
.collab-cards article:hover>div{transform:translateY(-8px)}
.collab-cards small{color:var(--hinoki-pale)}
.collab-cards h3{margin:12px 0 10px;font:500 clamp(44px,4.4vw,68px)/1 var(--display);color:var(--washi)}
.panel .collab-cards p{margin:0 0 16px;max-width:30ch;font-size:15px;line-height:1.6;color:rgba(244,242,236,.86)}
.collab-cards a,.collab-tasting a{display:inline-block;padding-bottom:7px;border-bottom:1px solid currentColor;font:500 11px/1 var(--sans);letter-spacing:.18em;text-decoration:none;transition:letter-spacing .5s var(--ease)}
.collab-cards a{color:var(--washi)}
.collab-cards a:hover,.collab-tasting a:hover{letter-spacing:.24em}
.collab-intro,.collab-partners,.collab-tasting,.collab-contact{padding:clamp(64px,8vw,120px) var(--gut)}
.collab-intro-grid,.collab-contact-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(36px,6vw,96px);align-items:end}
.collab-intro{background:var(--washi)}
.collab-intro em,.collab-contact em,.collab-tasting em{color:var(--hai)}
.collab-intro-grid :is(h1,h2){margin:0}
.panel .collab-intro p{margin:0 0 16px}
.collab-partners{background:var(--kon);color:var(--washi)}
.collab-partners>*{max-width:1180px;margin-left:auto;margin-right:auto}
.collab-partners h2{color:var(--washi)}
.collab-partners em{color:var(--kasumi)}
.collab-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border-top:1px solid var(--line-dark)}
.collab-benefits article{padding:28px 28px 8px 0;border-right:1px solid var(--line-dark)}
.collab-benefits article+article{padding-left:28px}
.collab-benefits article:last-child{border-right:0}
.collab-benefits b{font:500 13px/1 var(--display);color:var(--hinoki-pale)}
.collab-benefits h3{margin:16px 0 10px;font:500 20px/1.3 var(--display);color:var(--washi)}
.panel .collab-benefits p{font-size:14.5px;line-height:1.6;color:var(--kasumi)}
.collab-tasting{background:var(--kinu)}
.collab-tasting>div{max-width:1180px;margin:0 auto}
.collab-tasting a{color:var(--sumi);margin-top:8px}
.collab-contact{background:var(--washi);border-top:1px solid var(--line)}
.collab-contact-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,.7fr);align-items:start}
.collab-contact-grid :is(h1,h2){margin:0}
.collab-contact-grid>div{padding-top:20px;border-top:1px solid var(--line)}
.collab-contact-grid span{font:500 10.5px/1 var(--sans);letter-spacing:.2em;color:var(--wood-text)}
.collab-contact-grid h3{margin:14px 0 12px;font:500 22px/1.25 var(--display)}
.collab-contact-grid a{display:block;margin-top:6px;font-size:14.5px;color:var(--ink-soft);text-decoration:none}
.collab-contact-grid a:hover{color:var(--sumi);text-decoration:underline;text-underline-offset:4px}

/* contact */
.contact-intro{max-width:760px}
.contact-booking-copy{margin-top:-6px}
.contact-action{margin:28px 0 8px}
.panel p.contact-cta{display:inline-flex;align-items:center;gap:10px;margin:0;padding-bottom:8px;border-bottom:1px solid var(--sumi);font:500 clamp(24px,2.4vw,32px)/1.2 var(--display);color:var(--sumi)}
.contact-cta-arrow{width:18px;height:24px;animation:tz-nudge 2.6s var(--ease) infinite}
@keyframes tz-nudge{0%,60%,100%{transform:none}30%{transform:translateY(6px)}}
.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}
.contact-links a{display:inline-flex;align-items:center;gap:12px;font:500 clamp(19px,1.9vw,24px)/1.3 var(--display);color:var(--sumi);text-decoration:none;overflow-wrap:anywhere;transition:color .3s ease}
.contact-links a:hover{color:var(--wood-text)}
.wa{display:inline-flex;width:22px;height:22px;color:var(--sumi)}
.wa svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-platforms{margin-top:clamp(56px,7vw,96px);padding-top:28px;border-top:1px solid var(--line)}
.panel .contact-platforms-label{margin:0;max-width:none;text-align:center;font:500 10.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--hai)}
.profile-platforms{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(28px,5vw,72px);margin-top:20px}
.profile-platform{display:flex;align-items:center;justify-content:center;height:56px;opacity:.78;transition:opacity .3s ease}
.profile-platform:hover{opacity:1}
.profile-platform img{filter:brightness(0);max-width:100%}
.profile-platform a{display:flex;align-items:center;gap:10px;color:var(--sumi);text-decoration:none}
.profile-platform-airbnb{font:600 26px/1 Arial,sans-serif;letter-spacing:-1px}
.profile-platform-airbnb img{width:28px;height:31px}
.profile-platform-chefmaison img{width:160px;height:auto;transform:translateY(-7px)}
.profile-platform-takeachef img{width:136px;height:auto}

/* ---------- concierge dialog: the one dark room ---------- */
.concierge-dialog{width:min(600px,calc(100vw - 32px));padding:0;border:0;background:var(--kon);color:var(--washi);box-shadow:0 30px 90px rgba(15,26,44,.45)}
.concierge-dialog[open]{animation:tz-pop .6s var(--ease)}
.concierge-dialog::backdrop{background:rgba(28,26,23,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@keyframes tz-pop{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.concierge-dialog-copy{padding:clamp(44px,7vw,80px)}
.concierge-dialog h2{margin:0 0 20px;font:500 clamp(44px,5.5vw,68px)/.95 var(--display);letter-spacing:-.02em}
.concierge-dialog h2 em{font-style:normal;color:var(--hinoki-pale)}
.concierge-dialog p{max-width:420px;margin:0;font:400 16px/1.6 var(--sans);color:var(--kasumi)}
.concierge-dialog form{margin-top:36px}
.concierge-dialog label{display:block;margin-bottom:10px;font:500 10.5px/1 var(--sans);letter-spacing:.2em;color:var(--hinoki-pale)}
.concierge-dialog form>div{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--line-dark)}
.concierge-dialog input{min-width:0;padding:14px 2px;border:0;outline:0;background:transparent;color:var(--washi);font:400 22px var(--display)}
.concierge-dialog form button{border:0;background:none;color:var(--washi);font:500 11px/1 var(--sans);letter-spacing:.18em;cursor:pointer;padding:14px}
.concierge-close{position:absolute;right:18px;top:12px;border:0;background:none;color:var(--washi);font:300 30px/1 var(--sans);cursor:pointer}
.concierge-request{margin-top:36px;padding-top:24px;border-top:1px solid var(--line-dark)}
.concierge-dialog .concierge-request p{margin:0 0 14px;font-size:14.5px}
.concierge-request a{display:inline-flex;align-items:center;gap:10px;padding-bottom:7px;border-bottom:1px solid rgba(244,242,236,.45);color:var(--washi);font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-decoration:none}
.concierge-request a strong{font:500 18px/1.2 var(--display);letter-spacing:.01em}
.concierge-wa{display:inline-flex;width:20px;height:20px}
.concierge-wa svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6}
.concierge-dialog :focus-visible{outline-color:var(--washi)}

/* ---------- motion layer (motion.js adds the classes) ---------- */
.hero .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero .ln>span{display:inline-block}
/* hidden start states only when the page's head script marked motion as available */
.tz-motion .hero .ln>span{transform:translateY(108%);transition:transform 1.2s var(--ease)}
.tz-motion .hero .ln:nth-child(2)>span{transition-delay:.12s}
.tz-motion .hero p,.tz-motion .place{opacity:0;transition:opacity 1.1s ease .5s,transform 1.1s var(--ease) .5s;transform:translateY(10px)}
.tz-motion .hero-media{clip-path:inset(0 0 100% 0);transition:clip-path 1.6s var(--ease-io) .1s}
.frame.tz-ready .hero .ln>span{transform:none}
.frame.tz-ready .hero p,.frame.tz-ready .place{opacity:1;transform:none}
.frame.tz-ready .hero-media{clip-path:inset(0 0 0 0)}

.tz-noren{position:absolute;inset:0;z-index:30;overflow:hidden;cursor:pointer}
.tz-noren span{position:absolute;top:0;bottom:0;width:calc(33.334% + 1px);background:var(--sumi);transform:translate3d(0,0,0);transition:transform .55s var(--ease)}
.tz-noren span:nth-child(1){left:0}.tz-noren span:nth-child(2){left:33.333%}.tz-noren span:nth-child(3){right:0}
.tz-noren.part span:nth-child(1){transform:translate3d(-10px,0,0)}
.tz-noren.part span:nth-child(3){transform:translate3d(10px,0,0)}
.tz-noren.lift span{transition:transform 1.25s var(--ease-io)}
.tz-noren.lift span:nth-child(1){transform:translate3d(-10px,-104%,0);transition-delay:.04s}
.tz-noren.lift span:nth-child(2){transform:translate3d(0,-104%,0);transition-delay:.16s;transition-duration:1.4s}
.tz-noren.lift span:nth-child(3){transform:translate3d(10px,-104%,0)}
.tz-noren img{position:absolute;z-index:1;left:50%;top:50%;width:min(52vw,440px);opacity:0;transform:translate3d(-50%,-46%,0);transition:opacity .9s ease,transform 1.2s var(--ease)}
.tz-noren.show img{opacity:1;transform:translate3d(-50%,-50%,0)}
.tz-noren.part img{opacity:0;transform:translate3d(-50%,-56%,0);transition:opacity .4s ease,transform .7s var(--ease-io)}
.tz-noren.done{display:none}

.tz-rv{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1.2s var(--ease);transition-delay:var(--d,0s)}
.tz-rv.in{opacity:1;transform:none}
img.tz-rv,video.tz-rv{transform:none;clip-path:inset(10% 0 10% 0);transition:clip-path 1.4s var(--ease),opacity .9s ease;transition-delay:var(--d,0s)}
img.tz-rv.in,video.tz-rv.in{clip-path:inset(0 0 0 0)}
.collab-cards img.tz-rv{clip-path:none}

/* ---------- tablet ---------- */
@media (max-width:1000px){
  .nav{gap:18px}
  .concierge-trigger-desktop span{display:none}
  .hero{width:min(48%,560px)}
  .collab-benefits{grid-template-columns:1fr 1fr}
  .collab-benefits article:nth-child(2){border-right:0}
  .collab-benefits article:nth-child(3){padding-left:0}
  .collab-contact-grid{grid-template-columns:1fr 1fr}
  .collab-contact-grid :is(h1,h2){grid-column:1/-1}
}

/* ---------- phone ---------- */
@media (max-width:700px){
  :root{--hh:108px;--gut:20px}
  .header{grid-template-columns:1fr auto;grid-template-rows:62px 46px;gap:0 16px;align-items:center;padding-top:0}
  .logo{width:138px}
  .header-actions{gap:14px}
  .concierge-trigger-desktop{display:none}
  .concierge-trigger-mobile{display:inline-flex;font-size:9.5px;letter-spacing:.12em}
  .concierge-trigger-mobile span{display:none}
  .languages{gap:9px}
  .languages a{font-size:10.5px}
  .nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:8px;border-top:1px solid var(--line);height:46px}
  .nav button,.nav a{font-size:10px;letter-spacing:.12em}
  .hero-media{left:0;width:100%;bottom:auto;height:36svh}
  .hero-media:after{background:linear-gradient(0deg,rgba(28,26,23,.2),rgba(28,26,23,0) 40%)}
  .hero{top:calc(var(--hh) + 36svh + 28px);width:auto;right:var(--gut)}
  .hero :is(h1,h2){font-size:clamp(40px,11.5vw,56px)}
  .hero p{margin-top:18px;font-size:10.5px}
  .place{bottom:24px;width:auto;right:var(--gut);font-size:19px;padding-top:14px}
  .place-season{margin-top:8px;font-size:10.5px}
  .close{top:12px;right:10px}
  .about-editorial .lead,.about-editorial .story,.experience-opening,.experience-narrative,.experience-service{grid-template-columns:1fr}
  .about-editorial .portrait{max-width:420px}
  .experience-narrative{gap:18px}
  .collab-cards{grid-template-columns:1fr}
  .collab-cards article{min-height:72svh}
  .collab-intro-grid,.collab-contact-grid,.collab-benefits{grid-template-columns:1fr}
  .collab-benefits article,.collab-benefits article+article{padding:22px 0;border-right:0;border-bottom:1px solid var(--line-dark)}
}
@media (max-width:700px) and (max-height:700px){ .hero-media{height:30svh} .hero{top:calc(var(--hh) + 30svh + 20px)} }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .tz-noren{display:none!important}
  .hero-media i{animation:none}.hero-media i:nth-child(1){opacity:1}
  .hero .ln>span,.hero p,.place,.hero-media,.tz-rv,img.tz-rv,video.tz-rv{transform:none!important;opacity:1!important;clip-path:none!important;transition:none!important}
  .frame:not([data-view=home]) .panel,.contact-cta-arrow,.concierge-dialog[open]{animation:none}
}

/* ---------- refinements after the first render check ---------- */
.panel .collab-partners>h2{margin:0 auto}
.frame[data-view=collaboration] .close{background:rgba(28,26,23,.55);color:var(--washi)}
.nav :focus-visible,.languages :focus-visible,.header :focus-visible{outline:1px solid currentColor;outline-offset:6px}
.concierge-close:focus-visible{outline:1px solid rgba(244,242,236,.6);outline-offset:2px}
@media (max-width:700px){
  .collab-cards article>b{right:auto;left:20px}
  .about-editorial .portrait{aspect-ratio:4/5}
}

/* ---------- round 2: feedback 11/11 ---------- */
/* close button stays visible below the header while scrolling */
.close{position:fixed;top:calc(var(--hh) + 18px);right:var(--gut)}
.frame[data-view=collaboration] .close{top:calc(var(--hh) + 14px)}

/* About: the portrait is exactly as tall as the text beside it (site.js measures it), as on the current site */
@media (min-width:701px){
  .about-editorial .lead{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start}
  .about-editorial .lead>div{padding-top:0}
  .about-editorial .portrait{aspect-ratio:auto;height:var(--portrait-height,560px);min-height:420px;max-height:760px;object-position:center 22%}
  .about-editorial .story{margin-top:clamp(56px,6vw,96px)}
}

/* Collection: tighter bands, compact partner list instead of a four-column table */
.collab-intro,.collab-partners,.collab-tasting,.collab-contact{padding:clamp(48px,5.5vw,84px) var(--gut)}
.collab-cards article{min-height:min(70vh,640px)}
.frame[data-view=collaboration] .panel :is(h1,h2){font-size:clamp(30px,3.2vw,46px);line-height:1.08}
.collab-partners{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(32px,5vw,80px);align-items:start;
  max-width:none;padding-left:max(var(--gut),calc((100vw - 1180px)/2));padding-right:max(var(--gut),calc((100vw - 1180px)/2))}
.collab-partners>*{max-width:none;margin:0}
.panel .collab-partners>h2{margin:0}
.collab-benefits{grid-template-columns:1fr 1fr;gap:0 40px;margin-top:0;border-top:0}
.collab-benefits article,.collab-benefits article+article{padding:18px 0 16px;border-right:0;border-top:1px solid var(--line-dark)}
.collab-benefits b{display:inline-block;width:34px;font-size:12px;vertical-align:top;padding-top:4px}
.collab-benefits h3{display:inline-block;margin:0 0 6px;font-size:18px;line-height:1.3}
.panel .collab-benefits p{margin:0;padding-left:34px;font-size:14px;line-height:1.55}
.collab-tasting>div{max-width:760px;margin-left:max(0px,calc((100% - 1180px)/2))}
.panel .collab-tasting p{margin-bottom:14px}
.collab-contact-grid{gap:clamp(28px,4vw,64px)}
@media (max-width:1000px){.collab-partners{grid-template-columns:1fr}}
@media (max-width:700px){
  .collab-benefits{grid-template-columns:1fr}
  .collab-benefits article,.collab-benefits article+article{padding:16px 0;border-bottom:0}
  .close{top:calc(var(--hh) + 10px);right:10px}
}

/* ---------- round 3: feedback 11/11 ---------- */
/* Contact: copy on the left, the logo large on the right */
.contact-intro{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,128px);align-items:center}
.contact-intro:after{content:"";display:block;width:100%;aspect-ratio:1081/281;background:url("tatsuya-logo-ink.svg") center/contain no-repeat}
@media (max-width:700px){.contact-intro{grid-template-columns:1fr}.contact-intro:after{width:72%;margin-top:8px}}

/* Concierge Access: one dark, quiet room — noren mark on the left, a single field on the right */
.concierge-dialog{width:min(920px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:0;border:0;overflow:hidden;
  background:var(--sumi);color:var(--washi);box-shadow:0 40px 120px rgba(28,26,23,.45)}
.concierge-dialog[open]{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);animation:tz-room .7s var(--ease)}
.concierge-dialog[open]:before{content:"";min-height:440px;background:url("tatsuya-noren-washi.svg") center/34% no-repeat,var(--kon)}
.concierge-dialog::backdrop{background:rgba(28,26,23,.32);-webkit-backdrop-filter:blur(14px) saturate(.9);backdrop-filter:blur(14px) saturate(.9);animation:tz-fade .5s ease}
@keyframes tz-room{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes tz-fade{from{opacity:0}to{opacity:1}}
.concierge-dialog-copy{padding:clamp(44px,5.5vw,76px) clamp(32px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.concierge-dialog h2{margin:0 0 18px;font:500 clamp(40px,4.4vw,60px)/.98 var(--display);letter-spacing:-.02em;color:var(--washi)}
.concierge-dialog h2 em{font-style:normal;color:var(--hinoki-pale)}
.concierge-dialog p{max-width:34ch;margin:0;font:400 15.5px/1.6 var(--sans);color:var(--kasumi)}
.concierge-dialog form{margin-top:40px}
.concierge-dialog label{display:block;margin-bottom:12px;font:500 10.5px/1 var(--sans);letter-spacing:.22em;color:var(--hinoki-pale)}
.concierge-dialog form>div{display:grid;grid-template-columns:1fr auto;border:0}
.concierge-dialog input{min-width:0;padding:17px 18px;border:1px solid rgba(244,242,236,.2);border-right:0;outline:0;background:rgba(244,242,236,.05);
  color:var(--washi);font:500 20px/1 var(--display);letter-spacing:.14em;transition:border-color .3s ease,background .3s ease}
.concierge-dialog input:focus{border-color:rgba(244,242,236,.6);background:rgba(244,242,236,.08)}
.concierge-dialog form button{padding:0 26px;border:0;background:var(--washi);color:var(--sumi);font:500 11px/1 var(--sans);letter-spacing:.2em;cursor:pointer;transition:background .3s ease}
.concierge-dialog form button span{display:inline-block;margin-left:6px;transition:transform .4s var(--ease)}
.concierge-dialog form button:hover{background:var(--hinoki-pale)}
.concierge-dialog form button:hover span{transform:translateX(4px)}
.concierge-close{position:absolute;z-index:2;right:14px;top:10px;width:44px;height:44px;border:0;background:none;color:var(--washi);font:300 28px/1 var(--sans);cursor:pointer;transition:transform .5s var(--ease)}
.concierge-close:hover{transform:rotate(90deg)}
.concierge-request{display:none}
@media (max-width:700px){
  .concierge-dialog[open]{grid-template-columns:1fr}
  .concierge-dialog[open]:before{min-height:120px;background-size:auto 56%,auto}
  .concierge-dialog-copy{padding:36px 24px 32px}
  .concierge-dialog form button{padding:0 18px}
}

/* ---------- intro: version A "noren up" (chosen 11/11) ----------
   Three dark panels hang like the mark: centre panel longest. The logo shows,
   then the side panels rise, the centre one last. The light page sits below. */
.tz-noren span{bottom:auto;height:93%;transition:transform 1.15s var(--ease-io)}
.tz-noren span:nth-child(2){height:100%}
.tz-noren.part span:nth-child(1),.tz-noren.part span:nth-child(3){transform:translate3d(0,0,0)}
.tz-noren.lift span:nth-child(1){transform:translate3d(0,-102%,0);transition-delay:0s}
.tz-noren.lift span:nth-child(3){transform:translate3d(0,-102%,0);transition-delay:.07s}
.tz-noren.lift span:nth-child(2){transform:translate3d(0,-102%,0);transition-delay:.18s;transition-duration:1.3s}
.tz-noren img{width:min(46vw,620px)}
@media (max-width:700px){
  .tz-noren span{height:95%}
  .tz-noren span:nth-child(2){height:100%}
  .tz-noren img{width:74vw}
}

/* intro covers the whole window: no strip on the right (scrollbar space) */
html{scrollbar-gutter:auto}
.tz-noren{position:fixed}
html.tz-intro,html.tz-intro body{overflow:hidden}

/* Collection intro: heading and text start on the same line, less empty space */
.collab-intro{padding-top:clamp(40px,4.5vw,68px);padding-bottom:clamp(40px,4.5vw,68px)}
.collab-intro-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,80px)}
.panel .collab-intro p:last-child{margin-bottom:0}

/* ---------- round 4: feedback 11/11 ---------- */
/* Tasting invitation: heading left, copy and link right — no empty half */
.collab-tasting{padding-top:clamp(40px,4.5vw,68px);padding-bottom:clamp(40px,4.5vw,68px)}
.collab-tasting>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:start;max-width:1180px;margin:0 auto}
.collab-tasting>div>h2{grid-column:1;grid-row:1 / span 3;margin:0}
.collab-tasting>div>p,.collab-tasting>div>a{grid-column:2;justify-self:start}
.collab-tasting>div>a{margin-top:6px}
@media (max-width:700px){.collab-tasting>div{grid-template-columns:1fr}.collab-tasting>div>h2{grid-row:auto;margin-bottom:20px}.collab-tasting>div>p,.collab-tasting>div>a{grid-column:1}}

/* Concierge: one colour — sumi throughout (kon can return as a summer/winter accent later); dialog sized to its content */
.concierge-dialog{height:fit-content;max-height:min(640px,calc(100svh - 32px));margin:auto}
.concierge-dialog[open]:before{min-height:420px;background:url("tatsuya-noren-washi.svg") center/30% no-repeat,#141310;border-right:1px solid rgba(244,242,236,.08)}
@media (max-width:700px){.concierge-dialog[open]:before{min-height:120px;border-right:0;border-bottom:1px solid rgba(244,242,236,.08)}}

/* Concierge: a single sumi ground, the noren simply sits on it */
.concierge-dialog[open]:before{background:url("tatsuya-noren-washi.svg") center/30% no-repeat,var(--sumi);border:0}

/* Concierge heading: Shippori Mincho B1 800 (ink-trap mincho) */
.concierge-dialog h2{font-family:"Shippori Mincho B1",var(--display);font-weight:800;font-size:clamp(38px,4.6vw,58px);line-height:1.02;letter-spacing:-.005em}
.concierge-dialog .tz-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.concierge-dialog form{margin-top:36px}

/* Contact: "Check availability" as a solid sumi block, arrow inside nudging down */
.panel p.contact-cta{display:inline-flex;align-items:center;gap:16px;margin:0;padding:18px 24px 18px 26px;border:0;
  background:var(--sumi);color:var(--washi);font:500 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.panel p.contact-cta .contact-cta-arrow{width:13px;height:18px;stroke-width:1.6;animation:tz-nudge 2s ease-in-out infinite}
@keyframes tz-nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.panel p.contact-cta .contact-cta-arrow{animation:none}}

/* Concierge: the private tasting invitation now lives in the dialog, quietly under the code field */
.concierge-dialog{max-height:calc(100svh - 32px);overflow:auto}
.concierge-dialog-copy{padding-top:clamp(40px,4.5vw,64px);padding-bottom:clamp(36px,4vw,56px)}
.concierge-tasting{margin-top:36px;padding-top:24px;border-top:1px solid rgba(244,242,236,.12)}
.concierge-tasting h3{margin:0 0 10px;font:500 19px/1.25 var(--display);color:var(--washi)}
.concierge-tasting h3 br{display:none}
.concierge-tasting h3 em{font-style:normal;color:var(--hinoki-pale)}
.concierge-dialog .concierge-tasting p{max-width:44ch;margin:0 0 8px;font:400 13.5px/1.6 var(--sans);color:var(--kasumi)}
.concierge-tasting a{display:inline-flex;margin-top:10px;padding-bottom:6px;border-bottom:1px solid rgba(244,242,236,.4);color:var(--washi);
  font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-decoration:none;transition:border-color .3s ease,letter-spacing .5s var(--ease)}
.concierge-tasting a:hover{border-color:var(--washi);letter-spacing:.24em}
.concierge-tasting h3 em:before{content:" "}
@media (max-width:700px){.concierge-dialog[open]:before{min-height:110px}}
@media (max-width:700px){.concierge-dialog[open]:before{min-height:110px;background-size:auto 54%,auto;background-position:center}}

/* ---------- Concierge, final layout ----------
   Compact two-column room; the tasting note runs the full width underneath.
   Explicit centring (no fit-content) so Safari keeps the window as small as its content. */
.concierge-dialog{position:fixed;inset:auto;top:50%;left:50%;translate:-50% -50%;margin:0;height:auto;max-height:calc(100svh - 32px);
  width:min(920px,calc(100vw - 32px));overflow:auto}
.concierge-dialog[open]{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto}
.concierge-dialog[open]:before{grid-column:1;grid-row:1;min-height:0}
.concierge-dialog-copy{grid-column:2;grid-row:1;padding:clamp(40px,4.5vw,60px) clamp(28px,4.5vw,64px) clamp(28px,3vw,40px)}
.concierge-dialog .concierge-tasting{grid-column:1 / -1;grid-row:2;margin:0;padding:22px clamp(28px,4.5vw,64px) 26px;border-top:1px solid rgba(244,242,236,.1);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(28px,4.5vw,64px);align-items:start}
.concierge-dialog .concierge-tasting h3{grid-column:1;grid-row:1 / span 2;margin:0;font-size:17px;line-height:1.35}
.concierge-dialog .concierge-tasting h3 br{display:inline}
.concierge-dialog .concierge-tasting h3 em:before{content:""}
.concierge-dialog .concierge-tasting p{grid-column:2;max-width:none;margin:0 0 6px;font-size:13px;line-height:1.55}
@media (max-width:700px){
  .concierge-dialog[open]{grid-template-columns:1fr}
  .concierge-dialog-copy{grid-column:1;grid-row:2;padding:28px 24px 24px}
  .concierge-dialog[open]:before{grid-row:1;min-height:100px}
  .concierge-dialog .concierge-tasting{grid-row:3;grid-template-columns:1fr;padding:18px 24px 22px}
  .concierge-dialog .concierge-tasting h3{grid-row:auto;margin-bottom:8px}
  .concierge-dialog .concierge-tasting p{grid-column:1}
}

/* Concierge: tasting note joins the dialog grid — title centred under the noren,
   copy in the right column in the same type as the line under the heading; no divider */
.concierge-dialog[open]{grid-template-rows:auto auto auto}
.concierge-dialog .concierge-tasting{display:contents}
.concierge-dialog .concierge-tasting h3{grid-column:1;grid-row:2 / span 2;align-self:start;justify-self:center;text-align:center;
  margin:0;padding:0 24px;font:500 19px/1.35 var(--display);color:var(--washi)}
.concierge-dialog .concierge-tasting h3 br{display:inline}
.concierge-dialog .concierge-tasting p{grid-column:2;max-width:none;margin:0;padding:0 clamp(28px,4.5vw,64px);
  font:400 15.5px/1.6 var(--sans);color:var(--kasumi)}
.concierge-dialog .concierge-tasting p:nth-of-type(1){grid-row:2}
.concierge-dialog .concierge-tasting p:nth-of-type(2){grid-row:3;padding-top:10px;padding-bottom:clamp(36px,4vw,52px)}
.concierge-dialog .concierge-tasting h3{padding-bottom:clamp(36px,4vw,52px)}
.concierge-dialog-copy{padding-bottom:28px}
@media (max-width:700px){
  .concierge-dialog .concierge-tasting h3{grid-column:1;grid-row:3;justify-self:start;text-align:left;padding:4px 24px 10px}
  .concierge-dialog .concierge-tasting p{grid-column:1;padding:0 24px}
  .concierge-dialog .concierge-tasting p:nth-of-type(1){grid-row:4}
  .concierge-dialog .concierge-tasting p:nth-of-type(2){grid-row:5;padding-bottom:28px}
}

/* Home: "Private sushi chef" as the headline (H1, keyword for search), the promise below it */
.hero :is(h1,h2){font-size:clamp(52px,6.8vw,108px);line-height:.96}
.hero p.hero-sub{margin-top:26px;font:500 clamp(19px,1.75vw,26px)/1.35 var(--display);letter-spacing:0;color:var(--ink-soft);text-transform:none}
@media (max-width:700px){.hero :is(h1,h2){font-size:clamp(44px,13vw,60px)}.hero p.hero-sub{margin-top:16px;font-size:18px}}

/* Header v3: no hairline, larger logo that hangs below the bar like a noren, larger menu */
.header{border-bottom:0;overflow:visible;align-items:start}
.header>.nav,.header>.header-actions{align-self:center}
.logo{position:relative;align-self:start;width:clamp(230px,19vw,300px);margin-top:22px;padding:0 14px 14px 0;margin-left:-0px;background:var(--washi)}
.logo img{display:block}
.nav button,.nav a,.languages a,.concierge-trigger{font-size:13px;letter-spacing:.17em}
.concierge-trigger svg{width:15px;height:15px}
.languages{gap:16px}
@media (max-width:1180px){.logo{width:clamp(200px,18vw,240px)}.nav{gap:clamp(16px,2.2vw,32px)}.nav button,.nav a,.concierge-trigger{font-size:12px;letter-spacing:.14em}}
@media (max-width:700px){
  .header{align-items:center}
  .logo{align-self:center;width:168px;margin-top:4px;padding:0;background:none}
  .nav{border-top:0}
  .nav button,.nav a{font-size:11px;letter-spacing:.12em}
  .languages a{font-size:11.5px}
}
/* hanging logo: large at the top of the page, settles inside the bar once the page scrolls */
.logo{width:clamp(240px,21vw,320px);margin-top:20px;padding:0;background:none;transition:width .5s var(--ease),margin-top .5s var(--ease)}
.tz-scrolled .logo{width:clamp(170px,13vw,200px);margin-top:calc((var(--hh) - clamp(170px,13vw,200px) * .26) / 2)}
@media (max-width:1180px){.logo{width:clamp(210px,19vw,250px)}}
@media (max-width:700px){.logo,.tz-scrolled .logo{width:168px;margin-top:4px}}

/* Collection: the partners band on sumi like the rest of the dark surfaces (kon stays reserved as a later seasonal accent);
   secondary text and hairlines on dark grounds are warm neutrals, not blue-grey */
:root{--kasumi:#B5B0A5;--line-dark:#3A3732}
.collab-partners{background:var(--sumi)}

/* "You can also find us on": the three wordmarks share one baseline and a similar optical size */
.profile-platforms{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-items:center;column-gap:clamp(40px,6vw,88px);row-gap:24px}
.profile-platform-airbnb a{transform:translateY(1.5px)}
.profile-platform-chefmaison img{width:160px;transform:translateY(-12.5px) scale(.92)}
.profile-platform-takeachef img{transform:translateY(-2px)}
@media (max-width:700px){.profile-platforms{grid-template-columns:auto auto;column-gap:36px}.profile-platform-chefmaison{grid-column:1/-1;grid-row:1}}

/* Header v4: a taller bar that holds the large logo entirely (no overlap onto photos);
   on scroll the bar and the logo settle to a compact size */
@media (min-width:701px){
  :root{--hh:116px;--lw:clamp(240px,21vw,300px)}
  .header{height:var(--hh);transition:height .5s var(--ease)}
  .logo{width:var(--lw);margin-top:calc((var(--hh) - var(--lw) * .26) / 2)}
  .tz-scrolled .header{height:84px}
  .tz-scrolled .logo{--lw:clamp(170px,13vw,196px);margin-top:calc((84px - var(--lw) * .26) / 2)}
}
@media (min-width:701px) and (max-width:1180px){:root{--hh:104px;--lw:clamp(200px,19vw,240px)}}

/* ---------- noren in the wind: the mark as two layers (noren moves, lettering stays) ---------- */
.contact-intro.has-mark:after{display:none}
.contact-mark{position:relative;width:100%;aspect-ratio:1187.3/280.53}
.contact-mark .nw-letters{position:absolute;inset:0;width:100%;height:100%}
.contact-mark .nw-box{position:absolute;left:.3723%;top:5.0904%;width:21.7806%;height:89.83%}
.nw-box>img{position:absolute;inset:0;width:100%;height:100%}
.concierge-dialog.has-noren[open]:before{display:none}
.concierge-noren{grid-column:1;grid-row:1;position:relative;display:grid;place-items:center;overflow:hidden;background:var(--sumi)}
.concierge-noren .nw-box{position:relative;width:30%;aspect-ratio:146.02/142.39}
@media (max-width:700px){
  .contact-mark{width:72%;margin-top:8px}
  .concierge-noren{min-height:110px}
  .concierge-noren .nw-box{width:auto;height:60px}
}

/* ---------- home: winter season + the Tarentaise line (replaces “Val d’Isère & Courchevel 2026/27”) ---------- */
.hero{top:calc(var(--hh) + 6vh)}
.hero :is(h1,h2){font-size:clamp(48px,min(6.6vw,11vh),104px)}
.hero p.hero-sub{margin-top:22px;line-height:1.38}
.place.season{width:var(--mapw,min(30%,340px));bottom:clamp(28px,5vh,56px);padding:0;border:0;font:inherit}
.season-label,.season-valley{margin:0;font:800 clamp(24px,2.2vw,32px)/1 "Shippori Mincho B1",var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sumi)}
.season-label{margin-bottom:8px}
.season-valley{margin-top:10px;font-size:clamp(15px,1.35vw,20px);letter-spacing:.2em}
.tmap{position:relative;width:100%;container-type:inline-size}
.tmap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tmap-route{fill:none;stroke:var(--sumi);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.tmap-stops{list-style:none;margin:0;padding:0}
.tmap-stops li{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.tmap-stops li::before{content:"";position:absolute;left:-7px;top:-7px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;
  background:var(--washi);border:3px solid var(--sumi);transition:transform .35s var(--ease),background .35s}
.tmap-stops li span{position:absolute;white-space:nowrap;font:500 clamp(12.5px,4cqw,16px)/1 var(--display);color:var(--ink-soft);cursor:default;padding:5px 3px;margin:-5px -3px}
.tmap-stops li.primary span{font-size:clamp(15px,5cqw,21px);color:var(--sumi)}
.tmap-stops li.primary::before{left:-9px;top:-9px;width:18px;height:18px;background:var(--sumi);border-color:var(--sumi);box-shadow:0 0 0 3px var(--washi),0 0 0 4.5px var(--sumi)}
.tmap-stops [data-side=e]>span{left:15px;top:0;transform:translateY(-54%)}
.tmap-stops [data-side=w]>span{right:15px;top:0;transform:translateY(-54%)}
.tmap-stops [data-side=n]>span{bottom:14px;left:0;transform:translateX(-50%)}
.tmap-stops [data-side=s]>span{top:14px;left:0;transform:translateX(-50%)}
.tmap-stops [data-side=sw]>span{top:15px;right:-12px}
.tmap-stops li:not(.primary):hover::before{transform:scale(1.3);background:var(--sumi)}
.tmap-stops li:hover span{color:var(--sumi)}
/* the line is drawn in ink from Val d’Isère once the home view is ready; resorts appear as it reaches them */
.tmap.play .tmap-route{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:tz-draw 2.4s cubic-bezier(.5,.05,.3,1) .3s forwards}
.tmap.play li{opacity:0;animation:tz-stop .6s ease forwards;animation-delay:calc(.35s + var(--at) * 2.4s)}
@keyframes tz-draw{to{stroke-dashoffset:0}}
@keyframes tz-stop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tmap.play .tmap-route,.tmap.play li{animation:none;stroke-dashoffset:0;opacity:1}}
/* phone: the home view scrolls — headline, then the map below it */
@media (max-width:700px){
  .hero{position:relative;top:auto;left:auto;right:auto;margin:calc(var(--hh) + 36svh + 26px) var(--gut) 0;width:auto}
  .hero :is(h1,h2){font-size:clamp(40px,11.5vw,56px)}
  .hero p.hero-sub{font-size:17px;margin-top:14px}
  .place.season{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:34px var(--gut) 40px}
  .season-label{font-size:26px}.season-valley{font-size:16px}
  .frame:not([data-view=home]):not(.is-closing) :is(.hero,.place){display:none}
}
@media (max-width:700px) and (max-height:700px){.hero{margin-top:calc(var(--hh) + 30svh + 20px)}}
.season-label,.season-valley{white-space:nowrap}
.place.season{bottom:clamp(24px,4vh,56px)}
@media (max-width:700px){.place.season{bottom:auto;top:auto}}

/* map v2: centred in the free part of the left column; season + valley under it; labels kept clear of the line */
.place.season{text-align:center}
@media (min-width:701px){.place.season{left:calc((50% - var(--mapw,340px)) / 2)}}
.season-label{margin:22px 0 0;font-size:clamp(24px,2.1vw,30px)}
.season-valley{margin-top:8px;font-size:clamp(14px,1.2vw,18px);letter-spacing:.24em}
.tmap-stops li span{font-size:clamp(13.5px,4.3cqw,17px);color:var(--sumi);
  text-shadow:0 0 2px var(--washi),0 0 4px var(--washi),0 0 7px var(--washi),0 0 10px var(--washi)}
.tmap-stops li.primary span{font-size:clamp(16px,5.4cqw,22px)}
.tmap-stops [data-side=e]>span{left:17px}
.tmap-stops li.primary[data-side=e]>span{left:20px}
.tmap-stops [data-side=w]>span{right:16px}
.tmap-stops [data-side=s]>span{top:15px}
.tmap-stops li.primary[data-side=s]>span{top:18px}
.tmap-stops [data-side=nw]>span{bottom:9px;right:9px}
@media (max-width:700px){.season-label{font-size:24px;margin-top:18px}.season-valley{font-size:14px}}

/* home in flow (all widths): headline, then the map centred in the left column at a readable size;
   if the screen is short the home view scrolls a little instead of shrinking the map */
@media (min-width:701px){
  .hero{position:relative;top:auto;left:auto;margin:calc(var(--hh) + 6vh) 0 0 var(--gut);width:min(44%,640px)}
  .place.season{position:relative;left:auto;right:auto;bottom:auto!important;width:var(--mapw,380px);
    margin:var(--map-gap,40px) 0 clamp(36px,6vh,64px) calc((50% - var(--mapw,380px)) / 2)}
}
.frame:not([data-view=home]) :is(.hero,.place){display:none}
.frame[data-view=home] :is(.hero,.place){animation:tz-back .6s ease}
@keyframes tz-back{from{opacity:0}to{opacity:1}}
@media (max-width:700px){.place.season .tmap{width:84%;margin:0 auto 0 6%}}

/* home slideshow: two photographs only (the menu, the nigiri), crossfading */
.hero-media i{animation:tz-slide2 14s infinite}
.hero-media i:nth-child(1){animation-delay:0s}.hero-media i:nth-child(2){animation-delay:7s}
@keyframes tz-slide2{0%{opacity:0;transform:scale(1.06)}7%{opacity:1}50%{opacity:1}57%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero-media i{animation:none}.hero-media i:nth-child(1){opacity:1}}

/* opening curtain: all three panels hang to the very bottom; they still lift at different speeds */
.tz-noren span,.tz-noren span:nth-child(2){height:100%}
@media (max-width:700px){.tz-noren span,.tz-noren span:nth-child(2){height:100%}}

/* home: headline, promise and map share one centre line in the left column */
@media (min-width:701px){.hero{width:calc(50% - 2 * var(--gut));text-align:center}}
@media (max-width:700px){.hero{text-align:center}.place.season .tmap{margin:0 auto}}
/* platform wordmarks: airbnb and takeachef nudged down a touch */
.profile-platform-airbnb a{transform:translateY(4px)}
.profile-platform-takeachef img{transform:translateY(7.5px)}
/* Concierge: both headings entirely in gold */
.concierge-dialog h2,.concierge-dialog .concierge-tasting h3{color:var(--hinoki-pale)}

/* Concierge: noren and the tasting title as one group, centred in the left panel */
.concierge-noren{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 24px}
.concierge-noren .nw-box{width:30%;flex:none}
.concierge-dialog .concierge-noren h3{grid-row:auto;align-self:center;margin:30px 0 0;padding:0;text-align:center;
  font:500 19px/1.35 var(--display);color:var(--hinoki-pale)}
.concierge-dialog .concierge-noren h3 br{display:inline}
@media (max-width:700px){
  .concierge-noren{padding:22px 24px 18px}
  .concierge-noren .nw-box{width:auto;height:60px}
  .concierge-dialog .concierge-noren h3{margin-top:14px;font-size:17px;padding:0}
}
.concierge-dialog .concierge-noren h3 em{font-style:normal;color:inherit}
@media (min-width:701px){.concierge-noren{grid-row:1 / span 3}}

/* Concierge: closing is the opening in reverse */
.concierge-dialog.tz-closing{animation:tz-room-out .43s cubic-bezier(.4,0,.6,1) forwards}
.concierge-dialog.tz-closing::backdrop{animation:tz-fade-out .43s ease forwards}
@keyframes tz-room-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes tz-fade-out{from{opacity:1}to{opacity:0}}

/* Collection: the dark cards arrive gently instead of all at once */
.frame[data-view=collaboration] .collab-cards{animation:tz-fade 1.3s ease both .15s}
.frame[data-view=collaboration] .collab-cards article>img{animation:tz-settle 2.4s var(--ease) both .15s}
.frame[data-view=collaboration] .collab-cards article>div{animation:tz-rise 1.1s var(--ease) both}
.frame[data-view=collaboration] .collab-cards article:nth-child(1)>div{animation-delay:.55s}
.frame[data-view=collaboration] .collab-cards article:nth-child(2)>div{animation-delay:.7s}
.frame[data-view=collaboration] .collab-cards article:nth-child(3)>div{animation-delay:.85s}
@keyframes tz-settle{from{transform:scale(1.07)}to{transform:none}}
@keyframes tz-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.frame[data-view=collaboration] .collab-cards,.frame[data-view=collaboration] .collab-cards article>*{animation:none}}
/* Concierge: “Beyond the curtain.” in washi white (the tasting title stays gold) */
.concierge-dialog h2,.concierge-dialog h2 em{color:var(--washi)}

/* ---------- menu: noren — a small dark panel drops from the top edge behind the word;
   the page you are on keeps its noren lowered ---------- */
.nav button,.nav a{z-index:0}
.nav button:not(.concierge-trigger):after,.nav a:after{display:none}
.nav button::before,.nav a::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-130px;bottom:-11px;background:var(--sumi);
  border-radius:0 0 3px 3px;transform:scaleY(0);transform-origin:50% 0;transition:transform .55s var(--ease)}
.nav button:hover,.nav a:hover,.nav .active,.nav button:focus-visible,.nav a:focus-visible{color:var(--washi);opacity:1}
.nav button:hover::before,.nav a:hover::before,.nav .active::before,.nav button:focus-visible::before,.nav a:focus-visible::before{transform:scaleY(1)}
.nav :focus-visible{outline:none}
@media (min-width:701px){
  .nav button,.nav a{padding:14px 16px;margin:0 -16px}
  .nav{gap:clamp(18px,3.2vw,48px)}
}
@media (max-width:700px){
  .nav button,.nav a{padding:9px 8px;margin:0 -8px}
  .nav button::before,.nav a::before{top:-12px;bottom:-6px}
}
@media (prefers-reduced-motion:reduce){.nav button::before,.nav a::before{transition:none}}

/* menu: Concierge Access is not a page — it gets an ink brush stroke instead of the noren */
.nav .concierge-trigger::before{display:none}
.nav .concierge-trigger:hover,.nav .concierge-trigger:focus-visible{color:var(--sumi)}
.nav .concierge-trigger::after{content:"";display:block;position:absolute;left:12px;right:12px;bottom:4px;height:7px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'><path d='M1 6.2C12 4.2 30 3.6 52 4.1S95 5.6 119 3.4C116 6.6 98 7.4 70 7.2S20 7.6 2 8.4Z' fill='%231C1A17'/></svg>") center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);transition:clip-path .6s var(--ease)}
.nav .concierge-trigger:hover::after,.nav .concierge-trigger:focus-visible::after{clip-path:inset(0 0 0 0)}
@media (max-width:700px){.nav .concierge-trigger::after{left:6px;right:6px;bottom:2px}}

/* home map: a resort that has its own page is a link */
.tmap-stops li a{text-decoration:none;color:inherit}
.tmap-stops li a span{border-bottom:1px solid var(--hinoki);padding-bottom:1px}
.tmap-stops li a:hover span{border-bottom-color:var(--sumi)}

/* FR “À PROPOS” must not break onto two lines at tablet widths */
.nav a,.nav button{white-space:nowrap}
/* tablet: keep the whole header on one line in every language */
@media (min-width:701px) and (max-width:1100px){.nav{gap:clamp(12px,1.7vw,22px)}.nav button,.nav a,.concierge-trigger{font-size:11px;letter-spacing:.1em}.header-actions{gap:14px}.languages{gap:10px}}
@media (min-width:701px) and (max-width:880px){.logo,.tz-scrolled .logo{width:150px}.nav{gap:14px}.nav button,.nav a{font-size:10px;letter-spacing:.06em;padding:14px 8px;margin:0 -8px}.header-actions{gap:10px}.languages{gap:8px}}
/* phone fixes 11/11 (after going live) */
/* the panel entrance must not leave a transform behind: it would pin the × to the panel instead of the screen */
.frame:not([data-view=home]) .panel{animation-fill-mode:backwards}
@media (max-width:700px){
  .close{top:calc(var(--hh) + 12px);right:12px}
  .frame:not([data-view=collaboration]) .close{background:rgba(244,242,236,.92);border-radius:50%;box-shadow:0 1px 6px rgba(28,26,23,.12)}
  .hero-media i:nth-child(1){background-position:50% 68%}            /* the nigiri sit low in the photo */
  .about-editorial .lead .portrait{height:auto!important;max-height:none;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
}