/* Kevin Trudeau Files: theme on top of scrollcraft.css. Grammar: chaptered editorial (case files). */
:root {
  --sc-canvas: #121110;
  --sc-surface: #1b1917;
  --sc-ink: #ece7de;
  --sc-ink-soft: #b3aa9c;
  --sc-accent: #e2614c;
  --sc-accent-ink: #121110;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Archivo", system-ui, sans-serif;
  --sc-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --paper: #e6e0d4;
  --paper-ink: #1a1714;
  --paper-soft: #5a5247;
  --paper-accent: #a8291c;
  --bar: #0c0b0a;
  --folio-w: 3.25rem;
}
html { scroll-behavior: smooth; }
body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: 1.68; letter-spacing: 0.005em; }
a { color: var(--sc-accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

/* chapter grounds: hard cuts, no drift */
.file { padding-block: var(--sc-section); position: relative; }
.file--paper { background: var(--paper); --sc-ink: var(--paper-ink); --sc-ink-soft: var(--paper-soft); --sc-accent: var(--paper-accent); --sc-hairline: color-mix(in oklab, var(--paper-ink) 16%, transparent); color: var(--sc-ink); }
.file--paper a { color: var(--sc-accent); }
.file__inner { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }

/* the disclosure strip and top line */
.notice { margin: 0; padding: var(--sc-2) var(--sc-gutter); font: 500 var(--sc-t-xs)/1.5 var(--sc-font-mono); color: var(--sc-ink-soft); border-bottom: 1px solid var(--sc-hairline); letter-spacing: 0.02em; }
.notice strong { color: var(--sc-ink); font-weight: 600; }
.masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sc-3) var(--sc-6); padding: var(--sc-5) var(--sc-gutter); max-width: var(--sc-maxw); margin-inline: auto; }
.wordmark { font: 800 1.05rem/1 var(--sc-font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink); text-decoration: none; font-stretch: 112%; }
.index-nav { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); font: 500 var(--sc-t-xs)/1.4 var(--sc-font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.index-nav a { color: var(--sc-ink-soft); text-decoration: none; padding-block: var(--sc-1); }
.index-nav a:hover, .index-nav a[aria-current] { color: var(--sc-ink); }

/* folio in the margin: chapter number + title, updates as files pass */
.folio { position: fixed; left: 0; top: 50%; z-index: 20; width: var(--folio-w); translate: 0 -50%; display: grid; place-items: center; pointer-events: none; mix-blend-mode: difference; color: #e8e3da; }
.folio span { writing-mode: vertical-rl; rotate: 180deg; font: 500 0.72rem/1 var(--sc-font-mono); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 860px) { .folio { display: none; } }

/* title page */
.title-page { min-height: calc(100svh - 7rem); display: grid; align-content: center; padding-block: var(--sc-8) var(--sc-9); }
.title-page__stamp { font: 600 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-accent); border: 1.5px solid currentColor; padding: var(--sc-2) var(--sc-3); justify-self: start; rotate: -2deg; margin-bottom: var(--sc-6); }
.title-page h1 { font: 800 var(--sc-t-4xl)/0.92 var(--sc-font-display); letter-spacing: var(--sc-track-tight); text-transform: uppercase; font-stretch: 88%; margin: 0; max-width: 14ch; text-wrap: balance; }
.title-page__sub { margin: var(--sc-6) 0 0; max-width: 44ch; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); }
.title-page__start { margin: var(--sc-6) 0 0; font-size: var(--sc-t-base); }

/* file headers */
.file__label { font: 600 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-accent); margin: 0 0 var(--sc-5); }
.file h2 { font: 800 var(--sc-t-3xl)/0.98 var(--sc-font-display); letter-spacing: var(--sc-track-tight); font-stretch: 92%; margin: 0 0 var(--sc-6); max-width: 18ch; text-wrap: balance; }
.file h3 { font: 700 var(--sc-t-xl)/1.15 var(--sc-font-display); letter-spacing: var(--sc-track-snug); margin: var(--sc-8) 0 var(--sc-3); }
header.file { padding-block: var(--sc-8) var(--sc-6); }
.article-title { font: 800 var(--sc-t-3xl)/0.98 var(--sc-font-display); letter-spacing: var(--sc-track-tight); font-stretch: 92%; margin: 0 0 var(--sc-5); max-width: 20ch; text-wrap: balance; }
.prose h2 { font-size: var(--sc-t-2xl); margin-top: var(--sc-9); }
.prose > h2:first-child { margin-top: 0; }
.prose p, .prose li { max-width: var(--sc-measure); text-wrap: pretty; }
.prose p { margin: 0 0 var(--sc-4); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 var(--sc-5); }
.prose li { margin-bottom: var(--sc-2); }

/* answer block: the 40 to 60 word passage AI and readers lift */
.answer { max-width: var(--sc-measure); font-size: var(--sc-t-lg); line-height: 1.55; margin: 0 0 var(--sc-7); padding-left: var(--sc-5); border-left: 1px solid var(--sc-accent); }

/* spreads: asymmetric text + media column */
.spread { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8); align-items: start; }
.spread--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.spread--flip .media { order: -1; }
@media (max-width: 860px) { .spread, .spread--flip { grid-template-columns: 1fr; gap: var(--sc-6); } .spread--flip .media { order: 0; } }
.media { margin: 0; position: relative; overflow: hidden; }
.media img { width: 100%; height: auto; display: block; filter: grayscale(0.35) contrast(1.04); }
.media--archive img { filter: grayscale(1) contrast(1.12) brightness(0.92); }
.media figcaption { font: 500 var(--sc-t-xs)/1.5 var(--sc-font-mono); color: var(--sc-ink-soft); margin-top: var(--sc-3); letter-spacing: 0.02em; }
.media figcaption a { color: inherit; }
.media__tag { position: absolute; top: var(--sc-4); left: var(--sc-4); font: 600 0.7rem/1 var(--sc-font-mono); letter-spacing: 0.16em; text-transform: uppercase; background: var(--sc-accent); color: var(--sc-accent-ink); padding: 0.45em 0.6em; }

/* signature: declassification. Real text always in the DOM; the bar is a sibling layer. */
.redact { position: relative; white-space: nowrap; }
.redact__bar { position: absolute; inset: 0.06em -0.12em 0.02em; background: var(--bar); transform-origin: 100% 50%; transform: scaleX(var(--declass, 1)); pointer-events: none; }
.file--paper .redact__bar { background: var(--paper-ink); }
.redact[data-done]:not([data-auto]) .redact__bar { opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.redact[data-auto] .redact__bar { transition: transform 1100ms var(--sc-ease-out); }
.redact--lift .redact__bar { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .redact__bar { display: none; } }

/* the audio log: an evidence register, not cards */
.log { list-style: none; padding: 0; margin: var(--sc-6) 0 0; border-top: 1px solid var(--sc-hairline-strong); }
.log li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: var(--sc-5); align-items: baseline; padding: var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline); }
.log__id { font: 600 var(--sc-t-xs)/1.4 var(--sc-font-mono); letter-spacing: 0.12em; color: var(--sc-accent); text-transform: uppercase; }
.log__title { font: 700 var(--sc-t-lg)/1.25 var(--sc-font-display); margin: 0 0 var(--sc-1); }
.log__desc { margin: 0; color: var(--sc-ink-soft); max-width: 56ch; }
.log__go { font: 600 var(--sc-t-sm)/1 var(--sc-font-mono); white-space: nowrap; }
@media (max-width: 680px) { .log li { grid-template-columns: 1fr; gap: var(--sc-2); } }

/* doors: three numbered steps set as type, not tiles */
.doors { list-style: none; counter-reset: door; padding: 0; margin: var(--sc-7) 0 0; display: grid; gap: var(--sc-7); }
.doors li { counter-increment: door; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--sc-5); }
.doors li::before { content: counter(door, decimal-leading-zero); font: 800 var(--sc-t-2xl)/1 var(--sc-font-display); color: var(--sc-accent); }
.doors h3 { margin: 0 0 var(--sc-2); }
.doors p { margin: 0 0 var(--sc-3); max-width: var(--sc-measure); color: var(--sc-ink-soft); }

/* buttons: one shape, one label per intent */
.btn { display: inline-block; font: 700 var(--sc-t-sm)/1 var(--sc-font-display); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; background: var(--sc-accent); color: var(--sc-accent-ink); padding: 1rem 1.4rem; border-radius: 2px; box-shadow: var(--sc-e1); transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out); }
.file--paper .btn { color: var(--paper); }
.btn:hover { box-shadow: var(--sc-e2); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.98); }

/* tables */
.table-wrap { overflow-x: auto; margin: var(--sc-5) 0 var(--sc-6); }
table { width: 100%; border-collapse: collapse; font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums; }
th { text-align: left; font: 600 var(--sc-t-xs)/1.4 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
th, td { padding: var(--sc-3) var(--sc-3) var(--sc-3) 0; border-bottom: 1px solid var(--sc-hairline); vertical-align: top; }

/* calculator */
.calc { margin: var(--sc-6) 0; padding: var(--sc-5) 0; border-block: 1px solid var(--sc-hairline-strong); max-width: var(--sc-measure); }
.calc label { font: 500 var(--sc-t-xs)/1.4 var(--sc-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sc-ink-soft); }
.calc input { width: 100%; accent-color: var(--sc-accent); margin: var(--sc-3) 0; }
.calc output { font: 800 var(--sc-t-2xl)/1 var(--sc-font-display); font-variant-numeric: tabular-nums; }

/* faq */
.faq { margin-top: var(--sc-8); max-width: var(--sc-measure); }
.faq details { border-bottom: 1px solid var(--sc-hairline); padding: var(--sc-4) 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); }

/* article meta: author + date, for people and for AI */
.byline { font: 500 var(--sc-t-xs)/1.6 var(--sc-font-mono); color: var(--sc-ink-soft); letter-spacing: 0.02em; margin: 0 0 var(--sc-7); }
.byline a { color: inherit; }
.sources { font: 500 var(--sc-t-xs)/1.6 var(--sc-font-mono); color: var(--sc-ink-soft); margin-top: var(--sc-7); max-width: var(--sc-measure); }
.cta-line { margin: var(--sc-7) 0 0; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-6); align-items: center; }
.cta-line p { margin: 0; max-width: 46ch; }

/* colophon close */
.colophon { padding-block: var(--sc-9) var(--sc-7); }
.colophon__keeper { font: 700 var(--sc-t-2xl)/1.1 var(--sc-font-display); letter-spacing: var(--sc-track-snug); max-width: 22ch; margin: 0 0 var(--sc-6); text-wrap: balance; }
.colophon__small { font: 500 var(--sc-t-xs)/1.7 var(--sc-font-mono); color: var(--sc-ink-soft); max-width: 70ch; }
.colophon__small a { color: inherit; }
.colophon__links { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); margin-top: var(--sc-5); }

@media (max-width: 700px) {
  .title-page h1 { font-size: var(--sc-t-3xl); }
  .file h2 { font-size: var(--sc-t-2xl); }
}

.header-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-5); margin: calc(var(--sc-5) * -1) 0 0; }
.header-cta span { font: 500 var(--sc-t-xs)/1.5 var(--sc-font-mono); color: var(--sc-ink-soft); max-width: 40ch; }