/* Najaf International Exhibition — shared design system for the mockups.
   Page-specific styles stay in each page. Colours come from ../palettes/palettes.css. */

html.shot .hero{min-height:900px}
html.shot .reveal,html.shot .words .w,html.shot .fade-late{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
html.shot .site-header{animation:none}
html.shot .hero-media img{animation:none;transform:scale(1.02)}
html.shot .cd b{animation:none!important}
html.shot .ds{display:none}
/* ============================================================ tokens */
:root{
  --font:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
  --brand:var(--primary-base);
  --brand-deep:var(--primary-950);
  --accent:var(--accent-base);
  --ink:var(--neutral-900);
  --ink-2:var(--neutral-600);
  --ink-3:var(--neutral-500);
  --line:var(--neutral-200);
  --canvas:var(--neutral-50);
  --surface:#fff;
  --r-sm:12px; --r:20px; --r-lg:28px; --r-xl:36px;
  --shadow-1:0 1px 2px rgb(0 0 0 / .05),0 10px 28px -14px color-mix(in oklab,var(--primary-950) 35%,transparent);
  --shadow-2:0 2px 8px rgb(0 0 0 / .06),0 34px 70px -28px color-mix(in oklab,var(--primary-950) 55%,transparent);
  --shadow-glow:0 18px 50px -16px color-mix(in oklab,var(--accent) 70%,transparent);
  --glass-dark:linear-gradient(135deg,rgb(255 255 255 / .16),rgb(255 255 255 / .05));
  --glass-dark-line:transparent;   /* glass has no frame (Zaid, 2 Oct 2026): only the glass and what it holds */
  --glass-light:rgb(255 255 255 / .66);
  --glass-light-line:transparent;
  --blur:blur(22px) saturate(1.6);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --warn:#F2A516;
  --danger:#E5484D;
  --ok:#22A35A;
  --container:1280px;
  --gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.75;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.num{font-family:'IBM Plex Sans',var(--font);font-feature-settings:"tnum"}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ============================================================ buttons & chips */
.btn{--h:52px;display:inline-flex;align-items:center;gap:10px;height:var(--h);padding-inline:24px;border-radius:14px;font-weight:600;font-size:16px;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),background-color .3s,color .3s}
.btn .icon{transition:transform .5s var(--ease-out)}
.btn:hover .icon{transform:translateX(-4px)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .45) 50%,transparent 70%);transform:translateX(110%);transition:transform .9s var(--ease-out);z-index:-1}
.btn:hover::after{transform:translateX(-110%)}
.btn-accent{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-glow)}
.btn-accent:hover{transform:translateY(-2px)}
.btn-brand{background:var(--brand);color:#fff;box-shadow:0 14px 34px -14px color-mix(in oklab,var(--brand) 80%,transparent)}
.btn-brand:hover{transform:translateY(-2px)}
.btn-glass{background:rgb(255 255 255 / .1);color:#fff;border:1px solid transparent;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.btn-glass:hover{background:rgb(255 255 255 / .18)}
.btn-line{border:1.5px solid var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--brand);color:var(--brand)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--brand);position:relative}
.link-arrow::after{content:"";position:absolute;inset-inline:0;bottom:-3px;height:2px;background:var(--accent);transform:scaleX(.25);transform-origin:right;transition:transform .5s var(--ease-out)}
.link-arrow:hover::after{transform:scaleX(1)}
.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding-inline:14px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap}
.chip-accent{background:var(--accent);color:var(--on-accent)}
.chip-glass{background:rgb(255 255 255 / .14);color:#fff;border:1px solid transparent;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.chip-soft{background:var(--primary-50);color:var(--primary-800);border:1px solid var(--primary-100)}
.chip-outline{border:1px dashed var(--neutral-300);color:var(--ink-2)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;position:relative}
.dot.pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid currentColor;animation:pulse 2s var(--ease-out) infinite}
@keyframes pulse{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}

/* ============================================================ header */
/* A full-width glass band, edge to edge at every width; its contents keep to the page's container. */
.site-header{position:fixed;inset-inline:0;top:0;z-index:50;animation:drop 1.1s var(--ease-out) both .15s}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(255 255 255 / .13),rgb(255 255 255 / .04));border-bottom:1px solid transparent;
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  transition:background .6s var(--ease),border-color .6s,box-shadow .6s}
@keyframes drop{from{transform:translateY(-120%)}}
.bar{height:76px;display:flex;align-items:center;gap:28px;position:relative;color:#fff;
  transition:height .6s var(--ease-out),color .4s}
.brand-logo{position:relative;height:50px;width:212px;flex:none}
.brand-logo img{position:absolute;inset:0;height:100%;width:auto;transition:opacity .5s}
.brand-logo .on-light{opacity:0}
.nav{display:flex;gap:4px;margin-inline-start:auto}
.nav-item{position:relative}
.nav .top{display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:12px;font-weight:500;font-size:16px;position:relative;transition:background .3s;white-space:nowrap}
.nav .top .icon{width:14px;height:14px;opacity:.7;transition:transform .35s var(--ease)}
.nav .top:hover{background:rgb(255 255 255 / .12)}
.nav .top[aria-current]::after{content:"";position:absolute;inset-inline:14px;bottom:3px;height:2px;border-radius:2px;background:var(--accent)}
/* drop-down: the section's own pages (core/navigation). Opens on hover and on keyboard
   focus; no backdrop blur here, because a blur nested in the blurred bar sees nothing. */
.sub{list-style:none;margin:0;position:absolute;top:calc(100% + 12px);inset-inline-start:-8px;min-width:236px;padding:8px;display:grid;gap:2px;
  border-radius:18px;background:rgb(255 255 255 / .97);color:var(--ink);border:1px solid transparent;
  box-shadow:0 26px 60px -18px color-mix(in oklab,var(--primary-950) 50%,transparent),0 2px 6px rgb(0 0 0 / .06);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top center;
  transition:opacity .22s var(--ease),transform .35s var(--ease-out),visibility 0s .35s}
.sub::before{content:"";position:absolute;inset-inline:0;top:-16px;height:16px}
.nav-item:hover .sub,.nav-item:focus-within .sub{opacity:1;visibility:visible;transform:none;transition:opacity .22s var(--ease),transform .35s var(--ease-out),visibility 0s}
.nav-item:hover .top .icon,.nav-item:focus-within .top .icon{transform:rotate(180deg)}
.nav-item[data-closed] .sub{opacity:0;visibility:hidden}
.sub a{display:block;padding:11px 14px;border-radius:12px;font-size:15px;font-weight:500;color:var(--ink-2);transition:background .25s,color .25s}
.sub .sub-head{margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.sub .sub-head a{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;color:var(--ink)}
.sub .sub-head .icon{width:16px;height:16px;opacity:.55}
.sub a:hover{background:var(--primary-50);color:var(--primary-base)}
.sub a[aria-current]{background:var(--primary-50);color:var(--primary-base);font-weight:600}
.actions{display:flex;align-items:center;gap:6px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;transition:background .3s}
.icon-btn:hover{background:rgb(255 255 255 / .14)}
.lang{font-family:'IBM Plex Sans';font-weight:600;font-size:14px;letter-spacing:.5px}
.bar .btn{--h:46px;padding-inline:18px;font-size:15px}
.menu-btn{display:none}
.site-header.scrolled::before{background:rgb(255 255 255 / .8);border-color:transparent;
  box-shadow:0 18px 40px -22px color-mix(in oklab,var(--primary-950) 50%,transparent)}
.site-header.scrolled .bar{height:66px;color:var(--ink)}
.site-header.scrolled .brand-logo .on-dark{opacity:0}
.site-header.scrolled .brand-logo .on-light{opacity:1}
.site-header.scrolled .nav .top:hover,.site-header.scrolled .icon-btn:hover{background:var(--primary-50)}

/* ============================================================ sections */
section{position:relative}
.sec{padding-block:clamp(72px,9vw,128px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--brand);margin-bottom:12px}
.eyebrow::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--accent)}
.sec h2{font-size:clamp(30px,3.6vw,50px);line-height:1.25;font-weight:700;letter-spacing:-.3px;text-wrap:balance}
.sec-lead{font-size:18px;color:var(--ink-2);max-width:56ch;margin-top:12px}

/* events */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{height:40px;padding-inline:16px;border-radius:999px;border:1px solid var(--line);font-size:15px;font-weight:500;color:var(--ink-2);transition:all .35s var(--ease)}
.filters button:hover{border-color:var(--brand);color:var(--brand)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.events{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:auto auto;gap:22px}
.ev{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-1);border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.ev:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.ev-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.ev-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.ev:hover .ev-media img{transform:scale(1.07)}
.date-tile{position:absolute;top:14px;inset-inline-start:14px;min-width:66px;padding:8px 10px 6px;border-radius:16px;text-align:center;color:var(--ink);
  background:var(--glass-light);border:1px solid var(--glass-light-line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 10px 24px -12px rgb(0 0 0 / .35)}
.date-tile b{display:block;font-size:26px;line-height:1;font-weight:700;color:var(--brand)}
.date-tile small{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ev-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.ev-type{font-size:13.5px;font-weight:600;color:var(--ink-3)}
.ev h3{font-size:20px;line-height:1.45;font-weight:700}
.ev-meta{display:flex;flex-direction:column;gap:4px;font-size:14.5px;color:var(--ink-2);margin-top:auto;padding-top:8px}
.ev-meta span{display:inline-flex;gap:8px;align-items:center}
.ev-meta .icon{width:17px;height:17px;color:var(--ink-3)}
.ev .chip{position:absolute;top:18px;inset-inline-end:14px}
/* featured */
.ev.featured{grid-row:span 2;color:#fff;border:0;min-height:560px;justify-content:flex-end;background:var(--brand-deep)}
.ev.featured .ev-media{position:absolute;inset:0;aspect-ratio:auto}
.ev.featured .ev-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--brand-deep) 5%,color-mix(in oklab,var(--brand-deep) 40%,transparent) 50%,transparent 75%)}
.ev.featured .ev-body{position:relative;margin:16px;padding:26px;border-radius:var(--r);background:var(--glass-dark);border:1px solid var(--glass-dark-line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);flex:none}
.ev.featured h3{font-size:28px}
.ev.featured .ev-type,.ev.featured .ev-meta{color:rgb(255 255 255 / .82)}
.ev.featured .ev-meta .icon{color:var(--accent-300)}
.ev.featured .ev-actions{display:flex;gap:10px;margin-top:14px}
.ev.featured .btn{--h:46px;font-size:15px}
/* typographic card: no photo on purpose */
.ev.typo .ev-media{background:
   radial-gradient(90% 120% at 100% 0%,color-mix(in oklab,var(--accent) 45%,transparent),transparent 60%),
   linear-gradient(135deg,var(--primary-700),var(--brand-deep));display:grid;place-items:center}
.ev.typo .ev-media svg{width:78%;opacity:.22;color:#fff;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ev.typo .ev-media em{position:absolute;inset-inline:22px;bottom:18px;font-style:normal;color:#fff;font-size:24px;font-weight:700;line-height:1.35}

/* footer */
.footer{background:var(--brand-deep);color:rgb(255 255 255 / .78);padding-top:80px;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;width:900px;height:900px;inset-inline-end:-300px;top:-500px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--primary-700) 60%,transparent),transparent)}
.f-grid{position:relative;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
.f-grid img{height:150px;width:auto}
.f-grid h4{color:#fff;font-size:16px;margin-bottom:16px}
.f-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15.5px}
.f-grid a:hover{color:#fff}
.f-contact{display:grid;gap:10px;margin-top:22px;font-size:15.5px}
.f-contact span{display:inline-flex;gap:10px;align-items:center}
.f-contact .ltr{direction:ltr;unicode-bidi:isolate}
.f-contact .f-map{align-items:flex-start;max-width:320px;line-height:1.6}   /* the address may take two lines */
.f-contact .f-map .icon{flex:none;margin-top:4px}
.social{display:flex;gap:8px;margin-top:20px}
.social a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgb(255 255 255 / .08);border:1px solid transparent;transition:all .35s var(--ease)}
.social a:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-3px)}
.f-bottom{position:relative;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:60px;padding-block:24px;border-top:1px solid rgb(255 255 255 / .1);font-size:14px}

/* ============================================================ motion */
.js .reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out),filter 1s var(--ease-out);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none;filter:none}
.words .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(8px);animation:wordin 1.1s var(--ease-out) forwards;animation-delay:calc(.45s + var(--i) * .09s)}
@keyframes wordin{to{opacity:1;transform:none;filter:none}}
.fade-late{opacity:0;animation:fadeup 1.2s var(--ease-out) forwards;animation-delay:var(--d,1s)}
@keyframes fadeup{from{opacity:0;transform:translateY(20px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.words .w,.fade-late{opacity:1;transform:none;filter:none}
}

/* ============================================================ palette switcher (design tool, not part of the site) */
.ds{position:fixed;inset-inline-end:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;
  background:rgb(20 22 30 / .72);color:#fff;border:1px solid rgb(255 255 255 / .16);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 20px 40px -18px rgb(0 0 0 / .6);font-size:13px}
.ds b{font-weight:600;white-space:nowrap}
.ds .sw{display:flex;gap:6px}
.ds button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;background:conic-gradient(var(--c1) 0 50%,var(--c2) 0);transition:transform .3s var(--ease-out)}
.ds button:hover{transform:scale(1.15)}
.ds button[aria-pressed="true"]{border-color:#fff}
.ds .name{min-width:84px;opacity:.85}
.ds-group{display:flex;align-items:center;gap:4px;padding-inline-start:10px;margin-inline-start:4px;border-inline-start:1px solid rgb(255 255 255 / .2)}
.ds-group b{margin-inline-end:6px}
.ds-opt{width:auto!important;height:28px!important;border-radius:999px!important;padding-inline:10px;background:rgb(255 255 255 / .08)!important;border:1px solid transparent!important;font-size:12.5px;color:#fff}
.ds-opt[aria-pressed="true"]{background:#fff!important;color:#111}


/* ============================================================ shared responsive */
/* a narrow desktop (1181-1365px): the full bar needs ~700px of menu in English, so the bar tightens
   (gaps, item padding, a smaller logo) instead of letting "Plan your visit" break onto two lines */
@media (min-width:1181px) and (max-width:1365px){
  .bar{gap:16px}
  .nav{gap:0}
  .nav .top{padding:9px 10px;font-size:15px}
  .nav .top[aria-current]::after{inset-inline:10px}
  .brand-logo{height:44px;width:187px}
  .bar .btn{padding-inline:14px}
}
@media (max-width:1180px){
  .nav,.bar .btn,.actions .lang{display:none}
  .menu-btn{display:grid}
  .bar{justify-content:space-between}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .bar{height:64px}
  .brand-logo{height:40px;width:170px}
  .f-grid{grid-template-columns:1fr}
  .ds .name,.ds b{display:none}
  /* long labels (English especially) wrap instead of overflowing; paired CTAs stack full width */
  .btn{white-space:normal;height:auto;min-height:var(--h);padding-block:10px;text-align:center;line-height:1.35}
  .hero-cta .btn,.cta-row .btn{flex:1 1 100%!important;justify-content:center}
  .facts strong{white-space:normal!important}
}

/* ============================================================ shared components added for inner pages */
[hidden]{display:none!important}
.chip-warn{background:var(--warn);color:#2a1a00}
/* In the warm palettes the accent is itself gold, copper or amber, so a filled amber chip
   would read as «upcoming» (chip-accent); there «postponed» turns pale, with its warning icon. */
html:not([data-palette="najaf-dome"]) .chip-warn{background:#FFF1D6;color:#8A4B00;box-shadow:inset 0 0 0 1px #EFC46E}
.chip-danger{background:var(--danger);color:#fff}
.chip-ok{background:var(--ok);color:#fff}
.chip-muted{background:rgb(255 255 255 / .16);color:#fff;border:1px solid transparent}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:rgb(255 255 255 / .8)}
.crumbs a:hover{color:#fff}
.crumbs span[aria-hidden]{opacity:.5}
/* Every block laid over a photograph shades it in the photograph's own colour: --shade-c, set by
   site.js from the picture's darkest tones (very dark, quiet), gliding when the picture changes. A
   neutral soft black until it is read, and over drawings. The brand navy used to be laid over every
   picture, and over warm ones it turned reds violet and yellows teal (1 Oct 2026). */
@property --shade-c{syntax:'<color>';inherits:true;initial-value:rgb(9 11 15)}
:is(.face,.hero,.page-hero,.vn-block,.vn-hero,.venue){transition:--shade-c 1.8s var(--ease)}
.page-hero{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:var(--brand-deep)}
.page-hero .media{position:absolute;inset:-6% 0 0;z-index:-2}
.page-hero .media img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s var(--ease-out) both}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
   linear-gradient(to top,var(--shade-c) 0%,color-mix(in srgb,var(--shade-c) 72%,transparent) 38%,color-mix(in srgb,var(--shade-c) 25%,transparent) 75%),
   linear-gradient(to left,color-mix(in srgb,var(--shade-c) 70%,transparent),transparent 60%),
   linear-gradient(to bottom,rgb(0 0 0 / .35),transparent 25%)}
@keyframes kenburns{from{transform:scale(1.16)}to{transform:scale(1.02)}}
html.shot .page-hero .media img{animation:none;transform:scale(1.02)}
.glass-light{background:var(--glass-light);border:1px solid var(--glass-light-line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.glass-dark{background:var(--glass-dark);border:1px solid var(--glass-dark-line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
[dir="ltr"] .icon.flip,[dir="ltr"] .btn .icon[data-dir]{transform:scaleX(-1)}

/* ============================================================ English (LTR) */
[lang="en"]{--font:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif}
[lang="en"] body{letter-spacing:.1px}
[dir="ltr"] .btn:hover .icon{transform:translateX(4px)}
[dir="ltr"] .btn::after{transform:translateX(-110%)}
[dir="ltr"] .btn:hover::after{transform:translateX(110%)}
[dir="ltr"] .link-arrow::after{transform-origin:left}
[dir="ltr"] .page-hero::before{background:
   linear-gradient(to top,var(--shade-c) 0%,color-mix(in srgb,var(--shade-c) 72%,transparent) 38%,color-mix(in srgb,var(--shade-c) 25%,transparent) 75%),
   linear-gradient(to right,color-mix(in srgb,var(--shade-c) 70%,transparent),transparent 60%),
   linear-gradient(to bottom,rgb(0 0 0 / .35),transparent 25%)}
[dir="ltr"] .ev.typo .ev-media{background:radial-gradient(90% 120% at 0% 0%,color-mix(in oklab,var(--accent) 45%,transparent),transparent 60%),linear-gradient(225deg,var(--primary-700),var(--brand-deep))}

/* ============================================================ inner pages (shared) */
/* compact hero: title, lead, optional search, over a dim photo and the star pattern */
.sub-hero{padding-block:150px 76px}
.sub-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.08;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='white' stroke-width='1.2'%3E%3Cpath d='M60 18 72 48 102 60 72 72 60 102 48 72 18 60 48 48Z'/%3E%3Crect x='38' y='38' width='44' height='44' transform='rotate(45 60 60)'/%3E%3Crect x='38' y='38' width='44' height='44'/%3E%3C/svg%3E");background-size:120px}
.sub-hero .media img{opacity:.5}
.sub-hero h1{font-size:clamp(40px,5vw,72px);line-height:1.15;font-weight:700;margin-top:16px}
.sub-hero .lead-in{font-size:19px;color:rgb(255 255 255 / .85);margin-top:12px;max-width:60ch}
/* sticky glass tab bar under the header */
.tabbar-wrap{position:sticky;top:82px;z-index:30;margin-top:-32px}
.tabbar{display:flex;align-items:center;gap:12px;padding:8px;border-radius:20px;background:rgb(255 255 255 / .82);border:1px solid transparent;
  backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 24px 50px -24px color-mix(in oklab,var(--primary-950) 55%,transparent)}
.tabbar .tabs-row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.tabbar .tabs-row button{flex:none;height:44px;padding-inline:16px;border-radius:14px;font-size:15px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;transition:all .35s var(--ease)}
.tabbar .tabs-row button .icon{width:18px;height:18px}
.tabbar .tabs-row button:hover{background:var(--primary-50);color:var(--brand)}
.tabbar .tabs-row button[aria-pressed="true"]{background:var(--brand);color:#fff;box-shadow:0 10px 22px -12px color-mix(in oklab,var(--brand) 90%,transparent)}
.tabbar .tabs-row button small{font-family:'IBM Plex Sans';font-size:12px;font-weight:600;padding:1px 7px;border-radius:999px;background:rgb(0 0 0 / .06)}
.tabbar .tabs-row button[aria-pressed="true"] small{background:rgb(255 255 255 / .2)}
.pick{position:relative;flex:none}
.pick select{appearance:none;height:44px;padding-inline:14px 36px;border-radius:14px;border:1px solid var(--line);background:#fff;font:inherit;font-size:14.5px;color:var(--ink);cursor:pointer}
.pick .icon{position:absolute;inset-inline-end:11px;top:50%;translate:0 -50%;width:16px;height:16px;pointer-events:none;color:var(--ink-3)}
.sec-title{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.sec-title h2{font-size:clamp(26px,2.8vw,38px);line-height:1.3;font-weight:700}
.sec-title .eyebrow{margin-bottom:8px}
/* reading-progress line (news article) */
.progress-line{position:fixed;inset-inline:0;top:0;height:3px;z-index:70;background:linear-gradient(90deg,var(--accent-300),var(--accent));transform-origin:right;transform:scaleX(var(--p,0))}
[dir="ltr"] .progress-line{transform-origin:left}
/* document list */
.docs{display:grid;gap:10px}
.doc{display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:center;padding:16px 18px;border-radius:18px;border:1px solid var(--line);transition:all .4s var(--ease)}
.doc:hover{border-color:var(--brand);background:var(--primary-50)}
.doc .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:color-mix(in oklab,var(--danger) 12%,white);color:#c2383c}
.doc b{display:block;font-size:16.5px}
.doc small{color:var(--ink-3);font-size:13.5px}
.doc .dl{display:inline-flex;gap:8px;align-items:center;font-weight:600;color:var(--brand);font-size:15px}


@media (max-width:720px){
  .sub-hero{padding-block:118px 60px}
  .sub-hero h1{font-size:38px}
  .sub-hero .lead-in{font-size:16.5px}
  .tabbar-wrap{top:80px}
  .tabbar{flex-wrap:wrap;border-radius:18px}
  .tabbar .tabs-row{flex-basis:100%}
  .pick{flex:1}
  .pick select{width:100%}
}

/* ============================================================ live-site additions */
.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.ev,.hall,.row{position:relative}
.ev .ev-actions{position:relative;z-index:2}
.ev .chip{z-index:2}
.chip-ended{background:rgb(255 255 255 / .9);color:var(--ink-2)}
.hero-lead{font-size:19px;color:rgb(255 255 255 / .88);margin-top:20px;max-width:60ch}
/* the alert banner (console): a line above the header, which moves down to make room */
.site-alert{position:fixed;top:0;inset-inline:0;z-index:56;height:var(--alert-h);display:flex;align-items:center;font-size:14.5px;
  background:var(--brand-deep);color:#fff;border-bottom:1px solid rgb(255 255 255 / .12)}
.site-alert.warning{background:color-mix(in oklab,var(--warn) 88%,black);color:#fff}
.site-alert .container{display:flex;align-items:center;gap:10px;width:100%}
.site-alert .icon{width:18px;height:18px;flex:none;color:var(--accent-300)}
.site-alert.warning .icon{color:#fff}
.site-alert p{flex:1;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-alert a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.site-alert-x{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:inherit;opacity:.8}
.site-alert-x:hover{opacity:1;background:rgb(255 255 255 / .12)}
.site-alert-x .icon{color:inherit!important}
body[data-has-alert]{--alert-h:42px}
body[data-has-alert] .site-header{top:var(--alert-h)}
@media (max-width:640px){body[data-has-alert]{--alert-h:46px}.site-alert{font-size:13.5px}.site-alert p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
.lang-notice{position:relative;z-index:60;background:color-mix(in oklab,var(--warn) 16%,white);color:#6d4300;font-size:15px;padding:10px 0;margin-top:0}
.lang-notice .container{display:flex;gap:10px;align-items:center}
/* the one track fills the card: without it max-height:100% has nothing to resolve against and a
   squarish logo overflows the card */
.logo-card{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;width:170px;height:72px;border-radius:14px;background:#fff;border:1px solid var(--line);padding:10px}
.logo-card img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* the moving logo strip: the Exhibition's partners at the foot of the home page, each event's
   sponsors under its hero (includes/logo_strip.html) */
.partners{padding-block:56px;border-block:1px solid var(--line)}
.partners .row{display:flex;align-items:center;gap:40px}
.partners .row>h3{font-size:16px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.marquee{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;width:max-content;animation:marq var(--marq-d,40s) linear infinite}
.marquee .logo-card{margin-inline-end:18px}  /* its own trailing space: a round is then exactly half the track */
.logo-row{flex:1}
.logo-row .track{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
/* the card takes the logo's shape: official emblems are mostly square or round, wordmarks wide */
:is(.marquee,.logo-row) .logo-card{width:auto;min-width:128px;height:112px;padding:12px 18px;grid-template-columns:auto}
:is(.marquee,.logo-row) .logo-card img{max-height:88px;max-width:220px}
.marquee:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(50%)}}
.partners-title{font-size:clamp(19px,1.7vw,23px);line-height:1.4;font-weight:700;margin-bottom:22px;text-align:center}
.partners-title a{color:inherit;text-decoration:none;border-bottom:2px solid color-mix(in oklab,var(--accent) 55%,transparent);padding-bottom:2px;transition:border-color .3s var(--ease),color .3s var(--ease)}
.partners-title a:hover{color:var(--brand);border-color:var(--accent)}
.logo-card{cursor:pointer}
/* a logo's name, under it (js: one tip for the page, placed below the logo under the pointer,
   where the strip has room; above it the heading would be covered) */
.logo-tip{position:fixed;z-index:80;left:0;top:0;max-width:280px;padding:7px 13px;border-radius:10px;background:var(--brand-deep);color:#fff;
  font-size:13.5px;font-weight:600;line-height:1.5;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease);box-shadow:0 10px 30px -12px rgb(0 0 0 / .45)}
.logo-tip.on{opacity:1;transform:translate(-50%,0)}
.logo-tip::after{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
/* a logo's card: its name, its logo, a few lines about it, its links */
.logo-dlg{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 48px);border:0;border-radius:26px;padding:44px 44px 40px;
  color:var(--ink);background:var(--surface,#fff);box-shadow:0 40px 90px -30px rgb(0 0 0 / .5);overflow:auto}
.logo-dlg[open]{animation:dlg-in .28s var(--ease-out)}
@keyframes dlg-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.logo-dlg::backdrop{background:color-mix(in oklab,var(--brand-deep) 55%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.dlg-x{position:absolute;top:18px;inset-inline-end:18px;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.dlg-x:hover{background:var(--canvas)}
.dlg-x .icon{width:24px;height:24px}
.dlg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;padding-inline-end:36px}
.dlg-head h3{font-size:clamp(21px,2vw,26px);line-height:1.45;font-weight:700;padding-top:6px}
.dlg-logo{flex:none;width:170px;height:170px;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fff}
.dlg-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.logo-dlg p{margin-top:24px;font-size:16.5px;line-height:1.95;color:var(--ink-2)}
.dlg-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
@media (max-width:560px){
  .logo-dlg{padding:30px 22px 26px;border-radius:22px}
  .dlg-head{flex-direction:column-reverse;gap:16px;padding-inline-end:0}
  .dlg-logo{width:132px;height:132px}
  .dlg-acts .btn{flex:1;justify-content:center}
}
/* With a mouse, the logos rest in grey (their black softened to a dark grey) so the strip stays
   quiet; with the pointer over the strip they all take their colours and grow by 5%, and settle
   back after. A touch screen has nothing to hover with: there they show in their colours. */
:is(.marquee,.logo-row) .logo-card img{transition:filter .5s var(--ease),opacity .5s var(--ease),transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  :is(.marquee,.logo-row) .logo-card img{filter:grayscale(1);opacity:.72}
  :is(.marquee,.logo-row):hover .logo-card img{filter:none;opacity:1;transform:scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  :is(.marquee,.logo-row):hover .logo-card img{transform:none}
}
.partners.ev-sponsors{border-block-start:0;padding-block:40px}
@media (max-width:720px){
  .partners .row{flex-direction:column;align-items:flex-start;gap:18px}
  .marquee,.logo-row{width:100%}
}
[dir="ltr"] .marquee .track{animation-name:marq-ltr}
@keyframes marq-ltr{to{transform:translateX(-50%)}}
.mosaic.single{grid-template-columns:1fr;grid-template-rows:520px}
.mosaic.single figure{grid-row:auto}
.pager{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:40px}

/* ============================================================ phone menu drawer */
.mnav{position:fixed;inset:0;z-index:90}
.mnav[hidden]{display:none}
.mnav-backdrop{position:absolute;inset:0;background:rgb(6 12 24 / .45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .4s var(--ease)}
.mnav-panel{position:absolute;top:10px;bottom:10px;inset-inline-end:10px;width:min(380px,calc(100% - 20px));display:flex;flex-direction:column;gap:18px;padding:18px;border-radius:26px;overflow-y:auto;
  background:linear-gradient(160deg,color-mix(in oklab,var(--brand-deep) 88%,transparent),color-mix(in oklab,var(--primary-800) 92%,transparent));border:1px solid transparent;
  backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);box-shadow:0 30px 80px -20px rgb(0 0 0 / .6);color:#fff;
  transform:translateX(-110%);transition:transform .55s var(--ease-out)}
[dir="ltr"] .mnav-panel{transform:translateX(110%)}
.mnav.open .mnav-backdrop{opacity:1}
.mnav.open .mnav-panel{transform:none}
.mnav-top{display:flex;justify-content:flex-end}
.mnav-top .icon-btn{color:#fff;background:rgb(255 255 255 / .1)}
.mnav-search{position:relative}
.mnav-search input{width:100%;height:52px;border-radius:16px;padding-inline:48px 16px;font:inherit;font-size:16px;color:#fff;background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .2);outline:none}
.mnav-search input::placeholder{color:rgb(255 255 255 / .65)}
.mnav-search .icon{position:absolute;inset-inline-start:16px;top:50%;translate:0 -50%;color:rgb(255 255 255 / .75)}
.mnav ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mnav .row{display:flex;gap:4px}
.mnav .row>a{flex:1}
.mnav ul a{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border-radius:16px;font-size:18px;font-weight:600;transition:background .3s;
  opacity:0;transform:translateY(10px)}
.mnav.open ul a{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),background .3s}
.mnav.open ul li:nth-child(1) a{transition-delay:.08s}.mnav.open ul li:nth-child(2) a{transition-delay:.12s}.mnav.open ul li:nth-child(3) a{transition-delay:.16s}
.mnav.open ul li:nth-child(4) a{transition-delay:.2s}.mnav.open ul li:nth-child(5) a{transition-delay:.24s}.mnav.open ul li:nth-child(6) a{transition-delay:.28s}
.mnav ul a:hover,.mnav ul a[aria-current="page"]{background:rgb(255 255 255 / .1)}
.mnav ul a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent)}
[dir="rtl"] .mnav ul a[aria-current="page"]{box-shadow:inset -3px 0 0 var(--accent)}
.mnav ul a .icon{opacity:.5}
/* a section's own pages, folded under it (the current section starts open) */
.sub-toggle{flex:none;width:54px;border-radius:16px;display:grid;place-items:center;color:#fff;background:rgb(255 255 255 / .06);transition:background .3s}
.sub-toggle:hover{background:rgb(255 255 255 / .12)}
.sub-toggle .icon{transition:transform .35s var(--ease)}
.has-sub.open .sub-toggle .icon{transform:rotate(180deg)}
html:not(.js) .sub-toggle{display:none}
.msub{margin:2px 0 8px!important;margin-inline-start:22px!important;padding-inline-start:10px!important;border-inline-start:1px solid rgb(255 255 255 / .16)}
.js .has-sub:not(.open)>.msub{display:none}
.mnav .msub a{padding:11px 14px;font-size:16px;font-weight:500;color:rgb(255 255 255 / .86)}
.mnav-foot{margin-top:auto;display:grid;gap:10px}
.mnav-foot .btn{justify-content:center}
.mnav-lang,.mnav-acct{color:#fff;border-color:rgb(255 255 255 / .3)}
.mnav-acct .icon{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.mnav-panel,.mnav ul a{transition:none!important}}

/* ============================================================ section tabs */
/* The section page and its own pages (core/navigation.section_tabs), in the hero. */
.section-tabs{display:flex;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;margin-top:24px;padding:5px;border-radius:16px;
  background:rgb(255 255 255 / .08);border:1px solid transparent;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.section-tabs a{padding:9px 18px;border-radius:12px;font-size:15px;font-weight:500;color:rgb(255 255 255 / .82);transition:background .3s,color .3s,box-shadow .3s}
.section-tabs a:hover{background:rgb(255 255 255 / .12);color:#fff}
.section-tabs a[aria-current]{background:#fff;color:var(--brand-deep);font-weight:600;box-shadow:0 10px 24px -12px rgb(0 0 0 / .5)}
@media (max-width:720px){
  .section-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .section-tabs::-webkit-scrollbar{display:none}
  .section-tabs a{flex:none;white-space:nowrap;padding:8px 14px;font-size:14px}
}

/* ============================================================ skip link */
.skip{position:fixed;top:12px;inset-inline-start:12px;z-index:200;padding:12px 18px;border-radius:12px;background:#fff;color:var(--brand-deep);
  font-weight:600;box-shadow:0 18px 40px -16px rgb(0 0 0 / .45);transform:translateY(-160%);transition:transform .3s var(--ease-out)}
.skip:focus{transform:none}
main:focus{outline:none}

/* ============================================================ glass cards */
/* A glass panel (backdrop-filter) becomes the containing block of .stretch::after,
   which then covers the panel only. These cards carry their own covering link under
   the panel, and the panel lets clicks through except on its own links and buttons. */
.card-cover{position:absolute;inset:0;z-index:1;border-radius:inherit}
.pe-through{position:relative;z-index:2;pointer-events:none}
.pe-through a,.pe-through button{pointer-events:auto}