/* West Yellowstone Tours: tokens and base styles.
   Every colour pairing used here is listed and measured in
   tools/check-tokens.py. Shared component styles live in this file under
   their own class names: a page's inline <style> loads later and wins any
   tie, so a component styled only on a page will drift from the system. */

@font-face {
  font-family: "Archivo SC";
  src: url("/fonts/archivo-sc-v1.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("/fonts/atkinson-next-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("/fonts/atkinson-next-italic-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Palette, taken from the ground. Hexes measured on --ground. */
  --ink: #14181A;            /* Obsidian Cliff basalt        16.3:1 */
  --brand: #1F4D3A;          /* lodgepole pine                8.8:1 */
  --brand-deep: #163A2C;     /* pine in shade, footer band          */
  --brand-tint: #D7E6DD;     /* light text on brand fill            */
  --link: #0B5E78;           /* Grand Prismatic centre        6.6:1 */
  --link-hover: #084A5F;
  --accent: #0F7085;         /* Sapphire Pool shallows        5.2:1 */
  --cta: #C2531A;            /* thermophile mats: FILL ONLY   4.2:1 */
  --cta-hover: #A3440F;
  --cta-text: #AE4914;       /* the CTA colour as a word      5.1:1 */
  --warn: #8F5A0C;           /* travertine ochre              5.3:1 */
  --warn-tint: #FBF3E2;
  --muted: #5D6859;          /* sagebrush in winter           5.3:1 */
  --bison: #5A4433;          /* bison and elk hide            8.3:1 */
  --ground: #F7F4ED;         /* geyserite sinter                    */
  --snow: #FFFFFF;
  --sunken: #F0ECE2;
  --line: #DDD6C8;           /* decorative dividers only            */
  --control-border: #7A7468; /* form controls, 3:1 minimum          */
  --focus: #0B5E78;
  --focus-on-dark: #FFFFFF;

  /* Type */
  --font-head: "Archivo SC", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.9375rem;      /* 15px: meta lines and captions only  */
  --step-0: 1.0625rem;       /* 17px: running text on a phone       */
  --step-1: 1.25rem;
  --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
  --step-3: clamp(1.625rem, 1.3rem + 1.5vw, 2.125rem);
  --step-4: clamp(2rem, 1.45rem + 2.6vw, 3rem);
  --leading: 1.6;
  --leading-tight: 1.15;
  --head-spacing: 0.06em;    /* Archivo's semi-condensed word space runs tight */
  --measure: 68ch;

  /* Space, on a 4px grid */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --gutter: 1rem;            /* 16px at 390px                       */
  --page-max: 72rem;

  /* Shape */
  --radius: 6px;
  --radius-lg: 10px;
  --target: 44px;            /* minimum touch target                */
  --shadow: 0 1px 2px rgb(20 24 26 / 0.08), 0 2px 8px rgb(20 24 26 / 0.06);

  color-scheme: only light;
}

@media (min-width: 48rem) {
  :root {
    --step-0: 1.125rem;      /* 18px on wider screens               */
    --gutter: 1.5rem;
  }
}

/* Reset, kept small */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s6);
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  /* 450, not 400: tested at 390 px under a simulated daylight glare (45%
     veiling white), the 400 stroke thinned out and 450 held, with no change
     to line breaks. 500 widened the glyphs and reflowed paragraphs. The
     font's weight axis is kept (400 to 700), so this costs no bytes. */
  font-weight: 450;
  font-size: var(--step-0);
  line-height: var(--leading);
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
p, ul, ol, dl, figure, blockquote { margin: 0 0 var(--s4); }

/* [hidden] must win over any display rule a component sets. Without this,
   class="row" hidden still renders as an empty strip. */
[hidden] { display: none !important; }

/* Headings */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--brand);
  line-height: var(--leading-tight);
  margin: 0 0 var(--s4);
  text-wrap: balance;
  font-weight: 700;
  word-spacing: var(--head-spacing);
}
h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); margin-top: var(--s7); }
h3 { font-size: var(--step-2); margin-top: var(--s6); }
h4 { font-size: var(--step-1); margin-top: var(--s5); }
h1 + *, h2 + *, h3 + * { margin-top: 0; }

/* Links */
a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--link-hover); text-decoration-thickness: 0.14em; }

/* Focus: always visible for keyboard users, never removed. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--focus-on-dark); }

/* Utilities */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { max-width: var(--measure); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.lede { font-size: var(--step-1); line-height: 1.5; }
.meta { font-size: var(--step--1); color: var(--muted); }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--s2);
  top: -100px;
  z-index: 100;
  background: var(--snow);
  color: var(--link);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
}
.skip-link:focus { top: var(--s2); }

/* Buttons.
   Orange means book. .btn-book is the only rule on the site allowed to use
   --cta or --cta-hover, and tools/check-render.js fails any page where the
   colour turns up on anything else. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--target);
  min-width: var(--target);
  padding: var(--s2) var(--s5);
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.btn-book { background: var(--cta); color: var(--snow); }
.btn-book:hover { background: var(--cta-hover); color: var(--snow); }
.btn-secondary { background: var(--brand); color: var(--snow); }
.btn-secondary:hover { background: var(--brand-deep); color: var(--snow); }
.btn-outline { background: var(--snow); color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--sunken); color: var(--brand); }

/* Site header */
.site-header {
  background: var(--snow);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 64px;
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--target);
  color: var(--brand);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: -0.005em;
  word-spacing: var(--head-spacing);
}
.brand-link:hover { color: var(--brand-deep); text-decoration: none; }
.brand-link svg { width: 36px; height: 36px; flex: none; }

/* Site footer */
.site-footer {
  background: var(--brand-deep);
  color: var(--snow);
  margin-top: var(--s8);
  padding-block: var(--s7) var(--s6);
  font-size: 1rem; /* the affiliate disclosure is read, not fine print */
}
.site-footer a { color: var(--snow); }
.site-footer a:hover { color: var(--brand-tint); }
.site-footer__brand {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--step-1);
  margin-bottom: var(--s2);
  word-spacing: var(--head-spacing);
}
.site-footer__disclosure { max-width: 60ch; color: var(--snow); }
.site-footer__small { color: var(--brand-tint); margin: var(--s5) 0 0; }

/* Figures and captions */
figure { margin-inline: 0; }
figcaption {
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: var(--s2);
}

/* Error pages (404, 500) */
.error-page { padding-block: var(--s7) var(--s6); }
.error-page__grid { display: grid; gap: var(--s6); align-items: start; }
.error-page__code {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--muted);
  font-size: var(--step-1);
  margin-bottom: var(--s2);
  word-spacing: var(--head-spacing);
}
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block: var(--s5); }
.error-page__photo img { border-radius: var(--radius-lg); width: 100%; }
@media (min-width: 60rem) {
  .error-page__grid { grid-template-columns: 1fr 1fr; gap: var(--s7); }
}

/* Motion. "transition: none", not the common 0.01ms duration: forcing a
   duration on every element turns transition-property's default of "all"
   into a transition on everything, so focus rings and the skip link
   animated in from their unfocused values. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* Step 1 components. Each has one job and one class name.             */
/* ------------------------------------------------------------------ */

/* Primary navigation: in the header bar on wide screens, a row of its
   own under the brand on a phone. Every link is a real URL. */
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 var(--s3);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.site-nav a:hover { background: var(--sunken); color: var(--brand); }
.site-nav a[aria-current] { color: var(--brand); text-decoration: underline; text-underline-offset: 0.3em; }
@media (max-width: 47.99rem) {
  .site-header__bar { flex-wrap: wrap; padding-block: var(--s2); }
  .site-nav { width: 100%; }
  .site-nav ul { gap: var(--s2); margin-left: calc(var(--s2) * -1); }
  .site-nav a { padding: 0 var(--s2); }
}

/* Season state colours: decorative dots only. The words carry the state. */
.season-dot {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  margin-right: 0.45em;
  vertical-align: 0.05em;
  background: var(--brand);
  flex: none;
}
.season-dot--open { background: var(--brand); }
.season-dot--snow { background: var(--accent); }
.season-dot--closed { background: var(--warn); }

/* The "West Entrance today" bar, on every page under the header. */
.season-bar {
  background: var(--sunken);
  border-bottom: 1px solid var(--line);
}
.season-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s4);
  min-height: var(--target);
}
.season-bar__text { margin: 0; padding-block: var(--s2); }
.season-bar__label { color: var(--muted); margin-right: 0.3em; }
.season-bar__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-weight: 700;
}

/* Page sections */
.section { padding-block: var(--s7); border-top: 1px solid var(--line); }
.section--first { border-top: 0; padding-top: var(--s6); }
.section__intro { max-width: var(--measure); }
.section h2 { margin-top: 0; }
.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--muted);
  font-size: var(--step-0);
  margin-bottom: var(--s2);
  word-spacing: var(--head-spacing);
}

/* Hero: the answer, today's state and the three ways in. */
.hero__grid { display: grid; gap: var(--s6); align-items: start; }
.hero__answer { font-size: var(--step-1); line-height: 1.5; max-width: 40rem; }
.hero__checked { color: var(--muted); }
.hero__photo img { border-radius: var(--radius-lg); width: 100%; }
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); }
}

.status-card {
  background: var(--snow);
  border: 1px solid var(--line);
  border-left: 6px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  margin-block: var(--s5);
  box-shadow: var(--shadow);
}
.status-card--open { border-left-color: var(--brand); }
.status-card--snow { border-left-color: var(--accent); }
.status-card--closed { border-left-color: var(--warn); }
.status-card__eyebrow { color: var(--muted); margin-bottom: var(--s1); }
.status-card__headline { font-size: var(--step-3); margin: 0 0 var(--s3); color: var(--ink); }
.status-card__next { font-weight: 700; }
.status-card__source { color: var(--muted); margin: 0; }

.jobs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s3);
}
.jobs a {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-height: var(--target);
  padding: var(--s3) var(--s4);
  background: var(--snow);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.jobs a:hover { border-color: var(--brand); }
.jobs__q { font-weight: 700; color: var(--link); }
.jobs__a { color: var(--muted); }
@media (min-width: 40rem) { .jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Date check: the page's search. Answers from the calendar and the tour
   cards already in the page; without JavaScript it jumps to the table. */
.date-check {
  background: var(--snow);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4) var(--s5) var(--s5);
  margin-block: var(--s5);
  max-width: 48rem;
}
.date-check__title { font-size: var(--step-1); margin: 0 0 var(--s3); }
.date-check__fields { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.date-check__field { display: flex; flex-direction: column; gap: var(--s1); flex: 1 1 10rem; }
.date-check label { font-weight: 700; color: var(--ink); }
.date-check input {
  min-height: var(--target);
  padding: 0 var(--s3);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--snow);
  color: var(--ink);
  font: inherit;
}
.date-check .btn { flex: 0 0 auto; }
.date-check__result:empty { display: none; }
.date-check__result { margin-top: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s4); }
.date-check__heading { font-weight: 700; margin: 0 0 var(--s2); }
.date-check__states { list-style: none; padding: 0; margin: 0 0 var(--s3); }
.date-check__states li { margin-bottom: var(--s2); }
.date-check__tours { margin: 0; }
.date-check__error { margin: 0; color: var(--warn); font-weight: 700; }

/* Data tables. On a phone each row becomes a small card, so nothing
   scrolls sideways; from 40rem it is an ordinary table. */
.nowrap { white-space: nowrap; }

.data-table { width: 100%; border-collapse: collapse; background: var(--snow); }
.data-table caption { text-align: left; color: var(--muted); padding-bottom: var(--s3); caption-side: top; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: var(--s3); border-bottom: 1px solid var(--line); }
.data-table thead th { font-family: var(--font-head); color: var(--brand); border-bottom: 2px solid var(--brand); }
.data-table tbody th { font-weight: 700; }
.table-scroll:focus-visible { outline-offset: 4px; }
@media (max-width: 39.99rem) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table { background: none; }
  .data-table caption { display: block; }
  .data-table tr { background: var(--snow); }
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; width: 100%; }
  .data-table tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--s3); padding: var(--s2) 0; }
  .data-table th, .data-table td { border: 0; padding: var(--s1) var(--s3); }
  .data-table td.nowrap-sm { font-weight: 700; }
}

/* Place cards: one attraction, its drive time, when you can get there. */
.place-grid { display: grid; gap: var(--s5); margin-top: var(--s5); }
.place-card {
  display: flex;
  flex-direction: column;
  background: var(--snow);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.place-card img { width: 100%; height: auto; }
.place-card__body { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; flex: 1; }
.place-card__body h3 { margin: 0 0 var(--s2); }
.place-card__meta { color: var(--muted); font-weight: 700; margin-bottom: var(--s3); }
.place-card__body p:last-child { margin-bottom: 0; }
.place-card__link { margin-top: auto; padding-top: var(--s2); }
.place-card__link a { display: inline-flex; align-items: center; min-height: var(--target); }
.place-card__caption { padding: var(--s2) var(--s5) 0; margin: 0; color: var(--muted); }
@media (min-width: 40rem) {
  .place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .place-card--wide { grid-column: span 2; }
}
@media (min-width: 64rem) {
  .place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .place-card--wide { grid-column: span 2; }
  .place-card--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
}

/* Information cards: no photograph, just the facts. */
.info-grid { display: grid; gap: var(--s4); margin-top: var(--s5); }
.info-card {
  background: var(--snow);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4) var(--s5);
}
.info-card h3 { margin: 0 0 var(--s2); font-size: var(--step-1); }
.info-card p:last-child { margin-bottom: 0; }
.info-card--closed { background: var(--warn-tint); border-color: var(--warn); }
.info-card--closed .info-card__state { color: var(--warn); font-weight: 700; }
@media (min-width: 40rem) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A notice that something is closed. */
.notice {
  background: var(--warn-tint);
  border: 1px solid var(--warn);
  border-left-width: 6px;
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin-top: var(--s5);
  max-width: var(--measure);
}
.notice__title { color: var(--warn); font-family: var(--font-head); font-weight: 700; margin-bottom: var(--s1); }
.notice p:last-child { margin-bottom: 0; }

/* Tour cards: price, rating, length and where it starts, on the card. */
.tour-grid { display: grid; gap: var(--s5); margin-top: var(--s5); }
.tour-card {
  display: flex;
  flex-direction: column;
  background: var(--snow);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tour-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tour-card__body { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; flex: 1; }
.tour-card__title { font-size: var(--step-1); margin: 0 0 var(--s2); }
.tour-card__facts { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.tour-card__facts li { padding: var(--s1) 0; border-top: 1px solid var(--line); }
.tour-card__trust { font-weight: 700; color: var(--brand); margin: auto 0 var(--s3); }
.tour-card__book { width: 100%; }
.tour-card__operator { color: var(--muted); margin: var(--s3) 0 0; }
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .tour-card { flex-direction: row; }
  .tour-card__img { width: 40%; aspect-ratio: auto; align-self: stretch; object-fit: cover; }
}
@media (min-width: 64rem) { .tour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rating { margin: 0 0 var(--s3); }
.rating__value { font-family: var(--font-head); font-weight: 700; }
.rating__star { color: var(--bison); margin: 0 0.25em 0 0.1em; }
.rating__count { color: var(--muted); }

/* Prices are set in Archivo: its zero is plain, and a price is read at a glance. */
.price { margin-bottom: var(--s3); }
.price__line { margin: 0; }
.price__from, .price__unit { color: var(--muted); }
.price__amount { font-family: var(--font-head); font-weight: 800; font-size: var(--step-3); color: var(--ink); font-variant-numeric: tabular-nums; }
.price__note { color: var(--muted); margin: 0; }

.disclosure { color: var(--muted); max-width: var(--measure); }

/* Plain facts as a definition list. */
.fact-list { display: grid; gap: 0; margin: var(--s5) 0 0; max-width: 56rem; }
.fact-list div { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.fact-list dt { font-family: var(--font-head); font-weight: 700; color: var(--brand); word-spacing: var(--head-spacing); }
.fact-list dd { margin: var(--s1) 0 0; }
@media (min-width: 48rem) {
  .fact-list div { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s5); }
  .fact-list dd { margin: 0; }
}

/* Questions. Collapsed with <details>, so every answer is in the HTML. */
.faq { max-width: var(--measure); margin-top: var(--s5); }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--snow); padding: 0 var(--s3); }
.faq details + details { margin-top: var(--s2); }
.faq summary {
  display: flex;
  align-items: center;
  min-height: var(--target);
  padding: var(--s3) 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--brand);
  cursor: pointer;
  list-style: none;
  word-spacing: var(--head-spacing);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; display: inline-block; width: 1.25em; flex: none; color: var(--link); }
.faq details[open] summary::before { content: "\2212"; }
.faq details > div { padding-bottom: var(--s3); }

.sources { padding-left: 1.2em; max-width: var(--measure); }
.sources li { margin-bottom: var(--s2); }

.about-page { color: var(--muted); max-width: var(--measure); }