/* ==========================================================================
   RhetoricMap, survey plate

   The world: a cartographic plate. The classifier's decision rule is a plane
   (attack score across, policy score up, a threshold on each axis), so the
   product is drawn as a map of that plane. Attack and policy are two inks;
   where they overprint, "both" appears; the open corner is "neither".
   Source Serif 4 carries reading text and display. Archivo Narrow is the
   label voice, the way an atlas letters its legends.
   ========================================================================== */

:root{
  --ground:#F1EEE7;
  --surface:#F8F6F1;
  --sunk:#E8E4DA;
  --ink:#1B1D22;
  --ink-2:#464951;
  --ink-3:#62656D;
  --rule:#D3CEC2;
  --rule-2:#E0DBD0;
  --attack:#B8341C;
  --policy:#1F55A6;
  --both:#6A3A8C;
  --neither:#73767E;
  --wash-attack:rgba(184,52,28,.16);
  --wash-policy:rgba(31,85,166,.14);
  --wash-both:rgba(106,58,140,.15);
  --tint:.085;
  --blend:multiply;
  --contour:rgba(27,29,34,.075);
  --dot-halo:var(--surface);
  --shadow:0 1px 2px rgba(27,29,34,.06),0 8px 24px -8px rgba(27,29,34,.14);
  --shadow-lift:0 2px 4px rgba(27,29,34,.06),0 18px 40px -12px rgba(27,29,34,.22);
  --sel:rgba(106,58,140,.2);

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --label:"Archivo Narrow","Arial Narrow","Helvetica Neue",Arial,sans-serif;

  --t-xs:.75rem;
  --t-sm:.84rem;
  --t-ui:.92rem;
  --t-md:1.0625rem;
  --t-lg:clamp(1.15rem,1.07rem + .4vw,1.38rem);
  --t-xl:clamp(1.5rem,1.3rem + .9vw,2rem);
  --t-2xl:clamp(2rem,1.45rem + 2.4vw,3.25rem);
  --t-3xl:clamp(2.55rem,1.45rem + 4.4vw,5.1rem);

  --measure:66ch;
  --gut:clamp(1rem,4.4vw,3rem);
  --maxw:80rem;
  --r:3px;
  --r-lg:6px;
  --head-h:3.6rem;

  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --d-press:130ms;
  --d-ui:200ms;
  --d-panel:280ms;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#121418;
    --surface:#181B20;
    --sunk:#0D0F12;
    --ink:#E8E6E1;
    --ink-2:#B5B3AE;
    --ink-3:#95938E;
    --rule:#2C3037;
    --rule-2:#21252B;
    --attack:#F07A5F;
    --policy:#7FA9F0;
    --both:#B892E0;
    --neither:#8A8E96;
    --wash-attack:rgba(240,122,95,.2);
    --wash-policy:rgba(127,169,240,.19);
    --wash-both:rgba(184,146,224,.2);
    --tint:.1;
    --blend:screen;
    --contour:rgba(232,230,225,.06);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -10px rgba(0,0,0,.6);
    --shadow-lift:0 2px 4px rgba(0,0,0,.3),0 20px 44px -12px rgba(0,0,0,.7);
    --sel:rgba(184,146,224,.3);
  }
}
:root[data-theme="dark"]{
  --ground:#121418;
  --surface:#181B20;
  --sunk:#0D0F12;
  --ink:#E8E6E1;
  --ink-2:#B5B3AE;
  --ink-3:#95938E;
  --rule:#2C3037;
  --rule-2:#21252B;
  --attack:#F07A5F;
  --policy:#7FA9F0;
  --both:#B892E0;
  --neither:#8A8E96;
  --wash-attack:rgba(240,122,95,.2);
  --wash-policy:rgba(127,169,240,.19);
  --wash-both:rgba(184,146,224,.2);
  --tint:.1;
  --blend:screen;
  --contour:rgba(232,230,225,.06);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -10px rgba(0,0,0,.6);
  --shadow-lift:0 2px 4px rgba(0,0,0,.3),0 20px 44px -12px rgba(0,0,0,.7);
  --sel:rgba(184,146,224,.3);
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 1rem);color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--t-md);
  line-height:1.6;
  font-optical-sizing:auto;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.015em;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
b,strong{font-weight:600}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--sel);color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
textarea,input{caret-color:var(--attack)}
html{scrollbar-color:var(--rule) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--rule);border-radius:8px;border:3px solid var(--ground)}
::-webkit-scrollbar-track{background:transparent}
kbd{font-family:var(--label)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:.75rem;top:-4rem;z-index:100;
  background:var(--ink);color:var(--ground);
  padding:.6rem 1rem;font-family:var(--label);font-size:var(--t-sm);font-weight:500;
  border-radius:var(--r);text-decoration:none;
  transition:transform var(--d-ui) var(--ease-out);
}
.skip:focus{transform:translateY(4.75rem)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ---------------------------------------------------------------- glyph
   The quadrant glyph: the decision plane in miniature. The filled cell is
   the category, so the mark encodes position as well as colour. */
.glyph{
  --c:var(--neither);
  position:relative;display:inline-block;flex:none;
  width:.78em;height:.78em;vertical-align:-.04em;
  background:
    linear-gradient(var(--rule) 0 0) 0 0/36% 56% no-repeat,
    linear-gradient(var(--rule) 0 0) 100% 0/56% 56% no-repeat,
    linear-gradient(var(--rule) 0 0) 0 100%/36% 36% no-repeat,
    linear-gradient(var(--rule) 0 0) 100% 100%/56% 36% no-repeat;
}
.glyph::before{content:"";position:absolute;background:var(--c);border-radius:.5px}
.glyph[data-cat="policy"]{--c:var(--policy)}
.glyph[data-cat="policy"]::before{left:0;top:0;width:36%;height:56%}
.glyph[data-cat="both"]{--c:var(--both)}
.glyph[data-cat="both"]::before{right:0;top:0;width:56%;height:56%}
.glyph[data-cat="attack"]{--c:var(--attack)}
.glyph[data-cat="attack"]::before{right:0;bottom:0;width:56%;height:36%}
.glyph[data-cat="neither"]{--c:var(--neither)}
.glyph[data-cat="neither"]::before{left:0;bottom:0;width:36%;height:36%}
.glyph[data-cat="none"]::before{display:none}
.glyph-lg{width:1.15rem;height:1.15rem}

/* ---------------------------------------------------------------- buttons */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:var(--rule);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:2.75rem;padding:.55rem 1.1rem;
  font-family:var(--label);font-size:var(--t-ui);font-weight:500;letter-spacing:.005em;line-height:1.1;
  color:var(--fg);background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);
  text-decoration:none;white-space:nowrap;user-select:none;-webkit-user-select:none;
  transition:background-color var(--d-ui) ease,border-color var(--d-ui) ease,color var(--d-ui) ease,transform var(--d-press) var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn-ink{--bg:var(--ink);--fg:var(--ground);--bd:var(--ink)}
.btn-line{--bg:transparent}
.btn-sm{min-height:2.25rem;padding:.4rem .8rem;font-size:var(--t-sm)}
@media (hover:hover) and (pointer:fine){
  .btn-ink:hover{--bg:color-mix(in srgb,var(--ink) 86%,var(--ground))}
  .btn-line:hover{--bd:var(--ink-3);--bg:color-mix(in srgb,var(--sunk) 60%,transparent)}
}
.btn-arrow{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--d-panel) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover .btn-arrow{transform:translateY(2px)}}
.kbd{
  display:inline-flex;align-items:center;gap:.15rem;
  font-size:.7rem;font-weight:500;line-height:1;
  padding:.22rem .34rem;border-radius:2px;
  border:1px solid color-mix(in srgb,currentColor 35%,transparent);
  opacity:.75;
}
@media (pointer:coarse){.kbd{display:none}}
.icon-btn{
  display:inline-grid;place-items:center;flex:none;
  width:2.5rem;height:2.5rem;padding:0;
  background:transparent;border:1px solid transparent;border-radius:50%;color:var(--ink-2);
  transition:background-color var(--d-ui) ease,color var(--d-ui) ease,border-color var(--d-ui) ease,transform var(--d-press) var(--ease-out);
}
.icon-btn svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{color:var(--ink);background:var(--sunk)}}
.link-btn{
  background:none;border:0;padding:.15rem 0;
  font-family:var(--label);font-size:var(--t-sm);font-weight:500;color:var(--ink-2);
  text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.25em;
  transition:color var(--d-ui) ease,text-decoration-color var(--d-ui) ease;
}
@media (hover:hover) and (pointer:fine){.link-btn:hover{color:var(--ink);text-decoration-color:currentColor}}

/* ---------------------------------------------------------------- masthead */
.masthead{
  position:sticky;top:0;z-index:50;
  padding-top:env(safe-area-inset-top);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color var(--d-panel) ease,border-color var(--d-panel) ease;
}
.masthead.is-stuck{
  background:color-mix(in srgb,var(--ground) 84%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--rule);
}
@supports not (background:color-mix(in srgb,red 50%,blue)){.masthead.is-stuck{background:var(--ground)}}
.masthead-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  height:var(--head-h);display:flex;align-items:center;gap:.75rem;
}
.wordmark{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--serif);font-weight:600;font-size:1.22rem;letter-spacing:-.022em;
  font-variation-settings:"opsz" 36;
  text-decoration:none;white-space:nowrap;
}
.mark{width:1.15rem;height:1.15rem;flex:none;overflow:visible}
.mk-p{fill:var(--policy)}.mk-b{fill:var(--both)}.mk-a{fill:var(--attack)}.mk-n{fill:var(--neither)}
.mark rect{transition:transform 600ms var(--ease-out);transform-box:fill-box}
@media (hover:hover) and (pointer:fine){
  .wordmark:hover .mk-p{transform:translate(-1px,-1px)}
  .wordmark:hover .mk-b{transform:translate(1px,-1px)}
  .wordmark:hover .mk-a{transform:translate(1px,1px)}
}
.nav{position:relative;margin-left:auto;display:flex;align-items:center;gap:.1rem}
.nav a{
  position:relative;
  font-family:var(--label);font-size:var(--t-ui);font-weight:500;
  color:var(--ink-2);text-decoration:none;
  padding:.5rem .7rem;border-radius:var(--r);
  transition:color var(--d-ui) ease;
}
.nav a[aria-current="true"]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--ink)}}
.nav-ink{
  position:absolute;left:0;bottom:.15rem;height:2px;width:100px;
  background:var(--ink);border-radius:2px;
  transform-origin:0 50%;transform:translateX(0) scaleX(0);opacity:0;
  transition:transform 420ms var(--ease-out),opacity var(--d-ui) ease;
  pointer-events:none;
}
.nav-more{display:none}
@media (min-width:52rem){.nav-more{display:inline-block}}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative;isolation:isolate;
  margin-top:calc(-1 * var(--head-h) - env(safe-area-inset-top));
  padding:calc(var(--head-h) + env(safe-area-inset-top) + clamp(2rem,6vw,5rem)) 0 clamp(3rem,7vw,6rem);
  overflow:hidden;
}
.field{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  -webkit-mask-image:radial-gradient(120% 90% at 30% 40%,#000 30%,transparent 80%);
  mask-image:radial-gradient(120% 90% at 30% 40%,#000 30%,transparent 80%);
  opacity:0;transition:opacity 1.6s ease;
}
.field.is-on{opacity:1}
.hero-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:64rem){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(3rem,5vw,5.5rem)}}
.hero h1{
  font-size:var(--t-3xl);font-weight:450;line-height:1;letter-spacing:-.032em;
  font-variation-settings:"opsz" 60;
  max-width:13ch;margin-bottom:1.5rem;
}
.hero .sub{font-size:var(--t-lg);line-height:1.5;color:var(--ink-2);max-width:44ch;margin-bottom:2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.25rem}
.key{
  list-style:none;margin:0;padding:1.1rem 0 0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(2,max-content);gap:.55rem 1.75rem;
  font-family:var(--label);font-size:var(--t-sm);color:var(--ink-2);
}
.key li{display:flex;align-items:center;gap:.55rem}
@media (min-width:36rem){.key{grid-template-columns:repeat(4,max-content)}}

/* headline arrival: words rise out of a soft blur, once */
.js .reveal-title .w{display:inline-block;white-space:pre}
@media (prefers-reduced-motion:no-preference){
  .js .reveal-title .w{opacity:0;transform:translateY(.28em);filter:blur(6px);
    transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out),filter 900ms var(--ease-out);
    transition-delay:calc(var(--i) * 34ms + 80ms)}
  .js .reveal-title.is-in .w{opacity:1;transform:none;filter:blur(0)}
  .js .hero .sub,.js .hero-actions,.js .key{opacity:0;transform:translateY(10px);transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out)}
  .js .hero .sub{transition-delay:380ms}
  .js .hero-actions{transition-delay:470ms}
  .js .key{transition-delay:560ms}
  .js .hero.is-in .sub,.js .hero.is-in .hero-actions,.js .hero.is-in .key{opacity:1;transform:none}
  .js .specimen{opacity:0;transform:translateY(14px) scale(.985);transition:opacity 1s var(--ease-out) 260ms,transform 1s var(--ease-out) 260ms}
  .js .hero.is-in .specimen{opacity:1;transform:none}
}

/* specimen: the live walkthrough */
.specimen{margin:0}
.specimen-plate{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;
}
.specimen .map-host{padding:1rem 1rem .25rem;border-bottom:1px solid var(--rule-2)}
.reader{padding:1rem 1.15rem 1rem;min-height:13.5rem;display:flex;flex-direction:column}
.reader-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.45rem}
.reader-speaker{font-family:var(--label);font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.reader-count{font-family:var(--label);font-size:var(--t-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.reader-text{font-size:1.06rem;line-height:1.5;min-height:3em}
.reader-text mark{background:none;color:inherit;text-decoration:underline 2px transparent;text-underline-offset:.24em;transition:text-decoration-color 400ms ease,color 400ms ease}
.reader-text mark.on{color:var(--ink)}
.reader-text mark.on[data-side="attack"]{text-decoration-color:var(--attack)}
.reader-text mark.on[data-side="constructive"]{text-decoration-color:var(--policy)}
.reader-text.swap{animation:readerIn 420ms var(--ease-out)}
@keyframes readerIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.reader-cues{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .4rem;min-height:1.6rem}
.reader-foot{margin-top:auto;padding-top:.75rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-top:1px solid var(--rule-2)}
.reader-verdict{display:flex;align-items:center;gap:.5rem;font-family:var(--label);font-size:var(--t-sm);font-weight:500;min-height:1.5rem;transition:opacity var(--d-ui) ease}
.reader-verdict.is-pending{opacity:.45}
.reader-ctrl{display:flex;gap:.1rem;margin-right:-.4rem}
.reader-ctrl .i-play{display:none;fill:currentColor;stroke:none}
.reader-ctrl [aria-pressed="true"] .i-play{display:block}
.reader-ctrl [aria-pressed="true"] .i-pause{display:none}
.caption{font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3);line-height:1.5;margin-top:.85rem;max-width:56ch}

/* cue chips (hero reader, details, method) */
.cue{
  --c:var(--ink-3);
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--label);font-size:var(--t-xs);font-weight:500;line-height:1.2;
  color:var(--ink-2);
  padding:.22rem .5rem .24rem .4rem;border-radius:2px;
  background:color-mix(in srgb,var(--c) 10%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent);
  white-space:nowrap;
}
.cue::before{content:"";width:.42rem;height:.42rem;border-radius:1px;background:var(--c);flex:none}
.cue b{font-weight:600;color:var(--c);font-variant-numeric:tabular-nums}
.cue[data-side="attack"]{--c:var(--attack)}
.cue[data-side="constructive"]{--c:var(--policy)}
.cue.is-new{animation:cueIn 380ms var(--ease-out) both}
@keyframes cueIn{from{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- the map */
.map-host{position:relative}
.map{display:block;width:100%;height:auto;overflow:visible;font-family:var(--label)}
.map .q{opacity:var(--tint);mix-blend-mode:var(--blend)}
.map .q-attack{fill:var(--attack)}
.map .q-policy{fill:var(--policy)}
.map .frame{fill:none;stroke:var(--rule);stroke-width:1}
.map .grid line{stroke:var(--rule-2);stroke-width:1}
.map .thr{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.map .tick{fill:var(--ink-3);font-size:10px;font-variant-numeric:tabular-nums}
.map .thr-label{fill:var(--ink-2);font-size:10px;font-weight:600}
.map .axis-title{fill:var(--ink-3);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.map .ql{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.map .ql-attack{fill:var(--attack)}.map .ql-policy{fill:var(--policy)}.map .ql-both{fill:var(--both)}.map .ql-neither{fill:var(--ink-3)}
.map .dots{isolation:isolate}
.map .dot{
  stroke:var(--dot-halo);stroke-width:1.25;
  transform-box:view-box;
  transition:transform 900ms var(--ease-out),opacity 300ms ease;
}
.map .dot[data-cat="attack"]{fill:var(--attack)}
.map .dot[data-cat="policy"]{fill:var(--policy)}
.map .dot[data-cat="both"]{fill:var(--both)}
.map .dot[data-cat="neither"]{fill:var(--neither)}
.map .dot.is-dim{opacity:.13}
.map .dot.is-faint{opacity:.28}
.map.is-interactive .dot{cursor:pointer}
.map .halo{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:0;transform-box:view-box;transition:transform 600ms var(--ease-out),opacity var(--d-ui) ease}
.map .halo.is-on{opacity:1}
.map .probe-dot{fill:var(--ink);stroke:var(--dot-halo);stroke-width:2;transition:transform 520ms var(--ease-out),fill var(--d-ui) ease}
.map .trail{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3;opacity:.7}
.map .empty-label{fill:var(--ink-3);font-size:11px}

/* ---------------------------------------------------------------- sections */
.band{padding:clamp(4rem,9vw,7.5rem) 0;border-top:1px solid var(--rule)}
.sec-head{display:grid;gap:1.1rem 4rem;margin-bottom:clamp(2rem,4.5vw,3.5rem)}
@media (min-width:64rem){.sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:end}}
h2{font-size:var(--t-2xl);font-weight:450;letter-spacing:-.028em;line-height:1.02;font-variation-settings:"opsz" 60;max-width:14ch}
.lede{color:var(--ink-2);max-width:58ch;font-size:1.08rem;line-height:1.6}
.lede b{color:var(--ink)}
.h-small{font-family:var(--label);font-size:var(--t-ui);font-weight:600;letter-spacing:.01em;line-height:1.3}
.flabel,label{display:block;font-family:var(--label);font-size:var(--t-sm);font-weight:600;color:var(--ink);margin-bottom:.45rem;letter-spacing:.01em}
.hint{font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3);line-height:1.5;margin-top:.5rem;max-width:58ch}
.hint b{color:var(--ink-2);font-weight:600}

/* ---------------------------------------------------------------- the bench */
.bench{display:grid;gap:clamp(1.75rem,3vw,2.5rem);grid-template-columns:minmax(0,1fr);align-items:start}
.desk{order:1}
.rail{order:2}
.summary{order:3}
.reading{order:4}
@media (min-width:64rem){
  .bench{grid-template-columns:minmax(0,1fr) minmax(21rem,27rem);column-gap:clamp(2.5rem,4vw,4rem);row-gap:2.5rem}
  .desk,.summary,.reading{grid-column:1}
  .desk{grid-row:1}.summary{grid-row:2}.reading{grid-row:3}
  .rail{grid-column:2;grid-row:1 / span 3;align-self:stretch}
  .rail-inner{position:sticky;top:calc(var(--head-h) + 1.25rem)}
}

/* intake */
.intake-shell{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--d-panel) var(--ease-out)}
.intake-shell > .intake{min-height:0;overflow:hidden}
.intake-shell.is-collapsed{grid-template-rows:0fr}
.intake-shell.is-collapsed > .intake{visibility:hidden;transition:visibility 0s var(--d-panel)}
.intake{display:grid;gap:1.6rem;padding:2px}
.sample-row{display:flex;flex-wrap:wrap;gap:.5rem}
.sample{
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:2.6rem;padding:.45rem .9rem .45rem .75rem;
  font-family:var(--label);font-size:var(--t-ui);font-weight:500;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  transition:border-color var(--d-ui) ease,background-color var(--d-ui) ease,transform var(--d-press) var(--ease-out),box-shadow var(--d-ui) ease;
}
.sample:active{transform:scale(.97)}
.sample[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media (hover:hover) and (pointer:fine){.sample:hover{border-color:var(--ink-3)}}
.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.label-row label{margin-bottom:.45rem}
.ta-wrap{position:relative}
textarea,input[type=text]{
  display:block;width:100%;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r);
  padding:.8rem .9rem;
  transition:border-color var(--d-ui) ease,box-shadow var(--d-ui) ease;
}
textarea{min-height:15rem;resize:vertical;font-family:var(--serif);font-size:1rem;line-height:1.65}
input[type=text]{font-family:var(--label);font-size:1rem;min-height:2.85rem}
textarea::placeholder,input::placeholder{color:var(--ink-3);opacity:1}
textarea:focus-visible,input[type=text]:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
textarea[aria-invalid="true"]{border-color:var(--attack)}
.drop-veil{
  position:absolute;inset:0;display:grid;place-items:center;
  border:1.5px dashed var(--ink-3);border-radius:var(--r);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  font-family:var(--label);font-size:var(--t-ui);font-weight:500;color:var(--ink-2);
  opacity:0;pointer-events:none;transition:opacity var(--d-ui) ease;
}
.ta-wrap.is-drop .drop-veil{opacity:1}
.parse{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .4rem;
  margin-top:.75rem;min-height:1.75rem;
  font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3);
}
.parse-chip{
  display:inline-flex;align-items:baseline;gap:.35rem;
  padding:.18rem .5rem;border-radius:2px;background:var(--sunk);color:var(--ink-2);
  animation:cueIn 260ms var(--ease-out) both;
}
.parse-chip small{font-size:var(--t-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.parse-chip.is-mod{background:transparent;box-shadow:inset 0 0 0 1px var(--rule);font-style:italic}
.parse-warn{color:var(--attack);font-weight:500}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.undo{font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3);margin-left:.4rem;animation:cueIn 260ms var(--ease-out) both}

/* source line: the intake, folded */
.source{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;
  padding:.85rem 1rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
}
.source:not([hidden]) + .intake-shell:not(.is-collapsed){margin-top:1rem}
.source-meta{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.source-title{font-family:var(--label);font-size:var(--t-ui);font-weight:600}
.source-sub{font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3)}

/* plate: the bench map */
.plate{
  margin:0;position:relative;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:1.1rem 1.1rem .5rem;
  transition:box-shadow var(--d-panel) ease;
}
.bench[data-state="results"] .plate{box-shadow:var(--shadow)}
.plate-msg{
  font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3);line-height:1.5;
  padding:.75rem .1rem .6rem;border-top:1px solid var(--rule-2);margin-top:.35rem;
}
.plate-msg strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem}
.bench[data-state="error"] .plate-msg strong{color:var(--attack)}
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.filter{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:2.35rem;padding:.3rem .7rem .3rem .6rem;
  font-family:var(--label);font-size:var(--t-sm);font-weight:500;color:var(--ink-2);
  background:transparent;border:1px solid var(--rule);border-radius:999px;
  transition:border-color var(--d-ui) ease,background-color var(--d-ui) ease,color var(--d-ui) ease,opacity var(--d-ui) ease,transform var(--d-press) var(--ease-out);
}
.filter:active{transform:scale(.96)}
.filter b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.filter[aria-pressed="true"] b{color:var(--ground)}
.filter[aria-pressed="true"] .glyph{background:
    linear-gradient(color-mix(in srgb,var(--ground) 30%,transparent) 0 0) 0 0/36% 56% no-repeat,
    linear-gradient(color-mix(in srgb,var(--ground) 30%,transparent) 0 0) 100% 0/56% 56% no-repeat,
    linear-gradient(color-mix(in srgb,var(--ground) 30%,transparent) 0 0) 0 100%/36% 36% no-repeat,
    linear-gradient(color-mix(in srgb,var(--ground) 30%,transparent) 0 0) 100% 100%/56% 36% no-repeat}
.filter:disabled{opacity:.45;cursor:default}
@media (hover:hover) and (pointer:fine){.filter:not(:disabled):not([aria-pressed="true"]):hover{border-color:var(--ink-3);color:var(--ink)}}
.plate-note{font-family:var(--label);font-size:var(--t-xs);color:var(--ink-3);margin-top:.7rem;line-height:1.45}

/* summary */
.ledger{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
}
@media (min-width:40rem){.ledger{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ledger > div{padding:1rem .25rem 1.05rem 0}
.ledger > div + div{padding-left:1rem;border-left:1px solid var(--rule-2)}
@media (max-width:39.99rem){
  .ledger > div:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--rule-2)}
  .ledger > div:nth-child(4){border-top:1px solid var(--rule-2)}
}
.ledger dt{font-family:var(--label);font-size:var(--t-xs);color:var(--ink-3);line-height:1.35;margin-top:.35rem}
.ledger dd{
  margin:0;order:-1;
  font-family:var(--serif);font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem);font-weight:450;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;font-variation-settings:"opsz" 60;
}
.ledger > div{display:flex;flex-direction:column}
.ledger .is-attack dd{color:var(--attack)}
.ledger .is-policy dd{color:var(--policy)}
.pctnote{font-family:var(--label);font-size:var(--t-xs);color:var(--ink-3);margin-top:.55rem;line-height:1.45}

.speakers{margin-top:2rem;display:grid;gap:1.25rem}
.spk{display:grid;gap:.45rem}
.spk-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.spk-name{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--label);font-size:var(--t-ui);font-weight:600;letter-spacing:.01em;
  background:none;border:0;padding:.2rem 0;color:var(--ink);text-align:left;
}
.spk-name::after{
  content:"";width:.5rem;height:.5rem;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--ink-3);
  transition:background-color var(--d-ui) ease,box-shadow var(--d-ui) ease;
}
.spk-name[aria-pressed="true"]::after{background:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (hover:hover) and (pointer:fine){.spk-name:hover{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.25em}}
.spk-wt{font-family:var(--label);font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.bar{display:flex;gap:2px;height:.85rem;border-radius:2px;overflow:hidden;background:var(--sunk)}
.seg{flex:none;height:100%}
.seg.s-attack{background:var(--attack)}.seg.s-policy{background:var(--policy)}.seg.s-both{background:var(--both)}.seg.s-neither{background:var(--neither)}
.bar-labels{position:relative;height:1rem;font-family:var(--label);font-size:var(--t-xs);font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bar-labels span{position:absolute;top:0;white-space:nowrap}
.spk.is-dim{opacity:.4}
.spk{transition:opacity var(--d-ui) ease}
@media (prefers-reduced-motion:no-preference){
  .bar{clip-path:inset(0 100% 0 0);transition:clip-path 900ms var(--ease-out)}
  .bar.is-drawn{clip-path:inset(0 0 0 0)}
}
.legendline{font-family:var(--label);font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;margin-top:1.4rem;max-width:62ch}

/* ---------------------------------------------------------------- coded transcript */
.reading-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1.5rem;padding-bottom:.85rem;border-bottom:1px solid var(--ink)}
.reading-note{font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3)}
.blk{padding:1.5rem 0 1.25rem;border-bottom:1px solid var(--rule-2)}
.blk-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1rem;margin-bottom:.7rem}
.blk-name{font-family:var(--label);font-size:var(--t-sm);font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.blk-count{font-family:var(--label);font-size:var(--t-xs);color:var(--ink-3)}
.blk.uncoded .blk-name{color:var(--ink-3)}
.notcoded{font-family:var(--label);font-size:var(--t-xs);color:var(--ink-3);padding:.05rem .45rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule)}
.lines{list-style:none;margin:0;padding:0}
.line{position:relative;transition:opacity var(--d-ui) ease}
.line.is-dim{opacity:.3}
.line-btn{
  display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.1rem .75rem;align-items:start;
  width:100%;margin:0;padding:.55rem .6rem .6rem;
  background:transparent;border:0;border-radius:var(--r);text-align:left;color:inherit;
  transition:background-color var(--d-ui) ease;
}
.line-btn .glyph{margin-top:.42rem}
@media (hover:hover) and (pointer:fine){.line-btn:hover,.line.is-hot .line-btn{background:color-mix(in srgb,var(--sunk) 70%,transparent)}}
.line-btn[aria-expanded="true"]{background:var(--sunk)}
.line-text{font-size:var(--t-md);line-height:1.68;max-width:64ch}
.ink{
  --w:transparent;
  background-image:linear-gradient(transparent 42%,var(--w) 42%,var(--w) 92%,transparent 92%);
  background-repeat:no-repeat;background-size:100% 100%;
  -webkit-box-decoration-break:slice;box-decoration-break:slice;
}
.line[data-cat="attack"] .ink{--w:var(--wash-attack)}
.line[data-cat="policy"] .ink{--w:var(--wash-policy)}
.line[data-cat="both"] .ink{--w:var(--wash-both)}
.line[data-cat="neither"] .line-text{color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .js .ink{background-size:0% 100%;transition:background-size 650ms var(--ease-out)}
  .js .line.is-inked .ink{background-size:100% 100%}
}
.blk.uncoded .line-text{font-style:italic;color:var(--ink-3)}
.blk.uncoded .line-row{display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.75rem;padding:.4rem .6rem}
.tags{grid-column:2;display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin-top:.2rem;font-family:var(--label);font-size:var(--t-xs);font-weight:500;line-height:1.35}
.tag{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.tag::before{content:"";width:.36rem;height:.36rem;border-radius:1px;background:currentColor;flex:none}
.tag[data-side="attack"]{color:var(--attack)}
.tag[data-side="constructive"]{color:var(--policy)}
.tag-none{color:var(--ink-3);font-style:italic}
.tag-none::before{background:none;box-shadow:inset 0 0 0 1px currentColor}

/* sentence detail: the working */
.detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-panel) var(--ease-out)}
.detail > div{min-height:0;overflow:hidden}
.line-btn[aria-expanded="true"] + .detail{grid-template-rows:1fr}
.detail-in{
  margin:.1rem .6rem .9rem calc(1.1rem + .75rem + .6rem);
  padding:1rem 0 .2rem;border-top:1px dashed var(--rule);
  display:grid;gap:1rem;
}
.marked{font-size:.98rem;line-height:1.7;color:var(--ink-2)}
.marked mark{background:none;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}
.marked mark[data-side="attack"]{text-decoration-color:var(--attack)}
.marked mark[data-side="constructive"]{text-decoration-color:var(--policy)}
.meters{display:grid;gap:.75rem}
@media (min-width:40rem){.meters{grid-template-columns:1fr 1fr;gap:1.5rem}}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--label);font-size:var(--t-xs);color:var(--ink-3);margin-bottom:.35rem}
.meter-head b{font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.meter{position:relative;height:.45rem;border-radius:2px;background:var(--sunk)}
.meter i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--c)}
.meter .thr-mark{position:absolute;top:-.25rem;bottom:-.25rem;width:1px;background:var(--ink)}
.meter-side[data-side="attack"]{--c:var(--attack)}
.meter-side[data-side="constructive"]{--c:var(--policy)}
.cue-list{list-style:none;margin:.55rem 0 0;padding:0;display:grid;gap:.3rem;font-family:var(--label);font-size:var(--t-sm);color:var(--ink-2)}
.cue-list li{display:flex;justify-content:space-between;gap:1rem}
.cue-list .w{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.cue-list .none{color:var(--ink-3);font-style:italic}
.verdict{font-family:var(--label);font-size:var(--t-sm);color:var(--ink-2);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.verdict b{color:var(--ink);font-weight:600}
.line.is-flash .line-btn{animation:flash 1.4s var(--ease-out)}
@keyframes flash{0%,30%{box-shadow:inset 0 0 0 1.5px var(--ink)}100%{box-shadow:inset 0 0 0 1.5px transparent}}

/* tooltip */
.tip{
  position:fixed;left:0;top:0;z-index:80;max-width:20rem;pointer-events:none;
  padding:.65rem .8rem .7rem;border-radius:var(--r);
  background:var(--ink);color:var(--ground);box-shadow:var(--shadow-lift);
  font-family:var(--label);font-size:var(--t-sm);line-height:1.45;
  opacity:0;transform:translateY(4px) scale(.98);transform-origin:var(--to,50% 100%);
  transition:opacity 150ms ease,transform 180ms var(--ease-out);
}
.tip.is-on{opacity:1;transform:none}
.tip .tip-who{display:block;font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:.2rem}
.tip .tip-text{display:block;font-family:var(--serif);font-size:.95rem;line-height:1.4}
.tip .tip-score{display:block;margin-top:.4rem;font-size:var(--t-xs);opacity:.8;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- research */
.findings{display:grid;border-top:1px solid var(--ink)}
@media (min-width:52rem){.findings{grid-template-columns:1fr 1fr}}
.finding{display:grid;gap:1rem;padding:2rem 0 2.25rem;border-bottom:1px solid var(--rule)}
@media (min-width:52rem){
  .finding:nth-child(odd){padding-right:clamp(1.5rem,3.5vw,3.5rem);border-right:1px solid var(--rule)}
  .finding:nth-child(even){padding-left:clamp(1.5rem,3.5vw,3.5rem)}
}
.fig-mark{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.85rem;row-gap:.35rem}
.fig-num{
  font-family:var(--serif);font-size:clamp(2.2rem,1.6rem + 2.2vw,3.4rem);font-weight:450;line-height:1;
  letter-spacing:-.035em;font-variant-numeric:lining-nums;font-variation-settings:"opsz" 60;
}
.fig-mark small{grid-column:2;font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3);line-height:1.35}
.finding-text{max-width:52ch;color:var(--ink-2)}
.closing{
  margin:clamp(3rem,6vw,4.5rem) 0 0;padding:0;max-width:30ch;
  font-size:clamp(1.5rem,1.2rem + 1.3vw,2.25rem);font-weight:400;line-height:1.28;letter-spacing:-.018em;
  font-variation-settings:"opsz" 48;text-wrap:balance;
}
@media (min-width:64rem){.closing{margin-left:calc((100% - 4rem) * .465 + 4rem)}}

/* ---------------------------------------------------------------- method */
.sides{display:grid;gap:3rem}
@media (min-width:58rem){.sides{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem)}}
.side-head{display:flex;align-items:center;gap:.65rem;padding-bottom:.85rem;border-bottom:1px solid var(--ink)}
.side-head h3{font-size:var(--t-xl);letter-spacing:-.02em;font-variation-settings:"opsz" 48}
.side-blurb{font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3);margin-top:.7rem;max-width:46ch}
.rules{list-style:none;margin:.6rem 0 0;padding:0}
.rule{display:grid;grid-template-columns:minmax(0,1fr) 5.5rem;gap:.15rem 1.25rem;padding:.95rem 0;border-bottom:1px solid var(--rule-2)}
.rule-name{font-family:var(--label);font-size:var(--t-ui);font-weight:600;color:var(--c)}
.side[data-side="attack"]{--c:var(--attack)}
.side[data-side="policy"]{--c:var(--policy)}
.rule-desc{grid-column:1;font-size:.98rem;line-height:1.5}
.rule-ex{grid-column:1;font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3);line-height:1.45}
.rule-ex i{font-style:normal;color:var(--ink-2)}
.rule-w{grid-column:2;grid-row:1 / span 3;align-self:start;padding-top:.2rem;display:grid;gap:.4rem}
.rule-w span{font-family:var(--label);font-size:var(--t-xs);color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
.rule-w span b{color:var(--ink);font-weight:600;font-size:var(--t-sm)}
.wbar{height:.32rem;background:var(--sunk);border-radius:2px;overflow:hidden}
.wbar i{display:block;height:100%;background:var(--c);transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
  .js .wbar i{transform:scaleX(0);transition:transform 800ms var(--ease-out);transition-delay:calc(var(--i) * 50ms)}
  .js .side.is-in .wbar i{transform:scaleX(var(--s))}
}
.js .side .wbar i{transform:scaleX(var(--s))}
@media (prefers-reduced-motion:no-preference){.js .side:not(.is-in) .wbar i{transform:scaleX(0)}}

.decision{display:grid;gap:2rem;margin-top:clamp(3rem,6vw,4.5rem)}
@media (min-width:58rem){.decision{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start}}
.decide h3{margin-bottom:.9rem}
.decide ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.decide li{display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.75rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--rule-2);font-family:var(--label);font-size:var(--t-ui);color:var(--ink-2)}
.decide li .glyph{align-self:center}
.decide code{font-family:var(--label);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.decide .out{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--ink);margin-top:.1rem}
.decide-note{font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3);margin-top:.9rem;max-width:46ch}
.probe{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--shadow)}
.probe .hint{margin:.1rem 0 .85rem}
.probe textarea{min-height:0;font-size:1.02rem}
.probe-out{display:grid;gap:1rem;margin-top:1rem;align-items:start}
@media (min-width:36rem){.probe-out{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.probe-read{display:grid;gap:.7rem;align-content:start}
.probe-read .verdict{font-size:var(--t-ui)}
.probe-cues{display:flex;flex-wrap:wrap;gap:.35rem}

.namelist{margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.5rem;border-top:1px solid var(--rule);display:grid;gap:1.25rem}
@media (min-width:58rem){.namelist{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,5vw,4.5rem)}}
.namelist p{font-family:var(--label);font-size:var(--t-ui);line-height:1.55;color:var(--ink-2)}
.namelist b{color:var(--ink)}
.namelist ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem;align-content:start}
.namelist li{font-family:var(--label);font-size:var(--t-sm);color:var(--ink-2);padding:.12rem .5rem;border-radius:2px;background:var(--sunk)}
.notes{margin-top:2.5rem;display:grid;gap:1rem 4.5rem}
@media (min-width:58rem){.notes{grid-template-columns:1fr 1fr}}
.notes p{max-width:var(--measure);color:var(--ink-2)}
.notes b{color:var(--ink)}

/* ---------------------------------------------------------------- limits */
.limits{border-top:1px solid var(--ink)}
.limit{display:grid;gap:.5rem 4rem;padding:1.6rem 0;border-bottom:1px solid var(--rule)}
@media (min-width:52rem){.limit{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.limit h3{font-size:var(--t-lg);font-weight:500;line-height:1.3;letter-spacing:-.012em;max-width:26ch}
.limit p{color:var(--ink-2);max-width:60ch}

/* ---------------------------------------------------------------- next: a route */
.route{list-style:none;margin:0;padding:0;counter-reset:stop;display:grid;gap:0}
@media (min-width:58rem){.route{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}}
.stop{counter-increment:stop;position:relative;padding:0 0 2.25rem 2.75rem}
.stop::before{
  content:counter(stop);position:absolute;left:0;top:0;
  width:1.9rem;height:1.9rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--label);font-size:var(--t-sm);font-weight:600;
  background:var(--ground);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);z-index:1;
}
.stop:first-child::before{background:var(--ink);color:var(--ground)}
.stop::after{content:"";position:absolute;left:.95rem;top:1.9rem;bottom:0;width:0;border-left:1.5px dashed var(--rule)}
.stop:last-child::after{display:none}
@media (min-width:58rem){
  .stop{padding:3.25rem 0 0}
  .stop::after{left:2.4rem;right:-2rem;top:.95rem;bottom:auto;width:auto;height:0;border-left:0;border-top:1.5px dashed var(--rule)}
}
.stop h3{font-size:var(--t-lg);font-weight:500;line-height:1.25;letter-spacing:-.012em;margin-bottom:.55rem;padding-top:.15rem}
.stop p{color:var(--ink-2);font-size:1rem;max-width:44ch}

/* ---------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--rule);padding:3rem 0 calc(3rem + env(safe-area-inset-bottom))}
.foot-grid{display:grid;gap:1rem;align-items:center}
@media (min-width:52rem){.foot-grid{grid-template-columns:auto 1fr auto;gap:2.5rem}}
.foot-note{font-family:var(--label);font-size:var(--t-sm);color:var(--ink-3)}
.sig{font-family:var(--label);font-size:var(--t-sm);color:var(--ink-2);font-weight:500}

/* ---------------------------------------------------------------- reveal on scroll
   Used once per section header, never on data. */
@media (prefers-reduced-motion:no-preference){
  .js .sec-head{opacity:0;transform:translateY(16px);transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out)}
  .js .sec-head.is-in{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- theme switch */
.theme-btn .sun{display:none}
.theme-btn[aria-pressed="true"] .sun{display:inline}
.theme-btn[aria-pressed="true"] .moon{display:none}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ---------------------------------------------------------------- mobile */
@media (max-width:40rem){
  :root{--head-h:3.35rem}
  .wordmark{font-size:1.1rem}
  .nav a{padding:.5rem .55rem}
  .hero h1{max-width:none}
  .reader{min-height:15rem}
  .line-btn{padding:.55rem .35rem}
  .detail-in{margin-left:calc(1.1rem + .75rem + .35rem);margin-right:.35rem}
  .rule{grid-template-columns:minmax(0,1fr) 4.5rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
  .map .dot,.map .halo,.map .probe-dot{transition:opacity 200ms ease}
  .intake-shell,.detail{transition:none}
}
@media (forced-colors:active){
  .glyph::before,.seg,.map .dot{forced-color-adjust:none}
}