/* mosescampbell.com — Aether.
   The concept-agnostic base and the Aether stylesheet, merged into one file at
   cutover: with three concepts it was worth keeping them apart, with one it is
   just an extra request on a page whose whole argument is that it is fast. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  /* A range, so this works whether Google served a variable file or a static
     one — a static face is simply used as-is across the range, which is what
     we want anyway since the design uses a single weight. */
  font-weight: 300 700;
  font-style: normal;
  font-display: block;  /* not swap: a swap on a one-word page is a jump cut */
  unicode-range: U+0000-00FF;
}

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

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;         /* exactly one screen, never scrolls */
  overscroll-behavior: none;
}

body {
  /* Also the WebGL fallback. If the shader never runs — no WebGL, a blocked
     context, a driver that refuses — the page is this gradient with the name
     on it, which is a perfectly respectable page. */
  background: radial-gradient(120% 90% at 50% 55%, #0b1f22 0%, #04070a 62%);
  color: #d9cfc0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- the shader ground -------------------------------------------------- */

#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* --- the name ----------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 1;
  min-height: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6vmin;
  pointer-events: none;     /* the whole surface should feel like one field */
}

.name {
  position: relative;
  margin: 0;
  font-family: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
  font-weight: 300;

  /* Sized so one line always fits, rather than by eye.
     Measured in this face: "Moses Campbell" is 6.423em of glyph advance over
     14 characters, so at 0.2em tracking the ink is 6.423 + 13(0.2) = 9.02em.
     The stage's 6vmin padding is worst-case in portrait, where vmin resolves
     against the WIDTH, leaving 88vw. 9.2vw x 9.02em = 83vw, inside that with
     room to spare — and on landscape, where vmin follows the height, the
     padding is smaller still. The previous 10.5vw needed 95vw of room and so
     overflowed at every size the vw term actually drove; it only looked fine
     on a desktop because there the cap took over first. */
  font-size: min(9.2vw, 8.5rem);
  line-height: 1.05;
  letter-spacing: 0.2em;
  text-align: center;
  white-space: nowrap;

  /* letter-spacing puts a trailing space after the LAST character too, so the
     box is 0.2em wider than the ink and centring the box leaves the ink half
     that off to the left. A negative right margin of exactly the tracking
     cancels it. This replaces a text-indent, which was both the wrong amount
     (it needs to be half the tracking, not all of it, so it over-corrected the
     other way) and only ever applies to the first line — no use once the name
     wraps. */
  margin-right: -0.2em;

  color: #f2ece2;
  text-shadow:
    0 0 1px rgba(10, 20, 22, 0.55),
    0 0 60px rgba(240, 235, 225, 0.18);
}

/* Contrast insurance. The plumes behind the name peak near bone-white, and
   bone-on-bone is unreadable. A soft dark scrim sits between the canvas and
   the text — wide and very diffuse, so it never reads as a shape, but enough
   to keep the name legible at the worst frame the shader can produce. */
.name::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  height: 460%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(3, 7, 10, 0.72), rgba(3, 7, 10, 0) 72%);
  z-index: -1;
  pointer-events: none;
}

/* Phones: two lines.
   A single line here would have to drop to about 34px to fit, which is not a
   hero — it is a caption. Breaking at the space holds a real size: "Campbell"
   is the longer line at 3.801em advance over 8 characters, so at 0.14em
   tracking its ink is 4.78em, and 15vw x 4.78 = 72vw against the 88vw
   available. The breakpoint is a round 30rem rather than the width of any
   particular handset; every phone through a 430px Pro Max lands inside it. */
@media (max-width: 30rem) {
  .name {
    white-space: normal;
    font-size: min(15vw, 4.5rem);
    letter-spacing: 0.14em;
    margin-right: -0.14em;   /* must track the letter-spacing above */
    line-height: 1.18;
  }
}