/* Leatherneck Archive cinematic redesign — shared test-site theme */
:root{
  --la-black:#030403;
  --la-panel:#080a08;
  --la-gold:#c99a4b;
  --la-cream:#f4efe3;
  --la-muted:#b9b4a8;
  --la-line:rgba(201,154,75,.30);
}
html,body{background:var(--la-black)!important;color:var(--la-cream)!important}
body{min-width:320px}

/* Sitewide cinematic header */
.cinematic-header{
  position:relative;
  z-index:100;
  width:100%;
  min-height:82px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 12% 0%,rgba(88,112,76,.18),transparent 28%),
    linear-gradient(180deg,#090b09 0%,#050605 100%);
}
.cinematic-nav{
  width:100%;
  max-width:1600px;
  min-height:82px;
  margin:0 auto;
  padding:10px clamp(20px,3.2vw,52px);
  display:flex;
  align-items:center;
  gap:30px;
}
.cinematic-logo{display:block;width:clamp(225px,20vw,325px);line-height:0;text-decoration:none;flex:0 0 auto}
.cinematic-logo img{display:block;width:100%;height:auto}
.cinematic-links{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2vw,34px)}
.cinematic-links a{
  position:relative;padding:12px 0;color:#fff!important;text-decoration:none!important;
  text-transform:uppercase;white-space:nowrap;font-size:.74rem;font-weight:900;letter-spacing:.105em;
  border:0!important
}
.cinematic-links a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:2px;background:var(--la-gold);transition:right .18s ease}
.cinematic-links a:hover::after,.cinematic-links a:focus-visible::after,.cinematic-links a.active::after{right:0}
.cinematic-links a.nav-submit-link{color:#fff!important}
.cinematic-menu{display:none;margin-left:auto;padding:9px 13px;border:1px solid rgba(255,255,255,.72);border-radius:3px;background:rgba(0,0,0,.35);color:#fff;text-transform:uppercase;font-weight:800;letter-spacing:.08em;cursor:pointer}

/* Homepage movie-poster hero */
.cinematic-hero{position:relative;width:100%;overflow:hidden;background:#000}
.cinematic-hero-image{display:block;width:100%;height:auto}
.cinematic-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:23%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(3,4,3,0) 0%,rgba(3,4,3,.28) 38%,rgba(3,4,3,.80) 73%,rgba(3,4,3,1) 100%)
}
.cinematic-hero-content{
  position:absolute;z-index:5;left:5.5%;top:79.5%;width:48%;transform:translateY(-50%);text-align:center
}
.cinematic-hero-description{
  max-width:650px;margin:0 auto 22px;color:#fff;
  font-family:"Arial Narrow","Franklin Gothic Medium",Arial,sans-serif;
  font-size:clamp(.95rem,1.25vw,1.28rem);font-weight:700;letter-spacing:.055em;line-height:1.45;
  text-shadow:0 3px 18px rgba(0,0,0,.98)
}
.cinematic-hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cinematic-hero-button{
  min-width:230px;padding:17px 26px;display:inline-flex;justify-content:center;align-items:center;
  border:1px solid rgba(255,255,255,.80);border-radius:4px;background:rgba(8,10,9,.28);color:#fff!important;
  text-decoration:none!important;text-transform:uppercase;font-size:.84rem;font-weight:900;letter-spacing:.035em;
  backdrop-filter:blur(3px);transition:transform .18s ease,background .18s ease,border-color .18s ease
}
.cinematic-hero-button:hover,.cinematic-hero-button:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.14);border-color:#fff}

/* Bring existing site sections into the new wider, darker visual system */
.homepage-wrap,.page,.submit-page{width:100%!important;max-width:1280px!important;margin:0 auto!important;background:var(--la-black)!important}
.live-photos-section{background:radial-gradient(circle at 78% 0%,rgba(81,110,72,.14),transparent 30%),linear-gradient(180deg,#0b0d0b,#050605)!important;border-top:0!important}
.home-footer{background:linear-gradient(180deg,#080a08,#030403)!important}

/* Interior-page title areas now echo the green mountain design */
.page-hero,.submit-hero{
  position:relative;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(0,0,0,.90),rgba(0,0,0,.48)),
    url('assets/cinematic/hero.jpg') center 44%/cover no-repeat!important;
  border-top:0!important;border-bottom:1px solid var(--la-line)!important
}
.page-hero::after,.submit-hero::after{content:"";position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(transparent,var(--la-black));pointer-events:none}
.page-hero>* ,.submit-hero>*{position:relative;z-index:2}
.page-hero h1,.submit-hero h1{color:var(--la-cream)!important;text-shadow:0 4px 20px rgba(0,0,0,.95)!important}
.page-hero .gold{color:var(--la-gold)!important}

/* Admin keeps its tools, but shares the new identity */
.admin-subnav{background:#080a08!important;border-color:var(--la-line)!important}
.admin-subnav a.active{background:var(--la-gold)!important;color:#111!important}

@media(max-width:1040px){
  .cinematic-nav{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:18px;
    padding:16px 28px 20px;
    background:#080908;
  }

  .cinematic-logo{
    width:clamp(225px,62vw,340px);
    max-width:100%;
  }

  .cinematic-menu{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:136px;
    min-height:70px;
    margin-left:0;
    padding:14px 24px;
    border:1px solid rgba(255,255,255,.78);
    border-radius:7px;
    background:#151515;
    color:#fff;
    font-size:1.02rem;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  .cinematic-menu[aria-expanded="true"]{
    background:#d1ae5c;
    border-color:#d1ae5c;
    color:#080808;
  }

  .cinematic-links{
    grid-column:1 / -1;
    display:none;
    width:100%;
    margin:0;
    padding:76px 0 10px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }

  .cinematic-links.open{
    display:grid;
  }

  .cinematic-links a,
  .cinematic-links a.active{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:82px;
    padding:16px 12px;
    margin:0;
    border:1px solid rgba(255,255,255,.78)!important;
    border-radius:8px;
    background:#151515;
    color:#fff!important;
    text-align:center;
    font-size:1rem;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
  }

  .cinematic-links a::after{
    display:none;
  }

  .cinematic-links a.nav-submit-link,
  .cinematic-links a.nav-submit-link.active{
    background:#2f9e4d;
    border-color:#54bf6b!important;
    color:#fff!important;
  }

  .cinematic-hero-content{left:4%;top:80%;width:56%}
  .cinematic-hero-button{min-width:190px;padding:14px 19px}
}
@media(max-width:700px){
  .cinematic-nav{min-height:72px;background:#080908}
  .cinematic-logo{width:225px}
  .cinematic-hero::after{display:none}
  .cinematic-hero-content{position:relative;left:auto;top:auto;width:auto;transform:none;padding:28px 22px 38px;background:#080908}
  .cinematic-hero-actions{display:grid;grid-template-columns:1fr}
  .cinematic-hero-button{width:100%;min-width:0}
  .page-hero,.submit-hero{background-position:66% center!important}
}


/* Exact mobile menu sizing used on the working homepage */
@media(max-width:620px){
  .cinematic-nav{
    padding-left:28px!important;
    padding-right:28px!important;
  }
  .cinematic-logo{width:min(62vw,340px)!important}
  .cinematic-menu{min-width:132px!important}
  .cinematic-links{gap:18px!important}
  .cinematic-links a,
  .cinematic-links a.active{
    min-height:82px!important;
    font-size:.98rem!important;
  }
}

@media(max-width:430px){
  .cinematic-nav{
    padding-left:18px!important;
    padding-right:18px!important;
    gap:12px!important;
  }
  .cinematic-logo{width:230px!important}
  .cinematic-menu{
    min-width:108px!important;
    min-height:58px!important;
    padding:12px 16px!important;
  }
  .cinematic-links{
    padding-top:48px!important;
    gap:12px!important;
  }
  .cinematic-links a,
  .cinematic-links a.active{
    min-height:70px!important;
    font-size:.88rem!important;
  }
}