/* ==========================================================
   BiLLO Studio — site styles
   Every value you are likely to tweak lives in :root below.
   Ask for changes in plain terms ("bar padding 13px not 15px")
   and they land here.
   ========================================================== */

/* --- Brand fonts: GT Cinetype (Grilli Type, web licence) ------------- */
@font-face {
  font-family: "GT Cinetype";
  src: url("../fonts/GT-Cinetype-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT Cinetype";
  src: url("../fonts/GT-Cinetype-Regular-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "GT Cinetype";
  src: url("../fonts/GT-Cinetype-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Type */
  --font-body: "GT Cinetype", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --size-bar: 14px;          /* point size of bar text */
  --leading-bar: 1.2;        /* 120% of point size */
  --tracking-bar: 0.02em;

  /* Colour */
  --colour-bg: #000000;
  --colour-text: #ffffff;
  --colour-bar-bg: rgba(0, 0, 0, 0.45);
  --video-dim: 0.25;         /* 0 = no darkening, 1 = black */

  /* Layout */
  --bar-pad-y: 15px;
  --bar-pad-x: 24px;
  --nav-gap: 32px;
  --logo-width: min(420px, 60vw);
}

/* --- Base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--colour-bg);
  color: var(--colour-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
p { margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Splash ------------------------------------------- */
.splash { overflow: hidden; }

.splash__video {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  background: #000 center / cover no-repeat;
}
.splash::before {               /* dimming layer over the video */
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, var(--video-dim));
}

.splash__centre {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.splash__logo { width: var(--logo-width); height: auto; display: block; }

.bar {
  position: fixed; left: 0; right: 0;
  padding: var(--bar-pad-y) var(--bar-pad-x);
  background: var(--colour-bar-bg);
  font-size: var(--size-bar);
  line-height: var(--leading-bar);
  letter-spacing: var(--tracking-bar);
  text-align: center;
}
.bar--top { top: 0; }
.bar--bottom { bottom: 0; }
.bar nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px var(--nav-gap); }

@media (max-width: 600px) {
  :root { --bar-pad-x: 16px; --nav-gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .splash__video { display: none; }
}