/* Lunari Vespero — Full CSS
   - Typographic identity with Noto Serif KR for brand/headings
   - Mobile-first layout, minimal JS dependencies
   - Accessibility: reduced-motion and reduced-data fallbacks
*/

/* ============================= */
/* Design tokens                 */
/* ============================= */
:root{
  --bg:#0b0f14;
  --fg:#e7ecef;
  --muted:#aab7c4;
  --accent:#9cc3d5;
  --card:#121821;
  --border:rgba(255,255,255,0.06);

  /* Fluid type scale for headings */
  --h1: clamp(2.4rem, 4.5vw, 4rem);
  --h2: clamp(1.6rem, 2.6vw, 2.4rem);
  --h3: clamp(1.2rem, 1.8vw, 1.5rem);
}

/* ============================= */
/* Base                          */
/* ============================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Noto Serif KR", Helvetica, Arial, sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.65;
  text-rendering:optimizeLegibility;
}

/* Headings + typographic logotype */
h1,h2,h3,h4,.brand{
  font-family: "Noto Serif KR", serif;
  font-feature-settings: "liga" 1, "kern" 1;
  letter-spacing: 0.01em;
}
h1{ font-size:var(--h1); font-weight:300; margin:0 0 .5rem }
h2{ font-size:var(--h2); font-weight:300; margin:0 0 .5rem }
h3{ font-size:var(--h3); font-weight:400; margin:0 0 .25rem }

.muted{ color:var(--muted) }
.link{ color:var(--accent); text-decoration:none }
.link:hover{ text-decoration:underline }

/* Layout helpers */
.container{ max-width:1100px; margin:0 auto; padding:0 1rem }
.section{ padding:3rem 0 }
.split{ display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center }
@media (max-width:900px){ .split{ grid-template-columns:1fr } }

/* ============================= */
/* Header / Nav                  */
/* ============================= */
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(11,15,20,0.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  min-height:72px;
}
.brand{
  color:var(--fg); text-decoration:none; font-weight:300; letter-spacing:.02em; font-size: xx-large;
}

.nav{ position:relative }
.nav-toggle{
  display:none; background:none; color:var(--fg);
  border:1px solid rgba(255,255,255,0.25);
  padding:.4rem .6rem; border-radius:6px
}
.nav-menu{
  display:flex; gap:1rem; list-style:none; margin:0; padding:0
}
.nav-menu a{ color:var(--fg); text-decoration:none; opacity:.85 }
.nav-menu a:hover{ opacity:1 }

@media (max-width:800px){
  .nav-toggle{ display:inline-block }
  .nav-menu{
    display:none; flex-direction:column; gap:.75rem;
    position:absolute; right:1rem; top:64px;
    background:var(--card); padding:1rem;
    border:1px solid var(--border); border-radius:8px
  }
  .nav-menu.open{ display:flex }
}

/* ============================= */
/* Hero                          */
/* ============================= */
.hero{
  position:relative; height:100vh; min-height:420px;
  display:grid; place-items:center; overflow:hidden;
  border-bottom:1px solid var(--border)
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  filter:contrast(1.05) saturate(1.1) brightness(.8)
}
.hero-overlay{ position:relative; text-align:center; z-index:1; padding:2rem }
.hero-overlay p{ margin:0 0 1rem; color:var(--muted) }
.btn{
  display:inline-block; background:transparent; color:var(--fg);
  border:1px solid var(--fg); padding:.6rem 1rem; border-radius:999px;
  text-decoration:none
}
.btn:hover{ background:var(--fg); color:var(--bg) }
.btn.small{ padding:.4rem .75rem; font-size:.9rem }

/* ============================= */
/* Cards / Grids                 */
/* ============================= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px; overflow:hidden
}
.card img{ display:block; width:100%; height:auto }
.card-body{ padding:1rem }

.grid-albums{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem
}
.grid-visuals{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem
}
.visual{
  background:none; border:0; padding:0; cursor:pointer;
  border-radius:10px; overflow:hidden
}
.visual img{
  width:100%; height:180px; object-fit:cover; display:block;
  filter:brightness(.85)
}
.visual:hover img{ filter:brightness(.95) }

/* ============================= */
/* Forms                         */
/* ============================= */
.form{ display:grid; gap:.75rem; max-width:640px }
.form :is(input, textarea):not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: .7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0f141b;
  color: var(--fg);
}

/* Ensure checkboxes/radios don’t stretch */
.form input[type="checkbox"],
.form input[type="radio"] {
  width: auto;
  height: 1.1rem;
  margin: 0;            /* avoids odd vertical spacing */
}

/* Keep the consent row tidy */
.checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;  /* stays on one line when space allows */
}

/* ============================= */
/* Footer                        */
/* ============================= */
.site-footer{
  border-top:1px solid var(--border);
  padding:2rem 0; background:#0b0f14
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1rem
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr } }
.list{ list-style:none; margin:0; padding:0 }
.list a{ color:var(--fg); text-decoration:none; opacity:.9 }
.list a:hover{ opacity:1 }

/* ============================= */
/* Lightbox                      */
/* ============================= */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:none; align-items:center; justify-content:center;
  z-index:40; padding:1rem
}
.lightbox.open{ display:flex }
.lightbox video{
  max-width:90vw; max-height:80vh;
  border-radius:12px; border:1px solid rgba(255,255,255,0.12);
  background:#000
}
.lightbox-close{
  position:absolute; top:1rem; right:1rem;
  font-size:2rem; background:transparent; border:0; color:#fff; cursor:pointer
}

/* ============================= */
/* Accessibility & preferences   */
/* ============================= */
/* Respect reduced motion: replace looping hero with poster */
@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none !important }
  .hero{
    background:#0b0f14 url("/assets/img/hero-poster.jpg") center/cover no-repeat;
  }
}

/* Respect reduced data: similar fallback */
@media (prefers-reduced-data: reduce){
  .hero-video{ display:none !important }
  .hero{
    background:#0b0f14 url("/assets/img/hero-poster.jpg") center/cover no-repeat;
  }
}

/* About page image refinements */
.split figure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ============================= */
/* Contact page                  */
/* ============================= */
.contact-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
}

.contact-wrapper h1 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.contact-wrapper .form {
  width: 100%;
  max-width: 600px;
}

.contact-wrapper .checkbox {
  white-space: nowrap; /* keep consent text on one line */
}

@media (max-width: 500px) {
  .contact-wrapper .checkbox {
    white-space: normal; /* allow wrap on small screens */
  }
}

/* ============================= */
/* Contact form messages         */
/* ============================= */
.form-status { margin: 0 0 1rem; }
.form-status.success { color: var(--accent); }
.form-status.error { color: #ffb4b4; }

.cookie-bar{
  position:fixed; left:1rem; right:1rem; bottom:1rem;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border); border-radius:12px;
  padding:.75rem 1rem; z-index:50;
  display:flex; align-items:center; gap:1rem;
}