/* Tokens: see DESIGN.md */
:root{
  --paper:#F4F5F1; --sheet:#FFFFFF; --ink:#15192B; --muted:#5A5F70; --rule:#D9DBD3; --rule-strong:#B9BCB2;
  --carbon:#2638A6; --carbon-hover:#1D2C86; --on-carbon:#FFFFFF; --carbon-tint:#E7EAF8;
  --canary:#F2D95C; --pink:#F2B8C6; --stamp:#C8372D;
  --success:#2F7A4F; --success-tint:#E3F1E8; --warning:#8A5A0F; --warning-tint:#FBF0D6; --error:#C8372D; --error-tint:#F9E3E1;
  --cell-hl:#FFF3A8;
  --shadow:0 1px 0 rgba(21,25,43,.06), 0 8px 24px -12px rgba(21,25,43,.25);
  --display:"Bricolage Grotesque", Georgia, serif;
  --body:"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --r-sm:2px; --r-md:4px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11141F; --sheet:#1A1E2D; --ink:#ECEDF2; --muted:#A0A5B8; --rule:#2C3145; --rule-strong:#3E4560;
    --carbon:#8C9BFF; --carbon-hover:#A9B4FF; --on-carbon:#0E1120; --carbon-tint:#22284A;
    --canary:#D9C04A; --pink:#C98C9B; --stamp:#F0645A;
    --success:#6CC796; --success-tint:#16291F; --warning:#E2B04F; --warning-tint:#2C2312; --error:#F0645A; --error-tint:#2E1716;
    --cell-hl:#4A4220;
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#11141F; --sheet:#1A1E2D; --ink:#ECEDF2; --muted:#A0A5B8; --rule:#2C3145; --rule-strong:#3E4560;
  --carbon:#8C9BFF; --carbon-hover:#A9B4FF; --on-carbon:#0E1120; --carbon-tint:#22284A;
  --canary:#D9C04A; --pink:#C98C9B; --stamp:#F0645A;
  --success:#6CC796; --success-tint:#16291F; --warning:#E2B04F; --warning-tint:#2C2312; --error:#F0645A; --error-tint:#2E1716;
  --cell-hl:#4A4220;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
a{color:var(--carbon);text-underline-offset:3px}
a:hover{color:var(--carbon-hover)}
:focus-visible{outline:2px solid var(--carbon);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.02em;color:var(--ink)}
.label{font-family:var(--display);font-weight:600;font-size:.875rem;font-variant:all-small-caps;letter-spacing:.02em;color:var(--muted)}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--carbon);color:var(--on-carbon);padding:10px 14px;border-radius:var(--r-md);z-index:10}
.skip:focus{left:16px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Header */
.site-nav .wrap{display:flex;justify-content:space-between;align-items:center;min-height:76px;gap:16px}
.wordmark{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--carbon)}
.wordmark:hover{color:var(--ink)}
.site-nav ul{display:flex;gap:12px;list-style:none;margin:0;padding:0;align-items:center}
.site-nav ul a{display:inline-block;padding:12px 8px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.9375rem}
.site-nav ul a:hover{color:var(--carbon)}
.site-nav ul a.book{color:var(--carbon);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:720px){.site-nav ul li:not(:last-child){display:none}}

/* Hero */
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:96px}
.hero h1{font-weight:800;font-size:clamp(2.75rem,5.4vw,4.75rem);line-height:.98;font-variation-settings:"opsz" 96}
.hero h1 mark{background:linear-gradient(transparent 58%, var(--canary) 58%, var(--canary) 92%, transparent 92%);color:inherit;padding:0 .04em}
:root[data-theme="dark"] .hero h1 mark{background:linear-gradient(transparent 84%, var(--canary) 84%, var(--canary) 94%, transparent 94%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero h1 mark{background:linear-gradient(transparent 84%, var(--canary) 84%, var(--canary) 94%, transparent 94%)}}
.lede{font-size:1.25rem;line-height:1.5;color:var(--muted);max-width:34ch;margin:28px 0 36px}
.ask{max-width:520px}
.ask label{display:block;margin-bottom:6px}
.ask .row{display:flex;gap:12px;align-items:flex-end}
.ask small{display:block;margin-top:12px;color:var(--muted);font-size:.9375rem}

/* Fields and buttons */
.field{flex:1;width:100%;font:400 1.0625rem/1.4 var(--mono);color:var(--carbon);background:transparent;border:0;border-bottom:2px solid var(--ink);padding:10px 2px;border-radius:0;min-width:0;min-height:44px}
.field::placeholder{color:var(--muted);opacity:.75}
.field:focus{outline:none;border-bottom-color:var(--carbon);background:var(--carbon-tint)}
.field[aria-invalid="true"]{border-bottom-color:var(--error)}
textarea.field{resize:vertical;min-height:96px;line-height:32px;background-image:repeating-linear-gradient(transparent 0 31px,var(--rule) 31px 32px);background-attachment:local}
.btn{font:700 1rem/1 var(--body);border-radius:var(--r-md);padding:14px 20px;min-height:48px;cursor:pointer;border:2px solid var(--carbon);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:background .15s,color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--carbon);color:var(--on-carbon)}
.btn-primary:hover{background:var(--carbon-hover);border-color:var(--carbon-hover);color:var(--on-carbon)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-link{border:0;padding:14px 0;background:none;color:var(--carbon);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.btn-link:hover{background:none;color:var(--carbon-hover)}
.msg{display:block;font-size:.875rem;color:var(--error);margin-top:6px}
.msg:empty{display:none}

/* Work order */
.wo-stack{position:relative;margin:24px 20px 24px 0}
.wo-stack .copy{position:absolute;inset:0;border-radius:var(--r-sm);box-shadow:var(--shadow)}
.wo-stack .copy.pink{background:var(--pink);transform:rotate(1.2deg) translate(18px,14px)}
.wo-stack .copy.canary{background:var(--canary);transform:rotate(-.4deg) translate(9px,7px)}
.wo{position:relative;background:var(--sheet);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:28px 28px 34px;transform:rotate(-2deg)}
.wo-tabs{position:absolute;top:-38px;right:24px;display:flex;gap:4px}
.wo-tabs button{font:600 .9375rem/1 var(--display);font-variant:all-small-caps;letter-spacing:.03em;border:0;border-radius:var(--r-md) var(--r-md) 0 0;padding:12px 16px 14px;min-height:40px;background:var(--rule);color:var(--muted);cursor:pointer}
.wo-tabs button:hover{color:var(--ink)}
.wo-tabs button[aria-selected="true"]{background:var(--sheet);color:var(--carbon)}
.wo-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:6px;gap:12px}
.wo-head h2,.wo-head h3{font-size:1.125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.wo-head .no{font:500 .9375rem var(--mono);color:var(--stamp);white-space:nowrap}
.wo dl{margin:0}
.wo .f{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule)}
.wo dt{margin:0}
.wo dd{margin:0;font:400 .9375rem/1.45 var(--mono);color:var(--carbon)}
.wo .sig{display:flex;justify-content:space-between;margin-top:22px;gap:16px}
.wo .sig div{flex:1;border-top:1px solid var(--rule-strong);padding-top:6px}
.stamp{position:absolute;right:18px;bottom:62px;transform:rotate(-9deg);border:3px solid var(--stamp);outline:1px solid var(--stamp);outline-offset:3px;color:var(--stamp);font:800 1rem/1.15 var(--display);letter-spacing:.05em;text-transform:uppercase;text-align:center;padding:8px 12px;border-radius:var(--r-md);opacity:.88;mix-blend-mode:multiply;pointer-events:none}
:root[data-theme="dark"] .stamp{mix-blend-mode:normal}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stamp{mix-blend-mode:normal}}
.stamp.land{animation:land .26s cubic-bezier(.2,.8,.3,1) both}
@keyframes land{from{opacity:0;transform:rotate(-9deg) scale(1.35)}to{opacity:.88;transform:rotate(-9deg) scale(1)}}
.wo-note{margin:30px 0 0;color:var(--muted);font-size:.875rem}
@media (prefers-reduced-motion:reduce){.stamp.land{animation:none}}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:80px;padding-bottom:72px}
  .wo{transform:rotate(-1deg)}
  .wo-stack{margin-right:18px}
}
@media (max-width:480px){
  .wrap{padding:0 16px}
  .ask .row{flex-direction:column;align-items:stretch}
  .wo{padding:22px 18px 30px}
  .wo .f{grid-template-columns:1fr;gap:2px}
  .wo-tabs{right:12px}
  .stamp{font-size:.8125rem;bottom:58px;right:12px}
}

/* Sections */
.band{padding:96px 0;border-top:1px solid var(--rule)}
.band h2{font-size:clamp(2rem,3.6vw,2.875rem);font-weight:800;line-height:1.05;max-width:20ch}
.intro{color:var(--muted);font-size:1.125rem;max-width:56ch;margin:16px 0 48px}
@media (max-width:480px){.band{padding:72px 0}}

/* Problems */
.problems{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.problems h3{font-size:1.25rem;font-weight:700;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.problems ul{list-style:none;margin:0;padding:0}
.problems li{padding:18px 0;border-bottom:1px solid var(--rule)}
.problems q{display:block;font-style:italic;quotes:"\201C" "\201D"}
.problems li span{display:block;margin-top:6px;font:400 .9375rem/1.5 var(--mono);color:var(--carbon)}
@media (max-width:760px){.problems{grid-template-columns:1fr;gap:48px}}

/* Before and after */
.job{display:grid;grid-template-columns:260px 1fr 1fr;gap:32px;padding:40px 0;border-bottom:1px solid var(--rule);align-items:start}
.job:first-of-type{border-top:2px solid var(--ink)}
.job .meta h3{font-size:1.5rem;font-weight:800;line-height:1.1;margin:0 0 8px}
.job .meta .label{display:block;margin:0 0 12px}
.job .meta p{margin:0 0 12px;color:var(--muted);font-size:.9375rem}
.job .meta .mono{display:block;font-size:.8125rem;color:var(--carbon)}
.mini-stamp{display:inline-block;margin-top:20px;transform:rotate(-4deg);text-transform:uppercase;border:2px solid var(--stamp);color:var(--stamp);font:800 .75rem/1 var(--display);letter-spacing:.08em;padding:6px 8px;border-radius:var(--r-md);opacity:.85}
.pane{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;font-size:.8125rem;margin:0}
.pane figcaption{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--rule);background:var(--paper)}
.pane figcaption .mono{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pane-scroll{overflow-x:auto}
.sheet-tbl{width:100%;border-collapse:collapse;font:400 .75rem/1.3 var(--mono)}
.sheet-tbl td,.sheet-tbl th{border:1px solid var(--rule);padding:6px 8px;text-align:left;white-space:nowrap}
.sheet-tbl th{background:var(--paper);color:var(--muted);font-weight:500}
.sheet-tbl .hl{background:var(--cell-hl);color:var(--ink)}
.sheet-tbl .red{color:var(--stamp)}
.mail{list-style:none;margin:0;padding:0}
.mail li{padding:9px 12px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:1fr auto;gap:2px 12px}
.mail li:last-child{border-bottom:0}
.mail b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail time{font:italic 400 .75rem var(--mono);color:var(--muted)}
.mail span{color:var(--muted);grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app{padding:14px}
.app h4{font:700 1rem/1.2 var(--display);margin:0 0 10px}
.app table{width:100%;border-collapse:collapse}
.app td{padding:8px 4px;border-bottom:1px solid var(--rule)}
.chip{display:inline-block;font:500 .6875rem/1 var(--mono);padding:4px 6px;border-radius:var(--r-sm);white-space:nowrap}
.chip.ok{background:var(--success-tint);color:var(--success)}
.chip.warn{background:var(--warning-tint);color:var(--warning)}
.app .total{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font:500 .75rem var(--mono);color:var(--muted)}
@media (max-width:1024px){.job{grid-template-columns:1fr 1fr}.job .meta{grid-column:1/-1;max-width:60ch}}
@media (max-width:640px){.job{grid-template-columns:1fr}}

/* Routing slip */
.route{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);margin:0;padding:0;list-style:none}
.route li{padding:24px 24px 28px 0;border-right:1px dashed var(--rule-strong);margin-right:24px}
.route li:last-child{border-right:0;margin-right:0}
.route h3{font-size:1.375rem;font-weight:800;margin:0 0 8px}
.route p{margin:0;color:var(--muted);font-size:.9375rem}
@media (max-width:860px){.route{grid-template-columns:1fr 1fr}.route li{border-right:0;border-bottom:1px dashed var(--rule-strong);margin-right:0}}
@media (max-width:520px){.route{grid-template-columns:1fr}.route li:last-child{border-bottom:0}}

/* Final call to action */
.final{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.blank{background:var(--sheet);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:28px}
.blank .f{display:block;padding:14px 0 6px}
.blank .f .label{display:block}
.blank .actions{display:flex;gap:20px;align-items:center;margin-top:24px;flex-wrap:wrap}
.alert{border-radius:var(--r-md);padding:12px 14px;margin-top:20px;font-size:.9375rem;display:flex;gap:12px}
.alert[hidden]{display:none}
.alert b{font-family:var(--display);font-variant:all-small-caps;letter-spacing:.03em;min-width:70px}
.alert span{color:var(--ink)}
.alert.s{background:var(--success-tint);color:var(--success)}
.alert.e{background:var(--error-tint);color:var(--error)}
@media (max-width:860px){.final{grid-template-columns:1fr;gap:32px}}
@media (max-width:480px){.blank{padding:22px 18px}}

/* Footer */
.site-footer{padding:40px 0 64px;border-top:1px solid var(--rule);color:var(--muted);font-size:.9375rem}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.site-footer .wordmark{font-size:1rem}
.theme-btn{font:inherit;color:var(--carbon);background:none;border:0;padding:12px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}

/* ?edit mode: outline editable text so it is obvious what can be changed */
.editing [contenteditable="true"]{outline:1px dashed var(--rule-strong);outline-offset:4px}
.editing [contenteditable="true"]:focus{outline:2px solid var(--carbon)}