/* ===== Tokens ===== */
:root{
  --bg:#0D251C;
  --bg-raised:#123024;
  --emerald-700:#1C6B49;
  --emerald-500:#2E9468;
  --gold-300:#EAD08A;
  --gold-500:#CDA13A;
  --gold-700:#9A7822;
  --cream:#F6F1E4;
  --ink-60:rgba(246,241,228,.66);
  --ink-40:rgba(246,241,228,.42);
  --rust-500:#C25A33;
  --rust-700:#7E3A20;
  --hairline:rgba(246,241,228,.12);

  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --wrap:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}

h1,h2{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-0.015em;
  margin:0 0 .5em;
  color:var(--cream);
}
h1{font-size:clamp(3.2rem,8vw,6.4rem);}
h2{font-size:clamp(2rem,4vw,3rem);}
p{margin:0 0 1em;color:var(--ink-60);}

.kicker{
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-300);margin:0 0 1.2em;
}
.kicker-center{text-align:center;}
.kicker-rust{color:var(--rust-500);}

/* ===== Buttons ===== */
.btn{
  display:inline-block;padding:14px 30px;border-radius:999px;
  font-weight:600;font-size:.92rem;letter-spacing:.01em;
  border:1px solid transparent;transition:opacity .15s ease, transform .15s ease;
}
.btn:hover{opacity:.88;transform:translateY(-1px);}
.btn-lg{padding:17px 32px;}
.btn-gold{background:var(--gold-500);color:#1B1206;}
.btn-line{border-color:rgba(246,241,228,.4);color:var(--cream);}
.btn-line:hover{background:rgba(246,241,228,.06);}
.btn-rust{background:var(--rust-500);color:var(--cream);}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(13,37,28,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;gap:24px;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.05rem;}
.logo img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.9;}
.main-nav{display:flex;gap:30px;flex:1;justify-content:center;font-size:.92rem;font-weight:500;}
.main-nav a{color:var(--ink-60);}
.main-nav a:hover{color:var(--gold-300);}

/* ===== Hero ===== */
.hero{position:relative;padding:140px 0 100px;overflow:hidden;}
.hero-glow{
  position:absolute;top:-20%;right:-10%;width:60%;height:80%;
  background:radial-gradient(circle, rgba(205,161,58,.20) 0%, rgba(205,161,58,0) 70%);
  pointer-events:none;
}
.hero-inner{
  position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
}
.hero-sub{max-width:460px;font-size:1.08rem;}
.hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}
.hero-figure{display:flex;justify-content:center;}
.floating-cutout{
  max-width:100%;height:auto;
  filter:drop-shadow(0 40px 50px rgba(0,0,0,.5));
}
.hero-figure .floating-cutout{width:340px;}

/* ===== Ticker ===== */
.ticker{
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  background:var(--bg-raised);overflow:hidden;padding:14px 0;
}
.ticker-track{display:flex;width:max-content;animation:scroll 32s linear infinite;}
.ticker-track span{
  white-space:nowrap;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-300);padding-right:0;
}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===== Alternating rows ===== */
.row{padding:120px 0;border-bottom:1px solid var(--hairline);}
.row-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.row-reverse .row-inner{direction:rtl;}
.row-reverse .row-copy,
.row-reverse .row-figure{direction:ltr;}
.row-figure{display:flex;justify-content:center;}
.row-figure .floating-cutout{width:100%;max-width:420px;}
.row-copy p{max-width:420px;font-size:1.05rem;}
.link-arrow{font-weight:600;color:var(--gold-300);}
.link-arrow:hover{color:var(--cream);}

/* ===== Mythic Mash ===== */
.mash{position:relative;padding:140px 0;text-align:center;background:var(--bg-raised);overflow:hidden;}
.mash-glow{
  position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);
  width:70%;height:60%;
  background:radial-gradient(circle, rgba(194,90,51,.14), rgba(46,148,104,.1) 60%, transparent 75%);
  pointer-events:none;
}
.mash-inner{position:relative;}
.mash-title{margin-bottom:.3em;}
.vs{
  display:inline-block;color:var(--rust-500);font-style:italic;
  font-weight:500;font-size:.6em;margin:0 .2em;vertical-align:middle;
}
.mash-figures{
  display:flex;justify-content:center;align-items:center;gap:24px;margin:48px 0;flex-wrap:wrap;
}
.mash-figures img{max-width:200px;}
.mash-sub{max-width:520px;margin:0 auto 32px;}

/* ===== Gag band ===== */
.gag{padding:120px 0;border-bottom:1px solid var(--hairline);}
.gag-inner{display:grid;grid-template-columns:1fr .8fr;gap:56px;align-items:center;}
.gag-copy p{max-width:440px;font-size:1.05rem;}
.gag-copy h2{color:var(--rust-500);}
.gag-figure{display:flex;justify-content:center;}
.gag-figure .floating-cutout{width:260px;}

/* ===== Story ===== */
.story{padding:140px 0;background:radial-gradient(120% 100% at 50% 0%, rgba(46,148,104,.12), transparent 60%);}
.story-inner{max-width:680px;margin:0 auto;text-align:center;}
.story blockquote{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.5rem,3vw,2.1rem);color:var(--gold-300);
  margin:0 0 36px;line-height:1.4;
}
.story-body{font-size:1.05rem;}

/* ===== Blog ===== */
.blog{padding:120px 0;}
.blog-header{margin-bottom:48px;}
.blog-header h2{margin:0;}
.blog-list{border-top:1px solid var(--hairline);}
.post-row{
  display:flex;align-items:center;gap:24px;padding:26px 0;
  border-bottom:1px solid var(--hairline);transition:padding-left .2s ease;
}
.post-row:hover{padding-left:10px;color:var(--gold-300);}
.post-date{
  font-size:.8rem;color:var(--ink-40);min-width:90px;letter-spacing:.04em;text-transform:uppercase;
}
.post-title{flex:1;font-family:var(--font-display);font-size:1.2rem;font-weight:500;}
.post-arrow{color:var(--gold-300);font-size:1.1rem;}

/* ===== Footer ===== */
.site-footer{padding:48px 0 36px;border-top:1px solid var(--hairline);}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);}
.footer-brand img{height:24px;filter:brightness(0) invert(1);opacity:.85;}
.footer-nav{display:flex;gap:24px;flex-wrap:wrap;font-size:.88rem;color:var(--ink-60);}
.footer-nav a:hover{color:var(--gold-300);}
.footer-copy{font-size:.8rem;color:var(--ink-40);width:100%;text-align:center;margin:24px 0 0;}

/* ===== Responsive ===== */
@media (max-width:920px){
  .main-nav{display:none;}
  .hero-inner{grid-template-columns:1fr;text-align:center;}
  .hero-sub{margin:0 auto 1em;}
  .hero-actions{justify-content:center;}
  .row-inner,.row-reverse .row-inner{grid-template-columns:1fr;direction:ltr;text-align:center;}
  .row-copy p{margin:0 auto 1em;}
  .gag-inner{grid-template-columns:1fr;text-align:center;}
  .gag-copy p{margin:0 auto 1em;}
  .post-row{flex-wrap:wrap;}
  .footer-inner{flex-direction:column;text-align:center;}
}

@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;}
  html{scroll-behavior:auto;}
}


/* ===== Articles (blog posts & pages) ===== */
.article{padding:100px 0 120px;}
.article-wrap{max-width:760px;}
.article-title{font-size:clamp(2.2rem,5vw,3.4rem);}
.article-date{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);margin-bottom:2.5em;}
.article-content{font-size:1.05rem;}
.article-content h2,.article-content h3{margin-top:2em;}
.article-content h3{font-family:var(--font-display);font-size:1.45rem;color:var(--cream);}
.article-content img{border-radius:12px;margin:2em auto;filter:drop-shadow(0 24px 32px rgba(0,0,0,.4));}
.article-content a{color:var(--gold-300);font-weight:500;}
.article-content a:hover{color:var(--cream);}
.article-content ul,.article-content ol{color:var(--ink-60);padding-left:1.2em;}
.article-content li{margin-bottom:.4em;}
.article-content blockquote{font-family:var(--font-display);font-style:italic;color:var(--gold-300);border-left:2px solid var(--gold-700);margin:2em 0;padding-left:1.2em;font-size:1.2rem;}
.blog-page{padding-top:100px;}

/* ===== Lucky Lab form ===== */
.lab-form{margin-top:4em;padding:40px;border:1px solid var(--hairline);border-radius:16px;background:var(--bg-raised);}
.lab-form label{display:block;margin-bottom:1.2em;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-60);}
.lab-form input[type=text],.lab-form input[type=email],.lab-form textarea{
  display:block;width:100%;margin-top:.5em;padding:13px 16px;border-radius:10px;
  background:var(--bg);border:1px solid var(--hairline);color:var(--cream);
  font-family:var(--font-body);font-size:1rem;
}
.lab-form input:focus,.lab-form textarea:focus{outline:none;border-color:var(--gold-500);}
.lab-form button{margin-top:.5em;cursor:pointer;border:none;}