/* Staffwain — the road. Brutalist type on a warm near-black: hard rules, hard blocks, one orange milepost,
   the step numbers as the picture. Figures sit in the grotesk so a 1 is never a bare stroke.
   Phone first (one long column, a fixed yoke on top and a fixed dock below), a wider measure from 640,
   and from 1000 the cart recomposes: the road down the left, the side column sticky on the right. */
:root{
  --ground:#1C1916; --slab:#26221E; --slab2:#2F2A25; --black:#0E0C0A;
  --ink:#E8E3DB; --dim:rgba(232,227,219,.6); --faint:rgba(232,227,219,.36);
  --rule:rgba(232,227,219,.16); --rule2:rgba(232,227,219,.3);
  --slate:#6C7380; --slatedim:rgba(108,115,128,.22);
  --post:#FF5A1E; --postdim:rgba(255,90,30,.14); --postline:rgba(255,90,30,.5); --onpost:#1A0B04;
  --mast:100px; --dockh:112px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font:400 15px/1.5 "Space Grotesk",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding:var(--mast) 0 calc(var(--dockh) + env(safe-area-inset-bottom,0px)) 0;
}
body[data-nodock]{padding-bottom:28px}
h1,h2,h3,.poster{font-family:"Dela Gothic One",Impact,"Arial Black",sans-serif;font-weight:400;letter-spacing:0;text-transform:uppercase}
.fig{font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:0}
[hidden]{display:none!important}

/* ---------- the yoke: fixed masthead at every width ---------- */
#yoke{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"mark buy hitch" "nav nav nav";
  gap:8px 10px; align-items:center;
  padding:8px 12px 0; background:var(--black); border-bottom:4px solid var(--post);
}
.ymark{grid-area:mark;display:flex;align-items:center;gap:9px;text-decoration:none}
.ymark img{width:30px;height:30px;display:block;border:2px solid var(--slate)}
.ymark span{font-family:"Dela Gothic One",Impact,sans-serif;font-size:15px;text-transform:uppercase;display:none}
.ybuy{
  grid-area:buy; display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:0 12px; text-decoration:none;
  border:2px solid var(--post); color:var(--post); background:transparent;
  text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; overflow:hidden;
}
.ybuy b{font-weight:700;font-size:12.5px}
.ybuy i{font-style:normal;font-size:10.5px;color:var(--dim);letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis}
.ybuy[data-live="1"]{background:var(--post);color:var(--onpost)}
.ybuy[data-live="1"] i{color:rgba(26,11,4,.72)}
.yhitch{grid-area:hitch;min-height:44px;padding:0 12px;border:2px solid var(--rule2);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.yhitch[data-on="1"]{color:var(--ink);border-color:var(--slate)}
.ynav{grid-area:nav;display:flex;gap:0;border-top:1px solid var(--rule);margin:0 -12px;padding:0 4px}
.ynav a{flex:1;text-align:center;padding:8px 4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.ynav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- the cart: one long column ---------- */
#cart{width:100%;max-width:600px;margin:0 auto;padding:18px 14px 20px;display:flex;flex-direction:column;gap:18px}
.side{display:contents}
.yard{order:1}.tally{order:2}.road{order:3}.waybill{order:4}.ruts{order:5}

/* the yard: the lede */
.kick{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.yard h1{margin:0 0 10px;line-height:.9;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 14px}
.yard h1 .huge{font-size:88px;line-height:.82;color:var(--post);letter-spacing:-.02em}
.yard h1 .word{font-size:26px;line-height:1;padding-bottom:6px;max-width:7em}
.lede{color:var(--dim);font-size:14px;line-height:1.6;margin:0}
.lede b{color:var(--ink);font-weight:700}
.wainbox{display:none}

/* the tally: four hard cells */
.tally{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:2px solid var(--ink)}
.cell{padding:10px 12px 11px;border:1px solid var(--rule)}
.cell dt{margin:0 0 3px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.cell dd{margin:0;font-size:24px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.cell dd small{display:block;font-size:10.5px;font-weight:400;color:var(--dim);margin:3px 0 0;letter-spacing:.06em}
.cell[data-hot="1"] dd{color:var(--post)}
.cell[data-quiet="1"] dd{color:var(--faint);font-size:15px;font-weight:500;padding-top:4px}

/* the road: forty steps, one row each */
.roadhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 8px;border-bottom:2px solid var(--ink);padding-bottom:6px}
.roadhead h2{font-size:17px;margin:0}
.roadhead em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.steps{display:flex;flex-direction:column;gap:0;border:2px solid var(--ink)}
.stepline{
  --heat:0;
  position:relative; display:grid; grid-template-columns:52px 1fr 78px 64px; grid-template-areas:"num odds on pays";
  align-items:center; gap:0 8px; min-height:50px; padding:6px 10px 6px 0;
  border-top:1px solid var(--rule); cursor:pointer; user-select:none;
  background:linear-gradient(90deg, rgba(108,115,128,calc(var(--heat) * .55)) 0 100%);
}
.stepline:first-child{border-top:0}
.stepline .num{grid-area:num;align-self:stretch;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;background:var(--slatedim);border-right:2px solid var(--rule2);color:var(--ink)}
.stepline .odds{grid-area:odds;min-width:0}
.stepline .odds i{display:block;height:6px;background:var(--slate);width:calc(var(--w) * 1%);min-width:2px;margin:0 0 4px}
.stepline .odds s{text-decoration:none;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.stepline .odds s em{font-style:normal;color:var(--faint);margin-left:6px}
.stepline .on{grid-area:on;text-align:right;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.stepline .on small{display:block;font-size:9.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.stepline .pays{grid-area:pays;text-align:right;font-size:15px;font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums}
.stepline .pays small{display:block;font-size:9.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.stepline[data-on="1"] .pays{color:var(--ink)}
.stepline[data-empty="1"] .on{color:var(--faint);font-weight:400}
.stepline[aria-pressed="true"]{outline:3px solid var(--post);outline-offset:-3px;z-index:1}
.stepline[aria-pressed="true"] .num{background:var(--post);color:var(--onpost);border-right-color:var(--post)}
.stepline[data-stop="1"] .num{background:var(--ink);color:var(--ground)}
.stepline[data-last="1"]::after{content:"last stop";position:absolute;right:10px;top:4px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--post)}
.stepline.end{min-height:64px;border-top:2px solid var(--ink)}
.stepline.end .odds s em{display:block;margin:2px 0 0;color:var(--post)}
.roadnote{margin:8px 0 0;font-size:11.5px;color:var(--faint);line-height:1.55}
.roadnote b{color:var(--dim);font-weight:500}

/* the dock: the action. Fixed at the foot of a phone; a block in the side column from 1000 */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--black); border-top:2px solid var(--ink);
  padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px));
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"pick pick" "sacks go"; gap:8px 10px; align-items:center;
}
.dock .pick{grid-area:pick;display:flex;align-items:baseline;gap:10px;min-width:0;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden}
.dock .pick b{font-family:"Dela Gothic One",Impact,sans-serif;font-weight:400;font-size:17px;color:var(--ink);text-transform:uppercase}
.dock .pick b u{text-decoration:none;color:var(--post)}
.dock .pick span{overflow:hidden;text-overflow:ellipsis}
.dock .sacks{grid-area:sacks;display:grid;grid-template-columns:44px 1fr 44px;border:2px solid var(--rule2);min-height:46px;align-items:stretch}
.dock .sacks button{font-size:22px;font-weight:700;color:var(--ink);border-right:2px solid var(--rule2)}
.dock .sacks button:last-child{border-right:0;border-left:2px solid var(--rule2)}
.dock .sacks output{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
.dock .sacks output small{font-size:9.5px;font-weight:400;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.dock .go{grid-area:go;min-height:46px;min-width:112px;padding:0 16px;background:var(--post);color:var(--onpost);font-family:"Dela Gothic One",Impact,sans-serif;font-size:15px;text-transform:uppercase}
.dock .go[disabled]{background:var(--slab2);color:var(--faint)}
.dock[data-off="1"] .sacks{opacity:.4}
.dock .take{grid-area:pick}

/* the waybill and everything beside it */
.waybill{display:flex;flex-direction:column;gap:14px}
.slab{border:2px solid var(--rule2);background:var(--slab)}
.slabhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:9px 11px;border-bottom:2px solid var(--rule2)}
.slabhead h3{margin:0;font-size:12.5px;letter-spacing:.06em}
.slabhead span{font-size:10.5px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.slabbody{padding:10px 11px 12px}
.bill{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--rule);font-size:12px;font-variant-numeric:tabular-nums}
.bill:last-child{border-bottom:0}
.bill i{font-style:normal;font-weight:700;color:var(--post)}
.bill em{font-style:normal;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bill u{text-decoration:none;color:var(--faint);font-size:11px}
.bill[data-k="stopped"] i{color:var(--ink)}
.bill[data-k="halted"] i,.bill[data-k="moved"] i{color:var(--faint)}
.quiet{color:var(--faint);font-size:12px;line-height:1.6;margin:0}
.primer{margin:0;font-size:12.5px;line-height:1.65;color:var(--dim)}
.primer b{color:var(--ink);font-weight:700}
.primer p{margin:0 0 8px}
.primer p:last-child{margin:0}
.primer .n{font-family:"Dela Gothic One",Impact,sans-serif;color:var(--post);font-size:15px;margin-right:6px;font-variant-numeric:tabular-nums}
.stoprow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--rule);font-size:12px;font-variant-numeric:tabular-nums}
.stoprow:last-child{border-bottom:0}
.stoprow b{font-weight:700;color:var(--ink)}
.stoprow em{font-style:normal;color:var(--dim)}
.stoprow u{text-decoration:none;color:var(--post);font-weight:700}
.stoprow[data-roll="1"] u{color:var(--slate);font-weight:500}

/* rules, stops, waybill pages */
.leaf h2{font-size:22px;margin:0 0 10px}
.leaf p{color:var(--dim);font-size:14px;line-height:1.66;margin:0 0 12px}
.leaf p b{color:var(--ink)}
.leaf .n{font-family:"Dela Gothic One",Impact,sans-serif;color:var(--post);font-size:20px;margin-right:8px}
.grid40{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;border:2px solid var(--rule2)}
.grid40 th,.grid40 td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--rule)}
.grid40 th{color:var(--faint);font-weight:400;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--slab)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.take{background:var(--post);color:var(--onpost);font-family:"Dela Gothic One",Impact,sans-serif;padding:0 12px;min-height:34px;font-size:12px;text-transform:uppercase}
.take[disabled]{opacity:.45}

/* the ruts: reference, not selling */
.ruts{border-top:2px solid var(--ink);padding:14px 0 4px;color:var(--faint);font-size:11px;line-height:1.75}
.ruts a{color:var(--dim)}
.ruts code{word-break:break-all;color:var(--dim);font-size:10.5px}
.ruts .rut{margin:0 0 6px}

/* the hatch: wallet picker + confirm sheet */
#hatch{position:fixed;inset:0;z-index:60;background:rgba(14,12,10,.84);display:flex;align-items:flex-end;justify-content:center}
.hatchbox{width:100%;max-width:520px;background:var(--slab);border:2px solid var(--ink);border-bottom:0}
.hatchhead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:2px solid var(--rule2);font-family:"Dela Gothic One",Impact,sans-serif;font-size:15px;text-transform:uppercase}
.hatchshut{font-size:24px;line-height:1;color:var(--dim);padding:0 4px}
.hatchbody{padding:14px;font-size:13.5px;line-height:1.6;color:var(--dim)}
.hatchbody b{color:var(--ink)}
.hatchbody .take{display:block;width:100%;margin-top:14px;min-height:48px;font-size:15px}
.wellpick{display:grid;gap:8px}
.wellpick button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:2px solid var(--rule2);background:var(--slab2);font-size:13px;text-align:left}
.wellpick img{width:22px;height:22px;display:block}

/* transient */
.holler{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--dockh) + 14px); z-index:70;
  background:var(--black); border:2px solid var(--post); color:var(--ink);
  padding:9px 14px; font-size:12.5px; max-width:90vw; text-align:center;
}
body[data-nodock] .holler{bottom:24px}

/* ---------- a wider measure ---------- */
@media (min-width:640px){
  #cart{max-width:720px;padding:26px 22px 30px;gap:22px}
  .ymark span{display:block}
  .yard h1 .huge{font-size:120px}
  .yard h1 .word{font-size:34px}
  .lede{font-size:15px}
  .tally{grid-template-columns:repeat(4,1fr)}
  .cell dd{font-size:26px}
  .stepline{grid-template-columns:64px 1fr 110px 90px;min-height:56px}
  .stepline .num{font-size:28px}
  .stepline .odds s{font-size:12px}
  .stepline .on{font-size:14px}
  .stepline .pays{font-size:17px}
  .dock{grid-template-columns:1fr auto auto;grid-template-areas:"pick sacks go"}
  .dock .sacks{min-width:190px}
}

/* ---------- the cart recomposes ---------- */
@media (min-width:1000px){
  :root{--mast:70px;--dockh:0px}
  body{padding-bottom:36px}
  #yoke{
    grid-template-columns:auto auto 1fr auto auto; grid-template-areas:"mark nav . buy hitch";
    gap:0 22px; padding:0 26px; height:var(--mast); align-items:center;
  }
  .ynav{border-top:0;margin:0;padding:0;gap:6px;height:100%}
  .ynav a{flex:0 0 auto;padding:0 12px;display:flex;align-items:center;border-bottom:4px solid transparent;margin-bottom:-4px;height:calc(var(--mast) + 0px)}
  .ymark img{width:34px;height:34px}
  .ymark span{font-size:18px}
  .ybuy{min-height:42px;padding:0 16px;gap:12px}
  .ybuy b{font-size:13px}
  #cart{
    max-width:1200px; padding:34px 34px 40px;
    display:grid; grid-template-columns:minmax(0,1.25fr) minmax(340px,.85fr); grid-template-rows:auto 1fr auto; gap:26px 34px; align-items:start;
  }
  .yard{grid-column:1;grid-row:1;order:0}
  .road{grid-column:1;grid-row:2;order:0}
  .side{display:flex;flex-direction:column;gap:18px;grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--mast) + 26px);order:0}
  .tally,.waybill{order:0}
  .ruts{grid-column:1 / -1;grid-row:3;order:0;margin:8px 0 0}
  .dock{position:static;border:2px solid var(--ink);padding:12px 14px 14px;grid-template-columns:1fr;grid-template-areas:"pick" "sacks" "go";gap:10px}
  .dock .pick{white-space:normal;flex-wrap:wrap}
  .dock .pick b{font-size:20px}
  .dock .go{min-height:52px;font-size:17px}
  .yard h1 .huge{font-size:168px}
  .yard h1 .word{font-size:44px;max-width:8em}
  .lede{font-size:16px;max-width:58ch}
  .wainbox{display:block;margin:18px 0 0}
  .wainbox svg{display:block;width:100%;max-width:520px;height:auto}
  .tally{grid-template-columns:repeat(2,1fr)}
  .cell dd{font-size:30px}
  .stepline{grid-template-columns:72px 1fr 120px 100px;min-height:60px}
  .stepline .num{font-size:30px}
  .stepline .pays{font-size:19px}
  .roadhead h2{font-size:20px}
  #hatch{align-items:center}
  .hatchbox{border-bottom:2px solid var(--ink)}
  .holler{bottom:26px}
}