/* ============================================================
   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:#9a9a9a; text-decoration:none; transition:color .2s;
}
.topbar nav a:hover, .topbar nav a.active{ color:var(--accent); }

@media (max-width:600px){
  .topbar{ padding:0 16px; height:52px; }
  .topbar nav{ gap:13px; }
  .topbar nav a{ font-size:10px; letter-spacing:.1em; }
  .topbar .brand img{ height:48px; transform:translateY(9px); }
}

/* ---- 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); }