/*
 * Generated from documentation/design/general-countryside/styles.css by `pnpm design:sync` (INC-36d). Edit the design
 * package and run the sync; a change made here is overwritten.
 */

/*
 * general/countryside — "Almanac"
 *
 * The theme layer. `../shared/site.css` carries the structure every theme gets; this file carries the
 * voice: an estate in the fields, told through its year. The opening is a film of the estate in four
 * seasons, the season named under it as it passes; photographs are set as framed plates, like the estate's
 * windows and barn doors; sections are parted by furrows, the field rows outside; the estate's seal
 * turns slowly in a corner. Oat paper, moss ink, rye gold, a meadow green for calm sections, the moss
 * of evening for the dark ones, brick red for *Book*.
 *
 * It is the design-package counterpart of `src/themes/general/countryside/theme.css`.
 */

:root {
  --measure: 78rem;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --header-h: 4.75rem;
  /* Rye gold for the furrows and small marks, and the meadow for calm sections;
  both from tokens. */
  /* stylelint-disable-next-line color-no-hex -- rye gold, the theme's own colour beside the hotel's */
  --rye: color-mix(in srgb, var(--color-cta) 18%, #c9a24a);
  --meadow: color-mix(in srgb, var(--color-accent) 16%, var(--color-background));
}

/* ============ the voice ============ */
body {
  font-size: var(--step-0);
}
h1,
h2,
h3,
.menu-grid a {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
}
h1 em,
h2 em,
h3 em,
.al-em {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.kicker,
.sc,
.section-label {
  font-variant: normal;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-accent);
}
.btn {
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-4);
  min-block-size: 2.85rem;
}
.btn.line {
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.link {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--rye);
}
.link:hover {
  text-decoration-color: currentColor;
}

/* Section headings: the display face, the italic turn in moss, a rye tick before the kicker. */
.sec-head {
  border: 0;
  padding: 0;
  margin-block-end: var(--space-5);
  align-items: end;
}
.sec-head h2 {
  font-size: clamp(var(--step-3), 4.4vw, var(--step-5));
  line-height: 1.02;
}
.sec-head h2 em {
  color: var(--color-accent);
}
.sec-head p {
  color: var(--color-muted-text);
  max-inline-size: 40ch;
}
.kicker::before {
  content: '';
  display: inline-block;
  inline-size: 1.4rem;
  block-size: 2px;
  background: var(--rye);
  vertical-align: middle;
  margin-inline-end: var(--space-1);
}

/* ============ the estate's marks: plates, furrows, the seal ============ */
.al-arch {
  /* A plate, as in an old almanac: evenly rounded, a thin frame line just outside it — never an arch
     on a flat foot (the user's rule, 2026-10-12). */
  border-radius: calc(var(--radius) * 2);
  outline: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  outline-offset: 5px;
  overflow: clip;
}
.al-arch img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
a:hover .al-arch img,
.al-arch:hover img {
  transform: scale(1.05);
}
/* Field rows as a divider: a band of furrows running away from you. */
.al-furrows {
  block-size: 2.2rem;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 5px,
      color-mix(in srgb, var(--rye) 70%, transparent) 5px 6.5px
    ),
    linear-gradient(180deg, transparent, transparent);
  mask: linear-gradient(
    90deg,
    transparent,
    var(--color-text) 12%,
    var(--color-text) 88%,
    transparent
  );
  opacity: 0.8;
}
.al-seal {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 7.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-surface-raised);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--color-inverted) 70%, transparent);
}
.al-seal svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  animation: turn 40s linear infinite;
}
.al-seal text {
  font-family: var(--font-body);
  font-size: 9.2px;
  font-weight: 700;
  letter-spacing: 2.4px;
  fill: currentColor;
}
.al-seal > span {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.05;
  text-align: center;
}
.al-seal:hover {
  background: var(--color-cta);
  color: var(--color-on-cta);
}
@keyframes turn {
  to {
    transform: rotate(1turn);
  }
}

/* ============ header: lying on the film, oat paper on the page ============ */
header.main.al-head {
  position: fixed;
  inset-inline: 0;
  background: color-mix(in srgb, var(--color-background) 95%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--color-border);
  transition:
    background var(--duration-long) var(--ease),
    color var(--duration-long) var(--ease),
    border-color var(--duration-long) var(--ease);
}
header.main.al-head[data-on-film] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-inverted) 60%, transparent),
    transparent
  );
  background-origin: border-box;
  backdrop-filter: none;
  border-block-end-color: transparent;
  color: var(--color-on-inverted);
}
.al-head .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  max-inline-size: none;
}
.al-head .head-start {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.al-head .brand {
  grid-column: 2;
  justify-self: center;
  gap: var(--space-2);
  font-family: var(--font-body);
}
.al-word {
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.38em;
}
/* A maple leaf, drawn with a mask so it takes the header's colour. */
.al-maple {
  inline-size: 1.5rem;
  aspect-ratio: 1;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l1.6 4.3 2.7-1.4-.9 4.2 3.7-2-1 3.6 3.9.4-3.2 3.1 1.8 1.6-4.6.6.4 2.6-3.5-1.6L12 23l-.9-6.2-3.5 1.6.4-2.6-4.6-.6 1.8-1.6L2 10.5l3.9-.4-1-3.6 3.7 2-.9-4.2 2.7 1.4z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.al-head .head-actions {
  justify-self: end;
}
.al-head .menu-toggle {
  border: 0;
  padding-inline: 0;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
}
.al-head .menu-toggle:hover {
  background: none;
  color: inherit;
  text-decoration: underline;
}
.langs {
  display: flex;
  gap: var(--space-2);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.langs a {
  text-decoration: none;
  opacity: 0.78;
}
.langs a[aria-current='true'] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.al-head[data-on-film] :focus-visible {
  outline-color: var(--color-on-inverted);
}

/* ============ the film: the estate's year ============ */
.al-film {
  --scrim-reach: 56%;
  position: relative;
  min-block-size: 100svh;
  display: grid;
  align-items: end;
  overflow: clip;
  isolation: isolate;
  background: var(--color-inverted);
  color: var(--color-on-inverted);
}
.al-film :is(video, .film-poster img) {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Words stand on the film only over this scrim: up to the top of the words it is never lighter than
   76% of the evening moss, so even a white frame (the winter frost) leaves the words at 5:1. */
.al-film::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--color-inverted) 88%, transparent) 0%,
      color-mix(in srgb, var(--color-inverted) 76%, transparent) var(--scrim-reach),
      transparent calc(var(--scrim-reach) + 22%)
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-inverted) 45%, transparent),
      transparent 24%
    );
}
.al-film > .wrap {
  inline-size: 100%;
  max-inline-size: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-5);
  padding-block: calc(var(--header-h) + var(--space-5)) 13.5rem;
}
.al-film .kicker {
  color: inherit;
}
.al-film h1 {
  font-size: clamp(var(--step-5), 10vw, calc(var(--step-5) * 2.5));
  line-height: 0.9;
  margin-block: var(--space-3) var(--space-4);
}
.al-film h1 em {
  display: block;
  font-size: 0.62em;
  color: color-mix(in srgb, var(--color-on-inverted) 92%, var(--rye));
}
.al-film .lede {
  font-size: var(--step-1);
  line-height: 1.45;
  max-inline-size: 32ch;
  color: color-mix(in srgb, var(--color-on-inverted) 92%, transparent);
}
/* The season reel: the four seasons, the one on screen named, its time running out under it. */
.al-seasons {
  display: grid;
  justify-items: end;
  gap: var(--space-3);
}
.al-reel {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(4.5rem, auto));
  gap: var(--space-2);
}
.al-reel li {
  display: grid;
  gap: var(--space-1);
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--step-1);
  color: color-mix(in srgb, var(--color-on-inverted) 70%, transparent);
  transition: color var(--duration-short) var(--ease);
}
.al-reel li[aria-current='true'] {
  color: var(--color-on-inverted);
}
.al-reel i {
  display: block;
  block-size: 2px;
  background: color-mix(in srgb, var(--color-on-inverted) 30%, transparent);
  position: relative;
  overflow: hidden;
}
.al-reel i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rye);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}
.al-play {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 1.5px solid color-mix(in srgb, var(--color-on-inverted) 60%, transparent);
  color: inherit;
  border-radius: var(--radius);
  min-block-size: 2.75rem;
  padding-inline: var(--space-3);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.al-play:hover {
  background: var(--color-on-inverted);
  color: var(--color-inverted);
}
.al-play .ico {
  inline-size: 0.55rem;
  block-size: 0.65rem;
  border-inline: 2px solid currentColor;
}
.al-play[aria-pressed='false'] .ico {
  border: 0;
  border-inline-start: 0.55rem solid currentColor;
  border-block: 0.33rem solid transparent;
}
.al-film :focus-visible {
  outline-color: var(--color-on-inverted);
}
.al-film .al-seal {
  position: absolute;
  inset-block-start: calc(var(--header-h) + var(--space-4));
  inset-inline-end: var(--gutter);
}

/* The booking search: oat paper on the film's lower edge, with a small arched tab. */
.al-dock {
  position: absolute;
  inset-inline: var(--gutter);
  inset-block-end: 0;
  z-index: 3;
  display: grid;
  justify-items: center;
}
.al-dock form {
  inline-size: min(100%, 62rem);
  display: grid;
  /* Arrival, departure, adults, children and the button on one line; the children's ages under it. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-4);
  background: var(--color-background);
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
  color: var(--color-text);
  position: relative;
}
.al-dock form::before {
  content: attr(data-tab);
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 50%;
  /* A label on the form's edge, round at both ends — not a tab with an arched top. */
  padding: var(--space-1) var(--space-4);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 999);
  transform: translate(-50%, 50%);
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--step-1);
  white-space: nowrap;
}
.al-dock .pk-label,
.al-dock label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 700;
}
.al-dock .pk-value {
  font-family: var(--font-display);
  font-size: var(--step-1);
}

/* ============ the landing's sections ============ */
.al-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-7) var(--space-6);
}
.al-intro .al-arch img {
  aspect-ratio: 4 / 5;
}
.al-intro h2 {
  font-size: clamp(var(--step-3), 4vw, var(--step-5));
  line-height: 1.02;
  margin-block: var(--space-3);
}
.al-intro h2 em {
  color: var(--color-accent);
}
.al-intro p {
  color: var(--color-muted-text);
  max-inline-size: 46ch;
}
.al-intro p + p {
  margin-block-start: var(--space-3);
}
.al-numbers {
  list-style: none;
  padding: 0;
  margin-block: var(--space-5) var(--space-4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--color-border);
}
.al-numbers li {
  padding: var(--space-3) var(--space-2);
  border-inline-start: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-0);
}
.al-numbers li:first-child {
  border-inline-start: 0;
}
.al-numbers b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1;
}
.al-numbers span {
  font-size: var(--step--1);
  color: var(--color-muted-text);
}

/* The almanac: the year in four tabs, opened at today's season. */
.al-almanac {
  background: var(--meadow);
  padding-block: var(--space-6) var(--space-7);
  position: relative;
}
.al-almanac > .al-furrows {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--space-3) * -1);
}
.al-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-block-end: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
  margin-block-end: var(--space-5);
}
.al-tabs [role='tab'] {
  background: none;
  border: 0;
  border-block-end: 3px solid transparent;
  padding: var(--space-2) var(--space-3);
  margin-block-end: -1px;
  min-block-size: 2.75rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--color-muted-text);
  cursor: pointer;
}
.al-tabs [role='tab'][aria-selected='true'] {
  color: var(--color-text);
  border-block-end-color: var(--color-accent);
}
.al-season {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-6);
  align-items: start;
}
.al-season.fade-in {
  animation: fade-up 600ms var(--ease) both;
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.al-season .al-arch img {
  aspect-ratio: 3 / 4;
}
.al-season .months {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--color-accent);
}
.al-season h3 {
  font-size: clamp(var(--step-3), 3.6vw, var(--step-4));
  line-height: 1.05;
  margin-block: var(--space-2) var(--space-4);
}
.al-season ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.al-season li {
  border-block-start: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
  padding-block-start: var(--space-3);
  display: grid;
  gap: var(--space-1);
}
.al-season li b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
}
.al-season li span {
  color: var(--color-muted-text);
  font-size: var(--step--1);
}

/* Rooms: three framed plates in a row. */
.al-doors {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.al-doors li:nth-child(2) {
  margin-block-start: var(--space-6);
}
.al-doors a {
  display: grid;
  gap: var(--space-2);
  text-decoration: none;
}
.al-doors h3 {
  font-size: var(--step-2);
  margin-block-start: var(--space-2);
}
.al-doors .meta {
  font-size: var(--step--1);
  color: var(--color-muted-text);
}
.al-doors .from {
  font-family: var(--font-display);
  font-size: var(--step-1);
}
.al-doors .from small {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--color-muted-text);
}

/* The one evening band: the long table, after dark. */
.al-evening {
  background: var(--color-inverted);
  color: var(--color-on-inverted);
  padding-block: var(--space-7);
  position: relative;
  overflow: clip;
  isolation: isolate;
}
/* Candlelight: a warm glow that breathes in one corner. */
.al-evening::before {
  content: '';
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -10%;
  inline-size: 60%;
  aspect-ratio: 1;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--rye) 35%, transparent),
    transparent
  );
  animation: glow 7s ease-in-out infinite alternate;
}
@keyframes glow {
  from {
    opacity: 0.55;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1.06);
  }
}
.al-evening .wrap {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: center;
}
.al-evening .kicker {
  color: color-mix(in srgb, var(--color-on-inverted) 85%, transparent);
}
.al-evening h2 {
  font-size: clamp(var(--step-4), 5.2vw, calc(var(--step-5) * 1.25));
  line-height: 1;
  margin-block: var(--space-2) var(--space-3);
}
.al-evening h2 em {
  color: color-mix(in srgb, var(--color-on-inverted) 80%, var(--rye));
}
.al-evening p {
  color: color-mix(in srgb, var(--color-on-inverted) 86%, transparent);
  max-inline-size: 42ch;
}
.al-evening .al-arch img {
  aspect-ratio: 4 / 5;
}
.al-evening .btn.line {
  color: var(--color-on-inverted);
  margin-block-start: var(--space-4);
}
.al-evening .btn.line:hover {
  background: var(--color-on-inverted);
  color: var(--color-inverted);
}
.al-evening :focus-visible {
  outline-color: var(--color-on-inverted);
}
.al-times {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid color-mix(in srgb, var(--color-on-inverted) 25%, transparent);
  font-size: var(--step--1);
}
.al-times dt {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-on-inverted) 80%, transparent);
}

/* Around here: a field guide, numbered. */
.al-guide {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  counter-reset: place;
  border-block-start: 1px solid var(--color-text);
}
.al-guide li {
  counter-increment: place;
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-inline-start: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-1);
  align-content: start;
}
.al-guide li:first-child {
  border-inline-start: 0;
}
.al-guide li::before {
  content: counter(place, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--rye);
  line-height: 1;
}
/* A recommendation with its photograph: a plate above its number (INC-36d, thought 3). */
.al-guide li.has-photo > img,
.al-guide li.has-photo > picture > img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) * 2);
  order: -1;
  margin-block-end: var(--space-1);
}
.al-guide .cat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--color-accent);
}
.al-guide h3 {
  font-size: var(--step-1);
}
.al-guide .dist {
  font-family: var(--font-emphasis);
  font-style: italic;
}
.al-guide p {
  font-size: var(--step--1);
  color: var(--color-muted-text);
}

/* A guest's words, set like an entry in the visitors' book. */
.al-entry {
  padding-block: var(--space-7);
  text-align: center;
}
.al-entry blockquote p {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: clamp(var(--step-2), 3.2vw, var(--step-4));
  line-height: 1.25;
  max-inline-size: 28ch;
  margin-inline: auto;
}
.al-entry blockquote p::before,
.al-entry blockquote p::after {
  color: var(--rye);
}
.al-entry blockquote p::before {
  content: '“';
}
.al-entry blockquote p::after {
  content: '”';
}
.al-entry cite {
  display: block;
  margin-block-start: var(--space-4);
  font-style: normal;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--color-accent);
}

/* ============ the closing band: the house on a plate ============ */
.al-closing {
  background: var(--color-surface);
  padding-block: 0 var(--space-7);
}
.al-closing > .al-furrows {
  margin-block-end: var(--space-6);
}
.al-closing .wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-6);
  align-items: center;
}
.al-closing .al-arch img {
  aspect-ratio: 3 / 4;
}
.al-closing h2 {
  font-size: clamp(var(--step-4), 5vw, calc(var(--step-5) * 1.2));
  line-height: 1;
  margin-block: var(--space-2) var(--space-3);
}
.al-closing h2 em {
  color: var(--color-accent);
}
.al-closing p {
  color: var(--color-muted-text);
  max-inline-size: 44ch;
}
.al-links {
  display: grid;
  margin-block-start: var(--space-4);
}
.al-links a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-3);
  text-decoration: none;
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--color-text);
  font-size: var(--step-1);
}
.al-links a:last-child {
  border-block-end: 1px solid var(--color-text);
}
/* A long address breaks rather than pushing a phone's page sideways (WCAG 1.4.10). */
.al-links a span:last-child {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.al-links a span:first-child {
  font-family: var(--font-emphasis);
  font-style: italic;
  color: var(--color-accent);
}
.al-links a:hover span:last-child {
  color: var(--color-cta);
}

/* ============ footer: evening moss, the name large, the seal ============ */
footer.site.al-foot {
  background: var(--color-inverted);
}
.al-foot-top {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  border-block-end: 1px solid color-mix(in srgb, var(--color-on-inverted) 18%, transparent);
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-3);
}
.al-foot-name {
  font-family: var(--font-display);
  font-size: clamp(var(--step-4), 9vw, calc(var(--step-5) * 2.2));
  line-height: 0.9;
  color: var(--color-on-inverted);
}
footer.site h2 {
  font-family: var(--font-display);
  font-variant: normal;
  letter-spacing: 0;
  font-size: var(--step-1);
}

/* ============ inner pages: a banner photograph to the edges ============ */
.al-banner {
  --scrim-reach: 60%;
  position: relative;
  min-block-size: clamp(26rem, 68svh, 42rem);
  display: grid;
  align-items: end;
  overflow: clip;
  isolation: isolate;
  color: var(--color-on-inverted);
  background: var(--color-inverted);
}
.al-banner > img,
.al-banner > picture > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
  animation: breathe 26s var(--ease) infinite alternate;
}
@keyframes breathe {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.09);
  }
}
.al-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--color-inverted) 88%, transparent) 0%,
      color-mix(in srgb, var(--color-inverted) 76%, transparent) var(--scrim-reach),
      transparent calc(var(--scrim-reach) + 18%)
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-inverted) 48%, transparent),
      transparent 28%
    );
}
.al-banner > .wrap {
  inline-size: 100%;
  padding-block: calc(var(--header-h) + var(--space-5)) var(--space-6);
}
.al-banner .crumbs {
  color: color-mix(in srgb, var(--color-on-inverted) 86%, transparent);
  padding-block: 0 var(--space-4);
}
.al-banner .kicker,
.al-banner .kicker a {
  color: inherit;
}
.al-banner h1 {
  font-size: clamp(var(--step-4), 6.6vw, calc(var(--step-5) * 1.55));
  line-height: 0.98;
  margin-block: var(--space-2) var(--space-3);
  max-inline-size: 18ch;
  text-wrap: balance;
}
.al-banner h1 em {
  color: color-mix(in srgb, var(--color-on-inverted) 90%, var(--rye));
}
.al-banner .lede {
  font-size: var(--step-1);
  max-inline-size: 42ch;
  color: color-mix(in srgb, var(--color-on-inverted) 90%, transparent);
}
.al-banner :focus-visible {
  outline-color: var(--color-on-inverted);
}
.al-banner + .al-furrows,
.al-plainhead + .al-furrows {
  margin-block-start: var(--space-3);
}
.al-plainhead {
  background: var(--meadow);
  padding-block: calc(var(--header-h) + var(--space-6)) var(--space-6);
}
.al-plainhead .crumbs {
  padding-block: 0 var(--space-4);
}
.al-plainhead h1 {
  font-size: clamp(var(--step-4), 6.6vw, calc(var(--step-5) * 1.45));
  line-height: 0.98;
  margin-block: var(--space-2) var(--space-3);
}
.al-plainhead h1 em {
  color: var(--color-accent);
}
.al-plainhead .lede {
  font-size: var(--step-1);
  color: var(--color-muted-text);
  max-inline-size: 44ch;
}

/* the booking search under a banner */
.al-searchbar form {
  display: grid;
  /* Arrival, departure, adults, children and the button on one line. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-block-start: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.al-searchbar .pk-label,
.al-searchbar label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 700;
}
.al-searchbar .pk-value {
  font-family: var(--font-display);
  font-size: var(--step-1);
}

/* ============ parts of inner pages ============ */
.al-stats {
  list-style: none;
  padding: 0;
  margin-block: var(--space-6) var(--space-5);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--color-border);
}
.al-stats li {
  padding: var(--space-3) var(--space-3);
  border-inline-start: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-0);
}
.al-stats li:first-child {
  border-inline-start: 0;
}
.al-stats b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1;
}
.al-stats b small {
  font-family: var(--font-body);
  font-size: var(--step-0);
  margin-inline-start: 0.15em;
}
.al-stats span {
  font-size: var(--step--1);
  color: var(--color-muted-text);
}

.al-chapters {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-6);
}
.al-chapter {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--space-6);
  align-items: center;
}
.al-chapter.flip > figure {
  order: 2;
}
.al-chapter .al-arch img {
  aspect-ratio: 4 / 5;
}
.al-year {
  font-family: var(--font-display);
  font-size: clamp(var(--step-5), 8vw, calc(var(--step-5) * 1.8));
  line-height: 0.9;
  color: var(--rye);
}
.al-chapter :is(h2, h3) {
  font-size: var(--step-3);
  line-height: 1.05;
  margin-block: var(--space-2) var(--space-3);
}
.al-chapter :is(h2, h3) em {
  color: var(--color-accent);
}
.al-chapter p {
  color: var(--color-muted-text);
  max-inline-size: 46ch;
}
.al-chapter p + p {
  margin-block-start: var(--space-2);
}

.al-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--color-text);
}
.al-ledger > div {
  padding: var(--space-4) var(--space-4) 0 0;
}
.al-ledger > div + div {
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--color-border);
}
.al-ledger h3 {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--color-accent);
  margin-block-end: var(--space-2);
}
.al-ledger ul {
  list-style: none;
  padding: 0;
}
.al-ledger li {
  padding-block: var(--space-2);
  border-block-end: 1px dashed var(--color-border);
}
.al-ledger > div + div li {
  color: var(--color-muted-text);
}

.al-rows {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-6);
}
.al-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-6);
  align-items: center;
  scroll-margin-block-start: calc(var(--header-h) + var(--space-4));
}
.al-row.flip > figure {
  order: 2;
}
.al-row .al-arch img {
  aspect-ratio: 4 / 5;
}
.al-row h2 {
  font-size: clamp(var(--step-3), 3.6vw, var(--step-4));
  line-height: 1;
  margin-block: var(--space-2) var(--space-3);
}
.al-row .lede {
  color: var(--color-muted-text);
}
.al-facts {
  margin-block: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--color-text);
}
.al-facts div {
  display: grid;
  padding: var(--space-2) 0;
  border-block-end: 1px solid var(--color-border);
}
.al-facts dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted-text);
  font-weight: 700;
}
.al-facts dd {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--step-1);
}
.al-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1);
  color: var(--color-muted-text);
  font-size: var(--step--1);
}
.al-price b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  color: var(--color-text);
}
.al-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
}

.al-strip {
  background: var(--color-inverted);
  color: var(--color-on-inverted);
  padding-block: var(--space-5);
}
.al-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.al-strip p {
  color: color-mix(in srgb, var(--color-on-inverted) 86%, transparent);
}
.al-strip b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  color: var(--color-on-inverted);
}
.al-strip :focus-visible {
  outline-color: var(--color-on-inverted);
}

.al-two {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
}
.al-two .al-arch {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--space-3));
}
.al-two .al-arch img {
  aspect-ratio: 3 / 4;
}
.al-two h2,
.form-wrap h2 {
  font-size: clamp(var(--step-3), 3.6vw, var(--step-4));
  line-height: 1.02;
  margin-block-end: var(--space-4);
}
.al-two h2 em,
.form-wrap h2 em {
  color: var(--color-accent);
}

/* The meadow: calm sections in light green. */
.al-meadow {
  background: var(--meadow);
}

/* The evening: dark sections for forms. */
.al-dark {
  background: var(--color-inverted);
  color: var(--color-on-inverted);
  padding-block: var(--space-7);
}
.al-dark .kicker {
  color: color-mix(in srgb, var(--color-on-inverted) 85%, transparent);
}
.al-dark .form-wrap h2 em {
  color: color-mix(in srgb, var(--color-on-inverted) 80%, var(--rye));
}
.al-dark .form-wrap .intro p,
.al-dark .form .privacy,
.al-dark .form .robot,
.al-dark .field .hint,
.al-dark .field label small {
  color: color-mix(in srgb, var(--color-on-inverted) 82%, transparent);
}
.al-dark .field label {
  color: var(--color-on-inverted);
}
.al-dark .field input,
.al-dark .field textarea,
.al-dark .pk-trigger {
  color: var(--color-text);
}
.al-dark .field .err {
  color: var(--color-on-inverted);
  text-decoration: underline wavy color-mix(in srgb, var(--color-cta) 60%, var(--color-on-inverted));
  text-underline-offset: 0.3em;
}
.al-dark .form-done {
  color: var(--color-text);
}
.al-dark :focus-visible {
  outline-color: var(--color-on-inverted);
}

/* the gallery: plates and wide frames on a wall */
.al-wall {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--space-4) var(--space-3);
  align-items: end;
}
.al-wall li[data-size='wide'] {
  grid-column: span 2;
}
.al-wall button {
  inline-size: 100%;
}
.al-wall li:not([data-size='wide']) button {
  border-radius: calc(var(--radius) * 2);
}
.al-wall li[data-size='wide'] button {
  border-radius: var(--radius);
}
.al-wall li:not([data-size='wide']) img {
  aspect-ratio: 3 / 4;
}
.al-wall li[data-size='wide'] img {
  aspect-ratio: 16 / 10;
}
.al-wall .cap {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--step-0);
  color: var(--color-text);
  padding-block-start: var(--space-1);
}
.lightbox {
  background: color-mix(in srgb, var(--color-inverted) 96%, transparent);
}

/* ============ the shared blocks, in this voice ============ */
.tags li {
  border-radius: var(--radius);
  background: var(--color-surface-raised);
}
.hours th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--step--1);
}
.status,
.notice {
  border-radius: var(--radius);
}
.carte {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(var(--space-4), 5vw, var(--space-6));
}
.carte-block h3 {
  font-size: var(--step-3);
}
.carte .dish b {
  font-weight: 700;
}
.carte .dish span {
  font-family: var(--font-display);
  color: var(--color-accent);
}
.offer {
  border-radius: var(--radius);
  background: var(--color-surface-raised);
}
.offer h3 {
  font-size: var(--step-2);
  line-height: 1.08;
}
.offer .price-line {
  justify-content: space-between;
  align-items: baseline;
}
.offer .price-line b {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
}
.offer .season {
  font-variant: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.chips {
  gap: var(--space-2);
}
.chips :is(a, button) {
  border-radius: var(--radius);
  border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
  font-weight: 700;
  font-size: var(--step--1);
  padding-inline: var(--space-4);
}
.view-toggle {
  border-radius: var(--radius);
  padding: 3px;
  gap: 3px;
}
.view-toggle :is(a, button) {
  border-radius: calc(var(--radius) * 0.7);
  font-weight: 700;
  font-size: var(--step--1);
}
.al-events-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}
.al-events-bar .chips {
  margin: 0;
}
.ev-month {
  font-family: var(--font-display);
  font-variant: normal;
  font-size: var(--step-3);
  letter-spacing: 0;
  color: var(--color-text);
}
/* The date as a page torn from the almanac: square, with a rye furrow along its top. */
.ev-date {
  border-radius: var(--radius);
  background: var(--meadow);
  border: 0;
  border-block-start: 4px solid var(--rye);
  padding-block-start: var(--space-2);
}
.ev-date b {
  font-family: var(--font-display);
  font-weight: 400;
}
.ev-body h3 {
  font-family: var(--font-display);
}
.ev-cancel .ev-body h3 {
  opacity: 1;
  color: var(--color-muted-text);
}
.venue img {
  border-radius: calc(var(--radius) * 2);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.venue h3,
.package h3 {
  font-family: var(--font-display);
}
.estimate .sc {
  color: color-mix(in srgb, var(--color-on-inverted) 85%, transparent);
}
.estimate h4 {
  color: var(--color-on-inverted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.estimate .field input {
  color: var(--color-on-inverted);
  background: transparent;
  border-color: color-mix(in srgb, var(--color-on-inverted) 60%, transparent);
}
.person-card {
  border-radius: var(--radius);
  background: var(--color-surface-raised);
}
.person-card h3 {
  font-family: var(--font-display);
}
.avatar {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.map,
.map .consent {
  border-radius: var(--radius);
}
.field input,
.field textarea,
.field select {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  border-block-end: 1.5px solid var(--color-text);
  background: var(--color-surface-raised);
}
.field input:focus,
.field textarea:focus {
  border-color: var(--color-accent);
}
.form-wrap .pk-trigger,
.wz-form .pk-trigger {
  border: 1px solid var(--color-border);
  border-block-end: 1.5px solid var(--color-text);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-raised);
}
.pk-pop {
  border-radius: var(--radius);
}
/* Days are plain squares; the chosen ones are marked with a rye furrow under the number. */
.pk-cal td button {
  border-radius: var(--radius);
}
.pk-cal .is-start button,
.pk-cal .is-end button {
  box-shadow: inset 0 -4px 0 var(--rye);
}
.form-done {
  border-radius: var(--radius);
}
.al-ways div {
  padding-block: var(--space-3);
  border-block-end: 1px dashed var(--color-border);
}
.al-ways dt {
  font-family: var(--font-display);
  font-size: var(--step-2);
}
.al-ways dd {
  color: var(--color-muted-text);
}
.al-legal h2 {
  font-size: var(--step-2);
  margin-block: var(--space-4) var(--space-1);
}
.al-press li b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
}
.al-more {
  margin-block-start: var(--space-4);
}

/* ============ booking ============ */
.al-bookhead {
  background: var(--meadow);
  padding-block: calc(var(--header-h) + var(--space-5)) var(--space-4);
}
.al-bookhead h1 {
  font-size: clamp(var(--step-4), 6vw, calc(var(--step-5) * 1.3));
  margin-block: var(--space-2) var(--space-5);
}
.al-bookhead h1 em {
  color: var(--color-accent);
}
/* The steps: seven strips of furrow, ploughed as you go — the number above, the strip below it
   turning green once reached and rye-gold where you are. */
.al-steps li {
  border: 0;
  padding: 0;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-1);
}
.al-steps .n {
  display: block;
  inline-size: 100%;
  padding-block-end: var(--space-2);
  border-block-end: 3px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--color-muted-text);
  transition:
    border-color var(--duration-short) var(--ease),
    color var(--duration-short) var(--ease);
}
.al-steps li[data-reached='true'] .n {
  border-block-end-color: var(--color-accent);
  color: var(--color-accent);
}
.al-steps li[aria-current='step'] .n {
  border-block-end: 6px solid var(--rye);
  padding-block-end: calc(var(--space-2) - 3px);
  color: var(--color-text);
}
.al-steps li > span:last-child {
  font-size: var(--step--1);
  font-weight: 700;
}
.al-steps li:not([data-reached='true']) > span:last-child {
  color: var(--color-muted-text);
  font-weight: 400;
}
[data-step] h2 em {
  color: var(--color-accent);
}
.wz-room {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-block-end: var(--space-3);
}
.wz-room img {
  border-radius: calc(var(--radius) * 2);
  aspect-ratio: 3 / 4;
}
.wz-room h3,
.wz-extra b {
  font-family: var(--font-display);
  font-weight: 400;
}
.wz-price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
}
.wz-num {
  /* Rye darkened to read on the card's light ground (WCAG 1.4.3). */
  color: color-mix(in srgb, var(--rye) 50%, var(--color-text));
  font-family: var(--font-display);
}
/* The stay so far: a card with a strip of furrows along its top edge, like the steps above it. */
.al-summary {
  background:
    repeating-linear-gradient(180deg, var(--rye) 0 2px, transparent 2px 6px) top / 100% 0.85rem
      no-repeat,
    var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: calc(var(--space-4) + 0.85rem) var(--space-4) var(--space-4);
  text-align: start;
}
.al-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}
.al-summary h2 {
  font-size: var(--step-2);
}
.al-summary-toggle {
  background: none;
  border: 0;
  border-block-end: 1px solid currentColor;
  min-block-size: 2.75rem;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--step-1);
}
.al-summary-lines {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--color-border);
}
.al-summary-lines:empty {
  display: none;
}
.al-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-text);
}
.al-summary-total b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
}
.al-summary-now {
  font-size: var(--step--1);
  color: var(--color-accent);
  font-weight: 700;
  margin-block-start: var(--space-1);
}
.wz-end figure {
  border-radius: calc(var(--radius) * 2);
  overflow: clip;
}
.wz-end img {
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.wz-end h2 {
  font-size: clamp(var(--step-4), 6vw, calc(var(--step-5) * 1.4));
}

.mbook {
  background: var(--color-inverted);
  color: var(--color-on-inverted);
}

/* ============ narrower screens ============ */
@media (max-width: 64rem) {
  .al-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .al-guide li:nth-child(3) {
    border-inline-start: 0;
  }
  .al-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .al-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .al-season ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 48rem) {
  .al-head .langs {
    display: none;
  }
  .al-head .wrap {
    grid-template-columns: auto 1fr auto;
  }
  .al-head .brand {
    justify-self: center;
  }
  .al-word {
    letter-spacing: 0.24em;
  }
  .al-film {
    --scrim-reach: 72%;
  }
  .al-film > .wrap {
    grid-template-columns: minmax(0, 1fr);
    padding-block-end: var(--space-5);
  }
  .al-seasons {
    justify-items: start;
  }
  .al-reel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .al-reel li {
    font-size: var(--step-0);
  }
  /* On a phone the seal would sit on the name; it stays in the footer. */
  .al-film .al-seal {
    display: none;
  }
  .al-dock {
    position: relative;
    inset: auto;
    padding-inline: 0;
    margin-block-start: var(--space-6);
  }
  .al-dock form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-4) var(--space-3) var(--space-3);
    border-start-start-radius: var(--radius);
    border-start-end-radius: var(--radius);
  }
  .al-dock .pk-range,
  .al-dock .guests,
  .al-dock .btn {
    grid-column: 1 / -1;
  }
  .al-intro,
  .al-evening .wrap,
  .al-closing .wrap,
  .al-season,
  .al-chapter,
  .al-row,
  .al-two,
  .al-ledger {
    grid-template-columns: minmax(0, 1fr);
  }
  .al-chapter.flip > figure,
  .al-row.flip > figure {
    order: 0;
  }
  .al-intro .al-arch,
  .al-season .al-arch,
  .al-closing .al-arch,
  .al-chapter .al-arch,
  .al-row .al-arch {
    max-inline-size: 22rem;
  }
  .al-two .al-arch {
    position: static;
    max-inline-size: 22rem;
  }
  .al-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .al-numbers li:nth-child(3) {
    border-inline-start: 0;
  }
  .al-doors {
    grid-template-columns: minmax(0, 1fr);
  }
  .al-doors li:nth-child(2) {
    margin-block-start: 0;
  }
  .al-guide {
    grid-template-columns: minmax(0, 1fr);
  }
  .al-guide li {
    border-inline-start: 0;
    border-block-end: 1px solid var(--color-border);
  }
  .al-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .al-stats li:nth-child(odd) {
    border-inline-start: 0;
  }
  .al-ledger > div + div {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .al-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .al-searchbar form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .al-searchbar .pk-range,
  .al-searchbar .guests,
  .al-searchbar .btn {
    grid-column: 1 / -1;
  }
  .al-foot-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .al-summary {
    border-radius: var(--radius);
    padding-block-start: var(--space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .al-seal svg,
  .al-evening::before,
  .al-banner > img,
  .al-banner > picture > img {
    animation: none;
  }
}

/* ============ the price list (INC-37): the almanac's table of the year ============ */
/* Each season is a page of the almanac: its name large on the left, its months in italic beneath,
   the rooms ruled like a ledger on the right; a double rule opens every season. */
.al-prices .price-list {
  gap: var(--space-7);
}
.al-prices :is(.pl-season, .pl-extras) {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-6);
  align-items: start;
  border-block-start: 3px double color-mix(in srgb, var(--color-text) 45%, transparent);
  padding-block-start: var(--space-4);
}
.al-prices :is(.pl-season, .pl-extras) :is(h2, h3) {
  flex-direction: column;
  align-items: start;
  gap: var(--space-2);
  margin: 0;
  font-size: clamp(var(--step-2), 3vw, var(--step-3));
  line-height: 1.05;
}
.al-prices :is(.pl-season, .pl-extras) :is(h2, h3) span {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--color-accent);
}
.al-prices .pl-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 700;
}
.al-prices .pl-table td b {
  font-weight: 400;
}
.al-prices .pl-note {
  margin-inline-start: calc((100% - var(--space-6)) / 3 + var(--space-6));
}
@media (max-width: 48rem) {
  .al-prices :is(.pl-season, .pl-extras) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  .al-prices .pl-note {
    margin-inline-start: 0;
  }
}

/* ============ a package's rules (INC-38): an almanac's ledger ============ */
/* Each rule a line of the almanac — its name in the italic of the notes, a dotted rule beneath — and
   the week as seven seals, the days a stay may begin pressed in the accent. */
.offer-rules li {
  border-block-end-style: dotted;
  border-block-end-width: 2px;
}
.offer-rules .rule-term {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-2);
}
.offer-rules .rule-text {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.rule-week i {
  border-radius: 50%;
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--color-text) 35%, transparent);
  font-family: var(--font-display);
}
.rule-week i.on {
  box-shadow:
    0 0 0 3px var(--color-surface),
    0 0 0 4.5px var(--color-accent);
}
/* The sum in a round seal, like the estate's own: a full circle, never an arch on a flat foot. */
.rule-sum {
  justify-content: center;
  inline-size: 6.5rem;
  block-size: 6.5rem;
  border: 1.5px solid var(--color-accent);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 4px var(--color-background),
    inset 0 0 0 5px var(--color-accent);
}
.offer-rule {
  border-radius: var(--radius);
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-0);
}

/* ============ notices, scores, the tour and today's sun (INC-39), in the almanac ============ */
/* Today at the estate: an entry in the almanac, pinned to the film — paper ruled at its head, the
   italic of the notes. */
.al-today {
  justify-self: start;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  color: var(--color-text);
  border-radius: var(--radius);
  border-block-start: 4px double var(--color-accent);
  text-align: center;
  box-shadow: 0 24px 40px -30px color-mix(in srgb, var(--color-inverted) 70%, transparent);
}
.al-today h2 {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: 400;
}
.al-today .today-arc {
  justify-self: center;
  color: var(--color-accent);
}
.al-today dt {
  font-variant: small-caps;
  text-transform: none;
  letter-spacing: 0.06em;
  font-size: var(--step--1);
}
/* The notice: a line in the ledger — information on the tinted page, a warning in ink. */
.notice-bar {
  border-block-end-style: dotted;
  border-block-end-width: 2px;
}
.notice-bar p {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--step-0);
}
/* Scores: almanac cards ruled at their head, the source in small capitals. */
.al-scores .score {
  border-block-start: 4px double var(--color-accent);
  padding-block-start: var(--space-5);
  text-align: center;
  justify-items: center;
}
.al-scores .score-source {
  font-variant: small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: var(--step-0);
}
.al-scores .score-meter {
  inline-size: 60%;
}
/* The tour: a view of the house in a frame, a ruled line set inside its edge. */
.al-tour .embed {
  outline: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  outline-offset: -10px;
}
.al-tour .embed .consent h3 {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: 400;
}

/* ============ hire by the hour (INC-40), in the almanac ============ */
/* The kinds are almanac entries ruled at their head; the day is a ledger — dotted lines, the hires out
   inked in, the guest's hire ruled round twice; the reason for the price in the italic of the notes. */
.al-hire .hire-kind {
  border-block-start: 4px double var(--color-accent);
  background: var(--color-surface);
}
.al-hire .hire-photo {
  outline: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  outline-offset: -6px;
}
.al-hire .hire-name {
  font-family: var(--font-display);
}
.al-hire .hire-facts,
.al-hire legend {
  font-variant: small-caps;
  text-transform: none;
  letter-spacing: 0.08em;
}
.al-hire legend {
  font-size: var(--step-0);
  font-weight: 600;
}
.al-hire .hire-tiers {
  border-block-start-style: dotted;
}
.al-hire .hire-row {
  background: none;
  border-block-end: 1px dotted color-mix(in srgb, var(--color-text) 40%, transparent);
  border-radius: 0;
}
.al-hire .hire-held {
  border-radius: 0;
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-text) 55%, transparent) 0 1px,
      transparent 1px 4px
    ),
    color-mix(in srgb, var(--color-text) 16%, transparent);
}
.al-hire .hire-band {
  border: 3px double var(--color-accent);
  border-radius: 0;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.al-hire .hire-price small {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--step-0);
}
.al-hire .hire-done {
  border-width: 0;
  border-block-start: 4px double var(--color-accent);
  text-align: center;
  justify-items: center;
}
.al-hire .hire-panel[data-free='no'] .hire-band {
  border-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
}

/* ============ several rooms in one booking (INC-41), in the almanac ============ */
/* Each room an entry ruled twice at its head, its number a small seal; the summary's room heads in
   small capitals, ruled like the ledger's columns. */
.wz-party-name,
.wz-each-what b {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.wz-each {
  border: 0;
  border-block-start: 4px double var(--color-accent);
  border-radius: 0;
  background: var(--color-surface);
}
.wz-each.open {
  box-shadow: 0 18px 32px -28px color-mix(in srgb, var(--color-inverted) 60%, transparent);
}
.wz-each-n {
  background: none;
  color: var(--color-accent);
  border: 1px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
.wz-each.done .wz-each-n {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.wz-each-mark {
  font-family: var(--font-emphasis);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--step-0);
}
[data-lines] .wz-roomhead {
  border-block-start-style: double;
  border-block-start-width: 3px;
}
[data-lines] .wz-roomhead dt {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

/* ============ gift vouchers (INC-42), in the almanac ============ */
/* The voucher is a leaf of the estate's ledger: ruled twice round, the furrows ploughed faintly across
   its paper, the house's initial in a seal, and the value set like a year in an almanac — old-style
   figures, the italic for the words. The choices are entries ruled at their head. */
.al-vc .vc-kind,
.al-vc .vc-way,
.al-vc .vc-exp {
  border-radius: 0;
  border-block-start: 3px double var(--color-text);
}
.al-vc .vc-kind:has(input:checked),
.al-vc .vc-way:has(input:checked),
.al-vc .vc-exp:has(input:checked) {
  box-shadow: none;
  border-color: var(--color-accent);
  border-block-start-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface-raised));
}
.al-vc .vc-kind-name,
.al-vc .vc-way-name {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-1);
}
.al-vc .vc-chip span {
  border-radius: 0;
  font-variant-numeric: oldstyle-nums;
}
.al-vc .vc-card {
  border: 1px solid var(--color-text);
  outline: 1px solid var(--color-text);
  outline-offset: -0.45rem;
  border-radius: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 1.35rem,
      color-mix(in srgb, var(--color-border) 40%, transparent) 1.35rem calc(1.35rem + 1px)
    ),
    var(--color-surface-raised);
}
.al-vc .vc-card-head {
  border-block-end: 1px solid var(--color-text);
  padding-block-end: 0.5em;
}
.al-vc .vc-initial {
  inline-size: 2.6em;
  border: 0;
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow:
    0 0 0 2px var(--color-surface-raised),
    0 0 0 3px var(--color-accent);
}
.al-vc .vc-tag {
  font-family: var(--font-emphasis);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.05em;
}
.al-vc .vc-value {
  font-variant-numeric: oldstyle-nums;
  color: var(--color-accent);
}
.al-vc .vc-card-foot {
  border-block-start: 3px double var(--color-text);
}
.al-vc .vc-facts dt {
  font-family: var(--font-emphasis);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.al-vc.vc-teaser .vc-card {
  transform: rotate(1.5deg);
  box-shadow: 0 1.25rem 2.5rem -1.5rem color-mix(in srgb, var(--color-inverted) 60%, transparent);
}