/* ============================================================
   OUDISTIC — Design System
   Palette drawn from brand mark: night sky + oud strings in gold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --night:        #0a1424;
  --night-deep:   #060d18;
  --night-panel:  #0f1e33;
  --night-panel-2:#122542;
  --line:         rgba(217,180,120,0.16);

  --gold:         #d9b478;
  --gold-bright:  #f0cf95;
  --gold-deep:    #a97c46;
  --silver-blue:  #7d93ab;

  --ivory:        #efe9db;
  --ivory-dim:    #aab1bd;
  --ivory-faint:  #6d7686;

  --display:  'Cormorant Garamond', serif;
  --body:     'Jost', sans-serif;
  --mono:     'IBM Plex Mono', monospace;

  --gap: clamp(1.2rem, 3vw, 2.5rem);
  --container: 1180px;
}

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

body{
  margin:0;
  background:var(--night);
  color:var(--ivory);
  font-family:var(--body);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- starfield ambience ---------- */
.stars{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 62% 38%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 88% 68%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 82%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 8% 48%, rgba(255,255,255,.35), transparent 60%);
  background-repeat:no-repeat;
  animation:twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{ 0%{opacity:.6} 100%{opacity:1} }
@media (prefers-reduced-motion:reduce){ .stars{ animation:none; } }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; margin:0; color:var(--ivory); }
p{ margin:0; }

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gap);
  position:relative;
  z-index:1;
}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:1.4em; height:1px;
  background:var(--gold-deep);
  display:inline-block;
}

/* ---------- signature element: the strings ---------- */
.string-divider{
  --n:9;
  height:64px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:10px;
  margin:0 auto;
  width:fit-content;
}
.string-divider span{
  width:1px;
  height:100%;
  background:linear-gradient(to bottom, transparent, var(--gold) 40%, var(--gold-bright) 50%, var(--gold) 60%, transparent);
  transform-origin:top center;
  animation:pluck 3.2s ease-in-out infinite;
  opacity:.75;
}
.string-divider span:nth-child(odd){ animation-delay:.15s; height:78%; }
.string-divider span:nth-child(3n){ animation-delay:.4s; height:100%; }
@keyframes pluck{
  0%,100%{ transform:scaleY(1) translateX(0); }
  50%{ transform:scaleY(.97) translateX(1px); }
}
@media (prefers-reduced-motion:reduce){ .string-divider span{ animation:none; } }

/* underline "string" on interactive text */
.string-link{
  position:relative;
  padding-bottom:.35em;
}
.string-link::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--gold-deep);
  transform:scaleX(.18);
  transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), background .3s;
}
.string-link:hover::after,
.string-link:focus-visible::after,
.string-link.active::after{
  transform:scaleX(1);
  background:var(--gold-bright);
}

/* ---------- header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(to bottom, rgba(6,13,24,.92), rgba(6,13,24,.75));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:1.05rem;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--display);
  letter-spacing:.18em;
  font-size:1.15rem;
  color:var(--ivory);
}
.brand img{ height:34px; width:auto; }
.nav-links{
  display:flex; gap:2.1rem;
  list-style:none; margin:0; padding:0;
  font-family:var(--body);
  font-size:.86rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); color:var(--gold);
  width:40px; height:36px; border-radius:2px; cursor:pointer;
}

@media (max-width:820px){
  .nav-links{
    position:fixed; inset:64px 0 auto 0;
    flex-direction:column; gap:0;
    background:var(--night-deep);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden;
    transition:max-height .4s ease;
  }
  .nav-links.open{ max-height:340px; }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links a{ display:block; padding:1rem var(--gap); }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:86vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding-block:6rem 4rem;
  background:
    radial-gradient(60% 55% at 50% 28%, rgba(217,180,120,.10), transparent 70%),
    var(--night);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:url('../images/banner.png') center 30% / cover no-repeat;
  opacity:.55;
  mask-image:linear-gradient(to bottom, black 40%, transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom, black 40%, transparent 92%);
}
.hero-inner{ position:relative; z-index:2; max-width:760px; margin-inline:auto; }
.hero .eyebrow{ justify-content:center; margin-bottom:1.4rem; }
.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.05;
  letter-spacing:.01em;
}
.hero h1 em{ font-style:italic; color:var(--gold-bright); }
.hero p.lead{
  margin-top:1.4rem;
  color:var(--ivory-dim);
  font-size:1.08rem;
  max-width:46ch;
  margin-inline:auto;
}
.hero-cta{ margin-top:2.4rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--body);
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.95rem 1.9rem;
  border:1px solid var(--gold-deep);
  border-radius:2px;
  transition:all .3s ease;
  display:inline-block;
}
.btn:hover{ background:rgba(217,180,120,.08); border-color:var(--gold-bright); }
.btn.solid{
  background:linear-gradient(135deg, var(--gold-deep), var(--gold));
  color:var(--night-deep);
  border-color:transparent;
  font-weight:500;
}
.btn.solid:hover{ filter:brightness(1.08); background:linear-gradient(135deg, var(--gold-deep), var(--gold)); }
.btn.btn-sm{ padding:.4rem .9rem; font-size:.7rem; }

/* ---------- sections ---------- */
section{ padding-block:5.5rem; position:relative; z-index:1; }
section.tight{ padding-block:3.5rem; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 3rem; }
.section-head h2{ font-size:clamp(1.9rem, 4vw, 2.7rem); margin-top:.8rem; }
.section-head p{ color:var(--ivory-dim); margin-top:1rem; }

.divider{
  height:1px; width:100%;
  background:linear-gradient(to right, transparent, var(--line) 20%, var(--line) 80%, transparent);
  border:none; margin:0;
}

/* ---------- grid / cards ---------- */
.grid{ display:grid; gap:1.6rem; }
.grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
.grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:900px){
  .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr; }
}

.card{
  background:linear-gradient(180deg, var(--night-panel), var(--night-panel-2));
  border:1px solid var(--line);
  border-radius:3px;
  padding:2rem;
  transition:border-color .3s ease, transform .3s ease;
}
.card:hover{ border-color:var(--gold-deep); transform:translateY(-3px); }
.card .eyebrow{ margin-bottom:1rem; }
.card h3{ font-size:1.4rem; margin-bottom:.7rem; }
.card p{ color:var(--ivory-dim); font-size:.95rem; }

/* whole-card-clickable post cards (blog listing) */
.oud-post-card{ position:relative; }
.oud-card-link::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
}
.oud-card-meta-row{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-top:1.2rem;
  flex-wrap:wrap;
}
.oud-post-card .eyebrow a{ position:relative; z-index:2; }

/* ---------- tracklist (music page) ---------- */
.tracklist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.track{
  display:grid;
  grid-template-columns:3rem 1fr auto auto;
  align-items:center;
  gap:1.4rem;
  padding:1.3rem .5rem;
  border-bottom:1px solid var(--line);
  transition:background .25s ease;
}
.track:hover{ background:rgba(217,180,120,.04); }
.track-num{ font-family:var(--mono); color:var(--gold-deep); font-size:.95rem; }
.track-title{ font-family:var(--display); font-size:1.3rem; }
.track-title span{ display:block; font-family:var(--body); font-size:.8rem; color:var(--ivory-faint); margin-top:.15rem; letter-spacing:.04em; }
.track-len{ font-family:var(--mono); color:var(--ivory-dim); font-size:.85rem; }
.track-play{
  width:38px; height:38px; border:1px solid var(--gold-deep); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold);
  font-size:.75rem;
}
@media (max-width:640px){
  .track{ grid-template-columns:2rem 1fr auto; }
  .track-len{ display:none; }
}

/* ---------- events list ---------- */
.event{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:1.6rem;
  align-items:center;
  padding:1.8rem 0;
  border-bottom:1px solid var(--line);
}
.event-date{ font-family:var(--display); font-size:1.15rem; color:var(--gold); }
.event-date span{ display:block; font-family:var(--mono); font-size:.75rem; color:var(--ivory-faint); letter-spacing:.1em; margin-top:.2rem; }
.event h3{ font-size:1.3rem; }
.event p{ color:var(--ivory-dim); font-size:.9rem; margin-top:.3rem; }
@media (max-width:700px){
  .event{ grid-template-columns:1fr; text-align:left; gap:.5rem; }
}

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.4rem; }
.field label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-dim); }
.field input, .field textarea{
  background:var(--night-panel);
  border:1px solid var(--line);
  color:var(--ivory);
  padding:.9rem 1rem;
  border-radius:2px;
  font-family:var(--body);
  font-size:.95rem;
  resize:vertical;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--gold);
}

/* ---------- footer ---------- */
footer.site{
  border-top:1px solid var(--line);
  padding-block:3.5rem 2.2rem;
  background:var(--night-deep);
}
.footer-grid{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:2.5rem;
  margin-bottom:2.5rem;
}
.footer-grid .brand{ font-size:1.3rem; }
.footer-links{ display:flex; gap:2.4rem; flex-wrap:wrap; }
.footer-col h4{ font-family:var(--body); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-faint); margin-bottom:.9rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; font-size:.9rem; color:var(--ivory-dim); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.78rem; color:var(--ivory-faint);
  padding-top:1.8rem; border-top:1px solid var(--line);
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  padding-block:8rem 3.5rem;
  text-align:center;
  background:radial-gradient(60% 70% at 50% 0%, rgba(217,180,120,.09), transparent 70%);
}
.page-hero h1{ font-size:clamp(2.2rem, 5vw, 3.4rem); margin-top:1rem; }