/*
Theme Name: Amjadfilms
Theme URI: https://amjadfilms.com
Author: Amjadfilms
Description: A cinematic portfolio theme for filmmaker and photographer Amjad.
Version: 1.0.0
Text Domain: amjadfilms
*/

:root { --ink:#0a0b0d; --paper:#e9e6df; --line:rgba(233,230,223,.18); --amber:#e89b43; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }

.site-header { position:absolute; z-index:10; inset:0 0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:1.55rem clamp(1.25rem,4vw,4.5rem); border-bottom:1px solid var(--line); }
.brand { font-size:1rem; font-weight:800; letter-spacing:-.04em; }
.brand span { color:var(--amber); }
nav { display:flex; gap:2rem; color:#d8d5ce; font-size:.77rem; letter-spacing:.08em; text-transform:uppercase; }
nav a,.header-cta,.text-link,.footer-bottom a { transition:color .25s ease; }
nav a:hover,.header-cta:hover,.text-link:hover,.footer-bottom a:hover { color:var(--amber); }
.header-cta { justify-self:end; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }

.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding:8rem clamp(1.25rem,4vw,4.5rem) clamp(3rem,6vw,5.5rem); }
.hero-media { position:absolute; inset:0; background-image:linear-gradient(90deg,rgba(6,7,8,.94) 0%,rgba(6,7,8,.58) 50%,rgba(6,7,8,.08) 100%),url('assets/hero-cinematic.png'); background-size:cover; background-position:center; transform:scale(1.01); }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,6,7,.18),rgba(5,6,7,.22) 55%,#090a0c 100%); }
.hero-overlay { position:absolute; inset:0; opacity:.17; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:100% 5px; }
.hero-copy { position:relative; z-index:1; max-width:850px; }
.eyebrow,.kicker { text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; font-weight:700; }
.eyebrow { display:flex; align-items:center; gap:.75rem; color:#d0cdc6; margin-bottom:1.5rem; }
.eyebrow span { display:inline-block; width:2.6rem; height:1px; background:var(--amber); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:1.35rem; font-size:clamp(4rem,10vw,9rem); line-height:.82; letter-spacing:-.075em; font-weight:700; }
h1 em,footer h2 em { color:var(--amber); font-family:Georgia,'Times New Roman',serif; font-weight:400; }
.hero-intro { max-width:530px; color:#cbc8c0; font-size:clamp(1rem,1.7vw,1.25rem); line-height:1.6; }
.hero-actions { display:flex; align-items:center; gap:2rem; margin-top:2.25rem; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:3rem; padding:1rem 1.2rem; min-width:230px; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; font-weight:700; }
.button-light { color:#111; background:var(--paper); transition:background .25s ease,transform .25s ease; }
.button-light:hover { background:var(--amber); transform:translateY(-2px); }
.text-link { border-bottom:1px solid #8c8a84; padding-bottom:.4rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.hero-index { position:absolute; z-index:2; right:clamp(1.25rem,4vw,4.5rem); bottom:clamp(3rem,6vw,5.5rem); margin:0; color:#8d8b85; font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; writing-mode:vertical-rl; }

.work-section,.services-section { padding:clamp(5.5rem,10vw,10rem) clamp(1.25rem,4vw,4.5rem); }
.work-section { background:var(--paper); color:var(--ink); }
.section-heading { display:grid; grid-template-columns:1.3fr 1fr; align-items:end; gap:3rem; margin-bottom:4rem; }
.kicker { color:#8b8378; margin-bottom:1.2rem; }
.section-heading h2,.services-grid>h2,.about-copy h2 { margin-bottom:0; font-size:clamp(2.8rem,6vw,6rem); line-height:.95; letter-spacing:-.06em; }
.section-heading>p { margin:0; max-width:530px; color:#5b5751; font-size:1rem; line-height:1.8; }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.project-card { position:relative; isolation:isolate; aspect-ratio:16/10; overflow:hidden; padding:1.3rem; color:#f5f2ea; }
.project-card::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.2),transparent 35%),linear-gradient(145deg,transparent 42%,rgba(0,0,0,.35)); }
.project-card::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.22; background-image:linear-gradient(135deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:28px 28px; }
.project-amber { background:#8a5834; } .project-blue { background:#254154; } .project-red { background:#6d2b24; } .project-slate { background:#31363a; }
.project-topline { display:flex; justify-content:space-between; font-size:.62rem; letter-spacing:.15em; }
.project-mark { position:absolute; right:-1.5rem; top:46%; transform:translateY(-50%); font-size:clamp(7rem,18vw,15rem); line-height:.8; font-weight:900; letter-spacing:-.12em; color:rgba(255,255,255,.10); }
.project-copy { position:absolute; left:1.3rem; bottom:1.5rem; }
.project-copy p { margin-bottom:.55rem; color:rgba(255,255,255,.7); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.project-copy h3 { margin:0; font-size:clamp(1.6rem,3vw,3rem); letter-spacing:-.045em; }

.services-section { background:#101214; }
.services-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(4rem,10vw,10rem); }
.services-grid>h2 { color:#e5e2dc; }
.service-list article { display:grid; grid-template-columns:3rem 1fr; gap:1.25rem; padding:1.75rem 0; border-top:1px solid var(--line); }
.service-list article:last-child { border-bottom:1px solid var(--line); }
.service-list span { color:var(--amber); font-size:.67rem; letter-spacing:.1em; }
.service-list h3 { margin-bottom:.6rem; font-size:1.35rem; }
.service-list p { margin:0; max-width:460px; color:#92918c; line-height:1.6; }

.about-section { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; background:#d7d2c8; color:#111214; }
.about-monogram { display:flex; align-items:center; justify-content:center; min-height:660px; background:#c6beb0; font-family:Georgia,serif; font-size:clamp(18rem,38vw,35rem); line-height:.7; color:#181a1c; text-shadow:20px 20px 0 rgba(255,255,255,.22); }
.about-copy { padding:clamp(5rem,10vw,9rem) clamp(1.5rem,7vw,7rem); align-self:center; }
.about-copy>p:not(.kicker):not(.location) { margin-top:2rem; color:#504d48; font-size:1.1rem; line-height:1.9; }
.location { margin-top:3rem; padding-top:1.2rem; border-top:1px solid rgba(0,0,0,.18); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }

footer { padding:clamp(6rem,11vw,11rem) clamp(1.25rem,4vw,4.5rem) 2rem; background:#08090a; }
.footer-line { display:flex; justify-content:space-between; align-items:flex-end; gap:3rem; }
footer h2 { margin-bottom:0; font-size:clamp(3.8rem,10vw,9rem); line-height:.85; letter-spacing:-.07em; }
.round-link { flex:0 0 auto; width:150px; height:150px; display:flex; align-items:center; justify-content:center; border:1px solid #605f5c; border-radius:50%; text-transform:uppercase; letter-spacing:.09em; font-size:.7rem; line-height:1.5; transition:color .25s,background .25s,border-color .25s; }
.round-link:hover { background:var(--amber); border-color:var(--amber); color:#121212; }
.footer-bottom { display:flex; justify-content:space-between; margin-top:7rem; padding-top:1.5rem; border-top:1px solid var(--line); color:#777772; font-size:.65rem; letter-spacing:.12em; }

@media (max-width:760px) {
  .site-header { grid-template-columns:1fr auto; } nav { display:none; }
  .hero { min-height:760px; } .hero-media { background-position:58% center; } .hero-index { display:none; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .section-heading,.services-grid,.about-section { grid-template-columns:1fr; }
  .section-heading { gap:1.5rem; } .project-grid { grid-template-columns:1fr; } .project-card { aspect-ratio:4/3; }
  .about-monogram { min-height:420px; }
  .footer-line { align-items:flex-start; flex-direction:column; } .round-link { width:125px; height:125px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; } }