/*
Theme Name: Ken Lovell Photography
Theme URI: https://africanimages.net/
Author: Ken Lovell Photography
Description: Cinematic, image-led WordPress theme for Ken Lovell Photography. Designed around underwater fashion, wildlife, fine art, commercial work and African expeditions.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: ken-lovell
*/

:root{
  --black:#080807;
  --charcoal:#11110f;
  --gold:#c9a16a;
  --gold-light:#e2c18e;
  --cream:#f3eee5;
  --muted:#aaa39a;
  --line:#332e28;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",Arial,sans-serif;
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--cream);font-family:var(--sans);font-weight:300}
body.admin-bar .site-header{top:32px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit}
.container{width:min(var(--max),90vw);margin:auto}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{font:500 10px/2 var(--sans);letter-spacing:6px;color:#e4d7c6;margin:0 0 24px}
.site-header{position:absolute;z-index:50;top:0;left:0;right:0;padding:28px 5vw;display:flex;justify-content:space-between;align-items:flex-start;gap:30px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand-name{font:500 34px/1 var(--serif);letter-spacing:5px}
.brand-name b{font-weight:500}
.brand-sub{font:500 12px/1 var(--sans);letter-spacing:8px;color:var(--gold);margin-top:8px}
.brand-tag{font:400 8px/1.4 var(--sans);letter-spacing:4px;margin-top:12px;color:#ddd}
.main-nav{display:flex;align-items:center;gap:30px;padding-top:5px;font-size:10px;letter-spacing:2px}
.main-nav a{position:relative;padding-bottom:9px}
.main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:.25s}
.main-nav a:hover:after,.main-nav a.current-menu-item:after{right:0}
.nav-cta{border:1px solid var(--gold);border-radius:30px;padding:11px 23px!important}
.nav-cta:after{display:none}
.menu-toggle{display:none;background:none;border:0;color:white;font-size:27px}
.hero{position:relative;min-height:760px;height:88vh;overflow:hidden;display:flex;align-items:center}
.hero-media{position:absolute;inset:0;background:#17140f center/cover no-repeat}
.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.95),rgba(0,0,0,.62) 35%,rgba(0,0,0,.08) 78%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 45%)}
.hero-content{position:relative;z-index:2;width:min(610px,55%);margin-left:5vw;padding-top:100px}
.hero h1{font:500 clamp(58px,7vw,100px)/.82 var(--serif);letter-spacing:-2px;margin:0}
.hero-line{font-size:11px;letter-spacing:5px;color:var(--gold);margin:35px 0 22px}
.hero-copy{font:18px/1.65 var(--serif);max-width:480px;color:#ddd}
.play-link{display:inline-flex;align-items:center;gap:14px;margin-top:27px;font-size:9px;letter-spacing:3px}
.play-circle{width:43px;height:43px;border:1px solid var(--cream);border-radius:50%;display:grid;place-items:center;font-size:10px}
.hero-script{position:absolute;right:8%;bottom:24%;z-index:2;font:italic 48px/.85 var(--serif);text-align:center;transform:rotate(-7deg)}
.hero-location{position:absolute;right:8%;bottom:6%;z-index:2;font-size:9px;line-height:2;letter-spacing:5px}
.hero-dots{position:absolute;right:2.5%;top:31%;z-index:2;display:flex;flex-direction:column;gap:25px;font-size:9px;letter-spacing:2px}
.hero-dots span:first-child{color:var(--gold)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.portfolio-card{position:relative;min-height:465px;background:#15130f center/cover no-repeat;display:flex;align-items:flex-end;padding:36px}
.portfolio-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.93),rgba(0,0,0,.02) 65%)}
.card-text{position:relative;z-index:2}
.card-text h2{font:500 39px/.9 var(--serif);margin:0 0 12px}
.card-text p,.card-text span{font-size:9px;letter-spacing:4px}
.card-text p{margin:0 0 23px;color:#ddd}
.card-text span{color:var(--gold)}
.service-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:25px 7vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-item{display:flex;align-items:center;gap:17px}
.service-icon{width:48px;height:48px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:20px}
.service-item strong{display:block;font-size:10px;font-weight:400;letter-spacing:3px}
.service-item small{display:block;margin-top:7px;color:var(--muted);font-size:8px;letter-spacing:2px}
.about-feature{display:grid;grid-template-columns:1.35fr 1fr;min-height:570px}
.about-photo{min-height:570px;background:center/cover no-repeat}
.about-copy{padding:90px 8vw;background:var(--charcoal)}
.about-copy h2,.section-heading h2,.showreel h2,.contact h2{font:500 60px/.95 var(--serif);margin:0 0 25px}
.about-copy>p:not(.eyebrow),.contact-copy>p{font:15px/1.8 var(--sans);color:#c8c1b8;max-width:590px}
.outline-btn{display:inline-block;border:1px solid var(--gold);border-radius:30px;padding:13px 23px;color:var(--gold);font-size:9px;letter-spacing:3px;margin-top:20px;transition:.25s}
.outline-btn:hover{background:var(--gold);color:#080807}
.signature{font:italic 43px var(--serif);color:var(--gold);margin-top:28px;display:flex;align-items:end;gap:18px}
.signature small{font:8px/1.8 var(--sans);font-style:normal;letter-spacing:2px;color:#aaa}
.section{padding:100px 0}
.section-heading{text-align:center;margin-bottom:55px}
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.journal-img{height:300px;background:#181511 center/cover no-repeat;margin-bottom:22px}
.journal-card .meta{font-size:8px;letter-spacing:3px;color:var(--gold)}
.journal-card h3{font:500 35px var(--serif);margin:7px 0 14px}
.read-more{font-size:9px;letter-spacing:3px}
.showreel{min-height:500px;display:flex;align-items:center;padding:80px 10vw;background-position:center;background-size:cover;background-repeat:no-repeat;position:relative}
.showreel:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.25))}
.showreel>div{position:relative;z-index:2}
.showreel h2{font-size:70px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:100px 10vw;background:#0e0e0c}
.contact h2{font-size:70px}
.contact-form{display:grid;gap:22px}
.contact-form label{font-size:9px;letter-spacing:3px;color:var(--gold)}
.contact-form input,.contact-form textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid #4b443c;color:white;padding:13px 0;outline:none;font:17px var(--serif)}
.contact-form textarea{resize:vertical}
.form-message{padding:13px;border:1px solid var(--line);margin-bottom:15px;font-size:12px}
.site-footer{display:grid;grid-template-columns:1.2fr 1fr 1.4fr .7fr;gap:25px;align-items:center;padding:35px 5vw;border-top:1px solid var(--line);color:#aaa;font-size:8px;letter-spacing:3px}
.footer-brand{font:25px var(--serif);color:var(--cream)}
.footer-brand small{display:block;font:8px var(--sans);letter-spacing:4px;color:var(--gold);margin-top:7px}
.socials{display:flex;gap:18px;flex-wrap:wrap}
.socials a:hover{color:var(--gold)}
.archive-hero{padding:180px 0 80px;background:#0d0c0a}
.archive-title{font:500 clamp(55px,8vw,100px) var(--serif);margin:0}
.content-wrap{padding:90px 0}
.single-post .content-wrap{max-width:850px}
.single-post h1{font:500 70px/1 var(--serif)}
.single-post .entry-content{font:17px/1.85 var(--serif);color:#d3ccc3}
.entry-content img{margin:35px 0}
@media(max-width:950px){
 body.admin-bar .site-header{top:46px}
 .site-header{padding:22px 6vw}
 .brand-name{font-size:27px}.brand-sub{font-size:10px}.brand-tag{font-size:7px}
 .menu-toggle{display:block}.main-nav{display:none;position:absolute;top:75px;left:0;right:0;background:#090908;padding:25px 6vw;flex-direction:column;align-items:flex-start}
 .main-nav.open{display:flex}
 .hero{min-height:760px;height:auto}.hero-content{width:85%;padding:145px 0 110px}.hero h1{font-size:61px}
 .hero-script{font-size:36px;right:5%;bottom:18%}.hero-location{right:7%}.hero-dots{display:none}
 .portfolio-grid,.journal-grid,.service-strip,.about-feature,.contact,.site-footer{grid-template-columns:1fr}
 .portfolio-card{min-height:420px}.service-strip{padding:35px 8vw}
 .about-photo{min-height:400px}.about-copy{padding:65px 8vw}
 .section{padding:75px 0}.journal-grid{gap:45px}
 .showreel h2,.contact h2,.about-copy h2{font-size:52px}
 .contact{padding:75px 8vw;gap:45px}.site-footer{gap:20px}
}