/* Practical information has a shorter, horizontal reading rhythm. */
.site-wrap main .practical-section {
 display:block; padding-top:56px; padding-bottom:56px;
}
.site-wrap .practical-section .section-heading { display:block; margin:0 0 28px; }
.site-wrap .practical-section .section-copy { width:100%; max-width:none; }
.site-wrap .practical-section .practical-title,
.site-wrap .practical-heading h2 {
 display:block; writing-mode:horizontal-tb; font-size:clamp(25px,2.2vw,32px);
 line-height:1.65; letter-spacing:.065em; font-weight:400; margin:0 0 28px;
}
.site-wrap .practical-heading p { font-size:16px; line-height:1.9; margin:0 0 30px; }
.site-wrap .practical-heading h2 { margin-bottom:12px; }
.site-wrap .access-section.practical-section .access-grid {
 display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr); gap:5%;
}
.site-wrap .practical-section .data-list { margin:0; }
.site-wrap .practical-section .data-list>div { padding:20px 0; }
.site-wrap .practical-section .data-list dt { font-size:14px; line-height:1.9; }
.site-wrap .practical-section .data-list dd { font-size:16px; line-height:1.9; }
.site-wrap .practical-section .fine-print { font-size:14px; line-height:1.9; }
/* Room types are compared using confirmed dimensions, without assigning unverified photos. */
.site-wrap .room-details.practical-section { margin:0; padding:40px 8% 48px; border-top:1px solid #1e283029; }
.room-comparison { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #1e283055; border-bottom:1px solid #1e283055; }
.room-option { padding:26px 24px; }
.room-option+.room-option { border-left:1px solid #1e283029; }
.room-option h3 { font-size:19px; font-weight:400; letter-spacing:.08em; margin:0 0 20px; }
.room-option dl { margin:0; }
.room-option dl>div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.room-option dl>div+div { margin-top:12px; }
.room-option dt { color:#59636c; font-size:14px; white-space:nowrap; }
.room-option dd { font-size:16px; margin:0; white-space:nowrap; }
.room-option strong { font-size:30px; font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.room-comparison-note { font-size:14px; line-height:1.9; color:#59636c; margin:18px 0 36px; max-width:60em; }
.room-shared { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:5%; }
.room-shared>figure { margin:0; }
.site-wrap .room-shared>figure>img { width:100%; height:auto; aspect-ratio:4/3; max-height:min(340px,60svh)!important; object-fit:cover; }
.room-shared figcaption { margin-top:12px; font-size:14px; line-height:1.8; color:#59636c; }
.room-shared h3 { font-size:20px; font-weight:400; line-height:1.7; margin:0 0 18px; }
.site-wrap .room-shared .data-list>div { display:block; }
.room-shared .data-list dd { margin:8px 0 0; }
.room-shared .text-link { margin-top:22px; }
/* Use the supplied vegetable dishes as the lead image; keep the complete meal secondary. */
.site-wrap img.vegetable-photo { object-position:35% 80%; }
.phrase { display:inline-block; }
.promise-overview .stay-facts a>span { text-wrap:pretty; }
/* Stack the room story heading, description and link in reading order. */
.page-index .folio-room .room-intro { display:flex; flex-direction:column; align-items:stretch; gap:32px; }
.page-index .site-wrap #rooms .room-intro h2.vertical-heading {
 display:block; writing-mode:horizontal-tb; align-self:flex-start; width:100%; max-width:100%; min-width:0;
 height:auto; padding:0; margin:0!important; font-size:clamp(28px,2.8vw,40px)!important; line-height:1.6; letter-spacing:.055em;
}
.page-index .site-wrap #rooms .room-intro h2.vertical-heading>span {
 display:block; writing-mode:horizontal-tb; white-space:normal; padding:0;
}
.page-index .site-wrap #rooms .room-intro h2.vertical-heading>span:first-child::before {
 left:-.4em; right:auto; top:-.16em;
}
.page-index .folio-room .journal-copy { max-width:none; }
.page-index .folio-room .journal-copy br { display:initial; }
@media(max-width:1100px) {
 .room-option { padding:24px 16px; }
 .room-option strong { font-size:26px; }
 .site-wrap .access-section.practical-section .access-grid { grid-template-columns:1fr; gap:28px; }
}
@media(max-width:720px) {
 .site-wrap main .practical-section { padding-top:40px; padding-bottom:40px; }
 .site-wrap .room-details.practical-section { margin:0; padding:32px 26px; }
 .site-wrap .practical-section .practical-title,.site-wrap .practical-heading h2 { font-size:25px; margin-bottom:22px; letter-spacing:.04em; }
 .site-wrap .practical-heading h2 { margin-bottom:12px; }
 .room-comparison { display:block; }
 .room-option { display:grid; grid-template-columns:1fr 1.6fr; align-items:center; gap:18px; padding:20px 0; }
 .room-option+.room-option { border-left:0; border-top:1px solid #1e283029; }
 .room-option h3 { margin:0; font-size:18px; }
 .room-option strong { font-size:25px; }
 .room-option dl>div+div { margin-top:3px; }
 .room-comparison-note { margin-bottom:28px; }
 .room-shared { grid-template-columns:1fr; gap:28px; }
 .site-wrap .room-shared>figure>img { aspect-ratio:3/2; max-height:50svh!important; }
 .site-wrap .practical-section .data-list>div { grid-template-columns:1fr; gap:7px; padding:18px 0; }
 .site-wrap .practical-section .data-list dd { margin:0; }
 /* Give short descriptions a full line under the title instead of a narrow side column. */
 .promise-overview .stay-facts a { grid-template-columns:60px minmax(0,1fr); gap:12px 16px; padding:24px 0; }
 .promise-overview .stay-facts .feature-illustration { width:60px; height:54px; grid-row:1; }
 .promise-overview .stay-facts strong { grid-column:2; grid-row:1; font-size:18px; }
 .promise-overview .stay-facts a>span { grid-column:1/-1; grid-row:2; font-size:16px; line-height:1.9; letter-spacing:.015em; }
 .site-wrap main .data-list dt,
 .site-wrap .reservation-at-a-glance .data-list dt,
 .site-wrap main figcaption,
 .site-wrap main .fine-print,
 .site-wrap main .data-list small,
 .site-wrap .walk-hours small,
 .site-wrap .page-jump a { font-size:14px!important; line-height:1.85; }
 .site-wrap .reservation-at-a-glance .data-list dd { font-size:16px; }
 .site-wrap main p { overflow-wrap:break-word; }
}

/* Directional links invert on dark surfaces and photography. */
body :is(.photo-cta,.folio-air,.site-footer,.opening-scene,.journal-book,.button-primary),
body.has-detail-hero .site-header,
body.page-index .site-header,
.mobile-booking a:last-child {
 --arrow-surface:#fff; --arrow-ink:#1e2830; --arrow-hover:#e8edef; --arrow-border:#fff; --arrow-border-width:1px;
}
.photo-cta .button-primary {
 --arrow-surface:#1e2830; --arrow-ink:#fff; --arrow-hover:#34444f; --arrow-border:#1e2830; --arrow-border-width:0;
}
.site-wrap .reserve-banner.photo-cta .button-primary { border-radius:10px; }
body a .link-arrow {
 display:inline-grid; place-items:center; flex:0 0 auto;
 width:var(--link-arrow-size,40px); height:var(--link-arrow-size,40px);
 padding:0; margin:0; border:var(--arrow-border-width,0) solid var(--arrow-border,transparent); border-radius:50%;
 background:var(--arrow-surface,#1e2830); color:var(--arrow-ink,#fff); vertical-align:middle;
 line-height:1; letter-spacing:0; transform:none;
 transition:background .2s;
}
body a .link-arrow .arrow-icon { width:20px; height:20px; color:inherit; }
body a .link-arrow-external .arrow-icon { transform:rotate(-45deg); }
body a .link-arrow-down .arrow-icon { transform:rotate(90deg); }
body a .link-arrow-up .arrow-icon { transform:rotate(-90deg); }
body a:hover .link-arrow { background:var(--arrow-hover,#34444f); color:var(--arrow-ink,#fff); transform:none; }
.site-wrap .site-footer .back-top,
.site-wrap .site-footer .back-top:hover { background:transparent; color:#fff; border:0; border-radius:0; }
body .text-link,body .story-link { align-items:center; }
.page-jump a { gap:12px; }
.data-list dd a:has(.link-arrow),.footer-bottom a:has(.link-arrow) { display:inline-flex; align-items:center; gap:12px; }
.data-list dd a .link-arrow,.footer-bottom a .link-arrow { --link-arrow-size:32px; }
.menu-dialog nav a:has(.link-arrow) { display:flex; align-items:center; justify-content:space-between; gap:16px; }
@media(max-width:720px) {
 body a .link-arrow { --link-arrow-size:32px; }
 body a .link-arrow .arrow-icon { width:18px; height:18px; }
 .mobile-booking a:last-child { gap:10px; padding:0 12px; }
 .mobile-booking a .link-arrow { --link-arrow-size:28px; }
}
@media(prefers-reduced-motion:reduce) {
 body a .link-arrow { transition:none; }
}

/* Footer navigation stays quiet against the dark paper. */
.site-footer .footer-social {
 --arrow-surface:transparent; --arrow-ink:#fff; --arrow-border:#fff; --arrow-border-width:1px; --arrow-hover:#ffffff14;
}
.site-wrap .site-footer .footer-breadcrumb {
 position:static; padding:0 0 24px; margin:0 0 40px;
 color:#fff; font-size:14px; line-height:1.9;
 border-bottom:1px solid #ffffff38;
}
.site-footer .footer-breadcrumb span { margin:0 12px; }
/* Section boundaries are defined by their background, without a horizontal rule. */
.site-wrap main > :is(section,.paper-band) {
 border-block:0!important;
}
@media(min-width:721px) {
 .site-wrap .site-header { display:none; }
}
@media(max-width:720px) {
 .site-wrap .site-footer .footer-breadcrumb { margin-bottom:32px; padding-bottom:22px; }
 .site-footer .footer-breadcrumb span { margin:0 8px; }
}

/* Keep the town introduction in sentences and short, natural phrases. */
.page-town .town-intro-copy .copy-sentence { display:block; }
.page-town .town-intro-copy .copy-phrase { display:inline-block; max-width:100%; }

/* Round inset photographs; full-width photographic sections keep square edges. */
.site-wrap main img:not(.story-illustration,.feature-illustration,.opening-scene img,.detail-hero img,.photo-cta img,.town-scene img),
.site-wrap main .gallery-viewport {
 border-radius:10px;
}

/* Keep every photo/overlay layer square, including the bottom of parallax titles. */
.site-wrap main :is(.opening-scene,.detail-hero,.photo-cta,.town-scene),
.site-wrap main :is(.opening-scene,.detail-hero,.photo-cta,.town-scene) :is(img,.parallax-window,figure),
.site-wrap main :is(.opening-scene,.detail-hero,.photo-cta,.town-scene)::before,
.site-wrap main :is(.opening-scene,.detail-hero,.photo-cta,.town-scene)::after {
 border-radius:0;
}

/* The map stays within the address column on desktop and mobile. */
.page-access .access-map { width:100%; min-width:0; border-radius:10px; overflow:hidden; background:#edf0ed; }
.page-access .access-map iframe { display:block; width:100%; height:340px; max-height:60svh; border:0; }
@media(max-width:720px) {
 .page-access .access-map iframe { height:300px; }
}

/* Japanese prose wraps at phrase boundaries where supported, with a safe fallback. */
.site-wrap :is(main p,main dd,main li,main summary,main h3,main figcaption,.footer-bottom p) {
 word-break:normal;
 line-break:strict;
 text-wrap:pretty;
}
@supports (word-break:auto-phrase) {
 .site-wrap :is(main p,main dd,main li,main summary,main h3,main figcaption,.footer-bottom p) { word-break:auto-phrase; }
}
.site-wrap main .copy-sentence { display:block; }
.site-wrap main .copy-phrase { display:inline-block; max-width:100%; }
.site-wrap .page-jump { flex-wrap:wrap; }
.site-wrap .page-jump a { flex:0 0 auto; white-space:nowrap; }
.mobile-booking a { white-space:nowrap; }
@media(max-width:360px) {
 .mobile-booking a:last-child { gap:6px; padding:0 6px; font-size:12px; }
 .mobile-booking a:first-child { font-size:12px; }
}

/* Long facility notes need the full mobile column, not a narrow definition cell. */
@media(max-width:720px) {
 .page-onsen #spring .data-list>div,
 .page-stay #lounge .data-list>div { grid-template-columns:1fr; gap:6px; }
 .page-onsen #spring .data-list dd,
 .page-stay #lounge .data-list dd { margin:0; }
}

/* Breakfast is a supporting photograph, sized to show the whole meal at a glance. */
.page-stay .breakfast-story>figure {
 width:min(100%,640px,80vh);
 width:min(100%,640px,80svh);
 justify-self:start;
}
.page-stay .breakfast-story>figure .illustrated-photo>img:not(.story-illustration) {
 width:100%; height:auto; aspect-ratio:4/3;
 max-height:min(480px,60vh)!important;
 max-height:min(480px,60svh)!important;
 object-fit:contain;
}
.page-stay #breakfast .illustration-onsen-egg {
 --illustration-size:180px;
 --illustration-right:-14px;
 --illustration-bottom:-36px;
}
@media(max-width:720px) {
 .page-stay #breakfast .illustration-onsen-egg { --illustration-size:100px; --illustration-right:-8px; --illustration-bottom:-24px; }
}

/* Invitations before the footer read horizontally across every guest page. */
.site-wrap main :is(.photo-cta,.folio-welcome) h2.vertical-heading {
 display:block; writing-mode:horizontal-tb; width:auto; min-width:0;
 max-width:100%; padding:0; margin:0!important;
 font-size:clamp(28px,2.6vw,38px)!important;
 line-height:1.65; letter-spacing:.055em; text-align:left;
}
.site-wrap main :is(.photo-cta,.folio-welcome) h2.vertical-heading>span {
 display:block; writing-mode:horizontal-tb; white-space:normal;
 padding:0; text-wrap:balance;
}
.site-wrap main :is(.photo-cta,.folio-welcome) h2.vertical-heading>span:first-child::before {
 left:-.4em; right:auto; top:-.16em;
}
.site-wrap main .photo-cta h2.vertical-heading small {
 position:static; display:block; margin:14px 0 0; font-size:20px;
}
.page-town .site-wrap .quiet-night.photo-cta {
 grid-template-columns:minmax(0,1fr); gap:24px; justify-items:start; align-content:center; text-align:left;
}
.page-town .site-wrap .quiet-night.photo-cta::before {
 display:block; background:rgba(27,46,64,.68);
}
.page-town .site-wrap .quiet-night.photo-cta :is(h2,p,.text-link) {
 grid-column:1; grid-row:auto; margin:0;
}
.page-index .welcome-panel { padding:50px 8% 40px; justify-content:center; gap:28px; }
.page-index .welcome-panel :is(.welcome-phone,.welcome-hours) { margin-top:0; }
@media(max-width:720px) {
 .site-wrap main :is(.photo-cta,.folio-welcome) h2.vertical-heading { font-size:27px!important; }
 .page-town .site-wrap .quiet-night.photo-cta { display:grid; }
 .page-index .site-wrap .folio-welcome { grid-template-columns:minmax(0,1fr); gap:28px; }
 .page-index .site-wrap .folio-welcome .welcome-photo { grid-column:1; grid-row:1; }
 .page-index .site-wrap .welcome-panel h2 { grid-column:1; grid-row:2; }
 .page-index .site-wrap .welcome-panel .journal-book { grid-column:1; grid-row:3; }
 .page-index .site-wrap .welcome-phone { grid-column:1; grid-row:4; }
 .page-index .site-wrap .welcome-hours { grid-column:1; grid-row:5; }
 .site-wrap .next-chapter.photo-cta>a { gap:20px; }
}
@media(max-width:360px) {
 .site-wrap main :is(.photo-cta,.folio-welcome) h2.vertical-heading { font-size:24px!important; }
}

/* The same scroll progress controls the headline and its supporting caption. */
.detail-hero .page-title,
.opening-scene .opening-heading,
.opening-scene .opening-note {
 opacity:var(--title-scroll-opacity,1);
}
@media(prefers-reduced-motion:reduce) {
 .detail-hero .page-title,
 .opening-scene .opening-heading,
 .opening-scene .opening-note { opacity:1; }
}

/* Leave breathing room between section backgrounds and their contents. */
.site-wrap main :is(.split-copy,.bath-detail,.editorial-row,.breakfast-story,.walk-list,.reservation-layout),
.page-stay .site-wrap #dining {
 padding-block:120px;
}
.site-wrap main .practical-section,
.site-wrap main .room-details.practical-section { padding-block:88px; }
.site-wrap main :is(.sky-story-text,.photo-cta) { padding-block:96px; }
.page-index .site-wrap :is(.folio-source,.folio-table,.folio-air,.folio-morning) {
 padding-block:120px;
}
.page-index .site-wrap .welcome-panel { padding-block:72px; }
@media(max-width:720px) {
 .site-wrap main :is(.split-copy,.bath-detail,.editorial-row,.breakfast-story,.walk-list,.reservation-layout),
 .page-stay .site-wrap #dining,
 .page-index .site-wrap :is(.folio-source,.folio-table,.folio-air,.folio-morning) {
  padding-block:72px;
 }
 .site-wrap main .practical-section,
 .site-wrap main .room-details.practical-section { padding-block:64px; }
 .site-wrap main :is(.sky-story-text,.photo-cta) { padding-block:64px; }
 .page-index .site-wrap .welcome-panel { padding-block:56px; }
}

/* Mobile food stories show the meal before the heading and description. */
@media(max-width:720px) {
 .page-stay .site-wrap :is(#dining,#breakfast),
 .page-index .site-wrap :is(.folio-table,.folio-morning) {
  grid-template-columns:minmax(0,1fr);
 }
 .page-stay .site-wrap :is(#dining,#breakfast)>figure,
 .page-index .site-wrap .folio-table .table-main,
 .page-index .site-wrap .folio-morning>figure {
  grid-column:1; grid-row:1; width:100%; margin:0;
 }
 .page-stay .site-wrap :is(#dining,#breakfast)>h2,
 .page-index .site-wrap .folio-table>h2,
 .page-index .site-wrap .folio-morning .morning-reading {
  grid-column:1; grid-row:2; justify-self:center; margin:0!important;
 }
 .page-index .site-wrap .morning-reading h2 { margin:0!important; }
 .page-stay .site-wrap :is(#dining,#breakfast)>.section-copy,
 .page-index .site-wrap .folio-table .table-copy,
 .page-index .site-wrap .folio-morning>.journal-copy {
  grid-column:1; grid-row:3; max-width:none; padding-top:0;
 }
 .page-index .site-wrap .folio-table .table-detail {
  grid-column:1; grid-row:4; width:100%; margin:0;
 }
 .page-stay .site-wrap :is(#dining,#breakfast) figure img:not(.story-illustration),
 .page-index .site-wrap :is(.folio-table,.folio-morning) figure img:not(.story-illustration) {
  width:100%; height:auto; min-height:0; aspect-ratio:4/3!important; object-fit:contain; object-position:center;
 }
 .page-index .site-wrap .folio-table .table-detail .illustrated-photo {
  --illustration-right:-8px;
 }
 .page-stay .site-wrap #dining figcaption { padding-right:110px; }
 .site-wrap .detail-hero .page-title>p:last-child {
  font-size:15px;
  text-shadow:0 1px 3px #111c24e6,0 2px 8px #111c2499;
 }
 .site-wrap main :is(#dining,#breakfast,.folio-table,.folio-morning) h2.vertical-heading {
  display:block; writing-mode:horizontal-tb; width:100%; min-width:0; max-width:100%;
  padding:0; margin:0!important; justify-self:start;
  font-size:clamp(24px,6.7vw,28px)!important; line-height:1.65; letter-spacing:.055em;
  text-align:left;
 }
 .site-wrap main :is(#dining,#breakfast,.folio-table,.folio-morning) h2.vertical-heading>span {
  display:block; writing-mode:horizontal-tb; white-space:nowrap; padding:0;
 }
 .site-wrap main :is(#dining,#breakfast,.folio-table,.folio-morning) h2.vertical-heading>span:first-child::before {
  left:-.4em; right:auto; top:-.16em;
 }
 .page-index .site-wrap .folio-morning .morning-reading { width:100%; justify-self:start; }
}

/* Keep the dinner photograph in proportion to the surrounding copy on large screens. */
@media(min-width:721px) {
 .page-index .site-wrap .folio-table .table-main { width:100%; max-width:640px; justify-self:end; }
 .page-index .site-wrap .folio-table .table-main>img { width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; object-position:center; }
 .page-index .site-wrap .folio-table .table-detail { width:100%; max-width:320px; margin-right:0; }
}

/* The breakfast story pairs a quiet title column with a photograph and copy. */
@media(min-width:721px) {
 body.page-stay .site-wrap #main #breakfast {
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px 8%; align-items:start;
 }
 body.page-stay .site-wrap #main #breakfast>h2 {
  grid-column:1; grid-row:1/3; justify-self:center; margin:0!important;
 }
 body.page-stay .site-wrap #main #breakfast>figure {
  grid-column:2; grid-row:1; width:100%; max-width:640px; margin:0;
 }
 body.page-stay .site-wrap #main #breakfast>.section-copy {
  grid-column:2; grid-row:2; max-width:640px; margin:0;
 }
 body.page-stay .site-wrap #main #breakfast .illustration-onsen-egg {
  --illustration-size:clamp(140px,13vw,210px); --illustration-right:-14px; --illustration-bottom:-32px;
 }
 body.page-stay .site-wrap #main #breakfast figcaption { padding-right:120px; }
}

/* A clear booking invitation above the mobile booking bar. */
.booking-popup { position:fixed; z-index:80; right:24px; bottom:24px; width:324px; color:#fff; }
.booking-popup[hidden] { display:none; }
.booking-popup-link { display:block; position:relative; min-height:136px; overflow:hidden; border-radius:10px; background:#183747; color:#fff; box-shadow:0 8px 28px #10253155; }
.booking-popup-link>img { display:block; position:absolute; inset:0 0 0 auto; width:52%; height:100%; object-fit:cover; object-position:65% 58%; border-radius:0; -webkit-mask-image:linear-gradient(to right,transparent,#000 35%); mask-image:linear-gradient(to right,transparent,#000 35%); }
.booking-popup-copy { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:12px 16px; line-height:1.5; letter-spacing:.04em; color:#fff; }
.booking-popup-copy small { font-size:12px; color:#fff; }
.booking-popup-copy strong { font-size:21px; font-weight:600; margin:4px 0 8px; color:#fff; text-shadow:0 1px 3px #10253180; }
.booking-popup-copy>span { display:inline-flex; align-items:center; gap:10px; padding:6px 10px 6px 12px; border-radius:5px; background:transparent; color:#fff; font-size:14px; font-weight:600; }
.booking-popup-copy .link-arrow { --link-arrow-size:30px; flex-shrink:0; }
.booking-popup-close { position:absolute; right:-10px; top:-14px; width:36px; height:36px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:#fff5df; color:#183747; box-shadow:0 2px 10px #10253133; font:22px/1 sans-serif; cursor:pointer; }
.booking-popup :focus-visible { outline:3px solid #dcab68; outline-offset:3px; }
@media(max-width:720px) {
 .booking-popup { right:14px; bottom:calc(72px + env(safe-area-inset-bottom,0px)); width:min(270px,calc(100vw - 28px)); }
 .booking-popup-link { min-height:122px; }

 .booking-popup-copy { padding:10px 12px; }
 .booking-popup-copy strong { font-size:19px; margin:3px 0 6px; }
 .booking-popup-copy>span { font-size:13px; gap:7px; padding:5px 8px 5px 10px; }
 .booking-popup-close { right:-6px; top:-16px; }
}

/* Keep the welcome photograph inside the section, with room for its illustration. */
.page-index .site-wrap .folio-welcome {
 padding:96px 24px; gap:40px; align-items:center;
}
.page-index .site-wrap .folio-welcome .welcome-photo {
 width:100%; max-width:480px; justify-self:center; align-self:center;
 --illustration-size:200px;
}
.page-index .site-wrap .folio-welcome .welcome-photo>img:first-child {
 width:100%; height:auto; min-height:0; aspect-ratio:4/5;
}
.page-index .site-wrap .folio-welcome .welcome-panel { padding-block:24px; }
@media(max-width:720px) {
 .page-index .site-wrap .folio-welcome { padding:64px 0; gap:36px; }
 .page-index .site-wrap .folio-welcome .welcome-photo { max-width:360px; --illustration-size:140px; margin-bottom:20px; }
 .page-index .site-wrap .folio-welcome .welcome-photo>img:first-child { aspect-ratio:4/3; }
}

/* 2026-10-15 review: individual room introductions and quieter bath gallery. */
.room-type-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--line); margin:28px 0 0; }
.room-type-nav a { display:flex; flex-direction:column; gap:8px; padding:20px; font-size:18px; }
.room-type-nav a+a { border-left:1px solid var(--line); }
.room-type-nav a:hover { background:#1e283009; }
.room-type-nav span { font-size:14px; color:var(--muted); }
.room-type-card { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:5%; padding:40px 0; border-bottom:1px solid var(--line); scroll-margin-top:100px; }
.room-type-intro .eyebrow { font-size:12px; letter-spacing:.16em; margin:0 0 14px; }
.room-type-intro h3 { font-size:28px; font-weight:400; margin:0 0 16px; }
.room-type-intro>p:last-child { font-size:16px; line-height:1.9; }
.room-type-facts .data-list { margin:0 0 20px; }
.room-type-facts .data-list>div { grid-template-columns:1fr 1fr; gap:16px; }
.room-type-facts .text-link { max-width:100%; }
.page-onsen .gallery-controls { justify-content:flex-end; }
@media(max-width:640px) {
 .room-type-nav a { padding:16px 8px; font-size:16px; }
 .room-type-nav span { font-size:12px; }
 .room-type-card { grid-template-columns:minmax(0,1fr); gap:20px; padding:28px 0; }
 .room-type-intro h3 { font-size:24px; }
}

/* Supplied room photography, grouped by the owner's A/B/C/D folders. */
.room-photo-gallery { min-width:0; }
.room-photo-gallery .room-type-photo { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; border-radius:6px; }
.room-photo-controls { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.room-photo-controls button { display:block; flex:0 0 84px; width:84px; padding:4px; border:0; background:transparent; cursor:pointer; border-radius:3px; }
.room-photo-controls button[aria-pressed="false"] img { filter:brightness(.5); }
.room-photo-controls img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:0; }
.room-type-description { min-width:0; align-self:center; }
.room-type-description .room-type-facts { margin-top:24px; }
@media(max-width:800px) {
 .room-type-card { grid-template-columns:minmax(0,1fr); gap:24px; }
}

@media(max-width:640px) {
 .room-type-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .room-type-nav a:nth-child(3) { border-left:0; }
 .room-type-nav a:nth-child(n+3) { border-top:1px solid var(--line); }
}

/* Keep the sidebar reservation link free of horizontal rules. */
.brand-rail { border-right:0; }
.brand-rail .rail-nav a:last-child,
.brand-rail .rail-menu { border-top:0; }
.brand-rail .rail-nav a:last-child { margin-top:0; padding-top:0; }
.brand-rail .rail-phone { flex-direction:row; gap:6px; }
.rail-phone-icon { display:block; width:13px; height:13px; flex:0 0 13px; }

/* Supplied night image beside the open-air bath story. */
.site-wrap main .sky-story-image { align-items:center; padding-block:80px; }
.site-wrap main .sky-story-image .sky-photo { grid-row:1/3; width:100%; max-width:620px; margin:0 auto; }
.site-wrap main .sky-story-image .sky-photo img { display:block; width:100%; height:auto; min-height:0; aspect-ratio:auto; }
/* Show only the photograph inside the supplied 1272 x 1370 framed image. */
.site-wrap main .sky-story-image .sky-photo-cropped {
 position:relative; aspect-ratio:1130/1280; overflow:hidden; border-radius:16px;
}
.site-wrap main .sky-story-image .sky-photo-cropped img {
 position:absolute; width:calc(100% * 1272 / 1130); max-width:none;
 left:calc(-100% * 88 / 1130); top:calc(-100% * 22 / 1280);
 border-radius:0;
}
.site-wrap main .sky-story-image h2 { align-self:end; }
.site-wrap main .sky-story-image>p { align-self:start; }
@media(max-width:720px) {
 .site-wrap main .sky-story-image { display:block; padding:48px 26px; }
 .site-wrap main .sky-story-image h2 { margin:32px auto; }
}


/* One shared canvas; the sticky rail ends with the content above the footer. */
/* Fill each ink-paper surface with one image so tile edges never meet. */
.folio-air,.site-footer,.quiet-night,.site-wrap .room-table thead {
 background-size:cover;
 background-repeat:no-repeat;
 background-position:center;
}
.site-footer-wrap { margin-left:0; }
.site-footer .footer-top { grid-template-columns:minmax(260px,1fr) 1fr 1.4fr; }
.site-footer .footer-brand { min-width:0; }
.site-footer .footer-brand .footer-social {
 display:inline-flex; align-items:center; gap:8px; margin-top:12px;
 font-size:11px; line-height:1.9;
}
.site-footer .instagram-icon { display:block; flex:none; width:18px; height:18px; }
.site-footer .footer-contact {
 margin:20px 0 0; font-size:11px; line-height:1.9; letter-spacing:.025em;
 color:#e2e6e8; overflow-wrap:break-word;
}
@media(max-width:1100px) {
 .site-footer .footer-top { grid-template-columns:minmax(260px,1fr) 1fr; }
}
@media(max-width:720px) {
 .site-footer .footer-top { grid-template-columns:minmax(0,1fr); }
 .site-footer .footer-contact { font-size:10px; }
}
@media (min-width:721px) {
 .site-body {
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  align-items:start;
  background:#f3f1eb var(--pale-paper) repeat 0 0 / 768px 512px;
 }
 .site-body > .brand-rail {
  position:sticky;
  inset:0 auto auto 0;
  height:100vh;
  height:100dvh;
  background:transparent;
  border:0;
 }
 .site-body > .site-wrap { min-width:0; margin-left:0; }
 .site-body .stay-journal,
 .site-body .paper-band,
 .site-body .folio-source,
 .site-body .page-title,
 .site-body .room-details,
 .site-body .breakfast-story,
 .site-body .walk-list,
 .site-body .information-section,
 .site-body .address-block,
 .site-body .reservation-at-a-glance,
 .site-body .preparation-links { background:transparent; }
 .page-onsen .site-body {
  background:#253e53 url('images/onsen-mineral-texture.webp') repeat 0 0 / 1100px 1100px;
  background-blend-mode:multiply;
 }
 .page-onsen .site-body main { background:transparent; }

}


/* Floating white navigation panel, with the existing footer-bound sticky motion. */
@media(min-width:721px) {
 .site-body > .brand-rail {
  top:14px;
  margin:14px 0 14px 14px;
  height:calc(100vh - 28px);
  height:calc(100dvh - 28px);
  background:#fff;
  color:#1e2830;
  border-radius:20px;
  scrollbar-width:thin;
 }
 .site-body > .brand-rail .brand-official { margin-top:30px; }
}

/* Inset the wide editorial panels into the shared background. */
.site-wrap main :is(.folio-air,.sky-story,.photo-cta,.town-scene) {
 margin-inline:4%;
 border-radius:24px;
 overflow:clip;
}
.site-wrap main :is(.folio-air,.sky-story,.photo-cta) { margin-block:24px; }
@media(max-width:720px) {
 .site-wrap main :is(.folio-air,.sky-story,.photo-cta,.town-scene) {
  margin-inline:14px;
  border-radius:18px;
 }
 .site-wrap main :is(.folio-air,.sky-story,.photo-cta) { margin-block:18px; }
}


/* The home photograph spans the screen beneath the floating navigation panel. */
@media(min-width:721px) {
 .has-detail-hero .site-wrap .detail-hero {
  width:calc(100% + var(--rail));
  margin-left:calc(-1 * var(--rail));
 }
 .has-detail-hero .site-wrap .detail-hero > :is(.breadcrumb,.page-title) {
  margin-left:var(--rail);
 }
}
@media(min-width:721px) {
 .page-index .site-body { grid-template-columns:calc(var(--rail) + 28px) minmax(0,1fr); }
 .page-index .site-wrap .opening-scene {
  width:calc(100% + var(--rail) + 28px);
  margin-left:calc(-1 * (var(--rail) + 28px));
  height:100vh;
  height:100dvh;
  min-height:0;
  max-height:none;
 }
 .page-index .site-wrap .opening-scene .opening-note {
  left:calc(var(--rail) + 28px + 5%);
 }
}


/* Keep feature labels and descriptions together, with consistent nested text. */
.promise-overview { margin-top:64px; }
.promise-overview .promise-intro { font-size:30px; line-height:1.6; }
@media(max-width:720px) {
 .promise-overview { margin-top:48px; }
 .promise-overview .promise-intro { font-size:24px; }
}
.promise-overview .stay-facts a { row-gap:6px; }
.promise-overview .stay-facts strong { line-height:1.55; letter-spacing:.025em; }
.promise-overview .stay-facts a>span {
 font-size:16px;
 line-height:1.75;
 letter-spacing:.02em;
 font-kerning:normal;
 font-feature-settings:"palt" 1;
}
.promise-overview .stay-facts a>span .phrase {
 font-size:inherit;
 line-height:inherit;
 letter-spacing:inherit;
}
/* Compact Japanese reading copy while preserving the vertical display headings. */
body:not(.localized) .site-wrap main :is(.journal-copy,.section-copy,.room-intro,.air-reading,.town-reading,.reservation-content) > p:not(.journal-aside,.eyebrow,.fine-print),
body:not(.localized) .site-wrap main :is(.split-copy,.editorial-row,.breakfast-story,.walk-list) p:not(.eyebrow,.journal-aside,.fine-print,.lead),
body:not(.localized) .site-wrap main .sky-story > p {
 line-height:1.85;
 letter-spacing:.025em;
 font-kerning:normal;
}
body:not(.localized) .site-wrap main .journal-copy > p + p { margin-top:.85em; }


/* Fade the rail upward as the footer enters; bring it back above the footer. */
.section-reveal-pending { opacity:0; }
@media(prefers-reduced-motion:reduce) {
 .section-reveal-pending { opacity:1; }
}
@media print {
 .section-reveal-pending { opacity:1; }
}
@media(min-width:721px) {
 .site-body > .brand-rail {
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  transition:opacity .35s ease, transform .35s ease, visibility 0s;
 }
 .site-body > .brand-rail.is-footer-hidden {
  opacity:0;
  transform:translateY(-28px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease, visibility 0s .35s;
 }
}
@media(prefers-reduced-motion:reduce) {
 .site-body > .brand-rail,
 .site-body > .brand-rail.is-footer-hidden { transition:none; transform:none; }
}

/* Supplied town photography: generous images beside each matching place. */
.page-town .walk-list article.walk-stop-with-photo {
 grid-template-columns:36px minmax(0,1fr) minmax(240px,42%);
 gap:28px; align-items:center;
}
.page-town .walk-stop-with-photo .walk-photo {
 display:block; width:100%; height:auto; aspect-ratio:3/2;
 object-fit:cover; border-radius:16px; margin:0;
}
.page-town .town-excursions { padding-top:40px; }
.page-town .excursion-intro { max-width:44em; margin:0 0 24px; }
.page-town .town-woodland { margin:48px 0 0; }
.page-town .town-woodland .walk-photo {
 display:block; width:100%; height:auto; max-height:480px; object-fit:cover; border-radius:16px;
}
.page-town .town-woodland figcaption { margin-top:16px; font-size:14px; line-height:1.8; }
@media(max-width:900px) {
 .page-town .walk-list article.walk-stop-with-photo { grid-template-columns:26px minmax(0,1fr); gap:16px; }
 .page-town .walk-stop-with-photo .walk-photo { grid-column:2; grid-row:2; }
}
@media(max-width:540px) {
 .page-town .walk-stop-with-photo .walk-photo { grid-column:1 / -1; border-radius:12px; }
 .page-town .town-woodland { margin-top:30px; }
 .page-town .town-woodland .walk-photo { border-radius:12px; }
}

.page-town .town-excursion-content { min-width:0; }

/* Three unused photographs form a staggered introduction to the town walk. */
.page-town .site-wrap main .town-intro-with-photos {
 grid-template-columns:140px minmax(0,1.25fr) minmax(250px,1fr);
 gap:5%; align-items:center;
}
.page-town .town-intro-with-photos .town-intro-copy { min-width:0; }
.page-town .site-wrap .town-intro-with-photos .town-intro-photos {
 display:grid; gap:42px; width:100%; max-width:none; min-width:0;
}
.page-town .town-intro-photos figure { width:78%; margin:0; }
.page-town .town-intro-photos figure:nth-child(even) { justify-self:end; }
.page-town .town-intro-photos img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
@media(min-width:721px) and (max-width:1100px) {
 .page-town .site-wrap main .town-intro-with-photos { grid-template-columns:110px minmax(0,1fr); gap:40px 6%; }
 .page-town .site-wrap .town-intro-with-photos .town-intro-photos { grid-column:1 / -1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding-bottom:28px; }
 .page-town .town-intro-photos figure { width:100%; }
 .page-town .town-intro-photos figure:nth-child(even) { transform:translateY(28px); }
}
@media(max-width:720px) {
 .page-town .site-wrap main .town-intro-with-photos { grid-template-columns:105px minmax(0,1fr); gap:25px 24px; align-items:start; }
 .page-town .town-intro-with-photos .town-intro-copy,
 .page-town .town-intro-with-photos .walk-intro { display:contents; }
 .page-town .site-wrap .town-intro-with-photos .town-intro-photos { display:grid; grid-column:1 / -1; gap:24px; margin-top:12px; }
 .page-town .town-intro-photos figure { width:82%; }
}

/* A plain white surface for the reservation information card. */
.page-reserve .site-wrap .reservation-at-a-glance { background:#fff; }

/* Independent indoor and open-air bath photo galleries. */
.page-onsen .bath-floor-label { margin:0 0 22px; font-size:26px; font-weight:400; line-height:1.5; letter-spacing:.04em; }
.page-onsen .bath-photo-section .gallery-controls > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.page-onsen .bath-photo-section .gallery-viewport img.gallery-photo-portrait { object-fit:contain; object-position:center; background:#1b2e40; }
.page-onsen .bath-photo-section .bath-gallery-description { margin:24px 0 0; max-width:44em; line-height:1.85; }
.page-onsen .site-wrap main .outdoor-bath-gallery { background:#1b2e40; border-radius:24px; margin-inline:4%; padding-inline:5%; }
@media(max-width:720px) {
 .page-onsen .bath-floor-label { font-size:20px; margin-bottom:16px; }
 .page-onsen .bath-photo-section .gallery-controls > div { gap:8px; }
 .page-onsen .bath-photo-section .gallery-button { width:34px; height:34px; font-size:12px; }
 .page-onsen .site-wrap main .outdoor-bath-gallery { margin-inline:14px; padding-inline:22px; border-radius:18px; }
 .page-onsen .bath-photo-section .bath-gallery-description { font-size:15px; }
}
@media(max-width:720px) {
 .page-onsen .bath-photo-section .gallery-controls > div { display:grid; grid-template-columns:repeat(3,34px); }
}

/* Supplied amenity photographs. */
.amenity-photos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:26px 0 36px; }
.site-wrap .amenity-photos img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:16px; }
@media(max-width:600px) { .amenity-photos { grid-template-columns:1fr; gap:18px; margin:22px 0 28px; } }

@media(max-width:600px) { .room-photo-controls button { flex-basis:64px; width:64px; } }

@media(max-width:720px) { .page-index .folio-source .source-image .illustrated-photo>img:first-child { object-position:72% center; } }

/* Reservation link uses the same navy as the booking panel. */
.brand-rail .rail-nav a.rail-booking {
 background:#183747;
 color:#fff;
 border:0;
 border-radius:6px;
 padding:8px 4px;
}
.brand-rail .rail-nav a.rail-booking:hover,
.brand-rail .rail-nav a.rail-booking:focus-visible { background:#24495b; color:#fff; }

.site-wrap main .photo-cta .official-booking-cta h2.vertical-heading small {
 margin:0 0 16px; font-size:clamp(15px,1.4vw,20px); line-height:1.6;
}
.official-booking-cta .circle-arrow { flex-shrink:0; }

/* Instagram and LINE beside the phone number in the sidebar and footer. */
.brand-rail .rail-social {
 display:flex; justify-content:center; gap:12px; width:100%; margin:-12px 0 24px;
}
.brand-rail .rail-social a {
 display:grid; place-items:center; width:38px; height:38px;
 color:#1e2830; border:1px solid #1e283033; border-radius:50%;
 transition:background-color .2s, color .2s, border-color .2s;
}
.brand-rail .rail-social a:hover,
.brand-rail .rail-social a:focus-visible { background:#1e2830; color:#fff; border-color:#1e2830; }
.brand-rail .rail-social svg { display:block; width:18px; height:18px; }
.site-footer .footer-brand .footer-social + .footer-social { margin-left:24px; }
.site-footer .line-icon { display:block; flex:none; width:18px; height:18px; }
@media(min-width:721px) and (max-height:760px) {
 .brand-rail .rail-social { margin-bottom:16px; }
 .brand-rail .rail-social a { width:34px; height:34px; }
}
@media(prefers-reduced-motion:reduce) {
 .brand-rail .rail-social a { transition:none; }
}