/* conceit  the page pretends to be the roadbook a co-driver reads out loud in the car:
             legs numbered, distances in the margin, one stamp per checkpoint
   type     Bricolage Grotesque 800 for the display, Martian Mono 300/600 for every
             measured number, Newsreader 300 for prose. The mono is what makes a
             roadbook a roadbook, so all data is set in it and nothing else is
   colour   ground #e9e2d2 desert paper, ink #17140e, one accent #c2400f, the orange
             Caltrans paints on cones and mile markers. Accent is the road line, the
             route letter, the rule under each h2, the button and the focus ring
   grid     12 columns, 28px gutter, 1560px max, hairline column rules under the tables
   texture  offset-print grain, one feTurbulence layer at 5%, multiplied over everything
   motion   one system: the road draws itself when its route scrolls into view, because
             that is what a route does on paper. Nothing else moves */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}

:root{
  --paper:#e9e2d2;
  --paper2:#e2dac7;
  --ink:#17140e;
  --ink2:#524b3c;
  --rule:#c0b59b;
  --acc:#c2400f;
  --max:1560px;
  --gut:28px;
  --ease:cubic-bezier(.22,1,.36,1);
  --disp:"Bricolage Grotesque","Bricolage Grotesque Fallback",Georgia,serif;
  --mono:"Martian Mono","SFMono-Regular",ui-monospace,monospace;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
}

@media (prefers-color-scheme:dark){
  :root{--paper:#14120e;--paper2:#1b1813;--ink:#ece4d3;--ink2:#a79c86;--rule:#3d372b;--acc:#e8622c}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(17px,1.05vw,20px);
  line-height:1.55;
  font-weight:300;
  overflow-x:hidden;
}

.grain{
  position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.055;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){.grain{mix-blend-mode:screen;opacity:.07}}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,64px)}

/* ---------- the running rule, the roadbook's spine ---------- */
section{border-top:1px solid var(--rule);padding:clamp(56px,7vw,110px) 0}
section.band{background:var(--paper2)}

h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;line-height:.92;margin:0}
h2{font-size:clamp(2rem,4.4vw,3.5rem);max-width:16ch}
h2::after{content:"";display:block;width:88px;height:6px;background:var(--acc);margin:.55em 0 .1em}
h3{font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1}

p{margin:0 0 1em}

/* ---------- hero ---------- */
.hero{padding:clamp(26px,4vw,54px) 0 clamp(40px,5vw,80px)}
.eyebrow{
  font-family:var(--mono);font-size:clamp(9.5px,.72vw,11.5px);font-weight:300;
  text-transform:uppercase;letter-spacing:.19em;color:var(--ink2);
  border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:clamp(28px,5vw,64px);
}
.eyebrow .sep{color:var(--acc);padding:0 .45em}
h1{font-size:clamp(3.1rem,11.4vw,10.5rem);font-variation-settings:"opsz" 96;margin-bottom:.24em}
.lede{font-size:clamp(1.12rem,1.55vw,1.5rem);max-width:44ch;color:var(--ink);line-height:1.42}
.hero .lede{max-width:52ch}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin:1.6em 0 .8em}
.btn,.btn2{
  font-family:var(--mono);font-size:12.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;text-decoration:none;padding:15px 26px;display:inline-block;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.btn{background:var(--acc);color:var(--paper)}
.btn:hover{background:var(--ink)}
.btn2{border:1px solid var(--rule);color:var(--ink)}
.btn2:hover{border-color:var(--acc);color:var(--acc)}
.friction{font-family:var(--mono);font-size:11.5px;font-weight:300;line-height:1.75;color:var(--ink2);max-width:62ch}
.heroplate{margin:clamp(30px,4vw,58px) 0 0;padding:0;border-top:1px solid var(--rule);padding-top:22px}
figcaption{font-family:var(--mono);font-size:10.5px;font-weight:300;color:var(--ink2);letter-spacing:.04em;line-height:1.7;margin-top:12px;max-width:66ch}

/* ---------- tables of numbers ---------- */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2em 0 1em}
table{border-collapse:collapse;width:100%;min-width:680px}
th,td{text-align:left;padding:14px 18px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{
  font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--ink2);border-bottom:2px solid var(--ink);padding-bottom:10px;
}
.num td,.num th[scope],.days .n,.days th[scope]{font-family:var(--mono);font-size:12.5px;font-weight:300;letter-spacing:-.01em}
.num td:first-child{font-weight:600}
.num a{color:var(--ink);text-decoration-color:var(--acc);text-underline-offset:3px}
.num a:hover{color:var(--acc)}
.days td{font-size:.94em}
.days th[scope]{white-space:nowrap;font-weight:600;color:var(--acc)}
.days .n{white-space:nowrap}
.days .leg{font-family:var(--mono);font-size:11.5px;font-weight:300;line-height:1.6;min-width:19ch}
.days .night{font-family:var(--mono);font-size:10.5px;font-weight:300;color:var(--ink2);min-width:16ch}
.note,.warn{font-family:var(--mono);font-size:11px;font-weight:300;line-height:1.85;color:var(--ink2);max-width:96ch}
.warn{color:var(--ink);border-left:3px solid var(--acc);padding-left:20px;margin-top:2.2em}
.warn a{color:var(--acc)}
.lede2{max-width:70ch;font-size:1.05em}

/* ---------- what you want to see ---------- */
.cols{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,60px)}
@media (min-width:960px){.cols{grid-template-columns:minmax(280px,1fr) 1.55fr}}
.colhead p{font-family:var(--mono);font-size:11px;font-weight:300;line-height:1.8;color:var(--ink2);margin-top:1.4em}
.wants{list-style:none;margin:0;padding:0;columns:1;column-gap:48px}
@media (min-width:700px){.wants{columns:2}}
.wants li{
  break-inside:avoid;display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  border-bottom:1px solid var(--rule);padding:11px 0;font-size:1.02em;
}
.wants b{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--acc);white-space:nowrap}

/* ---------- one route ---------- */
.route{border-top:1px solid var(--rule);padding:clamp(46px,6vw,92px) 0}
.route:first-of-type{border-top:2px solid var(--ink)}
.rhead{display:flex;gap:clamp(18px,3vw,44px);align-items:flex-start}
.rletter{
  font-family:var(--disp);font-weight:800;font-size:clamp(4.4rem,12vw,11rem);line-height:.72;
  margin:0;color:transparent;-webkit-text-stroke:2px var(--acc);flex:none;
}
.rpitch{font-size:clamp(1.05rem,1.5vw,1.42rem);max-width:46ch;margin:.5em 0 0;line-height:1.4}
.rstats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  margin:clamp(26px,3.5vw,48px) 0 0;border:1px solid var(--rule)}
@media (min-width:760px){.rstats{grid-template-columns:repeat(4,1fr)}}
.rstats>div{background:var(--paper);padding:18px 20px 20px}
section.band .rstats>div{background:var(--paper2)}
.rstats dt{font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--ink2)}
.rstats dd{font-family:var(--mono);font-size:clamp(15px,1.5vw,21px);font-weight:600;margin:9px 0 0;letter-spacing:-.02em}
.plates{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,44px);margin:clamp(30px,4vw,56px) 0 0}
@media (min-width:1080px){.plates{grid-template-columns:1.32fr 1fr;align-items:start}}
.plate{margin:0;padding-top:20px;border-top:1px solid var(--rule)}
.verdict{display:grid;grid-template-columns:1fr;gap:0;margin-top:2.4em;border-top:1px solid var(--rule)}
@media (min-width:900px){.verdict{grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,3vw,52px)}}
.verdict p{padding:22px 0 0;margin:0 0 22px;max-width:52ch;font-size:.98em}
.tag{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.15em;color:var(--acc);margin-bottom:9px}
.pickline{margin:1.2em 0 0}
.pick{
  font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;
  background:none;border:1px solid var(--ink);color:var(--ink);padding:15px 26px;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.pick:hover{border-color:var(--acc);color:var(--acc)}
.pick[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--paper)}

/* ---------- the drawings ---------- */
.mapsvg,.profsvg{width:100%;height:auto}
.land path{fill:none;stroke:var(--rule);stroke-width:1.4;vector-effect:non-scaling-stroke}
.road{fill:none;stroke:var(--acc);stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round}
.stop circle{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.stop line{stroke:var(--ink2);stroke-width:1.2}
.stop text{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--ink);letter-spacing:.02em}
.profsvg .fill{fill:var(--rule);opacity:.4}
.profsvg .stroke{fill:none;stroke:var(--ink);stroke-width:2.2}
.profsvg .zero{stroke:var(--ink2);stroke-width:1;stroke-dasharray:3 5}
.profsvg .hi{fill:var(--acc)}
.profsvg .lo{fill:var(--ink)}
.profsvg .pk{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--acc)}
.profsvg .lowlab{fill:var(--ink)}

/* ---------- how it was measured ---------- */
.steps{list-style:none;counter-reset:s;margin:2.2em 0 0;padding:0;display:grid;gap:0;
  grid-template-columns:1fr}
@media (min-width:900px){.steps{grid-template-columns:repeat(2,1fr);column-gap:clamp(32px,4vw,72px)}}
.steps li{border-top:1px solid var(--rule);padding:22px 0 26px;max-width:56ch;position:relative}
.stepno{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--acc);display:block;margin-bottom:10px;letter-spacing:.2em}
.steps b{font-weight:600}

/* ---------- questions ---------- */
.qa{display:grid;grid-template-columns:1fr;gap:0;margin-top:2.2em}
@media (min-width:960px){.qa{grid-template-columns:repeat(2,1fr);column-gap:clamp(32px,4vw,72px)}}
.qa>div{border-top:1px solid var(--rule);padding:24px 0 30px}
.qa h3{font-size:clamp(1.12rem,1.5vw,1.5rem);max-width:26ch;margin-bottom:.6em}
.qa p{max-width:52ch;margin:0}

/* ---------- close ---------- */
.close{background:var(--ink);color:var(--paper);border-top:none}
.close h2{color:var(--paper)}
.close h2::after{background:var(--acc)}
.close .lede{color:var(--paper);max-width:56ch;margin-top:1.1em}
.close .btn{background:var(--acc);color:var(--paper)}
.close .btn:hover{background:var(--paper);color:var(--ink)}
.picked{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--acc);text-transform:uppercase;margin-top:1.4em}
footer{border-top:1px solid var(--rule);padding:34px 0 60px}
footer p{font-family:var(--mono);font-size:10px;font-weight:300;color:var(--ink2);line-height:1.9;margin:0;max-width:80ch}

a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---------- motion: the road draws itself, and nothing else ---------- */
.road,.profsvg .stroke{stroke-dashoffset:var(--len,0);stroke-dasharray:var(--len,0) var(--len,0)}
.drawn .road,.drawn .stroke{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .road,.profsvg .stroke{stroke-dashoffset:0!important;stroke-dasharray:none!important}
}