@charset "utf-8";
/* ==========================================================================
   SELF-HOSTED WEB FONTS
   Served from assets/fonts/ on this site's own origin. These pages make
   NO external requests of any kind: no Google Fonts, no CDN, no analytics,
   no scripts, and every image is a local file.

   Where Google offers a variable font one file covers the whole weight
   axis, which is both smaller than the separate static weights and what
   makes the opsz axis used below actually do something. The declared
   weight range is wider than this site uses on purpose: it is byte for
   byte the same file and it guarantees the browser never synthesizes a
   weight it was not given.

   Only latin and latin-ext are included. The unicode-range on each rule
   means a browser downloads only the files a page actually needs.
   ========================================================================== */
/* Archivo 100-900 variable — latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-100-900-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 100-900 variable — latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-100-900-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 100-900 variable — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-100-900-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 100-900 variable — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-100-900-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TWO TANK TRIPS — twotanktrips.com
   Kansas City, MO. Weekend road trips within 300 miles of a U.S. metro.

   Organizing idea: INTERSTATE SIGNAGE. The recurring object is a highway guide
   sign: a green panel with a white rounded rectangle inset from the edge and
   the destination set inside it. Rounded corners appear here and nowhere else,
   because that is what the sign standard specifies. One sign per section, used
   to carry a destination and a distance, never as decoration. The drive-time
   matrix is the hero, because the first question is always "how far is that
   from me".

   Contents
   0.  Self-hosted web fonts
   1.  Tokens
   2.  Reset and base
   3.  Layout and sections
   4.  Masthead and navigation
   5.  Hero: the drive-time matrix
   6.  The guide sign
   7.  Tables
   8.  The cost sheet
   9.  Prose, notes, disclosure
   10. Trip cards, plates, buttons
   11. Forms
   12. Advertising slots
   13. Footer
   14. Utilities
   15. Responsive
   16. Reduced motion and print
   ========================================================================== */

/* -------------------------------------------------------------- 1. Tokens */
:root {
  /* palette */
  --green:   #17603C;
  --white:   #FAFAF8;
  --asphalt: #2B2B2E;
  --amber:   #E9A227;   /* fills, rules; 3.5:1 on green, never text on green */
  --paper:   #EFF1EF;   /* derived: panel one step off the page             */
  --muted:   #4E5054;   /* derived: 7.7:1 on white                          */
  --rule:    #6E7176;   /* derived: 4.7:1 on white                          */
  --on-green:#B4D0BE;   /* derived: 4.6:1 on green                          */

  /* type */
  --head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;

  /* 1.200 scale, fluid */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: clamp(1rem, 0.95rem + 0.22vw, 1.0625rem);
  --t-md:   clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem);
  --t-lg:   clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem);
  --t-xl:   clamp(1.625rem, 1.42rem + 0.9vw, 2.25rem);
  --t-2xl:  clamp(2rem, 1.62rem + 1.7vw, 3rem);
  --t-3xl:  clamp(2.375rem, 1.8rem + 2.6vw, 3.875rem);

  /* spacing, 4px base */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 5.5rem;

  --measure: 36rem;
  --page: 76rem;
  --tap: 2.75rem;
}

/* ------------------------------------------------------ 2. Reset and base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--asphalt);
  font-family: var(--text);
  font-size: var(--t-base);
  line-height: 1.6;
  font-synthesis-weight: none;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; color: var(--asphalt); }
h1, h2, h3 {
  font-family: var(--head);
  /* tightly tracked: a guide sign is set condensed and close */
  font-variation-settings: "wdth" 92;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); line-height: 1.2; letter-spacing: -0.015em; }
h4, h5, h6 { font-family: var(--text); font-size: var(--t-sm); font-weight: 700; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--s4); }

a { color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
a:hover { color: var(--asphalt); }

img, svg, video { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: 700; }
small { font-size: var(--t-sm); }
hr { border: 0; border-top: 2px solid var(--asphalt); margin: var(--s6) 0; }

::selection { background: var(--amber); color: var(--asphalt); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.skip {
  position: absolute; left: var(--s4); top: -4rem; z-index: 50;
  background: var(--green); color: var(--white);
  padding: var(--s3) var(--s5);
  font-size: var(--t-sm); font-weight: 700; text-decoration: none;
}
.skip:focus { top: var(--s4); }

/* ------------------------------------------------- 3. Layout and sections */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--s5); }
.wrap--narrow { max-width: 52rem; }

.sect { padding-block: var(--s7); }
.sect--green { background: var(--green); color: var(--white); }
.sect--green h1, .sect--green h2, .sect--green h3 { color: var(--white); }
.sect--green a { color: var(--white); }
.sect--green .muted { color: var(--on-green); }
.sect--dark { background: var(--asphalt); color: var(--white); }
.sect--dark h1, .sect--dark h2, .sect--dark h3 { color: var(--white); }
.sect--dark a { color: var(--amber); }
.sect--dark .muted { color: #A9ABAF; }

.shead { margin-bottom: var(--s6); }
.shead__key {
  font-family: var(--text); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.06em; color: var(--green); margin: 0 0 var(--s2);
}
.sect--green .shead__key { color: var(--on-green); }
.sect--dark .shead__key { color: var(--amber); }

.lede { font-size: var(--t-md); line-height: 1.5; max-width: var(--measure); }
.dateline { font-size: var(--t-sm); color: var(--muted); }
.sect--green .dateline { color: var(--on-green); }

/* ------------------------------------------- 4. Masthead and navigation */
.masthead { background: var(--green); color: var(--white); border-bottom: 5px solid var(--amber); }
.masthead__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: var(--s4);
}
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--white);
         text-decoration: none; min-height: var(--tap); }
.brand__mark { width: 36px; height: 30px; flex: none; color: var(--white); }
.brand__name {
  font-family: var(--head); font-variation-settings: "wdth" 92; font-weight: 700;
  font-size: 1.3rem; line-height: 1.05; letter-spacing: -0.025em;
}
.brand__name span {
  display: block; font-family: var(--text); font-weight: 500; font-size: var(--t-xs);
  color: var(--on-green); letter-spacing: 0; margin-top: 2px;
}

.nav__toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav__label {
  display: none; min-height: var(--tap); min-width: var(--tap); align-items: center;
  padding: 0 var(--s4); background: var(--amber); color: var(--asphalt);
  border-radius: 4px; font-size: var(--t-sm); font-weight: 700; cursor: pointer;
}
.nav__toggle:focus-visible + .nav__label { outline: 3px solid var(--white); outline-offset: 2px; }

.nav__list { display: flex; flex-wrap: wrap; gap: var(--s5); list-style: none; margin: 0; padding: 0; }
.nav__list a {
  color: var(--white); text-decoration: none; font-size: var(--t-sm); font-weight: 600;
  display: flex; align-items: center; min-height: var(--tap);
  border-bottom: 3px solid transparent;
}
.nav__list a:hover { border-bottom-color: var(--white); color: var(--white); }
.nav__list a[aria-current="page"] { border-bottom-color: var(--amber); }

/* --------------------------------------- 5. Hero: the drive-time matrix */
.hero { background: var(--asphalt); color: var(--white); padding-block: var(--s6) var(--s7); }
.hero__title { font-size: var(--t-3xl); color: var(--white); max-width: 18ch; margin-bottom: var(--s4); }
.hero__intro { font-size: var(--t-md); line-height: 1.5; max-width: 42rem; margin-bottom: var(--s6); }

/* ------------------------------------------------------ 6. The guide sign */
/* A highway guide sign: green field, white rounded rectangle inset from the
   edge, destination inside. Rounded corners appear here and nowhere else on
   this site, because the sign standard specifies them. One per section. */
.guide {
  background: var(--green);
  padding: var(--s3);
  border-radius: 10px;
  margin-bottom: var(--s6);
}
.guide__inner {
  border: 3px solid var(--white);
  border-radius: 7px;
  padding: var(--s5) var(--s6);
  color: var(--white);
}
.guide__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
  padding-block: var(--s2);
}
.guide__row + .guide__row { border-top: 2px solid var(--on-green); margin-top: var(--s3); padding-top: var(--s4); }
.guide__dest {
  font-family: var(--head); font-variation-settings: "wdth" 92; font-weight: 700;
  font-size: var(--t-lg); letter-spacing: -0.02em; margin: 0;
}
.guide__dist {
  font-family: var(--head); font-variation-settings: "wdth" 92; font-weight: 700;
  font-size: var(--t-lg); letter-spacing: -0.02em; margin: 0; white-space: nowrap;
}
.guide__sub { font-size: var(--t-sm); color: var(--on-green); margin: var(--s1) 0 0; width: 100%; }

/* ------------------------------------------------------------ 7. Tables */
/* position: relative matters. These tables contain .visually-hidden spans,
   and an absolutely positioned box is only clipped by an ancestor's
   overflow when that ancestor is its containing block. Without it the
   hidden labels escape the scroller at the table's full width and the
   whole page scrolls sideways on a phone. */
.tscroll { overflow-x: auto; position: relative; margin-bottom: var(--s5); }
.dt {
  border-collapse: collapse; width: 100%; min-width: 40rem;
  font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}
.dt caption { text-align: left; padding-bottom: var(--s3); color: var(--muted); }
.sect--dark .dt caption, .hero .dt caption { color: #A9ABAF; }
.dt th, .dt td {
  text-align: left; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.dt thead th { background: var(--green); color: var(--white); font-weight: 700; border-bottom: 0; white-space: nowrap; }
.dt tbody th { font-weight: 700; white-space: nowrap; background: var(--paper); }
.dt tbody tr:last-child th, .dt tbody tr:last-child td { border-bottom: 0; }
.dt td.n { text-align: right; white-space: nowrap; }
.dt .hrs { font-weight: 700; color: var(--green); }
.matrix-wrap { border: 3px solid var(--amber); background: var(--white); color: var(--asphalt); }
.matrix-wrap .dt { min-width: 52rem; }

/* ------------------------------------------------------ 8. The cost sheet */
/* On every trip page, the same lines in the same order, so two trips can be
   compared rather than only read. */
/* The color is restated rather than inherited because this block sits inside
   .sect--green on every trip page, and inherited white on paper is invisible. */
.cost {
  border: 3px solid var(--asphalt);
  background: var(--paper);
  color: var(--asphalt);
  max-width: 52rem;
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s6);
}
.cost h2, .cost h3 {
  font-family: var(--text); font-size: var(--t-sm); font-weight: 700;
  color: var(--asphalt);
  letter-spacing: 0.05em; margin-bottom: var(--s4);
}
.cost dl {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  margin: 0; font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}
.cost dt { padding: var(--s2) var(--s4) var(--s2) 0; border-top: 1px solid var(--rule); }
.cost dd { margin: 0; padding: var(--s2) 0; border-top: 1px solid var(--rule); text-align: right; font-weight: 700; }
.cost dl > dt:first-of-type, .cost dl > dt:first-of-type + dd { border-top: 0; }
.cost .total { border-top: 3px solid var(--asphalt); font-size: var(--t-md); }
.cost p { font-size: var(--t-xs); color: var(--muted); margin: var(--s4) 0 0; }
.cost a { color: var(--green); }

/* ------------------------------------- 9. Prose, notes, disclosure */
.prose { max-width: var(--measure); }
.prose > * + h2 { margin-top: var(--s7); }
.prose > * + h3 { margin-top: var(--s6); }
.prose h2 { border-bottom: 3px solid var(--green); padding-bottom: var(--s2); }
.prose h2 + p, .prose h3 + p { margin-top: var(--s3); }
.prose ul, .prose ol { padding-left: var(--s5); }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--green); }
.prose .tscroll, .prose figure, .prose .guide { max-width: none; }

blockquote {
  border-left: 6px solid var(--amber); padding-left: var(--s4); margin-left: 0;
  font-size: var(--t-md);
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite { display: block; font-size: var(--t-sm); font-style: normal;
                  color: var(--muted); margin-top: var(--s3); }

details { border-top: 2px solid var(--asphalt); padding-block: var(--s1); }
details:last-of-type { border-bottom: 2px solid var(--asphalt); }
summary {
  cursor: pointer; list-style: none; padding: var(--s3) var(--s6) var(--s3) 0;
  min-height: var(--tap); display: flex; align-items: center;
  font-weight: 700; font-size: var(--t-sm); position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: var(--s2); color: var(--green); font-size: var(--t-md); }
details[open] summary::after { content: "\2212"; }
details > p:last-child { padding-bottom: var(--s3); }

.note {
  border-left: 8px solid var(--amber);
  background: var(--paper);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  font-size: var(--t-sm);
}
.note strong { display: block; font-size: var(--t-base); margin-bottom: var(--s2); }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }
.sect--green .note, .sect--dark .note { background: transparent; color: inherit; }

.disclose {
  border: 2px solid var(--green); padding: var(--s3) var(--s4);
  font-size: var(--t-sm); margin-bottom: var(--s5);
}
.addr { font-size: var(--t-sm); line-height: 1.8; border-top: 3px solid var(--green);
        padding-top: var(--s4); margin-top: var(--s6); }

/* ------------------------------------- 10. Trip cards, plates, buttons */
figure { margin: 0 0 var(--s5); }
figure img { width: 100%; }
figcaption {
  font-size: var(--t-sm); color: var(--muted);
  border-top: 2px solid var(--amber); padding-top: var(--s2); margin-top: var(--s3);
}
.sect--green figcaption { color: var(--on-green); }
.sect--dark figcaption { color: #A9ABAF; }

.trips { list-style: none; margin: 0; padding: 0;
         display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s6); }
.trips__card { display: flex; flex-direction: column; }
.trips__card img { width: 100%; }
.trips__card h3 { margin: var(--s4) 0 var(--s2); }
.trips__card h3 a { color: var(--asphalt); text-decoration-color: var(--amber); }
.trips__card p { margin-bottom: var(--s3); }
.trips__facts {
  list-style: none; margin: auto 0 0; padding: var(--s3) 0 0;
  border-top: 2px solid var(--asphalt);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4);
  font-size: var(--t-xs); color: var(--muted);
}
.trips__facts b { display: block; color: var(--green); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

.plates { list-style: none; margin: 0; padding: 0;
          display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s5); }
.plates figure { margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--s5);
  background: var(--green); color: var(--white);
  border: 2px solid var(--green); border-radius: 4px;
  font-size: var(--t-sm); font-weight: 700; text-decoration: none;
  transition: background 120ms linear, color 120ms linear;
}
.btn:hover { background: var(--asphalt); border-color: var(--asphalt); color: var(--amber); }
.btn--ghost { background: transparent; color: var(--green); }
.btn--ghost:hover { background: var(--green); color: var(--white); }
.sect--green .btn--ghost, .sect--dark .btn--ghost, .hero .btn--ghost {
  color: var(--white); border-color: var(--white);
}
.sect--green .btn--ghost:hover, .sect--dark .btn--ghost:hover, .hero .btn--ghost:hover {
  background: var(--amber); color: var(--asphalt); border-color: var(--amber);
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ------------------------------------------------------------- 11. Forms */
.form { max-width: var(--measure); }
.form__row { margin-bottom: var(--s4); }
label { display: block; font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s2); }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; min-height: var(--tap); padding: var(--s2) var(--s3);
  font: inherit; font-size: var(--t-sm); color: var(--asphalt);
  background: var(--white); border: 2px solid var(--asphalt); border-radius: 4px;
}
textarea { min-height: 9rem; resize: vertical; }
.form__note { font-size: var(--t-sm); color: var(--muted); }

/* -------------------------------------------------- 12. Advertising slots */
/* Reserved at the exact IAB dimensions so nothing moves when a creative
   loads. Left empty on purpose: no ad code is pasted into this site. */
.ad-slot {
  display: flex; align-items: center; justify-content: center; margin-inline: auto;
  border: 2px solid var(--rule); background: var(--paper); color: var(--muted);
  border-radius: 4px;
}
.ad-slot__label { font-size: var(--t-xs); letter-spacing: 0.05em; font-weight: 700; }
.ad-slot--leaderboard { width: 100%; max-width: 728px; height: 90px; margin-block: var(--s5); }
.ad-slot--inline { width: 100%; max-width: 336px; height: 280px; margin-block: var(--s6); }
.ad-slot--rectangle { width: 100%; max-width: 300px; height: 250px; margin-block: var(--s6); }
.sect--green .ad-slot, .sect--dark .ad-slot, .hero .ad-slot {
  background: transparent; border-color: var(--on-green); color: var(--on-green);
}

/* ------------------------------------------------------------ 13. Footer */
.foot { background: var(--asphalt); color: var(--white);
        padding-block: var(--s7) var(--s6); margin-top: var(--s8);
        border-top: 6px solid var(--green); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s6) var(--s5); }
.foot h2, .foot h3 {
  font-family: var(--head); font-variation-settings: "wdth" 92; font-weight: 700;
  font-size: var(--t-base); color: var(--amber); margin-bottom: var(--s3);
  letter-spacing: -0.02em;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: var(--s1); }
.foot a { color: #C3C5C9; text-decoration: none; font-size: var(--t-sm);
          display: inline-flex; align-items: center; min-height: 2rem; }
.foot a:hover { color: var(--white); text-decoration: underline; }
.foot p { font-size: var(--t-sm); color: #C3C5C9; }
.foot__legal {
  border-top: 2px solid #5A5C61; margin-top: var(--s6); padding-top: var(--s4);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between;
  font-size: var(--t-sm); color: #C3C5C9;
}
.foot__legal p { margin: 0; }

/* --------------------------------------------------------- 14. Utilities */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.mt5 { margin-top: var(--s5); }
.mt6 { margin-top: var(--s6); }
.mt7 { margin-top: var(--s7); }
.mb0 { margin-bottom: 0; }
.small { font-size: var(--t-sm); }
.muted { color: var(--muted); }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s6); }
.people { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s5);
          align-items: start; margin-bottom: var(--s6); }
.people img { width: 100%; }
.dest-head { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s6); align-items: start; }

/* -------------------------------------------------------- 15. Responsive */
@media (max-width: 62rem) { .dest-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 52rem) {
  .nav__label { display: inline-flex; }
  .nav__list { display: none; width: 100%; flex-direction: column; gap: 0;
               border-top: 3px solid var(--amber); margin-top: var(--s3); }
  .nav__toggle:checked ~ .nav__list { display: flex; }
  .nav__list li { border-bottom: 1px solid var(--on-green); }
  .nav__list a { width: 100%; border-bottom: 0; }
  .masthead__inner nav { width: 100%; }
}
@media (max-width: 44rem) {
  .people { grid-template-columns: 8rem minmax(0, 1fr); }
  .trips__facts { grid-template-columns: 1fr; }
  .guide__inner { padding: var(--s4); }
}
@media (max-width: 34rem) {
  .wrap { padding-inline: var(--s4); }
  .people { grid-template-columns: minmax(0, 1fr); }
  .people img { max-width: 10rem; }
  .cost { padding: var(--s4); }
  .sect { padding-block: var(--s6); }
}

/* --------------------------------------- 16. Reduced motion and print */
/* Nothing on this site moves. The only transitions are the two color
   changes on .btn and on links, switched off here. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, a, .nav__list a { transition: none; }
}

@media print {
  .masthead, .foot, .ad-slot, .skip { display: none; }
  body { background: #fff; color: #000; }
  .hero, .sect--green, .sect--dark { background: #fff; color: #000; }
  .hero h1, .sect--green h2, .sect--dark h2 { color: #000; }
  .guide { background: #fff; border: 2px solid #000; }
  .guide__inner { border-color: #000; color: #000; }
  .dt thead th { background: #fff; color: #000; border-bottom: 2px solid #000; }
  a { color: #000; }
}