:root{color-scheme:light;--bg:#f5eee4;--panel:#eee2d3;--text:#342518;--soft:#64503e;--gold:#765339;--line:#cab29a;--gutter:clamp(22px,5vw,78px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,summary{cursor:pointer}a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}.skip{position:absolute;left:1rem;top:1rem;transform:translateY(-200%);background:var(--text);color:var(--bg);padding:12px;z-index:2}.skip:focus{transform:none}.wrap{width:min(100% - 2 * var(--gutter), 1440px);margin-inline:auto}.mast,.footer{display:flex;align-items:center;justify-content:space-between}.mast{min-height:99px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font-size:10px;line-height:1.2;font-weight:bold;letter-spacing:.17em}.mast nav{display:flex;align-items:center;gap:clamp(12px,3vw,42px);font-size:14px}.mast nav>a:hover,.footer a:hover{color:var(--gold)}.pill{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:1px solid #786958;border-radius:100px;padding:13px 19px;font-size:14px;white-space:nowrap}.pill span{color:var(--gold)}.primary{background:#674831;color:#fff8ed;border-color:#674831;font-weight:700;padding:16px 23px}.primary span{color:inherit}.primary:hover{background:#513622}.meta{font-size:11px;text-transform:uppercase;letter-spacing:.16em;line-height:1.5}h1,h2,h3,p{margin:0}h1,h2{font-weight:400;letter-spacing:-.068em}h1{font-size:clamp(48px,10vw,148px);line-height:.96;margin-block:clamp(45px,6vw,83px) clamp(33px,5vw,62px)!important}em{font-family:Georgia,'Times New Roman',serif;color:var(--gold);font-weight:400}.disciplines{border-block:1px solid var(--line);background:var(--panel)}.disciplines>div{display:flex;align-items:center;justify-content:space-between;gap:13px;padding-block:20px;color:var(--soft)}.disciplines b,.index{color:var(--gold)}.section{padding-block:clamp(56px,8vw,116px)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:34px}.index{margin-bottom:18px}h2{font-size:clamp(44px,7.5vw,106px);line-height:1.02}.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 23px}.project a{display:block}.project img{display:block;width:100%;height:auto;aspect-ratio:1.78;background:var(--panel);object-fit:cover;border:1px solid var(--line);border-radius:6px;transition:border-color .2s}.project a:hover img{border-color:var(--gold)}.caption{padding-block:17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.caption p{color:var(--soft)}.caption h3{font-size:clamp(21px,3vw,35px);font-weight:400;letter-spacing:-.045em;margin-top:5px}.arrow{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--gold)}.project a:hover .arrow{background:var(--gold);color:var(--bg)}.about{background:var(--panel);border-block:1px solid var(--line)}.split{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}.bio p+p{margin-top:14px}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}.facts div{border-top:1px solid var(--line);padding-top:17px}.facts strong,.facts span{display:block}.facts strong{font:clamp(22px,4vw,48px) Georgia,serif;color:var(--gold)}.facts span{margin-top:6px;color:var(--soft);font-size:13px}.skills details{border-bottom:1px solid var(--line)}.skills details:first-child{border-top:1px solid var(--line)}.skills summary{list-style:none;display:flex;align-items:center;gap:24px;padding-block:19px;font-size:clamp(20px,2.5vw,30px)}.skills summary::-webkit-details-marker{display:none}.skills summary span{color:var(--gold);font:11px Arial,sans-serif;letter-spacing:.16em}.skills summary::after{content:'+';margin-left:auto;color:var(--gold)}.skills details[open] summary::after{content:'−'}.skills details p{padding:0 0 22px 38px;color:var(--soft);line-height:1.5}.contact{border-top:1px solid var(--line);background:radial-gradient(ellipse at 15% 100%,#dfc9af 0,transparent 75%),var(--panel)}.contact p:not(.index){margin-top:15px}.contact .pill{margin-top:24px}.footer{padding-block:25px;color:var(--soft);gap:12px}dialog{width:min(920px,calc(100% - 26px));max-height:calc(100% - 26px);padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text)}dialog::backdrop{background:#000c}.dialog-inner{position:relative}.dialog-text{padding:clamp(22px,5vw,48px);padding-right:60px}.dialog-text h2{font-size:clamp(38px,7vw,72px)}.dialog-text>p:last-child{margin-top:14px;max-width:580px}.dialog-inner>img{display:block;width:100%;height:auto}.close{position:absolute;top:13px;right:13px;border-radius:50%;width:38px;height:38px;font-size:24px;background:var(--bg);color:var(--text);border:1px solid var(--line)}
@media(max-width:680px){.mast{min-height:75px}.mast nav{font-size:12px}.mast .pill{font-size:12px;gap:5px;padding:8px 10px}.brand img{width:34px;height:34px}.brand span{display:none}.disciplines>div{display:grid;grid-template-columns:1fr auto 1fr;text-align:center;font-size:9px}.disciplines b:nth-of-type(2){display:none}.section-head,.split{display:block}.aside,.bio{margin-top:12px}.projects{grid-template-columns:1fr;gap:24px}.facts{gap:10px}.footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.pill svg,.footer svg{vertical-align:middle}.experience{border-top:1px solid var(--line)}.timeline{list-style:none;padding:0;margin:0}.timeline li{display:grid;grid-template-columns:minmax(92px,1fr) 3fr;gap:14px;border-top:1px solid var(--line);padding-block:20px}.timeline li:last-child{border-bottom:1px solid var(--line)}.timeline .meta{color:var(--gold);padding-top:4px}.timeline h3{font-size:clamp(20px,3vw,30px);font-weight:400;letter-spacing:-.045em}.timeline p{color:var(--soft);margin-top:6px;line-height:1.4}.contact-links{display:flex;gap:12px;flex-wrap:wrap}

.language{display:inline-flex;align-items:center;justify-content:center;min-height:36px;color:var(--gold);border-bottom:1px solid var(--line);white-space:nowrap}
.language[lang="ar"],[dir="rtl"] body,[dir="rtl"] em{font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif}
.language[lang="en"]{font-family:Arial,Helvetica,sans-serif}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .meta,[dir="rtl"] .brand{letter-spacing:0}
[dir="rtl"] h1,[dir="rtl"] h2{line-height:1.25}
[dir="rtl"] h1{font-size:clamp(40px,8vw,115px)}
[dir="rtl"] em{font-style:normal}
[dir="rtl"] .brand{font-size:13px;line-height:1.4}

[dir="rtl"] .arrow svg,[dir="rtl"] .mast .pill svg{transform:scaleX(-1)}
[dir="rtl"] .facts strong{font:inherit;font-size:clamp(20px,3.6vw,46px)}
[dir="rtl"] .skills summary::after{margin-left:0;margin-inline-start:auto}
[dir="rtl"] .skills details p{padding-left:0;padding-inline-start:38px}
[dir="rtl"] .close{right:auto;inset-inline-end:13px}
[dir="rtl"] .dialog-text{padding-right:clamp(22px,5vw,48px);padding-inline-end:60px}
@media(max-width:680px){
  .mast nav{gap:clamp(9px,2.5vw,18px)}

}

/* The forest uses the cover's artwork. The text and frame adapt to each language. */
.cover {
  --cover-paper: #e8d7c3;
  --cover-light: to right;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: clamp(560px, 57vw, 780px);
  overflow: hidden;
  background: var(--cover-paper);
  color: #342316;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, #e8d7c377, transparent 24%),
    linear-gradient(var(--cover-light), #e8d7c3db, #e8d7c3b8 37%, #e8d7c357 59%, transparent 88%);
  pointer-events: none;
}
.cover::after {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.4vw, 20px);
  border: 1px solid #966d4cb3;
  pointer-events: none;
}
.cover-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}
[dir="rtl"] .cover { --cover-light: to left; }
[dir="rtl"] .cover-art { transform: scaleX(-1); }
.cover-meta {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.2vw, 32px);
  margin: clamp(28px, 3.6vw, 49px) clamp(26px, 4vw, 61px) 0;
  font: 500 clamp(10px, 1.1vw, 15px)/1.4 Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .26em;
}
.cover-rule { flex: 1; height: 1px; background: #966d4caa; }
.cover-copy {
  align-self: center;
  justify-self: start;
  max-width: 66%;
  padding-block: 40px 48px;
  margin-inline-start: clamp(31px, 7.1vw, 110px);
}
.cover h1 {
  margin: 0;
  font: 400 clamp(64px, 8.9vw, 136px)/.86 "Times New Roman", Georgia, serif;
  letter-spacing: -.053em;
  text-transform: uppercase;
}
.cover-title {
  margin-block-start: clamp(21px, 3vw, 40px);
  font: 500 clamp(12px, 1.4vw, 20px)/1.4 Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .23em;
}
.cover-title::before {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  margin-block-end: 14px;
  background: #966d4c;
}
.cover-focus {
  margin-block-start: 14px;
  font: 500 clamp(10px, .96vw, 14px)/1.55 Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.cover-action {
  margin-block-start: 25px;
  background: #f5eee4c4;
  border-color: #8c6648;
  font-weight: 700;
}
.cover-action:hover { background: #fff9ef; }
[dir="rtl"] .cover-meta,
[dir="rtl"] .cover-title,
[dir="rtl"] .cover-focus { font-family: inherit; letter-spacing: 0; }
[dir="rtl"] .cover h1 {
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  font-size: clamp(59px, 8.7vw, 128px);
  line-height: 1.08;
  letter-spacing: 0;
}
@media (max-width: 680px) {
  .cover { min-height: 630px; }
  .cover-meta { letter-spacing: .15em; }
  .cover::before {
    background: linear-gradient(to bottom, #e8d7c3e6 0%, #e8d7c3c7 38%, #e8d7c37a 60%, transparent 91%);
  }
  .cover-copy {
    align-self: start;
    max-width: calc(100% - 62px);
    padding-block-start: 59px;
    padding-block-end: 155px;
  }
  .cover h1 { font-size: clamp(48px, 11vw, 74px); }
  [dir="rtl"] .cover h1 { font-size: clamp(52px, 12vw, 78px); }
}

.aside,.bio p,.dialog-text>p:last-child,.contact p{color:var(--soft);font-size:clamp(16px,1.55vw,20px);line-height:1.55;max-width:470px}

.editorial h2, .practice h2, .closing h2, .closing h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.05em;
}
[dir="rtl"] :is(.editorial,.practice,.closing) :is(h2,h3) {
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}
.about.editorial { background: transparent; border: 0; padding-block: 62px 44px; }
.about .split { align-items: start; gap: clamp(28px, 7vw, 105px); }
.about h2 { font-size: clamp(43px, 5.5vw, 82px); max-width: 12ch; }
[dir="rtl"] .about h2 { max-width: 16ch; }
#work { border-top: 1px solid var(--line); padding-block-start: 52px; }
#work h2 { font-size: clamp(46px, 6.4vw, 97px); }
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #171723;
  color: #fff7eb;
}
.showcase-image { display: block; width: 100%; height: auto; }
.showcase-copy { align-self: center; padding: clamp(27px, 4vw, 60px); }
.showcase-index { color: #e3b88b; }
.showcase h3 {
  margin-block: 13px 4px;
  font: 400 clamp(53px, 6.2vw, 98px)/1 Georgia, serif;
  letter-spacing: -.05em;
}
[dir="rtl"] .showcase h3 { line-height: 1.15; }
.showcase-credit { font-size: 13px; color: #ebc9a6; }
.showcase-description { margin-block: 18px 22px; color: #f0e4d6; line-height: 1.65; }
.showcase-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  border-bottom: 1px solid #e3b88b;
  font-size: 14px;
}
.showcase-link:hover { color: #e3b88b; }
[dir="rtl"] .showcase-link svg { transform: scaleX(-1); }
.archive { margin-top: 56px; }
.archive-title { margin-bottom: 18px; font: 400 clamp(22px, 2.5vw, 32px)/1.3 Georgia, serif; }
.archive .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.archive .project img { border-radius: 0; }
.archive .project > a > img { aspect-ratio: auto; }
.archive .caption { gap: 10px; }
.archive .caption h3 { font-size: clamp(17px, 2vw, 29px); }
.archive .arrow { flex: 0 0 34px; height: 34px; }
.practice { background: var(--panel); border-block: 1px solid var(--line); }
.practice-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 6vw, 86px); }
.practice h2 { font-size: clamp(35px, 4.2vw, 64px); margin-block-end: 26px; }
.practice .skills summary { font-size: clamp(16px, 1.85vw, 25px); gap: 14px; }
.practice .timeline h3 { font-size: clamp(17px, 2vw, 24px); }
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #43261d;
  background: #f3e9dc;
  padding-block: clamp(58px, 8vw, 105px);
}
.closing-art { position: absolute; z-index: -1; pointer-events: none; opacity: .62; }
.closing-forest {
  bottom: 0;
  inset-inline-end: 0;
  width: min(51%, 650px);
  height: 96%;
  mask-image: linear-gradient(to left, #000, transparent), linear-gradient(to bottom, transparent, #000 25%);
  mask-composite: intersect;
}
.closing-branch {
  bottom: 0;
  inset-inline-start: 0;
  width: min(13%, 150px);
  height: 68%;
  mask-image: linear-gradient(to right, #000, transparent);
}
[dir="rtl"] .closing-art { transform: scaleX(-1); }
.closing-grid { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.closing-thanks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 22px clamp(24px, 5vw, 72px);
  border-inline-end: 1px solid #aa8a71;
}
.closing h2 {
  color: #45251d;
  font-size: clamp(43px, 7vw, 96px);
  line-height: 1;
}
.closing-thanks > p { margin-top: 25px; line-height: 1.55; }
.closing-connect { padding: 22px clamp(24px, 5vw, 75px); }
.closing h3 { font-size: clamp(32px, 4.2vw, 62px); line-height: 1.08; }
.closing h3::after { content: ""; display: block; height: 1px; width: 52px; background: #a3846a; margin-block: 15px 20px; }
.closing .pill:not(.primary) { background: #fbf4e9; }
.closing .pill:not(.primary):hover { background: #e9d7c3; }
.closing-location { margin-top: 17px; color: #543d31; font-size: 14px; }
.closing-name { margin-top: 32px; font: italic clamp(24px, 3.3vw, 45px)/1.1 Georgia, serif; }
[dir="rtl"] .closing-name { font: inherit; font-size: clamp(24px, 3.3vw, 45px); }
.closing-title { margin-top: 8px; }
@media (max-width: 680px) {
  .about .split { display: block; }
  .archive .projects, .practice-grid, .closing-grid { grid-template-columns: 1fr; }
  .closing-thanks { border-inline-end: 0; border-bottom: 1px solid #aa8a71; padding-block: 0 36px; }
  .closing-connect { padding-block: 36px 0; }
  .closing-forest { height: 54%; width: 75%; opacity: .47; }
  .closing-branch { height: 47%; bottom: 42%; }
}
.closing .contact-links .pill {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}
.closing .contact-links .pill span { color: inherit; }
.closing .contact-links .pill bdi {
  max-width: 100%;
  overflow-wrap: anywhere;
  font: 12px/1.4 Arial, Helvetica, sans-serif;
}


@media (max-width: 560px) {
  .mast { gap: 12px; }
  .mast nav { flex-wrap: wrap; justify-content: flex-end; padding-block: 10px; }
}
.project-page {
  max-width: 1040px;
}
.project-page h1 {
  margin-block: 22px;
  font: 400 clamp(50px, 8vw, 106px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: -.05em;
}
[dir="rtl"] .project-page h1 {
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  line-height: 1.2;
  letter-spacing: 0;
}
.project-back {
  display: inline-block;
  color: var(--gold);
  font-size: 14px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
}
.project-back:hover, .mast [aria-current="page"] { text-decoration: underline; }
.project-page-intro {
  max-width: 58ch;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
  color: var(--soft);
}
.campaign-gallery { display: grid; gap: clamp(34px, 6vw, 84px); }
.campaign-gallery, .partner-board { margin-block: clamp(28px, 5vw, 60px) 0; }
.campaign-gallery figure, .partner-board { margin-inline: 0; }
.campaign-gallery figure { margin-block: 0; }
.project-page figure a { display: block; }
.project-page figure img { display: block; width: 100%; height: auto; }
.campaign-gallery figcaption {
  border-bottom: 1px solid var(--line);
  padding-block: 13px;
  color: var(--soft);
  font-size: 15px;
}

.noir-award {
  margin-block-start: 14px;
  color: var(--text);
}

.showcase-secondary {
  margin-block-start: clamp(26px, 5vw, 62px);
  background: #2c4564;
}
.showcase-secondary h3 { font-size: clamp(38px, 4.5vw, 68px); overflow-wrap: anywhere; }
.showcase-secondary .showcase-link { margin-block-start: 16px; }
.campaign-original { margin-block-start: 12px; }

.showcase-boisee { background: #172230; }
.boisee-page {
  --bg: #e5eaee;
  --text: #202a35;
  --soft: #445366;
  --gold: #775036;
  --line: #a9b6c1;
}

:is(.social-media-page, .print-design-page) {
  color-scheme: dark;
  --bg: #123940;
  --text: #fbf4e9;
  --soft: #d5e4e3;
  --gold: #f0ca9f;
  --line: #7d9b9c;
}

:is(.social-media-page, .print-design-page) .mast .pill { border-color: var(--line); }
:is(.social-media-page, .print-design-page) .brand img { background: #f5eee4; border-radius: 50%; }

.social-media-gallery, .print-design-gallery {
  background: #eee4d6;
  padding: clamp(12px, 3vw, 32px);
  gap: clamp(12px, 2.5vw, 28px);
  border-radius: 6px;
}

:is(.social-media-gallery, .print-design-gallery) a:focus-visible { outline-color: #123940; }

@media (min-width: 681px) {
  .social-media-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.print-design-gallery figcaption {
  color: #64503e;
  border-color: #cab29a;
}

.print-design-section { margin-block-start: clamp(32px, 6vw, 70px); }
.print-design-section h2 { font-size: clamp(26px, 4vw, 48px); letter-spacing: normal; }
.print-media-grid { margin-block-start: clamp(15px, 3vw, 25px); align-items: start; }
.print-media-grid video { display: block; width: min(100%, 430px); height: auto; margin-inline: auto; background: #152429; }
@media (min-width: 681px) {
  .print-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.store-cover {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: #e8d8c2 url("/media/online-store-cover-background.webp") center / cover no-repeat;
  overflow: hidden;
}
.archive .project .store-cover img {
  width: 17%;
  aspect-ratio: auto;
  height: auto;
  border: 2px solid #46382f;
  border-radius: 9% / 4%;
  box-shadow: 2px 5px 8px #3a281f33;
  background: #fff;
}
.archive .project .store-cover img:nth-child(2) { width: 21%; }
.online-store-page h1 { font-size: clamp(40px, 7vw, 84px); }
.online-store-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 35px);
}
@media (max-width: 680px) {
  .online-store-gallery { grid-template-columns: 1fr; }
  .online-store-gallery figure { width: min(100%, 400px); margin-inline: auto; }
}

.ai-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #938e6d;
  color: #f7ecdb;
  background:
    repeating-radial-gradient(ellipse at 50% 66%, transparent 0 7%, #f7ecdb25 7.2% 7.45%, transparent 7.7% 11%),
    radial-gradient(ellipse at 55% 35%, #756d4d, #34372b 82%);
}
.ai-cover span {
  direction: ltr;
  font: 400 clamp(3.2rem, 8vw, 7rem) / 1 Georgia, serif;
  letter-spacing: -.09em;
  padding-inline-end: .09em;
}
.ai-page-banner { margin-block: 24px; }
.ai-page-banner span { font-size: clamp(4rem, 18vw, 14rem); }
.ai-intro h2 { margin-block-end: 12px; font-size: clamp(24px, 4vw, 46px); }

.ai-work { margin-block-start: clamp(36px, 6vw, 76px); }
.ai-work h2 { font-size: clamp(26px, 4vw, 48px); letter-spacing: normal; }
.ai-gallery { margin-block-start: 22px; gap: clamp(22px, 3.2vw, 44px); align-items: start; }
@media (min-width: 681px) {
  .ai-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ai-forest-cover {
  background: #262820;
  color: #f5e6d0;
  border-color: var(--line);
}
.archive .project .ai-forest-cover img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border: 0;
}
.ai-forest-cover span {
  grid-area: 1 / 1;
  position: relative;
  text-shadow: 0 2px 16px #17150ee0;
}