/* 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 {
  /* The browser's own controls -- checkboxes, selects, scrollbars -- in
     the theme's colours, not white on a Night page. */
  color-scheme: light;
  --bg: #f1f7f6;           /* Foam */
  --card: #ffffff;
  --raised: #e3efec;       /* Foam, a step towards Lagoon */
  --fg: #0b1518;           /* Night */
  --muted: #4f6468;        /* Harbor */
  --line: #d3e1df;
  --line-soft: #e5eeed;
  --accent: #0b7a6a;
  --accent-soft: #e3efec;
  /* A photo not yet held shows the logo's own mark, the dotted C. */
  --noimg-mark: url("../assets/brand-mark-on-light.svg");
  --button: #0b7a6a;       /* Lagoon */
  --button-ink: #ffffff;
  --sweet: #0a4f45;
  --sweet-bg: #d2eee8;
  --avoid: #9a4b33;
  --avoid-bg: #f7e9e3;
  --busy: #8a5a12;
  --busy-bg: #fbebd0;
  --crowd-bar: #0b7a6a;    /* Lagoon */
  --crowd-busy: #8a5a12;   /* the busy pill's own amber */
  --warm: #b4621f;
  --shadow: 0 1px 2px rgba(11, 21, 24, 0.06), 0 8px 24px rgba(11, 21, 24, 0.08);
}
/* The palette is the brand's (branding/, kit 2.0, "Night and aqua glow",
   07_Website_Theme): light is a Foam page, white cards, Night text, Harbor
   for secondary text and Lagoon for links and buttons, with white on them
   (5.2:1). Aqua is never text on a light ground (1.5:1 on Foam); Lagoon is
   its light-ground shade. The raised panels, the season colours and the
   pills are mixed from the kit's own colours; every pairing with words on it
   is 4.5:1 or more in both themes. */

/* Dark is the kit's dark theme: a Night page, cards one step lighter with a
   hairline border, Frost text, Mist for secondary text, and Aqua for links
   and the main button, with Night on it (11.7:1). Which theme shows is the
   reader's device's, or their choice (theme.js); the kit makes dark its
   default, and the owner kept the device's (2026-10-13). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1518;           /* Night */
    --card: #122228;
    --raised: #192d33;
    --fg: #eaf5f3;           /* Frost */
    --muted: #8da5a8;        /* Mist */
    --line: #25393f;
    --line-soft: #16272c;
    --accent: #2ee6c5;       /* Aqua */
    --accent-soft: #133a36;
  --noimg-mark: url("../assets/brand-mark-on-dark.svg");
    --button: #2ee6c5;
    --button-ink: #0b1518;
    --sweet: #bff3e9;
    --sweet-bg: #133a36;
    --avoid: #e8a58c;
    --avoid-bg: #3a2620;
    --busy: #f2c27a;
    --busy-bg: #35291a;
    --crowd-bar: #22bfa3;
    --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"] {
  color-scheme: dark;
  --bg: #0b1518;           /* Night */
  --card: #122228;
  --raised: #192d33;
  --fg: #eaf5f3;           /* Frost */
  --muted: #8da5a8;        /* Mist */
  --line: #25393f;
  --line-soft: #16272c;
  --accent: #2ee6c5;       /* Aqua */
  --accent-soft: #133a36;
  --noimg-mark: url("../assets/brand-mark-on-dark.svg");
  --button: #2ee6c5;
  --button-ink: #0b1518;
  --sweet: #bff3e9;
  --sweet-bg: #133a36;
  --avoid: #e8a58c;
  --avoid-bg: #3a2620;
  --busy: #f2c27a;
  --busy-bg: #35291a;
  --crowd-bar: #22bfa3;
  --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 on-light version on Foam,
   the on-dark one on Night, 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); }
/* The travel advice over a place a government says to reconsider (PLAN §2.72). */
.advice-notice { margin: 12px 0 16px; padding: 12px 14px; border-left: 4px solid var(--avoid);
  background: var(--avoid-bg); border-radius: 8px; }
.advice-notice h2 { margin: 0 0 6px; font-size: 1rem; color: var(--avoid); }
.advice-notice ul { margin: 0 0 8px; padding-left: 18px; }
.advice-notice li { margin: 4px 0; overflow-wrap: anywhere; }
.advice-notice p { margin: 0; font-size: 0.88rem; }
/* 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 the crowd bar (Lagoon; Aqua a step deeper in dark), 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; }
/* "Ad": the mark on a booking link that pays us (book.AD, LEGAL.md). Small,
   but outlined and in the link's own ink, so it is read before the click. */
.chips span.ad, .buy .ad {
  display: inline-block; font-size: 0.68rem; font-weight: 600; line-height: 1.3; color: var(--fg);
  border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; letter-spacing: 0.02em;
}
.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); }
/* The way to the rest of a section, after its first sentence or two. */
a.wv { white-space: nowrap; font-size: .92em; }
.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 {
  -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 { 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: 6px 12px; background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 999px; font: inherit;
  font-size: 0.875rem; cursor: pointer;
}
/* The picker, quieter (the owner, 2026-10-06): a small question, not a
   section's heading, over the one row of cities. */
.here h2.choose-q { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--muted); }
.choose button.locate { border-style: dashed; color: var(--accent); border-color: var(--accent); }
.choose button:disabled { opacity: 0.6; cursor: progress; }
.locate-said { margin: 0 0 8px; }
.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; }
/* A place under a travel-advice notice (find.js, PLAN §2.72): the advice on
   a line of its own under the name, in the avoid colour (5:1 or more). */
.find-box .options a:has(.find-advice) { flex-wrap: wrap; row-gap: 2px; }
.find-box .options a .find-advice {
  flex-basis: 100%; order: 3; white-space: normal; font-size: 0.8rem; color: var(--avoid);
}

/* 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; }
/* A photograph from the Unsplash API (PLAN §2.71): its credit on the
   photograph, always shown, as the API's terms ask. Small and on a veil, in
   the corner the ⓘ takes on the others. */
figcaption.credit.byline {
  max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.72rem;
}
/* The credits under a page for the Unsplash photographs its cards show. */
.photo-foot { font-size: 0.75rem; color: var(--muted); margin-top: 18px; }
.photo-foot p { margin: 0; max-width: 78ch; }
@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)); }
/* Two to a row on a phone, as `.now` is: at 200 px a tile took the whole
   width, and /places/ ran to about 46,000 px. Rails run sideways and the
   explore cards keep their own. */
@media (max-width: 640px) {
  .now.tiles:not(.rail):not(.explore) { grid-template-columns: repeat(2, minmax(0, 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 { 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 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); }
/* The button colour 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) {
  /* Only around the month table, which becomes blocks: every other table
     (the year grids, a comparison's duel, then and now) is wider than a
     phone and scrolls sideways in its own box. Turned off for every
     wrapper, seven kinds of page were 648-861 px wide at 390. */
  .scroll:has(> table.months) { 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); }
}
@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; }
/* Visas by passport (_before.html, visa.js): the line, its passport chosen
   in place, and where it came from under it. */
.visa-line { margin: 12px 0 0; }
.visa-line[hidden] { display: none; }
.visa-line select {
  max-width: 100%; min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--fg); font: inherit;
}
.visa-line label, .visa-line .visa-says { display: block; }
.visa-line .visa-says { margin-top: 6px; font-weight: 500; }
.visa-line .note { display: block; margin-top: 4px; }
/* 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; }
/* The networks' own logos, unaltered: a little larger, and their colours
   kept on hover, when only the ring changes (LEGAL.md §5). */
.follow .brand { width: 24px; height: 24px; }
/* Instagram's glyph: its gradient on light, its white on dark (Meta's rule). */
.follow .ig-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .follow .ig-light { display: none; }
  :root:not([data-theme="light"]) .follow .ig-dark { display: inline; }
}
:root[data-theme="dark"] .follow .ig-light { display: none; }
:root[data-theme="dark"] .follow .ig-dark { display: inline; }
.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".
 *  Kit 2.0 since 2026-10-13: a Foam ground, white cards with a 1px outline,
 *  Night ink, Lagoon accent (Night, Frost and Aqua in dark), Poppins. Every
 *  colour has a dark value; every text pairing is 4.5:1 or more in both.
 * ======================================================================== */
:root {
  --outline: #dce8e6;      /* a card's hairline */
  --ink-2: #4f6468;        /* Harbor: 6.3:1 on white */
  --field: #f1f7f6;
  --field-line: #d3e1df;
  --chip-line: #c3d5d2;
  --disc: #e3efec;         /* behind an icon */
  --head: #ffffff;
  --cta: #0b7a6a;          /* Lagoon, white on it (5.2:1): the kit's one main action */
  --cta-ink: #ffffff;
  --card-shadow: 0 8px 24px rgba(11, 21, 24, 0.08);
  /* The season strip's four verdicts, as the app's SeasonStrip.kt: they
     differ in lightness as well as hue. */
  --v-sweet: #1fcdae; --v-sweet-ink: #0b1518;
  --v-good: #94e3d4;  --v-good-ink: #0b3b34;
  --v-ok: #d8e5e3;    --v-ok-ink: #0b1518;
  --v-avoid: #e3a68e; --v-avoid-ink: #4e1e12;
  --v-none: #e8f0ef;  --v-none-ink: #4f6468;
  --busy-dot: #8a5a12;
  /* The verdict pills. */
  --p-sweet-bg: #c9f2ea; --p-sweet: #0a4f45;
  --p-good-bg: #e0f5f1;  --p-good: #0a4f45;
  --p-ok-bg: #e8f0ef;    --p-ok: #4f6468;
  --p-avoid-bg: #f7e9e3; --p-avoid: #9a4b33;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --outline: #25393f; --ink-2: #b0c4c5; --field: #0f1d21; --field-line: #25393f;
    --chip-line: #34494f; --disc: #133a36; --head: #0b1518; --cta: #2ee6c5; --cta-ink: #0b1518;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --v-sweet: #2ee6c5; --v-sweet-ink: #0b1518;
    --v-good: #1c9a86;  --v-good-ink: #04110f;
    --v-ok: #2a3f45;    --v-ok-ink: #d5e4e2;
    --v-avoid: #8c4b36; --v-avoid-ink: #f7e9e3;
    --v-none: #16272c;  --v-none-ink: #8da5a8;
    --busy-dot: #f2c27a;
    --p-sweet-bg: #133a36; --p-sweet: #bff3e9;
    --p-good-bg: #18302d;  --p-good: #cfede7;
    --p-ok-bg: #25393f;    --p-ok: #d5e4e2;
    --p-avoid-bg: #4a2a20; --p-avoid: #f2b9a3;
  }
}
:root[data-theme="dark"] {
  --outline: #25393f; --ink-2: #b0c4c5; --field: #0f1d21; --field-line: #25393f;
  --chip-line: #34494f; --disc: #133a36; --head: #0b1518; --cta: #2ee6c5; --cta-ink: #0b1518;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --v-sweet: #2ee6c5; --v-sweet-ink: #0b1518;
  --v-good: #1c9a86;  --v-good-ink: #04110f;
  --v-ok: #2a3f45;    --v-ok-ink: #d5e4e2;
  --v-avoid: #8c4b36; --v-avoid-ink: #f7e9e3;
  --v-none: #16272c;  --v-none-ink: #8da5a8;
  --busy-dot: #f2c27a;
  --p-sweet-bg: #133a36; --p-sweet: #bff3e9;
  --p-good-bg: #18302d;  --p-good: #cfede7;
  --p-ok-bg: #25393f;    --p-ok: #d5e4e2;
  --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; }

/* ---- 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; }
}

/* ---- A season's list (season.html, _season_rows.html, seasons.js) -------
   A place a row: its photograph small, its name, the season's three or
   four months as cells in their verdict's colour, each with its month's
   name, and how many are good or better with the highs. The chips at the
   head of the months (_season_chips.html) are the month chips' own look. */
.seasonchips { margin: 4px 0 14px; }
/* Filled softly, so the seasons read as their own row above the months'. */
.seasonchips .chips a { border-color: transparent; background: var(--accent-soft); }
.seasonchips .chips a:hover { border-color: var(--fg); }
.slist { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.slist a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--outline); border-radius: 14px; background: var(--card);
  color: inherit; text-decoration: none;
}
.slist a:hover { border-color: var(--chip-line); box-shadow: var(--card-shadow); }
.slist a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.slist .thumb { flex: none; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.slist .thumb.noimg { display: block; background: var(--accent-soft); }
.srow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sname strong { font-weight: 600; }
.sname small { color: var(--muted); font-size: 0.8rem; }
.sstrip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; max-width: 260px;
}
.sstrip i {
  display: flex; align-items: center; justify-content: center; height: 24px; border-radius: 6px;
  background: var(--c); color: var(--ci); font-size: 0.72rem; font-style: normal; font-weight: 600;
}
.sstrip b { font-weight: 600; }
.slist .figures { color: var(--ink-2); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.slist .figures span { white-space: nowrap; }
.season-sec { margin-top: 8px; }
.season-sec .sec-h { margin: 18px 0 0; }
.season-sec .rest-h { margin: 18px 0 6px; color: var(--muted); font-size: 0.95rem; }
@media (forced-colors: active) { .sstrip 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, .places a, .cards a, .links a, details.rules, .yours {
  border-color: var(--outline); border-radius: 14px;
}
.kinds 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 over three doors (_bar.html, PLAN §2.75): the bar, with
   "From <city>" on the line over it; the months; the planner. What to do
   and when as photo cards (_ways.html); 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 { padding: 36px 0 8px; }
.ask h1 { margin: 0; font-size: clamp(1.85rem, 1.1rem + 2.6vw, 2.625rem); line-height: 1.12; text-wrap: balance; }
.ask .lede { margin: 12px 0 0; font-size: 1rem; line-height: 1.6; max-width: 60ch; }
/* Only a script can work the bar (bar.js): without one it is not shown,
   and the photo cards, the pills and the <noscript> links are the page.
   html.js is set before the first paint (theme.js), so it never appears
   late. */
html:not(.js) .bar-at, html:not(.js) .ask .door-where { display: none; }
/* The bar and the line under it; what was found opens under both. The
   box is .bar-box, never .bar: that is the header's row on every page
   (base.html). Named .bar when it came (2026-10-05), the box's card --
   white, a hairline, round corners, a shadow -- was drawn round the
   header too: an empty strip at the top of every page, which the owner
   saw on the live site the same day. */
.bar-at { position: relative; max-width: 760px; margin: 22px 0 0; }
.bar-box {
  position: relative; display: flex; align-items: center; gap: 4px;
  padding: 6px; background: var(--card);
  border: 1px solid var(--outline); border-radius: 18px; box-shadow: var(--card-shadow);
}
.bar-box:focus-within { border-color: var(--fg); }
/* "From <city>": the reader's city, a "?" on a guess, "· this search" on a
   city typed into the bar; a tap opens the list of cities. On the door's
   own line, over the bar (_bar.html): the whole name, at any width and
   any size of text, and the bar's whole width for the words. */
.from-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 40px; flex: none; max-width: 100%;
  padding: 0 8px 0 12px; border: 1px solid var(--field-line); border-radius: 12px;
  background: var(--field); color: var(--fg); font: inherit; font-size: 0.875rem;
  white-space: nowrap; cursor: pointer;
}
.from-chip .from-k { color: var(--muted); }
.from-chip [data-from-city] { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.from-chip svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.from-chip:hover, .from-chip:focus-visible, .from-chip[aria-expanded="true"] { border-color: var(--fg); }
.from-chip.typed { border-color: var(--accent); }
.bar-box input {
  flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 0; outline: none;
  -webkit-appearance: none; appearance: none; background: none; color: var(--fg);
  font: inherit; font-size: 1rem;
}
.bar-box input::placeholder { color: var(--muted); opacity: 1; }
.bar-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.bar-go {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0;
  border: 0; border-radius: 12px; background: var(--cta); color: var(--cta-ink); cursor: pointer;
}
.bar-go svg { width: 20px; height: 20px; }
/* What was found, under the bar and what it understood, over the page. */
.bar-at > .options {
  top: calc(100% + 6px); margin: 0; padding: 6px; max-height: min(460px, 62vh); border-radius: 14px;
}
.bar-at > .options li { padding: 0; }
.bar-at > .options li.none { padding: 9px 11px; }
.bar-at > .options li.head {
  padding: 8px 11px 2px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.bar-at > .options a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 11px; border-radius: 6px; color: inherit; text-decoration: none;
}
.bar-at > .options a span { margin-left: 0; flex: none; white-space: nowrap; }
.bar-at > .options li.lead a { font-weight: 600; }
/* The list of cities under the chip. */
.from-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 22; width: min(340px, 100%);
  padding: 8px; background: var(--card); border: 1px solid var(--outline); border-radius: 14px;
  box-shadow: var(--card-shadow);
}
.from-pop[hidden] { display: none; }
/* "Use my location" over the list of cities (bar.js). */
.from-locate {
  display: block; width: 100%; margin: 0 0 6px; padding: 9px 12px; border: 1px dashed var(--accent);
  border-radius: 10px; background: none; color: var(--accent); font: inherit; font-size: 0.92rem;
  text-align: left; cursor: pointer;
}
.from-locate[hidden], .from-locate-said[hidden] { display: none; }
.from-locate:disabled { opacity: 0.6; cursor: progress; }
.from-locate-said { margin: 0 0 6px; font-size: 0.85rem; color: var(--muted); }
.from-pop input {
  width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--field-line);
  border-radius: 10px; background: var(--field);
}
.from-pop input:focus { outline: none; border-color: var(--fg); }
.from-pop .options {
  position: static; margin: 6px 0 0; padding: 0; max-height: 300px;
  border: 0; box-shadow: none; background: none;
}
.from-pop .options li.own { font-weight: 600; }
/* What was understood, in pieces a tap takes out; the words not used; a
   city typed for this search, and the tap that makes it the reader's. */
.bar-said {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 10px 2px 0; font-size: 0.86rem; color: var(--ink-2);
}
.bar-said[hidden] { display: none; }
.bar-said .parts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bar-said .part {
  display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px 0 12px;
  border: 1px solid var(--field-line); border-radius: 15px; background: var(--field);
  color: var(--fg); font: inherit; font-size: 0.82rem; cursor: pointer;
}
.bar-said .part span { padding: 0 6px; color: var(--muted); font-size: 1rem; line-height: 1; }
.bar-said .part:hover, .bar-said .part:focus-visible { border-color: var(--fg); }
.bar-said .unused { color: var(--muted); }
.ask .book-at { margin-top: 22px; }
/* A place's trip (_bar.html, trip.js): its name and best months over the
   pills, the pill shown marked, and what it books in a card under them. */
.trip-head { margin: 22px 0 0; }
.trip-head[hidden], .trip-out[hidden] { display: none; }
.trip-head h2 { margin: 0; font-size: 1.375rem; }
.trip-when { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.trip-when a { font-weight: 600; }
.trip-head + .book-at { margin-top: 14px; }
.bookpills a.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.trip-out {
  margin: 14px 0 0; padding: 18px 18px 4px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--card);
}
.trip-out h3 { margin: 0; font-size: 1.125rem; }
.trip-out .fl-row h4 { font-size: 0.95rem; font-weight: 500; margin: 18px 0 0; }
.trip-out .book { margin: 12px 0 0; }
.trip-out .fl-row > .note { margin: 8px 0 0; font-size: 0.84rem; }
.trip-out .disclosure.tight { margin: 6px 0 14px; padding: 0; font-size: 0.8rem; }
.trip-out .disclosure.tight[hidden] { display: none; }
/* With a place, the row is its trip: When to go, Flights, Stays, Things to
   do, then Car hire, Insurance and eSIM behind More (trip.js opens it, and
   keeps it open while one of the three is shown), and no "Book" over them:
   the place's name is. Before a place, where the bar works, the row is not
   shown at all (_bar.html). One row; where it is wider than the screen it
   scrolls sideways, as the card rails do. */
html.js .ask:not(.trip-on) .book-at { display: none; }
.ask.trip-on #book-head { display: none; }
.trip-head + .book-at .bookpills { margin-top: 0; }
html.js .trip-pills:not(.more-open) li.minor, .trip-pills.more-open li.more { display: none; }
.ask.trip-on .bookpills {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  padding: 2px 0 4px;
}
.ask.trip-on .bookpills::-webkit-scrollbar { display: none; }
.ask.trip-on .bookpills li { flex: none; scroll-snap-align: start; }
.ask.trip-on .bookpills a { white-space: nowrap; padding: 0 16px 0 10px; }
.trip-pills .more button {
  display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px 0 16px;
  border: 1px solid var(--outline); border-radius: 12px; background: var(--card); color: var(--fg);
  font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.trip-pills .more button:hover, .trip-pills .more button:focus-visible { border-color: var(--chip-line); box-shadow: var(--card-shadow); }
.trip-pills .more svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .ask.trip-on .bookpills { margin-left: -16px; margin-right: -16px; padding: 2px 16px 4px; scroll-padding: 0 16px; }
}
/* The disclosure over the sites, small; the dates sentence under them. */
.trip-out .trip-paid { margin: 10px 0 0; font-size: 0.8rem; }
.trip-out .trip-sentence { margin: 14px 0 0; font-size: 0.8rem; }
.trip-best { margin: 10px 0 0; }
.trip-out .strip { margin-top: 14px; }
.trip-out .legend { margin-top: 10px; }
.trip-more { margin: 14px 0 16px; }
.trip-more a { font-weight: 600; }
@media (max-width: 560px) {
  .trip-out { padding: 14px 14px 2px; margin-left: -4px; margin-right: -4px; }
  .trip-out .book { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .trip-out .book .buy { padding: 12px; }
}
@media (max-width: 560px) {
  .ask { padding-top: 22px; }
  .bar-at { margin-top: 18px; }
  .bar-box { gap: 2px; padding: 4px; border-radius: 16px; }
  /* "· this search" is said in the line under the bar here. */
  .from-chip .from-this { display: none; }
  /* Three pills a row: a long name takes a second line rather than the edge. */
  .ask .bookpills a { white-space: normal; line-height: 1.15; }
  .bar-box input { padding: 0 8px; }
}

/* 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; }
}
/* By region this month, beside the holidays (PLAN §2.78; Travelling with
   had this place): each region's month, and how many are in season. */
.regions-now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.regions-now a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 14px;
  border: 1px solid var(--outline); border-radius: 14px; background: var(--card);
  color: var(--fg); text-decoration: none;
}
.regions-now a strong { font-weight: 600; }
.regions-now a span { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.regions-now a:hover { border-color: var(--chip-line); box-shadow: var(--card-shadow); }

/* 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)); }
}

/* By activity and By season (_ways.html): "What kind of trip?"'s
   cards, two to a part, the two parts side by side where there is room and
   one above the other on a phone. Each card says where its photograph is. */
.ways { display: flex; flex-wrap: wrap; gap: 26px 24px; }
.ways-part { flex: 1 1 400px; min-width: 0; }
.ways h2 { margin: 0 0 12px; font-size: 1.375rem; }
.ways .now.explore.row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.ways .pictured { display: block; margin-top: 3px; font-size: 0.75rem; color: var(--muted); }
.ways-credit { flex: 1 1 100%; margin: -12px 0 0; font-size: 0.75rem; color: var(--muted); }
.ways-credit summary { width: max-content; cursor: pointer; }
.ways-credit p { margin: 4px 0 0; max-width: 78ch; }
.ways-credit [data-credit]:not([hidden]) ~ [data-credit]:not([hidden])::before { content: "; "; }

/* ---- 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 buy box beside it,
   in view while the page goes by and scrolling within itself where it is
   the taller (PLAN §2.79, the owner 2026-10-12, as a shop's product page).
   One column below that, in the order a phone reads: the year, the buy box,
   the rest. 1150px because the month table's eight columns need about
   700px of the main column; narrower, it would scroll sideways in its card. */
.place-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1150px) {
  .place-grid { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 28px; }
  .place-grid > .place-top { grid-column: 1; grid-row: 1; }
  .place-grid > .place-rest { grid-column: 1; grid-row: 2; }
  .place-grid > .plan {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
    position: sticky; top: calc(var(--stick) + 12px);
    max-height: calc(100vh - var(--stick) - 24px); overflow: auto; overscroll-behavior: contain;
  }
}

/* Is it for me: the few facts a reader decides on, as small cards. */
.place-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  margin: 14px 0 0; padding: 0; list-style: none;
}
.place-facts li {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.place-facts span { font-size: 0.75rem; color: var(--muted); }
.place-facts b { font-size: 0.9rem; font-weight: 500; }

/* 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 a raised panel. */
.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; }
/* Wider than a phone, a mouse has no swipe and the row's scrollbar is
   hidden: the pills wrap to a second row rather than run on under the
   booking column ("What Chennai is like" was cut to "What Che" at 1280px,
   the owner, 2026-10-08). A phone keeps the one row it swipes. */
@media (min-width: 721px) {
  .onpage ul { flex-wrap: wrap; overflow-x: visible; }
}
/* 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(#being-there:target) .onpage a[href="#being-there"],
.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; }

/* Being there (PLAN §2.52), in Before you go's cards: the city's transit
   line under its heading, Wikivoyage's sentences with their credit, the
   map links and Help's searches as the link tiles, the embassy's line. */
.placepage .being-there p.transit, .placepage .being-there p.around {
  margin: 10px 0 0; max-width: 78ch; font-size: 0.92rem; line-height: 1.55;
}
.placepage .being-there .links { margin: 12px 0; }
.placepage .being-there p.embassy { margin: 12px 0 0; max-width: 78ch; font-size: 0.92rem; line-height: 1.55; }

/* Things to do (_things_to_do.html, site/sights.py): five to seven bullets,
   a name over one short line each, then once, under them, the sites for
   tours and tickets at the place, with the two sentences over the links in
   small print. */
.placepage:has(#things-to-do:target) .onpage a[href="#things-to-do"] {
  border-color: var(--cta); background: var(--cta); color: var(--cta-ink); font-weight: 600;
}
.todo .todo-note { margin: 2px 0 8px; max-width: 78ch; font-size: 0.8rem; line-height: 1.45; }
.sights { margin: 0; padding: 0; list-style: none; }
.sights > li { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.sights > li:first-child { border-top: 0; }
.sights strong { display: block; font-size: 1rem; }
.sights .sight-line { display: block; margin-top: 1px; max-width: 70ch; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.todo .todo-book { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft); }
.todo .todo-book h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; }
.todo .todo-book .chips { margin: 0 0 4px; }

/* 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; }

/* The buy box (PLAN §2.79): a card raised above the others, an accent
   edge, its rows small labels over pills. */
.placepage .plan {
  margin: 18px 0 0; padding: 16px; background: var(--card);
  border: 2px solid var(--button); border-radius: 16px; box-shadow: var(--shadow);
}
.placepage .plan h2 { margin: 0 0 8px; font-size: 1.1875rem; }
.placepage .plan .buy-month {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; padding: 9px 12px;
  border-radius: 12px; background: var(--raised); font-size: 0.88rem;
}
.placepage .plan .buy-month b { font-weight: 600; }
.placepage .plan .buy-month a { font-weight: 600; }
.placepage .onpage a.to-book { background: var(--button); border-color: var(--button); color: var(--button-ink); font-weight: 600; }
.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; }
/* Option B (the owner's pick, 2026-10-11; booktabs.js): six tabs in a
   card, the one shown on a raised panel with an accent line under it, and its sites as
   full-width rows. Without script the tabs stay hidden (and .tabbed is never
   set), so every row shows as above. */
.plan-tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 4px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card);
}
.plan-tabs[hidden], .plan-tabs [hidden] { display: none; }
.plan-tabs button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 60px; padding: 8px 4px; border: 0; background: var(--card); color: var(--muted);
  font: inherit; font-size: 0.8rem; cursor: pointer;
}
.plan-tabs button[aria-selected="true"] {
  background: var(--raised); color: var(--fg); font-weight: 600; box-shadow: inset 0 -3px 0 var(--button);
}
.plan-tabs button:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.plan.tabbed .tab-off { display: none; }
.plan.tabbed .plan-panel > .note { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); }
.placepage .plan.tabbed .chips { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.placepage .plan.tabbed .chips li { display: block; width: 100%; }
.placepage .plan.tabbed .chips a {
  display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px;
  border-radius: 12px; font-size: 0.92rem; font-weight: 500;
}
.placepage .plan.tabbed .chips a::after { content: "›"; margin-left: auto; padding-left: 12px; color: var(--muted); }
.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; }
}

/* A tropical place's dry season, under the year's verdict (analysis/seasons.py). */
.dry-season { margin: 10px 0 0; color: var(--muted); font-size: 0.92rem; }
.placepage .place-rest > .disclosure { margin: 18px 0 0; }

/* ---- 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 Lagoon (Aqua in dark), 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, .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; } }


/* 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 Lagoon (Aqua in dark). 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 ---- */

/* ---- activities: hiking, and beach and sea (PLAN §2.54) -----------------
   The place page's "Good for" row under the year (_good_for.html); an
   activity's month list (_act_list.html), re-grouped by activity.js into
   the reader's own country, short hops and further away, with its filter
   row; and the grid of its year (_act_grid.html), whose good and fair
   cells are the group grid's good and ok. */
.good-for { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 10px 0 2px; }
.good-for-head { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.good-for .chips { margin: 0; }
.act-list { margin: 8px 0 14px; }
.act-from { margin: 0 0 8px; }
.act-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.act-filter[hidden] { display: none; }
.act-filter button {
  padding: 6px 12px; border: 1px solid var(--field-line, var(--line)); border-radius: 999px;
  background: var(--card); color: var(--fg); font: inherit; font-size: 0.875rem; cursor: pointer;
}
.act-filter button[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.act-head { margin: 14px 0 6px; font-size: 1rem; }
.act-rows { margin: 0; padding: 0; list-style: none; }
.act-rows li {
  display: grid; gap: 2px; padding: 10px 12px; margin: 0 0 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.act-rows[hidden], .act-head[hidden] { display: none; }
.act-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.act-name a { color: var(--fg); text-decoration: none; }
.act-name a:hover { text-decoration: underline; }
.act-fig, .act-way { font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.act-way:empty { display: none; }
tr.act-line th a { color: inherit; }
table.act-grid td { font-variant-numeric: tabular-nums; }
/* A row with its place's photograph: the photo at the left, the lines
   beside it; on a wide screen a little larger. */
.act-rows li.has-photo {
  grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: start;
}
.act-rows li.has-photo > .act-photo { grid-row: 1 / span 3; display: block; line-height: 0; }
.act-rows li.has-photo > .act-photo img {
  width: 96px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--line);
}
.act-rows li.has-photo > span { grid-column: 2; }
@media (min-width: 720px) {
  .act-rows li.has-photo { grid-template-columns: 132px minmax(0, 1fr); }
  .act-rows li.has-photo > .act-photo img { width: 132px; height: 88px; }
}
.photo-credits { margin: 4px 0 14px; }
.act-lead { margin-bottom: 8px; }
/* ---- end activities ---- */

/* The trip planner (plan.html, site/plan.py): each question a row of chips,
   the chosen one filled; the answers below as the front door's cards. */
.planner fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.planner legend { font-weight: 600; padding: 0; margin: 0 0 8px; }
.planner .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.planner .opts label {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: 0.92rem;
}
.planner .opts label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.planner .opts input { margin: 0; accent-color: var(--button); }
.planner .opts small { color: var(--muted); font-size: 0.76rem; }
.planner select {
  max-width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--fg); font: inherit;
}
.planner .go {
  padding: 10px 18px; border-radius: 8px; border: 1px solid var(--button); min-height: 44px;
  background: var(--button); color: var(--button-ink); font: inherit; font-weight: 600; cursor: pointer;
}
#plan-results { margin-top: 24px; }
#plan-results[aria-busy="true"] { opacity: 0.6; }
#plan-results .why { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.plan-hints { padding-left: 1.2em; }


/* The front page's three doors (_bar.html, PLAN §2.75): a place in mind,
   a month in mind, or neither. Cards, each saying which it is; the third
   the one dark card, the planner. */
.ask .door {
  display: block; margin: 14px 0 0; padding: 14px 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px;
}
.ask .door-k {
  margin: 0 0 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.ask .door-where .bar-at { margin: 0; }
/* "I know where" and "From <city>" on one line, the city's list opening
   from it; the city under the words where both do not fit. */
.ask .door-head {
  position: relative; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 6px 12px; margin: -4px 0 10px;
}
.ask .door-head .door-k { margin: 0; }
.ask .door-all {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px;
  color: var(--accent); font-size: 0.9rem; font-weight: 600; text-decoration: none;
}
.ask .door-all::after { content: "›"; margin-left: 6px; }
.ask .door-all:hover { text-decoration: underline; }
/* The months in one row that scrolls sideways, to the card's edges: at a
   phone's width, or larger text, they wrapped to three rows (the owner,
   2026-10-11). */
.ask .door-when .chips {
  flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.ask .door-when .chips::-webkit-scrollbar { display: none; }
.ask .door-when .chips li { flex: none; }
.ask .door-when .chips a { white-space: nowrap; }
.ask .door-plan {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  background: var(--fg); color: var(--bg); border-color: var(--fg);
}
.ask .door-plan .door-k { margin: 0 0 2px; color: inherit; opacity: 0.75; }
.ask .door-plan .door-t { font-weight: 600; font-size: 1.02rem; }
.ask .door-plan .door-s { font-size: 0.84rem; opacity: 0.8; }
.ask .door-plan:hover, .ask .door-plan:focus-visible { opacity: 0.92; }
.more-ways { margin: 18px 0 0; }

/* A region's month as a reader plans it (group_month.html, PLAN §2.78):
   chips for what the trip is for and the month, sections of photo rows,
   the offbeat below the popular, and every place folded at the end. */
.plan-lede { margin: 10px 0 14px; max-width: 62ch; line-height: 1.55; }
.pchips {
  display: flex; gap: 8px; align-items: center; overflow-x: auto; margin: 8px -16px 0; padding: 2px 16px 4px;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.pchips::-webkit-scrollbar { display: none; }
.pchips .lbl { flex: none; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pchip {
  flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); color: var(--fg); font-size: 0.88rem; white-space: nowrap; text-decoration: none;
}
.pchip:hover { border-color: var(--fg); }
.pchip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 600; }
.purpose { margin: 28px 0 0; scroll-margin-top: 72px; }
.purpose h2 { margin: 0 0 10px; }
.purpose h2 small { display: block; margin-top: 2px; font-size: 0.88rem; font-weight: 400; color: var(--muted); }
.prows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.prows a {
  display: flex; gap: 12px; align-items: center; padding: 8px 10px 8px 8px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--card); color: var(--fg); text-decoration: none;
}
.prows a:hover { border-color: var(--fg); }
.prows img, .prows .noimg { flex: none; width: 88px; height: 66px; border-radius: 10px; object-fit: cover; background: var(--line); }
.prows .ptx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prows .ptx small { color: var(--muted); font-size: 0.8rem; }
.prows .pfx { font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.prows .pwhy { font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.crowd { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; }
.crowd.busy { background: var(--busy-soft, #fdecc8); color: var(--busy-ink, #7a4b00); }
.crowd.quiet { background: var(--accent-soft); color: var(--fg); }
.prows.off a { background: transparent; }
.offh { margin: 16px 0 8px; font-size: 1rem; }
.offh small { display: block; font-weight: 400; color: var(--muted); font-size: 0.82rem; }
.allplaces { margin: 30px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.allplaces > summary { font-weight: 600; cursor: pointer; }
.allplaces[open] > summary { margin-bottom: 8px; }
/* A region's page opens on this month (group.html, PLAN §2.78). */
.now-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 26px 0 4px; }
.now-head a { font-size: 0.9rem; font-weight: 600; }
/* A place's month (month.html, the owner 2026-10-11): every figure folded
   under one line, and the ways on as scrolling rows inside their card. */
details.numbers > summary { cursor: pointer; list-style: none; }
details.numbers > summary::-webkit-details-marker { display: none; }
details.numbers > summary h2 { display: inline; margin: 0; font-size: 1.05rem; }
details.numbers > summary::after { content: " ›"; color: var(--muted); }
details.numbers[open] > summary::after { content: " ⌄"; }
details.numbers[open] > summary { margin-bottom: 10px; }
.ways-on { display: flex; flex-direction: column; gap: 6px; }
.ways-on .pchips { margin: 0; padding-left: 0; padding-right: 0; }
.pchip small { margin-left: 4px; color: var(--muted); font-size: 0.72rem; }
.pchip.on small { color: inherit; }
/* Everything else, most visited first (_purposes.html rest_list). */
.plist { margin: 12px 0 0; padding-left: 1.8em; display: grid; gap: 6px; }
.plist li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.plist a { color: var(--fg); text-decoration: none; }
.plist a small { color: var(--muted); margin-left: 4px; }
.plist .pfx { display: block; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.top10 .prows { counter-reset: none; }
/* One ranked list (_purposes.html ranked, rank.js): sort by, the first ten,
   "Show all". Without a script every row shows and the sort is hidden. */
.rank-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.rank-head h2 { margin: 0; }
.sortby { font-size: 0.85rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.sortby select { min-height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--fg); font: inherit; font-size: 0.88rem; }
html:not(.js) .sortby, html:not(.js) .show-all { display: none; }
.ranked.folded .prows > li.more { display: none; }
.rank-sub { margin: 4px 0 10px; }
.show-all { margin-top: 10px; }
.prows .ptx > .pill { align-self: flex-start; }
/* Places as a shop (places.html, shop.js; PLAN §2.79): the filters in a
   column beside the results on a computer and in a sheet over the page on a
   phone, the sort, the filters set as chips, and the places as product
   cards, two across on a phone. Without a script the shop is hidden and the
   list by region below it is the page. */
/* Without a script the controls are not shown; this month's first places,
   written by the build (_shop.html), are. */
html:not(.js) .shop .shop-bar > :not(.count), html:not(.js) .shop-facets, html:not(.js) .shop-chips,
html:not(.js) .more-btn { display: none; }
.shop { margin: 16px 0 34px; }
.shop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.shop-bar .sortby { margin-left: auto; }
/* On a phone the count takes its own line under Filters and the sort. */
.shop-bar .count { order: 3; flex: 1 1 100%; }
.filters-btn {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--fg); border-radius: 999px;
  background: var(--card); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer;
}
.filters-btn b:not(:empty) {
  display: inline-block; min-width: 1.4em; margin-left: 6px; padding: 0 5px; border-radius: 999px;
  background: var(--button); color: var(--button-ink); font-size: 0.8rem; text-align: center;
}
.shop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.shop-chips:empty { display: none; }
.shop-chips .chip.on {
  min-height: 34px; padding: 0 12px; border: 1px solid var(--fg); border-radius: 999px;
  background: var(--accent-soft); color: var(--fg); font: inherit; font-size: 0.86rem; cursor: pointer;
}
.shop .clear { border: 0; background: none; padding: 0 6px; color: var(--accent); font: inherit; font-size: 0.86rem; text-decoration: underline; cursor: pointer; }
.shop-results { min-width: 0; }
.shop-results .count { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.shop-results .count b { color: var(--fg); }
.prod-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 210px), 1fr));
}
.prod { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.prod:hover { border-color: var(--fg); }
.prod .pa { display: flex; flex-direction: column; flex: 1 1 auto; color: var(--fg); text-decoration: none; }
.prod .ph { display: block; aspect-ratio: 4 / 3; background: var(--accent-soft); }
.prod .ph img, .prod .ph .noimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.prod .ph .noimg { background: var(--accent-soft) var(--noimg-mark) center / auto 36% no-repeat; }
.prod .body { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; min-width: 0; }
.prod .body b { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.prod .body small { color: var(--muted); font-size: 0.8rem; }
.prod .wx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; }
.prod .wx .word { font-weight: 600; font-size: 0.88rem; }
.prod .fx { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.prod .credit { padding: 0 10px 8px; font-size: 0.7rem; color: var(--muted); }
.prod .credit a { color: inherit; }
.prod .heart {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--fg);
  font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
}
.prod .heart[aria-pressed="true"] { color: #c2410c; }
.prod-grid .none { grid-column: 1 / -1; padding: 20px 14px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
.more-btn { display: block; margin: 16px auto 0; min-height: 42px; padding: 0 20px; border: 1px solid var(--fg); border-radius: 999px; background: var(--card); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; }
.more-btn[hidden] { display: none; }
.facets fieldset { margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.facets legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 0.92rem; }
.facets .opt { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 0.92rem; cursor: pointer; }
.facets .opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--crowd-bar); flex: none; }
.facets .opt span { flex: 1 1 auto; min-width: 0; }
.facets .opt small { color: var(--muted); font-variant-numeric: tabular-nums; }
.facets .opt.zero { color: var(--muted); }
.facets select { width: 100%; min-height: 40px; margin-top: 4px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--fg); font: inherit; font-size: 0.92rem; }
.sheet-head, .sheet-foot { display: none; }
.allplaces.every h3.region-head { margin: 18px 0 8px; font-size: 1.05rem; }
/* A phone: the filters slide up over the page and Done brings it back. */
@media (max-width: 899px) {
  .shop-facets { display: none; }
  .shop.filters-open .shop-facets {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 40;
    background: var(--card); padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
  }
  .shop.filters-open .facets { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .shop.filters-open .sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .shop.filters-open .sheet-head .link { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
  .shop.filters-open .sheet-foot { display: block; padding: 10px 0; border-top: 1px solid var(--line); }
  .sheet-foot .apply { width: 100%; min-height: 46px; border: 0; border-radius: 999px; background: var(--button); color: var(--button-ink); font: inherit; font-weight: 600; cursor: pointer; }
}
/* A computer: the filters as a column on the left, the results beside. */
@media (min-width: 900px) {
  .filters-btn { display: none; }
  .shop-bar .count { order: 0; flex: 1 1 auto; margin: 0; }
  .shop-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; align-items: start; }
  .shop-facets { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; padding-right: 6px; }
  .facets fieldset:first-child { padding-top: 0; }
}

/* The Book bar (booktabs.js, PLAN §2.79): where the buy box is not beside
   the page, a bar at the foot once the box has scrolled away, gone again
   when it is back in view. Above the app's dock where there is one. */
.buybar[hidden] { display: none; }
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 27;
  display: flex; align-items: center; gap: 12px;
  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);
}
.buybar p { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.86rem; line-height: 1.3; }
.buybar p b { display: block; font-size: 0.95rem; }
.buybar a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--button); color: var(--button-ink); font-weight: 600; text-decoration: none;
}
@media (max-width: 719px) { html.app .buybar { bottom: calc(58px + env(safe-area-inset-bottom)); padding-bottom: 10px; } }
@media (min-width: 1150px) { .buybar { display: none; } }
@media (max-width: 1149px) { body:has(.buybar) footer { padding-bottom: 76px; } }

/* The way into the Places shop with this page's filters set (_to_shop.html,
   PLAN §2.79): one link, shaped as a button, under the page's opening line. */
.to-shop { margin: 10px 0 0; }
.to-shop a {
  display: inline-block; min-height: 40px; padding: 9px 16px; border-radius: 14px; line-height: 1.35;
  border: 1px solid var(--fg); background: var(--card); color: var(--fg); font-weight: 600;
  font-size: 0.92rem; text-decoration: none;
}
.to-shop a:hover { background: var(--accent-soft); }
/* The front page as a shop (PLAN §2.81): From, When and Where in one box
   over the places (_bar.html), then Search. Where is the bar's own search
   box, unboxed in it; on a phone From and When share the first row and
   Where, for typing, has the whole second with Search beside it. */
.front-ask { padding-bottom: 4px; }
/* The bar the width of the places under it (the owner, 2026-10-13: "it
   should extend to the line where the cards are on the right side"). */
.front-ask .bar-at { max-width: none; }
.tripbar {
  display: grid; grid-template-columns: 1fr 1fr 1.6fr; background: var(--card);
  border: 1px solid var(--outline); border-radius: 18px; box-shadow: var(--card-shadow);
}
.tripbar:focus-within { border-color: var(--fg); }
.tripbar .seg {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-width: 0; padding: 9px 14px; border-left: 1px solid var(--line-soft);
}
.tripbar .seg:first-child { border-left: 0; }
.tripbar .seg-k { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.tripbar .bar-box {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px;
  padding: 9px 8px 9px 14px; border: 0; border-radius: 0; box-shadow: none; background: none;
}
.tripbar .bar-box:focus-within { border-color: transparent; }
.tripbar .bar-box .seg-k { grid-column: 1; grid-row: 1; }
.tripbar .bar-box input { grid-column: 1; grid-row: 2; height: 30px; padding: 0; font-weight: 600; }
/* Smaller than the row it sits in (the owner, 2026-10-13: "too big"). */
.tripbar .bar-go { grid-column: 2; grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 10px; }
.tripbar .bar-go svg { width: 18px; height: 18px; }
.tripbar .seg-when select {
  min-height: 30px; width: 100%; padding: 0; border: 0; background: none; color: var(--fg);
  font: inherit; font-weight: 600; cursor: pointer;
}
.tripbar .from-chip {
  justify-content: flex-start; min-height: 30px; padding: 0; border: 0; background: none;
  font-size: 1rem; font-weight: 600;
}
.tripbar .from-chip [data-from-city] { font-weight: 600; }
.tripbar .from-pop { top: calc(100% + 6px); right: 0; left: auto; width: min(340px, calc(100vw - 32px)); }
@media (max-width: 759px) {
  .tripbar { grid-template-columns: 1fr 1fr; }
  .tripbar .seg-where { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-soft); }
}
/* Every month and every region under the places, as plain links. */
.front-links { margin: 36px 0 0; }
.front-links h2 { margin: 18px 0 8px; font-size: 1.05rem; }
/* The Menu, in place of the four tabs (base.html, PLAN §2.81): a <details>
   whose list opens under it, over the page. */
.menu { position: relative; margin-left: 6px; }
.menu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg);
  font-weight: 600; font-size: 0.92rem; cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 18px; height: 18px; }
.menu[open] > summary { border-color: var(--fg); }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(300px, calc(100vw - 24px));
  padding: 6px 0; background: var(--card); border: 1px solid var(--outline); border-radius: 16px; box-shadow: var(--shadow);
}
.menu-pop ul { list-style: none; margin: 0; padding: 0; }
.menu-pop a { display: block; padding: 12px 18px; color: var(--fg); text-decoration: none; font-weight: 500; }
.menu-pop li + li a { border-top: 1px solid var(--line-soft); }
.menu-pop a:hover, .menu-pop a[aria-current] { color: var(--accent); }
/* A phone: the Weekly note is in the Menu, for the room. */
@media (max-width: 519px) { header .notify-at { display: none; } }
/* Every place, by region (places.html, PLAN §2.81): each region's countries
   as the shop's cards, the most visited three places named under each. */
.prod-grid.countries { margin: 0 0 8px; }
.prod-grid.countries .fx { line-height: 1.35; }
.explore-head { margin: 30px 0 4px; }
/* How far from the reader's city, once one is chosen (shop.js). */
.prod .far { font-size: 0.78rem; color: var(--muted); }
/* A region on Explore: its heading and "Filter and sort" open the shop on
   it; its own page beside them (places.html). */
.explore-region { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 18px 0 10px; }
.explore-region .region-head { margin: 0; }
.explore-region .region-head a { color: inherit; text-decoration: none; }
.explore-region .to-shop-mini { font-weight: 600; font-size: 0.9rem; }
.explore-region .region-page { margin-left: auto; font-size: 0.85rem; color: var(--muted); }
.region-pick { margin: 6px 0 4px; }
[data-region-block][hidden] { display: none; }

/* Big events at a place (_events.html, PLAN §2.78): one line each, the
   dates beside the name, what it is under it. */
.events .event-list { list-style: none; margin: 0; padding: 0; }
.events .event-list li { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.events .event-list li:first-child { border-top: 0; }
.events .when { color: var(--muted); margin-left: 6px; }
/* How far from the reader's city (events.js, PLAN §2.87), on its own line. */
.events .far { display: block; color: var(--muted); font-size: 0.9em; margin-top: 2px; }
.events .far[hidden] { display: none; }
.events .closures { color: var(--avoid); }
.events .about { color: var(--muted); font-size: 0.92rem; }