/* ============================================================
   CODY FRENCH — codyfrench.com
   Faithful rebuild of the original: full-bleed photography,
   centered wordmark, underline nav, white text over imagery,
   socials bottom-right. Elevated with motion.
   ============================================================ */

:root{
  --white:#ffffff;
  --black:#000000;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.55);
  --max:1280px;
  --pad:clamp(20px, 4vw, 56px);
  --ease:cubic-bezier(.22,.61,.36,1);
  font-size:16px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:"Montserrat",system-ui,-apple-system,sans-serif;
  font-weight:400;color:var(--white);background:#000;
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}
::selection{background:#fff;color:#000}

/* ============================================================
   FIXED HEADER — wordmark + underline nav (the original's spine)
   ============================================================ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(18px,3vw,30px) var(--pad);
  pointer-events:none;
}
.site-head > *{pointer-events:auto}
.wordmark{
  font-weight:600;font-size:clamp(1rem,1.6vw,1.3rem);letter-spacing:.16em;
  white-space:nowrap;
  text-shadow:0 1px 18px rgba(0,0,0,.45);
}
.main-nav{display:flex;gap:clamp(1rem,2.4vw,2.4rem)}
.main-nav a{
  position:relative;
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding-top:.7rem;
  color:var(--white);
  text-shadow:0 1px 14px rgba(0,0,0,.5);
  transition:opacity .25s var(--ease);
}
/* the thin line above each nav item, like the original */
.main-nav a::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line);
  transform:scaleX(1);transform-origin:center;
  transition:background .25s var(--ease);
}
.main-nav a::after{
  content:"";position:absolute;top:0;left:50%;right:50%;height:1px;
  background:#fff;transition:left .3s var(--ease),right .3s var(--ease);
}
.main-nav a:hover{opacity:1}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{left:0;right:0}

/* mobile: collapse nav into a button + overlay */
.nav-toggle{
  display:none;position:fixed;top:14px;right:var(--pad);z-index:80;
  width:46px;height:46px;align-items:center;justify-content:center;
  background:#fff;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.22);
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;width:22px;height:2px;background:#111;border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.nav-toggle span::before{transform:translateY(-6px)}
.nav-toggle span::after{transform:translateY(6px)}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{transform:rotate(45deg)}
body.nav-open .nav-toggle span::after{transform:rotate(-45deg)}

@media (max-width:820px){
  .site-head{justify-content:flex-start}
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;inset:0;z-index:70;
    flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;
    background:rgba(0,0,0,.94);backdrop-filter:blur(6px);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
  }
  .main-nav a{font-size:1.1rem;padding-top:0}
  .main-nav a::before{display:none}
  body.nav-open .main-nav{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
}

/* ============================================================
   FULL-BLEED PAGE SHELL
   ============================================================ */
.stage{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.stage__bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  will-change:transform;
  animation:kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1.06) translateY(0)}
  to{transform:scale(1.14) translateY(-1.4%)}
}
.stage__bg.tint-dark::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34)}
.stage__bg.tint-about::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.32))}
.stage__bg.tint-red::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(150,20,20,.35),rgba(120,15,15,.5)),rgba(40,0,0,.18);mix-blend-mode:normal}

/* socials — bottom-right, on every page */
.socials{
  position:absolute;right:var(--pad);bottom:clamp(20px,3vw,34px);z-index:20;
  display:flex;gap:1.1rem;align-items:center;
}
.socials a{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  opacity:.92;transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.socials a:hover{transform:translateY(-3px);opacity:1}
.socials svg{width:20px;height:20px;fill:#fff;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}

/* ============================================================
   ANIMATION PRIMITIVES
   ============================================================ */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fade-up.in{opacity:1;transform:none}
.fade-in{opacity:0;transition:opacity 1.1s var(--ease)}
.fade-in.in{opacity:1}
[data-delay="1"]{transition-delay:.12s}
[data-delay="2"]{transition-delay:.24s}
[data-delay="3"]{transition-delay:.36s}
[data-delay="4"]{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  .fade-up,.fade-in{opacity:1;transform:none}
  .stage__bg{animation:none}
}

/* ============================================================
   HOME
   ============================================================ */
.home .stage{justify-content:flex-end}
.home__plate{
  padding:0 var(--pad) clamp(90px,16vh,170px);
  max-width:var(--max);width:100%;margin:0 auto;
}
.home__plate .eyebrow{
  font-size:.74rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1rem;
}
.home__plate h1{
  font-weight:600;letter-spacing:.02em;line-height:.95;
  font-size:clamp(3.2rem,11vw,9rem);text-transform:uppercase;
  text-shadow:0 2px 40px rgba(0,0,0,.4);
}
.home__plate p{margin-top:1.1rem;max-width:34ch;color:var(--muted);font-size:1rem;font-weight:300}

/* ============================================================
   ABOUT — all text over imagery
   ============================================================ */
.about .stage{justify-content:center}
.about__col{
  max-width:760px;margin:0 auto;width:100%;
  padding:clamp(110px,16vh,170px) var(--pad) clamp(90px,12vh,140px);
  text-align:center;
}
.about__col h1{
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  font-size:clamp(1.9rem,4.4vw,2.8rem);margin-bottom:2rem;
}
.about__col p{
  font-size:clamp(.95rem,1.4vw,1.06rem);font-weight:400;line-height:1.85;
  color:#f2f2f2;text-shadow:0 1px 16px rgba(0,0,0,.55);
}
.about__col p + p{margin-top:1.3rem}
.about__col p strong{font-weight:600}

/* ============================================================
   VIDEO PARTS — black, featured player + carousel
   ============================================================ */
.dark-page{background:#000;min-height:100vh}
.page-pad{padding:clamp(110px,15vh,150px) var(--pad) clamp(80px,10vh,120px);max-width:var(--max);margin:0 auto}
.page-title{
  text-align:center;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,3rem);margin-bottom:clamp(2rem,5vw,3.2rem);
}

.feature{margin:0 auto clamp(1.4rem,3vw,2rem);max-width:1000px}
.feature__label{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:.9rem;
}
.feature__label h2{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:clamp(1.2rem,3vw,1.8rem)}
.feature__label span{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.player{
  position:relative;width:100%;aspect-ratio:16/9;background:#0a0a0a;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* horizontal carousel of parts */
.carousel-wrap{position:relative;max-width:1100px;margin:0 auto}
.carousel{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}
.card{
  flex:0 0 auto;width:min(74vw,320px);scroll-snap-align:start;
  position:relative;aspect-ratio:16/10;overflow:hidden;background:#111;
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;transition:transform .35s var(--ease);
}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),opacity .3s}
.card:hover img{transform:scale(1.05)}
.card__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.card__play::before{
  content:"";width:54px;height:54px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(2px);
  border:1.5px solid rgba(255,255,255,.85);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.card__play::after{
  content:"";position:absolute;
  border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;
  margin-left:4px;
}
.card:hover .card__play::before{background:rgba(0,0,0,.2);transform:scale(1.08)}
.card__name{
  position:absolute;left:12px;bottom:10px;z-index:2;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),opacity .25s;
}
.car-btn:hover{background:rgba(0,0,0,.85)}
.car-btn.prev{left:-8px}
.car-btn.next{right:-8px}
.car-btn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
@media (max-width:680px){.car-btn{display:none}}

/* lightbox for carousel videos */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;padding:var(--pad);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox__inner{position:relative;width:min(960px,100%);aspect-ratio:16/9}
.lightbox iframe{width:100%;height:100%;border:0}
.lightbox__close{position:absolute;top:-44px;right:0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}

/* ============================================================
   PHOTOS — black, two-column gallery
   ============================================================ */
.gallery{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px);
  max-width:1100px;margin:0 auto;
}
.gallery figure{position:relative;overflow:hidden;background:#0d0d0d;cursor:pointer}
.gallery figure.l{grid-column:1 / -1;aspect-ratio:16/9}
.gallery figure.v{aspect-ratio:3/4}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figure.missing::after{
  content:attr(data-file);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.4);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:1rem;
}
@media (max-width:600px){
  .gallery{grid-template-columns:1fr}
  .gallery figure.l{aspect-ratio:3/2}
}

/* photo lightbox */
.plightbox{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,60px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.plightbox.open{opacity:1;pointer-events:auto}
.plightbox img{max-width:100%;max-height:90vh;object-fit:contain}
.plightbox__close{position:absolute;top:18px;right:24px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}

/* ============================================================
   CONTACT — red-washed bg, form
   ============================================================ */
.contact .stage{justify-content:center}
.contact__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;
  max-width:1080px;width:100%;margin:0 auto;
  padding:clamp(110px,15vh,160px) var(--pad) clamp(90px,12vh,140px);
}
.contact__intro h1{font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:clamp(2.2rem,6vw,3.4rem);margin-bottom:1.4rem}
.contact__intro p{color:#f2eaea;font-size:.98rem;line-height:1.7;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.contact__intro p + p{margin-top:1.2rem}
.contact__intro a{border-bottom:1px solid rgba(255,255,255,.5);transition:border-color .2s}
.contact__intro a:hover{border-color:#fff}

/* form-less single-column contact */
.contact__grid--solo{grid-template-columns:1fr;max-width:760px;text-align:center}
.contact__grid--solo .contact__intro h1{font-size:clamp(2.6rem,8vw,4.4rem);margin-bottom:1.8rem}
.contact__grid--solo .contact__intro p{font-size:clamp(1rem,1.6vw,1.15rem)}
.contact__grid--solo .contact__intro a{display:inline-block;margin-top:.2rem;font-weight:500}

.form label{display:block;font-size:.78rem;font-style:italic;letter-spacing:.02em;margin:0 0 .4rem;color:#fff}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form .field{margin-bottom:1.1rem}
.form input,.form textarea{
  width:100%;background:transparent;border:1px solid rgba(255,255,255,.6);
  color:#fff;padding:.7rem .8rem;font:inherit;font-size:.95rem;border-radius:0;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.form input:focus,.form textarea:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.06)}
.form textarea{resize:vertical;min-height:110px}
.form .submit{
  margin-top:.4rem;background:#fff;color:#1a1a1a;font-weight:600;letter-spacing:.04em;
  padding:.8rem 2.2rem;transition:transform .2s var(--ease),opacity .2s;
}
.form .submit:hover{transform:translateY(-2px);opacity:.92}
.form__note{margin-top:1rem;font-size:.8rem;color:rgba(255,255,255,.75)}
@media (max-width:760px){
  .contact__grid{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
}

/* ============================================================
   LINKS — hidden linktree (dark, minimal)
   ============================================================ */
.links-body{background:#0a0a0a;min-height:100vh}
.links-wrap{max-width:460px;margin:0 auto;padding:clamp(56px,10vh,90px) var(--pad) 70px;text-align:center}
.links-wrap .avatar{width:88px;height:88px;border-radius:50%;overflow:hidden;margin:0 auto 1.1rem;border:1px solid rgba(255,255,255,.2)}
.links-wrap .avatar img{width:100%;height:100%;object-fit:cover}
.links-wrap h1{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:1.5rem}
.links-wrap .sub{color:rgba(255,255,255,.6);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin:.5rem 0 2rem}
.link-btn{
  display:block;border:1px solid rgba(255,255,255,.22);
  padding:.95rem 1.2rem;margin-top:.7rem;
  font-weight:500;font-size:.85rem;letter-spacing:.05em;
  transition:background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease);
}
.link-btn:hover{background:#fff;color:#000;transform:translateY(-2px)}
.link-btn.hot{background:#fff;color:#000;border-color:#fff}
.link-btn.hot:hover{opacity:.88}
.links-wrap .group{margin-top:2.2rem}
.links-wrap .group .eyebrow{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.5rem}

/* ============================================================
   MEDIA KIT — hidden
   ============================================================ */
.kit{max-width:820px;margin:0 auto}
.kit img{width:100%;border:1px solid rgba(255,255,255,.1);margin-top:clamp(16px,3vw,26px)}
.kit-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.btn{display:inline-block;font-weight:500;font-size:.82rem;letter-spacing:.04em;border:1px solid #fff;padding:.75rem 1.5rem;transition:background .2s var(--ease),color .2s var(--ease)}
.btn:hover{background:#fff;color:#000}
.btn.solid{background:#fff;color:#000}
.btn.solid:hover{opacity:.88}

/* ============================================================
   MOBILE OPTIMIZATION PASS
   ============================================================ */
@media (max-width:820px){
  /* wordmark sits clear of the menu button, slightly smaller */
  .site-head{padding:18px var(--pad)}
  .wordmark{font-size:1.15rem;max-width:calc(100% - 70px)}

  /* social icons: larger tap targets, comfortable spacing */
  .socials{gap:.4rem;bottom:18px}
  .socials a{width:40px;height:40px}
  .socials svg{width:22px;height:22px}

  /* home hero: keep title readable, give socials room */
  .home__plate{padding-bottom:clamp(70px,14vh,120px)}
  .home__plate h1{font-size:clamp(3rem,15vw,5rem)}
  .home__plate p{font-size:.95rem}

  /* about: tighter, more legible long-form on small screens */
  .about__col{padding-left:6vw;padding-right:6vw}
  .about__col p{font-size:1rem;line-height:1.8}

  /* video parts: comfortable spacing */
  .feature__label h2{font-size:1.3rem}

  /* contact: don't let socials overlap the email block */
  .contact__grid--solo{padding-bottom:clamp(110px,18vh,150px)}
}

@media (max-width:520px){
  .home__plate h1{font-size:clamp(2.8rem,16vw,4.2rem)}
  .about__col h1,.page-title,.contact__intro h1{font-size:clamp(1.9rem,8vw,2.6rem)}
  .about__col p{font-size:.96rem}
  /* single-column gallery already handled; tighten gaps */
  .gallery{gap:10px}
}

/* larger, easier tap targets for menu links on phones */
@media (max-width:820px){
  .main-nav a{font-size:1.25rem;padding:.4rem 1rem}
}