/* 03 — RED & GOLD (DARK ROYALE)
   Pure black + crimson + saturated gold. Casino royale flagship. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0608;--paper:#150d10;--rule:#2a1f24;
  --crim:#c41e3a;--crimD:#6a0012;
  --gold:#ffcc33;--goldL:#ffe680;--goldD:#cc9900;
  --text:#e8d8b8;--mute:#8a7a60;--cream:#fff5d6;
  --glow-c:rgba(196,30,58,.35);--glow-g:rgba(255,204,51,.35);
}
html,body{background:var(--bg);color:var(--text);font-family:Lato,Georgia,serif;font-size:17px;line-height:1.7;min-height:100%}
body{
  background:
    radial-gradient(circle at 20% 0%,rgba(196,30,58,.18) 0%,transparent 40%),
    radial-gradient(circle at 80% 100%,rgba(255,204,51,.10) 0%,transparent 50%),
    var(--bg);
}
a{color:var(--goldL);text-decoration:none}a:hover{color:var(--gold)}
strong{color:var(--gold);font-weight:700}
em{font-style:italic;color:var(--goldL)}

/* ORNAMENT */
.ornament-top,.ornament-bottom{
  height:14px;background:
    linear-gradient(90deg,transparent 0%,var(--gold) 50%,transparent 100%);
  position:relative;margin:0
}
.ornament-top::before,.ornament-bottom::before{
  content:"♛ ❦ ⚜ ❦ ♛";display:block;text-align:center;color:var(--gold);
  font-size:.85rem;letter-spacing:.6em;line-height:14px;
  text-shadow:0 0 10px var(--glow-g)
}

/* MASTHEAD */
.masthead{text-align:center;padding:2.5rem 1rem 1rem;border-bottom:1px solid var(--gold)}
.crest{
  font-family:"Cinzel",serif;font-weight:900;font-size:2.2rem;
  background:linear-gradient(180deg,var(--cream) 0%,var(--gold) 50%,var(--goldD) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.18em;text-transform:uppercase;
  text-shadow:0 0 20px var(--glow-g);margin-bottom:.4rem
}
.motto{font-family:"Cinzel",serif;font-style:italic;font-size:.92rem;color:var(--goldL);letter-spacing:.18em;text-transform:uppercase}

/* HERO */
.opening{padding:2rem 1rem 4rem;text-align:center}
.frame{
  max-width:780px;margin:0 auto;padding:3.5rem 2.5rem;
  background:var(--paper);border:1px solid var(--gold);position:relative
}
.frame::before{
  content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;
  border:1px solid var(--gold);opacity:.4;pointer-events:none
}
.frame::after{
  content:"♠ ♣ ♥ ♦";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--bg);padding:0 1rem;color:var(--gold);font-size:.85rem;letter-spacing:.6em
}
.display{font-family:"Cinzel",serif;font-weight:900;font-size:clamp(2.4rem,5vw,4rem);line-height:1.05;margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:.02em}
.display span{
  background:linear-gradient(180deg,var(--cream) 0%,var(--gold) 50%,var(--goldD) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 24px var(--glow-g)
}
.display span:nth-child(2){
  background:linear-gradient(180deg,var(--crim) 0%,var(--crimD) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.prose-lead{font-size:1.15rem;color:var(--text);font-style:italic;max-width:580px;margin:0 auto 2rem;line-height:1.65}
.prose-lead strong{color:var(--gold);font-style:normal}
.royal-btn,.royal-btn-lg{
  display:inline-block;font-family:"Cinzel",serif;font-weight:700;
  background:linear-gradient(180deg,var(--gold) 0%,var(--goldD) 100%);
  color:#0a0608;padding:1.1rem 2.6rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--goldL);border-radius:0;font-size:.9rem;
  box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--gold),0 12px 36px var(--glow-g);transition:.2s
}
.royal-btn:hover,.royal-btn-lg:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--goldL),0 16px 44px var(--glow-g);color:#0a0608}
.royal-btn-lg{font-size:1.05rem;padding:1.3rem 3.2rem}
.tag{margin-top:1.4rem;font-family:"Cinzel",serif;font-style:italic;font-size:.85rem;color:var(--mute);letter-spacing:.18em;text-transform:uppercase}

/* KW STRIP */
.kw-strip{border-color:var(--rule)!important;color:var(--gold)!important;font-family:"Cinzel",serif!important;margin:2rem auto!important}

/* FIGURES */
.figures{padding:3rem 1rem}
.figures-inner{
  max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--gold);border:1px solid var(--gold);box-shadow:0 0 24px var(--glow-g)
}
.fig{background:var(--paper);padding:2rem 1rem;text-align:center}
.fig-num{font-family:"Cinzel",serif;font-size:2.5rem;font-weight:900;color:var(--gold);text-shadow:0 0 14px var(--glow-g);line-height:1;margin-bottom:.4rem}
.fig-lbl{font-family:"Cinzel",serif;font-size:.74rem;color:var(--cream);letter-spacing:.18em;text-transform:uppercase}

/* WHY ROYAL */
.why-royal{padding:5rem 1rem;text-align:center}
.ornate-h{font-family:"Cinzel",serif;font-weight:900;font-size:2.2rem;color:transparent;background:linear-gradient(180deg,var(--cream) 0%,var(--gold) 50%,var(--goldD) 100%);-webkit-background-clip:text;background-clip:text;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3rem;text-shadow:0 0 24px var(--glow-g)}
.why-three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1000px;margin:0 auto}
.medallion{background:var(--paper);border:1px solid var(--gold);padding:2.4rem 1.8rem;text-align:left;position:relative;transition:.2s}
.medallion::before{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:1px solid var(--gold);opacity:.3;pointer-events:none}
.medallion:hover{transform:translateY(-3px);border-color:var(--goldL)}
.med-num{font-family:"Cinzel",serif;font-size:2rem;font-weight:900;color:var(--crim);margin-bottom:.7rem;line-height:1}
.medallion h3{font-family:"Cinzel",serif;font-weight:700;font-size:1.2rem;color:var(--cream);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.7rem}
.medallion p{color:var(--text);font-size:.96rem;line-height:1.7}

/* MANUSCRIPT */
.manuscript{padding:5rem 1rem 2rem}
.ms-inner{max-width:780px;margin:0 auto;background:var(--paper);border:1px solid var(--gold);padding:4rem 3.5rem;position:relative}
.ms-inner::before{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border:1px solid var(--gold);opacity:.35;pointer-events:none}
.drop{font-size:1.18rem;line-height:1.7;color:var(--cream);font-style:italic;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--rule)}
.drop strong{color:var(--gold);font-style:normal;font-weight:700}
.manuscript h2{font-family:"Cinzel",serif;font-weight:900;font-size:1.7rem;color:var(--cream);text-transform:uppercase;letter-spacing:.02em;margin:2.4rem 0 1rem;padding-top:1rem;border-top:1px solid var(--rule)}
.manuscript h2:first-of-type{border-top:none;padding-top:0}
.manuscript h3{font-family:"Cinzel",serif;font-weight:700;font-size:1.18rem;color:var(--gold);margin:1.4rem 0 .6rem;letter-spacing:.02em}
.manuscript p{color:var(--text);margin-bottom:1rem;font-size:1.04rem;line-height:1.75}
.manuscript p strong{color:var(--gold);font-weight:700}

/* QA / SCROLLS */
.qa-royal{padding:5rem 1rem;max-width:880px;margin:0 auto}
.scrolls{display:flex;flex-direction:column;gap:.6rem}
.scroll{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--gold);padding:1.4rem 1.6rem;transition:.2s}
.scroll:hover{border-left-color:var(--goldL)}
.scroll summary{font-family:"Cinzel",serif;font-weight:700;font-size:1.05rem;color:var(--cream);cursor:pointer;list-style:none;letter-spacing:.02em;position:relative;padding-right:2rem;transition:.2s}
.scroll summary:hover{color:var(--gold)}
.scroll summary::-webkit-details-marker{display:none}
.scroll summary::after{content:"+";position:absolute;right:0;top:-3px;font-size:1.5rem;color:var(--gold)}
.scroll[open] summary::after{content:"−"}
.scroll p{margin-top:1rem;color:var(--text);font-size:.96rem;line-height:1.7}

/* PROCLAMATION (CTA) */
.proclamation{
  text-align:center;padding:5rem 1.5rem;margin:3rem auto 0;max-width:1100px;
  background:radial-gradient(circle at center,rgba(196,30,58,.28) 0%,transparent 60%),var(--paper);
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);position:relative
}
.proclamation::before,.proclamation::after{content:"♠ ♣ ♥ ♦";display:block;color:var(--gold);letter-spacing:.6em;font-size:.85rem}
.proclamation::before{margin-bottom:1.5rem}
.proclamation::after{margin:1.5rem 0 0}
.proc-tag{font-family:"Cinzel",serif;font-style:italic;font-size:.85rem;color:var(--gold);letter-spacing:.32em;text-transform:uppercase;margin-bottom:1rem}
.proclamation h2{font-family:"Cinzel",serif;font-weight:900;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;letter-spacing:.02em;margin-bottom:1.5rem;text-transform:uppercase;background:linear-gradient(180deg,var(--cream) 0%,var(--gold) 50%,var(--goldD) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px var(--glow-g)}
.proclamation p{max-width:540px;margin:0 auto 2rem;color:var(--text);font-style:italic;font-size:1.1rem}
.proclamation p strong{color:var(--gold);font-style:normal}

/* FOOTER */
.royal-foot{background:#000;padding:2rem 1rem 0;border-top:1px solid var(--gold);margin-top:3rem;text-align:center}
.royal-foot p{font-family:"Cinzel",serif;font-style:italic;font-size:.78rem;color:var(--mute);letter-spacing:.16em;text-transform:uppercase;padding:1.5rem 0}

@media(max-width:760px){
  .figures-inner{grid-template-columns:repeat(2,1fr)}
  .why-three{grid-template-columns:1fr}
  .ms-inner{padding:2.2rem 1.4rem}
  .ms-inner::before{top:8px;right:8px;bottom:8px;left:8px}
  .frame{padding:2.4rem 1.4rem}
}