/* =========================================================
   CRISP BLACK / WHITE + GOLD (Luxury Minimal)
   Works with your current HTML exactly.
========================================================= */
/* Make all character card images align */
#characters .card-img-top img {
  width: 100%;
  height: 260px;      /* same height for all */
  object-fit: cover;  /* keeps proportions clean */
  display: block;
}
:root{
  --bg:#000;
  --text:#fff;
  --muted:rgba(255,255,255,.78);
  --dim:rgba(255,255,255,.55);

  --border:rgba(255,255,255,.16);
  --borderSoft:rgba(255,255,255,.10);

  --gold:#d4af37;
  --goldSoft:rgba(212,175,55,.18);
  --goldFaint:rgba(212,175,55,.10);

  --r:16px;
}


body.light-mode{
  --bg:#fff;
  --text:#000;
  --muted:rgba(0,0,0,.78);
  --dim:rgba(0,0,0,.55);

  --border:rgba(0,0,0,.22);
  --borderSoft:rgba(0,0,0,.12);
}

/* ===== Global ===== */
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  margin:0;
}

/* Typography: keep it mostly WHITE/BLACK (not gray everywhere) */
h1,h2,h3,h4,h5,h6{ color:var(--text); margin-top:0; letter-spacing:-0.01em; }
p{ color:var(--text); opacity:.86; }             /* <- crisp */
.small, .muted, .text-muted{ opacity:.65; }      /* <- secondary */

/* Links */
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--gold); }

/* Focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* Utilities */
.text-accent{ color:var(--gold) !important; }
/* ===== Navbar (WHITE BAR on BLACK SITE) ===== */
#navbar,
.navbar{
  background:#ffffff !important;              /* force white */
  border-bottom:1px solid rgba(0,0,0,.14) !important;
  padding:.9rem 0;
}

/* logo */
.site-logo{
  height:5.25rem;
  width:auto;
  margin-right:1rem;
}

/* brand text */
.navbar .navbar-brand{
  color:#000 !important;
  font-weight:750;
  opacity:1;
}

/* nav links */
.navbar .nav-link{
  color:#000 !important;
  opacity:.78;
  transition:opacity .2s ease, color .2s ease;
}

.navbar .nav-link:hover{
  opacity:1;
  color:var(--gold) !important;
}

/* dropdown menu */
.dropdown-menu{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,.14) !important;
  border-radius:12px !important;
  padding:.5rem;
}

.dropdown-item{
  color:#000 !important;
  opacity:.9;
  border-radius:10px;
}

.dropdown-item:hover{
  background:var(--goldFaint) !important;
  opacity:1;
}

/* toggle button */
#darkModeToggle{
  background:transparent !important;
  border:1px solid rgba(0,0,0,.22) !important;
  color:#000 !important;
  border-radius:12px !important;
  padding:.45rem .9rem !important;
}

#darkModeToggle:hover{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px var(--goldFaint);
}

/* hamburger icon (dark on white) */
.navbar-toggler{
  border-color:rgba(0,0,0,.22) !important;
}
.navbar-toggler-icon{
  filter:none !important;
}


/* ===== Hero ===== */
.hero-reel{
  background:var(--bg) !important;
  padding:4rem 0;
}
.hero-video{
  width:100%;
  max-height:65vh;
  object-fit:cover;
  border-radius:var(--r);
  border:1px solid var(--borderSoft);
  background:#000;
}

/* ===== Cards (make them truly B/W, no template-y shadow) ===== */
.card{
  background:transparent !important;                 /* <- no gray surface */
  border:1px solid var(--borderSoft) !important;     /* <- hairline */
  border-radius:var(--r) !important;
  color:var(--text) !important;
  box-shadow:none !important;                        /* <- remove “bootstrap vibe” */
}

.card .card-title{ color:var(--text) !important; }
.card .card-text{ color:var(--text) !important; opacity:.82; }

.card:hover{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 1px var(--goldSoft) !important;
  transform:translateY(-3px);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* ===== Buttons ===== */
.btn-main,
.btn-primary{
  background:transparent !important;
  border:1px solid var(--gold) !important;
  color:var(--text) !important;
  border-radius:12px !important;
  font-weight:700 !important;
  padding:.7rem 1.2rem !important;
  transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-main:hover,
.btn-primary:hover{
  background:var(--gold) !important;
  color:var(--bg) !important;
  transform:translateY(-2px);
  box-shadow:0 0 0 3px var(--goldFaint);
}

/* ===== Project tiles: STATIC IMG -> HOVER VIDEO ===== */
.media-hover-container{
  position:relative;
  overflow:hidden;
  border-top-left-radius:var(--r);
  border-top-right-radius:var(--r);
  border-bottom:1px solid var(--borderSoft);
  background:#000;
}

.media-hover-container img,
.media-hover-container video{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

.media-hover-container img{ position:relative; z-index:1; }
.media-hover-container video{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.media-hover-container:hover video{ opacity:1; }

/* ===== Audio icons (kill blue) ===== */
.audio-icon{ font-size:48px; color:var(--gold) !important; }

/* ===== Illustration images ===== */
.illustration-card img{
  border-radius:var(--r);
  border:1px solid var(--borderSoft);
}


/* ---------- Project Card ---------- */

.project-card {
  max-width: 1100px;
  margin: 4rem auto;
  padding: 1.5rem;
  background: #0c0c0c;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.project-preview {
  position: relative;
  width: 100%;
  height: 60vh;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}

.project-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.project-info {
  padding: 1.5rem 0 0;
}

.project-info h2 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
}

.project-info p {
  max-width: 720px;
  line-height: 1.6;
  opacity: 0.85;
}

.project-links {
  margin-top: 1.25rem;
  display: flex;
  gap: 1.25rem;
}

.project-links a {
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px;
}

.project-links a:hover {
  opacity: 1;
  border-color: rgba(255,255,255,0.7);
}

/* ===== Footer ===== */
#footer{
  border-top:1px solid var(--borderSoft);
  background:var(--bg);
}

/* ===== Responsive ===== */
@media (max-width:768px){
  .site-logo{ height:4.5rem; }
  .media-hover-container img,
  .media-hover-container video{ height:220px; }
}


/* Make all project cards consistent */
.project-card .media-container {
  height: 220px;
  overflow: hidden;
  background: #000;
}

.project-card .media-container img,
.project-card .media-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional: Make card body text consistent */
.project-card .card-body {
  display: flex;
  flex-direction: column;
}

.project-card .card-text {
  flex-grow: 1;
}