/* Downloads wall (owner 2026-09-19, D12): back link, "/ Downloads" crumb and the "Free Downloads." title are black aerosol
   paint on the magenta wall instead of boxed labels. The real text stays in the DOM (accessible name, translation, fallback);
   the artwork replaces it visually. The scroll hint is gone; its skip action stays reachable by keyboard. v20260919a */
#downloads .wall-spray { position:relative; }
#downloads .wall-spray__text { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#downloads .wall-spray__art { display:block; width:auto; max-width:none; height:100%; pointer-events:none; user-select:none; -webkit-user-drag:none; }
#downloads .wall-spray__art--de { display:none; }
html:lang(de) #downloads .wall-spray__art--en { display:none; }
html:lang(de) #downloads .wall-spray__art--de { display:block; }

/* Route chrome: no box, the paint is the button. The anchor keeps a 44 px target and the white focus ring. */
#downloads .downloads-entry .route-header > a.wall-spray,
#downloads .downloads-entry .route-header > p.wall-spray { display:flex; align-items:center; flex:none; min-width:0; height:auto; min-height:44px; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; line-height:0; }
#downloads .downloads-entry .route-header > .wall-spray .wall-spray__art { height:var(--spray-h); }
#downloads .downloads-entry .route-header > a.wall-spray { --spray-h:68px; transition:translate .16s cubic-bezier(.2,.7,.1,1); }
#downloads .downloads-entry .route-header > p.wall-spray { --spray-h:60px; }
#downloads .downloads-entry .route-header > a.wall-spray::before,
#downloads .downloads-entry .route-header > a.wall-spray::after { content:none; }
#downloads .downloads-entry .route-header > a.wall-spray:is(:hover,:focus-visible) { translate:-5px 0; border:0; box-shadow:none; }
#downloads .downloads-entry .route-header > a.wall-spray:focus-visible { outline:2px solid #fff; outline-offset:4px; }

/* Title: the lettering is trimmed to its ink; negative margins tuck the overspray and drip room so the intro keeps its rhythm. */
#downloads #downloads-title.wall-spray { display:block; width:clamp(330px,44vw,700px); max-width:100%; height:auto; margin:-10px 0 -30px -14px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; line-height:0; white-space:normal; }
#downloads #downloads-title.wall-spray .wall-spray__art { width:100%; height:auto; }

/* If the artwork cannot load the words come back as plain black display type on the wall. */
#downloads .wall-spray.is-unavailable .wall-spray__art { display:none; }
#downloads .wall-spray.is-unavailable .wall-spray__text { position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; color:#060305; line-height:1; }
#downloads .wall-spray.is-unavailable .wall-spray__text span { color:inherit; }
/* The title's pink comes from a two-id rule (#downloads #downloads-title > span); pink on the magenta wall would vanish. */
#downloads #downloads-title.wall-spray.is-unavailable .wall-spray__text,
#downloads #downloads-title.wall-spray.is-unavailable .wall-spray__text span { color:#060305; }
#downloads .downloads-entry .route-header > .wall-spray.is-unavailable { display:inline-flex; align-items:center; height:auto; line-height:1; }
#downloads #downloads-title.wall-spray.is-unavailable { width:fit-content; margin:0; line-height:.94; }

/* Scroll hint removed from view. The skip action ("Show all downloads") stays in the tab order and appears when focused. */
#downloads .downloads-scroll-cue { display:none; }
#downloads .downloads-motion-controls .downloads-replay { position:absolute; width:1px; height:1px; min-height:0; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#downloads .downloads-motion-controls .downloads-replay:focus-visible { position:static; width:auto; height:auto; min-height:44px; margin:0; padding:10px 18px; overflow:visible; clip-path:none; border-radius:4px; background:#060305; color:#fff; text-decoration:none; outline:2px solid #fff; outline-offset:4px; }

@media (max-width:1199px), (any-pointer:coarse) and (max-width:1366px) {
  #downloads .downloads-entry .route-header > a.wall-spray { --spray-h:60px; }
  #downloads .downloads-entry .route-header > p.wall-spray { --spray-h:54px; }
  /* The hint no longer takes room below the entry: same fade and spacing as the state without controls. */
  #downloads .downloads-motion-controls { position:absolute; left:var(--touch-gutter,18px); bottom:14px; min-height:0; margin:0; }
  #downloads .downloads-entry::after { height:80px; }
}
@media (max-width:600px), (max-height:500px) and (max-width:1000px) {
  #downloads .downloads-entry .route-header > a.wall-spray { --spray-h:48px; }
  #downloads .downloads-entry .route-header > p.wall-spray { --spray-h:44px; }
  #downloads #downloads-title.wall-spray { width:100%; margin:-4px 0 -12px; }
}
/* Low desktop windows set the white graffiti tighter: keep the title's drips just above it. */
@media (min-width:1200px) and (max-height:760px) {
  #downloads #downloads-title.wall-spray { margin-bottom:-20px; }
}
/* Narrow phones: the menu button takes 55 px of the header, and the German back lettering is the longest pair. */
@media (max-width:400px) {
  #downloads .downloads-entry .route-header > a.wall-spray { --spray-h:40px; }
  #downloads .downloads-entry .route-header > p.wall-spray { --spray-h:38px; }
}
@media (prefers-reduced-motion:reduce) {
  #downloads .downloads-entry .route-header > a.wall-spray { transition:none; }
  #downloads .downloads-entry .route-header > a.wall-spray:is(:hover,:focus-visible) { translate:none; }
}