/* Job Traveler marketing site.
 *
 * One stylesheet, no build step, no framework. The tokens below are the same values the
 * application declares in web/src/styles/globals.css, copied rather than imported because
 * this site deliberately shares no origin, no bundle and no deploy with the app. When a
 * token changes there, change it here too: the site and the product have to look like one
 * thing, and there is no tooling that will notice drift for you.
 *
 * Fonts are self hosted from assets/fonts/. Nothing on this page may reach an external
 * host, and the CSP in nginx.site.conf enforces that rather than trusting this comment.
 */

:root {
  --iron-950: #0e1114;  /* page ground */
  --iron-900: #14181c;  /* section ground */
  --iron-850: #1a1f24;  /* panel */
  --iron-800: #20262c;  /* card */
  --iron-700: #2a323a;  /* raised */
  --iron-600: #39434d;  /* strong border */
  --iron-500: #61717f;  /* standalone unjudged signal, 3:1 on card */
  --line:     #2c343c;  /* hairline */
  --ink:      #e9edf1;
  --ink-dim:  #9aa7b2;
  --ink-faint:#8d9aa6;
  --amber:    #ffab1a;
  --amber-deep:#d98600;
  --amber-dim:#3d2e12;
  --amber-hover:#ffbc45;
  --ok:       #46b36b;
  --ok-text:  #73d495;
  --ok-dim:   #1e3a2a;
  --ok-line:  #274434;
  --fail:     #e5484d;
  --fail-text:#f08488;
  --fail-text-strong:#f4b0b3;
  --fail-dim: #42191c;
  --fail-line:#5a2326;
  --warn:     #e8c33c;
  --warn-text:#f0d568;
  --warn-text-strong:#f4d59a;
  --warn-dim: #3a331a;
  --warn-line:#55491e;
  --info:     #4e9ed9;
  --info-text:#79bdea;
  --info-dim: #17293a;
  --info-line:#2c455c;

  --font-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter: 24px;
  --measure: 1180px;
}

@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--iron-950);
  /* The app's crosshatch, same angles and same opacity, so the two surfaces read as one. */
  background-image:
    repeating-linear-gradient(45deg, transparent 0 34px, rgba(255,255,255,.012) 34px 35px),
    repeating-linear-gradient(-45deg, transparent 0 34px, rgba(255,255,255,.012) 34px 35px);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
}

::selection { background: var(--amber); color: #14181c; }

a { color: var(--info); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
img, svg { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

/* Screen reader only, used for the skip link and for labels a sighted reader gets from
   layout instead of from words. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amber); color: #14181c; padding: 10px 16px; font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

/* - typography - */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: .015em; margin: 0; }
h1 { font-size: clamp(38px, 6.4vw, 72px); line-height: .98; text-transform: uppercase; }
h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.05; text-transform: uppercase; letter-spacing: .03em; }
h3 { font-size: 19px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
p { margin: 0 0 14px; }
.lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-dim); max-width: 60ch; }
.kicker {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 10px;
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* An aside about the page itself rather than about the product. Used by the skeleton to
   annotate a slot; a finished page should have few of these or none. */
.note { font-size: 13.5px; color: var(--ink-faint); margin: 12px 0 0; max-width: 60ch; }

/* - header - */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(20, 24, 28, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(8px);
}
.site-head .wrap { display: flex; align-items: center; gap: 16px; min-height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .mark {
  width: 28px; height: 28px; border-radius: 4px; background: var(--amber); color: #14181c;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: .02em; flex: none;
}
.brand .word {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1;
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.site-nav a {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 15px; color: var(--ink-dim); text-decoration: none; padding: 9px 12px; border-radius: 4px;
}
.site-nav a:hover { color: var(--ink); background: var(--iron-800); }
.site-nav a.on { color: var(--ink); background: var(--iron-700); box-shadow: inset 0 -2px 0 var(--amber); }
.site-nav a.signin { color: var(--ink); border: 1px solid var(--iron-600); margin-left: 8px; }
.site-nav a.signin:hover { border-color: var(--amber); }
/* The one call to action in the header, so it is the only filled thing in the nav.
   Sign in sits beside it as an outline, which is the right order of emphasis: a shop
   that already has an address knows where it is going, and a stranger does not. */
.site-nav a.start { color: var(--iron-900); background: var(--amber); font-weight: 600; margin-left: 8px; }
.site-nav a.start:hover { color: var(--iron-900); background: var(--amber); filter: brightness(1.08); }

.nav-toggle {
  display: none; margin-left: auto; background: var(--iron-800); color: var(--ink);
  border: 1px solid var(--iron-600); border-radius: 4px; padding: 8px 12px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 14px; min-height: 40px; cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--iron-900); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 14px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 8px; min-height: 44px; display: flex; align-items: center; }
  .site-nav a.signin { margin: 8px 0 0; justify-content: center; }
  .site-nav a.start { margin: 8px 0 0; justify-content: center; }
}

/* - sections - */
section { padding: 72px 0; border-bottom: 1px solid var(--line); }
section.hero { padding: 84px 0 72px; border-bottom: 1px solid var(--line); }
section:target { scroll-margin-top: 70px; }

.hero h1 em { font-style: normal; color: var(--amber); }
.hero .lede { margin-top: 18px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 11px 20px; border-radius: 7px; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: .05em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--amber); color: #14181c; }
.btn-primary:hover { background: #ffbc45; color: #14181c; }
.btn-ghost { border-color: var(--iron-600); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--amber); color: var(--ink); }

.shop-finder {
  margin: 24px 0 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--iron-800);
}
.shop-finder label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shop-finder-row { display: flex; align-items: stretch; }
.shop-finder-row input {
  min-width: 0;
  flex: 1 1 12rem;
  padding: 11px 12px;
  border: 1px solid var(--iron-600);
  border-radius: 7px 0 0 7px;
  background: var(--iron-900);
  color: var(--ink);
  font: 15px var(--font-mono);
  outline: none;
}
.shop-finder-row input:focus { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.shop-finder-row span {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--iron-600);
  border-left: 0;
  border-radius: 0 7px 7px 0;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.shop-finder .hint { margin: 8px 0 0; color: var(--ink-dim); font-size: 13px; }
.shop-finder-problem { min-height: 20px; margin: 6px 0; color: var(--fail); font-size: 13px; }

/* - cards and panels - */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; }
.card {
  background: var(--iron-800); border: 1px solid var(--line); border-left: 3px solid var(--iron-600);
  border-radius: 6px; padding: 18px 18px 16px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-dim); font-size: 15px; margin: 0; }

.panel {
  background: var(--iron-850); border: 1px solid var(--iron-600); border-radius: 8px; padding: 22px;
  box-shadow: 0 24px 60px -32px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
}

/* Verdict chips, same three colours the app and the printed sheet use. */
.b {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; font-weight: 600; display: inline-block;
}
.b-ok   { background: var(--ok-dim);   color: var(--ok); }
.b-fail { background: var(--fail-dim); color: #f08488; }
.b-warn { background: var(--warn-dim); color: var(--warn); }
.b-dim  { background: var(--iron-700); color: var(--ink-dim); }

/* - the printed traveler -
   An image of the application's own PDF rather than a drawing of one, built by
   scripts/make-traveler-image.py. The intrinsic size is on the img element so the hero
   reserves the space before the file decodes, and the width is capped by its column
   rather than by the file, which is 1700px wide and would otherwise scroll the page
   sideways on a phone. White ground because the paper is white and a transparent png
   over a dark page would render as a black sheet. */
.paper { margin: 0; }
.paper img {
  display: block; width: 100%; height: auto; background: #fff;
  border: 1px solid var(--iron-600); border-radius: 4px;
}
.paper figcaption { font-size: 13px; color: var(--ink-faint); margin-top: 12px; max-width: 60ch; }
.paper.wide { max-width: 640px; margin-top: 30px; }

/* - the on screen sheet -
   The same job as the app holds it: label on the left, value in mono on the right,
   verdict chip after it. Mono and tabular so the decimals line up in a column, which is
   how a machinist reads a row of deck heights and how the printed traveler sets them. */
.exhibit { max-width: 640px; margin-top: 30px; }
.sheet { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--iron-600); border-radius: 6px; overflow: hidden; }
.sheet .head, .sheet .row, .sheet .foot { background: var(--iron-850); padding: 11px 14px; }
.sheet .head { background: var(--iron-800); }
.sheet .head .who { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 17px; }
.sheet .head .meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); margin: 3px 0 0; }
.sheet .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.sheet .row .f { font-size: 14.5px; color: var(--ink-dim); flex: 1 1 46%; min-width: 0; }
.sheet .row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--ink); }
.sheet .row .lim { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); flex-basis: 100%; }
.sheet .row.bad { background: var(--fail-dim); }
.sheet .row.bad .v { color: #f08488; }
.sheet .row.bad .lim { color: #c98b8d; }
.sheet .foot { background: var(--iron-800); border-top: 1px solid var(--iron-600); font-size: 14px; color: var(--ink-dim); }
.sheet .foot b { color: #f08488; font-weight: 600; }
.caption { font-size: 13px; color: var(--ink-faint); margin: 12px 0 0; }

/* - the four failures, and the rule list -
   Numbered because the plan numbers them, and a reader who opens plan section 2 beside
   this page should find the same four in the same order. */
.evidence { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.evidence li {
  background: var(--iron-900); border: 1px solid var(--line); border-left: 3px solid var(--fail);
  border-radius: 6px; padding: 16px 18px;
}
.evidence .n { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; color: var(--fail); text-transform: uppercase; }
.evidence h3 { margin: 6px 0 6px; font-size: 17px; text-transform: none; letter-spacing: .01em; }
.evidence p { color: var(--ink-dim); font-size: 15px; margin: 0; }
.evidence .num { color: var(--ink); }

/* Rule table. A table because it is one: an id, a sentence, and how hard it bites. It
   scrolls inside itself on a phone rather than making the page scroll sideways. */
.tablewrap { overflow-x: auto; margin-top: 24px; border: 1px solid var(--line); border-radius: 6px; }
table.rules { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 15px; }
table.rules th, table.rules td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.rules thead th {
  background: var(--iron-800); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
}
table.rules tbody tr { background: var(--iron-850); }
table.rules tbody tr:last-child td { border-bottom: 0; }
table.rules td.id { font-family: var(--font-mono); font-weight: 600; color: var(--amber); width: 1%; white-space: nowrap; }
table.rules td.what { color: var(--ink-dim); }
table.rules td.grade { width: 1%; white-space: nowrap; }

/* A point that needs to stand on its own without shouting like a placeholder does. */
.callout {
  border: 1px solid var(--iron-600); border-left: 3px solid var(--amber);
  background: var(--iron-900); border-radius: 6px; padding: 16px 18px; margin: 24px 0 0;
}
.callout h3 { margin-bottom: 8px; }
.callout p { color: var(--ink-dim); font-size: 15px; }
.callout p:last-child { margin-bottom: 0; }

/* Numbered steps. The number is the point, so it is set in the display face at size.
   The minimum is 190px rather than a rounder number because there are five steps and a
   desktop has to fit all five on one line: at 210 the fifth wrapped on its own, which
   reads as a step that belongs to something else. */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 26px; }
.demo-video { max-width: 800px; margin: 28px 0 36px; }
.demo-video video { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--iron-900); }
.steps > li { list-style: none; background: var(--iron-800); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; }
.steps > li::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #14181c;
  background: var(--amber); border-radius: 3px; padding: 1px 7px; display: inline-block;
}
.steps h3 { margin: 10px 0 6px; }
.steps p { color: var(--ink-dim); font-size: 14.5px; margin: 0; }

/* FAQ. The visible answer and the JSON-LD answer are the same string, so nothing here
   may add markup inside a question or an answer: an entity or a tag would break the byte
   comparison the rich result depends on. */
.qa { border-top: 1px solid var(--line); padding: 18px 0 4px; }
.qa:first-of-type { border-top: 0; }
.qa h3 { font-size: 17px; text-transform: none; letter-spacing: .01em; margin-bottom: 8px; }
.qa p { color: var(--ink-dim); max-width: 74ch; }

/* - the placeholder banner -
   Every unwritten block on this site wears one. It is loud on purpose: the failure mode
   for a skeleton is placeholder copy that reads as finished and ships. Grep for the word
   PLACEHOLDER before any deploy; the hits left are contact.html's Turnstile test key. */
.placeholder {
  border: 1px dashed var(--warn);
  background: var(--warn-dim);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 18px 0;
}
.placeholder > .tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #14181c; background: var(--warn);
  padding: 2px 8px; border-radius: 3px; margin-bottom: 8px;
}
.placeholder p { color: #e6dcb4; font-size: 14.5px; margin: 0 0 8px; }
.placeholder p:last-child { margin-bottom: 0; }
.placeholder ul { color: #e6dcb4; font-size: 14.5px; margin: 0; padding-left: 20px; }
.placeholder ul + p { margin-top: 10px; }
.placeholder code { font-family: var(--font-mono); font-size: 13px; color: var(--warn); }

/* - definition rows, used by the sign in explainer and the legal pages - */
.rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.rows > div { background: var(--iron-850); padding: 14px 16px; }
.rows dt, .rows .t { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 15px; }
.rows dd, .rows .d { margin: 4px 0 0; color: var(--ink-dim); font-size: 15px; }

.addr {
  font-family: var(--font-mono); font-size: clamp(15px, 2.6vw, 22px); color: var(--ink);
  background: var(--iron-900); border: 1px solid var(--iron-600); border-radius: 6px;
  padding: 14px 16px; display: inline-block; word-break: break-all;
}
.addr b { color: var(--amber); font-weight: 600; }

/* - prose pages (privacy, terms) - */
.prose { max-width: 74ch; }
.prose h2 { margin: 34px 0 12px; }
.prose h3 { margin: 24px 0 8px; }
.prose ul { color: var(--ink-dim); padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose p { color: var(--ink-dim); }
.prose .updated { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; margin-top: 12px; }
.prose > h1 + p, .prose > .lede { margin-top: 14px; }

/* - footer - */
.site-foot { padding: 40px 0 56px; color: var(--ink-faint); font-size: 14px; }
.site-foot .cols { display: flex; flex-wrap: wrap; gap: 26px; align-items: baseline; }
.site-foot a { color: var(--ink-dim); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.site-foot .legal { margin-left: auto; text-align: right; }
@media (max-width: 700px) { .site-foot .legal { margin-left: 0; text-align: left; } }

/* - 404 - */
.notfound { min-height: 58vh; display: grid; align-content: center; }
.notfound .code { font-family: var(--font-mono); font-size: 13px; letter-spacing: .3em; color: var(--fail); }

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