/* Duende Media® Group landing — shared styles */
:root{
  --dm-font: "VariationC", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --white: #ffffff;
  --overlay-max: 1080px;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;padding:0;}
body{font-family:var(--dm-font); line-height:1.4; color:var(--white);}

/* Base (index.html) */
.base-wrap{
  position:relative; min-height:100vh; overflow:hidden;
  background: #000;
}
.base-bg{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 40%, #1a1a2e 0%, #0a0a0f 60%, #000 100%);
  z-index:0;
}
.base-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("./assets/img/Screenshot 2025-09-01 at 11.29.49 AM.jpg"); /* REPLACE with true starlight image if desired */
  background-size: cover; background-position: center;
  opacity: .25;
  pointer-events:none;
}
.logo-wrap{
  position:absolute; inset:0; display:grid; place-items:center; z-index:1; padding:4vmin;
}
.logo{
  width:min(90vw, 1200px);
  height:auto;
  display:block;
  filter: drop-shadow(0 0 24px rgba(0,140,255,.45)) drop-shadow(0 0 64px rgba(0,140,255,.25));
  user-select:none;
}
/* Overlay iframe */
.overlay-frame{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; z-index:2; background: transparent;
}

/* overlay.html transparent page */
.overlay{
  background: transparent; color:#fff;
  min-height:100vh; padding: clamp(24px, 6vmin, 64px);
  display:flex; align-items:flex-start; justify-content:center;
}
.overlay .panel{
  width: 100%; max-width: var(--overlay-max);
}
h1,h2{font-weight:800; letter-spacing:.02em; margin:0 0 .5em 0;}
h1{font-size: clamp(28px, 4.6vw, 54px);}
h2{font-size: clamp(20px, 2.6vw, 28px); margin-top:2rem;}
p{margin:.6em 0 1.2em;}
ul{margin:.25em 0 1.4em 1.2em;}
li{margin:.25em 0;}
.small{opacity:.8; font-size:.95em;}
.hr{height:1px; background: rgba(255,255,255,.25); margin: 1.5rem 0;}
/* links */
a{color:#fff; text-underline-offset: .18em;}
a.btn{
  display:inline-block; padding:.7em 1.05em; border:1px solid rgba(255,255,255,.5); border-radius:999px;
  text-decoration:none; backdrop-filter: blur(2px);
}
/* @font-face placeholder (drop your font files into assets/fonts) */
@font-face{
  font-family: "VariationC";
  src: url("./assets/fonts/variation_c.woff2") format("woff2"),
       url("./assets/fonts/variation_c.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}


/* === Added variants === */

/* === Optional alternate fonts ===
   Drop your files here: /assets/fonts/DuendeThin.woff2, DuendeDepth.woff2
*/
@font-face{
  font-family: "DuendeThin";
  src: url("./assets/fonts/DuendeThin.woff2") format("woff2");
  font-weight: 200 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "DuendeDepth";
  src: url("./assets/fonts/DuendeDepth.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

/* Theme: Thin (white) */
body.thin h1, body.thin h2{
  font-family: "DuendeThin", var(--dm-font);
  font-weight: 300;
  letter-spacing: .03em;
  color: #fff;
  text-shadow: none;
}

/* Theme: 3D Depth (white with shading) */
body.depth h1, body.depth h2{
  font-family: "DuendeDepth", var(--dm-font);
  font-weight: 600;
  color: #fff;
  /* Faux 3D extrusion using layered shadows */
  text-shadow:
    0.5px 0.5px 0 rgba(0,0,0,.35),
    1px 1px 0 rgba(0,0,0,.30),
    1.5px 1.5px 0 rgba(0,0,0,.25),
    2px 2px 0 rgba(0,0,0,.20),
    2.5px 2.5px 2px rgba(0,0,0,.35);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

/* Slightly tighter heading sizes for thin/3D variants */
body.thin h1, body.depth h1{ font-size: clamp(26px, 4.2vw, 52px); }
body.thin h2, body.depth h2{ font-size: clamp(18px, 2.4vw, 26px); }