/* ------------------------------------------------------------------ *
 *  base.css — reset + the shared shell
 * ------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--w-reg);
  line-height: 1.7;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* the whole site is lower-case; capitals in the source still render lower  */
  text-transform: lowercase;
}

/* opt back out of lower-case where a capital is meant (proper nouns you type
   into captions, the odd Roman numeral): wrap in <span class="cap"> */
.cap { text-transform: none; }

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}
/* #page is a landmark nav.js focuses after swapping in a new page — purely
   so a keyboard user's focus and a screen reader's announcement land on
   the new content, the way a real page load would. It is not a control,
   so it never gets the ring above (the black box that used to appear
   around a page's title was this rule catching a heading nav.js had
   focused instead of a landmark). Real interactive elements — links,
   buttons — still get the ring above as normal. */
#page:focus { outline: none; }

em, i { font-style: italic; }

/* the only fixed chrome: name + two quiet links, bottom-left */
.wordmark {
  position: fixed;
  left: var(--pad-edge);
  bottom: var(--pad-edge);
  z-index: 40;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-ghost);          /* the colour of the · separators */
}
.wordmark a {
  color: var(--ink-faint);
  transition: color var(--t-mid) var(--ease);
}
.wordmark a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* — frosted glass, behind everything ——————————————————————————— *
 * A real sheet of rippled glass: warped ridge noise lit with diffuse and
 * specular over a bed of slate/blue colour, drawn once into a canvas by
 * assets/js/glass.js. Not a blur — an actual surface with relief, so it
 * catches light along the creases.
 *
 * A radial mask takes it from nothing at the cover image out to full
 * strength by roughly where the three words sit. Words and pictures are
 * separate layers stacked above it and are never touched by it.
 *
 * Two knobs: --glass-strength is how far the sheet covers the paper
 * (1 = opaque), and the mask's 82% stop is where it hits full. */
/* Stacking, bottom to top: outer tiles (1) — glass (3) — cover (5) —
   words (10). The glass sits *over* the tiles so it veils them, more the
   further out they are, and *under* the cover and the words so those two
   stay clear. That split only works because .preview and .field are left
   at z-index auto: if either took a z-index it would open a stacking
   context and trap the cover underneath the glass with its siblings. */
.glass {
  position: fixed;
  inset: 0;
  z-index: 0;   /* behind page content; the landing raises it, see home.css */
  pointer-events: none;
  overflow: hidden;
  --fx: 62%;
  --fy: 50%;
  --glass-strength: 1;
}
.glass--full .glass__canvas { -webkit-mask-image: none; mask-image: none; }
.glass__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;                           /* until the render lands */
  transition: opacity 1.6s var(--ease-soft);
  /* Clear across the cover, then a continuous climb out to full — every
     step in between exists, so a frame two rings out is veiled more than
     one ring out, not simply "blurred" like everything else. The extra
     stops are there to shape the curve, not to make it stepped. */
  -webkit-mask-image: radial-gradient(circle clamp(26rem, 52vmax, 60rem) at var(--fx) var(--fy),
      transparent 0%, transparent 14%, rgba(0, 0, 0, 0.16) 26%,
      rgba(0, 0, 0, 0.38) 40%, rgba(0, 0, 0, 0.62) 54%,
      rgba(0, 0, 0, 0.82) 68%, rgba(0, 0, 0, 0.94) 80%, #000 92%);
  mask-image: radial-gradient(circle clamp(26rem, 52vmax, 60rem) at var(--fx) var(--fy),
      transparent 0%, transparent 14%, rgba(0, 0, 0, 0.16) 26%,
      rgba(0, 0, 0, 0.38) 40%, rgba(0, 0, 0, 0.62) 54%,
      rgba(0, 0, 0, 0.82) 68%, rgba(0, 0, 0, 0.94) 80%, #000 92%);
}
.glass.is-lit .glass__canvas { opacity: var(--glass-strength); }

/* On a phone the preview sits right under the three words (home.css
   tightens that gap on purpose), and this mask's radius is sized for a
   desktop layout where the cover is far away from them — at a narrow
   width the same radius reaches past the preview and into the words,
   clearing the glass (and the warm paper under it) right behind text
   that's styled pale for a dark sheet, so it goes unreadable. Simplest
   fix: no hole at all under 820px — the glass sits at full, even strength
   there, the same way it already does on every page but this one. */
@media (max-width: 820px) {
  .glass__canvas {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* --- type on the glass ------------------------------------------- *
 * The sheet is deep teal, so ink on it is unreadable. .glass-lit goes on
 * <html> once the sheet has actually painted, and only then does the type
 * turn to paper. Until then — and if the canvas never renders at all —
 * the page is warm paper and the type stays ink, which is the state it
 * has to survive in. */
.wordmark, .wordmark a { transition: color var(--t-mid) var(--ease); }
.glass-lit .wordmark { color: rgba(244, 241, 234, 0.55); }
.glass-lit .wordmark a { color: rgba(244, 241, 234, 0.85); }
.glass-lit .wordmark a:hover { color: var(--paper); }