/* ==========================================================================
   taimourothman.com — site styles
   Tokens first, then base, shell (topbar/menu/footer), image slots,
   home, work, project, #ThisIsEgypt, exhibitions & press, about, contact.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --bg: #F6F4F0; --ink: #12100E; --ink2: #6E675C; --ink3: #2C2823;
  --line: rgba(18,16,14,.14);
  --ph1: #DAD6CF; --ph2: #D0CBC3; --phink: #8C8578; --logo: #6E675C;
  --hero-bg: #12100E; --hero-ink: #F6F4F0;
  --gutter: clamp(20px, 3.9vw, 56px);
  --font: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Menlo, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #141310; --ink: #F2EFE8; --ink2: #9C948A; --ink3: #D4CEC4;
  --line: rgba(242,239,232,.16);
  --ph1: #2A2823; --ph2: #23211D; --phink: #A8A196; --logo: #4E4941;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--font); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink2); }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
button { font: inherit; }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
/* Hello page only: content held in a centred frame on wide screens */
.framed .topbar, .framed main, .framed .landing-foot { max-width: 1280px; margin-left: auto; margin-right: auto; }
.framed .footer-page { margin-top: 104px; }
@media (max-width: 899px) { .framed .footer-page { margin-top: 48px; } }
.label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
a.label:hover { color: var(--ink); }
.meta { font-size: 12px; color: var(--ink2); letter-spacing: .04em; }
.h-page { font-size: clamp(34px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.03em; }
.h-project { font-size: clamp(30px, 3.3vw, 48px); line-height: 1.02; letter-spacing: -0.03em; }
.page-title { padding-top: 88px; }
.logo { display: inline-block; height: 30px; width: auto; aspect-ratio: 267.5 / 48; vertical-align: middle; } /* nav logo: 30px desktop, 25px phone; width follows the aspect ratio */
.logo-sm { height: 14px; }
.logo-link { display: inline-flex; align-items: center; color: inherit; }
.logo-link:hover { color: inherit; opacity: .8; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- topbar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 34px var(--gutter); }
.nav { display: flex; gap: 32px; font-size: 12px; letter-spacing: .06em; align-items: center; }
.nav a[aria-current="page"] { font-weight: 700; }
.theme-toggle { margin-left: 10px; padding: 0 0 0 20px; border: 0; border-left: 1px solid currentColor; background: none; color: inherit; display: inline-flex; align-items: center; height: 14px; opacity: .75; cursor: pointer; }
.theme-toggle:hover { opacity: 1; }
.theme-toggle i { display: block; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); transition: transform .4s ease; }
:root[data-theme="dark"] .theme-toggle i { transform: rotate(180deg); }
.menu-group { display: none; gap: 18px; align-items: center; }
.menu-group .theme-toggle { margin: 0; padding: 0; border: 0; width: 22px; height: 22px; justify-content: center; }
.menu-btn { border: 0; background: none; color: inherit; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: 0; }

/* ---------- mobile menu ---------- */
.menu { position: fixed; inset: 0; z-index: 50; background: var(--bg); color: var(--ink); display: none; flex-direction: column; padding: 20px; }
.menu[data-open] { display: flex; }
.menu-head { display: flex; align-items: center; justify-content: space-between; }
.menu-links { display: flex; flex-direction: column; gap: 18px; margin-top: 48px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.menu-links a[aria-current="page"] { color: var(--ink2); }
.menu-foot { margin-top: auto; display: flex; gap: 12px; align-items: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.menu-foot .theme-toggle { margin: 0; padding: 0; border: 0; }

@media (max-width: 899px) {
  .topbar { padding: 20px; }
  .topbar .logo, .menu-head .logo { height: 25px; }
  .nav { display: none; }
  .menu-group { display: inline-flex; }
}

/* ---------- image slot ---------- */
.slot { position: relative; margin: 0; overflow: hidden; background: repeating-linear-gradient(135deg, var(--ph1) 0 8px, var(--ph2) 8px 16px); }
.slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot > img[data-missing] { display: none; }
.slot-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 10px/1.4 var(--mono); letter-spacing: .1em; color: var(--phink); pointer-events: none; text-align: center; padding: 8px; }
.slot > img:not([data-missing]) + .slot-label { display: none; }
a.slot-link { display: block; color: inherit; }
a.slot-link:hover { color: inherit; }
a.slot-link:hover .slot > img { opacity: .92; }

/* logo slots (clients / press): flat blocks, not hatched */
.logo-slot { position: relative; height: 26px; background: var(--logo); display: flex; align-items: center; justify-content: center; font: 10px/1 var(--mono); color: #F6F4F0; letter-spacing: .06em; text-align: center; padding: 0 4px; overflow: hidden; }
.logo-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.logo-slot > img[data-missing] { display: none; }
.logo-slot > img:not([data-missing]) + span { display: none; }
/* a loaded logo drops the grey block, grows, and goes monochrome so it sits with the type, not against the photos */
.logo-slot:has(> img:not([data-missing])) { background: none; height: 44px; }
.logo-slot:has(> img:not([data-missing])) > img { padding: 0; filter: grayscale(1) contrast(1.1); opacity: .78; }
:root[data-theme="dark"] .logo-slot:has(> img:not([data-missing])) > img { filter: grayscale(1) invert(1) contrast(1.1); }

/* ---------- footer ---------- */
/* inner pages reuse the landing bottom bar (.landing-foot) with room above it */
.footer-page { margin-top: 104px; }
.footer-right { display: flex; gap: 26px; align-items: center; }
.footer-mark { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 899px) {
  .footer-page { margin-top: 48px; }
}

/* ---------- landing (home) ---------- */
.landing { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.landing .topbar { padding: 26px var(--gutter) 22px; }
.stage { position: relative; flex: 1; min-height: 360px; margin: 0 var(--gutter); background: var(--hero-bg); color: var(--hero-ink); overflow: hidden; }
.hero-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.hero-layer[data-active] { opacity: 1; }
.hero-layer .slot { position: absolute; inset: 0; }
.hero-layer:nth-child(1) .slot { background: repeating-linear-gradient(135deg, #4A443C 0 10px, #413C35 10px 20px); }
.hero-layer:nth-child(2) .slot { background: repeating-linear-gradient(135deg, #5A5348 0 10px, #4E483F 10px 20px); }
.hero-layer:nth-child(3) .slot { background: repeating-linear-gradient(135deg, #33403F 0 10px, #2B3736 10px 20px); }
.hero-layer .slot-label { color: #D8D2C7; font-size: 11px; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,16,14,0) 25%, rgba(18,16,14,.35) 50%, rgba(18,16,14,0) 75%); pointer-events: none; }
.hero-words { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(20px, 5.5vw, 80px); }
.hero-word { font: 700 clamp(30px, 4.6vw, 66px)/1 'Oswald', 'Arial Narrow', var(--font); text-transform: uppercase; letter-spacing: .01em; color: var(--hero-ink); opacity: .45; transition: opacity .3s ease; cursor: pointer; }
.hero-word[data-active] { opacity: 1; }
.hero-word:hover, .hero-word:focus-visible { color: var(--hero-ink); }
.landing-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px var(--gutter) 24px; font-size: 12px; color: var(--ink2); letter-spacing: .04em; }
.landing-foot a:hover { color: var(--ink); }
.tagline { font-size: clamp(16px, 1.7vw, 24px); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; }
@media (max-width: 899px) {
  .landing .topbar { padding: 20px; }
  .stage { margin: 0 20px; min-height: 300px; }
  .hero-words { flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; text-align: center; }
  .hero-word { font-size: clamp(34px, 10vw, 44px); }
  .landing-foot { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 20px 22px; }
  .landing-foot .footer-right { flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: center; }
}

/* ---------- home sections ---------- */
.section { padding-top: 96px; }
.grid-3 { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; }
.card { display: flex; flex-direction: column; gap: 14px; }
.card-title { font-size: 15px; font-weight: 700; }
.card .meta { margin-top: 5px; }
.clients { padding-top: 104px; }
/* continuous marquee: js/site.js clones the row once; the track scrolls by exactly one row so the loop is seamless */
.slider { margin-top: 26px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.slider-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.slider-group { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.logo-slot { width: 140px; flex: none; }
.slider .logo-slot:has(> img[data-missing]), .partners .logo-slot:has(> img[data-missing]) { display: none; } /* marquee and Partners drop missing logos; press rows keep their placeholder */
@keyframes marquee { to { transform: translateX(-50%); } }
.slider:hover .slider-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .slider-track { animation: none; } }
.callout { margin: 96px var(--gutter) 0; padding: 44px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.callout-text { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.callout .label { display: inline-block; margin-top: 12px; letter-spacing: .14em; }
@media (max-width: 899px) {
  .section { padding-top: 56px; }
  .grid-3 { grid-template-columns: 1fr; gap: 36px; margin-top: 22px; }
  .clients { padding-top: 56px; }
  .slider-group { gap: 36px; padding-right: 36px; }
  .logo-slot { width: 100px; height: 22px; padding: 0 3px; }
  .logo-slot:has(> img:not([data-missing])) { height: 36px; }
  .callout { margin-top: 56px; padding: 28px 0; }
  .callout-text { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; }
}

/* ---------- work index + category ---------- */
.cat-tabs { display: flex; gap: 34px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); padding-top: 64px; }
.cat-tabs a:hover { color: var(--ink); }
.cat-tabs a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.cat-title { margin-top: 40px; }
.gallery .card[hidden] { display: none; }
.gallery { padding-top: 56px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 40px 24px; }
@media (max-width: 899px) {
  .cat-tabs { gap: 18px; font-size: 11px; letter-spacing: .1em; padding-top: 32px; flex-wrap: wrap; }
  .cat-title { margin-top: 24px; }
  .gallery { padding-top: 36px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 28px 16px; }
}

/* ---------- project ---------- */
.project-head { padding-top: 48px; display: flex; flex-direction: column; gap: 40px; }
.meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 32px; font-size: 14px; padding-top: 28px; border-top: 1px solid var(--line); }
.meta-grid .label { font-size: 11px; letter-spacing: .14em; }
.meta-grid .label + div { margin-top: 6px; }
.project-copy { font-size: 15px; line-height: 1.6; max-width: 46ch; color: var(--ink3); }
.project-body { padding-top: 88px; display: flex; flex-direction: column; gap: 2px; }
.pair-tight { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.photos { display: flex; flex-direction: column; gap: 2px; }
.photos-mobile { display: none; }
.row { display: flex; gap: 2px; }
.photo { background: var(--ph1); min-width: 0; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.row > .photo:only-child { flex-grow: 0; width: 66%; margin: 0 auto; }
.prevnext { margin: 104px var(--gutter) 0; padding: 32px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 14px; color: var(--ink2); }
.prevnext b { color: var(--ink); font-weight: 700; }
.prevnext a:hover b { color: var(--ink2); }
@media (max-width: 899px) {
  .project-head { padding-top: 36px; gap: 28px; }
  .meta-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; padding-top: 20px; }
  .project-body { padding-top: 44px; gap: 2px; }
  .pair-tight { grid-template-columns: 1fr; }
  .row > .photo:only-child { width: 100%; }
  .photos-desktop { display: none; }
  .photos-mobile { display: flex; }
  .prevnext { margin-top: 44px; padding: 22px 0; font-size: 13px; }
}

/* ---------- #ThisIsEgypt ---------- */
.tie-head { padding-top: 80px; max-width: 1120px; }
.tie-head .h-page { font-size: clamp(34px, 3.9vw, 56px); letter-spacing: -0.035em; }
.tie-head .label { display: block; margin-top: 16px; font-size: 13px; }
.story { padding-top: 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.story-year { font-size: 12px; letter-spacing: .14em; color: var(--ink2); }
.story-title { margin-top: 14px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.story p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--ink3); }
.tie-grid { padding-top: 96px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.press-logos { margin-top: 26px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; align-items: center; }
.press-logos .logo-slot { height: 28px; }
@media (max-width: 899px) {
  .tie-head { padding-top: 36px; }
  .tie-head .label { margin-top: 12px; font-size: 11px; }
  .story { padding-top: 40px; grid-template-columns: 1fr; gap: 34px; }
  .tie-grid { padding: 44px 0 0; grid-template-columns: 1fr 1fr; }
  .tie-grid .slot:nth-child(n+9) { display: none; }
  .press-logos { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
  .press-logos .logo-slot { height: 24px; }
  .press-logos .logo-slot:nth-child(5) { display: none; }
}

/* ---------- hello: exhibitions & press sections, contact ---------- */
.hello-section { padding-top: 96px; }
.h-section { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; }
.hello-section .ex-layout { padding-top: 32px; }
.press { padding-top: 96px; }
.press .h-section + .press-list { margin-top: 32px; }
.hello-contact { margin-top: 96px; border-top: 1px solid var(--line); padding-top: 40px; }
@media (max-width: 899px) {
  .hello-section, .press { padding-top: 56px; }
  .hello-contact { margin-top: 56px; padding-top: 28px; }
}

/* ---------- partners slider (Hello) ---------- */
#partners .slider { margin-top: 32px; }
#partners .logo-slot:has(> img:not([data-missing])) > img, :root[data-theme="dark"] #partners .logo-slot:has(> img:not([data-missing])) > img { filter: none; opacity: 1; }

/* ---------- exhibitions & press ---------- */
.ex-layout { padding-top: 80px; display: grid; grid-template-columns: 5fr 4fr; gap: 64px; align-items: start; }
.ex-row { padding: 20px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.ex-row.solo { margin-top: 22px; padding: 0 0 22px; }
.ex-row .title { font-size: 17px; font-weight: 700; }
.ex-row.solo .title { font-size: 22px; letter-spacing: -0.015em; }
.ex-row .place { margin-top: 5px; font-size: 13px; color: var(--ink2); }
.ex-row .year { font-size: 13px; color: var(--ink2); }
.ex-group-label { margin-top: 56px; }
.ex-list { margin-top: 22px; }
.ex-views { display: flex; flex-direction: column; gap: 2px; }
.press-list { margin-top: 26px; border-bottom: 1px solid var(--line); }
.press-row { padding: 26px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 160px 1fr auto; gap: 32px; align-items: center; color: inherit; }
.press-row:hover { color: inherit; }
.press-row:hover .headline { color: var(--ink2); }
.press-row .logo-slot { height: 24px; }
.press-row .headline { font-size: 16px; line-height: 1.4; }
.press-row .read { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
@media (max-width: 899px) {
  .ex-layout { padding-top: 44px; grid-template-columns: 1fr; gap: 20px; }
  .ex-row.solo { margin-top: 16px; padding-bottom: 18px; }
  .ex-row.solo .title { font-size: 19px; }
  .ex-row { padding: 16px 0; }
  .ex-row .title { font-size: 15px; }
  .ex-group-label { margin-top: 44px; }
  .press { padding-top: 44px; }
  .press-list { margin-top: 12px; }
  .press-row { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
  .press-row .logo-slot { width: 120px; height: 20px; }
  .press-row .headline { font-size: 14px; line-height: 1.45; }
  .press-row .read { display: none; }
}

/* ---------- hello (about + contact) ---------- */
.hello { padding-top: 64px; display: grid; grid-template-columns: 4fr 5fr; gap: 64px; align-items: start; }
.hello-side { display: flex; flex-direction: column; gap: 56px; }
.hello-lede { font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; max-width: 30ch; }
.hello-copy { font-size: 17px; line-height: 1.6; color: var(--ink3); max-width: 56ch; display: flex; flex-direction: column; gap: 20px; margin-top: -24px; }
.hello-contact { display: flex; flex-direction: column; gap: 18px; padding-top: 40px; border-top: 1px solid var(--line); }
.contact-big { font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; word-break: break-word; }
.contact-list { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
@media (max-width: 899px) {
  .page-title { padding-top: 40px; }
  .hello { padding-top: 32px; grid-template-columns: 1fr; gap: 28px; }
  .hello-side { gap: 40px; }
  .hello-copy { margin-top: -16px; }
  .hello-contact { padding-top: 28px; }
}