/* ============================================================
   HEAT LAB relaunch design system (branch redesign/relaunch)
   Loaded ONLY by rebuilt pages. Legacy pages keep css/style.css.
   Direction (decided 2 July 2026, _shared/art-direction.md):
   warm off white canvas, near black type, pure monochrome,
   square and sharp, Barlow everywhere, calm fade on scroll.
   All warmth and darkness lives in the photography.
   Styles the shell.js injected chrome (nav, menu, footer,
   consent banner) without touching shell.js itself.
   ============================================================ */

/* ── Self hosted Barlow (no Google Fonts hotlink) ───────────── */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-v13-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/barlow-v13-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-v13-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-v13-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-v13-latin-700.woff2") format("woff2");
}

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --paper: #f7f5f1;
  --bone: #eee9e0; /* a subtly deeper paper to set a section apart without a line */
  --ink: #161514;
  --ink-70: rgba(22, 21, 20, 0.7);
  --ink-55: rgba(22, 21, 20, 0.55);
  --line: rgba(22, 21, 20, 0.16);
  --line-strong: rgba(22, 21, 20, 0.45);
  --paper-70: rgba(247, 245, 241, 0.7);
  --paper-line: rgba(247, 245, 241, 0.22);
  --pad: clamp(1.2rem, 4vw, 3.5rem);
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
  --font-cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Headline scale: exactly four sizes site wide (Emil, 2 July: one red thread) */
  --display: clamp(2.5rem, 6.5vw, 5rem); /* hero only */
  --h1: clamp(2.2rem, 5vw, 3.4rem);      /* page titles */
  --h2: clamp(1.7rem, 3vw, 2.4rem);      /* section titles */
  --h3: 1.25rem;                          /* row and card titles */
}

/* ── Reset and base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.7;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }

/* Everything square and sharp. No pills, no shadows, no gradients. */
button, input, .btn { border-radius: 0; }

/* One headline voice site wide: Barlow Medium (500), tight tracking,
   sentence case, on the four token scale above. Medium reads editorial,
   not heavy (Emil, 2 July). The condensed cut appears ONLY on the DEEP
   and HIGH names and the small caps list labels, nowhere else. */
h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

/* The two condensed caps uses */
.exit__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.gusels__name, .rows--cols > div h3, .card h3 {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* Small caps section kicker (per Emil's screenshots, 2 July round 2) */
.kicker {
  display: block;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 1.4rem;
}

/* One rhythm for every section head: kicker 1.4rem above the headline, the
   headline 1.2rem above the content, exactly like the cold and saunagus
   sections. The 1.2rem here collapses with the headline's own 1.2rem margin
   (Emil, 3 July: every header consistent with the cold/saunagus reference). */
.sec-head { margin-bottom: 1.2rem; }
.sec-head .measure + .measure { margin-top: 1.1rem; }

/* Small caps arrow link */
.more-link {
  display: inline-block;
  margin-top: 1.6rem;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.35rem;
  transition: border-color 0.3s;
}
.more-link:hover { border-color: var(--ink); }
.more-link span { display: inline-block; transition: transform 0.3s var(--ease); }
.more-link:hover span { transform: translateX(4px); }
/* Two or more inline more-links: give them clear air so the underlines
   never crowd, and let them stack on narrow screens (added 4 July). */
.more-links { display: flex; flex-wrap: wrap; gap: 0.9rem 2.8rem; }

/* ── Buttons: solid ink primary, thin outlined secondary ────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 2.1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  text-align: center;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }

/* The shell nav buttons keep their spans; flatten them here. */
.btn .btn__bg { display: none; }
.btn .btn__txt { position: static; }

/* ── Retired old chrome on rebuilt pages ────────────────────── */
/* The temperature HUD belongs to the old design; switched off. */
.hud { display: none !important; }

/* ── Preheat loader, the landing page sequence (one loader, 10 July 2026) ── */
/* DOM comes from shell.js (kept intact). Shown only when the inline
   gate put .preheat on <html>; redesign.js fades the logo in, runs the
   18.0 to 85.0 counter and lifts, the closed landing timeline rebuilt
   without GSAP. A CSS failsafe lifts the loader after 6s if the script
   never runs; the script adds .preheat-live to take the lifecycle over.
   The closed page links this sheet for its tokens and consent banner,
   so every landing look rule stays scoped under html.preheat, which
   the closed page never sets: its own inline loader keeps rendering
   exactly as it does live today. */
.loader { display: none; }
html.preheat .loader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--paper);
  clip-path: inset(0 0 0% 0);
  /* the curtain: 0.9s power4.inOut, held 0.4s while the inner fades first */
  transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.4s;
  animation: loader-failsafe 0s 6s forwards;
}
html.preheat.preheat-done .loader { clip-path: inset(0 0 100% 0); }
/* Backing paper: painted from the very first frame (this sheet is render
   blocking), so the hero can never flash before the deferred shell.js injects
   the loader. It sits one layer under the loader and lifts in perfect sync
   with it, so the clip reveal still uncovers the real page (added 4 July). */
html.preheat::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1999;
  background: var(--paper);
  clip-path: inset(0 0 0% 0);
  transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.4s;
  animation: loader-failsafe 0s 6s forwards;
}
html.preheat.preheat-done::before { clip-path: inset(0 0 100% 0); }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
/* redesign.js owns the lifecycle once it runs (it carries a wall clock
   finish of its own), so the failsafe cannot blink the loader away in
   the middle of the longer sequence on a slow load */
html.preheat.preheat-live .loader,
html.preheat.preheat-live::before { animation: none; }
.loader__inner {
  text-align: center;
  width: min(380px, 76vw);
  transition: opacity 0.45s ease-in, transform 0.45s ease-in;
}
/* landing layout: logo over counter over bar. The 1.8rem margins from
   the base rules below add to the 1.1rem gap, the same 2.9rem air the
   landing page shows live. */
html.preheat .loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  transition: opacity 0.5s cubic-bezier(0.32, 0, 0.67, 0), transform 0.5s cubic-bezier(0.32, 0, 0.67, 0);
}
html.preheat.preheat-done .loader__inner { opacity: 0; transform: translateY(-30px); }
.loader__logo {
  width: clamp(100px, 12vw, 150px);
  height: auto;
  margin: 0 auto 1.8rem;
  /* The logo ships pre-inverted as heat-lab-logo-dark.webp, so there is NO
     runtime filter here. A CSS invert() on this image forced the browser to
     re-rasterise the filtered layer during the clip-path lift, which flashed
     the logo. A plain dark bitmap composites cleanly and never flickers
     (fixed 4 July). The counter is the moving part. */
}
html.preheat .loader__logo {
  width: auto;
  height: clamp(34px, 7vw, 52px); /* the landing size */
  opacity: 0; /* redesign.js fades it in over 0.7s once the bitmap has decoded */
  transition: opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}
.loader__temp {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
html.preheat .loader__temp {
  font-size: 1.25rem; /* stepped up twice from 0.82rem per Emil, 10 July 2026 */
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink); /* was ink-55; Emil wants the numbers black, 10 July 2026 */
}
.loader__bar {
  height: 1px;
  background: var(--line);
  margin: 1.8rem 0 0;
  overflow: hidden;
}
html.preheat .loader__bar { width: min(220px, 60vw); } /* the landing hairline */
.loader__bar span { display: block; height: 100%; width: 0%; background: var(--ink); }

/* ── Nav (shell.js injected), symmetrical three zone grid ───── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem var(--pad);
  background: transparent;
  border-bottom: 1px solid transparent;
  /* Only the colour settles on scroll, never the height, so the bar never
     changes size (Emil, 2 July). */
  transition: background 0.4s, border-color 0.4s;
}
.nav__logo { justify-self: start; }
.nav__logo img { height: 16px; width: auto; transition: filter 0.4s; }
.nav__cta { justify-self: end; }
.nav__burger { justify-self: end; }
.nav__links { display: flex; gap: 1.9rem; justify-self: center; }
.nav__links a {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.85;
  transition: opacity 0.3s, color 0.4s;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { opacity: 1; }
.nav__cta { display: flex; align-items: center; gap: 0.6rem; }
.nav .btn { padding: 0.7rem 1.5rem; font-size: 0.7rem; }
/* over the hero photo: paper button so it reads on the dark image */
.nav .btn--book { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.nav .btn--book:hover { background: transparent; color: var(--paper); }
.nav .btn--profile { background: transparent; color: var(--paper); border-color: var(--paper-line); }
.nav .btn--profile:hover { border-color: var(--paper); }

.nav.is-solid, .nav.is-menu-open {
  background: var(--paper);
  border-bottom-color: var(--line);
}
.nav.is-solid .nav__logo img, .nav.is-menu-open .nav__logo img { filter: invert(1); }
.nav.is-solid .nav__links a, .nav.is-menu-open .nav__links a { color: var(--ink); }
.nav.is-solid .btn--book, .nav.is-menu-open .btn--book { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav.is-solid .btn--book:hover, .nav.is-menu-open .btn--book:hover { background: transparent; color: var(--ink); }
.nav.is-solid .btn--profile, .nav.is-menu-open .btn--profile { color: var(--ink); border-color: var(--line-strong); }
.nav.is-solid .btn--profile:hover, .nav.is-menu-open .btn--profile:hover { border-color: var(--ink); }

.nav__burger {
  display: none;
  background: none;
  border: 1px solid var(--paper-line);
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.nav__burger span { width: 15px; height: 1px; background: var(--paper); transition: transform 0.3s, background 0.4s; }
.nav.is-solid .nav__burger, .nav.is-menu-open .nav__burger { border-color: var(--line-strong); }
.nav.is-solid .nav__burger span, .nav.is-menu-open .nav__burger span { background: var(--ink); }
.nav__burger.is-open span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__burger.is-open span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ── Mobile menu (shell.js injected) ────────────────────────── */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.menu.is-open { opacity: 1; visibility: visible; }
/* The desktop nav set, worn like the site's headlines: Barlow Medium, sentence
   case, hairline rows, a quiet staggered rise on open (Emil, 3 July). */
.menu__kicker { margin-bottom: 1.6rem; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  font-weight: 500;
  font-size: clamp(2rem, 8vw, 2.6rem);
  line-height: 1.25;
  color: var(--ink);
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.menu__links a:last-child { border-bottom: 1px solid var(--line); }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: 0.05s; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: 0.1s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: 0.15s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: 0.2s; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: 0.25s; }
.menu.is-open .menu__links a:nth-child(6) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .menu__links a { opacity: 1; transform: none; transition: none; }
}
/* The venue is not final: no address published on rebuilt pages.
   The line stays in shell.js (kept intact); hidden here. */
.menu__foot { display: none; }

/* ── Language switcher (shell.js injected on both trees, EN | NL).
   Worn like the nav links: small caps mono, quiet until hovered.
   The current language is a span, the twin is a link. ────────── */
.nav__lang {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: 0.5rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper);
  transition: color 0.4s;
}
.nav__lang a { color: inherit; opacity: 0.55; transition: opacity 0.3s; }
.nav__lang a:hover { opacity: 1; }
.nav__lang span[aria-current="true"] { opacity: 1; }
.nav__lang .lang-sep { opacity: 0.35; }
.nav.is-solid .nav__lang, .nav.is-menu-open .nav__lang { color: var(--ink); }
.menu__lang {
  display: flex;
  gap: 0.45rem;
  margin-top: 1.8rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.menu__lang a { color: inherit; opacity: 0.55; transition: opacity 0.3s; }
.menu__lang a:hover { opacity: 1; }
.menu__lang span[aria-current="true"] { opacity: 1; }
.menu__lang .lang-sep { opacity: 0.35; }

/* ── Sections: one calm editorial canvas, hairline rules ────── */
main { display: block; }
section { position: relative; padding: clamp(3rem, 6vw, 5.5rem) var(--pad); }
/* No hairline dividers between sections; whitespace carries the rhythm (Emil, 2 July). */
.sec-head { max-width: 1600px; margin-inline: auto; }
.sec-title { margin: 0 0 1.2rem; }
.measure { max-width: 56ch; }
.muted { color: var(--ink-70); }

/* ── Calm fade on scroll ────────────────────────────────────── */
/* Hidden ONLY when the inline head script has put .js on <html> (4 July 2026,
   SEO pass): with JavaScript off or blocked the copy simply shows, instead of
   sitting at opacity 0 forever waiting for redesign.js. */
html.js .fade { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .fade { opacity: 1; transform: none; transition: none; }
}

/* ── Photography frames ─────────────────────────────────────── */
figure { position: relative; overflow: hidden; background: #1d1b19; }
figure img { width: 100%; height: 100%; object-fit: cover; }
figcaption { position: absolute; left: 0.9rem; bottom: 0.75rem; font-size: 0.74rem; letter-spacing: 0.03em; color: var(--paper-70); }

/* ── 1. Hero ────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--paper);
}
.hero__media { position: absolute; inset: 0; overflow: hidden; background: #14120f; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  /* single flat scrim so the type reads; no gradient ramps anywhere else */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.34);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: 0 var(--pad) clamp(2.2rem, 5vw, 3.6rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
}
.hero__note { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; color: var(--paper-70); }
.hero__panel { text-align: right; max-width: 34rem; }
.hero__title {
  font-size: var(--display);
  margin-bottom: 1rem;
}
.hero__sub { color: var(--paper-70); max-width: 36ch; margin-left: auto; margin-bottom: 1.6rem; }
.hero .btn--hero { background: var(--paper); color: var(--ink); border-color: var(--paper); font-size: 0.7rem; padding: 0.8rem 1.7rem; }
.hero .btn--hero:hover { background: transparent; color: var(--paper); }

/* ── 2. Who we are (two column editorial intro) ─────────────── */
/* The who we are band sits on a subtly deeper paper so it reads as its own
   section, and lines up on the same 1500px grid as what is saunagus etc. */
.intro { background: var(--bone); }
.intro__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  max-width: 1500px;
  margin-inline: auto;
}
/* .intro__title inherits the h2 token */
.intro__body p { color: var(--ink-70); }
.intro__body p + p { margin-top: 1.1rem; }
.intro__meta { margin-top: 2rem; }
.intro__meta li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.intro__meta li:last-child { border-bottom: 1px solid var(--line); }
.intro__meta-k { color: var(--ink-55); }

/* ── Feature sections: what is saunagus, the cold, social sauna ──
   One identical design. A two column grid, the photo the same size in
   all three, the text centered beside it, and the photo swapping sides
   down the page. No dividing lines (Emil, 2 July). */
.gus__grid, .cold__grid, .social__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  max-width: 1500px;
  margin-inline: auto;
}
.gus__fig, .cold__fig, .social__fig { aspect-ratio: 4 / 5; }
.gus__text p, .cold__text p, .social__text p { color: var(--ink-70); }
.gus__text p + p, .cold__text p + p, .social__text p + p { margin-top: 0.8rem; }
.gus__title { margin-bottom: 1.2rem; }
.gus__lede { font-size: 1rem; }

/* The four elements as a modern set, two by two */
.gusels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.3rem, 2.6vw, 2.2rem) clamp(2rem, 4vw, 3.5rem);
  margin-top: 1.7rem;
}
.gusels__name {
  display: block;
  margin-bottom: 0.4rem;
}
.gusels__desc { color: var(--ink-70); font-size: 0.95rem; }

/* ── 9b. Guest reviews ──────────────────────────────────────── */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  max-width: 1600px;
  margin-inline: auto;
}
.review { background: transparent; border: 1px solid var(--line); padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.review blockquote { font-size: 0.96rem; line-height: 1.65; color: var(--ink-70); flex: 1; }
.review figcaption { position: static; display: flex; align-items: center; justify-content: space-between; color: var(--ink); }
.review__stars { font-size: 0.8rem; letter-spacing: 0.15em; }
.review__name { font-weight: 500; font-size: 0.86rem; }
.reviews__more { text-align: center; margin-top: 1.8rem; }
.reviews__more a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color 0.3s; }
.reviews__more a:hover { border-color: var(--ink); }

/* Desktop: the photo side alternates down the page (saunagus right, the
   cold left, social right) and every photo is the same comfortable size. */
@media (min-width: 1021px) {
  /* both items pinned to row 1 so DOM order never spills into a second row */
  .gus__text, .cold__text, .social__text,
  .gus__fig, .cold__fig, .social__fig { grid-row: 1; }
  .gus__text, .social__text { grid-column: 1; }
  .gus__fig, .social__fig { grid-column: 2; }
  .cold__fig { grid-column: 1; }
  .cold__text { grid-column: 2; }
  .gus__fig, .cold__fig, .social__fig { aspect-ratio: auto; height: min(90vh, 53rem); }
  .gus__text, .cold__text, .social__text { align-self: center; }
}

/* ── 6. The session, round by round: calm scroll timeline ───── */
/* The left column stays put while the rounds pass; a hairline fill
   tracks progress and the row nearest the middle of the screen is
   the one in ink. Quiet, no parallax, no pinning tricks. */
.rounds__layout {
  display: grid;
  /* the sticky title on the left, the scrolling rows on the right, the whole
     block centered with symmetric margins (Emil, 2 July) */
  grid-template-columns: minmax(11rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1150px;
  margin-inline: auto;
}
.rounds__head { position: sticky; top: 5.5rem; align-self: start; display: flex; flex-direction: column; gap: 1.4rem; }
/* the flex gap already spaces the kicker; drop its own margin so the kicker to
   title gap matches the other section heads like The cold (Emil, 3 July) */
.rounds__head .kicker { margin-bottom: 0; }
.rounds__track { width: 1px; flex: 1; min-height: 9rem; background: var(--line); position: relative; }
.rounds__fill { position: absolute; top: 0; left: 0; width: 1px; height: 0%; background: var(--ink); transition: height 0.2s linear; }
.rounds__row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: center;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  transition: opacity 0.45s var(--ease);
  opacity: 0.3;
}
.rounds__row.is-active { opacity: 1; }
.rounds__row:last-child { border-bottom: 1px solid var(--line); }
.rounds__row h3 { margin-bottom: 0.2rem; }
.rounds__tag { font-weight: 500; color: var(--ink); margin-bottom: 0.55rem; }
.rounds__lede { color: var(--ink-70); font-size: 0.95rem; }
.rounds__row p { max-width: 56ch; color: var(--ink-70); }
.rounds__row p + p { margin-top: 0.45rem; }
.rounds__state { font-weight: 600; color: var(--ink); }
.rounds__fig { aspect-ratio: 3 / 4; }
/* Saunagus page: the fuller session scroll (larger rows and photos) */
@media (min-width: 1021px) {
  .rounds--full .rounds__layout { max-width: 1310px; }
  .rounds--full .rounds__row { grid-template-columns: 1fr 340px; padding: 2rem 0; }
}
/* On a subpage the rounds list stands alone (no sticky title column); keep its
   rows the same comfortable width and centered as on the landing page. */
.rounds > .rounds__list { max-width: 820px; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
  .rounds__row { opacity: 1; }
  .rounds__fill { transition: none; }
}

/* ── 7 and 8. DEEP and HIGH, compact ────────────────────────── */
.exits { max-width: 1210px; margin-inline: auto; padding-inline: var(--pad); }
.exits__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.exit { display: flex; flex-direction: column; }
.exit__fig { aspect-ratio: 4 / 5; margin-bottom: 1.1rem; }
.exit__tag, .exit__core { font-weight: 600; margin: 0.35rem 0 0.7rem; }
.exit p { color: var(--ink-70); font-size: 0.96rem; }
.exit p + p { margin-top: 0.55rem; }
/* both Book session buttons sit on the same line regardless of text length */
.exit__btn { margin-top: auto; align-self: flex-start; }
/* Headline above the photo (facilities sauna + plunge) */
.exits--stack .exit__name { margin-bottom: 1rem; }
.exit p:last-of-type { margin-bottom: 1.1rem; }

/* ── 9. The space: text head + horizontal photo carousel ────── */
/* text block sits fully above the pictures, always */
.space .sec-head { display: block; width: 100%; }
/* Facilities intro: two columns so the short paragraphs sit on fewer lines
   and fill the width instead of a narrow stack (added 4 July). */
.space__intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); max-width: 1100px; margin-top: 0.3rem; }
.space__intro p { color: var(--ink-70); max-width: 46ch; }
.space__intro p + p { margin-top: 0.9rem; }
.space__carousel {
  display: block;
  width: 100%;
  /* same 1.2rem the headline gives every other section its content (Emil, 3 July) */
  margin-top: 1.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  /* full bleed to the right edge */
  margin-right: calc(-1 * var(--pad));
}
.space__carousel::-webkit-scrollbar { display: none; }
.space__carousel.is-dragging { cursor: grabbing; }
.space__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 2rem);
  width: max-content;
  padding-right: var(--pad);
}
.space__item { flex: 0 0 auto; height: clamp(396px, 59vw, 704px); }
.space__item:nth-child(even) { margin-top: clamp(2rem, 4vw, 3.5rem); height: clamp(352px, 51vw, 616px); }
.space__item img { width: auto; height: 100%; }

/* ── 9a. Pricing (direct Yogo buy links) ────────────────────── */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1600px;
  margin-inline: auto;
}
.price {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  padding: 1.5rem 1.5rem 1.6rem;
  min-height: 15rem;
  transition: border-color 0.3s;
}
.price:hover { border-color: var(--ink); }
.price__n { font-family: var(--font-body); font-weight: 500; font-size: 2.6rem; line-height: 1; letter-spacing: -0.015em; }
.price__lbl { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-55); margin-top: 0.4rem; }
.price__amt { margin-top: auto; font-weight: 600; font-size: 1.15rem; }
.price__note { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-55); margin-top: 0.35rem; }
.pricing > p { margin-top: 1.4rem; max-width: 1600px; margin-inline: auto; }
/* How the pricing works: quiet rows under the cards */
.pricing__how { max-width: 1600px; margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; }
.pricing__how .kicker { margin-bottom: 1.1rem; }

/* ── 10. Booking ────────────────────────────────────────────── */
.booking__head { max-width: 1600px; margin-inline: auto; margin-bottom: 1.2rem; }
.booking__head .measure + .measure { margin-top: 1.1rem; }

/* Yogo calendar block (wiring identical to the old page) */
.yogo-cal { max-width: 1600px; margin-inline: auto; }
.yogo-calendar { display: none; }
html.yogo-live .yogo-calendar { display: block; }
html.yogo-live .yogo-cal__fallback { display: none; }
.yogo-cal__fallback { padding: 3rem 0 1rem; }
.yogo-cal__fallback .mono { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; color: var(--ink-55); margin-bottom: 1.2rem; }
.yogo-cal__fallback p { color: var(--ink-70); max-width: 44ch; line-height: 1.8; }
.yogo-cal__alt { margin-top: 1.8rem; }
.yogo-cal__alt a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color 0.3s; }
.yogo-cal__alt a:hover { border-color: var(--ink); }

/* Yogo widget theme, ported from style.css and made pure monochrome
   (the ember hover is gone). The widget injects its own CSS at
   runtime, so overrides stay scoped and use !important to win. */
.yogo-cal, .yogo-cal * { font-family: var(--font-body) !important; border-radius: 0 !important; }
.yogo-cal .theme--frame-box { border: 0 !important; background: transparent !important; }
.yogo-cal .yogo--wrapper,
.yogo-cal .theme--frame-box,
.yogo-cal .theme__widget--padding {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Yogo ships a 30px top padding on its frame box; drop it so the schedule
   sits close under the "What to bring" text, not floating below it (4 July). */
.yogo-cal .theme--frame-box { padding-top: 0 !important; }
.yogo-cal .cal-top {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.yogo-cal .cal-top .bold { font-weight: 600 !important; }
.yogo-cal .events-group.current-day .cal-top { background: var(--ink) !important; }
.yogo-cal .events-group.current-day .cal-top,
.yogo-cal .events-group.current-day .cal-top * { color: var(--paper) !important; }
.yogo-cal .class-item { background: transparent !important; border: 0 !important; color: var(--ink) !important; }
.yogo-cal .class-item > a {
  display: block;
  padding: 0.75rem 0.7rem 1rem !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.yogo-cal .class-item .event-name { letter-spacing: 0.02em !important; }
.yogo-cal .class-item .small { color: var(--ink-55) !important; }
.yogo-cal .events-group.before-today .class-item { opacity: 0.45; }
.yogo-cal .yogo-btn-secondary,
.yogo-cal .yogo-btn-primary {
  display: block !important;
  width: 100%;
  margin-top: 0.6rem;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  color: var(--paper) !important;
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  padding: 0.7rem 0.5rem !important;
  text-align: center;
  transition: background 0.3s, color 0.3s !important;
}
.yogo-cal .class-item:hover .yogo-btn-secondary,
.yogo-cal .yogo-btn-secondary:hover,
.yogo-cal .yogo-btn-primary:hover {
  background: transparent !important; color: var(--ink) !important; border-color: var(--ink) !important;
}
.yogo-cal .btn {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  text-decoration: none !important;
  text-transform: uppercase;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  padding: 0.7rem 1.4rem !important;
}
.yogo-cal .btn:hover { background: transparent !important; color: var(--ink) !important; }
.yogo-cal .vdp-datepicker input {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  padding: 0.7rem 1rem !important;
  min-width: 190px;
  cursor: pointer;
}
.yogo-cal .vdp-datepicker__calendar { border: 1px solid var(--line-strong) !important; }
.yogo-cal .vdp-datepicker__calendar .cell.day.selected,
.yogo-cal .vdp-datepicker__calendar .cell.day:not(.blank):not(.disabled):hover {
  background: var(--ink) !important; color: var(--paper) !important;
}
.yogo-cal .day-header { color: var(--ink-55) !important; }
.yogo-cal .md-field::before { background-color: var(--line) !important; }
.yogo-cal .md-field::after { background-color: var(--ink) !important; }
.yogo-cal .md-icon { color: var(--ink) !important; }

/* Yogo session detail modal mounts at <body>, outside .yogo-cal */
.md-dialog, .md-dialog * { font-family: var(--font-body) !important; border-radius: 0 !important; }
.md-dialog .close-signup-modal,
.md-dialog .close-signup-modal svg { color: var(--ink) !important; fill: currentColor !important; }
.md-dialog .yogo-line { background-color: var(--line) !important; }
.md-dialog .yogo-btn,
.md-dialog .yogo-btn-primary {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 0.66rem !important;
  font-weight: 500 !important;
  padding: 0.8rem 1.5rem !important;
  transition: background 0.3s, color 0.3s !important;
}
.md-dialog .yogo-btn:hover,
.md-dialog .yogo-btn-primary:hover { background: transparent !important; color: var(--ink) !important; }

/* ── 11. Location: address, one line, monochrome map ────────── */
.where__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  max-width: 1600px;
  margin-inline: auto;
}
/* the address sits on the left of its column */
.where__info, .where__text { justify-self: start; max-width: 26rem; }
/* Home: the address block reads from the RIGHT, sitting hard against the map's
   left edge (right aligned text, block pushed to the column end, tight gap) so
   the words run out to the left of the map and almost touch it. Vertically
   centred by the grid. Scoped to home so the dedicated /location/, /contact/
   and /facilities/ map blocks stay as they are until reviewed (Emil, 4 July). */
.home .where__grid { gap: 1.25rem; }
.home .where__info { justify-self: end; text-align: right; }
.where__addr { font-weight: 500; font-size: var(--h3); line-height: 1.35; margin-bottom: 0.7rem; }
.where__info .muted { margin-bottom: 1.4rem; }
.where__map { position: relative; border: 1px solid var(--line-strong); background: #1d1b19; }
.where__map iframe {
  display: block;
  width: 100%;
  /* Larger map, balanced beside the address which the grid centers (Emil, 2 July). */
  height: clamp(360px, 58vh, 580px);
  border: 0;
  filter: grayscale(1) contrast(1.04);
}

/* ── Footer ─────────────────────────────────────────────────── */
/* The shell.js footer stays in the DOM (kept intact) but rebuilt
   pages show their own symmetrical static footer instead. */
.footer { display: none !important; }

.foot {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(3rem, 6vw, 5rem) var(--pad) 1.6rem;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 2rem;
  max-width: 1600px;
  margin-inline: auto;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.foot__col h5, .foot__col .foot__h {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin-bottom: 1.1rem;
}
.foot__col a {
  display: block;
  color: var(--paper);
  opacity: 0.85;
  line-height: 2;
  transition: opacity 0.3s;
}
.foot__col a:hover { opacity: 1; }
.foot__col--story p { color: var(--paper-70); font-size: 0.94rem; line-height: 1.8; }
.foot__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
  max-width: 1600px;
  margin-inline: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--paper-line);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.foot__logo { height: 14px; width: auto; }
.foot__legal { display: flex; align-items: center; gap: 1.6rem; }
.foot__legal a { opacity: 0.75; transition: opacity 0.3s; }
.foot__legal a:hover { opacity: 1; }
.foot__legal button {
  background: none;
  border: 0;
  color: var(--paper);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 0;
  opacity: 0.75;
  transition: opacity 0.3s;
}
.foot__legal button:hover { opacity: 1; }
.foot__rights { opacity: 0.6; }
/* Desktop: three columns with the legal links truly centered, logo left,
   copyright right (Emil, 3 July). Flex space-between left the legal off-centre. */
@media (min-width: 1021px) {
  .foot__base { display: grid; grid-template-columns: 1fr auto 1fr; }
  .foot__logo { justify-self: start; }
  .foot__legal { justify-self: center; }
  .foot__rights { justify-self: end; }
}

/* ── Subpages: page head, prose, lists, FAQ, explore ────────── */
.page-head {
  max-width: 1600px;
  margin-inline: auto;
  padding-top: clamp(7rem, 12vh, 9.5rem); /* clears the fixed nav */
  padding-bottom: 1.2rem; /* headline sits 1.2rem above content, like every section head */
}
/* subpage titles use the same headline size as every section headline on the
   landing page (the h2 token), so a title like "The space" is identical here */
.page-head h1 { font-size: var(--h2); max-width: 22ch; }
/* When a subpage's first block is a landing section (its headline promoted to
   an h1 for one-h1-per-page), keep that headline at the landing h2 size and
   give the section room to clear the fixed nav. Scoped off the landing page. */
main h1.gus__title, main h1.sec-title, main h1.intro__title { font-size: var(--h2); }
body:not(.home) main > section:first-child:not(.page-head) { padding-top: clamp(6.5rem, 11vh, 8.5rem); }
.page-head .page-lede { margin-top: 1.2rem; max-width: 58ch; color: var(--ink-70); font-size: 1.05rem; }
/* content follows the page title on the same 1.2rem the page-head already gives;
   the section adds nothing on top so subpage titles match the section rhythm.
   Cap and centre it at the same 1600px column as the page head so the content
   (a plain FAQ section, or a classed grid) lines up under the heading at any
   width (Emil, 3 July). Classed content sections already carry this, so it is a
   no-op there and only rescues the plain sections like the FAQ. */
.page-head + section { padding-top: 0; max-width: 1600px; margin-inline: auto; }

.prose { max-width: 1600px; margin-inline: auto; }
.prose p { max-width: 62ch; color: var(--ink-70); }
.prose p + p { margin-top: 1.1rem; }
.prose h2 { margin: 2.4rem 0 1rem; max-width: 26ch; }
.prose h2:first-child { margin-top: 0; }

/* Two column page section, identical to the landing feature sections: a
   50/50 grid, the same large photo, text centered beside it, photo swapping
   sides (.duo text left/photo right, .duo--rev photo left/text right). */
.duo, .duo--rev {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  max-width: 1600px;
  margin-inline: auto;
}
.duo__fig { aspect-ratio: 4 / 5; }
.duo__text p { color: var(--ink-70); }
.duo__text p + p { margin-top: 1.1rem; }
/* CTA buttons inside a duo need air from the paragraph above them (4 July). */
.duo__text .btn { margin-top: 1.9rem; }
@media (min-width: 1021px) {
  .duo__fig { aspect-ratio: auto; height: min(90vh, 53rem); }
  .duo__text { align-self: center; }
}

/* Gift card: a distinct dark band directly under the prices, inverted palette
   and a wider landscape photo, so it leads and stands apart from the light
   photo sections without leaving the monochrome system (added 4 July). */
.giftcard { background: var(--ink); color: var(--paper); }
.giftcard__grid { max-width: 1600px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.giftcard .kicker { color: var(--paper-70); }
.giftcard p { color: var(--paper-70); max-width: 40ch; margin: 0.6rem 0 1.8rem; }
.giftcard .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.giftcard .btn:hover { background: transparent; color: var(--paper); }
.giftcard__fig { aspect-ratio: 5 / 4; overflow: hidden; }
.giftcard__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .giftcard__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .giftcard__fig { order: -1; aspect-ratio: 4 / 3; }
}

/* Quiet bordered list rows (facilities, what to bring) */
.rows { max-width: 1600px; margin-inline: auto; }
/* Centered checklist band (facilities), same width as the sauna + plunge pair */
.checklist .rows { max-width: 1210px; }
.rows li { padding: 0.85rem 0; border-top: 1px solid var(--line); color: var(--ink-70); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows--cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.5rem, 3vw, 3rem); align-items: start; }
.rows--cols > div h3 { margin-bottom: 0.6rem; }
.rows--cols > div p { color: var(--ink-70); line-height: 1.75; max-width: 42ch; }
/* Book "good to know": align the heading to the 1210px column block (the
   .rows are capped at 1210, the global .sec-head is 1600) so the title shares
   the left edge of the first column instead of hanging out to the left, and
   give the columns a touch more air above (added 4 July). */
#good-to-know .sec-head { max-width: 1210px; margin-bottom: 1.8rem; }
.rows--cols ul { display: block; }

/* FAQ accordion, square and quiet */
/* Full content width, so the accordion lines up with the page heading above it
   instead of sitting as a narrow centred block (Emil, 3 July). */
.faq { max-width: 1600px; margin-inline: auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.1rem 0;
  font-weight: 600;
  font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--ink-55); }
.faq details[open] summary::after { content: "−"; }
.faq .faq__a { padding: 0 0 1.3rem; max-width: 62ch; color: var(--ink-70); }
.faq__list { margin: 0; padding: 0.1rem 0 0.6rem 1.2rem; max-width: 62ch; }
.faq__list li { color: var(--ink-70); line-height: 1.75; margin: 0.35rem 0; }

/* Keep exploring: small caps links row at page end */
.explore { max-width: 1600px; margin-inline: auto; padding-top: 0; }
.explore .kicker { margin-bottom: 0.4rem; }
.explore__links { display: flex; flex-wrap: wrap; gap: 0.4rem 2.2rem; }

/* Contact cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); max-width: 1600px; margin-inline: auto; }
.cards--pair { grid-template-columns: repeat(2, 1fr); max-width: 62rem; margin-inline: 0; }
.card { border: 1px solid var(--line); padding: 1.4rem 1.5rem 1.5rem; }
.card h3 { margin-bottom: 0.5rem; }
.card p, .card a { color: var(--ink-70); }
.card a:hover { color: var(--ink); }

/* Founders overview (about) */
.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 62rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.founder { padding: clamp(1.8rem, 3.2vw, 2.8rem) clamp(1.4rem, 2.6vw, 2.4rem); }
.founder + .founder { border-left: 1px solid var(--line); }
.founder__role {
  display: block;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 0.9rem;
}
.founder__name {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 1.1rem;
}

/* Price card description line (prices page) */
.price__desc { margin-top: 0.8rem; font-size: 0.92rem; color: var(--ink-70); }

/* Journal cards */
.jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); max-width: 1600px; margin-inline: auto; }
.journal-stub { padding-top: 0; }
.journal-stub p { max-width: 58ch; color: var(--ink-70); }
.jcard { display: flex; flex-direction: column; }
.jcard figure { aspect-ratio: 4 / 3; margin-bottom: 1rem; }
.jcard__date { display: block; margin-bottom: 0.4rem; }
.jcard__title { font-size: var(--h3); line-height: 1.25; margin-bottom: 0.45rem; }
.jcard p { color: var(--ink-70); font-size: 0.95rem; }
.jcard__more { margin-top: 0.9rem; align-self: flex-start; }

/* Facilitators page: a narrower intro lede, clear air down to the cards, and
   cards sized for four across (flex + centre) so two read balanced now and
   the row fills as the team grows (Emil, 4 July). */
#facilitators .sec-head .measure { max-width: 42ch; }
#facilitators .sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
#facilitators .jgrid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: clamp(1.5rem, 2.5vw, 2.4rem); }
#facilitators .jcard { flex: 0 1 340px; max-width: 340px; }

/* Journal post article */
.post { max-width: 800px; margin-inline: auto; }
.post__meta { display: block; margin-bottom: 1.6rem; }
.post__body p { color: var(--ink-70); }
.post__body p + p { margin-top: 1.1rem; }
.post__body h2 { font-size: calc(var(--h3) + 0.15rem); margin: 2.2rem 0 0.9rem; }
.post__body a { text-decoration: underline; text-underline-offset: 3px; }
.post__body figure { margin: 2rem 0; }
.post__body figcaption { margin-top: 0.6rem; }
.post__cta { margin-top: 2.4rem; }

/* ── Consent banner (shell.js injected; wiring untouched) ───── */
.cc {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  transform: translate(-50%, 130%);
  z-index: 1000;
  width: min(640px, calc(100% - 1.5rem));
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--paper-line);
  padding: 0.9rem 1rem;
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0.5s;
}
.cc.is-visible { transform: translate(-50%, 0); visibility: visible; }
.cc__main { display: flex; flex-direction: column; gap: 0.7rem; }
.cc__text { font-size: 0.6rem; line-height: 1.45; color: var(--paper-70); }
.cc__text a { color: var(--paper); border-bottom: 1px solid var(--paper-line); }
.cc__choice { display: flex; flex-direction: column; gap: 0.55rem; }
.cc__actions { display: flex; gap: 0.6rem; }
/* One style for every banner button: Accept all and Reject must stay the
   same size and the same visual weight (gap 20; Reject never smaller or
   dimmer). Save in the manage panel reuses it. */
.cc__btn {
  flex: 1;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.72rem 0.9rem;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.cc__btn:hover { background: transparent; color: var(--paper); }
/* Manage options inverted (Emil, 23 July, carrying his 3 July Reject rule over
   to the button that replaced it): same size and full brightness border, only
   the fill flips. Styled by id so the keep intact banner markup in shell.js /
   closed/consent.js stays untouched. */
#ccManage { background: transparent; color: var(--paper); }
#ccManage:hover { background: var(--paper); color: var(--ink); }
.cc__manage {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--paper-70);
  font-size: 0.54rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-bottom: 1px solid var(--paper-line);
  padding: 0 0 1px;
}
.cc__manage:hover { color: var(--paper); }
.cc__panel { display: flex; flex-direction: column; gap: 0.7rem; border-top: 1px solid var(--paper-line); padding-top: 0.9rem; }
.cc__panel[hidden] { display: none; }
.cc__opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.cc__opt--locked { cursor: default; opacity: 0.6; }
.cc__opt-txt { display: flex; flex-direction: column; font-size: 0.82rem; line-height: 1.45; }
.cc__opt-txt strong { font-weight: 600; }
.cc__opt-txt span { color: var(--paper-70); }
.cc__opt input { width: 16px; height: 16px; accent-color: var(--paper); }
.cc__save { flex: 0 0 auto; }
/* Way smaller on desktop: a compact card, not a wide bar (Emil, 3 July). Mobile
   keeps the base sizes above, which are already a touch smaller than before. */
@media (min-width: 641px) {
  .cc { width: min(420px, calc(100% - 1.5rem)); padding: 0.8rem 0.95rem; gap: 0.6rem; }
  .cc__main { gap: 0.6rem; }
  .cc__text { font-size: 0.56rem; }
  .cc__btn { padding: 0.62rem 0.8rem; font-size: 0.66rem; }
  .cc__manage { font-size: 0.5rem; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .nav__links, .nav .btn--profile { display: none; }
  .nav { grid-template-columns: auto 1fr auto; }
  .nav__burger { display: flex; }
  .gus__grid, .cold__grid, .where__grid, .social__grid, .intro__grid { grid-template-columns: 1fr; }
  .where__info, .where__text { justify-self: stretch; max-width: none; }
  .pricing__grid, .foot__grid { grid-template-columns: repeat(2, 1fr); }
  .cold__fig, .gus__fig { order: -1; }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .jgrid { grid-template-columns: repeat(2, 1fr); }
  .exits__grid { grid-template-columns: 1fr; }
  /* Stacked on mobile: the headline sits 1.2rem above the first row line, the
     same gap the cold section has. Zero the head's trapped bottom margin so the
     layout gap alone controls it, identical whether or not a lede line follows
     (landing has none, the saunagus page does). */
  .rounds__layout { grid-template-columns: 1fr; gap: 1.2rem; }
  .rounds__head .sec-title, .rounds__head .rounds__lede { margin-bottom: 0; }
  .rounds__head, .rounds__list { grid-column: auto; justify-self: stretch; max-width: none; }
  .rounds__head { position: static; }
  .rounds__track { display: none; }
}
@media (max-width: 1020px) and (min-width: 641px) {
  .rows--cols { grid-template-columns: 1fr; row-gap: 2rem; }
  .cards { grid-template-columns: 1fr; }
  .duo, .duo--rev { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rows--cols { grid-template-columns: 1fr; row-gap: 2rem; }
  .cards { grid-template-columns: 1fr; }
  .duo, .duo--rev { grid-template-columns: 1fr; }
  .hero__inner { flex-direction: column-reverse; align-items: flex-start; }
  .hero__panel { text-align: left; max-width: none; }
  .hero__sub { margin-left: 0; }
  .reviews__grid, .gusels, .pricing__grid, .foot__grid, .founders, .jgrid, .space__intro { grid-template-columns: 1fr; }
  .founder + .founder { border-left: 0; border-top: 1px solid var(--line); }
  .foot__base { justify-content: center; text-align: center; }
  .rounds__row { grid-template-columns: 1fr; }
  .rounds__fig { aspect-ratio: 16 / 10; }
  .price { min-height: 0; }
  .price__amt { margin-top: 1rem; }
  .cc__actions { flex-direction: column-reverse; }
}

/* Visually hidden headings (document outline only), added 3 July 2026. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Legal pages joined the redesign 3 July 2026: list styling inside .prose. */
.prose ul { max-width: 62ch; margin: 0.9rem 0 1.1rem; padding-left: 1.25rem; }
.prose li { color: var(--ink-70); margin: 0.4rem 0; }

/* FAQ questions are real h2s inside their summaries (SEO pass, 4 July 2026):
   the document outline gains the questions, the look stays identical. */
.faq summary h2 { font: inherit; letter-spacing: inherit; margin: 0; display: inline; }