/* The page below the pinned stage's story (src/story.css): the job, how it
   works, the closing call and the footer (the makers stage has its own
   sheet, src/makers/makers.css). Black continues the stage's
   world, and each band stands in a faint pool of the stage's beam. Display
   lines are RER lettering (src/brand.js, sized here by --display-cap and
   --close-cap), long lines the page grotesk. The HTML stages' own layouts and diagrams
   (the job, how it works and the closing call) are in src/sections/.
   Layout: a 12-column grid at 901px and up, one column below. */

:root {
  --rule: rgba(236, 235, 231, 0.16);
  --col-gap: clamp(20px, 2.1vw, 40px);
  --section-space: clamp(120px, 12vw, 230px);
  --display-cap: clamp(28px, 3.3vw, 64px);
  --close-cap: clamp(40px, 5.6vw, 112px);
  --body-size: clamp(17px, 1.3vw, 21px);
  --beam: rgba(214, 220, 232, 0.075);
}

/* A band: its own stacking context, so its pool of light sits behind its
   copy and above the page's black. The pool is centred on the band's
   opening line and fades out before the band's top edge. */
.band { position: relative; isolation: isolate; padding: var(--section-space) var(--gutter) 0; }
.band::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: calc(var(--section-space) * 2 + var(--display-cap) * 2);
  background: radial-gradient(ellipse 52% 50% at 24% 50%, var(--beam), transparent 70%);
  pointer-events: none;
}

.display { grid-column: 1 / -1; margin: 0; font-size: var(--display-cap); line-height: 0; color: var(--paper); }
.display-close { font-size: var(--close-cap); }

.body {
  margin: 0;
  max-width: 30em;
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* Footer: the links run down their columns, in the owner's order; the
   copyright line under them at the right (at the left on the phone). */

.footer {
  margin-top: var(--section-space);
  padding: clamp(48px, 5vw, 88px) var(--gutter) clamp(28px, 3vw, 48px);
  border-top: 1px solid var(--rule);
}
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 48px; }
.footer-mark { display: block; width: clamp(96px, 8.4vw, 140px); line-height: 0; }
.footer-mark svg { display: block; width: 100%; height: auto; }
.footer-links {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, max-content);
  grid-template-rows: repeat(3, auto);
  gap: 16px clamp(40px, 5.5vw, 104px);
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--text-soft);
}
.footer-links a { transition: color 160ms ease; }
.footer-links a:hover { color: #fff; }
.footer-links a:focus-visible, .footer-mark:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.footer-base {
  margin: clamp(64px, 6.5vw, 112px) 0 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-faint);
}

/* Narrow: one column. */

@media (max-width: 900px) {
  :root {
    --section-space: clamp(96px, 16vw, 136px);
    --display-cap: 4.3vw;
    --close-cap: 5.8vw;
  }
}

/* The eleven links in three columns where four would not fit. */
@media (max-width: 640px) {
  .footer-links { grid-template-rows: repeat(4, auto); }
}

@media (max-width: 480px) {
  :root { --section-space: 96px; --display-cap: 7vw; --close-cap: 11vw; }
  .footer-links { grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(6, auto); gap: 14px 48px; }
  .footer-base { text-align: left; }
}