@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600&family=Zalando+Sans:ital,wght@0,300..900;1,300..900&display=swap');

:root { --ink: #211f1e; --paper: #f5f4f1; --soft: #e8e7e3; --line: #ceccc6; --coral: #e0523d; --mono: 'Zalando Sans', Arial, sans-serif; --sans: 'Zalando Sans', Arial, sans-serif; --serif: 'Zalando Sans', Arial, sans-serif; --arabic: 'Alexandria', Arial, sans-serif; }
* { box-sizing: border-box; }
.text-arrow { font-family: Arial, Helvetica, sans-serif !important; font-style: normal; font-variant-emoji: text; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; overflow-x: clip; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }

@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drift { 0%, 100% { transform: rotate(12deg) translate3d(0, 0, 0); } 50% { transform: rotate(8deg) translate3d(-9px, -14px, 0); } }
@keyframes drift-contact { 0%, 100% { transform: rotate(-14deg) translate3d(0, 0, 0); } 50% { transform: rotate(-10deg) translate3d(0, -13px, 0); } }

.site-header { height: 95px; padding: 22px clamp(24px, 4.1vw, 65px); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; border-bottom: 1px solid var(--line); animation: rise-in .7s cubic-bezier(.2,.7,.2,1) both; }
.brand { display: block; width: 118px; }
.brand img { width: 100%; display: block; }
nav { display: flex; align-items: center; gap: clamp(18px, 2.7vw, 42px); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
nav a { transition: color .2s ease; } nav a:hover { color: var(--coral); } nav span { color: var(--coral); font-size: 16px; vertical-align: -1px; }
.menu-toggle { display: none; }

.hero { min-height: min(720px, calc(100svh - 95px)); padding: clamp(68px, 11vh, 132px) clamp(24px, 8.4vw, 132px) 47px; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.eyebrow { margin: 0; color: #595653; font: 500 10px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.hero .eyebrow, .hero h1, .hero-bottom { animation: rise-in .9s cubic-bezier(.2,.7,.2,1) both; }.hero h1 { animation-delay: .12s; }.hero-bottom { animation-delay: .24s; }
h1, h2 { margin: 0; font-weight: 500; letter-spacing: -.062em; }
h1 { max-width: 1100px; margin-top: clamp(32px, 7vh, 75px); font-size: clamp(58px, 8.4vw, 134px); line-height: .88; }
em { font-family: var(--serif); font-weight: 500; letter-spacing: -.078em; }
.hero-bottom { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; position: relative; z-index: 1; }
.hero-bottom > p, .statement-details p { max-width: 348px; margin: 0; color: #454240; font-size: 15px; line-height: 1.47; }
.round-link { width: 112px; height: 112px; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: space-between; padding: 15px; color: white; background: var(--coral); border-radius: 50%; font: 500 10px/1.25 var(--mono); transition: transform .28s ease, background .28s ease; }
.round-link:hover { transform: rotate(-10deg) scale(1.06); background: var(--ink); }.round-link b { align-self: flex-end; font-size: 22px; font-weight: 400; }
.hero-mark { position: absolute; width: min(27vw, 360px); right: 19vw; bottom: -10%; opacity: .12; transform: rotate(12deg); animation: drift 7s ease-in-out infinite; }.hero-mark img { display: block; width: 100%; }

.marquee { padding: 19px 0; overflow: hidden; color: #f9f8f5; background: var(--ink); white-space: nowrap; }.marquee-track { width: max-content; display: flex; align-items: center; gap: 30px; animation: ticker 30s linear infinite; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }.marquee i { color: var(--coral); font-style: normal; font-size: 17px; } @keyframes ticker { to { transform: translateX(-50%); } }

.work-section { padding: clamp(88px, 13vw, 195px) clamp(24px, 4.1vw, 65px) clamp(95px, 12vw, 170px); }.section-heading { max-width: 790px; }.section-heading h2, .statement h2, .services h2, .contact h2 { font-size: clamp(46px, 6.4vw, 100px); line-height: .91; }.section-heading h2 { margin-top: 26px; }.section-note { max-width: 236px; margin: 31px 0 0; color: #67635f; font-size: 14px; line-height: 1.45; }
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(46px, 6.2vw, 100px) clamp(19px, 3.2vw, 50px); margin-top: clamp(68px, 11vw, 160px); }.project { display: block; }.project:nth-child(even) { margin-top: clamp(0px, 11vw, 170px); }.art { position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.2,.7,.2,1); }.instagram-art { aspect-ratio: 9 / 16; background: var(--soft); }.instagram-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }.project:hover .art { transform: scale(.985); }.project:hover .instagram-art img { transform: scale(1.035); }.project-meta { padding-top: 14px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); font: 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; }.project-meta h3 { margin: 0 0 5px; font: 500 13px/1.2 var(--sans); text-transform: none; letter-spacing: -.02em; }.project-meta h3[lang="ar"] { font-family: var(--arabic); font-size: 16px; font-weight: 500; line-height: 1.35; }.project-meta p { margin: 0; color: #77736f; }.project-meta > span { color: var(--coral); }

.statement { min-height: 800px; padding: clamp(83px, 12vw, 180px) clamp(24px, 8.4vw, 132px); color: white; background: var(--ink); position: relative; overflow: hidden; }.statement:after { content: 'Q'; position: absolute; right: -3vw; bottom: -14vw; color: #2d2b29; font: 500 clamp(280px, 53vw, 900px)/.7 var(--serif); }.statement .eyebrow { color: #aaa6a0; }.statement h2 { max-width: 950px; margin-top: 28px; position: relative; z-index: 1; }.statement h2 em { color: var(--coral); }.statement-details { position: relative; z-index: 1; margin-top: clamp(52px, 10vw, 140px); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }.statement-details p { color: #d4d0cb; }.text-link { padding-bottom: 5px; color: var(--coral); border-bottom: 1px solid currentColor; font: 500 12px/1 var(--mono); text-transform: uppercase; }.text-link span { padding-left: 30px; font-size: 18px; }

.services { padding: clamp(83px, 12vw, 175px) clamp(24px, 8.4vw, 132px); display: grid; grid-template-columns: .9fr 1.25fr; gap: clamp(45px, 11vw, 180px); }.services h2 { margin-top: 26px; }.services ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.services li { padding: 21px 0; display: grid; grid-template-columns: 52px 1.2fr 1fr; gap: 16px; align-items: baseline; border-bottom: 1px solid var(--line); }.services li span { color: var(--coral); font: 10px/1 var(--mono); }.services strong { font-size: 18px; font-weight: 500; letter-spacing: -.04em; }.services li p { margin: 0; color: #716e6a; font-size: 13px; line-height: 1.35; }

.contact { min-height: 690px; padding: clamp(84px, 12vw, 175px) clamp(24px, 8.4vw, 132px) 70px; position: relative; overflow: hidden; color: var(--ink); background: var(--coral); }.contact .eyebrow { color: #4e2924; }.contact h2 { position: relative; z-index: 1; margin-top: 27px; font-size: clamp(58px, 9.5vw, 148px); }.contact-link { position: relative; z-index: 1; display: inline-flex; gap: 34px; margin-top: clamp(55px, 11vw, 130px); padding-bottom: 7px; border-bottom: 1px solid currentColor; font: 500 clamp(15px, 1.45vw, 20px)/1 var(--mono); text-transform: uppercase; }.contact-link span { font-size: 25px; }.contact-mark { width: min(34vw, 460px); position: absolute; z-index: 0; right: -4vw; bottom: -13%; opacity: .28; transform: rotate(-14deg); filter: grayscale(1) brightness(.35); animation: drift-contact 8s ease-in-out infinite; }
footer { padding: 20px clamp(24px, 4.1vw, 65px); display: flex; gap: 24px; justify-content: space-between; font: 10px/1.4 var(--mono); color: #66625e; text-transform: uppercase; letter-spacing: .04em; } footer a:hover { color: var(--coral); }

.shop-hero { min-height: min(610px, calc(100svh - 95px)); padding: clamp(74px, 12vw, 170px) clamp(24px, 8.4vw, 132px) 65px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--paper); background: var(--ink); position: relative; overflow: hidden; }.shop-hero:after { content: 'ق'; position: absolute; right: 7vw; top: -16vw; color: #2e2c2a; font: 400 clamp(360px, 47vw, 750px)/1 var(--arabic); }.shop-hero .eyebrow, .shop-hero h1, .shop-hero > p:last-child { position: relative; z-index: 1; }.shop-hero .eyebrow { color: #aaa6a0; }.shop-hero h1 { max-width: 950px; margin-top: 27px; font-size: clamp(63px, 9vw, 140px); }.shop-hero h1 em { color: var(--coral); }.shop-hero > p:last-child { max-width: 330px; margin: clamp(31px, 5vw, 67px) 0 0; color: #d3cfca; font-size: 15px; line-height: 1.45; }
.shop-intro { padding: 30px clamp(24px, 8.4vw, 132px); display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }.shop-intro p { max-width: 530px; margin: 0; font-size: 15px; line-height: 1.45; }.shop-intro .text-link { flex: 0 0 auto; color: var(--ink); }
.shop-products { padding: clamp(70px, 10vw, 155px) clamp(24px, 4.1vw, 65px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(54px, 8vw, 125px) clamp(20px, 4vw, 65px); }.product-card { min-width: 0; }.product-card:nth-child(even) { margin-top: clamp(0px, 10vw, 140px); }.product-image { display: block; overflow: hidden; background: var(--soft); aspect-ratio: 9 / 12; }.product-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }.product-image:hover img { transform: scale(1.035); }.product-details { padding-top: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); }.product-type { margin: 0 0 10px; color: #77736f; font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }.product-details h2 { margin: 0; font: 500 22px/1.35 var(--arabic); letter-spacing: -.04em; }.product-name { margin: 3px 0 0; font-size: 14px; }.buy-link { flex: 0 0 auto; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--coral); font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }.buy-link span { margin-left: 9px; font-size: 15px; }.shop-cta { min-height: 500px; padding: clamp(76px, 11vw, 165px) clamp(24px, 8.4vw, 132px); color: var(--ink); background: var(--coral); }.shop-cta .eyebrow { color: #4e2924; }.shop-cta h2 { margin-top: 27px; font-size: clamp(50px, 7.8vw, 120px); line-height: .9; }.shop-cta .contact-link { margin-top: clamp(50px, 8vw, 95px); }

@media (max-width: 700px) { body.menu-open { overflow: hidden; } }

.motion-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms), transform .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms); }.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 700px) { .site-header { height: 73px; padding: 16px 20px; }.brand { width: 96px; }.menu-toggle { width: 42px; height: 42px; padding: 0; display: grid; place-content: center; gap: 6px; position: relative; z-index: 2; color: var(--ink); border: 1px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer; }.menu-toggle span { width: 15px; height: 1px; display: block; background: currentColor; transition: transform .25s ease; }.menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); } nav { width: 100%; min-height: calc(100svh - 73px); padding: 35px 20px 50px; display: flex; position: absolute; z-index: 1; top: 72px; left: 0; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 22px; color: var(--paper); background: var(--ink); visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s; } .menu-open nav { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; } nav a { font-size: clamp(34px, 10vw, 48px); font-family: var(--sans); font-weight: 500; line-height: .92; letter-spacing: -.06em; text-transform: none; } nav span { font-size: 25px; } .hero { min-height: calc(100svh - 73px); padding: 57px 20px 27px; }.hero-mark { width: 190px; right: 3vw; bottom: 10%; }.hero-bottom { gap: 18px; }.hero-bottom > p { max-width: 225px; font-size: 13px; }.round-link { width: 84px; height: 84px; padding: 12px; font-size: 9px; }.marquee { padding: 15px 0; }.work-section { padding: 82px 20px 92px; }.projects { grid-template-columns: 1fr; margin-top: 57px; gap: 58px; }.project:nth-child(even) { margin-top: 0; }.instagram-art { aspect-ratio: 9 / 14; }.statement { min-height: 620px; padding: 82px 20px; }.statement:after { font-size: 430px; right: -80px; bottom: -40px; }.statement-details { margin-top: 58px; flex-direction: column; align-items: flex-start; }.services { padding: 80px 20px; grid-template-columns: 1fr; gap: 54px; }.services li { grid-template-columns: 36px 1fr; gap: 13px; }.services li p { grid-column: 2; margin-top: -6px; }.contact { min-height: 510px; padding: 80px 20px 60px; }.contact-mark { width: 230px; right: -45px; bottom: -30px; }.contact-link { margin-top: 62px; font-size: 13px; } .shop-hero { min-height: 450px; padding: 65px 20px 50px; }.shop-hero:after { right: -45px; top: -15px; font-size: 360px; }.shop-hero h1 { margin-top: 20px; font-size: 62px; }.shop-hero > p:last-child { margin-top: 26px; font-size: 13px; }.shop-intro { padding: 26px 20px; align-items: flex-start; flex-direction: column; gap: 20px; }.shop-intro p { font-size: 14px; }.shop-products { padding: 72px 20px 88px; grid-template-columns: 1fr; gap: 58px; }.product-card:nth-child(even) { margin-top: 0; }.product-image { aspect-ratio: 9 / 12; }.product-details { gap: 15px; }.product-details h2 { font-size: 20px; }.buy-link { font-size: 9px; }.shop-cta { min-height: 420px; padding: 75px 20px; }.shop-cta h2 { font-size: 55px; }.shop-cta .contact-link { margin-top: 52px; } footer { padding: 18px 20px; flex-wrap: wrap; gap: 12px; } footer a:last-child { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.site-header, .hero .eyebrow, .hero h1, .hero-bottom, .hero-mark, .contact-mark, .marquee-track { animation: none; }.project:hover .art, .round-link:hover { transform: none; } }

/* Qalamhasan portfolio — editorial, artwork-led layout */
.portfolio-home { background: #f3f1ed; }.portfolio-home .site-header { height: 82px; padding: 18px clamp(24px, 3.5vw, 58px); color: var(--ink); background: #f3f1ed; animation: none; }.portfolio-home .brand { width: 110px; }.portfolio-home nav { gap: clamp(21px, 2.6vw, 42px); }.portfolio-home nav a { font-size: 10px; }.portfolio-home nav a:first-child { color: var(--coral); }
.brand-hero { min-height: calc(100svh - 82px); padding: 25px clamp(24px, 3.5vw, 58px) 36px; position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr); grid-template-rows: auto 1fr auto; gap: 0 40px; color: #f3f1ed; background: var(--ink); overflow: hidden; }.hero-topline { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.18); font: 10px/1 var(--mono); letter-spacing: .055em; text-transform: uppercase; }.hero-topline p { margin: 0; }.brand-hero h1 { align-self: center; position: relative; z-index: 1; margin: 0; font: 500 clamp(70px, 10.9vw, 175px)/.72 var(--sans); letter-spacing: -.095em; }.brand-hero h1 span, .brand-hero h1 em { display: block; }.brand-hero h1 em { margin-left: clamp(22px, 7vw, 115px); color: var(--coral); font: 500 clamp(76px, 11.8vw, 188px)/.72 var(--serif); }.hero-art { width: min(100%, 485px); height: min(61vh, 650px); align-self: end; justify-self: end; position: relative; overflow: hidden; background: #dfdcd6; }.hero-art:before { content: 'Selected artwork / 2026'; position: absolute; z-index: 2; left: 15px; bottom: 15px; color: #f3f1ed; font: 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; mix-blend-mode: difference; }.hero-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.01); }.hero-identity { grid-column: 1; align-self: end; display: flex; align-items: end; gap: clamp(30px, 8vw, 115px); padding-top: 28px; }.hero-identity p { margin: 0; }.hero-identity > p:last-child { max-width: 260px; color: #c7c2bb; font-size: 13px; line-height: 1.45; }.hero-arabic { color: var(--coral); font: 500 clamp(56px, 6vw, 94px)/.7 var(--arabic); letter-spacing: -.09em; }.hero-scroll { position: absolute; z-index: 2; right: calc(3.5vw + 16px); bottom: 35px; display: flex; align-items: center; gap: 15px; color: #f3f1ed; font: 10px/1 var(--mono); letter-spacing: .055em; text-transform: uppercase; }.hero-scroll b { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 16px; font-weight: 400; transition: transform .3s ease; }.hero-scroll:hover b { transform: translateY(5px); }
.section-kicker { margin: 0; color: #726d68; font: 10px/1.2 var(--mono); letter-spacing: .075em; text-transform: uppercase; }.intro-statement { min-height: 610px; padding: clamp(85px, 12vw, 185px) clamp(24px, 8.7vw, 140px) 55px; display: flex; flex-direction: column; justify-content: space-between; background: #f3f1ed; }.statement-copy { max-width: 1100px; margin: 52px 0 0; font: 500 clamp(42px, 6.25vw, 98px)/.94 var(--sans); letter-spacing: -.075em; }.statement-copy em { color: var(--coral); font-size: 1.08em; }.statement-foot { display: flex; justify-content: space-between; gap: 30px; color: #6e6965; font: 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }.statement-foot a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 5px; }.statement-foot i { margin-left: 30px; color: var(--coral); font-size: 16px; font-style: normal; }
.biography { display: grid; grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr); color: var(--ink); background: #d9d7d2; }.bio-photo { min-height: 780px; overflow: hidden; background: #d24b37; }.bio-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }.bio-copy { padding: clamp(70px, 8vw, 125px) clamp(30px, 7vw, 115px); }.bio-copy h2 { margin: 26px 0 0; font: 500 clamp(46px, 5.8vw, 91px)/.88 var(--sans); letter-spacing: -.085em; }.bio-copy h2 em { color: var(--coral); }.bio-lead { max-width: 640px; margin: clamp(42px, 6vw, 80px) 0 0; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.42; letter-spacing: -.025em; }.bio-columns { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 55px); padding-top: 20px; border-top: 1px solid #aaa7a2; }.bio-columns p { margin: 0 0 21px; color: #625e5a; font-size: 13px; line-height: 1.52; }.bio-columns em { font-family: var(--serif); }.bio-columns span { color: var(--ink); font-family: var(--arabic); }.bio-copy blockquote { margin: clamp(34px, 5vw, 67px) 0 0; color: var(--coral); font: 500 clamp(32px, 3.8vw, 59px)/1.25 var(--arabic); letter-spacing: -.055em; }.quote-translation { margin: 9px 0 0; color: #6a6560; font: 500 10px/1.45 var(--mono); text-transform: uppercase; letter-spacing: .04em; }.bio-links { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px 27px; }.bio-links a { padding-bottom: 5px; border-bottom: 1px solid var(--ink); font: 500 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }.bio-links a:hover { color: var(--coral); border-color: var(--coral); }
.featured-work { padding: clamp(85px, 11vw, 175px) clamp(24px, 3.5vw, 58px); color: #f3f1ed; background: #252321; }.featured-work .section-kicker, .expertise .section-kicker { color: #aaa49e; }.section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 38px; }.section-header h2 { max-width: 740px; margin: 0; font: 500 clamp(49px, 7.3vw, 116px)/.84 var(--sans); letter-spacing: -.085em; }.section-header h2 em { color: var(--coral); }.feature-lead { margin-top: clamp(70px, 10vw, 150px); }.feature-image { height: min(70vw, 800px); display: block; position: relative; overflow: hidden; background: #e4e0d9; }.feature-image:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.2)); }.feature-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 42%; transition: transform 1s cubic-bezier(.2,.7,.2,1); }.feature-image:hover img { transform: scale(1.04); }.feature-caption { padding: 20px 0 0; display: grid; grid-template-columns: .3fr 1.2fr .5fr; align-items: start; gap: 25px; border-top: 1px solid rgba(255,255,255,.2); }.feature-caption p { margin: 0; }.project-no { color: var(--coral); font: 10px/1 var(--mono); }.feature-caption h3 { margin: -7px 0 6px; font: 500 clamp(25px, 3vw, 50px)/1.1 var(--arabic); letter-spacing: -.05em; }.feature-caption div p { color: #b4ada6; font-size: 13px; }.feature-caption > a { justify-self: end; padding-bottom: 5px; border-bottom: 1px solid var(--coral); color: var(--coral); font: 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }.work-grid { margin-top: clamp(75px, 10vw, 155px); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(16px, 2.3vw, 36px); }.work-tile { display: block; color: #f3f1ed; }.work-tile:nth-child(2) { margin-top: 14vw; }.work-tile img { width: 100%; aspect-ratio: 9 / 13; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }.work-tile:hover img { transform: scale(.97); }.work-tile span { padding-top: 13px; display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid rgba(255,255,255,.2); }.work-tile b { font: 500 17px/1.3 var(--arabic); }.work-tile i { color: var(--coral); font: 10px/1 var(--mono); font-style: normal; }.all-work-link { margin-top: clamp(72px, 11vw, 140px); display: inline-flex; align-items: center; gap: 38px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.45); font: 500 clamp(17px, 2vw, 27px)/1 var(--sans); letter-spacing: -.04em; }.all-work-link span { color: var(--coral); font-size: 25px; }
.expertise { padding: clamp(85px, 11vw, 175px) clamp(24px, 3.5vw, 58px); background: #d9d7d2; }.expertise .section-header h2 { color: var(--ink); }.expertise-list { margin-top: clamp(65px, 10vw, 150px); border-top: 1px solid #aaa7a2; }.expertise-list article { min-height: 200px; padding: 23px 0; display: grid; grid-template-columns: .22fr 1fr .9fr 42px; align-items: start; gap: 22px; position: relative; border-bottom: 1px solid #aaa7a2; transition: color .35s ease, padding .35s ease; }.expertise-list article:hover { padding-left: 16px; color: var(--coral); }.expertise-list span { color: var(--coral); font: 10px/1 var(--mono); }.expertise-list h3 { margin: -8px 0 0; font: 500 clamp(32px, 4.15vw, 65px)/.88 var(--sans); letter-spacing: -.075em; }.expertise-list p { max-width: 230px; margin: 4px 0 0; color: #645f5b; font-size: 14px; line-height: 1.4; }.expertise-list i { width: 36px; height: 36px; display: grid; place-items: center; justify-self: end; border: 1px solid currentColor; border-radius: 50%; font-style: normal; transition: transform .35s ease; }.expertise-list article:hover i { transform: rotate(45deg); }
.experience { padding: clamp(85px, 11vw, 175px) clamp(24px, 3.5vw, 58px); color: #f3f1ed; background: #252321; }.experience .section-kicker { color: #aaa49e; }.experience-list { margin-top: clamp(65px, 10vw, 145px); border-top: 1px solid rgba(255,255,255,.22); }.experience-list article { padding: 25px 0 31px; display: grid; grid-template-columns: .23fr 1.05fr .72fr; gap: 24px; align-items: start; border-bottom: 1px solid rgba(255,255,255,.22); transition: padding .35s ease, color .35s ease; }.experience-list article:hover { padding-left: 16px; color: var(--coral); }.experience-list p { margin: 0; color: #aaa49e; font: 10px/1.4 var(--mono); letter-spacing: .055em; text-transform: uppercase; }.experience-list div h3 { margin: -5px 0 8px; font: 500 clamp(28px, 3.55vw, 56px)/.94 var(--sans); letter-spacing: -.07em; }.experience-list div span { color: var(--coral); font: 10px/1.35 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.shop-feature { min-height: 720px; display: grid; grid-template-columns: 1fr 1fr; color: #f3f1ed; background: var(--coral); }.shop-image { min-height: 580px; overflow: hidden; background: #e5dfd8; }.shop-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }.shop-copy { padding: clamp(70px, 9vw, 140px) clamp(30px, 7vw, 115px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }.shop-copy .section-kicker, .contact-band .section-kicker { color: #542c27; }.shop-copy h2 { margin: 27px 0 0; font: 500 clamp(49px, 6vw, 98px)/.86 var(--sans); letter-spacing: -.08em; }.shop-copy h2 em { color: #f3f1ed; }.shop-copy > p:not(.section-kicker) { max-width: 295px; margin: 37px 0 0; font-size: 14px; line-height: 1.45; }.outline-link { margin-top: 52px; padding: 13px 0; display: inline-flex; gap: 35px; border-bottom: 1px solid var(--ink); font: 500 13px/1 var(--mono); text-transform: uppercase; }.outline-link span { font-size: 20px; }.contact-band { min-height: 640px; padding: clamp(82px, 11vw, 165px) clamp(24px, 8.7vw, 140px); position: relative; overflow: hidden; color: #f3f1ed; background: var(--ink); }.contact-band h2 { max-width: 1080px; margin: 28px 0 0; position: relative; z-index: 1; font: 500 clamp(50px, 7.7vw, 122px)/.86 var(--sans); letter-spacing: -.085em; }.contact-band h2 em { color: var(--coral); }.contact-band > a { margin-top: clamp(62px, 10vw, 125px); padding-bottom: 7px; display: inline-flex; gap: 35px; position: relative; z-index: 1; border-bottom: 1px solid var(--coral); color: var(--coral); font: 500 clamp(17px, 2vw, 26px)/1 var(--sans); letter-spacing: -.04em; }.contact-band > a span { font-size: 27px; }.contact-band > img { width: min(35vw, 470px); position: absolute; right: 5vw; bottom: -15%; opacity: .2; filter: grayscale(1) brightness(2); transform: rotate(-14deg); }.portfolio-home footer { color: #7d7772; background: #f3f1ed; }
.motion-ready .portfolio-home .reveal { opacity: 0; transform: translateY(38px); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms); }.motion-ready .portfolio-home .reveal.is-visible { opacity: 1; transform: translateY(0); }
.intro-statement blockquote { margin: clamp(34px, 5vw, 65px) 0 auto; align-self: flex-end; color: var(--coral); font: 500 clamp(28px, 3.4vw, 52px)/1.25 var(--arabic); letter-spacing: -.06em; }

@media (max-width: 700px) { .portfolio-home .site-header { height: 73px; padding: 16px 20px; }.portfolio-home .menu-toggle { display: grid; }.portfolio-home nav { top: 72px; gap: 20px; }.portfolio-home nav a { font-size: clamp(34px, 10vw, 48px); }.brand-hero { min-height: calc(100svh - 73px); padding: 19px 20px 25px; display: flex; flex-direction: column; }.hero-topline { padding-bottom: 16px; font-size: 8px; }.hero-topline p:last-child { display: none; }.brand-hero h1 { margin-top: auto; order: 2; font-size: clamp(72px, 21vw, 103px); line-height: .73; }.brand-hero h1 em { margin-left: 35px; font-size: clamp(78px, 23vw, 112px); }.hero-art { width: 54%; height: 36vh; max-height: 390px; margin: 26px 0 0 auto; order: 1; }.hero-identity { margin-top: 22px; padding-top: 0; order: 3; gap: 14px; align-items: center; justify-content: space-between; }.hero-arabic { font-size: 46px; }.hero-identity > p:last-child { max-width: 170px; font-size: 11px; }.hero-scroll { display: none; }.intro-statement { min-height: 520px; padding: 78px 20px 29px; }.statement-copy { margin-top: 38px; font-size: 43px; }.statement-foot { font-size: 8px; }.statement-foot i { margin-left: 12px; }.biography { display: flex; flex-direction: column; }.bio-photo { min-height: 0; height: 122vw; }.bio-copy { padding: 72px 20px; }.bio-copy h2 { font-size: 52px; }.bio-lead { margin-top: 37px; font-size: 17px; }.bio-columns { margin-top: 36px; grid-template-columns: 1fr; gap: 0; }.bio-columns p { font-size: 13px; }.bio-copy blockquote { margin-top: 43px; font-size: 30px; }.quote-translation { font-size: 8px; }.bio-links { margin-top: 33px; gap: 14px 20px; }.bio-links a { font-size: 8px; }.featured-work { padding: 78px 20px; }.section-header { display: block; }.section-header h2 { margin-top: 24px; font-size: 54px; }.feature-lead { margin-top: 58px; }.feature-image { height: 125vw; }.feature-image img { object-position: center; }.feature-caption { grid-template-columns: 24px 1fr; gap: 14px; }.feature-caption h3 { font-size: 27px; }.feature-caption div p { font-size: 11px; }.feature-caption > a { grid-column: 2; justify-self: start; margin-top: 5px; font-size: 9px; }.work-grid { margin-top: 72px; grid-template-columns: 1fr 1fr; gap: 25px 14px; }.work-tile:nth-child(2) { margin-top: 14vw; }.work-tile:nth-child(3) { margin-top: -10vw; }.work-tile b { font-size: 14px; }.all-work-link { margin-top: 75px; gap: 25px; font-size: 18px; }.expertise { padding: 78px 20px; }.expertise-list { margin-top: 60px; }.expertise-list article { min-height: 176px; padding: 18px 0; grid-template-columns: 28px 1fr 30px; gap: 12px; }.expertise-list h3 { font-size: 35px; }.expertise-list p { grid-column: 2; margin: 3px 0 0; font-size: 12px; }.expertise-list i { grid-column: 3; grid-row: 1; width: 29px; height: 29px; font-size: 13px; }.shop-feature { display: flex; flex-direction: column; min-height: 0; }.shop-image { min-height: 470px; height: 100vw; }.shop-copy { min-height: 440px; padding: 76px 20px; }.shop-copy h2 { font-size: 55px; }.shop-copy > p:not(.section-kicker) { margin-top: 28px; font-size: 13px; }.outline-link { margin-top: 40px; }.contact-band { min-height: 500px; padding: 75px 20px; }.contact-band h2 { font-size: 52px; }.contact-band > a { margin-top: 56px; }.contact-band > img { width: 250px; right: -45px; bottom: -13%; }.portfolio-home footer { padding: 18px 20px; } }
@media (max-width: 700px) { .experience { padding: 78px 20px; }.experience-list { margin-top: 60px; }.experience-list article { grid-template-columns: 52px 1fr; gap: 14px; padding: 18px 0 24px; }.experience-list article > p:last-child { grid-column: 2; margin-top: 4px; font-size: 9px; }.experience-list div h3 { font-size: 31px; }.experience-list div span { font-size: 8px; }.intro-statement blockquote { margin-top: 34px; align-self: flex-start; font-size: 27px; } }

/* Reference-aligned direction: monumental type, cinematic imagery and black/coral chapters */
.portfolio-home .site-header { width: 100%; position: absolute; top: 0; left: 0; z-index: 30; color: #171514; background: transparent; border: 0; }
.portfolio-home .brand { width: 74px; }
.portfolio-home nav a { font-size: 11px; }
.portfolio-home nav a:first-child { color: inherit; }
.portfolio-home .site-header nav a:hover,
.portfolio-home .site-header nav a:focus-visible { color: #fff; }
.portfolio-home .site-header nav a:hover span,
.portfolio-home .site-header nav a:focus-visible span { color: #fff; }

.brand-hero { min-height: 100svh; padding: 110px clamp(24px, 4.1vw, 60px) 45px; display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate; color: #171514; background: var(--coral); }
.brand-hero:after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(224,82,61,.98) 0%, rgba(224,82,61,.42) 64%, rgba(224,82,61,.72) 100%); }
.hero-art { width: 100%; height: 100%; max-width: none; max-height: none; position: absolute; z-index: -2; inset: 0; overflow: hidden; background: var(--coral); }
.hero-art:before { display: none; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 43%; filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; opacity: .68; transform: scale(1.005); }
.brand-hero h1 { width: 100%; margin: 0; display: flex; justify-content: center; gap: .13em; position: relative; z-index: 2; font: 600 clamp(76px, 10.2vw, 165px)/.78 var(--sans); letter-spacing: -.09em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.brand-hero h1 span, .brand-hero h1 em { display: inline; }
.brand-hero h1 em { margin: 0; color: inherit; font: 500 clamp(79px, 10.6vw, 172px)/.74 var(--serif); letter-spacing: -.085em; }
.hero-role { position: absolute; z-index: 2; top: 37%; left: 50%; margin: 0; transform: translate(-50%, -50%); font: 600 clamp(16px, 1.8vw, 28px)/1 var(--sans); letter-spacing: -.04em; text-transform: uppercase; }
.hero-topline { width: auto; padding: 0; position: absolute; z-index: 2; right: clamp(24px, 4.1vw, 60px); bottom: 46px; left: clamp(24px, 4.1vw, 60px); border: 0; font-size: 10px; }
.hero-identity { padding: 0; position: absolute; z-index: 2; bottom: 44px; left: 50%; transform: translateX(-50%); }
.hero-identity .hero-arabic { display: none; }
.hero-identity > p:last-child { width: 310px; max-width: 310px; color: #171514; font: 500 10px/1.2 var(--mono); letter-spacing: .045em; text-align: center; text-transform: uppercase; }
.hero-scroll { display: none; }

.featured-work { padding: clamp(95px, 10vw, 155px) clamp(24px, 4.1vw, 60px) clamp(80px, 6vw, 100px); background: #000; }
.featured-work .section-header, .expertise .section-header, .experience .section-header, .recognition .section-header { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.featured-work .section-header h2, .expertise .section-header h2, .experience .section-header h2, .recognition .section-header h2 { max-width: 720px; justify-self: start; font: 500 clamp(30px, 3.2vw, 48px)/1.02 var(--sans); letter-spacing: -.06em; text-transform: uppercase; }
.feature-lead { margin-top: clamp(70px, 9vw, 135px); }
.feature-image { height: calc(100svh - 60px); min-height: 620px; border-radius: 18px; }
.feature-image img { object-position: center 45%; }
.feature-caption { padding: 22px 0 0; grid-template-columns: .17fr 1.2fr .4fr; border: 0; }
.feature-caption h3 { font-size: clamp(28px, 4.2vw, 66px); }
.work-grid { margin-top: 65px; display: grid; grid-template-columns: 1fr; gap: 15px; }
.work-tile, .work-tile:nth-child(2), .work-tile:nth-child(3) { height: 30vh; min-height: 270px; margin: 0; position: relative; overflow: hidden; border-radius: 12px; background: var(--coral); }
.work-tile img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; opacity: .88; transition: opacity .45s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.work-tile:hover img { opacity: .35; transform: scale(1.035); }
.work-tile span { padding: clamp(20px, 2.2vw, 34px); position: absolute; inset: 0; align-items: center; border: 0; }
.work-tile b { font: 500 clamp(32px, 5vw, 78px)/1 var(--arabic); letter-spacing: -.06em; }
.work-tile i { width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; border: 1px solid currentColor; border-radius: 50%; font-size: 15px; }
.all-work-link { margin-top: 75px; }

.expertise { padding: clamp(95px, 9vw, 145px) clamp(24px, 4.1vw, 60px) clamp(24px, 4vw, 60px); color: #f3f1ed; background: #000; }
.expertise .section-header h2 { color: #f3f1ed; }
.expertise-list { margin-top: clamp(70px, 9vw, 135px); display: grid; gap: 18px; border: 0; counter-reset: expertise; }
.expertise-list article { min-height: min(82svh, 820px); padding: clamp(28px, 4vw, 62px); display: grid; grid-template-columns: 80px 1fr; grid-template-rows: auto 1fr auto; align-items: start; gap: 12px 24px; isolation: isolate; overflow: hidden; color: #171514; background: linear-gradient(145deg, #f06b50, var(--coral) 48%, #bd3829); border: 0; border-radius: 18px; transition: background .5s cubic-bezier(.2,.7,.2,1), color .35s ease, padding .35s ease; }
.expertise-list article:before { position: absolute; z-index: -1; right: 4vw; bottom: -10%; color: rgba(0,0,0,.09); font: 500 min(42vw, 600px)/.8 var(--arabic); }
.expertise-list article:nth-child(1):before { content: 'ق'; }.expertise-list article:nth-child(2):before { content: 'ف'; }.expertise-list article:nth-child(3):before { content: 'ك'; }.expertise-list article:nth-child(4):before { content: 'ن'; }
.expertise-list article:hover { padding-left: clamp(28px, 4vw, 62px); color: #171514; background: #f1efed; }
.expertise-list article:hover:before { color: rgba(224,82,61,.12); }
.expertise-list span { color: #171514; font-size: 14px; }
.expertise-list h3 { grid-column: 1 / -1; align-self: center; margin: 0; font: 600 clamp(65px, 9vw, 142px)/.8 var(--sans); letter-spacing: -.095em; text-transform: uppercase; }
.expertise-list p { max-width: 340px; grid-column: 2; align-self: end; margin: 0; color: #2d1b18; font-size: 16px; }
.expertise-list i { grid-column: 1; grid-row: 3; align-self: end; justify-self: start; width: 52px; height: 52px; }

.experience { padding: clamp(95px, 10vw, 155px) clamp(24px, 4.1vw, 60px); color: #211f1e; background: #f1efed; }
.experience .section-kicker { color: #716c68; }
.experience-list { margin-top: clamp(70px, 9vw, 135px); border-color: #aaa7a2; }
.experience-list article { min-height: 150px; padding: 28px 0; color: #211f1e; border-color: #bdb9b4; }
.experience-list article:hover { color: var(--coral); }
.experience-list p { color: #716c68; }

.biography { padding: clamp(90px, 10vw, 150px) clamp(24px, 8vw, 125px); display: flex; flex-direction: column; color: #f3f1ed; background: linear-gradient(180deg, var(--coral) 0%, #000 88%); }
.bio-copy { width: min(100%, 920px); padding: 0; order: 1; align-self: center; }
.bio-copy .section-kicker { color: #41251f; }
.bio-copy h2 { max-width: 880px; font-size: clamp(58px, 8.5vw, 135px); text-align: center; text-transform: uppercase; }
.bio-copy h2 em { color: #f3f1ed; }
.bio-lead { margin-left: auto; margin-right: auto; text-align: center; }
.bio-columns { color: #f3f1ed; border-color: rgba(255,255,255,.3); }
.bio-columns p { color: rgba(255,255,255,.8); }
.bio-links { justify-content: center; }.bio-links a { border-color: currentColor; }

.recognition { padding: clamp(95px, 10vw, 155px) clamp(24px, 4.1vw, 60px); color: #f3f1ed; background: #000; }
.recognition .section-kicker { color: #aaa49e; }
.recognition-list { margin-top: clamp(70px, 9vw, 135px); border-top: 1px solid rgba(255,255,255,.22); }
.recognition-list article { min-height: 105px; padding: 28px 0; display: grid; grid-template-columns: .75fr 1.45fr .45fr; gap: 25px; align-items: start; border-bottom: 1px solid rgba(255,255,255,.22); }
.recognition-list span, .recognition-list time { font: 500 11px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.recognition-list p { margin: -5px 0 0; font-size: clamp(20px, 2vw, 30px); line-height: 1.12; letter-spacing: -.04em; }.recognition-list p em { color: var(--coral); }.recognition-list p b { font-family: var(--arabic); font-weight: 500; }
.recognition-list time { color: #aaa49e; text-align: right; }

.intro-statement { background: #f1efed; }

@media (max-width: 700px) {
  .portfolio-home .site-header { position: absolute; color: #171514; }.portfolio-home .brand { width: 62px; }.portfolio-home .menu-toggle { display: grid !important; visibility: visible; opacity: 1; position: fixed; z-index: 100; top: 15px; right: 20px; color: #f3f1ed; background: #171514; border: 0; }
  .brand-hero { min-height: 100svh; padding: 90px 20px 40px; }.hero-art { width: 100%; height: 100%; margin: 0; order: initial; }.hero-art img { object-position: center 44%; }.brand-hero h1 { max-width: 100%; margin: 0; display: block; order: initial; font-size: clamp(52px, 16.5vw, 76px); line-height: .8; white-space: normal; }.brand-hero h1 span, .brand-hero h1 em { display: block; }.brand-hero h1 em { margin: 0; font-size: clamp(54px, 17vw, 79px); }.hero-role { top: 35%; font-size: 13px; white-space: nowrap; }.hero-topline { right: 20px; bottom: 25px; left: 20px; font-size: 7px; }.hero-topline p:last-child { display: block; }.hero-identity { display: none; }
  .featured-work, .expertise, .experience, .recognition { padding-right: 20px; padding-left: 20px; }.featured-work .section-header, .expertise .section-header, .experience .section-header, .recognition .section-header { display: block; }.featured-work .section-header h2, .expertise .section-header h2, .experience .section-header h2, .recognition .section-header h2 { margin-top: 25px; font-size: 31px; }
  .feature-image { height: 64svh; min-height: 470px; border-radius: 12px; }.feature-caption { grid-template-columns: 28px 1fr; }.feature-caption > a { grid-column: 2; }.work-grid { margin-top: 55px; gap: 11px; }.work-tile, .work-tile:nth-child(2), .work-tile:nth-child(3) { height: 24vh; min-height: 190px; }.work-tile span { padding: 18px; }.work-tile b { font-size: clamp(24px, 8vw, 34px); }.work-tile i { width: 38px; height: 38px; font-size: 10px; }
  .expertise-list { margin-top: 58px; gap: 12px; }.expertise-list article { min-height: 70svh; padding: 26px 20px; grid-template-columns: 45px 1fr; }.expertise-list article:hover { padding-left: 20px; }.expertise-list h3 { font-size: clamp(49px, 15vw, 72px); }.expertise-list p { grid-column: 2; font-size: 13px; }.expertise-list i { width: 39px; height: 39px; }.expertise-list article:before { right: -4vw; font-size: 96vw; }
  .experience-list article { min-height: 0; grid-template-columns: 52px 1fr; }.biography { padding: 78px 20px; }.bio-copy { padding-bottom: 0; }.bio-copy h2 { font-size: 52px; }.bio-columns { color: #fff; }
  .recognition-list { margin-top: 58px; }.recognition-list article { min-height: 0; padding: 23px 0; grid-template-columns: 1fr auto; }.recognition-list p { grid-column: 1 / -1; grid-row: 2; font-size: 21px; }.recognition-list time { font-size: 8px; }.recognition-list span { font-size: 9px; }
}

/* Typography hierarchy matched to the reference portfolio */
html { font-size: 16px; }
body { font-family: var(--sans); font-size: 1rem; font-weight: 400; line-height: 1.75; letter-spacing: -.01em; }
h1 { font-family: var(--sans); font-size: 4.5rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
h2 { font-family: var(--sans); font-size: 3rem; font-weight: 400; line-height: 1.1; letter-spacing: -.03em; }
h3 { font-family: var(--sans); font-size: 1.7rem; font-weight: 300; line-height: 1.3; letter-spacing: -.03em; }
h4 { font-family: var(--sans); font-size: 1.5rem; font-weight: 400; line-height: 1.3; letter-spacing: -.02em; }
h5 { font-family: var(--sans); font-size: 1rem; font-weight: 400; line-height: 1.3; letter-spacing: -.02em; }
h6, .section-kicker { font-family: var(--sans); font-size: .75rem; font-weight: 500; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
strong, b { font-family: var(--sans); font-weight: 600; }
em, i { font-family: var(--sans); font-style: italic; }
.hero-arabic, [lang="ar"] { font-family: var(--arabic); }

.portfolio-home nav { font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 24px; letter-spacing: -.01em; text-transform: none; }
.portfolio-home nav a { font-size: inherit; }
.hero-role { font: 700 clamp(15px, 2vw, 32px)/1.1 var(--sans); letter-spacing: -.03em; }
.brand-hero h1 { font: 700 clamp(76px, 12vw, 250px)/.85 var(--sans); letter-spacing: -.03em; }
.brand-hero h1 em { font: inherit; font-style: normal; letter-spacing: inherit; }
.hero-topline, .hero-identity > p:last-child { font-family: var(--sans); font-size: .75rem; font-weight: 500; line-height: 1.3; letter-spacing: .04em; }

.featured-work .section-header h2, .expertise .section-header h2, .experience .section-header h2, .recognition .section-header h2 { font: 400 clamp(30px, 6vw, 45px)/1.1 var(--sans); letter-spacing: -.03em; }
.feature-caption h3 { font-family: var(--arabic); font-size: clamp(32px, 4.5vw, 72px); font-weight: 500; line-height: 1.1; }
.feature-caption div p { font-size: 1rem; line-height: 1.75; }
.work-tile b { font-family: var(--arabic); }
.expertise-list h3 { font: 700 clamp(64px, 8vw, 90px)/.85 var(--sans); letter-spacing: -.03em; }
.expertise-list p { font-size: 1rem; line-height: 1.75; }
.experience-list div h3 { font: 300 clamp(27px, 2.2vw, 34px)/1.3 var(--sans); letter-spacing: -.03em; }
.experience-list article > p:last-child { font-family: var(--sans); font-size: .8rem; line-height: 1.5; }
.bio-copy h2 { font: 700 clamp(68px, 11vw, 200px)/.9 var(--sans); letter-spacing: -.03em; }
.bio-copy h2 em { font: inherit; font-style: italic; }
.bio-lead { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; }
.bio-columns p { font-size: 1rem; line-height: 1.75; }
.bio-links a, .recognition-list span, .recognition-list time { font-family: var(--sans); }
.recognition-list p { font: 300 clamp(27px, 2.2vw, 34px)/1.3 var(--sans); letter-spacing: -.03em; }
.recognition-list p b { font-family: var(--arabic); }
.statement-copy { font: 400 clamp(48px, 6vw, 96px)/1.1 var(--sans); letter-spacing: -.03em; }
.statement-copy em { font: inherit; font-style: italic; }
.shop-copy h2 { font: 400 clamp(48px, 6vw, 96px)/1.1 var(--sans); letter-spacing: -.03em; }.shop-copy > p:not(.section-kicker) { font-size: 1rem; line-height: 1.75; }
.contact-band h2 { font: 700 clamp(68px, 11vw, 180px)/.9 var(--sans); letter-spacing: -.03em; text-transform: uppercase; }.contact-band h2 em { font: inherit; font-style: italic; }

@media (max-width: 700px) {
  body { font-size: 1rem; line-height: 1.75; }
  .portfolio-home nav a { font-size: clamp(34px, 10vw, 48px); line-height: 1.1; }
  .brand-hero h1 { font-size: clamp(54px, 17vw, 82px); line-height: .85; }.brand-hero h1 em { font-size: inherit; }
  .hero-role { font-size: 15px; }.hero-topline { font-size: 9px; }
  .featured-work .section-header h2, .expertise .section-header h2, .experience .section-header h2, .recognition .section-header h2 { font-size: 30px; line-height: 1.1; }
  .feature-caption div p, .expertise-list p, .bio-columns p, .shop-copy > p:not(.section-kicker) { font-size: 1rem; line-height: 1.75; }
  .expertise-list h3 { font-size: clamp(52px, 16vw, 78px); line-height: .85; }
  .bio-copy h2 { font-size: clamp(54px, 17vw, 82px); line-height: .9; }.bio-lead { font-size: 22px; line-height: 1.25; }
  .statement-copy { font-size: clamp(44px, 13vw, 64px); line-height: 1.05; }
  .shop-copy h2 { font-size: clamp(48px, 14vw, 68px); line-height: 1; }
  .contact-band h2 { font-size: clamp(54px, 17vw, 82px); line-height: .9; }
}

/* Selected work: quiet editorial cards with uncropped artwork */
.feature-image { height: auto; min-height: 0; aspect-ratio: 16 / 9; display: grid; place-items: center; padding: clamp(14px, 2vw, 30px); background: #171615; border-radius: 8px; }
.feature-image:after { display: none; }
.feature-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }
.feature-image:hover img { transform: none; }
.feature-caption { padding-top: 18px; border-top: 0; }

.work-grid { margin-top: clamp(70px, 8vw, 120px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.work-tile, .work-tile:nth-child(2), .work-tile:nth-child(3) { height: auto; min-height: 0; margin: 0; display: flex; flex-direction: column; overflow: visible; color: #f3f1ed; background: transparent; border-radius: 0; }
.work-tile img { width: 100%; height: auto; aspect-ratio: 1 / 1; padding: clamp(9px, 1vw, 15px); object-fit: contain; object-position: center; opacity: 1; background: #e8e4df; border-radius: 6px; transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s ease; }
.work-tile:hover img { opacity: 1; background: #f3f1ed; transform: translateY(-5px); }
.work-tile span { padding: 16px 0 0; position: static; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; color: #f3f1ed; border-top: 0; }
.work-tile b { font: 500 clamp(18px, 1.55vw, 24px)/1.4 var(--arabic); letter-spacing: -.03em; }
.work-tile i { width: auto; height: auto; display: inline; flex: 0 0 auto; color: #9d9791; border: 0; border-radius: 0; font: 500 .75rem/1.3 var(--sans); letter-spacing: .04em; }

/* Selected work: staggered eight-piece gallery supplied by Qalamhasan. */
.featured-work .work-grid {
  margin: clamp(70px, 8vw, 120px) clamp(0px, 8.3vw, 160px) 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(36px, 2.3vw, 46px) clamp(18px, 1.5vw, 30px);
}
.featured-work .work-tile,
.featured-work .work-tile:nth-child(2),
.featured-work .work-tile:nth-child(3) {
  height: auto;
  min-height: 0;
  margin: 0;
  display: block;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
.featured-work .work-tile:nth-child(even) { margin-top: clamp(38px, 4.2vw, 66px); }
.featured-work .work-tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  display: block;
  padding: 0;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  background: transparent;
  border-radius: 0;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.featured-work .work-tile:hover img { opacity: 1; background: transparent; filter: brightness(1.06); transform: translateY(-7px); }

@media (max-width: 1100px) {
  .featured-work .work-grid { margin-inline: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .feature-image { min-height: 0; height: auto; aspect-ratio: 1 / 1; padding: 12px; }.feature-caption { padding-top: 14px; }
  .featured-work .work-grid { margin-top: 62px; grid-template-columns: 1fr; gap: 28px; }
  .featured-work .work-tile:nth-child(even) { margin-top: 0; }
}

/* Expertise: slimmer editorial panels with a denser, more balanced composition. */
.expertise-list { gap: 14px; }
.expertise-list article {
  min-height: clamp(360px, 46svh, 480px);
  padding: clamp(28px, 3vw, 46px);
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 8px 22px;
  border-radius: 12px;
  background: linear-gradient(125deg, #f06b50 0%, var(--coral) 58%, #c93b2d 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: background .5s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.expertise-list article:hover {
  padding-left: clamp(28px, 3vw, 46px);
  background: #f1efed;
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(23,21,20,.08), 0 12px 34px rgba(0,0,0,.16);
}
.expertise-list article:before { right: 3vw; bottom: -18%; font-size: min(30vw, 390px); }
.expertise-list span { font-size: 12px; }
.expertise-list h3 {
  max-width: 900px;
  font-size: clamp(54px, 6.2vw, 94px);
  line-height: .84;
}
.expertise-list p { max-width: 430px; font-size: .95rem; line-height: 1.5; }
.expertise-list i { width: 44px; height: 44px; }

@media (max-width: 700px) {
  .expertise-list { gap: 10px; }
  .expertise-list article {
    min-height: clamp(340px, 52svh, 430px);
    padding: 24px 20px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px 14px;
    border-radius: 10px;
  }
  .expertise-list article:hover { padding-left: 20px; transform: none; }
  .expertise-list article:before { right: -6vw; bottom: -8%; font-size: 74vw; }
  .expertise-list h3 { font-size: clamp(42px, 13vw, 58px); line-height: .86; }
  .expertise-list p { grid-column: 2; font-size: .88rem; line-height: 1.5; }
  .expertise-list i { width: 36px; height: 36px; }
}

.biography .bio-columns span[lang="ar"] { color: inherit; }
.biography .bio-inline-photo {
  width: clamp(160px, 14vw, 200px);
  aspect-ratio: 1 / 1;
  margin: clamp(38px, 5vw, 58px) auto 0;
  overflow: hidden;
  background: #171313;
  border-radius: 50%;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
.biography .bio-inline-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 42%; }
.biography .bio-inline-photo + .bio-lead { margin-top: clamp(28px, 3.5vw, 42px); }
.biography .bio-links { margin-top: 42px; justify-content: center; gap: 12px; }
.biography .bio-links a {
  width: 50px;
  height: 50px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #f3f1ed;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  transition: color .28s ease, background-color .28s ease, border-color .28s ease, transform .28s cubic-bezier(.2,.7,.2,1);
}
.biography .bio-links a:hover,
.biography .bio-links a:focus-visible {
  color: var(--coral);
  background: #f3f1ed;
  border-color: #f3f1ed;
  transform: translateY(-4px);
}
.biography .bio-links a:focus-visible { outline: 2px solid #f3f1ed; outline-offset: 4px; }
.biography .bio-links svg { width: 21px; height: 21px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.biography .bio-links svg .icon-fill { fill: currentColor; stroke: none; }

@media (max-width: 700px) {
  .biography .bio-inline-photo { width: 148px; margin-top: 34px; }
  .biography .bio-inline-photo + .bio-lead { margin-top: 26px; }
  .biography .bio-links { margin-top: 34px; gap: 10px; }
  .biography .bio-links a { width: 44px; height: 44px; }
  .biography .bio-links svg { width: 19px; height: 19px; }
}

@media (hover: hover) and (pointer: fine) {
  .hero-particles { width: 100%; height: 100%; position: absolute; z-index: 3; inset: 0; pointer-events: none; }
  .site-cursor { --cursor-ring-base: #fff; --cursor-dot-base: #000; --cursor-ring: var(--cursor-ring-base); --cursor-dot: var(--cursor-dot-base); width: 28px; height: 28px; display: block; position: fixed; z-index: 9999; top: 0; left: 0; pointer-events: none; opacity: 0; border: 1px solid var(--cursor-ring); border-radius: 50%; transform: translate(-50%, -50%) scale(.72); transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease; }
  .site-cursor:after { content: ''; width: 4px; height: 4px; position: absolute; top: 50%; left: 50%; background: var(--cursor-dot); border-radius: 50%; transform: translate(-50%, -50%); transition: width .2s cubic-bezier(.2,.8,.2,1), height .2s cubic-bezier(.2,.8,.2,1), background-color .2s ease; }
  .site-cursor[data-theme="orange"] { --cursor-ring-base: #fff; --cursor-dot-base: #000; }
  .site-cursor[data-theme="light"] { --cursor-ring-base: var(--coral); --cursor-dot-base: #000; }
  .site-cursor[data-theme="dark"] { --cursor-ring-base: #fff; --cursor-dot-base: var(--coral); }
  .site-cursor.is-pressed { --cursor-ring: var(--cursor-dot-base); --cursor-dot: var(--cursor-ring-base); transform: translate(-50%, -50%) scale(.82); }
  .site-cursor.is-pressed:after { width: 7px; height: 7px; }
  .site-cursor.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  html.custom-cursor-active, html.custom-cursor-active * { cursor: none !important; }
  .brand-hero h1 { width: calc(100% + 160px); max-width: none; margin-inline: -80px; padding-inline: 80px; --reveal-x: 50%; --reveal-y: 50%; }
  .hero-role { --reveal-x: 50%; --reveal-y: 50%; }
  .brand-hero h1.cursor-reveal, .hero-role.cursor-reveal {
    -webkit-mask-image: radial-gradient(circle 330px at var(--reveal-x) var(--reveal-y), transparent 0 58%, rgba(0,0,0,.04) 68%, rgba(0,0,0,.35) 82%, #000 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: radial-gradient(circle 330px at var(--reveal-x) var(--reveal-y), transparent 0 58%, rgba(0,0,0,.04) 68%, rgba(0,0,0,.35) 82%, #000 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
}
@media (hover: none), (pointer: coarse) { .hero-particles, .site-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-particles { display: none; }.site-cursor { transition: none; } }

@media (max-width: 700px) {
  .brand-hero .hero-role { top: 16%; transform: translate(-50%, -50%); }
  .brand-hero h1 { width: auto; max-width: none; padding: 0; position: absolute; top: auto; right: 20px; bottom: 12%; left: 20px; display: flex; justify-content: center; gap: .14em; font-size: clamp(42px, 12vw, 58px); line-height: 1; white-space: nowrap; }
  .brand-hero h1 span, .brand-hero h1 em { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
  .brand-hero .hero-art img { object-position: center 42%; }
}

@media (min-width: 701px) {
  .brand-hero .hero-role { transform: translateY(-50%); text-align: left; }
}

@media (min-width: 701px) { .brand-hero .hero-art img { object-position: center calc(43% + var(--hero-parallax, 0%)); transform: none; will-change: object-position; } }
@media (prefers-reduced-motion: reduce) { .brand-hero .hero-art img { transform: none; will-change: auto; } }

/* Minimal shop holding page. */
.shop-page { overflow: hidden; background: #000; }
.shop-page main { min-height: 100svh; }
.shop-coming-soon { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); background: #000; }
.shop-coming-media { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #f3f1ed; }
.shop-coming-media img { width: 100%; height: 100%; display: block; padding: clamp(18px, 3vw, 54px); object-fit: contain; object-position: center; animation: rise-in .9s cubic-bezier(.2,.7,.2,1) both; }
.shop-coming-copy { min-width: 0; display: grid; place-items: center; padding: clamp(32px, 6vw, 100px); color: #f3f1ed; background: var(--coral); }
.shop-coming-copy h1 { width: 100%; max-width: none; margin: 0; font: 700 clamp(62px, 6.2vw, 118px)/.82 var(--sans); letter-spacing: -.065em; text-align: center; text-transform: uppercase; white-space: nowrap; animation: rise-in .8s .15s cubic-bezier(.2,.7,.2,1) both; }

@media (max-width: 700px) {
  .shop-page { overflow: auto; }
  .shop-coming-soon { grid-template-columns: 1fr; grid-template-rows: minmax(0, 64svh) minmax(230px, 36svh); }
  .shop-coming-media img { padding: 16px; }
  .shop-coming-copy { padding: 28px 20px; }
  .shop-coming-copy h1 { font-size: clamp(58px, 18vw, 86px); line-height: .8; }
}

/* Shop header mirrors the portfolio header exactly. */
.shop-page .site-header { width: 100%; height: 82px; padding: 18px clamp(24px, 3.5vw, 58px); position: absolute; z-index: 30; top: 0; left: 0; color: #171514; background: transparent; border: 0; animation: none; }
.shop-page .brand { width: 74px; }
.shop-page nav { gap: clamp(21px, 2.6vw, 42px); font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 24px; letter-spacing: -.01em; text-transform: none; }
.shop-page nav a { font-size: inherit; }
.shop-page .site-header nav a:hover,
.shop-page .site-header nav a:focus-visible { color: #fff; }
.shop-page .site-header nav a:hover span,
.shop-page .site-header nav a:focus-visible span { color: #fff; }

@media (max-width: 700px) {
  .shop-page .site-header { height: 73px; padding: 16px 20px; }
  .shop-page .brand { width: 62px; }
  .shop-page .menu-toggle { display: grid !important; visibility: visible; opacity: 1; position: fixed; z-index: 100; top: 15px; right: 20px; color: #f3f1ed; background: #171514; border: 0; }
  .shop-page nav { top: 72px; gap: 20px; }
  .shop-page nav a { font-size: clamp(34px, 10vw, 48px); line-height: 1.1; }
}

/* Navigation type reduced by 30% across both pages. */
.portfolio-home nav,
.shop-page nav { font-size: 11.9px; }

@media (max-width: 700px) {
  .portfolio-home nav a,
  .shop-page nav a { font-size: clamp(24px, 7vw, 34px); }
}

/* Header logo: 20% larger with a white interactive state. */
.portfolio-home .brand,
.shop-page .brand { width: 89px; }
.portfolio-home .brand img,
.shop-page .brand img { transition: filter .28s ease; }
.portfolio-home .brand:hover img,
.portfolio-home .brand:focus-visible img,
.shop-page .brand:hover img,
.shop-page .brand:focus-visible img { filter: brightness(0) invert(1); }
.portfolio-home .brand:focus-visible,
.shop-page .brand:focus-visible { outline: none; }

@media (max-width: 700px) {
  html { scroll-padding-top: 73px; }
  .portfolio-home .brand,
  .shop-page .brand { width: 74px; }
  .portfolio-home .site-header,
  .shop-page .site-header {
    width: 100%;
    max-width: 100vw;
    position: -webkit-sticky !important;
    position: sticky !important;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    color: #f3f1ed;
    background: #000;
  }
  .portfolio-home .brand img,
  .shop-page .brand img { filter: brightness(0) invert(1); }
  .portfolio-home .brand,
  .shop-page .brand { flex: 0 0 auto; }
  .portfolio-home .menu-toggle,
  .shop-page .menu-toggle {
    position: relative !important;
    z-index: 2;
    top: auto !important;
    right: auto !important;
    margin-left: auto;
    color: #f3f1ed;
    background: transparent;
  }
  .portfolio-home nav,
  .shop-page nav { color: #171514; background: var(--coral); }
  .portfolio-home .site-header nav a:hover,
  .portfolio-home .site-header nav a:focus-visible,
  .shop-page .site-header nav a:hover,
  .shop-page .site-header nav a:focus-visible { color: #171514; }
  .portfolio-home nav span,
  .shop-page nav span,
  .portfolio-home .site-header nav a:hover span,
  .portfolio-home .site-header nav a:focus-visible span,
  .shop-page .site-header nav a:hover span,
  .shop-page .site-header nav a:focus-visible span { color: #fff; }
}

/* Mobile hero composition matched to the supplied portrait reference. */
@media (max-width: 700px) {
  .portfolio-home .brand-hero { min-height: calc(100svh - 73px); padding: 20px 20px 24px; overflow: hidden; }
  .portfolio-home .brand-hero .hero-role {
    width: auto;
    top: 18%;
    right: 15px;
    left: auto !important;
    transform: none;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: clamp(13px, 3.8vw, 16px);
    line-height: 1;
    white-space: nowrap;
  }
  .portfolio-home .brand-hero h1 {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0;
    position: absolute;
    z-index: 4;
    top: auto;
    right: 20px;
    bottom: 10%;
    left: 20px;
    display: block;
    font-size: clamp(58px, 18vw, 86px);
    line-height: .78;
    white-space: normal;
  }
  .portfolio-home .brand-hero h1 span,
  .portfolio-home .brand-hero h1 em { display: block; margin: 0; font-size: inherit; line-height: inherit; }
  .portfolio-home .brand-hero h1 span { text-align: left; }
  .portfolio-home .brand-hero h1 em { text-align: right; }
  .portfolio-home .brand-hero .hero-art { inset: 0; }
  .portfolio-home .brand-hero .hero-art img {
    object-position: center 39%;
    transform: scale(1.18);
    transform-origin: center center;
  }
  .portfolio-home .hero-topline { right: 20px; bottom: 24px; left: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; font-size: 8px; }
  .portfolio-home .hero-topline p:first-child { max-width: 62%; }
  .portfolio-home .hero-topline p:last-child { display: block; flex: 0 0 auto; text-align: right; }
}