/* About, rebuilt from Figma node 1432:2267 (Desktop/about).
   The Readymag runtime's own About (circular "hardware for rituals" lockup) is
   hidden by about-layout.js and replaced with this. Geometry follows the frame:
   1280x859 — mark 96px at y=38, lead copy 694px wide centred on the frame's
   middle, side labels at 40px insets, copyright in a 128px footer. */

/* Above About's field, which is where the runtime keeps the nav, the side
   labels and the copyright while About is up. */
:root.fx-about #container {
  position: relative;
  z-index: 9999;
}

/* About does not scroll — there is nothing to move — but the runtime's own
   About underneath is taller than a phone's screen, so the document could.
   On a phone that only collapsed Safari's bar and re-laid the fixed page
   around the growing viewport: the mark and the copyright jumped with every
   swipe. Hold the document; the gesture goes into the mark (about-layout.js). */
:root.fx-about,
:root.fx-about body {
  height: 100%;
  overscroll-behavior: none;
  touch-action: none;
}
/* The overflow stays on html only: on iOS a body with hidden overflow clips
   its fixed children to its own box, and with the page scrolled that box
   ends above the link at the bottom. */
:root.fx-about {
  overflow: hidden;
}

/* On a phone the box is the visible window measured in JS, not `inset: 0`:
   iOS resolves that against the large viewport and the page would hang forty
   pixels past the bottom, taking everything centred in it half that far down. */
@media (max-width: 760px) {
  #about-page {
    bottom: auto !important;
    height: var(--fx-vh, 100svh) !important;
  }
}

#about-page {
  position: fixed;
  inset: 0;
  /* Over the canvas, under the captions. Those are the runtime's own and belong
     to both pages now, so About's field must not cover them. */
  z-index: 9998;
  background: #fafafa;
  color: #161616;
  overflow: hidden;
}

/* The metal mark turns in the middle of the screen, over the copy. It is a
   canvas of its own (an SDF raymarcher), so it is placed rather than laid out;
   pointer events pass through to the text and to the ripple underneath. */
#about-page .about-logo3d {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Sized to the screen rather than pinned: it was a token on a large display
     and cramped on a phone. vmin keeps it square-ish on any shape. */
  width: min(64vmin, 720px);
  height: min(64vmin, 720px);
  z-index: 3;
}

#about-page .about-logo3d img,
#about-page .about-logo3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Teodor Light, optically centred on the frame. The measure grows with the type
   so the copy keeps breaking into the same three lines. */
#about-page .about-lead {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 824px;
  max-width: calc(100vw - 240px);
  margin: 0;
  font-family: "Teodor", Georgia, serif;
  font-weight: 300;
  font-size: 76px;
  line-height: normal;
  text-align: center;
  color: #000;
  word-break: break-word;
}

/* AAEL / C24 sit on the vertical centre line, 40px from each edge. */

/* Baseline, not box, is what the eye lines up across the screen. Both blocks are
   box-centred on the middle of the viewport, but a baseline always sits below
   its line box's centre by an amount that grows with the type — 24.5px into the
   lead's 87px line, 12.5px into AAEL's 18px one. Equal centring therefore left
   the copy's baseline 11px under AAEL's. Lifting both the copy and the mark by
   that difference puts them on AAEL's baseline.

   The mark is placed against the lowercase instead. Its centre bar wants to run
   through the copy rather than over it: Teodor's x-height at 76px is 34px, which
   put the bar at 455 against a baseline of 463.5. It then went up another 10px
   by eye, landing at -5 — near enough the middle of the lowercase.
   Desktop only: the mobile frame stacks these instead of sharing a centre line. */
@media (min-width: 761px) {
  #about-page .about-lead {
    transform: translate(-50%, calc(-50% - 11px));
  }

  #about-page .about-logo3d {
    transform: translate(-50%, calc(-50% - 5px));
  }
}

/* Mobile — Figma node 1432:2282. The desktop frame puts AAEL/C24 on the
   centre line beside the copy; the mobile frame stacks everything instead:
   mark, AAEL, lead copy (48px in a 335px measure), C24, then the footer. */
@media (max-width: 760px) {
  #about-page .about-logo3d {
    width: min(96vw, 520px);
    height: min(96vw, 520px);
  }

  /* Centred on the screen like the desktop, not pinned below the mark. It used
     to start at a fixed 292 because AAEL and C24 sat above and below it; with
     those gone from the phone there is nothing to stack around, and the copy can
     sit in the middle where the mark turns over it. */
  #about-page .about-lead {
    width: 335px;
    max-width: calc(100vw - 40px);
    font-size: 48px;
  }

  /* 48 was never the size we wanted here — it was the largest that cleared C24
     at 634. That ceiling is gone, so the copy takes the size it was asked for,
     on the phones whose measure keeps it to a sane number of lines. */
  @media (min-width: 380px) {
    #about-page .about-lead {
      width: 350px;
      font-size: 56px;
    }
  }
}

/* When the ripple layer is up the canvas paints the page, so About itself goes
   transparent and its type is left invisible-but-present: the mark stays a live
   link and a screen reader still finds the copy. */
#fx-about-canvas {
  position: fixed;
  inset: 0;
  visibility: hidden;
  /* Under About, not beside it: on the same layer it came out on top (later in
     the document) and buried the metal mark. About goes transparent while this
     is up, so it shows through from below. */
  z-index: 9997;
  pointer-events: none;
}

:root.fx-about-ripple #about-page {
  background: transparent;
}
/* The type itself goes invisible — the raster in the canvas is what shows,
   rippled — but only the fill: `color` stays, and the rasteriser reads it from
   there. Without this both copies were on screen, the wave running through
   one over the still other. */
:root.fx-about-ripple #about-page p {
  -webkit-text-fill-color: transparent;
}

/* On a phone the side labels sit in the top corners on About as on the
   gallery (effects.css) — the mobile frame is one layout for both pages. */