/* D · Magazine: warm paper, Fraunces over Figtree, terracotta accent, TOC on the left, big italic ranks. */
:root {
  --bg: #faf8f3; --surface: #fffdf8; --ink: #1c1a17; --text: #33302b; --muted: #8a8378; --line: #e6e0d4; --accent: #b4532a;
  --font: "Figtree", system-ui, sans-serif; --display: "Fraunces", Georgia, serif;
  --display-weight: 400; --display-tracking: -0.02em; --radius: 2px; --side: 220px; --gap: 96px;
  --h1: clamp(2.8rem, 5.6vw, 4.6rem);
}
h1 { font-variation-settings: "opsz" 144; line-height: 1.02; }
.layout { grid-template-columns: var(--side) minmax(0, var(--col)); justify-content: start; }
.side { order: -1; }
.layout.single { grid-template-columns: minmax(0, var(--col)); }
.top { border-bottom: 3px double var(--line); }
.mark { border-radius: 50%; }
.answer { background: transparent; border: 0; border-block: 1px solid var(--ink); border-radius: 0; padding: 22px 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.answer .label { font-family: var(--font); }
.rank { font-style: italic; font-weight: 300; font-size: 3.4rem; color: var(--accent); min-width: 64px; }
.pick-facts, .links { margin-left: 84px; }
thead th { border-bottom: 1px solid var(--ink); }
.glance { background: transparent; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 18px 0 0; }
.toc { border-top: 1px solid var(--ink); padding-top: 18px; }
.toc ol { font-family: var(--display); font-size: 1rem; }
.btn { background: var(--ink); border-color: var(--ink); }
.hero h1 { font-style: italic; font-weight: 300; }
.steps li::before { font-style: italic; color: var(--accent); font-size: 2.6rem; }
.band-head { border-bottom: 1px solid var(--ink); }
@media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); } .side { order: 0; } }
@media (max-width: 640px) { .pick-facts, .links { margin-left: 0; } }