:root {
  color-scheme: light;
  --paper: #f7f2eb;
  --paper-deep: #eee5da;
  --ink: #201a16;
  --ink-soft: #554b44;
  /* UX-001 light mode: #786d65 was 3.54-4.40:1 in muted contexts. This darker
   * light-theme role clears AA on the audited light surfaces; dark overrides below are unchanged. */
  --muted: #6e645d;
  --line: #ded3c6;
  --cream: #fffdf9;
  --cream-rgb: 255, 253, 249; /* TECH-027 Stage 1 (new) — RGB triplet of --cream, exactly equal to
    the 11 literal `rgba(255, 253, 249, X)` card-surface fills scattered across this file
    (.stay-card, .availability-card, .availability-calendar, .amenity-details details,
    .stay-note, .gallery-more, .booking-strip-ish shelf, .qlo-search-shelf, .v4-collection
    .view-button, etc. — see Stage 1 diff notes below). Each of those literal declarations is
    rewritten to `rgba(var(--cream-rgb), X)`, preserving its own alpha exactly, so the dark
    block below can flip the RGB triplet without touching 11 separate alpha values. */
  /* UX-001: semantic component surfaces preserve the shipped light palette exactly while
   * allowing dark mode to choose a real dark surface. These are surfaces, never text roles. */
  --surface-guest-rail: rgba(238, 229, 218, 0.56);
  --surface-warm-panel: rgba(238, 229, 218, 0.44);
  --surface-gallery-control: rgba(250, 247, 242, 0.94);
  --surface-gallery-control-hover: #fff;
  --copper: #9f572d;
  --copper-text: #95502a;
  --copper-dark: #7e3e1d;
  --sage: #667260;
  --sage-pale: #e5e9df;
  --charcoal: #29231f;
  --on-accent: #ffffff; /* TECH-027 Stage 1 (new) — text color for solid CTA fills that use
    --copper / --copper-dark / --ink as background (.button-primary, .qlo-nav-action,
    .qlo-search-button, .v4-collection .book-button, .v4-collection .view-button:hover,
    .calendar-day.is-checkin/.is-checkout). Light default is #ffffff, identical to every
    hardcoded `color: #fff` it replaces, so light mode is byte-for-byte unchanged. Same
    fix pattern as the already-shipped --icwftr-on-accent (see the footer dark block below);
    this generalizes it past the footer, because those same backgrounds turn into light
    pastel fills in dark mode (see AUDIT/contrast evidence — white text on them measures as
    low as 1.15:1 unfixed). */
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --shadow-soft: 0 18px 50px rgba(47, 34, 24, 0.09);
  --shadow-lift: 0 26px 70px rgba(47, 34, 24, 0.15);
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --max: 1240px;
}

/* ============================================================
 * TECH-027 Stage 1 — sitewide dark theme (styles.css only).
 * Redefines the sitewide token layer above under html[data-icw-theme="dark"].
 * Because every one of these tokens is already consumed by ~169 existing
 * declarations via var(--token), this one block re-themes the vast majority
 * of the page (header, body, footer band aside, cards once fixed below,
 * buttons, links, calendar day-cell base state) without touching those
 * selectors. See staging/tech027-darkmode-stage1-v1/ACCEPTANCE-RESULTS.md
 * and CHANGES.md for full contrast numbers and rationale.
 *
 * --charcoal is deliberately OMITTED here (see note below) — it stays at
 * its :root value in both themes.
 * ============================================================ */
html[data-icw-theme="dark"] {
  color-scheme: dark;
  --paper: #171614;
  --paper-deep: #201e1b;
  --ink: #f2efe9;
  --ink-soft: #b6a091; /* verified 7.26:1 vs --paper, 6.67:1 vs --paper-deep */
  --muted: #a9a49c; /* verified 7.30:1 vs --paper, 6.71:1 vs --paper-deep (reuses shipped --icwftr-muted dark) */
  --line: #3a3936; /* flattened equivalent of shipped --icwftr-line dark (rgba(242,239,233,.16) over #171614) */
  --cream: #201e1b; /* reuse --paper-deep — cream plays a "raised surface" role, not a text role */
  --cream-rgb: 32, 30, 27; /* == #201e1b, matches --cream above */
  /* UX-001: exact --paper is intentional. Against it, the existing shared dark text tokens
   * clear AAA without any text-token change: --muted 7.30:1, --ink-soft 7.26:1,
   * and --ink 15.76:1. --paper-deep would lower the first two to AA only. */
  --surface-guest-rail: var(--paper);
  --surface-warm-panel: var(--paper);
  --surface-gallery-control: var(--paper);
  --surface-gallery-control-hover: var(--paper);
  --copper: #dcb49d; /* verified 9.52:1 vs --paper, 8.76:1 vs --paper-deep */
  --copper-text: var(--copper);
  --copper-dark: #d49574; /* verified 7.19:1 vs --paper */
  --sage: #bbccb3; /* verified 10.68:1 vs --paper, 9.82:1 vs --paper-deep */
  --sage-pale: #2a2f26; /* dark surface wash, not a text role */
  --on-accent: #171614; /* == --paper dark, same near-black already used by the shipped
    --icwftr-on-accent dark value, kept consistent with it */

  /* --charcoal is NOT redefined here. Verified by direct grep: all 4 of its uses in this
   * file (.skip-link, .button-dark, .preview-bar, .editorial-band) pair it with a *fixed*
   * light literal text color (#fff / #f9f5ef / #f7f2eb) — i.e. every existing consumer
   * already assumes --charcoal stays a dark "always-dark decorative band" background, the
   * same pattern as .site-footer's own hardcoded-dark #1b1714 (which is not a token at all
   * and is correctly untouched by this stage). Redefining --charcoal to a light dark-mode
   * value (as a literal token-symmetry pass would suggest) breaks all 4 consumers, including
   * an accessibility feature (.skip-link): measured white-on-#a9907e = 3.01:1 (fails 4.5:1),
   * and the editorial band's own #f7f2eb-on-#a9907e = 2.70:1 (fails badly). Leaving
   * --charcoal unset here means it inherits the :root value in dark mode too, so these four
   * components keep rendering exactly as they do today (which was already accessible:
   * white-on-#29231f = 15.50:1) in both themes. This is a deliberate, measured deviation
   * from a literal "redefine every root token" pass — see CHANGES.md. */
}

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

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 3%, rgba(174, 122, 83, 0.09), transparent 26rem),
    radial-gradient(circle at 95% 34%, rgba(103, 114, 96, 0.08), transparent 28rem),
    var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  background: var(--paper-deep);
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

/* Native dropdown popups: without an explicit option surface, Chrome on
   Windows paints the list on the UA panel (white) while the options inherit
   the theme text colour - cream-on-white, unreadable in dark mode. */
select option {
  color: var(--ink);
  background-color: var(--paper);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(159, 87, 45, 0.48);
  outline-offset: 4px;
}

html[data-icw-theme="dark"] :focus-visible {
  outline-color: rgba(220, 180, 157, 0.7); /* TECH-027 Stage 1 — sitewide focus-ring fix.
    Unchanged, this literal flattens to ~1.67:1 against the new dark --paper (fails the
    WCAG 1.4.11 3:1 non-text threshold) — a real dark-mode-introduced regression, since
    this rule is the baseline outline for every Tab-focusable element on the page (gate 6,
    ACCEPTANCE.md). Dark --copper rgb at a higher alpha flattens to ~5.3:1. See CHANGES.md. */
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 10px 14px;
  clip-path: inset(50%);
  color: #fff;
  background: var(--charcoal);
  border-radius: 8px;
  white-space: nowrap;
}

.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

.preview-bar {
  padding: 8px 20px;
  color: #f9f5ef;
  background: var(--charcoal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(222, 211, 198, 0.82);
  background: rgba(247, 242, 235, 0.92);
  backdrop-filter: blur(14px);
}

.header-inner {
  width: min(calc(100% - 40px), var(--max));
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}

.wordmark-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
}

.wordmark-copy {
  display: grid;
  line-height: 1;
}

.wordmark-name {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.wordmark-place {
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-nav > a:not(.button) {
  position: relative;
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.site-nav > a:not(.button)::after {
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.site-nav > a:not(.button):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--on-accent); /* TECH-027 Stage 1: was literal #fff; --copper turns light in dark
    mode, so a hardcoded white would drop to ~1.9:1 (fails) — see CHANGES.md */
  background: var(--copper);
  box-shadow: 0 10px 24px rgba(126, 62, 29, 0.18);
}

.button-primary:hover {
  background: var(--copper-dark);
  box-shadow: 0 14px 30px rgba(126, 62, 29, 0.24);
}

.button-dark {
  color: #fff;
  background: var(--charcoal);
}

.button-dark:hover {
  background: #100d0b;
}

.button-ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
}

.button-ghost:hover {
  border-color: var(--copper);
  background: rgba(255, 255, 255, 0.58);
}

.button-arrow::after {
  content: "↗";
  font-size: 1rem;
}

.section-shell {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--copper-text);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 28px;
  height: 1px;
  content: "";
  background: currentColor;
}

.display-title,
.section-title,
.card-title,
.detail-title,
.availability-title,
.footer-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.display-title {
  max-width: 800px;
  font-size: clamp(3.1rem, 6.4vw, 6.8rem);
}

.display-title em {
  color: var(--copper);
  font-weight: 400;
}

.hero {
  padding: 82px 0 48px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(270px, 0.55fr);
  align-items: end;
  gap: 7vw;
}

.hero-copy {
  max-width: 570px;
  margin: 0 0 6px auto;
  color: var(--ink-soft);
  font-size: clamp(1.03rem, 1.4vw, 1.2rem);
}

.hero-copy p {
  margin: 0;
}

.hero-proof {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 11px 22px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-proof span::before {
  width: 6px;
  height: 6px;
  content: "";
  background: var(--sage);
  border-radius: 50%;
}

.availability-strip {
  margin-top: 42px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(var(--cream-rgb), 0.92); /* TECH-027 Stage 1: was literal rgba(255, 253, 249, 0.92) - see CHANGES.md */
  box-shadow: var(--shadow-soft);
}

.availability-cell {
  min-height: 78px;
  padding: 17px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line);
}

.availability-cell small {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.availability-cell strong {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
}

.availability-strip .button {
  min-width: 205px;
  margin: 13px;
  border-radius: 11px;
}

.collection {
  padding: 66px 0 104px;
}

.section-heading {
  margin-bottom: 35px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}

.section-title {
  max-width: 700px;
  font-size: clamp(2.45rem, 4.6vw, 4.8rem);
}

.section-note {
  max-width: 320px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.88rem;
}

.stay-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.stay-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(var(--cream-rgb), 0.8); /* TECH-027 Stage 1: was literal rgba(255, 253, 249, 0.8) - see CHANGES.md */
  box-shadow: var(--shadow-soft);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.stay-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.stay-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--paper-deep);
}

.stay-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.stay-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.stay-card:hover .stay-media img {
  transform: scale(1.035);
}

.stay-gallery-mark {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(28, 23, 19, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 16px rgba(11, 12, 16, 0.18);
}

.stay-gallery-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stay-body {
  padding: 25px 27px 27px;
}

.stay-kicker {
  margin: 0 0 8px;
  color: var(--copper);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card-title {
  font-size: clamp(1.75rem, 2.7vw, 2.65rem);
}

.stay-facts {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 15px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.stay-facts span + span::before {
  margin-right: 15px;
  content: "·";
  color: var(--copper);
}

.stay-summary {
  min-height: calc(1.62em * 2);
  margin: 15px 0 20px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.62;
}

.guest-rail {
  position: relative;
  min-height: 124px;
  margin: 0 0 20px;
  padding: 16px 17px 14px;
  overflow: hidden;
  border-left: 2px solid var(--copper);
  background: var(--surface-guest-rail);
}

.guest-rail-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.guest-rail-label::after {
  flex: 1;
  height: 1px;
  content: "";
  background: var(--line);
}

.guest-quotes {
  position: relative;
  min-height: 60px;
  margin: 10px 56px 0 0;
  padding: 0;
  list-style: none;
}

.guest-quote {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition:
    opacity 280ms ease,
    transform 280ms ease,
    visibility 280ms ease;
}

.guest-quote.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.guest-quote blockquote {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 0.93rem;
  font-style: italic;
  line-height: 1.38;
}

.guest-quote cite {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.59rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.guest-rail-controls {
  position: absolute;
  right: 11px;
  bottom: 12px;
  display: flex;
  gap: 5px;
}

.guest-rail-controls button {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.7rem;
  transition:
    color 160ms ease,
    border-color 160ms ease;
}

.guest-rail-controls button:hover {
  color: var(--copper);
  border-color: var(--copper);
}

.guest-rail--wide {
  min-height: 176px;
  padding: 26px 28px 22px;
  border-left-width: 3px;
}

.guest-rail--wide .guest-quotes {
  min-height: 90px;
  margin-top: 16px;
  margin-right: 80px;
}

.guest-rail--wide .guest-quote blockquote {
  max-width: 690px;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.35;
}

.stay-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 19px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.text-link::after {
  content: "→";
  color: var(--copper);
  transition: transform 180ms ease;
}

.text-link:hover::after {
  transform: translateX(4px);
}

.card-availability {
  color: var(--sage);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-availability::before {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  display: inline-block;
  content: "";
  background: var(--sage);
  border-radius: 50%;
}

.editorial-band {
  padding: 90px 0;
  color: #f7f2eb;
  background: var(--charcoal);
}

.editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 9vw;
}

.editorial-band .eyebrow {
  color: #d08a5c;
}

.editorial-band .section-title {
  max-width: 560px;
}

.editorial-copy {
  color: #d9cfc6;
}

.editorial-copy > p {
  max-width: 560px;
  margin: 0 0 27px;
  font-size: 1.04rem;
}

.editorial-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.editorial-point {
  padding: 21px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.editorial-point strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-family: var(--serif);
  font-size: 1.25rem;
}

.editorial-point span {
  color: #bdb2aa;
  font-size: 0.79rem;
}

.detail-hero {
  padding: 34px 0 0;
}

.breadcrumb {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--copper);
}

.gallery-mosaic {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr 0.65fr;
  grid-template-rows: repeat(2, minmax(190px, 245px));
  gap: 10px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-deep);
  box-shadow: var(--shadow-soft);
}

.gallery-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  background: var(--paper-deep);
}

.gallery-tile:first-child {
  grid-row: 1 / 3;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 450ms ease,
    filter 220ms ease;
}

.gallery-tile:hover img {
  transform: scale(1.025);
  filter: brightness(0.92);
}

.gallery-more {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 9px 13px;
  color: var(--ink);
  background: rgba(var(--cream-rgb), 0.92); /* TECH-027 Stage 1: was literal rgba(255, 253, 249, 0.92) - see CHANGES.md */
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.detail-heading {
  padding: 48px 0 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  border-bottom: 1px solid var(--line);
}

.detail-title {
  max-width: 820px;
  font-size: clamp(3.15rem, 6vw, 6.2rem);
}

.detail-subtitle {
  max-width: 650px;
  margin: 17px 0 0;
  color: var(--ink-soft);
  font-size: 1.06rem;
}

.rating-pill {
  align-self: center;
  min-width: 120px;
  padding: 13px 17px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink-soft);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.rating-pill strong {
  margin-right: 4px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.12rem;
}

.detail-facts {
  padding: 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.fact-pill {
  min-height: 41px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--cream-rgb), 0.62); /* TECH-027 Stage 1: was literal rgba(255, 253, 249, 0.62) - see CHANGES.md */
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
}

.fact-pill b {
  color: var(--ink);
}

.detail-layout {
  padding: 62px 0 110px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 380px);
  align-items: start;
  gap: 8vw;
}

.detail-main {
  min-width: 0;
}

.lede {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(1.42rem, 2.25vw, 2.05rem);
  line-height: 1.42;
}

.detail-section {
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}

.detail-section:last-child {
  border-bottom: 0;
}

.detail-section h2 {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.detail-section > p {
  max-width: 720px;
  margin: 0;
  color: var(--ink-soft);
}

.top-amenities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.amenity {
  min-height: 72px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(var(--cream-rgb), 0.63); /* TECH-027 Stage 1: was literal rgba(255, 253, 249, 0.63) - see CHANGES.md */
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

.amenity-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  color: var(--copper);
  background: #f1e2d7;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.05rem;
}

.amenity-details {
  display: grid;
  gap: 10px;
}

.amenity-details details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(var(--cream-rgb), 0.54); /* TECH-027 Stage 1: was literal rgba(255, 253, 249, 0.54) - see CHANGES.md */
}

.amenity-details summary {
  min-height: 58px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
}

.amenity-details summary::-webkit-details-marker {
  display: none;
}

.amenity-details summary::after {
  content: "+";
  color: var(--copper);
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 500;
}

.amenity-details details[open] summary::after {
  content: "–";
}

.amenity-details ul {
  margin: 0;
  padding: 0 18px 19px 43px;
  columns: 2;
  column-gap: 30px;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.amenity-details li {
  margin-bottom: 8px;
  break-inside: avoid;
}

.stay-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stay-note {
  padding: 20px;
  border-top: 2px solid var(--copper);
  background: rgba(var(--cream-rgb), 0.54); /* TECH-027 Stage 1: was literal rgba(255, 253, 249, 0.54) - see CHANGES.md */
}

.stay-note strong {
  display: block;
  margin-bottom: 7px;
  font-family: var(--serif);
  font-size: 1.12rem;
}

.stay-note span {
  color: var(--muted);
  font-size: 0.79rem;
}

.availability-card {
  position: sticky;
  top: 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(var(--cream-rgb), 0.94); /* TECH-027 Stage 1: was literal rgba(255, 253, 249, 0.94) - see CHANGES.md */
  box-shadow: var(--shadow-lift);
}

.availability-title {
  margin-bottom: 10px;
  font-size: 2.2rem;
}

.availability-intro {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.82rem;
}

.booking-grid {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.booking-field {
  min-height: 63px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.booking-field:first-child {
  border-right: 1px solid var(--line);
}

.booking-field:last-child {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
}

.booking-field small {
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.booking-field strong {
  margin-top: 2px;
  font-size: 0.81rem;
}

.availability-card .button {
  width: 100%;
}

.booking-reassurance {
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 0.69rem;
  text-align: center;
}

.aside-points {
  margin: 22px 0 0;
  padding: 20px 0 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.aside-points span {
  display: flex;
  gap: 9px;
}

.aside-points span::before {
  content: "✓";
  color: var(--sage);
  font-weight: 900;
}

.inline-gallery {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 12px;
}

.inline-gallery img {
  width: 100%;
  height: 310px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.inline-gallery img:first-child {
  grid-row: span 2;
  height: 632px;
}

.final-cta {
  padding: 90px 0;
  background: var(--sage-pale);
}

.final-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 50px;
}

.final-cta .section-title {
  max-width: 760px;
}

.site-footer {
  padding: 62px 0 28px;
  color: #ded4cb;
  background: #1b1714;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 0.7fr;
  gap: 60px;
}

.footer-title {
  max-width: 470px;
  color: #fff;
  font-size: 2.1rem;
  line-height: 1.05;
}

.footer-copy {
  max-width: 450px;
  margin: 18px 0 0;
  color: #a99e96;
  font-size: 0.82rem;
}

.footer-column strong {
  display: block;
  margin-bottom: 14px;
  color: #fff;
  font-size: 0.69rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-column a {
  display: block;
  width: fit-content;
  margin: 8px 0;
  color: #bfb4ac;
  font-size: 0.8rem;
  text-decoration: none;
}

.footer-column a:hover {
  color: #fff;
}

.footer-bottom {
  margin-top: 50px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #8f847c;
  font-size: 0.68rem;
}

/* The optional last note inside .footer-bottom: the events data attribution
   and the guides amenity note. Both used to be page-local markup with their
   own treatment; the shared footer (v3/includes/site-chrome.php) emits one
   element for both. The values match the events rule that already styled
   .events-attribution, so /events/ is unchanged. */
.footer-bottom .footer-attribution {
  max-width: 880px;
  margin: 8px 0 0;
}

.lightbox {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: none;
  place-items: center;
  padding: 40px;
  color: #fff;
  background: rgba(16, 13, 11, 0.94);
}

.lightbox[aria-hidden="false"] {
  display: grid;
}

.lightbox img {
  max-width: min(1180px, 92vw);
  max-height: 82vh;
  object-fit: contain;
  background: transparent;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
}

.lightbox-close {
  position: absolute;
  top: 22px;
  right: 25px;
  width: 46px;
  height: 46px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
}

.lightbox-caption {
  margin: 13px 0 0;
  color: #d4cac2;
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 980px) {
  .site-nav > a:not(.button) {
    display: none;
  }

  .hero-grid,
  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-copy {
    margin: 0;
  }

  .availability-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .availability-strip .button {
    grid-column: 1 / -1;
  }

  .detail-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .availability-card {
    position: static;
    max-width: 560px;
    order: -1;
  }

  .gallery-mosaic {
    grid-template-rows: repeat(2, minmax(160px, 220px));
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-intro {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .preview-bar {
    padding-inline: 12px;
    font-size: 0.61rem;
    letter-spacing: 0.09em;
  }

  .header-inner,
  .section-shell {
    width: min(calc(100% - 28px), var(--max));
  }

  .header-inner {
    min-height: 72px;
  }

  .site-nav .button {
    min-height: 42px;
    padding-inline: 15px;
    font-size: 0.66rem;
  }

  .wordmark-place {
    display: none;
  }

  .hero {
    padding: 57px 0 34px;
  }

  .display-title {
    font-size: clamp(3.2rem, 17vw, 5.2rem);
  }

  .availability-strip {
    grid-template-columns: 1fr 1fr;
    border-radius: 14px;
  }

  .availability-cell {
    min-height: 68px;
    padding: 13px 15px;
  }

  .availability-cell:first-child {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line);
  }

  .availability-cell:nth-child(2) {
    border-bottom: 0;
  }

  .availability-cell:nth-child(3) {
    border-right: 0;
  }

  .availability-strip .button {
    min-width: 0;
  }

  .collection {
    padding: 45px 0 74px;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 15px;
  }

  .stay-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .stay-body {
    padding: 17px;
  }

  .stay-media {
    aspect-ratio: 16 / 8.8;
  }

  .card-title {
    font-size: 1.8rem;
  }

  .stay-facts {
    margin-top: 9px;
    gap: 5px 11px;
    font-size: 0.68rem;
  }

  .stay-facts span + span::before {
    margin-right: 11px;
  }

  .stay-summary {
    min-height: 0;
    margin: 10px 0 13px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .stay-card .guest-rail {
    min-height: 113px;
    margin-bottom: 13px;
    padding: 12px 13px 10px;
  }

  .stay-card .guest-quotes {
    min-height: 54px;
    margin: 7px 50px 0 0;
  }

  .stay-card .guest-quote blockquote {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.95rem;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .stay-card .guest-quote cite {
    font-size: 0.62rem;
  }

  .stay-card .guest-rail-controls {
    right: 9px;
    bottom: 10px;
  }

  .stay-card .guest-rail-controls button {
    width: 25px;
    height: 25px;
  }

  .stay-actions {
    padding-top: 14px;
  }

  .editorial-band {
    padding: 70px 0;
  }

  .editorial-points {
    grid-template-columns: 1fr;
  }

  .gallery-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 330px 150px;
    border-radius: 22px;
  }

  .gallery-tile:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .gallery-tile:nth-child(n + 4) {
    display: none;
  }

  .detail-heading {
    padding: 36px 0 28px;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
  }

  .detail-title {
    font-size: clamp(3.35rem, 15vw, 5.1rem);
  }

  .rating-pill {
    width: fit-content;
  }

  .detail-facts {
    padding: 18px 0;
  }

  .detail-layout {
    padding: 38px 0 78px;
  }

  .detail-section {
    padding: 38px 0;
  }

  .top-amenities {
    grid-template-columns: 1fr;
  }

  .amenity-details ul {
    columns: 1;
  }

  .stay-notes {
    grid-template-columns: 1fr;
  }

  .inline-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .inline-gallery img,
  .inline-gallery img:first-child {
    height: 220px;
    grid-row: auto;
  }

  .inline-gallery img:first-child {
    grid-column: 1 / -1;
    height: 330px;
  }

  .final-cta {
    padding: 70px 0;
  }

  .final-cta-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .final-cta .button {
    width: fit-content;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-intro {
    grid-column: auto;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 420px) {
  .wordmark-name {
    font-size: 0.93rem;
  }

  .wordmark-mark {
    width: 31px;
    height: 31px;
  }

  .site-nav .button {
    padding-inline: 12px;
  }

  .stay-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .guest-rail--wide {
    min-height: 168px;
  }

  .guest-rail--wide .guest-quotes {
    margin-right: 0;
  }

  .guest-rail--wide .guest-rail-controls {
    position: static;
    margin-top: 9px;
    justify-content: flex-end;
  }

  .gallery-mosaic {
    grid-template-rows: 265px 125px;
  }

  .booking-grid {
    grid-template-columns: 1fr;
  }

  .booking-field:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .booking-field:last-child {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/*
 * Hybrid V4 — Qlo header hierarchy + ICW compact magazine rows.
 *
 * The motion contract below deliberately follows the original ProcessWire
 * home.php source: motion-enhanced is progressive, reveals use translateY(34px)
 * with the (.16,1,.3,1) curve, images de-zoom from 1.045, and the shimmer is
 * removed by the loaded state. Content remains visible if JavaScript fails.
 */

.v4-collection {
  background:
    radial-gradient(circle at 92% 42%, rgba(103, 114, 96, 0.07), transparent 26rem),
    var(--paper);
}

.v4-collection .preview-bar {
  position: relative;
  z-index: 40;
  padding-block: 7px;
  background: #151413;
}

.qlo-header {
  position: relative;
  z-index: 5;
  background: var(--paper);
}

.qlo-topbar {
  position: relative;
  z-index: 15;
  min-height: 72px;
  color: #fff;
  background: #242424;
}

.qlo-nav-shell {
  width: min(calc(100% - 40px), var(--max));
  min-height: 72px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.qlo-brand {
  width: 68px;
  height: 56px;
  flex: 0 0 68px;
  display: grid;
  place-items: center;
}

.qlo-brand img {
  width: 58px;
  height: 46px;
  object-fit: contain;
  background: transparent;
}

.qlo-contact {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.71rem;
  text-decoration: none;
  white-space: nowrap;
}

.qlo-contact::before {
  margin-inline-end: 7px;
  content: "✉";
  font-size: 0.75rem;
}

.qlo-nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 29px);
}

.qlo-nav a {
  position: relative;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.qlo-nav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  content: "";
  background: #c97948;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.qlo-nav a:hover::after,
.qlo-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

html[dir="rtl"] .qlo-nav a::after {
  transform-origin: left;
}

html[dir="rtl"] .qlo-nav a:hover::after,
html[dir="rtl"] .qlo-nav a:focus-visible::after {
  transform-origin: right;
}

.qlo-nav-action {
  min-height: 38px;
  margin-left: 5px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--on-accent); /* TECH-027 Stage 1: was literal #fff — see CHANGES.md */
  background: var(--copper);
  border-radius: 3px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.qlo-nav-action:hover {
  background: var(--copper-dark);
  transform: translateY(-1px);
}

.qlo-hero {
  position: relative;
  height: clamp(380px, calc(100vh - 220px), 600px);
  overflow: hidden;
  background: #172030;
}

.qlo-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.qlo-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 15, 28, 0.36), rgba(8, 14, 24, 0.08) 38%, rgba(14, 15, 15, 0.45)),
    linear-gradient(90deg, rgba(13, 20, 33, 0.22), transparent 48%, rgba(20, 14, 10, 0.12));
}

.qlo-hero-copy {
  position: absolute;
  z-index: 2;
  top: 16%;
  left: 50%;
  width: min(calc(100% - 32px), 720px);
  color: #fff;
  text-align: center;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.38);
  transform: translate(-50%, -50%);
}

.qlo-hero-copy span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.qlo-hero-copy span::before,
.qlo-hero-copy span::after {
  width: 30px;
  height: 1px;
  content: "";
  background: rgba(255, 255, 255, 0.78);
}

.qlo-hero-copy h1 {
  margin: 7px 0 0;
  font-family: var(--serif);
  font-size: clamp(3.6rem, 7vw, 6.6rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.qlo-hero-copy p {
  margin: 15px auto 0;
  color: rgba(255, 255, 255, 0.91);
  font-family: var(--serif);
  font-size: 1rem;
}

.qlo-search-section {
  position: relative;
  z-index: 12;
  width: min(calc(100% - 40px), var(--max));
  margin: -40px auto 0;
}

.qlo-search-shelf {
  min-height: 82px;
  display: grid;
  grid-template-columns: 1.08fr 1.14fr 1.14fr 1fr auto;
  overflow: hidden;
  border: 1px solid rgba(210, 201, 191, 0.95);
  background: rgba(var(--cream-rgb), 0.98); /* TECH-027 Stage 1: was literal rgba(255, 253, 249, 0.98) - see CHANGES.md */
  box-shadow: 0 18px 48px rgba(20, 17, 15, 0.2);
}

.qlo-search-field {
  min-width: 0;
  min-height: 82px;
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line);
  cursor: default;
}

.qlo-search-field > span {
  margin-bottom: 3px;
  color: var(--copper);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.qlo-search-field strong,
.qlo-search-field select {
  min-width: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
}

.qlo-search-field select {
  width: 100%;
  padding: 0 22px 0 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  text-overflow: ellipsis;
}

.qlo-search-button {
  min-width: 174px;
  margin: 10px;
  padding: 0 21px;
  color: var(--on-accent); /* TECH-027 Stage 1: was literal #fff — see CHANGES.md */
  background: var(--copper);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.qlo-search-button:hover {
  background: var(--copper-dark);
  transform: translateY(-1px);
}

.v4-collection .collection {
  padding: 42px 0 76px;
}

.v4-collection .section-heading {
  margin-bottom: 24px;
}

.v4-collection .section-title {
  max-width: 760px;
  font-size: clamp(2.3rem, 4vw, 4.35rem);
}

.v4-collection .section-note {
  max-width: 390px;
  font-size: 0.82rem;
}

.v4-collection .stay-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.v4-collection .stay-card {
  height: 278px;
  min-height: 278px;
  display: grid;
  grid-template-columns: minmax(300px, 36%) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 16px;
  box-shadow: none;
}

.v4-collection .stay-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 40px rgba(44, 35, 28, 0.11);
}

.v4-collection .stay-media {
  height: 100%;
  aspect-ratio: auto;
}

.v4-collection .stay-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v4-collection .stay-gallery-mark {
  top: 13px;
  left: 13px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.v4-collection .stay-body {
  min-width: 0;
  min-height: 0;
  padding: 19px 22px 17px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(255px, 0.9fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  column-gap: clamp(20px, 3vw, 38px);
}

.v4-collection .stay-kicker {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 4px;
  overflow: hidden;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v4-collection .card-title {
  grid-column: 1;
  grid-row: 2;
  overflow: hidden;
  font-size: clamp(1.75rem, 2.7vw, 2.55rem);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v4-collection .stay-facts {
  grid-column: 1;
  grid-row: 3;
  margin: 9px 0 0;
  gap: 5px 11px;
  font-size: 0.67rem;
}

.v4-collection .stay-facts span + span::before {
  margin-right: 11px;
}

.v4-collection .stay-summary {
  grid-column: 1;
  grid-row: 4;
  min-height: 0;
  margin: 9px 0 8px;
  display: -webkit-box;
  align-self: start;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.v4-collection .stay-card .guest-rail {
  grid-column: 2;
  grid-row: 1 / 5;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 14px 15px;
  display: grid;
  align-content: center;
  align-self: stretch;
  border-left-width: 2px;
  background:
    linear-gradient(135deg, rgba(246, 239, 231, 0.92), rgba(237, 228, 217, 0.66));
}

.v4-collection .stay-card .guest-rail-label {
  position: static;
  width: auto;
  height: auto;
  display: flex;
  padding: 0;
  overflow: visible;
  clip: auto;
  font-size: 0.62rem;
  white-space: normal;
}

.v4-collection .stay-card .guest-quotes {
  min-height: 102px;
  margin: 11px 0 0;
}

.v4-collection .stay-card .guest-quote blockquote {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.v4-collection .stay-card .guest-quote cite {
  margin-top: 7px;
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v4-collection .stay-card .guest-rail-controls {
  top: auto;
  right: 12px;
  bottom: 11px;
  gap: 4px;
  transform: none;
}

.v4-collection .stay-card .guest-rail-controls button {
  width: 23px;
  height: 23px;
  font-size: 0.61rem;
}

.v4-collection .stay-actions {
  grid-column: 1 / -1;
  grid-row: 5;
  min-height: 31px;
  margin-top: 8px;
  padding-top: 9px;
}

.v4-collection .text-link,
.v4-collection .card-availability {
  font-size: 0.59rem;
}

.v4-collection .editorial-band {
  padding: 58px 0;
}

.v4-collection .editorial-copy > p {
  margin-bottom: 19px;
  font-size: 0.93rem;
}

.v4-collection .editorial-point {
  padding-top: 12px;
}

.v4-collection .editorial-point strong {
  font-size: 1.05rem;
}

.v4-collection .final-cta {
  padding: 58px 0;
}

.v4-collection .site-footer {
  padding-top: 48px;
}

/* Original ICW progressive motion recipe. */
.motion-enhanced .micromotion-fade-up,
.motion-enhanced .magazine-row,
.motion-enhanced .img-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-enhanced .micromotion-fade-up.in-view,
.motion-enhanced .magazine-row.in-view,
.motion-enhanced .img-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* UX-002: each card is already an IntersectionObserver target in app.js. The rail is visible
 * by default, so no-JS and observer-unsupported browsers keep readable content. Only the
 * progressively enhanced, not-yet-observed card applies the reserved-space transform/opacity
 * entrance. app.js unobserves each card after its first intersection. */
.motion-enhanced .v4-collection .stay-card.magazine-row .guest-rail {
  transition:
    opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-enhanced .v4-collection .stay-card.magazine-row:not(.in-view) .guest-rail {
  opacity: 0;
  transform: translate3d(-24px, 0, 0);
}

html[dir="rtl"].motion-enhanced .v4-collection .stay-card.magazine-row:not(.in-view) .guest-rail {
  transform: translate3d(24px, 0, 0);
}

.motion-enhanced .v4-collection .stay-card.magazine-row.in-view .guest-rail {
  opacity: 1;
  transform: none;
}

.motion-enhanced .qlo-hero-copy.micromotion-fade-up {
  transform: translate(-50%, calc(-50% + 34px));
}

.motion-enhanced .qlo-hero-copy.micromotion-fade-up.in-view {
  transform: translate(-50%, -50%);
}

.motion-enhanced .img-reveal img {
  transform: scale(1.045);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-enhanced .img-reveal.in-view img,
.motion-enhanced .img-reveal.loaded img {
  transform: scale(1);
}

.motion-enhanced .stay-card:hover .stay-media.in-view img {
  transform: scale(1.035);
}

.motion-enhanced .img-reveal.shimmer::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.24) 48%, transparent 62%),
    rgba(238, 229, 218, 0.12);
  background-size: 220% 100%;
  opacity: 1;
  animation: icwV4Shimmer 1.8s infinite;
  transition: opacity 0.85s ease;
}

.motion-enhanced .img-reveal.loaded::after {
  opacity: 0;
}

@keyframes icwV4Shimmer {
  to {
    background-position: -220% 0;
  }
}

.qlo-topbar.is-scrolled {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

@media (max-width: 1080px) {
  .qlo-nav a:nth-child(3),
  .qlo-nav a:nth-child(4) {
    display: none;
  }

  .qlo-search-shelf {
    grid-template-columns: 1fr 1.05fr 1.08fr auto;
  }

  .qlo-search-field:nth-child(4) {
    display: none;
  }

  .v4-collection .stay-card {
    height: 302px;
    min-height: 302px;
    grid-template-columns: minmax(278px, 37%) minmax(0, 1fr);
  }

  .v4-collection .stay-body {
    padding: 17px 19px 15px;
    display: flex;
    flex-direction: column;
  }

  .v4-collection .stay-summary {
    display: none;
  }

  .v4-collection .stay-card .guest-rail {
    width: 100%;
    height: 72px;
    min-height: 72px;
    margin: 12px 0 7px;
    padding: 8px 10px;
    border-left-width: 2px;
  }

  .v4-collection .stay-card .guest-rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .v4-collection .stay-card .guest-quotes {
    min-height: 50px;
    margin: 0 75px 0 0;
  }

  .v4-collection .stay-card .guest-quote blockquote {
    font-size: 0.73rem;
    line-height: 1.24;
    -webkit-line-clamp: 2;
  }

  .v4-collection .stay-card .guest-quote cite {
    margin-top: 3px;
    font-size: 0.44rem;
  }

  .v4-collection .stay-actions {
    width: 100%;
    min-height: 27px;
    margin-top: auto;
    padding-top: 7px;
  }
}

@media (max-width: 820px) {
  .qlo-contact {
    display: none;
  }

  .qlo-nav {
    gap: 18px;
  }

  .qlo-nav a:nth-child(n + 2) {
    display: none;
  }

  .qlo-hero {
    height: 420px;
  }

  .qlo-search-section {
    margin-top: -32px;
  }

  .qlo-search-shelf {
    grid-template-columns: 1fr 1fr auto;
  }

  .qlo-search-field {
    min-height: 72px;
    padding: 12px 14px;
  }

  .qlo-search-field:nth-child(1),
  .qlo-search-field:nth-child(4) {
    display: none;
  }

  .qlo-search-button {
    min-width: 145px;
    margin: 8px;
  }

  .v4-collection .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 12px;
  }

  .v4-collection .stay-card {
    grid-template-columns: minmax(250px, 38%) minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .qlo-nav-shell {
    width: min(calc(100% - 28px), var(--max));
  }

  .qlo-brand {
    width: 58px;
    flex-basis: 58px;
  }

  .qlo-nav {
    display: none;
  }

  .qlo-nav-action {
    margin-left: auto;
  }

  .qlo-hero {
    height: 330px;
  }

  .qlo-hero-copy {
    top: 16%;
  }

  .qlo-hero-copy span {
    font-size: 0.63rem;
  }

  .qlo-hero-copy h1 {
    font-size: clamp(3.45rem, 18vw, 5.4rem);
  }

  .qlo-hero-copy p {
    display: none;
  }

  .qlo-search-section {
    width: min(calc(100% - 28px), var(--max));
    margin-top: -26px;
  }

  .qlo-search-shelf {
    min-height: 0;
    grid-template-columns: 1fr auto;
  }

  .qlo-search-field {
    min-height: 64px;
  }

  .qlo-search-field:nth-child(2) {
    display: none;
  }

  .qlo-search-field:nth-child(3) {
    display: flex;
    border-right: 1px solid var(--line);
  }

  .qlo-search-button {
    min-width: 130px;
    padding-inline: 13px;
    font-size: 0.56rem;
  }

  .v4-collection .collection {
    padding-top: 36px;
  }

  .v4-collection .stay-grid {
    gap: 14px;
  }

  .v4-collection .stay-card {
    height: auto;
    min-height: 0;
    display: block;
  }

  .v4-collection .stay-media {
    height: 190px;
  }

  .v4-collection .stay-body {
    min-height: 232px;
    padding: 15px 16px 14px;
  }

  .v4-collection .card-title {
    font-size: 1.75rem;
  }

  .v4-collection .stay-summary {
    display: -webkit-box;
    margin: 8px 0 0;
    font-size: 0.76rem;
    -webkit-line-clamp: 2;
  }

  .v4-collection .stay-card .guest-rail {
    height: 88px;
    margin-top: 9px;
  }

  .v4-collection .editorial-band,
  .v4-collection .final-cta {
    padding-block: 50px;
  }
}

@media (max-width: 420px) {
  .qlo-nav-action {
    min-height: 36px;
    padding-inline: 12px;
    font-size: 0.58rem;
  }

  .qlo-search-button {
    min-width: 116px;
  }

  .v4-collection .stay-media {
    height: 176px;
  }

  .v4-collection .stay-body {
    min-height: 238px;
  }

  .v4-collection .stay-actions {
    align-items: center;
    flex-direction: row;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enhanced .micromotion-fade-up,
  .motion-enhanced .magazine-row,
  .motion-enhanced .img-reveal,
  .motion-enhanced .img-reveal img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .motion-enhanced .img-reveal.shimmer::after {
    display: none !important;
  }

  .motion-enhanced .v4-collection .stay-card .guest-rail {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/*
 * Hybrid V4 density pass
 * Qlo-style scanability with the I Can't Wait visual language.
 */

.hero {
  padding: 54px 0 34px;
}

.hero-grid {
  gap: 5vw;
}

.display-title {
  max-width: 780px;
  font-size: clamp(3.8rem, 7.4vw, 7.2rem);
}

.hero-copy {
  font-size: 0.94rem;
}

.availability-cell {
  min-height: 70px;
}

.collection {
  padding: 44px 0 72px;
}

.section-heading {
  margin-bottom: 24px;
}

.section-title {
  font-size: clamp(2.2rem, 3.8vw, 4rem);
}

.stay-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.stay-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  box-shadow: none;
}

.stay-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 32px rgba(44, 35, 28, 0.09);
}

.stay-media {
  aspect-ratio: 3 / 2;
}

.stay-gallery-mark {
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.stay-body {
  min-height: 0;
  padding: 12px 13px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.stay-kicker {
  margin-bottom: 4px;
  overflow: hidden;
  font-size: 0.56rem;
  letter-spacing: 0.11em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-title {
  min-height: 0;
  display: block;
  overflow: hidden;
  font-size: 1.38rem;
  line-height: 1.06;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stay-facts {
  margin-top: 7px;
  gap: 4px 9px;
  font-size: 0.62rem;
}

.stay-facts span + span::before {
  margin-right: 9px;
}

.stay-summary {
  display: none;
}

.stay-card .guest-rail {
  height: 66px;
  min-height: 66px;
  margin: 0 0 8px;
  padding: 8px 9px;
  border-left-width: 2px;
}

.stay-card .guest-rail-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.stay-card .guest-quotes {
  min-height: 48px;
  margin: 0 72px 0 0;
}

.stay-card .guest-quote blockquote {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.22;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.stay-card .guest-quote cite {
  margin-top: 2px;
  overflow: hidden;
  font-size: 0.46rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stay-card .guest-rail-controls {
  top: 50%;
  right: 7px;
  bottom: auto;
  gap: 3px;
  transform: translateY(-50%);
}

.stay-card .guest-rail-controls button {
  width: 20px;
  height: 20px;
  font-size: 0.58rem;
}

.stay-actions {
  min-height: 25px;
  margin-top: auto;
  padding-top: 8px;
}

.text-link,
.card-availability {
  font-size: 0.58rem;
}

.editorial-band {
  padding: 64px 0;
}

.editorial-grid {
  gap: 6vw;
}

.editorial-points {
  gap: 12px 18px;
}

.editorial-point {
  padding-top: 15px;
}

.detail-hero {
  padding-top: 24px;
}

.breadcrumb {
  margin-bottom: 16px;
}

.gallery-mosaic {
  grid-template-rows: repeat(2, minmax(150px, 198px));
  border-radius: 20px;
}

.detail-heading {
  padding: 30px 0 24px;
  gap: 28px;
}

.detail-title {
  max-width: 760px;
  font-size: clamp(3rem, 5vw, 4.85rem);
}

.detail-subtitle {
  margin-top: 11px;
  font-size: 0.94rem;
}

.detail-facts {
  padding: 14px 0;
  gap: 7px;
}

.fact-pill {
  min-height: 34px;
  padding-inline: 12px;
  font-size: 0.68rem;
}

.detail-layout {
  padding: 40px 0 76px;
  gap: 5vw;
}

.lede {
  font-size: clamp(1.28rem, 1.8vw, 1.65rem);
}

.detail-section {
  padding: 30px 0;
}

.detail-section h2 {
  margin-bottom: 17px;
  font-size: clamp(1.8rem, 2.5vw, 2.55rem);
}

.top-amenities {
  gap: 8px;
}

.amenity {
  min-height: 54px;
  padding: 10px 12px;
  gap: 10px;
  font-size: 0.76rem;
}

.amenity-icon {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  font-size: 0.9rem;
}

.amenity-details {
  gap: 7px;
}

.amenity-details summary {
  min-height: 48px;
  font-size: 1rem;
}

.guest-rail--wide {
  min-height: 128px;
  padding: 18px 20px 16px;
}

.guest-rail--wide .guest-quotes {
  min-height: 68px;
  margin-top: 11px;
}

.guest-rail--wide .guest-quote blockquote {
  font-size: clamp(1.04rem, 1.55vw, 1.32rem);
}

.availability-card {
  padding: 22px;
  box-shadow: 0 16px 38px rgba(44, 35, 28, 0.12);
}

.availability-title {
  font-size: 1.85rem;
}

.inline-gallery img,
.inline-gallery img:first-child {
  height: 250px;
}

.final-cta {
  padding: 60px 0;
}

@media (max-width: 1080px) {
  .stay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hero {
    padding: 40px 0 26px;
  }

  .display-title {
    font-size: clamp(3rem, 14vw, 4.65rem);
  }

  .collection {
    padding: 34px 0 56px;
  }

  .stay-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .stay-body {
    padding: 12px 13px;
  }

  .stay-media {
    aspect-ratio: 3 / 2;
  }

  .card-title {
    min-height: 0;
    font-size: 1.48rem;
    white-space: normal;
  }

  .stay-card .guest-rail {
    height: 66px;
    min-height: 66px;
    margin-bottom: 8px;
    padding: 8px 9px;
  }

  .stay-card .guest-quotes {
    min-height: 48px;
    margin: 0 72px 0 0;
  }

  .stay-card .guest-quote blockquote {
    font-size: 0.72rem;
    line-height: 1.22;
    -webkit-line-clamp: 2;
  }

  .stay-card .guest-rail-controls {
    top: 50%;
    right: 7px;
    bottom: auto;
  }

  .stay-card .guest-rail-controls button {
    width: 20px;
    height: 20px;
  }

  .stay-actions {
    align-items: center;
    flex-direction: row;
    padding-top: 8px;
  }

  .editorial-band {
    padding: 50px 0;
  }

  .gallery-mosaic {
    grid-template-rows: 265px 115px;
  }

  .detail-heading {
    padding: 25px 0 20px;
  }

  .detail-title {
    font-size: clamp(2.9rem, 13vw, 4.4rem);
  }

  .detail-layout {
    padding: 30px 0 58px;
    gap: 28px;
  }

  .detail-section {
    padding: 25px 0;
  }

  .top-amenities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .amenity {
    min-height: 50px;
  }

  .inline-gallery img,
  .inline-gallery img:first-child {
    height: 205px;
  }

  .inline-gallery img:first-child {
    height: 260px;
  }
}

@media (max-width: 500px) {
  .top-amenities {
    grid-template-columns: 1fr;
  }
}

/*
 * Hybrid V4 property hierarchy correction
 * Property information leads, guest notes become a bottom ticker,
 * and booking is presented as an unmistakable primary action.
 */

.v4-collection .stay-card {
  height: 304px;
  min-height: 304px;
}

.v4-collection .stay-body {
  padding: 21px 23px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  column-gap: 18px;
}

.v4-collection .stay-kicker,
.v4-collection .card-title,
.v4-collection .stay-facts,
.v4-collection .stay-summary {
  grid-column: 1 / -1;
}

.v4-collection .stay-kicker {
  grid-row: 1;
  margin-bottom: 5px;
  font-size: 0.68rem;
  letter-spacing: 0.11em;
}

.v4-collection .card-title {
  grid-row: 2;
  font-size: clamp(2rem, 2.65vw, 2.65rem);
  line-height: 1.02;
  text-overflow: clip;
  white-space: normal;
}

.v4-collection .stay-facts {
  grid-row: 3;
  margin-top: 10px;
  gap: 6px 13px;
  font-size: 0.78rem;
}

.v4-collection .stay-facts span + span::before {
  margin-right: 13px;
}

.v4-collection .stay-summary {
  grid-row: 4;
  margin: 10px 0 0;
  display: -webkit-box;
  align-self: start;
  color: var(--ink-soft);
  font-size: 0.91rem;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.v4-collection .stay-card .guest-rail {
  grid-column: 1;
  grid-row: 5;
  width: auto;
  height: 66px;
  min-height: 66px;
  margin: 12px 0 0;
  padding: 9px 88px 8px 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 15px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

.v4-collection .stay-card .guest-rail-label {
  position: static;
  width: auto;
  height: auto;
  display: block;
  padding: 0;
  overflow: visible;
  clip: auto;
  color: var(--copper-dark);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.v4-collection .stay-card .guest-rail-label::after {
  display: none;
}

.v4-collection .stay-card .guest-quotes {
  width: 100%;
  min-height: 46px;
  margin: 0;
}

.v4-collection .stay-card .guest-quote blockquote {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.81rem;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.v4-collection .stay-card .guest-quote cite {
  margin-top: 3px;
  font-size: 0.46rem;
  line-height: 1.1;
}

.v4-collection .stay-card .guest-rail-controls {
  top: 50%;
  right: 0;
  bottom: auto;
  gap: 4px;
  transform: translateY(-50%);
}

.v4-collection .stay-card .guest-rail-controls button {
  width: 24px;
  height: 24px;
  font-size: 0.61rem;
}

.v4-collection .stay-actions {
  grid-column: 2;
  grid-row: 5;
  min-width: 124px;
  min-height: 66px;
  margin-top: 12px;
  padding: 0 0 0 18px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
}

.v4-collection .book-button {
  min-width: 116px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  color: var(--on-accent); /* TECH-027 Stage 1: was literal #fff — see CHANGES.md */
  background: var(--copper);
  border: 1px solid var(--copper);
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.v4-collection .book-button:hover,
.v4-collection .book-button:focus-visible {
  color: var(--on-accent); /* TECH-027 Stage 1: was literal #fff — see CHANGES.md */
  background: var(--copper-dark);
  border-color: var(--copper-dark);
  transform: translateY(-1px);
}

.v4-collection .book-button:focus-visible {
  outline: 3px solid rgba(173, 105, 71, 0.28);
  outline-offset: 3px;
}

html[data-icw-theme="dark"] .v4-collection .book-button:focus-visible {
  outline-color: rgba(220, 180, 157, 0.7); /* TECH-027 Stage 1: unchanged literal flattens to
    ~1.4:1 vs the dark page (fails 3:1 non-text); this candidate flattens to ~5.3:1 —
    same treatment as the calendar hover outline, see CHANGES.md */
}

.v4-collection .card-availability {
  font-size: 0.52rem;
}

@media (max-width: 1080px) {
  .v4-collection .stay-card {
    height: 318px;
    min-height: 318px;
  }

  .v4-collection .stay-body {
    padding: 19px 20px 17px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    column-gap: 12px;
  }

  .v4-collection .card-title {
    font-size: clamp(1.9rem, 3.8vw, 2.35rem);
  }

  .v4-collection .stay-summary {
    display: -webkit-box;
    font-size: 0.84rem;
    line-height: 1.42;
    -webkit-line-clamp: 2;
  }

  .v4-collection .stay-card .guest-rail {
    width: auto;
    height: 66px;
    min-height: 66px;
    margin: 11px 0 0;
    padding: 9px 83px 8px 0;
    grid-template-columns: 1fr;
  }

  .v4-collection .stay-card .guest-rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .v4-collection .stay-card .guest-quotes {
    min-height: 46px;
    margin: 0;
  }

  .v4-collection .stay-card .guest-quote blockquote {
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .v4-collection .stay-actions {
    width: auto;
    min-width: 116px;
    min-height: 66px;
    margin-top: 11px;
    padding: 0 0 0 10px;
  }
}

@media (max-width: 680px) {
  .v4-collection .stay-card {
    height: auto;
    min-height: 0;
  }

  .v4-collection .stay-media {
    height: 190px;
  }

  .v4-collection .stay-body {
    min-height: 292px;
    padding: 17px 17px 16px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    column-gap: 0;
  }

  .v4-collection .stay-kicker {
    font-size: 0.61rem;
  }

  .v4-collection .card-title {
    font-size: 1.95rem;
  }

  .v4-collection .stay-facts {
    margin-top: 8px;
    font-size: 0.7rem;
  }

  .v4-collection .stay-summary {
    margin-top: 8px;
    font-size: 0.86rem;
    line-height: 1.4;
    -webkit-line-clamp: 2;
  }

  .v4-collection .stay-card .guest-rail {
    grid-column: 1;
    grid-row: 5;
    height: 68px;
    min-height: 68px;
    margin-top: 10px;
    padding: 8px 79px 7px 0;
    grid-template-columns: 1fr;
  }

  .v4-collection .stay-card .guest-rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .v4-collection .stay-card .guest-quotes {
    min-height: 50px;
  }

  .v4-collection .stay-card .guest-quote blockquote {
    font-size: 0.76rem;
    line-height: 1.24;
  }

  .v4-collection .stay-actions {
    grid-column: 1;
    grid-row: 6;
    width: 100%;
    min-height: 48px;
    margin-top: 9px;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 13px;
    border-top: 0;
  }

  .v4-collection .book-button {
    min-width: 128px;
    min-height: 46px;
  }
}

@media (max-width: 420px) {
  .v4-collection .stay-media {
    height: 176px;
  }

  .v4-collection .stay-body {
    min-height: 292px;
  }

  .v4-collection .stay-actions {
    align-items: center;
    flex-direction: row;
  }
}

/*
 * Hybrid V4 information and ticker refinement
 * A stronger property hierarchy shares one balanced row with the photography.
 * Guest comments run as a control-free, pause-on-hover news ticker.
 */

.v4-collection .section-heading {
  display: block;
  max-width: 920px;
}

.v4-collection .section-title {
  max-width: 920px;
}

.v4-collection .stay-card {
  height: 356px;
  min-height: 356px;
}

.v4-collection .stay-body {
  padding: 27px 28px 22px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  column-gap: 22px;
}

.v4-collection .stay-kicker {
  margin-bottom: 7px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}

.v4-collection .card-title {
  font-size: clamp(2.7rem, 3.7vw, 3.35rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.v4-collection .stay-facts {
  margin-top: 13px;
  gap: 8px 16px;
  font-size: 0.9rem;
}

.v4-collection .stay-facts span + span::before {
  margin-right: 16px;
}

.v4-collection .stay-summary {
  margin-top: 14px;
  font-size: 1.06rem;
  line-height: 1.5;
  -webkit-line-clamp: 3;
}

.v4-collection .stay-card .guest-rail {
  --ticker-gap: 44px;
  --ticker-half-gap: 22px;
  grid-column: 1;
  grid-row: 5;
  width: auto;
  min-width: 0;
  height: 58px;
  min-height: 58px;
  margin: 15px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 20px;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

.v4-collection .stay-card .guest-rail-label {
  position: static;
  width: auto;
  height: auto;
  display: inline-flex;
  padding: 0;
  overflow: visible;
  clip: auto;
  color: var(--copper-dark);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.v4-collection .stay-card .guest-rail-label::after {
  display: none;
}

.v4-collection .stay-card .guest-ticker-window {
  min-width: 0;
  overflow: hidden;
}

.v4-collection .stay-card .guest-quotes,
.v4-collection .stay-card .guest-ticker-track {
  width: max-content;
  min-width: 0;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--ticker-gap);
  animation: guestTickerScroll var(--ticker-duration, 32s) linear infinite;
  will-change: transform;
}

.v4-collection .stay-card .guest-quote,
.v4-collection .stay-card .guest-ticker-item {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.v4-collection .stay-card .guest-quote blockquote {
  display: block;
  overflow: visible;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.3;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

.v4-collection .stay-card .guest-quote cite {
  margin: 0;
  overflow: visible;
  color: var(--muted);
  font-size: 0.56rem;
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
}

.v4-collection .stay-card .guest-rail:hover .guest-ticker-track,
.v4-collection .stay-card .guest-rail:focus-within .guest-ticker-track {
  animation-play-state: paused;
}

.v4-collection .stay-card .guest-rail-controls {
  display: none;
}

@keyframes guestTickerScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - var(--ticker-half-gap)));
  }
}

.v4-collection .stay-actions {
  grid-column: 2;
  grid-row: 5;
  min-width: 132px;
  min-height: 58px;
  margin-top: 15px;
  padding-left: 20px;
}

.v4-collection .book-button {
  min-width: 122px;
  min-height: 48px;
  font-size: 0.74rem;
}

@media (max-width: 1080px) {
  .v4-collection .stay-card {
    height: 366px;
    min-height: 366px;
  }

  .v4-collection .stay-body {
    padding: 25px 24px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    column-gap: 16px;
  }

  .v4-collection .stay-kicker {
    font-size: 0.74rem;
  }

  .v4-collection .card-title {
    font-size: clamp(2.3rem, 5.1vw, 2.7rem);
  }

  .v4-collection .stay-facts {
    margin-top: 12px;
    font-size: 0.82rem;
  }

  .v4-collection .stay-summary {
    margin-top: 12px;
    display: -webkit-box;
    font-size: 0.96rem;
    line-height: 1.46;
    -webkit-line-clamp: 3;
  }

  .v4-collection .stay-card .guest-rail {
    width: auto;
    height: 56px;
    min-height: 56px;
    margin: 13px 0 0;
    padding: 0;
    grid-template-columns: 1fr;
  }

  .v4-collection .stay-card .guest-rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .v4-collection .stay-card .guest-quote blockquote {
    font-size: 0.83rem;
  }

  .v4-collection .stay-actions {
    min-width: 122px;
    min-height: 56px;
    margin-top: 13px;
    padding-left: 14px;
  }
}

@media (max-width: 680px) {
  .v4-collection .section-heading {
    margin-bottom: 20px;
  }

  .v4-collection .stay-card {
    height: auto;
    min-height: 0;
  }

  .v4-collection .stay-media {
    height: 190px;
  }

  .v4-collection .stay-body {
    min-height: 338px;
    padding: 22px 20px 19px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    column-gap: 0;
  }

  .v4-collection .stay-kicker {
    font-size: 0.72rem;
    white-space: normal;
  }

  .v4-collection .card-title {
    font-size: 2.25rem;
    line-height: 1;
  }

  .v4-collection .stay-facts {
    margin-top: 10px;
    gap: 6px 11px;
    font-size: 0.78rem;
  }

  .v4-collection .stay-facts span + span::before {
    margin-right: 11px;
  }

  .v4-collection .stay-summary {
    margin-top: 11px;
    font-size: 0.95rem;
    line-height: 1.45;
    -webkit-line-clamp: 3;
  }

  .v4-collection .stay-card .guest-rail {
    grid-column: 1;
    grid-row: 5;
    height: 54px;
    min-height: 54px;
    margin-top: 13px;
    padding: 0;
    grid-template-columns: 1fr;
  }

  .v4-collection .stay-card .guest-quote blockquote {
    font-size: 0.82rem;
  }

  .v4-collection .stay-card .guest-quote cite {
    font-size: 0.54rem;
  }

  .v4-collection .stay-actions {
    grid-column: 1;
    grid-row: 6;
    width: 100%;
    min-height: 48px;
    margin-top: 11px;
    padding: 0;
    justify-content: flex-start;
    flex-direction: row;
    gap: 14px;
    border-top: 0;
  }

  .v4-collection .book-button {
    min-width: 132px;
    min-height: 48px;
  }
}

@media (max-width: 420px) {
  .v4-collection .stay-media {
    height: 176px;
  }

  .v4-collection .stay-body {
    min-height: 338px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v4-collection .stay-card .guest-ticker-track {
    animation: none;
    transform: none;
  }

  .v4-collection .stay-card .guest-ticker-clone,
  .v4-collection .stay-card .guest-ticker-item:not(:first-child) {
    display: none;
  }
}

/*
 * ICW 0.4.5 Qlo-hosted preview refinement.
 * Guest-facing collection copy, inset cover photography, paired View/Book
 * actions, a quieter review ticker, and a live sticky availability calendar.
 */

.v4-collection .stay-media {
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  margin: 14px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--paper-deep);
}

.v4-collection .stay-media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  border: 0;
  border-radius: inherit;
}

.v4-collection .stay-body {
  grid-template-columns: minmax(0, 1fr) minmax(228px, auto);
}

.v4-collection .stay-card .guest-rail {
  min-height: 62px;
  padding: 8px 15px;
  border: 1px solid rgba(173, 105, 71, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(248, 242, 235, 0.96), rgba(238, 229, 219, 0.7));
}

.v4-collection .stay-card .guest-ticker-window {
  padding-inline: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.v4-collection .stay-card .guest-quotes,
.v4-collection .stay-card .guest-ticker-track {
  animation-duration: var(--ticker-duration, 46s);
}

.v4-collection .stay-card .guest-quote blockquote {
  color: rgba(55, 48, 43, 0.78);
  font-size: 0.84rem;
}

.v4-collection .stay-actions {
  min-width: 228px;
  min-height: 62px;
  padding-left: 18px;
  justify-content: flex-end;
  flex-direction: row;
  gap: 9px;
}

.v4-collection .book-button,
.v4-collection .view-button {
  min-width: 104px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 19px;
  border: 1px solid var(--copper);
  border-radius: 4px;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.v4-collection .view-button {
  color: var(--copper-dark);
  background: rgba(var(--cream-rgb), 0.86); /* TECH-027 Stage 1: was literal rgba(255, 253, 249, 0.86) — see CHANGES.md */
}

.v4-collection .view-button:hover,
.v4-collection .view-button:focus-visible {
  color: var(--on-accent); /* TECH-027 Stage 1: was literal #fff; --ink turns near-white in dark
    mode, so a hardcoded white would drop to ~1.15:1 (near-invisible) — see CHANGES.md */
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
}

.v4-collection .book-button {
  color: var(--on-accent); /* TECH-027 Stage 1: was literal #fff — see CHANGES.md */
  background: var(--copper);
}

.v4-collection .book-button:focus-visible,
.v4-collection .view-button:focus-visible {
  outline: 3px solid rgba(173, 105, 71, 0.28);
  outline-offset: 3px;
}

html[data-icw-theme="dark"] .v4-collection .book-button:focus-visible,
html[data-icw-theme="dark"] .v4-collection .view-button:focus-visible {
  outline-color: rgba(220, 180, 157, 0.7); /* TECH-027 Stage 1: same fix as above — see CHANGES.md */
}

.qlo-preview-detail {
  background:
    radial-gradient(circle at 92% 22%, rgba(103, 114, 96, 0.06), transparent 28rem),
    var(--paper);
}

.qlo-preview-detail .qlo-header {
  position: sticky;
  z-index: 35;
  top: 0;
}

.qlo-gallery-mosaic,
.qlo-gallery-mosaic .gallery-tile,
.qlo-inline-gallery,
.qlo-inline-gallery button {
  background: transparent;
}

.qlo-gallery-mosaic .gallery-tile,
.qlo-inline-gallery button {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}

.qlo-inline-gallery button {
  position: relative;
  display: block;
}

.qlo-gallery-mosaic .gallery-tile img,
.qlo-inline-gallery button img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  border: 0;
  background: transparent;
}

.qlo-inline-gallery button img,
.qlo-inline-gallery button img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.qlo-gallery-mosaic .gallery-tile:first-child {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.qlo-gallery-mosaic .gallery-tile:nth-child(3) {
  border-radius: 0 var(--radius-lg) 0 0;
}

.qlo-gallery-mosaic .gallery-tile:last-child {
  border-radius: 0 0 var(--radius-lg) 0;
}

.gallery-more--icon {
  width: 42px;
  height: 42px;
  padding: 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.gallery-more--icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.qlo-detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
  gap: clamp(54px, 7vw, 104px);
}

.availability-card--calendar {
  top: 92px;
  padding: 25px;
  scroll-margin-top: 96px;
}

.booking-grid--live {
  grid-template-columns: 1fr 1fr;
}

.booking-guests {
  grid-column: 1 / -1;
}

/* Guests | Pets side by side under the calendar (owner sketch 2026-09-05:
   check-in/checkout, calendar, guests|pets, then the CTA). */
.booking-grid--party {
  margin: 0 0 14px;
}

.booking-grid--party .booking-guests,
.booking-grid--party .booking-pets {
  grid-column: auto;
}

/* In the two-field live grids the second cell sits beside the first at any
   width where the grid has two columns; the base last-child full-row span
   is for the legacy three-field card. */
.booking-grid--live .booking-field:last-child {
  grid-column: auto;
  border-top: 0;
}

.booking-guests select,
.booking-pets select {
  width: 100%;
  margin-top: 2px;
  padding: 0;
  color: var(--ink);
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 0.81rem;
  font-weight: 700;
}

.booking-guests select:focus-visible,
.booking-pets select:focus-visible {
  outline: 3px solid var(--copper-dark);
  outline-offset: 4px;
}

.availability-calendar {
  margin: 19px 0 17px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(var(--cream-rgb), 0.88); /* TECH-027 Stage 1: was literal rgba(255, 253, 249, 0.88) - see CHANGES.md */
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.calendar-toolbar strong {
  text-align: center;
  font-family: var(--serif);
  font-size: 1rem;
}

.calendar-toolbar button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream); /* DEFECT-1 fix: was literal #fff, which never
    swapped with the theme -- html[data-icw-theme="dark"] flips --ink to
    #f2efe9 (cream text) while the background stayed pinned white, measuring
    1.15:1. var(--cream) is the same theme-aware token the sibling
    .guest-rail-controls button already uses for this exact circular
    nav-button-on-a-card pattern: light #fffdf9 (16.93:1 vs light --ink),
    dark #201e1b (14.49:1 vs dark --ink). */
  cursor: pointer;
}

.calendar-toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-weekdays {
  margin: 13px 0 5px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--ink);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
}

.calendar-day:not(:disabled):hover {
  outline: 2px solid rgba(173, 105, 71, 0.44);
  outline-offset: 1px;
}

.calendar-day:not(:disabled):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.calendar-day.is-available::after,
.calendar-day.is-checkout-option::after {
  position: absolute;
  bottom: 3px;
  width: 3px;
  height: 3px;
  content: "";
  border-radius: 50%;
  background: var(--sage);
}

.calendar-day.is-unavailable {
  color: rgba(102, 93, 86, 0.38);
  cursor: not-allowed;
  text-decoration: line-through;
}

.calendar-day.is-checkout-option {
  background: rgba(103, 114, 96, 0.11);
}

.calendar-day.is-checkin,
.calendar-day.is-checkout {
  color: var(--on-accent); /* TECH-027 Stage 1: was literal #fff; PLAN.md Stage 1b named this
    pair explicitly as needing a check — measured white-on-new-dark-copper-dark = 2.51:1
    (fails); var(--on-accent) resolves to 7.19:1 (AAA) — see CHANGES.md */
  background: var(--copper-dark);
}

.calendar-day--empty {
  pointer-events: none;
}

/* TECH-027 Stage 1b — literal-color follow-ups named in PLAN.md, computed against the
 * calendar's actual composited card background (~#1f1d1a once --cream-rgb above applies). */
html[data-icw-theme="dark"] .calendar-day:not(:disabled):hover {
  outline-color: rgba(220, 180, 157, 0.7); /* dark --copper rgb; flattens to ~5.3:1 vs card,
    clears the 3:1 non-text threshold with headroom. Was literal rgba(173, 105, 71, 0.44),
    which only flattens to ~1.7:1 against the new dark card if left unchanged. */
}

html[data-icw-theme="dark"] .calendar-day.is-unavailable {
  color: rgba(242, 239, 233, 0.38); /* dark --ink rgb at the same 0.38 alpha as the light rule,
    mirroring its "faded/disabled" intent instead of the light rule's near-black wash (which
    would go nearly invisible on a dark card). Non-color cue (text-decoration: line-through)
    is preserved unchanged, so this remains non-color-only per RISKS.md #3. WCAG 1.4.3 does
    not require a contrast minimum for disabled controls; flattens to ~3.3:1 vs the dark
    card, i.e. legibly faded, not invisible. */
}

.calendar-message {
  min-height: 32px;
  margin: 13px 0 0;
  color: var(--ink-soft);
  font-size: 0.68rem;
  line-height: 1.45;
}

.calendar-legend {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  color: var(--muted);
  font-size: 0.58rem;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.calendar-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.legend-available {
  background: var(--sage);
}

.legend-unavailable {
  border: 1px solid rgba(102, 93, 86, 0.4);
  background: transparent;
}

.all-amenities {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.all-amenities summary {
  padding: 18px 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
}

.all-amenities-list {
  padding: 0 0 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 24px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  list-style-position: inside;
}

.qlo-inline-gallery {
  grid-template-columns: 1.25fr 0.75fr;
}

.qlo-inline-gallery button:first-child {
  grid-row: span 2;
  height: 632px;
  border-radius: var(--radius-sm);
}

.qlo-inline-gallery button:not(:first-child) {
  height: 310px;
  border-radius: var(--radius-sm);
}

.preview-error {
  min-height: 70vh;
  padding-block: 120px;
}

.preview-error h1 {
  max-width: 720px;
  margin: 12px 0;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  font-weight: 400;
}

@media (max-width: 1080px) {
  .v4-collection .stay-body {
    grid-template-columns: minmax(0, 1fr) minmax(212px, auto);
  }

  .v4-collection .stay-card .guest-rail-label {
    position: static;
    width: auto;
    height: auto;
    display: inline-flex;
    overflow: visible;
    clip: auto;
  }

  .v4-collection .stay-card .guest-rail {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .v4-collection .stay-actions {
    min-width: 212px;
    padding-left: 12px;
  }

  .v4-collection .book-button,
  .v4-collection .view-button {
    min-width: 96px;
    padding-inline: 15px;
  }
}

@media (max-width: 980px) {
  .qlo-detail-layout {
    grid-template-columns: 1fr;
  }

  .availability-card--calendar {
    position: static;
    max-width: 620px;
    order: -1;
  }
}

@media (max-width: 680px) {
  .v4-collection .stay-media {
    width: calc(100% - 24px);
    height: 190px;
    margin: 12px 12px 0;
    border-radius: 13px;
  }

  .v4-collection .stay-card .guest-rail {
    grid-template-columns: 1fr;
    padding: 8px 12px;
  }

  .v4-collection .stay-card .guest-rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .v4-collection .stay-actions {
    min-height: 48px;
    justify-content: flex-start;
    gap: 9px;
  }

  .v4-collection .book-button,
  .v4-collection .view-button {
    min-width: 112px;
    min-height: 45px;
  }

  .qlo-gallery-mosaic .gallery-tile:first-child {
    border-radius: 20px 20px 0 0;
  }

  .qlo-gallery-mosaic .gallery-tile:nth-child(3) {
    border-radius: 0;
  }

  .qlo-gallery-mosaic .gallery-tile:last-child {
    border-radius: 0 0 20px 0;
  }

  .all-amenities-list {
    grid-template-columns: 1fr;
  }

  .qlo-inline-gallery button,
  .qlo-inline-gallery button:first-child,
  .qlo-inline-gallery button:not(:first-child) {
    height: 220px;
    grid-row: auto;
  }

  .qlo-inline-gallery button:first-child {
    grid-column: 1 / -1;
    height: 330px;
  }
}

@media (max-width: 420px) {
  .v4-collection .stay-media {
    height: 176px;
  }

  .v4-collection .stay-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .v4-collection .book-button,
  .v4-collection .view-button {
    width: 100%;
    min-width: 0;
  }

  .availability-card--calendar {
    padding: 18px;
  }

  .availability-calendar {
    margin-inline: -3px;
    padding: 12px 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v4-collection .stay-card .guest-ticker-track {
    animation: none;
  }
}

/* ---- 0.5.0: marketplace detail heading ---- */

.qlo-preview-detail .detail-hero {
  padding-top: 14px;
}

.detail-heading--marketplace {
  margin: 0 0 14px;
  padding: 0;
  display: block;
  border-bottom: 0;
}

.detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
}

.detail-back {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-back:hover,
.detail-back:focus-visible {
  color: var(--copper);
}

.detail-meta-location {
  color: var(--copper);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.detail-heading--marketplace .detail-title {
  max-width: 900px;
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.detail-meta {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.detail-meta span {
  margin-inline: 4px;
  color: var(--muted);
}

.detail-subtitle--marketplace {
  max-width: 760px;
  margin: 16px 0 0;
}

/* ---- 0.5.0: structured description ---- */

.detail-description p {
  margin: 0 0 15px;
}

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

.description-heading {
  margin: 26px 0 9px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.detail-description .description-heading:first-child {
  margin-top: 0;
}

/* ---- 0.5.0: collection amenity highlights ---- */

.amenity-highlights {
  padding: 78px 0 26px;
}

.amenity-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.amenity-highlight {
  padding: 26px 28px 24px;
  border-left: 2px solid var(--copper);
  background: var(--surface-warm-panel);
}

.amenity-highlight h3 {
  margin: 0 0 9px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.amenity-highlight p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .amenity-highlights {
    padding: 56px 0 12px;
  }

  .amenity-highlight-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ---- 0.6.0: photo tour ---- */

.gallery-showall {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 4;
  padding: 9px 15px;
  color: var(--ink);
  background: var(--surface-gallery-control);
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 160ms ease;
}

.gallery-showall:hover,
.gallery-showall:focus-visible {
  background: var(--surface-gallery-control-hover);
}

.gallery-mosaic {
  position: relative;
}

.photo-tour {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.photo-tour[hidden] {
  display: none;
}

.photo-tour-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(18px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.photo-tour-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
}

.photo-tour-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.15rem;
  transition: color 160ms ease, border-color 160ms ease;
}

.photo-tour-close:hover,
.photo-tour-close:focus-visible {
  color: var(--copper);
  border-color: var(--copper);
}

.photo-tour-body {
  flex: 1;
  overflow-y: auto;
  padding: 26px clamp(18px, 4vw, 44px) 60px;
}

.photo-tour-room {
  max-width: 1060px;
  margin: 0 auto 44px;
}

.photo-tour-room-title {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.photo-tour-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.photo-tour-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.photo-tour-grid img:first-child:nth-last-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 680px) {
  .photo-tour-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 0.6.4: unified header (contact stack, phone, profile) ---- */

.qlo-contact-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.qlo-contact-stack .qlo-contact,
.qlo-contact-stack .qlo-phone {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1.3;
}

.qlo-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}

.qlo-phone:hover,
.qlo-phone:focus-visible {
  color: #fff;
}

.qlo-phone-icon {
  font-size: 0.85rem;
}

.qlo-profile {
  width: 38px;
  height: 38px;
  margin-left: 4px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transition: color 160ms ease, border-color 160ms ease;
}

.qlo-profile svg {
  width: 20px;
  height: 20px;
}

.qlo-profile:hover,
.qlo-profile:focus-visible {
  color: #fff;
  border-color: #fff;
}

/* the slimmer nav now fits at widths where items 3-4 used to hide */
@media (max-width: 1080px) {
  .qlo-nav a:nth-child(3),
  .qlo-nav a:nth-child(4) {
    display: inline-block;
  }
}

@media (max-width: 820px) {
  .qlo-contact-stack {
    display: none;
  }
}

/* ---- 0.6.3: compact availability card ---- */

.availability-card--calendar {
  top: 84px;
  padding: 20px 20px 16px;
}

.availability-card--calendar .eyebrow {
  margin-bottom: 6px;
}

.availability-card--calendar .availability-title {
  margin-bottom: 12px;
  font-size: 1.45rem;
}

.availability-card--calendar .booking-grid {
  margin-bottom: 10px;
}

.availability-calendar {
  margin-top: 8px;
  padding: 10px 10px 8px;
}

.calendar-toolbar {
  margin-bottom: 4px;
}

.calendar-day {
  min-height: 30px;
  height: 30px;
}

.stay-summary-line {
  margin: 10px 0 6px;
}

.availability-card--calendar .booking-reassurance {
  margin-top: 8px;
}

/* touch targets: compact card is a desktop economy; thumbs need ≥40px */
@media (max-width: 820px), (pointer: coarse) {
  .calendar-day {
    min-height: 40px;
    height: 40px;
    font-size: 0.88rem;
  }

  .calendar-toolbar button {
    width: 38px;
    height: 38px;
  }

  .qlo-nav-action {
    min-height: 40px;
  }
}

/* ---- 0.6.3: readability floor (tiny-font sweep) ----
   Reading copy ≥ ~14px, functional text ≥ ~12px, caps micro-labels ≥ ~11.2px. */

.stay-note strong {
  font-size: 1.02rem;
}

.stay-note span {
  font-size: 0.9rem;
  line-height: 1.55;
}

.top-amenities .amenity span,
.all-amenities-list li {
  font-size: 0.88rem;
}

.detail-description p,
.detail-description .description-heading + p {
  font-size: 0.95rem;
}

.booking-field small {
  font-size: 0.7rem;
}

.text-link,
.clamp-toggle {
  font-size: 0.78rem;
}

.guest-rail-label {
  font-size: 0.7rem;
}

.eyebrow {
  font-size: 0.74rem;
}

.booking-reassurance {
  font-size: 0.75rem;
}

.calendar-day {
  font-size: 0.78rem;
}

.calendar-weekdays span {
  font-size: 0.68rem;
}

.calendar-toolbar button {
  font-size: 0.82rem;
}

.qlo-nav a {
  font-size: 0.73rem;
}

.qlo-contact {
  font-size: 0.75rem;
}

.qlo-nav-action {
  font-size: 0.7rem;
}

.qlo-search-button {
  font-size: 0.75rem;
}

.detail-back,
.gallery-showall {
  font-size: 0.75rem;
}

.detail-meta-location {
  font-size: 0.8rem;
}

.host-meta {
  font-size: 0.82rem;
}

.host-contact,
.button.button-secondary {
  font-size: 0.74rem;
}

.button.button-primary,
.button.button-arrow {
  font-size: 0.8rem;
}

.view-button,
.book-button {
  font-size: 0.77rem;
}

.stay-kicker {
  font-size: 0.82rem;
}

.gq-stars {
  font-size: 0.72rem;
}

.gq-meta cite,
.guest-quote cite {
  font-size: 0.68rem;
}

.footer-column strong {
  font-size: 0.74rem;
}

.footer-copy {
  font-size: 0.86rem;
}

/* ---- 0.6.2: guest spotlight (collection cards) ---- */

.v4-collection .stay-card .guest-spotlight {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gq-items {
  position: relative;
  width: 100%;
  height: calc(2 * 1.42em + 1.35em + 6px);
  margin: 0;
  padding: 0;
  font-size: 0.91rem; /* fallback; runtime-synced to .stay-summary */
  line-height: 1.42;
  list-style: none;
}

.gq-item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.46s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.gq-item.is-shown {
  opacity: 1;
  transform: none;
}

.gq-item.is-leaving {
  opacity: 0;
  transform: translateX(16px);
}

.gq-text {
  margin: 0;
  line-height: 1.42;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: inherit;
  font-style: italic;
  line-height: inherit;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.gq-meta {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.gq-stars {
  color: var(--copper);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}

.gq-meta cite {
  color: var(--muted);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .gq-items {
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gq-item {
    transition: none;
  }
}

/* ---- 0.6.1: selected-range shading ---- */

.calendar-day.is-in-range {
  color: var(--copper-dark);
  background: rgba(159, 87, 45, 0.14);
  border-radius: 0;
}

.calendar-day.is-in-range:not(:disabled):hover {
  background: rgba(159, 87, 45, 0.24);
}

/* ---- 0.6.0: booking CTA states ---- */

.stay-summary-line {
  margin: 14px 0 10px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
}

.calendar-clear {
  margin: 10px auto 0;
  padding: 2px 4px;
  display: block;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.calendar-clear[hidden] {
  display: none;
}

/* ---- 0.6.0: description clamp ---- */

.detail-description.is-clampable {
  position: relative;
  max-height: 16.5em;
  overflow: hidden;
}

.detail-description.is-clampable::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3.4em;
  content: "";
  background: linear-gradient(180deg, rgba(250, 247, 242, 0), var(--paper));
}

.detail-description.is-clampable.is-expanded {
  max-height: none;
}

.detail-description.is-clampable.is-expanded::after {
  display: none;
}

.clamp-toggle {
  margin-top: 12px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---- 0.6.0: host card ---- */

.host-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 26px;
  border-left: 2px solid var(--copper);
  background: var(--surface-warm-panel);
}

.host-photo {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  object-fit: cover;
  border-radius: 50%;
}

.host-copy p {
  margin: 0 0 8px;
}

.host-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
}

.host-meta {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.host-bio {
  max-width: 620px;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.55;
}

.host-contact {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease;
}

.host-contact:hover,
.host-contact:focus-visible {
  color: var(--copper);
  border-color: var(--copper);
}

@media (max-width: 560px) {
  .host-card {
    flex-direction: column;
  }
}

/* ---- 0.6.0: mobile booking bar ---- */

.mobile-book-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 28px rgba(31, 27, 24, 0.12);
  transform: translateY(102%);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-book-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.mobile-book-copy strong {
  overflow: hidden;
  font-family: var(--serif);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-book-copy span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .mobile-book-bar {
    display: flex;
  }

  .mobile-book-bar.is-visible {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-book-bar {
    transition: none;
  }
}


/* ---- 0.6.5: About Jay section (collection) ---- */

.about-jay {
  padding: 60px 0 34px;
  background: var(--paper-deep);
}

.host-card--wide {
  max-width: 880px;
  align-items: center;
  gap: 26px;
}

.host-photo--lg {
  width: 128px;
  height: 128px;
  flex-basis: 128px;
  box-shadow: 0 12px 34px rgba(47, 34, 24, 0.18);
}

.host-lines {
  max-width: 640px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

.host-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.host-actions .host-contact {
  margin-top: 0;
}

.host-phone-link {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.host-phone-link:hover,
.host-phone-link:focus-visible {
  color: var(--copper);
}

/* ---- 0.6.6: calendar card always fits the viewport ---- */

.availability-card--calendar {
  max-height: calc(100vh - 84px - 26px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

@media (max-height: 880px) and (min-width: 821px) {
  .availability-card--calendar {
    padding: 16px 16px 14px;
  }

  .availability-card--calendar .eyebrow {
    margin-bottom: 4px;
  }

  .availability-card--calendar .availability-title {
    margin-bottom: 8px;
    font-size: 1.25rem;
  }

  .availability-card--calendar .booking-grid {
    margin-bottom: 8px;
  }

  .availability-card--calendar .booking-field {
    padding: 8px 12px;
  }

  .availability-calendar {
    margin-top: 6px;
    padding: 8px 8px 6px;
  }

  .calendar-day {
    min-height: 32px;
    height: 32px;
    font-size: 0.74rem;
  }

  .calendar-toolbar button {
    width: 30px;
    height: 30px;
  }

  .availability-card--calendar .booking-reassurance {
    margin-top: 6px;
    font-size: 0.68rem;
  }
}

/* ---- 0.6.7: spotlight rail hugs its tightened content ---- */

.v4-collection .stay-card .guest-spotlight {
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 14px !important;
}

/* ---- compact availability card: whole booking box fits one desktop screen ----
   Drops: "Your stay" eyebrow (markup). Tightens: card padding, one-row
   check-in/checkout/guests (desktop), calendar chrome, button + trust line. */
.availability-card--calendar { padding: 20px; }
.availability-card--calendar .availability-title { margin-bottom: 8px; }
.booking-grid--live { margin-bottom: 12px; }
@media (min-width: 981px) {
  /* Two even columns since 2026-09-05: guests/pets moved to their own row
     under the calendar, so dates pair up and the panel balances L/R. */
  .booking-grid--live { grid-template-columns: 1fr 1fr; }
  .booking-grid--live .booking-field { min-height: 52px; padding: 8px 12px; }
}
.availability-card--calendar .availability-calendar { margin: 12px 0; padding: 10px 12px; }
.calendar-toolbar { grid-template-columns: 28px minmax(0, 1fr) 28px; }
.calendar-toolbar button { width: 28px; height: 28px; }
.calendar-toolbar strong { font-size: 0.95rem; }
.calendar-weekdays { margin: 8px 0 4px; }
.calendar-weekdays, .calendar-grid { gap: 3px; }
.calendar-message { min-height: 0; margin: 8px 0 0; }
.availability-card--calendar .availability-submit { padding-top: 12px; padding-bottom: 12px; }
.booking-reassurance { margin-top: 8px; font-size: 0.66rem; }

/* ---- 2026-08-08: balance long guest quotes ----
   The card ticker (.gq-text) was center-aligned inside a legacy -webkit-box
   line-clamp: long quotes wrapped greedily AND text-wrap:balance is ignored
   in -webkit-box layout, leaving a one-word orphan second line. Render as a
   plain block with a 2-line cap so balance can do its job. The stay-page
   slider quote gets balance directly. */
.gq-text {
  display: block;
  max-height: calc(2 * 1.42em);
  overflow: hidden;
  text-wrap: balance;
}
.guest-quote blockquote {
  text-wrap: balance;
}
/* ICW footer settings/language modal — ported from the locally preserved WW1
 * (GuidesGQ) implementation under owner authorization task_26d4bbd4dc555fde.
 * Source: references/ww1-footer-modal-cf62906f/theme.css
 *   sha256 90617ae4bde41a8db58a2e4250f90c5cf6e7ed37f01a16c1c5c5db435b5c55b1
 *   footer controls 190-345 | modal/scrim/options/actions/mobile 346-523
 * bound GGQ commit cf62906faf6f1576b9fe802cd84b30697310922b
 * No licence claim is made; reuse rests on the owner authorization above.
 */

:root {
  --icwftr-bg: #ffffff;
  --icwftr-fg: #1c1b19;
  --icwftr-muted: #6b6660;
  --icwftr-line: rgba(28, 27, 25, 0.14);
  --icwftr-accent: #a9713f;
  /* Solid-fill accent for filled controls. The brand accent at #a9713f gives
     only 4.10:1 against white, which fails WCAG AA for normal text, so filled
     buttons use a darker copper. Found by independent audit after this shipped;
     the original white-on-#a9713f was a real live accessibility defect. */
  --icwftr-accent-solid: #7d5029;
  --icwftr-on-accent: #ffffff;
  --icwftr-panel: #fdfbf7;
  --icwftr-scrim: rgba(24, 22, 20, 0.52);
}

html[data-icw-theme="dark"] {
  --icwftr-bg: #171614;
  --icwftr-fg: #f2efe9;
  --icwftr-muted: #a9a49c;
  --icwftr-line: rgba(242, 239, 233, 0.16);
  --icwftr-accent: #d09a63;
  /* In dark the accent is light, so white-on-accent collapsed to 2.48:1. Dark
     ink on the same accent gives 7.31:1 (AAA). */
  --icwftr-accent-solid: #d09a63;
  --icwftr-on-accent: #171614;
  --icwftr-panel: #201e1b;
  --icwftr-scrim: rgba(0, 0, 0, 0.62);
}

/* ---------- footer controls ----------
 * These sit INSIDE the host page's footer, whose background is dark on the
 * live site and may differ per page family. Hard-coding a foreground colour
 * here produced dark-on-dark, effectively invisible controls. They therefore
 * inherit `currentColor` from whatever footer they are mounted in, and derive
 * their borders from it, so contrast follows the host surface automatically
 * in both light and dark contexts. The modal panel keeps its own tokens
 * because it paints its own surface.
 */

.icwftr-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 16px 24px;
}

.icwftr-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 999px;
  padding: 8px 16px;
  color: inherit;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.icwftr-btn:hover { border-color: currentColor; opacity: 0.82; }
.icwftr-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

.icwftr-btn-label { white-space: nowrap; }

.icwftr-icons { display: inline-flex; align-items: center; gap: 7px; }
.icwftr-icon { display: inline-flex; align-items: center; }
.icwftr-icon svg { width: 16px; height: 16px; display: block; }
.icwftr-sep { color: inherit; opacity: 0.55; }
.icwftr-han { font-size: 13px; line-height: 1; }
.icwftr-latin { font-size: 12px; line-height: 1; margin-left: 1px; }
.icwftr-globe { font-size: 15px; line-height: 1; }

.icwftr-static { display: flex; gap: 10px; font-size: 12px; }
.icwftr-static a { color: inherit; opacity: 0.72; text-decoration: none; letter-spacing: 0.08em; }
.icwftr-static a:hover { opacity: 1; text-decoration: underline; }

/* ---------- scrim + modal ---------- */

.icwftr-scrim {
  position: fixed;
  inset: 0;
  background: var(--icwftr-scrim);
  z-index: 20000;
  /* The modal covers the full viewport at a higher layer, so the scrim is
     never the hit target. It is purely the visual dim; outside-click closing
     is handled by the modal's own backdrop listener. Declaring this stops a
     future reader assuming the scrim is interactive. */
  pointer-events: none;
}
.icwftr-scrim[hidden] { display: none; }

.icwftr-modal {
  position: fixed;
  inset: 0;
  z-index: 20001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.icwftr-modal[hidden] { display: none; }

.icwftr-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--icwftr-panel);
  color: var(--icwftr-fg);
  border: 1px solid var(--icwftr-line);
  border-radius: 16px;
  padding: 30px 28px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.icwftr-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--icwftr-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.icwftr-close:hover { color: var(--icwftr-fg); }
.icwftr-close:focus-visible { outline: 3px solid var(--icwftr-accent); outline-offset: 2px; }

.icwftr-title {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.icwftr-section {
  margin: 20px 0 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--icwftr-muted);
}

/* ---------- options ---------- */

.icwftr-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.icwftr-options--theme { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.icwftr-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 13px;
  background: transparent;
  border: 1px solid var(--icwftr-line);
  border-radius: 11px;
  color: var(--icwftr-fg);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.icwftr-option:hover:not([disabled]) { border-color: var(--icwftr-accent); }
.icwftr-option:focus-visible { outline: 3px solid var(--icwftr-accent); outline-offset: 2px; }

.icwftr-option--selected {
  border-color: var(--icwftr-accent);
  background: color-mix(in srgb, var(--icwftr-accent) 12%, transparent);
}

/* Disabled locales: visible, greyed, not activatable, not focusable.
   No "coming soon" or equivalent copy is rendered anywhere. */
.icwftr-option--off,
.icwftr-option[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.icwftr-flag { font-size: 15px; line-height: 1; }
.icwftr-label { line-height: 1.25; }

.icwftr-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

.icwftr-done {
  padding: 10px 22px;
  border: 1px solid var(--icwftr-accent-solid);
  border-radius: 999px;
  background: var(--icwftr-accent-solid);
  color: var(--icwftr-on-accent);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.icwftr-done:hover { filter: brightness(1.06); }
.icwftr-done:focus-visible { outline: 3px solid var(--icwftr-fg); outline-offset: 2px; }

/* ---------- mobile containment ---------- */

@media (max-width: 560px) {
  .icwftr-modal { padding: 12px; align-items: flex-end; }
  .icwftr-panel {
    max-width: none;
    max-height: calc(100vh - 24px);
    border-radius: 16px 16px 0 0;
    padding: 26px 18px 20px;
  }
  .icwftr-options { grid-template-columns: 1fr; }
  .icwftr-options--theme { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .icwftr-controls { gap: 12px; padding: 16px 12px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .icwftr-btn, .icwftr-option { transition: none; }
}

@media print {
  .icwftr-controls, .icwftr-scrim, .icwftr-modal { display: none !important; }
}

/* TECH-027 Stage 6 — print forces light tokens regardless of theme */
@media print {
  :root,
  html[data-icw-theme="dark"] {
    --paper: #ffffff;
    --paper-deep: #f7f2eb;
    --ink: #1c1b19;
    --ink-soft: #554b44;
    --muted: #786d65;
    --line: #ded3c6;
    --cream: #fffdf9;
    --cream-rgb: 255, 253, 249;
    --copper: #9f572d;
    --copper-dark: #7e3e1d;
    --sage: #667260;
    --sage-pale: #e5e9df;
    --on-accent: #ffffff;
  }
}

/* TECH-027 RTL: keep skip-link on the inline-start edge in /ar/ */
[dir="rtl"] .skip-link {
  left: auto;
  right: 10px;
}
[dir="rtl"] .icwftr-latin {
  margin-left: 0;
  margin-right: 1px;
}

/* UX-001 light-mode event roles. The Events page mixes light paper controls with an
 * always-dark attribution band, so one global muted color cannot serve both contexts. */
html .events-year-v3 .events-month-rail span {
  opacity: 1;
}

html .events-card-v2 .events-attribution {
  color: #a9a49c;
}


/* icw: machine-translation disclosure note */
.gq-note {
  margin: 6px 0 0;
  text-align: center;
  color: var(--muted);
  /* Subordinate to the 16px quote it annotates, but this states where the
     text came from, so it has to stay comfortably readable rather than
     shrinking to the same scale as the date line. */
  font-size: 0.72rem;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
 * "Where you'll be" — approximate-area map (icw-v4-preview/includes/area-map.php)
 *
 * The image is a build-time render, not a live map widget: no vendor JS, no
 * tile requests at page load (TECH-057). It is a plain <img>, so width/height
 * plus aspect-ratio reserve the box and it cannot shift layout while it loads.
 * ------------------------------------------------------------------------- */
.area-map {
  margin: 0;
}

.area-map-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 15 / 8;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* Shown before the bytes land, so the reserved box is paper, not white. */
  background: var(--paper-deep);
}

.area-map-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-top: 14px;
}

.area-map-place {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.area-map-note {
  flex: 1 1 260px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.area-map-credit {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

/* Attribution is a licence condition, so it inherits the caption colour rather
   than the link colour: it must stay legible, never decorative. */
.area-map-credit a {
  color: inherit;
  text-underline-offset: 2px;
}

/* The OSM raster is a light-mode artwork. Rather than ship a second set of
   images, tone the one render down so it sits on the dark surface instead of
   glaring off it. Deliberately mild — street names have to stay readable. */
html[data-icw-theme="dark"] .area-map-image {
  filter: brightness(0.78) saturate(0.78) contrast(1.06);
  border-color: var(--line);
}

@media (max-width: 720px) {
  .area-map-caption {
    gap: 8px 12px;
  }

  .area-map-note {
    flex-basis: 100%;
    font-size: 0.84rem;
  }
}