/* ============================================================
   ENGINEERING@CAROLINA
   The site stylesheet. This is the approved design, direction
   "Option A", chosen by the captain on 2026-08-30 from
   data/site-design-review-m8/prototypes-a. Seven rounds of
   feedback are baked into the decisions below; please read the
   comments before changing any of them.

   SETTLED - do not reopen without a new decision:
     - Public Sans is the whole type system, display and body.
     - White page, UNC navy for ALL type, Carolina Blue as an
       accent FILL only (3.0:1 as ink - it is never ink).
     - Landing page is About us -> Events -> E@ccelerator.
       Our people is its own page.
     - "What we are building" is gone.
     - No eyebrow line, no statistics block, no nav dropdown
       arrows, no small underlines, no circle beside the title.
       Each of those was removed at the captain's request.

   THE FOUR FIXES THAT MADE THIS DIRECTION WORK. Undoing any of
   them puts the page back to the version the captain called mid:
     1. Carolina Blue has ONE job: it marks a thing you can act
        on. It used to do fourteen, which is the same as none.
     2. ONE type scale, seven steps (--t0..--t6). There used to
        be eighteen sizes, nine of them inside a 9px band.
     3. Spacing is deliberate, not a metronome. About opens wide,
        Events tightens, E@ccelerator opens again.
     4. No drafting costume - no sheet numbers, title blocks or
        stamps that carry no information.

   PHOTOGRAPHS: see "photo slots" near the end of this file, and
   assets/photos/README.md. The page has three photo modes and
   the no-photograph mode is a composed state, not a fallback.
   ============================================================ */
:root{
  --white:#FFFFFF;     /* the page */
  --navy:#13294B;      /* UNC Basic Navy - ALL type. 14.5:1 on white */
  --carolina:#4B9CD3;  /* Carolina Blue - accent FILL only */
  --ink-deep:#0A1A30;  /* image grounds only, never type */
  --tint:#EEF4F9;      /* panel grounds, alternate bands */
  --edge:#C9D8E4;      /* rules, borders, fastener marks */
  --slate:#42597A;     /* secondary text. 7.1:1 on white */
  /* Carolina Blue now has ONE job: it marks a thing you can act on.
     It was doing fourteen - section numbers, tags, emphasis, card
     edges, stamps, countdowns, headings - which is the same as
     meaning nothing. --carolina-ink is the readable navy-shifted
     version for the few places blue has to be type. */
  --carolina-ink:#1E6FA8;

  /* ONE type scale. Seven steps, each a clear jump from the last.
     The old page used 18 distinct sizes, nine of them between 8px and
     17px, which the eye cannot read as hierarchy at all. */
  --t0:12px; --t1:13.5px; --t2:15px; --t3:17px;
  --t4:21px; --t5:28px; --t6:44px;

  /* Spacing is no longer a metronome. Sections get the space their
     job needs: the page opens wide, tightens through the dense
     middle, and opens again at the end. */
  --s1:10px; --s2:20px; --s3:40px; --s4:80px;
  --sec-open:112px; --sec-tight:64px;
  --r-plate:3px; --r-round:999px;
  --gut:clamp(18px,4vw,56px);

  --font:'Public Sans';          /* settled 2026-08-30 - display AND body */
  --mono:'IBM Plex Mono';        /* annotations only */
  --dwell:7000ms;                /* the rotator dwell. Slow on purpose. */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--white); color:var(--navy);
  font-family:var(--font),system-ui,sans-serif; font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--carolina); color:var(--navy)}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font),system-ui,sans-serif; margin:0;
  letter-spacing:-.03em; line-height:1.07; font-weight:700}
h1,h2{font-weight:800; letter-spacing:-.042em}
img,svg{max-width:100%}
.wrap{max-width:1280px; margin-inline:auto; padding-inline:var(--gut)}
.ann{font-family:var(--mono),ui-monospace,monospace; font-size:var(--t0);
  letter-spacing:.1em; text-transform:uppercase; font-weight:600}
.muted{color:var(--slate)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy); color:var(--white);
  padding:11px 16px; border-radius:0 0 var(--r-plate) 0}
.skip:focus{left:0}

/* ---------- header: flat. no dropdowns, so no arrows ---------- */
header{position:sticky; top:0; z-index:60; background:var(--white); border-bottom:2px solid var(--navy)}
header .wrap{display:flex; align-items:center; gap:var(--s2); min-height:70px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto}
.logoslot{width:40px; height:40px; border:1px dashed var(--edge); border-radius:var(--r-plate);
  display:grid; place-items:center; color:var(--slate); flex:0 0 auto;
  font-family:var(--mono),monospace; font-size:8px; letter-spacing:.1em; text-align:center; line-height:1.1}
.mark{font-weight:800; font-size:var(--t3); letter-spacing:-.035em; white-space:nowrap}
/* the "@" stays a second colour, but as ink rather than as fill: on white
   --carolina is 3.0:1, which this file's own token note says it never is.
   Authorised by the captain on 2026-08-30. The footer sits on navy, where
   --carolina reads at 4.8:1, and keeps it - see the footer rules. */
.mark b{color:var(--carolina-ink)}
nav.main{display:flex; align-items:center; gap:2px; margin-left:auto}
.navlink{padding:9px 14px; border-radius:var(--r-plate); text-decoration:none; font-size:var(--t2);
  font-weight:500; white-space:nowrap; color:var(--slate)}
.navlink:hover{color:var(--navy)}
.navlink[aria-current]{color:var(--navy); font-weight:700}
.signin{display:inline-flex; align-items:center; gap:9px; text-decoration:none; margin-left:8px;
  background:var(--navy); color:var(--white); border-radius:var(--r-plate);
  padding:10px 15px; font-weight:600; font-size:var(--t2); white-space:nowrap}
.signin:hover{background:var(--carolina); color:var(--navy)}
.signin .lk{opacity:.72; font-size:var(--t1)}

/* ---------- section furniture ---------- */
section{padding-block:var(--s4); scroll-margin-top:78px}
/* Deliberate, not even. About opens wide, Events is the dense
   middle and tightens, E@ccelerator opens again to give the two
   companies room. Previously every section was 80/80. */
#about{padding-block:var(--sec-open) var(--s3)}
#events{padding-block:var(--sec-tight)}
#accelerator{padding-block:var(--sec-open) var(--s4)}
section.band{background:var(--tint); border-block:1px solid var(--edge)}
.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s2);
  flex-wrap:wrap; margin-bottom:var(--s3); padding-bottom:var(--s1); border-bottom:2px solid var(--navy)}
.sechead .l{display:flex; align-items:center; gap:14px}
.sechead h2{font-size:var(--t6)}
.sechead .note{color:var(--slate)}
.subhead{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);
  flex-wrap:wrap; margin:var(--s4) 0 var(--s2); padding-bottom:9px; border-bottom:1px solid var(--edge)}
.subhead h3{font-size:var(--t4)}
.subhead .note{color:var(--slate)}
.stamps{display:flex; gap:6px; flex-wrap:wrap}
.stamp{background:var(--tint); color:var(--slate); box-shadow:inset 0 0 0 1px var(--edge); padding:3px 8px; border-radius:2px;
  font-family:var(--mono),monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600}
.stamp.q{background:transparent; color:var(--slate); box-shadow:inset 0 0 0 1px var(--edge)}
.ph{display:inline-flex; align-items:center; gap:8px; padding:4px 9px; border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--edge); color:var(--slate)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,6vw,76px) var(--s3)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:var(--s3); align-items:start}
/* the composed no-event state. renderNext() marks the grid when it takes
   the card away; with nothing to hold, the second track would otherwise
   sit empty above 1080px. The two-column hero is untouched. */
.hero-grid[data-next="none"]{grid-template-columns:minmax(0,1fr)}
.hero h1{font-size:clamp(40px,7.2vw,86px); line-height:.94; letter-spacing:-.048em; max-width:14ch}
.hero h1 em{font-style:normal; color:var(--navy)}
.hero .lede{max-width:56ch; margin:var(--s2) 0 0; font-size:var(--t3); color:var(--slate)}
.ctas{display:flex; gap:11px; flex-wrap:wrap; margin-top:var(--s3)}
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; border-radius:var(--r-plate);
  padding:13px 20px; font-weight:700; font-size:var(--t2); background:var(--carolina); color:var(--navy)}
.btn:hover{background:var(--navy); color:var(--white)}
.btn.ghost{background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1px var(--edge)}
.btn.ghost:hover{background:var(--tint); color:var(--navy)}

/* the "next" card. Its countdown is computed from the date, every load. */
.next{border:1px solid var(--edge); border-top:2px solid var(--navy);
  border-radius:var(--r-plate); overflow:hidden; background:var(--white)}
.next .pic{aspect-ratio:16/10; background:var(--navy)}
.next .body{padding:var(--s2)}
.next .k{background:var(--navy); color:var(--white); display:inline-flex; align-items:center; gap:9px;
  padding:5px 11px; border-radius:2px; margin-bottom:12px}
.next .k .cd{color:#9EC9E8}
/* h2 for heading order, styled as the h3 it replaced - see index.html */
.next h2{font-size:var(--t4); line-height:1.15; font-weight:700; letter-spacing:-.03em}
.next .meta{color:var(--slate); font-size:var(--t1); margin-top:8px}
.next .go{display:inline-flex; align-items:center; gap:8px; margin-top:var(--s2);
  background:var(--carolina); color:var(--navy); text-decoration:none;
  padding:11px 17px; border-radius:var(--r-plate); font-weight:700; font-size:var(--t2)}
.next .go:hover{background:var(--navy); color:var(--white)}

/* ============================================================
   DEVICE 1 - the rotator, "On the bench".
   Six moments, one at a time, 7s dwell, cross-fade only.
   It rotates FACTS, not decoration: every frame carries a tag,
   a specific sentence and a place. The six captions are all
   visible at once in the tab strip below the stage, so the
   story is fully readable without waiting for the rotation
   and without any image existing at all.
   Pauses on hover, on focus, when off-screen, when the tab is
   hidden, and permanently the moment anyone touches a control.
   Under prefers-reduced-motion it never starts: it lays out as
   a static grid of all six.
   ============================================================ */
.rota{margin-top:var(--s4); border-top:2px solid var(--navy); padding-top:var(--s2)}
.rota-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s2)}
.rota-head h2{font-size:var(--t5)}
.rota-head .l{display:flex; align-items:center; gap:13px}
.rota-ctl{display:flex; align-items:center; gap:12px; color:var(--slate)}
.rota-ctl .count{font-family:var(--mono),monospace; font-size:var(--t0); letter-spacing:.1em}
.pp{appearance:none; background:transparent; border:1px solid var(--edge); border-radius:var(--r-round);
  color:var(--navy); cursor:pointer; font:inherit; font-size:var(--t1); font-weight:600;
  padding:6px 14px 6px 11px; display:inline-flex; align-items:center; gap:8px}
.pp:hover{background:var(--tint)}
.pp .gl{width:9px; height:10px; flex:0 0 auto}
.pp[data-state="playing"] .gl{background:
  linear-gradient(var(--navy),var(--navy)) 0 0/3px 100% no-repeat,
  linear-gradient(var(--navy),var(--navy)) 100% 0/3px 100% no-repeat}
.pp[data-state="paused"] .gl{background:var(--navy);
  clip-path:polygon(0 0,100% 50%,0 100%)}

.stage{position:relative; aspect-ratio:21/9; background:var(--navy);
  border-radius:var(--r-plate); overflow:hidden}
.fr{position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
  transition:opacity .6s ease, visibility 0s linear .6s}
.fr.on{opacity:1; visibility:visible; transition:opacity .6s ease, visibility 0s}
.fr .art{position:absolute; inset:0}
.fr .cap{position:absolute; left:0; right:0; bottom:0; color:var(--white);
  padding:var(--s3) var(--s2) var(--s2);
  background:linear-gradient(rgba(10,26,48,0), rgba(10,26,48,.55) 34%, rgba(10,26,48,.95) 68%)}
.fr .cap .tg{color:#9EC9E8}
.fr .cap .t{display:block; margin-top:7px; font-weight:700; letter-spacing:-.025em;
  font-size:var(--t4); line-height:1.18; max-width:34ch}
.fr .cap .w{display:block; margin-top:8px; color:rgba(255,255,255,.72)}

/* the no-photograph state. Not a fallback - a composed title card.
   The stage keeps its drafting frame and the sentence gets to be the object. */
[data-photo-group="none"] .fr .art{display:none}
.stage[data-photo-group="none"]{aspect-ratio:auto; min-height:clamp(260px,26vw,340px); background:
  repeating-linear-gradient(135deg, rgba(75,156,211,.09) 0 1px, transparent 1px 9px), var(--navy)}
.rota.static .stage[data-photo-group="none"]{min-height:0}
[data-photo-group="none"] .fr{border:0}
[data-photo-group="none"] .fr .cap{inset:0; background:none; display:grid; align-content:center;
  gap:0; padding:clamp(22px,4.4vw,52px)}
[data-photo-group="none"] .fr .cap::before{content:''; position:absolute; inset:14px;
  border:1px solid rgba(201,216,228,.26); pointer-events:none}
[data-photo-group="none"] .fr .cap .t{font-size:clamp(21px,3.5vw,42px); line-height:1.1;
  max-width:22ch; margin-top:14px}
[data-photo-group="none"] .fr .cap .w{margin-top:18px}
.fr .no{position:absolute; top:clamp(18px,3vw,30px); right:clamp(18px,3vw,30px);
  font-family:var(--mono),monospace; font-size:var(--t0); letter-spacing:.16em;
  color:rgba(255,255,255,.5); display:none}
[data-photo-group="none"] .fr .no{display:block}

.tabs{display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--edge); gap:0}
.tab{appearance:none; background:none; border:0; margin:0; cursor:pointer; font:inherit;
  text-align:left; padding:13px 16px 14px 0; color:var(--slate); position:relative; min-width:0}
.tab:hover{color:var(--navy)}
.tab .prog{position:absolute; top:-1px; left:0; width:0; height:2px; background:var(--carolina)}
.tab[aria-selected="true"]{color:var(--navy)}
.tab[aria-selected="true"] .prog{width:100%; transform-origin:left; animation:sweep var(--dwell) linear forwards}
.rota[data-state="paused"] .tab[aria-selected="true"] .prog{animation-play-state:paused}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tab .n{display:block; font-family:var(--mono),monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase}
.tab .l{display:block; margin-top:5px; font-size:var(--t1); line-height:1.28}
.tab[aria-selected="true"] .l{font-weight:600}

/* the reduced-motion form: everything at once, nothing moving */
.rota.static .stage{aspect-ratio:auto; background:none; border-radius:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s1)}
.rota.static .fr{position:relative; inset:auto; opacity:1; visibility:visible;
  transition:none; aspect-ratio:4/3; background:var(--navy); border-radius:var(--r-plate); overflow:hidden}
.rota.static .tabs,.rota.static .rota-ctl{display:none}
.rota.static .fr .cap .t{font-size:var(--t3); max-width:none}
.rota.static .fr .cap{padding:var(--s4) 15px 15px}
@media (max-width:820px){
  .rota.static .stage{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .rota.static .stage{grid-template-columns:minmax(0,1fr)}
}

/* ---------- about ---------- */
.about-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3)}
.about-cols p{margin:0 0 var(--s2); font-size:var(--t3); color:var(--slate); max-width:60ch}
.about-cols p strong{color:var(--navy); font-weight:600}
/* ---------- the three pillars ----------
   The captain asked for "less of this tabular formatting" and three
   visual thirds instead of a six-cell bordered grid. So: no cell
   borders, one hairline above each column, and room to breathe. */
.thirds{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3)}
.third{border-top:2px solid var(--navy); padding-top:var(--s2); min-width:0;
  display:flex; flex-direction:column}
.third .n{color:var(--slate); display:block; margin-bottom:14px; font-size:var(--t0); font-weight:600}
.third h3{font-size:var(--t5); line-height:1.12; margin-bottom:12px}
.third p{margin:0; color:var(--slate); font-size:var(--t2)}
.third .ph{display:flex; width:fit-content}
.third .more{display:inline-flex; align-items:center; gap:9px; margin-top:auto;
  padding-top:22px; width:fit-content;
  text-decoration:none; font-weight:700; font-size:var(--t2); color:var(--carolina-ink)}
.third .more span{transition:transform .18s ease}
.third .more:hover span{transform:translateX(4px)}

/* ---------- events ---------- */
/* the single dated entry - deliberately the only one on the site */
.onenext{display:grid; grid-template-columns:200px minmax(0,1fr) auto; gap:var(--s2);
  align-items:center; background:var(--white); border:1px solid var(--edge);
  border-left:2px solid var(--navy); border-radius:var(--r-plate);
  padding:var(--s2); margin-bottom:var(--s3)}
.onenext .pic{width:200px; aspect-ratio:16/10; background:var(--navy);
  border-radius:2px; overflow:hidden}
.onenext .b{min-width:0}
.onenext .k{background:var(--navy); color:var(--white); display:inline-flex; align-items:center;
  gap:9px; padding:4px 10px; border-radius:2px; margin-bottom:9px}
.onenext .k .cd{color:#9EC9E8}
.onenext h3{font-size:var(--t4); line-height:1.14}
.onenext .meta{color:var(--slate); font-size:var(--t2); margin-top:7px}
.onenext .stamps{margin-top:11px}
.onenext .go{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--carolina); color:var(--navy); padding:12px 19px;
  border-radius:var(--r-plate); font-weight:700; font-size:var(--t2); white-space:nowrap}
.onenext .go:hover{background:var(--navy); color:var(--white)}
[data-photo-group="none"] .onenext{grid-template-columns:minmax(0,1fr) auto}
[data-photo-group="none"] .onenext .pic{display:none}

/* the six kinds - evergreen, nothing dated */
.kinds{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3) var(--s2)}
.kind{display:flex; flex-direction:column; min-width:0}
.kind .pic{aspect-ratio:16/10; background:var(--navy); border-radius:var(--r-plate); overflow:hidden}
.kind .b{padding-top:14px; border-top:0}
.kind .w{color:var(--slate); display:block; margin-bottom:7px}
/* h3, not h4: the dated strip above it disappears with the event, and
   the kinds must still sit one step under the Events h2 either way.
   h3 and h4 share every global rule, so this is visually identical. */
.kind h3{font-size:var(--t4); line-height:1.14; margin-bottom:7px}
.kind p{margin:0; color:var(--slate); font-size:var(--t2)}
[data-photo-group="none"] .kind .pic{display:none}
[data-photo-group="none"] .kind .b{padding-top:13px; border-top:2px solid var(--navy)}
.next[data-photo-group="none"] .pic{display:none}
.next[data-photo-group="none"]{border-top-width:3px}

/* ============================================================
   DEVICE 2 - the ledger, "What it looked like".
   Dated one-line records of things that actually happened.
   This is the device that needs no photograph at all: it is
   text, and it is the strongest anti-boilerplate element on
   the page, because none of it could be true of anyone else.
   It reveals a row at a time on scroll; under reduced motion
   every row is simply already there.
   ============================================================ */
.ledger{border-top:1px solid var(--navy)}
.lg{display:grid; grid-template-columns:112px minmax(0,1fr) 96px 150px; gap:var(--s2);
  align-items:center; padding-block:22px; border-bottom:1px solid var(--edge)}
.lg .dt{color:var(--slate); font-family:var(--mono),monospace; font-size:var(--t0); letter-spacing:.04em}
.lg .t{font-size:var(--t4); line-height:1.34; min-width:0; font-weight:500; letter-spacing:-.015em}
.lg .ago{color:var(--slate); text-align:right}
.lg .th{width:150px; aspect-ratio:16/9; background:var(--navy); border-radius:2px; overflow:hidden}
.lg .th .pic{width:100%; height:100%}
[data-photo-group="none"] .lg{grid-template-columns:112px minmax(0,1fr) 130px}
[data-photo-group="none"] .lg .th{display:none}
.rv{opacity:1}
html.js-reveal .rv{opacity:0; transform:translateY(9px);
  transition:opacity .55s ease, transform .55s ease}
html.js-reveal .rv.in{opacity:1; transform:none}

/* past companies - lives inside Events, not spun out */
.logos{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--edge); border:1px solid var(--edge)}
.lo{background:var(--white); padding:15px var(--s2); display:flex; align-items:center;
  gap:13px; min-width:0}
.lo .m{width:34px; height:34px; flex:0 0 auto; border-radius:2px; overflow:hidden}
.lo .n{font-weight:600; font-size:var(--t2); line-height:1.2; min-width:0}
.lo .y{display:block; color:var(--slate); margin-top:3px}

/* ---------- E@ccelerator ---------- */
.acc-lede{max-width:70ch; color:var(--slate); font-size:var(--t3); margin:0 0 var(--s3)}
.cos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3)}
.co{border:1px solid var(--edge); border-top:2px solid var(--navy);
  border-radius:var(--r-plate); overflow:hidden; background:var(--white);
  display:flex; flex-direction:column; min-width:0}
.co .plate{position:relative; aspect-ratio:16/9; background:var(--navy)}
[data-photo-group="none"] .co .plate{aspect-ratio:auto; height:110px; background:
  repeating-linear-gradient(135deg, rgba(75,156,211,.1) 0 1px, transparent 1px 9px), var(--navy)}
[data-photo-group="none"] .co .plate .pic{display:none}
.co .plate .pic{position:absolute; inset:0}
.co .plate .mk{position:absolute; left:var(--s2); bottom:var(--s2); width:52px; height:52px;
  border-radius:var(--r-plate); overflow:hidden; box-shadow:0 6px 18px rgba(10,26,48,.4)}
[data-photo-group="none"] .co .plate .mk{bottom:auto; top:50%; transform:translateY(-50%); box-shadow:none}
.co .body{padding:var(--s2); display:flex; flex-direction:column; flex:1 1 auto}
.co .yr{color:var(--slate); display:block; margin-bottom:8px}
.co h3{font-size:var(--t5); line-height:1.12}
.co p{margin:12px 0 0; color:var(--slate); font-size:var(--t2); flex:1 1 auto}
.co dl{margin:var(--s2) 0 0; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:8px 16px; padding-top:14px; border-top:1px solid var(--edge)}
.co dt{color:var(--slate); padding-top:3px; white-space:nowrap}
.co dd{margin:0; font-weight:600; font-size:var(--t2); min-width:0}

/* ---------- navy panels ---------- */
.panelnavy{background:var(--navy); color:var(--white); border-radius:var(--r-plate);
  padding:clamp(24px,4vw,46px); display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s3); align-items:center}
/* h2 for heading order, styled as the h3 it replaced */
.panelnavy h2{font-size:var(--t5); margin-bottom:11px; font-weight:700; letter-spacing:-.03em}
.panelnavy p{margin:0; color:rgba(255,255,255,.8); max-width:64ch; font-size:var(--t2)}
.panelnavy .cta{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:var(--carolina); color:var(--navy); border-radius:var(--r-plate);
  padding:15px 24px; font-weight:700; font-size:var(--t3); white-space:nowrap}
.panelnavy .cta:hover{background:var(--white)}


/* ---------- our people (its own page) ---------- */
/* Cards stretch to the tallest in their row. They used to be identical
   heights, so `align-items:start` never showed - then the real board
   arrived with roles like "Vice president of student development" that
   wrap to two lines, and the bottom edges went ragged by up to 40px.
   Stretching keeps the grid reading as a grid whatever the roles say. */
.people{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s2); align-items:stretch}
.person{border:1px solid var(--edge); min-width:0}
.person .port{aspect-ratio:1/1; background:var(--navy); border-bottom:1px solid var(--edge)}
.person .port svg{display:block}
[data-photo-group="none"] .person .port{aspect-ratio:auto; height:74px; display:grid; place-items:center;
  background:repeating-linear-gradient(135deg, rgba(75,156,211,.1) 0 1px, transparent 1px 9px), var(--navy)}
[data-photo-group="none"] .person .port svg{display:none}
.person .port .ini{display:none; font-family:var(--mono),monospace; font-size:var(--t4);
  letter-spacing:.16em; color:#9EC9E8}
[data-photo-group="none"] .person .port .ini{display:block}
.person .id{padding:13px}
.person .nm{font-weight:700; font-size:var(--t3); line-height:1.15}
.person .ttl{display:inline-block; background:var(--tint); color:var(--slate);
  padding:3px 8px; border-radius:2px; margin-top:8px}
.person details{border-top:1px solid var(--edge)}
.person summary{list-style:none; cursor:pointer; padding:10px 13px; display:flex;
  align-items:center; justify-content:space-between; gap:9px; color:var(--slate)}
.person summary::-webkit-details-marker{display:none}
.person summary:hover{background:var(--tint)}
.person summary .pm{font-family:var(--mono),monospace; font-size:var(--t1); line-height:1}
.person details[open] summary .pm{transform:rotate(45deg)}
.person .bio{padding:0 13px 13px; font-size:var(--t1); color:var(--slate)}
.person .bio dl{margin:0 0 10px; display:grid; grid-template-columns:auto 1fr; gap:3px 10px}
.person .bio dt{color:var(--slate); font-family:var(--mono),monospace; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; padding-top:3px}
.person .bio dd{margin:0; color:var(--navy); min-width:0}
.person .bio a{font-weight:600; word-break:break-word}
/* the rule that used to sit under the seat count and the placeholder
   badge. Both were removed on 2026-08-31 at the captain's request, so the
   rule closes the page head on its own and the grid starts under it. */
.peoplerule{border:0; border-top:2px solid var(--navy); margin:0 0 var(--s3)}
/* the one thing kept from the removed "Elections are in April" panel.
   It reuses .btn rather than the panel's .cta, because .cta is styled for
   a navy ground and this one now sits on white. */
.peoplecta{margin:var(--s3) 0 0}
.pagehead{padding-block:clamp(36px,5vw,64px) var(--s2)}
.pagehead h1{font-size:clamp(36px,6vw,68px); line-height:.96; letter-spacing:-.045em; max-width:16ch}
.pagehead .lede{max-width:62ch; margin:var(--s2) 0 0; font-size:var(--t3); color:var(--slate)}
.crumb{color:var(--slate); margin-bottom:var(--s2); display:block}

/* ---------- footer ---------- */
footer{background:var(--navy); color:var(--white); padding-block:var(--s4) var(--s3); margin-top:var(--s4)}
.fgrid{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:var(--s3)}
/* the footer column labels. h2 rather than h4: inside the contentinfo
   landmark they are top-level, and on the people page there is no h3
   above them for an h4 to sit under. Every property that the h1,h2 rule
   would otherwise change is set explicitly here, so they look identical. */
.fgrid h2{font-size:var(--t0); color:rgba(255,255,255,.5); margin-bottom:12px;
  font-family:var(--mono),monospace; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
.fgrid ul{list-style:none; margin:0; padding:0}
.fgrid li{margin-bottom:8px}
.fgrid a{color:rgba(255,255,255,.88); text-decoration:none; font-size:var(--t2)}
.fgrid a:hover{color:var(--white)}
/* on navy the accent is already legible, and the ink variant would not be */
footer .mark b{color:var(--carolina)}
.fbottom{display:flex; justify-content:space-between; gap:var(--s2); flex-wrap:wrap;
  margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.55)}

/* ============================================================
   PHOTO SLOTS - the image contract.

   Every image on this site lives in a named slot. A slot is an
   element with data-slot="<name>"; the manifest that fills it is
   photos.slots in assets/js/content.js, and the catalogue of every
   slot name is in assets/photos/README.md.

   The document carries data-photos with one of three values, and
   all three are supported states of the real site:

     real  - real photographs, from the manifest. This is the mode
             the site ships in today, with one photograph in it.
     art   - the generated placeholder illustrations. Useful for
             showing what the page does once photographs land.
     none  - NO PHOTOGRAPHS AT ALL, whatever the manifest holds.

   What an image area does when it has NO photograph is decided
   per COMPONENT, not per document. Each component that owns image
   areas carries data-photo-group in the markup, and site.js sets
   it as its slots are filled:

     none  - nothing in this component is showing an image, so the
             component is recomposed around the absence. It is NOT
             A FALLBACK: it is the composed title card the design
             was approved on, and it is the ground state - the
             markup ships with it and a photograph upgrades it.
             The rules for it are attached to each component
             above, next to the component, so that they are
             impossible to miss when editing.
     some  - something in this component has a photograph, so it
             keeps its photographic geometry and the slots still
             waiting hold reserved plates rather than collapsing.
             See [data-photo="missing"] below.

   That split is what lets one headshot on the people page show
   without pulling every other component on the site out of its
   composed state.

   Switching mode is one edit: photos.mode in content.js.
   ?photos=real|art|none previews a mode without editing anything.
   ============================================================ */
.pic>img,.art>img,.port>img,.plate>img{display:block; width:100%; height:100%;
  object-fit:cover; object-position:center}
/* a slot with no photograph, in a component where something else has
   one. Reserved, composed, and quiet - never a broken image and never
   a hole. A component where NOTHING has one recomposes instead; see
   data-photo-group above. */
/* the class is on the selector so this outranks the per-component
   `background:var(--navy)` rules above, which are two classes deep */
.pic[data-photo="missing"],.art[data-photo="missing"],.port[data-photo="missing"]{background:
  repeating-linear-gradient(135deg, rgba(75,156,211,.1) 0 1px, transparent 1px 9px), var(--navy)}
/* a portrait waiting on a headshot keeps its square and shows initials,
   the same composed plate the no-photograph mode uses */
.person .port[data-photo="missing"]{display:grid; place-items:center}
.person .port[data-photo="missing"] .ini{display:block}

/* ---------- photo-mode preview bar ----------
   Not part of the site. It renders only when the page is loaded with
   ?photos=... , so that the three modes can be shown to the captain
   without a build, and never appears for an ordinary visitor. */
#photobar{position:fixed; right:14px; bottom:14px; z-index:90; background:var(--navy);
  color:var(--white); border-radius:var(--r-plate); padding:9px 11px; display:flex;
  align-items:center; gap:8px; flex-wrap:wrap; box-shadow:0 10px 30px rgba(19,41,75,.32);
  max-width:calc(100vw - 28px)}
#photobar .lbl{color:var(--carolina); font-family:var(--mono),monospace; font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase}
#photobar button{background:transparent; color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:5px 11px;
  font:inherit; font-size:var(--t1); cursor:pointer}
#photobar button[aria-pressed="true"]{background:var(--carolina); color:var(--navy);
  border-color:var(--carolina); font-weight:600}

/* ============================================================
   REDUCED MOTION - nothing on this page requires movement.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important; animation:none!important}
  html.js-reveal .rv{opacity:1; transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .kinds,.logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .thirds{grid-template-columns:minmax(0,1fr); gap:var(--s2)}
  .people{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-grid,.about-cols{grid-template-columns:minmax(0,1fr)}
  .next{max-width:470px}
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tab{padding-right:13px}
}
@media (max-width:820px){
  .panelnavy,.cos{grid-template-columns:minmax(0,1fr)}
  .onenext,[data-photo-group="none"] .onenext{grid-template-columns:minmax(0,1fr); gap:14px}
  .onenext .pic{width:100%}
  .onenext .go{width:fit-content}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  header .wrap{flex-wrap:wrap; padding-block:8px; min-height:0; gap:6px}
  .brand{gap:9px}
  .logoslot{width:32px; height:32px; font-size:7px}
  .mark{font-size:var(--t2)}
  /* the strip scrolls; the fade on the right edge is the affordance */
  nav.main{margin-left:0; width:100%; overflow-x:auto; padding-bottom:2px; gap:0;
    scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav.main::-webkit-scrollbar{display:none}
  nav.main>*{flex:0 0 auto}
  .navlink{font-size:var(--t1); padding:7px 11px}
  .signin{margin-left:8px; padding:8px 13px; font-size:var(--t1)}
  section{scroll-margin-top:118px}
  .stage{aspect-ratio:4/3}
  .lg{grid-template-columns:minmax(0,1fr) 120px; gap:14px 16px; align-items:start}
  .lg .dt{grid-column:1; font-size:var(--t0)}
  .lg .t{grid-column:1; grid-row:2}
  .lg .ago{grid-column:1; grid-row:3; text-align:left}
  .lg .th{grid-column:2; grid-row:1/4; width:120px}
  [data-photo-group="none"] .lg{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .kinds,.people,.logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 66%; scroll-snap-align:start; padding-right:18px}
  .stage{aspect-ratio:4/5}
  section{padding-block:56px}
  #rota-sub{display:none}
  .rota-head{align-items:center; gap:10px; margin-bottom:14px}
  .rota-head h2{font-size:22px}
  /* on a phone a 120px thumbnail crops to nothing. The ledger is
     text-first by design, so on a phone it is only text. */
  .lg,[data-photo-group="none"] .lg{grid-template-columns:minmax(0,1fr); gap:5px}
  .lg .th{display:none}
  .lg .dt,.lg .t,.lg .ago{grid-column:1; grid-row:auto}
  .lg .ago{text-align:left}
  #photobar{left:14px; right:14px; justify-content:center}
}
@media (max-width:430px){
  .kinds,.people{grid-template-columns:minmax(0,1fr)}
  .lo .m{width:28px; height:28px}
  .lo .n{font-size:var(--t1)}
}