/* Yale SOM Student Government Elections — design system.
   Tokens lifted from ballotcssjs/handoff/01-tokens.css (school-confirmed
   palette, fluid type ramp). Self-hosted fonts: no external requests at all. */

@font-face { font-family:'Yale'; src:url('fonts/Yale2024-Roman.woff2') format('woff2');      font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Yale'; src:url('fonts/Yale2024-Italic.woff2') format('woff2');     font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Yale'; src:url('fonts/Yale2024-Bold.woff2') format('woff2');       font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Yale'; src:url('fonts/Yale2024-BoldItalic.woff2') format('woff2'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Puritan'; src:url('fonts/Puritan-Regular.woff2') format('woff2');    font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Puritan'; src:url('fonts/Puritan-Italic.woff2') format('woff2');     font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Puritan'; src:url('fonts/Puritan-Bold.woff2') format('woff2');       font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Puritan'; src:url('fonts/Puritan-BoldItalic.woff2') format('woff2'); font-weight:700; font-style:italic; font-display:swap; }

:root{
  --serif:'Yale',Georgia,serif;
  --sans:'Puritan',Verdana,'DejaVu Sans',sans-serif;
  --fs-mark:clamp(30px,1.25vw + 26.00px,44px);
  --fs-display:clamp(27px,1.16vw + 23.29px,40px);
  --fs-section:clamp(21px,0.54vw + 19.29px,27px);
  --fs-subhead:clamp(18px,0.36vw + 16.86px,22px);
  --fs-body:clamp(16px,0.18vw + 15.43px,18px);
  --fs-meta:clamp(14px,0.09vw + 13.71px,15px);
  --fs-label:clamp(13px,0.09vw + 12.71px,14px);
  --lh-tight:1.2; --lh-body:1.6; --lh-meta:1.5;
  --track-label:.14em;
  --measure:500px;

  --ground:#DDDDDD; --paper:#F9F9F9; --raised:#FFFFFF; --row:#F4F4F4; --bar:#EAEAEA;
  --wash-pill:#EAF2FB; --wash-flash:#DCE9F7;
  --action:#00356B; --ink-head:#00356B; --ink-body:#222222; --ink-meta:#4A4A4A; --ink-mute:#978D85;
  --danger:#BD5319;  /* Yale orange. Nothing in this system is red. */
  --affirm:#5F712D;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --gutter:16px; --shell:1320px;
  --r-sm:6px; --r-md:12px; --r-pill:999px;
  --d-fast:160ms; --d-base:240ms; --d-slow:300ms;
  --e-out:cubic-bezier(.2,.8,.3,1);
}
@media (min-width:640px){ :root{ --gutter:24px; } }
@media (min-width:1024px){ :root{ --gutter:32px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ground); color:var(--ink-body);
  font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body);
}
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink-head); line-height:var(--lh-tight); margin:0 0 var(--s3); font-weight:400; }
h1{ font-size:var(--fs-display); }
h2{ font-size:var(--fs-section); }
h3{ font-size:var(--fs-subhead); }
p{ margin:0 0 var(--s4); }
a{ color:var(--action); }

/* One focus style, everywhere, no exceptions. */
:focus-visible{ outline:2px solid var(--action); outline-offset:2px; }

.shell{ width:min(100% - 2*var(--gutter),var(--shell)); margin-inline:auto; }
.measure{ max-width:var(--measure); }

/* ── Masthead ─────────────────────────────────────────────────────────────── */
.masthead{ background:var(--raised); border-bottom:1px solid var(--bar); position:sticky; top:0; z-index:20; }
.masthead__in{ display:flex; align-items:center; gap:var(--s5); min-height:56px; }
@media (min-width:768px){ .masthead__in{ min-height:64px; } }
.wordmark{ font-family:var(--serif); font-size:var(--fs-subhead); color:var(--ink-head); text-decoration:none; white-space:nowrap; }
.wordmark span{ display:block; font-family:var(--sans); font-size:var(--fs-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-meta); }
.nav{ display:flex; gap:var(--s4); margin-left:auto; align-items:center; flex-wrap:wrap; }
.nav a{ font-size:var(--fs-meta); color:var(--ink-body); text-decoration:none; padding:var(--s2) 0; border-bottom:2px solid transparent; }
.nav a[aria-current="page"]{ color:var(--action); border-bottom-color:var(--action); }

/* ── Blocks ───────────────────────────────────────────────────────────────── */
main{ padding:var(--s6) 0 var(--s8); }
.card{ background:var(--raised); border:1px solid var(--bar); border-radius:var(--r-md); padding:var(--s5); }
.card + .card{ margin-top:var(--s4); }
.stack > * + *{ margin-top:var(--s4); }
.meta{ font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--ink-meta); }
.label{ display:block; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-meta); margin-bottom:var(--s2); }

input[type=text],input[type=email],textarea,select{
  width:100%; font-family:var(--sans); font-size:var(--fs-body); color:var(--ink-body);
  background:var(--paper); border:1px solid var(--bar); border-radius:var(--r-sm); padding:var(--s3);
}
textarea{ line-height:var(--lh-body); resize:vertical; min-height:9rem; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; padding:0 var(--s5); border:1px solid var(--action); border-radius:var(--r-sm);
  background:var(--action); color:#fff; font-family:var(--sans); font-size:var(--fs-body);
  text-decoration:none; cursor:pointer; transition:opacity var(--d-fast) var(--e-out); }
.btn:hover{ opacity:.9; }
.btn--ghost{ background:transparent; color:var(--action); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.notice{ border-left:3px solid var(--action); background:var(--wash-pill);
  padding:var(--s3) var(--s4); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:var(--fs-meta); }
.notice--warn{ border-left-color:var(--danger); background:#FBEFE8; }
.notice--ok{ border-left-color:var(--affirm); background:#EDF1E4; }

/* ── Sign-in ──────────────────────────────────────────────────────────────── */
.centre{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:var(--s5); }
.panel{ width:100%; max-width:420px; background:var(--raised); border:1px solid var(--bar);
  border-radius:var(--r-md); padding:var(--s6); }
.code-input{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:28px;
  letter-spacing:.3em; text-align:center; padding:var(--s4) var(--s3); }

/* ── Candidate photo ──────────────────────────────────────────────────────── */
.portrait{ width:120px; height:160px; object-fit:cover; border-radius:var(--r-sm);
  background:var(--row); border:1px solid var(--bar); display:block; }
.portrait--sm{ width:52px; height:52px; border-radius:var(--r-pill); }
.monogram{ display:flex; align-items:center; justify-content:center; background:var(--wash-pill);
  color:var(--action); font-family:var(--serif); font-size:var(--fs-section); }

/* Reduced motion removes the travel, not the information. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Avatars are circular; the stored asset is a square JPEG ───────────────── */
.avatar{ width:52px; height:52px; border-radius:var(--r-pill); object-fit:cover;
  background:var(--row); border:1px solid var(--bar); display:block; }
.avatar--lg{ width:140px; height:140px; }

/* ── Circular cropper ─────────────────────────────────────────────────────── */
#crop-view{ position:relative; width:260px; height:260px; overflow:hidden;
  border-radius:var(--r-pill); background:var(--row); border:1px solid var(--bar);
  cursor:grab; touch-action:none; user-select:none; }
#crop-view:active{ cursor:grabbing; }
#crop-view img{ position:absolute; top:0; left:0; transform-origin:0 0;
  max-width:none; pointer-events:none; }
#crop-mask{ position:absolute; inset:0; border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); pointer-events:none; }
#crop-view:focus-visible{ outline:2px solid var(--action); outline-offset:2px; }