/* Purrin Hood · Wanted File — parchment dossier on a dark desk */
@font-face { font-family: 'Stardos Stencil'; font-weight: 400; font-display: swap; src: url('/assets/fonts/StardosStencil-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Stardos Stencil'; font-weight: 700; font-display: swap; src: url('/assets/fonts/StardosStencil-normal-700.woff2') format('woff2'); }
@font-face { font-family: 'Special Elite'; font-weight: 400; font-display: swap; src: url('/assets/fonts/SpecialElite-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/SourceSerif4-var.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/SourceSerif4-italic-400.woff2') format('woff2'); }
@font-face { font-family: 'Pinyon Script'; font-weight: 400; font-display: swap; src: url('/assets/fonts/PinyonScript-400.woff2') format('woff2'); }

:root {
  --night: #0b0d0b; --night2: #121611;
  --paper: #ecebdd; --paper2: #f5f2e4; --card: #fbf9ef; --manila: #efe4c2;
  --ink: #141811; --ink2: #3c4237; --dim: #6b6f5f; --line: rgba(20, 24, 17, .16);
  --red: #b3261e; --red2: #c7392f; --lime: #ccff00; --lime-ink: #0e1200;
  --olive: #2e3a1c; --olive2: #43532a; --cork: #263322; --gold: #c9a53c;
  --stencil: 'Stardos Stencil', Impact, 'Arial Narrow', sans-serif;
  --type: 'Special Elite', 'Courier New', Courier, monospace;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --bar: 64px; --maxw: 1140px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 17px/1.55 var(--serif); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.show-sm { display: none; }
@media (max-width: 600px) { .hide-sm { display: none; } .show-sm { display: inline; } }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--lime); color: var(--lime-ink); padding: 8px 12px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

/* ---------- top bar ---------- */
.bar { position: fixed; inset: 0 0 auto; height: var(--bar); z-index: 40; display: flex; align-items: center; gap: 24px; padding: 0 max(20px, calc((100vw - var(--maxw)) / 2)); background: rgba(0, 0, 0, .92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #f2efe2; min-width: 0; }
.brand__mark { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid var(--lime); background: var(--olive) center/cover; flex: none; }
.brand__mark img, .tab__face img, .pfp-banner__face img { width: 100%; height: 100%; object-fit: cover; }
.brand__name { font: 700 19px/1 var(--stencil); letter-spacing: .02em; white-space: nowrap; }
.brand__name i { font-style: normal; color: var(--lime); }
.bar__nav { margin-left: auto; display: flex; gap: 22px; }
.bar__nav a { color: #e6e2d0; text-decoration: none; font: 400 15px var(--type); }
.bar__nav a:hover { color: var(--lime); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 2px solid var(--ink); font: 700 18px/1 var(--stencil); letter-spacing: .02em; text-decoration: none; color: var(--ink); background: transparent; transition: transform .18s, box-shadow .18s, background .18s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: none; box-shadow: none; }
.btn--lime { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.btn--lime:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn--dark { background: var(--ink); color: #f3f0e1; }
.btn--outline { background: transparent; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 15px; }
.bar .btn--lime:hover { box-shadow: 3px 3px 0 #fff; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.link { background: none; border: 0; padding: 0; color: var(--red); text-decoration: underline; font: 400 15px var(--type); }

/* ---------- desk + sheet ---------- */
.desk { position: relative; max-width: var(--maxw); margin: 0 auto; padding: calc(var(--bar) + 40px) 0 0; }
.tabs-top { display: flex; gap: 12px; padding-left: 0; }
.tab { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px 16px; border-radius: 12px 12px 0 0; font: 700 18px/1 var(--stencil); letter-spacing: .02em; text-decoration: none; color: var(--ink); transition: transform .2s; }
.tab:hover { transform: translateY(-3px); }
.tab--paper { background: var(--paper); }
.tab--lime { background: var(--lime); color: var(--lime-ink); }
.tab__face { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); background: var(--olive); flex: none; }
.sheet { position: relative; overflow-x: clip; background: var(--paper) var(--noise); border-radius: 0 6px 0 0; padding: 30px 48px 48px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.sheet::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 60% at 50% 0, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(90deg, rgba(120, 100, 60, .07), transparent 8%, transparent 92%, rgba(120, 100, 60, .07)); }
.side-tabs { position: fixed; top: calc(var(--bar) + 86px); left: calc(50% + var(--maxw) / 2); z-index: 30; display: flex; flex-direction: column; gap: 8px; }
.side-tabs a { writing-mode: vertical-rl; padding: 18px 12px; background: var(--paper2); color: var(--ink); text-decoration: none; font: 700 16px/1 var(--stencil); letter-spacing: .08em; border-radius: 0 10px 10px 0; box-shadow: 4px 4px 14px rgba(0, 0, 0, .35); transition: transform .2s, background .2s; }
.side-tabs a:hover, .side-tabs a.is-on { background: var(--lime); transform: translateX(4px); }

/* ---------- type helpers ---------- */
.micro { margin: 0; font: 400 13px/1.3 var(--type); letter-spacing: .12em; color: var(--ink2); text-transform: uppercase; }
.micro--dim { color: var(--dim); margin-top: 18px; }
.page { text-align: right; }
.rule { border: 0; border-top: 2px solid var(--ink); margin: 26px 0 18px; }
.fine { font: 400 13px/1.5 var(--type); color: var(--dim); margin: 10px 0 0; }
.redact { background: var(--ink); color: transparent; border-radius: 1px; letter-spacing: -.05em; user-select: none; }

/* ---------- stamps ---------- */
.stamp { display: inline-block; padding: 6px 14px 4px; border: 4px solid var(--red); border-radius: 6px; color: var(--red); font: 700 30px/1 var(--stencil); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-8deg); opacity: .9; mix-blend-mode: multiply; background: transparent; text-shadow: 0 0 1px rgba(179, 38, 30, .4); }
.stamp--sm { font-size: 18px; border-width: 3px; padding: 5px 10px 3px; }
.stamp--tiny { font-size: 12px; border-width: 2px; padding: 3px 7px 2px; }
.stamp--card { font-size: 24px; margin-top: 10px; }
.stamp[data-stamp] { opacity: 0; transform: rotate(-8deg) scale(1.5); }
.stamp[data-stamp].is-in { animation: slam .55s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes slam { 0% { opacity: 0; transform: rotate(-14deg) scale(1.9); } 60% { opacity: .95; transform: rotate(-7deg) scale(.94); } 100% { opacity: .9; transform: rotate(-8deg) scale(1); } }

/* ---------- tape, clip, pins ---------- */
.tape { position: absolute; width: 120px; height: 34px; background: rgba(240, 228, 186, .78); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); z-index: 3; }
.tape--tl { top: 10px; left: -26px; transform: rotate(-38deg); }
.tape--br { bottom: 26px; right: -30px; transform: rotate(-38deg); }
.tape--tr { top: 10px; right: -26px; transform: rotate(38deg); }
.tape--lime { background: rgba(204, 255, 0, .55); width: 96px; height: 26px; }
.clip { position: absolute; top: -26px; left: 50%; width: 22px; height: 54px; border: 3px solid #8c9088; border-radius: 12px; border-bottom-color: transparent; z-index: 4; }
.pin { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #d9d6c8 13% 30%, #9a978a 70%); box-shadow: 0 3px 5px rgba(0, 0, 0, .35); transform: translateX(-50%); z-index: 3; }
.pin--red { background: radial-gradient(circle at 35% 30%, #ffb3ad 0 14%, #d43a2f 15% 55%, #8f1d16 100%); }
.pin--lime { background: radial-gradient(circle at 35% 30%, #fbffd6 0 14%, #c5f000 15% 55%, #6f8a00 100%); }

/* ---------- image frames + placeholders ---------- */
.ph-frame { position: relative; overflow: hidden; background: repeating-linear-gradient(45deg, #2a3321 0 14px, #26301e 14px 28px); }
.ph-frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity .6s; }
.ph-frame.is-missing img { opacity: 0; }
.is-missing > img { visibility: hidden; }
.brand__mark.is-missing, .tab__face.is-missing, .pfp-banner__face.is-missing { background: var(--olive) radial-gradient(circle at 50% 40%, var(--lime) 0 18%, transparent 19%); }
.ph-frame.is-missing::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; color: var(--lime); font: 700 22px var(--stencil); letter-spacing: .1em; text-shadow: 0 2px 0 #000; }

/* ---------- 1 · hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 34px; }
.polaroid { position: relative; margin: 10px 0 0; padding: 18px 18px 64px; background: #fdfcf6; box-shadow: 0 18px 40px rgba(0, 0, 0, .28), 0 2px 4px rgba(0, 0, 0, .16); transform: rotate(-3deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font: 400 19px var(--type); transform: rotate(-1.5deg); }
.ph-frame--hero { aspect-ratio: 4 / 5; }
.hero__file { position: relative; min-width: 0; }
.hero__title { margin: 6px 0 0; font: 700 clamp(64px, 9vw, 116px)/.88 var(--stencil); letter-spacing: -.01em; }
.stamp--hero { position: absolute; top: -16px; right: 0; font-size: 40px; border-width: 5px; transform: rotate(-10deg); }
.stamp--hero.is-in { animation-name: slamHero; }
@keyframes slamHero { 0% { opacity: 0; transform: rotate(-16deg) scale(2.1); } 60% { opacity: .95; transform: rotate(-9deg) scale(.94); } 100% { opacity: .9; transform: rotate(-10deg) scale(1); } }
.profile { margin: 0; display: grid; gap: 10px; font: 400 16px/1.35 var(--type); }
.profile div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; }
.profile dt { color: var(--ink2); }
.profile dd { margin: 0; }
.ca { margin-top: 28px; }
.ca__label { margin: 0 0 8px; font: 400 15px var(--type); color: var(--ink2); }
.ca__row { display: flex; gap: 12px; }
.ca__value { flex: 1; min-width: 0; display: flex; align-items: center; padding: 14px 16px; border: 2px dashed var(--ink); background: rgba(255, 255, 255, .55); font: 400 15px/1.3 var(--type); overflow-wrap: anywhere; word-break: break-all; }
.ca__value.is-soon { color: var(--dim); letter-spacing: .04em; }
.ca__value.is-live { animation: caFlash 1.6s ease-out; }
@keyframes caFlash { 0%, 30% { background: var(--lime); } 100% { background: rgba(255, 255, 255, .55); } }
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }

/* standing order */
.order { position: relative; display: flex; align-items: center; gap: 20px; margin: 46px 0 0; padding: 22px 26px; background: #fdfcf6; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.order__label { flex: none; color: var(--red); font: 700 18px var(--stencil); letter-spacing: .04em; }
.order__text { flex: 1; min-width: 0; font: 400 20px/1.3 var(--type); }
.caret { display: inline-block; width: 10px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--red); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.order__nav { flex: none; display: flex; align-items: center; gap: 8px; }
.order__nav button { width: 38px; height: 38px; border: 2px solid var(--ink); background: transparent; font-size: 18px; }
.order__nav button:hover { background: var(--lime); }
.order__count { font: 400 14px var(--type); color: var(--ink2); min-width: 44px; text-align: right; }

/* ---------- 2 · field report ---------- */
.intel { padding-top: 46px; }
.notebook { position: relative; background: #fdfdf8; background-image: linear-gradient(transparent 31px, rgba(80, 120, 170, .14) 32px); background-size: 100% 32px; padding: 26px 30px 18px 48px; box-shadow: 0 12px 30px rgba(0, 0, 0, .14); }
.notebook::before { content: ''; position: absolute; top: 0; bottom: 0; left: 30px; border-left: 2px solid rgba(179, 38, 30, .45); }
.tape--a { top: -12px; left: 150px; transform: rotate(-2deg); }
.tape--b { top: -12px; right: 230px; transform: rotate(3deg); }
.stamp--intel { position: absolute; top: -18px; right: 120px; }
.notebook__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid rgba(179, 38, 30, .7); padding-bottom: 10px; }
.notebook__head h2 { margin: 0; font: 700 22px var(--stencil); letter-spacing: .04em; }
.live { display: inline-flex; align-items: center; gap: 8px; font: 400 14px var(--type); color: var(--ink2); }
.live i { width: 10px; height: 10px; border-radius: 50%; background: #9aa18e; }
.live.is-on i { background: var(--lime); box-shadow: 0 0 0 0 rgba(204, 255, 0, .7); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(204, 255, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(204, 255, 0, 0); } }
.stats { display: grid; grid-template-columns: 1.25fr 1.35fr 1fr 1fr 1fr 1.05fr; gap: 14px; padding: 20px 0 6px; }
.stats span { display: block; font: 400 12px var(--type); letter-spacing: .1em; color: var(--ink2); }
.stats strong { display: inline-block; margin-top: 6px; font: 400 clamp(18px, 1.9vw, 27px)/1.1 var(--type); white-space: nowrap; }
.stats strong:first-of-type { font-weight: 400; }
.circled { position: relative; padding: 1px 8px; font-size: clamp(16px, 1.6vw, 22px) !important; border: 2px solid currentColor; border-radius: 50% / 60%; }
.circled.up { color: #1f8a3a; }
.circled.down { color: var(--red); }
.trail { margin-top: 14px; border: 1px solid rgba(60, 110, 60, .25); background: rgba(225, 244, 220, .5); background-image: linear-gradient(rgba(60, 110, 60, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 110, 60, .09) 1px, transparent 1px); background-size: 24px 24px; padding: 12px 14px 8px; }
.trail__head { display: flex; justify-content: space-between; gap: 10px; font: 400 12px var(--type); letter-spacing: .1em; color: var(--ink2); }
.trail__svg { width: 100%; height: 150px; overflow: visible; }
.trail__base { stroke: rgba(20, 24, 17, .35); stroke-width: 2; stroke-dasharray: 10 8; fill: none; vector-effect: non-scaling-stroke; }
.trail__line { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); transition: stroke-dashoffset 2.2s cubic-bezier(.4, .1, .2, 1); }
.trail__line.is-pre { stroke: rgba(20, 24, 17, .25); stroke-dasharray: 6 10; stroke-dashoffset: 0; transition: none; }
.notebook.is-in .trail__line:not(.is-pre) { stroke-dashoffset: 0; }
.trail__dot { fill: var(--lime); stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; }
.trail__axis { display: flex; justify-content: space-between; font: 400 12px var(--type); color: var(--ink2); }
.notebook__foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; font: 400 14px var(--type); color: var(--ink2); }
.src { color: var(--ink); }
.pins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.pin-card { position: relative; min-height: 132px; padding: 26px 18px 18px; background: #fdfcf6; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.pin-card::after { content: ''; position: absolute; top: 0; right: 0; width: 18px; height: 18px; background: linear-gradient(225deg, var(--paper) 50%, #d9d5c3 50%); }
.pin-card .pin { left: auto; right: 34px; top: 10px; width: 14px; height: 14px; }
.pin-card__k { display: block; padding-bottom: 8px; border-bottom: 1px dashed var(--line); font: 400 13px var(--type); letter-spacing: .14em; }
.pin-card strong { display: block; margin-top: 12px; font: 700 40px/1 var(--stencil); }
.cam { position: relative; margin: 46px -48px 0; background: #000; }
.ph-frame--cam { aspect-ratio: 16 / 7; background: #050805; }
.ph-frame--cam img { filter: saturate(.8) contrast(1.05); }
.cam::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgba(0, 0, 0, .18) 0 2px, transparent 2px 4px); mix-blend-mode: multiply; }
.cam__rec, .cam__name, .cam__time { position: absolute; z-index: 2; color: #e9f5e0; font: 400 15px var(--type); letter-spacing: .1em; text-shadow: 0 1px 2px #000; }
.cam__rec { top: 26px; left: 44px; color: #ff6b5e; display: flex; align-items: center; gap: 8px; }
.cam__rec i { width: 12px; height: 12px; border-radius: 50%; background: #ff3b2f; animation: blink 1.2s steps(1) infinite; }
.cam__name { top: 26px; right: 44px; }
.cam__time { bottom: 52px; right: 44px; }
.cam__corner { position: absolute; z-index: 2; width: 34px; height: 34px; border: 3px solid #e9f5e0; }
.cam__corner--tl { top: 16px; left: 18px; border-right: 0; border-bottom: 0; }
.cam__corner--tr { top: 16px; right: 18px; border-left: 0; border-bottom: 0; }
.cam__corner--bl { bottom: 46px; left: 18px; border-right: 0; border-top: 0; }
.cam__corner--br { bottom: 46px; right: 18px; border-left: 0; border-top: 0; }
.cam figcaption { padding: 12px 24px; background: #0b0d0b; color: #cfd8c4; font: 400 14px var(--type); letter-spacing: .04em; }

/* ---------- sections ---------- */
.sec { position: relative; margin-top: 64px; padding-top: 26px; border-top: 2px dashed rgba(20, 24, 17, .4); }
.sec__head { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px; margin-top: 6px; }
.sec__title { margin: 0; font: 700 clamp(38px, 5vw, 58px)/1 var(--stencil); letter-spacing: -.005em; }
.sec__lede { margin: 12px 0 30px; font: italic 400 19px/1.5 var(--serif); color: var(--ink2); }

/* 3 · cork board */
.cork { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; padding: 40px 30px 34px; background: var(--cork); background-image: radial-gradient(rgba(255, 255, 255, .06) 1.2px, transparent 1.4px), radial-gradient(rgba(0, 0, 0, .25) 1.2px, transparent 1.4px); background-size: 9px 9px, 13px 13px; border: 10px solid #1c2619; box-shadow: inset 0 0 40px rgba(0, 0, 0, .55), 0 14px 30px rgba(0, 0, 0, .25); }
.clue { position: relative; padding: 12px 12px 18px; background: #fdfcf6; box-shadow: 0 10px 18px rgba(0, 0, 0, .35); transform: rotate(-1.6deg); transition: transform .35s; }
.clue--tilt { transform: rotate(2deg) translateY(16px); }
.clue--tilt2 { transform: rotate(-.6deg) translateY(6px); }
.clue:hover { transform: rotate(0) translateY(-6px) scale(1.02); z-index: 2; }
.ph-frame--clue { aspect-ratio: 4 / 3; }
.clue h3 { margin: 12px 0 6px; font: 700 17px/1.2 var(--stencil); letter-spacing: .02em; }
.clue p { margin: 0; font: 400 15px/1.45 var(--serif); }
.note-card { position: relative; grid-column: 2 / span 2; justify-self: center; max-width: 440px; margin-top: 10px; padding: 18px 22px; background: var(--lime); box-shadow: 0 10px 18px rgba(0, 0, 0, .3); transform: rotate(1deg); font: 400 16px/1.45 var(--type); }
.note-card__k { margin: 0 0 6px; font: 700 15px var(--stencil); letter-spacing: .08em; }
.note-card p { margin: 0; }

/* 4 · ranks */
.ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.idcard { position: relative; overflow: hidden; border-radius: 14px; background: #f2f3e6; background-image: repeating-radial-gradient(circle at 80% 120%, rgba(46, 58, 28, .06) 0 2px, transparent 2px 9px); box-shadow: 0 10px 24px rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(46, 58, 28, .25); transition: transform .35s, box-shadow .35s; }
.idcard:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 18px 34px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(46, 58, 28, .25); }
.idcard.is-me { box-shadow: 0 0 0 4px var(--lime), 0 18px 34px rgba(0, 0, 0, .25); }
.idcard__band { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--olive); color: #e8edd6; font: 400 12px var(--type); letter-spacing: .14em; }
.idcard__band i { width: 44px; height: 8px; border-radius: 6px; background: #e8edd6; }
.idcard--officer .idcard__band { background: #2d4a6b; }
.idcard--command .idcard__band { background: #6e1f17; }
.idcard--legend .idcard__band { background: linear-gradient(90deg, #6f5414, #c9a53c, #6f5414); color: #1b1505; }
.idcard__body { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 18px; padding: 16px 16px 12px; }
.idcard__photo { padding: 5px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.ph-frame--rank { aspect-ratio: 4 / 5; background: #d8dbcc; }
.idcard__no { margin: 6px 0 0; font: 400 11px var(--type); text-align: center; }
.idcard__k { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; font: 400 12px var(--type); letter-spacing: .14em; color: var(--olive2); }
.idcard__k svg { width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.idcard h3 { margin: 0; font: 700 26px/1.08 var(--stencil); }
.idcard p { margin: 6px 0 0; font: 400 15px/1.4 var(--serif); color: var(--ink2); }
.idcard__hold { margin-top: 8px; font: 400 13px var(--type); color: var(--ink); }
.bars { display: flex; gap: 4px; margin-top: 10px; }
.bars i { flex: 1; height: 6px; border-radius: 2px; background: rgba(46, 58, 28, .16); }
.bars i.on { background: var(--olive2); }
.idcard__foot { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 14px; }
.barcode { display: block; width: 170px; height: 30px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); opacity: .85; }
.sig { font: 400 30px/1 var(--script); color: #1d3a7a; }
.seal { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #e8f9a0, #a9cc22 55%, #5f7a09); box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.seal svg { width: 22px; height: 22px; stroke: #1f2a05; stroke-width: 3; fill: none; stroke-linecap: round; }
.idcard__foot > div { display: flex; align-items: center; gap: 10px; }

.rankcheck { margin-top: 34px; padding: 26px; border: 2px dashed var(--ink); background: rgba(255, 255, 255, .45); }
.rankcheck__head h3 { margin: 0; font: 700 24px var(--stencil); }
.rankcheck__head p { margin: 6px 0 14px; font: 400 15px var(--type); color: var(--ink2); }
.rankcheck__form { display: flex; flex-wrap: wrap; gap: 10px; }
.rankcheck__form input { flex: 1 1 280px; min-width: 0; min-height: 52px; padding: 0 14px; border: 2px solid var(--ink); background: #fffef7; font: 400 15px var(--type); color: var(--ink); }
.rankcheck__who[hidden] { display: none; }
.rankcheck__who { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 12px; font: 400 14px var(--type); }
.rankcheck__who b { font-weight: 400; overflow-wrap: anywhere; }
.rankcheck__out { margin: 14px 0 0; font: 400 16px/1.45 var(--type); }
.rankcheck__out b { font: 700 20px var(--stencil); color: var(--olive); }

/* legend card */
.legend { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 70px; padding-top: 30px; border-top: 2px dashed rgba(20, 24, 17, .4); }
.legend__eyebrow { margin: 0 0 24px; font: 700 17px var(--serif); letter-spacing: .14em; color: #8a6d14; }
.goldcard { position: relative; width: min(100%, 700px); padding: 14px; border-radius: 26px; background: linear-gradient(135deg, #7a5d16, #e9cf75 22%, #a8842a 45%, #f6e39a 62%, #8a6a1c 85%, #d9b955); box-shadow: 0 30px 50px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .5); text-align: left; transform-style: preserve-3d; transition: transform .3s; }
.goldcard__slot { position: absolute; top: 8px; left: 50%; width: 76px; height: 14px; border-radius: 8px; transform: translateX(-50%); background: #d7c68e; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); }
.goldcard__band { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 10px 18px; border-radius: 12px 12px 0 0; background: linear-gradient(90deg, #f1db8a, #b38f30, #f1db8a); color: #1d1606; font: 700 16px var(--stencil); letter-spacing: .1em; }
.stars { letter-spacing: .1em; }
.goldcard__body { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; padding: 20px 18px; background: #12100a; color: #f1e3b4; background-image: repeating-radial-gradient(circle at 70% 40%, rgba(201, 165, 60, .08) 0 2px, transparent 2px 12px); }
.ph-frame--gold { aspect-ratio: 4 / 5; border: 3px solid #d7b85a; background: #2a2210; }
.goldcard__k { margin: 0; font: 400 14px var(--type); letter-spacing: .12em; color: #d9c07a; }
.goldcard__name { margin: 6px 0 12px; font: 700 40px/1 var(--stencil); color: #f6e39a; text-shadow: 0 2px 0 #5a4612; }
.goldcard__info p:not(.goldcard__k):not(.goldcard__name) { margin: 4px 0; font: 400 15px var(--type); }
.stamp--gold { position: absolute; bottom: 30px; right: 128px; font-size: 20px; border-width: 3px; color: #e14b3f; border-color: #e14b3f; mix-blend-mode: normal; }
.goldcard__seal { position: absolute; right: 22px; bottom: 18px; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #d9b955 45%, #7a5d16); box-shadow: 0 6px 12px rgba(0, 0, 0, .5); display: grid; place-items: center; }
.goldcard__seal svg { width: 56px; height: 56px; fill: none; stroke: #3a2c08; stroke-width: 3.5; stroke-linecap: round; }
.goldcard__foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-radius: 0 0 12px 12px; background: #12100a; }
.goldcard__foot .barcode { background: repeating-linear-gradient(90deg, #d9c07a 0 2px, transparent 2px 4px, #d9c07a 4px 5px, transparent 5px 8px); }
.goldcard__foot .sig { color: #f1db8a; }
.legend__note { margin: 22px 0 18px; font: 400 15px var(--type); }
.why { width: min(100%, 620px); margin-top: 26px; padding: 18px 22px; border: 2px dashed #b08b2a; background: #f2e7c4; text-align: left; }
.why__k { margin: 0 0 6px; font: 700 18px var(--serif); color: #7a5d16; }
.why p:last-child { margin: 0; font: 400 16px/1.55 var(--serif); }

/* 5 · pfp */
.pfp-banner { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border: 2px dashed var(--ink); background: #fdfcf6; }
.pfp-banner__face { width: 58px; height: 58px; flex: none; border-radius: 50%; overflow: hidden; border: 3px solid var(--lime); background: var(--olive); }
.pfp-banner > div { flex: 1; min-width: 0; }
.pfp-banner__t { margin: 0; font: 700 22px var(--stencil); }
.pfp-banner__s { margin: 2px 0 0; font: 400 14px var(--type); color: var(--ink2); }
.pfp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 34px; margin-top: 28px; }
.pfp__stage { padding: 14px; background: #fdfcf6; box-shadow: 0 14px 30px rgba(0, 0, 0, .2); transform: rotate(-1deg); }
.pfp__stage canvas { width: 100%; height: auto; display: block; background: #1b2215; }
.pfp__controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 130px; padding: 18px; border: 3px dashed var(--olive2); background: rgba(204, 255, 0, .12); text-align: center; cursor: pointer; transition: background .2s; }
.drop:hover, .drop.is-over { background: rgba(204, 255, 0, .35); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop__t { font: 700 22px var(--stencil); }
.drop__s { font: 400 13px var(--type); color: var(--ink2); }
.field { display: flex; flex-direction: column; gap: 6px; font: 400 14px var(--type); letter-spacing: .06em; }
.field select { min-height: 48px; padding: 0 12px; border: 2px solid var(--ink); background: #fffef7; font: 400 16px var(--type); color: var(--ink); }
.field input[type=range] { accent-color: var(--olive2); }
.toggles { display: flex; flex-wrap: wrap; gap: 10px 18px; font: 400 15px var(--type); }
.toggles input { accent-color: var(--olive2); width: 18px; height: 18px; vertical-align: -3px; }

/* 6 · files */
.files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.file { position: relative; padding: 34px 18px 20px; background: var(--manila); box-shadow: 0 10px 22px rgba(0, 0, 0, .14); }
.file:nth-child(2n) { transform: rotate(.8deg); }
.file:nth-child(3n) { transform: rotate(-.7deg); }
.file__tab { position: absolute; top: -16px; left: 16px; padding: 6px 12px; border-radius: 8px 8px 0 0; background: #e3d5a8; font: 400 12px var(--type); letter-spacing: .12em; }
.file .stamp--tiny { position: absolute; top: 12px; right: 12px; }
.ph-frame--file { aspect-ratio: 4 / 3; margin-bottom: 14px; }
.file h3 { margin: 0 0 6px; font: 700 21px var(--stencil); }
.file p { margin: 0; font: 400 15px/1.5 var(--serif); }
.file--redact h3 { color: var(--ink); }

/* 7 · glossary */
.gloss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 46px; margin: 0; }
.gloss div { padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.gloss dt { font: 700 20px var(--serif); }
.gloss dd { margin: 4px 0 0; font: 400 15px var(--type); color: var(--ink2); }

/* 8 · whispers */
.whispers { list-style: none; counter-reset: w; margin: 0; padding: 18px; background: #fdfcf6; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
.whispers li { counter-increment: w; }
.whispers button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 4px 0; border: 0; border-left: 5px solid var(--lime); background: rgba(204, 255, 0, .14); text-align: left; font: 400 17px/1.35 var(--type); color: var(--ink); transition: background .2s, transform .2s; }
.whispers button::before { content: counter(w, decimal-leading-zero) ' >>'; flex: none; color: var(--olive2); font-size: 14px; }
.whispers button span { flex: 1; min-width: 0; }
.whispers button em { flex: none; font: 400 13px var(--type); font-style: normal; color: var(--dim); }
.whispers button:hover { background: rgba(204, 255, 0, .38); transform: translateX(4px); }
.whispers button.is-copied em { color: var(--olive); }

/* 9 · how to */
.howto { background: #fdfcf6; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); padding: 22px 26px; }
.howto__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.howto__tabs button { min-height: 42px; padding: 0 16px; border: 2px solid var(--ink); background: transparent; font: 400 15px var(--type); }
.howto__tabs button[aria-selected=true] { background: var(--ink); color: #f3f0e1; }
.howto__steps { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: s; }
.howto__steps li { counter-increment: s; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px dashed var(--line); }
.howto__steps li::before { content: counter(s, decimal-leading-zero); font: 700 26px var(--stencil); color: var(--red); }
.howto__steps b { display: block; font: 700 18px var(--serif); }
.howto__steps p { margin: 4px 0 0; font: 400 16px/1.5 var(--serif); }
.howto__steps a { color: var(--olive); font-weight: 600; }

/* 10 · poster */
.poster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: center; margin-top: 70px; padding: 22px; background: #fdfcf6; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.ph-frame--poster { aspect-ratio: 4 / 5; }
.stars--green { margin: 0; color: #1f8a3a; font-size: 22px; }
.poster__k { margin: 6px 0 0; font: 700 18px var(--stencil); letter-spacing: .06em; }
.poster__title { margin: 4px 0 14px; font: 700 clamp(70px, 9vw, 120px)/.86 var(--stencil); color: #1f8a3a; text-shadow: 3px 3px 0 var(--ink); -webkit-text-stroke: 2px var(--ink); }
.poster__text > p:not([class]) { margin: 0; font: 400 18px/1.5 var(--serif); }
.poster__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.foot { margin-top: 46px; padding-top: 22px; border-top: 2px solid var(--ink); }
.foot p { margin: 0 0 22px; font: 400 14px/1.55 var(--type); color: var(--ink2); max-width: 820px; }
.stamp--end { font-size: 18px; border-width: 3px; transform: rotate(-3deg); }
.stamp--end.is-in { animation-name: slamEnd; }
@keyframes slamEnd { 0% { opacity: 0; transform: rotate(-9deg) scale(1.8); } 100% { opacity: .9; transform: rotate(-3deg) scale(1); } }

/* lantern toggle, dialog, toast */
.lantern { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 2px solid var(--lime); background: #050605; color: #f3f0e1; font: 700 16px var(--stencil); }
.lantern i { width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.dlg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .6); }
.dlg[hidden] { display: none; }
.dlg__card { width: min(100%, 420px); padding: 26px; background: var(--paper2) var(--noise); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.dlg__card--wide { width: min(100%, 460px); }
.dlg__card h3 { margin: 14px 0 8px; font: 700 26px var(--stencil); }
.dlg__card p { font: 400 16px/1.5 var(--type); }
.wlist { display: grid; gap: 8px; margin: 14px 0; }
.wlist button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 2px solid var(--ink); background: #fffef7; font: 400 16px var(--type); text-align: left; }
.wlist button:hover { background: var(--lime); }
.wlist img { width: 28px; height: 28px; }
.wlist small { margin-left: auto; color: var(--dim); }
.wsel__err { color: var(--red); font: 400 14px var(--type); }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 70; padding: 12px 18px; background: var(--lime); color: var(--lime-ink); font: 700 16px var(--stencil); transform: translate(-50%, 140%); transition: transform .3s; pointer-events: none; }
.toast.is-on { transform: translate(-50%, 0); }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.polaroid.reveal.is-in { transform: rotate(-3deg); }
.clue.reveal.is-in, .file.reveal.is-in { transform: none; }

/* lanterns off (dark file) */
body.dark { --paper: #1b1f18; --paper2: #232820; --card: #262b22; --manila: #2c2a1e; --ink: #ebe7d4; --ink2: #b9b6a2; --dim: #8e8b78; --line: rgba(235, 231, 212, .16); }
body.dark .polaroid, body.dark .order, body.dark .notebook, body.dark .pin-card, body.dark .clue, body.dark .pfp-banner, body.dark .pfp__stage, body.dark .whispers, body.dark .howto, body.dark .poster { background-color: #20251d; }
body.dark .notebook { background-image: linear-gradient(transparent 31px, rgba(150, 190, 230, .1) 32px); }
body.dark .trail { background-color: rgba(30, 60, 30, .35); }
body.dark .ca__value, body.dark .rankcheck, body.dark .rankcheck__form input, body.dark .field select { background: #151913; }
body.dark .idcard { background-color: #20251d; }
body.dark .why { background: #2c2716; }
body.dark .file__tab { background: #3a3523; }
body.dark .tab--paper { background: var(--paper); color: var(--ink); }
body.dark .stamp { mix-blend-mode: normal; color: #ef5a4c; border-color: #ef5a4c; }
body.dark .btn { border-color: var(--ink); color: var(--ink); }
body.dark .btn--lime { color: var(--lime-ink); border-color: var(--lime); }
body.dark .btn--dark { background: var(--ink); color: #12150f; }
body.dark .poster { box-shadow: 10px 10px 0 var(--lime); }
body.dark .redact { background: #000; }

/* ---------- responsive ---------- */
@media (max-width: 1260px) { .side-tabs { display: none; } }
@media (max-width: 1180px) { .desk { margin: 0 16px; } }
@media (max-width: 960px) {
  .bar__nav { display: none; }
  .bar .btn--sm { margin-left: auto; }
  .sheet { padding: 22px 22px 34px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .polaroid { max-width: 440px; margin: 10px auto 0; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats > div { min-width: 0; }
  .pins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cam { margin: 40px -22px 0; }
  .cork { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note-card { grid-column: 1 / -1; }
  .ranks { grid-template-columns: minmax(0, 1fr); }
  .pfp { grid-template-columns: minmax(0, 1fr); }
  .files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .bar { gap: 10px; padding: 0 12px; }
  .brand__name { font-size: 15px; }
  .bar .btn--sm { padding: 0 10px; font-size: 13px; }
  .desk { margin: 0 10px; padding-top: calc(var(--bar) + 22px); }
  .tabs-top { gap: 6px; }
  .tab { padding: 11px 12px 13px; font-size: 13px; gap: 6px; }
  .tab__face { width: 22px; height: 22px; }
  .sheet { padding: 16px 14px 28px; }
  .hero__title { font-size: 64px; }
  .stamp--hero { font-size: 26px; border-width: 4px; top: -4px; }
  .profile div { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 10px; font-size: 14px; }
  .ca__row { flex-direction: column; }
  .ca__value { font-size: 13px; }
  .hero__btns .btn { flex: 1 1 100%; }
  .order { flex-wrap: wrap; gap: 10px; padding: 16px; }
  .order__text { flex: 1 1 100%; order: 3; font-size: 17px; min-height: 2.6em; }
  .order__nav { margin-left: auto; }
  .notebook { padding: 22px 14px 14px 28px; }
  .notebook::before { left: 16px; }
  .stamp--intel { right: 12px; top: -16px; font-size: 13px; }
  .tape--b { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats strong { font-size: 20px; }
  .trail__head { flex-direction: column; }
  .pins { gap: 12px; }
  .pin-card strong { font-size: 32px; }
  .cam { margin: 34px -14px 0; }
  .ph-frame--cam { aspect-ratio: 4 / 3; }
  .cam__rec, .cam__name, .cam__time { font-size: 11px; }
  .cam__rec { left: 28px; top: 20px; } .cam__name { right: 28px; top: 20px; } .cam__time { right: 28px; }
  .sec { margin-top: 48px; }
  .sec__head { gap: 10px 14px; }
  .cork { grid-template-columns: minmax(0, 1fr); padding: 26px 14px; border-width: 6px; }
  .clue--tilt, .clue--tilt2 { transform: rotate(1deg); }
  .idcard__body { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .idcard h3 { font-size: 21px; }
  .barcode { width: 110px; }
  .sig { font-size: 24px; }
  .goldcard { padding: 10px; border-radius: 18px; }
  .goldcard__body { grid-template-columns: minmax(0, 1fr); }
  .ph-frame--gold { max-width: 200px; }
  .goldcard__name { font-size: 32px; }
  .goldcard__seal { width: 64px; height: 64px; }
  .goldcard__band { font-size: 12px; padding: 8px 12px; }
  .files { grid-template-columns: minmax(0, 1fr); }
  .gloss { grid-template-columns: minmax(0, 1fr); }
  .whispers { padding: 10px; }
  .whispers button { font-size: 15px; flex-wrap: wrap; }
  .howto { padding: 16px; }
  .howto__steps li { grid-template-columns: 40px minmax(0, 1fr); }
  .poster { padding: 14px; box-shadow: 6px 6px 0 var(--ink); }
  .poster__btns .btn { flex: 1 1 calc(50% - 10px); }
  .lantern { right: 10px; bottom: 10px; padding: 9px 12px; font-size: 13px; }
  .brand__file { display: none; }
  .brand__name { font-size: 17px; }
  .pfp-banner { flex-wrap: wrap; }
  .pfp-banner > div { flex: 1 1 calc(100% - 80px); }
  .pfp-banner .btn { flex: 1 1 100%; }
  .stamp--end { font-size: 13px; white-space: normal; max-width: 100%; }
  .stamp--gold { position: static; display: inline-block; margin-top: 12px; }
  .stamp--card { font-size: 18px; }
  .stamp--intel { max-width: 70%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .stamp[data-stamp] { opacity: .9; transform: rotate(-8deg); animation: none !important; }
  .stamp--hero[data-stamp] { transform: rotate(-10deg); }
  .trail__line { transition: none; stroke-dashoffset: 0; }
  .caret, .cam__rec i, .live.is-on i { animation: none; }
}

/* ---------- alive cats (alive.js): blink overlay + WebGL depth picture ---------- */
.alive-host { position: relative; }
img[data-alive] { will-change: transform; transform-origin: 50% 50%; }
.alive-lid, .alive-gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.alive-gl { opacity: 0; transition: opacity .5s; }
.alive-gl.on { opacity: 1; }
.alive-host.gl-on > img { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .alive-lid, .alive-gl { display: none; } .alive-host.gl-on > img { visibility: visible; } }