/* Reel & Rush — design system for self_travel-20 (New Zealand, Adventure &
   Film-Location Trail, site 2 of 3). Subject grounds the palette: Central
   Otago schist rock for the ink, Hobbiton's pastoral hills for the meadow
   green, an adrenaline-cord orange-red for the adventure-sports accent.
   Structural signature is The Day Stack — an ADDITIVE itinerary builder.
   Unlike every prior mechanic (single-axis slider-to-lookup on -13,
   discrete-stepper allocation on -14, sequential branching quiz on -15,
   exactly-2 picker on -16, circular reorder on -17, 2-axis scatter on -18,
   simultaneous multi-input summation into a split on -19), this is a
   many-to-one accumulator: visitors add any number of real activities/
   locations (Adventure or Film-Trail tagged) to a running stack, and the
   stack sums live into a total-hours + estimated-cost readout with a
   category-balance readout and an overpacked-day warning. Nothing is ever
   swapped or hidden — items only ever get added or individually removed.
   Type pairing (Bricolage Grotesque + DM Sans + Inconsolata) and prefix
   (qt-) unused elsewhere in the series. */

:root {
  /* Redesign 2026-09-18 — saturated mid-tone electric cobalt-blue ground
     (#2a4d9e), the first saturated MID-blue in the series (distinct from
     -7's near-black navy and -15's blue-violet indigo). Archivo Black-ish
     impact display + Rubik body + Space Mono data — a fresh trio. Cards use
     a jagged "torn ticket" clip-path edge instead of any radius value used
     elsewhere. */
  --qt-paper: #2a4d9e;
  --qt-paper-deep: #1f3a7a;
  --qt-white: #fffdf8;
  --qt-ink: #fffdf8;
  --qt-ink-soft: #c3d0ee;
  --qt-meadow: #ffcf4d;
  --qt-meadow-deep: #e0ad1f;
  --qt-adrenaline: #ff5a3c;
  --qt-adrenaline-deep: #d9401f;
  --qt-hairline: rgba(255, 253, 248, .2);
  --qt-hairline-strong: rgba(255, 253, 248, .36);
  --qt-shadow-sm: 0 8px 24px rgba(15, 22, 46, .35);

  --qt-font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --qt-font-body: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --qt-font-mono: 'Space Mono', ui-monospace, Menlo, monospace;

  --qt-radius: 2px;
  --qt-radius-lg: 2px;
  --qt-torn: polygon(0% 4%,4% 0%,9% 5%,14% 1%,19% 6%,24% 2%,29% 5%,34% 0%,39% 4%,44% 1%,49% 6%,54% 2%,59% 5%,64% 0%,69% 4%,74% 1%,79% 6%,84% 2%,89% 5%,94% 0%,100% 4%,100% 100%,0% 100%);
  --qt-shell: min(100% - 32px, 1180px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--qt-ink); background: var(--qt-paper); font-family: var(--qt-font-body); line-height: 1.6; font-size: 16px; }
h1, h2, h3 { font-family: var(--qt-font-display); font-weight: 900; line-height: 1.04; margin: 0; letter-spacing: -.02em; text-transform: uppercase; }
.qt-photo, .qt-trail-card, .qt-stack-panel { color: #17204a; clip-path: var(--qt-torn); }
img { max-width: 100%; display: block; }
.qt-wrap { width: var(--qt-shell); margin-inline: auto; padding: 0 16px; }
a { color: var(--qt-adrenaline-deep); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--qt-adrenaline); }

.qt-eyebrow { margin: 0 0 .6rem; color: var(--qt-meadow-deep); font-family: var(--qt-font-mono); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }

/* ---------- photo slots — object-fit baked in from the first draft ---------- */
.qt-photo {
  position: relative;
  border: 1.5px dashed var(--qt-hairline-strong);
  border-radius: var(--qt-radius-lg);
  background: repeating-linear-gradient(135deg, rgba(38,36,32,.06) 0 1px, transparent 1px 16px), var(--qt-white);
  aspect-ratio: var(--ar, 4/3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.qt-photo__inner { text-align: center; padding: 16px; max-width: 30ch; }
.qt-photo__label { font-family: var(--qt-font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--qt-ink-soft); display: block; margin-bottom: 6px; }
.qt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- header ---------- */
.qt-header { position: sticky; top: 0; z-index: 40; background: var(--qt-paper); border-bottom: none; background-image: repeating-linear-gradient(135deg, var(--qt-meadow) 0 16px, var(--qt-adrenaline) 16px 32px); background-size: 100% 5px; background-position: bottom; background-repeat: repeat-x; box-shadow: 0 5px 0 -5px transparent; }
.qt-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 18px; gap: 16px; }
.qt-brand { display: flex; align-items: center; gap: 9px; font-family: var(--qt-font-display); font-weight: 800; font-size: 1.35rem; color: var(--qt-ink); text-decoration: none; }
.qt-brand__mark { width: 26px; height: 26px; flex: none; }
.qt-nav { display: none; gap: 20px; font-size: .9rem; }
.qt-nav a { color: var(--qt-ink); text-decoration: none; }
.qt-nav a:hover { color: var(--qt-adrenaline-deep); }
.qt-menu-toggle { background: none; border: none; color: var(--qt-ink); padding: 6px; cursor: pointer; }
.qt-menu-toggle svg { width: 24px; height: 24px; }
.qt-mobile-nav { display: none; flex-direction: column; padding: 6px 0 18px; gap: 4px; }
.qt-mobile-nav.is-open { display: flex; }
.qt-mobile-nav a { padding: 10px 4px; font-size: .95rem; border-top: 1px solid var(--qt-hairline); color: var(--qt-ink); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.qt-mobile-nav a:first-child { border-top: none; }

@media (min-width: 860px) {
  .qt-nav { display: flex; }
  .qt-menu-toggle { display: none; }
}

/* ---------- hero ---------- */
.qt-hero { padding: 36px 0 44px; }
.qt-hero h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); margin: 0; color: #fff; }
.qt-hero__lede { font-size: 1rem; color: rgba(244,239,223,.86); max-width: 62ch; margin: 12px 0 0; }

/* ---------- hero: Reel — film-strip sprocket frame ---------- */
.qt-reel { margin-top: 18px; border-radius: var(--qt-radius-lg); overflow: hidden; box-shadow: var(--qt-shadow-sm); }
.qt-reel__perf {
  height: 16px; background-color: var(--qt-ink);
  background-image: radial-gradient(circle, var(--qt-paper) 0 4px, transparent 4.2px);
  background-size: 30px 16px; background-position: 15px center; background-repeat: repeat-x;
}
.qt-reel__frame { position: relative; aspect-ratio: 16 / 8.5; }
.qt-reel__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qt-reel__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px 24px;
  background: linear-gradient(to top, rgba(38,36,32,.9), rgba(38,36,32,.5) 60%, rgba(38,36,32,0));
}

.qt-hero__strip { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 24px; font-size: .86rem; color: var(--qt-ink-soft); }
.qt-hero__strip strong { color: var(--qt-ink); font-family: var(--qt-font-display); font-size: 1rem; margin-right: 4px; }

/* ---------- generic section scaffolding ---------- */
.qt-section { padding: 54px 0; }
.qt-section--sunk { background: var(--qt-paper-deep); }
.qt-section--dark { background: var(--qt-ink); color: var(--qt-paper); }
.qt-section--dark .qt-eyebrow { color: #e0b28e; }
.qt-section--dark h2, .qt-section--dark h3 { color: var(--qt-white); }
.qt-section--dark .qt-section__lead { color: rgba(244,239,223,.8); }
.qt-section__head { max-width: 68ch; margin-bottom: 30px; }
.qt-section__head h2 { font-size: clamp(1.6rem, 3.9vw, 2.2rem); }
.qt-section__lead { color: var(--qt-ink-soft); font-size: 1.01rem; margin-top: .6rem; }

/* ---------- category legend chips ---------- */
.qt-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--qt-font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; padding: 3px 9px; border-radius: 999px; }
.qt-tag--adventure { background: rgba(211,80,42,.14); color: var(--qt-adrenaline-deep); }
.qt-tag--film { background: rgba(92,122,62,.14); color: var(--qt-meadow-deep); }

/* ---------- THE DAY STACK — structural signature ---------- */
/* An additive itinerary builder: a grid of real activity/location cards,
   each tagged Adventure or Film-Trail with a duration + estimated-cost
   badge. "Add to your day" pushes the card into a running stack panel;
   nothing is ever swapped or hidden, items only ever accumulate or get
   individually removed. JS sums total hours + total cost live, computes
   a category-balance readout, and flags an overpacked day past 9 hours. */
.qt-stack-layout { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .qt-stack-layout { grid-template-columns: 1fr 340px; } }

.qt-stack-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .qt-stack-grid { grid-template-columns: repeat(2, 1fr); } }

.qt-stack-card { color: #17204a; border: 1.5px solid var(--qt-hairline-strong); border-radius: var(--qt-radius-lg); background: var(--qt-white); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.qt-stack-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.qt-stack-card h3 { font-size: 1.05rem; }
.qt-stack-card__meta { display: flex; gap: 10px; font-family: var(--qt-font-mono); font-size: .74rem; color: var(--qt-ink-soft); }
.qt-stack-card__add { border: 1.5px solid #17204a; background: #17204a; color: var(--qt-white); border-radius: var(--qt-radius); padding: 9px 14px; font-size: .84rem; font-weight: 600; cursor: pointer; min-height: 44px; }
.qt-stack-card__add:hover { background: var(--qt-adrenaline-deep); border-color: var(--qt-adrenaline-deep); }
.qt-stack-card__add.is-added { background: var(--qt-meadow-deep); border-color: var(--qt-meadow-deep); }
.qt-stack-card__add:disabled { opacity: .6; cursor: default; }

.qt-stack-panel { position: sticky; top: 84px; border: 1.5px solid var(--qt-hairline-strong); border-radius: var(--qt-radius-lg); background: var(--qt-white); padding: 20px; box-shadow: var(--qt-shadow-sm); }
.qt-stack-panel h3 { font-size: 1.1rem; margin-bottom: 4px; }
.qt-stack-panel__hint { font-size: .84rem; color: var(--qt-ink-soft); margin: 0 0 14px; }
.qt-stack-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; min-height: 8px; }
.qt-stack-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--qt-hairline); border-radius: var(--qt-radius); padding: 8px 10px; font-size: .86rem; }
.qt-stack-item button { background: none; border: none; color: var(--qt-ink-soft); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 2px 6px; }
.qt-stack-item button:hover { color: var(--qt-adrenaline-deep); }
.qt-stack-empty { font-size: .86rem; color: var(--qt-ink-soft); font-style: italic; }
.qt-stack-totals { border-top: 1.5px solid var(--qt-hairline); padding-top: 14px; display: grid; gap: 6px; font-family: var(--qt-font-mono); font-size: .86rem; }
.qt-stack-totals strong { font-family: var(--qt-font-display); font-size: 1.15rem; }
.qt-stack-balance { margin-top: 10px; font-size: .84rem; }
.qt-stack-warning { margin-top: 10px; padding: 8px 10px; border-radius: var(--qt-radius); background: rgba(211,80,42,.12); color: var(--qt-adrenaline-deep); font-size: .82rem; display: none; }
.qt-stack-warning.is-visible { display: block; }
.qt-stack-clear { margin-top: 12px; background: none; border: 1.5px solid var(--qt-hairline-strong); border-radius: var(--qt-radius); padding: 8px 14px; font-size: .82rem; cursor: pointer; color: var(--qt-ink-soft); min-height: 44px; width: 100%; }
.qt-stack-clear:hover { border-color: var(--qt-ink-soft); color: var(--qt-ink); }

/* ---------- trail cards (overview + index) ---------- */
.qt-trail-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .qt-trail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .qt-trail-grid { grid-template-columns: repeat(4, 1fr); } }
.qt-trail-card { color: #17204a; display: block; text-decoration: none; border: 1.5px solid var(--qt-hairline-strong); border-radius: var(--qt-radius-lg); overflow: hidden; background: var(--qt-white); transition: transform .15s, box-shadow .15s; }
.qt-trail-card:hover { transform: translateY(-3px); box-shadow: var(--qt-shadow-sm); }
.qt-trail-card__body { padding: 16px; }
.qt-trail-card__body h3 { font-size: 1.15rem; margin: 8px 0 6px; }
.qt-trail-card__body p { font-size: .9rem; color: var(--qt-ink-soft); margin: 0; }

/* ---------- comparison table ---------- */
.qt-table-wrap { overflow-x: auto; border: 1.5px solid var(--qt-hairline-strong); border-radius: var(--qt-radius-lg); }
.qt-table { color: #17204a; width: 100%; border-collapse: collapse; min-width: 560px; background: var(--qt-white); }
.qt-table th, .qt-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--qt-hairline); font-size: .92rem; }
.qt-table thead th { font-family: var(--qt-font-mono); text-transform: uppercase; font-size: .7rem; letter-spacing: .07em; background: var(--qt-paper-deep); }
.qt-table tbody tr:last-child td { border-bottom: none; }
.qt-table td:first-child, .qt-table th:first-child { font-weight: 600; }

/* ---------- facts strip ---------- */
.qt-facts { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .qt-facts { grid-template-columns: repeat(3, 1fr); } }
.qt-fact { color: #17204a; border: 1.5px solid var(--qt-hairline-strong); border-radius: var(--qt-radius); padding: 14px 16px; background: var(--qt-white); }
.qt-fact strong { display: block; font-family: var(--qt-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--qt-meadow-deep); margin-bottom: 4px; }

/* ---------- day-showcase split ---------- */
.qt-day-compare { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .qt-day-compare { grid-template-columns: 1fr 1fr; } }
.qt-day-compare figure { color: #17204a; margin: 0; border: 1.5px solid var(--qt-hairline-strong); border-radius: var(--qt-radius-lg); overflow: hidden; background: var(--qt-white); }
.qt-day-compare figcaption { padding: 14px 16px; }
.qt-day-compare figcaption strong { display: block; font-family: var(--qt-font-display); font-size: 1.05rem; margin-bottom: 4px; }
.qt-day-compare figcaption span { font-size: .88rem; color: var(--qt-ink-soft); }

/* ---------- callout ---------- */
.qt-callout { display: flex; gap: 16px; align-items: flex-start; }
.qt-callout svg { width: 32px; height: 32px; flex: none; color: var(--qt-adrenaline); }
.qt-callout strong { display: block; font-size: 1.1rem; margin-bottom: 6px; }

/* ---------- content prose (legal + detail pages) ---------- */
.qt-content { max-width: 74ch; }
.qt-content h2 { font-size: 1.45rem; margin-top: 2.2rem; }
.qt-content h2:first-child { margin-top: 0; }
.qt-content h3 { font-size: 1.12rem; margin-top: 1.6rem; }
.qt-content p { margin: .8rem 0; }
.qt-content ul, .qt-content ol { margin: .8rem 0; padding-left: 1.3rem; }
.qt-content li { margin: .35rem 0; }
.qt-legal__back { margin-bottom: 18px; font-size: .9rem; }
.qt-legal__updated { color: var(--qt-ink-soft); font-size: .88rem; margin: 6px 0 26px; }
.qt-page-hero { padding: 36px 0 30px; background: var(--qt-paper-deep); }
.qt-page-hero h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 10px 0 12px; }
.qt-page-hero p { color: var(--qt-ink-soft); max-width: 62ch; }

/* ---------- detail-page hero split (image + quick facts) ---------- */
.qt-detail-hero { padding: 36px 0 0; }
.qt-detail-hero__grid { display: grid; gap: 24px; }
@media (min-width: 860px) { .qt-detail-hero__grid { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.qt-detail-hero h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 10px 0 12px; }
.qt-quickfacts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.qt-quickfacts li { color: #17204a; border: 1.5px solid var(--qt-hairline-strong); border-radius: var(--qt-radius); padding: 10px 12px; font-size: .9rem; background: var(--qt-white); }
.qt-quickfacts strong { font-family: var(--qt-font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--qt-meadow-deep); display: block; }

/* ---------- form ---------- */
.qt-form { display: grid; gap: 16px; max-width: 560px; }
.qt-field { display: grid; gap: 6px; }
.qt-field label { font-size: .88rem; font-weight: 600; }
.qt-field input, .qt-field textarea { border: 1.5px solid var(--qt-hairline-strong); border-radius: var(--qt-radius); padding: 11px 12px; font-family: inherit; font-size: 1rem; background: var(--qt-white); color: #17204a; min-height: 44px; }
.qt-field textarea { min-height: 130px; resize: vertical; }
.qt-btn { background: var(--qt-adrenaline); color: #17204a; border: 3px solid #17204a; border-radius: 2px; box-shadow: 4px 4px 0 #17204a; padding: 12px 22px; font-size: .96rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; min-height: 44px; width: fit-content; transition: transform .1s, box-shadow .1s; }
.qt-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #17204a; }
.qt-form__note { font-size: .84rem; color: var(--qt-ink-soft); margin: 0; }

/* ---------- footer ---------- */
.qt-footer { background: #17204a; color: rgba(255,253,248,.86); padding: 46px 0 24px; margin-top: 20px; overflow: hidden; position: relative; }
.qt-footer a { color: rgba(255,253,248,.86); }
.qt-footer a:hover { color: var(--qt-white); }
.qt-footer::before { content: 'RUSH'; position: absolute; right: -10px; bottom: -40px; font-family: var(--qt-font-display); font-weight: 900; font-size: clamp(5rem, 22vw, 13rem); color: rgba(255,253,248,.05); line-height: 1; pointer-events: none; }
.qt-footer__grid { display: grid; gap: 28px; grid-template-columns: 1fr; position: relative; }
@media (min-width: 760px) { .qt-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.qt-footer h4 { font-family: var(--qt-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(244,239,223,.6); margin: 0 0 12px; }
.qt-footer__grid a { display: block; padding: 5px 0; text-decoration: none; font-size: .92rem; }
.qt-footer__bottom { border-top: 1px solid rgba(244,239,223,.16); margin-top: 30px; padding-top: 18px; font-size: .82rem; color: rgba(244,239,223,.6); }

/* ---------- cookie banner ---------- */
.qt-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--qt-ink); color: var(--qt-paper); padding: 14px 0; }
.qt-cookie__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.qt-cookie__inner p { margin: 0; font-size: .86rem; max-width: 70ch; }
.qt-cookie__inner a { color: #e0b28e; }
.qt-cookie__accept { background: var(--qt-adrenaline); color: var(--qt-white); border: none; border-radius: var(--qt-radius); padding: 10px 18px; font-weight: 600; cursor: pointer; min-height: 44px; }

/* ---------- Slate & Take (detail-page template, replaces plain quickfacts list + pill tag) ---------- */
.qt-tag { border-radius: 999px 999px 999px 3px; position: relative; padding-left: 22px; }
.qt-tag::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.qt-slate { margin-top: 16px; border-radius: var(--qt-radius-lg); overflow: hidden; border: 1.5px solid #17204a; box-shadow: var(--qt-shadow-sm); }
.qt-slate__bar {
  background: repeating-linear-gradient(-45deg, #17204a, #17204a 14px, var(--qt-white) 14px, var(--qt-white) 28px);
  color: var(--qt-white); font-family: var(--qt-font-mono); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: 7px 12px; position: relative;
}
.qt-slate__bar span { background: #17204a; padding: 2px 8px; border-radius: 3px; }
.qt-slate .qt-quickfacts { list-style: none; margin: 0; padding: 0; background: var(--qt-white); }
.qt-slate .qt-quickfacts li { border: none; border-radius: 0; border-bottom: 1px dashed var(--qt-hairline-strong); padding: 10px 14px; font-size: .9rem; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.qt-slate .qt-quickfacts li:last-child { border-bottom: none; }
.qt-slate .qt-quickfacts strong { display: inline; flex: none; }