/* RSM 2620 leadership poll, site design system.
   One file for the site, per the Portfolio convention.

   Every colour is measured from the course materials: #004890 is the syllabus
   table-header navy, and the bar fills use #1F5C99, the same navy lifted just
   enough to clear the mark lightness floor on a white ground. #EA0F8E is the
   Rotman magenta measured in Rotman Management, with #C9107A its text-safe step
   at 5.5:1. Ink #231F20 is that magazine's black; #6D6E6C is the grey the
   syllabus sets its headings in.

   Typefaces stand in for the licensed faces those documents use: Source Serif 4
   for Lyon Text and Chronicle Display, Archivo for Neue Haas Grotesk and Arial. */

:root{
  color-scheme:light;
  --ground:#FFFFFF; --surface:#FFFFFF; --card:#FFFFFF;
  --ink:#231F20; --muted:#6D6E6C;
  --rule:#DDDCE0; --track:#E8E9EE;
  --accent:#1F5C99; --absent:#9B9AA0;
  --brand:#EA0F8E; --brand-ink:#C9107A; --periwinkle:#697EBE;
  --shadow:rgba(35,31,32,.13);
  --ease:cubic-bezier(.22,.68,.3,1);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-variant-ligatures:none;
  line-height:1.55; padding:0 18px 56px;
}
img{max-width:100%; height:auto}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px;
}

.shell{max-width:1000px; margin:0 auto; display:flex; flex-direction:column; gap:20px}
.wrap{max-width:960px; margin:0 auto; display:flex; flex-direction:column; gap:36px}

/* ---------- masthead ---------- */
.masthead{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap; padding:22px 0 0;
}
.masthead .site{
  font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brand-ink); text-decoration:none;
}
.nav{display:flex; gap:6px}
.nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; color:var(--muted);
  border:1px solid var(--rule); border-radius:999px; padding:5px 12px;
  transition:border-color .15s, color .15s;
}
.nav a:hover{border-color:var(--brand); color:var(--brand-ink)}
.nav a[aria-current="page"]{background:var(--accent); border-color:var(--accent); color:#fff}

header{padding-top:26px; display:flex; flex-direction:column; gap:13px}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brand-ink);
}
h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(31px,5vw,50px);
  line-height:1.06; letter-spacing:-.018em; margin:0; text-wrap:balance; max-width:20ch;
}
h1 .cu{font-variant-numeric:tabular-nums; color:var(--brand-ink)}
.lede,.standfirst{margin:0; color:var(--muted); font-size:clamp(15px,1.7vw,17px); max-width:64ch}
.lede b{color:var(--ink); font-weight:500}

/* ---------- quotations ---------- */
.premise{display:flex; flex-direction:column; gap:8px; border-left:3px solid var(--brand); padding:2px 0 2px 16px}
.premise q{font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.9vw,19px); line-height:1.4; quotes:"\201C" "\201D"; max-width:56ch}
.premise .src{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--muted)}

blockquote.pull{
  margin:0; padding:24px 26px; border:1px solid var(--rule);
  border-left:3px solid var(--brand); border-radius:8px;
  display:flex; flex-direction:column; gap:12px;
}
blockquote.pull > q{font-family:var(--serif); font-size:clamp(19px,2.6vw,24px); line-height:1.38; quotes:"\201C" "\201D"}
blockquote.pull .gloss q{font-style:italic; quotes:"\201C" "\201D"}
blockquote.pull .src{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted); line-height:1.5}
blockquote.pull .gloss{font-size:15px; color:var(--ink); max-width:66ch; margin:0}

/* ---------- the source photograph ---------- */
.shot{margin:0; display:flex; flex-direction:column; gap:9px}
.shot img{display:block; width:100%; border-radius:10px; border:1px solid var(--rule)}
.shot figcaption{font-size:12.5px; color:var(--muted); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.tagline{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:#fff; background:var(--brand); border-radius:999px; padding:1px 7px; white-space:nowrap;
}

/* ---------- headline figures ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:14px}
.tile{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:18px 20px; display:flex; flex-direction:column; gap:5px}
.tile .n{font-family:var(--serif); font-size:38px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.tile.zero .n{color:var(--absent)}
.tile .cap{font-size:12.5px; color:var(--muted); line-height:1.4}

.figure{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.figure .big{font-family:var(--serif); font-size:clamp(58px,11vw,120px); line-height:.86; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.figure .big.none{color:var(--absent)}
.figure .of{font-family:var(--mono); font-size:clamp(13px,1.6vw,16px); color:var(--muted); letter-spacing:.04em}

.substat{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--rule)}
.substat .n{font-family:var(--serif); font-size:clamp(30px,4.4vw,44px); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.substat .t{font-size:14px; color:var(--muted); max-width:44ch}

section{display:flex; flex-direction:column; gap:16px}
h2{font-family:var(--serif); font-weight:600; font-size:25px; margin:0; letter-spacing:-.01em}
h3{font-family:var(--serif); font-weight:600; font-size:22px; margin:0; letter-spacing:-.01em}
.note{color:var(--muted); font-size:14px; max-width:70ch; margin:0}
.chart{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:22px 22px 18px}

/* ---------- carousel ---------- */
.viewport{overflow:hidden; border:1px solid var(--rule); border-radius:14px; background:var(--card)}
.track{display:flex; transition:transform .42s var(--ease)}
.card{
  flex:0 0 100%; min-width:100%; padding:clamp(28px,4.4vw,54px);
  min-height:clamp(400px,56vh,540px);
  display:flex; flex-direction:column; justify-content:center; gap:18px;
}
.card .kicker{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-ink)}
.card h2{font-size:clamp(24px,3.4vw,34px); line-height:1.14; max-width:24ch; text-wrap:balance}
.card p{margin:0; font-size:clamp(15px,1.6vw,17px); max-width:60ch; color:var(--ink)}
.card p.sub{color:var(--muted)}
.card .src{font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.6; letter-spacing:.03em}

.pager{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px}
.pager .hint{font-size:12.5px; color:var(--muted); grid-column:3; justify-self:end}
@media (max-width:640px){
  .pager{grid-template-columns:1fr; justify-items:center; gap:12px}
  .pager .hint{grid-column:1; justify-self:center}
}
.dots{display:flex; gap:9px; align-items:center; grid-column:2; justify-self:center}
.dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:999px;
  background:var(--track); cursor:pointer; position:relative;
  transition:width .4s var(--ease), background .25s ease;
}
.dots button::after{content:""; position:absolute; inset:-11px -5px}
.dots button:hover{background:var(--absent)}
.dots button[aria-current="true"],
.dots button[aria-current="true"]:hover{width:36px; background:var(--brand)}

/* ---------- the five conditions ---------- */
.conds{display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none}
.conds li{display:grid; grid-template-columns:26px 1fr auto; gap:14px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--rule)}
.conds li:last-child{border-bottom:0}
.conds .no{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.conds .nm{font-size:clamp(15px,1.8vw,18px)}
.conds .gl{font-size:13px; color:var(--muted); grid-column:2; margin-top:-6px}
.conds .tally{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--muted)}
.conds .tms{grid-column:2 / -1; font-family:var(--mono); font-size:11px; line-height:1.65; color:var(--accent); margin-top:3px}
.conds li.empty .nm,.conds li.empty .tally,.conds li.empty .tms{color:var(--absent)}

/* ---------- bar charts ---------- */
.bars{display:flex; flex-direction:column; gap:11px}
.bars .grp{display:flex; flex-direction:column; gap:3px}
.bars .r{display:grid; grid-template-columns:minmax(120px,210px) 1fr 38px; gap:12px; align-items:center}
.bars .r .l{font-size:13.5px; text-align:right; line-height:1.25}
.bars .r .t{background:var(--track); height:15px; border-radius:0 4px 4px 0}
.bars .r .b{display:block; background:var(--accent); height:100%; border-radius:0 4px 4px 0; transform-origin:left}
.bars .r .v{font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--muted); text-align:right}
.bars .r.empty .t{background:repeating-linear-gradient(135deg,var(--track) 0 5px,transparent 5px 10px); border:1px dashed var(--rule)}
.bars .r.empty .l,.bars .r.empty .v{color:var(--absent)}
.bars .rt{font-family:var(--mono); font-size:10.5px; line-height:1.6; color:var(--accent); padding:1px 0 3px 2px}
.bars .rt.none{color:var(--absent)}

/* the analysis page's per-term rows */
.rows{display:flex; flex-direction:column; gap:7px}
.row{display:grid; grid-template-columns:minmax(80px,150px) 1fr 34px; align-items:center; gap:11px; padding:2px 0; break-inside:avoid}
.row .lab{font-size:13px; text-align:right; overflow-wrap:break-word; line-height:1.25}
.row .trk{background:var(--track); border-radius:0 4px 4px 0; height:13px}
.row .bar{display:block; background:var(--accent); height:100%; border-radius:0 4px 4px 0; transform-origin:left}
.row .val{font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--muted); text-align:right}
.row.zero .trk{background:repeating-linear-gradient(135deg,var(--track) 0 5px,transparent 5px 10px); border:1px dashed var(--rule)}
.row.zero .lab,.row.zero .val{color:var(--absent)}
.row:hover .lab{font-weight:600}
.cols{column-count:2; column-gap:34px}
@media (max-width:720px){.cols{column-count:1}}
.group{margin-top:20px; break-inside:avoid}
.group:first-child{margin-top:4px}
.ghead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:7px; margin-bottom:9px; border-bottom:1px solid var(--rule)}
.ghead .gt{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.ghead .gn{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.axis{display:flex; justify-content:space-between; margin-top:18px; padding-top:9px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:11px; color:var(--muted)}

.toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.toolbar .tblab{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-right:2px}
button.seg{
  font-family:inherit; font-size:13px; color:var(--ink); cursor:pointer;
  background:var(--surface); border:1px solid var(--rule); border-radius:999px;
  padding:6px 14px; transition:background .15s, border-color .15s;
}
button.seg:hover{border-color:var(--accent)}
button.seg[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---------- every term, printed ---------- */
.rawhist{display:flex; flex-direction:column; gap:12px}
.rhnote{margin:0; font-size:13.5px; color:var(--muted); max-width:74ch}
.rhframe{border:1px solid var(--rule); border-radius:10px; padding:20px 22px}
.rhcols{column-count:2; column-gap:36px}
@media (max-width:760px){.rhcols{column-count:1}}
.rc{display:grid; grid-template-columns:minmax(88px,146px) 1fr 30px; gap:10px; align-items:center; padding:2.5px 0; break-inside:avoid; cursor:default}
.rc .rlab{font-size:12.5px; text-align:right; line-height:1.25; overflow-wrap:break-word}
.rc .rtrk{background:var(--track); height:12px; border-radius:0 3px 3px 0}
.rc .rbar{display:block; height:100%; background:var(--accent); border-radius:0 3px 3px 0; transform-origin:left}
.rc .rval{font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums; color:var(--muted); text-align:right}
.rc.tb{border-top:1px dashed var(--rule); margin-top:7px; padding-top:7px}
.rc.hot .rlab{color:var(--brand); font-weight:600}
.rc.hot .rbar{background:var(--brand)}
.rhkey{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--muted)}
.rhkey b{color:var(--ink); font-weight:500}

/* ---------- absence figure ---------- */
.absences{display:flex; flex-direction:column}
.abs{display:grid; grid-template-columns:1fr auto; gap:6px 18px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--rule)}
.abs:last-child{border-bottom:0; padding-bottom:2px}
.abs .fam{font-family:var(--serif); font-size:19px; line-height:1.3}
.abs .cnt{font-family:var(--mono); font-size:22px; font-variant-numeric:tabular-nums; white-space:nowrap}
.abs .cnt.none{color:var(--absent)}
.abs .stems{grid-column:1 / -1; font-family:var(--mono); font-size:11.5px; color:var(--muted); line-height:1.7; overflow-wrap:break-word}
.abs .hits{grid-column:1 / -1; font-size:13.5px}
.abs .hits b{font-weight:600}
.matched{font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--accent); max-width:66ch}
.matched.none{color:var(--absent)}
.matched b{color:var(--ink); font-weight:500}
.stems{font-family:var(--mono); font-size:11.5px; color:var(--muted); line-height:1.8; max-width:66ch}

/* ---------- hoverable terms and their tooltip ---------- */
.tm{cursor:help; border-bottom:1px dotted currentColor}
.tm:hover{color:var(--brand); border-bottom-color:var(--brand)}
#tip{
  position:fixed; left:0; top:0; pointer-events:none; opacity:0;
  transition:opacity .12s ease; z-index:50; max-width:290px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--rule); border-left:3px solid var(--brand);
  border-radius:8px; box-shadow:0 6px 22px var(--shadow);
  padding:11px 13px; font-size:12.5px; line-height:1.5;
}
#tip .t{font-family:var(--serif); font-size:16px; font-weight:600; line-height:1.2; display:block; margin-bottom:5px}
#tip dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 9px}
#tip dt{font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding-top:2px; white-space:nowrap}
#tip dd{margin:0; font-size:12.5px}
#tip dd.cond{color:var(--accent); font-weight:500}
#tip dd.fam{color:var(--brand-ink); font-weight:500}

/* ---------- caveat, references, tables, footer ---------- */
.caveat{border:1px solid var(--rule); border-radius:10px; padding:18px 20px; display:flex; flex-direction:column; gap:9px}
.caveat h3{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:500}
.caveat p{margin:0; font-size:14.5px; max-width:70ch}
.caveat p.q{font-family:var(--serif); font-style:italic; font-size:16px}

.refs ol{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px}
.refs li{font-size:13.5px; line-height:1.6; padding-left:1.7em; text-indent:-1.7em}
.refs .rnote{display:block; color:var(--muted); font-size:12.5px; text-indent:0; padding-left:0; margin-top:4px}

details{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:16px 20px}
summary{cursor:pointer; font-size:14px; font-weight:500}
.tblwrap{overflow-x:auto; margin-top:14px}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{text-align:left; padding:8px 12px 8px 0; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500}
td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; padding-right:16px}

footer{color:var(--muted); font-size:12.5px; line-height:1.6; border-top:1px solid var(--rule); padding-top:16px}
footer p{margin:0 0 7px}

/* ---------- motion, only when the viewer has not opted out ---------- */
.anim .reveal{opacity:0; transform:translateY(14px)}
.anim .reveal.in{animation:riseIn .55s var(--ease) forwards}
.anim .card > *{opacity:0; transform:translateY(12px)}
.anim .card.is-active > *{animation:riseIn .5s var(--ease) forwards}
.anim .card.is-active > *:nth-child(1){animation-delay:.04s}
.anim .card.is-active > *:nth-child(2){animation-delay:.11s}
.anim .card.is-active > *:nth-child(3){animation-delay:.18s}
.anim .card.is-active > *:nth-child(4){animation-delay:.25s}
.anim .card.is-active > *:nth-child(5){animation-delay:.32s}
.anim .conds li{opacity:0; transform:translateX(-8px)}
.anim .card.is-active .conds li{animation:dealIn .42s var(--ease) forwards}
.anim .bars .r .b{transform:scaleX(0)}
.anim .card.is-active .bars .r .b{animation:growX .55s var(--ease) forwards}
.anim .top3 span{opacity:0; transform:translateY(14px) scale(.97)}
.anim .card.is-active .top3 span{animation:riseIn .5s var(--ease) forwards}
.anim .rc .rbar{transform:scaleX(0)}
.anim .rawhist.in .rc .rbar{animation:growX .5s var(--ease) forwards}
.anim .row .bar{transform:scaleX(0)}
.anim .chart.in .row .bar{animation:growX .45s var(--ease) both}
.anim .rowsfade{animation:fadeRows .22s ease both}
@keyframes riseIn{to{opacity:1; transform:none}}
@keyframes dealIn{to{opacity:1; transform:none}}
@keyframes growX{to{transform:scaleX(1)}}
@keyframes fadeRows{from{opacity:1}to{opacity:0}}

.top3{display:flex; gap:clamp(14px,3vw,34px); flex-wrap:wrap; align-items:baseline}
.top3 span{font-family:var(--serif); font-size:clamp(26px,4.6vw,50px); line-height:1.05; letter-spacing:-.02em}

@media (prefers-reduced-motion: reduce){
  .track{transition:none}
  .dots button{transition:background .25s ease}
  #tip{transition:none}
}

/* ---------- print ---------- */
@media print{
  body{padding:0}
  .nav,.pager,.toolbar,#tip{display:none}
  .viewport{overflow:visible}
  .track{display:block; transform:none !important}
  .card{page-break-after:always; min-height:auto}
  .rhcols,.cols{column-count:2}
  a[href]::after{content:""}
}