/* Black Pearl Ventures: shared styles for every page.
   The two tweak knobs are --grain (0 to 0.8) and --video-brightness (0.4 to 1.2). */

/* Fonts are self-hosted in /fonts (SIL Open Font License, see the OFL files there)
   so nothing waits on Google. font-display:block keeps the text invisible rather
   than flashing the fallback serif while they load. */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300;
  font-display:block;
  src:url('/fonts/cormorant-garamond-300.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:300;
  font-display:block;
  src:url('/fonts/ibm-plex-mono-300.woff2') format('woff2');
}

:root{
  --bg:#000000;
  --ink:#ece8e0;
  --nav:#9a968f;
  --grain:0.30;
  --video-brightness:0.90;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
a{color:var(--nav);text-decoration:none}
a:hover,a:focus-visible{color:#ffffff}
a:focus-visible{outline:1px solid rgba(255,255,255,.35);outline-offset:6px}

.hero{
  position:relative;
  width:100%;
  height:100vh;
  height:100svh;
  min-height:560px;
  background:var(--bg);
  overflow:hidden;
}

/* Hero video with the still as poster. --poster and --focus are set per page. */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--focus,center center);
  display:block;
  background:var(--bg) var(--poster) var(--focus,center center) / cover no-repeat;
  filter:brightness(var(--video-brightness)) contrast(1.06);
}

/* Vignette and edge fade to black */
.vignette,.edges,.grain{position:absolute;pointer-events:none}
.vignette{
  inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 48%,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.92) 100%);
}
.edges{
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 72%,rgba(0,0,0,.9) 100%);
}

/* Film grain, Overlay at ~30% */
.grain{
  inset:-6%;
  z-index:5;
  mix-blend-mode:overlay;
  opacity:var(--grain);
  overflow:hidden;
}
.grain svg{
  display:block;
  width:100%;
  height:100%;
  will-change:transform;
  animation:grain-jitter .9s steps(1) infinite;
}
@keyframes grain-jitter{
  0%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}20%{transform:translate(3%,1%)}
  30%{transform:translate(-1%,4%)}40%{transform:translate(4%,-2%)}50%{transform:translate(-3%,2%)}
  60%{transform:translate(2%,4%)}70%{transform:translate(-4%,-1%)}80%{transform:translate(1%,-4%)}
  90%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}

/* Nav. The link for the page you are on carries aria-current="page" and lights up in the ink color. */
.nav{
  position:absolute;
  top:0;left:0;right:0;
  z-index:3;
  padding:calc(36px + env(safe-area-inset-top)) 32px 0;
  display:flex;
  justify-content:center;
  gap:64px;
}
.nav a{
  font-size:11px;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--nav);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  transition:color .25s;
}
.nav a[aria-current="page"]{color:var(--ink)}

/* Wordmark. --wordmark-top is set per page (50% centers it over the hero). */
.wordmark{
  position:absolute;
  left:0;right:0;
  top:var(--wordmark-top,50%);
  transform:translateY(-50%);
  z-index:3;
  margin:0;
  padding:0 16px;
  text-align:center;
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-weight:300;
  font-size:clamp(15px,3vw,46px);
  line-height:1;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink);
  text-shadow:0 2px 40px rgba(0,0,0,.8),0 0 90px rgba(0,0,0,.6);
}

/* Text reveal: the nav and wordmark start invisible and fade in once the fonts are
   loaded (hero.js adds .fonts-ready to <html>). A safety animation shows them after
   2.5 s no matter what, so a failed font or script never leaves the page blank. */
.nav,.wordmark{
  opacity:0;
  transition:opacity .9s ease;
  animation:text-safety 0s 2.5s forwards;
}
.fonts-ready .nav,.fonts-ready .wordmark{opacity:1}
@keyframes text-safety{to{opacity:1}}

/* Heading kept for screen readers and search engines on pages with no visible wordmark. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

@media (max-width:520px){
  .nav{gap:40px;padding-left:16px;padding-right:16px}
  .wordmark{letter-spacing:.22em;font-size:clamp(14px,4.2vw,22px)}
}

/* Portrait screens (phones held upright, tablets in portrait).
   The videos are 16:9, so instead of cropping to the middle fifth of the frame,
   show the whole scene as a strip across the screen, centered, with its top and
   bottom feathered into the black so there is no hard box.
   A page can set --portrait-height (for example 75svh) to crop in instead:
   the video then fills that much of the screen height and loses its sides. */
@media (orientation:portrait){
  .hero-video{
    inset:auto 0;
    top:50%;
    height:var(--portrait-height,auto);
    aspect-ratio:1920/1076;
    transform:translateY(-50%);
    object-fit:cover;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
  }
  /* Gentler vignette so the edges of the full scene stay readable. */
  .vignette{
    background:radial-gradient(ellipse 120% 70% at 50% 50%,rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.85) 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  .grain svg{animation:none}
  .nav a{transition:none}
}