/* =========================================================
   THE MIDNIGHT BREW — Cozy Horror Coffee House
   Shared stylesheet
   ========================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=IM+Fell+English+SC&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Special+Elite&display=swap');

/* ---------- Tokens ---------- */
:root{
  --ink:        #0a0807;
  --ink-2:      #120d0a;
  --panel:      #1a1410;
  --panel-2:    #241a13;
  --wood:       #2a1d15;
  --wood-edge:  #3d2817;
  --coffee:     #5c3d23;
  --coffee-lt:  #8a6240;
  --blood:      #8b1a1a;
  --blood-lt:   #b22222;
  --blood-glow: rgba(178,34,34,.55);
  --ember:      #c8702a;
  --candle:     #f4e4c1;
  --cream:      #e8d5a8;
  --parchment:  #d4c4a0;
  --bone:       #c9b896;
  --muted:      #7a6a55;
  --fog:        rgba(180,160,140,.06);

  --f-display:  "Pirata One", "IM Fell English SC", serif;
  --f-head:     "IM Fell English SC", "Cormorant Garamond", serif;
  --f-body:     "Cormorant Garamond", Georgia, serif;
  --f-type:     "Special Elite", "Courier New", monospace;

  --rule:       rgba(212,196,160,.22);
  --rule-strong:rgba(212,196,160,.45);

  --maxw:       1180px;
  --gutter:     clamp(20px, 5vw, 64px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.65;
  color:var(--parchment);
  background:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  letter-spacing:.01em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}

/* ---------- Atmospheric layers ---------- */
/* wood-grain + radial candle glow base */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(200,112,42,.10), transparent 55%),
    radial-gradient(90% 60% at 50% 120%, rgba(139,26,26,.10), transparent 60%),
    repeating-linear-gradient(90deg,
      rgba(60,40,23,.0) 0 3px,
      rgba(60,40,23,.04) 3px 4px),
    linear-gradient(180deg, #0c0907 0%, #0a0807 40%, #070504 100%);
}
/* vignette */
body::after{
  content:"";
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%, transparent 50%, rgba(0,0,0,.65) 100%);
}
/* film grain */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,-3%)}
  80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}
}
/* drifting fog */
.fog{
  position:fixed;inset:-20% -10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 30% at 20% 30%, var(--fog), transparent 70%),
    radial-gradient(50% 40% at 70% 60%, var(--fog), transparent 70%),
    radial-gradient(35% 25% at 50% 85%, var(--fog), transparent 70%);
  filter:blur(20px);
  animation:fog 38s ease-in-out infinite alternate;
}
@keyframes fog{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-4%,3%) scale(1.08)}
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative}
section{position:relative}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-weight:400;line-height:1.05;text-wrap:balance}
.display{
  font-family:var(--f-display);
  font-weight:400;
  letter-spacing:.02em;
  line-height:.92;
  text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 22px rgba(200,112,42,.18);
}
.head{
  font-family:var(--f-head);
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.eyebrow{
  font-family:var(--f-type);
  font-size:12px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--blood-lt);
  display:inline-flex;align-items:center;gap:.8em;
}
.eyebrow::before,.eyebrow::after{
  content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--blood-lt),transparent);
}
.eyebrow.solo::before{display:none}
.lede{font-size:clamp(18px,1.6vw,22px);font-style:italic;color:var(--bone);max-width:54ch}
p{color:var(--parchment)}
em{color:var(--cream)}

/* blood drip underline */
.drip{
  position:relative;display:inline-block;
}
.drip::after{
  content:"";position:absolute;left:0;right:0;bottom:-.45em;height:10px;
  background:
    radial-gradient(circle at 20% 0, var(--blood) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 0, var(--blood) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 0, var(--blood) 0 2.5px, transparent 4px),
    linear-gradient(90deg,transparent,var(--blood) 12%,var(--blood) 88%,transparent);
  background-size:auto,auto,auto,100% 2px;
  background-repeat:no-repeat;
  background-position:bottom;
  opacity:.85;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4));
}

/* ---------- Buttons ---------- */
.btn{
  --b:var(--blood);
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--f-head);
  text-transform:uppercase;letter-spacing:.18em;font-size:13px;
  padding:.95em 1.6em;
  color:var(--candle);
  background:linear-gradient(180deg, rgba(139,26,26,.18), rgba(20,12,8,.6));
  border:1px solid var(--b);
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 0 22px rgba(139,26,26,.18);
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  cursor:pointer;
}
.btn::before{
  content:"";position:absolute;inset:4px;border:1px solid rgba(244,228,193,.18);pointer-events:none;
}
.btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg, rgba(178,34,34,.32), rgba(20,12,8,.6));
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 0 34px rgba(178,34,34,.45);
}
.btn.ghost{--b:var(--rule-strong);color:var(--cream);background:rgba(20,12,8,.4)}
.btn.ghost:hover{--b:var(--blood-lt);color:var(--candle);background:rgba(139,26,26,.18)}
.btn .arr{font-family:var(--f-body);font-style:italic}

/* ---------- Header / Nav ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(180deg, rgba(10,8,7,.92), rgba(10,8,7,.55) 80%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.site-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--blood-lt),transparent);
  opacity:.5;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;gap:24px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{
  width:46px;height:46px;flex:0 0 auto;
  display:grid;place-items:center;
  font-family:var(--f-display);font-size:30px;color:var(--blood-lt);
  background:radial-gradient(circle at 50% 40%, rgba(178,34,34,.25), transparent 70%);
  border:1px solid var(--rule-strong);
  border-radius:50%;
  text-shadow:0 0 14px var(--blood-glow);
  animation:flicker 4.5s infinite;
}
.brand-name{display:flex;flex-direction:column;line-height:1}
.brand-name b{font-family:var(--f-display);font-weight:400;font-size:22px;letter-spacing:.04em;color:var(--candle)}
.brand-name span{font-family:var(--f-type);font-size:9px;letter-spacing:.4em;color:var(--muted);margin-top:4px;text-transform:uppercase}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  font-family:var(--f-head);
  text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;
  padding:10px 14px;color:var(--bone);
  position:relative;transition:color .2s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;
  background:var(--blood-lt);transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--candle)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

.nav-cta{display:flex;align-items:center;gap:14px}
.hours-pill{
  font-family:var(--f-type);font-size:10.5px;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.hours-pill .dot{
  width:7px;height:7px;border-radius:50%;background:var(--blood-lt);
  box-shadow:0 0 10px var(--blood-glow);animation:flicker 2.4s infinite;
}
.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--rule-strong);border-radius:4px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--candle);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--candle);transition:transform .25s}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

@keyframes flicker{
  0%,100%{opacity:1;filter:brightness(1)}
  3%{opacity:.55;filter:brightness(.7)}
  6%{opacity:1;filter:brightness(1.1)}
  41%{opacity:.7;filter:brightness(.8)}
  43%{opacity:1;filter:brightness(1.05)}
  77%{opacity:.85}
}

/* ---------- Footer ---------- */
.site-foot{
  margin-top:120px;
  border-top:1px solid var(--rule);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.5));
  padding:64px 0 36px;
  position:relative;
}
.site-foot::before{
  content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  width:240px;height:1px;background:linear-gradient(90deg,transparent,var(--blood-lt),transparent);
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.foot-brand p{color:var(--muted);font-style:italic;max-width:34ch;margin-top:14px;font-size:15px}
.foot-col h4{font-family:var(--f-head);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blood-lt);margin-bottom:16px}
.foot-col a{display:block;color:var(--bone);padding:5px 0;font-size:15px;transition:color .2s,transform .2s}
.foot-col a:hover{color:var(--candle);transform:translateX(4px)}
.foot-bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-family:var(--f-type);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.foot-bottom .seal{color:var(--blood-lt)}

/* ---------- Reusable: section header ---------- */
.sec-head{margin-bottom:48px;display:grid;gap:18px;max-width:60ch}
.sec-head h2{font-size:clamp(34px,5vw,58px);color:var(--candle)}
.sec-head .lede{margin-top:4px}

/* ornamental rule */
.orn{
  display:flex;align-items:center;gap:14px;color:var(--rule-strong);
  font-family:var(--f-display);font-size:18px;
}
.orn::before,.orn::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--rule-strong),transparent)}
.orn .skull{color:var(--blood-lt);font-size:14px;text-shadow:0 0 10px var(--blood-glow)}

/* ---------- Cards / panels ---------- */
.panel{
  background:
    linear-gradient(180deg, rgba(36,26,19,.7), rgba(18,13,10,.85));
  border:1px solid var(--rule);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(244,228,193,.03);
  position:relative;
}
.panel::before{
  content:"";position:absolute;inset:6px;border:1px solid rgba(212,196,160,.10);pointer-events:none;
}
.corner{position:absolute;width:14px;height:14px;border:1px solid var(--blood-lt);opacity:.7}
.corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Helpers ---------- */
.center{text-align:center}
.mt-s{margin-top:8px}.mt-m{margin-top:24px}.mt-l{margin-top:48px}.mt-xl{margin-top:80px}
.mx-auto{margin-inline:auto}
.flex{display:flex}.col{display:flex;flex-direction:column}
.gap-s{gap:8px}.gap-m{gap:16px}.gap-l{gap:32px}
.text-blood{color:var(--blood-lt)}.text-cream{color:var(--cream)}.text-muted{color:var(--muted)}
.italic{font-style:italic}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .nav-links,.hours-pill{display:none}
  .nav-toggle{display:flex}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(10,8,7,.97);border-bottom:1px solid var(--rule);
    padding:8px var(--gutter) 24px;
  }
  .nav-links.open a{padding:16px 6px;border-bottom:1px solid rgba(212,196,160,.08)}
  .nav-links.open a::after{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width: 560px){
  body{font-size:17px}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{justify-content:center;text-align:center}
}