/*
 * Clone-only safety net. Loaded AFTER the source stylesheet.
 * Content must never be invisible when JavaScript does not run: the source hides
 * .reveal unconditionally and relies on its script to add .in. We scope the hidden
 * state to html.js so no-JS and pre-hydration renders stay readable and indexable.
 */
html:not(.js) .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/*
 * <picture> wrappers added by tools/wire-srcset.mjs must not affect layout.
 * Without this the wrapper introduces an inline line-box (pushing content down)
 * and breaks CSS that targets `img` as a direct child of its container.
 */
picture {
  display: contents;
}

/*
 * With `display: contents` the <source> children are promoted into the parent's
 * layout context, where they compute to `display: inline` and generate line boxes
 * (measured: +160px on the homepage at 768px). They must be suppressed explicitly.
 */
picture > source {
  display: none !important;
}

/*
 * Mobile menu button. The source stylesheet paints three `.burger span` bars
 * white, but the markup renders an inline <svg> of <line> elements instead, so
 * none of those rules applied and the icon inherited the header's dark ink.
 * Colour and size the SVG directly, and swap it to an X while the drawer is open.
 */
.burger {
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1080px) {
  .burger { display: flex; }
}

.burger svg {
  width: 22px;
  height: 22px;
  overflow: visible;
  stroke: currentColor;
}

.burger svg line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}

/* Line order in the markup is middle (y=12), top (y=6), bottom (y=18). */
body.drawer-open .burger svg line:nth-child(1) { opacity: 0; }
body.drawer-open .burger svg line:nth-child(2) { transform: translateY(6px) rotate(45deg); }
body.drawer-open .burger svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The drawer carries its own close button in the same corner. */
body.drawer-open .burger { opacity: 0; pointer-events: none; }