/* Zawyeh Space — holding site.
   One blue, one paper, two type families, taken from the building drawings.
   Dashed means not yet; solid means real. Generated pages, hand-written CSS.
   Temporary: superseded by the Payload app. See README.md. */

:root {
  --ink: #00119b;
  --ink-06: rgba(0, 17, 155, 0.06);
  --ink-12: rgba(0, 17, 155, 0.12);
  --ink-35: rgba(0, 17, 155, 0.35);
  --ink-55: rgba(0, 17, 155, 0.55);
  --paper: #ffffff;
  --sans: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --gutter: 56px;
  --maxw: 1440px;
}

@media (max-width: 720px) { :root { --gutter: 20px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.72; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

h1, h2, h3 { font-weight: 600; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.muted { opacity: 0.6; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Arabic is a connected script: tracking pulls the joins apart, and IBM Plex
   Mono carries no Arabic at all. The label style changes rather than being
   merely translated. */
[dir="rtl"] .mono,
[dir="rtl"] .menu-open,
[dir="rtl"] .menu__out,
[dir="rtl"] .card__meta,
[dir="rtl"] .tag,
[dir="rtl"] .chip,
[dir="rtl"] .fig__l,
[dir="rtl"] .footer,
[dir="rtl"] .lbl--sub {
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
[dir="rtl"] .mono { font-size: 13px; }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px dashed var(--ink-55); }

.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 76px; padding-block: 14px;
}

.wordmark { display: block; line-height: 0; color: var(--ink); }

.mark { display: block; width: auto; }
.mark--wordmark { height: 52px; }
.menu__sun { height: 76px; color: var(--paper); }

@media (max-width: 720px) {
  .mark--wordmark { height: 38px; }
}

.menu-open {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
  border: 0; background: none; color: var(--ink); cursor: pointer;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
}
[dir="rtl"] .menu-open { font-size: 15px; }
.menu-open svg { width: 22px; height: 12px; }


/* ---------- menu overlay ---------- */

.lang-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }
.lang-pill__on { padding: 3px 11px; border: 1.5px solid currentColor; border-radius: 999px; }

.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column;
  padding: 0 var(--gutter) 40px; overflow-y: auto;
}
.menu[hidden] { display: none; }

.menu__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 116px; flex-shrink: 0; }
.menu__tools { display: flex; align-items: center; gap: 28px; color: var(--paper); }

/* Visit us: a utility beside the language switch, not one of the four
   sections. Same size and face as the pill so the two read as one row. */
.menu__visit {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper); border-bottom: 1.5px solid rgba(255, 255, 255, 0.55); padding-bottom: 2px;
}
.menu__visit:hover { opacity: 1; border-bottom-color: var(--paper); }
[dir="rtl"] .menu__visit { font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; }
@media (max-width: 480px) { .menu__tools { gap: 16px; } }

.menu-close {
  width: 52px; height: 52px; border: 0; background: none; color: var(--paper);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.menu-close svg { width: 40px; height: 40px; }

.menu__main {
  flex-grow: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Top-aligned, not centred: News carries a "soon" note and centring each
     cell on its own height lifted that one label above the other three. */
  align-items: start; align-content: center; gap: 40px 24px; padding-block: 40px;
}

.menu__item { display: block; text-align: center; color: var(--paper); }
.menu__item:hover { opacity: 1; }
.menu__label { display: block; font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; line-height: 1.1; }
.menu__note { display: block; margin-top: 10px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.06em; opacity: 0.9; }

a.menu__item .menu__label { border-bottom: 2px solid transparent; padding-bottom: 4px; }
a.menu__item:hover .menu__label,
a.menu__item:focus-visible .menu__label,
a.menu__item[aria-current] .menu__label { border-bottom-color: var(--paper); }

.menu__item--soon { opacity: 0.55; }
.menu__item--soon .menu__label { border-bottom: 2px dashed rgba(255, 255, 255, 0.6); padding-bottom: 4px; }

.menu__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; flex-shrink: 0; }
.menu__commons { display: flex; align-items: center; gap: 18px; font-size: clamp(20px, 2vw, 28px); margin-inline-start: auto; }
.menu__commons a { color: var(--paper); }
.menu__commons a:hover { opacity: 1; border-bottom: 2px solid var(--paper); }
.menu__commons .is-soon { opacity: 0.55; border-bottom: 2px dashed rgba(255, 255, 255, 0.55); }
.menu__commons .sep { opacity: 0.45; font-size: 0.8em; }
.menu__out { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--paper); }
.menu :focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

body.menu-is-open { overflow: hidden; }

@media (max-width: 860px) {
  .menu__main { grid-template-columns: 1fr; gap: 26px; padding-block: 24px; align-content: center; }
  .menu__item { text-align: start; }
  .menu__label { font-size: 34px; }
  .menu__note { margin-top: 4px; font-size: 13px; }
  .menu__bar { min-height: 84px; }
  .menu__commons { margin-inline-start: 0; font-size: 20px; gap: 12px; }
  .menu__foot { justify-content: flex-start; }
}

/* ---------- hero + building ---------- */

.hero { padding-block: 44px 10px; }
.hero__lead { max-width: 1040px; }
.hero__kicker { opacity: 0.6; margin-bottom: 12px; }
.hero__title {
  margin: 0; font-size: clamp(27px, 3.4vw, 46px); line-height: 1.16;
  letter-spacing: -0.02em; text-wrap: balance;
  font-weight: 400;  /* not the 600 h1 inherits globally */
}
.hero__sub { margin: 18px 0 0; max-width: 480px; font-size: 16px; opacity: 0.82; }

/* The drawing wants air above it; the line of text should not sit on the roof. */
.building { margin-top: 72px; margin-bottom: 52px; }
/* With the hero copy gone the drawing is the first thing on the page. */
.building--lead { margin-top: 72px; }
@media (max-width: 720px) {
  .building, .building--lead { margin-top: 40px; margin-bottom: 36px; }
}
/* Pulled in from the full measure: at 100% the elevation dominated the
   page and crowded the line above it. Full width still on phones. */
.building svg { display: block; width: 82%; max-width: 1080px; height: auto;
  margin-inline: auto; overflow: visible; }
@media (max-width: 720px) { .building svg { width: 100%; } }

.lvl {
  /* Opaque, not translucent: an upper level has to hide what sits under it. */
  fill: #f0f1f9; stroke: var(--ink); stroke-width: 2; transition: fill 150ms ease;
}
.lvl:hover, .zone-on .lvl { fill: #b2b8e1; }

/* On the flat elevation the zones sit OVER the drawing rather than being
   slabs of their own, so they start invisible and only tint on hover. */
.lvl--flat { fill: transparent; stroke: none; }
.lvl--flat:hover, .zone-on .lvl--flat { fill: rgba(0, 17, 155, 0.13); }
g[data-zone]:hover .lvl--flat { fill: rgba(0, 17, 155, 0.13); }
g[data-zone]:hover .lbl { opacity: 1; }

/* text-anchor is resolved against the inline base direction, so on the Arabic
   page "start" anchors at the RIGHT and the labels run back across the
   drawing. The geometry is LTR; only the glyphs are RTL, and bidi still
   shapes them correctly inside an LTR box. */
.lbl, .lbl--sub { direction: ltr; }

.lbl { font-family: var(--sans); font-size: 21px; font-weight: 600; fill: var(--ink); opacity: 0.45; transition: opacity 150ms ease; }
.lbl--sub { font-family: var(--mono); font-size: 12.5px; font-weight: 400; opacity: 0.28; }
.zone-on .lbl { opacity: 1; }
.zone-on .lbl--sub { opacity: 0.75; }

@media (max-width: 720px) {
  /* SVG user units scale with the viewBox, so this is large on purpose. */
  .lbl { font-size: 46px; }
  .lbl--sub { display: none; }
}

/* ---------- the elevation ----------
   assets/elevation.svg is the supplied artwork, inlined untouched. Its own
   classes (.cls-1/2/3) come with it. The only thing overridden here is how
   the hairlines RENDER: declared at .5 and .25 in an 1843-unit viewBox they
   land near a third of a pixel and all but vanish, so they are pinned to
   screen pixels instead. The geometry is not altered. */

.elevation .cls-2 { vector-effect: non-scaling-stroke; stroke-width: 0.9px; }
.elevation .cls-3 { vector-effect: non-scaling-stroke; stroke-width: 0.55px; }
.elevation .lbl { font-size: 26px; opacity: 0; }
.elevation g[data-zone]:hover .lbl { opacity: 1; }

/* ---------- shared blocks ---------- */

.section { padding-block: 0 56px; }

.rule { display: flex; align-items: center; gap: 16px; margin-block: 0 22px; }
.rule__label { flex-shrink: 0; }
.rule::after { content: ""; flex-grow: 1; border-top: 3px solid var(--ink); }


.empty {
  margin: 0 0 40px; padding: 26px 28px;
  border: 1.5px dashed var(--ink-55); border-radius: 2px;
  font-size: 16px; opacity: 0.85;
}

.more {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em;
  border-bottom: 1.5px solid var(--ink-35); padding-bottom: 2px;
}
[dir="rtl"] .more { font-family: var(--sans); letter-spacing: 0; font-size: 15px; }

.page__head { padding-block: 44px 34px; max-width: 900px; }
.page__h { margin: 0; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.12; letter-spacing: -0.02em; }
.page__lede { margin: 18px 0 0; font-size: 18px; line-height: 1.6; opacity: 0.82; max-width: 62ch; }

.prose p { margin: 0 0 16px; max-width: 60ch; }
.prose p:last-child { margin-bottom: 0; }

.contact { border-top: 3px solid var(--ink); padding-block: 28px 0; margin-top: 8px; }
.contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.contact__label { opacity: 0.6; margin-bottom: 8px; }
.contact__value { font-size: 17px; font-weight: 500; margin: 0; }
.contact__value a { border-bottom: 1.5px solid var(--ink-35); }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; gap: 22px; } }

.footer {
  margin-top: 48px; border-top: 1px dashed var(--ink-55); padding-block: 20px 40px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; opacity: 0.7;
}

/* ---------- event cards ---------- */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; margin-bottom: 52px; }
@media (max-width: 1080px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .cards { grid-template-columns: 1fr; } }

.card { min-width: 0; }
.card[hidden] { display: none; }

/* The Instagram posters are all 4:5, so the card frame is too and each one
   shows whole. An event with no poster gets a tinted field of the same shape
   carrying its format tag, so the grid stays even. */
.cover {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; aspect-ratio: 4 / 5; padding: 16px 18px; margin-bottom: 14px;
  border: 1.5px solid var(--ink); border-radius: 2px;
  font-family: var(--mono); overflow: hidden;
}
.cover__tag { font-size: clamp(16px, 2.1vw, 26px); line-height: 1.05; letter-spacing: -0.01em; }
.cover__yr { font-size: 12px; opacity: 0.75; flex-shrink: 0; }
.cover--a { background: var(--ink); color: var(--paper); }
.cover--b { background: #8c93d2; color: var(--paper); }
.cover--c { background: #b2b8e1; color: var(--ink); }
.cover--d { background: var(--ink-06); color: var(--ink); }

.card__meta {
  display: flex; justify-content: space-between; gap: 12px; margin: 0 0 7px;
  font-family: var(--mono); font-size: 12px; opacity: 0.72;
}
.card__title { margin: 0; font-size: 19px; line-height: 1.32; }
.card__who { margin: 7px 0 0; font-size: 14.5px; font-weight: 500; opacity: 0.9; }
.card__desc { margin: 7px 0 0; font-size: 14.5px; line-height: 1.6; opacity: 0.78; }
.card__tags { margin: 11px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* The sheet's entries are in English. Inside an RTL page they inherit RTL and
   throw trailing punctuation to the wrong end. Give them LTR order while
   keeping the block on the page's start edge. Remove once Arabic copy lands. */
[dir="rtl"] .card__title,
[dir="rtl"] .card__who,
[dir="rtl"] .card__desc,
[dir="rtl"] .entry__name,
[dir="rtl"] .entry__events { direction: ltr; text-align: right; }

.tag {
  display: inline-block; padding: 3px 9px; border: 1px solid var(--ink-35); border-radius: 2px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; opacity: 0.8; white-space: nowrap;
}
[dir="rtl"] .tag { font-size: 11.5px; }
.tag--prog { background: var(--ink); color: var(--paper); border-color: var(--ink); opacity: 1; }


/* ---------- programmes page ---------- */

.prog { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; padding-block: 34px 0; }
@media (max-width: 1000px) { .prog { grid-template-columns: 1fr; gap: 28px; } }

.prog__side { position: sticky; top: 24px; }
@media (max-width: 1000px) { .prog__side { position: static; } }

.prog__h { margin: 0 0 24px; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -0.02em; }

.month { margin: 34px 0 18px; font-family: var(--mono); font-size: 19px; letter-spacing: 0.06em; }
[dir="rtl"] .month { font-family: var(--sans); letter-spacing: 0; font-size: 21px; }
.month[hidden] { display: none; }

.noresults { padding: 22px 0; opacity: 0.7; }

/* calendar */
.cal { margin-bottom: 26px; max-width: 320px; }
/* Once the sidebar stacks it spans the full width, and an
   aspect-ratio grid would blow the cells up to 130px. */
.cal__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.cal__title { font-family: var(--mono); font-size: 18px; letter-spacing: 0.06em; }
[dir="rtl"] .cal__title { font-family: var(--sans); letter-spacing: 0; }
.cal__btn {
  width: 40px; height: 40px; border: 0; background: none; color: var(--ink);
  font-size: 20px; cursor: pointer; line-height: 1;
}
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow { font-family: var(--mono); font-size: 11px; text-align: center; opacity: 0.6; padding-bottom: 6px; }
.cal__cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12.5px; border: 0; background: none;
  color: var(--ink); opacity: 0.35; border-radius: 2px; padding: 0;
}
.cal__cell--has { opacity: 1; background: var(--ink-12); cursor: pointer; font-weight: 600; }
.cal__cell--has:hover { background: var(--ink-35); }
.cal__cell--on { background: var(--ink); color: var(--paper); }
.cal__note { margin: 12px 0 0; font-family: var(--mono); font-size: 11px; opacity: 0.6; line-height: 1.5; }
[dir="rtl"] .cal__note, [dir="rtl"] .cal__dow, [dir="rtl"] .cal__cell { font-family: var(--sans); }

/* filters */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  padding: 6px 13px; border: 1.5px solid var(--ink-35); border-radius: 2px;
  background: var(--paper); color: var(--ink); cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
}
[dir="rtl"] .chip { font-size: 13px; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- الفهرس page ---------- */

.alpha { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 24px; padding-block: 8px 0; }
@media (max-width: 720px) { .alpha { grid-template-columns: 1fr; gap: 4px; } }

.alpha__letter {
  margin: 0; font-family: var(--mono); font-size: 46px; line-height: 1;
  opacity: 0.25; position: sticky; top: 24px;
}
@media (max-width: 720px) { .alpha__letter { position: static; font-size: 30px; } }

.entries { margin: 0 0 28px; padding: 0; list-style: none; border-top: 3px solid var(--ink); }

.entry { padding: 18px 0; border-bottom: 1px dashed var(--ink-55); }
.entry__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.entry__name { margin: 0; font-size: 22px; line-height: 1.25; }
.entry__note { margin: 3px 0 0; font-size: 14px; opacity: 0.65; }
.entry__events { margin: 9px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.entry__events li {
  font-size: 13px; padding: 3px 10px; border: 1px solid var(--ink-35);
  border-radius: 2px; opacity: 0.85;
}

/* ---------- about ---------- */

.about__figures {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  border-block: 3px solid var(--ink); padding-block: 26px; margin-bottom: 48px;
}

.fig { display: flex; flex-direction: column; gap: 4px; }
.fig__n { font-size: clamp(38px, 5vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.fig__l { font-family: var(--mono); font-size: 11.5px; opacity: 0.7; }

.about__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-bottom: 52px; }
@media (max-width: 860px) { .about__cols { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- one event ---------- */

.ev { padding-block: 30px 0; }
.ev__back { margin: 0 0 30px; }

.ev__head { max-width: 900px; margin-bottom: 44px; }
.ev__kicker { opacity: 0.6; margin: 0 0 14px; }
.ev__title { margin: 0; font-size: clamp(32px, 5vw, 62px); line-height: 1.08; letter-spacing: -0.025em; }
.ev__alt { margin: 10px 0 0; font-size: clamp(22px, 2.6vw, 34px); opacity: 0.55; line-height: 1.2; }
.ev__desc { margin: 24px 0 0; font-size: 18px; line-height: 1.6; max-width: 58ch; opacity: 0.85; }

.ev__facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
  margin: 0 0 56px; border-block: 3px solid var(--ink); padding-block: 24px;
}
@media (max-width: 860px) { .ev__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 480px) { .ev__facts { grid-template-columns: 1fr; } }

.ev__facts dt { opacity: 0.6; margin-bottom: 7px; }
.ev__facts dd { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.45; }

/* schedule */
.sched { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 20px; }
@media (max-width: 860px) { .sched { grid-template-columns: 1fr; gap: 20px; } }

.sched__day { border-top: 3px solid var(--ink); padding-top: 16px; }
.sched__date { margin: 0 0 12px; font-size: 18px; }
.sched__list { margin: 0; padding: 0; list-style: none; }

.sched__row {
  display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 14px;
  padding: 11px 0; border-bottom: 1px dashed var(--ink-55);
}
.sched__time { font-family: var(--mono); font-size: 12.5px; opacity: 0.7; padding-top: 3px; }
.sched__what { font-size: 15.5px; line-height: 1.5; }
[dir="rtl"] .sched__time { font-family: var(--sans); font-size: 14px; }

/* posters */
.poster { margin: 0; }
.poster img { display: block; width: 100%; height: auto; border: 1.5px solid var(--ink); border-radius: 2px; }

.poster--empty {
  aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--ink-55); border-radius: 2px;
  font-family: var(--mono); font-size: 11.5px; opacity: 0.6;
}
[dir="rtl"] .poster--empty { font-family: var(--sans); font-size: 13px; }

/* ---------- posters ---------- */

/* A card with real artwork shows it. Covers are 4:5 like the frame; the
   exhibition's 9:16 title poster is the exception and is cropped to it —
   the whole poster is on the event's own page. */
.cover--img { display: block; padding: 0; border: 1.5px solid var(--ink); overflow: hidden; }
.cover--img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

.ev__top { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 52px; align-items: start; }
@media (max-width: 900px) { .ev__top { grid-template-columns: 1fr; gap: 28px; } }

.ev__poster { margin: 0; }
.ev__poster img {
  display: block; width: 100%; height: auto;
  border: 1.5px solid var(--ink); border-radius: 2px;
}
@media (max-width: 900px) { .ev__poster { max-width: 340px; } }

.sched__day .poster { margin: 0 0 16px; }
.sched__day .poster img { display: block; width: 100%; height: auto;
  border: 1.5px solid var(--ink); border-radius: 2px; }

/* ---------- Out of Frame / خارج الإطار ----------
   One wall, repainted each round. The photographs carry the colour; the page
   around them stays in the site's one blue so five very different murals sit
   together. The stage stacks every frame on the same wall and wipes the next
   one in from the reading edge, the way a roller would. */

.menu__outs { display: flex; flex-direction: column; gap: 10px; }

.u { border-bottom: 1.5px solid var(--ink-35); }

.oof__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px;
  align-items: end; padding-block: 44px 34px;
}
.oof__kicker { opacity: 0.6; margin: 0 0 14px; }
.oof__title { margin: 0; font-size: clamp(44px, 8vw, 116px); line-height: 0.98; letter-spacing: -0.035em; }
[dir="rtl"] .oof__title { letter-spacing: 0; line-height: 1.1; }
.oof__alt { margin: 8px 0 0; font-size: clamp(22px, 3vw, 38px); line-height: 1.2; opacity: 0.5; }
.oof__lede { margin: 26px 0 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; max-width: 56ch; }
.oof__mark { display: block; width: clamp(96px, 14vw, 190px); height: auto; }
@media (max-width: 720px) {
  .oof__head { grid-template-columns: 1fr; gap: 20px; padding-block: 30px 24px; }
  .oof__mark { order: -1; width: 84px; }
}

/* the wall */
.wall { padding-block: 0 20px; }
.wall__stage {
  position: relative; aspect-ratio: 16 / 9; max-height: 76vh; width: 100%; overflow: hidden;
  border: 1.5px solid var(--ink); border-radius: 2px; background: var(--ink-06);
}
.wall__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; visibility: hidden;
}
.wall__img.is-on { visibility: visible; z-index: 2; }
.wall__img.was-on { visibility: visible; z-index: 1; }
.wall__img.is-wiping { animation: oof-wipe 900ms cubic-bezier(0.7, 0, 0.25, 1) both; }
[dir="rtl"] .wall__img.is-wiping { animation-name: oof-wipe-rtl; }
@keyframes oof-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes oof-wipe-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

/* The roller: a single blue edge that travels with the wipe. */
.wall__roller {
  position: absolute; top: 0; bottom: 0; left: 0; width: 5px; z-index: 3;
  background: var(--ink); opacity: 0; pointer-events: none;
}
.wall__roller.is-rolling { animation: oof-roll 900ms cubic-bezier(0.7, 0, 0.25, 1) both; }
[dir="rtl"] .wall__roller.is-rolling { animation-name: oof-roll-rtl; }
@keyframes oof-roll { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
@keyframes oof-roll-rtl { 0% { left: calc(100% - 5px); opacity: 1; } 92% { opacity: 1; } 100% { left: 0; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wall__img.is-wiping, .wall__roller.is-rolling { animation: none; }
}

.wall__tag {
  position: absolute; z-index: 4; inset-inline-start: 16px; bottom: 16px; margin: 0;
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 8px 14px; background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 2px; font-size: 15px; font-weight: 600;
}
.wall__tag-n { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
[dir="rtl"] .wall__tag-n { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 14px; }

.wall__rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.wall__btn {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0;
  padding: 0 0 8px; border: 0; border-bottom: 3px solid transparent; background: none;
  color: var(--ink); text-align: start; cursor: pointer; font: inherit;
}
.wall__btn:hover { opacity: 1; }
.wall__btn:hover .wall__thumb { opacity: 1; }
.wall__btn[aria-pressed="true"] { border-bottom-color: var(--ink); }
.wall__thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 6px;
  border: 1.5px solid var(--ink); border-radius: 2px; opacity: 0.55; transition: opacity 150ms ease;
}
.wall__btn[aria-pressed="true"] .wall__thumb { opacity: 1; }
.wall__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
[dir="rtl"] .wall__n { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 13px; }
.wall__who { font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.wall__when { font-size: 12.5px; opacity: 0.65; }
@media (max-width: 720px) {
  .wall__stage { aspect-ratio: 4 / 3; }
  .wall__rail { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .wall__who, .wall__when { display: none; }
  .wall__tag { inset-inline-start: 10px; bottom: 10px; font-size: 13.5px; padding: 6px 10px; }
}

/* about */
.oof__about { margin: 36px auto 64px; }
.oof__about .prose { max-width: 760px; }
.oof__about .prose p { font-size: 17px; }

/* one frame */
.frame { padding-top: 26px; margin-bottom: 88px; border-top: 3px solid var(--ink); scroll-margin-top: 20px; }
.frame__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 30px; }
.frame__n {
  margin: 0; font-family: var(--mono); font-size: clamp(64px, 9vw, 132px);
  line-height: 0.82; letter-spacing: -0.06em; font-weight: 500;
}
[dir="rtl"] .frame__n { font-family: var(--sans); letter-spacing: 0; line-height: 0.95; font-weight: 600; }
.frame__kicker { opacity: 0.6; margin: 4px 0 8px; }
.frame__title { margin: 0; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -0.02em; }
[dir="rtl"] .frame__title { letter-spacing: 0; }
.frame__alt { margin: 4px 0 0; font-size: clamp(18px, 1.8vw, 24px); opacity: 0.5; }
.frame__artist { margin: 12px 0 0; font-size: 18px; font-weight: 600; }
.frame__artist a { border-bottom: 1.5px solid var(--ink-35); }
.frame__artist-alt { font-weight: 400; opacity: 0.55; margin-inline-start: 8px; }

.frame__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px; align-items: start; }
.frame--flip .frame__lead { order: 2; }
@media (max-width: 960px) {
  .frame__body { grid-template-columns: 1fr; gap: 26px; }
  .frame--flip .frame__lead { order: 0; }
}
.frame__lead { margin: 0; }
.frame__lead img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1.5px solid var(--ink); border-radius: 2px;
}

.frame__facts { margin: 0 0 22px; padding: 0; border-bottom: 1px dashed var(--ink-55); }
.frame__facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px dashed var(--ink-55); }
.frame__facts dt { opacity: 0.6; padding-top: 3px; }
.frame__facts dd { margin: 0; font-size: 15.5px; font-weight: 500; }

.frame__lang { opacity: 0.55; margin: 0 0 10px; }
.frame__statement p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.65; }
.frame__statement p[lang="ar"] { font-size: 17.5px; }


.frame__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.frame__shot { margin: 0; min-width: 0; }
.frame__shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border: 1.5px solid var(--ink); border-radius: 2px;
}
@media (max-width: 720px) {
  .frame__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .frame__head { gap: 16px; }
}

/* homepage pointer */
.oof-teaser {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0;
  border: 2px solid var(--ink); border-radius: 2px; overflow: hidden;
}
.oof-teaser:hover { opacity: 1; }
.oof-teaser:hover .more { border-bottom-color: var(--ink); }
.oof-teaser__img img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.oof-teaser__body { display: flex; flex-direction: column; gap: 12px; justify-content: center; padding: 40px 44px; }
.oof-teaser__kicker { opacity: 0.6; }
.oof-teaser__h { font-size: clamp(30px, 4vw, 54px); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; }
[dir="rtl"] .oof-teaser__h { letter-spacing: 0; }
.oof-teaser__p { font-size: 16.5px; opacity: 0.82; max-width: 44ch; }
.oof-teaser .more { align-self: flex-start; margin-top: 6px; }
@media (max-width: 860px) {
  .oof-teaser { grid-template-columns: 1fr; }
  .oof-teaser__img img { aspect-ratio: 3 / 2; min-height: 0; }
  .oof-teaser__body { padding: 26px; }
}

.frame__more { margin: 20px 0 0; padding-top: 14px; border-top: 1.5px solid var(--ink); }
.frame__more a { font-weight: 600; font-size: 15.5px; }
.frame__shot--portrait a:hover { opacity: 0.85; }

/* ---------- الفهرس: one person ---------- */

.entry--page .entry__name a { border-bottom: 1.5px solid var(--ink-35); }

.person { padding-block: 30px 0; }
.person__top { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 52px; align-items: start; margin-bottom: 56px; }
@media (max-width: 900px) { .person__top { grid-template-columns: 1fr; gap: 26px; } }
.person__portrait { margin: 0; }
.person__portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border: 1.5px solid var(--ink); border-radius: 2px;
}
@media (max-width: 900px) { .person__portrait { max-width: 300px; } }
.person__kicker { opacity: 0.6; margin: 0 0 12px; }
.person__name { margin: 0; font-size: clamp(34px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.025em; }
[dir="rtl"] .person__name { letter-spacing: 0; line-height: 1.2; }
.person__alt { margin: 6px 0 0; font-size: clamp(20px, 2.4vw, 30px); opacity: 0.5; }
.person__ig { margin: 16px 0 0; font-family: var(--mono); font-size: 13px; }
.person__bio { margin-top: 26px; max-width: 64ch; }
.person__bio p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.65; }

.person__frame { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .person__frame { grid-template-columns: 1fr; gap: 22px; } }
.person__wall img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1.5px solid var(--ink); border-radius: 2px;
}
.person__wall:hover { opacity: 0.88; }
.person__frame-title { margin: 0 0 18px; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; }
.person__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .person__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.person__sub { margin: 40px 0 12px; opacity: 0.6; }

/* ---------- الفهرس: search, filter, three layouts ---------- */

.fahras__head { padding-bottom: 22px; }
.person__disc { margin: 14px 0 0; font-size: 15px; font-weight: 500; opacity: 0.8; }

.fx__tools {
  position: sticky; top: 0; z-index: 5; background: var(--paper);
  display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr) auto; gap: 14px 22px;
  align-items: center; padding-block: 14px; margin-bottom: 28px;
  border-block: 3px solid var(--ink);
}
@media (max-width: 900px) { .fx__tools { grid-template-columns: 1fr auto; } .fx__chips { grid-column: 1 / -1; order: 3; } }
.fx__search { position: relative; display: block; }
.fx__search svg { position: absolute; inset-inline-start: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); pointer-events: none; }
.fx__search input {
  width: 100%; height: 44px; padding-inline: 38px 12px;
  border: 1.5px solid var(--ink); border-radius: 2px; background: var(--paper);
  color: var(--ink); font: inherit; font-size: 16px;
}
.fx__search input::placeholder { color: var(--ink-55); }
.fx__search input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.fx__chips { margin: 0; }
.fx__none { padding: 26px 0; opacity: 0.7; }
.fx__clear { border-style: dashed; }
.fx__clear[hidden] { display: none; }
.fx__item[hidden], .fx__group[hidden] { display: none; }

/* ledger */
.entry__disc { margin: 6px 0 0; font-size: 14.5px; opacity: 0.75; }
.fahras--ledger .entry { display: block; }

/* cards */
.pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 30px 20px; }
.pcard { min-width: 0; }
.pcard__media {
  display: flex; align-items: flex-end; justify-content: flex-start; aspect-ratio: 4 / 5; margin-bottom: 12px;
  padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 2px; overflow: hidden;
  font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -0.03em;
}
.pcard__media--img { padding: 0; }
.pcard__media--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard__media--a { background: var(--ink); color: var(--paper); }
.pcard__media--b { background: #8c93d2; color: var(--paper); }
.pcard__media--c { background: #b2b8e1; color: var(--ink); }
.pcard__media--d { background: var(--ink-06); color: var(--ink); }
.pcard__name { margin: 0; font-size: 17px; line-height: 1.3; }
.pcard__name a { border-bottom: 1.5px solid var(--ink-35); }
[dir="rtl"] .pcard__name { text-align: right; }
.pcard__disc { margin: 4px 0 0; font-size: 13.5px; opacity: 0.75; }

/* book */
.bk { columns: 3 280px; column-gap: 48px; }
.bk__group { break-inside: avoid-column; margin-bottom: 26px; }
.bk__letter { margin: 0 0 8px; font-family: var(--mono); font-size: 30px; line-height: 1; opacity: 0.3; }
.bk__list { list-style: none; margin: 0; padding: 0; }
.bk__row { break-inside: avoid; padding: 6px 0; }
.bk__line { display: flex; align-items: baseline; gap: 6px; }
.bk__name { font-size: 17px; font-weight: 600; }
.bk__name a { border-bottom: 1.5px solid var(--ink-35); }
.bk__disc { margin: 1px 0 0; font-size: 13.5px; opacity: 0.7; }

/* ---------- projects ---------- */

.proj {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 52px; align-items: start;
  border-top: 3px solid var(--ink); padding-block: 36px 60px;
}
.proj--flip .proj__media { order: 2; }
@media (max-width: 900px) {
  .proj { grid-template-columns: 1fr; gap: 26px; }
  .proj--flip .proj__media { order: 0; }
}

.proj__media { display: block; margin: 0; border: 1.5px solid var(--ink); border-radius: 2px; overflow: hidden; }
.proj__media:hover { opacity: 1; }
.proj__media img { display: block; width: 100%; height: auto; }

/* No photograph for Nasayeb: the word itself, set as the cover. */
.proj__media--word {
  aspect-ratio: 1440 / 1028; display: flex; align-items: center; justify-content: center;
  font-size: clamp(64px, 11vw, 150px); font-weight: 600; line-height: 1;
}

.proj__kicker { opacity: 0.6; margin: 0 0 12px; }
.proj__title { margin: 0; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -0.02em; }
.proj__title a:hover { opacity: 0.72; }
.proj__alt { margin: 6px 0 22px; font-size: clamp(20px, 2.2vw, 28px); opacity: 0.55; line-height: 1.2; }

.proj__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin: 26px 0 24px; border-block: 1px dashed var(--ink-55); padding-block: 16px;
}
.proj__facts dt { opacity: 0.6; margin-bottom: 5px; }
.proj__facts dd { margin: 0; font-size: 17px; font-weight: 500; }

.proj__sub { margin: 28px 0 8px; opacity: 0.6; font-weight: 400; }
.proj__list { margin: 0 0 26px; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.proj__list li {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px;
  padding: 12px 0; border-bottom: 1px dashed var(--ink-55);
}
@media (max-width: 480px) { .proj__list li { grid-template-columns: 1fr; gap: 2px; } }
.proj__name { font-weight: 600; }
.proj__what { font-size: 15px; opacity: 0.8; }

/* The one number the site shows: how many people carry each tag. */
.chip__n { opacity: 0.6; margin-inline-start: 2px; }
.chip.is-on .chip__n { opacity: 0.8; }

/* نسايب — the partner collectives who run recurring sessions. Not a format,
   so it reads as its own mark rather than sitting among workshop/talk/reading. */
.tag--nasayeb {
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); font-weight: 600; opacity: 1;
}
.chip--nasayeb { border-color: var(--ink); font-weight: 600; }

/* The `hidden` attribute loses to any explicit display rule — .cards is a
   grid, so a hidden month still laid out as an empty grid carrying its 52px
   margin, which is what opened the void when filtering. Settle it once for
   every element rather than per component. */
[hidden] { display: none !important; }

/* ---------- the three commons, on the about page ---------- */

.commons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 900px) { .commons { grid-template-columns: 1fr; gap: 28px; } }

.commons__item { border-top: 3px solid var(--ink); padding-top: 16px; }
.commons__item p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; opacity: 0.85; }
.commons__item p:last-child { margin-bottom: 0; }

.commons__name {
  margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px;
  font-size: 26px; line-height: 1.2; flex-wrap: wrap;
}
.commons__tr { font-family: var(--mono); font-size: 13px; font-weight: 400; opacity: 0.6; }
[dir="rtl"] .commons__tr { font-size: 14px; }

/* ---------- the first screen ----------
   The line and the drawing fill the viewport on their own, so nothing from
   What's On shows at the bottom edge. The drawing is held by HEIGHT rather
   than width: capping the width still let a short wide window push the next
   section into view, whereas a max-height cannot. svh, not vh, so a mobile
   browser's collapsing toolbar does not overshoot. */

.home-lead {
  /* 77px is the masthead: 76 plus its dashed rule. Subtracting it exactly
     is what keeps What's On off the bottom edge rather than peeking. */
  min-height: calc(100svh - 77px);
  display: flex;
  flex-direction: column;
}

.home-lead .building {
  /* .wrap carries margin:0 auto, and an auto margin beats a flex item's
     stretch — without this the row shrank to its content and collapsed. */
  width: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 56px 72px;
}

.home-lead .building svg {
  /* Back to the size it was before the full-height first screen: the two do
     not fight, because min-height only sets a floor. An SVG with no definite
     width in a flex row falls back to the CSS default 300px, so the width is
     stated rather than left to max-width. The max-height is only a guard for
     short windows. */
  width: min(82%, 1080px);
  max-height: 60svh;
  height: auto;
}

@media (max-width: 720px) {
  /* A phone has no height to spare; let the page flow instead of forcing it. */
  .home-lead { min-height: 0; }
  .home-lead .building { margin-block: 32px 40px; }
  .home-lead .building svg { max-width: 100%; max-height: none; }
}