/* ==========================================================================
   THE ROGUE PATIENT - SITE STYLESHEET
   V1.2. Consumes tokens.css. Defines no color or face of its own.
   Layout follows the approved masthead mock: a framed newsprint page on
   cream paper, black 3px rules, hard offset shadows, Instrument Serif in
   caps for the masthead, nav and headlines, Libre Baskerville for reading.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--trp-canvas); }
body {
  margin: 0;
  background: var(--trp-canvas);
  color: var(--trp-text);
  font-family: var(--trp-font-body);
  font-size: var(--trp-body-size);
  line-height: var(--trp-body-leading);
  -webkit-font-smoothing: antialiased;
  padding: 0 var(--trp-gutter) 40px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--trp-crimson); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--trp-crimson-dark); }
h1, h2, h3, h4 {
  font-family: var(--trp-font-display); font-weight: 400;
  line-height: 1.05; margin: 0; color: var(--trp-slate); text-wrap: balance;
}
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--trp-crimson); outline-offset: 2px; }

.trp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--trp-crimson); color: var(--trp-on-crimson);
  padding: 12px 18px; font-family: var(--trp-font-ui); font-weight: 700;
}
.trp-skip:focus { left: 0; }

/* The framed page from the mock. Everything but the alert and footer sits
   inside it. */
.trp-page {
  max-width: var(--trp-max); margin: 22px auto 0;
  background: var(--trp-surface);
  border: var(--trp-rule-weight) solid var(--trp-rule);
  box-shadow: var(--trp-shadow);
  padding: 0 22px 22px;
}
.trp-shell { max-width: var(--trp-max); margin: 0 auto; }

/* Shared small-caps label, used by kickers, datelines and bylines. */
.trp-label {
  font-family: var(--trp-font-ui);
  font-weight: 800;
  font-size: var(--trp-step-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--trp-text-secondary);
}

/* === WEB-11 Top Alert and Notification Banner ============================= */
.trp-alert {
  background: var(--trp-slate);
  color: var(--trp-on-slate);
  font-family: var(--trp-font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  margin: 0 calc(-1 * var(--trp-gutter));
}
.trp-alert__in {
  max-width: var(--trp-max); margin: 0 auto;
  padding: 9px var(--trp-gutter);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.trp-alert__tag {
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
  background: var(--trp-gold); color: var(--trp-on-gold);
  border: 2px solid var(--trp-rule); padding: 2px 8px; flex: none;
}
.trp-alert__msg { flex: 1 1 260px; }
.trp-alert a { color: var(--trp-gold); font-weight: 700; }
.trp-alert__x {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 4px 6px; flex: none;
}

/* === WEB-01 Global Responsive Navigation ================================== */
.trp-mast { }
.trp-mast__top { padding: 16px 0 0; text-align: center; }

/* The top rule: CASE FILE stamp, imprint, gold satire band. */
.trp-mast__rule {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  font-family: var(--trp-font-ui); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--trp-text);
  border-bottom: 3px double var(--trp-rule); padding-bottom: 10px;
}
.trp-mast__rule span { flex: 0 1 auto; }
.trp-mast__rule span:nth-child(2) { flex: 1 1 auto; text-align: center; }
.trp-mast__rule span:first-child {
  background: var(--trp-crimson); color: var(--trp-on-crimson);
  padding: 3px 8px; border: 2px solid var(--trp-rule);
}
.trp-mast__rule span:last-child {
  background: var(--trp-gold); color: var(--trp-on-gold);
  padding: 3px 8px; border: 2px solid var(--trp-rule);
}

.trp-wordmark {
  font-family: var(--trp-font-display); font-weight: 400;
  font-size: var(--trp-step-mast); line-height: 0.92;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--trp-crimson); margin: 18px 0 0; display: block;
  text-decoration: none; text-shadow: var(--trp-text-shadow);
  text-wrap: balance;
}
a.trp-wordmark:hover { color: var(--trp-crimson-dark); }
.trp-tagline {
  font-family: var(--trp-font-body); font-style: italic;
  color: var(--trp-text-secondary); margin: 4px 0 14px; font-size: 1rem;
}

.trp-nav {
  border-top: var(--trp-rule-weight) solid var(--trp-rule);
  border-bottom: var(--trp-rule-weight) solid var(--trp-rule);
}
.trp-nav__in {
  max-width: var(--trp-max); margin: 0 auto; padding: 10px 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
}
.trp-nav a {
  font-family: var(--trp-font-display); font-size: 1.05rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--trp-text); text-decoration: none;
  padding: 4px 12px; display: block;
  border: 2px solid var(--trp-rule); background: var(--trp-canvas);
  box-shadow: var(--trp-shadow-sm);
}
.trp-nav a:hover { background: var(--trp-gold); color: var(--trp-on-gold); }
.trp-nav a[aria-current="page"] { background: var(--trp-crimson); color: var(--trp-on-crimson); }

.trp-nav__toggle {
  display: none; background: var(--trp-canvas); border: 2px solid var(--trp-rule);
  box-shadow: var(--trp-shadow-sm);
  font-family: var(--trp-font-display); font-size: 1rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--trp-text);
  padding: 6px 16px; margin: 10px auto; cursor: pointer; width: 100%;
}

/* === WEB-02 Universal Hero Block, editorial variant ======================= */
.trp-lead { padding: 20px 0 24px; border-bottom: var(--trp-rule-weight) solid var(--trp-rule); }
.trp-lead__grid { display: grid; gap: 18px; grid-template-columns: 1.1fr 1fr; align-items: start; }
.trp-lead__fig { margin: 0; }
.trp-lead__fig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.trp-lead__cap { margin: 8px 0 0; font-size: 0.78rem; color: var(--trp-text-secondary); font-style: italic; }
.trp-lead__kicker { margin: 10px 0 4px; color: var(--trp-crimson); }
.trp-lead__kicker .trp-sec { color: var(--trp-crimson); }
.trp-lead h1 { font-size: var(--trp-step-h2); margin: 0 0 8px; }
.trp-lead h1 a { color: inherit; text-decoration: none; }
.trp-lead h1 a:hover { color: var(--trp-crimson); }
.trp-lead__stand { font-weight: 700; font-size: 1rem; color: var(--trp-text); margin: 0 0 8px; }
.trp-lead__by { margin: 0; font-weight: 400; letter-spacing: 0.02em; text-transform: none; font-size: 0.78rem; }

/* === WEB-32 Searchable Filter and Facet Chip Bar ========================== */
.trp-filter { padding: 16px 0; border-bottom: var(--trp-rule-weight) solid var(--trp-rule); }
.trp-filter__in { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.trp-filter__search {
  flex: 1 1 230px; min-width: 0;
  font-family: var(--trp-font-ui); font-size: 0.88rem;
  padding: 9px 12px; border: 2px solid var(--trp-rule);
  background: var(--trp-canvas); color: var(--trp-text);
}
.trp-filter__search::placeholder { color: var(--trp-text-secondary); }
.trp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.trp-chip {
  font-family: var(--trp-font-display); font-size: 0.95rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 12px; border: 2px solid var(--trp-rule);
  background: var(--trp-canvas); color: var(--trp-text);
  box-shadow: var(--trp-shadow-sm); cursor: pointer;
}
.trp-chip:hover { background: var(--trp-gold); color: var(--trp-on-gold); }
.trp-chip[aria-pressed="true"] { background: var(--trp-crimson); color: var(--trp-on-crimson); }
.trp-filter__count { font-family: var(--trp-font-ui); font-size: 0.74rem; color: var(--trp-text-secondary); }
.trp-zero { padding: 50px 0; text-align: center; color: var(--trp-text-secondary); }

/* === WEB-08 Content and Editorial Stream ================================== */
.trp-stream { padding: 22px 0 10px; }
.trp-sechead {
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: var(--trp-rule-weight) solid var(--trp-rule); padding-bottom: 6px; margin: 0 0 18px;
}
.trp-sechead h2 { font-size: var(--trp-step-h2); text-transform: uppercase; color: var(--trp-crimson); }
.trp-sechead .trp-label { margin-left: auto; }

.trp-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.trp-card {
  display: flex; flex-direction: column;
  border: var(--trp-rule-weight) solid var(--trp-rule);
  background: var(--trp-canvas); padding: 12px;
}
.trp-card__fig { margin: 0 0 4px; }
.trp-card__fig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--trp-surface); }
.trp-card__kicker { margin: 10px 0 4px; color: var(--trp-crimson); }
.trp-card__kicker .trp-sec { color: var(--trp-crimson); }
.trp-card h3 { font-size: var(--trp-step-h3); margin: 0 0 6px; }
.trp-card h3 a { color: inherit; text-decoration: none; }
.trp-card h3 a:hover { color: var(--trp-crimson); }
.trp-card__stand { font-size: 0.9rem; color: var(--trp-text); margin: 0 0 8px; }
.trp-card__by { margin: 0; font-weight: 400; letter-spacing: 0.02em; text-transform: none; font-size: 0.78rem; }
.trp-card--wide { grid-column: 1 / -1; }
.trp-card--wide .trp-card__in { display: grid; gap: 18px; grid-template-columns: 1fr 1.25fr; align-items: start; }
.trp-card--wide h3 { font-size: var(--trp-step-h2); }

/* === The Receipt. Evidence block. ========================================= */
.trp-receipt {
  background: var(--trp-canvas);
  border: var(--trp-rule-weight) solid var(--trp-rule);
  box-shadow: var(--trp-shadow-sm);
  padding: 22px 24px; margin: 34px 0;
}
.trp-receipt__label {
  display: inline-block;
  font-family: var(--trp-font-ui); font-weight: 800; font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--trp-crimson); color: var(--trp-on-crimson);
  border: 2px solid var(--trp-rule); padding: 3px 8px; margin: 0 0 14px;
}
.trp-receipt__q { font-weight: 700; font-size: 1.02rem; margin: 0 0 10px; }
.trp-receipt__a { margin: 0 0 18px; }
.trp-receipt table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.trp-receipt th, .trp-receipt td {
  text-align: left; padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--trp-rule); vertical-align: top;
}
.trp-receipt tr:last-child th, .trp-receipt tr:last-child td { border-bottom: 0; }
.trp-receipt th {
  font-family: var(--trp-font-ui); font-weight: 800; font-size: 0.66rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--trp-text-secondary); width: 34%;
}
.trp-receipt__note {
  display: block; margin: 3px 0 0; font-size: 0.86em;
  color: var(--trp-text-secondary); line-height: 1.45;
}

/* The CEO order block from the mock: slate panel, gold lead-in. */
.trp-order {
  border: var(--trp-rule-weight) solid var(--trp-rule);
  background: var(--trp-slate); color: var(--trp-on-slate);
  padding: 12px 14px; font-family: var(--trp-font-ui); font-size: 0.9rem; margin: 26px 0 0;
}
.trp-order b { color: var(--trp-gold); }
.trp-order a { color: var(--trp-gold); }

/* === Article view ========================================================= */
.trp-article { padding: 24px 0 20px; max-width: 760px; margin: 0 auto; }
.trp-article__kicker { margin: 0 0 12px; color: var(--trp-crimson); }
.trp-article h1 { font-size: var(--trp-step-h1); margin: 0 0 14px; }
.trp-article__stand { font-weight: 700; font-size: 1.1rem; color: var(--trp-text); margin: 0 0 16px; line-height: 1.5; }
.trp-article__meta {
  display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center;
  border-top: var(--trp-rule-weight) solid var(--trp-rule);
  border-bottom: var(--trp-rule-weight) solid var(--trp-rule);
  padding: 10px 0; margin: 0 0 24px;
}
.trp-article__meta .trp-label { font-weight: 400; letter-spacing: 0.02em; text-transform: none; font-size: 0.8rem; }
.trp-article__fig { margin: 0 auto 26px; max-width: 560px; }
.trp-article__fig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.trp-article__fig figcaption { margin: 8px 0 0; font-size: 0.8rem; font-style: italic; color: var(--trp-text-secondary); }
.trp-article__body > p:first-of-type::first-letter {
  float: left; font-family: var(--trp-font-display); font-size: 3.6em; line-height: 0.8;
  margin: 0.06em 0.1em 0 0; color: var(--trp-crimson);
}
.trp-satire {
  font-family: var(--trp-font-ui); font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--trp-gold); color: var(--trp-on-gold);
  border: 2px solid var(--trp-rule); padding: 12px 14px; margin: 30px 0 0;
}

/* === WEB-07 Zero-JS FAQ Accordion ========================================= */
.trp-faq { padding: 26px 0 10px; border-top: var(--trp-rule-weight) solid var(--trp-rule); margin-top: 26px; }
.trp-faq h2 { text-transform: uppercase; color: var(--trp-crimson); font-size: var(--trp-step-h2); margin: 0 0 10px; }
.trp-faq details { border-bottom: 1px solid var(--trp-rule); }
.trp-faq summary {
  cursor: pointer; list-style: none; padding: 14px 34px 14px 0; position: relative;
  font-family: var(--trp-font-display); font-size: 1.25rem; color: var(--trp-slate);
}
.trp-faq summary::-webkit-details-marker { display: none; }
.trp-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 11px;
  font-size: 1.5rem; line-height: 1; color: var(--trp-crimson);
}
.trp-faq details[open] summary::after { content: "\2212"; }
.trp-faq summary:hover { color: var(--trp-crimson); }
.trp-faq__a { padding: 0 0 18px; color: var(--trp-text); max-width: var(--trp-measure); font-size: 0.95rem; }

/* === WEB-09 Global Canonical Footer ======================================= */
.trp-foot { max-width: var(--trp-max); margin: 34px auto 0; padding: 0 4px 30px; }
.trp-foot__grid { display: grid; gap: 30px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.trp-foot h4 {
  font-family: var(--trp-font-ui); font-weight: 800; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--trp-text-secondary); margin: 0 0 12px;
}
.trp-foot ul { list-style: none; margin: 0; padding: 0; }
.trp-foot li { margin: 0 0 8px; }
.trp-foot a { font-size: 0.92rem; }
.trp-foot__mark {
  font-family: var(--trp-font-display); text-transform: uppercase;
  color: var(--trp-crimson); font-size: 1.6rem; margin: 0 0 10px;
  text-shadow: 2px 2px 0 var(--trp-rule);
}
.trp-foot__legal {
  border-top: var(--trp-rule-weight) solid var(--trp-rule); margin: 30px 0 0; padding: 18px 0 0;
  font-size: 0.8rem; color: var(--trp-text-secondary);
}
.trp-foot__legal p { margin: 0 0 7px; max-width: 76ch; }

/* === Accessibility controls =============================================== */
.trp-a11y { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.trp-a11y button {
  font-family: var(--trp-font-ui); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--trp-canvas); color: var(--trp-text);
  border: 2px solid var(--trp-rule); padding: 8px 12px; cursor: pointer;
}
.trp-a11y button[aria-pressed="true"] { background: var(--trp-text); color: var(--trp-canvas); }

/* === WEB-12 404 Error Recovery Shell ====================================== */
.trp-404 { padding: 60px 0; text-align: center; max-width: 620px; margin: 0 auto; }
.trp-404 h1 { font-size: var(--trp-step-h1); margin: 0 0 16px; text-transform: uppercase; color: var(--trp-crimson); text-shadow: var(--trp-text-shadow); }
.trp-404 p { color: var(--trp-text-secondary); }

/* Sub-pages carry their own H1, so the masthead wordmark steps back. */
.trp-page-sub .trp-wordmark { font-size: clamp(1.8rem, 5vw, 3.2rem); text-shadow: 2px 2px 0 var(--trp-rule); }
.trp-page-sub .trp-tagline { font-size: 0.9rem; margin: 2px 0 10px; }

.trp-backlink {
  font-family: var(--trp-font-ui); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-block; margin: 0 0 18px;
}

/* === Responsive =========================================================== */
@media (max-width: 860px) {
  .trp-lead__grid { grid-template-columns: 1fr; gap: 16px; }
  .trp-card--wide .trp-card__in { grid-template-columns: 1fr; gap: 14px; }
  .trp-foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; padding-bottom: 28px; }
  .trp-page { padding: 0 12px 12px; margin-top: 14px; box-shadow: 5px 5px 0 var(--trp-rule); }
  .trp-mast__rule { font-size: 0.6rem; gap: 6px; justify-content: center; }
  .trp-mast__rule span:nth-child(2) { display: none; }
  .trp-wordmark { text-shadow: 3px 3px 0 var(--trp-rule); }
  .trp-nav__toggle { display: block; }
  .trp-nav__in { display: none; flex-direction: column; align-items: stretch; padding-bottom: 10px; }
  .trp-nav__in.is-open { display: flex; }
  .trp-nav a { text-align: center; }
  .trp-foot__grid { grid-template-columns: 1fr; }
  .trp-receipt { padding: 18px 16px; }
  .trp-article__body > p:first-of-type::first-letter { font-size: 3em; }
}

@media print {
  .trp-alert, .trp-nav, .trp-filter, .trp-a11y { display: none !important; }
  body { font-size: 11pt; }
  .trp-page { border: 0; box-shadow: none; }
  a { color: var(--trp-text); }
}