/* ============================================================
   Vidzero concept v3. Base: reset, paper surface, production nav, kit
   Classes only.
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body {
  font-family:var(--f-body); font-size:var(--t-body); line-height:var(--lh-body);
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* Browser surfaces. Selection, caret and scrollbar ship with colours that
   belong to no design system, and leaving them is the cheapest tell that a page
   was assembled rather than built. */
::selection{ background:var(--accent); color:#fff; }
html{ caret-color:var(--accent); scrollbar-color:var(--ink-soft) var(--paper-2); scrollbar-width:thin; }
a{ text-underline-offset:3px; }

h1,h2,h3{ font-family:var(--f-display); font-weight:700; line-height:var(--lh-snug); letter-spacing:-0.02em; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--container-pad); }
.skip-link{ position:absolute; left:1rem; top:-3rem; background:var(--ink); color:var(--label); padding:.5rem 1rem; border-radius:var(--r-sm); z-index:var(--z-lightbox); transition:top var(--dur-1); }
.skip-link:focus{ top:1rem; }

.grain{ position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* --- shared production type helpers --- */
.mono{ font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--ink-soft); }
.hand{ font-family:var(--f-hand); color:var(--ink); line-height:1.15; }
.mark{ background:linear-gradient(180deg, transparent 58%, rgba(82,113,255,.4) 58% 92%, transparent 92%); padding:0 .08em; }

/* --- buttons --- */
.btn{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--f-display); font-weight:700; font-size:.92rem; letter-spacing:.01em;
  padding:.85em 1.5em; border-radius:var(--r-sm); transition:transform var(--dur-1) var(--ease-out), background var(--dur-1), color var(--dur-1); white-space:nowrap; }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-ink); transform:translateY(-2px); }
.btn--primary:active{ transform:translateY(0) scale(.98); }
.btn--ghost{ color:var(--ink); border:1.5px solid var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }

/* ============================================================
   PRODUCTION BAR (top nav, like a slate / timecode strip)
   ============================================================ */
.bar{ position:fixed; inset:0 0 auto 0; z-index:var(--z-nav); height:60px; display:flex; align-items:center;
  background:rgba(236,230,215,0); color:var(--on-dark); transition:background var(--dur-2), color var(--dur-2), box-shadow var(--dur-2); }
.bar.is-scrolled{ background:rgba(236,230,215,.86); color:var(--ink); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--rule); }
.bar__inner{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--container-pad); display:flex; align-items:center; gap:var(--s-5); }
.bar__brand{ font-family:var(--f-display); font-weight:800; font-size:1.2rem; letter-spacing:-0.03em; color:currentColor; }
.bar__brand .dot{ color:var(--accent); }
.bar__tc{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.5em; }
.bar__rec{ width:9px; height:9px; border-radius:50%; background:var(--rec); box-shadow:0 0 0 3px rgba(82,113,255,.2); }
.bar__links{ display:flex; gap:var(--s-5); margin-left:auto; font-size:.92rem; font-weight:600; }
.bar__links a{ position:relative; color:currentColor; opacity:.82; transition:opacity var(--dur-1), color var(--dur-1); }
.bar__links a:hover{ opacity:1; }
.bar.is-scrolled .bar__links a{ color:var(--ink-soft); opacity:1; }
.bar.is-scrolled .bar__links a:hover{ color:var(--ink); }
.bar__links a::after{ content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--accent); transition:width var(--dur-2) var(--ease-out); }
.bar__links a:hover::after{ width:100%; }
.bar__toggle{ display:none; margin-left:auto; flex-direction:column; gap:5px; padding:8px; }
.bar__toggle span{ width:26px; height:2px; background:currentColor; }
@media (max-width:880px){ .bar__links, .bar__cta, .bar__tc{ display:none; } .bar__toggle{ display:flex; } }

.menu{ position:fixed; inset:0; z-index:var(--z-lightbox); background:var(--paper); display:grid; place-items:center; opacity:0; transition:opacity var(--dur-2); }
.menu.is-open{ opacity:1; }
.menu__links{ display:grid; gap:var(--s-5); text-align:center; }
.menu__links a{ font-family:var(--f-display); font-weight:800; font-size:clamp(2rem,9vw,3.2rem); }
.menu__links .menu__cta{ color:var(--accent); }
body.menu-open{ overflow:hidden; }

/* the hidden attribute must win over display:grid, or these invisible
   full-screen overlays intercept every click/hover on the page */
.menu[hidden], .lightbox[hidden] { display: none; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{ position:fixed; inset:0; z-index:var(--z-lightbox); background:rgba(8,6,28,.9); display:grid; place-items:center; padding:var(--container-pad); opacity:0; transition:opacity var(--dur-2); }
.lightbox.is-open{ opacity:1; }
.lightbox__frame{ width:min(1100px,100%); aspect-ratio:16/9; background:#000; border-radius:var(--r-md); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox__frame video,.lightbox__frame iframe{ width:100%; height:100%; border:0; object-fit:contain; background:#000; }
.lightbox__close{ position:absolute; top:1.4rem; right:1.4rem; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; color:var(--label); border:1px solid rgba(248,245,236,.4); border-radius:var(--r-sm); padding:.5em 1em; }
.lightbox__close:hover{ border-color:var(--label); }

/* signal re-key primitive: the flicker that runs while text scrambles through
   characters and resolves, like a feed switching sources. Used by the menu rows
   (nav.css) and, under its own name, by the portfolio label (edit.css). */
@keyframes rekey-flicker { 0%, 100% { opacity: 1; } 10% { opacity: .3; } 24% { opacity: 1; } 42% { opacity: .5; } 60% { opacity: 1; } 76% { opacity: .72; } }

/* reveal primitive */
[data-reveal]{ opacity:0; transform:translateY(20px); }
.is-in[data-reveal]{ opacity:1; transform:none; transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1!important; transform:none!important; } }

/* stub scene (zoom hand-off placeholder) */
.scene-stub{ position:relative; z-index:2; background:#0b0724; color:var(--on-dark); min-height:100vh; display:grid; align-content:center; padding-block:var(--pad-section); }
.scene-stub .mono{ color:var(--accent); }
.scene-stub__line{ font-family:var(--f-display); font-weight:700; font-size:var(--t-h2); max-width:24ch; margin-top:var(--s-4); color:var(--on-dark); }

/* the standard dark-ground text link: underlined at rest, and on hover the
   underline rises into the translucent marker band (the round 21 hover
   language; the tint keeps the text's own contrast) */
.mlink {
  color: var(--accent-on-dark, #8FA3FF);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
  text-decoration-color: var(--accent-on-dark, #8FA3FF);
  background-image: linear-gradient(color-mix(in srgb, var(--accent-on-dark, #8FA3FF) 30%, transparent),
                                    color-mix(in srgb, var(--accent-on-dark, #8FA3FF) 30%, transparent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0;
  transition: background-size var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.mlink:hover, .mlink:focus-visible { color: #fff; background-size: 100% .78em; }

/* the same link grammar on PAPER ground: accent-ink text, accent
   underline, the tint band rising on hover (the footer bar's measured
   4.64:1 pair) */
.plink {
  color: var(--accent-ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent),
                                    color-mix(in srgb, var(--accent) 22%, transparent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0;
  transition: background-size var(--dur-1) var(--ease-out);
}
.plink:hover, .plink:focus-visible { background-size: 100% .78em; }

/* colophon stub */
.colophon{ background:var(--paper-2); border-top:1px solid var(--rule); padding-block:var(--s-6); }
.colophon .container{ display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }
.colophon a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }