/* ==========================================================================
   Fossnes Grendehus
   Single stylesheet. No build step, no preprocessor, no framework.
   Palette sampled directly from references/figma-homepage.png.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subset, variable)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfairdisplay-latin.woff2') format('woff2-variations');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour.
     The reference values were sampled at L* 7 to 14. Hue is not perceivable
     down there, so they read as black however green they are in the file.
     These sit at L* 14 to 37 with roughly twice the chroma, which reads as
     forest green and still clears AAA against the text on top of it. */
  --ink-900: #1b2715;
  --ink-800: #22301c;
  --ink-700: #2e4024;
  --ink-600: #4d5c42;

  --paper: #f5f3ee;
  --paper-sunk: #ece9e1;
  --line: #dcd7cc;
  --line-strong: #c2bcae;

  --text: #1a2018;
  --text-muted: #545c52;
  --on-dark: #e9e5dd;
  --on-dark-muted: #b3b8a8;

  --accent: #344727;
  --accent-hover: #435c31;
  --on-accent: #f5f3ee;
  /* The accent is too dark to read as an accent on a dark ground. This is the
     same hue lifted to sit on ink. */
  --accent-light: #a8c47c;

  /* Brass. The one warm colour, and the only non-green in the palette, so it
     is spent only where warmth or a user's own action needs marking: the
     hero call to action, eyebrows on dark ground, and the selected date.
     Never on Opptatt or Ledig, which must stay unambiguous. */
  --brass: #d9ab63;
  --brass-on-dark: #e0b46e;
  --on-brass: #241a08;

  --field-bg: #fdfcfa;

  /* Focus ring. Overridden on dark surfaces so it always clears 3:1. */
  --focus-ring: var(--accent);

  /* Type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: 0.875rem;
  --step-0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-1: clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.24rem + 0.68vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --step-4: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
  --step-5: clamp(2.75rem, 1.3rem + 6.4vw, 6rem);

  /* Space, 4px base */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --s10: 8rem;

  /* Layout */
  --container: 72rem;
  --measure: 40rem;
  --radius: 4px;
  --header-h: 4.5rem;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

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

/* The browser's own [hidden] rule is a user-agent style, so any author rule
   that sets display beats it. .avail__layout { display: grid } silently
   un-hid the calendar shell that way, leaving an empty grid on screen when
   the calendar failed to load. An empty grid reads as "every date is free",
   which is the one thing this site must never say. Keep this rule. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s4));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
  /* Norwegian compounds are long: "Personvernerklæring" alone is wider than a
     320px line at heading size. Without this it forces the page sideways. */
  overflow-wrap: break-word;
}

/* On narrow screens, break those compounds at a hyphen rather than mid-word.
   Only takes effect when a word genuinely does not fit. */
@media (max-width: 30em) {
  h1,
  h2,
  h3 {
    hyphens: auto;
  }
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p,
ul,
ol,
dl,
table {
  margin: 0 0 var(--s4);
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong { font-weight: 600; }

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

/* Skip link */
.skip {
  position: absolute;
  left: var(--s4);
  top: var(--s4);
  z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--paper);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s5);
}

@media (min-width: 48em) {
  .wrap { padding-inline: var(--s6); }
}

.section {
  padding-block: var(--s8);
}

@media (min-width: 48em) {
  .section { padding-block: var(--s9); }
}

/* A recessed band, used where a section is a task rather than reading matter. */
.section--sunk {
  background: var(--paper-sunk);
}

/* Task sections are packed tighter than reading sections. The editorial rhythm
   that suits prose turns a seven-field form into two screens of scrolling. */
.section--compact {
  padding-block: var(--s7);
}

/* For task sections, where a full editorial heading would compete with the
   page title instead of sitting under it. */
.section__head--compact {
  margin-bottom: var(--s5);
}

.section__head--compact h2 {
  font-size: var(--step-2);
  margin-bottom: var(--s3);
}

.section--dark {
  background: var(--ink-800);
  color: var(--on-dark);
  --focus-ring: var(--paper);
  --text-muted: var(--on-dark-muted);
  --line: var(--ink-600);
}

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--s6);
}

.section__head p {
  color: var(--text-muted);
  margin-bottom: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--s3);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
}

.more {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 500;
  margin-top: var(--s2);
}

.more::after {
  content: '\2192';
  transition: transform 150ms ease;
}

.more:hover::after {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 3rem;
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn--secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--secondary:hover {
  border-color: var(--text);
}

/* On a dark ground */
.on-dark .btn--secondary,
.section--dark .btn--secondary,
.hero .btn--secondary {
  border-color: rgba(233, 229, 221, 0.45);
  color: var(--on-dark);
}

.on-dark .btn--secondary:hover,
.section--dark .btn--secondary:hover,
.hero .btn--secondary:hover {
  border-color: var(--on-dark);
  background: rgba(233, 229, 221, 0.08);
}

/* One rule, applied consistently: the primary button inverts against its
   ground. Green on paper, brass on ink. The green fill on the dark header bar
   was dark-on-dark, so the button read as a soft blob instead of a control
   while still outshouting the page heading below it. Paper-on-ink fixed that
   but left the page with no warm colour anywhere. */
.hero .btn--primary,
.site-header .btn--primary {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--on-brass);
}

.hero .btn--primary:hover,
.site-header .btn--primary:hover {
  background: #e6bc78;
  border-color: #e6bc78;
}

/* In the header it is a navigation control, not a hero call to action, so it
   sits at the same weight as the links beside it. */
.site-header__actions .btn {
  min-height: 2.5rem;
  padding-inline: var(--s4);
  font-size: 0.9375rem;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* --------------------------------------------------------------------------
   6. Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink-900);
  color: var(--on-dark);
  --focus-ring: var(--paper);
  /* A hairline so the bar is a defined band rather than dark bleeding into
     the dark page header beneath it. */
  border-bottom: 1px solid rgba(233, 229, 221, 0.1);
  transition: background-color 200ms ease, border-color 200ms ease;
}

/* Homepage only: sit transparently over the hero until scrolled. */
.site-header--over {
  background: transparent;
  border-bottom-color: transparent;
}

.site-header--over.is-stuck {
  background: var(--ink-900);
  border-bottom-color: rgba(233, 229, 221, 0.1);
}

/* Two masses, not three. `space-between` across wordmark, links and button
   spreads them into three unrelated gaps with the links floating in the middle
   attached to nothing. Pushing everything but the wordmark to the right gives
   one identity on the left, one navigation cluster on the right, and a single
   deliberate space between them. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s6);
  min-height: var(--header-h);
}

.site-header__inner > .wordmark {
  margin-right: auto;
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Links sit one step back from the wordmark so the name stays dominant and the
   bar reads as one quiet cluster rather than four competing labels. */
.nav__link {
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  text-decoration: none;
  padding-block: var(--s2);
  transition: color 150ms ease;
}

.nav__link:hover {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 1px;
}

/* Current page is marked by weight and a coloured rule, not by the same
   underline hover uses, so the two states stay distinguishable. */
.nav__link[aria-current='page'] {
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--accent-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.nav .btn {
  min-height: 2.75rem;
  padding-inline: var(--s4);
  font-size: 1rem;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}

.u-sm-only { display: none; }

/* The primary action inside the mobile menu panel. Hidden on desktop, where
   the header carries it instead. */
.nav__cta { display: none; }

/* Below 48em a wordmark, a four-word button and a menu button do not fit on
   one row: at 320px they overflow by nearly 60px. Rather than shrinking the
   label to something vague, the header keeps the wordmark and the menu button,
   and the primary action moves to the top of the menu panel. Every page also
   carries the same action in its content, so it is never more than one tap
   away. */
@media (max-width: 47.9375em) {
  .u-md-up { display: none; }
  .u-sm-only { display: inline; }

  .wordmark { font-size: 1.0625rem; }

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

  .nav__cta {
    display: flex;
    width: 100%;
    margin-top: var(--s5);
  }
}

/* Narrowest phones: the menu button drops to the icon alone. The label stays
   in the accessibility tree as the button's name. */
@media (max-width: 22.5em) {
  .nav__toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--s2);
  min-height: 2.75rem;
  padding: var(--s2) var(--s3);
  background: transparent;
  border: 1px solid rgba(233, 229, 221, 0.45);
  border-radius: var(--radius);
  color: var(--on-dark);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.nav__toggle-bars {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  position: relative;
}

.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after { top: 6px; }

/* Mobile navigation */
@media (max-width: 61.9375em) {
  .nav__toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--s5);
    background: var(--ink-900);
    overflow-y: auto;
  }

  .nav.is-open { display: flex; }

  .nav__close {
    align-self: flex-end;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: var(--s2) var(--s3);
    background: transparent;
    border: 1px solid rgba(233, 229, 221, 0.45);
    border-radius: var(--radius);
    color: var(--on-dark);
    font: inherit;
    cursor: pointer;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-block: var(--s6);
  }

  .nav__list li + li {
    border-top: 1px solid var(--ink-700);
  }

  .nav__link {
    display: block;
    padding-block: var(--s4);
    font-size: var(--step-1);
  }

  .nav .btn {
    min-height: 3.25rem;
    font-size: var(--step-0);
  }
}

@media (min-width: 62em) {
  .nav__close { display: none; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 34rem;
  min-height: min(88svh, 46rem);
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  background: var(--ink-800);
  color: var(--on-dark);
  --focus-ring: var(--paper);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* The building stands in forest. It used to be grayscale(1) brightness(0.62),
     which threw that away and left a silhouette. Contrast is the scrim's job,
     not the photograph's. */
  filter: saturate(1.08) brightness(0.88);
}

/* Scrim. Text contrast must not depend on how dark the photo happens to be,
   so this is heavy at the bottom where the text sits and nearly clear at the
   top where there is nothing to read. Tinted with ink-900 rather than black,
   so the darkening deepens the green instead of draining it. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* 1. Under the header. The nav sits transparently over the photo until
          the page scrolls, and the sky behind it is the brightest thing in
          the frame. Without this the links wash out. */
    linear-gradient(to bottom,
      rgba(27, 39, 21, 0.62) 0,
      rgba(27, 39, 21, 0.30) 7rem,
      rgba(27, 39, 21, 0) 13rem),
    /* 2. Under the text column. Darkening the side the words are on rather
          than the whole frame is what lets the building stay lit. */
    linear-gradient(to right,
      rgba(27, 39, 21, 0.93) 0%,
      rgba(27, 39, 21, 0.82) 34%,
      rgba(27, 39, 21, 0.40) 62%,
      rgba(27, 39, 21, 0.08) 88%),
    /* 3. A little weight at the foot, so the hero settles into the page. */
    linear-gradient(to top,
      rgba(27, 39, 21, 0.55) 0%,
      rgba(27, 39, 21, 0.12) 55%,
      rgba(27, 39, 21, 0) 100%);
}

/* Narrow screens have no room for a text column, so the text runs the full
   width and the side gradient cannot protect it. Fall back to weighting the
   bottom, where the text is. */
@media (max-width: 48em) {
  .hero__media::after {
    background:
      linear-gradient(to bottom,
        rgba(27, 39, 21, 0.78) 0,
        rgba(27, 39, 21, 0.42) 7rem,
        rgba(27, 39, 21, 0) 12rem),
      linear-gradient(to top,
        rgba(27, 39, 21, 0.93) 0%,
        rgba(27, 39, 21, 0.80) 45%,
        rgba(27, 39, 21, 0.45) 100%);
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--s8) var(--s9);
}

.hero__content {
  max-width: 46rem;
}

.hero .eyebrow {
  color: var(--brass-on-dark);
}

/* On a flat surface these can be muted. On a photograph they cannot: measured
   against the brightest pixel each one actually covers, the muted greys came
   in at 2.9:1 and 3.6:1 where small text needs 4.5:1. */
.hero__note {
  color: var(--on-dark);
}

.hero h1 {
  margin-bottom: var(--s5);
}

.hero__sub {
  font-size: var(--step-2);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: var(--s4);
  max-width: 34rem;
}

.hero__note {
  color: var(--on-dark-muted);
  max-width: 32rem;
  margin-bottom: var(--s6);
}

/* --------------------------------------------------------------------------
   8. Availability calendar
   -------------------------------------------------------------------------- */

.avail {
  background: var(--paper-sunk);
}

.avail__disclaimer {
  max-width: var(--measure);
  margin: 0 0 var(--s6);
  padding-left: var(--s4);
  border-left: 3px solid var(--line-strong);
  color: var(--text-muted);
}

.avail__layout {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 62em) {
  .avail__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: var(--s7);
    align-items: start;
  }
}

.cal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Padding is tight on purpose below 48em: seven columns plus generous card
     padding drops each day cell under the 44px touch target. Giving the width
     back to the grid gets cells to 44px from about 390px upward. Narrower than
     that, seven columns simply cannot reach 44px, so cell height carries the
     target size instead. */
  padding: var(--s2) var(--s2) var(--s3);
}

@media (min-width: 40em) {
  .cal { padding: var(--s4); }
}

@media (min-width: 48em) {
  .cal { padding: var(--s5); }
}

.cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.cal__month {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: 0;
  text-align: center;
  flex: 1;
}

.cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.cal__nav:hover:not([disabled]) {
  border-color: var(--text);
  background: var(--paper-sunk);
}

.cal__nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.cal__weekdays span {
  padding-block: var(--s2);
  text-align: center;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
}

.cal__grid {
  display: grid;
  gap: 2px;
}

.cal__row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 3rem;
  padding: var(--s2) 0 calc(var(--s2) + 4px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

@media (min-width: 48em) {
  .cal__day { min-height: 3.5rem; }
}

.cal__day:hover:not([disabled]) {
  border-color: var(--text);
}

.cal__day[disabled] {
  background: transparent;
  border-color: transparent;
  color: var(--line-strong);
  cursor: default;
}

.cal__day--blank {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

/* Occupied. Distinguished by fill AND a marker, never by colour alone. */
.cal__day--opptatt {
  background: var(--ink-700);
  border-color: var(--ink-700);
  color: var(--on-dark);
}

.cal__day--opptatt:hover {
  background: var(--ink-800);
  border-color: var(--ink-800);
}

.cal__mark {
  display: block;
  width: 1rem;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.75;
}

.cal__day--today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* The date the visitor picked. Brass rather than a third green: Opptatt is
   already dark green and Ledig is paper, and once the palette lifted, the old
   accent fill sat at 1.11:1 against the Opptatt fill beside it, which is
   invisible. The ring carries the distinction even where the fill does not,
   since brass against paper is only 1.9:1 by lightness. */
.cal__day[aria-pressed='true'],
.cal__day--selected {
  background: var(--brass);
  border-color: var(--ink-900);
  box-shadow: inset 0 0 0 2px var(--ink-900);
  color: var(--on-brass);
}

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin: var(--s4) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.cal__legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.cal__swatch {
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  flex: none;
}

.cal__swatch--opptatt {
  background: var(--ink-700);
  border-color: var(--ink-700);
}

/* Selected-date panel */
.cal-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
}

.cal-panel h3 {
  font-size: var(--step-2);
  margin-bottom: var(--s3);
}

.cal-panel p {
  color: var(--text-muted);
  margin-bottom: var(--s5);
}

.cal-panel__status {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: var(--s1) var(--s3);
  border-radius: 2px;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cal-panel__status--opptatt {
  background: var(--ink-700);
  color: var(--on-dark);
}

.cal-panel__status--ledig {
  background: var(--paper-sunk);
  color: var(--text);
  border: 1px solid var(--line-strong);
}

.cal-panel--placeholder {
  color: var(--text-muted);
}

/* Fallback when the calendar cannot be read */
.avail__fallback {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s5);
  max-width: var(--measure);
}

.avail__fallback h3 {
  font-size: var(--step-2);
}

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

/* --------------------------------------------------------------------------
   9. Rooms
   -------------------------------------------------------------------------- */

.rooms {
  display: grid;
  gap: var(--s7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.room {
  display: grid;
  gap: var(--s4);
  align-items: start;
}

@media (min-width: 48em) {
  .room {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--s6);
  }
}

@media (min-width: 62em) {
  .room {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: var(--s7);
  }
}

.room__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper-sunk);
}

.room__body h3 {
  margin-bottom: var(--s2);
}

.room__capacity {
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--accent);
  margin-bottom: var(--s3);
}

.section--dark .room__capacity {
  color: var(--on-dark);
}

.room__body p {
  color: var(--text-muted);
}

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

/* Compact overview used on the homepage. Deliberately not cards: no border,
   no shadow, no padded box. Just image, name, capacity and one line. */
.room-grid {
  display: grid;
  gap: var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s7) var(--s6);
  }
}

.room-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper-sunk);
}

.room-grid h3 {
  font-size: var(--step-2);
  margin: var(--s4) 0 var(--s1);
}

.room-grid p {
  color: var(--text-muted);
  margin-bottom: 0;
}

.room-grid .room__capacity {
  margin-bottom: var(--s2);
  font-size: var(--step-0);
}

.facts {
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--s5);
  font-size: 1rem;
  color: var(--text-muted);
}

.facts li {
  break-inside: avoid;
  padding-block: 2px;
}

/* --------------------------------------------------------------------------
   10. Tables (prices)
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--s4);
  /* Left to fill the 72rem container, a three-column price table put the room
     name and its price over a thousand pixels apart, which breaks the one
     association the table exists to make. */
  max-width: 48rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: var(--s3);
}

th,
td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}

thead th {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}

td:last-child,
th:last-child {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
}

/* Row headers are `th`, so a rule naming only `td` left a stub of border under
   the first column of the last row. */
tbody tr:last-child td,
tbody tr:last-child th {
  border-bottom: none;
}

.price {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. Prose pages
   -------------------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
}

.prose h2 {
  font-size: var(--step-3);
  margin-top: var(--s7);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: var(--step-1);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: var(--s2);
}

.prose li::marker {
  color: var(--text-muted);
}

.page-head {
  padding-block: var(--s7) var(--s6);
  background: var(--ink-800);
  color: var(--on-dark);
  --focus-ring: var(--paper);
}

@media (min-width: 48em) {
  .page-head { padding-block: var(--s8) var(--s7); }
}

.page-head h1 {
  font-size: var(--step-4);
  margin-bottom: var(--s3);
}

.page-head p {
  color: var(--on-dark-muted);
  margin-bottom: 0;
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   12. Contact details
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 48em) {
  .contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--s7);
  }
}

.contact-block h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s3);
}

.contact-block p,
.contact-block address {
  font-style: normal;
  margin-bottom: 0;
}

.contact-block a {
  font-size: var(--step-1);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   13. Form
   -------------------------------------------------------------------------- */

.form {
  max-width: 46rem;
}

/* Two real groups. The split is not decoration: the first half is who you are,
   the second is what you are asking for, and a volunteer reading the email
   needs both. */
.form__group {
  border: 0;
  margin: 0 0 var(--s5);
  padding: 0;
  min-width: 0;
}

.form__group > legend {
  padding: 0;
  margin-bottom: var(--s3);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form__grid {
  display: grid;
  gap: var(--s3) var(--s5);
}

@media (min-width: 40em) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* Date, type and guest count are all short answers, so they fit one row and
   save the form a whole row plus the orphaned half-row beside it. */
@media (min-width: 48em) {
  .form__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.field {
  margin-bottom: var(--s4);
  min-width: 0;
}

.form__grid > .field {
  margin-bottom: 0;
}

/* Labels drop off the body scale. At 17px+ with prose line-height they added
   roughly 20px of height to every single row for no gain in legibility. */
.field > label {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 0.375rem;
}

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

/* Help text sits under the input, not inside the label. Inside the label it
   made that label two lines tall, which pushed its input out of line with the
   single-line field beside it in the grid. */
.field__hint {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: var(--s1);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  /* 44px exactly: the touch-target floor, and not a pixel of decoration on
     top of it. */
  min-height: 2.75rem;
  padding: var(--s2) var(--s3);
  line-height: 1.4;
  /* A shade lighter than the page, not the same value. At --paper on
     --paper-sunk the fields disappeared into the background and read as
     outlines rather than as somewhere to type. */
  background: var(--field-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
}

/* Field width is a hint about the expected answer. A guest count does not
   want the same box as a postal address. */
.field--short input {
  max-width: 9rem;
}

.field select {
  padding-right: var(--s7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23545c52' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  border-color: var(--accent);
}

.field--invalid input,
.field--invalid textarea,
.field--invalid select {
  border-color: #8a2f21;
  border-width: 2px;
}

.field__error {
  display: block;
  margin-top: var(--s2);
  color: #7d2b1e;
  font-size: 1rem;
  font-weight: 500;
}

.field--check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  max-width: 34rem;
  margin-bottom: var(--s4);
}

.field--check input {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin-top: 0.15rem;
  padding: 0;
  accent-color: var(--accent);
}

.field--check label {
  margin-bottom: 0;
  font-weight: 400;
}

.field--check .field__error {
  grid-column: 1 / -1;
}

/* Honeypot. Hidden from people, reachable by naive bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  margin-bottom: var(--s5);
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--paper-sunk);
}

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

.form__status--error {
  border-color: #8a2f21;
}

.form-done h2 {
  font-size: var(--step-3);
}

/* --------------------------------------------------------------------------
   14. Notice banner (ships disabled, see README)
   -------------------------------------------------------------------------- */

.notice {
  background: var(--accent);
  color: var(--on-accent);
  --focus-ring: var(--paper);
}

.notice p {
  max-width: none;
  margin: 0;
  padding-block: var(--s3);
  font-size: 1rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink-900);
  color: var(--on-dark);
  --focus-ring: var(--paper);
  padding-block: var(--s7);
}

.site-footer__grid {
  display: grid;
  gap: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--ink-700);
}

@media (min-width: 48em) {
  .site-footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--s7);
  }
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: var(--s3);
}

.site-footer address,
.site-footer p {
  font-style: normal;
  color: var(--on-dark);
  margin-bottom: 0;
  max-width: none;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li {
  margin-bottom: var(--s2);
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  padding-top: var(--s5);
  font-size: 1rem;
  color: var(--on-dark-muted);
}

.site-footer__meta p {
  color: inherit;
}

/* --------------------------------------------------------------------------
   16. Motion
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .more::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .hero__media,
  .cal__nav,
  .btn {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .section {
    padding-block: 1rem;
  }
}