Give the model its own band on phones instead of hiding it behind the text

On a phone held upright the canvas filled the screen behind the lede at 34%
opacity, under a veil that was never less than 52% opaque, so the brain peaked
at about a sixth of its strength and sat directly behind the text. The whole
lower half of the first screen was empty.

In portrait below 1080px the canvas is now a band that starts just under the
last line of the lede and runs to the bottom of the screen, at full strength,
with no veil. Where that band begins depends on the phone's height, the width
the text wraps at, and whether the display face has loaded, so main.js measures
it rather than the stylesheet guessing, and re-measures on resize and once the
fonts are in. On very short screens the band keeps at least 240px and fades in
over its top fifth so the fiber emerges from the dark rather than crossing text.

As the reader scrolls, the band settles to a quiet trace by a third of a screen
down, since content is then passing over it. Delivering light raises it to 85%,
and 55% while recovering, so the control is never pressed at something that
cannot be seen.

The height is set explicitly rather than with top and bottom: a canvas is a
replaced element, so height: auto ignores bottom, takes the intrinsic aspect,
and the resize observer feeds that back into the drawing buffer.

Desktop and landscape are unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: swissclock

src/main.js

@@ -116,6 +116,59 @@ function trackSection () {
 
 addEventListener('scroll', trackSection, { passive: true })
 
+/* --- the model's presence on a phone ------------------------------------- */
+
+/**
+ * Held upright on a narrow screen, the model has the lower part of the first
+ * screen to itself and the stylesheet shows it at whatever --gl-presence says:
+ * full at the top of the page, and settled to a quiet trace by the time the
+ * reader has scrolled a third of a screen and content is arriving over it. On
+ * a wide screen the stylesheet never reads the property, so this is inert.
+ *
+ * Rounded to hundredths so a long scroll writes the property eighty times at
+ * most rather than once per event.
+ */
+const PRESENCE_FLOOR = 0.2
+const PRESENCE_SPAN = 0.35   // of a viewport height
+let presence = -1
+let viewportHeight = innerHeight
+
+function updatePresence () {
+  const t = Math.min(1, Math.max(0, scrollY / (viewportHeight * PRESENCE_SPAN)))
+  const next = Math.round((1 - t * (1 - PRESENCE_FLOOR)) * 100) / 100
+  if (next === presence) return
+  presence = next
+  document.documentElement.style.setProperty('--gl-presence', String(next))
+}
+
+addEventListener('scroll', updatePresence, { passive: true })
+updatePresence()
+
+/**
+ * Where the band begins: just under the last line of the lede, measured at the
+ * top of the page. On a very short screen that would leave the model too little
+ * room to read as a brain, so the band keeps at least MIN_BAND of height and
+ * accepts running under the lede's last line, where the stylesheet's fade at
+ * the top of the band keeps the two apart. A layout read, but only on resize
+ * and once the fonts land, never in the frame loop.
+ */
+const MIN_BAND = 240
+const ledeText = document.querySelector('#lede .col')
+
+function placeBand () {
+  if (!ledeText) return
+  const textBottom = ledeText.getBoundingClientRect().bottom + scrollY
+  const top = Math.round(Math.max(0, Math.min(textBottom + 8, innerHeight - MIN_BAND)))
+  const rootStyle = document.documentElement.style
+  rootStyle.setProperty('--band-top', `${top}px`)
+  rootStyle.setProperty('--band-h', `${Math.max(MIN_BAND, innerHeight - top)}px`)
+}
+
+placeBand()
+// The display face is taller than its fallback, so the lede's height is only
+// final once it has loaded.
+document.fonts?.ready.then(placeBand)
+
 addEventListener('pointermove', (event) => {
   scene.setPointer((event.clientX / innerWidth - 0.5) * 2, (event.clientY / innerHeight - 0.5) * 2)
 }, { passive: true })
@@ -141,6 +194,11 @@ new ResizeObserver(([entry]) => {
 }).observe(canvas)
 
 function resize () {
+  // iOS changes the viewport height as its toolbars come and go, and that
+  // moves where "a third of a screen" falls.
+  viewportHeight = innerHeight
+  updatePresence()
+  placeBand()
   rules.resize()
   trackSection()
 }

src/styles/layout.css

@@ -237,6 +237,53 @@ footer {
   h2 { max-width: none; }
 }
 
+/* A phone held upright has no side to put the model on, and behind the text it
+   can only ever be a ghost: under the veil above it peaked at about a sixth of
+   its strength. But the lower part of the first screen is empty, so here the
+   model gets that band to itself at full strength, and the lede moves up to
+   leave it clear. Landscape keeps the rules above; it is too short for a band. */
+@media (max-width: 1080px) and (orientation: portrait) {
+  /* The band starts where the lede ends. That point moves with the phone's
+     height, the width the text wraps at, and whether the fonts have arrived,
+     so main.js measures it into --band-top rather than this guessing at it.
+     54svh is only the first-paint stand-in. */
+  #gl {
+    top: var(--band-top, 54svh);
+    bottom: auto;
+    width: 100%;
+    /* Explicit, not top + bottom: a canvas is a replaced element, so with
+       height: auto it ignores `bottom` and takes its intrinsic aspect, which
+       the resize observer then feeds back into the drawing buffer. */
+    height: var(--band-h, 46svh);
+    /* Short, because it follows the scroll: a long ease trails the finger. */
+    transition: opacity 0.3s var(--ease);
+    /* The fiber runs up well past the brain, and on a short screen (Safari
+       with its toolbars showing) the top of the band reaches the last lines of
+       the lede. Fading the band in over its top fifth lets the fiber emerge
+       from the dark instead of drawing a line through the text; the brain
+       itself sits below the fade at every phone height. */
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%);
+    mask-image: linear-gradient(to bottom, transparent 0, #000 20%);
+  }
+
+  /* --gl-presence is written by main.js as the reader scrolls: 1 at the top of
+     the page, settling to a quiet trace once content is coming up over the
+     band. Delivering light raises it again, so the control is never pressed at
+     something the reader cannot see. */
+  #gl.is-loaded { opacity: var(--gl-presence, 1); }
+  html.is-lit #gl.is-loaded { opacity: max(var(--gl-presence, 1), 0.85); }
+  html.is-recovering #gl.is-loaded { opacity: max(var(--gl-presence, 1), 0.55); }
+
+  /* At the top of the page there is no text over the band to protect, and
+     further down the canvas opacity does the job the veil used to. */
+  .veil { display: none; }
+
+  #lede {
+    padding-top: max(108px, 14vh);
+    padding-top: max(108px, 14svh);
+  }
+}
+
 /* --- narrow ------------------------------------------------------------ */
 
 /* Below this the identity and the six section links cannot share one line