/* ==========================================================================
   The Brand Build Up: site.css
   Plain CSS, logical properties only (margin-inline, padding-block, inset-inline...)
   so /ar/ (dir="rtl") mirrors automatically. Never use left/right.

   COMPONENT INDEX (reuse these on interior pages; do not re-invent)
   -------------------------------------------------------------------------
   Layout
     .container                 max-width wrapper with fluid gutter
     .section                   vertical rhythm block; modifiers:
       .section--rule           6px ink top rule (every section after hero)
       .section--dark           ink background, cream text, yellow top rule
       .section--yellow         pastel-yellow background
     .section-title             big Oswald H2 (display), AR: Alexandria
     .lede                      larger intro paragraph (max 62ch)
     .stack                     vertical flow spacing (> * + * margin)
     .visually-hidden, .skip-link
   Header / nav
     .site-header > .container.site-header__bar
     .brand                     logo link (img inside); .brand--footer larger
     .nav                       desktop link row; .nav__link (aria-current="page" = active, yellow underline)
     .nav-toggle                mobile menu button (JS toggles aria-expanded + .is-open on .nav-panel)
     .nav-panel                 mobile menu sheet (contains .nav__link, .lang-switch, .btn)
     .lang-switch               EN | عربي pill; links; aria-current="true" on active
   Buttons / pills / links
     .btn                       base. .btn--primary (ink + yellow text), .btn--secondary (ink outline),
                                .btn--yellow (on dark), .btn--sm, .btn--block
     .pill                      base rounded label. .pill--yellow, .pill--ink, .pill--outline, .pill--soft
     .pill--example             the "Example" / "مثال" marker (required on every fake item)
     .pill-link                 outline pill link (social links)
     .corner-pill               absolute-positions a pill in a media corner (parent needs position:relative)
     .link-arrow                text link with arrow (flips in RTL)
     .link-underline            text link with yellow underline bar
   Cards / media
     .card                      cream card, 20px radius, 2px #E6E0CC border. .card--yellow, .card--dark, .card--pad
     .frame                     solid yellow frame (8px) around an image, 20px radius; .frame--ink
     .media                     rounded 20px image wrapper (overflow hidden); .media img{width:100%}
     .play                      circular ink play button (decorative span)
     .meta                      small "Founders Edition · Episode 04 · 34 min" line; .meta__dot separators
   Hero (home)
     .hero, .hero__grid, .hero__title, .slab (+ .slab--yellow/.slab--ink/.slab--card, --i index),
     .hero__sub, .hero__actions, .hero-card (.hero-card__photo, .hero-card__info)
   Page header (interior pages)
     .page-header               big H1 + sub + optional .filter-pills
       .page-header__title, .page-header__sub
     .filter-pills              row of toggles: .pill-filter (aria-pressed="true" = active, or aria-current)
   Critique masonry grid
     .masonry                   CSS-columns masonry (1/2/3 col). Children: .critique-card
     .critique-card             card with .media, .pill--example corner, h3, .meta, text
   Episode list
     .episode-list              card containing .episode-item
     .episode-item              .episode-item__num (EP 01), __title, __meta, __links (.pill-link)
   Numbered insight list
     .insight-list              ol; .insight-item with .insight-item__num (yellow-highlight numeral),
                                __body (.pill--example, __title, __meta), __date
     .insight-feature           large card: media + title (Oswald) + meta
   Newsletter / CTA
     .newsletter                yellow card with heading, text and .newsletter__form (pill input + button)
     .cta-card                  cream card heading + text + .link-arrow
     .partners-strip            "In partnership with" row of text wordmarks (.partners-strip__list)
   Footer
     .site-footer               ink footer: .footer__brand, .footer__cols (.footer__col h2/ul), .footer__bottom
   Rebuild (Oct 12): see the REBUILD section at the end of this file (ticker, mag grid, feature, stories, seats, numlist, facts,
     slots, tabs, forms, ways, whys, partner groups).
   Utilities: .u-hide-mobile, .u-hide-desktop
   ========================================================================== */

/* ---------- Fonts (self-hosted woff2, latin + arabic subsets) ---------- */
@font-face{font-family:"Oswald";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/oswald-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/oswald-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Alexandria";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/alexandria-arabic-700-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/alexandria-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";font-weight:800;font-style:normal;font-display:swap;src:url("../fonts/alexandria-arabic-800-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";font-weight:800;font-style:normal;font-display:swap;src:url("../fonts/alexandria-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  --yellow:#FFEE8C; --ink:#16181D; --cream:#FBF8EE; --card:#FFFDF6; --border:#E6E0CC;
  --text:#4A4636; --text-2:#5B5850; --dark-card:#22252B; --dark-border:#33363D;
  --muted-dark:#B9B3A8; --text-on-dark:#F4EFE6;
  --yellow-deep:#F2DC5C; /* hover state of yellow */
  --font-head:"Oswald","Arial Narrow",Arial,sans-serif;
  --font-body:"DM Sans",Arial,sans-serif;
  --r-card:20px; --r-btn:12px; --r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:clamp(20px,4vw,56px);
  --maxw:1440px;
  --section-y:clamp(56px,8vw,112px);
  --fs-display:clamp(2.5rem,7.2vw,6rem);   /* section titles */
  --hero-cardw:clamp(300px,27vw,400px); --hero-gap:clamp(32px,4vw,56px);
  --hero-avail:calc(min(100vw,var(--maxw)) - 2*var(--gutter) - var(--hero-cardw) - var(--hero-gap));
  --fs-hero:clamp(3rem,16vw,8rem);       /* hero slabs, stacked (<900px) */
  --fs-h2:clamp(2rem,4.2vw,3rem);
  --fs-h3:clamp(1.375rem,2.2vw,1.75rem);
  --fs-body:clamp(1rem,1.1vw + .55rem,1.125rem);
  --fs-label:clamp(.75rem,.2vw + .7rem,.8125rem);
}
html[lang="ar"]{
  --font-head:"Alexandria","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --font-body:"IBM Plex Sans Arabic","DM Sans",Tahoma,sans-serif;
  --fs-hero:clamp(3rem,16vw,8rem);
  --fs-display:clamp(2.25rem,6vw,5rem);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--ink) var(--cream)}
body{margin:0;background:var(--cream);color:var(--text);font:400 var(--fs-body)/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--yellow);color:var(--ink)}
.section--dark ::selection,.site-footer ::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.section--dark :focus-visible,.site-footer :focus-visible{outline-color:var(--yellow)}
h1,h2{font-family:var(--font-head);font-weight:700;text-transform:uppercase;color:var(--ink);text-wrap:balance}
h3{font-family:var(--font-body);font-weight:700;color:var(--ink);font-size:var(--fs-h3);line-height:1.25;text-wrap:balance}
p{text-wrap:pretty}
html[lang="ar"] h1,html[lang="ar"] h2{font-weight:800;text-transform:none;line-height:1.3}
html[lang="ar"] h3{font-weight:700;line-height:1.45}
html[lang="ar"] .label,html[lang="ar"] .pill,html[lang="ar"] .meta{letter-spacing:0;text-transform:none}
.visually-hidden{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:16px;inset-block-start:-80px;z-index:100;background:var(--ink);color:var(--yellow);
  padding:12px 20px;border-radius:var(--r-btn);font-weight:700;transition:inset-block-start .2s var(--ease)}
.skip-link:focus{inset-block-start:12px}
.container{inline-size:100%;max-inline-size:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.u-hide-mobile{display:none}
@media (min-width:1200px){.u-hide-mobile{display:revert}.u-hide-desktop{display:none!important}}

/* ---------- Sections ---------- */
.section{padding-block:var(--section-y);position:relative}
.section--rule{border-block-start:6px solid var(--ink)}
.section--dark{background:var(--ink);color:var(--muted-dark);border-block-start:6px solid var(--yellow)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--text-on-dark)}
.section--yellow{background:var(--yellow);color:var(--text)}
.section-title{font-size:var(--fs-display);line-height:1;letter-spacing:-.005em}
html[lang="ar"] .section-title{line-height:1.25}
.lede{font-size:clamp(1.0625rem,1vw + .75rem,1.3125rem);max-inline-size:62ch;color:var(--text-2)}
.stack>*+*{margin-block-start:var(--stack,1rem)}
.label{font:700 var(--fs-label)/1.2 var(--font-body);letter-spacing:.18em;text-transform:uppercase}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-block-size:48px;padding:.75rem 1.5rem;
  border-radius:var(--r-btn);border:2px solid var(--ink);font:700 1rem/1.2 var(--font-body);text-align:center;
  transition:transform .18s var(--ease),background-color .18s,color .18s,box-shadow .18s,border-color .18s}
html[lang="ar"] .btn{font-family:var(--font-body);font-weight:600}
.btn--primary{background:var(--ink);color:var(--yellow)}
.btn--secondary{background:transparent;color:var(--ink)}
.btn--yellow{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.btn--sm{min-block-size:44px;padding:.5rem 1.25rem}
.btn--block{inline-size:100%}
@media (hover:hover){
  .btn--primary:hover{background:#2a2d35;transform:translateY(-2px);box-shadow:0 8px 18px -8px rgb(22 24 29/.5)}
  .btn--secondary:hover{background:var(--ink);color:var(--yellow);transform:translateY(-2px)}
  .btn--yellow:hover{background:var(--yellow-deep);border-color:var(--yellow-deep);transform:translateY(-2px)}
}
.btn:active{transform:scale(.97)}

/* ---------- Pills ---------- */
.pill{display:inline-flex;align-items:center;min-block-size:28px;padding:.2rem .85rem;border-radius:var(--r-pill);
  font:600 .8125rem/1.2 var(--font-body);background:var(--card);border:1.5px solid var(--border);color:var(--ink);white-space:nowrap}
.pill--yellow{background:var(--yellow);border-color:var(--yellow)}
.pill--ink{background:var(--ink);border-color:var(--ink);color:var(--yellow)}
.pill--outline{background:transparent;border-color:var(--ink)}
.pill--example{background:var(--yellow);border-color:var(--yellow);color:var(--ink);min-block-size:26px;padding-block:.1rem}
.section--dark .pill--example{background:var(--yellow)}
.corner-pill{position:absolute;inset-block-start:16px;inset-inline-start:16px;z-index:2}
.pill-link{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px;padding:.4rem 1.1rem;border-radius:var(--r-pill);
  border:1.5px solid var(--ink);font:600 .875rem/1 var(--font-body);color:var(--ink);background:transparent;
  transition:background-color .18s,color .18s,transform .18s var(--ease)}
.pill-link:hover{background:var(--ink);color:var(--yellow)}
.pill-link:active{transform:scale(.96)}
.pill-filter{display:inline-flex;align-items:center;min-block-size:44px;padding:.4rem 1.2rem;border-radius:var(--r-pill);
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 .9375rem/1 var(--font-body);
  transition:background-color .18s,color .18s,transform .18s var(--ease)}
.pill-filter:hover{background:var(--yellow)}
.pill-filter[aria-pressed="true"],.pill-filter[aria-current="true"]{background:var(--ink);color:var(--yellow)}
.pill-filter:active{transform:scale(.96)}

/* ---------- Links ---------- */
.link-arrow{display:inline-flex;align-items:center;gap:.6em;min-block-size:44px;font-weight:600;color:var(--ink)}
.link-arrow svg{inline-size:20px;block-size:20px;transition:transform .2s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}
html[dir="rtl"] .link-arrow svg{transform:scaleX(-1)}
html[dir="rtl"] .link-arrow:hover svg{transform:scaleX(-1) translateX(5px)}
.link-underline{display:inline-flex;align-items:center;min-block-size:44px;font-weight:700;color:var(--ink);
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 82%/100% 5px;transition:background-size .2s var(--ease)}
html[dir="rtl"] .link-underline{background-position:100% 82%}
.link-underline:hover{background-size:100% 100%}

/* ---------- Cards / media ---------- */
.card{background:var(--card);border:2px solid var(--border);border-radius:var(--r-card)}
.card--pad{padding:clamp(24px,3vw,40px)}
.card--yellow{background:var(--yellow);border-color:var(--yellow)}
.card--dark{background:var(--dark-card);border-color:var(--dark-border);color:var(--muted-dark)}
.card--dark h3{color:var(--text-on-dark)}
.media{position:relative;border-radius:var(--r-card);overflow:hidden}
.media img{inline-size:100%;block-size:100%;object-fit:cover}
.frame{position:relative;padding:clamp(8px,1vw,14px);background:var(--yellow);border-radius:calc(var(--r-card) + 6px)}
.frame--ink{background:var(--ink)}
.frame .media{border-radius:var(--r-card)}
.play{position:absolute;inset:0;margin:auto;inline-size:clamp(64px,9vw,104px);aspect-ratio:1;border-radius:50%;background:var(--ink);
  display:grid;place-items:center;box-shadow:0 14px 30px -12px rgb(22 24 29/.55);transition:transform .25s var(--ease)}
.play::before{content:"";inline-size:0;block-size:0;border-block:clamp(11px,1.6vw,17px) solid transparent;
  border-left:clamp(18px,2.6vw,28px) solid var(--yellow);margin-left:6%}
a:hover .play{transform:scale(1.08)}
.meta{font-size:.9375rem;color:var(--text-2)}
.meta{display:flex;flex-wrap:wrap;column-gap:1.3em;row-gap:.15em;overflow:clip}
.meta span{position:relative;white-space:nowrap}
.meta span+span::before{content:"\00B7";position:absolute;inset-inline-start:-.8em;inline-size:.3em;text-align:center}
.section--dark .meta{color:var(--muted-dark)}

/* ---------- Header / nav ---------- */
.site-header{position:relative;z-index:50;background:var(--cream)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:clamp(18px,2.4vw,28px)}
.brand{display:block;flex:none;min-block-size:44px}
.brand img{inline-size:clamp(112px,12vw,150px);block-size:auto}
.brand--footer img{inline-size:clamp(220px,30vw,400px)}
.nav{display:none}
.nav__link{position:relative;display:inline-flex;align-items:center;justify-content:center;min-inline-size:44px;min-block-size:44px;padding-inline:2px;font-weight:500;color:var(--ink);font-size:1rem;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 78%/0 5px;transition:background-size .22s var(--ease)}
html[dir="rtl"] .nav__link{background-position:100% 78%}
.nav__link:hover,.nav__link[aria-current="page"]{background-size:100% 5px}
.header__tools{display:none;align-items:center;gap:14px}
.lang-switch{display:inline-flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:var(--r-pill);overflow:hidden;background:transparent;font-size:.875rem}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px;min-inline-size:48px;padding-inline:14px;font-weight:700;color:var(--ink);
  transition:background-color .18s,color .18s}
.lang-switch a[aria-current="true"]{background:var(--ink);color:var(--yellow)}
.lang-switch a:not([aria-current="true"]):hover{background:var(--yellow)}
.lang-switch [lang="ar"]{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;font-weight:600}
.nav-toggle{display:inline-grid;place-items:center;inline-size:48px;block-size:48px;border-radius:var(--r-btn);border:2px solid var(--ink);background:transparent;padding:0;
  transition:background-color .18s}
.nav-toggle:hover{background:var(--yellow)}
.nav-toggle__bars{position:relative;inline-size:20px;block-size:2px;background:var(--ink);transition:background-color .2s}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;inset-inline-start:0;inline-size:20px;block-size:2px;background:var(--ink);
  transition:transform .3s var(--ease)}
.nav-toggle__bars::before{inset-block-start:-7px}.nav-toggle__bars::after{inset-block-start:7px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)}
.nav-panel{position:absolute;inset-inline:0;inset-block-start:100%;background:var(--cream);border-block-start:2px solid var(--border);border-block-end:6px solid var(--ink);
  padding:12px var(--gutter) 28px;display:none;box-shadow:0 24px 40px -24px rgb(22 24 29/.35)}
.nav-panel.is-open{display:block;animation:panel-in .28s var(--ease)}
.nav-panel .nav__link{display:flex;inline-size:100%;font-size:1.25rem;font-weight:600;border-block-end:1px solid var(--border);min-block-size:56px;background-image:none}
.nav-panel .nav__link[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--yellow)}
.nav-panel__row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-block-start:20px}
@keyframes panel-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (min-width:1200px){
  .nav{display:flex;align-items:center;gap:clamp(14px,1.5vw,30px);white-space:nowrap}
  .header__tools{display:flex}
  .nav-toggle,.nav-panel{display:none!important}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(16px,3vw,40px) clamp(56px,7vw,104px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,6vw,56px);align-items:start}
.hero__title{font-size:var(--fs-hero);line-height:1;font-weight:700;display:flex;flex-direction:column;align-items:flex-start;gap:.035em;--off:1.1em;letter-spacing:-.005em}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr) var(--hero-cardw);gap:var(--hero-gap)}
  /* side by side: slab size derives from the space left of the card ("& ADVERTISING" is ~6.7em wide) */
  .hero__title{font-size:clamp(2.75rem,calc(var(--hero-avail)/5.3),9.5rem)}
}
.slab{display:block;inline-size:fit-content;max-inline-size:100%;padding:.07em .2em .03em;border-radius:.1em;line-height:.98;white-space:nowrap;--r:0deg;rotate:var(--r);will-change:transform}
.slab--yellow{background:var(--yellow);color:var(--ink)}
.slab--ink{background:var(--ink);color:var(--yellow);margin-inline-start:var(--off)}
.slab--card{background:var(--card);color:var(--ink);border:2px solid var(--border);padding-block:.06em .03em}
html[lang="ar"] .hero__title{font-weight:800;--off:.6em}
html[lang="ar"] .slab{line-height:1.3;padding:.04em .24em .1em;white-space:nowrap;border-radius:.12em}
@media (max-width:600px){.hero__title{--off:.5em}html[lang="ar"] .hero__title{--off:.3em}}
.hero__sub{margin-block-start:clamp(28px,3.5vw,44px);max-inline-size:36ch;font-size:clamp(1.0625rem,1.1vw + .7rem,1.5rem);line-height:1.5;color:var(--text-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px 14px;margin-block-start:clamp(28px,3vw,40px)}
.hero__actions .btn{min-block-size:56px;padding-inline:1.75rem;font-size:1.0625rem}
@media (max-width:480px){.hero__actions .btn{inline-size:100%}}
/* build-up animation: final state is the default; the class .js is added in <head> only if motion is allowed */
.js .slab{animation:slab-in .72s var(--ease) both;animation-delay:calc(var(--i,0)*120ms + 100ms)}
@keyframes slab-in{from{opacity:0;transform:translateY(-52px) scale(.97)}60%{opacity:1}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .slab{animation:none}}
.hero-card{overflow:hidden;border-radius:var(--r-card);border:2px solid var(--border);background:var(--card);inline-size:100%;max-inline-size:380px;margin-inline:auto}
.hero-card__photo{position:relative;background:var(--yellow);aspect-ratio:594/600;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.hero-card__photo picture{display:contents}
.hero-card__photo img{position:absolute;inset-block:0;inset-inline:0;margin-inline:auto;block-size:100%;inline-size:auto;max-inline-size:none}
.hero-card__name{position:absolute;inset-block-end:14px;inset-inline-start:14px;background:var(--card);border-radius:var(--r-pill);padding:.35rem .9rem;
  font:600 .8125rem/1.2 var(--font-body);color:var(--ink);box-shadow:0 6px 16px -8px rgb(22 24 29/.4)}
.hero-card__info{padding:clamp(18px,2vw,26px);position:relative}
.hero-card__info .pill--example{position:absolute;inset-block-start:18px;inset-inline-end:18px}
.hero-card__info .meta{padding-inline-end:112px;font-size:.875rem;min-block-size:26px}
.hero-card__title{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2;margin-block-start:10px}
@media (min-width:900px){.hero-card{max-inline-size:none;margin-inline:0;margin-block-start:.35rem}}
/* 560-899px: horizontal card (photo start, text end) so the stacked hero leaves no dead space */
@media (min-width:560px) and (max-width:899px){
  .hero-card{display:grid;grid-template-columns:minmax(200px,.85fr) 1.15fr;max-inline-size:680px;margin-inline:0}
  .hero-card__photo{aspect-ratio:auto;min-block-size:300px}
  .hero-card__info{display:flex;flex-direction:column;justify-content:center;padding:28px}
  .hero-card__info .meta{padding-inline-end:0;margin-block-start:34px}
}

/* ---------- Page header (interior pages) ---------- */
.page-header{padding-block:clamp(24px,4vw,56px) clamp(32px,4vw,56px)}
.page-header__title{font-size:var(--fs-display);line-height:1}
html[lang="ar"] .page-header__title{line-height:1.25}
.page-header__sub{margin-block-start:16px;max-inline-size:56ch;font-size:clamp(1.0625rem,1vw + .75rem,1.3125rem);color:var(--text-2)}
.filter-pills{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:28px}

/* ---------- Conversation (featured + episode list) ---------- */
.conv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,40px);margin-block-start:clamp(32px,4vw,56px)}
@media (min-width:1024px){.conv-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}}
.conv-feature{display:block}
.conv-feature__media{aspect-ratio:1205/525;background:var(--yellow)}
.conv-feature__media img{object-position:70% 20%}
/* play sits over the artwork's empty yellow area; art is not mirrored in RTL, so physical position is intentional */
.conv-feature .play{inset:52% auto auto 42%;margin:0;translate:-50% -50%}
.conv-feature h3{font-family:var(--font-head);font-weight:700;text-transform:uppercase;font-size:clamp(1.875rem,4.4vw,3.75rem);line-height:1.05;margin-block-start:clamp(20px,2.4vw,32px);color:var(--ink)}
html[lang="ar"] .conv-feature h3{font-weight:800;text-transform:none;line-height:1.3}
.conv-feature .meta{margin-block-start:14px;font-size:clamp(1rem,1vw + .6rem,1.1875rem)}
.episode-list{padding:clamp(8px,1vw,12px) clamp(20px,2.4vw,32px)}
.episode-item{padding-block:clamp(20px,2.2vw,28px);border-block-end:1.5px solid var(--border)}
.episode-item:last-child{border-block-end:0}
.episode-item__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.episode-item__num{font:700 clamp(1.75rem,3vw,2.5rem)/1 var(--font-head);color:var(--ink);text-transform:uppercase}
.episode-item__title{font:700 clamp(1.125rem,1.6vw,1.375rem)/1.25 var(--font-head);text-transform:uppercase;color:var(--ink);margin-block-start:8px}
html[lang="ar"] .episode-item__title{font-weight:700;text-transform:none;line-height:1.5}
html[lang="ar"] .episode-item__num{font-weight:800}
.episode-item__meta{font-size:.9375rem;color:var(--text-2);margin-block-start:6px}
.episode-item__links{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:16px}

/* ---------- Critique on dark ---------- */
.critique{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
@media (min-width:1024px){.critique{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.critique__art figcaption{margin-block-start:18px;color:var(--muted-dark);font-size:1rem}
.critique__art .media{aspect-ratio:875/795}
.critique__title{font-size:clamp(2.5rem,5.6vw,5.25rem);line-height:1}
html[lang="ar"] .critique__title{font-size:clamp(2.25rem,4.6vw,4.25rem);line-height:1.3}
.critique__text{margin-block-start:clamp(20px,2.4vw,32px);max-inline-size:56ch;font-size:clamp(1rem,.9vw + .65rem,1.1875rem);line-height:1.7}
.critique__cols{display:grid;gap:16px;margin-block-start:clamp(24px,3vw,36px)}
@media (min-width:640px){.critique__cols{grid-template-columns:1fr 1fr}}
.critique__cols .card{padding:clamp(20px,2.2vw,30px)}
.critique__cols h3{font-family:var(--font-head);text-transform:uppercase;font-size:clamp(1.375rem,2vw,1.75rem);margin-block-end:14px;letter-spacing:.005em}
html[lang="ar"] .critique__cols h3{text-transform:none;font-weight:800}
.critique__cols p+p{margin-block-start:14px}
.critique__cols p{font-size:1rem;line-height:1.55}
.critique .btn{margin-block-start:clamp(24px,3vw,36px)}

/* ---------- Masonry critique grid ---------- */
.masonry{columns:1;column-gap:24px}
@media (min-width:700px){.masonry{columns:2}}
@media (min-width:1100px){.masonry{columns:3}}
.masonry>*{break-inside:avoid;margin-block-end:24px}
.critique-card{display:block;overflow:hidden;transition:transform .25s var(--ease),border-color .2s}
.critique-card:hover{transform:translateY(-4px);border-color:var(--ink)}
.critique-card .media{border-radius:0}
.critique-card__body{padding:20px 22px 24px}
.critique-card__body h3{margin-block:10px 8px}

/* ---------- Insights ---------- */
.insights{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px);margin-block-start:clamp(32px,4vw,56px)}
@media (min-width:1024px){.insights{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}}
.insight-feature{display:flex;flex-direction:column;padding:clamp(14px,1.6vw,22px)}
.insight-feature__media{aspect-ratio:855/388}
@media (min-width:1024px){.insights{align-items:stretch}.insight-feature__media{flex:1;aspect-ratio:auto;min-block-size:260px}}
.insight-feature .pill--example{margin-block-start:20px}
.insight-feature h3{font-family:var(--font-head);text-transform:uppercase;font-size:clamp(1.75rem,3.4vw,2.875rem);line-height:1.08;margin-block:10px 14px;padding-inline:4px;color:var(--ink)}
html[lang="ar"] .insight-feature h3{font-weight:800;text-transform:none;line-height:1.4}
.insight-feature .meta,.insight-feature .pill{margin-inline:4px}
.insight-feature .meta{margin-block-end:6px}
.insight-list{display:block}
.insight-item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(20px,3vw,40px);padding-block:clamp(18px,2vw,26px);border-block-end:1.5px solid var(--border);
  position:relative;align-items:start}
.insight-item:first-child{padding-block-start:0}
.insight-item__num{font:700 clamp(2.75rem,5vw,4.25rem)/1 var(--font-head);color:var(--ink);min-inline-size:1.7em;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100%/100% 52%;padding-inline:.04em;font-variant-numeric:lining-nums;align-self:start}
html[lang="ar"] .insight-item__num{font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(2.25rem,4vw,3.5rem);line-height:1.2}
.insight-item__body .pill--example{margin-block-end:8px}
.insight-item__title{font:700 clamp(1.125rem,1.5vw,1.375rem)/1.3 var(--font-body);color:var(--ink);text-wrap:balance;max-inline-size:26ch}
html[lang="ar"] .insight-item__title{line-height:1.55}
.insight-item__meta{margin-block-start:6px;font-size:.9375rem;color:var(--text-2)}
.insight-item__date{grid-column:2;margin-block-start:4px;font-size:.9375rem;color:var(--text-2)}
@media (min-width:640px){
  .insight-item{grid-template-columns:auto minmax(0,1fr) auto}
  .insight-item__date{grid-column:auto;margin-block-start:2px}
}
.insight-item a::after{content:"";position:absolute;inset:0}
.insight-item:hover .insight-item__title{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:4px;text-underline-offset:4px}
.insights__more{display:flex;justify-content:flex-end;margin-block-start:14px}

/* ---------- Partners strip ---------- */
.partners-strip{border-block:6px solid var(--ink);padding-block:clamp(28px,4vw,48px)}
.partners-strip__label{font-size:1rem;color:var(--text-2)}
.partners-strip__list{display:flex;flex-wrap:wrap;gap:10px clamp(28px,5vw,80px);margin-block-start:clamp(14px,2vw,24px);align-items:baseline;justify-content:space-between}
@media (min-width:1024px){.partners-strip__list{flex-wrap:nowrap}}
.partners-strip__list li{font:500 clamp(1.375rem,2.8vw,2.5rem)/1.1 var(--font-body);color:var(--ink);letter-spacing:-.01em}
html[lang="ar"] .partners-strip__list li{font-family:"IBM Plex Sans Arabic","DM Sans",sans-serif;font-weight:400;letter-spacing:0}

/* ---------- Newsletter / CTA ---------- */
.join-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,32px);margin-block-start:clamp(32px,4vw,56px)}
@media (min-width:1024px){.join-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.newsletter{background:var(--yellow);border-radius:var(--r-card);padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.newsletter h2{font-size:clamp(2.5rem,5.4vw,5rem);line-height:1;max-inline-size:9ch}
html[lang="ar"] .newsletter h2{font-size:clamp(2.25rem,4.6vw,4rem);line-height:1.3;max-inline-size:none}
.newsletter p{margin-block-start:22px;max-inline-size:46ch;font-size:clamp(1.0625rem,1vw + .7rem,1.3125rem);line-height:1.55;color:var(--text)}
.newsletter__form{display:flex;margin-block-start:clamp(24px,3vw,36px);max-inline-size:560px;background:var(--card);border:1.5px solid rgb(22 24 29/.35);border-radius:var(--r-pill);padding:4px;
  transition:box-shadow .2s,border-color .2s}
.newsletter__form:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--ink)}
.newsletter__form input{flex:1;min-inline-size:0;border:0;background:transparent;padding:.75rem 1.25rem;font-size:1rem;outline:0;color:var(--ink)}
.newsletter__form input::placeholder{color:#6d6a5f}
.newsletter__form .btn{border-radius:var(--r-pill);min-block-size:52px;padding-inline:1.5rem}
.cta-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,32px)}
.cta-card{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;align-items:flex-start;transition:border-color .2s,transform .25s var(--ease)}
.cta-card:hover{border-color:var(--ink)}
.cta-card h3{font-family:var(--font-head);text-transform:uppercase;font-size:clamp(1.875rem,3.4vw,3rem);line-height:1.05;font-weight:700}
html[lang="ar"] .cta-card h3{text-transform:none;font-weight:800;line-height:1.35}
.cta-card p{margin-block:14px 18px;max-inline-size:34ch;color:var(--text-2)}
.cta-card .link-arrow{margin-block-start:auto}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--muted-dark);padding-block:clamp(48px,6vw,88px) 32px;margin-block-start:var(--section-y)}
.footer__top{display:grid;gap:clamp(36px,5vw,56px);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.footer__top{grid-template-columns:1fr .8fr 2fr;align-items:start}}
.footer__tagline{margin-block-start:22px;font-size:clamp(1.0625rem,1.2vw + .6rem,1.5rem);color:var(--text-on-dark);font-weight:500;max-inline-size:28ch}
.footer__cols{display:contents}
.footer__col h2{font:600 1.125rem/1.3 var(--font-body);text-transform:none;color:var(--muted-dark);margin-block-end:14px;letter-spacing:0}
html[lang="ar"] .footer__col h2{font-family:var(--font-body)}
.footer__col a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--muted-dark);font-size:1.0625rem;transition:color .18s}
.footer__col a:hover{color:var(--yellow)}
.footer__langwrap{display:flex}
@media (min-width:1024px){.footer__col:last-child{grid-column:auto}}
.site-footer .lang-switch{border-color:var(--muted-dark)}
.site-footer .lang-switch a{color:var(--text-on-dark)}
.site-footer .lang-switch a[aria-current="true"]{background:var(--yellow);color:var(--ink)}
.site-footer .lang-switch a:not([aria-current="true"]):hover{background:var(--dark-card)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-block-start:16px;font-size:.9375rem}
.footer__bottom a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--muted-dark)}
.footer__bottom a:hover{color:var(--yellow)}

/* ---------- Motion polish (global, no scroll) ---------- */
.btn:active{transition-duration:.12s}
a.card{transition:transform .25s var(--ease),border-color .2s}
@media (hover:hover) and (pointer:fine){
  a.card:hover,.cta-card:hover{transform:translateY(-4px);border-color:var(--ink)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
  .nav-panel.is-open{animation:none}
  a.card:hover,.cta-card:hover,.btn:hover{transform:none}
}

/* Not-yet-live links: inert, muted, no focus (see "soon" label) */
.is-soon{cursor:default}
.pill-link.is-soon{opacity:.55;border-style:dashed}
.pill-link.is-soon:hover{background:transparent;color:inherit}
.pill-link.is-soon:active{transform:none}
.soon-tag{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-inline-start:.5em;padding:.1em .5em;border-radius:var(--r-pill);background:rgb(0 0 0/.08)}
.footer__col .is-soon,.insight-item__title .is-soon{opacity:.6}
.conv-feature.is-soon:hover .conv-feature__title,.insight-feature.is-soon:hover .insight-feature__title{text-decoration:none}
.newsletter-msg{margin-block-start:12px;font-weight:600;font-size:.9375rem;min-block-size:0}
.newsletter-msg:empty{display:none}


/* ==========================================================================
   REBUILD (Oct 12): magazine home, interior pages, forms. Logical properties only.
   ========================================================================== */
[hidden]{display:none!important}
.pill-filter[aria-selected="true"]{background:var(--ink);color:var(--yellow)}

/* ---------- Highlights ticker ---------- */
.ticker{background:var(--ink);overflow:hidden;position:relative;z-index:5;border-block-end:6px solid var(--yellow)}
.ticker__track{display:flex;inline-size:max-content;animation:ticker 46s linear infinite;will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__group{display:flex;flex:none}
.ticker__group li{display:flex;align-items:center;white-space:nowrap;padding-block:14px;color:var(--yellow);
  font:700 .9375rem/1.2 "Oswald","Arial Narrow",Arial,sans-serif;text-transform:uppercase;letter-spacing:.14em}
html[lang="ar"] .ticker__group li{font-family:"Alexandria","IBM Plex Sans Arabic",Tahoma,sans-serif;font-weight:700;letter-spacing:0;text-transform:none;font-size:1rem}
.ticker__group li::after{content:"";inline-size:8px;block-size:8px;background:var(--cream);rotate:45deg;margin-inline:clamp(22px,3.2vw,44px)}
@keyframes ticker{to{transform:translateX(calc(-50% * var(--mq-d,1)))}}
html[dir="rtl"]{--mq-d:-1}
@media (prefers-reduced-motion:reduce){.ticker{overflow-x:auto}.ticker__track{animation:none}.ticker__group[aria-hidden="true"]{display:none}}

/* ---------- Hero (home): Season 1 card instead of a photo ---------- */
.hero__support{margin-block-start:18px;max-inline-size:46ch;font-size:clamp(1rem,.8vw + .7rem,1.1875rem);line-height:1.55;color:var(--text-2)}
.hero-card--s1{background:var(--ink);border-color:var(--ink);display:block}
.hero-card__art{position:relative;background:var(--yellow);aspect-ratio:594/470;display:grid;place-items:center;overflow:hidden}
.hero-card__num{font:700 clamp(9rem,17vw,15rem)/.8 "Oswald","Arial Narrow",Arial,sans-serif;color:var(--ink);letter-spacing:-.02em;margin-block-end:.12em}
.hero-card--s1 .hero-card__info{padding:clamp(20px,2vw,28px);display:grid;gap:12px;justify-items:start}
.hero-card--s1 .hero-card__title{font:700 clamp(1.75rem,2.6vw,2.375rem)/1.05 var(--font-head);text-transform:uppercase;color:var(--text-on-dark);margin:0}
html[lang="ar"] .hero-card--s1 .hero-card__title{text-transform:none;font-weight:800;line-height:1.3}
.hero-card__text{color:var(--muted-dark);font-size:1rem;line-height:1.5}
@media (min-width:560px) and (max-width:899px){
  .hero-card--s1{display:grid;grid-template-columns:minmax(200px,.8fr) 1.2fr;max-inline-size:680px}
  .hero-card--s1 .hero-card__art{aspect-ratio:auto;min-block-size:240px}
  .hero-card--s1 .hero-card__info{align-content:center}
}

/* ---------- Seats (empty circles that wait for names) ---------- */
.seats{display:grid;color:var(--ink)}
.seat{display:block;aspect-ratio:1;border-radius:50%;border:2px dashed currentColor}
.seats--card{position:absolute;inset-inline:18px;inset-block-end:18px;grid-template-columns:repeat(10,1fr);gap:6px}
.seats--card .seat{border-width:2px;opacity:.55}
.seats--teaser{grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.6vw,22px);max-inline-size:560px;justify-self:end;inline-size:100%}
.seats--teaser .seat{background:var(--yellow);border-color:var(--ink)}
.seats--teaser .seat:nth-child(odd){background:var(--card)}
.seats--empty{grid-template-columns:repeat(6,clamp(40px,7vw,72px));gap:clamp(8px,1.4vw,16px);justify-content:center}
.seats--empty .seat{background:var(--yellow)}

/* ---------- Home: magazine grid ---------- */
.mag__grid{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:1024px){.mag__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch}}
.feature{position:relative;overflow:hidden;background:var(--ink);color:var(--muted-dark);border-radius:var(--r-card);padding:clamp(28px,4vw,56px);
  display:flex;align-items:flex-end;min-block-size:clamp(440px,46vw,640px)}
.feature__body{position:relative;z-index:1;display:grid;gap:18px;justify-items:start}
.feature__title{font-size:clamp(3rem,6vw,5.5rem);line-height:.95;color:var(--text-on-dark)}
html[lang="ar"] .feature__title{font-size:clamp(2.75rem,6vw,5rem);line-height:1.2}
.feature__text{max-inline-size:44ch;color:var(--muted-dark);font-size:clamp(1rem,.6vw + .8rem,1.1875rem);line-height:1.6}
.feature .btn{margin-block-start:6px}
.feature__blocks{position:absolute;inset-block-start:clamp(24px,3vw,44px);inset-inline-end:clamp(24px,3vw,44px);display:grid;gap:6px;justify-items:end;inline-size:clamp(130px,26%,240px)}
.feature__block{display:block;block-size:clamp(10px,1vw,14px);border-radius:4px;background:var(--yellow);inline-size:calc(36% + var(--n) * 7%)}
.feature__block:nth-child(3n+2){background:var(--cream)}
.feature__block:nth-child(3n){background:var(--dark-card);box-shadow:inset 0 0 0 2px #4a4e57}
.mag__side{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px)}
.stories{display:grid;gap:14px;flex:1}
.story{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,24px);align-items:center;padding:clamp(18px,2vw,26px);background:var(--card);
  border:2px solid var(--border);border-radius:var(--r-card);transition:transform .25s var(--ease),border-color .2s}
.story__num{display:grid;place-items:center;inline-size:clamp(56px,6vw,76px);aspect-ratio:1;border-radius:14px;background:var(--yellow);color:var(--ink);
  font:700 clamp(1.5rem,2.4vw,2rem)/1 "Oswald","Arial Narrow",Arial,sans-serif}
.story--2 .story__num{background:var(--ink);color:var(--yellow)}
.story--3 .story__num{background:var(--card);border:2px solid var(--ink)}
.story__title{font:700 clamp(1.5rem,2.4vw,2rem)/1.1 var(--font-head);text-transform:uppercase;color:var(--ink);margin-block-end:6px}
html[lang="ar"] .story__title{text-transform:none;font-weight:800;line-height:1.4}
.story p{color:var(--text-2);font-size:1rem;line-height:1.5}
@media (hover:hover) and (pointer:fine){.story:hover{transform:translateY(-3px);border-color:var(--ink)}}

/* ---------- Home: directory teaser, involved, newsletter, soon row ---------- */
.teaser{border-block-start:6px solid var(--ink)}
.teaser__grid{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
@media (min-width:1024px){.teaser__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.teaser .lede{margin-block-start:20px}
.teaser__actions{margin-block-start:28px}
.involved__grid{display:grid;gap:clamp(16px,2.4vw,32px)}
@media (min-width:700px){.involved__grid{grid-template-columns:1fr 1fr}}
.involved .cta-card{background:var(--card)}
.involved .cta-card h3{max-inline-size:14ch}
html[lang="ar"] .involved .cta-card h3{max-inline-size:none}
.nl-section{padding-block-start:0}
.nl-card{display:grid;gap:clamp(24px,3vw,40px);align-items:center;justify-content:stretch}
@media (min-width:900px){.nl-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.nl-card h2{max-inline-size:11ch}
html[lang="ar"] .nl-card h2{max-inline-size:none}
.nl-card__form .newsletter__form{margin-block-start:0}
.form-note{font-size:.8rem;line-height:1.5;color:var(--text-2);margin-block-start:14px;max-inline-size:52ch}
.nl-card .form-note{color:var(--text-2);margin-block-start:10px}
.nl-card .form-note--plain{font-size:1rem;font-weight:600;color:var(--ink);margin-block-start:16px}
.nl-card .newsletter p{margin:0}
.soon-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(20px,3vw,40px);padding-block:clamp(36px,5vw,64px) 0}
.soon-row__label{font:700 clamp(1.25rem,2vw,1.75rem)/1 var(--font-head);text-transform:uppercase;color:var(--ink)}
html[lang="ar"] .soon-row__label{text-transform:none;font-weight:800}
.soon-row__list{display:flex;flex-wrap:wrap;align-items:baseline;gap:0}
.soon-row__list li{font:500 clamp(1.375rem,2.8vw,2.25rem)/1.2 var(--font-body);color:var(--ink)}
.soon-row__list li+li::before{content:"\00B7";margin-inline:.45em}
.soon-row__list a{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 85%/100% 5px;transition:background-size .2s var(--ease)}
.soon-row__list a:hover{background-size:100% 100%}
.soon-row__list .is-soon{opacity:.55}

/* ---------- Interior page header ---------- */
.page-header__tag{margin-block-end:20px}
.page-header__title{display:inline;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 90%/100% .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.04em}
html[dir="rtl"] .page-header__title{background-position:100% 90%}
.page-header__sub{font-weight:500;color:var(--ink);margin-block-start:24px}
.page-header__intro{margin-block-start:20px}

/* ---------- Overview ---------- */
.ov-intro__grid{display:grid;gap:clamp(28px,4vw,64px);align-items:start}
@media (min-width:1024px){.ov-intro__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.ov-intro__lead{font-size:clamp(1.3rem,1.6vw + .8rem,2rem);line-height:1.4;font-weight:500;color:var(--ink);text-wrap:pretty}
.pull{font:700 clamp(2rem,3.8vw,3.25rem)/1.05 var(--font-head);text-transform:uppercase;color:var(--ink);
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 92%/100% .22em;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html[lang="ar"] .pull{text-transform:none;font-weight:800;line-height:1.4;background-position:100% 95%}
.ov-intro__body{margin-block-start:28px;font-size:clamp(1.0625rem,.6vw + .85rem,1.25rem);line-height:1.65}
.split{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:1024px){.split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.numlist{display:block}
.numlist__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:start;padding-block:clamp(18px,2vw,26px);border-block-end:1.5px solid var(--border)}
.numlist__item:first-child{padding-block-start:0}
.numlist__item:last-child{border-block-end:0}
.numlist__num{font:700 clamp(2.5rem,4.4vw,3.75rem)/1 "Oswald","Arial Narrow",Arial,sans-serif;color:var(--ink);min-inline-size:1.7em;text-align:center;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100%/100% 52%;padding-inline:.04em}
.numlist__text{font-size:clamp(1.0625rem,.9vw + .8rem,1.375rem);line-height:1.45;color:var(--ink);align-self:center;max-inline-size:52ch;font-weight:500}
.who .statement{font-weight:600;font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1.25;color:var(--ink);max-inline-size:34ch}
html[lang="ar"] .who .statement{line-height:1.6}
.platforms{display:flex;flex-wrap:wrap;gap:10px}
.s1-block__grid{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.s1-block__grid{grid-template-columns:minmax(0,1.4fr) auto}}
.lede--dark{color:var(--muted-dark)}
.s1-block__soon{font:700 clamp(2rem,4vw,3.5rem)/1 var(--font-head);text-transform:uppercase;color:var(--yellow)}
html[lang="ar"] .s1-block__soon{text-transform:none;font-weight:800}

/* ---------- Season 1 ---------- */
.two-col{display:grid;gap:clamp(36px,5vw,64px);align-items:start}
@media (min-width:1024px){.two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.two-col .numlist,.two-col .facts{margin-block-start:clamp(24px,3vw,36px)}
.facts{display:grid;gap:14px}
@media (min-width:480px){.facts{grid-template-columns:1fr 1fr}}
.fact{display:grid;gap:14px;align-content:space-between;padding:clamp(18px,2vw,26px);background:var(--card);border:2px solid var(--border);border-radius:var(--r-card)}
.fact:first-child{background:var(--yellow);border-color:var(--yellow)}
.fact__num{font:700 1.5rem/1 "Oswald","Arial Narrow",Arial,sans-serif;color:var(--ink);opacity:.6}
.fact p{font:700 clamp(1.125rem,1.5vw,1.375rem)/1.3 var(--font-body);color:var(--ink);text-wrap:balance}
html[lang="ar"] .fact p{line-height:1.55}
.countdown-band__grid{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.countdown-band__grid{grid-template-columns:minmax(0,1fr) auto}}
.countdown__line{font:700 clamp(1.75rem,3.6vw,3rem)/1.1 var(--font-head);text-transform:uppercase;color:var(--ink);text-wrap:balance}
html[lang="ar"] .countdown__line{text-transform:none;font-weight:800;line-height:1.4}
.countdown__clock{display:flex;gap:12px;margin-block-start:18px}
.countdown__clock span{display:grid;justify-items:center;min-inline-size:84px;padding:12px 10px;background:var(--ink);color:var(--yellow);border-radius:14px;font:600 .8125rem/1.2 var(--font-body)}
.countdown__clock b{font:700 2.25rem/1 "Oswald","Arial Narrow",Arial,sans-serif}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin-block-start:clamp(28px,3.4vw,44px)}
@media (min-width:640px){.slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.slots{grid-template-columns:repeat(5,minmax(0,1fr))}}
.slot{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:3/4;padding:clamp(14px,1.6vw,20px);border:2px dashed var(--ink);border-radius:var(--r-card);background:var(--card)}
.slot:nth-child(odd){background:var(--yellow)}
.slot__num{font:700 clamp(2.5rem,5vw,4rem)/1 "Oswald","Arial Narrow",Arial,sans-serif;color:var(--ink)}
.slot__label{font:600 .875rem/1.3 var(--font-body);color:var(--ink)}

/* ---------- Directory ---------- */
.tablist{display:flex;flex-wrap:wrap;gap:10px;margin-block-end:clamp(24px,3vw,36px)}
.tabpanel:focus-visible{outline-offset:6px}
.empty{display:grid;justify-items:center;gap:18px;text-align:center;padding:clamp(40px,6vw,88px) 24px;border:2px dashed var(--ink);border-radius:var(--r-card);background:var(--card)}
.empty__title{font:700 clamp(2rem,5vw,4rem)/1.05 var(--font-head);text-transform:uppercase;color:var(--ink)}
html[lang="ar"] .empty__title{text-transform:none;font-weight:800;line-height:1.3}
.empty__text{color:var(--text-2);font-size:1.125rem}
.founder-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.founder-card{display:grid;gap:8px;align-content:start;padding:14px 14px 20px;background:var(--card);border:2px solid var(--border);border-radius:var(--r-card)}
.founder-card__photo{aspect-ratio:4/5;border-radius:14px;background:var(--yellow);display:grid;place-items:center;overflow:hidden}
.founder-card__photo img{inline-size:100%;block-size:100%;object-fit:cover}
.founder-card__name{font:700 1.5rem/1.1 var(--font-head);text-transform:uppercase}
.founder-card__brand,.founder-card__industry{color:var(--text-2);font-size:1rem}
.founder-card .pill{justify-self:start}
.agency{max-inline-size:760px}
.agency .lede{margin-block-start:14px}
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;background:var(--yellow);border-radius:var(--r-card);padding:clamp(28px,4vw,56px)}
.cta-band h2{font-size:clamp(2.25rem,4.6vw,4rem);line-height:1;max-inline-size:18ch}
html[lang="ar"] .cta-band h2{line-height:1.3;max-inline-size:none}

/* ---------- Forms ---------- */
.apply-panel{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media (min-width:1024px){.apply-panel{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.apply-panel__intro{position:sticky;inset-block-start:24px}}
.apply-panel__intro .lede{margin-block-start:16px}
.form-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.field--wide{grid-column:1/-1}}
.field label{display:block;font:600 .9375rem/1.3 var(--font-body);color:var(--ink);margin-block-end:8px}
.field__opt{font-weight:400;color:var(--text-2)}
.field input,.field textarea,.field select{inline-size:100%;min-block-size:52px;padding:.75rem 1rem;border:2px solid #CFC8B0;border-radius:12px;background:#fff;color:var(--ink);font:inherit;
  transition:border-color .18s,box-shadow .18s}
.field textarea{resize:vertical;min-block-size:120px;line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px var(--yellow)}
.field select{appearance:none;-webkit-appearance:none;padding-inline-end:2.75rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%2316181D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:20px}
html[dir="rtl"] .field select{background-position:left 1rem center}
.field select:invalid{color:#6d6a5f}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#B3261E}
.field__err{color:#9B1C14;font-size:.875rem;font-weight:600;margin-block-start:6px}
.field__err:empty{display:none}
.form-actions{margin-block-start:26px}
.form-actions .btn{min-inline-size:200px;min-block-size:56px}
.hp{position:absolute;inset-inline-start:-10000px;inset-block-start:auto;inline-size:1px;block-size:1px;overflow:hidden}
.form-status{margin-block-start:14px;font-weight:600}
.form-status:empty{display:none}
.form-status.is-error{color:#9B1C14}
.form-status.is-ok{padding:18px 22px;background:var(--yellow);border-radius:14px;color:var(--ink);font-size:1.1875rem;font-weight:700;line-height:1.45}
.bbu-form.is-sending .btn{opacity:.65;pointer-events:none}
.bbu-form.is-sending .btn::after{content:"";inline-size:14px;block-size:14px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{rotate:360deg}}
.bbu-form.is-done:not(.bbu-form--inline)>*:not(.form-status){display:none}
.bbu-form--inline.is-done{display:none}
.nl-card .form-status.is-ok{background:var(--ink);color:var(--yellow)}
.newsletter__form input{text-align:start}
.bbu-form--dark{background:var(--dark-card);border-color:var(--dark-border)}
.bbu-form--dark:focus-within{border-color:var(--yellow);box-shadow:0 0 0 3px var(--yellow)}
.bbu-form--dark input{color:var(--text-on-dark)}
.bbu-form--dark input::placeholder{color:var(--muted-dark)}
.bbu-form--dark .btn{background:var(--yellow);border-color:var(--yellow);color:var(--ink);min-block-size:48px;padding-inline:1.1rem}
.site-footer .form-note{color:var(--muted-dark)}
.site-footer .form-status.is-ok{background:var(--yellow);color:var(--ink);font-size:1rem}
.site-footer .form-status.is-error{color:#FF9B93}
.field--err-focus{scroll-margin-block:120px}

/* ---------- Partner ---------- */
.ways{display:grid;gap:14px;margin-block-start:clamp(28px,3.4vw,44px);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.ways{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ways{grid-template-columns:repeat(4,minmax(0,1fr))}}
.way{display:grid;gap:10px;align-content:start;padding:clamp(20px,2.4vw,30px);background:var(--card);border:2px solid var(--border);border-radius:var(--r-card)}
.way__num{justify-self:start;font:700 2.25rem/1 "Oswald","Arial Narrow",Arial,sans-serif;color:var(--ink);background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100%/100% 52%;padding-inline:.06em}
.way h3{font:700 clamp(1.375rem,2vw,1.75rem)/1.1 var(--font-head);text-transform:uppercase}
html[lang="ar"] .way h3{text-transform:none;font-weight:800;line-height:1.4}
.way p{color:var(--text-2)}
.whys{display:grid;gap:14px;margin-block-start:clamp(28px,3.4vw,44px)}
@media (min-width:900px){.whys{grid-template-columns:repeat(3,minmax(0,1fr))}}
.why{display:grid;gap:18px;align-content:start;padding:clamp(22px,2.6vw,32px);background:var(--dark-card);border:2px solid var(--dark-border);border-radius:var(--r-card)}
.why__num{font:700 3rem/1 "Oswald","Arial Narrow",Arial,sans-serif;color:var(--yellow)}
.why p{color:var(--text-on-dark);font-size:clamp(1.0625rem,.8vw + .8rem,1.25rem);line-height:1.5}
.partner-groups{display:grid;gap:0;margin-block-start:clamp(24px,3vw,40px)}
.partner-group{padding-block:clamp(22px,3vw,34px);border-block-start:2px solid var(--border)}
.partner-group__list{display:flex;flex-wrap:wrap;gap:6px clamp(24px,4vw,56px)}
.partner-group__list li{font:500 clamp(1.625rem,3.8vw,3.25rem)/1.1 var(--font-body);letter-spacing:-.01em;color:var(--ink)}
.partner-group__label{margin-block-start:12px;font:600 .875rem/1.3 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
html[lang="ar"] .partner-group__label{letter-spacing:0;text-transform:none;font-size:1rem}

/* ---------- Footer (rebuild) ---------- */
.footer__col--news{max-inline-size:640px}
.footer__col--news .newsletter__form{margin-block-start:0}
.footer__col li>span{display:inline-flex;align-items:center;min-block-size:44px;font-size:1.0625rem}
.footer__nav{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.4vw,32px);margin-block-start:clamp(36px,5vw,56px);padding-block-start:18px;border-block-start:1px solid var(--dark-border)}
.footer__nav a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--muted-dark);font-weight:500;transition:color .18s}
.footer__nav a:hover{color:var(--yellow)}
.footer__brand .footer__tagline{max-inline-size:24ch}

/* ---------- Header: one row from 1200px ---------- */
@media (min-width:1200px){.header__tools{gap:12px}.nav{gap:clamp(12px,1.4vw,28px)}.site-header__bar{gap:clamp(16px,2vw,32px)}}

/* single-column grids never grow past the viewport because of long unbreakable content */
.nl-card,.teaser__grid,.ov-intro__grid,.split,.two-col,.countdown-band__grid,.s1-block__grid,.involved__grid,.mag__grid,.whys,.facts,.apply-panel,.hero__grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:480px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:700px){.involved__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.nl-card{grid-template-columns:repeat(2,minmax(0,1fr))}.countdown-band__grid{grid-template-columns:minmax(0,1fr) auto}.s1-block__grid{grid-template-columns:minmax(0,1.4fr) auto}.whys{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.teaser__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.ov-intro__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.mag__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.apply-panel{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
@media (min-width:900px){.hero__grid{grid-template-columns:minmax(0,1fr) var(--hero-cardw)}}
.section-title--md{font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.05;overflow-wrap:break-word}
html[lang="ar"] .section-title--md{font-size:clamp(1.75rem,3.6vw,2.75rem);line-height:1.3}
main:has(>section:last-child:is(.section--yellow,.section--dark))+.site-footer{margin-block-start:0}

/* rebuild pass 2 */
.feature{flex-direction:column;align-items:stretch;justify-content:flex-end}
.feature .play-blocks{--play-blocks-h:clamp(36px,4.2vw,60px);margin-block-start:clamp(28px,3.4vw,48px)}
.feature .play-block{border-color:var(--yellow)}
.nl-card__mark{grid-column:1/-1}
.nl-card__mark:empty{display:none}
.nl-card .form-note--plain{font-size:1rem}
.teaser__seats{align-self:center;justify-self:end;inline-size:100%;max-inline-size:none;min-block-size:160px;display:flex;align-items:center}
.teaser__seats .play-seats{margin:0;inline-size:100%}
.empty .play-seats{--play-bg:var(--card);margin-block:28px 0;inline-size:min(100%,720px)}