:root {
  --ink: #181514;
  --paper: #fcfcfb;
  --mist: #f2f4f5;
  --glass: rgba(255,255,255,.62);
  --line: rgba(24,21,20,.18);
  --line-strong: rgba(24,21,20,.72);
  --max: 1240px;
  --side: clamp(22px, 5vw, 76px);
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;letter-spacing:.055em;line-height:1.9;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
.skip-link{position:fixed;left:16px;top:-100px;z-index:1000;padding:10px 16px;background:#fff;border:1px solid var(--ink)}
.skip-link:focus{top:16px}
.site-header{position:fixed;z-index:50;left:0;right:0;top:0;height:84px;padding:0 var(--side);display:flex;align-items:center;justify-content:space-between;background:rgba(252,252,251,.78);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s}
.site-header.scrolled{border-bottom-color:var(--line)}
.wordmark{display:flex;gap:.25em;font-size:13px;letter-spacing:.16em}
.menu-button{display:none;border:0;background:none;padding:16px 0;cursor:pointer;align-items:center;gap:8px;font-family:var(--mono);font-size:10px}
.menu-button i{width:20px;height:1px;background:var(--ink);display:block}
.global-nav{display:flex;align-items:center;gap:28px;font-size:12px;letter-spacing:.13em}
.global-nav a{position:relative}
.global-nav a:not(.nav-reserve)::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--ink);transition:.25s}
.global-nav a:hover::after{right:0}
.nav-reserve{border:1px solid var(--ink);padding:10px 16px;transition:.25s}
.nav-reserve:hover{background:var(--ink);color:#fff}
.hero{min-height:100svh;position:relative;overflow:hidden;padding:130px var(--side) 50px;display:grid;grid-template-columns:minmax(210px,.72fr) minmax(420px,1.7fr) minmax(160px,.65fr);grid-template-rows:auto 1fr auto;gap:20px;align-items:center}
.hero::before{content:"";position:absolute;inset:84px 7vw 8vh;border:1px solid var(--line);pointer-events:none}
.hero-glass{position:absolute;border:1px solid rgba(24,21,20,.14);background:linear-gradient(125deg,rgba(255,255,255,.72),rgba(234,240,243,.28));backdrop-filter:blur(11px);box-shadow:0 18px 55px rgba(41,48,51,.05)}
.hero-glass-a{width:33vw;height:66vh;left:17vw;top:16vh;transform:skewY(-2deg)}
.hero-glass-b{width:24vw;height:48vh;right:10vw;top:28vh;transform:skewY(3deg)}
.eyebrow{position:relative;z-index:2;align-self:start;font-family:var(--mono);font-size:10px;letter-spacing:.18em;margin:0}
.hero-title{position:relative;z-index:3;grid-column:3;grid-row:1 / span 2;justify-self:center;align-self:center;writing-mode:vertical-rl;text-orientation:mixed;font-size:clamp(24px,3vw,46px);font-weight:300;letter-spacing:.13em;line-height:1.5;margin:0}
.hero-title span:first-child{margin-bottom:.5em}
.hero-illustration-wrap{position:relative;z-index:4;grid-column:2;grid-row:1 / span 2;width:min(100%,760px);justify-self:center;align-self:center}
.hero-illustration{width:100%;filter:drop-shadow(0 12px 18px rgba(0,0,0,.03))}
.hero-copy{position:relative;z-index:3;grid-column:1;grid-row:2;align-self:end;margin:0 0 6vh;font-size:clamp(14px,1.35vw,19px);max-width:18em}
.scroll-cue{position:relative;z-index:5;grid-column:1;grid-row:3;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:9px;letter-spacing:.2em}
.scroll-cue i{display:block;width:64px;height:1px;background:var(--ink);transform-origin:left;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scaleX(.25);opacity:.45}50%{transform:scaleX(1);opacity:1}}
.section{max-width:var(--max);margin:0 auto;padding:clamp(110px,14vw,210px) var(--side);position:relative}
/* Shared section surface system
   paper: narrative / editorial sections
   mist: grouped choices, services and practical information
   white: conversion / reservation sections */
.surface-paper{background:var(--paper)}
.surface-mist{background:linear-gradient(180deg,#f4f6f7 0%,#fbfbfa 100%);border-top:1px solid rgba(24,21,20,.06);border-bottom:1px solid rgba(24,21,20,.06)}
.surface-white{background:#fff}

/* Surface rule: tinted sections are always full-bleed; their direct content stays on the shared content width. */
.section.surface-mist{max-width:none}
.section.surface-mist>*{max-width:calc(var(--max) - (var(--side) * 2));margin-left:auto;margin-right:auto}
.section-number,.section-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em}
.section-number{margin-bottom:6px}
.section-label{color:rgba(24,21,20,.58)}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin-bottom:80px}
.section-heading h2{font-size:clamp(28px,4vw,58px);font-weight:300;letter-spacing:.08em;line-height:1.5;margin:-12px 0 0}
.concept{min-height:780px;display:grid;grid-template-columns:110px 1fr 1.4fr;gap:clamp(30px,7vw,110px);align-items:start}
.concept .section-meta{grid-column:1}
.vertical-copy{grid-column:2;grid-row:1 / span 4;writing-mode:vertical-rl;justify-self:center;font-size:clamp(25px,3vw,45px);letter-spacing:.16em;line-height:1.9;padding-top:20px}
.concept-body{grid-column:3;grid-row:1 / span 4;max-width:520px;padding-top:88px}
.concept-body h2{font-size:clamp(27px,3vw,42px);font-weight:300;letter-spacing:.09em;line-height:1.6;margin:0 0 42px}
.concept-body p{margin:0 0 26px;font-size:14px}
.stay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.glass-card{min-height:360px;padding:42px;background:rgba(255,255,255,.68);backdrop-filter:blur(8px);position:relative;transition:.35s}
.glass-card:hover{background:rgba(255,255,255,.9);transform:translateY(-4px)}
.card-index{font-family:var(--mono);font-size:10px}
.glass-card h3{font-size:20px;font-weight:300;letter-spacing:.1em;margin:88px 0 24px}
.glass-card p{font-size:13px;margin:0}

.full-span-card{grid-column:1/-1}
.split-stack-grid{grid-template-columns:1fr 1fr}
.split-stack-grid>.split-stack-primary{grid-row:1 / span 2}
.price-display{font-family:var(--mono);font-size:clamp(25px,3vw,40px)!important;letter-spacing:.02em;line-height:1.35;margin:0 0 26px!important}
.price-display small{font-family:var(--sans);font-size:11px;letter-spacing:.08em}
.porter-section{max-width:var(--max);margin:0 auto;padding:clamp(80px,12vw,170px) var(--side);display:grid;grid-template-columns:.85fr 1.35fr;gap:clamp(40px,8vw,130px);align-items:center}
.porter-section img{width:100%;max-height:780px;object-fit:contain}
.porter-copy h2{font-size:clamp(30px,4vw,56px);font-weight:300;line-height:1.55;letter-spacing:.08em;margin:34px 0}
.porter-copy p:last-child{font-size:14px;max-width:31em}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.steps li{display:grid;grid-template-columns:100px 1fr 1fr;gap:24px;align-items:center;min-height:126px;border-bottom:1px solid var(--line);padding:20px 4px}
.steps span{font-family:var(--mono);font-size:10px}
.steps h3{font-size:19px;font-weight:300;letter-spacing:.1em;margin:0}
.steps p{font-size:13px;margin:0}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:110px}
.info-grid article{background:var(--paper);padding:48px;min-height:310px}
.info-grid h3{font-size:15px;font-weight:400;letter-spacing:.14em;margin:0 0 55px}
.info-grid p{font-size:13px}

.info-lead{font-size:18px!important;line-height:1.8;letter-spacing:.08em;margin-bottom:25px!important}
.terms-line{margin:54px 0 0;font-size:12px}
.inline-link{margin-top:0}
.large-placeholder{font-family:var(--mono);font-size:clamp(28px,4vw,50px)!important;letter-spacing:.03em}
.large-placeholder small{font-family:var(--sans);font-size:12px}
.text-link{display:inline-block;margin-top:18px;padding-bottom:4px;border-bottom:1px solid var(--ink);font-size:12px}
.access-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(42px,8vw,120px);align-items:stretch}
.access-text h3{font-size:21px;font-weight:300;letter-spacing:.11em;margin:0 0 28px}
.access-text address{font-style:normal;font-size:13px;margin-bottom:36px}
.access-text dl{font-size:12px;margin:0 0 40px}
.access-text dl div{display:grid;grid-template-columns:110px 1fr;border-top:1px solid var(--line);padding:11px 0}
.access-text dl div:last-child{border-bottom:1px solid var(--line)}
.access-text dt,.access-text dd{margin:0}
.button-row{display:flex;gap:12px;flex-wrap:wrap}
.button{border:1px solid var(--ink);min-width:150px;padding:11px 16px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.12em;transition:.2s}
.button:hover{background:var(--ink);color:#fff}
.map-panel{min-height:460px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(222,230,233,.52));backdrop-filter:blur(12px)}
.map-panel::before,.map-panel::after{content:"";position:absolute;background:rgba(24,21,20,.13)}
.map-panel::before{height:1px;width:120%;transform:rotate(-27deg)}
.map-panel::after{width:1px;height:120%;transform:rotate(31deg)}
.map-panel strong{font-family:var(--mono);font-weight:300;font-size:28px;line-height:1.25;letter-spacing:.08em;text-align:center;z-index:2}
.map-panel small{position:absolute;right:22px;bottom:18px;font-family:var(--mono);font-size:9px;letter-spacing:.12em}
.map-dot{position:absolute;width:18px;height:18px;border:1px solid var(--ink);border-radius:50%;z-index:3}
.map-dot::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;background:var(--ink);border-radius:50%;transform:translate(-50%,-50%)}
.reservation{min-height:580px;padding:120px var(--side);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.reservation::before{content:"";position:absolute;width:54vw;height:360px;border:1px solid var(--line);background:rgba(242,246,248,.46);backdrop-filter:blur(12px);transform:rotate(-3deg)}
.reservation>*{position:relative;z-index:1}
.reservation p{font-family:var(--mono);font-size:10px;letter-spacing:.2em}
.reservation h2{font-size:clamp(27px,4vw,54px);font-weight:300;letter-spacing:.1em;margin:34px 0 56px}
.reservation a{font-size:14px;letter-spacing:.12em;padding:14px 2px;border-bottom:1px solid var(--ink)}
.reservation a span{margin-left:30px}

.reservation-note{font-family:var(--sans)!important;font-size:13px!important;letter-spacing:.06em!important;margin:-30px 0 28px!important}
.reservation-contact-note{font-family:var(--sans)!important;font-size:11px!important;letter-spacing:.04em!important;line-height:1.9;margin:34px 0 0!important}
.reservation-contact-note a{font-size:inherit!important;letter-spacing:inherit!important;padding:0!important;border-bottom:1px solid var(--ink)}
.site-footer{padding:70px var(--side) 34px;display:grid;grid-template-columns:1fr auto;gap:60px;border-top:0}
.footer-mark{font-size:16px;letter-spacing:.13em;line-height:1.7}
.footer-links{display:flex;gap:30px;font-family:var(--mono);font-size:10px}
.site-footer>p{grid-column:1/-1;font-family:var(--mono);font-size:9px;margin:30px 0 0;color:rgba(24,21,20,.55)}
@media (max-width: 900px){
  .site-header{height:70px}
  .menu-button{display:flex}
  .global-nav{position:fixed;inset:70px 0 auto 0;display:flex;flex-direction:column;align-items:stretch;gap:0;background:rgba(252,252,251,.98);padding:32px var(--side) 40px;border-bottom:1px solid var(--line);transform:translateY(-130%);opacity:0;pointer-events:none;transition:.35s}
  .global-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .global-nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-reserve{border:0;padding:14px 0}
  .hero{padding-top:100px;grid-template-columns:1fr 90px;grid-template-rows:auto 1fr auto auto;min-height:900px}
  .hero::before{inset:70px 16px 18px}
  .eyebrow{grid-column:1;grid-row:1}
  .hero-title{grid-column:2;grid-row:1/span 3;font-size:25px}
  .hero-illustration-wrap{grid-column:1;grid-row:2;align-self:center}
  .hero-copy{grid-column:1;grid-row:3;margin:0;align-self:start}
  .scroll-cue{grid-column:1;grid-row:4;margin-top:20px}
  .hero-glass-a{width:62vw;left:9vw}.hero-glass-b{width:38vw;right:7vw}
  .concept{grid-template-columns:55px 1fr;min-height:auto}
  .concept .section-meta{grid-column:1}
  .vertical-copy{grid-column:2;grid-row:1/span 3;justify-self:start}
  .concept-body{grid-column:1/-1;grid-row:auto;padding-top:50px}
  .stay-grid{grid-template-columns:1fr}
  .glass-card{min-height:250px}.glass-card h3{margin-top:50px}
  .porter-section{grid-template-columns:1fr}.porter-section img{max-height:620px}
  .access-grid{grid-template-columns:1fr}.map-panel{min-height:380px}
}
@media (max-width: 640px){
  body{letter-spacing:.035em}
  .wordmark{font-size:11px;flex-direction:column;gap:0;line-height:1.35}
  .hero{min-height:780px;grid-template-columns:1fr 62px;padding-left:22px;padding-right:22px}
  .hero-title{font-size:20px;line-height:1.35}
  .hero-copy{font-size:13px}
  .section-heading{display:block;margin-bottom:54px}.section-heading h2{margin:28px 0 0}
  .steps li{grid-template-columns:46px 1fr;gap:14px;padding:25px 0}.steps p{grid-column:2}
  .info-grid{grid-template-columns:1fr}.info-grid article{padding:34px 24px}
  .access-text dl div{grid-template-columns:88px 1fr}
  .button{flex:1;min-width:130px}
  .reservation{min-height:480px;padding-left:24px;padding-right:24px}
  .site-footer{grid-template-columns:1fr}.footer-links{flex-direction:column;gap:12px}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

@media(max-width:900px){.split-stack-grid{grid-template-columns:1fr}.split-stack-grid>.split-stack-primary{grid-row:auto}}