/* Balanced pages (Omran, 27 Oct): generous, even side margins on Research + Conceptual Studies project pages and the
   Majlis Talks index (body.bal), the long English text set in two balanced columns, and the "As featured in" press row.
   Loaded last. Top paddings keep the old --m so the header/nav height does not change; only the sides move.
   The same project content inside the expand panel (.xp-stage) gets its own, panel-relative rules at the end. */
.bal{--sm:clamp(1.5rem,9vw,10rem)}
@media (max-width:767px){.bal{--sm:1.5rem}}
.bal .header{padding-left:var(--sm);padding-right:var(--sm)}
.bal .footer{padding-left:var(--sm);padding-right:var(--sm)}
.bal .mini{right:var(--sm)}
.bal .d-head,.bal .project .p-body,.bal .project .interlude,.bal .p-gallery,.bal .cs-figure,.bal .ph-hero,.bal .pt-list{padding-left:var(--sm);padding-right:var(--sm)}
.bal .p-hero,.bal .p-next{margin-left:var(--sm);margin-right:var(--sm)}

/* ---- "As featured in" press row: plain, centred directly under the research hero photo ---- */
.d-press{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 2rem;margin:clamp(1.1rem,1.8vw,1.6rem) var(--sm) 0;padding:0}
.d-press-l{color:var(--grey);margin:0;white-space:nowrap}
.d-press-l .ar{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:1.25em;margin-left:.35em}
.d-press-row{display:flex;flex-wrap:nowrap;align-items:center;gap:1rem 1.9rem;margin:0;padding:0;list-style:none}
.d-press-row li{margin:0;padding:0;line-height:0}
.d-press-row a{display:inline-flex;align-items:center;color:#707070;transition:color .3s ease,opacity .3s ease;padding:.3rem 0}
.d-press-row a:hover,.d-press-row a:focus-visible{color:#111111}
.d-press-row svg{display:block;width:auto;fill:currentColor}
.d-press-row .pl-architectural-digest{height:19px}
.d-press-row .pl-designboom{height:13px}
.d-press-row .pl-domus{height:15px}
.d-press+.r-head{padding-top:clamp(1.75rem,3vw,2.75rem)}
@media (max-width:767px){
  .d-press{gap:.35rem 1.4rem;margin-top:.9rem}
  .d-press-row{gap:.8rem 1.4rem}
  .d-press-row .pl-architectural-digest{height:16px}.d-press-row .pl-designboom{height:11px}.d-press-row .pl-domus{height:13px}
}

/* ---- Research body: facts | Arabic summary on top, then the English text in two columns ---- */
@media (min-width:992px){
  .bal .project .p-body{column-gap:clamp(2rem,4vw,4rem)}
  .bal .project .facts{grid-column:1/span 5;grid-row:auto;position:static}
  .bal .project .p-body>.ar-sum{grid-column:7/span 6;grid-row:1;margin:0;max-width:none}
  .bal .project .p-body>.bal-cols{grid-column:1/-1;max-width:none;columns:2;column-gap:clamp(3rem,4.2vw,4rem);column-fill:balance;margin-top:clamp(2.5rem,4vw,3.5rem)}
  .bal .project .p-body>.bal-cols>blockquote,.bal .project .p-body>.bal-cols>.lede{column-span:all;max-width:34em}
  .bal .project .p-body>.bal-cols>.lede{max-width:40em}
  .bal .project .p-body>.bal-cols h3{break-after:avoid;margin-top:1.6em}
  .bal .project .p-body>.bal-cols>h3:first-child{margin-top:0}
  .bal .project .p-body>.bal-cols p{break-inside:avoid-column;orphans:3;widows:3}
  .bal .project .p-body>figure.inset{grid-column:1/-1;justify-self:center;width:100%}
  .bal .project .p-body>figure.inset:not(.w-wide){max-width:min(46rem,100%,calc(34rem * var(--ar,1.5)))}
  .bal .project .p-body>figure.inset.w-wide{max-width:min(100%,calc(40rem * var(--ar,2)))}
}
/* tablet + phone: one column at full content width */
@media (max-width:991px){
  .bal .project .facts{grid-column:1/span 12;grid-row:auto;position:static;margin-bottom:2.4rem}
  .bal .project .p-body>:not(.facts){grid-column:1/span 12;max-width:40em}
  .bal .project .p-body>figure.inset{max-width:100%}
}
.bal .project .longtext{color:#111111}

/* ---- Majlis Talks index ---- */
.bal .pt-hero{padding-top:calc(clamp(1rem,2.2223vw,2rem) + 5rem)}
.bal .pt-hero .ph-title{margin-top:clamp(1.5rem,4vh,3rem)}
.bal .pt-hero .ph-sub{margin-top:clamp(1rem,1.6vw,1.5rem);align-items:start}
.bal .pt-hero .ph-sub .eyebrow{grid-column:1/span 2;padding-top:.5rem}
.bal .pt-hero .ph-lead{grid-column:3/span 8}
.bal .pt-hero .ph-lead .u-large{max-width:30em}
.bal .pt-intro{margin-top:clamp(2rem,3.2vw,3rem);padding-top:clamp(1.6rem,2.4vw,2.2rem);border-top:1px solid var(--line);align-items:start;column-gap:clamp(2rem,4vw,4rem)}
.bal .pt-intro .intro-en{grid-column:1/span 6;max-width:36em;font-size:clamp(1rem,1.12vw,1.125rem);line-height:1.65;color:#111111}
.bal .pt-intro .intro-ar{grid-column:7/span 6;font-size:clamp(1.12rem,1.3vw,1.28rem);line-height:1.85;color:#111111}
.bal .pt-intro .intro-ar p:first-child,.bal .pt-intro .intro-en p:first-child{margin-top:0}
.bal .pt-list{padding-top:clamp(2.5rem,4.5vw,4rem)}
@media (max-width:767px){
  .bal .pt-hero .ph-sub .eyebrow,.bal .pt-hero .ph-lead{grid-column:1/span 12}
  .bal .pt-intro .intro-en,.bal .pt-intro .intro-ar{grid-column:1/span 12}
  .bal .pt-intro{row-gap:1.6rem}
}

/* ---- Expand panel (index/concept): same order, panel-relative margins and columns ---- */
.xp-scroll{container-type:inline-size;container-name:xp}
.xp-stage .d-press{margin-top:1rem}
@container xp (min-width:900px){
  .xp-stage{--m:clamp(2rem,6cqw,5rem)}
  .xp-stage .project .p-body{column-gap:clamp(2rem,4cqw,3.5rem)}
  .xp-stage .project .facts{grid-column:1/span 5;grid-row:auto;position:static}
  .xp-stage .project .p-body>.ar-sum{grid-column:7/span 6;grid-row:1;margin:0;max-width:none}
  .xp-stage .project .p-body>.bal-cols{grid-column:1/-1;max-width:none;columns:2;column-gap:clamp(2.5rem,4.5cqw,4rem);column-fill:balance;margin-top:clamp(2rem,4cqw,3rem)}
  .xp-stage .project .p-body>.bal-cols>blockquote,.xp-stage .project .p-body>.bal-cols>.lede{column-span:all;max-width:36em}
  .xp-stage .project .p-body>.bal-cols h3{break-after:avoid;margin-top:1.6em}
  .xp-stage .project .p-body>.bal-cols>h3:first-child{margin-top:0}
  .xp-stage .project .p-body>.bal-cols p{break-inside:avoid-column}
  .xp-stage .project .p-body>figure.inset{grid-column:1/-1;justify-self:center;width:100%}
  .xp-stage .project .p-body>figure.inset:not(.w-wide){max-width:min(46rem,100%,calc(34rem * var(--ar,1.5)))}
}
@container xp (max-width:899.98px){
  .xp-stage .project .facts{grid-column:1/span 12;grid-row:auto;position:static;margin-bottom:2.4rem}
  .xp-stage .project .p-body>:not(.facts){grid-column:1/span 12}
}

/* ---- site-wide side margins (27 Oct, 2nd pass): the footer on every page, the home grids, the index pages ---- */
:root{--sm:clamp(1.5rem,9vw,10rem)}
@media (max-width:767px){:root{--sm:1.5rem}}
.footer{padding:clamp(2.5rem,4vw,3.5rem) var(--sm) 1.4rem}
.foot-top{row-gap:2rem}
.foot-word{margin-top:clamp(2rem,4vw,3.5rem)}
.foot-word img{width:min(100%,56rem)}
.foot-bottom{margin-top:clamp(1.25rem,2.4vw,2rem)}
.page-home .works,.page-home .index,.page-home .strip,.bal .works,.bal .cs-grid,.bal .ph-list,.bal .strip{padding-left:var(--sm);padding-right:var(--sm)}
.page-home main>section:last-child,.bal main>section:last-child{padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.bal .p-next{margin-bottom:0}
@media (max-width:767px){
  .footer{padding:2.25rem var(--sm) 1.2rem}
  .foot-word{margin-top:1.75rem}
}
@media (max-width:767px){
  .page-home .strip-row,.bal .strip-row{margin:0 calc(var(--sm)*-1);padding:0 var(--sm);scroll-padding-left:var(--sm);scroll-padding-right:var(--sm)}
}

/* ---- Majlis Talks index list, option C (27 Oct): newest article large across the grid, then three columns;
   phone: two small columns (subtitle + Read hidden on the small cards). Sketches uncropped on the paper colour. ---- */
.ml .strip-head{margin-bottom:clamp(1.5rem,2.4vw,2.2rem)}
.ml-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2.2rem,3.2vw,3rem) clamp(1.25rem,2.2vw,2rem)}
.ml-card{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.ml-cover{display:block;background:var(--n-paper,var(--paper,#f4f3ef));aspect-ratio:4/3;overflow:hidden}
.ml-cover picture,.ml-cover img{display:block;width:100%;height:100%}
.ml-cover img{object-fit:contain!important;mix-blend-mode:multiply;transition:transform 1.1s var(--ease-2,ease)}
html.mt-scope.is-night .ml-cover img{mix-blend-mode:screen!important}
@media (hover:hover){.ml-card:hover .ml-cover img{transform:scale(1.035)}}
.ml-meta{display:flex;gap:.9rem;color:var(--n-grey,var(--grey));margin-top:.35rem}
.ml-title{display:block;line-height:1.08;text-wrap:balance;color:var(--n-ink,#111111)}
.ml-ex{color:var(--n-soft,#3d3d3a);text-wrap:pretty;max-width:34em}
.ml-foot{display:flex;gap:1.4rem;align-items:baseline;flex-wrap:wrap}
.ml-wc{color:var(--n-grey,var(--grey));white-space:normal}
.ml-lead{grid-column:1/-1;display:grid;grid-template-columns:2fr 1fr;column-gap:clamp(1.25rem,2.2vw,2rem);align-items:end;
  padding-bottom:clamp(2rem,3vw,2.8rem);border-bottom:1px solid color-mix(in srgb,var(--n-ink,#111) calc(var(--n-line-a,.14)*100%),transparent)}
.ml-lead>*{grid-column:2}
.ml-lead .ml-cover{grid-column:1;grid-row:1/span 5;aspect-ratio:16/10}
.ml-lead .ml-meta{margin-top:0}
.ml-lead .ml-title{font-size:clamp(2rem,3.3vw,3.2rem)}
.ml-lead .ml-ex{font-size:1.06rem}
.ml-grid>.ml-card:not(.ml-lead) .ml-title{font-size:clamp(1.3rem,1.8vw,1.75rem)}
.ml-grid>.ml-card:not(.ml-lead) .ml-ex{font-size:.95rem}
@media (max-width:991px){
  .ml-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ml-lead{grid-template-columns:1fr}.ml-lead>*,.ml-lead .ml-cover{grid-column:1;grid-row:auto}
}
@media (max-width:600px){
  .ml-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.9rem;row-gap:1.8rem}
  .ml-grid>.ml-card:not(.ml-lead) .ml-ex,.ml-grid>.ml-card:not(.ml-lead) .ml-go{display:none}
  .ml-grid>.ml-card:not(.ml-lead) .ml-title{font-size:1.05rem}
  .ml-grid>.ml-card:not(.ml-lead) .ml-meta{flex-direction:column;gap:.1rem}
}

/* ---- Majlis Talks index header (27 Oct): tagline beside the big heading, on the Arabic intro's column line (col 7),
   bottom-aligned with "TALKS"; the old tagline row is gone, so the intro moves up. Phone: tagline under the heading. ---- */
.bal .pt-hero .pt-top{align-items:end;column-gap:clamp(2rem,4vw,4rem)}
.bal .pt-hero .pt-top .ph-title{grid-column:1/span 6;margin-top:clamp(1.5rem,4vh,3rem)}
.bal .pt-hero .pt-tag{grid-column:7/span 5;margin:0;max-width:24em;padding-bottom:.35em;text-wrap:balance;color:var(--n-ink,#111111)}
.bal .pt-hero .pt-top+.ph-sub{margin-top:clamp(.9rem,1.4vw,1.25rem)}
@media (max-width:767px){
  .bal .pt-hero .pt-top .ph-title,.bal .pt-hero .pt-tag{grid-column:1/span 12}
  .bal .pt-hero .pt-tag{margin-top:1.1rem;padding-bottom:0}
}
/* Day/Night slider on the Majlis index: follow the wider header margin so it never sits on the Arabic logo */
@media (min-width:761px){
  .bal .nt-ctl{right:calc(var(--sm) + 6.6rem)}
  .bal .mini.is-on+.nt-ctl{right:calc(var(--sm) + 13.5rem)}
}
@media (min-width:761px) and (max-width:991px){.bal .nt-ctl{right:calc(var(--sm) + 9.6rem)}}

/* ---- footer links: Arabic beside the English, smaller and lighter, same line (Omran 27 Oct) ----
   desktop/tablet: one line each (the Arabic of the long first link runs into the empty top of the map column);
   phone (<=767): no room beside "Conceptual Studies", so every Arabic label sits just under its English, aligned
   to its start, so the four read the same way */
.foot-nav a{display:flex;align-items:baseline;flex-wrap:nowrap;column-gap:.55em;white-space:nowrap}
.foot-nav .fn-ar{font-size:.46em;line-height:1;letter-spacing:0;font-weight:400;color:rgba(252,252,250,.5);transition:color .3s ease;white-space:nowrap}
@media (hover:hover){.foot-nav a:hover .fn-ar{color:rgba(252,252,250,.85)}}
@media (max-width:767px){
  .foot-nav{gap:.55rem}
  .foot-nav a{flex-direction:column;align-items:flex-start}
  .foot-nav .fn-ar{font-size:.5em;line-height:1.25;margin-top:.05em}
}

/* ---- TEST 27 Oct: footer links show English only; on hover the English rolls up and the Arabic rolls in, in place ----
   overrides the side-by-side Arabic above. Touch screens (no hover) just see the English. */
.foot-nav a{position:relative;display:block;width:max-content;overflow:hidden;column-gap:0}
.foot-nav .roll>span{text-shadow:none}
.foot-nav .fn-ar{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;font-size:.86em;line-height:1;
  color:#fcfcfa;transform:translateY(105%);transition:transform .545s var(--ease-2)}
@media (hover:hover){
  .foot-nav a:hover .roll>span,.foot-nav a:focus-visible .roll>span{transform:translateY(-110%)}
  .foot-nav a:hover .fn-ar,.foot-nav a:focus-visible .fn-ar{transform:none;color:#fcfcfa}
}
@media (max-width:767px){.foot-nav a{flex-direction:row}.foot-nav .fn-ar{font-size:.86em;margin-top:0}}
@media (hover:none){.foot-nav .fn-ar{display:none}}