/* ==========================================================================
   J & S Travel Plans — "the shared field notebook"
   Warm paper, pine ink, terracotta. Mobile-first, dense, quiet.
   Contrast: every text/background pair below meets WCAG 2.2 AA.
   ========================================================================== */

:root {
  --paper:      #faf6ee;
  --card:       #fffdf8;
  --sunk:       #f2ece0;
  --ink:        #1c2b24;
  --quiet:      #5e6b63;   /* 5.2:1 on paper */
  --pine:       #20463a;   /* 9.8:1 on paper */
  --pine-deep:  #12291f;
  --terra:      #a94e33;   /* 5.1:1 on paper */
  --sage:       #6d8375;
  --amber:      #9a6f14;   /* readable amber for text on paper */
  --amber-mark: #d9a83f;   /* decorative amber for marks on pine */
  --cream:      #f7f1e4;   /* 9.4:1 on pine */
  --on-pine:    #a9bcae;   /* 5.3:1 on pine */
  --line:       #e0d8c8;
  --line-firm:  #c9bfab;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;

  --max: 1100px;
  --gutter: 18px;
  --radius: 3px;
  --lift: 0 10px 30px rgb(18 41 31 / 9%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
/* Detail pages stack a sticky header and a sticky jump bar; clear both. */
html:has(.jump) { scroll-padding-top: 112px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}
/* Paper grain. Decorative only, and very quiet. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: .1; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}
img, svg { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; border-radius: 2px; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--max)); margin-inline: auto; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999; padding: 12px 16px;
  background: var(--card); color: var(--ink); font-weight: 700;
  box-shadow: var(--lift); transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Small caps meta label used all over the site. */
.label {
  margin: 0; color: var(--terra);
  font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.label-quiet { color: var(--quiet); }

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 6px max(var(--gutter), calc((100vw - var(--max)) / 2));
  background: rgb(18 41 31 / 96%); color: var(--cream);
  border-bottom: 1px solid rgb(247 241 228 / 14%);
  backdrop-filter: blur(10px);
}
.wordmark {
  display: flex; align-items: baseline; gap: 4px; min-height: 44px; align-content: center;
  color: var(--cream); text-decoration: none; padding-block: 10px;
}
.wordmark b { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; letter-spacing: .02em; }
.wordmark i { color: var(--amber-mark); font-style: normal; font-family: var(--serif); }
.wordmark small {
  display: none; margin-left: 8px; padding-left: 8px; color: var(--on-pine);
  border-left: 1px solid rgb(247 241 228 / 22%);
  font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.site-header nav { display: flex; gap: 2px; }
.site-header nav a {
  display: grid; place-items: center; min-height: 44px; padding: 4px 10px;
  color: var(--cream); border-radius: 30px; text-decoration: none;
  font-size: .72rem; font-weight: 700;
}
.site-header nav a:hover { background: rgb(247 241 228 / 12%); }
.site-header nav a[aria-current="page"] { color: var(--pine-deep); background: var(--amber-mark); }

/* ----------------------------------------------------------------- intro -- */

.intro { padding: 26px 0 4px; }
.intro h1 {
  margin: 6px 0 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.95rem, 7.5vw, 3rem); line-height: 1.02; letter-spacing: -.02em;
}
.intro h1 em { color: var(--terra); font-style: italic; }
.intro p { margin: 10px 0 0; max-width: 46ch; color: var(--quiet); font-size: .93rem; }

/* -------------------------------------------- the call to adventure card -- */

.call-block { padding: 18px 0 6px; }
.call-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.call {
  position: relative; overflow: hidden; margin-top: 10px; padding: 20px 18px 18px;
  background: var(--pine); color: var(--cream); border-radius: var(--radius);
  box-shadow: var(--lift);
}
/* Contour lines: decoration, hidden from assistive tech by being a background. */
.call::after {
  content: ""; position: absolute; inset: auto -30% -60% 30%; height: 150%;
  opacity: .16; pointer-events: none;
  background: repeating-radial-gradient(ellipse at 40% 100%, transparent 0 15px, var(--cream) 16px 17px, transparent 18px 33px);
}
.call > * { position: relative; z-index: 1; }
.call-label { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--amber-mark);
  font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.call-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-mark); flex: none; }
.call-name {
  margin: 12px 0 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.2rem); line-height: .98; letter-spacing: -.025em;
}
.call-where { margin: 8px 0 0; color: var(--on-pine); font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.call-pitch { margin: 14px 0 0; max-width: 52ch; color: var(--cream); font-size: .95rem; }
.call-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; font-size: .74rem; }
.call-state b { color: var(--amber-mark); font-weight: 800; }
.call-state span { color: var(--on-pine); }
.call-open { margin-top: 14px; font-size: .8rem; }
.call-open summary {
  min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--cream); font-weight: 700; text-underline-offset: 4px; text-decoration: underline;
}
.call-open ul { margin: 2px 0 0; padding-left: 18px; color: var(--on-pine); }
.call-open li { margin-top: 4px; }
.call-go { margin: 18px 0 0; }
.call-empty { background: var(--sunk); color: var(--ink); box-shadow: none; border: 1px dashed var(--line-firm); }
.call-empty .call-label { color: var(--quiet); }
.call-count { margin: 10px 0 0; color: var(--quiet); font-size: .76rem; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 12px 20px; border: 0; border-radius: 2px;
  background: var(--amber-mark); color: var(--pine-deep);
  font-size: .82rem; font-weight: 850; text-decoration: none; cursor: pointer;
}
.button-quiet { background: transparent; color: var(--pine); border: 1px solid var(--line-firm); }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--terra); font-size: .8rem; font-weight: 800;
  text-decoration: underline; text-underline-offset: 4px;
}
.rotate-call {
  min-height: 44px; padding: 8px 14px; margin-top: 12px;
  background: transparent; color: var(--cream); border: 1px solid rgb(247 241 228 / 30%);
  border-radius: 30px; font-size: .72rem; font-weight: 750; cursor: pointer;
}
.rotate-call:hover { background: rgb(247 241 228 / 10%); }

/* ------------------------------------------------------- readiness meter -- */

/* Eight ticks, one per planning dimension. The meaning is always also in text,
   never in colour alone. */
.meter { display: inline-flex; gap: 2px; flex: none; }
.meter .tick { width: 7px; height: 14px; border-radius: 1px; background: var(--line-firm); }
.meter .tick[data-value="done"] { background: var(--sage); }
.meter .tick[data-value="partial"] { background: var(--sage); opacity: .5; }
.meter .tick[data-value="na"] { background: transparent; border: 1px dashed var(--line-firm); }
.call .meter .tick { background: rgb(247 241 228 / 22%); }
.call .meter .tick[data-value="done"] { background: var(--amber-mark); }
.call .meter .tick[data-value="partial"] { background: rgb(217 168 63 / 45%); }

/* ------------------------------------------------------------ time chips -- */

.quick-time { padding: 22px 0 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line-firm);
  border-radius: 30px; font-size: .78rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.chip:hover { border-color: var(--pine); }
.chip[aria-pressed="true"] {
  background: var(--pine); color: var(--cream); border-color: var(--pine);
}
/* Selected chips also carry a mark, so state is not colour-only. */
.chip[aria-pressed="true"]::before { content: "✓ "; margin-right: 5px; }

/* ------------------------------------------------------------ trip cards -- */

.collection { padding: 30px 0 10px; }
.collection-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.collection-head h2 {
  margin: 4px 0 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2.3rem); letter-spacing: -.02em;
}
.trip-grid { display: grid; gap: 12px; margin-top: 16px; padding: 0; list-style: none; }

.trip {
  position: relative; padding: 16px; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--line-firm);
  border-radius: var(--radius);
}
.trip[data-state="ready"] { border-left-color: var(--terra); }
.trip[data-state="discuss"] { border-left-color: var(--sage); }
.trip[hidden] { display: none; }
.trip-where { margin: 0; color: var(--quiet); font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.trip-name {
  margin: 5px 0 0; font-family: var(--serif); font-weight: 400;
  font-size: 1.45rem; line-height: 1.1; letter-spacing: -.02em;
}
.trip-name a { display: inline-block; padding-block: 9px; margin-block: -9px; color: inherit; text-decoration: underline; text-decoration-color: var(--line-firm); text-underline-offset: 4px; }
.trip-name a:hover { text-decoration-color: var(--terra); }
.trip-premise { margin: 8px 0 0; color: var(--quiet); font-size: .87rem; }
.trip-facts { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
.fact {
  padding: 4px 8px; background: var(--sunk); border-radius: 2px;
  font-size: .7rem; font-weight: 700; color: var(--ink);
}
.fact-effort[data-effort="gentle"] { background: #dfe8dc; color: #23492f; }
.fact-effort[data-effort="moderate"] { background: #f0e4c8; color: #6a4a10; }
.fact-effort[data-effort="demanding"] { background: #eeddd5; color: #78412c; }
.trip-state {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dotted var(--line-firm);
  font-size: .74rem;
}
.trip-state b { font-weight: 800; }
.trip-state[data-state="ready"] b { color: var(--terra); }
.trip-state span { color: var(--quiet); }
.trip-go { margin: 2px 0 0; }
.no-plan { display: inline-flex; align-items: center; min-height: 44px; color: var(--quiet); font-size: .76rem; font-weight: 700; }

/* --------------------------------------------------------------- filters -- */

.filters { margin-top: 14px; padding: 14px; background: var(--sunk); border-radius: var(--radius); }
.filters[hidden] { display: none; }
.filter-group + .filter-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-firm); }
.filter-legend { margin: 0; color: var(--quiet); font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.filters .chip { padding: 8px 12px; font-size: .74rem; }
.filter-status { margin: 12px 0 0; color: var(--quiet); font-size: .8rem; }
.filter-status b { color: var(--ink); }
.filter-reset { margin-left: 8px; }
.no-results { padding: 24px 16px; background: var(--card); border: 1px dashed var(--line-firm); border-radius: var(--radius); }
.no-results[hidden] { display: none; }

/* ------------------------------------------------------- comparison mode -- */

.compare { margin-top: 26px; border-top: 1px solid var(--line-firm); }
.compare > summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer;
  font-family: var(--serif); font-size: 1.15rem;
}

.compare-note { margin: 0 0 12px; color: var(--quiet); font-size: .78rem; }
.compare-scroll { overflow-x: auto; border: 1px solid var(--line-firm); border-radius: var(--radius); }
.compare-table {
  min-width: 1180px; width: 100%; border-collapse: collapse;
  background: var(--card); font-size: .74rem; line-height: 1.35;
}
.compare-table thead th {
  position: sticky; top: 0; z-index: 1; min-width: 120px;
  background: var(--pine); color: var(--cream);
  font-size: .62rem; letter-spacing: .07em; text-transform: uppercase;
}
.compare-table th, .compare-table td {
  padding: 12px 11px; text-align: left; vertical-align: top;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.compare-table thead th:first-child { min-width: 175px; }
.compare-table tbody th { font-weight: 400; }
.compare-table tbody tr:nth-child(even) { background: var(--paper); }
.compare-table tbody tr[data-state="ready"] { box-shadow: inset 3px 0 var(--terra); }
.compare-table tbody th b, .compare-table tbody th small { display: block; }
.compare-table tbody th b { margin-top: 3px; font-family: var(--serif); font-size: .95rem; font-weight: 600; }
.compare-table tbody th small { margin-top: 2px; color: var(--quiet); font-size: .65rem; }
.compare-table td a { display: inline-block; padding-block: 8px; color: var(--terra); font-weight: 800; text-underline-offset: 3px; }
.compare-table .no-plan { min-height: 0; }
.row-index { color: var(--terra); font-family: var(--serif); font-size: .8rem; }

/* --------------------------------------------------------------- how/why -- */

.method { margin: 34px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line-firm); }
.method h2 { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.method ol { margin: 14px 0 0; padding: 0; list-style: none; }
.method li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px dotted var(--line-firm); }
.method li > span { color: var(--terra); font-family: var(--serif); font-size: 1.1rem; }
.method b { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.method p { margin: 3px 0 0; color: var(--quiet); font-size: .82rem; }

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  margin-top: 44px; padding: 34px var(--gutter) 40px;
  background: var(--pine-deep); color: var(--cream); text-align: center;
}
.footer-mark { font-family: var(--serif); font-size: 1.8rem; }
.footer-mark i { color: var(--amber-mark); font-style: normal; }
.site-footer p { margin: 8px auto 0; max-width: 44ch; color: var(--on-pine); font-size: .78rem; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: var(--amber-mark); font-size: .76rem; font-weight: 800; text-underline-offset: 4px; }

/* ======================================================= trip detail page = */

.trip-head { padding: 24px 0 8px; }
.breadcrumb { margin: 0 0 14px; color: var(--quiet); font-size: .73rem; }
/* Inline links, but still given a 44px tap area without changing the layout. */
.breadcrumb a { display: inline-block; padding-block: 14px; margin-block: -14px; text-underline-offset: 3px; }
.state-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--sunk); border: 1px solid var(--line-firm); border-radius: 30px;
  font-size: .72rem; font-weight: 800;
}
.state-pill .meter .tick { height: 11px; width: 6px; }
.trip-head h1 {
  margin: 14px 0 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 9vw, 3.6rem); line-height: .98; letter-spacing: -.03em;
}
.trip-head h1 em { color: var(--terra); font-style: italic; }
.deck { margin: 12px 0 0; max-width: 56ch; color: var(--quiet); font-size: .97rem; }
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* In-page jump bar: the mobile wayfinding for a long plan. */
.jump {
  position: sticky; top: 56px; z-index: 40; margin-top: 20px;
  background: var(--paper); border-block: 1px solid var(--line-firm);
}
.jump ul { display: flex; gap: 4px; overflow-x: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
.jump a {
  display: grid; place-items: center; min-height: 46px; padding: 6px 12px; flex: none;
  color: var(--pine); font-size: .74rem; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.jump a:hover { color: var(--terra); }

.chapter { padding: 30px 0 6px; }
.chapter > h2 {
  margin: 6px 0 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 6.5vw, 2.4rem); line-height: 1.05; letter-spacing: -.02em;
}
.chapter > h2 + p { margin: 8px 0 0; max-width: 58ch; color: var(--quiet); font-size: .88rem; }

/* Fact table on the detail page. */
.facts-list { margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line-firm); }
.facts-list div { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--line-firm); }
.facts-list dt { color: var(--quiet); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.facts-list dd { margin: 0; font-family: var(--serif); font-size: .95rem; }

/* Truth labels: researched fact vs our choice vs live check. */
.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 2px;
  font-family: var(--sans); font-size: .62rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase;
}
.tag-choice { background: #dfe8dc; color: #23492f; }
.tag-fact { background: #dde5ea; color: #22434f; }
.tag-check { background: #f2ddd4; color: #78412c; }
.legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.legend-row p { flex: 1 1 100%; margin: 4px 0 0; color: var(--quiet); font-size: .74rem; }
/* A dt that carries only a truth label should not reserve a full label column. */
.facts-list dt:has(> .tag) { padding-top: 0; }

.note {
  margin: 16px 0 0; padding: 14px; background: var(--sunk);
  border-left: 3px solid var(--terra); font-size: .84rem;
}
.note b { color: var(--ink); }
.note-check { border-left-color: var(--amber); }

.stays { display: grid; gap: 12px; margin-top: 16px; }
.stay { padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.stay-mountain { background: var(--pine); color: var(--cream); border-color: var(--pine); }
.stay-kind { margin: 0; color: var(--terra); font-size: .67rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.stay-mountain .stay-kind { color: var(--amber-mark); }
.stay h3 { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.05; }
.stay-address { margin: 4px 0 10px; color: var(--quiet); font-size: .74rem; }
.stay-mountain .stay-address { color: var(--on-pine); }
.stay > p { font-size: .87rem; }
.stay-mountain > p { color: var(--cream); }
.stay .facts-list { border-top-color: var(--line-firm); }
.stay-mountain .facts-list { border-top-color: rgb(247 241 228 / 25%); }
.stay-mountain .facts-list div { border-bottom-color: rgb(247 241 228 / 18%); }
.stay-mountain dt { color: var(--amber-mark); }
.stay-mountain .text-link { color: var(--amber-mark); }

/* Route map */
.map { margin-top: 16px; padding: 8px; background: #ebe5d6; border-radius: var(--radius); }
.map svg { display: block; width: 100%; }
.contour { fill: none; stroke: #a9ad9d; stroke-width: 1.2; }
.contour.faded { opacity: .45; }
.lake { fill: #b4c9c1; stroke: #5d8375; stroke-width: 1.5; }
.trail-halo { fill: none; stroke: #f6f1e3; stroke-width: 13; }
.trail { fill: none; stroke: var(--terra); stroke-width: 4; stroke-dasharray: 9 7; }
.map-point circle { fill: var(--pine); stroke: var(--amber-mark); stroke-width: 3; }
.map-point.end circle { fill: var(--terra); }
.map-point text { fill: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 850; text-anchor: middle; }
.map-point text.small { fill: #4d574f; font-size: 11px; }
.map-caption { fill: #4d574f; font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-anchor: middle; }
.map-key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 4px 4px; color: var(--quiet); font-size: .68rem; font-weight: 700; }
.map-key span:first-child { display: flex; align-items: center; gap: 7px; }
.map-key i { width: 24px; border-top: 2px dashed var(--terra); }

.link-rows { display: grid; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.link-rows a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 12px 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none;
}
.link-rows a:hover { border-color: var(--pine); }
.link-rows b { font-family: var(--serif); font-size: 1rem; font-weight: 600; }
.link-rows span { color: var(--quiet); font-size: .72rem; text-align: right; }

/* Days */
.days { margin: 18px 0 0; padding: 0; list-style: none; }
.days > li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding-bottom: 26px; }
.days > li:not(:last-child)::before { content: ""; position: absolute; top: 46px; bottom: 4px; left: 21px; border-left: 1px dashed var(--line-firm); }
.day-mark { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; }
.day-mark span {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--pine); color: var(--cream); font-family: var(--serif); font-size: 1rem;
}
.day-mark small { margin-top: 6px; color: var(--terra); font-size: .6rem; font-weight: 900; letter-spacing: .06em; }
.day-body h3 { margin: 8px 0 0; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.1; }
.day-body > p { margin: 8px 0 0; color: var(--quiet); font-size: .87rem; }
.day-body > p b { color: var(--ink); }
.day-body .facts-list dd { font-size: .88rem; }

/* Booking order + checks */
.order { margin: 16px 0 0; padding: 0; list-style: none; }
.order li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.order li > span { color: var(--terra); font-family: var(--serif); font-size: 1.4rem; }
.order b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.order p { margin: 4px 0 6px; color: var(--quiet); font-size: .84rem; }

.checklist { margin: 16px 0 0; padding: 16px; background: var(--card); border: 1px solid var(--line-firm); border-radius: var(--radius); }
.checklist h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.checklist ul { margin: 12px 0 0; padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .84rem; }
.checklist li::before { content: "☐"; color: var(--terra); font-size: 1.05rem; line-height: 1.2; }

/* Sources */
.sources { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-firm); }
.sources a { display: grid; gap: 2px; min-height: 60px; align-content: center; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.sources b { font-family: var(--serif); font-size: 1rem; font-weight: 600; }
.sources span { color: var(--quiet); font-size: .74rem; }
.researched { margin: 14px 0 0; color: var(--quiet); font-size: .74rem; }

/* --------------------------------------------------- travelled trip state -- */

.preview-banner {
  padding: 14px var(--gutter); background: var(--amber-mark); color: var(--pine-deep);
  font-size: .82rem; font-weight: 700; text-align: center;
}
.preview-banner b { display: block; font-size: .92rem; }
.memories { display: grid; gap: 10px; margin-top: 16px; }
.memory { padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.memory small { display: block; margin-bottom: 8px; color: var(--terra); font-size: .63rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.memory p { margin: 0; font-family: var(--serif); font-size: 1rem; }
.placeholder { color: var(--quiet); font-style: italic; }
.scores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 16px; background: var(--line-firm); border: 1px solid var(--line-firm); border-radius: var(--radius); overflow: hidden; }
.scores div { padding: 12px; background: var(--card); }
.scores dt { color: var(--quiet); font-size: .64rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.scores dd { margin: 4px 0 0; font-family: var(--serif); font-size: 1.05rem; }
.archive-plan { margin-top: 22px; }
.archive-plan > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 2px; cursor: pointer; font-family: var(--serif); font-size: 1.15rem; border-top: 1px solid var(--line-firm); }

/* ========================================================== larger screens = */

@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .wordmark small { display: inline; }
  .intro { padding-top: 40px; }
  .call { padding: 30px 28px 26px; }
  .trip-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .trip { padding: 20px; }
  .stays { grid-template-columns: 1fr 1fr; }
  .stay { padding: 22px; }
  .link-rows { grid-template-columns: repeat(3, 1fr); }
  .link-rows a { display: grid; align-content: space-between; min-height: 92px; }
  .link-rows span { text-align: left; }
  .days > li { grid-template-columns: 62px 1fr; gap: 22px; }
  .days > li:not(:last-child)::before { left: 30px; }
  .day-mark span { width: 62px; height: 62px; font-size: 1.2rem; }
  .scores { grid-template-columns: repeat(3, 1fr); }
  .memories { grid-template-columns: 1fr 1fr; }
  .checklist { padding: 24px; }
  .checklist ul { columns: 2; column-gap: 26px; }
  .checklist li { break-inside: avoid; }
  .filters { padding: 18px; }
  .filter-group { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: start; }
  .filter-legend { padding-top: 12px; }
  .filters .chips { margin-top: 0; }
}

@media (min-width: 900px) {
  /* Title and the call to adventure share the first viewport. */
  .home-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
  .home-top .intro { padding-block: 0; }
  .home-top .call-block { padding-top: 0; }
  .trip-grid { grid-template-columns: repeat(3, 1fr); }
  .detail-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 34px; align-items: start; }
  .detail-top .facts-list { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .site-footer, .jump, .filters, .head-actions, .rotate-call, .quick-time { display: none; }
  body { background: white; }
  body::before { display: none; }
  .call { color: black; background: white; border: 1px solid #999; box-shadow: none; }
  .call::after { display: none; }
  .call-name, .call-label, .call-state b { color: black; }
  .compare, .archive-plan { display: block; }
}

/* Secondary filters live behind a disclosure so the trips stay near the top. */
.more-filters { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-firm); }
.more-filters > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  color: var(--pine); font-size: .78rem; font-weight: 800;
}

.more-filters .filter-group:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* A flex <summary> loses its native triangle, so disclosures state themselves. */
.more-filters > summary, .compare > summary, .archive-plan > summary, .call-open > summary { list-style: none; }
.more-filters > summary::-webkit-details-marker,
.compare > summary::-webkit-details-marker,
.archive-plan > summary::-webkit-details-marker,
.call-open > summary::-webkit-details-marker { display: none; }
.more-filters > summary::after,
.compare > summary::after,
.archive-plan > summary::after,
.call-open > summary::after {
  content: "＋"; margin-left: auto; padding-left: 12px; color: var(--terra);
  font-size: .9rem; font-weight: 700;
}
.call-open > summary::after { margin-left: 8px; color: var(--amber-mark); }
details[open] > summary::after { content: "－"; }