:root{
  --bg:#150a26; --bg2:#1d0d33; --surface:#120a1f; --ink:#0b0310;
  --cyan:#39e6ff; --lime:#c6ff4d; --magenta:#e01fd0; --muted:#8d7aa8; --text:#efe9f7;
  --display:'Tilt Warp', 'Arial Black', sans-serif; --mono:'Space Mono', ui-monospace, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:15px/1.65 var(--mono);overflow-x:hidden;min-height:100vh}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px dashed var(--lime);outline-offset:4px}

/* drifting net mesh behind everything */
.mesh{position:fixed;inset:-20%;z-index:-1;pointer-events:none;opacity:.5;
  background:
   radial-gradient(60% 50% at 20% 30%, rgba(224,31,208,.18), transparent 70%),
   radial-gradient(50% 40% at 85% 75%, rgba(57,230,255,.12), transparent 70%),
   repeating-linear-gradient(45deg, rgba(57,230,255,.07) 0 1px, transparent 1px 46px),
   repeating-linear-gradient(-45deg, rgba(57,230,255,.07) 0 1px, transparent 1px 46px);
  animation:drift 60s linear infinite alternate}
@keyframes drift{to{transform:translate3d(46px,-46px,0) rotate(1.5deg)}}

/* top tab: the drawer's index card */
.tab{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:10px clamp(16px,4vw,48px);
  background:rgba(18,10,31,.86);backdrop-filter:blur(8px);border-bottom:1px solid rgba(57,230,255,.25)}
.tab__brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:22px/1 var(--display);letter-spacing:.04em;color:var(--cyan)}
.tab__brand img{border-radius:6px;border:1px solid rgba(57,230,255,.4)}
.tab__file{font-size:12px;color:var(--muted);letter-spacing:.12em}
.tab__file b{color:var(--lime);font-weight:700}
.tab__nav{margin-left:auto;display:flex;gap:6px}
.tab__nav a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:6px 10px;border:1px solid transparent;transition:border-color .2s,color .2s}
.tab__nav a:hover{border-color:var(--cyan);color:var(--cyan)}

/* hero: art bleeds left, specimen label pinned right */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);align-items:center;min-height:min(calc(100vh - 62px),940px);padding:24px clamp(16px,4vw,48px) 48px 0}
.hero__art{position:relative;margin-right:-12vw;--m:radial-gradient(ellipse 72% 62% at 42% 50%,#000 55%,transparent 100%);mask-image:var(--m);-webkit-mask-image:var(--m)}
.hero__art img{width:100%}
.hero__crosshair{position:absolute;left:38%;top:52%;width:120px;height:120px;margin:-60px;border:1px dashed rgba(198,255,77,.7);border-radius:50%;animation:pulse 3.2s ease-in-out infinite}
.hero__crosshair::before,.hero__crosshair::after{content:"";position:absolute;background:rgba(198,255,77,.7)}
.hero__crosshair::before{left:50%;top:-18px;bottom:-18px;width:1px}
.hero__crosshair::after{top:50%;left:-18px;right:-18px;height:1px}
@keyframes pulse{50%{transform:scale(1.12);opacity:.55}}

.label{position:relative;z-index:2;background:var(--surface);border:1px solid rgba(57,230,255,.45);padding:34px 30px 30px;
  box-shadow:8px 8px 0 var(--ink),0 0 40px rgba(57,230,255,.12);transform:rotate(-1.2deg)}
.label__pin{position:absolute;top:-11px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f2ffd0,var(--lime) 45%,#5b7a10);box-shadow:0 3px 0 var(--ink)}
.label__kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--magenta)}
.hero__title{font:clamp(44px,5.4vw,78px)/.95 var(--display);color:var(--cyan);margin:14px 0 22px;text-shadow:0 0 22px rgba(57,230,255,.35)}
.hero__title em{font-style:normal;color:var(--lime)}
.label__rows{border-top:1px dashed rgba(57,230,255,.35);margin-bottom:18px}
.label__rows div{display:grid;grid-template-columns:110px 1fr;padding:7px 0;border-bottom:1px dashed rgba(57,230,255,.35);font-size:13px}
.label__rows dt{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:11px;padding-top:2px}
.lime{color:var(--lime);font-weight:700}
.hero__lede{font-size:14px;color:#d6cce6;margin-bottom:22px}

.btn{display:inline-flex;align-items:center;gap:12px;font:700 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:var(--lime);padding:14px 18px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--magenta);transition:transform .15s,box-shadow .15s}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--magenta)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--magenta)}

/* section heads: catalogue rule */
.sec-head{display:grid;grid-template-columns:auto 1fr;column-gap:24px;align-items:baseline;border-top:2px solid var(--cyan);padding-top:14px;margin-bottom:40px}
.sec-head__no{font-size:12px;letter-spacing:.3em;color:var(--magenta);grid-row:span 2}
.sec-head h2{font:clamp(32px,4vw,56px)/1 var(--display);color:var(--text)}
.sec-head p{grid-column:2;margin-top:10px;color:var(--muted);max-width:56ch}

/* plate */
.plate{padding:96px clamp(16px,4vw,48px);max-width:1280px;margin:0 auto}
.plate__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.plate__fig{position:relative;background:url(/assets/texture.webp) center/256px;padding:18px;border:1px solid rgba(57,230,255,.35);box-shadow:10px 10px 0 var(--ink)}
.plate__fig img{border:1px solid rgba(57,230,255,.25)}
.plate__fig figcaption{font-size:12px;color:var(--muted);margin-top:12px;font-style:italic}
.pin{position:absolute;left:var(--x);top:var(--y);width:34px;height:34px;margin:-17px;display:grid;place-items:center;border-radius:50%;
  font:700 14px/1 var(--mono);color:var(--ink);background:var(--lime);border:2px solid var(--ink);text-decoration:none;box-shadow:0 0 0 4px rgba(198,255,77,.25);transition:transform .2s,box-shadow .2s}
.pin:hover{transform:scale(1.15);box-shadow:0 0 0 8px rgba(198,255,77,.3)}
.parts{list-style:none;display:grid;gap:0;counter-reset:p}
.parts li{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:22px 0;border-bottom:1px dashed rgba(57,230,255,.35);scroll-margin-top:90px;transition:background .3s}
.parts li:target{background:rgba(198,255,77,.06)}
.parts__no{font:34px/1 var(--display);color:var(--magenta)}
.parts h3{font:22px/1.2 var(--display);color:var(--cyan);margin-bottom:6px}
.parts p{color:#d6cce6;font-size:14px}

/* field log: horizontal track of index cards */
.log{padding:40px 0 110px}
.log .sec-head{margin:0 clamp(16px,4vw,48px) 36px;max-width:1184px}
@media (min-width:1281px){.log .sec-head{margin-left:calc((100vw - 1280px)/2 + 48px)}}
.log__track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px clamp(16px,4vw,48px) 28px;scrollbar-color:var(--cyan) transparent}
.entry{flex:0 0 280px;scroll-snap-align:start;position:relative;background:var(--surface);border:1px solid rgba(57,230,255,.4);padding:22px 22px 54px;box-shadow:6px 6px 0 var(--ink);transition:transform .2s,border-color .2s}
.entry:nth-child(even){transform:rotate(.8deg)} .entry:nth-child(odd){transform:rotate(-.6deg)}
.entry:hover{transform:translateY(-6px) rotate(0);border-color:var(--lime)}
.entry__stamp{display:inline-block;font-size:11px;letter-spacing:.24em;color:var(--magenta);border:1px solid var(--magenta);padding:3px 8px;margin-bottom:16px}
.entry h3{font:24px/1.1 var(--display);color:var(--cyan);margin-bottom:10px}
.entry p{font-size:14px;color:#d6cce6}
.entry__tag{position:absolute;left:22px;bottom:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.entry__tag::before{content:"› "}
.entry--stamp{background:var(--lime);border-color:var(--ink);padding-bottom:22px}
.entry--stamp .entry__stamp{color:var(--ink);border-color:var(--ink)}
.entry__big{font:30px/1.05 var(--display)!important;color:var(--ink)!important}

/* drawer-front footer */
.drawer{background:linear-gradient(var(--surface),var(--ink));border-top:2px solid var(--cyan);padding:44px clamp(16px,4vw,48px) 28px}
.drawer__front{max-width:1184px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
.drawer__id{display:flex;align-items:center;gap:14px}
.drawer__id img{border-radius:8px;border:1px solid rgba(57,230,255,.45)}
.drawer__id strong{display:block;font:26px/1 var(--display);color:var(--cyan)}
.drawer__id span{font-size:12px;color:var(--muted);letter-spacing:.08em}
.ca{justify-self:center;display:flex;align-items:center;gap:10px;min-width:min(100%,460px);padding:10px 12px;border:1px solid rgba(198,255,77,.5);background:rgba(11,3,16,.6);box-shadow:inset 0 0 0 3px rgba(11,3,16,.9)}
.ca__label{font:700 12px/1 var(--mono);letter-spacing:.2em;color:var(--ink);background:var(--lime);padding:6px 8px}
.ca__value{flex:1;font:13px/1.3 var(--mono);color:var(--text);overflow-wrap:anywhere;min-height:1.3em}
.ca[data-empty="true"] .ca__value{border-bottom:1px dashed rgba(198,255,77,.35)}
.ca__copy{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime);background:none;border:1px solid var(--lime);padding:7px 10px;cursor:pointer;transition:background .2s,color .2s}
.ca__copy:hover,.ca__copy.is-done{background:var(--lime);color:var(--ink)}
.icons{display:flex;gap:10px}
.icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(57,230,255,.5);color:var(--cyan);transition:transform .2s,background .2s,color .2s}
.icon svg{width:20px;height:20px}
.icon:hover{background:var(--cyan);color:var(--ink);transform:translateY(-2px)}
.drawer__foot{max-width:1184px;margin:30px auto 0;padding-top:16px;border-top:1px dashed rgba(57,230,255,.25);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.label.reveal.in{transform:rotate(-1.2deg)}
.entry.reveal.in:nth-child(even){transform:rotate(.8deg)} .entry.reveal.in:nth-child(odd){transform:rotate(-.6deg)}
.entry.reveal.in:hover{transform:translateY(-6px) rotate(0)}

@media (max-width:760px){
  .tab__file,.tab__nav{display:none}
  .hero{grid-template-columns:1fr;min-height:0;padding:0 16px 56px}
  .hero__art{margin:0 -16px;--m:linear-gradient(#000 70%,transparent)}
  .hero__crosshair{width:70px;height:70px;margin:-35px}
  .label{margin-top:-10px;padding:28px 20px 22px}
  .sec-head{grid-template-columns:1fr}
  .sec-head__no{grid-row:auto;margin-bottom:6px}
  .sec-head p{grid-column:1}
  .plate{padding:64px 16px}
  .plate__body{grid-template-columns:1fr;gap:28px}
  .entry{flex-basis:78vw}
  .drawer__front{grid-template-columns:1fr;justify-items:start}
  .ca{justify-self:stretch;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
.plate__fig figcaption{background:var(--surface);padding:6px 10px;display:inline-block}
@media (min-width:1281px){.log__track{padding-left:calc((100vw - 1280px)/2 + 48px)}}