@charset "UTF-8";

/* ============================================================
   ANSE YOMITAN — style.css
   Page-specific styles. All tokens come from base.css.
   Sections: Header / Hero / Intro / Rooms (hscroll) /
             Features / Access / Gallery / Footer
   ============================================================ */

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

/* Hanzomon-style bar: menu (left) / logo (center) / reserve (flush right).
   Hidden above the viewport while in the hero;
   slides in (solid) once the hero is passed. */
.Header {
  --header-height: 56px;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  /* Transparent over the hero; white fades in once scrolling.
     Hairline via box-shadow (not border) so it doesn't shrink the
     content box — keeps the Reserve box flush to full header height. */
  background: transparent;
  box-shadow: 0 1px 0 transparent;
  /* Back to transparent (scrolled→top): quick, so it doesn't linger white */
  transition:
    background-color 220ms var(--ease-default),
    box-shadow 220ms var(--ease-default);
}

.Header.is-scrolled {
  background: var(--white);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  /* Becoming white (top→scrolled): a touch slower for a soft fade-in */
  transition:
    background-color 500ms var(--ease-default),
    box-shadow 500ms var(--ease-default);
}

/* Menu trigger — two thin bars + word */
.Header .menu {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5) 0 var(--padding);
}

.Header .menu .bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.Header .menu .bars i {
  display: block;
  height: 1px;
  background: var(--white);
  transition:
    width var(--duration-default) var(--ease-expo),
    background-color var(--duration-default) var(--ease-default);
}

.Header.is-scrolled .menu .bars i {
  background: var(--color-text);
}

.Header .menu .bars i:nth-child(2) {
  width: 70%;
}

.Header .menu:hover .bars i:nth-child(2) {
  width: 100%;
}

.Header .menu .word {
  font-family: var(--font-en);
  font-size: var(--fs-h6);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  transition: color var(--duration-default) var(--ease-default);
  display: block;
}

.Header.is-scrolled .menu .word {
  color: var(--color-text);
}

/* Centered logo (absolute, like Hanzomon #header-fix-title) */
.Header .logo {
  position: absolute;
  left: 50%;
  top: 52.5%;
  transform: translate(-50%, -50%);
}

.Header .logo img {
  width: auto;
  height: 16px;
  object-fit: contain;
  /* White over hero, dark once the bar turns white */
  filter: brightness(0) invert(1);
  transition: filter var(--duration-default) var(--ease-default);
}

.Header.is-scrolled .logo img {
  filter: brightness(0);
}

/* Reserve — square box, full header height, flush to the corner */
.Header .reserve {
  margin-left: auto;
  align-self: stretch;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-11);
  padding: 0 var(--space-7);
  font-family: var(--font-en);
  font-size: var(--fs-h5);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--color-accent);
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.Header .reserve:hover {
  background: var(--color-text);
  color: var(--white);
}

@media (max-width: 767px) {
  .Header .reserve {
    min-width: var(--space-10);
    padding: 0 var(--space-6);
  }
}


/* ------------------------------------------------------------
   Drawer — thin left panel (PC), full width (SP)
   ------------------------------------------------------------ */

.Drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}

.Drawer .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-default);
}

.Drawer .panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: var(--space-11) var(--space-8) var(--space-8);
  transform: translateX(-100%);
  transition: transform 0.8s var(--ease-expo);
}

.Drawer.is-open {
  pointer-events: auto;
}

.Drawer.is-open .overlay {
  opacity: 1;
}

.Drawer.is-open .panel {
  transform: translateX(0);
}

.Drawer .close {
  position: absolute;
  top: var(--space-6);
  left: var(--space-8);
  width: 24px;
  height: 24px;
}

.Drawer .close i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text);
}

.Drawer .close i:first-child { transform: rotate(45deg); }
.Drawer .close i:last-child  { transform: rotate(-45deg); }

.Drawer nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.Drawer nav a {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  /* Staggered entrance */
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity var(--duration-slow) var(--ease-expo),
    transform var(--duration-slow) var(--ease-expo);
}

.Drawer.is-open nav a {
  opacity: 1;
  transform: translateX(0);
}

.Drawer.is-open nav a:nth-child(1) { transition-delay: 0.20s; }
.Drawer.is-open nav a:nth-child(2) { transition-delay: 0.26s; }
.Drawer.is-open nav a:nth-child(3) { transition-delay: 0.32s; }
.Drawer.is-open nav a:nth-child(4) { transition-delay: 0.38s; }
.Drawer.is-open nav a:nth-child(5) { transition-delay: 0.44s; }

.Drawer nav a span {
  font-family: var(--font-en);
  font-size: var(--fs-h2);
  line-height: 1.1;
  font-weight: var(--fw-light);
  transition: color var(--duration-fast) var(--ease-default);
}

.Drawer nav a:hover span {
  color: var(--color-text-mute);
}

.Drawer nav a small {
  font-size: var(--fs-h6);
  color: var(--color-text-mute);
}

/* SP: bigger nav, and align the close X to the header hamburger spot */
@media (max-width: 767px) {
  .Drawer nav a span {
    font-size: var(--fs-h1);
  }

  .Drawer .close {
    top: 16px;          /* center on the 56px header line */
    left: var(--padding);
  }
}

.Drawer .book {
  margin-top: var(--space-9);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-en);
  font-size: var(--fs-h4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.Drawer .book i {
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--duration-default) var(--ease-expo);
}

.Drawer .book:hover i {
  width: 64px;
}

.Drawer .meta {
  margin-top: auto;
}

.Drawer .meta p + p {
  margin-top: var(--space-2);
}

.Drawer .meta .tel,
.Drawer .meta p[lang="en"] {
  font-family: var(--font-en);
  font-size: var(--fs-h4);
}

.Drawer .meta .mute {
  font-size: var(--fs-h5);
}

@media (min-width: 768px) {
  .Drawer .panel {
    width: 340px;
    border-right: 1px solid var(--color-line);
  }
}

/* ------------------------------------------------------------
   Hero — full-bleed image + horizon logotype
   ------------------------------------------------------------ */

.Hero {
  position: relative;
  height: 100svh;
  padding: 0;
  overflow: clip;
  background: var(--color-bg-dark);
}

/* --- Crossfade slideshow --- */
/* Soft open: whole stage fades up on load */
.Hero .slides {
  position: absolute;
  inset: 0;
  animation: heroStage 2.2s var(--ease-default) both;
}

@keyframes heroStage {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.Hero .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.6s var(--ease-default);
}

.Hero .slide.is-active {
  opacity: 1;
}

.Hero .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slow drift while a slide is shown; paused when hero leaves viewport.
   First slide opens from a touch more scale for a cinematic settle. */
.Hero .slide.is-active img {
  animation: slideDrift 16s linear forwards;
}

.Hero.is-offscreen .slide img {
  animation-play-state: paused;
}

@keyframes slideDrift {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.Hero .slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
}

/* --- Centered horizon logotype + small copy --- */
.Hero .wrapper {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding);
}

.Hero .mark {
  width: min(58vw, 440px);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(24px) scale(1.04);
  animation: heroMark 2.2s var(--ease-expo) 0.7s forwards;
}

@media (max-width: 767px) {
  .Hero .mark {
    width: 90%;
  }
}

.Hero .mark img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

@keyframes heroMark {
  to {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
    transform: translateY(0) scale(1);
  }
}

.Hero .tagline {
  margin-top: var(--space-6);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
}

@media (min-width: 768px) {
  .Hero .tagline {
    font-size: 13px;
    letter-spacing: 0.24em;
  }
}

.Hero .tagline,
.Hero .tagline span {
  color: var(--white);
}

/* --- Pagination (5px round dots, bottom center) --- */
.Hero .pager {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.Hero .pager button {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background-color var(--duration-default) var(--ease-default);
}

.Hero .pager button.is-active {
  background: var(--color-accent);
}

.Hero .line {
  display: block;
  overflow: clip;
}

.Hero .line span {
  display: block;
  transform: translateY(120%);
  animation: lineRise 1.4s var(--ease-expo) 2s forwards;
}

@keyframes lineRise {
  to { transform: translateY(0); }
}

/* --- Official-rate banner (bottom right, BYREDO-style) --- */
.Hero .offer {
  position: absolute;
  right: var(--padding);
  /* Clear the pager lines on small screens */
  bottom: calc(5vh + 36px);
  z-index: var(--z-content);
  display: flex;
  width: min(340px, 78vw);
  opacity: 0;
  transform: translateY(20px);
  /* Fades in after the logotype has settled */
  animation: heroRise 1.4s var(--ease-expo) 2.8s forwards;
}

@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
  .Hero .offer {
    bottom: 5vh;
  }
}

.Hero .offer .tag {
  position: absolute;
  top: -11px;
  left: -8px;
  z-index: 1;
  background: var(--color-accent);
  color: var(--white);
  font-size: var(--fs-h6);
  font-weight: var(--fw-strong);
  letter-spacing: var(--ls-ja);
  padding: 5px 10px;
}

.Hero .offer .thumb {
  flex: none;
  width: 104px;
}

.Hero .offer .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Hero .offer .box {
  flex: 1;
  background: var(--white);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.Hero .offer .copy {
  font-size: var(--fs-h6);
  line-height: 1.7;
}

.Hero .offer .cta {
  font-family: var(--font-en);
  font-size: var(--fs-h5);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: flex-start;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 2px;
  transition: color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.Hero .offer:hover .cta {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.Hero .scroll {
  position: absolute;
  left: var(--padding);
  bottom: 5vh;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.Hero .scroll span {
  font-family: var(--font-en);
  font-size: var(--fs-h6);
  letter-spacing: 0.2em;
  color: var(--white);
  text-transform: uppercase;
}

.Hero .scroll i {
  display: block;
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: clip;
}

.Hero .scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  animation: scrollHint 2.2s var(--ease-in-out) infinite;
}

@keyframes scrollHint {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ------------------------------------------------------------
   Section heading pattern (shared)
   ------------------------------------------------------------ */

/* Eyebrow: plain black text */
.heading .label,
.eyebrow.label {
  display: block;
  color: var(--color-text);
}

/* Main title: accent type + a 1px accent rule running straight to
   the right edge. Text slides in, then the rule grows from the left.
   (.txt wrapper is injected by JS; is-inview comes from the reveal IO) */
.heading h2 {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-accent);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-light);
}

.heading h2 .txt {
  flex: none;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity 0.9s var(--ease-expo),
    transform 0.9s var(--ease-expo);
}

.heading h2::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--ease-expo) 0.4s;
}

.heading h2.is-inview .txt {
  opacity: 1;
  transform: translateX(0);
}

.heading h2.is-inview::after {
  transform: scaleX(1);
}

/* ------------------------------------------------------------
   Intro — concise concept + booking search
   ------------------------------------------------------------ */

.Intro {
  margin-top: var(--section-gap);
}

.Intro .wrapper {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

.Intro .statement {
  margin-top: var(--space-6);
  font-size: var(--fs-h1);
  line-height: 1.25;
  font-weight: var(--fw-light);
}

.Intro .body {
  max-width: 600px;
  margin: var(--space-8) auto 0;
}

.Intro .booking {
  max-width: 880px;
  margin: var(--space-10) auto 0;
}

.Intro .booking form {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--color-text);
}

.Intro .booking .field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.Intro .booking .field .label {
  color: var(--color-text-mute);
}

.Intro .booking .field input,
.Intro .booking .field select {
  font-family: var(--font-en);
  font-size: var(--fs-h3);
  color: var(--color-text);
  -webkit-appearance: none;
  appearance: none;
}

.Intro .booking button {
  font-family: var(--font-en);
  font-size: var(--fs-h4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--color-accent);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.Intro .booking button i {
  width: 32px;
  height: 1px;
  background: currentColor;
  transition: width var(--duration-default) var(--ease-expo);
}

.Intro .booking button:hover {
  background: var(--color-text);
  color: var(--white);
}

.Intro .booking button:hover i {
  width: 56px;
}

.Intro .booking .meta {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-h6);
}

@media (min-width: 768px) {
  .Intro .statement {
    font-size: var(--fs-h0);
  }

  .Intro .booking form {
    grid-template-columns: 1fr 1fr 1fr auto;
  }

  .Intro .booking .field {
    border-bottom: none;
    border-right: 1px solid var(--color-line);
  }

  .Intro .booking button {
    padding: var(--space-5) var(--space-8);
  }
}

/* SP: compact booking — check-in / check-out side by side, lower height */
@media (max-width: 767px) {
  .Intro .booking {
    margin-top: var(--space-9);
  }

  .Intro .booking form {
    grid-template-columns: 1fr 1fr;
  }

  .Intro .booking .field {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-line);
  }

  /* check-in | check-out share the top row */
  .Intro .booking .field:nth-child(1) {
    border-right: 1px solid var(--color-line);
  }

  /* guests + search span the full width below */
  .Intro .booking .field:nth-child(3) {
    grid-column: 1 / -1;
  }

  .Intro .booking .field input,
  .Intro .booking .field select {
    font-size: var(--fs-h4);
  }

  .Intro .booking button {
    grid-column: 1 / -1;
    padding: var(--space-4);
  }
}

/* ------------------------------------------------------------
   Rooms — pinned horizontal scroll
   Section height is set by JS (track width).
   Falls back to native swipe scroll under 1024px.
   ------------------------------------------------------------ */

.Rooms {
  margin-top: var(--section-gap);
  padding: 0;
}

.Rooms .sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
}

.Rooms .head {
  padding: 0 var(--padding);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-9);
}

/* Let the title rule stretch */
.Rooms .head .heading {
  flex: 1 1 320px;
}

.Rooms .head .lead {
  max-width: 680px;
}

/* Sentence-per-line only where it fits; SP wraps naturally */
@media (max-width: 767px) {
  .Rooms .head .lead p br {
    display: none;
  }
}

.Rooms .head .lead .note {
  margin-top: var(--space-2);
  font-size: var(--fs-h6);
}

.Rooms .viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.Rooms .viewport::-webkit-scrollbar {
  display: none;
}

.Rooms .track {
  display: flex;
  gap: var(--space-6);
  padding: 0 var(--padding);
  width: max-content;
}

.Rooms .room {
  width: min(78vw, 460px);
  flex: none;
}

.Rooms .room .media {
  overflow: clip;
}

.Rooms .room .media img {
  aspect-ratio: 3 / 2;
  transition: transform 1.4s var(--ease-expo);
}

.Rooms .room:hover .media img {
  transform: scale(1.05);
}

.Rooms .room .text {
  margin-top: var(--space-5);
}

.Rooms .room .info {
  position: relative;
  padding-left: var(--space-8);
}

.Rooms .room .info .num {
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-en);
  font-size: var(--fs-h5);
  color: var(--color-text-mute);
}

.Rooms .room .info h3 {
  font-family: var(--font-ja);
  font-weight: var(--fw-strong);
  font-size: var(--fs-h4);
}

.Rooms .room .info h3 small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-h6);
  font-weight: var(--fw-base);
  color: var(--color-text-mute);
}

.Rooms .room .info p {
  margin-top: var(--space-1);
  font-family: var(--font-en);
  font-size: var(--fs-h5);
  color: var(--color-text-mute);
}

.Rooms .room .info .desc {
  margin-top: var(--space-3);
  font-family: var(--font-ja);
  font-size: var(--fs-h6);
  color: var(--color-text-mute);
}

/* Floor-plan trigger — 25px in from the photo's bottom-right corner */
.Rooms .room .media {
  position: relative;
}

.Rooms .room .media .plan {
  position: absolute;
  right: 25px;
  bottom: 25px;
  z-index: var(--z-content);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font-family: var(--font-ja);
  font-size: var(--fs-h6);
  letter-spacing: var(--ls-ja);
  padding: 8px 14px;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.Rooms .room .media .plan:hover {
  background: var(--color-accent);
}

/* ------------------------------------------------------------
   Lightbox — room floor plans
   ------------------------------------------------------------ */

.Lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding);
  pointer-events: none;
}

.Lightbox .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--duration-default) var(--ease-default);
}

.Lightbox figure {
  position: relative;
  background: var(--white);
  padding: var(--space-8) var(--space-8) var(--space-6);
  max-width: min(880px, 100%);
  max-height: 86svh;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-default) var(--ease-expo),
    transform var(--duration-default) var(--ease-expo);
}

.Lightbox figure img {
  width: 100%;
  min-height: 0;
  object-fit: contain;
}

.Lightbox figcaption {
  font-weight: var(--fw-strong);
  font-size: var(--fs-h6);
}

.Lightbox .close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 20px;
  height: 20px;
}

.Lightbox .close i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text);
}

.Lightbox .close i:first-child { transform: rotate(45deg); }
.Lightbox .close i:last-child  { transform: rotate(-45deg); }

.Lightbox.is-open {
  pointer-events: auto;
}

.Lightbox.is-open .overlay {
  opacity: 1;
}

.Lightbox.is-open figure {
  opacity: 1;
  transform: translateY(0);
}

.Rooms .progress {
  margin: 0 var(--padding);
  height: 1px;
  background: var(--color-line);
  position: relative;
}

.Rooms .progress i {
  position: absolute;
  inset: -1px auto;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-accent);
  transition: width 100ms linear;
}

/* Pinned mode (desktop): JS adds .is-pinned and sets section height */
@media (min-width: 1024px) {
  .Rooms.is-pinned .sticky {
    position: sticky;
    top: 0;
    height: 100vh;
  }

  .Rooms.is-pinned .viewport {
    overflow: visible;
  }

  .Rooms.is-pinned .track {
    will-change: transform;
  }

  .Rooms.is-pinned .room {
    width: 38vw;
  }
}

/* ------------------------------------------------------------
   Features — full-viewport reveal stack (Stock/maskReveal v2)
   Each .layer is position:fixed (already in place); the parent
   .feature has clip-path:inset(0), which both clips the layer
   and acts as its containing block. Scrolling moves the clip
   window: the previous image pulls away, the next is already
   there underneath.
   ------------------------------------------------------------ */

.Features {
  margin-top: var(--section-gap);
  padding: 0;
}

.Features .heading {
  padding: 0 var(--padding);
  margin-bottom: var(--space-10);
}

/* Pinned crossfade stack: layers stay fixed in the viewport while the
   stack scrolls; each image FADES in over the previous (no heavy zoom).
   clip-path keeps the fixed layers confined to the stack box, so the
   next section still reveals from underneath. Opacity is set per scroll
   frame in main.js. */
.Features .stack {
  margin-top: var(--space-10);
  position: relative;
  clip-path: inset(0);
}

.Features .stack .caption {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  z-index: var(--z-content);
  pointer-events: none;
}

.Features .still + .stack {
  margin-top: var(--section-gap);
}

/* Each image holds for ~1.6 viewports of scroll before the next
   crossfades in — slows the sequence down so it doesn't end too soon */
.Features .feature {
  position: relative;
  height: 160svh;
}

.Features .feature .layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  opacity: 0;
}

/* First image is the base; always visible underneath */
.Features .feature:first-child .layer {
  opacity: 1;
}

.Features .feature .layer > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Features .feature .layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

/* Centered white caption, pinned for the whole stack */
.Features .caption .text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--padding);
}

.Features .caption .text > * {
  color: var(--white);
  opacity: 0;            /* faded in by main.js as the stack enters */
  transform: translateY(16px);
}

@media (prefers-reduced-motion: reduce) {
  .Features .feature .layer,
  .Features .caption .text > * {
    opacity: 1;
    transform: none;
  }
}

/* --- 02 Breakfast: contained editorial block on white --- */
.Features .still {
  display: block;
  margin-top: var(--section-gap);
  padding: 0 var(--padding);
}

.Features .still .media {
  max-width: 880px;
  margin-inline: auto;
  overflow: clip;
}

.Features .still .media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.Features .still .text {
  max-width: 880px;
  margin: var(--space-6) auto 0;
}

.Features .still .text .num {
  font-family: var(--font-en);
  font-size: var(--fs-h5);
  letter-spacing: 0.1em;
  color: var(--color-accent);
  display: block;
}

.Features .still .text h3 {
  margin-top: var(--space-4);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-light);
}

.Features .still .text .sub {
  margin-top: var(--space-2);
  font-weight: var(--fw-strong);
}

.Features .still .text p:not(.sub) {
  margin-top: var(--space-5);
  max-width: 36em;
}

@media (min-width: 1024px) {
  .Features .still {
    display: grid;
    grid-template-columns: 7fr 4fr;
    gap: var(--space-9);
    align-items: center;
  }

  .Features .still .media,
  .Features .still .text {
    max-width: none;
    margin: 0;
  }
}

.Features .caption .text .num {
  font-family: var(--font-en);
  font-size: var(--fs-h5);
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.Features .caption .text h3 {
  margin-top: var(--space-4);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-light);
}

.Features .caption .text .sub {
  margin-top: var(--space-4);
  font-weight: var(--fw-strong);
}

.Features .caption .text .body {
  margin-top: var(--space-6);
  max-width: 36em;
}

/* ------------------------------------------------------------
   Access
   ------------------------------------------------------------ */

.Access {
  margin-top: var(--section-gap);
}

.Access .wrapper {
  max-width: 880px;
  margin-inline: auto;
}

.Access .map {
  margin-top: var(--space-8);
  aspect-ratio: 16 / 9;
  background: var(--color-bg-gray);
}

.Access .map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1);
  transition: filter var(--duration-slow) var(--ease-default);
}

.Access .map:hover iframe {
  filter: grayscale(0);
}

.Access .detail {
  margin-top: var(--space-6);
}

.Access .detail p + p {
  margin-top: var(--space-2);
}

.Access .detail .tel {
  font-family: var(--font-en);
  font-size: var(--fs-h2);
  margin-top: var(--space-5);
}

/* ------------------------------------------------------------
   Gallery (marquee rows)
   ------------------------------------------------------------ */

.Gallery {
  margin-top: var(--section-gap);
  padding: 0;
  overflow: clip;
}

.Gallery .heading {
  padding: 0 var(--padding);
}

/* Uniform 10px gutter everywhere.
   Row gap stays 0: the track's own padding-right is the 10px seam
   between the track and its clone (gap+padding doubled to 20px). */
.Gallery .row {
  margin-top: 10px;
  display: flex;
  gap: 0;
  width: max-content;
}

.Gallery .heading + .row {
  margin-top: 80px;
}

.Gallery .row .track {
  display: flex;
  gap: 10px;
  padding-right: 10px;
  animation: marquee 110s linear infinite;
}

.Gallery .row.reverse .track {
  animation-direction: reverse;
}

.Gallery .row img {
  width: 240px;
  aspect-ratio: 3 / 2;
  flex: none;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (min-width: 1024px) {
  .Gallery .row img {
    width: 400px;
  }
}

/* ------------------------------------------------------------
   SP fine-tuning (Hero pager / offer, Breakfast, Gallery spacing)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Slider indicator: lower (dots & gap inherited from base) */
  .Hero .pager {
    bottom: 2.5vh;
    gap: var(--space-3);
  }

  /* Official-rate banner centered on X (offset for the left-jutting tag) */
  .Hero .offer {
    right: auto;
    left: 50%;
    transform: translateX(calc(-50% + 4px));
    /* fade only — keep the centering transform intact */
    animation: heroStage 1.4s var(--ease-expo) 2.8s both;
  }

  /* Breakfast: more breathing room above and below */
  .Features .still {
    margin-top: calc(var(--section-gap) + var(--space-9));
    margin-bottom: var(--space-9);
  }

  /* Gallery: tighten heading↔row, but more space around the section */
  .Gallery {
    margin-top: calc(var(--section-gap) + var(--space-9));
    padding-bottom: var(--space-10);
  }

  .Gallery .heading + .row {
    margin-top: var(--space-7);
  }
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

/* Hanzomon-style content, split ground: coral photo left (50vw on PC),
   gray panel right. #666 ground, accent type. */
/* Coral photo (left on PC, top on SP) + gray panel. #666 ground,
   accent type. Low profile: ~30vh on PC. */
.Footer {
  margin-top: var(--section-gap);
  background: #444444;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.Footer .media {
  overflow: clip;
}

.Footer .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Footer .panel {
  padding: var(--space-7) var(--padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.Footer a,
.Footer li,
.Footer span,
.Footer p {
  color: var(--color-accent);
}

.Footer a {
  transition: opacity var(--duration-fast) var(--ease-default);
}

.Footer a:hover {
  opacity: 0.6;
}

/* TOP — chevron rises on hover, like Hanzomon's arrow */
.Footer .totop {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-en);
  font-size: var(--fs-h6);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.Footer .totop i {
  display: block;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--color-accent);
  border-left: 1px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out);
}

.Footer .totop:hover i {
  transform: rotate(45deg) translate(-3px, -3px);
}

.Footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7) var(--space-10);
}

.Footer .col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.Footer .col.site {
  font-family: var(--font-en);
  letter-spacing: 0.06em;
}

.Footer .col li {
  font-size: var(--fs-body);
  line-height: 1.2;
}

.Footer .col.site li {
  font-size: var(--fs-h4);
}

.Footer .copyright {
  font-family: var(--font-en);
  font-size: var(--fs-h6);
  letter-spacing: 0.08em;
}

@media (min-width: 768px) {
  /* Whole footer locked to 30vh; coral photo fills its half via cover */
  .Footer {
    flex-direction: row;
    align-items: stretch;
    height: 30vh;
    min-height: 260px;
  }

  .Footer .media {
    width: 50vw;
    flex: none;
    height: 100%;
  }

  /* Gray panel: TOP + links toward the top; copyright pushed to the
     very bottom so a clear gap separates it from the links */
  .Footer .panel {
    flex: 1;
    height: 100%;
    padding: var(--space-7) var(--space-9);
    gap: var(--space-6);
  }

  .Footer .links {
    gap: var(--space-4) var(--space-10);
  }

  /* Site nav in two compact columns */
  .Footer .col.site {
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    gap: var(--space-3) var(--space-8);
  }

  .Footer .copyright {
    margin-top: auto;
  }
}

/* SP: coral photo 50vh on top, compact gray panel below */
@media (max-width: 767px) {
  .Footer .media {
    height: 50vh;
  }

  .Footer .panel {
    gap: var(--space-6);
    padding: var(--space-7) var(--padding);
  }

  /* Contact (tel / address): set apart above, muted and smaller */
  .Footer .col.contact {
    margin-top: var(--space-6);
  }

  .Footer .col.contact li,
  .Footer .col.contact a {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--fs-h6);
  }
}