:root { color-scheme: light; background: #fff; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #fff; }
.stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
.letter { position: absolute; will-change: transform; mix-blend-mode: multiply; user-select: none; }
.letter img { display: block; width: 100%; height: 100%; pointer-events: none; }
.dock { position: fixed; z-index: 10; top: clamp(8px, .78125vw, 15px); left: 0; width: 100%; height: 3.7535vw; min-height: 32px; }
.dock-art { display: block; width: 100%; height: auto; pointer-events: none; }
.dock nav { position: absolute; inset: 0; }
.dock a, .dock .about { position: absolute; top: 0; height: 85%; display: block; border-radius: 1px; }
.dock a:focus-visible { outline: 2px solid #b2b2b2; outline-offset: 4px; }
.brand { left: 1.85%; width: 17%; }
.index { left: 77.8%; width: 8%; }
.about { left: 87.7%; width: 9.1%; }
/* Dot cursor (cursor.js) on every page; difference blend keeps it black on light areas and white over black. */
.cursor-dot { display: none; }
@media (pointer: fine) {
  html:has(.cursor-dot), html:has(.cursor-dot) * { cursor: none !important; }
  .cursor-dot { display: block; position: fixed; z-index: 2147483647; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: width .15s, height .15s, margin .15s, opacity .15s; }
  .cursor-dot.visible { opacity: 1; }
  .cursor-dot.over-link { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  /* Over a Works info card that opens a project page: small italic "more info", centred on the pointer. */
  .cursor-label { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font: italic 700 13px/1 Arial, Helvetica, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
  .cursor-dot.is-label { width: 0; height: 0; margin: 0; background: none; }
  .cursor-dot.is-label .cursor-label { display: block; }
}
@media (max-width: 600px) {
  .dock { top: 10px; height: 40px; border-bottom: 1px solid #b2b2b2; }
  .dock-art { visibility: hidden; }
  .dock a, .dock .about { height: 30px; color: #b2b2b2; text-decoration: none; font-size: 18px; letter-spacing: -1px; }
  .brand { left: 12px; width: 145px; }
  .brand::before { content: 'BAD STUDIO'; }
  .index { left: auto; right: 86px; width: 56px; }
  .index::before { content: 'INDEX'; }
  .about { left: auto; right: 12px; width: 62px; }
  .about::before { content: 'ABOUT'; }
}