/* Fonts (self-hosted, SIL OFL, see fonts/licenses) */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../fonts/kalam-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../fonts/kalam-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Type: one face per object */
  --f-slide: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;  /* projector slides, plain version */
  --f-hand: "Kalam", "Comic Sans MS", cursive;                       /* stickies, character sheet, scribbles */
  --f-device: "IBM Plex Mono", "Consolas", monospace;                /* laptop UI, device labels */

  /* The room's own light is the palette */
  --ceiling: #e8e6dc;
  --wall: #dcd3bd;
  --wall-shade: #d3c9b1;
  --side-l: #c7bca2;
  --side-r: #cdc2a8;
  --corner: #b3aa94;
  --trim: #bdb39b;
  --carpet: #b5a685;
  --carpet-dark: #a29274;
  --carpet-light: #c6b999;
  --ink: #23262a;
  --ink-soft: #4f5358;
  --paper: #f6f4ee;
  --screen: #f3f1ea;
  --plastic: #e4e1d7;
  --plastic-dark: #b9b4a6;
  --accent: #2f5466;   /* office-chair blue */
  --red: #b4442f;      /* pointing-stick red */
  --go: #2f6b4f;       /* status light */
  --focus: #b4442f;

  --side: 6%;          /* side-wall width; matches the ceiling SVG (60 of 1000) */
  --hud-h: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hud-h); scrollbar-gutter: stable; overflow-x: clip; }
body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--f-slide);
  font-size: 1rem;
  line-height: 1.45;
  overflow-x: hidden; /* fallback */
  overflow-x: clip;   /* hidden alone lets phone browsers widen the page to fit decor that pokes out (cut off the Skip button) */
}
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* HUD: always visible, contact in one tap */
.hud {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--hud-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: #efede5;
  border-bottom: 2px solid var(--trim);
  font-size: 0.95rem;
}
.hud-name { font-weight: 700; text-decoration: none; margin-right: auto; white-space: nowrap; }
.hud-contact { display: flex; gap: 4px; }
.hud-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  white-space: nowrap;
}
.hud-link:hover { background: #e2dfd4; }
.hud-narrow { display: none; }
.hud-skip {
  order: 3; /* first in the tab order, last on screen */
  min-height: 36px; padding: 0 14px;
  border: 0; border-radius: 3px;
  background: var(--ink); color: #f3f0e6;
  font-weight: 700; white-space: nowrap;
  box-shadow: 0 3px 0 #000;
}
.hud-skip:hover { background: #3a3e43; }
.hud-skip:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }

@media (max-width: 860px) {
  .hud-wide { display: none; }
  .hud-narrow { display: inline; }
}
@media (max-width: 520px) {
  .hud { gap: 6px; padding: 0 10px; font-size: 0.9rem; }
  .hud-name { display: none; }
  .hud-contact { margin-right: auto; }
  .hud-link { padding: 0 8px; }
}

/* Captions: one at a time, like subtitles */
.caption {
  position: fixed; left: 50%; bottom: max(20px, 5vh); z-index: 60;
  transform: translate(-50%, 8px);
  max-width: min(90vw, 36rem);
  padding: 8px 16px;
  background: rgba(24, 24, 22, 0.94);
  color: #f6f3e8;
  font-size: 1.05rem; text-align: center;
  border-radius: 2px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  pointer-events: none;
}
.caption.is-on {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
}

.noscript {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70;
  margin: 0; padding: 12px 16px; background: var(--paper); border: 2px solid var(--ink);
}

@media (max-width: 760px) {
  .caption { bottom: 10px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}