/* =====================================================================
   AMBIORA HOTELS — v2 inner pages

   Loaded after v2.css, which owns the tokens, the base, the shared
   primitives and the homepage. This file owns everything the other
   pages need.

   The rule that governs it: no two page types may share a structural
   archetype. Slabs, atlases, swap indexes, tables, masonry, accordions
   and fact sheets each belong to one page and are not reused elsewhere.
   ===================================================================== */


/* =====================================================================
   SHARED — things more than one inner page needs
   ===================================================================== */

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }

/* Same reason as .detail: any two-column grid whose child can be wider
   than its track needs the track allowed to shrink. */
.dintro > *, .eco > *, .sheet > *, .legal > *,
.contact > *, .essay > *, .swap > * { min-width: 0; }

.eyebrow--onDark { color: var(--on-dark-45); }

.rule--bone { background: var(--bone); }

.btn--ghost {
  background: transparent;
  color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(245, 241, 232, 0.45);
}
.btn--ghost:hover { background: rgba(245, 241, 232, 0.12); }

/* Body copy at a real measure. Inner pages carry much more prose than
   the homepage, so this is where the reading rules live. */
.prose { color: var(--ink-70); max-width: 68ch; }
.prose p + p { margin-top: 1.1rem; }
.prose--lead { font-size: var(--fs-lede); color: var(--ink); max-width: 62ch; }
.prose a { border-bottom: 1px solid var(--brand); }
.prose a:hover { color: var(--brand-ink); }

/* An honest empty state. Deliberately typographic — a grey box with a
   picture icon would imply a photograph is merely missing. */
.empty {
  border-left: 3px solid var(--brand);
  padding: 1rem 0 1rem 1.25rem;
  color: var(--ink-70);
  max-width: 60ch;
}
.empty--sm { font-size: 0.9375rem; }

.pending {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: var(--clay);
  border-radius: var(--r);
  padding: 1.1rem 1.25rem;
  color: var(--ink-70);
  font-size: 0.9375rem;
  max-width: 68ch;
  margin-top: 2rem;
}
.pending__mark {
  flex: none;
  width: 10px; height: 10px; margin-top: 0.45rem;
  background: var(--brand);
  border-radius: 50%;
}

/* Definition rows on hairlines — facts, specs, fact sheets. */
.spec { margin: 2.5rem 0 0; }
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1rem 2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.spec__row:last-child { border-bottom: 1px solid var(--rule); }
.spec dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.spec dd { margin: 0; color: var(--ink-70); }
.spec dt a { border-bottom: 1px solid var(--brand); }

/* Small pill list for facilities. Not a button — no hover, no link. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.chips li {
  font-size: 0.8125rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r);
  background: rgba(42, 33, 28, 0.06);
  color: var(--ink-70);
}
.chips--centred { justify-content: center; }

.ticks { margin-top: 1rem; }
.ticks li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--ink-70);
}
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px;
  background: var(--brand);
  border-radius: 2px;
}
.ticks--lg li { margin-bottom: 1rem; }
.ticks__house {
  display: block;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--brand-ink);
}

.crumbs {
  display: flex; gap: 0.6rem; align-items: center;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--on-dark-45);
  margin-bottom: 1.5rem;
}
.crumbs a:hover { color: var(--bone); }

.amen__title {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink-45);
  margin-bottom: 0.9rem;
}

/* A closing statement band. Four grounds so it never repeats a colour
   already used directly above it. */
.stmt { padding: clamp(3rem, 2rem + 4vw, 6rem) var(--gutter); }
.stmt__in { max-width: 760px; margin-inline: auto; text-align: center; }
.stmt__in .rule { margin: 0 auto 1.75rem; }
.stmt__text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.stmt__text--onDark { color: var(--on-dark); }
.stmt--clay     { background: var(--clay); }
.stmt--sage     { background: var(--sage); }
.stmt--espresso { background: var(--espresso); }


/* =====================================================================
   MASTHEAD — one component, four grounds
   ===================================================================== */

.mast { padding: clamp(3rem, 2rem + 4vw, 6.5rem) var(--gutter) clamp(2.5rem, 4vw, 4.5rem); }
.mast__in { max-width: var(--max); margin-inline: auto; }

.mast__title {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  max-width: 20ch;
}
.mast__lede {
  margin-top: 1.5rem;
  max-width: 58ch;
  font-size: var(--fs-lede);
}

.mast__meta {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.mast__meta-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  opacity: 0.6;
}
.mast__meta-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600;
  margin-top: 0.25rem;
}

.mast--bone     { background: var(--bone);  color: var(--ink); }
.mast--clay     { background: var(--clay);  color: var(--ink); }
.mast--espresso { background: var(--espresso); color: var(--on-dark); }
.mast--brand { background: var(--brand); color: var(--bone); }
.mast--sage     { background: var(--sage);  color: var(--bone); }

.mast--espresso .mast__lede,
.mast--brand .mast__lede,
.mast--sage .mast__lede { color: var(--on-dark-70); }

.mast--espresso .mast__meta,
.mast--brand .mast__meta,
.mast--sage .mast__meta { border-top-color: var(--rule-dark); }

.mast--bone .mast__lede,
.mast--clay .mast__lede { color: var(--ink-70); }


/* =====================================================================
   HOUSES INDEX — alternating full-bleed slabs
   ===================================================================== */

.slab {
  display: grid;
  grid-template-columns: 56fr 44fr;
  align-items: stretch;
  min-height: clamp(420px, 52vw, 680px);
}
.slab--flip .slab__media { order: 2; }

.slab__media { position: relative; }
.slab__media .figure { height: 100%; aspect-ratio: auto; border-radius: 0; }

.slab__panel {
  position: relative;
  background: var(--espresso);
  color: var(--on-dark);
  padding: clamp(2rem, 1rem + 3vw, 4rem);
  display: flex; flex-direction: column; justify-content: center;
}
/* Every other slab flips to clay so the page alternates rather than
   running as one long dark column. */
.slab:nth-child(even) .slab__panel { background: var(--clay); color: var(--ink); }
.slab:nth-child(even) .slab__body,
.slab:nth-child(even) .slab__points li { color: var(--ink-70); }

.slab__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--brand-accent);
  margin-bottom: 1rem;
}
.slab__name {
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.slab__line {
  margin-top: 0.75rem;
  font-size: var(--fs-lede);
  font-weight: 500;
}
.slab__body { margin-top: 1rem; color: var(--on-dark-70); max-width: 44ch; }

.slab__points { margin-top: 1.5rem; display: grid; gap: 0.5rem; }
.slab__points li {
  position: relative; padding-left: 1.4rem;
  font-size: 0.9375rem; color: var(--on-dark-70);
}
.slab__points li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 2px; background: var(--brand);
}

.slab__actions {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; margin-top: 2rem;
}

.note-band { background: var(--brand); padding: clamp(2rem, 4vw, 3.5rem) var(--gutter); }
.note-band__in {
  max-width: var(--max); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.note-band__text {
  color: var(--bone);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  max-width: 44ch;
}


/* =====================================================================
   HOUSE DETAIL
   ===================================================================== */

.phero { position: relative; min-height: clamp(460px, 68vh, 760px); display: flex; align-items: flex-end; }
.phero__media { position: absolute; inset: 0; }
.phero__media .figure { height: 100%; aspect-ratio: auto; border-radius: 0; }
.phero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 20, 17, 0.88) 0%, rgba(26, 20, 17, 0.35) 45%, rgba(26, 20, 17, 0.1) 100%);
}
.phero__in {
  position: relative;
  max-width: var(--max); width: 100%;
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(2.5rem, 5vw, 4.5rem);
  color: var(--on-dark);
}
.phero__title {
  font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.5rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 0.98;
}
.phero__where {
  margin-top: 0.75rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600;
  color: var(--brand-accent);
}
.phero__line { margin-top: 1rem; font-size: var(--fs-lede); color: var(--on-dark-70); max-width: 44ch; }
.phero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

.factstrip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--espresso);
  border-top: 1px solid var(--rule-dark);
}
.factstrip__item {
  padding: clamp(1.25rem, 2.5vw, 2rem) var(--gutter);
  border-left: 1px solid var(--rule-dark);
}
.factstrip__item:first-child { border-left: 0; }
.factstrip__label {
  display: block;
  font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: 0.16em; font-weight: 600;
  color: var(--on-dark-45);
}
.factstrip__value {
  display: block; margin-top: 0.4rem;
  font-family: var(--font-display); font-weight: 600;
  color: var(--on-dark); font-size: 1.0625rem;
}

.detail {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
/* Grid items default to min-width:auto, which means a child that scrolls
   horizontally (the rooms rail, the section rail) stretches its column to
   the child's full content width instead of scrolling inside it. Both
   columns have to be allowed to shrink or the whole page overflows. */
.detail__rail, .detail__body { min-width: 0; }

.detail__rail { position: sticky; top: calc(var(--hdr-h) + 1.5rem); }
.detail__rail ul { display: grid; gap: 0.5rem; border-left: 2px solid var(--rule); }
.detail__rail a {
  display: block; padding: 0.3rem 0 0.3rem 1rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink-45);
}
.detail__rail a:hover { color: var(--brand-ink); }

.dsec { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.dsec + .dsec { border-top: 1px solid var(--rule); padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.dsec__title {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 600; letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
.dsec__note { margin-top: 1.25rem; color: var(--ink-45); font-size: 0.9375rem; max-width: 64ch; }

/* Rooms — a horizontal rail, because the grades differ by a line or two
   and read better side by side than stacked. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.rcard {
  scroll-snap-align: start;
  background: var(--clay);
  border-radius: var(--r);
  padding: 1.5rem;
}
.rcard__name {
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;
}
.rcard__desc { margin-top: 0.6rem; color: var(--ink-70); font-size: 0.9375rem; }
.rcard__specs {
  margin-top: 0.85rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--brand-ink);
}
.rcard__amen { margin-top: 1rem; display: grid; gap: 0.35rem; }
.rcard__amen li {
  font-size: 0.8125rem; color: var(--ink-70);
  padding-left: 1rem; position: relative;
}
.rcard__amen li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-45);
}

.amen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.amen__group ul { display: grid; gap: 0.5rem; }
.amen__group li {
  padding: 0.5rem 0; border-top: 1px solid var(--rule);
  font-size: 0.9375rem; color: var(--ink-70);
}

.gstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }

.loc { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: 2rem; }
.loc__addr { color: var(--ink-70); }
.loc__meta { margin-top: 0.75rem; color: var(--ink-45); font-size: 0.9375rem; }

.nearby { display: grid; gap: 0; }
.nearby li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 0.65rem 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-70); font-size: 0.9375rem;
}
.nearby__t {
  flex: none;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--brand-ink);
}

.related { padding-bottom: var(--section-y); }
.related__grid {
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.rel__media { display: block; overflow: hidden; border-radius: var(--r); }
.rel__media .figure { transition: transform 600ms var(--ease); }
.rel:hover .rel__media .figure { transform: scale(1.03); }
.rel__name {
  display: block; margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em;
}
.rel__where {
  display: block; margin-top: 0.3rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--brand-ink);
}


/* =====================================================================
   DESTINATIONS — the register
   ---------------------------------------------------------------------
   .apanel below is NOT part of this page any more — the homepage still
   uses it for its destination panel, which is why it survives the
   atlas's removal. Everything from .dent down is the rebuilt page.
   ===================================================================== */

/* ---- The entry ------------------------------------------------------
   Words first, photograph second, both full width. The positioning line
   is the largest type on the page because it is the best sentence the
   record holds; a layout that made it a caption would be hiding the
   only real writing there is. */
.dent { padding-block: var(--section-y) 0; }
.dent__in {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.dent__index {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.dent__num {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 600;
  color: var(--brand-accent);
  line-height: 1;
}
.dent__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1;
}
/* --ink-70, not --ink-45. At 11px with heavy tracking the lighter
   token measures 3.52:1 on bone, under the 4.5 small-text threshold.
   It is fine at display sizes, which is where the rest of the site
   uses it. */
.dent__country {
  margin-left: auto;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink-70);
}

.dent__line {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 3.6vw, 4.5rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.02;
}
.dent__body {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  max-width: 46ch;
  font-size: var(--fs-lede);
  color: var(--ink-70);
}

.dent__facts {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.dent__factN {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  font-weight: 600; line-height: 1;
}
.dent__factL {
  display: block; margin-top: 0.3rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink-70);
}

/* The tags are set as a running line rather than pills. The site already
   has a chips component and a tile grid; a third boxed treatment for the
   same idea is how a page starts looking like every other page. */
.dent__tags {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.9375rem;
}
.dent__tags a { color: var(--ink-70); text-decoration: none; }
.dent__tags a:hover { color: var(--brand-ink); }
.dent__tags a + a::before {
  content: "·";
  margin-right: 0.9rem;
  color: var(--ink-45);
}

.dent__cta { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.dent__shot {
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
}
.dent__shot .figure { border-radius: 0; }

/* ---- The reach ------------------------------------------------------
   The one section on this page carrying hard facts about the ground
   rather than about the group, so it gets the clay and the biggest
   numerals. Set as a ruled list: the minutes are the column the eye
   runs down, which is how the information is actually used. */
.dreach {
  background: var(--clay);
  margin-top: var(--section-y);
  padding-block: var(--section-y);
}
.dreach__in {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.dreach__note {
  margin-top: 1rem;
  max-width: 52ch;
  color: var(--ink-70);
}
/* A packed grid, not rows. auto-fit so it is four across on a desktop,
   three on a laptop and two on a phone without a breakpoint each. */
.dreach__grid {
  list-style: none;
  margin: clamp(1.75rem, 3.5vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
/* The 1px gap plus a filled parent draws every divider in the grid with
   no rule per cell and no double lines where tiles meet. */
.dtile {
  background: var(--clay);
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex; flex-direction: column;
}
.dtile__time {
  display: flex; align-items: baseline; gap: 0.3rem;
  color: var(--brand-ink);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.dtile__mins {
  font-size: clamp(2rem, 1.2rem + 2vw, 3rem);
  font-weight: 600; line-height: 1;
}
.dtile__unit {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
}
.dtile__place {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.2;
}
.dtile__from {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--ink-70);
}
.dreach__rest { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.dreach__restHead {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink-70);
}
.dreach__restList {
  margin-top: 0.6rem;
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem;
  color: var(--ink-70);
}
.dreach__restList span + span::before {
  content: "·";
  margin-right: 0.85rem;
  color: var(--ink-45);
}

/* ---- The register ---------------------------------------------------
   Back on bone with a rule above it, so the run reads photograph →
   bone → clay → bone → espresso → bone rather than putting two clay
   bands in a row. This is the page talking about its own record rather
   than about the place. */
.dreg {
  border-top: 1px solid var(--rule);
  padding-block: var(--section-y);
}
.dreg__in {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.dreg__note {
  margin-top: 1rem;
  max-width: 44ch;
  color: var(--ink-70);
}
.dreg__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.dreg__colHead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
}
.dreg__count {
  font-family: var(--font-display);
  font-size: 1.125rem; letter-spacing: 0;
  color: var(--brand-ink);
}
.dreg__list { margin-top: 0.85rem; display: grid; gap: 0.55rem; }
.dreg__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.dreg__list li::before {
  position: absolute; left: 0; top: 0;
  font-weight: 700;
}
.dreg__list--yes li::before { content: "\2713"; color: var(--brand-ink); }
.dreg__list--yes li { color: var(--ink); }
/* An en dash, not a cross. Nothing here has failed — it has not arrived. */
.dreg__list--no li::before { content: "\2013"; color: var(--ink-45); }
.dreg__list--no li { color: var(--ink-70); }
.dreg__done { color: var(--brand-ink); font-weight: 600; margin-top: 0.85rem; }

/* ---- The houses index ----------------------------------------------
   A list, not a card grid. The name leads and the photograph is a 56px
   stamp, because on this page a house is a fact about the place rather
   than the thing being sold. */
.dhx {
  background: var(--espresso);
  color: var(--on-dark);
  padding-block: var(--section-y);
}
.dhx__in {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* min() on the track floor, or a 20rem minimum is wider than a 320px
   screen's content box and the grid pushes the page sideways — it did,
   by 57px. Capped at two columns on a desktop as well: auto-fit put four
   houses in a single 325px-wide row, which is the thin strip this
   section was rebuilt to get away from. */
.dhx__grid {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}
@media (min-width: 62em) {
  .dhx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dcard {
  background: var(--espresso);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  color: inherit; text-decoration: none;
  transition: background-color 240ms var(--ease);
  height: 100%;
}
.dcard:hover,
.dcard:focus-visible { background: #362A24; }

.dcard__stamp { width: clamp(72px, 7vw, 96px); }
.dcard__stamp .figure { border-radius: 6px; }
.dcard__text { min-width: 0; }

.dcard__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4375rem);
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--bone);
}
.dcard__line {
  display: block; margin-top: 0.3rem;
  font-size: 0.9375rem; line-height: 1.4;
  color: var(--on-dark-70);
}
.dcard__where {
  display: block; margin-top: 0.6rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--on-dark-45);
}
/* ---- Another way in -------------------------------------------------
   One statement and one button on a single baseline. This was a
   two-column grid holding a long editorial note on the left and a short
   line dangling 136px below it on the right — 396px of band for 188px of
   content, 15% of it inked. Collapsing it to a row removed the hole
   without losing anything that was doing work. */
.dnote { padding-block: var(--section-y); }
.dnote__in {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.dnote__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
  max-width: 34ch;
}

/* Both grids size themselves with auto-fit and minmax, so neither needs
   a column count per breakpoint — the rules that used to live here were
   for the row layouts these replaced. */
@media (max-width: 62em) {
  .dreg__in { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40em) {
  .dreg__cols { grid-template-columns: minmax(0, 1fr); }
  .dent__country { margin-left: 0; width: 100%; }
  /* Two tiles abreast still reads at phone width; one would make the
     section eight screens long for eight short facts. */
  .dreach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dtile { padding: 0.85rem; }
  .dtile__place { font-size: 0.9375rem; }
}

.apanel {
  position: relative; display: block;
  color: var(--on-dark);
}
.apanel__media .figure { border-radius: 0; }
.apanel__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 20, 17, 0.8), rgba(26, 20, 17, 0.15) 60%);
}
.apanel__name {
  position: absolute; left: var(--gutter); bottom: 22%;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1rem + 9vw, 9rem);
  font-weight: 600; letter-spacing: -0.045em; line-height: 0.9;
}
.apanel__foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2rem;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(245, 241, 232, 0.35);
}
.apanel__where {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600;
}
.apanel__line { color: var(--on-dark-70); }


/* =====================================================================
   DESTINATION DETAIL
   ===================================================================== */

.dhero { position: relative; min-height: clamp(380px, 56vh, 620px); display: flex; align-items: flex-end; }
.dhero__media { position: absolute; inset: 0; }
.dhero__media .figure { height: 100%; aspect-ratio: auto; border-radius: 0; }
.dhero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 20, 17, 0.85), rgba(26, 20, 17, 0.15) 70%);
}
.dhero__in {
  position: relative; max-width: var(--max); width: 100%;
  margin-inline: auto; padding: 0 var(--gutter) clamp(2rem, 4vw, 3.5rem);
  color: var(--on-dark);
}
.dhero__title {
  font-size: clamp(2.75rem, 1.2rem + 5.4vw, 6rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 0.95;
}
.dhero__where {
  margin-top: 0.6rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600;
  color: var(--brand-accent);
}

.dintro {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.dintro__pos {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 600; letter-spacing: -0.025em; line-height: 1.15;
}

.dsubjects {
  max-width: var(--max); margin-inline: auto;
  padding: 0 var(--gutter) var(--section-y);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.dsubject {
  background: var(--clay);
  border-radius: var(--r);
  padding: 1.5rem;
  color: var(--ink-70);
}

.dtags { background: var(--espresso); padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); }
.dtags .eyebrow { max-width: var(--max); margin-inline: auto; }
.tagrow {
  max-width: var(--max); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.tagrow a {
  display: block; padding: 1.25rem;
  background: var(--espresso);
  transition: background-color 220ms var(--ease);
}
.tagrow a:hover { background: #352A24; }
.tagrow__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--on-dark);
}
.tagrow__line { display: block; margin-top: 0.3rem; color: var(--on-dark-45); font-size: 0.875rem; }

.dhouses { padding-block: var(--section-y); }
.dhouses__grid {
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.dhouse__media { display: block; overflow: hidden; border-radius: var(--r); }
.dhouse__media .figure { transition: transform 600ms var(--ease); }
.dhouse:hover .dhouse__media .figure { transform: scale(1.04); }
.dhouse__name {
  display: block; margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em;
}
.dhouse__line { display: block; margin-top: 0.35rem; color: var(--ink-70); }
.dhouse__where {
  display: block; margin-top: 0.5rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--brand-ink);
}


/* =====================================================================
   EXPERIENCES — the swapping index
   ===================================================================== */

.swap {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) 34%;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.swap__row { border-top: 1px solid var(--rule); }
.swap__row:last-child { border-bottom: 1px solid var(--rule); }
.swap__row a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.25rem; align-items: baseline;
  padding: clamp(0.9rem, 1.8vw, 1.4rem) 0;
  transition: padding-left 240ms var(--ease);
}
.swap__row:hover a, .swap__row.is-active a { padding-left: 0.75rem; }

.swap__num {
  font-family: var(--font-display);
  font-size: 0.8125rem; font-weight: 600;
  /* --ink-70: 13px tracked caps is small text and needs 4.5:1;
     the lighter token measured 3.52 on bone. */
  color: var(--ink-70);
}
.swap__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
  font-weight: 600; letter-spacing: -0.03em;
  transition: color 240ms var(--ease);
}
.swap__row.is-active .swap__name { color: var(--brand-ink); }
.swap__line { display: block; margin-top: 0.25rem; color: var(--ink-70); font-size: 0.9375rem; }

/* The houses, by name. Set as a running line with a middot between them
   rather than as chips — the page already carries a chips component and
   a tile grid, and a third boxed treatment of the same idea is how every
   section starts looking the same. */
.swap__at {
  display: flex; flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
  margin-top: 0.6rem;
}
.swap__house {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--brand-ink);
}
.swap__house + .swap__house::before {
  content: "·";
  margin-right: 0.7rem;
  color: var(--ink-45);
}
/* Ink, not the muted grey: this sentence is the reason the row says
   "Not yet offered", so it should be as readable as the row itself. */
.swap__none {
  display: block;
  margin-top: 0.6rem;
  max-width: 46ch;
  font-size: 0.875rem; line-height: 1.5;
  color: var(--ink-70);
}

.swap__count {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--ink-70);
  white-space: nowrap;
}

/* The frame holds still while the list moves past it. Frames are
   stacked rather than shown and hidden, so the change is a cross-fade
   and the sticky box never resizes mid-scroll. */
/* The wrapper is what stretches to the full row, giving the sticky
   frame inside it something to travel down. Without it the frame's
   containing block was its own height and it unstuck a third of the way
   through the list. */
.swap__col { align-self: stretch; min-width: 0; }

.swap__frames {
  position: sticky;
  top: calc(var(--hdr-h) + 3rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--clay);
}
.swap__frame {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.swap__frame.is-active { opacity: 1; }
.swap__frame .figure { height: 100%; aspect-ratio: auto; border-radius: 0; }

/* Padding so the first and last rows can both reach the reading line at
   the middle of the viewport; without it neither can ever become the
   active row by scrolling alone. */
.swap__list { padding-block: 22vh; }
.swap__cap {
  position: absolute; left: 1rem; bottom: 1rem;
  background: var(--bone); color: var(--espresso);
  font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: 0.16em; font-weight: 600;
  padding: 0.4rem 0.7rem; border-radius: 6px;
}


/* =====================================================================
   EXPERIENCE DETAIL
   ===================================================================== */

.band .figure { border-radius: 0; }

.offering { padding-block: var(--section-y); }
.offering__list {
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; gap: clamp(1rem, 2.5vw, 2rem);
}
.ocard a {
  display: grid;
  grid-template-columns: auto 34% minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--clay);
  border-radius: var(--r);
  transition: background-color 240ms var(--ease);
}
.ocard a:hover { background: #D9C9B4; }
.ocard__num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 600;
  color: var(--brand-accent);
}
.ocard__media { display: block; overflow: hidden; border-radius: var(--r); }
.ocard__body { position: relative; display: block; padding-right: 2.5rem; }
.ocard__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  font-weight: 600; letter-spacing: -0.025em;
}
.ocard__where {
  display: block; margin-top: 0.3rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--brand-ink);
}
.ocard__line { display: block; margin-top: 0.75rem; color: var(--ink-70); font-size: 0.9375rem; }
.ocard__go {
  position: absolute; right: 0; top: 0;
  color: var(--brand-accent); font-size: 1.25rem;
  transition: transform 220ms var(--ease);
}
.ocard a:hover .ocard__go { transform: translateX(5px); }
.offering__alt { max-width: var(--max); margin: 1.5rem auto 0; padding-inline: var(--gutter); }


/* =====================================================================
   DINING — the bill of fare
   ===================================================================== */

.fare {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}
/* Every entry is the same object: identity on the left, what the house
   says about its food on the right, the photography full width beneath.
   A named kitchen used to bring its own two-column text/photo block and
   a fourth frame, so one house in four had a different silhouette. */
.fare__entry {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.fare__entry:last-child { border-bottom: 1px solid var(--rule); }

.fare__say  { min-width: 0; }
.fare__rooms { grid-column: 1 / -1; }

.fare__head { display: flex; align-items: baseline; gap: 1.25rem; }
.fare__num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600;
  color: var(--brand-accent);
}
.fare__house {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 600; letter-spacing: -0.03em;
}
.fare__where {
  margin-top: 0.3rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink-45);
}

/* A plain block now. It carried its own photograph in a 30% column,
   which is what made this entry taller and wider-looking than the ones
   beside it; the photograph moved down into the shared row. */
.fare__item + .fare__item { margin-top: 1.5rem; }
.fare__name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.fare__desc { margin-top: 0.5rem; color: var(--ink-70); max-width: 52ch; }
.fare__meta {
  margin-top: 0.75rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--brand-ink);
}
.fare__meta--pending { color: var(--ink-45); }
.fare__note { color: var(--ink-70); }


/* =====================================================================
   WELLNESS — the comparison
   Three columns running the same checklist, so a gap in one house reads
   against a tick in the next.
   ===================================================================== */

/* Two links side by side in the closing band rather than one under the
   other — they are alternatives, not a sequence. */
.stmt__links {
  display: flex; flex-wrap: wrap;
  gap: 0.75rem clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 1.25rem;
}

/* =====================================================================
   WELLNESS — matrix, index, empty-record band, houses

   Four archetypes down one page, on purpose: a table, a ledger index, an
   asymmetric dark band and a mosaic. The page this replaced ran one
   template — four tall photographic cards — and the cards were the
   problem. A card is a good shape for something you browse and a bad one
   for something you compare, because the thing you are comparing ends up
   a screen away from the thing you are comparing it to.
   ===================================================================== */

.wsec {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--section-y);
}
.wsec__head { max-width: 54ch; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

/* ---- The facility cards ---------------------------------------------
   A GRID of cards, never a stack. Stacked full width, a facility with
   one house name left 878px of empty card beside it at 1440 — that
   measurement is why this section is not a stack.

   Five cards, two rows, no orphan: three spanning two of six columns,
   then two spanning three. A row of five equal cards would give each
   about 270px at 1440, which is not enough for two house names and a
   town; a row of four plus one stranded card is the failure this
   pattern exists to avoid.
   -------------------------------------------------------------------- */
.fsec {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--section-y);
}
.fcards {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.fcards > .fcard { grid-column: span 2; }
/* Only when there are exactly five. Any other count keeps the plain
   three-across above rather than quietly using a layout drawn for a
   different number. */
.fcards--five > .fcard:nth-child(n + 4) { grid-column: span 3; }

.fcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--clay);
  transition: transform 300ms var(--ease);
}
.fcard:hover { transform: translateY(-3px); }

/* The two wide cards put the picture beside the type instead of above
   it. Same card, different proportion — which is what stops the second
   row reading as the first row again, only wider. */
.fcards--five > .fcard:nth-child(n + 4).fcard--photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.fcards--five > .fcard:nth-child(n + 4) .fcard__media { height: 100%; }
.fcards--five > .fcard:nth-child(n + 4) .figure {
  height: 100%;
  aspect-ratio: auto;
}
/* Beside a full-height photograph the type is centred rather than
   pinned top and bottom. Pinned, a facility with one house name left
   46px of gap above it and nothing below — centred, the same text reads
   as a deliberate block against the picture. */
.fcards--five > .fcard:nth-child(n + 4) .fcard__body { justify-content: center; }
.fcards--five > .fcard:nth-child(n + 4) .fcard__houses { margin-top: 0.5rem; }

.fcard__media { display: block; position: relative; }
.fcard__media .figure { border-radius: 0; }

/* Names the house in the photograph. A bone plate rather than text laid
   straight on the picture, because the picture underneath is different
   on every card and nothing can be guaranteed about its contrast. */
.fcard__chip {
  position: absolute;
  left: 0.75rem; bottom: 0.75rem;
  background: var(--bone);
  color: var(--espresso);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
}

/* The plate stands where the photograph would, at the photograph's
   proportion, so the two kinds of card are the same shape and not
   merely the same height. The numeral is the picture — which is what
   the direction means by big numerals being a feature — and it is
   aria-hidden because the same number is not information, it is the
   card's position in a list the reader can already see. */
.fcard__plate {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
/* With the numeral in the plate, the count is the only thing left in
   the card's top row, and it keeps the right edge it had when the
   numeral sat beside it. */
.fcard--fill .fcard__top { justify-content: flex-end; }

.fcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.1rem, 1.6vw, 1.6rem);
  /* Pushes the house list to the foot, so cards of unequal content in
     the same row still line their lists up. */
  flex: 1;
}
.fcard__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.fcard__no {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  /* Terracotta, matching the approved Stitch mockup. #C0562B is 4.04:1
     on bone and 3.46:1 on espresso — under AA for body text either way,
     which is why the palette dropped it, but over the 3:1 large-text
     bar at both, and this numeral is 28px at its smallest. Nothing
     smaller on the page uses it. */
  color: #C0562B;
  /* Epilogue's figures are proportional, so "01" and "04" are not the
     same width. Tabular is what an index wants. */
  font-variant-numeric: tabular-nums;
}
.fcard__count {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  /* The token, not a hand-picked alpha: .fcard--photo is in the clay
     override list, which re-points --ink-45 to 0.70 and reads 4.88 on
     clay. Hardcoding 0.65 measured 4.25 here, under AA. */
  color: var(--ink-45);
  white-space: nowrap;
}
.fcard__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.fcard__houses {
  list-style: none;
  margin: 0.15rem 0 0; padding: 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9375rem;
  color: var(--ink-70);
}
.fcard__houses li { border-top: 1px solid var(--rule); padding-top: 0.45rem; }
.fcard__houses a { color: var(--ink); font-weight: 500; }
.fcard__houses a:hover { color: var(--brand-ink); }
.fcard__town { color: var(--ink-45); }
.fcard__none {
  margin-top: auto;
  padding-top: 0.45rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-45);
  font-style: italic;
}

/* Cards with no photograph take a fill. There is no spa photograph and
   no gym photograph in the library — checked, not assumed — and an
   empty plate would read as a defect where a colour block reads as a
   decision. */
.fcard--fill .fcard__body { gap: 0.75rem; }
.fcard--espresso {
  background: var(--espresso);
  color: var(--on-dark);
}
.fcard--sage {
  background: var(--sage);
  color: var(--on-dark);
}
/* SAGE WILL NOT CARRY MUTED TEXT, AND WILL NOT CARRY THE RED.
   Bone at full strength is 5.03:1 on sage; at 0.72 it falls to 3.47 and
   at 0.85 to 4.15 — both under AA for an 11px label, so there is no
   alpha that both mutes and passes. Small text on a filled card is
   therefore full --on-dark, and the hierarchy comes from size and
   tracking instead of from opacity. Espresso could afford the muted
   tint (7.89), but one rule that is right on both grounds beats two
   that differ.

   The numeral loses the terracotta for the same reason: #C0562B on
   sage measures 1.24:1, and --brand-on-dark is no better at 1.68. No
   red in the palette clears even the 3:1 large-text bar on this green,
   so filled cards take bone and the accent stays on the clay ones. */
.fcard--fill .fcard__no      { color: var(--on-dark); }
.fcard--fill .fcard__count   { color: var(--on-dark); }
.fcard--fill .fcard__houses  { color: var(--on-dark); }
.fcard--fill .fcard__houses li { border-top-color: var(--rule-dark); }
.fcard--fill .fcard__houses a { color: var(--on-dark); }
.fcard--fill .fcard__houses a:hover { color: #fff; }
.fcard--fill .fcard__town    { color: var(--on-dark); }
.fcard--fill .fcard__none {
  color: var(--on-dark);
  border-top-color: var(--rule-dark);
}

/* ---- The empty record -----------------------------------------------
   Asymmetric on purpose: the sentence on the left, the one thing you can
   actually do about it on the right, and the band used end to end.
   -------------------------------------------------------------------- */
.wgap {
  background: var(--espresso);
  color: var(--on-dark);
  padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--gutter);
}
.wgap__in {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 4rem);
  align-items: center;
}
.wgap__say { max-width: 62ch; }
.wgap__title {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.wgap__body {
  margin-top: 0.9rem;
  max-width: 58ch;
  color: var(--on-dark-70);
}
.wgap__act { margin: 0; }

/* ---- The houses -----------------------------------------------------
   Explicit row heights, because two tiles of different width sharing a
   row will otherwise stand at two different heights. Spans alternate 7/5
   and 5/7: a row of four identical tiles is the shape this page spent a
   redesign getting away from.
   -------------------------------------------------------------------- */
.whouses {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(190px, 21vw, 330px);
  gap: 0.5rem;
}
.whouse {
  position: relative;
  display: block;
  grid-column: span 6;
  border-radius: var(--r);
  overflow: hidden;
  color: var(--on-dark);
  transition: transform 300ms var(--ease);
}
.whouse:nth-child(4n+1) { grid-column: span 7; }
.whouse:nth-child(4n+2) { grid-column: span 5; }
.whouse:nth-child(4n+3) { grid-column: span 5; }
.whouse:nth-child(4n+4) { grid-column: span 7; }
/* An odd tile left over at the end takes the full width rather than
   sitting beside a hole. */
.whouse:last-child:nth-child(odd) { grid-column: span 12; }
.whouse:hover { transform: translateY(-3px); }
.whouse .figure {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.whouse__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(26, 20, 17, 0.80) 0%,
    rgba(26, 20, 17, 0.28) 44%,
    rgba(26, 20, 17, 0) 70%);
}
.whouse__text {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(0.9rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.75rem);
}
.whouse__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.whouse__where {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--on-dark-70);
}

/* Tablet, then phone. Both blocks match a 375px screen and they carry
   the same specificity, so the narrower one has to come second or it
   loses on source order — which is exactly how the old comparison grid
   ended up with two 139px columns on a phone. */
@media (max-width: 62em) {
  /* Two across. Five cards over two columns leaves a single card on the
     last row, so that one is told to span both rather than sit beside a
     hole — the same rule the six-column desktop grid follows. */
  .fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcards > .fcard,
  .fcards--five > .fcard:nth-child(n + 4) { grid-column: span 1; }
  .fcards--five > .fcard:last-child:nth-child(odd) { grid-column: span 2; }
  /* The wide-card side-by-side treatment is a desktop proportion. At
     this width the picture goes back above the type. */
  .fcards--five > .fcard:nth-child(n + 4).fcard--photo {
    display: flex;
    flex-direction: column;
  }
  .fcards--five > .fcard:nth-child(n + 4) .figure {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .wgap__in { grid-template-columns: minmax(0, 1fr); }

  .whouse,
  .whouse:nth-child(4n+1),
  .whouse:nth-child(4n+2),
  .whouse:nth-child(4n+3),
  .whouse:nth-child(4n+4) { grid-column: span 6; }
}

@media (max-width: 40em) {
  /* One card at a time. Two across at 375px gives each about 150px,
     which is not enough for a house name and its town. */
  .fcards { grid-template-columns: minmax(0, 1fr); }
  .fcards > .fcard,
  .fcards--five > .fcard:nth-child(n + 4),
  .fcards--five > .fcard:last-child:nth-child(odd) { grid-column: span 1; }

  .whouse,
  .whouse:nth-child(4n+1),
  .whouse:nth-child(4n+2),
  .whouse:nth-child(4n+3),
  .whouse:nth-child(4n+4),
  .whouse:last-child:nth-child(odd) { grid-column: span 12; }
}


/* =====================================================================
   GALLERY — filters and column masonry
   ===================================================================== */

.filters {
  max-width: var(--max); margin-inline: auto;
  padding: 0 var(--gutter) 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.filters__btn {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  padding: 0.6rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: transparent; color: var(--ink-70);
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.filters__btn:hover { border-color: var(--brand-accent); color: var(--brand-ink); }
/* aria-pressed is for a button that toggles; these are links to a
   filtered URL, so the current one is aria-current="page". Both are
   matched — the pressed form was here first and may be used by a
   scripted filter later. */
.filters__btn[aria-pressed="true"],
.filters__btn[aria-current="page"] {
  background: var(--brand); border-color: var(--brand-accent); color: var(--bone);
}
.filters__n { opacity: 0.6; margin-left: 0.35rem; }

/* CSS columns rather than grid: the frames have wildly different native
   ratios and columns pack them without cropping. */
.masonry {
  max-width: var(--max); margin-inline: auto;
  padding: 0 var(--gutter) var(--section-y);
  column-count: 4;
  column-gap: 0.75rem;
}
.mfr {
  break-inside: avoid;
  margin: 0 0 0.75rem;
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
}
.mfr .figure { border-radius: 0; }
.mfr__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 0.85rem 0.85rem;
  background: linear-gradient(to top, rgba(26, 20, 17, 0.85), transparent);
  color: var(--bone);
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.mfr:hover .mfr__cap, .mfr:focus-within .mfr__cap { opacity: 1; }
.mfr__house {
  display: block;
  font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: 0.16em; font-weight: 600;
  color: var(--brand-accent);
}
.mfr__alt { display: block; font-size: 0.8125rem; margin-top: 0.2rem; }


/* =====================================================================
   JOURNAL
   ===================================================================== */

/* ---- Journal listing: a lead, then the rest -------------------------
   Was one auto-fit grid of identical cards. At 1280 that gave three
   columns and left the fourth article alone on a second row, and four
   equal cards said nothing about which to read first.

   The section is now a stack: the newest piece across the full width
   with its photograph beside it, then the others three across. Four
   articles make one lead and one complete row at every width.
   --------------------------------------------------------------------- */
.posts {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.post__link { display: block; color: inherit; text-decoration: none; }
.post__media { display: block; overflow: hidden; border-radius: var(--r); }
.post__media img { transition: transform 700ms var(--ease); }
.post__link:hover .post__media img,
.post__link:focus-visible .post__media img { transform: scale(1.03); }

.post__cat {
  display: inline-block; margin-top: 1rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--brand-ink);
}
.post__title {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.15;
  transition: color 200ms var(--ease);
}
.post__link:hover .post__title,
.post__link:focus-visible .post__title { color: var(--brand-ink); }
.post__excerpt { margin-top: 0.5rem; color: var(--ink-70); }

/* The lead. Photograph and words side by side, the words centred against
   the frame rather than sitting under it — the one card on the page that
   is read as a spread instead of a tile. */
.post--lead .post__link {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}
.post--lead .post__cat { margin-top: 0; }
.post--lead .post__title {
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  letter-spacing: -0.03em;
}
.post--lead .post__excerpt {
  margin-top: 0.75rem;
  font-size: var(--fs-lede);
  max-width: 44ch;
}
.post__more {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 1.1rem;
  font-size: 0.9375rem; font-weight: 600;
  color: var(--brand-ink);
}
.post__arrow { transition: transform 240ms var(--ease); }
.post__link:hover .post__arrow { transform: translateX(3px); }

/* The rest, three across or stacked — never two.

   A 16rem floor fitted only two tracks at 768 and wrapped the third card
   onto a row of its own. Every width where exactly two tracks fit does
   that to three cards, so the two-column step is removed rather than
   retuned: three columns while they fit, one below. 13rem is the floor
   that lands three inside the 682px this section gets at 768.

   Above that, auto-fit collapses the spare tracks to 0px and the three
   cards share the full width — measured filling the row exactly at
   1024, 1280, 1440 and 1728. */
.posts__rest {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 48em) {
  /* Three, and capped at three rather than left to auto-fit.
     Unfitted it took four tracks at 1280 and five past 1400, and with
     five cards under the lead that put a single card alone on the second
     row again — the exact thing the lead was introduced to stop. Fixed
     at three, five cards land three and two, which reads as a list
     continuing rather than as one card left over. */
  .posts__rest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 52em) {
  /* The lead stacks. Side by side below this the words get about
     twenty characters a line and the photograph stops being a lead. */
  .post--lead .post__link { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .post--lead .post__cat { margin-top: 1rem; }
  .post--lead .post__excerpt { max-width: none; }
}

/* Renamed from .waiting. The section no longer waits for anything — it
   states the brief — and a class called waiting kept inviting copy that
   apologised for the page. */
.brief {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}
.brief__in { max-width: 56ch; }
.brief__lead { font-size: var(--fs-lede); color: var(--ink-70); }

/* The dateline. A key and a value on one line, the key in the label
   face so it reads as a masthead credit rather than another sentence —
   this is the one place on the page that states a fact rather than an
   intention, and it should not look like the prose above it. */
.brief__from {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  max-width: 62ch;
}
.brief__from-key {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--brand-ink);
}
.brief__from-val {
  font-size: 1rem; line-height: 1.5;
  color: var(--ink-70);
}
/* The journal.s subject span, set as running display type. It used to
   be a numbered list with hairline rules, which is the shape /about
   uses for its three statements — same masthead, same prose, same
   numbered rows, so the pages read as one template twice. */
/* Named apart from .subjects, which v2.css already uses for the home
   page.s journal link list. This file loads second, so a shared name
   would have silently restyled that list into 4rem display type. */
.subjline {
  max-width: var(--max);
  margin: clamp(2rem, 4vw, 3.5rem) auto 0;
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 3.4vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}
.subjline__word { white-space: nowrap; }
.subjline__sep {
  color: var(--brand-accent);
  margin-inline: 0.12em;
  font-weight: 400;
}
.brief__foot {
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap; margin-top: 2.5rem;
  color: var(--ink-70);
}


/* =====================================================================
   ABOUT
   ===================================================================== */

.essay {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.essay__lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
}

/* auto-fit rather than a fixed three: the figure list is filtered by what
   the CMS has actually confirmed, so its length changes. */
/* The same object as .figband on the homepage, and quietened with it.
   They are one component wearing two class names — same grid, same
   value-over-label, same red ground — so leaving About shouting while
   the homepage went quiet would read as two different sites. */
.factband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  background: var(--clay);
}
.factband__item {
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter);
  border-left: 1px solid var(--rule-strong);
  color: var(--ink);
}
.factband__item:first-child { border-left: 0; }
.factband__v {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
  font-weight: 600; line-height: 1;
  color: var(--brand-ink);
}
.factband__l {
  display: block; margin-top: 0.5rem;
  font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink-70);
}

/* ---------------------------------------------------------------------
   ABOUT — the five principles, as cards
   ---------------------------------------------------------------------
   Five is an awkward number for a grid: four across leaves one orphan
   on its own row. Six tracks with cards spanning two then three gives
   3 + 2 — the second row wider rather than half empty, which reads as
   composed instead of as a remainder.

   Was a row list where the photograph was a 72px thumbnail and the name
   had its own narrow column, so "Thoughtful hospitality" broke over two
   lines while the row still had space to its right.
------------------------------------------------------------------------ */
.creed { padding-block: var(--section-y); }
.creed__note { color: var(--ink-70); max-width: 34ch; }

.creed__list {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
}

.creed__row {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 220ms var(--ease), transform 320ms var(--ease);
}
/* The last two take three tracks each, so the bottom row fills. */
.creed__row:nth-child(4),
.creed__row:nth-child(5) { grid-column: span 3; }

.creed__row:hover { border-color: var(--rule-strong); transform: translateY(-3px); }

.creed__media { display: block; }
.creed__media .figure { border-radius: 0; }

.creed__num {
  display: block;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.5rem) 0;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-accent);
}

.creed__name {
  display: block;
  padding: 0.35rem clamp(1rem, 2vw, 1.5rem) 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}

.creed__line {
  display: block;
  padding: 0.6rem clamp(1rem, 2vw, 1.5rem) clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--ink-70);
  font-size: 0.9375rem;
  line-height: 1.6;
}


/* =====================================================================
   SUSTAINABILITY
   ===================================================================== */

.eco {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.eco__plate figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem; color: var(--ink-45);
}


/* =====================================================================
   CAREERS
   ===================================================================== */

.narrow {
  max-width: 820px; margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}
.numlist { margin-top: clamp(2rem, 4vw, 3rem); }
.numlist li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem; align-items: baseline;
  padding: 1rem 0; border-top: 1px solid var(--rule);
}
.numlist li:last-child { border-bottom: 1px solid var(--rule); }
.numlist__n { font-family: var(--font-display); font-weight: 700; color: var(--brand-accent); }
.numlist__t { font-size: var(--fs-lede); }
.narrow__cta { margin-top: clamp(2rem, 4vw, 3rem); }
.narrow__note { margin-top: 1rem; color: var(--ink-45); font-size: 0.9375rem; }


/* =====================================================================
   PRESS
   ===================================================================== */

.sheet {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.sheet__h {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 600; letter-spacing: -0.025em;
  margin-top: 2.5rem;
}
.sheet__h:first-child { margin-top: 0; }
.sheet__aside {
  background: var(--clay);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2rem);
  position: sticky; top: calc(var(--hdr-h) + 1.5rem);
}
.pendlist li {
  padding: 0.55rem 0; border-top: 1px solid rgba(42, 33, 28, 0.16);
  color: var(--ink-70); font-size: 0.9375rem;
}
.sheet__note { margin: 1.25rem 0; color: var(--ink-45); font-size: 0.875rem; }


/* =====================================================================
   FAQ — a details/summary accordion
   ===================================================================== */

.qa {
  max-width: 940px; margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}
.qa__group + .qa__group { margin-top: clamp(2rem, 4vw, 3.5rem); }
.qa__cat {
  display: flex; align-items: baseline; gap: 0.75rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600;
  color: var(--brand-ink);
  margin-bottom: 1rem;
}
.qa__n { color: var(--ink-45); }

.qa__item { border-top: 1px solid var(--rule); }
.qa__item:last-child { border-bottom: 1px solid var(--rule); }
.qa__q {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600; letter-spacing: -0.02em;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__mark {
  flex: none; position: relative;
  width: 16px; height: 16px; margin-top: 0.35rem;
}
.qa__mark::before, .qa__mark::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--brand);
  transition: transform 240ms var(--ease);
}
.qa__mark::after { transform: rotate(90deg); }
.qa__item[open] .qa__mark::after { transform: rotate(0deg); }
.qa__a { padding-bottom: 1.25rem; color: var(--ink-70); max-width: 68ch; }
.qa__a p + p { margin-top: 0.85rem; }


/* =====================================================================
   LEGAL
   ===================================================================== */

.legal {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.legal__rail { position: sticky; top: calc(var(--hdr-h) + 1.5rem); }
.legal__rail ol { counter-reset: s; display: grid; gap: 0.45rem; }
.legal__rail a {
  font-size: 0.875rem; color: var(--ink-70);
  display: block; padding-left: 1rem;
  border-left: 2px solid var(--rule);
}
.legal__rail a:hover { border-left-color: var(--brand-accent); color: var(--ink); }
.legal__updated { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--ink-45); }

.legal__body { max-width: 72ch; }
.legal__sec + .legal__sec { margin-top: 2.5rem; }
.legal__sec h2 {
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 0.85rem;
}
.legal__sec p { color: var(--ink-70); }
.legal__sec p + p { margin-top: 0.85rem; }
.legal__foot { margin-top: 2.5rem; color: var(--ink-45); font-size: 0.9375rem; }
.legal__foot a { border-bottom: 1px solid var(--brand); }


/* =====================================================================
   CONTACT
   ===================================================================== */

.contact {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.contact__h {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 600; letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}

.callcards { display: grid; gap: 1rem; }
.callcard {
  background: var(--clay);
  border-radius: var(--r);
  padding: 1.25rem;
}
.callcard__name {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;
}
.callcard__name a:hover { color: var(--brand-ink); }
.callcard__where {
  margin-top: 0.25rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink-45);
}
.callcard__tel, .callcard__mail {
  display: inline-block; margin-top: 0.75rem;
  font-weight: 600; color: var(--brand-ink);
  border-bottom: 1px solid currentColor;
}
.callcard__pending { margin-top: 0.75rem; font-size: 0.875rem; color: var(--ink-45); }

.contact__group { margin-top: 2rem; color: var(--ink-70); }
.contact__note { margin-top: 2rem; font-size: 0.875rem; color: var(--ink-45); max-width: 36ch; }

.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--r);
  margin-bottom: 1.5rem;
}
.alert--ok  { background: rgba(126, 140, 107, 0.2); border-left: 3px solid var(--sage); }
.alert--bad { background: rgba(192, 86, 43, 0.14); border-left: 3px solid var(--brand); }

.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.field { display: block; margin-bottom: 1rem; }
.field__label {
  display: block; margin-bottom: 0.4rem;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink-45);
}
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.7; }
.field__input {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
}
.field__input:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(192, 86, 43, 0.22);
}
.field__input--area { resize: vertical; min-height: 9rem; }
.field__input.is-bad { border-color: var(--brand-accent); }
.field__err { display: block; margin-top: 0.35rem; font-size: 0.8125rem; color: var(--brand-ink); }

.form__foot { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1rem; }
.form__legal { font-size: 0.8125rem; color: var(--ink-45); }
.form__legal a { border-bottom: 1px solid var(--brand); }


/* =====================================================================
   404
   ===================================================================== */

.gone {
  background: var(--espresso);
  color: var(--on-dark);
  min-height: 70vh;
  display: flex; align-items: center;
  padding: var(--section-y) var(--gutter);
}
.gone__in { max-width: 720px; margin-inline: auto; }
.gone__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 10vw, 10rem);
  font-weight: 600; line-height: 0.9; letter-spacing: -0.05em;
  color: var(--brand-accent);
}
.gone__title {
  margin-top: 1rem;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 600; letter-spacing: -0.03em;
}
.gone__lede { margin-top: 1.25rem; color: var(--on-dark-70); max-width: 52ch; }
.gone__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; }
.gone__houses { margin-top: 3rem; border-top: 1px solid var(--rule-dark); }
.gone__houses li { border-bottom: 1px solid var(--rule-dark); }
.gone__houses a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 0;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  transition: padding-left 220ms var(--ease);
}
.gone__houses a:hover { padding-left: 0.5rem; color: var(--brand-accent); }
.gone__where {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--on-dark-45);
}


/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 75em) {
  .masonry { column-count: 3; }
}

@media (max-width: 62em) {

  .slab { grid-template-columns: 1fr; min-height: 0; }
  .slab--flip .slab__media { order: 0; }
  .slab__media { min-height: 58vw; }

  .factstrip { grid-template-columns: repeat(2, 1fr); }
  .factstrip__item:nth-child(odd) { border-left: 0; }
  .factstrip__item:nth-child(n+3) { border-top: 1px solid var(--rule-dark); }

  .detail { grid-template-columns: 1fr; }
  .detail__rail { position: static; }
  .detail__rail ul {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    border-left: 0; border-bottom: 2px solid var(--rule);
    padding-bottom: 0.5rem;
  }
  .detail__rail a { padding-left: 0; padding-right: 1.25rem; }

  .amen, .gstrip, .loc { grid-template-columns: repeat(2, 1fr); }
  .related__grid { grid-template-columns: 1fr; }


  .dintro, .eco, .sheet, .essay, .legal, .contact { grid-template-columns: 1fr; }
  .sheet__aside, .legal__rail { position: static; }

  .swap { grid-template-columns: 1fr; }
  .swap__frames { display: none; }

  /* 22vh of padding top and bottom exists to give the scroll-driven
     frame selection runway past the first and last row. With the frame
     hidden here there is nothing to select, so it is 356px of blank
     screen on an 812px phone — a third of a viewport of nothing between
     the masthead and the first experience. */
  .swap__list { padding-block: 0; }

  .ocard a { grid-template-columns: auto minmax(0, 1fr); }
  .ocard__media { grid-column: 1 / -1; }

  /* The two columns of an entry stack. Below this width the statement
     has nowhere to sit beside the house name without either one of them
     becoming a column of single words. */
  .fare__entry { grid-template-columns: minmax(0, 1fr); }

  /* Two cards abreast on a tablet. The span rules above are overridden
     wholesale — at this width every card is the same and the 3+2
     rhythm has nothing to sit in. The fifth would be left alone on a
     half-width row, so it takes the whole of it instead. */
  .creed__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creed__row,
  .creed__row:nth-child(4) { grid-column: span 1; }
  .creed__row:nth-child(5) { grid-column: 1 / -1; }

  .factband { grid-template-columns: 1fr; }
  /* Dark hairline, matching the band's move off red — the old light one
     was invisible on clay, so the stacked figures ran together. */
  .factband__item { border-left: 0; border-top: 1px solid var(--rule-strong); }
  .factband__item:first-child { border-top: 0; }

  .masonry { column-count: 2; }

  .apanel__name { bottom: 28%; }
}

@media (max-width: 48em) {
  .amen, .gstrip, .loc, .form__row { grid-template-columns: 1fr; }
  .masonry { column-count: 1; }
  .swap__row a { grid-template-columns: auto minmax(0, 1fr); }
  .swap__count { display: none; }
  .apanel__foot { position: static; padding: 1rem var(--gutter) 1.5rem; background: var(--espresso); border-top: 0; }
  .apanel__name { position: static; display: block; padding: 1rem var(--gutter) 0; color: var(--ink); }
  .apanel { color: var(--ink); }
  .apanel__scrim { display: none; }
}


/* =====================================================================
   INNER PAGES — sections brought over from the original site
   ===================================================================== */

/* ---- About: the group's three stated positions -------------------- */
.position {
  background: var(--clay);
  padding: var(--section-y) var(--gutter);
}
.position__head { max-width: var(--max); margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
.position__grid {
  max-width: var(--max); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.pcard {
  background: var(--bone);
  border-radius: var(--r);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  min-width: 0;
}
.pcard__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 700;
  color: var(--brand-accent);
}
.pcard__title {
  margin-top: 0.75rem;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  font-weight: 600; letter-spacing: -0.025em;
}
.pcard__body { margin-top: 0.75rem; color: var(--ink-70); }

/* ---- About: the chairman ------------------------------------------ */
.chair {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 38% minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.chair > * { min-width: 0; }
.chair__portrait { margin: 0; }
.chair__name {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  font-weight: 600; letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}
.chair__note {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-45);
  font-size: 0.9375rem;
  max-width: 54ch;
}

/* ---- About: the leadership ----------------------------------------
   Fourteen people with a biography each. The earlier pass set the
   portraits loose on the page ground at 210px and it read as a
   contact sheet: fourteen unrelated photographs, shot by different
   people in different rooms, with nothing holding them together.

   So they are cards on a ground, the same pairing this page already
   uses for the three stated positions — clay band, bone card. That
   also fixes the photography problem rather than displaying it. The
   portrait is now a 96px plate beside the name instead of the width
   of a column, which is well inside what a ~300px master can serve,
   and at that size the differences in lighting and backdrop stop
   competing with each other.

   Three columns at the widest, so the biography gets a readable
   measure rather than a 40-character gutter. ---------------------- */
.roster {
  background: var(--clay);
  padding: var(--section-y) var(--gutter);
}
.roster__head { max-width: var(--max); margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem); }
.roster__note {
  margin-top: 1rem; max-width: 54ch;
  color: var(--ink-70);
}
.roster__grid {
  max-width: var(--max); margin-inline: auto;
  list-style: none; margin-block: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.rperson {
  min-width: 0;
  background: var(--bone);
  border-radius: var(--r);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex; flex-direction: column;
}
.rperson__head {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem; align-items: center;
}
.rperson__shot {
  margin: 0;
  border-radius: calc(var(--r) - 2px);
  overflow: hidden;
  background: var(--clay);
}
.rperson__name {
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2;
}
.rperson__role {
  margin-top: 0.3rem;
  font-size: 0.8125rem; line-height: 1.35;
  color: var(--ink-45);
}
/* The one line of the profile written to be quoted. Set as a pull
   line so the biography underneath is not the first thing read. */
.rperson__line {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.3;
  color: var(--brand-accent);
}
.rperson__bio {
  margin-top: 0.75rem;
  font-size: 0.875rem; line-height: 1.6;
  color: var(--ink-70);
}

/* ---- Sustainability: four positions -------------------------------- */
.stance { padding-block: var(--section-y); }
.stance__note { color: var(--ink-70); }
.stance__list {
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
}
.stance__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--rule);
}
.stance__row:last-child { border-bottom: 1px solid var(--rule); }
.stance__num {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 600;
  color: var(--brand-accent);
}
.stance__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  font-weight: 600; letter-spacing: -0.025em;
}
.stance__body { display: block; margin-top: 0.5rem; color: var(--ink-70); max-width: 62ch; }

/* ---- Sustainability: the withheld figures --------------------------
   Every value is a dash on purpose. The em dash is the honest reading,
   so it is styled as a real value rather than as a missing one. ----- */
.reported {
  background: var(--espresso);
  padding: var(--section-y) var(--gutter);
}
.reported__head { max-width: var(--max); margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
.reported__lede {
  margin-top: 1rem; max-width: 56ch;
  color: var(--on-dark-70);
}
.reported__grid {
  max-width: var(--max); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.rmetric { background: var(--espresso); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.rmetric__label {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--on-dark-45);
}
.rmetric__value {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2vw, 3rem);
  font-weight: 600; line-height: 1;
  color: var(--brand-accent);
}
.rmetric__note {
  margin: 0.4rem 0 0;
  font-size: 0.75rem; color: var(--on-dark-45);
}

/* ---- Careers: the four steps --------------------------------------- */
.hiring {
  background: var(--espresso);
  padding: var(--section-y) var(--gutter);
}
.hiring__head { max-width: var(--max); margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
.hiring__grid {
  max-width: var(--max); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.hstep {
  min-width: 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--brand);
  color: var(--on-dark-70);
}
.hstep__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 700;
  color: var(--brand-accent);
}
.hstep__title {
  display: block; margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--on-dark);
}
.hstep__body { display: block; margin-top: 0.5rem; font-size: 0.9375rem; }

.narrow--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* ---- Press: the media kit ------------------------------------------ */
.assets { padding-bottom: var(--section-y); }
.assets__list {
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
}
.asset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  gap: 1rem 2rem;
  align-items: baseline;
  padding-block: 1.1rem;
  border-top: 1px solid var(--rule);
}
.asset:last-child { border-bottom: 1px solid var(--rule); }
.asset__name {
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em;
}
.asset__line { color: var(--ink-70); font-size: 0.9375rem; }
.asset__meta {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  white-space: nowrap;
}
.asset__meta--yes { color: var(--brand-ink); }
.asset__meta--no  { color: var(--ink-45); }


@media (max-width: 62em) {
  .position__grid { grid-template-columns: 1fr; }
  .chair { grid-template-columns: 1fr; }
  .reported__grid { grid-template-columns: repeat(2, 1fr); }
  .hiring__grid { grid-template-columns: repeat(2, 1fr); }
  .asset { grid-template-columns: 1fr; gap: 0.35rem; }
}

@media (max-width: 40em) {
  .reported__grid, .hiring__grid { grid-template-columns: 1fr; }
  /* One up. Two columns of biography on a phone leaves a measure of
     about twenty characters, which is unreadable — the cards get the
     full width and the portrait plate shrinks to match. */
  .roster__grid { grid-template-columns: 1fr; }
  .rperson__head { grid-template-columns: 76px minmax(0, 1fr); }
}


/* ---- Dining: one kitchen at a time --------------------------------- */
.kitchen {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 46% minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.kitchen > * { min-width: 0; }
.kitchen__media { margin: 0; }
.kitchen__body .prose--lead { margin-bottom: 1.1rem; }
.kitchen__note {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-45);
  font-size: 0.9375rem;
  max-width: 52ch;
}

/* ---- Dining: the sourcing rule -------------------------------------
   A pull quote against the note that justifies it. The quote is the
   claim; the column beside it is why the claim is a rule. ---------- */
.sourcing {
  background: var(--clay);
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  max-width: none;
}
.sourcing > * { min-width: 0; }
.sourcing__quote { max-width: var(--max); margin-left: auto; }
.sourcing__text {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.05;
}
.sourcing__by {
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--rule-strong);
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--brand-ink);
}
.sourcing__role {
  display: block; margin-top: 0.4rem;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--ink-70);
  font-size: 0.9375rem;
}

/* ---- Dining: the closing band -------------------------------------- */
.eveband {
  position: relative;
  min-height: clamp(360px, 42vw, 520px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--espresso);
}
.eveband__media { position: absolute; inset: 0; }
.eveband__media .figure { height: 100%; aspect-ratio: auto; border-radius: 0; }
.eveband__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(22, 17, 14, 0.9) 0%, rgba(22, 17, 14, 0.6) 46%, rgba(22, 17, 14, 0.18) 82%);
}
.eveband__in {
  position: relative; z-index: 2;
  max-width: var(--max); width: 100%; margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
  color: var(--on-dark);
}
.eveband__note {
  margin-top: 1.25rem; max-width: 48ch;
  color: var(--on-dark-70);
}

@media (max-width: 62em) {
  .kitchen, .sourcing { grid-template-columns: 1fr; }
}

/* =====================================================================
   EXPERIENCE DETAIL — rebuilt
   ===================================================================== */

.xlead { position: relative; }
.xlead__media .figure { border-radius: 0; }
.xlead__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22, 17, 14, 0.7), transparent 45%);
  pointer-events: none;
}
.xlead__cap {
  position: absolute; left: var(--gutter); bottom: clamp(1rem, 2vw, 1.75rem);
  color: var(--on-dark-70);
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  max-width: 60ch;
}

.xmeans {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.xmeans > * { min-width: 0; }
.xmeans__line {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.12;
}

/* What the offering houses actually list that bears on this reason. */
.xfacts { margin-top: 2rem; }
.xfacts__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 2rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
}
.xfacts__row:last-child { border-bottom: 1px solid var(--rule); }
.xfacts dt { font-weight: 500; }
.xfacts dd {
  margin: 0;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--brand-ink);
}

.xframes {
  max-width: var(--max); margin-inline: auto;
  padding: 0 var(--gutter) var(--section-y);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.xframe { margin: 0; }
.xframe figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem; color: var(--ink-45);
}

.xothers { background: var(--espresso); padding-block: var(--section-y); }
.xothers__row {
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.xothers__row a {
  display: block; height: 100%;
  padding: clamp(1rem, 2vw, 1.4rem);
  background: var(--espresso);
  transition: background-color 220ms var(--ease);
}
.xothers__row a:hover { background: #362A24; }
.xothers__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--on-dark);
}
.xothers__line { display: block; margin-top: 0.25rem; color: var(--on-dark-45); font-size: 0.8125rem; }

@media (max-width: 62em) {
  .xmeans { grid-template-columns: 1fr; }
  .xfacts__row { grid-template-columns: 1fr; gap: 0.25rem; }
  .xothers__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40em) {
  .xothers__row { grid-template-columns: 1fr; }
}


/* =====================================================================
   WELLNESS — lead band, the sentence list, and the named gaps
   ===================================================================== */



/* ---- House detail: the map ------------------------------------------
   The whole block is one link to Google Maps, so it is an <a> and the
   plate behind it is a still rendered before publication.
   It used to be a dark panel with a button that injected an iframe; the
   iframe is gone, and with it the third-party request and the click.

   The panel is a bone card rather than a scrim. The map is pale and busy
   with road casings, and type laid straight onto it — at any weight —
   was competing with a street name somewhere behind every line. A card
   is also the language the rest of the site already speaks.
   --------------------------------------------------------------------- */
.pmap {
  position: relative;
  display: block;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--clay);              /* shows while the plate decodes */
  aspect-ratio: 16 / 9;
  color: inherit; text-decoration: none;
  /* The plate now carries its own tone, but a tinted map still meets
     the page on a soft gradient of its own edge pixels. The hairline
     is what actually ends the object — the same inset keyline the
     cards elsewhere use, so the map is bounded the way they are. */
  box-shadow: inset 0 0 0 1px rgba(42, 33, 28, 0.14);
}
.pmap__plate { position: absolute; inset: 0; }
.pmap__plate .figure,
.pmap__plate img { width: 100%; height: 100%; border-radius: 0; }
.pmap__plate img { object-fit: cover; transition: transform 700ms var(--ease); }
.pmap:hover .pmap__plate img,
.pmap:focus-visible .pmap__plate img { transform: scale(1.03); }

.pmap__panel {
  position: absolute;
  left: clamp(1rem, 3vw, 2.5rem);
  top: 50%; transform: translateY(-50%);
  display: grid; gap: 0.5rem; justify-items: start;
  max-width: min(26rem, calc(100% - 2rem));
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  background: var(--bone);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(42, 33, 28, 0.10);
}
.pmap__where {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--ink);
}
.pmap__pin {
  width: 10px; height: 10px; flex: none;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--brand-ink);
}
.pmap__coords {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(42, 33, 28, 0.72);        /* bone-tuned: 5.89 on this card */
}
.pmap__cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.35rem;
  font-size: 0.9375rem; font-weight: 600;
  color: var(--brand-ink);
}
.pmap__arrow { transition: transform 240ms var(--ease); }
.pmap:hover .pmap__arrow,
.pmap:focus-visible .pmap__arrow { transform: translateX(3px); }
.pmap__ext {
  font-size: 0.8125rem;
  color: rgba(42, 33, 28, 0.65);        /* 4.73 on bone */
}


/* ---- House detail: the Google embed ---------------------------------
   The live variant, used when a Maps key is configured. The words go
   UNDER the map rather than over it, unlike the static plate: this map
   pans, and a card floated across it would be a dead patch the visitor
   has to drag around. The plate can be overlaid precisely because it is
   a still and there is nothing to block.

   The frame is left at Google's own styling. It is their map, it is the
   one people recognise, and recolouring it to match the site would both
   fight the brand it belongs to and break the thing the embed is for.
   The bone bar beneath is what ties it back to the page.
   --------------------------------------------------------------------- */
/* Carries .pmap too, for the shared type and pin, so every rule meant
   only for the overlaid plate is scoped away from it below. */
.pmap--embed {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--clay);              /* shows while the frame connects */
  border-radius: var(--r) var(--r) 0 0;
  box-shadow: inset 0 0 0 1px rgba(42, 33, 28, 0.14);
}
.pmap__frame {
  display: block;
  width: 100%; height: 100%;
  border: 0;
}
.pmap__bar {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem clamp(1rem, 2.5vw, 2rem);
  padding: clamp(0.9rem, 1.8vw, 1.25rem) clamp(1rem, 2.2vw, 1.5rem);
  background: var(--bone);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: inset 0 0 0 1px rgba(42, 33, 28, 0.14);
}
.pmap__bar .pmap__where { margin: 0; font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); }
.pmap__bar .pmap__coords { margin: 0; }
/* Pushed to the end of the bar on a wide screen, wrapping under on a
   narrow one rather than squeezing the place name to two words. */
.pmap__bar .pmap__cta { margin-left: auto; margin-top: 0; }
.pmap__bar .pmap__ext { margin-left: 0.5rem; }
@media (max-width: 40em) {
  .pmap__bar { flex-direction: column; align-items: flex-start; }
  .pmap__bar .pmap__cta { margin-left: 0; }
}

@media (max-width: 48em) {
  /* The panel comes off the map and sits under it.
     Floated at the foot it still covered the pin: the plate is only about
     200px tall at 320px wide, the card is most of that, and the pin is by
     definition dead centre — measured covered at both 320 and 375. Nothing
     short of shrinking the card fixes an overlay on a box that small, and
     the map is the thing worth the width. Stacked, the two stop competing
     and the whole tile is still one link. */
  .pmap:not(.pmap--embed) {
    aspect-ratio: auto;
    display: grid; grid-template-rows: auto auto;
  }
  .pmap:not(.pmap--embed) .pmap__plate { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .pmap__panel {
    position: static; transform: none;
    left: auto; top: auto;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    /* Divides plate from panel inside the block; the block's own hairline
       still draws the outside. */
    border-top: 1px solid rgba(42, 33, 28, 0.14);
  }
}
/* ---- Dining: the rooms themselves ----------------------------------
   Shown even where a house has not published a restaurant name. Where
   you would be eating is a better answer than the word "Restaurant" in
   a facilities list. --------------------------------------------- */
.fare__rooms {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.fare__room { margin: 0; min-width: 0; }
.fare__room figcaption {
  margin-top: 0.6rem;
  font-size: 0.75rem; color: var(--ink-45);
}

@media (max-width: 62em) {
  .fare__rooms { grid-template-columns: repeat(2, 1fr); }
  .fare__rooms figure:last-child { display: none; }
}
@media (max-width: 40em) {
  .fare__rooms { grid-template-columns: 1fr; }
  .fare__rooms figure:last-child { display: block; }
}

/* ---------------------------------------------------------------------
   THE PASS — dining
   ---------------------------------------------------------------------
   A single line of plates travelling out of the kitchen, so the section
   reads along the horizontal rather than down the page like every other
   band on this site. The rail scrolls itself; the page does not, which
   is why the plates carry an explicit width instead of a flex basis.
------------------------------------------------------------------------ */
.pass {
  background: var(--espresso);
  color: var(--bone);
  padding: var(--section-y) 0;
  overflow: hidden;            /* belt and braces: the rail is the only scroller */
}

.pass__head,
.pass__foot {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pass__head { max-width: 52rem; margin-inline: auto; }

.pass__note {
  margin: 0.9rem 0 0;
  max-width: 44ch;
  color: rgba(245, 241, 232, 0.72);
  font-size: 0.95rem;
  line-height: 1.6;
}
.pass__note a { color: var(--bone); text-decoration-color: rgba(245, 241, 232, 0.45); }
.pass__note a:hover { color: var(--brand-accent); }

/* ---- The rail runs itself -------------------------------------------
   It was a horizontal scroller with a visible bar under it, which meant
   the second half of the row was only reachable by dragging. It is now a
   marquee: the plate list is printed twice and the track is translated
   by exactly one set, so the loop is seamless and there is nothing to
   scroll.

   --pass-dur comes from the plate count in PHP (six seconds a plate), so
   an eleventh kitchen lengthens the loop instead of speeding it up.
------------------------------------------------------------------- */
/* The BASE state is no JavaScript: a plain scrolled row, scrollbar and
   all, with the duplicate set hidden. Nothing animates.

   That is not a stylistic fallback, it is the WCAG 2.2.2 one. The
   animation is pure CSS but the control that stops it is written by the
   script, so a page whose script is blocked would otherwise animate
   forever with no way to stop it. Tying the animation to .js means the
   movement and its stop button arrive together or not at all — and it
   lets the script size the track exactly, because it is guaranteed to
   be there whenever the track is moving. */
.pass__viewport {
  --pass-gap: clamp(0.85rem, 1.6vw, 1.5rem);
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  /* The track starts at the gutter so the first plate lines up with the
     copy above it, then runs off both edges. */
  padding-inline: var(--gutter);
  padding-bottom: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 241, 232, 0.35) transparent;
}

html:not(.js) .pass__plate[aria-hidden="true"] { display: none; }

.js .pass__viewport {
  overflow: hidden;
  padding-bottom: 0.25rem;
  scroll-snap-type: none;
}

.pass__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: max-content;
  gap: var(--pass-gap);
}

.js .pass__rail { animation: pass-run var(--pass-dur, 60s) linear infinite; }

/* One full set to the left. --pass-shift is -100%/copies, which lands on
   the join; the correction is the separator gap flex puts BETWEEN sets,
   which belongs to neither of them. Both come from PHP as plain numbers
   so nothing here has to divide. */
@keyframes pass-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(
           calc(var(--pass-shift, -50%) - (var(--pass-gap) * var(--pass-gapmul, 0.5))), 0, 0); }
}

/* Hover and keyboard focus stop it, and so does the explicit control —
   which is the one that actually satisfies WCAG 2.2.2. */
.pass__viewport:hover .pass__rail,
.pass__viewport:focus-within .pass__rail,
.pass__viewport.is-paused .pass__rail { animation-play-state: paused; }

.pass__plate {
  flex: 0 0 auto;
  width: clamp(13rem, 21vw, 19rem);
}

.pass__plate img,
.pass__plate picture { border-radius: 8px; }

.pass__dish {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(245, 241, 232, 0.66);
}

.pass__foot {
  margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
  max-width: 52rem;
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(245, 241, 232, 0.5);
}
.pass__foot p { margin: 0; }

.pass__pause {
  flex: none;
  min-height: 44px;              /* the same touch target as every other control */
  padding: 0.35rem 1rem;
  border: 1px solid rgba(245, 241, 232, 0.28);
  border-radius: 999px;
  background: none;
  color: rgba(245, 241, 232, 0.72);
  font: inherit; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: var(--fs-label); font-weight: 600;
  cursor: pointer;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.pass__pause:hover { border-color: rgba(245, 241, 232, 0.55); color: var(--bone); }
.pass__pause[hidden] { display: none; }

/* ---- Reduced motion -------------------------------------------------
   Puts the .js branch back to the base state: the scrollbar returns —
   the one place on this page where a visible bar is the correct answer,
   because it becomes the only way through — and the duplicate set goes,
   since it exists purely to make a loop seamless and is noise in a list
   you read by hand.
------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .pass__viewport {
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x proximity;
  }
  .js .pass__rail { animation: none; width: auto; }
  .pass__plate { scroll-snap-align: start; }
  .pass__plate[aria-hidden="true"] { display: none; }
  .pass__pause { display: none; }
}

@media (max-width: 47.99em) {
  .pass__plate { width: clamp(11rem, 58vw, 15rem); }
}

/* ---------------------------------------------------------------------
   SEARCH — the field and the ledger
   ---------------------------------------------------------------------
   The field is set at display scale with a rule under it rather than a
   box around it, so it reads as a line being written on. The results are
   one continuous numbered register with the group name turned into the
   margin — deliberately not the card stack every other index uses.
------------------------------------------------------------------------ */
.sfield {
  background: var(--clay);
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--gutter) clamp(2.25rem, 1.5rem + 3vw, 4rem);
}
.sfield__in { max-width: var(--max); margin-inline: auto; }

.sfield__form {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1rem;
  border-bottom: 2px solid var(--espresso);
  padding-bottom: 0.6rem;
}

.sfield__input {
  flex: 1 1 auto;
  min-width: 0;                    /* or a long term widens the flex line */
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--espresso);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 3.4vw, 3.75rem);
  font-weight: 500;
  line-height: 1.1;
}
.sfield__input::placeholder { color: rgba(42, 33, 28, 0.33); }
.sfield__input:focus { outline: none; }
.sfield__form:focus-within { border-bottom-color: var(--brand-ink); }

/* The input has no visible outline of its own, so focus has to be shown
   on the rule. That is the only affordance, which is why it is 2px. */
.sfield__input::-webkit-search-cancel-button { cursor: pointer; }

.sfield__go {
  flex: 0 0 auto;
  background: var(--espresso);
  color: var(--bone);
  border: 0;
  border-radius: 999px;
  width: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
  aspect-ratio: 1;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.sfield__go:hover { background: var(--brand-ink); }

.sfield__count {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(42, 33, 28, 0.62);
}

/* --- Resting and empty states --------------------------------------- */
.sstart {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}
.sstart__in { max-width: 48rem; }

.sstart__chips {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.chip--link { transition: background 0.18s ease, color 0.18s ease; }
.chip--link:hover { background: var(--espresso); color: var(--bone); }

.sstart__actions {
  margin: 2rem 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
}

/* --- The ledger ------------------------------------------------------ */
.sled {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}

.sled__group {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
  border-top: 1px solid rgba(42, 33, 28, 0.16);
}
.sled__group:first-child { border-top: 0; padding-top: 0; }

/* The group name turned into the margin, riding alongside its rows. */
.sled__label {
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: start;
  position: sticky;
  top: clamp(5rem, 8vw, 7rem);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--brand-ink);
  white-space: nowrap;
}

.sled__list { list-style: none; margin: 0; padding: 0; min-width: 0; }

.sled__row + .sled__row { border-top: 1px solid rgba(42, 33, 28, 0.1); }

.sled__link {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  padding: clamp(0.9rem, 1.8vw, 1.35rem) 0;
  color: inherit;
  text-decoration: none;
}
.sled__link:hover .sled__title { color: var(--brand-ink); }
.sled__link:hover .sled__arrow { transform: translateX(4px); opacity: 1; }

.sled__n {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: rgba(42, 33, 28, 0.38);
}

.sled__text { min-width: 0; }

.sled__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
  font-weight: 500;
  line-height: 1.25;
  transition: color 0.18s ease;
}
.sled__sum {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(42, 33, 28, 0.66);
}

.sled__meta {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(42, 33, 28, 0.5);
  white-space: nowrap;
}

.sled__arrow {
  color: var(--brand-ink);
  opacity: 0.4;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

@media (max-width: 61.99em) {
  /* The vertical label costs more than it earns on a narrow screen, so
     it lies back down above its rows. */
  .sled__group { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
  .sled__label {
    writing-mode: horizontal-tb;
    transform: none;
    position: static;
  }
  .sled__link { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .sled__meta { grid-column: 2; margin-top: 0.4rem; white-space: normal; }
}

@media (max-width: 35.99em) {
  .sled__link { grid-template-columns: minmax(0, 1fr) auto; }
  .sled__n { display: none; }
  .sled__meta { grid-column: 1; }
}

/* ---------------------------------------------------------------------
   JOURNAL — a single piece
   ---------------------------------------------------------------------
   The only page in v2 built around one column of reading. Metadata runs
   down the margin as a spine rather than sitting under the headline in a
   row of dots, and the hero is held to the text measure instead of being
   run full bleed — an article is not an index and should not open like
   one.
------------------------------------------------------------------------ */
.jrn {
  max-width: 68rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 2rem + 3vw, 5rem) var(--gutter) 0;
}

.jrn__head {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-bottom: clamp(1.75rem, 3vw, 3rem);
  border-bottom: 1px solid var(--rule);
}

.jrn__spine > p {
  margin: 0 0 0.6rem;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  /* 0.55 measured 3.52:1 on bone at this size — under AA, and
     invisible until the first article made this template reachable.
     0.65 reads 4.73. */
  color: rgba(42, 33, 28, 0.65);
}
.jrn__cat { color: var(--brand-ink) !important; }

.jrn__standfirst {
  margin: 1.1rem 0 0;
  max-width: 40ch;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  color: rgba(42, 33, 28, 0.74);
}
.jrn__by {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(42, 33, 28, 0.55);
}

.jrn__hero { margin: clamp(2rem, 3.5vw, 3.5rem) 0 0; }
.jrn__hero img, .jrn__hero picture { border-radius: 8px; }

/* One measure, set for reading rather than for layout. */
.jrn__body {
  margin: clamp(2rem, 3.5vw, 3.5rem) 0 0;
  max-width: 38rem;
  margin-inline: auto;
}
.prose--long p {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.75;
}
.prose--long p + p { margin-top: 1.15em; }

/* The first line is lifted so the piece starts rather than continues. */
.prose--long > p:first-child {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.6;
}

.jrn__plates {
  margin: clamp(2.25rem, 4vw, 4rem) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(0.85rem, 1.8vw, 1.5rem);
}
.jrn__plate { margin: 0; min-width: 0; }
.jrn__plate img, .jrn__plate picture { border-radius: 8px; }
.jrn__plate figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(42, 33, 28, 0.6);
}

.jrn__about {
  margin: clamp(2.5rem, 4vw, 4rem) auto 0;
  max-width: 38rem;
  padding: clamp(1.25rem, 2.2vw, 1.85rem);
  background: var(--clay);
  border-radius: 8px;
}
.jrn__aboutList { list-style: none; margin: 1rem 0 0; padding: 0; }
.jrn__aboutList li + li { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(42, 33, 28, 0.14); }
.jrn__aboutList a { display: block; color: inherit; text-decoration: none; }
.jrn__aboutName {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
}
.jrn__aboutList a:hover .jrn__aboutName { color: var(--brand-ink); }
.jrn__aboutWhere {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  /* This sits on the clay band, where 0.62 measured 3.91:1 — the
     token override above cannot reach it because the value is
     hardcoded rather than taken from --ink-45. 0.72 reads 5.16. */
  color: rgba(42, 33, 28, 0.72);
}

.jrn__more {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}
.jrn__moreList {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.jrn__moreList li { min-width: 0; }
.jrn__moreList a { display: block; color: inherit; text-decoration: none; }
.jrn__moreList img, .jrn__moreList picture { border-radius: 8px; }
.jrn__moreTitle {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
}
.jrn__moreList a:hover .jrn__moreTitle { color: var(--brand-ink); }

@media (max-width: 47.99em) {
  /* The spine lies down above the headline; a 8.5rem margin column at
     phone width leaves the title nowhere to go. */
  .jrn__head { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .jrn__spine { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
  .jrn__spine > p { margin-bottom: 0; }
}

/* ---------------------------------------------------------------------
   ABOUT — where the houses stand
   ---------------------------------------------------------------------
   Three grounds as a band rather than a sentence: the point is the
   spread, not the order, so nothing here is numbered.
------------------------------------------------------------------------ */
.grounds {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--section-y);
}
.grounds__head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }

.grounds__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
}
.grounds__rule {
  display: block;
  width: 44px; height: 3px;
  background: var(--brand);
  border-radius: 2px;
  margin-bottom: 0.9rem;
}
.grounds__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.grounds__line {
  margin-top: 0.45rem;
  color: var(--ink-70);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* The staffing line that closes the three statements. */
.position__foot {
  max-width: var(--max);
  margin: clamp(1.75rem, 3vw, 2.75rem) auto 0;
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.position__foot span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-70);
}

/* ---------------------------------------------------------------------
   ABOUT — the wider group
   ---------------------------------------------------------------------
   A pair of panels on espresso. Deliberately NOT a numbered list: this
   page already runs numbered rows twice — the three statements and the
   five principles — and a third would turn the page into one template
   repeating. Vision and mission are a pair, not a ranking.
------------------------------------------------------------------------ */
.wider {
  background: var(--espresso);
  padding: var(--section-y) var(--gutter);
  --brand-accent: var(--brand-on-dark);
}
.wider__head { max-width: 52rem; margin: 0 auto clamp(2rem, 4vw, 3.25rem); }
.wider__note {
  margin-top: 0.9rem;
  color: var(--on-dark-70);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.wider__pair {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.wider__panel {
  background: rgba(245, 241, 232, 0.05);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.wider__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-on-dark);
  margin-bottom: 0.75rem;
}
.wider__body {
  color: var(--on-dark-70);
  font-size: 1rem;
  line-height: 1.7;
}

.wider__foot {
  max-width: var(--max);
  margin: clamp(1.75rem, 3vw, 2.75rem) auto 0;
  display: flex;
  align-items: baseline;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--rule-dark);
}
.wider__figure {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  color: var(--brand-on-dark);
}
.wider__figureLabel {
  color: var(--on-dark-70);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 48ch;
}

/* ---------------------------------------------------------------------
   HOTELS — named but not documented
   ---------------------------------------------------------------------
   Set as a plain register, not as cards. A card looks like a link and
   there is nothing behind these yet — the group's profile gives names
   and no addresses, rooms or contacts.
------------------------------------------------------------------------ */
/* ---- Houses: every room grade ---------------------------------------
   Replaces .named, which listed three unbuilt hotels by name and nothing
   else. A house per row, its grades running on one line after it — the
   shape of an index, which is what this is. Not cards: a grade is two or
   three words and a card round it would be mostly padding.
   --------------------------------------------------------------------- */
.grades {
  max-width: var(--max); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}
.grades__head { max-width: 54ch; }
.grades__note {
  margin-top: 1rem;
  font-size: var(--fs-lede);
  color: var(--ink-70);
}
.grades__list {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.grade { border-bottom: 1px solid var(--rule-strong); }
.grade__link {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(0.9rem, 1.8vw, 1.25rem);
  color: inherit; text-decoration: none;
}
.grade__house {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--ink);
  transition: color 200ms var(--ease);
}
.grade__link:hover .grade__house,
.grade__link:focus-visible .grade__house { color: var(--brand-ink); }
.grade__rooms { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-70); }
/* Not the token: --ink-45 is 0.55 and reads 3.52:1 on bone, under AA.
   It is only a separator, but it is still painted text. 0.65 reads
   4.73 and looks no heavier. */
.grade__sep { margin: 0 0.5rem; color: rgba(42, 33, 28, 0.65); }

@media (max-width: 40em) {
  /* House over its grades: side by side at this width the grade column
     gets about twelve characters and breaks every name in half. */
  .grade__link { grid-template-columns: minmax(0, 1fr); }
}

/* Two attributed sets inside the wider-group band. */
.wider__set { max-width: var(--max); margin-inline: auto; }
.wider__set + .wider__set { margin-top: clamp(2rem, 4vw, 3.25rem); }

.wider__setHead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem clamp(1rem, 2vw, 1.75rem);
  margin-bottom: clamp(0.9rem, 1.8vw, 1.35rem);
  padding-bottom: clamp(0.6rem, 1.2vw, 0.9rem);
  border-bottom: 1px solid var(--rule-dark);
}
.wider__setLabel {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--brand-on-dark);
}
.wider__setNote {
  color: var(--on-dark-45);
  font-size: 0.875rem;
  line-height: 1.5;
}

.grounds__foot {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--rule);
  max-width: 62ch;
  color: var(--ink-70);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.grounds__foot strong { color: var(--ink); font-weight: 600; }

@media (max-width: 47.99em) {
  /* One card per row. Two abreast on a 320px screen leaves each card
     124px wide — not enough for a photograph, a name that does not
     break mid-word, and a sentence under it. */
  .creed__list { grid-template-columns: minmax(0, 1fr); }
  .creed__row,
  .creed__row:nth-child(4),
  .creed__row:nth-child(5) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   MASTHEAD — the photographic variant
   ---------------------------------------------------------------------
   The picture becomes the ground. Two gradients rather than one: a
   vertical pass so the type has weight under it, and a horizontal pass
   so the left column stays dark whatever the photograph is doing over
   on the right. One vertical scrim alone leaves a headline sitting on
   a bright sky at about 2:1.
------------------------------------------------------------------------ */
.mast--shot {
  position: relative;
  isolation: isolate;                 /* keeps the scrim off the header */
  background: var(--espresso);
  color: var(--on-dark);
  min-height: clamp(360px, 46vh, 540px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(3.5rem, 6vw, 7rem) clamp(2.5rem, 4vw, 4rem);
}
.mast--shot .mast__media { position: absolute; inset: 0; z-index: 0; }
.mast--shot .mast__media .figure {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--espresso);
}
/* Default is the centre, as before. Pages that set $mhFocus move it. */
.mast--shot .mast__media img { object-position: var(--mast-focus, 50% 50%); }
.mast--shot .mast__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right,
      rgba(22, 17, 14, 0.86) 0%,
      rgba(22, 17, 14, 0.62) 42%,
      rgba(22, 17, 14, 0.22) 76%,
      rgba(22, 17, 14, 0.08) 100%),
    linear-gradient(to top,
      rgba(22, 17, 14, 0.80) 0%,
      rgba(22, 17, 14, 0.42) 46%,
      rgba(22, 17, 14, 0.14) 78%,
      rgba(22, 17, 14, 0.30) 100%);
}
.mast--shot .mast__in { position: relative; z-index: 2; width: 100%; }

.mast--shot .mast__lede     { color: var(--on-dark-70); }
.mast--shot .mast__meta     { border-top-color: var(--rule-dark); }
.mast--shot .mast__meta-label { color: var(--on-dark-45); }
.mast--shot .mast__meta-value { color: var(--on-dark); }

/* ---------------------------------------------------------------------
   JOURNAL — what to read while it is empty
------------------------------------------------------------------------ */
.meanwhile {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--rule);
}
.meanwhile__head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

.meanwhile__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.mcard { min-width: 0; }
.mcard__link { display: block; color: inherit; }
.mcard__media { display: block; overflow: hidden; border-radius: var(--r); }
.mcard__media .figure { transition: transform 600ms var(--ease); }
.mcard__link:hover .mcard__media .figure { transform: scale(1.04); }

.mcard__eyebrow {
  display: block;
  margin-top: 0.9rem;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--brand-accent);
}
.mcard__title {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}
.mcard__link:hover .mcard__title { color: var(--brand-ink); }
.mcard__line {
  display: block;
  margin-top: 0.4rem;
  color: var(--ink-70);
  font-size: 0.9375rem;
  line-height: 1.6;
}


/* =====================================================================
   EXPERIENCES — the inverse view, and what is not offered yet
   ===================================================================== */

/* AN EDITORIAL SPREAD, ON CLAY.
   Four layouts were tried before this one: a 2-up grid of bordered
   cards, four flat text columns, staggered photo plates, and a ruled
   index. The first three were arrangements of boxes; the fourth was a
   list with rules drawn on it.

   This is the same records set as a magazine spread. The house name is
   display type, the plate alternates left and right down the page, and
   the highlights sit in a two-column field of small bone cards beneath
   it. The house rows themselves stay unboxed; only the facts are.

   CLAY, not espresso. The page ran espresso masthead, bone, espresso,
   bone, espresso newsletter, espresso footer — four dark bands out of
   six, and this was the third of them. A light warm ground breaks the
   run, and the plates lift off it in a way they never did against the
   dark.
------------------------------------------------------------------- */
.forwhat {
  background: var(--clay);
  padding-block: var(--section-y);
}
.forwhat__in {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.forwhat__grid {
  list-style: none;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* Plate one side, words the other, alternating. The rows are defined by
   named areas so the flip is one property rather than a pile of
   nth-child overrides. */
.fwcard {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  grid-template-areas: "plate body";
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  align-items: start;
  color: inherit; text-decoration: none;
}
.forwhat__grid > li:nth-child(even) .fwcard {
  grid-template-columns: minmax(0, 1fr) minmax(0, 250px);
  grid-template-areas: "body plate";
}

.fwcard__plate {
  grid-area: plate;
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  background: #d6c6b2;
}
.fwcard__plate .figure { border-radius: 0; }
.fwcard__plate img {
  transition: transform 620ms var(--ease);
}
.fwcard:hover .fwcard__plate img,
.fwcard:focus-visible .fwcard__plate img { transform: scale(1.04); }

/* The body wrapper takes the grid area; head and list stack inside it. */
.fwcard__body { grid-area: body; min-width: 0; }
.fwcard__head { display: block; }

.fwcard__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.02;
  color: var(--ink);
  transition: color 200ms var(--ease);
}
.fwcard:hover .fwcard__name,
.fwcard:focus-visible .fwcard__name { color: var(--brand-ink); }

/* Location and reasons on one line — two separate label rows above a
   rule was three horizontal bands of small caps before any content. */
.fwcard__where {
  display: inline;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--ink-70);
}
.fwcard__tags {
  display: inline;
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  color: var(--brand-ink);
}
.fwcard__tags::before {
  content: "·";
  margin: 0 0.6rem;
  color: var(--ink-45);
}
.fwcard__tags span + span::before {
  content: "·";
  margin: 0 0.45rem;
  color: var(--ink-45);
}
.fwcard__meta { display: block; margin-top: 0.7rem; }
.fwcard__none {
  display: block; margin-top: 0.7rem;
  font-size: 0.875rem; color: var(--ink-45);
}

/* THE HIGHLIGHTS ARE CARDS.
   They were ruled rows in the clay, and the detail line kept reading as
   though it were fading into the ground — darkening the token helped the
   measurement (5.16 to 7.45) but not the impression, because the problem
   was never only contrast. Nothing held the text. Each fact sat on the
   same surface as everything around it.

   A bone panel per highlight gives every one an edge and a surface of
   its own, and puts the detail line on the ground its colour was mixed
   for in the first place: --ink-70 reads 5.89 on bone against 5.16 on
   clay, with the card border doing the separating rather than the text
   colour having to. */
.fwcard__list {
  display: grid;
  /* Auto-fit rather than a fixed two, because two made 425px cards
     holding one short line — seven of the twenty-four filled under
     half their width. A 15rem floor lands three across the body at
     desktop (median fill 61% -> 84%, none under 50%) and steps down
     to two and then one on its own. min(100%, ...) keeps the floor
     from exceeding the content box at 320px. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(0.5rem, 1vw, 0.75rem);
  margin-top: 1.3rem;
  padding-top: 0;
  border-top: 0;
  counter-reset: fwhl;
}
.fwcard__item {
  counter-increment: fwhl;
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0 0.5rem;
  align-content: start;
  padding: clamp(0.75rem, 1.4vw, 1rem);
  background: var(--bone);
  border-radius: var(--r);
  /* A hairline rather than a shadow: the site has no elevation anywhere
     else and one drop shadow here would look borrowed. */
  box-shadow: inset 0 0 0 1px rgba(42, 33, 28, 0.08);
  transition: box-shadow 240ms var(--ease);
}
.fwcard:hover .fwcard__item { box-shadow: inset 0 0 0 1px rgba(42, 33, 28, 0.16); }

.fwcard__item::before {
  content: counter(fwhl, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 0.6875rem; font-weight: 700;
  line-height: 1.7;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
.fwcard__label {
  display: block;
  font-weight: 600; font-size: 0.9375rem; line-height: 1.3;
  color: var(--ink);
}
/* Back to the bone-tuned token, because this now IS bone. */
.fwcard__detail {
  display: block; margin-top: 0.15rem;
  font-size: 0.875rem; line-height: 1.5;
  color: rgba(42, 33, 28, 0.72);
}
.fwcard__label:only-child { grid-column: 2; }

/* CAP THE COLUMNS AT THREE.
   Auto-fit alone reached four tracks past ~1400px, and every house has
   exactly six highlights: six divides by three, two and one, never by
   four, so a fourth track left two dead cells on the second row and made
   the section taller than it was at 1280.

   The right measure is the body's own width, not the viewport's — the
   body is full width below 62em where the plate stacks on top, and only
   about two thirds of it above, so the same viewport width means two
   different amounts of room. A container query asks the element. The
   auto-fit rule above stays as the fallback for engines without
   container queries: one track fewer than ideal at the very top end,
   but never broken and never overflowing. */
@supports (container-type: inline-size) {
  .fwcard__body { container: fwbody / inline-size; }
  .fwcard__list { grid-template-columns: minmax(0, 1fr); }
  @container fwbody (min-width: 30rem) {
    .fwcard__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @container fwbody (min-width: 46rem) {
    .fwcard__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}@media (max-width: 62em) {
  /* Plate on top, words under it, same order for every house — an
     alternating flip is a wide-screen device and reads as an accident
     once the columns stack. */
  .fwcard,
  .forwhat__grid > li:nth-child(even) .fwcard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "plate" "body";
    gap: 1.25rem;
  }
  .fwcard__plate { max-width: 250px; }
}
@media (max-width: 40em) {
  /* The list needs no column override here any more — auto-fit has
     already dropped it to one track by this width. */
  .fwcard__plate { max-width: none; }
}
/* One quiet line. These have no houses and no photography, so they get
   neither a row nor a frame. */
.planned { padding-block: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--rule); }
.planned__in {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75rem clamp(1rem, 2.5vw, 2rem);
}
.planned__head {
  font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink-70);
  white-space: nowrap;
}
.planned__list {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  font-weight: 600; letter-spacing: -0.015em;
}
.planned__list span + span::before {
  content: "\00b7";
  margin-right: 0.7rem;
  color: var(--ink-45);
  font-weight: 400;
}
.planned__note { color: var(--ink-70); font-size: 0.875rem; max-width: 40ch; }

@media (max-width: 62em) {
  .planned__in { grid-template-columns: minmax(0, 1fr); }
}