/* =============================================================================
   McDowell Trojans — shared styles
   Navy #091953 · lifted navy #14245e · helmet silver #aab3c4 · pagebar #e3e8f2
   ============================================================================= */

:root{
  --navy:#091953; --navy-2:#14245e; --navy-3:#061138;
  --silver:#aab3c4; --pagebar:#e3e8f2; --gold:#d8b25a;
  --ink:#1a1a1a; --muted:#5b6880; --line:#d3dae8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#fff;background:var(--navy);-webkit-font-smoothing:antialiased;
}

/* ---------- logo: never distort. width only, height follows. -------------- */
.crest{display:block;margin:0 auto;width:120px;height:auto;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55))}
.crest--lg{width:180px}
.crest--sm{width:76px}

/* ---------- auth card layout ---------------------------------------------- */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;position:relative;overflow:hidden}
.authwrap .mosaic{position:absolute;inset:-6%;display:grid;grid-template-columns:repeat(10,1fr);
  filter:grayscale(1) contrast(.85) brightness(.6);opacity:.22}
.authwrap .mosaic img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:7/10}
.authwrap .wash{position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 66% at 50% 44%, rgba(9,25,83,.80) 0%, rgba(9,25,83,.95) 62%, #091953 100%)}

.card{position:relative;z-index:2;width:100%;max-width:440px}
.card--wide{max-width:560px}
.card .head{text-align:center;margin-bottom:26px}
.card .kicker{margin:14px 0 0;font-size:11.5px;letter-spacing:.30em;text-transform:uppercase;color:var(--silver);font-weight:700}
.card h1{margin:6px 0 0;font-size:40px;line-height:.95;font-weight:800;text-transform:uppercase}
.card h1 .yr{color:var(--silver)}
.card .sub{margin:12px 0 0;font-size:15px;color:rgba(255,255,255,.72)}

.panel{background:#fff;color:var(--ink);border-radius:10px;padding:30px 28px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.panel h2{margin:0 0 4px;font-size:22px;color:var(--navy);font-weight:800}
.panel .lede{margin:0 0 22px;font-size:14.5px;color:var(--muted)}

.fld{margin-bottom:16px}
.fld label{display:block;font:700 11.5px/1 inherit;letter-spacing:.12em;text-transform:uppercase;color:#48566f;margin-bottom:7px}
.fld input,.fld textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:5px;
  font:15px/1.4 inherit;color:var(--ink);background:#fbfcfe}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--navy);background:#fff}
.fld .hint{margin-top:6px;font-size:12.5px;color:#78859c}

.btn{display:inline-block;border:0;border-radius:6px;cursor:pointer;text-decoration:none;text-align:center;
  padding:16px 30px;font:700 13.5px/1 inherit;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .12s,background .16s,opacity .16s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default}
.btn--primary{background:var(--navy);color:#fff;width:100%;padding:17px}
.btn--primary:hover:not(:disabled){background:var(--navy-2)}
.btn--light{background:#fff;color:var(--navy)}
.btn--light:hover{background:var(--silver)}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.11)}

.msg{margin-top:16px;padding:13px 15px;border-radius:5px;font-size:14.5px;display:none}
.msg.ok{display:block;background:#e8f5ec;color:#1c6b38;border:1px solid #b6dfc4}
.msg.err{display:block;background:#fdeaea;color:#9b2226;border:1px solid #f2c2c2}
.msg.info{display:block;background:#eef2fb;color:#2c3d68;border:1px solid #c8d4ee}

.altline{margin:22px 0 0;text-align:center;font-size:14px;color:rgba(255,255,255,.62)}
.altline a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.linkrow{margin-top:14px;text-align:center;font-size:13.5px}
.linkrow a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* ---------- countdown ------------------------------------------------------ */
.count{display:inline-flex;align-items:stretch;gap:0;margin-top:30px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.19);border-radius:12px;overflow:hidden}
.count .unit{padding:12px 18px;text-align:center;min-width:74px}
.count .unit + .unit{border-left:1px solid rgba(255,255,255,.14)}
.count .n{display:block;font-size:26px;font-weight:800;color:var(--gold);line-height:1.1;font-variant-numeric:tabular-nums}
.count .l{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:3px}
.count .cap{display:flex;align-items:center;padding:0 20px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(255,255,255,.05)}
@media (max-width:560px){
  .count{flex-wrap:wrap;justify-content:center}
  .count .cap{width:100%;justify-content:center;padding:9px 0;order:-1}
  .count .unit{min-width:64px;padding:10px 12px}
}

/* ---------- yearbook picker (registration) --------------------------------- */
.picker{border:1.5px solid var(--line);border-radius:6px;max-height:268px;overflow-y:auto;background:#fbfcfe}
.picker:empty{display:none}
.pick{display:flex;align-items:center;gap:12px;padding:9px 11px;cursor:pointer;border-bottom:1px solid #eef1f7}
.pick:last-child{border-bottom:0}
.pick:hover{background:#eef2fb}
.pick img{width:38px;height:54px;object-fit:cover;border-radius:3px;background:#dde3ee;flex:none}
.pick .nm{font-weight:700;font-size:14.5px;color:var(--navy)}
.pick .st{font-size:12px;color:#8794aa}
.pick.taken{opacity:.5;cursor:not-allowed}
.pick.taken:hover{background:transparent}
.pick.sel{background:var(--pagebar);box-shadow:inset 3px 0 0 var(--navy)}

.chosen{display:flex;align-items:center;gap:13px;padding:11px;border:1.5px solid var(--navy);
  border-radius:6px;background:var(--pagebar);margin-top:4px}
.chosen img{width:44px;height:63px;object-fit:cover;border-radius:3px;flex:none}
.chosen .nm{font-weight:800;color:var(--navy);font-size:15px}
.chosen button{margin-left:auto;background:none;border:0;color:var(--muted);
  font-size:12px;text-decoration:underline;cursor:pointer;letter-spacing:.04em}

footer.sitefoot{background:var(--navy-3);color:rgba(255,255,255,.44);text-align:center;
  padding:26px 20px;font-size:12px;letter-spacing:.05em;position:relative;z-index:2}