@import url("qmdtrust.css");

:root {
  --reader-ink: #160f0b;
  --reader-paper: #f4efe4;
  --reader-paper-2: #ebe2d1;
  --reader-brown: #2e1c15;
  --reader-red: #cb2a20;
  --reader-gold: #d8b65c;
  --reader-green: #7d8844;
  --reader-line: rgba(46, 28, 21, .24);
  --reader-ease: cubic-bezier(.23, 1, .32, 1);
}

html { scroll-behavior: smooth; }
body { background: var(--reader-paper); color: var(--reader-ink); }

.reader-hero {
  min-height: calc(100svh - 74px);
  padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 5vw, 6rem);
  display: grid;
  align-content: center;
  gap: 2rem;
  border-bottom: 1px solid var(--reader-line);
  position: relative;
  overflow: hidden;
}

.reader-hero::after {
  content: "?";
  position: absolute;
  right: -1vw;
  bottom: -22vw;
  font: 600 clamp(22rem, 50vw, 46rem)/1 Fraunces, serif;
  color: rgba(203, 42, 32, .055);
  pointer-events: none;
}

.reader-hero h1 {
  max-width: 1080px;
  margin: 0;
  font: 400 clamp(4.25rem, 10vw, 9.5rem)/.84 Fraunces, serif;
  letter-spacing: -.065em;
  position: relative;
  z-index: 1;
}

.reader-hero h1 em { color: var(--reader-red); font-weight: 400; }

.research-brief {
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--reader-line);
  border-bottom: 1px solid var(--reader-line);
  position: relative;
  z-index: 1;
}

.research-brief p {
  margin: 0;
  padding: 1.25rem 1.25rem 1.35rem 0;
  display: grid;
  gap: .7rem;
}

.research-brief p + p { border-left: 1px solid var(--reader-line); padding-left: 1.25rem; }
.research-brief b, .reader-method .section-label, .guided-intro .section-label,
.corner-section .section-label, .reader-delta .section-label, .adaptive-section .section-label,
.transfer-section .section-label, .limits-section .section-label {
  font: 500 .72rem/1.2 "JetBrains Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--reader-red);
}
.research-brief span { font: 500 .96rem/1.45 "Instrument Sans", sans-serif; }

.reader-method, .corner-section, .reader-delta, .adaptive-section, .transfer-section, .limits-section {
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 6rem);
}

.reader-method { background: var(--reader-brown); color: var(--reader-paper); }
.reader-method header { max-width: 900px; }
.reader-method h2, .corner-section h2, .reader-delta h2, .adaptive-section h2,
.transfer-section h2, .limits-section h2, .guided-intro h2 {
  margin: .75rem 0 1rem;
  font: 400 clamp(2.7rem, 6vw, 5.8rem)/.98 Fraunces, serif;
  letter-spacing: -.045em;
}
.reader-method header > p, .corner-section header > p, .reader-delta header > p,
.adaptive-section header > p, .transfer-section header > p, .guided-intro p {
  max-width: 760px;
  font: 400 1.05rem/1.6 "Instrument Sans", sans-serif;
  opacity: .78;
}

.method-flow {
  list-style: none;
  margin: 4rem 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(244, 239, 228, .25);
}
.method-flow li { min-height: 220px; padding: 1.4rem; display: grid; align-content: start; gap: 1rem; position: relative; }
.method-flow li + li { border-left: 1px solid rgba(244, 239, 228, .25); }
.method-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -.72rem; top: 48%; z-index: 1; padding: .2rem; background: var(--reader-brown); color: var(--reader-gold); }
.method-flow span { font: 500 .72rem/1 "JetBrains Mono", monospace; color: var(--reader-gold); }
.method-flow b { font: 400 1.65rem/1.1 Fraunces, serif; }
.method-flow small { font: 400 .88rem/1.5 "Instrument Sans", sans-serif; opacity: .7; }
.method-caveat { margin: 1.5rem 0 0; font: 400 .78rem/1.5 "JetBrains Mono", monospace; color: rgba(244, 239, 228, .65); }

.guided-shell { padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 5vw, 6rem) 2rem; background: var(--reader-paper-2); }
.guided-intro { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.guided-intro > div { max-width: 900px; }
.guided-intro button, .guide-action-row button, .adaptive-tabs button, .transfer-tabs button {
  appearance: none;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: .8rem 1.1rem;
  font: 500 .74rem/1 "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms var(--reader-ease);
}
.guided-intro button:hover, .adaptive-tabs button:hover, .transfer-tabs button:hover { background: var(--reader-ink); color: var(--reader-paper); }
.guided-intro button:active, .guide-action-row button:active, .adaptive-tabs button:active, .transfer-tabs button:active { transform: scale(.97); }

.guide-steps { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--reader-line); }
.guide-steps li { padding: 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; opacity: .45; transition: opacity 180ms ease, background-color 180ms ease; }
.guide-steps li + li { border-left: 1px solid var(--reader-line); }
.guide-steps li.active { opacity: 1; background: var(--reader-paper); }
.guide-steps li.done { opacity: .75; }
.guide-steps li > span { width: 2rem; height: 2rem; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font: 500 .72rem/1 "JetBrains Mono", monospace; }
.guide-steps div { display: grid; gap: .35rem; }
.guide-steps b { font: 500 1rem/1.2 "Instrument Sans", sans-serif; }
.guide-steps small { font: 400 .82rem/1.45 "Instrument Sans", sans-serif; }
.guide-action-row { padding: 1.3rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--reader-red); color: #fff8ec; }
.guide-action-row > div { display: grid; gap: .35rem; }
.guide-action-row span { font: 500 .67rem/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.guide-action-row strong { font: 500 .97rem/1.35 "Instrument Sans", sans-serif; }
.guide-action-row button { background: #fff8ec; color: var(--reader-red); border-color: #fff8ec; }

.reader-duel { margin: 0; border-radius: 0; }
.reader-duel .duel-header h2 { max-width: 780px; }

.corner-section { background: var(--reader-paper); }
.corner-section header { max-width: 980px; }
.corner-grid { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--reader-line); }
.corner-grid > article { min-height: 430px; padding: 1.5rem; display: flex; flex-direction: column; }
.corner-grid > article + article { border-left: 1px solid var(--reader-line); }
.corner-grid > article > span { font: 500 .7rem/1.2 "JetBrains Mono", monospace; color: var(--reader-red); text-transform: uppercase; letter-spacing: .08em; }
.corner-grid h3 { margin: .8rem 0 auto; font: 400 2.4rem/1 Fraunces, serif; }
.corner-grid article > div { padding: 1rem 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; border-top: 1px solid var(--reader-line); }
.corner-grid article > div small { font: 500 .8rem/1.2 "Instrument Sans", sans-serif; }
.corner-grid article > div b { font: 400 2.4rem/1 Fraunces, serif; }
.corner-grid article > div em { grid-column: 1 / -1; margin-top: .35rem; font: 400 .72rem/1.3 "JetBrains Mono", monospace; opacity: .65; }
.corner-grid .flagship { color: var(--reader-red); }
.corner-grid article > p { margin: .75rem 0 0; font: 400 .72rem/1.4 "JetBrains Mono", monospace; opacity: .65; }
.corner-grid .lying-corner { background: var(--reader-brown); color: var(--reader-paper); }
.corner-grid .lying-corner > span, .corner-grid .lying-corner .flagship { color: var(--reader-gold); }
.fixed-channel-callout { margin-top: 1rem; padding: 1.2rem 1.4rem; display: grid; grid-template-columns: minmax(180px, .35fr) 1fr; gap: 1rem; background: var(--reader-red); color: #fff8ec; }
.fixed-channel-callout b { font: 400 1.35rem/1.1 Fraunces, serif; }
.fixed-channel-callout span { font: 400 .9rem/1.5 "Instrument Sans", sans-serif; }
.coverage-note { font: 400 .75rem/1.5 "JetBrains Mono", monospace; opacity: .62; }

.reader-delta { background: var(--reader-brown); color: var(--reader-paper); }
.reader-delta header { max-width: 980px; }
.reader-delta-control { margin: 3rem 0 2rem; padding: 1.25rem; border: 1px solid rgba(244,239,228,.25); }
.reader-delta-control label { display: flex; justify-content: space-between; font: 500 .8rem/1.2 "JetBrains Mono", monospace; }
.reader-delta-control label strong { color: var(--reader-gold); font-size: 1.1rem; }
.reader-delta-control input { width: 100%; margin: 1.3rem 0 .65rem; accent-color: var(--reader-gold); }
.reader-delta-control > div { display: flex; justify-content: space-between; font: 400 .66rem/1 "JetBrains Mono", monospace; opacity: .55; }
.split-charts { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1rem; }
.split-charts figure { margin: 0; padding: 1.35rem; border: 1px solid rgba(244,239,228,.25); }
.split-charts figcaption { display: grid; gap: .5rem; }
.split-charts figcaption span { font: 500 .7rem/1 "JetBrains Mono", monospace; color: var(--reader-gold); text-transform: uppercase; letter-spacing: .08em; }
.split-charts figcaption strong { font: 400 1.7rem/1.1 Fraunces, serif; }
.split-charts [data-reader-theory-chart], .split-charts [data-reader-f1-chart] { min-height: 320px; margin: 1.5rem 0 .75rem; }
.split-charts svg { width: 100%; height: auto; overflow: visible; }
.split-charts figure > p { margin: 1rem 0 0; font: 400 .72rem/1.5 "JetBrains Mono", monospace; opacity: .62; }
.chart-readout { display: flex; justify-content: space-between; gap: 1rem; font: 400 .72rem/1.2 "JetBrains Mono", monospace; }
.chart-readout b { color: var(--reader-gold); }
.reader-delta .delta-result { color: var(--reader-paper); border-color: rgba(244,239,228,.25); }

.reader-chart .grid { stroke: rgba(244,239,228,.12); stroke-width: 1; }
.reader-chart text { fill: rgba(244,239,228,.58); font: 9px "JetBrains Mono", monospace; }
.reader-chart .wall { stroke: var(--reader-red); stroke-width: 1.5; stroke-dasharray: 5 6; }
.reader-chart .cursor { stroke: var(--reader-paper); stroke-width: 1.5; }
.reader-chart .capacity { fill: none; stroke: var(--reader-gold); stroke-width: 3; }
.reader-chart .probe { fill: none; stroke: var(--reader-red); stroke-width: 2; }
.reader-chart .baseline { stroke: rgba(244,239,228,.55); stroke-dasharray: 5 5; }
.reader-chart .symmetric { stroke: var(--reader-gold); fill: none; stroke-width: 3; }
.reader-chart .planner { stroke: var(--reader-paper); fill: none; stroke-width: 2; }
.reader-chart .noisy { stroke: var(--reader-red); fill: none; stroke-width: 2.5; }
.reader-chart .bridge { stroke-dasharray: 5 6; opacity: .55; }
.reader-chart .dot-symmetric { fill: var(--reader-gold); }
.reader-chart .dot-planner { fill: var(--reader-paper); }
.reader-chart .dot-noisy { fill: var(--reader-red); }
.reader-chart .whisker { stroke-width: 1; opacity: .65; }

.adaptive-section { background: var(--reader-paper-2); }
.adaptive-section header { max-width: 920px; }
.adaptive-tabs, .transfer-tabs { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.adaptive-tabs button[aria-selected="true"], .transfer-tabs button[aria-selected="true"] { background: var(--reader-ink); color: var(--reader-paper); }
.adaptive-sequence { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.adaptive-sequence i { min-height: 78px; padding: .65rem; display: grid; align-content: space-between; background: var(--reader-paper); font-style: normal; border-top: 3px solid var(--reader-green); }
.adaptive-sequence i.flip, .adaptive-sequence i.coin { border-color: var(--reader-red); }
.adaptive-sequence i b { font: 500 .68rem/1 "JetBrains Mono", monospace; }
.adaptive-sequence i span { font: 400 .68rem/1.25 "JetBrains Mono", monospace; opacity: .65; }
.adaptive-panel { margin-top: 4px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--reader-line); background: var(--reader-paper); }
.adaptive-panel article { min-height: 190px; padding: 1.1rem; display: grid; align-content: start; gap: 1rem; }
.adaptive-panel article + article { border-left: 1px solid var(--reader-line); }
.adaptive-panel span { font: 500 .68rem/1.2 "JetBrains Mono", monospace; text-transform: uppercase; color: var(--reader-red); }
.adaptive-panel b { font: 500 .9rem/1.5 "Instrument Sans", sans-serif; }

.transfer-section { background: var(--reader-paper); }
.transfer-section header { max-width: 960px; }
.transfer-panel { margin-top: 1rem; padding: clamp(1.5rem, 4vw, 3.5rem); min-height: 430px; background: var(--reader-brown); color: var(--reader-paper); display: grid; align-content: start; }
.transfer-panel > span { font: 500 .7rem/1 "JetBrains Mono", monospace; color: var(--reader-gold); text-transform: uppercase; letter-spacing: .08em; }
.transfer-panel h3 { max-width: 1000px; margin: .8rem 0 2.5rem; font: 400 clamp(2.5rem, 5.5vw, 5.5rem)/.95 Fraunces, serif; letter-spacing: -.04em; }
.transfer-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(244,239,228,.25); border-bottom: 1px solid rgba(244,239,228,.25); }
.transfer-metrics div { padding: 1.2rem 1rem 1.2rem 0; display: grid; gap: .4rem; }
.transfer-metrics div + div { padding-left: 1rem; border-left: 1px solid rgba(244,239,228,.25); }
.transfer-metrics small { font: 400 .67rem/1.3 "JetBrains Mono", monospace; opacity: .6; text-transform: uppercase; }
.transfer-metrics b { font: 400 2.2rem/1 Fraunces, serif; color: var(--reader-gold); }
.transfer-panel > p { max-width: 820px; margin: 1.5rem 0 .75rem; font: 400 .96rem/1.55 "Instrument Sans", sans-serif; }
.transfer-panel > small { font: 400 .72rem/1.5 "JetBrains Mono", monospace; opacity: .62; }

.limits-section { display: grid; grid-template-columns: .75fr 1fr; gap: clamp(2rem, 6vw, 7rem); background: var(--reader-paper-2); }
.limits-section ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--reader-line); }
.limits-section li { padding: 1rem 0; border-bottom: 1px solid var(--reader-line); font: 500 .92rem/1.5 "Instrument Sans", sans-serif; }
.paper-cta { grid-column: 1 / -1; padding: clamp(1.5rem, 4vw, 3rem); background: var(--reader-red); color: #fff8ec; text-decoration: none; display: grid; grid-template-columns: .4fr 1fr; align-items: center; gap: .7rem 2rem; transition: background-color 180ms ease, transform 180ms var(--reader-ease); }
.paper-cta:hover { background: #a9221a; }
.paper-cta:active { transform: scale(.995); }
.paper-cta span { font: 500 .7rem/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.paper-cta strong { font: 400 clamp(2.1rem, 5vw, 4.8rem)/1 Fraunces, serif; }
.paper-cta strong i { font-style: normal; transition: transform 180ms var(--reader-ease); display: inline-block; }
.paper-cta:hover strong i { transform: translate(4px, -4px); }
.paper-cta small { grid-column: 2; font: 400 .78rem/1.4 "JetBrains Mono", monospace; opacity: .72; }

@media (max-width: 980px) {
  .research-brief { grid-template-columns: 1fr 1fr; }
  .research-brief p:nth-child(3) { border-left: 0; border-top: 1px solid var(--reader-line); }
  .research-brief p:nth-child(4) { border-top: 1px solid var(--reader-line); }
  .method-flow { grid-template-columns: 1fr 1fr; }
  .method-flow li:nth-child(3) { border-left: 0; border-top: 1px solid rgba(244,239,228,.25); }
  .method-flow li:nth-child(4) { border-top: 1px solid rgba(244,239,228,.25); }
  .method-flow li::after { display: none; }
  .corner-grid, .split-charts { grid-template-columns: 1fr; }
  .corner-grid > article + article { border-left: 0; border-top: 1px solid var(--reader-line); }
  .corner-grid > article { min-height: 360px; }
  .adaptive-panel { grid-template-columns: 1fr 1fr; }
  .adaptive-panel article + article { border-left: 0; border-top: 1px solid var(--reader-line); }
  .adaptive-panel article:nth-child(even) { border-left: 1px solid var(--reader-line); }
  .limits-section { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .reader-hero { min-height: auto; padding-top: 5rem; }
  .reader-hero h1 { font-size: clamp(3.5rem, 18vw, 5.5rem); }
  .research-brief, .method-flow, .guide-steps, .adaptive-panel { grid-template-columns: 1fr; }
  .research-brief p + p, .method-flow li + li, .guide-steps li + li, .adaptive-panel article + article,
  .adaptive-panel article:nth-child(even) { border-left: 0; border-top: 1px solid var(--reader-line); }
  .guided-intro, .guide-action-row { align-items: stretch; flex-direction: column; }
  .adaptive-sequence { grid-template-columns: repeat(4, 1fr); }
  .fixed-channel-callout { grid-template-columns: 1fr; }
  .transfer-metrics { grid-template-columns: 1fr 1fr; }
  .transfer-metrics div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(244,239,228,.25); }
  .transfer-metrics div:nth-child(4) { border-top: 1px solid rgba(244,239,228,.25); }
  .paper-cta { grid-template-columns: 1fr; }
  .paper-cta small { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}