/* =====================================================================
   LEGACY OF THE ARK (the novels) — bespoke series microsite
   Grounded survival sci-fi: cold slate & black, steel blue, signal cyan.
   Tense, restrained, discovery-driven — the literary heart of the Ark
   universe, cross-linked to the Broken Ark Studios game.
   ===================================================================== */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-400-italic.woff2') format('woff2');}

body[data-page="legacy"]{
  --void:#060a0f; --panel:#0c131c; --panel-2:#111c28; --line:rgba(120,170,210,.16);
  --ink:#e8f1f9; --muted:#8ea3b8; --cyan:#41c8ff; --cyan-2:#8ae3ff; --steel:#9fb6cc;
  --sans:'Archivo',system-ui,sans-serif; --mono:ui-monospace,'Cascadia Code',Consolas,monospace; --serif:'Fraunces',Georgia,serif;
  background:var(--void); color:var(--ink); padding-top:var(--nav-h); font-family:var(--sans);
  line-height:1.7; overflow-x:hidden;
}
body[data-page="legacy"]::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(60vw 55vh at 70% -8%,rgba(65,200,255,.16),transparent 60%),
    radial-gradient(46vw 44vh at 0% 30%,rgba(80,120,160,.12),transparent 60%),var(--void);
}
.lg{max-width:1140px;margin-inline:auto;padding-inline:clamp(18px,4vw,44px)}
.lg-narrow{max-width:740px}
body[data-page="legacy"] h1,body[data-page="legacy"] h2,body[data-page="legacy"] h3{font-weight:800;letter-spacing:-.01em;line-height:1.04;text-transform:uppercase}
.lg-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.26em;font-size:.72rem;color:var(--cyan);display:inline-flex;align-items:center;gap:.6em}
.lg-label::before{content:"▸"}
.lg-em{color:var(--cyan-2)}

/* ---- HERO ---------------------------------------------------------- */
.lg-hero{position:relative;min-height:min(88vh,800px);display:flex;align-items:flex-end;overflow:hidden}
.lg-hero .bg{position:absolute;inset:0;z-index:-1}
.lg-hero .bg img{width:100%;height:100%;object-fit:cover}
.lg-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--void) 5%,rgba(6,10,15,.5) 45%,rgba(6,10,15,.15) 100%)}
.lg-hero .inner{position:relative;z-index:1;padding-block:clamp(36px,6vw,72px);max-width:680px}
.lg-hero .crumb a{color:var(--cyan-2);font-weight:600;font-size:.85rem}
.lg-hero h1{font-size:clamp(2.4rem,6.5vw,5rem);margin:.4rem 0 .4rem;text-shadow:0 4px 30px rgba(0,0,0,.7)}
.lg-hero .tagline{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.6vw,1.8rem);color:var(--cyan-2);text-transform:none;max-width:28ch}
.lg-hero .cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.btn-sig{display:inline-flex;align-items:center;gap:.5em;background:var(--cyan);color:#04121c;font-weight:700;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
  padding:.95em 1.6em;border-radius:4px;box-shadow:0 12px 40px -12px rgba(65,200,255,.6);transition:transform .18s,box-shadow .18s}
.btn-sig:hover{transform:translateY(-2px);box-shadow:0 20px 54px -14px rgba(65,200,255,.85)}
.btn-hull{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);color:var(--ink);font-weight:600;padding:.95em 1.6em;border-radius:4px;transition:.18s}
.btn-hull:hover{border-color:var(--cyan);color:var(--cyan-2)}

/* ---- PREMISE ------------------------------------------------------- */
.lg-premise{padding:clamp(56px,8vw,120px) 0;text-align:center}
.lg-premise h2{font-size:clamp(1.9rem,4.4vw,3rem);margin:1rem auto;max-width:24ch}
.lg-premise p{color:var(--muted);max-width:62ch;margin:0 auto;font-size:1.1rem;text-transform:none}

/* ---- LAWS band ----------------------------------------------------- */
.lg-laws{padding:clamp(48px,7vw,100px) 0;background:linear-gradient(180deg,var(--panel),var(--void));border-block:1px solid var(--line)}
.laws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.laws-grid{grid-template-columns:1fr}}
.law{background:var(--panel);padding:clamp(22px,3vw,34px);text-align:center}
.law .n{font-family:var(--mono);color:var(--cyan);font-size:.8rem;letter-spacing:.1em}
.law p{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ink);margin-top:.6rem;text-transform:none}

/* ---- TRILOGY ------------------------------------------------------- */
.lg-books{padding:clamp(56px,8vw,120px) 0}
.lg-head{text-align:center;max-width:700px;margin:0 auto clamp(28px,4vw,48px)}
.lg-head h2{font-size:clamp(2rem,4.4vw,3.2rem);margin:.6rem 0}
.lg-head p{color:var(--muted);text-transform:none}
.lg-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px)}
@media(max-width:720px){.lg-shelf{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}
.lg-book{text-align:center}
.lg-book .cv{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 50px -22px rgba(0,0,0,.8);aspect-ratio:2/3;transition:transform .3s}
.lg-book:hover .cv{transform:translateY(-6px)}
.lg-book .cv img{width:100%;height:100%;object-fit:cover}
.lg-book .cv.tbd{display:grid;place-items:center;background:linear-gradient(160deg,var(--panel-2),var(--panel));text-align:center}
.lg-book .cv.tbd span{font-family:var(--mono);color:var(--muted);font-size:.8rem;letter-spacing:.1em;padding:1rem}
.lg-book .mode{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--cyan);margin-top:1rem;text-transform:uppercase}
.lg-book h3{font-size:1.3rem;margin:.2rem 0 .4rem}
.lg-book p{color:var(--muted);font-size:.9rem;text-transform:none;max-width:34ch;margin:0 auto .6rem}
.lg-book .badge{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3em .7em;border-radius:3px;border:1px solid var(--cyan);color:var(--cyan-2)}

/* ---- THE ARK (world) ----------------------------------------------- */
.lg-ark{padding:clamp(56px,8vw,120px) 0;background:linear-gradient(180deg,var(--panel),var(--void));border-block:1px solid var(--line)}
.lg-ark .inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,56px);align-items:center}
.lg-ark img{width:100%;border:1px solid var(--line);border-radius:8px}
.lg-ark h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:.5rem 0 1rem}
.lg-ark p{color:var(--muted);text-transform:none;margin-bottom:1rem;max-width:52ch}
@media(max-width:820px){.lg-ark .inner{grid-template-columns:1fr}.lg-ark img{order:-1}}

/* ---- CONCEPT ART --------------------------------------------------- */
.lg-cast{padding:clamp(48px,7vw,100px) 0}
.cast-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:640px){.cast-row{grid-template-columns:1fr}}
.cast-frame{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#0a1018}
.cast-frame img{width:100%;display:block}
.cast-frame figcaption{position:absolute;left:0;bottom:0;padding:.5rem .8rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-2);background:linear-gradient(transparent,rgba(6,10,15,.85))}

/* ---- GAME CROSS-LINK + CTA ----------------------------------------- */
.lg-game{padding:clamp(48px,7vw,100px) 0}
.lg-game .box{border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,var(--panel-2),var(--panel));padding:clamp(28px,4vw,52px);text-align:center}
.lg-game h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:.6rem}
.lg-game p{color:var(--muted);max-width:54ch;margin:0 auto 1.6rem;text-transform:none}
.lg-cta{padding:clamp(56px,8vw,120px) 0;text-align:center}
.lg-cta h2{font-size:clamp(2rem,5vw,3.2rem);margin:1rem 0}
.lg-cta p{color:var(--muted);max-width:50ch;margin:0 auto 2rem;text-transform:none}
.lg-cta .cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}