/* Route 66 Environmental: weed wash operators wanted.
   Built from the job's own materials: the yellow paint of the wash trailer (the hero, the apply band),
   a stamped aluminium equipment plate (the unit, and the cut corners on buttons, photos and the form),
   and the numbered parts and ruled fields of fire-contract paperwork.
   Barlow is drawn from California highway signs, which suits a company named for Route 66.
   Design and motion spec: Penpot file "New File 1", page "Wildfire Jobs — Redesign" (Motion board). */
@font-face { font-family: "Barlow"; src: url("barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("barlow-semi-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("barlow-semi-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --concrete: #e3e5e0;   /* page ground */
  --sheet: #fbfbf8;      /* form paper, photo mats */
  --ink: #141613;
  --steel: #565d56;      /* secondary text */
  --rule: #b9bdb6;       /* light rules between rows */
  --paint: #efc11a;      /* trailer yellow: hero, apply band, primary button. The one "act here" colour */
  --forest: #2e5b43;     /* links */
  --on-paint: #1a1c19;   /* text on yellow and on the aluminium plate, in either scheme */
  --light: #f2f3ef;      /* text on the ink bars, in either scheme */
  --alu: #cdd1cc;
  --mud: #8a6a45;        /* the unwashed part of the wash track */
  --water: rgba(236, 246, 248, .95);
  --focus-fill: #fff6cc;
  --page-ink: #141613;   /* the scheme's ink, for paper that sits on the paint band */
  --page-steel: #565d56;
  --cond: "Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --wide: 1180px;
  --gutter: max(16px, calc((100vw - var(--wide)) / 2));
  --gap: clamp(56px, 8vw, 112px);
  --cut: 12px;           /* the stamped-plate corner */
  --chamfer: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  /* motion tokens */
  --t-fast: 160ms;
  --t-med: 420ms;
  --t-slow: 900ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-wash: cubic-bezier(.7, 0, .2, 1);   /* the wash pass only */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --concrete: #171b18;
    --sheet: #20261f;
    --ink: #e6e9e3;
    --steel: #a3aaa1;
    --rule: #3a443c;
    --forest: #8cc3a2;
    --focus-fill: #2c2a17;
    --page-ink: #e6e9e3;
    --page-steel: #a3aaa1;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--concrete); color: var(--ink);
  font: 400 17px/1.55 var(--body);
  padding-inline: max(16px, env(safe-area-inset-left));
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--forest); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
main, .masthead, .foot { max-width: var(--wide); margin-inline: auto; }
h1, h2, h3 { font-family: var(--cond); line-height: 1.02; margin: 0; letter-spacing: -.005em; }
h2 { font-size: clamp(2rem, 3.6vw, 3.3rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
.idx { display: block; margin-bottom: 12px; font: 600 .9rem/1 var(--cond); letter-spacing: .06em; color: var(--steel); font-variant-numeric: tabular-nums; }
cite { font: normal 500 .76rem var(--body); color: var(--steel); white-space: nowrap; }
.note { color: var(--steel); margin: 0 0 20px; max-width: 62ch; }

/* ---------- skip link: hidden until focused ---------- */
.skip {
  position: absolute; z-index: 30; left: 16px; top: -60px; padding: 10px 16px;
  background: var(--on-paint); color: var(--paint); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }
main:focus { outline: none; }

/* ---------- masthead: painted, sticky; turns to an ink bar once the hero has scrolled away ---------- */
.masthead {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: max(14px, env(safe-area-inset-top)) 14px;
}
.home { display: inline-flex; align-items: center; gap: 10px; font: 700 1.2rem/1.1 var(--cond); color: inherit; text-decoration: none; }
.home .home-town { font: 500 .9rem var(--body); opacity: .72; }
.tag {   /* a stamped plate with the route number */
  display: inline-grid; place-items: center; width: 38px; height: 28px; clip-path: var(--chamfer); --cut: 7px;
  background: var(--on-paint); color: var(--paint); font: 700 1rem/1 var(--cond); letter-spacing: .02em;
}
.nav { display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: .95rem; }
.nav a:not(.btn) { color: inherit; text-decoration: none; background: linear-gradient(currentColor 0 0) left bottom / 0 2px no-repeat; transition: background-size var(--t-fast) var(--ease-out); padding-bottom: 2px; }
.nav a:not(.btn):hover, .nav a:not(.btn):focus-visible { background-size: 100% 2px; }
.nav-tel { font-variant-numeric: tabular-nums; }
.ad .masthead {
  position: sticky; top: 0; z-index: 25; --bar: var(--paint);
  background: var(--bar); color: var(--on-paint); box-shadow: 0 0 0 100vmax var(--bar); clip-path: inset(0 -100vmax);
  transition: background-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.ad .masthead.stuck { --bar: var(--on-paint); color: var(--light); }
.ad .masthead.stuck .tag { background: var(--paint); color: var(--on-paint); }
.ad .masthead .btn { --btn-bg: var(--on-paint); --btn-fg: var(--paint); }
.ad .masthead.stuck .btn { --btn-bg: var(--paint); --btn-fg: var(--on-paint); }

/* ---------- buttons: stamped-plate corners; a light fill sweeps in from the side the pointer entered ---------- */
.btn {
  --btn-bg: var(--paint); --btn-fg: var(--on-paint); --btn-hover-bg: #fbfbf8; --btn-hover-fg: #1a1c19;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  font: 700 1.05rem/1 var(--body); color: var(--btn-fg); background: var(--btn-bg); border: 0; border-radius: 0;
  clip-path: var(--chamfer); text-decoration: none; cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-hover-bg);
  transform: scaleX(0); transform-origin: var(--from, left); transition: transform var(--t-fast) var(--ease-out);
}
.btn:hover, .btn:focus-visible { color: var(--btn-hover-fg); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:focus-visible { clip-path: none; outline: 3px solid var(--on-paint); outline-offset: 2px; }
.btn-go::after { content: "→"; margin-left: 10px; transition: transform var(--t-fast) var(--ease-out); }
.btn-go:hover::after, .btn-go:focus-visible::after { transform: translateX(4px); }
.btn-small { min-height: 38px; padding: 0 16px; font-size: .95rem; --cut: 9px; }
.btn-ink { --btn-bg: var(--on-paint); --btn-fg: var(--paint); }

/* ---------- hero: the painted panel, with the photo bleeding off the right edge ---------- */
.hero {
  position: relative; overflow-x: clip;   /* the glint never paints past the edge */
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 80px);
  margin-inline: calc(50% - 50vw); padding-inline: var(--gutter);
}
.hero::before { content: ""; grid-area: 1 / 1 / 3 / -1; margin-inline: calc(-1 * var(--gutter)); background: var(--paint); }
/* Headlights on sign sheeting: a soft band of light crosses the paint now and then (motion.js pauses it off screen). */
.hero::after {
  content: ""; grid-area: 1 / 1 / 3 / -1; margin-inline: calc(-1 * var(--gutter)); pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .34) 48%, rgba(255, 255, 255, .1) 52%, transparent 62%);
  transform: translateX(-100%); opacity: 0;
}
.hero-head, .hero-pay, .hero-body { z-index: 1; color: var(--on-paint); }
.hero-head { grid-area: 1 / 1; padding-top: clamp(32px, 6vw, 88px); }
.hero-body { grid-area: 2 / 1; padding-bottom: clamp(32px, 5vw, 64px); }
.hero h1 {
  font-size: clamp(3rem, 8vw, 7.4rem); line-height: .86; text-transform: uppercase; letter-spacing: -.01em;
}
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.hero h1 .ln > span { display: block; }
.hero-pay { grid-area: 1 / 2; align-self: end; margin: 0; padding-top: 32px; font-size: 1.02rem; max-width: 42ch; }
.hero-pay strong { display: block; font: 700 clamp(3rem, 6.2vw, 5.8rem)/.9 var(--cond); letter-spacing: -.015em; }   /* the day rate leads */
.hero-pay .pay-week { display: block; margin-top: 10px; font: 700 clamp(1.3rem, 2.1vw, 1.75rem)/1.1 var(--cond); }
.hero-pay .pay-hour { display: block; margin-top: 4px; font-weight: 500; }
.hero-line { margin: 30px 0 0; max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.5; }
.hero-friend {
  margin: 22px 0 0; max-width: 46ch; padding: 2px 0 2px 16px; font-size: 1.02rem;
  border-left: 4px solid var(--on-paint);
}
.hero-friend strong { font: 700 1.2rem/1.2 var(--cond); margin-right: 2px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 30px 0 0; }
.hero-actions .btn { min-height: 54px; padding: 0 28px; font-size: 1.1rem; }
.hero-actions span { font-weight: 500; }
.hero-tel { color: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 38px 0 0; border-top: 2px solid var(--on-paint); }
.hero-specs > div { padding: 12px 14px 0; border-left: 1px solid color-mix(in srgb, var(--on-paint) 35%, transparent); }
.hero-specs > div:first-child { border-left: 0; padding-left: 0; }
.hero-specs dt { font-weight: 600; font-size: .82rem; opacity: .8; }
.hero-specs dd { margin: 2px 0 0; font-size: .86rem; line-height: 1.35; }
.hero-specs strong { display: block; font: 700 2rem/1 var(--cond); margin-bottom: 4px; }
.hero cite, .band-paint cite { color: color-mix(in srgb, var(--on-paint) 70%, transparent); }
.hero-print { grid-area: 2 / 2 / 4 / 3; align-self: start; z-index: 1; margin: 0 calc(-1 * var(--gutter)) 0 0; padding-top: 28px; }
.hero-print img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  --cut: 26px; clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.hero-print figcaption { padding-right: var(--gutter); }
.hero-print figcaption, .camp-photo figcaption, .near-photo figcaption { font-size: .78rem; color: var(--steel); padding-top: 8px; }
.dispatch { grid-area: 3 / 1; margin: 0; padding: 26px 0 0; max-width: 58ch; font-size: 1rem; }
.dispatch strong { display: block; font: 700 1.3rem var(--cond); }

/* Photo frames: the image sits in a frame the wash pass can wipe across (motion.js). */
.frame { position: relative; display: block; }
.frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent calc(100% - 26px), var(--water) calc(100% - 3px), transparent 100%);
}

/* ---------- sections: a numbered part, its rule drawn across the top ---------- */
.rail, .pair { position: relative; margin-top: var(--gap); padding-top: 22px; }
.rail::before, .pair::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ink); transform-origin: left;
}
.rail { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); }
.rail > h2 { align-self: start; position: sticky; top: 84px; }
.rail-body { min-width: 0; }
.band-sheet, .band-paint, .band-night {
  --pad: clamp(48px, 7vw, 96px);
  margin-inline: calc(50% - 50vw); padding: calc(var(--pad) + 22px) var(--gutter) var(--pad);
}
.band-sheet::before, .band-paint::before, .band-night::before { left: var(--gutter); right: var(--gutter); top: var(--pad); }
.band-sheet { background: var(--sheet); }
.band-paint { background: var(--paint); color: var(--on-paint); --ink: #1a1c19; --steel: #3d413b; }
.band-paint a { color: var(--on-paint); }
.band-paint .idx { color: color-mix(in srgb, var(--on-paint) 70%, transparent); }
/* The wash runs at night as often as by day: the steps sit on an ink band, the page's colours turned over. */
.band-night {
  --concrete: #101310; --sheet: #181d18; --ink: #e6e9e3; --steel: #9aa39a; --rule: #323b33; --forest: #8cc3a2;
  background: #101310; color: var(--ink);
}
.band-sheet + .band-paint, .band-night + .band-paint { margin-top: 0; }

/* ---------- the job: two fields of one form, side by side ---------- */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; --split: clamp(28px, 4vw, 56px); }
.pair-col { padding-right: var(--split); }
.pair-col + .pair-col { padding: 0 0 0 var(--split); border-left: 1px solid var(--rule); align-self: stretch; }
.pair-col h2 { margin-bottom: 22px; }
/* Each line is a field on the form: the label, the line beside it, a hairline under both. */
.fields { margin: 0; border-top: 1px solid var(--ink); }
.fields > div {
  display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); border-bottom: 1px solid var(--rule);
  transition: background-color var(--t-fast) var(--ease-out);
}
.fields > div:hover { background: color-mix(in srgb, var(--paint) 12%, transparent); }
.fields dt { padding: 13px 12px 13px 0; font: 600 1.04rem/1.45 var(--cond); }
.fields dd { margin: 0; padding: 12px 8px 13px 0; max-width: 58ch; }
.out dt { box-shadow: inset 3px 0 var(--paint); padding-left: 14px; }   /* the trailer's paint on our side of the form */
.pair .camp-photo { grid-column: 1; margin: 44px var(--split) 0 0; }
.pair .unit-plate { grid-column: 2; margin: 44px 0 0 var(--split); max-width: 460px; }
.camp-photo img { --cut: 20px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }

/* The unit plate: stamped aluminium, riveted at the corners; it tilts toward the pointer and catches the light. */
.unit-plate {
  --rivet: radial-gradient(circle, #838983 0 3px, #f3f4f2 3.5px 4px, transparent 4.5px);
  position: relative;
  background: var(--rivet) 6px 6px / 14px 14px no-repeat, var(--rivet) calc(100% - 6px) 6px / 14px 14px no-repeat,
              var(--rivet) 6px calc(100% - 6px) / 14px 14px no-repeat, var(--rivet) calc(100% - 6px) calc(100% - 6px) / 14px 14px no-repeat,
              linear-gradient(160deg, #d9dcd7, var(--alu) 45%, #bfc4be);
  color: var(--on-paint); border-radius: 4px; padding: 24px 28px 20px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 7px var(--alu), inset 0 0 0 8px rgba(0, 0, 0, .3);
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform var(--t-med) var(--ease-out);
}
.unit-plate::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--sheen, 0);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 45%);
  transition: opacity var(--t-med) var(--ease-out);
}
.plate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px;
  padding-bottom: 10px; border-bottom: 2px solid rgba(0, 0, 0, .55); font: 700 .95rem var(--cond); }
.plate-code { font: 700 2.8rem/.85 var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.unit-plate dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.unit-plate dt { font: 500 .82rem/1.45 var(--body); opacity: .72; }
.unit-plate dd { margin: 0; font: 600 .98rem/1.35 var(--body); }
.plate-note { margin: 12px 0 0; font-size: .76rem; opacity: .72; }

/* ---------- how a vehicle gets washed: an engine drives the track from In to Out ---------- */
#wash > h2 { position: static; grid-column: 1 / -1; max-width: 18ch; }
.track-wrap { grid-column: 1 / -1; position: relative; padding-top: 70px; --drive: 1; }
.track {
  list-style: none; margin: 0; padding: 0; counter-reset: s;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; position: relative;
}
.track::before {   /* the pad the vehicle crosses: washed (paint) behind the engine, mud ahead */
  content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 3px;
  background: linear-gradient(90deg, var(--paint) 0 calc(var(--drive) * 100%), transparent 0),
              repeating-linear-gradient(90deg, var(--mud) 0 10px, transparent 10px 18px);
}
.track li { position: relative; padding-top: 54px; counter-increment: s; }
.track li::before {
  content: counter(s); position: absolute; top: 0; left: 0; width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--paint); color: var(--on-paint); font: 700 1.15rem/1 var(--cond); --cut: 9px; clip-path: var(--chamfer);
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.track li:last-child::after {   /* the exit */
  content: ""; position: absolute; top: 12px; right: -4px; border: 8px solid transparent; border-left: 13px solid var(--ink); border-right: 0;
}
.track h3 { font-size: 1.3rem; margin-bottom: 8px; transition: color var(--t-med) var(--ease-out); }
.track p { margin: 0; font-size: .93rem; color: var(--steel); }
.drive { position: absolute; left: 0; top: 0; width: 100px; height: 62px; pointer-events: none; will-change: transform; }
.engine { position: absolute; left: 0; bottom: 0; width: 100px; height: auto; overflow: visible; }
.engine .body { fill: var(--paint); }
.engine .glass, .engine .stripe, .engine .hub { fill: #101310; opacity: .6; }
.engine .hub { opacity: 1; }
.engine .tyre { fill: var(--ink); }
.spray { position: absolute; left: 30px; top: 0; width: 60px; height: 36px; opacity: 0; transition: opacity var(--t-med) var(--ease-out); }
.spray i { position: absolute; top: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--water); }
.spray i:nth-child(1) { left: 2px; } .spray i:nth-child(2) { left: 12px; } .spray i:nth-child(3) { left: 22px; }
.spray i:nth-child(4) { left: 32px; } .spray i:nth-child(5) { left: 42px; } .spray i:nth-child(6) { left: 52px; }
.drive.moving .spray { opacity: 1; }

/* ---------- the station, drawn in 3D (day render on light pages, night render on dark) ---------- */
.render { margin: 0; }
.render-box { position: relative; border: 1px solid var(--rule); background: #000; }
.render-box [hidden] { display: none !important; }
.render .still { position: relative; }
.render-box img, .render-video { display: block; width: 100%; height: auto; }
.render figcaption { font-size: .8rem; color: var(--steel); margin-top: 8px; max-width: 70ch; }
/* A numbered pin whose point touches the part (the inline left/top). */
.render .s-mk {
  position: absolute; width: 28px; height: 28px; margin: -37px 0 0 -14px; border-radius: 50%; padding: 0; border: 0;
  display: grid; place-items: center; background: #141613; color: #e3e5e0;
  font: 700 .95rem/1 var(--cond); box-shadow: 0 0 0 2px #e3e5e0; z-index: 1;
}
/* An unnumbered dot on everything else worth naming. */
.render .s-dot {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; padding: 0; border: 0;
  background: #e3e5e0; box-shadow: 0 0 0 3px #141613, 0 0 0 5px rgba(227, 229, 224, .6);
  cursor: pointer; z-index: 1; transition: transform var(--t-fast) var(--ease-out);
}
.render .s-dot:hover { background: var(--paint); z-index: 2; transform: scale(1.15); }
/* What a pin or dot is: a small label over the picture. */
.render .tip {
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(250px, 60vw); padding: 7px 10px; border-radius: 3px;
  background: #141613; color: #e3e5e0; font: 500 .8rem/1.35 var(--body); text-align: left;
  display: none; pointer-events: none; z-index: 3;
  box-shadow: 0 0 0 1px rgba(227, 229, 224, .4);
}
.render .tip strong { display: block; font: 700 .92rem/1.2 var(--cond); }
.render [data-tip^="l"] .tip { left: -4px; transform: none; }
.render [data-tip^="r"] .tip { left: auto; right: -4px; transform: none; }
.render [data-tip$="b"] .tip { bottom: auto; top: calc(100% + 10px); }
/* A label shows only while the pointer is over its pin or dot (or keyboard focus is on it). */
.render .s-mk:hover .tip, .render .s-mk:focus-visible .tip,
.render .s-dot:hover .tip, .render .s-dot:focus-visible .tip { display: block; }
.render .s-mk:hover, .render .s-mk:focus-visible, .render .s-dot:focus-visible { z-index: 4; }
/* The bar under the picture: play the video, or go back to the labelled still. */
.render-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.render-bar .play { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.render-bar .play svg { width: 14px; height: 14px; fill: currentColor; }
.render-bar .play .i-back, .render-bar .play.is-playing .i-play { display: none; }
.render-bar .play.is-playing .i-back { display: inline; }
.render-hint { font-size: .8rem; color: var(--steel); }
.render-bar .play.is-playing + .render-hint { visibility: hidden; }
.render .s-mk::after {
  content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px;
  border: 5px solid transparent; border-top: 8px solid #141613; border-bottom: 0;
}
.render .s-end {
  position: absolute; transform: translate(-50%, 0); padding: 1px 6px; border-radius: 3px;
  background: rgba(227, 229, 224, .85); color: #141613;
  font: 700 .72rem/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em;
}
@media (max-width: 640px) {
  .render .s-mk { width: 21px; height: 21px; margin: -28px 0 0 -10.5px; font-size: .74rem; box-shadow: 0 0 0 1.5px #e3e5e0; }
  .render .s-mk::after { margin-left: -4px; border-width: 6px 4px 0; }
  .render .s-end { font-size: .58rem; padding: 0 4px; }
  .render .s-dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 2px #141613; }
  .render .tip { max-width: 160px; font-size: .74rem; padding: 5px 8px; }
  .render .tip strong { font-size: .84rem; }
  .render [data-tip$="u"] .tip { bottom: auto; top: calc(100% + 10px); }   /* the picture is short: open downward */
}
.legend { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.legend li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: .95rem; }
.legend .mk {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--concrete); font: 700 .85rem/1 var(--cond); margin-top: 1px;
}
.legend strong { font: 700 1.05rem var(--cond); }
.legend span:not(.mk) { color: var(--steel); }
/* Pointing at a legend line or a numbered part lights both (page.js). */
.legend li { cursor: default; margin: -4px -8px; padding: 4px 8px; transition: background-color var(--t-fast) var(--ease-out); }
.legend li.lit { background: color-mix(in srgb, var(--paint) 22%, transparent); }
.legend li.lit .mk { background: var(--paint); color: var(--on-paint); box-shadow: inset 0 0 0 2px var(--on-paint); }
.render .s-mk { cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out); }
.render .s-mk.lit { background: var(--paint); color: var(--on-paint); box-shadow: 0 0 0 3px var(--on-paint); z-index: 2; transform: scale(1.12); }
.render .s-mk.lit::after { border-top-color: var(--paint); }

.camp-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* The station drawing folds away under the wash steps, as wide as the track. */
.fold.station-fold { grid-column: 1 / -1; max-width: none; margin-top: 48px; border-bottom: 1px solid var(--rule); }
.station-fold .station {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 40px; align-items: start; padding: 8px 0 24px;
}
.station-fold .legend { grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (max-width: 960px) { .station-fold .station { grid-template-columns: minmax(0, 1fr); } }

/* ---------- apply: a paper form with a stamped corner, on the painted band ---------- */
.apply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 28px 48px; align-items: start; }
.apply-copy p { margin: 0; max-width: 40ch; }
.apply-copy p + p { margin-top: 12px; }
.contact { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.contact li { display: grid; }
.contact span { font-size: .85rem; opacity: .75; }
.contact a { justify-self: start; font: 700 1.35rem var(--cond); text-decoration: none; background: linear-gradient(currentColor 0 0) left bottom / 100% 1px no-repeat; transition: background-size var(--t-fast) var(--ease-out); }
.contact a:hover, .contact a:focus-visible { background-size: 100% 3px; }
.share { margin: 24px 0 0; padding-top: 14px; border-top: 2px solid var(--on-paint); font-size: .95rem; max-width: 40ch; }
.share-btn {
  display: inline-flex; align-items: center; min-height: 42px; margin-top: 8px; padding: 0 16px;
  font: 700 .95rem var(--body); color: var(--on-paint); background: transparent; border: 2px solid var(--on-paint); border-radius: 0; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.share-btn:hover { background: var(--on-paint); color: var(--paint); }
.near-photo { margin: 26px 0 0; }
.near-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; --cut: 18px; clip-path: var(--chamfer); }
.near-photo figcaption { color: inherit; opacity: .75; }
.apply-form {
  --cut: 20px; --ink: var(--page-ink); --steel: var(--page-steel);
  display: grid; grid-template-columns: 1fr 1fr; background: var(--sheet); color: var(--ink);
  clip-path: var(--chamfer); padding: 8px 8px 0;
}
.apply-form label {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 10px 14px 4px;
  font-weight: 600; font-size: .82rem; color: var(--steel); border-bottom: 1px solid var(--rule);
  transition: background-color var(--t-fast) var(--ease-out);
}
.apply-form label::after {   /* the focused field is underlined from the left */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out);
}
.apply-form label:focus-within::after { transform: scaleX(1); }
.apply-form label:focus-within { background: var(--focus-fill); color: var(--ink); }
.apply-form label > input, .apply-form label > select, .apply-form label > textarea { flex: 1 1 100%; }
.apply-form .wide, .apply-form button, .apply-form .form-error { grid-column: 1 / -1; }
.opt { font-weight: 400; color: var(--steel); }
input, select, textarea {
  font: 500 1.05rem var(--body); color: var(--ink); background: transparent;
  border: 0; border-radius: 0; padding: 6px 0; min-height: 42px; width: 100%;
}
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus { outline: none; }
.apply-form label:has(:focus-visible) { outline: 3px solid var(--ink); outline-offset: -3px; }
textarea { resize: vertical; }
/* The open dropdown list is drawn by the browser. With a transparent select it takes its background
   from the system theme while the text keeps the page's ink, which can match and vanish until hover,
   so the options carry the form's own pair (both flip together in the dark scheme). */
select option { color: var(--ink); background-color: var(--sheet); }
.apply-form button.btn { margin: 14px -8px 0; min-height: 60px; font-size: 1.15rem; clip-path: none; }
.form-error {
  margin: 8px 0 0; padding: 12px 14px; font-weight: 600;
  background: color-mix(in srgb, #b3261e 14%, var(--sheet)); color: var(--ink); border-left: 6px solid #b3261e;
}
/* Sending: hazard stripes run across the button until the server answers. */
.apply-form button:disabled {
  cursor: progress; color: var(--paint);
  background: repeating-linear-gradient(-45deg, var(--on-paint) 0 14px, #2d302b 14px 28px) 0 0 / 40px 40px;
  animation: stripes .8s linear infinite;
}
@keyframes stripes { to { background-position: 40px 0; } }
.draft-note { grid-column: 1 / -1; margin: 0 -8px; padding: 10px 14px; font-size: .82rem; color: var(--steel); background: var(--sheet); }
.apply-form .draft-clear {
  grid-column: auto; min-height: 24px; padding: 2px 4px; margin-left: 0; border: 0; background: none; cursor: pointer;
  font: 600 .82rem var(--body); color: var(--forest); text-decoration: underline; text-underline-offset: 2px;
}
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- fine print ---------- */
.fold { border-top: 1px solid var(--rule); max-width: 820px; }
.fold:last-of-type { border-bottom: 1px solid var(--rule); }
.fold summary {   /* block, so a wrapped title keeps its count right after it */
  display: block; position: relative; padding: 15px 3rem 15px 0; cursor: pointer;
  font: 600 1.15rem var(--cond); list-style: none; transition: color var(--t-fast) var(--ease-out);
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover { color: var(--forest); }
.fold summary .n { font: 500 .85rem var(--body); color: var(--steel); margin-left: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fold summary::after {   /* a plus that turns into a cross */
  content: ""; position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: linear-gradient(var(--forest) 0 0) center / 16px 2px no-repeat, linear-gradient(var(--forest) 0 0) center / 2px 16px no-repeat;
  transition: transform var(--t-med) var(--ease-out);
}
.fold[open] > summary::after { transform: rotate(135deg); }
.items { margin: 0 0 18px; padding-left: 1.1em; max-width: 78ch; }
.items li { margin: 0 0 7px; }
.items li::marker { color: var(--steel); }

/* Search the agreement: one field with a stamped corner. */
.find { max-width: 820px; margin: 0 0 20px; }
.find label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.find input {
  --cut: 12px; clip-path: var(--chamfer);
  background: var(--sheet); padding: 8px 14px; min-height: 52px; box-shadow: inset 0 0 0 2px var(--ink);
  -webkit-appearance: none; appearance: none;
}
.find input:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--paint); }
.find-count { margin: 8px 0 0; font-size: .92rem; font-weight: 600; }
.find-count:empty { margin: 0; }
::highlight(find) { background-color: var(--paint); color: var(--on-paint); }

/* ---------- phone action bar ---------- */
.action-bar { display: none; }
@media (max-width: 640px) {
  .action-bar {
    display: flex; gap: 10px; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
    padding: 10px max(16px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
    background: var(--on-paint); transition: transform var(--t-med) var(--ease-out);
  }
  .action-bar .btn { flex: 1; }
  .action-bar.away { transform: translateY(110%); }
  .bar-call {
    flex: 0 0 34%; display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
    color: #fff; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
  }
  .ad .foot { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}

/* ---------- small pages and footer ---------- */
.sent-mark {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px;
  background: var(--paint); clip-path: var(--chamfer);
}
.sent-mark::after {
  content: ""; width: 20px; height: 11px; margin-top: -4px;
  border-left: 4px solid var(--on-paint); border-bottom: 4px solid var(--on-paint); transform: rotate(-45deg);
}
.contact-card { margin: 22px 0; padding: 16px 0; border-block: 2px solid var(--ink); }
.contact-card p { margin: 0 0 4px; color: var(--steel); }
.contact-card .contact { margin-top: 10px; }
.sent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
/* Short pages keep the footer at the foot of the screen. */
body:not(.ad) { min-height: 100svh; display: flex; flex-direction: column; }
body:not(.ad) > main { flex: 1; width: 100%; }
body:not(.ad) > .masthead, body:not(.ad) > .foot { width: 100%; }
.note-page { max-width: 70ch; padding-top: 48px; }
.note-page h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 14px; }
.lede { font-size: 1.15rem; }
.credits li { margin-bottom: 14px; }
/* The footer: an ink band with the company's name stamped in paint. */
.foot {
  --bar: var(--on-paint);
  margin-top: var(--gap); padding: 40px 0 calc(40px + env(safe-area-inset-bottom));
  background: var(--bar); box-shadow: 0 0 0 100vmax var(--bar); clip-path: inset(0 -100vmax);
  font-size: .9rem; color: #a9b0a7;
}
.foot a { color: var(--light); }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 24px 48px; }
.foot-name { font: 700 1.6rem/1.1 var(--cond); color: var(--paint); margin: 0 0 4px; }
.foot-grid p { margin: 0; }
.foot .contact { margin: 0; }
.foot .contact a { font-size: 1.15rem; }
.foot .contact span { color: #a9b0a7; opacity: 1; }
.foot nav { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.foot nav a { text-decoration: none; background: linear-gradient(currentColor 0 0) left bottom / 0 1px no-repeat; transition: background-size var(--t-fast) var(--ease-out); justify-self: start; }
.foot nav a:hover, .foot nav a:focus-visible { background-size: 100% 1px; }
.foot :focus-visible { outline-color: var(--paint); }
.foot-note { max-width: 82ch; margin: 28px 0 0; padding-top: 16px; border-top: 1px solid #3a3f38; font-size: .8rem; }

@media (max-width: 960px) {
  .rail { grid-template-columns: minmax(0, 1fr); }
  .rail > h2 { position: static; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero::before, .hero::after { grid-area: 1 / 1 / 4 / -1; }
  .hero-pay { grid-area: 2 / 1; align-self: start; padding-top: 22px; }
  .hero-body { grid-area: 3 / 1; padding-bottom: 84px; }
  .hero-line { margin-top: 20px; }
  .hero-print { grid-area: 4 / 1; margin-top: -56px; padding: 0; }
  .hero-print img { aspect-ratio: 3 / 2; }
  .dispatch { grid-area: 5 / 1; }
  .hero h1 { font-size: clamp(3rem, 15vw, 6rem); }
  .track-wrap { padding-top: 0; }
  .drive { display: none; }   /* on a phone the track runs down the page; the line fills instead */
  .track { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .track::before {
    left: 18px; right: auto; top: 0; bottom: 0; width: 3px; height: auto;
    background: linear-gradient(180deg, var(--paint) 0 calc(var(--drive) * 100%), transparent 0),
                repeating-linear-gradient(180deg, var(--mud) 0 10px, transparent 10px 18px);
  }
  .track li { padding: 0 0 0 58px; }
  .track li:last-child::after { display: none; }
  .apply { grid-template-columns: minmax(0, 1fr); }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair-col { padding-right: 0; }
  .pair-col + .pair-col { padding: 26px 0 0; margin-top: 36px; border-left: 0; }
  .pair .camp-photo, .pair .unit-plate { grid-column: 1; margin: 32px 0 0; }
  .near-photo { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .home .home-town, .nav a:not(.btn) { display: none; }
  .hero-specs { grid-template-columns: minmax(0, 1fr); }
  .hero-specs > div { display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 12px; align-items: baseline;
    border-left: 0; border-bottom: 1px solid color-mix(in srgb, var(--on-paint) 30%, transparent); padding: 10px 0; }
  .hero-specs strong { font-size: 1.6rem; }
  .fields > div { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .fields dt { font-size: .98rem; }
  .out dt { padding-left: 12px; }
  .legend { grid-template-columns: minmax(0, 1fr); }
  .apply-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- motion ----------
   The hero plays once on load (CSS only). Everything below it moves only when motion.js has put
   .motion on <html>, which it does only when the reader has not asked for reduced motion; without
   the script every element simply shows in its finished state. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .ln > span { animation: rise 820ms var(--ease-out) both; }
  .hero h1 .ln:nth-child(2) > span { animation-delay: 90ms; }
  .hero h1 .ln:nth-child(3) > span { animation-delay: 180ms; }
  .hero-pay { animation: wipe var(--t-slow) var(--ease-wash) 260ms both; }
  .hero-body { animation: settle 700ms var(--ease-out) 380ms both; }
  .hero-print .frame { animation: wipe 1100ms var(--ease-wash) 320ms both; }
  .hero-print .frame::after { animation: edge 1100ms var(--ease-wash) 320ms both; }
  .hero.glint::after { animation: glint 1600ms var(--ease-out) 1; }
}
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes edge { 0% { opacity: 1; transform: translateX(-100%); } 92% { opacity: 1; } 100% { opacity: 0; transform: none; } }
@keyframes glint { 0% { opacity: 1; transform: translateX(-70%); } 100% { opacity: 1; transform: translateX(70%); } }
@keyframes drip { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }

/* Section rules draw across from the left; headings and field rows are wiped in like a wash pass. */
html.motion .rail::before, html.motion .pair::before { transform: scaleX(0); transition: transform var(--t-slow) var(--ease-out); }
html.motion .in.rail::before, html.motion .in.pair::before { transform: scaleX(1); }
html.motion [data-wash] { clip-path: inset(0 100% 0 0); transition: clip-path var(--t-slow) var(--ease-wash) var(--d, 0ms); }
html.motion .unit-plate[data-wash] { transition: clip-path var(--t-slow) var(--ease-wash) var(--d, 0ms), transform var(--t-med) var(--ease-out); }
html.motion .fields > div[data-wash] { transition: clip-path var(--t-slow) var(--ease-wash) var(--d, 0ms), background-color var(--t-fast) var(--ease-out); }
html.motion [data-wash].in { clip-path: inset(0); }
html.motion [data-wash].done { clip-path: none; }   /* motion.js, after the wipe: nothing stays clipped */
html.motion .frame[data-wash].in::after { animation: edge var(--t-slow) var(--ease-wash) var(--d, 0ms) both; }
/* The wash track: steps the engine has not reached yet wait in outline. */
html.motion .track li:not(.lit)::before { background: var(--concrete); color: var(--steel); box-shadow: inset 0 0 0 2px var(--steel); }
html.motion .track li:not(.lit) h3 { color: var(--steel); }
html.motion .drive.moving .spray i { animation: drip 600ms linear infinite; }
html.motion .spray i:nth-child(2n) { animation-delay: -200ms; }
html.motion .spray i:nth-child(3n) { animation-delay: -400ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}