/* ==========================================================================
   Shared site chrome — dark concrete + fluted-glass-plate + taped-note
   language. Every page (index, about, works, contact) loads this file and
   only adds its own "stage" layout on top.
   ========================================================================== */

:root {
  --bg:        #080809;
  --text:      #ffffff;
  --sub:       #a5aab0;
  --meta:      #a0a0a5;
  --label:     #606067;
  --accent:    #00d4ff;
  --flute:     22px;          /* ribbed-plastic reed pitch */

  --paper:     #e8e3d6;       /* printed-note card colour — no glass over these */
  --paper-ink: #2a2a27;
  --paper-sub: #6b6a62;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--bg);
  color: var(--text);
}

/* ================= background — layered concrete + top/bottom fade ================= */
.bg { position: fixed; inset: 0; z-index: -3; background: var(--bg); }
.bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.bg img.layer2 { opacity: 0.4; }
.bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(8,8,9,0.32), rgba(8,8,9,0.46));
}
.bg-fade-top {
  position: fixed; top: 0; left: 0; right: 0; height: 135px; z-index: -2;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 100%);
}
.bg-fade-bottom {
  position: fixed; bottom: 0; left: 0; right: 0; height: 143px; z-index: -2;
  background: linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 100%);
}

/* ================= shell ================= */
/* Every page is exactly one viewport tall, always — header and footer
   sit at fixed positions on every page, in the same spot, full stop.
   If a page's content is too tall to fit between them, main scrolls
   internally; header and footer never move because of it. */
.screen {
  position: relative; z-index: 1;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ---- header ---- */
header {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;
  padding: 10px 24px 0 32px;
}
.logo {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}
.logo b {
  display: block;
  font-family: "Anton", "Arial Narrow", system-ui, sans-serif;
  font-weight: 400; font-size: 30px; line-height: 0.92;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--text);
  transition: opacity 0.2s ease;
}
.logo:hover b { opacity: 0.75; }
.logo .tag { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.logo .tag i { width: 4px; height: 4px; border-radius: 3px; background: var(--accent); }
.logo .tag span {
  font-weight: 500; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sub);
}

nav {
  display: flex; gap: 40px; padding-top: 11px;
  font-weight: 500; font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--meta);
}
nav a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
nav a:hover { color: var(--text); }
nav a.on { color: var(--text); }

/* ---- footer ---- */
footer {
  flex: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 24px 24px; gap: 24px; flex-wrap: wrap;
}
.meta-group { display: flex; gap: 48px; }
.meta-group.right { text-align: right; }
.meta-group .field { display: flex; flex-direction: column; gap: 4px; }
.meta-group.right .field { align-items: flex-end; }
.meta-group .field b {
  font-weight: 600; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--label);
}
.meta-group .field span { font-weight: 400; font-size: 11px; color: var(--meta); }

main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid; place-items: center;
  padding: 24px clamp(16px, 4vw, 48px) 26px;
}

/* ================= masking tape ================= */
/* .tape — the hero's own original asset/box-math, left exactly as tuned.
   .tape-tight — a second, cropped-to-content version for every other
   placement on the site, sized per-instance so the offset math is
   predictable (see CLAUDE.md-style note: the source PNG has a lot of
   transparent padding around the actual strip, which is what made the
   original math land tape inside frames instead of at their edges). */
.tape {
  position: absolute;
  width: 232px; height: 232px;
  background: url("tape.png") center / contain no-repeat;
  filter: brightness(1.02);
  pointer-events: none;
  z-index: 5;
}
.tape-tight {
  position: absolute;
  aspect-ratio: 2.6239;
  background: url("tape-tight.png") center / contain no-repeat;
  filter: brightness(1.02);
  pointer-events: none;
  z-index: 5;
}

/* ================= fluted-glass plate ================= */
/* A pane of ribbed polycarbonate framing whatever sits on top of it — the
   .refract layer shows a lensed slice of the concrete wall behind, so the
   plate reads as glass with real depth, not a flat texture. */
.plate {
  position: absolute; inset: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    4px 14px 20px rgba(0, 0, 0, 0.6),
    0 40px 90px -30px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.28);
}
.refract {
  position: absolute; inset: -60px;
  background: url("concrete-2.jpg") center / cover no-repeat;
  filter: url(#fluted) blur(1px) brightness(1.1) saturate(1.12);
}
.ribs {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.17) 0,
      rgba(0,0,0,0.04) calc(var(--flute) * 0.22),
      rgba(255,255,255,0.16) calc(var(--flute) * 0.5),
      rgba(0,0,0,0.04) calc(var(--flute) * 0.78),
      rgba(0,0,0,0.17) var(--flute)),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0) calc(var(--flute) * 0.42),
      rgba(255,255,255,0.32) calc(var(--flute) * 0.5),
      rgba(255,255,255,0) calc(var(--flute) * 0.58));
  mix-blend-mode: soft-light;
  opacity: 0.95;
}
.sheen {
  position: absolute; inset: 0;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.13), rgba(255,255,255,0) 44%),
    linear-gradient(0deg, rgba(246,246,241,0.05), rgba(246,246,241,0.05));
}

/* ================= paper note ================= */
/* A printed page, not glass — used for anything that's actual body copy.
   Fluted lensing over real text would hurt legibility, so notes are flat,
   warm paper instead, still taped up the same way as everything else. */
.note {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 1px, transparent 1px, transparent 3px),
    var(--paper);
  color: var(--paper-ink);
  border-radius: 3px;
  box-shadow:
    4px 10px 16px rgba(0,0,0,0.5),
    0 30px 70px -24px rgba(0,0,0,0.65);
}

/* ================= custom video controls ================= */
/* Every video is a plain native <video> element playing an HLS stream —
   no third-party iframe, so there is no other platform's UI or logo to
   fight with. These controls are built from scratch and driven directly
   by the video element itself (see assets/site.js). */
.vid-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 14px;
  z-index: 4;
  display: flex; align-items: flex-end;
  cursor: pointer;
  padding: 0 2px 0;
}
.vid-progress-track {
  position: relative;
  width: 100%; height: 2px;
  background: rgba(255,255,255,0.22);
  pointer-events: none;
}
.vid-progress-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 0%;
  background: var(--text);
}
.vid-progress:hover .vid-progress-track { height: 4px; }

.vid-mute {
  position: absolute; z-index: 4;
  width: 30px; height: 30px;
  background: none;
  border: none;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.vid-mute:hover { opacity: 1; }
.vid-mute svg { width: 17px; height: 17px; fill: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.vid-mute .i-muted { display: none; }
.vid-mute.is-muted .i-on { display: none; }
.vid-mute.is-muted .i-muted { display: block; }

/* ================= lightbox (works page video pop-outs) ================= */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(4,5,5,0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 40px clamp(16px, 4vw, 48px);
}
.lightbox.is-open { display: flex; }
.lightbox-stage {
  position: relative;
  width: min(1080px, 92vw, 128vh);
  aspect-ratio: 1.8965;
  background: #0a0b0c;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.8);
}
.lightbox-stage video {
  position: absolute;
  top: -1px; left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  display: block;
}
.lightbox-close {
  position: absolute; top: -46px; right: 0; z-index: 6;
  background: none; border: 0;
  color: #fff;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.7; cursor: pointer;
  padding: 6px 4px;
}
.lightbox-close:hover { opacity: 1; }

/* ================= client logos — meshed into the wall ================= */
.clients {
  padding-top: 8px;
}
.clients-label {
  text-align: center;
  font-weight: 600; font-size: 13px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sub);
  margin-bottom: 30px;
}
.clients-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 40px 56px;
  max-width: 1100px; margin: 0 auto;
}
.clients-row img {
  max-width: 118px; max-height: 44px;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.6) contrast(0.7);
  opacity: 0.4;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.clients-row img:hover {
  filter: grayscale(0%) brightness(1) contrast(1);
  opacity: 0.95;
}

@media (max-width: 720px) {
  header { flex-direction: column; gap: 14px; }
  nav { padding-top: 0; flex-wrap: wrap; gap: 24px; }
  footer { flex-direction: column; align-items: flex-start; gap: 16px; }
  .meta-group.right, .meta-group.right .field { text-align: left; align-items: flex-start; }
  .lightbox-close { top: -38px; }
}