/* ============================================================
   glitterbones.zone — v2
   gothic / grunge / dark academia-vampire (Evernight-coded)
   fonts: Cinzel Decorative (display), Cinzel (labels/nav), Cormorant Garamond (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@500;600&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

:root{
  --black: #07060a;
  --void-2: #0f0a10;
  --panel: #150d13;
  --panel-2: #1c1015;
  --wine: #2b0d15;
  --blood: #7c1128;
  --blood-bright: #c22a44;
  --gold: #b8944f;
  --gold-bright: #e3c581;
  --bone: #e7ddc9;
  --text: #cabfc4;
  --text-dim: #82727c;
  --glow-blood: 0 0 10px rgba(194,42,68,.55);
  --glow-gold: 0 0 8px rgba(227,197,129,.4);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124,17,40,.14), transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(184,148,79,.06), transparent 50%),
    linear-gradient(180deg, var(--black) 0%, var(--void-2) 100%);
  color: var(--text);
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  line-height: 1.6;
}

/* film grain / grunge texture */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 998;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* slow drifting fog */
body::after{
  content:"";
  position: fixed; inset:-10%;
  pointer-events:none;
  z-index: 997;
  background: radial-gradient(ellipse 60% 40% at 30% 110%, rgba(124,17,40,.10), transparent 60%);
  animation: fog-drift 18s ease-in-out infinite alternate;
}
@keyframes fog-drift{
  0%{ transform: translateX(-4%) translateY(0); }
  100%{ transform: translateX(4%) translateY(-2%); }
}

::selection{ background: var(--blood); color: var(--bone); }
::-webkit-scrollbar{ width: 12px; }
::-webkit-scrollbar-track{ background: var(--black); }
::-webkit-scrollbar-thumb{ background: var(--blood); border: 2px solid var(--black); }

a{ color: var(--gold-bright); text-decoration: none; }
a:hover{ color: var(--blood-bright); text-shadow: var(--glow-blood); text-decoration: underline; }

/* ---------------- STICKY HEADER / NAV ---------------- */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: rgba(7,6,10,.95);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--gold);
  box-shadow: 0 2px 0 var(--blood), 0 6px 18px rgba(0,0,0,.6);
}
.brand{
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  color: var(--bone);
  text-shadow: var(--glow-gold);
  letter-spacing: 1px;
}
.brand span{ color: var(--blood-bright); }
.brand:hover{ color: var(--bone); text-decoration:none; }

.header-right{ display:flex; align-items:center; gap: 12px; }

.dni-pill{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: 1.5px;
  color: var(--bone);
  background: linear-gradient(180deg, var(--blood), #4a0a17);
  border: 1px solid var(--gold);
  padding: 8px 14px;
  box-shadow: var(--glow-blood);
  animation: pulse-glow 1.8s ease-in-out infinite;
  white-space: nowrap;
}
.dni-pill:hover{ color: #fff; text-decoration:none; }
@keyframes pulse-glow{
  0%,100%{ box-shadow: 0 0 6px rgba(194,42,68,.5); }
  50%{ box-shadow: 0 0 16px rgba(194,42,68,.9), 0 0 26px rgba(194,42,68,.4); }
}

.nav-toggle{ display:none; }
.hamburger{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width: 34px; height: 34px;
  cursor:pointer;
}
.hamburger span{ display:block; height:2px; background: var(--gold-bright); }

.nav-links{
  display:flex; align-items:center; gap: 22px;
  flex-wrap: wrap;
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  width: auto;
}
.nav-links a{ color: var(--text); padding: 6px 2px; border-bottom: 1px solid transparent; }
.nav-links a:hover{ color: var(--gold-bright); text-decoration:none; border-color: var(--gold); text-shadow:none; }
.nav-links a.active{ color: var(--gold-bright); border-color: var(--gold-bright); }
.nav-links a.nav-dni{ display:none; } /* pill already shows DNI; avoid duplicate on desktop */

@media (max-width: 720px){
  .site-header{ padding: 12px 16px; }
  .hamburger{ display:flex; }
  .nav-links{
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-links a{
    padding: 14px 4px;
    border-bottom: 1px solid rgba(184,148,79,.2);
    min-height: 44px;
    display:flex; align-items:center;
  }
  .nav-links a.nav-dni{ display:flex; color: var(--blood-bright); }
  .nav-toggle:checked ~ .nav-links{ max-height: 500px; }
}

/* ---------------- flavor ribbon (replaces marquee) ---------------- */
.ribbon{
  border-bottom: 1px solid rgba(184,148,79,.35);
  background: var(--void-2);
  overflow:hidden; white-space:nowrap;
  padding: 5px 0;
}
.ribbon p{
  display:inline-block; padding-left:100%; margin:0;
  font-family:'Cinzel', serif; font-size:.72rem; letter-spacing:3px;
  text-transform:uppercase; color: var(--text-dim);
  animation: scroll-left 30s linear infinite;
}
@keyframes scroll-left{ 0%{transform:translateX(0);} 100%{transform:translateX(-100%);} }

/* ---------------- site title ---------------- */
.site-title{ text-align:center; padding: 34px 14px 8px; }
.site-title h1{
  font-family:'Cinzel Decorative', serif;
  font-weight: 900;
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  margin:0; letter-spacing: 2px;
  color: var(--bone);
  text-shadow: 0 0 10px rgba(227,197,129,.35), 0 0 30px rgba(124,17,40,.5);
}
.site-title .tagline{
  font-family:'Cormorant Garamond', serif; font-style: italic;
  color: var(--text-dim); font-size: 1.15rem; letter-spacing:.5px;
}
.sparkle-divider{
  text-align:center; color: var(--gold);
  font-size: .85rem; letter-spacing:12px;
  margin: 10px 0 22px; opacity: .8;
}

/* ---------------- gothic plaque panels (was win98 windows) ---------------- */
.win{
  max-width: 880px; margin: 0 auto 26px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--gold);
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.55), inset 0 0 40px rgba(0,0,0,.4);
}
.win::before, .win::after{
  content:""; position:absolute; width:14px; height:14px;
  border: 1px solid var(--gold); opacity:.7;
}
.win::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.win::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

.win-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 18px;
  background: linear-gradient(90deg, #1c0910, #3a0d18 60%, #7c1128);
  border-bottom: 1px solid var(--gold);
  font-family:'Cinzel', serif; font-size:.78rem;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-bright);
}
.win-bar .dots{ display:flex; gap:6px; }
.win-bar .dots span{ width:6px; height:6px; border-radius:50%; background: var(--blood-bright); opacity:.8; }
.win-body{ padding: 22px 24px; }
.win-body h2{
  font-family:'Cinzel', serif; font-size:1rem; letter-spacing:1.5px;
  text-transform: uppercase; color: var(--gold-bright);
  margin-top:0;
}
.win-body p{ margin: 10px 0; }
.win-body ul, .win-body ol{ padding-left: 22px; }
.win-body li{ margin-bottom: 7px; }
.win-body li::marker{ color: var(--blood-bright); }

/* ---------------- placeholder image box ---------------- */
.ph{
  border: 1px solid var(--gold);
  background: repeating-linear-gradient(135deg, #170c11, #170c11 10px, #1f0f16 10px, #1f0f16 20px);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-dim);
  font-family:'Cinzel', serif; font-size:.68rem; letter-spacing:1px;
  text-align:center; padding:6px;
}

/* ---------------- grid / cards ---------------- */
.grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); }
.card{ background: var(--panel-2); border: 1px solid rgba(184,148,79,.5); padding: 14px; }
.card h3{
  font-family:'Cinzel', serif; font-size: .85rem; letter-spacing:1px;
  color: var(--bone); margin: 8px 0 6px; text-transform: uppercase;
}
.card .ph{ height: 140px; margin-bottom:4px; }

/* polaroid gallery */
.polaroid{
  background: #d8cfc0; color:#221417;
  padding: 10px 10px 26px;
  transform: rotate(var(--rot,-2deg));
  box-shadow: 5px 8px 14px rgba(0,0,0,.65);
  font-family:'Cormorant Garamond', serif; font-size: 1.05rem; text-align:center;
}
.polaroid .ph{ height:150px; border-color:#555; background:repeating-linear-gradient(135deg,#b8afa2,#b8afa2 10px,#c7bfae 10px,#c7bfae 20px); color:#555; }
.polaroid:nth-child(2n){ --rot: 2deg; }
.polaroid:nth-child(3n){ --rot: -1deg; }

/* button wall */
.buttonwall{ max-width:880px; margin:0 auto 40px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.btn88{
  width:88px; height:31px; background: var(--void-2);
  border:1px solid var(--gold); color: var(--gold-bright);
  font-family:'Cinzel', serif; font-size:6.5px; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.3;
}

footer.pagefoot{ text-align:center; color: var(--text-dim); font-size:.95rem; margin: 10px 0 50px; font-style: italic; }

/* ---------------- DNI page ---------------- */
body.dni-page{ background: var(--black); }
body.dni-page::after{ display:none; }
.dni-wrap{ max-width: 700px; margin: 50px auto 80px; padding: 0 20px; }
.dni-wrap h1{
  font-family:'Cinzel Decorative', serif; font-size: clamp(1.6rem,7vw,2.1rem);
  color: var(--blood-bright); text-shadow: 0 0 14px rgba(194,42,68,.6);
  border-bottom: 1px solid var(--blood); padding-bottom: 16px; letter-spacing:1px;
}
.dni-wrap p.intro{ color: var(--text-dim); }
.dni-list{ list-style:none; padding:0; font-size: 1.25rem; }
.dni-list li{ border-left: 2px solid var(--blood-bright); padding: 8px 0 8px 16px; margin-bottom: 8px; }
.dni-list li::before{ content:"✕  "; color: var(--blood-bright); }
.blink-cursor{ display:inline-block; width:9px; height:1.1em; background: var(--blood-bright); animation: blink 1s step-end infinite; vertical-align:text-bottom; }
@keyframes blink{ 50%{ opacity:0; } }

@media (max-width: 560px){
  .win-body{ padding: 16px; }
  body{ font-size: 19px; }
}