/* Thembi Mkandla — The Gallery. Recreated from the claude.ai/design handoff.
   Three colours, Bodoni Moda + Jost, 0 radius, single hairline divider. */

:root{
  --ink:#111111;
  --paper:#FAF9F7;
  --accent:#4B1F35;
  --hair:rgba(17,17,17,.10);
  --muted:rgba(17,17,17,.5);
  --faint:rgba(17,17,17,.42);
  --serif:'Bodoni Moda',Didot,'Times New Roman',serif;
  --sans:'Jost','Futura','Helvetica Neue',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--paper);}
body{
  font-family:var(--sans);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;min-height:100vh;
}
img,video{display:block;width:100%;height:100%;object-fit:cover;}
input,textarea,button{font-family:inherit;}
::selection{background:var(--accent);color:var(--paper);}
a{color:inherit;}

/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-scrolling iframe{pointer-events:none;}

@keyframes tm-cue{0%{transform:translateY(0);opacity:.45}50%{opacity:1}100%{transform:translateY(7px);opacity:.45}}

/* rise-in on scroll */
[data-rise]{opacity:0;transform:translateY(30px);
  transition:opacity 1.15s cubic-bezier(.2,.6,.2,1),transform 1.15s cubic-bezier(.2,.6,.2,1);will-change:opacity,transform;}
[data-rise].in{opacity:1;transform:none;}

/* ---------- GATEWAY ---------- */
#gateway{position:fixed;inset:0;z-index:1000;cursor:pointer;background:#111;
  transition:opacity 1.15s cubic-bezier(.4,0,.2,1);opacity:1;}
#gateway.gone{opacity:0;pointer-events:none;}
#gateway .g-img{position:absolute;inset:0;object-position:center 30%;}
/* darker than the home hero so the cover reads as its own moment */
#gateway .g-scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(15,13,13,.66) 0%,rgba(15,13,13,.46) 38%,rgba(15,13,13,.46) 68%,rgba(15,13,13,.72) 100%);}
#gateway .g-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;}
/* signature placeholder — Mr Dafoe brush path, stroke-draws on then inks solid (swap for her real signature SVG) */
#gateway .g-sign{width:min(74vw,720px);height:auto;overflow:visible;filter:drop-shadow(0 2px 26px rgba(0,0,0,.45));}
#gateway .g-sign path{
  fill:var(--paper);stroke:var(--paper);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;
  animation:tm-draw 2.9s cubic-bezier(.6,0,.25,1) .45s forwards, tm-ink 1.2s ease 3s forwards;}
#gateway .g-sub{margin-top:22px;font-weight:300;font-size:12px;letter-spacing:.46em;text-transform:uppercase;color:rgba(250,249,247,.82);
  opacity:0;animation:tm-fade 1.1s ease 2.7s forwards;}
#gateway .g-enter{position:absolute;bottom:46px;left:0;right:0;text-align:center;font-weight:300;font-size:11px;letter-spacing:.46em;text-transform:uppercase;color:rgba(250,249,247,.85);
  opacity:0;animation:tm-fade-cue 1s ease 3.1s forwards,tm-cue 2.6s ease-in-out 3.1s infinite;}
@keyframes tm-draw{to{stroke-dashoffset:0}}
@keyframes tm-ink{from{fill-opacity:0}to{fill-opacity:1}}
@keyframes tm-fade{from{opacity:0}to{opacity:.82}}
@keyframes tm-fade-cue{from{opacity:0}to{opacity:.85}}

/* ---------- HOME HERO ---------- */
.hero{position:relative;height:100vh;width:100%;overflow:hidden;}
.hero .h-scrim-top{position:absolute;top:0;left:0;right:0;height:42%;background:linear-gradient(to bottom,rgba(17,17,17,.5),transparent);pointer-events:none;}
.hero .h-scrim-bot{position:absolute;bottom:0;left:0;right:0;height:28%;background:linear-gradient(to top,rgba(17,17,17,.42),transparent);pointer-events:none;}
.hero .h-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:38px clamp(28px,5vw,64px);}
.hero .scroll-cue{position:absolute;bottom:42px;left:0;right:0;text-align:center;font-weight:300;font-size:10px;letter-spacing:.46em;text-transform:uppercase;color:rgba(250,249,247,.9);animation:tm-cue 2.6s ease-in-out infinite;}

/* wordmark + nav */
.wordmark{font-family:var(--sans);font-weight:300;font-size:14px;letter-spacing:.42em;text-transform:uppercase;background:none;border:none;padding:0;cursor:pointer;color:inherit;}
.nav{display:flex;gap:clamp(20px,2.4vw,40px);}
.nav button{font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.3em;text-transform:uppercase;background:none;border:none;padding:0;cursor:pointer;color:inherit;}
.nav button:hover{opacity:.6;}
.on-image,.on-image .nav button{color:var(--paper);}

/* ---------- INNER HEADER ---------- */
#inner-header{max-width:1240px;margin:0 auto;}
#inner-header .ih-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:38px clamp(28px,5vw,64px);}
#inner-header .ih-rule{height:1px;background:var(--hair);}

/* ---------- STATEMENT BAND ---------- */
.eyebrow{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--accent);}
.band{max-width:780px;margin:0 auto;padding:clamp(110px,15vh,170px) 32px 0;text-align:center;}
.band h2{margin:30px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,56px);line-height:1.12;letter-spacing:.004em;color:var(--ink);text-wrap:balance;}

/* ---------- PLATES ---------- */
.plate{width:100%;max-width:780px;margin:clamp(90px,14vh,150px) auto 0;padding:0 32px;}
.plate.wide{max-width:1040px;}
.plate .media{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#EDEAE5;}
.plate.wide .media{aspect-ratio:3/2;}
.plate figcaption{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--hair);margin-top:16px;padding-top:14px;font-weight:300;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);}
.film-mark{position:absolute;top:18px;left:18px;display:flex;align-items:center;gap:9px;font-weight:400;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(17,17,17,.62);z-index:2;}
.film-mark .dot{width:6px;height:6px;background:var(--accent);display:inline-block;}
.film-cta{position:absolute;bottom:18px;right:18px;font-weight:300;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(17,17,17,.42);z-index:2;cursor:pointer;}
.media.on-dark .film-mark{color:rgba(250,249,247,.82);}
.media.on-dark .film-cta{color:rgba(250,249,247,.6);}

.view-all{max-width:780px;margin:clamp(90px,12vh,140px) auto 0;padding:0 32px;text-align:center;}
.link-underline{font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);background:none;border:none;border-bottom:1px solid var(--accent);padding:0 0 6px;cursor:pointer;text-decoration:none;display:inline-block;}

/* ---------- PORTFOLIO ---------- */
.pf-head{max-width:1040px;margin:0 auto;padding:clamp(70px,9vh,110px) 32px 0;text-align:center;}
.pf-head h1{margin:26px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,52px);line-height:1.1;letter-spacing:.01em;color:var(--ink);}
.filters{max-width:1040px;margin:clamp(48px,7vh,72px) auto 0;padding:0 32px 22px;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,2vw,32px);border-bottom:1px solid var(--hair);}
.filters button{font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);background:none;border:none;border-bottom:1px solid transparent;padding:0 0 5px;cursor:pointer;transition:color .4s ease;}
.filters button.active{color:var(--ink);border-bottom-color:var(--accent);}
.pf-empty{max-width:780px;margin:clamp(80px,12vh,140px) auto 0;padding:0 32px;text-align:center;}
.pf-empty p{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.6vw,30px);color:var(--ink);}
.pf-empty span{display:block;margin-top:18px;font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);}

/* ---------- ABOUT ---------- */
.about{max-width:1040px;margin:0 auto;padding:clamp(70px,9vh,110px) 32px 0;display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,80px);align-items:flex-start;}
.about .a-img{flex:1 1 360px;min-width:300px;}
.about .a-img .frame{width:100%;aspect-ratio:4/5;overflow:hidden;}
.about .a-img img{object-position:center 22%;}
.about .a-copy{flex:1 1 380px;min-width:300px;}
.about .lead{margin:28px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.7vw,34px);line-height:1.28;letter-spacing:.004em;color:var(--ink);text-wrap:pretty;}
.about .body{margin:30px 0 0;font-weight:300;font-size:16px;line-height:1.9;color:rgba(17,17,17,.82);text-wrap:pretty;}
.about .credits{margin-top:42px;display:grid;gap:18px;border-top:1px solid var(--hair);padding-top:28px;}
.about .credits .k{font-weight:400;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);}
.about .credits .v{margin-top:9px;font-weight:300;font-size:14px;letter-spacing:.12em;color:var(--ink);}
.about .cv{margin-top:36px;}

/* ---------- CLIENTS ---------- */
.clients{max-width:900px;margin:0 auto;padding:clamp(80px,11vh,130px) 32px 0;text-align:center;}
.clients .roster{margin-top:38px;font-weight:300;font-size:clamp(18px,2.6vw,30px);line-height:1.85;letter-spacing:.12em;color:var(--ink);text-wrap:balance;}
.clients .k{margin-top:clamp(56px,7vh,90px);font-weight:400;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--faint);}
.clients .list{margin-top:22px;font-weight:300;font-size:clamp(16px,2.1vw,24px);line-height:1.85;letter-spacing:.1em;color:var(--ink);text-wrap:balance;}

/* ---------- CONTACT ---------- */
.contact{max-width:620px;margin:0 auto;padding:clamp(80px,11vh,130px) 32px 0;text-align:center;}
.contact h1{margin:28px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.6vw,44px);line-height:1.18;letter-spacing:.006em;color:var(--ink);text-wrap:balance;}
.contact form{margin:54px auto 0;display:grid;gap:34px;text-align:left;}
.contact label{display:grid;gap:12px;}
.contact label span{font-weight:400;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);}
.contact input,.contact textarea{font-weight:300;font-size:16px;color:var(--ink);background:none;border:none;border-bottom:1px solid rgba(17,17,17,.22);padding:0 0 10px;outline:none;width:100%;}
.contact textarea{resize:none;}
.contact .sent{margin:54px 0 0;font-weight:300;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);}
.contact .ig{margin-top:clamp(56px,7vh,84px);font-weight:300;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:rgba(17,17,17,.55);}

/* ---------- FOOTER ---------- */
#site-footer{margin-top:clamp(120px,16vh,170px);border-top:1px solid var(--hair);padding:clamp(60px,8vh,84px) 32px clamp(70px,9vh,96px);text-align:center;}
#site-footer .f-sign{width:min(360px,66vw);height:auto;display:block;margin:0 auto;overflow:visible;}
#site-footer .f-sign path{fill:var(--accent);}
#site-footer .f-meta{margin-top:22px;font-weight:300;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);}

/* ---------- ROUTING ---------- */
[data-page]{display:none;}
[data-page].active{display:block;}
#inner-header{display:none;}
#inner-header.show{display:block;}

/* ---------- IMAGE MOTION (wipe-in + reverse parallax) ---------- */
.plate .media{cursor:zoom-in;}
html.js .plate .media{clip-path:inset(100% 0 0 0);}      /* initial hidden state, scroll-driven reveal */
[data-page="home"] .plate .media{cursor:pointer;}
.plate figcaption{opacity:0;transition:opacity .6s ease .14s;}
.plate.in figcaption{opacity:1;}
.plate .media img,.plate .media video{transform:scale(1.2);will-change:transform;}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;z-index:2000;background:var(--paper);display:none;align-items:center;justify-content:center;padding:8vh 8vw;cursor:zoom-out;}
.lb.open{display:flex;}
.lb-stage{max-width:84vw;max-height:84vh;display:flex;align-items:center;justify-content:center;}
.lb-stage img,.lb-stage video{max-width:84vw;max-height:84vh;width:auto;height:auto;object-fit:contain;display:block;}
.lb-x{position:absolute;top:26px;right:30px;width:44px;height:44px;font-family:var(--sans);font-weight:300;font-size:24px;line-height:1;color:var(--ink);background:none;border:none;cursor:pointer;opacity:.75;}
.lb-x:hover{opacity:1;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:680px){
  .hero .h-bar{padding:24px 22px;flex-direction:column;align-items:flex-start;gap:14px;}
  .wordmark{font-size:12px;letter-spacing:.34em;}
  .nav{gap:18px;flex-wrap:wrap;}
  .nav button{font-size:11px;letter-spacing:.22em;}
  #inner-header .ih-bar{padding:24px 22px;flex-direction:column;align-items:flex-start;gap:14px;}
  .plate,.band,.view-all{padding-left:22px;padding-right:22px;}
  .about{padding-left:22px;padding-right:22px;}
}
@media (prefers-reduced-motion:reduce){
  [data-rise]{opacity:1!important;transform:none!important;transition:none!important;}
  #gateway,.scroll-cue,#gateway .g-enter{animation:none!important;}
  #gateway .g-sign path{animation:none!important;stroke-dashoffset:0!important;fill-opacity:1!important;}
  #gateway .g-sub{animation:none!important;opacity:.82!important;}
  #gateway .g-enter{opacity:.85!important;}
  .plate .media{clip-path:none!important;transition:none!important;}
  .plate figcaption{opacity:1!important;}
  .plate .media img,.plate .media video{transform:none!important;}
}