/*
Theme Name: Hashmi
Theme URI: https://hashmi.com
Author: Hashmi Studio
Description: Custom editorial theme for Hashmi — a creative agency site with a Projects showcase, Hashmi Lab, a Show Reel, and a conversational contact page. Built around a maroon-and-white brand system.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hashmi
*/

/* ---------------------------------------------------
   0. Fonts (self-hosted, no external requests)
--------------------------------------------------- */
@font-face{
  font-family:'Lora';
  src:url('assets/fonts/Lora-Variable.ttf') format('truetype-variations'),
      url('assets/fonts/Lora-Variable.ttf') format('truetype');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Lora';
  src:url('assets/fonts/Lora-Italic-Variable.ttf') format('truetype-variations'),
      url('assets/fonts/Lora-Italic-Variable.ttf') format('truetype');
  font-weight:400 700; font-style:italic; font-display:swap;
}
@font-face{ font-family:'Poppins'; src:url('assets/fonts/Poppins-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap;}
@font-face{ font-family:'Poppins'; src:url('assets/fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{ font-family:'Poppins'; src:url('assets/fonts/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap;}
@font-face{ font-family:'Poppins'; src:url('assets/fonts/Poppins-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap;}

/* ---------------------------------------------------
   1. Tokens
--------------------------------------------------- */
:root{
  --ink:#3B0A17;
  --ink-deep:#2A0710;
  --ink-bright:#6E1A30;
  --paper:#FAF6F1;
  --paper-alt:#F1E7DD;
  --paper-line:rgba(43,16,19,.14);
  --text-on-paper:#2B1013;
  --dim-on-paper:rgba(43,16,19,.62);
  --faint-on-paper:rgba(43,16,19,.30);
  --white:#FFFFFF;
  --dim-on-ink:rgba(255,255,255,.62);
  --faint-on-ink:rgba(255,255,255,.28);
  --line-on-ink:rgba(255,255,255,.14);
  --font-display:'Lora',Georgia,'Times New Roman',serif;
  --font-body:'Poppins',-apple-system,Arial,sans-serif;
  --max:1180px;
  --radius:2px;
}

/* ---------------------------------------------------
   2. Reset / base
--------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--text-on-paper);
  font-family:var(--font-body); font-weight:400; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em;}
p{margin:0 0 1.2em;}
.screen-reader-text{position:absolute!important; clip:rect(1px,1px,1px,1px); width:1px;height:1px; overflow:hidden;}
:focus-visible{outline:2px solid var(--ink-bright); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important;}
}

.container{max-width:var(--max); margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .container{padding:0 22px;} }

.label{font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:2px; text-transform:uppercase;}
.eyebrow{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.eyebrow .rule{width:28px; height:1px; background:currentColor; opacity:.4;}

.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:500;
  font-size:12px; letter-spacing:1.6px; text-transform:uppercase; padding:15px 26px;
  border:1px solid currentColor; border-radius:999px; transition:background .25s ease,color .25s ease;
}
.btn-dark{color:var(--white); border-color:var(--line-on-ink);}
.btn-dark:hover{background:var(--white); color:var(--ink);}
.btn-invert{background:var(--white); color:var(--ink); border-color:var(--white);}
.btn-invert:hover{background:transparent; color:var(--white); border-color:var(--line-on-ink);}
.btn-light{color:var(--ink); border-color:var(--paper-line);}
.btn-light:hover{background:var(--ink); color:var(--white); border-color:var(--ink);}
.btn-solid{background:var(--ink); color:var(--white); border-color:var(--ink);}
.btn-solid:hover{background:var(--ink-bright);}
.btn .arrow{transition:transform .25s ease;}
.btn:hover .arrow{transform:translateX(4px);}

.section{padding:110px 0;}
@media (max-width:780px){ .section{padding:72px 0;} }
.section-ink{background:var(--ink); color:var(--white);}
.section-paper{background:var(--paper); color:var(--text-on-paper);}
.section-alt{background:var(--paper-alt); color:var(--text-on-paper);}

.kicker{color:var(--dim-on-paper);}
.section-ink .kicker{color:var(--dim-on-ink);}

/* ---------------------------------------------------
   3. Header
--------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:26px 0; transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.site-header .container{display:flex; align-items:center; justify-content:space-between;}
.site-header.is-solid{background:var(--ink-deep); padding:16px 0; box-shadow:0 12px 30px rgba(0,0,0,.25);}
.site-header, .site-header a{color:var(--white);}
.brand{font-family:var(--font-body); font-weight:600; letter-spacing:3px; font-size:16px;}
.brand img{height:26px; width:auto; display:block;}

.primary-nav ul{display:flex; align-items:center; gap:34px;}
.primary-nav a{font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dim-on-ink); transition:color .2s ease;}
.primary-nav a:hover, .primary-nav .current-menu-item a{color:var(--white);}
.nav-toggle{display:none; background:none; border:0; color:var(--white); padding:6px;}
.nav-toggle svg{width:22px;height:22px;}

@media (max-width:900px){
  .primary-nav{position:fixed; inset:0; background:var(--ink); display:flex; align-items:center; justify-content:center;
    transform:translateY(-100%); transition:transform .35s ease; z-index:99;}
  .primary-nav ul{flex-direction:column; gap:28px;}
  .primary-nav a{font-size:15px;}
  .nav-open .primary-nav{transform:translateY(0);}
  .nav-toggle{display:inline-flex;}
}

/* ---------------------------------------------------
   4. Hero (home)
--------------------------------------------------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; background:var(--ink); color:var(--white); overflow:hidden; padding-top:120px;}
.hero-glow{position:absolute; inset:0; background:radial-gradient(ellipse 780px 640px at 68% 40%, var(--ink-bright) 0%, rgba(110,26,48,0) 62%); pointer-events:none;}
.hero-grain{position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
#hero-particles{position:absolute; inset:0; pointer-events:none;}
#hero-particles .hp-dot{position:absolute; border-radius:50%; background:var(--white); will-change:transform;}
#hero-particles .hp-word{white-space:nowrap; will-change:transform;}
.hero-inner{position:relative; z-index:3; width:100%;}
.hero-eyebrow{color:var(--dim-on-ink);}
.hero h1{font-size:clamp(44px,7vw,92px); margin:0; max-width:14ch;}
.hero h1 span{display:block;}
.hero-sub{margin-top:26px; max-width:46ch; color:var(--dim-on-ink); font-size:15px; letter-spacing:.3px;}
.hero-cta{margin-top:44px; display:flex; gap:16px; flex-wrap:wrap;}
.hero-scroll{position:absolute; bottom:38px; left:0; right:0; display:flex; justify-content:center; z-index:3;}
.hero-scroll .stem{width:1px; height:34px; background:linear-gradient(var(--dim-on-ink),transparent); margin-top:10px;}
.hero-scroll-inner{display:flex; flex-direction:column; align-items:center; color:var(--dim-on-ink); font-size:10px; letter-spacing:3px;}
.cursor-flag{position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%,-160%); font-family:var(--font-body); font-size:11px; letter-spacing:1.5px; font-weight:500;
  background:var(--white); color:var(--ink); padding:7px 13px; border-radius:999px; opacity:0; transition:opacity .15s ease;}
.cursor-flag.is-visible{opacity:1;}
@media (max-width:780px){ .cursor-flag{display:none;} }

/* ---------------------------------------------------
   5. Five doors
--------------------------------------------------- */
.doors-head{max-width:640px; margin-bottom:56px;}
.doors-head h2{font-size:clamp(30px,4vw,46px);}
.doors{border-top:1px solid var(--paper-line);}
.door{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 0; border-bottom:1px solid var(--paper-line); transition:padding-left .25s ease;}
.door:hover{padding-left:14px;}
.door-name{font-family:var(--font-display); font-size:clamp(24px,3vw,34px); font-weight:600;}
.door-desc{color:var(--dim-on-paper); font-size:14px; max-width:34ch; margin-top:6px;}
.door-arrow{font-size:22px; color:var(--faint-on-paper); flex:none; transition:transform .25s ease, color .25s ease;}
.door:hover .door-arrow{transform:translateX(6px); color:var(--ink);}

/* ---------------------------------------------------
   6. Stats
--------------------------------------------------- */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:40px; border-top:1px solid var(--line-on-ink); padding-top:52px;}
.stat-num{font-family:var(--font-display); font-size:clamp(34px,4vw,54px); font-weight:600;}
.stat-label{margin-top:8px; color:var(--dim-on-ink);}
@media (max-width:780px){ .stats-grid{grid-template-columns:repeat(2,1fr); gap:36px 24px;} }

/* ---------------------------------------------------
   7. Project grid ("Universe")
--------------------------------------------------- */
.grid-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:48px; flex-wrap:wrap;}
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px;}
@media (max-width:980px){ .project-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .project-grid{grid-template-columns:1fr;} }
.project-card{position:relative; background:var(--ink); border:1px solid var(--paper-line); aspect-ratio:4/5; overflow:hidden; display:block;}
.project-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .4s ease, transform .6s ease;}
.project-card:hover img{opacity:.85; transform:scale(1.04);}
.project-card::after{content:"";position:absolute; inset:0; background:linear-gradient(180deg,rgba(59,10,23,0) 40%,rgba(30,5,11,.92) 100%);}
.project-card-body{position:absolute; left:0; right:0; bottom:0; padding:26px; z-index:2; color:var(--white);}
.project-tag{display:inline-block; font-size:10px; letter-spacing:2px; font-weight:500; text-transform:uppercase; color:var(--dim-on-ink); border:1px solid var(--line-on-ink); border-radius:999px; padding:5px 12px; margin-bottom:12px;}
.project-card h3{font-size:22px; margin:0;}
.project-card .client{color:var(--dim-on-ink); font-size:13px; margin-top:4px;}

/* ---------------------------------------------------
   8. Single project (case study)
--------------------------------------------------- */
.case-hero{position:relative; background:var(--ink); color:var(--white); padding:190px 0 90px; overflow:hidden;}
.case-hero img.cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.32;}
.case-hero::before{content:"";position:absolute; inset:0; background:linear-gradient(180deg, rgba(59,10,23,.35), var(--ink) 92%);}
.case-hero-inner{position:relative; z-index:2;}
.case-meta{display:flex; gap:28px; margin-top:26px; flex-wrap:wrap;}
.case-meta div{}
.case-meta .label{color:var(--faint-on-ink); display:block; margin-bottom:6px;}
.case-hero h1{font-size:clamp(34px,5vw,64px); max-width:18ch;}

.case-act{padding:88px 0; border-bottom:1px solid var(--paper-line);}
.case-act:last-of-type{border-bottom:0;}
.case-act-label{color:var(--dim-on-paper); margin-bottom:22px;}
.case-act-body{max-width:680px; font-size:19px; line-height:1.75;}
.case-act-body p{margin:0 0 1.3em;}
.case-experiment .container{max-width:var(--max);}
.case-experiment .case-act-body{max-width:none; font-size:17px;}
.case-experiment img{border-radius:2px; margin:28px 0;}
.case-nav{display:flex; justify-content:space-between; padding:56px 0; background:var(--ink); color:var(--white);}
.case-nav a{font-family:var(--font-display); font-size:20px;}
.case-nav .label{display:block; color:var(--dim-on-ink); margin-bottom:8px; font-family:var(--font-body);}

/* ---------------------------------------------------
   9. Lab
--------------------------------------------------- */
.lab-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:44px;}
@media (max-width:980px){ .lab-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .lab-grid{grid-template-columns:1fr;} }
.lab-card figure{aspect-ratio:4/3; overflow:hidden; margin:0 0 20px; background:var(--paper-alt);}
.lab-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.lab-card:hover img{transform:scale(1.045);}
.lab-card .label{color:var(--dim-on-paper); margin-bottom:10px; display:block;}
.lab-card h3{font-size:22px;}
.lab-single-hero{padding:190px 0 60px; background:var(--paper-alt);}
.lab-single-hero h1{font-size:clamp(30px,4.5vw,50px); max-width:20ch;}
.lab-body{max-width:700px; font-size:18px; line-height:1.8; padding:60px 0 100px;}
.lab-body p{margin:0 0 1.3em;}
.lab-body img{margin:8px 0 28px;}

/* ---------------------------------------------------
   9b. Services
--------------------------------------------------- */
.service-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--paper-line);}
@media (max-width:780px){ .service-grid{grid-template-columns:1fr;} }
.service-card{background:var(--paper); border:1px solid var(--paper-line); padding:44px; display:block;}
.service-card figure{width:100%; aspect-ratio:4/3; margin:0 0 24px; background:var(--paper-alt); overflow:hidden;}
.service-card figure img{width:100%; height:100%; object-fit:cover;}
.service-card h3{font-size:26px; margin-bottom:10px;}
.service-card p{color:var(--dim-on-paper); font-size:15px; max-width:38ch;}
.service-card-link{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--font-body); font-weight:500; font-size:12px; letter-spacing:1.6px; text-transform:uppercase;}
.service-card-link .arrow{transition:transform .25s ease;}
.service-card:hover .service-card-link .arrow{transform:translateX(4px);}

.service-hero{background:var(--ink); color:var(--white); padding:190px 0 90px;}
.service-hero-inner{display:flex; align-items:center; justify-content:space-between; gap:60px;}
.service-hero-text h1{font-size:clamp(32px,4.5vw,54px); max-width:14ch;}
.service-hero-text p{color:var(--dim-on-ink); max-width:40ch; margin-top:18px; font-size:16px;}
.service-hero-figure{flex:none; width:320px; aspect-ratio:4/3; background:var(--paper); border-radius:2px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.35);}
.service-hero-figure img{width:100%; height:100%; object-fit:cover;}
@media (max-width:900px){ .service-hero-inner{flex-direction:column; align-items:flex-start;} .service-hero-figure{width:100%;} }

/* ---------------------------------------------------
   10. Show Reel
--------------------------------------------------- */
.reel-hero{background:var(--ink); color:var(--white); padding:190px 0 90px;}
.reel-player{position:relative; width:100%; aspect-ratio:16/9; background:#000; margin-top:44px; border:1px solid var(--line-on-ink);}
.reel-player iframe, .reel-player video{position:absolute; inset:0; width:100%; height:100%;}
.reel-player .placeholder{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--dim-on-ink); font-size:13px; letter-spacing:1.5px; text-transform:uppercase;}
.reel-clips{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:2px;}
@media (max-width:780px){ .reel-clips{grid-template-columns:repeat(2,1fr);} }
.reel-clip{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--ink-deep); display:block;}
.reel-clip img{width:100%; height:100%; object-fit:cover; opacity:.6; transition:opacity .3s ease;}
.reel-clip:hover img{opacity:.9;}
.reel-clip .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:22px;}
.reel-clip .name{position:absolute; left:0; right:0; bottom:0; padding:14px; font-size:11px; letter-spacing:1.5px; color:var(--white); background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7));}

/* ---------------------------------------------------
   11. Talk / contact
--------------------------------------------------- */
.talk-hero{background:var(--ink); color:var(--white); padding:190px 0 70px;}
.talk-hero h1{font-size:clamp(34px,5vw,58px); max-width:16ch;}
.talk-hero p{color:var(--dim-on-ink); max-width:52ch; font-size:16px; margin-top:20px;}
.talk-form-wrap{padding:80px 0 120px;}
.talk-form{max-width:760px;}
.form-row{margin-bottom:30px;}
.form-row label{display:block; margin-bottom:10px;}
.form-row label .req{color:var(--ink-bright);}
.form-row input[type=text], .form-row input[type=email], .form-row select, .form-row textarea{
  width:100%; border:0; border-bottom:1px solid var(--paper-line); background:transparent; padding:12px 2px;
  font-family:var(--font-body); font-size:16px; color:var(--text-on-paper); resize:vertical; transition:border-color .2s ease;
}
.form-row textarea{min-height:110px;}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{border-color:var(--ink); outline:0;}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
@media (max-width:640px){ .form-grid-2{grid-template-columns:1fr;} }
.form-note{color:var(--dim-on-paper); font-size:13px; margin-top:14px;}
.form-success{border:1px solid var(--paper-line); padding:26px 28px; margin-bottom:40px; background:var(--paper-alt);}
.form-error{color:#8a2f22; font-size:13px; margin-top:10px;}

/* ---------------------------------------------------
   12. About
--------------------------------------------------- */
.about-hero{background:var(--ink); color:var(--white); padding:190px 0 90px;}
.about-hero h1{font-size:clamp(34px,5vw,60px); max-width:16ch;}
.about-body{max-width:720px; font-size:19px; line-height:1.85; padding:80px 0;}
.about-body p{margin:0 0 1.3em;}
.page-body{max-width:720px; font-size:18px; line-height:1.8; padding:190px 0 100px;}

/* ---------------------------------------------------
   13. Footer
--------------------------------------------------- */
.site-footer{background:var(--ink-deep); color:var(--white); padding:90px 0 34px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; padding-bottom:70px;}
.footer-top h2{font-size:clamp(30px,5vw,58px); max-width:12ch;}
.footer-cols{display:flex; gap:70px; flex-wrap:wrap; border-top:1px solid var(--line-on-ink); padding-top:44px;}
.footer-col .label{color:var(--faint-on-ink); margin-bottom:16px; display:block;}
.footer-col ul{display:flex; flex-direction:column; gap:11px;}
.footer-col a{color:var(--dim-on-ink); font-size:14px; transition:color .2s ease;}
.footer-col a:hover{color:var(--white);}
.footer-bottom{display:flex; justify-content:space-between; margin-top:70px; color:var(--faint-on-ink); font-size:12px; flex-wrap:wrap; gap:10px;}

/* ---------------------------------------------------
   14. 404
--------------------------------------------------- */
.error-404{min-height:80vh; display:flex; align-items:center; background:var(--ink); color:var(--white); padding:150px 0 90px;}
.error-404 h1{font-size:clamp(60px,10vw,140px);}

/* ---------------------------------------------------
   15. Misc
--------------------------------------------------- */
.empty-note{color:var(--dim-on-paper); font-style:italic;}