* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* =========================================================
   Custom cursor — a small music note replaces the default
   arrow; interactive elements keep the normal pointer (hand)
   cursor via the browser's own UA styles. A dark (black)
   note is used over the light sections, and a light (white)
   note takes over on dark-background sections (navigation,
   experience, menu, christmas-edition, site-footer).
   ========================================================= */
html {
  cursor: url("img/cursor-note-dark.svg") 6 1, auto;
}

.navigation,
.experience,
.menu,
.christmas-edition,
.site-footer {
  cursor: url("img/cursor-note-light.svg") 6 1, auto;
}

/* =========================================================
   Click note-burst — a few music notes pop out from the
   click point and float away. Purely decorative; particles
   are pointer-events:none and remove themselves after the
   animation ends.
   ========================================================= */
.click-note {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
  animation-name: click-note-fly;
  animation-timing-function: cubic-bezier(0.16, 0.8, 0.3, 1);
  animation-fill-mode: forwards;
}

.click-note svg { display: block; width: 100%; height: 100%; }

@keyframes click-note-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) rotate(var(--nr0)) scale(0.35);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--nx) * 0.18), calc(var(--ny) * 0.18)) rotate(calc(var(--nr0) + var(--nrd) * 0.2)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--nx), var(--ny)) rotate(calc(var(--nr0) + var(--nrd))) scale(0.8);
  }
}

/* =========================================================
   Navigation
   ========================================================= */
.navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  padding: 20px 24px;
  --nav-bg: rgba(20, 15, 13, 0.6);
  --nav-border: rgba(176, 138, 74, 0.22);
  --link-color: #d9cdb6;
  --cta-bg: #b08a4a;
  --cta-text: #f2ece0;
  --font-mincho: "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", serif;
  background: var(--nav-bg);
  border-bottom: 1.333px solid var(--nav-border);
  transform: translateY(0);
  transition: transform 0.35s ease;
}

.navigation.nav--hidden {
  transform: translateY(-100%);
}

.navigation__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.navigation__logo {
  flex-shrink: 0;
  width: 258.742px;
  height: 88.958px;
  max-width: 45vw;
  max-height: 15vw;
}

.navigation__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 1.333px;
  background: var(--link-color);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.333px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.333px) rotate(-45deg);
}

.navigation__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 32px 45.333px;
}

.nav-link {
  position: relative;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-style: normal;
  font-size: 17.333px;
  line-height: normal;
  letter-spacing: 3.12px;
  color: var(--link-color);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--cta-bg);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--cta-bg);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-cta-wrap {
  display: inline-flex;
  flex-shrink: 0;
}

.nav-cta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 64px;
  padding: 16px 36px;
  background: var(--cta-bg);
  border: 1.333px solid var(--cta-bg);
  border-radius: 70px;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-style: normal;
  font-size: 18.667px;
  line-height: normal;
  letter-spacing: 4.1067px;
  color: var(--cta-text);
  white-space: nowrap;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .navigation {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .nav-toggle {
    display: flex;
  }

  .navigation__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 28px;
    padding: 32px clamp(20px, 8vw, 48px) 40px;
    background: var(--nav-bg);
    border-bottom: 1.333px solid var(--nav-border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .navigation__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-cta {
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .navigation__logo {
    max-width: 55vw;
  }

  .nav-link {
    font-size: 15px;
    letter-spacing: 2.4px;
  }

  .nav-cta {
    height: 52px;
    padding: 12px 28px;
    font-size: 16px;
    letter-spacing: 3px;
  }
}

/* =========================================================
   Header
   ========================================================= */
.header {
  position: relative;
  width: 100%;
  overflow: hidden;
  --header-bg: #1e1714;
  --header-eyebrow: #c6a15c;
  --header-title: #f4efe4;
  --header-title-accent: #e4c98a;
  --header-subtitle: #ede3d0;
  --header-lead: #f4efe4;
  --font-mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", serif;
  background: var(--header-bg);
}

.header__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.header__photo {
  position: absolute;
  top: 0;
  left: 12.5%;
  right: 0;
  bottom: 0;
  background-image: url("img/header-main.webp");
  background-size: cover;
  background-position: center;
}

.header__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.header__gradient {
  position: absolute;
  top: 0;
  left: 12.5%;
  width: 56.615%;
  bottom: 0;
  background: linear-gradient(269.844deg, rgba(30, 23, 20, 0) 0.1155%, rgb(30, 23, 20) 78.3%);
}

.header__container {
  z-index: 1;
  max-width: 1333.333px;
  margin: 0 auto;
  padding: clamp(120px, 12.5vw, 240px) clamp(24px, 6vw, 115.2px) clamp(100px, 10.4vw, 200px);
}

.header__vinyl {
  position: absolute;
  z-index: 0;
  left: -320px;
  top: -240px;
  height: 790px;
  aspect-ratio: 1/1;
  object-fit: cover;
  pointer-events: none;
}

.header__content {
  position: relative;
  z-index: 1;
}

.header__eyebrow {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: clamp(13px, 0.9722vw, 18.667px);
  letter-spacing: 0.5em;
  color: var(--header-eyebrow);
  text-align: center;
  white-space: nowrap;
}

.header__title {
  width: 100%;
  margin: 24px 0 0;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: clamp(34px, 4.1667vw, 80px);
  line-height: 1.49;
  text-align: center;
  color: var(--header-title);
}

.header__title span {
  display: block;
  width: 100%;
  overflow-wrap: break-word;
}

.header__title-accent {
  color: var(--header-title-accent);
}

.header__subtitle {
  margin: 92px 0 0;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 24px);
  letter-spacing: 0.342em;
  color: var(--header-subtitle);
  text-align: center;
  white-space: nowrap;
}

.header__lead {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 24px);
  line-height: 2.889;
  letter-spacing: 0.1155em;
  color: var(--header-lead);
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .header__vinyl {
    --vinyl-w: clamp(200px, 60vw, 380px);
    width: var(--vinyl-w);
    height: auto;
    aspect-ratio: 1149 / 862;
    left: calc(var(--vinyl-w) * -0.4543);
    top: calc(var(--vinyl-w) * -0.2089);
  }

  .header__photo,
  .header__gradient {
    left: 0;
  }

  .header__container {
    padding-top: 100px;
    padding-bottom: 80px;
  }

  .header__subtitle {
    margin-top: 56px;
  }

  .header__eyebrow,
  .header__subtitle,
  .header__lead {
    white-space: normal;
  }
}

/* =========================================================
   Track marquee (decorative, between header and lead)
   ========================================================= */
.track-marquee {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.track-marquee__row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-50%);
  overflow: hidden;
  background: transparent;
}

.track-marquee__track {
  display: flex;
  width: max-content;
  animation: track-marquee-left 80s linear infinite;
}

.track-marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.track-marquee__img {
  display: block;
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .track-marquee__track {
    animation: none;
  }
}

@media (max-width: 768px) {
  .track-marquee__img {
    height: 30px;
  }
}

/* =========================================================
   Lead (offer period)
   ========================================================= */
.offer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 160px 20px 120px;
  --color-bg: #790014;
  --color-label: #e4c98a;
  --color-date: #efe2cb;
  --color-desc: #d3b98f;
  --color-divider: rgba(198, 161, 92, 0.35);
  --color-btn-bg: #b08a4a;
  --color-btn-text: #f2ece0;
  background: var(--color-bg);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", serif;
}

.offer-container {
  width: 100%;
  max-width: 1080px;
}

.offer-columns {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.offer-col {
  flex: 1 0 0;
  min-width: 0;
  max-width: 100%;
}

.offer-col--left {
  border-right: 1.333px solid var(--color-divider);
}

.offer-col--right {
  padding: 0 32px;
}

.offer-label {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 5.8933px;
  color: var(--color-label);
}

.offer-date {
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 1.6px;
  color: var(--color-date);
  line-height: 1.4;
  margin-bottom: 12px;
}

.offer-date + .offer-date {
  margin-top: 0;
}

.offer-label + .offer-date {
  margin-top: 24px;
}

.offer-desc {
  font-weight: 400;
  font-size: 16px;
  color: var(--color-desc);
  line-height: 1.6;
  margin-top: 16px;
}

.offer-link-wrap {
  width: fit-content;
  max-width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  padding-top: 40px;
}

.offer-link {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 401px;
  max-width: 100%;
  min-height: 64px;
  padding: 10px 24px;
  border-radius: 74px;
  background: var(--color-btn-bg);
  text-decoration: none;
}

.offer-link-text {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 5.12px;
  color: var(--color-btn-text);
}

.offer-link-arrow {
  display: block;
  width: 4.406px;
  height: 8.813px;
}

/* Reusable "notes gather around the button on hover" effect, shared by
   every reserve CTA (offer/plan/christmas pills + the nav pill). Each
   note starts scattered further out and converges to a spot around the
   button's edge; --tx/--ty are pushed past the pill's rounded corner so
   the button (z-index 2) never clips the note as it lands. */
.reserve-cta {
  position: relative;
  --note-fx-scale: 1;
}

.reserve-note {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 20px;
  height: 24px;
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--fx) * var(--note-fx-scale)), calc(var(--fy) * var(--note-fx-scale)))
    rotate(var(--frot))
    scale(0.35);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  transition-delay: var(--delay, 0s);
}

.reserve-note img {
  display: block;
  width: 100%;
  height: 100%;
}

.reserve-cta:hover .reserve-note,
.reserve-cta:focus-within .reserve-note {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--tx) * var(--note-fx-scale)), calc(var(--ty) * var(--note-fx-scale)))
    rotate(var(--trot))
    scale(1);
}

/* Spread sized for the 401x64 pills (offer/plan/christmas CTAs). */
.reserve-note--01 { --tx: -186px; --ty: -46px; --fx: -320px; --fy: -150px; --frot: -35deg; --trot: -14deg; --delay: 0s;    width: 20px; height: 26px; }
.reserve-note--02 { --tx: -96px;  --ty: -58px; --fx: -160px; --fy: -220px; --frot: 25deg;  --trot: 10deg;  --delay: 0.05s; width: 16px; height: 22px; }
.reserve-note--03 { --tx: 96px;   --ty: -58px; --fx: 170px;  --fy: -230px; --frot: -20deg; --trot: -8deg;  --delay: 0.1s;  width: 17px; height: 22px; }
.reserve-note--04 { --tx: 186px;  --ty: -46px; --fx: 330px;  --fy: -140px; --frot: 18deg;  --trot: 12deg;  --delay: 0.15s; width: 20px; height: 24px; }
.reserve-note--05 { --tx: 186px;  --ty: 62px;  --fx: 330px;  --fy: 170px;  --frot: -15deg; --trot: -10deg; --delay: 0.08s; width: 18px; height: 22px; }
.reserve-note--06 { --tx: -186px; --ty: 62px;  --fx: -320px; --fy: 170px;  --frot: 22deg;  --trot: 14deg;  --delay: 0.12s; width: 16px; height: 21px; }

/* Nav pill is much narrower (auto width, same 64px height) — pull the
   spread in on X only, keep the same vertical clearance so notes still
   clear the pill's rounded top/bottom edge. */
.nav-cta-wrap .reserve-note--01 { --tx: -78px; --fx: -150px; }
.nav-cta-wrap .reserve-note--02 { --tx: -38px; --fx: -85px; }
.nav-cta-wrap .reserve-note--03 { --tx: 38px;  --fx: 95px; }
.nav-cta-wrap .reserve-note--04 { --tx: 78px;  --fx: 155px; }
.nav-cta-wrap .reserve-note--05 { --tx: 78px;  --fx: 155px; }
.nav-cta-wrap .reserve-note--06 { --tx: -78px; --fx: -150px; }

@media (prefers-reduced-motion: reduce), (hover: none) {
  .reserve-note { display: none; }
}

@media (max-width: 768px) {
  .reserve-cta {
    --note-fx-scale: 0.55;
  }
}

@media (max-width: 768px) {
  .offer-section {
    padding: 80px 24px 64px;
  }

  .offer-columns {
    flex-direction: column;
    gap: 40px;
  }

  .offer-col--left {
    border-right: none;
    padding-right: 0;
    padding-bottom: 32px;
    width: 100%;
  }

  .offer-col--right {
    padding: 0;
  }
}

/* =========================================================
   Concept
   ========================================================= */
.concept {
  position: relative;
  overflow: hidden;
  --bg-cream: #f2ece0;
  --eyebrow: #8a6d3a;
  --heading-dark: #2a1f18;
  --heading-maroon: #5e1e28;
  --subheading: #3a2a20;
  --body-text: #5a4a3c;
  background: var(--bg-cream);
  padding: 180px 24px;
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", serif;
}

.concept__container {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.0693fr);
  grid-template-areas:
    "title image"
    "body  image";
  column-gap: 32px;
  row-gap: 16px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.concept__title {
  grid-area: title;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.concept__eyebrow {
  margin: 0;
  color: var(--eyebrow);
  font-weight: 300;
  font-size: 17.333px;
  letter-spacing: 6.9333px;
  white-space: nowrap;
}

.concept__heading {
  margin: 0;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.7;
}

.concept__heading span {
  display: block;
  color: var(--heading-dark);
}

.concept__heading .line2 {
  color: var(--heading-maroon);
}

.concept__subheading {
  margin: 0;
  color: var(--subheading);
  font-weight: 300;
  font-size: 24px;
  line-height: 60.8px;
  letter-spacing: 1.92px;
}

.concept__body {
  grid-area: body;
  min-width: 0;
  margin: 0;
  color: var(--body-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.64px;
}

.concept__body p { margin: 0; }

.concept__image {
  grid-area: image;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 540 / 350;
  min-width: 0;
  padding: 0 10px;
}

.concept__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Decorative music-note flourishes, positioned per design (1920x805 canvas).
   Horizontal position is a fixed pixel offset from center (--dx), not a
   viewport percentage, so each note stays the same true distance from the
   content container's edge no matter how wide the window is; --note-scale
   pulls that offset (and the note's own size) inward for narrower widths
   where the full-size offset would otherwise collide with the container. */
.concept__note {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  --note-scale: 1;
}

.concept__note img { display: block; width: 100%; height: 100%; }

.note-01 { --dx: 831.74px;  left: calc(50% + var(--dx) * var(--note-scale)); top: 33.70%; width: 33.709px; height: 32.888px; transform: translate(-50%, -50%) rotate(-21.18deg) scale(var(--note-scale)); }
.note-02 { --dx: 741.70px;  left: calc(50% + var(--dx) * var(--note-scale)); top: 10.83%; width: 25.659px; height: 64px;     transform: translate(-50%, -50%) rotate(20.43deg) scale(var(--note-scale)); }
.note-03 { --dx: 721.54px;  left: calc(50% + var(--dx) * var(--note-scale)); top: 52.41%; width: 20.849px; height: 32.676px; transform: translate(-50%, -50%) rotate(18.64deg) scale(var(--note-scale)); }
.note-04 { --dx: -840.38px; left: calc(50% + var(--dx) * var(--note-scale)); top: 11.49%; width: 23.942px; height: 45.100px; transform: translate(-50%, -50%) rotate(-10.09deg) skewX(2.62deg) scale(var(--note-scale)); }
.note-05 { --dx: -686.02px; left: calc(50% + var(--dx) * var(--note-scale)); top: 32.81%; width: 11.982px; height: 34.538px; transform: translate(-50%, -50%) rotate(13.83deg) skewX(-3.5deg) scale(var(--note-scale)); }
.note-06 { --dx: -866.69px; left: calc(50% + var(--dx) * var(--note-scale)); top: 53.78%; width: 11.875px; height: 34.53px;  transform: translate(-50%, -50%) rotate(-16.14deg) skewX(4.01deg) scale(var(--note-scale)); }
.note-09 { --dx: 830.40px;  left: calc(50% + var(--dx) * var(--note-scale)); top: 74.53%; width: 18.655px; height: 21.351px; transform: translate(-50%, -50%) rotate(-12.15deg) scale(var(--note-scale)); }

.note-sharp { --dx: -720px; left: calc(50% + var(--dx) * var(--note-scale)); top: 78.24%; width: 27.736px; height: 36.376px; transform: translate(-50%, -50%) scale(var(--note-scale)); }

@media (max-width: 900px) {
  .concept { padding: 96px 14px; }
  .concept__container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "image"
      "body";
    row-gap: 40px;
    justify-items: center;
  }
  .concept__title,
  .concept__image,
  .concept__body {
    width: 100%;
    min-width: 0;
  }
  .concept__title { align-items: center; text-align: center; }
  .concept__body { text-align: center; }
  .concept__image { height: auto; aspect-ratio: 540 / 350; }
}

/* Below 1700px the side margins are too narrow for full-size notes at their
   fixed offset, so shrink and pull them inward instead of hiding them. */
@media (max-width: 1700px) {
  .concept__note { --note-scale: 0.5; }
}

/* =========================================================
   Experience
   ========================================================= */
.experience {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 180px 24px;
  overflow: hidden;
  background: #241a15;
  font-family: "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
}

.experience__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.experience__bg img {
  position: absolute;
  left: 0;
  top: -27.37%;
  width: 100%;
  height: 176.46%;
  object-fit: cover;
}

.experience__overlay {
  position: absolute;
  inset: 0;
  background: rgba(36, 26, 21, 0.85);
}

.experience__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  width: 100%;
  max-width: 1080px;
}

.experience__photo {
  flex: 0 0 auto;
  width: 540px;
  height: 350px;
}

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

.experience__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 478px;
}

.experience__title-block,
.experience__text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.experience__eyebrow {
  font-weight: 300;
  color: #c6a15c;
  font-size: 17.333px;
  letter-spacing: 0.4em;
  white-space: nowrap;
}

.experience__heading {
  margin: 0;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.7;
  color: #f4efe4;
}

.experience__heading span {
  display: block;
  color: #e4c98a;
}

.experience__lead {
  font-weight: 300;
  font-size: 24px;
  line-height: 1.7;
  letter-spacing: 0.0733em;
  color: #ede3d0;
}

.experience__body {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: #c9bba5;
}

.experience__note {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0467em;
  color: #c9bba5;
}

@media (max-width: 900px) {
  .experience {
    padding: 96px 12px;
  }

  .experience__container {
    flex-direction: column;
    gap: 32px;
  }

  .experience__photo {
    width: 100%;
    max-width: 540px;
    height: auto;
    aspect-ratio: 540 / 350;
    order: 2;
    padding: 0 12px;
  }

  .experience__content {
    display: contents;
  }

  .experience__title-block {
    order: 1;
    max-width: 100%;
  }

  .experience__text-block {
    order: 3;
    max-width: 100%;
  }

  .experience__heading {
    font-size: 32px;
  }

  .experience__lead {
    font-size: 20px;
  }
}

/* =========================================================
   Plan overview
   ========================================================= */
.plan-overview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 180px 115px 120px;
  --plan-gold: #8a6d3a;
  --plan-ink: #2a1f18;
  --plan-ink-soft: #3a2a20;
  --plan-ink-muted: #6a5a4c;
  --plan-note: #8a7b6c;
  --plan-maroon: #5e1e28;
  --plan-tag-text: #f2ece0;
  --plan-divider: rgba(94, 30, 40, 0.18);
  --plan-overlay: rgba(242, 236, 224, 0.85);
  font-family: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'YuMincho', 'Yu Mincho', serif;
  background: #f2ece0;
  color: var(--plan-ink-soft);
}

.plan-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/bg-texture.webp");
  background-size: cover;
  background-position: center;
}

.plan-overview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--plan-overlay);
}

.plan-overview > * {
  position: relative;
  z-index: 1;
}

.po-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}

.po-icon {
  width: 128px;
  height: 128px;
  overflow: visible;
}

.po-icon__ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: po-ring-pulse 3.6s ease-out infinite;
}

.po-icon__ring:nth-child(1) { animation-delay: 0s; }
.po-icon__ring:nth-child(2) { animation-delay: -1.2s; }
.po-icon__ring:nth-child(3) { animation-delay: -2.4s; }

@keyframes po-ring-pulse {
  0% {
    transform: scale(0.05);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .po-icon__ring {
    animation: none;
    opacity: 1;
  }
}

.po-eyebrow {
  margin-top: 40px;
  font-size: 16px;
  color: var(--plan-gold);
  text-align: center;
  letter-spacing: 6.93px;
}

.po-title {
  margin-top: 27px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--plan-ink);
  text-align: center;
}

.po-body {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 48px;
}

.po-details {
  width: 746px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.po-row {
  display: flex;
  gap: 29px;
  width: 100%;
  padding: 29px 0 31px;
}

.po-row + .po-row {
  border-top: 1.33px solid var(--plan-divider);
}

.po-row--price {
  border-top: 1.33px solid var(--plan-divider);
  padding-bottom: 0;
}

.po-label {
  min-width: 99px;
  flex-shrink: 0;
  font-size: 20px;
  color: var(--plan-gold);
  letter-spacing: 4.8px;
}

.po-value {
  font-size: 18px;
  line-height: 1.7;
  color: var(--plan-ink-soft);
}

.po-value p { margin: 0; }
.po-value p + p { margin-top: 0; }

.po-value--muted p:last-child {
  color: var(--plan-ink-muted);
}

.po-price {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.po-price-item {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.po-price-tag {
  flex-shrink: 0;
  width: 80px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--plan-gold);
  border-radius: 4px;
  color: var(--plan-tag-text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.64px;
  line-height: 1.8;
  text-align: center;
  white-space: nowrap;
}

.po-price-text {
  font-size: 18px;
  letter-spacing: 0.72px;
  line-height: 1.8;
  color: var(--plan-ink-soft);
}

.po-price-text p { margin: 0; }

.po-price-note {
  padding-top: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--plan-note);
}

.po-price-note p { margin: 0; }

.photo-wrap {
  width: 100%;
  max-width: 900px;
  margin-top: 29px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photo-swiper {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 506;
  background: #c4c4c4;
  overflow: hidden;
}

.photo-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-swiper__pagination {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 12px;
}

.photo-swiper__pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #6a5a4c;
  opacity: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.po-body .photo-swiper__pagination .swiper-pagination-bullet-active {
  width: 10px;
  height: 10px;
  border: none;
  background: var(--plan-maroon);
}

.po-cta-wrap {
  position: relative;
  display: inline-flex;
  margin-top: 40px;
  width: 401px;
  max-width: 100%;
}

.po-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 64px;
  background: var(--plan-maroon);
  border-radius: 74px;
  color: var(--plan-tag-text);
  font-size: 16px;
  letter-spacing: 5.12px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.po-cta img {
  width: 6px;
  height: 11px;
}

@media (max-width: 900px) {
  .plan-overview {
    padding: 100px 24px 72px;
  }

  .po-title {
    font-size: 24px;
  }

  .po-row {
    flex-direction: column;
    gap: 8px;
  }

  .po-price-item {
    flex-direction: column;
    gap: 8px;
  }
}

/* =========================================================
   Menu
   ========================================================= */
.menu {
  position: relative;
  width: 100%;
  overflow: hidden;
  --menu-bg: #241a15;
  --menu-eyebrow: #c6a15c;
  --menu-title: #f4efe4;
  --menu-text: #efe2cb;
  --font-mincho: "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
  background: var(--menu-bg);
}

.menu__vinyl {
  position: absolute;
  z-index: 0;
  right: -287px;
  bottom: -172.5px;
  width: 667px;
  height: 500.25px;
  object-fit: cover;
  pointer-events: none;
}

.menu__container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(80px, 8.333vw, 160px) clamp(24px, 6vw, 115.2px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu__eyebrow {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.4333em;
  color: var(--menu-eyebrow);
  text-align: center;
}

.menu__title {
  margin: 24px 0 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.7;
  text-align: center;
  color: var(--menu-title);
}

.menu__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 34px;
  width: 100%;
  max-width: 1080px;
  margin-top: 40px;
}

.menu__category {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  text-align: center;
  color: var(--menu-text);
}

.menu__item {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.menu__photo {
  flex: 0 0 auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
}

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

.menu__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-mincho);
  font-weight: 400;
  color: var(--menu-text);
}

.menu__name {
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.menu__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .menu__vinyl {
    --vinyl-w: clamp(200px, 60vw, 380px);
    width: var(--vinyl-w);
    height: auto;
    aspect-ratio: 667 / 500.25;
    right: calc(var(--vinyl-w) * -0.4303);
    bottom: calc(var(--vinyl-w) * -0.3448);
  }

  .menu__item, .christmas-menu__item {
    grid-column: unset!important;
  }

  .experience__lead, .experience__note {
    text-wrap: unset!important;
  }

  .menu__container {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .menu__title {
    font-size: 32px;
  }

  .menu__list {
    grid-template-columns: 1fr;
  }
  
}

@media (max-width: 480px) {
  .menu__item {
    gap: 20px;
  }

  .menu__photo {
    width: 120px;
    height: 120px;
  }
}

/* =========================================================
   Christmas Edition (hero-style overview)
   ========================================================= */
.christmas-edition {
  position: relative;
  --ce-bg: #790014;
  --ce-gold: #e4c98a;
  --ce-ivory: #f4efe4;
  --ce-value: #eae0cd;
  --ce-muted: #a99b84;
  --ce-divider: rgba(94, 30, 40, 0.18);
  --ce-badge: #8a6d3a;
  --ce-badge-text: #f2ece0;
  --ce-cta: #b08a4a;
  background: var(--ce-bg);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  padding: clamp(90px, 9.4vw, 180px) 24px clamp(70px, 6.25vw, 120px);
}

/* decorative ornaments hanging from the top edge — swing on hover/touch */
.ce-decor-canvas {
  position: absolute;
  top: 0;
  display: block;
  pointer-events: none;
  z-index: 0;
  left: 0.78vw;
  width: 48vw;
  max-width: 900px;
  aspect-ratio: 1503 / 783;
}
.ce-decor-canvas--right {
  left: auto;
  right: 0.78vw;
}
@media (max-width: 640px) {
  .ce-decor-canvas--right { display: none; }
  .ce-decor-canvas--left {
    left: 0;
    width: 100%;
    max-width: none;
  }
}

.christmas-edition .ce-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ce-icon {
  width: clamp(72px, 8.15vw, 117px);
  height: clamp(72px, 8.15vw, 117px);
}
.ce-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }

.ce-icon__ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: po-ring-pulse 3.6s ease-out infinite;
}

.ce-icon__ring:nth-child(1) { animation-delay: 0s; }
.ce-icon__ring:nth-child(2) { animation-delay: -1.2s; }
.ce-icon__ring:nth-child(3) { animation-delay: -2.4s; }

@media (prefers-reduced-motion: reduce) {
  .ce-icon__ring {
    animation: none;
    opacity: 1;
  }
}

.ce-eyebrow {
  margin: 40px 0 0;
  color: var(--ce-gold);
  font-size: clamp(13px, 1.2vw, 17.3px);
  letter-spacing: 0.44em;
  text-align: center;
}

.ce-heading {
  margin: 32px 0 0;
  text-align: center;
  font-weight: 600;
}
.ce-heading span {
  display: block;
  color: var(--ce-ivory);
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.7;
}
.ce-heading .ce-accent { color: var(--ce-gold); }

.ce-info-list {
  width: 100%;
  max-width: 746px;
  margin-top: 40px;
}

.ce-info-row {
  display: flex;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1.33px solid var(--ce-divider);
  min-width: 0;
}
.ce-price-row { border-bottom: none; gap: 8px; }

.ce-info-label {
  flex: 0 0 auto;
  min-width: 74px;
  color: var(--ce-gold);
  font-size: clamp(15px, 1.4vw, 20px);
  letter-spacing: 0.24em;
}
.ce-price-row .ce-info-label { padding-top: 6px; }

.ce-info-value {
  min-width: 0;
  color: var(--ce-value);
  font-size: 18px;
  line-height: 1.7;
}
.ce-info-value p { margin: 0; }
.ce-info-value .ce-sub { color: var(--ce-muted); }

.ce-price-value { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ce-price-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.ce-badge {
  flex: 0 0 auto;
  min-width: 80px;
  padding: 5px 16px;
  border-radius: 4px;
  background: var(--ce-badge);
  color: var(--ce-badge-text);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.8;
  white-space: nowrap;
}
.ce-price-text {
  flex: 1 1 220px;
  min-width: 0;
  color: var(--ce-value);
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.8;
}
.ce-price-text p { margin: 0; }

.ce-price-note {
  margin: 16px 0 0;
  color: var(--ce-value);
  font-size: 16px;
  line-height: 1.7;
}
.ce-price-note p { margin: 0; }

.christmas-edition .photo-wrap {
  margin-top: 40px;
}

.christmas-edition .photo-swiper__pagination .swiper-pagination-bullet-active {
  width: 10px;
  height: 10px;
  border: none;
  background: #5e1e28;
}

.ce-cta-wrap {
  position: relative;
  display: flex;
  margin-top: 40px;
  width: 100%;
  max-width: 401px;
}

.ce-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 64px;
  border-radius: 74px;
  background: var(--ce-cta);
  color: var(--ce-badge-text);
  font-size: 16px;
  letter-spacing: 0.32em;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.ce-cta:hover { opacity: 0.85; }
.ce-cta img { width: 6px; height: auto; }

@media (max-width: 640px) {
  .ce-info-row { flex-direction: column; gap: 8px; }
  .ce-price-item { gap: 16px; }

}

/* =========================================================
   Christmas Menu
   ========================================================= */
.christmas-menu {
  position: relative;
  width: 100%;
  overflow: hidden;
  --christmas-menu-bg: #f2ece0;
  --christmas-menu-eyebrow: #8a6d3a;
  --christmas-menu-title: #790014;
  --christmas-menu-text: #6a5a4c;
  --font-mincho: "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
  background: var(--christmas-menu-bg);
}

.christmas-menu__container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(80px, 8.333vw, 160px) clamp(24px, 6vw, 115.2px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.christmas-menu__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.christmas-menu__eyebrow {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.4333em;
  color: var(--christmas-menu-eyebrow);
  text-align: center;
}

.christmas-menu__title {
  margin: 24px 0 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.7;
  text-align: center;
  color: var(--christmas-menu-title);
}

.christmas-menu__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 34px;
  width: 100%;
  max-width: 1080px;
  margin-top: 40px;
}

.christmas-menu__category {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
  color: var(--christmas-menu-text);
}

.christmas-menu__item {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.christmas-menu__photo {
  flex: 0 0 auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
}

.christmas-menu__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.christmas-menu__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-mincho);
  font-weight: 400;
  color: var(--christmas-menu-text);
}

.christmas-menu__name {
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.christmas-menu__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .christmas-menu__container {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .christmas-menu__title {
    font-size: 32px;
  }

  .christmas-menu__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .christmas-menu__item {
    gap: 20px;
  }

  .christmas-menu__photo {
    width: 120px;
    height: 120px;
  }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  position: relative;
  --footer-cream: #f2ece0;
  --footer-maroon: #790014;
  --footer-overlay: rgba(31, 0, 5, 0.7);
  --font-mincho: "Hiragino Mincho Pro", "HGS明朝E", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  background-color: #1f0005;
  font-family: var(--font-mincho);
  color: var(--footer-cream);
  overflow: hidden;
}

.site-footer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.site-footer__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-footer__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--footer-overlay);
}

.site-footer__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-notes {
  align-self: center;
  width: 100%;
  max-width: 1087px;
  margin: 0 0 88px;
  font-size: 16px;
  line-height: 1.6;
}

.footer-notes p {
  margin: 0 0 2px;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer-logo__crest {
  width: 71px;
  height: 71px;
  margin-bottom: 6px;
}

.footer-logo__wordmark {
  display: flex;
  align-items: center;
  gap: 2px;
}

.footer-logo__wordmark img:first-child {
  width: 101px;
  height: 29px;
}

.footer-logo__wordmark img:last-child {
  width: 86px;
  height: 31px;
}

.footer-logo__line {
  width: 291px;
  height: 3px;
  margin-top: 4px;
}

.footer-logo__shinjuku {
  width: 135px;
  height: 29px;
  margin-top: 6px;
}

.footer-hotel-name {
  margin: 47px 0 0;
  font-size: 20px;
  line-height: 1.7;
  font-weight: 400;
}

.footer-address {
  margin: 9px 0 0;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 38px 0 0;
}

.footer-social a {
  position: relative;
  display: block;
  width: 55px;
  height: 55px;
  border-radius: 50%;
}

.icon-instagram img,
.icon-line img {
  position: relative;
  width: 55px;
  height: 55px;
  display: block;
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 38px 0 0;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.footer-nav img {
  width: 1px;
  height: 28px;
}

.footer-nav a {
  color: var(--footer-cream);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.8;
  white-space: nowrap;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.site-footer__copyright {
  position: relative;
  z-index: 1;
  background-color: var(--footer-maroon);
  text-align: center;
  padding: 16px 16px;
}

.site-footer__copyright p {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}

@media (max-width: 600px) {
  .site-footer__content { padding: 48px 20px 56px; }
  .footer-notes { font-size: 12px; margin-bottom: 56px; }
  .footer-logo__crest { width: 50px; height: 50px; }
  .footer-logo__wordmark img:first-child { width: 71px; height: 20px; }
  .footer-logo__wordmark img:last-child { width: 60px; height: 22px; }
  .footer-logo__line { width: 204px; height: 2px; }
  .footer-logo__shinjuku { width: 95px; height: 20px; }
  .footer-hotel-name { font-size: 17px; margin-top: 32px; }
  .footer-address { font-size: 13px; }
  .footer-nav { flex-direction: column; gap: 10px 14px; row-gap: 10px; }
  .footer-nav img { display: none; }
  .footer-nav a { font-size: 13px; white-space: normal; }
  .footer-social { margin-top: 28px; }
  .footer-nav { margin-top: 28px; }
  .site-footer__copyright p { font-size: 10px; }
}

.max375 { display: none; }

@media (max-width: 375px) {
  .max375 { display: inline; }
}

.max520 { display: inline; }
.min520 { display: none; }

@media (min-width: 521px) {
  .max520 { display: none; }
  .min520 { display: inline; }
}

/* =========================================================
   Motion & interaction layer
   (scroll reveals, thematic accents, tactile feedback)
   ========================================================= */

/* Smooth in-page scrolling for the nav anchor links */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Scroll-reveal: class is only ever added by JS when the browser
   supports IntersectionObserver and the user has not asked for
   reduced motion, so content is never stuck hidden without JS. */
.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-reveal--left { transform: translate(-36px, 0); }
.js-reveal--right { transform: translate(36px, 0); }
.js-reveal.is-visible,
.js-reveal--left.is-visible,
.js-reveal--right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

@media (max-width: 640px) {
  .js-reveal,
  .js-reveal--left,
  .js-reveal--right {
    transform: translateY(20px);
  }
}

/* Concept notes fade and unblur in with a light stagger as the section
   scrolls into view; kept transform-free (no translate) so it doesn't
   fight each note's own position/rotation/scale transform above. */
.note-reveal {
  opacity: 0;
  filter: blur(6px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.note-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
}

/* Header entrance: the hero copy arrives as a short beat, eyebrow
   first, then title, subtitle, lead, mirroring a reading order. */
@media (prefers-reduced-motion: no-preference) {
  .header__eyebrow,
  .header__title,
  .header__subtitle,
  .header__lead {
    animation: fade-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .header__eyebrow { animation-delay: 0.1s; }
  .header__title { animation-delay: 0.28s; }
  .header__subtitle { animation-delay: 0.52s; }
  .header__lead { animation-delay: 0.7s; }
}

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Vinyl records spin slowly, tying the decorative artwork to the
   record-culture concept the copy describes. */
@media (prefers-reduced-motion: no-preference) {
  .header__vinyl,
  .menu__vinyl {
    animation: vinyl-spin 55s linear infinite;
  }
}

@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Music notes drift gently, echoing the "afternoon full of music"
   concept copy; the outer note element keeps its static position
   and tilt, only the image inside drifts. */
@media (prefers-reduced-motion: no-preference) {
  .concept__note img { animation: note-float 6s ease-in-out infinite; }
  .concept__note.note-02 img { animation-duration: 7s; animation-delay: -1.5s; }
  .concept__note.note-04 img { animation-duration: 7.6s; animation-delay: -3s; }
  .concept__note.note-06 img { animation-duration: 6.4s; animation-delay: -2.2s; }
  .concept__note.note-09 img { animation-duration: 7.2s; animation-delay: -4s; }
  .concept__note.note-sharp img { animation-duration: 8s; animation-delay: -1s; }
}

@keyframes note-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Photo hover: a small, controlled zoom gives the imagery a touch
   of life without moving the surrounding layout. */
.concept__image,
.experience__photo {
  overflow: hidden;
}
.concept__image img,
.experience__photo img,
.menu__photo img,
.christmas-menu__photo img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.concept__image:hover img,
.experience__photo:hover img,
.menu__item:hover .menu__photo img,
.christmas-menu__item:hover .christmas-menu__photo img {
  transform: scale(1.06);
}

/* CTA tactile feedback: a small lift on hover, a small press on
   click, applied consistently across every reservation button. */
.nav-cta,
.offer-link,
.po-cta,
.ce-cta {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.nav-cta:hover,
.offer-link:hover,
.po-cta:hover,
.ce-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.nav-cta:active,
.offer-link:active,
.po-cta:active,
.ce-cta:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

/* Social icons: lift slightly and glow with the site's gold accent,
   the same feedback language as the reservation buttons above. */
.footer-social a,
.icon-instagram img,
.icon-line img,
.footer-social a::before {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.footer-social a:hover {
  transform: translateY(-3px);
}
.footer-social a:hover img {
  transform: scale(1.1);
}
.footer-social a:active {
  transform: translateY(-1px);
}
.footer-social a:active img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta, .offer-link, .po-cta, .ce-cta,
  .concept__image img, .experience__photo img, .menu__photo img, .christmas-menu__photo img,
  .footer-social a, .icon-instagram img, .icon-line img, .footer-social a::before {
    transition: none;
  }
}

/* Back-to-top: fixed circular button, gold-on-dark to match the
   nav/CTA palette. Hidden until the page has scrolled a bit, then
   fades/lifts in; shares the same tactile hover/press language as
   the reservation CTAs. */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.333px solid rgba(176, 138, 74, 0.4);
  background: #b08a4a;
  color: #f2ece0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.back-to-top:active {
  transform: translateY(-1px) scale(0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
}

.max640 {
  display: none;
}

.min640 {
  display: inline-block;
}

@media (max-width: 640px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
  .header__subtitle {
    font-size: 11px;
  }
  .header__lead {
    font-size: 11px;
  }
  .offer-col > * {
    font-size: 1em;
  }
  .offer-date {
    margin-bottom: 16px;
  }
  .offer-columns {
    gap: 0;
  }
  .offer-col--left {
    padding-bottom: 0;
  }
  .offer-desc {
    line-height: 1.4;
  }
  .concept__heading {
    font-size: 30px;
  }
  .concept__subheading {
    font-size: 15px;
  }
  .max640 {
    display: inline-block;
  }
  .min640 {
    display: none;
  }
  .ce-accent {
    font-size: 22px!important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.3s ease;
  }
}