:root{
  --brand:#2c3e50;
  --brand-2:#4a6491;
  --accent:#3498db;
  --muted:#999;
  --bg:#000000;
  --max-width:1100px;
  --radius:10px;
  /* CRT overlay controls */
  --crt-scan-opacity: .22; /* overall scanline strength */
  --crt-scan-dark: .5;    /* scanline dark line alpha */
  --crt-vignette: 1.0;     /* vignette edge darkness */
  --crt-line: 2px;          /* scanline thickness */
  --crt-gap: 2px;           /* gap between lines */
  /* VHS foreground effect controls */
  --vhs-rgb-alpha: 1.35;    /* RGB split edge strength */
}
*{box-sizing:border-box}
img,video{max-width:100%;height:auto}
body{
  margin:0;
  font-family: 'Montserrat', Arial, sans-serif;
  color:#fff;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{
  max-width:var(--max-width);
  margin:28px auto;
  padding:28px;
  background: rgba(0,0,0,0.7);
  border-radius: var(--radius);
  box-shadow: 0 6px 26px rgba(0,0,0,0.3);
}

.site-hero{
  /* Use pure black background; slideshow canvas renders above. Avoids fallback image stretching on mobile */
  background:#000;
  color: #fff;
  /* Use dynamic viewport units to avoid iOS/Android UI bars stretching */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  position: relative;
  touch-action: pan-y;
}
.site-hero::after{
  /* subtle dark overlay for text contrast */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,14,20,0.45);
  pointer-events: none;
}
.hero-inner{
  position: relative; /* sit above overlay */
  z-index: 2;
  max-width: 980px;
  padding: 36px 20px;
}
.logo{max-width:390px;height:auto;display:block;margin:0 auto 12px}
.logo{max-width:390px;height:auto;display:block;margin:0 auto 12px;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.6))}
.hero-title{font-size:2.6rem;margin:8px 0 6px 0;letter-spacing:1px}
.hero-title{font-size:2.6rem;margin:8px 0 6px 0;letter-spacing:1px;text-shadow:0 2px 8px rgba(0,0,0,0.7)}
.hero-sub{font-size:0.85rem;opacity:0.95;margin:6px 0 18px 0}
.hero-sub{font-size:0.85rem;opacity:0.95;margin:6px 0 18px 0;text-shadow:0 1px 6px rgba(0,0,0,0.7)}
.contact-hero{display:flex;gap:32px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:24px}
.contact-label{font-size:3rem;margin:0;letter-spacing:1px;font-weight:700;color:#fff;border:0;border-bottom:none;display:block;padding-bottom:0}
.contact-label{font-size:3rem;margin:0;letter-spacing:1px;font-weight:700;color:#fff;border:0;border-bottom:none;display:block;padding-bottom:0;text-shadow:0 2px 8px rgba(0,0,0,0.8)}
.contact-details{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.contact-link{color:#fff;text-decoration:none;font-weight:600;font-size:1.1rem}
.contact-link{color:#fff;text-decoration:none;font-weight:600;font-size:1.1rem;text-shadow:0 1px 6px rgba(0,0,0,0.7)}

/* background media container (slideshow) */
#bg-container, #bg-container .bg-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* establish clear stacking: media at 0, overlays above */
#bg-container{z-index:1}
#bg-container .bg-media{display:block;max-width:none;z-index:0}
#bg-container canvas{z-index:0}
/* ensure any canvas we inject fills container without extra CSS scaling quirks */
#bg-container canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* CRT overlay: vignette + scanlines layered above media but below content */
#bg-container::before,
#bg-container::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
/* Vignette */
#bg-container::before{
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,0) 58%,
              rgba(0,0,0,var(--crt-vignette)) 100%);
  opacity: 1;
  z-index:1;
}
/* Scanlines with gentle drift */
#bg-container::after{
  /* Layer 1: film grain (SVG turbulence, tileable), Layer 2: scanlines */
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'>\
  <filter id='n' x='0' y='0' width='100%' height='100%'>\
    <feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/>\
    <feColorMatrix type='saturate' values='0'/>\
  </filter>\
  <rect width='64' height='64' filter='url(%23n)' opacity='0.18'/>\
</svg>"),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,var(--crt-scan-dark)) 0,
      rgba(0,0,0,var(--crt-scan-dark)) var(--crt-line),
      rgba(0,0,0,0) var(--crt-line),
      rgba(0,0,0,0) calc(var(--crt-line) + var(--crt-gap))
    );
  background-size: 64px 64px, auto;
  background-repeat: repeat, repeat;
  background-blend-mode: overlay, normal;
  opacity: var(--crt-scan-opacity);
  animation: crtScanShift 8s linear infinite, filmFlicker 2.4s linear infinite;
  z-index:2;
}

@keyframes crtScanShift{
  0%{ background-position-y: 0; }
  100%{ background-position-y: calc(var(--crt-line) + var(--crt-gap)); }
}

/* Subtle analog flicker: small, uneven opacity/brightness shifts */
@keyframes filmFlicker{
  0%   { opacity: var(--crt-scan-opacity); filter: brightness(1) contrast(1); }
  7%   { opacity: calc(var(--crt-scan-opacity) + 0.02); filter: brightness(0.99) contrast(1.02); }
  13%  { opacity: var(--crt-scan-opacity); filter: brightness(1.01) contrast(1); }
  21%  { opacity: calc(var(--crt-scan-opacity) + 0.03); filter: brightness(0.98) contrast(1.03); }
  31%  { opacity: var(--crt-scan-opacity); filter: brightness(1.02) contrast(1.01); }
  46%  { opacity: calc(var(--crt-scan-opacity) + 0.015); filter: brightness(0.99) contrast(1.02); }
  57%  { opacity: var(--crt-scan-opacity); filter: brightness(1) contrast(1); }
  73%  { opacity: calc(var(--crt-scan-opacity) + 0.025); filter: brightness(0.985) contrast(1.03); }
  88%  { opacity: var(--crt-scan-opacity); filter: brightness(1.01) contrast(1.01); }
  100% { opacity: var(--crt-scan-opacity); filter: brightness(1) contrast(1); }
}

/* ensure hero content sits above background */
.hero-inner{position:relative;z-index:2}

/* VHS effect: RGB split only on foreground elements (no jitter/skew) */
.logo{
  filter: saturate(1.12) contrast(1.06)
          drop-shadow(1px 0 0 rgba(255,0,0,var(--vhs-rgb-alpha)))
          drop-shadow(-1px 0 0 rgba(0,255,255,var(--vhs-rgb-alpha)));
}
.hero-title,.contact-label{
  text-shadow:
    1px 0 0 rgba(255,0,0,0.36),
   -1px 0 0 rgba(0,255,255,0.36),
    0 2px 8px rgba(0,0,0,0.70);
}
.hero-sub,.contact-link{
  text-shadow:
    1px 0 0 rgba(255,0,0,0.26),
   -1px 0 0 rgba(0,255,255,0.26),
    0 1px 6px rgba(0,0,0,0.65);
}

/* removed jitter/skew keyframes */

h2{color:var(--brand);margin:0 0 12px 0;font-size:1.2rem;border-bottom:3px solid var(--accent);display:inline-block;padding-bottom:6px}
.lead{font-size:1rem;margin-top:8px}

.portfolio{margin-top:26px}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.card{display:block;background:rgba(0,0,0,0.7);border-radius:8px;overflow:hidden;text-decoration:none;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,0.3);transition:transform .18s ease,box-shadow .18s ease}
.card img{width:100%;height:160px;object-fit:cover;display:block}
.card-body{padding:12px}
.card-body strong{display:block;margin-bottom:6px}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,0.12)}
.muted-right{text-align:right;color:var(--muted);margin-top:12px}

.contact{margin-top:28px}
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.contact-grid p{margin:4px 0}

.site-footer{background:transparent;padding:18px 0;margin-top:22px}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 22px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}

/* Responsive adjustments */
@media (max-width:900px){
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  .logo{max-width:390px}
}
@media (max-width:600px){
  .container{margin:12px;padding:16px}
  .portfolio-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  /* Make hero content larger and more readable on phones */
  .logo{width:min(96vw, 600px);max-width:none}
  .hero-title{font-size:2.6rem;line-height:1.15}
  .hero-sub{font-size:1.25rem;line-height:1.45}
  .contact-link{font-size:1.3rem}
  .hero-inner{padding:18px}
  h2{font-size:1rem}
  .hero-meta{font-size:0.95rem}
  /* Adjust CRT on phones: reduce vignette strength by ~30% */
  :root{ --crt-scan-opacity: 0.28; --crt-vignette: 0.31; --crt-line: 3px; --crt-gap: 2px; }
}

/* small utility */
.link-muted{color:var(--brand-2)}
.muted{color:var(--muted)}