/* Bluegraph Specials: one-off illustrated reports, set as a printed periodical on paper. They depart on purpose from
   the site's dark design (ui.css), which every other page keeps. Spreads of two sheets on a wide screen, the sheets one
   after another on a phone. */

@font-face { font-family: "Newsreader"; src: url(fonts/newsreader-latin.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(fonts/newsreader-italic-latin.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "League Spartan"; src: url(fonts/league-spartan-latin.woff2) format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(fonts/courier-prime-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(fonts/courier-prime-bold-latin.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url(fonts/public-sans-latin.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  --desk: #1c232c;
  --desk-ink: #c6d6e5;
  --paper: #d8e7f4;
  --paper-r: #d1e2f1;
  --ink: #172a3e;
  --ink-2: #3a5470;
  --ink-3: #6b87a3;
  --accent: #2a64a0;
  --panel: #bed5ea;
  --rule: #1d3249;
  --rule-2: #98b2cb;
  --map: #1a3450;
  --serif: "Newsreader", "Times New Roman", Times, serif;
  --geo: "League Spartan", "Century Gothic", "Avant Garde", sans-serif;
  --type: "Courier Prime", "Courier New", monospace;
  --grot: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--desk); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.sp { margin: 0; color: var(--ink); background: radial-gradient(120% 80% at 50% 0%, #2a3542, var(--desk) 70%) fixed; font: 17.5px/1.56 var(--serif); }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; }
.skip:focus { left: 12px; z-index: 9; background: var(--paper); padding: 6px 10px; }
img, svg { display: block; max-width: 100%; }

/* the desk around the issue: a way back to the site above, and the site's sections below */
.sp-desk { max-width: 1560px; margin: 0 auto; padding: 18px 28px; display: flex; justify-content: space-between; gap: 16px;
  font: 500 11px/1.4 var(--grot); letter-spacing: .14em; text-transform: uppercase; color: var(--desk-ink); }
.sp-desk a { text-decoration: none; opacity: .85; }
.sp-desk a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.sp-desk nav { display: flex; gap: 22px; flex-wrap: wrap; }
.sp-desk--foot { padding-bottom: 48px; }

.sp-issue { padding: 0 28px; }
.sp-spread { max-width: 1560px; margin: 0 auto 56px; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 28px 70px rgb(0 0 0 / .55), 0 2px 6px rgb(0 0 0 / .4); }

/* a sheet: running head, the page, folio at the foot */
.sp-sheet { position: relative; display: flex; flex-direction: column; padding: 34px 56px 30px; min-width: 0;
  background: url(special/grain.png) repeat, linear-gradient(90deg, #e3eef8 0%, var(--paper) 70%, #c8dbec 100%); }
.sp-sheet--r { background: url(special/grain.png) repeat, linear-gradient(90deg, #afc8df 0%, #c2d7ea 2.5%, var(--paper-r) 9%, #dceaf6 100%); }
/* a centerfold: one sheet across the spread, the gutter shaded down its middle, a running head and folio for each page */
.sp-sheet--fold { grid-column: 1 / -1; --gut: 112px;
  background: url(special/grain.png) repeat, linear-gradient(90deg, #e3eef8 0%, var(--paper) 35%, #c8dbec 50%, #afc8df 50%, #c2d7ea 51.25%, var(--paper-r) 54.5%, #dceaf6 100%); }
.sp-fold-run, .sp-fold-folio, .sp-fold-foot { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); }
.sp-fold-foot { margin-top: 34px; align-items: start; }
.sp-fold-foot .sp-note { margin-top: 0; }
.sp-cover { max-width: 940px; margin: 0 auto 56px; box-shadow: 0 28px 70px rgb(0 0 0 / .55), 0 2px 6px rgb(0 0 0 / .4);
  background: url(special/grain.png) repeat, linear-gradient(180deg, #e1edf7, var(--paper) 60%, #cbdeee); }

.sp-run { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: baseline; padding-bottom: 10px; border-bottom: 2px solid var(--rule);
  font: 500 9.5px/1.2 var(--grot); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.sp-run > :last-child { text-align: right; }
.sp-body { flex: 1; padding-top: 38px; }
.sp-folio { display: flex; justify-content: space-between; align-items: baseline; margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--rule-2);
  font: 500 9.5px/1.2 var(--grot); letter-spacing: .07em; text-transform: uppercase; }
.sp-folio b { font: 400 20px/1 var(--serif); letter-spacing: 0; }

/* type */
.sp-eb { margin: 0 0 12px; font: 700 12px/1.3 var(--grot); letter-spacing: .14em; text-transform: uppercase; }
.sp-eb2 { margin: 0 0 8px; font: 400 10.5px/1.3 var(--grot); letter-spacing: .1em; text-transform: uppercase; }
.sp-h { margin: 0 0 30px; font: 600 40px/1.04 var(--geo); letter-spacing: -.035em; text-wrap: balance; }
.sp-h--sm { font-size: 32px; margin-bottom: 18px; }
.sp-H { margin: 0 0 18px; font: 650 47px/.98 var(--geo); letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.sp-H em { font-style: normal; color: var(--accent); display: block; }
.sp-deck { margin: 0 0 10px; font: italic 400 21px/1.35 var(--serif); text-wrap: pretty; }
.sp-by { margin: 0 0 28px; font: 400 11px/1.3 var(--grot); }

.sp-cols { columns: 2; column-gap: 32px; column-rule: 1px solid var(--rule-2); }
.sp-cols p, .sp-text p { margin: 0 0 .95em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.sp-cols p { orphans: 3; widows: 3; }
.sp-cols p:last-child, .sp-text p:last-child { margin-bottom: 0; }
.sp-drop::first-letter { float: left; margin: 7px 8px 0 0; font: 700 74px/.74 var(--geo); color: var(--accent); }
.sp-runin { text-transform: uppercase; letter-spacing: .01em; }
.sp sup { font: 600 10px/0 var(--grot); color: var(--accent); margin-left: 1px; white-space: nowrap; }
.sp sup a { text-decoration: none; }
.sp-num { font-feature-settings: "lnum", "tnum"; }

/* figures: drawings on a tan panel with a typed caption, the credit under the panel */
.sp-fig { margin: 0 0 30px; }
.sp-cols + .sp-fig, .sp-cols + .sp-plate { margin-top: 30px; }
.sp-panel { background: url(special/grain.png) repeat, var(--panel); padding: 26px 30px 20px; }
.sp-panel--map { background: var(--map); padding: 0; }
.sp-panel svg { width: 100%; height: auto; }
.sp-cap { margin: 9px 0 0; font: 400 9.5px/1.4 var(--grot); letter-spacing: .07em; text-transform: uppercase; }
.sp-plate { margin: 0 0 30px; position: relative; }
.sp-plate img { width: 100%; height: auto; }
.sp-plate figcaption { position: absolute; left: 34px; bottom: 26px; color: #edf4fa; text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
.sp-plate figcaption b { display: block; font: 400 36px/1 var(--serif); letter-spacing: .02em; text-transform: uppercase; }
.sp-plate figcaption span { display: block; margin-top: 10px; font: 500 10px/1.3 var(--grot); letter-spacing: .2em; text-transform: uppercase; }
.sp-plate figcaption span + span { margin-top: 4px; opacity: .85; }
.sp-cover .sp-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(8 17 28 / .5)); pointer-events: none; }
.sp-cover .sp-plate figcaption { z-index: 1; }
.sp-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.sp-gauge { display: block; text-decoration: none; }
.sp-gauge:hover { outline: 1px solid var(--rule-2); outline-offset: 5px; }
.sp-cols a, .sp-note a, .sp-spec p > a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sp-cols a:hover, .sp-note a:hover, .sp-spec p > a:hover { color: var(--accent); }

/* the notebook box: a heavy rule, a note in italic, a light rule, a pointer, then a blue rule before what follows */
.sp-note { margin: 34px 0 0; padding-top: 24px; border-top: 2px solid var(--rule); }
.sp-note p:not(.sp-eb) { margin: 0; font: italic 400 16px/1.5 var(--serif); max-width: 62ch; }
.sp-note .sp-eb { margin-bottom: 14px; }
.sp-see { margin: 0 0 28px; padding-top: 20px; border-top: 1px solid var(--rule-2); font: italic 400 16px/1.4 var(--serif); }
.sp-see a { text-decoration: none; }
.sp-see a:hover { text-decoration: underline; }
.sp-break { margin: 0 0 28px; border: 0; border-top: 3px solid var(--accent); }
.sp-rule { margin: 30px 0; border: 0; border-top: 1px solid var(--rule-2); }

/* the cover */
.sp-cover .sp-body { padding-top: 0; }
/* Bluegraph's own name and mark over one hairline; the year written out */
.sp-mast { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 4px 0 14px; border-bottom: 1px solid var(--rule); }
.sp-mast-name { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 34px/1 var(--geo); letter-spacing: -.01em; }
.sp-mast-name img { width: 30px; height: 30px; }
.sp-mast-meta { display: flex; margin: 0; font: 500 10.5px/1.2 var(--grot); letter-spacing: .1em; text-transform: uppercase; }
.sp-mast-meta span + span::before { content: "/"; margin: 0 .7em; color: var(--ink-3); }
.sp-cover-h { margin: 60px 0 22px; font: 600 76px/.96 var(--geo); letter-spacing: -.02em; text-transform: uppercase; max-width: 12ch; }
.sp-cover-deck { margin: 0 0 40px; font: 400 26px/1.3 var(--serif); max-width: 19em; }
.sp-cover .sp-plate { margin: 0 -56px 34px; }
.sp-cover-foot { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; }
.sp-cover-foot > div:first-child { padding-right: 36px; border-right: 1px solid var(--rule-2); }
.sp-cover-foot > div:last-child { padding-left: 36px; }
.sp-toc-mini { margin: 0; padding: 0; list-style: none; }
.sp-toc-mini li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule-2); font: 400 19px/1.25 var(--serif); }
.sp-toc-mini a { text-decoration: none; }
.sp-toc-mini i { font-size: 14px; white-space: nowrap; }
.sp-small-caps { margin: 0 0 12px; font: 400 11px/1.3 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.sp-serif-caps { margin: 0 0 14px; font: 400 15px/1.5 var(--serif); letter-spacing: .08em; text-transform: uppercase; }
.sp-cover-blurb { margin: 0 0 12px; font: 400 19px/1.45 var(--serif); }
.sp-strip { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding: 12px 0; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule-2);
  font: 500 10.5px/1.3 var(--grot); letter-spacing: .08em; text-transform: uppercase; }
.sp-strip b { color: var(--accent); font-weight: 600; }
.sp-strip-note { margin: 8px 0 0; font: 400 10px/1.3 var(--grot); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

/* contents */
.sp-toc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 34px 0 0; padding: 0; list-style: none; }
.sp-toc li a { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 0 0 20px; text-decoration: none; }
.sp-toc .t { font: 400 22px/1.15 var(--serif); }
.sp-toc .n { font: 700 22px/1 var(--grot); }
.sp-toc .s { grid-column: 1 / -1; font: 400 10px/1.3 var(--grot); letter-spacing: .04em; }
.sp-toc--out { grid-template-columns: 1fr; margin-top: 10px; }
.sp-toc li a:hover .t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* specification sheets: the agencies' numbers */
.sp-spec { margin: 0 0 26px; border-top: 2px solid var(--rule); }
.sp-spec h3 { margin: 16px 0 10px; font: 700 12px/1.3 var(--grot); letter-spacing: .14em; text-transform: uppercase; }
.sp-spec dl { margin: 0; display: grid; grid-template-columns: 1fr auto; }
.sp-spec dt, .sp-spec dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--rule-2); font: 400 16px/1.35 var(--serif); }
.sp-spec dd { padding-left: 16px; text-align: right; font: 600 14px/1.35 var(--type); white-space: nowrap; }
.sp-spec p { margin: 10px 0 0; font: italic 400 15px/1.45 var(--serif); color: var(--ink-2); }
.sp-spec p.sp-roman { font: 400 16.5px/1.5 var(--serif); color: var(--ink); }
.sp-spec--glance { margin-top: 10px; }
.sp-spec--after { margin: 34px 0 0; }
.sp-spec--steps { margin-top: 30px; }
.sp-spec--steps dt { display: grid; grid-template-columns: 1.7em 1fr; align-items: baseline; }
.sp-spec--steps dt b { font: 600 13px/1 var(--grot); color: var(--accent); }
.sp-spec--after + .sp-note { margin-top: 30px; }

/* sources */
.sp-src { margin: 0; padding: 0 0 0 1.6em; font: 400 14px/1.45 var(--serif); }
.sp-src li { margin: 0 0 8px; padding-left: 4px; break-inside: avoid; }
.sp-src li::marker { font: 600 11px var(--grot); color: var(--accent); }
.sp-src a { word-break: break-word; text-decoration-color: var(--rule-2); text-underline-offset: 2px; }

/* the interactive figure on paper: the engine reads these properties, and its few dark surfaces are turned to paper */
.sp-live { --ink: #172a3e; --ink-2: #3a5470; --ink-3: #6b87a3; --line: rgb(29 50 73 / .18); --line-2: rgb(29 50 73 / .34);
  --glass: rgb(216 231 244 / .92); --bg: #d8e7f4; --bg-2: #cbdeef; --sans: var(--grot); --mono: var(--type); --accent: #2a64a0;
  background: url(special/grain.png) repeat, var(--panel); padding: 18px 22px 16px; }
.sp-live .cf .act { background: rgb(246 251 255 / .35); }
.sp-live .cf .act:hover { background: rgb(246 251 255 / .6); }
.sp-live .cf .act[aria-pressed=true] { background: rgb(246 251 255 / .8); border-color: var(--ink-2); }
.sp-live .cf .zchip, .sp-live .cf .cf-card { background: rgb(216 231 244 / .96); box-shadow: 0 10px 30px rgb(29 50 73 / .25); }
.sp-live .cf .lgd b { background: #edf4fa; }
.sp-live .cf .cf-chips { box-shadow: 0 10px 30px rgb(29 50 73 / .25); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 1180px) {
  .sp-sheet { padding: 30px 38px 26px; }
  .sp-sheet--fold { --gut: 76px; }
  .sp-cover .sp-plate { margin: 0 -38px 30px; }
  .sp-h { font-size: 34px; }
  .sp-H { font-size: 40px; }
}

/* a phone or a narrow window: one sheet after another, one column */
@media (max-width: 860px) {
  .sp-issue { padding: 0; }
  .sp-desk { padding: 14px 18px; }
  .sp-spread { display: block; box-shadow: none; margin-bottom: 0; }
  .sp-sheet, .sp-cover { padding: 22px 20px 22px; margin: 0 0 10px; box-shadow: none; }
  .sp-sheet--r { background: url(special/grain.png) repeat, var(--paper-r); }
  .sp-sheet--fold { background: url(special/grain.png) repeat, var(--paper); }
  .sp-fold-run, .sp-fold-folio, .sp-fold-foot { display: block; }
  .sp-fold-run > :last-child, .sp-fold-folio > :first-child { display: none; }
  .sp-fold-foot .sp-spec { margin-top: 28px; }
  .sp-run { grid-template-columns: 1fr auto; }
  .sp-run > :nth-child(2) { display: none; }
  .sp-body { padding-top: 26px; }
  .sp-cols { columns: 1; }
  .sp-h { font-size: 30px; margin-bottom: 22px; }
  .sp-H { font-size: 32px; }
  .sp-deck { font-size: 19px; }
  .sp-panel { padding: 16px 14px 12px; }
  .sp-mast { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 12px; }
  .sp-mast-name { font-size: 28px; gap: 10px; }
  .sp-mast-name img { width: 25px; height: 25px; }
  .sp-mast-meta { font-size: 9.5px; }
  .sp-cover-h { font-size: 46px; margin-top: 34px; }
  .sp-cover-deck { font-size: 21px; margin-bottom: 28px; }
  .sp-cover .sp-plate { margin: 0 -20px 26px; }
  .sp-cover .sp-plate img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 24% 50%; }
  .sp-plate figcaption { left: 18px; bottom: 14px; }
  .sp-plate figcaption b { font-size: 22px; }
  .sp-plate figcaption span { font-size: 8.5px; margin-top: 6px; }
  .sp-cover-foot { grid-template-columns: 1fr; }
  .sp-cover-foot > div:first-child { padding: 0 0 24px; border: 0; }
  .sp-cover-foot > div:last-child { padding: 24px 0 0; border-top: 1px solid var(--rule-2); }
  .sp-toc { grid-template-columns: 1fr; }
  .sp-gauges { grid-template-columns: 1fr; }
  .sp-live { padding: 12px 10px; }
  .sp-folio { margin-top: 28px; }
}

/* the figure's readouts on a phone, where the engine lays them in a row: three to a line, numbers kept whole */
@media (max-width: 560px) {
  .sp-live .cf .stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 10px 14px; text-align: left; }
  .sp-live .cf .stat .v { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }