/* drinkerlabs.info homepage: the lab after hours (2026-10-09).
   Colours are sampled from lab/room.png. Two faces only: Pixelify Sans + Atkinson Hyperlegible Next. */

@font-face{font-family:'Atkinson Hyperlegible Next';src:url('/fonts/atkinson-next-var.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Pixelify Sans';src:url('/fonts/pixelify-sans-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --ground:#161129;  /* below the floor */
  --wall:#201838;    /* the room's own brick, sampled from its edges */
  --ink:#ece6f5;
  --mute:#b6acd0;
  --faint:#a39bb5;
  --neon:#19e939;    /* the sign */
  --live:#7cf0a2;
  --lamp:#f2b45a;    /* the bench lamp: links and actions */
  --rule:rgba(182,172,208,.16);
  --body:'Atkinson Hyperlegible Next',system-ui,sans-serif;
  --pixel:'Pixelify Sans',var(--body);
  --rw:688; --rh:288; /* room size in art pixels */
  --s:1.5;           /* room scale: art px -> css px */
}

*{box-sizing:border-box}
html{background:var(--ground);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.6 var(--body)}
a{color:var(--lamp);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:#ffd9a0}
:focus-visible{outline:2px dashed var(--neon);outline-offset:3px}
img{max-width:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--ink);color:var(--ground);padding:8px 12px;font-weight:700}
.skip:focus{top:12px}

/* ---------- the room ---------- */
.band{background:var(--wall);position:relative}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;max-width:1400px;margin:0 auto;padding:12px 20px 6px}
.mark{font-family:var(--pixel);font-size:1.25rem;font-weight:500;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.top nav{display:flex;gap:1.25rem}
.top nav a{color:var(--mute);text-decoration:none;padding:10px 0;min-width:24px;text-align:center}
.top nav a:hover{color:var(--ink);text-decoration:underline}

.stage{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.stage::-webkit-scrollbar{display:none}
/* The cutaway: the room is cut out of the building, so its edges are wall sections, not a fade. */
.stage{background:linear-gradient(to top,#0b0816 calc(13px * var(--s)),transparent 0)}
.cut{width:max-content;margin:0 auto;padding:calc(8px * var(--s)) calc(10px * var(--s)) calc(14px * var(--s));
  background:url('/lab/frame.png?v=1') 0 0 / 100% 100% no-repeat;image-rendering:pixelated}
.room{position:relative;width:calc(var(--rw) * 1px * var(--s));height:calc(var(--rh) * 1px * var(--s))}
.scene{display:block;width:100%;height:100%;image-rendering:pixelated}
.px{position:absolute;left:calc(var(--x) * 1px * var(--s));top:calc(var(--y) * 1px * var(--s));
  width:calc(var(--w) * 1px * var(--s));height:calc(var(--h) * 1px * var(--s));image-rendering:pixelated}
img.px{display:block}

.sign-off,.sign-hum{opacity:0;pointer-events:none}
.js .sign-off{animation:switch-on 1.8s .6s steps(1,end) both}
@keyframes switch-on{0%{opacity:1}36%{opacity:0}41%{opacity:1}50%{opacity:0}55%{opacity:.75}60%{opacity:0}100%{opacity:0}}
.sign-hum.on{animation:hum .4s steps(1,end)}
@keyframes hum{0%{opacity:.6}25%{opacity:0}55%{opacity:.35}80%,100%{opacity:0}}

.screen{background:url('/lab/arcade.png?v=2') 0 0 / calc(39px * 8 * var(--s)) 100% no-repeat;animation:attract .96s steps(8) infinite}
@keyframes attract{to{background-position:calc(-39px * 8 * var(--s)) 0}}
.breath{animation:breathe 3.6s steps(1,end) infinite;pointer-events:none}
@keyframes breathe{0%{opacity:0}55%{opacity:1}}
.led{background:#1b1730;animation:blink var(--t,2.4s) var(--d,0s) steps(1,end) infinite}
@keyframes blink{0%{opacity:0}70%{opacity:1}85%{opacity:0}}

/* Objects: a torch-beam on hover, and a label only while you point at it. */
.spot{display:block;z-index:2;color:var(--ink);text-decoration:none;outline-offset:2px}
.spot::before{content:"";position:absolute;inset:-14%;background:radial-gradient(closest-side,rgba(255,238,204,.24),rgba(255,238,204,0));
  mix-blend-mode:screen;opacity:0;transition:opacity .18s;pointer-events:none}
.spot:hover::before,.spot:focus-visible::before,.spot.lit::before{opacity:1}
.tag{position:absolute;left:50%;top:0;transform:translate(-50%,calc(-100% - 6px));white-space:nowrap;
  font:500 14px/1 var(--pixel);letter-spacing:.02em;color:#fff;background:rgba(12,9,26,.88);
  border:1px solid var(--neon);padding:5px 8px 6px;pointer-events:none;opacity:0;transition:opacity .15s}
.spot:hover .tag,.spot:focus-visible .tag,.spot.lit .tag{opacity:1}
@media (hover:none){ .tag{display:none} }

.hint{margin:0;padding:10px 20px 0;text-align:center;font:500 13px/1.3 var(--pixel);color:var(--faint)}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.25rem;max-width:1400px;margin:0 auto;padding:6px 20px 14px}
.legend a{font:500 15px/1 var(--pixel);color:var(--mute);text-decoration:none;padding:12px 0;border-bottom:2px solid transparent}
.legend a:hover,.legend a:focus-visible{color:var(--ink);border-bottom-color:var(--neon)}

@media (max-width:1023px){
  .legend{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:4px 20px 12px}
  .legend::-webkit-scrollbar{display:none}
  .legend a{flex:0 0 auto}
}
@media (min-width:1024px){
  .stage{overflow:hidden;display:flex;justify-content:center}
  .cut{flex:0 0 auto;margin:0}
  .hint{display:none}
  .legend{gap:0 1.75rem;padding:14px 20px 22px}
}
@media (min-width:1300px){ :root{--s:2} }

/* ---------- the write-up ---------- */
.intro{max-width:44rem;margin:0 auto;padding:3.5rem 20px 2.5rem}
.intro p{margin:0;font-size:1.375rem;line-height:1.55;color:var(--ink)}
.intro p+p{margin-top:1.1rem;font-size:1.125rem;color:var(--mute)}

.station{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;max-width:1160px;margin:0 auto;padding:3.5rem 20px;border-top:1px solid var(--rule);scroll-margin-top:8px}
.view{--v:3;width:calc(var(--cw) * 1px * var(--v));max-width:100%;height:calc(var(--ch) * 1px * var(--v));
  background:url('/lab/room.png?v=3') calc(var(--cx) * -1px * var(--v)) calc(var(--cy) * -1px * var(--v)) / calc(var(--rw) * 1px * var(--v)) calc(var(--rh) * 1px * var(--v)) no-repeat;
  image-rendering:pixelated;box-shadow:0 0 0 1px rgba(236,230,245,.08)}
.station h2{font:600 2.25rem/1.1 var(--pixel);margin:0 0 .6rem;letter-spacing:.005em}
.lede{margin:0;font-size:1.25rem;line-height:1.5;color:var(--mute);max-width:38rem}
.prose{margin:1.1rem 0 0;max-width:38rem;color:var(--mute)}
.prose strong{color:var(--ink);font-weight:700}
.aside{margin:1.5rem 0 0;color:var(--mute);max-width:40rem}
.status{display:block;margin:.15rem 0 0;font-size:.9375rem;color:var(--faint)}
.status b{font-weight:700;color:var(--mute)}
.status b.on{color:var(--live)}

/* Arcade: a real screen from each game, at the game's own shape. */
.games{list-style:none;padding:0;margin:1.75rem 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem}
.game{display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:0 1.25rem;align-items:start}
.game img{display:block;grid-row:1 / 4;justify-self:center;background:#0b0816;box-shadow:0 0 0 1px rgba(236,230,245,.14),0 0 0 4px #0b0816,0 0 0 5px rgba(236,230,245,.1)}
.game img.wide{width:128px;height:72px}
.game img.tall{width:auto;height:120px}
.game h3{margin:0;font:700 1.1875rem/1.3 var(--body)}
.game h3 a{color:var(--ink);text-decoration:none}
.game h3 a:hover,.game h3 a:focus-visible{color:#fff;text-decoration:underline;text-decoration-color:var(--lamp)}
.game p{margin:.35rem 0 0;color:var(--mute)}


/* Workbench: a tight two-column inventory. */
.tools{margin:1.5rem 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.tools div{padding:.8rem 0;border-top:1px solid var(--rule)}
.tools dt{font-weight:700;color:var(--ink)}
.tools dt a{color:var(--ink);text-decoration-color:var(--lamp)}
.tools dt a:hover{color:#fff}
.tools dd{margin:.15rem 0 0;color:var(--mute)}
.tools dd small{font-size:.9375rem;color:var(--faint)}
.tools dd small::before{content:" "}

/* Desk: the ledger. */
.ledger{width:100%;margin:1.5rem 0 0;border-collapse:collapse;font-variant-numeric:tabular-nums;table-layout:fixed}
.ledger col.c1{width:26%} .ledger col.c2{width:30%}
.ledger th,.ledger td{text-align:left;vertical-align:top;padding:.75rem 1rem .75rem 0;border-top:1px solid var(--rule)}
.ledger thead th{font-size:.9375rem;font-weight:400;color:var(--faint);border-top:0;padding-top:0}
.ledger tbody th{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.ledger td{color:var(--mute)}
.ledger td:last-child{color:var(--ink)}
@media (max-width:620px){
  .ledger,.ledger tbody,.ledger tr,.ledger th,.ledger td{display:block}
  .ledger tbody tr{padding:.75rem 0;border-top:1px solid var(--rule)}
  .ledger th,.ledger td{border:0;padding:.1rem 0}
  .ledger thead{display:none}
}

.door .email{display:inline-block;margin:1.5rem 0 .5rem;font:600 clamp(1.4rem,4.6vw,2.25rem)/1.2 var(--pixel);overflow-wrap:anywhere}
.door .more{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:.5rem 0 0;padding:0;list-style:none}
.door .more a{display:inline-block;padding:10px 0}

.foot{max-width:1280px;margin:0 auto;padding:2.5rem 20px 3rem;border-top:1px solid var(--rule);color:var(--faint);font-size:.9375rem}
.foot p{margin:0 0 .4rem;max-width:44rem}



/* The walk: on wide screens a sticky camera pans around the room to whatever you are reading about. */
.walk{max-width:1280px;margin:0 auto}
.cam{display:none}
@media (min-width:900px){
  .station{grid-template-columns:auto minmax(0,1fr);gap:3rem;align-items:start}
  .view{position:sticky;top:2rem}
  .js .walk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,4rem);padding:0 20px;align-items:start}
  .js .walk .station{display:block;padding:3.5rem 0;max-width:none}
  .js .walk .station:first-child{border-top:0}
  .js .walk .view{display:none}
  .js .walk .intro p{font-size:1.5rem}
  .js .cam{display:block;position:sticky;top:max(1.5rem,calc(50vh - 230px));height:460px;margin:3.5rem 0;overflow:hidden;background:var(--wall);
    box-shadow:0 0 0 1px rgba(236,230,245,.08),0 30px 60px -30px rgba(0,0,0,.8)}
  .cam__shot{position:absolute;left:0;top:0}
  .cam__shot .room{--s:3;transform:translate(var(--tx,0px),var(--ty,0px));transition:transform .9s cubic-bezier(.65,0,.35,1)}
}
@media (min-width:900px) and (prefers-reduced-motion:reduce){ .cam__shot .room{transition:none} }

@media (prefers-reduced-motion:reduce){
  .js .sign-off,.sign-hum.on,.screen,.breath,.led{animation:none}
  .breath,.led{opacity:0}
  .spot::before,.tag{transition:none}
}
@media (max-width:520px){
  .game{grid-template-columns:72px minmax(0,1fr);gap:0 .9rem}
  .game img.wide{width:72px;height:41px}
  .game img.tall{height:96px}
}

/* Pixelify's fi/fl ligatures read as other letters. The font shorthand resets font-variant-ligatures,
   so this rule comes last and names every Pixelify selector. */
.mark,.tag,.hint,.legend a,.station h2,.door .email{font-variant-ligatures:no-common-ligatures}