/* Three surfaces, not one.
   The old palette had a card 3% away from the page behind it, which on a phone
   reads as one flat sheet -- the complaint that prompted this was "full black".
   `--bg` is the page, `--card` sits on it, `--raised` sits on that, and each
   step is far enough apart to be seen at low brightness. */
:root {
  --bg: #fbf9f5;
  --card: #ffffff;
  --raised: #f3efe7;
  --fg: #16181d;
  --muted: #5d6068;
  --line: #e3ddd1;
  --line-soft: #efeae0;
  --accent: #0a6a5c;
  --accent-soft: #e4f1ee;
  --sweet: #0a6a5c;
  --sweet-bg: #dcefe9;
  --avoid: #9a4b33;
  --avoid-bg: #f7e9e3;
  --busy: #8a5a12;
  --busy-bg: #f6ecd9;
  --warm: #b4621f;
  --shadow: 0 1px 2px rgba(22, 24, 29, 0.05), 0 8px 24px rgba(22, 24, 29, 0.06);
}

/* Dark is ink, not black: a deep blue-grey with a warm cast. An unrelieved
   near-black with white text is the highest contrast a screen can produce,
   which on a page of tables reads as glare, and it leaves nothing for
   elevation to be made of. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12151c;
    --card: #1b1f28;
    --raised: #242935;
    --fg: #e9e7e3;
    --muted: #9aa1ad;
    --line: #2c323e;
    --line-soft: #222733;
    --accent: #5ecfb6;
    --accent-soft: #16302c;
    --sweet: #5ecfb6;
    --sweet-bg: #15332d;
    --avoid: #e0a189;
    --avoid-bg: #372520;
    --busy: #e6c07b;
    --busy-bg: #33291a;
    --warm: #e6a35c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --bg: #12151c;
  --card: #1b1f28;
  --raised: #242935;
  --fg: #e9e7e3;
  --muted: #9aa1ad;
  --line: #2c323e;
  --line-soft: #222733;
  --accent: #5ecfb6;
  --accent-soft: #16302c;
  --sweet: #5ecfb6;
  --sweet-bg: #15332d;
  --avoid: #e0a189;
  --avoid-bg: #372520;
  --busy: #e6c07b;
  --busy-bg: #33291a;
  --warm: #e6a35c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }
header { border-bottom: 1px solid var(--line); padding: 22px 0; }
header a.brand { font-weight: 650; color: var(--fg); text-decoration: none; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: 32px 0 8px; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; margin: 36px 0 10px; }
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; }
tr.out td { color: var(--muted); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--line); }
.pill.sweet { background: var(--sweet-bg); color: var(--sweet); }
.pill.avoid { background: var(--avoid-bg); color: var(--avoid); }
/* Orthogonal to the verdict, and sits beside it: a busy month is usually a
   good one. Warm rather than red, so it does not read as a warning. */
.pill.busy { background: var(--busy-bg); color: var(--busy); margin-left: 4px; }
.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; }

/* 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); }
/* The one link on the page that asks for a commitment rather than a click,
   so it is marked out from both the booking block and the plain links. */
.alerts {
  display: block; margin: 22px 0; padding: 15px 17px; border-radius: 10px;
  text-decoration: none; color: var(--fg);
  background: var(--card); border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
}
.alerts:hover { background: var(--accent-soft); }
.alerts strong { display: block; font-size: 1rem; }
.alerts span { display: block; font-weight: 400; font-size: 0.86rem; color: var(--muted); margin-top: 4px; }

.book strong { display: block; font-size: 1rem; }
.book span { display: block; font-weight: 400; font-size: 0.84rem; color: var(--muted); margin-top: 3px; }
footer { border-top: 1px solid var(--line); margin-top: 48px; padding: 22px 0 40px; color: var(--muted); font-size: 0.85rem; }
footer p { margin: 5px 0; }
@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; }
.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 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-size: 1rem; width: 100%;
}
.go input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.go button {
  padding: 12px 20px; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent); color: var(--bg); font-size: 1rem; font-weight: 600; cursor: pointer;
}
.go button:hover { opacity: 0.9; }
@media (max-width: 520px) { .go > div, .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. Three states, so it says which one it is
   rather than showing an icon that could mean either. */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--muted); font: inherit; font-size: 0.82rem;
  cursor: pointer;
}
.theme:hover { border-color: var(--accent); color: var(--accent); }

/* 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; }
.hero img {
  display: block; width: 100%; height: auto; max-height: 300px;
  object-fit: cover; border-radius: 10px; background: var(--card);
}
.hero figcaption {
  margin-top: 7px; font-size: 0.78rem; color: var(--muted);
}
.hero figcaption a { color: var(--muted); }
.hero figcaption a:hover { color: var(--accent); }
@media (max-width: 520px) { .hero img { max-height: 200px; } }

/* 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; }
.now .tile strong { display: block; font-size: 1.02rem; }

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

.theme {
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--muted); font: inherit;
  font-size: 0.8rem; cursor: pointer; flex: none;
}

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

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

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

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

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

  /* Each month is a card laid out in three lines: the name and its verdict,
     the figures, then the reason. Flex rather than absolute positioning,
     because the pills are not all one width -- "sweet spot" is twice "ok",
     and a pinned pill sat on top of the rain figure for five months of the
     year. `margin-left: auto` on the verdict eats the free space on the first
     line, which is what pushes the figures onto their own. */
  table.months tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px;
  }
  table.months tr.out { background: var(--bg); }
  table.months td {
    border: none; padding: 0; white-space: nowrap; text-align: left;
    width: auto; flex: 0 0 auto;
  }
  table.months td.month { order: 1; font-size: 1.05rem; font-weight: 650; }
  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;
  }
}

/* ---- 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 .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 { padding: 0 16px; }
}

/* ---- odds and ends --------------------------------------------------- */
.pill { padding: 3px 10px; font-size: 0.76rem; }
footer { margin-top: 56px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
footer p { margin: 3px 0; }
.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)); }
@media (max-width: 560px) {
  .now img { 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: 650;
}
.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 section { break-inside: avoid; }
}