/* Hollandwick Systems, v2 (29 Oct 2026): the page is a field-service work order.
   Bold condensed type, black rules, labelled fields, one hand-drawn sketch in ballpoint blue. No boxes, no shadows. */
@font-face{font-family:"Hollandwick Condensed";src:url(type/condensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Hollandwick Condensed";src:url(type/condensed-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Hollandwick Text";src:url(type/franklin.woff2) format("woff2");font-weight:400 700;font-display:swap}
/* v3: metric-matched fallback so the swap to the condensed face doesn't re-wrap the nav (was CLS 0.28 on phones) */
@font-face{font-family:"Hollandwick Condensed Fallback";src:local("Arial Narrow"),local("ArialNarrow"),local("Arial"),local("Liberation Sans"),local("Roboto");size-adjust:76%;ascent-override:118%;descent-override:30%}

:root{
  --ink:#111;
  --paper:#fff;
  --red:#c4261b;
  --pen:#1d3a9a;
  --g:clamp(16px,4vw,64px);
  --cond:"Hollandwick Condensed","Hollandwick Condensed Fallback",sans-serif;
  --text:"Hollandwick Text",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--text)}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--pen);outline-offset:3px}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--cond);font-weight:800;margin:0;letter-spacing:.005em}
.ws-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ws-skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:5}
.ws-skip:focus{left:8px}

/* Sheet head: brand, work order number in red, then a thin row with the nav */
.ws-head{padding:18px var(--g) 0;border-bottom:6px solid var(--ink)}
.ws-head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px}
.ws-mark{font:800 clamp(28px,3.4vw,46px)/1 var(--cond);text-transform:uppercase;text-decoration:none;letter-spacing:.01em}
.ws-mark:hover{color:var(--ink)}
.ws-order{margin:0;font-family:var(--cond);white-space:nowrap}
.ws-order span{font-weight:600;font-size:19px;margin-right:6px}
.ws-order b{display:inline-block;font-weight:800;font-size:clamp(26px,2.6vw,34px);color:var(--red);font-variant-numeric:tabular-nums}
.ws-head-sub{border-top:2px solid var(--ink);margin-top:14px;padding:8px 0 10px}
.ws-tagline{margin:0;font-size:15px}
.ws-nav{display:flex;flex-wrap:wrap;gap:2px 22px;font:600 19px/1.4 var(--cond)}
.ws-nav a{text-decoration:none}
.ws-nav a:hover{text-decoration:underline}
.ws-nav-plan{color:var(--red)}

/* Hero: the order itself. Photo bleeds off the right edge on wide screens. */
.ws-hero{display:grid;grid-template-areas:"h" "p" "t";border-top:2px solid var(--ink);margin-top:4px}
.ws-hero h1{grid-area:h;padding:clamp(26px,4vw,60px) var(--g) clamp(22px,3vw,34px);font-size:clamp(54px,8.6vw,156px);line-height:.88;text-transform:uppercase}
.ws-hero-photo{grid-area:p;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}
.ws-hero-text{grid-area:t;padding:26px var(--g) clamp(48px,6vw,90px)}
.ws-lead{font-size:clamp(19px,1.6vw,23px);line-height:1.45;max-width:33em}
.ws-fields{margin:30px 0 34px;border-top:2px solid var(--ink)}
.ws-fields div{display:grid;grid-template-columns:9.5rem 1fr;gap:4px 18px;border-bottom:2px solid var(--ink);padding:9px 0 7px}
.ws-fields dt{font:600 18px/1.35 var(--cond)}
.ws-fields dd{margin:0;font-size:17px;line-height:1.45}
.ws-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0}
.ws-act span{font-size:17px}
.ws-button,.ws-form button{display:inline-block;background:var(--ink);color:#fff;border:0;border-radius:0;padding:16px 26px 15px;
  font:800 22px/1 var(--cond);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;cursor:pointer}
.ws-button:hover,.ws-form button:hover{background:var(--red);color:#fff}

/* Line items */
.ws-work{padding:clamp(50px,6vw,96px) var(--g) clamp(30px,4vw,50px)}
.ws-work-head{display:grid;gap:12px 6vw;margin-bottom:28px}
.ws-work h2,.ws-sketch h2,.ws-how h2,.ws-qa h2,.ws-plan h2,.ws-page h1{font-size:clamp(40px,5.2vw,80px);line-height:.92;text-transform:uppercase}
.ws-work-head p{font-size:19px;max-width:36em;margin:0}
.ws-items{width:100%;border-collapse:collapse;border-top:6px solid var(--ink)}
.ws-items thead th{font:600 17px/1.2 var(--cond);text-align:left;padding:10px 18px 8px 0;border-bottom:2px solid var(--ink)}
.ws-items tbody th{font:800 clamp(24px,2.2vw,32px)/1 var(--cond);text-transform:uppercase;text-align:left;vertical-align:top;padding:20px 18px 20px 0;width:27%}
.ws-items td{vertical-align:top;padding:20px 18px 20px 0;font-size:17px;line-height:1.5}
.ws-items tbody tr{border-bottom:2px solid var(--ink)}
.ws-items td:first-of-type{width:40%}
.ws-sample q{quotes:"\201C" "\201D";font:600 20px/1.3 var(--cond)}
.ws-ex-note{display:block;font:600 20px/1.3 var(--cond);padding-left:12px;border-left:2px solid var(--ink)}

/* One sentence, alone, in solid ink */
.ws-bigline{margin:0;background:var(--ink);color:#fff;font:800 clamp(46px,7.6vw,136px)/.9 var(--cond);text-transform:uppercase;
  padding:clamp(70px,8vw,130px) clamp(16px,16vw,300px) clamp(30px,3.4vw,52px) var(--g)}

/* The sketch */
.ws-sketch{padding:clamp(60px,7vw,110px) var(--g) clamp(20px,3vw,40px)}
.ws-sketch > p{max-width:34em;font-size:19px;margin:14px 0 30px}
.sk{display:block;width:100%;height:auto}
.sk-wide{display:none;max-width:1500px}
.sk-tall{max-width:440px}
.sk-t{font-family:var(--cond);font-weight:600;font-size:22px;fill:var(--pen);letter-spacing:.02em}
.sk-s{font-size:19px}
.sk-m{font-size:21px}
.sk-big{font-size:34px;font-weight:800}
.sk-note{font-size:27px;font-weight:800}

/* How it goes */
.ws-how{display:grid;gap:20px 6vw;padding:clamp(50px,6vw,90px) 0 clamp(70px,9vw,140px);border-top:6px solid var(--ink);margin:0 var(--g)}
.ws-how-text p{font-size:19px;max-width:36em;margin-bottom:1.1em}
.ws-how-text b{font-family:var(--cond);font-weight:800;font-size:23px;text-transform:uppercase;letter-spacing:.01em;margin-right:4px}

/* Two photos, uneven, square cut, off both edges */
.ws-pair{display:grid;grid-template-columns:1fr;gap:10px}
.ws-pair-a{width:100%;aspect-ratio:3/2;object-fit:cover}
.ws-pair-b-wrap{width:66%;justify-self:end}
.ws-pair-b{width:100%;aspect-ratio:4/5;object-fit:cover}

/* Notes */
.ws-notes{display:grid;gap:44px 6vw;padding:clamp(60px,8vw,120px) var(--g) clamp(40px,5vw,70px)}
.ws-notes h3{font-size:clamp(30px,3vw,42px);line-height:1;text-transform:uppercase;padding-bottom:12px;border-bottom:6px solid var(--ink)}
.ws-wont ul{list-style:none;margin:0;padding:0}
.ws-wont li{border-bottom:2px solid var(--ink);padding:14px 0 12px;font-size:18px}
.ws-isnt p{font-size:18px;max-width:34em}
.ws-isnt p:first-of-type{font:600 clamp(23px,2vw,28px)/1.2 var(--cond);margin:16px 0 18px}

/* Questions */
.ws-qa{padding:clamp(40px,5vw,80px) var(--g) clamp(80px,10vw,150px)}
.ws-qa dl{margin:26px 0 0;border-top:6px solid var(--ink)}
.ws-qa dl div{display:grid;gap:6px 6vw;border-bottom:2px solid var(--ink);padding:18px 0 14px}
.ws-qa dt{font:800 clamp(22px,2vw,28px)/1.15 var(--cond)}
.ws-qa dd{margin:0;font-size:18px;max-width:36em}

/* The request: bottom of the order */
.ws-plan{display:grid;gap:30px 6vw;grid-template-areas:"photo" "side" "form";border-top:6px solid var(--ink);padding:0 var(--g) clamp(60px,8vw,110px)}
.ws-plan-side{grid-area:side}
.ws-plan .ws-form{grid-area:form}
.ws-plan-photo{grid-area:photo;width:calc(100% + 2 * var(--g));max-width:none;margin:0 calc(-1 * var(--g));aspect-ratio:4/3;object-fit:cover;object-position:60% 18%}
.ws-plan-side p{font-size:18px;max-width:32em}
.ws-plan h2{margin-bottom:16px}
.ws-direct{font-family:var(--cond);font-weight:600;font-size:21px !important;line-height:1.35}
.ws-notice{border-left:6px solid var(--red);padding-left:12px}
.ws-form{display:grid;grid-template-columns:1fr;gap:0 28px;align-content:start}
.ws-f{margin:0 0 22px}
.ws-f label{display:block;font:600 19px/1.3 var(--cond);margin-bottom:4px}
.ws-f label span{font-weight:600;color:#3a3a3a}
.ws-f input,.ws-f select,.ws-f textarea{display:block;width:100%;font:400 18px/1.4 var(--text);color:var(--ink);background:#fff;border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:8px 0 7px}
.ws-f textarea{border:2px solid var(--ink);padding:10px 12px;resize:vertical;min-height:120px}
.ws-f select{-webkit-appearance:none;appearance:none;padding-right:28px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23111' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 4px center}
.ws-f ::placeholder{color:#555}
.ws-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ws-send{margin-top:6px}
.ws-fine{font-size:15px}

/* Plain pages */
.ws-page{padding:clamp(40px,6vw,90px) var(--g) clamp(70px,9vw,130px)}
.ws-plan-page{border-top:0;padding:0;grid-template-areas:"side" "form"}
.ws-plan-page h1{margin-bottom:16px}
.ws-thanks h1{max-width:13em;margin-bottom:22px}
.ws-thanks p{max-width:36em}
.ws-prose{max-width:none}
.ws-prose h1{margin-bottom:22px}
.ws-prose h2{font-size:28px;text-transform:uppercase;margin:34px 0 8px;padding-top:10px;border-top:2px solid var(--ink);max-width:22em}
.ws-prose p{max-width:38em}

/* Footer: one honest line */
.ws-foot{border-top:6px solid var(--ink);padding:18px var(--g) 30px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;font-size:15px}
.ws-foot p{margin:0}
.ws-foot a,.ws-foot span{margin-right:18px;white-space:nowrap}

@media (max-width:759px){
  .ws-tagline{display:none}
  .ws-head-sub{padding-bottom:8px}
  .ws-nav{gap:2px 13px;font-size:17px}
  .ws-fields div{grid-template-columns:1fr;gap:0}
  .ws-items thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ws-items,.ws-items tbody,.ws-items tr,.ws-items th,.ws-items td{display:block;width:auto !important}
  .ws-items tbody th{padding:18px 0 6px}
  .ws-items td{padding:0 0 12px}
  .ws-items td.ws-sample:empty{display:none}
  .ws-sample{padding-bottom:18px !important}
  .ws-foot a,.ws-foot span{display:inline-block;margin:0 16px 6px 0}
}
@media (min-width:760px){
  .sk-wide{display:block}
  .sk-tall{display:none}
  .ws-form{grid-template-columns:1fr 1fr}
  .ws-f{grid-column:1 / -1}
  .ws-f-half{grid-column:auto}
  .ws-qa dl div{grid-template-columns:5fr 7fr}
  .ws-work-head{grid-template-columns:5fr 7fr;align-items:end}
}
@media (min-width:900px){
  .ws-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"h p" "t p"}
  .ws-hero-photo{height:100%;aspect-ratio:auto}
  .ws-hero h1{padding-right:3vw}
  .ws-hero-text{padding-right:3vw}
  .ws-how{grid-template-columns:4fr 8fr}
  .ws-pair{grid-template-columns:64fr 30fr;align-items:end}
  .ws-pair-a{aspect-ratio:16/10}
  .ws-pair-b-wrap{width:100%;margin-bottom:-8vw;position:relative}
  .ws-notes{grid-template-columns:7fr 5fr;padding-top:clamp(90px,11vw,170px)}
  .ws-plan{grid-template-columns:5fr 7fr;grid-template-areas:"side form" "photo form";grid-template-rows:auto 1fr;padding-top:clamp(40px,5vw,70px);row-gap:clamp(30px,3vw,46px)}
  .ws-plan-photo{width:calc(100% + var(--g));height:100%;min-height:340px;aspect-ratio:auto;margin:0 0 0 calc(-1 * var(--g));contain:size;object-position:50% 30%}
  .ws-plan .ws-form{padding-top:clamp(6px,1vw,14px)}
  .ws-plan-page{grid-template-areas:"side form";grid-template-rows:auto;padding-top:0}
  .ws-plan-page .ws-form{padding-top:0}
}
@media (min-width:1500px){
  .ws-hero-text{max-width:none}
  .ws-sketch{padding-left:calc(var(--g) + 4vw)}
}
/* Motion (v3, 29 Oct 2026). Only under .ws-js, which assets/order.js sets unless the reader prefers reduced motion.
   Each kind moves differently: rules draw across, fields and sample texts write in left to right, the order number is stamped,
   the sketch draws itself stroke by stroke, the big line prints down, the dropped photo settles. transform/opacity/clip-path/stroke only. */
.ws-js [data-in=rule]{position:relative;border-top-color:transparent}
.ws-js [data-in=rule]::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.ws-js [data-in=rule-b]{position:relative;border-bottom-color:transparent}
.ws-js [data-in=rule-b]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.65,0,.35,1) .1s}
.ws-js [data-in].ws-in::before,.ws-js [data-in].ws-in::after{transform:none}

.ws-js [data-in=stamp]{opacity:0}
.ws-js [data-in=stamp].ws-in{animation:ws-stamp .5s cubic-bezier(.3,.6,.4,1) .35s both}
@keyframes ws-stamp{0%{opacity:0;transform:scale(1.7) rotate(-9deg)}55%{opacity:1;transform:scale(.93) rotate(-2deg)}100%{opacity:1;transform:none}}

.ws-sample q{display:block}
.ws-js .ws-fields[data-in] dd,.ws-js tr[data-in] .ws-sample > *{clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.45,.05,.35,1)}
.ws-js .ws-fields.ws-in dd,.ws-js tr.ws-in .ws-sample > *{clip-path:inset(0 -2px 0 0)}
.ws-js .ws-fields dd{transition-delay:.25s}
.ws-js .ws-fields div:nth-child(2) dd{transition-delay:.4s}
.ws-js .ws-fields div:nth-child(3) dd{transition-delay:.55s}
.ws-js .ws-fields div:nth-child(4) dd{transition-delay:.7s}
.ws-js tr[data-in] .ws-sample > *{transition-delay:.15s}

.ws-js [data-in=print]{display:block;clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.6,0,.3,1)}
.ws-js [data-in=print].ws-in{clip-path:inset(-4px -4px -12px -4px)}

.ws-js .sk[data-in] path{stroke-dasharray:1 2;stroke-dashoffset:1.02;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.25,1)}
.ws-js .sk[data-in] text{opacity:0;transition:opacity .45s ease-out}
.ws-js .sk.ws-in path{stroke-dashoffset:0}
.ws-js .sk.ws-in text{opacity:1}
.ws-js .sk .sk-g2{transition-delay:.3s}
.ws-js .sk .sk-g3{transition-delay:.6s}
.ws-js .sk .sk-g4{transition-delay:.9s}
.ws-js .sk .sk-g5{transition-delay:1.2s}
.ws-js .sk .sk-g6{transition-delay:1.5s}
.ws-js .sk .sk-g7{transition-delay:1.7s}
.ws-js .sk .sk-g8{transition-delay:1.95s}

.ws-js [data-in=drop]{opacity:0;transform:translateY(48px);transition:opacity .5s ease-out,transform .8s cubic-bezier(.2,.8,.25,1)}
.ws-js [data-in=drop].ws-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .ws-js [data-in],.ws-js [data-in] *,.ws-js [data-in]::before,.ws-js [data-in]::after{animation:none !important;transition:none !important}
  .ws-js [data-in],.ws-js .ws-fields dd,.ws-js .ws-sample > *,.ws-js .sk text{opacity:1 !important;transform:none !important;clip-path:none !important}
  .ws-js [data-in]::before,.ws-js [data-in]::after{transform:none !important}
  .ws-js .sk path{stroke-dasharray:none !important}
}
@media print{.ws-js [data-in],.ws-js [data-in] *{opacity:1 !important;clip-path:none !important;transform:none !important;stroke-dasharray:none !important}}
@media print{.ws-hero-photo,.ws-pair,.ws-plan-photo{display:none}}