/* dossier.css — the document system for "The Dossier, Instrumented".
 *
 * One continuous page. Continuity devices: the spine (a single vertical rule
 * that runs the whole document), numbered mono markers, and gradual warmth
 * shifts on the body gradient. NO banded sections, NO full-bleed color blocks
 * (per spec §1 — hard requirement).
 *
 * All colors come from tokens.css. No raw hex in this file.
 * Zero inline styles anywhere — final states live here; JS only animates.
 */

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Instruments observe on scroll — keep anchor jumps calm. */
  scroll-behavior: smooth;
}

body.dossier {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Gradual warmth: ONE page-level gradient, transitions spread over whole
     movements (never a hard band). The paper warms as the reader reaches the
     instruments, and cools again toward the close. */
  background-color: var(--paper);
  background-image: linear-gradient(
    180deg,
    var(--paper) 0%,
    var(--paper) 30%,
    var(--paper-warm) 52%,
    var(--paper-warm) 68%,
    var(--paper) 92%
  );
}

/* Static warm vignette — the paper atmosphere. Always present; the pointer
   light (JS) layers on top of it. Reduced-motion and no-JS users keep this. */
body.dossier::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse 95vw 90vh at 50% 42%,
    transparent 0%,
    transparent 58%,
    color-mix(in oklch, var(--gray-2) 42%, transparent) 100%
  );
}

::selection {
  background: color-mix(in srgb, var(--amber) 45%, transparent);
}

/* ---------- Warm pointer light (layer created by JS; visual lives here) ---------- */

#warm-light {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  --mx: 50%;
  --my: 35%;
  --glow-warm: oklch(82% 0.10 75);
  /* Proven multiply-darkening halo from the coming-soon page: on cream paper
     the light must darken + saturate, not add white. */
  background: radial-gradient(
    circle 150px at var(--mx) var(--my),
    color-mix(in oklch, var(--glow-warm) 72%, transparent),
    color-mix(in oklch, var(--glow-warm) 46%, transparent) 34%,
    color-mix(in oklch, var(--glow-warm) 20%, transparent) 64%,
    transparent 90%
  );
  mix-blend-mode: multiply;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  #warm-light { display: none !important; }
}

/* ---------- Page frame + the spine ---------- */

.page {
  position: relative;
  z-index: 2;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4.5vw, 3.25rem);
}

/* THE SPINE — one continuous 1px rule running the entire document. This is
   the continuity device; every movement hangs off it. */
.spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(1.25rem, 4.5vw, 3.25rem);
  width: 1px;
  background: var(--rule);
}

/* Content clears the spine line. */
.site-head,
.movement,
.site-foot {
  position: relative;
  padding-left: clamp(1.5rem, 4vw, 3.25rem);
}

/* ---------- Desktop composition (spec §1 hard rule, 2026-07-03) ----------
   ≥1024px the spine + numbered markers move to the far-LEFT gutter, near the
   viewport edge and clearly separated from the content column. Content is
   left-anchored off the spine (never a centered mobile column) and uses the
   freed width via the two-dimensional layouts below (.brief-body grid,
   .method-grid). Mobile keeps the single-column flow untouched. */
@media (min-width: 1024px) {
  .page {
    max-width: none;
    margin-inline: 0;
    padding-left: 3rem;                     /* spine gutter */
    padding-right: clamp(2.5rem, 5vw, 5rem);
  }

  .spine { left: 3rem; }

  /* Movement border-box left edge == spine x, so the left:0 markers keep
     sitting ON the spine; the padding is the spine→content separation. */
  .site-head,
  .movement,
  .site-foot {
    padding-left: clamp(4rem, 6vw, 6.5rem);
    max-width: 78rem;                       /* content stays with the spine on wide screens */
  }
}

/* ---------- Desktop brief composition: content column + sticky panel ----
   .brief-body (emitted by brief-fragment.mjs) is block flow on mobile; at
   ≥1024px it becomes a two-column grid — title block, evidence, and sections
   on the left, the dark instrument panel beside them on the right, sticky so
   the instruments ride along as the dossier is read. The sample watermark is
   OUTSIDE .brief-body (direct child of .brief) so its sticky containing
   block still spans the whole showcase. */
@media (min-width: 1024px) {
  .brief-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(19rem, 26vw, 24rem);
    column-gap: clamp(2.5rem, 4.5vw, 4.5rem);
    align-items: start;
  }

  .brief-body > * {
    grid-column: 1;
    min-width: 0;
  }

  .brief-body .brief-panel {
    grid-column: 2;
    align-self: start;
    position: sticky;
    top: clamp(1rem, 3vh, 2rem);
    margin-top: 0;
  }

  /* Panel spans every content row of its mode (extra implicit rows collapse
     to zero height when optional sections are absent). */
  .brief--sample .brief-body .brief-panel { grid-row: 1 / span 4; }
  .brief--full   .brief-body .brief-panel { grid-row: 1 / span 6; }

  /* Inside the narrower right column the label track relaxes so the meter
     keeps a readable length. */
  .brief-body .brief-panel .instrument-row {
    grid-template-columns: minmax(5.5rem, auto) 1fr 3.5ch;
    gap: 0.75rem;
  }
}

/* Numbered mono stops on the spine. Paper backing punches out the line so the
   spine reads as passing *through* a labeled station. */
.spine-marker {
  position: absolute;
  left: 0;
  top: 0.15em;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  color: var(--gray-3);
  background: var(--paper);
  padding-block: 0.5rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* ---------- Movements (vertical rhythm — margins, never borders/bands) ---------- */

.movement {
  margin-block: var(--space-movement);
}

.movement-head {
  margin-bottom: var(--space-block);
}

/* ---------- Typography ---------- */

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray-3);
  margin: 0;
}

.mono-label b,
.mono-label strong {
  font-weight: 500;
  color: var(--gray-4);
}

.statement {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-statement);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  max-width: 18ch;
}

.title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-title);
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
}

.prose {
  max-width: var(--measure);
}

.prose p {
  margin: 0 0 1.1em;
}

.prose p:last-child { margin-bottom: 0; }

.serif-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.35;
  color: var(--ink-soft);
}

/* ---------- Rules (final full width in CSS; JS clips for the draw-in) ---------- */

.rule {
  border: 0;
  height: 1px;
  width: 100%;
  margin: 0;
  background: var(--rule);
}

.rule-strong {
  height: 1.5px;
  background: var(--rule-strong);
}

/* ---------- Citations + evidence ---------- */

.cite {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: 0.06em;
  color: var(--gray-3);
}

.cite sup,
.cite .cite-mark {
  font-family: var(--font-mono);
  color: var(--amber-deep);
  margin-right: 0.5em;
}

.evidence-quote {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--amber-deep);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.45;
  color: var(--gray-4);
}

.evidence-quote footer {
  margin-top: 0.75rem;
}

/* ---------- Links ---------- */

a {
  color: var(--green);
  text-decoration: none;
  /* Resting underline: quiet. Hover: an ink sweep draws over it. */
  background-image:
    linear-gradient(var(--green), var(--green)),
    linear-gradient(color-mix(in srgb, var(--green) 38%, transparent),
                    color-mix(in srgb, var(--green) 38%, transparent));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-draw) var(--ease-instrument);
}

a:hover,
a:focus-visible {
  background-size: 100% 1px, 100% 1px;
}

a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Proximity warmth (JS writes --glow 0–1 on .glow-target as the pointer
   approaches; resting state is the plain link style). */
.glow-target {
  color: color-mix(in srgb, var(--amber-deep) calc(var(--glow, 0) * 55%), var(--green));
}

/* ---------- Site header / footer (shared chrome) ---------- */

.site-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: clamp(1.25rem, 3vw, 2.25rem);
  padding-bottom: 0.9rem;
}

.wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ink);
  background: none;
}

.wordmark:hover, .wordmark:focus-visible { background: none; }

.site-nav {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.25rem);
}

.site-nav .nav-soon {
  color: var(--gray-1);
}

.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.site-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}

.site-foot .mono-label { color: var(--gray-1); }

/* ---------- Brief fragment (shared: landing showcase + detail pages) ---------- */

.brief-head { max-width: 44rem; }

.brief-title {
  margin-top: 0.6rem;
  max-width: 20ch;
}

.brief-tags {
  margin-top: 0.9rem;
  color: var(--green);
}

.brief-summary {
  margin-top: 1.1rem;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.brief-panel {
  margin-top: var(--space-block);
}

.panel-trend { padding-top: 0.65rem; }
.panel-trend .mono-label { margin-bottom: 0.6rem; }

.brief-section {
  margin-top: var(--space-block);
  max-width: 44rem;
}

.section-label { margin-bottom: 1.25rem; }

.evidence-list,
.persona-list,
.angle-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.evidence-item + .evidence-item { margin-top: 1.75rem; }

.evidence-quote p { margin: 0 0 0.6rem; }

.persona-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.persona-item:first-child { border-top: 1px solid var(--rule); }

.competitor-table {
  width: 100%;
  border-collapse: collapse;
}

.competitor-table th,
.competitor-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 1.25rem 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}

.competitor-table thead th {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray-3);
  border-bottom: 1.5px solid var(--rule-strong);
}

.competitor-table tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  width: 34%;
}

.competitor-table td { color: var(--gray-4); }

.angle-item + .angle-item { margin-top: 1.4rem; }

.angle-headline {
  margin: 0 0 0.3rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ink);
}

.angle-desc {
  margin: 0;
  color: var(--gray-4);
  max-width: var(--measure);
}

.brief-foot { margin-top: var(--space-block); }
.brief-foot .rule { margin-bottom: 1rem; }
.brief-foot .mono-label { margin-top: 0.4rem; color: var(--gray-1); }

/* ---------- Library index (dossier rows — ruled ROWS, never cards) ---------- */

.movement--library-head {
  margin-top: clamp(3rem, 2.5rem + 4vw, 6.5rem);
  margin-bottom: clamp(3rem, 2.5rem + 4vw, 6rem);
}

.movement--library-head .eyebrow { margin-bottom: 1.5rem; }

.library-count {
  margin-top: var(--space-block);
  color: var(--gray-1);
}

.library-empty { margin-top: var(--space-block); }

.movement--index { margin-top: 0; }

.index-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.index-head .mono-label { color: var(--gray-1); }

.brief-index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.row-grid {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) clamp(10rem, 22vw, 13rem) 3.5rem;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
}

/* ≥1024px the rows inherit the gutter layout (spine far left, content wide);
   the instrument column earns more of the freed width so the mini meters
   read as instruments, not decoration. */
@media (min-width: 1024px) {
  .row-grid {
    grid-template-columns: 5rem minmax(0, 1fr) clamp(13rem, 22vw, 17rem) 4rem;
  }
}

.row-no {
  color: var(--gray-3);
  padding-top: 0.5rem;
}

.row-title {
  font-size: clamp(1.35rem, 1.1rem + 1.3vw, 1.95rem);
  line-height: 1.18;
}

/* Serif title-link: ink at rest, green underline sweeps in on hover
   (dossier link treatment, inherited draw behavior). */
.row-title a { color: var(--ink); }
.row-title a:hover,
.row-title a:focus-visible { color: var(--green); }

.row-tags {
  margin-top: 0.6rem;
  color: var(--green);
}

.row-date {
  color: var(--gray-1);
  padding-top: 0.5rem;
  text-align: right;
  white-space: nowrap;
}

.row-instruments {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.45rem;
}

.index-row:hover .row-no { color: var(--green); }

/* ≤767px: the row re-stacks — number + date on one line, title, then the
   instruments. Still a ruled row, never a card. The column legend describes
   a grid that no longer exists at this width, so it steps aside. */
@media (max-width: 767px) {
  .index-head .mono-label:first-child { display: none; }
  .row-grid {
    grid-template-columns: 1fr auto;
    gap: 0.75rem 1rem;
  }
  .row-no, .row-date { padding-top: 0; }
  .row-main { grid-column: 1 / -1; }
  .row-instruments {
    grid-column: 1 / -1;
    max-width: 22rem;
    padding-top: 0.2rem;
  }
  .row-date { order: 2; }
}

/* ---------- Brief detail page (document shell around the full fragment) ---------- */

/* The dossier document breathes a little less than landing movements — it is
   one continuous artifact, not six. */
.movement--dossier {
  margin-top: clamp(2.5rem, 2rem + 3vw, 5rem);
}

.crumb {
  margin-bottom: var(--space-block);
}

.crumb a {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}