/* One run — the Ramp case study. Same paper, ink and single purple family as the
   six rooms (tokens from ../style.css). One line runs the length of the page and
   does, at each station, what the work did: fans into graded strands, loses a
   thesis, passes a claim through the gate, splits between judgment and system.
   Design provenance: tokens/type = Jerry Design System v1 via style.css; the line
   = D-062 One Line grammar; label-as-line-style and gate figures = explicit
   creative decisions for this piece (structure carries the information). */

/* on a long page the fixed chrome needs a ground so text doesn't scroll through it */
body.run-page .chrome{ background:linear-gradient(var(--paper) 72%, rgba(247,244,238,0)); padding-bottom:34px; }
.run{ position:relative; max-width:1120px; margin:0 auto; padding:150px 40px 120px 128px; }
.run p{ line-height:1.62; max-width:66ch; }
.run a{ color:var(--ink); text-decoration-color:rgba(101,87,255,.55); text-underline-offset:3px; }
.run a:hover{ text-decoration-color:var(--accent); }

/* the gutter line: static fallback is a hairline; JS replaces it with a drawn path */
.run-gutter{ position:absolute; left:64px; top:150px; bottom:120px; width:1px; background:var(--line); }
.run-line{ position:absolute; left:0; top:0; width:128px; overflow:visible; pointer-events:none; }
.run-line path{ fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round; }
.run-line circle{ fill:var(--paper); stroke:var(--ink); stroke-width:1.4; }
.run-line circle.rn-on{ fill:var(--accent); stroke:var(--accent); }

.station{ position:relative; padding:56px 0 40px; scroll-margin-top:110px; }
.station + .station{ border-top:1px solid var(--line); }
.st-num{ position:absolute; left:-92px; top:60px; width:56px; text-align:right;
  font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:11px; letter-spacing:.22em; color:var(--ink-soft); }
.rn-eyebrow{ margin:0 0 14px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.rn-eyebrow b{ color:var(--accent); }
.station h1{ font-size:clamp(34px,4.6vw,58px); line-height:1.04; letter-spacing:-.015em; margin:0 0 22px; max-width:19ch; }
.station h2{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:clamp(24px,2.8vw,34px); line-height:1.1; letter-spacing:-.01em; margin:0 0 18px; max-width:24ch; text-wrap:balance; }
.lede{ font-size:19px; color:var(--ink-trace); }
.quiet{ color:var(--ink-soft); font-size:14.5px; }
.station h3{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:14px; letter-spacing:.06em; margin:28px 0 10px; }

/* the system, named once */
.os{ margin:34px 0 0; padding:26px 28px; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--paper-deep); max-width:70ch; }
.os p{ margin:0; }
.os p + p{ margin-top:12px; }
.os .buys{ margin:16px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.os .buys li{ padding-left:18px; position:relative; line-height:1.5; }
.os .buys li::before{ content:""; position:absolute; left:0; top:.72em; width:10px; height:1.6px; background:var(--accent); }

/* lineage strip */
.lineage{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; margin:30px 0 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14px; }
.lineage .arrow{ width:64px; height:1.4px; background:var(--ink); position:relative; }
.lineage .arrow::after{ content:""; position:absolute; right:-1px; top:-4px; width:8px; height:8px; border-top:1.4px solid var(--ink); border-right:1.4px solid var(--ink); transform:rotate(45deg); }
.lineage b{ display:block; font-family:'AvantGarde','CenturyGothic',sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:4px; }

/* labels as line styles — the grading system made visible */
.lab{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.lab::before{ content:""; width:28px; height:0; border-top:1.6px solid var(--ink); }
.lab.l-pv::before{ border-top-style:solid; border-color:var(--ink); }
.lab.l-rh::before{ border-top-style:dashed; border-color:var(--ink); }
.lab.l-ii::before{ border-top-style:dotted; border-color:var(--ink-soft); }
.lab.l-io::before{ border-top-style:solid; border-color:var(--line); border-top-width:3px; }
.lab.l-pv{ color:var(--ink); }
.legend{ display:flex; flex-wrap:wrap; gap:18px 32px; margin:0 0 26px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.legend .lab{ white-space:normal; }
.legend small{ display:block; font-weight:400; letter-spacing:0; text-transform:none; font-size:12.5px; color:var(--ink-soft); }

/* evidence rows */
.rows{ list-style:none; margin:0; padding:0; }
.rows li{ display:grid; grid-template-columns:1fr 200px; gap:22px; align-items:start; padding:14px 0; border-bottom:1px solid var(--line); }
.rows li:last-child{ border-bottom:0; }
.rows .claim{ line-height:1.5; }
.rows .claim small{ display:block; color:var(--ink-soft); font-size:12.5px; margin-top:4px; }
.rows .ruling{ font-size:13px; line-height:1.45; color:var(--ink-trace); }
.rows .ruling b{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:3px; }
.rows .ruling b.no{ color:var(--ink); }

/* theses figure + record */
.theses{ display:grid; grid-template-columns:1fr; gap:0; margin-top:8px; }
.thesis{ display:grid; grid-template-columns:150px 1fr; gap:22px; padding:20px 0; border-top:1px solid var(--line); align-items:start; }
.thesis svg{ width:150px; height:44px; overflow:visible; }
.thesis svg path{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; }
.thesis svg .cut{ stroke:var(--accent); stroke-width:1.6; }
.thesis svg .cond{ stroke-dasharray:2 6; stroke:var(--ink-soft); }
.thesis .fate{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin:0 0 6px; color:var(--ink-soft); }
.thesis .fate.lives{ color:var(--accent); }
.thesis .line{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:18px; margin:0 0 8px; }
.thesis p.why{ margin:0; font-size:15px; }

/* the gate: edits */
.edits{ list-style:none; margin:0; padding:0; counter-reset:e; }
.edit{ display:grid; grid-template-columns:120px 1fr; gap:22px; padding:22px 0; border-top:1px solid var(--line); }
.edit svg{ width:120px; height:30px; overflow:visible; }
.edit svg path{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; }
.edit svg circle{ fill:none; stroke:var(--accent); stroke-width:1.6; }
.edit svg .gone{ stroke:var(--accent); stroke-dasharray:1 5; }
.edit .verdict{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin:0 0 8px; color:var(--accent); }
.edit .verdict span{ color:var(--ink-soft); font-weight:400; letter-spacing:.05em; text-transform:none; margin-left:8px; }
.edit .txt{ margin:0; font-size:14.5px; line-height:1.55; }
.edit .txt + .txt{ margin-top:8px; }
.edit .txt b{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-right:8px; }
.edit del{ color:var(--ink-soft); text-decoration-color:rgba(101,87,255,.6); }
.edit ins{ text-decoration:none; background:linear-gradient(transparent 62%, rgba(101,87,255,.16) 62%); }
.tally{ margin-top:18px; font-size:13px; letter-spacing:.08em; color:var(--ink-soft); }

/* judgment / system split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:8px; }
.split h3{ margin-top:0; }
.split ul{ margin:0; padding:0; list-style:none; }
.split li{ padding:10px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.5; }
.split .mine h3{ color:var(--accent); }
.note{ margin-top:26px; padding:18px 22px; border:1px solid var(--line); font-size:15px; max-width:70ch; }

/* review */
.finding{ padding:18px 22px; border:1px solid var(--line); border-left:3px solid var(--ink); margin:12px 0; }
.finding b{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.finding p{ margin:0; font-size:15px; }
.finding.fix{ border-left-color:var(--accent); }

/* shipped: artifact doors */
.doors{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.doors li{ border-bottom:1px solid var(--line); }
.doors a{ display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline; padding:18px 0; text-decoration:none; }
.doors a:hover .dn{ color:var(--accent); }
.doors .dn{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:17px; transition:color .25s; }
.doors .dd{ display:block; color:var(--ink-soft); font-size:14px; margin-top:4px; font-family:'CenturyGothic',sans-serif; font-weight:400; }
.doors .go{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }

.triggers{ margin:0; padding:0; list-style:none; }
.triggers li{ padding:10px 0 10px 26px; border-top:1px solid var(--line); position:relative; font-size:15px; line-height:1.5; }
.triggers li::before{ content:""; position:absolute; left:0; top:1.05em; width:14px; height:1.6px; background:var(--accent); }

.run-foot{ margin-top:70px; padding-top:26px; border-top:1px solid var(--ink); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); }
.run-foot a{ font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:11px; text-decoration:none; color:var(--ink); }

/* ---------- documents (artifacts) ---------- */
body.doc{ padding:0; }
.doc-head{ max-width:860px; margin:0 auto; padding:40px 24px 0; }
.doc-back, .doc-foot a{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; text-decoration:none; color:var(--ink); }
.doc-disc{ margin:22px 0 0; padding:16px 20px; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--paper-deep); font-size:14px; line-height:1.55; }
.doc-body{ max-width:860px; margin:0 auto; padding:30px 24px 80px; font-size:15.5px; line-height:1.62; }
.doc-body h1{ font-size:clamp(26px,3.4vw,40px); line-height:1.1; margin:20px 0 20px; }
.doc-body h2{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-size:22px; margin:44px 0 12px; }
.doc-body h3{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-size:16px; margin:30px 0 10px; }
.doc-body table{ border-collapse:collapse; width:100%; font-size:13.5px; margin:14px 0 22px; display:block; overflow-x:auto; }
.doc-body th,.doc-body td{ text-align:left; vertical-align:top; padding:9px 10px; border-bottom:1px solid var(--line); }
.doc-body th{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.doc-body pre{ background:var(--paper-deep); padding:16px; overflow-x:auto; font-size:13px; }
.doc-body blockquote{ margin:10px 0; padding:8px 18px; border-left:2px solid var(--line); color:var(--ink-trace); }
.doc-body code{ font-size:.92em; }
.doc-foot{ max-width:860px; margin:0 auto; padding:0 24px 60px; font-size:13px; color:var(--ink-soft); }

@media (max-width:860px){
  .run{ padding:120px 22px 80px 46px; }
  .run-gutter{ left:18px; }
  .run-line{ width:46px; }
  .st-num{ position:static; display:block; width:auto; text-align:left; margin:0 0 10px; }
  .lineage{ grid-template-columns:1fr; }
  .lineage .arrow{ transform:rotate(90deg); margin:10px 0; }
  .rows li{ grid-template-columns:1fr; gap:8px; }
  .thesis{ grid-template-columns:1fr; gap:10px; }
  .edit{ grid-template-columns:1fr; gap:10px; }
  .split{ grid-template-columns:1fr; gap:24px; }
  .chrome-nav{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .run-line path, .thesis svg path, .edit svg path{ stroke-dashoffset:0 !important; }
}

/* ---------- Skim layer: the map, and "go deeper" under every station ---------- */
.runmap{ margin:34px 0 0; }
.runmap .quiet{ margin:0 0 14px; }
.runmap-line{ position:relative; display:grid; grid-template-columns:repeat(10,1fr); padding-top:10px; }
.runmap-line::before{ content:""; position:absolute; left:0; right:0; top:14px; height:1.4px; background:var(--ink); }
.runmap-line a{ position:relative; display:block; text-decoration:none; padding-top:16px; }
.runmap-line .mdot{ position:absolute; left:0; top:10px; width:9px; height:9px; border-radius:50%; background:var(--paper); border:1.4px solid var(--ink); transition:background .2s, border-color .2s; }
.runmap-line a:hover .mdot{ background:var(--accent); border-color:var(--accent); }
.runmap-line .mlab{ display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); padding-right:4px; line-height:1.3; white-space:nowrap; }
.runmap-line a:hover .mlab{ color:var(--ink); }
.deeper{ margin-top:16px; }
.deeper > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px; padding:8px 0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ink); }
.deeper > summary::-webkit-details-marker{ display:none; }
.deeper > summary::before{ content:"+"; font-family:'AvantGarde','CenturyGothic',sans-serif; font-size:15px; line-height:1; color:var(--accent); transition:transform .25s; }
.deeper[open] > summary::before{ transform:rotate(45deg); }
.deeper > summary:hover{ color:var(--accent); }
.deeper > *:not(summary){ margin-top:10px; }
.deeper.inline{ margin-top:6px; }
.deeper.inline > summary{ padding:4px 0; font-size:10.5px; color:var(--ink-soft); }
.deeper.inline p.why{ margin-top:6px; }
@media (max-width:860px){
  .runmap-line{ grid-template-columns:repeat(4,1fr); row-gap:18px; }
  .runmap-line .mlab{ white-space:normal; }
  .runmap-line::before{ display:none; }
  .runmap-line a{ padding-top:18px; }
}