/* Hotel Terracotta — premium editorial layer
   Designed to be appended after the current style.css without changing markup or SEO. */

:root {
  --bg: #eee9df;
  --surface: #fbf8f2;
  --fg: #10262b;
  --muted: #5f6c6b;
  --line: rgba(16, 38, 43, 0.14);
  --pool: #176a6d;
  --sun: #b65f3d;
  --night: #08191d;
  --chip: #e8e0d4;
  --radius: 12px;
  --gold: #c8a66a;
  --gold-soft: rgba(200, 166, 106, 0.32);
  --shadow-sm: 0 10px 28px rgba(8, 25, 29, 0.08);
  --shadow-md: 0 18px 48px rgba(8, 25, 29, 0.12);
  --shadow-lg: 0 28px 80px rgba(4, 15, 18, 0.2);
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(circle at 8% 18%, rgba(200, 166, 106, 0.10), transparent 32rem),
    radial-gradient(circle at 92% 62%, rgba(23, 106, 109, 0.08), transparent 36rem),
    var(--bg);
  color: var(--fg);
  letter-spacing: 0.002em;
}

.wrap { width: min(1160px, calc(100% - 40px)); }

.site-head {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(5, 18, 21, 0.86), rgba(5, 18, 21, 0.54));
  box-shadow: 0 1px 0 rgba(200, 166, 106, 0.18);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.site-head .wrap { padding-block: 21px; }

.brand b {
  color: #fffaf0;
  font-size: clamp(1.22rem, 2.1vw, 1.56rem);
  letter-spacing: -0.02em;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.28);
}

.brand small { color: rgba(255, 250, 240, 0.65); }

.nav { gap: 8px; }

.nav a {
  color: rgba(255, 250, 240, 0.84);
  border-radius: 999px;
  padding: 9px 13px;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-1px);
}

.hero {
  min-height: min(820px, 86vh);
  box-shadow: inset 0 -1px 0 rgba(200, 166, 106, 0.34);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 38%, rgba(209, 137, 77, 0.18), transparent 32%),
    radial-gradient(ellipse at center, transparent 34%, rgba(2, 10, 13, 0.44) 100%);
  mix-blend-mode: soft-light;
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(4, 17, 21, 0.78) 0%, rgba(4, 17, 21, 0.48) 42%, rgba(4, 17, 21, 0.12) 76%),
    linear-gradient(0deg, rgba(4, 17, 21, 0.58) 0%, transparent 54%);
}

.hero .inner { max-width: 760px; padding-block: clamp(150px, 22vh, 230px) 110px; }

.hero .eyebrow {
  color: #ead2a7;
  letter-spacing: 0.2em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.hero h1 {
  max-width: 13ch;
  color: #fffaf0;
  font-size: clamp(3.4rem, 8.4vw, 7.25rem);
  line-height: 0.93;
  letter-spacing: -0.045em;
  text-wrap: balance;
  text-shadow: 0 12px 44px rgba(0, 0, 0, 0.38);
}

.hero .lead {
  max-width: 660px;
  color: rgba(255, 250, 240, 0.86);
  font-size: clamp(1.05rem, 1.7vw, 1.24rem);
  line-height: 1.75;
}

.btn {
  border-radius: 999px;
  padding: 13px 20px;
  letter-spacing: 0.025em;
  box-shadow: 0 10px 26px rgba(6, 20, 24, 0.16);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 34px rgba(6, 20, 24, 0.22);
}

.btn.solid {
  color: #fffaf2;
  background: linear-gradient(135deg, #c56d46, #a84e33);
  border-color: rgba(255, 255, 255, 0.14);
}

.btn.ghost {
  color: #fffaf2;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(10px);
}

.factbar {
  position: relative;
  z-index: 3;
  background: rgba(251, 248, 242, 0.92);
  border-color: rgba(200, 166, 106, 0.32);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
}

.fact b { color: #8f492f; }

section.block { padding-block: clamp(78px, 9vw, 126px); }

.kicker {
  color: #8f492f;
  letter-spacing: 0.18em;
}

.section-title,
.block h2,
.split h2,
.hooks h2,
.quiz h2,
.band h2 {
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hooks {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(200, 166, 106, 0.13), transparent 28rem),
    linear-gradient(135deg, #0c2429, #07171b 70%);
  color: #f9f2e7;
  border-block: 1px solid rgba(200, 166, 106, 0.26);
}

.hooks .muted { color: rgba(249, 242, 231, 0.68); }

.hookgrid > div {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border-color: rgba(232, 206, 163, 0.22);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 42px rgba(0, 0, 0, 0.16);
}

.hookgrid b { color: #efd6aa; }

.trust-strip {
  background: linear-gradient(90deg, #122f34, #0b2227);
  border-color: rgba(200, 166, 106, 0.30);
  color: #f8f1e7;
  box-shadow: var(--shadow-md);
}

.trust-strip p,
.trust-strip .muted { color: rgba(248, 241, 231, 0.72); }

.quiz {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(200, 166, 106, 0.20), transparent 25rem),
    radial-gradient(circle at 12% 100%, rgba(23, 106, 109, 0.34), transparent 32rem),
    linear-gradient(135deg, #0d2a30, #07191e);
  border: 1px solid rgba(200, 166, 106, 0.34);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}

.quiz::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  pointer-events: none;
}

.quiz .btn { position: relative; z-index: 1; }

.picks,
.cards,
.related-grid,
.affiliate-grid,
.decision-grid { gap: clamp(18px, 2.6vw, 30px); }

.pick,
.card,
.related-card,
.affiliate-card,
.facts-card,
.tablewrap,
.decision-card,
.budget-grid > div,
.cruise-card {
  background: linear-gradient(145deg, rgba(255, 253, 248, 0.98), rgba(246, 240, 230, 0.94));
  border-color: rgba(56, 66, 64, 0.13);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.pick:hover,
.card:hover,
.related-card:hover,
.affiliate-card:hover,
.decision-card:hover,
.cruise-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200, 166, 106, 0.48);
  box-shadow: var(--shadow-md);
}

.pick img,
.card img,
.related-card img,
.affiliate-card img,
.cruise-card img { filter: saturate(0.94) contrast(1.03); }

.pick .rank,
.badge,
.chip {
  border-color: rgba(200, 166, 106, 0.46);
  background: rgba(232, 224, 212, 0.78);
}

.split { gap: clamp(34px, 6vw, 82px); align-items: center; }

.split figure {
  position: relative;
  isolation: isolate;
}

.split figure::before {
  content: "";
  position: absolute;
  inset: -14px 18px 18px -14px;
  z-index: -1;
  border: 1px solid var(--gold-soft);
  border-radius: 18px;
  background: rgba(200, 166, 106, 0.08);
}

.split img {
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

.tiles { gap: clamp(16px, 2.3vw, 28px); }

.tile {
  border-radius: 18px;
  border: 1px solid rgba(200, 166, 106, 0.22);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}

.tile::after {
  background: linear-gradient(0deg, rgba(4, 15, 18, 0.90), rgba(4, 15, 18, 0.06) 72%);
}

.tile img { transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 300ms ease; }

.tile:hover img { transform: scale(1.045); filter: saturate(1.05); }

.tile .label { padding: 25px; }

.ledger { border-top-color: rgba(200, 166, 106, 0.40); }

.row { border-bottom-color: rgba(16, 38, 43, 0.12); }

.row .sum {
  margin-inline: -15px;
  padding-inline: 15px;
  border-radius: 10px;
  transition: background 180ms ease, color 180ms ease;
}

.row .sum:hover { background: rgba(255, 255, 255, 0.55); }

.row[open] .sum {
  color: #8f492f;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 9px 24px rgba(8, 25, 29, 0.06);
}

.band::after {
  background:
    linear-gradient(90deg, rgba(4, 16, 20, 0.84), rgba(4, 16, 20, 0.40) 58%, rgba(4, 16, 20, 0.12)),
    linear-gradient(0deg, rgba(4, 16, 20, 0.52), transparent 55%);
}

.band .inner { padding-block: clamp(105px, 14vw, 180px); }

.band h2 {
  color: #fffaf0;
  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: 0.96;
  text-shadow: 0 12px 42px rgba(0, 0, 0, 0.34);
}

.season {
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(200, 166, 106, 0.26);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.66);
  box-shadow: var(--shadow-sm);
}

.season .m { border-radius: 8px; overflow: hidden; }
.season .m i { background: linear-gradient(180deg, #c8a66a, #ae6040); }

.pchart {
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(200, 166, 106, 0.26);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.76);
  box-shadow: var(--shadow-sm);
}

.pchart .bar { border-radius: 999px; overflow: hidden; }
.pchart .bar i { background: linear-gradient(90deg, #176a6d, #2e8a86); }

.site-foot {
  position: relative;
  background:
    radial-gradient(circle at 14% 10%, rgba(200, 166, 106, 0.12), transparent 28rem),
    linear-gradient(135deg, #0b2429, #061519);
  border-top: 1px solid rgba(200, 166, 106, 0.36);
}

.site-foot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.66;
}

.site-foot a { color: rgba(255, 250, 240, 0.78); }
.site-foot a:hover { color: #efd6aa; }

@media (max-width: 760px) {
  .wrap { width: min(100% - 28px, 1160px); }
  .site-head { background: rgba(6, 20, 24, 0.92); }
  .site-head .wrap { padding-block: 15px; }
  .hero { min-height: 720px; }
  .hero .inner { padding-block: 145px 92px; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
  section.block { padding-block: 72px; }
  .split figure::before { inset: -9px 11px 12px -9px; }
  .quiz { border-radius: 14px; }
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #07171b;
    --surface: #10262b;
    --fg: #f2eadf;
    --muted: #b2bfbd;
    --line: rgba(236, 217, 184, 0.18);
    --chip: #1a353a;
  }

  body {
    background:
      radial-gradient(circle at 8% 18%, rgba(200, 166, 106, 0.08), transparent 32rem),
      radial-gradient(circle at 92% 62%, rgba(23, 106, 109, 0.12), transparent 36rem),
      var(--bg);
  }

  .factbar { background: rgba(16, 38, 43, 0.92); }

  .pick,
  .card,
  .related-card,
  .affiliate-card,
  .facts-card,
  .tablewrap,
  .decision-card,
  .budget-grid > div,
  .cruise-card,
  .pchart,
  .season {
    background: linear-gradient(145deg, rgba(18, 43, 48, 0.98), rgba(10, 29, 34, 0.98));
  }

  .row .sum:hover,
  .row[open] .sum { background: rgba(255, 255, 255, 0.055); }
}