/*
  The Head Spa by Hikari, D11 design system, D12 spacing and type (DESIGN-D12.md)
  Direction: "Quiet cinema on ivory". Full-bleed film and photography carry the depth; the
  grounds between them stay light (ivory, cream, champagne). One accent (copper clay).
  Square corners, no shadows, no gradients as decoration.
  D12 (yusen grammar, research/YUSEN-SKELETON.md 4): a large italic and a small text size with
  little between (--fs-h2 36 to 56, home 40 to 64), section padding 72 to 104, body calls to action as small
  capital text links (no boxes in the page body except form buttons), a smaller square Book in
  the header, and a yusen footer (large italic menu, details, the lockup).

  One stylesheet for every page. Everything in this file is the finished, static page: no
  transitions, no keyframes, no from-states. Motion lives in motion.css / motion-layer.css.
  Page groups add their own file after this one (home.css, pages-core.css, pages-journal.css);
  they never edit this file (DESIGN-D11.md, rules for page builders).

  Contents
    1. Fonts (the only place font files are named)
    2. Tokens
    3. Reset and base
    4. Type
    5. Layout primitives
    6. Components: icon, button, text link, eyebrow, media frame, price, hours,
       duration measure, arrival table, visually hidden
    7. Media components: film hero, film toggle, loop tile, full-bleed band, collage,
       texture band, diptych, story tiles, rail, peek film, reviews, story dialog
    8. Shell: skip link, header, nav, mobile menu
    9. Shell: footer
   10. Utilities and print
*/

/* 1. Fonts (self hosted, SIL OFL 1.1: ../fonts/d14/OFL-CormorantGaramond.txt, OFL-Manrope.txt)
   D14 (owner #39577 moodboard, ledger 0-G2 / N-G1 / N-B2): headline Cormorant Garamond, body
   Manrope. Google Fonts latin files, byte-identical, not subset (../fonts/d14/SOURCES.txt). The
   Adobe Fonts kit (ghh2wjl, IvyMode + Articulat CF) is no longer linked from
   any page. Cormorant has a true italic file (guest quotes only, R6); Manrope has no italic, so
   body { font-synthesis: none } below keeps the browser from slanting it.
   Noto Serif Display and Public Sans (D11) stay below as unused local files. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/d14/cormorant-garamond-latin-roman-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/d14/cormorant-garamond-latin-italic-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/d14/manrope-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("../fonts/d11/noto-serif-display-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("../fonts/d11/noto-serif-display-italic-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/d11/public-sans-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Fallback metrics (D14, tools/fonts/fallback-metrics.py): a local face scaled to the web font's
   average advance (English letter frequency) and line box, so little reflows while the woff2 swaps
   in. Cormorant Garamond 400 (hhea ascent 0.924 em, descent 0.287 em) on Georgia and Georgia
   Italic; Manrope 400 (ascent 1.066 em, descent 0.300 em) on Arial. */
@font-face {
  font-family: "Cormorant Garamond Fallback";
  src: local("Georgia"), local("Georgia-Regular");
  font-style: normal;
  size-adjust: 88.62%;
  ascent-override: 104.27%;
  descent-override: 32.39%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Garamond Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  size-adjust: 78.56%;
  ascent-override: 117.61%;
  descent-override: 36.53%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("ArialMT");
  font-style: normal;
  size-adjust: 103.57%;
  ascent-override: 102.93%;
  descent-override: 28.97%;
  line-gap-override: 0%;
}

/* 2. Tokens */
:root {
  /* colour: light ivory family and one accent. No pure black, no pure white.
     Dark only inside photographs and film (and the film's loading ground). */
  --ivory: #F4ECDF;          /* page ground */
  --cream: #FAF6EF;          /* raised ground: visit band, dialogs, mobile menu foot */
  --champagne: #EBDDC8;      /* band ground: footer, texture band under its photograph */
  --clay: #D9C4A8;           /* image loading mat only, never text */
  --line: #DCCDB8;           /* 1px hairline on ivory (solid) */
  --rule: rgba(58, 47, 38, 0.16);        /* 1px hairline on any light ground */
  --rule-strong: rgba(58, 47, 38, 0.32); /* baselines, active marks */
  --ink: #3A2F26;            /* headings and body, 11.1:1 on ivory */
  --ink-soft: #64533F;       /* secondary text, 6.3:1 on ivory, 5.5:1 on champagne */
  --muted: #716050;          /* captions and meta, 5.1:1 on ivory */
  --accent: #8C4E24;         /* copper clay, the only accent: labels, hover, focus */
  --on-media: #F7F1E8;       /* type on film and photography */
  --on-media-soft: rgba(247, 241, 232, 0.88);
  --on-media-line: rgba(247, 241, 232, 0.34);
  --night: #231A14;          /* film loading ground and dialog video mat only */
  --scrim-rgb: 30, 22, 16;

  /* colour roles (use these in new page CSS) */
  --surface: var(--ivory);
  --surface-raised: var(--cream);
  --surface-band: var(--champagne);
  --text: var(--ink);
  --text-soft: var(--ink-soft);

  /* texture switch: 1 shows the texture photographs in .tex-band, 0 leaves the plain band
     ground (--surface-band). The texture is AI generated; this is the one-line swap. */
  --tex-on: 1;

  /* type: font names live only in these two tokens */
  --font-display: "Cormorant Garamond", "Cormorant Garamond Fallback", Georgia, serif; /* D14, OFL, self hosted (section 1) */
  --font-text: "Manrope", "Manrope Fallback", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* D14, OFL, self hosted */
  --font-sans: var(--font-text); /* older name, kept for page CSS written before D11 */
  /* D14 weights and tracking on Cormorant Garamond (DESIGN-D14.md 3-3, 8): the display voice is
     upright (R6; the Yusen likeness was IvyMode Light Italic set large). Cormorant's hairlines are
     finer than IvyMode's, so one step heavier everywhere: Regular 400 on the paper, Medium 500 on
     film and photographs. The *-em and *-light names are kept for page CSS written before D14;
     they now carry the paper weight. Tracking: 0 at 20 to 28px, -0.005em from 30px up. */
  --display-wght: 400;        /* H2, treatment names, display lines on the paper */
  --display-wght-hero: 500;   /* type on film and photographs: never lighter */
  --display-wght-em: 400;     /* (was the italic line weight) display lines on light grounds */
  --display-wght-quote: 500;  /* guest quotes, Cormorant italic, 20 to 22px */
  --display-wght-light: 400;  /* 1,000+ and large display lines */
  --display-wght-title: 400;  /* inner page H1 on the paper: one weight for every line */
  --display-track: -0.005em;        /* upright display */
  --display-track-italic: 0em;      /* (name kept) large display lines, now upright */
  --display-track-sm: 0em;          /* display at 20 to 28px: card and row titles, footer menu */
  --display-track-hero: -0.005em;   /* type on film and photographs */
  --text-wght-strong: 600;

  --fs-display: clamp(2.75rem, 1.6rem + 4.4vw, 5.25rem); /* 44 to 84px: display on media or texture */
  --fs-h1: clamp(2rem, min(1.25rem + 3.6vw, 7.6svh), 4.5rem);  /* 32 to 72px */
  --fs-page-title: clamp(2.75rem, 2.086rem + 3.238vw, 5rem); /* 44 to 80px: inner page H1 (46 at 390, 80 at 1440) */
  --fs-h2-lg: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);   /* 40 to 68px: one feature heading, below the H1 */
  /* D14: Cormorant's x-height is low (0.386 em against Manrope 0.54 em), so the two paper heading
     sizes are about 8% up (DESIGN-D14.md 3-3 #2, the values judged in the design mock) */
  --fs-h2: clamp(2.4rem, 1.65rem + 2.4vw, 3.8rem);      /* 38 to 61px (D12 36 to 56) */
  --fs-h2-home: clamp(2.7rem, 1.75rem + 3vw, 4.35rem);  /* 43 to 70px (D12 40 to 64): home paper headings */
  --fs-line: clamp(1.5rem, 1.1rem + 1.8vw, 3.25rem);    /* 24 to 52px: italic list lines */
  --fs-h3: clamp(1.375rem, 1.24rem + 0.5vw, 1.75rem);   /* 22 to 28px */
  --fs-title-sm: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-price: clamp(1.75rem, 1.45rem + 1.1vw, 2.5rem);  /* 28 to 40px */
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-body: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);  /* 16 to 17px */
  --fs-small: 0.9375rem;     /* 15px (16px on phones, below) */
  --fs-meta: 0.8125rem;      /* 13px */
  --fs-label: 0.75rem;       /* 12px, eyebrow and small caps only */

  /* space (8 based) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* layout */
  --max: 90rem;                                   /* 1440px content width */
  --pad-x: clamp(1.25rem, 2.8vw, 2.5rem);         /* side gutter 20 to 40px */
  --gutter: clamp(1rem, 0.6rem + 1vw, 1.5rem);    /* column gap 16 to 24px */
  --section-y: clamp(4.5rem, 2rem + 5.6vw, 6.5rem); /* ivory text section, top and bottom: 72 to 104 (D12, yusen 59 to 104; D11 72 to 128) */
  --section-y-compact: clamp(3.5rem, 2.4rem + 3.4vw, 5.5rem);
  --band-y: clamp(3rem, 2.1rem + 2.4vw, 4.5rem);
  --header-h: 4rem;
  --measure: 36rem;                               /* long reading text (articles, legal) */
  --measure-short: 27.375rem;                     /* 438: a paragraph beside a picture (D12, yusen 208 to 324 at 13px) */
  --rail-pad: max(var(--pad-x), calc((100% - var(--max)) / 2));

  /* motion tokens: read by motion.css / motion.js only. site.css never animates. */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-micro: 240ms;
  --dur-ui: 480ms;
  --dur-enter: 800ms;
  --dur-tide: 1200ms;

  color-scheme: light;
}
@media (min-width: 64em) {
  :root { --header-h: 4.75rem; }
}
/* R-015: below 48em nothing the owner wrote is set under 16px. */
@media (max-width: 47.99em) {
  :root { --fs-small: 1rem; }
}

/* 3. Reset and base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;            /* D14: no fake italic or bold (Manrope has no italic) */
  font-variant-numeric: lining-nums; /* D14: Cormorant's default figures are old style (prices, address, hours); Manrope's are lining already */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
main { display: block; }
main:focus { outline: none; }
::selection { background: var(--clay); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 4. Type */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  line-height: 1.1;
  letter-spacing: var(--display-track);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; letter-spacing: var(--display-track-sm); }
p, li, dd, td { text-wrap: pretty; }
/* Headings are written as one span per line so a motion layer can address lines.
   Without motion they are simply stacked lines of one heading. */
.line { display: block; }
.line--em { font-style: normal; font-weight: var(--display-wght-em); } /* D14 R6: upright (was italic) */
/* Inner page H1: one voice at one weight, every line alike. D14 (R6): upright, no longer the
   yusen italic. The spans stay for the motion layer. Page CSS sets only where the title sits;
   type is here. On film and photographs the weight is --display-wght-hero (d11-g1.css). */
.page-title,
.page-title .line {
  font-style: normal;
  font-weight: var(--display-wght-title);
}
.page-title {
  font-size: var(--fs-page-title);
  line-height: 1.05;
  letter-spacing: var(--display-track-italic);
}
.lead { font-size: var(--fs-lead); line-height: 1.55; }
.eyebrow {
  margin-bottom: var(--space-5);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  color: var(--accent);
}
/* the display voice at its larger sizes (media, texture, one feature heading per page) */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-style: normal; /* D14 R6 */
  font-weight: var(--display-wght-light);
  line-height: 1.04;
  letter-spacing: var(--display-track-italic);
}

/* D14 R6 (ledger 0-G2, N-G1): the display voice is upright on every page. These page files still
   say font-style: italic (d11-g1/g2/g3, d12-g3, home, pages-core, pages-journal, written for the
   IvyMode italic); the :is() list below takes the specificity of its most specific selector, so it
   wins over each of them without editing those files. Two exceptions keep Cormorant's own italic,
   both a guest's words: .story__quote p (this file) and .pullquote blockquote p (pages-journal).
   New page CSS: never set font-style on the display face. */
html body :is(
  .hm-h2, .hm-intro__title, .hm-fold__title, .hm-treat__title, .hm-slide__name,
  .hm-space__title, .hm-gift__title, .hm-post__title,
  .plan__name .line:first-child, .g1-svisit__title, .g1-steps__title, .g1-step__title,
  .g1-coda__line, .g1-visit-band__title,
  .page-archive .entry__title, .page-article--sixty .duo__name .line:first-child,
  .page-article .keep-reading .entry__title, .page-search .search-field input,
  .page-search .suggest__list a, .page-search .result__title,
  .g3-book__title, .g3-faq .faq-group__title, .g3-faq-help .faq-help__title,
  .page-article .prose h2, .page-article .keep-reading__title .line, .page-legal .prose h2,
  .faq-group__title, .span-diagram__stop--spa, .duo__name .line:first-child
) { font-style: normal; }

/* D14: the display face is never set under 20px (DESIGN-D14.md 3-3 #2). The Journal 60/90
   article's treatment names (d11-g2.css) went to 18px on phones; same rule, floor raised. */
html body.page-article--sixty .duo__name { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }

/* 5. Layout primitives */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--pad-x));
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
/* a text section on the page ground */
.section { padding-block: var(--section-y); }
.section--raised { background: var(--surface-raised); }
.section--band { background: var(--surface-band); }

/* 6. Components */
.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}
.icon--ext { width: 0.8125rem; height: 0.8125rem; margin-left: 0.3rem; }
.icon--social { width: 1.125rem; height: 1.125rem; margin-right: 0.5rem; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-slot {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--accent);
}
.icon-slot > svg { width: 100%; height: 100%; }

/* Buttons: ink on light grounds, ivory on media. Hover fill is a pseudo layer (motion hook). */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.8125rem 1.5rem;
  border: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  opacity: 0;
}
.btn:hover::before,
.btn:focus-visible::before { opacity: 1; }
.btn:hover, .btn:focus-visible { color: var(--cream); }
.btn .icon { width: 1rem; height: 1rem; }
.btn--outline {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.btn--outline:hover, .btn--outline:focus-visible { box-shadow: none; }
.btn--on-media {
  background: var(--on-media);
  color: var(--ink);
}
.btn--ghost {
  background: transparent;
  color: var(--on-media);
  box-shadow: inset 0 0 0 1px var(--on-media-line);
}
.btn--ghost:hover, .btn--ghost:focus-visible { box-shadow: none; }
.btn--block { width: 100%; }

/* Text links (D12, yusen G7): small capitals on a hairline drawn by a pseudo element (motion
   hook). The arrow icon is left out of sight (the words are the link); the new-tab icon stays.
   (a browser without :has() simply shows the arrow) */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.text-link > span:first-child { position: relative; }
.text-link > span:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.375rem;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}
.text-link .icon { width: 0.6875rem; height: 0.6875rem; }
.text-link > .icon:has(use[href="#i-arrow"]) { display: none; }
.text-link:hover { color: var(--accent); }

/* D12 (yusen G7): in the page body a call to action is a text link, never a box. A link marked
   .btn inside <main> takes the text link voice (the markup and its words stay as they are);
   boxes remain for the header Book, the mobile menu and form buttons (<button>). */
main a.btn {
  min-height: 2.75rem;
  padding: 0;
  gap: 0.375rem;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-align: left;
  overflow: visible;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
}
main a.btn::before { content: none; }
main a.btn:hover,
main a.btn:focus-visible { color: var(--accent); }
main a.btn .icon { width: 0.6875rem; height: 0.6875rem; }
main a.btn > .icon:has(use[href="#i-arrow"]) { display: none; }
/* on a photograph the link takes the band's own type colour (ink on .bleed--light, ivory on
   .bleed--dark and on film) */
main a.btn.btn--on-media,
main a.btn.btn--ghost { color: inherit; }
main a.btn.btn--on-media:hover,
main a.btn.btn--ghost:hover { color: inherit; text-decoration-thickness: 2px; }

/* Media frames: square corners, no shadow, no border, no filter. The clay mat shows while
   the image loads. */
.media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--clay);
}
.media img, .media picture { width: 100%; height: 100%; }
.media img { object-fit: cover; }

.price {
  font-family: var(--font-display);
  font-size: var(--fs-price);
  font-weight: var(--display-wght-hero);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}
.price__currency {
  /* R9-1 (#39624): "$190" reads as one figure: the sign in the numbers' own face, size, weight,
     colour and line (it was the text face at 0.56em, raised, lighter) */
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

:where(.hours) { list-style: none; padding: 0; }
.hours li + li { margin-top: 0.25rem; }

/* Duration measure (60 of 90, 90 of 90): a rule drawn to its length. Journal article. */
.treatment__measure {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--minutes) / 90 * 100%);
  height: 1px;
}
.measure__line {
  position: absolute;
  inset: 0;
  background: var(--ink-soft);
  transform-origin: left center;
}
.measure__mark {
  position: absolute;
  right: 0;
  top: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(50%, -50%);
}
.measure__label {
  position: absolute;
  right: 0.875rem;
  bottom: 0.625rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}

/* Arrival table (guests / when to arrive). The optional .arrival__bar draws a scale; the
   home page leaves it out and shows the numbers only. */
.arrival__table { width: 100%; font-size: var(--fs-small); }
.arrival__table th,
.arrival__table td {
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
}
.arrival__table thead th {
  padding-top: 0;
  font-size: var(--fs-meta);
  color: var(--muted);
  border-bottom-color: var(--rule-strong);
}
.arrival__table tbody th { width: 6.5rem; color: var(--ink); font-weight: 550; white-space: nowrap; }
.arrival__table td { position: relative; color: var(--ink); }
.arrival__bar {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: calc(var(--minutes) / 25 * 32%);
  height: 1px;
  background: var(--ink-soft);
  transform-origin: right center;
}
.arrival__bar::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(50%, -50%);
}
.arrival__early { white-space: nowrap; font-variant-numeric: tabular-nums; }
.arrival__note { margin-top: var(--space-5); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 7. Media components */

/* 7.1 Film hero: a full-screen film under the first words. site.js injects the film only when
   it may play ([data-film], TECH-SPEC 10); the poster is the finished state. The header lies
   over it ([data-overlay] on the header, [data-overlay-under] on this section). */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: max(100svh, 34rem);
  overflow: hidden;
  background: var(--night);
  color: var(--on-media);
}
.hero__film { position: absolute; inset: 0; z-index: -2; }
.hero__poster,
.hero__poster img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__video { opacity: 0; }
.hero__film[data-film-state="playing"] .hero__video { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(var(--scrim-rgb), 0.85) 0%, rgba(var(--scrim-rgb), 0.72) 28%, rgba(var(--scrim-rgb), 0.45) 42%, rgba(var(--scrim-rgb), 0) 54%),
    linear-gradient(to bottom, rgba(var(--scrim-rgb), 0.6) 0, rgba(var(--scrim-rgb), 0.55) var(--header-h), rgba(var(--scrim-rgb), 0) calc(var(--header-h) + 3rem));
}
/* the brand lockup over the film (white, from the official artwork). site.js shows it once the
   film has left its opening shot of the real shop sign ([data-mast="in"] on <html>, and
   [data-mast-tight] when it would meet the heading); with no
   film (reduced motion, Save-Data, no JavaScript) it stays away and the header logo carries
   the name, so the web logo never sits on the photographed sign. fix1: an opening title, shown
   once: site.js takes it away at data-film-mast-out ([data-mast="out"], then "done"), before the
   first shot with a guest's face, and the header logo comes back. */
.hero__mast {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 0;
  height: var(--mast-h, clamp(7rem, 26svh, 15rem));
  color: var(--on-media);
  transform: translate(-50%, -50%);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.hero__mast svg { width: auto; height: 100%; max-width: none; }
html[data-mast="in"]:not([data-mast-tight]) .hero__mast { visibility: visible; opacity: 0.94; }
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: end;
  gap: var(--space-6);
  padding-top: calc(var(--header-h) + var(--space-7));
  padding-bottom: clamp(1.5rem, 4svh, 3.25rem);
}
.hero__copy { max-width: 44rem; }
.hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--display-wght-hero);
  line-height: 1.02;
  letter-spacing: var(--display-track-hero);
  color: var(--on-media);
}
.hero__title .line--em { font-weight: var(--display-wght-hero); }
.hero__lede {
  max-width: 38rem;
  margin-top: clamp(0.75rem, 2svh, 1.5rem);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--on-media-soft);
}
.hero__lede strong { font-weight: var(--text-wght-strong); color: var(--on-media); }
.hero__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: clamp(1rem, 3svh, 2rem);
}
.hero__actions .btn { padding-inline: 1.25rem; }
.hero :focus-visible { outline-color: var(--on-media); }
.hero__aside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-meta);
  color: var(--on-media-soft);
}
.hero__place {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--on-media-soft);
}
.hero__scroll {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--on-media);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.hero__scroll .icon { width: 1rem; height: 1rem; }
@media (max-width: 22.49em) {
  .hero__actions .btn { padding-inline: 0.875rem; letter-spacing: 0.06em; white-space: nowrap; }
}
@media (min-width: 64em) {
  .hero { min-height: max(100svh, 40rem); }
  .hero__actions { justify-content: flex-start; gap: var(--space-3); }
  .hero__actions .btn { padding-inline: 1.5rem; }
  .hero__scroll { display: inline-flex; }
}

/* 7.2 Film toggle: one quiet control per film, named by its action (site.js) */
.film-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 3rem;
  padding: 0 0.875rem;
  border: 0;
  background: transparent;
  color: var(--on-media);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.film-toggle .icon { width: 1.125rem; height: 1.125rem; }
.film-toggle__play { display: none; }
.film-toggle[data-paused] .film-toggle__pause { display: none; }
.film-toggle[data-paused] .film-toggle__play { display: inline-block; }
@media (max-width: 47.99em) {
  .film-toggle { padding: 0; justify-content: center; }
  .film-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 7.3 Loop tile: a short silent film in a frame. Poster first; site.js fetches and plays it only
   while it is on screen, never with reduced motion or Save-Data. One control, bottom right. */
.m-loop { position: relative; }
.m-loop video,
.m-loop__poster,
.m-loop__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* fix2: a film over a still stays unseen until its first frame is up (site.js 5b); the still is
   that frame, so the film starts without a cut */
.m-loop[data-loop-state="cued"] > video { opacity: 0; }
.m-loop__toggle {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--on-media);
  cursor: pointer;
}
.m-loop__toggle .icon { width: 1.125rem; height: 1.125rem; }
.m-loop__play { display: none; }
.m-loop__toggle[data-paused] .m-loop__pause { display: none; }
.m-loop__toggle[data-paused] .m-loop__play { display: inline-block; }
.m-loop__toggle:focus-visible { outline-color: var(--on-media); outline-offset: -6px; }
/* without JavaScript a browser draws its own controls on every video (HTML: scripting
   disabled), over a tile that has nothing to play (the file is only in data-src). The poster is
   the finished tile. (g2 shared request 1, 2026-09-27) */
html:not(.js) .m-loop video::-webkit-media-controls,
html:not(.js) .m-loop video::-webkit-media-controls-enclosure { display: none !important; }

/* 7.4 Full-bleed band: a photograph (or film) across the whole width with words on it.
   .bleed--light keeps ink type on a bright photograph with a soft ivory light behind the words;
   .bleed--dark sets ivory type on a scrim. */
.bleed {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(34rem, 88svh, 60rem);
  overflow: hidden;
  background: var(--surface-band);
}
.bleed__media,
.bleed__media img,
.bleed__media video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.bleed--light { color: var(--ink); }
.bleed--light::before {
  background: radial-gradient(ellipse 52% 40% at 50% 50%, rgba(250, 246, 239, 0.84) 0%, rgba(250, 246, 239, 0.6) 50%, rgba(250, 246, 239, 0) 100%);
}
.bleed--dark { color: var(--on-media); background: var(--night); }
.bleed--dark::before {
  background: linear-gradient(to top, rgba(var(--scrim-rgb), 0.72) 0%, rgba(var(--scrim-rgb), 0.36) 34%, rgba(var(--scrim-rgb), 0) 60%);
}
.bleed--dark :focus-visible { outline-color: var(--on-media); }
.bleed__content { display: grid; gap: var(--space-5); padding-block: var(--section-y); }
.bleed__content--center { justify-items: center; text-align: center; }
@media (max-width: 47.99em) {
  .bleed { min-height: clamp(30rem, 78svh, 44rem); }
  .bleed--light::before {
    background: radial-gradient(ellipse 78% 36% at 50% 50%, rgba(250, 246, 239, 0.86) 0%, rgba(250, 246, 239, 0.62) 55%, rgba(250, 246, 239, 0) 100%);
  }
}

/* 7.5 Collage: an asymmetric 12-column arrangement of photographs, a loop tile and words
   (yusen "Our Ethos"). Page CSS places the tiles with grid-column / grid-row or areas;
   below 64em everything stacks in source order and photographs run to the screen edges. */
.collage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--gutter);
}
.collage__edge { margin-inline: calc(-1 * var(--pad-x)); }
@media (min-width: 48em) {
  .collage__edge { margin-inline: 0; }
}
@media (min-width: 64em) {
  .collage { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0; }
}

/* 7.6 Texture band: a light band whose ground is a texture photograph. The ground colour is
   the band colour, so with --tex-on: 0 (or no image) the band is plain champagne. Ink type,
   never a veil. */
.tex-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-band);
  color: var(--ink);
}
.tex-band__img,
.tex-band__img img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tex-band__img { opacity: var(--tex-on); }

/* 7.7 Diptych: two photographs side by side across the full width (7 : 5), words laid on the
   larger one. Phones keep the pair side by side at a short height; the words sit above. */
.diptych { display: grid; grid-template-columns: 7fr 5fr; }
.diptych__cell { position: relative; overflow: hidden; background: var(--clay); }
.diptych__cell img { width: 100%; height: 100%; object-fit: cover; }

/* 7.8 Story tiles (guest films) on a rail. A card is a 4:5 crop of the film's poster; the
   whole card opens the shared dialog (site.js), or the mp4 without JavaScript. */
.rail { position: relative; margin-top: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(15rem, 70vw, 19.5rem);
  gap: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: var(--rail-pad);
  scroll-padding-inline: var(--rail-pad);
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--clay) transparent;
}
.rail__track:focus-visible { outline-offset: -2px; }
.js .rail__track { scrollbar-width: none; }
.js .rail__track::-webkit-scrollbar { display: none; }
.rail__controls {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-inline: var(--rail-pad);
}
.rail__btn {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  cursor: pointer;
}
.rail__btn:hover:not(:disabled) { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rail__btn:disabled { opacity: 0.35; cursor: default; }
.rail__btn .icon { width: 1.125rem; height: 1.125rem; }

.story { position: relative; scroll-snap-align: start; } /* keeps absolutely positioned a11y text inside the scroller */
.story__open {
  display: block;
  color: inherit;
  text-decoration: none;
}
.story__media {
  display: block;
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--clay);
}
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-top: var(--space-2);
  font-size: var(--fs-meta);
  font-weight: 550;
  letter-spacing: 0.02em;
}
.story__play { width: 1rem; height: 1rem; color: var(--accent); }
.story__time { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 450; }
.story__open:hover .story__watch { color: var(--accent); }
.story__caption { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.story__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.18rem + 0.3vw, 1.375rem); /* D14: 20 to 22px (D12 18 to 20); no display face under 20px */
  font-style: italic; /* D14 R6: the one italic kept, Cormorant's own italic file (a guest's words) */
  font-weight: var(--display-wght-quote);
  line-height: 1.42;
  text-indent: -0.4em;
}
.story__cite {
  margin-top: var(--space-3);
  font-size: var(--fs-meta);
  color: var(--muted);
}
/* peek film: on a mouse hover the card's own film plays, muted, in the card's framing (site.js) */
.story__peek {
  position: absolute;
  z-index: 1;
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
}
.story__peek[data-on] { opacity: 1; }

/* Google reviews line: the count set large, the link beside it */
.reviews {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "count label" "count link";
  column-gap: var(--space-4);
  align-items: center;
  justify-self: start;
  min-height: 2.75rem;
  padding-block: 0.25rem;
  color: var(--ink);
  text-decoration: none;
}
.reviews__count {
  grid-area: count;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
  font-weight: var(--display-wght-light);
  line-height: 1;
  letter-spacing: var(--display-track);
  font-variant-numeric: lining-nums;
}
.reviews__label { grid-area: label; font-size: var(--fs-small); font-weight: 550; line-height: 1.3; align-self: end; }
.reviews__link {
  grid-area: link;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: start;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.reviews__link .icon { width: 0.8125rem; height: 0.8125rem; }
.reviews:hover .reviews__link { color: var(--accent); }

/* Guest video: one shared native dialog. Hikari brightens the room around the guest instead of
   dimming it: an ivory veil, never a dark backdrop. The frame opening from the card (M8) is
   motion.js; without it the dialog simply appears. */
.story-dialog {
  width: min(92vw, calc((100svh - 9rem) * 9 / 16));
  max-width: 28rem;
  max-height: 100svh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
.story-dialog::backdrop { background: transparent; }
.story-dialog__veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(244, 236, 223, 0.985);
}
.story-stage { position: relative; }
.story-dialog__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
}
.story-dialog__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-title-sm);
  font-style: normal; /* D14 R6 */
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}
.sound-toggle,
.story-dialog__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 0.25rem 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.sound-toggle .icon,
.story-dialog__close .icon { width: 1.25rem; height: 1.25rem; }
.sound-toggle .wave { stroke-dashoffset: 0; }
.sound-toggle[aria-pressed="false"] .wave { opacity: 0; stroke-dashoffset: 1; }
.sound-toggle:hover,
.story-dialog__close:hover { color: var(--accent); }
.story-stage__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--clay);
}
.story-dialog__video,
.story-stage__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-dialog__video { background: transparent; }
.story-stage__card { position: absolute; object-fit: cover; }
.story-dialog__status { margin-top: var(--space-2); font-size: var(--fs-meta); color: var(--ink-soft); }
.story-dialog__status:empty { display: none; }
html.story-open { overflow: hidden; }

/* 8. Shell: skip link, header, nav, mobile menu */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--cream);
  font-size: var(--fs-small);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* The header is ivory with a hairline on every page. Over a top media section
   ([data-overlay]) it starts clear with ivory type and turns ivory as soon as the page moves
   (site.js sets data-solid). It never hides: Book stays on screen. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--ink);
}
/* solid ground as a separate layer so the motion layer can fade it (opacity only) */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  margin-right: auto;
}
.brand .logo { width: auto; height: 1.875rem; }
.site-nav { display: none; }
.site-nav ul { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.25rem); }
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  font-size: var(--fs-small);
  font-weight: 450;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.625rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}
.site-nav a:hover::after,
.site-nav a[aria-current]::after { transform: scaleX(1); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
/* D12: a small square Book (yusen 76 x 35, 11px capitals). 44px tall on touch screens. */
.btn--header {
  min-height: 2.75rem;
  padding: 0 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}

.menu-fallback,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.menu-toggle .icon { width: 1.5rem; height: 1.5rem; overflow: visible; }
/* one icon, two lines: open = the two lines cross into an X of the same width as i-close */
.menu-toggle__icon .bar { transform-box: fill-box; transform-origin: center; }
.menu-toggle[aria-expanded="true"] .bar--1 { transform: translateY(2.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar--2 { transform: translateY(-2.75px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}
.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-7);
  min-height: 100%;
  padding-block: var(--space-6) var(--space-7);
}
.mobile-menu__list li { border-bottom: 1px solid var(--rule); }
.mobile-menu__list a {
  display: flex;
  align-items: center;
  min-height: 3.75rem;
  font-family: var(--font-display);
  font-size: 2rem;
  font-style: normal; /* D14 R6 */
  font-weight: var(--display-wght-light);
  line-height: 1.15;
  text-decoration: none;
}
.mobile-menu__list a[aria-current] { color: var(--accent); }
.mobile-menu__minor { display: flex; gap: var(--space-5); margin-top: var(--space-4); }
.mobile-menu__minor a {
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.mobile-menu__foot { display: grid; gap: var(--space-5); justify-items: start; }
.mobile-menu__note { font-size: var(--fs-small); color: var(--ink-soft); }
.mobile-menu__note a { display: inline-block; padding-block: 0.625rem; }

body.menu-open { overflow: hidden; }

/* Header over a top media section: clear, ivory type, a hairline in ivory. */
.site-header[data-overlay] {
  position: absolute;
  inset: 0 0 auto 0;
}
.js .site-header[data-overlay] { position: fixed; }
.site-header[data-overlay]:not([data-solid]) { color: var(--on-media); }
.site-header[data-overlay]:not([data-solid])::before { opacity: 0; }
/* D14 (ledger 1-M2, D13K research/BUGS.md 2.4): the ivory hairline over media is drawn on the
   header itself, which spans the whole viewport, not on .site-header__bar (the .wrap, at most
   1520px): on a 1920 or 2560 screen the line stopped 200 / 520px short of each edge on Home, The
   Hikari Way and Treatments. The home state ([data-over-film], home.css) gets the same line here;
   the bar rule is raised above home.css's so the bar never draws a second, shorter line. */
.site-header[data-overlay]:not([data-solid]),
.page-home .site-header[data-overlay][data-over-film] {
  box-shadow: inset 0 -1px 0 var(--on-media-line);
}
html body .site-header[data-overlay] .site-header__bar,
html body.page-home .site-header[data-overlay][data-over-film] .site-header__bar { box-shadow: none; }
.site-header[data-overlay]:not([data-solid]) .btn--header {
  background: transparent;
  color: var(--on-media);
  box-shadow: inset 0 0 0 1px var(--on-media-line);
}
.site-header[data-overlay]:not([data-solid]) .btn--header:hover,
.site-header[data-overlay]:not([data-solid]) .btn--header:focus-visible {
  color: var(--cream);
  box-shadow: none;
}
.site-header[data-overlay]:not([data-solid]) :focus-visible { outline-color: var(--on-media); }
/* D12: on a phone the Book over a picture is the word only (yusen); the box returns with the
   ivory header */
@media (max-width: 63.99em) {
  .site-header[data-overlay]:not([data-solid]) .btn--header { box-shadow: none; padding-inline: 0.5rem; }
}
/* while the brand lockup stands over the film, the header logo steps aside (one logo on
   screen). It is still a link: keyboard focus brings it back. */
html[data-mast="in"]:not([data-mast-tight]) .site-header[data-overlay]:not([data-solid]) .brand { opacity: 0; }
html[data-mast="in"]:not([data-mast-tight]) .site-header[data-overlay]:not([data-solid]) .brand:focus-visible { opacity: 1; }
/* press cue on touch (opacity only, instant) */
.brand:active,
.site-footer__logo:active,
.menu-toggle:active,
.film-toggle:active { opacity: 0.64; }
a:not([class]):active { color: var(--accent); }

@media (max-width: 29.99em) {
  .hide-below-sm { display: none; }
  .menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (min-width: 30em) {
  .brand .logo { height: 2.125rem; }
}
@media (min-width: 64em) {
  .brand .logo { height: 2.375rem; }
  .site-nav { display: block; margin-right: var(--space-4); }
  .menu-fallback, .menu-toggle, .mobile-menu { display: none !important; }
  .btn--header { min-height: 2.25rem; padding-inline: 1.25rem; font-size: 0.6875rem; }
}

/* 9. Shell: footer (D12, yusen footer on champagne). The menu in the large display italic, the
   visit, hours and contact details beside it, Book and the Google reviews as two text links,
   the official lockup, and a quiet base line. No closing line and no boxed button (D12). */
.site-footer {
  background: var(--surface-band);
  color: var(--ink);
  padding-block: clamp(4rem, 2.8rem + 3.6vw, 6rem) var(--space-5);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
}
.site-footer__menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.site-footer__menu .footer-link {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);
  font-style: normal; /* D14 R6 */
  font-weight: var(--display-wght-em);
  line-height: 1.15;
  letter-spacing: var(--display-track-sm);
  color: var(--ink);
  white-space: nowrap;
}
.site-footer__menu .footer-link .icon--ext { width: 0.75rem; height: 0.75rem; }
.site-footer__menu .footer-link:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 23.99em) {
  .site-footer__menu { column-gap: 1.25rem; }
  .site-footer__menu .footer-link { font-size: 1.3125rem; }
}
.site-footer__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--gutter);
}
.site-footer__block--contact { grid-column: 1 / -1; }
.site-footer__label {
  margin-bottom: var(--space-3);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent);
}
.site-footer__block,
.site-footer__block address,
.site-footer__block li { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55; }
.site-footer__block p + p,
.site-footer__block address + p { margin-top: var(--space-2); }
.footer-link {
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-link:hover { color: var(--accent); text-decoration: underline; }
.footer-link--email { overflow-wrap: normal; }
@media (max-width: 21.99em) { .footer-link--email { overflow-wrap: anywhere; } }
.site-footer__list li { line-height: 1.2; }
/* D14 (ledger 3-H8a): in the footer the hours sit on the line under their days (owner #39558
   3-8). The contact page's own hours block keeps its one-line form (D12). */
.site-footer .hours__days { display: block; }
/* D14 (3-H8b, 3-H8c): Follow us, Instagram and TikTok, the handle written once. The block takes
   the next free cell of the D12 grid (no layout rule changes). The first icon's glyph lines up
   with the text above it: the 44px target is pulled left by its own side space. */
.site-footer__social { display: flex; flex-wrap: wrap; margin-left: -0.75rem; }
.footer-link--social { justify-content: center; }
.footer-link--social .icon--social { width: 1.25rem; height: 1.25rem; margin-right: 0; }
.site-footer__block .site-footer__handle { margin-top: var(--space-1); }
.site-footer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-7);
}
/* Book and the reviews in the body link voice (small capitals on a hairline) */
.site-footer__book,
.site-footer__reviews {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-footer__book > span:first-child,
.site-footer__reviews > span:not(.visually-hidden) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
}
.site-footer__book .icon,
.site-footer__reviews .icon { width: 0.6875rem; height: 0.6875rem; }
.site-footer__reviews strong {
  display: inline-block; /* keeps the hairline under the words only */
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: lining-nums;
}
.site-footer__book:hover,
.site-footer__reviews:hover { color: var(--accent); }
.site-footer__logo { display: inline-block; justify-self: start; color: var(--ink); }
.site-footer__logo .logo { width: auto; height: clamp(5.5rem, 4.9rem + 1.8vw, 7rem); }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.site-footer__legal ul { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
.site-footer__legal .footer-link { color: var(--muted); font-size: var(--fs-meta); }
.site-footer__copy { color: var(--muted); }
@media (min-width: 80em) {
  .site-footer__info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content; }
  .site-footer__block--contact { grid-column: auto; }
}
@media (min-width: 64em) {
  .site-footer__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: var(--gutter);
  }
  .site-footer__nav { grid-column: 1 / span 5; grid-row: 1 / span 2; }
  .site-footer__info { grid-column: 7 / -1; grid-row: 1; }
  .site-footer__actions { grid-column: 7 / -1; grid-row: 2; align-self: end; }
  .site-footer__logo { grid-column: 1 / span 4; grid-row: 3; align-self: end; }
  .site-footer__base { grid-column: 1 / -1; grid-row: 4; }
}
/* D14 r7 (owner #39602 Home 10, the footer on a computer screen; the same footer on all 16
   pages, so the rule lives here). Less space: the details move left, next to the menu (Visit
   first), with Follow us to the right of Contact; the lockup and Book / the reviews share one
   row; the padding and the gaps are smaller. 64em to 79.99em: the details two by two (Visit and
   Opening Hours, then Contact and Follow us), the menu keeping five columns so its two lists
   clear Visit. 80em and up: the four in one row beside a four column menu. Phones and
   tablets keep D12. HTML unchanged. */
@media (min-width: 64em) {
  .site-footer { padding-top: clamp(3.5rem, 1.5rem + 2.5vw, 4.5rem); }
  .site-footer__inner {
    grid-template-rows: auto auto auto;
    row-gap: clamp(2.25rem, 1.5rem + 1vw, 2.75rem);
  }
  .site-footer__nav { grid-column: 1 / span 5; grid-row: 1; }
  .site-footer__info {
    grid-column: 6 / -1;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--gutter);
  }
  .site-footer__block--contact { grid-column: auto; }
  .site-footer__logo { grid-column: 1 / span 5; grid-row: 2; align-self: end; }
  .site-footer__actions { grid-column: 6 / -1; grid-row: 2; align-self: end; }
  .site-footer__base { grid-column: 1 / -1; grid-row: 3; }
}
@media (min-width: 80em) {
  /* auto tracks: each column as wide as its lines where there is room, the Visit and hours lines
     wrapping first where there is not (1280), so the row never runs past the page edge */
  .site-footer__nav,
  .site-footer__logo { grid-column: 1 / span 4; }
  .site-footer__info { grid-column: 5 / -1; grid-template-columns: repeat(4, auto); }
  .site-footer__actions { grid-column: 5 / -1; }
}

/* 10. Utilities and print */
.nowrap { white-space: nowrap; }
@media print {
  .site-header, .skip-link, .menu-toggle, .mobile-menu, .film-toggle, .m-loop__toggle, .rail__controls { display: none !important; }
  .hero { min-height: 0; background: none; color: var(--ink); }
  .hero__film, .hero__scrim, .hero__mast { display: none; }
  .hero__title, .hero__lede, .hero__lede strong { color: var(--ink); }
}

/* R8-2 (#39613): the email under the phone in the mobile menu's contact note; on a very narrow
   phone (under 22em, as the footer's email) it may break anywhere instead of pushing the menu wide */
@media (max-width: 21.99em) { .mobile-menu__note a[href^="mailto:"] { overflow-wrap: anywhere; } }