/* Fairweather: the page takes its colour from the weather outside. */
:root {
  --bg: #fff; --ink: #12303f; --muted: #47606d; --surface: #e8f2f6; --line: #c9dbe3;
  --brand: #0f4c75; --on-brand: #fff; --accent: #c8401f; --on-accent: #fff;
  --radius: 4px; --head: "Libre Caslon Text", serif; --body: "Figtree", sans-serif;
  --head-weight: 700; --head-spacing: -0.01em; --footer-bg: #0b3550; --star: #c8401f;
}
.page-head { background: linear-gradient(100deg, #0f4c75, #7d3f4c 70%, #b5321b); }
.band-cta { background: #b5321b; }
.band-cta .btn:not(.btn-alt) { background: #fff; color: #7c2412; border-color: #fff; }

.hv-hero { --focus: #fff; background: color-mix(in oklab, #0f4c75 calc(100% - var(--heat) * 100%), #b5321b); color: #fff; }
.hv-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: 56px; align-items: center; padding-block: clamp(48px, 7vw, 92px); }
.hv-where { font-weight: 600; margin-bottom: 14px; }
.hv-copy h1 { min-height: 3.3em; font-size: clamp(2.375rem, 4.8vw, 3.875rem); }
.hv-sub { max-width: 46ch; min-height: 3.2em; margin-top: 16px; font-size: 1.25rem; }
.hv-hero .btn:not(.btn-alt) { background: #fff; color: var(--ink); border-color: #fff; }
.hv-temp { font: 800 clamp(6.5rem, 15vw, 11.5rem)/1 var(--head); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.hv-dial label { display: block; margin: 12px 0 8px; font-weight: 600; font-size: 1.125rem; }
.hv-dial input { width: 100%; height: 44px; margin: 0; background: none; accent-color: #fff; cursor: pointer; appearance: none; }
.hv-dial input::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #8fd0ee, #fff 50%, #ffb199); }
.hv-dial input::-moz-range-track { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #8fd0ee, #fff 50%, #ffb199); }
.hv-dial input::-webkit-slider-thumb { appearance: none; width: 30px; height: 30px; margin-top: -10px; border: 4px solid var(--ink); border-radius: 50%; background: #fff; }
.hv-dial input::-moz-range-thumb { width: 22px; height: 22px; border: 4px solid var(--ink); border-radius: 50%; background: #fff; }
.hv-scale { display: flex; justify-content: space-between; font-size: 0.95rem; }

.hv-facts { background: var(--surface); }
.hv-facts ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-block: 20px; }
.hv-facts strong { display: block; font: 800 1.375rem/1.2 var(--head); letter-spacing: -0.02em; color: var(--brand); }
.band-reviews { background: var(--surface); }
.band-reviews .review { background: #fff; }

@media (max-width: 860px) {
  .hv-grid { grid-template-columns: 1fr; gap: 32px; }
  .hv-copy h1, .hv-sub { min-height: 0; }
  .hv-dial { order: -1; }
  .hv-temp { font-size: 6.5rem; }
}
@media (max-width: 560px) {
  .hv-facts ul { grid-template-columns: 1fr; gap: 10px; }
}