/*
Theme Name: McNeill Media
Theme URI: https://mcneill-media.com
Author: McNeill Media
Author URI: https://mcneill-media.com
Description: A bold, editorial one-page portfolio theme for photographers, videographers, and brand designers — built for McNeill Media. Includes a photography grid with a click-to-expand lightbox, a motion/video reel, a graphic design showcase, and a contact section. All imagery ships as placeholders ready to be swapped for real work.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mcneill-media
*/

:root{
  --ink:#0B0E14;
  --paper:#F5F1E8;
  --flash:#E8A94B;
  --teal:#1B4B4A;
  --ember:#C7452F;
  --gray:#8A8F9C;
  --line: rgba(245,241,232,0.14);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
.display{font-family:'Bebas Neue',sans-serif; letter-spacing:0.02em;}
.serif{font-family:'Fraunces',serif;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px clamp(20px,5vw,60px);
  mix-blend-mode:difference;
}
.logo{display:flex; align-items:center;}
.logo img{height:34px; width:auto; display:block;}
.navlinks{display:flex; gap:clamp(16px,3vw,34px); font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;}
.navlinks a{opacity:0.75; transition:opacity .2s;}
.navlinks a:hover{opacity:1;}
.nav-toggle{
  display:none; width:38px; height:38px; align-items:center; justify-content:center;
  border:1px solid rgba(245,241,232,0.35); border-radius:4px;
  background:transparent; color:var(--paper); font-size:17px; cursor:pointer;
}
@media (max-width:640px){
  .nav-toggle{display:flex;}
  .navlinks{
    display:none; position:fixed; top:70px; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--ink); isolation:isolate; mix-blend-mode:normal;
    border-bottom:1px solid var(--line);
    padding:6px clamp(20px,5vw,60px) 18px;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:14px 0; border-bottom:1px solid var(--line); opacity:1; font-size:14px;}
  .navlinks a:last-child{border-bottom:0;}
}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(20px,5vw,60px);
  position:relative;
}
.eyebrow{
  font-size:13px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--flash); font-weight:600; margin-bottom:22px;
}
.hero h1{
  font-size:clamp(36px,11vw,148px);
  line-height:0.86;
  text-transform:uppercase;
}
.hero h1 .accent{color:var(--flash);}
.hero-sub{
  max-width:520px; margin-top:28px; font-size:17px; line-height:1.6; color:var(--paper); opacity:0.8;
}
.hero-meta{
  position:absolute; right:clamp(20px,5vw,60px); bottom:120px;
  text-align:right; font-size:13px; color:var(--gray); line-height:1.8;
  display:none;
}
@media (min-width:900px){ .hero-meta{display:block;} }

/* ---------- MARQUEE ----------
   Two identical tracks placed side by side, parent translated exactly -50%.
   Because both tracks are identical, the instant the loop hits -50% it looks
   pixel-for-pixel the same as 0% — no blank gap on reset, unlike a single
   track padded out with empty space. Dark/gold palette matches the logo
   instead of breaking to a cream bar. */
.marquee-wrap{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap; padding:16px 0;
  background:var(--ink); color:var(--paper);
}
.marquee-track{
  display:inline-flex; width:max-content;
  animation:scroll 30s linear infinite;
}
.marquee{
  display:inline-flex; flex-shrink:0;
  font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:0.06em;
}
.marquee span{margin:0 28px; color:var(--paper);}
.marquee span.dot{color:var(--flash);}
@keyframes scroll{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;} }

/* ---------- SECTION SHELL ---------- */
section{padding:110px clamp(20px,5vw,60px);}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:52px; gap:20px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:22px;
}
.section-num{font-size:13px; color:var(--gray); letter-spacing:0.1em;}
.section-head h2{font-size:clamp(36px,6vw,64px); text-transform:uppercase; line-height:0.95;}
.section-note{max-width:280px; font-size:14px; color:var(--gray); line-height:1.6;}

/* ---------- PHOTO GRID ---------- */
.photo-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.frame{
  position:relative; border-radius:2px; overflow:hidden;
  display:flex; align-items:flex-end; padding:18px;
  min-height:260px;
  background-size:cover; background-position:center;
  transition:transform .35s ease;
  cursor:pointer;
  border:0; text-align:left; width:100%; font:inherit; color:inherit;
  appearance:none; -webkit-appearance:none; background-color:var(--ink);
}
.frame::-moz-focus-inner{border:0; padding:0;}
.frame:hover{transform:translateY(-4px);}
.frame:focus-visible{outline:2px solid var(--flash); outline-offset:3px;}
.frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,14,20,0) 40%, rgba(11,14,20,0.85) 100%);
}
.frame-label{position:relative; z-index:2; font-size:13px; font-weight:600; letter-spacing:0.04em;}
.frame-label small{display:block; color:var(--flash); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin-top:4px;}
.frame-arrow{
  position:absolute; top:16px; right:16px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(245,241,232,0.12); border:1px solid rgba(245,241,232,0.35);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--paper);
  opacity:0; transform:translate(-4px,4px) rotate(-45deg);
  transition:opacity .25s ease, transform .25s ease;
}
.frame:hover .frame-arrow, .frame:focus-visible .frame-arrow{opacity:1; transform:translate(0,0) rotate(0deg);}
/* Background photo for each frame — swap the file in /images to update.
   Filenames are kept stable so you can just overwrite them with your own photos later.
   The ?v= query string is a cache-buster: this host's CDN caches image URLs for a
   year, so bump the number any time a same-named file gets replaced or the CDN will
   keep serving the old cached copy. */
.f2{grid-column:span 1; background-image:url('images/photo-02-solea.jpg?v=2');}
.f3{grid-column:span 1; background-image:url('images/photo-03-nye.jpg?v=2');}
.f4{grid-column:span 1; background-image:url('images/photo-04-victorino.jpg?v=2');}
@media (max-width:800px){ .photo-grid{grid-template-columns:1fr;} }

/* ---------- VIDEO ---------- */
.video-strip{display:grid; grid-template-columns:1.3fr 1fr; gap:14px;}
.vcard{
  position:relative; border-radius:2px; overflow:hidden;
  aspect-ratio:16/10;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
}
.vcard::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,14,20,0.25) 0%, rgba(11,14,20,0.75) 100%);
}
.vcard .play{
  position:relative; z-index:2;
  width:58px; height:58px; border-radius:50%; border:2px solid var(--flash);
  display:flex; align-items:center; justify-content:center;
}
.vcard .play::after{content:''; border-left:14px solid var(--flash); border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px;}
.vcard .vtag{position:absolute; z-index:2; bottom:16px; left:16px; font-size:13px; font-weight:600;}
.vcard .vtag small{display:block; color:var(--gray); font-size:11px; margin-top:2px;}
@media (max-width:800px){ .video-strip{grid-template-columns:1fr;} }

/* ---------- DESIGN ---------- */
.design-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.dcard{
  background:var(--paper); color:var(--ink); border-radius:2px; padding:26px;
  min-height:220px; display:flex; flex-direction:column; justify-content:space-between;
}
.dcard .tag{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ember); font-weight:700;}
.dcard h3{font-family:'Fraunces',serif; font-size:22px; margin-top:10px; line-height:1.15;}
.dcard p{font-size:13px; color:#4a4d55; margin-top:10px; line-height:1.5;}
@media (max-width:800px){ .design-grid{grid-template-columns:1fr;} }

/* ---------- ABOUT ---------- */
.about{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.about p{font-family:'Fraunces',serif; font-size:clamp(22px,2.6vw,30px); line-height:1.4;}
.about-side{font-size:14px; color:var(--gray); line-height:1.9;}
.about-side strong{color:var(--paper); display:block; margin-bottom:2px;}
@media (max-width:800px){ .about{grid-template-columns:1fr;} }

/* ---------- CONTACT ---------- */
.contact{
  background:var(--paper); color:var(--ink);
  padding:110px clamp(20px,5vw,60px);
  display:flex; flex-direction:column; align-items:flex-start;
}
.contact h2{font-size:clamp(40px,8vw,96px); text-transform:uppercase; line-height:0.9; max-width:820px;}
.contact-email{
  margin-top:36px; font-size:clamp(20px,3vw,30px); font-weight:600;
  border-bottom:2px solid var(--ink); padding-bottom:6px;
}
.contact-row{display:flex; gap:28px; margin-top:44px; font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; flex-wrap:wrap;}
footer{padding:26px clamp(20px,5vw,60px); font-size:12px; color:#6b6f78; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:var(--ink); /* fully opaque — a translucent overlay let the fixed nav ghost through on top of gallery photos */
  display:none; flex-direction:column;
  padding:clamp(20px,4vw,50px);
}
.lightbox.open{display:flex;}
.lb-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;}
.lb-title{font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--flash);}
.lb-title small{display:block; color:var(--gray); font-weight:400; letter-spacing:0.02em; text-transform:none; margin-top:3px; font-size:12px;}
.lb-close{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--paper); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lb-close:hover{background:rgba(245,241,232,0.1);}

.lb-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px;
  overflow-y:auto; flex:1;
}
.lb-grid img{
  width:100%; height:180px; object-fit:cover; border-radius:2px; cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
}
.lb-grid img:hover{opacity:0.85; transform:scale(1.02);}
.lb-grid img:focus-visible{outline:2px solid var(--flash); outline-offset:2px; opacity:0.85;}

.lb-single{display:none; flex:1; flex-direction:column; align-items:center; justify-content:center; position:relative;}
.lb-single.open{display:flex;}
.lb-single img{max-width:100%; max-height:78vh; object-fit:contain; border-radius:2px; margin:0 auto;}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(245,241,232,0.1); border:1px solid var(--line); color:var(--paper);
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lb-nav:hover{background:rgba(245,241,232,0.2);}
.lb-prev{left:0;}
.lb-next{right:0;}
.lb-back{
  margin-top:20px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gray); cursor:pointer; border:none; background:none;
}
.lb-back:hover{color:var(--paper);}
@media (max-width:640px){
  .lb-nav{width:36px; height:36px; font-size:15px;}
  .lb-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
  .lb-grid img{height:120px;}
}

/* ---------- SCREEN READER ONLY ---------- */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}


/* ---------- MOCKUP HOMEPAGE / NAV (approved design) ---------- */
:root{
  --mock-bg:#F6F4EE;
  --mock-text:#171613;
  --mock-subtext:#5C5A52;
  --mock-line:rgba(23,22,19,0.12);
  --mock-accent:#1F8A76;
  --mock-tile:#EFEBE1;
}
body{background:var(--mock-bg);}
.mock-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:32px 64px;border-bottom:1px solid var(--mock-line);
  font-family:'Work Sans',sans-serif;
}
.mock-logo{
  font-family:'Fraunces',serif;font-size:20px;font-weight:600;
  letter-spacing:0.01em;color:var(--mock-text);text-decoration:none;
}
.mock-navlinks{display:flex;gap:40px;align-items:center;}
.mock-navlinks a{font-size:14px;letter-spacing:0.03em;color:var(--mock-text);text-decoration:none;}
.hero-mock{
  padding:100px 64px 72px;display:flex;flex-direction:column;gap:20px;
  max-width:820px;font-family:'Work Sans',sans-serif;
}
.hero-mock .eyebrow{
  font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--mock-accent);
}
.mock-h1{
  margin:0;font-family:'Fraunces',serif;font-weight:500;font-size:56px;
  line-height:1.08;color:var(--mock-text);
}
.cat-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--mock-line);margin:0 64px 60px;border:1px solid var(--mock-line);
}
.cat-tile{
  display:flex;align-items:center;justify-content:center;height:420px;
  background:var(--mock-tile);text-decoration:none;transition:opacity .2s;
  position:relative;background-size:cover;background-position:center 30%;
}
.cat-tile:hover{opacity:0.8;}
.cat-tile span{font-family:'Fraunces',serif;font-size:30px;color:var(--mock-text);position:relative;z-index:1;}
.cat-tile-photo{align-items:flex-end;}
.cat-tile-photo::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(11,12,12,0.6), rgba(11,12,12,0) 55%);
}
.cat-tile-photo span{color:#F6F4EE;padding-bottom:28px;}
@media (max-width: 900px){
  .cat-grid{grid-template-columns:1fr;}
  .mock-h1{font-size:38px;}
  .hero-mock,.mock-nav{padding-left:24px;padding-right:24px;}
  .mock-navlinks{gap:20px;flex-wrap:wrap;}
}


/* ---------- GALLERY PAGES (Photos / Videos / Design) ---------- */
.gallery-page{padding:0 0 40px;}
.gallery-title{
  margin:0;padding:64px 64px 40px;font-family:'Fraunces',serif;font-weight:500;
  font-size:44px;color:var(--mock-text);
}
.gallery-section{padding:0 64px 56px;font-family:'Work Sans',sans-serif;}
.gallery-section-label{
  font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mock-subtext);
  padding-bottom:16px;border-bottom:1px solid var(--mock-line);margin-bottom:24px;
}
.gallery-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
}
.gallery-card{display:block;text-decoration:none;}
.gallery-card-img{
  aspect-ratio:3 / 2;border-radius:2px;background-color:var(--mock-tile);
  background-size:cover;background-position:center 30%;
}
.gallery-card-name{font-family:'Fraunces',serif;font-size:19px;margin-top:12px;color:var(--mock-text);}
.gallery-card-sub{font-size:12px;color:var(--mock-subtext);margin-top:4px;}
.gallery-soon{font-family:'Work Sans',sans-serif;color:var(--mock-subtext);font-size:15px;max-width:560px;line-height:1.6;}
.gallery-soon-lead{font-size:16px;}
@media (max-width: 900px){
  .gallery-grid{grid-template-columns:1fr;}
  .gallery-title,.gallery-section{padding-left:24px;padding-right:24px;}
}


/* ---------- SINGLE POST (event detail pages) ---------- */
.single-post{
  max-width:820px;margin:0 auto;padding:64px 24px 100px;
  font-family:'Work Sans',sans-serif;
}
.single-title{
  font-family:'Fraunces',serif;font-weight:500;font-size:40px;
  color:var(--mock-text);margin:0 0 28px;line-height:1.15;
}
.single-thumb{margin-bottom:32px;}
.single-thumb img{width:100%;height:auto;border-radius:2px;display:block;}
.single-content{font-size:16px;line-height:1.75;color:var(--mock-text);}
.single-content p{margin:0 0 20px;}
.single-content img{max-width:100%;height:auto;border-radius:2px;margin:8px 0 20px;display:block;}
@media (max-width: 900px){
  .single-post{padding:40px 24px 72px;}
  .single-title{font-size:30px;}
}