/* Article presentation: prose width, article header, reusable editorial components
   (docs/DESIGN-SYSTEM.md §4). Components are semantic classes; content never carries inline styling. */
.article-header { display: grid; gap: var(--space-3); padding-block: var(--space-5) var(--space-4); border-bottom: var(--rule); margin-bottom: var(--space-5); }
.article-header__title { font-size: var(--fs-6); text-transform: uppercase; line-height: var(--lh-tight); max-width: 20ch; }
.article-header__deck { font-size: var(--fs-3); color: var(--ink-2); max-width: var(--prose-max); }
.article-header__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.article-header__media { margin-top: var(--space-4); }
.article-header__media figcaption { font-size: var(--fs-0); color: var(--ink-3); padding-top: var(--space-2); }

/* Premium article hero: image with title overlay (docs/adr/0012-premium-article-format.md).
   Scoped to $args['premium'] in article-header.php - ordinary/already-published articles keep the
   plain header above, byte-identical, so nothing already live is affected. Reuses the same solid
   accent-pill kicker treatment already proven readable over a photo in .card--hero (components.css)
   rather than inventing a second contrast solution. */
.article-header--hero { position: relative; padding: 0; border-bottom: 0; }
.article-header--hero .article-header__media { margin: 0; height: 60vh; min-height: 20rem; max-height: 38rem; border: 0; }
.article-header--hero .article-header__media .media { height: 100%; aspect-ratio: auto; border: 0; }
.article-header--hero .article-header__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3); padding: var(--space-6) var(--gutter) var(--space-5); background: linear-gradient(180deg, rgba(22, 19, 17, 0) 35%, rgba(22, 19, 17, 0.88) 100%); }
.article-header--hero .kicker { color: var(--accent-contrast); background: var(--accent); padding: 0.25em 0.6em; align-self: flex-start; }
.article-header--hero .article-header__title { color: var(--cream-on-ink); max-width: 30ch; }
.article-header--hero .article-header__deck { color: var(--cream-on-ink); opacity: 0.92; max-width: var(--prose-max); }
.article-header--hero .article-header__meta { color: var(--cream-on-ink); }
.article-header--hero .article-header__meta .meta { color: inherit; }
.article-header--hero .article-header__caption { padding: var(--space-2) var(--gutter) 0; font-size: var(--fs-0); color: var(--ink-3); }

/* Entity name (docs brief item 5): the article's own product/artist name, dominant over the long
   editorial/SEO title in both premium hero variants below. The title itself keeps rendering in full,
   unchanged, just visually secondary - a pure hierarchy change, nothing removed or reworded. */
.article-header__entity { font-size: var(--fs-7); text-transform: uppercase; line-height: var(--lh-tight); margin: 0; overflow-wrap: break-word; }
/* The split hero's text column is narrower than the full-bleed overlay's (shares width with the
   image slot) - a smaller max keeps a long two-word entity name ("Fender Stratocaster") from
   wrapping into the image column. */
.article-header--split .article-header__entity { font-size: clamp(2rem, 1.1rem + 3.6vw, 3.75rem); }
.article-header__title--deck { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-3); line-height: var(--lh-snug); max-width: 26ch; margin-top: var(--space-2); color: var(--ink-2); font-weight: 400; }
.article-header--hero .article-header__entity { color: var(--cream-on-ink); }
.article-header--hero .article-header__title--deck { color: var(--cream-on-ink); opacity: 0.85; }

/* Split hero (docs brief items 4, 27): the Friedman-reference layout for premium GEAR articles -
   text left (kicker, entity name, deck title, meta), a large dedicated image slot right. The image
   itself may not exist yet for every gear article (docs brief item 29): has_post_thumbnail() already
   gates $isPremium in article-header.php, so this variant only ever renders once a real image is
   set - no empty/broken slot ships, and dropping a real photo in later needs no markup change. */
.article-header--split { display: grid; gap: var(--space-6); padding-block: var(--space-6) 0; border-bottom: 0; margin-bottom: 0; align-items: center; }
.article-header--split .article-header__text { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.article-header--split .article-header__media { margin: 0; }
.article-header--split .article-header__media .media { aspect-ratio: 4 / 5; border: var(--rule); }
.article-header--split .article-header__caption { font-size: var(--fs-0); color: var(--ink-3); padding-top: var(--space-2); }
@media (min-width: 56rem) {
  .article-header--split { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}

/* Quick-spec strip (docs brief item 10): a hard black separator between hero and article body,
   echoing the first few facts the body's own "At a Glance"/"Key Specifications" box already
   contains (gg_article_spec_facts()) - never a separate invented set of values. */
.spec-strip { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--ink); color: var(--paper-2); margin: 0 0 var(--space-5); }
.spec-strip__item { padding: var(--space-3) var(--space-4); border-right: 1px solid rgba(246, 241, 230, 0.15); border-bottom: 1px solid rgba(246, 241, 230, 0.15); display: flex; flex-direction: column; gap: 0.15em; }
.spec-strip__value { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-2); line-height: 1.1; }
.spec-strip__label { font-size: var(--fs-0); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--gold); }
@media (min-width: 40rem) {
  .spec-strip { grid-template-columns: repeat(4, 1fr); }
  .spec-strip__item:nth-child(4n) { border-right: 0; }
  .spec-strip__item { border-bottom: 0; }
}
@media (max-width: 39.99rem) {
  .spec-strip__item:nth-child(2n) { border-right: 0; }
}

.prose { max-width: var(--prose-max); font-size: 1.125rem; line-height: 1.65; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-4); text-transform: uppercase; margin-top: 2em; }
.prose h3 { font-size: var(--fs-3); margin-top: 1.6em; }
/* :not([class]) excludes every synthetic "box head/title" <p> the premium-article components
   create (.fact-box__head, .gear-card-group__title, ...) - each is often the first <p> child of
   its own immediate parent, which :first-of-type alone can't tell apart from the article's real
   opening paragraph. The real lead paragraph is always a plain, class-less <p>; every component
   label <p> this tool creates always carries a class - a reliable, general distinction that needs
   no assumption about DOM nesting depth (confirmed bug, 2026-09-15: "AT A GLANCE" was rendering
   with a giant drop-cap "A" once the fact-box actually started firing at real coverage). */
.prose p:first-of-type:not([class])::first-letter { font-family: var(--font-display); font-size: 3.4em; line-height: 0.8; float: left; padding: 0.08em 0.12em 0 0; color: var(--red); }
.prose img { border: var(--rule); }
.prose figure { margin: 1.5em 0; }
.prose figcaption { font-size: var(--fs-0); color: var(--ink-3); padding-top: var(--space-2); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.35em; }
.prose blockquote { margin: 1.5em 0; padding-left: var(--space-4); border-left: 4px solid var(--red); font-style: italic; color: var(--ink-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.prose th, .prose td { text-align: left; padding: 0.5em 0.6em; border-bottom: var(--rule-thin); }
.prose th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
.prose .wp-caption { max-width: 100%; }
.prose iframe { max-width: 100%; }

/* Pull quote */
.pullquote { border-top: var(--rule); border-bottom: var(--rule); padding: var(--space-4) 0; margin: 2em 0; font-family: var(--font-display); font-size: var(--fs-4); text-transform: uppercase; line-height: 1.1; }
.pullquote cite { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-style: normal; font-size: var(--fs-0); text-transform: none; color: var(--ink-3); }

/* Gangster Fact */
.gangster-fact { background: var(--ink); color: var(--paper-2); padding: var(--space-5); margin: 2em 0; border-left: 6px solid var(--red); }
.gangster-fact__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--red); font-size: var(--fs-0); }
.gangster-fact__label::before { content: "\2605\00a0"; }
.gangster-fact p { margin: var(--space-2) 0 0; }

/* Gear Snapshot / Tone Settings / Key Facts share a table-like frame */
.fact-box { border: var(--rule); background: var(--paper-2); margin: 2em 0; }
.fact-box__head { background: var(--ink); color: var(--paper-2); padding: var(--space-2) var(--space-4); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-1); }
.fact-box__head b { color: var(--accent, var(--gold)); font-weight: inherit; }
.fact-box dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4em var(--space-4); padding: var(--space-4); margin: 0; }
.fact-box dt { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-0); color: var(--ink-3); }
.fact-box dd { margin: 0; }
.gear-snapshot { --accent: var(--gold); }
.tone-settings { --accent: var(--teal); }
.tone-settings dd { font-variant-numeric: tabular-nums; }
.key-facts { --accent: var(--red); }

/* Icon-grid fact-box variant (content-pipeline/src/Formatter/FactBoxSupport.php): "At a Glance"
   (key-facts) and "Key Specifications" (key-specifications) both use this - a responsive grid of
   labelled cells instead of the plain two-column <dl> above. Additive only: the original .fact-box
   dl markup (still used directly by the Setlist "Quick Facts" box, theme/gg-theme/template-parts/
   hub/concert.php) is untouched by any rule here. Icons are pure CSS (::before, currentColor, same
   convention as .confidence-badge::before) - content-pipeline never bakes SVG into post_content. */
.fact-box--grid .fact-box__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--paper-3); padding: 1px; }
.fact-box--grid .fact-box__cell { background: var(--paper-2); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 0.3em; padding-left: calc(var(--space-4) + 1.6em); position: relative; }
.fact-box--grid .fact-box__cell::before { content: ""; position: absolute; left: var(--space-4); top: var(--space-3); width: 1.1em; height: 1.1em; color: var(--accent, var(--red)); background-color: currentColor; -webkit-mask: var(--fact-icon-generic) center / contain no-repeat; mask: var(--fact-icon-generic) center / contain no-repeat; }
.fact-box--grid .fact-box__cell--guitars::before, .fact-box--grid .fact-box__cell--guitar::before { -webkit-mask-image: var(--fact-icon-guitar); mask-image: var(--fact-icon-guitar); }
.fact-box--grid .fact-box__cell--amps::before, .fact-box--grid .fact-box__cell--amp::before,
.fact-box--grid .fact-box__cell--cabinet::before, .fact-box--grid .fact-box__cell--speaker::before { -webkit-mask-image: var(--fact-icon-amp); mask-image: var(--fact-icon-amp); }
.fact-box--grid .fact-box__cell--effects::before, .fact-box--grid .fact-box__cell--pedals::before,
.fact-box--grid .fact-box__cell--bypass::before, .fact-box--grid .fact-box__cell--effects-loop::before,
.fact-box--grid .fact-box__cell--reverb::before { -webkit-mask-image: var(--fact-icon-effect); mask-image: var(--fact-icon-effect); }

/* The 12 additional icons below are mapped to the specific label slugs that actually recur most
   often across the archive's own Quick-Facts/Specification tables (bin/analyze-fact-labels.php,
   2026-09-15 - 1440 items scanned, 505 had at least one such table). A slug not covered here (the
   long tail of one-off labels) falls back to --fact-icon-generic above, on purpose - guessing a
   category for a label that isn't actually common would be exactly the invented-detail problem this
   whole formatter is built to avoid. "type"/"model" are deliberately left generic too: both are too
   ambiguous to map to one real-world category with any confidence. */
.fact-box--grid .fact-box__cell--weight::before { -webkit-mask-image: var(--fact-icon-weight); mask-image: var(--fact-icon-weight); }
.fact-box--grid .fact-box__cell--dimensions::before { -webkit-mask-image: var(--fact-icon-dimensions); mask-image: var(--fact-icon-dimensions); }
.fact-box--grid .fact-box__cell--power::before, .fact-box--grid .fact-box__cell--preamp-tubes::before,
.fact-box--grid .fact-box__cell--power-tubes::before, .fact-box--grid .fact-box__cell--current-draw::before,
.fact-box--grid .fact-box__cell--power-output::before, .fact-box--grid .fact-box__cell--output-power::before,
.fact-box--grid .fact-box__cell--input-impedance::before, .fact-box--grid .fact-box__cell--output-impedance::before { -webkit-mask-image: var(--fact-icon-power); mask-image: var(--fact-icon-power); }
.fact-box--grid .fact-box__cell--scale-length::before, .fact-box--grid .fact-box__cell--neck::before,
.fact-box--grid .fact-box__cell--fingerboard::before, .fact-box--grid .fact-box__cell--frets::before,
.fact-box--grid .fact-box__cell--nut::before { -webkit-mask-image: var(--fact-icon-neck); mask-image: var(--fact-icon-neck); }
.fact-box--grid .fact-box__cell--body::before, .fact-box--grid .fact-box__cell--finish::before,
.fact-box--grid .fact-box__cell--construction::before { -webkit-mask-image: var(--fact-icon-body); mask-image: var(--fact-icon-body); }
.fact-box--grid .fact-box__cell--bridge::before, .fact-box--grid .fact-box__cell--tuners::before { -webkit-mask-image: var(--fact-icon-hardware); mask-image: var(--fact-icon-hardware); }
.fact-box--grid .fact-box__cell--pickups::before { -webkit-mask-image: var(--fact-icon-pickups); mask-image: var(--fact-icon-pickups); }
.fact-box--grid .fact-box__cell--controls::before, .fact-box--grid .fact-box__cell--channels::before { -webkit-mask-image: var(--fact-icon-controls); mask-image: var(--fact-icon-controls); }
.fact-box--grid .fact-box__cell--footswitch::before, .fact-box--grid .fact-box__cell--footswitches::before,
.fact-box--grid .fact-box__cell--inputs::before, .fact-box--grid .fact-box__cell--outputs::before,
.fact-box--grid .fact-box__cell--speaker-outputs::before, .fact-box--grid .fact-box__cell--midi::before { -webkit-mask-image: var(--fact-icon-connectivity); mask-image: var(--fact-icon-connectivity); }
.fact-box--grid .fact-box__cell--street-price::before { -webkit-mask-image: var(--fact-icon-price); mask-image: var(--fact-icon-price); }
.fact-box--grid .fact-box__cell--made-in::before, .fact-box--grid .fact-box__cell--origin::before { -webkit-mask-image: var(--fact-icon-origin); mask-image: var(--fact-icon-origin); }
.fact-box--grid .fact-box__cell--warranty::before { -webkit-mask-image: var(--fact-icon-warranty); mask-image: var(--fact-icon-warranty); }
.fact-box--grid .fact-box__cell-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-0); color: var(--ink-3); }
.fact-box--grid .fact-box__cell-value { font-size: var(--fs-1); }
@media (min-width: 40rem) {
  .fact-box--grid .fact-box__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Related blocks under the article */
.related { margin-top: var(--space-7); }
.related__title { font-size: var(--fs-4); text-transform: uppercase; border-bottom: var(--rule); padding-bottom: var(--space-2); margin-bottom: var(--space-4); }

/* Source / evidence footer */
.sources { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--rule-thin); font-size: var(--fs-0); color: var(--ink-3); }

/* Premium article format (docs/DESIGN-SYSTEM.md §8, docs/adr/0012-premium-article-format.md):
   components generated by content-pipeline/ for long-form Guitar Legend / Gear Guide articles.
   Gated behind the `_gg_article_format` post meta (single.php) - articles without it render exactly
   as before, byte-identical. All classes below are content-agnostic: the same CSS serves both
   article families, since the difference is which components a given article's source material
   actually supports (content-pipeline/src/Formatter/ComponentBuilder/*.php each has its own "enough
   real material?" gate - nothing here is ever shown empty or invented). */

/* Table of contents: desktop sticky rail (article-layout__toc, a third grid column added only when
   present) + mobile collapsible (native <details>, same markup rendered both ways so there's only
   one thing to keep in sync - CSS alone switches which one is visible per breakpoint). */
.article-layout--with-toc { grid-template-columns: minmax(0, 1fr); }
.article-toc { display: none; }
.article-toc__label { font-family: var(--font-display); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid var(--ink); padding-bottom: var(--space-2); margin-bottom: var(--space-2); }
.article-toc__list { display: grid; gap: 2px; }
.article-toc__list a { display: block; border-left: 2px solid var(--paper-3); padding: var(--space-2) var(--space-3); font-size: var(--fs-0); line-height: 1.35; color: var(--ink-2); }
.article-toc__list a:hover, .article-toc__list a.is-active { border-left-color: var(--red); color: var(--ink); background: rgba(184, 35, 31, 0.05); }
.article-toc-mobile { margin-bottom: var(--space-5); border: var(--rule); background: var(--paper-2); }
.article-toc-mobile summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
.article-toc-mobile .article-toc__list { padding: 0 var(--space-4) var(--space-3); }
.article-toc-mobile .article-toc__list a { border-left: 0; border-bottom: 1px solid var(--paper-3); padding: var(--space-2) 0; }
.article-toc-mobile .article-toc__list a:last-child { border-bottom: 0; }
@media (min-width: 64rem) {
  .article-layout--with-toc { grid-template-columns: 14rem minmax(0, 1fr) 20rem; }
  /* No inner scrollbar (docs brief item 8) - a long TOC just scrolls with the page like everything
     else; sticky still keeps it pinned near the top of the viewport while it's shorter than one. */
  .article-toc { display: block; position: sticky; top: calc(var(--space-4) + 3.5rem); align-self: start; }
  .article-toc-mobile { display: none; }
}

/* Gear cards: one card per guitar/amp/pedal, built from the source article's own <table> rows
   (content-pipeline/src/Formatter/TableGearExtractor.php) - never from unverified prose guesses. */
.gear-card-group { margin: 1.5em 0 2em; }
.gear-card-group__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-3); letter-spacing: 0.04em; border-bottom: var(--rule); padding-bottom: var(--space-2); margin-bottom: var(--space-4); }
/* Editorial-feature treatment (docs brief item 13): a larger display name as its own line, the
   confidence badge demoted below it rather than crowding the same line, more internal breathing
   room - reads as a magazine feature entry, not a database row. The image slot is intentionally
   reserved for when per-player photography exists (docs brief item 14); until then the card simply
   has no image column rather than shipping an empty placeholder box. */
.gear-card { border: var(--rule-thin); border-top: 4px solid var(--paper-3); background: var(--paper-2); padding: var(--space-5); margin-bottom: var(--space-4); }
.gear-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-1); }
.gear-card__name { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-4); line-height: 1.05; }
.gear-card__era { font-size: var(--fs-0); color: var(--ink-3); }
.gear-card__role { font-size: var(--fs-0); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.gear-card p, .gear-card__note { margin: var(--space-2) 0 0; font-size: var(--fs-1); color: var(--ink-2); }
@media (min-width: 40rem) {
  .gear-card-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .gear-card-group__title { grid-column: 1 / -1; }
  .gear-card-group .gear-card { margin-bottom: 0; }
}

/* Confidence badge, reused from the Lab's provenance vocabulary (inc/lab-helpers.php
   gg_confidence_class()) but restyled for the paper theme - lab.css's dark-surface version isn't
   loaded on article pages (inc/assets.php only enqueues it on Lab pages), and the tone here is
   editorial rather than data-tool, so this is a deliberately separate, lighter ruleset rather than
   pulling lab.css in just for one badge. */
.confidence-badge { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; padding: 0.2em 0.6em; border: 1px solid; white-space: nowrap; }
.confidence-badge::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.confidence-badge--confirmed { color: #2f7a3f; border-color: #2f7a3f; }
.confidence-badge--documented { color: #2d6a8f; border-color: #2d6a8f; }
.confidence-badge--reported { color: #a3791f; border-color: #a3791f; }
.confidence-badge--uncertain { color: var(--ink-3); border-color: var(--ink-3); }
.confidence-badge--disputed { color: var(--red); border-color: var(--red); }

/* Comparison cards (How It Compares) - built only from comparisons already present in the source. */
.comparison-grid { display: grid; gap: var(--space-3); margin: 1.5em 0; grid-template-columns: 1fr; }
.comparison-card { border: var(--rule-thin); background: var(--paper-2); padding: var(--space-4); }
.comparison-card__versus { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-0); color: var(--red); }
.comparison-card__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-2); margin: var(--space-1) 0 var(--space-2); }
.comparison-card p { font-size: var(--fs-1); margin: 0; }
@media (min-width: 40rem) {
  .comparison-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tone-recipe cards - existing amp/tone settings turned into a scannable card, numbers unchanged. */
.tone-recipe-grid { display: grid; gap: var(--space-3); margin: 1.5em 0; grid-template-columns: 1fr; }
.tone-recipe-card { border-top: 4px solid var(--teal); background: var(--paper-2); padding: var(--space-4); }
.tone-recipe-card__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-2); margin: 0 0 var(--space-2); }
.tone-recipe-card__knobs { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: var(--space-2); }
.tone-recipe-card__knob { border: 1px solid var(--paper-3); background: var(--paper-3); padding: 0.25em 0.55em; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.tone-recipe-card p { font-size: var(--fs-1); margin: 0; }
@media (min-width: 40rem) {
  .tone-recipe-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Decision cards (content-pipeline/src/Formatter/TableCardBuilder.php) - the generic landing spot
   for any short reference table (buying guides, gear pairings, era/version tables, ...) that isn't
   shaped like a tone recipe or a head-to-head comparison. Deliberately spare: a title (often a
   clickable product link), an optional strong "recommendation" subtitle, then reasoning prose. */
.decision-grid { display: grid; gap: var(--space-3); margin: 1.5em 0; grid-template-columns: 1fr; }
.decision-card { border: var(--rule-thin); border-top: 4px solid var(--gold); background: var(--paper-2); padding: var(--space-4); }
.decision-card__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-2); margin: 0; line-height: 1.15; }
.decision-card__title a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--paper-3); }
.decision-card__title a:hover { border-bottom-color: currentColor; }
.decision-card__subtitle { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-1); color: var(--red); margin: var(--space-1) 0 0; }
.decision-card p:not(.decision-card__subtitle) { font-size: var(--fs-1); margin: var(--space-2) 0 0; color: var(--ink-2); }
@media (min-width: 40rem) {
  .decision-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .decision-grid--wide { grid-template-columns: repeat(3, 1fr); }
}

/* Career/product timeline - same points shape and "renders nothing when empty" contract as
   template-parts/lab/timeline.php (docs/RIG-ARCHITECTURE.md), restyled for the paper theme instead
   of sharing lab.css's dark surface tokens. */
.article-timeline { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x proximity; padding-block: var(--space-3); margin: 1.5em 0; border-top: 2px solid var(--ink); -webkit-overflow-scrolling: touch; }
.article-timeline__point { scroll-snap-align: start; flex: 0 0 auto; min-width: 9rem; max-width: 14rem; position: relative; padding-top: var(--space-3); }
.article-timeline__point::before { content: ""; position: absolute; top: -5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.article-timeline__year { display: block; font-family: var(--font-display); font-size: var(--fs-2); color: var(--red); }
.article-timeline__year--undated { color: var(--ink-3); font-size: var(--fs-0); text-transform: uppercase; }
.article-timeline__label { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-1); }
.article-timeline__diff { color: var(--ink-2); font-size: var(--fs-0); margin-top: 0.3em; }

/* FAQ accordion: native <details>/<summary> - content is in the initial DOM regardless of the
   [open] state, so it stays indexable and works with zero JS (docs/URL-AND-SEO.md indexability
   requirement). No existing accordion pattern in the theme to match - built fresh. */
.faq-list details { border-top: var(--rule-thin); }
.faq-list details:last-child { border-bottom: var(--rule-thin); }
.faq-list summary { cursor: pointer; padding: var(--space-3) var(--space-6) var(--space-3) 0; font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-2); line-height: 1.2; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0.1em; top: var(--space-3); font-size: 1.4em; color: var(--red); line-height: 1; }
.faq-list details[open] summary::after { content: "\2013"; }
.faq-list .faq-list__answer { padding: 0 var(--space-6) var(--space-4) 0; font-size: var(--fs-1); }
.sources ol { padding-left: 1.2em; }

/* Setlist premium page (docs/SETLIST-ARCHITECTURE.md, docs/adr/0013-setlist-onthisday-url-and-
   component-strategy.md). Reuses .fact-box/.confidence-badge from the article system above rather
   than inventing a parallel component family - same shared editorial language, own accent below. */
.setlist-quickfacts { --accent: var(--red); }
.setlist-coverage { margin: 2em 0; padding: var(--space-4); background: var(--paper-2); border-left: 4px solid var(--red); }
.setlist-coverage__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-2); margin: 0 0 var(--space-2); }
.setlist-coverage ul { margin: 0; padding-left: 1.1em; }
.setlist-coverage li + li { margin-top: 0.3em; }

/* On This Day: sitewide widget + date landing page (docs/RIG-ARCHITECTURE.md, extended
   docs/adr/0013-setlist-onthisday-url-and-component-strategy.md). Own accent (gold) to read as a
   distinct system within the same paper/ink language, not a copy of the Setlist or Lab registers. */
.on-this-day { border: var(--rule); background: var(--paper-2); margin: 1.5em 0; }
.on-this-day__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); background: var(--ink); color: var(--paper-2); padding: var(--space-2) var(--space-4); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-1); }
.on-this-day__head b { color: var(--gold); font-weight: inherit; }
.on-this-day__nav { display: flex; gap: var(--space-2); }
.on-this-day__nav button, .on-this-day__nav a.on-this-day__navlink { background: transparent; border: 1px solid var(--paper-2); color: var(--paper-2); font-family: var(--font-display); padding: 0.15em 0.6em; cursor: pointer; text-decoration: none; }
.on-this-day__nav [disabled], .on-this-day__nav .is-disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.on-this-day__body { padding: var(--space-4); }
.on-this-day__year { font-family: var(--font-display); font-size: var(--fs-2); color: var(--gold); }
.on-this-day__type { font-size: var(--fs-0); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.on-this-day__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-3); margin: var(--space-1) 0 var(--space-2); line-height: 1.15; }
.on-this-day__title a { color: inherit; }
.on-this-day__empty { padding: var(--space-4); color: var(--ink-3); }
.on-this-day-date__list { display: grid; gap: var(--space-4); margin: 1.5em 0; }
.on-this-day-date__card { border: var(--rule-thin); border-left: 4px solid var(--gold); background: var(--paper-2); padding: var(--space-4); }
.on-this-day__body a.on-this-day__navlink { display: inline-block; font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-0); letter-spacing: 0.05em; color: var(--red); border: 0; padding: 0; }
.on-this-day__item[hidden] { display: none; }