/* ==========================================================================
   Expo Hostel & Cottage — shared stylesheet
   One file for every page. Structure follows the Expo House repo
   (assets/css/site.css + assets/js/site.js), with its own palette:
   the hostel rooms are named after Nishijin dye colours, and those
   colours are the system.

   0. Fallback faces
   1. Tokens          5. Components
   2. Base            6. Room cards
   3. Typography      7. Pages (scoped by body class)
   4. Layout          8. Utilities / motion
   ========================================================================== */


/* 0. FALLBACK FACES ---------------------------------------------------------
   Local Times New Roman / Arial resized to the web fonts' measurements, so
   text keeps its size and line breaks while Cormorant Garamond and DM Sans
   load (font-display: swap) and the page does not jump. Values were measured
   in Chromium (canvas measureText over a sample of site text) against the
   Google Fonts files; re-measure if the fonts or weights change. */
@font-face { font-family: "Cormorant Fallback"; font-weight: 500; font-style: normal;
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
  size-adjust: 96.85%; ascent-override: 94.99%; descent-override: 29.94%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; font-weight: 600; font-style: normal;
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold");
  size-adjust: 91.82%; ascent-override: 100.2%; descent-override: 31.58%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; font-weight: 500; font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic");
  size-adjust: 88.99%; ascent-override: 103.38%; descent-override: 32.59%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback"; font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 103.01%; ascent-override: 96.1%; descent-override: 30.09%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback"; font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 105.18%; ascent-override: 94.13%; descent-override: 29.47%; line-gap-override: 0%; }
/* Android has neither Times New Roman nor Arial; it falls through to these
   faces, sized from its own Noto Serif and Roboto. */
@font-face { font-family: "Cormorant Fallback Android"; font-weight: 500; font-style: normal;
  src: local("Noto Serif"), local("NotoSerif"), local("NotoSerif-Regular");
  size-adjust: 82.41%; ascent-override: 111.64%; descent-override: 35.19%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback Android"; font-weight: 600; font-style: normal;
  src: local("Noto Serif Bold"), local("NotoSerif-Bold");
  size-adjust: 78.03%; ascent-override: 117.9%; descent-override: 37.16%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback Android"; font-weight: 500; font-style: italic;
  src: local("Noto Serif Italic"), local("NotoSerif-Italic");
  size-adjust: 77.92%; ascent-override: 118.07%; descent-override: 37.22%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback Android"; font-weight: 400;
  src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 104.18%; ascent-override: 95.02%; descent-override: 29.75%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback Android"; font-weight: 500;
  src: local("Roboto Medium"), local("Roboto-Medium");
  size-adjust: 105.1%; ascent-override: 94.19%; descent-override: 29.5%; line-gap-override: 0%; }


/* 1. TOKENS ----------------------------------------------------------------
   The only place raw colour values live. The owner may fine-tune the hex
   values here after reviewing /styleguide/. */
:root {
  /* Main colours: mostly white (shiro), green as the main colour, orange as the point */
  --shiro:       #FAF7F2;  /* 白 paper — page background (most of the page) */
  --paper:       #FFFFFF;  /* card / form surface on shiro */
  --shiro-deep:  #F3EEE6;  /* warm alternate section background */
  --sumi:        #2A2826;  /* 墨 ink — body text */
  --kuro:        #1F1E1C;  /* 黒 — headings */
  --muted:       #6B665E;  /* secondary text */
  --line:        #E4DED3;  /* hairlines */

  --moss:        #3A4235;  /* 深い苔色 — hero, primary buttons, links, footer */
  --moss-deep:   #2C3328;  /* primary hover */
  --green-pale:  #E9EFE6;  /* pale green bands (inquiry, long stay) */
  /* Orange, the point colour, in three strengths:
     --orange      fills with white text (4.7:1) and outlines (4.4:1 on shiro)
     --orange-ink  small orange text on light backgrounds (5.3:1 on shiro); filled-button hover
     --orange-soft decoration with no text on it (pull-quote rule)
     --orange-pale icon circles, outline-button hover
     --orange-on-moss orange outline button on the moss hero (5.2:1 on moss) */
  --orange:      #B8590A;
  --orange-ink:  #A34F08;
  --orange-soft: #E39A55;
  --terracotta:  #BF7A48;  /* hero tile next to the moss panel — decoration only, no text */
  --orange-pale: #FBEDE1;
  --orange-on-moss: #EFA968;

  /* Soft colours from the room dye names, for icon circles, tags and colour tiles.
     Text and icons on them stay moss/sumi (AA). */
  --tint-sky:    #E3ECF5;  /* 紺 kon, softened */
  --tint-pink:   #F7E3DE;  /* 茜 akane, softened */
  --tint-leaf:   #E6EDD8;  /* 苔 koke, softened */
  --tint-butter: #F6ECCF;  /* 金 kin, softened */

  /* On the moss background (hero, footer) */
  --on-moss:       #FAF7F2;
  --on-moss-muted: #C9CDBE;  /* 6.4:1 on moss */
  --on-moss-line:  rgba(250, 247, 242, 0.22);
  /* Weave texture on the moss hero: tiny thread crossings, barely visible */
  --thread-knot:  rgba(250, 247, 242, 0.06);
  --thread-knot-warm: rgba(250, 247, 242, 0.04);  /* same weave on the lighter terracotta tile */

  /* Gold — thin decorative rules only (under the hero, top of the footer). Never text. */
  --kin:    #B08A3E;

  /* Room key colours — the colour of each room's key at the office.
     Used ONLY to tell rooms apart: the round name badge and the thin line on
     top of the room card. Never for buttons, headings or body text.
     The kanji inside the badge is white or near-black (set per room in
     scripts/build-rooms.mjs); the build stops if it falls below 3:1. */
  --room-kin:   #7B5A3C;  /* 金 brown */
  --room-kon:   #1B1D5E;  /* 紺 navy */
  --room-aka:   #E3120B;  /* 赤 red */
  --room-kuro:  #111111;  /* 黒 black */
  --room-shiro: #FFFFFF;  /* 白 white, drawn with a thin black outline */
  --room-koke:  #2F5238;  /* 苔 deep green */
  --room-akane: #EE4F1D;  /* 茜 vermilion */
  --room-jin:   #999491;  /* 陣 grey (was #A39E9B; deepened so white kanji reach 3:1) */
  --room-ai:    #F2287F;  /* 逢 pink */
  --room-akari: #FDCB33;  /* 灯 yellow */
  --room-san:   #00A982;  /* 賛 teal (was #00BF96; deepened so white kanji reach 3:1) */
  --room-fune:  #3D97D3;  /* 船 blue */
  --room-tane:  #C57EAF;  /* 種 wisteria (was #CE86B8; deepened so white kanji reach 3:1) */
  --room-sane:  #77A145;  /* 実 yellow-green (was #8BB65A; deepened so white kanji reach 3:1) */
  /* the earlier, lighter values — shown on /styleguide/ for comparison only */
  --room-san-was:  #00BF96;
  --room-tane-was: #CE86B8;
  --room-sane-was: #8BB65A;
  --room-jin-was:  #A39E9B;
  --room-ink-light: #FFFFFF;  /* kanji on dark key colours */
  --room-ink-dark:  #111111;  /* kanji on light key colours */

  /* Type */
  /* Cormorant Garamond: headings 24px and up (500), short names 20px and up (600),
     the hero's second line only (italic 500). Never below 20px — it is thin.
     DM Sans: body, sentence-like headings (FAQ questions) and controls.
     Shippori Mincho: room-name kanji only, loaded for just those characters. */
  --font-serif: "Cormorant Garamond", "Cormorant Fallback", "Cormorant Fallback Android", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --font-kanji: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:  "DM Sans", "DM Sans Fallback", "DM Sans Fallback Android", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ja:    "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);  /* 13–14 */
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);       /* 16–18 body */
  --step-1:  clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);  /* 18–21 */
  --step-2:  clamp(1.5rem, 1.38rem + 0.55vw, 1.875rem);    /* 24–30 */
  --step-name: clamp(1.25rem, 1.19rem + 0.3vw, 1.4375rem); /* 20–23: short names in Cormorant 600 */
  --step-3:  clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);       /* 28–40 */
  --step-4:  clamp(2.125rem, 1.7rem + 1.9vw, 3.5rem);      /* 34–56 */
  --step-kanji: clamp(2.75rem, 2.2rem + 2.4vw, 4.5rem);

  --leading: 1.65;
  --measure: 68ch;

  /* Space, radius, layout — soft corners like Expo House */
  --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: 4.5rem;
  --section-y: clamp(3.5rem, 2.6rem + 4vw, 6.5rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --container: 1120px;
  --radius-sm: 10px;   /* inputs, small boxes */
  --radius-img: 12px;  /* images */
  --radius: 16px;      /* cards */
  --radius-pill: 999px;/* buttons, tags */
  --header-h: 64px;
  /* Lucide chevron-down as a mask (FAQ answers open/close); colour comes from background */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --tap: 44px;
}


/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  background: var(--shiro);
  color: var(--sumi);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
picture { display: contents; }  /* WebP wrappers from scripts/images.mjs must not change layout */
picture > source { display: none; }  /* …and their <source> must not become a grid or flex item */
a { color: var(--moss); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--moss-deep); }
ul[class], ol[class] { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); }
::selection { background: var(--moss); color: var(--shiro); }

:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; border-radius: 2px; }
.on-moss :focus-visible, .site-footer :focus-visible { outline-color: var(--on-moss); }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 1000;
  background: var(--moss); color: var(--on-moss); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: var(--space-3); color: var(--on-moss); }

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


/* 3. TYPOGRAPHY ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--kuro);
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); line-height: 1.1; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-name); font-weight: 600; }
/* Short names (card titles, room names, small section labels): Cormorant 600, 20px and up */
.name-heading, .room-name-en, .page-home .note-title, .page-stay .good-title, .page-stay .callout-title,
.page-guide .guide-card-title, .also-see-label, .page-inquiry .aside-title, .prose h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: var(--step-name); line-height: 1.25;
}
h1 em, h2 em, h3 em { font-style: normal; }  /* no italic accent words */
p, li, dd { text-wrap: pretty; }
small, .text-small { font-size: var(--step--1); }
.text-muted { color: var(--muted); }

/* Japanese lines: system fonts only, no web-font download */
:lang(ja) { font-family: var(--font-ja); line-height: 1.85; letter-spacing: 0.02em; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { font-family: var(--font-ja); font-weight: 600; }

.kanji {
  font-family: var(--font-kanji);
  font-weight: 700;
  line-height: 1;
}


/* 4. LAYOUT ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow {
  width: 100%;
  max-width: calc(46rem + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--line); }
.section--alt { background: var(--shiro-deep); }
.section--dark, .on-moss { background-color: var(--moss); color: var(--on-moss); }
.section--dark h2, .section--dark h3, .on-moss h2, .on-moss h3 { color: var(--on-moss); }

.section-head { max-width: 40rem; margin-bottom: var(--space-6); }
.section-head p { color: var(--muted); margin-top: var(--space-3); }
/* Optional quiet heading: smaller, sans, no eyebrow above */
.quiet-heading {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}


/* 5. COMPONENTS ------------------------------------------------------------ */

/* 5.1 Buttons — rounded pills with a small leading icon, no trailing arrows.
   primary   = moss fill (one filled button per screen on mobile)
   secondary = moss outline
   accent    = orange outline ("Ask about a long stay")
   accent-solid = orange fill, only where the long stay is that scene's main action
   Min tap target 44px. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap);
  padding: 0.6rem 1.35rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn .icon { width: 18px; height: 18px; flex: none; margin-left: -0.15rem; }
.btn-primary { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.btn-primary:hover, .btn-primary:active { background: var(--moss-deep); border-color: var(--moss-deep); color: var(--paper); }
.btn-secondary { background: transparent; border-color: var(--moss); color: var(--moss); }
.btn-secondary:hover { background: var(--green-pale); color: var(--moss); }
.btn-accent { background: transparent; border-color: var(--orange); color: var(--orange-ink); }
.btn-accent:hover { background: var(--orange-pale); border-color: var(--orange); color: var(--orange-ink); }
.btn-accent-solid { background: var(--orange); border-color: var(--orange); color: var(--paper); }
.btn-accent-solid:hover, .btn-accent-solid:active { background: var(--orange-ink); border-color: var(--orange-ink); color: var(--paper); }
/* On moss (hero, footer): primary turns light, outlines turn light */
.on-moss .btn-primary, .section--dark .btn-primary { background: var(--on-moss); border-color: var(--on-moss); color: var(--moss); }
.on-moss .btn-primary:hover, .section--dark .btn-primary:hover { background: var(--paper); border-color: var(--paper); color: var(--moss-deep); }
.on-moss .btn-secondary, .section--dark .btn-secondary { border-color: var(--on-moss); color: var(--on-moss); }
.on-moss .btn-secondary:hover, .section--dark .btn-secondary:hover { background: var(--on-moss); color: var(--moss); }
.on-moss .btn-accent, .section--dark .btn-accent { border-color: var(--orange-on-moss); color: var(--orange-on-moss); }
.on-moss .btn-accent:hover, .section--dark .btn-accent:hover { background: var(--orange-on-moss); border-color: var(--orange-on-moss); color: var(--moss); }
.btn-text {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--moss); font-weight: 500; text-decoration: underline;
}
.on-moss .btn-text, .section--dark .btn-text { color: var(--on-moss); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* 5.2 Header */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--shiro);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--header-h);
}
/* The wordmark is the one Cormorant use under 24px (until the logo image arrives) */
.wordmark {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem);
  letter-spacing: 0.06em;
  color: var(--kuro);
  text-decoration: none;
  line-height: 1.2;
  margin-right: auto;
}
.wordmark:hover { color: var(--kuro); }
/* Logo (images/logo.svg, from the original Illustrator file; lettering recoloured to moss, blue dots match the favicon) */
.wordmark { display: flex; align-items: center; }
.wordmark img { display: block; width: auto; height: 24px; }
@media (min-width: 720px) { .wordmark img { height: 34px; } }
@media (min-width: 1200px) { .wordmark img { height: 38px; } }
.site-nav { display: none; }
.site-nav-list { display: flex; gap: var(--space-1); align-items: center; }
.site-nav-list > li { position: relative; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding-inline: var(--space-3);
  font-size: 0.9375rem;
  color: var(--sumi);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--moss); }
.site-nav a[aria-current] { color: var(--moss); border-bottom-color: var(--moss); }
.site-nav .has-sub > .sub-nav {
  position: absolute; top: 100%; left: 0; min-width: 11rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--space-2) 0;
  display: none;
}
.site-nav .has-sub:hover > .sub-nav,
.site-nav .has-sub:focus-within > .sub-nav { display: block; }
.site-nav .sub-nav a { display: flex; padding-inline: var(--space-4); border: 0; }
.site-nav .sub-nav a[aria-current] { border: 0; text-decoration: underline; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-actions .btn { padding-inline: 0.9rem; white-space: nowrap; }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  background: none; border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--kuro); cursor: pointer;
}
.menu-toggle .icon { width: 22px; height: 22px; }
.menu-toggle .icon-close { display: none; }
.menu-open .menu-toggle .icon-open { display: none; }
.menu-open .menu-toggle .icon-close { display: block; }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--shiro);
  padding-block: var(--space-3) var(--space-5);
}
.menu-open .mobile-menu { display: block; }
.mobile-menu a {
  display: flex; align-items: center; min-height: var(--tap);
  font-family: var(--font-sans); font-weight: 500; font-size: var(--step-1);
  color: var(--kuro); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a[aria-current] { color: var(--moss); }
.mobile-menu .sub a { padding-left: var(--space-5); font-family: var(--font-sans); font-size: var(--step-0); }

/* Mobile: the header "See rooms" is an outline, so it never competes with a filled button below */
@media (max-width: 959.98px) {
  .header-actions .btn-primary { background: transparent; color: var(--moss); }
  .header-actions .btn-primary:hover { background: var(--green-pale); color: var(--moss); }
}
@media (min-width: 960px) {
  .site-nav { display: block; }
  .menu-toggle, .mobile-menu, .menu-open .mobile-menu { display: none; }
  .header-actions .btn { padding-inline: 1.35rem; }
}
@media (max-width: 380px) {
  .wordmark img { height: 21px; }
  .header-actions .btn { padding-inline: 0.75rem; font-size: 0.875rem; }
}

/* 5.2b Weave — from the earlier hero's texture: only the small squares
   where warp and weft cross, every 28px. No lines (they read as notebook
   ruling). CSS only, very faint; used on the moss hero only. */
.page-home .hero-content, .page-home .hero-tile--terracotta, .sg-hero-sample {
  background-image: conic-gradient(at 4px 4px, transparent 75%, var(--thread-knot) 0);
  background-size: 28px 28px;
  background-position: 12px 12px;
}

/* 5.3 Footer — kuro (near-black), short on mobile */
.site-footer {
  background-color: var(--kuro);
  border-top: 1px solid var(--kin);
  color: var(--on-moss);
  padding-block: var(--space-7) var(--space-5);
  font-size: var(--step--1);
}
.site-footer ul { list-style: none; }
.site-footer a { color: var(--on-moss); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--on-moss); }
.footer-brand { font-family: var(--font-sans); font-weight: 500; font-size: var(--step-1); color: var(--on-moss); }
.footer-brand-sub { color: var(--on-moss-muted); margin-top: var(--space-2); max-width: 28rem; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.footer-col h2 {
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500;
  color: var(--on-moss-muted); margin-bottom: var(--space-1);
}
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; }
.footer-legal {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--on-moss-line);
  color: var(--on-moss-muted);
}
.footer-licence summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap);
  cursor: pointer; color: var(--on-moss);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.footer-licence summary::marker, .footer-licence summary::-webkit-details-marker { display: none; content: ""; }
.footer-licence summary .icon { width: 16px; height: 16px; transition: transform 0.15s ease; }
.footer-licence[open] summary .icon { transform: rotate(180deg); }
.footer-licence ul { list-style: none; margin-top: var(--space-2); font-size: 0.75rem; line-height: 1.7; color: var(--on-moss-muted); }
.footer-licence li { padding-block: 2px; }
.footer-licence li span { color: var(--on-moss); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-4);
  color: var(--on-moss-muted);
}
.back-top {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--on-moss-line); border-radius: 50%;
}
.back-top .icon { width: 18px; height: 18px; }
@media (min-width: 720px) {
  .footer-top { display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--space-7); }
  .footer-cols { margin-top: 0; }
}

/* 5.4 Mobile sticky bar (from Expo House) — small screens only.
   Configured per page by data-sticky. One filled + one outline button.
   Hidden until the page's first section (the hero) has scrolled past, and
   while the page's own main CTA ([data-main-cta]) is on screen. */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: flex; gap: var(--space-2);
  padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
  background: var(--shiro);
  border-top: 1px solid var(--line);
  transition: transform 0.2s ease;
}
.sticky-bar .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--space-2); font-size: 0.875rem; line-height: 1.15; }
@media (max-width: 419.98px) { .sticky-bar .btn .icon { display: none; } }
.sticky-bar .btn .icon { width: 16px; height: 16px; }
.sticky-bar.is-hidden { transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0s 0.2s; }
/* room for the bar under the footer, in the footer's own green */
body:has(> .sticky-bar) .site-footer { padding-bottom: calc(var(--space-5) + var(--tap) + 1.25rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 720px) {
  .sticky-bar { display: none; }
  body:has(> .sticky-bar) .site-footer { padding-bottom: var(--space-5); }
}

/* 5.5 Prose — local-guide articles */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--step-2); margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose a { color: var(--moss); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose figure { margin-block: 2em; }
.prose figure img { width: 100%; border-radius: var(--radius-img); }
figcaption { margin-top: var(--space-2); font-size: var(--step--1); color: var(--muted); }
.pull-quote {
  margin-block: 2em; padding-left: var(--space-5);
  border-left: 3px solid var(--orange-soft);
  font-family: var(--font-serif); font-size: var(--step-2); line-height: 1.45; color: var(--kuro);
}
.map-embed { aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius-img); overflow: hidden; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }
@media (min-width: 720px) { .map-embed { aspect-ratio: 16 / 9; } }

/* "Good to know" aside box */
.aside-box {
  border: 1px solid var(--line);
  background: var(--green-pale);
  border-color: transparent;
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  font-size: var(--step--1);
  line-height: 1.7;
}
.aside-box strong, .aside-box .aside-box-title {
  display: block; margin-bottom: var(--space-1);
  font-size: var(--step-0); color: var(--moss); font-weight: 500;
}

/* 5.6 Facts list (label / value pairs) */
.facts { display: grid; grid-template-columns: minmax(7rem, 34%) 1fr; border-top: 1px solid var(--line); }
.facts dt, .facts dd { padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: var(--step--1); padding-right: var(--space-4); }

/* 5.7 Review quote — plain text */
.review { max-width: 40rem; }
.review blockquote {
  font-family: var(--font-sans); font-size: var(--step-1); line-height: 1.6; color: var(--kuro);
}
.review figcaption { margin-top: var(--space-3); font-size: var(--step--1); color: var(--muted); }
.review figcaption b { font-weight: 500; color: var(--sumi); }

/* 5.8 FAQ — native details/summary */
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  min-height: var(--tap); padding-block: var(--space-4);
  cursor: pointer; list-style: none;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--step-1); color: var(--kuro); line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.2rem;
  background: var(--moss);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
  transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary > * { font: inherit; color: inherit; }
.faq .faq-a { padding-bottom: var(--space-5); color: var(--sumi); max-width: var(--measure); }
.faq .faq-a + .faq-a { margin-top: -0.5rem; }

/* 5.9 Breadcrumb */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--step--1); color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-2); color: var(--muted); }
.breadcrumb a { color: var(--moss); }
.breadcrumb [aria-current] { color: var(--sumi); }

/* 5.10 Notice — small info box (e.g. price note) */
.notice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  background: var(--shiro-deep);
  border-left: 3px solid var(--moss);
  border-radius: var(--radius-sm);
  font-size: var(--step--1); color: var(--sumi); line-height: 1.6;
}
.notice .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--moss); }

/* 5.11 Illustration slot — owner-drawn spot art; never a hero */
.illustration-slot { display: flex; justify-content: center; margin-block: var(--space-5); }
.illustration-slot img, .illustration-slot svg { max-height: 160px; width: auto; }
@media (min-width: 720px) { .illustration-slot img, .illustration-slot svg { max-height: 220px; } }

/* 5.12 Icons — one set (Lucide, sprite at /assets/icons.svg, built by
   scripts/icons.mjs). Same stroke and size everywhere; colour follows the
   text. Decorative icons carry aria-hidden="true".
     <svg class="icon" aria-hidden="true"><use href="/assets/icons.svg#i-wifi"/></svg> */
.icon {
  display: inline-block; flex: none; width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
/* Round soft-colour circle behind an icon (colours from the room dyes, softened).
   The icon itself stays moss: 8–9:1 on every tint. */
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-pale); color: var(--moss);
}
.icon-badge .icon { width: 22px; height: 22px; }
.icon-badge--sky    { background: var(--tint-sky); }
.icon-badge--pink   { background: var(--tint-pink); }
.icon-badge--leaf   { background: var(--tint-leaf); }
.icon-badge--butter { background: var(--tint-butter); }
.icon-badge--orange { background: var(--orange-pale); }

/* Facility list — icon + label. Reusable on any stay or room page:
   <ul class="feature-list"><li><span class="icon-badge"><svg class="icon" aria-hidden="true">
   <use href="/assets/icons.svg#i-wifi"/></svg></span><span>Wi-Fi throughout</span></li></ul> */
.feature-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.feature-list li { display: flex; align-items: center; gap: var(--space-3); }
@media (min-width: 720px) { .feature-list--2col { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); } }

/* 5.13 Tags — small soft pills. Text stays moss/sumi on every tint (AA). */
.tag, .pill {
  display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start;
  padding: 0.15rem 0.65rem; border-radius: var(--radius-pill);
  font-size: 0.8125rem; font-weight: 500; line-height: 1.5;
  background: var(--green-pale); color: var(--moss);
}
.pill--sky    { background: var(--tint-sky); }
.pill--pink   { background: var(--tint-pink); }
.pill--leaf   { background: var(--tint-leaf); }
.pill--butter { background: var(--tint-butter); }
.pill--orange { background: var(--orange-pale); color: var(--orange-ink); }

/* 5.14 Cards (generic: photo + text). Hairline, no shadow. */
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--sumi);
  text-decoration: none;
}
a.card:hover { border-color: var(--moss); color: var(--sumi); }
.card-media { aspect-ratio: 4 / 3; background: var(--shiro-deep); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }

/* 5.15 Forms */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-size: var(--step--1); font-weight: 500; color: var(--sumi); }
.input, .fg input, .fg select, .fg textarea {
  width: 100%; min-height: var(--tap);
  padding: 0.6rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--muted);
  border-radius: var(--radius-sm);
  font-size: 1rem; color: var(--sumi);
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--muted); }
.fg input:focus-visible, .fg select:focus-visible, .fg textarea:focus-visible { outline: 2px solid var(--moss); outline-offset: 1px; border-color: var(--moss); }


/* 6. ROOM CARDS ------------------------------------------------------------
   Two variants that look related but not identical:
   cottage = large, photo-led; hostel = compact. Every room carries its key
   colour (--room-<id>) in two places only: the round name badge and the thin
   line on top of its card. */
.room-card {
  --tint: var(--line);
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--tint);
  border-radius: var(--radius);
  overflow: hidden;
}
.room-card.tint-shiro { border-top: 1px solid var(--room-ink-dark); }  /* a white line would vanish: keep it thin and black */
.room-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--shiro-deep); }
.room-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-card-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
.room-name { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.room-name-en { color: var(--kuro); }
.room-card--cottage .room-name-en { font-size: var(--step-2); }
.room-meaning { display: block; font-family: var(--font-sans); font-weight: 400; font-size: var(--step--1); color: var(--muted); }
.room-facts-line { font-size: var(--step--1); color: var(--muted); }
.room-tagline { font-size: var(--step-1); color: var(--kuro); }
.room-summary-ja { font-size: 0.8125rem; color: var(--muted); }
.room-card .btn-row { margin-top: auto; padding-top: var(--space-2); }

.room-card--hostel .room-card-body { padding: var(--space-4); gap: var(--space-2); }
.room-card--hostel .room-description { font-size: var(--step--1); }

/* Round name badge, like the room's key tag: the same size for all 14 rooms.
   .room-badge--ink-light / --ink-dark is chosen by scripts/build-rooms.mjs. */
.room-badge {
  --badge: 3.25rem;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--badge); height: var(--badge); border-radius: 50%;
  background: var(--tint); color: var(--room-ink-dark);
  font-family: var(--font-kanji); font-weight: 700; font-size: calc(var(--badge) * 0.5); line-height: 1;
}
.room-badge--ink-light { color: var(--room-ink-light); }
.room-badge--ink-dark { color: var(--room-ink-dark); }
.room-badge.tint-shiro { box-shadow: inset 0 0 0 1.5px var(--room-ink-dark); }
.room-badge--lg { --badge: 5rem; }
.room-badge--sm { --badge: 2.5rem; }

.tint-kuro  { --tint: var(--room-kuro); }
.tint-shiro { --tint: var(--room-shiro); }
.tint-koke  { --tint: var(--room-koke); }
.tint-akane { --tint: var(--room-akane); }
.tint-kin   { --tint: var(--room-kin); }
.tint-kon   { --tint: var(--room-kon); }
.tint-aka   { --tint: var(--room-aka); }
.tint-jin   { --tint: var(--room-jin); }
.tint-ai    { --tint: var(--room-ai); }
.tint-akari { --tint: var(--room-akari); }
.tint-san   { --tint: var(--room-san); }
.tint-fune  { --tint: var(--room-fune); }
.tint-tane  { --tint: var(--room-tane); }
.tint-sane  { --tint: var(--room-sane); }



/* 7. PAGES ------------------------------------------------------------------
   Page sections keep their existing class names; rules that would clash
   between pages are scoped by the body class. */

/* 7.0 Shared page heads (light, no eyebrow) */
.page-intro-head { padding-block: var(--space-7) var(--space-6); border-bottom: 1px solid var(--line); }
.page-intro-head p { margin-top: var(--space-3); color: var(--muted); max-width: 40rem; }

/* Pale green closing band (inquiry and similar), like Expo House */
.cta-band { background: var(--green-pale); color: var(--sumi); padding-block: var(--section-y); }
.cta-band p { color: var(--sumi); }
.cta-band a:not(.btn) { color: var(--moss); }

/* ---- 7.1 Home ---- */
/* Hero: a short deep-moss panel (headline + buttons) with the earlier site's
   faint line drawings, then the photo/video slider. On mobile the panel comes
   first and the photo starts near the bottom of the first screen. On desktop
   the panel, slider and two small tiles (a street photo and an orange colour
   tile) sit in a rounded grid, like Expo House. */
.page-home .hero { display: grid; background: var(--shiro); }
.page-home .hero-content { position: relative; overflow: hidden; padding: var(--space-6) var(--gutter) var(--space-6); }
.page-home .hero-motif { position: absolute; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; color: var(--on-moss); pointer-events: none; }
.page-home .hero-motif-bicycle { bottom: var(--space-6); right: var(--gutter); opacity: 0.2; }
.page-home .hero-motif-hill { display: none; }
.page-home .hero-motif-house { display: none; }
.page-home .hero-label, .page-home .hero-headline, .page-home .hero-sub, .page-home .hero-cta { position: relative; }
/* The hero's "signature" — the only letter-spaced label and the only italic on the site */
.page-home .hero-label {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-moss-muted);
}
.page-home .hero-label::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--kin); }
.page-home .hero-headline { font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem); line-height: 1.02; color: var(--on-moss); }
.page-home .hero-line { display: block; }
.page-home .hero-line-soft { color: var(--on-moss-muted); font-style: italic; }
.page-home .hero-sub { margin-top: var(--space-4); color: var(--on-moss-muted); max-width: 34rem; }
.page-home .hero-cta { margin-top: var(--space-5); }
.page-home .hero-photo { position: relative; aspect-ratio: 4 / 3; background: var(--moss-deep); overflow: hidden; }
/* Still copy of the first slide: a responsive, high-priority <img> that paints
   before the video poster can. Hidden once the slider has moved on. */
.page-home .hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-home .hero-photo.is-started .hero-still { visibility: hidden; }
/* Until the slider is ready (shortly after load), only the first slide is
   rendered, so the other slides' images and posters do not compete with it. */
.page-home .hero-photo:not(.is-ready) .hero-photo-inner > :not(.active):not(:has(.active)) { display: none; }
.page-home .hero-photo-inner { position: absolute; inset: 0; }
.page-home .hero-photo-inner img, .page-home .hero-photo-inner video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.page-home .hero-photo-inner .active { opacity: 1; }
/* data/hero-slides.json "focus": which side of a cropped photo stays visible */
.page-home .hero img[data-focus="left"] { object-position: 0% 50%; }
.page-home .hero img[data-focus="right"] { object-position: 100% 50%; }
.page-home .hero img[data-focus="left-center"] { object-position: 33% 50%; }
.page-home .hero img[data-focus="right-center"] { object-position: 66% 50%; }
.page-home .hero-photo-dots {
  position: absolute; left: 0; right: 0; bottom: var(--space-3);
  display: flex; justify-content: center; gap: 6px;
}
.page-home .hero-photo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--on-moss); opacity: 0.5; }
.page-home .hero-photo-dot.active { opacity: 1; }
.page-home .hero-tiles { display: none; }
/* thin gold rule under the hero (decoration, never text) */
.page-home .hero + * { border-top: 1px solid var(--kin); }
@media (min-width: 720px) {
  .page-home .hero-photo { aspect-ratio: 16 / 9; }
  .page-home .hero-motif-hill { display: block; top: var(--space-5); right: var(--gutter); opacity: 0.18; }
}
@media (min-width: 960px) {
  .page-home .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.4fr);
    gap: var(--space-3);
    padding: var(--space-3) max(var(--gutter), calc((100vw - var(--container)) / 2)) 0;
    height: min(80vh, 720px); min-height: 540px; padding-bottom: var(--space-6);
  }
  .page-home .hero-content {
    display: flex; flex-direction: column; justify-content: flex-end;
    border-radius: var(--radius); padding: var(--space-7) var(--space-6) var(--space-6);
  }
  .page-home .hero-headline { font-size: clamp(2.75rem, 0.5rem + 3.6vw, 4.25rem); }
  .page-home .hero-motif-bicycle { bottom: auto; top: var(--space-6); right: var(--space-6); }
  .page-home .hero-motif-house { display: block; top: var(--space-6); left: var(--space-6); opacity: 0.16; }
  .page-home .hero-motif-hill { top: calc(var(--space-6) + 64px); right: 28%; }
  .page-home .hero-photo { aspect-ratio: auto; border-radius: var(--radius); }
  .page-home .hero-tiles { display: grid; grid-template-rows: 1.4fr 1fr; gap: var(--space-3); }
  .page-home .hero-tile { position: relative; border-radius: var(--radius); overflow: hidden; }
  .page-home .hero-tile--photo img { width: 100%; height: 100%; object-fit: cover; }
  .page-home .hero-tile--terracotta { display: flex; align-items: flex-end; justify-content: center; padding: 0 var(--space-4) var(--space-5); background-color: var(--terracotta); color: var(--on-moss); }
  .page-home .hero-tile-drawing { width: 100%; max-width: 168px; height: auto; fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
  .page-home .hero-tile-drawing * { vector-effect: non-scaling-stroke; }
  .page-home .hero-tile-ground { opacity: 0.6; }
  .page-home .hero-tile--terracotta { --thread-knot: var(--thread-knot-warm); }
}

.page-home .stays-header, .page-home .longstay-header, .page-home .how-header,
.page-home .reviews-header { margin-bottom: var(--space-6); }
.page-home .longstay-header {
  display: grid; gap: var(--space-3);
}
.page-home .longstay-copy, .page-home .reviews-sub { color: var(--muted); max-width: 34rem; }
@media (min-width: 960px) {
  .page-home .longstay-header { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--space-7); }
}

.page-home .stays-grid { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .page-home .stays-grid { grid-template-columns: 1fr 1fr; } }
.page-home .stay-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.page-home .stay-card:hover { border-color: var(--moss); }
.page-home .stay-card-link { position: absolute; inset: 0; z-index: 1; }
.page-home .stay-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--shiro-deep); }
.page-home .stay-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-home .stay-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.page-home .stay-name { font-size: var(--step-3); }
.page-home .stay-ideal { color: var(--muted); }
.page-home .stay-actions { margin-top: auto; padding-top: var(--space-3); position: relative; z-index: 2; }
.page-home .stays-all { margin-top: var(--space-6); text-align: center; }
.page-home .stay-link { color: var(--moss); font-weight: 500; display: inline-flex; min-height: var(--tap); align-items: center; }

.page-home .longstay-photo { margin-bottom: var(--space-6); border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 9; }
.page-home .longstay-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-home .longstay-grid { display: grid; gap: 0; border-top: 1px solid var(--line); }
.page-home .ls-card { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.page-home .ls-icon { grid-row: span 2; align-self: start; }
.page-home .ls-title { font-weight: 500; color: var(--kuro); }
.page-home .ls-desc { font-size: var(--step--1); color: var(--muted); }
@media (min-width: 720px) {
  .page-home .longstay-grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); }
}
/* Desktop: photo left (shown near its real 720px width), text and points right */
@media (min-width: 960px) {
  .page-home .longstay .container {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-7);
    grid-template-areas: "photo header" "photo points" "photo more"; grid-template-rows: auto auto 1fr; align-items: start;
  }
  .page-home .longstay-header { grid-area: header; display: block; }
  .page-home .longstay-copy { margin-top: var(--space-3); }
  .page-home .longstay-photo { grid-area: photo; margin-bottom: 0; aspect-ratio: 3 / 2; }
  .page-home .longstay-grid { grid-area: points; grid-template-columns: 1fr; margin-top: var(--space-5); }
  .page-home .longstay-more { grid-area: more; }
}

.page-home .reviews-widget-wrap { min-height: 120px; }

.page-home .neighborhood { background: var(--shiro-deep); }
.page-home .neighborhood-copy { margin-top: var(--space-4); max-width: var(--measure); }
.page-home .access-block { margin-top: var(--space-7); display: grid; gap: var(--space-3); }
.page-home .access-copy { color: var(--sumi); max-width: var(--measure); }
.page-home .map-wrap { margin-top: var(--space-3); aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius-img); overflow: hidden; }
.page-home .map-wrap iframe { width: 100%; height: 100%; border: 0; }
@media (min-width: 720px) { .page-home .map-wrap { aspect-ratio: 21 / 9; } }


.steps { display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: step; }
.step { padding-block: var(--space-5); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 3.5rem 1fr; column-gap: var(--space-3); }
.step-num { grid-row: span 2; font-family: var(--font-serif); font-size: var(--step-2); color: var(--moss); line-height: 1.1; }
.step-title { font-weight: 500; color: var(--kuro); }
.step-desc { color: var(--muted); font-size: var(--step--1); }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-6); border-top: 0; }
  .step { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--kin); padding-top: var(--space-4); }
  .step-num { grid-row: auto; margin-bottom: var(--space-2); }
}
/* Home "How booking works": two ways to book, side by side from 720px. */
.page-home .how-choices { display: grid; gap: var(--space-6); }
.page-home .how-choice { display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--kin); padding-top: var(--space-4); }
.page-home .how-choice-title { font-size: var(--step-1); }
.page-home .how-choice p { color: var(--muted); }
.page-home .how-choice .btn { align-self: flex-start; margin-top: auto; }
@media (min-width: 720px) { .page-home .how-choices { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }
.page-home .how-note { margin-top: var(--space-6); color: var(--muted); }

.page-home .notes-grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .page-home .notes-grid { grid-template-columns: repeat(3, 1fr); } }
.page-home .notes-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 719px) {
  .page-home .notes-grid--4 .note-body { padding: var(--space-3); }
  .page-home .notes-grid--4 .note-title { font-size: 1.0625rem; }
  .page-home .notes-grid--4 .note-tag { font-size: 0.75rem; padding-inline: 0.5rem; }
}
@media (min-width: 1024px) { .page-home .notes-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.page-home .neighborhood .notes-grid { margin-top: var(--space-6); }
.page-home .note-tag { align-items: center; gap: 0.35rem; align-self: flex-start; }
.page-home .note-tag .icon { width: 0.95rem; height: 0.95rem; }
.page-home .neighborhood-more, .page-home .longstay-more { margin-top: var(--space-5); }
.page-home .note-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--sumi); text-decoration: none; }
.page-home .note-card:hover { border-color: var(--moss); color: var(--sumi); }
.page-home .note-photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--shiro-deep); }
.page-home .note-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-home .note-body { padding: var(--space-4); }
.page-home .note-tag { display: inline-flex; padding: 0.15rem 0.65rem; border-radius: var(--radius-pill); background: var(--green-pale); font-size: 0.8125rem; color: var(--moss); font-weight: 500; margin-bottom: var(--space-2); }
.page-home .note-title { color: var(--kuro); }

.page-home .inquiry { text-align: center; }
.page-home .inquiry-inner { max-width: 36rem; margin-inline: auto; }
.page-home .inquiry-sub { margin: var(--space-3) auto var(--space-5); }
.page-home .inquiry-actions { justify-content: center; }

/* ---- 7.1b Light page heads (local guide, FAQ, inquiry, thanks) ---- */
.page-intro-head h1 { max-width: 40rem; }
.page-intro-note { font-size: var(--step--1); }

/* ---- 7.2 Hostel / Cottage ---- */
.page-stay .page-hero { position: relative; }
.page-stay .page-hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 720px) { .page-stay .page-hero img { aspect-ratio: 21 / 8; } }
.page-stay .page-hero-content { padding-block: var(--space-6) var(--space-5); }
.page-stay .page-tagline { margin-top: var(--space-2); font-size: var(--step-1); color: var(--muted); }
.page-stay .section-headline { font-size: var(--step-3); }
.page-stay .detail-grid .section-headline { margin-bottom: var(--space-2); }
.page-stay .section-copy { margin-top: var(--space-4); color: var(--sumi); max-width: var(--measure); }
.page-stay .detail-grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 960px) { .page-stay .detail-grid { grid-template-columns: 1fr 1fr; } }
.page-stay .detail-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); }
.page-stay .detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-stay .space-grid { margin-top: var(--space-6); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 960px) { .page-stay .space-grid { grid-template-columns: repeat(4, 1fr); } }
.page-stay .space-card { display: flex; flex-direction: column; gap: var(--space-2); }
.page-stay .space-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-img); overflow: hidden; background: var(--line); }
.page-stay .space-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-stay .space-name { font-weight: 500; color: var(--kuro); }
.page-stay .space-desc { font-size: var(--step--1); color: var(--muted); }
.page-stay .good-grid { display: grid; gap: 0; border-top: 1px solid var(--line); }
.page-stay .good-card { padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
@media (min-width: 720px) {
  .page-stay .good-grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-6); border-top: 0; }
  .page-stay .good-card { border-bottom: 0; border-top: 1px solid var(--kin); }
}
.page-stay .good-title { color: var(--kuro); }
.page-stay .good-desc { margin-top: var(--space-1); color: var(--muted); font-size: var(--step--1); }
.page-stay .callout { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.page-stay .callout-title { color: var(--kuro); }
.page-stay .callout-desc { color: var(--muted); margin-top: var(--space-1); }
.page-stay .callout-list { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.page-stay .callout-list li { display: flex; align-items: flex-start; gap: var(--space-2); }
.page-stay .callout-list .icon { color: var(--moss); margin-top: 0.15rem; }
.page-stay .cta { text-align: center; }
.page-stay .cta-sub { margin: var(--space-3) auto var(--space-5); max-width: 32rem; }
.page-stay .cta-actions { justify-content: center; }
.split-photo video { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-img); background: var(--shiro-deep); display: block; }
.welcome .prose ul li + li { margin-top: 0.35em; }
.page-stay .cta-airbnb-note { margin-top: var(--space-5); font-size: var(--step--1); }

/* ---- 7.3 Local guide index ---- */
.page-guide .guide-section { padding-block: var(--space-7) var(--section-y); }
.page-guide .guide-grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .page-guide .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .page-guide .guide-grid { grid-template-columns: repeat(3, 1fr); } }
.page-guide .guide-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--sumi); text-decoration: none; }
.page-guide .guide-card:hover { border-color: var(--moss); color: var(--sumi); }
.page-guide .guide-card-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--shiro-deep); }
.page-guide .guide-card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); flex: 1; }
.page-guide .guide-lead { margin-bottom: var(--space-4); font-size: var(--step--1); color: var(--muted); }
.page-guide .guide-card-distance { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; padding: 0.15rem 0.65rem; border-radius: var(--radius-pill); background: var(--green-pale); font-size: 0.8125rem; font-weight: 500; color: var(--moss); }
.page-guide .guide-card-distance .icon { width: 0.95rem; height: 0.95rem; }
.page-guide .guide-card-desc { font-size: var(--step--1); color: var(--muted); }
.page-guide .guide-card-link { margin-top: auto; padding-top: var(--space-2); color: var(--moss); font-weight: 500; font-size: var(--step--1); text-decoration: underline; }
.page-guide .page-cta-inner { display: grid; gap: var(--space-5); }
@media (min-width: 960px) { .page-guide .page-cta-inner { grid-template-columns: 1fr auto; align-items: center; } }

/* ---- 7.4 Local-guide article ---- */
.page-article .article-hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 720px) { .page-article .article-hero img { aspect-ratio: 21 / 8; } }
.page-article .article-body { padding-block: var(--space-6) var(--section-y); }
.page-article .article-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; font-size: var(--step--1); }
.page-article .article-category { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.65rem; border-radius: var(--radius-pill); background: var(--green-pale); color: var(--moss); font-weight: 500; }
.page-article .article-category .icon { width: 0.95rem; height: 0.95rem; }
.page-article .article-back { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--moss); }
.page-article .article-title { margin-top: var(--space-3); font-size: var(--step-4); }
.page-article .article-intro { margin-top: var(--space-4); font-size: var(--step-1); line-height: 1.6; color: var(--sumi); max-width: var(--measure); }
.page-article .article-section { margin-top: var(--space-7); max-width: var(--measure); }
.page-article .article-section h2 { font-size: var(--step-2); margin-bottom: var(--space-3); }
.page-article .article-section p + p { margin-top: 1em; }
.page-article .article-section a { color: var(--moss); }
.page-article .article-section strong { font-weight: 500; color: var(--kuro); }
.page-article .article-aside { margin-top: var(--space-6); max-width: var(--measure); }
.page-article .article-section ul, .page-article .article-section ol { padding-left: 1.25em; margin-top: var(--space-3); }
.page-article .article-section ul { list-style: disc; }
.page-article .article-section ol { list-style: decimal; }
.page-article .article-section li + li { margin-top: var(--space-2); }
.page-article .article-section ul + p, .page-article .article-section ol + p { margin-top: var(--space-4); }
.page-article .article-section .faq { padding-left: 0; }
.page-article .guide-glance .facts { font-size: var(--step--1); }
.page-article .article-body--no-hero { padding-top: var(--space-6); }
.page-article .article-figure { margin-top: var(--space-5); }
.page-article .article-figure img { width: 100%; max-width: 463px; height: auto; border-radius: var(--radius-img); }
.page-article .guide-updated { margin-top: var(--space-3); font-size: var(--step--1); color: var(--muted); }

/* ---- 7.5 Closing CTA rows (articles, FAQ, local guide) ---- */
.article-cta-inner { display: grid; gap: var(--space-5); }
@media (min-width: 960px) { .article-cta-inner { grid-template-columns: 1fr auto; align-items: center; } }
.article-cta p, .page-cta p { margin-top: var(--space-2); max-width: 32rem; }
.also-see { padding-block: var(--space-7); }
.also-see-label { display: block; color: var(--kuro); margin-bottom: var(--space-3); }
.also-see-links { display: grid; border-top: 1px solid var(--line); }
.also-see-link { display: flex; align-items: center; min-height: var(--tap); padding-block: var(--space-2); border-bottom: 1px solid var(--line); color: var(--moss); }
@media (min-width: 720px) { .also-see-links { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } }

/* ---- 7.6 FAQ ---- */
.page-faq .faq-body { padding-block: var(--space-6) var(--section-y); }
.page-faq .faq-group + .faq-group { margin-top: var(--space-7); }
.page-faq .faq-group-label { display: block; font-family: var(--font-serif); font-size: var(--step-2); color: var(--kuro); margin-bottom: var(--space-3); }
.page-faq .faq-q { font-size: inherit; line-height: inherit; }

/* ---- 7.7 Inquiry + thanks ---- */
.page-inquiry .inquiry-section { padding-block: var(--space-6) var(--section-y); }
.page-inquiry .stay-path + .stay-path { margin-top: var(--space-7); }
.page-inquiry .stay-path-short { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: var(--radius); }
@media (min-width: 960px) { .page-inquiry .stay-path-short { grid-template-columns: 1fr auto; align-items: center; } }
.page-inquiry .stay-path-heading { font-size: var(--step-2); }
.page-inquiry .stay-path-desc { margin-top: var(--space-2); max-width: var(--measure); }
.page-inquiry .stay-path-desc-ja { margin-top: var(--space-2); font-size: var(--step--1); color: var(--muted); }
.page-inquiry .stay-path-long-header { margin-bottom: var(--space-5); }
.page-inquiry .inquiry-layout { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .page-inquiry .inquiry-layout { grid-template-columns: 1fr 2fr; align-items: start; } }
.page-inquiry .aside-title { color: var(--kuro); }
.page-inquiry .aside-label { font-weight: 500; color: var(--kuro); }
.page-inquiry .aside-desc { font-size: var(--step--1); color: var(--muted); }
.page-inquiry .aside-divider { margin-block: var(--space-4); }
.page-inquiry .form-card { padding: var(--space-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.page-inquiry .form-required-note { font-size: var(--step--1); color: var(--muted); margin-bottom: var(--space-4); }
.page-inquiry .fg { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.page-inquiry .fg label { font-size: var(--step--1); font-weight: 500; color: var(--sumi); }
.page-inquiry .req { color: var(--orange-ink); }
.page-inquiry .fg textarea { min-height: 9rem; resize: vertical; }
.page-inquiry .form-row { display: grid; gap: 0 var(--space-4); }
@media (min-width: 720px) { .page-inquiry .form-row { grid-template-columns: 1fr 1fr; } }
.page-inquiry .date-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.page-inquiry .date-group select { padding-inline: 0.5rem; }
.page-inquiry .date-sublabel, .page-inquiry .date-hint, .page-inquiry .form-response { font-size: var(--step--1); color: var(--muted); }
.page-inquiry .form-response { margin-block: var(--space-2) var(--space-4); }
.page-inquiry .fg-set { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.page-inquiry .fg-set legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--step--1); font-weight: 500; color: var(--sumi); }
.page-inquiry .fg-sub { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.page-inquiry .fg-sub label { font-weight: 400; color: var(--muted); }
.page-inquiry .fg-sub[hidden] { display: none; }
@media (min-width: 720px) { .page-inquiry .form-row--3 { grid-template-columns: repeat(3, 1fr); } }
.page-inquiry .fg-optional { font-weight: 400; color: var(--muted); }
.page-inquiry .room-checks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page-inquiry .room-checks + .room-checks { margin-top: var(--space-3); }
.page-inquiry .room-checks-label { flex-basis: 100%; font-size: var(--step--1); color: var(--muted); }
.page-inquiry .room-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0.25rem 0.75rem 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper); cursor: pointer; font-size: var(--step--1); }
.page-inquiry .room-check input { width: 1rem; height: 1rem; min-height: 0; padding: 0; border: 0; accent-color: var(--moss); margin: 0; flex: none; }
.page-inquiry .room-check:has(input:checked) { border-color: var(--moss); background: var(--tint-leaf); }
.page-inquiry .room-check:has(input:focus-visible) { outline: 2px solid var(--moss); outline-offset: 2px; }
.page-inquiry .btn-submit { width: 100%; }
@media (min-width: 720px) { .page-inquiry .btn-submit { width: auto; } }

.page-thanks .thanks-section { padding-block: var(--space-6) var(--section-y); }
.page-thanks .thanks-body { max-width: 40rem; }
.page-thanks .thanks-lead { font-family: var(--font-serif); font-size: var(--step-2); color: var(--kuro); margin-bottom: var(--space-4); }
.page-thanks .thanks-text { color: var(--sumi); margin-bottom: var(--space-3); }
.page-thanks .thanks-text-ja { margin: var(--space-5) 0 var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--muted); }

/* ---- Guest Choice (/guest-choice/, /guest-choice/thanks/) and Privacy ---- */
.gc-hero { padding-block: var(--space-7) var(--space-8); background: var(--shiro-deep); border-bottom: 1px solid var(--line); }
.gc-kicker { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--step--1); font-weight: 500; color: var(--moss); }
.gc-hero h1 { font-size: var(--step-3); max-width: 36rem; }
/* Seasonal look: a warm, colourful hero with the season's illustration */
.gc-hero--autumn { background: linear-gradient(165deg, var(--orange-pale) 0%, var(--tint-butter) 70%, var(--tint-pink) 100%); border-bottom: 0; }
.gc-hero-inner { display: grid; gap: var(--space-5); }
.gc-hero-art { order: -1; width: 100%; max-width: 30rem; justify-self: center; }
@media (max-width: 959px) { .gc-hero--art { padding-top: var(--space-5); } }
.gc-art { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 1px 0 var(--line); }
.gc-season { display: block; color: var(--orange-ink); }
@media (min-width: 960px) {
  .gc-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: var(--space-7); }
  .gc-hero-art { order: 0; max-width: none; }
  .gc-hero h1 { font-size: var(--step-4); }
}
.gc-sub { display: grid; gap: var(--space-3); margin-top: var(--space-4); font-size: var(--step-0); line-height: 1.7; color: var(--sumi); max-width: 36rem; }
.gc-sub p:first-child { font-size: var(--step-1); line-height: 1.5; font-weight: 500; }
.gc-sub p + p { font-size: var(--step--1); line-height: 1.75; }
.gc-meta { display: grid; gap: 0; margin-top: var(--space-4); font-size: var(--step--1); color: var(--muted); }
.gc-meta li { display: flex; align-items: center; gap: var(--space-2); padding-left: calc(1em + var(--space-2)); }
.gc-meta li:has(.icon) { padding-left: 0; }
.gc-ranking { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding: 0.2rem 0.9rem; border-radius: var(--radius-pill); background: var(--kuro); color: #FFFFFF; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; }
.gc-form h2, .gc-insta h2 { margin-bottom: var(--space-5); }
/* How it works, under the form title in the chosen language */
.gc-intro { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); color: var(--kuro); }
.gc-intro li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); align-items: start; line-height: 1.65; }
.gc-intro-num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-top: -0.15rem; border: var(--pop-line, 2px solid var(--kuro)); border-radius: 50%; background: var(--paper); font-weight: 600; }
.gc-terms { margin-top: var(--space-5); font-size: var(--step--1); color: var(--muted); }
.gc-terms summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); cursor: pointer; color: var(--moss); font-weight: 500; list-style: none; }
.gc-terms summary::-webkit-details-marker { display: none; }
.gc-terms summary::after { content: ""; width: 1rem; height: 1rem; background: var(--moss); -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; transition: transform .2s; }
.gc-terms[open] summary::after { transform: rotate(180deg); }
.gc-terms ul { list-style: disc; padding-left: 1.25em; display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.gc-terms a { color: var(--moss); }
.gc-hashtag { color: var(--sumi); }
.gc-req { display: inline-block; margin-left: var(--space-2); padding: 0.05rem 0.55rem; border-radius: var(--radius-pill); background: var(--orange-pale); color: var(--orange-ink); font-size: 0.75rem; font-weight: 500; vertical-align: middle; }
/* The one required question: same look as the other questions, with the
   agreement written next to the choice so the whole line can be tapped. */
.gc-fm .gc-consent > legend { margin-bottom: var(--space-2); }
.gc-agree { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--step--1); line-height: 1.6; color: var(--muted); }
.gc-agree input { flex: none; width: 1.15rem; height: 1.15rem; min-height: 0; margin: 0.2rem 0 0; padding: 0; border: 0; accent-color: var(--moss); }
.gc-agree strong { color: var(--sumi); font-weight: 500; }
.gc-agree:has(input:focus-visible) { outline: 2px solid var(--moss); outline-offset: 4px; border-radius: var(--radius-sm); }
.gc-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.gc-tabs[hidden] { display: none; }
.gc-tab {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper);
  font: inherit; font-weight: 500; color: var(--moss); cursor: pointer;
}
.gc-tab:hover { border-color: var(--moss); }
.gc-tab[aria-selected="true"] { background: var(--moss); border-color: var(--moss); color: var(--on-moss); }
.gc-tab:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.gc-panel + .gc-panel { margin-top: var(--space-6); }
.gc-panel:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; border-radius: var(--radius); }
.gc-panel-title { font-size: var(--step-1); margin-bottom: var(--space-3); }
.gc-embed { padding: var(--space-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 720px) { .gc-embed { padding: var(--space-5); } }
.gc-embed iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.gc-placeholder {
  display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper); color: var(--muted); text-align: center;
}
.gc-placeholder .icon { width: 1.5rem; height: 1.5rem; color: var(--moss); }
/* Guest Choice form rebuilt from Form Mailer's HTML (same look as the inquiry form) */
.gc-form-card { padding: var(--space-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.gc-fm .form-required-note, .gc-fm .form-response, .gc-fm .fg-help { font-size: var(--step--1); color: var(--muted); }
.gc-fm .form-required-note { margin-bottom: var(--space-4); }
.gc-fm .fg { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-5); }
.gc-fm .fg > label, .gc-fm .fg-set legend { font-weight: 500; color: var(--sumi); }
.gc-fm .fg-set { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.gc-fm .fg-set legend { padding: 0; margin-bottom: var(--space-1); }
.gc-fm .fg-set .fg-help { margin-bottom: var(--space-2); }
.gc-fm .req { color: var(--orange-ink); }
/* Optional tag: same shape as the Required tag (.gc-req), in a quiet grey-green */
.gc-fm .fg-optional { display: inline-block; margin-left: var(--space-2); padding: 0.05rem 0.55rem; border-radius: var(--radius-pill); background: var(--tint-leaf); color: var(--moss); font-size: 0.75rem; font-weight: 500; vertical-align: middle; }
.gc-fm textarea { min-height: 6.5rem; resize: vertical; }
.gc-fm input[type="file"] { padding: 0.5rem; font-size: var(--step--1); }
.gc-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gc-choice { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0.4rem 0.9rem 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper); cursor: pointer; font-size: var(--step--1); line-height: 1.35; }
.gc-choice input { width: 1.05rem; height: 1.05rem; min-height: 0; margin: 0; padding: 0; border: 0; flex: none; accent-color: var(--moss); }
.gc-choice:has(input:checked) { border-color: var(--moss); background: var(--tint-leaf); }
.gc-choice:has(input:focus-visible) { outline: 2px solid var(--moss); outline-offset: 2px; }
.gc-fm .btn-submit { width: 100%; }
@media (min-width: 720px) { .gc-fm .btn-submit { width: auto; } }
.gc-fallback { margin-top: var(--space-3); font-size: var(--step--1); }
.gc-fallback a { color: var(--moss); }
.gc-closed { font-size: var(--step-0); }
.gc-closed a { color: var(--moss); }
.gc-insta p + p { margin-top: var(--space-2); }
.gc-hero--thanks { padding-block: var(--space-7) var(--section-y); border-bottom: 0; }
.gc-thanks:not([hidden]) ~ .gc-thanks:not([hidden]) { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.gc-thanks[hidden] { display: none; }
.gc-thanks-lead { font-family: var(--font-serif); font-size: var(--step-2); line-height: 1.35; color: var(--kuro); }
.gc-thanks .btn-text { gap: var(--space-2); }
/* ---- Guest Choice: pop look (bright colours, bold outlines, hard shadows; nothing tilted) ---- */
.page-guest-choice { --pop-line: 2px solid var(--kuro); --pop-red: #C8432B; --pop-red-ink: #A3321C; --pop-yellow: #FFD45C; --pop-pink: #FFB3C1; --pop-peach: #FFC7A6; --pop-mint: #CDE7A8; }
/* Hero: bright gradient with a soft polka-dot layer */
.page-guest-choice .gc-hero--autumn { position: relative; isolation: isolate; background: linear-gradient(135deg, #FFD3B5 0%, #FFE8A3 48%, #FFC6CF 100%); }
/* Polka dots sit around the illustration and fade out before the text */
.page-guest-choice .gc-hero--autumn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(200, 67, 43, 0.16) 1.6px, transparent 1.8px) 0 0 / 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 48%);
  mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 48%);
}
@media (min-width: 960px) {
  .page-guest-choice .gc-hero--autumn::before {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 70%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 70%);
  }
}
.page-guest-choice .gc-hero h1 { font-size: var(--step-4); letter-spacing: -0.01em; }
.page-guest-choice .gc-season { display: inline; padding-inline: 0.12em; background: linear-gradient(transparent 55%, var(--pop-yellow) 55%, var(--pop-yellow) 94%, transparent 94%); color: var(--pop-red-ink); }
.page-guest-choice .gc-sub { color: var(--kuro); }
.page-guest-choice .gc-meta { color: var(--sumi); font-weight: 500; }
.page-guest-choice .gc-hero .btn-primary {
  min-height: 3.25rem; padding-inline: 1.6rem; font-size: var(--step-1); font-weight: 600;
  background: var(--orange); border: var(--pop-line); color: #FFFFFF;
  box-shadow: 5px 5px 0 var(--kuro); transition: transform .15s, box-shadow .15s;
}
.page-guest-choice .gc-hero .btn-primary:hover { background: var(--orange-ink); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--kuro); }
.page-guest-choice .gc-hero .btn-primary:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--kuro); }
.gc-hero-art { position: relative; }
.page-guest-choice .gc-art { border: var(--pop-line); box-shadow: 5px 5px 0 var(--kuro); }
.gc-sticker {
  position: absolute; z-index: 1; top: -1rem; left: -0.6rem; width: 5rem; height: 5rem;
  display: grid; place-content: center; text-align: center; border-radius: 50%;
  background: var(--pop-red); border: var(--pop-line); color: #FFFFFF;
  font-size: 0.75rem; font-weight: 600; line-height: 1.05; box-shadow: 3px 3px 0 var(--kuro);
}
.gc-sticker b { display: block; font-family: var(--font-serif); font-size: 1.45rem; }
/* Form */
.page-guest-choice .gc-form { background: #FFF4E2; }
.page-guest-choice .gc-tab { border: var(--pop-line); background: var(--paper); color: var(--kuro); font-weight: 600; transition: transform .15s, box-shadow .15s; }
.page-guest-choice .gc-tab:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--kuro); }
.page-guest-choice .gc-tab[aria-selected="true"] { background: var(--kuro); color: #FFFFFF; box-shadow: none; }
.page-guest-choice .gc-form-card { border: var(--pop-line); box-shadow: 5px 5px 0 var(--orange-soft); }
.page-guest-choice .gc-choice { border: 1.5px solid var(--kuro); }
.page-guest-choice .gc-choice:has(input:checked) { background: var(--pop-yellow); box-shadow: 2px 2px 0 var(--kuro); }
.page-guest-choice .gc-fm .btn-submit { min-height: 3.25rem; font-weight: 600; background: var(--orange); border: var(--pop-line); color: #FFFFFF; box-shadow: 5px 5px 0 var(--kuro); }
.page-guest-choice .gc-fm .btn-submit:hover { background: var(--orange-ink); }
/* Instagram band */
.page-guest-choice .gc-insta { background: linear-gradient(135deg, var(--pop-peach) 0%, var(--pop-pink) 50%, var(--pop-yellow) 100%); }
.page-guest-choice .gc-insta h2, .page-guest-choice .gc-insta p { color: var(--kuro); }
.page-guest-choice .gc-hashtag { margin-bottom: var(--space-5); }
.page-guest-choice .gc-hashtag strong { display: inline-block; margin-top: var(--space-2); padding: 0.2rem 0.9rem; border: var(--pop-line); border-radius: var(--radius-pill); background: var(--paper); box-shadow: 3px 3px 0 var(--kuro); }
.page-guest-choice .gc-insta .btn-secondary { min-height: 3.25rem; border: var(--pop-line); color: var(--kuro); background: var(--paper); box-shadow: 5px 5px 0 var(--kuro); font-weight: 600; }
.page-guest-choice .btn:focus-visible, .page-guest-choice .gc-tab:focus-visible { outline: 3px solid var(--kuro); outline-offset: 4px; }
/* Thanks page: same hero as the survey, with share buttons */
.gc-thanks-kicker { margin-bottom: var(--space-3); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; color: var(--pop-red-ink); }
.page-guest-choice .gc-thanks-lead { font-size: var(--step-3); line-height: 1.25; color: var(--kuro); }
.page-guest-choice .gc-hero .btn-secondary { border: var(--pop-line); background: var(--paper); color: var(--kuro); font-weight: 600; box-shadow: 4px 4px 0 var(--kuro); }
.page-guest-choice .gc-hero .btn-secondary:hover { background: var(--tint-butter); }
.page-guest-choice .gc-thanks .btn-text { gap: var(--space-2); color: var(--kuro); }
@media (prefers-reduced-motion: reduce) { .page-guest-choice * { transition: none !important; } }

.privacy-updated { color: var(--muted); font-size: var(--step--1); }

/* ---- 7.8 404 ---- */
.page-404 .notfound { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-8) var(--gutter); }
.page-404 .notfound .wrap { max-width: 30rem; }
.page-404 .notfound-label { display: block; font-size: var(--step--1); color: var(--muted); margin-bottom: var(--space-3); }
.page-404 .notfound p { margin-block: var(--space-4) var(--space-5); color: var(--muted); }
.page-404 .footer-note { margin-top: var(--space-7); font-size: var(--step--1); color: var(--muted); }
.page-404 .footer-note a { color: var(--moss); }

/* ---- 7.10 Rooms (/rooms/, /cottage/, /cottage/<id>/, /hostel/) ----
   Generated by scripts/build-rooms.mjs from data/rooms.json. */
/* Neutral 4:3 stand-in until a room's photo is uploaded */
.photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; aspect-ratio: 4 / 3;
  background: var(--shiro-deep); color: var(--line);
}
.photo-placeholder .kanji { font-size: clamp(3rem, 2rem + 4vw, 5rem); color: var(--line); }
.cottage-photo, .mini-card-media { position: relative; }
.room-card-media img, .cottage-photo img, .mini-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.jump-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.jump-links a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--space-4);
  border-radius: var(--radius-pill); background: var(--green-pale); color: var(--moss);
  font-size: var(--step--1); text-decoration: none;
}
.jump-links a:nth-child(4n+2) { background: var(--tint-sky); }
.jump-links a:nth-child(4n+3) { background: var(--tint-butter); }
.jump-links a:nth-child(4n+4) { background: var(--tint-pink); }
.jump-links a:hover { text-decoration: underline; }

.rooms-grid { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .rooms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rooms-grid--hostel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rooms-grid .room-card { scroll-margin-top: calc(var(--header-h) + 1rem); }
/* /hostel/ cards: swipeable photo strip with dot buttons */
.card-slides { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.card-slides::-webkit-scrollbar { display: none; }
.card-slides > picture, .card-slides > img { flex: 0 0 100%; height: 100%; scroll-snap-align: start; display: block; }
.room-card-media .card-slides img { position: static; width: 100%; height: 100%; object-fit: cover; }
.card-dots { position: absolute; left: 50%; bottom: var(--space-2); transform: translateX(-50%); display: flex; gap: 2px; }
.card-dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.card-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.card-dot[aria-current="true"]::before { background: #fff; }
.card-dot:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; }

.building + .building { margin-top: var(--space-8); }
.building-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); max-width: 44rem; }
.building-name { display: flex; align-items: baseline; gap: var(--space-3); }
.building-name .kanji { font-size: var(--step-kanji); color: var(--moss); }
.building-name .room-name-en { font-size: var(--step-2); }
.building-meta { color: var(--muted); font-size: var(--step--1); }
.building-bikes { display: flex; align-items: center; gap: var(--space-2); color: var(--moss); font-weight: 500; }
.building-section { scroll-margin-top: var(--header-h); }

.rooms-note { display: grid; gap: var(--space-5); margin-top: var(--space-7); padding: var(--space-5); border-radius: var(--radius); background: var(--green-pale); }
.rooms-note-price { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--step--1); color: var(--sumi); }
.rooms-note-price .icon { margin-top: 2px; color: var(--moss); }
.rooms-note-long { display: grid; gap: var(--space-3); justify-items: start; }
@media (min-width: 960px) { .rooms-note { grid-template-columns: 1fr 1.2fr; align-items: start; } }

.reviews-list { display: grid; gap: var(--space-6); margin-top: var(--space-5); }
@media (min-width: 960px) { .reviews-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Cottage detail */
.cottage-breadcrumb { padding-top: var(--space-4); }
.cottage-hero-inner { display: grid; gap: var(--space-5); padding-top: var(--space-4); }
.cottage-photos { display: grid; gap: var(--space-2); }
.cottage-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-img); overflow: hidden; background: var(--shiro-deep); }
.cottage-photos--3 { grid-template-columns: 1fr 1fr; }
.cottage-photos--3 .cottage-photo--1 { grid-column: 1 / -1; }
.cottage-heading { display: grid; gap: var(--space-2); align-content: end; }
.cottage-title { display: flex; align-items: center; gap: var(--space-4); }
.cottage-name { font-size: var(--step-4); }
.cottage-meaning { color: var(--muted); }
.cottage-tagline { font-family: var(--font-serif); font-size: var(--step-2); color: var(--kuro); line-height: 1.3; }
@media (min-width: 960px) {
  .cottage-hero-inner { grid-template-columns: 1.6fr 1fr; align-items: end; }
  .cottage-photos--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .cottage-photos--3 .cottage-photo--1 { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
  .cottage-photos--3 .cottage-photo:not(.cottage-photo--1) { aspect-ratio: auto; }
  .cottage-photos--3 { aspect-ratio: 16 / 10; }
}
.cottage-body { display: grid; gap: var(--space-7); }
.cottage-description { font-size: var(--step-1); line-height: 1.6; max-width: var(--measure); }
@media (min-width: 960px) { .cottage-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.price-block { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
@media (min-width: 960px) { .price-block { position: sticky; top: calc(var(--header-h) + var(--space-4)); } }
.price-block-note, .price-block-long { font-size: var(--step--1); color: var(--muted); }
.price-block-long { margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--sumi); }
.pair-line { margin-top: var(--space-3); color: var(--muted); }

.mini-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 960px) { .mini-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mini-card { display: grid; gap: var(--space-2); color: var(--sumi); text-decoration: none; }
.mini-card-media { aspect-ratio: 4 / 3; border-radius: var(--radius-img); overflow: hidden; background: var(--shiro-deep); }
.mini-card-media .photo-placeholder .kanji { font-size: 2.5rem; }
.mini-card-name { display: flex; align-items: center; gap: var(--space-2); }
.mini-card:hover .room-name-en { text-decoration: underline; }
.mini-card-line { font-size: var(--step--1); color: var(--muted); }
@media (min-width: 960px) { .mini-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* /long-stay/ and /about/: one wide photo, text + photo pairs, a quiet facts line */
.page-photo img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; border-radius: var(--radius-img); }
.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }
.split-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-img); }
.feature-title { display: block; font-weight: 500; color: var(--kuro); }
.about-numbers { font-family: var(--font-serif); font-size: var(--step-1); color: var(--kuro); text-align: center; }
.cta-actions { justify-content: center; }
/* Cottage pages: "at a glance" facts next to the name (above the photos on phones) */
.glance { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.glance li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); color: var(--sumi); }
.glance .icon { width: 18px; height: 18px; color: var(--moss); }
.glance-for { margin-top: var(--space-3); font-size: var(--step--1); color: var(--muted); }
.glance-for b { font-weight: 500; color: var(--sumi); margin-right: 0.35em; }
@media (max-width: 959.98px) {
  .page-cottage-detail .cottage-heading { order: -1; }
}
.home-reviews { margin-bottom: var(--space-6); }

/* ---- 7.9 Style guide ---- */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-3); }
.sg-swatch { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper); font-size: var(--step--1); }
.sg-swatch-chip { height: 4.5rem; border-bottom: 1px solid var(--line); }
.sg-swatch-meta { padding: var(--space-2) var(--space-3); }
.sg-swatch-meta code { font-size: 0.75rem; color: var(--muted); }
.sg-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.sg-table th, .sg-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.sg-table th { font-weight: 500; color: var(--muted); }
.sg-sample { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--radius-sm); }
.sg-block + .sg-block { margin-top: var(--space-8); }
.sg-block > h2 { margin-bottom: var(--space-5); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.sg-sticky-demo { position: relative; border: 1px dashed var(--line); border-radius: var(--radius); height: 7rem; overflow: hidden; max-width: 24rem; background: var(--paper); }
.sg-sticky-demo .sticky-bar { position: absolute; display: flex; }
.sg-type > * + * { margin-top: var(--space-3); }
.sg-scroll { overflow-x: auto; }
.sg-dark-demo { padding: var(--space-5); border-radius: var(--radius); }
.sg-cards { align-items: start; }
.sg-illus { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; color: var(--sumi); }
.sg-map-placeholder { display: flex; height: 100%; align-items: center; justify-content: center; }
.page-styleguide code { font-size: 0.875em; }
.sg-h1 { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-4); line-height: 1.15; color: var(--kuro); text-wrap: balance; }

/* swatch fills (tokens only) */
.bg-shiro { background: var(--shiro); } .bg-sumi { background: var(--sumi); } .bg-kuro { background: var(--kuro); }
.bg-kin { background: var(--kin); } .bg-line { background: var(--line); }
.bg-muted { background: var(--muted); } .bg-paper { background: var(--paper); } .bg-shiro-deep { background: var(--shiro-deep); } .bg-moss { background: var(--moss); } .bg-green-pale { background: var(--green-pale); }
.bg-orange { background: var(--orange); } .bg-orange-ink { background: var(--orange-ink); } .bg-orange-soft { background: var(--orange-soft); } .bg-orange-pale { background: var(--orange-pale); }
.bg-tint-sky { background: var(--tint-sky); } .bg-tint-pink { background: var(--tint-pink); } .bg-tint-leaf { background: var(--tint-leaf); } .bg-tint-butter { background: var(--tint-butter); }
.fg-sumi { color: var(--sumi); } .fg-kuro { color: var(--kuro); } .fg-muted { color: var(--muted); }
.fg-paper { color: var(--paper); }
.fg-moss { color: var(--moss); } .fg-orange-ink { color: var(--orange-ink); } .fg-on-moss { color: var(--on-moss); } .fg-on-moss-muted { color: var(--on-moss-muted); } .fg-kin { color: var(--kin); }


.bg-moss-deep { background: var(--moss-deep); }
.bg-on-moss { background: var(--on-moss); }
.bg-on-moss-muted { background: var(--on-moss-muted); }
.border-orange { border-color: var(--orange); }
.fg-orange-soft { color: var(--orange-soft); } .bg-terracotta { background: var(--terracotta); }
.sg-sample--line { width: 3.5rem; height: 1.6rem; border: 2px solid; border-radius: var(--radius-pill); }
.sg-table .btn { white-space: nowrap; }
.sg-before-san, .sg-before-tane, .sg-before-sane, .sg-before-jin { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 50%; padding: 0; font-family: var(--font-kanji); font-weight: 700; color: var(--room-ink-light); }
.sg-before-san { background: var(--room-san-was); } .sg-before-tane { background: var(--room-tane-was); } .sg-before-sane { background: var(--room-sane-was); } .sg-before-jin { background: var(--room-jin-was); }
.sg-hero-label { display: flex; align-items: center; gap: var(--space-3); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-moss-muted); }
.sg-hero-label::before { content: ""; width: 28px; height: 1px; background: var(--kin); }
.sg-hero-headline { margin-top: var(--space-3); font-family: var(--font-serif); font-weight: 500; font-size: var(--step-4); line-height: 1.05; color: var(--on-moss); }
.sg-hero-headline span { display: block; }
.sg-hero-headline .sg-hero-soft { font-style: italic; color: var(--on-moss-muted); }
.sg-sentence-heading { font-weight: 500; font-size: var(--step-1); color: var(--kuro); }
.sg-kin-rule { border-top-color: var(--kin); }
.sg-code { overflow-x: auto; padding: var(--space-3) var(--space-4); background: var(--shiro-deep); border-radius: var(--radius-sm); font-size: var(--step--1); }
.sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-2); }
.sg-icons li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--step--1); }
.sg-icons .icon { grid-row: span 2; color: var(--moss); }
.sg-icons span { color: var(--muted); font-size: 0.75rem; line-height: 1.4; }


.bg-room-kin { background: var(--room-kin); } .bg-room-kon { background: var(--room-kon); } .bg-room-aka { background: var(--room-aka); } .bg-room-kuro { background: var(--room-kuro); }
.bg-room-shiro { background: var(--room-shiro); } .bg-room-koke { background: var(--room-koke); } .bg-room-akane { background: var(--room-akane); } .bg-room-jin { background: var(--room-jin); }
.bg-room-ai { background: var(--room-ai); } .bg-room-akari { background: var(--room-akari); } .bg-room-san { background: var(--room-san); } .bg-room-fune { background: var(--room-fune); }
.bg-room-tane { background: var(--room-tane); } .bg-room-sane { background: var(--room-sane); }
.fg-room-ink-light { color: var(--room-ink-light); } .fg-room-ink-dark { color: var(--room-ink-dark); }


/* 8. UTILITIES / MOTION ---------------------------------------------------- */
.mt-0 { margin-top: 0; } .mt-3 { margin-top: var(--space-3); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-4 { margin-top: var(--space-4); } .mt-7 { margin-top: var(--space-7); }
.center { text-align: center; }

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