:root { --paper: #FBF8F3; --panel: #FFFFFF; --ink: #0E2338; --muted: #5D6470; --line: #EEE8DF; --line2: #DDD5C9;
  --coral: #F26B57; --mint: #E3F4EA; --butter: #FFF2CC; --peach: #FDE9E1;
  --accent: #1D5FD1; --brand: #1D5FD1; --soft: #EAF1FB; --amber: #F5B83D; --good: #1E7A47; --warn: #B25000;
  --pri: #2F5FA8; --pri-t: #EAF1FB; --sec: #3D7A57; --sec-t: #E8F2EC; --sen: #A35A26; --sen-t: #FBEFE4;
  --ph: var(--brand); --ph-t: var(--soft);
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 20px; color-scheme: light; }
.ph-primary { --ph: var(--pri); --ph-t: var(--pri-t); }
.ph-secondary { --ph: var(--sec); --ph-t: var(--sec-t); }
.ph-special { --ph: var(--sen); --ph-t: var(--sen-t); }

.locwrap { margin: 14px 0 0; max-width: 34rem; }
.locwrap svg { width: 100%; height: auto; display: block; border-radius: 16px; }
.locmap .t text { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; text-anchor: middle; paint-order: stroke; stroke: #EEF2F6; stroke-width: 6px; }
.locmap .pl { font-size: 25px; fill: #5B6573; font-weight: 600; letter-spacing: 0.02em; }
.locmap .sl { font-size: 21px; fill: #6B7480; }
.locmap .rl { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 19px; fill: #6B7480; text-anchor: middle; }
.locwrap figcaption { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 17px; line-height: 1.47; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
main { max-width: 64rem; margin-inline: auto; padding: 24px max(20px, env(safe-area-inset-right, 0px)) 16px max(20px, env(safe-area-inset-left, 0px)); }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1.07; font-weight: 700; letter-spacing: -0.035em; margin: 6px 0 10px; }
h2 { font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; margin: 40px 0 12px; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 18px 0 4px; letter-spacing: -0.015em; }
p, li { max-width: 68ch; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.crumbs { font-size: 0.85rem; color: var(--muted); }
.facts { color: var(--muted); margin-top: 0; }
.cta { text-align: center; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 12px; background: var(--brand); color: #fff; text-decoration: none; font-weight: 600; }
.cta:hover { filter: brightness(0.94); text-decoration: none; }
.note { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.answer { font-size: 1.12rem; line-height: 1.45; margin: 4px 0 8px; }
.src { font-size: 0.78rem; color: var(--muted); margin: 0; }
.card { background: var(--panel); border-radius: var(--r); padding: 18px 20px; }
.card > p:first-child { margin-top: 0; }
.card > p:last-child { margin-bottom: 0; }
.card.rows { padding: 0; overflow: hidden; }
.card .tw { padding: 0; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row span { min-width: 0; }
.row small { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.row b { flex: none; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
a.row { color: var(--ink); }
a.row:hover { text-decoration: none; background: #FAFAFC; }
a.row::after { content: "›"; color: #86868B; margin-left: -4px; font-size: 1.2rem; }
.box { max-width: none; position: relative; padding-left: 34px !important; background: var(--panel); border-radius: 14px; padding: 14px 16px; margin: 18px 0; font-size: 0.9rem; line-height: 1.5; }
.box > * { min-width: 0; overflow-wrap: break-word; }
.box::before { content: ""; position: absolute; left: 16px; top: 21px; width: 8px; height: 8px; border-radius: 4px; background: var(--amber); }
ul.list { list-style: none; padding: 0; margin: 0; background: var(--panel); border-radius: var(--r); overflow: hidden; }
ul.list li { max-width: none; border-bottom: 1px solid var(--line); }
ul.list li:last-child { border-bottom: 0; }
ul.list li a { display: block; padding: 14px 20px; color: var(--ink); }
ul.list li a:hover { text-decoration: none; background: #FAFAFC; }
ul.list li a b { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em; }
ul.list .meta { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
ul.big { list-style: none; padding: 0; display: grid; gap: 10px; }
ul.big li { margin: 0; max-width: none; font-size: 1rem; padding: 16px 20px; background: var(--panel); border-radius: 16px; }
.areas { columns: 2 16rem; column-gap: 20px; }
.areas section { break-inside: avoid; margin-bottom: 8px; }
.areas h2 { font-size: 1.3rem; margin-top: 24px; }
.tw { overflow-x: auto; background: var(--panel); border-radius: var(--r); padding: 6px 12px; }
table.rank { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.rank th, table.rank td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.rank tr:last-child th, table.rank tr:last-child td { border-bottom: 0; }
table.rank thead th { font-size: 0.75rem; color: var(--muted); font-weight: 500; }
table.rank tbody th { font-weight: 400; }
table.rank td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.faq { background: var(--panel); border-radius: var(--r); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 600; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #86868B; font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 20px 16px; color: #424245; font-size: 0.95rem; }
.faq h3 { margin: 0; padding: 16px 20px 4px; }
.faq h3 + p { margin: 0; padding: 0 20px 14px; border-bottom: 1px solid var(--line); }
/* full-width hero band, tinted by school type */
.band { background: var(--ph-t); }
.band .in { max-width: 64rem; margin-inline: auto; padding: 28px max(20px, env(safe-area-inset-right, 0px)) 30px max(20px, env(safe-area-inset-left, 0px)); }
.band .back { font-size: 0.88rem; }
.eyebrow { margin: 14px 0 0; font-size: 0.88rem; font-weight: 600; color: var(--ph); }
.band h1 { margin: 4px 0 6px; }
.band .facts { margin: 0; font-size: 1rem; }
.sec { scroll-margin-top: 60px; }
.sec > h2 { margin-top: 44px; }
/* the answer card */
.answer-card { background: var(--panel); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.answer-card p { margin: 0; }
.answer-card .kicker { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.answer-card .figure { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 11vw, 3.6rem); letter-spacing: -0.045em; line-height: 1; }
.answer-card .answer { margin: 0; }
.answer-card .mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 14px; }
.answer-card .mini p + p { border-left: 1px solid var(--line); padding-left: 14px; }
.answer-card .mini b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.answer-card .mini span { font-size: 0.75rem; color: var(--muted); }
.rules { margin: 0 0 12px; padding-left: 1.3em; }
.rules li { max-width: none; margin: 6px 0; }
.hist { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.hist .hy { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 0.92rem; }
.hist .yr { color: var(--muted); font-variant-numeric: tabular-nums; }
.hist .bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.hist .bar i { display: block; height: 100%; border-radius: 4px; background: var(--ph); }
.hist b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hist .why { grid-column: 2 / -1; color: var(--muted); font-size: 0.85rem; }
.hist .hnote { font-size: 0.85rem; color: var(--warn); font-weight: 600; }
.answer-card details { border-top: 1px solid var(--line); padding-top: 10px; font-size: 0.92rem; }
.answer-card details summary { cursor: pointer; color: var(--accent); }
.answer-card details p { margin-top: 8px; }
/* at a glance */
.glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { background: var(--panel); border-radius: 18px; padding: 16px; }
.tile p { margin: 0; }
.tile .k { font-size: 0.8rem; color: var(--muted); min-height: 2.5em; line-height: 1.25; }
.tile .v { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; margin: 2px 0; }
.tile .v.word { font-size: 1.45rem; }
.tile .t { font-size: 0.8rem; color: var(--muted); }
.sec h3 { font-size: 1.05rem; margin: 22px 0 6px; } .sec h3:first-of-type { margin-top: 4px; } p.lead { margin: 0 0 10px; color: var(--muted); font-size: 0.92rem; }
details.more { margin: 10px 0 4px; } details.more summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 6px 0; }
table.yrs th small { display: block; font-weight: 400; color: var(--muted); font-size: 0.75rem; } table.yrs tbody th { font-weight: 500; white-space: normal; min-width: 9rem; }
@media (max-width: 480px) { table.yrs, table.subj.sortable { font-size: 0.84rem; } table.yrs th, table.yrs td, table.subj th, table.subj td { padding: 8px 5px; }
  table.yrs tbody th { min-width: 6.5rem; } table.subj.sortable tbody th { min-width: 6.5rem; } }
p.oc { font-size: 0.88rem; color: var(--muted); }
.pg { font-weight: 600; }
a.tile { display: block; color: var(--ink); text-decoration: none; }
a.tile:hover { text-decoration: none; box-shadow: 0 2px 12px rgba(14,35,56,.08); }
.yrrow { background: var(--panel); border-radius: 22px; padding: 16px; margin: 10px 0; }
.yrrow .k { margin: 0 0 10px; font-size: 0.85rem; color: var(--muted); }
.yrs3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.yrs3 div { background: var(--paper); border-radius: 14px; padding: 10px 12px; }
.yrs3 span { display: block; font-size: 0.8rem; color: var(--muted); } .yrs3 b { font-size: 1.35rem; font-family: var(--font-display); letter-spacing: -0.02em; }
.yrrow .note { margin: 10px 0 0; }
.wk { background: var(--soft); border-radius: 18px; padding: 14px 18px; margin-bottom: 10px; }
.wk ul { margin: 6px 0 0; padding-left: 1.1rem; } .wk li { margin: 4px 0; font-size: 0.95rem; } .wk .kicker { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.vt { display: inline-block; font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.vt.up { color: var(--accent); } .vt.dn { color: #6E4A12; }
.tile .t + .t { margin-top: 2px; }
.callout { display: flex; gap: 14px; align-items: center; background: var(--soft); border-radius: 18px; padding: 14px 16px; margin: 10px 0; }
.callout .big { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; margin: 0; flex: none; min-width: 3.2rem; }
.callout p { margin: 0; } .callout small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 4px; }
#results .hist { background: var(--panel); border-radius: 18px; padding: 14px 16px; border-top: 0; margin: 10px 0; }
.ofhead { background: var(--panel); border-radius: 18px; padding: 16px; margin-bottom: 10px; }
.ofhead p { margin: 0; } .ofhead .k { font-size: 0.8rem; color: var(--muted); } .ofhead .v { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; }
.ofhead .t { font-size: 0.85rem; color: var(--muted); }
.sec > details.more { background: var(--panel); border-radius: 18px; padding: 6px 16px; margin: 10px 0; }
.sec > details.more[open] { padding-bottom: 12px; }
.sec > figure.oq { background: var(--panel); margin: 10px 0; }
.sec > details.more .tw { padding: 0; } .sec > details.more .card { padding: 0; } .pg.up { color: var(--good, #1a7f37); } .pg.dn { color: var(--warn, #b54708); }
ul.cards-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { ul.cards-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
table.sortable th small, table.sortable td small, table.subj td small { display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; }
table.sortable tbody th { font-weight: 500; min-width: 8.5rem; }
table.sortable thead button { all: unset; cursor: pointer; color: var(--brand); }
table.sortable thead button::after { content: ' ↕'; color: var(--muted); }
table.sortable thead th[aria-sort=ascending] button::after { content: ' ↑'; }
table.sortable thead th[aria-sort=descending] button::after { content: ' ↓'; }
table.sortable td { white-space: nowrap; }
.saverow { margin: 12px 0 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 0.9rem; }
.savebtn { font: inherit; font-weight: 600; border: 0; border-radius: 999px; padding: 9px 16px; background: #fff; color: var(--brand); cursor: pointer; }
.savebtn.on { background: var(--ink); color: #fff; }
ul.tlist li { padding: 4px 0; } ul.tlist small { color: var(--muted); }
ul.visits { list-style: none; padding: 0; margin: 0 0 6px; } ul.visits li { padding: 8px 0; border-bottom: 1px solid var(--line); }
table.od td small, table.bt th small, table.bt td small { display: block; color: var(--muted); font-weight: 400; } table.bt th { min-width: 11rem; } table.od th { white-space: nowrap; width: 5.5rem; } table.bt td { white-space: normal; }
figure.cfig { margin: 12px 0; } figure.cfig svg { width: 100%; height: auto; display: block; border-radius: 14px; }
figure.cfig figcaption { font-size: 0.82rem; color: var(--muted); margin-top: 6px; } figure.cfig .src { display: block; margin-top: 4px; }
figure.oq { margin: 14px 0; padding: 14px 16px; background: var(--paper); border-radius: 14px; }
figure.oq figcaption { font-size: 0.82rem; color: var(--muted); }
figure.oq blockquote { margin: 6px 0; font-size: 0.98rem; }
details.ohist { margin: 12px 0; } details.ohist summary { cursor: pointer; color: var(--brand); font-weight: 600; padding: 6px 0; }
details.ohist ul { list-style: none; padding: 0; margin: 6px 0; font-size: 0.9rem; } details.ohist li { padding: 6px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 8.2rem 1fr; gap: 8px; }
details.ohist li span:first-child { color: var(--muted); }
.calc label { display: block; font-weight: 600; margin-bottom: 6px; }
.calc input { font: inherit; font-size: 1.05rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 220px; }
#calc-out .answer-card { margin-top: 14px; }
.prose td code { white-space: normal; word-break: break-all; font-size: 0.78rem; }
dl.outlook dt { font-weight: 600; margin-top: 14px; } dl.outlook dd { margin: 2px 0 0; }
table.rank tr.tot th, table.rank tr.tot td { font-weight: 600; }
ul.cards-list li { max-width: none; position: relative; }
ul.cards-list li .web { position: absolute; right: 20px; top: 18px; font-size: 0.8rem; }
ul.cards-list li .scard .nm { padding-right: 110px; }
.scard { display: flex; flex-direction: column; gap: 2px; height: 100%; background: var(--panel); border-radius: var(--r); padding: 18px 20px; color: var(--ink); }
.scard:hover { text-decoration: none; box-shadow: 0 4px 18px rgba(0,0,0,0.07); }
.scard .nm { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.scard .mt { font-size: 0.85rem; color: var(--muted); }
.scard .figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.scard .figs > div { display: flex; flex-direction: column; padding: 0 10px; min-width: 0; }
.scard .figs > div:first-child { padding-left: 0; }
.scard .figs > div + div { border-left: 1px solid var(--line); }
.scard .k { font-size: 0.72rem; color: var(--muted); }
.scard .figs b { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.scard .n { font-size: 0.72rem; color: var(--muted); line-height: 1.3; }
.band .lede { font-size: 1.1rem; color: var(--ink); margin: 6px 0 0; max-width: 60ch; }
.cta-row { margin: 4px 0 0; }
.school main, .school .band .in, .school .phasebar .in { max-width: 52rem; }
.prose { background: var(--panel); border-radius: 22px; padding: 8px clamp(20px, 5vw, 48px) 28px; }
.prose h2 { font-size: clamp(1.35rem, 3.4vw, 1.7rem); margin-top: 32px; }
.prose .box { background: var(--paper); }
.prose ul.list, .prose .card { background: var(--paper); }
.prose table.rank td { white-space: normal; }
.prose .tw { background: var(--paper); }
.pdot { display: inline-block; width: 10px; height: 10px; border-radius: 5px; margin-right: 10px; vertical-align: 0.05em; }
ul.plain { list-style: none; padding: 0; margin: 0 0 8px; font-size: 0.92rem; line-height: 1.8; }
.scard .figs b { font-size: clamp(1rem, 4.6vw, 1.25rem); overflow-wrap: break-word; }
.scard .figs b.long { font-size: clamp(0.92rem, 3.9vw, 1.1rem); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media print { .cta, .crumbs, .site-head, .phasebar, .menu { display: none; } body { background: #fff; color: #000; } .card, .answer-card, .tile { border: 1px solid #999; } }

.site-head { position: relative; z-index: 20; border-bottom: 1px solid rgba(0,0,0,0.08); }
.site-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,0.86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.site-head .in { max-width: 64rem; margin-inline: auto; height: 52px; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.brand svg { flex: none; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.wordmark span { color: var(--brand); }
.site-nav { display: flex; gap: 0 28px; font-size: 0.82rem; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 14px 0; opacity: 0.85; }
.site-nav a:hover { opacity: 1; color: var(--brand); }
.menu { display: none; }
body:has(.menu[open]) { overflow: hidden; }
@media (max-width: 860px) {
  .site-nav { display: none; }
  .menu { display: block; }
  .menu > summary { list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-right: -10px; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary .x { display: none; }
  .menu[open] > summary .x { display: block; }
  .menu[open] > summary .bars { display: none; }
  .menu[open] > summary { position: fixed; top: 4px; right: max(10px, env(safe-area-inset-right, 0px)); z-index: 31; }
  .menu-panel { position: fixed; inset: 0; z-index: 30; background: #FFFFFF; overflow-y: auto; padding: 76px 40px 32px; display: flex; flex-direction: column; gap: 28px; }
  .menu-panel .big { display: flex; flex-direction: column; gap: 12px; }
  .menu-panel .big a { font-family: var(--font-display); font-size: 1.85rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 14px; }
  .menu-panel .dot { width: 12px; height: 12px; border-radius: 6px; flex: none; }
  .menu-panel .small { display: flex; flex-direction: column; gap: 12px; }
  .menu-panel .small p { margin: 0; font-size: 0.75rem; color: var(--muted); }
  .menu-panel .small a { font-weight: 600; font-size: 0.95rem; color: var(--ink); text-decoration: none; }
}
.phasebar { position: sticky; top: 0; z-index: 10; background: rgba(245,245,247,0.86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,0.08); }
.phasebar .in { max-width: 64rem; margin-inline: auto; height: 48px; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 22px; font-size: 0.88rem; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.phasebar .in::-webkit-scrollbar { display: none; }
.phasebar a { color: var(--ink); text-decoration: none; padding: 13px 0 11px; border-bottom: 2px solid transparent; }
.phasebar a[aria-current] { font-weight: 600; border-bottom-color: var(--ph); }
.phasebar .title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; margin-right: auto; }
.phasebar .pill { margin-left: auto; height: 28px; padding: 0 14px; border-radius: 999px; background: var(--brand); color: #FFFFFF; display: flex; align-items: center; font-weight: 600; font-size: 0.8rem; border: 0; }
.site-foot { background: var(--paper); border-top: 1px solid var(--line2); margin-top: 56px; color: var(--muted); }
.site-foot .in { max-width: 64rem; margin-inline: auto; padding: 24px max(20px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); display: flex; flex-wrap: wrap; gap: 18px 48px; justify-content: space-between; font-size: 0.78rem; line-height: 1.55; }
.site-foot .about-us { flex: 1 1 26rem; display: flex; flex-direction: column; gap: 10px; }
.site-foot .wordmark { font-size: 1rem; }
.site-foot p { margin: 0; max-width: 64ch; }
.site-foot nav { display: flex; flex-direction: column; gap: 8px; }
.site-foot a { color: var(--ink); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }

body { background: var(--paper); color: var(--ink); }
.card, .tile, .tw, .ofhead, .sec > details.more, figure.oq { border-radius: 22px; }
.cta, .savebtn, .start button { border-radius: 999px !important; }
.band { background: var(--ph-t); }
.wk { background: var(--panel); }
/* same width and inner padding for every box on a school page */
.card .tile, .sec .card .glance .tile { background: var(--paper); }
.row > span { flex: 1; min-width: 0; }
.row > b { text-align: right; }
.sec > .note, .sec .card .note, .sec p.note { max-width: none; }
.card, .tile, .tw, .ofhead, .yrrow, .callout, .wk, .sec > details.more, figure.oq { box-sizing: border-box; }
.wk .kicker { color: #A8461F; }
.wk li::marker { color: var(--coral); }
.callout { background: var(--mint); }
.callout .big { color: #1F6B42; }
.tile { padding: 16px; }
.box::before { background: var(--coral) !important; }
.spot { flex: none; width: 46px; height: 46px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; }
a.row .spot { margin-right: 12px; }
.rowi { display: flex; align-items: center; }

.card, .answer-card, .ofhead, .yrrow, .wk, .callout, figure.oq { padding-left: 20px; padding-right: 20px; }
.sec > details.more { padding-left: 20px; padding-right: 20px; }
.row { padding-left: 20px; padding-right: 20px; }
.glance .tile { padding: 16px; }