/* Koru House Hakuba - site styles.
   Mobile-first: base rules for small screens, min-width media queries for larger ones.
   Feel: a mountain lodge in winter. Snow white and cool grey, deep night blue for the header
   and contrast bands (with a mountain ridgeline on their top edge), brand blue for actions,
   logo green for small labels. No JavaScript, no outside files.
   Fonts: the device's own sans-serif, bold, for headings and body text; Fraunces
   (self-hosted, SIL OFL) only for the guest quotes, for a little warmth. */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Fallback sized close to Fraunces so headings don't jump when it loads. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  --ink: #17232b;
  --muted: #475661; /* 7:1 on snow, 6.2:1 on frost */
  --paper: #f7f9fb; /* snow */
  --linen: #e9eff3; /* frost: alternate sections */
  --stone: #dde6ec; /* photo placeholders */
  --line: #d3dde4;
  --line-strong: #b8c6d0;
  --white: #ffffff;
  --cedar: #2c6621; /* logo green, 6.4:1 on snow, 5.7:1 on frost: small labels */
  --night: #1c2f3b; /* header, dark bands and footer */
  --night-text: #c3cfd6; /* 8.7:1 on night */
  --night-link: #a8d4f2;
  /* Brand blue #0083CA is 4.1:1 on white: big shapes only. #0068B7 (5.7:1) for links and buttons. */
  --brand-blue: #0083ca;
  --blue: #0068b7;
  --blue-dark: #00559a;
  --green: #2f6b23;

  --jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP";
  --font: system-ui, -apple-system, "Segoe UI", Roboto, var(--jp), sans-serif;
  --font-head: var(--font);
  --font-quote: "Fraunces", "Fraunces Fallback", Georgia, var(--jp), serif;

  --gutter: 1.25rem;
  /* Corners: one soft radius for buttons and cards, a smaller one for fields inside a card.
     Photos stay square. */
  --radius: 0.5rem;
  --radius-sm: 0.375rem;
  --section-y: 4.5rem; /* space above and below each section */
  --header-h: 4.75rem;
  --logo: 3.75rem; /* round logo: 60px on phones */
}

@media (min-width: 48rem) {
  :root {
    --gutter: 2rem;
    --header-h: 5.75rem;
    --section-y: 5.5rem;
    --logo: 4.5rem;
  }
}

@media (min-width: 62rem) {
  :root {
    --header-h: 6.5rem;
    --logo: 5.25rem; /* 84px */
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps anchor targets clear of the sticky header. */
  scroll-padding-top: var(--header-h); /* sections start right under the header; their own padding gives the space */
}

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

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

a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--blue-dark);
}

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

h1,
h2,
h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.375rem, 1.55rem + 2.9vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

/* Phones: the home page headline fits on two lines, so the Enquire button shows sooner. */
@media (max-width: 39.99rem) {
  .hero h1 {
    font-size: min(8vw, 2.375rem);
  }
}

h2 {
  font-size: clamp(1.875rem, 1.3rem + 2.1vw, 3rem);
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}

p {
  margin: 0 0 1rem;
}

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap--narrow {
  max-width: 46rem;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  padding: 0.6rem 1rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  z-index: 20;
}

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

/* Small label above headings: spaced capitals in cedar. */
.eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cedar);
}

/* Phones: a little less spacing so the hero label fits on one line. */
@media (max-width: 29.99rem) {
  .eyebrow {
    letter-spacing: 0.13em;
  }
}

.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
}

.note {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- Header: stays at the top while scrolling ----------
   The round logo is the one strong mark; everything else is quiet. Phones: logo left,
   Enquire right. From 62rem: menu left, logo centred, Enquire right, like a lodge sign
   over the door. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--night);
}

.site-header :focus-visible {
  outline-color: var(--night-link);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  flex: none;
  display: block;
  border-radius: 50%;
}

/* A fine white ring (same weight as the Enquire button border) lifts the round logo off the night blue (the logo itself is untouched).
   Clear space beyond it is more than half the height of its "K". */
.brand__logo {
  width: var(--logo);
  height: var(--logo);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--white);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Menu: hidden on phones and tablets (the Enquire button stays). */
.site-nav {
  display: none;
}

.site-nav ul,
.lang-switcher ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a,
.lang-switcher {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  color: #e8eef2; /* 11:1 on night */
  text-decoration: none;
}

/* Hover: a thin rule slides in under the link. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.12em; /* the letter spacing after the last letter */
  bottom: 0.15rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.site-nav a:hover {
  color: var(--night-link);
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.lang-switcher a {
  color: #e8eef2;
}

@media (min-width: 62rem) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .brand {
    grid-column: 2;
    grid-row: 1;
  }

  .site-nav {
    display: block;
    grid-column: 1;
    grid-row: 1;
  }

  .site-header__actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

@media (min-width: 72rem) {
  .site-nav ul {
    gap: 2.5rem;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border: 1.5px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--white);
}

/* Header Enquire: a white outline in the menu's small capitals, filling white on hover. */
.btn--header {
  flex: none;
  padding: 0.7rem 1.1rem;
  border-color: rgb(255 255 255 / 0.75);
  background: transparent;
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.btn--header:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--night);
}

@media (min-width: 48rem) {
  .btn--header {
    padding: 0.75rem 1.4rem;
  }
}

.btn--outline {
  background: transparent;
  color: var(--blue);
}

.btn--outline:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--blue);
  padding-left: 0;
  padding-right: 0;
}

.btn--ghost::after {
  content: " \2192";
}

.btn--ghost:hover {
  background: transparent;
  border-color: transparent;
  color: var(--blue-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
}

.link-arrow {
  font-weight: 600;
}

.link-arrow::after {
  content: " \2192";
}

/* ---------- Photo placeholders (macros/photo.njk) ----------
   A quiet stone-coloured slot at the photo's shape, with a small koru and the photo brief,
   so it reads as "photo to come" rather than a broken image. */
.ph {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  aspect-ratio: var(--ratio, 4 / 3);
  margin: 0;
  padding: 1.5rem;
  overflow: hidden;
  border-radius: 0; /* square corners: photographs, not cards */
  background-color: var(--stone);
  background-image: linear-gradient(180deg, #c9d8e3, #eef3f6 75%);
  box-shadow: inset 0 0 0 1px rgb(23 35 43 / 0.06);
  text-align: center;
}

/* A faint mountain ridge along the bottom of every photo slot. */
.ph::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: #b9cad6;
  opacity: 0.55;
  -webkit-mask: url("/assets/shapes/ridge.svg") bottom / 100% 100% no-repeat;
  mask: url("/assets/shapes/ridge.svg") bottom / 100% 100% no-repeat;
}

.ph > * {
  position: relative;
  z-index: 1;
}

.ph__mark {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--night);
  opacity: 0.4;
}

.ph__label {
  max-width: 20rem;
  margin: 0;
  color: #3f4f5a; /* 6.8:1 on the lightest part, darker than the ridge */
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* ---------- Hero ----------
   Phones and tablets: photo on top (3:2, then 16:9), text below on the page colour, so the
   headline and the Enquire button share the first screen.
   Wider screens: text on the left, photo filling the right side to the window edge. The photo
   area stays landscape (about 5:4 at 1440px, 4:3 and wider above that), so a normal 3:2
   exterior shot crops only at the sides. The text never sits on the photo. */
.hero {
  container-type: inline-size;
  padding-bottom: 1rem; /* the next section brings its own top space */
}

.hero__photo {
  aspect-ratio: 3 / 2;
  box-shadow: none;
}

/* Ready for the real photo: an <img> or <picture> in this slot fills it. */
.hero__photo img,
.hero__photo picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__inner {
  max-width: 40rem;
  padding: 2rem var(--gutter) 0;
}

.hero .lead {
  margin-bottom: 0;
  font-size: 1.0625rem;
}

.rating {
  display: flex;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}

.rating a {
  color: var(--muted);
  text-decoration: none;
}

.rating a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.rating__stars {
  color: #a85a12; /* 5.1:1 on snow */
  letter-spacing: 0.12em;
  margin-right: 0.4rem;
}

@media (min-width: 40rem) {
  .hero__photo {
    aspect-ratio: 16 / 9;
  }

  .hero__inner {
    margin: 0 auto;
    max-width: 72rem;
    padding-top: 3rem;
  }

  .hero .lead {
    font-size: 1.125rem;
  }

  .hero__card {
    max-width: 38rem;
  }
}

@media (min-width: 64rem) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    min-height: clamp(36rem, 46vw, 48rem);
    padding-bottom: 0;
  }

  .hero__photo {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: auto;
  }

  .hero__inner {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    max-width: none;
    margin: 0;
    /* Left edge lines up with the rest of the page's content. */
    padding: 3.5rem 3.5rem 3.5rem max(var(--gutter), calc((100vw - 72rem) / 2 + var(--gutter)));
    padding-left: max(var(--gutter), calc((100cqw - 72rem) / 2 + var(--gutter)));
  }

  .hero__card {
    max-width: 32rem;
  }
}

/* ---------- Sections ---------- */
.section {
  padding: var(--section-y) 0;
}

/* Sections with a ridge on their top edge: the ridge already gives breathing room, so a
   little less space under it keeps the gaps between sections even. */
.section--tint,
.section--night {
  padding-top: calc(var(--section-y) * 0.8);
}

.section--tint {
  background: var(--linen);
}

/* Deep blue band (reviews): light text throughout, a mountain ridge on its top edge. */
.section--night {
  position: relative;
  margin-top: clamp(3rem, 11vw, 10rem); /* room for the ridge */
  background: var(--night);
  color: var(--night-text);
}

.section--night::before,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(3rem, 11vw, 10rem);
  margin-bottom: -1px; /* no hairline gap on high-density screens */
  background: var(--night);
  -webkit-mask: url("/assets/shapes/ridge.svg") bottom / 100% 100% no-repeat;
  mask: url("/assets/shapes/ridge.svg") bottom / 100% 100% no-repeat;
}

.section--night h2 {
  color: var(--white);
}

.section--night .eyebrow {
  color: #b9dca0; /* soft logo green, 8.9:1 on night */
}

.section--night a {
  color: #a8d4f2;
}

.section--night a:hover {
  color: var(--white);
}

.section--night :focus-visible {
  outline-color: #a8d4f2;
}

.section__lead {
  max-width: 40rem;
  font-size: 1.125rem;
  color: var(--muted);
}

/* Story: the opening paragraph a step larger, as a way in. */
.intro .split__text h2 + p {
  font-size: 1.1875rem;
  line-height: 1.6;
}

.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

/* Phones and tablets: a comfortable line length, and side photos shorter so they
   don't take over the screen. */
.split__text,
.split__media,
.split__form {
  max-width: 40rem;
}

.split__media :is(.ph, .slides) {
  aspect-ratio: 3 / 2;
}

@media (min-width: 56rem) {
  :root {
    --section-y: 7rem;
  }

  .split {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 5rem;
  }

  .split__text,
  .split__media,
  .split__form {
    max-width: none;
  }

  .split--reverse .split__text {
    order: 2;
  }

  .split__media :is(.ph, .slides) {
    aspect-ratio: var(--ratio, 4 / 5);
  }

  .enquire .split {
    align-items: start;
  }
}

/* ---------- Highlights: a small green line icon beside each heading, no boxes ---------- */
.features {
  display: grid;
  gap: 0 2.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* Each highlight: a small green line icon in a white circle, left of the heading;
   the text sits under the heading. */
.feature {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1rem;
  grid-template-rows: auto 1fr;
  align-items: start;
  padding: 1.25rem 0;
}

.feature__icon {
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--green);
}

.feature .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.feature h3 {
  font-size: 1.25rem;
  margin: 0.625rem 0 0.3rem; /* centres the heading on the icon */
}

.feature p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
}

@media (min-width: 40rem) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .features {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem 3.5rem;
    margin-top: 3.5rem;
  }
}

/* ---------- Rooms ---------- */
.rooms {
  display: grid;
  gap: 2.75rem;
  margin: 2.5rem 0 2rem;
  padding: 0;
  list-style: none;
}

.room :is(.ph, .slides) {
  margin-bottom: 1.25rem;
}

.room h3 {
  margin-bottom: 0.3rem;
}

.room__meta {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cedar);
}

.room p:last-child {
  margin-bottom: 0;
}

.rooms + .note {
  margin: 0;
  padding-top: 1.5rem;
  padding-right: max(0px, calc(100% - 46rem));
  border-top: 1px solid var(--line);
}

/* Tablets: photo beside the text, so three full-width photos don't stack up. */
@media (min-width: 40rem) and (max-width: 55.99rem) {
  .room {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto auto 1fr;
    gap: 0 2rem;
    align-items: start;
  }

  .room :is(.ph, .slides) {
    grid-row: 1 / span 3;
    margin: 0;
  }

  .room > :not(.ph, .slides) {
    grid-column: 2;
  }
}

@media (min-width: 56rem) {
  .rooms {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
  }
}

/* ---------- Your stay: a ruled list rather than boxes ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 1.5rem;
  margin: 2rem 0;
}

.facts div {
  padding: 1rem 0 1.1rem;
  border-top: 1px solid var(--line-strong);
}

.facts dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cedar);
}

.facts dd {
  margin: 0.3rem 0 0;
  font-weight: 500;
  line-height: 1.45;
}

/* ---------- Rates ----------
   One white rate card split in two by a hairline, like a printed tariff: easy to compare,
   and it fills the content width instead of two small cards leaving a gap on the right. */
.rates {
  display: grid;
  margin: 2.5rem 0 1.75rem;
  padding: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.rate {
  padding: 1.75rem 1.5rem;
}

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

.rate h3 {
  margin-bottom: 0.15rem;
}

.rate__season {
  color: var(--muted);
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}

.rate__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 0.4em;
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 1.5rem;
  color: var(--ink);
}

.rate__price::after {
  content: "/ person / night";
  white-space: nowrap;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.rate__note {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--muted);
}

.rates + .note {
  max-width: 46rem;
}

@media (min-width: 40rem) {
  .rates {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 3rem;
  }

  .rate {
    padding: 2.5rem 2.5rem 2.25rem;
  }

  .rate + .rate {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

@media (min-width: 64rem) {
  .rate {
    padding: 3rem 3.5rem 2.75rem;
  }

  .rate__price {
    font-size: 3.25rem;
  }
}

/* ---------- Reviews (on the night band) ---------- */
.quotes {
  display: grid;
  gap: 2rem;
  margin: 2.5rem 0 2.5rem;
  padding: 0;
  list-style: none;
}

.quote {
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}

.quote blockquote {
  flex: 1;
  margin: 0 0 1.25rem;
  font-family: var(--font-quote);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--white);
}

.quote blockquote p {
  margin: 0;
}

/* The opening mark hangs in the margin so the words line up with the rule above. */
.quote blockquote p {
  text-indent: -0.42em;
}

.quote blockquote p::before {
  content: "\201C";
}

.quote blockquote p::after {
  content: "\201D";
}

.quote__who {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--night-text);
}

@media (min-width: 56rem) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 3rem;
  }

  .quote blockquote {
    font-size: 1.5rem;
  }
}

/* ---------- Location ---------- */
.address {
  font-style: normal;
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--line-strong);
  line-height: 1.7;
}

/* ---------- FAQ: heading on the left, questions on the right on wide screens ---------- */
@media (min-width: 56rem) {
  .faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 5rem;
    align-items: start;
  }

  .faq-layout .faq {
    margin-top: 0;
  }
}

/* ---------- FAQ: native details/summary, no JavaScript ---------- */
.faq {
  margin-top: 2rem;
  border-top: 1px solid var(--line-strong);
}

.faq details {
  border-bottom: 1px solid var(--line-strong);
}

.faq summary {
  position: relative;
  padding: 1.25rem 2.75rem 1.25rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary:hover {
  color: var(--blue);
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Plus that turns into a minus, drawn with two thin bars. */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.875rem;
  height: 1.5px;
  background: var(--blue);
  transition: transform 0.2s ease;
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq details p {
  max-width: 40rem;
  margin: 0 0 1.5rem;
  color: var(--muted);
}

/* ---------- Enquiry form ---------- */
.split__form {
  padding: 1.5rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form {
  display: grid;
  gap: 1.1rem;
}

.form__pair {
  display: grid;
  gap: 1.1rem;
}

/* Adults and children: short numbers, side by side even on small phones. */
.form__pair--numbers {
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 30rem) {
  .split__form {
    padding: 2.25rem;
  }

  .form__pair {
    grid-template-columns: 1fr 1fr;
  }
}

.form__row {
  display: grid;
  gap: 0.4rem;
}

.form label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.form__hint {
  font-weight: 400;
  color: var(--muted);
}

.form input,
.form textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid #7d8a94; /* 3.5:1 against white, as form borders need */
  border-radius: var(--radius-sm);
  font: inherit;
  color: inherit;
  background: var(--white);
}

.form input:hover,
.form textarea:hover {
  border-color: var(--ink);
}

.form input:focus-visible,
.form textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--blue);
}

.form button {
  justify-self: start;
  margin-top: 0.5rem;
}

.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  margin-top: 10rem; /* room for the ridge */
  padding: 4rem 0 2rem;
  background: var(--night);
  color: var(--night-text);
  font-size: 0.9375rem;
}

.site-footer a {
  color: var(--white);
  text-decoration-color: rgb(255 255 255 / 0.4);
}

.site-footer a:hover {
  color: var(--white);
  text-decoration-color: currentColor;
}

.site-footer :focus-visible {
  outline-color: #a8d4f2;
}

.site-footer__inner {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* The round logo signs off the page, on the solid night blue. */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

@media (min-width: 30rem) {
  .site-footer__brand {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
}

.site-footer__logo {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--white);
}

.site-footer__name {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.site-footer__inner p:last-child {
  margin-bottom: 0;
}

.site-footer__small {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 0.8125rem;
  color: #aab4ba; /* 6.6:1 on night */
}

@media (min-width: 40rem) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .site-footer__inner > div:last-child {
    text-align: right;
  }
}

/* ---------- Mountains through the page ----------
   The same ridgeline (scripts/ridge.py) used quietly: faint behind the hero text, tone-on-tone
   on the top edge of the frost sections, and a second, paler range behind the footer's. */

/* Hero: a pale ridge that fades into the page below the text. The photo sits above it. */
.hero {
  position: relative;
  padding-bottom: clamp(3rem, 9vw, 8rem);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(4rem, 12vw, 11rem);
  background: linear-gradient(180deg, #dfe8ee 30%, rgb(247 249 251 / 0));
  -webkit-mask: url("/assets/shapes/ridge.svg") bottom / 100% 100% no-repeat;
  mask: url("/assets/shapes/ridge.svg") bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.hero__inner,
.hero__photo {
  position: relative;
  z-index: 1;
}

@media (min-width: 64rem) {
  .hero {
    padding-bottom: 0;
  }
}

/* Frost sections: the top edge is a soft ridge in the section's own colour, mirrored so it
   doesn't repeat the reviews band. */
.section--tint {
  position: relative;
  margin-top: clamp(1.5rem, 5vw, 4.5rem);
}

.section--tint::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(1.5rem, 5vw, 4.5rem);
  margin-bottom: -1px;
  background: var(--linen);
  transform: scaleX(-1);
  -webkit-mask: url("/assets/shapes/ridge.svg") bottom / 100% 100% no-repeat;
  mask: url("/assets/shapes/ridge.svg") bottom / 100% 100% no-repeat;
}

/* Footer: a paler, taller range behind the dark one, like mountains further away. */
.site-footer {
  z-index: 0;
  margin-top: clamp(5rem, 16vw, 14rem);
}

.site-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(4.5rem, 16vw, 14rem);
  background: #c5d3dd;
  transform: scaleX(-1);
  -webkit-mask: url("/assets/shapes/ridge.svg") bottom / 100% 100% no-repeat;
  mask: url("/assets/shapes/ridge.svg") bottom / 100% 100% no-repeat;
}


/* ---------- Photo slideshows (macros/photo.njk) ----------
   No JavaScript: the photos are stacked and cross-fade with CSS, about 6 seconds each. The first
   photo shows on its own if motion is reduced. */
.slides {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 3);
  margin: 0;
  overflow: hidden;
  background: var(--stone);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation-delay: calc(var(--i) * 6s - 1.2s) !important;
  animation-fill-mode: backwards;
}

.slide--first {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

@keyframes slides-2 {
  0% { opacity: 0; }
  10.00% { opacity: 1; }
  50.00% { opacity: 1; }
  60.00% { opacity: 0; }
  100% { opacity: 0; }
}

.slides[data-n="2"] .slide {
  animation: slides-2 12s linear infinite;
}

@keyframes slides-3 {
  0% { opacity: 0; }
  6.67% { opacity: 1; }
  33.33% { opacity: 1; }
  40.00% { opacity: 0; }
  100% { opacity: 0; }
}

.slides[data-n="3"] .slide {
  animation: slides-3 18s linear infinite;
}

@keyframes slides-4 {
  0% { opacity: 0; }
  5.00% { opacity: 1; }
  25.00% { opacity: 1; }
  30.00% { opacity: 0; }
  100% { opacity: 0; }
}

.slides[data-n="4"] .slide {
  animation: slides-4 24s linear infinite;
}

@keyframes slides-5 {
  0% { opacity: 0; }
  4.00% { opacity: 1; }
  20.00% { opacity: 1; }
  24.00% { opacity: 0; }
  100% { opacity: 0; }
}

.slides[data-n="5"] .slide {
  animation: slides-5 30s linear infinite;
}

@keyframes slides-6 {
  0% { opacity: 0; }
  3.33% { opacity: 1; }
  16.67% { opacity: 1; }
  20.00% { opacity: 0; }
  100% { opacity: 0; }
}

.slides[data-n="6"] .slide {
  animation: slides-6 36s linear infinite;
}

@keyframes slides-7 {
  0% { opacity: 0; }
  2.86% { opacity: 1; }
  14.29% { opacity: 1; }
  17.14% { opacity: 0; }
  100% { opacity: 0; }
}

.slides[data-n="7"] .slide {
  animation: slides-7 42s linear infinite;
}

@keyframes slides-8 {
  0% { opacity: 0; }
  2.50% { opacity: 1; }
  12.50% { opacity: 1; }
  15.00% { opacity: 0; }
  100% { opacity: 0; }
}

.slides[data-n="8"] .slide {
  animation: slides-8 48s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .slide {
    animation: none !important;
  }
}

/* ---------- Area map (partials/area-map.svg, from OpenStreetMap) ---------- */
.map {
  margin: 1.75rem 0;
}

.area-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.map figcaption {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.m-bg { fill: #f3f6f8; }
.m-ski { fill: #e2eaf0; }
.m-river { fill: none; stroke: #9ccbe6; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.m-minor-case, .m-tert-case, .m-trunk-case { fill: none; stroke: #c9d4dc; stroke-linecap: round; stroke-linejoin: round; }
.m-minor-case { stroke-width: 5; }
.m-tert-case { stroke-width: 8; }
.m-trunk-case { stroke: #9aabb8; stroke-width: 12; }
.m-minor, .m-tertiary, .m-trunk { fill: none; stroke: #ffffff; stroke-linecap: round; stroke-linejoin: round; }
.m-minor { stroke-width: 3; }
.m-tertiary { stroke-width: 5.5; }
.m-trunk { stroke-width: 8.5; }
.m-rail-case { fill: none; stroke: #475661; stroke-width: 5; }
.m-rail { fill: none; stroke: #ffffff; stroke-width: 3; stroke-dasharray: 12 12; }
.m-gondola { fill: none; stroke: #475661; stroke-width: 2; stroke-dasharray: 3 6; }
.m-area { fill: #5f6f7a; font: 700 22px var(--font); letter-spacing: 0.14em; }
.m-label { fill: var(--ink); font: 600 24px var(--font); paint-order: stroke; stroke: #f3f6f8; stroke-width: 6px; stroke-linejoin: round; }
.m-place { fill: var(--night); }
.m-station { fill: #ffffff; stroke: var(--night); stroke-width: 4; }
.m-home-ring { fill: #ffffff; }
.m-home { fill: var(--green); }
.m-home-label { fill: var(--night); font: 800 30px var(--font); paint-order: stroke; stroke: #ffffff; stroke-width: 8px; stroke-linejoin: round; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* Hero on wide screens: the photo fills the whole right side of the hero, from the header down
   to the bottom of the section, so it's locked to the text column beside it. (The slideshow's own
   aspect ratio would otherwise leave a gap under it.) */
@media (min-width: 64rem) {
  .hero .slides.hero__photo {
    aspect-ratio: auto;
    height: 100%;
    min-height: 100%;
    align-self: stretch;
  }
}

/* Hero on wide screens: a frost band with a mountain ridge, in the page colour, cut across its
   bottom edge, through the text side and the photo, so the photo is part of the band instead of
   sitting on top of the page. */
@media (min-width: 64rem) {
  .hero {
    --hero-ridge: clamp(4rem, 7vw, 7rem);
    background: var(--linen);
  }

  .hero::after {
    z-index: 2;
    bottom: -1px;
    height: var(--hero-ridge);
    background: var(--paper);
  }

  .hero__inner {
    padding-bottom: calc(var(--hero-ridge) + 2rem);
  }

  .hero .rating {
    border-top-color: var(--line-strong);
  }
}

/* Location on wide screens: the text column is long (map, address), so the photos line up with
   the top of the heading and stay in view while the text scrolls past, instead of floating in the
   middle of the gap. */
@media (min-width: 56rem) {
  #location .split {
    align-items: start;
  }

  #location .split__media {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* Keeps a hyphenated phrase on one line. */
.nowrap {
  white-space: nowrap;
}

/* Text for screen readers only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}