/* Journeyman Standard — machine enamel + steel plate
   Page is dark equipment housing. The answer sits on a brushed
   steel data plate. Hi-vis amber is rationed: active tab, the
   number, the email tape. Nothing else gets to be loud. */

:root{
  /* housing */
  --paper:#15171B;
  --panel:#1C1F25;
  --panel2:#23272E;
  --rule:#2C313A;
  --rule-lit:#3C434E;

  /* plate */
  --plate:#C7C4BB;
  --plate-2:#B4B1A8;
  --plate-ink:#141519;

  /* type */
  --ink:#E6E3DA;
  --muted:#8B929C;

  /* rationed colour */
  --carbon:#FFB000;
  --canary:#241C0B;
  --stamp:#9A3E23;
  --green:#4E9C61;
  --red:#D94A32;

  --display:"Barlow Condensed",Impact,sans-serif;
  --body:"Barlow",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:44px 44px;
}
.wrap{max-width:780px;margin:0 auto;padding:0 20px}
a{color:var(--carbon)}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--carbon);outline-offset:2px
}

/* ─── nav: lit panel buttons ─────────────────────────── */
.sitenav{
  background:#101216;
  border-bottom:1px solid var(--rule-lit);
  position:sticky;top:0;z-index:40;
}
.sitenav .wrap{
  display:flex;align-items:stretch;gap:0;
  padding:0 20px;overflow-x:auto;scrollbar-width:none;
}
.sitenav .wrap::-webkit-scrollbar{display:none}
/* right-edge fade: signals the tab strip scrolls */
.sitenav{position:sticky}
.sitenav::after{
  content:"";position:absolute;right:0;top:0;bottom:1px;width:34px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(16,18,22,0),rgba(16,18,22,.96));
}
.sitenav .home{
  display:flex;align-items:center;
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:19px;
  color:var(--ink);text-decoration:none;
  padding:13px 18px 13px 0;margin-right:14px;
  white-space:nowrap;border-right:1px solid var(--rule-lit);
}
.sitenav .home:hover{color:var(--carbon)}
.sitenav a.tool{
  display:flex;align-items:center;
  font-family:var(--display);font-size:16px;font-weight:500;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);text-decoration:none;
  padding:13px 15px;white-space:nowrap;
  border-bottom:3px solid transparent;
  transition:color .12s,border-color .12s,background .12s;
}
.sitenav a.tool:hover{color:var(--ink);background:rgba(255,176,0,.06)}
.sitenav a.tool[aria-current=page]{
  color:var(--carbon);
  border-bottom-color:var(--carbon);
  background:rgba(255,176,0,.08);
}

/* ─── masthead ───────────────────────────────────────── */
.masthead{padding:34px 0 24px;margin-bottom:30px;border-bottom:1px solid var(--rule-lit)}
.docket{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
  padding-bottom:12px;margin-bottom:20px;border-bottom:1px solid var(--rule);
}
h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,8.5vw,64px);line-height:.98;
  letter-spacing:-.005em;text-transform:uppercase;margin:0 0 16px;
}
.standfirst{font-size:18.5px;max-width:58ch;margin:0;color:#B8B5AD;line-height:1.55}

/* ─── carbon chip ────────────────────────────────────── */
.carbon{
  display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  background:var(--canary);color:var(--carbon);
  border:1px solid rgba(255,176,0,.3);
  font-family:var(--mono);font-size:12px;font-weight:500;
  padding:5px 10px;border-radius:2px;
}
.carbon .src{font-weight:400;opacity:.6;font-size:11px}
.carbon a{color:var(--carbon)}

/* ─── sheets ─────────────────────────────────────────── */
.sheet{
  background:var(--panel);border:1px solid var(--rule);
  border-radius:3px;padding:26px 22px 24px;margin:0 0 26px;
}
.sheet-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule-lit);
  padding-bottom:13px;margin-bottom:22px;
}
.toolno{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--carbon);font-weight:500;
}
h2{
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.015em;
  font-size:27px;margin:0;flex:1 1 auto;line-height:1.1;
}
h3{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:16px;letter-spacing:.09em;color:var(--carbon);
  margin:26px 0 12px;padding-left:11px;border-left:3px solid var(--carbon);
}
.sheet h3:first-of-type{margin-top:0}
.lead{margin:-8px 0 20px;font-size:15.5px;color:var(--muted)}

.row{
  display:flex;align-items:center;gap:14px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.045);
}
.row label{flex:1 1 auto;font-size:15.5px}
.row .hint{display:block;font-size:13px;color:var(--muted);line-height:1.42;margin-top:2px}
input[type=number]{
  width:118px;flex:0 0 auto;
  font-family:var(--mono);font-size:16.5px;font-weight:500;
  text-align:right;padding:9px 10px;
  border:1px solid var(--rule-lit);border-radius:2px;
  background:#101318;color:var(--ink);
}
input[type=number]:focus{border-color:var(--carbon);background:#0C0E12}
input[type=email]{
  width:100%;font-size:16.5px;padding:13px 14px;
  border:1px solid var(--rule-lit);border-radius:2px;
  background:#101318;color:var(--ink);font-family:var(--body);
}
input[type=email]::placeholder{color:#5D646E}
.pre{font-family:var(--mono);color:var(--muted);font-size:15px;flex:0 0 auto}

/* ─── THE PLATE: signature element ───────────────────── */
.readout{
  position:relative;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
    linear-gradient(168deg,var(--plate) 0%,var(--plate-2) 58%,#A29F96 100%);
  color:var(--plate-ink);
  border-radius:3px;padding:24px 22px;margin-top:26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 rgba(0,0,0,.35);
}
.readout::before,.readout::after{
  content:"";position:absolute;top:9px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F2F0EA,#6E6B63);
}
.readout::before{left:9px}
.readout::after{right:9px}
.readout .lede{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#5A5750;margin-bottom:10px;
}
.big{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(40px,10vw,62px);line-height:1;
  letter-spacing:-.03em;color:var(--plate-ink);
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.big .unit{font-size:18px;opacity:.5;font-weight:400;letter-spacing:0}
.readout .note{font-size:14.5px;color:#4A4740;margin-top:14px;line-height:1.5}
.subline{
  display:flex;justify-content:space-between;gap:14px;
  border-top:1px solid rgba(20,21,25,.16);
  margin-top:15px;padding-top:12px;
  font-family:var(--mono);font-size:14px;color:#3E3B35;
  font-variant-numeric:tabular-nums;
}
.subline span:last-child{font-weight:600;color:var(--plate-ink)}
.neg{color:#93230F}

.readout--alert{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),
    linear-gradient(168deg,#A34627 0%,#8A3620 60%,#742C19 100%);
  color:#FBEDE7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 0 rgba(0,0,0,.4);
}
.readout--alert .lede{color:#F0C3B2}
.readout--alert .big{color:#FFF4EE;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.readout--alert .subline{border-top-color:rgba(255,255,255,.18);color:#F2D2C6}
.readout--alert .subline span:last-child{color:#FFF}
.readout--alert .note{color:#F0CFC2}
.readout--alert .neg{color:#FFD9CE}

/* ─── verdict ────────────────────────────────────────── */
.verdict{
  border-left:4px solid var(--stamp);background:var(--panel2);
  padding:16px 18px;margin-top:20px;font-size:15.5px;
  border-radius:0 3px 3px 0;color:#C8C5BD;
}
.verdict.ok{border-left-color:var(--green)}
.verdict strong{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  display:block;font-size:15px;margin-bottom:5px;color:#E08A64;
}
.verdict.ok strong{color:#77C98C}

/* ─── EMAIL: hazard tape ─────────────────────────────── */
.email-panel{
  position:relative;background:var(--panel2);
  border:1px solid rgba(255,176,0,.34);padding-top:34px;
}
.email-panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:12px;
  background:repeating-linear-gradient(-45deg,var(--carbon) 0 11px,#15171B 11px 22px);
  opacity:.9;
}
.email-panel .sheet-head{border-bottom-color:rgba(255,176,0,.28)}
.email-panel h2{color:var(--carbon)}
.email-label{
  display:block;font-size:12px;text-transform:uppercase;letter-spacing:.11em;
  font-family:var(--display);font-weight:600;color:var(--carbon);margin-bottom:7px;
}

/* ─── buttons ────────────────────────────────────────── */
.btn{
  display:inline-block;background:var(--carbon);color:#15171B;
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:18px;
  padding:13px 26px;border-radius:2px;text-decoration:none;
  border:none;cursor:pointer;box-shadow:0 2px 0 #B37B00;
}
.btn:hover{background:#FFC233}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #B37B00}

/* ─── next-tool cards ────────────────────────────────── */
.next{
  display:block;background:var(--panel);
  border:1px solid var(--rule);border-left:4px solid var(--rule-lit);
  border-radius:3px;padding:17px 19px;margin:0 0 12px;
  text-decoration:none;color:var(--ink);
  transition:border-color .12s,background .12s;
}
.next:hover{border-left-color:var(--carbon);background:var(--panel2)}
.next .n-kick{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--carbon);
}
.next .n-title{
  font-family:var(--display);font-weight:600;font-size:22px;
  text-transform:uppercase;margin:4px 0 5px;line-height:1.1;
}
.next .n-desc{font-size:14.5px;color:var(--muted);line-height:1.45}

/* ─── book ───────────────────────────────────────────── */
.book{
  border:1px solid var(--rule-lit);border-top:3px solid var(--stamp);
  border-radius:3px;padding:24px;margin:0 0 26px;background:var(--panel);
}
.book .kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#C4623F;margin-bottom:9px;
}
.book h2{font-size:24px;margin-bottom:10px}
.book p{font-size:15.5px;margin:0 0 14px;color:#C8C5BD}

/* ─── prose ──────────────────────────────────────────── */
.prose{max-width:66ch;margin:0 auto 44px}
.prose h2{font-size:30px;margin:40px 0 14px;color:var(--ink)}
.prose h3{
  color:var(--ink);font-size:20px;letter-spacing:.01em;text-transform:none;
  margin:30px 0 8px;font-family:var(--display);font-weight:600;
  padding-left:0;border-left:none;
}
.prose p{margin:0 0 17px;color:#C8C5BD}
.prose ul{padding-left:20px;margin:0 0 17px;color:#C8C5BD}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink)}
.formula{
  font-family:var(--mono);background:#101318;
  border:1px solid var(--rule-lit);border-left:3px solid var(--carbon);
  padding:17px;border-radius:2px;font-size:14.5px;
  line-height:1.75;overflow-x:auto;color:#B9C0C9;
}
.disclosure{
  background:var(--canary);border:1px solid rgba(255,176,0,.28);
  border-radius:2px;padding:12px 15px;font-size:13.5px;
  margin-bottom:28px;color:#D8C296;
}

footer{
  border-top:1px solid var(--rule-lit);
  padding:28px 0 90px;margin-top:24px;
  font-size:13.5px;color:var(--muted);
}
footer a{color:var(--muted)}

/* ─── sticky prompt ──────────────────────────────────── */
#stickyCta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;align-items:center;gap:12px;
  background:var(--carbon);color:#15171B;padding:11px 16px;
  box-shadow:0 -3px 14px rgba(0,0,0,.45);
}
#stickyCta.on{display:flex}
#stickyCta .msg{
  flex:1 1 auto;font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;font-size:17px;line-height:1.15;
}
#stickyCta .go{
  flex:0 0 auto;background:#15171B;color:var(--carbon);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:16px;
  border:none;border-radius:2px;padding:10px 16px;cursor:pointer;
}
#stickyCta .x{
  flex:0 0 auto;background:transparent;border:none;color:#15171B;
  font-size:24px;line-height:1;cursor:pointer;padding:4px 6px;opacity:.55;
}
#stickyCta .x:hover{opacity:1}


/* ── desktop: no horizontal scroll, because there's no thumb to swipe with.
   Give the tab strip the full width and let it wrap if it still won't fit. ── */
@media (min-width:561px){
  .sitenav .wrap{
    max-width:1180px;
    flex-wrap:wrap;
    overflow-x:visible;
    row-gap:0;
  }
  .sitenav a.tool{padding:13px 13px}
  .sitenav::after{display:none}
}
/* mouse users who still end up with an overflowing strip get a visible bar */
@media (hover:hover) and (pointer:fine){
  .sitenav .wrap{scrollbar-width:thin;scrollbar-color:#3C434E transparent}
  .sitenav .wrap::-webkit-scrollbar{display:block;height:6px}
  .sitenav .wrap::-webkit-scrollbar-thumb{background:#3C434E;border-radius:3px}
  .sitenav .wrap::-webkit-scrollbar-track{background:transparent}
}

@media (max-width:560px){
  .row{flex-wrap:wrap;gap:8px}
  .row label{flex:1 1 100%}
  input[type=number]{width:100%;text-align:left}
  .pre{display:none}
  .sheet{padding:22px 17px 20px}
  .readout{padding:22px 18px}
  #stickyCta .msg{font-size:15px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* section eyebrow above link cards — quieter than a form h3 */
.eyebrow{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;font-size:14px;color:var(--muted);
  margin:0 0 13px;padding-left:0;border-left:none;
}