/* ===========================================================
   MS-DOS mode. "Best viewed in MS-DOS" — their own fault.

   Everything is scoped under html.dos, which dos.js sets (and keeps for the
   session, so team/careers stay in text mode too). Nothing here applies to
   the normal site. Palette: the 16 CGA/EGA colours, nothing else.
   Look: Turbo Vision / Norton, in the company's greys — a ░ desktop, black and
   grey windows with double rules and a black drop shadow, a menu bar and an
   F-key status line. Blue only where the normal site has its one cool panel,
   and on the way out.
   =========================================================== */
:root {
  --dos-black: #000000;  --dos-blue: #0000aa;   --dos-green: #00aa00;  --dos-cyan: #00aaaa;
  --dos-red: #aa0000;    --dos-magenta: #aa00aa; --dos-brown: #aa5500; --dos-grey: #aaaaaa;
  --dos-dark: #555555;   --dos-lblue: #5555ff;  --dos-lgreen: #55ff55; --dos-lcyan: #55ffff;
  --dos-lred: #ff5555;   --dos-yellow: #ffff55; --dos-white: #ffffff;
  --dos-font: "IBM VGA 8x16", "Lucida Console", ui-monospace, monospace;
}
/* The IBM VGA ROM font, 8x16 — from VileR's Ultimate Oldschool PC Font Pack
   (int10h.org, CC BY-SA 4.0, assets/fonts/OLDSCHOOL-PC-FONTS-LICENSE.txt).
   Its pixels are whole only at multiples of 16px, so every size in text mode
   is 16, 32 or 48px and nothing else. */
@font-face {
  font-family: "IBM VGA 8x16";
  src: url("/assets/fonts/Web437_IBM_VGA_8x16.woff") format("woff");
  font-display: swap;
}

/* ---- the badge (normal site) ----------------------------- */
.dos-badge {
  position: absolute;
  right: 3.5%;
  bottom: 6%;
  z-index: 2;
  display: block;
  line-height: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--dos-black);
}
.dos-badge img {
  width: 256px;              /* 128x36 at exactly 2x: the BIOS and VGA fonts at whole pixels */
  height: auto;
  image-rendering: pixelated;
}
.dos-badge:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--dos-black); }
@media (max-width: 560px) { .dos-badge img { width: 128px; } .dos-badge { box-shadow: 2px 2px 0 var(--dos-black); } }

.dos-exit, .dos-only { display: none; }

/* ---- text mode ------------------------------------------- */
html.dos { background: var(--dos-dark); }
html.dos body.site {
  --ink: var(--dos-grey);
  --stroke: var(--dos-white);
  --text-muted: var(--dos-grey);
  --link: var(--dos-lcyan);
  --accent-hover: var(--dos-yellow);
  --font-body: var(--dos-font);
  --font-hand: var(--dos-font);
  --shadow: 1.2rem 1.2rem 0 var(--dos-black);
  --shadow-sm: .6rem .6rem 0 var(--dos-black);
  color: var(--dos-grey);
  font-family: var(--dos-font);
  font-size: 16px;
  line-height: 1.25;
  /* the Turbo Vision desktop: a ░ fill, in grey */
  background-color: var(--dos-dark);
  background-image:
    radial-gradient(var(--dos-grey) 1px, transparent 1.4px),
    radial-gradient(var(--dos-grey) 1px, transparent 1.4px);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
  padding-top: 2rem;          /* under the menu bar */
  padding-bottom: 2.4rem;     /* over the status line */
}
html.dos body.site * { border-radius: 0 !important; text-shadow: none !important; font-weight: 400 !important; font-synthesis: none; }
html.dos .site ::selection { background: var(--dos-white); color: var(--dos-black); }

/* menu bar and status line */
html.dos body.site::before,
html.dos body.site::after {
  position: fixed;
  left: 0; right: 0;
  z-index: 50;
  padding: .1rem max(1rem, env(safe-area-inset-left, 0px));
  background: var(--dos-grey);
  color: var(--dos-black);
  font-family: var(--dos-font);
  font-size: 16px;
  white-space: pre;
  overflow: hidden;
}
html.dos body.site::before {
  content: "  File  Edit  Search  View  Options  Help                 EXCLAIM.EXE";
  top: 0;
}
html.dos body.site::after {
  content: " F1 Help   F2 Save   F5 Run robot   F10 Menu   ESC Back to 2026";
  bottom: 0;
  padding-bottom: calc(.1rem + env(safe-area-inset-bottom, 0px));
}

/* windows */
html.dos .site .panel,
html.dos .site .figure,
html.dos .site .jobs-box {
  background: var(--dos-black) !important;
  background-image: none !important;
  border: 4px double var(--dos-grey);
  box-shadow: var(--shadow);
  color: var(--dos-grey);
}
/* a few windows in the other dialog colours, so the page isn't one black slab */
html.dos .site .panel--alt   { background: var(--dos-grey) !important; border-color: var(--dos-black); color: var(--dos-black); }
html.dos .site .panel--alt .point p,
html.dos .site .panel--alt .point-h { color: var(--dos-black); }
html.dos .site .panel--alt h2 { color: var(--dos-black) !important; }
html.dos .site .panel--blue  { background: var(--dos-blue) !important; border-color: var(--dos-white); color: var(--dos-white); }
html.dos .site .panel--accent { background: var(--dos-grey) !important; border-color: var(--dos-black); color: var(--dos-black); }
html.dos .site .panel--plate { background: var(--dos-grey) !important; border-color: var(--dos-black); color: var(--dos-black); }
html.dos .site .panel--plate h2, html.dos .site .panel--plate p { color: var(--dos-black) !important; }
html.dos .site .panel--accent p { color: var(--dos-black); }

html.dos .site h1, html.dos .site h2, html.dos .site h3,
html.dos .site .display, html.dos .site .point-h {
  font-family: var(--dos-font) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--dos-white);
}
html.dos .site .panel--hero h1::after {
  content: "_";
  animation: dos-blink 1.06s steps(1) infinite;
}
@keyframes dos-blink { 50% { opacity: 0; } }
html.dos .site .h-lg, html.dos .site .panel--hero .display { font-size: 48px; line-height: 1.17; }
html.dos .site .h-md { font-size: 48px; }
html.dos .site .h-sm, html.dos .site .h-xs { font-size: 32px; }
html.dos .site .hero-tag, html.dos .site .hand, html.dos .site .standfirst { color: var(--dos-white); }
html.dos .site .panel--blue .hand { color: var(--dos-white); }
html.dos .site p, html.dos .site .point p, html.dos .site li { font-size: 16px; }
html.dos .site .standfirst, html.dos .site .hand, html.dos .site .lead { font-size: 32px !important; line-height: 1.25 !important; }
html.dos .site .hero-tag { font-size: 32px; }
html.dos .site .figure-cap { font-size: 32px; line-height: 1.25; }

html.dos .site a { color: var(--dos-white); }
html.dos .site a:hover { color: var(--dos-black); background: var(--dos-grey); }
html.dos .site mark { background: var(--dos-grey); color: var(--dos-black); padding: 0 .2em; }
html.dos .site em { font-style: normal; color: var(--dos-white); }

/* buttons: the green Turbo Vision button with its black shadow */
html.dos .site .btn {
  background: var(--dos-white) !important;
  color: var(--dos-black) !important;
  border: 0 !important;
  box-shadow: .5rem .5rem 0 var(--dos-black) !important;
  font-family: var(--dos-font) !important;
  font-size: 16px;
}
html.dos .site .btn::before { content: "[ "; }
html.dos .site .btn::after  { content: " ]"; }
html.dos .site .btn:hover { background: var(--dos-grey) !important; }
html.dos .site .btn .ico { display: none; }

html.dos .site .sitenav { font-family: var(--dos-font); font-size: 16px; }
html.dos .site .sitenav a { color: var(--dos-white); }
html.dos .site .sitenav a::before { background: var(--dos-white); }

/* pictures: monochrome, pixels left square */
html.dos .site .figure video,
html.dos .site .figure img { image-rendering: pixelated; filter: grayscale(1) contrast(1.1); }
html.dos .site .figure-cap {
  background: var(--dos-grey);
  color: var(--dos-black);
  border: 4px double var(--dos-black);
  box-shadow: .8rem .8rem 0 var(--dos-black);
  font-family: var(--dos-font);
}
html.dos .site .figure-cap h2 { color: var(--dos-black); }
html.dos .site .wordmark-img,
html.dos .site .topbar .brand img { filter: invert(1); }
html.dos .site .backers img { filter: grayscale(1) brightness(0) invert(1); }
html.dos .site .backers-label, html.dos .site .foot, html.dos .site .foot-link { color: var(--dos-white); }
html.dos .site .team img, html.dos .site .person img { filter: grayscale(1) contrast(1.2); image-rendering: pixelated; }
html.dos .site .dos-badge { display: none; }

/* the way out: big, bottom right, on the viewport, not the page */
html.dos .dos-exit {
  display: block;
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: calc(3.2rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  padding: .55rem 1.3rem .45rem;
  border: 0;
  background: var(--dos-blue);
  color: var(--dos-white);
  font-family: var(--dos-font);
  font-size: 32px;
  line-height: 1;
  box-shadow: .7rem .7rem 0 var(--dos-black);
  cursor: pointer;
}
html.dos .dos-exit:hover { background: var(--dos-lblue); }
html.dos .dos-exit:active { transform: translate(.35rem, .35rem); box-shadow: .35rem .35rem 0 var(--dos-black); }
html.dos .dos-exit kbd { font: inherit; color: var(--dos-grey); }
html.dos .dos-exit:hover kbd { color: var(--dos-white); }

@media (prefers-reduced-motion: reduce) {
  html.dos .site .panel--hero h1::after { animation: none; }
}

/* phones: shadows that fit the gutter, a smaller way out */
@media (max-width: 560px) {
  html.dos body.site { --shadow: .6rem .6rem 0 var(--dos-black); }
  html.dos .site .h-lg, html.dos .site .panel--hero .display, html.dos .site .h-md { font-size: 32px; }
  html.dos .site .standfirst, html.dos .site .hand, html.dos .site .lead, html.dos .site .hero-tag, html.dos .site .figure-cap { font-size: 16px !important; }
  html.dos body.site::before { content: " File  Edit  View  Help      EXCLAIM.EXE"; }
  html.dos body.site::after  { content: " F1 Help  F5 Run robot  ESC Back to 2026"; }
  html.dos .dos-exit { font-size: 16px; padding: .6rem 1rem; bottom: calc(2.6rem + env(safe-area-inset-bottom, 0px)); box-shadow: .4rem .4rem 0 var(--dos-black); }
}

/* every other picture (team photos, …): CGA-era monochrome */
html.dos .site main img:not(.wordmark-img):not([data-dos-src]) { filter: grayscale(1) contrast(1.35) brightness(1.05); }
html.dos .site .backers img { filter: grayscale(1) brightness(0) invert(1); }
/* links on the cyan window */
html.dos .site .panel--blue a { color: var(--dos-white); }
/* on the grey windows: black links, black marks inverted */
html.dos .site :is(.panel--alt, .panel--accent, .panel--plate) a { color: var(--dos-black); }
html.dos .site :is(.panel--alt, .panel--accent, .panel--plate) mark { background: var(--dos-black); color: var(--dos-grey); }
html.dos .site :is(.panel--alt, .panel--accent, .panel--plate) .btn { background: var(--dos-black) !important; color: var(--dos-white) !important; box-shadow: .5rem .5rem 0 var(--dos-dark) !important; }
html.dos .site :is(.panel--alt, .panel--accent, .panel--plate) em { color: var(--dos-black); text-decoration: underline; }
html.dos .site main .backers img { filter: grayscale(1) brightness(0) invert(1); }
/* room under the footer for the way out */
html.dos .site .page { padding-bottom: 7rem; }

/* team cards: windows like the rest, pixel portraits (dos.js swaps them in) */
html.dos .site .person-card {
  background: var(--dos-black);
  border: 4px double var(--dos-grey);
  box-shadow: var(--shadow);
  color: var(--dos-grey);
}
html.dos .site .person-card > img {
  filter: none;
  image-rendering: pixelated;
  border-bottom: 4px double var(--dos-grey);
}
html.dos .site .person-name { color: var(--dos-white); font-size: 16px; }
html.dos .site .person-role { color: var(--dos-white); font-size: 16px; }
html.dos .site .person-bio  { color: var(--dos-grey); font-size: 16px; }
html.dos .site .person-links { font-size: 16px; gap: 1ch; }
html.dos .site .person-links a,
html.dos .site .geo {
  background-image: none;
  padding-bottom: 0;
  color: var(--dos-white);
  text-decoration: underline;
}
html.dos .site .person-links a::before { content: "["; }
html.dos .site .person-links a::after  { content: "]"; }
html.dos .site .person-links a:hover { background: var(--dos-grey); color: var(--dos-black); }
html.dos .site .person-card.is-stealth h2 { color: var(--dos-dark); }

/* the backers' logos: nearest-neighboured down to a third (dos.js swaps them in), back up at exactly 3x */
html.dos .site main .backers img[data-dos-src] { filter: none; image-rendering: pixelated; height: auto; }
html.dos .site .backers .l-founderful { width: 117px; }
html.dos .site .backers .l-playfair { width: 123px; }