:root {
  --ink: #153432;
  --deep: #0c2828;
  --mist: #eaf1ed;
  --paper: #f7f3ea;
  --sand: #d9c9aa;
  --gold: #b28a4a;
  --white: #fffdf8;
  --line: rgba(21, 52, 50, .18);
  --serif: "Songti TC", "Noto Serif TC", "PMingLiU", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.8; }
body.modal-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.site-header {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 88px; padding: 0 clamp(24px, 5vw, 80px); color: var(--white);
  transition: background .35s, color .35s, box-shadow .35s;
}
.site-header.scrolled { color: var(--ink); background: rgba(247,243,234,.94); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 12px; letter-spacing: .08em; }
.brand-logo { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(0,0,0,.16)); }
.brand strong, .brand small { display: block; }
.brand strong { font-family: var(--serif); font-size: 19px; letter-spacing: .18em; }
.brand small { margin-top: -2px; font-size: 8px; letter-spacing: .22em; opacity: .72; }
nav { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 38px); font-size: 13px; letter-spacing: .08em; }
nav a { position: relative; }
nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: currentColor; transition: right .3s; }
nav a:hover::after { right: 0; }
.nav-cta { padding: 11px 18px; border: 1px solid currentColor; border-radius: 999px; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }
.menu-toggle > span:not(.sr-only) { display: block; width: 24px; height: 1px; margin: 5px 0; background: currentColor; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: var(--white); background: var(--deep); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: heroZoom 16s ease-out both; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,31,30,.82) 0%, rgba(6,31,30,.52) 42%, rgba(6,31,30,.05) 78%), linear-gradient(0deg, rgba(6,31,30,.38), transparent 40%); }
.hero-copy { position: relative; z-index: 1; width: min(760px, 80vw); margin-left: clamp(28px, 9vw, 150px); padding-top: 70px; }
.eyebrow { margin: 0 0 24px; color: #ead7a9; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.eyebrow.dark { color: var(--gold); }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.25; }
h1 { max-width: 800px; font-size: clamp(44px, 6vw, 88px); letter-spacing: .03em; }
h1 em { color: #f2d494; font-style: normal; }
.hero-lead { max-width: 560px; margin: 28px 0 34px; font-family: var(--serif); font-size: clamp(17px, 1.5vw, 22px); letter-spacing: .08em; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 25px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .1em; transition: transform .25s, background .25s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--deep); background: #f2d494; }
.text-link { font-size: 13px; letter-spacing: .1em; }
.text-link span { display: inline-block; margin-left: 8px; transition: transform .25s; }
.text-link:hover span { transform: translate(4px, 4px); }
.hero-meta { position: absolute; right: clamp(24px, 5vw, 80px); bottom: 45px; z-index: 1; display: flex; gap: 32px; font-size: 11px; letter-spacing: .1em; }
.hero-meta span { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.35); }
.hero-meta b { margin-right: 5px; color: #f2d494; font: 500 18px var(--serif); }
.scroll-cue { position: absolute; z-index: 1; bottom: 42px; left: clamp(28px, 3vw, 56px); display: flex; align-items: center; gap: 10px; writing-mode: vertical-rl; font-size: 8px; letter-spacing: .25em; }
.scroll-cue span { width: 1px; height: 45px; background: rgba(255,255,255,.55); }

.section { max-width: 1360px; margin: 0 auto; padding: clamp(90px, 12vw, 170px) clamp(24px, 6vw, 90px); }
.intro { position: relative; display: grid; grid-template-columns: .5fr 1.25fr 1fr; gap: 7vw; }
.section-number { color: var(--gold); font: italic 28px var(--serif); }
.intro h2, .section-head h2, .journey h2 { font-size: clamp(40px, 5vw, 68px); }
.intro-body { padding-top: 44px; }
.intro-body p { color: #47605d; font-size: 15px; }
.intro-body .lead { color: var(--ink); font: 500 clamp(20px, 2vw, 28px)/1.8 var(--serif); }
.signature { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); font: 24px var(--serif); }
.signature small { color: #72827f; font: 11px var(--sans); letter-spacing: .15em; }

.rooms { padding-top: 40px; }
.section-head { display: grid; grid-template-columns: 1.4fr .7fr; align-items: end; gap: 10vw; margin-bottom: 90px; }
.section-head > p { margin: 0 0 10px; color: #60726f; }
.room { display: grid; grid-template-columns: 1.55fr .75fr; align-items: center; gap: clamp(40px, 8vw, 120px); margin-bottom: 150px; }
.room-island { grid-template-columns: .75fr 1.55fr; }
.room-gallery { position: relative; min-height: 610px; }
.room-main { width: 88%; height: 570px; object-fit: cover; border-radius: 2px; }
.room-inset { position: absolute; z-index: 2; right: 0; bottom: -35px; width: 40%; height: 260px; object-fit: cover; border: 10px solid var(--paper); box-shadow: 0 24px 60px rgba(15,43,41,.16); }
.room-index { position: absolute; top: 0; right: -8px; writing-mode: vertical-rl; color: var(--gold); font-size: 9px; letter-spacing: .3em; }
.room-island .room-main { margin-left: auto; }
.room-island .room-inset { right: auto; left: 0; }
.room-island .room-index { right: auto; left: -8px; }
.room-kicker { margin: 0 0 12px; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .22em; }
.room h3 { font-size: clamp(42px, 4.5vw, 65px); }
.room-english { margin: 3px 0 30px; color: #8b9a96; font-size: 9px; letter-spacing: .28em; }
.room-description { color: #506663; font-family: var(--serif); font-size: 17px; line-height: 2; }
.room-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 28px 0; padding: 25px 0; border-block: 1px solid var(--line); list-style: none; font-size: 12px; }
.room-features li::before { content: "◇"; margin-right: 8px; color: var(--gold); }
.room-button { width: 100%; display: flex; justify-content: space-between; padding: 10px 0; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.room-button span { font-size: 20px; font-weight: 300; }
.room-more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.room-more-four { grid-template-columns: repeat(4, 1fr); }
.room-more figure { position: relative; overflow: hidden; margin: 0; height: 250px; background: #d9ddd8; }
.room-more img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.room-more figure:hover img { transform: scale(1.035); }
.room-more figure::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(7,30,29,.65)); }
.room-more figcaption { position: absolute; z-index: 1; left: 18px; bottom: 14px; color: white; font: 15px var(--serif); letter-spacing: .1em; }

.quote-band { overflow: hidden; padding: 60px 20px; color: #efe3c5; background: var(--deep); text-align: center; }
.quote-band p { margin: 0; font: 400 clamp(28px, 4vw, 54px)/1.5 var(--serif); letter-spacing: .08em; }

.facilities { max-width: none; padding-inline: 0; color: var(--white); background: #102f2e; }
.facility-title { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 8vw; max-width: 1180px; margin: 0 auto 70px; padding: 0 40px; }
.facility-title .eyebrow { grid-column: 1/-1; margin: 0; }
.facility-title h2 { font-size: clamp(40px, 5vw, 70px); }
.facility-title > p:last-child { align-self: end; color: #b6c3bf; }
.facility-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 330px 330px; gap: 8px; max-width: 1500px; margin: 0 auto; padding: 0 8px; }
.facility-card { position: relative; overflow: hidden; margin: 0; }
.facility-card:first-child { grid-row: 1 / 3; }
.facility-card:last-child { grid-column: 2 / 4; }
.facility-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.facility-card:hover img { transform: scale(1.035); }
.facility-card::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(5,22,22,.8)); }
.facility-card figcaption { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 20px; display: flex; align-items: end; gap: 15px; }
.facility-card figcaption > span { color: #e4c98d; font: italic 13px var(--serif); }
.facility-card b, .facility-card small { display: block; }
.facility-card b { font: 23px var(--serif); letter-spacing: .06em; }
.facility-card small { color: #ced7d4; font-size: 11px; }
.facility-note { max-width: 1500px; margin: 18px auto 0; padding: 0 10px; color: #879d98; text-align: right; font-size: 10px; }

.journey { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(50px, 9vw, 130px); align-items: center; }
.journey-photo { position: relative; }
.journey-photo img { width: 100%; height: 730px; object-fit: cover; }
.journey-photo span { position: absolute; right: -45px; bottom: 50px; padding: 16px; color: var(--white); background: var(--gold); font-size: 10px; line-height: 1.5; letter-spacing: .18em; }
.timeline { margin: 50px 0 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.timeline time { color: var(--gold); font: 18px var(--serif); }
.timeline b { font: 20px var(--serif); }
.timeline p { margin: 4px 0 0; color: #667976; font-size: 13px; }

.inquiry { position: relative; min-height: 620px; display: grid; place-items: center; overflow: hidden; color: var(--white); text-align: center; }
.inquiry > img, .inquiry-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.inquiry > img { object-fit: cover; }
.inquiry-overlay { background: rgba(7,34,33,.68); }
.inquiry-copy { position: relative; z-index: 1; max-width: 760px; padding: 60px 24px; }
.inquiry h2 { font-size: clamp(40px, 6vw, 76px); }
.inquiry p:not(.eyebrow) { max-width: 610px; margin: 26px auto 35px; color: #d7e0dd; }
.button-light { color: var(--deep); background: #f4e8c8; }

footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; padding: 65px clamp(24px, 6vw, 90px); color: #b9c7c3; background: #071e1e; font-size: 11px; }
.footer-brand { color: var(--white); }
.footer-copy p { margin: 2px 0; }
.back-top { color: #e1ca92; letter-spacing: .12em; }

.line-friend { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; padding: 28px clamp(24px, 6vw, 90px); color: #173630; background: #eef6ee; border-top: 1px solid rgba(21,52,50,.12); }
.line-icon { position: relative; display: grid; place-items: center; width: 70px; height: 58px; border-radius: 50%; color: white; background: #06c755; font: 800 14px/1 var(--sans); letter-spacing: -.04em; }
.line-icon::after { content: ""; position: absolute; left: 9px; bottom: -4px; width: 17px; height: 17px; background: #06c755; clip-path: polygon(0 0,100% 0,0 100%); transform: rotate(-10deg); }
.line-friend small, .line-friend strong, .line-friend p { display: block; margin: 0; }
.line-friend small { color: #338153; font-size: 9px; letter-spacing: .24em; }
.line-friend strong { margin-top: 2px; font: 24px var(--serif); letter-spacing: .06em; }
.line-friend p { color: #61766d; font-size: 12px; }

.gallery-modal { width: min(1100px, calc(100vw - 30px)); max-height: calc(100vh - 30px); padding: 60px; border: 0; color: var(--ink); background: var(--paper); box-shadow: 0 30px 100px rgba(0,0,0,.45); }
.gallery-modal::backdrop { background: rgba(4,24,23,.88); backdrop-filter: blur(8px); }
.modal-close { position: absolute; top: 18px; right: 24px; border: 0; background: transparent; font: 38px/1 var(--serif); cursor: pointer; }
.modal-heading span { color: var(--gold); font-size: 10px; letter-spacing: .25em; }
.modal-heading h2 { margin: 3px 0 28px; font-size: 42px; }
.modal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.modal-grid img { width: 100%; height: 310px; object-fit: cover; }
.modal-grid img:first-child { grid-column: 1/-1; height: 480px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }

@media (max-width: 980px) {
  .site-header { height: 72px; }
  .menu-toggle { display: block; }
  nav { position: absolute; top: 72px; left: 0; right: 0; display: none; flex-direction: column; align-items: flex-start; gap: 0; padding: 20px 28px 30px; color: var(--ink); background: var(--paper); box-shadow: 0 20px 30px rgba(0,0,0,.1); }
  nav.open { display: flex; }
  nav a { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav-cta { margin-top: 10px; padding-inline: 15px; border: 1px solid var(--ink); text-align: center; }
  .hero-meta { display: none; }
  .intro { grid-template-columns: 50px 1fr; }
  .intro-body { grid-column: 2; padding-top: 0; }
  .room, .room-island { grid-template-columns: 1fr; }
  .room-island .room-copy { order: 2; }
  .room-island .room-gallery { order: 1; }
  .room-gallery { min-height: 500px; }
  .room-main { height: 470px; }
  .room-more-four { grid-template-columns: repeat(2, 1fr); }
  .facility-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 480px 300px 300px; }
  .facility-card:first-child { grid-column: 1 / 3; grid-row: auto; }
  .facility-card:last-child { grid-column: 1 / 3; }
  .journey { grid-template-columns: 1fr; }
  .journey-photo img { height: 600px; }
  footer { grid-template-columns: 1fr auto; }
  .footer-copy { grid-column: 1/-1; grid-row: 2; }
}

@media (max-width: 640px) {
  .site-header { padding-inline: 18px; }
  .brand strong { font-size: 16px; }
  .brand-logo { width: 46px; height: 46px; }
  .hero { min-height: 820px; align-items: flex-end; }
  .hero-image { object-position: 56% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(5,27,26,.94) 0%, rgba(5,27,26,.55) 60%, rgba(5,27,26,.08)); }
  .hero-copy { width: auto; margin: 0; padding: 0 24px 100px; }
  h1 { font-size: 43px; }
  .hero-lead { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .scroll-cue { display: none; }
  .section { padding: 90px 22px; }
  .intro { grid-template-columns: 1fr; gap: 20px; }
  .intro-body { grid-column: auto; }
  .section-head { grid-template-columns: 1fr; gap: 25px; margin-bottom: 65px; }
  .room { gap: 45px; margin-bottom: 110px; }
  .room-gallery { min-height: 370px; }
  .room-main { width: 94%; height: 350px; }
  .room-inset { width: 45%; height: 160px; border-width: 6px; bottom: -25px; }
  .room-copy { padding-inline: 3px; }
  .room-more, .room-more-four { grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
  .room-more figure { height: 190px; }
  .room-more figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .room-more figcaption { left: 12px; bottom: 10px; font-size: 13px; }
  .facility-title { grid-template-columns: 1fr; padding-inline: 24px; }
  .facility-title .eyebrow { grid-column: auto; }
  .facility-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 18px 10px; }
  .facility-card, .facility-card:first-child, .facility-card:last-child { flex: 0 0 84vw; height: 460px; scroll-snap-align: center; }
  .facility-note { padding-inline: 22px; text-align: left; }
  .journey-photo img { height: 480px; }
  .journey-photo span { right: -5px; }
  .inquiry { min-height: 600px; }
  footer { grid-template-columns: 1fr; }
  .back-top { justify-self: start; }
  .line-friend { grid-template-columns: auto 1fr; padding-block: 24px; }
  .line-icon { width: 60px; height: 50px; }
  .line-friend strong { font-size: 19px; }
  .line-friend p { margin-top: 4px; line-height: 1.55; }
  .gallery-modal { padding: 55px 16px 20px; }
  .modal-grid { grid-template-columns: 1fr; }
  .modal-grid img, .modal-grid img:first-child { grid-column: auto; height: 250px; }
}

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