/* ---------------------------------------------------------------
   Design E: Figures

   The site as a scientific paper whose figures move. White page,
   STIX Two Text (the typeface made for scientific publishing),
   numbered sections, and figures drawn in the Okabe-Ito palette,
   which stays distinguishable under every common colour-vision
   deficiency. Meaning never rides on colour alone: every coloured
   mark also has a position or a label.

   Palette:
     paper #ffffff   ink #000000   grey #555a61   rule #d7dade
     blue #0072b2  orange #e69f00  green #009e73  vermilion #d55e00
     purple #cc79a7

   Type: STIX Two Text for reading. IBM Plex Sans Condensed for
   everything a figure says: labels, captions, axes.

   Motion budget, all telling the firm's story:
     big     Figure 1 (home): thirty-six rules leave the old system and
             sort into keep, change, retire and not sure (on load)
     big     Figure 2 (method): the 99% test, 91 flagged and 90 false
             (scroll, choreography in story.css)
     big     Figure 3 (products): five reviewers start where agreement
             would put them, then slide apart to their real scores
             (on load)
     quiet   the ladder's readiness bars fill as you reach them

   Until 2026-10-13 the home page also carried "the paper has to line
   up first", a scroll story of six files sorting into one record. It
   retired with the decision-science home page; it is in git history.
   --------------------------------------------------------------- */

@font-face{
  font-family:"STIX Two Text";
  src:url(fonts/stix-two-text/stix-two-text-latin-wght-normal.woff2) format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"STIX Two Text";
  src:url(fonts/stix-two-text/stix-two-text-latin-wght-italic.woff2) format("woff2-variations");
  font-weight:400 700; font-style:italic; font-display:swap;
}
@font-face{font-family:"IBM Plex Sans Condensed"; src:url(fonts/ibm-plex-sans-condensed/ibm-plex-sans-condensed-latin-500-normal.woff2) format("woff2"); font-weight:500; font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed"; src:url(fonts/ibm-plex-sans-condensed/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2"); font-weight:600; font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed"; src:url(fonts/ibm-plex-sans-condensed/ibm-plex-sans-condensed-latin-700-normal.woff2) format("woff2"); font-weight:700; font-display:swap}

:root{
  --paper:#ffffff;
  --ink:#000000;
  --grey:#555a61;
  --rule:#d7dade;
  --faint:#f3f4f5;
  --blue:#0072b2;
  --orange:#e69f00;
  --green:#009e73;
  --vermilion:#d55e00;
  --purple:#cc79a7;
  --serif:"STIX Two Text","Cambria","Georgia",serif;
  --label:"IBM Plex Sans Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --edge:clamp(1rem,4vw,3rem);
  --field-off:#e6e8eb;
  --br-off:#f0f1f3;
  --br-flag:#d55e00;
  --br-false:#d3d6da;
  --br-hit:#0072b2;
  --story-top:9vh;
  --story-h:76vh;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:1.14rem; line-height:1.62;
  font-variant-numeric:lining-nums proportional-nums;
  counter-reset:sec;
}
h1,h2,h3{margin:0; font-weight:700; line-height:1.15}
p{margin:0}
ul,ol{list-style:none; margin:0; padding:0}

a{color:var(--blue); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:.5rem 1rem; z-index:10}
.skip:focus{left:1rem; top:1rem}

.wrap{max-width:78rem; margin:0 auto; padding:0 var(--edge)}

/* ---------------------------------------------------------------- masthead */

.site-head{border-bottom:3px double var(--ink)}
.head-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; padding-top:1.1rem; padding-bottom:.8rem}
.brand{font-family:var(--label); font-weight:700; font-size:1.05rem; color:var(--ink); text-decoration:none; letter-spacing:.005em}
.site-nav ul{display:flex; flex-wrap:wrap; gap:.3rem 1.4rem}
.site-nav a{font-family:var(--label); font-weight:500; font-size:1rem; color:var(--ink); text-decoration:none; white-space:nowrap}
@media (max-width:30rem){ .site-nav ul{column-gap:.95rem} .site-nav a{font-size:.95rem} }
.site-nav a:hover{text-decoration:underline}
.site-nav a[aria-current="page"]{font-weight:700; text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px}

/* ---------------------------------------------------------------- the article grid
   A reading column of about 66 characters, with room for figures to
   run wide beside or below it. Section numbers hang in the margin. */

.hero-grid,.s-grid,.page-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2.2vw,2rem); row-gap:1.1rem}
.hero-grid > *,.s-grid > *,.page-grid > *{grid-column:1 / -1}
@media (min-width:62rem){
  .s-head,.s-body,.s-close{grid-column:2 / 9}
}

/* ---------------------------------------------------------------- hero */

.hero{padding:clamp(1.75rem,4vw,3.25rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--rule)}
.display{
  font-weight:700;
  font-size:clamp(2.7rem,6.2vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.lede{margin-top:1.1rem; font-size:clamp(1.2rem,1.7vw,1.38rem); line-height:1.5; max-width:34rem}
.lede strong{font-weight:700}
.page-index .hero .display{font-size:clamp(2.3rem,4.4vw,3.9rem); line-height:1.06; max-width:28ch}
.hero-text{display:grid; gap:1.3rem; align-content:start}
.hero-text .lede{margin-top:1.1rem}
.cta{font-family:var(--label); font-weight:700; font-size:1.25rem}
.cta a{text-decoration-thickness:2px}
@media (min-width:62rem){
  .hero .display{grid-column:1 / -1}
  .hero-grid > .lede,.hero-grid > .hero-text{grid-column:1 / 6; grid-row:2; align-self:start}
  .hero .fig{grid-column:6 / -1; grid-row:2; margin-top:.4rem}
}

.fig{margin:1.5rem 0 0}
.fig-svg{display:block; width:100%; height:auto; overflow:visible}
.fig-cap{margin-top:.9rem; font-family:var(--label); font-weight:500; font-size:.98rem; line-height:1.45; color:var(--ink); display:grid; gap:.25rem}
.fig-label{font-weight:700}
.fig-title{font-weight:700}
.fig-body,.fig-note{color:var(--grey)}
.fig-note{font-style:normal}
.readout{display:flex; flex-wrap:wrap; gap:.3rem 1.6rem; margin:.35rem 0}
.readout div{display:flex; align-items:baseline; gap:.45rem}
.readout dt{color:var(--grey)}
.readout dd{margin:0; font-weight:700; font-size:1.25rem}
.readout div:last-child dd{color:var(--vermilion)}
@media (min-width:62rem){
  .hero .fig-cap{grid-template-columns:auto 1fr; column-gap:.6rem}
  .hero .fig-label{grid-row:1}
  .hero .fig-title{grid-row:1}
  .hero .fig-body,.hero .readout,.hero .fig-note{grid-column:1 / -1}
}

/* Figure 1: the fan-out */
.fan .rl{font-family:var(--label); font-weight:500; font-size:15px; fill:var(--grey)}
.fan .rline{stroke:var(--rule); stroke-width:1.5}
.fan .stem{fill:none; stroke-width:3.2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}
.fan .dot{stroke:var(--paper); stroke-width:3}
.fan .r1{--c:var(--blue);      --dx:-5.1px}
.fan .r2{--c:var(--vermilion); --dx:111.8px}
.fan .r3{--c:var(--green);     --dx:-96.5px}
.fan .r4{--c:var(--orange);    --dx:40.6px}
.fan .r5{--c:var(--purple);    --dx:-50.8px}
.fan .stem{stroke:var(--c)}
.fan .dot{fill:var(--c)}
.fan .agree-line{stroke:var(--grey); stroke-width:1.5; stroke-dasharray:5 5}
.fan .agree-l{font-family:var(--serif); font-style:italic; font-size:16px; fill:var(--grey); text-anchor:middle}
.fan .axis path{stroke:var(--ink); stroke-width:1.5; fill:none}
.fan .al{font-family:var(--label); font-weight:500; font-size:14px; fill:var(--grey); text-anchor:middle}
.fan .guide{stroke:var(--ink); stroke-width:1.2; stroke-dasharray:2 4}
.fan .brk{fill:none; stroke:var(--ink); stroke-width:2.2; stroke-dasharray:1; stroke-dashoffset:0}
.fan .brk-l{font-family:var(--label); font-weight:700; font-size:18px; fill:var(--ink); text-anchor:middle}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes part{from{translate:var(--dx) 0}to{translate:0 0}}
@keyframes grow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.page-products .fan .agree{animation:fade .5s ease-out .2s both}
.page-products .fan .rl{animation:fade .4s ease-out .3s both}
.page-products .fan .dot{animation:part 1s cubic-bezier(.5,0,.15,1) both}
.page-products .fan .stem{animation:grow 1s cubic-bezier(.5,0,.15,1) both}
.page-products .fan .r1 .dot,.page-products .fan .r1 .stem{animation-delay:.75s}
.page-products .fan .r2 .dot,.page-products .fan .r2 .stem{animation-delay:.9s}
.page-products .fan .r3 .dot,.page-products .fan .r3 .stem{animation-delay:1.05s}
.page-products .fan .r4 .dot,.page-products .fan .r4 .stem{animation-delay:1.2s}
.page-products .fan .r5 .dot,.page-products .fan .r5 .stem{animation-delay:1.35s}
.page-products .fan .guide{animation:fade .5s ease-out 2.4s both}
.page-products .fan .brk{animation:grow .7s cubic-bezier(.5,0,.2,1) 2.6s both}
.page-products .fan .brk-l{animation:fade .5s ease-out 3.1s both}

/* Figure 1: every rule gets a fate. 36 rules leave the old system and sort
   into four bins. Each dot carries its pile offset (--dx, --dy) and its turn
   (--i); the rules are generated, one per dot, at the end of this block. */
.rf .old-box{fill:none; stroke:var(--grey); stroke-width:1.5; stroke-dasharray:5 5}
.rf .old-l,.rf .old-n{font-family:var(--label); font-weight:600; font-size:15px; fill:var(--grey); text-anchor:middle}
.rf .old-l{fill:var(--ink); font-weight:700}
.rf .slots circle{fill:none; stroke:var(--rule); stroke-width:1.5}
.rf .flow{stroke:var(--grey); stroke-width:1.5}
.rf .flow-h{fill:none; stroke:var(--grey); stroke-width:1.5}
.rf .base{stroke:var(--ink); stroke-width:1.5}
.rf .u{stroke:var(--paper); stroke-width:2.5}
.rf .u.keep{fill:var(--blue)}
.rf .u.change{fill:var(--orange)}
.rf .u.retire{fill:#b9bdc3}
.rf .u.unsure{fill:var(--vermilion)}
.rf .bl{font-family:var(--label); font-weight:600; font-size:15px; fill:var(--grey); text-anchor:middle}
.rf .bn{font-family:var(--label); font-weight:700; font-size:22px; fill:var(--ink); text-anchor:middle}
.rf .unsure .bn{fill:var(--vermilion)}
.rf .ask-line{stroke:var(--vermilion); stroke-width:1.5}
.rf .ask-l{font-family:var(--label); font-weight:700; font-size:16px; fill:var(--vermilion); text-anchor:middle}
@keyframes sort{from{translate:var(--dx) var(--dy); fill:var(--grey)}}
.page-index .rf .u{animation:sort .9s cubic-bezier(.5,0,.15,1) both; animation-delay:calc(.5s + var(--i) * 45ms)}
.page-index .rf .slots{animation:fade .4s ease-out .2s both}
.page-index .rf .bin-l{animation:fade .5s ease-out 2.4s both}
.page-index .rf .ask{animation:fade .5s ease-out 3s both}
.rf .u1{--dx:-167px; --dy:-32px; --i:0}
.rf .u2{--dx:-207px; --dy:-52px; --i:1}
.rf .u3{--dx:-147px; --dy:-112px; --i:2}
.rf .u4{--dx:-147px; --dy:-132px; --i:3}
.rf .u5{--dx:-87px; --dy:-32px; --i:4}
.rf .u6{--dx:-147px; --dy:-32px; --i:5}
.rf .u7{--dx:-187px; --dy:-92px; --i:6}
.rf .u8{--dx:-147px; --dy:-52px; --i:7}
.rf .u9{--dx:-147px; --dy:-52px; --i:8}
.rf .u10{--dx:-207px; --dy:-52px; --i:9}
.rf .u11{--dx:-147px; --dy:-12px; --i:10}
.rf .u12{--dx:-167px; --dy:-32px; --i:11}
.rf .u13{--dx:-107px; --dy:28px; --i:12}
.rf .u14{--dx:-147px; --dy:-32px; --i:13}
.rf .u15{--dx:-227px; --dy:-72px; --i:14}
.rf .u16{--dx:-227px; --dy:-12px; --i:15}
.rf .u17{--dx:-187px; --dy:48px; --i:16}
.rf .u18{--dx:-187px; --dy:-32px; --i:17}
.rf .u19{--dx:-167px; --dy:8px; --i:18}
.rf .u20{--dx:-147px; --dy:48px; --i:19}
.rf .u21{--dx:-271px; --dy:-92px; --i:20}
.rf .u22{--dx:-271px; --dy:-132px; --i:21}
.rf .u23{--dx:-271px; --dy:-32px; --i:22}
.rf .u24{--dx:-351px; --dy:-112px; --i:23}
.rf .u25{--dx:-211px; --dy:-72px; --i:24}
.rf .u26{--dx:-291px; --dy:-112px; --i:25}
.rf .u27{--dx:-331px; --dy:-52px; --i:26}
.rf .u28{--dx:-251px; --dy:-92px; --i:27}
.rf .u29{--dx:-355px; --dy:-32px; --i:28}
.rf .u30{--dx:-315px; --dy:-92px; --i:29}
.rf .u31{--dx:-395px; --dy:-52px; --i:30}
.rf .u32{--dx:-375px; --dy:-132px; --i:31}
.rf .u33{--dx:-335px; --dy:-112px; --i:32}
.rf .u34{--dx:-479px; --dy:-52px; --i:33}
.rf .u35{--dx:-459px; --dy:-112px; --i:34}
.rf .u36{--dx:-499px; --dy:-72px; --i:35}

/* ---------------------------------------------------------------- numbered sections */

.s{padding:clamp(2.75rem,5.5vw,4.5rem) 0; border-bottom:1px solid var(--rule); counter-increment:sec}
.s-head{position:relative}
.s-head h2{font-size:clamp(1.6rem,2.6vw,2.15rem); letter-spacing:-.01em; max-width:26ch}
.s-head h2::before{
  content:counter(sec);
  font-family:var(--label); font-weight:700; font-size:.62em; color:var(--blue);
  margin-right:.7em; vertical-align:.18em;
}
@media (min-width:62rem){
  .s-head h2::before{position:absolute; left:-3.2rem; top:.28em; margin:0; font-size:1.25rem; vertical-align:0}
}
.s-intro{margin-top:.8rem; max-width:38rem}
.s-body{margin-top:1rem}
.s-close{max-width:38rem; font-style:italic}

.items,.claims{display:grid; gap:1.3rem}
.items li,.claims li,.rules li{max-width:38rem}
.items h3,.rules h3,.claims h3{font-size:1.14rem; margin-bottom:.2rem}
.s-claim .s-body p + p{margin-top:.8rem}
@media (min-width:62rem){
  .s-mandates .s-body,.s-philosophy .s-body,.s-claims .s-body,.s-problem .s-body,.s-how .s-body,.s-records .s-body,.s-buyers .s-body,.s-steps .s-body{grid-column:2 / -1}
  .items,.claims{grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:2rem}
  .items li,.claims li{border-top:2px solid var(--ink); padding-top:.8rem}
}
.claims h3{font-size:1.35rem}

/* ---------------------------------------------------------------- the offer (home) */

/* the assessment's five deliverables, numbered in the margin */
.steps{counter-reset:step}
.steps > li{counter-increment:step; position:relative; padding:.9rem 0 .9rem 2.9rem; max-width:38rem; border-top:1px solid var(--rule)}
.steps > li:first-child{border-top:2px solid var(--ink)}
.steps > li::before{
  content:counter(step);
  position:absolute; left:0; top:1.05rem;
  width:1.9rem; height:1.9rem; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--label); font-weight:700; font-size:1rem;
  border:1.5px solid var(--ink);
}
.steps h3{font-size:1.2rem; margin-bottom:.15rem}

@media (min-width:62rem){
  .items.two{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the five gates, as a strip on the home page and in full on the method page */
.gate-strip{display:flex; flex-wrap:wrap; gap:.4rem 0; font-family:var(--label); font-weight:700; font-size:1.15rem; margin-bottom:1.4rem}
.gate-strip li{display:flex; align-items:baseline; gap:.45rem}
.gate-strip li + li::before{content:""; width:1.6rem; height:1.5px; background:var(--grey); align-self:center; margin:0 .55rem}
.gate-strip .gn{color:var(--blue); font-size:.9rem}

.gates{display:grid; gap:0}
.gates li{display:grid; gap:.25rem 1.4rem; padding:1rem 0 1.1rem; border-top:1px solid var(--rule)}
.gates li:first-child{border-top:2px solid var(--ink)}
.gates li:last-child{border-bottom:2px solid var(--ink)}
.gates .gn{font-family:var(--label); font-weight:700; color:var(--blue); font-size:1rem}
.gates h3{font-size:1.3rem}
.gates .gate{font-family:var(--label); font-weight:600; font-size:.9rem; color:var(--grey); margin-top:.3rem}
@media (min-width:62rem){
  .s-gates .s-body{grid-column:2 / -1}
  .gates li{grid-template-columns:3rem 10rem minmax(0,1fr); align-items:baseline}
  .gates .gate{grid-column:3}
}

/* ---------------------------------------------------------------- instruments */

.instruments li{display:grid; gap:.3rem .9rem; padding:1rem 0; border-top:1px solid var(--rule)}
.instruments li:first-child{border-top:2px solid var(--ink)}
.status{font-family:var(--label); font-weight:700; font-size:.92rem; display:flex; align-items:center; gap:.45rem}
.status::before{content:""; width:.72rem; height:.72rem; border-radius:50%; border:2px solid var(--grey)}
.is-live .status{color:var(--blue)}
.is-live .status::before{background:var(--blue); border-color:var(--blue)}
.is-pipeline .status{color:var(--grey)}
.is-proto .status{color:#9a6a00}
.is-proto .status::before{border-color:var(--orange); background:linear-gradient(90deg,var(--orange) 50%,transparent 50%)}
.inst-name{font-size:1.45rem}
.inst-name a{color:var(--ink)}
.inst-name.is-code{font-family:var(--label); font-weight:700; letter-spacing:-.005em}
.inst-text{display:grid; gap:.5rem; max-width:40rem}
@media (min-width:62rem){
  .s-instruments .s-body,.s-products .s-body,.s-notes .s-body{grid-column:2 / -1}
  .instruments li{grid-template-columns:9rem 13rem minmax(0,1fr); align-items:baseline}
}

.s-link{font-family:var(--label); font-weight:700; font-size:1.2rem}

/* ---------------------------------------------------------------- products page */

.product .s-head h2{max-width:none; position:relative; margin-top:.35rem}
.product .s-head h2::before{top:.38em}
.points{display:grid; gap:.55rem; max-width:38rem; margin-top:.4rem}
.points li{position:relative; padding-left:1.3rem}
.points li::before{content:""; position:absolute; left:0; top:.62em; width:.5rem; height:.5rem; background:var(--ink)}
.rung{font-family:var(--label); font-weight:600; font-size:1rem; color:var(--grey); margin-top:.8rem; max-width:38rem}
.rung b{color:var(--ink)}
.shot{margin:1.4rem 0 0}
.shot img{display:block; width:100%; height:auto; border:1px solid var(--rule); box-shadow:0 8px 22px -14px rgba(0,0,0,.45)}
.shot figcaption{margin-top:.8rem; font-family:var(--label); font-weight:500; font-size:.98rem; line-height:1.45; color:var(--grey); max-width:44rem}
.shot figcaption b{color:var(--ink)}
.shot.narrow img{max-width:46rem}
@media (min-width:62rem){
  .product .shot{grid-column:2 / -1}
  .s-why .fig{grid-column:2 / 11}
}

/* ---------------------------------------------------------------- field notes */

.notes li{display:grid; gap:.35rem; padding:1.2rem 0 1.3rem; border-top:1px solid var(--rule); max-width:46rem}
.notes li:first-child{border-top:2px solid var(--ink)}
.notes h2,.notes h3{font-size:1.5rem}
.notes h2 a,.notes h3 a{color:var(--ink)}
.notes .dek{font-style:italic; color:var(--grey)}
.notes .meta{font-family:var(--label); font-weight:600; font-size:.92rem; color:var(--grey)}

.byline{font-family:var(--label); font-weight:600; font-size:1rem; color:var(--grey); margin-top:1rem}
.article{padding:clamp(2rem,4.5vw,3.5rem) 0 clamp(2.5rem,5vw,4rem)}
.article .prose{gap:1.05rem}
.article .prose p:first-child{font-size:inherit; line-height:inherit}
.article .prose h2{font-size:clamp(1.4rem,2.2vw,1.75rem); margin-top:1.4rem}
.article .prose h3{font-size:1.2rem; margin-top:.8rem}
.article .prose ul{display:grid; gap:.6rem; padding-left:1.3rem; list-style:disc}
.article .prose hr{width:4rem; border:0; border-top:2px solid var(--ink); margin:1.2rem 0 .4rem}
.article .end{margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--rule); font-style:italic; color:var(--grey)}
.article .back{margin-top:1.2rem; font-family:var(--label); font-weight:700; font-size:1.1rem}

/* who: set as the correspondence box a paper ends with */
.s-who .s-head{border:1.5px solid var(--ink); padding:1.4rem 1.5rem 1.5rem}
.s-who .s-close{font-style:normal; font-family:var(--label); font-weight:700; font-size:1.3rem}
.s-who .s-close a{text-decoration-thickness:2px}

/* ---------------------------------------------------------------- method page */

.page-head{padding:clamp(1.75rem,4vw,3rem) 0 clamp(1.5rem,3vw,2.5rem); border-bottom:1px solid var(--rule)}
.page-head .display{font-size:clamp(2.6rem,6vw,5rem)}
.page-head .lede{font-style:italic; color:var(--grey)}
@media (min-width:62rem){ .page-grid > *{grid-column:1 / 10} }

.rules{display:grid; gap:1.2rem}

/* Figure 2: the base rate */
.br{margin:1.1rem 0 .3rem; padding:1rem 1rem 1.1rem; border:1px solid var(--rule); max-width:30rem}
.br::before{content:"Figure 2"; display:block; font-family:var(--label); font-weight:700; font-size:.92rem; margin-bottom:.6rem}
.br-grid{gap:4px}
.br-grid i{background:var(--br-false); border-radius:1px}
.br-grid i.hit{background:var(--br-hit)}
.br-key{font-family:var(--label); font-weight:600; font-size:.9rem}
.bk::before{content:""; display:inline-block; width:.7rem; height:.7rem; margin-right:.4rem; vertical-align:-.05em}
.bk-flag::before{background:var(--br-flag)}
.bk-false::before{background:var(--br-false)}
.bk-hit::before{background:var(--br-hit)}

.weeks{counter-reset:wk; display:grid; gap:1.2rem}
.weeks li{counter-increment:wk; border-left:3px solid var(--ink); padding:.1rem 0 .2rem 1.1rem; max-width:38rem}
.when{font-family:var(--label); font-weight:700; color:var(--blue); font-size:.95rem}
.weeks h3{font-size:1.15rem; margin:.1rem 0 .25rem}
@media (min-width:62rem){
  .s-investigation .s-body{grid-column:2 / -1}
  .weeks{grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:1.6rem}
}

/* the ladder as a table, with a readiness bar per rung */
.ladder{display:grid; gap:0}
.ladder li{display:grid; gap:.3rem 1.4rem; padding:1rem 0 1.05rem; border-top:1px solid var(--rule)}
.ladder li:first-child{border-top:2px solid var(--ink)}
.ladder li:last-child{border-bottom:2px solid var(--ink)}
.ladder li::before{
  content:""; display:block; height:.6rem; align-self:center;
  background:linear-gradient(90deg,var(--blue) 0 calc(var(--lvl) * 20%),var(--faint) calc(var(--lvl) * 20%));
}
.ladder li:nth-child(1){--lvl:1} .ladder li:nth-child(2){--lvl:2} .ladder li:nth-child(3){--lvl:3}
.ladder li:nth-child(4){--lvl:4} .ladder li:nth-child(5){--lvl:5}
.ladder h3{font-size:1.1rem}
.ladder dl{margin:0; display:grid; gap:.4rem 1.4rem}
.ladder dt{font-family:var(--label); font-weight:700; font-size:.85rem; color:var(--grey)}
.ladder dd{margin:0}
@media (min-width:62rem){
  .s-ladder .s-body{grid-column:2 / -1}
  .ladder li{grid-template-columns:8rem 12rem minmax(0,1fr)}
  .ladder dl{grid-template-columns:1fr 1fr}
}
@property --grow{syntax:"<number>"; inherits:false; initial-value:1}
@keyframes bar{from{--grow:0}to{--grow:1}}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
  .ladder li::before{
    background:linear-gradient(90deg,var(--blue) 0 calc(var(--lvl) * 20% * var(--grow)),var(--faint) calc(var(--lvl) * 20% * var(--grow)));
    animation:bar ease-out both; animation-timeline:view(); animation-range:entry 20% cover 45%;
  }
}
}

/* the judgment-calls statement that joins the two halves of the method page */
.s-calls h2{font-size:clamp(1.9rem,3.6vw,2.9rem); max-width:22ch}
.s-calls .s-intro{font-size:1.22rem; line-height:1.55}

/* about */
.prose{display:grid; gap:1rem; max-width:38rem}
.prose p:first-child{font-size:1.28rem; line-height:1.5}
@media (min-width:62rem){ .prose{grid-column:2 / 9} }
.s-bio,.article{counter-increment:none}

/* ---------------------------------------------------------------- footer */

.site-foot{border-top:3px double var(--ink); padding:2rem 0 2.5rem; margin-top:0}
.foot-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:1.5rem; row-gap:1.4rem; font-family:var(--label)}
.foot-grid > *{grid-column:1 / -1}
.foot-h{font-size:1rem; font-weight:700}
.email{font-family:var(--serif); font-weight:700; font-size:clamp(1.4rem,3.2vw,2.2rem); margin:.2rem 0 .4rem; overflow-wrap:anywhere}
.place,.foot-brand p,.legal{color:var(--grey)}
.brand-line{color:var(--ink) !important; font-weight:700}
.foot-nav ul{display:flex; flex-wrap:wrap; gap:.3rem 1.3rem; font-weight:600}
.legal{font-size:.9rem}
@media (min-width:62rem){
  .foot-contact{grid-column:1 / 8}
  .foot-brand{grid-column:8 / 11}
  .foot-nav{grid-column:11 / -1}
  .foot-nav ul{flex-direction:column}
}

/* ---------------------------------------------------------------- reduced motion */

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