/* Helmry — the bridge. A chart-recorder tape printed on newsprint: one pen, one lane, two hands on the wheel. */
:root{
  --deep:#07090A; --paper:#0D1011; --paper2:#101415; --ink:#EDEAE1; --dim:#8B8F87; --faint:#585D57;
  --pen:#9EF01A; --pen-soft:rgba(158,240,26,.16); --pen-line:rgba(158,240,26,.42);
  --hair:rgba(237,234,225,.13); --hair2:rgba(237,234,225,.07);
  --bridge-h:64px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--deep); color:var(--ink);
  font:400 14px/1.5 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-bottom:calc(var(--bridge-h) + env(safe-area-inset-bottom));
}
a{color:inherit}
h1,h2,h3,.nameplate,.headline{font-family:"Libre Caslon Display",Georgia,serif;font-weight:400}
code{font-family:inherit}
.figure{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- the flag (newspaper nameplate, in flow) ---- */
.flag{border-bottom:2px solid var(--ink);padding:14px 16px 0}
.flagtop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.nameplate{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:30px;letter-spacing:.02em;line-height:1}
.nameplate img{width:30px;height:30px;display:block}
.nameplate b{font-weight:400}
.hook{background:none;border:1px solid var(--hair);color:var(--dim);font:inherit;font-size:11px;
  padding:6px 10px;border-radius:2px;cursor:pointer;letter-spacing:.06em;text-transform:uppercase}
.hook:hover{border-color:var(--pen);color:var(--pen)}
.hook.on{color:var(--pen);border-color:var(--pen-line)}
.edition{display:flex;flex-wrap:wrap;gap:4px 14px;border-top:1px solid var(--hair);margin-top:12px;padding:7px 0;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.edition b{color:var(--dim);font-weight:400}
.edition .lit{color:var(--pen)}
.ways{display:flex;gap:14px;margin-left:auto}
.ways a{color:var(--faint);text-decoration:none}
.ways a:hover,.ways a[aria-current]{color:var(--pen)}

/* ---- deck ---- */
#deck{max-width:1180px;margin:0 auto;padding:18px 16px 40px;display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.plate{background:var(--paper);border:1px solid var(--hair);border-radius:3px;position:relative}
.plate::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:3px;opacity:.5;
  background-image:radial-gradient(rgba(237,234,225,.05) .5px,transparent .5px);background-size:3px 3px}
.plate>*{position:relative}
.slugline{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 13px;border-bottom:1px solid var(--hair);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.slugline em{font-style:normal;color:var(--pen)}

/* ---- the chart ---- */
.chart{overflow:hidden}
.paperwrap{padding:10px 8px 4px}
svg.paper{display:block;width:100%;height:auto}
.gridline{stroke:var(--hair2);stroke-width:1}
.gridline.ten{stroke:var(--hair)}
.laneband{fill:var(--pen-soft)}
.laneedge{stroke:var(--pen-line);stroke-width:1;stroke-dasharray:2 4}
.midline{stroke:var(--pen-line);stroke-width:1;stroke-dasharray:1 5}
.seg{stroke-width:2.4;fill:none;stroke-linecap:round}
.seg.out{stroke:#6E736B}
.seg.in{stroke:var(--pen)}
.seg.fixed{stroke:var(--pen);stroke-opacity:.5;stroke-dasharray:3 4;stroke-width:2}
.penhead{fill:var(--pen)}
.penarm{stroke:var(--pen);stroke-width:1;stroke-dasharray:2 3;stroke-opacity:.7}
.bar{fill:#4B5049}
.bar.pays{fill:var(--pen);fill-opacity:.75}
.tick-label{fill:var(--faint);font:400 9px "IBM Plex Mono",monospace;letter-spacing:.08em}
.scale-label{fill:var(--faint);font:400 9px "IBM Plex Mono",monospace}
.penlabel{fill:var(--pen);font:400 9px "IBM Plex Mono",monospace;letter-spacing:.08em}

.readout{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border-top:1px solid var(--hair)}
.cell{background:var(--paper);padding:11px 13px}
.cell .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cell .v{font-size:23px;line-height:1.15;margin-top:3px}
.cell .v.lit{color:var(--pen)}
.cell .s{font-size:11px;color:var(--dim);margin-top:2px}

/* ---- the wheel and the hands ---- */
.cmd{padding:14px 13px 16px}
.wheelrow{display:flex;align-items:center;gap:14px}
.wheelbox{width:86px;height:86px;flex:0 0 86px}
.wheelbox svg{width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.rim{stroke:var(--dim);stroke-width:4;fill:none}
.spoke{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.hub{fill:var(--pen)}
.wheelsay{flex:1;min-width:0}
.wheelsay .big{font-size:16px;line-height:1.35}
.wheelsay .sub{font-size:11.5px;color:var(--dim);margin-top:4px}
.handset{display:flex;align-items:stretch;gap:8px;margin-top:14px}
.step{display:flex;align-items:center;border:1px solid var(--hair);border-radius:2px;background:var(--paper2)}
.step button{width:34px;background:none;border:0;color:var(--dim);font:inherit;font-size:17px;cursor:pointer;padding:0}
.step button:hover{color:var(--pen)}
.step .n{min-width:44px;text-align:center;font-size:17px;padding:9px 0}
.pull{flex:1;border:1px solid var(--pen-line);background:transparent;color:var(--pen);font:inherit;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;padding:12px 6px;border-radius:2px;cursor:pointer}
.pull:hover:not(:disabled){background:var(--pen);color:#06210A}
.pull:disabled{opacity:.35;cursor:not-allowed;border-color:var(--hair);color:var(--faint)}
@media (max-width:430px){.pull{font-size:11px;letter-spacing:.03em;padding:12px 2px;white-space:nowrap}.step button{width:28px}.step .n{min-width:36px}}
.lands{margin-top:10px;font-size:11.5px;color:var(--dim);border-left:2px solid var(--pen-line);padding-left:9px}
.lands b{color:var(--ink);font-weight:400}
.costline{margin-top:8px;font-size:11px;color:var(--faint)}

/* ---- the column beside ---- */
.beside{display:grid;gap:18px;align-content:start}
.crewlist,.movelog{max-height:none}
.line{display:flex;align-items:baseline;gap:9px;padding:8px 13px;border-bottom:1px solid var(--hair2);font-size:12px}
.line:last-child{border-bottom:0}
.line .who{color:var(--dim);text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line .who:hover{color:var(--pen)}
.line .amt{color:var(--ink)}
.line .when{color:var(--faint);font-size:10.5px;min-width:30px;text-align:right}
.side{display:inline-block;min-width:22px;font-size:10px;letter-spacing:.1em;color:var(--faint)}
.side.sb{color:var(--pen)}
.empty{padding:16px 13px;color:var(--faint);font-size:12px;line-height:1.6}
.primer{padding:13px}
.primer p{margin:0 0 9px;font-size:12px;line-height:1.65;color:var(--dim)}
.primer p:last-child{margin-bottom:0}
.primer b{color:var(--ink);font-weight:400}
.primer .hl{color:var(--pen)}

/* ---- prose ---- */
.sheet2{padding:16px 15px 20px}
.sheet2 h2{font-size:25px;margin:0 0 10px}
.sheet2 h3{font-size:16px;margin:20px 0 6px;color:var(--pen)}
.sheet2 p{margin:0 0 10px;font-size:12.5px;line-height:1.75;color:var(--dim);max-width:62ch}
.sheet2 code{color:var(--ink);word-break:break-all}
.headline{font-size:clamp(26px,7vw,40px);line-height:1.1;margin:0 0 8px}
.headline em{font-style:italic;color:var(--pen)}
.standfirst{font-size:13px;line-height:1.7;color:var(--dim);margin:0;max-width:66ch}
.lede{padding:16px 15px}
.claimbtn{background:var(--pen);color:#06210A;border:0;font:inherit;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 14px;border-radius:2px;cursor:pointer;margin:10px 13px 13px}

/* ---- the bridge plate (fixed at every width; carries the buy) ---- */
#bridge{position:fixed;left:0;right:0;bottom:0;z-index:40;height:var(--bridge-h);
  display:flex;align-items:center;gap:10px;padding:0 12px calc(env(safe-area-inset-bottom)/1);
  background:rgba(7,9,10,.95);border-top:1px solid var(--pen-line);backdrop-filter:blur(7px)}
#bridge .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
#bridge .gauge{display:flex;flex-direction:column;line-height:1.1;min-width:0}
#bridge .gauge .g1{font-size:15px}
#bridge .gauge .g2{font-size:10px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
#bridge .lit{color:var(--pen)}
#bridge .buy{margin-left:auto;white-space:nowrap;text-decoration:none;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 15px;border-radius:2px;background:var(--pen);color:#06210A}
#bridge .buy.cold{background:transparent;color:var(--faint);border:1px solid var(--hair);cursor:default}
#bridge .ca{display:none}

/* ---- colophon ---- */
.colophon{border-top:1px solid var(--hair);padding:16px;max-width:1180px;margin:0 auto;
  font-size:11px;color:var(--faint);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.colophon code{color:var(--dim);word-break:break-all}
.colophon a{color:var(--dim)}
.copy{background:none;border:1px solid var(--hair);color:var(--faint);font:inherit;font-size:10px;
  padding:3px 7px;border-radius:2px;cursor:pointer}
.note{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bridge-h) + 14px);z-index:60;
  background:var(--ink);color:var(--deep);font-size:12px;padding:9px 14px;border-radius:2px;max-width:88vw}

/* ---- wider ---- */
@media (min-width:720px){
  body{font-size:14.5px}
  .nameplate{font-size:40px}.nameplate img{width:38px;height:38px}
  #deck{padding:22px 22px 48px;gap:22px}
  .readout{grid-template-columns:repeat(4,1fr)}
  .cell .v{font-size:27px}
  .wheelbox{width:112px;height:112px;flex:0 0 112px}
  .wheelsay .big{font-size:18px}
  .headline{font-size:44px}
}
@media (min-width:1000px){
  :root{--bridge-h:60px}
  body{padding-bottom:0;padding-top:var(--bridge-h)}
  #bridge{top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--pen-line);padding:0 24px}
  #bridge .ca{display:block;font-size:10.5px;color:var(--faint);letter-spacing:.04em}
  .note{bottom:26px}
  #deck{grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);align-items:start;padding:26px 24px 56px}
  .chart{grid-column:1}
  .cmd{grid-column:1}
  .beside{grid-column:2;grid-row:1 / span 3}
  .sheet2,.lede{grid-column:1 / -1}
  .nameplate{font-size:46px}
  .paperwrap{padding:14px 12px 6px}
  .cell .v{font-size:30px}
  .wheelbox{width:130px;height:130px;flex:0 0 130px}
  .wheelsay .big{font-size:20px}
  .headline{font-size:52px}
}