/* ════ Screen-print layer ═══════════════════════════════════════════════════
   Halftone photos, a dot sun, pixel clouds, drawn birds, a fine dot screen over the page,
   and dot-matrix type for small labels. */
:root { --dot: "DotGothic16", "Courier New", monospace; --print-ink: #A63C1D; }

/* a fine dot screen printed into the background painting only — never over cards, postcards or menus */
#paint::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle, rgba(60, 30, 10, .16) .7px, transparent 1.1px) 0 0 / 4px 4px; }

/* dot-matrix labels */
.kicker, .card-k, .bar .l, .bar .r, .begin, .sf-k, .it-days, .d-country, .leg-tag, .map-key, .pc-hint, .w-k, .w-legend,
#dock, .menu, .fl-day, .credit, .w-src, .pc-label, .pc-address .k {
  font-family: var(--dot) !important; font-weight: 400 !important; letter-spacing: .08em !important; }
.kicker { font-size: .9rem; }
.card-k { font-size: .82rem; }

/* ── Halftone canvases ── */
.ht-host { position: relative; }
canvas.ht { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
canvas.ht-duo { color: var(--print-ink); }
/* the photo stays hidden until halftone.js has printed it, so you never see it before the dots (no fade) */
/* Original photo stays visible until the printed canvas is ready. */
.frame canvas.ht {
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent);
          mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); }
.frame::after { display: none; }   /* no film light-leak on prints */

/* the cover is now printed straight onto the page, so its title prints in dark ink */
.opening .over { color: #2A160B; text-shadow: 0 0 18px rgba(246, 214, 150, .9), 0 0 4px rgba(246, 214, 150, .8); }
.opening .over::before { background: radial-gradient(closest-side, rgba(242, 205, 140, .55), transparent); }
.opening .kicker, .opening .begin { text-shadow: 0 0 10px rgba(246, 214, 150, .95); }
.trip-card .over { text-shadow: 0 0 16px rgba(246, 214, 150, .9); }

/* ── Sky: sun, clouds, birds ── */
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; color: var(--fg, #2A160B); }
.dot-sun { position: absolute; top: 7%; right: 6%; width: clamp(150px, 24vw, 330px); opacity: .85; }
.pixel-cloud { position: absolute; width: clamp(90px, 11vw, 160px); opacity: .85; }
.pixel-cloud:nth-of-type(2) { top: 13%; left: 7%; }
.pixel-cloud:nth-of-type(3) { top: 46%; right: 5%; width: clamp(70px, 8vw, 120px); }
.sky .pixel-cloud:first-child { top: 13%; left: 7%; }
.sky .pixel-cloud:nth-child(2) { top: 46%; right: 5%; left: auto; width: clamp(70px, 8vw, 120px); }
canvas.flock { position: absolute; inset: 0; width: 100%; height: 100%; color: inherit; opacity: .8; }
.opening .sky { z-index: 0; }
.opening .over { z-index: 1; }
.part, .mast { position: relative; }
.part > :not(.sky), .mast > :not(.sky) { position: relative; z-index: 1; }

/* ── Top bar: quiet ── */
.bar .r { justify-content: flex-end; }

/* ── Bottom dock: menu · map · where you are ── */
#dock { position: fixed; z-index: 80; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: stretch; gap: 6px;
  max-width: calc(100vw - 16px); }
.dock-btn { display: grid; place-items: center; width: 46px; border: 0; border-radius: 10px; cursor: pointer;
  background: #2A160B; color: #FBEBC8; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .6); }
.dock-btn:hover, .dock-btn[aria-expanded="true"] { background: #FBEBC8; color: #2A160B; }
.dock-btn .ico { width: 20px; height: 20px; }
.dock-btn .burger, .dock-btn .burger::before, .dock-btn .burger::after { width: 16px; }
#dock #nowbar { position: relative; left: auto; right: auto; bottom: auto; transform: none; max-width: none; flex: 0 1 auto; min-width: 0; }
#dock #nowbar > span:not(.nb-progress) { padding: .62rem .85rem; font-size: .9rem; }
#dock .nb-stop { font-family: var(--dot); }

/* ── Compact menu, opening upward from the dock ── */
.menu { top: auto !important; bottom: 74px; left: 50%; transform: translateX(-50%); width: min(430px, calc(100vw - 16px));
  max-height: min(68vh, 560px); padding: .7rem .8rem .5rem; border-radius: 10px; }
.menu-sections { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: .6rem; margin-bottom: .3rem; border-bottom: 1px solid var(--rule); }
.menu-sections a { padding: .3rem .6rem; border: 1px solid var(--rule); border-radius: 999px; font-size: .78rem; border-bottom: 1px solid var(--rule); }
.menu-sections a:hover { background: #2A160B; color: #FBEBC8; }
.menu-stops { list-style: none; padding: 0; margin: 0; }
.menu-stops a { display: grid; grid-template-columns: 1.8rem 1fr auto; grid-template-areas: "n name days" "n when when"; gap: 0 .5rem;
  padding: .38rem .3rem; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--c); padding-left: .5rem; }
.ms-n { grid-area: n; font-size: .78rem; color: var(--ink-soft); align-self: center; }
.ms-name { grid-area: name; font: 700 .98rem var(--serif) !important; letter-spacing: 0 !important; }
.ms-days { grid-area: days; font-size: .76rem; }
.ms-when { grid-area: when; font-size: .74rem; color: var(--ink-soft); }
.menu-stops a.here { background: #F3E5C7; }

@media (max-width: 700px) {
  #dock { left: 8px; right: 8px; transform: none; max-width: none; }
  #dock #nowbar { flex: 1; }
  #dock .nb-country, #dock .nb-date { display: none; }
  .dock-btn { width: 42px; }
  .menu { left: 8px; right: 8px; transform: none; width: auto; bottom: 66px; }
  .dot-sun { top: 9%; right: -6%; }
}

/* Leaflet gives its panes z-index 400–1000; keep them inside the map so the top bar and dock stay on top. */
.trip-map { position: relative; z-index: 0; isolation: isolate; }
.bar { z-index: 85; }
#dock { z-index: 95; }
.menu { z-index: 96; }

/* ════ Readable supporting text ═════════════════════════════════════════════
   The root size scales with the window (style.css), and the small labels are a step larger. */
.card-k { font-size: .9rem; }
.it-cname { font-size: 1.45rem; }
.it-cdates { font-size: .9rem; }
.it-name { font-size: 1.25rem; }
.it-days { font-size: .88rem; }
.it-dates { font-size: .95rem; }
.sf-k { font-size: .85rem; }
.sf-end, .sf-home-name { font-size: .92rem; }
.ap-city { font-size: 1.02rem; }
.fl-day, .fl-date { font-size: 1rem; }
.leg { grid-template-columns: 7.6rem 1fr auto; }
.leg-tag { font-size: .86rem; }
.leg-what strong { font-size: 1.1rem; }
.leg-how { font-size: 1.05rem; }
.leg-time { font-size: .98rem; }
.days-table th { font-size: .85rem; }
.days-table td:first-child { width: 9.5rem; }
.days-table td:nth-child(2) { width: 14rem; }
.d-n { font-size: 1.25rem; }
.d-date { font-size: 1.02rem; }
.d-country { font-size: .8rem; }
.d-stop { font-size: 1.2rem; }
.d-plan { font-size: 1.2rem; }
.w-k, .w-legend { font-size: .9rem; }
.w-l { font-size: .8rem; }
.w-src { font-size: .85rem; }
.map-key { font-size: .88rem; }
.ts-sub { font-size: .88rem; }
.ts-rate { font-size: .84rem; }
.menu { width: min(30rem, calc(100vw - 16px)); }
.menu-sections a { font-size: .9rem; }
.ms-name { font-size: 1.08rem !important; }
.ms-n, .ms-days { font-size: .85rem; }
.ms-when { font-size: .82rem; }

/* ── Codes: country (ISO 3166, three letters) and language (ISO 639) ── */
.ccode, .lang { cursor: help; font-family: var(--dot); font-weight: 400; letter-spacing: .06em; }
.ccode { display: inline-block; padding: .1em .35em; border: 1px solid currentColor; border-radius: 3px; font-size: .62em;
  line-height: 1.2; vertical-align: .2em; opacity: .8; }
.langs { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.lang { display: inline-block; padding: .12em .42em; border-radius: 3px; background: rgba(42, 22, 11, .09); color: var(--ink);
  font-size: .78rem; line-height: 1.25; }
.it-stops .langs { grid-area: langs; justify-self: end; align-self: center; }
.it-country .langs { flex-basis: 100%; }

/* ── Languages tab ── */
.ts-lang-table th, .ts-lang-table td { text-align: left; }
.ts-lang-table td { font: 500 .98rem/1.4 var(--sans); }
.ts-lang-country th, .ts-lang-country td { padding-top: 1rem; border-top: 2px solid var(--ink); }
.ts-lang-table tbody tr:first-child th, .ts-lang-table tbody tr:first-child td { border-top: 0; }
.ts-langs { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.ts-langs li { display: grid; grid-template-columns: 3.4rem 6.5rem 1fr; align-items: baseline; gap: .5rem; }
.ts-langs .lang { justify-self: start; }
.ts-langs strong { font-weight: 700; }
.ts-langs .ts-sub { display: inline; }
.ts-speak { font: italic 400 1rem/1.45 var(--serif) !important; max-width: 20rem; }
.ts-city { padding-left: 1.4rem !important; font: 700 1.02rem var(--serif) !important; }
.ts-lang-names { margin-left: .4rem; color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 700px) {
  .ts-lang-table thead { display: none; }
  .ts-lang-table tr { display: grid; }
  .ts-lang-table th, .ts-lang-table td { display: block; border: 0; padding: .2rem 0; }
  .ts-lang-country { margin-top: .6rem; border-top: 2px solid var(--ink); padding-top: .4rem; }
  .ts-lang-table tbody .ts-sub { display: inline; }
  .ts-langs li { grid-template-columns: 3rem 1fr; }
  .ts-langs .ts-sub { grid-column: 2; }
  .ts-city { padding-left: 0 !important; }
  .ts-lang-city { border-bottom: 1px solid var(--rule); padding-bottom: .3rem; }
}

/* ── Dock: every part is a button ── */
.dock-btn { width: 3rem; }
#dock #nowbar { display: flex; align-items: stretch; cursor: default; }
#dock #nowbar:hover { filter: none; }
.nb-seg { position: relative; display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .7rem .95rem; border: 0;
  background: none; color: inherit; font: 400 1rem var(--dot); letter-spacing: .06em; white-space: nowrap; cursor: pointer; }
.nb-seg + .nb-seg { border-left: 1px solid rgba(251, 235, 200, .18); }
.nb-seg:hover, .nb-seg[aria-expanded="true"] { background: rgba(251, 235, 200, .14); }
.nb-seg:focus-visible { outline: 2px solid #F2B66A; outline-offset: -2px; }
#dock .nb-day { background: #FBEBC8; color: #2A160B; }
#dock .nb-day:hover, #dock .nb-day[aria-expanded="true"] { background: #FFF5DF; }
.nb-t { overflow: hidden; text-overflow: ellipsis; }
#dock .nb-country { color: #F2B66A; text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; }
.nb-date::after, .nb-city::after, .nb-country::after { content: "▾"; font-size: .7em; opacity: .6; }
.nb-city .ccode { color: #F2B66A; font-size: .7rem; opacity: 1; vertical-align: 0; }
.nb-city .ccode[hidden] { display: none; }

/* ── City / country pickers, opening upward like the menu ── */
.picker { padding: .8rem .8rem .6rem; text-align: left; overflow-y: auto; }
.picker .card-k { margin: 0 0 .5rem .2rem; }
.pk-list { list-style: none; padding: 0; margin: 0; }
.pk-list a { display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem .6rem; border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--c); color: inherit; text-decoration: none; }
.pk-list a:hover, .pk-list a.here { background: #F3E5C7; }
.pk-name { font: 700 1.08rem var(--serif); letter-spacing: 0; }
.pk-days { margin-left: auto; font-size: .82rem; color: var(--ink-soft); }
.pk-group a { margin-top: .4rem; border-left-width: 7px; }
.pk-group .pk-name { font: 400 .9rem var(--dot); letter-spacing: .14em; text-transform: uppercase; }
.pk-group .ccode { margin-left: auto; }
#pick-country .pk-list a { flex-wrap: wrap; padding-top: .7rem; padding-bottom: .7rem; }
#pick-country .langs { flex-basis: 100%; }

/* ── Map: the scroll wheel zooms only after a click ── */
.map-hint { position: absolute; z-index: 1000; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .6rem 1.1rem;
  border-radius: 999px; background: rgba(42, 22, 11, .86); color: #FBEBC8; font: 400 .95rem var(--dot); letter-spacing: .06em;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s; }
.trip-map.hint-show .map-hint { opacity: 1; }
.trip-map.wheel-on { box-shadow: inset 0 0 0 3px #24508A; }
#map-slot .map-hint { display: none; }

@media (max-width: 700px) {
  #dock #nowbar { flex: 1; }
  #dock .nb-day, #dock .nb-country { display: none; }
  #dock .nb-date { display: flex; }
  .nb-seg { padding: .6rem .6rem; font-size: .9rem; }
  .nb-city { flex: 1 0 auto; }
  .nb-date { flex: 0 1 auto; }
  .nb-date::after { display: none; }
  .dock-btn { width: 2.7rem; }
}

/* ════ Journey: title on top, postcard underneath; two to a row on wide screens ═══ */
#journey { position: relative; }
#journey > :not(#trail), .stops > .stop { position: relative; z-index: 1; }
#trail { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail-line { fill: none; stroke: currentColor; opacity: .6; stroke-width: 3; stroke-dasharray: 2 13; stroke-linecap: round; }
.stop .title { margin: 0 0 1.2rem; padding: 0 16px; }
.stop .title .big { margin-bottom: .4rem; }
.stop-codes { margin: 0; display: flex; justify-content: center; align-items: center; gap: .4rem; font-size: 1.2rem; }
.stop-codes .ccode { font-size: .72rem; vertical-align: 0; }
.stop { padding: 8vh 0 6vh; }
.stop .pc { margin: 0 auto 3vh; }

@media (min-width: 1600px) {
  .stops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5vw; width: min(1560px, 94vw); margin: 0 auto;
    align-items: start; }
  .stops > .stop { grid-row: var(--row); grid-column: var(--col); }
  .stops > .stop[style*="1 / -1"] .next-card { width: calc(50% - 2.5vw); }
  .stops .next-card { width: 100%; }
  .stops .pc { --pc-w: 100%; }   /* two to a row: each card fills its column, never wider */
  /* a lone card: 50% bigger than a paired one, centred, and never taller than the window allows */
  .stops > .stop[style*="1 / -1"] .pc { --pc-w: min(calc((50% - 2.5vw) * 1.5), calc((100svh - 9rem) / .75)); }
  .stops .title .big { font-size: clamp(2.2rem, 3.6vw, 3.8rem); }
}

/* trail arrows and day tags */
.trail-tick, .trail-head { fill: none; stroke: currentColor; opacity: .8; stroke-linecap: round; stroke-linejoin: round; }
.trail-tick { stroke-width: 2.5; }
.trail-head { stroke-width: 4; }
.trail-tag { font: 400 15px var(--dot); letter-spacing: .06em; fill: currentColor; opacity: .85; }

/* ── Codes with their full name on hover / focus ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.has-tip { position: relative; }
.has-tip::after { content: attr(data-tip); position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 7px);
  transform: translate(-50%, 4px); padding: .32rem .6rem; border-radius: 5px; background: #2A160B; color: #FBEBC8;
  font: 500 .85rem/1.2 var(--sans); letter-spacing: .02em; text-transform: none; white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.has-tip:hover::after, .has-tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.has-tip:focus-visible { outline: 2px solid #A63C1D; outline-offset: 2px; }
.has-tip[data-tip=""]::after { display: none; }
#dock .has-tip::after { bottom: calc(100% + 16px); }

/* ── Itinerary: each language written out next to its code ── */
.it-stops a { grid-template-areas: "name days" "dates dates" "langs langs"; }
.it-stops .langs { justify-self: start; margin-top: .3rem; }
.langs.named { gap: .3rem .8rem; }
.lang-item { display: inline-flex; align-items: center; gap: .35rem; }
.lang-name { font: 500 .9rem var(--sans); color: var(--ink-soft); }

/* ════ Any screen size ══════════════════════════════════════════════════════
   Nothing may push the page sideways, and small labels never drop below 12px. */
html, body { overflow-x: clip; }
.credit { font-size: max(12px, .7rem); }
.map-expand { font-size: max(12px, .75rem); }
.ccode { font-size: max(11px, .62em); }
.stop-codes .ccode { font-size: max(12px, .72rem); }
.pc-hint { font-size: max(11px, 1.2cqw) !important; }
.ts-panel { overflow-x: auto; }

.bar .l a { font-size: max(12px, .75rem); }
.ts-table .d-country { font-size: max(12px, .62rem); }
@media (max-width: 700px) {
  #dock .nb-city { flex: 0 1 auto; min-width: 0; max-width: 64%; }
  #dock .nb-date { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 420px) {
  .bar { padding-left: 12px; padding-right: 12px; column-gap: 8px; letter-spacing: .08em; }
  .bar .r, .bar .l { letter-spacing: .06em !important; }
  .ts-table th, .ts-table td { padding: .4rem .2rem; }
  .ts-table td { font-size: .85rem; }
  .itinerary .it-col { padding-left: 1rem; padding-right: 1rem; }
}
.it-country .lang-name { text-transform: none; letter-spacing: 0; }
.lang, .ccode { font-style: normal; }
.nb-short { display: none; }
@media (max-width: 420px) {
  #dock .nb-date .nb-t { display: none; }
  #dock .nb-date .nb-short { display: inline; }
  #dock .nb-date { flex: 0 0 auto; }
  #dock .nb-city { flex: 1 1 auto; max-width: none; }
}

/* ── Date picker: the date leads; day number, city and country sit small beside it ── */
.pk-dates a { display: grid; grid-template-columns: 2.8rem 1fr auto; grid-template-areas: "wd where dn" "date where dn";
  align-items: center; column-gap: .7rem; padding: .35rem .6rem; }
.pk-wd { grid-area: wd; align-self: end; font: 400 .72rem var(--dot); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center; }
.pk-date { grid-area: date; align-self: start; font: 800 1.5rem/1 var(--serif); font-variation-settings: "SOFT" 100;
  text-align: center; }
.pk-where { grid-area: where; min-width: 0; font: 500 .9rem/1.3 var(--sans); letter-spacing: 0; color: var(--ink-soft); }
.pk-city { font-weight: 700; color: var(--ink); }
.pk-where .ccode { font-size: max(11px, .7rem); vertical-align: .1em; }
.pk-dn { grid-area: dn; font: 400 .8rem var(--dot); letter-spacing: .06em; color: var(--ink-soft); white-space: nowrap; }
.pk-month { margin: .5rem 0 .2rem .3rem; font: 400 .8rem var(--dot); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); }
.pk-month:first-child { margin-top: 0; }
.pk-start { display: block; margin: .6rem .3rem .1rem; font: 600 .88rem var(--sans); color: #A63C1D; }

/* ════ Phones: fit more on a screen ══════════════════════════════════════════
   Tighter rows and a slightly smaller type step; labels keep their 12px floor. */
@media (max-width: 700px) {
  html { font-size: 15px; }
  .block { padding-top: 9vh; padding-bottom: 9vh; padding-left: 12px; padding-right: 12px; }
  .block .big { margin-bottom: 1.6rem; }
  .card-title { margin-bottom: 1rem; }

  /* day by day: "Day 2 · Sun 6 Dec" on one line, country + place on the next, then the plan */
  .days-card { padding: .2rem .9rem .6rem; }
  .days-table tr { display: grid; grid-template-columns: 1fr; gap: .15rem; padding: .7rem 0; }
  .days-table td { padding: 0 !important; }
  .days-table td:nth-child(3) { padding-top: .25rem !important; }
  .days-table td:first-child { display: flex; align-items: baseline; gap: .5rem; }
  .d-n, .d-date { display: inline; }
  .d-n { font-size: 1.05rem; }
  .d-date { font-size: .9rem; }
  .days-table td:nth-child(2) { display: flex; align-items: center; gap: .5rem; }
  .d-country { margin: 0; }
  .d-stop { display: inline; font-size: 1.05rem; }
  .d-plan { font-size: 1.02rem; line-height: 1.35; }

  /* travel legs (day by day and "next" cards) */
  .legs { gap: .3rem; margin-top: .4rem; }
  .leg { gap: .15rem .6rem; padding: .4rem .55rem; }
  .leg-tag { font-size: .78rem; }
  .leg-what strong { font-size: .98rem; }
  .leg-how { font-size: .9rem; line-height: 1.3; }
  .leg-time { font-size: .86rem; }

  /* getting there */
  .ap-row { gap: .6rem; margin-bottom: 1.1rem; }
  .ap-card { padding: .7rem .85rem; }
  .ap { font-size: .95rem; }
  .ap strong { font-size: 1.3rem; }
  .ap-city { font-size: .9rem; }
  .ap-date { margin-top: .3rem; font-size: .92rem; }
  .ap-home { margin-top: .45rem; padding-top: .4rem; font-size: .88rem; }
  .flights li { padding: .5rem 0; gap: .1rem .6rem; }
  .fl-day, .fl-date { font-size: .88rem; }
  .fl-route { font-size: 1rem; }
  .flights .leg-how { font-size: .88rem; }
  .trains { padding: .55rem .75rem; font-size: .92rem; }

  /* weather */
  .weather { gap: .9rem; padding: 1rem; }
  .w-month-card { padding: .7rem .85rem; gap: .2rem .8rem; }
  .w-big { font-size: 1.5rem; }
  .w-chart { height: 90px; }
  .w-note { font-size: .95rem; line-height: 1.4; }
  .part { padding-top: 10vh; padding-bottom: 5vh; }
  .part-dates { margin-bottom: 1.4rem; }

  /* itinerary, pickers, trip sheet */
  .it-col { padding-top: .8rem; padding-bottom: .6rem; }
  .it-stops a { padding: .4rem 0; }
  .it-name { font-size: 1.1rem; }
  .pk-dates a { padding: .25rem .5rem; row-gap: 0; }
  .pk-date { font-size: 1.25rem; }
  .pk-list a { padding-top: .4rem; padding-bottom: .4rem; }
  .ts-table th, .ts-table td { padding-top: .35rem; padding-bottom: .35rem; }
  .ts-pack li { padding: .35rem 0; font-size: .95rem; }
  .next-card { margin-top: 1.4rem; padding: .8rem .85rem .9rem; }
  .stop { padding-top: 6vh; padding-bottom: 4vh; }
}
.lang { font-size: max(12px, .78rem); }
.begin { font-size: max(12px, .78rem); }
.leg-tag { font-size: max(12px, .78rem) !important; }


/* Getting there, on wide screens: arrive / leave on the left, every flight on the right */
@media (min-width: 1100px) {
  .travel-card { width: min(1300px, 100%); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    column-gap: 2rem; align-items: start; }
  .travel-card > * { grid-column: 1 / -1; }
  .travel-card > .ap-row { grid-column: 1; grid-row: 2 / span 2; grid-template-columns: 1fr; gap: .7rem; margin: 0; }
  .travel-card > .card-k { grid-column: 2; grid-row: 2; }
  .travel-card > .flights { grid-column: 2; grid-row: 3; margin-bottom: 1rem; }
  .travel-card > .card-title { margin-bottom: 1.2rem; }
}

/* ════ Day by day: a Monday-to-Sunday calendar ══════════════════════════════
   Seven columns, each day under its weekday. Tiles shed detail by their own width (container queries);
   app.js picks denser forms (compact → tight → bare) and a slight shrink so the card fits the window. */
.days-card { container: days / inline-size; width: min(1400px, 100%); padding: clamp(.6rem, 1.6vw, 1.4rem); }
.days-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(3px, .5vw, .55rem); }
.dt-wd { padding: 0 .2rem .2rem; font: 400 max(12px, .8rem) var(--dot); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center; border-bottom: 2px solid var(--ink); }
.day-blank { border-radius: 3px; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(42, 22, 11, .05) 6px 7px); }
.day-tile { container-type: inline-size; display: flex; flex-direction: column; gap: .2rem; min-width: 0;
  padding: .5rem .6rem .55rem; border-top: 4px solid var(--c); border-radius: 3px; background: #F6EBD3; }
.dt-head { display: flex; align-items: baseline; gap: .35rem; }
.dt-dom { font: 800 1.35rem/1 var(--serif); font-variation-settings: "SOFT" 100; }
.dt-mon { display: none; font: 600 .8rem var(--sans); color: var(--ink-soft); }
.dt-mon.on { display: inline; }
.dt-n { margin-left: auto; font: 400 max(12px, .78rem) var(--dot); letter-spacing: .06em; color: var(--ink-soft); white-space: nowrap; }
.dt-stop { display: flex; align-items: center; gap: .3rem; min-width: 0; font: 700 1rem/1.2 var(--serif); color: inherit;
  text-decoration: none; }
.dt-stop:hover .dt-name { text-decoration: underline; }
.dt-name { min-width: 0; overflow-wrap: anywhere; }
.dt-stop .ccode { font-size: max(11px, .6rem); }
.dt-pin { flex: none; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--c); color: #2A160B; font: 800 max(12px, .72rem) var(--sans); }
.dt-plan { margin: 0; font: 400 .9rem/1.3 var(--serif); }
.dt-legs { list-style: none; margin: .15rem 0 0; padding: .3rem 0 0; border-top: 1px dashed var(--rule); display: grid; gap: .15rem; }
.dt-leg { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: .3rem; cursor: help;
  font: 600 max(12px, .78rem)/1.25 var(--sans); }
.dt-leg .ico { width: 16px; height: 16px; vertical-align: 0; }
.dt-leg.leg-flight .ico { color: #24508A; }
.dt-leg.leg-boat .ico { color: #1F7F8C; }
.dt-route { min-width: 0; overflow-wrap: anywhere; }
.dt-time { font-weight: 700; white-space: nowrap; color: var(--ink-soft); }
.dt-note { margin-top: .8rem; }
.dt-key { display: none; margin: .8rem 0 0; }
.dt-key-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: 0; padding: .35rem 0;
  border-top: 1px solid var(--rule); }
.dt-key-c { min-width: 7.5rem; padding-left: .45rem; border-left: 4px solid var(--c); font: 800 .98rem var(--serif); }
.dt-key-c .ccode { font-size: max(11px, .6rem); vertical-align: .15em; }
.dt-key a { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none;
  font: 600 max(12px, .82rem) var(--sans); }
/* narrower tiles: routes go (icon + time stay), then plans, then everything but the date, pin and icons */
@container (max-width: 170px) {
  .dt-route { display: none; }
  .dt-legs { display: flex; flex-wrap: wrap; gap: .15rem .5rem; }
  .dt-leg { display: inline-flex; }
  .dt-stop .ccode { display: none; }
}
@container (max-width: 125px) {
  .days-grid .day-tile .dt-plan-text, .dt-n { display: none; }
  .dt-act .ico { width: 22px; height: 22px; }
  .dt-stop { font-size: .88rem; }
}
@container (max-width: 80px) {
  .day-tile { padding: .3rem .25rem .35rem; align-items: center; text-align: center; }
  .dt-name, .dt-time, .dt-mon.on { display: none; }
  .dt-legs { justify-content: center; border-top: 0; padding-top: 0; }
  .dt-dom { font-size: 1.1rem; }
}
/* when the tiles only show pins, list the places under the calendar */
@container days (max-width: 760px) {
  .dt-key { display: block; }
  .dt-note { display: none; }
}

/* denser forms, chosen by app.js only when the calendar wouldn't otherwise fit */
.compact .dt-route { display: none; }
.compact .dt-legs { display: flex; flex-wrap: wrap; gap: .15rem .5rem; }
.compact .dt-leg { display: inline-flex; }
.compact .dt-plan-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.compact .dt-note { display: none; }
.tight .dt-plan-text { -webkit-line-clamp: 1; }
.tight .day-tile { gap: .1rem; padding-top: .35rem; padding-bottom: .4rem; }
.bare .dt-plan-text { display: none; }

/* a one-colour activity icon beside the plan (on its own on small tiles) */
.dt-plan { display: flex; align-items: flex-start; gap: .35rem; }
.dt-act { flex: none; display: inline-flex; }
.dt-act .ico { width: 18px; height: 18px; vertical-align: 0; }
/* phone tiles: very light, just the date, the pin, the activity icon and how you travel */
@container (max-width: 80px) {
  .dt-plan { margin: .1rem 0; text-align: center; }
  .dt-plan { justify-content: center; }
  .dt-act .ico { width: 22px; height: 22px; }
  .dt-pin { width: 1.15rem; height: 1.15rem; }
}

/* place pins: bold and filled on the first day in a city (a city change), light outline on the days after */
.dt-pin { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); font-weight: 500; color: var(--ink-soft); }
.dt-pin.new { background: var(--c); box-shadow: none; font-weight: 900; color: #2A160B; }

/* Transparent preprinted cover: the dots are an image, with no canvas redraw or CORS dependency. */
.frame.printed-cover img { filter: none; }