/* The holding page, on top of style.css.
 *
 * Its own file rather than lines added to style.css: the launch homepage
 * comes back one day, and when it does this file stops being linked and
 * nothing else has to be unpicked. Same reason the page itself is parked
 * rather than edited away.
 */

/* BLACK, not the site's --page (#0A0A0B). The logo is a raster with a black
 * background baked in - measured across 420 pixels of its edges, the
 * average is (0.08, 0.03, 0.03) and no channel anywhere exceeds 1 - so on
 * #0A0A0B its rectangle reads as a faint box around the artwork. The brief
 * asks for the page to match the picture rather than for a frame to be
 * drawn round it, and this is that.
 *
 * 100svh as well as 100vh: on a phone 100vh is the viewport WITHOUT the
 * address bar, so a centred composition sits a bar's height too low and
 * the footer falls off the bottom until the user scrolls. svh is the
 * small viewport - the one that is actually visible - and the vh line
 * before it is what a browser that has never heard of svh uses.
 */
body.holding { background: #000; min-height: 100vh; min-height: 100svh;
               display: flex; flex-direction: column; }

.holding main { flex: 1; display: flex; flex-direction: column;
                align-items: center; justify-content: center;
                gap: 30px; padding: 56px 24px; text-align: center; }

/* min() rather than a max-width plus a percentage: at 320px the padding
 * above leaves 272px, and the logo takes exactly that instead of forcing a
 * horizontal scrollbar. height:auto keeps the proportions whatever the
 * width resolves to - the width/height attributes in the markup are there
 * to reserve the space, not to set the shape. */
.holding .mark { width: min(420px, 100%); height: auto; }

.holding h1 { font-size: clamp(21px, 4.5vw, 30px); font-weight: 800;
              letter-spacing: -0.01em; color: var(--ink); }

/* The footer is the only other thing on the page, so it sits quieter than
 * it does elsewhere and centres with the rest of the composition. */
.holding footer { padding: 0 0 44px; }
.holding footer .row { justify-content: center; gap: 10px 22px; }