/* ==========================================================================
   designerMD — Portfolio Design System
   Black / White / Fluorescent Yellow. Bold type. Minimal, purposeful motion.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

:root{
  --black:#0d0d0d;
  --near-black:#141414;
  --white:#ffffff;
  --yellow:#e4ff00;
  --yellow-dim:#c7dd00;
  --gray-900:#1a1a1a;
  --gray-700:#3a3a3a;
  --gray-500:#6b6b6b;
  --gray-300:#a8a8a8;
  --gray-100:#e8e8e8;
  --gray-075:#eeeeee;
  --gray-050:#f4f4f4;
  --brand-red:#9c1f12;

  --font-display:'Archivo Black','Arial Black',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-script:'Caveat',cursive;

  --space-1:.4rem;
  --space-2:.8rem;
  --space-3:1.2rem;
  --space-4:1.6rem;
  --space-5:2.4rem;
  --space-6:3.2rem;
  --space-7:4.8rem;
  --space-8:6.4rem;
  --space-9:9.6rem;

  --container:1360px;
  --radius:2px;
  --ease:cubic-bezier(.22,.68,.32,1);
  --dur-fast:150ms;
  --dur-med:300ms;
  --dur-slow:500ms;

  --nav-h:86px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
body{
  font-family:var(--font-body);
  background:var(--white);
  color:var(--black);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
svg{width:1em;height:1em;display:inline-block;vertical-align:middle;fill:currentColor;flex:none}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
input,textarea{font-family:inherit;font-size:1rem}
::selection{background:var(--yellow);color:var(--black)}

.container{max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}

.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before,.eyebrow::after{content:'';width:1.6em;height:2px;background:currentColor}
.hero .hero-kicker::before,.hero .hero-kicker::after{content:none}

h1,h2,h3,h4{font-family:var(--font-display);text-transform:uppercase;line-height:.96;letter-spacing:-.01em}
.script{font-family:var(--font-script);text-transform:none;letter-spacing:0;font-weight:700;line-height:1}

.text-yellow{color:var(--yellow)}
.about-copy h2 .hl,.section-head h2 .hl,.project-hero h1 .hl{
  background:var(--yellow);color:var(--black);padding:0 5px;margin:0 -5px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ---- Halftone texture overlays ---- */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,#3c3c3c 1.8px,transparent 2px);
  background-size:10px 10px;
  -webkit-mask-image:radial-gradient(ellipse 56.25% 48.75% at 50% 30%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 56.25% 48.75% at 50% 30%,#000 0%,transparent 72%);
  /* Set from main.js as the page scrolls - moves the dots down just
     enough to offset part of the hero's own upward scroll, so the pattern
     lags behind the text and reads as staying near the top instead of
     scrolling past at the same rate. */
  transform:translateY(var(--dot-shift,0px));
}
@media (prefers-reduced-motion: reduce){
  .hero::before,.project-hero::before,.about::before,.resume-page::before,.work::before{transform:none}
}
.project-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(circle,var(--gray-700) 1px,transparent 1.6px);
  background-size:7px 7px;
  -webkit-mask-image:radial-gradient(ellipse 85% 100% at 100% 0%,#000 0%,#000 75%,transparent 100%);
  mask-image:radial-gradient(ellipse 85% 100% at 100% 0%,#000 0%,#000 75%,transparent 100%);
  transform:translateY(var(--dot-shift,0px));
}
.site-footer::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(circle,var(--gray-700) 1px,transparent 1.6px);
  background-size:7px 7px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 100% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse 85% 75% at 100% 0%,#000 0%,transparent 70%);
}
.about::before,
.resume-page::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(circle,var(--gray-075) 1.8px,transparent 2px);
  background-size:10px 10px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 0% 100%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 75% 85% at 0% 100%,#000 0%,transparent 78%);
  transform:translateY(var(--dot-shift,0px));
}
.about::before{
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 0% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 75% 85% at 0% 0%,#000 0%,transparent 78%);
}
.work::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(circle,var(--gray-075) 1.8px,transparent 2px);
  background-size:10px 10px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 100% 30%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 75% 85% at 100% 30%,#000 0%,transparent 78%);
  transform:translateY(var(--dot-shift,0px));
}
.text-white{color:var(--white)}
.bg-black{background:var(--black);color:var(--white)}
.bg-yellow{background:var(--yellow);color:var(--black)}
.bg-white{background:var(--white);color:var(--black)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-body);font-weight:700;font-size:.95rem;
  letter-spacing:.02em;text-transform:uppercase;
  padding:1.05em 2em;border-radius:999px;
  border:2px solid transparent;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  cursor:pointer;
  white-space:nowrap;
}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.btn-primary:hover{background:var(--black);color:var(--yellow);border-color:var(--yellow)}
.btn-outline-dark{background:transparent;color:var(--black);border-color:var(--black)}
.btn-outline-dark:hover{background:var(--black);color:var(--white)}
.btn-outline-light{background:transparent;color:var(--white);border-color:var(--white)}
.btn-outline-light:hover{background:var(--white);color:var(--black)}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:default;pointer-events:none}

/* ---- Nav ---- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(13,13,13,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:transform var(--dur-med) var(--ease);
}
.site-nav .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand-mark{display:flex;align-items:center;gap:.7rem;color:var(--white)}
.brand-mark img{width:38px;height:38px;flex:none}
.brand-mark span{font-family:var(--font-display);font-size:1rem;letter-spacing:.02em}
.nav-links{display:flex;align-items:center;gap:var(--space-6)}
.nav-links a{
  color:var(--white);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;
  position:relative;padding:.3em 0;
}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--yellow);transition:right var(--dur-fast) var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-links a.active{color:var(--yellow)}
.nav-cta{display:flex;align-items:center;gap:var(--space-3)}
.nav-cta .btn{padding:.75em 1.5em;font-size:.82rem}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:32px;z-index:210;background:none}
.nav-toggle span{display:block;height:2px;background:var(--white);border-radius:2px;transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}

.mobile-menu{
  position:fixed;inset:0;background:var(--black);z-index:190;
  display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);
  padding:0 clamp(1.5rem,8vw,4rem);
  transform:translateY(-100%);
  transition:transform var(--dur-med) var(--ease);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{
  font-family:var(--font-display);font-size:clamp(2.2rem,9vw,3.5rem);color:var(--white);
  text-transform:uppercase;line-height:1.05;
}
.mobile-menu a:hover,.mobile-menu a:active{color:var(--yellow)}
.mobile-menu .btn{margin-top:var(--space-4);align-self:flex-start}
.mobile-menu .btn-primary{color:var(--black)}
.mobile-menu .btn-primary:hover,.mobile-menu .btn-primary:active{color:var(--yellow)}
body.menu-open{overflow:hidden}

/* ---- Reveal-on-scroll ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-group .reveal:nth-child(1){transition-delay:0ms}
.reveal-group .reveal:nth-child(2){transition-delay:60ms}
.reveal-group .reveal:nth-child(3){transition-delay:120ms}
.reveal-group .reveal:nth-child(4){transition-delay:180ms}
.reveal-group .reveal:nth-child(5){transition-delay:240ms}
.reveal-group .reveal:nth-child(6){transition-delay:300ms}
.reveal-group .reveal:nth-child(n+7){transition-delay:340ms}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;background:var(--black);color:var(--white);
  padding-top:calc(var(--nav-h) + var(--space-4) - 4px + 15px);
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:flex-start;justify-content:center;
  overflow:hidden;
}
.hero .container{position:relative;z-index:2;width:100%}
.hero::before{z-index:1}
/* Vertical centering is handled by .hero's own flex box above, so this
   never needs to reserve/overflow a fixed height - if the headline content
   is taller than one screen, .hero (min-height, not height) simply grows
   to fit it instead of clipping the top (behind the nav) or the bottom
   (buttons/scroll cue) the way a fixed 100vh + overflow:hidden would. */
.hero-grid{display:flex;flex-direction:column;align-items:center;padding-bottom:clamp(3rem,10vw,8rem)}
.hero-copy{max-width:740px;margin:0 auto;text-align:center}
.hero-kicker{color:var(--yellow);margin-bottom:var(--space-4)}
.hero h1.flip-headline{
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.flip-line{
  font-size:clamp(3.6rem,9vw,8rem);
  line-height:.98;
  width:100%;text-align:center;
}
.hero h1 .script{
  font-family:var(--font-script);text-transform:none;letter-spacing:0;font-weight:700;
  color:var(--white);font-size:clamp(3.6rem,8.7vw,7.2rem) !important;line-height:1.1;margin-top:-.08em;
}
.flip-word-wrap{display:block;margin:15px 0}
.flip-word{
  display:inline-block;transform-origin:50% 50%;text-align:left;
  color:var(--black);background:var(--yellow);padding:5px;margin:0 -5px;
  font-size:1em;
}
/* A 2D scaleY "flip" instead of a 3D rotateX+perspective one - the 3D
   version relies on the browser promoting this element to its own GPU
   compositing layer (perspective + backface-visibility), and that layer
   can end up mispositioned relative to the element's actual layout box
   after certain resizes, which reads as the word being centered wrong. A
   plain 2D transform can't drift like that. */
.flip-word.flipping{animation:flipWord .5s cubic-bezier(.4,.1,.2,1)}
@keyframes flipWord{
  0%{transform:scaleY(1)}
  49%{transform:scaleY(.04)}
  50%{transform:scaleY(.04)}
  100%{transform:scaleY(1)}
}
@media (prefers-reduced-motion: reduce){.flip-word.flipping{animation:none}}
.hero-sub{
  max-width:560px;color:var(--gray-300);font-size:clamp(1rem,1.6vw,1.2rem);
  margin:var(--space-5) auto var(--space-6);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}

.hero-scroll-cue{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:.6rem;color:var(--gray-300);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;
  white-space:nowrap;width:max-content;
}
.hero-scroll-cue .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);animation:pulse-dot 1.8s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.hero-scroll-cue .dot{animation:none}}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.section{padding:clamp(4rem,9vw,7.5rem) 0}
.section-head{margin-bottom:var(--space-7);max-width:760px}
.section-head h2{font-size:clamp(2.2rem,6vw,4rem);margin-top:var(--space-2)}
.section-head p{font-size:1.05rem;color:var(--black);margin-top:var(--space-3);max-width:560px}
.section-head .eyebrow{font-size:.78rem;color:inherit;margin-top:0;max-width:none}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center p{margin-left:auto;margin-right:auto}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{background:var(--white);position:relative;overflow:hidden;z-index:0;padding-bottom:0}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
/* .about-photo is the grid item (defines the column's width). It has no
   normal-flow children of its own - .about-photo-visual is absolutely
   positioned inside it - so on the >=961px two-column layout it contributes
   zero height to the grid row, which is therefore sized by .about-copy
   alone. That lets JS grow .about-photo-visual down to the stats divider
   line without the row (and the divider) chasing that growth. Below 961px
   the row is single-column/stacked, so .about-photo needs its own
   aspect-ratio height to reserve space in the stack. */
.about-photo{position:relative;width:100%;aspect-ratio:4/5}
.about-photo-visual{position:absolute;inset:0;overflow:hidden}
.about-photo-shape{
  position:absolute;z-index:1;bottom:0;left:50%;
  transform:translateX(-50%) translateY(var(--py,0px)) scaleX(-1);
  width:100%;height:auto;
}
.about-photo-frame{
  position:relative;z-index:2;height:100%;
  display:flex;align-items:flex-end;justify-content:center;
}
.about-photo-frame img{
  height:100%;width:auto;max-width:90%;
  object-fit:contain;object-position:bottom;
}
@media (min-width:961px){
  /* Two-column layout: JS sizes .about-photo-visual directly, so the grid
     item itself shouldn't carry its own aspect-ratio height. */
  .about-photo{aspect-ratio:unset}
}
.about-copy{text-align:center}
.about-copy h2{font-size:clamp(2.2rem,5.6vw,3.6rem);margin-bottom:var(--space-4)}
.about-copy .lede{font-size:1.15rem;color:var(--black);margin-bottom:var(--space-4);font-weight:500}
.about-copy p{color:var(--gray-700);margin-bottom:var(--space-3);max-width:620px;margin-left:auto;margin-right:auto}
.about-copy p .script{font-size:1.5em;color:var(--black)}
.about-highlights{
  margin-top:var(--space-6);background:var(--black);
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:calc(var(--space-6) + 50px) 0 calc(var(--space-6) + 75px);
  display:flex;justify-content:center;
}
.about-highlights-inner{
  max-width:var(--container);margin:0 auto;width:100%;
  padding:0 clamp(1.25rem,4vw,3rem);
  display:flex;flex-direction:column;justify-content:center;
}
.about-stats{
  display:grid;grid-template-columns:repeat(4,max-content);gap:var(--space-6);justify-content:center;
}
.stat{text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(2rem,4vw,2.8rem);color:var(--black)}
.stat b .hi{color:var(--black);font-size:1.3em}
.stat span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-500);font-weight:600}
.about-highlights .stat b,.about-highlights .stat b .hi{color:var(--yellow)}
.about-highlights .stat span{color:var(--yellow)}
.about-skills{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.about-highlights .skill-pill{border-color:var(--white);color:var(--white)}
.skill-pill{
  border:2px solid var(--black);border-radius:999px;padding:.5em 1.1em;font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;
}

/* ==========================================================================
   WORK GRID (home highlights + full portfolio bento)
   ========================================================================== */
.work{background:var(--white);position:relative;overflow:hidden;z-index:0}
.work-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);
}
.work-card{
  position:relative;aspect-ratio:4/3.1;border-radius:var(--radius);overflow:hidden;
  background:var(--black);color:var(--white);
}
.work-card a{display:block;position:relative;width:100%;height:100%}
.work-card img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease);opacity:.92}
.work-card img.thumb-contain{object-fit:contain;box-sizing:border-box;padding:9%;background:var(--white)}
/* Video thumbnails (YouTube hqdefault, fixed 4:3) can carry letterbox bars
   - fill the card by height and crop the sides instead of the default
   crop-top/bottom, so a pillarboxed Shorts frame doesn't show its bars. */
.work-card img.thumb-fill-height{
  position:absolute;top:0;left:50%;width:auto;max-width:none;
  transform:translateX(-50%);
}
.work-card:hover img{transform:scale(1.06)}
.work-card:hover img.thumb-fill-height{transform:translateX(-50%) scale(1.06)}
.work-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,0) 65%);
  pointer-events:none;
}
.work-card-body{
  position:absolute;left:0;right:0;bottom:0;padding:var(--space-4);z-index:2;
}
.work-card-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.tag-pill{
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  background:var(--yellow);color:var(--black);padding:.32em .7em;border-radius:999px;
}
.work-card-title{font-family:var(--font-display);font-size:clamp(1.05rem,1.6vw,1.5rem);text-transform:uppercase;line-height:1.05}
.work-card-arrow{
  position:absolute;top:var(--space-3);right:var(--space-3);z-index:2;
  width:38px;height:38px;border-radius:50%;background:var(--yellow);color:var(--black);
  display:flex;align-items:center;justify-content:center;
  transform:scale(.001);transition:transform var(--dur-fast) var(--ease);
}
.work-card-arrow svg{width:16px;height:16px}
.btn svg{width:.95em;height:.95em}
.work-card:hover .work-card-arrow{transform:scale(1)}

.work-cta{margin-top:var(--space-7);text-align:center}

/* Filter bar (work.html) */
.filter-bar{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:var(--space-6);justify-content:center}
.filter-chip{
  border:2px solid var(--black);border-radius:999px;padding:.55em 1.3em;font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;background:var(--white);color:var(--black);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.filter-chip.active,.filter-chip:hover{background:var(--black);color:var(--yellow)}
.work-card.hide{display:none}

/* ==========================================================================
   PROJECT DETAIL PAGE
   ========================================================================== */
.project-hero{background:var(--black);color:var(--white);padding-top:calc(var(--nav-h) + var(--space-6));padding-bottom:var(--space-7);position:relative;overflow:hidden;z-index:0}
.back-link{
  display:inline-flex;align-items:center;gap:.5em;color:var(--yellow);font-weight:700;
  font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-5);
}
.back-link:hover{color:var(--white)}
.project-hero h1{font-size:clamp(2.4rem,7vw,5rem);margin-bottom:var(--space-4)}
.project-hero .tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:var(--space-4)}
.project-hero p{max-width:640px;color:var(--gray-300);font-size:1.1rem}
.project-count{margin-top:var(--space-4);color:var(--gray-500);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.project-hero.center .container{text-align:center}
.project-hero.center p{margin-left:auto;margin-right:auto}
.project-hero.center .hero-actions{justify-content:center}
.project-hero.center .tags{justify-content:center}
.project-hero.center .back-link{margin-left:auto;margin-right:auto}

.project-gallery{background:var(--white);padding:clamp(3rem,7vw,5rem) 0}
/* Flex instead of grid so an incomplete last row (1 or 2 leftover images)
   centers instead of sitting flush left in its grid cells - same fix as
   .video-grid. flex-basis mirrors the old fixed 2/3-column grid widths at
   each breakpoint; grow is off since those columns never stretched. */
.gallery-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);align-items:center}
.gallery-grid img{border-radius:var(--radius);width:100%;display:block}
.gallery-grid>.gallery-cell,.gallery-grid>.gallery-stack{flex:0 0 calc(50% - var(--space-4)/2)}
.gallery-stack{display:flex;flex-direction:column;justify-content:center;gap:var(--space-4)}
@media(min-width:900px){.gallery-grid>.gallery-cell,.gallery-grid>.gallery-stack{flex-basis:calc(33.333% - var(--space-4)*2/3)}}

/* Sectioned gallery (project split by source subfolder) */
.gallery-section{margin-bottom:clamp(3rem,7vw,5rem)}
.gallery-embed{
  width:100%;height:min(85vh,800px);min-height:520px;
  border-radius:var(--radius);overflow:hidden;background:var(--gray-050);
}
.gallery-embed iframe{width:100%;height:100%;border:0;display:block}
.gallery-embed-video{height:auto;aspect-ratio:16/9;min-height:0;background:var(--black)}
.gallery-embed-group{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,3.5rem)}
.gallery-embed-item{display:flex;flex-direction:column;gap:var(--space-3)}
.gallery-embed-item h3{font-size:1.1rem;font-weight:700;margin:0}
.gallery-embed-item .gallery-embed{height:min(85vh,800px);min-height:520px}
.gallery-section:last-child{margin-bottom:0}
.gallery-section-head{
  display:flex;align-items:baseline;gap:var(--space-4);
  background:var(--black);color:var(--white);
  padding:var(--space-4) clamp(1.25rem,4vw,2rem);
  border-radius:var(--radius);
  margin-bottom:var(--space-5);
}
.gallery-section-index{
  font-family:var(--font-display);color:var(--yellow);font-size:clamp(1.4rem,3vw,2rem);flex:none;
}
.gallery-section-head h2{
  font-size:clamp(1.4rem,3.4vw,2.2rem);color:var(--white);margin:0;
}
.gallery-section-count{
  margin-left:auto;flex:none;color:var(--gray-500);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;align-self:center;
}

/* Sectioned video grid (project split into long-form vs. shorts) - sits on
   the project-gallery's black background, so headings sit directly on it
   rather than reusing .gallery-section-head's own black pill (which would
   disappear against a black page). */
.video-section{margin-bottom:clamp(3rem,7vw,5rem)}
.video-section:last-child{margin-bottom:0}
.video-section-head{
  display:flex;align-items:baseline;gap:var(--space-4);
  padding-bottom:var(--space-3);margin-bottom:var(--space-5);
  border-bottom:2px solid var(--gray-700);
}
.video-section-head h2{
  font-family:var(--font-display);font-size:clamp(1.4rem,3.4vw,2.2rem);color:var(--white);margin:0;
}
.video-section-count{
  margin-left:auto;flex:none;color:var(--gray-500);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;align-self:center;
}

.project-nav{
  background:var(--black);color:var(--white);padding:var(--space-7) 0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
}
.project-nav a.btn{flex:none}
.project-nav .next-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-500)}
.project-nav .next-title{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2.2rem);text-transform:uppercase}

/* Video project pages */
/* Flex instead of grid so a row that isn't full (1 or 2 videos) centers
   its cards as a group instead of stretching/left-aligning them the way
   an auto-fill grid track would - a full row (currently 3-up at this
   container width) still grows each card to the same ~370px it would
   under the old grid, so that case renders unchanged. */
.video-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-5)}
.video-card{background:var(--gray-900);border-radius:var(--radius);overflow:hidden;flex:1 1 300px;max-width:370px}
.video-frame{position:relative;aspect-ratio:16/9;background:var(--black);cursor:pointer;overflow:hidden}
.video-frame img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity var(--dur-fast) var(--ease)}
.video-frame:hover img{opacity:.95}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;background:var(--yellow);
  display:flex;align-items:center;justify-content:center;transition:transform var(--dur-fast) var(--ease);
}
.video-frame:hover .video-play{transform:translate(-50%,-50%) scale(1.1)}
.video-play svg{width:20px;height:20px;fill:var(--black);margin-left:3px}
.video-meta{padding:var(--space-3) var(--space-4) var(--space-4)}
.video-meta h3{font-family:var(--font-body);text-transform:none;font-weight:700;font-size:.98rem;color:var(--white);line-height:1.3}
.video-meta span{display:block;margin-top:.4rem;font-size:.75rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* ==========================================================================
   CONNECT / CONTACT
   ========================================================================== */
.connect{background:var(--yellow);color:var(--black);padding-bottom:calc(2 * clamp(4rem,9vw,7.5rem) - var(--space-6))}
.connect-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.connect-copy{text-align:center}
.connect h2{font-size:clamp(2.4rem,7vw,4.6rem);margin-top:var(--space-2)}
.connect-lede{font-size:1.15rem;max-width:460px;margin-top:var(--space-4);font-weight:500;margin-left:auto;margin-right:auto}
.connect-direct{margin-top:var(--space-6)}
.connect-socials{justify-content:center}
.connect-email{
  font-family:var(--font-display);font-size:clamp(1.3rem,3vw,1.9rem);text-transform:none;
  display:inline-block;border-bottom:3px solid var(--black);padding-bottom:.1em;
}
.connect-socials{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.social-btn{
  width:52px;height:52px;border-radius:50%;border:2px solid var(--black);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.social-btn svg{width:20px;height:20px;fill:currentColor}
.social-btn:hover{background:var(--black);color:var(--yellow)}

.contact-form{background:var(--black);color:var(--white);border-radius:var(--radius);padding:clamp(1.75rem,4vw,2.75rem)}
.form-row{margin-bottom:var(--space-4)}
.form-row label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--gray-300);margin-bottom:.5em}
.form-row input,.form-row textarea{
  width:100%;background:transparent;border:none;border-bottom:2px solid var(--gray-700);
  color:var(--white);padding:.7em .2em;transition:border-color var(--dur-fast) var(--ease);
}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--gray-500)}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--yellow)}
.form-row textarea{resize:vertical;min-height:110px}
.form-status{margin-top:var(--space-3);font-size:.88rem;font-weight:600;min-height:1.2em}
.form-status.ok{color:var(--yellow)}
.form-status.err{color:#ff6b5e}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--black);color:var(--gray-300);padding:var(--space-6) 0 var(--space-5);position:relative;overflow:hidden;z-index:0}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);padding-bottom:var(--space-5);border-bottom:1px solid var(--gray-700)}
.footer-links{display:flex;gap:var(--space-5);flex-wrap:wrap}
.footer-links a{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.footer-links a:hover{color:var(--yellow)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-4);font-size:.8rem}
.footer-bottom .socials{display:flex;gap:var(--space-3)}
.footer-bottom .socials a svg{width:16px;height:16px;fill:var(--gray-300);transition:fill var(--dur-fast) var(--ease)}
.footer-bottom .socials a:hover svg{fill:var(--yellow)}

/* ==========================================================================
   RESUME PAGE
   ========================================================================== */
.resume-page{background:var(--white);padding-top:calc(var(--nav-h) + var(--space-7));padding-bottom:var(--space-8);position:relative;overflow:hidden;z-index:0}
.resume-doc{max-width:820px;margin:0 auto;border:2px solid var(--black);padding:clamp(1.75rem,5vw,3.5rem);text-align:center}
.resume-doc h2{font-size:clamp(1.3rem,3vw,1.6rem);margin:var(--space-6) 0 var(--space-3);border-bottom:3px solid var(--yellow);display:inline-block;padding-bottom:.2em}
.resume-doc h2:first-child{margin-top:0}
.resume-job{margin-bottom:var(--space-4)}
.resume-job .role{font-weight:800;font-size:1.05rem}
.resume-job .dates{color:var(--gray-500);font-size:.85rem;font-style:italic;margin-bottom:.6rem}
.resume-job ul{margin-top:.4rem;text-align:left;max-width:620px;margin-left:auto;margin-right:auto}
.resume-job li{position:relative;padding-left:1.2em;margin-bottom:.4rem;color:var(--gray-700);font-size:.95rem}
.resume-job li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--yellow);border-radius:50%}
.resume-doc>p{max-width:620px;margin-left:auto;margin-right:auto}
.resume-achievements{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-3);margin-top:.6rem;text-align:left;
}
.resume-achievement{border:2px solid var(--black);border-radius:var(--radius);padding:var(--space-4)}
.resume-achievement h3{
  font-family:var(--font-display);font-size:.92rem;text-transform:uppercase;letter-spacing:.02em;
  margin-bottom:.5rem;border-bottom:3px solid var(--yellow);display:inline-block;padding-bottom:.15em;
}
.resume-achievement p{font-size:.9rem;color:var(--gray-700);margin:0}
.resume-skills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem;justify-content:center}
.resume-links{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:.6rem}
.resume-links a{font-weight:700;font-size:.9rem;border-bottom:2px solid var(--yellow);padding-bottom:.1em}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:960px){
  .about-grid{grid-template-columns:1fr}
  .about-photo{max-width:460px;margin:0 auto}
  .connect-grid{grid-template-columns:1fr}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid>.gallery-cell,.gallery-grid>.gallery-stack{flex-basis:calc(50% - var(--space-4)/2)}
}
@media (max-width:720px){
  .nav-links,.nav-cta .btn-outline-dark, .nav-cta{display:none}
  .nav-toggle{display:flex}
  /* Content-sized hero on mobile instead of a forced full-screen box - the
     headline block is usually shorter than the viewport here, and forcing
     min-height:100vh (flex-start anchored) just left dead black space
     below the buttons. */
  .hero{min-height:0}
  .hero-grid{padding-bottom:clamp(2.5rem,10vw,3.5rem)}
  .hero-scroll-cue{display:none}
  .work-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr}
  .gallery-grid>.gallery-cell,.gallery-grid>.gallery-stack{flex-basis:100%}
  .hero-copy{max-width:100%}
  .hero-sub{max-width:100%}
  /* The default clamp's 3.6rem floor doesn't shrink any further below
     ~694px, so on the narrowest phones (iPhone SE and similar, ~320-375px)
     the longest flip-word ("PRODUCE") is still wider than the line has
     room for. Give it a lower floor that keeps scaling down through that
     range instead. */
  .flip-line{font-size:clamp(3rem,12vw,3.6rem)}
}