/* Newell Electric: "The Work Order". Carbon-copy yellow, blue pen, red stamp. */
@font-face{font-family:"Special Elite";src:url(../fonts/special-elite-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fira Sans";src:url(../fonts/fira-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fira Sans";src:url(../fonts/fira-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --paper:#F3E7B1; --paper-l:#FAF3D4; --ink:#1A1A1A; --pen:#1D3A8A; --red:#B3261E; --carbon:#C9B979;
  --f-type:"Special Elite","Courier New",monospace; --f-body:"Fira Sans","Segoe UI",sans-serif;
  /* 1.25 scale from 17px */
  --s0:1.0625rem; --s1:1.328rem; --s2:1.66rem; --s3:2.075rem; --s4:2.594rem; --s5:3.242rem;
  --sp1:.5rem; --sp2:1rem; --sp3:1.5rem; --sp4:2rem; --sp5:3rem; --sp6:4.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px;scroll-padding-bottom:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--s0)/1.6 var(--f-body);overflow-x:hidden;
  /* faint ruled-form lines */
  background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(29,58,138,.07) 31px 32px)}
p{margin:0 0 var(--sp2)}
a{color:var(--pen);text-underline-offset:3px}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 20px}
.num{white-space:nowrap}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--pen);outline-offset:3px}
.skip{position:absolute;left:12px;top:-80px;background:var(--pen);color:#fff;padding:12px 18px;z-index:50}
.skip:focus{top:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:0 22px;border-radius:2px;font:600 var(--s0)/1 var(--f-body);text-decoration:none;white-space:nowrap}
.btn-call{background:var(--red);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.btn-call:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

/* header */
.top{border-bottom:2px dashed var(--pen)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp2);min-height:64px}
.brand{display:inline-flex;align-items:center;min-height:44px;font:400 1.75rem/1 var(--f-type);color:var(--ink);text-decoration:none}
.top-call{display:none}

/* the slip: paper card with perforated top edge and a carbon duplicate behind */
.slip{position:relative;background:var(--paper-l);border:1.5px solid var(--ink);padding:var(--sp4) var(--sp3) var(--sp3);
  box-shadow:8px 8px 0 -1.5px var(--paper),8px 8px 0 0 var(--carbon)}
.slip::before{content:"";position:absolute;left:0;right:0;top:10px;height:0;border-top:2px dotted rgba(26,26,26,.45)}
.slip-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp1) var(--sp3);border-bottom:1.5px solid var(--ink);padding-bottom:var(--sp1);margin-bottom:var(--sp3)}
.slip-co,.slip-no{font:400 var(--s2)/1.1 var(--f-type);margin:0}
.slip-no{color:var(--red)}
.slip-no span{font-size:var(--s3)}
.h1{font:600 var(--s4)/1.08 var(--f-body);color:var(--pen);margin:0 0 var(--sp3);max-width:16em;letter-spacing:-.01em}
.h2{font:400 var(--s4)/1.1 var(--f-type);color:var(--pen);margin:0 0 var(--sp4)}
.h3{font:400 var(--s3)/1.1 var(--f-type);color:var(--ink);margin:0 0 var(--sp1)}

/* hero */
.hero{padding-top:var(--sp5);padding-bottom:var(--sp5)}
.slip-hero{animation:settle .5s ease-out both}
.fields{margin:0 0 var(--sp3);display:grid;gap:0}
.field{display:grid;grid-template-columns:5.5em 1fr;align-items:baseline;gap:var(--sp2);border-bottom:1px solid rgba(29,58,138,.4);padding:var(--sp1) 0}
.field dt{font:600 .9rem/1.2 var(--f-body);text-transform:uppercase;letter-spacing:.12em}
.field dd{margin:0;font:400 var(--s1)/1.3 var(--f-body);color:var(--pen)}
.pen{display:inline-flex;align-items:center;min-height:44px;font:400 var(--s3)/1 var(--f-type);color:var(--pen);text-decoration-thickness:2px}
.lede{font-size:var(--s1);line-height:1.5;max-width:32em}
.acts{margin:0}
.stamp{position:absolute;right:12px;top:72px;width:96px;transform:rotate(-6deg);mix-blend-mode:multiply;animation:thump .45s cubic-bezier(.3,1.5,.5,1) .5s both;pointer-events:none}
@keyframes settle{from{transform:translateY(-8px)}}
@keyframes thump{from{transform:rotate(-6deg) scale(1.6)}to{transform:rotate(-6deg) scale(1)}}

/* job slips */
.jobs{padding-top:var(--sp5);padding-bottom:var(--sp5)}
.stack{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp4)}
.slip-job{padding-right:72px;animation:settle .5s ease-out both}
.slip-job:nth-child(2){animation-delay:.12s}.slip-job:nth-child(3){animation-delay:.24s}.slip-job:nth-child(4){animation-delay:.36s}
.slip-job p:last-of-type{margin:0;max-width:34em}
.line-no{font:600 .9rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:var(--sp1) 0 var(--sp2)}
.tick{position:absolute;right:18px;top:34px;width:44px;height:38px;color:var(--pen)}

/* torn notes */
.notes{padding:var(--sp6) 0;background:var(--pen);color:#fff;margin:var(--sp5) 0}
.notes .h2{color:#fff}
.note-row{display:grid;gap:var(--sp4)}
.note{margin:0;background:#fff;color:var(--ink);padding:var(--sp3) var(--sp3) var(--sp4);position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),94% 100%,86% calc(100% - 8px),76% 100%,64% calc(100% - 9px),52% 100%,40% calc(100% - 7px),28% 100%,16% calc(100% - 9px),6% 100%,0 calc(100% - 8px))}
.note blockquote{margin:0}
.note p{font-size:var(--s1);line-height:1.45;margin:0 0 var(--sp2)}
.note figcaption{font:400 var(--s1)/1 var(--f-type);color:var(--pen)}
.note figcaption::before{content:"\2014\00a0"}
.n1{transform:rotate(-1deg)}.n2{transform:rotate(1.2deg)}.n3{transform:rotate(-.6deg)}

/* close */
.close{padding-bottom:var(--sp6)}
.phone-big{margin:var(--sp2) 0}
.phone-big .pen{font-size:clamp(2.2rem,11vw,var(--s5))}
.area{font:600 .95rem/1.3 var(--f-body);text-transform:uppercase;letter-spacing:.12em;margin:0}

.foot{border-top:2px dashed var(--pen);text-align:center;padding:var(--sp4) 20px calc(var(--sp4) + 80px);font-size:.95rem}
.foot p{margin:0}

/* sticky call bar, phones */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--paper-l);border-top:2px solid var(--ink)}

@media (min-width:720px){
  html{scroll-padding-bottom:16px}
  .dock{display:none}.top-call{display:inline-flex}
  .foot{padding-bottom:var(--sp4)}
  .slip{padding:var(--sp5) var(--sp5) var(--sp4)}
  .h1{font-size:var(--s5)}
  .stamp{width:140px;right:32px;top:90px}
  .h1,.lede{max-width:calc(100% - 150px)}
  .stack{grid-template-columns:1fr 1fr;gap:var(--sp5) var(--sp4)}
  .slip-job:nth-child(even){transform:translateY(var(--sp5))}
  .slip-job:nth-child(even){animation-name:settle2}
  .jobs{padding-bottom:calc(var(--sp5) + var(--sp5))}
  .note-row{grid-template-columns:1fr 1fr 1.3fr;align-items:start}
  .n2{margin-top:var(--sp5)}
  .slip-close{max-width:680px;margin-left:auto}
}
@keyframes settle2{from{transform:translateY(calc(var(--sp5) - 8px))}to{transform:translateY(var(--sp5))}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* small phones: field label above its value so the pen-written phone never overflows */
@media (max-width:479px){
  .field{grid-template-columns:1fr;gap:0}
  .field-call .pen{font-size:clamp(1.6rem,8.5vw,var(--s3))}
  .slip{padding-left:var(--sp2);padding-right:var(--sp2)}
  .slip-job{padding-right:64px}
  .stamp{width:76px;top:64px;right:8px}
  .h1{padding-right:64px;font-size:var(--s3)}
}