/* Three surfaces, not one.
   The old palette had a card 3% away from the page behind it, which on a phone
   reads as one flat sheet -- the complaint that prompted this was "full black".
   `--bg` is the page, `--card` sits on it, `--raised` sits on that, and each
   step is far enough apart to be seen at low brightness. */
:root {
  --bg: #f4f6f7;           /* Snow */
  --card: #ffffff;
  --raised: #ddebec;       /* Ice */
  --fg: #263340;           /* Slate */
  --muted: #556372;        /* Granite, deepened: see below */
  --line: #d2e0e2;
  --line-soft: #e7f0f1;
  --accent: #263340;
  --accent-soft: #ddebec;
  /* A photo not yet held shows the logo's own mark, the dotted C. */
  --noimg-mark: url("../assets/brand-mark.svg");
  --button: #2fb8a6;       /* Glacier */
  --button-ink: #263340;
  --sweet: #263340;
  --sweet-bg: #ddebec;
  --avoid: #9a4b33;
  --avoid-bg: #f7e9e3;
  --busy: #8a5a12;
  --busy-bg: #fbebd0;
  --crowd-bar: #1f9e8e;    /* Glacier, a step deeper: 3:1 on Snow and white */
  --crowd-busy: #8a5a12;   /* the busy pill's own amber */
  --warm: #b4621f;
  --shadow: 0 1px 2px rgba(38, 51, 64, 0.06), 0 8px 24px rgba(38, 51, 64, 0.08);
}
/* The palette is the brand's (branding/, guidelines v1.1): a
   Snow page, Slate text and headings, Ice for cards and panels, and Glacier
   for buttons, with Slate on them -- the pairing the guidelines give for
   buttons (5.2:1), never white on Glacier (2.5:1). Links and focus rings are
   Slate here, not Glacier: Glacier text on Snow is 2.3:1.
   One departure: Granite is 4.2:1 on Snow, which the guidelines themselves
   keep for large text and captions, and this site's notes are small text.
   --muted is the same hue deepened to 5.7:1 (5.0:1 on Ice). */

/* Dark is the brand's own dark: Snow on Slate, the pairing the guidelines
   give for dark sections, with a deeper slate behind the cards so there is
   still something for elevation to be made of. Glacier is 5.2:1 on Slate, so
   here it can carry the links as well as the buttons; --muted is Granite
   lightened to 5.4:1 on the lightest surface. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b252e;
    --card: #263340;         /* Slate */
    --raised: #36434f;
    --fg: #f4f6f7;           /* Snow */
    --muted: #b3bfcb;        /* Granite, lightened: see above */
    --line: #434e5a;
    --line-soft: #202c37;
    --accent: #2fb8a6;       /* Glacier */
    --accent-soft: #285056;
  --noimg-mark: url("../assets/brand-mark-reversed.svg");
    --button: #2fb8a6;
    --button-ink: #263340;
    --sweet: #ddebec;        /* Ice */
    --sweet-bg: #285056;
    --avoid: #e8a58c;
    --avoid-bg: #3a2a25;
    --busy: #f2c27a;
    --busy-bg: #3a2f1c;
    --crowd-bar: #2a9f90;
    --crowd-busy: #bd8435;
    --warm: #f2a33a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.3);
  }
}
:root[data-theme="dark"] {
  --bg: #1b252e;
  --card: #263340;         /* Slate */
  --raised: #36434f;
  --fg: #f4f6f7;           /* Snow */
  --muted: #b3bfcb;        /* Granite, lightened: see above */
  --line: #434e5a;
  --line-soft: #202c37;
  --accent: #2fb8a6;       /* Glacier */
  --accent-soft: #285056;
  --noimg-mark: url("../assets/brand-mark-reversed.svg");
  --button: #2fb8a6;
  --button-ink: #263340;
  --sweet: #ddebec;        /* Ice */
  --sweet-bg: #285056;
  --avoid: #e8a58c;
  --avoid-bg: #3a2a25;
  --busy: #f2c27a;
  --busy-bg: #3a2f1c;
  --crowd-bar: #2a9f90;
  --crowd-busy: #bd8435;
  --warm: #f2a33a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Poppins, the brand's one typeface, served from here: the CSP allows
   no other origin, and a font from a third party is a request about the
   reader that the privacy page does not mention. SIL OFL, poppins-OFL.txt
   beside the files. The browser fetches only the subsets a page uses. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/poppins-400-devanagari.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/poppins-500-devanagari.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/poppins-600-devanagari.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/poppins-700-devanagari.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

* { box-sizing: border-box; }
/* Hidden means hidden. The browser's own [hidden] rule loses to any rule of
   ours that sets display, so `.now li { display: flex; }` kept every festival
   holidays.js folded away on the page, beside the line that named them a
   second time, and the heart on a destination page showed, doing nothing,
   with scripting off. One rule here rather than one per element that a
   script shows and hides, and important so no later display can undo it. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 "Poppins", Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}
/* Wide enough that a laptop's screen goes on what is a grid -- the cards,
   photographs and the month table -- while running text keeps a readable
   measure (below). It was 860px, which left half of a 1440px screen empty. */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
main > p, main .note, .verdict, .disclosure, main details > p { max-width: 78ch; }
header { border-bottom: 1px solid var(--line); padding: 22px 0; }
header a.brand { display: inline-flex; line-height: 0; }
/* The logo is artwork (branding/01_Logo): the full-colour version on Snow,
   the reversed one on Slate, following whichever theme is in force. */
.logo { height: 36px; width: auto; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: inline; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: 32px 0 8px; letter-spacing: -0.01em; font-weight: 500; }
h2 { font-size: 1.15rem; margin: 36px 0 10px; font-weight: 500; }
a { color: var(--accent); }
.lede { font-size: 1.08rem; color: var(--muted); margin: 0 0 8px; }
.verdict {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 16px 18px; margin: 22px 0; font-size: 1.05rem;
}
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { font-weight: 600; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Then and now: a change inside the ordinary spread between years is grey. */
.thennow th, .thennow td { padding: 4px 8px; white-space: nowrap; }
.thennow .unclear, .unclear { color: var(--muted); }
tr.out td { color: var(--muted); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--line); }
.pill.sweet { background: var(--sweet-bg); color: var(--sweet); }
.pill.avoid { background: var(--avoid-bg); color: var(--avoid); }
/* Orthogonal to the verdict, and sits beside it: a busy month is usually a
   good one. Warm rather than red, so it does not read as a warning. */
.pill.busy { background: var(--busy-bg); color: var(--busy); margin-left: 4px; }
/* How busy it gets (_crowds.html): twelve bars from one baseline, on a fixed
   scale. An ordinary month is Glacier a step deeper, a busy one the busy
   pill's amber with its letter bold; the pair is 3:1 or more against the page
   and apart for colour-blind readers, by day and by night. The month a page
   is about is ringed. Heights are classes, as the CSP allows no inline style. */
.crowds { margin: 0 0 8px; max-width: 34rem; }
.crowds-plot { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.crowds-axis { display: flex; flex-direction: column; justify-content: space-between; height: 6rem; font-size: 0.75rem; color: var(--muted); }
.crowds-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px;
  background: linear-gradient(var(--line), var(--line)) 0 6rem / 100% 1px no-repeat; }
.crowds-bars li { display: grid; grid-template-rows: 6rem auto; justify-items: center; margin: 0; }
.crowds-bars i { align-self: end; width: 100%; max-width: 24px; background: var(--crowd-bar); border-radius: 4px 4px 0 0; }
.crowds-bars li.busy i { background: var(--crowd-busy); }
.crowds-bars li.on i { outline: 2px solid var(--fg); outline-offset: 2px; }
.crowds-bars span { margin-top: 5px; font-size: 0.75rem; line-height: 1; color: var(--muted); }
.crowds-bars li.busy span, .crowds-bars li.on span { color: var(--fg); font-weight: 600; }
.crowds figcaption { margin-top: 10px; font-size: 0.9rem; }
.crowds-key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--crowd-busy); }
.crowds-bars .b2 { height: 10%; } .crowds-bars .b3 { height: 15%; } .crowds-bars .b4 { height: 20%; } .crowds-bars .b5 { height: 25%; }
.crowds-bars .b6 { height: 30%; } .crowds-bars .b7 { height: 35%; } .crowds-bars .b8 { height: 40%; } .crowds-bars .b9 { height: 45%; }
.crowds-bars .b10 { height: 50%; } .crowds-bars .b11 { height: 55%; } .crowds-bars .b12 { height: 60%; } .crowds-bars .b13 { height: 65%; }
.crowds-bars .b14 { height: 70%; } .crowds-bars .b15 { height: 75%; } .crowds-bars .b16 { height: 80%; } .crowds-bars .b17 { height: 85%; }
.crowds-bars .b18 { height: 90%; } .crowds-bars .b19 { height: 95%; } .crowds-bars .b20 { height: 100%; }
@media (forced-colors: active) { .crowds-bars i { background: CanvasText; } .crowds-bars li.busy i { background: Highlight; } }
/* In season by the scorer's relative band, but below the comfort floor it
   uses: marked rather than hidden (PLAN item 21, §2.17). */
.pill.cool { background: var(--line); color: var(--muted); margin-left: 4px; }
table.ranked td.rank { color: var(--muted); }
.chips .plain { display: inline-block; padding: 6px 10px; color: var(--muted); }
.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; padding: 0; list-style: none; }
.links a {
  display: block; padding: 13px 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--fg);
}
.links a:hover { border-color: var(--accent); }
.links span { display: block; font-weight: 400; font-size: 0.83rem; color: var(--muted); margin-top: 2px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 0; list-style: none; }
.cards a { display: block; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--fg); }
.cards a:hover { border-color: var(--accent); }
.cards strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.cards span { color: var(--muted); font-size: 0.9rem; }
.note { color: var(--muted); font-size: 0.88rem; }
.disclosure { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: 0.86rem; color: var(--muted); margin: 18px 0; }
/* The disclosure that rides with the booking block, which has to sit against
   it rather than at the foot of the page: the rule is proximity to the link. */
.disclosure.tight { margin: 10px 0 26px; background: none; border: 0; padding: 0 2px; }

/* Plan this trip: a row for each thing a trip needs, each a short run of
   sites as chips. The same block as the app's place screen. */
.plan { margin: 22px 0 0; }
.plan h2 { margin: 0 0 4px; }
.plan > .note { margin: 0; }
.plan h3 { font-size: 0.95rem; font-weight: 500; margin: 14px 0 6px; }
.plan .chips { margin: 0; }
.plan .chips a { border-color: var(--accent); background: var(--accent-soft); }
.plan .chips a:hover { background: var(--card); }
.plan .plan-row > .note { margin: 6px 0 0; font-size: 0.84rem; }

/* The booking block, beside the verdict. Accented rather than card-coloured,
   because these are the only links on a page that earn and they spent the
   whole of the site's life so far underneath the month table. */
.book { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 22px 0 0; }
.book .buy {
  display: block; padding: 14px 16px; border-radius: 10px; text-decoration: none;
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--fg);
}
.book .buy:hover { background: var(--card); }
.book strong { display: block; font-size: 1rem; }
.book span { display: block; font-weight: 400; font-size: 0.84rem; color: var(--muted); margin-top: 3px; }
@media (max-width: 520px) { h1 { font-size: 1.55rem; } .wrap { padding: 0 16px; } }

/* Origin picker: many short links, so chips rather than cards. */
h3.region { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 22px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 4px; list-style: none; }
.chips a {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; color: var(--fg); font-size: 0.92rem;
}
.chips a:hover { border-color: var(--accent); color: var(--accent); }
.chips span { color: var(--muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.chips [aria-current] { display: inline-block; padding: 6px 10px; }
.plain { padding-left: 1.2em; margin: 8px 0 12px; }
.subscribe-form .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.subscribe-form input[type=email] { flex: 1 1 220px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; }
.subscribe-form button { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--button); background: var(--button); color: var(--button-ink); font: inherit; font-weight: 600; cursor: pointer; }
.routemap { width: 100%; height: auto; max-width: 640px; display: block; margin: 8px 0 12px; border: 1px solid var(--line); border-radius: 8px; }
/* The language switcher and right-to-left pages. No template writes either:
   i18n/site.py stamps them into a language site's copy of each page, and
   there is none while site.languages is empty. Kept for the day one comes
   back (RUNBOOK §6c), which would otherwise have an Arabic site laid out
   left to right. */
.langs { margin-top: 10px; font-size: 0.9rem; }
.langs a, .langs span { margin-inline: 0; }
[dir="rtl"] .crumbs ol { direction: rtl; }
[dir="rtl"] .bar { flex-direction: row-reverse; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .num { text-align: left; }
.guide { margin: 10px 0 6px; }
.guide dt { font-weight: 600; margin-top: 10px; }
.guide dd { margin: 2px 0 0; color: var(--fg); }
.plain li { margin: 4px 0; }
/* For AI assistants (assistants.html): an address and two commands to
   copy, which wrap or scroll inside their own box rather than widen the
   page on a phone. */
.assist ol, .assist ul, .assist dl, .assist pre { max-width: 78ch; }
.assist li { margin: 6px 0; }
.assist code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; overflow-wrap: anywhere; }
.assist .address code { font-size: 1.05rem; }
.assist pre { overflow-x: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.assist pre code { overflow-wrap: normal; white-space: pre; }
.assist .tools dt { font-weight: 600; margin-top: 16px; }
.assist .tools dd { margin: 4px 0 0; }
.origins { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 10px 0 0; list-style: none; }
.origins a { font-size: 0.86rem; padding: 5px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--fg); }
.origins a:hover { border-color: var(--accent); }

.soon { font-size: 0.78rem; color: var(--muted); font-style: italic; }
.chips a.nofares span.soon { font-style: normal; }

/* Origin-destination picker. Sits above the link lists rather than replacing
   them: with scripting off the links are still the way through. */
.go { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 22px 0 8px; }
.go > div { display: flex; flex-direction: column; gap: 5px; flex: 1 1 200px; }
.go > div.when { flex: 0 1 210px; }
/* Safari draws a native select at its own size and ignores padding, so the
   month box sat smaller and lower than the inputs beside it. Drawn by us
   instead -- the arrow is two gradients on the theme's colour, so it follows
   dark mode -- and every browser gets the same box. */
.go select, .versus select {
  -webkit-appearance: none; appearance: none;
  padding: 11px 36px 11px 13px; border: 1px solid var(--line); border-radius: 8px;
  background-color: var(--card); color: var(--fg); font: inherit; font-size: 1rem;
  line-height: 1.25; width: 100%; box-sizing: border-box; min-height: 46px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.go select:focus, .versus select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.go label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.go input {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--fg); font: inherit; font-size: 1rem;
  line-height: 1.25; width: 100%; box-sizing: border-box; min-height: 46px;
}
.go input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.go button {
  padding: 11px 20px; border: 1px solid var(--button); border-radius: 8px; min-height: 46px;
  background: var(--button); color: var(--button-ink); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.go button:hover { opacity: 0.9; }

/* The booking pages (_anywhere.html): the picker's frame, what each asks
   and its rows. No dates and no travellers since no booking link carries
   them (site/book.py). The row of links between the six sits under the
   lede; a page with more than one row heads each, as the "Plan this trip"
   block does. */
.kinds { margin: 14px 0 0; }
/* The page the reader is on, as a chip lit the way the booking rows are:
   .chips span is a chip's small grey count, which this is not. */
.kinds .chips [aria-current] {
  display: inline-flex; padding: 7px 12px; border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent-soft); color: var(--fg); font-size: 0.92rem;
}
.fl-results { margin: 26px 0 0; }
.fl-results h2 { margin-top: 0; }
.fl-results .verdict a { font-weight: 600; }
.fl-row h3 { font-size: 0.95rem; font-weight: 500; margin: 18px 0 0; }
.fl-row .book { margin: 10px 0 0; }
.fl-row > .note { margin: 8px 0 0; font-size: 0.84rem; }

/* The front door (§2.19). The cards are .now's; this is only the frame, the
   city chooser, and a button that reads as a link. All of it on the theme's
   tokens, so dark mode needs nothing of its own. */
.here { margin: 18px 0 8px; }
.here h2 { margin-top: 0; }
.choose { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.choose button {
  padding: 8px 14px; background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 999px; font: inherit;
  font-size: 0.92rem; cursor: pointer;
}
.choose button:hover { border-color: var(--accent); color: var(--accent); }
.choose button.quiet { color: var(--muted); border-style: dashed; }
button.link {
  padding: 0; border: 0; background: none; font: inherit; color: var(--accent);
  text-decoration: underline; cursor: pointer;
}
/* On a phone every box is the full width, When included: its own rule above
   outranks a plain `.go > div`, so it is named here too. */
@media (max-width: 520px) { .go > div, .go > div.when, .go button { flex: 1 1 100%; } }

/* "Good right now": the one question the picker cannot answer. Figures rather
   than adjectives — the point of the site is that the numbers are there. */
.now { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; padding: 0; margin: 14px 0 0; list-style: none; }
.now a {
  display: block; padding: 15px 16px; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--sweet);
  border-radius: 8px; text-decoration: none; color: var(--fg);
}
.now a:hover { border-color: var(--accent); border-left-color: var(--accent); }
.now .figures { display: block; margin-top: 3px; font-size: 0.9rem; color: var(--fg); font-variant-numeric: tabular-nums; }

/* Header bar and the theme button: the icon for the mode it is in -- a
   half-filled circle for "matches your device", a sun, a moon -- and the
   words in its tooltip. "Auto" in text said neither what nor after what. */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--fg); cursor: pointer; flex: none;
}
.theme:hover, .theme:focus-visible { border-color: var(--accent); color: var(--accent); }
.theme svg { display: none; width: 20px; height: 20px; }
.theme[data-mode="system"] .i-system, .theme[data-mode="light"] .i-light,
.theme[data-mode="dark"] .i-dark { display: block; }

/* Search (find.js) and the weekly note (notify.js): pills that say what they
   are beside the theme button, the icon alone on a phone. Search opens into a
   box where it stands and the note pops its form up under the envelope; both
   float over the page rather than pushing it down a line. */
.find, .notify {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; flex: none;
  padding: 0 15px 0 12px; margin: 0 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--muted); font-size: 0.92rem; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.find svg, .notify svg { width: 18px; height: 18px; flex: none; color: var(--fg); }
.find:hover, .find:focus-visible, .find[aria-expanded="true"],
.notify:hover, .notify:focus-visible, .notify[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.find:hover svg, .find:focus-visible svg, .find[aria-expanded="true"] svg,
.notify:hover svg, .notify:focus-visible svg, .notify[aria-expanded="true"] svg { color: var(--accent); }
/* The weekly note is the envelope alone, on every screen. Its name stays in
   the markup, out of sight: it is what a screen reader says for the button. */
.notify { width: 38px; padding: 0; justify-content: center; }
.notify span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.find-at, .notify-at { position: relative; display: flex; align-items: center; flex: none; }
.find-at.open .find { display: none; }
.find-box[hidden], .notify-pop[hidden] { display: none; }

/* The search box: the pill grown, with its list popping up beneath it. */
.find-box {
  position: relative;
  display: flex; align-items: center; gap: 6px; width: min(360px, 40vw); height: 38px;
  margin: 0 3px; padding: 0 4px 0 12px;
  border: 1px solid var(--accent); border-radius: 999px; background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  animation: find-open 0.16s ease-out;
}
.find-box > svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.find-box input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none;
  -webkit-appearance: none; appearance: none;
  background: none; color: var(--fg); font: inherit; font-size: 0.95rem;
}
/* Chrome's clear button is its own blue; the x beside it closes, Escape clears. */
.find-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.find-close {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer;
}
.find-close:hover, .find-close:focus-visible { background: var(--raised); color: var(--fg); }
.find-close svg { width: 16px; height: 16px; }
/* Grown from the button's width, leftwards: its right edge stays where the
   button's was. Width and nothing else. A clip took the list with it, so for
   those first moments a click on a row fell through to the tabs below; a fade
   left Chrome drawing the list on a layer of its own, beneath the tabs and
   the photograph, which showed through it in dark mode long after. */
@keyframes find-open { from { width: 106px; } }
.find-box .options {
  top: calc(100% + 8px); left: auto; right: 0; margin: 0;
  width: 420px; min-width: 100%; max-width: calc(100vw - 32px);
  max-height: min(420px, 65vh); border-radius: 12px;
}
.find-box .options li { padding: 0; }
.find-box .options li.none { padding: 9px 11px; }
.find-box .options li.head {
  padding: 8px 11px 2px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.find-box .options a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 11px; border-radius: 6px; color: inherit; text-decoration: none;
}
.find-box .options a span { margin-left: 0; flex: none; white-space: nowrap; }

/* The weekly note: a card under the envelope, the form stacked to fit it. */
.notify-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 25;
  width: 370px; max-width: calc(100vw - 32px); padding: 16px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.notify-pop label { font-size: 0.92rem; }
.notify-pop .subscribe-form .row { flex-direction: column; }
.notify-pop .subscribe-form input[type=email] { flex: none; width: 100%; font-size: 1rem; }
.notify-pop .alerts-note { margin: 10px 0 0; font-size: 0.8rem; color: var(--muted); }

@media (max-width: 520px) {
  .find, .notify { width: 38px; padding: 0; justify-content: center; margin: 0 1px; }
  /* Out of sight, not out of the accessibility tree: it is the button's name. */
  .find span, .notify span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  /* No room to grow in place beside the wordmark and two buttons, so the box
     covers the bar -- the x is the way back -- and both pop-ups take the
     width of the page. 16 px text, or an iPhone zooms the page to type. */
  header .bar { position: relative; }
  .find-at, .notify-at { position: static; }
  .find-box {
    position: absolute; top: 7px; left: 16px; right: 16px; z-index: 26;
    width: auto; height: 42px; margin: 0; animation: none;
  }
  .find-box input { font-size: 1rem; }
  .find-box .options { left: 0; right: 0; width: auto; max-width: none; max-height: 60vh; }
  .notify-pop { top: calc(100% + 6px); left: 16px; right: 16px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .find-box { animation: none; } }
/* Notifications on this device: above the email form in the envelope's
   pop-up, a line between them. */
.notify-pop .push { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.notify-pop .push p { margin: 0 0 10px; font-size: 0.92rem; }
.notify-pop .push p:last-child { margin-bottom: 0; }
.notify-pop .push-on {
  width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--button);
  background: var(--button); color: var(--button-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.notify-pop .push-on:disabled { opacity: 0.6; cursor: default; }
.notify-pop .push-failed { font-weight: 600; }
.subscribe .sent, .subscribe .failed, .subscribe .again { margin: 8px 0 0; }
.subscribe .sent:focus { outline: none; }
.subscribe .failed { font-weight: 600; }
.subscribe-form input[type=email]:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
/* /newsletter/: the form as a card of its own, not a field across the page. */
.note-signup .subscribe {
  max-width: 640px; margin: 20px 0 8px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.note-signup label { font-weight: 600; }
.note-signup .alerts-note { margin: 10px 0 0; font-size: 0.84rem; color: var(--muted); }
/* Back, the wordmark and three round buttons on the narrowest phones: the
   wordmark gives up a few pixels so none of them touch. */
@media (max-width: 360px) { header .logo { height: 30px; } }

/* The picker's listbox. Native <datalist> renders at a width the browser
   chooses, narrower than the field it belongs to and unstyleable; this is
   the same control drawn to match. */
.go > div { position: relative; }
.options {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  margin: 4px 0 0; padding: 4px; list-style: none;
  max-height: 260px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.options li {
  padding: 9px 11px; border-radius: 6px; cursor: pointer; font-size: 0.95rem;
}
.options li.on, .options li:hover { background: var(--sweet-bg); color: var(--sweet); }
.options li.none { color: var(--muted); cursor: default; font-size: 0.9rem; }
.options li.none:hover { background: none; color: var(--muted); }

/* ---- photographs --------------------------------------------------------
   Every one is somebody else's work under a licence that requires credit, so
   the caption is part of the figure rather than a footnote: an image that
   appears without it is a licence breach, and keeping them adjacent is what
   stops the two drifting apart.

   The hero is capped by height, not by width. These are other people's
   compositions at whatever aspect ratio they were shot in, and a full-bleed
   16:9 crop of a 3:2 photograph cuts the subject out of a third of them. */
.hero { margin: 22px 0 0; position: relative; }
.hero img {
  display: block; width: 100%; height: auto; max-height: 300px;
  object-fit: cover; border-radius: 10px; background: var(--card);
}

/* ---- a photograph's credit, behind an ⓘ on its corner ----------------
   A <details>: the ⓘ is its summary, and the credit opens over the bottom
   of the photograph. White on a dark veil, whatever the theme, because it
   sits on the picture, not on the page. */
figcaption.credit {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  margin: 0; padding: 0; font-size: 0.78rem; line-height: 1.35;
}
figcaption.credit summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font: italic 600 0.82rem/1 Georgia, "Times New Roman", serif;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
figcaption.credit summary::-webkit-details-marker { display: none; }
figcaption.credit summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
figcaption.credit details[open] summary { background: rgba(0, 0, 0, 0.8); }
figcaption.credit p {
  position: absolute; right: 0; bottom: 30px; margin: 0;
  width: max-content; max-width: min(78vw, 340px); padding: 7px 10px;
  border-radius: 8px; background: rgba(0, 0, 0, 0.78); color: #fff;
}
figcaption.credit a { color: #fff; text-decoration: underline; box-shadow: none; }
@media (max-width: 520px) { .hero img { max-height: 200px; } }
@media (min-width: 1000px) { .hero img { max-height: 380px; } }

/* The tiles become media cards. `aspect-ratio` with object-fit keeps the row
   even when Commons hands back a 3:2 for one city and a 16:9 for the next. */
.now a { padding: 0; overflow: hidden; }
.now img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; background: var(--card);
}
.now .tile { display: block; padding: 14px 16px; }
/* Every card in a row the same height, whatever its text: the list item
   stretches to the row and the card fills it. A place with no photograph
   gets the photo's space anyway, so a row never has one short card. */
.now li { display: flex; }
.now li > a { flex: 1; display: flex; flex-direction: column; }
.now .noimg {
  display: block; width: 100%; aspect-ratio: 3 / 2;
  background: var(--accent-soft) var(--noimg-mark) center / auto 46% no-repeat;
}
.now .tile strong { display: block; font-size: 1.02rem; }
.now .tile strong { display: inline; }
.now .tile small { color: var(--muted); font-size: 0.82rem; }
.now .verdict-line { color: var(--muted); font-size: 0.84rem; }
/* How a traveller type is chosen: there to be opened, not read first. */
details.rules { margin: 22px 0; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
details.rules summary { cursor: pointer; font-weight: 500; }
details.rules ul { margin: 10px 0 6px; padding-left: 20px; }
.for-links { margin: 6px 0 0; color: var(--muted); }
/* Place tiles on the traveller and holiday pages: four to a row, so the
   weather fits in two lines rather than five. */
.now.tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* Who's going as pictures: four photographs of the places that suit each
   kind of traveller, in a 2x2 mosaic above the name. */
.kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; padding: 0; margin: 14px 0 0; list-style: none; }
.kinds li { display: flex; }
.kinds a {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: var(--fg);
}
.kinds a:hover { border-color: var(--accent); box-shadow: var(--shadow); }
/* Safari lets a box's content outgrow its aspect-ratio -- the automatic
   minimum height is the photographs' own -- so a mosaic stood taller than its
   frame and the photographs ran down behind the card's words. Rows that
   cannot grow to fit, no automatic minimum, and anything over clipped. */
.kinds .mosaic {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; aspect-ratio: 3 / 2;
  min-height: 0; overflow: hidden; background: var(--line-soft);
}
.kinds .mosaic img, .kinds .mosaic .noimg { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto; }
.kinds .mosaic .noimg { background: var(--accent-soft); }
/* The front page's collage: this month's best place large, four beside it. */
.collage {
  display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 6px; height: 340px; margin: 18px 0 8px; border-radius: 14px; overflow: hidden;
}
.collage a { position: relative; display: block; overflow: hidden; background: var(--accent-soft); }
.collage a:first-child { grid-row: span 2; }
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.collage a:hover img { transform: scale(1.04); }
.collage span {
  position: absolute; left: 10px; bottom: 10px; padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--fg);
  font-size: 0.86rem; font-weight: 600;
}
@media (max-width: 560px) {
  .collage { grid-template-columns: 2fr 1fr; height: 240px; }
  .collage a:nth-child(n+4) { display: none; }
}
/* A region's heading on the photo grid of every destination. */
h2.region-head a { color: inherit; text-decoration: none; }
h2.region-head a:hover { color: var(--accent); }
/* On the months page a month is four photographs, then the rest by name. */
.year .strip { margin: 4px 0 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.year .strip .tile { padding: 8px 10px; }
.kinds .tile, .duels .tile { position: relative; z-index: 1; background: var(--card); }
.kinds .tile { display: block; padding: 12px 14px; }
.kinds .tile strong { display: block; font-size: 1rem; }
.kinds .figures { display: block; margin-top: 3px; font-size: 0.84rem; color: var(--muted); }
/* The front page's cards into the catalogue. A kind of place is a short
   word, so seven fit a row; a card's line is its places, muted. */
.now.tiles.row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.now.tiles.explore .figures { color: var(--muted); font-size: 0.84rem; }
p.more { margin: 12px 0 0; font-weight: 600; }
/* The rest of the booking pages, under the flight's line and quieter. */
p.more.booking { margin-top: 4px; font-weight: 400; }
/* Two up on a phone, like the front page's other cards: twelve months one
   above another was twelve screens. */
@media (max-width: 560px) {
  .now.tiles.explore { grid-template-columns: 1fr 1fr; gap: 8px; }
  .now.tiles.explore .tile { padding: 10px 11px; }
}
.kinds .best { display: block; margin-top: 6px; font-size: 0.86rem; color: var(--accent); font-weight: 500; }
.kinds.trips { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Two stops fill the frame side by side; three put the first down the left. */
.kinds .mosaic.n2 { grid-template-rows: minmax(0, 1fr); }
.kinds .mosaic.n3 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.kinds .mosaic.n3 img:first-child { grid-row: span 2; }
.kinds .mosaic img { min-height: 0; min-width: 0; }

/* ---- the comparisons' index -------------------------------------------
   A match-up is two photographs side by side with "or" between them, and a
   line that answers the question on the card. Same frame as the kinds cards,
   so every card is one size. */
.duels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 0; margin: 14px 0 0; list-style: none; }
.duels li { display: flex; }
.duels a {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: var(--fg); box-shadow: none;
}
.duels a:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.duels .pair {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr); gap: 2px; aspect-ratio: 16 / 9;
  min-height: 0; overflow: hidden; background: var(--line-soft);
}
.duels .pair img, .duels .pair .noimg { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; }
.duels .pair .noimg { background: var(--accent-soft); }
.duels .pair .vs, .versus .vs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--button); color: var(--button-ink); font-weight: 700; font-size: 0.82rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.duels .tile { display: block; padding: 12px 14px; }
.duels .tile strong { display: block; font-size: 1rem; }
.duels .figures { display: block; margin-top: 4px; font-size: 0.84rem; color: var(--muted); }

.versus {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 18px 0 8px;
  padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.versus label { display: flex; flex-direction: column; gap: 5px; flex: 1 1 180px; font-size: 0.84rem; color: var(--muted); }

.versus .vs { position: static; transform: none; flex: 0 0 auto; align-self: center; margin-top: 18px; }
.versus button {
  font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 8px; border: none;
  background: var(--button); color: var(--button-ink); cursor: pointer;
}
.versus[hidden] { display: none; }
.all-pairs { margin: 26px 0 0; }
.all-pairs summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
/* The holidays index: three to a row, so a date fits on its line. */
.now.occasions { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* The reader's own country, from the time zone, on the long-weekends index. */
.yours { margin: 14px 0 6px; padding: 12px 16px; background: var(--accent-soft); border-radius: 10px; }
.yours a { font-weight: 600; }

/* The written season profile. A two-column table rather than prose, because
   the four things it says — busiest, quieter, wet, worth timing for — are the
   four things somebody scans for, and a paragraph makes them read all of it to
   find one. */
table.profile th {
  width: 9.5rem; vertical-align: top; text-transform: none;
  font-size: 0.86rem; color: var(--muted); white-space: normal;
}
table.profile td { white-space: normal; }
table.profile td div { margin: 0 0 6px; }
table.profile td div:last-child { margin-bottom: 0; }
table.profile strong { font-weight: 600; }
@media (max-width: 520px) {
  table.profile th, table.profile td { display: block; width: auto; }
  table.profile th { border-bottom: none; padding-bottom: 0; }
  table.profile td { padding-top: 4px; }
}

/* ====================================================================== *
 *  Overhaul: navigation, elevation, and a phone that is not asked to
 *  scroll a seven-column table sideways to read the answer.
 * ====================================================================== */

/* ---- header ---------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  padding: 0;
}
header .bar { min-height: 56px; gap: 4px; }

/* ---- the tabs -------------------------------------------------------- */
.tabs ul {
  display: flex; gap: 2px; margin: 0 0 0 -12px; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs ul::-webkit-scrollbar { display: none; }
.tabs a {
  display: block; padding: 6px 12px 10px; white-space: nowrap; text-decoration: none;
  color: var(--muted); font-weight: 500; font-size: 0.92rem;
  border-bottom: 3px solid transparent;
}
.tabs a:hover { color: var(--fg); }
/* Glacier marks where you are: the brand's accent, used sparingly. */
.tabs a[aria-current] { color: var(--fg); border-bottom-color: var(--button); }
header a.brand { font-size: 1.02rem; letter-spacing: -0.02em; margin-right: auto; }

/* The way out of the installed app, where there is no browser chrome at all. */
a.back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: -9px; margin-right: 2px;
  border-radius: 999px; color: var(--fg); text-decoration: none; flex: none;
}
a.back:hover, a.back:focus-visible { background: var(--raised); color: var(--accent); }


/* ---- breadcrumbs ----------------------------------------------------- */
.crumbs {
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 60%, var(--raised));
  font-size: 0.82rem;
}
.crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin: 0; padding: 9px 0;
}
.crumbs li + li::before { content: "/"; color: var(--muted); margin-right: 6px; opacity: 0.55; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--fg); font-weight: 500; }

/* ---- type ------------------------------------------------------------ */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.45rem); margin: 30px 0 10px; letter-spacing: -0.028em; }
h2 { font-size: 1.22rem; margin: 40px 0 12px; letter-spacing: -0.015em; }
.lede { font-size: 1.02rem; max-width: 60ch; }

/* ---- the verdict, which is the answer -------------------------------- */
.verdict {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 12px;
  padding: 18px 20px; margin: 24px 0; font-size: 1.07rem; line-height: 1.55;
  box-shadow: var(--shadow);
}

/* ---- the month table ------------------------------------------------- */
table.months tbody tr:hover { background: var(--raised); }
table.months td.month { font-weight: 600; }
table.months .why { max-width: 24ch; white-space: normal; }

/* Below this the seven columns cannot fit, so each month becomes a block:
   the month and its verdict on one line, the figures as a run beneath, the
   reason last. Nothing scrolls sideways and nothing is cut off. */
@media (max-width: 660px) {
  .scroll { overflow: visible; }
  table.months, table.months tbody, table.months td { display: block; width: 100%; }
  table.months thead { display: none; }

  /* Each month is a card laid out in three lines: the name and its verdict,
     the figures, then the reason. Flex rather than absolute positioning,
     because the pills are not all one width -- "sweet spot" is twice "ok",
     and a pinned pill sat on top of the rain figure for five months of the
     year. `margin-left: auto` on the verdict eats the free space on the first
     line, which is what pushes the figures onto their own. */
  table.months tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px;
  }
  table.months tr.out { background: var(--bg); }
  table.months td {
    border: none; padding: 0; white-space: nowrap; text-align: left;
    width: auto; flex: 0 0 auto;
  }
  table.months td.month { order: 1; font-size: 1.05rem; font-weight: 600; }
  table.ranked td.rank { display: none; }
  table.months td.verdict-cell { order: 2; margin-left: auto; }
  table.months td.num {
    order: 3; margin-top: 9px; font-size: 0.92rem;
    color: var(--fg); font-variant-numeric: tabular-nums;
  }
  table.months td.num::before {
    content: attr(data-label) " "; color: var(--muted); font-size: 0.74rem;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  table.months td.why {
    order: 4; flex: 1 0 100%; margin-top: 8px; max-width: none;
    white-space: normal;
  }
  /* A table of facts -- a heading and a value a row, like "Before you go" --
     wraps its value: kept to one line, the cost of living ran 170px off a
     phone's screen and took the whole page sideways with it. */
  table.months th + td { white-space: normal; flex: 1 1 12ch; min-width: 0; }
}

/* ---- the origin hub: cards, not a five-column table ------------------ */
.places { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.places a {
  display: flex; gap: 14px; align-items: stretch;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--fg); overflow: hidden;
}
.places a:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.places img, .places .noimg {
  width: 104px; flex: none; object-fit: cover; align-self: stretch;
  background: var(--raised); height: auto;
}
.places .noimg { background: var(--accent-soft) var(--noimg-mark) center / auto 40% no-repeat; }
.places .body { display: block; padding: 13px 14px 13px 0; min-width: 0; }
.places strong { display: block; font-size: 1.04rem; letter-spacing: -0.01em; }
.places .when { display: block; color: var(--accent); font-size: 0.87rem; margin-top: 2px; }
.places .facts {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px;
  color: var(--muted); font-size: 0.83rem; font-variant-numeric: tabular-nums;
}
.places .fare { color: var(--fg); font-weight: 600; }
@media (min-width: 700px) { .places { grid-template-columns: 1fr 1fr; } }

/* ---- the hero goes edge to edge on a phone --------------------------- */
@media (max-width: 560px) {
  .hero { margin-left: -16px; margin-right: -16px; }
  .hero img { border-radius: 0; max-height: 230px; }
  .hero figcaption.credit { right: 12px; }
}

/* ---- a place in pictures (_gallery.html) -----------------------------
   One large and the rest small, like the front page's collage. Each credit
   sits on its own photograph, since its licence asks for it there; a fixed
   row height keeps the grid square whatever shape Commons sent. */
.gallery {
  display: grid; gap: 6px; margin: 14px 0 8px; border-radius: 12px; overflow: hidden;
  grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 170px;
}
/* min-width: 0, or a one-line credit sets the column's least width and a
   phone's page scrolls sideways. */
.gallery figure {
  position: relative; margin: 0; min-width: 0; overflow: hidden; background: var(--accent-soft);
}
.gallery figure:first-child { grid-row: span 2; }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption.credit { right: 6px; bottom: 6px; font-size: 0.72rem; }
.gallery figcaption.credit summary { width: 22px; height: 22px; }
/* A small tile cannot hold the credit inside itself, so the open credit is
   allowed out of it (the grid clips; an open tile does not). */
.gallery figure:has(details[open]) { overflow: visible; z-index: 3; }
.gallery.n4 { grid-template-columns: 2fr 1fr; grid-auto-rows: 113px; }
.gallery.n4 figure:first-child { grid-row: span 3; }
.gallery.n3 { grid-template-columns: 2fr 1fr; }
.gallery.n2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 230px; }
.gallery.n1 { grid-template-columns: 1fr; grid-auto-rows: 300px; }
.gallery.n1 figure:first-child, .gallery.n2 figure:first-child { grid-row: auto; }
@media (max-width: 560px) {
  .gallery.n3, .gallery.n4, .gallery.n5 { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; }
  .gallery.n3 figure:first-child, .gallery.n4 figure:first-child,
  .gallery.n5 figure:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery.n4 figure:nth-child(4) { display: none; }
  .gallery.n2 { grid-auto-rows: 150px; }
  .gallery.n1 { grid-auto-rows: 220px; }
}

/* ---- odds and ends --------------------------------------------------- */
.pill { padding: 3px 10px; font-size: 0.76rem; }
.links a, .cards a, .now a { box-shadow: none; }
.links a:hover, .cards a:hover, .now a:hover { box-shadow: var(--shadow); }

/* Two up on a phone. At one column a 3:2 image is 230px tall, so eight
   destinations took eight screens to scroll past — the section exists to be
   glanced at, not read. */
.now { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* On a wide page, four to a row: eight places are two even rows rather than
   seven and an orphan. */
@media (min-width: 1000px) {
  .now, .now.tiles { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .now.tiles.fives { grid-template-columns: repeat(5, 1fr); }
  .duels { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .now img, .now .noimg { aspect-ratio: 4 / 3; }
  .now .tile { padding: 11px 12px; }
  .now .tile strong { font-size: 0.97rem; }
  .now .figures { font-size: 0.82rem; }
}

/* The year, month by month. Twelve rows of links: enough to plan a trip that
   is not in the next fortnight, and the only way a crawler reaches every
   destination from the front page. */
.year { margin: 18px 0 0; }
.year section { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.year section:first-child { border-top: none; }
.year h3 {
  margin: 0 0 8px; font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); font-weight: 600;
}
.year .chips a { padding: 5px 11px; font-size: 0.88rem; }
.year .chips span { font-variant-numeric: tabular-nums; }
.chips.all a { font-size: 0.9rem; }
@media (min-width: 720px) {
  .year { columns: 2; column-gap: 34px; }
  .year.single { columns: auto; }
  .year section { break-inside: avoid; }
}

/* ---- groups: regions, countries, kinds of place and trips (PLAN §2.21) ---- */
h3.region a { color: inherit; text-decoration: none; }
h3.region a:hover { color: var(--accent); }
/* A run of chips under a small heading inside one list: the region a month's
   places are in, so twenty-four chips read as a list rather than a shuffle. */
.chips li.group {
  flex-basis: 100%; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin: 8px 0 -2px;
}
.chips li.group:first-child { margin-top: 0; }
.chips li.group a { color: inherit; text-decoration: none; }
.chips li.group a:hover { color: var(--accent); }
.chips .chip {
  display: inline-flex; padding: 7px 12px; border: 1px dashed var(--line);
  border-radius: 999px; color: var(--muted); font-size: 0.92rem;
}
.jump { margin: 6px 0 0; }
.before { margin: 8px 0 0; }
/* On arrival (_kit.html): a short list under "Before you go", its sources
   folded away beneath it. A source's address is long and has no spaces, so
   it breaks anywhere rather than pushing a phone's page sideways. */
h3.sub { font-size: 1rem; font-weight: 600; margin: 20px 0 6px; }
.kit li { max-width: 78ch; }
.kit [hidden] { display: none; }
details.sources { margin: 4px 0 12px; font-size: 0.88rem; color: var(--muted); }
details.sources summary { cursor: pointer; }
details.sources ul { margin: 6px 0 0; padding-left: 1.2em; }
details.sources a { overflow-wrap: anywhere; }
.options li span { color: var(--muted); font-size: 0.8rem; margin-left: 8px; }
.options li.on span, .options li:hover span { color: inherit; opacity: 0.8; }
.cards .figures { display: block; margin-top: 6px; color: var(--fg); font-size: 0.86rem; }

/* The month grid: every member of a group across every month. Wide on
   purpose and scrolls sideways inside .scroll, with the place names held
   still, because twelve columns are the point and a phone is 390px. */
table.grid {
  border-collapse: collapse; width: 100%; font-size: 0.84rem;
  font-variant-numeric: tabular-nums; margin: 10px 0 6px;
}
table.grid th, table.grid td {
  padding: 6px 6px; text-align: center; border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
table.grid thead th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600;
}
table.grid thead th.best, table.grid tfoot td.best { color: var(--accent); }
table.grid tbody th, table.grid tfoot th {
  text-align: left; position: sticky; left: 0; background: var(--bg);
  font-weight: 600; z-index: 1; padding-right: 12px;
}
table.grid tbody th a { color: inherit; text-decoration: none; }
table.grid tbody th a:hover { color: var(--accent); }
table.grid td.sweet { background: var(--sweet-bg); color: var(--sweet); }
table.grid td.avoid { background: var(--avoid-bg); color: var(--avoid); }
table.grid td.ok { color: var(--muted); }
table.grid td a { color: inherit; text-decoration: none; }
table.grid td a:hover { text-decoration: underline; }
table.grid i.busy {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--busy); margin-left: 3px; vertical-align: middle;
}
table.grid tfoot td { color: var(--muted); font-size: 0.8rem; font-weight: 600; }
table.grid abbr { text-decoration: none; }

/* Head to head: two rows of the grid and a pick beneath each month. */
table.grid td small { font-size: 0.7rem; color: var(--muted); margin-left: 2px; }
table.grid td.sweet small, table.grid td.avoid small { color: inherit; opacity: 0.75; }
table.grid tr.fare th { font-weight: 500; font-size: 0.78rem; color: var(--muted); }
table.grid tr.fare td { font-size: 0.74rem; color: var(--muted); }
table.grid tfoot td.pick { font-size: 0.76rem; font-weight: 600; }
table.grid tfoot td.pick.a, table.grid tfoot td.pick.b { color: var(--accent); }
table.grid tfoot td.pick.either { color: var(--muted); font-weight: 500; }
table.grid tfoot td.pick.neither { color: var(--avoid); font-weight: 500; }

/* ---- the footer (_footer.html) ------------------------------------------
   The wordmark and a line on what the site is, the profiles to follow under
   them; beside them three short groups of links; across the foot the small
   print the licences and the booking links are owed. On a phone one column,
   the groups two abreast. Only the theme's tokens, so dark mode needs nothing
   of its own, and the icons are 44px targets for a thumb. */
footer {
  margin-top: 56px; padding: 36px 0 28px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, var(--raised));
  color: var(--muted); font-size: 0.86rem;
}
.foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.foot-brand { display: inline-flex; line-height: 0; }
.foot-brand .logo { height: 36px; }
.foot-line { margin: 12px 0 0; max-width: 38ch; line-height: 1.55; }
footer h2.foot-head {
  margin: 0 0 8px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.foot-about h2.foot-head { margin-top: 22px; }
.follow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.follow a {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg);
}
.follow a:hover, .follow a:focus-visible { border-color: var(--accent); color: var(--accent); }
.follow svg { width: 20px; height: 20px; }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.foot-links ul { margin: 0; padding: 0; list-style: none; }
.foot-links a {
  display: inline-block; padding: 5px 0; font-size: 0.9rem; line-height: 1.4;
  color: var(--fg); text-decoration: none;
}
.foot-links a:hover { color: var(--accent); text-decoration: underline; }
/* About has the whole width on a phone, where half of it was too narrow
   for the address; a narrower screen still breaks it rather than scroll. */
.foot-about-site { grid-column: 1 / -1; }
.foot-mail { overflow-wrap: anywhere; }
.foot-small { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.8rem; }
.foot-small p { margin: 4px 0; max-width: 78ch; }
@media (min-width: 720px) {
  .foot { grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 40px; }
  .foot-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-about-site { grid-column: auto; }
}

/* ---- Pages that slide rather than blink ----------------------------------
   A cross-document view transition: Chrome fades one page into the next,
   and the header and the dock (below) keep their place through it, so a tap
   reads as the app answering rather than a page loading. Browsers without it
   navigate as before. Off, with the rest of the motion, for anyone who asked. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- The installed app --------------------------------------------------
   theme.js adds html.app when the page runs inside the iOS app. The same
   pages, dressed for one hand: a header that stays, the sections in a bar
   at the bottom within a thumb's reach, no breadcrumbs, no footer, and the
   phone's own bars kept clear of with the safe-area insets that
   viewport-fit=cover (base.html) makes real. A browser tab sees none of
   it, and neither does a copy installed from a browser. */
.dock { display: none; }
.web-only { display: block; }
html.app { -webkit-tap-highlight-color: transparent; }
html.app .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
html.app header {
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  padding: 10px 0; padding-top: max(10px, env(safe-area-inset-top));
  view-transition-name: top;
}
html.app header .logo { height: 28px; }
html.app .crumbs, html.app footer, html.app .web-only { display: none; }
html.app h1 { margin-top: 20px; }
@media (max-width: 719px) {
  html.app header .tabs { display: none; }
  html.app main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  html.app .dock {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--card); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    view-transition-name: dock;
  }
}
.dock ul { display: flex; margin: 0; padding: 0; list-style: none; }
.dock > ul > li { flex: 1 1 0; min-width: 0; }
.dock a, .dock button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%;
  padding: 8px 4px 9px; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.68rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em;
  color: var(--muted); text-decoration: none;
}
.dock > ul svg { width: 24px; height: 24px; flex: none; }
.dock [aria-current], .dock [aria-expanded="true"] { color: var(--accent); }
.dock a:focus-visible, .dock button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
/* The sections, in a sheet above the bar. */
.explore-pop[hidden] { display: none; }
.explore-pop {
  position: fixed; left: 0; right: 0; z-index: 29;
  bottom: calc(58px + env(safe-area-inset-bottom));
  max-height: 70vh; overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--card); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow); padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
}
.explore-pop ul { display: block; }
.explore-pop li { border-bottom: 1px solid var(--line-soft); }
.explore-pop li:last-child { border-bottom: 0; }
.explore-pop a {
  display: block; padding: 13px 4px; flex-direction: row; align-items: flex-start;
  font-size: 1rem; font-weight: 500; color: var(--fg);
}
.explore-pop a[aria-current] { color: var(--accent); }

/* ---- "Open the app", on an Android phone (getapp.js) ---------------------
   A bar fixed to the foot of the window, so showing it moves nothing on the
   page, and the page is given that much room below so it covers nothing. */
.getapp[hidden] { display: none; }
.getapp {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 28;
  display: flex; align-items: center; gap: 10px;
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--card); border-top: 1px solid var(--line); box-shadow: var(--shadow);
}
.getapp p { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.9rem; line-height: 1.35; }
.getapp a {
  flex: none; padding: 9px 16px; border-radius: 8px; background: var(--button); color: var(--button-ink);
  font-size: 0.92rem; font-weight: 600; text-decoration: none; box-shadow: none;
}
.getapp button {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer;
}
.getapp button:hover, .getapp button:focus-visible { background: var(--raised); color: var(--fg); }
.getapp button svg { width: 16px; height: 16px; }
html.has-getapp body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* ---- Recently viewed (mine.js) ------------------------------------------ */
.mine { margin: 18px 0 8px; }
.mine h2:first-child { margin-top: 0; }
.chips li { display: inline-flex; align-items: center; }

/* ======================================================================== *
 *  The refresh (2026-10-03): the app's look on the website, every address
 *  and word kept. One block at the end, so it reads as one change and wins
 *  over what it restyles by order alone. The approved mockups are the
 *  canvas's "Website refresh" row; research/app-redesign.md, "Look".
 *  Snow ground, white cards with a 1px outline, Slate ink, Glacier accent,
 *  Ice for soft fills, Poppins. Every colour has a dark value; every text
 *  pairing is 4.5:1 or more in both.
 * ======================================================================== */
:root {
  --outline: #e1e9eb;      /* a card's hairline */
  --ink-2: #46545f;        /* secondary text: 7.8:1 on white */
  --field: #f4f6f7;
  --field-line: #dde6e8;
  --chip-line: #c9d7da;
  --disc: #ddebec;         /* Ice, behind an icon */
  --head: #ffffff;
  --cta: #263340;          /* Slate, white on it */
  --cta-ink: #ffffff;
  --card-shadow: 0 8px 24px rgba(38, 51, 64, 0.08);
  /* The season strip's four verdicts, as the app's SeasonStrip.kt: they
     differ in lightness as well as hue. */
  --v-sweet: #2fb8a6; --v-sweet-ink: #0e2e2a;
  --v-good: #8fd3c9;  --v-good-ink: #12332f;
  --v-ok: #d3dfe2;    --v-ok-ink: #263340;
  --v-avoid: #e3a68e; --v-avoid-ink: #4e1e12;
  --v-none: #e7eef0;  --v-none-ink: #556372;
  --busy-dot: #8a5a12;
  /* The verdict pills. */
  --p-sweet-bg: #bde7e1; --p-sweet: #1e4d47;
  --p-good-bg: #dcf1ed;  --p-good: #1e4d47;
  --p-ok-bg: #e7eef0;    --p-ok: #46545f;
  --p-avoid-bg: #f7e9e3; --p-avoid: #9a4b33;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --outline: #3a4855; --ink-2: #c3ced5; --field: #1b252e; --field-line: #434e5a;
    --chip-line: #556677; --disc: #285056; --head: #263340; --cta: #2fb8a6; --cta-ink: #1b252e;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --v-sweet: #2fb8a6; --v-sweet-ink: #0e2e2a;
    --v-good: #5fa79d;  --v-good-ink: #0e2e2a;
    --v-ok: #435563;    --v-ok-ink: #dce6ea;
    --v-avoid: #8c4b36; --v-avoid-ink: #f7e9e3;
    --v-none: #2b3843;  --v-none-ink: #9aa8b4;
    --busy-dot: #f2c27a;
    --p-sweet-bg: #1f4a44; --p-sweet: #bde7e1;
    --p-good-bg: #26413d;  --p-good: #cdeae5;
    --p-ok-bg: #3a4855;    --p-ok: #dce6ea;
    --p-avoid-bg: #4a2a20; --p-avoid: #f2b9a3;
  }
}
:root[data-theme="dark"] {
  --outline: #3a4855; --ink-2: #c3ced5; --field: #1b252e; --field-line: #434e5a;
  --chip-line: #556677; --disc: #285056; --head: #263340; --cta: #2fb8a6; --cta-ink: #1b252e;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --v-sweet: #2fb8a6; --v-sweet-ink: #0e2e2a;
  --v-good: #5fa79d;  --v-good-ink: #0e2e2a;
  --v-ok: #435563;    --v-ok-ink: #dce6ea;
  --v-avoid: #8c4b36; --v-avoid-ink: #f7e9e3;
  --v-none: #2b3843;  --v-none-ink: #9aa8b4;
  --busy-dot: #f2c27a;
  --p-sweet-bg: #1f4a44; --p-sweet: #bde7e1;
  --p-good-bg: #26413d;  --p-good: #cdeae5;
  --p-ok-bg: #3a4855;    --p-ok: #dce6ea;
  --p-avoid-bg: #4a2a20; --p-avoid: #f2b9a3;
}

/* Words for a screen reader only: a strip cell's month and verdict. */
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- type ------------------------------------------------------------- */
h1 { font-weight: 600; letter-spacing: -0.02em; }
h2 { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; }
.lede { color: var(--ink-2); }
/* A small-capitals label over a block, as the mockups' "Book". */
.caps {
  margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted);
}

/* ---- the header: white, a hairline under it, the tabs in a row ------- */
header {
  background: var(--head); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--outline);
}
header .bar { min-height: 62px; }
.tabs a { color: var(--ink-2); font-size: 0.875rem; padding: 4px 12px 11px; }
.tabs a:hover { color: var(--fg); }
.tabs a[aria-current] { color: var(--fg); font-weight: 600; }
/* "From <city>": the city the front page knows the reader flies from, a
   tap to change it. Filled by front.js; hidden until then, and on a phone,
   where the band under the picker says the same with room to spare. */
.from-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; flex: none;
  padding: 0 10px 0 14px; margin: 0 3px; border: 1px solid var(--chip-line);
  border-radius: 19px; background: var(--card); color: var(--fg);
  font-size: 0.8125rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.from-chip svg { width: 16px; height: 16px; }
.from-chip:hover, .from-chip:focus-visible { border-color: var(--fg); }
@media (max-width: 600px) { .from-chip { display: none; } }

/* ---- pills: a verdict in its own words and colour --------------------- */
.pill {
  padding: 3px 9px; border-radius: 10px; font-size: 0.75rem; font-weight: 600;
  line-height: 1.35; white-space: nowrap; background: var(--p-ok-bg); color: var(--p-ok);
}
.pill.sweet { background: var(--p-sweet-bg); color: var(--p-sweet); }
.pill.good { background: var(--p-good-bg); color: var(--p-good); }
.pill.avoid { background: var(--p-avoid-bg); color: var(--p-avoid); }
.pill.busy { background: var(--busy-bg); color: var(--busy); }
.pill.cool { background: var(--line); color: var(--muted); }

/* ---- The season strip (_strip.html) -------------------------------------
   Twelve cells, a month each, coloured by its verdict: each verdict class
   sets the pair (--c, --ci) the cell, the legend's swatch and a compact
   bar all read. A busy month has a dot under its name, ringed in the
   cell's own ink so it shows on the deepest cells too; the chosen month
   is outlined. Three letters a month where the strip is wide, one where
   it is not (a container query, so a strip in a narrow card is narrow
   whatever the screen). */
.v-none { --c: var(--v-none); --ci: var(--v-none-ink); }
.v-sweet { --c: var(--v-sweet); --ci: var(--v-sweet-ink); }
.v-good { --c: var(--v-good); --ci: var(--v-good-ink); }
.v-ok { --c: var(--v-ok); --ci: var(--v-ok-ink); }
.v-avoid { --c: var(--v-avoid); --ci: var(--v-avoid-ink); }
.strip {
  container-type: inline-size; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px; margin: 12px 0 0; padding: 0; list-style: none;
}
.strip li { position: relative; display: flex; min-width: 0; }
.strip li > a, .strip li > span {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; height: 46px; border-radius: 8px; background: var(--c); color: var(--ci);
  font-size: 0.75rem; font-weight: 600; line-height: 1; text-decoration: none;
}
.strip li > a:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ci) 45%, transparent); }
.strip li > a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.strip i { width: 6px; height: 6px; border-radius: 50%; }
.strip .busy i { background: var(--busy-dot); box-shadow: 0 0 0 1px var(--ci); }
.strip .on > a, .strip .on > span { box-shadow: inset 0 0 0 2.5px var(--fg); }
.strip .l3 { display: none; }
@container (min-width: 520px) {
  .strip li > a, .strip li > span { height: 58px; border-radius: 10px; font-size: 0.8125rem; }
  .strip i { width: 7px; height: 7px; }
  .strip .l1 { display: none; }
  .strip .l3 { display: inline; }
}
.legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0;
  list-style: none; font-size: 0.78rem; color: var(--ink-2);
}
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.legend i.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--busy-dot); }
/* Compact, for a card: thin bars, no letters, the chosen month taller and
   outlined. Each bar an image named by its tooltip. */
.strip-c {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end;
  gap: 2px; height: 12px; margin-top: 10px;
}
.strip-c i { height: 8px; border-radius: 3px; background: var(--c); }
.strip-c i.on { height: 12px; box-shadow: inset 0 0 0 1.5px var(--fg); }
@media (forced-colors: active) {
  .strip li > a, .strip li > span, .strip-c i, .legend i { border: 1px solid CanvasText; }
}

/* ---- cards: white, a hairline, 16px corners --------------------------- */
.now { gap: 16px; }
.now a, .now a:hover {
  border: 1px solid var(--outline); border-radius: 16px; background: var(--card); overflow: hidden;
}
.now a:hover { border-color: var(--chip-line); box-shadow: var(--card-shadow); }
.now .tile { padding: 12px 14px 14px; }
.now .tile strong { font-size: 1.0625rem; font-weight: 600; }
.now .figures { margin-top: 4px; color: var(--ink-2); font-size: 0.84rem; }
.now small { color: var(--muted); font-size: 0.8rem; }
/* A place card's first line: the name, then its verdict at the right. */
.tile-head { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.tile-head strong { margin-right: auto; }
.kinds a, .duels a, .places a, .cards a, .links a, details.rules, .versus, .yours {
  border-color: var(--outline); border-radius: 14px;
}
.kinds a:hover, .duels a:hover, .places a:hover, .cards a:hover, .links a:hover {
  border-color: var(--chip-line); box-shadow: var(--card-shadow);
}
.chips a { border-color: var(--field-line); }
.chips a:hover { border-color: var(--fg); color: var(--fg); }
.verdict { border-color: var(--outline); border-radius: 16px; box-shadow: none; }
/* A row of cards that runs sideways on a phone, as the app's do, rather
   than stacking into a page of photographs. */
@media (max-width: 640px) {
  .now.rail {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(232px, 72vw);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; scroll-padding: 0 16px;
  }
  .now.rail::-webkit-scrollbar { display: none; }
  .now.rail li { scroll-snap-align: start; }
}

/* ---- the booking pills: an icon disc and a short name ----------------- */
.bookpills {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
  margin: 10px 0 0; padding: 0; list-style: none;
}
.bookpills a {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px;
  border: 1px solid var(--outline); border-radius: 12px; background: var(--card);
  color: var(--fg); font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.bookpills a:hover, .bookpills a:focus-visible { border-color: var(--chip-line); box-shadow: var(--card-shadow); }
.disc {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--disc); color: var(--fg);
}
.disc svg { width: 17px; height: 17px; }
@media (max-width: 560px) {
  .bookpills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bookpills a { gap: 7px; padding: 0 8px; font-size: 0.78rem; }
}

/* ---- the front page (index.html), as the mockups' WebHome --------------
   The question and the picker side by side, the picker a card; Book as six
   pills; the reader's city's best this month; holidays beside who is
   travelling; the kinds of place as photographs with their names on them. */
.ask { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; padding: 36px 0 8px; }
.ask-q { flex: 1 1 420px; min-width: 0; }
.ask-q h1 { margin: 0; font-size: clamp(1.85rem, 1.1rem + 2.6vw, 2.625rem); line-height: 1.12; text-wrap: balance; }
.ask-q .lede { margin: 12px 0 0; font-size: 1rem; line-height: 1.6; max-width: 60ch; }
.ask-go {
  flex: 1 1 380px; min-width: 0; padding: 18px; background: var(--card);
  border: 1px solid var(--outline); border-radius: 18px; box-shadow: var(--card-shadow);
}
.ask-go .go { display: grid; gap: 10px; margin: 0; }
.ask-go .go > div, .ask-go .go > div.when {
  display: grid; gap: 2px; padding: 9px 14px; border: 1px solid var(--field-line);
  border-radius: 12px; background: var(--field);
}
.ask-go .go > div:focus-within { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.ask-go .go label { font-size: 0.75rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.ask-go .go input, .ask-go .go select {
  min-height: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.5;
}
.ask-go .go select { padding-right: 24px; background-position: calc(100% - 7px) 52%, calc(100% - 2px) 52%; }
.ask-go .go input::placeholder { font-weight: 400; color: var(--muted); opacity: 1; }
.ask-go .go input:focus, .ask-go .go select:focus { outline: none; }
.ask-go .go button {
  min-height: 48px; border: 0; border-radius: 12px; background: var(--cta); color: var(--cta-ink);
  font-size: 0.9375rem;
}
.ask-go #go-note { margin: 12px 2px 0; font-size: 0.8rem; }
@media (max-width: 560px) { .ask { padding-top: 22px; } .ask-go { padding: 14px; } }

/* A section of the front page, and its title as the mockups set it. */
.fs, .here, .mine { margin: 34px 0 0; }
.fs > h2, .fs-head h2, .duo h2, .here > h2 { margin: 0 0 12px; font-size: 1.375rem; }
.fs > h2.caps { margin: 0; font-size: 0.8125rem; }
.fs > .note { margin: -4px 0 12px; }
.book-at { margin-top: 26px; }
.fs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.fs-head h2 { margin-bottom: 0; }
.fs-head a { font-size: 0.875rem; font-weight: 500; }
.lede-s { margin: 6px 0 14px; max-width: 78ch; font-size: 0.906rem; color: var(--ink-2); }
.here .now { margin-top: 0; }
.here > .note { margin: 12px 0 0; }

/* A card whose line is followed by its year: the strip sits at the foot,
   so a row of cards ends on one line. */
.now .tile:has(> .strip-c) { display: flex; flex-direction: column; flex: 1; }
.now .tile:has(> .strip-c) > .figures { margin-bottom: 10px; }
.now .tile > .strip-c { margin-top: auto; }

/* Holidays coming up, beside Travelling with. The first holiday the
   reader keeps is a photograph; the next, and the long weekends, are
   cards of words beside it. */
.duo { display: flex; flex-wrap: wrap; gap: 30px 24px; }
.duo-main { flex: 1 1 520px; min-width: 0; }
.duo-side { flex: 1 1 340px; min-width: 0; }
.hols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start;
  gap: 10px 14px; margin: 0; padding: 0; list-style: none;
}
.hols li { display: flex; min-width: 0; }
.hols li.lead { grid-row: span 2; }
.hols a {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--outline);
  border-radius: 12px; background: var(--card); color: var(--fg); text-decoration: none;
}
.hols li.lead a { border-radius: 14px; }
.hols a:hover { border-color: var(--chip-line); box-shadow: var(--card-shadow); }
.hols img, .hols .noimg { display: none; }
.hols .lead img, .hols .lead .noimg { display: block; width: 100%; height: 130px; object-fit: cover; }
.hols .noimg { background: var(--accent-soft) var(--noimg-mark) center / auto 42% no-repeat; }
.hols .tile { display: block; padding: 11px 14px 12px; }
.hols .tile-head strong { font-size: 0.95rem; font-weight: 600; }
.hols .when { font-size: 0.8125rem; color: var(--ink-2); }
.hols .figures { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--ink-2); }
@media (max-width: 560px) {
  .hols { gap: 10px 8px; }
  .hols li.lead { grid-column: 1 / -1; grid-row: auto; }
  .hols .lead img, .hols .lead .noimg { height: 160px; }
}
.with { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.with a {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 14px;
  border: 1px solid var(--outline); border-radius: 14px; background: var(--card);
  color: var(--fg); font-weight: 600; text-decoration: none;
}
.with a:hover { border-color: var(--chip-line); box-shadow: var(--card-shadow); }
.with .disc { width: 34px; height: 34px; }
.with .disc svg { width: 19px; height: 19px; }

/* What kind of trip? as the mockups' "Kinds of place": a photograph with
   the kind's name on it, and its places in a line beneath. */
.now.explore.row { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.now.explore.row a { position: relative; border-radius: 14px; }
.now.explore.row img, .now.explore.row .noimg { height: 150px; aspect-ratio: auto; }
.now.explore.row .tile { padding: 10px 12px 12px; }
.now.explore.row .tile strong {
  position: absolute; left: 12px; top: 150px; transform: translateY(calc(-100% - 12px));
  padding: 4px 10px; border-radius: 9px; background: var(--card); color: var(--fg);
  font-size: 0.875rem; line-height: 1.4;
}
.now.explore.row .figures { margin-top: 0; }
@media (max-width: 560px) {
  .now.explore.row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .now.explore.row img, .now.explore.row .noimg { height: 108px; }
  .now.explore.row .tile strong { left: 10px; top: 108px; transform: translateY(calc(-100% - 10px)); }
}

/* ---- place page (site-place) ---- */
/* A place's page, its month pages, a place coming soon and a city's page
   for it, in the app's look (the website refresh, 2026-10-03; the canvas's
   "Website: place page"): the photograph first, the year as the season
   strip, the booking block in a column of its own on a wide screen, and
   the rest as white cards under a bar of the page's sections. Only how the
   page shows its answer changes: the markup keeps every word and address.
   Every rule is under .placepage, the pages' own wrapper, so nothing here
   reaches another page. --stick is the height of the header that stays at
   the top (base.html): the section bar and the booking column stop under
   it, and a section a link jumps to stops under both. */
.placepage { --stick: 103px; margin-top: 14px; }
html.app .placepage { --stick: calc(123px + max(0px, env(safe-area-inset-top) - 10px)); }
@media (max-width: 719px) {
  html.app .placepage { --stick: calc(83px + max(0px, env(safe-area-inset-top) - 10px)); }
}
.placepage [id] { scroll-margin-top: calc(var(--stick) + 72px); }

/* The photograph, the page's width and rounded as the cards are; edge to
   edge on a phone. Its width and height stay in the markup, so the space
   is kept before it arrives. */
.placepage .hero { margin: 0; }
.placepage .hero img { max-height: 360px; border-radius: 16px; }
@media (max-width: 560px) {
  .placepage { margin-top: 0; }
  .placepage .hero img { max-height: 260px; border-radius: 0; }
}
.placepage h1 { margin: 22px 0 0; }
.place-where { margin: 4px 0 10px; color: var(--ink-2); font-size: 0.95rem; }
.placepage .lede { margin-bottom: 0; }

/* Two columns from a laptop's width: the page, and the booking block
   beside it, in view while the page goes by (and scrolling within itself
   where it is the taller). One column below that, in the order a phone
   reads: the year, the booking block, the rest. 1150px because the month
   table's eight columns need about 700px of the main column; narrower,
   it would scroll sideways inside its card. */
.place-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1150px) {
  .place-grid {
    grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr;
    grid-template-areas: "top side" "rest side"; column-gap: 28px;
  }
  .place-top { grid-area: top; }
  .place-rest { grid-area: rest; }
  .place-side {
    grid-area: side; align-self: start; position: sticky; top: calc(var(--stick) + 16px);
    max-height: calc(100vh - var(--stick) - 32px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; margin-top: 22px; padding: 2px;
  }
  .placepage .place-side .plan { margin-top: 0; }
}

/* Cards: white, a hairline, 16px corners, as the app's. */
.placepage .panel {
  margin: 18px 0 0; padding: 18px; background: var(--card);
  border: 1px solid var(--outline); border-radius: 16px;
}
.placepage .panel > :first-child { margin-top: 0; }
.placepage .panel > :last-child { margin-bottom: 0; }
.placepage .panel h2 { font-size: 1.125rem; margin: 0 0 10px; }
.placepage .panel > * + h2 { margin-top: 22px; }
.placepage .panel .disclosure { background: var(--field); border-color: var(--line-soft); }

/* The year: the strip, its key, and the verdict under them on Ice. */
.placepage .year-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px;
}
.placepage .year-head h2 { margin: 0; }
.placepage .year-head p { margin: 0; font-size: 0.8rem; color: var(--muted); }
.placepage .place-year .strip { margin-top: 14px; }
.placepage .place-year > .strip:first-child { margin-top: 0; }
.placepage .routemap { border-color: var(--outline); border-radius: 12px; }
.placepage .place-top > .verdict, .placepage .place-year .verdict {
  max-width: none; margin: 14px 0 0; padding: 12px 14px; border: 0; border-radius: 12px;
  background: var(--raised); box-shadow: none; font-size: 0.95rem; line-height: 1.55;
}

/* The sections, as the app's section tabs: a row of pills that stays
   under the header, sideways on a phone rather than two lines. The one a
   reader chose is lit, by :target and no script. */
.onpage {
  position: sticky; top: var(--stick); z-index: 10;
  margin: 18px 0 0; padding: 8px 0; background: var(--bg);
}
.onpage ul {
  display: flex; gap: 8px; margin: -3px; padding: 3px; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.onpage ul::-webkit-scrollbar { display: none; }
.onpage a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--field-line); border-radius: 22px; background: var(--card);
  color: var(--fg); font-size: 0.86rem; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.onpage a:hover { border-color: var(--fg); }
.onpage a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
/* On a phone the header and the Book bar already hold the screen's two
   edges; the sections row scrolls away with the page instead of a third. */
@media (max-width: 720px) {
  .onpage { position: static; }
  .placepage [id] { scroll-margin-top: calc(var(--stick) + 12px); }
}
.placepage:has(#months:target) .onpage a[href="#months"],
.placepage:has(#getting-there:target) .onpage a[href="#getting-there"],
.placepage:has(#before:target) .onpage a[href="#before"],
.placepage:has(#pictures:target) .onpage a[href="#pictures"],
.placepage:has(#like:target) .onpage a[href="#like"] {
  border-color: var(--cta); background: var(--cta); color: var(--cta-ink); font-weight: 600;
}

/* Month by month: the table in a card on a wide screen. Below 660px the
   months are cards of their own (above), so this one steps aside. */
@media (min-width: 661px) {
  .placepage .months-panel table.months th, .placepage .months-panel table.months td { padding-left: 6px; padding-right: 6px; }
  .placepage .months-panel table.months th { font-size: 0.72rem; letter-spacing: 0.02em; }
  .placepage .months-panel table.months td.why { min-width: 10rem; max-width: none; }
}
.placepage table.months td.month a { text-decoration: none; }
.placepage table.months td.month a:hover { text-decoration: underline; }
.placepage .months-panel > .note { margin: 10px 0 0; }
@media (max-width: 660px) {
  .placepage .months-panel { padding: 0; background: none; border: 0; border-radius: 0; }
  .placepage .months-panel > h2 { margin: 6px 0 10px; }
  .placepage table.months tr { border-color: var(--outline); border-radius: 14px; }
}
.placepage .crowds { max-width: 36rem; }

/* Getting there: the departure cities as pills. */
.placepage .origins { gap: 8px; margin-top: 12px; }
.placepage .origins a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px;
  border: 1px solid var(--field-line); border-radius: 19px; background: var(--card);
}
.placepage .origins a:hover { border-color: var(--fg); }

/* Before you go, and on arrival, as the mockup's small cards: the
   country's line (its advice switched to the reader's own government's by
   advice.js), the facts where the country has no page of its own, and the
   kit's lines, each a card with its name first. The table of facts is laid
   out as cards; its rows, words and advice spans are as they were. */
.placepage .before-go .before {
  max-width: none; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
  background: var(--field); border: 1px solid var(--line-soft); font-size: 0.92rem; line-height: 1.55;
}
.placepage .before-go .scroll { overflow: visible; }
.placepage .before-go table.months, .placepage .before-go table.months tbody { display: block; }
.placepage .before-go table.months tbody, .placepage .before-go .kit {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px;
}
.placepage .before-go table.months tr, .placepage .before-go .kit li {
  display: block; margin: 0; padding: 12px 14px; max-width: none; border-radius: 12px;
  background: var(--field); border: 1px solid var(--line-soft);
  font-size: 0.875rem; line-height: 1.5; color: var(--ink-2);
}
.placepage .before-go table.months tbody tr:hover { background: var(--field); }
.placepage .before-go table.months th, .placepage .before-go table.months td {
  display: block; width: auto; padding: 0; border: 0; white-space: normal; text-align: left;
}
.placepage .before-go table.months th {
  margin: 0 0 2px; color: var(--fg); font-size: 0.875rem; letter-spacing: 0; text-transform: none;
}
.placepage .before-go .kit { margin: 10px 0 12px; padding: 0; list-style: none; }
.placepage .before-go .kit strong { color: var(--fg); font-weight: 600; }
.placepage .before-go h3.sub { margin: 18px 0 0; }

/* A month's numbers as tiles, each its name over its figure, as the app
   shows a month's line; the table's rows and words are as they were. */
.placepage .numbers .scroll { overflow: visible; }
.placepage .numbers table.months, .placepage .numbers table.months tbody { display: block; }
.placepage .numbers table.months tbody {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px;
}
.placepage .numbers table.months tr {
  display: block; margin: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--field); border: 1px solid var(--line-soft);
}
.placepage .numbers table.months tbody tr:hover { background: var(--field); }
.placepage .numbers table.months th, .placepage .numbers table.months td {
  display: block; width: auto; padding: 0; border: 0; white-space: normal; text-align: left;
}
.placepage .numbers table.months th { font-size: 0.72rem; line-height: 1.35; color: var(--muted); }
.placepage .numbers table.months td {
  margin: 4px 0 0; font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--fg);
}
.placepage .numbers table.months td::before { content: none; }
.placepage .numbers > .note { margin: 12px 0 0; }

/* Pictures: the gallery's own grid, rounded as the cards are. */
.placepage .pictures { margin: 26px 0 0; }
.placepage .pictures h2 { margin: 0 0 10px; }
.placepage .gallery { border-radius: 16px; }

/* Plan this trip: a card in the column beside the page, its rows small
   labels over pills, the six booking pages under the sentence. */
.placepage .plan {
  margin: 18px 0 0; padding: 16px; background: var(--card);
  border: 1px solid var(--outline); border-radius: 16px;
}
.placepage .plan h2 { margin: 0 0 6px; font-size: 1.0625rem; }
.placepage .plan > .note { max-width: none; font-size: 0.8rem; color: var(--ink-2); }
.placepage .plan h3 {
  margin: 16px 0 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.placepage .plan h3 b { font-weight: 600; color: var(--fg); }
.placepage .plan .chips { gap: 6px; }
.placepage .plan .chips a {
  align-items: center; min-height: 36px; padding: 5px 12px; background: var(--card);
  border: 1px solid var(--field-line); color: var(--fg); font-size: 0.84rem;
}
.placepage .plan .chips a:hover { border-color: var(--fg); background: var(--card); color: var(--fg); }
.placepage .plan .chips span { font-size: 0.72rem; }
.placepage .plan .plan-row > .note { font-size: 0.78rem; }
.placepage .plan .disclosure.tight { max-width: none; margin: 14px 0 0; font-size: 0.75rem; }
.placepage .plan .bookpills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.placepage .plan .bookpills a { height: 44px; font-size: 0.82rem; }
@media (max-width: 1149px) {
  .placepage .plan .bookpills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .placepage .plan .bookpills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .placepage .plan .bookpills a { font-size: 0.84rem; }
}
/* A finger's width on a phone: every pill at least 44px tall. */
@media (max-width: 720px), (pointer: coarse) {
  .placepage .plan .chips a, .placepage .origins a, .placepage .panel .chips a { min-height: 44px; }
  .placepage .panel .chips a { align-items: center; }
}

/* Compare, beside the booking block. */
.to-compare {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 12px 0 0;
  border: 1.5px solid var(--fg); border-radius: 12px; background: var(--card); color: var(--fg);
  font-size: 0.92rem; font-weight: 600; text-decoration: none;
}
.to-compare:hover { box-shadow: var(--card-shadow); color: var(--fg); }
.to-compare:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.placepage .place-rest > .disclosure { margin: 18px 0 0; }

/* On a phone, Compare and Book at the foot of the screen, as the app's
   bar: it rides at the bottom while the page scrolls and comes to rest at
   the page's end, so it covers nothing there. Not in the installed app,
   whose own bar is there, nor beside the Android app's prompt. */
.placebar { display: none; }
@media (max-width: 720px) {
  .placebar {
    display: flex; gap: 10px; position: sticky; bottom: 0; z-index: 25;
    margin: 24px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--outline);
    box-shadow: 0 -6px 18px rgba(38, 51, 64, 0.06);
  }
  .placebar a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 48px;
    border-radius: 14px; font-size: 0.92rem; font-weight: 600; text-decoration: none;
  }
  .placebar-compare { border: 1.5px solid var(--fg); background: var(--card); color: var(--fg); }
  .placebar-book { flex-grow: 2; background: var(--cta); color: var(--cta-ink); }
  .placebar a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
}
html.app .placebar, html.has-getapp .placebar { display: none; }
/* ---- end place page ---- */

/* ---- list pages (site-lists) ---- */
/* The month pages, the departure cities' pages, Travelling with, the
   holidays, the groups, the comparisons and the booking pages, in the
   refresh's look: the same photo cards, pills, strips and section titles
   as the front page and a place's page, every word and address kept.
   Only the shared tokens above, so dark mode needs nothing of its own. */

/* A card with more than one line of figures (the cards' foot and strip
   are the front page's rules, above). */
.now .tile .figures + .figures { margin-top: 2px; }

/* Chips sized for a thumb: 44px on a touch screen, where they are tapped. */
@media (pointer: coarse) {
  .chips.tap a, .chips.tap [aria-current], .chips.tap .plain { min-height: 44px; align-items: center; }
  .chips.tap .plain { display: inline-flex; }
}

/* The months as the app's month chips: the one the page is about filled
   in Slate, the rest white with a hairline. */
.mchips { gap: 8px; margin: 4px 0 6px; }
.mchips a, .mchips [aria-current] {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 15px;
  border: 1px solid var(--field-line); border-radius: 20px; background: var(--card);
  color: var(--fg); font-size: 0.875rem; text-decoration: none;
}
.mchips a:hover { border-color: var(--fg); color: var(--fg); }
.mchips [aria-current], .mchips a[aria-current]:hover {
  border-color: var(--cta); background: var(--cta); color: var(--cta-ink); font-weight: 600;
}
.mchips [aria-current] strong { font-weight: 600; }
.mchips [aria-current] span { color: inherit; opacity: 0.85; }
@media (pointer: coarse) { .mchips a, .mchips [aria-current] { min-height: 44px; } }
.mchips a:focus-visible, .chips a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
/* A card's ring when it is reached by keyboard: the page's ink, clear of
   its hairline, on every list's cards. */
.now a:focus-visible, ul.kinds a:focus-visible, .duels a:focus-visible, .places a:focus-visible {
  outline: 2px solid var(--fg); outline-offset: 3px;
}

/* A city's band (origin pages): air between its sentence and its cards. */
.here .now.rail { margin-top: 12px; }

/* Who's going (_kinds.html): the kind's icon beside its name, as the
   front page's "Travelling with"; two to a row on a phone, as there. */
.kind-head { display: flex; align-items: center; gap: 9px; }
.kinds .kind-head strong { display: inline; font-size: 1rem; font-weight: 600; }
.kinds .disc { width: 30px; height: 30px; }
.kinds .disc svg { width: 17px; height: 17px; }
ul.kinds .tile { padding: 11px 13px 13px; }
ul.kinds .figures { margin-top: 6px; }
@media (max-width: 560px) {
  ul.kinds:not(.trips) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  ul.kinds:not(.trips) .tile { padding: 10px 11px 11px; }
  ul.kinds:not(.trips) .disc { width: 26px; height: 26px; }
  ul.kinds:not(.trips) .disc svg { width: 15px; height: 15px; }
  ul.kinds:not(.trips) .kind-head { gap: 7px; }
  ul.kinds:not(.trips) .kind-head strong { font-size: 0.92rem; }
  ul.kinds:not(.trips) .figures { font-size: 0.78rem; }
}

/* The year, month by month (months.html, a kind of traveller's year):
   each month a section with its title as the mockups set them. */
.year section { padding: 20px 0 14px; border-top-color: var(--outline); }
.year h3 {
  margin: 0 0 10px; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em;
  text-transform: none; color: var(--fg);
}
.year h3 a { color: inherit; text-decoration: none; }
.year h3 a:hover { text-decoration: underline; }
.year .now.four { margin: 0 0 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
@media (min-width: 1000px) { .year .now.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The ranked tables (_ranked.html): a white card on a wide screen, and on
   a phone the same cards as the photo cards' hairline and corners. */
@media (min-width: 661px) {
  table.months.ranked {
    border-collapse: separate; border-spacing: 0; background: var(--card);
    border: 1px solid var(--outline); border-radius: 16px; overflow: hidden;
  }
  table.months.ranked th, table.months.ranked td { border-bottom: 1px solid var(--outline); }
  table.months.ranked tbody tr:last-child td { border-bottom: 0; }
  table.months.ranked th:first-child, table.months.ranked td:first-child { padding-left: 16px; }
  table.months.ranked th:last-child, table.months.ranked td:last-child { padding-right: 16px; }
  table.months.ranked .pill + .pill { margin-left: 4px; }
}
@media (max-width: 660px) {
  table.months.ranked tr { border-color: var(--outline); border-radius: 14px; }
  table.months.ranked td.verdict-cell .pill + .pill { margin-left: 4px; }
}

/* A departure city's places (origin.html): the photo beside the words,
   and under them the place's year. */
.places .body { padding-bottom: 14px; }
.places .strip-c { max-width: 240px; margin-top: 10px; }

/* A card's name and what follows it (a country, a temperature) read as one,
   the verdict pill at the right. */
.tile-head strong:has(+ small) { margin-right: 0; }
.tile-head small + .pill { margin-left: auto; }
/* The traveller and holiday tiles (_tiles.html) have three lines before
   their year: the space goes above the strip, not between the lines. */
.now .tile.lines:has(> .strip-c) > .figures { margin-bottom: 0; }
.now .tile.lines:has(> .strip-c) > .figures:has(+ .strip-c) { margin-bottom: 10px; }
.now .tile.lines .tile-head { margin-bottom: 4px; }

/* Travelling with (travellers.html): each kind's title with its icon. */
.with-head { display: flex; align-items: center; gap: 12px; margin: 40px 0 4px; }
.with-head h2 { margin: 0; }
.with-head h2 a { color: inherit; text-decoration: none; }
.with-head h2 a:hover { text-decoration: underline; }
.with-head .disc { width: 38px; height: 38px; }
.with-head .disc svg { width: 21px; height: 21px; }
.with-head + .note { margin-top: 2px; }

/* The holidays (holidays.html): a festival's date under its name, as the
   front page's "Holidays coming up". */
.now.occasions .tile strong { display: block; font-size: 1.0625rem; font-weight: 600; }
.now.occasions .tile .figures { margin-top: 3px; }

/* A month with no page of its own among the month chips: there, not a link. */
.mchips .plain {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 15px;
  border: 1px dashed var(--field-line); border-radius: 20px; color: var(--muted); font-size: 0.875rem;
}

/* The month grid (_grid.html) and a comparison's, in the season strip's
   colours: each cell its verdict's, a month with no verdict the strip's
   "not scored", the busy dot ringed in the cell's own ink. Cells apart and
   rounded, so a row reads as a place's strip with its highs written in. */
table.grid { border-collapse: separate; border-spacing: 3px; margin: 10px -3px 6px; width: calc(100% + 6px); }
table.grid th, table.grid td { border-bottom: 0; }
table.grid tbody td { background: var(--v-none); color: var(--v-none-ink); border-radius: 6px; }
table.grid tbody td.sweet { background: var(--v-sweet); color: var(--v-sweet-ink); font-weight: 600; }
table.grid tbody td.good { background: var(--v-good); color: var(--v-good-ink); }
table.grid tbody td.ok { background: var(--v-ok); color: var(--v-ok-ink); }
table.grid tbody td.avoid { background: var(--v-avoid); color: var(--v-avoid-ink); }
table.grid tbody tr.fare td { background: none; color: var(--muted); }
table.grid td small, table.grid td.sweet small, table.grid td.avoid small { color: inherit; opacity: 1; font-weight: 400; }
table.grid i.busy { background: var(--busy-dot); box-shadow: 0 0 0 1px currentColor; }
table.grid td a:focus-visible, table.grid th a:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; border-radius: 3px; }
table.grid tfoot td, table.grid tfoot th { padding-top: 8px; }
/* A row's place is a name to read, not a column label. */
table.grid tbody th {
  text-transform: none; letter-spacing: 0; font-size: 0.875rem; color: var(--fg);
}
/* A comparison's fare rows name their city and origin: wrapped, so the
   held column stays narrow enough on a phone to leave room for months. */
table.grid tr.fare th { white-space: normal; min-width: 7.5em; max-width: 9.5em; line-height: 1.3; }
.scroll + .legend { margin: 6px 0 4px; }
@media (forced-colors: active) { table.grid tbody td { border: 1px solid CanvasText; } }

/* The comparisons' cards (compares.html): the two places' years one above
   the other, each named. */
.duels .tile:has(> .duel-years) { flex: 1; display: flex; flex-direction: column; }
.duel-years { display: grid; gap: 6px; margin-top: auto; padding-top: 12px; }
.dy { display: grid; grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr); align-items: center; gap: 8px; }
.dy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--ink-2); }
.dy .strip-c { margin-top: 0; }

/* Then and now (warming.html): the table a white card, as the ranked ones. */
@media (min-width: 661px) {
  table.thennow.ranked {
    border-collapse: separate; border-spacing: 0; background: var(--card);
    border: 1px solid var(--outline); border-radius: 16px; overflow: hidden;
  }
  table.thennow.ranked th, table.thennow.ranked td { padding: 9px 12px; border-bottom: 1px solid var(--outline); }
  table.thennow.ranked tbody tr:last-child td { border-bottom: 0; }
  table.thennow.ranked th:first-child, table.thennow.ranked td:first-child { padding-left: 16px; }
}

/* The six booking pages' row of six (_anywhere.html): the front page's
   booking pills, an icon disc and the page's name, the page the reader is
   on filled in Slate. The pill is the list item and its link is stretched
   over it, so the whole pill is the target and the link stays the name. */
.booknav {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px;
  margin: 6px 0 0; padding: 0; list-style: none;
}
.booknav li {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--outline); border-radius: 12px; background: var(--card);
  color: var(--fg); font-size: 0.875rem; font-weight: 500; line-height: 1.25;
}
/* The nav is also .kinds, whose cards' rules would draw a box round the
   name: here the pill is the box. */
.booknav a, .booknav a:hover {
  display: inline; flex: 0 1 auto; min-width: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; overflow: visible; color: inherit; text-decoration: none;
}
.booknav a::after { content: ""; position: absolute; inset: -1px; border-radius: 12px; }
.booknav li:hover { border-color: var(--chip-line); box-shadow: var(--card-shadow); }
.booknav li:has(a:focus-visible) { outline: 2px solid var(--fg); outline-offset: 2px; }
.booknav a:focus-visible { outline: none; }
.booknav li.on { border-color: var(--cta); background: var(--cta); color: var(--cta-ink); font-weight: 600; }
.booknav li.on .disc { background: color-mix(in srgb, var(--cta-ink) 16%, transparent); color: var(--cta-ink); }
@media (max-width: 560px) {
  .booknav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .booknav li { gap: 8px; padding: 0 10px; font-size: 0.8125rem; }
}
/* ---- end list pages ---- */