/* Public Works — shared chrome (header, footer, reveal). Sizes are taken from the 1920px artboards. */
:root{
  --ink:#000; --paper:#fff;
  --nav:clamp(11px, .677vw, 13px);                 /* Chivo Medium 13px on the artboard, 11px on phones */
  --chivo:"Chivo","Anek Malayalam","Helvetica Neue",Arial,sans-serif;
  --hd-t:clamp(15px, 1.1vw, 21px);                 /* logo top */
  --hd-l:clamp(16px, 1.33vw, 25.5px);              /* WORKS left edge */
  --hd-r:clamp(14px, 1.2vw, 23px);                 /* ABOUT right edge */
  --ft-l:clamp(16px, 1.15vw, 22px);
  --ft-r:clamp(18px, 1.6vw, 30.5px);
  --ft-b:clamp(15px, 1.3vw, 25px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--chivo);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ---------- header ---------- */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  padding:var(--hd-t) max(var(--hd-r), env(safe-area-inset-right)) 0 max(var(--hd-l), env(safe-area-inset-left));
  color:var(--ink);transition:opacity .35s var(--ease);
}
.nav{font-family:var(--chivo);font-weight:500;font-size:var(--nav);line-height:1;letter-spacing:0;text-transform:uppercase;padding-top:calc(var(--nav) * .1)}
.nav-r{text-align:right}
.nav a:hover,.ft a:hover{opacity:.55}
.logo{display:block;color:inherit}
.logo:hover{opacity:.6}
.logo svg{display:block;height:clamp(26px, 2.84vw, 54.5px);width:auto;aspect-ratio:1818/912;fill:currentColor}
.hd a:focus-visible,.ft a:focus-visible,main a:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* ---------- footer bar ---------- */
.ft{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding:0 max(var(--ft-r), env(safe-area-inset-right)) max(var(--ft-b), env(safe-area-inset-bottom)) max(var(--ft-l), env(safe-area-inset-left));
  font-family:var(--chivo);font-weight:500;font-size:var(--nav);line-height:1;letter-spacing:0;text-transform:uppercase;
  color:var(--ink);transition:opacity .35s var(--ease);
}
.hd.away,.ft.away{opacity:0;pointer-events:none}   /* fade only; focus brings them back */

/* ---------- other pages: white + difference = black on white, white over black type (e.g. the About wordmark) ---------- */
body:not(.home) .hd,body:not(.home) .ft{color:#fff;mix-blend-mode:difference}

/* ---------- homepage: white over the reel, difference-blend once the page is under the bar ---------- */
body.home .hd,body.home .ft{color:#fff}
body.home .hd.blend,body.home .ft.blend{mix-blend-mode:difference}
body.home .hd:not(.blend) .nav,body.home .ft:not(.blend){text-shadow:0 1px 10px rgba(0,0,0,.45)}
body.home .hd:not(.blend) .logo svg{filter:drop-shadow(0 1px 10px rgba(0,0,0,.35))}

/* ---------- reveal on scroll (fade only) ---------- */
.reveal{opacity:0;transition:opacity 1s var(--ease);transition-delay:var(--d, 0s)}
.reveal.in{opacity:1}

@media (max-width:700px){
  .logo svg{height:26px}
  .nav{padding-top:0;margin-top:-2px}            /* phone artboard: label caps align with the logo top */
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transition:none}
  .hd,.ft{transition:none}
}