@font-face { font-family: 'Haffer'; src: url("./fonts/Haffer-400.otf") format('opentype'); font-weight: 400; font-display: swap; }
  @font-face { font-family: 'Haffer'; src: url("./fonts/Haffer-500.otf") format('opentype'); font-weight: 500; font-display: swap; }
  @font-face { font-family: 'Haffer'; src: url("./fonts/Haffer-700.otf") format('opentype'); font-weight: 700; font-display: swap; }
  @keyframes pqArrowWipe { 0% { clip-path: inset(0 0 0 0) } 44% { clip-path: inset(0 0 0 100%) } 56% { clip-path: inset(0 100% 0 0) } 100% { clip-path: inset(0 0 0 0) } }
  @keyframes pqArrowExit { 0% { transform: translateX(0); opacity: 1 } 42% { transform: translateX(26px); opacity: 0 } 43% { transform: translateX(-26px); opacity: 0 } 100% { transform: translateX(0); opacity: 1 } }
  @keyframes pqStarSpin { 0% { transform: rotate(0deg) } 100% { transform: rotate(180deg) } }
  @keyframes pqStarMergeR { 0% { transform: translateX(0) } 45%, 55% { transform: translateX(-4.03px) } 100% { transform: translateX(0) } }
  @keyframes pqStarMergeL { 0% { transform: translateX(0) } 45%, 55% { transform: translateX(4.03px) } 100% { transform: translateX(0) } }
  @keyframes pqStarSwapR { 0% { transform: translate(0, 0) } 42%, 58% { transform: translate(-8.06px, -2px) } 100% { transform: translate(0, 0) } }
  @keyframes pqStarSwapL { 0% { transform: translate(0, 0) } 42%, 58% { transform: translate(8.06px, 2px) } 100% { transform: translate(0, 0) } }
  [data-role="pull-quote"] svg path { transform-box: fill-box; transform-origin: center }
  @keyframes cardCaretBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
  * { font-variant-numeric: slashed-zero; font-feature-settings: 'zero' 1; }
  @font-face { font-family: 'Haffer Mono'; src: url("./fonts/HafferMono-400.otf") format('opentype'); font-weight: 400; font-display: swap; }
  @keyframes pqArrowGlide { 0% { transform: translateX(0) } 45% { transform: translateX(4px) } 100% { transform: translateX(0) } }
  @keyframes pqArrowFade { 0% { opacity: 1; transform: translateX(0) } 40% { opacity: 0.15; transform: translateX(5px) } 100% { opacity: 1; transform: translateX(0) } }
  @keyframes pqArrowLean { 0% { transform: skewX(0deg) } 50% { transform: skewX(-16deg) } 100% { transform: skewX(0deg) } }
  @keyframes pqStarSpin { 0% { transform: rotate(0deg) } 100% { transform: rotate(180deg) } }
  @keyframes pqStarPop { 0% { transform: scale(1) } 45% { transform: scale(1.45) } 100% { transform: scale(1) } }
  @keyframes pqStarTwinkle { 0% { opacity: 1; transform: scale(1) } 35% { opacity: 0.2; transform: scale(0.7) } 100% { opacity: 1; transform: scale(1) } }
  [data-role="pull-quote"] svg path { transform-box: fill-box; transform-origin: center }
  @keyframes cardCaretBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
  @font-face { font-family: 'Haffer Mono'; src: url("./fonts/HafferMono-500.otf") format('opentype'); font-weight: 500; font-display: swap; }
  html { scroll-behavior: smooth; }
  /* Shared design values for every article page. The 900px branch in
     article-chrome.js overrides the sized ones on the page root. */
  :root {
    --title-size: 40px; --title-weight: 400; --title-lh: 1;
    --author-size: 39px; --author-color: #b3b3b3;
    --section-size: 18px; --section-bg: rgba(247, 247, 247, 0.72); --section-space: 56px;
    --body-size: 17px; --body-lh: 1.65; --body-ls: -0.004em; --body-gap: 22px; --body-lead-gap: 30px; --body-color: #111111;
    --meta-size: 12px; --mono-size: 12px; --row-size: 18px; --rule: #e6e6e6;
  }
  @keyframes sqPopA { 0% { opacity: 0; transform: translateY(6px) scale(0.6); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes sqPopB { 0% { opacity: 0; transform: translateY(6px) scale(0.6); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
  html, body { margin: 0; padding: 0; background: #ffffff; -webkit-font-smoothing: antialiased; }
  a { color: #111111; text-decoration: none; }
  a:hover { color: #111111; }
  /* Inline links in body copy read as links: underlined, body colour. Covers
     hand-written and auto-generated cross-post links, and pasted copy. */
  #article article p a, #article article li a, #article article figcaption a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: #b4b2ae;
  }
  #article article p a:hover, #article article li a:hover, #article article figcaption a:hover {
    text-decoration-color: #111111;
  }
  #article article sup a { text-decoration: none; }
  /* Feedback samples are mono and often contain long unbroken strings; keep them
     inside the column at every width rather than pushing the page sideways. */
  #article article [data-role="sample"] > div {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #article article [data-role="sample-set"] { min-width: 0; box-sizing: border-box; }
  /* Score cells fade to grey while they count, back to ink when they land. The
     colour itself is written inline by the tween that owns the digits. */
  #article article [data-role="num"], #article article [data-role="metric-num"] { transition: color 240ms ease; }
  /* Older markup underlined an inner span; the anchor now owns the underline. */
  #article article a span[style*="underline"] { text-decoration: none !important; }
  /* Copy pasted from Google Docs or Word arrives wrapped in spans carrying the
     source document's type (Arial, 11pt, black). Neutralise it so body copy
     always renders in ours — no clean-up pass required. Classed spans (.term)
     and <b>/<i>/<strong>/<em> keep their own styling. */
  #article article span:not([class]),
  #article article font {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    text-indent: 0 !important;
  }
  /* Pasted highlight colours only — a span that sets its own background on
     purpose (decorative square, chip) keeps it. */
  #article article span:not([class])[style*="background-color"] {
    background-color: transparent !important;
  }
  /* Superscript citations keep their size and lift, pasted or hand-written. */
  #article article sup,
  #article article sub,
  #article article sup span:not([class]),
  #article article sub span:not([class]),
  #article article span[style*="vertical-align:super"],
  #article article span[style*="vertical-align: super"] {
    font-size: 0.62em !important;
    vertical-align: super !important;
    line-height: 0 !important;
  }
  #article article sub, #article article sub span:not([class]) { vertical-align: sub !important; }
  #article article p[style*="pt"],
  #article article p[dir],
  #article article div[style*="pt"] {
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    text-indent: 0 !important;
  }

  @font-face { font-family: 'Haffer Mono Regular'; src: url("./fonts/HafferMono-400.otf") format('opentype'); font-weight: 400; font-display: swap; }

  [data-role="t-scroll"]::-webkit-scrollbar, [data-role="n-scroll"]::-webkit-scrollbar { width: 2px; background: transparent; }
  [data-role="t-scroll"]::-webkit-scrollbar-track, [data-role="n-scroll"]::-webkit-scrollbar-track { background: transparent; }
  [data-role="t-scroll"]::-webkit-scrollbar-thumb, [data-role="n-scroll"]::-webkit-scrollbar-thumb { background: #4a4845; border-radius: 0; min-height: 40px; }
  [data-role="t-scroll"]::-webkit-scrollbar-thumb:hover, [data-role="n-scroll"]::-webkit-scrollbar-thumb:hover { background: #141312; }