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

:root {
  color-scheme: light dark;
  --gutter: clamp(20px, 5vw, 64px);
  /* Everything below row 1: the colophon's own line, its padding-bottom (a
     gutter) and the iPhone's home indicator. Row 1 is padded by exactly this
     at the top, so it is symmetric about the middle of the window and the two
     rows can never collide. */
  --foot: calc(13px + var(--gutter) + env(safe-area-inset-bottom, 0px));
}

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(min-content, 1fr) auto;
  align-items: center;
  justify-items: center;
  /* Top padding equals --foot exactly. It used to be --foot PLUS a gutter,
     which quietly broke the symmetry it was there to create: --foot already
     includes the gutter (the colophon's own padding-bottom), so the second
     one was counted twice and row 1 sat ~32px below the middle of the window
     at desktop size. That is the low-looking title, and no amount of lift
     belongs on top of a miscount. */
  padding: var(--foot) var(--gutter) 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* The copyright. 12px, not the 9px it was — 9px is under the size most people
   read comfortably, and it carries a real link. */
.colophon {
  grid-row: 2;
  margin: 0;
  padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  font-size: 12px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--faint);
  text-align: center;
  text-wrap: balance;
}
/* No adjustment on the ©, deliberately. Measured off rendered pixels in each
   face of the stack on macOS: at its natural size, sitting on the baseline,
   its ink centre is within 0.007em of the figures' in Helvetica Neue (0.007
   in Arial, 0.017 in Helvetica) and its height is within 4% of theirs. The
   1.25em/-0.18em it used to carry was inherited from a page that set the
   glyph in Verdana beside Helvetica text, where it really was small and
   raised — here it only made the mark a third taller than the figures and
   pushed it a quarter of an em too low. Both spans share a font-size, so
   they share a line box and the glyph cannot move the layout. */

a { color: inherit; }

/* The rule grows from the left on the way in and leaves to the right, so it
   reads as passing through the address rather than retracting the way it came. */
.link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--link);
  transition: color .22s ease;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.18em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.link:not(:hover):not(:focus-visible)::after { transform-origin: right; }
.link:hover, .link:focus-visible { color: var(--ink); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .link, .link::after { transition: none; }
  .link::after { transform: scaleX(1); }
}

/* It used to be media="screen", so printing got raw unstyled HTML. */
@media print {
  :root { --bg: #fff; --ink: #000; --faint: #444; --link: #000; }
  body { min-height: auto; display: block; padding: 4rem; }
  .link::after { transform: scaleX(1); }
}

:root {
  --bg: #fbfbfa; --ink: #16161a; --faint: #727276; --link: #4a4a52;
  /* 0.60em per character, a shade above the widest measured across all 45
     live names plus the stylised titles (0.577, "See You, Bye!"). */
  --adv: .60;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0e0e10; --ink: #f2f2ef; --faint: #7c7c80; --link: #a6a6b0;
  }
}
[data-theme="beige"] {
  --bg: #d9ccae; --ink: #3f3625; --faint: #61543b; --link: #6a5c40;
}

/* Three rows here, not two: the meta line sits between the name and the
   colophon. Both were row 2 at first, and because a grid cell holds one item,
   auto-placement put the colophon in a second implicit COLUMN beside the
   stage — three pixels past the viewport edge, which read as a stray
   horizontal scrollbar rather than as a layout fault. */
body { grid-template-rows: minmax(min-content, 1fr) auto auto; }
.colophon { grid-row: 3; }
:root {
  --foot: calc(13px + 18.75px + .85rem + var(--gutter) + env(safe-area-inset-bottom, 0px));
  /* Optical centre, not geometric. A mass centred by measurement reads as
     sitting low, because the eye takes the middle of a frame to be a little
     above its true middle. 4vh of lift, floored and capped so a short window
     doesn't lose it and a tall one doesn't overdo it. */
  --rise: clamp(10px, 4vh, 44px);
}

/* The row is centred, so a bottom margin lifts its content by HALF the
   margin — hence the doubling. Done with margin rather than a transform so
   the lift is real layout: it widens the gap to the colophon instead of
   sliding the name over it, and the top padding (which is what keeps the
   name clear of the window edge) is left untouched. */
.stage { grid-row: 1; width: 100%; text-align: center; margin-bottom: calc(var(--rise) * 2); }

/* The name is sized from its own character count, which the Caddy template
   emits as --len. Width available, divided by (characters x advance), capped
   so a nine-character name doesn't become a billboard. This CANNOT overflow:
   the fit is arithmetic, not a guess at a breakpoint. */
.name {
  margin: 0;
  font-size: min(8.5rem, calc((100vw - var(--gutter) * 2) / (var(--len) * var(--adv))));
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: .95;
  color: var(--ink);
  white-space: nowrap;
}

/* The address, alone at the foot. No tagline: the domain is the message, and
   "Coming Soon" under it was saying the same thing twice. */
.meta {
  grid-row: 2;
  margin: 0 0 .85rem;
  display: flex; justify-content: center;
  font-size: clamp(16.25px, 1.75vw, 18.75px);
  line-height: 1;
  color: var(--faint);
}