/* The Family Five — single-page countdown of 5 real family resorts.
   Warm coral/teal/sand palette, Lora + Nunito Sans + IBM Plex Mono.
   Mobile-first: base rules are small-screen, min-width layers on top. */

:root {
  --ff-sand: #faf3e8;
  --ff-sand-deep: #f0e4cf;
  --ff-ink: #2b2420;
  --ff-ink-soft: #5c5148;
  --ff-coral: #e0693f;
  --ff-coral-deep: #b84f2c;
  --ff-teal: #1f5f5b;
  --ff-teal-deep: #163f3c;
  --ff-line: #e2d5bf;
  --ff-font-display: 'Lora', Georgia, serif;
  --ff-font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ff-sand);
  color: var(--ff-ink);
  font-family: var(--ff-font-body);
  font-size: 16px;
  line-height: 1.65;
}

img { max-width: 100%; display: block; }
a { color: var(--ff-teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ff-coral); }

h1, h2, h3 {
  font-family: var(--ff-font-display);
  color: var(--ff-ink);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); }

p { margin: 0 0 1.1em; }

.ff-shell { width: min(100% - 40px, 760px); margin-inline: auto; }
.ff-shell--wide { width: min(100% - 32px, 1000px); margin-inline: auto; }

/* ── Masthead: no sticky header, no nav — this is a single page ────────── */
.ff-masthead { padding: 18px 0; border-bottom: 3px solid var(--ff-coral); }
.ff-masthead__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ff-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ff-ink); }
.ff-brand__mark { flex-shrink: 0; }
.ff-brand__name { font-family: var(--ff-font-display); font-weight: 600; font-size: 1.1rem; }
.ff-masthead__kicker {
  font-family: var(--ff-font-mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ff-ink-soft);
}

/* ── The one photo: full-bleed band directly under the masthead ───────── */
.ff-photoband { position: relative; overflow: hidden; background: var(--ff-teal-deep); }
.ff-photoband img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .ff-photoband img { aspect-ratio: 16 / 7; } }
.ff-photoband__caption {
  position: absolute; right: 12px; bottom: 10px;
  font-family: var(--ff-font-mono); font-size: .68rem; color: rgba(250,243,232,.85);
  background: rgba(22,29,28,.45); padding: 3px 8px;
}

/* ── Intro block ────────────────────────────────────────────────────────── */
.ff-intro { padding: 44px 0 8px; }
.ff-intro__kicker {
  font-family: var(--ff-font-mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ff-coral-deep); display: block; margin-bottom: 10px;
}
.ff-intro__lede { font-size: 1.12rem; color: var(--ff-ink-soft); max-width: 62ch; }

/* ── The countdown: each hotel is a numbered entry, oversized numeral is
   the dominant visual device — no photo cards, no icon grid. ─────────── */
.ff-countdown { padding: 8px 0 8px; }
.ff-entry {
  display: grid; grid-template-columns: auto 1fr; gap: 14px 20px;
  padding: 30px 0; border-top: 1px solid var(--ff-line);
}
.ff-entry:last-child { border-bottom: 1px solid var(--ff-line); }
.ff-entry__num {
  font-family: var(--ff-font-display); font-weight: 600; font-size: clamp(3rem, 12vw, 4.6rem);
  line-height: .85; color: var(--ff-coral); grid-row: span 2;
}
.ff-entry__head { align-self: end; }
.ff-entry__place {
  font-family: var(--ff-font-mono); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ff-teal); display: block; margin-bottom: 4px;
}
.ff-entry__name { margin-bottom: 0; }
.ff-entry__body { grid-column: 2; }
.ff-entry__why {
  font-family: var(--ff-font-mono); font-size: .82rem; color: var(--ff-ink-soft);
  border-left: 2px solid var(--ff-teal); padding-left: 10px; margin: 12px 0 0;
}
@media (min-width: 640px) {
  .ff-entry { grid-template-columns: 110px 1fr; gap: 6px 28px; }
}

/* ── Methodology / closing editorial note ──────────────────────────────── */
.ff-note { padding: 20px 0 46px; border-top: 1px solid var(--ff-line); margin-top: 12px; }
.ff-note h2 { font-size: 1.3rem; }
.ff-note p { color: var(--ff-ink-soft); }

/* ── Footer: brand + one disclaimer line + legal links, nothing more ───── */
.ff-footer { background: var(--ff-teal-deep); color: var(--ff-sand); padding: 26px 0; }
.ff-footer p { color: rgba(250,243,232,.75); font-size: .86rem; max-width: 60ch; margin-bottom: 12px; }
.ff-footer__links a { color: var(--ff-sand); margin-right: 16px; font-size: .86rem; }
.ff-footer__links a:hover { color: var(--ff-coral); }
.ff-footer__copy { font-family: var(--ff-font-mono); font-size: .74rem; color: rgba(250,243,232,.55); margin-top: 10px; }

/* ── Cookie notice: small corner card, not a full-width bar ────────────── */
.ff-cookie {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 60;
  max-width: 420px; margin-inline: auto;
  background: var(--ff-ink); color: var(--ff-sand);
  border-left: 4px solid var(--ff-coral); padding: 14px 16px;
  font-size: .84rem;
}
.ff-cookie[hidden] { display: none; }
.ff-cookie p { color: rgba(250,243,232,.85); margin: 0 0 10px; }
.ff-cookie a { color: var(--ff-sand); text-decoration: underline; }
.ff-cookie__btn {
  background: var(--ff-coral); color: #fff; border: none; padding: 8px 14px;
  font-family: var(--ff-font-body); font-weight: 700; font-size: .8rem; cursor: pointer;
}
.ff-cookie__btn:hover { background: var(--ff-coral-deep); }

/* ── Simple legal-page prose (used by privacy-policy.html / terms.html) ── */
.ff-legal h2 { margin-top: 1.5em; font-size: 1.25rem; }
.ff-legal p, .ff-legal li { color: var(--ff-ink-soft); }