/* Vertical titles anchor a photo or a reading column; they do not create empty rows. */
h2.vertical-heading { font-size: clamp(35px, 3vw, 44px); gap: 20px; }
h3.vertical-heading { font-size: 30px; gap: 18px; }
.section-copy { min-width: 0; }
.section-copy>p+p { margin-top: 20px; }
.section-copy>p:not(.fine-print) { font-size: 15px; line-height: 2; }
/* Photo stories: title beside the photograph, copy beneath that same photograph. */
.editorial-row, .editorial-row.reversed {
  display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: start;
  gap: 28px 9%; margin: 0 8%; padding: 80px 0;
}
.editorial-row>figure, .editorial-row.reversed>figure {
  grid-column: 1; grid-row: 1; width: 100%; max-width: none; align-self: start;
}
.editorial-row>h2.vertical-heading { grid-column: 2; grid-row: 1/3; margin: 12px auto 0; }
.editorial-row>.section-copy, .editorial-row.reversed>.section-copy {
  grid-column: 1; grid-row: 2; max-width: 38em; margin: 0; padding: 0;
}
.editorial-row.reversed { grid-template-columns: 180px minmax(0, 1fr); }
.editorial-row.reversed>figure { grid-column: 2; }
.editorial-row.reversed>h2.vertical-heading { grid-column: 1; }
.editorial-row.reversed>.section-copy { grid-column: 2; }
.editorial-row figure img { aspect-ratio: 3/2; }
/* Home: a close photograph, vertical title, and a separate reading measure. */
.spring-letter {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .85fr); gap: 5%;
  padding: 110px 7%; align-items: center;
}
.spring-reading { display: contents; }
.spring-title { grid-column: 2; grid-row: 1; }
.spring-title .vertical-heading { margin: 22px 0 0; }
.spring-copy { grid-column: 3; grid-row: 1; margin: 0; padding: 0; max-width: 26em; }
.spring-detail-photo { grid-column: 1; grid-row: 1; margin: 0; width: 100%; }
.spring-letter>.chapter-name { top: 48px; left: 7%; writing-mode: horizontal-tb; }
.spring-detail-photo img { aspect-ratio: 3/4; }
.stay-notebook { margin: 0 7%; padding: 15px 0 90px; grid-template-columns: 180px minmax(0,1fr); gap: 60px 9%; }
.notebook-heading { padding-top: 0; }
.notebook-heading .vertical-heading { margin: 28px auto 0; }
.notebook-dinner>div {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 38px;
  max-width: none; padding: 0;
}
.notebook-dinner .small-title { grid-column: 1; grid-row: 1; }
.notebook-dinner h3.vertical-heading { grid-column: 2; grid-row: 1/4; margin: 0; }
.notebook-dinner>div>p:not(.small-title) { grid-column: 1; grid-row: 2; margin: 0; align-self: start; }
.notebook-dinner .story-link { grid-column: 1; grid-row: 3; align-self: start; }
.stay-notebook .notebook-room {
  display: grid; grid-template-columns: minmax(0,1fr) 180px; gap: 28px 9% !important;
  margin: 35px 0 0; align-items: start;
}
.notebook-room>figure { grid-column: 1; grid-row: 1; width: 100%; margin: 0; }
.notebook-room>h3.vertical-heading { grid-column: 2; grid-row: 1/3; margin: 10px auto 0; }
.notebook-room>.section-copy { grid-column: 1; grid-row: 2; max-width: 36em; padding: 0; margin: 0 !important; }
/* A dark chapter balances the vertical copy against a single tall photograph. */
.night-photo-story {
  margin: 0 0 100px; padding: 65px 7%; display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 22px 8%; align-items: start;
}
.night-photo-story>.night-photo { grid-column: 1; grid-row: 1/4; margin: 0; align-self: stretch; }
.night-photo-story .night-photo img { height: calc(100% - 36px); min-height: 450px; aspect-ratio: auto; object-fit: cover; }
.night-photo-story .night-photo figcaption { padding: 12px 0 0; }
.night-photo-story>.chapter-name { grid-column: 2; grid-row: 1; }
.night-photo-story>h2.vertical-heading { grid-column: 2; grid-row: 2; margin: 0 auto; font-size: 38px; }
.night-photo-story>div { grid-column: 2; grid-row: 3; align-self: start; padding: 0; }
.morning-chapter {
  display: grid; grid-template-columns: minmax(0,1fr) 180px; gap: 28px 9%;
  align-items: start; padding: 0 8% 100px;
}
.morning-chapter>.morning-heading:first-child { grid-column: 2; grid-row: 1/3; align-self: start; }
.morning-chapter .vertical-heading { margin: 26px auto 0; }
.morning-chapter>.morning-photos { grid-column: 1; grid-row: 1; margin: 0; }
.morning-chapter>.morning-copy { grid-column: 1; grid-row: 2; max-width: 34em; }
.morning-photos .morning-meal { width: 100%; }
.morning-photos .morning-meal img { aspect-ratio: 3/2; }
.journey-desk { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 26px 5%; padding: 70px 7% 40px; }
.journey-desk>div:first-child { display: contents; }
.journey-desk .small-title { grid-column: 2; grid-row: 1; margin: 0; }
.journey-desk h2.vertical-heading { grid-column: 2; grid-row: 2; margin: 0 auto; font-size: 35px; }
.journey-desk .desk-lobby { grid-column: 1; grid-row: 1/3; width: 100%; margin: 0; align-self: center; }
.journey-desk .desk-lobby img { aspect-ratio: 3/4; }
.journey-desk .journey-booking { grid-column: 3; grid-row: 1/3; margin: 0; }
.journey-desk nav { grid-column: 1/-1; grid-row: 3; margin-top: 20px; }
/* Information sections put the label beside the information, like a margin heading. */
.room-details, .bathing-info, .information-section, .faq-section, .reservation-check {
  display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: start;
  gap: 8%; padding-top: 75px; padding-bottom: 75px;
}
.room-details>h2.vertical-heading, .bathing-info>h2.vertical-heading,
.information-section>h2.vertical-heading, .faq-section>h2.vertical-heading,
.reservation-check>h2.vertical-heading { margin: 0 auto; font-size: 34px; gap: 18px; }
.room-details>.section-copy, .bathing-info>.section-copy,
.information-section>.section-copy, .faq-section>.section-copy,
.reservation-check>.section-copy { width: 100%; max-width: none; }
.section-copy .data-list>div:first-child { padding-top: 0; }
.section-copy .text-link { max-width: 100%; }
.access-section { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 8%; align-items: start; }
.access-section .section-heading { display: contents; }
.access-section .section-heading>div { grid-column: 1; }
.access-section h2.vertical-heading { font-size: 34px; gap: 18px; margin: 0 auto; }
.access-section .access-grid { grid-column: 2; grid-template-columns: 1fr; gap: 36px; }
.access-section .address-block { padding: 30px; border-left: 0; }
.reservation-at-a-glance { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 26px; padding: 28px; }
.reservation-at-a-glance h2.vertical-heading { font-size: 26px; gap: 12px; margin: 0; }
.reservation-at-a-glance .data-list>div { grid-template-columns: 1fr; gap: 5px; }
.next-chapter { padding-top: 45px; padding-bottom: 45px; }
.next-chapter>a { justify-content: center; gap: clamp(65px,15vw,230px); }
.next-chapter h2.vertical-heading { font-size: 30px; }
/* The tablet switches early rather than leaving a narrow text column. */
@media (max-width:1100px) and (min-width:721px) {
  .spring-letter { grid-template-columns: minmax(0,1fr) auto; gap: 30px 8%; }
  .spring-copy { grid-column: 1; grid-row: 2; max-width: none; }
  .spring-title { grid-row: 1/3; }
  .editorial-row,.editorial-row.reversed { grid-template-columns: minmax(0,1fr) 125px; gap: 26px 7%; }
  .editorial-row.reversed { grid-template-columns: 125px minmax(0,1fr); }
  .editorial-row>h2.vertical-heading { font-size: 35px; gap: 16px; }
  .stay-notebook,.morning-chapter { grid-template-columns: 125px minmax(0,1fr); gap: 30px 7%; }
  .morning-chapter,.stay-notebook .notebook-room { grid-template-columns: minmax(0,1fr) 125px; }
  .notebook-dinner>div { display: block; }
  .notebook-dinner h3.vertical-heading { float: right; margin: 0 0 20px 25px; font-size: 25px; }
  .notebook-dinner .story-link { clear: both; }
  .night-photo-story { gap: 20px 6%; }
  .night-photo-story>h2.vertical-heading { font-size: 29px; gap: 14px; }
  .journey-desk { grid-template-columns: minmax(0,1fr) auto; gap: 25px 8%; }
  .journey-desk .journey-booking { grid-column: 1/-1; grid-row: 3; }
  .journey-desk nav { grid-row: 4; }
  .room-details,.bathing-info,.information-section,.faq-section,.reservation-check,.access-section { grid-template-columns: 105px minmax(0,1fr); gap: 6%; }
  .reservation-layout { grid-template-columns: 1fr; }
}
@media (max-width:720px) {
  h2.vertical-heading { font-size: 30px; gap: 15px; }
  h3.vertical-heading { font-size: 25px; gap: 14px; }
  .editorial-row,.editorial-row.reversed { display: grid; grid-template-columns: minmax(0,1fr) 92px; gap: 25px 22px; margin: 0 26px; padding: 48px 0; }
  .editorial-row>figure,.editorial-row.reversed>figure { grid-column: 1; grid-row: 1; }
  .editorial-row>h2.vertical-heading { grid-column: 2; grid-row: 1; margin: 0 auto; font-size: 29px; gap: 14px; }
  .editorial-row>.section-copy,.editorial-row.reversed>.section-copy { grid-column: 1/-1; grid-row: 2; }
  .editorial-row figure img { aspect-ratio: 3/4 !important; min-height: 260px; object-fit: cover; }
  .spring-letter { grid-template-columns: minmax(0,1fr) 112px; gap: 26px 20px; padding: 70px 26px 65px; }
  .spring-letter>.chapter-name { position: static; grid-column: 1/-1; grid-row: 1; margin: 0; }
  .spring-detail-photo { grid-column: 1; grid-row: 2; width: 100%; margin: 0; align-self: center; }
  .spring-detail-photo img { min-height: 300px; aspect-ratio: 3/5; object-fit: cover; }
  .spring-title { grid-column: 2; grid-row: 2; }
  .spring-title .small-title { font-size: 10px; }
  .spring-title h2.vertical-heading { font-size: 28px; gap: 15px; margin: 20px auto 0; }
  .spring-copy { grid-column: 1/-1; grid-row: 3; margin: 0; max-width: none; }
  .stay-notebook { display: grid; grid-template-columns: 1fr; margin: 0 26px; padding: 0 0 65px; gap: 25px; }
  .notebook-heading { grid-column: 1; grid-row: 1; display: flex; align-items: start; justify-content: space-between; margin: 0; }
  .notebook-heading .chapter-name { writing-mode: vertical-rl; margin-top: 4px; }
  .notebook-heading .vertical-heading { margin: 0 20px 0 0; font-size: 32px; }
  .notebook-dinner { grid-column: 1; grid-row: 2; width: 100%; margin: 0 !important; }
  .notebook-dinner>div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 24px; margin-top: 28px; }
  .notebook-dinner h3.vertical-heading { margin: 0; font-size: 24px; gap: 12px; }
  .notebook-dinner>div>p:not(.small-title) { font-size: 14px; line-height: 1.95; }
  .notebook-dinner .story-link { gap: 12px; font-size: 12px; }
  .stay-notebook .notebook-room { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: minmax(0,1fr) 92px; gap: 25px 22px !important; margin: 40px 0 0; }
  .notebook-room>figure { width: 100%; grid-column: 1; grid-row: 1; margin: 0; }
  .notebook-room figure img { aspect-ratio: 3/4; min-height: 270px; object-fit: cover; }
  .notebook-room>h3.vertical-heading { grid-column: 2; grid-row: 1; margin: 0 auto; font-size: 25px; gap: 14px; }
  .notebook-room>.section-copy { grid-column: 1/-1; grid-row: 2; }
  .night-photo-story { margin: 0 0 65px; padding: 32px 26px; grid-template-columns: minmax(0,1fr) auto; gap: 25px 20px; }
  .night-photo-story>.chapter-name { grid-column: 1/-1; grid-row: 1; }
  .night-photo-story>.night-photo { grid-column: 1; grid-row: 2; }
  .night-photo-story .night-photo img { height: 280px; min-height: 0; aspect-ratio: auto; object-position: 50% center; }
  .night-photo-story .night-photo figcaption { font-size: 9px; padding-top: 10px; }
  .night-photo-story>h2.vertical-heading { grid-column: 2; grid-row: 2; margin: 0; font-size: 26px; gap: 11px; }
  .night-photo-story>div { grid-column: 1/-1; grid-row: 3; }
  .morning-chapter { display: grid; grid-template-columns: minmax(0,1fr) 112px; gap: 26px 20px; padding: 0 26px 65px; }
  .morning-chapter>.morning-heading:first-child { grid-column: 2; grid-row: 1; }
  .morning-chapter .chapter-name { font-size: 10px; }
  .morning-chapter h2.vertical-heading { font-size: 29px; gap: 15px; margin: 20px auto 0; }
  .morning-chapter>.morning-photos { grid-column: 1; grid-row: 1; align-self: center; width: 100%; }
  .morning-photos .morning-meal img { aspect-ratio: 3/4; min-height: 280px; object-fit: cover; }
  .morning-chapter>.morning-copy { grid-column: 1/-1; grid-row: 2; }
  .journey-desk { display: grid; grid-template-columns: minmax(0,1fr) 112px; gap: 25px 20px; padding: 40px 26px; }
  .journey-desk .small-title { grid-column: 1/-1; grid-row: 1; }
  .journey-desk .desk-lobby { grid-column: 1; grid-row: 2; }
  .journey-desk .desk-lobby img { aspect-ratio: 3/4; min-height: 280px; object-fit: cover; }
  .journey-desk h2.vertical-heading { grid-column: 2; grid-row: 2; margin: 0 auto; font-size: 27px; gap: 15px; }
  .journey-desk .journey-booking { grid-column: 1/-1; grid-row: 3; }
  .journey-desk nav { grid-row: 4; margin: 0; }
  .room-details,.bathing-info,.information-section,.faq-section,.reservation-check,.access-section { display: block; padding-top: 48px; padding-bottom: 48px; }
  .room-details>h2.vertical-heading,.bathing-info>h2.vertical-heading,
  .information-section>h2.vertical-heading,.faq-section>h2.vertical-heading,
  .reservation-check>h2.vertical-heading,.access-section h2.vertical-heading { font-size: 27px; gap: 16px; margin: 0 0 30px auto; }
  .access-section .section-heading { display: block; margin: 0; }
  .access-section .access-grid { display: grid; grid-template-columns: 1fr; }
  .access-section .address-block { padding: 25px; }
  .reservation-at-a-glance { grid-template-columns: auto minmax(0,1fr); padding: 24px 20px; gap: 22px; }
  .reservation-at-a-glance h2.vertical-heading { font-size: 24px; gap: 10px; }
  .reservation-at-a-glance .data-list dt { font-size: 11px; }
  .reservation-at-a-glance .data-list dd { font-size: 13px; }
  .reservation-at-a-glance .story-link { font-size: 12px; gap: 10px; }
  .next-chapter>a { gap: 40px; justify-content: space-between; }
  .next-chapter h2.vertical-heading { font-size: 27px; }
}
@media (max-width:360px) {
  .spring-letter,.morning-chapter,.journey-desk { grid-template-columns: minmax(0,1fr) 100px; column-gap: 16px; }
  .spring-title h2.vertical-heading,.morning-chapter h2.vertical-heading { font-size: 26px; }
  .notebook-dinner>div { column-gap: 18px; }
  .notebook-dinner h3.vertical-heading { font-size: 22px; }
  .night-photo-story { column-gap: 16px; }
  .night-photo-story>h2.vertical-heading { font-size: 24px; gap: 9px; }
  .reservation-at-a-glance { display: block; }
  .reservation-at-a-glance h2.vertical-heading { margin: 0 0 26px; }
}
/* Supporting stories follow the same title/photo/text relationship. */
.page-onsen #spring { grid-template-columns: minmax(0,1fr) 180px; gap: 35px 9%; align-items: start; }
.page-onsen #spring>div:first-child { display: contents; }
.page-onsen #spring h2 { grid-column: 2; grid-row: 1; margin: 0 auto; }
.page-onsen #spring .keeper-portrait { grid-column: 1; grid-row: 1; width: 100%; max-width: none; margin: 0; }
.page-onsen #spring .keeper-portrait img { aspect-ratio: 3/2; }
.page-onsen #spring>div:last-child { grid-column: 1/-1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 8%; max-width: none; }
.page-onsen #spring>div:last-child>p { grid-column: 1; margin: 0; }
.page-onsen #spring .data-list { grid-column: 2; grid-row: 1/4; }
.bath-detail { display: grid; grid-template-columns: minmax(0,1fr) 170px; gap: 25px 8%; align-items: start; }
.bath-detail .section-heading { display: contents; }
.bath-detail .section-heading>div { grid-column: 2; grid-row: 1; }
.bath-detail .section-heading>p { grid-column: 1; grid-row: 2; margin: 0; }
.bath-detail .gallery { grid-column: 1; grid-row: 1; min-width: 0; }
.bath-detail h2.vertical-heading { font-size: 38px; margin: 0 auto; }
.sky-story { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 24px 8%; padding: 65px 7%; text-align: left; }
.sky-story .sky-photo { grid-column: 1; grid-row: 1/4; margin: 0; }
.sky-story .sky-photo img { aspect-ratio: 3/4; min-height: 460px; object-fit: cover; }
.sky-story .sky-photo figcaption { padding: 0; }
.sky-story h2.vertical-heading { grid-column: 2; grid-row: 1; margin: 0 auto; font-size: 38px; }
.sky-story>p { grid-column: 2; margin: 0; }
.sky-story>p:not(.sky-note) { grid-row: 2; }
.sky-story>.sky-note { grid-row: 3; }
.page-town .split-copy { grid-template-columns: 180px minmax(0,1fr); gap: 10%; align-items: center; }
.page-town .split-copy>div:last-child { max-width: 38em; }
.breakfast-story { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 28px 9%; align-items: start; }
.breakfast-story>h2.vertical-heading { grid-column: 1; grid-row: 1/3; margin: 0 auto; font-size: 36px; }
.breakfast-story>.section-copy { grid-column: 2; grid-row: 2; max-width: 35em; }
.breakfast-story>figure { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
@media (max-width:1100px) and (min-width:721px) {
  .page-onsen #spring, .bath-detail { grid-template-columns: minmax(0,1fr) 130px; gap: 28px 7%; }
  .page-onsen #spring h2.vertical-heading,.bath-detail h2.vertical-heading { font-size: 32px; gap: 16px; }
  .sky-story { gap: 24px 6%; }
  .sky-story h2.vertical-heading { font-size: 32px; gap: 16px; }
  .page-town .split-copy,.breakfast-story { grid-template-columns: 130px minmax(0,1fr); gap: 7%; }
}
@media (max-width:720px) {
  .page-onsen #spring, .bath-detail { grid-template-columns: minmax(0,1fr) 92px; gap: 25px 22px; }
  .page-onsen #spring h2.vertical-heading,.bath-detail h2.vertical-heading { font-size: 28px; gap: 14px; }
  .page-onsen #spring .keeper-portrait img { aspect-ratio: 3/4; min-height: 275px; object-fit: cover; }
  .page-onsen #spring>div:last-child { display: block; }
  .page-onsen #spring>div:last-child>p+p { margin-top: 20px; }
  .page-onsen #spring .data-list { margin-top: 28px; }
  .bath-detail .section-heading>p { grid-column: 1/-1; }
  .bath-detail .gallery-viewport { height: 300px; }
  .bath-detail .gallery-viewport img { height: 100%; object-fit: cover; }
  .bath-detail .gallery-controls { flex-wrap: wrap; gap: 12px; }
  .sky-story { grid-template-columns: minmax(0,1fr) 100px; gap: 25px 22px; padding: 35px 26px; }
  .sky-story .sky-photo { grid-column: 1; grid-row: 1; }
  .sky-story .sky-photo img { min-height: 0; height: 300px; aspect-ratio: auto; }
  .sky-story h2.vertical-heading { grid-column: 2; grid-row: 1; font-size: 28px; gap: 14px; }
  .sky-story>p { grid-column: 1/-1; }
  .page-town .split-copy { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 25px 24px; align-items: start; }
  .page-town .split-copy>div:first-child { grid-column: 1; grid-row: 1; }
  .page-town .split-copy>div:last-child { display: contents; }
  .page-town .split-copy h2.vertical-heading { font-size: 27px; gap: 14px; margin: 0; }
  .page-town .split-copy p { grid-column: 1/-1; margin: 0; }
  .page-town .split-copy .lead { grid-column: 2; grid-row: 1; font-size: 16px; }
  .breakfast-story { grid-template-columns: max-content minmax(0,1fr); gap: 25px 22px; }
  .breakfast-story>h2.vertical-heading { grid-column: 1; grid-row: 1; font-size: 26px; gap: 12px; }
  .breakfast-story>.section-copy { grid-column: 1/-1; grid-row: 2; }
  .breakfast-story>figure { grid-column: 2; grid-row: 1; }
  .breakfast-story>figure img { aspect-ratio: 3/4; min-height: 275px; object-fit: cover; }
}