/* =====================================================================
   ARTICLE SYSTEM
   One stylesheet, many shapes. Every article picks from these blocks
   rather than inventing layout, but the blocks are varied enough that
   two articles never have to look the same.
   ===================================================================== */

/* ---- index --------------------------------------------------------- */
.post-list { display: grid; gap: 0; margin-top: 8px; }
.post-card {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 220px;
  gap: 30px; align-items: start;
  padding: 30px 0; border-top: 1px solid var(--line);
  text-decoration: none;
}
.post-card:first-child { border-top: 0; }
.post-card:hover h2 { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 5px; }
.post-meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--earth-2);
}
.post-card h2 {
  margin: 0 0 8px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.18; color: var(--ink);
}
.post-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 62ch; }
.post-thumb { border: 1px solid var(--line); background: var(--bone); aspect-ratio: 16 / 10; }
.post-thumb svg { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
  .post-card { grid-template-columns: 1fr; gap: 12px; }
  .post-thumb { order: -1; }
}

/* ---- article shell -------------------------------------------------- */
.article { --measure: 68ch; }
.article-head { max-width: 900px; }
.article-head h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5vw, 62px); line-height: 1.02; letter-spacing: -.025em;
  margin: 0 0 20px; color: var(--ink); max-width: 20ch;
}
.article-head .kicker {
  display: block; margin-bottom: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--lime-ink);
}
.article-sub { max-width: 56ch; margin: 0 0 24px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.article-byline {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--earth-2);
  max-width: none;
}

/* the reading column, with room for things that break out of it */
.article-body { max-width: var(--measure); margin: 40px 0 0; }
.article-body > * { max-width: var(--measure); }
.article-body p { font-size: 17px; line-height: 1.72; color: var(--ink-2); margin: 0 0 22px; }
.article-body h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.8vw, 34px); line-height: 1.16;
  margin: 52px 0 16px; color: var(--ink); letter-spacing: -.01em;
}
.article-body h3 { font-size: 17px; font-weight: 600; margin: 34px 0 10px; color: var(--ink); }
.article-body a { color: var(--lime-ink); text-underline-offset: 3px; }
.article-body a:hover { color: var(--ink); }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 20px; }
.article-body li { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin-bottom: 9px; }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body blockquote {
  margin: 32px 0; padding: 0 0 0 22px; border-left: 2px solid var(--lime);
  font-family: var(--serif); font-size: 21px; line-height: 1.45; color: var(--ink);
}

/* ---- blocks that break the column ----------------------------------- */
.wide { max-width: min(1100px, 92vw) !important; margin-left: calc((var(--measure) - min(1100px, 92vw)) / 2); }
@media (max-width: 1180px) { .wide { margin-left: 0; max-width: 100% !important; } }

.figure { margin: 40px 0; }
.figure svg, .figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--bone); }
.figure figcaption {
  margin-top: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--earth-2);
}

/* A slot for a photograph not yet chosen. Hidden from readers - it is a note
   to ourselves, not content. Add ?art to the URL to see the remaining ones. */
.stock { display: none; }
body.show-art .stock {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 16 / 9; border: 1px dashed var(--earth-3); background: var(--bone-2);
  color: var(--earth-2); font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; padding: 20px;
}

.callout {
  margin: 34px 0; padding: 22px 24px;
  border: 1px solid var(--line); border-left: 3px solid var(--lime);
  background: var(--bone);
}
.callout h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--mono); font-weight: 400; color: var(--lime-ink); }
.callout p:last-child { margin-bottom: 0; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin: 36px 0; }
.split-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split h3, .split-3 h3 { margin-top: 0; }
@media (max-width: 760px) { .split, .split-3 { grid-template-columns: 1fr; } }

.datatable { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 15px; }
.datatable th, .datatable td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.datatable th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--earth-2); font-weight: 400;
}
.datatable td { color: var(--ink-2); }
.datatable tr:hover td { background: var(--bone-2); }
.datatable .yes { color: var(--lime-ink); font-weight: 600; }
.datatable .no { color: var(--earth-3); }

.steps { counter-reset: step; margin: 34px 0; }
.steps > li {
  list-style: none; counter-increment: step; position: relative;
  padding-left: 46px; margin-bottom: 22px;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: 12px; color: var(--lime-ink);
}

/* ---- the reveal: a claim you click to open --------------------------- */
.reveal { margin: 30px 0; border: 1px solid var(--line); background: var(--bone); }
.reveal > summary {
  list-style: none; cursor: pointer; padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--serif); font-size: 18px; color: var(--ink);
}
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary::after {
  content: "REVEAL"; flex: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--lime-ink);
}
.reveal[open] > summary::after { content: "HIDE"; }
.reveal[open] > summary { border-bottom: 1px solid var(--line); }
.reveal-body { padding: 18px 20px 4px; }
.reveal-body p:last-child { margin-bottom: 14px; }

/* ---- research citations --------------------------------------------- */
.cite {
  font-family: var(--mono); font-size: 10px; vertical-align: super;
  color: var(--lime-ink); text-decoration: none; padding: 0 2px;
}
.sources { margin: 56px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.sources h2 { font-size: 15px !important; margin: 0 0 14px !important; font-family: var(--sans) !important; font-weight: 600; }
.sources ol { padding-left: 20px; }
.sources li { font-size: 14px; line-height: 1.55; margin-bottom: 9px; color: var(--ink-2); }
.sources a { word-break: break-word; }

/* ---- quiz ------------------------------------------------------------ */
.quiz { margin: 56px 0 0; padding: 28px; border: 1px solid var(--ink); background: var(--bone); }
.quiz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.quiz h2 { margin: 0 !important; font-size: 22px !important; }
.quiz-score { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--earth-2); }
.quiz-intro { font-size: 15px !important; color: var(--ink-2); margin-bottom: 22px !important; }
.q { margin-bottom: 26px; }
.q:last-of-type { margin-bottom: 12px; }
.q p.q-text { font-size: 16px !important; color: var(--ink); margin-bottom: 12px !important; font-weight: 500; }
.q-options { display: grid; gap: 8px; }
.q-options button {
  text-align: left; padding: 11px 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bone);
  color: var(--ink-2); font-size: 15px; font-family: inherit;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.q-options button:hover:not([disabled]) { border-color: var(--ink); color: var(--ink); }
/* never colour alone: each state also carries a mark and a word */
.q-options button { position: relative; padding-right: 92px; }
.q-options button[data-state]::after {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
}
.q-options button[data-state="right"] {
  border-color: var(--lime-ink); background: var(--lime-soft); color: var(--ink);
}
.q-options button[data-state="right"]::after { content: "\2713 CORRECT"; color: var(--lime-ink); }
.q-options button[data-state="wrong"] { border-color: #b64b3a; color: #b64b3a; }
.q-options button[data-state="wrong"]::after { content: "\2715 YOUR PICK"; color: #b64b3a; }
.q-why {
  margin: 12px 0 0 !important; padding: 12px 14px;
  background: var(--bone-2); border-left: 2px solid var(--lime);
  font-size: 14.5px !important; color: var(--ink-2);
}
.q-why[hidden] { display: none !important; }
.quiz-done {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 15px; color: var(--ink);
}
.quiz-done[hidden] { display: none !important; }

/* ---- end matter ------------------------------------------------------ */
.article-cta {
  margin: 56px 0 0; padding: 30px; text-align: center;
  border: 1px solid var(--line); background: var(--bone);
}
.article-cta h2 { margin: 0 0 10px !important; font-size: 24px !important; }
.article-cta p { margin: 0 auto 20px !important; max-width: 46ch; }
.article-next { margin: 46px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.article-next h2 { font-size: 13px !important; font-family: var(--mono) !important; letter-spacing: .14em;
  text-transform: uppercase; color: var(--earth-2); margin: 0 0 14px !important; font-weight: 400; }
.article-next ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.article-next a { font-family: var(--serif); font-size: 18px; color: var(--ink); text-decoration: none; }
.article-next a:hover { color: var(--lime-ink); }

/* reading progress */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--lime); z-index: 90; }

@media (max-width: 720px) {
  .article-body { margin-top: 28px; }
  .article-body p, .article-body li { font-size: 16px; }
  .quiz, .article-cta { padding: 20px; }
}

/* photographs, as distinct from the drawn diagrams */
.figure.photo img { border: 1px solid var(--line); }
/* the base figcaption is uppercase mono, which is fine for a three-word
   diagram label and unreadable for a sentence - photo captions are sentences */
.figure.photo figcaption {
  display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
  max-width: 62ch;
}
.figure.photo .credit { color: var(--earth-3); text-transform: none; letter-spacing: .04em; font-size: 10px; }
.figure.photo .credit a { color: var(--earth-3); text-underline-offset: 2px; }
.figure.photo .credit a:hover { color: var(--ink); }