/* Tiger Trail Lodge: jungle night green, ochre, tiger orange and bone. Oswald for headings, Lora for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #0E1A12;
  --surface: #15231A;
  --soft: #1A2B20;
  --ink: #F2EAD3;
  --muted: #B9B39C;
  --line: #2A3D2F;
  --line-strong: #40594A;
  --brand: #E26D1F;
  --brand-hover: #F07F33;
  --brand-ink: #0E1A12;
  --brand-text: #D9A441;
  --ochre: #D9A441;
  --eyebrow: #D9A441;
  --input-bg: #101D14;
  --head: "Oswald", "Arial Narrow", sans-serif;
  --body: "Lora", Georgia, serif;
  --radius: 4px;
  --radius-lg: 6px;
  --btn-radius: 2px;
  --wrap: 1180px;
  --gap: 22px;
  --cta-bg: #D9A441;
  --cta-ink: #0E1A12;
  --badge-bg: #E26D1F;
  --badge-ink: #0E1A12;
  --danger: #FF7A59;
  --ok: #9BD17A;
  --focus: #D9A441;
  color-scheme: dark;
}
h1, h2, h3 { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.btn { font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.btn-ghost { color: var(--ink); }
.eyebrow { font-family: var(--head); letter-spacing: .2em; }

.header { background: rgba(14,26,18,.95); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 42px; height: 42px; }
.logo span { display: grid; line-height: 1.05; }
.logo b { font: 600 1.35rem var(--head); letter-spacing: .14em; color: var(--ink); }
.logo small { font: italic .8rem var(--body); color: var(--ochre); }
.nav a { font-family: var(--head); text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ochre); background: transparent; }
.nav-toggle { color: var(--ink); }

.hero { padding-block: clamp(40px, 6vw, 88px); background: radial-gradient(50% 70% at 75% 50%, rgba(226,109,31,.18), transparent 70%), linear-gradient(180deg, #0B140D, #0E1A12); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: auto 0 0 0; height: 140px; background: radial-gradient(40px 80px at 10% 100%, #13241A 60%, transparent 62%), radial-gradient(60px 120px at 30% 100%, #13241A 60%, transparent 62%), radial-gradient(50px 100px at 85% 100%, #13241A 60%, transparent 62%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-art { max-width: 320px; } }
.hero h1 { font-size: clamp(2.6rem, 6.6vw, 5.2rem); line-height: 1; margin: 16px 0 20px; }
.hero h1 span { color: var(--brand); }
.hero .t-actions { margin-top: 26px; }
.hero-art { margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid var(--ochre); box-shadow: 0 0 0 10px rgba(217,164,65,.15), 0 30px 80px -20px rgba(226,109,31,.5); }
.hero-art svg { width: 100%; height: 100%; }
.stripes { height: 28px; background: repeating-linear-gradient(115deg, #E26D1F 0 22px, #0E1A12 22px 34px, #E26D1F 34px 48px, #0E1A12 48px 66px); }
.sightings { background: var(--soft); }
.sight { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .sight { grid-template-columns: 1fr 1fr; } }
.sight li { display: grid; gap: 4px; padding: 18px 0; border-top: 2px solid var(--brand); }
.sight b { font: 600 clamp(2rem, 5vw, 3rem)/1 var(--head); color: var(--ochre); }
.sight span { color: var(--muted); font-style: italic; }
.room-card { background: var(--surface); }
.room-body h3 { font-size: 1.6rem; }
.room-rate b { color: var(--ochre); font-family: var(--head); font-weight: 600; }
.chips li { border-color: var(--line-strong); }
.zones-band { background: #0B140D; }
.zones { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap); }
.zones li { display: grid; gap: 8px; align-content: start; padding: 22px; border: 1px solid var(--line); border-left: 4px solid var(--brand); background: var(--surface); }
.zones p { color: var(--muted); }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dayb { display: grid; gap: 2px; justify-items: center; min-height: 72px; padding: 8px 2px; border: 1px solid var(--line-strong); background: var(--input-bg); color: var(--ink); cursor: pointer; border-radius: var(--radius); font-family: var(--body); }
.dayb b { font: 600 .74rem var(--head); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dayb span { font: 600 1.2rem var(--head); }
.dayb small { font-size: .68rem; color: var(--ok); }
.dayb.is-off small { color: var(--danger); }
.dayb.is-sel { background: var(--brand); border-color: var(--brand); color: #0E1A12; }
.dayb.is-sel b, .dayb.is-sel small { color: #0E1A12; }
@media (max-width: 420px) { .dayb small { font-size: .6rem; } .dayb span { font-size: 1rem; } }
.sig-left { font: 600 1rem var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--ok); }
.sig-left.is-low { color: var(--ochre); }
.sig-left.is-out { color: var(--danger); }
.sig-out { border: 1px solid var(--ochre); }
.sig-total { color: var(--ochre); font-family: var(--head); font-weight: 600; }
.sig-warn { color: #FFD9CC; }
.page-head { background: linear-gradient(180deg, #0B140D, var(--bg)); border-bottom: 1px solid var(--line); margin-bottom: clamp(16px, 3vw, 32px); }
.quotes li { background: var(--surface); }
.quotes blockquote { font-style: italic; font-size: 1.1rem; }
.cta-band .btn-primary { background: #0E1A12; color: var(--ochre); }
.cta-band .btn-ghost { color: #0E1A12; }
.footer { background: #08100A; color: var(--muted); --footer-line: var(--line); }
select.input { background-color: var(--input-bg); }
.hero-art { background: #0E1A12; display: grid; place-items: center; }