/* PINKSLIP: the whole site is office paperwork. Pink carbon slips, red rubber stamps, a corkboard, a CRT. */
:root {
  --slip: #FFC2D4;
  --slip-2: #FFD9E4;
  --slip-3: #FF9DBA;
  --ink: #1B1F3B;
  --ink-2: #474B6B;
  --red: #D7263D;
  --blue: #2B4CC9;
  --paper: #FFF8F0;
  --manila: #E8C98E;
  --cork: #B9865A;
  --yellow: #FFE14D;
  --crt: #232850;
  --loud: 'Anton', 'Impact', sans-serif;
  --type: 'Special Elite', 'Courier New', monospace;
  --mono: 'IBM Plex Mono', monospace;
  --body: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0; color: var(--ink); font: 16px/1.5 var(--body); overflow-x: hidden;
  background: var(--slip) repeating-linear-gradient(0deg, transparent 0 31px, rgba(27,31,59,.07) 31px 32px);
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
.hand { font-family: var(--type); color: var(--blue); }
.kicker { font: 700 12px/1.3 var(--mono); letter-spacing: .14em; margin: 0 0 14px; }
.fine { font: 500 12px var(--mono); color: var(--ink-2); margin: 10px 0 0; }
.hidden, [hidden] { display: none !important; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  background: var(--red); color: var(--paper); border: 4px solid var(--ink); border-radius: 0;
  font: 400 20px/1 var(--loud); letter-spacing: .04em; text-transform: uppercase; padding: 14px 22px;
  box-shadow: 6px 6px 0 var(--ink); transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
.btn:active { transform: translate(4px,4px); box-shadow: 2px 2px 0 var(--ink); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.ghost { background: var(--paper); color: var(--ink); }
.btn.big { font-size: 26px; padding: 18px 28px; }
.btn.sm { font-size: 16px; padding: 8px 14px; box-shadow: 3px 3px 0 var(--ink); border-width: 3px; }
.btn.block { width: 100%; }

/* ticker + top */
.ticker { background: var(--ink); color: var(--yellow); overflow: hidden; white-space: nowrap; border-bottom: 4px solid var(--ink); }
.ticker-in { display: inline-flex; gap: 22px; padding: 8px 0; font: 700 13px var(--mono); letter-spacing: .12em; animation: slide 40s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 12px clamp(16px,4vw,48px); background: var(--paper); border-bottom: 4px solid var(--ink); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 30px/1 var(--loud); letter-spacing: .03em; }
.logo img { width: 38px; }
.top nav { display: flex; gap: 20px; margin-left: 12px; font: 700 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.top nav a { text-decoration: none; }
.top nav a:hover { color: var(--red); text-decoration: underline 3px; }
.top-r { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.xbtn { display: grid; place-items: center; width: 38px; height: 38px; background: var(--ink); color: var(--paper); border: 3px solid var(--ink); font: 700 20px/1 var(--body); text-decoration: none; box-shadow: 3px 3px 0 var(--red); }
.xbtn:hover { background: var(--red); }
.ca { background: var(--yellow); border: 3px solid var(--ink); font: 700 13px var(--mono); padding: 7px 10px; }

/* hero */
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px,4vw,60px); padding: clamp(28px,5vw,70px) clamp(16px,4vw,48px) 60px; align-items: center; }
.hero h1 { margin: 0; font: 400 clamp(64px,10.5vw,168px)/.86 var(--loud); letter-spacing: -.01em; text-transform: uppercase; }
.hero h1 span { display: block; }
.hero h1 .hl { color: var(--red); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 7px 7px 0 var(--ink); }
.lede { font-size: clamp(18px,1.6vw,22px); max-width: 560px; margin: 24px 0 26px; }
.cta { display: flex; gap: 16px; flex-wrap: wrap; }

.slip { position: relative; background: var(--slip-2); border: 4px solid var(--ink); padding: 22px 24px 26px; box-shadow: 14px 14px 0 var(--ink); transform: rotate(1.6deg);
  background-image: radial-gradient(circle at 12px 50%, var(--slip) 6px, transparent 7px); background-size: 100% 26px; background-repeat: repeat-y; }
.slip-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 4px double var(--ink); padding-bottom: 8px; margin-left: 14px; }
.slip-head b { font: 400 26px var(--loud); letter-spacing: .04em; }
.slip-head span { font: 700 13px var(--mono); color: var(--red); }
.slip dl { display: grid; grid-template-columns: 112px 1fr; margin: 14px 0 0 14px; }
.slip dt { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 9px 0; border-bottom: 1px solid rgba(27,31,59,.35); }
.slip dd { margin: 0; padding: 6px 0; border-bottom: 1px solid rgba(27,31,59,.35); font-size: 18px; }
.slip-foot { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
.slip-left { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding: 0 0 6px 14px; }
.slip .bot { width: 48%; flex-shrink: 0; filter: drop-shadow(6px 6px 0 rgba(27,31,59,.25)); animation: sulk 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sulk { 50% { transform: rotate(-2deg) translateY(2px); } }
.stamp { position: absolute; font: 400 34px/1 var(--loud); letter-spacing: .06em; color: var(--red); border: 5px solid var(--red); padding: 6px 14px; border-radius: 6px; opacity: .88; mix-blend-mode: multiply; pointer-events: none;
  mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0,0,0,.65) 75%); }
.stamp.s1 { right: 16px; top: 52%; transform: rotate(-14deg); font-size: 46px; }
.stamp.s2 { position: relative; transform: rotate(-4deg); color: var(--blue); border-color: var(--blue); font-size: 28px; animation: thump 3.6s ease-in-out infinite; }
@keyframes thump { 0%, 70%, 100% { transform: rotate(-4deg) scale(1); } 74% { transform: rotate(-4deg) scale(1.25); opacity: .2; } 80% { transform: rotate(-4deg) scale(.96); opacity: .9; } }
.sign { text-align: left; }
.sign .hand { font-size: 22px; display: block; border-bottom: 2px solid var(--ink); }
.sign small { font: 500 10px var(--mono); }

.tape { display: flex; gap: 40px; overflow: hidden; white-space: nowrap; background: var(--yellow); border-block: 4px solid var(--ink); padding: 12px 0; transform: rotate(-1.2deg); margin: 0 -20px; font: 400 32px/1 var(--loud); letter-spacing: .04em; }
.tape span { animation: slide 18s linear infinite; }

/* section heads */
section { padding: clamp(50px,7vw,100px) clamp(16px,4vw,48px); }
.sec-head { max-width: 900px; margin-bottom: 36px; }
.sec-head h2 { margin: 0 0 10px; font: 400 clamp(52px,8vw,112px)/.9 var(--loud); text-transform: uppercase; }
.sec-head p { margin: 0; font-size: 19px; max-width: 640px; }
.sec-head.light { color: var(--paper); }

/* apartment 404: the room, its + pins and paper notes (js/room.js) */
.room { background: var(--ink); padding-top: clamp(40px,5vw,70px); }
.room-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; color: var(--paper); margin-bottom: 22px; }
.room-head h2 { margin: 0; font: 400 clamp(46px,7vw,96px)/.9 var(--loud); color: var(--slip); }
.room-head p { margin: 0; font: 700 14px var(--mono); letter-spacing: .06em; }
.room-head .plus { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--red); border: 2px solid var(--paper); }
.room-swipe { display: none; margin: 6px 0 0; text-align: center; color: var(--slip); font: 700 12px var(--mono); letter-spacing: .1em; }
.room-stage { position: relative; max-width: 1200px; margin: 0 auto; border: 6px solid #000; box-shadow: 16px 16px 0 var(--red); background: #F7E6EC; }
.room-art { display: block; width: 100%; height: auto; }
.room-screen, .room-zz { position: absolute; left: 11.5%; top: 38.6%; width: 14.33%; height: 15%; border-radius: 6px; }
.room-screen { object-fit: cover; }
.room-zz { display: grid; place-items: center; color: #FF8FB1; font: 700 clamp(10px,1.6vw,18px) var(--mono); letter-spacing: .3em; animation: zz 2.4s ease-in-out infinite; }
.room-stage.working .room-screen { box-shadow: 0 0 22px rgba(127,209,255,.8); }
.bubble { position: absolute; left: 71%; top: 40%; max-width: 24%; background: var(--paper); border: 4px solid var(--ink); padding: 10px 14px; font: clamp(11px,1.4vw,17px)/1.3 var(--type); color: var(--blue); box-shadow: 5px 5px 0 rgba(27,31,59,.35); cursor: pointer; }
.bubble::before { content: ''; position: absolute; left: -16px; top: 18px; border: 8px solid transparent; border-right: 12px solid var(--ink); }
.bubble.pop { animation: pop .35s ease-out; }
@keyframes pop { from { transform: scale(.85) rotate(-3deg); opacity: 0; } }
.pin { position: absolute; transform: translate(-50%, -50%); width: clamp(26px,3vw,38px); height: clamp(26px,3vw,38px); border-radius: 50%; background: var(--red); color: var(--paper); border: 3px solid var(--paper); box-shadow: 0 0 0 3px var(--ink), 3px 4px 0 3px rgba(0,0,0,.35); font: 400 clamp(18px,2vw,26px)/1 var(--loud); display: grid; place-items: center; padding: 0; z-index: 3; }
.pin::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--red); animation: ping 2s ease-out infinite; }
.pin:hover, .pin.on { background: var(--yellow); color: var(--ink); }
.pin.on::after { display: none; }
@keyframes ping { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.note { position: absolute; z-index: 4; width: min(290px, 70%); background: var(--paper); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 16px 18px 18px; transform: rotate(-1.2deg); animation: pop .25s ease-out;
  background-image: linear-gradient(90deg, transparent 26px, rgba(215,38,61,.35) 26px 28px, transparent 28px); }
.note b { display: block; font: 400 26px/1.05 var(--loud); text-transform: uppercase; padding-left: 16px; padding-right: 22px; }
.note p { margin: 8px 0 12px; font: 16px/1.4 var(--type); color: var(--blue); padding-left: 16px; }
.note .btn { margin-left: 16px; }
.note .x { top: 4px; right: 8px; font-size: 24px; }

/* job board: corkboard with flyers */
.board { background: var(--cork); background-image: radial-gradient(rgba(0,0,0,.14) 1.3px, transparent 1.6px), radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.5px); background-size: 9px 9px, 13px 13px; border-block: 6px solid var(--ink); }
.board .sec-head { background: var(--paper); border: 4px solid var(--ink); padding: 20px 24px; box-shadow: 8px 8px 0 var(--ink); transform: rotate(-.8deg); display: inline-block; }
.flyers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 26px; }
.flyer { position: relative; background: var(--paper); border: 3px solid var(--ink); padding: 26px 18px 0; box-shadow: 6px 8px 0 rgba(27,31,59,.55); text-align: left; transition: transform .15s; display: flex; flex-direction: column; }
.flyer:nth-child(3n+1) { transform: rotate(-1.8deg); }
.flyer:nth-child(3n+2) { transform: rotate(1.2deg); background: var(--slip-2); }
.flyer:nth-child(3n) { transform: rotate(-.4deg); background: #FFF6C9; }
.flyer:hover { transform: rotate(0) translateY(-6px) scale(1.02); z-index: 2; }
.flyer::before { content: ''; position: absolute; top: -12px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--red); border: 3px solid var(--ink); box-shadow: 2px 3px 0 rgba(0,0,0,.35); }
.flyer .ico { font-size: 40px; line-height: 1; }
.flyer h3 { margin: 10px 0 4px; font: 400 34px/1 var(--loud); text-transform: uppercase; }
.flyer p { margin: 0 0 14px; font-size: 15px; color: var(--ink-2); flex: 1; }
.flyer .rate { font: 700 13px var(--mono); background: var(--yellow); border: 2px solid var(--ink); padding: 4px 8px; align-self: flex-start; margin-bottom: 14px; }
.flyer .pic-ok { font: 700 11px var(--mono); margin: -8px 0 12px; color: var(--ink-2); }
.flyer.other .pic-ok { color: var(--slip-2); }
.flyer .tabs { display: flex; border-top: 2px dashed var(--ink); margin: 0 -18px; }
.flyer .tabs span { flex: 1; font: 700 10px var(--mono); writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 0; border-left: 2px dashed var(--ink); text-align: center; height: 74px; display: flex; align-items: center; justify-content: center; }
.flyer .tabs span:last-child { border-left: 0; }
.flyer .tabs span.gone { visibility: hidden; }
.flyer.other { background: var(--ink); color: var(--paper); }
.flyer.other p { color: var(--slip-2); }

/* desk: CRT + time card */
.desk { background: var(--ink); color: var(--paper); }
.desk-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }
.crt { background: #F3D3DD; border: 5px solid #000; border-radius: 30px; padding: 24px 24px 0; box-shadow: 14px 14px 0 var(--red); }
.crt-glass { position: relative; aspect-ratio: 16/10; background: var(--crt); border: 5px solid #000; border-radius: 18px; overflow: hidden; }
.crt-glass img { width: 100%; height: 100%; object-fit: cover; }
.crt-glass::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,.35)); }
.crt-glass .live { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--red); color: #fff; font: 400 18px var(--loud); letter-spacing: .08em; padding: 3px 10px; border: 3px solid #000; }
.asleep { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #FF8FB1; font-family: var(--mono); padding: 20px; }
.asleep b { display: block; font: 400 clamp(30px,4vw,54px)/1 var(--loud); letter-spacing: .03em; margin-bottom: 10px; text-shadow: 0 0 18px rgba(255,143,177,.6); }
.asleep .zz { font-size: 40px; animation: zz 2.4s ease-in-out infinite; }
@keyframes zz { 50% { transform: translateY(-8px); opacity: .5; } }
.crt-chin { display: flex; gap: 12px; align-items: center; padding: 14px 6px 16px; color: var(--ink); font: 700 12px var(--mono); }
.crt-chin #screenUrl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crt-chin .brand { font: 400 16px var(--loud); letter-spacing: .1em; }
.led { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #000; background: #6b6b6b; }
.led.on { background: #3BE37B; box-shadow: 0 0 10px #3BE37B; }

.card-punch { background: var(--manila); color: var(--ink); border: 4px solid #000; padding: 16px 18px; transform: rotate(1.2deg); box-shadow: 8px 8px 0 var(--slip-3); }
.punch-head { display: flex; justify-content: space-between; font: 400 26px var(--loud); letter-spacing: .05em; border-bottom: 3px solid var(--ink); padding-bottom: 6px; }
.punch-head span { font: 700 12px var(--mono); align-self: center; }
.punch-status { margin: 12px 0; font: 400 42px/1 var(--loud); color: var(--ink-2); border: 4px solid currentColor; display: inline-block; padding: 6px 14px; transform: rotate(-3deg); }
.punch-status.on { color: var(--red); }
.punch-row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed rgba(27,31,59,.5); padding: 7px 0; font: 500 13px var(--mono); }
.punch-row b { text-align: right; font-family: var(--type); font-size: 16px; color: var(--blue); max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timesheet { margin-top: 26px; background: var(--paper); color: var(--ink); border: 4px solid #000; }
.ts-head { font: 400 22px var(--loud); letter-spacing: .05em; padding: 8px 14px; border-bottom: 3px solid var(--ink); background: var(--slip-2); }
.ts-head small { font: 700 11px var(--mono); }
.ts { max-height: 340px; overflow-y: auto; }
.ts-row { display: grid; grid-template-columns: 54px 26px 1fr; gap: 6px; padding: 8px 12px; border-bottom: 1px solid rgba(27,31,59,.15); font-size: 14px; line-height: 1.35;
  background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(215,38,61,.25) 54px 55px, transparent 55px); }
.ts-row time { font: 700 11px var(--mono); color: var(--ink-2); padding-top: 2px; }
.ts-row .tx { overflow-wrap: anywhere; }
.ts-row.task .tx { font-family: var(--type); color: var(--blue); }
.ts-row.hire { background-color: #FFF6C9; }
.ts-row a { color: var(--red); font: 700 11px var(--mono); }
.ts-empty, .wall-empty { padding: 26px; text-align: center; font-family: var(--type); color: var(--ink-2); }

/* payroll */
.payroll { background: var(--slip-2); }
.payslip { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; background: var(--paper); border: 5px solid var(--ink); box-shadow: 14px 14px 0 var(--ink); padding: clamp(20px,3vw,40px); max-width: 1100px; margin: 0 auto;
  background-image: linear-gradient(90deg, transparent calc(56.5% - 2px), var(--ink) calc(56.5% - 2px), var(--ink) calc(56.5% + 2px), transparent calc(56.5% + 2px)); }
.payslip h2 { margin: 0 0 12px; font: 400 clamp(52px,7vw,96px)/.9 var(--loud); }
.payslip-l p { font-size: 18px; max-width: 460px; }
.mine { display: inline-flex; flex-direction: column; border: 4px solid var(--red); color: var(--red); padding: 10px 18px; transform: rotate(-2deg); margin-top: 8px; }
.mine span { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.mine b { font: 400 34px/1.1 var(--loud); }
.burn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.mine b [data-burned] { font: inherit; letter-spacing: 0; text-transform: none; }
.mine.fire { color: var(--ink); border-color: var(--ink); background: var(--yellow); transform: rotate(1.5deg); }
.lbl { font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.stepper { display: flex; border: 4px solid var(--ink); }
.stepper button { width: 64px; background: var(--slip); border: 0; font: 400 34px var(--loud); }
.stepper input { flex: 1; min-width: 0; border: 0; border-inline: 4px solid var(--ink); text-align: center; font: 400 44px var(--loud); background: var(--paper); color: var(--ink); -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cost { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0; font: 700 13px var(--mono); border-bottom: 3px double var(--ink); padding-bottom: 10px; }
.cost b { font: 400 26px var(--loud); }

/* portfolio wall */
.portfolio { background: var(--manila); background-image: repeating-linear-gradient(45deg, rgba(27,31,59,.04) 0 2px, transparent 2px 14px); border-top: 6px solid var(--ink); }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 30px; }
.pola { background: var(--paper); border: 3px solid var(--ink); padding: 12px 12px 14px; box-shadow: 6px 6px 0 rgba(27,31,59,.5); position: relative; }
.pola:nth-child(odd) { transform: rotate(-2deg); } .pola:nth-child(even) { transform: rotate(1.6deg); }
.pola::before { content: ''; position: absolute; top: -14px; left: 34%; width: 90px; height: 26px; background: rgba(255,225,77,.75); border: 1px solid rgba(0,0,0,.15); transform: rotate(-4deg); }
.pola .media { aspect-ratio: 1; background: var(--crt); display: grid; place-items: center; overflow: hidden; border: 2px solid var(--ink); }
.pola .media img, .pola .media video { width: 100%; height: 100%; object-fit: cover; }
.pola .media audio { width: 92%; }
.pola .media a.link { color: var(--yellow); font: 400 26px var(--loud); text-decoration: none; padding: 14px; text-align: center; }
.pola p { margin: 10px 0 0; font-family: var(--type); color: var(--blue); font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pola time { font: 700 10px var(--mono); color: var(--ink-2); }

/* personnel file */
.file { background: var(--slip); }
.folder { max-width: 1100px; margin: 0 auto; background: var(--manila); border: 5px solid var(--ink); box-shadow: 14px 14px 0 var(--ink); padding: 0 clamp(16px,3vw,36px) 36px; position: relative; }
.folder .tab { display: inline-block; background: var(--manila); border: 5px solid var(--ink); border-bottom: 0; padding: 10px 18px; font: 700 13px var(--mono); letter-spacing: .1em; transform: translateY(-47px); margin-bottom: -30px; }
.memos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.memo { background: var(--paper); border: 3px solid var(--ink); padding: 16px; box-shadow: 5px 5px 0 rgba(27,31,59,.4); }
.memo:nth-child(even) { transform: rotate(1.4deg); } .memo:nth-child(odd) { transform: rotate(-1deg); }
.memo time { font: 700 11px var(--mono); color: var(--red); letter-spacing: .1em; }
.memo h3 { margin: 6px 0; font: 400 32px/1 var(--loud); text-transform: uppercase; }
.memo p { margin: 0; font-family: var(--type); font-size: 15px; line-height: 1.4; }
.memo.red { background: var(--slip-2); border-color: var(--red); }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.how div { display: flex; align-items: center; gap: 14px; border: 4px solid var(--red); color: var(--red); padding: 12px 16px; background: rgba(255,248,240,.6); }
.how b { font: 400 54px/1 var(--loud); }
.how span { font: 400 24px/1.05 var(--loud); text-transform: uppercase; }

footer.foot { display: flex; gap: 22px; align-items: center; padding: 34px clamp(16px,4vw,48px); background: var(--ink); color: var(--paper); flex-wrap: wrap; }
.foot img { width: 70px; }
.foot div { display: flex; flex-direction: column; gap: 2px; }
.foot b { font: 400 32px/1 var(--loud); letter-spacing: .04em; }
.foot small { color: var(--slip-3); font-size: 12px; }
.foot-r { margin-left: auto; flex-direction: row !important; gap: 14px !important; align-items: center; font: 700 13px var(--mono); text-transform: uppercase; }
.foot-r .ca { color: var(--ink); }

/* work order (modal) */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(27,31,59,.72); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal .box { width: min(620px, 100%); background: var(--slip-2); border: 5px solid var(--ink); box-shadow: 14px 14px 0 var(--red); padding: 24px; position: relative; max-height: calc(100vh - 32px); overflow-y: auto; }
.modal h3 { margin: 0 0 6px; font: 400 40px/1 var(--loud); text-transform: uppercase; }
.modal .hint { font: 500 13px var(--mono); color: var(--ink-2); }
.wo-head { display: flex; justify-content: space-between; font: 700 12px var(--mono); letter-spacing: .1em; border-bottom: 4px double var(--ink); padding: 0 34px 8px 0; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
.wo-head span:last-child { color: var(--red); }
.modal textarea { width: 100%; min-height: 130px; resize: vertical; border: 3px solid var(--ink); background: var(--paper); padding: 12px; font: 18px/1.4 var(--type); color: var(--blue);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(43,76,201,.18) 27px 28px); background-attachment: local; }
.attach { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.attach label { cursor: pointer; }
#pics { display: flex; gap: 8px; width: 100%; }
#pics:empty { display: none; }
#pics img { width: 64px; height: 64px; object-fit: cover; border: 3px solid var(--ink); background: var(--paper); transform: rotate(-3deg); }
.wo-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0; font: 700 13px var(--mono); flex-wrap: wrap; }
.wo-row .rate { background: var(--yellow); border: 2px solid var(--ink); padding: 4px 8px; }
.wo-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.wo-actions .btn { flex: 1; }
.x { position: absolute; top: 10px; right: 12px; background: none; border: 0; font: 400 30px var(--loud); }
.result { margin-top: 16px; background: var(--paper); border: 3px solid var(--ink); padding: 14px; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.result.wait { font-family: var(--type); color: var(--ink-2); }
.result img, .result video { margin-top: 10px; border: 2px solid var(--ink); width: 100%; }
.result audio { margin-top: 10px; width: 100%; }
.result .done { position: absolute; top: -18px; right: 10px; font: 400 22px var(--loud); color: var(--red); border: 4px solid var(--red); padding: 2px 10px; background: var(--paper); transform: rotate(6deg); }
.dots::after { content: '…'; animation: dots 1.2s steps(4) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } }
.wallet-list { display: grid; gap: 8px; margin-top: 12px; }
.wallet-list button, .wallet-list a { display: flex; justify-content: space-between; align-items: center; background: var(--paper); border: 3px solid var(--ink); padding: 12px 14px; font: 400 22px var(--loud); text-decoration: none; letter-spacing: .03em; }
.badge { font: 700 11px var(--mono); border: 2px solid var(--ink); padding: 2px 6px; background: var(--slip); }
.badge.ok { background: var(--yellow); }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%) rotate(-1deg); background: var(--paper); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 12px 18px; font: 700 14px var(--mono); max-width: calc(100% - 32px); }
.toast.good { background: var(--yellow); }
.toast.bad { background: var(--red); color: #fff; }

/* phones */
@media (max-width: 980px) {
  .hero, .desk-grid, .payslip { grid-template-columns: 1fr; }
  .payslip { background-image: none; }
  .memos { grid-template-columns: 1fr 1fr; }
  .top nav { display: none; }
}
@media (max-width: 600px) {
  .note { position: fixed; left: 12px !important; right: 12px !important; top: auto !important; bottom: 12px !important; width: auto; transform: none; }
  .room-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px 14px; scrollbar-width: none; }
  .room-scroll::-webkit-scrollbar { display: none; }
  .room-stage { width: 760px; box-shadow: 8px 8px 0 var(--red); border-width: 4px; }
  .room-swipe { display: block; }
  .memos, .how { grid-template-columns: 1fr; }
  .top { gap: 8px; }
  .logo span { font-size: 24px; }
  .ca { display: none; }
  .foot-r .ca { display: inline-block; }
  .slip dl { grid-template-columns: 92px 1fr; }
  .slip dd { font-size: 15px; }
  .stamp.s1 { font-size: 32px; }
  .stamp.s2 { font-size: 20px; padding: 4px 8px; }
  .btn.big { font-size: 22px; padding: 16px 20px; }
  .hero h1 .hl { text-shadow: 4px 4px 0 var(--ink); -webkit-text-stroke-width: 2px; }
}