/* =============================================================================
   NAGI — Japanese Head Spa · landing page styles

   Mobile-first: base rules target small phones (320px+). Larger screens add
   rules through min-width queries, written in em so they follow browser zoom:

     30em   480px   large phones
     40em   640px   phablets / small tablets
     48em   768px   tablets, portrait (full navigation appears)
     56em   896px   large tablets / small laptops (ritual section goes two-up)
     64em  1024px   tablets (landscape), laptops, desktops

   Past 64em the layout grows into the 80rem (1280px) container, and the fluid
   clamp() type scale tops out around 1440px. One extra query tightens the fixed
   header and booking button on phones held sideways (short, under 64em wide).

   Order: tokens → reset → base → layout → components (page order) → utilities.
   Class names follow BEM: .block, .block__element, .block--modifier.
   ========================================================================== */

@layer reset, base, layout, components, utilities;


/* -----------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette */
  --cream: #f1e9d8;
  --paper: #fbf7ee;
  --ink: #1a1410;
  --burgundy: #4d141d;
  --forest: #0a4a3a;
  --gold: #c4a260;
  --gold-light: #d8b87c;
  --gold-pale: #e7cd8e;
  --gold-deep: #7d5f27;          /* gold for text and icons on light grounds (WCAG AA) */

  /* Text and rule tints */
  --ink-soft: rgb(26 20 16 / .84);
  --ink-muted: rgb(26 20 16 / .74);
  --cream-soft: rgb(241 233 216 / .88);
  --cream-muted: rgb(241 233 216 / .72);
  --rule: rgb(196 162 96 / .5);
  --rule-strong: rgb(196 162 96 / .75);
  --rule-on-dark: rgb(196 162 96 / .4);
  --rule-faint: rgb(196 162 96 / .35);

  /* Keyboard focus ring; dark surfaces switch it to light gold (see base layer). */
  --focus: var(--burgundy);

  /* Typefaces */
  --font-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-sans: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-cjk: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --font-cjk-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;

  /* Type scale: fixed small sizes, fluid display sizes (320px → 1440px) */
  --text-2xs: .6875rem;                                  /* 11 */
  --text-xs: .75rem;                                     /* 12 */
  --text-sm: .875rem;                                    /* 14 */
  --text-base: 1rem;                                     /* 16 */
  --text-md: clamp(1rem, .95rem + .25vw, 1.09375rem);    /* 16 → 17.5 */
  --text-lg: clamp(1.25rem, 1.18rem + .3vw, 1.4375rem);  /* 20 → 23 */
  --text-xl: clamp(1.375rem, 1.3rem + .35vw, 1.5625rem); /* 22 → 25 */
  --text-2xl: clamp(1.75rem, 1.43rem + 1.6vw, 2.625rem); /* 28 → 42 */
  --text-3xl: clamp(2.375rem, 1.8rem + 2.9vw, 4rem);     /* 38 → 64 */
  --text-4xl: clamp(2.375rem, 1.6rem + 3.9vw, 4.5rem);   /* 38 → 72 */
  --text-5xl: clamp(3rem, 2.15rem + 4.3vw, 6rem);        /* 48 → 96 */

  --tracking-label: .3em;
  --tracking-eyebrow: .36em;
  --tracking-button: .24em;

  /* Spacing. The gutter also clears the notch on landscape iPhones (viewport-fit=cover). */
  --gutter: max(clamp(1.25rem, 4vw, 3.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --section-y: clamp(4.5rem, 3.2rem + 6.5vw, 8.125rem);
  --container: 80rem;            /* 1280 */
  --container-narrow: 55rem;     /* 880 */
  --header-h: 4rem;

  /* Shape, depth, motion */
  --radius-pill: 999px;
  --radius-arch: 999px 999px 0 0;
  --shadow-card: 0 18px 40px -20px rgb(26 20 16 / .45);
  --shadow-float: 0 22px 50px -18px rgb(26 20 16 / .7);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .3s;
}

@media (min-width: 48em) {
  :root { --header-h: 5.125rem; }
}

/* Phones on their side: slimmer header (must follow the 48em value above). */
@media (orientation: landscape) and (max-height: 30em) and (max-width: 63.99em) {
  :root { --header-h: 3.25rem; }
}


/* -----------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

  img, picture, svg { display: block; max-width: 100%; }
  img { height: auto; }

  button { font: inherit; color: inherit; }

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


/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Keep scrolled-to and focused content clear of the sticky header and the
       floating booking button. */
    scroll-padding-top: var(--header-h);
    scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }

  @media (min-width: 48em) {
    html { scroll-padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); }
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    min-height: 100vh;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 400;              /* light (300) is opted into by body-copy classes */
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.1;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  a {
    color: var(--burgundy);
    text-decoration: none;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }

  a:hover { color: var(--ink); }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }

  .skip-link, .site-header, .section--forest, .section--ink,
  .manifesto, .banner, .site-footer, .sticky-cta {
    --focus: var(--gold-light);
  }

  ::selection { background: var(--burgundy); color: var(--cream); }

  [lang="ja"] { font-family: var(--font-cjk); }
}


/* -----------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }

  .container--narrow { --container: var(--container-narrow); }

  .section { padding-block: var(--section-y); }

  .section--forest { background: var(--forest); color: var(--cream); }
  .section--ink { background: var(--ink); color: var(--cream); }

  .section-head {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 2.5rem);
  }

  .section-head--center { justify-items: center; text-align: center; }
}


/* -----------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */

@layer components {

  /* ---------- Typography helpers ---------- */

  .eyebrow {
    font-size: var(--text-xs);
    line-height: 1.5;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--burgundy);
  }

  .eyebrow--gold { color: var(--gold-light); }

  .eyebrow--rule {
    display: flex;
    gap: .75rem;
  }

  /* Short gold rule, centred on the first line of text. */
  .eyebrow--rule::before {
    content: "";
    flex: none;
    width: 1.75rem;
    height: 1px;
    margin-top: .75em;
    background: var(--gold);
  }

  /* Two-part eyebrows ("Opening soon · Academy Road") stack on phones rather
     than wrapping around the dot. */
  .eyebrow__sep { display: none; }
  .eyebrow__part { display: block; }

  @media (min-width: 30em) {
    .eyebrow__sep,
    .eyebrow__part { display: inline; }
  }

  .section-title {
    font-size: var(--text-3xl);
    font-weight: 300;
    line-height: 1.05;
  }

  .section-title em,
  .room__title em,
  .hero__title em {
    color: var(--burgundy);
  }

  .section--forest .section-title,
  .section--forest .section-title em { color: var(--cream); }


  /* ---------- Buttons ---------- */

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.0625rem 2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    line-height: 1.5;
    letter-spacing: var(--tracking-button);
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
  }

  .btn--primary { background: var(--burgundy); color: var(--cream); }
  .btn--primary:hover { background: var(--ink); color: var(--cream); }

  .btn--ghost { border-color: rgb(26 20 16 / .35); color: var(--ink); }
  .btn--ghost:hover { border-color: var(--burgundy); color: var(--burgundy); }

  .btn--gold { background: var(--gold); color: var(--ink); }
  .btn--gold:hover { background: var(--gold-light); color: var(--ink); }

  /* Outline buttons for dark grounds: gold (stronger) and cream (quieter). */
  .btn--outline-light { border-color: var(--gold); color: var(--cream); }
  .btn--outline-light:hover { background: var(--gold); color: var(--ink); }

  .btn--outline-cream { border-color: rgb(241 233 216 / .45); color: var(--cream); }
  .btn--outline-cream:hover { border-color: var(--gold); color: var(--gold); }

  /* Square, framed button used in the header. */
  .btn--frame {
    min-height: 2.75rem;
    padding: .75rem 1.625rem;
    border-color: var(--gold);
    border-radius: 0;
    font-size: var(--text-2xs);
    font-weight: 300;
    letter-spacing: .32em;
    color: var(--gold-pale);
  }

  .btn--frame:hover { background: var(--gold); color: var(--ink); }

  /* Full-width stacked buttons on small phones. */
  .btn-row > .btn { flex: 1 1 100%; }

  @media (min-width: 30em) {
    .btn-row > .btn { flex: 0 1 auto; }
  }


  /* ---------- Skip link ---------- */

  .skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--ink);
    color: var(--cream);
    font-size: var(--text-sm);
    transform: translateY(-200%);
  }

  .skip-link:focus { transform: none; color: var(--cream); }


  /* ---------- Brand (logo lockup) ---------- */

  @keyframes brand-glow {
    0%, 100% { filter: drop-shadow(0 0 2px rgb(216 184 124 / .35)) brightness(1.05); }
    50%      { filter: drop-shadow(0 0 10px rgb(216 184 124 / .75)) brightness(1.2); }
  }

  @keyframes brand-shine {
    0%, 55% { background-position: 120% 0; }
    100%    { background-position: -120% 0; }
  }

  .brand {
    --mark: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--gold-light);
  }

  .brand:hover { color: var(--gold-pale); }

  .brand__mark {
    position: relative;
    flex: none;
    width: var(--mark);
    height: var(--mark);
  }

  .brand__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Light sweep across the mark, clipped to its silhouette. */
  .brand__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgb(255 246 214 / 0) 38%,
                rgb(255 246 214 / .95) 50%, rgb(255 246 214 / 0) 62%, transparent 70%)
                0 0 / 300% 100% no-repeat;
    -webkit-mask: url("../assets/img/mark-cream-192.webp") center / contain no-repeat;
            mask: url("../assets/img/mark-cream-192.webp") center / contain no-repeat;
  }

  /* One 4.5s pass on load (under WCAG 2.2.2's five-second limit for motion
     without a pause control), repeating while the logo is hovered or focused. */
  @media (prefers-reduced-motion: no-preference) {
    .brand__mark img { animation: brand-glow 4.5s ease-in-out both; }
    .brand__mark::after { animation: brand-shine 4.5s ease-in-out both; }

    .brand:is(:hover, :focus-visible) .brand__mark img,
    .brand:is(:hover, :focus-visible) .brand__mark::after { animation-iteration-count: infinite; }
  }

  .brand__text {
    display: grid;
    gap: .3rem;
    padding-top: .25rem;
  }

  .brand__name {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .3em;
  }

  .brand__tagline {
    font-size: .5rem;
    line-height: 1;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--cream);
  }

  @media (min-width: 48em) {
    .brand { --mark: 3.375rem; gap: .875rem; }
    .brand__name { font-size: 1.875rem; }
    .brand__tagline { font-size: .5625rem; }
  }


  /* ---------- Site header & navigation ---------- */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgb(77 20 29 / .97);
    border-bottom: 1px solid var(--rule-faint);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-h);
    padding-block: .625rem;
  }

  .nav-toggle {
    display: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -.625rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cream);
    cursor: pointer;
  }

  /* Two-line "menu" icon that turns into a cross when open. Lines are borders,
     not backgrounds, so they stay visible in Windows High Contrast mode. */
  .nav-toggle__icon {
    position: relative;
    width: 1.5rem;
    height: .5rem;
  }

  .nav-toggle__icon::before,
  .nav-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    border-top: 1px solid;
    transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
  }

  .nav-toggle__icon::before { top: 0; }
  .nav-toggle__icon::after { top: 100%; }

  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 50%; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 50%; transform: rotate(-45deg); }

  .site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1.5rem;
    font-size: var(--text-2xs);
    font-weight: 300;
    letter-spacing: .32em;
    text-transform: uppercase;
  }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
  }

  .site-nav__link {
    display: inline-block;
    padding-block: .5rem;
    border-bottom: 1px solid transparent;
    color: var(--cream);
  }

  .site-nav__link:hover {
    border-bottom-color: rgb(196 162 96 / .7);
    color: var(--gold-pale);
  }

  /* Small screens with JS: collapse the nav into a drop-down panel. */
  @media (max-width: 47.99em) {
    .js .nav-toggle { display: grid; }

    .js .site-nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      display: grid;
      gap: 1.75rem;
      /* Scroll inside the panel when it is taller than the screen (landscape, zoom). */
      max-height: calc(100vh - var(--header-h));
      max-height: calc(100dvh - var(--header-h));
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 1.5rem var(--gutter) 2rem;
      background: var(--burgundy);
      border-bottom: 1px solid var(--rule-faint);
      box-shadow: 0 24px 40px -24px rgb(26 20 16 / .6);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-.5rem);
      transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                  visibility 0s linear var(--dur);
    }

    /* Lift the open header (and its panel) above the floating booking button. */
    .js .site-header.is-open { z-index: 50; background: var(--burgundy); }

    .js .site-header.is-open .site-nav {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s;
    }

    .js .site-nav__list { display: grid; gap: 0; }

    .js .site-nav__link {
      display: block;
      padding-block: 1rem;
      border-bottom: 1px solid rgb(196 162 96 / .25);
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 400;
      letter-spacing: .04em;
      text-transform: none;
    }

    .js .site-nav__cta { justify-self: start; }
  }

  @media (max-width: 47.99em) and (orientation: landscape) and (max-height: 30em) {
    .js .site-nav { grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding-block: .75rem 1rem; }
    .js .site-nav__list { grid-auto-flow: column; justify-content: start; gap: 0 2rem; }
    .js .site-nav__link { padding-block: .625rem; border-bottom: 0; font-size: 1.25rem; }
  }

  @media (min-width: 48em) {
    .site-header__inner { flex-wrap: nowrap; padding-block: .875rem; }

    .site-nav {
      --nav-gap: clamp(1.125rem, 3.2vw, 2.75rem);
      flex-wrap: nowrap;
      gap: var(--nav-gap);
    }

    .site-nav__list { flex-wrap: nowrap; gap: var(--nav-gap); }

    /* Hairline divider before the booking button, with the nav gap on both sides. */
    .site-nav__cta { position: relative; margin-left: calc(var(--nav-gap) + 1px); }

    .site-nav__cta::before {
      content: "";
      position: absolute;
      top: 50%;
      left: calc(-1 * var(--nav-gap) - 1px);
      width: 1px;
      height: 1.375rem;
      background: rgb(196 162 96 / .45);
      transform: translateY(-50%);
    }
  }


  /* ---------- Hero ---------- */

  .hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1rem + 6vw, 6rem) clamp(4rem, 2.5rem + 6vw, 6.875rem);
  }

  /* Faint gold circle behind the photo. */
  .hero__halo {
    position: absolute;
    top: -22vw;
    right: -18vw;
    width: 62vw;
    aspect-ratio: 1;
    border: 1px solid var(--rule-faint);
    border-radius: 50%;
    pointer-events: none;
  }

  .hero__grid {
    position: relative;
    display: grid;
    gap: clamp(3rem, 2rem + 4vw, 5.5rem);
    align-items: center;
  }

  .hero__copy {
    display: grid;
    gap: 1.625rem;
    justify-items: start;
  }

  .hero__title {
    font-size: var(--text-5xl);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -.01em;
  }

  .hero__lead {
    max-width: 31.25rem;
    font-size: var(--text-md);
    font-weight: 300;
    line-height: 1.7;
    color: var(--ink-soft);
  }

  .hero__copy .btn-row { width: 100%; margin-top: .25rem; }

  .hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.625rem;
    width: 100%;
    padding-top: 1.375rem;
    border-top: 1px solid var(--rule);
    font-size: .8125rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--ink-muted);
  }

  .hero__media {
    position: relative;
    justify-self: center;
    width: min(100%, 31.25rem);
  }

  .arch {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-arch);
    background: var(--ink);
  }

  .hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transform-origin: 50% 12%;
    filter: brightness(.85) contrast(1.04);
  }

  /* "凪 — nagi, the calm after the wind" card overlapping the photo. */
  .seal-card {
    position: absolute;
    left: 0;
    bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1rem 1.25rem;
    background: var(--cream);
    box-shadow: var(--shadow-card);
  }

  .seal-card__kanji {
    font-family: var(--font-cjk-sans);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--burgundy);
  }

  .seal-card__text { display: grid; gap: .1875rem; }

  .seal-card__word {
    font-size: .625rem;
    line-height: 1.2;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--burgundy);
  }

  .seal-card__meaning {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.2;
  }

  @media (min-width: 48em) {
    .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .hero__media { justify-self: end; }
    .seal-card { left: -1.375rem; bottom: 2.125rem; padding: 1.125rem 1.375rem; }
    .seal-card__kanji { font-size: 2.5rem; }
  }

  @media (min-width: 64em) {
    .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hero__media { justify-self: center; }
  }


  /* ---------- Intro + benefits ---------- */

  .intro {
    border-top: 1px solid var(--rule);
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  }

  .intro__title {
    max-width: 47.5rem;
    margin-bottom: 2.5rem;
    font-size: var(--text-2xl);
    line-height: 1.2;
  }

  .benefits { display: grid; }

  .benefit {
    display: grid;
    gap: .625rem;
    align-content: start;
    padding-block: 1.5rem;
  }

  .benefit + .benefit { border-top: 1px solid var(--rule); }

  .benefit__title {
    font-size: var(--text-xl);
    color: var(--burgundy);
  }

  .benefit__text {
    font-size: .90625rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--ink-soft);
  }

  @media (min-width: 40em) {
    .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .benefit { padding: 1.625rem 1.625rem 1.625rem 0; }
    .benefit:nth-child(2) { border-top: 0; }
    .benefit:nth-child(even) { padding-left: 1.625rem; border-left: 1px solid var(--rule); }
  }

  @media (min-width: 64em) {
    .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .benefit + .benefit { border-top: 0; border-left: 1px solid var(--rule); padding-left: 1.625rem; }
  }


  /* ---------- The ritual (steps) ---------- */

  .ritual__grid {
    display: grid;
    gap: clamp(3rem, 2rem + 4vw, 6rem);
  }

  .ritual__intro {
    display: grid;
    gap: 1.375rem;
    align-content: start;
  }

  .ritual__lead {
    max-width: 27.5rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--cream-soft);
  }

  .ritual__photo {
    max-width: 32.5rem;
    margin-top: .75rem;
    aspect-ratio: 16 / 11;
    overflow: hidden;
  }

  .ritual__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.82) contrast(1.04);
  }

  .step {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1.625rem;
    border-top: 1px solid var(--rule-on-dark);
  }

  .step:last-child { border-bottom: 1px solid var(--rule-on-dark); }

  .step__num {
    font-family: var(--font-serif);
    font-size: 1.875rem;
    line-height: 1;
    color: var(--gold);
  }

  .step__body { display: grid; gap: .5rem; }

  .step__title {
    font-size: var(--text-xl);
    line-height: 1.2;
    color: var(--cream);
  }

  .step__text {
    font-size: .9375rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--cream-soft);
  }

  @media (min-width: 30em) {
    .step { grid-template-columns: 4rem minmax(0, 1fr); gap: 1.125rem; }
    .step__num { font-size: 2.125rem; }
  }

  @media (min-width: 56em) {
    .ritual__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }


  /* ---------- Ritual chooser ---------- */

  /* Phones and small tablets: an even 2 × 2 grid of pills. Tablets up: one row. */
  .needs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 16rem));
    justify-content: center;
    gap: .5rem;
    margin-bottom: 2.5rem;
  }

  .needs__tab {
    min-height: 2.75rem;
    padding: .75rem .5rem;
    border: 1px solid rgb(26 20 16 / .3);
    border-radius: var(--radius-pill);
    background: transparent;
    font-size: .8125rem;
    letter-spacing: .06em;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  }

  .needs__tab:hover { border-color: var(--burgundy); }

  .needs__tab[aria-selected="true"] {
    border-color: var(--burgundy);
    background: var(--burgundy);
    color: var(--cream);
  }

  @media (min-width: 30em) {
    .needs { gap: .625rem; }
    .needs__tab { padding-inline: 1rem; letter-spacing: .12em; }
  }

  @media (min-width: 48em) {
    .needs { display: flex; flex-wrap: wrap; }
    .needs__tab { padding-inline: 1.375rem; }
  }

  .ritual-card {
    --card-pad: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
    display: grid;
    background: var(--paper);
    border: 1px solid rgb(196 162 96 / .55);
    scroll-margin-top: 1rem;       /* added to html's scroll-padding (header height) */
  }

  .ritual-card[hidden] { display: none; }

  .ritual-card:focus-visible { outline-offset: 4px; }

  .ritual-card__main {
    display: grid;
    align-content: start;
    gap: 1.25rem;
    padding: var(--card-pad);
  }

  /* Flex column so the closing note can sit at the bottom of the card. */
  .ritual-card__includes {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: var(--card-pad);
    border-top: 1px solid var(--rule-faint);
  }

  .ritual-card__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
  }

  .ritual-card__num {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    color: var(--gold-deep);
  }

  .badge {
    padding: .375rem .6875rem;
    border-radius: var(--radius-pill);
    background: var(--forest);
    font-size: .625rem;
    line-height: 1.2;
    letter-spacing: var(--tracking-button);
    text-transform: uppercase;
    color: var(--cream);
  }

  .ritual-card__title {
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.875rem);
    line-height: 1.05;
  }

  .ritual-card__line {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--burgundy);
  }

  .ritual-card__price {
    display: flex;
    align-items: baseline;
    gap: 1.125rem;
    padding-block: 1.125rem;
    border-block: 1px solid rgb(196 162 96 / .45);
  }

  .ritual-card__amount {
    font-family: var(--font-serif);
    font-size: 2.75rem;
    line-height: 1;
  }

  .ritual-card__duration {
    font-size: .8125rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .ritual-card__for {
    font-size: .90625rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--ink-soft);
  }

  .ritual-card__cta { justify-self: start; margin-top: .375rem; }

  .ritual-card__label {
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    line-height: 1.5;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--burgundy);
  }

  .dot-list { display: grid; gap: .75rem; }

  .dot-list li {
    position: relative;
    padding-left: 1.0625rem;
    font-size: .9375rem;
    font-weight: 300;
    line-height: 1.55;
  }

  .dot-list li::before {
    content: "";
    position: absolute;
    top: .6em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
  }

  .ritual-card__note {
    margin-top: auto;
    padding-top: 1.125rem;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    color: var(--ink-muted);
  }

  .ritual-picker {
    display: grid;
    gap: .625rem;
    margin-top: 2.5rem;
  }

  .ritual-picker__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    height: 100%;
    min-height: 3.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rule-on-dark);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color .25s var(--ease), border-color .25s var(--ease);
  }

  .ritual-picker__item:hover { border-color: var(--gold); }

  /* Selected: a doubled deep-gold line, so the state doesn't rely on a faint tint. */
  .ritual-picker__item[aria-current="true"] {
    border-color: var(--gold-deep);
    background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--gold-deep);
  }

  .ritual-picker__name {
    font-family: var(--font-serif);
    font-size: 1.1875rem;
    line-height: 1.25;
    text-wrap: pretty;
  }

  .ritual-picker__meta {
    flex: none;
    font-size: var(--text-xs);
    letter-spacing: .14em;
    white-space: nowrap;
    color: var(--burgundy);
  }

  /* Without JS every ritual is listed in full, so the selectors are redundant. */
  .no-js .needs,
  .no-js .ritual-picker { display: none; }

  .no-js .ritual-card[hidden] { display: grid; }
  .no-js .ritual-card + .ritual-card { margin-top: 1.5rem; }

  @media (min-width: 40em) {
    .ritual-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 56em) {
    .ritual-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ritual-card__includes {
      border-top: 0;
      border-left: 1px solid var(--rule-faint);
    }
  }

  @media (min-width: 64em) {
    .ritual-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* Four narrow columns: put the duration and price under the name so they fit. */
  @media (min-width: 64em) and (max-width: 74.99em) {
    .ritual-picker__item { flex-direction: column; align-items: flex-start; justify-content: center; gap: .25rem; }
  }


  /* ---------- Manifesto ---------- */

  .manifesto {
    position: relative;
    overflow: hidden;
    padding-block: clamp(5rem, 3.5rem + 7vw, 9.375rem);
    background: var(--burgundy);
    color: var(--cream);
  }

  .manifesto__kanji {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-cjk-sans);
    font-size: clamp(17.5rem, 40vw, 35rem);
    line-height: 1;
    color: rgb(196 162 96 / .08);
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
  }

  .manifesto__inner {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2.25rem;
    max-width: 67.5rem;
    text-align: center;
  }

  .manifesto__quote {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: 300;
    line-height: 1.2;
    text-wrap: balance;
  }

  .manifesto__quote em { color: var(--gold-light); }

  /* Phones: two balanced rows, "Pause · Soften" / "Let go · Reconnect".
     The dots are decorative, so they get empty alt text where supported. */
  .manifesto__words {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: .75rem 0;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gold);
  }

  .manifesto__words li:nth-child(odd) { justify-self: end; }

  .manifesto__words li:nth-child(even)::before {
    content: "·";
    content: "·" / "";
    padding-inline: .875rem;
  }

  @media (min-width: 40em) {
    .manifesto__words { display: flex; flex-wrap: wrap; gap: .625rem 0; }

    /* Same specificity as the phone rule above, so every dot gets this spacing. */
    .manifesto__words li:not(:first-child)::before {
      content: "·";
      content: "·" / "";
      padding-inline: 1.75rem;
    }
  }


  /* ---------- The room (gallery) ---------- */

  .room__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
  }

  .room__heading { display: grid; gap: .875rem; }

  .room__title {
    font-size: clamp(2.25rem, 1.75rem + 2.4vw, 3.625rem);
    font-weight: 300;
    line-height: 1.05;
  }

  .room__address {
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--ink-muted);
  }

  /* Phones: one tall arched photo, then two side by side. */
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
  }

  .gallery__item {
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--ink);
  }

  .gallery__item--arch {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-arch);
  }

  .gallery__item picture { height: 100%; }

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

  @media (min-width: 48em) {
    .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; }
    .gallery__item--arch { grid-column: auto; aspect-ratio: 3 / 4; }
  }


  /* ---------- Banner ---------- */

  /* The banner runs slightly wider than the content column, as in the design. */
  .banner-section {
    --container: 81.75rem;
    padding-block: clamp(3.5rem, 7vw, 5.625rem);
  }

  .banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
    padding: clamp(2rem, 1.25rem + 3.5vw, 4rem);
    background: var(--burgundy);
    color: var(--cream);
  }

  .banner__copy {
    display: grid;
    gap: .75rem;
    max-width: 37.5rem;
  }

  .banner__title {
    font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
    font-weight: 300;
    line-height: 1.15;
  }


  /* ---------- FAQ ---------- */

  .faq { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

  .faq__title { font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem); }

  .faq__list { border-top: 1px solid var(--rule-strong); }

  .faq__item { border-bottom: 1px solid var(--rule-strong); }

  .faq__question {
    --icon: var(--gold-deep);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 1.75rem;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.3;
    text-wrap: balance;
    list-style: none;
    cursor: pointer;
    transition: color var(--dur) var(--ease);
  }

  .faq__question::-webkit-details-marker { display: none; }

  .faq__question:hover { color: var(--burgundy); }

  /* Plus / minus drawn with two hairlines. */
  .faq__question::after {
    content: "";
    flex: none;
    width: .875rem;
    height: .875rem;
    background:
      linear-gradient(var(--icon), var(--icon)) center / 100% 1px no-repeat,
      linear-gradient(var(--icon), var(--icon)) center / 1px 100% no-repeat;
  }

  .faq__item[open] > .faq__question::after {
    background: linear-gradient(var(--icon), var(--icon)) center / 100% 1px no-repeat;
  }

  .faq__answer {
    padding: 0 0 1.625rem;
    font-size: .96875rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ink-soft);
  }

  .faq__answer a {
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: .2em;
    overflow-wrap: anywhere;
  }

  @media (min-width: 30em) {
    .faq__answer { padding-right: 3rem; }
  }


  /* ---------- Visit ---------- */

  .visit__grid {
    display: grid;
    gap: clamp(3rem, 2rem + 4vw, 6rem);
    align-items: center;
  }

  .visit__copy {
    display: grid;
    gap: 1.5rem;
    justify-items: start;
  }

  .visit__title {
    font-size: clamp(2.75rem, 2rem + 3.6vw, 5rem);
    font-weight: 300;
    line-height: 1;
    color: var(--cream);
  }

  .visit__title em { color: var(--gold-light); white-space: nowrap; }

  .visit__lead {
    max-width: 26.25rem;
    font-weight: 300;
    color: var(--cream-soft);
  }

  .visit__copy .btn-row { width: 100%; }

  .contact-list { border-top: 1px solid var(--rule-on-dark); }

  .contact-list__row {
    display: grid;
    gap: .375rem;
    padding-block: 1.375rem;
    border-bottom: 1px solid var(--rule-on-dark);
  }

  .contact-list dt {
    padding-top: .3125rem;
    font-size: var(--text-2xs);
    line-height: 1.5;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold-light);
  }

  .contact-list dd {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.4;
    color: var(--cream);
    overflow-wrap: anywhere;
  }

  .contact-list a { color: var(--cream); }
  .contact-list a:hover { color: var(--gold-light); }

  @media (min-width: 30em) {
    .contact-list__row { grid-template-columns: 6.25rem minmax(0, 1fr); gap: 1rem; }
  }

  @media (min-width: 64em) {
    .visit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }


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

  .site-footer {
    padding-block: 2.25rem;
    background: var(--ink);
    border-top: 1px solid rgb(196 162 96 / .25);
    color: var(--cream);
  }

  .site-footer__inner {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    text-align: center;
  }

  .brand--footer { --mark: 3.5rem; }

  .site-footer__motto {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-style: italic;
    color: var(--cream-muted);
  }

  .site-footer__legal {
    font-size: var(--text-2xs);
    letter-spacing: .2em;
    color: rgb(241 233 216 / .6);
  }

  .site-footer__legal small { font-size: inherit; }

  @media (min-width: 48em) {
    .site-footer__inner {
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      text-align: left;
    }

    .site-footer__inner > :first-child { justify-self: start; }
    .site-footer__inner > :last-child { justify-self: end; }

    .brand--footer { --mark: 4rem; }
  }


  /* ---------- Floating booking button ---------- */

  .sticky-cta {
    position: fixed;
    right: max(.75rem, env(safe-area-inset-right, 0px));
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    left: max(.75rem, env(safe-area-inset-left, 0px));
    z-index: 40;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .5rem .5rem 1.25rem;
    border: 1px solid rgb(196 162 96 / .55);
    border-radius: var(--radius-pill);
    background: var(--burgundy);
    box-shadow: var(--shadow-float), 0 0 0 6px rgb(77 20 29 / .12);
    color: var(--cream);
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: opacity .45s var(--ease), transform .45s var(--ease), box-shadow var(--dur) var(--ease),
                visibility 0s linear .45s;
  }

  .sticky-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .sticky-cta:hover {
    color: var(--cream);
    box-shadow: 0 28px 60px -18px rgb(26 20 16 / .75), 0 0 0 8px rgb(196 162 96 / .18);
  }

  /* It floats over any background, so the focus ring sits on its own dark band. */
  .sticky-cta:focus-visible {
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--ink);
  }

  .sticky-cta__seal {
    display: none;
    flex: none;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid rgb(196 162 96 / .6);
    border-radius: 50%;
    background: var(--ink);
    font-size: 1.625rem;
    line-height: 1;
    color: var(--gold-light);
  }

  .sticky-cta__text {
    display: grid;
    flex: 1;
    gap: .1875rem;
  }

  .sticky-cta__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1;
  }

  .sticky-cta__meta {
    font-size: .625rem;
    line-height: 1.3;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-light);
  }

  .sticky-cta__arrow {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gold);
    font-size: 1.125rem;
    color: var(--ink);
  }

  /* Without JS there is nothing to time its appearance, so leave it out. */
  .no-js .sticky-cta { display: none; }

  @media (min-width: 30em) {
    .sticky-cta { padding-left: .625rem; gap: 1rem; }
    .sticky-cta__seal { display: grid; }
  }

  @media (min-width: 48em) {
    .sticky-cta {
      right: max(1.75rem, env(safe-area-inset-right, 0px));
      bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
      left: auto;
      padding: .625rem .75rem .625rem .625rem;
    }

    .sticky-cta__text { padding-right: .375rem; }
    .sticky-cta__title { font-size: 1.3125rem; }
    .sticky-cta__meta { font-size: .65625rem; letter-spacing: .24em; }
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .sticky-cta.is-visible:hover { transform: translateY(-3px); }
  }


  /* ---------- 404 page (404.html) ---------- */

  .not-found {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    padding-block: 4rem;
    background: var(--burgundy);
    color: var(--cream);
    text-align: center;
    --focus: var(--gold-light);
  }

  .not-found__kanji {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-cjk-sans);
    font-size: clamp(17.5rem, 50vw, 37.5rem);
    line-height: 1;
    color: rgb(196 162 96 / .08);
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
  }

  .not-found__inner {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1.5rem;
  }

  .not-found__inner .brand { margin-bottom: 1.5rem; }

  .not-found__title {
    font-size: var(--text-4xl);
    font-weight: 300;
    line-height: 1.1;
  }

  .not-found__title em { color: var(--gold-light); }

  .not-found__lead {
    max-width: 26rem;
    font-weight: 300;
    color: var(--cream-soft);
  }


  /* ---------- Short landscape screens (phones on their side) ---------- */

  @media (orientation: landscape) and (max-height: 30em) and (max-width: 63.99em) {
    .site-header__inner { padding-block: .25rem; }
    .site-header .brand { --mark: 2rem; }
    .site-header .brand__tagline { display: none; }

    .sticky-cta {
      left: auto;
      bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
      padding: .375rem .375rem .375rem 1.125rem;
    }

    .sticky-cta__seal,
    .sticky-cta__meta { display: none; }

    .sticky-cta__arrow { width: 2.25rem; height: 2.25rem; }
  }


  /* ---------- Windows High Contrast / forced colours ---------- */

  @media (forced-colors: active) {
    .needs__tab[aria-selected="true"],
    .ritual-picker__item[aria-current="true"] {
      forced-color-adjust: none;
      border-color: SelectedItem;
      background: SelectedItem;
      color: SelectedItemText;
    }

    .faq__question::after {
      forced-color-adjust: none;
      --icon: CanvasText;
    }
  }
}


/* -----------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}