/* Update 15 (Oct 8, 2026; fade timings doubled the same day) — loaded after contact.css.
   1. Opening: the page starts as the bare grey wall; the cover photograph fades in first, then the name and menu,
      the caption, the rest of the page and the footer. Other pages fade in all together. (Driven by app.js:
      index.html sets html.preload, app.js swaps it for html.intro-cover or html.intro-page.)
   2. Home cover on computers and tablets: a large framed photograph on the grey wall, inside the page margins and
      shorter than the window, so the headline below shows there is more to see. Phones keep their own covers. */

/* ---------- 1. opening ---------- */
html.preload .site-head,
html.preload .site-foot,
html.preload #app > :not(.hero),
html.preload .hero .pane,
html.preload .hero .foot { opacity: 0; }

/* home: the photograph first … */
html.intro-cover .hero .pane { animation: fade 4.8s var(--ease) both; }
/* … then the name and menu, the caption, and the rest of the page */
html.intro-cover .site-head { animation: fade 3.2s var(--ease) 3s both; }
html.intro-cover .hero .foot { animation: fade 3.2s var(--ease) 3.6s both; }
html.intro-cover #app > :not(.hero),
html.intro-cover .site-foot { animation: fade 3.6s var(--ease) 4.2s both; }

/* any other page opened first: everything together */
html.intro-page .site-head,
html.intro-page #app,
html.intro-page .site-foot { animation: fade 2.8s var(--ease) both; }

/* ---------- 2. home cover on computers and tablets ---------- */
@media (min-width: 761px) and (min-height: 521px) {
  .hero { --foot: clamp(72px, 6vw, 84px); height: auto; min-height: 0; max-height: none; overflow: visible;
    padding-top: var(--head); background: transparent; color: var(--ink); }
  .hero::before, .hero::after { display: none; }
  .hero .pane { position: relative; inset: auto; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter));
    height: clamp(320px, 56vh, 780px); margin: 8px auto 0; overflow: hidden; background: var(--tone); border: 1px solid var(--frame); }
  .hero .foot { position: relative; left: auto; right: auto; bottom: auto; height: var(--foot); max-width: var(--max); margin: 0 auto;
    align-items: center; padding: 0 var(--gutter); }
  .hero-cap .g { opacity: 1; color: var(--mute); }
  .hero .bars button span { background: var(--line); }
  .hero .bars button span i { background: var(--frame); }
  .hero .play { color: var(--ink); }
  body.on-home .site-head.over { color: var(--ink); }
  /* once the page moves, the header gets its wall-coloured bar back so it never sits on the photograph */
  body.on-home .site-head.over.scrolled { background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  /* the headline sits closer under the cover, so its top shows on the first screen */
  .hero + .wrap .intro { padding-top: clamp(32px, 4vw, 56px); }
}
@supports (height: 100svh) {
  @media (min-width: 761px) and (min-height: 521px) { .hero .pane { height: clamp(320px, 56svh, 780px); } }
}

@media (prefers-reduced-motion: reduce) {
  html.intro-cover .hero .pane, html.intro-cover .site-head, html.intro-cover .hero .foot,
  html.intro-cover #app > :not(.hero), html.intro-cover .site-foot,
  html.intro-page .site-head, html.intro-page #app, html.intro-page .site-foot { animation: none; }
}