/* ABC Edu — chalkboard navy, primary-colour blocks, rounded type. Colours are the variables below. */
@font-face { font-family: "Grandstander"; src: url("../fonts/Grandstander.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inclusive Sans"; src: url("../fonts/InclusiveSans.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inclusive Sans"; src: url("../fonts/InclusiveSans-Italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
  --navy: #1B2A4A;        /* chalkboard */
  --navy-2: #24375F;
  --navy-3: #33497A;
  --chalk: #F4F1E8;       /* chalk on the board */
  --paper: #FBF8F1;       /* page background */
  --card: #FFFFFF;
  --ink: #17213A;
  --muted: #4E5873;
  --line: #DCD6C8;
  --red: #E04848;         /* blocks (fills) */
  --red-ink: #B42C2C;     /* red text on light */
  --yellow: #F6C142;
  --yellow-soft: #FFF3D1;
  --blue: #2F78E4;
  --blue-ink: #1F5FBF;
  --blue-soft: #E5EEFC;
  --red-soft: #FCE7E5;
  --focus: #F6C142;
  --radius: 14px;
  --shadow: 0 1px 0 rgba(23, 33, 58, .06), 0 6px 18px -10px rgba(23, 33, 58, .25);
  --head: "Grandstander", "Trebuchet MS", system-ui, sans-serif;
  --body: "Inclusive Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--blue-ink); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus); border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; line-height: 1.2; color: var(--navy); margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-top: 1.6em; }
h3 { font-size: 1.2rem; margin-top: 1.3em; }
h4 { font-size: 1.02rem; font-family: var(--body); font-weight: 700; }
p, ul, ol, dl { margin: 0 0 1em; }
small, .small { font-size: .9rem; }
.muted { color: var(--muted); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 780px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--yellow); color: var(--navy); padding: 10px 16px; z-index: 100; font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }
main { display: block; min-height: 50vh; }
main:focus { outline: none; }

/* ---- header: chalkboard with a strip of blocks ---- */
.site-head { background: var(--navy); color: var(--chalk); position: relative; }
.site-head::after { content: ""; display: block; height: 8px; background: linear-gradient(90deg, var(--red) 0 33.3%, var(--yellow) 33.3% 66.6%, var(--blue) 66.6%); }
.head-in { display: flex; align-items: center; gap: 12px 20px; min-height: 68px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin-right: auto; }
.brand svg { width: 44px; height: 44px; flex: none; }
.brand-name { font-family: var(--head); font-weight: 800; font-size: 1.45rem; line-height: 1; letter-spacing: .01em; }
.brand-name small { display: block; font-family: var(--body); font-weight: 400; font-size: .78rem; color: #C9D2E6; letter-spacing: 0; margin-top: 4px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.main-nav a { display: block; color: var(--chalk); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: .98rem; }
.main-nav a:hover { background: var(--navy-2); }
.main-nav a[aria-current="page"] { background: var(--chalk); color: var(--navy); }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--navy-2); color: #fff; font-weight: 700; min-height: 44px; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 12px; left: 12px; top: calc(100% - 4px); background: var(--card); color: var(--ink); border-radius: var(--radius); box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); padding: 10px; z-index: 50; }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel a { display: flex; align-items: center; gap: 10px; padding: 12px; color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 10px; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--blue-soft); }
.ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
@media (max-width: 900px) { .main-nav.desktop { display: none; } .menu { display: block; } }

/* ---- buttons, inputs ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: 700 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--navy-3); }
.btn.yellow { background: var(--yellow); color: var(--navy); }
.btn.yellow:hover { background: #FFD266; }
.btn.ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn.ghost:hover { background: var(--blue-soft); }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
label { font-weight: 700; }
input[type=text], input[type=search], input[type=email], input[type=number], select, textarea {
  font: inherit; color: var(--ink); background: #fff; border: 2px solid #9BA3B8; border-radius: 12px; padding: 10px 14px; min-height: 48px; width: 100%; }
textarea { min-height: 140px; }
input:focus, select:focus, textarea:focus { border-color: var(--navy); }
.field { margin-bottom: 16px; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .92rem; margin-top: 2px; }
.field .err, .err, .error { color: var(--red-ink); font-weight: 700; display: block; margin-top: 4px; }
.errors { background: var(--red-soft); border-left: 6px solid var(--red); padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.chk input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--navy); }
.counter { display: block; font-size: .85rem; color: var(--muted); }

/* ---- hero search ---- */
.hero { background: var(--navy); color: var(--chalk); padding: 36px 0 48px; position: relative; overflow: hidden; }
.hero h1 { color: #fff; max-width: 20ch; }
.hero p.lead { font-size: 1.15rem; max-width: 52ch; color: #DCE3F1; }
.hero .blocks { position: absolute; right: 4%; bottom: -10px; width: min(300px, 32vw); opacity: .95; pointer-events: none; }
.chalk-line { display: block; width: 140px; height: 12px; margin: -4px 0 14px; }
.search-box { background: #fff; border-radius: 22px; padding: 8px; display: flex; gap: 8px; max-width: 680px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); flex-wrap: wrap; }
.search-box input { border: 0; flex: 1 1 260px; min-height: 52px; font-size: 1.1rem; border-radius: 14px; }
.search-box input:focus { box-shadow: inset 0 0 0 2px var(--navy); }
.search-box .btn { min-height: 52px; padding: 0 26px; font-size: 1.05rem; flex: 0 0 auto; }
.hero .hint { color: #C9D2E6; font-size: .95rem; margin-top: 10px; }
.hero .hint a { color: #fff; }
@media (max-width: 700px) { .hero .blocks { display: none; } .search-box .btn { flex: 1 1 100%; } }

/* ---- block cards (the three kinds of data) ---- */
.blocks3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 28px 0; }
.block { background: var(--card); border-radius: var(--radius); padding: 20px 20px 18px; box-shadow: var(--shadow); border-top: 10px solid var(--red); position: relative; }
.block.y { border-top-color: var(--yellow); }
.block.b { border-top-color: var(--blue); }
.block h3 { margin-top: 0; }
.block .letter { position: absolute; right: 16px; top: 10px; font-family: var(--head); font-weight: 900; font-size: 2.2rem; line-height: 1; color: var(--red); opacity: .25; }
.block.y .letter { color: #B98600; }
.block.b .letter { color: var(--blue); }
.section { padding: 8px 0 36px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---- breadcrumbs ---- */
.crumbs ol { list-style: none; margin: 18px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .92rem; }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--muted); }
.crumbs a { color: var(--muted); }

/* ---- school cards ---- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: grid; gap: 6px 16px; grid-template-columns: 1fr auto; border-left: 8px solid var(--line); }
.card.ph-primary, .card.ph-nursery { border-left-color: var(--yellow); }
.card.ph-secondary, .card.ph-middle, .card.ph-all-through { border-left-color: var(--blue); }
.card.ph-sixteen-plus { border-left-color: var(--red); }
.card.ph-special, .card.ph-ap { border-left-color: var(--navy-3); }
.card h3 { margin: 0; font-size: 1.15rem; }
.card h3 a { color: var(--navy); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card .meta { margin: 0; color: var(--muted); font-size: .95rem; }
.card .ofs { margin: 0; font-size: .95rem; display: flex; gap: 6px; align-items: center; }
.card .dist { font-weight: 700; color: var(--navy); white-space: nowrap; text-align: right; }
.card .side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.add-compare { font-size: .88rem; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--chalk); border: 1px solid var(--line); font-size: .82rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
.tag.y { background: var(--yellow-soft); border-color: #EBCB75; }
.tag.b { background: var(--blue-soft); border-color: #B8CEF3; }
.tag.r { background: var(--red-soft); border-color: #F0B9B4; }
@media (max-width: 560px) { .card { grid-template-columns: 1fr; } .card .side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; } .card .dist { text-align: left; } }
.phase-group h2 { display: flex; align-items: center; gap: 10px; }

/* ---- search page ---- */
.search-layout { display: grid; gap: 24px; grid-template-columns: 290px 1fr; align-items: start; margin-bottom: 40px; }
.search-side { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); position: sticky; top: 12px; }
.search-side .field { margin-bottom: 12px; }
.search-side h2 { font-size: 1.15rem; margin-top: 0; }
@media (max-width: 900px) { .search-layout { grid-template-columns: 1fr; } .search-side { position: static; } }
.result-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.places { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.places a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--blue-soft); text-decoration: none; font-weight: 700; color: var(--blue-ink); }
.notice { background: var(--yellow-soft); border-left: 6px solid var(--yellow); padding: 12px 16px; border-radius: 8px; margin: 14px 0; }
.notice.ok { background: #E6F4EA; border-left-color: #2E8B57; }
.notice.warn { background: var(--red-soft); border-left-color: var(--red); }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 24px 0; flex-wrap: wrap; }
.pager a, .pager span { padding: 8px 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; font-weight: 700; }
.pager .cur { background: var(--navy); color: #fff; }

/* ---- school page ---- */
.school-head { background: var(--navy); color: var(--chalk); padding: 6px 0 28px; }
.school-head .crumbs a, .school-head .crumbs li { color: #C9D2E6; }
.school-head h1 { color: #fff; margin-bottom: 8px; }
.school-head .sub { font-size: 1.08rem; color: #DCE3F1; margin: 0 0 14px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.facts li { background: var(--navy-2); border-radius: 12px; padding: 10px 14px; }
.facts .k { display: block; font-size: .8rem; color: #C9D2E6; text-transform: uppercase; letter-spacing: .06em; }
.facts .v { display: block; font-family: var(--head); font-weight: 700; font-size: 1.2rem; color: #fff; }
.head-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.head-actions .btn.ghost { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.head-actions .btn.ghost:hover { background: var(--navy-2); }
.jump { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.jump ul { list-style: none; margin: 0; padding: 8px 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.jump a { display: block; padding: 6px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--navy); white-space: nowrap; }
.jump a:hover { background: var(--chalk); }
.school-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
@media (max-width: 960px) { .school-grid { grid-template-columns: 1fr; } }
.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin: 22px 0; scroll-margin-top: 60px; }
.panel > h2:first-child { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.panel h2 .dot { width: 18px; height: 18px; border-radius: 5px; background: var(--red); flex: none; }
.panel.y h2 .dot { background: var(--yellow); }
.panel.b h2 .dot { background: var(--blue); }
.panel.n h2 .dot { background: var(--navy); }
.src { font-size: .88rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 16px; }
.kv { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; gap: 0; margin: 0; }
.kv dt, .kv dd { padding: 9px 0; border-bottom: 1px solid #EEE9DD; margin: 0; }
.kv dt { font-weight: 700; padding-right: 12px; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; } .kv dt { border-bottom: 0; padding-bottom: 0; } }
.side-box { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin: 22px 0; }
.side-box h2 { font-size: 1.15rem; margin-top: 0; }
.mini-map { height: 240px; border-radius: 12px; background: var(--chalk); overflow: hidden; }
.contact-list { list-style: none; padding: 0; margin: 0 0 8px; }
.contact-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; overflow-wrap: anywhere; }

/* Ofsted */
.ofsted-top { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; margin-bottom: 12px; }
.ofsted-top .big { font-family: var(--head); font-size: 1.7rem; font-weight: 800; color: var(--navy); }
.grades { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; }
.grades li { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(90px, 140px); gap: 4px 14px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--paper); }
.grades .area { font-weight: 700; }
.grades .val { font-family: var(--head); font-weight: 700; color: var(--navy); }
@media (max-width: 560px) { .grades li { grid-template-columns: 1fr 1fr; } .grades .area { grid-column: 1 / -1; } }
.scale { width: 100%; height: 14px; display: block; }
.scale rect.off { fill: #E6E1D4; }
.scale rect.on { fill: var(--navy); }
.prev { font-size: .95rem; color: var(--muted); }

/* measures */
.measures { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.measure { background: var(--paper); border-radius: 12px; padding: 14px 16px; }
.m-label { margin: 0 0 4px; font-size: 1rem; }
.m-help { font-size: .9rem; color: var(--muted); margin: 0 0 10px; }
.bars { margin: 0; }
.bar-row { display: grid; grid-template-columns: 7.5em 1fr; gap: 2px 10px; align-items: center; padding: 3px 0; }
.bar-row dt { font-size: .88rem; color: var(--muted); }
.bar-row dd { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; }
.bar-row.me dt { color: var(--ink); font-weight: 700; }
.bar-row dd strong { font-family: var(--head); font-size: 1.1rem; color: var(--navy); min-width: 3.2em; }
.bar-row .code-help { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }
svg.bar { width: 100%; height: 12px; display: block; }
svg.bar .track { fill: #E6E1D4; }
svg.bar .fill.me { fill: var(--blue); }
svg.bar .fill.cmp { fill: #9AA6C2; }
svg.bar .mark { stroke: var(--navy); stroke-width: 1.2; }
.big-val { font-family: var(--head); font-size: 1.8rem; font-weight: 800; color: var(--navy); margin: 4px 0; }
.p8line { width: 100%; max-width: 360px; height: auto; display: block; margin: 4px 0 8px; }
.p8line .axis { stroke: #9AA6C2; stroke-width: 2; }
.p8line .tick { stroke: #9AA6C2; stroke-width: 1.5; }
.p8line .tick.zero { stroke: var(--navy); stroke-width: 2; }
.p8line text { font: 11px var(--body); fill: var(--muted); }
.p8line .ci { fill: rgba(47, 120, 228, .25); }
.p8line .dot { fill: var(--blue-ink); stroke: #fff; stroke-width: 2; }
.year-note { font-size: .92rem; color: var(--muted); }
details.more { margin-top: 12px; }
details.more summary { cursor: pointer; font-weight: 700; color: var(--blue-ink); }

/* data tables */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1em; }
table.data { border-collapse: collapse; width: 100%; background: var(--card); font-size: .96rem; }
table.data th, table.data td { padding: 10px 12px; border-bottom: 1px solid #EEE9DD; text-align: left; vertical-align: top; }
table.data thead th { background: var(--navy); color: #fff; font-weight: 700; }
table.data tbody th { font-weight: 700; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* compare */
.compare-table { min-width: 640px; }
.compare-table thead th { vertical-align: bottom; }
.compare-table thead th a { color: #fff; }
.compare-table tbody th { background: var(--chalk); width: 22%; }
.compare-table .group th { background: var(--yellow-soft); font-family: var(--head); color: var(--navy); }
.compare-tray { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; background: var(--navy); color: #fff; border-radius: 18px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); max-width: 760px; margin: 0 auto; }
.compare-tray[hidden] { display: none; }
.compare-tray .btn { background: var(--yellow); color: var(--navy); }
.compare-tray button.clear { background: none; border: 0; color: #C9D2E6; text-decoration: underline; cursor: pointer; font: inherit; }

/* reviews */
.stars { color: #C58A00; letter-spacing: 2px; font-size: 1.1rem; }
.stars .off { color: #D9D3C4; }
.review { border-top: 1px solid #EEE9DD; padding: 14px 0; }
.review h3 { margin: 4px 0; font-size: 1.05rem; }
.dist-bars { display: grid; gap: 4px; max-width: 360px; }
.dist-bars div { display: grid; grid-template-columns: 4em 1fr 2.5em; gap: 8px; align-items: center; font-size: .9rem; }

/* map */
.map-shell { display: grid; grid-template-columns: 330px 1fr; min-height: calc(100vh - 76px); }
.map-side { padding: 0 18px 18px; background: var(--card); border-right: 1px solid var(--line); overflow-y: auto; }
.map-main { position: relative; min-height: 520px; }
#map { position: absolute; inset: 0; background: #E8E4D8; }
.map-status { position: absolute; left: 12px; bottom: 12px; z-index: 500; background: #fff; padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); font-size: .9rem; margin: 0; }
.map-filters { border: 0; padding: 0; margin: 0 0 12px; }
.map-filters legend { font-weight: 700; margin-bottom: 6px; }
@media (max-width: 860px) { .map-shell { grid-template-columns: 1fr; } .map-main { min-height: 70vh; } .map-side { border-right: 0; } }
.leaflet-container { font: inherit; }
.pin svg { width: 26px; height: 26px; }
.cl div { width: 44px; height: 44px; margin: 5px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--head); color: var(--navy); background: var(--yellow); box-shadow: 0 0 0 4px rgba(246, 193, 66, .35); }
.cl.m div { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px rgba(47, 120, 228, .3); }
.cl.l div { background: var(--red); color: #fff; box-shadow: 0 0 0 4px rgba(224, 72, 72, .3); }
.leaflet-popup-content h3 { font-size: 1rem; margin: 0 0 4px; }
.leaflet-popup-content p { margin: 0 0 6px; }

/* LA & town pages */
.stat-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 18px 0; padding: 0; list-style: none; }
.stat-row li { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; border-bottom: 6px solid var(--yellow); }
.stat-row li:nth-child(3n+2) { border-bottom-color: var(--blue); }
.stat-row li:nth-child(3n) { border-bottom-color: var(--red); }
.stat-row .n { display: block; font-family: var(--head); font-weight: 800; font-size: 1.6rem; color: var(--navy); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
.chips a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; font-weight: 700; color: var(--navy); }
.chips a[aria-current="page"] { background: var(--navy); color: #fff; }
.la-cols { columns: 3 230px; column-gap: 24px; list-style: none; padding: 0; }
.la-cols li { break-inside: avoid; padding: 3px 0; }
.region-block { break-inside: avoid; margin-bottom: 22px; }
.hbar-chart { display: grid; gap: 6px; margin: 8px 0 14px; max-width: 560px; }
.hbar-chart .row { display: grid; grid-template-columns: 11em 1fr 3em; gap: 8px; align-items: center; font-size: .94rem; }
.hbar-chart .row .n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* explainers / prose */
.prose { max-width: 760px; }
.prose h2 { scroll-margin-top: 20px; }
.note { background: var(--blue-soft); border-left: 6px solid var(--blue); padding: 12px 16px; border-radius: 8px; margin: 0 0 1em; }
.note p:last-child { margin-bottom: 0; }
.toc { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px; margin: 18px 0; }
.toc ol { margin: 0; padding-left: 20px; }
.sources { font-size: .92rem; }
.guide-list { list-style: none; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.guide-list li { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; border-top: 8px solid var(--yellow); }
.guide-list li:nth-child(3n+2) { border-top-color: var(--blue); }
.guide-list li:nth-child(3n) { border-top-color: var(--red); }
.guide-list h3 { margin-top: 0; }

/* footer */
.site-foot { background: var(--navy); color: #DCE3F1; margin-top: 48px; padding: 36px 0 24px; font-size: .95rem; }
.site-foot::before { content: ""; display: block; height: 8px; margin-top: -36px; margin-bottom: 30px; background: linear-gradient(90deg, var(--blue) 0 33.3%, var(--yellow) 33.3% 66.6%, var(--red) 66.6%); }
.site-foot a { color: #fff; }
.site-foot h2 { color: #fff; font-size: 1.05rem; margin: 0 0 10px; }
.foot-grid { display: grid; gap: 24px; grid-template-columns: 2fr 1fr 1fr; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { padding: 3px 0; }
.foot-notes { border-top: 1px solid var(--navy-3); margin-top: 22px; padding-top: 16px; font-size: .88rem; color: #C9D2E6; }
.foot-brand { font-family: var(--head); font-weight: 800; font-size: 1.3rem; color: #fff; display: flex; align-items: center; gap: 10px; }
.foot-brand svg { width: 34px; height: 34px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .site-head, .site-foot, .jump, .head-actions, .search-side, .compare-tray, .mini-map, .add-compare, .menu, .skip, nav.pager { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .school-head { background: #fff; color: #000; padding: 0; }
  .school-head h1, .school-head .sub, .facts .v, .facts .k { color: #000; }
  .facts li { background: #fff; border: 1px solid #999; }
  .panel, .side-box, .card, .measure { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; }
  .school-grid { grid-template-columns: 1fr; }
  a { color: #000; }
  table.data thead th { background: #eee; color: #000; }
}
.m-year { font-size: .85rem; font-weight: 700; color: var(--muted); margin: 0 0 8px; }
.insp { border-top: 1px solid #EEE9DD; padding-top: 14px; margin-top: 14px; }
.insp:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.insp h3 { margin-top: 0; }
.flag-note { background: var(--yellow-soft); border-left: 6px solid var(--yellow); padding: 8px 12px; border-radius: 8px; font-size: .95rem; }
.concern { background: var(--red-soft); border-left: 6px solid var(--red); padding: 8px 12px; border-radius: 8px; font-size: .95rem; }
.refine-link { display: none; }
@media (max-width: 900px) {
  .search-layout > div { order: 1; }
  .search-layout > .search-side { order: 2; }
  .refine-link { display: inline-block; margin-bottom: 12px; font-weight: 700; }
}

/* ---------------------------------------------------------------- ads (5od) + cookie choice */
.ad-slot[hidden], .cookie-bar[hidden] { display: none !important; }
.ad-slot { display: block; margin: 20px auto; }
.ad-slot:has(ins[data-fiveod="empty"], ins[data-fiveod="error"], ins[data-fiveod="nofit"]) { display: none; }
.ad-in { display: flex; justify-content: center; }
.ad-head { max-width: 1180px; padding: 0 16px; }
.ad-content { padding: 14px 0; border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line); }
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--navy); color: var(--chalk);
  border-top: 8px solid var(--yellow); box-shadow: 0 -8px 24px -12px rgba(23, 33, 58, .55); padding: 16px 0 18px; max-height: 80vh; overflow-y: auto; }
.cookie-in { display: grid; gap: 12px 32px; align-items: center; }
@media (min-width: 860px) { .cookie-in { grid-template-columns: minmax(0, 1fr) auto; } }
.cookie-h { color: #fff; font: 700 1.35rem/1.2 var(--head); margin: 0 0 6px; }
.cookie-txt p { margin: 0 0 6px; font-size: .97rem; }
.cookie-bar a { color: var(--yellow); font-weight: 700; }
.cookie-bar a:hover { color: #fff; }
.cookie-now { font-weight: 700; color: var(--yellow); }
.cookie-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn { flex: 1 1 12rem; min-height: 48px; font: 700 1rem/1.2 var(--body); background: var(--chalk); color: var(--navy);
  border: 2px solid var(--chalk); border-radius: 999px; padding: 10px 20px; cursor: pointer; }
.cookie-btn:hover { background: var(--yellow); border-color: var(--yellow); }
.cookie-bar :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cookie-h:focus { outline: none; }
.cookie-h:focus-visible { outline: 3px solid var(--focus); }
@media (prefers-reduced-motion: no-preference) { .cookie-bar { animation: cookie-up .25s ease-out; } }
@keyframes cookie-up { from { transform: translateY(100%); } to { transform: none; } }
@media print { .cookie-bar, .ad-slot { display: none !important; } }

/* hero photos (explainers, local authority and town pages) — credited, see /photo-credits/ */
.hero-photo { margin: 6px 0 22px; max-width: 760px; }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); background: var(--chalk); box-shadow: var(--shadow); }
.place-photo { max-width: 920px; }
.place-photo img { aspect-ratio: 21 / 9; }
.hero-photo figcaption { margin-top: 8px; font-size: .86rem; line-height: 1.45; color: var(--muted); padding-left: 10px; border-left: 4px solid var(--yellow); }
.hero-photo figcaption a { color: var(--blue-ink); }
@media (max-width: 600px) { .place-photo img { aspect-ratio: 16 / 9; } }
.credits-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.credits-list li { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.credits-list img { flex: 0 0 auto; width: 120px; height: auto; border-radius: 8px; }
@media (max-width: 420px) { .credits-list img { width: 88px; } }
@media print { .hero-photo img { box-shadow: none; max-height: 8cm; } }