/* The opening keeps the cinema poster, identity and two equal paths within reach. */
.identity .home-intents {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 15px;
  margin: 14px 0 0;
  border-block: 1px solid var(--rule);
}
.identity .home-intents a { min-block-size: 44px; justify-content: space-between; }
.identity .identity-intro { margin-block-end: 0; }
.identity .signature { margin-block-start: clamp(10px,1.7vh,22px); }
.home-brief {
  color: #f7f7f2;
  background: #1c211f;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  align-items: start;
  gap: clamp(28px,7vw,116px);
  padding-block: clamp(42px,6vw,88px);
  scroll-margin-block-start: 8px;
}
.home-brief h2 {
  font-size: clamp(40px,5.4vw,82px);
  line-height: 1.12;
  max-inline-size: 14ch;
  margin: 0 0 26px;
  text-wrap: balance;
}
.home-brief-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.home-brief-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  text-decoration: none;
  border-block-end: 3px solid transparent;
}
.home-brief-nav a:is([aria-current],:hover,:focus-visible) { border-color: currentColor; }
.home-brief-nav a[aria-current] { font-weight: 700; }
.home-brief-body[hidden] { display: none; }
.home-brief-body h3 { margin: 0 0 12px; font-size: clamp(19px,1.9vw,28px); line-height: 1.4; }
.home-brief-prompts { list-style: none; padding: 0; margin: 0; counter-reset: prompt; }
.home-brief-prompts li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0,1fr);
  align-items: baseline;
  gap: 8px;
  padding-block: 9px;
  border-block-start: 1px solid #646b64;
  font-size: clamp(18px,1.9vw,28px);
  line-height: 1.45;
  counter-increment: prompt;
}
.home-brief-prompts li::before { content: counter(prompt,decimal-leading-zero); font-size: 14px; color: #c5ccbf; font-variant-numeric: tabular-nums; }
[dir="rtl"] .home-brief-prompts li::before { content: counter(prompt,arabic-indic); }
.home-brief-body p { max-inline-size: 55ch; margin: 10px 0 20px; color: #d0d5ce; line-height: 1.5; }
.home-brief-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px; }
.home-brief-actions a { display: inline-flex; align-items: center; min-block-size: 44px; }
.home-brief-actions .solid { background: #f7f7f2; color: var(--ink); border-color: #f7f7f2; }
.home-brief-actions .solid:is(:hover,:focus-visible) { background: #d5e0d3; color: #101411; }
.home-brief a:focus-visible { outline: 2px solid #dae5d4; outline-offset: 3px; }
.audience-reading { display: grid; margin-block: 18px 24px; }
.audience-reading a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
  border-block-start: 1px solid #646b64;
  text-decoration: none;
  min-block-size: 44px;
}
.audience-reading strong { display: block; font-size: clamp(21px,2vw,30px); line-height: 1.4; font-weight: 700; }
.audience-reading small { display: block; color: #d0d5ce; font-size: 18px; line-height: 1.5; margin-block-start: 5px; max-inline-size: 48ch; }
.audience-reading svg { inline-size: 24px; block-size: 24px; flex: none; }
[dir="rtl"] .audience-reading svg { transform:rotate(180deg); }
.audience-reading a:is(:hover,:focus-visible) strong { text-decoration: underline; text-underline-offset: 5px; }
.brief-preparation { border-block-start: 1px solid #646b64; margin-block: 20px 12px; }
.brief-preparation summary { cursor: pointer; padding-block: 12px; min-block-size: 44px; font-weight: 700; }
.brief-preparation .home-brief-prompts { margin-block-start: 12px; }
.brief-preparation .home-brief-prompts li { font-size: 18px; }
.home-brief-actions [data-home-start] { font-weight: 700; text-underline-offset: 5px; }
@media (max-width: 700px) {
  .home-brief { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .home-brief h2 { max-inline-size: 100%; margin-block-end: 7px; }
  .home-brief-prompts li { grid-template-columns: 1.6rem minmax(0,1fr); }
  .identity .home-intents { margin-block-start: 8px; }
}

.home-journey {
  --entry-direction: 1;
  background: #f2f0eb;
  padding-block: clamp(36px,5.6vw,85px);
  scroll-margin-block-start: 10px;
}
[dir="rtl"] .home-journey { --entry-direction: -1; }
[dir="rtl"] .home-chapter-year { text-align: right; }
.home-journey-header > h2 {
  margin: 0 0 clamp(14px,2.6vw,36px);
  font-size: clamp(29px,3.6vw,55px);
  line-height: 1.18;
  text-wrap: balance;
}
.home-chapter-nav {
  display: flex;
  align-items: stretch;
  gap: clamp(6px,2.8vw,48px);
  overflow-x: auto;
  border-block: 1px solid #bdb8b1;
  scrollbar-width: thin;
}
.home-chapter-nav a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-block-size: 48px;
  border-block-end: 3px solid transparent;
  padding-inline: 4px;
  font-size: clamp(15px,1.65vw,23px);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.home-chapter-nav a:is(:hover,:focus-visible,[aria-current]) { border-color: var(--ink); }
.home-chapter-nav [aria-current] { font-weight: 750; }
.home-chapter {
  display: grid;
  grid-template-columns: minmax(0,1.03fr) minmax(0,.97fr);
  align-items: center;
  column-gap: clamp(28px,6.4vw,100px);
  padding-block: clamp(25px,4vw,60px);
  touch-action: pan-y pinch-zoom;
}
.home-chapter[hidden] { display: none; }
.home-chapter-copy { min-inline-size: 0; }
.home-chapter-year {
  display: block;
  font-family: Alexandria,Tajawal,sans-serif;
  font-weight: 500;
  font-size: clamp(33px,4.3vw,68px);
  line-height: 1.13;
  margin-bottom: 8px;
  color: #53493d;
}
.home-chapter h3 { margin: 0 0 10px; line-height: 1.24; font-size: clamp(24px,2.9vw,44px); text-wrap: balance; }
.home-chapter-copy > p { margin: 0 0 12px; max-inline-size: 57ch; font-size: clamp(17px,1.65vw,22px); line-height: 1.6; }
.home-chapter-links { list-style: none; padding: 0; margin: 0 0 15px; display: flex; flex-wrap: wrap; gap: 0 18px; }
.home-chapter-links a, .home-journey-actions a, .home-chapter-open { display: inline-flex; align-items: center; min-block-size: 44px; }
.home-chapter-open { background: var(--ink); color: var(--white); text-decoration: none; font-weight: 650; padding: 9px 18px; }
.home-chapter-open:is(:hover,:focus-visible) { background: #403a36; }
.home-chapter-art { display: block; width: 100%; min-inline-size: 0; text-decoration: none; }
.home-chapter-art figure { margin: 0; }
.home-chapter-art img {
  display: block;
  width: 100%;
  height: clamp(180px,25vw,355px);
  object-fit: contain;
  background: #e4e1da;
}
.home-chapter-art figcaption { display: inline-flex; align-items: center; min-block-size: 40px; font-size: 15px; line-height: 1.45; }
.home-chapter-art:is(:hover,:focus-visible) figcaption { text-decoration: underline; }
.home-journey-actions { display: flex; flex-wrap: wrap; gap: 0 22px; border-block-start: 1px solid #bdb8b1; }
.home-journey-actions a { font-weight: 650; }
@media (prefers-reduced-motion: no-preference) {
  .home-chapter-forward { animation: chapter-forward .24s var(--ease) both; }
  .home-chapter-back { animation: chapter-back .24s var(--ease) both; }
}
@media (max-width:700px) {
  .home-chapter { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .home-chapter-nav { gap: 14px; }
  .home-chapter-art img { height: clamp(130px,43vw,246px); }
}

/* In the narrow opening, keep the identity in reading order and give the film its own frame. */
@media (max-width:700px) {
  .site-header { padding-block:6px 2px; row-gap:0; }
  .site-header nav { margin-block-start:0; }
  .site-header nav a { display:inline-flex; align-items:center; min-height:44px; padding-block:4px; }
  .exhibition { padding-block-start:16px; }
  .identity {
    position:relative;
    display:grid;
    grid-template-columns:max-content minmax(0,1fr);
    column-gap:14px;
    align-items:center;
  }
  .identity > * { min-width:0; grid-column:1/-1; }
  .identity h1 {
    padding-inline-end:clamp(75px,22vw,118px);
    margin-block:0 6px;
    font-size:clamp(34px,10.2vw,50px);
    line-height:1.09;
  }
  html[lang="en"] .identity h1 { font-size:clamp(27px,8.7vw,47px); }
  .identity .discipline { margin:3px 0; font-size:clamp(18px,4.6vw,22px); }
  .identity .identity-intro { line-height:1.4; }
  .identity .signature {
    grid-column:2;
    display:flex;
    justify-content:flex-end;
    margin:0;
    max-width:none;
    align-self:center;
    text-align:end;
    font-size:14px;
    line-height:1.25;
  }
  .signature-portrait {
    position:absolute;
    inset-inline-end:0;
    inset-block-start:-2px;
    width:clamp(65px,20vw,102px);
    height:clamp(72px,22vw,107px);
    background-image:url(/assets/display/portrait-badge.webp?v=8a05ec27);
    background-position:center 9%;
  }
  .agency-signature { display:inline-flex; align-items:center; min-height:44px; padding-block:4px; }
  .identity .credential-shelf { margin-block:0 12px; }
  .cinema-stage:not([hidden]) {
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"caption release" "art art" "actions actions";
  }
  .cinema-stage .film-caption { display:contents; }
  .cinema-stage .film-caption > div:first-child {
    grid-area:caption;
    padding:9px 12px 7px;
    align-self:center;
  }
  .cinema-stage .film-caption h2 { font-size:clamp(20px,5.7vw,30px); }
  .cinema-stage .film-caption > div > span { font-size:13px; }
  .cinema-stage .film-marquee {
    grid-area:release;
    display:grid;
    justify-content:end;
    align-content:center;
    gap:1px;
    padding:9px 12px 7px;
    text-align:end;
    border:0;
    font-size:13px;
  }
  .cinema-stage > .work-image {
    grid-area:art;
    width:100%;
    height:100%;
    border-block:1px solid #344040;
  }
  .cinema-stage .film-actions {
    grid-area:actions;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:0 12px;
    padding-inline:12px;
  }
  .cinema-stage .film-actions a { min-height:44px; }
}

/* Open the original work from its frame. The artwork keeps its full proportions. */
.stage-artwork {
  position: relative;
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  color: var(--white);
  background: var(--stage);
}
.stage-artwork > .work-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stage-artwork > .logo-image { background: var(--white); padding: clamp(20px,4vw,70px); }
.stage-open {
  position: absolute;
  inset-block-start: clamp(9px,1.25vw,18px);
  inset-inline-start: clamp(9px,1.25vw,18px);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-block-size: 44px;
  max-inline-size: calc(100% - 20px);
  padding: 5px 12px;
  border: 1px solid #94a5a2;
  background: #101818;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.stage-open svg { width: 19px; height: 19px; }
[dir="rtl"] .stage-open svg { transform: scaleX(-1); }
.stage-artwork:is(:hover,:focus-visible) .stage-open { background: var(--white); border-color: var(--white); color: #101818; }
.stage-artwork:focus-visible { outline: 3px solid white; outline-offset: -4px; }
a.film-marquee { text-decoration: none; min-height: 44px; }
a.film-marquee > span { text-decoration: underline; text-underline-offset: .21em; }
a.film-marquee:is(:hover,:focus-visible) { background: #23332f; color: var(--white); }
.showcase .work-select { flex-wrap: nowrap; justify-content: start; overflow-x: auto; overflow-y: hidden; gap: 0; }
.showcase .work-select a {
  flex: 1 0 0;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  justify-items: start;
  text-align: start;
  column-gap: clamp(5px,.65vw,10px);
  min-inline-size: 0;
  padding: 9px 5px;
  font-size: 16px;
  line-height: 1.25;
}
.showcase .work-select a[aria-current="true"]::after { bottom: 0; }
.showcase .work-select a:focus-visible { outline-offset: -3px; }
.showcase .work-select img { width: clamp(31px,3.1vw,48px); height: auto; }
@media (max-width:1100px) {
  .showcase .work-select a { flex: 0 0 auto; max-inline-size: 12rem; padding-inline: 9px; }
}
@media (max-width:700px) {
  .cinema-stage > .stage-artwork { grid-area: art; height: 100%; border-block: 1px solid #344040; }
  .showcase .work-select a { min-height: 48px; }
  .showcase .work-select img { width: 35px; }
}

.home-examples { max-width: 32rem; margin-top: .7rem; }
.home-example-picker summary,
.home-example-picker nav a,
.home-example figcaption a { min-height: 44px; align-content: center; }
.home-example-picker summary { cursor: pointer; width: fit-content; text-decoration: underline; text-underline-offset: .25em; }
.home-example-picker nav { display: flex; flex-wrap: wrap; gap: 0 1.2rem; padding-block: .2rem .7rem; }
.home-example-picker nav a { display: inline-flex; align-items: center; }
.home-example-picker [aria-current] { font-weight: 750; }
.home-example { margin: .3rem 0 0; border-block-start: 1px solid #646b64; }
.home-example > a { display: flex; align-items: center; gap: 1rem; text-decoration: none; padding-block: .85rem; }
.home-example img { width: clamp(6.25rem,12vw,10rem); height: auto; border-radius: 0; }
.home-example > a > span { display: grid; gap: .35rem; }
.home-example strong { font-size: clamp(1.1rem,1.9vw,1.6rem); }
.home-example small { color:#d0d5ce; font-size: .9rem; }
.home-example-read, .home-example figcaption a { text-decoration: underline; text-underline-offset: .22em; }
.home-example figcaption a { display: inline-flex; align-items: center; }
.home-example[hidden], .home-brief-actions [hidden] { display: none; }
.home-example figcaption { display:flex; flex-wrap:wrap; gap:0 1.25rem; }

.agency-signature { display:inline-flex; align-items:center; gap:.55rem; }

/* The opening prioritizes the person, the two paths and a compact learning selection. */
.identity .identity-name {
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(72px,6vw,108px);
  align-items:center;
  gap:20px;
  margin-block-end:22px;
}
.identity .identity-name h1 {
  margin:0;
  padding:0;
  font-size:clamp(34px,3.45vw,62px);
  line-height:1.18;
}
html[lang="en"] .identity .identity-name h1 { font-size:clamp(27px,2.65vw,48px); }
.identity .identity-name .signature-portrait {
  position:static;
  inline-size:100%;
  block-size:clamp(100px,8.5vw,148px);
  background-image:url(/assets/display/portrait-badge.webp?v=8a05ec27);
  background-position:center top;
  background-size:cover;
  align-self:end;
}
.identity .discipline { font-size:clamp(20px,1.6vw,27px); margin:0 0 10px; }
.identity .identity-intro { max-inline-size:34ch; margin:0 0 18px; line-height:1.6; }
.identity .signature { max-inline-size:none; margin-block:12px 20px; text-align:start; font-size:16px; justify-content:start; }
.identity .signature .agency-signature { min-block-size:44px; max-inline-size:38ch; }
.identity .credential-shelf { margin-block-start:0; max-inline-size:none; }
.identity .credential-shelf > .credential-marks { gap:10px; justify-content:space-between; }
.identity .credential-caption { margin-block-start:7px; min-block-size:42px; }
.identity .home-intents a { min-block-size:52px; }
@media(max-width:700px) {
  .identity .identity-name { grid-template-columns:minmax(0,1fr) 74px; gap:16px; margin-block-end:12px; }
  .identity .identity-name h1 { font-size:clamp(31px,9.2vw,43px); }
  html[lang="en"] .identity .identity-name h1 { font-size:clamp(25px,7.2vw,33px); }
  .identity .identity-name .signature-portrait { block-size:96px; }
  .identity .signature { grid-column:1/-1; margin-block:7px 8px; font-size:14px; }
  .identity .identity-intro { margin:3px 0 10px; }
  .identity .credential-shelf { margin-block:0 18px; }
  .identity .credential-shelf > .credential-marks { gap:6px; }
}