/* The studio's two typefaces, the same files the games ship (licences in fonts/). */
@font-face { font-family: 'VT323'; src: url('fonts/vt323-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Share Tech Mono'; src: url('fonts/share-tech-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  /* the terminal palette from the games: black, phosphor green, its dim and soft shades */
  --bg: #000000;
  --text: #7DFF9F;   /* (4 Nov) the games' text: the phosphor itself, not an off-white */
  --hi: #B8FFC9;     /* the games' brighter phosphor, for the current page and hovers */
  --muted: #8FE3A4;
  --line: #1F3324;
  --green: #7DFF9F;
  --soft: #8FE3A4;
  --dim: #2E6B40;
  --display: 'VT323', 'Courier New', monospace;
  --mono: 'Share Tech Mono', 'Courier New', monospace;
  --glow: 0 0 2px rgba(190,255,205,.55), 0 0 10px rgba(125,255,159,.35), 0 0 26px rgba(70,242,122,.2);
  /* one unit that shrinks with whichever of width or height is tighter, so everything fits */
  --u: min(var(--fvw, 1vw), calc(1.7 * var(--fvh, 1vh)));
  --uiz: 1;   /* the UI scale from fit.js, as in Intel: 1 up to 1280x800, up to 2.5 on 4K */
  --pad-x: 16px;   /* the tube's side margin, as the terminal's .crt */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
/* The whole page is one screen: no scrolling at any window size. */
body {
  margin: 0; background: var(--bg); color: var(--text); text-shadow: 0 0 6px rgba(70,242,122,.55);
  font-family: var(--mono); letter-spacing: .015em;
  height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;   /* the frame, centred; black bars round it */
}
/* (David, 4 Nov) scaled as the games are: the site is one frame laid out for 1280x800, zoomed to fill the screen
   (up to 2.5x, never shrunk), and on screens wider than 16:9 it keeps a 16:9 frame, centred, plain black either side */
.site { container: site / size; zoom: var(--uiz, 1); height: var(--crth, 100%); width: var(--crtw, 100%); flex: none; position: relative;
  display: flex; flex-direction: column; overflow: hidden; }
a { color: inherit; text-decoration: none; }

/* the classification banner across the top, as in the games */
.classif { flex: none; margin: 12px var(--pad-x) 0; background: var(--green); color: #000; text-align: center; text-shadow: none;
  font: 400 20px/1.2 var(--display); letter-spacing: .3em; white-space: nowrap; overflow: hidden; }

/* header */
.site-header {
  flex: none; height: clamp(44px, calc(10 * var(--fvh, 1vh)), 104px); padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line);
}
.brand { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(8px, calc(1.4 * var(--fvw, 1vw)), 20px); min-width: 0;
  /* (David, 4 Nov) a black box with a green border inside the header, below the banner, not over it */
  padding: clamp(4px, calc(.9 * var(--fvh, 1vh)), 9px) clamp(8px, calc(1.1 * var(--fvw, 1vw)), 14px);
  background: #000; border: 1px solid var(--green); box-shadow: 0 0 8px rgba(125,255,159,.25); }
.brand-mark { height: calc(clamp(44px, calc(10 * var(--fvh, 1vh)), 104px) * .42); width: auto; display: block; }
.brand-name { height: calc(clamp(44px, calc(10 * var(--fvh, 1vh)), 104px) * .30); width: auto; display: block; min-width: 0; }
.brand-mark, .brand-name, .footer-mark, .footer-name { filter: drop-shadow(0 0 1px rgba(190,255,205,.5)) drop-shadow(0 0 7px rgba(125,255,159,.28)); }
.main-nav { display: flex; align-items: center; gap: clamp(8px, calc(1.6 * var(--fvw, 1vw)), 18px); margin-left: auto; }
.site-footer a:hover { color: var(--hi); text-shadow: var(--glow); }

/* the logo as it shows on the games' screens: in phosphor green (images/brand/*-phosphor.png), with the tube's scanlines over it */
.brand::after, .footer-brand::after { content: ""; position: absolute; inset: 18% -6px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.42) 0 1px, transparent 1px 3px); }

/* the games' CLICK FOR SOUND button */
.sound-btn { color: var(--muted); border: 1px solid var(--dim); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: clamp(26px, calc(var(--u) * 2.4), 32px); height: clamp(22px, calc(var(--u) * 2), 27px); padding: 0; }
.sound-btn .spk { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: miter; }
.sound-btn .spk .box { fill: currentColor; stroke: none; }
.sound-btn .spk .wave { display: none; }
.sound-btn[aria-pressed="true"] .spk .wave { display: inline; }
.sound-btn[aria-pressed="true"] .spk .mute { display: none; }
.sound-btn:hover, .sound-btn:focus-visible { color: #000; background: var(--green); border-color: var(--green); outline: none; }
.sound-btn[aria-pressed="true"] { color: var(--green); border-color: var(--green); }
.sound-btn[aria-pressed="true"]:hover { color: #000; }

main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* the photo and the tagline */
.hero { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; display: block; filter: saturate(.72) contrast(1.08); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 15%, rgba(0,0,0,.2) 50%, var(--bg) 100%); }
.hero-copy { position: absolute; left: 5%; right: 5%; bottom: 6%; text-align: center; }
.hero-copy h1 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: .12em; font-size: clamp(24px, calc(var(--u) * 6.5), 84px); line-height: 1; color: var(--green); text-shadow: var(--glow), 0 2px 15px #000; }

/* the games */
.games-section {
  flex: 1.8 1 0; min-height: 0; width: 100%; max-width: 1320px; margin: 0 auto;
  padding: clamp(6px, calc(2.4 * var(--fvh, 1vh)), 32px) var(--pad-x) clamp(4px, calc(1.2 * var(--fvh, 1vh)), 16px);
  display: flex; flex-direction: column;
}
.section-heading { flex: none; display: flex; align-items: center; gap: clamp(10px, calc(2.4 * var(--fvw, 1vw)), 30px); margin-bottom: clamp(6px, calc(2 * var(--fvh, 1vh)), 24px); }
.section-heading span { height: 1px; background: var(--line); flex: 1; }
.section-heading h2 { margin: 0; font: 400 clamp(16px, calc(var(--u) * 2.4), 32px) var(--display); letter-spacing: .34em; white-space: nowrap; }
/* 1991 TRILOGY (David, 4 Nov; was OUR GAMES) sits in the top edge of a box that closes below the photos */
.games-box { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 2px solid var(--line);
  margin-top: clamp(8px, calc(var(--u) * 1.2), 16px); padding: 0 clamp(8px, calc(2 * var(--fvw, 1vw)), 28px) clamp(6px, calc(1.6 * var(--fvh, 1vh)), 20px); }
.games-box .section-heading { justify-content: center; margin-bottom: 0; }
.games-box .section-heading h2 { line-height: 1; padding: 0 .8em; background: var(--bg); transform: translateY(-50%); }
.game-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto auto; column-gap: clamp(8px, calc(2 * var(--fvw, 1vw)), 28px); }
/* the cards share the grid's rows, so the photos line up even when a title wraps */
.game-card { text-align: center; min-width: 0; min-height: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; }
/* the square photo is as large as its cell allows in both directions */
.frame-cell { width: 100%; height: 100%; min-height: 0; container-type: size; display: flex; align-items: flex-end; justify-content: center; }
.image-frame { position: relative; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); border: 1px solid var(--dim); overflow: hidden; background: #000; transition: border-color .15s ease, box-shadow .15s ease; }
/* hovering a game lights its box with the same phosphor glow as the text */
.game-card:hover .image-frame, .game-card:focus-within .image-frame { border-color: var(--green); box-shadow: 0 0 2px rgba(190,255,205,.55), 0 0 10px rgba(125,255,159,.35), 0 0 26px rgba(70,242,122,.2); }
.game-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; cursor: pointer; }
 .card-link { display: block; align-self: start; }
.game-card:hover h3, .card-link:focus-visible h3 { color: var(--hi); text-shadow: var(--glow); }
.game-card h3 { margin: clamp(4px, calc(1.4 * var(--fvh, 1vh)), 15px) 0 2px; font: 400 clamp(13px, calc(var(--u) * 2.4), 34px)/1.05 var(--display); letter-spacing: .06em; white-space: nowrap; }
.game-card p { color: var(--muted); margin: 0; font-size: clamp(9px, calc(var(--u) * 1.05), 15px); white-space: nowrap; }
.dots { display: flex; justify-content: center; gap: 12px; padding-top: clamp(3px, calc(1.2 * var(--fvh, 1vh)), 14px); }

/* the inner pages (games, about, contact): one panel, centred, same one-screen fit */
.page { justify-content: center; align-items: center; padding: clamp(8px, calc(3 * var(--fvh, 1vh)), 40px) var(--pad-x); }
.page-panel { width: 100%; max-width: 900px; max-height: 100%; overflow: hidden; text-align: center; font-size: clamp(11px, calc(var(--u) * 1.25), 17px); line-height: 1.5; }
.page-panel .section-heading h1 { margin: 0; font: 400 clamp(18px, calc(var(--u) * 2.8), 38px) var(--display); letter-spacing: .34em; white-space: nowrap; }
.page-panel p { margin: 0 0 .9em; }
.page-panel .lead { font: 400 clamp(20px, calc(var(--u) * 3.4), 48px)/1.1 var(--display); letter-spacing: .1em; color: var(--green); text-shadow: var(--glow); margin-bottom: .6em; }
.page-panel .kicker, .page-panel .status { color: var(--muted); letter-spacing: .28em; font-size: .78em; }
.page-panel .placeholder { color: var(--dim); letter-spacing: .3em; font-size: .75em; margin-top: 1.6em; }
.email:hover { color: var(--hi); }

/* the logo on hover: the same glow as the text, after a short VHS tracking glitch */
.brand:hover .brand-mark, .brand:hover .brand-name, .brand:focus-visible .brand-mark, .brand:focus-visible .brand-name,
.footer-brand:hover .footer-mark, .footer-brand:hover .footer-name, .footer-brand:focus-visible .footer-mark, .footer-brand:focus-visible .footer-name {
  filter: drop-shadow(0 0 2px rgba(190,255,205,.9)) drop-shadow(0 0 9px rgba(125,255,159,.75)) drop-shadow(0 0 22px rgba(70,242,122,.45));
  animation: vhs-glitch .55s steps(1, end) 1;
}
@keyframes vhs-glitch {
  0%   { transform: translate(0, 0);       clip-path: inset(0 0 0 0);       filter: drop-shadow(2px 0 0 rgba(255,40,80,.75)) drop-shadow(-2px 0 0 rgba(40,220,255,.7)); }
  12%  { transform: translate(-3px, 0) skewX(-4deg); clip-path: inset(10% 0 55% 0); }
  24%  { transform: translate(4px, 1px);   clip-path: inset(48% 0 12% 0);   filter: drop-shadow(-3px 0 0 rgba(255,40,80,.7)) drop-shadow(3px 0 0 rgba(40,220,255,.65)); }
  36%  { transform: translate(-1px, 0);    clip-path: inset(0 0 0 0);       opacity: .7; }
  48%  { transform: translate(2px, -1px) skewX(3deg); clip-path: inset(70% 0 4% 0); opacity: 1; }
  60%  { transform: translate(0, 0);       clip-path: inset(0 0 0 0);       filter: drop-shadow(1px 0 0 rgba(255,40,80,.5)) drop-shadow(-1px 0 0 rgba(40,220,255,.45)) drop-shadow(0 0 9px rgba(125,255,159,.6)); }
  80%  { transform: translate(-1px, 0); }
  100% { transform: none; clip-path: none; }
}
.game-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, calc(2 * var(--fvh, 1vh)), 22px); text-align: left; }
.game-list a { display: block; border: 1px solid var(--dim); padding: clamp(6px, calc(1.6 * var(--fvh, 1vh)), 18px) clamp(10px, calc(2 * var(--fvw, 1vw)), 24px); transition: border-color .15s ease, box-shadow .15s ease; }
.game-list a:hover, .game-list a:focus-visible { border-color: var(--green); box-shadow: var(--glow); outline: none; }
.game-list a:hover h2 { color: var(--hi); text-shadow: var(--glow); }
.game-list h2 { margin: 0; font: 400 clamp(16px, calc(var(--u) * 2.4), 32px)/1 var(--display); letter-spacing: .06em; }
.game-list p { margin: .2em 0 0; }
.game-list .genre { color: var(--muted); font-size: .85em; }
.game-list .status { margin-top: .4em; }

/* footer */
.site-footer { flex: none; padding: 6px var(--pad-x) 12px; align-items: center; gap: 16px; }
/* (David, 4 Nov) two boxes alike: the menu on the left (GAMES, ABOUT, CONTACT in their shade, PRIVACY dimmer) and the
   links on the right, same size and font */
.social-links { display: flex; align-items: center; gap: calc(10px * var(--uiz, 1)); }
.social-links a { font: 400 15px var(--display); letter-spacing: .12em; white-space: nowrap; }
.social-links a { color: var(--muted); }

.footer-end { display: flex; align-items: center; gap: clamp(10px, calc(1.6 * var(--fvw, 1vw)), 18px); }
.foot-menu .footer-legal { color: var(--dim); }
.foot-menu .footer-legal[aria-current] { color: var(--hi); }

/* privacy page: a short list of what is kept and what is sent */
.privacy .lead { font-size: clamp(16px, calc(var(--u) * 2.6), 38px); }
.privacy-list { display: grid; grid-template-columns: max-content 1fr; gap: .45em 1.6em; max-width: 780px; margin: 0 auto 1em; text-align: left; font-size: .92em; }
.privacy-list dt { font: 400 1.3em/1.15 var(--display); letter-spacing: .12em; color: var(--soft); }
.privacy-list dd { margin: 0; }
.privacy-list .email { color: var(--green); }
@container site (max-width: 640px) { .privacy-list { grid-template-columns: 1fr; gap: 0; } .privacy-list dd { margin-bottom: .55em; } }
@container site (max-height: 620px) or (max-width: 420px) { .privacy .drop { display: none; } }
.page-panel .drop { font-size: .85em; color: var(--muted); }
@container site (max-height: 480px) or (max-width: 380px) {
  .privacy .lead { font-size: clamp(14px, calc(var(--u) * 2.2), 24px); margin-bottom: .4em; }
  .privacy-list { font-size: .86em; line-height: 1.32; gap: .25em 1.2em; margin-bottom: 0; }
  .privacy-list dt { font-size: 1.15em; }
  .privacy .more { display: none; }
}


/* narrow windows: drop what repeats (the footer's nav) before anything shrinks too far */
@container site (max-width: 760px) {
  }
@container site (max-width: 480px) {
  .brand-name { display: none; }
  .game-card h3, .game-card p { white-space: normal; }
}
/* tall windows: the games row only needs about a third of the height; the photo takes the rest */
@container site (orientation: portrait) {
  .hero { flex-grow: 1.4; }
  .games-section { flex-grow: 1; }
}
/* the games page in short windows: the one-line descriptions go first, then the extras */
@container site (max-height: 760px) { .game-list .blurb { display: none; } }
@container site (max-height: 480px) { .page-panel .kicker, .page-panel .placeholder { display: none; } .game-list .status { display: none; } }

/* short windows */
@container site (max-height: 400px) {
  .section-heading { display: none; }
  .dots { padding-top: 2px; }
}

/* inside the logo's box the scanlines stay within its border */
.brand::after { inset: 3px 1px; }
/* privacy page, phones on their side: the headline repeats SENT ANYWHERE, so it goes first */
@container site (max-height: 360px) { .privacy .lead { display: none; } .privacy-list { line-height: 1.22; gap: .1em 1.1em; font-size: .84em; } }
/* the games page holds the most text: on big screens (scaled up by fit.js) its type follows the window's height a little
   more closely, so the three blurbs still fit */
.page-panel:has(.game-list) { font-size: clamp(11px, min(calc(var(--u) * 1.25), calc(1.85 * var(--fvh, 1vh))), 17px); }
.page-panel:has(.game-list) .game-list h2 { font-size: clamp(16px, min(calc(var(--u) * 2.4), calc(3.5 * var(--fvh, 1vh))), 32px); }

/* the home page footer keeps the terminal's POWER, A: DRIVE and BIOS, styled like the terminal's own footer */
.term-btns { display: flex; align-items: center; gap: clamp(6px, calc(1 * var(--fvw, 1vw)), 14px); }
.term-btns button { font: 400 15px var(--display); letter-spacing: .12em; color: var(--soft); background: transparent;
  border: 1px solid var(--dim); padding: 0 8px; line-height: 1.5; display: inline-flex; align-items: center; gap: .4em; cursor: pointer; white-space: nowrap; }
.term-btns button:hover, .term-btns button:focus-visible { background: var(--green); color: #000; outline: none; }
.term-btns .led { width: .45em; height: .45em; background: var(--dim); display: inline-block; }
.term-btns button { height: 1.6em; }
.term-btns #sitePwr .led { border-radius: 50%; }
.term-btns #sitePwr .led.on { background: var(--green); box-shadow: 0 0 6px var(--green); }

/* narrow windows: the terminal's buttons take their own row under the links */
@container site (max-width: 560px) {
  .site-footer { height: auto; flex-wrap: wrap; justify-content: center; row-gap: 6px; padding-block: 6px; }
}
.term-btns #siteDrive .led.on { background: #ffb347; box-shadow: 0 0 6px #ffb347; }   /* the games' amber drive light */
/* (David, 4 Nov) the footer names the studio in the terminal's way, where a game's footer shows its title */
.footer-title { font: 400 16px var(--display); letter-spacing: .15em; color: var(--dim); white-space: nowrap; }
/* (David, 4 Nov) the site is on the same tube as the terminal: Intel's CRT overlay over every page, the scanlines and
   the vignette, and its faint flicker. Under the boot's own (z-index 100), and never in the way of a click. */
.site::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 90;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.site::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 91;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.55) 100%); }
@keyframes siteflick { 0%, 96%, 100% { opacity: 1 } 97% { opacity: .93 } 98% { opacity: 1 } 99% { opacity: .96 } }
.site > header, .site > main, .site > footer { animation: siteflick 6s infinite steps(1); }
/* (David, 4 Nov) the footer: ABOUT, CONTACT and PRIVACY boxed in the lower left; the studio's name in the middle, with
   POWER, A: DRIVE and BIOS beside it on the home page, as on the terminal's footer; the links box on the right */
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; }
.foot-menu { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: calc(10px * var(--uiz, 1)); }
.foot-menu a { font: 400 15px var(--display); letter-spacing: .12em; color: var(--text); white-space: nowrap; }
.foot-menu a[aria-current] { color: var(--hi); }
.footer-mid { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: clamp(10px, calc(1.4 * var(--fvw, 1vw)), 16px); }
.footer-end { grid-column: 3; justify-self: end; }
@container site (max-width: 860px) {
  .site-footer { display: flex; flex-wrap: wrap; justify-content: center; height: auto; row-gap: 6px; padding-block: 6px; }
  .footer-mid { order: -1; width: 100%; }
}
@container site (max-width: 480px) { .footer-mid .footer-title { display: none; } }
/* narrow windows: without the terminal's buttons the name would take a row of its own; the logo at the top already names the studio */
@container site (max-width: 860px) { .footer-mid:not(:has(.term-btns)) { display: none; } }
/* windows smaller than the 1280x800 design (no zoom there): the footer's type shrinks with the window, so the three
   groups still fit on one line; from 1280x800 up it is the terminal's own size, zoomed */
.foot-menu a, .social-links a, .term-btns button { font-size: clamp(11px, calc(var(--u) * 1.17), 15px); }
.footer-title { font-size: clamp(11px, calc(var(--u) * 1.25), 16px); }
@container site (max-height: 360px) { .site-footer { padding-bottom: 6px; padding-top: 2px; } }
/* the home page's footer carries the terminal's buttons too: it stacks a little sooner */
@container site (max-width: 1100px) {
  .site-footer:has(.term-btns) { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .site-footer:has(.term-btns) .footer-mid { order: -1; width: 100%; }
}
/* (David, 4 Nov) every footer link is a button like POWER: its own box, the display face at 15 px, the soft shade,
   filled with the phosphor on hover; PRIVACY keeps its dimmer shade */
.foot-menu a, .social-links a { display: inline-flex; align-items: center; height: 1.6em; padding: 0 8px; border: 1px solid var(--dim);
  color: var(--soft); text-shadow: inherit; }
.foot-menu a:hover, .foot-menu a:focus-visible, .social-links a:hover, .social-links a:focus-visible,
.site-footer .foot-menu a:hover, .site-footer .social-links a:hover { background: var(--green); color: #000; text-shadow: none; outline: none; }
.foot-menu a[aria-current] { color: var(--hi); border-color: var(--fg, #7DFF9F); }
.foot-menu .footer-legal { color: var(--dim); }
/* (David, 4 Nov) every page has the logo, centred under the banner, in its green box; it goes to the home page */
.home-header { justify-content: center; border-bottom: none; }
/* (David, 4 Nov) the tagline is the VHS-glitch GIF (images/brand/playable-history-vhs.gif), at the size the words were */
.hero-copy h1.tagline { line-height: 0; text-shadow: none; }
.hero-copy h1.tagline img { height: calc(clamp(24px, calc(var(--u) * 6.5), 84px) * 1.42); width: auto; max-width: 100%; image-rendering: pixelated; }
/* (David, 4 Nov) each group of footer links sits in one box, with every link inside it a button like POWER */
.foot-menu, .social-links { border: 1px solid var(--dim); padding: 4px; gap: 6px; }
/* (David, 4 Nov) a hovered button is filled with the phosphor, its words and its border black */
.term-btns button:hover, .term-btns button:focus-visible,
.foot-menu a:hover, .foot-menu a:focus-visible, .social-links a:hover, .social-links a:focus-visible { border-color: #000; color: #000; }
.term-btns button:is(:hover, :focus-visible) .ico { border-color: #000; color: #000; }
/* small marks beside BIOS and DISCLAIMER, as POWER has its light and A: DRIVE its square */
.ico { display: inline-block; flex: none; }
.ico.chip { width: .5em; height: .5em; border: 1px solid currentColor; box-shadow: inset 0 0 0 1.5px transparent; position: relative; }
.ico.chip::after { content: ""; position: absolute; inset: 2px; background: currentColor; }
.term-btns #siteBios, .term-btns #siteNote { display: inline-flex; align-items: center; gap: .4em; }
/* (David, 4 Nov) the inner pages read like a screen of 1991: Intel: the terminal's own text, left-aligned, the title
   in the brighter phosphor as Intel's .apptitle and .brief h1, lists marked with Intel's "> ", and no boxes */
.page { justify-content: flex-start; align-items: stretch; padding: 22px var(--pad-x) 12px; }
.page-panel { max-width: 78ch; margin: 0 auto 0 0; text-align: left; overflow-y: auto; overflow-x: hidden;
  /* as Intel's long screens: in a very small window the text scrolls inside the frame, fading at its foot */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 18px), transparent 100%);
  font: 400 clamp(15px, calc(var(--u) * 1.72), 22px)/1.2 var(--display); letter-spacing: .02em; }
.page-panel .section-heading { display: block; margin: 0 0 14px; }
.page-panel .section-heading span { display: none; }
.page-panel .section-heading h1 { font: 400 1.1em/1.2 var(--display); letter-spacing: .08em; color: var(--hi); white-space: normal; }
.page-panel p { margin: 0 0 .7em; }
.page-panel .lead { font: inherit; letter-spacing: .08em; color: var(--hi); text-shadow: inherit; margin-bottom: .7em; }
.page-panel .kicker, .page-panel .status { font: inherit; letter-spacing: .06em; color: var(--soft); }
.page-panel .drop { font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--soft); opacity: .8; }
.page-panel:has(.game-list) { font-size: clamp(15px, calc(var(--u) * 1.72), 22px); }
.game-list { gap: .9em; }
.game-list li { position: relative; padding-left: 2ch; }
.game-list li::before { content: "> "; position: absolute; left: 0; top: 0; color: var(--hi); }
.game-list a, .game-list a:hover, .game-list a:focus-visible { display: block; border: none; padding: 0; box-shadow: none; }
.page-panel:has(.game-list) .game-list h2, .game-list h2 { font: inherit; color: var(--hi); letter-spacing: .06em; }
.game-list .genre { font-size: 1em; color: var(--soft); }
.game-list .status { font-family: var(--mono); font-size: 13px; color: var(--soft); opacity: .8; margin-top: .2em; }
.privacy .lead { font-size: inherit; }
.privacy-list { margin: 0 0 .8em; max-width: none; font-size: 1em; gap: .25em 2ch; }
.privacy-list dt { font: inherit; letter-spacing: .06em; color: var(--hi); }
.privacy-list dd { font-family: var(--mono); font-size: .68em; line-height: 1.45; padding-top: .15em; }
/* the inner pages' spacing, tight enough for a 16:9 screen (the frame is 1280 x 720 there) */
.page { padding-top: 12px; }
.page-panel .section-heading { margin-bottom: 8px; }
.page-panel p { margin-bottom: .55em; }
.privacy-list dd { line-height: 1.36; }
.game-list { gap: .7em; }
/* (David, 4 Nov) ABOUT, CONTACT and PRIVACY in the same shade as STEAM, DISCORD, YOUTUBE and PATREON; the page you
   are on is marked by its brighter border */
.foot-menu a, .foot-menu .footer-legal, .foot-menu a[aria-current] { color: var(--muted); }
.foot-menu a[aria-current] { border-color: var(--green); }
.foot-menu a:hover, .foot-menu a:focus-visible { color: #000; }
/* the Y/N box, as 1991: Intel's #owConfirm: inside the screen, a dark veil over it, the question in a phosphor box */
#owConfirm { position: absolute; inset: 0; z-index: 80; display: grid; place-content: center; background: rgba(0,0,0,.72); }
#owConfirm[hidden] { display: none; }
#owConfirm > * { width: min(560px, calc(100cqw - 32px)); }
#owConfirm pre { margin: 0; padding: 14px 16px 10px; background: #000; border: 1px solid var(--green); border-bottom: none; font-family: var(--display); font-size: 21px; line-height: 1.3; white-space: pre-wrap; color: var(--green); text-shadow: var(--glow, 0 0 6px rgba(70,242,122,.55)); }
#owConfirm .acts { display: flex; gap: 10px; padding: 0 16px 14px; background: #000; border: 1px solid var(--green); border-top: none; }
#owConfirm button { font-family: var(--display); font-size: 21px; padding: 0 14px; color: var(--green); background: transparent; border: 1px solid var(--dim); text-shadow: inherit; }
#owConfirm button:hover, #owConfirm button:focus-visible { background: var(--green); color: #000; border-color: #000; text-shadow: none; outline: none; }

/* DISCLAIMER's mark: a warning triangle with the exclamation mark cut out, in the button's colour (black when hovered) */
.ico.warn { width: .62em; height: .56em; fill: currentColor; border: none; }
/* (David, 4 Nov) About, Contact and Privacy: the text in one box, the terminal's (as round Intel's DoD warning and the
   SETUP list), centred on the page; the title centred, everything else in the box left-aligned */
.page:has(.page-panel.boxed) { justify-content: center; align-items: center; }
.page-panel.boxed { margin: auto; width: fit-content; max-width: min(78ch, 100%); max-height: 100%;
  border: 1px solid var(--green); padding: 14px 20px 6px; text-align: left; -webkit-mask-image: none; mask-image: none; }
.page-panel.boxed .section-heading h1 { text-align: center; }
.page-panel.boxed .lead { text-align: left; }
/* the privacy box fits a 16:9 screen (the frame is 1280 x 720 there) */
.page-panel.boxed.privacy { padding: 10px 18px 2px; }
.page-panel.boxed.privacy .section-heading { margin-bottom: 4px; }
.page-panel.boxed.privacy p { margin-bottom: .4em; }
.page-panel.boxed.privacy .privacy-list { gap: .12em 2ch; margin-bottom: .4em; }
.page-panel.boxed.privacy .privacy-list dd { line-height: 1.3; }
/* the footer's lights hovered, as Intel's (see boot.css): unlit a hollow black ring, POWER lit solid black, the drive
   lamp lit amber inside a black ring; BIOS's and DISCLAIMER's marks simply turn black with the words */
.term-btns :is(#sitePwr, #siteDrive):is(:hover, :focus-visible) .led { background: transparent; box-shadow: inset 0 0 0 1.5px #000; }
.term-btns #sitePwr:is(:hover, :focus-visible) .led.on { background: #000; box-shadow: none; }
.term-btns #siteDrive:is(:hover, :focus-visible) .led.on { background: #ffb347; box-shadow: 0 0 0 1.5px #000; }

/* (David, 4 Nov) the stub pages: STEAM, YOUTUBE and each game open a document lifted from 1991: Intel or 1991: Strike
   (a message, office mail, a briefing, an AAR), censored but for COMING SOON... Laid out as the games' .brief and .rep
   (kicker, title, the document in Share Tech Mono); a redaction is Intel's .redact, a solid bar of phosphor over X's. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-panel.redacted { max-width: 82ch; text-align: left; display: grid; gap: 10px; align-content: center; container-type: inline-size; }
.redacted .kicker { font: 400 20px var(--display); letter-spacing: .14em; color: var(--soft); }
.redacted h1 { font: 400 24px/1.2 var(--display); margin: 0; color: var(--hi); letter-spacing: .08em; }
.redacted .rwrap { min-height: 0; }
.redacted .rdoc { font: 400 min(15px, 2.25cqw, calc(1.75 * var(--fvh, 1vh)))/1.45 var(--mono); white-space: pre-wrap; margin: 0; color: var(--text); }
.redacted .redact { background: var(--text); color: var(--text); user-select: none; }
.redacted .cs { color: var(--hi); text-shadow: var(--glow); }
.redacted .bdoc { border: 1px solid var(--dim); padding: 12px 14px; display: grid; gap: 10px; font: 400 min(14px, 2.4cqw, calc(1.7 * var(--fvh, 1vh)))/1.4 var(--mono); }
.redacted .bdoc .bhead { display: grid; gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: 8px; color: var(--hi); letter-spacing: .04em; }
.redacted .bdoc .bsec { display: grid; gap: 3px; }
.redacted .bdoc .bt { color: var(--hi); }
.redacted .bdoc p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.redacted .bdoc .bsrc { border-top: 1px solid var(--line); padding-top: 8px; color: var(--soft); font: 400 12px var(--display); letter-spacing: .06em; }
@container site (max-height: 560px) { .redacted .opt { display: none; } }
@container site (max-width: 560px) { .redacted .kicker { font-size: 15px; } .redacted h1 { font-size: 20px; } .redacted .rdoc { font-size: min(12px, 2.6cqw); line-height: 1.35; } .redacted .opt { display: none; } .redacted .bdoc { font-size: 12px; padding: 8px 10px; gap: 6px; } }
@container site (max-height: 420px) { .redacted .kicker { display: none; } .redacted h1 { font-size: 18px; } .redacted .rdoc { line-height: 1.3; } .redacted .bdoc .bsrc, .redacted .bdoc .bhead span + span { display: none; } }

/* (David, 4 Nov) the logo a size larger, the same on every page, its box transparent. On the home page only (not yet
   settled) it spills down over the top photo: the photo's top edge sits just under TECHNOLOGY, as an underline.
   The wordmark's TECHNOLOGY ends 125/132 of the way down the image; the mark is .52 of the header, the wordmark .37. */
.site { --hh: clamp(44px, calc(10 * var(--fvh, 1vh)), 104px); }
.brand { --bp: clamp(4px, calc(.9 * var(--fvh, 1vh)), 9px); padding: var(--bp) clamp(8px, calc(1.1 * var(--fvw, 1vw)), 14px); background: transparent; }
.brand-mark { height: calc(var(--hh) * .52); }
.brand-name { height: calc(var(--hh) * .37); }
.site > header { position: relative; z-index: 3; }
/* (David, 4 Nov 22:51) the logo's box is the same on every page, in the same place, the logo centred in it; on the home
   page the photo comes up behind it instead, so its top edge underlines TECHNOLOGY. The box and wordmark sit centred
   in the header, so TECHNOLOGY ends .5 - .37/2 + .37 x 7/132 of the header's height above its bottom. */
.site:has(.hero) .hero { margin-top: calc(-1 * (var(--hh) * .315 + var(--hh) * .37 * 7 / 132) + 3px); }
@container site (max-width: 480px) { .site:has(.hero) .hero { margin-top: 0; } }
/* (David, 4 Nov) BIOS is marked with a settings cog: it tells a visitor this is where the settings are */
.ico.cog { width: .62em; height: .62em; fill: currentColor; border: none; }
.redacted a.cs:hover, .redacted a.cs:focus-visible { background: var(--green); color: #000; text-shadow: none; outline: none; }
/* a game photo that failed to load shows the black frame, not the browser's broken-image icon */
.game-image.failed { visibility: hidden; }
/* (David, 4 Nov) OCCULT TECHNOLOGY in the footer goes home, as the logo does */
a.footer-title { color: var(--dim); text-decoration: none; }
a.footer-title:hover, a.footer-title:focus-visible { color: var(--hi); text-shadow: var(--glow); outline: none; }
/* (David, 4 Nov 22:45) on phones, where the wordmark drops out, the logo's mark is the turning globe (favicon.js) */
.brand-globe { display: none; height: calc(var(--hh, 60px) * .52 * 1.4); width: auto; margin: calc(var(--hh, 60px) * -.06) 0; }
@container site (max-width: 480px) { .brand .brand-mark { display: none; } .brand .brand-globe { display: block; } }
/* (David, 4 Nov 23:08) no browser focus box on the home page: a focused game shows the same glow as hovering it,
   the logo the same glow it has on hover */
.card-link:focus, .card-link:focus-visible, .brand:focus, .brand:focus-visible, a.footer-title:focus { outline: none; }
.card-link:focus-visible h3 { color: var(--hi); text-shadow: var(--glow); }
/* (David, 4 Nov 23:25) the tagline has no scanlines of its own: the tube's overlay draws them, and where each line
   falls the words are cut nearly clear, so the photo shows through. The cut is the overlay's own pattern (1 px in 3,
   from the bottom of the frame), shifted by script.js so it lands on the overlay's lines on any screen. */
.hero-copy h1.tagline img {
  --o: var(--scan-off, 0px);
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.15) var(--o), rgba(0,0,0,.15) calc(var(--o) + 1px), #000 calc(var(--o) + 1px), #000 calc(var(--o) + 3px));
  mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.15) var(--o), rgba(0,0,0,.15) calc(var(--o) + 1px), #000 calc(var(--o) + 1px), #000 calc(var(--o) + 3px));
}
/* (David, 4 Nov 23:47) the same hover as the shared terminal's on every footer button and link: phosphor fill, black
   words, marks and border, the current page's link included */
.site-footer :is(button, [role=link], a):is(:hover, :focus-visible) { background: var(--green) !important; color: #000 !important; border-color: #000 !important; text-shadow: none !important; outline: none; }
.site-footer :is(button, [role=link], a):is(:hover, :focus-visible) *:not(.led) { color: inherit !important; text-shadow: none !important; }
.site-footer a.footer-title:is(:hover, :focus-visible) { background: transparent !important; border-color: transparent !important; color: var(--hi) !important; text-shadow: var(--glow) !important; }