/* Site-wide frame after the Rietveld "Take a Walk on the Wild Side" layout:
   a fixed collage cut from the project imagery (four depth layers, slight mouse
   parallax), scattered nav labels, and text set on line-by-line white highlights. */

:root{
    --link:#1a4bff;
    --ink:#000;
    --fs:17px;
    --ul:.27em;               /* underline sits below the descenders (2px cut through y/p: 'Privacy' read 'Privacu') */
}
html,body{margin:0;padding:0}
body{
    background:#bfc2c4;
    font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:var(--fs); line-height:1.3; color:var(--ink);
    -webkit-font-smoothing:antialiased;
    transition:opacity .3s ease;
}
body.leaving{opacity:0}

/* background: the spun-chrome texture, cover-cropped and fixed */
#collage{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#bfc2c4}
#collage .layer{position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; will-change:transform}

/* nav: four labels on one line across the top, blue + underlined on tight white boxes */
#nav{position:fixed; top:10px; left:8px; right:8px; z-index:10; pointer-events:none;
    display:flex; justify-content:space-between; align-items:flex-start}
#nav a{
    pointer-events:auto; white-space:nowrap;
    background:#fff; color:var(--link); padding:0 2px .3em;
    text-decoration:underline; text-underline-offset:var(--ul); text-decoration-thickness:1px;
}
#nav a:hover{color:#0030d6}
#nav a[aria-current="page"]{color:var(--ink); text-decoration:none}

/* line-by-line white highlight: every wrapped line gets its own white strip */
.hl{background:#fff; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:.07em .14em}
a.hl, .hl a{color:var(--link); text-decoration:underline; text-underline-offset:var(--ul); text-decoration-thickness:1px}
a.hl{padding-bottom:.3em}

@media (max-width:600px){
    :root{--fs:15px}
}