/* ==========================================================================
   ARCOPRINT — Work Order design system (shared)
   Tokens · fluid gutter · a11y · reduced-motion · iOS-safe
   ========================================================================== */
:root{
  /* ink */
  --red:#DA291C;
  --ink:#15120E;
  --paper:#EFEAE0;
  --paper-2:#E6E0D3;
  --rule:rgba(21,18,14,.85);
  --rule-soft:rgba(21,18,14,.22);
  --paper-soft:rgba(239,234,224,.16);
  /* type */
  --disp:"Clash Display",sans-serif;
  --body:"Satoshi",sans-serif;
  --mono:"Space Mono",monospace;
  /* structure */
  --hair:1.5px;
  --gutter:clamp(18px, 5vw, 40px);     /* fluid side padding, one source of truth */
  --bay:clamp(30px, 6vw, 52px);        /* fluid section vertical padding */
  --max:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:70px}
body{
  font-family:var(--mono);background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%;
  -webkit-tap-highlight-color:transparent;
  background-image:radial-gradient(rgba(21,18,14,.05) 1px,transparent 1px);
  background-size:16px 16px;
}
::selection{background:var(--red);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}

/* focus — visible for keyboard, quiet for pointer */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--red);outline-offset:3px;border-radius:1px;
}

.lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.red{color:var(--red)}

/* page frame */
.page{max-width:var(--max);margin:0 auto;border-left:var(--hair) solid var(--ink);border-right:var(--hair) solid var(--ink);min-height:100vh;background:var(--paper)}
@media(max-width:700px){.page{border-left:0;border-right:0}}

/* crop marks */
.cm{position:absolute;width:14px;height:14px;z-index:3}
.cm.tl{top:10px;left:10px;border-top:var(--hair) solid var(--ink);border-left:var(--hair) solid var(--ink)}
.cm.tr{top:10px;right:10px;border-top:var(--hair) solid var(--ink);border-right:var(--hair) solid var(--ink)}
.cm.bl{bottom:10px;left:10px;border-bottom:var(--hair) solid var(--ink);border-left:var(--hair) solid var(--ink)}
.cm.br{bottom:10px;right:10px;border-bottom:var(--hair) solid var(--ink);border-right:var(--hair) solid var(--ink)}

/* ledger header */
.led{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px var(--gutter);border-bottom:var(--hair) solid var(--ink);position:sticky;top:0;background:var(--paper);z-index:40}
.brand{display:flex;align-items:center;gap:9px}
.brand svg{width:28px;height:28px;display:block;flex:none}
.brand b{font-family:var(--disp);font-weight:700;font-size:1.18rem;letter-spacing:-.01em}
.brand b span{color:var(--red)}
.led-right{display:flex;align-items:center;gap:20px}
.led .meta{display:flex;gap:18px}
.led .meta i{font-style:normal}
.led .meta i b{color:var(--red)}
@media(max-width:640px){.led .meta{display:none}}

/* hamburger */
.burger{width:34px;height:26px;background:none;border:0;cursor:pointer;position:relative;padding:0;flex:none}
.burger span{position:absolute;left:0;right:0;height:2.5px;background:var(--ink);transition:transform .28s ease,opacity .2s ease,background .2s ease}
.burger span:nth-child(1){top:3px}
.burger span:nth-child(2){top:12px}
.burger span:nth-child(3){top:21px}
.burger:hover span{background:var(--red)}
/* open state: X stays INK/RED on the paper header bar (readable) */
body.menu-open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg);background:var(--red)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg);background:var(--red)}

/* menu overlay */
.menu{position:fixed;inset:0;background:var(--ink);color:var(--paper);z-index:39;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;display:flex;align-items:center;justify-content:center;overflow:auto}
body.menu-open{overflow:hidden}
body.menu-open .menu{opacity:1;visibility:visible}
.menu .dots{position:absolute;inset:0;background-image:radial-gradient(var(--paper-soft) 1px,transparent 1px);background-size:18px 18px}
.menu-inner{position:relative;width:100%;max-width:var(--max);padding:0 var(--gutter)}
.menu-lbl{color:var(--red);margin-bottom:26px}
.menu-nav a{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid rgba(239,234,224,.14);transition:padding-left .25s ease,color .2s}
.menu-nav a:hover,.menu-nav a:focus-visible{padding-left:16px;color:var(--red)}
.menu-nav a i{font-style:normal;font-family:var(--mono);font-size:.8rem;color:var(--red);flex:none;width:30px}
.menu-nav a b{font-family:var(--disp);font-weight:600;font-size:clamp(1.55rem,6.5vw,3rem);text-transform:uppercase;letter-spacing:-.01em;line-height:1;min-width:0}
.menu-nav a span{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5;align-self:center;flex:none}
@media(max-width:560px){.menu-nav a span{display:none}.menu-nav a i{width:26px}}
.menu-foot{margin-top:40px;opacity:.5}

/* fields */
.field{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px dotted var(--rule-soft)}
.field .lbl{color:var(--red);padding-top:3px}
.field .val{font-family:var(--mono);font-size:.92rem;line-height:1.45}
@media(max-width:560px){.field{grid-template-columns:1fr;gap:3px}.field .lbl{padding-top:0}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--red);color:var(--paper);font-family:var(--disp);font-weight:700;font-size:1.1rem;text-transform:uppercase;padding:15px 26px;border:0;cursor:pointer;transition:transform .18s ease}
.btn:hover{transform:translateX(4px)}
.btn:active{transform:translateX(2px) scale(.99)}
.btn .a{font-family:var(--mono)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 var(--hair) var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* control strip */
.strip-wrap{display:flex;align-items:stretch;border-bottom:var(--hair) solid var(--ink)}
.strip{display:flex;flex:1}
.strip .sw{flex:1;height:42px}
.strip-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;display:flex;align-items:center;padding:0 14px;border-left:var(--hair) solid var(--ink);white-space:nowrap;text-transform:uppercase}
@media(max-width:560px){.strip-tag{display:none}}

/* registration mark helper */
.reg{width:26px;height:26px}

/* section scaffold */
.row{border-bottom:var(--hair) solid var(--ink)}
.pad{padding:var(--bay) var(--gutter)}
.page-head{padding:var(--bay) var(--gutter);position:relative;border-bottom:var(--hair) solid var(--ink)}
.page-head .kick{color:var(--red);margin-bottom:10px}
.page-head h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.3rem,8vw,5rem);line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.page-head h1 em{font-style:normal;color:var(--red)}
.page-head .sub{font-family:var(--mono);font-size:.85rem;line-height:1.55;max-width:52ch;margin-top:16px;color:rgba(21,18,14,.7)}

/* flag — wraps freely, never forces overflow */
.flag{font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;color:var(--red);text-transform:uppercase;border:1px solid rgba(218,41,28,.5);padding:2px 6px;display:inline-block;max-width:100%;line-height:1.5}

/* footer */
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:16px var(--gutter);font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;opacity:.62;border-top:var(--hair) solid var(--ink)}

/* sign-off block */
.signoff{background:var(--ink);color:var(--paper);position:relative}
.signoff .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(239,234,224,.08) 1px,transparent 1px);background-size:16px 16px;pointer-events:none}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .btn:hover,.menu-nav a:hover{transform:none}
}