/* What every page of the concept shares: the black page, the lime, and the text's size on a 24 px line, in
   Fadel's typeface, KH Teka.
   The text is 18 px on a phone or tablet. On a wide window (1024 px and up) it is a 66th of the page's width,
   two steps of the homepage's grid, but never under 16 px nor over 18: 16 px up to a 1056 px page, 18 px from
   1188 px.

   cqi is the width of the nearest container, so each page is one (.page), and so is its footer
   (.disclaimer), which sits outside it: the text, and each page's grid, measure the page's width, which leaves
   out the scrollbar where the system shows one. Neither may have side padding, or its cqi shrinks with it.
   body cannot be the container: a container holds its fixed-position descendants. */

/* The typeface: KH Teka Regular, from KH Type, supplied by Fadel. Its tables disagree on how far it reaches
   above and below the baseline: 0.95 and 0.25 of its size in one (hhea), 0.775 and 0.225 in another (OS/2),
   which it asks to be used. Safari reads the first and ignores the overrides below; Chrome and Firefox follow
   the overrides, so every browser places the text alike in its line: the capitals centred in it, as before.
   The baselines set on the grid count on it (styles.css). */
@font-face {
  font-family: "KH Teka";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/KHTeka-Regular.woff2") format("woff2");
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  --lime: #91ff00;
  --line: 24px; /* the text's line: three steps of the 8 px grid */
  --text-size: 18px; /* on a phone or tablet; a wide window follows the page's width (below) */
  --label-size: 12px; /* small words, two thirds of the text: those around the boot (spec.css) and the footer's */
  --label-line: 16px; /* small words' line, where they run to two: two steps of the 8 px grid */
  color-scheme: dark;
}

/* A wide window: a 66th of the page, so the text keeps the layouts' proportions, but never under 16 px nor
   over 18 */
@media (min-width: 1024px) {
  :root {
    --text-size: clamp(16px, calc(100cqi / 66), 18px);
  }
}

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

html {
  background: #000;
}

body {
  margin: 0;
  background: #000;
  color: var(--lime);
  font-family: "KH Teka", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-size);
  font-weight: 400;
  line-height: var(--line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page,
.disclaimer {
  container-type: inline-size;
}

/* The text's size follows the page's width on a wide window, which only what is inside the page or the
   footer can measure (body would measure the window, scrollbar and all), so it is set again on their
   children */
.page > *,
.disclaimer > * {
  font-size: var(--text-size);
}

/* ---------------------------------------------------------------------------
   The header both pages share (scripts/header.js): the swoosh at the left, which links to the homepage, and
   Specs at the right, which links to the boot's page, centred on one line. It has no background: it stands
   over the top of the page, which shows through it, and only its two links take the pointer. Scrolling down,
   the page carries it away as part of it, and scrolling up brings it back.
   On a wide window it keeps the header mockup's proportions at any width, on the boot's page's grid (a
   192nd of the page, 8 px at 1536 px): 11 steps tall, the swoosh 10 steps wide, and 9 steps in from each
   side of the page, as the boot's page's margins are. On a phone or tablet it is 8 steps of 8 px tall, in
   from the sides by the pages' own margins.
   The header is a container, so its bar measures the page's width (cqi), which leaves out the scrollbar, as
   the pages' grids do. A page keeps the top --header-height clear for it: the homepage has room above its
   kicker at every size, and the boot's page starts below it.
   --------------------------------------------------------------------------- */
:root {
  --header-step: 8px; /* one step of the header's grid: fixed on a phone or tablet, a share of the page's width on a wide window */
  --header-height: calc(var(--header-step) * 8);
  --header-margin: calc(var(--header-step) * 3); /* as the pages' margins on a phone */
  --header-swoosh: calc(var(--header-step) * 7); /* the swoosh's width */
}

@media (min-width: 600px) {
  :root {
    --header-margin: calc(var(--header-step) * 6); /* as the pages' margins on a tablet */
  }
}

@media (min-width: 1024px) {
  :root {
    --header-step: calc(100cqi / 192);
    --header-height: calc(var(--header-step) * 11);
    --header-margin: calc(var(--header-step) * 9);
    --header-swoosh: calc(var(--header-step) * 10);
  }
}

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5; /* over the page */
  container-type: inline-size;
  pointer-events: none; /* the page under it takes clicks and hovers, but for its links (below) */
}

/* As it leaves, it is part of the page, which carries it away: the script sets where its top is on the page */
.site-header.is-carried {
  position: absolute;
}

.site-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--header-margin);
  font-size: var(--text-size);
}

.site-header a {
  pointer-events: auto;
}

/* The swoosh: a link as large as its picture, ringed when the keyboard reaches it */
.site-home {
  display: block;
}

.site-home:focus-visible {
  outline: 1px solid var(--lime);
  outline-offset: 4px;
}

.site-swoosh {
  width: var(--header-swoosh);
  height: auto;
}

/* Specs underlines when it is hovered or reached from the keyboard, as the homepage's chapter titles do */
.site-link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s ease;
}

.site-link:hover,
.site-link:focus-visible {
  text-decoration-color: currentColor;
}

.site-link:focus-visible {
  outline: none;
}

/* ---------------------------------------------------------------------------
   The footer both pages share, closing the page: the disclaimer at the left and the credit at the right, in
   small words, two lines each. It stands on the header's margins, so the disclaimer starts under the
   swoosh's left edge and the credit ends under Specs's right edge, at every size: the footer (.disclaimer)
   is a container as wide as the header, with no padding of its own, so --header-margin measures the same
   here. Each page sets how far it stands below what comes before it, and its room to the page's end.
   --------------------------------------------------------------------------- */
.disclaimer-bar {
  display: flex;
  flex-wrap: wrap; /* should the two ever not fit side by side, the credit drops under the disclaimer */
  justify-content: space-between;
  align-items: baseline;
  gap: 0 var(--line);
  padding: 0 var(--header-margin);
  font-size: var(--label-size);
  line-height: var(--label-line);
}

.disclaimer-bar p {
  margin: 0;
}

/* At the right, even below the disclaimer, its lines aligned left: its longest line ends under Specs */
.credit {
  margin-left: auto;
}