/* =========================================================
  Collins Kemevor — Portfolio
  Tokens
  ========================================================= */
:root{
 --ink:        #000000;
 --panel:      #0C0B09;
 --panel-edge: #1C1912;
 --warm:       #211B0F;
 --gold:       #DAA231;
 --gold-dim:   #8C6A24;
 --gold-soft:  rgba(218,162,49,0.14);
 --cream:      #F7F3EA;
 --cream-dim:  #A79F8E;
 --border:     rgba(247,243,234,0.12);
 --border-strong: rgba(218,162,49,0.35);

 --font-display: 'Archivo', 'Segoe UI', sans-serif;
 --font-serif:   'Playfair Display', 'Georgia', serif;
 --font-body:    'Inter', 'Segoe UI', sans-serif;

 --max: 1160px;
 --radius-sm: 6px;
 --radius: 14px;
 --radius-lg: 26px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
 html{ scroll-behavior:auto; }
 *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
 margin:0;
 background:var(--ink);
 color:var(--cream);
 font-family:var(--font-body);
 line-height:1.6;
 -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }

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

:focus-visible{
 outline: 2px solid var(--gold);
 outline-offset: 3px;
 border-radius: 2px;
}

.wrap{
 max-width:var(--max);
 margin:0 auto;
 padding:0 32px;
}

.eyebrow{
 font-family:var(--font-body);
 font-weight:600;
 font-size:0.8rem;
 letter-spacing:0.16em;
 text-transform:uppercase;
 color:var(--gold);
 margin:0 0 14px;
}

h1,h2,h3{
 font-family:var(--font-display);
 font-weight:800;
 line-height:1.06;
 letter-spacing:-0.01em;
 margin:0;
 color:var(--cream);
}

.accent{ color:var(--gold); }

p{ margin:0 0 16px; color:var(--cream-dim); }
p:last-child{ margin-bottom:0; }

/* =========================================================
  Buttons
  ========================================================= */
.btn{
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:15px 30px;
 font-family:var(--font-body);
 font-weight:600;
 font-size:0.82rem;
 letter-spacing:0.1em;
 text-transform:uppercase;
 border-radius:2px;
 border:1px solid var(--gold);
 transition:background 0.2s ease, color 0.2s ease, transform 0.2s ease;
 cursor:pointer;
 background:transparent;
}
.btn-primary{ color:var(--gold); }
.btn-primary:hover{ background:var(--gold); color:var(--ink); transform:translateY(-2px); }
.btn-ghost{ color:var(--cream); border-color:var(--border-strong); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

/* =========================================================
  Nav
  ========================================================= */
.site-nav{
 position:sticky;
 top:0;
 z-index:100;
 background:rgba(0,0,0,0.92);
 backdrop-filter:blur(8px);
 border-bottom:1px solid var(--border);
}
.nav-inner{
 display:flex;
 align-items:center;
 justify-content:space-between;
 height:76px;
}
.nav-logo{
 display:flex;
 align-items:center;
 gap:10px;
 font-family:var(--font-display);
 font-weight:800;
 font-size:1.15rem;
 color:var(--cream);
}
.nav-logo .mark{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:34px;
 height:34px;
 border:1.5px solid var(--gold);
 border-radius:50%;
 color:var(--gold);
 font-size:0.85rem;
}
.nav-logo .full-name{
 display:block;
 font-family:var(--font-body);
 font-weight:500;
 font-size:0.6rem;
 letter-spacing:0.14em;
 text-transform:uppercase;
 color:var(--cream-dim);
 margin-top:2px;
}
.nav-links{
 display:flex;
 align-items:center;
 gap:40px;
}
.nav-links a{
 font-size:0.8rem;
 font-weight:600;
 letter-spacing:0.1em;
 text-transform:uppercase;
 color:var(--cream-dim);
 padding:8px 2px;
 border-bottom:1px solid transparent;
 transition:color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover{ color:var(--cream); }
.nav-links a.active{ color:var(--gold); border-color:var(--gold); }

.nav-toggle{
 display:none;
 flex-direction:column;
 justify-content:center;
 gap:5px;
 width:40px;
 height:40px;
 background:none;
 border:1px solid var(--border-strong);
 border-radius:4px;
 cursor:pointer;
}
.nav-toggle span{
 display:block;
 width:18px;
 height:2px;
 margin:0 auto;
 background:var(--cream);
 transition:transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
 display:none;
 flex-direction:column;
 gap:10px;
 position:absolute;
 top:calc(100% + 12px);
 left:16px;
 right:16px;
 padding:16px;
 border-radius:28px;
 background:rgba(12,11,9,0.6);
 backdrop-filter:blur(20px) saturate(140%);
 -webkit-backdrop-filter:blur(20px) saturate(140%);
 border:1px solid rgba(247,243,234,0.14);
 box-shadow:0 24px 60px rgba(0,0,0,0.5);
 z-index:99;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
 padding:16px 20px;
 font-size:0.92rem;
 font-weight:600;
 letter-spacing:0.06em;
 text-transform:uppercase;
 color:var(--cream);
 background:rgba(247,243,234,0.07);
 border-radius:14px;
 border-bottom:none;
 transition:background 0.2s ease, color 0.2s ease;
}
.mobile-menu a:hover{ background:rgba(247,243,234,0.13); }
.mobile-menu a.active{ color:var(--gold); background:var(--gold-soft); }

@media (max-width: 860px){
 .nav-links, .nav-cta{ display:none; }
 .nav-toggle{ display:flex; }
}

/* =========================================================
  Hero (Home / About share this 2-col shape)
  ========================================================= */
.hero{
 padding:72px 0 96px;
 border-bottom:1px solid var(--border);
}
.hero-grid{
 display:grid;
 grid-template-columns:1.05fr 0.95fr;
 gap:56px;
 align-items:center;
}
.hero h1{
 font-size:clamp(2.4rem, 5vw, 3.6rem);
 margin-bottom:22px;
}
.hero-text p{
 font-size:1.05rem;
 max-width:46ch;
 margin-bottom:34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-photo{
 border-radius:var(--radius);
 overflow:hidden;
 border:1px solid var(--border);
 background:var(--panel);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-photo.on-light{ background:#EDE7D8; padding:0; }
.hero-photo.full-figure{ background:var(--panel); }
.hero-photo.full-figure img{ object-fit:contain; }

@media (max-width: 860px){
 .hero{ padding:48px 0 64px; }
 .hero-grid{ grid-template-columns:1fr; gap:36px; }
 .hero-photo{ max-height:420px; }
 .hero-photo img{ max-height:420px; }
}

/* =========================================================
  Reveal-on-scroll
  ========================================================= */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* =========================================================
  Section shell
  ========================================================= */
.section{ padding:88px 0; border-bottom:1px solid var(--border); }
.section-head{ margin-bottom:48px; max-width:60ch; }
.section-head h2{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:14px; }
.section-head p{ font-size:1.02rem; }

/* =========================================================
  Home — Selected work strip
  ========================================================= */
.work-strip{
 display:grid;
 grid-template-columns:repeat(4, 1fr);
 gap:20px;
}
.work-strip .work-card{ aspect-ratio: 3/4; }

/* =========================================================
  Work cards (shared by strip + full grid)
  ========================================================= */
.work-card{
 position:relative;
 display:block;
 border-radius:var(--radius);
 overflow:hidden;
 border:1px solid var(--border-strong);
 background:var(--panel);
}
.work-card img{
 width:100%; height:100%;
 object-fit:cover;
 transition:transform 0.5s ease;
}
.work-card:hover img{ transform:scale(1.06); }
.work-card .card-tag{
 position:absolute;
 top:12px; left:12px;
 font-size:0.65rem;
 font-weight:700;
 letter-spacing:0.08em;
 text-transform:uppercase;
 color:var(--ink);
 background:var(--gold);
 padding:5px 10px;
 border-radius:100px;
}
.work-card .card-caption{
 position:absolute;
 left:0; right:0; bottom:0;
 padding:18px 16px 14px;
 background:linear-gradient(to top, rgba(0,0,0,0.92) 10%, rgba(0,0,0,0));
 opacity:0;
 transform:translateY(6px);
 transition:opacity 0.25s ease, transform 0.25s ease;
}
.work-card:hover .card-caption,
.work-card:focus-visible .card-caption{ opacity:1; transform:none; }
.card-caption .title{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--cream); }
.card-caption .kind{ font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); }

/* =========================================================
  Home — About preview
  ========================================================= */
.about-preview{
 display:grid;
 grid-template-columns:0.85fr 1.15fr;
 gap:48px;
 align-items:center;
}
.about-preview .preview-photo{
 border-radius:var(--radius);
 overflow:hidden;
 border:1px solid var(--border);
 aspect-ratio: 4/3;
}
.about-preview .preview-photo img{ width:100%; height:100%; object-fit:cover; object-position: center 20%; }
.about-preview .preview-copy{
 border:1px solid var(--border);
 border-radius:var(--radius);
 padding:44px;
}

@media (max-width: 860px){
 .about-preview{ grid-template-columns:1fr; }
 .about-preview .preview-copy{ padding:30px; }
}

/* =========================================================
  About page — journey + tools
  ========================================================= */
.journey p{ font-size:1.05rem; max-width:68ch; }
.stat-row{ display:flex; gap:48px; margin-top:36px; flex-wrap:wrap; }
.stat b{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--gold); }
.stat span{ font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--cream-dim); }

.tools-row{
 display:flex;
 gap:22px;
 flex-wrap:wrap;
 margin-top:8px;
}
.tool-badge{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:10px;
}
.tool-badge .tile{
 width:64px; height:64px;
 border-radius:14px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-family:var(--font-display);
 font-weight:800;
 font-size:1.3rem;
}
.tool-badge span{ font-size:0.72rem; letter-spacing:0.04em; color:var(--cream-dim); }
.tile.lr{ background:#31A8FF; color:#001B33; }
.tile.ai{ background:#FF9A00; color:#1A0E00; }
.tile.id{ background:#FF3366; color:#2B0010; }
.tile.ae{ background:#00005B; color:#B39DDB; }
.tile.ps{ background:#001E36; color:#31A8FF; }

/* =========================================================
  About page — video
  ========================================================= */
.video-frame{
 position:relative;
 width:100%;
 aspect-ratio:16/9;
 border-radius:var(--radius);
 overflow:hidden;
 border:1px solid var(--border-strong);
 background:var(--panel);
}
.video-frame iframe{
 position:absolute; inset:0;
 width:100%; height:100%;
 border:0;
}

/* =========================================================
  Work page hero (signature moment)
  ========================================================= */
.work-hero{
 position:relative;
 background:var(--warm);
 padding:100px 0 64px;
 overflow:hidden;
 border-bottom:1px solid var(--border);
}
.work-hero::before{
 content:"";
 position:absolute;
 inset:0;
 background-image:url('../images/work-portfolio-bg.jpg');
 background-repeat:no-repeat;
 background-position:right center;
 background-size:cover;
 transition:transform 0.6s ease;
 z-index:0;
}
.work-hero:hover::before{
 transform:scale(1.045);
}
.work-hero::after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(90deg, var(--warm) 0%, var(--warm) 20%, rgba(33,27,15,0.82) 42%, rgba(33,27,15,0.15) 62%, transparent 78%);
 z-index:1;
}
.work-hero .wrap{
 position:relative;
 z-index:2;
}

@media (max-width: 860px){
 .work-hero::before{ display:none; }
 .work-hero::after{ background:var(--warm); }
}
.work-hero-title{
 font-family:var(--font-serif);
 font-weight:700;
 font-style:italic;
 font-size:clamp(3.2rem, 11vw, 8rem);
 line-height:0.92;
 color:transparent;
 -webkit-text-stroke:1.5px var(--gold);
 letter-spacing:0.01em;
}
.work-hero-sub{
 margin-top:22px;
 max-width:44ch;
 font-size:1.05rem;
 color:var(--cream);
}

.work-grid{
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:26px;
}
.work-grid .work-card{ aspect-ratio: 4/5; }

@media (max-width: 860px){
 .work-strip{ grid-template-columns:repeat(2,1fr); }
 .work-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
 .work-strip{ grid-template-columns:repeat(2,1fr); gap:12px; }
 .work-grid{ grid-template-columns:1fr; }
}

/* =========================================================
  Contact page
  ========================================================= */
.contact-hero{
 position:relative;
 padding:96px 0;
 text-align:center;
 overflow:hidden;
}
.contact-hero::before{
 content:"";
 position:absolute;
 inset:-40px;
 z-index:0;
 /* Swap in a real photo by uncommenting the line below and adding the file
   at images/contact-bg.jpg — the blur + overlay will handle the rest. */
 background-image:url('../images/contact-bg.jpg');
 background:
  radial-gradient(circle at 20% 20%, rgba(218,162,49,0.22), transparent 55%),
  radial-gradient(circle at 80% 30%, rgba(140,106,36,0.18), transparent 50%),
  linear-gradient(160deg, var(--warm), var(--ink) 70%);
 background-size:cover;
 background-position:center;
 filter:blur(22px);
 transform:scale(1.1);
}
.contact-hero::after{
 content:"";
 position:absolute;
 inset:0;
 z-index:0;
 background:
  linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.78)),
  linear-gradient(150deg, rgba(33,27,15,0.75), rgba(12,11,9,0.6));
 mix-blend-mode:multiply;
}
.contact-hero > .wrap{
 position:relative;
 z-index:1;
}
.contact-hero .eyebrow{ display:block; }
.contact-hero h1{
 font-size:clamp(2.3rem, 5.4vw, 4rem);
 max-width:16ch;
 margin:0 auto 20px;
}
.contact-hero > .wrap > p{
 max-width:50ch;
 margin:0 auto 40px;
 font-size:1.05rem;
}
.contact-email{
 display:inline-block;
 font-family:var(--font-display);
 font-weight:800;
 font-size:clamp(1.4rem, 4vw, 2.1rem);
 color:var(--gold);
 border-bottom:2px solid var(--gold-soft);
 padding-bottom:6px;
 transition:border-color 0.2s ease;
}
.contact-email:hover{ border-color:var(--gold); }

.social-row{
 display:flex;
 justify-content:center;
 gap:28px;
 margin-top:48px;
 flex-wrap:wrap;
}
.social-row a{
 display:flex;
 align-items:center;
 gap:8px;
 font-size:0.82rem;
 font-weight:600;
 letter-spacing:0.06em;
 text-transform:uppercase;
 color:var(--cream-dim);
 transition:color 0.2s ease;
}
.social-row a:hover{ color:var(--gold); }
.social-row svg{ width:18px; height:18px; fill:currentColor; }

.contact-note{
 margin-top:56px;
 padding-top:32px;
 border-top:1px solid var(--border);
 font-size:0.85rem;
 color:var(--cream-dim);
}

/* =========================================================
  Footer
  ========================================================= */
footer{ padding:36px 0; }
.footer-inner{
 display:flex;
 justify-content:space-between;
 align-items:center;
 font-size:0.8rem;
 color:var(--cream-dim);
 flex-wrap:wrap;
 gap:12px;
}
.footer-inner a{ color:var(--cream-dim); border-bottom:1px solid var(--border-strong); }
.footer-inner a:hover{ color:var(--gold); }