/* Survey-inspired reading system. Active homepage and blog reading system. */
:root {
  color-scheme: light;
  --ink: #212020;
  --paper: #efeeec;
  --ground: #d9e1ef;
  --muted: #555653;
  --line: #21202030;
  --accent: #b4a6ff;
  --accent-act1: #b4a6ff;
  --accent-act2: #b9d96c;
  --accent-act3: #ffd22f;
  --accent-act4: #e9a1f7;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--ground);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #343280 !important; outline-offset: 5px !important; }
img { display: block; max-width: 100%; height: auto; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 15px; background: white; z-index: 10; }
.skip-link:focus { top: 12px; }
.blog-header, .blog-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px max(24px, 4.5vw); }
.blog-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.blog-brand { font-weight: 800; font-size: 18px; letter-spacing: -.5px; text-decoration: none; }
.blog-brand span { color: #6252bc; margin-left: 8px; }
.blog-header nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 22px; font-size: 13px; }
.blog-header nav a, .blog-footer a { text-decoration: none; }
.blog-header nav a:hover, .blog-footer a:hover { text-decoration: underline; }
.blog-footer { background: var(--ink); color: white; font-size: 13px; padding-block: 38px; }
.reading-map { background: var(--paper); padding: 22px max(24px, 4.5vw) 26px; border-bottom: 1px solid var(--line); }
.reading-map-title { font: 10px monospace; letter-spacing: 1.2px; display: flex; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.reading-map-title span { color: var(--muted); }
.reading-map nav { display: flex; gap: 12px 24px; flex-wrap: wrap; }
.reading-map a { font-size: 12px; line-height: 1.5; text-decoration: none; max-width: 300px; }
.reading-map a:hover { text-decoration: underline; }
.reading-map a span { font: 10px monospace; color: var(--muted); padding-right: 7px; }
article.post { margin: 0; padding: 0; max-width: none; overflow-wrap: anywhere; }
.article-hero { padding: 64px max(24px, 4.5vw) 56px; background: var(--ink); color: white; }
.article-hero--image-background {
  background-color: var(--ink);
  background-image: linear-gradient(rgba(15, 16, 21, .60), rgba(15, 16, 21, .68)), var(--article-hero-image);
  background-size: cover;
  background-position: center 43%;
}
.article-hero--header-background {
  --article-hero-image: url("/blog/interviewing-the-hiring-team/irke-header-1600.webp");
}


.eyebrow { font: 11px monospace; letter-spacing: 1.3px; text-transform: uppercase; }
.article-hero .eyebrow { color: #d8d7d2; margin: 0 0 26px; }
.article-hero h1 { max-width: 1100px; font-size: clamp(38px, 5.5vw, 78px); font-weight: 550; letter-spacing: -.055em; line-height: 1.04; margin: 0 0 26px; }
.article-hero .meta { font-size: 13px; color: #c9c9c3; margin: 0; }
.reading-section { padding: 64px max(24px, 4.5vw); }
.tone-0 { background: var(--ground); --section-accent: #b4a6ff; }
.tone-1 { background: var(--paper); --section-accent: #ffd22f; }
.tone-2 { background: var(--ground); --section-accent: #b9d96c; }
.reading-section > p, .reading-section > ul, .reading-section > ol, .reading-section > h3,
.reading-section > h4, .reading-section > .evidence-note, .reading-section > .post-illustration,
.reading-section > .table-region, .reading-section > .scope-table-wrap,
.reading-section > .standalone-chart, .reading-section > .quote-panel {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.reading-section > h2 { max-width: 980px; margin: 0 auto 38px; font-size: clamp(30px, 3.7vw, 52px); font-weight: 550; letter-spacing: -.045em; line-height: 1.23; }
.heading-highlight { background: var(--section-accent, #ffd22f); padding: 1px 9px 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
article.post p { font-size: 18px; line-height: 1.75; margin-top: 0; margin-bottom: 24px; color: var(--ink); }
article.post h3 { font-size: 24px; line-height: 1.3; letter-spacing: -.6px; margin-top: 36px; margin-bottom: 18px; }
article.post h4 { font-size: 19px; line-height: 1.4; margin: 28px 0 14px; }
article.post ul, article.post ol { line-height: 1.7; font-size: 17px; padding-left: 24px; }
article.post li { margin-bottom: 12px; }
article.post li p { font-size: inherit; }
article.post code { padding: 2px 5px; font-size: .86em; background: #2120200a; border: 1px solid var(--line); border-radius: 0; overflow-wrap: anywhere; }
article.post .evidence-note { border-left: 4px solid #786bb7; background: #ffffffa8; padding: 22px 24px; margin-bottom: 34px; }
article.post .evidence-note strong { display: block; font: 11px monospace; letter-spacing: 1px; margin-bottom: 10px; color: var(--ink); }
article.post .evidence-note p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }
article.post figure { margin: 0; }
article.post .post-illustration { margin-bottom: 40px; }
.post-illustration img { width: 100%; }
.evidence-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: 5%; align-items: center; max-width: 1440px; margin: 54px auto; }
.evidence-layout > * { min-width: 0; }
.explanation { align-self: center; }
.panel-label { display: flex; align-items: stretch; font-size: 14px; line-height: 1.4; flex-wrap: wrap; }
.panel-label span { padding: 7px 10px; background: var(--ink); color: white; }
.panel-label .panel-act { background: var(--section-accent); color: var(--ink); }
.explanation-body { padding: 24px 26px 4px; background: white; }
article.post .explanation-body > p { font-size: 16px; line-height: 1.65; }
.visual-panel { padding: 16px 0; }
.source-capture img { width: 100%; max-height: 680px; object-fit: contain; object-position: left center; }
article.post figcaption { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 18px 0 0; }
.quote-panel { margin-top: 40px; margin-bottom: 40px; border-left: 7px solid var(--section-accent); background: white; padding: 26px 30px; }
article.post blockquote { margin: 0; font-size: clamp(23px, 2.4vw, 34px); line-height: 1.4; letter-spacing: -.5px; font-style: normal; border: 0; padding: 0; }
article.post blockquote p { font-size: inherit; line-height: inherit; margin: 0; }
article.post .series-nav { padding: 34px max(24px, 4.5vw); background: var(--paper); display: flex; justify-content: space-between; gap: 32px; font-size: 14px; border-top: 1px solid var(--line); }
.series-nav a { max-width: 45%; line-height: 1.5; }
.table-region { overflow-x: auto; margin-top: 28px; margin-bottom: 32px; }
article.post table { width: 100%; border-collapse: collapse; color: var(--ink); font-size: 14px; line-height: 1.55; table-layout: auto; }
article.post caption { text-align: left; color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
article.post th, article.post td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; overflow-wrap: anywhere; }
article.post thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
article.post .scope-table-wrap { margin-top: 32px; margin-bottom: 32px; overflow-x: auto; }
article.post .scope-table-wrap td.scope-archetype { white-space: normal; color: var(--ink); }
/* Preserve each chart's original percentage widths and scale. The colored faces
   live entirely inside each mark; they add no extra length or perspective. */
article.post :is(.ai-sample-chart, .behavior-chart, .chart-archetypes, .meter-wrap) { width: 100%; margin: 0; }
article.post :is(.ai-sample-chart, .behavior-chart, .chart-archetypes) h3 { margin-top: 0; font-size: 23px; }
article.post :is(.ai-sample-scope, .ai-sample-definition, .behavior-chart-scope, .chart-label) { font-size: 13px; line-height: 1.6; color: var(--muted); margin-bottom: 24px; }
article.post .ai-sample-panel { margin-bottom: 32px; }
article.post .ai-sample-panel h4 { margin: 0 0 18px; font-size: 16px; }
article.post :is(.ai-sample-rows, .behavior-rows) { list-style: none; margin: 0; padding: 0; }
article.post :is(.ai-sample-row, .behavior-row, .chart-row) { margin: 0 0 24px; }
article.post :is(.ai-sample-row-label, .behavior-row-head, .chart-row-head) { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-size: 14px; line-height: 1.45; margin-bottom: 9px; }
article.post :is(.ai-sample-value, .behavior-row-value, .chart-row-value) { color: var(--ink); font-size: 19px; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
article.post .ai-sample-denominator { color: var(--muted); font-size: 12px; white-space: normal; }
article.post :is(.ai-sample-track, .behavior-row-track, .chart-row-track) { height: 38px; background: #21202009; border: 0; border-left: 1px solid #555653; border-right: 1px solid #555653; border-radius: 0; overflow: hidden; }
article.post :is(.ai-sample-bar, .behavior-row-bar, .chart-row-bar) { position: relative; height: 100%; background: #a39cfb; border-radius: 0; overflow: hidden; }
article.post :is(.ai-sample-bar, .behavior-row-bar, .chart-row-bar)::before { content: ""; position: absolute; inset: 0 0 55%; background: #e9a1f7; }
article.post :is(.ai-sample-bar, .behavior-row-bar, .chart-row-bar)::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 9px; max-width: 25%; background: #ff601d; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
article.post :is(.ai-sample-axis, .behavior-axis) { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 8px; }
article.post :is(.ai-sample-details, .behavior-details) { margin-top: 22px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
article.post :is(.ai-sample-details, .behavior-details) summary { cursor: pointer; font-size: 14px; font-weight: 600; }
article.post :is(.ai-sample-details, .behavior-details) p { font-size: 13px; line-height: 1.65; color: var(--muted); }
article.post :is(.ai-sample-details, .behavior-details) .table-region { margin-bottom: 18px; }
article.post :is(.ai-sample-details, .behavior-details) table { table-layout: auto; font-size: 12px; }
article.post .meter-label { display: flex; justify-content: space-between; gap: 18px; }
article.post .meter-label :is(.meter-title, .meter-value) { color: var(--ink); font-size: 14px; }
article.post .meter-track { height: 38px; border-radius: 0; background: #21202012; }
article.post .meter-seg-explicit, article.post .dot.explicit { background: #7468c4; }
article.post .meter-seg-implicit, article.post .dot.implicit { background: #c8c0f4; }
article.post .meter-seg-implicit { margin-left: 0; }
article.post .meter-legend { flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12px; }
.notes-intro { padding: 68px max(24px, 4.5vw) 54px; }
.notes-intro h1 { font-size: clamp(46px, 7vw, 100px); letter-spacing: -.06em; margin: 28px 0; font-weight: 550; }
.notes-intro p:last-child { font-size: 21px; line-height: 1.5; }
.notes-act { padding: 0 max(24px, 4.5vw) 48px; scroll-margin-top: 20px; }
.notes-act--define { --act-accent: #b4a6ff; --act-label: #5942a6; }
.notes-act--prove { --act-accent: #b9d96c; --act-label: #466019; }
.notes-act--explain { --act-accent: #ffd22f; --act-label: #765900; }
.notes-act--propose { --act-accent: #e9a1f7; --act-label: #84358f; }
.notes-act__heading { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.notes-act__heading > span { color: var(--act-label, var(--ink)); font: 10px monospace; letter-spacing: 1px; }
.notes-act__heading h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.4px; }
.notes-grid { padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.note-card { background: #ffffff; padding: 28px; display: flex; flex-direction: column; }
.note-card:nth-child(3n+1) { border-top: 12px solid #b4a6ff; }
.note-card:nth-child(3n+2) { border-top: 12px solid #ffd22f; }
.note-card:nth-child(3n) { border-top: 12px solid #b9d96c; }
.note-act { font: 10px monospace; letter-spacing: 1px; }
.note-card h2 { font-size: 27px; letter-spacing: -.8px; line-height: 1.18; margin: 12px 0 18px; }
.note-card h2 a { text-decoration: none; }
.note-card h2 a:hover { text-decoration: underline; }
.note-card p { font-size: 15px; line-height: 1.65; margin: 0 0 28px; }
.note-read { margin-top: auto; font-size: 13px; text-decoration: none; display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); }
.note-status { color: var(--muted); font: 10px monospace; letter-spacing: .08em; }
.note-status--bottom { display: block; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); letter-spacing: 0; text-transform: none; }
.note-card--planned { border: 1px dashed var(--line); border-top: 12px solid var(--act-accent, #b4a6ff); }
@media (min-width: 900px) {
  .evidence-layout.reverse .explanation { grid-column: 2; grid-row: 1; }
  .evidence-layout.reverse .visual-panel { grid-column: 1; grid-row: 1; }
}
@media (min-width: 1600px) {
  .reading-section, .article-hero { padding-inline: max(4.5vw, calc((100vw - 1480px) / 2)); }
}
@media (max-width: 899px) {
  .evidence-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 680px; }
  .visual-panel { padding: 0; }
  .reading-section { padding-block: 42px; }
  .reading-section > h2 { max-width: 680px; }
  .notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .blog-header { padding: 22px 20px; align-items: start; }
  .blog-brand { max-width: 150px; font-size: 16px; }
  .blog-brand span { display: none; }
  .blog-header nav { max-width: 250px; gap: 10px 14px; font-size: 12px; }
  .reading-map { padding: 18px 20px 22px; }
  .reading-map a { font-size: 12px; max-width: none; width: 100%; }
  .reading-map nav { gap: 9px; }
  .article-hero { padding: 40px 20px; }
  .article-hero h1 { font-size: clamp(34px, 8.5vw, 46px); }
  .article-hero .eyebrow { font-size: 9px; line-height: 1.65; }
  .reading-section { padding: 34px 20px; }
  .reading-section > h2 { font-size: 30px; }
  article.post p { font-size: 17px; line-height: 1.7; }
  .evidence-layout { margin-block: 32px; }
  .explanation-body { padding: 20px 20px 2px; }
  article.post .explanation-body > p { font-size: 16px; }
  .panel-label { font-size: 12px; }
  article.post .evidence-note { padding: 18px; }
  article.post :is(.ai-sample-row-label, .behavior-row-head, .chart-row-head) { flex-direction: column; gap: 4px; }
  article.post :is(.ai-sample-value, .behavior-row-value, .chart-row-value) { font-size: 18px; }
  article.post :is(.ai-sample-track, .behavior-row-track, .chart-row-track) { height: 30px; }
  article.post .meter-label { flex-direction: column; gap: 6px; }
  .quote-panel { padding: 22px; }
  article.post .series-nav { padding: 28px 20px; flex-direction: column; gap: 22px; }
  .series-nav a { max-width: none; }
  .blog-footer { padding: 30px 20px; flex-direction: column; align-items: start; gap: 20px; }
  .notes-intro { padding: 40px 20px; }
  .notes-act { padding-inline: 20px; padding-bottom: 34px; }
  .notes-grid { padding: 0; grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Explicit type scale and dark keyline for pastel chart marks. */
article.post .article-hero .eyebrow { font-size: 11px; line-height: 1.5; }
article.post :is(.ai-sample-bar, .behavior-row-bar, .chart-row-bar) { border: 1px solid #6656a8; }
@media (max-width: 600px) { article.post .article-hero .eyebrow { font-size: 9px; } }
/* Original charts carry dark-theme label colors in their inline styles. */
article.post :is(.behavior-row-name, .chart-row-name, .ai-sample-row-label, .chart-label) { color: var(--ink); }
article.post .scope-table-wrap thead th { color: var(--ink); }
article.post .archetype-table-wrap td.archetype-answer { color: var(--ink); }
article.post .archetype-table-wrap { max-width: 680px; margin: 32px auto; }
/* Opening a long data table must not push the adjacent reading card down. */
@media (min-width: 900px) { .explanation { align-self: start; margin-top: 140px; } }

/* A Field Note can be read as one small, repeating Observe–Reflect–Make loop. */
.loop-phase { width: 100vw; max-width: none; margin: 0 calc(50% - 50vw); padding: 0 24px clamp(22px, 3vw, 42px); border-top: 2px solid var(--loop-accent); background: transparent; scroll-margin-top: 24px; }
.loop-phase--observe { --loop-accent: #8997c4; }
.loop-phase--reflect { --loop-accent: #8fae54; }
.loop-phase--make { --loop-accent: #6084d0; }
.loop-phase__heading { margin: 0 0 18px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
article.post .loop-phase__heading h2 { display: inline-flex; align-items: center; margin: 0; padding: 6px 10px; background: transparent; color: var(--loop-accent); font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
.loop-phase__heading > span { color: var(--muted); font: 10px monospace; letter-spacing: .04em; }
article.post .loop-phase > .reading-section { padding: 38px 0; background: transparent; }
article.post .loop-phase > p { max-width: 680px; margin-left: auto; margin-right: auto; }
article.post .loop-phase > ol.guide-questions { max-width: 680px; margin: 0 auto 1.4em; padding-left: 1.4em; font-size: 18px; line-height: 1.75; }
article.post .loop-phase > ol.guide-questions li { margin-bottom: .7em; }
article.post .loop-phase > .loop-phase__intro { margin-top: 0; margin-bottom: 26px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.loop-phase > .evidence-layout { max-width: 1440px; margin: 48px auto; }
.loop-phase > .quote-panel { max-width: 680px; margin: 36px auto; }
@media (max-width: 600px) {
  .loop-phase { padding: 0 18px 22px; }
  article.post .loop-phase > .reading-section { padding: 24px 0; }
  .loop-phase__heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .loop-phase__heading > span { text-align: left; }
  article.post .loop-phase > .loop-phase__intro { margin-bottom: 22px; }
}


/* Shared archetype references: hover/focus reveals one central definition card. */
.archetype-reference, .archetype-context { position: relative; display: inline; font-weight: inherit; cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
article.post .archetype-tip-card { display: none !important; position: absolute; z-index: 50; top: calc(100% + 9px); left: 0; width: min(340px, calc(100vw - 32px)); padding: 14px 16px; background: white; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 8px 26px #17171724; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: normal !important; text-transform: none !important; text-align: left; }
article.post .archetype-tip-card strong, article.post .archetype-tip-card span, article.post .archetype-tip-card a { display: block !important; font-size: inherit !important; font-weight: inherit; line-height: inherit; letter-spacing: normal !important; text-transform: none !important; }
article.post .archetype-tip-card strong { margin-bottom: 5px; font-size: 13px !important; font-weight: 650 !important; }
article.post .archetype-tip-card .archetype-tip-meta { margin-top: 9px; color: #666; font-size: 12px !important; line-height: 1.45 !important; }
article.post .archetype-tip-card a { margin-top: 9px; font-size: 12px !important; font-weight: 650 !important; text-underline-offset: 2px; }
.archetype-reference:hover > .archetype-tip-card, .archetype-reference:focus-visible > .archetype-tip-card, .archetype-context:hover > .archetype-tip-card, .archetype-context:focus-visible > .archetype-tip-card, .archetype-reference:focus-within > .archetype-tip-card, .archetype-context:focus-within > .archetype-tip-card, .archetype-tip-card:hover { display: block !important; }
.archetype-table-wrap td.archetype-answer .archetype-tip-card, .scope-table-wrap td.scope-archetype .archetype-tip-card { left: auto; right: 0; white-space: normal; }
@media (max-width: 600px) { article.post .archetype-tip-card { position: fixed; top: auto; right: 16px; bottom: 16px; left: 16px; width: auto; max-height: min(45vh, 260px); overflow: auto; } }

/* Shared lazy process card triggers. */
.loop-phase__heading h2 a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.loop-phase__heading h2 a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[data-process-pe-loop-error] { font-size: 12px; color: #84352b; }

/* Question cards: shared by /about/ and Field Notes (moved from about.css) */
article.post .about-question { max-width: 680px; margin: 44px auto; padding: 25px 28px 7px; border-left: 5px solid #b4a6ff; background: #ffffffa8; }
.about-question > span { font: 11px monospace; letter-spacing: 1px; }
article.post .about-question p { font-size: clamp(22px, 3vw, 30px); line-height: 1.4; letter-spacing: -.025em; }
.about-question-list { max-width: 760px; margin: 28px auto 0; display: grid; gap: 12px; }
article.post .about-question-list .about-question { max-width: none; margin: 0; padding: 20px 24px 18px; }
article.post .about-question-list .about-question p { margin: 8px 0; font-size: clamp(20px, 2.5vw, 26px); line-height: 1.25; }
.about-question-list .about-question small { display: block; max-width: 620px; color: var(--muted); font-size: 15px; line-height: 1.55; }
@media (max-width: 600px) { article.post .about-question { padding: 20px 18px 2px; } article.post .about-question-list .about-question { padding: 18px 18px 16px; } }
article.post .loop-phase > h2.guide-questions-title { max-width: 760px; margin: 32px auto 18px; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.03em; }
article.post .about-question-list + p { margin-top: 44px; }
/* Questions panel at the top of a Field Note (same rules as FN02's pe-visuals.css). */
article.post .pp-qs{max-width:980px;margin:32px auto}
article.post .pp-qs > p.label{font:700 12px ui-monospace,Menlo,monospace;letter-spacing:2px;margin:0 0 12px;max-width:none}
article.post .pp-qs__track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
article.post .pp-qs__track li{position:relative}
article.post .pp-qs__track li + li::before{content:'';position:absolute;left:-8px;top:50%;width:8px;height:2px;background:#171918}
article.post .pp-qs__track a,article.post .pp-qs__track span{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:2px dashed #17191866;background:#fffdf6;color:#545850;font:600 14px/1.2 ui-monospace,Menlo,monospace;text-decoration:none;height:100%;box-sizing:border-box}
article.post .pp-qs__track b{font:700 20px ui-monospace,Menlo,monospace}
article.post .pp-qs__track li.is-here a{border:2px solid #171918;background:#d4ed98;color:#171918}
article.post .pp-qs__track a:hover,article.post .pp-qs__track a:focus-visible{outline:3px solid #171918;outline-offset:2px}
article.post .pp-qs__key{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;margin:10px 0 0;font:12px ui-monospace,Menlo,monospace;color:#545850;max-width:none}
article.post .pp-qs__key i{display:inline-block;width:14px;height:14px;border:2px dashed #17191866;background:#fffdf6;margin-right:-8px}
article.post .pp-qs__key i.is-here{border:2px solid #171918;background:#d4ed98}
article.post .pp-qs .about-question-list{max-width:none;margin-top:18px;grid-template-columns:repeat(3,1fr)}
article.post .pp-qs .about-question{border-left-color:#4f6a1c}
article.post .pp-qs .about-question-list .about-question p{font-size:clamp(20px,2vw,23px)}
article.post .pp-qs__go{display:inline-block;margin-top:10px;font:700 12px ui-monospace,Menlo,monospace;color:#171918}
@media (max-width:800px){article.post .pp-qs__track{grid-template-columns:repeat(3,1fr)}article.post .pp-qs__track li:nth-child(4)::before{display:none}article.post .pp-qs .about-question-list{grid-template-columns:1fr}}

/* Inline citations from a source: one look across every post (block quotes use their source card) */
article.post q.cite-q { quotes: "“" "”"; font-style: normal; background: #d4ed9866; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }