/* Personal website of Prof. Sanjiv Gaur, v3. Style C ("Medical imaging"): navy header band,
   white content, teal accents. Outfit headings, Instrument Sans body, Red Hat Mono labels.
   One stylesheet for every page. No inline styles (the CSP is style-src 'self'). */

@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("../fonts/RedHatMono-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  --navy: #0B1F33;
  --navy-2: #13304C;
  --navy-line: rgba(255, 255, 255, .14);
  --teal: #14A3A8;          /* accent: rules, bars, text on navy */
  --teal-ink: #0A7A80;      /* teal for text / fills on white (AA) */
  --teal-ink-hover: #08666B;
  --teal-wash: #E8F6F6;
  --ink: #0F1C2A;
  --slate: #4A5B6C;
  --mist: #A9BCCD;          /* secondary text on navy */
  --line: #D8E1E8;
  --soft: #F4F7F9;
  --white: #FFFFFF;
  --done: #8FB9C9;          /* finished step bar (decorative) */
  --display: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --gut: 16px;
  --max: 1160px;
  --tabs-h: 54px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* type is in rem: it follows the reader's text-size setting */
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 1rem/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--teal-ink); text-underline-offset: 3px; }
a:hover { color: var(--teal-ink-hover); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
:target, [id] { scroll-margin-top: calc(var(--tabs-h) + 16px); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { display: inline-block; }   /* keeps a phrase together when it fits */

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--white); color: var(--navy); padding: 10px 14px; border-radius: 6px; font-weight: 700;
}
.skip:focus { top: 8px; }

.ico { flex: none; }

/* ---------- Tab bar (every page) ---------- */
.tabs {
  position: sticky; top: 0; z-index: 20;
  background: var(--navy);
  border-bottom: 1px solid var(--navy-line);
}
.tabs-in { display: flex; align-items: stretch; padding: 0; }
.mark { display: none; }
.tablist { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .8fr); width: 100%; }
.tablist a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tabs-h); height: 100%; padding: 8px 3px 10px;
  color: var(--mist); text-decoration: none; text-align: center;
  font: 400 .8125rem/1.2 var(--body); letter-spacing: .01em;
  overflow-wrap: anywhere;   /* only matters with a very large text setting */
}
.tablist a:hover { color: var(--white); }
.tablist .tw { display: block; }   /* phones: fixed two-line labels, so the bold current tab wraps exactly like the others */
.tablist a[aria-current="page"] { color: var(--white); font-weight: 700; }
.tablist a[aria-current="page"]::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 3px;
  background: var(--teal); border-radius: 3px 3px 0 0;
}
.tablist a:focus-visible { outline-color: var(--white); outline-offset: -4px; }

/* ---------- Vote page: header band (h1, portrait, role), his quote, action card ----------
   Phone order = source order: h1 -> portrait with the role line under it -> quote -> card.
   From 960px the band spans the page and the quote (left) and card (right) sit side by side.
   The concise bio ("About Prof. Gaur") is a section further down (round 4). */
.hero-grid { display: block; }
.id {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 18px; row-gap: 12px;
  align-items: center;
  padding: 22px 0 22px;
  background: var(--navy); color: var(--white);
  box-shadow: 0 0 0 100vmax var(--navy);   /* full-bleed band */
  clip-path: inset(0 -100vmax);
}
.id :focus-visible { outline-color: var(--white); }
.pic { display: block; grid-column: 1; grid-row: 1; }
.portrait {
  width: 112px; height: 140px; object-fit: cover;
  border-radius: 10px;
  background: var(--navy-2);
}
h1 { font: 700 1.625rem/1.08 var(--display); letter-spacing: -.01em; }
.vote-h { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
/* "Vote" is a word of the heading sentence, not a label: same face and size as "for IOA Vice
   President 2026" on phones; on the same line as the name from 960px */
.vh-k { display: block; margin-bottom: 4px; font-size: 1.0625rem; line-height: 1.2; letter-spacing: 0; color: var(--teal); }
.vh-n { display: block; }
.vh-f { display: block; margin-top: 8px; font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0; color: var(--white); }
.role { grid-column: 1 / -1; grid-row: 2; color: var(--mist); font-size: .9375rem; line-height: 1.4; }
/* phones and tablets: the card is below the first screen, so the band points to it */
.jump {
  grid-column: 1 / -1; grid-row: 3; justify-self: start;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -8px 0 -6px;
  color: var(--teal); font: 700 .9375rem/1.2 var(--body); text-decoration: none;
}
.jump:hover { color: var(--white); text-decoration: underline; }

/* his words: v1's "A personal note", verbatim (round 4). A quiet pull-quote: a teal mark,
   the text in the body face, his name under a short teal bar (the tile motif). */
.quote { padding-top: 26px; }
.quote .qm { display: block; width: 2rem; height: 1.5rem; margin-bottom: .75rem; color: var(--teal); }   /* rem: the mark grows with the reader's text size */
.quote blockquote p { font-size: 1.1875rem; line-height: 1.55; color: var(--navy); text-wrap: pretty; }
.quote figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 700 1rem/1.3 var(--display); color: var(--navy); }
.quote figcaption::before { content: ""; flex: none; width: 22px; height: 3px; background: var(--teal); }

/* About Prof. Gaur: the concise bio (ballot-bio variant C) */
.bio .prose p { text-wrap: pretty; }

/* ---------- Action card (date-aware; one view shows) ---------- */
.act {
  position: relative; z-index: 1;
  margin-top: 28px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-top: 4px solid var(--teal);
  border-radius: 14px;
  box-shadow: 0 10px 30px -12px rgba(11, 31, 51, .35);
  padding: 18px 16px 16px;
}
.act :focus-visible { outline-color: var(--teal-ink); }
.act-h { font: 700 1.5rem/1.15 var(--display); color: var(--navy); letter-spacing: -.005em; margin-bottom: 12px; }

/* the stage-aware heading ("How to vote" / "Vote now" / "Result"): one span shows, by the
   same data-stage as the views; no JS (no data-stage) shows "How to vote" */
.sh { display: none; }
html:not([data-stage]) .sh-pre,
html[data-stage="verify"] .sh-pre,
html[data-stage="wait"] .sh-pre,
html[data-stage="vote"] .sh-vote,
html[data-stage="results"] .sh-res { display: inline; }

.view { display: none; }
.v-nojs { display: block; }
html[data-stage] .v-nojs { display: none; }
html[data-stage="verify"] .v-verify,
html[data-stage="wait"] .v-wait,
html[data-stage="vote"] .v-vote,
html[data-stage="results"] .v-results { display: block; }

.act-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 26px; margin-bottom: 12px; }
.act-step { font: 400 .8125rem/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--teal-ink); }
.act-left {
  font: 400 .8125rem/1 var(--mono); letter-spacing: .02em; color: var(--teal-ink);
  background: var(--teal-wash); border-radius: 999px; padding: 6px 10px;
  white-space: nowrap;
}
.act-left:empty { display: none; }

.track { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
.track .bar { display: block; height: 5px; border-radius: 3px; background: var(--line); }
.track .is-now .bar { background: var(--teal); }
.track .is-done .bar { background: var(--done); }
.track .lab { display: block; margin-top: 7px; font-size: .8125rem; line-height: 1.25; color: var(--slate); }
.track .is-now .lab, .track .is-next .lab { color: var(--ink); font-weight: 700; }
.track small { display: block; font: 400 .78125rem/1.3 var(--mono); color: var(--slate); margin-top: 2px; }

.btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px; padding: 14px 18px;
  background: var(--teal-ink); color: var(--white);
  border-radius: 10px; text-decoration: none;
  font: 700 1.0625rem/1.3 var(--body);
  text-wrap: balance;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.btn:hover { background: var(--teal-ink-hover); color: var(--white); }
.btn > span { min-width: 0; overflow-wrap: anywhere; }   /* very large text: wrap inside the button */
.btn-2 {
  background: var(--white); color: var(--teal-ink);
  border: 2px solid var(--teal-ink); box-shadow: none;
  min-height: 52px; padding: 11px 16px; font-size: 1rem;
}
.btn-2:hover { background: var(--teal-wash); color: var(--teal-ink-hover); }
.btn + .btn { margin-top: 10px; }

.big-line { font: 700 1.375rem/1.2 var(--display); color: var(--navy); margin: 2px 0 16px; letter-spacing: -.005em; }

.deadline { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: .9375rem; line-height: 1.45; color: var(--ink); }
.deadline .ico { margin-top: 1px; color: var(--teal-ink); }
.deadline > span { text-wrap: pretty; }
.deadline strong { font-weight: 700; }


/* no-JS: every stage as a short dated list */
.dates { margin: 0 0 14px; border-top: 1px solid var(--line); }
.dates li { display: grid; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.dates .when { font: 400 .8125rem/1.35 var(--mono); color: var(--teal-ink); letter-spacing: .01em; }
.dates .what { font-size: .9375rem; line-height: 1.45; color: var(--ink); }

/* ---------- Sub-page header band ---------- */
.phead { background: var(--navy); color: var(--white); padding: 20px 0 26px; }
.who { font-size: .90625rem; line-height: 1.4; color: var(--mist); margin-bottom: 10px; }
.who strong { color: var(--white); font-weight: 700; display: block; }
.who .sep { display: none; }
.phead h1 { font-size: 1.875rem; line-height: 1.1; }
.phead .lede { margin-top: 10px; color: var(--mist); font-size: 1rem; line-height: 1.5; max-width: 46rem; text-wrap: balance; }
.phead :focus-visible { outline-color: var(--white); }

/* ---------- Content sections ---------- */
main { padding-bottom: 8px; }
.sec { margin-top: 36px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sec h2 { font: 700 1.375rem/1.2 var(--display); color: var(--navy); letter-spacing: -.005em; }
.sec h3.sub { font: 700 1.125rem/1.25 var(--display); color: var(--navy); margin: 26px 0 12px; }
.kick { font: 400 .78125rem/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); }
.intro { color: var(--slate); font-size: .96875rem; line-height: 1.5; margin: -4px 0 16px; max-width: 46rem; }
.more { font-size: .9375rem; font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; min-height: 44px; align-items: center; }
.more:hover { text-decoration: underline; }
.prose { max-width: 42rem; }
.prose p { font-size: 1.0625rem; line-height: 1.65; color: var(--ink); }
.prose p + p { margin-top: 14px; }

/* Readout panel: one instrument-style grid of cells */
.readout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--line); gap: 1px;
}
.cell {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 22px 14px 18px;
  background: var(--soft);
  overflow-wrap: anywhere;   /* a large text setting breaks a long word rather than clipping it */
}
.cell::before { content: ""; position: absolute; left: 14px; top: 0; width: 22px; height: 3px; background: var(--teal); }
.cell .val { color: var(--navy); font-family: var(--display); font-weight: 700; }
.cell.num .val { font-size: 2.75rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cell.num .cap { margin-top: 8px; font-size: .90625rem; line-height: 1.35; color: var(--slate); }
.cell.txt .cap { font: 400 .78125rem/1.35 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.cell.txt .val { font-size: 1.3125rem; line-height: 1.15; }
.cell.txt .sub { margin-top: 6px; font-size: .875rem; line-height: 1.4; color: var(--slate); }
.cell.txt .cap.nocase { text-transform: none; letter-spacing: .01em; }   /* degree names keep their casing (MCh) */
.cell.wide { grid-column: 1 / -1; }
.readout.r2 { grid-template-columns: 1fr; }
.readout.top .cell { justify-content: flex-start; }
.orgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px; margin-top: 2px; }
.orgs li { font: 700 1.1875rem/1.2 var(--display); color: var(--navy); }
.ach .cell:not(.wide) .orgs li { font-size: 1.125rem; }

/* Rows (service lists) */
.rows { border-top: 1px solid var(--line); }
.rows li {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px;
  padding: 14px 0 14px 16px; border-bottom: 1px solid var(--line);
  position: relative; font-size: 1rem; line-height: 1.4;
}
.rows li::before { content: ""; position: absolute; left: 0; top: 23px; width: 6px; height: 6px; border-radius: 1px; background: var(--teal); }
.r-role { color: var(--slate); }
.r-org { color: var(--ink); font-weight: 700; }
.r-yr { font: 400 .8125rem/1.4 var(--mono); color: var(--slate); }
.r-note { flex-basis: 100%; font-size: .90625rem; color: var(--slate); margin-top: 2px; }

/* Why vote: his priorities (filled from content/priorities.txt by build.py) */
.pri { display: grid; gap: 12px; counter-reset: pri; }
.pri li { counter-increment: pri; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 16px 56px; position: relative; }
.pri li::before { content: counter(pri); position: absolute; left: 18px; top: 14px; font: 700 1.5rem/1 var(--display); color: var(--teal-ink); }
.pri h3 { font: 700 1.125rem/1.25 var(--display); color: var(--navy); margin-bottom: 4px; text-wrap: balance; }
.pri p { font-size: .96875rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }

/* Video slot (shown by build.py once public/media/message.mp4 exists) */
.vid { border-radius: 12px; overflow: hidden; background: var(--navy); max-width: 54rem; }
.vid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--navy); }

/* Career timeline: clean vertical line, square nodes, mono years */
.tl { position: relative; padding-left: 24px; }
.tl::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 1px; }
.tl li { position: relative; padding: 0 0 18px; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before {
  content: ""; position: absolute; left: -24px; top: 6px; width: 10px; height: 10px;
  border-radius: 2px; background: var(--teal); box-shadow: 0 0 0 3px var(--white);
}
.tl .yr { display: block; font: 400 .8125rem/1.5 var(--mono); color: var(--teal-ink); letter-spacing: .01em; }
.tl .ev { display: block; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.tl .ev strong { font-weight: 700; }
.tl .note { display: block; margin-top: 2px; font-size: .90625rem; line-height: 1.45; color: var(--slate); }
.tl .now::before { background: var(--white); border: 2px solid var(--teal-ink); }
.tl .now .ev { color: var(--slate); }

/* Honours */
.hon { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.hon li { position: relative; background: var(--soft); padding: 22px 16px 18px; }
.hon li::before { content: ""; position: absolute; left: 16px; top: 0; width: 22px; height: 3px; background: var(--teal); }
.hon h3 { font: 700 1.1875rem/1.25 var(--display); color: var(--navy); margin: 6px 0 6px; }
.hon p { font-size: .9375rem; line-height: 1.45; color: var(--slate); }
.note-line { margin-top: 14px; font-size: .90625rem; color: var(--slate); }

/* Journal cards */
.jcards { display: grid; gap: 14px; }
.jcard { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px 18px 8px; display: flex; flex-direction: column; }
.jcard::before { content: ""; position: absolute; left: 18px; top: -1px; width: 28px; height: 3px; background: var(--teal); border-radius: 0 0 2px 2px; }
.jcard .jt { font: 700 1.0625rem/1.35 var(--body); color: var(--ink); margin: 8px 0 6px; }
.jcard .au { font-size: .90625rem; color: var(--slate); }
.jcard .au b, .papers .au b { color: var(--ink); }
.jcard .pm { margin-top: auto; }
.pm { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: .90625rem; font-weight: 700; }

.papers { border-top: 1px solid var(--line); }
.papers li { padding: 12px 0 4px; border-bottom: 1px solid var(--line); }
.papers .kick { display: block; }
.papers .t { display: block; margin-top: 3px; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.papers .au { font-size: .90625rem; color: var(--slate); }

/* Full details: ledger rows with years */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.subnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--navy-line); border-radius: 8px; color: var(--white); text-decoration: none; font-size: .9375rem;
}
.subnav a:hover { background: var(--navy-2); color: var(--white); }
.ledger { border-top: 1px solid var(--line); }
.ledger li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ledger .lr { flex: 1 1 15rem; min-width: 0; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.ledger .lr small { display: block; margin-top: 2px; font-size: .90625rem; color: var(--slate); }
.ledger .ly { margin-left: auto; font: 400 .84375rem/1.45 var(--mono); color: var(--teal-ink); text-align: right; }
.dsec { border-bottom: 1px solid var(--line); }
.dsec:first-child { margin-top: 28px; border-top: 2px solid var(--navy); }
.dd > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 12px 0; cursor: pointer; list-style: none;
}
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary h2 { font: 700 1.3125rem/1.25 var(--display); color: var(--navy); }
.dd > summary:hover h2 { color: var(--teal-ink-hover); }
.dd > summary .chev { color: var(--teal-ink); }
.dd[open] > summary .chev { transform: rotate(180deg); }
.dd .db { padding: 0 0 28px; }
.dd .db > h3:first-child { margin-top: 4px; }
.dsec h3 { font: 700 1.0625rem/1.3 var(--display); color: var(--navy); margin: 22px 0 8px; }
.src-note { margin-top: 28px; font-size: .875rem; line-height: 1.5; color: var(--slate); max-width: 46rem; }

/* Next-page link and the voting strip on sub-pages */
.pager { margin-top: 44px; border-top: 1px solid var(--line); }
.pager a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; text-decoration: none; }
.pager .kick { display: block; }
.pager .pt { display: block; font: 700 1.3125rem/1.2 var(--display); color: var(--navy); }
.pager a:hover .pt { color: var(--teal-ink-hover); text-decoration: underline; text-underline-offset: 4px; }

.vstrip { margin-top: 44px; background: var(--soft); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 12px; padding: 14px 16px; }
.vs-in { display: grid; gap: 12px; }
.vs-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 700 1.0625rem/1.35 var(--display); color: var(--navy); }
.vs-b { font: 400 .8125rem/1 var(--mono); letter-spacing: .02em; color: var(--teal-ink); background: var(--teal-wash); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.vs-b:empty { display: none; }
.vs-pair { flex-basis: 100%; }   /* no JS: one dated pair per line on phones, one line with a dot between from 600px */
.vstrip .btn { min-height: 52px; font-size: 1rem; }
.vstrip .more { justify-self: start; }

/* ---------- Footer ---------- */
.foot { margin-top: 48px; background: var(--soft); border-top: 1px solid var(--line); }
.foot .wrap { padding-top: 22px; padding-bottom: 26px; }
.foot p { font-size: .875rem; line-height: 1.55; color: var(--slate); }
.foot .f-who { margin-bottom: 4px; }
.foot .f-who .sep { display: none; }          /* phones: name, then the candidate line (no dangling dot) */
.foot .f-who .nw { display: block; }
.foot .disc { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.official { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: .9375rem; font-weight: 700; }
.official:hover { color: var(--teal-ink-hover); }
.foot .upd { margin-top: 2px; }
.foot h2 { font: 400 .78125rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin: 18px 0 6px; }

/* ---------- Wider screens ---------- */
@media (min-width: 600px) {
  :root { --gut: 24px; }
  .id { grid-template-columns: 132px minmax(0, 1fr); column-gap: 24px; padding: 28px 0 26px; }
  .portrait { width: 132px; height: 165px; }
  h1 { font-size: 2rem; }
  .vh-k, .vh-f { font-size: 1.25rem; }
  .act { max-width: 42rem; }
  .pri { grid-template-columns: 1fr 1fr; }
  .phead h1 { font-size: 2.25rem; }
  .act { padding: 22px 22px 18px; }
  .readout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .readout.ach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .readout.r3 .cell.wide { grid-column: auto; }
  .readout.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell.wide { grid-column: span 2; }
  .quote { max-width: 42rem; }   /* the card's width */
  .quote blockquote p { text-wrap: balance; }   /* six lines or fewer from here: no "to me." alone on the last line */
  .who strong { display: inline; }
  .who .sep, .foot .f-who .sep { display: inline; }
  .foot .f-who .nw { display: inline-block; }
  .tablist a { font-size: .90625rem; }
  .hon { grid-template-columns: 1fr 1fr; }
  .hon li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .jcards { grid-template-columns: 1fr 1fr; }
  .tl { padding-left: 0; }
  .tl::before { left: calc(7.5rem + 13px); }
  .tl li { display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 44px; }
  .tl li::before { left: calc(7.5rem + 9px); }
  .tl .yr { text-align: right; }
  .vstrip { padding: 16px 20px 16px 24px; }
  .vs-in { grid-template-columns: 1fr auto; align-items: center; column-gap: 28px; }
  .vs-pair { flex-basis: auto; }
  .vs-pair + .vs-pair::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 12px 0 2px; border-radius: 50%; background: var(--teal-ink); vertical-align: middle; }
}

@media (min-width: 640px) {
  .tablist .tw { display: inline; }   /* from 640px every label fits on one line, bold or not */
}

@media (min-width: 900px) {
  :root { --gut: 32px; --tabs-h: 60px; }
  .tabs-in { padding: 0 var(--gut); gap: 28px; }
  .mark { display: flex; align-items: center; font: 700 1.0625rem/1 var(--display); color: var(--white); white-space: nowrap; text-decoration: none; }
  .mark:hover { color: var(--white); }
  .tablist { display: flex; width: auto; margin-left: auto; }
  .tablist a { padding: 0 14px; font-size: .9375rem; }
  .tablist a[aria-current="page"]::after { left: 14px; right: 14px; }

  h1 { font-size: 2.75rem; }
  .vh-k, .vh-f { font-size: 1.5rem; }
  .role { font-size: 1rem; }
  .track .lab { font-size: .875rem; }
  .track small { font-size: .8125rem; }

  .phead { padding: 40px 0 44px; }
  .phead h1 { font-size: 2.75rem; }
  .phead .lede { font-size: 1.0625rem; }

  .sec { margin-top: 52px; }
  .sec h2 { font-size: 1.625rem; }
  .cell { min-height: 144px; padding: 22px 20px 20px; justify-content: flex-end; }
  .cell::before { left: 20px; }
  .cell.num .val { font-size: 3.25rem; }
  .cell.txt .val { font-size: 1.5rem; }
  .orgs li { font-size: 1.25rem; }
  .readout.ach { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ach .cell { justify-content: flex-start; }   /* labels line up across a row */
  .ach .cell:not(.wide) .orgs li { font-size: 1.25rem; }
  .ach .cell.wide { grid-column: span 2; }
  .rows.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 0; }
  .rows.two li { border-top: 1px solid var(--line); border-bottom: 0; }
  .rows.two li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .hon { grid-template-columns: repeat(3, 1fr); }
  .hon li { padding: 24px 20px 20px; }
  .hon li::before { left: 20px; }
  .hon .span2 { grid-column: span 2; }
  .split .hon { grid-template-columns: 1fr 1fr; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .split > .sec { margin-top: 52px; }
  .dsec:first-child { margin-top: 40px; }
  .dsec { max-width: 58rem; }
  .dd > summary { min-height: 68px; }
  .dd > summary h2 { font-size: 1.5rem; }
  .dd .db { padding-bottom: 36px; }
  .foot { margin-top: 64px; }
  .foot .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .foot h2 { margin-top: 0; }
}

@media (min-width: 960px) {
  /* the band (portrait + h1) spans the page; below it the quote (left) and the card (right) side by side */
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 40px; align-items: start; }
  .id { grid-column: 1 / -1; grid-row: 1; }
  .vh-k { display: inline; margin: 0; font-size: inherit; line-height: inherit; }   /* "Vote Prof. Sanjiv Gaur" on one line */
  .vh-n { display: inline; }
  .jump { display: none; }   /* the card is beside the quote */
  .quote { grid-column: 1; grid-row: 2; padding-top: 32px; max-width: 40rem; }
  .quote .qm { float: left; width: 2.375rem; height: 1.75rem; margin: .1875rem 1rem 0 0; }   /* beside the first line: the whole quote, signed, fits the first screen of a 1366 x 657 laptop */
  .quote blockquote p { font-size: 1.3125rem; }
  .act { grid-column: 2; grid-row: 2; margin-top: 28px; max-width: none; }
}

@media (min-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 64px; }
  .id { grid-template-columns: 168px minmax(0, 1fr); column-gap: 36px; row-gap: 14px; padding: 28px 0 24px; }
  .portrait { width: 168px; height: 210px; border-radius: 12px; }
  .vote-h { font-size: 3.25rem; }
  .vh-f { font-size: 1.75rem; margin-top: 10px; }
  .role { font-size: 1rem; }
  .act { padding: 24px 24px 20px; }
  .bio .prose { max-width: 46rem; }   /* about two thirds of the page: a reading measure, not a thin column */
  .bio .prose p { font-size: 1.125rem; }
}

@media (min-width: 1100px) {
  .jcards { grid-template-columns: repeat(4, 1fr); }
  .ach .cell.wide .orgs { grid-template-columns: repeat(2, max-content); }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .tablist a, .more, .official, .subnav a, .pt, .dd > summary h2 { transition: background-color .15s, color .15s; }
}

@media (forced-colors: active) {
  .track .bar { border: 1px solid CanvasText; }
  .track .is-now .bar { background: Highlight; }
  .cell::before, .hon li::before, .jcard::before, .quote figcaption::before { background: CanvasText; }
}

@media print {
  .tabs, .skip, .pager, .vstrip, .jump { display: none !important; }
  .phead, .id { background: none !important; color: #000; box-shadow: none; clip-path: none; }
  .role, .who, .who strong, .phead .lede, .vh-k, .vh-f { color: #000; }
  .subnav { display: none; }
  .act { box-shadow: none; margin-top: 12px; }
  .act .view, .act .sh { display: none !important; }
  .act .v-nojs { display: block !important; }
  .act .sh-pre { display: inline !important; }
  /* Full details: every collapsed section prints in full (site.js also opens them) */
  .dd::details-content { display: block !important; content-visibility: visible !important; }
  .dd > summary .chev { display: none; }
  a { color: #000; }
}