:root {
  --bg:              #f4fcfa;  /* ultralight mint — the cream read as yellow */
  --surface:         #f9fdfc;  /* between ground and card */
  --card:            #ffffff;
  --field-bg:        #ffffff;  /* inputs, selects, segmented tracks */
  --line:            #ccdde1;  /* sky-derived, so borders sit in palette */
  --text:            #282c33;  /* deep slate */
  --muted:           #5c6270;  /* secondary prose */
  --muted-strong:    #3a3f4a;  /* body copy */
  --accent:          #317681;  /* ACTION + BRAND TEXT — links, headings */
  --accent-deep:     #245761;  /* ink on soft fills */
  --accent-soft:     #ffa69e;  /* button fills — the coral finally earns its place */
  --accent-soft-hi:  #ffc6bd;  /* button borders / hover */
  --btn-ink:         #651c10;  /* ink on coral buttons */
  --warm:            #ffa69e;  /* DECORATION ONLY — fails as type */
  --warm-ink:        #9d3125;  /* warm where it must carry words */
  --mint:            #b8f2e6;  /* decoration */
  --meta:            #555c6d;  /* non-interactive metadata ink */
  --chip-ink:        #176354;  /* pills — the green shade */
  --chip-bg:         #e3f8f3;
  --chip-line:       #bee4dd;
  --neutral-ink:     #40645c;  /* facts, recessive — quiet green */
  --neutral-bg:      #f3faf8;
  --focus:           #266673;  /* focus ring */
  --info-bg:         #e1f0f4;  /* the one light box fill */
  --info-line:       #c2dae0;
  --warn-bg:         #fbf2df;  /* the cream survives here, as a warning tint */
  --warn-line:       #e6d1a8;
  --danger:          #9b3027;
  /* type — a ratio scale in rem so browser font preferences work */
  --fs-3xl: 2.25rem;  --fs-2xl: 1.75rem; --fs-xl: 1.375rem;
  --fs-lg: 1.125rem;  --fs-md: 1rem;     --fs-sm: .875rem;
  --fs-xs: .8125rem;  --fs-2xs: .75rem;
  --lh-tight: 1.14;   --lh-snug: 1.32;   --lh-body: 1.55;
  --track-tight: -.015em; --track-label: .07em;
  /* space — 4px grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-11: 44px;
  /* radius */
  --r-sm: 10px; --r-md: 12px; --radius: 16px; --r-pill: 999px;
  --shadow-ink: 44, 48, 58;
  --shadow: 0 1px 2px rgba(var(--shadow-ink), .04), 0 6px 22px rgba(var(--shadow-ink), .07);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: var(--fs-md)/var(--lh-body) system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji";
}
/* Base headings. Before this h2 had no rule, so the same element rendered at
   26/24/22px or fell to the UA default depending on where it sat. */
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight);
     letter-spacing: var(--track-tight); margin: 0 0 var(--s-3); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug);
     letter-spacing: var(--track-tight); margin: var(--s-8) 0 var(--s-2); }
h3 { font-size: var(--fs-lg); line-height: var(--lh-snug);
     letter-spacing: 0; margin: 0 0 var(--s-2); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
.hidden { display: none !important; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* ---------- top nav ---------- */
.top { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 6px; }
.brand { font-weight: 800; letter-spacing: .2em; color: var(--accent); font-size: var(--fs-sm); }
/* Cairn mark: four stones widening as they descend. Reads as a stack from the
   bottom up and as a road receding from the top down — same drawing either way. */
.brand .mark { letter-spacing: 0; margin-right: 7px; display: inline-block;
  line-height: 0; vertical-align: -0.3em; }
.brand .mark svg { display: block; width: 16px; height: 17px; }
.brand .beta { font-style: normal; letter-spacing: var(--track-label); font-weight: 600; font-size: var(--fs-2xs);
  color: var(--chip-ink); background: var(--chip-bg); border: 1px solid var(--chip-line);
  border-radius: var(--r-pill); padding: 2px 10px; margin-left: 10px; vertical-align: 2px; }
.navlink { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.navlink:hover { color: var(--accent-deep); text-decoration: none; }

/* ---------- hero with illustrated panorama ---------- */
.hero2 { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-inner { position: relative; z-index: 1; padding-top: 46px; padding-bottom: 200px; }
.hero2 h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.08; margin: 0 0 14px; letter-spacing: var(--track-tight); }
.hl { color: var(--accent); }
.sub { color: var(--muted-strong); max-width: 590px; margin: 0 0 22px; font-size: var(--fs-lg); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
a.go { display: inline-block; text-decoration: none; }
.ghost {
  background: rgba(255, 255, 255, .75); color: var(--accent-deep); font-weight: 600; font-size: var(--fs-sm);
  border: 1px solid var(--accent); border-radius: var(--r-md); padding: 13px 20px; cursor: pointer;
  backdrop-filter: blur(3px);
}
.ghost:hover { background: var(--field-bg); }
a.ghost { display: inline-block; text-decoration: none; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { font-size: var(--fs-xs); color: var(--neutral-ink); background: rgba(255, 255, 255, .85); font-weight: 600;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 13px; box-shadow: var(--shadow); }

/* ---------- section headers ---------- */
.secthead { font-size: var(--fs-2xl); letter-spacing: var(--track-tight); margin: 44px 0 6px; }
.sectsub { color: var(--muted); margin: 0 0 18px; }

/* ---------- route cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 10px; }
#routeCards .grouplabel { font-size: var(--fs-xs); margin: 18px 0 10px; }
.rcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s;
  display: flex; flex-direction: column;
}
.rcard.active { cursor: pointer; }
.rcard.active:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(var(--shadow-ink),.07), 0 14px 34px rgba(var(--shadow-ink),.10); }
.rart { display: block; width: 100%; height: 116px; }
.rimgwrap { position: relative; height: 132px; overflow: hidden; }
.rimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcard.active:hover .rimg { transform: scale(1.03); }
.rimg { transition: transform .25s ease; }
.rcredit { position: absolute; right: 6px; bottom: 6px; font-size: var(--fs-2xs); line-height: 1;
  color: var(--field-bg); background: rgba(var(--shadow-ink), .55); border-radius: 50%; padding: 4px 5px;
  text-decoration: none; cursor: help; }
.rcredit:hover { background: rgba(var(--shadow-ink), .8); text-decoration: none; }
.filterbar { margin: 0 0 16px; }
.sampleteaser { margin-top: 34px; padding: 22px 24px 24px; }
.sampleteaser h2 { margin: 0 0 6px; }
.sampleteaser .go { text-decoration: none; }
.rbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rname { font-weight: 700; font-size: var(--fs-md); }
.rmeta { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.rbtn {
  margin-top: auto; align-self: flex-start;
  background: var(--accent-soft); color: var(--btn-ink);
  font-weight: 700; font-size: var(--fs-sm); border: 1px solid var(--accent-soft-hi); border-radius: var(--r-sm);
  padding: 9px 16px; cursor: pointer;
}
.rbtn:hover { filter: brightness(1.06); }
.rtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.modeTag { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--chip-ink); background: var(--chip-bg); border: 1px solid var(--chip-line); border-radius: var(--r-md); padding: 3px 9px; white-space: nowrap; }
.rowlinks { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.linkchip { background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 15px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--accent-deep); cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow); }
.linkchip:hover { border-color: var(--accent); text-decoration: none; }
.maplink { font-size: var(--fs-xs); margin-left: 8px; color: var(--meta); font-weight: 600; }
.srcmark { font-size: var(--fs-2xs); margin-left: 6px; color: var(--muted); cursor: help; }
/* Saved trips are cards with the journey's own photograph. They used to be a
   row of unlabelled controls where the title took the whole line and the
   status select stretched after it, reading like a page-wide filter. */
.tripgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; margin-top: 4px; }
.tripcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tripcard .thumb { display: block; width: 100%; height: 132px; object-fit: cover; background: var(--neutral-bg); }
.tripcard .tbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tripcard .tname { font-weight: 700; font-size: var(--fs-md); line-height: var(--lh-snug); }
.tripcard .tmeta { color: var(--muted); font-size: var(--fs-xs); }
.tripcard .tdate { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--meta); }
.tripcard .tdate input { background: var(--field-bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 5px 8px; font-size: var(--fs-xs); font-family: inherit; }
.tripcard .tacts { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.tripcard .tacts .go { padding: 9px 16px; font-size: var(--fs-sm); }
.tripcard .tacts .rest { margin-left: auto; display: flex; gap: 6px; }
.emailrow { display: inline-flex; gap: 8px; align-items: center; }
.emailin { background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 14px; font-size: var(--fs-sm); min-width: 190px; }
.dayact { display: inline-block; margin-top: 10px; font-size: var(--fs-sm); font-weight: 600; }
.rcard.dim { opacity: .62; }
.rcard.dim .rart { filter: saturate(.25); }
.soonTag { align-self: flex-start; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--neutral-ink); background: var(--neutral-bg);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px 10px; margin-top: auto; }

/* ---------- trip form head ---------- */
.formhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.formhead h2 { margin: 0; }
.pill { background: var(--chip-bg); border: 1px solid var(--chip-line); color: var(--chip-ink);
  font-size: var(--fs-xs); font-weight: 700; border-radius: var(--r-pill); padding: 4px 13px; }
.linklike { background: none; border: 0; color: var(--muted); font-size: var(--fs-xs);
  text-decoration: underline; cursor: pointer; padding: 0; }
.linklike:hover { color: var(--accent-deep); }

/* ---------- how it works ---------- */
.how { margin: 10px 0 8px; }
.hcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hcol { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow); }
.hnum { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--field-bg); font-weight: 800; font-size: var(--fs-sm); margin-bottom: 10px; }
.hcol h3 { margin: 0 0 6px; font-size: var(--fs-md); }
.hcol p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 760px) { .hcols { grid-template-columns: 1fr; } .hero-inner { padding-bottom: 170px; } }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

/* ---------- trip form ---------- */
.tripform { max-width: 680px; margin: 30px auto; }
.tripform h2 { margin: 0 0 6px; font-size: var(--fs-2xl); letter-spacing: var(--track-tight); }
.lbl { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  margin: 18px 0 8px; text-transform: uppercase; letter-spacing: var(--track-label); }
.lbl b { color: var(--accent); }
.lbl .opt { text-transform: none; letter-spacing: 0; font-weight: 500; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
select, textarea, input[type="range"] { width: 100%; accent-color: var(--accent); }
select, textarea {
  background: var(--field-bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 12px; font-size: var(--fs-sm); font-family: inherit;
}
textarea { resize: vertical; }
.micro { font-size: var(--fs-xs); color: var(--muted); margin: 6px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.grouplabel { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--meta); margin: 12px 0 7px; }
#interests .grouplabel:first-child { margin-top: 2px; }
.chips button {
  background: var(--field-bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 8px 15px; font-size: var(--fs-sm); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.chips button:hover:not(:disabled) { border-color: var(--accent); }
.chips button.on { background: var(--accent-soft); border-color: var(--btn-ink); color: var(--btn-ink); font-weight: 600; }
.chips button:disabled { opacity: .45; cursor: not-allowed; }
.chips .soon { font-size: var(--fs-2xs); margin-left: 5px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--field-bg); }
.seg button {
  background: transparent; color: var(--muted); border: 0; padding: 10px 20px;
  font-size: var(--fs-sm); cursor: pointer;
}
.seg button.on { background: var(--chip-bg); color: var(--chip-ink); font-weight: 700; }
.seg.mini { margin-left: 0; }
.seg.mini button { padding: 5px 10px; font-size: var(--fs-xs); }
/* Three groups — navigation, preferences, account — separated by a hairline.
   Everything is flex:0 0 auto so a long <select> can never stretch to fill a
   wrapped row, which is what made the language box span the whole header. */
/* flex:0 0 auto matters — the segmented control is overflow:hidden, so as a
   shrinkable flex item it silently clipped its own second button. */
.footprefs { display: flex; align-items: center; gap: 10px; float: right; margin-left: 16px; }
.footprefs > * { flex: 0 0 auto; }
.navtools { display: flex; align-items: center; justify-content: flex-end;
  gap: 0 16px; row-gap: 8px; flex-wrap: wrap; }
.navgroup { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.navgroup > * { flex: 0 0 auto; }
.navgroup + .navgroup { padding-left: 16px; border-left: 1px solid var(--line); }
.navgroup.prefs { gap: 8px; }
.navlink.email { max-width: 190px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--accent-deep); }
.navlink.quiet { color: var(--muted); font-weight: 500; }
.navlink.quiet:hover { color: var(--danger); }
.langsel { background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 5px 7px; font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--meta);
  max-width: 132px; }
.essence { color: var(--muted-strong); font-size: var(--fs-sm); line-height: 1.55; margin: 2px 0 12px; max-width: 720px; }
.essence.big { font-size: var(--fs-md); background: var(--info-bg); border: 1px solid var(--info-line);
  border-radius: var(--r-md); padding: 13px 16px; max-width: none; margin: 0 0 14px; }
.extras h3 { margin: 16px 0 8px; font-size: var(--fs-md); }
.extras h3:first-child { margin-top: 0; }
.kbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.kbcell { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: var(--fs-xs); }
.kbcell b { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--muted); margin-bottom: 2px; }
.kbcell.warnside { background: var(--warn-bg); border-color: var(--warn-line); }
.kbcell.warnside span { font-weight: 700; }
.xsec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trendstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 8px; }
.trendcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; }
.trendcard:hover { text-decoration: none; border-color: var(--accent); }
.trendcard img { width: 100%; height: 84px; object-fit: cover; display: block; }
.trendcard .tbody { padding: 9px 12px 11px; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.costline { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.emailbox { margin-top: 14px; }
.emailbox h3 { margin: 0 0 8px; font-size: var(--fs-md); }

/* grouped plan notes */
.notecard { margin: 0 0 14px; padding: 16px 20px; }
.notecard h3 { margin: 0 0 8px; font-size: var(--fs-md); }
.notelist { margin: 0; padding-left: 20px; }
.notelist li { margin: 6px 0; font-size: var(--fs-sm); color: var(--muted-strong); }
.notelist li.warnline { color: var(--accent-deep); font-weight: 600; }

/* sign-in modal */
.modal { position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(var(--shadow-ink), .45);
  backdrop-filter: blur(2px); }
.modal-card { position: relative; z-index: 1; width: 100%; max-width: 440px;
  padding: 26px 28px; box-shadow: 0 20px 60px rgba(var(--shadow-ink), .28); }
.modal-card h2 { margin: 0 0 8px; }
.modal-card .refinerow { flex-wrap: nowrap; }
.modal-close { position: absolute; top: 10px; right: 12px; border: 0; background: none;
  font-size: var(--fs-lg); cursor: pointer; color: var(--muted); padding: 4px 8px; }
.modal-close:hover { color: var(--text); }

/* plan header: who/why/cost on the left, numbers on the right */
.planhead { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px;
  padding: 20px 22px; margin-bottom: 12px; align-items: center; }
.planhead h2 { margin: 0 0 8px; font-size: var(--fs-xl); letter-spacing: var(--track-tight); }
.planhead .essence { margin: 0 0 10px; max-width: none; }
.planhead .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px; margin: 0; box-shadow: none; }
@media (max-width: 860px) { .planhead { grid-template-columns: 1fr; } }

/* sidebar: tweak box + map travel together while the days scroll */
.stickwrap { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; }
.stickwrap #map { position: relative; top: 0; height: 460px; }
.stickwrap .refine { margin: 0; }
.stickwrap .refinerow { flex-direction: column; align-items: stretch; }
.stickwrap textarea.refinein { resize: vertical; min-height: 70px; font: inherit; }
.go-wrap { text-align: right; }
.go {
  background: var(--accent-soft);
  color: var(--btn-ink); font-weight: 700; font-size: var(--fs-md);
  border: 1px solid var(--accent-soft-hi); border-radius: var(--r-md); padding: 14px 24px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(var(--shadow-ink), .14);
  transition: transform .1s, filter .12s;
}
.go:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ---------- loading ---------- */
.loading { max-width: 680px; margin: 30px auto; text-align: center; color: var(--muted); }
.spinner {
  width: 36px; height: 36px; margin: 8px auto 14px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- results ---------- */
.stats { display: flex; gap: 30px; flex-wrap: wrap; margin: 28px 0 12px; padding: 20px 26px; }
.stat .n { font-size: var(--fs-2xl); font-weight: 800; color: var(--accent); letter-spacing: var(--track-tight); }
.stat .l { font-size: var(--fs-2xs); color: var(--muted); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; }
.note {
  background: var(--info-bg); border: 1px solid var(--info-line);
  border-radius: var(--r-sm); padding: 11px 15px; margin: 8px 0; font-size: var(--fs-sm);
}
.note.warn { background: var(--warn-bg); border-color: var(--warn-line); }

.split { display: grid; grid-template-columns: 1fr 400px; gap: 18px;
         margin: 14px 0 var(--s-6); }
/* The sticky map travels the whole day-list column, so without this padding it
   ends its run flush against the next card and reads as glued to it. */
.mapcol { position: relative; padding-bottom: var(--s-4); }
#map { position: sticky; top: 14px; height: 560px; padding: 0; overflow: hidden; }

.day { margin: 0 0 16px; }
.day h3 { margin: 0 0 3px; font-size: var(--fs-lg); }
.day h3 .d { color: var(--accent); }
.day .meta { color: var(--muted); font-size: var(--fs-xs); margin-bottom: 8px; }
.dayintro { color: var(--muted-strong); font-size: var(--fs-sm); font-style: italic; margin: 0 0 12px;
  border-left: 3px solid var(--info-line); padding-left: 10px; }
.asof { color: var(--meta); font-style: italic; }
.item .why { color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.item { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.item .slot { color: var(--meta); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); min-width: 46px; padding-top: 2px; }
.item .body { flex: 1; }
.item .nm { font-weight: 600; }
.item .nm a { color: var(--text); text-decoration-color: var(--line); }
.item .sub2 { color: var(--muted); font-size: var(--fs-xs); margin-top: 1px; }
.item .warn2 { color: var(--danger); font-size: var(--fs-xs); margin-top: 2px; }
.tag { display: inline-block; font-size: var(--fs-2xs); color: var(--chip-ink); background: var(--chip-bg);
  border: 1px solid var(--chip-line); border-radius: var(--r-md); padding: 1px 8px; margin-left: 6px; }
.ty { display: inline-block; width: 22px; text-align: center; color: var(--accent); }
.fb { display: flex; gap: 6px; align-items: flex-start; padding-top: 2px; }
.fb button {
  background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px 9px; cursor: pointer; font-size: var(--fs-xs); color: var(--muted);
}
.fb button.on { border-color: var(--btn-ink); color: var(--btn-ink); background: var(--accent-soft); }

.stay {
  background: var(--info-bg); border: 1px dashed var(--warn-line);
  border-radius: var(--r-sm); padding: 11px 15px; margin-top: 10px; font-size: var(--fs-sm);
}
.stay b { color: var(--accent-deep); }
.stay .opts { color: var(--muted); font-size: var(--fs-xs); margin: 3px 0; }

.grounding { margin: 22px 0 10px; font-size: var(--fs-sm); color: var(--muted); }
.grounding b { color: var(--meta); }
.again {
  background: var(--field-bg); border: 1px solid var(--line); color: var(--muted);
  border-radius: var(--r-sm); padding: 10px 16px; cursor: pointer; margin: 6px 0 30px;
}
.again:hover { border-color: var(--accent); color: var(--accent-deep); }
.foot { color: var(--muted); font-size: var(--fs-xs); padding: 20px 20px 36px; border-top: 1px solid var(--line); margin-top: 22px; }

/* trip summary, weather, refusal, refine, packing */
.tripsummary { font-size: var(--fs-md); color: var(--muted-strong); background: var(--field-bg); border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 13px 16px; margin: 10px 0; box-shadow: var(--shadow); }
.wstrip { font-size: var(--fs-xs); color: var(--meta); margin: -4px 0 8px; }
.fstrip { font-size: var(--fs-xs); color: var(--accent-deep); margin: 0 0 8px; font-weight: 600; }
#sampleDemo .day { max-width: 760px; }
.nocard { background: var(--info-bg); border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 16px 18px; margin: 12px 0; }
.nocard b { color: var(--accent-deep); font-size: var(--fs-md); }
.nocard p { margin: 6px 0 0; color: var(--muted-strong); }
.refine { margin: 18px 0 0; }
.refinerow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.refinein { flex: 1; min-width: 240px; background: var(--field-bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 14px; font-size: var(--fs-sm); font-family: inherit; }
/* What each tweak actually did, kept beside the box that made it. */
.tweaklog { border-left: 3px solid var(--accent); background: var(--info-bg);
  border-radius: 0 10px 10px 0; padding: 9px 12px; margin: 8px 0; }
.tweaklog.tweakfail { border-left-color: var(--warn-line); background: var(--info-bg); }
.tweakask { font-size: var(--fs-xs); color: var(--muted); font-style: italic; margin-bottom: 3px; }
.tweakreply { font-size: var(--fs-sm); color: var(--text); }
.tweakdiff { list-style: none; margin: 7px 0 0; padding: 0; font-size: var(--fs-xs); }
.tweakdiff li { padding: 1px 0; font-variant-numeric: tabular-nums; }
.twout { color: var(--accent); text-decoration: line-through; text-decoration-color: var(--line); }
.twin { color: var(--accent-deep); }
.twmore { color: var(--muted); font-style: italic; padding-left: 2px; }
.sub2.tweakfail { color: var(--accent); margin-top: 6px; }
.packing { margin: 14px 0 0; }
.packing h3 { margin: 0 0 4px; }
.packrow { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0;
  border-top: 1px solid var(--line); cursor: pointer; font-size: var(--fs-sm); }
.packrow input { margin-top: 3px; accent-color: var(--accent); }

@media print {
  .top, .hero2, #pickRoute, #tripform, #how, .mapcol, .fb, .rowlinks, .refine,
  .again, .go, .dayact { display: none !important; }
  .split { grid-template-columns: 1fr; }
  .day, .packing { break-inside: avoid; box-shadow: none; }
  body { background: var(--field-bg); }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  #map { position: relative; height: 380px; }
  .row2 { grid-template-columns: 1fr; }
  .go-wrap { text-align: left; }
  /* The sidebar stops being a sidebar here, so nothing should stick. */
  .stickwrap { position: static; }
}

/* Phones: the brand and the tools can't share a line, so give each its own
   rather than letting "ODYCAIRN" break away from its beta pill. */
@media (max-width: 640px) {
  .top { flex-wrap: wrap; row-gap: 10px; }
  .brand { white-space: nowrap; flex: 1 1 auto; }
  .navtools { width: 100%; gap: 8px 12px; }
  .navsep { display: none; }        /* separator only reads right inline */
  .hero-inner { padding-bottom: 140px; }
  .cta-row { gap: 10px; }
  .tweakdiff { font-size: var(--fs-xs); }
}

/* Brand line — the cairn idea in three words, mark and all. */
.tagline { display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-md); font-weight: 600; color: var(--accent);
  margin: 0 0 var(--s-3); letter-spacing: var(--track-tight); }
.tagline .mark svg { width: 15px; height: 16px; display: block; }
.foot .tagline { margin-bottom: var(--s-4); }
.eyebrow { font-size: var(--fs-sm); font-weight: 700; color: var(--accent);
  letter-spacing: var(--track-label); text-transform: none;
  margin: 0 0 var(--s-2); }