/* Palette + serif direction per client brief (BelArosa reference:
   deep mountain teal structural, honey gold decorative, warm parchment bands,
   pill outlined buttons with tracked uppercase labels, flat + hairline borders). */

:root {
  --paper: #f7f4ed;
  --paper-2: #efeade;
  --card: #fffdf8;
  --spruce: #1d3b33;
  --spruce-deep: #16302b;
  --ink: #24292a;
  --ink-soft: #55605c;
  --honey: #b3822f;
  --honey-soft: #d9b878;
  --honey-deep: #8a6119; /* AA on paper for small uppercase labels */
  --line: rgba(29, 59, 51, 0.16);
  --line-light: rgba(246, 241, 231, 0.18);
  --piste-blue: #5b87b5;
  --piste-red: #b1584c;
  --piste-black: #33383a;
  --radius: 4px;
  --shadow-card: 0 18px 40px -22px rgba(29, 59, 51, 0.35);
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Albert Sans", "Segoe UI", sans-serif;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --measure: 1300px;
  /* keeps the nav and hero text on the same left edge as the content column */
  --gutter: max(var(--pad-x), calc((100% - var(--measure)) / 2));
  --section-gap: clamp(5rem, 10vw, 9rem);
  --nav-bg: rgba(247, 244, 237, 0.9);
}

/* Winter mode: the whole palette cools down. Same variables, frost values;
   every accent, band and surface follows automatically. */
.season-winter {
  --paper: #f2f5f8;
  --paper-2: #e7edf3;
  --card: #fbfdff;
  --spruce: #2c4a63;
  --spruce-deep: #182f42;
  --ink: #232b32;
  --ink-soft: #566371;
  --honey: #4577a3;
  --honey-soft: #a9c6e0;
  --honey-deep: #35648c;
  --line: rgba(44, 74, 99, 0.18);
  --nav-bg: rgba(242, 245, 248, 0.9);
  --shadow-card: 0 18px 40px -22px rgba(24, 47, 66, 0.4);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

/* Smooth scrolling is a vestibular trigger, and every in-page link on this site
   uses it (nav, dot rail, skip link, footer). scroll-padding-top stays. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 em,
h2 em {
  font-style: italic;
  font-weight: 500;
}

h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
}

h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

p {
  max-width: 62ch;
}

a {
  color: inherit;
}

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--honey-deep);
  margin-bottom: 1rem;
}

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
}

.placeholder {
  color: var(--honey-deep);
  font-style: italic;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.9rem 2rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, transform 0.15s ease;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn-primary {
  background: var(--honey);
  color: #fff;
}

.btn-primary:hover {
  background: var(--honey-deep);
}

.btn-outline-light {
  background: transparent;
  color: #fdfaf3;
  border-color: rgba(253, 250, 243, 0.75);
}

.btn-outline-light:hover {
  background: #fdfaf3;
  color: var(--spruce);
  border-color: #fdfaf3;
}

.btn-ghost {
  background: transparent;
  color: var(--spruce);
  border-color: var(--spruce);
}

.btn-ghost:hover {
  background: var(--spruce);
  color: var(--paper);
}

/* ---------- Nav (transparent over the hero, ivory once scrolled) ---------- */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  /* two columns, not three: the section links are a fixed-position rail now, so
     they are out of flow and would leave an empty third column on the right. */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  height: 4.5rem;
  padding: 0 var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.site-nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

@supports not (backdrop-filter: blur(14px)) {
  .site-nav.scrolled {
    background: var(--paper);
  }
}

/* Phones get the bar opaque. It is only 4.5rem tall and the full-width hero CTA
   and fact strip pass directly beneath it, so at 0.9 alpha they ghost through
   the blur and the bar reads as smeared rather than glass. Same value the
   no-backdrop-filter fallback above uses, so it stays season-aware; the blur is
   dropped with it because nothing shows through an opaque bar anyway. */
@media (max-width: 860px) {
  .site-nav.scrolled {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.site-nav.scrolled .brand {
  color: var(--spruce);
}

.site-nav.scrolled .brand span {
  color: var(--honey-deep);
}

.site-nav.scrolled .lang-switch {
  border-color: var(--line);
}

.site-nav.scrolled .lang-switch button {
  color: var(--ink-soft);
}

.site-nav.scrolled .lang-switch button:hover {
  color: var(--spruce);
}

.site-nav.scrolled .lang-switch button.active {
  background: var(--spruce);
  color: #fdfaf3;
}

.brand {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: #fdfaf3;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand span {
  color: var(--honey-soft);
}

/* Section links are a dot rail on the right at desktop; below 1080 px the same
   <ul> becomes the burger dropdown (see the mobile block). */
.site-nav ul {
  position: fixed;
  right: clamp(0.9rem, 2.2vw, 1.6rem);
  /* vh, not %: .site-nav.scrolled has a backdrop-filter, which makes it the
     containing block for fixed children, so % would resolve against the bar. */
  top: 50vh;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  list-style: none;
}

.site-nav ul a {
  position: relative;
  display: block;
  width: 26px; /* WCAG 2.2 target size; the visible dot inside is 10 px */
  height: 26px;
  text-decoration: none;
}

.site-nav ul a::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(253, 250, 243, 0.9);
  background: rgba(22, 48, 43, 0.35);
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.site-nav.scrolled ul a::before {
  border-color: var(--spruce);
  background: rgba(253, 250, 243, 0.75);
}

.site-nav ul a span {
  position: absolute;
  right: calc(100% + 0.1rem);
  top: 50%;
  transform: translate(0.4rem, -50%);
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fdfaf3;
  background: rgba(22, 48, 43, 0.78);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.site-nav.scrolled ul a span {
  color: var(--spruce);
  background: var(--nav-bg);
  border-color: var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-nav ul a:hover::before,
.site-nav ul a:focus-visible::before {
  transform: scale(1.5);
}

.site-nav ul a:hover span,
.site-nav ul a:focus-visible span {
  opacity: 1;
  transform: translate(0, -50%);
}

.site-nav ul a.active::before {
  background: var(--honey);
  border-color: var(--honey);
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav ul a::before,
  .site-nav ul a span {
    transition: none;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 1.1rem;
}

.site-nav .btn {
  padding: 0.6rem 1.4rem;
  white-space: nowrap;
}

.lang-switch {
  display: flex;
  gap: 0.15rem;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  padding: 0.2rem;
}

.lang-switch button {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(253, 250, 243, 0.75);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch button:hover {
  color: #fdfaf3;
}

.lang-switch button.active {
  background: var(--honey);
  color: #fff;
}

/* ---------- Season toggle ---------- */

.season-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  padding: 0.24rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.st-icon {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.34rem;
  border-radius: 50%;
  fill: none;
  stroke: rgba(253, 250, 243, 0.75);
  stroke-width: 1.8;
  transition: background-color 0.3s ease, stroke 0.3s ease;
}

.season-summer .st-sun,
.season-winter .st-snow {
  background: var(--honey);
  stroke: #fff;
}

.site-nav.scrolled .season-toggle {
  border-color: var(--line);
}

.site-nav.scrolled .st-icon {
  stroke: var(--ink-soft);
}

.season-summer .site-nav.scrolled .st-sun,
.season-winter .site-nav.scrolled .st-snow {
  stroke: #fff;
}

/* Labelled variant (in the hero): the honey pill moves off the bare icon and
   onto the icon + word group, so the switch reads SUMMER / WINTER. */
.st-labelled {
  width: fit-content; /* .season-toggle is display:flex, so it would stretch here */
  margin: -0.7rem 0 1.9rem;
  padding: 0.2rem;
}

.st-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.26rem 0.8rem 0.26rem 0.4rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(253, 250, 243, 0.75);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.st-labelled .st-icon {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  background: none;
  border-radius: 0;
}

.season-summer .st-labelled .st-opt:first-child,
.season-winter .st-labelled .st-opt:last-child {
  background: var(--honey);
  color: #fff;
}

.season-summer .st-labelled .st-opt:first-child .st-icon,
.season-winter .st-labelled .st-opt:last-child .st-icon {
  stroke: #fff;
}

/* ---------- Mobile nav ---------- */

.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fdfaf3;
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.site-nav.scrolled .nav-burger span {
  background: var(--spruce);
}

.site-nav.menu-open .nav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav.menu-open .nav-burger span:nth-child(2) {
  opacity: 0;
}

.site-nav.menu-open .nav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu-extra {
  display: none;
}

@media (max-width: 1080px) {
  .site-nav ul {
    display: none;
  }

  .nav-burger {
    display: block;
  }

  .site-nav .btn {
    display: none;
  }

  .site-nav.menu-open ul {
    display: grid;
    position: absolute;
    transform: none;
    align-items: stretch;
    justify-self: stretch;
    top: 100%;
    left: 0;
    right: 0;
    gap: 0.1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.8rem var(--gutter) 1.4rem;
    box-shadow: 0 18px 30px -18px rgba(22, 48, 43, 0.25);
  }

  /* the rail dot and its hover label are desktop-only: plain list items here */
  .site-nav.menu-open ul a {
    display: block;
    width: auto;
    height: auto;
    padding: 0.55rem 0;
    font-size: 1.05rem;
    color: var(--ink);
  }

  .site-nav.menu-open ul a::before {
    display: none;
  }

  .site-nav.menu-open ul a span {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 560px) {
  .brand {
    font-size: 1.2rem;
  }

  .nav-actions .lang-switch {
    display: none;
  }

  .site-nav.menu-open .menu-extra {
    display: block;
    margin-top: 0.6rem;
  }

  .menu-extra .lang-switch {
    display: inline-flex;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden; /* the slow zoom-out scales the image past the viewport */
}

.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-img {
  transition: opacity 1.1s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-img {
    animation: hero-zoom 26s ease-out both;
  }

  @keyframes hero-zoom {
    from { transform: scale(1.07); }
    to { transform: scale(1); }
  }
}

.hero-img-winter {
  opacity: 0;
}

.season-winter .hero-img-winter {
  opacity: 1;
}

.season-winter .hero-img-summer {
  opacity: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(22, 48, 43, 0.5) 0%,
      rgba(22, 48, 43, 0) 20%
    ),
    linear-gradient(
      to top,
      rgba(22, 48, 43, 0.85) 0%,
      rgba(22, 48, 43, 0.45) 45%,
      rgba(22, 48, 43, 0.1) 80%
    );
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter) clamp(3rem, 7vh, 5.5rem);
  max-width: calc(52rem + 2 * var(--gutter));
  width: 100%;
  color: #fdfaf3;
  text-shadow: 0 1px 24px rgba(22, 48, 43, 0.35);
}

.hero-weather {
  color: rgba(253, 250, 243, 0.85);
  font-variant-numeric: tabular-nums;
}

.hero-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--honey-soft);
  margin-bottom: 1.1rem;
}

.hero h1 {
  font-size: clamp(2.4rem, 4.8vw, 3.9rem);
  margin-bottom: 1rem;
}

.hero p {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  margin-bottom: 1.9rem;
  color: rgba(253, 250, 243, 0.92);
}

.hero-season-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  color: var(--honey-soft);
  margin-top: -0.9rem;
}

.hsn-winter {
  display: none;
}

.season-winter .hsn-winter {
  display: inline;
}

.season-winter .hsn-summer {
  display: none;
}

/* ---------- Layout helpers ---------- */

.section {
  padding: var(--section-gap) var(--pad-x) 0;
}

.section-inner {
  max-width: 1300px;
  margin: 0 auto;
}

/* ---------- Intro ---------- */

.fact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.4rem, 3vw, 2.75rem);
  list-style: none;
  padding-bottom: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.fact-strip li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.fact-strip svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--honey-deep);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.intro-grid {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.intro-grid h2 {
  margin-bottom: 1.5rem;
}

.intro-grid p + p {
  margin-top: 1.1rem;
}

.intro-grid figure img {
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 860px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Section heads (one rule for every section) ---------- */

.sec-head {
  max-width: 42rem;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.sec-head h2 {
  margin-bottom: 1rem;
}

/* ---------- Interiors bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

.bento figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.bento figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

@media (hover: hover) {
  .bento figure:hover img {
    transform: scale(1.035);
  }
}

.bento figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 1.2rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fdfaf3;
  background: linear-gradient(to top, rgba(22, 48, 43, 0.65), transparent);
}

.cell-a { grid-column: span 4; aspect-ratio: 16 / 9; }
.cell-b { grid-column: span 2; aspect-ratio: auto; }
.cell-c { grid-column: span 2; aspect-ratio: 4 / 3.4; }
.cell-d { grid-column: span 2; aspect-ratio: 4 / 3.4; }
.cell-e { grid-column: span 2; aspect-ratio: 4 / 3.4; }
.cell-f { grid-column: span 3; aspect-ratio: 16 / 10; }
.cell-g { grid-column: span 3; aspect-ratio: 16 / 10; }

@media (max-width: 860px) {
  .bento {
    grid-template-columns: 1fr 1fr;
  }
  .bento .cell-a,
  .bento .cell-f,
  .bento .cell-g {
    grid-column: span 2;
  }
  .bento .cell-b,
  .bento .cell-c,
  .bento .cell-d,
  .bento .cell-e {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
  }
}

/* ---------- Sauna & terrace (dark teal band) ---------- */

.retreat {
  margin-top: var(--section-gap);
  background:
    radial-gradient(120% 130% at 18% -10%, rgba(253, 250, 243, 0.06), transparent 55%),
    var(--spruce-deep);
  color: #f0ebdf;
  padding: var(--section-gap) var(--pad-x);
}

.retreat .section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}

.retreat header {
  grid-column: 1 / -1;
  max-width: 42rem;
}

.retreat h2 {
  color: #fdfaf3;
  margin-bottom: 1rem;
}

.retreat header p {
  color: rgba(240, 235, 223, 0.8);
}

.retreat figure img {
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.retreat figure figcaption {
  margin-top: 1.1rem;
}

.retreat figcaption h3 {
  color: #fdfaf3;
  margin-bottom: 0.4rem;
}

.retreat figcaption p {
  font-size: 0.98rem;
  color: rgba(240, 235, 223, 0.78);
}

@media (max-width: 860px) {
  .retreat .section-inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- Seasons scroll-snap ---------- */

.seasons-wrap { position: relative; }

.seasons-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1rem; /* stays above the scrollbar */
  right: 0;
  width: 5.5rem;
  background: linear-gradient(to right, transparent, var(--paper));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.seasons-wrap.at-end::after { opacity: 0; }

.seasons-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(17rem, 26vw, 23rem);
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.season-card {
  scroll-snap-align: start;
}

.season-card img {
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-bottom: 1.2rem;
}

.season-card h3 {
  margin-bottom: 0.35rem;
}

.season-card p {
  font-size: 0.97rem;
  color: var(--ink-soft);
}

/* ---------- Mountains: ski-area explorer + day trips ---------- */

.mountains {
  margin-top: var(--section-gap);
  background: var(--paper-2);
  padding: var(--section-gap) var(--pad-x);
}

/* season-dependent activity blocks */
.acts-winter,
.acts-summer {
  display: none;
}

.season-winter .acts-winter,
.season-summer .acts-summer {
  display: block;
}

/* winter first in the seasons rail during winter */
/* In winter the winter cards come first. Keyed on data-season rather than
   nth-child, because the cards come from the seasons.cards array and the owner
   can add or drop one - a fixed 1/2/3/4 rule would scramble any other count. */
.season-winter .seasons-track .season-card[data-season="winter"] { order: -1; }

/* slower page crossfade when the season flips */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.6s;
}

/* ---------- Summer activities ---------- */

.summer-stats {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2.2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.summer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2vw, 1.8rem);
}

.summer-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.summer-card img {
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
}

.summer-card-body {
  padding: 1.3rem 1.5rem 1.5rem;
}

.summer-card-body h3 {
  margin-bottom: 0.4rem;
}

.summer-card-body p {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.summer-chip {
  display: inline-block;
  margin-top: 0.95rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--honey-deep);
  border: 1px solid rgba(148, 105, 31, 0.35);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
}

@media (max-width: 860px) {
  .summer-grid {
    grid-template-columns: 1fr;
  }
}

.ski-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(1.2rem, 2vw, 1.8rem);
}

.ski-photo img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.ski-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.2rem clamp(1.25rem, 3vw, 2.5rem) 1.1rem;
  color: #fdfaf3;
  font-size: 0.9rem;
  background: linear-gradient(to top, rgba(22, 48, 43, 0.65), transparent);
}

@media (max-width: 860px) {
  .ski-photo img {
    aspect-ratio: 4 / 3;
  }
}

.ski {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ski-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}

.ski-tabs::-webkit-scrollbar {
  display: none;
}

.ski-tabs button {
  flex: 1 0 auto;
  min-width: 9rem;
  font: inherit;
  text-align: left;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 1.1rem clamp(1rem, 2vw, 1.6rem);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.25s ease, background-color 0.2s ease;
}

.ski-tabs button:hover {
  background: rgba(29, 59, 51, 0.03);
  color: var(--ink);
}

.ski-tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--honey);
}

.ski-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1.2;
}

.ski-dist {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.ski-panel {
  padding: clamp(1.6rem, 3.4vw, 3rem);
}

.ski-panel[hidden] {
  display: none;
}

.ski-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.ski-stats dt {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}

.ski-stats dd {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.05;
  white-space: nowrap;
}

.ski-stats dd small {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-left: 0.2rem;
}

.piste-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 1.1rem;
  background: var(--line);
}

.piste-bar span {
  display: block;
}

.p-blue { background: var(--piste-blue); }
.p-red { background: var(--piste-red); }
.p-black { background: var(--piste-black); }

.piste-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  list-style: none;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.piste-key li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.piste-key i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.piste-key b {
  font-weight: 600;
  color: var(--ink);
}

.ski-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.ski-link {
  display: inline-block;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--honey-deep);
  border-bottom: 1px solid rgba(148, 105, 31, 0.4);
  padding-bottom: 0.15rem;
  transition: border-color 0.25s ease;
}

.ski-link:hover {
  border-bottom-color: var(--honey-deep);
}

.ski-note {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.daytrips {
  display: grid;
  /* auto-fit, not repeat(3, ...): the cards come from the act.trips array, so the
     owner can add a fourth. With three items this collapses to the same three
     equal columns it always had. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.daytrips a {
  display: block;
  text-decoration: none;
  border-top: 1px solid var(--line);
  padding: 1.4rem 0 1.2rem;
  transition: border-color 0.25s ease;
}

.daytrips a img {
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  margin-bottom: 1.1rem;
}

.daytrips a:hover {
  border-top-color: var(--honey);
}

.daytrips h3 {
  font-size: 1.45rem;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* The arrow is written as `&#8599;&#xFE0E;` everywhere it appears (day trips,
   ski links, both looks/). Neither self-hosted font has a glyph for U+2197, so
   the fallback chain used to reach Apple Color Emoji and iOS drew a blue emoji
   tile instead of a hairline arrow. The trailing U+FE0E asks for text
   presentation; keep it on any arrow added later. */
.daytrips h3 .ext {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--honey-deep);
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .daytrips a:hover .ext {
    transform: translate(3px, -3px);
  }
}

.daytrips p {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .ski-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .daytrips {
    grid-template-columns: 1fr;
  }
}

/* ---------- Location ---------- */

.location-figure {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 3rem;
}

.location-figure img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}

.location-figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem clamp(1.25rem, 3vw, 2.5rem) 1.4rem;
  color: #fdfaf3;
  font-size: 0.95rem;
  background: linear-gradient(to top, rgba(22, 48, 43, 0.7), transparent);
}

.loc-pic-winter {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.loc-pic-winter img { height: 100%; }

.season-winter .loc-pic-winter { opacity: 1; }

.lfc-winter { display: none; }
.season-winter .lfc-winter { display: inline; }
.season-winter .lfc-summer { display: none; }

.location-facts {
  display: grid;
  /* auto-fit, not repeat(4, ...): the columns come from the loc.dist array, so the
     owner can add or drop a list. Four items give the same four columns as before. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.location-facts article {
  border-top: 2px solid var(--spruce);
  padding-top: 1.2rem;
}

.location-facts h3 {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.location-facts p {
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.distance-list {
  list-style: none;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.distance-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0;
}

.distance-list li + li {
  border-top: 1px solid var(--line);
}

.distance-list span {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.location-map {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  border: 0;
  border-radius: var(--radius);
  margin-top: 3rem;
}

.map-facade {
  display: grid;
  place-content: center;
  gap: 1.1rem;
  text-align: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
}

.map-facade p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 40ch;
}

/* ---------- Forecast strip ---------- */

.forecast { margin-top: 3rem; }

.forecast h3 {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.forecast-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8rem;
}

.forecast-strip li {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 0.9rem 0.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}

.forecast-strip svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: var(--spruce);
  stroke-width: 1.6;
}

.fc-day {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.fc-temp { font-size: 0.98rem; }
.fc-temp small { color: var(--ink-soft); }
.fc-snow { color: var(--honey-deep); font-size: 0.8rem; }

@media (max-width: 560px) {
  .forecast-strip { grid-template-columns: repeat(5, minmax(4.2rem, 1fr)); overflow-x: auto; }
}

@media (max-width: 1080px) {
  .location-facts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .location-figure img,
  .location-map {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  .location-facts {
    grid-template-columns: 1fr;
  }
}

/* ---------- Gallery ---------- */

.gallery-filter {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
}

.gallery-filter button {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gallery-filter button:hover {
  color: var(--ink);
  border-color: var(--honey);
}

.gallery-filter button.active {
  background: var(--spruce);
  border-color: var(--spruce);
  color: #fdfaf3;
}

.gallery {
  columns: 3 18rem;
  column-gap: 1.3rem;
}

.gallery figure[hidden] {
  display: none;
}

.gallery figure {
  break-inside: avoid;
  margin-bottom: 1.3rem;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
}

.gallery img {
  width: 100%;
  transition: transform 0.5s ease;
}

@media (hover: hover) {
  .gallery figure:hover img {
    transform: scale(1.03);
  }
}

dialog.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 1100px);
  max-height: 90vh;
}

dialog.lightbox::backdrop {
  background: rgba(22, 48, 43, 0.88);
}

dialog.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: rgba(253, 250, 243, 0.92);
  color: var(--spruce);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.lb-nav:hover {
  background: #fff;
}

.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }

.lb-meta {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  max-width: 90vw;
  text-align: center;
  font-size: 0.88rem;
  color: rgba(253, 250, 243, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-meta #lb-count {
  color: rgba(253, 250, 243, 0.6);
  margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Availability (booking calendar widget) ---------- */

.availability-widget {
  border-top: 2px solid var(--spruce);
  padding-top: 1.4rem;
}

.availability-widget a {
  color: var(--honey-deep);
}

/* ---------- Practical ---------- */

.practical {
  background: var(--paper-2);
  margin-top: var(--section-gap);
  padding: var(--section-gap) var(--pad-x);
}

.practical .section-inner {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.practical h2 {
  margin-bottom: 1rem;
}

.practical-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

.practical-groups section h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.prac-h {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.prac-h svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--honey-deep);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.practical-groups ul {
  list-style: none;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.practical-groups li {
  padding: 0.45rem 0;
}

.practical-groups li + li {
  border-top: 1px solid var(--line);
}

@media (max-width: 960px) {
  .practical .section-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .practical-groups {
    grid-template-columns: 1fr;
  }
}

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem);
}

.faq-grid article {
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}

.faq-grid h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  margin-bottom: 0.45rem;
}

.faq-grid p {
  font-size: 0.97rem;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Plan your stay (widget + how booking works) ---------- */

.stay-grid {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.booking-card {
  border-top: 2px solid var(--spruce);
  padding-top: 1.4rem;
}

.booking-steps {
  counter-reset: step;
  list-style: none;
  margin-top: 1.3rem;
}

.booking-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.4rem;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.booking-steps li + li {
  margin-top: 1.1rem;
}

.booking-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--spruce);
  color: #fdfaf3;
  font-size: 0.82rem;
  font-weight: 600;
}

.booking-steps strong {
  color: var(--ink);
}

.booking-note {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.widget-alt {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.widget-alt a { color: var(--honey-deep); }

@media (max-width: 860px) {
  .stay-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: var(--section-gap);
  background: var(--spruce-deep);
  color: rgba(240, 235, 223, 0.75);
  padding: 3.5rem var(--pad-x) 2.5rem;
  font-size: 0.9rem;
}

.site-footer .section-inner {
  display: grid;
  gap: 2rem;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.site-footer .brand {
  color: #fdfaf3;
}

.site-footer nav a {
  margin-left: 1.5rem;
  /* inline-block so the vertical padding counts: at 390px these links wrap onto
     three rows about 23px apart, under the 24px target size WCAG 2.5.8 asks for */
  display: inline-block;
  padding: 0.3rem 0;
  text-decoration: none;
  color: rgba(240, 235, 223, 0.75);
}

.site-footer nav a:hover {
  color: #fdfaf3;
}

.credits summary {
  cursor: pointer;
  font-weight: 600;
  color: rgba(240, 235, 223, 0.9);
}

.credits ul {
  list-style: none;
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
  max-width: 70ch;
}

.credits a {
  color: rgba(240, 235, 223, 0.9);
}

.footer-legal {
  border-top: 1px solid var(--line-light);
  padding-top: 1.5rem;
}

.footer-copy {
  margin-top: -1rem;
  font-size: 0.85rem;
  color: rgba(240, 235, 223, 0.6);
}

/* ---------- Language switch failure notice ---------- */

.lang-error {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 60;
  transform: translateX(-50%);
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-size: 0.9rem;
  color: var(--ink);
}

.lang-error[hidden] {
  display: none;
}

/* ---------- Booking widget fallback (third-party script never loads) ---------- */

.widget-fallback {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- Scroll reveal ---------- */

/* The hidden state is scoped to .js (set pre-paint by the head script), because
   only JS ever adds .is-visible again. Unscoped, every .reveal block - which is
   most of the page, including the static English fallbacks the checkers guard -
   stays at opacity 0 forever for a visitor with JavaScript off. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* children of a .stagger grid cascade in one by one */
  .js .reveal.stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .js .reveal.stagger.is-visible > * {
    opacity: 1;
    transform: none;
  }

  .reveal.stagger > *:nth-child(2) { transition-delay: 0.08s; }
  .reveal.stagger > *:nth-child(3) { transition-delay: 0.16s; }
  .reveal.stagger > *:nth-child(4) { transition-delay: 0.24s; }
  .reveal.stagger > *:nth-child(5) { transition-delay: 0.32s; }
  .reveal.stagger > *:nth-child(6) { transition-delay: 0.4s; }
  .reveal.stagger > *:nth-child(7) { transition-delay: 0.48s; }
  .reveal.stagger > *:nth-child(8) { transition-delay: 0.56s; }
  .reveal.stagger > *:nth-child(9) { transition-delay: 0.64s; }
  .reveal.stagger > *:nth-child(10) { transition-delay: 0.72s; }
  .reveal.stagger > *:nth-child(11) { transition-delay: 0.8s; }
  .reveal.stagger > *:nth-child(12) { transition-delay: 0.88s; }
}

/* ---------- Polish: hovers, focus, texture ---------- */

@media (hover: hover) {
  .summer-card,
  .daytrips a {
    transition: transform 0.3s ease, box-shadow 0.3s ease,
      border-color 0.25s ease;
  }

  .summer-card:hover,
  .daytrips a:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
  }

  .btn:hover {
    transform: translateY(-1px);
  }
}

:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 3px;
}

p {
  text-wrap: pretty;
}

.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 60;
  background: var(--spruce);
  color: #fdfaf3;
  text-decoration: none;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* filmic paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Guest guide page ---------- */

.guide-page main { padding-top: 5rem; }

.nav-back {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.nav-back:hover {
  color: var(--spruce);
}

@media (max-width: 560px) {
  .nav-back span:last-child { display: none; }
}

.guide-page .sec-head h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin-bottom: 1rem;
}

.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.guide-grid > section {
  border-top: 2px solid var(--spruce);
  padding-top: 1.2rem;
}

.guide-grid h2 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
}

.guide-grid p {
  color: var(--ink-soft);
}

.guide-grid p + p { margin-top: 0.7rem; }

.guide-list {
  list-style: none;
  color: var(--ink-soft);
}

.guide-list li {
  padding: 0.45rem 0;
}

.guide-list li + li { border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .guide-grid { grid-template-columns: 1fr; }
}

@media print {
  .guide-page .site-nav,
  .guide-page .site-footer nav,
  .guide-page .btn { display: none; }
  .guide-page main { padding-top: 0; }
  .guide-page { background: #fff; color: #000; }
  .guide-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .placeholder { color: inherit; font-style: inherit; }
}

/* ---------- Legal notice & privacy page (same shell as the guide) ---------- */

/* the legal page runs h1 > h2 (part) > h3 (section), so the section heading
   needs the same treatment the guide gives its h2 */
.guide-grid h3 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
}

.legal-draft {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border: 1px solid var(--honey);
  border-left: 4px solid var(--honey);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.legal-draft h2 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--honey-deep);
  margin-bottom: 0.6rem;
}

.legal-draft p {
  max-width: 74ch;
  color: var(--ink-soft);
}

.legal-part {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 2px solid var(--spruce);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}

.legal-part-lede {
  margin: 0.8rem 0 clamp(1.8rem, 3.5vw, 2.6rem);
}

.legal-wide {
  grid-column: 1 / -1;
}

.legal-page .guide-list li {
  padding: 0.6rem 0;
}

@media (max-width: 760px) {
  .legal-wide { grid-column: auto; }
}

/* ---------- Reviews (hidden until at least one real quote) ---------- */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.4rem, 2.5vw, 2rem);
}

.review-card {
  max-width: 40rem; /* a single quote should not stretch the whole content column */
  margin: 0;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.review-card p {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
}

.review-card footer {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}