/* ==========================================================================
   Giants Ridge — wireframe design system
   Greyscale structure. One accent colour, and the accent SHIFTS BY SEASON so
   the Season Mode mechanic reads at a glance. Accent is reserved for things
   that navigate, convert, or carry live status. Nothing decorative is coloured.
   ========================================================================== */

:root {
  --ink:        #16181c;
  --body:       #40454e;
  --muted:      #6f7681;
  --faint:      #9aa1ab;
  --line:       #d7dae0;
  --line-soft:  #e7e9ed;
  --bg:         #ffffff;
  --bg-alt:     #f5f6f8;
  --bg-deep:    #eceef1;
  --ph:         #e2e5e9;   /* placeholder image fill */
  --ph-ink:     #8a919b;
  --ph-dark:    #6d747e;   /* stands in for photography behind white type */
  --ph-dark-ink:#c9ced5;

  --ok:         #2f7d4f;
  --warn:       #9a6a10;
  --stop:       #a33b32;

  --r:      10px;
  --r-lg:   16px;
  --r-pill: 999px;

  --w:      1200px;
  --w-text: 760px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --shadow:    0 1px 2px rgba(16,18,22,.05), 0 4px 14px rgba(16,18,22,.06);
  --shadow-lg: 0 12px 48px rgba(16,18,22,.18);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* overwritten per season below */
  --accent:      #2563eb;
  --accent-deep: #1a49b8;
  --accent-soft: #eaf0fe;
  --accent-line: #bed0fb;
}

/* --- Season accent tokens ------------------------------------------------ */
html[data-season="winter"] {
  --accent:      #2563eb;
  --accent-deep: #1a49b8;
  --accent-soft: #eaf0fe;
  --accent-line: #bed0fb;
}
html[data-season="shoulder"] {
  --accent:      #7a5bbd;
  --accent-deep: #5d4396;
  --accent-soft: #f2edfa;
  --accent-line: #d8caf0;
}
html[data-season="summer"] {
  --accent:      #b5551f;
  --accent-deep: #8c4017;
  --accent-soft: #fbeee6;
  --accent-line: #f0cdb4;
}

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

/* Components below set display:flex/grid, which silently beats the UA rule for
   [hidden]. The season engine and the report filters both toggle .hidden, so
   this has to win. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { color: var(--ink); margin: 0 0 var(--s3); line-height: 1.2; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: clamp(30px, 5vw, 46px); }
h2 { font-size: clamp(23px, 3.2vw, 31px); }
h3 { font-size: clamp(18px, 2.2vw, 21px); }
h4 { font-size: 16px; }
p  { margin: 0 0 var(--s4); }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.15em; }
li { margin-bottom: var(--s2); }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--s6) 0; }

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

.skip-link {
  position: absolute; left: var(--s4); top: -60px; z-index: 999;
  background: var(--ink); color: #fff; padding: var(--s3) var(--s4);
  border-radius: var(--r); transition: top .15s;
}
.skip-link:focus { top: var(--s4); }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--s5); }
.wrap--text { max-width: var(--w-text); }

.section { padding: var(--s8) 0; }
.section--tight { padding: var(--s7) 0; }
.section--alt  { background: var(--bg-alt); }
.section--deep { background: var(--bg-deep); }

.section-head { margin-bottom: var(--s6); max-width: 720px; }
.section-head p { margin-bottom: 0; color: var(--muted); }
.section-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s5); max-width: none; flex-wrap: wrap;
}

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--s2);
}
.lead { font-size: 18px; color: var(--body); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: var(--s3) var(--s5);
  border: 1px solid transparent; border-radius: var(--r);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  text-decoration: none !important; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn--primary   { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }
.btn--secondary { background: #fff; color: var(--accent); border-color: var(--accent-line); }
.btn--secondary:hover { background: var(--accent-soft); }
.btn--ghost     { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--bg-alt); }
.btn--sm  { min-height: 38px; padding: var(--s2) var(--s4); font-size: 14px; }
.btn--lg  { min-height: 56px; padding: var(--s4) var(--s6); font-size: 17px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

.link-arrow { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.link-arrow::after { content: "→"; transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --- Placeholder media (names the asset the client needs to supply) ------- */
.ph {
  position: relative; background: var(--ph); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--ph-ink); text-align: center;
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.5) 0 1px, transparent 1px 9px);
}
.ph::after {
  content: attr(data-note);
  font-family: var(--mono); font-size: 11px; line-height: 1.45;
  letter-spacing: .02em; padding: var(--s3) var(--s4); max-width: 90%;
}
.ph--16x9  { aspect-ratio: 16 / 9; }
.ph--4x3   { aspect-ratio: 4 / 3; }
.ph--1x1   { aspect-ratio: 1 / 1; }
.ph--3x4   { aspect-ratio: 3 / 4; }
.ph--wide  { aspect-ratio: 21 / 9; }
.ph--hero  { aspect-ratio: 21 / 9; min-height: 340px; border-radius: 0; }
.ph--icon  { width: 40px; height: 40px; border-radius: 8px; flex: 0 0 auto; }
.ph--icon::after { content: attr(data-note); font-size: 15px; letter-spacing: 0; padding: 0; }
.ph--avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.ph--avatar::after { font-size: 10px; padding: 0; }

/* --- Grids --------------------------------------------------------------- */
.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
.split--sidebar { grid-template-columns: minmax(0,1fr) 340px; align-items: start; }

@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--sidebar { grid-template-columns: 1fr; gap: var(--s6); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .section { padding: var(--s7) 0; }
  .wrap { padding: 0 var(--s4); }
}

/* --- Cards --------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.card:hover, .card--link:hover { border-color: var(--accent-line); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.card__body { padding: var(--s5); flex: 1; display: flex; flex-direction: column; }
.card__body > :last-child { margin-bottom: 0; }
.card__title { font-size: 18px; margin-bottom: var(--s2); color: var(--ink); }
.card__meta { font-size: 13px; color: var(--muted); margin-bottom: var(--s2); }
.card__text { font-size: 14.5px; color: var(--muted); margin-bottom: var(--s4); }
.card__foot { margin-top: auto; padding-top: var(--s3); }
.card--flat { border-radius: var(--r); }
.card--pad  { padding: var(--s5); }

/* --- Tags / pills / status ---------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--bg-deep); color: var(--muted); white-space: nowrap;
}
.tag--accent  { background: var(--accent-soft); color: var(--accent-deep); }
.tag--open    { background: #e8f4ec; color: var(--ok); }
.tag--limited { background: #fbf2dd; color: var(--warn); }
.tag--closed  { background: #f8e9e7; color: var(--stop); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

.dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* --- Utility bits -------------------------------------------------------- */
.stack > * + * { margin-top: var(--s4); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny  { font-size: 12.5px; }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   SEASON MODE CONTROL — prototype affordance
   In production this is a WordPress dashboard setting (RFP §5.1). It is
   exposed here, deliberately styled as a tool and not as site chrome, so
   reviewers can flip modes themselves.
   ========================================================================== */
.proto-bar {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink); color: #fff;
  border-bottom: 2px dashed rgba(255,255,255,.28);
}
.proto-bar__in {
  max-width: var(--w); margin: 0 auto; padding: var(--s2) var(--s5);
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
}
.proto-bar__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.6); display: flex; align-items: center; gap: var(--s2);
}
.proto-bar__label b { color: #fff; font-weight: 700; letter-spacing: .06em; }
.proto-bar__note { font-size: 12px; color: rgba(255,255,255,.55); margin-left: auto; }
.proto-bar__note a { color: rgba(255,255,255,.9); text-decoration: underline; }

.seg {
  display: inline-flex; background: rgba(255,255,255,.11);
  border-radius: var(--r-pill); padding: 3px; gap: 2px;
}
.seg__btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72);
  padding: 6px 15px; border-radius: var(--r-pill); min-height: 34px;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s;
}
.seg__btn:hover { color: #fff; background: rgba(255,255,255,.09); }
.seg__btn[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ==========================================================================
   ALERT BAR — global block, staff-editable, three message types (RFP §5.4)
   ========================================================================== */
.alert-bar { background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); color: var(--ink); }
.alert-bar[data-kind="urgent"] { background: #fbeceb; border-bottom-color: #f0c6c1; }
.alert-bar[data-kind="promo"]  { background: var(--ink); border-bottom-color: var(--ink); color: #fff; }
.alert-bar[data-kind="promo"] .alert-bar__kind { background: rgba(255,255,255,.16); color: #fff; }
.alert-bar[data-kind="promo"] a { color: #fff; }
.alert-bar[data-kind="promo"] .alert-bar__x { color: rgba(255,255,255,.7); }
.alert-bar__in {
  max-width: var(--w); margin: 0 auto; padding: var(--s3) var(--s5);
  display: flex; align-items: center; gap: var(--s3); font-size: 14px;
}
.alert-bar__kind {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: rgba(0,0,0,.07); padding: 3px 9px; border-radius: var(--r-pill); flex: 0 0 auto;
}
.alert-bar[data-kind="urgent"] .alert-bar__kind { background: #f0c6c1; color: #7d2a22; }
.alert-bar__msg { flex: 1; min-width: 0; }
.alert-bar__msg a { text-decoration: underline; font-weight: 600; }
.alert-bar__x {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--muted); padding: 4px 8px; flex: 0 0 auto;
}

/* ==========================================================================
   HEADER — Layer 1 nav + Layer 3 utility + persistent Layer 2 Book CTA
   ========================================================================== */
.site-head {
  position: sticky; top: var(--stick, 0px); z-index: 50;
  background: #fff; border-bottom: 1px solid var(--line-soft);
}

.util-strip { border-bottom: 1px solid var(--line-soft); background: var(--bg-alt); }
.util-strip__in {
  max-width: var(--w); margin: 0 auto; padding: 0 var(--s5);
  display: flex; align-items: center; gap: var(--s5); height: 38px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.util-strip__in::-webkit-scrollbar { display: none; }
.util-strip__mode {
  flex: 0 0 auto; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-deep); display: inline-flex; align-items: center; gap: 6px;
}
.util-strip__mode .dot { color: var(--accent); }
.util-links { display: flex; gap: var(--s4); margin-left: auto; flex: 0 0 auto; }
.util-links a {
  font-size: 13px; color: var(--body); font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.util-links a:hover { color: var(--accent); text-decoration: none; }

.head-main {
  max-width: var(--w); margin: 0 auto; padding: 0 var(--s5);
  display: flex; align-items: center; gap: var(--s5); min-height: 72px;
}
.logo { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
.logo__mark {
  width: 40px; height: 40px; border-radius: 9px; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 800; letter-spacing: -.03em;
}
.logo__txt { line-height: 1.15; }
.logo__txt b { display: block; font-size: 16px; color: var(--ink); font-weight: 750; letter-spacing: -.02em; }
.logo__txt span { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .07em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: var(--s1); margin-left: var(--s5); }
.nav__item { position: relative; }
.nav__top {
  appearance: none; background: none; border: 0; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--s3) var(--s3); font-size: 15px; font-weight: 600; color: var(--ink);
  border-radius: var(--r); min-height: 44px; text-decoration: none;
}
.nav__top:hover, .nav__item--open .nav__top { background: var(--bg-alt); text-decoration: none; }
.nav__top::after { content: "▾"; font-size: 10px; color: var(--faint); transition: transform .15s; }
.nav__top[data-nochild]::after { content: none; }
.nav__item--open .nav__top::after { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 300px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: var(--s3); display: none; z-index: 20;
}
.nav__item--open .nav__panel { display: block; }
.nav__panel--wide { min-width: 560px; display: none; }
.nav__item--open .nav__panel--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* Grouped panel: one column per group, so a group's items stay together
   instead of wrapping across the fold. */
.nav__panel--cols { min-width: 580px; display: none; }
.nav__item--open .nav__panel--cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.nav__panel--cols .nav__group-title { padding-left: var(--s3); }

.nav__link {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r); color: var(--ink); font-size: 14.5px; font-weight: 500;
}
.nav__link:hover { background: var(--bg-alt); text-decoration: none; }
.nav__link small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.nav__link .tag { margin-left: auto; }
.nav__group-title {
  grid-column: 1 / -1; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); padding: var(--s3) var(--s3) var(--s2);
}
/* Season emphasis: in-season items lead and are marked. */
.nav__link--lead { background: var(--accent-soft); }
.nav__link--lead:hover { background: var(--accent-line); }
.nav__link--off { opacity: .62; }

.head-actions { display: flex; align-items: center; gap: var(--s3); margin-left: auto; flex: 0 0 auto; }
.head-search {
  appearance: none; background: var(--bg-alt); border: 1px solid var(--line-soft); cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--r); font-size: 16px; color: var(--body);
}
.head-search:hover { border-color: var(--line); }

.burger {
  display: none; appearance: none; background: #fff; border: 1px solid var(--line);
  width: 46px; height: 46px; border-radius: var(--r); cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.burger span { display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; }

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: flex; }
  .util-links a:nth-child(n+4) { display: none; }
}
@media (max-width: 620px) {
  .head-main { min-height: 62px; gap: var(--s3); }
  .logo__txt span { display: none; }
  .head-search { display: none; }
  .util-strip__in { gap: var(--s4); }
  .proto-bar__note { display: none; }
  .proto-bar__in { padding: var(--s2) var(--s4); gap: var(--s3); }
  .proto-bar__label { font-size: 9.5px; }
}

/* --- Mobile drawer: shallow, thumb-friendly (RFP §5.3) ------------------- */
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(16,18,22,.5); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw);
  background: #fff; z-index: 91; transform: translateX(100%);
  transition: transform .22s ease; display: flex; flex-direction: column;
}
.drawer.is-open { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft); flex: 0 0 auto;
}
.drawer__title { font-weight: 700; color: var(--ink); }
.drawer__x { appearance: none; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s4) var(--s5) var(--s7); -webkit-overflow-scrolling: touch; }
.drawer__foot { flex: 0 0 auto; padding: var(--s4) var(--s5); border-top: 1px solid var(--line-soft); background: var(--bg-alt); }

.acc__btn {
  appearance: none; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  font: inherit; font-size: 17px; font-weight: 650; color: var(--ink); cursor: pointer;
  padding: var(--s4) 0; display: flex; align-items: center; justify-content: space-between; min-height: 56px;
}
.acc__btn::after { content: "+"; font-size: 20px; color: var(--faint); font-weight: 400; }
.acc__btn[aria-expanded="true"]::after { content: "−"; }
.acc__panel { display: none; padding: var(--s2) 0 var(--s4); }
.acc__panel.is-open { display: block; }
.acc__panel a {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s3); min-height: 48px; border-radius: var(--r);
  color: var(--body); font-size: 15.5px;
}
.acc__panel a:hover { background: var(--bg-alt); text-decoration: none; }
.acc__panel a.is-lead { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }

/* ==========================================================================
   SNAP BAR — the persistent floating element the RFP asks for in §2.3
   ========================================================================== */
.snap {
  position: fixed; z-index: 45; right: var(--s5); bottom: var(--s5);
  display: flex; gap: var(--s2); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.snap__btn {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px;
  border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--ink); min-height: 44px;
}
.snap__btn:hover { background: var(--bg-alt); text-decoration: none; }
.snap__btn--go { background: var(--accent); color: #fff; }
.snap__btn--go:hover { background: var(--accent-deep); }
.snap__ico { font-size: 15px; }
@media (max-width: 620px) {
  .snap { left: var(--s3); right: var(--s3); bottom: var(--s3); border-radius: var(--r-lg); padding: 6px; }
  .snap__btn { flex: 1; justify-content: center; border-radius: var(--r); padding: 12px 6px; font-size: 13.5px; }
  .snap__btn span:not(.snap__ico) { display: none; }
  .snap__btn--go span:not(.snap__ico) { display: inline; }
  body { padding-bottom: 76px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot { background: var(--ink); color: rgba(255,255,255,.68); padding: var(--s8) 0 var(--s5); margin-top: var(--s8); }
.site-foot h4 { color: #fff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s4); }
.site-foot a { color: rgba(255,255,255,.68); font-size: 14.5px; }
.site-foot a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6); }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: var(--s3); }
.foot-sub { display: flex; gap: var(--s2); margin-top: var(--s4); }
.foot-sub input {
  flex: 1; min-width: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r); color: #fff; padding: var(--s3) var(--s4); font: inherit; font-size: 14px; min-height: 46px;
}
.foot-sub input::placeholder { color: rgba(255,255,255,.42); }
.foot-bottom {
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; font-size: 13px;
}
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--s4); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; gap: var(--s5); } }

/* ==========================================================================
   HERO — rotating, season-aware, every profit centre represented (RFP §2.1)
   ========================================================================== */
.hero { position: relative; background: var(--bg-deep); }
.hero__stage { position: relative; min-height: 580px; }
.hero__slide {
  position: absolute; inset: 0; display: none; align-items: flex-end;
}
.hero__slide.is-active { display: flex; }
.hero__media { position: absolute; inset: 0; }
.hero__media .ph { height: 100%; border-radius: 0; }
.hero__media .ph {
  background-color: var(--ph-dark); color: var(--ph-dark-ink);
  align-items: flex-start; justify-content: flex-end;
}
.hero__media .ph::after { padding: var(--s4) var(--s5); opacity: .8; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,18,22,.88) 0%, rgba(16,18,22,.62) 45%, rgba(16,18,22,.34) 100%);
}
.hero__copy {
  position: relative; max-width: var(--w); margin: 0 auto; width: 100%;
  padding: var(--s7) var(--s5) 84px; color: #fff;
}
.hero__copy .eyebrow { color: #fff; opacity: .82; }
.hero__copy h1 { color: #fff; max-width: 15ch; }
.hero__copy p { color: rgba(255,255,255,.86); max-width: 52ch; font-size: 17px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: var(--s4);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  padding: 5px 13px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: #fff;
}
.hero__ctrls {
  position: absolute; bottom: var(--s5); left: 50%; transform: translateX(-50%);
  max-width: var(--w); width: 100%; padding: 0 var(--s5);
  display: flex; align-items: center; gap: var(--s3); z-index: 3;
}
.hero__dots { display: flex; gap: var(--s2); flex: 1; flex-wrap: wrap; }
.hero__dot {
  appearance: none; border: 0; cursor: pointer; background: rgba(255,255,255,.3);
  height: 4px; flex: 1 1 40px; max-width: 90px; border-radius: 2px; padding: 0;
  position: relative; overflow: hidden;
}
.hero__dot[aria-selected="true"] { background: rgba(255,255,255,.85); }
.hero__pause {
  appearance: none; border: 1px solid rgba(255,255,255,.3); background: rgba(16,18,22,.4);
  color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 12px; flex: 0 0 auto; order: -2;
}
.hero__label {
  color: rgba(255,255,255,.72); font-size: 12px; font-family: var(--mono);
  flex: 0 0 auto; order: -1; margin-right: var(--s2);
}
@media (max-width: 620px) {
  .hero__stage { min-height: 520px; }
  .hero__copy { padding: var(--s7) var(--s4) var(--s8); }
  .hero__label { display: none; }
}

/* --- Quick-plan bar sitting under the hero ------------------------------- */
.quickplan { background: var(--ink); }
.quickplan__in {
  max-width: var(--w); margin: 0 auto; padding: var(--s4) var(--s5);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.quickplan__label { color: rgba(255,255,255,.6); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }
.quickplan__opts { display: flex; gap: var(--s2); flex-wrap: wrap; flex: 1; }
.qp-chip {
  appearance: none; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07);
  color: #fff; border-radius: var(--r-pill); padding: 9px 16px; font: inherit; font-size: 14px;
  font-weight: 550; cursor: pointer; min-height: 42px; display: inline-flex; align-items: center; gap: 7px;
}
.qp-chip:hover { background: rgba(255,255,255,.15); text-decoration: none; }

/* ==========================================================================
   RIDGE REPORTS — card/status based, explicitly no tables (RFP §5.5)
   ========================================================================== */
/* The report stamp survives from the old dark report hero; everything else
   about that block is gone now that all three reports use light cards. */
.report-stamp {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s4);
  background: var(--bg-deep); border-radius: var(--r-pill); padding: 7px 15px;
  font-size: 13px; color: var(--body); font-family: var(--mono);
}
.report-stamp .dot { background: var(--ok); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.report-tools {
  display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center;
  padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s6);
}
.report-tools input[type="search"] {
  flex: 1; min-width: 190px; border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s3) var(--s4); font: inherit; font-size: 15px; min-height: 44px;
}
.filter-chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  appearance: none; border: 1px solid var(--line); background: #fff; color: var(--body);
  border-radius: var(--r-pill); padding: 8px 15px; font: inherit; font-size: 13.5px;
  font-weight: 550; cursor: pointer; min-height: 40px;
}
.chip:hover { border-color: var(--accent-line); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.switch { display: inline-flex; align-items: center; gap: var(--s2); font-size: 13.5px; color: var(--body); cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }

.status-card {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: #fff;
  padding: var(--s4) var(--s5); display: flex; align-items: center; gap: var(--s4);
  border-left: 4px solid var(--line);
}
.status-card[data-status="open"]    { border-left-color: var(--ok); }
.status-card[data-status="limited"] { border-left-color: var(--warn); }
.status-card[data-status="closed"]  { border-left-color: var(--stop); background: var(--bg-alt); }
.status-card[data-status="closed"] .status-card__name { color: var(--muted); }
.status-card__name { font-weight: 650; color: var(--ink); font-size: 15.5px; margin-bottom: 2px; }
.status-card__meta { font-size: 13px; color: var(--muted); }
.status-card__main { flex: 1; min-width: 0; }
.status-card__end { flex: 0 0 auto; text-align: right; }
.status-list { display: grid; gap: var(--s3); }

.cond-card {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s5); background: #fff;
}
.cond-card__k { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.cond-card__v { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -.02em; }
.cond-card__s { font-size: 13.5px; color: var(--muted); margin-top: var(--s2); }
.cond-card__ico { font-size: 24px; margin-bottom: var(--s3); }

.meter { height: 8px; background: var(--bg-deep); border-radius: 4px; overflow: hidden; margin-top: var(--s3); }
.meter__fill { height: 100%; background: var(--accent); border-radius: 4px; }

.next-step {
  display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: var(--r-lg); color: var(--ink);
}
.next-step:hover { text-decoration: none; border-color: var(--accent); }
.next-step__t { display: block; font-weight: 650; color: var(--ink); }
.next-step__s { display: block; font-size: 13.5px; color: var(--muted); }
.next-step::after { content: "→"; margin-left: auto; color: var(--accent); font-weight: 700; }

/* ==========================================================================
   BOOK PANEL — Layer 2, the short path to purchase (RFP §2.2)
   ========================================================================== */
.bk-scrim { position: fixed; inset: 0; background: rgba(16,18,22,.55); z-index: 95; opacity: 0; pointer-events: none; transition: opacity .2s; }
.bk-scrim.is-open { opacity: 1; pointer-events: auto; }
.bk {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw);
  background: #fff; z-index: 96; transform: translateX(100%); transition: transform .24s ease;
  display: flex; flex-direction: column;
}
.bk.is-open { transform: none; }
.bk__head { flex: 0 0 auto; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: var(--s3); }
.bk__title { font-weight: 700; color: var(--ink); flex: 1; font-size: 17px; }
.bk__x { appearance: none; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; }
.bk__body { flex: 1; overflow-y: auto; padding: var(--s5); -webkit-overflow-scrolling: touch; }
.bk__foot { flex: 0 0 auto; padding: var(--s4) var(--s5); border-top: 1px solid var(--line-soft); background: #fff; }

.pick {
  display: flex; align-items: center; gap: var(--s4); width: 100%; text-align: left;
  appearance: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s4); font: inherit; cursor: pointer; margin-bottom: var(--s3); min-height: 68px;
}
.pick:hover { border-color: var(--accent); background: var(--accent-soft); }
.pick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pick__t { display: block; font-weight: 650; color: var(--ink); font-size: 15.5px; }
.pick__s { display: block; font-size: 13px; color: var(--muted); }
.pick__main { flex: 1; min-width: 0; }
.pick__price { font-weight: 650; color: var(--ink); font-size: 15px; white-space: nowrap; }

.field { margin-bottom: var(--s4); }
.field label { display: block; font-size: 13px; font-weight: 650; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4);
  font: inherit; font-size: 15.5px; min-height: 48px; background: #fff; color: var(--ink);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }


.line { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.line:last-child { border-bottom: 0; }
.line b { color: var(--ink); }

.handoff { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); background: var(--bg-alt); font-size: 13.5px; color: var(--muted); }
.handoff b { color: var(--ink); }

/* ==========================================================================
   ITINERARY BUILDER (RFP §2.2)
   ========================================================================== */
.itin { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--s6); align-items: start; }
.itin__side { position: sticky; top: 140px; }
@media (max-width: 960px) { .itin { grid-template-columns: 1fr; } .itin__side { position: static; } }

.pickable {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: #fff; overflow: hidden;
  display: flex; flex-direction: column;
}
.pickable__body { padding: var(--s4); flex: 1; display: flex; flex-direction: column; }
.pickable__t { font-weight: 650; color: var(--ink); margin-bottom: 4px; }
.pickable__s { font-size: 13.5px; color: var(--muted); margin-bottom: var(--s3); flex: 1; }
.pickable.is-added { border-color: var(--accent); }
.pickable.is-added .btn { background: var(--accent); color: #fff; border-color: var(--accent); }

.plan { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.plan__head { background: var(--ink); color: #fff; padding: var(--s4) var(--s5); }
.plan__head b { display: block; font-size: 16px; }
.plan__head span { font-size: 12.5px; color: rgba(255,255,255,.62); }
.plan__body { padding: var(--s4) var(--s5); min-height: 120px; }
.plan__item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.plan__item:last-child { border-bottom: 0; }
.plan__item button { appearance: none; background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 18px; padding: 2px 6px; margin-left: auto; }
.plan__empty { color: var(--muted); font-size: 14px; text-align: center; padding: var(--s5) 0; }
.plan__foot { padding: var(--s4) var(--s5); background: var(--bg-alt); border-top: 1px solid var(--line-soft); }

/* ==========================================================================
   MISC PAGE FURNITURE
   ========================================================================== */
.page-hero { padding: var(--s7) 0 var(--s6); border-bottom: 1px solid var(--line-soft); }
.page-hero--media { padding: 0; border: 0; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: var(--s4); display: flex; gap: var(--s2); flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs em { font-style: normal; color: var(--faint); }
.crumbs b { color: var(--body); font-weight: 600; }

.wf-note {
  border: 1px dashed var(--faint); border-radius: var(--r); padding: var(--s3) var(--s4);
  font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--muted);
  background: var(--bg-alt); margin-bottom: var(--s5);
}
.wf-note b { color: var(--ink); letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; }

.faq { border-top: 1px solid var(--line-soft); }
.faq__q {
  appearance: none; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  font: inherit; font-size: 16.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  padding: var(--s4) 0; display: flex; gap: var(--s4); align-items: center; justify-content: space-between; text-align: left;
}
.faq__q::after { content: "+"; font-size: 20px; color: var(--faint); font-weight: 400; flex: 0 0 auto; }
.faq__q[aria-expanded="true"]::after { content: "−"; }
.faq__a { display: none; padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.faq__a.is-open { display: block; }

.cta-band { background: var(--ink); color: #fff; padding: var(--s8) 0; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.72); max-width: 55ch; margin: 0 auto var(--s5); }
.cta-band .btn-row { justify-content: center; }

.season-only-note {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--mono);
  color: var(--accent-deep); background: var(--accent-soft); border-radius: var(--r-pill);
  padding: 3px 10px; letter-spacing: .04em;
}

/* Off-season content stays reachable but visually recedes (RFP §5.1: both
   seasons always represented; the mode governs emphasis, not availability). */
.offseason { opacity: .72; }
.offseason .card { background: var(--bg-alt); }

/* ==========================================================================
   RIDGE REPORT CARDS
   The conditions-card module format from the response deck (slide 27), on a
   light surface: status-coloured header bar with a state pill, hairline metric
   grid with oversized numerals, difficulty meters, status rows and a
   full-width call to action.

   Card bodies are white. The deck mocked these dark, but a dark panel on a
   light page fights the rest of the site and reads worse outdoors in daylight,
   which is the condition these pages are actually used in. The header bar
   keeps its status colour, which is where the signal lives.
   ========================================================================== */

.rc-deck {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  align-items: start;
}

.rc {
  --rc-bg:   #ffffff;
  --rc-bg2:  var(--bg-alt);
  --rc-line: var(--line-soft);
  --rc-go:   var(--ok);
  --rc-dim:  var(--muted);
  --rc-head: #2bbd60;
  --rc-ink:  #06220f;

  background: var(--rc-bg); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; color: var(--body);
  display: flex; flex-direction: column;
}
.rc[data-tone="limited"] { --rc-head: #e0a41f; --rc-ink: #2a1c00; }
.rc[data-tone="closed"]  { --rc-head: #e0604a; --rc-ink: #2c0c06; }
.rc[data-tone="neutral"] { --rc-head: var(--bg-alt); --rc-ink: var(--ink); }
.rc--wide { grid-column: 1 / -1; }

.rc__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px var(--s4); background: var(--rc-head); color: var(--rc-ink);
}
.rc[data-tone="neutral"] .rc__head { border-bottom: 1px solid var(--line-soft); }
.rc__title {
  font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.rc__pill {
  margin-left: auto; flex: 0 0 auto;
  background: rgba(255,255,255,.82); color: var(--rc-ink);
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
}
.rc[data-tone="neutral"] .rc__pill {
  background: transparent; color: var(--rc-dim); font-weight: 600;
  letter-spacing: .03em; padding: 0; text-transform: none; font-size: 11.5px;
}

/* --- metric grid --------------------------------------------------------- */
.rc__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.rc__grid--1 { grid-template-columns: 1fr; }
.rc__grid--1 .rc__cell { border-right: 0; }
.rc__grid--3 { grid-template-columns: repeat(3, 1fr); }
.rc__cell {
  padding: var(--s4); border-right: 1px solid var(--rc-line); border-bottom: 1px solid var(--rc-line);
  min-width: 0;
}
.rc__grid--2 .rc__cell:nth-child(2n), .rc__grid--3 .rc__cell:nth-child(3n) { border-right: 0; }
.rc__grid--1row .rc__cell { border-bottom: 0; }
.rc__k {
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--rc-dim); margin-bottom: 7px;
}
.rc__v {
  font-size: 29px; font-weight: 800; letter-spacing: -.025em; line-height: 1;
  color: var(--ink); display: flex; align-items: baseline; gap: 1px;
}
.rc__v small { font-size: 14px; font-weight: 700; color: var(--rc-dim); letter-spacing: 0; }
.rc__v--go { color: var(--rc-go); }
.rc__v em { font-style: normal; font-size: 19px; margin-left: 6px; }
.rc__s { font-size: 12px; color: var(--rc-dim); margin-top: 7px; line-height: 1.4; }

/* --- difficulty meters --------------------------------------------------- */
.rc__meters { padding: var(--s4); display: grid; gap: var(--s3); border-bottom: 1px solid var(--rc-line); }
.rc__meter-top { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rc__meter-top b { margin-left: auto; font-weight: 800; font-size: 13px; }
.rc__meter-top b i { font-style: normal; color: var(--rc-dim); font-weight: 700; }
.rc__track { height: 5px; background: var(--bg-deep); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.rc__fill { height: 100%; border-radius: 3px; }

/* Difficulty glyphs use the standard trail-marking shapes, not colour alone. */
.dif { width: 11px; height: 11px; flex: 0 0 auto; }
.dif--green  { background: #2f9e52; border-radius: 50%; }
.dif--blue   { background: #2f6fd0; }
.dif--black  { background: var(--ink); transform: rotate(45deg); }
.dif--park   { background: #c98a10; border-radius: 3px; }
.dif--nordic { background: #7c5cbf; border-radius: 50%; }
.dif--fat    { background: #1a93a5; border-radius: 3px; }
.dif--lift   { background: #7a838c; border-radius: 50%; }
.dif--food    { background: #c98a10; border-radius: 50%; }
.dif--amenity { background: #1a93a5; border-radius: 50%; }

/* --- summary chips ------------------------------------------------------- */
.rc__chips {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
  padding: var(--s4); border-bottom: 1px solid var(--rc-line);
}
.rc__chip { border: 1px solid; border-radius: 9px; padding: var(--s3); text-align: center; }
.rc__chip b { display: block; font-size: 17px; font-weight: 800; letter-spacing: .01em; }
.rc__chip span { display: block; font-size: 11.5px; color: var(--rc-dim); margin-top: 2px; }
.rc__chip--open   { border-color: #b7dcc4; background: #eff8f2; }
.rc__chip--open b { color: var(--ok); }
.rc__chip--closed   { border-color: #e6cf9c; background: #fdf6e8; }
.rc__chip--closed b { color: var(--warn); }
.rc--wide .rc__chips { max-width: 560px; }

/* --- forecast strip ------------------------------------------------------ */
.rc__strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2);
  padding: var(--s4); border-bottom: 1px solid var(--rc-line);
}
.rc__tile { border: 1px solid var(--rc-line); border-radius: 9px; padding: 10px 6px; text-align: center; }
.rc__tile b { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rc-dim); }
.rc__tile i { display: block; font-style: normal; font-size: 17px; margin: 7px 0 5px; }
.rc__tile span { font-size: 13px; font-weight: 700; color: var(--ink); }

/* --- status rows --------------------------------------------------------- */
.rc__rows { padding: 0 var(--s4); }
.rc__row {
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px 0; border-bottom: 1px solid var(--rc-line); font-size: 14px;
}
.rc__row:last-child { border-bottom: 0; }
.rc__row-main { flex: 1; min-width: 0; }
.rc__row-name { color: var(--ink); font-weight: 600; }
.rc__row-meta { color: var(--rc-dim); font-size: 12px; margin-top: 2px; }
.rc__st {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.rc__st--open    { color: var(--ok); }
.rc__st--limited { color: var(--warn); }
.rc__st--closed  { color: var(--stop); }
.rc__row[data-status="closed"] .rc__row-name { color: var(--muted); }

/* A linked operation name. It reads as the row title first and a link second,
   so the list still scans as a status list rather than a wall of blue. */
.rc__row-name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rc__row-name a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* Per-row action on "What's open today". A fixed-width column keeps the
   status labels in a straight line whether or not a row has an action. */
.rc__row-go {
  flex: 0 0 122px; display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--accent-line); background: #fff; color: var(--accent);
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none !important; cursor: pointer;
}
.rc__row-go:hover { background: var(--accent-soft); border-color: var(--accent); }
.rc__row-go--none { border: 0; background: none; min-height: 0; pointer-events: none; }

/* On a phone the action drops below the name rather than squeezing it. */
@media (max-width: 620px) {
  .rc__row { flex-wrap: wrap; }
  .rc__row-main { flex: 1 1 60%; }
  .rc__row-go { flex: 0 0 auto; order: 4; margin-left: auto; margin-top: 8px; }
  .rc__row-go--none { display: none; }
}

/* --- note + call to action ----------------------------------------------- */
.rc__note {
  display: flex; gap: var(--s3); align-items: center;
  padding: var(--s4); font-size: 13px; color: var(--body);
  background: var(--bg-alt); border-top: 1px solid var(--rc-line);
}
.rc__note i { font-style: normal; font-size: 16px; flex: 0 0 auto; }
.rc__cta { padding: var(--s4); margin-top: auto; }
.rc-btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 46px; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: var(--accent); color: #fff; text-decoration: none !important;
}
.rc-btn:hover { background: var(--accent-deep); }
.rc-btn--ghost { background: #fff; border-color: var(--accent-line); color: var(--accent); }
.rc-btn--ghost:hover { background: var(--accent-soft); }

/* --- tools --------------------------------------------------------------- */
.rc__tools {
  display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center;
  padding: var(--s4); border-bottom: 1px solid var(--rc-line); background: var(--bg-alt);
}
.rc__tools input[type="search"] {
  flex: 1; min-width: 170px; min-height: 42px;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 10px var(--s3); font: inherit; font-size: 14px;
}
.rc__tools input[type="search"]::placeholder { color: var(--faint); }
.rc-chip {
  appearance: none; background: #fff; border: 1px solid var(--line); color: var(--body);
  border-radius: var(--r-pill); padding: 7px 13px; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; min-height: 38px;
}
.rc-chip:hover { border-color: var(--accent-line); }
.rc-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.rc__switch { display: inline-flex; align-items: center; gap: var(--s2); font-size: 12.5px; color: var(--body); cursor: pointer; }
.rc__switch input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.rc__count { padding: var(--s3) var(--s4) var(--s4); font-size: 12.5px; color: var(--rc-dim); }

@media (max-width: 480px) {
  .rc-deck { grid-template-columns: 1fr; }
  .rc__grid--3 { grid-template-columns: repeat(2, 1fr); }
  .rc__grid--3 .rc__cell:nth-child(3n) { border-right: 1px solid var(--rc-line); }
  .rc__grid--3 .rc__cell:nth-child(2n) { border-right: 0; }
  /* A third cell wrapping alone would leave half the row dead. */
  .rc__grid--3 .rc__cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .rc__v { font-size: 25px; }
}

/* ==========================================================================
   REPORT SECTIONS on the Resort Report
   Golf, bike and the mountain are sections of one page rather than three
   pages. Out of season a section recedes and collapses, but never leaves.
   ========================================================================== */
.rs { border-top: 1px solid var(--line); padding-top: var(--s5); margin-top: var(--s6); }
.rs:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.rs__head {
  appearance: none; width: 100%; background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left; padding: 0 0 var(--s5);
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
  gap: var(--s3); column-gap: var(--s3);
}
.rs__title { font-size: clamp(21px, 2.6vw, 27px); font-weight: 650; color: var(--ink); letter-spacing: -.015em; }
.rs__lead { font-size: 14.5px; color: var(--muted); }
.rs__toggle {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; flex: 0 0 auto; color: var(--body);
}
.rs__toggle::before { content: "−"; font-size: 17px; line-height: 1; }
.rs__head[aria-expanded="false"] .rs__toggle::before { content: "+"; }
.rs__head:hover .rs__toggle { border-color: var(--accent); color: var(--accent); }

.rs__body { display: none; }
.rs__body.is-open { display: block; }

/* Out of season: present, linked, indexable — just not shouting. */
.rs--off .rs__title { color: var(--muted); }
.rs--off .rc { opacity: .78; }

@media (max-width: 720px) {
  .rs__head { grid-template-columns: 1fr auto; row-gap: var(--s2); }
  .rs__title { grid-column: 1; }
  .rs__toggle { grid-column: 2; grid-row: 1; }
  .rs__head .tag { grid-column: 1; justify-self: start; }
  .rs__lead { grid-column: 1 / -1; }
}

/* --- Booking ------------------------------------------------------------- */
.pick__sys {
  display: block; margin-top: 4px; font-size: 11.5px; font-family: var(--mono);
  color: var(--faint); letter-spacing: .01em;
}

/* --- Alerts & notices module -------------------------------------------- */
.rc-deck--lead { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.rc__alerts { padding: 0 var(--s4); }
.rc__alert {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid var(--rc-line);
}
.rc__alert:last-child { border-bottom: 0; }
.rc__alert-main { flex: 1; min-width: 0; }
.rc__alert-kind {
  flex: 0 0 auto; margin-top: 2px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px;
}
.rc__alert-kind--urgent { background: #fadedb; color: #8d3a30; }
.rc__alert-kind--info   { background: var(--accent-soft); color: var(--accent-deep); }
.rc__alert-kind--promo  { background: #fdf6e8; color: var(--warn); }
.rc__alert-t { font-weight: 650; color: var(--ink); font-size: 14.5px; line-height: 1.35; }
.rc__alert-b { font-size: 13px; color: var(--muted); margin-top: 3px; }
.rc__alert-at {
  flex: 0 0 auto; font-size: 11.5px; color: var(--faint);
  font-family: var(--mono); white-space: nowrap; margin-top: 3px;
}

/* The lead block is always open, so its header is a heading, not a control. */
.rs__head--static { cursor: default; grid-template-columns: auto 1fr; }
.rs__head--static:hover .rs__toggle { border-color: var(--line); }

@media (max-width: 520px) {
  .rc__alert { flex-wrap: wrap; }
  .rc__alert-at { margin-left: auto; }
  .rc__alert-main { flex: 1 1 100%; order: 3; }
}

/* ==========================================================================
   BUILD YOUR VISIT — quiz funnel and its result
   ========================================================================== */
.quiz {
  max-width: 720px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; padding: var(--s6) var(--s6) var(--s5);
}
.quiz__bar { display: flex; gap: 5px; margin-bottom: var(--s5); }
.quiz__tick { flex: 1; height: 4px; border-radius: 2px; background: var(--bg-deep); }
.quiz__tick.is-done { background: var(--accent); }
.quiz__count {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s3);
}
.quiz__q { font-size: clamp(22px, 3vw, 29px); margin-bottom: var(--s5); }
.quiz__opts { display: grid; gap: var(--s3); }
.quiz-opt {
  appearance: none; text-align: left; cursor: pointer; font: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s4) var(--s5); min-height: 64px;
  display: flex; flex-direction: column; justify-content: center;
  transition: border-color .12s, background .12s;
}
.quiz-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.quiz-opt.is-picked { border-color: var(--accent); background: var(--accent-soft); }
.quiz-opt__t { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.quiz-opt__s { font-size: 13px; color: var(--muted); margin-top: 3px; }
.quiz__back {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 14px; color: var(--muted); padding: var(--s4) 0 0; margin-top: var(--s3);
}
.quiz__back:hover { color: var(--accent); }

.rec__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap; padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s6);
}
.rec__head h2 { margin-bottom: 0; max-width: 24ch; }
.rec__block + .rec__block { margin-top: var(--s7); }
.rec__title {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s4);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft);
}

@media (max-width: 620px) {
  .quiz { padding: var(--s5) var(--s4) var(--s4); border-radius: var(--r); }
  .quiz-opt { padding: var(--s3) var(--s4); min-height: 58px; }
}

/* --- Compact live strip on the home page --------------------------------- */
.live-strip {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
}
.live-strip__k {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-deep);
}
.live-strip__k .dot { background: var(--ok); animation: pulse 2.4s infinite; }
.live-strip__items {
  display: flex; align-items: center; gap: var(--s5); flex: 1; flex-wrap: wrap; min-width: 0;
}
.live-strip__item {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 13px; color: var(--muted); white-space: nowrap;
}
.live-strip__item b { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.live-strip__go { flex: 0 0 auto; font-size: 14px; font-weight: 650; }

@media (max-width: 760px) {
  .live-strip { gap: var(--s3); padding: var(--s4); }
  /* The base rule wraps; on a phone the row has to scroll sideways instead,
     or four stats become a 230px stack. */
  .live-strip__items {
    gap: var(--s4); flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; flex-basis: 100%;
  }
  .live-strip__items::-webkit-scrollbar { display: none; }
  .live-strip__item b { font-size: 18px; }
  .live-strip__k, .live-strip__go { flex-basis: auto; }
}

/* --- Lodging module on the Things to Do pages --------------------------- */

.stay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s5);
  align-items: start;
}

.stay__feature {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--s5);
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
}

.stay__feature .ph { border-radius: var(--r); }

.stay__lead .tag { align-self: flex-start; }

.stay__name {
  font-size: 23px;
  margin: var(--s3) 0 var(--s2);
}

.stay__why {
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 var(--s3);
}

.stay__rate {
  margin: var(--s3) 0 var(--s4);
  font-size: 15px;
}

.stay__rate b { font-size: 21px; color: var(--ink); }

.stay__side {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
}

.stay__side-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s3);
}

.stay__alt {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.stay__alt:hover { color: var(--accent); text-decoration: none; }

.stay__alt-main { flex: 1 1 auto; min-width: 0; }
.stay__alt-t { display: block; font-weight: 650; font-size: 15px; }
.stay__alt-s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.stay__alt-p {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.stay__pkg {
  margin: var(--s4) 0;
  padding: var(--s3) var(--s4);
  background: var(--accent-soft);
  border-radius: var(--r);
  font-size: 13.5px;
  color: var(--accent-deep);
}

.stay__note { margin: var(--s3) 0 0; }

@media (max-width: 960px) {
  .stay { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .stay__feature { grid-template-columns: 1fr; padding: var(--s4); }
  .stay__side    { padding: var(--s4); }
  /* 4:3 is 460px tall at phone width and pushes the offer below the fold. */
  .stay__feature .ph { aspect-ratio: 16 / 9; }
}
