/* =========================================================
   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;
}
.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"] [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: 20px; border-bottom: 1px solid rgba(29,36,255,.2); display: flex; flex-direction: column; gap: 10px; }
.gs-theme[hidden]{ display: none; }
.gs-theme-quote, .gs-theme-desc{ font-family: var(--ff-sans); font-weight: 700; font-size: 17px; line-height: 1.4; 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.7; }
.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; }

/* 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 ----------
   Full-bleed band in the Exhibition type color, sitting between the
   This Week rail and the Programme. Cards are huge stacked rows — same
   typographic language as the timeline, scaled up for something that's
   on view for weeks, not hours. Hover inverts; click opens the in-grid
   reader (vertical expansion, .tl-row-open machinery). */
.cx{
  background: #1d24ff; color: #f6f3ea;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.cx-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: clamp(28px, 4vw, 52px) var(--pad) 0;
}
.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;
}
.cx-list{ margin-top: clamp(20px, 3vw, 36px); }
.cx-card{
  display: block;
  padding: clamp(20px, 2.6vw, 34px) var(--pad) clamp(26px, 3vw, 40px);
  border-top: 2px solid currentColor;
  text-decoration: none; color: inherit;
  transition: background .15s ease, color .15s ease;
}
.cx-card:hover{ background: #f6f3ea; color: #1d24ff; }
.cx-row-top, .cx-row-bottom{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
}
.cx-range{ font-variant-numeric: lining-nums tabular-nums; }
.cx-tag{
  border: 2px solid currentColor; padding: 4px 12px;
  white-space: nowrap;
}
.cx-name{
  margin: clamp(10px, 1.6vw, 20px) 0 clamp(14px, 2vw, 24px);
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(44px, 7.5vw, 118px);
  line-height: .92; letter-spacing: 0; text-transform: uppercase;
}
.cx-name .ar{ font-family: var(--ff-ar); text-transform: none; line-height: 1.05; }
.cx-row-bottom{ opacity: .8; }

/* Exhibition programme list — below the cx-card on the homepage */
.cx-programme{
  border-top: 1px solid currentColor;
  margin-top: 0;
}
.cx-programme-head{
  padding: 14px var(--pad) 10px;
  font-family: var(--ff-sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; opacity: .55;
}
.cx-prog-row{
  display: grid;
  grid-template-columns: 70px 90px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px var(--pad);
  border-top: 1px solid currentColor;
  text-decoration: none;
  color: inherit;
  font-family: var(--ff-sans);
  opacity: .85;
  transition: opacity .12s, background .12s;
}
.cx-prog-row:hover{ opacity: 1; background: rgba(0,0,0,.04); }
.cx-prog-date{ font-size: 12px; font-weight: 700; opacity: .6; font-variant-numeric: tabular-nums; }
.cx-prog-type{ font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: .5; }
.cx-prog-name{ font-size: 14px; font-weight: 600; }

@media (max-width: 700px){
  .cx-head{ flex-direction: column; gap: 8px; }
  .cx-prog-row{ grid-template-columns: 60px 1fr; }
  .cx-prog-type{ display: none; }
}

/* 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: var(--night);
}
.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; }

/* ---- 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 var(--night);
}
.ep-nav-btn{
  flex: 1; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; color: var(--night);
  transition: background .15s; min-width: 0;
}
.ep-nav-btn:hover{ background: rgba(0,0,0,.05); }
.ep-nav-next{ border-left: 1px solid var(--night); 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: var(--night);
}
.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; }
}