/* Pass 3 — art direction: inventory spill, optical type, and final tactile polish. */
html{scrollbar-color:var(--orange) #090b09;scrollbar-width:thin}
html::-webkit-scrollbar{width:11px;background:#090b09}
html::-webkit-scrollbar-thumb{background:linear-gradient(var(--orange),#c83d10);border:3px solid #090b09}
body{font-optical-sizing:auto;text-rendering:optimizeLegibility}
::-moz-selection{background:var(--green);color:var(--black)}
h1,h2,h3,.shift-quote q{text-wrap:balance}
p,li,.job-ticket h2{text-wrap:pretty}
.ticket-code,.ticket-meta,.route-readout,.note-index,.bag-note dl,.spill-index,.bag-spill-toggle{font-variant-numeric:tabular-nums slashed-zero}

.brand svg{transition:transform .28s cubic-bezier(.18,.75,.18,1),filter .28s}
.brand:hover svg{transform:translate(4px,-3px) skewX(-8deg);filter:drop-shadow(-5px 5px 0 #32e36f)}
.site-header nav a{position:relative;isolation:isolate}
.site-header nav a::after{content:"";position:absolute;left:20%;right:20%;bottom:13px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .25s cubic-bezier(.18,.75,.18,1)}
.site-header nav a:hover::after,.site-header nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.radio-power{transition:background-color .18s,filter .18s,letter-spacing .18s}
.radio-power:hover{letter-spacing:.11em}
.jump-board{transition:background-color .18s,color .18s,transform .25s cubic-bezier(.18,.75,.18,1),box-shadow .25s}
.jump-board:hover{transform:translate(-4px,-4px);box-shadow:7px 7px 0 var(--green)}
.job-ticket:focus-within{outline:3px solid var(--green);outline-offset:-3px}
.bag-tabs button:active,.accept-job:active,.bag-spill-toggle:active,.spill-index button:active{transform:translateY(2px)}
:focus-visible{outline-color:var(--green);outline-width:3px;outline-style:solid;outline-offset:4px}

.alleycat-section::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background:radial-gradient(circle at 14% 22%,#10120f 0 1px,transparent 1.5px),radial-gradient(circle at 73% 61%,#10120f 0 1px,transparent 1.5px);background-size:27px 31px,43px 37px;mix-blend-mode:multiply}
.alleycat-section>*{position:relative;z-index:1}
.lock-card::after{content:"S&S / FIELD LOCK SPECIMEN";position:absolute;right:10px;top:10px;font:750 6px var(--mono);letter-spacing:.12em;writing-mode:vertical-rl;opacity:.42}

.bag-section::before{content:"";position:absolute;inset:22px;pointer-events:none;border:1px dashed #8990872b;background:linear-gradient(90deg,transparent 49.8%,#ffffff0b 50%,transparent 50.2%),linear-gradient(transparent 49.8%,#ffffff08 50%,transparent 50.2%);background-size:94px 94px;mask-image:linear-gradient(90deg,transparent 20%,#000 48%)}
.bag-stage{isolation:isolate;border-top:1px solid #596057;border-bottom:1px solid #596057;background:radial-gradient(circle at 48% 40%,#ffffff09,transparent 42%)}
.bag-stage::before{content:"TABLE 04 / SEDIMENT INVENTORY";position:absolute;left:14px;top:13px;color:#747b71;font:700 7px var(--mono);letter-spacing:.14em}
.bag-spill-toggle{position:absolute;z-index:30;right:0;top:-1px;width:218px;min-height:62px;padding:10px 14px;border:1px solid var(--green);background:#10120fe8;color:var(--green);text-align:left;cursor:pointer;box-shadow:8px 8px 0 #0008;transition:transform .24s cubic-bezier(.18,.75,.18,1),background-color .18s,color .18s,box-shadow .24s}
.bag-spill-toggle span,.bag-spill-toggle small{display:block}.bag-spill-toggle span{font:800 10px var(--mono);letter-spacing:.12em}.bag-spill-toggle small{margin-top:6px;color:#949b91;font:600 7px var(--mono);letter-spacing:.06em}
.bag-spill-toggle::after{content:"↗";position:absolute;right:13px;top:12px;font:900 15px var(--mono);transition:transform .35s cubic-bezier(.18,.75,.18,1)}
.bag-spill-toggle:hover{transform:translate(-4px,-4px);background:var(--green);color:var(--black);box-shadow:12px 12px 0 #000}.bag-spill-toggle:hover small{color:#172019}
.bag-spill-toggle[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--black)}
.bag-spill-toggle[aria-pressed="true"]::after{transform:rotate(135deg)}

.bag-flap{transform-origin:50% 0;transition:transform .72s cubic-bezier(.14,.78,.16,1),filter .45s}
.bag-buckle{transition:transform .5s cubic-bezier(.14,.78,.16,1),opacity .3s}
.bag-body{transition:overflow 0s .35s,filter .45s}
.bag-item{transition:transform .85s cubic-bezier(.14,.8,.15,1),filter .35s,box-shadow .35s!important;transform-origin:center}
.bag.is-spilled .bag-flap{z-index:1;transform:translateY(-96px) rotate(-9deg);filter:brightness(1.22) drop-shadow(0 18px 18px #0008)}
.bag.is-spilled .bag-buckle{transform:translateY(-88px) rotate(18deg);opacity:.35}
.bag.is-spilled .bag-body{z-index:2;overflow:visible;clip-path:none;filter:drop-shadow(0 22px 25px #0008)}
.bag.is-spilled .bag-item{z-index:5}
.bag.is-spilled .item-radio{transform:translate(135px,-95px) rotate(8deg)}
.bag.is-spilled .item-tube{transform:translate(120px,-10px) rotate(7deg)}
.bag.is-spilled .item-book{transform:translate(-96px,-72px) rotate(-14deg)}
.bag.is-spilled .item-key{transform:translate(142px,-20px) rotate(48deg)}
.bag-stage[data-active="0"] .item-radio,.bag-stage[data-active="1"] .item-tube,.bag-stage[data-active="2"] .item-book,.bag-stage[data-active="3"] .item-key{filter:drop-shadow(0 0 11px var(--green));box-shadow:0 0 0 5px var(--green)}

.spill-index{position:absolute;z-index:22;inset:86px 0 auto;min-height:410px;pointer-events:none}
.spill-index button{position:absolute;pointer-events:auto;min-height:44px;border:1px solid #747b71;background:#10120fe8;color:var(--static);padding:8px 10px;display:flex;align-items:center;gap:9px;cursor:pointer;font:700 7px var(--mono);letter-spacing:.08em;box-shadow:5px 5px 0 #000;animation:evidence-in .5s cubic-bezier(.14,.8,.15,1) both}
.spill-index button::after{content:"";position:absolute;border-top:1px dashed #8e958b;width:54px;top:50%;pointer-events:none}
.spill-index button b{color:var(--orange);font-size:9px}.spill-index button span{white-space:nowrap}
.spill-index button:hover,.spill-index button[aria-pressed="true"]{background:var(--green);color:var(--black);border-color:var(--green);transform:translate(-3px,-3px)}
.spill-index button[aria-pressed="true"] b{color:var(--black)}
.spill-index button:nth-child(1){right:0;top:35px;animation-delay:.18s}.spill-index button:nth-child(1)::after{right:100%}
.spill-index button:nth-child(2){right:1%;top:252px;animation-delay:.36s}.spill-index button:nth-child(2)::after{right:100%}
.spill-index button:nth-child(3){left:0;top:38px;animation-delay:.27s}.spill-index button:nth-child(3)::after{left:100%}
.spill-index button:nth-child(4){right:0;top:335px;animation-delay:.45s}.spill-index button:nth-child(4)::after{right:100%}
.bag-note{transition:transform .42s cubic-bezier(.18,.75,.18,1),box-shadow .3s}
.bag-stage.is-spilled .bag-note{transform:translateY(18px) rotate(-1.4deg);box-shadow:-18px 18px 0 var(--orange),-40px 40px 60px #0009}

.guide-article a,.guide-home,.site-footer a{text-decoration-thickness:1px;text-underline-offset:5px}
.guide-article h2{font-optical-sizing:auto}
.demo-controls button{transition:background-color .18s,color .18s,transform .18s}
.demo-controls button:active{transform:translateY(2px)}

@keyframes evidence-in{from{opacity:0;transform:translateY(12px) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes hero-rise{from{transform:translateY(22px)}to{transform:none}}
@keyframes board-arrive{from{transform:translateX(80px) rotate(.7deg)}to{transform:none}}

@media (max-width:1050px){
  .bag-spill-toggle{width:196px}.bag.is-spilled .item-radio{transform:translate(82px,-85px) rotate(8deg)}.bag.is-spilled .item-book{transform:translate(-48px,-68px) rotate(-14deg)}
  .spill-index button:nth-child(3){left:4%}.spill-index button:nth-child(1),.spill-index button:nth-child(2),.spill-index button:nth-child(4){right:0}
}

@media (max-width:760px){
  html::-webkit-scrollbar{width:6px}.bag-section::before{inset:12px;mask-image:none;background-size:58px 58px}
  .site-footer a{min-width:44px}.guide-home{min-width:44px;min-height:44px;display:flex;align-items:center;padding-inline:4px}
  .bag-stage{min-height:670px;margin-top:34px}.bag-stage::before{top:76px}
  .bag-spill-toggle{position:relative;top:0;margin-left:auto;width:210px;min-height:58px}
  .bag{top:86px}
  .bag.is-spilled .item-radio{transform:translate(48px,-82px) rotate(8deg)}
  .bag.is-spilled .item-tube{transform:translate(78px,-10px) rotate(7deg)}
  .bag.is-spilled .item-book{transform:translate(-35px,-65px) rotate(-14deg)}
  .bag.is-spilled .item-key{transform:translate(88px,-12px) rotate(48deg)}
  .spill-index{inset:132px 0 auto;min-height:340px}
  .spill-index button{padding:7px 8px;font-size:6px;box-shadow:4px 4px 0 #000}
  .spill-index button::after{width:30px}
  .spill-index button:nth-child(1){right:0;top:18px}.spill-index button:nth-child(2){right:0;top:222px}.spill-index button:nth-child(3){left:0;top:54px}.spill-index button:nth-child(4){right:0;top:286px}
  .bag-note{bottom:4px}.bag-stage.is-spilled .bag-note{transform:rotate(-1deg)}
  .brand:hover svg,.jump-board:hover,.bag-spill-toggle:hover{transform:none;box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  .bag-flap,.bag-buckle,.bag-item,.spill-index button,.bag-note{animation:none!important;transition:none!important}
  .bag.is-spilled .bag-flap{transform:translateY(-72px) rotate(-6deg)}
}