/* ======================================================
   NIGHT CHURCH — Design System
   Mobile-first · Dark · Inter · Cinematic
   ====================================================== */

/* --- FONT FACE --- */
@font-face{font-family:Inter;src:url(./fonts/inter-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(./fonts/inter-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(./fonts/inter-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* --- DESIGN TOKENS --- */
:root{
  /* Palette — unified across archive + radio */
  --nc-bg:       #06080c;
  --nc-surface:  #0f1318;
  --nc-surface2: #161b22;
  --nc-border:   rgba(212,168,67,.15);
  --nc-border-s: rgba(38,48,59,.5);
  --nc-text:     #e8edf2;
  --nc-muted:    #8a919b;
  --nc-gold:     #d4a843;
  --nc-gold-dim: rgba(212,168,67,.22);
  --nc-gold-glow:rgba(212,168,67,.10);
  --nc-jade:     #2ecc71;
  --nc-magenta:  #ff00ff;

  /* Typography — fluid clamp scale */
  --fs-xs:   clamp(.625rem, .58rem + .2vw, .6875rem);   /* 10–11 */
  --fs-sm:   clamp(.6875rem, .62rem + .3vw, .8125rem);  /* 11–13 */
  --fs-base: clamp(.8125rem, .75rem + .3vw, .9375rem);  /* 13–15 */
  --fs-md:   clamp(.9375rem, .85rem + .4vw, 1.125rem);  /* 15–18 */
  --fs-lg:   clamp(1.125rem, 1rem + .5vw, 1.5rem);      /* 18–24 */
  --fs-xl:   clamp(1.75rem, 1.3rem + 1.8vw, 3rem);      /* 28–48 */
  --fs-xxl:  clamp(2.5rem, 2rem + 2.5vw, 4.5rem);       /* 40–72 */

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px;

  /* Surfaces */
  --radius:     12px;
  --radius-sm:   6px;
  --radius-pill: 999px;
  --shadow:      0 4px 16px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  --shadow-gold: 0 0 40px rgba(212,168,67,.12), 0 0 80px rgba(212,168,67,.06);

  /* Transition */
  --ease:  .2s cubic-bezier(.4,0,.2,1);
  --ease-spring: .35s cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: .5s cubic-bezier(.25,.46,.45,.94);

  /* Layout */
  --max-w: 1200px;
  --gap:   var(--sp-3);

  color-scheme: dark;
}

/* --- RESET --- */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-behavior:smooth}

body{
  margin:0;
  min-height:100%;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--fs-base);
  line-height:1.5;
  background:var(--nc-bg);
  color:var(--nc-text);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ================================================
   AMBIENT BACKGROUND — Animated gradient orbs
   ================================================ */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 600px 600px at 15% 20%, rgba(212,168,67,.07) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 85% 60%, rgba(128,90,213,.06) 0%, transparent 70%),
    radial-gradient(ellipse 400px 400px at 50% 90%, rgba(46,204,113,.04) 0%, transparent 70%);
  animation:ambientDrift 25s ease-in-out infinite alternate;
}

@keyframes ambientDrift{
  0%{
    background:
      radial-gradient(ellipse 600px 600px at 15% 20%, rgba(212,168,67,.07) 0%, transparent 70%),
      radial-gradient(ellipse 500px 500px at 85% 60%, rgba(128,90,213,.06) 0%, transparent 70%),
      radial-gradient(ellipse 400px 400px at 50% 90%, rgba(46,204,113,.04) 0%, transparent 70%);
  }
  33%{
    background:
      radial-gradient(ellipse 700px 500px at 70% 30%, rgba(212,168,67,.08) 0%, transparent 70%),
      radial-gradient(ellipse 400px 600px at 20% 70%, rgba(128,90,213,.05) 0%, transparent 70%),
      radial-gradient(ellipse 500px 400px at 80% 85%, rgba(46,204,113,.04) 0%, transparent 70%);
  }
  66%{
    background:
      radial-gradient(ellipse 500px 700px at 40% 10%, rgba(212,168,67,.06) 0%, transparent 70%),
      radial-gradient(ellipse 600px 500px at 90% 40%, rgba(128,90,213,.07) 0%, transparent 70%),
      radial-gradient(ellipse 400px 500px at 10% 80%, rgba(46,204,113,.05) 0%, transparent 70%);
  }
  100%{
    background:
      radial-gradient(ellipse 600px 600px at 60% 25%, rgba(212,168,67,.07) 0%, transparent 70%),
      radial-gradient(ellipse 500px 500px at 30% 55%, rgba(128,90,213,.06) 0%, transparent 70%),
      radial-gradient(ellipse 500px 400px at 70% 80%, rgba(46,204,113,.04) 0%, transparent 70%);
  }
}

/* Noise texture overlay */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:200px 200px;
}

/* Focus visible — gold ring */
:focus-visible{
  outline:2px solid var(--nc-gold);
  outline-offset:2px;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:var(--sp-2);
  background:var(--nc-gold);
  color:var(--nc-bg);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-sm);
  font-weight:600;
  z-index:100;
  text-decoration:none;
}
.skip-link:focus{left:var(--sp-2)}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Accent color for native controls */
input,select,textarea{accent-color:var(--nc-gold)}

/* Make all page content sit above ambient background */
.nav,.header,.main,.footer,.lightbox{position:relative;z-index:1}

/* ================================================
   NAVIGATION BAR
   ================================================ */
.nav{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(6,8,12,.75);
  border-bottom:1px solid rgba(212,168,67,.08);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
}

.nav__inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--sp-4);
  display:flex;
  align-items:center;
  height:56px;
  gap:var(--sp-2);
}

.nav__brand{
  font-size:var(--fs-md);
  font-weight:700;
  color:var(--nc-gold);
  text-decoration:none;
  letter-spacing:1px;
  white-space:nowrap;
  margin-right:auto;
  text-shadow:0 0 20px rgba(212,168,67,.3);
}

.nav__link{
  position:relative;
  color:var(--nc-muted);
  text-decoration:none;
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-pill);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  transition:color .3s ease,background .3s ease,box-shadow .3s ease;
}

.nav__link:hover{
  color:var(--nc-gold);
  background:rgba(212,168,67,.08);
  box-shadow:0 0 16px rgba(212,168,67,.08);
}

.nav__link[aria-current="page"]{
  color:var(--nc-gold);
  background:rgba(212,168,67,.12);
}

.nav__link[aria-current="page"]::after{
  content:'';
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:2px;
  background:var(--nc-gold);
  border-radius:1px;
  box-shadow:0 0 8px rgba(212,168,67,.4);
}

/* ================================================
   ARCHIVE HEADER — Cinematic Hero
   ================================================ */
.header{
  position:relative;
  z-index:10;
  padding:var(--sp-7) var(--sp-4) var(--sp-5);
  max-width:var(--max-w);
  margin:0 auto;
}

.header__hero{
  margin-bottom:var(--sp-5);
  text-align:center;
  padding:var(--sp-6) 0 var(--sp-4);
}

/* Decorative gold line above title */
.header__hero::before{
  content:'';
  display:block;
  width:60px;
  height:2px;
  margin:0 auto var(--sp-5);
  background:linear-gradient(90deg, transparent, var(--nc-gold), transparent);
  border-radius:1px;
}

.title{
  margin:0 0 var(--sp-3);
  font-size:var(--fs-xxl);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.05;
  background:linear-gradient(135deg, #ffffff 0%, var(--nc-gold) 40%, #c49a35 70%, #e8c56d 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 40px rgba(212,168,67,.2));
  animation:titleGlow 4s ease-in-out infinite alternate;
}

@keyframes titleGlow{
  0%{filter:drop-shadow(0 0 30px rgba(212,168,67,.15))}
  100%{filter:drop-shadow(0 0 60px rgba(212,168,67,.25))}
}

.subtitle{
  margin:0 auto var(--sp-2);
  color:var(--nc-muted);
  font-size:var(--fs-base);
  line-height:1.6;
  max-width:52ch;
  text-align:center;
}

/* --- ACTION BUTTONS --- */
.archive-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  margin:var(--sp-5) 0;
  justify-content:center;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);
  border-radius:var(--radius-pill);
  border:1px solid rgba(212,168,67,.2);
  background:rgba(212,168,67,.06);
  color:var(--nc-text);
  text-decoration:none;
  font-size:var(--fs-sm);
  font-weight:600;
  min-height:44px;
  transition:all .3s ease;
  cursor:pointer;
  letter-spacing:.3px;
  backdrop-filter:blur(8px);
}

.button:hover{
  border-color:rgba(212,168,67,.4);
  background:rgba(212,168,67,.12);
  box-shadow:0 0 30px rgba(212,168,67,.15), 0 4px 15px rgba(0,0,0,.3);
  transform:translateY(-2px);
  color:var(--nc-gold);
}

.button:active{
  transform:translateY(0) scale(.98);
  transition-duration:.05s;
}

.button--primary{
  background:linear-gradient(135deg, var(--nc-gold), #b8922e);
  color:var(--nc-bg);
  border-color:transparent;
  box-shadow:0 0 20px rgba(212,168,67,.2);
}

.button--primary:hover{
  box-shadow:0 0 40px rgba(212,168,67,.3),0 4px 20px rgba(0,0,0,.3);
  color:var(--nc-bg);
}

/* --- CONTROLS --- */
.controls{
  display:flex;
  gap:var(--sp-3);
  flex-direction:column;
  max-width:640px;
  margin:0 auto;
}

.search{
  width:100%;
  padding:var(--sp-3) var(--sp-4);
  background:rgba(15,19,24,.8);
  color:var(--nc-text);
  border:1px solid rgba(212,168,67,.1);
  border-radius:var(--radius-pill);
  outline:none;
  font-size:16px;  /* prevents iOS zoom */
  font-family:inherit;
  min-height:48px;
  -webkit-appearance:none;
  transition:all .3s ease;
  backdrop-filter:blur(8px);
}

.search:focus{
  border-color:rgba(212,168,67,.35);
  box-shadow:0 0 0 3px rgba(212,168,67,.08), 0 0 30px rgba(212,168,67,.06);
  background:rgba(15,19,24,.95);
}

.search::placeholder{color:var(--nc-muted)}

.select{
  width:100%;
  padding:var(--sp-3) var(--sp-4);
  background:rgba(15,19,24,.8);
  color:var(--nc-text);
  border:1px solid rgba(212,168,67,.1);
  border-radius:var(--radius-pill);
  outline:none;
  font-size:16px;
  font-family:inherit;
  min-height:48px;
  -webkit-appearance:none;
  cursor:pointer;
  transition:all .3s ease;
  backdrop-filter:blur(8px);
}

.select:focus{
  border-color:rgba(212,168,67,.35);
  box-shadow:0 0 0 3px rgba(212,168,67,.08), 0 0 30px rgba(212,168,67,.06);
}

.meta{
  margin-top:var(--sp-3);
  display:flex;
  gap:var(--sp-3);
  color:var(--nc-muted);
  font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;
  justify-content:center;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* ================================================
   MAIN CONTENT
   ================================================ */
.main{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--sp-4) var(--sp-7);
}

/* Section divider */
.main::before{
  content:'';
  display:block;
  width:120px;
  height:1px;
  margin:0 auto var(--sp-5);
  background:linear-gradient(90deg, transparent, rgba(212,168,67,.3), transparent);
}

.status{
  color:var(--nc-muted);
  font-size:var(--fs-sm);
  margin:var(--sp-2) 0 var(--sp-4);
  text-align:center;
}

/* aria-live for screen readers */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* --- GRID --- */
.container.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gap);
}

/* ================================================
   CARDS — Premium Glassmorphism
   ================================================ */
.card{
  position:relative;
  background:rgba(15,19,24,.6);
  border:1px solid rgba(212,168,67,.08);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
  cursor:pointer;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s ease, border-color .4s ease;
  content-visibility:auto;
  contain-intrinsic-size:auto 300px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Gradient border glow on hover */
.card::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(212,168,67,.3), transparent 40%, transparent 60%, rgba(212,168,67,.15));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
  z-index:1;
}

.card:hover::before{
  opacity:1;
}

.card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:
    0 20px 60px rgba(0,0,0,.4),
    0 0 40px rgba(212,168,67,.06);
  border-color:rgba(212,168,67,.15);
}

.card:active{
  transform:translateY(-2px) scale(.99);
  transition-duration:.1s;
}

/* Scroll reveal — staggered fade up */
.card{
  opacity:0;
  transform:translateY(40px) scale(.97);
  transition:opacity .6s ease,transform .6s cubic-bezier(.25,.46,.45,.94),box-shadow .4s ease,border-color .4s ease;
}

.card.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.card.visible:hover{
  transform:translateY(-6px) scale(1.02);
}

.thumb{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}

/* Subtle vignette on thumbnails */
.thumb::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(6,8,12,.6) 100%);
  pointer-events:none;
  z-index:1;
}

.thumb img,.thumb video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.25,.46,.45,.94);
}

.card:hover .thumb img,
.card:hover .thumb video{
  transform:scale(1.08);
}

.badge{
  position:absolute;
  left:var(--sp-2);
  top:var(--sp-2);
  font-size:var(--fs-xs);
  font-weight:600;
  padding:4px 10px;
  border:1px solid rgba(212,168,67,.2);
  background:rgba(6,8,12,.7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:var(--radius-pill);
  color:var(--nc-gold);
  letter-spacing:.8px;
  text-transform:uppercase;
  z-index:2;
}

.card__body{
  padding:var(--sp-3);
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
}

.card__caption{
  font-size:var(--fs-xs);
  line-height:1.45;
  color:rgba(232,237,242,.85);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:pre-wrap;
}

.card__sub{
  display:flex;
  gap:var(--sp-1);
  flex-wrap:wrap;
  font-size:var(--fs-xs);
  color:var(--nc-muted);
}

.pill{
  padding:3px 10px;
  border:1px solid rgba(212,168,67,.1);
  border-radius:var(--radius-pill);
  background:rgba(212,168,67,.04);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-xs);
  letter-spacing:.3px;
}

/* Skeleton loading placeholder */
.skeleton{
  background:rgba(15,19,24,.6);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  border:1px solid rgba(212,168,67,.05);
}

.skeleton::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(212,168,67,.04),transparent);
  background-size:200% 100%;
  animation:shimmer 2s ease-in-out infinite;
}

.skeleton--card{
  aspect-ratio:1/1;
}

@keyframes shimmer{
  from{background-position:-200% 0}
  to{background-position:200% 0}
}

@keyframes cardIn{
  from{opacity:0;transform:translateY(30px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ================================================
   INLINE RADIO PLAYER — Slim compact bar
   ================================================ */
.radio{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  max-width:420px;
  margin:var(--sp-4) auto var(--sp-2);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-pill);
  border:1px solid rgba(212,168,67,.15);
  background:rgba(212,168,67,.04);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.radio__play{
  flex-shrink:0;
  width:36px;
  height:36px;
  min-height:44px;
  min-width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:var(--nc-gold);
  color:var(--nc-bg);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  padding:0;
}
.radio__play:hover{
  transform:scale(1.08);
  box-shadow:0 0 12px var(--nc-gold-dim);
}
.radio__play:active{transform:scale(.95)}

.radio__icon{
  width:16px;
  height:16px;
  pointer-events:none;
}

.radio__info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.radio__status{
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--nc-gold);
  line-height:1;
}

.radio__track{
  font-size:var(--fs-xs);
  color:var(--nc-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.3;
}

.radio__listeners{
  flex-shrink:0;
  font-size:10px;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--nc-muted);
  white-space:nowrap;
  display:none;
}
.radio__listeners:not(:empty){
  display:inline;
}

.radio__volume{
  flex-shrink:0;
  display:none;
  align-items:center;
  width:72px;
}
@media(min-width:480px){
  .radio__volume{display:flex}
}

.radio__slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,.12);
  outline:none;
  cursor:pointer;
}
.radio__slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--nc-gold);
  border:none;
  cursor:pointer;
}
.radio__slider::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--nc-gold);
  border:none;
  cursor:pointer;
}

/* Live pulse dot */
.radio__status::before{
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--nc-muted);
  margin-right:6px;
  vertical-align:middle;
  transition:background .3s ease;
}
.radio--live .radio__status::before{
  background:var(--nc-jade);
  box-shadow:0 0 6px var(--nc-jade);
  animation:radioPulse 2s ease-in-out infinite;
}
@keyframes radioPulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}

/* ================================================
   FOOTER — Minimal elegant
   ================================================ */
.footer{
  border-top:1px solid rgba(212,168,67,.08);
  padding:var(--sp-6) var(--sp-4);
  color:var(--nc-muted);
  font-size:var(--fs-xs);
  position:relative;
}

.footer::before{
  content:'';
  position:absolute;
  top:-1px;
  left:50%;
  transform:translateX(-50%);
  width:80px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--nc-gold), transparent);
}

.footer__inner{
  max-width:var(--max-w);
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--sp-3);
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* ================================================
   LIGHTBOX — Cinematic
   ================================================ */
.lightbox{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
}

.lightbox[aria-hidden="false"]{
  display:flex;
  align-items:center;
  justify-content:center;
  animation:lbIn .4s cubic-bezier(.25,.46,.45,.94);
}

@keyframes lbIn{
  from{opacity:0}
  to{opacity:1}
}

.lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(20px) saturate(.5);
  -webkit-backdrop-filter:blur(20px) saturate(.5);
}

.lightbox__panel{
  position:relative;
  width:calc(100% - var(--sp-5));
  max-width:960px;
  max-height:calc(100vh - var(--sp-5));
  display:flex;
  flex-direction:column;
  background:rgba(12,15,20,.95);
  border:1px solid rgba(212,168,67,.12);
  border-radius:16px;
  overflow:hidden;
  box-shadow:
    0 24px 80px rgba(0,0,0,.6),
    0 0 80px rgba(212,168,67,.05),
    inset 0 1px 0 rgba(255,255,255,.05);
  animation:lbPanel .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes lbPanel{
  from{opacity:0;transform:scale(.92) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

.lightbox__close{
  position:absolute;
  right:var(--sp-3);
  top:var(--sp-3);
  z-index:2;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(6,8,12,.8);
  color:var(--nc-text);
  border:1px solid rgba(212,168,67,.15);
  font-size:22px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .3s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.lightbox__close:hover{
  background:rgba(212,168,67,.15);
  border-color:rgba(212,168,67,.35);
  color:var(--nc-gold);
  box-shadow:0 0 20px rgba(212,168,67,.1);
  transform:rotate(90deg);
}

.lightbox__media{
  background:#050709;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-height:0;
  overflow:hidden;
}

.lightbox__media img,.lightbox__media video{
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:contain;
}

.lightbox__info{
  padding:var(--sp-4);
  max-height:35vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid rgba(212,168,67,.08);
  background:rgba(12,15,20,.8);
}

.lightbox__caption{
  font-size:var(--fs-base);
  line-height:1.6;
  margin-bottom:var(--sp-2);
  white-space:pre-wrap;
}

.lightbox__sub{
  color:var(--nc-muted);
  font-size:var(--fs-sm);
  display:flex;
  gap:var(--sp-3);
  flex-wrap:wrap;
  letter-spacing:.3px;
}

.lightbox__links a{
  color:var(--nc-text);
  text-decoration:none;
  border:1px solid rgba(212,168,67,.15);
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  margin-top:var(--sp-3);
  min-height:44px;
  font-size:var(--fs-sm);
  transition:all .3s ease;
  background:rgba(212,168,67,.04);
}

.lightbox__links a:hover{
  border-color:rgba(212,168,67,.35);
  background:rgba(212,168,67,.1);
  color:var(--nc-gold);
  box-shadow:0 0 20px rgba(212,168,67,.08);
}

/* =============================================
   TABLET BREAKPOINT (480px+)
   ============================================= */
@media(min-width:480px){
  .header{
    padding:var(--sp-7) var(--sp-5) var(--sp-6);
  }

  .header__hero{
    padding:var(--sp-7) 0 var(--sp-5);
  }

  .controls{
    flex-direction:row;
    align-items:center;
  }

  .search{flex:1 1 280px;min-width:200px;width:auto}
  .select{width:auto}

  .container.grid{
    grid-template-columns:repeat(3,1fr);
    gap:14px;
  }

  .card__caption{
    font-size:var(--fs-sm);
    -webkit-line-clamp:3;
  }
}

/* =============================================
   DESKTOP BREAKPOINT (768px+)
   ============================================= */
@media(min-width:768px){
  :root{--gap:var(--sp-4)}

  .nav__inner{height:60px}

  .header{
    padding:var(--sp-8) var(--sp-5) var(--sp-6);
  }

  .header__hero{
    padding:var(--sp-8) 0 var(--sp-6);
  }

  /* Wider decorative line on desktop */
  .header__hero::before{
    width:100px;
  }

  .main{padding:0 var(--sp-5) var(--sp-8)}

  .container.grid{
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  }

  .card__body{
    padding:var(--sp-3) var(--sp-4);
    gap:var(--sp-2);
  }

  .card__caption{-webkit-line-clamp:3}

  .badge{
    left:var(--sp-3);top:var(--sp-3);
    font-size:var(--fs-xs);
    padding:5px 12px;
  }

  .lightbox__panel{
    width:min(960px,calc(100% - var(--sp-7)));
    max-height:calc(100vh - var(--sp-7));
    border-radius:20px;
  }

  .lightbox__media{
    max-height:70vh;
    flex:none;
  }

  .lightbox__media img,.lightbox__media video{max-height:70vh}

  .lightbox__info{
    padding:var(--sp-5);
    max-height:none;
    overflow-y:visible;
  }

  .meta{margin-top:var(--sp-4)}
}

/* =============================================
   WIDE DESKTOP (1200px+)
   ============================================= */
@media(min-width:1200px){
  .container.grid{
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:var(--sp-5);
  }

  .header__hero{
    padding:var(--sp-8) 0;
  }

  /* Decorative side lines on wide screens */
  .header__hero::after{
    content:'';
    display:block;
    width:60px;
    height:1px;
    margin:var(--sp-5) auto 0;
    background:linear-gradient(90deg, transparent, rgba(212,168,67,.15), transparent);
  }
}