:root{
  --bg:#0e0e12;        /* inky black */
  --panel:#151520;     /* soft panel */
  --ink:#eaeaf6;       /* off-white text */
  --muted:#a7a7c2;
  --accent:#b388ff;    /* lavender */
  --accent-2:#ff66aa;  /* candy pink */
  --shadow: 0 6px 24px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6}

.wrap{width:min(1100px,92%);margin:0 auto}

.site-header{position:sticky;top:0;background:linear-gradient(180deg,#0e0e12 0%, rgba(14,14,18,.7) 100%);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:800}
.brand-mark{filter:drop-shadow(0 0 4px rgba(179,136,255,.65))}
.brand-text{letter-spacing:.2px}
.main-nav a{color:var(--muted);text-decoration:none;margin-left:1rem;padding:.4rem .75rem;border-radius:12px}
.main-nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}

.site-main{padding:40px 0 64px}

.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; vertical-align: top; margin-bottom:42px}
.hero .panel{background:var(--panel);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero h1{margin:.25rem 0 1rem 0;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:.2px}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border-radius:999px;background:rgba(179,136,255,.12);color:var(--accent);font-weight:600;font-size:.85rem;border:1px solid rgba(179,136,255,.25)}
.cta-row{display:flex;gap:12px;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1rem;border-radius:14px;border:1px solid transparent;text-decoration:none;font-weight:700}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0b0b0f}
.btn.ghost{border-color:rgba(255,255,255,.15);color:var(--ink)}
.btn:hover{transform:translateY(-1px)}

.panel{background:var(--panel);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.section-title{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.4px;font-size:clamp(22px,3vw,30px);margin:0 0 14px 0}

.grid{display:grid;gap:18px; vertical-align: top;}
.grid.cols-3{grid-template-columns:repeat(3,1fr); align-items: center;}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.hero{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr}.grid.cols-2{grid-template-columns:1fr}}

.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px; vertical-align: top;}
.card h3{margin:.2rem 0 .35rem 0}
.card p{color:var(--muted);margin:.25rem 0}

.tag{display:inline-block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:var(--muted);padding:.2rem .55rem;border-radius:999px;font-size:.8rem;margin-right:.35rem}

.wf{height:180px;border-radius:12px;border:2px dashed rgba(255,255,255,.16);background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 10px, transparent 10px 20px);display:grid;place-items:center;color:var(--muted);margin-bottom:.6rem}
.wf.tall{height:260px}
.small{font-size:.9rem;color:var(--muted)}

/* Shared base for all media containers */
.media {overflow: hidden; display: flex; align-items: center; justify-content: center;}
.media img {width: 100%; height: 100%; object-fit: cover; display: block;}/* keeps proportions, crops if necessary */

/* Specific variants */
.headshot {aspect-ratio: 1 / 1; max-width: 320px; max-height: 320px;}
.studio-mark {width: 100%; height: 100%}
.key-art {vertical-align: top; align-items: center; max-width: 430px; max-height: 320px;}


.section{margin:30px 0}
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:28px 0;color:var(--muted)}

.meter{
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}

.meter-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(200,182,255,.75), rgba(167,243,208,.55));
}

.meter-ticks{
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 1px,
      transparent 1px,
      transparent 10%
    );
  opacity: .35;
  pointer-events: none;
}