/* Highpass Expeditions: asphalt black, rust, prayer-flag yellow and khaki. Oswald for headings, Barlow for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #1B1B1B;
  --surface: #242322;
  --soft: #2A2622;
  --ink: #EDE6D8;
  --muted: #B3AA98;
  --line: #3A3633;
  --line-strong: #4F4943;
  --brand: #D9542B;
  --brand-hover: #EA6A40;
  --brand-ink: #FFFFFF;
  --brand-text: #F2C230;
  --flag: #F2C230;
  --khaki: #B9A77F;
  --eyebrow: #F2C230;
  --badge-bg: #F2C230;
  --badge-ink: #1B1B1B;
  --out-bg: #2A2622;
  --out-ink: #EDE6D8;
  --out-accent: #F2C230;
  --head: "Oswald", Impact, sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --fs-body: 1.05rem;
  --radius: 3px;
  --radius-lg: 4px;
  --btn-radius: 3px;
  --wrap: 1220px;
  --gap: 20px;
  --menu-bg: #1B1B1B;
  --input-bg: #1B1B1B;
  color-scheme: dark;
}
h1, h2, h3 { font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; }
h1 em { font-style: normal; color: var(--brand); }
.btn { font-family: var(--head); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.btn-ghost:hover { border-color: var(--flag); color: var(--flag); }
.flags { display: flex; height: 14px; overflow: hidden; }
.flags i { flex: 1; min-width: 18px; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }

/* header */
.hdr-moto { background: #121212; border-bottom: 3px solid var(--brand); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 40px; height: 40px; }
.logo span { display: grid; line-height: .95; }
.logo b { font: 700 1.5rem var(--head); letter-spacing: .06em; }
.logo small { font: 500 .78rem var(--head); letter-spacing: .32em; color: var(--flag); }
.nav a { font: 500 1rem var(--head); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--soft); }

/* hero: tilted art panel */
.hero { background: radial-gradient(800px 400px at 80% 30%, #3A2A20, transparent 70%), #141414; padding-top: clamp(36px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding-bottom: clamp(36px, 6vw, 80px); }
@media (max-width: 880px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: clamp(3.2rem, 8.5vw, 6.6rem); margin: 14px 0 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-art { margin: 0; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
@media (max-width: 880px) { .hero-art { clip-path: none; } }
.board { background: #121212; }
.dep-board { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.dep-board li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .dep-board li { grid-template-columns: 80px minmax(0, 1fr); } .dep-seats { grid-column: 2; } }
.dep-date { font: 600 1.4rem var(--head); color: var(--flag); text-transform: uppercase; }
.dep-board a { font: 500 1.25rem var(--head); text-transform: uppercase; text-decoration: none; }
.dep-board a:hover { color: var(--brand); }
.dep-seats { font-weight: 700; color: var(--khaki); }
.dep-seats.low { color: var(--brand); }
.c-card { border-radius: 0; border-color: var(--line-strong); }
.c-body h3 { font-size: 1.5rem; }
.kit { background: var(--brand); color: #fff; }
.kit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 820px) { .kit-grid { grid-template-columns: 1fr 1fr; } }
.kit-grid .ic { width: 34px; height: 34px; color: #1B1B1B; }
.kit-grid h3 { font-size: 1.3rem; margin: 10px 0 4px; }
.kit-grid p { color: #FFE2D6; }
.quotes li { border-radius: 0; border-color: var(--line-strong); }

/* departures */
.month-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.month-tabs button { display: grid; min-width: 90px; min-height: 52px; padding: 6px 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 1.05rem var(--head); text-transform: uppercase; cursor: pointer; }
.month-tabs button small { font: 500 .74rem var(--body); text-transform: none; color: var(--muted); }
.month-tabs button[aria-pressed="true"] { background: var(--flag); color: #1B1B1B; border-color: var(--flag); }
.month-tabs button[aria-pressed="true"] small { color: #1B1B1B; }
.day-off { display: grid; place-items: center; min-height: 52px; color: #5A544D; font-variant-numeric: tabular-nums; }
.cal button:not(:disabled) { border-color: var(--flag); }

/* inner pages */
.page-head { background: #121212; margin-bottom: clamp(24px, 4vw, 44px); }
.page-head { padding-bottom: 0; }
.page-head .wrap { padding-bottom: clamp(28px, 4vw, 48px); }
.page-head h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
.cd h1 { font-size: clamp(2.4rem, 6vw, 4rem); }

/* CTA + footer */
.cta-band { padding-block: clamp(48px, 7vw, 96px); background: var(--flag); color: #1B1B1B; }
.cta-band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px; }
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.cta-band h2 span { display: block; color: var(--brand); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn-ghost { color: #1B1B1B; border-color: #1B1B1B; }
.footer { background: #0F0F0F; color: var(--muted); border-top: 3px solid var(--brand); }
.footer h2 { color: var(--flag); }
.f-about { margin-top: 12px; max-width: 34ch; }
.footer .credit a { color: #fff; }