/* ============================================================
   SNAPSHOT — shared front-end base
   ------------------------------------------------------------
   Design tokens, reset, overlays, nav and scroll-reveal, used by every public
   page (index / about / galleries / album). Page-specific layout stays inline
   in each page's own <style> block.

   Change a colour or a typeface HERE and the whole public site follows.
   admin.php deliberately keeps its own copy: the Studio is a different UI with
   a denser palette, and it should never break because a site style changed.
   ============================================================ */

:root{
  --black:#0A0A0B; --black-2:#121214; --white:#F4F3EF;
  --red:#FF2020; --red-deep:#D40016; --gray:#82817D;
  --line:rgba(244,243,239,.14); --line-dark:rgba(10,10,11,.16);
  --font-display:'Anton', Impact, sans-serif;
  --font-body:'Archivo', Helvetica, Arial, sans-serif;
  --font-mono:'JetBrains Mono', 'Courier New', monospace;
  --pad:clamp(20px, 4vw, 64px);
}

/* ---- reset + base ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--font-body);font-size:16px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:var(--black)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---- outlined display type ---- */
.stroke-w{-webkit-text-stroke:.022em var(--white);color:transparent}
.stroke-r{-webkit-text-stroke:.022em var(--red);color:transparent}
.stroke-b{-webkit-text-stroke:.022em var(--black);color:transparent}

/* ---- full-page texture overlays (picked in Studio -> Site settings) ---- */
.overlay{position:fixed;inset:0;pointer-events:none;z-index:90}
.ov-grain{inset:-50%;width:200%;height:200%;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-5%)}30%{transform:translate(3%,-7%)}50%{transform:translate(-7%,4%)}70%{transform:translate(6%,6%)}90%{transform:translate(-3%,3%)}}
.ov-grain-fine{opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:280px 280px}
.ov-scanlines{opacity:.6;background:
  repeating-linear-gradient(to bottom, rgba(244,243,239,.045) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(to bottom, rgba(10,10,11,.06) 0 1px, transparent 1px 4px)}
.ov-vignette{background:radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(10,10,11,.5) 135%)}

/* ---- nav ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;mix-blend-mode:difference}
.nav-logo{font-family:var(--font-display);font-size:20px;letter-spacing:.04em;text-transform:uppercase}
.nav-logo sup{font-size:9px;color:var(--red)}
.nav-links{display:flex;gap:clamp(14px,3vw,36px)}
.nav-links a,.nav-right a{position:relative;padding:4px 0}
.nav-links a::after,.nav-right a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:width .25s ease}
.nav-links a:hover::after,.nav-right a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-rec{display:flex;align-items:center;gap:6px;color:var(--red)}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:920px){
  .nav-links{display:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
}