/* =========================================================
   KELLAN McDONOUGH — neo-noir / Mulholland Drive
   Shared stylesheet
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');

:root{
  --void:#08060700;          /* unused alpha helper */
  --black:#080607;           /* warm near-black */
  --ink:#0d0a0c;
  --noir:#141014;
  --noir-2:#1b151a;
  --blood:#ff2436;           /* neon red */
  --blood-glow:#ff5664;
  --blue:#41a6ff;            /* electric blue */
  --pink:#ff7ea3;            /* hazy Mulholland pink */
  --gold:#d8b27a;            /* old-Hollywood gold */
  --smoke:#cbbfb8;           /* primary text */
  --ash:#8c827d;             /* muted text */
  --fog:#5c544f;             /* faint text */
  --line:rgba(216,178,122,.16);
  --maxw:1140px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(120% 90% at 50% -10%, #1a0f14 0%, #0c0809 42%, var(--black) 100%);
  background-attachment:fixed;
  color:var(--smoke);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  line-height:1.7;
  letter-spacing:.2px;
  overflow-x:hidden;
  min-height:100vh;
}

/* ---- film grain + vignette overlays ---- */
body::before{ /* grain */
  content:"";
  position:fixed; inset:-50%;
  z-index:9998; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .6s steps(2) infinite;
}
body::after{ /* vignette */
  content:"";
  position:fixed; inset:0;
  z-index:9997; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}
@keyframes grain{
  0%{transform:translate(0,0)} 50%{transform:translate(-4%,3%)} 100%{transform:translate(3%,-2%)}
}

/* letterbox bars */
.bar{position:fixed;left:0;right:0;height:26px;background:#000;z-index:9996;pointer-events:none}
.bar.top{top:0;box-shadow:0 1px 0 rgba(216,178,122,.08)}
.bar.bottom{bottom:0;box-shadow:0 -1px 0 rgba(216,178,122,.08)}

a{color:var(--smoke);text-decoration:none;transition:color .35s var(--ease)}
a:hover{color:var(--blood-glow)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative}
.pad{padding:clamp(64px,11vh,140px) 0}
.pad-sm{padding:clamp(40px,7vh,80px) 0}

/* ---------- top nav ---------- */
header.nav{
  position:sticky;top:26px;z-index:90;
  backdrop-filter:blur(6px);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 28px;max-width:var(--maxw);margin:0 auto;
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:'Cinzel',serif;font-weight:600;letter-spacing:.32em;
  font-size:.82rem;color:var(--smoke);text-transform:uppercase;
}
.brand .dot{color:var(--blood);text-shadow:0 0 10px var(--blood-glow)}
.menu{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.menu a{
  font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ash);position:relative;padding:4px 0;
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:var(--blood);box-shadow:0 0 8px var(--blood-glow);
  transition:width .4s var(--ease);
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--smoke)}
.menu a:hover::after,.menu a[aria-current="page"]::after{width:100%}
.menu a.ext::before{content:"↗ ";color:var(--gold);opacity:.7}

/* ---------- type ---------- */
.eyebrow{
  font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);margin:0 0 22px;
}
h1,h2,h3{font-weight:600;line-height:1.05;margin:0}
h1.display{
  font-family:'Cinzel',serif;
  font-size:clamp(2.6rem,8.5vw,7rem);
  letter-spacing:.04em;line-height:.98;text-transform:uppercase;
  color:#f4ece6;
}
h2.section-title{
  font-family:'Cinzel',serif;
  font-size:clamp(1.6rem,4vw,2.7rem);
  letter-spacing:.06em;text-transform:uppercase;color:#efe6df;
}
h3{font-family:'Cinzel',serif;letter-spacing:.05em;font-size:1.15rem;text-transform:uppercase;color:#ece2da}
.lede{font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--ash);font-style:italic;max-width:42ch}
p{margin:0 0 1.1em}
.muted{color:var(--ash)}
.faint{color:var(--fog)}
em,i{color:var(--pink);font-style:italic}
strong{color:#efe6df;font-weight:600}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}

/* neon flicker on the hero name */
.neon{
  color:#f6efe9;
  text-shadow:
    0 0 4px rgba(255,126,163,.35),
    0 0 18px rgba(255,36,54,.35),
    0 0 42px rgba(255,36,54,.25),
    0 0 80px rgba(65,166,255,.18);
  animation:flicker 6s infinite var(--ease);
}
@keyframes flicker{
  0%,18%,22%,25%,53%,57%,100%{opacity:1}
  20%,24%,55%{opacity:.78}
  21%{opacity:.55}
}

/* ---------- hero ---------- */
.hero{min-height:calc(100vh - 26px);display:flex;align-items:center;position:relative;overflow:hidden}
.spotlight{
  position:absolute;width:760px;height:760px;border-radius:50%;
  left:50%;top:36%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,126,163,.16), rgba(255,36,54,.07) 38%, transparent 66%);
  filter:blur(8px);pointer-events:none;transition:transform .3s ease-out;z-index:0;
}
.hero .wrap{position:relative;z-index:2}
.hero-sub{
  font-family:'Space Mono',monospace;letter-spacing:.5em;text-transform:uppercase;
  font-size:clamp(.7rem,1.4vw,.95rem);color:var(--gold);margin-top:26px;
}
.hero-tag{margin-top:26px;max-width:46ch;color:var(--ash);font-style:italic;font-size:1.25rem}

/* ---------- cards ---------- */
.grid{display:grid;gap:22px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{
  position:relative;padding:30px 28px;border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(27,21,26,.6), rgba(13,10,12,.6));
  border-radius:3px;overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.card::before{ /* top accent line */
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--accent,var(--blood)),transparent);
  opacity:.7;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(216,178,122,.35);
  box-shadow:0 24px 60px -30px rgba(255,36,54,.35);
}
.card .kicker{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.card h3{margin-bottom:10px}
.card p{font-size:1rem;color:var(--ash)}
.card .go{display:inline-block;margin-top:16px;font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke)}
.card .go::after{content:" →";color:var(--blood)}

.card.red{--accent:var(--blood)}
.card.blue{--accent:var(--blue)}
.card.pink{--accent:var(--pink)}
.card.gold{--accent:var(--gold)}

/* small label callout */
.chip{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:2px;padding:12px 18px;
  font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.06em;color:var(--smoke);
  background:rgba(13,10,12,.5);
}
.chip .ic{color:var(--gold)}

/* contact pills */
.pills{display:flex;gap:16px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:10px;padding:14px 22px;
  border:1px solid var(--line);border-radius:2px;
  font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(27,21,26,.5),rgba(13,10,12,.5));
  transition:.4s var(--ease);
}
.pill:hover{border-color:var(--blood);box-shadow:0 0 22px -6px var(--blood-glow);transform:translateY(-2px)}
.pill .ic{color:var(--blood)}

/* lists */
.lined{list-style:none;padding:0;margin:0}
.lined li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:14px}
.lined li::before{content:"▸";color:var(--blood);flex:none}
ul.simple{padding-left:1.2em}
ul.simple li{margin:.3em 0}

/* now-page entries */
.now-line{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.now-line .tag{font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);min-width:120px;flex:none}

/* blockquote */
blockquote{
  margin:0;padding:18px 26px;border-left:2px solid var(--blood);
  background:rgba(255,36,54,.05);font-style:italic;color:#e7ddd4;font-size:1.25rem;
}

/* curtain footer */
footer.curtain{
  position:relative;margin-top:60px;padding:70px 0 40px;
  background:
    linear-gradient(180deg, transparent, rgba(40,6,12,.5)),
    repeating-linear-gradient(90deg, #1c0509 0 18px, #2a070d 18px 22px, #160407 22px 40px);
  border-top:1px solid rgba(216,178,122,.18);
}
footer.curtain::before{
  content:"";position:absolute;left:0;right:0;top:0;height:30px;
  background:radial-gradient(60% 100% at 50% 0, rgba(255,36,54,.18), transparent 70%);
}
.foot-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end}
.foot-name{font-family:'Cinzel',serif;letter-spacing:.22em;text-transform:uppercase;font-size:1rem;color:#efe6df}
.foot-sil{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--fog);font-size:.95rem}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}

/* form */
form.noir{display:grid;gap:18px;max-width:560px}
form.noir label{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:8px}
form.noir input,form.noir textarea{
  width:100%;background:rgba(8,6,7,.7);border:1px solid var(--line);color:var(--smoke);
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;padding:14px 16px;border-radius:2px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
form.noir input:focus,form.noir textarea:focus{outline:none;border-color:var(--blood);box-shadow:0 0 22px -8px var(--blood-glow)}
form.noir button{
  justify-self:start;cursor:pointer;background:transparent;color:#f4ece6;
  border:1px solid var(--blood);padding:14px 34px;border-radius:2px;
  font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  transition:.4s var(--ease);
}
form.noir button:hover{background:var(--blood);color:#0b0708;box-shadow:0 0 30px -6px var(--blood-glow)}

/* portrait frame */
.portrait{
  position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  aspect-ratio:4/5;background:
    radial-gradient(120% 100% at 30% 20%, rgba(255,126,163,.12), transparent 55%),
    repeating-linear-gradient(135deg,#15101400 0 8px,#1b151a 8px 9px),
    linear-gradient(180deg,#1a141a,#0b080a);
  display:flex;align-items:center;justify-content:center;
}
.portrait .ph{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.2em;color:var(--fog);text-align:center;padding:20px;text-transform:uppercase}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.25) contrast(1.05)}

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

/* split layout */
.split{display:grid;grid-template-columns:1.3fr .9fr;gap:48px;align-items:center}

/* back link */
.back{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.back::before{content:"← "}

/* responsive */
@media(max-width:880px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:32px}
}
@media(max-width:620px){
  .grid.cols-2,.grid.cols-4{grid-template-columns:1fr}
  .nav-inner{flex-direction:column;align-items:flex-start;gap:14px}
  .menu{gap:16px}
  .now-line{flex-direction:column;gap:4px}
  .now-line .tag{min-width:0}
}

/* intro flicker overlay (home only) */
#intro{
  position:fixed;inset:0;z-index:9999;background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 1.2s ease;
}
#intro .word{
  font-family:'Cinzel',serif;letter-spacing:.5em;text-transform:uppercase;
  color:#f4ece6;font-size:clamp(1.1rem,3vw,1.8rem);padding-left:.5em;
  text-shadow:0 0 18px rgba(255,36,54,.5),0 0 50px rgba(65,166,255,.25);
}
#intro.gone{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .neon,body::before,#intro .word{animation:none}
  .reveal{opacity:1;transform:none}
}