/* Hams Abuhashim — compact portfolio. Vanilla CSS, shared type and spacing scale. */
/* 01 Reset */
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,p,figure,dl,dd,ul,ol{margin:0}ul,ol{padding:0;list-style:none}img{display:block;max-width:100%;height:auto}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{padding:0;border:0;background:none}a{color:inherit}button:disabled{cursor:default;opacity:.35}[hidden]{display:none!important}
/* 02 Variables */
:root{color-scheme:dark;--bg:#07090d;--surface:#0c111a;--card:#101722;--text:#f5f7fa;--soft:#c2cad6;--muted:#9aa7ba;--accent:#72baff;--line:#ffffff1c;--line-strong:#ffffff36;--radius:18px;--pad:clamp(18px,5vw,64px);--header-h:76px;--font:'Manrope','Segoe UI',system-ui,sans-serif;--body:clamp(1rem,.97rem + .15vw,1.1rem);--lead:clamp(1.2rem,1rem + .6vw,1.6rem);--heading:clamp(1.9rem,1.2rem + 2.5vw,3.25rem);--project:clamp(1.3rem,1.05rem + .8vw,1.8rem);--hero:clamp(3.25rem,2rem + 5.2vw,6.5rem)}
/* 03 Typography */
html{scroll-padding-top:calc(var(--header-h) + 20px);scrollbar-gutter:stable}body{font:var(--body)/1.65 var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}h1,h2,h3{font-weight:600;line-height:1.18;letter-spacing:-.035em;text-wrap:balance}p{color:var(--soft)}.section-title,.contact__title{font-size:var(--heading)}.lead,.hero__statement{font-size:var(--lead);line-height:1.55}.lead{max-width:40ch}.section-label,.eyebrow,.project__type{color:var(--accent);font-size:.72rem;font-weight:600;letter-spacing:.12em;line-height:1.6}.detail-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}.section-label{margin-bottom:14px}.link-line{text-decoration:none;border-bottom:1px solid var(--line-strong);padding:9px 0;font-size:.9rem}.link-line:hover{color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1px solid var(--line-strong);border-radius:999px;font-size:.88rem;font-weight:600;text-decoration:none;line-height:1.4;transition:background .2s,transform .2s}.btn:hover{transform:translateY(-2px);background:#ffffff12}.btn--primary{background:var(--text);color:var(--bg);border-color:var(--text)}.btn--primary:hover{background:var(--accent);border-color:var(--accent)}
/* 04 Layout */
.wrap{width:min(100%,1248px);padding-inline:var(--pad);margin:auto}.section{padding-block:clamp(52px,6vw,84px)}.section--alt{background:var(--surface);border-block:1px solid var(--line)}.section-head{margin-bottom:32px}[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
/* 05 Navigation */
.site-header{position:sticky;top:0;z-index:20;height:var(--header-h);background:#07090de8;border-bottom:1px solid transparent;backdrop-filter:blur(16px);transition:border-color .2s}.site-header.is-scrolled{border-color:var(--line)}.site-header__bar{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:.95rem;font-weight:600;white-space:nowrap}.brand__avatar{width:40px;height:40px;object-fit:cover;object-position:center;background:#000;border:1px solid var(--line-strong);border-radius:50%;flex-shrink:0}.site-nav__list{display:flex;gap:28px}.site-nav__link{display:block;color:var(--muted);text-decoration:none;font-size:.85rem;padding:10px 0;border-bottom:1px solid transparent}.site-nav__link:hover,.site-nav__link[aria-current]{color:var(--text);border-color:var(--accent)}.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;position:relative;flex-shrink:0}.nav-toggle__bar{position:absolute;left:12px;right:12px;height:1px;background:var(--text);top:17px}.nav-toggle__bar:last-child{top:25px}.nav-toggle[aria-expanded=true] .nav-toggle__bar:first-child{top:21px;transform:rotate(45deg)}.nav-toggle[aria-expanded=true] .nav-toggle__bar:last-child{top:21px;transform:rotate(-45deg)}
/* 06 Hero */
.hero{position:relative;isolation:isolate;overflow:clip;border-bottom:1px solid var(--line)}.hero__grid{padding-block:clamp(52px,7vw,100px)}.hero__content{display:grid;gap:24px;max-width:780px}.hero__glow{position:absolute;z-index:-1;width:800px;height:800px;pointer-events:none;border-radius:50%}.hero__glow--warm{top:-420px;right:-260px;background:radial-gradient(circle,#ff713838,transparent 68%)}.hero__glow--blue{left:-380px;bottom:-590px;background:radial-gradient(circle,#168bff4a,transparent 68%)}.hero__status{display:flex;align-items:center;gap:11px;font-size:.8rem;color:var(--soft)}.hero__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #87c5ff12;flex-shrink:0}.hero__title{font-size:var(--hero);line-height:1.02;font-weight:600;letter-spacing:-.055em;margin-top:15px}.hero__title>span{display:block}.hero__title-accent{color:var(--accent)}.hero__statement{max-width:35ch}.hero__cta{display:grid;gap:14px}.hero__actions,.hero__links{display:flex;flex-wrap:wrap;gap:12px}.hero__links{gap:25px}
/* 07 About */
.about__grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,5vw,70px)}.facts{margin-top:24px}.facts>div{padding:16px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:90px 1fr;gap:12px}.facts dt{color:var(--muted);font-size:.82rem}.facts dd{font-size:.92rem}.facts small{display:block;margin-top:4px;color:var(--muted);font-size:.8rem;line-height:1.7}
/* 08 Projects */
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.project{min-width:0}.project-card{display:flex;flex-direction:column;width:100%;height:100%;text-align:left;background:linear-gradient(145deg,#121a27,#0c1017);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .25s,box-shadow .25s}.project-card:hover{border-color:#87c5ff66;box-shadow:0 12px 50px -24px #168bff55}.project__preview{display:block;aspect-ratio:1.86;background:#101722;overflow:hidden;width:100%;border-bottom:1px solid var(--line)}.project__preview img{width:100%;height:100%;object-fit:contain;transition:transform .4s}.project-card:hover img{transform:scale(1.025)}.project__content{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.3vw,30px);flex:1}.project__type{color:var(--muted);font-size:.65rem}.project__title{font-size:var(--project)}.project__summary{color:var(--soft);font-size:.9rem;line-height:1.6}.project__tools{color:var(--muted);font-size:.76rem}.project__open{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px;margin-top:auto;font-size:.85rem;color:var(--accent)}.project__open>span{transition:transform .2s}.project-card:hover .project__open>span{transform:translate(3px,-3px)}
/* 09 Modals */
.modal{margin:auto;padding:0;width:min(900px,calc(100% - 48px));max-width:none;max-height:calc(100dvh - 64px);color:var(--text);background:#0d131d;border:1px solid #334052;border-radius:var(--radius);box-shadow:0 32px 120px #000b;overflow:hidden}.modal[open]{display:flex;flex-direction:column}.modal::backdrop{background:#020407d9;backdrop-filter:blur(7px)}.modal__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;border-bottom:1px solid var(--line);flex-shrink:0}.modal__bar .section-label{margin:0}.close-button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);font-size:1.6rem;line-height:1;flex-shrink:0}.close-button:hover{background:#ffffff12}.modal__body{padding:24px 30px 30px;overflow:auto;overscroll-behavior:contain;min-height:0}.modal__body>h2{font-size:clamp(1.4rem,1rem + 1.5vw,2rem);max-width:28ch}.modal__description{margin-top:14px;font-size:.92rem;max-width:78ch}.tags{display:flex;flex-wrap:wrap;gap:7px}.tags li{padding:4px 11px;border:1px solid var(--line);background:#ffffff04;border-radius:999px;font-size:.76rem;color:var(--soft)}.workflow{display:flex;flex-wrap:wrap;gap:8px 10px}.workflow li{font-size:.76rem;color:var(--soft)}.workflow li:not(:last-child)::after{content:'→';margin-left:10px;color:var(--accent)}.project-note{font-size:.8rem;padding:14px 0 0;color:var(--accent)}.gallery__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 12px}.gallery__head .detail-label{margin:0}.gallery__controls{display:flex;align-items:center;gap:12px;font-size:.75rem;color:var(--muted)}.gallery__controls button{border:1px solid var(--line-strong);border-radius:50%;width:44px;height:44px;font-size:1.1rem}.gallery__slides figure+figure{margin-top:20px}.gallery__slides figure[hidden]+figure{margin-top:0}.gallery-shot{position:relative;display:block;width:100%;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in}.gallery-shot img{width:100%;height:auto}.gallery figcaption{font-size:.8rem;color:var(--muted);padding-top:8px}.email-modal{width:min(480px,calc(100% - 32px))}.email-address{margin-block:16px 24px;overflow-wrap:anywhere;font-size:1rem}.email-actions{display:flex;flex-wrap:wrap;gap:10px}.copy-status{min-height:1.7em;margin-top:14px;color:var(--accent);font-size:.8rem}.lightbox{width:min(1500px,calc(100% - 32px));max-height:calc(100dvh - 32px)}.lightbox .modal__bar h2{font-size:.95rem;letter-spacing:0}.lightbox__scroll{overflow:auto;overscroll-behavior:contain;min-height:0;background:#fff}.lightbox__scroll img{width:100%;max-width:none}.modal-open{overflow:hidden}
/* 10 Skills */
.skills>div{display:grid;grid-template-columns:1fr 2fr;gap:20px;padding:18px 0;border-top:1px solid var(--line)}.skills dt{font-weight:600;font-size:1rem}.skills dd{font-size:.95rem;color:var(--soft)}
/* 11 Contact */
.contact{background:radial-gradient(ellipse at 100% 100%,#ff71381c,transparent 60%)}.contact__grid{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:60px}.contact__title{max-width:16ch}.contact__panel{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:#10172280}.contact__panel>p{font-size:.92rem;margin-bottom:20px}.contact__primary{margin-bottom:18px}.contact__links a{display:flex;justify-content:space-between;align-items:center;min-height:48px;border-top:1px solid var(--line);font-size:.9rem;text-decoration:none}.contact__links a:hover{color:var(--accent)}
/* 12 Footer */
.site-footer{padding-block:28px;border-top:1px solid var(--line);font-size:.76rem;color:var(--muted)}.site-footer__grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.site-footer__identity strong{display:block;font-size:.9rem;color:var(--soft)}
/* 13 Utilities */
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.skip-link{position:fixed;left:16px;top:-100px;z-index:40;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:8px}.skip-link:focus{top:12px}.scroll-progress{position:fixed;inset:0 0 auto;height:2px;z-index:30;pointer-events:none}.scroll-progress span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}.back-to-top{position:fixed;right:20px;bottom:20px;z-index:15;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:#101722;visibility:hidden;opacity:0;transition:opacity .2s}.back-to-top.is-visible{visibility:visible;opacity:1}
/* 14 Motion */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.reveal.is-pending{opacity:0;transform:translateY(14px)}.reveal{transition:opacity .5s,transform .5s}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* 15 Responsive */
@media(max-width:860px){.about__grid{grid-template-columns:1fr}.about__title .section-title br{display:none}.contact__grid{gap:28px;grid-template-columns:1fr 1fr}.site-nav__list{gap:20px}}
@media(max-width:767px){:root{--header-h:68px}.js .nav-toggle{display:block}.site-header{height:auto;min-height:var(--header-h)}.site-header__bar{min-height:var(--header-h);flex-wrap:wrap}.site-nav{width:100%;padding-bottom:16px}.site-nav__list{justify-content:space-between;gap:10px}.js .site-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:12px var(--pad) 24px;background:#0c111afa;border-bottom:1px solid var(--line)}.js .site-nav.is-open{display:block}.js .site-nav__list{display:block}.js .site-nav__link{padding:14px 0}.projects-grid,.contact__grid{grid-template-columns:1fr}.hero__grid{padding-block:44px 52px}.hero__content{gap:22px}.hero__title{font-size:clamp(3.15rem,12.5vw,5.5rem)}.eyebrow{font-size:.66rem}.project__title{font-size:1.45rem}.skills>div{grid-template-columns:1fr;gap:5px;padding-block:16px}.modal{width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:14px}.modal__bar{padding:10px 16px}.modal__body{padding:20px 18px}.email-modal{width:calc(100% - 32px)}.email-actions .btn{flex:1 1 100%}.gallery__head{gap:6px}.gallery__controls{gap:8px}.gallery__controls button{width:44px}.detail-label{font-size:.69rem}.lightbox__scroll img{width:max(100%,900px)}.facts>div{grid-template-columns:1fr;gap:4px}.brand{font-size:.88rem}.hero__status{font-size:.72rem}.contact__panel{padding:22px}.section-head .section-title br{display:none}}
/* Entire card is clickable while its title remains a semantic heading. */
.project-card{position:relative}.project-trigger{text-align:left;font:inherit;line-height:inherit;letter-spacing:inherit}.project-trigger::after{content:'';position:absolute;inset:0;z-index:1;border-radius:var(--radius)}.project-card:focus-within{outline:2px solid var(--accent);outline-offset:4px}.project-trigger:focus-visible{outline:none}
.gallery__controls [data-gallery-status]{white-space:nowrap;min-width:2.5em;text-align:center}

.modal__bar--minimal{justify-content:flex-end}