/* studenttrustee.net shared stylesheet.
   Tokens, reset, header, nav, footer, focus and the site-wide "expression layer".
   Every page loads this first, then its own assets/<page>.css.

   Contrast: --text-muted is #525252, which is 7.2:1 on --plane and 7.8:1 on white,
   so muted labels meet WCAG 1.4.6 (AAA). Do not lighten it. Region hues are for
   swatches and fills only, never for text. */

:root{
  --surface-1:#ffffff; --plane:#f6f6f6; --panel:#ffffff;
  --text-primary:#0a0a0a; --text-secondary:#4a4a4a; --text-muted:#525252;
  --rule:#e3e3e3; --ring:rgba(0,0,0,0.16); --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.09);
  --accent:#0a0a0a; --gold:#0a0a0a; --none:#8a8a8a;
  --focus:#0a0a0a; --focus-halo:#ffffff;
  --r1:#eda100; --r2:#4a3aa7; --r3:#1baf7a; --r4:#9c27b0; --r5:#008300;
  --r6:#e87ba4; --r7:#2a78d6; --r8:#eb6834; --r9:#0e8fae; --r10:#e34948;
  --min-target:44px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--plane); color:var(--text-primary);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{color:inherit}
img{max-width:100%}

/* ---- focus: a 3 px ring with a white halo so it reads on black buttons too (2.4.7, 2.4.13) ---- */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px;
  box-shadow:0 0 0 2px var(--focus-halo) !important;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--text-primary); color:var(--surface-1); padding:12px 16px;
  font-weight:700; font-size:14px; text-decoration:none;
}
.skip-link:focus{left:8px; top:8px}
main:focus{outline:none}

/* ---- header: wordmark + text links, the current page underlined (content pages) ----
   Nick's layout D. Each link is a 44 px target through its box, not its type size; the current
   page is marked by weight and a 2 px rule, so colour is never the only cue. */
.top{
  display:flex; align-items:center; gap:4px 24px; padding:0 24px; min-height:88px; flex-wrap:wrap;
  background:var(--surface-1); border-bottom:1px solid var(--text-primary);
}
.mark{display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.02em; font-size:15px}
.mark a{display:inline-flex; align-items:center; min-height:var(--min-target); text-decoration:none}
.mark img.st-wordmark{display:block; height:24px; width:auto}
.grow{flex:1}
.top nav{display:flex; flex-wrap:wrap; column-gap:30px; row-gap:0}
.top nav a{
  font-size:15px; color:var(--text-primary); text-decoration:none; line-height:1.2;
  min-height:var(--min-target); min-width:var(--min-target); padding:2px 0 0;
  display:inline-flex; align-items:center; justify-content:center; border-bottom:2px solid transparent;
}
.top nav a:hover{border-bottom-color:var(--text-muted)}
.top nav a[aria-current]{font-weight:600; border-bottom-color:var(--text-primary)}
@media (max-width:760px){
  .top{flex-direction:column; align-items:flex-start; gap:4px; padding:12px 16px 4px; min-height:0}
  .top .grow{display:none}
  .top nav{column-gap:22px}
  .mark img.st-wordmark{height:20px}
}

/* ---- buttons, and the pill navigation some pages keep ---- */
.site-nav a, .btn, button.btn, a.btn{
  font:inherit; font-size:13px; color:var(--text-secondary); text-decoration:none;
  border:1px solid var(--rule); padding:0 12px; min-height:var(--min-target);
  display:inline-flex; align-items:center; background:var(--panel); white-space:nowrap;
  letter-spacing:.04em; cursor:pointer; line-height:1.2;
}
.site-nav a:hover, .btn:hover{color:var(--text-primary); border-color:var(--text-primary)}
.site-nav a[aria-current], .btn[aria-pressed="true"]{
  background:var(--text-primary); border-color:var(--text-primary); color:var(--surface-1); font-weight:640;
}

/* ---- compact toolbar header (map) ---- */
.st-home{display:inline-flex; align-items:center; justify-content:center; flex:none;
  min-width:var(--min-target); min-height:var(--min-target); text-decoration:none; line-height:0}
.st-home img{display:block; height:26px; width:auto}
@media (max-width:640px){.st-home img{height:21px}}

/* ---- footer ---- */
footer.site-footer{
  border-top:1px solid var(--rule); margin-top:60px; padding:20px 24px 50px;
  font-size:12.5px; color:var(--text-muted); max-width:1080px; margin-left:auto; margin-right:auto; line-height:1.6;
}
footer.site-footer a{color:inherit; text-decoration:underline; text-underline-offset:2px}
footer.site-footer p{margin:0 0 6px}

/* ---- micro-labels: uppercase, letterspaced, 12 px floor ---- */
.eyebrow, .k, .grp h2, .stat span, .strip span, .crow .cl, .when .tag, .contact .l, .soc .l{
  text-transform:uppercase; letter-spacing:.13em; font-size:12px; font-weight:650; color:var(--text-muted);
}

/* ---- expression layer (shared) ---- */
/* 1. Nothing is a rounded card. Edges are hairlines, not boxes. */
.card, .door, .crow, .pri, .facts, .contact, .soc, .strip, .strip div,
.next, ul.same li, .more a, .figure, .hero img, .pop, .intro,
.btn, button.btn, nav a, header a.nv, .cta, .enter, .search input,
.search button, input, .sheet, aside, .rw{
  border-radius:0 !important; box-shadow:none !important;
}
/* 2. Type carries the structure. */
h1{letter-spacing:-.042em; font-weight:680}
h2.big, .hero h2{letter-spacing:-.03em; font-weight:660}
/* 4. Point at one thing, everything else recedes. */
.doors:hover .door:not(:hover), .cards:hover .card:not(:hover), ul.cmp:hover .crow:not(:hover),
.socials:hover .soc:not(:hover){opacity:.6}
.door, .card, .crow, .pri, .soc{transition:opacity .22s ease, border-color .22s ease}
/* 6. Buttons: flat, letterspaced, no chrome. */
.cta, .enter, .search button{text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; font-weight:650}
/* stacked lists separated by hairlines */
.doors, .pris, .cards, .socials{
  display:block; border-top:1px solid var(--rule); margin-top:34px;
}
.door, .pri, .card, .soc{
  display:block; background:none; border:0; border-bottom:1px solid var(--rule); padding:18px 0; margin:0;
}
.pri{cursor:default}
a.door:hover .t, a.door:hover .dh, a.card:hover .t, a.soc:hover .h{text-decoration:underline; text-underline-offset:3px}
.contact{
  display:block; background:none; border:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:18px 0;
}

/* ---- motion: honour the system setting everywhere ---- */
@media (prefers-reduced-motion: reduce){
  *:not(.spin), *:not(.spin)::before, *:not(.spin)::after{
    animation-duration:.001ms !important; animation-delay:0ms !important;
    transition-duration:.001ms !important; transition-delay:0ms !important;
  }
}

/* ---- utilities ---- */
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.unk{color:var(--text-muted)}