/* ---------- Buchu — Hot springs spa & apothecary 76 (store) ----------
   THE MOVE: alternating grounds on a dead-centre spine. The page runs
   photograph → wet slate → oatmeal linen → photograph → wet slate, and the two
   slate bands (the refrain column, then the closing address) are painted
   full-bleed by their own ::before, so the GROUND escapes the 1080px column
   without the copy escaping with it. Exactly one block on the page breaks
   centre — the about split — and the nav is absolute and unlit over the cover,
   so a whole screen of hot water opens the page and the bar scrolls away for
   good. Eucalyptus carries every accent; the warm clay only ever appears on
   hover, which is why nothing here is clay until you touch it. */
body.t-buchu {
  background: #ece6da;
  color: #2b312e;
  --radius: 0;
  --header-bg: #ece6da;
  --surface: #f4efe5;
  --surface-2: #e2dbcc;
  --line: #d5cdbc;
  --line-strong: #bdb3a0;
  --heading: #1f2523;
  --text: #2b312e;
  --muted: #636b66;
}
body.t-buchu .sf-head, body.t-buchu .sf-foot, body.t-buchu .sf-footer { background: #ece6da; border-color: #d5cdbc; }

/* the cover carries the nav. No top offset, so an announcement bar still pushes
   it down; scoped by :has so product, cart and search pages — which have no
   hero to float over — keep their ordinary solid header. */
body.t-buchu:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
body.t-buchu:has(.sc-hero) .sf-name, body.t-buchu:has(.sc-hero) .sf-cart, body.t-buchu:has(.sc-hero) .theme-toggle { color: #f2ece0; }
/* the floating bar carries nothing: the category rail and the magnifier would
   both land underneath it, and the catalogue here is six tiles on one page anyway */
body.t-buchu:has(.sc-hero) .sf-cats, body.t-buchu:has(.sc-hero) .sf-searchbtn { display: none; }
/* nothing is sticky on the landing page, so an anchor offset only opens a dead gap */
body.t-buchu .sc-hero, body.t-buchu .sc-richtext, body.t-buchu .sc-about-split,
body.t-buchu .sc-masonry, body.t-buchu .sc-contact { scroll-margin-top: 0; }

body.t-buchu .sc-hero { min-height: 100vh; padding: 132px 20px 96px; }
body.t-buchu .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(34px, 5.6vw, 64px); line-height: 1.1; letter-spacing: -0.01em; }

/* THE TWO SLATE BANDS — the refrain column near the top, the address at the foot */
body.t-buchu .sc-richtext { position: relative; max-width: 700px; padding: 116px 20px 124px; }
body.t-buchu .sc-contact { position: relative; padding: 108px 20px 118px; }
body.t-buchu .sc-richtext::before, body.t-buchu .sc-contact::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); background: #2b322f; z-index: -1; }
/* THE REFRAIN: the heading alone on slate and the heading over the photograph
   two thirds down are set identically, because they are one sentence said twice */
body.t-buchu .sc-richtext .sc-h2, body.t-buchu .sc-contact .sc-h2, body.t-buchu .sc-banner h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(26px, 3.7vw, 42px); line-height: 1.24; letter-spacing: -0.01em; margin-bottom: 22px; }
body.t-buchu .sc-richtext .sc-h2, body.t-buchu .sc-contact .sc-h2 { color: #f2ece0; }
body.t-buchu .sc-richtext p, body.t-buchu .sc-contact .sc-contact-sub, body.t-buchu .sc-field label { color: #aeb3ac; }
body.t-buchu .sc-field input, body.t-buchu .sc-field textarea { background: #232a27; border-color: #3d4541; color: #f2ece0; }
body.t-buchu .sc-contact-form .btn { align-self: center; }

/* four gapped tiles, one word under each */
body.t-buchu .sc-strip { padding: 108px 20px 20px; }
body.t-buchu .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 28px; }
body.t-buchu .sc-strip-img { aspect-ratio: 3 / 4; border: 0; }
body.t-buchu .sc-strip-label, body.t-buchu .sc-mas-cat { margin-top: 14px; text-transform: uppercase; letter-spacing: 0.24em; font-size: 10.5px; font-weight: 600; color: #2f5d50; }

/* the ONE block allowed off centre anywhere on the page */
body.t-buchu .sc-about-split { grid-template-columns: 1fr 1fr; gap: 58px; padding: 112px 20px 104px; }

/* the catalogue arrives late and narrower than everything above it */
body.t-buchu .sc-masonry { padding: 92px 0 40px; }
body.t-buchu .sc-masonry .container { max-width: 900px; }

body.t-buchu .sc-banner { min-height: 52vh; display: flex; align-items: center; justify-content: center; margin: 64px calc(50% - 50vw) 0; padding: 96px 28px; }
body.t-buchu .btn.brand { background: #2f5d50; color: #f2ece0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 600; padding: 15px 30px; }
body.t-buchu .btn.brand:hover { background: #9c5a3c; }
@media (max-width: 760px) { body.t-buchu .sc-strip-row { grid-template-columns: repeat(2, 1fr); } }

/* NIGHT — the bathhouse after six. The oatmeal ground drops to wet stone, so the
   two slate bands have to move the other way and LIFT to stay legible as bands;
   the eucalyptus goes to the pale it reads as on a dark wall, and the clay with it. */
html[data-theme="dark"] body.t-buchu {
  background: #191d1b;
  color: #c3c8c3;
  --header-bg: #191d1b;
  --surface: #212624;
  --surface-2: #262c29;
  --line: #333937;
  --line-strong: #454c49;
  --heading: #eef0ea;
  --text: #c3c8c3;
  --muted: #878e8a;
}
html[data-theme="dark"] body.t-buchu .sf-head, html[data-theme="dark"] body.t-buchu .sf-foot,
html[data-theme="dark"] body.t-buchu .sf-footer { background: #191d1b; border-color: #333937; }
html[data-theme="dark"] body.t-buchu .sc-richtext::before, html[data-theme="dark"] body.t-buchu .sc-contact::before { background: #262d29; }
html[data-theme="dark"] body.t-buchu .sc-strip-label, html[data-theme="dark"] body.t-buchu .sc-mas-cat { color: #84bda9; }
html[data-theme="dark"] body.t-buchu .sc-field input, html[data-theme="dark"] body.t-buchu .sc-field textarea { background: #191d1b; border-color: #3a413e; }
html[data-theme="dark"] body.t-buchu .btn.brand { background: #84bda9; color: #121614; }
html[data-theme="dark"] body.t-buchu .btn.brand:hover { background: #c9926f; }