/* Legacy guide content styles, re-pointed at the new palette. */
:root {
  --ground: var(--bg); --surface: var(--surface); --surface-sunk: var(--panel);
  --ink: var(--fg); --ink-soft: var(--fg-muted); --ink-faint: var(--fg-muted);
  --rule: var(--rule); --cobalt: var(--link); --cobalt-soft: var(--label-bg);
  --albero: var(--label); --albero-soft: var(--label-bg); --verdigris: var(--link);
  --inverse-bg: #243047; --inverse-fg: #F6EEE4; --inverse-mut: #C8D2E0;
  --inverse-rule: #33405A; --inverse-well: #1A2230; --btn-fg: var(--action-fg);
  --stub: var(--surface); --stub-edge: var(--rule); --stub-ink: var(--fg);
  --read: 68ch; --maxw: 1200px;
  --f-display: "DM Serif Display", Georgia, serif;
  --f-body: "DM Sans", Arial, sans-serif;
}
/* Roads of Adventure — Andalusia field guides
   Palette: Triana azulejo cobalt + albero (bullring sand) ochre on lime-wash neutrals */




*, *::before, *::after { box-sizing: border-box; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--albero); outline-offset: 3px; border-radius: 2px;
}


/* ---------- masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky; top: 0; z-index: 40;
}


/* ---------- shared type ---------- */

h1, h2, h3, h4 { font-family: var(--f-display); text-wrap: balance; margin: 0; }


.lede { font-size: 1.14rem; color: var(--ink-soft); }


/* ---------- hero ---------- */

/* Hero: the photo keeps its own proportions. It is scaled, never cropped
   and never stretched — only bounded so it can't take the whole screen. */
.hero { background: var(--surface-sunk); border-bottom: 1px solid var(--rule); }

.hero-frame {
  max-width: var(--maxw); margin-inline: auto; padding-inline: 20px;
  display: flex; justify-content: center;
}

.hero-img {
  width: auto; max-width: 100%; height: auto; max-height: 66vh;
  display: block;
}

.hero-body { padding-block: 26px 30px; }

.hero-body .wrap { display: flex; flex-direction: column; gap: 12px; }


.hero-flat {
  padding-block: clamp(44px, 7vw, 84px) clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--rule);
}

.hero-flat .wrap { display: flex; flex-direction: column; gap: 16px; }


/* ---------- byline / trust strip ---------- */

.byline {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 14px; color: var(--ink-faint);
  padding-block: 16px;
  border-bottom: 1px solid var(--rule);
}

.byline b { color: var(--ink-soft); font-weight: 600; }


/* ---------- layout ---------- */

main { padding-block: 0 0; }

.section + .section { border-top: 1px solid var(--rule); }

.stack-lg { display: flex; flex-direction: column; gap: 34px; }


/* ---------- quick answer ---------- */

.quickbox {
  background: var(--cobalt-soft);
  border-left: 3px solid var(--cobalt);
  padding: 26px 26px 28px;
  display: flex; flex-direction: column; gap: 14px;
}

.quickbox h2 { font-size: 1.35rem; }

.quickbox ul { margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: 7px; }

.quickbox li { max-width: var(--read); }


/* ---------- itinerary day ---------- */

.day-head {
  display: flex; align-items: baseline; gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 30px;
  border-bottom: 2px solid var(--ink);
}

.day-num {
  font-family: var(--f-display);
  font-size: 2.6rem; font-weight: 600; line-height: 1;
  color: var(--albero);
  font-variant-numeric: tabular-nums;
}

.day-head .day-meta { margin-left: auto; font-size: 14px; color: var(--ink-faint); }


/* ---------- a place ---------- */

.place { display: grid; gap: 22px; scroll-margin-top: 80px; }

.place + .place { margin-top: 52px; padding-top: 52px; border-top: 1px solid var(--rule); }

.place-head { display: flex; gap: 16px; align-items: flex-start; }

.place-index {
  flex: none;
  font-family: var(--f-body); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cobalt);
  background: var(--cobalt-soft);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  margin-top: 6px;
}

.place-head h2 { flex: 1; min-width: 0; overflow-wrap: break-word; }

.place-body { display: flex; flex-direction: column; gap: 15px; min-width: 0; }


.figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }

.figure img { border-radius: 2px; width: 100%; height: auto; }

/* Portrait shots get capped by height instead, so they never tower over the
   column. Nothing is ever cropped or stretched — proportions stay natural. */
.figure.tall img { width: auto; max-width: min(100%, 56vh); }

.figure figcaption { font-size: 13.5px; color: var(--ink-faint); max-width: var(--read); }

.figure figcaption .stamp {
  font-variant-numeric: tabular-nums; color: var(--albero); font-weight: 700;
}

.figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

/* .figure-pair.tall retained as a hook; images keep natural proportions. */


/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }

th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--rule); }

thead th {
  font-family: var(--f-body); font-size: 12px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-faint); background: var(--surface-sunk);
}

tbody tr:last-child td { border-bottom: none; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

tfoot td { font-weight: 700; background: var(--surface-sunk); border-top: 2px solid var(--rule); }


/* ---------- toc ---------- */

.toc { columns: 2; column-gap: 34px; font-size: 15px; }

.toc a { display: block; padding: 5px 0; color: var(--ink-soft); text-decoration: none; break-inside: avoid; }

.toc a:hover { color: var(--cobalt); text-decoration: underline; }

.toc a b { color: var(--albero); font-variant-numeric: tabular-nums; margin-right: 8px; }


/* ---------- cards / destinations ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: start; }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
}

a.card:hover { border-color: var(--cobalt); }

.card img { width: 100%; height: auto; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.card-body h3 { font-size: 1.25rem; }

.card-body p { font-size: 14.5px; color: var(--ink-soft); }

.card-tag {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em;
  color: var(--albero);
}

.card.soon { opacity: .72; }

.card.soon .card-tag { color: var(--ink-faint); }

.card-placeholder {
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, var(--surface-sunk) 0 10px, transparent 10px 20px),
    var(--cobalt-soft);
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.5rem; color: var(--ink-faint);
}


/* ---------- callouts ---------- */

.note {
  background: var(--albero-soft);
  border-left: 3px solid var(--albero);
  padding: 16px 20px;
  font-size: 15.5px;
}

.note b { font-family: var(--f-body); }

.note p { max-width: none; }


/* ---------- cta / affiliate ---------- */

.cta {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--cobalt);
  padding: 22px 24px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  box-shadow: var(--shadow);
}


/* ---------- faq ---------- */

.faq { display: flex; flex-direction: column; }

.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 4px 0;
}

.faq summary {
  cursor: pointer; padding: 14px 0;
  font-family: var(--f-display); font-size: 1.08rem; font-weight: 600;
  list-style: none; display: flex; gap: 12px; align-items: flex-start;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::before {
  content: "+"; color: var(--albero); font-weight: 600; flex: none; width: 16px;
}

.faq details[open] summary::before { content: "\2212"; }

.faq details > p { padding: 0 0 16px 28px; max-width: var(--read); }


/* ---------- signup ---------- */

.signup {
  background:
    radial-gradient(120% 92% at 82% 100%, var(--glow) 0%, rgba(245,167,46,.06) 40%, rgba(245,167,46,0) 68%),
    var(--inverse-bg);
  color: var(--inverse-fg);
  padding: clamp(30px, 5vw, 48px) 0;
}


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

footer {
  border-top: 1px solid var(--rule);
  padding-block: 34px 48px;
  font-size: 14.5px; color: var(--ink-faint);
}


.disclosure {
  font-size: 13.5px; color: var(--ink-faint);
  border-left: 2px solid var(--rule); padding-left: 14px;
  max-width: var(--read);
}

  .fieldnote { padding: 20px 20px 18px 28px; font-size: 15.5px; }

  .figure-pair { grid-template-columns: 1fr; }

  .toc { columns: 1; }

  .day-head .day-meta { margin-left: 0; width: 100%; }


/* ---------- simple page head (about / legal) ---------- */

.page-head {
  padding-block: clamp(40px, 6vw, 72px) clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--rule);
}

.page-head .wrap { display: flex; flex-direction: column; gap: 14px; }


/* ---------- prose ---------- */

.prose { display: flex; flex-direction: column; gap: 26px; }

.prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 10px; }

.prose h3 { margin-top: 4px; }

.prose ul, .prose ol {
  margin: 0; padding-left: 1.2em; max-width: var(--read);
  display: flex; flex-direction: column; gap: 8px;
}

.prose .block { display: flex; flex-direction: column; gap: 12px; }

.prose dl { margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: var(--read); }

.prose dt { font-weight: 700; }

.prose dd { margin: 4px 0 0; }


/* ---------- author card ---------- */

.author {
  display: grid; grid-template-columns: 230px 1fr; gap: 28px;
  background: var(--surface); border: 1px solid var(--rule);
  padding: 24px; box-shadow: var(--shadow); align-items: start;
}

.author img { border-radius: 2px; width: 100%; height: auto; }

.author .author-body { display: flex; flex-direction: column; gap: 10px; }
 .author { grid-template-columns: 1fr; }


/* ---------- TODO marker: must be removed before launch ---------- */

.todo {
  display: block;
  background: repeating-linear-gradient(-45deg, #FFF4D6 0 12px, #FFEDBF 12px 24px);
  color: #6B4A00;
  border: 2px dashed #C99A16;
  padding: 14px 16px;
  font-size: 15px;
  max-width: var(--read);
}

.todo::before {
  content: "REPLACE BEFORE LAUNCH — ";
  font-weight: 700; letter-spacing: .06em; font-size: 12px;
}

:root[data-theme="dark"] .todo, :root:not([data-theme="light"]) .todo { color: #4A3400; }


/* ==================================================================
   DESTINATION PALETTES
   One layout, one type pairing. Each guide repoints four colour
   tokens via data-city on <body>. Everything else is unchanged.
   ================================================================== */

/* --- light --- */
body[data-city="seville"]  { --cobalt:#1F4E8C; --cobalt-soft:#E5EDF7; --albero:#A66A12; --albero-soft:#F6ECD9; }

body[data-city="cordoba"]  { --cobalt:#8E2F32; --cobalt-soft:#F8E9E9; --albero:#B5842A; --albero-soft:#F8EFDB; }

body[data-city="granada"]  { --cobalt:#2E6B4F; --cobalt-soft:#E4F0EA; --albero:#C2894A; --albero-soft:#F8EFE3; }

body[data-city="malaga"]   { --cobalt:#116C86; --cobalt-soft:#E1F0F4; --albero:#D4762F; --albero-soft:#FBEBDF; }

body[data-city="caminito"] { --cobalt:#5B6B37; --cobalt-soft:#EDF1E2; --albero:#B5762B; --albero-soft:#F8EEDD; }

body[data-city="costa"]    { --cobalt:#4A3B7A; --cobalt-soft:#EAE7F5; --albero:#B4761F; --albero-soft:#F8EEDB; }

body[data-city="marrakech"]  { --cobalt:#B23A2C; --cobalt-soft:#FAE8E4; --albero:#C08A1E; --albero-soft:#F9F0D9; }

body[data-city="sahara"]     { --cobalt:#A8621A; --cobalt-soft:#FBEEDD; --albero:#7C6A3E; --albero-soft:#F2EFE2; }

body[data-city="fes"]        { --cobalt:#2E6A5B; --cobalt-soft:#E3F0EB; --albero:#B07D2A; --albero-soft:#F8EFDB; }

body[data-city="chefchaouen"]{ --cobalt:#2A62A8; --cobalt-soft:#E4EDF8; --albero:#C08A1E; --albero-soft:#F9F0D9; }

  :root:not([data-theme="light"]) body[data-city="seville"]  { --cobalt:#7FB2EA; --cobalt-soft:#17283C; --albero:#E0A951; --albero-soft:#2C2415; }

  :root:not([data-theme="light"]) body[data-city="cordoba"]  { --cobalt:#E38E90; --cobalt-soft:#331A1B; --albero:#E0B455; --albero-soft:#2C2415; }

  :root:not([data-theme="light"]) body[data-city="granada"]  { --cobalt:#7FC9A5; --cobalt-soft:#16291F; --albero:#E0B07A; --albero-soft:#2A2216; }

  :root:not([data-theme="light"]) body[data-city="malaga"]   { --cobalt:#67C2DC; --cobalt-soft:#122C33; --albero:#F0A468; --albero-soft:#2E2014; }

  :root:not([data-theme="light"]) body[data-city="caminito"] { --cobalt:#A8C06B; --cobalt-soft:#212715; --albero:#E0A951; --albero-soft:#2C2415; }

  :root:not([data-theme="light"]) body[data-city="costa"]    { --cobalt:#A99BE8; --cobalt-soft:#221D38; --albero:#EAA85C; --albero-soft:#2E2415; }

  :root:not([data-theme="light"]) body[data-city="marrakech"]  { --cobalt:#EE9182; --cobalt-soft:#38201C; --albero:#E5BA55; --albero-soft:#2C2614; }

  :root:not([data-theme="light"]) body[data-city="sahara"]     { --cobalt:#E9A45E; --cobalt-soft:#332414; --albero:#CBBE8C; --albero-soft:#282516; }

  :root:not([data-theme="light"]) body[data-city="fes"]        { --cobalt:#79CBB5; --cobalt-soft:#152923; --albero:#DFAE58; --albero-soft:#2C2415; }

  :root:not([data-theme="light"]) body[data-city="chefchaouen"]{ --cobalt:#84B4F0; --cobalt-soft:#15243A; --albero:#E5BA55; --albero-soft:#2C2614; }


/* --- dark: explicit choice --- */
:root[data-theme="dark"] body[data-city="seville"]  { --cobalt:#7FB2EA; --cobalt-soft:#17283C; --albero:#E0A951; --albero-soft:#2C2415; }

:root[data-theme="dark"] body[data-city="cordoba"]  { --cobalt:#E38E90; --cobalt-soft:#331A1B; --albero:#E0B455; --albero-soft:#2C2415; }

:root[data-theme="dark"] body[data-city="granada"]  { --cobalt:#7FC9A5; --cobalt-soft:#16291F; --albero:#E0B07A; --albero-soft:#2A2216; }

:root[data-theme="dark"] body[data-city="malaga"]   { --cobalt:#67C2DC; --cobalt-soft:#122C33; --albero:#F0A468; --albero-soft:#2E2014; }

:root[data-theme="dark"] body[data-city="caminito"] { --cobalt:#A8C06B; --cobalt-soft:#212715; --albero:#E0A951; --albero-soft:#2C2415; }

:root[data-theme="dark"] body[data-city="costa"]    { --cobalt:#A99BE8; --cobalt-soft:#221D38; --albero:#EAA85C; --albero-soft:#2E2415; }

:root[data-theme="dark"] body[data-city="marrakech"]  { --cobalt:#EE9182; --cobalt-soft:#38201C; --albero:#E5BA55; --albero-soft:#2C2614; }

:root[data-theme="dark"] body[data-city="sahara"]     { --cobalt:#E9A45E; --cobalt-soft:#332414; --albero:#CBBE8C; --albero-soft:#282516; }

:root[data-theme="dark"] body[data-city="fes"]        { --cobalt:#79CBB5; --cobalt-soft:#152923; --albero:#DFAE58; --albero-soft:#2C2415; }

:root[data-theme="dark"] body[data-city="chefchaouen"]{ --cobalt:#84B4F0; --cobalt-soft:#15243A; --albero:#E5BA55; --albero-soft:#2C2614; }


/* A thin band of the city's two colours under the masthead —
   the only place the palette is stated rather than just used. */
/* The band bleeds full-width with negative margins; clip so it can never
   create a horizontal scrollbar. */
body[data-city] .masthead { overflow-x: clip; }

body[data-city] .masthead::after {
  content: ""; display: block;
  height: 3px;
  background: linear-gradient(to right, var(--cobalt) 0 38%, var(--albero) 38% 62%, var(--cobalt) 62% 100%);
  margin: 14px -9999px -1px;
}


/* ==================================================================
   HANDWRITTEN PHOTO CAPTIONS
   Caveat on captions only — never on hours, prices or tables.
   ================================================================== */

.figure figcaption {
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 19.5px;
  line-height: 1.32;
  color: var(--ink-soft);
  max-width: 56ch;
  letter-spacing: .003em;
}

.figure figcaption .stamp {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--albero);
  letter-spacing: .01em;
}
 .figure figcaption { font-size: 18.5px; }


/* ==================================================================
   TRIP MAP + DESTINATION INDEX
   The homepage's primary navigation. Every trip is a group; every
   city and location inside it is its own link. Inline SVG — no tiles,
   no external requests, no cookies.
   ================================================================== */

.trips { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(270px,1fr); gap: 28px; align-items: start; }

.trips + .trips { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--rule); }


.map-card { background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 8px; }

.map-card svg { width: 100%; height: auto; display: block; }


/* map base */
.map-water     { fill: #CFE0EA; }

.map-land      { fill: #F3EFE6; }

.map-land-alt  { fill: #E7E1D4; }

.map-outline   { fill: none; stroke: #9DB6C4; stroke-width: 1.6; stroke-linejoin: round; }

.map-river     { fill: none; stroke: #8FB4C9; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.map-ridge     { fill: none; stroke: #C3B69B; stroke-width: 2.4; stroke-linecap: round; }

.map-sealabel  { font-family: var(--f-body); font-size: 17px; font-weight: 700; letter-spacing: .22em;
                 fill: #6E93A8; text-transform: uppercase; }

.map-minor     { font-family: var(--f-body); font-size: 15px; fill: #7E93A0; letter-spacing: .04em; }

.map-country   { font-family: var(--f-body); font-size: 16px; font-weight: 700; letter-spacing: .2em; fill: #A79A82; }

  :root:not([data-theme="light"]) .map-water { fill: #15242E; }

  :root:not([data-theme="light"]) .map-land { fill: #232B31; }

  :root:not([data-theme="light"]) .map-land-alt { fill: #1D242A; }

  :root:not([data-theme="light"]) .map-outline { stroke: #3C525F; }

  :root:not([data-theme="light"]) .map-river { stroke: #3F6C82; }


/* routes, coloured per trip */
.trip-route { fill: none; stroke: var(--trip-c, #1F4E8C); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

.trip-route.spur { stroke-width: 2.4; stroke-dasharray: 8 8; opacity: .8; }

.trip-route.flight { stroke-width: 2.2; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .75; }


/* pins */
.pin { cursor: pointer; }

.pin .halo { fill: var(--trip-c, #1F4E8C); opacity: 0; transition: opacity .13s ease; }

.pin .dot  { fill: var(--trip-c, #1F4E8C); stroke: #fff; stroke-width: 3; transition: r .13s ease; }

.pin .ring { fill: none; stroke: #fff; stroke-width: 2; opacity: .9; }

.pin .lbl  { font-family: var(--f-body); font-size: 21px; font-weight: 700; fill: #16202B; paint-order: stroke;
             stroke: rgba(255,255,255,.85); stroke-width: 4px; }

.pin .sub  { font-family: var(--f-body); font-size: 16px; fill: #5D6B77; paint-order: stroke;
             stroke: rgba(255,255,255,.8); stroke-width: 3.5px; }

  :root:not([data-theme="light"]) .pin .lbl { fill: #EAF0F5; stroke: rgba(13,18,23,.85); }

  :root:not([data-theme="light"]) .pin .sub { fill: #9FAFBB; stroke: rgba(13,18,23,.8); }

  :root:not([data-theme="light"]) .pin .dot { stroke: #0D1217; }

  :root:not([data-theme="light"]) .pin .ring { stroke: #0D1217; }

.pin:hover .halo, .pin.active .halo, .pin:focus-visible .halo { opacity: .25; }

.pin:hover .dot,  .pin.active .dot  { r: 13; }

.pin.minor .dot { r: 8; }

.pin.minor:hover .dot, .pin.minor.active .dot { r: 11; }

.pin:focus-visible { outline: none; }


/* the whole-trip badge sitting on the map */
.trip-badge rect { fill: var(--trip-c, #1F4E8C); }

.trip-badge text { font-family: var(--f-body); font-size: 19px; font-weight: 700; fill: #fff; letter-spacing: .06em; }

.trip-badge { cursor: pointer; }

.trip-badge:hover rect { fill: var(--ink); }


/* ---- the index beside the map ---- */
.trip-index { display: flex; flex-direction: column; gap: 26px; }

.trip-group { --trip-c: #1F4E8C; }


.trip-head {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-left: 4px solid var(--trip-c);
  background: var(--surface); padding: 15px 17px; box-shadow: var(--shadow);
}

.trip-head:hover { border-color: var(--trip-c); border-left-color: var(--trip-c); }

.trip-head .kick { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--trip-c); }

.trip-head h3 { font-size: 1.22rem; margin: 5px 0 4px; }

.trip-head .meta { font-size: 13.5px; color: var(--ink-faint); }

.trip-head .go { font-size: 13.5px; font-weight: 700; color: var(--trip-c); margin-top: 7px; display: block; }


.trip-stops { display: flex; flex-direction: column; margin-top: 2px; }

.trip-stops .cap {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); padding: 14px 4px 7px;
}

.stop {
  display: flex; gap: 12px; align-items: baseline;
  padding: 10px 10px; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}

.stop:hover, .stop.active { background: var(--cobalt-soft); }

.stop .day {
  flex: none; width: 40px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: 3px;
}

.stop.is-spur .day { color: var(--albero); }

.stop .name { font-weight: 700; font-size: 15.5px; }

.stop .meta { display: block; font-weight: 400; font-size: 13px; color: var(--ink-faint); }

.trip-note { font-size: 13.5px; color: var(--ink-faint); padding-top: 12px; }


.trip-soon {
  border: 1px dashed var(--rule); padding: 22px 20px; color: var(--ink-faint);
  font-size: 14.5px; background: var(--surface-sunk);
}

.trip-soon b { display: block; font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); margin-bottom: 6px; }

  .map-card { position: sticky; top: 22px; }

  .trips { grid-template-columns: 1fr; }

  .pin .lbl { font-size: 30px; }

  .pin .sub { font-size: 23px; }

  .map-sealabel { font-size: 23px; }

  .map-minor, .map-country { font-size: 21px; }

  .trip-badge text { font-size: 24px; }


/* ==================================================================
   TRIPS: COVER, CITY SEARCH, ZOOMABLE WORLD MAP, CITY PANEL
   The map is inline SVG with a JS-driven viewBox — no tiles, no
   external requests, no cookies. Pins counter-scale so labels and
   dots stay the same size on screen at every zoom level.
   ================================================================== */

.trips-section { padding: 0 0 56px; }


/* --- full-bleed cover --- */
.trips-cover { position: relative; margin-bottom: 30px; }

.trips-cover img { width: 100%; height: auto; display: block; }

.trips-cover-inner {
  position: absolute; inset: auto 0 0 0;
  padding: 118px 0 30px;
  background: linear-gradient(to top, rgba(6,12,20,.82) 0%, rgba(6,12,20,.66) 38%, rgba(6,12,20,.30) 72%, rgba(6,12,20,0) 100%);
}

.trips-cover-inner .eyebrow { color: #F4DCAC; }

.trips-cover-inner h1 {
  color: #fff; margin: 4px 0 0;
  font-size: clamp(1.85rem, 3.5vw, 2.9rem); line-height: 1.1;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
  max-width: 20ch;
}

  .trips-cover-inner { padding: 62px 0 18px; }

  .trips-cover-inner h1 { max-width: none; }


/* --- city search --- */
.city-search { position: relative; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.city-search input {
  flex: 1 1 280px; min-width: 0;
  font-family: var(--f-body); font-size: 16px;
  padding: 13px 15px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
}

.city-search input:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -1px; }

.city-search .btn { flex: none; }

.city-search .small { flex-basis: 100%; margin: 0; color: var(--ink-faint); }


.search-results {
  position: absolute; z-index: 30; top: 54px; left: 0; right: 0;
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow);
  max-height: 340px; overflow-y: auto;
}

.search-results li { border-bottom: 1px solid var(--rule); }

.search-results li:last-child { border-bottom: 0; }

.search-results button {
  display: flex; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 10px 13px; background: none; border: 0; cursor: pointer; color: inherit;
  font-family: var(--f-body); font-size: 15px;
}

.search-results button:hover, .search-results button[aria-selected="true"] { background: var(--cobalt-soft); }

.search-results img { width: 54px; height: 41px; flex: none; }

.search-results .r-name { font-weight: 700; display: block; }

.search-results .r-sub { font-size: 12.5px; color: var(--ink-faint); display: block; }

.search-results .r-none { padding: 12px 13px; font-size: 14.5px; color: var(--ink-faint); }


/* --- world map --- */
.worldmap { background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 8px; }


#wm { width: 100%; height: auto; display: block; touch-action: none; cursor: grab; }

#wm.is-panning { cursor: grabbing; }

#wm-cities[hidden], #wm-clusters[hidden] { display: none; }

  :root:not([data-theme="light"]) .wm-pin .lbl { fill: #E8EDF2; stroke: #101820; }

  :root:not([data-theme="light"]) .wm-pin .sub { fill: #9AAAB6; stroke: #101820; }

  :root:not([data-theme="light"]) .wm-pin .dot { stroke: #101820; }

  :root:not([data-theme="light"]) .wm-sea text { fill: #4E6472; }

:root[data-theme="dark"] .wm-pin .lbl { fill: #E8EDF2; stroke: #101820; }

:root[data-theme="dark"] .wm-pin .sub { fill: #9AAAB6; stroke: #101820; }

:root[data-theme="dark"] .wm-pin .dot { stroke: #101820; }

:root[data-theme="dark"] .wm-sea text { fill: #4E6472; }


/* --- city panel --- */
.city-panel {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(240px,.95fr); gap: 0;
  background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--trip-c, var(--cobalt));
  box-shadow: var(--shadow); overflow: hidden;
}

.city-panel[hidden] { display: none; }

.cp-media img { width: 100%; height: auto; display: block; }

.cp-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; }

.cp-kick { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--trip-c, var(--cobalt)); }

.cp-body h3 { font-size: 1.5rem; margin: 0; }

.cp-desc { font-size: 15.5px; color: var(--ink-soft); margin: 0; max-width: 48ch; }

.cp-trip { display: grid; grid-template-columns: 148px minmax(0,1fr); gap: 14px; align-items: center;
           border-top: 1px solid var(--rule); padding-top: 14px; }

.cp-trip .mm { background: var(--surface-sunk); border: 1px solid var(--rule); padding: 4px; }

.cp-trip .mm svg { width: 100%; height: auto; display: block; }

.mm-land { fill: #EFEADF; }

.mm-route { fill: none; stroke: var(--trip-c, #1F4E8C); stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }

.mm-route.sp { stroke-dasharray: 20 20; stroke-width: 7; }

.mm-route.fl { stroke-dasharray: 4 20; stroke-width: 7; }

.mm-dot { fill: var(--trip-c, #1F4E8C); opacity: .5; }

.mm-dot.is-here { opacity: 1; stroke: #fff; stroke-width: 7; }

.cp-trip .t-name { font-family: var(--f-display); font-size: 1.05rem; display: block; }

.cp-trip .t-blurb { font-size: 13.5px; color: var(--ink-faint); display: block; margin-top: 4px; }

.cp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 2px; }

.cp-close {
  font-family: var(--f-body); font-size: 13px; font-weight: 700; padding: 9px 14px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink-soft); cursor: pointer;
}

.cp-close:hover { border-color: var(--cobalt); color: var(--cobalt); }

  :root:not([data-theme="light"]) .mm-land { fill: #23303A; }

:root[data-theme="dark"] .mm-land { fill: #23303A; }
 .city-panel { grid-template-columns: 1fr; }
 .cp-trip { grid-template-columns: 1fr; }


.trips[hidden] { display: none; }


.trips-intro { font-size: 16.5px; color: var(--ink-soft); max-width: var(--read); margin: 0; }

.map-land { stroke: #F3EFE6; stroke-width: 0.9; }

#wm-routes[hidden] { display: none; }

  :root:not([data-theme="light"]) .map-land { stroke: #2A3742; }

  :root:not([data-theme="light"]) .wm-land-labels text { fill: #4A5A66; }

:root[data-theme="dark"] .map-land { stroke: #2A3742; }

:root[data-theme="dark"] .wm-land-labels text { fill: #4A5A66; }


/* --- world map: cartography --- */
#wm { --sea-hi: #DCE9F2; --sea-lo: #C3D8E6; }

#wm-scalebar {
  display: block; height: 7px; min-width: 40px;
  border: 1px solid var(--ink-faint); border-top: 0;
  position: relative;
}

#wm-scalebar::after {
  content: attr(data-km);
  position: absolute; left: 0; bottom: 8px; white-space: nowrap;
  font-family: var(--f-body); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--ink-faint);
}

  :root:not([data-theme="light"]) #wm { --sea-hi: #16242E; --sea-lo: #101C25; }

  :root:not([data-theme="light"]) .wm-grat { stroke: #2E4350; }

  :root:not([data-theme="light"]) .wm-shelf { stroke: #1D3341; }

  :root:not([data-theme="light"]) .wm-land { fill: #2A3239; stroke: #2A3239; }

  :root:not([data-theme="light"]) .wm-border { stroke: #3D4650; }

  :root:not([data-theme="light"]) .wm-sea text { fill: #5A7B90; }

  :root:not([data-theme="light"]) .wm-country text { fill: #66707A; }

:root[data-theme="dark"] #wm { --sea-hi: #16242E; --sea-lo: #101C25; }

:root[data-theme="dark"] .wm-grat { stroke: #2E4350; }

:root[data-theme="dark"] .wm-shelf { stroke: #1D3341; }

:root[data-theme="dark"] .wm-land { fill: #2A3239; stroke: #2A3239; }

:root[data-theme="dark"] .wm-border { stroke: #3D4650; }

:root[data-theme="dark"] .wm-sea text { fill: #5A7B90; }

:root[data-theme="dark"] .wm-country text { fill: #66707A; }


/* ==================================================================
   THE STUB — the practical detail for a place, written as prose.
   Shaped like a torn ticket, because every number on this site came
   off one. Replaces the old visit-card table: no grid, no rows.
   ================================================================== */

:root { --stub: #FFFDF8; --stub-edge: #D8C8A6; --stub-ink: #16233F; }

/* the planning surface: dark panel, light letters, ochre accents */
:root {
  --pcard-bg:  #131C26;
  --pcard-obj: #1E2A36;
  --pcard-ink: #FFFFFF;
  --pcard-mut: #B8C4D0;
  --pcard-edge:#3A4856;
  --pcard-acc: #E4B45F;
  --pcard-dim: #6B5730;
  --pcard-blue:#7FB2EA;
}

  :root:not([data-theme="light"]) { --pcard-bg: #1C2733; --pcard-obj: #26333F; }

:root[data-theme="dark"] { --pcard-bg: #1C2733; --pcard-obj: #26333F; }

  :root:not([data-theme="light"]) { --stub: #182339; --stub-edge: #3A4763; --stub-ink: #EDE3D4; }

:root[data-theme="dark"] { --stub: #182339; --stub-edge: #3A4763; --stub-ink: #EDE3D4; }


.fieldnote {
  position: relative;
  margin: 6px 0;
  max-width: 78ch;
  padding: 24px 28px 22px 40px;
  color: var(--stub-ink);
  font-size: 16px;
  line-height: 1.62;
  /* scalloped left edge: half-circles bitten out every 22px */
  background:
    radial-gradient(circle at 0 11px, rgba(0,0,0,0) 8px, var(--stub) 8.5px)
    0 0 / 100% 22px repeat-y;
}

/* the tear line just inside the perforation */
.fieldnote::before {
  content: "";
  position: absolute; left: 22px; top: 18px; bottom: 18px;
  border-left: 1px dashed var(--stub-edge);
}


.fn-kicker {
  font-family: var(--f-body);
  font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--cobalt);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 9px;
}

.fn-kicker::after {
  content: ""; flex: 1; height: 1px;
  background: repeating-linear-gradient(to right, var(--stub-edge) 0 4px, transparent 4px 8px);
}


.fieldnote .fn-line {
  margin: 0 0 11px;
  max-width: none;
}

.fieldnote .fn-line:last-of-type { margin-bottom: 0; }

.fieldnote .fn-line b:first-child {
  font-family: var(--f-body);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
  margin-right: .35em;
}

.fieldnote a { color: var(--cobalt); }

.fieldnote .fn-src {
  margin: 14px 0 0; padding-top: 11px;
  border-top: 1px dashed var(--stub-edge);
  font-size: 13.5px; color: var(--ink-faint);
}

.fieldnote .flag { vertical-align: baseline; }

  .fieldnote::before { left: 16px; }

  .fieldnote { padding-left: 32px; }


/* ------------------------------------------------------------------
   Planning steps — a numbered spine down the left margin
------------------------------------------------------------------ */
.steps { display: flex; flex-direction: column; }

.step { position: relative; padding: 0 0 34px 66px; }

.step:last-child { padding-bottom: 0; }

.step::before {
  content: ""; position: absolute; left: 21px; top: 50px; bottom: 4px;
  border-left: 1px dashed var(--rule);
}

.step:last-child::before { display: none; }

.step-num {
  position: absolute; left: 0; top: 0;
  width: 43px; height: 43px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--albero-soft); color: var(--albero);
  border: 1px solid var(--albero);
  font-family: var(--f-display); font-size: 1.1rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.step h3 { margin: 7px 0 0; font-size: 1.22rem; }

.step > p { margin: 11px 0 0; }

.step ul { margin: 11px 0 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: 6px; }

.step li { max-width: var(--read); }

.step-take {
  margin: 14px 0 0; padding: 11px 0 0;
  border-top: 1px dashed var(--rule);
  font-size: 14.5px; color: var(--ink-soft); max-width: var(--read);
}

.step-take b { font-family: var(--f-body); color: var(--ink); }

  .step { padding-left: 0; padding-bottom: 30px; }

  .step::before { display: none; }

  .step-num { position: static; margin-bottom: 10px; }


/* Onward links — a plain index, no cards */
.linklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 0 38px; }

.linklist a {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
  font-family: var(--f-display); font-size: 1.06rem; font-weight: 600;
}

.linklist a:hover { color: var(--cobalt); }

.linklist a span {
  display: block; font-family: var(--f-body); font-size: 14px; font-weight: 400;
  color: var(--ink-faint); margin-top: 3px;
}


/* The promise, carried over from the trips cover */
.promise {
  max-width: 74ch; margin: 0;
  padding: 22px 0 0; border-top: 3px solid transparent;
  border-image: linear-gradient(to right, var(--gold-bright), var(--bougain) 62%, var(--rule)) 1;
  font-size: 1.06rem; line-height: 1.62; color: var(--ink-soft);
}


/* ------------------------------------------------------------------
   Post cards — the guide index
------------------------------------------------------------------ */
.guide-group + .guide-group { margin-top: 46px; }

.group-head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 12px; margin-bottom: 26px;
  border-bottom: 1px solid var(--ink); border-bottom-width: 2px;
}

.group-head h3 { font-size: 1.32rem; }

.group-head .group-meta {
  margin-left: auto; font-family: var(--f-body); font-size: 12px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint);
  white-space: nowrap;
}

.group-head a.group-meta { color: var(--cobalt); text-decoration: none; }

.group-head a.group-meta:hover { text-decoration: underline; }


.postgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 34px 26px; }


.postcard { display: flex; flex-direction: column; gap: 11px; color: inherit; text-decoration: none; }

.postcard-media { overflow: hidden; background: var(--surface-sunk); }

.postcard-media img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}

.postcard:hover .postcard-media img { transform: scale(1.04); }

.postcard-meta {
  font-family: var(--f-body); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--albero); margin: 2px 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.postcard h4 { font-family: var(--f-display); font-weight: 600; font-size: 1.16rem; line-height: 1.24; margin: 0; }

.postcard:hover h4 { color: var(--cobalt); }

.postcard p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

.postcard:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }


/* Featured guide — the method panel */
.leadcard {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: var(--inverse-bg); color: var(--inverse-fg);
  text-decoration: none; align-items: stretch; box-shadow: var(--shadow);
}


/* Compact masthead band for the home page */
.coverband { position: relative; background: var(--ink); }


/* Trust strip */
.band-night {
  background:
    radial-gradient(120% 92% at 80% 100%, var(--glow) 0%, rgba(245,167,46,.05) 42%, rgba(245,167,46,0) 70%),
    var(--inverse-bg);
  color: var(--inverse-fg);
}


/* ------------------------------------------------------------------
   Trip blocks on the trips page — each one its own panel, led by its
   header photo
------------------------------------------------------------------ */
.trips {
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 0 26px 28px;
}

.trips + .trips { margin-top: 40px; padding-top: 0; border-top: 1px solid var(--rule); }


.tripbanner {
  grid-column: 1 / -1;
  position: relative; display: block; overflow: hidden;
  margin: 0 -26px 26px; background: var(--ink);
  color: inherit; text-decoration: none;
}

.tripbanner img {
  width: 100%; height: auto; aspect-ratio: 3.4 / 1; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}

.tripbanner:hover img { transform: scale(1.035); }

.tripbanner-inner {
  position: absolute; inset: auto 0 0 0; padding: 78px 30px 22px;
  background: linear-gradient(to top, rgba(8,13,18,.9) 0%, rgba(8,13,18,.5) 55%, rgba(8,13,18,0) 100%);
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px;
}

.tripbanner .kick {
  flex: 0 0 100%; margin: 0; max-width: none;
  font-family: var(--f-body); font-size: 11px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: #F0D49B;
}

.tripbanner h3 { color: #fff; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.14; margin: 5px 0 0; flex: 0 1 auto; }

.tripbanner .meta { margin: 0 0 4px; font-size: 14px; color: rgba(255,255,255,.84); max-width: none; }

.tripbanner .go {
  max-width: none; margin: 0 0 4px auto; font-family: var(--f-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #F0D49B; white-space: nowrap;
}

.tripbanner:hover .go { color: #fff; }

  .trips { padding: 0 16px 22px; }

  .tripbanner { margin: 0 -16px 20px; }

  .tripbanner img { aspect-ratio: 16 / 9; }

  .tripbanner-inner { padding: 60px 18px 16px; }

  .tripbanner .go { margin-left: 0; flex-basis: 100%; }


/* ------------------------------------------------------------------
   Home page: the destination directory and the latest list
------------------------------------------------------------------ */
.dirlist { display: flex; flex-direction: column; }


/* ------------------------------------------------------------------
   Planning guide — the field manual: step index, planning cards,
   and a checklist the reader can actually tick
------------------------------------------------------------------ */
/* the planning table — seven objects, each one a step */
.pg-map-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pg-map {
  display: block; width: 100%; min-width: 880px; height: auto;
  background: var(--pcard-bg); border: 1px solid var(--pcard-edge);
}

.pg-desk { stroke: var(--pcard-edge); stroke-width: 2; fill: none; }

.o-hit { fill: transparent; }

.pg-obj { cursor: pointer; }

.pg-obj .o-line  { fill: none; stroke: var(--pcard-mut); stroke-width: 2.4;
                   stroke-linecap: round; stroke-linejoin: round; }

.pg-obj .o-fill  { fill: var(--pcard-obj); }

.pg-obj .o-acc   { fill: var(--pcard-dim); stroke: none; }

.pg-obj .o-acc2  { fill: none; stroke: var(--pcard-edge); stroke-linecap: round; }

.pg-obj .o-dot   { fill: var(--pcard-edge); }

.pg-obj .o-ring  { fill: none; stroke: var(--pcard-acc); stroke-width: 2.6; }

.pg-obj .o-route { fill: none; stroke: var(--pcard-blue); stroke-width: 2.4; stroke-dasharray: 7 6;
                   stroke-linecap: round; }

.pg-obj .o-perf  { fill: none; stroke: var(--pcard-mut); stroke-width: 2; stroke-dasharray: 4 5; }

.pg-obj .o-steam { fill: none; stroke: var(--pcard-edge); stroke-width: 2.4; stroke-linecap: round; }

.pg-obj .o-lbl {
  fill: var(--pcard-mut); font-family: var(--f-body); font-size: 19px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}

.pg-obj .o-line, .pg-obj .o-acc, .pg-obj .o-acc2, .pg-obj .o-lbl,
.pg-obj .o-ring, .pg-obj .o-steam { transition: fill .16s ease, stroke .16s ease; }

.pg-obj:hover .o-acc,   .pg-obj:focus-visible .o-acc,   .pg-obj.is-here .o-acc   { fill: var(--pcard-acc); }

.pg-obj:hover .o-acc2,  .pg-obj:focus-visible .o-acc2,  .pg-obj.is-here .o-acc2  { stroke: var(--pcard-acc); }

.pg-obj:hover .o-steam, .pg-obj:focus-visible .o-steam, .pg-obj.is-here .o-steam { stroke: var(--pcard-acc); }

.pg-obj:hover .o-line,  .pg-obj:focus-visible .o-line,  .pg-obj.is-here .o-line  { stroke: var(--pcard-ink); }

.pg-obj:hover .o-lbl,   .pg-obj:focus-visible .o-lbl,   .pg-obj.is-here .o-lbl   { fill: var(--pcard-ink); }

.pg-obj.is-here .o-hit { fill: rgba(255,255,255,.07); }

.pg-obj:focus { outline: none; }

.pg-obj:focus-visible .o-hit { fill: rgba(255,255,255,.1); stroke: var(--pcard-acc); stroke-width: 2; }

  .pg-obj .o-line, .pg-obj .o-acc, .pg-obj .o-acc2, .pg-obj .o-lbl,
  .pg-obj .o-ring, .pg-obj .o-steam { transition: none; }


.pg-progress {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 0 0; margin-top: 14px; border-top: 1px solid var(--rule);
  font-size: 13.5px; color: var(--ink-faint);
}

.pg-progress b { font-family: var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; }

.pg-bar { flex: 1 1 140px; height: 4px; background: var(--rule); min-width: 120px; }

.pg-bar i { display: block; height: 100%; width: 0; background: var(--albero); transition: width .25s ease; }

.pg-reset {
  font: inherit; font-size: 12.5px; background: none; border: 0; padding: 0;
  color: var(--cobalt); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

.pg-reset[hidden] { display: none; }


.pg-steps { display: flex; flex-direction: column; gap: 0; }

.pg-step { padding: 34px 0; border-top: 1px solid var(--rule); scroll-margin-top: 72px; }

.pg-step:first-child { border-top: none; padding-top: 6px; }

.pg-step-head { display: flex; align-items: baseline; gap: 16px; }

.pg-step-head .n {
  font-family: var(--f-display); font-weight: 600; font-size: 2.1rem; line-height: 1;
  color: var(--albero); font-variant-numeric: tabular-nums; flex: none;
}

.pg-step-head h3 { font-size: clamp(1.18rem, 2.2vw, 1.45rem); flex: 1; min-width: 0; }

.pg-step > p { margin-top: 14px; max-width: var(--read); }

.pg-key {
  display: inline-block; margin-top: 12px; padding: 4px 10px;
  background: var(--cobalt-soft); color: var(--cobalt);
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}


/* the planning card — the visit stub, in the dark of the planning surface */
.plancard {
  margin-top: 20px;
  color: var(--pcard-mut);
  background:
    radial-gradient(circle at 0 11px, rgba(0,0,0,0) 8px, var(--pcard-bg) 8.5px)
    0 0 / 100% 22px repeat-y;
}

.plancard::before { border-left-color: var(--pcard-edge); }

.plancard .fn-kicker { color: var(--pcard-acc); }

.plancard .fn-kicker::after {
  background: repeating-linear-gradient(to right, var(--pcard-edge) 0 4px, transparent 4px 8px);
}

.plancard .fn-line b:first-child { color: var(--pcard-ink); }

.plancard .fn-line i, .plancard .fn-line b { color: var(--pcard-ink); }

.plancard .fn-cost {
  margin: 14px 0 0; padding-top: 11px; border-top: 1px dashed var(--pcard-edge);
  font-size: 14px; color: var(--pcard-mut);
}

.plancard .fn-cost b { color: var(--pcard-ink); }

.plancard .fn-cost b:first-child {
  font-family: var(--f-body); font-weight: 700; color: var(--pcard-acc);
  text-transform: uppercase; letter-spacing: .1em; font-size: 11px; margin-right: .5em;
}


/* the actions */
.pg-actions { margin-top: 22px; max-width: var(--read); }

.pg-actions-head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-faint); padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}

.pg-actions-head .c { margin-left: auto; color: var(--albero); font-variant-numeric: tabular-nums; }

.pg-actions ul { list-style: none; margin: 0; padding: 0; }

.pg-actions li { border-bottom: 1px solid var(--rule-soft, var(--rule)); }

.pg-actions label {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px;
  align-items: start; padding: 11px 2px; cursor: pointer; font-size: 15.5px;
}

.pg-actions input { position: absolute; opacity: 0; width: 0; height: 0; }

.pg-actions .box {
  width: 16px; height: 16px; margin-top: 4px; border: 1.5px solid var(--cobalt);
  background: var(--surface); position: relative; transition: background .13s;
}

.pg-actions .box::after {
  content: ""; position: absolute; inset: 3px; background: var(--cobalt);
  opacity: 0; transition: opacity .13s;
}

.pg-actions input:checked ~ .box::after { opacity: 1; }

.pg-actions input:focus-visible ~ .box { outline: 2px solid var(--albero); outline-offset: 2px; }

.pg-actions label:hover .box { border-color: var(--ink); }

.pg-actions input:checked ~ .t { color: var(--ink-faint); }

.pg-actions input:checked ~ .t b { color: var(--ink-faint); font-weight: 400; }

.pg-actions .t b { color: var(--ink); }

  .pg-bar i, .pg-actions .box, .pg-actions .box::after { transition: none; }


/* one line per place, at the head of a trip hub */
.city-lines { display: flex; flex-direction: column; }

.city-lines p {
  max-width: 76ch; padding: 11px 0; margin: 0;
  border-bottom: 1px solid var(--rule); font-size: 16.5px; color: var(--ink-soft);
}

.city-lines p:first-child { border-top: 1px solid var(--rule); }

.city-lines b:first-child {
  font-family: var(--f-display); font-weight: 600; font-size: 1.08em; color: var(--ink);
}

.opening { max-width: var(--read); font-size: 1.06rem; color: var(--ink-soft); }

.opening b { color: var(--ink); }
html[lang="bg"] .legacy-content { --f-body: "Manrope", system-ui, sans-serif; --f-display: "Playfair Display", Georgia, serif; }