/* GENERATED from frontend-homepage.html by build-theme.mjs. Do not edit.
This is the template's OWN css. The rules it shares with every other template
live in shared.inc.css and are enqueued before this one. */
/* ---------- header ---------- */
.top{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;padding:26px 0 0}
.top h1{margin:0;font-size:var(--t-page);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.top .who{margin:4px 0 0;font-size:var(--t-note);color:var(--ink-3);max-width:56ch}
.yrpick{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-ui);color:var(--ink-3);font-weight:600}
.yrpick select{
height:40px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);
color:var(--ink);font:inherit;font-size:var(--t-row);font-weight:500;padding:0 28px 0 11px;cursor:pointer;
}
.yrpick select:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
/* ---------- category links ---------- */
/* One flowing set. Per-group rows left the short groups half empty and wrapped the
long ones mid-group; the facet grouping survives as ordering instead. */
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:16px 0 0}
.chip{
border:1px solid var(--line-2);border-radius:20px;background:var(--surface);
color:var(--ink-2);font-size:var(--t-ui);font-weight:600;
padding:0 13px;min-height:34px;display:inline-flex;align-items:center;gap:6px;
transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.chip:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--surface-2)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip .n{font-size:var(--t-label);color:var(--ink-3);font-variant-numeric:tabular-nums}
.chip:hover .n{color:var(--accent-ink)}
/* Nick's design: only the terms over 100 lead, the rest are a disclosure, and on a
phone every term is behind it. 27 chips put the first poster 1,181px down at
375px, which is 1.45 screens of chrome before any email is visible. */
.chips.is-collapsed .chip-minor{display:none}
.catsmore{
margin:11px 0 0;background:var(--surface);border:1px solid var(--line-2);
border-radius:5px;color:var(--ink);padding:0 18px;min-height:44px;
cursor:pointer;font:inherit;font-size:var(--t-note);font-weight:600;
transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.catsmore:hover{background:var(--accent-fill);color:#fff;border-color:var(--accent-fill)}
.catsmore:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.catsmore[hidden]{display:none}
/* ---------- sections ---------- */
.sec{margin:38px 0 0}
.sechead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.sechead h2{margin:0;font-size:var(--t-sec);font-weight:700;letter-spacing:-.015em}
.sechead .n{font-size:var(--t-note);color:var(--ink-3);font-variant-numeric:tabular-nums}
.secnote{margin:0 0 16px;color:var(--ink-3);font-size:var(--t-note);max-width:74ch}
.band{margin:24px 0 0}
.bandhead h3{margin:0;font-size:var(--t-ui);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
/* ---------- month index, banded by school year ---------- */
.yr{margin:26px 0 0}
.yrhead{display:flex;align-items:baseline;gap:11px;margin:0 0 10px}
.yrhead h3{margin:0;font-size:var(--t-sub);font-weight:700;font-variant-numeric:tabular-nums}
.yrhead .n{font-size:var(--t-label);color:var(--ink-3);font-variant-numeric:tabular-nums}
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
/* center, not baseline. Baseline in a single-line flex container puts the whole
baseline group at the TOP of any spare cross space, and min-height:38px against
zero vertical padding is all spare space - the label measured 1.0px from the top
edge and 17.5px from the bottom, 8.3px off center. The shared baseline it bought
was never visible anyway: .c carries margin-left:auto, so the label and the count
sit at opposite ends of a 158px tile. .chip, the same component family, has always
used center. Baseline is still right in .sechead and .yrhead, which have no
min-height and so no spare space to strand the text in. */
.mo{
display:flex;align-items:center;gap:8px;padding:0 12px;min-height:38px;
border:1px solid var(--line);border-radius:5px;background:var(--surface);
transition:border-color .14s ease,background .14s ease;
}
.mo:hover{border-color:var(--accent);background:var(--surface-2)}
/* The count has to lift too. --ink-3 on --surface-2 is 4.39:1, under AA at 11px,
and .chip:hover .n and a.sib:hover .n both already do this. */
.mo:hover .c{color:var(--accent-ink)}
.mo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mo .m{font-size:var(--t-row);font-weight:600;color:var(--ink)}
.mo .c{margin-left:auto;font-size:var(--t-label);color:var(--ink-3);font-variant-numeric:tabular-nums}
#earlier[hidden]{display:none}
.more{margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.more button{
background:var(--surface);border:1px solid var(--line-2);border-radius:5px;color:var(--ink);
padding:0 18px;min-height:44px;cursor:pointer;font:inherit;font-size:var(--t-note);font-weight:600;
transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.more button:hover{background:var(--accent-fill);color:#fff;border-color:var(--accent-fill)}
.more button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.more span{font-size:var(--t-ui);color:var(--ink-3)}
@media (max-width:760px){
/* Every term behind the button on a phone, not just the 22 minor ones. */
.chips.is-collapsed .chip{display:none}
.chips.is-collapsed{padding:0}
}
@media (max-width:460px){
.months{grid-template-columns:repeat(2,1fr)}
}