/* Modern & Slick: neon accent gradient, glass surfaces, soft motion */
:root{
  --bg:#0b0f14;
  --surface:#0f1621;
  --text:#e6eef8;
  --muted:#95a3b6;
  --accent:#00e6a8;
  --accent-2:#22d3ee;
  --ring:#7efae1;
  --line:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.06);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
  --container:min(1200px, 92vw);
  --nav-h:70px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(34,211,238,.15), transparent 40%),
    radial-gradient(900px 500px at 90% 10%, rgba(0,230,168,.12), transparent 40%),
    linear-gradient(180deg, #0b0f14 0%, #0b0f14 100%);
}

h1,h2,h3,h4{font-family:Outfit, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;line-height:1.2;margin:.25rem 0 .75rem}
h1{font-size:clamp(2rem, 3.4vw, 3.5rem)}
h2{font-size:clamp(1.6rem, 2.2vw, 2.2rem)}
h3{font-size:1.25rem}
p{margin:.5rem 0 1rem}
.muted{color:var(--muted)}

.skip-link{position:absolute;left:-9999px;top:-9999px;background:var(--text);color:#000;padding:.5rem .75rem;border-radius:10px}
.skip-link:focus{left:1rem;top:1rem}

.container{width:var(--container);margin-inline:auto}
.section{padding:72px 0;scroll-margin-top:calc(var(--nav-h) + 16px)}

/* Glassy nav */
.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.site-nav{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding-inline: clamp(14px, 3vw, 24px);background:rgba(11,15,20,.55)}
.brand{font-weight:700;text-decoration:none;color:var(--text)}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.75rem}
.site-nav a{color:var(--text);text-decoration:none;padding:.45rem .7rem;border-radius:10px}
.site-nav a:hover{background:var(--glass)}
.site-nav a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* Mobile nav toggle */
.nav-toggle{display:none;position:relative;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--glass);cursor:pointer}
.nav-toggle span{position:absolute;left:10px;right:10px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s ease, top .2s ease, opacity .2s ease}
.nav-toggle span:nth-child(1){top:12px}
.nav-toggle span:nth-child(2){top:20px}
.nav-toggle span:nth-child(3){top:28px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .site-nav ul{position:absolute;right:14px;top:calc(var(--nav-h) + 10px);background:rgba(11,15,20,.9);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:10px;flex-direction:column;gap:.25rem;min-width:180px;display:none}
  .site-nav ul[data-open="true"]{display:flex}
}

/* Buttons */
.btn{display:inline-block;border:none;border-radius:999px;padding:.78rem 1.1rem;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .15s ease, filter .15s ease;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.primary{color:#041016;background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.small{padding:.5rem .8rem;border-radius:12px;font-weight:600}

/* Hero */
.hero{padding: clamp(36px, 6vw, 120px) 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr}}
.hero .lead{color:var(--muted)}
.hero-media img{border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow)}

/* About */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}
@media (max-width:1000px){.about-grid{grid-template-columns:1fr}}
.about-media img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
.pills{display:flex;gap:.5rem;flex-wrap:wrap;padding:0;margin:.5rem 0 0;list-style:none}
.pills li{padding:.35rem .6rem;border-radius:999px;background:var(--glass);border:1px solid var(--line)}

/* Recipes */
.section-header{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.recipe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1200px){.recipe-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.recipe-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.recipe-grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease}
.card:hover{transform:translateY(-2px)}
.card img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover}
.card-body{display:flex;align-items:center;justify-content:space-between;padding:12px}
.card-body h3{margin:0;font-size:1.1rem}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:2000}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-card{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);border-radius:16px;max-width:min(980px, 94vw);margin:6vh auto;padding:16px;box-shadow:var(--shadow);outline:none}
.modal-close{position:absolute;top:8px;right:8px;background:var(--glass);border:1px solid var(--line);border-radius:999px;width:36px;height:36px;font-size:20px;color:var(--text);cursor:pointer}
.modal-meta{display:flex;gap:12px;color:var(--muted)}
.modal-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
@media (max-width:800px){.modal-columns{grid-template-columns:1fr}}

@media print{body *{visibility:hidden} #recipe-modal, #recipe-modal *{visibility:visible} #recipe-modal{position:static}}

/* Videos */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.video-grid{grid-template-columns:1fr}}
.yt-lite{position:relative;background:#0e1520;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer}
.yt-lite img{width:100%;display:block;opacity:.9}
.yt-play{position:absolute;inset:auto auto 12px 12px;background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#041016;padding:.25rem .55rem;border-radius:12px;font-weight:700}
.yt-title{position:absolute;inset:auto 12px 12px auto;background:var(--glass);border:1px solid var(--line);padding:.25rem .55rem;border-radius:12px}

/* Linked video cards (hydrated) */
.yt-card{position:relative;display:block;text-decoration:none;color:var(--text);background:#0e1520;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.yt-card img{display:block;width:100%}

/* Recipe grid uses <a class="card"> */
.recipe-grid .card{text-decoration:none;color:var(--text)}

/* Social */
.social-cards{display:flex;gap:12px;flex-wrap:wrap}
.social-card{display:inline-flex;gap:.5rem;align-items:center;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:.5rem .8rem;text-decoration:none;color:var(--text)}
.social-card strong{font-weight:700}
.social-card span{color:var(--muted)}

/* Sponsors */
.sponsors{text-align:center}
.sponsors p{max-width:720px;margin:0 auto 12px}

/* Contact */
.link{color:var(--accent-2);text-underline-offset:3px}
.link:hover{filter:brightness(1.1)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:24px 0;background:#0a0f15}
.footer-grid{display:flex;justify-content:space-between;gap:16px;align-items:center;width:var(--container);margin-inline:auto}
.social-bar{display:flex;gap:.75rem;list-style:none;margin:0;padding:0}
.footer-grid a{color:var(--text);text-decoration:none}
.footer-grid a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}