:root{
  --ground:#ffffff;
  --surface:#F6F3F1;
  --surface-2:#EFE9E6;
  --line:#E3DBD6;
  --line-strong:#CFC5BF;
  --ink:#16110F;
  --ink-2:#5D5550;
  --ink-3:#8B817B;
  --red:#C0102A;
  --red-ink:#A20D23;
  --red-soft:#FAEDEF;
  --logo-filter:none;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;

  --gutter:clamp(16px,4vw,40px);
  --maxw:1140px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--red-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- type ---------- */
.eyebrow{font-family:var(--display);font-stretch:88%;font-weight:700;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.05}
h1{font-stretch:76%;font-weight:800;font-size:clamp(2.5rem,7.5vw,4.75rem);letter-spacing:-.015em;text-transform:uppercase}
h2{font-stretch:78%;font-weight:800;font-size:clamp(1.75rem,4vw,2.5rem);letter-spacing:-.01em;text-transform:uppercase}
h3{font-stretch:88%;font-weight:700;font-size:1.0625rem;letter-spacing:.005em}
p{margin:0}
.lede{font-size:1.1875rem;line-height:1.55;color:var(--ink-2);max-width:60ch}

/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ground);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:22px;min-height:82px;padding-block:12px}
.mark{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;margin-right:auto;min-width:0}
.logo{height:48px;width:auto;filter:var(--logo-filter);flex-shrink:0}
.mark .l1{font-family:var(--display);font-stretch:76%;font-weight:800;font-size:1.25rem;letter-spacing:.015em;text-transform:uppercase;line-height:1;white-space:nowrap}
.mark .l2{font-family:var(--display);font-stretch:84%;font-weight:700;font-size:.875rem;letter-spacing:.085em;text-transform:uppercase;color:var(--red-ink);line-height:1;margin-top:7px;display:block}
@media (max-width:1200px){
  .head-in{flex-wrap:wrap;gap:12px;min-height:0}
  .mark{margin-right:0;width:100%}
  .nav{width:100%;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);border-top:1px solid var(--line);padding-top:6px}
}
@media (max-width:520px){
  .logo{height:42px}
  .mark .l1{font-size:1.0625rem;white-space:normal}
  .mark .l2{font-size:.8125rem;letter-spacing:.05em}
}

.nav{display:flex;flex-wrap:nowrap;gap:2px;align-items:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin-inline:-4px;padding-inline:4px}
.nav::-webkit-scrollbar{display:none}
.nav a{font-family:var(--display);font-stretch:88%;font-weight:600;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:8px 10px;border-radius:6px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--surface)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--surface)}
.nav a[aria-current="page"]::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-right:7px;vertical-align:middle}

/* Records dropdown (assets/js/nav.js). The button matches .nav a; menu links
   inherit .nav a styling, including the current-page dot. */
.nav-dd{display:flex;flex-shrink:0}
.nav-dd-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-stretch:88%;font-weight:600;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);background:none;border:0;cursor:pointer;padding:8px 10px;border-radius:6px;white-space:nowrap}
.nav-dd-btn::after{content:"";border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s ease}
.nav-dd-btn[aria-expanded="true"]::after{transform:rotate(180deg)}
.nav-dd-btn:hover,.nav-dd-btn[aria-expanded="true"],.nav-dd-btn.is-current{color:var(--ink);background:var(--surface)}
.nav-dd-btn.is-current::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-right:1px}
.nav-menu{list-style:none;margin:0;padding:6px;background:var(--ground);z-index:60}
.nav-menu[hidden]{display:none}
.nav-menu a{display:block}
/* Desktop: a dropdown under the button, right-aligned so it never runs off-screen. */
@media (min-width:1201px){
  .nav{overflow:visible}
  .nav-dd{position:relative}
  .nav-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:max-content;border:1px solid var(--line);border-radius:8px}
}
/* Narrower: a band under the nav. It's positioned against .site-head (outside
   the nav's horizontal scroller, so it isn't clipped) in space nav.js adds. */
@media (max-width:1200px){
  .site-head.dd-open{padding-bottom:var(--dd-h,0px)}
  .nav-menu{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line);padding:6px max(calc(var(--gutter) - 10px),calc((100% - var(--maxw))/2 + var(--gutter) - 10px)) 10px}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--surface)}
.hero-media{position:relative;width:100%;height:480px;max-width:100%;overflow:hidden} /* desktop: fixed height so the Latest item and schedule sit near the fold */
@media (max-width:760px){.hero-media{height:auto;aspect-ratio:4/5}}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 0%} /* top-anchored: the runners' heads reach the top edge of the photo */
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,7,6,.88) 0%,rgba(10,7,6,.62) 40%,rgba(10,7,6,.10) 76%,rgba(10,7,6,0) 100%)}
@media (max-width:760px){.hero-scrim{background:linear-gradient(0deg,rgba(10,7,6,.92) 24%,rgba(10,7,6,.42) 62%,rgba(10,7,6,.06) 100%)}}
.hero-copy{position:absolute;inset:0;display:flex;align-items:flex-end;padding-block:clamp(24px,5vw,52px)}
.hero-copy .wrap{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.hero-copy .eyebrow{color:rgba(255,255,255,.72)}
.hero-copy h1{color:#fff;max-width:14ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.credit{font-family:var(--display);font-stretch:90%;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.58)}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-stretch:92%;font-weight:700;font-size:.8125rem;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;padding:12px 20px;border-radius:4px;border:1px solid transparent;transition:.15s ease}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:#950c20;color:#fff}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}

/* ---------- sections ---------- */
section{padding-block:clamp(44px,6vw,80px)}
section.tint{background:var(--surface)}
.sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(24px,3.5vw,40px);max-width:62ch}

/* ---------- accomplishments ---------- */
.honors{background:#14100F;color:#F5F0ED;padding-block:clamp(36px,5vw,60px)}
.honors{border-block:1px solid var(--line)}
.honors .eyebrow{color:rgba(245,240,237,.55)}
.honors h2{color:#fff}
.honors-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(245,240,237,.16);border:1px solid rgba(245,240,237,.16);border-radius:8px;overflow:hidden;margin-top:26px}
@media (max-width:860px){.honors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.honors-grid{grid-template-columns:1fr}}
.honor{background:#14100F;padding:24px 22px 26px;display:flex;flex-direction:column;gap:8px}
.honor .fig{font-family:var(--display);font-stretch:74%;font-weight:800;font-size:clamp(2.5rem,5vw,3.25rem);line-height:.95;color:#E8455C;font-variant-numeric:tabular-nums}
.honor .lab{font-family:var(--display);font-stretch:88%;font-weight:700;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:#fff}
.honor .sub{font-size:.875rem;line-height:1.45;color:rgba(245,240,237,.62)}
.honors-more{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
.honors-more a{color:#F3798A}

.honors .lede{color:rgba(245,240,237,.72);max-width:58ch}
.honor .note{font-family:var(--display);font-stretch:90%;font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(245,240,237,.42);margin-top:2px}
.highlights{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(245,240,237,.16);border:1px solid rgba(245,240,237,.16);border-radius:8px;overflow:hidden}
@media (max-width:760px){.highlights{grid-template-columns:1fr}}
.highlights li{background:#14100F;padding:18px 22px;display:flex;flex-direction:column;gap:5px}
.highlights .yr{font-family:var(--display);font-stretch:88%;font-weight:700;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:#F3798A}
.highlights .txt{font-size:.9375rem;line-height:1.5;color:rgba(245,240,237,.86)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--ground);padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px}
.step .n{font-family:var(--display);font-stretch:76%;font-weight:800;font-size:2.25rem;line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.step p{color:var(--ink-2);font-size:.9375rem;line-height:1.55}
.step ol{margin:2px 0 0;padding-left:1.1em;color:var(--ink-2);font-size:.9375rem;line-height:1.5;display:flex;flex-direction:column;gap:5px}
.step .go{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.step .go a{font-family:var(--display);font-stretch:92%;font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.step .go a::after{content:" →"}

.alert{margin-top:20px;display:flex;gap:12px;align-items:flex-start;background:var(--red-soft);border-left:3px solid var(--red);padding:14px 18px;border-radius:0 6px 6px 0}
.alert p{font-size:.9375rem;line-height:1.5;color:var(--ink)}
.alert strong{font-family:var(--display);font-stretch:92%;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem}

/* ---------- two-col ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.panel{background:var(--ground);border:1px solid var(--line);border-radius:8px;overflow:hidden}

table{width:100%;border-collapse:collapse;font-size:.9375rem}
th,td{text-align:left;padding:12px 22px;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
th{font-family:var(--display);font-stretch:90%;font-weight:700;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-block:10px;background:var(--surface-2)}
td.num{font-family:var(--display);font-stretch:92%;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
td.day{font-family:var(--display);font-stretch:92%;font-weight:600;letter-spacing:.01em}
.table-scroll{overflow-x:auto}
/* Scroll cue: a soft shadow on the right edge while there's more table to the
   right. The cover gradient scrolls with the content (local) and hides the
   shadow (scroll) once the end is reached, or when nothing overflows. No JS. */
.table-scroll{
  background:
    linear-gradient(to left,var(--ground) 40%,transparent) right center/48px 100% no-repeat local,
    linear-gradient(to left,color-mix(in srgb,var(--ink) 14%,transparent),transparent) right center/16px 100% no-repeat scroll}

/* ---------- link list ---------- */
.linklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.linklist li{border-bottom:1px solid var(--line)}
.linklist li:last-child{border-bottom:0}
.linklist a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 22px;text-decoration:none;color:var(--ink);transition:background .12s ease}
.linklist a:hover{background:var(--surface)}
.linklist .t{font-family:var(--display);font-stretch:92%;font-weight:600;font-size:.9375rem}
.linklist .m{font-family:var(--display);font-stretch:90%;font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.linklist a:hover .m{color:var(--red-ink)}

/* ---------- card grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:920px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:22px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px);color:inherit}
.card .t{font-family:var(--display);font-stretch:90%;font-weight:700;font-size:1rem;letter-spacing:.005em}
.card .d{font-size:.875rem;color:var(--ink-2);line-height:1.5}
.card .m{margin-top:auto;padding-top:10px;font-family:var(--display);font-stretch:92%;font-weight:700;font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--red-ink)}
.card .m::after{content:" →"}

/* ---------- contacts (compact) ---------- */
.contact-row{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:baseline;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:18px}
.contact-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.contact-item .role{font-family:var(--display);font-stretch:90%;font-weight:700;font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.contact-item .val{font-size:.9375rem}
.contact-item .val strong{font-family:var(--display);font-stretch:88%;font-weight:700;font-size:.9375rem}

/* ---------- footer ---------- */
footer{background:var(--surface);border-top:1px solid var(--line);padding-block:44px 52px}
.foot-in{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.foot-col{display:flex;flex-direction:column;gap:10px;min-width:170px}
.foot-col h4{font-stretch:90%;font-weight:700;font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.foot-col a{font-size:.9375rem;text-decoration:none}
.foot-col a:hover{text-decoration:underline}
.foot-note{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 18px}

/* =====================================================================
   Additions after the mockup. Everything above this line is the
   approved mockup <style> block, copied unchanged.
   ===================================================================== */

/* ---------- numeric face ---------- */
/* Space Mono: the tabular/numeric face (times, marks, years). */
:root{--mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace}
.mono,td.time{font-family:var(--mono);font-size:.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- former inline styles from the mockup ---------- */
section.hero{padding-block:0}
section.slim{padding-block:clamp(32px,4vw,48px)}
.sec-head.tight{margin-bottom:20px}
th.num{text-align:right}
.table-note{margin-top:14px;font-size:.875rem;color:var(--ink-3);line-height:1.5}
.table-note strong{font-family:var(--display);font-stretch:92%;font-weight:700;color:var(--ink-2)}

/* ---------- interior pages ---------- */
.prose{display:flex;flex-direction:column;gap:14px;max-width:62ch}
.prose p{color:var(--ink-2)}
.placeholder{font-family:var(--display);font-stretch:90%;font-weight:700;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink)}

/* ---------- schedule ---------- */
/* Sport toggle: same treatment as the nav links and their current-page dot. */
.sched-block + .sched-block{margin-top:clamp(28px,4vw,44px)}
.sched-block h2{margin-bottom:14px}
.sched-status{color:var(--ink-2)}
.sched td{vertical-align:top}
.sched .note{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.45;margin-top:3px}
.sched td.links a{display:block;white-space:nowrap}
.sched .d-short{display:none}

/* Phones: each meet becomes a card. Meet name is the heading; every other
   cell is a label/value row; empty cells disappear. */
@media (max-width:639.98px){
  .sched-panel{background:none;border:0;border-radius:0;overflow:visible}
  .sched-panel .table-scroll{overflow:visible}
  .sched thead{display:none}
  .sched,.sched tbody,.sched tr,.sched td{display:block}
  .sched tr{display:flex;flex-direction:column;gap:6px;background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:18px 20px 20px}
  .sched tr + tr{margin-top:12px}
  .sched td,.sched tbody tr:last-child td{padding:0;border-bottom:0}
  .sched td:not(.event){display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:baseline;font-size:.9375rem}
  .sched td:not(.event)::before{content:attr(data-label);font-family:var(--display);font-stretch:90%;font-weight:700;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
  .sched td.event{order:-1;margin-bottom:4px;font-family:var(--display);font-stretch:88%;font-weight:700;font-size:1.0625rem;letter-spacing:.005em;line-height:1.25}
  .sched td.event .note{font-family:var(--body);font-stretch:100%;font-weight:400;letter-spacing:0}
  .sched td.time{font-size:.8125rem}
  .sched td.time,.sched td.links a{white-space:normal}
  .sched td.links span{display:flex;flex-direction:column;gap:4px}
  .sched .d-long{display:none}
  .sched .d-short{display:inline}
  .sched td:empty{display:none} /* after the grid rule: same specificity */
}

/* ---------- record book components (from Monte Vista at State) ---------- */
/* Built for cross-country-records.html; written against the site tokens so they can
   be reused. Body text on that page is Archivo, set by its .book container. */
[hidden]{display:none!important}

.mast{display:flex;flex-direction:column;gap:14px;border-bottom:3px solid var(--ink);padding-bottom:22px}
.mast p{margin:0;max-width:60ch;color:var(--ink-2);font-size:16px}

/* Section head with controls on the right */
.sec-head.split{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;max-width:none;margin-bottom:0}
.sec-head.split p{margin:4px 0 0;color:var(--ink-2);max-width:60ch}

/* Headline numbers */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.stats{grid-template-columns:1fr}}
.stat{padding:18px 18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;background:var(--ground)}
.stat .n{font-family:var(--display);font-stretch:74%;font-weight:800;font-size:clamp(44px,7vw,64px);line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.stat .n small{font-size:.5em;color:var(--ink);margin-left:2px}
.stat .l{font-weight:700;font-size:15px}
.stat .s{color:var(--ink-2);font-size:13.5px}

/* Segmented control (pill buttons) */
.controls{display:flex;flex-wrap:wrap;gap:10px}
.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}
.seg button{font:600 13px var(--display);letter-spacing:.02em;padding:7px 14px;border:0;background:var(--ground);color:var(--ink);cursor:pointer}
.seg button+button{border-left:1.5px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.seg button:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.seg-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);align-self:center;margin-right:-2px}
@media (prefers-reduced-motion:no-preference){.seg button{transition:background .15s,color .15s}}

.pill{display:inline-block;font:700 11px var(--display);letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1.5px solid currentColor}
.pill.g{color:var(--red-ink)}
.pill.b{color:var(--ink)}
.pill.act{color:var(--red-ink);background:var(--red-soft);border-color:transparent}
.count{color:var(--ink-2);font-size:13px}
.notes{border-top:1px solid var(--line);padding-top:18px;color:var(--ink-2);font-size:13px;display:flex;flex-direction:column;gap:6px;max-width:75ch}

/* Ledger: dense data table layered on the site table (use inside .panel > .table-scroll) */
.ledger{font-variant-numeric:tabular-nums}
.ledger th{padding:10px 12px;white-space:nowrap}
.ledger td{padding:9px 12px;vertical-align:top}
.ledger td.num,.ledger th.num{text-align:right}
.ledger td.mono{font-family:var(--mono);font-stretch:100%;font-weight:400;font-size:14px;white-space:nowrap}
.ledger td.rank{font-family:var(--mono);font-stretch:100%;font-weight:400;color:var(--ink-2);width:3ch}
.ledger td.name{font-weight:600;white-space:nowrap}
/* Enough width for five names to wrap onto 2-3 lines; with none, auto layout squeezes it to one word per line. */
.ledger td.scor{color:var(--ink-2);font-size:13px;min-width:14em}
.ledger td.race{color:var(--ink-2);font-size:13px;white-space:nowrap}
.ledger .place{white-space:nowrap}
.ledger .place b{font-weight:700}
.ledger .place .d{color:var(--ink-2);font-size:13px}
.ledger .calc{color:var(--ink-2)}
.ledger .meet{white-space:nowrap}
.ledger .meet.st{color:var(--red-ink);font-weight:700}
/* Translucent so the .table-scroll edge cue shows through; over the white panel it is exactly --red-soft (#FAEDEF). */
.ledger .top10 td,.ledger tr.hl td{background:color-mix(in srgb,var(--red) 7.5%,transparent)}
.ledger .top10 td.rank,.ledger tr.hl td.rank{color:var(--red-ink);font-weight:700}
/* NCS table: a first-place cell gets the same tint */
.ledger td.win{background:color-mix(in srgb,var(--red) 7.5%,transparent);color:var(--red-ink);font-weight:700}
.ledger td.ncs-none{color:var(--ink-2)}

/* ---------- cross country page ---------- */
/* Layout modifiers on existing components; no new visual treatment. */
section.follow{padding-top:0}
.prose.measure{max-width:65ch}
.steps.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.steps.two{grid-template-columns:1fr}}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:920px){.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid.four{grid-template-columns:1fr}}
.honors .cols{margin-top:26px}
.honors .cols h3{color:#fff;margin-top:6px}
.honors-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
@media (max-width:460px){.honors-grid.two{grid-template-columns:1fr}}
.honors-grid.two .fig{font-size:clamp(2rem,3.6vw,2.75rem)} /* half-width cells: keeps "12 straight" on one line */
h1.statement{font-size:clamp(1.75rem,4vw,3rem)}
h1.page-title{font-size:clamp(1.375rem,2.4vw,1.75rem)} /* a page title that leaves the paragraph below it dominant */
.honors-grid.flush{margin-top:0}
/* Top-line band: 2x2 on phones instead of the base grid's single column. */
@media (max-width:599.98px){.honors-grid.flush{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.honors-grid.flush .honor{padding-inline:16px}}

/* ---------- data pages: school records, varsity letters ---------- */
.rec-legend{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.875rem;color:var(--ink-2);margin:0}
.flag{font-family:var(--mono);font-size:.625rem;line-height:1;font-weight:400;color:var(--red-ink);border:1px solid currentColor;border-radius:3px;padding:1px 3px;margin-left:3px;vertical-align:super}
section.data-group{padding-block:0;margin-top:clamp(28px,4vw,44px)}
section.data-group h2{margin-bottom:16px}
.panel-head{font-family:var(--display);font-stretch:88%;font-weight:700;font-size:1.0625rem;letter-spacing:.005em;text-transform:none;line-height:1.25;margin:0;padding:14px 16px;border-bottom:1px solid var(--line)}
/* Event panels: 3-up (relays 2-up, for the long name strings), 1-up on phones.
   align-items:start keeps one-row panels from stretching to their neighbours. */
.rec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.rec-grid.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:920px){.rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rec-grid,.rec-grid.wide{grid-template-columns:1fr}}
.rec-table{font-size:.875rem}
/* Number columns shrink to fit; the athlete column gets the rest, and relay names wrap there. */
.rec-table th.num,.rec-table td.num{width:1%}
@media (max-width:640px){.rec-table th,.rec-table td{padding-inline:8px}.rec-table th:first-child,.rec-table td:first-child{padding-left:14px}.rec-table th:last-child,.rec-table td:last-child{padding-right:14px}}
section.panel.letters{padding-block:0}
.panel.letters + .panel.letters{margin-top:16px}
.panel-head .count{font-family:var(--display);font-weight:600;font-size:.875rem}
.name-list{list-style:none;margin:0;padding:12px 16px 16px;columns:3 210px;column-gap:28px}
.name-list li{break-inside:avoid;padding:5px 0;font-size:.9375rem;line-height:1.45}
.name-list .pill{margin-left:4px;vertical-align:1px}
.controls + #letters-body{margin-top:20px}
/* Varsity standards: compact tables, one per event group */
.std-app{margin-top:clamp(28px,4vw,44px)}
.std-app #standards-body{max-width:640px}
.std-app .controls + #standards-body .data-group:first-child{margin-top:20px}
.std-table td.num{width:1%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hl-key{background:var(--red-soft);color:var(--ink);padding:1px 6px;border-radius:3px}

/* EBAL distance points (track-field-records.html) */
.ebal-controls{align-items:center;gap:10px 14px;margin:14px 0 18px}
.ebal-table th.year-group{text-align:center;border-bottom:1px solid var(--line)}
.ebal-table th[rowspan]{vertical-align:bottom}
.ebal-table .col-sep{border-left:1px solid var(--line)}
.ebal-table td.comb{font-weight:700;color:var(--ink)}
.ebal-row{cursor:pointer}
.ebal-row:hover td,.ebal-row:hover th,.ebal-row.open td,.ebal-row.open th{background:var(--surface)}
.ebal-row th{font-weight:600;white-space:nowrap}
.ebal-row.ours .row-toggle{font-weight:700;color:var(--ink)}
.row-toggle{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left;display:inline-flex;align-items:center;gap:6px}
.row-toggle::before{content:"";border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid currentColor;transition:transform .15s ease}
.row-toggle[aria-expanded="true"]::before{transform:rotate(90deg)}
.ebal-table tbody th,.ebal-detail tbody th{background:none;font-family:inherit;font-stretch:100%;font-size:inherit;letter-spacing:0;text-transform:none;color:var(--ink);padding:9px 12px;text-align:left}

/* Coaches page */
.coach-bio{margin-top:16px}
/* Coach photos: one slot for every coach, 4:5 portrait, cropped to fill
   (centred, weighted toward the top). The photo is a CSS background, so a
   missing file just leaves the neutral block: no broken-image icon, no
   alt text. Drop a JPEG at assets/img/coaches/<slug>.jpg and it appears. */
.coach-photo{display:block;aspect-ratio:4/5;width:100%;background:var(--surface-2) no-repeat 50% 25%/cover;border:1px solid var(--line);border-radius:6px}
.p-wales-dinan{background-image:url("../img/coaches/wales-dinan.jpg")}
.p-spilker{background-image:url("../img/coaches/spilker.jpg")} /* 392 × 615, below the 600px minimum: used as supplied, not enlarged */
/* Photos not supplied yet. Each rule stays off until its file exists, so no page requests a missing image: uncomment it when you add the photo. */
.p-graham{background-image:url("../img/coaches/graham.jpg")}
/* .p-williams-edd{background-image:url("../img/coaches/williams-edd.jpg")} */
/* .p-williams-brittany{background-image:url("../img/coaches/williams-brittany.jpg")} */
/* .p-rothstein{background-image:url("../img/coaches/rothstein.jpg")} */
/* .p-pogue{background-image:url("../img/coaches/pogue.jpg")} */
/* Coaches index */
.coach-sec{margin-top:clamp(36px,5vw,56px)}
.coach-card .coach-photo{margin-bottom:6px}
/* Phones: compact rows (same 4:5 photo, smaller) so seven full-width portraits don't fill the screen. */
@media (max-width:600px){
  .coach-card{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;align-items:start}
  .coach-card .coach-photo{grid-row:1 / span 3;margin-bottom:0}
  .coach-card .m{padding-top:4px}
}
div.card.static:hover{transform:none;border-color:var(--line)} /* coaches without a page: not a link */
/* Coach page */
.coach-back{margin-bottom:18px}
.coach-back a{color:inherit;text-decoration:none}
.coach-back a:hover{color:var(--red-ink)}
.coach-hero{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:end;margin-bottom:clamp(28px,4vw,40px)}
@media (max-width:600px){.coach-hero{grid-template-columns:minmax(0,1fr)}.coach-hero .coach-photo{max-width:240px}}
.coach-hero .coach-id{display:flex;flex-direction:column;gap:10px}
.coach-hero h1{font-size:clamp(2rem,5vw,3.25rem)}
.coach-section{margin-top:clamp(32px,4vw,48px)}
.coach-bio h3{margin-top:14px;color:var(--ink)}
.prose ul,.prose ol{margin:0;padding-left:1.25em;display:flex;flex-direction:column;gap:6px;color:var(--ink-2)}
/* EBAL expanded breakdown: rows in the same table, so columns align with the school row */
.ebal-detail tr > *{background:var(--surface)}
.ebal-table .ebal-detail th{padding-left:28px}
.ebal-detail .ebal-sub > *{font-family:var(--display);font-stretch:90%;font-weight:700;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:14px;padding-bottom:6px}
.ebal-table .ebal-detail .ebal-sub th{color:var(--ink-2);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-stretch:90%;font-weight:700;font-family:var(--display)}
.ebal-detail .ebal-ev > *{padding-top:6px;padding-bottom:6px;font-size:.875rem}
.ebal-detail .ebal-total > *{border-top:1px solid var(--line-strong);font-weight:700}
.ebal-detail tr:last-child > *{padding-bottom:14px}
/* Coaching resume (head coach page): denser, scannable lists ahead of the narrative.
   Sits between the two .coach-bio blocks so it runs the full column, not the prose measure.
   Group labels are h4s styled as small labels. */
.resume{display:flex;flex-direction:column;margin:26px 0 24px;padding:22px 0 24px;border-block:1px solid var(--line)}
.resume h4{font-stretch:90%;font-weight:700;font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:28px 0 6px}
.resume ul{margin:0;padding-left:1.25em;display:flex;flex-direction:column;gap:2px;color:var(--ink-2);font-size:.9375rem;line-height:1.45}
/* Home page: "Latest" news item (rendered by news.js; the section stays hidden until there is one),
   single-column schedule and practice blocks, and the clearance/donation pointers. */
.latest{border-bottom:1px solid var(--line)}
section.latest{padding-block:clamp(28px,4vw,44px)}
.latest-item{display:flex;align-items:center;gap:clamp(18px,3vw,32px)}
.latest-text{display:flex;flex-direction:column;gap:10px;max-width:62ch;border-left:3px solid var(--red);padding-left:clamp(14px,2vw,20px)}
.latest-text p:not(.eyebrow){color:var(--ink-2);font-size:1.0625rem;line-height:1.55}
/* Optional photo: beside the text on wider screens at a fixed height so the item stays compact;
   stacked above it on phones, cropped toward the top where faces usually are. */
.latest-media{margin:0;flex:none;max-width:40%}
.latest-media img{display:block;height:300px;width:auto;max-width:100%;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.latest-media figcaption{margin-top:4px}
@media (max-width:640px){
  .latest-item{flex-direction:column;align-items:stretch;gap:16px}
  .latest-media{max-width:none}
  .latest-media img{width:100%;height:240px;object-position:50% 30%}
}
.latest-link{align-self:flex-start;font-family:var(--display);font-stretch:92%;font-weight:700;font-size:.8125rem;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--red-ink)}
.latest-link::after{content:" →"}
.solo{max-width:720px}
.pointers{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--ink-2);font-size:.9375rem;max-width:720px}
/* Home page accomplishments band: same figures, less air, so it reads as a dense strip. */
.honors.band{padding-block:clamp(28px,4vw,44px)}
.honors.band .lede{margin-top:2px}
.honors.band .honors-grid{margin-top:16px}
.honors.band .honor{padding:14px 18px 16px;gap:4px}
.honors.band .highlights{margin-top:12px}
.honors.band .highlights li{padding:11px 18px;gap:3px}
.honors.band .honors-more{margin-top:14px}
/* Photo credits (added by photos.js from assets/data/photo-credits.csv). */
.coach-photo{position:relative}
.coach-photo .photo-credit{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 5px;border-radius:0 0 5px 5px;background:linear-gradient(0deg,rgba(10,7,6,.62),rgba(10,7,6,0));color:rgba(255,255,255,.9);font-family:var(--display);font-stretch:90%;font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;text-align:right;line-height:1.2}
/* Phone coach cards shrink the photo to an 88px thumbnail: the credit drops just below it as one line. */
@media (max-width:600px){.coach-card .coach-photo .photo-credit{top:calc(100% + 3px);bottom:auto;right:auto;padding:0;background:none;border-radius:0;color:var(--ink-3);font-size:.5625rem;letter-spacing:.02em;text-transform:none;text-align:left;white-space:nowrap}}
figcaption .photo-credit{display:block;margin-top:2px;font-family:var(--display);font-stretch:90%;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
/* Results archive (results-archive.html, rendered by archive.js). */
.arch-season{padding-block:0;margin-top:clamp(28px,4vw,44px)}
.arch-season h2{margin-bottom:14px}
.arch-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.arch-list > li{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.3fr);gap:6px 18px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);scroll-margin-top:16px}
.arch-list .d{color:var(--ink-3);font-size:.8125rem}
.arch-list .n{font-family:var(--display);font-stretch:92%;font-weight:600}
.arch-list .f{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.9375rem}
.arch-list details{flex-basis:100%}
.arch-list summary{cursor:pointer;color:var(--red-ink);font-family:var(--display);font-stretch:92%;font-weight:600;font-size:.875rem}
.arch-list details ul{list-style:none;margin:8px 0 4px;padding:0;columns:2 240px;column-gap:24px;font-size:.875rem;line-height:1.7}
@media (max-width:640px){.arch-list > li{grid-template-columns:56px minmax(0,1fr)}.arch-list .f{grid-column:2}}
/* Photos inside a coach bio: reading width by default; .wide breaks out to the full column
   (it sits between two .coach-bio blocks, like the resume). */
.bio-photo{margin:8px 0}
.bio-photo img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--line)}
.bio-photo figcaption{margin-top:7px;font-size:.875rem;line-height:1.45;color:var(--ink-3)}
.bio-photo.wide{margin:26px 0}
/* Schedule season selector (schedule.js). */
.season-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.season-pick label{font-family:var(--display);font-stretch:88%;font-weight:700;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.season-pick select{font:inherit;font-family:var(--display);font-stretch:92%;font-weight:600;font-size:1rem;color:var(--ink);background:var(--ground);border:1px solid var(--line-strong);border-radius:6px;padding:9px 36px 9px 12px;max-width:100%;
  appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.season-pick select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.season-note{margin:-6px 0 22px;color:var(--ink-2);font-size:.9375rem;max-width:68ch}
/* Cross country page: the opening statement, set as a large intro paragraph. */
.statement-text{font-family:var(--body);font-size:clamp(1.1875rem,2vw,1.5rem);line-height:1.5;color:var(--ink);max-width:62ch;margin:0}