/* ==========================================================================
   Wrexham Hotels: design system
   Implements the "Wrexham Hotels.dc.html" canvas (turns 1–6).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ink: #171512;
  --ink-soft: #211d1a;
  --body: #3d3830;
  --body-2: #5c574f;
  --muted: #8a8375;
  --line: rgba(0, 0, 0, .12);
  --line-soft: rgba(0, 0, 0, .09);
  --paper: #f7f4ee;
  --paper-2: #efe9dd;
  --sand: #dbd4c8;
  --sand-2: #e7e2d9;
  --red: #a51f24;
  --red-bright: #e0483f;
  --peach: #f0c9a8;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  --gutter: 40px;
  --maxw: 1280px;
  --radius: 12px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;

  /* Sticky footer: on a short page (a 404, an empty search, a hotel that no
     longer exists) main grows to fill the viewport so the footer sits on the
     bottom edge instead of floating halfway up. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main { flex: 1 0 auto; }
/* Headers and footers keep their intrinsic height. Without this the hero
   would be squashed to fit. */
body > header, body > footer { flex: none; }

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

.shell { max-width: var(--maxw); margin: 0 auto; }
.pad { padding-left: var(--gutter); padding-right: var(--gutter); }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Type --------------------------------------------------------------- */
.display { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; margin: 0; text-wrap: pretty; }
h1.display { font-size: clamp(44px, 6.4vw, 82px); line-height: .93; }
h2.display { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -.01em; }
h3.display { font-size: 24px; line-height: 1.15; }

.eyebrow {
  font: 500 10px var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}
.eyebrow--dark { color: var(--red-bright); }
.eyebrow--peach { color: var(--peach); }
.eyebrow--muted { color: var(--muted); letter-spacing: .18em; font-size: 9.5px; }

.meta { font: 400 12px var(--mono); color: var(--muted); }
.lede { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body-2); text-wrap: pretty; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 13.5px var(--sans);
  text-decoration: none; border: 0; cursor: pointer;
  border-radius: 999px; padding: 12px 22px;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn--dark { background: var(--ink); color: #fff; padding-right: 11px; padding-left: 21px; }
.btn--dark:hover { background: #2c2721; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: #8c1a1e; }
.btn--light { background: #fff; color: var(--ink); padding-right: 10px; padding-left: 20px; }
.btn--light:hover { background: var(--paper-2); }
.btn--ghost { border: 1px solid rgba(0, 0, 0, .2); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--paper-2); }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--square { border-radius: 10px; padding: 15px 24px; justify-content: center; font-size: 15px; }
.btn[disabled], .btn--muted { color: var(--muted); background: transparent; border: 1px solid rgba(0, 0, 0, .2); cursor: default; }

.arrow {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff;
  font: 700 11px var(--sans);
  display: inline-flex; align-items: center; justify-content: center;
}
.arrow--lg { width: 38px; height: 38px; font-size: 14px; background: #fff; color: var(--red); }

.chip {
  font: 500 12px var(--sans); color: var(--ink);
  background: var(--paper-2); border-radius: 999px; padding: 8px 14px;
  border: 0; white-space: nowrap;
}
.chip--sm { font-size: 11.5px; padding: 6px 12px; }
.chip--on { background: var(--ink); color: #fff; }
.chip--off { color: var(--muted); }

.tag {
  align-self: flex-start;
  background: var(--ink); color: #fff; border-radius: 999px;
  padding: 5px 11px;
  font: 500 10px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.tag--red { background: var(--red); }
.tag--light { background: #fff; color: var(--ink); }

/* --- Header ------------------------------------------------------------- */
.head {
  background: var(--ink);
  padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.head--over {
  position: relative; z-index: 2; background: transparent;
  padding: 26px var(--gutter) 0;
}
.brand { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.brand b { font: 400 22px var(--serif); color: #fff; letter-spacing: .01em; }
.head--over .brand b { font-size: 25px; }
.brand span {
  font: 500 8.5px var(--sans); color: rgba(255, 255, 255, .62);
  letter-spacing: .22em; text-transform: uppercase; margin-top: 4px;
}

.nav {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 5px;
}
.head--over .nav { background: rgba(255, 255, 255, .13); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .18); }
.nav a {
  text-decoration: none; font: 500 13px var(--sans);
  color: rgba(255, 255, 255, .9); padding: 8px 15px; border-radius: 999px;
  transition: background-color .18s ease, color .18s ease;
}
.nav a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.nav a[aria-current="page"] { color: var(--ink); background: #fff; padding: 8px 17px; }

.nav__close { display: none; }

.burger {
  display: none; flex-direction: column; gap: 4px;
  padding: 10px 8px; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; cursor: pointer;
}
.burger i { display: block; width: 18px; height: 1.5px; background: #fff; }
.burger i:last-child { width: 13px; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 700px;
  background-color: #231f1c;
  /* The still behind the film: shows while it loads, if it fails, and for
     anyone who has asked for reduced motion. */
  background-image: url('../img/hero-poster.jpg?v=e9f288ef');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-bottom: 116px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 34%, rgba(0, 0, 0, .82) 72%, rgba(0, 0, 0, .93) 100%);
}

/* Background film. Sits under the gradient; the hero keeps its poster as a
   background-image so there is always something behind it, while the video
   loads, if it fails, and for anyone who has asked for less motion. */
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}

.hero__body {
  position: relative; z-index: 2; padding: 0 var(--gutter);
}
.hero__copy { max-width: 620px; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: italic; color: var(--peach); }
.hero p { margin: 18px 0 0; max-width: 430px; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); text-wrap: pretty; }

.flag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  padding: 5px 12px 5px 8px; margin-bottom: 20px;
}
.flag i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-bright); }
.flag span { font: 500 10.5px var(--sans); color: #fff; letter-spacing: .14em; text-transform: uppercase; }

/* --- Search bar --------------------------------------------------------- */
.searchbar {
  position: relative;
  background: var(--paper); border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(23, 21, 18, .18);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr .9fr auto;
  align-items: center; padding: 8px;
}
.searchbar--flush {
  margin: -46px var(--gutter) 0;
  /* The hero's gradient sits at z-index 1 and its copy at 2, and both are in
     the same stacking context as this bar. Without a z-index of its own the
     bar is painted underneath them, and the 46px it overlaps comes out dimmed
     with its top corners lost in the dark. */
  z-index: 3;
}
.searchbar--inline { box-shadow: none; border: 0; border-radius: 12px; padding: 7px; grid-template-columns: 1.3fr 1fr 1fr .9fr auto; }
/* The property pages' copy: no free-text field, because there is only one
   property on the page, so it is four columns rather than five. */
.searchbar--strip { box-shadow: none; border: 0; border-radius: 12px; padding: 7px; grid-template-columns: 1fr 1fr 1.1fr auto; }
.field { padding: 12px 20px; border-right: 1px solid rgba(0, 0, 0, .08); }
.field:nth-last-child(2) { border-right: 0; }
.field label {
  display: block;
  font: 500 9.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.field select, .field input {
  display: block; width: 100%; margin-top: 5px; padding: 0;
  border: 0; background: transparent; color: var(--ink);
  font: 500 16px var(--sans); -webkit-appearance: none; appearance: none;
}
.field select { cursor: pointer; }
.searchbar .btn--square { margin-left: 8px; padding: 16px 26px; }

/* --- Sections ----------------------------------------------------------- */
.section { padding: 64px var(--gutter) 0; }
.section--tight { padding-top: 70px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.sec-head__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 300px; }
.sec-head h2 { margin-top: 12px; }

/* --- Hotel cards -------------------------------------------------------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; }
.hotel-card { display: flex; flex-direction: column; gap: 13px; text-decoration: none; color: inherit; }
.hotel-card__pic {
  position: relative; height: 270px; border-radius: 10px; overflow: hidden;
  background: var(--sand) center / cover no-repeat;
  display: flex; padding: 12px;
}
.hotel-card__pic::after {
  content: ""; position: absolute; inset: 0; background: rgba(23, 21, 18, 0);
  transition: background-color .25s ease;
}
.hotel-card:hover .hotel-card__pic::after { background: rgba(23, 21, 18, .14); }
.hotel-card__pic .tag { position: relative; z-index: 1; }
.hotel-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hotel-card__row b { font: 500 13px var(--sans); }
.hotel-card__sub { font: 400 12.5px var(--sans); color: var(--muted); margin-top: 5px; }

/* --- Matchday panel ----------------------------------------------------- */
.panel-dark {
  margin: 64px var(--gutter) 0;
  background: var(--ink); border-radius: 16px; padding: 38px 40px;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center;
}
.panel-dark h2 { color: #fff; font-size: 40px; line-height: 1.06; margin-top: 12px; }
.panel-dark p { margin: 16px 0 0; max-width: 330px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .66); }
.panel-dark .btn { margin-top: 24px; font-size: 14px; }

.fixtures {
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(255, 255, 255, .12); border-radius: 10px; overflow: hidden;
}
.fixture {
  display: grid; grid-template-columns: 74px 1fr auto auto; gap: 18px; align-items: center;
  background: var(--ink-soft); padding: 17px 20px;
  text-decoration: none; transition: background-color .18s ease;
}
a.fixture:hover { background: #2c2721; }
.fixture__date { font: 400 12px var(--mono); color: rgba(255, 255, 255, .5); }
.fixture__tie { font: 500 15px var(--sans); color: #fff; }
.fixture__left { font: 400 12.5px var(--sans); color: rgba(255, 255, 255, .5); }
.fixture__left.low { color: var(--red-bright); }
.fixture__from { font: 500 13px var(--sans); color: var(--peach); }

/* --- Guides mosaic ------------------------------------------------------ */
.mosaic {
  margin-top: 32px; display: grid;
  grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: repeat(2, 190px); gap: 20px;
}
.tile {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: #272320 center / cover no-repeat;
  padding: 22px; display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: #fff; isolation: isolate;
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .78));
  transition: opacity .25s ease;
}
.tile:hover::before { opacity: .82; }
.tile h3 { margin: 8px 0 0; font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.1; }
.tile p { margin: 12px 0 0; max-width: 330px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.tile--tall { grid-row: span 2; padding: 26px; }
.tile--tall h3 { font-size: 38px; line-height: 1.05; margin-top: 10px; }
.tile--wide { grid-column: 2 / span 2; padding: 24px; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; }
.tile--wide h3 { font-size: 30px; line-height: 1.08; }

/* --- Events table ------------------------------------------------------- */
.rows { margin-top: 22px; border-top: 1px solid var(--line); }
.row-event {
  display: grid; grid-template-columns: 100px minmax(0, 360px) minmax(0, 1fr) auto;
  gap: 28px; align-items: center;
  padding: 19px 4px; border-bottom: 1px solid var(--line-soft);
  /* Each row links out to the venue's own page, so it is an <a>. */
  color: inherit; text-decoration: none;
  transition: background-color .18s ease;
}
a.row-event:hover, a.row-event:focus-visible { background: var(--line-soft); }
a.row-event:hover .row-event__name { text-decoration: underline; text-underline-offset: 2px; }
.row-event__date { font: 400 12.5px var(--mono); color: var(--red); }
.row-event__name { font: 500 16px var(--sans); }
.row-event__where { font: 400 13.5px var(--sans); color: var(--body-2); }
.row-event__price { font: 500 13px var(--sans); text-align: right; }

/* --- Screen-time cards -------------------------------------------------- */
.doc-card__pic { height: 200px; border-radius: 10px; background: var(--sand) center / cover no-repeat; }
.doc-card h3 { margin: 7px 0 0; font: 400 23px var(--serif); }
.doc-card p { margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: var(--body-2); }

/* --- Newsletter --------------------------------------------------------- */
.signup {
  margin: 70px var(--gutter) 0;
  background: var(--paper-2); border-radius: 16px; padding: 40px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}
.signup h2 { font-size: 40px; line-height: 1.06; margin-top: 12px; }
.signup p { margin: 14px 0 0; max-width: 400px; font-size: 14.5px; line-height: 1.6; color: var(--body-2); }
.signup__field {
  display: flex; gap: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px;
}
.signup__field input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 14px;
  font: 400 15px var(--sans); color: var(--ink);
}
.signup__field input::placeholder { color: #a8a29a; }
.signup__field button { border-radius: 7px; padding: 13px 24px; font-size: 14.5px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
.consent input { flex: none; width: 15px; height: 15px; margin-top: 2px; accent-color: var(--red); }
.consent span { font: 400 12px/1.5 var(--sans); color: var(--muted); max-width: 400px; }
.signup .meta { display: block; margin-top: 18px; font-size: 11.5px; }
/* --- Explore index ------------------------------------------------------ */
/* Canvas turn 6. The article repository: one featured piece, a card grid, the
   dated pieces, then everything else as rows. Every block here is fed from
   assets/data/articles.js, so the page grows with the archive rather than
   needing a new layout each time something is published. */
.explore-head {
  padding: 46px var(--gutter) 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.explore-head h1 { margin: 14px 0 0; font-size: clamp(40px, 5vw, 62px); line-height: .98; letter-spacing: -.022em; }
.explore-head > p {
  margin: 0; max-width: 330px; text-wrap: pretty;
  font-size: 14.5px; line-height: 1.65; color: var(--body-2);
}

.explore-bar {
  margin: 30px var(--gutter) 0; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.explore-bar__chips { display: flex; gap: 7px; flex-wrap: wrap; }
.explore-bar__chips .chip { cursor: pointer; }
.explore-bar__count { font: 400 12px var(--mono); color: var(--muted); white-space: nowrap; }

/* Featured ---------------------------------------------------------------- */
.feature {
  margin: 26px var(--gutter) 0;
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: stretch;
  text-decoration: none; border-radius: 14px; overflow: hidden; background: var(--ink);
}
.feature__pic {
  position: relative; min-height: 400px;
  background: var(--ink-soft) center / cover no-repeat;
}
.feature__body {
  padding: 38px 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
}
.feature__body h2 {
  margin: 16px 0 0; font: 400 46px/1.02 var(--serif); color: #fff; letter-spacing: -.015em;
}
.feature__body > div > p {
  margin: 16px 0 0; text-wrap: pretty;
  font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .72);
}
.feature__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.feature__meta { font: 400 11.5px var(--mono); color: rgba(255, 255, 255, .5); }
.feature__cta {
  flex: none; display: flex; align-items: center; gap: 9px;
  background: #fff; border-radius: 999px; padding: 10px 10px 10px 18px;
  font: 500 13.5px var(--sans); color: var(--ink);
}
.feature__cta i {
  width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: #fff;
  font: 700 10px/1 var(--sans); font-style: normal;
  display: flex; align-items: center; justify-content: center;
}
.feature:hover .feature__cta i { background: var(--red-bright); }

/* Card grid --------------------------------------------------------------- */
.article-grid {
  padding: 22px var(--gutter) 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.article-card { text-decoration: none; display: flex; flex-direction: column; gap: 13px; }
.article-card__pic {
  height: 230px; border-radius: var(--radius); padding: 11px;
  background: var(--sand) center / cover no-repeat;
  display: flex; align-items: flex-start;
}
.article-card__pic .tag { background: var(--ink); color: #fff; }
.article-card h3 { margin: 0; font: 400 25px/1.12 var(--serif); }
.article-card p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--body-2); }
.article-card .meta { display: block; margin-top: 11px; font-size: 11px; }

/* Dated pieces ------------------------------------------------------------ */
.dated { margin: 44px var(--gutter) 0; background: var(--paper-2); border-radius: 14px; padding: 30px 32px; }
.dated__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.dated__head h2 { margin: 10px 0 0; font: 400 34px/1.06 var(--serif); }
.dated__grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dated__card {
  text-decoration: none; background: var(--paper); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.dated__when { font: 400 12px var(--mono); color: var(--red); }
.dated__card h3 { margin: 0; font: 400 23px/1.14 var(--serif); }
.dated__card p { margin: 7px 0 0; font-size: 13px; line-height: 1.6; color: var(--body-2); }

/* Archive ----------------------------------------------------------------- */
.archive { padding: 44px var(--gutter) 0; }
.archive__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--line); padding-bottom: 14px;
}
.archive__head h2 { margin: 0; font: 400 32px var(--serif); }
.archive__row {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) 130px auto; gap: 24px;
  align-items: center; text-decoration: none; padding: 17px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.archive__row:hover { background: var(--sand-2); }
.archive__cat {
  font: 500 9.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red);
}
.archive__title { font: 500 16.5px var(--sans); }
.archive__by { font: 400 12.5px var(--sans); color: var(--body-2); }
.archive__min { font: 400 12px var(--mono); color: var(--muted); white-space: nowrap; }
.archive__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px;
}
.archive__foot .meta { font-size: 12.5px; }

/* --- Legal pages -------------------------------------------------------- */
/* A plain measured column. Deliberately NOT .article-shell, which is a
   three-column grid built around the murals piece, and a page with no table of
   contents and no aside lands in its 180px sidebar. */
.legal-head {
  max-width: 760px; margin: 0 auto;
  padding: 44px var(--gutter) 0;
}
.legal-head h1 {
  margin: 16px 0 0;
  font-size: clamp(42px, 5.4vw, 68px); line-height: .98; letter-spacing: -.025em;
}
.legal-head > p {
  margin: 20px 0 0; max-width: 560px;
  font-size: 17px; line-height: 1.65; color: var(--body-2); text-wrap: pretty;
}
.legal-body {
  max-width: 760px; margin: 0 auto;
  padding: 40px var(--gutter) 0;
}
.legal-body hr {
  border: 0; border-top: 1px solid var(--line-soft); margin: 12px 0 0;
}

@media (max-width: 700px) {
  .legal-head { padding-top: 26px; }
  .legal-body { padding-top: 28px; }
}

/* --- Reveal on scroll ---------------------------------------------------- */
/* Everything here is gated behind html.reveal, which a snippet in <head> only
   adds when JavaScript is running, IntersectionObserver exists and the visitor
   has not asked for reduced motion. Without that class the page is completely
   unaffected, so content can never end up stranded invisible.
 *
 * THE SELECTOR LIST BELOW IS MIRRORED IN site.js (REVEAL_SELECTOR). Change one,
 * change the other, or elements will be hidden with nothing to un-hide them.
 *
 * The hero is deliberately absent. Above-the-fold copy should be there on the
 * first frame, not faded in. */
.reveal .sec-head,
.reveal .grid-4 > *,
.reveal .mosaic > *,
.reveal .panel-dark,
.reveal .rows > *,
.reveal .listing,
.reveal .detail-head,
.reveal .gallery-wrap,
.reveal .handoff,
.reveal .prose > *,
.reveal .numbered > div,
.reveal .cta-strip,
.reveal .sitemap section,
.reveal .signup {
  opacity: 0;
  transform: translateY(12px);
}

/* Painted back in. Short and small on purpose: this should register as the page
   settling, not as an animation anybody watches.
 *
 * The class is doubled to win on specificity. Two of the hide selectors above
 * end in a type selector (`.numbered > div`, `.sitemap section`), which scores
 * 0-2-1 and quietly outranks a single 0-2-0 class pair, leaving those elements
 * stranded at opacity 0 after being marked revealed. */
.reveal .is-revealed.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Belt and braces. If the observer never runs, or a print stylesheet asks for
   the page, everything is visible regardless. */
@media print {
  .reveal .sec-head, .reveal .grid-4 > *, .reveal .mosaic > *, .reveal .panel-dark,
  .reveal .rows > *, .reveal .listing, .reveal .detail-head, .reveal .gallery-wrap,
  .reveal .handoff, .reveal .prose > *, .reveal .numbered > div, .reveal .cta-strip,
  .reveal .sitemap section, .reveal .signup {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Sitemap page ------------------------------------------------------- */
.sitemap { display: flex; flex-direction: column; gap: 38px; }
.sitemap h2 {
  margin: 0 0 4px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  font: 400 27px var(--serif); color: var(--ink);
}
.sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap li {
  display: flex; gap: 4px 14px; align-items: baseline; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.sitemap li:last-child { border-bottom: 0; }
.sitemap a { font: 500 15px var(--sans); color: var(--ink); text-decoration: none; }
.sitemap a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.sitemap li span { font: 400 12.5px var(--sans); color: var(--muted); }

/* The property list is long and each row is short, so it pairs up. */
.sitemap__two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }

@media (max-width: 620px) {
  .sitemap__two { grid-template-columns: minmax(0, 1fr); }
  .sitemap { gap: 30px; }
}

/* --- Cookie bar --------------------------------------------------------- */
.cookiebar {
  position: fixed; z-index: 60;
  left: var(--gutter); right: var(--gutter); bottom: 20px;
  max-width: 720px; margin: 0 auto;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.cookiebar__text { flex: 1 1 300px; min-width: 0; }
.cookiebar__text b { display: block; font: 400 19px var(--serif); color: var(--ink); }
.cookiebar__text p {
  margin: 5px 0 0; font: 400 13px/1.6 var(--sans); color: var(--body-2);
}
.cookiebar__text a { color: var(--body-2); }
.cookiebar__acts { display: flex; gap: 10px; flex: none; }
.cookiebar__acts .btn { padding: 11px 18px; border-radius: 9px; }

@media (max-width: 560px) {
  .cookiebar { left: 12px; right: 12px; bottom: 12px; padding: 16px; gap: 14px; }
  .cookiebar__acts { width: 100%; }
  .cookiebar__acts .btn { flex: 1; justify-content: center; }
}

/* Footer legal row, injected by site.js so both footer variants get it. */
p.foot__legal {
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
  margin: 16px 0 0; max-width: none;
}
.foot__legal button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 13.5px var(--sans); color: rgba(255, 255, 255, .8);
}
.foot__legal button:hover { color: #fff; text-decoration: underline; }

/* Tag name included so these outrank `.signup p`, which is also 0-1-1 and
   would otherwise paint the error message in the muted body colour. */
p.form-note { margin: 14px 0 0; font: 500 13px var(--sans); color: var(--red); }
p.form-note--ok { color: var(--body-2); }

/* --- Footer ------------------------------------------------------------- */
.foot {
  margin-top: 70px; background: var(--ink); color: #fff;
  padding: 44px var(--gutter) 34px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
.foot b { font: 400 24px var(--serif); }
.foot p { margin: 12px 0 0; max-width: 300px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .55); }
.foot__col { display: flex; flex-direction: column; gap: 9px; }
.foot__col > span {
  font: 500 10px var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
.foot a { font: 400 13.5px var(--sans); color: rgba(255, 255, 255, .8); text-decoration: none; width: fit-content; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot--slim {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  padding: 40px var(--gutter) 30px;
}
.foot--slim nav { display: flex; gap: 26px; flex-wrap: wrap; }

/* --- Breadcrumb --------------------------------------------------------- */
.crumbs {
  padding: 22px var(--gutter) 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 400 12px var(--sans); color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs b { font-weight: 400; color: var(--ink); }

/* --- Hotel detail ------------------------------------------------------- */
.detail-head {
  padding: 14px var(--gutter) 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 36px;
}
.detail-head h1 { margin: 12px 0 0; font-size: clamp(40px, 5vw, 62px); line-height: 1; letter-spacing: -.02em; }
.detail-head__id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-head__id i { width: 4px; height: 4px; border-radius: 50%; background: var(--sand); }
.stats { display: flex; gap: 34px; padding-bottom: 8px; }
.stats div b { display: block; font: 400 30px var(--serif); }
.stats div span { font: 400 11px var(--mono); color: var(--muted); }

.gallery {
  padding: 26px var(--gutter) 0;
  display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 190px 190px; gap: 12px;
}
.gallery figure { margin: 0; border-radius: var(--radius); background: var(--sand) center / cover no-repeat; }
.gallery figure:first-child { grid-row: span 2; }
.gallery__more {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 12px;
}
.gallery__more span {
  background: var(--ink); color: #fff; border-radius: 999px;
  padding: 7px 13px; font: 500 11px var(--sans);
}

.detail-body {
  padding: 44px var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 48px; align-items: start;
}
.detail-main { display: flex; flex-direction: column; gap: 40px; }
.detail-main h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0; line-height: 1.1; }
.detail-main h2.lead { font-size: 34px; }
.detail-main > div > p { margin: 14px 0 0; max-width: 620px; font-size: 15px; line-height: 1.7; color: var(--body-2); text-wrap: pretty; }
.amenities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.h-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

.rooms { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.room {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 20px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.room[data-state="sold"] { opacity: .55; }
.room[aria-selected="true"] { border-color: var(--ink); box-shadow: 0 6px 20px rgba(23, 21, 18, .08); }
.room__pic { height: 96px; border-radius: 8px; background: var(--sand) center / cover no-repeat; }
.room h3 { margin: 0; font: 400 22px var(--serif); }
.room__sub { font: 400 13px var(--sans); color: var(--body-2); margin-top: 5px; }
.room__note {
  font: 500 11.5px var(--sans); color: var(--red); margin-top: 8px;
  letter-spacing: .08em; text-transform: uppercase;
}
.room__note.dim { color: var(--muted); }
.room__buy { text-align: right; }
.room__price { font: 400 28px var(--serif); }
.room__buy .meta { display: block; font-size: 11px; margin-top: 2px; }
.room__buy .btn { margin-top: 10px; border-radius: 8px; padding: 10px 20px; font-size: 13px; }

.walks { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.walk {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 12px 2px;
}
.walk b { font: 500 14px var(--sans); }
.walk .meta { font-size: 12.5px; white-space: nowrap; }

.quotes { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quote { background: var(--paper-2); border-radius: var(--radius); padding: 20px; margin: 0; }
.quote p { margin: 0; font: 400 17px/1.55 var(--serif); }
.quote figcaption { font: 400 11.5px var(--mono); color: var(--muted); margin-top: 14px; }

.aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.book {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(23, 21, 18, .08); padding: 20px;
}
.book__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.book__price { display: flex; align-items: baseline; gap: 7px; }
.book__price b { font: 400 34px var(--serif); }
.book__price span { font: 400 12.5px var(--sans); color: var(--muted); }
.book__badge { font: 500 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.book__grid {
  margin-top: 16px; display: grid; gap: 1px; background: rgba(0, 0, 0, .1);
  border-radius: 10px; overflow: hidden;
}
.book__grid .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(0, 0, 0, .1); }
.book__cell { background: #fff; padding: 13px 15px; }
.book__cell label, .book__cell > span {
  display: block; font: 500 9px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.book__cell b, .book__cell input, .book__cell select {
  display: block; width: 100%; margin-top: 3px; border: 0; padding: 0; background: transparent;
  font: 500 14.5px var(--sans); color: var(--ink); -webkit-appearance: none; appearance: none;
}
.book__cell select { cursor: pointer; }

/* The property pages make these cells editable. A cell that is a <label> needs
   telling it is a block; the rest is matching the inputs to the <b> they
   replaced, so the panel reads the same whether or not you can type in it. */
.book__cell { display: block; }
.book__cell input[type="date"] { cursor: pointer; }
.book__cell .guests__trigger { margin-top: 3px; font-size: 14.5px; }
/* The grid clips its children to get rounded corners, which would also clip
   the guests popover. Round the corner cells themselves instead, so the
   popover has somewhere to go. */
.book__grid--edit { overflow: visible; }
.book__grid--edit > .pair { border-radius: 10px 10px 0 0; }
.book__grid--edit > .pair > :first-child { border-top-left-radius: 10px; }
.book__grid--edit > .pair > :last-child { border-top-right-radius: 10px; }
.book__grid--edit > :last-child { border-radius: 0 0 10px 10px; }
.tally { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.tally div { display: flex; justify-content: space-between; font: 400 13.5px var(--sans); color: var(--body-2); }
.tally hr { height: 1px; border: 0; background: var(--line); margin: 4px 0; width: 100%; }
.tally .total { align-items: baseline; color: var(--ink); }
.tally .total span:first-child { font: 500 14.5px var(--sans); }
.tally .total span:last-child { font: 400 26px var(--serif); }
.book .btn--red { margin-top: 16px; }
.book__fine { margin: 11px 0 0; text-align: center; font: 400 11.5px var(--sans); color: var(--muted); }

.side-dark { background: var(--ink); border-radius: 14px; padding: 20px; }
.side-dark b { display: block; font: 400 22px/1.15 var(--serif); color: #fff; margin-top: 9px; }
.side-dark p { margin: 9px 0 0; font: 400 12.5px/1.6 var(--sans); color: rgba(255, 255, 255, .62); }
.side-box { border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.side-list { display: flex; flex-direction: column; gap: 11px; margin-top: 13px; }
.side-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-decoration: none; }
.side-list a b { font: 400 19px var(--serif); }
.side-list a:hover b { color: var(--red); }
.map {
  border-radius: 14px; min-height: 170px;
  background: repeating-linear-gradient(135deg, var(--sand-2) 0 9px, var(--sand) 9px 18px);
  display: flex; align-items: flex-end; padding: 12px;
}
.map span { font: 400 10px var(--mono); color: var(--muted); }

.bookbar, .gallery__count { display: none; }

/* --- Listings ----------------------------------------------------------- */
.search-strip {
  background: var(--ink); padding: 0 var(--gutter) 22px;
  /* Keeps child top margins inside the dark strip. Without this the summary
     card's margin collapses through on mobile, where it is the first visible
     child, and drags the whole strip down, leaving a pale gap under the
     header. */
  display: flow-root;
}
.listing-shell {
  padding: 28px var(--gutter) 0;
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start;
}
.filters { display: flex; flex-direction: column; gap: 26px; position: sticky; top: 16px; }
.filters h2 { font: 400 19px var(--serif); margin: 0; }
.filters__head { display: flex; align-items: baseline; justify-content: space-between; }
.filters__head span:first-child {
  font: 500 9.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.filters__head button { background: none; border: 0; padding: 0; cursor: pointer; font: 400 11.5px var(--sans); color: var(--red); }
/* Sits next to the word "Filters" rather than centred between it and Clear
   all, so the two read as one label. */
.filters__count { margin-right: auto; padding-left: 10px; font: 400 11.5px var(--sans); color: var(--muted); }

/* The running total on each category chip, and the flat state a chip takes
   when pressing it would empty the list. */
.chip__n { margin-left: 7px; opacity: .5; font-variant-numeric: tabular-nums; }
.chip--on .chip__n { opacity: .65; }
.chip:disabled { cursor: not-allowed; opacity: .45; }

/* The way back to the results from a full-screen filter panel. Desktop keeps
   the list beside the panel, so there it would be a button to nowhere. */
.filters__done { display: none; }
.filters hr { height: 1px; border: 0; background: var(--line); margin: 12px 0 0; }
.checks { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font: 400 13.5px var(--sans); }
.check input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }
.check .meta { margin-left: auto; font-size: 11px; }
.range { margin-top: 12px; }
.range__ends { display: flex; align-items: baseline; justify-content: space-between; font: 500 13.5px var(--sans); }
.range__track { position: relative; height: 3px; background: rgba(0, 0, 0, .14); border-radius: 999px; margin-top: 10px; }
.range__fill { position: absolute; left: 8%; right: 22%; top: 0; bottom: 0; background: var(--red); border-radius: 999px; }
.range__knob { position: absolute; top: -5px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); }
.must { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.results-head h1 { margin: 0; font: 400 40px/1.05 var(--serif); }
.results-head p { margin: 8px 0 0; font: 400 13.5px var(--sans); color: var(--body-2); }
.sorts { display: flex; gap: 6px; background: var(--paper-2); border-radius: 999px; padding: 4px; }
.sorts button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  font: 500 12.5px var(--sans); color: var(--body-2); padding: 8px 14px;
}
.sorts button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.results { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.listing {
  display: grid; grid-template-columns: 280px minmax(0, 1fr) 190px; gap: 22px;
  border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.listing:hover { border-color: rgba(0, 0, 0, .3); box-shadow: 0 8px 26px rgba(23, 21, 18, .06); }
.listing--featured { border-color: var(--ink); }
.listing--gone { opacity: .6; }
.listing__pic {
  position: relative; height: 200px; border-radius: 10px; overflow: hidden;
  background: var(--sand) center / cover no-repeat;
  display: flex; align-items: flex-start; justify-content: space-between; padding: 11px;
}
.listing__main { padding: 4px 0; }
.listing__main h3 { margin: 8px 0 0; font: 400 28px var(--serif); }
.listing__main .meta { display: block; margin-top: 6px; font-size: 12.5px; }
.listing__main p { margin: 10px 0 0; max-width: 420px; font-size: 13.5px; line-height: 1.6; color: var(--body-2); }
.listing__tags { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.listing__buy {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  text-align: right; padding: 4px 0; gap: 16px;
}
.listing__score b { display: block; font: 400 26px var(--serif); }
.listing__score .meta { font-size: 10.5px; }
.listing__price b { display: block; font: 400 32px var(--serif); }
.listing__price b.soldout { font-size: 20px; color: var(--muted); }
.listing__price .meta { display: block; font-size: 10.5px; margin-top: 2px; }
.listing__price .btn { margin-top: 12px; border-radius: 9px; padding: 12px 22px; }
.more-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 24px; padding: 18px 0 40px; border-top: 1px solid var(--line);
}
.filter-scroll, .search-summary { display: none; }

/* --- Article ------------------------------------------------------------ */
.article-head {
  padding: 44px var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: end;
}
.article-head h1 { margin: 16px 0 0; font-size: clamp(46px, 6vw, 78px); line-height: .96; letter-spacing: -.025em; }
.article-head > div > p { margin: 20px 0 0; max-width: 520px; font-size: 17px; line-height: 1.65; color: var(--body-2); text-wrap: pretty; }
.article-hero {
  min-height: 400px; border-radius: 14px;
  background: repeating-linear-gradient(135deg, var(--sand-2) 0 9px, var(--sand) 9px 18px);
  display: flex; align-items: flex-end; padding: 14px;
}
.figure-note { font: 400 12px var(--mono); color: var(--muted); }

.article-shell {
  padding: 52px var(--gutter) 0;
  display: grid; grid-template-columns: 180px minmax(0, 660px) 300px; gap: 40px; align-items: start;
}
.toc { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 18px; }
.toc__links { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.toc__links a {
  font: 400 13px var(--sans); color: var(--muted); text-decoration: none;
  border-left: 2px solid rgba(0, 0, 0, .1); padding-left: 10px;
}
.toc__links a.on, .toc__links a:hover { color: var(--ink); font-weight: 500; border-left-color: var(--red); }
.toc hr { height: 1px; border: 0; background: var(--line); margin: 0; }
.toc__acts { display: flex; gap: 7px; }
.toc__acts button {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .18); background: transparent;
  display: flex; align-items: center; justify-content: center; font: 500 12px var(--sans);
}
.toc__acts button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }

.prose { display: flex; flex-direction: column; gap: 26px; }
.prose > p { margin: 0; font-size: 16.5px; line-height: 1.8; color: var(--body); text-wrap: pretty; }
.prose > p.stand-first { font-size: 21px; line-height: 1.6; color: var(--ink); }
.prose h2 { margin: 14px 0 0; font: 400 38px/1.1 var(--serif); scroll-margin-top: 24px; }
.prose h3 { margin: 0; font: 400 26px var(--serif); }
.pair-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0; }
.pic-slot {
  min-height: 300px; border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--sand-2) 0 9px, var(--sand) 9px 18px);
  display: flex; align-items: flex-end; padding: 12px;
}
.caption { font: 400 12px var(--mono); color: var(--muted); margin-top: -16px; }
.numbered { display: flex; flex-direction: column; gap: 22px; margin-top: 6px; }
.numbered > div { display: grid; grid-template-columns: 84px 1fr; gap: 20px; align-items: start; }
.numbered b { font: 400 46px/1 var(--serif); color: var(--sand); }
.numbered p { margin: 8px 0 0; font-size: 15px; line-height: 1.7; color: var(--body); }
.pull { background: var(--ink); border-radius: 14px; padding: 30px 32px; margin: 8px 0; }
.pull blockquote { margin: 14px 0 0; font: 400 30px/1.32 var(--serif); color: #fff; }
.pull cite { display: block; font: 400 12px var(--mono); color: rgba(255, 255, 255, .55); margin-top: 16px; font-style: normal; }
.route { border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.route b { font: 400 24px var(--serif); }
.route__legs { display: flex; flex-direction: column; margin-top: 14px; }
.route__legs div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.route__legs div:last-child { border-bottom: 0; }
.route__legs span:first-child { font: 500 14px var(--sans); }
.cta-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--paper-2); border-radius: 14px; padding: 24px 28px;
}
.cta-strip b { font: 400 25px var(--serif); }
.cta-strip p { margin: 6px 0 0; font: 400 13.5px var(--sans); color: var(--body-2); }
.cta-strip .btn { flex: none; }

.article-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.stay-list { margin-top: 15px; display: flex; flex-direction: column; gap: 13px; }
.stay-list a { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.stay-list i { flex: none; width: 50px; height: 50px; border-radius: 7px; background: #3d3630 center / cover no-repeat; }
.stay-list b { display: block; font: 500 13.5px var(--sans); color: #fff; }
.stay-list span { font: 400 11.5px var(--sans); color: rgba(255, 255, 255, .55); }
.side-dark .btn--red { margin-top: 17px; border-radius: 8px; padding: 12px; font-size: 13.5px; }
.reads { display: flex; flex-direction: column; gap: 12px; margin-top: 13px; }
.reads a { text-decoration: none; }
.reads a b { display: block; font: 400 19px/1.2 var(--serif); }
.reads a:hover b { color: var(--red); }
.reads a .meta { font-size: 11px; margin-top: 4px; display: block; }
.reads hr { height: 1px; border: 0; background: var(--line-soft); margin: 0; }
.side-signup { background: var(--paper-2); border-radius: 14px; padding: 20px; }
.side-signup b { display: block; font: 400 21px/1.15 var(--serif); margin-top: 9px; }
.side-signup input {
  width: 100%; margin-top: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 9px; padding: 11px 13px; font: 400 13.5px var(--sans); color: var(--ink);
}
.side-signup input::placeholder { color: #a8a29a; }
.side-signup .btn { margin-top: 8px; border-radius: 9px; padding: 12px; font-size: 13.5px; }

/* --- Scroll shelves (mobile) -------------------------------------------- */
.shelf { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.shelf > * { flex: none; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --gutter: 28px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .panel-dark, .signup { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 190px 190px; }
  .tile--tall { grid-row: span 1; grid-column: span 2; }
  .tile--wide { grid-column: span 2; }
  .detail-body { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; }
  .listing-shell { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .article-grid, .dated__grid { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature__pic { min-height: 300px; }
  .listing { grid-template-columns: 220px minmax(0, 1fr); }
  .listing__buy { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; }
  .article-shell { grid-template-columns: minmax(0, 1fr) 280px; }
  .toc { display: none; }
  .article-head { grid-template-columns: minmax(0, 1fr); }
  .foot { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Mobile: mirrors options 2a / 3b / 4b / 5b of the canvas
   ========================================================================== */
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  .head { padding: 14px var(--gutter) 18px; }
  .head--over { padding: 16px var(--gutter) 0; }
  .brand b, .head--over .brand b { font-size: 21px; }
  .brand span { font-size: 7.5px; letter-spacing: .2em; }
  .burger { display: flex; }
  .nav, .head--over .nav {
    position: fixed; inset: 0 0 auto; top: 0; z-index: 30;
    backdrop-filter: none;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--ink); border: 0; border-radius: 0;
    padding: 76px 20px 24px;
    transform: translateY(-102%); transition: transform .28s ease;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { font-size: 19px; padding: 14px 16px; text-align: left; }
  .nav a[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; padding: 14px 16px; }
  .nav__close {
    display: block; position: absolute; top: 18px; right: 16px;
    width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2);
    color: #fff; font-size: 17px; line-height: 1;
  }

  .hero {
    min-height: 600px; padding-bottom: 96px;
    /* A 16:9 frame centre-cropped into a portrait box keeps about a third of
       its width, which loses the subject of most of these shots. This one is
       framed upright. */
    background-image: url('../img/hero-poster-mobile.jpg?v=f44ba5a8');
  }
  .hero::before { background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .34) 32%, rgba(0, 0, 0, .85) 66%, rgba(0, 0, 0, .94) 100%); }
  h1.display { font-size: 48px; line-height: .94; }
  .hero p { font-size: 14px; line-height: 1.55; }
  .flag { padding: 5px 11px 5px 7px; margin-bottom: 16px; }
  .flag span { font-size: 9px; letter-spacing: .12em; }

  .searchbar { grid-template-columns: 1fr 1fr; gap: 1px; padding: 6px; background: rgba(0, 0, 0, .08); }
  .searchbar--flush { margin: -78px 16px 0; background: var(--paper); box-shadow: 0 14px 34px rgba(23, 21, 18, .2); padding: 6px; }
  .field { background: var(--paper); border-right: 0; padding: 13px 16px; grid-column: span 2; }
  .field--half { grid-column: span 1; }
  .field label { font-size: 9px; }
  .field select, .field input { font-size: 15px; margin-top: 3px; }
  .searchbar .btn--square { grid-column: span 2; margin: 1px 0 0; width: 100%; }

  .section { padding: 40px var(--gutter) 0; }
  .section--tight { padding-top: 40px; }
  .sec-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .sec-head__aside { max-width: none; }
  h2.display { font-size: 32px; line-height: 1.06; }

  .grid-4 { grid-template-columns: 1fr; gap: 20px; margin-top: 22px; }
  .hotel-card__pic { height: 210px; padding: 11px; }
  .hotel-card h3 { font-size: 22px; }

  .panel-dark { margin: 40px 16px 0; padding: 26px 20px; border-radius: 14px; }
  .panel-dark h2 { font-size: 30px; }
  .panel-dark .btn { display: flex; width: 100%; justify-content: center; }
  .fixture { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; }
  .fixture__date { grid-column: 1; font-size: 10.5px; }
  .fixture__tie { grid-column: 1; font-size: 14px; }
  .fixture__from { grid-column: 2; grid-row: 1; text-align: right; }
  .fixture__left { grid-column: 2; grid-row: 2; text-align: right; font-size: 11px; }

  .mosaic { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; margin-top: 20px; }
  .tile { min-height: 200px; grid-column: auto !important; grid-row: auto !important; }
  .tile--tall { min-height: 260px; }
  .tile--tall h3 { font-size: 30px; }
  .tile--wide { flex-direction: column; align-items: flex-start; }
  .tile--wide .arrow--lg { display: none; }

  .rows { margin-top: 16px; }
  .row-event { grid-template-columns: 1fr auto; gap: 4px 14px; padding: 16px 2px; }
  .row-event__date { grid-column: 1; }
  .row-event__name { grid-column: 1; font-size: 15px; }
  .row-event__where { grid-column: 1; font-size: 12.5px; }
  .row-event__price { grid-column: 2; grid-row: 2; }

  .signup { margin: 40px 16px 0; padding: 26px 20px; border-radius: 14px; }
  .signup h2 { font-size: 30px; }
  .signup__field { flex-direction: column; }
  .signup__field button { justify-content: center; }

  .foot { grid-template-columns: 1fr 1fr; gap: 26px; padding: 34px var(--gutter) 30px; }
  .foot > div:first-child { grid-column: span 2; }
  .foot--slim { flex-direction: column; align-items: stretch; gap: 22px; }

  /* Hotel detail */
  .crumbs { display: none; }
  .detail-head { flex-direction: column; align-items: stretch; gap: 0; padding-top: 20px; }
  .detail-head h1 { font-size: 40px; margin-top: 10px; }
  .stats {
    gap: 0; margin-top: 18px; padding: 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .stats div { flex: 1; padding: 13px 0; }
  .stats div + div { border-left: 1px solid rgba(0, 0, 0, .1); padding-left: 14px; }
  .stats div b { font-size: 22px; }
  .stats div span { font-size: 10px; }

  .gallery {
    grid-template-columns: none; grid-template-rows: none; gap: 0;
    padding: 0; margin-top: 0;
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery figure {
    flex: none; width: 100%; height: 300px; border-radius: 0; scroll-snap-align: start;
  }
  .gallery__count {
    display: block; position: absolute; right: 16px; bottom: 12px; z-index: 2;
    background: rgba(23, 21, 18, .62); color: #fff; border-radius: 999px;
    padding: 6px 12px; font: 500 11px var(--sans);
  }
  .gallery-wrap { position: relative; }
  .gallery__more span { display: none; }

  .detail-body { padding: 24px var(--gutter) 0; gap: 34px; }
  .detail-main { gap: 34px; }
  .detail-main h2 { font-size: 26px; }
  .detail-main h2.lead { font-size: 26px; line-height: 1.12; }
  .detail-main > div > p { font-size: 13.5px; line-height: 1.65; }
  .amenities {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 16px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter);
  }
  .amenities::-webkit-scrollbar { display: none; }
  .amenities .chip { flex: none; }
  .room { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
  .room h3 { font-size: 19px; }
  .room__pic { height: 76px; }
  .room__buy { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .room__buy .btn { margin-top: 0; }
  .room__buy .meta { display: inline; margin-left: 6px; }
  .walks, .quotes { grid-template-columns: 1fr; }
  .aside { gap: 14px; }
  .book { position: static; }
  .bookbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: var(--paper); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(23, 21, 18, .12);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .bookbar b { font: 400 24px var(--serif); }
  .bookbar .meta { font-size: 10.5px; display: block; }
  body.has-bookbar { padding-bottom: 86px; }

  /* Listings */
  .filters__done { display: block; width: 100%; }
  .search-strip { padding: 0 var(--gutter) 18px; }
  .searchbar--inline { display: none; }
  .search-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; background: var(--paper); border-radius: 12px; padding: 13px 16px;
    width: 100%; border: 0; text-align: left; cursor: pointer;
  }
  .search-summary b { display: block; font: 500 14.5px var(--sans); }
  .search-summary span { font: 400 11.5px var(--sans); color: var(--muted); margin-top: 3px; display: block; }
  .search-summary em { font: 500 12px var(--sans); color: var(--red); font-style: normal; white-space: nowrap; }
  .listing-shell { grid-template-columns: minmax(0, 1fr); padding: 18px var(--gutter) 0; gap: 0; }

  /* Explore index */
  .explore-head { flex-direction: column; align-items: stretch; gap: 18px; padding-top: 30px; }
  .explore-head > p { max-width: none; }
  .explore-bar { flex-direction: column; align-items: stretch; gap: 14px; }
  /* The chips scroll sideways rather than stacking into four rows and pushing
     the first article off the screen. */
  .explore-bar__chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  }
  .explore-bar__chips::-webkit-scrollbar { display: none; }
  .explore-bar__chips .chip { flex: none; }
  .feature__pic { min-height: 220px; }
  .feature__body { padding: 26px 22px; gap: 22px; }
  .feature__body h2 { font-size: 32px; }
  .feature__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .article-grid, .dated__grid { grid-template-columns: minmax(0, 1fr); }
  .article-card__pic { height: 200px; }
  .dated { padding: 24px 20px; }
  .dated__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dated__head h2 { font-size: 28px; }
  .archive__head h2 { font-size: 26px; }
  /* Author and read time drop away; the category and title are what anyone
     actually scans a list like this for. */
  .archive__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 15px 2px; }
  .archive__by, .archive__min { display: none; }
  .archive__foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .filters { display: none; position: static; }
  .filters[data-open="true"] { display: flex; margin-bottom: 26px; }
  .filter-scroll {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 16px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter);
  }
  .filter-scroll::-webkit-scrollbar { display: none; }
  .filter-scroll .chip { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 9px 14px; cursor: pointer; }
  .filter-scroll .chip b { background: var(--red); border-radius: 999px; padding: 1px 6px; font: 700 10px var(--sans); color: #fff; }
  .results-head { flex-direction: column; align-items: stretch; gap: 0; }
  .results-head h1 { font-size: 34px; }
  .sorts { display: none; }
  .results { margin-top: 20px; }
  .listing { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
  .listing__pic { height: 180px; border-radius: 0; }
  .listing__main { padding: 14px 16px 0; }
  .listing__main h3 { font-size: 24px; }
  .listing__main p { font-size: 12.5px; }
  .listing__tags { display: none; }
  .listing__buy {
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    padding: 14px 16px 16px; gap: 14px; text-align: left;
  }
  .listing__buy { align-items: flex-start; }
  .listing__score { order: 2; text-align: right; }
  .listing__score b { font-size: 20px; }
  .listing__price b { font-size: 26px; }
  .listing__price .btn { margin-top: 8px; }
  .more-bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .more-bar .btn { justify-content: center; }

  /* Article */
  .article-head { padding-top: 24px; gap: 22px; }
  .article-head h1 { font-size: 46px; }
  .article-head > div > p { font-size: 15px; }
  .article-hero { min-height: 240px; order: -1; }
  .article-shell { grid-template-columns: minmax(0, 1fr); padding: 30px var(--gutter) 0; gap: 34px; }
  .article-aside { position: static; }
  .prose { gap: 22px; }
  .prose > p { font-size: 15px; line-height: 1.75; }
  .prose > p.stand-first { font-size: 18px; }
  .prose h2 { font-size: 28px; }
  .pair-pics { grid-template-columns: 1fr; }
  .pic-slot { min-height: 220px; }
  .numbered > div { grid-template-columns: 52px 1fr; gap: 12px; }
  .numbered b { font-size: 32px; }
  .numbered h3 { font-size: 21px; }
  .pull { padding: 24px 20px; }
  .pull blockquote { font-size: 24px; }
  .cta-strip { flex-direction: column; align-items: stretch; gap: 16px; }
  .cta-strip .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  /* Anyone who has asked the OS for less motion gets the still frame. */
  .hero__video { display: none; }
}


/* ==========================================================================
   Affiliate layer: search card, curated directory, Booking.com handoff
   ========================================================================== */

/* --- Search card -------------------------------------------------------- */
.searchbar { position: relative; }
.field input[type="text"], .field input[type="search"] { outline: 0; }
.field input::placeholder { color: #a8a29a; }

/* Guests popover */
.guests { position: relative; }
.guests__trigger {
  display: block; width: 100%; margin-top: 5px; padding: 0;
  border: 0; background: transparent; text-align: left; cursor: pointer;
  font: 500 16px var(--sans); color: var(--ink);
}
.guests__panel {
  position: absolute; z-index: 12; right: 0; top: calc(100% + 10px);
  width: 268px; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(23, 21, 18, .18);
}
.guests__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.guests__row b { display: block; font: 500 14px var(--sans); }
.guests__row span { font: 400 11.5px var(--sans); color: var(--muted); }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .2); background: #fff; color: var(--ink);
  font: 500 15px/1 var(--sans);
}
.stepper button:hover { background: var(--paper-2); }
.stepper output { min-width: 18px; text-align: center; font: 500 14px var(--sans); }

/* "What are you after?" multi-select popover. Shares the guests popover's
   shape so the two controls sitting side by side read as one card. */
.picker { position: relative; }
.picker__trigger {
  display: block; width: 100%; margin-top: 5px; padding: 0;
  border: 0; background: transparent; text-align: left; cursor: pointer;
  font: 500 16px var(--sans); color: #a8a29a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.picker--set .picker__trigger { color: var(--ink); }
.picker__panel {
  position: absolute; z-index: 12; left: 0; top: calc(100% + 10px);
  width: min(320px, calc(100vw - 48px)); padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(23, 21, 18, .18);
}
.picker__heading {
  margin: 10px 0 4px;
  font: 500 9.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.picker__heading:first-child { margin-top: 0; }
.picker__row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; cursor: pointer;
}
.picker__row input { margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ink); }
.picker__row b { display: block; font: 500 14px var(--sans); color: var(--ink); }
.picker__row span span { display: block; font: 400 11.5px var(--sans); color: var(--muted); }
.picker__row:hover b { text-decoration: underline; }

/* --- Walking times to the ground ---------------------------------------- */
/* Only the Racecourse category page carries this. It is the one piece of data
   on the site nobody else publishes, so it gets to look like a fixture board
   rather than a table of numbers. */
.walk-table-wrap { overflow-x: auto; margin: 30px 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.walk-table { border-collapse: collapse; width: 100%; min-width: 460px; }
.walk-table caption {
  caption-side: top; text-align: left; padding: 16px 20px 12px;
  font: 400 11.5px var(--sans); color: var(--muted);
}
.walk-table th, .walk-table td {
  text-align: left; padding: 11px 20px;
  border-top: 1px solid var(--line-soft); font-size: 14px;
}
.walk-table thead th {
  border-top: 1px solid var(--line);
  font: 500 9.5px var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.walk-table td a { color: var(--ink); font-weight: 500; text-decoration: none; }
.walk-table td a:hover { text-decoration: underline; }
.walk-table__n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.walk-table tbody .walk-table__n { font-weight: 500; color: var(--ink); }
.walk-table tbody tr:first-child .walk-table__n { color: var(--red); }

/* --- Placeholder tiles for properties we have no photograph of ---------- */
.pic-mark {
  position: relative;
  background: repeating-linear-gradient(135deg, var(--sand-2) 0 9px, var(--sand) 9px 18px);
  display: flex; align-items: center; justify-content: center;
}
.pic-mark__letter {
  font: 400 clamp(48px, 9vw, 92px)/1 var(--serif);
  color: rgba(23, 21, 18, .22);
  user-select: none;
}
.hotel-card__pic.pic-mark { align-items: flex-start; justify-content: flex-start; }
.hotel-card__pic.pic-mark span[aria-hidden] {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 400 76px/1 var(--serif); color: rgba(23, 21, 18, .2);
}
.listing__pic.pic-mark { overflow: hidden; }

/* --- Result states ------------------------------------------------------ */
.state { padding: 44px 0; text-align: center; }
.state h2 { margin: 0 0 8px; font: 400 28px var(--serif); }
.state p { margin: 0 auto; max-width: 460px; font-size: 14px; line-height: 1.6; color: var(--body-2); }
.state .btn { margin-top: 18px; }

.notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--paper-2); border-radius: 12px; padding: 14px 16px;
  font: 400 13px/1.55 var(--sans); color: var(--body-2);
}
.notice b { color: var(--ink); }

.stars { color: var(--red); letter-spacing: .08em; font-size: 11px; }

/* --- Listing card, affiliate variant ------------------------------------ */
.listing__price .btn--red { margin-top: 12px; border-radius: 9px; padding: 12px 20px; }
.btn-quiet {
  display: block; margin-top: 9px;
  font: 500 12px var(--sans); color: var(--body-2); text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-quiet:hover { color: var(--ink); }

/* --- Hotel page: the handoff block -------------------------------------- */
.handoff {
  margin-top: 18px;
  border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px;
  background: var(--paper);
}
.handoff__brand { margin-bottom: 12px; }
.handoff__brand b { display: block; margin-top: 4px; font: 400 26px var(--serif); }
.handoff p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--body-2); }
.handoff .btn { margin-top: 18px; }
.handoff .book__fine { text-align: left; margin-top: 12px; }

.gallery-wrap--single .gallery { grid-template-columns: 1fr; grid-template-rows: 320px; }
.gallery-wrap--single .gallery figure:first-child { grid-row: auto; }

/* --- Affiliate disclosure ----------------------------------------------- */
.disclosure {
  margin: 44px var(--gutter) 0;
  padding: 16px 18px;
  border-left: 2px solid var(--red);
  background: var(--paper-2); border-radius: 0 10px 10px 0;
  font: 400 12.5px/1.6 var(--sans); color: var(--body-2);
  max-width: 720px;
}
.listing-shell .disclosure, .detail-body ~ .disclosure { margin-left: 0; margin-right: 0; }

/* --- Dev-only nudge when CJ tracking is unset --------------------------- */
#dev-notices {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 620px; margin: 0 auto;
  pointer-events: none;
}
#dev-notices > * { pointer-events: auto; }

.cj-warning {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0;
  background: var(--ink); color: #fff;
  border-radius: 12px; padding: 13px 16px;
  font: 400 12.5px/1.5 var(--sans);
  box-shadow: 0 16px 40px rgba(23, 21, 18, .3);
}
.cj-warning b { color: var(--peach); }
.cj-warning code {
  font: 400 11.5px var(--mono); background: rgba(255, 255, 255, .12);
  padding: 2px 6px; border-radius: 4px;
}
.cj-warning button {
  margin-left: auto; flex: none;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .14); border: 0; color: #fff; font-size: 12px;
}

/* --- Sticky check bar on the hotel page --------------------------------- */
.bookbar b { font: 400 19px/1.15 var(--serif); display: block; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 767px) {
  #dev-notices { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
  .cj-warning { padding: 10px 12px; font-size: 11.5px; gap: 8px; }
  .cj-warning .where { display: none; }
  .guests__panel { right: auto; left: 0; width: min(300px, calc(100vw - 48px)); }
  .pic-mark__letter { font-size: 64px; }
  .handoff { padding: 20px; }
  .disclosure { margin: 34px 0 0; }
  .listing__price .btn--red { margin-top: 8px; }
  .btn-quiet { margin-top: 8px; }
  .gallery-wrap--single .gallery { grid-template-rows: none; }
  .gallery-wrap--single .gallery figure { height: 240px; }
}

/* --- Fixture list page -------------------------------------------------- */
.next-up {
  margin: 30px var(--gutter) 0;
  background: var(--ink); border-radius: 16px; padding: 30px 32px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.next-up__act { text-align: right; flex: none; }
.next-up__act .btn { margin-top: 12px; }

.fx-month {
  margin: 30px 0 10px;
  font: 500 9.5px var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.fx-month:first-child { margin-top: 18px; }

.fx {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto auto;
  gap: 22px; align-items: center;
  padding: 15px 6px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
  transition: background-color .18s ease;
}
a.fx:hover { background: var(--paper-2); }

.fx__date { text-align: center; }
.fx__date b { display: block; font: 400 26px/1 var(--serif); }
.fx__date span {
  display: block; margin-top: 3px;
  font: 400 10px var(--mono); color: var(--muted); letter-spacing: .1em;
}

.fx__tie b { display: block; font: 500 16px var(--sans); }
.fx__tie .meta { display: block; margin-top: 3px; font-size: 11.5px; }

.fx__stay { font: 400 12.5px var(--mono); color: var(--body-2); text-align: right; white-space: nowrap; }
.fx__cta { text-align: right; }
.fx__cta .btn { padding: 10px 18px; font-size: 12.5px; }

.fx--played { opacity: .5; }
.fx--played .fx__cta .meta {
  font: 500 11px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}

@media (max-width: 900px) {
  .fx { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; }
  .fx__stay {
    grid-column: 2 / -1; grid-row: 2;
    text-align: left; white-space: normal; font-size: 11.5px; margin-top: -4px;
  }
}

@media (max-width: 767px) {
  .next-up {
    margin: 24px var(--gutter) 0; padding: 24px 20px;
    flex-direction: column; align-items: stretch; gap: 20px;
  }
  .next-up__act { text-align: left; }
  .next-up__act .btn { display: flex; justify-content: center; }
  .fx { padding: 14px 2px; }
  .fx__tie b { font-size: 15px; }
  .fx__cta .btn { padding: 9px 14px; font-size: 12px; }
}