/* H1 hero (Helper A): golden-ratio spiral, WB type + greyscale. Fills <section id="hero">.
   v2 (12 Oct 2026, Tim: white strips on a Mac): the hero is full-bleed dark, 100svh minus the 72 nav (min 560);
   the phi stage is fitted inside it: height = min(hero - 64, (100vw - 64) / phi, 1080), width = height * phi, centred.
   At 1440x900 this is exactly the old 1440x828 / 764 composition. Type scales with the stage (container units). */
@font-face{font-family:"Newsreader";src:url("../assets/fonts/Newsreader.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:block}
@font-face{font-family:"Libre Franklin";src:url("../assets/fonts/LibreFranklin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:block}

#hero.hero{position:relative;width:100%;max-width:none;height:max(560px,calc(100svh - 72px));min-height:0;margin:0;background:#0D0D0B;color:#F7F7F4;overflow:hidden;border-radius:0}
:root{--hh:max(560px,calc(100svh - 72px));--sh:min(calc(var(--hh) - 64px),calc((100vw - 64px) / 1.6180339887),1080px)}
/* judge-v2 fix 2: on the home page the nav's edges are the stage's edges (lockup on the phi rectangle's left line) */
.page-home .nav .wrap{max-width:calc(var(--sh) * 1.6180339887 + 64px)}
#hero .h1-stage{position:absolute;left:50%;top:50%;height:var(--sh);width:calc(var(--sh) * 1.6180339887);transform:translate(-50%,-50%);container-type:size}
#hero .h1-tile video{transition:opacity 1.2s cubic-bezier(.16,1,.3,1);opacity:0}
#hero .h1-tile video.on{opacity:1}
#hero .h1-tile video.off{opacity:0}
#hero .h1-tile{position:absolute;overflow:hidden;background:#0D0D0B;opacity:0;will-change:opacity}
#hero .h1-tile video,#hero .h1-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#hero .h1-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#hero .h1-lines path,#hero .h1-lines rect,#hero .h1-lines line{fill:none;stroke:#A3A3A0;stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision}
#hero .h1-copy{position:absolute;opacity:0}
/* judge r1 fix 1: each tile is cut by its own spiral quarter (rounded corner = the arc's outer corner) */
#hero .h1-t0{border-top-right-radius:100%}
#hero .h1-t1{border-bottom-right-radius:100%}
#hero .h1-t2{border-bottom-left-radius:100%}
#hero .h1-t3{border-top-left-radius:100%}
#hero .h1-tile video{filter:contrast(.92) brightness(.82)}
/* colour variant: seam and ground stay #0D0D0B; a touch less dimming so the natural colour does not go muddy */
#hero.hero[data-films="colour"]{background:#0D0D0B}
#hero[data-films="colour"] .h1-tile video{filter:contrast(.94) brightness(.86)}
#hero h1.h1-title{margin:0;font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:var(--t96,96px);line-height:1.05;letter-spacing:-.02em;font-variation-settings:"opsz" 72;font-optical-sizing:none;color:#F7F7F4}
#hero .h1-note{position:absolute;margin:0;font-family:"Libre Franklin",system-ui,sans-serif;font-weight:400;font-size:12px;line-height:1.5;letter-spacing:0;color:#6B6B68;opacity:0}
/* v2: the headline stays on the type scale (t96); on short stages (under 700 px high, e.g. 1280x800) it steps to t72 */
@container (max-height:700px){#hero h1.h1-title{font-size:var(--t72,72px)}}