/* ──────────────────────────────────────────────────────────────────────────
   A SECTION OF THE SITE THAT STANDS BY ITSELF — About, Interviews, Contact.

   Until 2026-11-15 these three were pieces of spa.html, reached as
   `spa.html#about`, `#interviews` and `#contact`, and they shared one address
   with the landing page, Beholder and the Index. A search engine cannot list a
   #hash and a pasted link showed the whole site's card, so each is now a page of
   its own: /about/, /interviews/ and /contact/ (task B1, his: "lets just fix
   this now", and then "yes to own addresses for contact and interviews").

   THIS FILE IS WHAT spa.html USED TO GIVE THEM, and nothing else: a window that
   does not scroll, the box each page lays itself out in, and what a phone and a
   tablet change about both. One copy for the three, the way ground.css is one
   copy of the ground — they were written against exactly these rules and must
   go on agreeing. The measuring that went with it is /section.js.

   NOTHING ABOUT HOW THE THREE LOOK WAS MEANT TO CHANGE, AND IT WAS MEASURED NOT
   TO: every box on each page, and every item of the menu, stands where it stood
   inside spa.html, at five window sizes (docs/task-notes.md, B1).

   A PAGE LINKS, IN THIS ORDER: nav.css, text.css (the wash), ground.css (the
   mat), this file, and then its own <style>.
   ────────────────────────────────────────────────────────────────────────── */

/* THE WINDOW HOLDS STILL and each page scrolls inside a box of its own — About's
   two columns, Contact's grid, the Interviews list. NOT `width: 100vw` on html:
   rule 27, and ground.css has already said 100%. */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  position: relative;
}

/* THE BOX spa.html CALLED #spa-content: what a page is placed against, the size
   of the window, above the wash (rule 26). */
#section-box {
  position: absolute;
  inset: 0;
  z-index: 10;
}

/* ON A PHONE the document scrolls after all, and the box is pushed clear of the
   bar: padding-top is set from the bar's measured height by /section.js, and
   the 60px is only what stands before that lands. */
@media (max-width: 800px), (orientation: portrait) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) {
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }

  #section-box {
    position: relative;
    min-height: 100vh;
    padding-top: 60px;
  }
}

/* A TABLET. spa.html's own two rules for every section, kept as they were. */
@media (pointer: coarse) and (min-width: 768px) {
  /* Prevent scroll anchoring issues */
  html {
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
    -webkit-overscroll-behavior-y: none;
  }

  /* Fix any momentum scrolling issues */
  body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
  }
}