/*
Theme Name: NERCM Cinematic
Theme URI: https://nercm.com/
Author: NERCM
Description: A cinematic portfolio theme for NERCM toy photography.
Version: 1.1.3
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: nercm-cinematic
*/
:root{
  --bg:#070707;--panel:#101010;--text:#f3f3f1;--muted:#aaa;
  --line:rgba(255,255,255,.14);--max:1500px;--content:1180px;--header:88px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.6}
body.admin-bar .site-header{top:32px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit}
.site-header{position:fixed;z-index:1000;top:0;left:0;right:0;height:var(--header);display:flex;align-items:center;background:linear-gradient(to bottom,rgba(0,0,0,.68),transparent);transition:.3s}
.site-header.is-solid,.site-header.is-scrolled{background:rgba(7,7,7,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.header-inner{width:min(calc(100% - 48px),var(--max));margin:auto;display:flex;justify-content:space-between;align-items:center;gap:28px}
.brand{display:flex;align-items:center}
.brand-logo img,.custom-logo-link img{max-height:72px;width:auto;max-width:500px}
.brand-name{font-weight:700;letter-spacing:.16em}
.brand-tag{display:block;color:var(--muted);font-size:.62rem;letter-spacing:.18em}
.site-nav ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.site-nav a{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem}
.menu-toggle{display:none;border:0;background:none;color:#fff;font-size:1.6rem;cursor:pointer}

.hero{min-height:86vh;position:relative;display:grid;align-items:end;overflow:hidden;background:#111}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-x,50%) var(--hero-y,50%)}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,var(--overlay,.68)),rgba(0,0,0,.15) 75%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 50%)}
.hero-content{position:relative;z-index:2;width:min(calc(100% - 48px),var(--max));margin:auto;padding:190px 0 82px 36px}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:#ccc;margin-bottom:18px}
.hero h1{font-size:clamp(2.9rem,var(--hero-size,6.2vw),7.15rem);line-height:.88;letter-spacing:-.055em;text-transform:uppercase;max-width:1050px;margin:0 0 28px}
.hero-copy{max-width:620px;color:#d0d0cd;font-size:1.12rem;margin-bottom:32px}
.btn{display:inline-flex;align-items:center;gap:22px;border:1.5px solid rgba(255,255,255,.78);padding:17px 24px;text-transform:uppercase;letter-spacing:.15em;font-size:.74rem;font-weight:700;transition:.25s}
.btn:hover{background:#fff;color:#000;transform:translateY(-1px)}
.social-row{display:flex;gap:12px;margin-top:28px}
.social-link{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.25s}
.social-link:hover{background:#fff;color:#000}
.social-link svg{width:19px;height:19px;fill:currentColor}

.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}
.narrow{width:min(calc(100% - 48px),860px);margin:auto}
.section{padding:92px 0 78px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:44px}
.section-head h2,.page-hero h1{font-size:clamp(2.8rem,6vw,7rem);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;margin:0}
.text-link{text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:7px;font-weight:700}

.works{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.work-card{grid-column:span 4;position:relative;overflow:hidden;background:#111;aspect-ratio:4/5}
.work-card:nth-child(2){margin-top:34px}
.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .75s}
.work-card:hover img{transform:scale(1.035)}
.work-overlay{position:absolute;left:0;right:0;bottom:0;padding:60px 24px 22px;background:linear-gradient(transparent,rgba(0,0,0,.9))}
.work-overlay h3{margin:0;text-transform:uppercase;letter-spacing:.05em}
.work-no{position:absolute;right:18px;top:18px;background:rgba(0,0,0,.5);padding:5px 8px;font-size:.68rem;letter-spacing:.15em}

.page-hero{padding:180px 0 70px;border-bottom:1px solid var(--line)}
.entry-content{padding:70px 0 110px;color:#d2d2cf;font-size:1.1rem}
.entry-content p{margin:0 0 1.5em}
.entry-content img{margin:38px auto;max-height:78vh;width:auto}
.entry-content a{text-decoration:underline;text-underline-offset:4px}

.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.archive-card{background:#101010}
.archive-thumb{aspect-ratio:16/10;overflow:hidden}
.archive-thumb img{width:100%;height:100%;object-fit:cover;transition:.55s}
.archive-card:hover img{transform:scale(1.035)}
.archive-meta{padding:18px}
.archive-meta h2{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;margin:0}

.project-hero{padding-top:calc(var(--header) + 28px)}
.project-media{width:min(calc(100% - 32px),var(--max));margin:auto;position:relative}
.project-media>img{width:100%;max-height:82vh;object-fit:contain;background:#050505;cursor:zoom-in}
.project-info{width:min(calc(100% - 48px),var(--content));margin:48px auto 100px}
.project-info h1{font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;margin:0 0 25px}
.project-copy{max-width:760px;color:#c8c8c5}
.compare-launch{position:absolute;right:18px;bottom:18px;background:rgba(0,0,0,.72);color:#fff;border:1px solid rgba(255,255,255,.58);padding:12px 16px;text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;cursor:pointer}

.site-footer{border-top:1px solid var(--line);padding:34px 0;color:#aaa;font-size:.78rem}
.footer-inner{width:min(calc(100% - 48px),var(--max));margin:auto;display:flex;justify-content:space-between;align-items:center}
.footer-social{display:flex;gap:12px}

/* Lightbox and comparison */
.lb{position:fixed;z-index:99999;inset:0;background:rgba(0,0,0,.97);display:none;align-items:center;justify-content:center;padding:70px 44px 38px}
.lb.is-open{display:flex}
.lb-stage{position:relative;width:min(88vw,1500px);height:min(82vh,980px);display:grid;place-items:center;overflow:hidden}
.lb-image{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.lb-close,.lb-prev,.lb-next,.lb-mode{position:absolute;z-index:6;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.34);cursor:pointer}
.lb-close{top:16px;right:18px;width:44px;height:44px;font-size:1.5rem}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:46px;height:60px;font-size:1.5rem}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-mode{left:50%;bottom:14px;transform:translateX(-50%);padding:12px 16px;text-transform:uppercase;letter-spacing:.12em;font-size:.67rem;white-space:nowrap}
.lb-compare{position:relative;width:100%;height:100%;display:none;overflow:hidden;touch-action:none}
.lb-compare.is-active{display:block}
.lb-before,.lb-after{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lb-before-wrap{position:absolute;inset:0;width:50%;overflow:hidden}
.lb-before{max-width:none;width:100%;height:100%;object-fit:contain}
.lb-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:4}
.lb-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#000}
.lb-label{position:absolute;bottom:18px;z-index:5;padding:7px 10px;background:rgba(0,0,0,.58);text-transform:uppercase;letter-spacing:.15em;font-size:.67rem}
.lb-label.before{left:18px}.lb-label.after{right:18px}

@media(max-width:900px){
 body.admin-bar .site-header{top:46px}
 .site-header{height:72px}
 .header-inner{width:calc(100% - 28px)}
 .brand-logo img,.custom-logo-link img{max-height:44px;max-width:280px}
 .menu-toggle{display:block}
 .site-nav{display:none;position:absolute;left:0;right:0;top:72px;background:#080808;padding:22px;border-top:1px solid var(--line)}
 .site-nav.is-open{display:block}
 .site-nav ul{display:block}
 .site-nav li{margin:18px 0}
 .hero{min-height:78vh}
 .hero-content{width:calc(100% - 32px);padding:0 0 58px}
 .works,.archive-grid{grid-template-columns:1fr}
 .work-card{grid-column:auto;margin-top:0!important}
 .section{padding:72px 0}
 .section-head{display:block}
 .section-head .text-link{display:inline-block;margin-top:22px}
 .lb{padding:64px 8px 20px}
 .lb-stage{width:96vw;height:84vh}
 .lb-prev{left:4px}.lb-next{right:4px}
 .footer-inner{display:block}
 .footer-social{margin-top:18px}
}