/* VIGIL: Blood & Balance — shared styles */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0A0A0A; color: #F5F5F5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; font-family: 'EB Garamond', serif; }
a { color: #cf3b3b; }
a:hover { color: #F5F5F5; }
::selection { background: #5B0000; color: #F5F5F5; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #2a0606; }
input::placeholder, textarea::placeholder { color: rgba(245,245,245,0.32); }

@keyframes vigUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes vigFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vigCue { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(9px); opacity: 1; } }

/* Vignette */
.vignette { position: fixed; inset: 0; z-index: 900; pointer-events: none; box-shadow: inset 0 0 220px 60px rgba(0,0,0,0.85); }

/* Nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px,5vw,60px); transition: background .5s ease, border-color .5s ease; background: transparent; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(8,5,6,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(122,0,0,0.32); }
.nav-brand { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(12px,1.4vw,16px); letter-spacing: 0.16em; color: #F5F5F5; text-decoration: none; white-space: nowrap; }
.nav-brand:hover { color: #F5F5F5; }
.nav-links { display: flex; gap: clamp(20px,3vw,40px); align-items: center; }
.nav-link { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; text-decoration: none; color: rgba(245,245,245,0.58); transition: color .4s; }
.nav-link:hover, .nav-link.active { color: #F5F5F5; }

/* Buttons */
.btn-primary { display: inline-flex; align-items: center; gap: 12px; font-family: 'Cinzel', serif; font-size: 13px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: #F5F5F5; background: #5B0000; border: 1px solid #7A0000; padding: 19px 38px; text-decoration: none; cursor: pointer; transition: background .4s, transform .4s; }
.btn-primary:hover { background: #7A0000; transform: translateY(-2px); color: #F5F5F5; }
.btn-ghost { display: inline-flex; align-items: center; gap: 12px; font-family: 'Cinzel', serif; font-size: 13px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: #F5F5F5; background: transparent; border: 1px solid rgba(245,245,245,0.45); padding: 19px 38px; text-decoration: none; transition: border-color .4s, background .4s; }
.btn-ghost:hover { border-color: #F5F5F5; background: rgba(245,245,245,0.06); color: #F5F5F5; }

/* Social links */
.social-col { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: #8a8580; transition: color .4s; }
.social-col:hover { color: #cf3b3b; }
.social-ring { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border: 1px solid rgba(245,245,245,0.2); border-radius: 50%; color: currentColor; }
.social-round { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 1px solid rgba(245,245,245,0.2); border-radius: 50%; color: #8a8580; transition: color .4s, border-color .4s; }
.social-round:hover { color: #cf3b3b; border-color: rgba(122,0,0,0.6); }
.footer-icon { color: #8a8580; transition: color .4s; }
.footer-icon:hover { color: #cf3b3b; }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1.2s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* Form */
.field { display: flex; flex-direction: column; gap: 10px; }
.field label { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #ef9296; }
.field input, .field textarea { background: #1d1517; border: 1px solid rgba(207,59,59,0.55); color: #ffffff; font-family: 'EB Garamond', serif; font-size: 18px; font-weight: 500; padding: 15px 18px; outline: none; transition: border-color .3s; }
.field input:focus, .field textarea:focus { border-color: #cf3b3b; }
.field textarea { resize: vertical; }
/* Keep autofilled fields dark with light text (fixes invisible text on mobile) */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill {
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px #1d1517 inset;
  box-shadow: 0 0 0 1000px #1d1517 inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Mobile nav toggle (hamburger) — hidden on desktop */
.nav-toggle { display: none; }

@media (max-width: 768px) {
  .nav { padding: 0 20px; }
  .nav-brand { font-size: 13px; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
    gap: 6px; width: 42px; height: 42px; padding: 0;
    background: transparent; border: 0; cursor: pointer; z-index: 1002;
  }
  .nav-toggle span {
    display: block; width: 26px; height: 2px; background: #F5F5F5; border-radius: 2px;
    transition: transform .35s ease, opacity .2s ease;
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(80vw, 300px); height: 100vh;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 30px;
    padding: 0 42px; background: rgba(8,5,6,0.98);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(122,0,0,0.4);
    transform: translateX(100%); transition: transform .42s cubic-bezier(.2,.7,.2,1);
    z-index: 1001;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-link { font-size: 15px; letter-spacing: 0.22em; color: rgba(245,245,245,0.75); }
  body.nav-open { overflow: hidden; }
}