/**
 * "The Northwestern Issue" — a magazine-style feature page (northwestern.html).
 * Builds on the site tokens in style.css; adds Northwestern purple for the
 * magazine's own voice.
 */

:root {
  --nu: #4e2a84;
  --nu-light: #b89fe0;
  --nu-deep: #2a1747;
  --mag-measure: 62ch;
}

body.mag { background: var(--ink); }
body.mag #main { margin-left: 0; }
.mag img { max-width: 100%; display: block; }

/* ---------- running header ---------- */
.mag-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 10px 24px;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--parchment);
  background: linear-gradient(180deg, rgba(21, 16, 22, 0.85), rgba(21, 16, 22, 0));
  transition: background 0.3s ease;
}
.mag-bar.solid { background: rgba(21, 16, 22, 0.94); border-bottom: 1px solid var(--rule); }
.mag-bar a { color: var(--parchment); }
.mag-bar a:hover { color: var(--gold-light); }
.mag-bar .title { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.3em; }
.mag-bar .issue { text-align: right; color: var(--parchment-2); }

/* ---------- cover ---------- */
.cover {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding: 64px 5vw 34px;
  color: #fff;
}
.cover-img { position: absolute; inset: -4% 0 0 0; height: 108%; width: 100%; object-fit: cover; object-position: center 60%; z-index: 0; will-change: transform; }
.cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(21, 12, 30, 0.72) 0%, rgba(21, 12, 30, 0.05) 34%, rgba(21, 12, 30, 0.1) 60%, rgba(21, 12, 30, 0.88) 100%);
}
.cover > :not(.cover-img) { position: relative; z-index: 2; }
.masthead {
  margin: 0; line-height: 0.82; text-align: center;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 10.2vw, 188px); letter-spacing: 0.01em;
  color: #fff; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.35);
}
.cover-meta {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.cover-lines { align-self: end; display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px 6vw; align-items: end; }
.cover-lead .kicker { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
.cover-lead h2 { margin: 6px 0 10px; font-size: clamp(38px, 5.4vw, 84px); line-height: 0.95; color: #fff; }
.cover-lead h2 em { color: var(--gold-light); }
.cover-lead p { max-width: 46ch; margin: 0; font-size: clamp(16px, 1.4vw, 19px); color: rgba(255, 255, 255, 0.88); }
.cover-lead p, .cover-side li { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85); }
.cover-side { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cover-side li { padding-left: 14px; border-left: 3px solid var(--gold); font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, 0.9); }
.cover-side strong { font-variant-numeric: lining-nums; display: block; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.05; color: #fff; }
.cover-foot { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-top: 28px; }
.cover-foot .scroll { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.cover-foot .scroll i { display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.barcode { display: flex; align-items: end; gap: 10px; padding: 8px 10px; background: #fff; color: #111; }
.barcode svg { display: block; }
.barcode span { font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.2; }

/* ---------- shared magazine type ---------- */
.spread { position: relative; padding: 110px 0; }
.spread.paper { background: var(--paper); color: var(--paper-ink); }
.spread.paper h2, .spread.paper h3, .spread.paper h4 { color: var(--paper-ink); }
.spread.plum { background: radial-gradient(ellipse at 20% 0%, #3b2166 0%, var(--nu-deep) 55%, #1a0f2c 100%); }
.wrap { width: min(1180px, 100% - 48px); margin: 0 auto; }
.folio {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 38px; padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8;
}
.kicker { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.paper .kicker { color: var(--nu); }
.headline { margin: 0 0 18px; font-size: clamp(44px, 6.4vw, 96px); line-height: 0.95; letter-spacing: -0.01em; }
.headline em { font-style: italic; color: var(--gold-light); }
.paper .headline em { color: var(--nu); }
.dek { max-width: 58ch; margin: 0 0 40px; font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-style: italic; line-height: 1.35; color: var(--parchment-2); }
.paper .dek { color: #5b4a58; }
.byline { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--parchment-2); }
.cols { column-count: 2; column-gap: 44px; max-width: 980px; }
.cols p { margin: 0 0 1em; font-size: 17px; line-height: 1.75; }
.dropcap::first-letter { float: left; margin: 6px 10px 0 0; font-family: var(--font-display); font-size: 5.2em; font-weight: 700; line-height: 0.72; color: var(--gold); }
.paper .dropcap::first-letter { color: var(--nu); }
.pull {
  margin: 60px 0; padding: 26px 0; border-top: 2px solid var(--gold); border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 46px); font-style: italic; line-height: 1.2; text-align: center;
}
.paper .pull { border-color: var(--nu); }
.pull cite { display: block; margin-top: 12px; font-family: var(--font-ui); font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--parchment-2); }
.src { font-family: var(--font-ui); font-size: 11px; color: var(--parchment-2); opacity: 0.85; }
.paper .src { color: #6f5f6c; }

/* ---------- contents ---------- */
.contents { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.contents figure { margin: 0; position: relative; }
.contents figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.contents figcaption, .cap { margin-top: 8px; font-family: var(--font-ui); font-size: 11.5px; color: var(--parchment-2); }
.paper .cap, .paper figcaption { color: #6f5f6c; }
.toc { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.toc li { border-top: 1px solid rgba(43, 29, 42, 0.25); }
.toc li:last-child { border-bottom: 1px solid rgba(43, 29, 42, 0.25); }
.toc a { display: grid; grid-template-columns: 60px 1fr auto; gap: 16px; align-items: baseline; padding: 16px 0; color: var(--paper-ink); }
.toc a:hover { color: var(--nu); }
.toc .no { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--nu); font-variant-numeric: lining-nums; }
.toc .t { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.1; }
.toc .t small { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: #5b4a58; }
.toc .arrow { font-size: 18px; opacity: 0.6; }

/* ---------- by the numbers ---------- */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.numbers > div { padding: 30px 26px 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); border-right: 1px solid rgba(255, 255, 255, 0.25); }
.numbers > div:nth-child(4n) { border-right: 0; }
.numbers .big { display: block; font-family: var(--font-display); font-size: clamp(56px, 6.4vw, 104px); font-weight: 700; line-height: 0.9; color: #fff; font-variant-numeric: lining-nums; }
.numbers .big sup, .numbers .big small { font-size: 0.42em; color: var(--gold-light); vertical-align: 0.9em; margin-left: 2px; }
.numbers .lbl { display: block; margin-top: 12px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nu-light); }
.numbers p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }

/* ---------- Nobel room ---------- */
.nobel-hero { display: grid; grid-template-columns: 1fr 340px; gap: 60px; align-items: end; margin-bottom: 50px; }
.medal {
  position: relative; width: 300px; aspect-ratio: 1; border-radius: 50%; justify-self: end;
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #f6e2a8 0%, #d6b25e 38%, #9c7a2e 75%, #6e531c 100%);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.12), inset 0 0 0 12px rgba(80, 55, 10, 0.35), 0 30px 70px rgba(0, 0, 0, 0.5);
  color: #3a2a08;
}
.medal .n { font-family: var(--font-display); font-size: 120px; font-weight: 700; line-height: 0.85; font-variant-numeric: lining-nums; }
.medal .w { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.medal::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1px dashed rgba(58, 42, 8, 0.45); }
.laureates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.laureate { position: relative; padding: 24px 22px 20px 88px; min-height: 150px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--rule); border-top: 2px solid var(--gold); }
.laureate .yr {
  position: absolute; left: 18px; top: 22px; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #3a2a08;
  background: radial-gradient(circle at 35% 30%, #f6e2a8, #c9a45f 60%, #8a6a2e);
  font-variant-numeric: lining-nums;
}
.laureate h4 { margin: 0 0 2px; font-size: 24px; line-height: 1.1; }
.laureate .field { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.laureate p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--parchment-2); }
.laureate .tie { display: inline-block; margin-top: 10px; font-family: var(--font-ui); font-size: 11px; color: var(--nu-light); }

/* ---------- Feinberg ---------- */
.feinberg-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
.stack { display: grid; grid-template-columns: 1fr 0.62fr; gap: 14px; }
.stack img { width: 100%; height: 100%; object-fit: cover; }
.stack .tall { grid-row: span 2; }
.stack figure { margin: 0; }
.honors { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; }
.honors li { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(43, 29, 42, 0.2); }
.honors .rk { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 0.9; color: var(--nu); font-variant-numeric: lining-nums; }
.honors .rk small { font-size: 0.45em; margin-left: 2px; }
.honors h4 { margin: 0; font-size: 21px; line-height: 1.2; }
.honors p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: #5b4a58; }

/* ---------- schools ---------- */
.schools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.schools li { display: grid; grid-template-columns: 128px 1fr; gap: 22px; align-items: start; padding: 28px 0; border-top: 1px solid var(--rule-strong); }
.schools .rk { font-family: var(--font-display); font-size: 76px; font-weight: 700; line-height: 0.8; color: var(--gold-light); font-variant-numeric: lining-nums; }
.schools .rk small { font-size: 0.34em; color: var(--parchment-2); margin-left: 3px; letter-spacing: 0.04em; }
.schools .rk.word { font-size: 40px; line-height: 1; padding-top: 8px; }
.schools h4 { margin: 0 0 4px; font-size: 26px; line-height: 1.1; }
.schools .what { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lilac); }
.schools p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--parchment-2); }

/* ---------- photo essay ---------- */
.seasons { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 88px; gap: 12px; }
.seasons figure { position: relative; margin: 0; overflow: hidden; }
.seasons img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.seasons figure:hover img { transform: scale(1.04); }
.seasons figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
  font-family: var(--font-ui); font-size: 11.5px; color: #fff; letter-spacing: 0.02em;
}
.seasons figcaption b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0; }
.s-a { grid-column: 1 / 8; grid-row: span 5; }
.s-b { grid-column: 8 / 13; grid-row: span 3; }
.s-c { grid-column: 8 / 13; grid-row: span 2; }
.s-d { grid-column: 1 / 5; grid-row: span 3; }
.s-e { grid-column: 5 / 13; grid-row: span 6; }
.s-f { grid-column: 1 / 5; grid-row: span 3; }
.s-g { grid-column: 1 / 13; grid-row: span 5; }

/* ---------- research strip ---------- */
.lab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.lab figure { margin: 0; }
.lab img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- life collage ---------- */
.life { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: 10px; }
.life figure { margin: 0; overflow: hidden; position: relative; }
.life img { width: 100%; height: 100%; object-fit: cover; }
.life .l1 { grid-column: span 4; grid-row: span 3; }
.life .l2 { grid-column: span 2; grid-row: span 2; }
.life .l3 { grid-column: span 2; grid-row: span 2; }
.life .l4 { grid-column: span 2; grid-row: span 2; }
.life .l5 { grid-column: span 2; grid-row: span 2; }
.life .l6 { grid-column: span 2; grid-row: span 2; }
.life .tag {
  position: absolute; left: 10px; top: 10px; padding: 3px 9px;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--nu);
}

/* ---------- closing ---------- */
.closing { position: relative; min-height: 80vh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.closing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(21, 12, 30, 0.45), rgba(21, 12, 30, 0.9)); }
.closing > div { position: relative; z-index: 1; padding: 60px 24px; }
.closing .motto { margin: 0; font-family: var(--font-display); font-size: clamp(44px, 7vw, 110px); font-style: italic; line-height: 1; color: #fff; }
.closing .gloss { margin: 14px 0 30px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); }

.colophon { padding: 56px 0 70px; font-size: 13px; color: var(--parchment-2); }
.colophon h3 { font-size: 22px; }
.colophon ol { padding-left: 18px; columns: 2; column-gap: 40px; }
.colophon li { margin-bottom: 6px; break-inside: avoid; }
.colophon a { color: var(--parchment-2); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .cover-foot .scroll i { animation: none; }
  .seasons img { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .spread { padding: 76px 0; }
  .cover-lines, .contents, .feinberg-grid, .nobel-hero { grid-template-columns: 1fr; }
  .medal { justify-self: start; width: 220px; }
  .medal .n { font-size: 88px; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers > div:nth-child(4n) { border-right: 1px solid rgba(255, 255, 255, 0.25); }
  .numbers > div:nth-child(2n) { border-right: 0; }
  .laureates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schools { grid-template-columns: 1fr; }
  .cols { column-count: 1; }
  .colophon ol { columns: 1; }
}
@media (max-width: 640px) {
  .mag-bar { grid-template-columns: auto 1fr; padding: 10px 16px; }
  .mag-bar .title { display: none; }
  .cover { padding: 56px 16px 24px; }
  .cover-meta { flex-wrap: wrap; font-size: 10px; }
  .barcode { display: none; }
  .wrap { width: calc(100% - 32px); }
  .numbers { grid-template-columns: 1fr; }
  .numbers > div { border-right: 0 !important; }
  .laureates { grid-template-columns: 1fr; }
  .schools li { grid-template-columns: 90px 1fr; }
  .schools .rk { font-size: 56px; }
  .toc a { grid-template-columns: 44px 1fr auto; }
  .toc .t { font-size: 21px; }
  .seasons, .life { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
  .seasons figure, .life figure { grid-column: span 1 !important; grid-row: span 2 !important; }
  .seasons .s-a, .seasons .s-g, .life .l1 { grid-column: span 2 !important; }
  .lab { grid-template-columns: 1fr; }
  .honors li { grid-template-columns: 80px 1fr; }
}