/* ===== PROJECT OUTBREAK — shared styles ===== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Share+Tech+Mono&family=Inter:wght@400;500&display=swap');

:root{
  --black: #070605;
  --black-2: #0e0c0b;
  --bone: #e7e2d2;
  --bone-dim: #a8a395;
  --red: #b81f1f;
  --red-bright: #e0382c;
  --red-dark: #3d0c0c;
  --yellow: #d4a017;
  --line: rgba(231,226,210,0.12);
  --font-display: 'Oswald', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: 'Inter', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--bone);
  font-family:var(--font-body);
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
}

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

a{color:inherit; text-decoration:none;}

::selection{background:var(--red); color:var(--bone);}

h1,h2,h3{font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.02em;}

.eyebrow{
  font-family:var(--font-mono);
  color:var(--red-bright);
  font-size:0.8rem;
  letter-spacing:0.25em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--red-bright);}

/* ===== NAV ===== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 5%;
  background:linear-gradient(to bottom, rgba(7,6,5,0.95), rgba(7,6,5,0));
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:0.08em;
}
.site-nav .brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:700; font-size:1.1rem;
  text-transform:uppercase;
  color:var(--bone);
}
.site-nav .brand img{height:30px; width:auto; filter:drop-shadow(0 0 6px rgba(184,31,31,0.5));}
.site-nav .brand .ob{color:var(--red-bright);}
.site-nav ul{display:flex; gap:28px; list-style:none;}
.site-nav ul li a{
  color:var(--bone-dim);
  text-transform:uppercase;
  position:relative;
  padding:4px 0;
  transition:color .2s;
}
.site-nav ul li a:hover, .site-nav ul li a.active{color:var(--red-bright);}
.site-nav ul li a.active::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--red-bright);
}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--bone); padding:8px 10px; font-family:var(--font-mono); cursor:pointer;}

@media (max-width:820px){
  .site-nav ul{
    position:fixed; top:0; right:0; height:100vh; width:min(280px,80vw);
    background:var(--black-2); flex-direction:column; gap:0;
    padding:90px 30px; border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .3s ease;
  }
  .site-nav ul.open{transform:translateX(0);}
  .site-nav ul li{width:100%; padding:14px 0; border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
}

/* ===== TAPE STRIPE DIVIDER ===== */
.tape-divider{
  height:26px;
  background:repeating-linear-gradient(135deg, var(--red) 0 18px, var(--yellow) 18px 36px);
  position:relative;
}
.tape-divider span{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--black);
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.3em;
  color:var(--bone);
  margin:0 12%;
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.12em;
  font-size:0.85rem;
  padding:14px 28px;
  border:1px solid var(--red-bright);
  color:var(--bone);
  background:rgba(184,31,31,0.08);
  cursor:pointer;
  transition:all .2s ease;
  position:relative;
}
.btn:hover{background:var(--red-bright); color:var(--black); box-shadow:0 0 24px rgba(224,56,44,0.5);}
.btn.ghost{border-color:var(--line); background:transparent;}
.btn.ghost:hover{border-color:var(--bone); background:rgba(231,226,210,0.06); color:var(--bone); box-shadow:none;}

/* ===== SECTIONS / LAYOUT ===== */
.page-wrap{padding-top:90px;}
section{padding:90px 8%;}
.section-inner{max-width:1180px; margin:0 auto;}
.section-head{margin-bottom:50px; max-width:640px;}
.section-head h2{font-size:clamp(2rem,4vw,3.2rem); margin-top:10px; color:var(--bone);}
.section-head p{color:var(--bone-dim); margin-top:14px; font-size:1.05rem;}

.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:9998;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}

footer{
  padding:50px 8%;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--bone-dim);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
footer .foot-brand{color:var(--red-bright); letter-spacing:0.15em;}

.glitch-text{
  position:relative;
  display:inline-block;
}

@media (max-width:600px){
  section{padding:60px 6%;}
}