/* ============================================================
   Shared site chrome — ONE place for the top nav bar.
   Linked by every page (index, work, showreel, about, contact).
   ============================================================ */
:root{ --accent:#cdf564; }
/* image protection — block drag-to-save, long-press save (mobile), text selection on images */
img{ -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; user-drag:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }

/* solid black top bar so nav never overlaps the grid footage */
.topbar{
  position:fixed; top:0; left:0; right:0; height:58px; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 30px; background:#000;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar .brand{ display:flex; align-items:center; text-decoration:none; position:relative; z-index:2; }
.topbar .brand img{ height:62px; width:auto; display:block; transform:translateY(12px); }   /* 2.2x — rebelliously breaks below the bar's bottom edge */

/* beats any page's old `nav{position:fixed}` rule via specificity */
.topbar nav{ position:static; top:auto; right:auto; display:flex; gap:24px; }
.topbar nav a{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:#e8e8e8; text-decoration:none; transition:color .2s;   /* gauntlet fix #3, 2026-08-06: was #9a9a9a (~60% grey) — four of five nav items read as DISABLED next to the lime active item. The lime alone carries the active state. */
  /* concept-maker, 2026-09-02: nav had no font-family of its own, so it silently
     inherited whatever font each page's body set — system stack on 4 pages by
     accident, "Space Grotesk" on Contact by accident, which is what made the 400px
     step fit four pages and fail the fifth by ~1px. Chrome should render identically
     on every page regardless of that page's body typeface, present or future. */
  /* concept-maker, 2026-09-03: "Inter" named here was never shipped as a webfont on
     this site (only Archivo + Space Grotesk load) — it only resolves for a visitor
     who happens to have it installed locally, and measured wider (232.30px) than
     the true last-resort fallback stage it sat in front of. A named font in a stack
     the site never ships is a bet, not a fallback. Replaced with Roboto, which is
     Android/ChromeOS's actual default sans (measured 219.78px, fits) instead of a
     font that only helps designers who happen to have it installed. */
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
}
.topbar nav a:hover, .topbar nav a.active{ color:var(--accent); }

@media (max-width:600px){
  .topbar{ padding:0 16px; height:52px; }
  .topbar nav{ gap:8px; }   /* concept-maker, 2026-09-04: was 13px - the 401-600 band was never tuned against its OWN worst case (narrowest point of the band, 401px), only against 600px where there is more room. Measured live at 401px: even the shipped fonts failed there (Segoe UI -1.83px, Roboto -7px), and the true fallback stage (generic sans-serif/Arial) failed by -25.89px. This is the same defect class as the 400px step, reported 4 shifts running by the critic as "surviving fixes aimed at its neighbours" - fixed here at its own worst point, not borrowed from a neighbouring band. */
  .topbar nav a{ font-size:10px; letter-spacing:.04em; }   /* concept-maker, 2026-09-04: was .1em - see gap note above. Measured worst case (Verdana, generic sans-serif, Arial, -apple-system, plus shipped Segoe UI/Roboto) at viewport 401px against 288.69px available: worst is now +11.58px of real headroom (Verdana), not a bare fit - every case checked fits with margin. Font-size held at 10px, unlike the 400px step's drop to 9px, because this band has more room to spend on legibility once the gap and tracking are doing their share. */
  .topbar .brand img{ height:48px; transform:translateY(9px); }
}
/* concept-maker, 2026-09-01: cause was the 600px step alone — at 320-399px the nav's
   own content (5 links + gaps) measured 276px against 208px of real room after the
   logo, so it overflowed the FIXED topbar to the right. A fixed element's overflow
   never counts toward the page's scrollWidth, so nothing ever revealed CONTACT — not
   even a swipe. Verified live: "AI Gallery" wrapped to two lines at 390px and CONTACT
   sat 52px past the 320px edge. This step shrinks nav to fit with room to spare
   (measured navRight 308 vs a 320 viewport) rather than guessing a number. */
@media (max-width:400px){
  .topbar{ padding:0 12px; }
  .topbar nav{ gap:4px; }   /* concept-maker, 2026-09-03: was 7px — the 2026-09-02 fix gave 13.95px of headroom under the font that actually resolves on Windows/Mac, but the stack's true last-resort stage (generic sans-serif / Arial, when a visitor's browser can't match -apple-system, Segoe UI or Roboto) still measured 236.80px against 229.08px available: -7.72px, still wrapping. Tightening the gap by 3px per join (4 joins = 12px) buys 4.28px of real headroom even under that worst case, not a bare fit — verified against the critic's own unclamped-clone measurement method (seam_natural.js). */
  .topbar nav a{ font-size:9px; letter-spacing:.01em; }   /* concept-maker, 2026-09-02: was .04em/8px gap — fit exactly one page's font at 320px with ~1px to spare, which is a fit not headroom; this leaves real room regardless of which font a page's chrome resolves to. */
  .topbar .brand img{ height:40px; transform:translateY(8px); }
}

/* ---- voting controls on grid tiles ---- */
.vote-ctl{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; opacity:0; pointer-events:none;
  transition:opacity .18s; z-index:6;
}
.tile:hover .vote-ctl{ opacity:1; pointer-events:auto; }
.vbtn{
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.55);
  color:#fff; font-size:15px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, background .15s, border-color .15s;
}
.vbtn:hover{ transform:scale(1.18); background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55); }
/* white monochrome thumbs — match the "!" text colour */
.ic{ display:inline-block; filter:brightness(0) invert(1); }
/* once voted, lock the control and highlight the chosen side */
.vote-ctl.voted .vbtn{ opacity:.32; pointer-events:none; transform:none; }
.vote-ctl.voted .vbtn.chosen{ opacity:1; }
.vote-ctl.voted .vbtn.up.chosen, .vote-ctl.voted .vbtn.down.chosen{ background:rgba(255,255,255,.22); border-color:#fff; }
.vbtn svg{ width:16px; height:16px; display:block; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.vbtn.flag:hover{ color:#e0563b; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55); }