/* ==========================================================================
   Grant Campbell — Portfolio
   Design system + layout + animation
   ========================================================================== */

:root{
  --bg:        #0a0a0a;
  --bg-alt:    #111111;
  --ink:       #f4f2ee;
  --ink-dim:   #9a9994;
  --ink-faint: #5c5b57;
  --line:      #232320;
  --accent:    #ff5a2e;
  --accent-ink:#0a0a0a;

  --display:   'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --body:      'Inter', 'Helvetica Neue', Arial, sans-serif;

  --gutter:    6vw;
  --maxw:      1440px;
  --ease:      cubic-bezier(.16,.84,.32,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* opacity gate — removed once fonts + first paint are ready, avoids FOUC flash */
body.is-loading{ opacity:0; }
body{ opacity:1; transition:opacity .5s var(--ease-soft); }

::selection{ background:var(--accent); color:var(--accent-ink); }

img,video{ display:block; max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
}

p{ margin:0 0 1em; color:var(--ink-dim); }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:600;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ==========================================================================
   Custom cursor (desktop / fine pointer only)
   ========================================================================== */
.cursor-dot{
  position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
  background:var(--accent); pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .2s;
  mix-blend-mode:difference;
}
.cursor-dot.is-hover{ width:64px; height:64px; background:var(--ink); }
@media (hover:none), (pointer:coarse){ .cursor-dot{ display:none; } }

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem var(--gutter);
  background:linear-gradient(180deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.55) 70%, rgba(10,10,10,0) 100%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.site-nav a{ color:var(--ink); }
.nav-mark{ font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:-.01em; }
.nav-mark span{ color:var(--accent); }

.nav-links{ display:flex; gap:2.4rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  position:relative; padding-bottom:2px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-active::after{ width:100%; }

.nav-toggle{ display:none; }

@media (max-width: 760px){
  .nav-links{ display:none; }
  .nav-toggle{
    display:block; background:none; border:0; color:var(--ink); cursor:pointer;
    font-family:var(--body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  }
}

/* full-screen mobile menu */
.mobile-menu{
  position:fixed; inset:0; background:var(--bg); z-index:1100;
  display:flex; flex-direction:column; justify-content:center; gap:1.4rem;
  padding:0 var(--gutter);
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--display); font-size:2.4rem; font-weight:600; }
.mobile-menu-close{
  position:absolute; top:1.6rem; right:var(--gutter);
  background:none; border:0; color:var(--ink); font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; padding-bottom:4.5rem;
  background:var(--bg);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.96) 100%);
}
.hero-content{ position:relative; z-index:1; width:100%; }
.hero-title{
  font-size:clamp(2.6rem, 8vw, 7.2rem);
  line-height:.94; font-weight:600; letter-spacing:-.02em;
  overflow:hidden;
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line span{
  display:block; transform:translateY(110%);
  animation:riseUp .9s var(--ease) forwards;
  animation-delay:calc(var(--i, 0) * 90ms + .2s);
}
@keyframes riseUp{ to{ transform:translateY(0); } }

.hero-sub{
  margin-top:1.6rem; max-width:36em;
  font-size:clamp(1rem,1.6vw,1.2rem); color:var(--ink-dim);
  opacity:0; animation:fadeUp .8s var(--ease) forwards; animation-delay:.9s;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

.hero-meta{
  margin-top:2.4rem; display:flex; gap:2.6rem; flex-wrap:wrap;
  opacity:0; animation:fadeUp .8s var(--ease) forwards; animation-delay:1.1s;
}
.hero-meta div strong{ display:block; font-family:var(--display); font-size:1.4rem; }
.hero-meta div span{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:.2rem; }

.scroll-cue{
  position:absolute; right:var(--gutter); bottom:2.2rem; z-index:1;
  display:flex; align-items:center; gap:.6rem; color:var(--ink-faint);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; animation:fadeUp .8s var(--ease) forwards; animation-delay:1.3s;
}
.scroll-cue .stick{ width:1px; height:34px; background:var(--ink-faint); position:relative; overflow:hidden; }
.scroll-cue .stick::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--accent); animation:stickDrop 2s var(--ease-soft) infinite;
}
@keyframes stickDrop{ 0%{ top:-100%;} 60%{ top:100%;} 100%{ top:100%;} }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
section{ position:relative; }
.section-pad{ padding:7rem 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:3.4rem; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.8rem,4vw,2.8rem); }
.section-head .count{ font-family:var(--display); color:var(--ink-faint); font-size:.9rem; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:80ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:160ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:240ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:320ms; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:400ms; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay:480ms; }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay:560ms; }
.reveal-stagger.is-visible > *:nth-child(9){ transition-delay:640ms; }
.reveal-stagger.is-visible > *:nth-child(10){ transition-delay:720ms; }

/* ==========================================================================
   Work grid (index)
   ========================================================================== */
.work-grid{ display:flex; flex-direction:column; }
.work-row{
  display:grid; grid-template-columns:.7fr 3fr 1.6fr 1fr; align-items:center; gap:2rem;
  padding:2.1rem 0; border-top:1px solid var(--line);
  position:relative; overflow:hidden;
}
.work-grid .work-row:last-child{ border-bottom:1px solid var(--line); }
.work-row .idx{ font-family:var(--display); color:var(--ink-faint); font-size:.95rem; }
.work-row .title{ font-family:var(--display); font-size:clamp(1.4rem,3.2vw,2.4rem); font-weight:600; transition:transform .5s var(--ease), color .4s; }
.work-row .client{ color:var(--ink-dim); font-size:.95rem; }
.work-row .tags{ color:var(--ink-faint); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; text-align:right; }
.work-row .thumb{
  position:absolute; top:50%; right:8%; width:280px; height:180px;
  transform:translateY(-50%) scale(.9) rotate(2deg); border-radius:6px; overflow:hidden;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease), transform .5s var(--ease);
  z-index:2; box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.work-row .thumb img{ width:100%; height:100%; object-fit:cover; }
.work-row a.row-link{ position:absolute; inset:0; z-index:3; }

.work-row:hover{ border-color:var(--ink-faint); }
.work-row:hover .title{ transform:translateX(18px); color:var(--accent); }
.work-row:hover .thumb{ opacity:1; transform:translateY(-50%) scale(1) rotate(0deg); }

@media (max-width:900px){
  .work-row{ grid-template-columns:.5fr 2fr 1fr; row-gap:.4rem; }
  .work-row .tags{ display:none; }
  .work-row .thumb{ display:none; }
}

/* ==========================================================================
   Case study page
   ========================================================================== */
.case-hero{
  position:relative; min-height:80svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:8rem; padding-bottom:3.5rem; overflow:hidden;
}
.case-hero-media{ position:absolute; inset:0; z-index:0; }
.case-hero-media img, .case-hero-media video{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.case-hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.35) 40%, rgba(10,10,10,.96) 100%);
}
.case-hero-content{ position:relative; z-index:1; }
.case-hero .eyebrow{ color:var(--accent); }
.case-hero h1{ font-size:clamp(2.2rem,6vw,5rem); margin-top:.6rem; max-width:16em; line-height:1.02; }

.case-meta{
  display:grid; grid-template-columns:repeat(4,auto); gap:2.6rem;
  padding:3rem 0; border-bottom:1px solid var(--line); margin-bottom:4rem;
}
.case-meta div span{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.4rem; }
.case-meta div strong{ font-family:var(--display); font-weight:600; font-size:1.05rem; }
@media (max-width:760px){ .case-meta{ grid-template-columns:repeat(2,1fr); gap:1.6rem 2rem; } }

.case-copy{ display:grid; grid-template-columns:.8fr 2fr; gap:3rem; margin-bottom:5rem; }
.case-copy .label{ font-family:var(--display); font-size:1.6rem; color:var(--ink-faint); }
.case-copy .block{ margin-bottom:3.2rem; }
.case-copy .block:last-child{ margin-bottom:0; }
.case-copy .block h3{ font-size:1.6rem; margin-bottom:1rem; }
.case-copy .block p{ font-size:1.08rem; color:var(--ink-dim); max-width:46em; }
@media (max-width:820px){ .case-copy{ grid-template-columns:1fr; gap:1rem; } }

.case-gallery{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1.2rem; margin-bottom:6rem;
}
.case-gallery figure{ margin:0; overflow:hidden; border-radius:4px; background:var(--bg-alt); }
.case-gallery img, .case-gallery video{
  width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);
}
.case-gallery figure:hover img, .case-gallery figure:hover video{ transform:scale(1.045); }
.case-gallery .g-wide{ grid-column:span 6; aspect-ratio:16/8; }
.case-gallery .g-half{ grid-column:span 3; aspect-ratio:4/3; }
.case-gallery .g-third{ grid-column:span 2; aspect-ratio:1/1; }
@media (max-width:820px){
  .case-gallery{ grid-template-columns:repeat(2,1fr); }
  .case-gallery .g-wide{ grid-column:span 2; aspect-ratio:16/11; }
  .case-gallery .g-half{ grid-column:span 2; aspect-ratio:4/3; }
  .case-gallery .g-third{ grid-column:span 1; aspect-ratio:1/1; }
}
/* graceful placeholder while real media isn't dropped in yet */
.case-gallery figure img[data-fallback], .case-gallery figure video[data-fallback]{
  background:
    repeating-linear-gradient(135deg, var(--bg-alt) 0 14px, #161614 14px 28px);
}

.case-next{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:4rem 0; border-top:1px solid var(--line);
}
.case-next .eyebrow{ margin-bottom:.6rem; }
.case-next h3{ font-size:clamp(1.6rem,4vw,3rem); transition:transform .4s var(--ease), color .4s; }
.case-next:hover h3{ transform:translateX(14px); color:var(--accent); }
.case-next .arrow{ font-size:2rem; color:var(--ink-faint); }

/* ==========================================================================
   About / Contact
   ========================================================================== */
.page-hero{ padding:10rem 0 4rem; }
.page-hero h1{ font-size:clamp(2.4rem,7vw,5.6rem); max-width:18em; }
.page-hero .eyebrow{ color:var(--accent); margin-bottom:1rem; display:block; }

.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-bottom:6rem; }
.about-grid .photo{ aspect-ratio:4/5; border-radius:6px; overflow:hidden; background:var(--bg-alt); }
.about-grid .photo img{ width:100%; height:100%; object-fit:cover; }
.about-copy p{ font-size:1.15rem; color:var(--ink-dim); max-width:32em; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:2.4rem; } }

.credential-list{ list-style:none; margin:0; padding:0; }
.credential-list li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:1.4rem 0; border-top:1px solid var(--line); font-size:1rem;
}
.credential-list li:last-child{ border-bottom:1px solid var(--line); }
.credential-list li span:first-child{ color:var(--ink); font-weight:600; }
.credential-list li span:last-child{ color:var(--ink-faint); }

.social-row{ display:flex; gap:1.6rem; margin-top:2.4rem; }
.social-row a{
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  padding-bottom:3px; border-bottom:1px solid var(--ink-faint); transition:border-color .3s, color .3s;
}
.social-row a:hover{ color:var(--accent); border-color:var(--accent); }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:2.4rem; } }

.contact-details div{ margin-bottom:2.2rem; }
.contact-details span{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.5rem; }
.contact-details strong{ font-family:var(--display); font-size:1.5rem; font-weight:600; }
.contact-details a strong{ transition:color .3s; }
.contact-details a:hover strong{ color:var(--accent); }

.field{ margin-bottom:1.8rem; }
.field label{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.6rem; }
.field input, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--ink); font-family:var(--body); font-size:1.05rem; padding:.7rem 0;
  outline:none; transition:border-color .3s;
}
.field input:focus, .field textarea:focus{ border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:110px; }

.btn{
  display:inline-flex; align-items:center; gap:.7rem; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:100px;
  font-family:var(--body); font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
  padding:1rem 1.8rem; transition:transform .3s var(--ease), background .3s;
}
.btn:hover{ transform:translateY(-3px); }
.form-note{ margin-top:1rem; font-size:.85rem; color:var(--ink-faint); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ border-top:1px solid var(--line); padding:4rem 0 2.4rem; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:3rem; }
.footer-cta{ font-family:var(--display); font-size:clamp(1.8rem,4.6vw,3.4rem); max-width:14em; }
.footer-cta .btn{ margin-top:1.6rem; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; color:var(--ink-faint); font-size:.8rem; }
.footer-bottom .social-row{ margin-top:0; }
.footer-bottom a{ color:var(--ink-faint); }
.footer-bottom a:hover{ color:var(--ink); }

/* utility */
.mt-0{ margin-top:0; }
.text-accent{ color:var(--accent); }