/*
  Style: Bin Colours ("Accessible brights"), from the website design hand-off.
  Full-bleed colour blocks in the bin colours, very large heavy Bricolage Grotesque type,
  thin rules, no shadows. Light only: it sets every token site.css changes for dark mode.
  To use it, copy this file over /assets/theme.css.

  Colours are the hand-off's accessible values (green #12804A and red #D33A1E, not the
  reference drawing's lighter ones). Contrast is checked by tools/check_site_contrast.py:
  white on blue #2550E6 6.6:1, green 5.0:1, purple #7B3FE4 5.5:1, red 4.7:1, brown 5.9:1,
  black 18:1; #161616 on yellow #FFD23F 13:1 and on grey #ECEBE6 15:1.
*/
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/BricolageGrotesque-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/BricolageGrotesque-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/BricolageGrotesque-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/BricolageGrotesque-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: light;
  --bc-blue: #2550E6;
  --bc-green: #12804A;
  --bc-black: #161616;
  --bc-yellow: #FFD23F;
  --bc-purple: #7B3FE4;
  --bc-red: #D33A1E;
  --bc-brown: #8A5A2B;
  --bc-grey: #ECEBE6;

  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text: #161616;
  --color-muted: #555555;
  --color-line: #ECEBE6;
  --color-accent: #161616;
  --color-accent-soft: #ECEBE6;
  --color-on-accent: #FFFFFF;
  --color-focus: #161616;
  --color-link: #2550E6;
  --color-link-hover: #161616;
  --color-rule: #161616;
  --color-outline: #161616;
  --color-button-bg: #FFFFFF;
  --color-button-text: #2550E6;
  --color-button-border: #FFFFFF;
  --color-panel-bg: #FFD23F;
  --color-panel-link: #161616;
  --color-footer-bg: #161616;
  --color-footer-text: #BBBBBB;
  --color-footer-head: #FFD23F;
  --color-footer-link: #FFFFFF;
  --color-header-bg: #FFFFFF;
  --color-header-text: #161616;
  --color-field-bg: #FFFFFF;
  --color-field-text: #161616;
  --color-placeholder: #666666;
  --color-dark: #161616;
  --color-on-dark: #FFFFFF;
  --color-chip-bg: transparent;
  --color-chip-text: #161616;
  --color-chip-on-bg: #161616;
  --color-chip-on-text: #FFFFFF;
  --color-flag-bg: #FFD23F;
  --color-flag-text: #161616;
  --color-notice-bg: #FFD23F;
  --color-notice-text: #161616;

  --tone-recycling-bg: #2550E6; --tone-recycling-fg: #FFFFFF; --tone-recycling-dot: #2550E6;
  --tone-food-bg: #12804A;      --tone-food-fg: #FFFFFF;      --tone-food-dot: #12804A;
  --tone-garden-bg: #8A5A2B;    --tone-garden-fg: #FFFFFF;    --tone-garden-dot: #8A5A2B;
  --tone-general-bg: #161616;   --tone-general-fg: #FFFFFF;   --tone-general-dot: #161616;
  --tone-dropoff-bg: #7B3FE4;   --tone-dropoff-fg: #FFFFFF;   --tone-dropoff-dot: #7B3FE4;
  --tone-centre-bg: #7B3FE4;    --tone-centre-fg: #FFFFFF;    --tone-centre-dot: #7B3FE4;
  --tone-collect-bg: #7B3FE4;   --tone-collect-fg: #FFFFFF;   --tone-collect-dot: #7B3FE4;
  --tone-hazard-bg: #D33A1E;    --tone-hazard-fg: #FFFFFF;    --tone-hazard-dot: #FFFFFF;
  --tone-mixed-bg: #FFD23F;     --tone-mixed-fg: #161616;     --tone-mixed-dot: #161616;
  --tone-none-bg: #ECEBE6;      --tone-none-fg: #161616;      --tone-none-dot: #161616;
  /* Wordmark on each tone (docs/BRAND.md, "Wordmark on bin colours"): white where white reaches 3:1 on the
     field, otherwise #161616. Yellow and grey keep the core pairing (#161616). */
  --tone-recycling-wm: #FFFFFF; --tone-food-wm: #FFFFFF; --tone-garden-wm: #FFFFFF; --tone-general-wm: #FFFFFF;
  --tone-dropoff-wm: #FFFFFF; --tone-centre-wm: #FFFFFF; --tone-collect-wm: #FFFFFF; --tone-hazard-wm: #FFFFFF;
  --tone-mixed-wm: #161616; --tone-none-wm: #161616;

  --font-body: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --weight-body: 500;
  --weight-strong: 600;
  --weight-heading: 800;
  --text-md: 1.1875rem;
  --text-lg: 1.625rem;
  --text-xl: 2.5rem;
  --text-2xl: 3rem;
  --text-hero: clamp(3rem, 9.5vw, 7rem);
  --text-display: clamp(2.5rem, 8vw, 5.5rem);
  --text-mega: clamp(3rem, 9vw, 10rem);
  --text-tile: clamp(1.75rem, 3vw, 2.5rem);
  --leading-body: 1.45;
  --leading-heading: 0.9;
  --tracking-heading: -0.045em;

  --gutter: 16px;
  --gutter-wide: 56px;
  --section-pad: 40px;
  --grid-gap: 0px;

  --radius-button: 32px;
  --radius-card: 0px;
  --radius-field: 38px;
  --radius-pill: 22px;
  --radius-tile: 0px;
  --border-strong: 2px;
  --border-card: 0px;
  --border-chip: 2px;
  --rule-width: 0px;
  --link-underline: 2px;
  --link-offset: 3px;
  --shadow-card: none;
  --shadow-button: none;
  --shadow-button-hover: none;
  --shadow-icon: none;
  --shadow-dialog: none;
  --width-page: 1440px;
  --width-bar: none;

  /* Explore map: pins in the bin and route colours with a white ring (hand-off 05). */
  --map-style: "bin-colours";
  --map-pin-hwrc: #12804A;         --map-pin-hwrc-on: #FFFFFF;
  --map-pin-supermarket: #2550E6;  --map-pin-supermarket-on: #FFFFFF;
  --map-pin-retailer: #7B3FE4;     --map-pin-retailer-on: #FFFFFF;
  --map-pin-bring-bank: #8A5A2B;   --map-pin-bring-bank-on: #FFFFFF;
  --map-pin-charity-shop: #FFD23F; --map-pin-charity-shop-on: #161616;
  --map-pin-pharmacy: #161616;     --map-pin-pharmacy-on: #FFFFFF;
  --map-pin-parcel-shop: #FFFFFF;  --map-pin-parcel-shop-on: #161616;
  --map-pin-other: #ECEBE6;        --map-pin-other-on: #161616;
  --map-pin-ring: #FFFFFF;
  --map-pin-ring-width: 3;
  --map-pin-edge: #161616;
  --map-pin-shadow: soft;
  --map-pin-shadow-colour: rgba(0, 0, 0, 0.35);
  --color-map-legend-bg: #FFFFFF;
  --color-map-legend-text: #161616;
  --color-map-info-bg: #2550E6;
  --color-map-info-text: #FFFFFF;
  --color-map-dir-bg: #FFFFFF;
  --color-map-dir-text: #2550E6;
  --map-frame-border: 0;
  --map-frame-radius: 0;
  --map-frame-shadow: none;
  --map-info-border: 0;
  --map-info-radius: 0;
  --map-info-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  --map-height: 360px;
  --map-height-wide: 640px;
}

/* Visually hidden in this style only (the heading or label stays for screen readers). */
.bins--home .bins__head h2, .hero .chips-label, .teaser .chips-label, .search-head h1 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero .label, .teaser .label, .app-section .label { display: none; }

/* ----- Header (84px; sits on the colour of the section below it) ----- */
.site-header { border-bottom: 0; }
.site-header__inner { min-height: 72px; }
/* The wordmark (docs/BRAND.md): the outlined SVG; its height follows this font size. */
.brand { font-size: 1.625rem; line-height: 1; }
.site-nav a { font-size: 1.0625rem; font-weight: 600; }
.site-nav a[aria-current="page"] { font-weight: 800; }
.council-chip { padding: 0 20px; font-weight: 700; }
.page-home .site-header, .page-bindays .site-header, .page-app .site-header { --color-header-bg: var(--bc-yellow); }
.page-item .site-header { --color-header-bg: var(--tbg); --color-header-text: var(--tfg); --color-brand: var(--twm); --color-focus: var(--tfg); }
.page-explore .site-header, .page-prose .site-header, .page-az .site-header { border-bottom: 2px solid var(--bc-black); }
.page-item[data-hazard="1"] .site-header { --color-header-bg: var(--bc-red); --color-header-text: #FFFFFF; --color-brand: var(--tone-hazard-wm); --color-focus: #FFFFFF; }
@media (min-width: 1024px) {
  .site-header__inner { min-height: 84px; padding-top: 0; padding-bottom: 0; column-gap: 40px; }
  .brand { margin-right: 0; }
  .site-nav { margin-left: 12px; margin-right: auto; }
  .site-nav ul { column-gap: 30px; }
}

/* ----- One side gutter for every block -----
   Every block's left and right padding is var(--gutter): 16px, and the wide 56px from 1024px, the
   same as the header, footer and .wrap. So all content lines up under the wordmark at every width.
   Rounded boxes (pills, cards, the search field) keep their own inner padding. */
@media (min-width: 1024px) { :root { --gutter: var(--gutter-wide); } }
/* Wider than the 1440px page: colour blocks still run edge to edge, but every block's text starts on the
   same line as the header and footer. --edge is the distance from the screen edge to that line (the gutter,
   plus half the space outside the page); site.js sets --vw to the window width without the scrollbar. */
:root { --edge: var(--gutter); }
@media (min-width: 1441px) { :root { --edge: calc((var(--vw, 100vw) - var(--width-page)) / 2 + var(--gutter)); } }
/* Prose pages (privacy, terms, support, 404): the column lines up with the header, not centred. */
main:not(.page) { margin-left: max(0px, calc((100% - var(--width-page)) / 2)); padding-left: var(--gutter); padding-right: var(--gutter); }

/* ----- Controls ----- */
.btn { min-height: 56px; padding: 0 28px; background: var(--bc-black); border-color: var(--bc-black); color: #FFFFFF; font-weight: 800; font-size: 1.125rem; gap: 10px; }
.btn:hover { background: #2E2E2E; color: #FFFFFF; }
.btn:active, .pill:active { transform: scale(0.98); }
.btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.btn--outline:hover { background: rgba(0, 0, 0, 0.08); color: inherit; }
.btn--small { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; font-weight: 700; border-radius: 22px; }
/* Big buttons (hand-off: 64px, 20px 800, icon after the text). */
.cant-find .btn, .teaser .btn, .app-section .store-button { min-height: 64px; padding: 0 30px; font-size: 1.25rem; }
.pill { min-height: 44px; padding: 0 20px; font-weight: 700; font-size: 1rem; }
.pill:hover { background: rgba(0, 0, 0, 0.08); text-decoration: none; }
.search-form { border: 0; border-radius: 38px; padding: 10px 10px 10px 28px; gap: 14px; }
.search-form__icon svg { width: 28px; height: 28px; }
.search-form input { min-height: 56px; font-size: 1.25rem; font-weight: 600; }
.search-form input::placeholder { font-weight: 600; }
.search-form .btn { min-height: 56px; padding: 0 26px; font-size: 1.125rem; }
.tag { background: transparent; color: inherit; border: 2px solid currentColor; }
.tag::before { background: currentColor; }
.num-list > li::before { background: transparent; color: inherit; font-weight: 800; }
.label { font-weight: 800; }

/* ----- Home ----- */
.hero { background: var(--bc-yellow); color: var(--bc-black); }
main.page > .hero { padding-top: 24px; padding-bottom: 40px; }
.hero h1 { line-height: 0.86; letter-spacing: -0.045em; margin-bottom: 28px; }
.hero .lead { font-size: clamp(1.1875rem, 2vw, 1.375rem); font-weight: 500; line-height: 1.45; max-width: 620px; margin-bottom: 0; }
.hero__aside { display: none; }
.hero .chips { margin: 16px 0 0; gap: 8px; }
.hero .pill { min-height: 40px; font-size: 0.9375rem; }
@media (min-width: 1024px) {
  main.page > .hero { padding-top: 40px; padding-bottom: 64px; }
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "text search"; align-items: end; column-gap: 56px; }
}

/* Bins on home: full-bleed blocks straight under the hero; the line about them and the council
   button sit underneath (the "Your bins" heading is for screen readers). */
main.page > .bins { padding: 0; }
.bins--home { display: flex; flex-direction: column; background: var(--bc-grey); }
.bins--home.bins--bare { background: none; }  /* first visit: nothing under the bins yet, so no band */
.bins--home.bins--bare .bins__head { padding-top: 0; padding-bottom: 0; }  /* the row under the bands is grey, so it reads as part of them, not of the section below (Rory, 16 Oct) */
.bins--home .bins__head { order: 2; max-width: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 24px; padding-top: 20px; padding-bottom: 20px; width: 100%; }  /* a .wrap in a flex column: fill the width, or its auto margins centre it */
.bins--home .bins__head p { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.bins--home .bins__head .btn { min-height: 48px; margin-left: auto; }  /* the line starts at the gutter; the button sits at the right */
/* "Show N more bins" under the first three (Rory, 11 Oct); the extra bins fade in (off with reduced motion, below). */
.bins--home .bins__more { order: 1; padding: 20px var(--gutter) 0; }
.bins__more-btn { min-height: 48px; gap: 10px; }
.bins__more-icon { font-size: 1.375rem; line-height: 1; font-weight: 700; }
.bin-block.is-revealed { animation: bin-reveal 180ms ease both; }
@keyframes bin-reveal { from { opacity: 0; } }
/* From tablet width, "Show N more bins" and the line about the council's bins share one row under the blocks:
   the button on the left, the line on the right (Rory, 16 Oct). */
@media (min-width: 768px) {
  .bins--home { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .bins--home > .bin-blocks { order: 0; flex: 1 0 100%; }
  .bins--home .bins__more { flex: 0 0 auto; padding-bottom: 20px; }
  .bins--home .bins__head { flex: 1 1 0; width: auto; min-width: 0; justify-content: flex-end; text-align: right; }
  .bins--home:has(> .bins__more) .bins__head { padding-left: 0; }
}
.bin-blocks { max-width: none; width: 100%; margin: 0; padding: 0; gap: 0; grid-template-columns: 1fr !important; }
.bin-block { border-radius: 0; background: var(--bin, var(--tbg)); color: var(--on-bin, var(--tfg)); --color-focus: var(--on-bin, var(--tfg)); }
.bin-block__inner { max-width: 1440px; margin: 0 auto; padding: 24px var(--gutter); grid-template-columns: 1fr; }
.bin-block .swatch { display: none; }
.bin-block__name { font-size: clamp(2.25rem, 6vw, 4rem); line-height: 0.9; letter-spacing: -0.045em; color: inherit; }
.bin-block__meta { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.bin-block__acc { font-size: 1rem; font-weight: 500; max-width: 34em; }
@media (min-width: 1024px) {
  .bin-block__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 26px var(--gutter); }
  .bin-block__meta { text-align: right; align-items: flex-end; }
  .bins--home .bins__head { padding-left: var(--gutter); padding-right: var(--gutter); }
}

.steps { display: none; }

/* Map teaser: text on white, and a drawing of a map (the real map is on Explore). */
main.page > .teaser { padding: 0; }
.teaser .teaser__grid { max-width: none; padding: 0; gap: 0; }
.teaser__text { padding: 48px var(--gutter); display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.teaser__text > * { margin: 0; }
.teaser h2 { font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 0.9; letter-spacing: -0.045em; }
.teaser .lead { font-size: 1.25rem; font-weight: 500; line-height: 1.45; color: #444444; max-width: 640px; }
.teaser__takes { gap: 8px; margin: 0; }
.teaser__takes .take { min-height: 40px; padding: 0 20px; font-size: 0.9375rem; font-weight: 700; }
.teaser .btn { margin-top: 8px; }
.teaser__art { display: block; background: var(--bc-grey); height: 260px; overflow: hidden; }
.teaser__art svg { display: block; width: 100%; height: 100%; }
.teaser__art { position: relative; }
.teaser__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.teaser__credit { position: absolute; right: 0; bottom: 0; margin: 0; padding: 3px 8px; background: rgba(255, 255, 255, 0.9); color: #333333; font-size: 0.75rem; line-height: 1.3; }
.teaser__credit a { color: inherit; }
@media (min-width: 1024px) {
  .teaser__text { padding: 64px var(--gutter); }
  /* The map at its own size (the hand-off's 840 by about 530): its column stops at 840px, so on wide screens
     the text column grows instead of the map being enlarged. */
  /* Half and half on laptops, so the text column isn't squeezed; the map stops at 840px on wider screens. */
  .teaser__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* The map fills the section top to bottom, however tall the text beside it is: no white above or below it
     (Rory, 16 Oct). The picture is cropped to fit rather than setting the height itself. */
  .teaser__art { height: auto; min-height: 420px; max-height: none; align-self: stretch; }
  .teaser__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 1440px) { .teaser__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 840px); } }

/* The app: blue, with the app's own screenshots. */
.app-section { background: var(--bc-blue); color: #FFFFFF; --color-focus: #FFFFFF; }
main.page > .app-section { padding: 56px 0 72px; }
.app-section a { color: #FFFFFF; }
.app-section__text > * { margin-top: 0; }
.app-section h2 { font-size: clamp(3rem, 10vw, 7.5rem); line-height: 0.84; letter-spacing: -0.045em; margin-bottom: 24px; }
.app-section .lead { font-size: clamp(1.1875rem, 2vw, 1.375rem); font-weight: 500; line-height: 1.45; max-width: 540px; margin-bottom: 24px; }
.feature-list { list-style: none; padding: 0; margin: 0 0 28px; border-top: 2px solid rgba(255, 255, 255, 0.4); max-width: 620px; }
.feature-list li { margin: 0; padding: 12px 0; border-bottom: 2px solid rgba(255, 255, 255, 0.4); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.store-button { display: inline-flex; align-items: center; min-height: 64px; padding: 0 30px; margin: 0 0 16px; border-radius: 32px; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF; font-weight: 800; font-size: 1.25rem; }
.app-section__shots { gap: 20px; padding-bottom: 40px; }
.app-section__shots img { box-sizing: border-box; padding: 8px; border: 0; border-radius: 34px; background: var(--bc-black); }  /* a phone: a black bezel round the screen, so the rounded corners frame the screenshot instead of cutting off its clock and status icons (Rory, 16 Oct); on the home page's blue band it keeps the blue answer screen apart */
.app-section__shots img + img { transform: translateY(40px); }
@media (min-width: 1024px) {
  main.page > .app-section { padding: 72px 0; }
  .app-section__shots { gap: 28px; }
}
.good-to-know { background: var(--bc-grey); }

/* ----- Search ----- */
.search-head { background: #FFFFFF; }
main.page > .search-head { padding: 24px 0 40px; }
.search-form--big { max-width: none; border-radius: 0; padding: 0 0 14px; gap: 16px; border-bottom: 4px solid var(--bc-black); background: transparent; }
.search-form--big:focus-within { outline-offset: 6px; }
.search-form--big input { font-size: clamp(2.25rem, 7vw, 5.5rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; min-height: 1.2em; caret-color: var(--bc-blue); }
.search-form--big input::placeholder { font-weight: 800; color: #666666; }
.search-form--big .search-form__icon { display: none; }
.results-meta { font-size: 1.1875rem; font-weight: 600; margin: 22px 0 0; }
.filter-pills { gap: 8px; margin-top: 16px; }
.filter-pills .pill { min-height: 40px; font-size: 0.9375rem; background: var(--bc-grey); border-color: var(--bc-grey); color: var(--bc-black); }
.filter-pills .pill:hover { background: #D9D8D3; border-color: #D9D8D3; }
.filter-pills .pill.is-on { background: var(--bc-black); border-color: var(--bc-black); color: #FFFFFF; }
@media (min-width: 1024px) {
  .search-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
  .search-head .search-form { grid-column: 1 / -1; }
  .filter-pills { margin-top: 22px; justify-content: flex-end; }
}
main.page > .results { padding: 0; }
.results .wrap { max-width: none; padding: 0; }
.result-tile { min-height: 230px; padding: 32px var(--gutter); gap: 20px; border: 0; --color-focus: var(--tfg); }
.result-tile:focus-visible { outline-offset: -8px; }
.result-tile[data-tone="none"], .result-tile[data-tone="mixed"] { box-shadow: inset 0 0 0 2px var(--bc-black); }
.result-tile__top { gap: 12px; }
.result-tile__name { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 0.9; letter-spacing: -0.045em; }
.result-tile__arrow { width: 32px; height: 32px; }
.result-tile__bottom { gap: 4px; }
.result-tile__dest { font-size: 1.375rem; font-weight: 800; }
.result-tile__note { font-size: 1rem; }
.cant-find { background: var(--bc-yellow); color: var(--bc-black); }
main.page > .cant-find { padding: 40px 0; }
.cant-find h2 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 0.9; letter-spacing: -0.045em; }
.cant-find p { font-size: 1.1875rem; line-height: 1.45; }
.cant-find .btn-row { gap: 12px; }
@media (min-width: 1024px) {
  .cant-find .wrap { display: flex; align-items: center; gap: 24px; }
  .cant-find .wrap > * { margin: 0; }
  .cant-find h2 { flex: none; }
  .cant-find p:not(.btn-row) { flex: 1; }
  .cant-find .btn-row { flex: none; }
  .no-results .cant-find .wrap { flex-direction: column; align-items: flex-start; }
}
.no-results .cant-find h2 { font-size: clamp(3rem, 9vw, 6rem); }

/* ----- Item pages: the answer takes over the page in its colour ----- */
.page-item { --rule-c: rgba(255, 255, 255, 0.4); }
.page-item[data-tone="mixed"], .page-item[data-tone="none"] { --rule-c: rgba(22, 22, 22, 0.4); }
.item-hero { --color-focus: var(--tfg); }
main.page > .item-hero { padding-top: 24px; padding-bottom: 56px; }
.item-hero .breadcrumb ol { font-size: 0.875rem; font-weight: 600; margin-bottom: 18px; }
.item-hero h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 4px; }
.item-hero__aka { font-size: 1.125rem; font-weight: 500; margin: 0; }
/* The big verdict: 240px at most (140px below 1024px), smaller when its longest word (data-l) needs it,
   so that word always fits the column. */
.item-hero__main { container-type: inline-size; }
.item-hero__verdict {
  --mega-max: 8.75rem;
  font-size: var(--text-mega);
  font-size: min(var(--mega-max), calc(100cqi / (var(--L, 10) * 0.63)));
  line-height: 0.8; letter-spacing: -0.05em; margin: 18px 0 0; max-width: none;
}
.item-hero__verdict[data-l="4"] { --L: 4; }   .item-hero__verdict[data-l="5"] { --L: 5; }
.item-hero__verdict[data-l="6"] { --L: 6; }   .item-hero__verdict[data-l="7"] { --L: 7; }
.item-hero__verdict[data-l="8"] { --L: 8; }   .item-hero__verdict[data-l="9"] { --L: 9; }
.item-hero__verdict[data-l="10"] { --L: 10; } .item-hero__verdict[data-l="11"] { --L: 11; }
.item-hero__verdict[data-l="12"] { --L: 12; } .item-hero__verdict[data-l="13"] { --L: 13; }
.item-hero__verdict[data-l="14"] { --L: 14; } .item-hero__verdict[data-l="15"] { --L: 15; }
.item-hero__verdict[data-l="16"] { --L: 16; }
.item-hero__sub { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 600; margin: 18px 0 0; }
.breadcrumb a { color: inherit; }
@media (min-width: 1024px) {
  main.page > .item-hero { padding-top: 32px; padding-bottom: 72px; }
  .item-hero__verdict { --mega-max: 15rem; }
  .item-hero__side { padding-top: 120px; }
}

/* The council's answer, inside the coloured hero. */
.item-hero .council-answer { margin-top: 28px; }
.item-hero .council-prompt { background: transparent; color: inherit; border-radius: 0; padding: 20px 0 0; border-top: 2px solid var(--rule-c); }
.item-hero .council-prompt h2, .item-hero .answer-card__nation { font-size: 1.25rem; font-weight: 800; letter-spacing: 0; line-height: 1.2; margin: 0 0 8px; }
.item-hero .council-prompt p { font-size: 1.125rem; }
.item-hero .answer-card--council { background: transparent; color: inherit; padding: 20px 0 0; border-top: 2px solid var(--rule-c); border-radius: 0; }
.item-hero .answer-card__headline { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.3; letter-spacing: 0; max-width: none; margin-bottom: 12px; }
.item-hero .answer-card__note { font-size: 1.125rem; }
.item-hero .answer-card__also, .item-hero .answer-card__source { font-size: 0.875rem; }
.item-hero .answer-card .notice { background: var(--bc-yellow); color: var(--bc-black); border-radius: 18px; padding: 12px 18px; font-size: 1rem; font-weight: 600; }
.item-hero .tag { margin-bottom: 12px; }
.container-line { background: #FFFFFF; color: var(--bc-black); border-radius: 22px; padding: 10px 18px; font-size: 1rem; }
.container-line .swatch { border: 2px solid var(--bc-black); }
.council-answer .btn-row { margin: 20px 0 0; gap: 10px; color: inherit; }
.council-answer .btn, .item-hero .council-prompt .btn { min-height: 44px; padding: 0 20px; border-radius: 22px; font-size: 1rem; font-weight: 700; background: #FFFFFF; color: var(--bc-black); border-color: #FFFFFF; }
.council-answer .btn--outline { background: transparent; color: var(--tfg); border-color: var(--tfg); }
.page-item[data-tone="mixed"] .council-answer .btn:not(.btn--outline), .page-item[data-tone="none"] .council-answer .btn:not(.btn--outline),
.page-item[data-tone="mixed"] .council-prompt .btn, .page-item[data-tone="none"] .council-prompt .btn { background: var(--bc-black); color: #FFFFFF; border-color: var(--bc-black); }

/* How to prepare it: rule rows on the colour, then the deposit card. */
.item-hero .prep h2 { font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin: 0 0 12px; }
.num-list--big > li { font-size: 1.375rem; font-weight: 600; line-height: 1.3; padding: 18px 0 18px 46px; margin: 0; border-top: 2px solid var(--bc-black); }
.num-list--big > li:last-child { border-bottom: 2px solid var(--bc-black); }
.num-list--big > li::before { top: 18px; width: 28px; height: auto; justify-content: flex-start; color: inherit; font-size: 1em; font-weight: 600; line-height: 1.3; }
.item-hero .num-list--big > li, .schemes .num-list--big > li { border-color: var(--rule-c, rgba(255, 255, 255, 0.4)); }
.deposit-card { background: var(--bc-yellow); color: var(--bc-black); border-radius: 26px; padding: 26px 28px; margin-top: 28px; display: flex; flex-direction: column; gap: 8px; }
.deposit-card__label { font-size: 0.9375rem; font-weight: 700; }
.deposit-card__text { font-size: clamp(1.25rem, 2.5vw, 1.875rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }

/* Hazard banner: red, first under the header. */
.hazard-banner { --color-focus: #FFFFFF; }
main.page > .hazard-banner { padding-top: 16px; padding-bottom: 40px; }
.hazard-banner__label { color: #FFFFFF; font-size: 1.1875rem; font-weight: 700; gap: 10px; margin-bottom: 14px; }
.hazard-banner__label svg { width: 30px; height: 30px; }
.hazard-banner__text { font-size: clamp(2.5rem, 6.2vw, 5.5rem); line-height: 0.9; letter-spacing: -0.045em; max-width: 16ch; }
.hazard-banner__detail { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); font-weight: 500; line-height: 1.45; max-width: 420px; }
@media (min-width: 1024px) { main.page > .hazard-banner { padding-bottom: 48px; } }

/* National rules, below the hero (Rory, 14 Oct). Blocks run edge to edge and the text starts on the gutter line.
   When every card has the same colour the section takes it (data-tone on .nations), the cards sit on it, and thin
   rules split them. Otherwise each card keeps its own colour, side by side with no gaps. */
main.page > .nations { padding-bottom: 0; }
.nations .wrap { max-width: none; padding: 0; }
.nations h2, .nations .lead { padding: 0 var(--edge); }
.nations h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
.nations[data-tone] { background: var(--tbg); color: var(--tfg); --color-focus: var(--tfg); }
.nations[data-tone] .lead { color: inherit; }
.nation-grid { gap: 0; --nation-rule: 2px solid color-mix(in srgb, currentColor 35%, transparent); }
.answer-card { padding: 28px var(--gutter); --color-focus: var(--tfg); }
.nations[data-tone] [data-nations-all] .answer-card, .nations[data-tone] [data-nations-one] .answer-card { background: transparent; color: inherit; box-shadow: none; }
.nation-grid > .answer-card + .answer-card { border-top: var(--nation-rule); }
@media (min-width: 640px) {
  .nation-grid--2 > .answer-card + .answer-card, .nation-grid--4 > .answer-card:nth-child(2) { border-top: 0; border-left: var(--nation-rule); }
  .nation-grid--4 > .answer-card:nth-child(4) { border-left: var(--nation-rule); }
}
@media (min-width: 1024px) { .nation-grid--3 > .answer-card + .answer-card { border-top: 0; border-left: var(--nation-rule); } }
@media (min-width: 1280px) { .nation-grid--4 > .answer-card + .answer-card { border-top: 0; border-left: var(--nation-rule); } }
/* One block (a council's nation, or the same answer UK-wide): a readable line length, not the full width. */
.nation-grid--1 > .answer-card > * { max-width: 46rem; }
.answer-card__sources { gap: 6px; }
.nations-more { margin: 0; border-top: 2px solid rgba(22, 22, 22, 0.25); border-top: 2px solid color-mix(in srgb, currentColor 35%, transparent); }
.nations-more > summary { padding: 22px var(--edge); font-size: 1.25rem; font-weight: 800; min-height: 56px; }
.nations-more > .nation-grid { margin-top: 0; }
.answer-card__headline { font-size: 1.5rem; line-height: 1; letter-spacing: -0.03em; }
.answer-card__note { font-size: 1.125rem; }
.answer-card__also, .answer-card__source { font-size: 0.9375rem; }
.answer-card .notice { background: var(--bc-yellow); color: var(--bc-black); }
.nation-grid .answer-card[data-tone="mixed"], .nation-grid .answer-card[data-tone="none"] { box-shadow: inset 0 0 0 2px var(--bc-black); }

.schemes h2, .clarify h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
.related h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.schemes { background: var(--bc-purple); color: #FFFFFF; --color-focus: #FFFFFF; }
.schemes .lead { color: #FFFFFF; }
.scheme-grid { gap: 2px; }
.scheme-card { background: transparent; color: #FFFFFF; border-top: 2px solid rgba(255, 255, 255, 0.4); border-radius: 0; padding: 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.scheme-card > * { margin: 0; }
.scheme-card a { color: #FFFFFF; }
.scheme-card .muted { color: #FFFFFF; }
.scheme-card__kicker { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 1rem; font-weight: 700; }
.scheme-card h3 { font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.045em; line-height: 0.9; }
.scheme-card__cost { font-size: 1.0625rem; font-weight: 500; }
.scheme-card .num-list--big { margin-top: 6px; }
.scheme-card .btn { background: #FFFFFF; color: var(--bc-purple); border-color: #FFFFFF; min-height: 44px; }
@media (min-width: 640px) { .scheme-grid { column-gap: 56px; } }
.clarify { background: var(--bc-yellow); }
.item-foot { background: var(--bc-grey); }

@media (min-width: 1024px) {
  .answer-card { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* ----- Explore: the sidebar (yellow filters, count, list) beside the map ----- */
main.page > .explore-body { padding: 0; }
.explore-layout { max-width: none; padding: 0; gap: 0; }
.explore-side { background: var(--bc-yellow); color: var(--bc-black); padding: 24px var(--gutter); display: flex; flex-direction: column; gap: 16px; }
.explore-side > * { margin: 0; }
.explore-side h1 { font-size: clamp(2.5rem, 5vw, 3rem); line-height: 0.9; letter-spacing: -0.045em; }
.explore-side .lead { font-size: 1rem; font-weight: 500; }
.explore-side .area-card { background: #FFFFFF; border-radius: 22px; padding: 16px 20px; margin: 0; max-width: none; }
.explore-side .area-card .label { font-size: 0.8125rem; margin-bottom: 2px; }
.area-card { background: var(--bc-yellow); border-radius: 26px; padding: 24px 28px; }
.area-card__name { font-size: 1.375rem; line-height: 1.05; letter-spacing: -0.03em; }
.area-card .muted { color: var(--bc-black); }
.filters { background: transparent; border-radius: 0; padding: 0; }
.filter-group { margin-bottom: 16px; }
.filter-group .label, .filter-group legend.label { font-size: 0.9375rem; font-weight: 800; letter-spacing: 0; text-transform: none; margin-bottom: 10px; padding: 0; }
.filters .pill { min-height: 34px; padding: 0 14px; font-size: 0.875rem; }
.filters .pill.is-on[data-kind="hwrc"] { background: var(--bc-green); border-color: var(--bc-green); color: #FFFFFF; }
.filters .pill.is-on[data-kind="supermarket"], .filters .pill.is-on[data-kind="bring_bank"] { background: var(--bc-blue); border-color: var(--bc-blue); color: #FFFFFF; }
.filter-group select { min-height: 48px; border-radius: 24px; padding: 0 16px; border: 2px solid var(--bc-black); font-size: 1rem; font-weight: 600; }
.filters .link-button { font-weight: 700; font-size: 0.9375rem; text-underline-offset: 4px; }
.explore-layout > .count-row { padding: 18px var(--gutter); font-size: 1.375rem; font-weight: 800; line-height: 1.2; border-bottom: 2px solid var(--bc-black); }
.explore-layout > .count-row:empty { display: none; }
.explore-map { margin: 0; }
.explore-map__status { padding: 0 var(--gutter); }
.place-list { gap: 2px; }
/* Each card is its map pin's colour (the --map-pin-* tokens above, the same as the key under the map). */
.place-card { --pc-bg: var(--map-pin-other); --pc-on: var(--map-pin-other-on); border-radius: 0; padding: 20px var(--gutter); background: var(--pc-bg); color: var(--pc-on); border: 0; --color-focus: var(--pc-on); }
.place-card[data-kind="hwrc"] { --pc-bg: var(--map-pin-hwrc); --pc-on: var(--map-pin-hwrc-on); }
.place-card[data-kind="supermarket"] { --pc-bg: var(--map-pin-supermarket); --pc-on: var(--map-pin-supermarket-on); }
.place-card[data-kind="retailer"] { --pc-bg: var(--map-pin-retailer); --pc-on: var(--map-pin-retailer-on); }
.place-card[data-kind="bring_bank"] { --pc-bg: var(--map-pin-bring-bank); --pc-on: var(--map-pin-bring-bank-on); }
.place-card[data-kind="charity_shop"] { --pc-bg: var(--map-pin-charity-shop); --pc-on: var(--map-pin-charity-shop-on); }
.place-card[data-kind="pharmacy"] { --pc-bg: var(--map-pin-pharmacy); --pc-on: var(--map-pin-pharmacy-on); }
.place-card[data-kind="parcel_shop"] { --pc-bg: var(--map-pin-parcel-shop); --pc-on: var(--map-pin-parcel-shop-on); }
/* Light cards (parcel shops, other drop-off points) get an outline so they don't melt into the page. */
.place-card[data-kind="parcel_shop"], .place-card[data-kind="other"] { box-shadow: inset 0 0 0 2px var(--bc-black); }
.place-card a { color: var(--pc-on); }
/* The card's own buttons only (its links row): the "Help fill a gap" box inside a card is white and keeps the
   site's own buttons, so its answers stay visible and a ticked one shows as ticked. */
.place-card__links .btn { background: var(--pc-on); color: var(--pc-bg); border-color: var(--pc-on); }
.place-card__links .btn--outline { background: transparent; color: var(--pc-on) !important; border-color: var(--pc-on); }
.place-card__name { font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.05; }
.place-card__type { color: var(--pc-on); font-size: 1rem; font-weight: 500; margin-top: 6px; }
.place-card p { font-size: 0.9375rem; }
.place-card__closures strong { font-weight: 800; }
/* The nearest store taking part, on a scheme card: a rounded block in the store kind's colour. */
.scheme-card .scheme-near__card { border-radius: 20px; padding: 16px 20px; }
.answer-places .osm-credit { padding: 0; }
.empty-card { background: var(--bc-grey); border-radius: 0; }
.osm-credit { color: #555555; padding: 0 var(--gutter); }
@media (min-width: 1024px) {
  .explore-layout { grid-template-columns: 460px minmax(0, 1fr); }
  .explore-side { padding: 24px var(--gutter); }
  .explore-layout > .count-row { padding: 18px var(--gutter); }
  .place-card { padding: 20px var(--gutter); }
  .osm-credit { padding: 0 var(--gutter); }
  /* The map fills the rest of the screen beside the sidebar, and stays put while the list scrolls. */
  .explore-layout > .explore-map { height: 100vh; border-left: 2px solid var(--bc-black); }
  .explore-map__panel { display: flex; flex-direction: column; height: 100%; }
  .explore-map__frame { flex: 1; min-height: 0; }
  .explore-map__canvas { height: 100%; }
  .explore-map__status { padding: 8px var(--gutter) 0; }
  /* With no map: the sidebar and the list use the full width, the list in three columns. */
  .explore-layout:has(> .explore-map[hidden]) .explore-side { padding: 32px var(--gutter); }
  .explore-layout:has(> .explore-map[hidden]) > .count-row { padding: 18px var(--gutter); }
  .explore-layout:has(> .explore-map[hidden]) .place-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .explore-layout:has(> .explore-map[hidden]) .osm-credit { padding: 0 var(--gutter); }
  .explore-layout:has(> .explore-map[hidden]) .explore-side .area-card { max-width: 560px; }
}

/* ----- Bin days ----- */
.bindays-head { background: var(--bc-yellow); }
main.page > .bindays-head { padding: 24px 0 40px; }
.bindays-head h1 { font-size: clamp(3.5rem, 11vw, 8rem); line-height: 0.84; margin-bottom: 14px; }
.bindays-head .lead { font-size: 1.25rem; font-weight: 600; max-width: 34em; }
.bindays-head .area-card { background: #FFFFFF; min-width: min(360px, 100%); }
@media (min-width: 1024px) {
  main.page > .bindays-head { padding-bottom: 56px; }
  .bindays-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
  .bindays-head h1, .bindays-head .lead { grid-column: 1; }
  .bindays-head .lead { margin-bottom: 0; }
  .bindays-head [data-bindays-council] { grid-column: 2; grid-row: 1 / span 2; }
  .bindays-head .area-card { margin-top: 0; }
}
.bins--days .bins__head { padding: 40px var(--gutter); }
.bins--days .bins__head h2 { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 0.9; letter-spacing: -0.045em; margin: 0 0 14px; }
.bins--days .bins__head p { font-size: 1.0625rem; }
.bins__app { border-top: 2px solid var(--bc-black); padding-top: 28px; margin-top: 32px; max-width: 640px; }
/* The bins sit straight under their heading; the app reminder comes after them (side by side from 1024px). */
.bins--days > .bins__app { margin: 40px var(--gutter); }
@media (max-width: 1023px) { .bins--days > .bins__list:has(.bin-blocks:empty) + .bins__app { margin-top: 0; } }
.bins__app h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 0.95; letter-spacing: -0.045em; margin-bottom: 12px; }
.bins__app .store-button { border-color: var(--bc-black); color: var(--bc-black); margin-top: 8px; }
.bins__app .muted { color: #555555; }
.bins--days .bin-block__inner { padding: 22px var(--gutter); }
.bins--days .bin-block__name { font-size: clamp(2rem, 4vw, 2.5rem); }
.bins--days .bin-block__meta { font-size: 1rem; text-align: left; align-items: flex-start; }
@media (min-width: 1024px) {
  .bins--days {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start;
    grid-template-areas: "head list" "app list"; grid-template-rows: auto 1fr;
  }
  .bins--days:has(.bin-blocks:empty) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "app"; grid-template-rows: auto; }
  .bins--days .bins__head { grid-area: head; padding: 48px var(--gutter) 0; }
  .bins--days > .bins__list { grid-area: list; }
  .bins--days > .bins__app { grid-area: app; margin: 32px var(--gutter) 48px; }
  .bins--days .bin-block__inner { display: block; padding: 22px var(--gutter); }
  .bins--days .bin-block__meta { margin-top: 6px; text-align: left; align-items: flex-start; }
}

/* Bin days: the calendar (hand-off: cells at least 104px tall, 18px radius), the black next-collection
   block and the bins with their switches, stacked full-bleed on the right. */
.bindays-address { font-size: 1.25rem; font-weight: 600; }
.bindays-address .linklike { font-weight: 600; }
.cal__title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.045em; font-weight: 800; }
.cal__day.is-collection { box-shadow: inset 0 0 0 2px var(--bc-black); }
.cal__day.is-today { background: var(--bc-grey); }
.cal__day.is-next { background: var(--bc-black); }
.bindays-next { padding: 36px var(--gutter) 40px; }
.bindays-next__date { letter-spacing: -0.045em; }
.bins__list .bin-blocks { padding: 0; }
@media (min-width: 1024px) {
  .cal__day, .cal__blank { height: 104px; border-radius: 18px; padding: 10px 12px; }
  .cal__num { font-size: 1.25rem; }
  .cal__dot { width: 16px; height: 16px; }
  .cal__dots { gap: 5px; margin-top: 10px; }
  .bins--days .bins__head { padding-bottom: 48px; }
  .bindays-next { padding: 36px 40px 40px; }
  .bins--days .bin-block--switch .bin-block__inner { display: flex; padding: 22px 40px; }
  .bindays-source { padding: 16px 40px; }
}

/* ----- Store buttons and the app page ----- */
.store-buttons { gap: 12px; margin: 8px 0 20px; }
.store-btn { min-height: 64px; padding: 0 28px; font-size: 1.125rem; gap: 10px; }
.store-btn .icon { width: 22px; height: 22px; flex: none; }
.app-section .store-btn--play { background: #FFFFFF; border-color: #FFFFFF; color: var(--bc-blue); }
.app-section .store-btn--play:hover { background: #E9EDFD; color: var(--bc-blue); }
.app-section .store-btn--ios { border-color: #FFFFFF; color: #FFFFFF; }
.app-section__more { margin: 0; font-size: 1.125rem; font-weight: 700; }
.bins__app .store-buttons { margin-top: 8px; }
/* "Get the app" card and the Android banner: grey, like the item page's foot, with the black buttons. */
.get-app, .app-banner { background: var(--bc-grey); color: var(--bc-black); }
main.page > .get-app { padding: 32px 0 36px; }
.get-app h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1; letter-spacing: -0.03em; }
.get-app__text p { font-size: 1.125rem; }
.get-app--box { padding: 24px; }
.get-app--box h2 { margin-top: 0; font-size: var(--text-lg); }
.get-app--box .store-btn { min-height: 56px; padding: 0 22px; font-size: 1rem; }
.app-banner { border-bottom: 0; }
.app-banner__text { font-size: 1rem; line-height: 1.3; }
.app-banner__get { min-height: 44px; }
.app-banner__close:hover { background: rgba(0, 0, 0, 0.08); }

.app-hero { background: var(--bc-yellow); color: var(--bc-black); }
main.page > .app-hero { padding: 24px 0 56px; }
.app-hero h1 { font-size: clamp(3.5rem, 11vw, 8rem); line-height: 0.84; letter-spacing: -0.045em; margin: 0 0 24px; }
.app-hero .lead { font-size: clamp(1.1875rem, 2vw, 1.375rem); font-weight: 500; line-height: 1.45; max-width: 560px; margin: 0 0 16px; }
.app-hero__small { font-size: 1rem; font-weight: 600; margin: 0; }
.app-hero__small a { color: inherit; }

.app-hero--ios h1 { font-size: clamp(3rem, 9vw, 6.5rem); }
@media (min-width: 1024px) { main.page > .app-hero { padding: 40px 0 88px; } }

main.page > .app-features { padding: 0; }
.feature-block { color: #FFFFFF; }
.feature-block--blue { background: var(--bc-blue); }
.feature-block--green { background: var(--bc-green); }
.feature-block--black { background: var(--bc-black); }
.feature-block--purple { background: var(--bc-purple); }
.feature-block--yellow { background: var(--bc-yellow); color: var(--bc-black); }
.feature-block__inner { padding: 28px var(--gutter); display: grid; gap: 8px; }
.feature-block__name { font-size: clamp(2.25rem, 6vw, 4rem); line-height: 0.9; letter-spacing: -0.045em; font-weight: 800; color: inherit; }
.feature-block__text { font-size: 1.125rem; font-weight: 600; line-height: 1.4; max-width: 34em; }
@media (min-width: 1024px) {
  .feature-block__inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 32px var(--gutter); }
  .feature-block__text { text-align: right; max-width: 30em; }
}
main.page > .app-more { padding: 48px 0 64px; }
.app-more h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 0.9; letter-spacing: -0.045em; margin: 0 0 14px; }
.app-more p { font-size: 1.125rem; max-width: 40em; margin: 0; }

/* ----- A to Z and prose pages ----- */
/* "On this page" beside the text, its first line level with the top of the page title's letters (Rory, 13 Oct). */
.toc { padding-top: 0; }
.toc__title { font-size: 0.9375rem; font-weight: 800; letter-spacing: 0; text-transform: none; }
.toc__list { counter-reset: none; }
.toc__list a { display: block; padding: 4px 0; font-size: 1rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.toc__list a:hover, .toc__list a:focus-visible { text-decoration: underline; }

.page-head h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 0.9; }
.az h2 { font-size: 2.25rem; }
.panel { border-radius: 26px; }
main:not(.page) h1 { font-size: clamp(2.5rem, 7vw, 4rem); line-height: 0.92; }
main:not(.page) h2 { font-size: 1.625rem; line-height: 1; }

/* ----- Picker ----- */
.picker { border-radius: 26px; border: 0; }
.picker input { border-radius: 28px; padding: 0 20px; border-width: 2px; }
.picker__option[aria-selected="true"] { background: var(--bc-black); color: #FFFFFF; }
.picker__option:hover { background: var(--bc-yellow); color: var(--bc-black); }

/* ----- Footer (black; four columns; a small-print row under a 2px rule) ----- */
.site-footer { border-top: 0; font-size: 1rem; --color-focus: #FFFFFF; }
.site-footer__inner { row-gap: 40px; column-gap: 40px; padding-top: 56px; padding-bottom: 36px; }
.site-footer h2 { font-size: 0.875rem; font-weight: 700; color: var(--bc-yellow); letter-spacing: 0; text-transform: none; margin-bottom: 12px; }
.site-footer li + li { margin-top: 12px; }
.site-footer .footer-col a { font-size: 1rem; font-weight: 500; }
.footer-brand p:not(.footer-logo) { font-size: 1rem; line-height: 1.5; color: #BBBBBB; max-width: 360px; }
.footer-brand .footer-independent { color: #FFFFFF; font-weight: 600; margin-top: 12px; }
.footer-logo { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; color: #FFFFFF !important; margin-bottom: 16px; }
.footer-small { border-top: 2px solid #333333; padding-top: 22px; }
.footer-small p { color: #999999; font-size: 0.8125rem; margin-bottom: 4px; }
.footer-small a { color: #FFFFFF; }
@media (min-width: 1024px) {
  .site-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; padding-top: 64px; row-gap: 48px; }
}

@media (max-width: 639px) {
  .search-form:not(.search-form--big) { padding-left: 18px; }
  .search-form:not(.search-form--big) input { font-size: 1.0625rem; }
  .result-tile { min-height: 168px; padding: 24px var(--gutter); }
  .search-form .btn { padding: 0 18px; min-height: 48px; font-size: 1rem; }
  .search-form__icon svg { width: 24px; height: 24px; }
}

/* Links and text buttons on yellow stay ink: blue on yellow is only 4.3:1. */
.hero a, .cant-find a:not(.btn), .clarify a:not(.pill), .filters a, .filters .link-button, .explore-side a:not(.btn),
.bindays-head a:not(.btn), .area-card a:not(.btn), .deposit-card a { color: #161616; }
.bindays-head .area-card a:not(.btn), .explore-side .area-card a:not(.btn) { color: #2550E6; }
.bin-block.is-light { box-shadow: inset 0 0 0 2px #161616; }

/* Display headings never break inside a word ("Recycli-ng"); the sizes above keep long words on one line. */
.item-hero__verdict, .hazard-banner__text, .bin-block__name, .app-section h2, .cant-find h2, .result-tile__name, .teaser h2 { overflow-wrap: normal; word-break: normal; }

/* Explore map key: on white, flush with the list */
.map-legend { border-radius: 0; margin: 0; padding: 12px var(--gutter); }


/* ----- Hover and focus (per the design hand-off) -----
   Pills and buttons change shade and press to 0.98; full-colour tiles lift their arrow 2px.
   No card lift, shadows or tile scaling. 180ms ease; all of it is off with reduced motion (below).
   Every hover colour is checked by tools/check_site_contrast.py. */
.btn, .pill, .council-chip, .nav-toggle, .result-tile, .place-card, .nation-grid .answer-card, .area-card,
.site-nav a, .site-footer .footer-col a, .breadcrumb a, .picker__option {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
    transform 180ms ease, background-size 180ms ease;
}

/* Full-colour tiles lift their arrow 2px (also when focused from the keyboard). */
.result-tile__arrow { transition: transform 180ms ease; }
.result-tile:hover .result-tile__arrow, .result-tile:focus-visible .result-tile__arrow { transform: translateY(-2px); }
.result-tile:hover .result-tile__name { text-decoration: none; }

/* Buttons and chips change shade. Black buttons lighten (#2E2E2E, above). White buttons on a colour
   turn grey with ink text; outline buttons and pills take a darker wash (a lighter one on black). */
.btn--outline:hover { background: rgba(0, 0, 0, 0.12); }
.place-card:not([data-kind="hwrc"]):not([data-kind="supermarket"]):not([data-kind="bring_bank"]) .place-card__links .btn--outline:hover { background: rgba(255, 255, 255, 0.16); }
.council-answer .btn:not(.btn--outline):hover, .scheme-card .btn:hover, .place-card__links .btn:not(.btn--outline):hover {
  background: #ECEBE6; border-color: #ECEBE6; color: #161616;
}
.page-item[data-tone="mixed"] .council-answer .btn:not(.btn--outline):hover,
.page-item[data-tone="none"] .council-answer .btn:not(.btn--outline):hover { background: #2E2E2E; border-color: #2E2E2E; color: #FFFFFF; }
.pill.is-on:hover, .pill[aria-pressed="true"]:hover { background: #2E2E2E; border-color: #2E2E2E; color: #FFFFFF; }
/* Header chips fill with their text colour (the same pair of colours, swapped). */
.council-chip:hover, .nav-toggle:hover { background: var(--color-header-text); color: var(--color-header-bg); }

/* Navigation and footer links: an underline that slides in from the left. The current page keeps
   its underline, and links inside sentences keep theirs all the time. */
.site-nav a, .site-footer .footer-col a, .breadcrumb a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
}
.site-nav a:hover, .site-nav a:focus-visible, .site-footer .footer-col a:hover, .site-footer .footer-col a:focus-visible,
.breadcrumb a:hover, .breadcrumb a:focus-visible { text-decoration: none; background-size: 100% 2px; }
.site-nav a[aria-current="page"] { background: none; text-decoration: underline; }

/* A visible keyboard focus ring everywhere: 3px, in black on light colours and white on dark (--color-focus). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-focus); outline-offset: 3px;
}
.search-form input:focus-visible { outline: none; }
.result-tile:focus-visible { outline-offset: -8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn:active, .pill:active, .result-tile:hover .result-tile__arrow, .result-tile:focus-visible .result-tile__arrow { transform: none; }
}

/* ----- Wider than the page (1441px and up): line every block's text up with the header ----- */
@media (min-width: 1441px) {
  /* Home: the bins line under the blocks, and the map teaser's text (its map still runs to the edge). */
  .bins--home .bins__head, .bins--home .bins__more { padding-left: var(--edge); padding-right: var(--edge); }
  .teaser__text { padding-left: var(--edge); }

  /* Search results stay inside the page. National rules run edge to edge, the outer cards' text on the edge line. */
  .results .wrap { max-width: var(--width-page); margin-left: auto; margin-right: auto; }
  .nation-grid > .answer-card:first-child { padding-left: var(--edge); }
  .nation-grid > .answer-card:last-child { padding-right: var(--edge); }
  /* The outer columns are wider by the extra edge space, so every column's text is the same width. */
  .nation-grid { --x: calc(var(--edge) - var(--gutter)); --col: calc((100% - 2 * var(--x)) / var(--n, 1)); }
  .nation-grid--2 { --n: 2; grid-template-columns: calc(var(--x) + var(--col)) calc(var(--x) + var(--col)); }
  .nation-grid--3 { --n: 3; grid-template-columns: calc(var(--x) + var(--col)) var(--col) calc(var(--x) + var(--col)); }
  .nation-grid--4 { --n: 4; grid-template-columns: calc(var(--x) + var(--col)) repeat(2, var(--col)) calc(var(--x) + var(--col)); }
  /* Explore with the map is a full-screen layout: the sidebar keeps the normal gutter at every width
     (Rory, 12 Oct), so it isn't inset like the page blocks. */
  /* Explore without the map: the whole layout stays inside the page. */
  .explore-layout:has(> .explore-map[hidden]) { max-width: var(--width-page); margin-left: auto; margin-right: auto; }
  /* Bin days: the left column's text starts at the edge line; the right column's ends at the other one. */
  .bins--days .bins__head { padding-left: var(--edge); }
  .bins--days > .bins__app { margin-left: var(--edge); }
  .bindays-next, .bindays-source, .bins--days .bin-block__inner, .bins--days .bin-block--switch .bin-block__inner { padding-right: var(--edge); }
}