/* =========================================================
   Wonder Cabinet — Events App (v3 · FUNKY)
   Electric green + royal blue · Helvetica + Amiri
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root{
  /* ---- Signature palette (green page + blue ink) ---- */
  --bg:        #00d26a;   /* electric wondercabinet green */
  --bg-alt:    #f6f3ea;   /* warm paper for sections that need relief */
  --ink:       #1d24ff;   /* royal wondercabinet blue */
  --ink-soft:  #4850ff;
  --ink-mute:  #6b71ff;
  --paper:     #f6f3ea;
  --card:      #00d26a;
  --night:     #0a0a16;
  --highlight: #ffe65c;   /* yellow accent (weekend poster) */
  --orange:    #ff3b1d;   /* snake-orange accent */
  --green-hi:  #00ff41;   /* neon bright green */
  --pink:      #cc6698;   /* muted rose-pink */

  --rule:        var(--ink);
  --rule-strong: var(--ink);

  --ff-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-ar:   "Amiri", "Noto Naskh Arabic", "Geeza Pro", serif;

  --pad: clamp(20px, 4vw, 56px);
  --maxw: 1320px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: inherit; text-decoration: none; }
img{ display:block; max-width:100%; }
::selection{ background: var(--ink); color: var(--bg); }

/* ---------- TOP BAR ---------- */
.topbar{
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  height: 54px;
  overflow: hidden;
}

/* While browsing the past archive, the topbar isn't pinned to one edge —
   it works both ways. Scrolling up through history, it scrolls away as
   normal content ("part of the scroll") until it would pass the bottom
   edge, where it sticks. Scrolling back down toward today, it scrolls
   normally until it reaches the top edge, where it sticks there instead —
   same mechanism as the default topbar, just also anchored to the bottom. */
body.viewing-past .topbar{
  position: sticky; top: 0; bottom: 0;
}
/* This Week hero: deliberately UNCHANGED while viewing past — no
   position/height/transform override here. The whole site is one
   continuous timeline (archive above, this week's cards in the middle,
   future programme below): scrolling through any of it, in either
   direction, should always "go through" the hero's card-flip rather
   than have it disengage once the archive is open. Its scroll-lock
   (position:sticky + a JS runway keyed off the hero's own
   getBoundingClientRect().top) is entirely viewport-relative, so it
   pins and flips correctly no matter how far down the document the
   archive has pushed it — see setup()/onScroll() in index.html, which
   no longer special-case body.viewing-past either. */
.topbar-inner{
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  padding: 0;
  max-width: none;
  gap: 0;
}
.brand{
  display: flex; align-items: center;
  color: var(--ink);
}

/* Logo — CSS mask so it inherits --ink color from any theme */
.logo{
  display: block; flex-shrink: 0;
  background-color: var(--ink);
  -webkit-mask-image: url(wc-logo-white1.svg);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url(wc-logo-white1.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.brand .logo{ width: 38px; height: 38px; transition: none; }

/* ── Catalog-bar header cells ── */
.tpb-logo{
  display: flex; align-items: center;
  padding: 0 18px;
  border-right: 2px solid var(--ink);
  flex-shrink: 0;
  color: var(--ink);
  text-decoration: none;
}
.tpb-logo .logo{ width: 34px; height: 34px; }
.tpb-back{
  display: flex; align-items: center;
  padding: 0 18px;
  border-right: 2px solid var(--ink);
  font-family: var(--ff-sans);
  font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  color: var(--ink); text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.tpb-back:hover{ background: var(--ink); color: var(--bg); }
.tpb-label{
  flex: 1;
  display: flex; align-items: center;
  padding: 0 20px;
  font-family: var(--ff-sans);
  font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  color: var(--ink); opacity: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.tpb-nav{
  display: flex; align-items: stretch;
  margin-left: auto;
}
.tpb-nav a{
  display: flex; align-items: center;
  padding: 0 18px;
  border-left: 2px solid var(--ink);
  font-family: var(--ff-sans);
  font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  color: var(--ink); text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.tpb-nav a:hover{ background: var(--ink); color: var(--bg); }
.tpb-nav .lang-toggle{
  border: none; border-left: 2px solid var(--ink);
  border-radius: 0; padding: 0;
}
.tpb-nav .lang-toggle button{
  border-radius: 0; border: none;
  border-right: 1px solid var(--ink);
  height: 100%; padding: 0 14px;
}
.tpb-nav .lang-toggle button:last-child{ border-right: none; }

.topbar-right a{
  padding: 5px 12px;
  border: 2px solid var(--ink);
  transition: background .15s, color .15s;
}
.topbar-right a:hover{ background: var(--ink); color: var(--bg); }
.topbar-search{
  display: flex; align-items: center;
  width: 100%; max-width: 320px;
}
.topbar-search input{
  all: unset;
  width: 100%;
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  font-weight: 600; color: var(--ink);
  padding: 6px 0;
  border-bottom: 2px solid var(--ink);
  opacity: .7;
  transition: opacity .15s;
}
.topbar-search input::placeholder{ opacity: .45; }
.topbar-search input:focus{ outline: none; opacity: 1; }
.topbar-center{ justify-content: center; }
.brand .ar{ font-family: var(--ff-ar); font-size: 22px; font-weight: 700; letter-spacing: 0; text-transform: none; margin-left: 4px; }

.topbar-right{
  display: flex; justify-content: flex-end; align-items: center; gap: 22px;
  font-family: var(--ff-sans);
  font-size: 12px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  color: var(--ink);
}
/* nav link hover handled above */
.lang-toggle{ display: inline-flex; border: 2px solid var(--ink); }
.lang-toggle button{
  all: unset; cursor: pointer; padding: 6px 10px;
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700; color: var(--ink);
}
.lang-toggle button[aria-pressed="true"]{ background: var(--ink); color: var(--bg); }
.lang-toggle button + button{ border-left: 2px solid var(--ink); }

/* ---------- Kicker / small caps labels ---------- */
.kicker{
  font-family: var(--ff-sans);
  font-size: 12px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  color: var(--ink);
  display: flex; gap: 16px; align-items: center;
}
.kicker .rule{ flex: 1; height: 2px; background: var(--ink); }

/* ---------- HERO ---------- */
.hero{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) var(--pad) clamp(20px, 3vw, 36px);
  position: relative;
}
.hero h1{
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: clamp(64px, 12vw, 200px);
  line-height: .86;
  letter-spacing: 0;
  margin: 22px 0 0;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}
.hero h1 .ar{
  display: block;
  font-family: var(--ff-ar);
  font-weight: 700;
  font-size: .6em;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 16px;
  direction: rtl;
  color: var(--ink);
}
.hero-sub{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 64px);
  margin-top: clamp(24px, 3.5vw, 44px);
  padding-top: clamp(14px, 2vw, 24px);
  border-top: 2px solid var(--ink);
}
.hero-sub p{ margin: 0; color: var(--ink); font-size: 18px; line-height: 1.45; max-width: 52ch; font-weight: 500; }
.hero-sub .ar{ font-family: var(--ff-ar); direction: rtl; text-align: right; line-height: 1.85; font-size: 22px; font-weight: 400; }

/* Star accents */
.star{ display: inline-block; color: var(--ink); width: 1em; height: 1em; vertical-align: -0.15em; }

/* ---------- WEEK (horizontal) — plain page bg, hairline columns, 4:5 ratio ---------- */
.week{
  border-top: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 0;
  margin-top: clamp(28px, 4vw, 48px);
}
.week-head{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--pad) 14px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
}
.week-head h2{
  font-family: var(--ff-sans);
  font-weight: 700; font-size: clamp(28px, 3.5vw, 48px);
  letter-spacing: 0; text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.week-head h2 em{ font-style: normal; font-weight: 400; opacity: .65; }
.week-nav{ display: flex; gap: 8px; }
.week-nav button{
  all: unset; cursor: pointer; padding: 8px 14px; border: 2px solid var(--ink); color: var(--ink);
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
}
.week-nav button:hover{ background: var(--ink); color: var(--bg); }

.week-scroll{
  display: grid; grid-auto-flow: column;
  /* 4:5 portrait — width set, height computed via aspect-ratio on cards */
  grid-auto-columns: clamp(180px, 18vw, 240px);
  gap: 0;
  overflow-x: auto;
  padding: 0 var(--pad) 28px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  height: auto !important;
}
.week-scroll::-webkit-scrollbar{ height: 6px; }
.week-scroll::-webkit-scrollbar-thumb{ background: var(--ink); }

.week-card{
  scroll-snap-align: start;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-right: 1px solid var(--ink);
  padding: 16px 16px 14px;
  display: flex; flex-direction: column;
  aspect-ratio: 4 / 5;
  position: relative;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.week-card:last-child{ border-right: 0; }
.week-card:hover{ background: var(--ink); color: var(--bg); }
.week-card.today{ background: var(--highlight); color: var(--ink); }
.week-card.today:hover{ background: var(--ink); color: var(--highlight); }
.week-card.empty{ opacity: .42; pointer-events: none; }

.wc-date-row{ display: flex; justify-content: space-between; align-items: baseline; }
.wc-day{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(48px, 5.4vw, 72px); line-height: .85; letter-spacing: 0;
  font-variant-numeric: lining-nums;
}
.wc-dow{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  text-align: right;
}
.wc-dow .ar{ font-family: var(--ff-ar); font-size: 15px; letter-spacing: 0; direction: rtl; text-transform: none; font-weight: 400; }
.wc-type{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  margin: 14px 0 6px;
  opacity: .8;
}
.wc-title{
  font-family: var(--ff-sans); font-weight: 700; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.05;
  letter-spacing: 0; text-transform: uppercase;
  margin: 0; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.wc-title.wc-empty-mark{ font-weight: 400; opacity: .35; font-size: 28px; line-height: 1; }
.wc-meta{
  margin-top: auto; padding-top: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  opacity: .85;
}
.wc-meta .arrow{ opacity: .55; transition: transform .15s, opacity .15s; }
.week-card:hover .wc-meta .arrow{ opacity: 1; transform: translateX(4px); }

/* ---------- MONTHS ---------- */
.months{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad) 0;
}
.month-group{ margin-bottom: clamp(40px, 5vw, 72px); }
.month-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 0;
}
.month-head h2{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(56px, 10vw, 160px); line-height: .9;
  letter-spacing: 0; text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.month-head .ar{
  font-family: var(--ff-ar); direction: rtl;
  color: var(--ink); font-size: clamp(30px, 4vw, 60px);
  align-self: baseline; font-weight: 700;
}
.month-head .count{
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  color: var(--ink);
  justify-self: end;
}

/* ---------- MONTH SCHEDULE — dense CTM-style table ---------- */
.schedule{
  display: flex; flex-direction: column;
  font-family: var(--ff-sans);
}
.schedule-headrow{
  display: grid;
  grid-template-columns: 96px 96px 1.4fr 2.6fr 130px;
  gap: clamp(12px, 1.8vw, 24px);
  padding: 14px 0 8px;
  border-bottom: 1px solid var(--ink);
  font-size: 10px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  opacity: .55;
}
.schedule-headrow > div{ font-variant-numeric: tabular-nums; }

.schedule-row{
  display: grid;
  grid-template-columns: 96px 96px 1.4fr 2.6fr 130px;
  gap: clamp(12px, 1.8vw, 24px);
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
  transition: background .12s ease;
}
.schedule-row:hover{ background: color-mix(in oklab, var(--ink) 6%, transparent); }
.schedule-row:hover .sch-name{ text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Date cell — only first row of a day shows day-number; subsequent share blank */
.sch-date{ display: flex; flex-direction: column; line-height: 1; }
.sch-day{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(34px, 3.4vw, 48px); line-height: .9; letter-spacing: 0;
  font-variant-numeric: lining-nums;
}
.sch-dow{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  margin-top: 6px; opacity: .75;
}
.sch-dow .ar{ font-family: var(--ff-ar); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400; }

/* Time cell — stacked start / end */
.sch-time{ display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.sch-start{
  font-family: var(--ff-sans); font-size: 14px; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.sch-end{
  font-family: var(--ff-sans); font-size: 12px; font-weight: 500; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}

/* Venue */
.sch-venue{ padding-top: 6px; min-width: 0; }
.sch-venue-name{
  display: block;
  font-family: var(--ff-sans); font-size: 14px; font-weight: 700; letter-spacing: 0;
  text-transform: uppercase; letter-spacing: 0;
}
.sch-venue-sub{
  display: block;
  font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: .65;
  margin-top: 2px; text-transform: none;
}

/* Title cell */
.sch-title{ padding-top: 4px; min-width: 0; }
.sch-type{
  display: inline-block;
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  border: 1px solid var(--ink); padding: 2px 7px;
  margin-bottom: 6px;
  vertical-align: middle;
}
.sch-name{
  display: block;
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; letter-spacing: 0;
  text-wrap: balance;
}
.sch-name .ar{ font-family: var(--ff-ar); font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.sch-recur-mark{
  display: inline-block;
  font-size: .65em; vertical-align: .25em;
  margin-left: 4px;
  opacity: .65;
}

/* Status / tag cell */
.sch-tag-cell{ padding-top: 8px; display: flex; justify-content: flex-end; align-items: flex-start; }
.sch-tag{
  display: inline-block;
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  padding: 5px 9px;
  white-space: nowrap;
  border: 1px solid var(--ink);
}
.sch-featured{ background: var(--highlight); color: var(--ink); border-color: var(--ink); }
.sch-recurring{ background: transparent; color: var(--ink); border-style: dashed; }
.sch-rsvp{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sch-free{ background: transparent; color: var(--ink); border-color: var(--ink); }

.schedule-empty{
  padding: 32px 0; font-style: italic; opacity: .55; font-size: 14px;
}

/* Hide the legacy day-group / event-line markup if any survives */
.day-group{ display: none; }

/* ---------- FOOTER — outlined, no fill ---------- */
.foot{
  color: var(--ink);
  margin-top: clamp(48px, 6vw, 96px);
  font-family: var(--ff-sans);
  border-top: 2px solid var(--ink);
}
.foot-cols{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 0;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  border-bottom: 1px solid var(--ink);
}
.foot-col{
  padding-right: clamp(20px, 3vw, 48px);
}
.foot-col:last-child{ padding-right: 0; }
.foot-col-head{
  font-size: 11px; letter-spacing: 0; text-transform: uppercase;
  font-weight: 700; color: var(--ink); opacity: 1;
  margin-bottom: 18px; line-height: 1;
}
.foot-col-body{
  display: flex; flex-direction: column; gap: 9px;
}
.foot-col-body p{
  margin: 0;
  font-size: 13px; line-height: 1.5; font-weight: 400;
  color: var(--ink); opacity: .75;
}
.foot-col-body a{
  font-size: 13px; font-weight: 700; letter-spacing: 0;
  color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  opacity: .9;
  transition: opacity .12s;
}
.foot-col-body a:hover{ opacity: 1; text-decoration-thickness: 2px; }
.foot-newsletter-btn{
  all: unset; cursor: pointer;
  display: inline-block; margin-top: 8px;
  font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  color: var(--ink); padding: 8px 14px; border: 1px solid var(--ink);
  opacity: .85; transition: background .12s, color .12s, opacity .12s;
}
.foot-newsletter-btn:hover{ background: var(--ink); color: var(--bg); opacity: 1; }
.foot-base{
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(24px, 4vw, 56px);
  font-size: 11px; letter-spacing: 0; text-transform: uppercase;
  font-weight: 700; opacity: .35; color: var(--ink);
}
.foot-base a{ color: inherit; text-decoration: none; }
.foot-base a:hover{ opacity: .7; text-decoration: underline; }
@media (max-width: 860px){
  .foot-cols{ grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px) 0; }
}
@media (max-width: 500px){
  .foot-cols{ grid-template-columns: 1fr; }
}

/* =========================================================
   DETAIL PAGE
   ========================================================= */
.detail{
  max-width: 1428px;
  margin: 0 auto;
  padding: 45px 45px 0;
}
.back{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  color: var(--ink);
  opacity: 1;
}
.back:hover{ opacity: .7; }

.detail-kicker{
  margin-top: clamp(16px, 2.5vw, 28px);
  font-family: var(--ff-sans); font-size: clamp(16px, 1.6vw, 20px); font-weight: 400;
  letter-spacing: 0; text-transform: none;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap;
}
.detail-kicker .dt-block{ display:flex; flex-direction:column; gap:2px; line-height:1.4; }
.detail-kicker .type{ font-weight: 400; }
.detail-kicker .sep{ display:none; }
.detail-kicker .pill{ opacity: .7; }

.detail h1{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(40px, 7vw, 102px); line-height: 1.1; letter-spacing: 0;
  margin: 18px 0 0; text-wrap: balance;
  text-transform: none;
}
.detail .h1-ar{
  margin-top: 18px; font-family: var(--ff-ar); direction: rtl;
  font-size: clamp(30px, 4.5vw, 64px); font-weight: 700; line-height: 1.2;
}

.detail-cover{
  margin-top: clamp(28px, 4vw, 48px);
  aspect-ratio: 16/9;
  border-radius: 24px;
  overflow: hidden;
}
.detail-cover img{ width:100%; height:100%; object-fit: cover; }

.detail-grid{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(28px, 4vw, 48px) 0;
}

.detail-body p{
  font-family: var(--ff-sans);
  font-size: 18px; line-height: 1.55; color: var(--ink);
  margin: 0 0 1.1em; max-width: 60ch;
  font-weight: 500;
}
.detail-body p:first-child{
  font-size: 24px; font-weight: 700; line-height: 1.25; text-transform: none;
}
.detail-body .ar p{
  font-family: var(--ff-ar); direction: rtl; text-align: right;
  font-size: 22px; line-height: 1.9; font-weight: 400;
}
.detail-body .ar p:first-child{ font-weight: 700; font-size: 26px; }
.detail-body .lang-divider{
  margin: clamp(24px, 3vw, 40px) 0;
}
.detail-body p.subtitle:first-child{ font-size: 16px; font-weight: 500; opacity: .65; }
.detail-body p.writeup{ font-style: italic; opacity: .8; }
.detail-body p.credits-line{
  font-size: 14px; opacity: .75; margin-top: -0.4em;
}
.detail-body p.credits-line .k{
  font-size: 11px; text-transform: uppercase; letter-spacing: 0;
  font-weight: 700; opacity: 1; margin-right: 8px;
}

/* Facts — open label / leader / value rows, no card, no box */
.facts{
  padding: 0;
  align-self: start;
}
.facts .row{
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 0;
}
.facts .row:first-child{ padding-top: 0; }
.facts .k{
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700; opacity: 1;
  white-space: nowrap;
}
.facts .leader{
  flex: 1;
  border-bottom: 1px dotted currentColor;
  opacity: .3;
  transform: translateY(-4px);
}
.facts .v{
  font-family: var(--ff-sans); font-size: 18px; font-weight: 700; letter-spacing: 0;
  white-space: nowrap;
}
.cta{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 28px;
  padding: 14px 18px;
  background: var(--ink); color: var(--bg);
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  width: 100%; box-sizing: border-box;
  border-radius: 8px;
  transition: opacity .18s ease;
}
.cta:hover{ opacity: .85; }
.cta.secondary{ background: transparent; color: var(--ink); opacity: .6; padding: 0; }
.cta.secondary:hover{ opacity: 1; }
.cta.free{
  display: inline-block; background: none; color: var(--ink);
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  opacity: .6; margin-top: 28px; padding: 0; width: auto;
}

/* More events */
.more{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) var(--pad);
}
.more h3{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(32px, 4vw, 56px); margin: 0 0 24px;
  letter-spacing: 0; text-transform: uppercase;
}
.more-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border: 2px solid var(--ink);
}
.more-grid .week-card{ border: 0; border-right: 2px solid var(--bg); border-bottom: 2px solid var(--bg); background: var(--ink); color: var(--bg); min-height: 240px; }
.more-grid .week-card:hover{ background: var(--bg); color: var(--ink); }
.more-grid .week-card:hover .wc-dow, .more-grid .week-card:hover .wc-type, .more-grid .week-card:hover .wc-meta{ color: var(--ink); }

/* =========================================================
   FILTER BAR + VIEW SWITCHER
   ========================================================= */
.toolbar{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.toolbar-label{
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
}
.filter-bar{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.filter-pill{
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--ink);
  padding: 8px 14px;
  background: transparent; color: var(--ink);
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.filter-pill:hover{ background: var(--ink); color: var(--bg); }
.filter-pill.active{ background: var(--ink); color: var(--bg); }
.filter-pill .caret{ width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.filter-bar select{
  appearance: none; -webkit-appearance: none;
  border: 2px solid var(--ink);
  background: transparent; color: var(--ink);
  padding: 8px 30px 8px 14px;
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 14px, calc(100% - 11px) 14px;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.view-switch{
  display: inline-flex;
  border: 2px solid var(--ink);
}
.view-switch button{
  all: unset; cursor: pointer;
  padding: 8px 14px;
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
}
.view-switch button[aria-pressed="true"]{ background: var(--ink); color: var(--bg); }
.view-switch button + button{ border-left: 2px solid var(--ink); }

/* =========================================================
   RECURRING STRIP — removed (now inlined into schedule with ↻)
   ========================================================= */
.recurring-strip{ display: none !important; }

/* Compact recurring marker inside calendar cells */
.cal-recurring-tag{
  display: inline-block;
  background: var(--ink); color: var(--bg);
  font-family: var(--ff-sans); font-size: 9px; font-weight: 700;
  letter-spacing: 0; text-transform: uppercase;
  padding: 2px 5px;
}

/* =========================================================
   CALENDAR VIEW
   ========================================================= */
.cal-wrap{ display: none; }
body[data-view="calendar"] .cal-wrap{ display: block; }
body[data-view="calendar"] .months,
body[data-view="calendar"] .recurring-strip,
body[data-view="calendar"] .week,
body[data-view="calendar"] .archive-section{ display: none; }
body[data-view="archive"] .cal-wrap,
body[data-view="archive"] .months,
body[data-view="archive"] .recurring-strip,
body[data-view="archive"] .week{ display: none; }
body[data-view="archive"] .archive-section{ display: block; }
body[data-view="list"] .archive-section,
body[data-view="list"] .cal-wrap{ display: none; }

.cal-wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--pad) 0;
}
.cal-month{
  margin-bottom: clamp(48px, 6vw, 72px);
}
.cal-month-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 0;
}
.cal-month-head h2{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(40px, 6vw, 88px); line-height: .9;
  letter-spacing: 0; text-transform: uppercase;
  margin: 0; color: var(--ink);
}
.cal-month-head .ar{
  font-family: var(--ff-ar); direction: rtl; color: var(--ink);
  font-size: clamp(22px, 3vw, 40px); font-weight: 700;
}
.cal-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
}
.cal-dow{
  padding: 8px 10px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--ink); color: var(--bg);
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
}
.cal-cell{
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  min-height: 130px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg);
  position: relative;
}
.cal-cell.empty{ background: var(--bg); opacity: .5; }
.cal-num{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: 22px; letter-spacing: 0; line-height: 1;
  font-variant-numeric: lining-nums;
}
.cal-num.is-today{
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--highlight); color: var(--ink);
  width: 32px; height: 32px; padding: 0;
}
.cal-event{
  display: block;
  background: var(--ink); color: var(--bg);
  padding: 4px 6px;
  font-family: var(--ff-sans); font-size: 11px; font-weight: 700;
  line-height: 1.15; letter-spacing: 0;
  text-decoration: none;
  border-left: 3px solid var(--highlight);
}
.cal-event.featured{ background: var(--highlight); color: var(--ink); border-left-color: var(--ink); }
.cal-event.recurring{ background: transparent; color: var(--ink); border: 1px dashed var(--ink); border-left: 3px solid var(--ink); }
.cal-event:hover{ filter: brightness(.92); }
.cal-event .e-time{
  display: block;
  font-size: 9px; letter-spacing: 0; text-transform: uppercase; opacity: .85;
  margin-bottom: 1px; font-variant-numeric: tabular-nums;
}

/* =========================================================
   ARCHIVE / WRITING SECTION
   ========================================================= */
.archive-section{
  display: none;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--pad) 0;
}
.archive-intro{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 3px solid var(--ink);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.archive-intro h2{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(48px, 7vw, 112px); line-height: .9;
  letter-spacing: 0; text-transform: uppercase;
  margin: 0; color: var(--ink);
}
.archive-intro .ar{
  font-family: var(--ff-ar); direction: rtl;
  font-size: clamp(28px, 3.5vw, 56px); font-weight: 700;
  margin-top: 12px;
}
.archive-intro p{
  font-family: var(--ff-sans); font-size: 18px; line-height: 1.5; max-width: 52ch;
  margin: 0; font-weight: 500;
}
.archive-list{ display: flex; flex-direction: column; }
.archive-entry{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 2px solid var(--ink);
  text-decoration: none; color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.archive-entry:hover{ background: var(--ink); color: var(--bg); }
.archive-entry:hover .ae-cover{ outline-color: var(--bg); }
.archive-entry .ae-cover{
  aspect-ratio: 4/3;
  outline: 2px solid var(--ink); outline-offset: -2px;
  overflow: hidden;
}
.archive-entry .ae-cover img{ width:100%; height:100%; object-fit: cover; }
.archive-meta-row{
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
}
.archive-meta-row .type{ background: var(--ink); color: var(--bg); padding: 4px 10px; }
.archive-entry:hover .archive-meta-row .type{ background: var(--bg); color: var(--ink); }
.archive-entry .ae-title{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.0; letter-spacing: 0;
  margin: 12px 0 6px; text-transform: uppercase; text-wrap: balance;
}
.archive-entry .ae-title-ar{
  font-family: var(--ff-ar); direction: rtl; font-size: 24px; font-weight: 400;
  margin: 0 0 14px; line-height: 1.3;
}
.archive-entry .ae-writeup{
  font-family: var(--ff-sans); font-size: 17px; line-height: 1.55;
  max-width: 60ch; margin: 0 0 14px; font-weight: 500;
}
.archive-entry .ae-writeup-ar{
  font-family: var(--ff-ar); direction: rtl; font-size: 19px; line-height: 1.85;
  max-width: 50ch; margin: 0 0 14px;
}
.archive-entry .ae-readmore{
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.archive-entry:hover .ae-readmore-arrow{ transform: translateX(6px); }
.ae-readmore-arrow{ transition: transform .15s ease; display: inline-block; }

/* =========================================================
   3D LINE ACCENT (hero illustration)
   ========================================================= */
.hero-3d{
  position: absolute;
  top: 36%; right: var(--pad);
  width: clamp(180px, 22vw, 320px);
  pointer-events: none;
  z-index: 1;
}
.hero{ position: relative; }
.hero .kicker, .hero h1, .hero-sub{ position: relative; z-index: 2; }
@media (max-width: 920px){
  .hero-3d{ display: none; }
}

/* Date markers on month list — recurring marker */
.er-recurring-tag{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: var(--bg);
  font-family: var(--ff-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0; text-transform: uppercase;
  padding: 3px 7px;
  margin-left: 8px;
}
.event-row:hover .er-recurring-tag{ background: var(--bg); color: var(--ink); }

/* Language switching — strict (only one visible at a time) */
html[data-lang="en"] .ar-only,
html[data-lang="en"] .ar:not(.en-only),
html[data-lang="en"] [class$="-ar"]:not(.en-only),
html[data-lang="en"] [class*="-ar "]:not(.en-only),
html[data-lang="en"] [dir="rtl"]:not(.en-only){
  display: none !important;
}
html[data-lang="ar"] .en-only{
  display: none !important;
}
html[data-lang="ar"] body{
  font-family: var(--ff-ar);
}
html[data-lang="ar"] .ar-only{ direction: rtl; }

/* Responsive */
@media (max-width: 920px){
  .topbar-right{ gap: 14px; }
  .topbar-right a{ display: none; }
  .event-row{ grid-template-columns: 80px 1fr; gap: 16px; }
  .day-group{ grid-template-columns: 1fr; gap: 14px; }
  .dg-date{ position: static; flex-direction: row; align-items: baseline; gap: 14px; }
  .dg-day{ font-size: 40px; }
  .dg-dow{ margin-top: 0; }
  .event-line{ grid-template-columns: 60px 1fr; }
  .el-meta{ grid-column: 1 / -1; padding-top: 0; }
  .detail-grid{ grid-template-columns: 1fr; }
  .facts{ position: static; }
  .hero-sub{ grid-template-columns: 1fr; }
  .foot{ grid-template-columns: 1fr; gap: 24px; }
  .week-scroll{ grid-auto-columns: 260px; }
  .month-head{ grid-template-columns: auto auto; }
  .month-head .count{ grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 920px){
  .toolbar{ grid-template-columns: 1fr; }
  .archive-entry{ grid-template-columns: 1fr; }
  .archive-intro{ grid-template-columns: 1fr; }
  .cal-cell{ min-height: 90px; padding: 5px 6px; }
  .cal-num{ font-size: 16px; }
  .cal-event{ font-size: 9px; padding: 2px 4px; }
  .cal-event .e-time{ display: none; }
}

@media (max-width: 560px){
  .er-day{ font-size: 48px; }
  .er-title{ font-size: 24px; }
  .cal-grid{ font-size: 10px; }
  .cal-dow{ padding: 4px 5px; font-size: 9px; letter-spacing: 0; }
}


/* =========================================================
   v6 — THIS WEEK as headline + Programme + continuous timeline
   Added by the redesign. Older .week / .schedule rules above
   are now unused (compact hero replaces big H1).
   ========================================================= */

/* ---------- Compact hero ---------- */
.hero-compact{
  padding-top: clamp(20px, 3vw, 36px);
  padding-bottom: 0;
}
.hero-compact .kicker{ padding-bottom: 14px; }

/* ---------- THIS WEEK (the headline) ---------- */
.this-week{
  padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 5vw, 72px);
}
.tw-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: clamp(20px, 3vw, 40px);
  padding: 0 var(--pad) clamp(18px, 2.4vw, 28px);
  border-bottom: 4px solid var(--ink);
}
.tw-eyebrow{
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 140px);
  line-height: .82;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.tw-eyebrow .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; line-height: .9; }
.tw-range{
  font-family: var(--ff-sans);
  font-size: clamp(14px, 1.3vw, 20px);
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 14px;
  white-space: nowrap;
}
.tw-range .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; }
.tw-nav{ display: flex; gap: 8px; padding-bottom: 12px; }
.tw-nav button{
  all: unset; cursor: pointer;
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border: 2px solid var(--ink);
  font-size: 18px; font-weight: 700;
  color: var(--ink);
}
.tw-nav button:hover{ background: var(--ink); color: var(--bg); }

.tw-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 2px solid var(--ink);
}
.tw-cell{
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: clamp(220px, 26vw, 360px);
  padding: 16px 14px 14px;
  border-right: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  position: relative;
  transition: background .15s ease, color .15s ease;
}
.tw-cell:last-child{ border-right: 0; }
.tw-cell.is-today{
  background: var(--highlight);
}
.tw-cell:not(.is-empty):hover{ background: var(--ink); color: var(--bg); }
.tw-cell.is-empty{ pointer-events: none; }
.tw-cell.is-empty .tw-empty{
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  align-self: center; opacity: .35;
  text-align: center;
}
.tw-cell.is-empty .tw-empty .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; font-size: 14px; }

.tw-date{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tw-day{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(40px, 4.6vw, 64px); line-height: .82; letter-spacing: 0;
  font-variant-numeric: lining-nums;
}
.tw-dow{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  text-align: right;
}
.tw-dow .ar{ font-family: var(--ff-ar); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400; }

.tw-body{ display: flex; flex-direction: column; gap: 8px; padding-top: 18px; }
.tw-meta{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  opacity: .85;
}
.tw-type{ display: inline-block; padding: 2px 6px; border: 1px solid var(--ink); }
.tw-recur{ font-size: 12px; opacity: .6; }
.tw-cell:not(.is-empty):hover .tw-type{ border-color: var(--bg); }

.tw-title{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.05;
  letter-spacing: 0; text-transform: uppercase;
  margin: 0; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.tw-title .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; line-height: 1.2; font-size: 1.05em; }

.tw-venue{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  opacity: .7;
}
.tw-venue .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; font-size: 13px; }

.tw-arrow{
  align-self: end;
  font-size: 18px;
  opacity: .55;
  transition: transform .15s, opacity .15s;
}
.tw-cell:hover .tw-arrow{ opacity: 1; transform: translateX(4px); }

/* ---------- PROGRAMME — sticky full-bleed filter bar ---------- */
.programme-head{
  position: sticky;
  top: 54px;
  z-index: 40;
  background: var(--bg);
  border-top: 3px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.ph-bar{
  display: flex;
  align-items: stretch;
  min-height: 50px;
}
.ph-title-cell{
  flex-shrink: 0;
  padding: 0 var(--pad);
  display: flex; align-items: center;
  border-right: 2px solid var(--ink);
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  white-space: nowrap;
}
.ph-title-cell .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; font-size: 14px; }

/* Filter pills */
.ph-filters{
  display: flex; align-items: stretch;
  flex: 1; overflow-x: auto;
  scrollbar-width: none;
}
.ph-filters::-webkit-scrollbar{ display: none; }
.ph-filter{
  all: unset; cursor: pointer;
  padding: 0 18px;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  color: var(--ink);
  border-right: 1px solid var(--ink);
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.ph-filter:hover{ background: color-mix(in oklab, var(--ink) 8%, transparent); }
.ph-filter.is-active{ background: var(--ink); color: var(--bg); }
.ph-filter .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; font-size: 13px; }
.ph-filter-count{
  font-size: 9px; letter-spacing: 0; opacity: .55;
  font-variant-numeric: tabular-nums;
}
.ph-filter.is-active .ph-filter-count{ opacity: .75; }

/* Season jump — right side of bar */
.ph-seasons{
  display: flex; align-items: center; gap: 0;
  border-left: 2px solid var(--ink);
  overflow-x: auto; scrollbar-width: none;
  flex-shrink: 0;
  max-width: 40%;
}
.ph-seasons::-webkit-scrollbar{ display: none; }
.ph-seasons .season-rail{
  display: flex; flex-direction: row; align-items: center;
  gap: 0; border: 0; padding: 0;
}
.ph-seasons .sr-year{
  display: flex; align-items: center;
  grid-template-columns: unset; gap: 0;
}
.ph-seasons .sr-y{
  padding: 0 10px 0 16px;
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  opacity: .45; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ph-seasons .sr-seasons{ display: flex; gap: 0; flex-wrap: nowrap; }
.sr-btn{
  all: unset; cursor: pointer;
  font-family: var(--ff-sans); font-size: 10px;
  letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  padding: 0 14px;
  height: 100%; min-height: 50px;
  display: inline-flex; align-items: center;
  color: var(--ink);
  border-left: 1px solid var(--ink);
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.sr-btn .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; font-size: 13px; }
.sr-btn:hover, .sr-btn.is-active{ background: var(--ink); color: var(--bg); }

/* Past-archive filter bar — same markup/behavior as the future Programme
   bar above, but it can't rely on the topbar being stuck at top (while
   deep in history the topbar is bottom-stuck instead, see
   body.viewing-past .topbar), so it's sticky to the top on its own. It's
   only ever visible while scrolled within #pt-past, which is exactly when
   the topbar has detached from the top — so the two never compete for
   the same edge. */
.programme-head.past-ph{
  position: sticky; top: 0; z-index: 42;
}
/* Month heads inside the archive sit under this shorter stack (their own
   filter bar only, ~58px) instead of the future section's topbar+ph-bar
   stack (118px) — initStickyMonths() reads this back from computed style. */
#pt-past .tl-month-head{ top: 58px; }

/* Exit link — only shown once past history is expanded; lives in the
   sticky filter bar so it's reachable while scrolled deep into history. */
.ph-exit{
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  border-left: 2px solid var(--ink);
  flex-shrink: 0;
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background .12s, color .12s;
}
.ph-exit:hover{ background: var(--ink); color: var(--bg); }
.ph-exit-x{ font-size: 12px; }
.ph-exit[hidden]{ display: none; }

/* ---------- TIMELINE — full bleed, lines edge to edge ---------- */
.timeline{
  padding-bottom: clamp(40px, 6vw, 96px);
}

/* Year markers between seasons that cross a year boundary */
.tl-year-marker{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px; align-items: center;
  padding: clamp(28px, 4vw, 56px) var(--pad) clamp(8px, 1.4vw, 16px);
}
.tl-ym-rule{ height: 2px; background: var(--ink); }
.tl-ym-label{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 52px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.tl-ym-label .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; }

/* Season block */
.tl-season{ padding-top: clamp(20px, 3vw, 40px); }
.tl-season-head{
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  padding: 14px var(--pad);
  margin-bottom: 4px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.tl-season-name{
  font-family: var(--ff-sans);
  font-size: clamp(22px, 2.6vw, 36px); font-weight: 700;
  letter-spacing: 0; text-transform: uppercase;
}
.tl-season-name .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; font-size: 1.05em; }
.tl-season-year{
  font-family: var(--ff-sans);
  font-size: clamp(22px, 2.6vw, 36px); font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  opacity: .55;
}
.tl-season-year .ar{ font-family: var(--ff-ar); }
.tl-season-count{
  justify-self: end;
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  opacity: .65;
}
.tl-season-count .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; font-size: 14px; }

/* Month — sticky shrinking head */
.tl-month{ position: relative; }
.tl-month-head{
  --tl-shrink: 0;
  position: sticky; top: 118px; z-index: 5;
  /* topbar (54) + future's ph-bar (~64) stuck above it */
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: clamp(18px, 2vw, 28px) var(--pad) 12px;
  margin-top: clamp(8px, 1.4vw, 18px);
  border-bottom: 2px solid var(--ink);
  transform: scaleY(calc(1 - var(--tl-shrink) * 0.45)) translateY(calc(var(--tl-shrink) * -8px));
  transform-origin: left top;
  will-change: transform;
}
.tl-month-name{
  margin: 0;
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  line-height: .9; letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.tl-month-name .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; }
.tl-month-meta{
  display: flex; gap: 14px; align-items: baseline;
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  opacity: .55;
}
.tl-month-year{ font-variant-numeric: lining-nums tabular-nums; }

/* Event row */
.tl-month-body{ padding-top: 0; }
.tl-row{
  --tl-row-pad: 16px;
  display: grid;
  grid-template-columns: 88px 88px 1.3fr 2.6fr 130px;
  gap: clamp(12px, 1.8vw, 24px);
  align-items: start;
  padding: var(--tl-row-pad) var(--pad);
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
  transition: background .12s ease;
}
.tl-row:hover{ background: color-mix(in oklab, var(--ink) 6%, transparent); }
.tl-row:hover .tl-name{ text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.tl-row.is-past{ opacity: .68; }
.tl-row.is-past:hover{ opacity: 1; }

.tl-date{ display: flex; flex-direction: column; line-height: 1; }
.tl-day{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(44px, 4.5vw, 60px); line-height: .9; letter-spacing: 0;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.tl-recur-mark{
  font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; line-height: .9;
  color: var(--ink);
}
.tl-dow{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  margin-top: 6px; opacity: .75;
}
.tl-dow .ar{ font-family: var(--ff-ar); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400; }

.tl-time{ display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.tl-start{
  font-family: var(--ff-sans); font-size: 14px; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.tl-end{
  font-family: var(--ff-sans); font-size: 12px; font-weight: 500; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}

.tl-venue{ padding-top: 6px; min-width: 0; }
.tl-venue-name{
  display: block;
  font-family: var(--ff-sans); font-size: 13px; font-weight: 700; letter-spacing: 0;
  text-transform: uppercase;
}
.tl-venue-name .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; font-size: 16px; }
.tl-venue-sub{
  display: block; margin-top: 2px;
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500; letter-spacing: 0; opacity: .65;
  text-transform: none;
}

.tl-prog{ padding-top: 4px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tl-type{
  align-self: flex-start;
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  border: 1px solid var(--ink); padding: 2px 7px;
}
.tl-name{
  display: block;
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.05; letter-spacing: 0;
  text-wrap: balance;
}
.tl-name .ar{ font-family: var(--ff-ar); font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.tl-writeup{
  display: block; margin-top: 4px;
  font-family: var(--ff-sans); font-size: 14px; font-weight: 500; line-height: 1.4;
  opacity: .8; max-width: 60ch;
}
.tl-writeup.ar{ font-family: var(--ff-ar); font-size: 16px; line-height: 1.7; }

.tl-tag-cell{ padding-top: 8px; display: flex; justify-content: flex-end; align-items: flex-start; }
.tl-tag{
  display: inline-block;
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  padding: 5px 9px;
  white-space: nowrap;
  border: 1px solid var(--ink);
}
.tl-featured{ background: var(--highlight); color: var(--ink); }
.tl-recurring{ background: transparent; color: var(--ink); border-style: dashed; }
.tl-rsvp{ background: var(--ink); color: var(--bg); }
.tl-free{ background: transparent; color: var(--ink); }
.tl-past{ background: transparent; color: var(--ink); border-style: dotted; opacity: .8; }

/* Past-history reveal — sits ABOVE the topbar, collapsed to zero height
   at rest, so the page looks completely normal until the user scrolls up
   (see armPastGravity() in index.html). Two stages: a first scroll-up
   pulls the toggle open just enough to show a hint message (.tl-past-peek)
   — not the archive yet. From there, a further, heavier, sustained pull
   (gravity — resistance builds up rather than giving way linearly) reveals
   the toggle button underneath the message and finally commits, loading
   the full archive with a smooth scroll pulling the user in. Letting go at
   either stage springs back rather than snapping shut. Exit lives in the
   sticky filter bar, reachable however far back you scroll. */
.tl-past-toggle{
  max-height: 0;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
  transition: max-height .4s cubic-bezier(.2,.8,.2,1);
}
.tl-past-toggle.is-tracking{ transition: none; }
.tl-past-peek{
  padding: 16px var(--pad) 4px;
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; text-align: center;
  opacity: .55;
}
.tl-past-btn{
  all: unset; cursor: pointer; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px var(--pad);
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  color: var(--ink);
  transition: background .12s ease, color .12s ease;
}
.tl-past-btn:hover{ background: var(--ink); color: var(--bg); }
.tl-past-arrow{ font-size: 14px; transition: transform .15s ease; }
.tl-past-btn:hover .tl-past-arrow{ transform: translateY(-3px); }
.tl-past-count{
  font-size: 10px; opacity: .55; border: 1px solid currentColor; padding: 1px 7px; border-radius: 999px;
}
.tl-past-btn:hover .tl-past-count{ opacity: .85; }

.tl-empty{
  padding: clamp(48px, 8vw, 96px) var(--pad);
  text-align: center; font-family: var(--ff-sans); font-size: 15px; opacity: .6;
}

/* =========================================================
   FEATURED BLOCKS — HKW-inspired editorial image/text blocks
   ========================================================= */
.featured-blocks{
  border-bottom: 3px solid var(--ink);
}

/* Main block: full-width, inverted palette */
.fb-main{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(300px, 52vh, 560px);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  overflow: hidden;
}
.fb-main:hover .fb-image img{ transform: scale(1.04); }

/* Sub-row container */
.fb-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Sub blocks */
.fb-sub{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  text-decoration: none;
  color: var(--ink);
  min-height: clamp(240px, 40vh, 420px);
  border-right: 2px solid var(--ink);
  overflow: hidden;
  transition: background .18s ease, color .18s ease;
}
.fb-sub:last-child{ border-right: 0; }

.fb-project{ background: var(--bg); }
.fb-project:hover{ background: var(--ink); color: var(--bg); }

.fb-residency{ background: var(--highlight); border-left: 2px solid var(--ink); }
.fb-residency:hover{ background: var(--ink); color: var(--bg); }

/* Content column */
.fb-content{
  padding: clamp(24px, 3.4vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fb-eyebrow{
  font-family: var(--ff-sans);
  font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  opacity: .7;
}
.fb-eyebrow .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; font-size: 13px; }

.fb-title{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(48px, 6.8vw, 104px); line-height: .88;
  letter-spacing: 0; text-transform: uppercase;
  margin: 0; text-wrap: balance;
}
.fb-title .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; line-height: .95; }

.fb-desc{
  font-family: var(--ff-sans); font-size: 16px; line-height: 1.45;
  font-weight: 500; max-width: 38ch; margin: 0; opacity: .85;
}
.fb-desc .ar{ font-family: var(--ff-ar); font-size: 18px; line-height: 1.7; font-weight: 400; }

.fb-cta{
  margin-top: auto; padding-top: 6px;
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
}
.fb-cta .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; font-size: 14px; }

/* Image panel */
.fb-image{
  overflow: hidden;
}
.fb-image img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .45s ease;
}

/* Graphic / SVG illustration panel */
.fb-graphic{
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 3vw, 44px);
  min-width: clamp(90px, 14vw, 180px);
}
.fb-graphic svg{
  width: clamp(80px, 11vw, 148px);
  height: auto;
  color: inherit;
}

/* Responsive */
@media (max-width: 900px){
  .fb-main{ grid-template-columns: 1fr; }
  .fb-main .fb-image{ min-height: 260px; border-top: 2px solid var(--bg); }
  .fb-row{ grid-template-columns: 1fr; }
  .fb-sub{
    grid-template-columns: 1fr;
    border-right: 0;
    border-bottom: 2px solid var(--ink);
    min-height: auto;
  }
  .fb-sub:last-child{ border-bottom: 0; }
  .fb-residency{ border-left: 0; border-top: 2px solid var(--ink); }
  .fb-graphic{ display: none; }
  .fb-content{ padding: 24px 20px; }
}

/* Topbar location label */
.topbar-center{
  font-family: var(--ff-sans);
  font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700;
  color: var(--ink); opacity: .55;
  text-align: center;
}
.topbar-center .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; font-size: 13px; }
@media (max-width: 700px){ .topbar-center{ display: none; } }

/* Hide the legacy chrome that we no longer render */
.toolbar, .week, .months, .cal-wrap, .archive-section{ display: none !important; }

/* Responsive */
@media (max-width: 900px){
  .tw-grid{ grid-template-columns: repeat(2, 1fr); }
  .tw-cell{ border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); min-height: 180px; }
  .tw-head{ grid-template-columns: 1fr; }
  .ph-row{ grid-template-columns: 1fr; }
  .tl-row{ grid-template-columns: 64px 1fr; gap: 12px; }
  .tl-row > .tl-time, .tl-row > .tl-venue, .tl-row > .tl-tag-cell{ grid-column: 2; padding-top: 0; }
  .tl-row > .tl-prog{ grid-column: 2; }
}

/* =========================================================
   GROUPED SCROLL — this week (horizontal scroll-lock rail) →
   Featured projects → Residencies → Featured artists.
   Replaces the old opposing dual-column featured-split.
   Everything here is driven only by native scroll position.
   ========================================================= */
.gs-outer{ position: relative; }
.gs-sticky{
  --gs-bg: var(--paper); --gs-fg: var(--ink);
  /* Docks just below the site topbar (54px, sticky itself with a higher
     z-index) instead of top:0 — otherwise the topbar draws over the top
     of the rail's intro text once this becomes pinned on scroll. */
  position: sticky; top: 54px; height: calc(100vh - 54px); overflow: hidden;
  display: flex; border-bottom: 2px solid var(--ink);
  background: var(--gs-bg); color: var(--gs-fg);
  transition: background .35s ease, color .35s ease;
}
.gs-rail{
  flex: 0 0 320px; height: 100%; border-right: 2px solid var(--gs-fg);
  padding: 40px 24px; display: flex; flex-direction: column; gap: 14px;
  background: var(--gs-bg); color: var(--gs-fg); position: relative; z-index: 2;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.gs-kicker{ font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700; opacity: 1; }
.gs-range{ font-family: var(--ff-sans); font-size: clamp(28px, 2.8vw, 42px); font-weight: 700; line-height: 1; letter-spacing: 0; }
.gs-count{ font-family: var(--ff-sans); font-size: 14px; opacity: .7; }
.gs-theme{ padding-bottom: 14px; border-bottom: 1px solid rgba(29,36,255,.2); display: flex; flex-direction: column; gap: 8px; }
.gs-theme[hidden]{ display: none; }
.gs-theme-quote, .gs-theme-desc{ font-family: var(--ff-sans); font-weight: 700; font-size: 14px; line-height: 1.3; letter-spacing: 0; margin: 0; opacity: 1; }
.gs-theme-quote .ar, .gs-theme-desc .ar{ font-family: var(--ff-ar); font-style: italic; letter-spacing: 0; line-height: 1.5; }
.gs-theme-highlight{ background: var(--highlight); color: var(--ink); font-weight: 700; padding: 0 4px; border-radius: 2px; }
.gs-hint{ font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0; text-transform: uppercase; opacity: .55; margin-top: auto; }
.gs-link{ font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700; text-decoration: none; color: inherit; }

.gs-track{ display: flex; height: 100%; will-change: transform; }
.gs-card{
  flex: 0 0 min(520px, 86vw); height: 100%; border-right: 2px solid var(--gs-fg);
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
}
.gs-card-inner{
  position: relative; z-index: 2; height: 100%;
  padding: 56px 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.gs-card-empty .gs-card-inner{ justify-content: center; }
.gs-card-empty{ opacity: .8; }
.gs-card-bg-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.gs-card-scrim{ position: absolute; inset: 0; background: rgba(10,10,22,.55); z-index: 1; }
.gs-card-video .gs-c-meta,
.gs-card-video .gs-c-title,
.gs-card-video .gs-c-desc,
.gs-card-video .gs-c-cta{ color: #f6f3ea; }
.gs-c-meta{ font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700; opacity: .65; }
.gs-c-title{ font-family: var(--ff-sans); font-weight: 700; font-size: clamp(28px, 3vw, 44px); line-height: .98; letter-spacing: 0; text-transform: uppercase; margin: 0; }
.gs-c-title .ar{ font-family: var(--ff-ar); font-style: italic; letter-spacing: 0; text-transform: none; line-height: 1.1; }
.gs-c-desc{ font-family: var(--ff-sans); font-size: 15px; line-height: 1.5; max-width: 38ch; opacity: .85; margin: 0; }
.gs-c-cta{ font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 700; }

/* "Also happening this week" — a single compact list card at the end of the
   This Week rail, reusing .cx-row (the exhibitions programme rail's row
   style) instead of a full highlighted gs-card per event. Not a link itself
   (unlike .gs-card) since it holds its own <a> rows. */
.gs-card-list{ text-decoration: none; color: inherit; cursor: default; }
.gs-card-list-inner{ display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.gs-list-heading{
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0; text-transform: uppercase;
  font-weight: 700; opacity: .65; margin: 0; padding: 28px 28px 0;
  flex: 0 0 auto;
}
.gs-list-rows{ flex: 1 1 auto; overflow-y: auto; }
html[data-lang="ar"] .gs-list-heading{ text-align: right; }

/* Featured projects / Residencies / Artists in this week */
.gs-vsection{ padding: 36px 24px; border-top: 2px solid var(--ink); }
.gs-vsection h2{ font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0; text-transform: uppercase; font-weight: 700; opacity: 1; margin: 0 0 24px; }
.gs-vsection.gs-tint{ background: #c8a0f0; color: #241b4a; }
.gs-vsection.gs-tint h2{ opacity: .7; }
.gs-vsection.gs-dark{ background: var(--night); }

.gs-marquee-wrap{ overflow: hidden; }
.gs-marquee{ display: flex; gap: 0; will-change: transform; }
.gs-m-card{
  flex: 0 0 300px; padding: 30px; border: 2px solid currentColor; margin-right: -2px; min-height: 200px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  text-decoration: none; color: inherit;
}
.gs-m-card-static{ cursor: default; }
.gs-m-title{ font-family: var(--ff-sans); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 0; margin: 0; }
.gs-m-sub{ font-family: var(--ff-sans); font-size: 12px; opacity: .65; }

.gs-res-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 2px solid currentColor; }
.gs-res-item{ padding: 28px; border-right: 2px solid currentColor; }
.gs-res-item:last-child{ border-right: none; }
.gs-res-item h3{ font-family: var(--ff-sans); font-size: 18px; margin: 0 0 6px; }
.gs-res-item p{ font-family: var(--ff-sans); font-size: 13px; opacity: .7; margin: 0; }
.gs-res-empty{
  font-family: var(--ff-sans); font-size: 14px; opacity: .65;
  border: 2px solid currentColor; padding: 28px;
}

/* Responsive — stack, disable the scroll-lock */
@media (max-width: 700px){
  .gs-outer{ height: auto !important; }
  .gs-sticky{ position: static; height: auto; flex-direction: column; }
  .gs-rail{ border-right: 0; border-bottom: 2px solid var(--gs-fg); }
  .gs-track{ flex-direction: column; transform: none !important; height: auto; }
  .gs-card{ flex: none; height: auto; border-right: 0; border-bottom: 2px solid var(--gs-fg); }
  .gs-res-grid{ grid-template-columns: 1fr; }
  .gs-res-item{ border-right: 0; border-bottom: 2px solid currentColor; }
  .gs-res-item:last-child{ border-bottom: 0; }
}

/* ---------- IN-GRID EVENT READER ----------
   The clicked card itself becomes the reader — it stays exactly where it
   is inside the This Week track (never pulled out of the grid frame) and
   hosts event.html?embed=1 in an iframe filling its box. Clicking nudges
   the borders open; the inner page's scroll drives the rest of the
   expansion (flex-basis + track shift), until the block spans from the
   rail to the right edge. Neighboring cards simply get pushed aside. */
.gs-card-open .gs-card-inner,
.gs-card-open .gs-card-bg-video,
.gs-card-open .gs-card-scrim{ visibility: hidden; }
.gs-card-frame{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  z-index: 5;
}
.gs-anim{
  transition:
    flex-basis .45s cubic-bezier(.2,.8,.2,1),
    transform .45s cubic-bezier(.2,.8,.2,1);
}
/* End-of-article gravity: springing back (or finally letting go) uses a
   slower, springier easing with a touch of overshoot so it reads as weighty
   resistance giving way, not a flat snap. */
.gs-anim-bounce{
  transition:
    flex-basis .6s cubic-bezier(.34,1.56,.64,1),
    transform .6s cubic-bezier(.34,1.56,.64,1);
}
body.gs-reader-open{ overflow: hidden; }

/* Timeline rows host the same reader, expanding vertically in place (see
   _tlOpenReader in index.html). The open row paints above the sticky
   month heads (z 5) and the filter bar (z 42) but under the topbar (z 50)
   so the reading surface owns everything below the topbar. */
.tl-row-open{
  position: relative; overflow: hidden;
  z-index: 45;
  display: block;
  border-top: 2px solid #1d24ff;
}
.tl-row-open > :not(.gs-card-frame){ visibility: hidden; }
.tl-anim{
  transition:
    height .45s cubic-bezier(.2,.8,.2,1),
    transform .45s cubic-bezier(.2,.8,.2,1);
}

/* ---------- CURRENT EXHIBITIONS — WS3 redesign ----------
   Poster + rail split-screen per exhibition.
   Left 50vw: sticky cover poster (opens in-grid reader on click).
   Right 50vw: programme event rail, scroll-locked (translateY).
   Flat style — no gradients, no border-radius, 2px rules. */
.cx{
  background: var(--cx-accent, #1d24ff); color: var(--cx-ink, #f6f3ea);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
/* Section header */
.cx-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: clamp(28px, 4vw, 52px) var(--pad) clamp(20px, 3vw, 36px);
  border-bottom: 2px solid currentColor;
}
.cx-title-head{
  margin: 0;
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: .95; letter-spacing: 0; text-transform: uppercase;
}
.cx-title-head em{ font-style: italic; }
.cx-title-head .ar{ font-family: var(--ff-ar); text-transform: none; font-style: normal; }
.cx-count{
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .7;
  white-space: nowrap;
}

/* Per-exhibition scroll unit */
.cx-outer{
  /* height computed by JS: (100vh - 54) + railRunway */
}

/* Sticky frame — holds poster + rail side by side */
.cx-sticky{
  position: sticky;
  top: 54px;
  height: calc(100vh - 54px);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-bottom: 2px solid currentColor;
  background: var(--cx-accent, transparent);
  color: var(--cx-ink, inherit);
}

/* Poster — left 50% */
.cx-poster{
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--cx-accent, #0d15c8);
  border-right: 2px solid currentColor;
  box-sizing: border-box;
}
.cx-poster-img{
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Solid color band at the poster bottom for legible text */
.cx-poster-band{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--cx-accent, #1d24ff);
  border-top: 2px solid currentColor;
  padding: 18px 28px 22px;
}
.cx-poster-meta{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--ff-sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px;
}
.cx-poster-range{ font-variant-numeric: lining-nums tabular-nums; font-size: 14px; }
.cx-poster-tag{
  border: 2px solid currentColor; padding: 3px 10px;
  white-space: nowrap; flex-shrink: 0;
}
.cx-poster-title{
  margin: 0;
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(22px, 3vw, 46px);
  line-height: .92; text-transform: uppercase; letter-spacing: 0;
}
.cx-poster-title .ar{
  font-family: var(--ff-ar); text-transform: none; line-height: 1.05;
}
/* Transition class applied momentarily during reader open/close */
.cx-poster-anim{
  transition: flex-basis 500ms cubic-bezier(.2,.8,.2,1);
}
/* Iframe hosted inside poster during in-grid reading */
.cx-poster .gs-card-frame{
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  border: none; display: block;
  pointer-events: none;
}

/* Rail — right 50% */
.cx-rail{
  flex: 0 0 50%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.cx-track{
  will-change: transform;
}

/* Programme event rows */
.cx-row{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 35vh;
  padding: 0 28px;
  border-bottom: 2px solid currentColor;
  text-decoration: none;
  color: inherit;
  transition: background .12s;
  box-sizing: border-box;
  position: relative; overflow: hidden;
}
.cx-row:hover{ background: rgba(255,255,255,.07); }
/* Row in-grid reader (see _cxRowOpenReader in index.html) — the clicked
   row grows its own height in place inside .cx-track, which shifts via
   translateY to bring the row flush with the top of the rail. Same
   grammar as .gs-card-open/.tl-row-open: hide the row's own text while
   the iframe hosts the event page. */
.cx-row-open > :not(.gs-card-frame){ visibility: hidden; }
.cx-row-anim{
  transition:
    height .45s cubic-bezier(.2,.8,.2,1),
    transform .45s cubic-bezier(.2,.8,.2,1);
}
.cx-row.is-past{ opacity: .55; }
.cx-row.is-past:hover{ opacity: 1; }
.cx-row-date{
  font-family: var(--ff-sans); font-size: 16px; font-weight: 700;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
  opacity: .65; margin-bottom: 6px;
}
.cx-row-type{
  display: inline-block; align-self: flex-start;
  font-family: var(--ff-sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  border: 2px solid currentColor;
  padding: 2px 8px; margin-bottom: 10px;
}
.cx-row-title{
  margin: 0;
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(16px, 2vw, 30px);
  line-height: .95; text-transform: uppercase;
}
.cx-row-title .ar{
  font-family: var(--ff-ar); text-transform: none; line-height: 1.1;
}
.cx-row-time{
  font-family: var(--ff-sans); font-size: 16px; font-weight: 600;
  opacity: .6; margin-top: 8px; font-variant-numeric: tabular-nums;
}

/* Past-events toggle row */
.cx-past-toggle{
  height: 35vh;
  display: flex; align-items: center; justify-content: center;
  padding: 0 28px; text-align: center;
  border-bottom: 2px solid currentColor;
  cursor: pointer;
  font-family: var(--ff-sans); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  opacity: .55;
  transition: opacity .12s, background .12s;
  user-select: none;
  box-sizing: border-box;
}
.cx-past-toggle:hover{ opacity: 1; background: rgba(255,255,255,.07); }

/* Mobile ≤ 700px — no scroll-lock, natural stacking */
@media (max-width: 700px){
  .cx-head{ flex-direction: column; gap: 8px; }
  .cx-outer{ height: auto !important; }
  .cx-sticky{
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    flex-direction: column;
  }
  .cx-poster{
    flex: 0 0 auto;
    height: 60vw;
    border-right: none;
    border-bottom: 2px solid currentColor;
  }
  .cx-rail{
    flex: 0 0 auto;
    overflow: visible;
  }
  .cx-track{ transform: none !important; }
  .cx-row, .cx-past-toggle{
    height: auto; min-height: 80px;
    padding: 18px 20px;
  }
}

/* Mobile equivalent (see _gsOpenReaderMobile in index.html): below 700px
   cards stack in a column with natural height instead of the horizontal
   rail, so the tapped card's own height animates open in place rather
   than flex-basis/translateX. Native touch scrolling handles the reading
   itself, so the frame here keeps normal pointer-events. */
@media (max-width: 700px){
  .gs-card-open-m{
    transition: height .45s cubic-bezier(.2,.8,.2,1);
    scroll-margin-top: 60px;
  }
}

/* =========================================================
   EVENT OVERLAY — backdrop · panel (right-slide) · fullscreen
   ========================================================= */

/* Backdrop */
.overlay-backdrop{
  position: fixed; inset: 0;
  background: rgba(10,10,22,.52);
  backdrop-filter: blur(2px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.overlay-backdrop.is-open{ opacity: 1; pointer-events: all; }

/* ---- PANEL (right-slide) ---- */
.event-panel{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: clamp(320px, 62vw, 860px);
  background: var(--paper);
  color: var(--night);
  z-index: 201;
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform .38s cubic-bezier(.25,.46,.45,.94);
  display: flex; flex-direction: column;
  box-shadow: -32px 0 80px rgba(0,0,0,.35);
}
.event-panel.is-open{ transform: translateX(0); }

/* Panel header — one continuous field with the body, colour set on
   .event-panel itself by JS, no divide, no boxed close button. */
.ep-header{
  position: relative;
  padding: 15px 15px 0;
  display: flex; flex-direction: column; gap: 12px;
}
.ep-close{
  all: unset; cursor: pointer;
  color: white;
  font-size: 28px; font-weight: 700;
  opacity: 1; transition: opacity .15s;
  line-height: 1;
}
.ep-close:hover{ opacity: .7; }

.ep-meta{
  font-family: var(--ff-sans); font-weight: 400;
  letter-spacing: 0; text-transform: none; opacity: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.ep-meta-bottom{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ep-header-icons{
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.ep-meta .dt-block{ display: flex; flex-direction: column; gap: 2px; line-height: 1.4; font-size: 40px; }
.ep-meta .dt-range{ font-size: clamp(38px, 6vw, 86px); font-weight: 700; line-height: 1.1; }
.ep-type-tag{ letter-spacing: 0; font-weight: 400; font-size: 40px; }
.ep-time{ font-variant-numeric: tabular-nums; }

/* Exhibition programme — on event page */
.ep-programme{
  border-top: 2px solid currentColor;
  margin: 0;
  padding: var(--pad);
}
.ep-programme-head{
  font-family: var(--ff-sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  opacity: .6; padding-bottom: 16px;
}
.ep-prog-row{
  display: grid;
  grid-template-columns: 80px 90px 1fr 24px;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  color: inherit;
  opacity: .9;
  transition: opacity .12s;
}
.ep-prog-row:hover{ opacity: 1; }
.ep-prog-date{ font-family: var(--ff-sans); font-size: 13px; font-weight: 700; opacity: .7; }
.ep-prog-type{ font-family: var(--ff-sans); font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: .55; }
.ep-prog-name{ font-family: var(--ff-sans); font-size: 15px; font-weight: 600; }
.ep-prog-arrow{ font-size: 16px; opacity: .5; text-align: right; }

.ep-title{
  margin: 0; font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(32px,4.4vw,64px); line-height: 1.1;
  letter-spacing: 0; text-transform: none; text-wrap: balance;
}
.ep-title .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; line-height: 1.2; }
.ep-subtitle{
  font-family: var(--ff-sans); font-size: 14px; font-weight: 500;
  line-height: 1.4; max-width: 44ch; opacity: .65; margin: 0;
}

/* Panel body */
.ep-body{ flex: 1; display: flex; flex-direction: column; }
.ep-cover{ overflow: hidden; }
.ep-cover img{ display: block; width: 100%; }

.ep-content{
  padding: 35px 15px 15px;
  display: flex; flex-direction: column; gap: 24px;
  flex: 1;
}
.ep-text p{
  font-family: var(--ff-sans); font-size: 30px; line-height: 1.2;
  margin: 0 0 .9em; max-width: 58ch; font-weight: 400;
  color: inherit;
}
.ep-text .ar p{
  font-family: var(--ff-ar); direction: rtl; text-align: right;
  font-size: 34px; line-height: 1.5; font-weight: 400;
}
.ep-writeup{
  font-style: italic; opacity: .85;
}

/* Facts — open label / leader / value rows, no box, no grid lines */
.ep-facts{
  display: flex; flex-direction: column;
  max-width: 440px;
}
.ep-fact{
  padding: 10px 0;
  display: flex; align-items: baseline; gap: 12px;
}
.ef-key{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .55; color: currentColor;
  white-space: nowrap;
}
.ef-leader{
  flex: 1;
  border-bottom: 1px dotted currentColor;
  opacity: .35;
  transform: translateY(-3px);
}
.ef-val{
  font-family: var(--ff-sans); font-size: 15px; font-weight: 700;
  letter-spacing: 0; color: currentColor;
  white-space: nowrap;
}
.ef-val .ar{ font-family: var(--ff-ar); font-size: 17px; letter-spacing: 0; }

/* Register button in event header — prominent, full-width */
.ep-register-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  font-family: var(--ff-sans); font-size: clamp(16px, 2.5vw, 22px); font-weight: 700;
  background: white; color: #0a0a16;
  text-decoration: none; border-radius: 4px;
  transition: opacity .15s;
  margin-top: 4px;
}
.ep-register-header:hover{ opacity: .85; }

.ep-register{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  text-decoration: none; color: var(--paper); background: var(--night);
  cursor: pointer;
  border-radius: 8px;
  transition: opacity .15s;
}
.ep-register:hover{ opacity: .85; }
.ep-free{ cursor: default; opacity: .6; background: transparent; color: currentColor; padding: 0; }
.ep-free:hover{ opacity: .6; }

/* Registration closed — event ended, but keep the CTA on the page (not
   removed) so it's clear registration existed and is simply no longer open. */
.ep-register-disabled{ cursor: default; opacity: .45; pointer-events: none; }
.ep-register-disabled:hover{ opacity: .45; }
.ep-register-header.ep-register-disabled{ background: transparent; border: 1px solid currentColor; color: inherit; }

/* ---- FULLSCREEN (Opening / featured events) ---- */
.event-fullscreen{
  position: fixed; inset: 0; z-index: 210;
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.event-fullscreen.is-open{ opacity: 1; pointer-events: all; }
.efs-inner{ min-height: 100vh; display: flex; flex-direction: column; }

.efs-topbar{
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(20px,4vw,52px);
  border-bottom: 1px solid currentColor;
  opacity: .7;
}
.efs-type-label{
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
}
.efs-close{
  all: unset; cursor: pointer;
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  padding: 8px 14px; border: 2px solid currentColor;
  display: flex; align-items: center; gap: 8px;
  opacity: .8; transition: opacity .15s;
}
.efs-close:hover{ opacity: 1; }

.efs-hero{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px,4vw,64px);
  padding: clamp(32px,5vw,72px) clamp(20px,4vw,52px) clamp(24px,3.5vw,48px);
  align-items: start;
}
.efs-name-col{
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.efs-name-box{
  display: inline-block;
  background: #ffe65c; color: #0a0a16;
  padding: 5px 14px;
  font-family: var(--ff-sans); font-size: clamp(16px,1.8vw,22px); font-weight: 700;
  letter-spacing: 0; line-height: 1.25;
  max-width: 260px;
}
.efs-date{
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .6;
}

.efs-title-col{ display: flex; flex-direction: column; gap: 16px; }
.efs-title{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(38px,5.5vw,84px); line-height: .9;
  letter-spacing: 0; text-transform: uppercase;
  margin: 0; text-wrap: balance;
}
.efs-title .ar{ font-family: var(--ff-ar); letter-spacing: 0; text-transform: none; }
.efs-short{
  font-family: var(--ff-sans); font-size: 17px; line-height: 1.5;
  font-weight: 500; max-width: 50ch; margin: 0; opacity: .85;
}

.efs-image-wrap{
  padding: 0 clamp(20px,4vw,52px) clamp(28px,4vw,52px);
  display: flex; justify-content: center;
}
.efs-image{ max-width: 540px; width: 100%; }
.efs-image img{ width: 100%; display: block; }

.efs-body{
  padding: clamp(24px,3.5vw,48px) clamp(20px,4vw,52px);
  border-top: 2px solid currentColor;
  max-width: 740px;
}
.efs-body p{
  font-family: var(--ff-sans); font-size: 18px; line-height: 1.6;
  margin: 0 0 1em; font-weight: 500; opacity: .88;
}
.efs-body .ar p{
  font-family: var(--ff-ar); direction: rtl; font-size: 20px; line-height: 1.9;
}

/* ---- Audio bar — sticky player at top of panel ---- */
.ep-audio-bar{
  position: sticky; top: 0; z-index: 10; flex-shrink: 0;
  background: var(--night); color: var(--paper);
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px;
  border-bottom: 2px solid rgba(246,243,234,.18);
}
.epa-play{
  all: unset; cursor: pointer; flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 2px solid var(--paper); border-radius: 50%;
  transition: background .12s, color .12s;
}
.epa-play:hover{ background: var(--paper); color: var(--night); }
.epa-track{ flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.epa-label{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epa-progress-wrap{ position: relative; height: 18px; display: flex; align-items: center; }
.epa-progress{
  height: 2px; background: rgba(246,243,234,.22); border-radius: 2px;
  flex: 1; overflow: hidden; position: relative;
}
.epa-fill{
  position: absolute; inset: 0; width: 0%; background: var(--paper);
  transition: width .1s linear;
}
.epa-seek{
  position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer;
  -webkit-appearance: none; height: 18px; margin: 0;
}
.epa-time{
  font-family: var(--ff-sans); font-size: 11px; font-variant-numeric: tabular-nums;
  letter-spacing: 0; white-space: nowrap; opacity: .7; flex-shrink: 0;
}

/* ---- Prev / Next navigation bar at bottom of panel ---- */
.ep-nav{
  display: flex; flex-shrink: 0;
  border-top: 2px solid currentColor;
}
.ep-nav-btn{
  flex: 1; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; color: inherit;
  transition: background .15s; min-width: 0;
}
.ep-nav-btn:hover{ background: rgba(128,128,128,.12); }
.ep-nav-next{ border-left: 1px solid currentColor; align-items: flex-end; text-align: right; }
.ep-nav-empty{ flex: 1; }
.ep-nav-dir{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .45;
}
.ep-nav-name{
  font-family: var(--ff-sans); font-size: 13px; font-weight: 700; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Responsive */
@media (max-width: 700px){
  .event-panel{ width: 100%; }
  .efs-hero{ grid-template-columns: 1fr; }
  .efs-title{ font-size: clamp(32px,8vw,52px); }
}

/* =========================================================
   CONTENT BLOCKS — typed archival material
   Shared between panel (.ep-content-blocks) and fullscreen (.efs-content-blocks)
   Grows over time: text → image → audio → video → gallery
   ========================================================= */
.ep-content-blocks,
.efs-content-blocks{
  display: flex; flex-direction: column;
}
.ep-content-blocks{
  padding: 0;
  gap: 32px;
  color: inherit;
}
.efs-content-blocks{
  padding: clamp(24px,3.5vw,48px) clamp(20px,4vw,52px);
  gap: 40px;
  border-top: 2px solid currentColor;
  max-width: 820px;
}

/* Text block */
.cb-text p{
  font-family: var(--ff-sans); font-size: 30px; line-height: 1.2;
  margin: 0 0 .9em; font-weight: 400;
}
.efs-content-blocks .cb-text p{ font-size: 30px; line-height: 1.2; }
.cb-text .ar p{
  font-family: var(--ff-ar); direction: rtl; text-align: right;
  font-size: 34px; line-height: 1.5; font-weight: 400;
}

/* Ticket/register block — this is a plain contentText block whose raw
   text happens to include an inline .cta-inline-link anchor (see the
   Sanity `content` field), so it's targeted via :has() rather than a
   dedicated block type. Rendered as a black bar that bleeds full viewport
   width (not just the card's edges) and scrolls with the rest of the
   content — sticking it to the top while scrolling past it turned out to
   be more distracting than useful, so that's been dropped. The padding
   uses max() so the inner text still lines up with the card's own content
   on wide screens, but just sits flush with 15px like every other
   paragraph once the viewport is narrower than the card's max-width
   (mobile, where there's no bleed to do). */
.cb-text:has(.cta-inline-link){
  background: #0a0a0a;
  box-sizing: border-box;
  width: 100vw;
  /* left:50%/-50vw resolves against the CARD's width (the containing
     block), not the viewport, so it drifted the whole bar off-center —
     margin calc(50% - 50vw) is viewport-relative regardless of the
     containing block and centers it correctly. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 16px max(15px, calc((100vw - 860px) / 2 + 15px));
  z-index: 20;
}
.cb-text:has(.cta-inline-link) p{
  color: #fff;
  font-weight: 700;
  margin: 0;
  display: flow-root;
}
.cta-inline-link{
  float: right;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid #fff;
  padding-bottom: 2px;
}
.cta-inline-link:hover{ opacity: .7; }
[dir="rtl"] .cta-inline-link{ float: left; }

/* Facts leader-list + register CTA at the bottom of the page — hidden
   for now per request, not deleted, so it's easy to bring back later. */
.ep-facts, .ep-content > .ep-register{ display: none; }

/* Image block — open, no outline, soft rounded corners */
.cb-image{ display: flex; flex-direction: column; gap: 10px; }
.cb-image img{
  display: block; width: 100%; max-width: 100%;
  border-radius: 0;
}
.cb-caption{
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .55;
}
.efs-content-blocks .cb-image img{ max-width: 100%; }

/* Pull quote — no rule, just scale + italic to carry the emphasis */
.cb-quote{
  margin: 0;
  padding: 0;
}
.cb-quote p{
  font-family: var(--ff-sans); font-style: normal;
  font-size: clamp(20px,2.2vw,28px); line-height: 1.3;
  margin: 0 0 10px; font-weight: 700; letter-spacing: 0;
  max-width: 62ch;
}
.cb-quote .ar p{ font-family: var(--ff-ar); font-style: normal; direction: rtl; text-align: right; }
.cb-quote cite{
  display: block;
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .55;
  font-style: normal; margin-top: 6px;
}

/* Audio block — soft tint instead of a hard border */
.cb-audio{
  background: rgba(127,127,127,.1);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.cb-audio-head{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
}
.cb-audio-icon{
  font-size: 18px; line-height: 1; flex-shrink: 0;
}
.cb-audio-title{ flex: 1; }
.cb-audio-dur{
  opacity: .55; font-variant-numeric: tabular-nums;
}
.cb-audio-placeholder{
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .38;
  padding: 10px 0;
}

/* Video block */
.cb-video-frame{ position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 16px; }
.cb-video-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cb-video-placeholder{
  aspect-ratio: 16/9;
  background: rgba(127,127,127,.1);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-sans); font-size: 13px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .38;
}

/* Gallery block */
.cb-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.cb-gal-item img{
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 12px;
}
.cb-gal-item .cb-caption{ margin-top: 4px; }

/* Divider — hairline, not a bold rule */
.cb-divider{
  border: 0; border-top: 1px dotted currentColor;
  margin: 8px 0; opacity: .3;
}

/* =========================================================
   PROJECT PAGES — two editorial layouts
   Type 1 (.prj-light): white/paper bg, mixed imagery, columns
   Type 2 (.prj-dark): dark opening spread + long-form article
   ========================================================= */

/* ---- Shared ---- */
.prj{ color: var(--night); }
.prj-topbar{ /* inherits .topbar */ }

.prj-section-label{
  position: fixed; left: 0; top: 50%; z-index: 40;
  transform: translateY(-50%) rotate(-90deg) translateX(-50%);
  transform-origin: left center;
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  opacity: .35; white-space: nowrap;
  pointer-events: none;
}

/* =============================================
   TYPE 1 — LIGHT EDITORIAL
   ============================================= */
.prj-light{
  background: var(--paper);
  min-height: 100vh;
}

/* Hero image — full width, tall */
.prj-hero{
  position: relative;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  border-bottom: 2px solid var(--night);
}
.prj-hero img{
  width: 100%; height: 90vh;
  object-fit: cover; object-position: center;
  display: block;
}
.prj-hero-caption{
  position: absolute; bottom: 20px; left: var(--pad);
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  font-weight: 500; color: var(--paper); opacity: .8;
  max-width: 340px; line-height: 1.5;
}

/* Article header */
.prj-head{
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(24px, 3vw, 40px);
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 64px); align-items: start;
  border-bottom: 2px solid var(--night);
}
.prj-head-meta{
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 8px;
}
.prj-category{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  padding: 5px 12px; border: 2px solid var(--night);
  display: inline-block; white-space: nowrap;
}
.prj-date{
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .45;
}
.prj-title-col{ display: flex; flex-direction: column; gap: 16px; }
.prj-title{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(44px, 7vw, 108px); line-height: .88;
  letter-spacing: 0; text-transform: uppercase;
  margin: 0;
}
.prj-title-ar{
  font-family: var(--ff-ar); font-size: clamp(36px, 5.5vw, 80px);
  font-weight: 700; line-height: 1; letter-spacing: 0;
  direction: rtl; margin: 0;
}
.prj-byline{
  font-family: var(--ff-sans); font-size: 16px; font-weight: 500;
  line-height: 1.5; max-width: 52ch; margin: 0; opacity: .7;
}

/* Article body */
.prj-body{
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad) clamp(64px, 8vw, 120px);
}

/* Lead paragraph */
.prj-lead{
  padding: clamp(32px, 4vw, 56px) 0 clamp(24px, 3vw, 40px);
  max-width: 680px;
}
.prj-lead p{
  font-family: var(--ff-sans); font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.55; font-weight: 500; margin: 0 0 1em;
  color: var(--night);
}

/* Two-column text block */
.prj-cols{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid rgba(10,10,22,.2);
}
.prj-cols p{
  font-family: var(--ff-sans); font-size: 15px; line-height: 1.7;
  font-weight: 400; margin: 0 0 1.1em; color: var(--night);
}
.prj-cols p:last-child{ margin-bottom: 0; }

/* Pull quote */
.prj-quote{
  margin: clamp(32px, 4vw, 56px) 0;
  padding: 28px 0 28px clamp(20px, 3vw, 40px);
  border-left: 4px solid var(--night);
}
.prj-quote p{
  font-family: var(--ff-ar); font-style: italic;
  font-size: clamp(22px, 3vw, 38px); line-height: 1.3;
  font-weight: 700; margin: 0 0 10px; color: var(--night);
}
.prj-quote cite{
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .45;
  font-style: normal;
}

/* Image spread — large + stacked side */
.prj-spread{
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 3px; margin: clamp(28px, 4vw, 56px) 0;
}
.prj-spread-main{ position: relative; }
.prj-spread-stack{ display: flex; flex-direction: column; gap: 3px; }
.prj-spread figure{ margin: 0; position: relative; }
.prj-spread-main img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.prj-spread-stack img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.prj-spread figcaption{
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  line-height: 1.5; font-weight: 500; opacity: .55;
  padding: 8px 0 0; color: var(--night);
}

/* Full-width image */
.prj-full-img{
  margin: clamp(28px, 4vw, 56px) 0;
}
.prj-full-img img{
  width: 100%; max-height: 70vh; object-fit: cover; display: block;
}
.prj-full-img figcaption{
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  line-height: 1.5; font-weight: 500; opacity: .55;
  padding: 8px 0 0; color: var(--night); max-width: 52ch;
}

/* =============================================
   TYPE 2 — DARK EDITORIAL
   ============================================= */
.prj-dark{
  background: var(--night);
  color: var(--paper);
  min-height: 100vh;
}

/* Opening spread — split: image left, title right */
.prj-opening{
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 54px);
  border-bottom: 2px solid rgba(246,243,234,.15);
}
.prj-opening-image{
  position: relative; overflow: hidden;
}
.prj-opening-image img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.prj-opening-panel{
  background: var(--night);
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4vw, 52px);
  border-left: 2px solid rgba(246,243,234,.15);
}
.prj-opening-meta{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; color: var(--paper); opacity: .45;
  display: flex; flex-direction: column; gap: 4px;
}
.prj-opening-title{
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(16px, 2vw, 28px);
}
.prj-opening-h1{
  font-family: var(--ff-ar); font-weight: 700; font-style: italic;
  font-size: clamp(52px, 8.5vw, 128px); line-height: .88;
  letter-spacing: 0; margin: 0; color: var(--paper);
  text-transform: none;
}
.prj-opening-h1-sans{
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(48px, 7.5vw, 112px); line-height: .88;
  letter-spacing: 0; text-transform: uppercase;
  margin: 0; color: var(--paper);
}
.prj-opening-sub{
  font-family: var(--ff-sans); font-size: 10px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; color: var(--paper);
  opacity: .3; margin-top: 20px;
}

/* Dark article body */
.prj-dark-body{
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) var(--pad) clamp(64px, 8vw, 120px);
}
.prj-dark-lead{
  max-width: 620px;
  margin-bottom: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid rgba(246,243,234,.15);
}
.prj-dark-lead p{
  font-family: var(--ff-sans); font-size: clamp(18px, 2vw, 24px);
  line-height: 1.55; font-weight: 500; margin: 0 0 1em;
  color: var(--paper); opacity: .9;
}
.prj-dark-cols{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid rgba(246,243,234,.12);
}
.prj-dark-cols p{
  font-family: var(--ff-sans); font-size: 15px; line-height: 1.75;
  font-weight: 400; margin: 0 0 1.1em; color: var(--paper); opacity: .8;
}
.prj-dark-cols p:last-child{ margin-bottom: 0; }

/* Dark pull quote */
.prj-dark-quote{
  margin: clamp(32px, 4vw, 56px) 0;
  padding: 28px 0 28px clamp(20px, 3vw, 40px);
  border-left: 3px solid rgba(246,243,234,.3);
}
.prj-dark-quote p{
  font-family: var(--ff-ar); font-style: italic;
  font-size: clamp(20px, 2.8vw, 36px); line-height: 1.3;
  font-weight: 700; margin: 0 0 12px; color: var(--paper);
}
.prj-dark-quote cite{
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700; opacity: .35;
  font-style: normal; color: var(--paper);
}

/* Dark full-width image */
.prj-dark-image{
  margin: clamp(32px, 4vw, 56px) 0;
}
.prj-dark-image img{
  width: 100%; max-height: 65vh; object-fit: cover; display: block;
}
.prj-dark-image figcaption{
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  line-height: 1.5; font-weight: 500;
  padding: 10px 0 0; color: var(--paper); opacity: .4; max-width: 52ch;
}

/* Dark image spread */
.prj-dark-spread{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3px; margin: clamp(28px, 4vw, 56px) 0;
}
.prj-dark-spread figure{ margin: 0; }
.prj-dark-spread img{
  width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block;
}
.prj-dark-spread figcaption{
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  line-height: 1.5; font-weight: 500;
  padding: 8px 0 0; color: var(--paper); opacity: .4;
}

/* Section divider */
.prj-rule{
  border: 0; border-top: 1px solid rgba(10,10,22,.2);
  margin: 0;
}
.prj-dark .prj-rule{ border-top-color: rgba(246,243,234,.12); }

/* Back link */
.prj-back{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  color: inherit; padding: 8px 14px; border: 2px solid currentColor;
  text-decoration: none; opacity: .6;
  transition: opacity .15s;
}
.prj-back:hover{ opacity: 1; }

/* Responsive */
@media (max-width: 760px){
  .prj-head{ grid-template-columns: 1fr; }
  .prj-cols, .prj-dark-cols{ grid-template-columns: 1fr; }
  .prj-spread{ grid-template-columns: 1fr; }
  .prj-spread-main img{ height: 60vw; }
  .prj-opening{ grid-template-columns: 1fr; min-height: auto; }
  .prj-opening-image{ height: 55vw; }
  .prj-dark-spread{ grid-template-columns: 1fr; }
  .prj-section-label{ display: none; }
}

/* =========================================================
   ARABIC / RTL — text-align overrides
   Applied when html[data-lang="ar"] (the site default).
   Text-align right; flex containers that have text reverse their
   justify-content so the text sits at the natural RTL start.
   ========================================================= */
html[data-lang="ar"] .gs-rail { text-align: right; }
html[data-lang="ar"] .gs-card-inner { text-align: right; }
html[data-lang="ar"] .gs-theme { text-align: right; }
html[data-lang="ar"] .gs-c-desc { margin-left: auto; margin-right: 0; }

/* Hero featured section — flip for RTL.
   Scoped to the desktop scroll-lock breakpoint (matches the
   min-width companion of the @media(max-width:700px) mobile stack
   below) — otherwise these selectors' higher specificity beats the
   mobile media query's plain .gs-sticky/.gs-track rules and the
   horizontal reversed layout leaks into the mobile column stack,
   breaking it entirely.
   NOTE: an `order`-based alternative to flex-direction:row-reverse
   was tried here (to avoid combining row-reverse with position:sticky
   on the same element, on a hunch about a Safari bug) and reverted —
   it broke the layout in Chrome (gs-track's auto flex-basis doesn't
   shrink to the available width when reordered via `order`, so it
   renders at its full content width and pushes gs-rail off-screen).
   Back to the original, verified-working approach. */
@media (min-width: 701px){
  html[data-lang="ar"] .gs-sticky { flex-direction: row-reverse; }
  html[data-lang="ar"] .gs-rail { border-right: 0; border-left: 2px solid var(--gs-fg); }
  /* Reverse card order so today is on the right (RTL start) */
  html[data-lang="ar"] .gs-track { flex-direction: row-reverse; }
}
/* Arabic font renders visually larger — scale meta/cta down a touch */
html[data-lang="ar"] .gs-c-meta { font-size: 22px; opacity: 1; }
html[data-lang="ar"] .gs-c-cta { font-size: 10px; }

/* "Artists this week" / featured project / residency section titles */
html[data-lang="ar"] .gs-vsection h2 { text-align: right; }

/* Programme timeline rows */
html[data-lang="ar"] .tl-row { text-align: right; }
html[data-lang="ar"] .tl-month-head { text-align: right; }
html[data-lang="ar"] .tl-tags { justify-content: flex-end; }

/* Exhibition section — Arabic / RTL overrides */
html[data-lang="ar"] .cx-head { direction: rtl; }
html[data-lang="ar"] .cx-title-head { text-align: right; }
@media (min-width: 701px){
  /* AR desktop: poster on right, rail on left */
  html[data-lang="ar"] .cx-sticky { flex-direction: row-reverse; }
  html[data-lang="ar"] .cx-poster {
    border-right: none;
    border-left: 2px solid currentColor;
  }
  html[data-lang="ar"] .cx-poster-band { text-align: right; direction: rtl; }
  html[data-lang="ar"] .cx-poster-meta { flex-direction: row-reverse; }
  html[data-lang="ar"] .cx-row { align-items: flex-end; direction: rtl; }
  html[data-lang="ar"] .cx-past-toggle { direction: rtl; }
}

/* Footer */
html[data-lang="ar"] .footer-col { text-align: right; }

/* Event page */
html[data-lang="ar"] .ep-meta { text-align: right; }
html[data-lang="ar"] .ep-meta .dt-block { align-items: flex-end; }
/* Embed (homepage reader) only: icons move to LEFT corner for Arabic RTL */
html[data-lang="ar"].embed .ep-header-icons { order: -1; }

html[data-lang="ar"] .ep-title { text-align: right; }
html[data-lang="ar"] .ep-register-header { direction: rtl; }
html[data-lang="ar"] .ep-programme { text-align: right; }
html[data-lang="ar"] .ep-prog-row { direction: rtl; }
html[data-lang="ar"] .ep-nav { direction: rtl; }
html[data-lang="ar"] .ep-nav-prev { order: 2; }
html[data-lang="ar"] .ep-nav-next { order: 1; }

/* =========================================================
   ARTISTS — WS1 homepage giant type + WS2 artist pages
   ========================================================= */

/* Inline artist-name link inside event-page fact rows (ep-facts) */
.ep-person-link{ color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: opacity .12s; }
.ep-person-link:hover{ opacity: .65; }

/* Stacked giant type — shared by the homepage "Artists this week" section
   and the artists.html all-artists index. Pure type, no cards, no rules. */
.gs-lineup-list{
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0;
}
#gs-artists-section h2{
  text-align: center;
  font-size: clamp(40px, 8.5vw, 168px);
  line-height: .94;
  color: var(--ink);
  margin: 0 0 .06em;
}
html[data-lang="ar"] #gs-artists-section h2{ font-size: clamp(34px, 7vw, 136px); }
@media (max-width: 700px){
  #gs-artists-section h2{ font-size: clamp(30px, 10vw, 64px); }
  html[data-lang="ar"] #gs-artists-section h2{ font-size: clamp(26px, 8.5vw, 54px); }
}
.gs-lineup-name{
  display: block; width: 100%;
  font-family: var(--ff-sans); font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 8.5vw, 168px); line-height: .94; letter-spacing: 0;
  color: var(--paper); text-decoration: none;
  padding: .06em 0; overflow-wrap: break-word;
  transition: color .15s;
}
.gs-lineup-name:hover, .gs-lineup-name:focus-visible{ color: var(--highlight); }
/* In-grid reader (_artistOpenReader in index.html) reuses .tl-row-open,
   which draws a border-top to mark the split on the Programme timeline's
   paper-colored rows — the giant stacked names sit on the dark section's
   own background instead, so the reader should read as seamless there:
   no border. */
.gs-lineup-name.tl-row-open{ border-top: none; }
.gs-lineup-name .ar{ font-family: var(--ff-ar); font-weight: 700; text-transform: none; }
.gs-lineup-all{
  display: inline-block; margin-top: 28px;
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
  color: var(--paper); opacity: .65; text-decoration: none;
  transition: opacity .15s;
}
.gs-lineup-all:hover{ opacity: 1; }

/* Arabic renders visually larger at these sizes — trim the clamp a touch
   so it doesn't overflow/wrap worse than the Latin type. */
html[data-lang="ar"] .gs-lineup-name{ font-size: clamp(34px, 7vw, 136px); }

@media (max-width: 700px){
  .gs-lineup-name{ font-size: clamp(30px, 10vw, 64px); }
  html[data-lang="ar"] .gs-lineup-name{ font-size: clamp(26px, 8.5vw, 54px); }
  .gs-lineup-all{ margin-top: 20px; }
}

/* Artist detail page (artist.html) — header: name/meta + flat photo.
   EN: photo right-aligned (DOM order text→photo, row direction).
   AR: photo left-aligned (row-reverse mirrors the same DOM order). */
.art-header{
  display: flex; align-items: flex-start; gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap; padding-bottom: 8px;
}
.art-header-text{ flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 10px; }
.art-meta-line{
  font-family: var(--ff-sans); font-size: 14px; font-weight: 500;
  opacity: .65; margin: 0;
}
.art-meta-line .ar{ font-family: var(--ff-ar); font-size: 16px; }
.art-photo-wrap{ flex: 0 0 auto; width: min(340px, 42vw); }
.art-photo-wrap img{
  display: block; width: 100%; height: auto;
  object-fit: cover; border-radius: 0;
}
html[data-lang="ar"] .art-header{ flex-direction: row-reverse; text-align: right; }
html[data-lang="ar"] .art-header-text{ align-items: flex-end; }
@media (max-width: 700px){
  .art-header{ flex-direction: column !important; }
  .art-header-text{ order: 2; }
  .art-photo-wrap{ order: 1; width: 100%; }
  html[data-lang="ar"] .art-header-text{ align-items: flex-start; }
}

/* Past-events toggle on the artist page — same click-to-expand idea as the
   exhibition rail's .cx-past-toggle, sized for a natural-height row list
   instead of the 35vh rail rows. */
.art-past-toggle{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; margin-top: 4px;
  border-top: 1px solid currentColor;
  cursor: pointer; user-select: none;
  font-family: var(--ff-sans); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; opacity: .6;
  transition: opacity .12s;
}
.art-past-toggle:hover{ opacity: 1; }
.art-past-arrow{ display: inline-block; transition: transform .2s; }
.art-past-toggle[aria-expanded="true"] .art-past-arrow{ transform: rotate(180deg); }
.art-past-list[hidden]{ display: none; }

html[data-lang="ar"] .art-past-toggle{ direction: rtl; }