/* Furuodden Sauna — design system (forked from Furuodden Camping v3)
   Single-page narrative. Bricolage Grotesque + Manrope. */

/* ── Self-hosted fonts (variable, weight 400–700) ──────── */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: optional;
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: optional;
  src: url("/assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sister site of Furuodden Camping: same type and layout, but the deep panels
   are Mjøsa lake-slate instead of pine green, and light mode is the daylight twin
   of dark mode: a warm neutral grey page (no yellow), ink headings, slate only
   for panels, rust the one warm colour (2026-10-29, test first). Furuodden's
   cream fought the slate; a cool grey "lake mist" (#ecf0f0, 2026-10-28) read as
   cold. Token names are semantic (--deep = heading text) so the two sites can
   diverge further without renaming classes. */
:root {
  /* Light is the default; dark values live in the second slot of each
     light-dark() and resolve from `color-scheme` (OS preference, or forced
     via <html data-theme="…"> set by theme.js). */
  color-scheme: light dark;

  /* Surfaces (light → dark) */
  --page:        light-dark(#f3f2ef, #1c1f22);
  --bone:        #f3f2ef;                          /* constant: light fg on deep/accent panels */
  --bone-soft:   light-dark(#e9e7e2, #24282c);
  --bone-deep:   light-dark(#dcd9d2, #292e33);
  --paper:       light-dark(#fafaf8, #2b2f34);     /* cards (most elevated) */

  /* Text */
  --ink:         light-dark(#11191e, #e8eaed);
  --ink-soft:    light-dark(#29343b, #bdc1c6);
  --ink-mute:    light-dark(#53606a, #9aa0a6);

  /* Lake-slate: headings in light mode, panels + footer in both */
  --deep:        light-dark(#11191e, #f1f3f4);     /* heading text role: ink in light, neutral white in dark (slate is for panels only) */
  --deep-panel:  light-dark(#1d3340, #23394a);     /* section--deep + ::selection */
  --deep-footer: light-dark(#1d3340, #23394a);
  --moss:        light-dark(#5b6e78, #8fa5b1);

  /* Ember accent (shared with Furuodden Camping's terracotta) */
  --rust:        light-dark(#99411e, #e88c6b);     /* links, filled-button bg */
  --rust-deep:   light-dark(#7d3617, #d6754f);     /* hover */
  --rust-soft:   #ec896a;                           /* constant: ember on deep panels */
  --on-accent:   light-dark(#f3f2ef, #1c1f22);      /* fg on filled rust / ink chips */

  /* Misc */
  --stone:       light-dark(#aaa69c, #6b6b66);
  --rule:        light-dark(#d3d0c8, #3c4247);
  --rule-soft:   light-dark(#e2dfd8, #33383d);

  --topbar-bg:   light-dark(rgba(243, 242, 239, 0.86), rgba(28, 31, 34, 0.85));
  --hover-tint:  light-dark(rgba(196, 90, 43, 0.06), rgba(232, 234, 237, 0.07));
  --active-tint: light-dark(rgba(15, 22, 18, 0.08), rgba(232, 234, 237, 0.10));

  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  --topbar-h: 56px;
  --radius:   12px;
  --radius-lg: 20px;
}

/* Manual override from the topbar toggle (theme.js). Without an
   override, color-scheme: light dark above follows the OS setting. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Fallback for browsers without light-dark() (pre-2024): pin every token
   to its light value. Dark mode simply doesn't engage there. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --page:        #f3f2ef;
    --bone-soft:   #e9e7e2;
    --bone-deep:   #dcd9d2;
    --paper:       #fafaf8;
    --ink:         #11191e;
    --ink-soft:    #29343b;
    --ink-mute:    #53606a;
    --deep:        #11191e;
    --deep-panel:  #1d3340;
    --deep-footer: #1d3340;
    --moss:        #5b6e78;
    --rust:        #99411e;
    --rust-deep:   #7d3617;
    --on-accent:   #f3f2ef;
    --stone:       #aaa69c;
    --rule:        #d3d0c8;
    --rule-soft:   #e2dfd8;
    --topbar-bg:   rgba(243, 242, 239, 0.86);
    --hover-tint:  rgba(196, 90, 43, 0.06);
    --active-tint: rgba(15, 22, 18, 0.08);
  }
  .cookie-banner  { box-shadow: 0 8px 28px rgba(15, 22, 18, 0.18); }
  .slots-choice[aria-pressed="true"] { background: #f6e6d6; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: "kern", "liga", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (min-width: 721px) { body { font-size: 17px; } }

a { color: inherit; text-decoration: none; }
/* Inline prose links need to read as links. */
.section-body a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
.section-body a:hover { color: var(--rust-deep); }
::selection { background: var(--deep-panel); color: var(--bone); }
img { max-width: 100%; height: auto; display: block; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 3rem);
}
.wrap-narrow { max-width: 720px; }
/* ───────────────────────────────────────────────────────
   TOPBAR — always sticky, always visible
   ─────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule-soft);
}
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  min-height: var(--topbar-h);
  padding: 0.5rem clamp(1.1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
}
.topbar-brand {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--deep);
  white-space: nowrap;
  transition: color 0.2s;
  font-variation-settings: "wdth" 100, "opsz" 24;
}
.topbar-brand:hover { color: var(--rust); }
.topbar-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
}
.topbar-links a {
  display: inline-block;
  padding: 0.55rem 0.85rem;
  color: var(--ink);
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.topbar-links a:hover { color: var(--rust); background: var(--hover-tint); }
.topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55rem 1rem;
  background: var(--rust);
  color: var(--on-accent);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.topbar-cta:hover { background: var(--rust-deep); color: var(--on-accent); transform: translateY(-1px); }
.topbar-lang {
  display: flex;
  align-items: center;
  gap: 0.05rem;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.topbar-lang a, .topbar-lang span {
  padding: 0.5rem 0.55rem;
  color: var(--ink-mute);
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.topbar-lang a:hover { color: var(--rust); }
.topbar-lang .active { color: var(--ink); background: var(--active-tint); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Dark-mode toggle (theme.js) — shows a moon in light mode and a sun in
   dark mode, i.e. the icon represents the action a click performs. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  color: var(--rust);
  border-color: var(--rust);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
}
:root[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"]  .theme-toggle .icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
@media (max-width: 520px) {
  .theme-toggle { width: 34px; height: 34px; }
}

@media (max-width: 720px) {
  .topbar-inner { padding: 0.4rem 1rem; gap: 0.35rem; }
  .topbar-links { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--rule-soft); padding-top: 0.3rem; margin-top: 0.3rem; font-size: 13px; gap: 0.05rem; }
  .topbar-links a { padding: 0.5rem 0.6rem; }
  .topbar-brand { font-size: 1rem; }
  .topbar-cta { padding: 0.45rem 0.8rem; font-size: 12.5px; }
  .topbar-lang { font-size: 11px; }
  .topbar-lang a, .topbar-lang span { padding: 0.4rem 0.45rem; }
}

/* ───────────────────────────────────────────────────────
   HERO — headline + the fire-and-Mjøsa photo. Stacked on phones and
   tablets; from 960px text left and the (portrait) photo right, so the
   sauna is in the first screen.
   ─────────────────────────────────────────────────────── */
.hero {
  background: var(--page);
  position: relative;
  padding: clamp(1.75rem, 5vw, 3.5rem) 0 0;
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 3rem);
}
.hero-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
/* Line break after "Mjøsa," only where the two-column hero has room (below) */
.hero-title br { display: none; }
.hero-sub {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 1.5rem 0 0;
  font-weight: 400;
}
.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 2rem 0 0;
  align-items: center;
}
.hero-phone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.1rem;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}
/* Name + number as one link, at least 44px tall for thumbs */
.hero-phone a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.hero-phone strong {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.hero-phone a:hover, .hero-phone a:hover strong { color: var(--rust); text-decoration-color: currentColor; }
/* Phones: "Eller ring" on its own line, the two numbers side by side under it */
@media (max-width: 520px) {
  .hero-phone { margin-top: 0.25rem; }
  .hero-phone > span { flex-basis: 100%; }
}

.hero-video-block {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  position: relative;
  width: 100%;
  height: clamp(220px, 45vh, 540px);
  overflow: hidden;
  background: #0e1610;
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────
   SECTIONS — alternating cream / paper / forest
   ─────────────────────────────────────────────────────── */
.section {
  padding: clamp(3rem, 7vw, 6rem) 0;
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}
.section--paper { background: var(--paper); }
.section--soft  { background: var(--bone-soft); }
.section--deep {
  background: var(--deep-panel);
  color: var(--bone);
}
.section--deep .section-title { color: var(--bone); }
.section--deep .section-lead { color: rgba(243, 242, 239, 0.82); }

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* Only the /embed/ page has one (the sauna's name, since it sits on someone else's page) */
.section-eyebrow {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--deep);
  margin-bottom: 0.5rem;
}
.section-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "wdth" 100, "opsz" 72;
}
.section-lead {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 1.25rem 0 0;
  font-weight: 400;
}
.section-body {
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.65;
}
.section-body p { margin: 0 0 1.1rem; }
.section-body p:last-child { margin-bottom: 0; }
.section-body strong { font-weight: 600; color: var(--ink); }

/* ───────────────────────────────────────────────────────
   PRICE LIST — like the board at the door: name, dotted leader, price
   ─────────────────────────────────────────────────────── */
.pricelist {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4.5rem);
  max-width: 62rem;
}
@media (min-width: 760px) {
  .pricelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pricelist-group h3 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--deep);
  margin: 0;
}
.pricelist-group > p {
  margin: 0.5rem 0 0;
  max-width: 36ch;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.pricelist-group > .pricelist-when {
  margin-top: 0.4rem;
  font-weight: 600;
  color: var(--ink);
}
.pricelist-rows { margin: 1rem 0 0; padding: 0; }
.pricelist-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0;
}
.pricelist-row dt { color: var(--ink-soft); }
/* Dotted leader between the name and the price */
.pricelist-row::after {
  content: "";
  order: 1;
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--stone);
  transform: translateY(-0.3em);
}
.pricelist-row dd {
  order: 2;
  margin: 0;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.pricelist-book {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.5rem 0;
  font-weight: 600;
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pricelist-book:hover { color: var(--rust-deep); }
.pricelist-gift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  max-width: 62rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}
.pricelist-gift p { margin: 0; max-width: 46ch; color: var(--ink-soft); }
.pricelist-gift strong { font-weight: 600; color: var(--ink); }

/* ───────────────────────────────────────────────────────
   FACILITY PILLS (under accommodation, fasiliteter row)
   ─────────────────────────────────────────────────────── */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.pill::before {
  content: "•";
  color: var(--rust);
  font-size: 1.2em;
  line-height: 1;
}
.section--deep .pill {
  background: rgba(243, 242, 239, 0.06);
  border-color: rgba(243, 242, 239, 0.18);
  color: rgba(243, 242, 239, 0.92);
}

/* ───────────────────────────────────────────────────────
   BOOKING CALLOUT
   ─────────────────────────────────────────────────────── */
.booking {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 720px) {
  .booking { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .booking--triple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.booking-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.booking-card .badge {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
}
.booking-card h3 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.018em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.booking-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.55;
}
.booking-card .phone-big {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.6rem);
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
}
.booking-card .phone-big a { color: inherit; transition: color 0.2s; }
.booking-card .phone-big a:hover { color: var(--rust); }
.booking-card .name {
  font-family: var(--sans);
  color: var(--ink-mute);
  font-size: 0.95rem;
  font-weight: 500;
}

/* ───────────────────────────────────────────────────────
   PRICE TABLE (booking section)
   ─────────────────────────────────────────────────────── */
.prices {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.prices-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.97rem;
}
.prices-table th,
.prices-table td {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: baseline;
  text-align: left;
}
.prices-table th {
  font-family: var(--display);
  font-weight: 500;
  color: var(--deep);
  font-size: 1.15rem;
  letter-spacing: -0.012em;
}
.prices-table td.price {
  text-align: right;
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
  font-size: 1.15rem;
  white-space: nowrap;
}
.prices-table tr:last-child th,
.prices-table tr:last-child td {
  border-bottom: 1px solid var(--rule);
}
.prices-table .sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.83rem;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 0.15rem;
}

/* ───────────────────────────────────────────────────────
   BUTTONS
   ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.95em 1.55em;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}
.btn.primary {
  background: var(--rust);
  color: var(--on-accent);
  border-color: var(--rust);
}
.btn.primary:hover {
  background: var(--rust-deep);
  border-color: var(--rust-deep);
  transform: translateY(-1px);
}
.btn.secondary:hover {
  background: var(--ink);
  color: var(--on-accent);
  transform: translateY(-1px);
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.btn.ghost:hover {
  color: var(--rust);
  background: transparent;
}
.section--deep .btn.secondary {
  border-color: var(--bone);
  color: var(--bone);
}
.section--deep .btn.secondary:hover {
  background: var(--bone);
  color: var(--deep-panel);
}

/* ───────────────────────────────────────────────────────
   FOOTER
   ─────────────────────────────────────────────────────── */
footer.site {
  background: var(--deep-footer);
  color: rgba(243, 242, 239, 0.78);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--sans);
}
footer.site .wrap { padding: 0 clamp(1.1rem, 4vw, 3rem); }
footer.site .row1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 720px) {
  footer.site .row1 { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
}
footer.site .footer-logo {
  width: auto;
  height: 44px;
  display: block;
  margin: 0 0 0.8rem;
}
footer.site .tagline {
  font-size: 14px;
  line-height: 1.55;
  max-width: 32ch;
  color: rgba(243, 242, 239, 0.72);
}
footer.site .col-title {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--bone);
  margin: 0 0 0.85rem;
}
footer.site ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  font-size: 14px;
}
footer.site ul a, footer.site ul .footer-link-button { display: inline-block; padding: 0.3rem 0; }
footer.site ul a {
  color: rgba(243, 242, 239, 0.85);
  transition: color 0.15s;
}
footer.site ul a:hover { color: var(--rust-soft); }
footer.site ul .footer-link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: rgba(243, 242, 239, 0.85);
  text-align: left;
  transition: color 0.15s;
}
footer.site ul .footer-link-button:hover { color: var(--rust-soft); }
footer.site .row2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(243, 242, 239, 0.12);
  font-size: 12px;
  color: rgba(243, 242, 239, 0.64); /* ≥4.5:1 on the lake-slate footer — WCAG AA */
}

/* ───────────────────────────────────────────────────────
   ANIMATIONS
   ─────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeUp 0.7s ease-out both; }
.reveal.d1 { animation-delay: 0s; }
.reveal.d2 { animation-delay: 0.1s; }
.reveal.d3 { animation-delay: 0.22s; }
.reveal.d4 { animation-delay: 0.34s; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }
/* ───────────────────────────────────────────────────────
   HERO MEDIA — photo of the sauna (placeholder until real photos arrive)
   ─────────────────────────────────────────────────────── */
.hero-media {
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  position: relative;
  width: 100%;
  /* The photo is portrait (9:16): portrait (1.4:1) on phones, a band of it
     between 721 and 959px, the full right column from 960px (see below). */
  height: clamp(280px, min(85vh, 140vw), 1000px);
  overflow: hidden;
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ember-on-lake placeholder while the photo loads. On the img, not the frame,
     so it can't show as a hairline at the frame's rounded, sub-pixel edges. */
  background:
    radial-gradient(ellipse 60% 80% at 50% 115%, rgba(236, 137, 106, 0.55), transparent 70%),
    linear-gradient(180deg, #2a4656 0%, #1d3340 60%, #142530 100%);
  /* Desktop: from the window arch down to the fire in the stove. Phones see
     more of the photo, so start higher up. motion.js reads this value. */
  object-position: 50% 58%;
}
@media (max-width: 720px) {
  .hero-media img { object-position: 50% 42%; }
}
/* Tablets: the photo gets the content width instead of edge to edge,
   so the portrait photo isn't cut down to a thin strip. */
@media (min-width: 721px) {
  .hero-media {
    width: min(100% - 2 * clamp(1.1rem, 4vw, 3rem), 1104px);
    margin-inline: auto;
    /* Same air below as above, so the photo doesn't sit on the next section */
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    border-radius: var(--radius-lg);
  }
}
/* Desktop: text left, photo right, both in the first screen */
@media (min-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.1rem, 4vw, 3rem) clamp(3rem, 5vw, 4.5rem);
  }
  .hero-inner { padding: 0; margin: 0; max-width: none; }
  .hero-title { font-size: clamp(3rem, 5.6vw, 5rem); max-width: none; }
  .hero-title br { display: inline; }
  .hero-media {
    width: auto;
    margin: 0;
    height: clamp(460px, calc(100svh - var(--topbar-h) - 5rem), 760px);
  }
  .hero-media img { object-position: 50% 62%; }
}
/* Live air temperature at the sauna (assets/js/vaer.js), on the photo */
.hero-media .weather {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 1;
  margin: 0;
  max-width: calc(100% - 1.7rem);
  background: light-dark(rgba(251, 247, 233, 0.92), rgba(28, 31, 34, 0.88));
  border-color: transparent;
  border-radius: 1.1rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Icon | text, with the credit under the text, in every width */
.hero-media .weather {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  font-size: 0.88rem;
}
.hero-media .weather-credit { grid-column: 2; padding-left: 0; border-left: 0; }
.hero-media-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 242, 239, 0.7);
}

/* ───────────────────────────────────────────────────────
   PLACEHOLDER MARKER — content we still need from the owners.
   Every .ph must be gone before launch (grep -n 'class="ph"').
   ─────────────────────────────────────────────────────── */
.ph {
  background: light-dark(#fff1a8, #5a4d12);
  color: light-dark(#4a3d00, #fff1a8);
  border-radius: 4px;
  padding: 0 0.3em;
  outline: 1px dashed light-dark(#b39b1d, #c9b44a);
  font-style: normal;
}

/* ───────────────────────────────────────────────────────
   STEPS — how a visit works
   ─────────────────────────────────────────────────────── */
.steps {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  counter-reset: step;
}
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
.steps li {
  counter-increment: step;
  border-top: 1px solid rgba(243, 242, 239, 0.18);
  padding-top: 1.1rem;
}
.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  color: var(--rust-soft);
  margin-bottom: 0.6rem;
}
.steps h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 0.3rem;
  color: var(--bone);
  letter-spacing: -0.012em;
}
.steps p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(243, 242, 239, 0.75);
}

/* ───────────────────────────────────────────────────────
   AVAILABILITY — next sessions from Periode (assets/js/ledige.js)
   ─────────────────────────────────────────────────────── */
.slots { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.slots-status {
  margin: 0;
  font-size: 0.97rem;
  color: var(--ink-mute);
}
.slots-note {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  font-size: 0.97rem;
  color: var(--ink-soft);
}
.slots-note a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
/* Air temperature now (assets/js/vaer.js): small pill, placed on the hero photo above */
.weather {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.45rem 1rem 0.45rem 0.75rem;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.weather[hidden] { display: none; }
.weather-icon { flex: none; color: var(--rust); }
.weather-now { color: var(--ink); font-weight: 600; }
.weather-credit {
  padding-block: 0.2rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--ink-mute);
  text-decoration: none;
}
.weather-credit:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 520px) {
  /* Credit on its own line under the text instead of after a divider */
  .weather { border-radius: 1.1rem; }
  .weather-credit { flex-basis: 100%; padding-left: calc(18px + 0.6rem); border-left: 0; }
}
.slots-day { margin: 0 0 1.5rem; }
.slots-day:last-child { margin-bottom: 0; }
.slots-date {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--deep);
  margin: 0 0 0.6rem;
}
.slots-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.slot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color 0.15s, transform 0.15s;
}
a.slot:hover { border-color: var(--rust); transform: translateY(-1px); }
a.slot:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.slot-time {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.slot-name { font-size: 0.95rem; color: var(--ink-soft); min-width: 0; }
.slot-seats {
  font-size: 13px;
  font-weight: 700;
  color: var(--rust);
  white-space: nowrap;
}
.slot--full { opacity: 0.55; }
.slot--full .slot-seats { color: var(--ink-mute); }
@media (max-width: 520px) {
  .slot { grid-template-columns: auto 1fr; }
  .slot-name { grid-column: 1 / -1; grid-row: 2; }
}
.slots-more { margin-top: 1.5rem; }
.slots-more-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.slots-more-link:hover { color: var(--rust-deep); }

/* Step 1: product choice (Fellesbadstue / Privat badstue) */
.slots-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  max-width: 40rem;
}
.slots-choice {
  display: grid;
  gap: 0.2rem;
  text-align: left;
  padding: 1.05rem 1.25rem;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.slots-choice:hover { border-color: var(--rust); transform: translateY(-1px); }
.slots-choice:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.slots-choice[aria-pressed="true"] {
  border-color: var(--rust);
  background: light-dark(#f6e6d6, #3a2a24);
  box-shadow: inset 0 0 0 1px var(--rust);
}
.slots-choice-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.slots-choice-price { font-size: 0.92rem; color: var(--ink-soft); }

/* Step 2: day chips (scroll sideways on phones) */
.slots-panel:not(:empty) { margin-top: 1.5rem; }
.slots-days {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 2px 2px 0.5rem;
  margin: 0 -2px 0.75rem;
  scrollbar-width: none; /* swipe on phones; 7 days fit on desktop */
}
.slots-day-chip {
  flex: 0 0 auto;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.slots-day-chip:hover { border-color: var(--rust); color: var(--ink); }
.slots-day-chip:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.slots-day-chip[aria-pressed="true"] {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--on-accent);
}

/* Step 3: that day's times as a grid of small cards */
.slots-list--times { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.slots-list--times .slot {
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
}

/* ───────────────────────────────────────────────────────
   FAQ — native <details>, no JS
   ─────────────────────────────────────────────────────── */
.faq {
  max-width: 46rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.012em;
  color: var(--deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 600;
  color: var(--rust);
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--rust); }
.faq summary:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.faq .faq-body {
  padding: 0 0 1.2rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.65;
}
.faq .faq-body p { margin: 0 0 0.8rem; }
.faq .faq-body p:last-child { margin-bottom: 0; }
.faq .faq-body a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ───────────────────────────────────────────────────────
   SIMPLE TEXT PAGE (personvern, regler)
   ─────────────────────────────────────────────────────── */
.prose { max-width: 42rem; }
.prose h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  letter-spacing: -0.015em;
  color: var(--deep);
  margin: 2.25rem 0 0.6rem;
}
.prose p, .prose li { color: var(--ink-soft); line-height: 1.65; }
.prose a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.prose ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose .link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.prose li { margin-bottom: 0.45rem; }
/* Emergency numbers on /regler/: read like the sign by the door, number first */
.prose .emergency { margin: 1rem 0 1.25rem; }
.prose .emergency div {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.5rem 0;
}
.prose .emergency div + div { border-top: 1px solid var(--rule-soft); }
.prose .emergency dt a {
  display: inline-block;
  min-height: 44px;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--rust);
  text-decoration: none;
}
.prose .emergency dt a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.prose .emergency dd { margin: 0; color: var(--ink); line-height: 1.45; }

/* ───────────────────────────────────────────────────────
   MAP
   ─────────────────────────────────────────────────────── */
.map-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--bone-soft);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.map-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
.map-caption {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
}
@media (min-width: 721px) {
  .map-frame { aspect-ratio: 16 / 7; }
}

/* ───────────────────────────────────────────────────────
   COOKIE CONSENT BANNER (fixed bottom of viewport)
   ─────────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 100;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px light-dark(rgba(15, 22, 18, 0.18), rgba(0, 0, 0, 0.6));
  padding: 1.25rem 1.5rem;
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--sans);
  animation: fadeUp 0.45s ease-out both;
}
.cookie-banner[hidden] { display: none; }
.cookie-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.cookie-text {
  margin: 0;
  flex: 1 1 280px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cookie-text a {
  color: var(--rust);
  border-bottom: 1px solid var(--rust);
  padding-bottom: 1px;
  font-weight: 600;
}
.cookie-text a:hover { color: var(--rust-deep); border-color: var(--rust-deep); }
/* "Velg selv" panel: one checkbox per purpose (Statistikk, Annonsemåling) */
.cookie-choices {
  flex: 1 1 100%;
  display: grid;
  gap: 0.6rem;
  margin: 0;
}
.cookie-choices[hidden] { display: none; }
.cookie-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.cookie-choice input {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--rust);
  cursor: pointer;
}
.cookie-choice strong { color: var(--ink); margin-right: 0.3rem; }
.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  flex-shrink: 0;
}
/* "Avvis alle" and "Godta alle" look the same on purpose: no nudging towards yes */
.cookie-btn {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13.5px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--on-accent);
}
.cookie-btn:hover { background: var(--rust-deep); border-color: var(--rust-deep); color: var(--on-accent); transform: translateY(-1px); }
.cookie-btn--quiet {
  background: transparent;
  color: var(--ink);
}
.cookie-btn--quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
@media (max-width: 520px) {
  .cookie-banner { padding: 1rem 1.1rem; bottom: 0.6rem; left: 0.6rem; right: 0.6rem; }
  .cookie-text, .cookie-choice { font-size: 13.5px; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; padding: 0.55rem 0.7rem; }
}

footer.site .row2 .footer-link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
footer.site .row2 .footer-link-button:hover,
footer.site .row2 a:hover { color: var(--rust-soft); }

/* ───────────────────────────────────────────────────────
   MAP PLACEHOLDER (entire area is the button — click to load)
   ─────────────────────────────────────────────────────── */
.map-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse at top left, var(--bone-soft) 0%, var(--bone-deep) 100%);
  border: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 0.25s, filter 0.25s;
}
.map-placeholder:hover {
  filter: brightness(0.97);
}
.map-placeholder:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: -4px;
}
.map-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 380px;
  pointer-events: none;
}
.map-placeholder-text {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.map-placeholder-cta {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ───────────────────────────────────────────────────────
   FIND US (Praktisk) + card action button
   ─────────────────────────────────────────────────────── */
.find-us {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 60rem;
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}
.find-us-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.018em;
  color: var(--deep);
  margin: 0 0 0.6rem;
}
.find-us > p { color: var(--ink-soft); max-width: 42rem; margin: 0; }
.find-us > .map-links { margin-top: 1.25rem; max-width: none; }
.map-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 1.25rem 0 0;
}
.card-action { margin-top: auto; padding-top: 0.5rem; }

/* Five menu links on one line on phones (≥ 340px wide); scrolls sideways below that */
@media (max-width: 440px) {
  .topbar-links { flex-wrap: nowrap; overflow-x: auto; justify-content: space-between; scrollbar-width: none; }
  .topbar-links::-webkit-scrollbar { display: none; }
  .topbar-links a { padding: 0.5rem 0.35rem; font-size: 12.5px; white-space: nowrap; }
}

/* ───────────────────────────────────────────────────────
   PHOTO CAROUSEL — photos side by side at one height (assets/js/carousel.js)
   ─────────────────────────────────────────────────────── */
.carousel {
  --carousel-h: clamp(260px, 38vw, 460px);
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.carousel-track {
  position: relative;            /* slides' offsetLeft is measured from here */
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0 0 0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
  border-radius: var(--radius-lg);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
.carousel-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}
.carousel-slide { flex: 0 0 auto; scroll-snap-align: start; }
/* table + table-caption keeps the caption no wider than its photo */
.carousel-slide figure { display: table; margin: 0; }
.carousel-slide img {
  display: block;
  height: var(--carousel-h);
  width: auto;
  max-width: 82vw;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--bone-soft);
  -webkit-user-drag: none;
  user-select: none;
}
.carousel-slide figcaption {
  display: table-caption;
  caption-side: bottom;
  margin-top: 0.6rem;
  font-size: 13.5px;
  color: var(--ink-mute);
}
/* Prev/next arrows: overlaid on the photos, shown on hover or keyboard focus.
   Hidden on touch screens (no hover), where swiping does the job. */
.carousel-arrow {
  position: absolute;
  top: calc(var(--carousel-h) / 2);
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: light-dark(rgba(251, 247, 233, 0.92), rgba(43, 47, 52, 0.92));
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, color 0.15s, transform 0.15s;
}
.carousel-arrow svg { width: 22px; height: 22px; }
.carousel-arrow--prev { left: 0.75rem; }
.carousel-arrow--next { right: 0.75rem; }
.carousel:hover .carousel-arrow,
.carousel:focus-within .carousel-arrow { opacity: 1; }
.carousel-arrow:hover { color: var(--rust); transform: translateY(-50%) scale(1.06); }
.carousel-arrow:focus-visible { opacity: 1; outline: 2px solid var(--rust); outline-offset: 2px; }
@media (hover: none) {
  .carousel-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}

/* Phones: the top bar slides away on scroll down and back on scroll up (assets/js/nav.js) */
.topbar { transition: transform 0.25s ease; }
.topbar.topbar--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none; }
}

/* ───────────────────────────────────────────────────────
   EMBED — /embed/, the booking widget other sites show in an <iframe>
   (norwegiansaunas.com: a white card up to ~900px wide, 720px tall,
   640px on phones; the page scrolls inside the frame if it has to)
   ─────────────────────────────────────────────────────── */
.embed { font-size: 16px; }
/* The nb/en text switch lives inline in embed/index.html, not here (see the comment there) */
.embed-main { padding: clamp(1rem, 4vw, 1.75rem); }
.embed .section-eyebrow { margin-bottom: 0.6rem; }
.embed .section-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.embed-lead {
  max-width: 52ch;
  margin: 0.6rem 0 0;
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.embed .slots { margin-top: 1.25rem; }
.embed .slots-status a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.embed .slots-panel:not(:empty) { margin-top: 1rem; }
.embed .slots-more { margin-top: 1rem; }
@media (max-width: 520px) {
  /* Phones: both products side by side and two times per row, so a day fits in the 640px frame */
  .embed .slots-choices { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .embed .slots-choice { padding: 0.75rem 0.85rem; }
  .embed .slots-choice-name { font-size: 1.05rem; }
  .embed .slots-choice-price { font-size: 0.85rem; }
  .embed .slots-list--times { grid-template-columns: 1fr 1fr; }
}
.embed-foot {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.embed-foot a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.embed-foot a[href^="tel:"] { white-space: nowrap; }