/* Fuad Al-Gaadi — photography site
   Dark, cinematic editorial direction (inspired by story-led documentary portfolios; original design).
   Palette: charcoal / warm ivory / olive-grey / terracotta, plus one colour per navigation tab.
   Type: DM Sans (English) + IBM Plex Sans Arabic (Arabic); 400 text, 500/600 headings.
*/



@font-face { font-family: "DM Sans"; src: url(fonts/dm-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "DM Sans"; src: url(fonts/dm-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "DM Sans"; src: url(fonts/dm-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --bg: #1f1e1b;          /* deep charcoal page */
  --charcoal: #292824;    /* header, panels */
  --surface: #2e2c28;
  --ivory: #f4f1e9;       /* text — 14.8:1 */
  --ivory-2: #d9d4c7;
  --muted: #b8b3a5;       /* secondary text — 8:1 */
  --olive: #737864;       /* olive-grey: bands, rules */
  --olive-light: #9fa38f; /* olive-grey for small text on dark — 6.4:1 */
  --terracotta: #b9654b;  /* accent lines and fills */
  --terracotta-light: #d98b70; /* terracotta for small text on dark — 6.3:1 */
  --rule: #3a3833;

  /* one earthy colour per navigation tab: --fill for the current page (white text ≥ 5:1), --dot for the marker */
  --img-radius: 12px;

  /* DM Sans (English) + IBM Plex Sans Arabic (Arabic): 400 for text, 500/600 for headings */
  --display: "DM Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: "DM Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1440px;
  --gutter: clamp(16px, 4vw, 56px);
  --space: clamp(72px, 10vw, 150px);
  --gap: clamp(8px, 1vw, 14px);
  --radius: 12px;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ivory); font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
html[lang="ar"] body { font-size: 1.125rem; line-height: 1.9; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p a, .prose a { text-decoration: underline; text-underline-offset: .2em; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--terracotta-light); outline-offset: 3px; }
p { margin: 0 0 1em; text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; background: var(--ivory); color: var(--bg); padding: 10px 14px; z-index: 60; border-radius: 8px; }
.skip:focus { top: 12px; color: var(--bg); }

/* ---- type ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0 0 .4em; text-wrap: balance; color: var(--ivory); }
h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; }
h3 { font-size: 1.5rem; line-height: 1.2; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-weight: 600; line-height: 1.45; }
.kicker, .label { display: flex; gap: .7em; align-items: baseline; font-family: var(--font); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
html[lang="ar"] .kicker, html[lang="ar"] .label { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.label-num { color: var(--terracotta-light); }
.label a { color: inherit; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ivory-2); max-width: 36em; }
.statement { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.25; color: var(--ivory); max-width: 22em; }
html[lang="ar"] .statement { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.7; }
.caption { font-size: .875rem; color: var(--muted); line-height: 1.5; margin: 0; }
.muted, .muted-lg { color: var(--muted); }
.muted-lg { font-size: 1.15rem; line-height: 1.6; max-width: 30em; }
.text-link { display: inline-flex; gap: .5em; align-items: center; font-weight: 500; font-size: .95rem; padding-bottom: 4px; border-bottom: 2px solid var(--terracotta); text-decoration: none !important; }
.text-link:hover { color: var(--terracotta-light); }
.button { display: inline-flex; align-items: center; gap: .5em; padding: .9em 1.5em; border-radius: var(--radius); background: #a85a42; color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none !important; }
.button:hover { background: var(--ivory); color: var(--bg); }

/* ---- layout ---- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { margin-top: var(--space); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 16px; margin-bottom: clamp(28px, 3vw, 44px); }
.section-head .kicker, .section-head .label { margin: 0; }

/* ---- header with colour tabs ---- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(31, 30, 27, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font); font-size: 1rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
html[lang="ar"] .brand-name { letter-spacing: 0; font-size: 1.15rem; }
.brand-role { font-size: .75rem; color: var(--muted); margin-top: 3px; }
.site-nav { margin-inline-start: auto; }
.site-nav ul { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.tab { display: inline-flex; align-items: center; gap: .55em; padding: 9px 15px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); color: var(--ivory); font-size: .9rem; font-weight: 500; line-height: 1.2; transition: border-color .15s ease, background .15s ease; }
html[lang="ar"] .tab { font-size: .98rem; }
.tab::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--dot); }
.tab-work { --fill: #a85a42; --dot: #d98b70; }        /* terracotta */
.tab-exhibitions { --fill: #666b58; --dot: #a9ad98; } /* olive-grey */
.tab-stories { --fill: #8a6a2a; --dot: #cfa65c; }     /* ochre */
.tab-about { --fill: #7a5a44; --dot: #bf9677; }       /* clay brown */
.tab-contact { --fill: #6b675d; --dot: #bdb7a8; }     /* stone */
.tab:hover { color: #fff; border-color: var(--dot); }
.tab[aria-current="page"] { background: var(--fill); border-color: var(--fill); color: #fff; font-weight: 600; }
.tab[aria-current="page"]::before { background: #fff; }
.lang { padding: 8px 14px; border: 1.5px solid var(--ivory); border-radius: var(--radius); font-size: .9rem; font-weight: 600; white-space: nowrap; line-height: 1.2; }
.lang:hover { background: var(--ivory); color: var(--bg); }
.menu-toggle { display: none; font: inherit; font-weight: 600; font-size: .9rem; background: var(--charcoal); color: var(--ivory); border: 1.5px solid var(--rule); border-radius: var(--radius); padding: 8px 14px; cursor: pointer; }
@media (max-width: 1080px) {
  .header-inner > .lang { margin-inline-start: auto; }
  .menu-toggle { display: inline-block; }
  .site-nav { display: none; position: absolute; inset-inline: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--rule); padding: 16px var(--gutter) 24px; margin: 0; }
  .site-nav.open { display: block; }
  .site-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tab { width: 100%; justify-content: flex-start; padding: 16px 16px; font-size: 1.05rem; }
  .no-js .site-nav { display: block; position: static; width: 100%; order: 3; padding: 0 0 14px; border: 0; }
  .no-js .menu-toggle { display: none; }
  .no-js .header-inner { flex-wrap: wrap; }
}

/* ---- hero: full-bleed photograph, name set beneath it (keeps the photo unobstructed) ---- */
.hero { position: relative; }
.hero-media { margin: 0; background: #000; }
.hero-media img { width: 100%; height: min(calc(100vw / var(--r)), calc(100vh - 77px)); object-fit: cover; object-position: 50% 35%; }
.hero-overlay { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; padding: clamp(28px, 4vw, 56px) var(--gutter) 0; max-width: var(--wrap); margin-inline: auto; }
.hero-top { position: absolute; top: 0; inset-inline: 0; display: flex; justify-content: space-between; gap: 16px; padding: clamp(16px, 2.4vw, 30px) var(--gutter) 60px; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)); }
html[lang="ar"] .hero-top { letter-spacing: 0; font-size: .95rem; }
.hero-bottom { display: contents; }
.hero-bottom .kicker { grid-column: 1 / -1; margin: 0; color: var(--olive-light); }
.display { font-family: var(--display); font-size: clamp(3.2rem, 9vw, 8.5rem); line-height: .95; font-weight: 500; margin: 0; color: var(--ivory); letter-spacing: -0.01em; }
html[lang="ar"] .display { line-height: 1.25; font-weight: 600; }
.hero-bottom p:last-child { margin: 0 0 .9em; }
@media (max-width: 760px) {
  .hero-media img { height: auto; }
  .hero-top { position: static; background: none; color: var(--muted); flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 0; }
  .hero-overlay { grid-template-columns: 1fr; padding-top: 18px; }
}

/* ---- intro band (tagline) ---- */
.intro-band { border-bottom: 2px solid var(--terracotta); padding-block: clamp(48px, 7vw, 96px); }
.intro-quote { font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.12; margin: 0; max-width: 20em; }
html[lang="ar"] .intro-quote { line-height: 1.6; font-weight: 600; }

/* ---- story cards (home, exhibitions) ---- */
.scard { display: block; }
.scard-img { display: block; overflow: hidden; border-radius: 4px; background: var(--surface); }
.scard-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .7s ease; }
.scard:hover .scard-img img { transform: scale(1.02); }
.scard-text { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; padding-top: 18px; }
.scard-text .kicker { grid-column: 1 / -1; margin: 0; }
.scard-title { font-family: var(--display); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.1; }
html[lang="ar"] .scard-title { font-weight: 600; line-height: 1.5; }
.scard-arrow { font-size: 1.4rem; color: var(--terracotta-light); }
.scard:hover .scard-title { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.scard-big { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.scard-big .scard-text { padding-top: 0; }
.scard-big .scard-title { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.scards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px); }
@media (max-width: 760px) { .scard-big, .scards { grid-template-columns: 1fr; } }

/* ---- duo (about + commissions) ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
.duo > div { border-top: 2px solid var(--terracotta); padding-top: 20px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* ---- page heads ---- */
.page-head { padding-top: clamp(48px, 8vw, 120px); padding-bottom: clamp(28px, 4vw, 56px); }
.page-head h1::after { content: ""; display: block; width: 64px; height: 3px; background: var(--terracotta); margin-top: .4em; border-radius: 2px; }
.title-note { font-family: var(--display); font-size: 1.6rem; color: var(--muted); margin: -.2em 0 0; }
.crumb { margin: 0 0 clamp(24px, 4vw, 44px); font-size: .95rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ivory); }

/* ---- galleries ---- */
.gallery { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gap); }
.gallery li { flex: calc(var(--r) * 100) 1 calc(var(--r) * 280px); }
.gallery::after { content: ""; flex: 10000 1 0; }
.gallery a { display: block; background: var(--surface); cursor: zoom-in; border-radius: 3px; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: var(--r); object-fit: cover; }
@media (max-width: 600px) { .gallery li { flex-basis: 100%; } }

/* ---- exhibitions index ---- */
.ex-rows { list-style: none; margin: 0; padding: 0; }
.ex-row { border-top: 1px solid var(--rule); }
.ex-row:last-child { border-bottom: 1px solid var(--rule); }
.ex-row a { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); padding: clamp(28px, 4vw, 56px) 0; align-items: center; }
.ex-row-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); border-radius: 4px; }
.ex-row-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.ex-row a:hover .ex-row-img img { transform: scale(1.02); }
.ex-row h2 { margin-bottom: .2em; }
.ex-row-text > p:not(.label) { max-width: 32em; color: var(--ivory-2); }
.ex-row-text .muted { color: var(--muted); }
@media (max-width: 760px) { .ex-row a { grid-template-columns: 1fr; } }

/* ---- exhibition (essay) page ---- */
.essay-head h1 { max-width: 14em; }
.cover { margin: 0 0 clamp(40px, 6vw, 88px); }
.cover a { display: block; cursor: zoom-in; }
.cover img { width: min(100%, calc(82vh * var(--r))); margin-inline: auto; aspect-ratio: var(--r); border-radius: 3px; }
.cover .caption { text-align: center; margin-top: 10px; }
.ex-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.details { margin: 0; border-top: 2px solid var(--terracotta); align-self: start; }
.details div { border-bottom: 1px solid var(--rule); padding: 13px 0; }
.details dt { font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--olive-light); }
html[lang="ar"] .details dt { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.details dd { margin: 3px 0 0; }
.prose { max-width: 36em; }
.prose p { font-size: 1.125rem; line-height: 1.75; color: var(--ivory-2); }
html[lang="ar"] .prose p { line-height: 2; }
.prose p:first-child { color: var(--ivory); }
@media (max-width: 860px) { .ex-body { grid-template-columns: 1fr; } .details { order: 2; } }
.essay-text .prose { margin-bottom: clamp(28px, 4vw, 48px); }
.sequence { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(32px, 6vw, 96px); }
.sequence figure { margin: 0; }
.sequence a { display: block; cursor: zoom-in; }
.sequence img { width: min(100%, calc(86vh * var(--r))); margin-inline: auto; aspect-ratio: var(--r); border-radius: 3px; }
.sequence figcaption { width: min(100%, calc(86vh * var(--r))); margin: 10px auto 0; font-variant-numeric: tabular-nums; }
.press-list { list-style: none; margin: 0; padding: 0; }
.press-list li { border-bottom: 1px solid var(--rule); }
.press-list a { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 5fr) minmax(0, 2fr) 24px; gap: 20px; padding: 20px 0; align-items: baseline; }
.press-pub { font-size: .875rem; font-weight: 600; color: var(--olive-light); }
.press-main { display: flex; flex-direction: column; gap: 2px; }
.press-title { font-family: var(--display); font-size: 1.45rem; line-height: 1.25; }
html[lang="ar"] .press-title { font-size: 1.25rem; }
.press-note { font-size: .875rem; color: var(--muted); }
.press-meta { font-size: .875rem; color: var(--muted); }
.press-arrow { color: var(--terracotta-light); text-align: end; }
[dir="rtl"] .press-arrow { display: inline-block; transform: scaleX(-1); }
.press-list a:hover .press-title { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; }
@media (max-width: 760px) { .press-list a { grid-template-columns: 1fr 24px; gap: 4px 12px; } .press-pub, .press-main, .press-meta { grid-column: 1; } .press-arrow { grid-column: 2; grid-row: 1; } }
.endbar { margin-top: var(--space); }
.endbar .caption { border-top: 1px solid var(--rule); padding-top: 16px; }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.more-card { display: flex; flex-direction: column; gap: 8px; }
.more-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); margin-bottom: 8px; border-radius: 4px; }
.more-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.more-card:hover .more-img img { transform: scale(1.02); }
.more-card .label { margin: 0; }
.more-title { font-family: var(--display); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.1; }
html[lang="ar"] .more-title { font-weight: 600; line-height: 1.5; }
@media (max-width: 600px) { .more-grid { grid-template-columns: 1fr; } }

/* ---- category bar ---- */
.catbar { display: flex; align-items: center; justify-content: center; gap: 16px 24px; flex-wrap: wrap; margin-top: var(--space); padding: 28px var(--gutter); background: var(--charcoal); max-width: none; border-top: 2px solid var(--olive); }
.catbar .label { margin: 0; }
.catbar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.catbar a { display: inline-block; padding: 10px 18px; border-radius: var(--radius); background: var(--surface); font-weight: 600; }
.catbar a:hover { background: var(--olive); color: #fff; }
.catbar a[aria-current="page"] { background: var(--olive); color: #fff; }

/* ---- stories ---- */
.empty { border-top: 2px solid var(--terracotta); padding-top: 28px; }
.empty p { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.3; color: var(--ivory-2); max-width: 22em; }
.story-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px); }
.story-cards img { margin-bottom: 16px; border-radius: 4px; }
.story-figure { margin: 0 0 56px; }
.story-figure img { max-height: 88vh; width: auto; margin-inline: auto; }
.story-text p { font-size: 1.3rem; line-height: 1.7; }
@media (max-width: 700px) { .story-cards { grid-template-columns: 1fr; } }

/* ---- about ---- */
.about-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); }
.about-bio .statement { margin-bottom: 1.6rem; }
.about-side { border-top: 2px solid var(--terracotta); padding-top: 18px; align-self: start; }
.about-ex { list-style: none; padding: 0; margin: 0; }
.about-ex a { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.about-ex-title { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.experience { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.experience li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.exp-dates { font-size: .875rem; color: var(--olive-light); font-variant-numeric: tabular-nums; margin: .3em 0 0; }
.experience h3 { margin-bottom: .1em; }
.experience p:last-child { margin: .5em 0 0; max-width: 40em; color: var(--ivory-2); }
@media (max-width: 700px) { .experience li { grid-template-columns: 1fr; gap: 4px; } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.two-col > div { border-top: 2px solid var(--olive); padding-top: 18px; }
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }
.plain { padding-inline-start: 1.1em; margin: 0; }
.plain li { margin-bottom: .4em; }

/* ---- contact ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-cta { border-top: 2px solid var(--terracotta); padding-top: 18px; }
.contact-grid > div:last-child { border-top: 2px solid var(--olive); padding-top: 18px; }
.contact-cta .statement { margin-bottom: 1.6rem; }
.social-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.social-list a { display: flex; gap: 16px; align-items: baseline; padding: 16px 18px; border-radius: var(--radius); background: var(--charcoal); border: 1px solid var(--rule); }
.social-list a:hover { border-color: var(--terracotta); }
.soc-label { flex: 1; font-family: var(--display); font-size: 1.5rem; line-height: 1.1; }
.soc-handle { color: var(--olive-light); font-size: .95rem; }
.social-list .press-arrow { width: 20px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---- footer ---- */
.site-footer { margin-top: var(--space); background: var(--charcoal); border-top: 2px solid var(--terracotta); padding: clamp(48px, 6vw, 80px) 0 32px; }
.site-footer .caption { color: var(--muted); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); gap: 32px; }
.footer-name { font-family: var(--display); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; margin: 0 0 6px; }
html[lang="ar"] .footer-name { font-weight: 600; line-height: 1.4; }
.footer-nav ul, .footer-social { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-footer a:hover { color: var(--terracotta-light); }
.footer-copy { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 24px; }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-id { grid-column: 1 / -1; } }

/* ---- lightbox ---- */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100dvh; background: #0d0d0c; color: #ecebe6; }
.lightbox::backdrop { background: #0d0d0c; }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; }
.lb-stage { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 0; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-bar { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 12px 24px 20px; }
.lb-caption { margin: 0; font-size: .92rem; color: #cfcdc6; max-width: 60em; }
.lb-caption .lb-credit { display: block; color: #9c9991; font-size: .82rem; }
.lb-count { margin: 0; font-size: .85rem; color: #9c9991; font-variant-numeric: tabular-nums; }
.lb-buttons { display: flex; gap: 8px; }
.lb-buttons button { font: inherit; font-size: 1.15rem; width: 46px; height: 46px; border-radius: var(--radius); border: 1px solid #45443f; background: transparent; color: #ecebe6; cursor: pointer; }
.lb-buttons button:hover { border-color: #ecebe6; }
[dir="rtl"] .lb-prev span, [dir="rtl"] .lb-next span { display: inline-block; transform: scaleX(-1); }
@media (max-width: 600px) { .lb-bar { grid-template-columns: 1fr auto; } .lb-count { display: none; } .lb-stage { padding: 8px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .site-header, .site-footer, .lightbox { display: none; } body { background: #fff; color: #000; } }

/* ---- rounded photographs, matching the tab corners ---- */
.scard-img, .gallery a, .ex-row-img, .more-img { border-radius: var(--img-radius); overflow: hidden; }
.cover img, .sequence img, .story-figure img, .story-cards img { border-radius: var(--img-radius); }

/* ---- comfortable typography: calmer weights, no tight tracking, comfortable line lengths ---- */
body { font-weight: 400; color: #ece8de; }
h1, h2, h3, .display, .statement, .intro-quote, .scard-title, .more-title, .press-title, .about-ex-title, .soc-label, .footer-name, .title-note, .empty p { font-weight: 500; letter-spacing: -0.01em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .display, html[lang="ar"] .scard-title, html[lang="ar"] .more-title, html[lang="ar"] .footer-name { font-weight: 500; letter-spacing: 0; }
.display { font-size: clamp(3rem, 8vw, 7rem); line-height: 1.02; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.15; }
.statement, .intro-quote { font-weight: 400; line-height: 1.35; }
.intro-quote { font-size: clamp(1.8rem, 3.8vw, 3.1rem); }
.scard-title, .more-title { font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.2; }
.scard-big .scard-title { font-size: clamp(2rem, 3.4vw, 3rem); }
.press-title { font-size: 1.25rem; font-weight: 400; }
.soc-label { font-size: 1.3rem; font-weight: 400; }
.kicker, .label, .hero-top, .details dt { letter-spacing: .08em; }
.brand-name { letter-spacing: .06em; font-weight: 500; }
.tab { font-weight: 500; }
.prose p { color: #ddd8cc; }
html[lang="ar"] body { line-height: 1.95; }
html[lang="ar"] .display { line-height: 1.3; }
html[lang="ar"] h1 { line-height: 1.35; }
html[lang="ar"] .statement, html[lang="ar"] .intro-quote { line-height: 1.75; }

html[lang="ar"] { --display: "IBM Plex Sans Arabic", "DM Sans", "Geeza Pro", sans-serif; --font: "IBM Plex Sans Arabic", "DM Sans", "Geeza Pro", sans-serif; }
/* headings 500/600, text 400 */
h1, .display { font-weight: 600; letter-spacing: -0.02em; }
h2, h3, .scard-title, .more-title, .about-ex-title, .footer-name, .tile-title { font-weight: 500; letter-spacing: -0.015em; }
html[lang="ar"] h1, html[lang="ar"] .display { font-weight: 600; letter-spacing: 0; }
html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .scard-title, html[lang="ar"] .more-title, html[lang="ar"] .about-ex-title, html[lang="ar"] .footer-name { font-weight: 500; letter-spacing: 0; }
.statement, .intro-quote, .press-title, .soc-label, .empty p { font-weight: 400; }
.tab, .button, .text-link, .brand-name { font-weight: 500; }
.tab[aria-current="page"] { font-weight: 600; }