@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Serif+JP:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root {
  --ink: #173343;
  --night: #071a28;
  --deep-sea: #0c3446;
  --cream: #f4f0e7;
  --paper: #fbf8f1;
  --mist: #dce9e6;
  --line: rgba(23, 51, 67, .2);
  --sunset: #a94625;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "Zen Kaku Gothic New", sans-serif; line-height: 1.85; }
a { color: inherit; text-decoration: none; }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid #ffd166; outline-offset: 4px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 20; padding: .6rem 1rem; color: var(--night); background: white; }

.site-header { position: absolute; z-index: 5; top: 0; width: 100%; padding: 1.5rem clamp(1.5rem, 5vw, 5rem); display: flex; justify-content: space-between; align-items: center; color: white; }
.brand { font: 600 1.55rem/1 "Noto Serif JP", serif; letter-spacing: .16em; }
.brand span { display: block; margin-bottom: .35rem; font: .62rem "DM Mono", monospace; letter-spacing: .26em; }
nav { display: flex; gap: 2rem; align-items: center; font-size: .84rem; }
nav a { transition: opacity .2s ease; }
nav a:hover { opacity: .7; }
.nav-cta { padding: .6rem 1rem; border: 1px solid rgba(255,255,255,.7); }

.hero { isolation: isolate; min-height: 50rem; padding: 11rem clamp(1.5rem, 11vw, 11rem) 7rem; display: flex; align-items: center; position: relative; overflow: hidden; color: white; background: var(--deep-sea); }
.hero-media, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { z-index: -3; object-fit: cover; object-position: center 48%; }
.hero-shade { z-index: -2; background: linear-gradient(90deg, rgba(3,20,31,.92) 0%, rgba(4,35,49,.62) 48%, rgba(5,28,39,.12) 100%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: auto -14rem -22rem auto; width: 48rem; height: 48rem; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.hero-content { max-width: 47rem; }
.eyebrow, .section-label, .mini-label { margin: 0 0 1rem; font: .72rem "DM Mono", monospace; letter-spacing: .19em; }
.hero h1 { margin: .2rem 0 1.5rem; font: 500 clamp(3rem, 6.5vw, 6rem)/1.25 "Noto Serif JP", serif; letter-spacing: .08em; }
.lead { max-width: 42rem; font-size: 1.1rem; text-shadow: 0 1px 15px rgba(0,0,0,.35); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; min-height: 3.2rem; padding: .75rem 1.25rem; border: 1px solid white; font-weight: 700; }
.button-primary { color: var(--night); background: var(--cream); }
.button-ghost { color: white; background: rgba(3,20,31,.16); }
.button span { margin-left: 1.2rem; }
.hero-aside { position: absolute; right: clamp(1.5rem, 4vw, 4rem); top: 50%; display: flex; gap: 1.4rem; margin: 0; writing-mode: vertical-rl; font: .62rem "DM Mono", monospace; letter-spacing: .2em; opacity: .75; }
.photo-credit { font-size: .625rem; line-height: 1.45; opacity: .68; }
.photo-credit a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 2px; }
.hero-note { position: absolute; right: 1.5rem; bottom: 1rem; max-width: 75%; padding: .2rem .4rem; border-radius: .2rem; text-align: right; background: rgba(2,9,17,.38); }

.quick-facts { padding: 1.4rem clamp(1.5rem, 11vw, 11rem); color: var(--paper); background: var(--night); }
.quick-facts ul { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; padding: 0; margin: 0; list-style: none; background: rgba(255,255,255,.22); }
.quick-facts li { display: grid; gap: .1rem; padding: 1rem 1.2rem; background: var(--night); }
.quick-facts b { font-size: .72rem; color: rgba(255,255,255,.65); }
.quick-facts span { font: 500 1rem "Noto Serif JP",serif; }

.section { padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 11vw, 11rem); }
.section h2 { margin: .2rem 0 1.5rem; font: 500 clamp(2.25rem, 4.7vw, 4.4rem)/1.42 "Noto Serif JP", serif; letter-spacing: .06em; }
.statement { background: var(--paper); }
.statement-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(3rem, 8vw, 9rem); align-items: end; }
.statement-grid p { margin: 0 0 1rem; }
.statement-lead { font: 500 1.25rem/1.8 "Noto Serif JP", serif; }

.experience { color: #ecf4f2; background: var(--deep-sea); }
.section-heading { display: grid; grid-template-columns: 1.2fr .65fr; gap: 5rem; align-items: end; }
.section-heading > p { margin-bottom: 2rem; }
.day-flow { padding: 0; margin: 5rem 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.22); }
.day-flow li { display: grid; grid-template-columns: 9rem 1fr; gap: 3rem; padding: 2.2rem 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.day-flow .day-label { margin: 0; font: 500 1.15rem "Noto Serif JP", serif; color: #9bcad0; }
.day-flow span { font: .64rem "DM Mono", monospace; letter-spacing: .17em; color: #eaa07e; }
.day-flow h3 { margin: .25rem 0 .5rem; font: 500 clamp(1.35rem, 2.3vw, 2rem) "Noto Serif JP", serif; }
.day-flow p { max-width: 46rem; margin: 0; color: rgba(236,244,242,.78); }
.weather-note { margin: 1.5rem 0 0; font-size: .875rem; color: rgba(236,244,242,.82); }
.rule-link { display: inline-block; margin-top: .8rem; padding-bottom: .1rem; border-bottom: 1px solid rgba(236,244,242,.55); font-size: .78rem; color: rgba(236,244,242,.82); }
.rule-link span { margin-left: .5rem; }

.star-scene { isolation: isolate; position: relative; min-height: 48rem; padding: 7rem clamp(1.5rem, 11vw, 11rem); display: flex; align-items: center; overflow: hidden; color: white; background: #06101a; }
.star-media, .star-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.star-media { z-index: -2; object-fit: cover; object-position: center; }
.star-shade { z-index: -1; background: linear-gradient(90deg, rgba(2,9,17,.92) 0%, rgba(3,13,23,.48) 53%, rgba(3,13,23,.08) 100%); }
.star-copy { max-width: 42rem; }
.star-copy h2 { margin: .3rem 0 1.3rem; font: 500 clamp(2.8rem, 5.4vw, 5.1rem)/1.38 "Noto Serif JP", serif; letter-spacing: .08em; }
.star-copy p:last-child { max-width: 28rem; }
.star-credit { position: absolute; right: 1.5rem; bottom: 1rem; max-width: 75%; padding: .3rem .5rem; border-radius: .2rem; text-align: right; background: rgba(2,9,17,.58); }

.about { background: var(--paper); }
.about-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 8vw, 8rem); align-items: end; }
.about-intro p { margin: 0 0 1rem; }
.room-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 3.5rem; }
.room-card { margin: 0; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.room-card img { width: 100%; height: auto; display: block; }
.room-card-featured img { object-position: center; }
.room-card figcaption { display: grid; gap: .35rem; padding: 1.1rem; }
.room-card figcaption span { font: .62rem "DM Mono",monospace; letter-spacing: .16em; color: var(--sunset); }
.room-card figcaption strong { font: 500 1rem "Noto Serif JP",serif; }
.room-card figcaption small { line-height: 1.6; color: rgba(23,51,67,.68); }
.room-panel { max-width: 54rem; margin-top: 2rem; padding: clamp(2rem, 5vw, 4rem); background: var(--mist); }
.room-mark { min-height: 20rem; display: grid; place-content: center; text-align: center; border: 1px solid rgba(23,51,67,.25); background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.7), transparent 40%), linear-gradient(135deg,#b8d2ce,#e9eee2); }
.room-mark span { display: block; font: 500 clamp(5rem, 10vw, 9rem)/1 "Noto Serif JP", serif; color: rgba(23,51,67,.72); }
.room-mark small { font: .6rem "DM Mono", monospace; letter-spacing: .18em; }
.room-panel h3, .fit-card h3, .info-grid h3 { margin: .2rem 0 1.5rem; font: 500 1.45rem "Noto Serif JP", serif; }
dl { margin: 0; }
dl div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
dt { font-weight: 700; }
dd { margin: 0; }
.fine-print { margin-top: 1.4rem; font-size: .875rem; }
.inline-reserve { display: inline-flex; justify-content: space-between; align-items: center; min-height: 3.25rem; min-width: 18rem; margin-top: 1.5rem; padding: .75rem 1rem; color: white; background: var(--night); font-weight: 700; }
.mobile-reserve { display: none; }

.fit { background: #e9e2d4; }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 3.5rem; background: rgba(23,51,67,.18); }
.fit-card { padding: clamp(2rem, 4vw, 4rem); background: var(--paper); }
.fit-good { background: #dce9e6; }
.fit-card ul { padding: 0; margin: 0; list-style: none; }
.fit-card li { position: relative; padding: .75rem 0 .75rem 1.8rem; border-bottom: 1px solid var(--line); }
.fit-card li::before { content: "○"; position: absolute; left: 0; color: var(--sunset); }

.guide { background: var(--paper); }
.guide-heading { max-width: 50rem; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 3.5rem; background: var(--line); }
.info-grid > div { padding: 2.5rem; background: var(--paper); }
.info-number { margin: 0 0 2rem; font: .7rem "DM Mono", monospace; color: var(--sunset); }
.phone-reservation { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: baseline; margin: 1rem 0 .25rem; }
.phone-reservation span { font-size: .78rem; font-weight: 700; }
.phone-reservation a { padding-bottom: .1rem; border-bottom: 1px solid currentColor; font: 600 1.05rem "DM Mono", monospace; letter-spacing: .04em; }
.text-link { display: inline-block; margin-top: .6rem; padding-bottom: .15rem; border-bottom: 1px solid currentColor; }
.text-link span { margin-left: .6rem; }

.reserve { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 11vw, 11rem); color: white; background: var(--night); }
.reserve h2 { margin: .3rem 0 1rem; font: 500 clamp(2.5rem, 4.6vw, 4.3rem)/1.4 "Noto Serif JP", serif; letter-spacing: .06em; }
.reserve p:last-child { color: rgba(255,255,255,.72); }
.booking-links { display: grid; }
.booking-links a { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid rgba(255,255,255,.35); font-size: 1.05rem; }
.booking-links a:first-child { border-top: 1px solid rgba(255,255,255,.35); }
.booking-links .booking-link-phone { margin-bottom: 1.4rem; padding: 1.25rem 1.4rem; border: 1px solid rgba(255,255,255,.65); border-radius: .25rem; background: rgba(255,255,255,.1); }
.booking-link-copy { display: grid; gap: .2rem; }
.booking-link-copy small { color: #ffd08a; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.booking-link-copy strong { font-size: 1.1rem; }
.booking-link-copy em { font: 600 1.12rem "DM Mono", monospace; font-style: normal; letter-spacing: .04em; }
.booking-links-label { margin: 0; padding-bottom: .65rem; color: rgba(255,255,255,.72); font-size: .75rem; letter-spacing: .08em; }
.booking-links-label + a { border-top: 1px solid rgba(255,255,255,.35); }
.booking-links b { font-weight: 400; transition: transform .2s ease; }
.booking-links a:hover b { transform: translate(3px,-3px); }

footer { padding: 3.5rem clamp(1.5rem,5vw,5rem); color: #e9e6dd; background: #04111b; }
footer p { margin: .8rem 0 0; font-size: .84rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin: 2rem 0 1.2rem; font-size: .82rem; }
.copyright { margin-top: 2rem; opacity: .55; }

@media (max-width: 800px) {
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); font-size: 1rem; }
  .site-header { height: 4rem; padding: .7rem 1.25rem; }
  nav a:not(.nav-cta) { display: none; }
  .nav-cta { min-height: 48px; display: flex; align-items: center; }
  .hero { min-height: clamp(37.5rem,86svh,45rem); padding: 7.5rem 1.25rem 5.5rem; align-items: flex-end; }
  .hero-shade { background: linear-gradient(90deg,rgba(3,20,31,.88),rgba(4,35,49,.32)); }
  .hero-media { object-position: 62% center; }
  .hero h1 { font-size: clamp(2.65rem,12vw,3.4rem); line-height: 1.18; letter-spacing: .04em; }
  .lead { font-size: .98rem; line-height: 1.75; }
  .hero-actions { display: grid; gap: .6rem; }
  .button { width: 100%; min-height: 54px; justify-content: space-between; }
  .button-ghost { min-height: 44px; justify-content: center; border: 0; text-decoration: underline; text-underline-offset: 4px; }
  .hero-aside { display: none; }
  .hero-note, .star-credit { right: .75rem; bottom: calc(4.5rem + env(safe-area-inset-bottom)); max-width: calc(100% - 1.5rem); font-size: .6875rem; }
  .quick-facts { padding: 1.1rem 1.25rem 1.35rem; }
  .quick-facts ul { grid-template-columns: 1fr 1fr; }
  .quick-facts li { min-height: 4.7rem; padding: .85rem; }
  .quick-facts b { font-size: .75rem; }
  .quick-facts span { font-size: .95rem; }
  .section { padding: 4rem 1.25rem; }
  .section h2 { font-size: clamp(2rem,9vw,2.4rem); line-height: 1.4; }
  .statement-grid, .section-heading, .about-intro, .room-panel, .fit-grid, .info-grid, .reserve { grid-template-columns: 1fr; }
  .statement-grid, .section-heading, .about-intro { gap: 1.8rem; }
  .room-gallery { width: 100%; max-width: 100%; display: flex; gap: .8rem; margin-right: 0; padding: 0 0 .6rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .room-card { flex: 0 0 min(76vw, 22rem); scroll-snap-align: start; }
  .room-card-featured { flex-basis: min(76vw, 19rem); }
  .room-card img { height: auto; }
  .room-card figcaption { padding: 1rem; }
  .room-panel { margin-top: 1.25rem; padding: 1.25rem; }
  .inline-reserve { width: 100%; min-height: 52px; min-width: 0; }
  .day-flow { margin-top: 3rem; }
  .day-flow li { grid-template-columns: 1fr; gap: .45rem; padding: 1.6rem 0; }
  .day-flow .day-label { font-size: 1rem; }
  .star-scene { min-height: 125vw; max-height: 46rem; padding: 4rem 1.25rem; }
  .star-copy h2 { font-size: clamp(2.5rem,11vw,3.4rem); line-height: 1.35; }
  .star-shade { background: linear-gradient(90deg,rgba(2,9,17,.88),rgba(3,13,23,.25)); }
  .info-grid, .fit-grid { gap: 1px; }
  .reserve { padding: 4rem 1.25rem; }
  dl div { grid-template-columns: 1fr; gap: .1rem; }
  .booking-links a { min-height: 52px; }
  .footer-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .mobile-reserve { position: fixed; z-index: 20; left: .75rem; right: .75rem; bottom: calc(.55rem + env(safe-area-inset-bottom)); min-height: 3.25rem; display: flex; justify-content: space-between; align-items: center; padding: .75rem 1.1rem; border: 1px solid rgba(255,255,255,.72); border-radius: .25rem; color: white; background: rgba(7,26,40,.96); box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.28); font-weight: 700; backdrop-filter: blur(8px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}