/* London for Families: site styles (Layout A). Mobile first.
   Fonts are stored on the site (static/fonts), so pages make no requests to
   Google. Spacing follows one scale throughout: the page's side gutter, the gap
   between sections, the gap under a section heading and the gap between photos
   each grow with the screen width between a phone value and a desktop value. */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/figtree.1792868324.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("../fonts/figtree-italic.1792868324.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("../fonts/bricolage-grotesque.1792868324.woff2") format("woff2"); }

:root {
  --ink: #1d2733;
  --ink-soft: #55606d;
  --ink-mid: #3d4854;
  --brand: #0b6b5f;      /* deep teal */
  --brand-dark: #084f47;
  --brand-tint: #e3f1ee;
  --accent: #c2410c;     /* orange, for the main button */
  --warn-tint: #fbe6e3;
  --warn: #b42318;
  --bg: #ffffff;
  --bg-soft: #f3f6f5;
  --line: #dde3e8;
  --cat: var(--brand);   /* each category's colour, set by its .cat-<slug> class */
  --maxw: 46rem;         /* reading width of an article */
  --radius: 10px;
  --font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Bricolage Grotesque", "Figtree", -apple-system, "Segoe UI", sans-serif;
  /* the spacing scale */
  --gutter: clamp(16px, 4vw, 64px);
  --section: clamp(56px, 6.5vw, 104px);
  --under-heading: clamp(16px, 1.8vw, 28px);
  --photo-gap: clamp(10px, 1.1vw, 16px);
  --inset: clamp(8px, 0.9vw, 14px);
}

.cat-museums { --cat: #0b6b5f; }
.cat-theatre { --cat: #7a2e6e; }
.cat-outdoors { --cat: #2f6b2a; }
.cat-castles-palaces { --cat: #8a5a00; }
.cat-travel { --cat: #1f4e8c; }
.cat-attractions-to-avoid { --cat: #b42318; }
.cat-bits-pieces { --cat: #3d4854; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.55; color: var(--ink); background: var(--bg); }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
img { max-width: 100%; height: auto; }
h1, h2 { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1720px; margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-top: var(--section); }
.section-tight { padding-top: clamp(32px, 4vw, 56px); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: var(--under-heading); }
.section-head h2, .section-title { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3vw, 44px); line-height: 1.15; letter-spacing: -0.02em; }
.section-title { font-size: clamp(24px, 2.4vw, 34px); margin-bottom: var(--under-heading); }
.section-head p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

/* Accessibility */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 0.6rem 1rem; z-index: 100; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; border-radius: 6px; }
/* Text for screen readers only */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Header: a home pill (templates/_logo.html), then the categories as pills in
   the same row, all from the left. When the category pills don't fit, they
   scroll sideways and the home pill stays put. The house icon is as tall as a
   line of the pills' text, so every pill is the same height. */
.site-header { background: var(--brand); color: #fff; }
.header-row { display: flex; align-items: center; gap: 6px; padding-block: 12px; }
.site-nav { flex: 1 1 auto; min-width: 0; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav li { flex: none; }
.site-logo, .site-nav a { display: inline-block; padding: 11px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.4; }
.site-logo { flex: none; }
.site-logo svg { display: block; width: 21px; height: 21px; }
.site-logo:hover, .site-nav a:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.site-logo[aria-current="page"], .site-nav a[aria-current="page"] { background: #fff; color: var(--brand); font-weight: 700; }

/* A coloured band at the top of category pages and article pages */
.band { background: var(--cat); color: #fff; }
.band .wrap { padding-block: clamp(20px, 3.2vw, 48px) clamp(32px, 4vw, 56px); }
.band h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(36px, 5vw, 72px); line-height: 1.05; letter-spacing: -0.02em; }
.band .standfirst, .band-note { margin: 12px 0 0; max-width: var(--maxw); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.breadcrumb { margin-bottom: 4px; font-size: 15px; line-height: 1.5; }
.breadcrumb a { display: inline-block; padding: 10px 0; }
.breadcrumb span[aria-hidden] { margin: 0 0.35rem; }
.band .breadcrumb { color: rgba(255, 255, 255, 0.85); }
.band .breadcrumb a { color: rgba(255, 255, 255, 0.92); }

/* The home page's opening photo, with a white card over its foot */
.hero-photo { position: relative; }
.hero-photo img { display: block; width: 100%; height: clamp(280px, 36vw, 560px); object-fit: cover; object-position: 50% 45%; }
.hero-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 clamp(32px, 4.5vw, 80px); }
.hero-card { flex: 1 1 540px; min-width: 0; max-width: 760px; position: relative; margin-top: calc(-1 * clamp(48px, 9vw, 150px)); background: var(--bg); border-radius: 20px; padding: clamp(24px, 3.2vw, 48px); box-shadow: 0 14px 40px rgba(16, 38, 35, 0.18); }
.hero-card.no-photo { margin-top: clamp(32px, 4vw, 56px); }
.eyebrow { margin: 0 0 12px; color: var(--brand); font-weight: 700; font-size: 14px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-card h1 { margin: 0 0 16px; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.02em; }
.hero-intro p { margin: 0 0 28px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--ink-mid); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; line-height: 1.4; }
.button:hover { background: #9a3412; color: #fff; }
.button-outline { padding: 10px 20px; background: transparent; border: 2px solid var(--brand); color: var(--brand); }
.button-outline:hover { background: var(--brand-tint); color: var(--brand-dark); }
/* Beside the card on a wide screen, the promises' last line ends level with the
   card's foot, and the first promise stays at least 32px below the photo. When the
   promises need more height than that leaves, the card grows to match them. Under
   the card on a phone, align-self has no effect. */
.hero .hero-card { align-self: stretch; }
.promises { flex: 1 1 320px; min-width: 0; align-self: flex-end; list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.promises li { display: flex; gap: 16px; align-items: flex-start; }
.promises strong { display: block; margin-bottom: 2px; font-size: 18px; line-height: 1.3; }
.promises li > span:last-child { padding-top: 2px; }
.promises li > span:last-child > span { display: block; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.promise-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.promise-icon.icon-skip { background: var(--warn-tint); color: var(--warn); }

/* Our favourite things: big and small photos. Two columns on a phone, three, then four. */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 240px); grid-auto-flow: dense; gap: var(--photo-gap); }
@media (min-width: 600px) { .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { position: relative; display: block; overflow: hidden; border-radius: 16px; background: var(--ink); }
.tile-big { grid-column: span 2; grid-row: span 2; }
.tile-tall { grid-row: span 2; }
.tile-wide { grid-column: span 2; }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile > img.whole { object-fit: contain; }
.tile-link { color: var(--ink); text-decoration: none; }
.tile-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.tile-link:focus-visible { outline: none; }
.tile-link:focus-visible::after { outline: 3px solid var(--accent); outline-offset: -3px; }
.tile-label { position: absolute; left: var(--inset); bottom: var(--inset); z-index: 1; max-width: calc(100% - 2 * var(--inset)); background: var(--bg); border-radius: 12px; padding: clamp(8px, 0.8vw, 12px) clamp(10px, 1.1vw, 16px); line-height: 1.25; }
/* label: top-left, top-right or bottom-right in content/_index.md, for a photo
   whose subject sits under the bottom-left corner */
.label-top .tile-label { top: var(--inset); bottom: auto; }
.label-right .tile-label { right: var(--inset); left: auto; }
.tile-place { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--cat); text-transform: uppercase; letter-spacing: 0.05em; }
.tile-title { display: block; font-size: clamp(15px, 1.25vw, 18px); font-weight: 700; }
.tile-big .tile-title { font-size: clamp(17px, 1.7vw, 26px); }
.tile-more { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: clamp(14px, 1.6vw, 24px); background: var(--brand); color: #fff; text-decoration: none; }
.tile-more:hover { background: var(--brand-dark); color: #fff; }
.tile-more-title { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2vw, 30px); line-height: 1.1; }
.tile-more-note { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }

/* Every review: a coloured square per category, then a card for each of its
   articles. A card without a photo has a plain box in its category's colour. */
.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(20px, 2vw, 28px) var(--photo-gap); }
@media (min-width: 900px) { .place-grid { grid-template-columns: repeat(auto-fill, minmax(max(150px, 12vw), 1fr)); } }
.place-card { display: block; color: var(--ink); text-decoration: none; }
.place-photo { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; background: var(--bg-soft); }
.place-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.place-photo img.whole { object-fit: contain; }
.place-blank { background: var(--cat); }
.place-title { display: block; margin-top: 10px; font-weight: 700; font-size: 16px; line-height: 1.3; }
.place-card:hover .place-title { color: var(--brand); }
/* The red X over an Attractions to avoid card: two lines from corner to corner,
   red with a thin white edge so it shows on a photo and on the red box. */
.cross { position: absolute; inset: 0; width: 100%; height: 100%; }
.cross path { fill: none; vector-effect: non-scaling-stroke; }
.cross-edge { stroke: #fff; stroke-width: 15px; }
.cross-line { stroke: #e0261b; stroke-width: 10px; }
.cat-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 14px; background: var(--cat); color: #fff; text-decoration: none; }
.cat-tile:hover { color: #fff; filter: brightness(1.12); }
.cat-tile-name { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.05; }
.cat-tile-note { font-weight: 600; font-size: 15px; line-height: 1.35; }
.tile-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tile-row .cat-tile { min-height: 112px; }

/* Photos on this page: the credit for every photo on the page, at its foot. No
   photo carries a credit of its own. */
.credits > h2 { margin: 0 0 12px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.4; }
.credits ul { list-style: none; margin: 0; padding: 0; column-width: 300px; column-gap: 40px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.credits li { break-inside: avoid; margin: 0 0 6px; }
.credits a { color: var(--ink-soft); }
.credit-what { color: var(--ink); }

/* Category pages: big photo cards, three across on a wide screen and one on a phone */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(280px, 26vw)), 1fr)); gap: clamp(32px, 3vw, 48px) clamp(16px, 2vw, 32px); }
.card { position: relative; }
.card-photo { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: var(--bg-soft); }
.card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-photo img.whole { object-fit: contain; }
.card-blank { background: var(--cat); }
.card h2 { margin: 14px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; letter-spacing: -0.01em; }
.card-link { color: var(--ink); text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover .card-link { color: var(--brand); }
.card-summary { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.text-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.text-cards a { display: block; height: 100%; padding: 20px 22px; border: 1px solid var(--line); border-top: 6px solid var(--cat); border-radius: 14px; color: var(--ink); text-decoration: none; }
.text-cards a:hover { border-color: var(--cat); }
.text-cards h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.2; }
.text-cards p { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* Article pages (layout L, since 28 October 2026): the article at reading width with
   the "More in" list under its text. On a screen at least 1,024px wide a 300px column
   beside them holds only the ad. Narrower screens (phones and upright tablets) have
   no column, and the ad sits under the coloured header instead. */
.article-row { padding-top: clamp(32px, 4vw, 56px); }
.article-main { min-width: 0; max-width: var(--maxw); }
/* A photo floated at the very end of an article stays inside it, above the list. */
.article { display: flow-root; }
.page { max-width: var(--maxw); }
.article-side { display: none; }
@media (min-width: 1024px) {
  /* The column runs the full height of the article and the list, so the ad can stay
     in view all the way down. */
  .article-row { display: grid; grid-template-columns: minmax(0, var(--maxw)) 300px; justify-content: space-between; column-gap: clamp(32px, 4.5vw, 80px); }
  .article-side { display: block; }
  .ad-top { display: none; }
}
/* The ad's space: 300 x 250, or 300 x 600 in a window tall enough to keep a 600px ad
   wholly in view, 24px from the top and clear of the cookie banner. The ad unit's own
   size is set in the page (templates/article.html), because Google doesn't support
   sizes set in a stylesheet. A live slot has no border, so a 300px ad fits. */
.article-side .ad-slot { width: 300px; min-height: 250px; margin: 0; }
.article-side .ad-slot--live { border: 0; }
@media (min-height: 720px) { .article-side .ad-slot { min-height: 600px; } }
/* The ad stays in view as the reader scrolls only on a computer with a mouse or
   trackpad: Google allows sticky ads on desktops, never on tablets or phones. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .article-side .ad-slot { position: sticky; top: 24px; }
}
/* The ad under the coloured header, below 1,024px wide: 320 x 100, or 728 x 90 from
   800px wide, centred over the text. On a 320px phone the 320px ad reaches into the
   side margins; below 320px it wouldn't fit, so there is none. */
.ad-top { margin-bottom: clamp(24px, 3vw, 32px); }
.ad-top .ad-slot { width: 320px; max-width: 100%; min-height: 100px; margin: 0 auto; }
.ad-top .ad-slot--live { border: 0; }
@media (min-width: 800px) { .ad-top .ad-slot { width: 728px; min-height: 90px; } }
@media (max-width: 319px) { .ad-top { display: none; } }
.more-list { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.more-list h2 { margin: 0 0 18px; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.more-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.more-list li a { display: flex; gap: 14px; align-items: flex-start; color: var(--ink); text-decoration: none; }
.more-list img { flex: none; width: 96px; height: 64px; border-radius: 10px; object-fit: cover; }
.more-list img.whole { object-fit: contain; background: var(--bg-soft); }
.more-list strong { display: block; font-size: 16px; line-height: 1.3; }
.more-list li a:hover strong { color: var(--brand); }
.more-list li a span span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.more-all { display: inline-block; margin-top: 10px; padding: 10px 0; font-weight: 700; text-decoration: none; }

/* Article body */
.article-body { font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.65; }
.article-body h2, .article-body h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.article-body h2 { font-size: 1.6rem; }
.article-body h3 { font-size: 1.3rem; }
.article-body img { border-radius: 12px; display: block; margin: 1.5rem 0 0.5rem; }
/* A photo's caption in the paragraph with or after it (.photo-caption: the builder
   moves the credit that followed it to "Photos on this page"), and a credit that
   stays beside what it credits (.photo-credit: the Travel map's) */
.article-body .photo-caption, .article-body .photo-credit { font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); margin-top: 0; }
.article-body .photo-caption a, .article-body .photo-credit a { color: var(--ink-soft); }
.article-body ul, .article-body ol { padding-left: 1.3rem; }
.article-body li { margin: 0.25rem 0; }
.article-body h2, .article-body h3 { margin-top: 1.6rem; }
/* A photo at half the column's width on the right, with its caption
   underneath at the same width, so the list after it wraps on the left. On a
   phone it takes the full width instead. Whatever follows that list starts
   below the photo, and so does every heading, so the photo never reaches into
   the next part. */
.article-body .photo-right { float: right; width: 50%; margin: 0.4rem 0 1rem 1.5rem; }
/* A smaller photo, a third of the column's width, on the right. Several in a
   row stack one under another down the side of one part of an article
   (Chessington's rides). On a phone it takes the full width, like the
   half-width photo. Put <div class="clear"></div> after that part so the next
   part starts below the photos. */
.article-body .photo-right-third { float: right; clear: right; width: 33.333%; margin: 0.4rem 0 1rem 1.5rem; }
.article-body .clear { clear: both; }
/* A photo at the column's full width, with its caption underneath in the
   same style as the half-width photo's. */
.article-body .photo-full { margin: 1.25rem 0; }
.article-body .photo-right img, .article-body .photo-right-third img, .article-body .photo-full img { width: 100%; margin: 0 0 0.35rem; }
.article-body .photo-right p, .article-body .photo-right-third p, .article-body .photo-full p { margin: 0; }
.article-body .photo-right figcaption, .article-body .photo-right-third figcaption, .article-body .photo-full figcaption { font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }
.article-body .photo-right figcaption p + p, .article-body .photo-right-third figcaption p + p, .article-body .photo-full figcaption p + p { margin-top: 0.3rem; }
.article-body .photo-right + ul + *, .article-body .photo-right + ol + *,
.article-body h2, .article-body h3, .article-body h4 { clear: both; }
/* Two photos side by side across the column, above a paragraph that
   introduces both, so they don't stack down the side past its text. Each
   carries its own caption; on a phone they stack. */
.article-body .photo-pair { display: flex; gap: 1.5rem; margin: 0.4rem 0 1rem; clear: both; }
.article-body .photo-half { flex: 1; min-width: 0; margin: 0; }
/* Six photos above the paragraph that introduces them (St Pancras's Tube lines),
   in two rows of three; two to a row on a phone. */
.article-body .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1.5rem; margin: 0.4rem 0 1rem; clear: both; }
.article-body .photo-third { min-width: 0; margin: 0; }
.article-body .photo-half img, .article-body .photo-third img { width: 100%; margin: 0 0 0.35rem; }
.article-body .photo-half p, .article-body .photo-third p { margin: 0; }
.article-body .photo-half figcaption, .article-body .photo-third figcaption { font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }
.article-body .photo-half figcaption p + p, .article-body .photo-third figcaption p + p { margin-top: 0.3rem; }
/* A click-to-open part under one way of travelling in the Travel articles
   ("Buying tickets for the Piccadilly line"). It is the browser's own
   <details>, so it works without JavaScript and find-in-page opens it. The
   tinted bar starts below any photo above it and spans the column; its arrow
   points right when shut and down when open. */
.article-body details.tickets { clear: both; margin: 0.75rem 0 1.5rem; padding: 0 1rem; border: 1px solid #bcd9d3; border-radius: var(--radius); overflow: hidden; }
.article-body details.tickets > summary { display: flex; align-items: center; gap: 0.75rem; margin: 0 -1rem; padding: 0.65rem 1rem; list-style: none; cursor: pointer; background: #e5f2ef; color: var(--brand-dark); font-weight: 600; }
.article-body details.tickets > summary::-webkit-details-marker { display: none; }
.article-body details.tickets > summary::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-left: 0.1rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.article-body details.tickets[open] > summary::before { transform: rotate(45deg); }
.article-body details.tickets > summary:hover { background: #d4eae5; }
.article-body details.tickets > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }
.article-body details.tickets[open] > summary { margin-bottom: 0.25rem; border-bottom: 1px solid #bcd9d3; }
@media (max-width: 640px) {
  .article-body .photo-right, .article-body .photo-right-third { float: none; width: auto; margin: 1.25rem 0; }
  .article-body .photo-pair { flex-direction: column; gap: 1.25rem; margin: 1.25rem 0; }
  .article-body .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; margin: 1.25rem 0; }
}

/* Ad slots: empty until AdSense is wired */
.ad-slot { margin: 0; min-height: 100px; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border: 1px dashed #c9d2d9; border-radius: 12px; }
.ad-slot__placeholder { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: #5b6672; }

/* Cookie-consent banner */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--ink); color: #eef2f5; padding: 1rem 1.1rem; box-shadow: 0 -2px 12px rgba(0,0,0,.15); }
/* Must beat the display:flex below (and the [hidden] UA rule) so JS dismissal works
   on screens >=560px — otherwise display:flex keeps the banner visible after a choice. */
.consent-banner[hidden] { display: none; }
.consent-banner .consent-actions { display: flex; gap: 0.6rem; margin-top: 0.6rem; flex-wrap: wrap; }
.consent-banner p { margin: 0; font-size: 0.92rem; }
.consent-banner a { color: #7fe0d2; }
.consent-banner button { border: 0; border-radius: 6px; padding: 0.5rem 1rem; font: inherit; font-size: 0.92rem; cursor: pointer; }
.consent-banner button[data-consent="accept"] { background: var(--accent); color: #fff; }
.consent-banner button[data-consent="reject"] { background: transparent; color: #eef2f5; border: 1px solid rgba(255,255,255,.4); }
@media (min-width: 560px) {
  .consent-banner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
  .consent-banner .consent-actions { margin-top: 0; flex-shrink: 0; }
}

/* Footer */
.site-footer { margin-top: var(--section); background: var(--brand-dark); color: var(--brand-tint); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; padding-block: 32px; }
.footer-name { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.3; color: #fff; }
.footer-note { margin: 0; font-size: 15px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 24px; align-content: flex-start; }
.footer-nav a { padding: 10px 0; color: #fff; }
.footer-nav a:hover { color: #fff; }

/* Category intro (content/<category>/_index.md), and tables in article bodies,
   ruled in Tufte's style: one rule above, one under the header, one below, and
   no vertical lines, boxes or shading. Numbers line up in fixed-width digits. */
.category-intro { margin: 0 0 1.5rem; }
/* The intro's text and map keep to the reading width; a table may use the page's
   full width, so a wide one wraps less on a large screen. */
.category-intro > * { max-width: var(--maxw); }
.category-intro > table { max-width: none; }
/* The Travel map is an <object>, not an <img>, so that the names on it can be
   links. It shrinks to fit the column, as an image does. */
.article-body .travel-map { display: block; width: 100%; height: auto; margin: 1.25rem 0 1em; border-radius: var(--radius); }
.article-body table { width: 100%; border-collapse: collapse; margin: 1rem 0 0.4rem; font-size: 0.95rem;
  font-variant-numeric: tabular-nums lining-nums; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.article-body th, .article-body td { padding: 0.3rem 0.6rem 0.3rem 0; text-align: left; vertical-align: baseline; border: 0; }
.article-body thead th { font-weight: 600; border-bottom: 1px solid var(--ink-soft); }
.article-body td:last-child, .article-body th:last-child { padding-right: 0; }
.article-body .table-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.4rem; }
/* Numbers and ranges such as "£70–120" stay on one line. Markdown marks the
   right-aligned number columns with an inline text-align style. */
.article-body td[style*="right"] { white-space: nowrap; }
/* On a phone a wide table scrolls sideways in its own box, not the whole page. */
@media (max-width: 640px) {
  .article-body table { display: block; overflow-x: auto; }
}

/* A spoiler in an article (<span class="spoiler" tabindex="0">) is a black bar
   until the reader clicks or taps it: tabindex lets the click give it focus, and
   focus shows the text. Selecting the text leaves the bar black. */
.spoiler { background: var(--ink); color: var(--ink); border-radius: 3px; padding: 0 0.2em; cursor: pointer; }
.spoiler::selection { background: var(--ink); color: var(--ink); }
.spoiler:focus { background: var(--bg-soft); cursor: auto; }
.spoiler:focus::selection { background: var(--brand); color: var(--bg); }