/* Focused evidence sections. Loaded after editorial.css so the page keeps its
   existing type and colour system without bringing the old dashboard back. */

/* The output is a single exchange on a quiet editorial canvas. */
.output#output{
  min-height:0;
  height:auto;
  
  border-top:0;
  overflow:visible;
}
.output#output .output-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.48fr);
  gap:clamp(32px,7vw,120px);
  align-items:end;
  margin:0 0 clamp(42px,6vw,80px);
  padding:0;
}

.output#output h2{
  max-width:18ch;
  margin:18px 0 0;
  color:var(--text);
  line-height:1.02;
  letter-spacing:-.045em;
}
.output#output .output-intro{ max-width:28ch; margin:0; color:var(--muted); font-size:15px; line-height:1.7; }













/* Keep the method readable when the legacy scroll script adds build classes. */
.base-stage#baseStage{
  height:auto!important;
  margin:0;
  border:0;
  border-top:0;
  border-radius:0;
  background:transparent;
}
.base#base{ position:relative!important; height:auto!important; min-height:0; grid-template-rows:auto auto auto auto; }

.base#base .base-mid{ display:block; transform:none!important; text-align:left; }
.quiet-reference{ margin:0; color:var(--text); line-height:1; letter-spacing:-.055em; text-align:left; }




.method-detail{ max-width:700px; margin:30px 0 0; text-align:left; }
.method-detail summary{ color:var(--muted); }
.method-detail[open]{ padding-top:6px; }
.base#base .formula,.base#base .f-sub{ text-align:left; }










.base#base .base-foot{ max-width:46ch; margin:0; color:var(--muted); font-size:14px; line-height:1.7; text-align:left; }
.base#base .base-foot,.base#base .formula,.base#base .f-sub{ opacity:1!important; transform:none!important; }

@media (max-width:800px){
  .output#output .output-head{ grid-template-columns:1fr; gap:30px; }
  .output#output h2{ max-width:15ch; }
  
  
  
  
  
  
}
@media (prefers-reduced-motion:reduce){
  .base#base .base-mid{ transform:none!important; }
}
/* Two twenty-second selections on the full 6,192-second recording. */

.output#output h2{font-family:var(--serif)}


/* Deliberate departures from the grid, with ordinary document flow beneath. */

.output#output .output-head>div{grid-column:1/10}.output#output .output-intro{grid-column:10/13}
.output#output h2{max-width:20ch;line-height:1.05}


.base#base{grid-template-rows:none}
.base#base>*{min-width:0}.base#base .base-mid{grid-column:1/-1}
.base#base .quiet-reference{font-weight:400;line-height:1.03;font-family:var(--sans);letter-spacing:-.055em;max-width:14ch;text-wrap:balance}




.base#base .base-foot{margin:0;text-align:left;max-width:38ch;font-size:14px}
.base#base .method-detail{max-width:none;margin:0;padding:0;align-self:start;border-top:0}
.base#base .method-detail summary{padding:8px 0;margin:0;font-size:var(--t-small);line-height:1.6;font-family:var(--sans);color:var(--muted)}
.base#base .formula{display:inline-grid;grid-template-columns:1fr;gap:0;margin:16px 0 12px;font-size:var(--t-small);line-height:1.6;font-family:var(--mono);text-align:center;justify-content:initial;align-items:initial}

.base#base .f-sub{font:12px/1.75 var(--sans);margin:10px 0 0;max-width:42ch;text-align:left}
@media(max-width:700px){.output#output .output-head{display:block}.output#output h2{left:0}.output#output .output-intro{margin-top:28px}.base#base{gap:28px}.base#base .base-mid,.base#base .base-foot,.base#base .method-detail{grid-column:1}.base#base .quiet-reference{margin-left:0;max-width:12ch}.base#base .base-foot{margin-top:12px}.base#base .method-detail{margin-top:8px}.base#base .formula{font-size:15px}}

/* Hierarchy through typographic contrast, with time kept as the only plotted rule. */



.base#base .method-detail summary{color:var(--text-2)}
.base#base .method-detail summary::after{display:inline-block;margin-left:14px;font-size:17px;color:var(--text)}





/* First contact: one typographic gesture, with a quieter navigation baseline. */
.top nav{display:flex;align-items:center;gap:30px}
.top nav a,.top nav .demo-link{display:inline-flex;align-items:center;min-height:40px;margin:0;padding:0;font-size:var(--t-ui);line-height:1.2;font-family:var(--sans);letter-spacing:0;text-transform:none;border:0;color:var(--text-2)}
.top nav a:hover{color:var(--text)}
.title{top:20vh;text-align:left}
.title h1{margin:0;font-weight:400;line-height:.82;letter-spacing:-.06em}
.title .hero-beyond{display:block;font-weight:400;line-height:1;font-family:var(--sans);letter-spacing:-.06em}
.title h1 em{display:block;margin-top:12px;font-weight:400;font-style:italic;line-height:.98;font-family:var(--serif);letter-spacing:-.07em}

.output#output .output-head h2{margin-top:0}
@media(max-width:700px){.top nav{gap:22px}.top nav a:not(.demo-link){display:inline-flex}.title{top:145px}.title h1 em{letter-spacing:-.06em;margin-top:13px}}
@media(max-height:760px) and (min-width:701px){.title{top:17vh}}
@media(prefers-reduced-motion:reduce){.title{position:relative;top:auto}}
.title h1 .hero-beyond{text-transform:none}
/* An epigraph between the recording and the first concrete exchange. */






.relations-interlude .thesis-note{grid-column:5/13;margin:0;font:17px/1.9 var(--sans)}
.relations-purpose{grid-column:5/12;margin:0;max-width:45ch;color:var(--text-2);font:15px/1.8 var(--sans)}
@media(max-width:700px){.relations-interlude{display:block}.relations-interlude .thesis-note{font-size:15px;line-height:1.9}.relations-purpose{font-size:14px;margin-top:24px}}
/* A demo invitation, rather than a single finding standing in for the product. */
.demo-invitation h2 em{font-weight:400}
.demo-pending{padding:16px 22px;min-height:48px;border:0;border-radius:3px;background:#c7c5bc;color:#33352e;font-size:var(--t-ui);line-height:1.3;font-family:var(--sans);cursor:not-allowed;opacity:.8}.demo-entry p{font:12px/1.7 var(--sans);color:var(--muted);max-width:32ch;margin:16px 0 0}
#contact{scroll-margin-top:100px}.contact-copy>p{max-width:38ch;margin:26px auto 0;font:16px/1.8 var(--sans)}
.contact-options{display:flex;justify-content:center;gap:55px;margin:35px 0 0;text-align:left;flex-wrap:wrap}.contact-options>div{display:flex;flex-direction:column;gap:10px}.contact-kind{font:12px var(--sans);color:var(--muted)}.contact-placeholder{font-family:var(--sans);color:var(--text-2)}.contact-copy .contact-status{margin-top:24px;color:var(--muted)}
.endcap:has(.contact-copy){display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto 1fr auto;column-gap:var(--col-gap);
  height:auto;min-height:clamp(630px,88svh,900px);
  padding:clamp(96px,12vh,140px) var(--gutter) clamp(30px,4vh,48px);
  font-family:var(--sans)}
.endcap:has(.contact-copy) .contact-copy{grid-column:8/13;grid-row:1;
  margin:0;padding:clamp(20px,3vh,30px) 0 0;text-align:left;
  border-top:1px solid var(--line)}
.endcap:has(.contact-copy) .contact-copy h2{margin:0;max-width:none;
  font-size:clamp(54px,5.4vw,92px);line-height:1}
.endcap:has(.contact-copy) .contact-copy p{margin:clamp(22px,3vh,32px) 0 0;
  max-width:34ch;color:var(--text-2)}
.contact-channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--col-gap);margin:clamp(32px,4vh,46px) 0 0}
.contact-channels>div{min-width:0;border-top:1px solid var(--line);padding-top:12px}
.contact-channels dt{font:500 var(--t-micro)/1.4 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.contact-channels dd{margin:12px 0 0;font:500 clamp(15px,1.15vw,18px)/1.35 var(--sans);
  color:var(--text);white-space:nowrap}
.contact-channels a{color:inherit;text-decoration-color:var(--line);text-underline-offset:.28em;
  transition:color .2s ease,text-decoration-color .2s ease}
.contact-channels a:hover,.contact-channels a:focus-visible{color:var(--gold);text-decoration-color:currentColor}
.endcap:has(.contact-copy) .end-fine{grid-column:1/-1;grid-row:3;
  margin:0;padding:0 0 clamp(96px,12vh,132px);
  justify-content:space-between;color:var(--text-2);
  text-shadow:0 2px 18px var(--ink)}
@media(max-width:700px){.top nav{gap:16px}.output#output.demo-invitation .output-head{display:block}.output#output.demo-invitation .output-lede,.output#output.demo-invitation .output-aside{display:block}.output#output.demo-invitation .output-aside{margin-top:34px}.output#output.demo-invitation .output-intro{margin-top:26px;font-size:16px}.output#output.demo-invitation .local-note,.output#output.demo-invitation .demo-lead{margin-top:22px}.output#output.demo-invitation .demo-entry{margin-top:28px}.contact-copy>p{font-size:15px;max-width:30ch}.contact-options{gap:30px}.contact-placeholder{font-size:15px}.endcap:has(.contact-copy){min-height:clamp(760px,105svh,900px);
  padding:clamp(96px,13svh,125px) var(--gutter) 24px}
.endcap:has(.contact-copy) .contact-copy{grid-column:1/-1}
.endcap:has(.contact-copy) .contact-copy h2{font-size:clamp(52px,12vw,72px)}
.endcap:has(.contact-copy) .contact-copy p{max-width:28ch}
.contact-channels{grid-template-columns:1fr;gap:20px;margin-top:30px}
.contact-channels dd{font-size:17px}
.endcap:has(.contact-copy) .end-fine{padding-bottom:clamp(78px,14svh,110px)}}

/* Baseline explanation: one static comparison, with the recorded windows
   available in the method disclosure below it. */
.base#base{ grid-template-rows:auto auto auto auto; }
.base#base .base-mid{ grid-column:1/-1; }
.base#base .quiet-reference{ max-width:14ch; }
.baseline-intro{ max-width:41ch; margin:28px 0 0; color:var(--muted); font:17px/1.75 var(--sans); }
.baseline-illustration{ max-width:760px; margin:clamp(48px,7vw,92px) 0 0; }
.baseline-illustration figcaption{ margin:0 0 22px; color:var(--faint); font:11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.baseline-illustration svg{ display:block; width:100%; height:auto; overflow:visible; }
.baseline-note{ margin:17px 0 0; color:var(--faint); font-size:10px; line-height:1.5; letter-spacing:.03em; }
.base#base .base-foot{ max-width:49ch; }

.reference-windows{ margin:17px 0 0; color:var(--muted); font:12px/1.8 var(--mono); }
.reference-windows b{ color:var(--text-2); font-weight:400; }
@media(max-width:700px){
  .baseline-intro{ font-size:15px; line-height:1.75; }
  .baseline-illustration{ margin-top:48px; }
  .baseline-illustration svg{ width:100%; }
}
.base#base .baseline-illustration{max-width:850px;margin-top:40px}.base#base .baseline-illustration figcaption{font-family:var(--sans);letter-spacing:0;text-transform:none}.baseline-note{font:11px/1.7 var(--sans);max-width:48ch;margin-top:30px}
@media(max-width:700px){.base#base .baseline-illustration{margin:35px 0 0;width:100%}.baseline-illustration figcaption,.baseline-note{margin-left:0;margin-right:0}}

/* Three different beats: an intimate quotation, a bright invitation, a close study. */





.relations-interlude .thesis-note{grid-column:1;margin:0;font-size:14px;line-height:1.9}
.relations-purpose{grid-column:2;margin:0;font-size:14px;line-height:1.9;max-width:34ch}
.output#output.demo-invitation{--text:#252821;--text-2:#43483d;--muted:#53564e;--gold:#65614b;background:#d0cec4;color:var(--text);border:0}
/* One editorial grid, the way the reference sections are built: the invitation
   on the left, the practical column on the right, both landing on the same 12
   tracks — not a free-floating 17vw indent with the button flung to the far
   edge. */
.output#output.demo-invitation .output-head{margin:0}
.output#output.demo-invitation .output-lede{grid-column:1/8;display:flex;flex-direction:column}
.output#output.demo-invitation .output-aside{grid-column:9/13;display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px)}
.output#output.demo-invitation h2{left:0;margin:0;max-width:11ch;font-weight:400;line-height:.98;font-family:var(--sans);letter-spacing:-.06em}
.output#output.demo-invitation h2 br{display:none}
.output#output.demo-invitation h2 em{display:block;margin:0;font-family:var(--serif);color:var(--text);font-weight:400}
.output#output.demo-invitation .output-intro{margin:clamp(28px,3vw,40px) 0 0;max-width:40ch;font:400 clamp(16px,1.15vw,18px)/1.75 var(--sans);color:var(--text-2)}
.output#output.demo-invitation .local-note{margin:0;max-width:42ch;font:400 15px/1.7 var(--sans);color:var(--muted)}
.output#output.demo-invitation .local-note strong{font-weight:500;color:var(--text-2)}
.output#output.demo-invitation .demo-lead{margin:0;max-width:42ch;font:400 15px/1.7 var(--sans);color:var(--muted)}
.output#output.demo-invitation .demo-entry{margin-top:clamp(4px,.8vw,12px);padding:0}
.output#output.demo-invitation .demo-pending{background:#30362d;color:#dedbd2;opacity:1}
.output#output.demo-invitation .demo-entry p{color:#53564e}

/* --- the Board, on the cream ground ---------------------------------------
   A dark instrument laid on the light band: it reads as an object sitting on
   the page rather than a hole cut through it, which is why it carries a border
   and a cast shadow instead of bleeding to the edges. Full measure, because
   the capture is 2.1:1 and anything narrower makes its own type unreadable. */
.demo-invitation .board-figure{margin:clamp(46px,5.6vw,82px) 0 0}
.demo-invitation .board-shot{line-height:0;background:#050605;
  border:1px solid rgba(37,40,33,.24);
  box-shadow:0 26px 64px -32px rgba(18,20,15,.5)}
.demo-invitation .board-shot picture,.demo-invitation .board-shot img{display:block;width:100%;height:auto}
/* Keyed the way the "How we read it" rows are keyed, so the two captioned
   blocks on this page are read the same way. */
.demo-invitation figcaption{display:grid;
  grid-template-columns:minmax(152px,.22fr) minmax(0,1fr);
  gap:6px clamp(18px,2.4vw,34px);margin-top:clamp(18px,2vw,26px)}
.demo-invitation .board-cap-k{color:var(--text-2)}
.demo-invitation figcaption p{margin:0;max-width:62ch;color:var(--muted);line-height:1.75}
@media(max-width:640px){
  .demo-invitation figcaption{display:block}
  .demo-invitation .board-cap-k{display:block;margin-bottom:6px}
}


.base#base .quiet-reference{margin:0;max-width:9ch;line-height:1.07}
.base#base .baseline-intro{margin:0;max-width:30ch;font-size:15px;line-height:1.8}
.base#base .baseline-illustration{margin:20px 0 0;max-width:none;width:100%;align-self:center}
.base#base .baseline-note{margin-top:30px}
.base#base .base-foot{font-size:13px;max-width:45ch}

@media(max-width:800px){.relations-interlude{display:block}.relations-purpose{margin-top:22px;max-width:38ch}.output#output.demo-invitation .output-head{grid-template-columns:1fr;row-gap:0}.output#output.demo-invitation .output-lede,.output#output.demo-invitation .output-aside{grid-column:1}.output#output.demo-invitation .output-aside{margin-top:40px}.output#output.demo-invitation h2{max-width:14ch}.output#output.demo-invitation h2 em{margin:6px 0 0}.output#output.demo-invitation .output-intro{margin-top:28px;max-width:42ch}.output#output.demo-invitation .demo-entry{margin-top:8px}.base#base{gap:32px}.base#base .base-mid{display:block}.base#base .quiet-reference{max-width:10ch}.base#base .baseline-intro{margin-top:27px;max-width:38ch}.base#base .baseline-illustration{margin-top:42px;width:100%}.base#base .base-foot,.base#base .method-detail{grid-column:1/-1;grid-row:auto}}

/* The range figure, in the grammar the dial already speaks: hairlines whose
   length and brightness are both the measurement, a resting band drawn as a
   cushion of light with no edge to mistake for a threshold, and no filled
   shapes anywhere. The two speakers face opposite ways across one line, which
   is the dial's own outward-spike / inward-fibre relationship unrolled -- and
   the reason the same value can be read twice in one glance. Colour stays out
   of it: on this page violet is vision, warm is audio and gold is
   corroboration, so a figure about one text channel is silver or nothing.

   Responsiveness. Everything inside a viewBox is scaled by the box, so type
   set in the SVG shrank continuously with the column -- about 10px at 1440 and
   5px just above the breakpoint, which no number of breakpoints can fix. So
   the drawing keeps the viewBox and nothing else does: the labels and the
   reading mark are HTML, positioned as percentages of the same box (--rg-x,
   --rg-l, --rg-base carry the three coordinates the SVG uses), and the
   hairlines take non-scaling-stroke so a hairline stays a hairline. The figure
   now holds one typographic size from 320px to 2560px. */
/* The plot is its own container: the labels crowd each other according to how
   wide the DRAWING is, which is not what the viewport is doing. At a 801px
   viewport the figure sits in a seven-column slot and is 361px across; at a
   560px viewport it is full-bleed and 616px. Sizing this off the viewport got
   it backwards in both directions. */
.range-plot{ position:relative; container-type:inline-size; margin:14px 0 8px; }
/* The readings and the mark on the line are percentages of the DRAWING, so
   they hang off this box rather than the plot -- otherwise, once the speaker
   labels join the flow on a narrow container, the plot grows taller and the
   dot slides off the line it is supposed to be sitting on. */
.rg-canvas{ position:relative; }
.range-figure{ display:block; width:100%; height:auto; overflow:visible; }
.rg-comb{ stroke-width:1.15; fill:none; }
.rg-field.ghost .rg-comb{ stroke-width:.9; }
.rg-base{ stroke:rgba(230,226,216,.12); stroke-width:1; fill:none; }
.rg-probe{ stroke:rgba(230,226,216,.32); stroke-width:1; fill:none; }

/* The reading: a dot on the line with the dial's bloom behind it. */
.rg-hit{ position:absolute; left:var(--rg-x); top:var(--rg-base); width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px; border-radius:50%; background:rgba(240,238,232,.92);
  box-shadow:0 0 22px 9px rgba(230,226,216,.16); pointer-events:none; }

.rg-lbl{ position:absolute; width:max-content; margin:0; white-space:nowrap; line-height:1.35; }
.rg-lbl b{ font-weight:400; font-size:var(--t-micro); font-family:var(--sans); color:var(--text-2); }
.rg-lbl span{ margin-left:11px; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.05em; color:var(--faint); }
.rg-a{ left:var(--rg-l); top:6%; transform:translateY(-60%); }
.rg-b{ left:var(--rg-l); top:96.5%; transform:translateY(-60%); }
/* The two readings hang off the probe, one in each speaker's half, so they can
   never drift into each other however narrow the column gets. */
.rg-read,.rg-read-b{ left:var(--rg-x); transform:translateX(-50%); text-align:center; }
.rg-read{ top:6%; }
.rg-read-b{ top:89%; }
.rg-read b{ display:block; font-family:var(--mono); color:var(--text); }
.rg-read span,.rg-read-b span{ display:block; margin:0; font-size:var(--t-micro); font-family:var(--sans); letter-spacing:0; color:var(--muted); }
.rg-b b{ color:var(--muted); }
.rg-b span,.rg-read-b span{ color:var(--faint); }

/* A narrow drawing: the type holds its size, so what gives is the range, which
   drops under the speaker's name instead of running into the reading. */
@container (max-width:440px){
  .rg-lbl span { display:block; margin-left:0; font-size:10px; }
  .rg-lbl b,.rg-read span,.rg-read-b span { font-size:11px; }
  /* Stacked, the two lines are taller than the clear air above the hairlines,
     so the speaker labels step out of the drawing and sit above and below it
     rather than on top of the measurement. */
  .rg-a,.rg-b { position:static; margin-left:var(--rg-l); transform:none; }
  .rg-a { margin-bottom:9px; }
  .rg-b { margin-top:9px; }
}

/* Reclaiming the section's side padding is a viewport question, not a
   container one: it is about the page's margins, not the drawing's width. */
@media(max-width:620px){
  .base#base .baseline-illustration{ margin-inline:calc(var(--gutter) * -1);
    width:calc(100% + var(--gutter) * 2); }
  .base#base .baseline-illustration figcaption,.base#base .baseline-note{ margin-inline:var(--gutter); }
}

/* Explanatory prose shares one voice; only labels use the smaller scale.
   The demo invitation sets its own scale in the block above, so it is not
   listed here. */
.cap p,.relations-interlude .thesis-note,.relations-interlude .relations-purpose,.base#base .baseline-intro,.base#base .baseline-note,.base#base .base-foot,.base#base .reference-windows,.base#base .f-sub,.end-copy.contact-copy>p:not(.contact-status){font-weight:400;font-size:var(--t-body);line-height:1.8;font-family:var(--sans);letter-spacing:0;color:var(--muted)}
.base#base .baseline-note{max-width:52ch}
.base#base .method-detail summary,.base#base .baseline-illustration figcaption{font-weight:400;font-size:var(--t-small);line-height:1.7;font-family:var(--sans);letter-spacing:0;color:var(--muted)}


/* Conversation measurement thesis; review remains a navigation surface. */
.measurement-thesis{grid-column:1/-1;max-width:900px;margin-bottom:28px}
.measurement-thesis h2{margin:0;max-width:16ch;line-height:1.04}
.measurement-boundary{grid-column:1/-1;margin:clamp(30px,4vw,44px) 0 0;font:15px/1.8 var(--sans);color:var(--muted)}
@media(max-width:700px){.measurement-thesis{margin-bottom:30px}}
#preview,#thesisTitle,#evidence{scroll-margin-top:96px}

/* --- the scale ------------------------------------------------------------
   Every other section on this page is a drawing made of data with a caption
   beside it; this one was the only block of pure prose, which is why it read
   as the weak one however the columns were arranged. So the inventory is the
   drawing now: one rule across the four channels with the twenty-three
   measures hanging off it as named lanes, packed left in each channel's own
   width. A dense channel fills its span, a sparse one leaves it open, and the
   breadth of the instrument is a shape before it is a list. The method
   statements below are a spec table keyed by their own short names — not the
   five-column legend the evidence section already uses, and no longer a
   defence of the measurement. */
.plate{grid-column:1/-1;margin-top:clamp(28px,3.6vw,44px)}
.plate-k{margin:0 0 clamp(18px,2vw,24px);font-weight:400;font-family:var(--sans);
  line-height:1.5;letter-spacing:0;text-transform:none;color:var(--text-2)}
.plate-k-2{margin-top:clamp(38px,4.6vw,58px)}

/* One grid for the whole scale, not four stacked columns: the heads share a
   row so the rule below them starts on the same line in every channel and the
   four segments read as one continuous scale. Letting the prose stretch
   instead would bottom-align the columns, and the ragged label lengths would
   put the rule at four different heights. */
.scale{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;
  gap:0 clamp(20px,2.6vw,38px)}
.scale>li{display:contents}
.ch-head{grid-row:1;display:flex;flex-direction:column;min-width:0;padding-bottom:21px}
.ch-lanes{grid-row:2}
.scale>li:nth-child(1)>*{grid-column:1}
.scale>li:nth-child(2)>*{grid-column:2}
.scale>li:nth-child(3)>*{grid-column:3}
.scale>li:nth-child(4)>*{grid-column:4}
.ch-no{display:block;margin:0 0 10px;font:10px/1 var(--mono);letter-spacing:.18em;color:var(--faint)}
.scale h3{margin:0 0 12px;font-weight:400;line-height:1.12;font-family:var(--serif);color:var(--text)}
.ch-head>p{margin:0;font:13.5px/1.72 var(--sans);color:var(--muted)}

.ch-lanes{display:flex;align-items:flex-start;gap:clamp(9px,1.15vw,17px);
  margin:0;padding:14px 0 0;list-style:none;border-top:1px solid var(--hair-2)}
.ch-lanes>li{position:relative;padding-top:16px}
/* Each measure is a tooth on the rule and its own name is the stem. */
.ch-lanes>li::before{content:"";position:absolute;left:50%;top:0;width:1px;height:11px;
  background:var(--hair-2);transition:height .45s cubic-bezier(.22,.61,.36,1),background .3s ease;
  /* transition-delay does not inherit on its own, so the tooth would ignore the
     lane's place in the running order and all twenty-three would grow at once. */
  transition-delay:inherit}
.ch-lanes>li>span{display:block;writing-mode:vertical-rl;font-family:var(--mono);
  line-height:1;letter-spacing:.06em;color:var(--text-2)}

/* The channel names and reading statements carry the argument. Give them a
   little more room and contrast; the vertical lane names remain a quiet index
   of the underlying measurements rather than competing with the prose. */
.relations-interlude .scale h3{font-size:clamp(24px,2.4vw,32px);line-height:1.08;color:var(--text)}
.relations-interlude .ch-head>p{font-size:var(--t-small);line-height:1.78;color:var(--text-2)}
.relations-interlude .ch-lanes>li>span{font-size:var(--t-micro);letter-spacing:.08em;color:var(--faint)}

/* The same rule turned ninety degrees. Above, a horizontal rule with a tooth
   per measure; here a vertical one with a tooth per statement, so the two read
   as one instrument seen from two sides rather than a drawing followed by a
   table. The rail is the union of the rows' left borders, so it draws itself
   downward as the rows arrive. Keyed by the channels' own short names, so the
   eye can find a statement without reading all five. */
.plate-spec{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(20px,2.6vw,38px)}
.plate-spec>div{position:relative;padding:14px 0 0;border-top:1px solid var(--hair-2)}
.plate-spec dt{margin:0 0 9px;font-weight:400;font-family:var(--sans);line-height:1.4;
  letter-spacing:0;text-transform:none;color:var(--text-2)}
.plate-spec dd{margin:0;max-width:46ch;font-weight:400;font-family:var(--sans);line-height:1.75;color:var(--muted)}
.relations-interlude .plate-spec dt{font-size:clamp(20px,2vw,24px);line-height:1.25;color:var(--text)}
.relations-interlude .plate-spec dd{font-size:var(--t-body);line-height:1.78;color:var(--text-2)}

@media(max-width:1040px){
  .scale{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);
    gap:0 clamp(24px,3.4vw,44px)}
  .scale>li:nth-child(1)>.ch-head,.scale>li:nth-child(2)>.ch-head{grid-row:1}
  .scale>li:nth-child(1)>.ch-lanes,.scale>li:nth-child(2)>.ch-lanes{grid-row:2}
  .scale>li:nth-child(3)>.ch-head,.scale>li:nth-child(4)>.ch-head{grid-row:3;padding-top:36px}
  .scale>li:nth-child(3)>.ch-lanes,.scale>li:nth-child(4)>.ch-lanes{grid-row:4}
  .scale>li:nth-child(1)>*,.scale>li:nth-child(3)>*{grid-column:1}
  .scale>li:nth-child(2)>*,.scale>li:nth-child(4)>*{grid-column:2}
}
@media(max-width:640px){
  .scale{display:block}
  .scale>li{display:block;margin-top:32px}
  .scale>li:first-child{margin-top:0}
  .ch-head{padding-top:0;padding-bottom:18px}
  .ch-lanes{flex-wrap:wrap;row-gap:20px}
  .plate-spec{display:block}
  .plate-spec>div{margin-top:26px}
  .plate-spec>div:first-child{margin-top:0}
}

/* Entrance: the rule is inscribed a tooth at a time, left to right across all
   four channels, and each name drops in behind its own tooth. The grid this
   replaced held a spotlight that dimmed eight cards of nine — it cost more in
   legibility than it bought in focus, so nothing here ever rests dim. */
.plate.is-live .ch-lanes>li::before{height:0}
.plate.is-live .ch-lanes>li.seen::before{height:11px}
.plate.is-live .ch-lanes>li>span,
.plate.is-live .ch-head,
.plate.is-live .plate-k-2{opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.plate.is-live .plate-spec>div{opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.plate.is-live .ch-lanes>li.seen>span,
.plate.is-live .scale>li.seen>.ch-head,
.plate.is-live .plate-k-2.seen{opacity:1;transform:none}
.plate.is-live .plate-spec>div.seen{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .plate.is-live .ch-lanes>li::before{height:11px}
  .plate.is-live .ch-lanes>li>span,
  .plate.is-live .ch-head,
  .plate.is-live .plate-k-2,
  .plate.is-live .plate-spec>div{opacity:1;transform:none;transition:none}
}

/* --- evidence package -----------------------------------------------------
   Review is a navigation surface; this section is what a reviewer carries out
   of it. The four files sit as a rack of named artifacts, each keeping its
   own format, so the export reads as a set of records rather than a download
   button. Same editorial voice: mono for the machine-facing names, the serif
   turn on the heading, hairline structure throughout. */
.evidence{position:relative;border-top:1px solid var(--hair);background:var(--ink)}

.evidence-head h2{margin:0;
  line-height:.98;letter-spacing:-.04em;color:var(--text);max-width:13ch}
.evidence-head h2 em{display:block;font-family:var(--serif);font-style:italic;
  font-weight:400;letter-spacing:-.02em;color:var(--text-2)}
.evidence-lede{margin-top:clamp(24px,3vw,36px);max-width:52ch}
.evidence-lede p{margin:0;font:400 15px/1.75 var(--sans);color:var(--muted)}
.evidence-lede p+p{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
.evidence-lede p b{font-weight:400;color:var(--text-2)}
.evidence-lede .evidence-summary{max-width:28ch;margin:0 0 clamp(24px,3vw,34px);font:400 clamp(21px,2.1vw,30px)/1.2 var(--sans);letter-spacing:-.025em;color:var(--text)}
.evidence-lede .evidence-summary+p{margin-top:0;padding-top:0;border-top:0}

/* Keep the full package available without making its implementation details
   the first read. Native details/summary supplies the disclosure with no
   script, and the body keeps the same two-column evidence composition when
   opened. */
.evidence-detail{grid-column:1/-1;grid-row:2;margin:clamp(8px,1vw,14px) 0 0;border-top:1px solid var(--hair-2)}
.evidence-detail summary{padding:15px 0 14px;color:var(--text-2);font:400 var(--t-small)/1.4 var(--sans);letter-spacing:.02em;cursor:pointer}
.evidence-detail summary:hover{color:var(--text)}
.evidence-detail summary:focus-visible{outline:1px solid var(--silver);outline-offset:5px}
.evidence-detail[open] summary{color:var(--text)}
.evidence-detail-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(28px,3vw,44px);padding:clamp(8px,1vw,14px) 0 clamp(8px,1vw,16px)}
.evidence-inner .evidence-detail-body .evidence-report{grid-column:1/7;grid-row:1}
.evidence-inner .evidence-detail-body .evidence-files{grid-column:7/-1;grid-row:1;grid-template-columns:1fr}

/* The report is the artifact a person opens, so it is shown rather than
   listed: a real excerpt of the generated file, in the file's own voice. The
   three machine files sit beneath it as a spec list keyed by their own field
   names -- the same rail the "How we read it" block uses, because they are
   doing the same job on the same page. */
.evidence-report{margin:0;min-width:0}
.evidence-report figcaption{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:8px clamp(12px,1.4vw,20px);margin:0 0 clamp(14px,1.6vw,20px)}
.efile-role{color:var(--muted);font:400 var(--t-small)/1.5 var(--sans)}
.evidence-report pre{margin:0;padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,26px);
  background:var(--panel);border:1px solid var(--hair);overflow-x:auto;
  color:var(--text-2);font-weight:400;font-size:var(--t-small);line-height:1.85;
  font-family:var(--mono);letter-spacing:.01em;white-space:pre}
.evidence-report pre code{font:inherit;color:inherit}
.evidence-report-note{margin:clamp(16px,1.8vw,22px) 0 0;max-width:58ch;
  color:var(--muted);font:400 var(--t-small)/1.75 var(--sans)}

/* Three schemas, side by side, read the way the four channels above are read:
   a rule, a name, a count, then the field names listed down the column. They
   were one wrapped line of eleven-pixel mono running twelve items across
   1200px, which is a strip of noise rather than a structure, and the shorter
   two left holes beneath them. Listed down, the differing lengths become the
   shape: twelve columns, four fields, eight keys. */
.evidence-files{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(22px,2.8vw,44px)}
.efile{display:block;min-width:0;padding:15px 0 0;background:none;
  border:0;border-top:1px solid var(--hair-2)}
.efile-head{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:6px 14px}
.efile-name{font-weight:400;line-height:1.2;font-family:var(--mono);
  letter-spacing:-.01em;color:var(--text)}
.efile-ext{color:var(--gold)}
.efile-count{flex:none;font-family:var(--mono);letter-spacing:.06em;color:var(--faint)}
.efile-role{margin:11px 0 0;max-width:34ch;color:var(--muted);line-height:1.65}

/* deep_evidence_selection is 160px of mono on its own, so three columns stop
   working once the measure drops under about 700px. */
@media(max-width:900px){
  .evidence-files{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(30px,4vw,44px)}
}
@media(max-width:640px){
  .evidence-files{grid-template-columns:1fr;row-gap:30px}
  .efile-role{max-width:none}
}

@media(max-width:900px){
  .evidence-detail-body{grid-template-columns:1fr}
  .evidence-inner .evidence-detail-body .evidence-report,
  .evidence-inner .evidence-detail-body .evidence-files{grid-column:1/-1;grid-row:auto}
  .evidence-inner .evidence-detail-body .evidence-files{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(30px,4vw,44px)}
}
@media(max-width:640px){
  .evidence-inner .evidence-detail-body .evidence-files{grid-template-columns:1fr;row-gap:30px}
}


  .efile::before{top:14px}
}

@media(max-width:900px){
  
  .evidence-head h2{max-width:16ch}
}

/* The closing mark stands alone until a real contact route is available. */
.endcap:not(:has(.contact-copy)){height:65vh;min-height:480px;padding-top:40px}
@media(max-width:700px){.endcap:not(:has(.contact-copy)){height:65vh;min-height:420px;padding-top:20px}}