/* Modern desktop masthead, compact floating navigation, and gentle editorial motion. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:110px}
.property-bar{height:34px;position:relative;z-index:32}
.header{position:fixed;inset:34px 0 auto;height:110px;padding:0 5%;background:transparent;color:white;border-bottom:1px solid #ffffff26;transition:height .5s var(--ease-out),background .45s,color .45s,top .45s,box-shadow .45s;isolation:isolate}
.header .brand{gap:15px}.header .brand-jp{font-size:27px;letter-spacing:.22em}.header .brand small{font-size:8px;letter-spacing:.3em;margin-top:6px;opacity:.75}
.header .crest{width:42px;height:42px;border-color:currentColor!important;color:inherit!important;opacity:.85}
.header nav{gap:35px;height:100%}
.header nav>a:not(.nav-book){position:relative;padding:14px 0;font-size:12px;letter-spacing:.1em;text-align:center}
.header nav>a[data-caption]::after{content:attr(data-caption);display:block;font-size:7px;letter-spacing:.16em;margin-top:7px;opacity:.6}
.header nav>a[data-caption]::before{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.header nav>a:hover::before,.header nav>a[aria-current]::before{transform:scaleX(1)}
.header .nav-book{background:#f6f3eb;color:var(--ink);margin-left:8px;padding:18px 23px;min-width:190px;border-radius:2px;font-size:11px;letter-spacing:.09em}
.header.is-scrolled{top:0;height:82px;background:color-mix(in srgb,var(--paper) 94%,transparent);color:var(--ink);border-color:var(--line);box-shadow:0 5px 25px #17231c08;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.header.is-scrolled .nav-book{background:var(--ink);color:var(--paper)}
.capsule-book,.menu-properties{display:none}
.hero{margin:0;height:calc(100svh - 34px);max-height:960px;min-height:650px;overflow:hidden}
.hero-img{height:calc(100% + 70px);position:absolute;top:-35px;transform:translateY(var(--hero-y,0px)) scale(1.035);will-change:transform}
.hero-copy{top:29%;left:9%}.hero-bottom{left:5%;right:5%;bottom:35px}.hero-side{right:30px}
body[data-hotel=takano] .hero-copy{top:28%;right:10%}
.hero-shade{background:linear-gradient(180deg,#0b160b65,transparent 25%),linear-gradient(90deg,#0c160f88,transparent 78%),linear-gradient(0deg,#09100b80,transparent 35%)}
body[data-hotel=takano] .hero-shade{background:linear-gradient(180deg,#0b100c75,transparent 25%),linear-gradient(270deg,#13190c88,transparent 85%),linear-gradient(0deg,#0005,transparent 45%)}
.motion-enabled .hero-img{animation:hero-arrive 2.4s var(--ease-out) both}
.motion-enabled .hero-copy>*{animation:copy-arrive 1.4s var(--ease-out) both}
.motion-enabled .hero-copy>.eyebrow{animation-delay:.15s}.motion-enabled .hero-copy>h1{animation-delay:.3s}.motion-enabled .hero-copy>.hero-sub{animation-delay:.55s}
.motion-enabled .hero-bottom{animation:copy-arrive 1.2s .8s var(--ease-out) both}
.hero-bottom b{display:inline-block;animation:scroll-cue 2.6s ease-in-out 3}
.reveal{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease-out),transform 1.15s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.intro-text.reveal,.feature-copy.reveal,.stay-links>a:nth-child(2).reveal{transition-delay:.12s}
.feature-image{overflow:hidden}.feature-image img{transition:transform 1.4s var(--ease-out)}
.button,.nav-book,.capsule-book{position:relative;overflow:hidden;transition:background .3s,color .3s,box-shadow .4s,transform .4s var(--ease-out)}
.button::after,.nav-book::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#ffffff1f 50%,transparent 75%);transform:translateX(-120%);transition:transform .8s var(--ease-out);pointer-events:none}
.button>span,.nav-book>span,.text-link>span,.stay-links>a>span:last-child,.sister>span:last-child{transition:transform .45s var(--ease-out)}
.text-link{position:relative}.text-link::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
@media(hover:hover){.feature-image:hover img{transform:scale(1.045)}.button:hover,.nav-book:hover,.capsule-book:hover{opacity:1;transform:translateY(-2px);box-shadow:0 8px 24px #0002}.button:hover::after,.nav-book:hover::after{transform:translateX(120%)}.button:hover>span,.nav-book:hover>span,.text-link:hover>span{transform:translate(3px,-3px)}.text-link:hover::after{transform:scaleX(1)}.stay-links>a:hover>span:last-child,.sister:hover>span:last-child{transform:translateX(6px)}}
@keyframes hero-arrive{from{opacity:.45;scale:1.055}to{opacity:1;scale:1}}
@keyframes copy-arrive{from{opacity:0;transform:translateY(25px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes scroll-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(max-width:1024px){
  html{scroll-padding-top:112px}
  .property-bar{display:none}
  .header,.header.is-scrolled{inset:max(18px,env(safe-area-inset-top)) 22px auto;margin:auto;width:calc(100% - 44px);max-width:660px;height:auto;min-height:76px;padding:0 17px 0 24px;display:grid;grid-template-columns:1fr auto 44px;column-gap:14px;align-items:center;background:color-mix(in srgb,var(--ink) 91%,transparent);color:var(--paper);border:1px solid #ffffff24;border-radius:40px;box-shadow:0 12px 42px #0003,inset 0 1px 0 #ffffff15;backdrop-filter:blur(24px) saturate(1.25);-webkit-backdrop-filter:blur(24px) saturate(1.25);transition:border-radius .5s var(--ease-out),background .4s,box-shadow .5s,top .5s;overflow:hidden}
  .header.is-scrolled{background:color-mix(in srgb,var(--ink) 96%,transparent);box-shadow:0 8px 30px #0003}
  .header>.brand{min-height:74px;gap:12px;min-width:0}.header .brand-jp{font-size:21px;letter-spacing:.1em;white-space:nowrap}.header .brand small{font-size:6px;letter-spacing:.22em;margin-top:5px}.header .crest{width:32px;height:32px;font-size:18px;flex-shrink:0}
  .capsule-book{display:flex;gap:15px;align-items:center;background:#f5f1e4;color:var(--ink);border-radius:24px;padding:13px 18px;font-size:11px;white-space:nowrap}
  .menu-button{display:flex;grid-column:3;grid-row:1;width:44px;height:44px;color:var(--paper);border:0;border-radius:50%;background:#ffffff08;flex-direction:column;justify-content:center;gap:6px;padding:13px;cursor:pointer}
  .menu-button span{height:1px;width:100%;background:currentColor;transition:transform .45s var(--ease-out)}
  .menu-open .menu-button span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-open .menu-button span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .header.menu-open{border-radius:30px}
  .header nav,.header.menu-open nav{display:flex;grid-column:1/-1;grid-row:2;position:static;flex-direction:column;align-items:stretch;gap:0;height:auto;max-height:0;min-height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-8px);padding:0 8px;background:none;box-shadow:none;transition:max-height .55s var(--ease-out),opacity .35s,transform .5s var(--ease-out),visibility .55s}
  .header.menu-open nav{max-height:min(640px,calc(100svh - 130px));overflow-y:auto;overscroll-behavior:contain;opacity:1;visibility:visible;transform:translateY(0);padding-bottom:20px}
  .header nav>a:not(.nav-book){display:flex;justify-content:space-between;align-items:center;text-align:left;padding:20px 3px;border-bottom:1px solid #ffffff20;font-family:var(--serif);font-size:18px;letter-spacing:.1em}
  .header nav>a[data-caption]::after{margin:0;font-family:var(--sans);font-size:9px;letter-spacing:.18em}.header nav>a[data-caption]::before{display:none}
  .header nav .nav-book,.header.is-scrolled nav .nav-book{margin:24px 0 0;padding:18px 22px;border:0;border-radius:28px;background:var(--paper);color:var(--ink);display:flex;justify-content:space-between;font-size:12px}
  .menu-properties{display:flex;flex-wrap:wrap;gap:16px;font-size:10px;padding:25px 3px 4px}.menu-properties>span{width:100%;font-size:8px;letter-spacing:.15em;opacity:.5}.menu-properties a{opacity:.65}.menu-properties a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:5px}
  .mobile-book{display:none}
  .hero{margin:0;height:92svh;min-height:650px;max-height:1050px}.hero-copy{top:30%;left:8%}.hero-img{height:100%;top:0;transform:scale(1.035)}.hero h1{font-size:clamp(42px,6.4vw,65px)}.hero-bottom{bottom:28px;left:8%;right:8%}
  body[data-hotel=takano] .hero-copy{top:29%;right:9%}body[data-hotel=takano] .hero h1{font-size:clamp(40px,6.2vw,62px)}
  footer{padding-bottom:35px}
}
@media(max-width:480px){
  .header,.header.is-scrolled{inset:max(14px,env(safe-area-inset-top)) 12px auto;width:calc(100% - 24px);min-height:66px;padding:0 10px 0 17px;column-gap:9px;grid-template-columns:1fr auto 40px;border-radius:35px}
  .header>.brand{min-height:64px;gap:8px}.header .brand-jp{font-size:19px;letter-spacing:.09em}.header .brand small{font-size:5.5px;letter-spacing:.15em}.header .crest{display:none}.capsule-book{font-size:10px;padding:12px 15px;gap:10px}.menu-button{width:40px;height:40px;padding:11px}
  .hero{height:90svh;min-height:610px}.hero-copy{top:29%;left:8%}.hero h1{font-size:39px;letter-spacing:.08em}.hero-sub{font-size:11px}.hero-bottom{font-size:7px}.hero-bottom>a{font-size:0}
  body[data-hotel=takano] .hero-copy{top:28%;right:8%}body[data-hotel=takano] .hero h1{font-size:38px}
  .header.menu-open{border-radius:27px}.header nav>a:not(.nav-book){font-size:17px;padding:17px 3px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}.hero-img{will-change:auto;transform:none!important}
}

/* One top surface: the system safe area and the navigation share a background.
   Hardware rounds the screen's top corners; CSS rounds the panel's lower edge.
   The device's physical corner radius is not exposed, so this is a visual match. */
@media(max-width:1024px){
  html{background:#243a32;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 112px)}
  html:has(body[data-hotel=takano]){background:#302f28}
  body{background:transparent}
  main,footer{background:var(--paper)}
  .hero{background:#18241e}
  .header,.header.is-scrolled,.header.menu-open{
    --panel-radius:32px;
    --previous-controls-height:max(40px,calc(52px - env(safe-area-inset-top,0px) * .333333));
    /* Enlarge the combined safe area + navigation by 20%, not just the controls. */
    --controls-height:calc((env(safe-area-inset-top,0px) + var(--previous-controls-height)) * 1.2 - env(safe-area-inset-top,0px));
    inset:0 0 auto;
    width:100%;max-width:none;margin:0;
    min-height:0;
    padding:env(safe-area-inset-top,0px) calc(26px + env(safe-area-inset-right,0px)) 0 calc(30px + env(safe-area-inset-left,0px));
    border:0;
    border-radius:0 0 var(--panel-radius) var(--panel-radius);
    background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 96%,transparent),color-mix(in srgb,var(--ink) 76%,transparent));
    box-shadow:0 16px 30px -10px #00000065,0 4px 9px -3px #00000035,inset 0 -1px 0 #ffffff30;
    backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  }
  .header>.brand{min-height:var(--controls-height);gap:9px}
  .header .brand-jp{font-size:20px;line-height:1.2}
  .header .brand small{margin-top:3px}
  .header .crest{width:28px;height:28px;font-size:16px}
  .header .capsule-book{min-height:36px;padding:8px 15px;font-size:10px;box-shadow:0 2px 8px #0002,inset 0 1px 0 #fff8}
  .header .menu-button{width:40px;height:40px;padding:12px}
  .header.menu-open{background:color-mix(in srgb,var(--ink) 94%,transparent)}
  .header.menu-open nav{max-height:min(640px,calc(100svh - 115px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)))}
  .hero-copy{margin-top:env(safe-area-inset-top,0px)}
  .hero-bottom{bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  footer{padding-bottom:calc(35px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:480px){
  .header,.header.is-scrolled,.header.menu-open{
    --panel-radius:48px;
    padding-right:calc(22px + env(safe-area-inset-right,0px));
    padding-left:calc(28px + env(safe-area-inset-left,0px));
    padding-bottom:0;
  }
  .header .brand-jp{font-size:18px}
  .header .brand small{font-size:5px;letter-spacing:.16em}
}

/* Selected Kameya wordmark: preserve the supplied transparent lettering. */
.header .kameya-logo{display:block;position:relative;width:220px;max-width:100%;height:36px;overflow:hidden;flex-shrink:0}
.header .kameya-logo img{position:absolute;width:110.34%;max-width:none;height:auto;left:-5.19%;top:50%;transform:translateY(-51.31%);filter:brightness(0) invert(1);transition:filter .45s}
.header.is-scrolled .kameya-logo img{filter:brightness(0)}
@media(max-width:1024px){
 .header .kameya-logo{width:170px;height:30px;flex-shrink:1}
 .header.is-scrolled .kameya-logo img{filter:brightness(0) invert(1)}
}
@media(max-width:480px){.header .kameya-logo{width:155px;height:26px}}