/* Districtree theme 1.0.0. Colors and type carried over from site build 11.1.1. */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("fonts/ZillaSlab-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("fonts/ZillaSlab-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #F4F6F8; --surface: #FFFFFF; --surface-2: #EAEEF2; --ink: #1D2731; --muted: #566573; --line: #D5DCE3;
  --accent: #2B5F80; --accent-ink: #FFFFFF; --accent-soft: #E1ECF4;
  --off: #9A5A0C; --off-soft: #FBF0DE; --ok: #23744F;
  --c-announcements: #4C5C6B; --c-schedule: #9A5A0C; --c-events: #76408A; --c-sports: #22704C; --c-board: #2B5F80; --c-news: #4C5C6B;
  --display: "Zilla Slab", "Rockwell", "Roboto Slab", Georgia, serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s0: .875rem; --s1: 1rem; --s2: 1.1875rem; --s3: 1.5rem; --s4: 1.9375rem; --s5: 2.5rem;
  --gap: 1.25rem; --r: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #10161B; --surface: #172028; --surface-2: #1F2A33; --ink: #E6EBEF; --muted: #A3B1BD; --line: #2C3A46;
    --accent: #7FB3D5; --accent-ink: #0D1A24; --accent-soft: #1C3242;
    --off: #E7B36A; --off-soft: #33281A; --ok: #6CC49A;
    --c-announcements: #A9B8C6; --c-schedule: #E7B36A; --c-events: #C99BDA; --c-sports: #6CC49A; --c-board: #7FB3D5; --c-news: #A9B8C6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10161B; --surface: #172028; --surface-2: #1F2A33; --ink: #E6EBEF; --muted: #A3B1BD; --line: #2C3A46;
  --accent: #7FB3D5; --accent-ink: #0D1A24; --accent-soft: #1C3242; --off: #E7B36A; --off-soft: #33281A; --ok: #6CC49A;
  --c-announcements: #A9B8C6; --c-schedule: #E7B36A; --c-events: #C99BDA; --c-sports: #6CC49A; --c-board: #7FB3D5; --c-news: #A9B8C6;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--s1)/1.55 var(--body); }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: var(--s5); }
h2 { font-size: var(--s3); }
h3 { font-size: var(--s2); }
p { margin: 0 0 .75em; }
.wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }
.quiet, .hint { color: var(--muted); }
.hint { font-size: var(--s0); }
.sep { color: var(--line); margin: 0 .35rem; }
.empty { color: var(--muted); padding: 1rem 0; }
.warn-text { color: var(--off); }

/* header */
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.masthead-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1.1; padding: .45rem 0; }
.brand-name { font: 700 1.375rem/1 var(--display); color: var(--accent); }
.brand-district { font-size: var(--s0); color: var(--muted); }
.menu > summary { list-style: none; cursor: pointer; font-weight: 700; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: var(--r); display: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .15rem; margin: 0; padding: 0; }
.menu nav a { display: block; padding: .5rem .7rem; border-radius: var(--r); text-decoration: none; color: var(--ink); font-size: .9375rem; }
.menu nav a:hover { background: var(--surface-2); }
.menu nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

main { padding: 2rem 0 3rem; }
.page-head { margin-bottom: 1.75rem; max-width: 46rem; }
.lede { font-size: var(--s2); color: var(--muted); line-height: 1.45; }
.crumbs { margin-bottom: .5rem; font-size: var(--s0); }

/* the week strip: the one loud thing */
.week { margin-bottom: 2.5rem; }
.week-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; margin-bottom: 1rem; }
.week-head h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin: 0; }
.week-sub { margin: 0; color: var(--muted); }
.week-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.day { padding: .8rem .75rem 1rem; border-left: 1px solid var(--line); min-height: 9.5rem; }
.day:first-child { border-left: 0; }
.day.is-weekend { background: var(--surface-2); }
.day.is-today { box-shadow: inset 0 4px 0 var(--accent); }
.day.is-off { background: var(--off-soft); box-shadow: inset 0 4px 0 var(--off); }
.day.is-off.is-today { box-shadow: inset 0 4px 0 var(--off), inset 0 -2px 0 var(--accent); }
.day-name { margin: 0 0 .35rem; display: flex; flex-direction: column; }
.day-name span { font: 600 var(--s2)/1.1 var(--display); }
.day-name time { font-size: var(--s0); color: var(--muted); }
.day-flag { display: inline-block; margin: 0 0 .4rem; font-weight: 700; font-size: var(--s0); color: var(--off); }
.day-events { list-style: none; margin: 0; padding: 0; font-size: .875rem; line-height: 1.35; }
.day-events li { margin-bottom: .45rem; padding-left: .85rem; position: relative; }
.day-events .dot { position: absolute; left: 0; top: .38rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c-news); }
.day-events .t { font-weight: 700; }
.day-events .where { display: block; color: var(--muted); font-size: .8125rem; }
.day-quiet { color: var(--muted); font-size: .875rem; }

/* category colour */
.cat-announcements { --cat: var(--c-announcements); } .cat-schedule { --cat: var(--c-schedule); } .cat-events { --cat: var(--c-events); }
.cat-sports { --cat: var(--c-sports); } .cat-board { --cat: var(--c-board); } .cat-news { --cat: var(--c-news); }
.dot[class*="cat-"] { background: var(--cat, var(--c-news)); }

/* layout */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; }
.side-col { display: grid; gap: 1rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem 1.2rem; }
.panel h2 { font-size: var(--s2); }
section + section { margin-top: 2rem; }
.side-col section + section { margin-top: 0; }

/* rows: posts */
.cat-name { font-weight: 700; color: var(--cat, var(--c-news)); }
.more-link { font-weight: 700; }

/* forms */
label { display: block; font-weight: 700; margin-bottom: .35rem; font-size: .9375rem; }
input[type="search"], select { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--muted); border-radius: var(--r); padding: .6rem .7rem; }
button, .btn { font: 700 .9375rem/1.2 var(--body); cursor: pointer; border-radius: var(--r); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); padding: .62rem 1rem; text-decoration: none; display: inline-block; }
.btn-quiet, .chip { background: var(--surface); color: var(--accent); }
.ask form, .jump { display: grid; gap: .6rem; }
.jump { grid-template-columns: 1fr auto; align-items: end; }
.jump label { grid-column: 1 / -1; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

.filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1.25rem; margin-bottom: 1.25rem; }
.filters .search-label { width: 100%; margin: 0; }
.filters input[type="search"] { max-width: 32rem; }
.select-label { min-width: 14rem; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { border-color: var(--line); color: var(--ink); font-weight: 400; padding: .45rem .8rem; border-radius: 999px; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* events */
.month h2 { position: sticky; top: 3.75rem; background: var(--bg); padding: .5rem 0; margin: 0; z-index: 1; }
.events { list-style: none; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.ev-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--cat, var(--c-events)); border-radius: var(--r); height: 3.5rem; line-height: 1.05; }
.ev.is-off .ev-date { border-top-color: var(--off); background: var(--off-soft); }
.ev-dow { font-size: .75rem; color: var(--muted); }
.ev-num { font: 700 1.375rem/1 var(--display); }
.ev-title { font-weight: 700; margin: .2rem 0 .1rem; }
.ev-meta { margin: 0; color: var(--muted); font-size: .9375rem; }
.flag { font-size: .8125rem; font-weight: 700; color: var(--off); border: 1px solid currentColor; border-radius: 999px; padding: .05rem .5rem; margin-left: .25rem; white-space: nowrap; }
.flag-short { color: var(--muted); }

/* schools */
.school-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .25rem 2rem; }
.school-list li { padding: .85rem 0 .85rem 1rem; border-left: 4px solid var(--school, var(--accent)); }
.school-list h3 { margin-bottom: .25rem; }
.school-list p { margin: 0; color: var(--muted); font-size: .9375rem; }
.school-head { border-left: 6px solid var(--school, var(--accent)); padding-left: 1rem; margin-bottom: 2rem; }
.school-head h1 { margin-bottom: .15rem; }
.contact dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; }
.contact dt { color: var(--muted); font-size: var(--s0); padding-top: .15rem; }
.contact dd { margin: 0; }
.plain { list-style: none; margin: 0; padding: 0; } .plain li { padding: .3rem 0; }

/* documents */
.doc-group h2 .count { font: 400 var(--s0) var(--body); color: var(--muted); margin-left: .35rem; }
.docs { list-style: none; margin: 0; padding: 0; columns: 2 22rem; column-gap: 2.5rem; }
.doc { break-inside: avoid; padding: .55rem 0; border-top: 1px solid var(--line); }
.doc-title { margin: 0; font-weight: 700; }
.doc-meta { margin: .1rem 0 0; font-size: var(--s0); color: var(--muted); }

/* post */
.story { max-width: 44rem; }
.story h1 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
.story header { border-left: 4px solid var(--cat, var(--c-news)); padding-left: 1rem; margin-bottom: 1.5rem; }
.post-schools { color: var(--muted); }
.post-body { font-size: 1.0625rem; line-height: 1.65; }
.post-body .ref { font-size: .8em; text-decoration: none; }
.post-images { display: grid; gap: 1rem; margin: 1.5rem 0; }
.corrections { background: var(--off-soft); border-left: 4px solid var(--off); padding: 1rem 1.2rem; border-radius: 0 var(--r) var(--r) 0; margin: 1.5rem 0; }
.corrections h2 { font-size: var(--s2); }
.sources { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.sources h2 { font-size: var(--s2); }
.sources li { margin-bottom: .5rem; }
.sources li:target { background: var(--accent-soft); }

/* board, parks, districts */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem 2rem; }
.people li { border-top: 3px solid var(--accent); padding-top: .75rem; }
.people h3 { margin-bottom: .15rem; }
.people p { margin: 0 0 .25rem; color: var(--muted); }
.parks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 2rem; }
.parks li { padding: .9rem 0; border-top: 1px solid var(--line); }
.parks h3 { margin-bottom: .1rem; }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
.tags span { font-size: .8125rem; background: var(--surface-2); border-radius: 999px; padding: .1rem .55rem; }
.park-map { height: 24rem; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 1.5rem; }
.district-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; max-width: 34rem; }
.district-list a { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); text-decoration: none; color: var(--ink); }
.dl-name { font: 600 var(--s3) var(--display); }
.dl-count { color: var(--muted); }
.prose { max-width: 42rem; } .prose h2 { font-size: var(--s3); margin-top: 1.75rem; } .prose li { margin-bottom: .4rem; }
.help-box { max-width: 46rem; margin-bottom: 1rem; }

/* footer */
.foot { border-top: 1px solid var(--line); background: var(--surface); font-size: .9375rem; }
.foot-in { padding: 1.75rem 0 2rem; max-width: 46rem; margin-left: max(1.25rem, (100% - 72rem) / 2); }
.foot p:last-child { margin: 0; }

/* Who do I ask (markup from help-search.js) */
.dt-search { display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin: 0 0 1.25rem; }
.dt-search label { grid-column: 1 / -1; margin: 0; font-size: var(--s2); font-family: var(--display); font-weight: 600; }
.dt-search input { font: inherit; font-size: 1.0625rem; padding: .75rem .85rem; border: 1px solid var(--muted); border-radius: var(--r); background: var(--surface); color: var(--ink); }
.dt-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 1rem 1.2rem; margin: 0 0 .9rem; }
.dt-school { border-left-color: var(--c-events); } .dt-none { border-left-color: var(--off); }
.dt-card h3 { margin: 0 0 .35rem; }
.dt-card p { margin: 0 0 .35rem; }
.dt-meta { color: var(--muted); font-size: var(--s0); }
.dt-contact a { font-weight: 700; }
.dt-links, .dt-docs { padding-left: 1.1rem; margin: .4rem 0 0; }
.dt-docs-h { margin-top: 1.25rem; }

[hidden] { display: none !important; }

/* phones and tablets */
@media (max-width: 60rem) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .week-days { grid-template-columns: 1fr; }
  .day { border-left: 0; border-top: 1px solid var(--line); min-height: 0; display: grid; grid-template-columns: 7rem 1fr; gap: .25rem 1rem; padding: .75rem 1rem; }
  .day:first-child { border-top: 0; }
  .day.is-today, .day.is-off { box-shadow: inset 4px 0 0 var(--accent); }
  .day.is-off { box-shadow: inset 4px 0 0 var(--off); }
  .day-flag { grid-column: 2; margin: 0; }
  .day-events, .day-quiet { grid-column: 2; margin: 0; }
  .day.is-weekend:not(.is-off) .day-quiet { display: none; }
}
@media (max-width: 46rem) {
  :root { --s5: 2rem; --s3: 1.375rem; }
  .menu > summary { display: inline-block; }
  .menu[open] nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1rem; }
  .menu nav ul { flex-direction: column; }
  .day { grid-template-columns: 1fr; }
  .day-flag, .day-events, .day-quiet { grid-column: 1; }
  .docs { columns: 1; }
  .month h2 { top: 3.75rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print { .masthead, .foot, .filters, .side-col, .actions { display: none; } body { background: #fff; } .split { display: block; } }

/* ---------- From the Districtree 11.1.1 build ---------- */
:root{
  --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#EAEEF2; --ink:#1D2731; --muted:#566573; --line:#D5DCE3;
  --accent:#2B5F80; --accent-soft:#E1ECF4; --ok:#23744F; --warn:#9A5A0C; --warn-soft:#FBF0DE;
  --c-ann:#4C5C6B; --c-ann-soft:#E8ECF0; --c-sch:#9A5A0C; --c-sch-soft:#FBEFDC; --c-evt:#76408A; --c-evt-soft:#F2E8F5; --c-spo:#22704C; --c-spo-soft:#E2F1E8;
  --map-land:#EEF1EC; --map-line:#C9D1D6; --map-road:#FFFFFF; --map-water:#B9D3E4;
  --focus:#2B5F80;
  --display:"Zilla Slab", "Rockwell", "Roboto Slab", Georgia, serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10161B; --surface:#172028; --surface-2:#1F2A33; --ink:#E6EBEF; --muted:#9BA9B4; --line:#2C3843;
    --accent:#86B9DA; --accent-soft:#1B3242; --ok:#7CCBA2; --warn:#EDB566; --warn-soft:#3A2B14;
    --c-ann:#AEBBC6; --c-ann-soft:#25313B; --c-sch:#EDB566; --c-sch-soft:#3A2B14; --c-evt:#D2A4E0; --c-evt-soft:#33243A; --c-spo:#7CCBA2; --c-spo-soft:#183428;
    --map-land:#1A242B; --map-line:#34424D; --map-road:#2A3742; --map-water:#244559;
    --focus:#86B9DA; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10161B; --surface:#172028; --surface-2:#1F2A33; --ink:#E6EBEF; --muted:#9BA9B4; --line:#2C3843;
  --accent:#86B9DA; --accent-soft:#1B3242; --ok:#7CCBA2; --warn:#EDB566; --warn-soft:#3A2B14;
  --c-ann:#AEBBC6; --c-ann-soft:#25313B; --c-sch:#EDB566; --c-sch-soft:#3A2B14; --c-evt:#D2A4E0; --c-evt-soft:#33243A; --c-spo:#7CCBA2; --c-spo-soft:#183428;
  --map-land:#1A242B; --map-line:#34424D; --map-road:#2A3742; --map-water:#244559;
  --focus:#86B9DA; color-scheme: dark;
}
.wrap{ width:min(1180px, 100% - 32px); margin-inline:auto; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted{ color:var(--muted); }
.small{ font-size:.9rem; }
.site-head{ position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--surface); border-bottom:1px solid var(--line); }
.head-row{ display:flex; align-items:center; gap:10px; padding:11px 0 9px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); min-width:0; }
.brand svg{ width:42px; height:42px; flex:none; }
.brand-name{ font-family:var(--display); font-weight:700; font-size:1.6rem; line-height:1; letter-spacing:.005em; }
.brand-sub{ display:block; font-size:.8rem; color:var(--muted); margin-top:3px; }
.head-tools{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }
.sel{ position:relative; }
.sel select{ font:inherit; font-size:.9rem; padding:8px 30px 8px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); appearance:none; cursor:pointer; max-width:46vw; }
.sel::after{ content:""; position:absolute; right:12px; top:50%; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.icon-btn{ position:relative; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; cursor:pointer; flex:none; color:var(--ink); }
.icon-btn svg{ width:20px; height:20px; }
.nav{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-bottom:8px; }
.nav::-webkit-scrollbar{ display:none; }
.nav a{ flex:none; text-decoration:none; color:var(--muted); padding:6px 12px; border-radius:999px; font-size:.95rem; white-space:nowrap; }
.nav a:hover{ color:var(--ink); background:var(--surface-2); }
.nav a[aria-current="page"]{ color:var(--surface); background:var(--accent); }
.indep{ background:var(--surface-2); border-bottom:1px solid var(--line); font-size:.88rem; font-weight:700; }
.indep .wrap{ padding:6px 0; }
@media (max-width:720px){
  .brand-sub{ display:none; }
  .brand-name{ font-size:1.3rem; }
  .brand svg{ width:34px; height:34px; }
  .head-tools{ gap:6px; }
}
@media (max-width:520px){
  .sel select{ font-size:.84rem; padding:7px 26px 7px 10px; max-width:34vw; text-overflow:ellipsis; }
}
.crumbs ol{ list-style:none; padding:0; margin:0 0 16px; display:flex; flex-wrap:wrap; font-size:.9rem; color:var(--muted); }
.crumbs li+li::before{ content:"›"; margin:0 8px; }
.crumbs a{ color:var(--muted); }
.crumbs [aria-current]{ color:var(--ink); font-weight:700; }
.page-head{ margin-bottom:22px; }
.lede{ font-size:1.12rem; color:var(--muted); max-width:62ch; }
.layout{ display:grid; gap:32px; }
@media (min-width:980px){
  .layout{ grid-template-columns:minmax(0,1fr) 340px; align-items:start; }
}
.col-main{ min-width:0; }
.col-rail{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.section{ margin-top:40px; }
.section:first-child{ margin-top:0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; border-bottom:2px solid var(--ink); padding-bottom:6px; }
.section-head h2{ margin:0; }
.see-all{ font-weight:700; white-space:nowrap; font-size:.95rem; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; }
.rail-h{ font-size:1.22rem; margin-bottom:10px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid var(--accent); background:var(--accent); color:var(--surface); text-decoration:none; font-weight:700; cursor:pointer; font-size:.95rem; }
.btn.ghost{ background:transparent; color:var(--accent); }
.btn.quiet{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn-row{ display:flex; flex-wrap:wrap; gap:8px; }
.note{ background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius:10px; padding:12px 14px; font-size:.95rem; }
.note strong{ color:var(--warn); }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.cat-Announcements{ background:var(--c-ann-soft); color:var(--c-ann); }
.cat-Schedule{ background:var(--c-sch-soft); color:var(--c-sch); }
.cat-Events{ background:var(--c-evt-soft); color:var(--c-evt); }
.cat-Sports{ background:var(--c-spo-soft); color:var(--c-spo); }
.chip.plain{ background:var(--surface-2); color:var(--muted); }
.logo{ display:inline-grid; place-items:center; flex:none; border-radius:10px; background:#fff; border:1px solid var(--line); overflow:hidden; }
.logo img{ width:88%; height:88%; object-fit:contain; }
.logo.s24{ width:24px; height:24px; border-radius:6px; }
.logo.s32{ width:32px; height:32px; border-radius:8px; }
.logo.s44{ width:44px; height:44px; }
.logo.s72{ width:72px; height:72px; border-radius:14px; }
.logo.s96{ width:96px; height:96px; border-radius:16px; }
.logo .ini{ font-weight:700; font-size:.8rem; color:#fff; width:100%; height:100%; display:grid; place-items:center; }
.logo.planned{ border-style:dashed; background:var(--surface-2); }
.logo.planned .ini{ color:var(--muted); }
.hero{ display:grid; gap:22px; margin-bottom:34px; }
@media (min-width:980px){
  .hero{ grid-template-columns:minmax(0,1fr) 340px; align-items:start; }
}
.hero h1{ margin-bottom:.2em; }
.map-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.map-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); }
.map-bar .grow{ flex:1; min-width:120px; font-weight:700; }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.seg button{ border:0; background:transparent; padding:6px 12px; cursor:pointer; font-size:.9rem; color:var(--muted); }
.seg button[aria-pressed="true"]{ background:var(--ink); color:var(--surface); }
.map-wrap{ position:relative; background:var(--map-land); }
.map-wrap svg{ display:block; width:100%; height:auto; }
.map-svg .boundary{ fill:color-mix(in srgb, var(--surface) 55%, transparent); stroke:var(--accent); stroke-width:2.5; stroke-dasharray:8 6; }
.map-svg .road{ fill:none; stroke:var(--map-road); stroke-width:9; stroke-linecap:round; }
.map-svg .road-edge{ fill:none; stroke:var(--map-line); stroke-width:12; stroke-linecap:round; }
.map-svg .river{ fill:none; stroke:var(--map-water); stroke-width:7; stroke-linecap:round; }
.map-svg .place{ font-family:var(--display); font-weight:600; fill:var(--muted); font-size:24px; }
.map-svg .roadname{ font-size:15px; fill:var(--muted); font-weight:700; }
.map-svg .pin{ cursor:pointer; }
.map-svg .pin rect.sq{ stroke:#fff; stroke-width:3; }
.map-svg .pin text.ini{ fill:#fff; font-weight:700; font-size:13px; text-anchor:middle; pointer-events:none; }
.map-svg .pin .lbl{ font-size:15px; font-weight:700; fill:var(--ink); paint-order:stroke; stroke:var(--surface); stroke-width:5px; stroke-linejoin:round; opacity:0; pointer-events:none; }
.map-svg.show-labels .pin .lbl, .map-svg .pin:hover .lbl, .map-svg .pin:focus .lbl, .map-svg .pin.mine .lbl{ opacity:1; }
.map-svg .pin:focus{ outline:none; }
.map-svg .pin:focus rect.sq, .map-svg .pin:hover rect.sq{ stroke:var(--ink); stroke-width:4; }
.map-svg .pin.mine rect.ring{ fill:none; stroke:var(--ink); stroke-width:3; }
.map-svg .pin.planned rect.sq{ fill:var(--surface) !important; stroke:var(--muted); stroke-dasharray:4 3; }
.map-svg .pin.planned text.ini{ fill:var(--muted); }
.map-foot{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:9px 12px; font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); }
.legend-sq{ display:inline-block; width:11px; height:11px; border-radius:3px; background:var(--muted); vertical-align:-1px; margin-right:5px; }
.legend-sq.dash{ background:transparent; border:1.5px dashed var(--muted); }
.pick-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:6px; max-height:300px; overflow:auto; padding:2px; }
.pick{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:.92rem; background:var(--surface); }
.pick:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.pick input{ accent-color:var(--accent); width:18px; height:18px; flex:none; }
.field{ display:flex; flex-direction:column; gap:4px; margin:12px 0; font-size:.95rem; }
.field input, .field textarea, .field select{ font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); }
.privacy-line{ font-size:.9rem; color:var(--muted); display:flex; gap:8px; align-items:flex-start; }
.privacy-line svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--ok); }
.my-list{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }
.my-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border:1px solid var(--line); border-radius:999px; font-size:.88rem; font-weight:700; background:var(--surface); text-decoration:none; color:var(--ink); }
.filters{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.fchip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:5px 11px; font-size:.88rem; cursor:pointer; }
.fchip[aria-pressed="true"]{ background:var(--ink); color:var(--surface); border-color:var(--ink); }
.fchip .dot{ width:9px; height:9px; border-radius:3px; }
.feed{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.post{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; position:relative; }
.post:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.post h3{ margin:4px 0 4px; font-family:var(--body); font-size:1.06rem; font-weight:700; line-height:1.3; }
.post h3 a{ color:var(--ink); text-decoration:none; }
.post h3 a::after{ content:""; position:absolute; inset:0; border-radius:12px; }
.post h3 a:focus-visible{ outline:none; }
.post:has(h3 a:focus-visible){ outline:3px solid var(--focus); outline-offset:2px; }
.post .meta{ font-size:.85rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
.post .snip{ font-size:.95rem; color:var(--muted); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.more-row{ margin-top:14px; display:flex; justify-content:center; }
.empty{ padding:22px; text-align:center; color:var(--muted); background:var(--surface); border:1px dashed var(--line); border-radius:12px; }
.dates{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.dates li{ display:flex; gap:10px; align-items:flex-start; }
.date-chip{ flex:none; width:48px; text-align:center; border:1px solid var(--line); border-radius:8px; background:var(--surface); line-height:1.1; padding:4px 0; }
.date-chip small{ display:block; font-size:.7rem; font-weight:700; color:var(--muted); }
.date-chip b{ font-size:1.15rem; font-family:var(--display); }
.dates .t{ font-weight:700; font-size:.95rem; line-height:1.3; }
.dates .t button{ all:unset; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }
.dates .t button:focus-visible{ outline:3px solid var(--focus); }
.dates .s{ font-size:.85rem; color:var(--muted); }
.school-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:10px; }
.school-card{ display:flex; gap:12px; align-items:center; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); }
.school-card:hover{ border-color:var(--accent); }
.school-card b{ display:block; line-height:1.25; }
.school-card span{ font-size:.85rem; color:var(--muted); }
.school-head{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.links-row{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; }
.ilink{ display:flex; flex-direction:column; align-items:center; gap:4px; width:84px; padding:10px 6px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-decoration:none; color:var(--ink); font-size:.8rem; font-weight:700; text-align:center; }
.ilink svg{ width:24px; height:24px; color:var(--accent); }
.ilink:hover{ border-color:var(--accent); }
.people{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:10px; }
.person{ display:flex; gap:12px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.person.lead{ border-color:var(--accent); box-shadow:inset 4px 0 0 var(--accent); }
.avatar{ width:64px; height:76px; flex:none; border-radius:8px; background:var(--surface-2); border:1px dashed var(--line); display:grid; place-items:center; text-align:center; font-size:.66rem; color:var(--muted); line-height:1.2; padding:4px; overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar.photo{ border-style:solid; padding:0; }
.person b{ display:block; line-height:1.25; }
.person .r{ font-size:.86rem; color:var(--muted); }
.person .c{ font-size:.86rem; margin-top:4px; }
.town-item{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; }
.town-item + .town-item{ margin-top:10px; }
.tie{ font-size:.9rem; padding:8px 12px; border-left:4px solid var(--accent); background:var(--accent-soft); border-radius:0 8px 8px 0; margin:10px 0; }
.contact-bar{ display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; margin-top:16px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.contact-bar.quiet{ font-size:.95rem; color:var(--muted); }
.phone-big{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--display); font-size:1.5rem; font-weight:700; line-height:1.1; }
.phone-big small{ display:block; font-family:var(--body); font-size:.78rem; font-weight:700; color:var(--muted); }
.phone-big svg{ width:28px; height:28px; color:var(--accent); flex:none; }
.contact-meta{ display:flex; flex-direction:column; gap:3px; font-size:.92rem; }
.district-strip{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:12px 0 0; font-size:.95rem; }
.bio{ max-width:760px; margin-top:16px; }
.bio h3{ font-size:1.05rem; margin:18px 0 6px; }
.facts{ margin:0; padding-left:20px; }
.facts li{ margin:6px 0; line-height:1.5; }
.srcs{ font-size:.82rem; white-space:normal; }
.srcs .src{ color:var(--muted); margin-right:8px; }
.sq{ all:unset; display:flex; align-items:center; justify-content:center; background:#f3e2c7; cursor:pointer; position:relative; font-size:clamp(22px, 5.2vw, 40px); line-height:1; }
.sq.sel{ outline:3px solid #ffb300; outline-offset:-3px; }
.sq:focus-visible{ outline:3px solid #1565c0; outline-offset:-3px; }
.site-foot{ border-top:1px solid var(--line); background:var(--surface); padding:26px 0 34px; font-size:.92rem; }
.foot-grid{ display:grid; gap:18px; }
@media (min-width:860px){
  .foot-grid{ grid-template-columns:1.3fr 1fr 1fr; }
}
.site-foot h3{ font-size:1rem; font-family:var(--body); font-weight:700; margin-bottom:6px; }
.site-foot ul{ list-style:none; padding:0; margin:0; }
.site-foot li{ margin-bottom:4px; }
@media (prefers-reduced-motion:no-preference){
  .map-svg{ transition:none; }
}

/* ---------- Theme 1.1: pieces the 11.1.1 look needs on a built site ---------- */
main{ padding:22px 0 56px; }
.skip:focus{ z-index:80; }
.head-row{ min-height:62px; }
#themeBtn svg{ width:20px; height:20px; }
.crumbs{ margin:0; }
.week{ margin:0 0 40px; }
.week .section-head{ margin-bottom:12px; }
.hero + .week{ margin-top:6px; }
.feed.rows{ margin:0 0 1rem; }
.feed[data-show]:not(.is-live) > li:nth-child(n+9), .dates[data-show]:not(.is-live) > li:nth-child(n+7){ display:none; }
.feed > li[hidden], .dates > li[hidden]{ display:none; }
.chip.cat-name{ background:color-mix(in srgb, var(--cat, var(--c-ann)) 14%, var(--surface)); color:var(--cat, var(--c-ann)); }
.post .logo{ align-self:start; }
.post h3.row-title{ font-size:1.06rem; }
.post time{ white-space:nowrap; }
.panel .field span{ font-weight:700; font-size:.9rem; }
.panel form .btn{ width:100%; }
.panel .btn-row .btn{ flex:1; }
.pick-grid{ grid-template-columns:1fr; max-height:250px; margin:10px 0; }
.pick .logo{ border:0; }
.my-chip img{ width:24px; height:24px; border-radius:6px; background:#fff; object-fit:contain; }
.school-head{ margin-bottom:6px; }
.school-head h1{ margin:0 0 .1em; }
.school-head .logo{ box-shadow:0 0 0 3px var(--school, var(--accent)); border-color:var(--surface); }
.contact-bar + .links-row{ margin-bottom:26px; }
.people.chief{ grid-template-columns:minmax(0, 460px); }
.people.chief .avatar{ width:104px; height:128px; }
.people.chief .person b{ font-family:var(--display); font-size:1.25rem; }
.col-rail .plain{ list-style:none; padding:0; margin:0; }
.col-rail .plain li{ margin-bottom:8px; }
.district-list{ list-style:none; padding:0; display:grid; gap:10px; max-width:560px; }
/* the map: line widths stay the same on screen at every zoom; markers and names scale with --k */
.map-svg path{ vector-effect:non-scaling-stroke; }
.map-svg .boundary{ stroke-width:2.5px; stroke-dasharray:8 6; }
.map-svg .river{ stroke-width:6px; }
.map-svg .road{ stroke-width:5px; }
.map-svg .road.major{ stroke-width:7px; }
.map-svg .road-edge{ stroke-width:8px; }
.map-svg .road-edge.major{ stroke-width:10px; }
.map-svg .roadname{ font-size:calc(15px * var(--k, 1)); }
.map-svg .place{ font-size:calc(var(--size, 20) * 1px * var(--k, 1)); }
.map-svg .pin rect.ring{ fill:none; stroke:none; }
.map-svg .pin rect.sq{ stroke-width:3px; }
.map-svg .pin rect.sq[fill="#FFFFFF"]{ stroke:var(--school, var(--accent)); stroke-width:2.5px; }
.map-svg .pin:focus rect.sq, .map-svg .pin:hover rect.sq, .map-svg .pin.is-open rect.sq{ stroke:var(--ink); stroke-width:4px; }
.map-svg .pin.is-open .lbl{ opacity:1; }
.map-bar .btn{ padding:6px 12px; font-size:.88rem; }
.pin-card{ position:absolute; left:12px; bottom:12px; width:min(420px, 100% - 24px); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:0 8px 28px rgba(16, 28, 38, .22); }
.pin-card[hidden]{ display:none; }
.pin-card .pc-head{ display:flex; gap:12px; align-items:center; }
.pin-card .pc-head b{ display:block; font-family:var(--display); font-size:1.15rem; line-height:1.2; }
.pin-card .pc-head span{ font-size:.85rem; color:var(--muted); }
.pin-card .pc-close{ margin-left:auto; align-self:start; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-size:1.1rem; line-height:1; }
.pin-card .btn-row{ margin-top:10px; }
.pin-card .btn{ padding:7px 13px; font-size:.9rem; }
@media (max-width:640px){
  .brand-sub{ display:none; }
  .brand svg{ width:36px; height:36px; }
  .brand-name{ font-size:1.35rem; }
}

/* ---------- Theme 1.1, second pass: front door, My schools first, school colors, history, contacts ---------- */
.brand{ flex-direction:row; padding:0; }
.rev{ unicode-bidi:bidi-override; direction:rtl; display:inline-block; }
.linkish{ background:none; border:0; padding:0; font:inherit; color:var(--accent); text-decoration:underline; cursor:pointer; }
.head-search{ display:flex; align-items:center; gap:8px; height:42px; padding:0 14px; border:1.5px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); min-width:0; }
.head-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.head-search svg{ width:18px; height:18px; flex:none; }
.head-search input{ border:0; outline:0; background:none; font:inherit; color:var(--ink); width:min(300px, 34vw); min-width:0; }
@media (max-width:640px){ .head-search input{ width:34vw; } .head-search{ padding:0 10px; } }
.home-flow{ display:flex; flex-direction:column; }
.home-flow > *{ order:5; }
.home-flow .mine-strip{ order:1; margin-bottom:28px; }
.home-flow.has-picks .home-news{ order:2; }
.home-flow.has-picks .week{ order:3; margin-top:8px; }
.home-flow.has-picks .hero{ order:4; }
.home-flow.has-picks .hero h1{ font-size:1.7rem; }
.mine-strip .school-card span.dist{ display:block; }
.mine-strip .section-head h2{ font-size:1.9rem; }
.pick[hidden]{ display:none; }
.near-list{ list-style:none; margin:0; padding:10px 14px 14px; display:grid; gap:6px; border-top:1px solid var(--line); background:var(--surface); }
.near-list li{ display:flex; gap:10px; align-items:center; font-size:.95rem; }
.near-list li b{ font-weight:700; }
.near-list li span{ margin-left:auto; color:var(--muted); white-space:nowrap; }
.map-foot{ align-items:center; }
.map-foot .btn{ padding:5px 12px; font-size:.85rem; }
.map-bar{ flex-wrap:wrap; }
.map-live{ position:absolute; inset:0; z-index:1; }
.map-live[hidden]{ display:none; }
.map-wrap{ position:relative; }
.pin-card{ z-index:500; }
.leaflet-container{ font:inherit; background:var(--map-land, #EEF1EC); }
.lf-pin{ width:34px; height:34px; border-radius:8px; background:#fff; border:2.5px solid var(--school, #2B5F80); display:grid; place-items:center; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.35); font:700 12px/1 var(--body, sans-serif); color:#fff; }
.lf-pin img{ width:28px; height:28px; object-fit:contain; }
/* a school's own page wears the school's colors: the band, the rules under headings, buttons and the logo ring */
.page-school .school-head{ background:color-mix(in srgb, var(--school) 13%, var(--surface)); border:1px solid color-mix(in srgb, var(--school) 35%, var(--line)); border-left:8px solid var(--school); border-radius:12px; padding:18px 20px; }
.page-school .section-head{ border-bottom-color:var(--school); }
.page-school .panel{ border-top:4px solid var(--school); }
.page-school main .btn:not(.quiet){ background:var(--school-ink); border-color:var(--school-ink); }
.page-school .date-chip{ border-top-color:var(--school); }
.page-school .ilink svg, .page-school .phone-big svg{ color:var(--school-ink); }
:root:not([data-theme="dark"]) .page-school main a:not(.btn):not(.ilink):not(.phone-big){ color:var(--school-ink); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .page-school main a:not(.btn):not(.ilink):not(.phone-big){ color:var(--accent); } }
.hist{ margin:22px 0; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:0 14px; max-width:520px; }
.hist summary{ cursor:pointer; padding:11px 0; font-weight:700; font-size:.95rem; }
.hist ul{ list-style:none; margin:0; padding:0 0 12px; display:grid; gap:4px; font-size:.95rem; }
.hist li{ display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:6px; }
.hist li span{ color:var(--muted); }
.front{ padding:26px 0 8px; }
.front h1{ font-size:clamp(2.2rem, 6vw, 3.6rem); line-height:1.05; max-width:14ch; margin:0 0 .35em; }
.front .lede{ max-width:60ch; }
.front-pick{ display:flex; gap:14px; align-items:end; flex-wrap:wrap; max-width:640px; border:2px solid var(--ink); margin:22px 0; }
.front-pick .field{ flex:1; min-width:220px; margin:0; }
.front-pick select{ width:100%; height:46px; border:1.5px solid var(--line); border-radius:10px; padding:0 12px; font:inherit; background:var(--surface); color:var(--ink); }
.front-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; margin:8px 0 40px; }
.front-cards .panel{ margin:0; }
.counts{ font-size:1.05rem; }
.county-h{ font-family:var(--display); font-size:1.2rem; margin:22px 0 10px; }
.district-list{ max-width:680px; }
.district-list li > a, .district-list li > .dl-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-decoration:none; color:var(--ink); }
.district-list li > a:hover{ border-color:var(--accent); }
.district-list .dl-name{ font-family:var(--display); font-weight:700; font-size:1.15rem; }
.district-list .dl-count{ color:var(--muted); font-size:.9rem; }
.district-list .stage{ margin-left:auto; }
.stage-live .stage{ background:color-mix(in srgb, #22704C 16%, var(--surface)); color:#22704C; }
.stage-next .stage{ background:color-mix(in srgb, #9A5A0C 16%, var(--surface)); color:#9A5A0C; }
.stage-soon .stage{ background:var(--off-soft, #E8ECF0); color:var(--muted); }
.stage-next .dl-row, .stage-soon .dl-row{ border-style:dashed; }
.ladder{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:14px; max-width:760px; }
.ladder li{ border:1px solid var(--line); border-left:6px solid var(--accent); border-radius:12px; background:var(--surface); padding:14px 18px; }
.ladder h2{ font-size:1.2rem; margin:0 0 .3em; }
.ladder p{ margin:.35em 0; }

.story .meta{ font-size:.9rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; margin:0 0 .4em; }
.page-school main .btn:not(.quiet){ color:#fff; }
.dates li .s:empty{ display:none; }

.head-search button{ border:0; background:none; padding:0; display:grid; place-items:center; color:inherit; cursor:pointer; }
@media (max-width:640px){
  .head-search{ width:42px; padding:0; justify-content:center; }
  .head-search input{ display:none; }
}

/* 1.3.6: long names and emails stayed on one line and ran past the card's edge */
.person > div, .person > .person-body { min-width: 0; flex: 1 1 auto; }
.person .c, .panel p, .panel li { overflow-wrap: anywhere; }
.rev { max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: bottom; font-size: .92em; }
.person, .panel { box-sizing: border-box; border-radius: var(--r, 12px); }

/* ------------------------------------------------------------------ 2026.11.12 */
/* language switch */
.lang-sw{ position:relative; }
.lang-sw summary{ list-style:none; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); cursor:pointer; font-size:.9rem; font-weight:700; white-space:nowrap; }
.lang-sw summary::-webkit-details-marker{ display:none; }
.lang-sw summary svg{ width:17px; height:17px; }
.lang-sw .caret{ font-size:.75rem; color:var(--muted); }
.lang-sw ul{ position:absolute; right:0; top:calc(100% + 6px); z-index:30; list-style:none; margin:0; padding:6px; min-width:150px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14); }
.lang-sw button{ display:block; width:100%; text-align:left; padding:9px 12px; border:0; border-radius:8px; background:none; color:var(--ink); font:inherit; cursor:pointer; }
.lang-sw button:hover, .lang-sw button[aria-current="true"]{ background:var(--accent-soft); font-weight:700; }

/* the handbook, first thing on a school page */
.hb{ display:grid; grid-template-columns:auto 1fr auto; gap:14px 18px; align-items:center; margin:18px 0 24px; padding:18px 20px;
     background:var(--surface); border:1px solid var(--line); border-left:6px solid var(--school, var(--accent)); border-radius:12px; }
.hb-icon{ width:52px; height:52px; display:grid; place-items:center; border-radius:12px; background:var(--accent-soft); color:var(--school-ink, var(--accent)); }
.hb-icon svg{ width:28px; height:28px; }
.hb-kicker{ margin:0; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.hb h2{ margin:2px 0 0; font-size:1.45rem; line-height:1.2; overflow-wrap:anywhere; }
.hb h2 a{ color:var(--ink); text-decoration:none; }
.hb h2 a:hover{ text-decoration:underline; }
.hb-alt{ margin:2px 0 0; color:var(--muted); font-style:italic; }
.hb-meta{ margin:4px 0 0; font-size:.92rem; color:var(--muted); }
.hb-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.hb-preview{ grid-column:1 / -1; }
.hb-none{ border-left-color:var(--off); }
.hb-none .hb-icon{ background:var(--off-soft); color:var(--off); }

/* download menu: English by default, other languages one tap away */
.dl{ display:inline-flex; align-items:stretch; position:relative; }
.dl-main svg{ width:16px; height:16px; }
.dl-lang{ font-weight:400; opacity:.85; }
.dl:has(.dl-more) .dl-main{ border-top-right-radius:0; border-bottom-right-radius:0; }
.dl-more summary{ list-style:none; border-top-left-radius:0; border-bottom-left-radius:0; border-left:1px solid rgba(255,255,255,.35); padding-left:10px; padding-right:12px; }
.dl-more summary::-webkit-details-marker{ display:none; }
.dl-more ul{ position:absolute; right:0; top:calc(100% + 6px); z-index:20; list-style:none; margin:0; padding:6px; min-width:160px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14); }
.dl-more a{ display:block; padding:9px 12px; border-radius:8px; color:var(--ink); text-decoration:none; }
.dl-more a:hover, .dl-more a[aria-current="true"]{ background:var(--accent-soft); font-weight:700; }
.btn.sm{ padding:6px 12px; font-size:.86rem; }
.dl-big .btn{ padding:11px 18px; font-size:1rem; }
.no-es .dl-main::after{ content:"EN"; font-size:.7rem; font-weight:700; margin-left:4px; padding:1px 5px; border-radius:4px; background:rgba(255,255,255,.25); }

/* document cards */
.dcards{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.dcard{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.dcard-main{ display:flex; gap:12px; align-items:flex-start; min-width:0; flex:1 1 300px; }
.dbadge{ flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--accent-soft); color:var(--accent); }
.dbadge svg{ width:20px; height:20px; }
.dcard-text{ min-width:0; }
.dcard-title{ margin:0; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.dcard-title a{ color:var(--ink); }
.dcard-alt{ margin:2px 0 0; font-size:.9rem; font-style:italic; color:var(--muted); }
.dcard-meta{ margin:3px 0 0; display:flex; flex-wrap:wrap; gap:4px 10px; font-size:.84rem; color:var(--muted); }
.dcard-meta span + span::before{ content:"\00b7"; margin-right:10px; }
.dcard-meta .langs{ color:var(--ok); font-weight:700; }
.dcard-note{ margin:4px 0 0; font-size:.86rem; color:var(--muted); }
.dcard-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.dcard-preview{ flex:1 1 100%; }
.dcard-preview iframe{ display:block; width:100%; height:min(78vh, 760px); border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.dcard-preview p{ margin:6px 0 0; }
.doc-tools{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; margin:6px 0 20px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.doc-tools .doc-q{ flex:1 1 280px; }
.doc-tools input[type=search], .school-find input[type=search]{ width:100%; padding:11px 14px; font:inherit; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); }
.doc-tools .select-label{ display:flex; flex-direction:column; gap:3px; font-size:.84rem; font-weight:700; color:var(--muted); }
.doc-tools select{ padding:9px 10px; font:inherit; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); max-width:100%; }
.doc-tools .chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 100%; }
.doc-tools .hint{ margin:0; flex:1 1 100%; font-size:.86rem; color:var(--muted); }
.doc-group{ margin:0 0 26px; }
.doc-group h2{ font-size:1.25rem; margin:0 0 10px; }
.doc-group h2 a{ color:var(--ink); text-decoration:none; }
.doc-privacy{ margin-top:18px; }

/* a school's calendar */
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface); }
.seg button{ border:0; background:none; padding:6px 13px; font:inherit; font-size:.88rem; color:var(--ink); cursor:pointer; }
.seg button + button{ border-left:1px solid var(--line); }
.seg button[aria-pressed="true"]{ background:var(--ink); color:var(--surface); font-weight:700; }
.school-cal .section-head{ align-items:center; flex-wrap:wrap; }
.cal-nav{ display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.cal-nav b{ flex:1; text-align:center; font-family:var(--display); font-size:1.15rem; }
.wk{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.wk-day{ padding:10px 8px 12px; border-left:1px solid var(--line); min-height:8rem; min-width:0; }
.wk-day:first-child{ border-left:0; }
.wk-day.is-weekend{ background:var(--bg); }
.wk-day.is-today{ box-shadow:inset 0 3px 0 var(--accent); }
.wk-day.is-off{ background:var(--off-soft); }
.wk-h{ margin:0 0 6px; font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.wk-h b{ font-family:var(--display); font-size:1.3rem; color:var(--ink); }
.wk-evs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:.86rem; line-height:1.3; }
.wk-evs li{ padding-left:8px; border-left:3px solid var(--line); overflow-wrap:anywhere; }
.wk-evs .t{ font-weight:700; }
.wk-evs .where{ display:block; color:var(--muted); font-size:.8rem; }
.ev-mine{ border-left-color:var(--school, var(--accent)) !important; }
.ev-off{ border-left-color:var(--off) !important; }
.ev-short{ border-left-color:var(--c-schedule) !important; }
.quiet{ margin:0; color:var(--muted); font-size:.84rem; }
.mo{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.mo-row{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); }
.mo-head span{ padding:6px 0; text-align:center; font-size:.78rem; font-weight:700; color:var(--muted); background:var(--bg); }
.mo-cell{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:5.2rem; min-width:0; padding:6px; border:0; border-top:1px solid var(--line); border-left:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.mo-cell:first-child{ border-left:0; }
.mo-cell.out{ color:var(--muted); background:var(--bg); }
.mo-cell.is-off{ background:var(--off-soft); }
.mo-cell.is-today .n{ background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:0 6px; }
.mo-cell.is-picked{ outline:2px solid var(--ink); outline-offset:-2px; }
.mo-cell .n{ font-weight:700; font-size:.92rem; }
.mo-dots{ display:flex; gap:3px; }
.mo-dots i{ width:8px; height:8px; border-radius:50%; background:var(--muted); }
.mo-dots .d-mine{ background:var(--school, var(--accent)); }
.mo-t{ font-size:.74rem; line-height:1.2; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; width:100%; }
.mo-day{ margin-top:12px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.mo-day-h{ margin:0 0 8px; font-weight:700; }
.cal-key{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:10px 0 0; }
.key{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-left:6px; }
.key-mine{ background:var(--school, var(--accent)); margin-left:0; }
.key-off{ background:var(--off); }
.key-short{ background:var(--c-schedule); opacity:.55; }
@media (max-width: 46rem){
  .hb{ grid-template-columns:auto 1fr; }
  .hb-actions{ grid-column:1 / -1; justify-content:flex-start; }
  .wk{ grid-template-columns:1fr; }
  .wk-day{ border-left:0; border-top:1px solid var(--line); min-height:0; display:grid; grid-template-columns:5.5rem 1fr; gap:8px; }
  .wk-day:first-child{ border-top:0; }
  .wk-h{ margin:0; }
  .mo-cell{ min-height:3.2rem; padding:4px; }
  .mo-t{ display:none; }
}

/* home: at a glance, countdown, every school's handbook */
.pulse{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:22px 0 26px; }
.stat{ display:flex; flex-direction:column; justify-content:center; gap:2px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; color:var(--ink); text-decoration:none; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.stat:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.stat b{ font-family:var(--display); font-size:2rem; line-height:1; color:var(--accent); }
.stat span{ font-size:.88rem; color:var(--muted); }
.stat-meet{ grid-column:span 2; background:var(--accent); border-color:var(--accent); }
.stat-meet b, .stat-meet span, .stat-meet .stat-k{ color:var(--accent-ink); }
.stat-meet .stat-k{ font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.9; }
.stat-meet b{ font-size:1.7rem; }
@media (max-width: 30rem){ .stat-meet{ grid-column:1 / -1; } }
@media (prefers-reduced-motion: reduce){ .stat, .hb-tile{ transition:none; } .stat:hover, .hb-tile:hover{ transform:none; } }
.hb-row{ margin-bottom:28px; }
.hb-strip{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(190px, 1fr); gap:10px; overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x proximity; }
.hb-tile{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; color:var(--ink); text-decoration:none; scroll-snap-align:start; transition:transform .15s ease, border-color .15s ease; }
.hb-tile:hover{ transform:translateY(-2px); border-color:var(--accent); }
.hb-tile span{ display:flex; flex-direction:column; min-width:0; }
.hb-tile b{ font-size:.95rem; line-height:1.2; overflow-wrap:anywhere; }
.hb-tile small{ font-size:.78rem; color:var(--muted); }
.head-links{ display:inline-flex; gap:14px; align-items:baseline; }

/* schools: find one, and the ones you looked at */
.school-find{ margin:4px 0 18px; }
.school-find .hint{ margin:6px 0 0; font-size:.86rem; color:var(--muted); }
.hb-tick{ color:var(--ok); font-weight:700; }
.hb-tick::before{ content:"\2713 "; }
.recent .school-grid{ margin-bottom:6px; }

/* ---------------------------------------------------------------- 2026.11.13 */
.nav-dd{ position:relative; display:flex; align-items:center; flex:none; }
.nav-dd > a{ padding-right:4px !important; }
.dd-btn{ border:0; background:none; color:var(--muted); font:inherit; font-size:.8rem; padding:6px 8px 6px 2px; cursor:pointer; border-radius:999px; }
.dd-btn:hover,.nav-dd.open .dd-btn{ color:var(--ink); }
.dd{ display:none; position:absolute; top:100%; left:0; z-index:60; min-width:220px; margin:4px 0 0; padding:6px; list-style:none;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.14); }
.dd.dd-end{ left:auto; right:0; }
.nav-dd.open .dd{ display:block; }
.dd a{ display:flex !important; justify-content:space-between; gap:12px; border-radius:8px !important; color:var(--ink) !important; background:none !important; padding:8px 10px !important; }
.dd a:hover,.dd a:focus{ background:var(--surface-2) !important; }
.dd .dd-sep{ border-top:1px solid var(--line); margin-top:4px; padding-top:4px; }
@media (min-width: 900px){
  .nav{ overflow:visible; flex-wrap:wrap; }
  .nav-dd:hover .dd,.nav-dd:focus-within .dd{ display:block; }
}
.mt-note{ background:var(--accent-soft); color:var(--ink); font-size:.88rem; padding:6px 0; }
.mt-note .wrap{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.linkish{ background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; cursor:pointer; font:inherit; }

/* trustees on their area's color */
.trustees{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--gap, 16px); }
.trustee{ --area:#2B5F80; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); }
.t-photo{ position:relative; background:var(--area); aspect-ratio:4/4.2; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.t-photo img{ width:78%; height:94%; object-fit:cover; object-position:top; border-radius:12px 12px 0 0; display:block; }
.t-pending{ color:#fff; opacity:.85; margin:auto; font-weight:700; }
.t-area{ position:absolute; top:10px; left:10px; background:rgba(255,255,255,.95); color:var(--area); font-weight:800; font-size:.85rem; padding:3px 10px; border-radius:999px; }
.t-body{ padding:12px 14px 14px; border-top:5px solid var(--area); }
.t-body h3{ margin:0 0 2px; font-size:1.08rem; }
.t-role{ margin:0 0 8px; color:var(--muted); font-size:.92rem; }
.t-body .c{ margin:2px 0; font-size:.92rem; overflow-wrap:anywhere; }

.area-picker{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.area-btn{ --area:var(--accent); display:flex; align-items:center; gap:8px; border:2px solid var(--area); background:var(--surface); color:var(--ink);
  border-radius:12px; padding:6px 12px 6px 6px; font:inherit; font-size:.9rem; cursor:pointer; }
.area-btn b{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--area); color:#fff; }
.area-btn.all{ padding:6px 14px; font-weight:700; }
.area-btn[aria-pressed="true"]{ background:var(--area); color:#fff; }
.area-btn[aria-pressed="true"] b{ background:#fff; color:var(--area); }
.area-btn.all[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); }
.area-view{ border:1px solid var(--line); border-left:6px solid var(--area, var(--accent)); border-radius:14px; padding:12px 14px; background:var(--surface); }
.area-title{ font-weight:800; font-size:1.1rem; margin:0; }
.area-frame{ margin:10px 0; min-height:140px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; }
.area-frame iframe{ width:100%; height:min(72vh, 620px); border:1px solid var(--line); border-radius:10px; background:#fff; }

/* administration directory */
.dir-tools,.pol-tools{ margin:12px 0 4px; }
.dir-tools .field input,.pol-tools .field input{ width:100%; max-width:560px; }
.dir-group h2,.pol-series h2{ margin-top:28px; }
.count{ font-size:.8rem; color:var(--muted); font-weight:600; background:var(--surface-2); border-radius:999px; padding:1px 8px; vertical-align:middle; }
.dir{ list-style:none; padding:0; margin:8px 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.dir-card{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:14px; padding:12px; background:var(--surface); }
.dir-photo,.dir-initials{ flex:none; width:64px; height:64px; border-radius:12px; object-fit:cover; object-position:top; }
.dir-initials{ display:grid; place-items:center; background:var(--surface-2); color:var(--muted); font-weight:800; font-size:1.1rem; }
.dir-body{ min-width:0; }
.dir-name{ margin:0; font-weight:800; }
.dir-title summary{ cursor:pointer; color:var(--accent); font-size:.93rem; }
.dir-title p{ margin:6px 0; font-size:.92rem; }
.dir-help{ margin:4px 0 0; font-size:.88rem; color:var(--muted); }
.dir-contact{ margin:4px 0 0; font-size:.9rem; overflow-wrap:anywhere; }

/* board policies */
.pol-list{ list-style:none; padding:0; margin:6px 0 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.pol{ display:grid; grid-template-columns:5.5em 1fr auto; gap:10px; align-items:center; padding:8px 12px; border-top:1px solid var(--line); }
.pol:first-child{ border-top:0; }
.pol-num{ font-weight:800; font-variant-numeric:tabular-nums; }
.pol-parts{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.pol-part{ font-size:.78rem; font-weight:700; text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:2px 7px; }
.pol-part:hover{ background:var(--accent); color:var(--surface) !important; border-color:var(--accent); }
@media (max-width: 560px){ .pol{ grid-template-columns:4.6em 1fr; } .pol-parts{ grid-column:2; justify-content:flex-start; } }

/* awards, registration, at a glance */
.awards{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.awards li{ border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--surface); display:flex; flex-direction:column; gap:4px; }
.awards b{ font-family:var(--display); font-size:1.5rem; color:var(--accent); }
.aw-when{ color:var(--muted); font-size:.88rem; }
.reg-card{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; border:2px solid var(--accent);
  border-radius:16px; padding:14px 18px; margin:20px 0; background:var(--accent-soft); }
.reg-card h2{ margin:0; }
.reg-card p{ margin:4px 0 0; }
.reg-list{ list-style:none; padding:0; display:grid; gap:10px; }
.reg{ display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:var(--surface); }
.reg-level{ margin:0; font-weight:800; }
.reg .btn-row{ margin:0; display:flex; gap:8px; flex-wrap:wrap; }
.glance{ margin:8px 0 20px; }
.glance ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.glance li{ display:flex; align-items:baseline; gap:6px; border:1px solid var(--line); border-radius:999px; padding:6px 14px; background:var(--surface); }
.glance b{ font-family:var(--display); font-size:1.15rem; }
.glance span{ color:var(--muted); font-size:.9rem; }
.learn-district{ border:1px solid var(--line); border-radius:16px; padding:14px 18px; margin:0 0 20px; background:var(--surface); }
.eld-grid{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:6px 16px; }
.learn-links li{ margin:6px 0; }
.dcard-note.warn-text{ color:var(--off, #9b2c2c); }

.dcard-source{ grid-column:1 / -1; margin:6px 0 0; font-size:.85rem; color:var(--muted); }
.meet-list li{ margin:4px 0; }