/* =============================================================================
   CAELUM — component layer

   Rules here declare STRUCTURE (display / grid / flex / position / size) and
   COLOUR only. No font-family, font-size, font-weight or line-height: those are
   utility classes on the markup (base.css §3). Keeping that split absolute is
   what stops a component rule and a utility class from fighting over the
   cascade. The two documented exceptions are structural line-height on a flex
   container and the icon glyph sizing in §4.

   No hex codes. Every colour is var(--cl-*), resolved by inc/design-system.php.

   Order follows the way a page is assembled: chrome → hero → content → chrome.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */

.cl-skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 999;
  padding: 12px 22px;
  background: var(--cl-primary);
  color: var(--cl-primary-ink);
  border-radius: var(--cl-radius);
  transition: top var(--cl-dur-fast) var(--cl-ease);
}
.cl-skip:focus { top: 12px; }

.site-main { display: block; min-height: 40vh; }

/* A full-bleed band inside a normally-contained page. */
.cl-bleed { width: 100%; }
.cl-inverse { background: var(--cl-inverse-bg); color: var(--cl-inverse-ink); }
.cl-band    { background: var(--cl-surface-alt); }
.cl-panel   { background: var(--cl-surface); }

/* -----------------------------------------------------------------------------
   2. The meridian — Caelum's signature rule

   A hairline crossed by a small rotated square. It is the theme's only
   ornament, and it earns its place by doing a job: it marks where a section
   begins, the way a plan drawing marks a datum line.
   -------------------------------------------------------------------------- */

.cl-meridian {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--cl-accent);
}
.cl-meridian::before,
.cl-meridian::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--cl-line);
}
.cl-meridian__node {
  width: 6px;
  height: 6px;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
}
/* Left-aligned variant: the rule runs to the right only. */
.cl-meridian--start::before { display: none; }
.cl-meridian--start { justify-content: flex-start; }
.on-inverse .cl-meridian { color: var(--cl-inverse-accent); }
.on-inverse .cl-meridian::before,
.on-inverse .cl-meridian::after { background: var(--cl-line-inv); }

/* The short accent stroke that opens an eyebrow. */
.cl-tick {
  display: inline-block;
  width: 26px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
  opacity: .7;
}

/* -----------------------------------------------------------------------------
   3. Section head
   -------------------------------------------------------------------------- */

.cl-head { display: grid; gap: 20px; }
.cl-head--center { justify-items: center; text-align: center; }
.cl-head--split {
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: 48px;
}
.cl-head__eyebrow { color: var(--cl-accent-ink); display: flex; align-items: center; gap: 12px; }
.on-inverse .cl-head__eyebrow { color: var(--cl-inverse-accent); }
.cl-head__title { color: var(--cl-ink); }
.on-inverse .cl-head__title { color: var(--cl-inverse-ink); }
.cl-head__lede { color: var(--cl-muted); }
.on-inverse .cl-head__lede { color: var(--cl-inverse-muted); }

/* The section index — "01" set in the display face, sitting off the title's
   shoulder. Printed by the page builder, not typed by the editor. */
.cl-index {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cl-accent);
}
.cl-index::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--cl-line-strong);
}

@media (max-width: 1024px) {
  .cl-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
}

/* -----------------------------------------------------------------------------
   3b. The datum band

   A hairline across the page carrying three facts. Borrowed from the datum line
   on an architect's drawing — the reference everything else is measured from —
   and used as the page's resting point between two heavy sections.
   -------------------------------------------------------------------------- */

.cl-datum__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  color: var(--cl-muted);
}
.cl-datum__cell + .cl-datum__cell { position: relative; }

@media (max-width: 640px) {
  .cl-datum__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* -----------------------------------------------------------------------------
   4. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--cl-radius);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--cl-dur-fast) var(--cl-ease),
              color var(--cl-dur-fast) var(--cl-ease),
              border-color var(--cl-dur-fast) var(--cl-ease);
}
.btn--solid { background: var(--cl-btn); color: var(--cl-btn-ink); }
.btn--solid:hover { background: var(--cl-btn-hover); }

.btn--outline { border-color: var(--cl-line-strong); color: var(--cl-ink); }
.btn--outline:hover { border-color: var(--cl-ink); background: var(--cl-fill-soft); }

.btn--accent { background: var(--cl-accent); color: var(--cl-btn-ink); }
.btn--accent:hover { background: var(--cl-accent-ink); }

.btn--sm { padding: 11px 20px; }
.btn--lg { padding: 18px 40px; }
.btn--block { width: 100%; }

/* On an inverse band or over a photograph the outline button inverts. */
.on-inverse .btn--outline,
.on-photo .btn--outline { border-color: var(--cl-line-inv); color: var(--cl-inverse-ink); }
.on-inverse .btn--outline:hover,
.on-photo .btn--outline:hover {
  border-color: var(--cl-inverse-ink);
  background: color-mix(in srgb, var(--cl-inverse-ink) 12%, transparent);
}
.on-inverse .btn--solid,
.on-photo .btn--solid { background: var(--cl-inverse-ink); color: var(--cl-inverse-bg); }
.on-inverse .btn--solid:hover,
.on-photo .btn--solid:hover {
  background: color-mix(in srgb, var(--cl-inverse-ink) 84%, var(--cl-inverse-bg));
}

/*
 * The text link with a rule that grows out from the left. Used for every
 * "read more" in the theme; it is the one micro-interaction that repeats, and
 * repeating exactly one is what makes it read as a system rather than a demo.
 */
.cl-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  color: var(--cl-ink);
  padding-bottom: 4px;
}
.cl-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--cl-line-strong);
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform var(--cl-dur-mid) var(--cl-ease), background-color var(--cl-dur-mid) var(--cl-ease);
}
.cl-link:hover::after,
.cl-link:focus-visible::after { transform: scaleX(1); background: var(--cl-accent); }
.cl-link__arrow { transition: transform var(--cl-dur-mid) var(--cl-ease); }
.cl-link:hover .cl-link__arrow { transform: translateX(5px); }
.on-inverse .cl-link { color: var(--cl-inverse-ink); }
.on-inverse .cl-link::after { background: var(--cl-line-inv); }
.on-inverse .cl-link:hover::after { background: var(--cl-inverse-accent); }

/* Inline SVG icons inherit colour and sit on the text baseline. Sizing an icon
   is a structural concern, which is why it lives here and not in a utility. */
.cl-icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.cl-icon--lg { width: 22px; height: 22px; }

/* -----------------------------------------------------------------------------
   5. Top bar
   -------------------------------------------------------------------------- */

.cl-has-topbar { --cl-topbar-h: 42px; }

.cl-topbar {
  position: relative;
  z-index: 60;
  background: var(--cl-inverse-bg);
  color: var(--cl-inverse-ink);
}
.cl-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 42px;
  flex-wrap: wrap;
}
.cl-topbar a { color: inherit; opacity: .8; transition: opacity var(--cl-dur-fast) var(--cl-ease); }
.cl-topbar a:hover { opacity: 1; }
.cl-topbar .cl-icon { color: var(--cl-inverse-accent); }

/* -----------------------------------------------------------------------------
   6. Header + navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cl-bg);
  border-bottom: 1px solid var(--cl-line-soft);
  transition: background-color var(--cl-dur-mid) var(--cl-ease),
              color var(--cl-dur-mid) var(--cl-ease),
              border-color var(--cl-dur-mid) var(--cl-ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: var(--cl-header-h);
}

/*
 * A page that opens on a full-bleed photograph lets the header float over it.
 * The gradient scrim is not decoration — it is what keeps the links legible
 * over an image nobody has seen yet, and without it this is a contrast bug
 * waiting for the operator's first bright upload.
 */
.cl-transparent .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  color: var(--cl-inverse-ink);
}
.cl-transparent.cl-has-topbar .site-header { top: var(--cl-topbar-h); }
.cl-transparent .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  bottom: -56px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--cl-inverse-bg) 52%, transparent),
    transparent);
  pointer-events: none;
  z-index: -1;
}
/* Past the hero the header becomes solid and the scrim is dropped. */
.site-header.is-stuck {
  position: fixed;
  top: 0;
  background: var(--cl-bg);
  color: var(--cl-ink);
  border-bottom-color: var(--cl-line-soft);
}
.site-header.is-stuck::before { opacity: 0; }

.cl-brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; }
.cl-brand img { max-height: 46px; width: auto; }
.cl-brand__text { display: grid; gap: 3px; }
.cl-brand__name { color: inherit; }
.cl-brand__tag { color: var(--cl-muted); }
.site-header:not(.is-stuck) .cl-transparent .cl-brand__tag { color: inherit; }
.cl-transparent .site-header:not(.is-stuck) .cl-brand__tag { color: inherit; opacity: .75; }

/* The mark: a four-point star cut from the accent. Caelum's only logo device. */
.cl-mark { width: 22px; height: 22px; color: var(--cl-accent); flex: none; }
.cl-transparent .site-header:not(.is-stuck) .cl-mark { color: var(--cl-inverse-accent); }

.cl-nav { display: flex; align-items: center; gap: 36px; }
.cl-nav__list { display: flex; align-items: center; gap: 30px; }
.cl-nav__list li { position: relative; }
.cl-nav__list a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: inherit;
}
.cl-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--cl-dur-mid) var(--cl-ease);
}
.cl-nav__list > li > a:hover::after,
.cl-nav__list > li.current-menu-item > a::after,
.cl-nav__list > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Sub-menus. Opened on hover AND on focus-within, so the keyboard reaches them. */
.cl-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 232px;
  padding: 12px 0;
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  display: grid;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--cl-dur-fast) var(--cl-ease),
              transform var(--cl-dur-fast) var(--cl-ease),
              visibility var(--cl-dur-fast);
  z-index: 20;
}
.cl-nav__list li:hover > .sub-menu,
.cl-nav__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cl-nav__list .sub-menu a {
  padding: 9px 22px;
  color: var(--cl-ink);
  transition: background-color var(--cl-dur-fast) var(--cl-ease), color var(--cl-dur-fast) var(--cl-ease);
}
.cl-nav__list .sub-menu a:hover { background: var(--cl-fill-soft); color: var(--cl-accent-ink); }

.cl-header__actions { display: flex; align-items: center; gap: 18px; }

/* The burger. Three rules that become an X — no icon font, no library. */
.cl-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.cl-burger__box { display: grid; gap: 5px; width: 22px; }
.cl-burger__box span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform var(--cl-dur-fast) var(--cl-ease), opacity var(--cl-dur-fast) var(--cl-ease);
}
.cl-burger[aria-expanded="true"] .cl-burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cl-burger[aria-expanded="true"] .cl-burger__box span:nth-child(2) { opacity: 0; }
.cl-burger[aria-expanded="true"] .cl-burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The drawer. Full-height sheet, focus-trapped by theme.js. */
.cl-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--cl-bg);
  color: var(--cl-ink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--cl-dur) var(--cl-ease), visibility var(--cl-dur);
  overflow-y: auto;
}
.cl-drawer.is-open { transform: translateY(0); visibility: visible; }
.cl-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--cl-header-h);
  border-bottom: 1px solid var(--cl-line-soft);
}
.cl-drawer__body { display: grid; align-content: start; gap: 4px; padding-block: 32px; }
.cl-drawer__body a { display: block; padding: 10px 0; color: var(--cl-ink); }
.cl-drawer__body .sub-menu { padding-left: 20px; }
.cl-drawer__body .sub-menu a { color: var(--cl-muted); padding: 7px 0; }
.cl-drawer__foot { border-top: 1px solid var(--cl-line-soft); padding-block: 24px; display: grid; gap: 14px; }

@media (max-width: 1024px) {
  .cl-nav { display: none; }
  .cl-burger { display: inline-flex; }
}

/* -----------------------------------------------------------------------------
   7. Booking bar

   A native GET <form> whose field names are exactly the plugin's query keys
   (checkIn / checkOut / adults / children). No JavaScript builds the query
   string — the browser serialises it, so the bar keeps working with scripting
   disabled and there is no casing bug to introduce.
   -------------------------------------------------------------------------- */

.cl-book {
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  padding: 10px;
}
.cl-book__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: stretch;
  gap: 8px;
}
.cl-book__field {
  display: grid;
  gap: 5px;
  padding: 12px 16px;
  border-right: 1px solid var(--cl-line-soft);
}
.cl-book__grid > .cl-book__field:nth-last-of-type(1) { border-right: 0; }
.cl-book__label { color: var(--cl-muted); }
.cl-book__field input,
.cl-book__field select {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--cl-ink);
  padding: 0;
  appearance: none;
}
.cl-book__field input::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
.cl-book__submit { display: grid; }

/* Over a hero photograph the bar floats on the surface colour, lifted just
   enough to read as an object placed on the image rather than printed into it. */
.cl-book--float {
  box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--cl-inverse-bg) 70%, transparent);
}

/* The sticky mobile reserve bar. The only elevation in the theme. */
.cl-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--cl-surface);
  border-top: 1px solid var(--cl-line);
  transform: translateY(105%);
  transition: transform var(--cl-dur-mid) var(--cl-ease);
}
.cl-stickybar.is-visible { transform: translateY(0); }

@media (max-width: 1024px) {
  .cl-book__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-book__field { border-right: 0; border-bottom: 1px solid var(--cl-line-soft); }
  .cl-book__submit { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cl-book__grid { grid-template-columns: minmax(0, 1fr); }
  .cl-stickybar { display: flex; }
}

/* -----------------------------------------------------------------------------
   8. Heroes
   -------------------------------------------------------------------------- */

.cl-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(94vh, 900px);
  padding-top: calc(var(--cl-header-h) + 64px);
  padding-bottom: 56px;
  overflow: hidden;
  background: var(--cl-inverse-bg);
}
.cl-hero__media { position: absolute; inset: 0; z-index: 0; }
.cl-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cl-scrim-grad);
  z-index: 1;
}
.cl-hero__inner { position: relative; z-index: 2; width: 100%; }
.cl-hero__title { color: var(--cl-inverse-ink); }
.cl-hero__lede { color: var(--cl-inverse-muted); }
.cl-hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cl-hero__book { width: min(880px, 100%); }

/* A vertical hairline dropped from the top edge to the copy — the theme's way
   of saying "the page starts here" without an arrow or a bouncing chevron. */
.cl-hero__plumb {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 96px;
  background: linear-gradient(to bottom, transparent, var(--cl-inverse-accent));
  opacity: .55;
  z-index: 2;
}

/*
 * The aperture hero: the photograph is not full-bleed but held inside an arched
 * opening, with the type set beside it. It is the most "architectural" of the
 * three and the one the demo home page opens with.
 */
.cl-hero-ap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding-top: calc(var(--cl-header-h) + var(--cl-section));
}
.cl-hero-ap__media { min-height: min(76vh, 820px); }
.cl-hero-ap__body { display: grid; gap: 26px; }

@media (max-width: 1024px) {
  .cl-hero { min-height: 76vh; padding-top: calc(var(--cl-header-h) + 40px); }
  .cl-hero-ap { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--cl-header-h) + 48px); }
  .cl-hero-ap__media { min-height: 0; aspect-ratio: 4 / 5; }
  .cl-hero__plumb { display: none; }
}

/* -----------------------------------------------------------------------------
   9. Statement + editorial blocks
   -------------------------------------------------------------------------- */

.cl-statement { display: grid; grid-template-columns: 3fr 9fr; gap: clamp(32px, 5vw, 88px); }
.cl-statement__aside { display: grid; align-content: start; gap: 18px; color: var(--cl-muted); }
.cl-statement__body { display: grid; gap: 28px; }
.cl-statement__body p { color: var(--cl-muted); }
.cl-statement__body p:first-of-type { color: var(--cl-ink); }

/* Signature list: a rule per row, the label at the left margin. */
.cl-spec { display: grid; }
.cl-spec__row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  padding-block: 18px;
  border-top: 1px solid var(--cl-line-soft);
}
.cl-spec__row:last-child { border-bottom: 1px solid var(--cl-line-soft); }
.cl-spec__key { color: var(--cl-muted); }
.cl-spec__val { color: var(--cl-ink); }

/* Alternating feature rows. Every second row swaps sides in the grid rather
   than being reordered in the markup, so the reading order stays correct. */
.cl-feature {
  display: grid;
  grid-template-columns: 6fr 6fr;
  align-items: center;
  gap: clamp(28px, 4.5vw, 84px);
}
.cl-feature__media { min-height: 0; aspect-ratio: 4 / 5; }
.cl-feature__body { display: grid; gap: 22px; align-content: center; }
.cl-feature--flip .cl-feature__media { order: 2; }
.cl-feature--flip .cl-feature__body { order: 1; }

/* The offset caption plate — a small panel that overlaps the photograph's sill. */
.cl-plate {
  position: relative;
  z-index: 2;
  margin-top: -56px;
  margin-left: 32px;
  width: min(340px, 78%);
  padding: 22px 26px;
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
}

@media (max-width: 1024px) {
  .cl-statement { grid-template-columns: minmax(0, 1fr); }
  .cl-feature { grid-template-columns: minmax(0, 1fr); }
  .cl-feature--flip .cl-feature__media,
  .cl-feature--flip .cl-feature__body { order: 0; }
  .cl-spec__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* -----------------------------------------------------------------------------
   9b. The hours of light

   A schedule, not a feature list. The time column is fixed-width and tabular so
   the numbers stack into a true column; the dot between the two columns sits on
   a hairline that runs the height of the list, which is what makes it read as a
   timeline rather than a definition list.
   -------------------------------------------------------------------------- */

.cl-hours { display: grid; }
.cl-hours__row {
  display: grid;
  grid-template-columns: 92px 24px 1fr;
  align-items: baseline;
  gap: 0;
  padding-block: 22px;
  border-top: 1px solid var(--cl-line-soft);
}
.cl-hours__row:last-child { border-bottom: 1px solid var(--cl-line-soft); }
.cl-hours__t { color: var(--cl-accent-ink); }
.cl-hours__d { color: var(--cl-muted); }

/* The connecting rule: a hairline down the gutter, interrupted by each dot. */
.cl-hours__dot {
  position: relative;
  align-self: stretch;
  justify-self: center;
  width: 1px;
  background: var(--cl-line);
}
.cl-hours__row:first-child .cl-hours__dot { background: linear-gradient(to bottom, transparent 0 50%, var(--cl-line) 50% 100%); }
.cl-hours__row:last-child .cl-hours__dot { background: linear-gradient(to bottom, var(--cl-line) 0 50%, transparent 50% 100%); }
.cl-hours__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--cl-accent);
  transform: rotate(45deg);
}

@media (max-width: 640px) {
  .cl-hours__row { grid-template-columns: 72px 20px 1fr; padding-block: 18px; }
}

/* -----------------------------------------------------------------------------
   9c. Facets — what is here

   Cells separated by real hairlines: a 1px grid gap over the line colour, so the
   rules meet exactly at the corners instead of doubling up the way per-cell
   borders do.
   -------------------------------------------------------------------------- */

.cl-facets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--cl-line-soft);
  border: 1px solid var(--cl-line-soft);
}
.cl-facet {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 36px 32px 40px;
  background: var(--cl-bg);
  transition: background-color var(--cl-dur-mid) var(--cl-ease);
}
.cl-facet:hover { background: var(--cl-surface); }
.cl-facet__no { color: var(--cl-accent); }

@media (max-width: 1024px) { .cl-facets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cl-facets { grid-template-columns: minmax(0, 1fr); } .cl-facet { padding: 28px 24px 30px; } }

/* -----------------------------------------------------------------------------
   9d. The ledger — offers, and the search/offer archive rows

   Set like a wine list: name, conditions, sentence, price, rule. Cards would ask
   the eye to compare four photographs; a ledger lets it compare the two things
   that decide it, down one column.
   -------------------------------------------------------------------------- */

.cl-ledger { display: grid; }
.cl-ledger__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 40px;
  padding-block: 32px;
  border-top: 1px solid var(--cl-line-soft);
}
.cl-ledger__row:last-child { border-bottom: 1px solid var(--cl-line-soft); }
.cl-ledger__main a { transition: color var(--cl-dur-fast) var(--cl-ease); }
.cl-ledger__main a:hover { color: var(--cl-accent-ink); }
.cl-ledger__side {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 14px;
  text-align: right;
}

@media (max-width: 640px) {
  .cl-ledger__row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cl-ledger__side { justify-items: start; text-align: left; }
}

/* -----------------------------------------------------------------------------
   10. Cards — rooms, offers, journal
   -------------------------------------------------------------------------- */

.cl-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--cl-surface);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  overflow: hidden;
  transition: border-color var(--cl-dur-mid) var(--cl-ease);
}
.cl-card:hover { border-color: var(--cl-accent); }
.cl-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cl-surface-alt); }
.cl-card__body { display: grid; align-content: start; gap: 12px; padding: 26px 26px 28px; }
.cl-card__title { color: var(--cl-ink); }
.cl-card__meta { color: var(--cl-muted); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cl-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--cl-line-soft);
}
.cl-card__price { color: var(--cl-ink); display: grid; gap: 2px; }
.cl-card__price span { color: var(--cl-muted); }

/* The whole card is clickable, but only the title is a link — a stretched
   pseudo-element keeps one link in the accessibility tree instead of three. */
.cl-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }

.cl-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--cl-secondary);
  color: var(--cl-secondary-ink);
  border-radius: var(--cl-radius-sm);
}
.cl-tag--ghost { background: transparent; border: 1px solid var(--cl-line); color: var(--cl-muted); }

/* A badge sitting on the photograph. Above the image, below the stretched link. */
.cl-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  padding: 7px 13px;
  background: var(--cl-surface);
  color: var(--cl-ink);
  border-radius: var(--cl-radius-sm);
}

/* The room card leads with an arched aperture — the same window motif as the
   hero, so a card reads as a smaller view of the same building. */
.cl-card--room .cl-card__media { aspect-ratio: 5 / 6; border-radius: var(--cl-arch); }
.cl-card--room { border: 0; background: transparent; overflow: visible; }
.cl-card--room .cl-card__body { padding: 22px 2px 0; }
.cl-card--room:hover { border-color: transparent; }

/* -----------------------------------------------------------------------------
   11. Rails — horizontal scroll-snap, no carousel library
   -------------------------------------------------------------------------- */

.cl-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 30%);
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 18px;
  scrollbar-color: var(--cl-line-strong) transparent;
}
.cl-rail > * { scroll-snap-align: start; }
.cl-rail::-webkit-scrollbar { height: 3px; }
.cl-rail::-webkit-scrollbar-track { background: var(--cl-line-soft); }
.cl-rail::-webkit-scrollbar-thumb { background: var(--cl-line-strong); }

.cl-rail-nav { display: flex; align-items: center; gap: 10px; }
.cl-rail-nav button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius-pill);
  color: var(--cl-ink);
  transition: background-color var(--cl-dur-fast) var(--cl-ease),
              border-color var(--cl-dur-fast) var(--cl-ease),
              color var(--cl-dur-fast) var(--cl-ease);
}
.cl-rail-nav button:hover { background: var(--cl-primary); border-color: var(--cl-primary); color: var(--cl-primary-ink); }
.cl-rail-nav button[disabled] { opacity: .35; cursor: default; }
.cl-rail-nav button[disabled]:hover { background: transparent; border-color: var(--cl-line); color: var(--cl-ink); }
.on-inverse .cl-rail-nav button { border-color: var(--cl-line-inv); color: var(--cl-inverse-ink); }
.on-inverse .cl-rail-nav button:hover { background: var(--cl-inverse-ink); color: var(--cl-inverse-bg); }

@media (max-width: 1024px) { .cl-rail { grid-auto-columns: minmax(260px, 62%); } }
@media (max-width: 640px)  { .cl-rail { grid-auto-columns: minmax(230px, 82%); gap: 18px; } }

/* -----------------------------------------------------------------------------
   12. Amenities index — the hover-swap list

   A numbered editorial list on the left; the photograph on the right changes as
   the guest moves down it. On touch and at narrow widths the images are simply
   not shown: a swap nobody can trigger is dead weight, not a fallback.
   -------------------------------------------------------------------------- */

.cl-index-list { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.cl-index-list__rows { display: grid; }
.cl-index-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 22px;
  padding-block: 26px;
  border-top: 1px solid var(--cl-line-soft);
  color: var(--cl-ink);
  transition: color var(--cl-dur-mid) var(--cl-ease), padding-left var(--cl-dur-mid) var(--cl-ease);
}
.cl-index-row:last-child { border-bottom: 1px solid var(--cl-line-soft); }
.cl-index-row__no { color: var(--cl-accent); }
.cl-index-row__note { color: var(--cl-muted); }
.cl-index-row.is-active,
.cl-index-row:hover { padding-left: 14px; color: var(--cl-accent-ink); }

.cl-index-list__stage { position: relative; aspect-ratio: 4 / 5; }
.cl-index-list__stage figure {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--cl-dur-mid) var(--cl-ease);
  border-radius: var(--cl-arch);
  overflow: hidden;
}
.cl-index-list__stage figure.is-active { opacity: 1; }

@media (max-width: 1024px) {
  .cl-index-list { grid-template-columns: minmax(0, 1fr); }
  .cl-index-list__stage { display: none; }
  .cl-index-row.is-active, .cl-index-row:hover { padding-left: 0; }
}

/* -----------------------------------------------------------------------------
   13. Gallery mosaic + lightbox
   -------------------------------------------------------------------------- */

.cl-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
.cl-mosaic__item { position: relative; overflow: hidden; border-radius: var(--cl-radius); background: var(--cl-surface-alt); }
/* The rhythm: tall, wide, tall, square — deliberately not a regular grid. */
.cl-mosaic__item:nth-child(6n + 1) { grid-column: span 5; aspect-ratio: 4 / 5; }
.cl-mosaic__item:nth-child(6n + 2) { grid-column: span 7; aspect-ratio: 16 / 11; }
.cl-mosaic__item:nth-child(6n + 3) { grid-column: span 4; aspect-ratio: 1 / 1; }
.cl-mosaic__item:nth-child(6n + 4) { grid-column: span 4; aspect-ratio: 1 / 1; }
.cl-mosaic__item:nth-child(6n + 5) { grid-column: span 4; aspect-ratio: 1 / 1; }
.cl-mosaic__item:nth-child(6n + 6) { grid-column: span 12; aspect-ratio: 21 / 9; }
.cl-mosaic__item button { position: absolute; inset: 0; z-index: 2; cursor: zoom-in; }

@media (max-width: 1024px) {
  .cl-mosaic__item:nth-child(6n + 1) { grid-column: span 6; }
  .cl-mosaic__item:nth-child(6n + 2) { grid-column: span 6; aspect-ratio: 4 / 5; }
  .cl-mosaic__item:nth-child(6n + 3),
  .cl-mosaic__item:nth-child(6n + 4),
  .cl-mosaic__item:nth-child(6n + 5) { grid-column: span 6; }
  .cl-mosaic__item:nth-child(6n + 6) { grid-column: span 12; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .cl-mosaic { gap: 10px; }
  .cl-mosaic__item { grid-column: span 12 !important; aspect-ratio: 4 / 3 !important; }
}

.cl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: color-mix(in srgb, var(--cl-inverse-bg) 94%, transparent);
}
.cl-lightbox.is-open { display: grid; }
.cl-lightbox__img { max-width: 100%; max-height: 82vh; width: auto; object-fit: contain; }
.cl-lightbox__cap { color: var(--cl-inverse-muted); margin-top: 16px; text-align: center; }
.cl-lightbox__btn {
  position: absolute;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--cl-inverse-ink);
  border: 1px solid var(--cl-line-inv);
  border-radius: var(--cl-radius-pill);
  transition: background-color var(--cl-dur-fast) var(--cl-ease);
}
.cl-lightbox__btn:hover { background: color-mix(in srgb, var(--cl-inverse-ink) 16%, transparent); }
.cl-lightbox__close { top: 20px; right: 20px; }
.cl-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.cl-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

/* -----------------------------------------------------------------------------
   14. Quotes
   -------------------------------------------------------------------------- */

.cl-quotes { position: relative; }
.cl-quote {
  display: none;
  gap: 26px;
  justify-items: center;
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}
.cl-quote.is-active { display: grid; }
/* Without scripting every quotation is shown, stacked. Hiding them behind
   markers that cannot be clicked would bury the section's only content. */
.no-js .cl-quote { display: grid; }
.no-js .cl-dots { display: none; }
.cl-quote__body { color: var(--cl-ink); }
.on-inverse .cl-quote__body { color: var(--cl-inverse-ink); }
.cl-quote__by { color: var(--cl-muted); }
.on-inverse .cl-quote__by { color: var(--cl-inverse-muted); }
.cl-quote__stars { display: flex; gap: 6px; color: var(--cl-accent); }
.on-inverse .cl-quote__stars { color: var(--cl-inverse-accent); }

.cl-dots { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cl-dots button {
  width: 7px;
  height: 7px;
  background: var(--cl-line-strong);
  transform: rotate(45deg);
  transition: background-color var(--cl-dur-fast) var(--cl-ease), transform var(--cl-dur-fast) var(--cl-ease);
}
.cl-dots button[aria-current="true"] { background: var(--cl-accent); transform: rotate(45deg) scale(1.5); }

/* -----------------------------------------------------------------------------
   15. The constellation — figures as an asterism

   Four numbers drawn as nodes on a chart: a hairline runs behind them and each
   figure sits above a small rotated square on that line. The line is drawn with
   a pseudo-element on the list rather than borders on the items, so it passes
   BEHIND the nodes and stops at the first and last, the way a real asterism is
   drawn between stars and not past them.
   -------------------------------------------------------------------------- */

.cl-constellation {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.cl-constellation::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 7px;
  height: 1px;
  background: var(--cl-line-inv);
}
.cl-node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding-top: 22px;
}
.cl-node__mark {
  position: absolute;
  top: 4px;
  width: 7px;
  height: 7px;
  background: var(--cl-inverse-accent);
  transform: rotate(45deg);
}
.cl-node__n { color: var(--cl-inverse-ink); }
.cl-node__k { color: var(--cl-inverse-muted); }

@media (max-width: 1024px) {
  .cl-constellation { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .cl-constellation::before { display: none; }
}
@media (max-width: 480px) {
  .cl-constellation { grid-template-columns: minmax(0, 1fr); }
}

/* -----------------------------------------------------------------------------
   16. Accordion
   -------------------------------------------------------------------------- */

.cl-acc { display: grid; }
.cl-acc__item { border-top: 1px solid var(--cl-line-soft); }
.cl-acc__item:last-child { border-bottom: 1px solid var(--cl-line-soft); }
.cl-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  text-align: left;
  color: var(--cl-ink);
  transition: color var(--cl-dur-fast) var(--cl-ease);
}
.cl-acc__btn:hover { color: var(--cl-accent-ink); }
.cl-acc__sign { position: relative; width: 14px; height: 14px; flex: none; color: var(--cl-accent); }
.cl-acc__sign::before,
.cl-acc__sign::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--cl-dur-mid) var(--cl-ease);
}
.cl-acc__sign::after { transform: rotate(90deg); }
.cl-acc__btn[aria-expanded="true"] .cl-acc__sign::after { transform: rotate(0deg); }
/* Height animation without JS measuring, and correct when the panel is hidden. */
.cl-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cl-dur-mid) var(--cl-ease); }
.cl-acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.cl-acc__panel > div { overflow: hidden; }
.cl-acc__panel p { color: var(--cl-muted); padding-bottom: 24px; }

/* -----------------------------------------------------------------------------
   17. Location + contact
   -------------------------------------------------------------------------- */

.cl-contact { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); }
.cl-contact__list { display: grid; gap: 26px; }
.cl-contact__row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.cl-contact__row .cl-icon { color: var(--cl-accent); margin-top: 3px; }
.cl-contact__k { color: var(--cl-muted); }
.cl-contact__v { color: var(--cl-ink); }
.cl-contact__v a:hover { color: var(--cl-accent-ink); }

@media (max-width: 1024px) { .cl-contact { grid-template-columns: minmax(0, 1fr); } }

/* -----------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */

.cl-field { display: grid; gap: 7px; }
.cl-field label { color: var(--cl-muted); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="date"], input[type="password"],
select, textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--cl-surface);
  color: var(--cl-ink);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  transition: border-color var(--cl-dur-fast) var(--cl-ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--cl-accent); outline-offset: 1px; }
textarea { min-height: 150px; resize: vertical; }
::placeholder { color: var(--cl-muted); opacity: .8; }

/* Contact Form 7 and coco-form-lite generate their own markup and cannot take
   utility classes, so their type is set here — one of the two documented
   exceptions to the no-font-in-theme.css rule. */
.wpcf7-form label,
.coco-form label { display: grid; gap: 7px; color: var(--cl-muted); font-size: 13px; }
.wpcf7-form .wpcf7-submit,
.coco-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  background: var(--cl-btn);
  color: var(--cl-btn-ink);
  border: 0;
  border-radius: var(--cl-radius);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wpcf7-form .wpcf7-submit:hover,
.coco-form button[type="submit"]:hover { background: var(--cl-btn-hover); }
.wpcf7-not-valid-tip { color: var(--cl-accent-ink); }
.wpcf7-response-output { border: 1px solid var(--cl-line) !important; padding: 14px 18px !important; margin: 18px 0 0 !important; }

/* -----------------------------------------------------------------------------
   19. Prose — the single/page content stream
   -------------------------------------------------------------------------- */

.cl-prose { color: var(--cl-ink); }
.cl-prose > * + * { margin-top: 1.4em; }
.cl-prose p { color: var(--cl-muted); }
.cl-prose h2, .cl-prose h3, .cl-prose h4 { color: var(--cl-ink); font-family: var(--cl-display); }
.cl-prose h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 300; line-height: 1.2; margin-top: 1.8em; }
.cl-prose h3 { font-size: clamp(21px, 2.2vw, 28px); font-weight: 400; line-height: 1.3; margin-top: 1.6em; }
.cl-prose h4 { font-size: 20px; font-weight: 500; line-height: 1.4; }
.cl-prose a { color: var(--cl-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cl-prose a:hover { color: var(--cl-link-hover); }
.cl-prose ul, .cl-prose ol { display: grid; gap: 9px; padding-left: 20px; color: var(--cl-muted); }
.cl-prose ul li { list-style: disc; }
.cl-prose ol li { list-style: decimal; }
.cl-prose li::marker { color: var(--cl-accent); }
.cl-prose blockquote {
  padding: 4px 0 4px 28px;
  border-left: 1px solid var(--cl-accent);
  color: var(--cl-ink);
  font-family: var(--cl-display);
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 300;
  line-height: 1.42;
  font-style: italic;
}
.cl-prose img, .cl-prose figure { border-radius: var(--cl-radius); }
.cl-prose figcaption { color: var(--cl-muted); font-size: 13px; margin-top: 10px; }
.cl-prose code { background: var(--cl-surface-alt); padding: 2px 6px; border-radius: var(--cl-radius-sm); font-size: .9em; }
.cl-prose pre { background: var(--cl-surface-alt); padding: 20px; border-radius: var(--cl-radius); overflow-x: auto; }
.cl-prose table { border: 1px solid var(--cl-line); }
.cl-prose th, .cl-prose td { border: 1px solid var(--cl-line); padding: 11px 14px; text-align: left; }
.cl-prose th { background: var(--cl-surface-alt); }
.cl-prose hr { margin-block: 2.4em; }

/* Wide/full alignments inside a contained prose column. */
.cl-prose .alignwide { width: min(1100px, 92vw); margin-inline: calc(50% - min(550px, 46vw)); }
.cl-prose .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; }
.cl-prose .alignleft { float: left; margin: 0 1.6em 1.2em 0; max-width: 46%; }
.cl-prose .alignright { float: right; margin: 0 0 1.2em 1.6em; max-width: 46%; }
.cl-prose .aligncenter { margin-inline: auto; }

@media (max-width: 640px) {
  .cl-prose .alignleft, .cl-prose .alignright { float: none; margin: 0; max-width: 100%; }
}

/* -----------------------------------------------------------------------------
   20. Archive chrome
   -------------------------------------------------------------------------- */

.cl-pagehead { display: grid; gap: 20px; padding-top: calc(var(--cl-header-h) * .5); }
.cl-crumbs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--cl-muted); }
.cl-crumbs a:hover { color: var(--cl-accent-ink); }

.cl-pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cl-pager .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  color: var(--cl-ink);
  transition: background-color var(--cl-dur-fast) var(--cl-ease), border-color var(--cl-dur-fast) var(--cl-ease), color var(--cl-dur-fast) var(--cl-ease);
}
.cl-pager .page-numbers:hover { border-color: var(--cl-ink); }
.cl-pager .page-numbers.current { background: var(--cl-primary); border-color: var(--cl-primary); color: var(--cl-primary-ink); }

.cl-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-filters a {
  padding: 9px 18px;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius-pill);
  color: var(--cl-muted);
  transition: border-color var(--cl-dur-fast) var(--cl-ease), color var(--cl-dur-fast) var(--cl-ease);
}
.cl-filters a:hover { border-color: var(--cl-ink); color: var(--cl-ink); }
.cl-filters a[aria-current] { background: var(--cl-primary); border-color: var(--cl-primary); color: var(--cl-primary-ink); }

/* -----------------------------------------------------------------------------
   21. Room single
   -------------------------------------------------------------------------- */

.cl-room { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.cl-room__aside { position: sticky; top: calc(var(--cl-header-h) + 24px); display: grid; gap: 22px; padding: 30px; background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: var(--cl-radius); }
.cl-room__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--cl-line-soft); border: 1px solid var(--cl-line-soft); }
.cl-fact { display: grid; gap: 6px; padding: 20px; background: var(--cl-bg); }
.cl-fact__k { color: var(--cl-muted); }
.cl-fact__v { color: var(--cl-ink); }

@media (max-width: 1024px) {
  .cl-room { grid-template-columns: minmax(0, 1fr); }
  .cl-room__aside { position: static; }
}

/* -----------------------------------------------------------------------------
   21b. Reserve — the full-bleed call to action
   -------------------------------------------------------------------------- */

.cl-reserve { position: relative; overflow: hidden; }
.cl-reserve__media { position: absolute; inset: 0; z-index: 0; background: var(--cl-inverse-bg); }
.cl-reserve__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--cl-scrim);
}
.cl-reserve__inner { position: relative; z-index: 2; }

/* -----------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--cl-inverse-bg); color: var(--cl-inverse-ink); }
.cl-footer__top { display: grid; grid-template-columns: 4fr 2fr 2fr 4fr; gap: clamp(28px, 4vw, 64px); }
.cl-footer__col { display: grid; align-content: start; gap: 14px; }
.cl-footer__col a { color: var(--cl-inverse-muted); transition: color var(--cl-dur-fast) var(--cl-ease); }
.cl-footer__col a:hover { color: var(--cl-inverse-ink); }
.cl-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
  margin-top: 56px;
  border-top: 1px solid var(--cl-line-inv);
  color: var(--cl-inverse-muted);
}
.cl-social { display: flex; align-items: center; gap: 12px; }
.cl-social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cl-line-inv);
  border-radius: var(--cl-radius-pill);
  transition: background-color var(--cl-dur-fast) var(--cl-ease), color var(--cl-dur-fast) var(--cl-ease);
}
.cl-social a:hover { background: var(--cl-inverse-ink); color: var(--cl-inverse-bg); }

@media (max-width: 1024px) { .cl-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cl-footer__top { grid-template-columns: minmax(0, 1fr); } }

/* -----------------------------------------------------------------------------
   23. Comments
   -------------------------------------------------------------------------- */

.cl-comments { display: grid; gap: 28px; }
.cl-comment { display: grid; gap: 10px; padding-bottom: 24px; border-bottom: 1px solid var(--cl-line-soft); }
.cl-comment .children { display: grid; gap: 24px; margin-top: 24px; padding-left: 28px; border-left: 1px solid var(--cl-line-soft); }
.cl-comment__meta { color: var(--cl-muted); }

/* -----------------------------------------------------------------------------
   24. Motion

   Reveals are attached ONLY to the sections where movement carries meaning —
   an aperture opening, a rule being drawn, a list arriving in sequence. There
   is deliberately no universal [data-reveal] in this theme: applied to
   everything, motion stops meaning anything and starts reading as a plugin.
   (DESIGN.md §4.2 — locked.)
   -------------------------------------------------------------------------- */

/* (a) The aperture opens: the arch grows from the sill as the section arrives. */
[data-reveal="aperture"] .cl-aperture,
[data-reveal="aperture"].cl-aperture {
  clip-path: inset(14% 6% 0 6%);
  transition: clip-path 1.15s var(--cl-ease);
}
[data-reveal="aperture"].is-in .cl-aperture,
[data-reveal="aperture"].is-in.cl-aperture { clip-path: inset(0 0 0 0); }

/* (b) The meridian is drawn from its node outward. */
[data-reveal="rule"] .cl-meridian::before,
[data-reveal="rule"] .cl-meridian::after {
  transform: scaleX(0);
  transition: transform .9s var(--cl-ease);
}
[data-reveal="rule"] .cl-meridian::before { transform-origin: right; }
[data-reveal="rule"] .cl-meridian::after  { transform-origin: left; }
[data-reveal="rule"].is-in .cl-meridian::before,
[data-reveal="rule"].is-in .cl-meridian::after { transform: scaleX(1); }

/* (c) Rows arrive in sequence — used by the rooms index, the hours of light and
       the facets, where the ORDER of the items is itself the content. The target
       is an explicit `.cl-seq` container rather than a structural selector, so
       adding a wrapper div to a section can never silently kill its reveal. */
[data-reveal="sequence"] .cl-seq > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--cl-ease), transform .7s var(--cl-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal="sequence"].is-in .cl-seq > * { opacity: 1; transform: none; }

/* (d) A statement rises once. The most restrained of the four, for the places
       where the words are the whole section. */
[data-reveal="rise"] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s var(--cl-ease), transform .85s var(--cl-ease);
}
[data-reveal="rise"].is-in { opacity: 1; transform: none; }

/* Nothing may stay invisible if the observer never runs (no JS, an old engine, a
   crawler). Every reveal degrades to its finished state — including the two that
   animate a pseudo-element, which a transform reset alone would leave collapsed. */
.no-js [data-reveal],
.no-js [data-reveal] .cl-seq > *,
.no-js [data-reveal] .cl-aperture {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
.no-js [data-reveal] .cl-meridian::before,
.no-js [data-reveal] .cl-meridian::after { transform: scaleX(1) !important; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal] .cl-seq > *,
  [data-reveal] .cl-aperture {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  [data-reveal] .cl-meridian::before,
  [data-reveal] .cl-meridian::after { transform: scaleX(1) !important; }
}