:root {
  --bg: #2a3a49;
  --bg-deep: #1d2a36;
  --slate: #5b7186;
  --slate-light: #8fa6b8;
  --card: #c3d1db;
  --card-2: #b4c4d0;
  --ink: #17212b;
  --ink-soft: #3c4f60;
  --paper: #e9e0c8;
  --paper-ink: #2b2621;
  --green: #5fdc8f;
  --red: #c8321e;
  --lamp: #dcf7e2;
  --display: "Anton", "Impact", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --type: "Special Elite", "Courier New", monospace;
  --pixel: "Pixelify Sans", "Silkscreen", monospace;
  --gutter: clamp(16px, 2.2vw, 40px);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--card); background: var(--bg);
  font-family: var(--mono); font-size: 16px; line-height: 1.5; font-synthesis: none;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  cursor: url("/art/web/cursor.png") 3 3, auto;
}
a, button { cursor: url("/art/web/cursor_hand.png") 6 2, pointer; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 5; background: url("/art/web/grain.png") repeat; background-size: 160px; opacity: .55; mix-blend-mode: soft-light; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.muted { color: var(--slate-light); }
.tag { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- masthead ---------- */
main { padding: 0 var(--gutter) 64px; max-width: 1920px; margin: 0 auto; }
.masthead { display: grid; grid-template-columns: 1fr minmax(280px, 360px) minmax(240px, 330px); gap: clamp(20px, 3vw, 56px); align-items: end; padding: clamp(20px, 3vw, 44px) 0 clamp(16px, 2vw, 28px); }
.tags { margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); display: flex; flex-wrap: wrap; gap: 6px 14px; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(76px, 10.4vw, 176px); line-height: 1.5; margin: -0.36em 0 -0.2em -0.03em; letter-spacing: .01em; color: #e6eef3; text-transform: uppercase; }
.lede { max-width: 62ch; margin: 0 0 8px; font-size: clamp(15px, 1.1vw, 18px); color: #d6e0e8; }
.clock { margin: 0; font-size: 14px; color: var(--slate-light); letter-spacing: .04em; }
.clock b { color: var(--green); font-weight: 600; }

.directory { position: relative; display: grid; grid-template-columns: auto; gap: 2px; width: 100%; padding: 44px 22px 18px; background: url("/art/web/directory.png") no-repeat center / 100% 100%; image-rendering: pixelated; font-family: var(--pixel); }
.directory-title { position: absolute; top: 20px; left: 34px; font-size: 16px; letter-spacing: .25em; color: #b7c5d1; }
.directory a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 12px; color: #f0f4f7; text-decoration: none; font-size: 22px; letter-spacing: .04em; border-bottom: 2px solid rgba(255,255,255,.08); }
.directory a i { font-style: normal; font-size: 16px; color: var(--slate-light); }
.directory a:hover, .directory a:focus-visible { color: var(--green); }

.board { align-self: end; }
.board-frame { position: relative; aspect-ratio: 287 / 230; background: url("/art/web/board.png") no-repeat center / 100% 100%; image-rendering: pixelated; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; padding: 9% 16% 8%; text-align: center; }
.board-title { font-family: var(--pixel); font-size: 16px; letter-spacing: .04em; white-space: nowrap; color: #d9e3ea; }
.portrait { width: 36%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; margin: 2% 0 1%; }
.portrait canvas, .portrait img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.portrait-empty { font-family: var(--pixel); font-size: 16px; color: var(--slate-light); white-space: nowrap; }
.board-name { font-family: var(--pixel); font-size: clamp(18px, 1.5vw, 24px); color: #fff; }
.board-note { font-family: var(--mono); font-size: 12px; color: var(--slate-light); line-height: 1.25; white-space: nowrap; overflow: hidden; max-width: 100%; }

/* ---------- the office ---------- */
.office { margin: 8px calc(-1 * var(--gutter)) 0; }
.office-status { margin: 0 var(--gutter) 10px; font-size: 14px; color: var(--slate-light); }
.office-status span { color: var(--green); letter-spacing: .1em; }
.floors { display: grid; }
.floor { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 7% var(--gutter) 1.2%; background: url("/art/web/office_tile.png") repeat-x center bottom / auto 100%; image-rendering: pixelated; animation: flicker 7s steps(1, end) infinite; }
.floor:nth-child(2) { animation-delay: -3.1s; animation-duration: 9s; }
.floor::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(220,247,226,.10), rgba(0,0,0,0) 45%, rgba(0,0,0,.18)); }
@keyframes flicker { 0%, 93% { filter: brightness(1); } 94% { filter: brightness(.93); } 95% { filter: brightness(1.02); } 96.5% { filter: brightness(.9); } 97.5% { filter: brightness(1); } }

.desk { position: relative; z-index: 1; appearance: none; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; width: 100%; }
.desk:focus-visible .plate { outline: 3px solid var(--green); outline-offset: 4px; }
.scene { position: relative; display: block; width: 100%; aspect-ratio: 540 / 301; }
.scene img { position: absolute; image-rendering: pixelated; }
.scene .cubicle { left: 0; bottom: 0; width: 92.6%; height: auto; }
.scene .worker { left: 65.9%; bottom: 2%; width: 33.9%; }
.scene .worker.frame { opacity: 0; }
.scene .worker.frame.on { opacity: 1; }
.scene .chair { left: 64.4%; bottom: 2%; width: 24.6%; }
.scene .guard { left: 100%; bottom: 2%; width: 26.5%; opacity: 0; }
.scene .newhire { left: 100%; bottom: 2%; width: 27.2%; opacity: 0; }
.plate { position: absolute; left: 2.5%; top: 8%; width: 29%; font-family: var(--pixel); line-height: 1.05; color: #f4f7f9; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.plate .name { display: block; font-size: clamp(16px, 1.05vw, 22px); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.plate .pnl { display: block; margin-top: 96%; font-size: clamp(16px, 1.05vw, 22px); white-space: nowrap; }
.plate .pnl.up { color: var(--green); }
.plate .pnl.down { color: #ff7a66; }
.plate .role { display: block; font-size: 16px; color: #c9d5de; white-space: nowrap; margin-top: 2px; }
.plate .pnl.trial { color: #ffd6a3; }
.plate .role.pip { color: #ff9c8c; }
.desk.empty .plate .name { color: #c9d5de; }

.desk:hover .cubicle, .desk:focus-visible .cubicle { filter: brightness(1.08); }

@media (max-width: 1099px) { .floor { grid-template-columns: repeat(2, 1fr); gap: 0 4%; padding-top: 12%; } }
@media (max-width: 639px) { .floor { grid-template-columns: 1fr; padding-top: 18%; } .plate .name, .plate .pnl { font-size: 18px; } }
@media (min-width: 1100px) { .plate .role { display: block; } }
@media (max-width: 1099px) { .plate .role { font-size: 16px; } }

/* ---------- windows ---------- */
.windows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; align-items: stretch; }
@media (min-width: 1700px) { .windows { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 799px) { .windows { grid-template-columns: 1fr; } }
.card { background: var(--card); color: var(--ink); border-radius: 14px; padding: 18px 18px 22px; display: flex; flex-direction: column; min-width: 0; }
.card h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 1.6vw, 30px); line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; }
.card h2 .tag { display: block; margin-bottom: 4px; }
.card-note { margin: -6px 0 14px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }

.roster { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.roster b { color: var(--ink); }
.feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.feed-list li { padding-left: 0; border-top: 1px solid rgba(23,33,43,.12); padding-top: 8px; }
.feed-list li:first-child { border-top: 0; padding-top: 0; }
.feed-list time { color: var(--ink-soft); font-size: 12px; margin-right: 8px; }
.feed-list .who { font-weight: 600; }
.feed-list .act { text-transform: uppercase; font-size: 12px; letter-spacing: .06em; margin: 0 6px; padding: 1px 6px; border-radius: 4px; background: rgba(23,33,43,.1); }
.feed-list .act.buy { background: rgba(50,150,90,.18); }
.feed-list .act.sell, .feed-list .act.stop { background: rgba(200,50,30,.16); }
.feed-list .act.fired { background: var(--red); color: #fff; }
.feed-list .act.hired, .feed-list .act.bonus { background: rgba(60,110,200,.18); }
.feed-list a { color: inherit; }

.memo { position: relative; width: 100%; max-width: 420px; margin: 0 auto; border: solid transparent; border-width: 150px 26px 76px 26px; border-image: url("/art/web/memo.png") 75 13 38 13 fill stretch; image-rendering: pixelated; }
.memo-text { position: relative; font-family: var(--type); color: var(--paper-ink); font-size: clamp(13px, .9vw, 15px); line-height: 1.32; margin: -60px 0 -20px; }
.memo-text p { margin: 0 0 .6em; }
.memo-head { padding-left: 34%; min-height: 2.6em; margin-top: -30px; }
.memo:not(.stub) .memo-text { padding-bottom: 44px; }
@media (max-width: 640px) { .memo, .file-form { border-width: 112px 20px 57px 20px; } .memo-text, .file-text { margin-top: -40px; } .memo-head { margin-top: -22px; } .stamp { top: -100px; } .xbtn { bottom: -50px; } .close { top: -106px; } .links { gap: 8px; } }
@media (max-width: 400px) { .memo-text { font-size: 12px; line-height: 1.28; } .stub-rows div { font-size: 11px; } .ca { font-size: 10px; } }
.memo-head { padding-right: 8%; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6b5f52; }
.memo-line { font-size: 12px; color: #6b5f52; }
.memo-letter { white-space: pre-wrap; }
.stamp { position: absolute; right: -6px; top: -136px; width: 32%; transform: rotate(-14deg); display: grid; place-items: center; pointer-events: none; }
.stamp img { width: 100%; image-rendering: pixelated; opacity: .9; }
.stamp span { position: absolute; font-family: var(--type); color: var(--red); font-size: clamp(14px, 1.3vw, 20px); letter-spacing: .12em; }
.xbtn { position: absolute; left: 0; bottom: -60px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 12px 6px 6px; color: var(--paper-ink); text-decoration: none; font-family: var(--type); font-size: 13px; }
.xbtn img { width: 30px; height: 27px; image-rendering: auto; }
.xbtn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.xbtn:not([aria-disabled="true"]):active { transform: translateY(2px); }
.replay { align-self: flex-start; margin-top: 12px; min-height: 48px; padding: 0 16px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 600 14px var(--mono); border-radius: 8px; }
.replay:active { transform: translateY(2px); }

.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
.badge { position: relative; display: grid; justify-items: center; text-align: center; }
.badge .bg { width: 100%; max-width: 110px; image-rendering: pixelated; }
.badge canvas { position: absolute; top: 46%; left: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -20%); image-rendering: pixelated; }
.badge .b-name { margin-top: 6px; font-family: var(--pixel); font-size: 16px; font-weight: 700; line-height: 1.1; }
.badge .b-meta { font-size: 11px; color: var(--ink-soft); line-height: 1.25; }
.badge .b-open { font-size: 11px; color: var(--red); letter-spacing: .06em; text-transform: uppercase; }
.badge button { appearance: none; border: 0; background: none; padding: 0; color: inherit; font: inherit; display: grid; justify-items: center; width: 100%; }

.stub .memo-text { margin-bottom: -10px; }
.stub .memo-head { padding-right: 0; }
.file-text .memo-head { padding-left: 34%; }
.stub-rows { margin: 0 0 8px; display: grid; gap: 3px; }
.stub-rows div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted #a89d8a; font-size: clamp(12px, .85vw, 14px); line-height: 1.3; }
.stub-rows dt { color: #6b5f52; }
.stub-rows dd { margin: 0; text-align: right; white-space: nowrap; }
.stub-rows dd a { color: inherit; }
.contract { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 10px; }
.ca { flex: 1; font-family: var(--mono); font-size: clamp(11px, .8vw, 13px); line-height: 1.35; word-break: break-all; user-select: all; color: var(--paper-ink); background: rgba(43,38,33,.06); padding: 6px 8px; border-radius: 4px; }
.copy { min-width: 60px; min-height: 48px; border: 2px solid var(--paper-ink); background: transparent; color: var(--paper-ink); font: 600 13px var(--mono); border-radius: 6px; }
.copy:disabled { opacity: .4; }
.copy:not(:disabled):active { transform: translateY(2px); }
.links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pumpbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px 6px 8px; border: 2px solid var(--paper-ink); border-radius: 26px; color: var(--paper-ink); text-decoration: none; font: 600 14px var(--mono); }
.pumpbtn img { width: 34px; height: 34px; }
.pumpbtn[aria-disabled="true"], .chartbtn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.pumpbtn:not([aria-disabled="true"]):active, .chartbtn:not([aria-disabled="true"]):active { transform: translateY(2px); }
.chartbtn { position: relative; display: block; width: 64px; height: 68px; }
.chartbtn .mon { width: 100%; height: auto; image-rendering: pixelated; }
.chartbtn .mark { position: absolute; left: 35%; top: 20%; width: 45%; height: 47%; object-fit: contain; }

/* ---------- personnel file ---------- */
.file { border: 0; padding: 0; background: transparent; width: min(92vw, 520px); max-width: none; max-height: 94vh; margin: auto; overflow: auto; }
.file::backdrop { background: rgba(10, 16, 22, .72); }
.file-form { position: relative; margin: 0; border: solid transparent; border-width: 150px 26px 76px 26px; border-image: url("/art/web/memo.png") 75 13 38 13 fill stretch; image-rendering: pixelated; }
.file-text { position: relative; margin: -60px 0 -30px; font-family: var(--type); color: var(--paper-ink); font-size: clamp(12px, 2.6vw, 15px); line-height: 1.3; }
.file-top { display: flex; gap: 12px; align-items: center; margin: 4px 0 8px; }
.file-face { width: 64px; height: 64px; flex: none; }
.file-face canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.file-text h3 { margin: 0; font-family: var(--pixel); font-size: 24px; line-height: 1; }
.file-role { margin: 2px 0 0; font-size: 12px; color: #6b5f52; }
.file-rows { margin: 0 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.file-rows div { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px dotted #a89d8a; font-size: 12px; }
.file-rows dt { color: #6b5f52; } .file-rows dd { margin: 0; text-align: right; }
.file-rows dd a { color: inherit; }
.file-strategy, .file-why { margin: 0 0 8px; font-size: 13px; }
.file-why { font-style: italic; }
.pip { border-top: 1px dashed #a89d8a; padding-top: 8px; }
.pipbtn { min-height: 48px; padding: 0 14px; border: 2px solid var(--red); background: transparent; color: var(--red); font: 600 13px var(--mono); border-radius: 8px; }
.pipbtn:disabled { opacity: .45; }
.pipbtn:not(:disabled):active { transform: translateY(2px); }
.pip-result { margin: 6px 0 0; font-size: 12px; min-height: 1em; }
.close { position: absolute; right: -8px; top: -142px; min-width: 48px; min-height: 48px; border: 0; background: transparent; color: #6b5f52; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .floor { animation: none; }
  .scene .worker.frame { transition: none; }
}
@media (max-width: 1199px) { .masthead { grid-template-columns: 1fr 1fr; } .masthead .lockup { grid-column: 1 / -1; } }
@media (max-width: 799px) {
  .masthead { grid-template-columns: 1fr; align-items: start; }
  .board { max-width: 340px; }
  h1 { font-size: clamp(72px, 24vw, 120px); }
}