/* AJAwad.net light and dark photography portfolio */
@font-face{font-family:"DM Sans";src:url("/fonts/dm-sans-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/fonts/dm-sans-500.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/fonts/dm-sans-600.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-500.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Coolvetica";src:url("/fonts/coolvetica-regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/fonts/playfair-display-variable.ttf") format("truetype");font-weight:400 900;font-display:swap}
@font-face{font-family:"Merriweather";src:url("/fonts/merriweather-variable.ttf") format("truetype");font-weight:300 900;font-display:swap}
@font-face{font-family:"Poppins";src:url("/fonts/poppins-regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/fonts/source-sans-3-variable.ttf") format("truetype");font-weight:200 900;font-display:swap}
:root{
  --bg:#f7fbff; --bg2:#eaf6ff; --panel:#ffffff; --ink:#211d3a; --muted:#6c6a86;
  --blue:#89d7ff; --blue-deep:#3a94cf; --purple:#7651c9; --purple-deep:#49318c;
  --wash:#eee8ff; --line:#d8d9ee; --radius:14px;
  --sans:"DM Sans","Segoe UI",sans-serif; --serif:"Newsreader",Georgia,serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d1020; --bg2:#151a31; --panel:#171b32; --ink:#f0efff; --muted:#aaa7c5;
  --blue:#6dc8f7; --blue-deep:#8bdcff; --purple:#a985ff; --purple-deep:#d5c4ff;
  --wash:#272044; --line:#343858;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(900px 440px at 8% 0%,rgba(137,215,255,.28),transparent 68%),
  radial-gradient(760px 440px at 95% 24%,rgba(118,81,201,.16),transparent 72%),var(--bg);
  color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
:root[data-theme="dark"] body{background:radial-gradient(900px 440px at 8% 0%,rgba(65,153,209,.18),transparent 68%),radial-gradient(760px 440px at 95% 24%,rgba(126,85,217,.18),transparent 72%),var(--bg)}
img{max-width:100%;display:block} a{color:inherit;text-decoration:none}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.025em;margin:0;line-height:1.04}
.muted{color:var(--muted)}
.eyebrow{margin:0 0 8px;color:var(--purple);font-size:.72rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase}

.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:12px clamp(16px,4vw,52px);background:rgba(247,251,255,.82);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid rgba(118,81,201,.13)}
:root[data-theme="dark"] .site-header{background:rgba(13,16,32,.84);border-color:rgba(169,133,255,.2)}
.brand{display:flex;align-items:center;gap:11px;font-family:"Coolvetica","DM Sans",sans-serif;font-size:1.03rem;font-weight:400;letter-spacing:.06em;color:var(--purple-deep)}
.brand-mark{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 5px 16px rgba(73,49,140,.2)}
.site-header nav{display:flex;align-items:center;gap:clamp(10px,2vw,26px)}
.nav-link{color:var(--muted);font-size:.83rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:7px 0;border-bottom:1px solid transparent;transition:.2s}
.nav-link:hover{color:var(--purple);border-color:var(--blue-deep)}
.nav-contact{color:var(--purple);border:1px solid rgba(118,81,201,.25);border-radius:999px;padding:7px 15px}
.nav-contact:hover{border-color:var(--purple);background:var(--wash)}
.theme-toggle{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid rgba(118,81,201,.25);background:var(--panel);color:var(--purple);cursor:pointer;transition:.2s;box-shadow:0 5px 18px rgba(73,49,140,.1)}
.theme-toggle:hover{transform:translateY(-1px);border-color:var(--purple)}.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

main{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,52px)}
.hero{position:relative;margin:28px 0 8px;border-radius:clamp(13px,1.75vw,21px);overflow:hidden;background:var(--bg2);min-height:min(72vh,680px);display:flex;align-items:flex-start;
  box-shadow:0 24px 80px rgba(63,54,115,.16),0 0 0 1px rgba(118,81,201,.12)}
.hero-media{position:absolute;inset:0}.hero-media img,.hero-media.placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-media img{opacity:0;transition:opacity var(--hero-transition,1.2s) ease,transform var(--hero-transition,1.2s) ease;will-change:opacity}.hero-media img.active{opacity:1}.hero-media img.hero-flipped{transform:scaleX(-1)}
.hero-media.placeholder{background:radial-gradient(900px 500px at 70% 20%,#b8e9ff 0%,transparent 60%),linear-gradient(140deg,#e5f7ff,#e7ddff)}
.hero-media::after{content:none}
.hero-caption{position:relative;z-index:2;padding:clamp(34px,5.5vw,76px);max-width:860px;color:white;text-shadow:0 3px 22px rgba(10,7,28,.6)}
.hero-caption h1{font-size:clamp(4.32rem,9.36vw,9.12rem);line-height:.9}
.hero-caption p{margin:22px 0 0;color:#f2f2ff;font-size:clamp(1.86rem,3.36vw,2.82rem);line-height:1.22;font-weight:500;max-width:860px}
.hero-action{width:max-content;margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:12px}
.hero-work-prompt{position:relative;z-index:3;width:max-content;display:inline-flex;align-items:center;justify-content:center;padding:25px 44px;border:1px solid rgba(255,255,255,.65);border-radius:4px;background:rgba(13,12,30,.32);color:#fff;font-size:clamp(1.575rem,2.25vw,1.875rem);font-weight:600;letter-spacing:.07em;line-height:1.2;text-transform:uppercase;text-shadow:0 2px 12px rgba(7,5,20,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.2s}
.hero-work-prompt:hover{color:#fff;background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-2px)}
.hero-scroll-cue{color:rgba(255,255,255,.92);font-size:clamp(1rem,1.25vw,1.15rem);font-weight:500;letter-spacing:.04em;text-shadow:0 2px 12px rgba(7,5,20,.75)}
.hero-caption .story-copy{max-width:780px;margin-top:28px;color:#e8e8ff;font-size:clamp(1.26rem,1.86vw,1.5rem);line-height:1.55;text-shadow:0 2px 14px rgba(10,7,28,.7)}
.hero-caption .story-copy p{margin:0 0 10px;padding:0;font-size:clamp(1.26rem,1.86vw,1.5rem)!important;font-weight:400;line-height:1.55;color:#e8e8ff;max-width:none;text-shadow:0 2px 14px rgba(10,7,28,.7)}
.hero-caption .story-copy .text-link{display:inline-block;margin:12px 0 0;font-size:clamp(1.26rem,1.86vw,1.5rem);font-weight:600;color:#fff;border-bottom:2px solid rgba(255,255,255,.45);padding-bottom:3px;max-width:none}
.hero-caption .story-copy .text-link:hover{color:var(--blue-deep);border-bottom-color:var(--blue-deep)}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:44px 0 22px}
.section-head h2{font-size:clamp(2rem,3.7vw,3.6rem);color:var(--purple-deep)}
.btn{display:inline-block;background:linear-gradient(115deg,var(--purple),#9674df);color:#fff;font-weight:600;font-size:.87rem;letter-spacing:.04em;
  padding:12px 24px;border-radius:999px;transition:.22s;border:1px solid transparent;box-shadow:0 10px 28px rgba(118,81,201,.24)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(118,81,201,.32);background:var(--purple-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--panel);cursor:pointer;border:1px solid rgba(118,81,201,.15);box-shadow:0 10px 34px rgba(74,53,135,.09)}
.card img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.2,.75,.25,1),filter .3s}

.card figcaption,.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:42px 17px 15px;background:linear-gradient(180deg,transparent,rgba(29,20,62,.8));font-size:.93rem;color:#fff;text-align:left}
.card figcaption{opacity:0;transform:translateY(7px);transition:.3s}.card:hover figcaption,.card:focus-visible figcaption{opacity:1;transform:none}
.card .tag{position:absolute;top:12px;left:12px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(239,246,255,.88);border:1px solid rgba(118,81,201,.2);color:var(--purple-deep);padding:4px 11px;border-radius:999px;backdrop-filter:blur(8px)}
:root[data-theme="dark"] .card .tag{background:rgba(21,26,49,.88);color:var(--purple-deep);border-color:rgba(169,133,255,.28)}

.gallery-section{padding-top:28px}.masonry{columns:var(--gallery-columns,3);column-gap:var(--gallery-gap,18px)}
.tile{position:relative;margin:0 0 var(--gallery-gap,18px);border-radius:var(--gallery-radius,var(--radius));overflow:hidden;cursor:zoom-in;background:var(--panel);border:1px solid rgba(118,81,201,.14);break-inside:avoid;display:block;width:100%;padding:0;box-shadow:0 10px 30px rgba(74,53,135,.08)}
.tile img{width:100%;transition:transform .55s ease,opacity .4s ease;opacity:1;filter:none}
.tile:hover img{transform:scale(1.025)}

.lightbox{position:fixed;inset:0;z-index:100;overflow:hidden;background:rgba(22,15,48,.94);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px)}
.lightbox[hidden]{display:none}.lightbox figure{margin:0;width:min(96vw,2200px);height:94vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.lightbox img{display:block;max-height:90vh;max-width:100%;width:auto;height:auto;object-fit:contain;margin:0 auto;border-radius:7px;box-shadow:0 30px 90px rgba(0,0,0,.5);background:transparent;transform-origin:center center;transition:opacity .16s ease,transform .22s ease;cursor:zoom-in;touch-action:none}
.lightbox img.loading{object-fit:contain;opacity:1;background:transparent;box-shadow:none}
.lightbox img.zoomed{cursor:grab}
.lightbox img.zoomed:active{cursor:grabbing}.lightbox img.dragging{transition:none}
.lightbox figcaption{text-align:center;color:#d9d7ea;font-size:.95rem;min-height:1.4em}
.lb-close{position:fixed;top:14px;right:20px;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;z-index:102}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:56px;height:56px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(243,247,255,.12);color:#fff;cursor:pointer;z-index:101}
.lb-nav svg{display:block;width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-prev{left:18px}.lb-next{right:18px}.lb-close:hover,.lb-nav:hover{color:var(--blue)}
.site-footer{margin-top:90px;padding:30px clamp(16px,4vw,52px);border-top:1px solid var(--line);background:linear-gradient(90deg,rgba(137,215,255,.12),rgba(118,81,201,.08));color:var(--muted);font-size:.85rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.site-footer a{color:var(--purple);font-weight:600}
:root[data-theme="dark"] .site-footer{background:linear-gradient(90deg,rgba(65,153,209,.1),rgba(126,85,217,.12))}

@media(max-width:900px){.grid:not(.masonry){grid-template-columns:repeat(2,1fr)}.masonry{columns:2}.nav-link:first-child{display:none}}
@media(max-width:560px){.hero-media img{object-position:58% center}.hero-caption{max-width:100%;padding:26px 22px}.hero-caption h1{font-size:var(--mobile-headline,70px);text-align:var(--mobile-headline-align,left);transform:translateY(var(--mobile-headline-y,0));visibility:var(--mobile-headline-visible,visible)}.hero-caption>p{font-size:var(--mobile-welcome,26px);text-align:var(--mobile-welcome-align,left);transform:translateY(var(--mobile-welcome-y,0));visibility:var(--mobile-welcome-visible,visible)}.hero-caption .story-copy,.hero-caption .story-copy p,.hero-caption .story-copy .text-link{font-size:var(--mobile-body,19px)!important}.hero-caption .story-copy{text-align:var(--mobile-body-align,left);transform:translateY(var(--mobile-body-y,0));visibility:var(--mobile-body-visible,visible)}.hero-action{width:100%;margin-top:26px;align-items:stretch}.hero-work-prompt{width:max-content;max-width:100%;margin-left:var(--mobile-button-left,auto);margin-right:var(--mobile-button-right,auto);padding:20px 12px;font-size:var(--mobile-button,21px);letter-spacing:.035em;transform:translateY(var(--mobile-button-y,0));visibility:var(--mobile-button-visible,visible)}.hero-scroll-cue{width:100%;font-size:var(--mobile-cue,16px);text-align:var(--mobile-cue-align,center);transform:translateY(var(--mobile-cue-y,0));visibility:var(--mobile-cue-visible,visible)}}
@media(max-width:560px){.site-header{padding:10px 14px}.brand span{font-size:.9rem}.site-header nav{gap:8px}.nav-link{font-size:.74rem}.nav-contact{display:none}.hero{margin-top:16px;min-height:60vh}.grid:not(.masonry){grid-template-columns:1fr}.masonry{columns:1}.lb-nav{width:44px;height:44px}.lb-nav svg{width:22px;height:22px}.lb-prev{left:8px}.lb-next{right:8px}}

/* Homepage-only: nav lives inside the hero; the sticky top bar is removed. */
.hero-nav{position:absolute;z-index:4;top:clamp(14px,2.2vw,24px);right:clamp(22px,4vw,56px);display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);padding:9px 16px;border-radius:999px;background:rgba(13,12,30,.42);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.hero-nav-link{color:#fff;font-size:.83rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:7px 10px;border:1px solid transparent;border-radius:999px;transition:.2s;text-shadow:0 3px 18px rgba(7,5,20,.8)}
.hero-nav-link:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.hero-nav-link[aria-current="page"]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .theme-toggle{border-color:rgba(169,133,255,.28)}
.theme-toggle{position:relative;z-index:1;color:#fff;border-color:rgba(255,255,255,.45);background:transparent;box-shadow:none}
.theme-toggle:hover{transform:translateY(-1px);background:rgba(255,255,255,.16);border-color:#fff}

/* Homepage hero is a full-viewport photograph, not a panel over the image. */
.home main{max-width:none;margin:0;padding:0}
.home .hero{width:100%;min-height:100vh;min-height:100svh;margin:0;border-radius:0;box-shadow:none}
.home .featured{width:100%;max-width:none;margin:0;padding:0 clamp(24px,4vw,96px)}
@media(max-width:560px){.home .hero{margin-top:0;min-height:100vh;min-height:100svh}.home .hero-nav{top:14px;left:50%;right:auto;transform:translateX(-50%)}.home .hero-caption{padding-top:92px}.home .hero-caption h1{font-size:var(--mobile-headline,70px)}}
.gallery-page .hero-nav{position:fixed}
.gallery-page .gallery-section{padding-top:56px}
@media(max-width:560px){.gallery-page .hero-nav{top:14px;right:14px}.gallery-page .gallery-section{padding-top:48px}}
.gallery-page main{width:100%;max-width:none;margin:0;padding:0 clamp(24px,4vw,96px)}
.featured .favorites-heading{flex:1;text-align:var(--favorites-align,left)}
.featured .eyebrow{color:var(--favorites-eyebrow-color,var(--purple));font-family:var(--favorites-eyebrow-font,var(--sans))}
.featured .section-head h2{color:var(--favorites-title-color,var(--purple-deep));font-family:var(--favorites-title-font,var(--serif))}
.gallery-page .gallery-heading{display:block;text-align:var(--gallery-align,left)}
.gallery-page .gallery-heading h2{color:var(--gallery-title-color,var(--purple-deep));font-family:var(--gallery-title-font,var(--serif))}
.gallery-page #count{display:block;margin-top:8px;color:var(--gallery-count-color,var(--muted));font-family:var(--gallery-count-font,var(--sans))}

@media(min-width:561px){
  .home .hero-caption{width:min(60vw,860px)}
  .home .hero-caption h1{font-size:var(--desktop-headline,135px);text-align:var(--desktop-headline-align,left);transform:translateY(var(--desktop-headline-y,0));visibility:var(--desktop-headline-visible,visible)}
  .home .hero-caption>p{font-size:var(--desktop-welcome,45px);text-align:var(--desktop-welcome-align,left);transform:translateY(var(--desktop-welcome-y,0));visibility:var(--desktop-welcome-visible,visible)}
  .home .hero-caption .story-copy,.home .hero-caption .story-copy p,.home .hero-caption .story-copy .text-link{font-size:var(--desktop-body,24px)!important}
  .home .hero-caption .story-copy{text-align:var(--desktop-body-align,left);transform:translateY(var(--desktop-body-y,0));visibility:var(--desktop-body-visible,visible)}
  .home .hero-action{width:max-content;max-width:100%;align-items:stretch;margin-left:var(--desktop-button-left,0);margin-right:var(--desktop-button-right,auto)}
  .home .hero-work-prompt{width:100%;max-width:100%;margin-left:0;margin-right:0;font-size:var(--desktop-button,30px);transform:translateY(var(--desktop-button-y,0));visibility:var(--desktop-button-visible,visible)}
  .home .hero-scroll-cue{width:100%;font-size:var(--desktop-cue,18px);text-align:var(--desktop-cue-align,center);transform:translateY(var(--desktop-cue-y,0));visibility:var(--desktop-cue-visible,visible)}
}

@media(max-width:560px){
  .home .hero-caption h1{color:var(--mobile-headline-color,#fff)}
  .home .hero-caption>p{color:var(--mobile-welcome-color,#fff)}
  .home .hero-caption .story-copy,.home .hero-caption .story-copy p,.home .hero-caption .story-copy .text-link{color:var(--mobile-body-color,#fff)!important}
  .home .hero-work-prompt,.home .hero-work-prompt:hover{color:var(--mobile-button-color,#fff)}
  .home .hero-scroll-cue{color:var(--mobile-cue-color,#fff)}
}
@media(min-width:561px){
  .home .hero-caption h1{color:var(--desktop-headline-color,#fff)}
  .home .hero-caption>p{color:var(--desktop-welcome-color,#fff)}
  .home .hero-caption .story-copy,.home .hero-caption .story-copy p,.home .hero-caption .story-copy .text-link{color:var(--desktop-body-color,#fff)!important}
  .home .hero-work-prompt,.home .hero-work-prompt:hover{color:var(--desktop-button-color,#fff)}
  .home .hero-scroll-cue{color:var(--desktop-cue-color,#fff)}
}