/* ─── BASE ───────────────────────────────────────────────────────────
   Reset, document defaults and shared animations — the rules that were
   identical (modulo whitespace) at the top of all 26 pages' inline
   <style> blocks.

   Linked after tokens.css and rooms.css, before the page's inline
   <style>, so page-local rules still win at equal specificity.
   ──────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
}

/* The custom cursor replaces the system one, but only where there is a
   real pointer to replace. On touch, and in editorial mode, the system
   cursor stays — hiding it there leaves people with no pointer at all.

   The interactive elements are named as well as `body`, because the
   browser's own stylesheet gives links and buttons `cursor: pointer` on
   the element itself, and a declaration on the element beats an inherited
   one however specific the inherited one is. Only `body` was listed here,
   so the system hand kept appearing beside the custom ring on anything
   no page had thought to cover — most visibly inside the floorplan,
   where the plan's own room links are built by JS and no page CSS
   reaches them at all.

   Form fields are deliberately absent: the I-beam over a text input is
   telling the truth about what that element does, and the custom dot
   does not replace it. */
@media (hover: hover) and (pointer: fine) {
  :root[data-mode="workshop"] body,
  :root[data-mode="workshop"] a,
  :root[data-mode="workshop"] button,
  :root[data-mode="workshop"] summary,
  :root[data-mode="workshop"] [role="button"] {
    cursor: none;
  }
}

/* NOTE: no global `img { max-width: 100% }` here, deliberately.
   Adding it fixes horizontal overflow on several pages — which is a real
   improvement, and precisely why it does not belong in a migration whose
   contract is "changes nothing". It reflows layouts that were built
   around the overflow. Revisit per room in Phase 4. */

/* A word that cannot fit its container — an email address, a long URL,
   a filename — otherwise pushes the whole page sideways on a phone.
   break-word only engages when the word genuinely does not fit, so text
   that already fits is unaffected. */
p,
li,
a,
h1,
h2,
h3,
h4,
figcaption,
blockquote {
  overflow-wrap: break-word;
}

/* Keyboard focus must always be visible. Several pages were setting
   outline:none without a replacement, which left keyboard users unable
   to see where they were. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── SHARED ANIMATIONS ──────────────────────────────────────
   fadeUp was defined identically on nearly every page. */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── UTILITY ────────────────────────────────────────────────
   Visible only to screen readers — used by the skip link and by
   labels that would otherwise duplicate visible text. */
.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;
}