/* Base layer — the document itself. Element defaults only, no components. */

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

/* The canvas fill — and on iOS, the strip behind the bottom toolbar.
   That strip is NOT page content: measured on a real iPhone, the backdrop already
   overshoots the visible area by 40px and still does not paint there, because iOS
   fills the region from this colour instead. So the bottom edge is fixed here, not
   by sizing #backdrop.
   The photograph's own bottom edge does not match this yet — measured, it ends
   around #6f5553 against a sky of #5eaacc. That fade still has to be built into
   the picture; see the note on #backdrop below. */
html{background:var(--surface-sky)}

/* Rechtsseiten tragen das Foto nicht — dort ist der Grund durchgehend Papier,
   bis in die iOS-Streifen hinein. Klassenspezifität schlägt die Regel darüber. */
html[data-page="legal"]{background:var(--surface-page)}

/* The photograph is stacked at z-index:0 and the page above it, rather than the
   photograph at -1 and the page at auto. Negative-stacked content appears not to
   reach the status-bar area on iOS: the diagnostic page, whose top panel was
   ordinarily stacked, painted there, while this backdrop at -1 did not and left the
   root colour showing. body must still stay transparent either way — giving it a
   background hides the photograph completely. */
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--type-body);
  font-weight:var(--weight-regular);
  line-height:var(--leading-body);
  letter-spacing:var(--track-body);
  color:var(--text-body);
  background:transparent;
}

/* A position:fixed <img> behind the content, not background-attachment:fixed — iOS
   ignores that outright.

   Do not spend another day trying to make this reach the iOS status-bar band or the
   strip behind the bottom toolbar. It cannot be done — not "has not been done yet".
   Three requirements, and no two of them leave room for the third:
     - to reach those bands, the picture must be the SCROLLING element's background;
     - to stand still, a background must be repositioned every frame, because iOS
       refuses background-attachment:fixed;
     - to scroll smoothly, nothing may run every frame.
   Drifting instead of standing still does not help: it is the same per-frame work and
   the same stutter. Scrolling inside a container removes the JavaScript, but then the
   scroller is main rather than the document, the bands fall back to the root colour,
   and the address bar stops retracting.
   Measured and failed, each in its own commit: inset:0, 100lvh, a 120px overscan,
   z-index -1 and 0, position:sticky, viewport-fit=cover, the photograph on html, a
   blurred stretched copy of it, opaque tint colours under the photograph, a
   JS-pinned and a JS-drifted body background, and the inner scroller.
   So the bands stay sky-coloured, and the join is hidden in the picture itself: the
   photograph is authored to end in #5daacd. Its top row already does, to within one
   value of green.
   Two iOS traps, one layer:
   1. background-attachment:fixed does nothing, hence this element.
   2. inset:0 would size it to the LAYOUT viewport, which iOS keeps at the height
      with the browser bars extended. When they retract, the visible area grows,
      the layer does not, and the strip it leaves falls through to the sky fill on
      html — a blue band under every see-through band. So it is anchored at the top
      and given the LARGE viewport height instead. Do not put inset:0 back.
      That was not the blue strip's cause — see the html rule above — but it is
      still correct, and it stops the photograph rescaling as the bars slide.
   lvh over dvh on purpose: dvh recomputes while the bars slide, which would visibly
   rescale the photograph on every scroll. lvh is stable and always tall enough; the
   overhang below the fold is cropped by cover and costs nothing. */
#backdrop{
  position:fixed;
  top:0;
  left:0;
  right:0;
  display:block;   /* an <img> is inline by nature */
  width:100%;
  height:100vh;    /* fallback — on iOS Safari vh already means the large viewport */
  height:100lvh;
  z-index:0;
  object-fit:cover;
  object-position:center top;
  pointer-events:none;
}

/* On a phone the photograph is hung from the bottom rather than fitted to the screen.
   It runs --backdrop-drop past the fold, so the edge where it stops is never on screen,
   and it dissolves into the sky over its top --backdrop-fade, so the other edge is not
   visible either. Both edges gone; the picture simply emerges from the blue.
   It sits behind the content, so the fade happens under the bands, not over them.
   Phones only — a desktop browser has neither the toolbar strip nor the problem.
   Breakpoints are literal: a media query cannot read a custom property. */
@media (max-width:647px){
  #backdrop{
    height:calc(100vh + var(--backdrop-drop));
    height:calc(100lvh + var(--backdrop-drop));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,var(--mask-keep) var(--backdrop-fade));
    mask-image:linear-gradient(to bottom,transparent 0,var(--mask-keep) var(--backdrop-fade));
  }
}


a{color:var(--text-accent)}
a:hover{color:var(--text-body)}

/* h1 names the page and is the only one of its kind; the wordmark carries it
   visually, so it is here for the document outline rather than for the eye. */
h1,h2,h3{
  margin:0;
  font-family:var(--font-hand);
  font-weight:var(--weight-regular);
  line-height:var(--leading-hand);
  letter-spacing:var(--track-hand);
  text-align:center;
}
/* h2 opens a band, h3 opens a block inside one. They used to be set at the same
   size, which left the two levels indistinguishable and the outline decorative. */
h2{font-size:var(--type-hand-section)}
h3{font-size:var(--type-hand-block)}

[hidden]{display:none !important}

/* Two rings, not one — see --focus-ring-halo in tokens/colors.css. outline-offset
   opens a gap the width of the ring; the box-shadow fills exactly that gap, so the
   two read as concentric rings rather than a ring floating off the element. */
:focus-visible{
  outline:var(--focus-ring-width) solid var(--focus-ring);
  outline-offset:var(--focus-ring-width);
  box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-halo);
}

@keyframes kpspin{to{transform:rotate(360deg)}}

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