/* ==========================================================================
   EASL Congress 2027 — prototype design system, ported into astra-child.

   Source: D:\easl\prototype\assets\css\style.css (approved prototype).
   Ported verbatim EXCEPT for the notes below. Keep this file a faithful
   mirror of the prototype so a fix on one copies straight to the other.

   Removed on the way in — safe in a static build, hostile inside
   WordPress + Astra + Elementor:
     body,h1..dd{margin:0}              reflows every Astra/Elementor block
     ul[class],ol[class]{list-style:none;padding:0}
                                        matches nearly every list in WP,
                                        including nav menus
     img,svg,video{display:block;...}   breaks inline icons in widgets
     button{background:none;border:0}   strips WPForms/Elementor button chrome
     a{color:inherit}                   overrides Astra link colours site-wide
     body{overflow-x:hidden}            an overflow on body kills
                                        position:sticky on .rail__side

   NOT removed, but know what it does: the @font-face rules live in the child
   theme's style.css (paths are relative to the theme root there, not here).

   SCOPE. Tokens and component classes work anywhere. Bare element rules
   (h1-h4, p, .prose) lose to Elementor's per-post CSS, whose selectors are
   far more specific. Do not expect this file to restyle existing Elementor
   widgets — bind those to Global Colors on the sections you rebuild.
   ========================================================================== */

/* ==========================================================================
   EASL — prototype stylesheet
   Concept: "Under the microscope" — quiet editorial grid, one bold hero.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#004B87;
  --ink-2:#00406F;
  --blue:#004B87;
  --blue-dk:#00396A;
  --cyan:#4EC3E8;
  --cyan-2:#8FD9F0;
  --cyan-wash:#E4F4FB;
  --mist:#F2F7FA;
  --paper:#FFFFFF;
  --line:#D9E4EC;
  --line-2:#EAF1F6;
  --body:#004B87;
  --muted:#5E82A3;
  --amber:#E8A33D;
  --amber-dk:#9A6408;
  --amber-wash:#FDF4E4;

  /* EASL Congress 2027 identity — the tube lines */
  --line-1:#5BC2E7;  --line-2:#004B87;  --line-3:#FF6720;
  --line-4:#508541;  --line-5:#826B6A;  --line-6:#DB0B5B;
  --line-7:#1A9586;  --line-8:#FFBF3F;  --line-9:#A76EEE;
  --page-line:var(--line-1);

  --wrap:1320px;
  --gut:clamp(20px,5vw,56px);
  --rail:190px;

  --r-sm:3px;
  --r-md:6px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs-body:1.0625rem;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}

/* The prototype's `button{background:none;border:0}` was dropped on the way in
   because it strips WPForms and Elementor button chrome. These are the bare
   icon/text buttons that relied on it — Astra styles them as pill buttons
   otherwise (red circle round the search icon, red pill round the alert ×).
   Listed by class and placed here, ABOVE the component rules, so any of these
   that does declare its own background (.to-top, .chip, .tmn__btn) still wins. */
.alert__x,.icon-btn,.burger,.drawer__top,.soon__x,.acc__t,.vplay,.tmn__btn,.chip,.to-top{
  background:none;border:0;padding:0;box-shadow:none;border-radius:0;
  color:inherit;cursor:pointer;
}
/* Backstop at two-class specificity, in case Astra styles buttons through a
   descendant selector (.something button) that outranks the single classes
   above. Deliberately does NOT set padding — .drawer__top needs its own — and
   sits before the component rules so later equal-specificity states such as
   .icon-btn:hover still win. */
.hdr .icon-btn,.hdr .burger,.alert .alert__x,.drawer .drawer__top,
.soon .soon__x,.search-modal button{
  background-color:transparent;border:0;box-shadow:none;
}

/* The prototype's `body,h1..dd{margin:0}` was dropped on the way in because a
   global margin reset reflows every Astra and Elementor block. Reinstated here
   scoped to the prototype's own components.

   Specificity is deliberate: :where() contributes nothing, so each rule scores
   the same (0,0,1) as Astra's bare element styles and wins only by loading
   later — while every prototype rule that DOES want a margin (.rail__note,
   .prose p, .lede) is a class at (0,1,0) and still beats this. */
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) h1,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) h2,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) h3,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) h4,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) p,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) ul,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) ol,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) li,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) figure,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) blockquote,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) dl,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) dd,
:where(.hdr,.alert,.drawer,.ftr,.soon,.search-modal,.tl,.rail,.mega,.head-row,.card,.ev,.tmn,.pillar,.acc,.quote,.whenwhere) address{margin:0}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--body);
  background:var(--paper);
}
body.is-locked{overflow:hidden}

::selection{background:var(--cyan-wash);color:var(--ink)}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:100px}

.skip{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm);
  transition:top .18s var(--ease);
}
.skip:focus{top:12px}

/* ---------- type ---------- */
h1,h2,h3,h4,.h-display{
  font-family:var(--sans);
  color:var(--ink);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.h-display{
  font-size:clamp(2.7rem,7.2vw,5.5rem);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.035em;
}
h1{font-size:clamp(2.2rem,5vw,3.9rem);letter-spacing:-.032em;line-height:1}
h2{font-size:clamp(1.8rem,3.4vw,2.85rem);letter-spacing:-.028em}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);letter-spacing:-.018em;line-height:1.22}
h4{font-size:1.0625rem;letter-spacing:-.01em;line-height:1.3}

p{text-wrap:pretty}
.lede{
  font-family:var(--sans);
  font-size:clamp(1.12rem,1.8vw,1.4rem);
  line-height:1.48;
  letter-spacing:-.012em;
  color:var(--ink-2);
  font-weight:400;
  max-width:38ch;
}
.lede--wide{max-width:52ch}
.prose p{max-width:68ch;margin-bottom:1.05em;font-size:1.125rem;line-height:1.62}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--ink)}

.meta{
  font-size:.8125rem;line-height:1.35;color:var(--muted);letter-spacing:.005em;
}
.meta strong{color:var(--ink);font-weight:500}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:clamp(56px,8vw,118px)}
.band--tight{padding-block:clamp(40px,5vw,72px)}
.band--mist{background:var(--mist)}
.band--ink{background:var(--ink);color:#C9DDEC}
.band--ink h2,.band--ink h3,.band--ink h4{color:#fff}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* the journal rail: metadata left, content right */
.rail{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(20px,3.6vw,56px);
  align-items:start;
}
.rail__side{position:sticky;top:104px}
.rail__label{
  font-size:.75rem;letter-spacing:.06em;font-weight:700;color:var(--blue);
  padding-top:.55rem;border-top:2px solid var(--blue);
  display:block;
}
.rail__note{margin-top:.5rem;font-size:.8125rem;color:var(--muted);max-width:22ch}
@media (max-width:900px){
  .rail{grid-template-columns:minmax(0,1fr);gap:18px}
  .rail__side{position:static}
  .rail__note{max-width:46ch}
}

.grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}

.stack>*+*{margin-top:1rem}
.stack-lg>*+*{margin-top:1.75rem}
.head-row{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:end;justify-content:space-between;margin-bottom:clamp(24px,3vw,44px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.9375rem;font-weight:500;letter-spacing:-.005em;
  padding:.82em 1.5em;border-radius:var(--r-sm);
  text-decoration:none;position:relative;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--blue);color:#fff}
.btn--solid:hover{background:var(--ink)}
.btn--line{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn--line:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--cyan-wash)}
.btn--ghost{color:var(--blue);padding-inline:0}
.btn--ghost:hover{color:var(--ink)}
.btn__dot{
  width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;
  transition:transform .3s var(--ease-out),opacity .3s var(--ease);
}
.btn:hover .btn__dot{transform:scale(1.9);opacity:1}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
/* Hero with 3-4 buttons: an even 2 x 2 grid, one column on phones. */
.btn-row--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:560px}
.btn-row--grid .btn{justify-content:center;text-align:center;width:100%}
.btn-row--grid .btn--line{background:rgba(255,255,255,.88)}
.btn-row--grid .btn--line:hover{background:var(--red);border-color:var(--red);color:#fff} /* same hover as every outline button (red fill, white text); a white fill here hid the label */
@media (max-width:560px){.btn-row--grid{grid-template-columns:1fr;max-width:none}}

/* small inline link with animated underline */
.ln{
  text-decoration:none;color:var(--blue);font-weight:500;font-size:.9375rem;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .34s var(--ease-out),color .2s var(--ease);
  padding-bottom:2px;
}
.ln:hover{background-size:100% 1px;color:var(--ink)}

/* tag / pill */
.tag{
  display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.045em;
  padding:.35em .7em;border-radius:2px;background:var(--cyan-wash);color:var(--blue-dk);
}
.tag--amber{background:var(--amber-wash);color:var(--amber-dk)}
.tag--ink{background:rgba(255,255,255,.12);color:#fff}
.tag--out{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:90;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);height:78px;transition:height .3s var(--ease)}
.hdr.is-stuck .hdr__in{height:64px}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img,.brand svg{height:40px;width:auto;transition:height .3s var(--ease)}
.hdr.is-stuck .brand img,.hdr.is-stuck .brand svg{height:34px}

.nav{display:flex;align-items:center;gap:clamp(4px,1.1vw,16px);margin-left:auto}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.4em;
  font-size:.9688rem;font-weight:500;color:var(--ink);text-decoration:none;
  padding:.65em .1em;white-space:nowrap;position:relative;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:.3em;height:1.5px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-out);
}
.nav__link:hover::after,.nav__item.is-open .nav__link::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--blue)}
.nav__caret{width:8px;height:8px;opacity:.45;transition:transform .3s var(--ease)}
.nav__item.is-open .nav__caret{transform:rotate(180deg);opacity:.9}

.hdr__tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.icon-btn:hover{background:var(--mist)}
.hdr__cta{font-size:.875rem;padding:.7em 1.15em}

/* mega panel */
.mega{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:min(660px,86vw);max-width:min(880px,92vw);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 22px 60px -30px rgba(0,75,135,.38);
  padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .28s var(--ease-out),visibility .22s;
}
.nav__item.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega--wide{grid-template-columns:1fr 1fr .9fr}
.mega--right{left:auto;right:0;transform:translateX(0) translateY(-6px)}
.nav__item.is-open .mega--right{transform:translateX(0) translateY(0)}
.mega a{
  display:block;text-decoration:none;color:var(--ink);font-size:.9375rem;font-weight:500;
  padding:.55em .7em;border-radius:var(--r-sm);
  transition:background .18s var(--ease),color .18s var(--ease),padding-left .24s var(--ease-out);
}
.mega a:hover{background:var(--mist);color:var(--blue);padding-left:1.05em}
.mega a span{display:block;font-size:.8125rem;color:var(--muted);font-weight:400;margin-top:1px}
.mega__feat{
  background:var(--mist);border-radius:var(--r-sm);padding:18px;align-self:start;
}
.mega__feat .tag{margin-bottom:8px}
.mega__feat h4{margin-bottom:6px;font-size:.9375rem}
.mega__feat p{font-size:.8125rem;color:var(--muted);margin-bottom:10px}

/* burger */
.burger{display:none;width:42px;height:42px;place-items:center}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);position:relative;transition:transform .3s var(--ease),background .2s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--ink);
  transition:transform .32s var(--ease-out),top .2s var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger.is-on span{background:transparent}
.burger.is-on span::before{top:0;transform:rotate(45deg)}
.burger.is-on span::after{top:0;transform:rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;padding-top:156px;background:#fff;z-index:80;overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease),transform .3s var(--ease-out),visibility .26s;
  padding-inline:var(--gut);padding-bottom:48px;
}
.drawer.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.drawer__grp{border-bottom:1px solid var(--line-2)}
.drawer__top{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 2px;font-size:1.0625rem;font-weight:500;color:var(--ink);text-align:left;text-decoration:none;
}
.drawer__top svg{width:12px;height:12px;opacity:.5;transition:transform .3s var(--ease)}
.drawer__grp.is-open .drawer__top svg{transform:rotate(180deg)}
.drawer__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease-out)}
.drawer__grp.is-open .drawer__sub{grid-template-rows:1fr}
.drawer__sub>div{overflow:hidden}
.drawer__sub a{display:block;padding:11px 2px 11px 16px;color:var(--body);text-decoration:none;font-size:.9688rem;font-weight:500;border-left:1px solid var(--line)}
.drawer__sub a:hover{color:var(--blue)}
.drawer__sub>div>*:last-child{margin-bottom:16px}
.drawer__foot{margin-top:26px;display:grid;gap:10px}

@media (max-width:1200px){
  .nav,.hdr__cta{display:none}
  .burger{display:grid}
  .hdr__tools{margin-left:auto}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#fff}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 8% 20%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.72) 38%,rgba(255,255,255,0) 72%),
    linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,.7) 100%);
}
.hero__in{position:relative;z-index:2;padding-block:clamp(60px,10vw,120px) clamp(28px,4vw,48px);min-height:min(84vh,780px);display:flex;flex-direction:column;justify-content:center}
.hero__kicker{display:flex;align-items:center;gap:10px;margin-bottom:clamp(20px,3vw,34px)}
.hero__kicker span{font-size:.8125rem;color:var(--blue);font-weight:500;letter-spacing:.02em}
.hero__pulse{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(78,195,232,.7);animation:pulse 2.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(78,195,232,.6)}70%{box-shadow:0 0 0 12px rgba(78,195,232,0)}100%{box-shadow:0 0 0 0 rgba(78,195,232,0)}}

.reveal-line{display:block;overflow:hidden}
.reveal-line>span{display:block;transform:translateY(105%);opacity:0}
.is-ready .reveal-line>span{animation:lineUp .95s var(--ease-out) forwards}
.is-ready .reveal-line:nth-child(2)>span{animation-delay:.09s}
.is-ready .reveal-line:nth-child(3)>span{animation-delay:.18s}
@keyframes lineUp{to{transform:translateY(0);opacity:1}}

.hero__body{margin-top:clamp(22px,3vw,34px);max-width:560px;opacity:0;transform:translateY(14px)} /* was 46ch: too narrow for two buttons side by side, so they always wrapped */
.is-ready .hero__body{animation:fadeUp .9s .42s var(--ease-out) forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

.hero__ticker{
  position:relative;z-index:2;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding-block:16px;
}
.hero__ticker .k{font-size:.75rem;font-weight:700;letter-spacing:.05em;color:var(--blue);}
.ticker{overflow:hidden;position:relative;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent)}
.ticker__track{display:flex;gap:44px;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker__it{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--ink);white-space:nowrap;text-decoration:none}
.ticker__it b{font-weight:500}
.ticker__it i{font-style:normal;color:var(--muted)}
.ticker__it::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);flex:0 0 auto}
@media (max-width:760px){
  .hero__ticker{grid-template-columns:minmax(0,1fr);gap:10px}
  .hero__ticker .k,.hero__ticker .ln{justify-self:start}
}

/* ---------- page hero (inner pages) ---------- */
.phero{border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:var(--paper)}
.phero__in{padding-block:clamp(22px,3vw,44px) clamp(26px,3.4vw,52px);position:relative;z-index:2}
.phero--mist{background:var(--mist)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8125rem;color:var(--muted);margin-bottom:clamp(14px,1.8vw,22px)}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--blue)}
.crumbs span{opacity:.5}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
@media (max-width:900px){.phero__grid{grid-template-columns:minmax(0,1fr);align-items:start}}
.phero__fig{position:relative}
.phero__fig img{width:100%;max-width:540px;height:auto;border-radius:var(--r-md);margin-inline:auto}
.phero__fig img.organfig{border-radius:0}

/* ---------- pillars (home) ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.pillar{
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,28px) clamp(24px,2.6vw,36px);
  text-decoration:none;display:flex;flex-direction:column;gap:14px;position:relative;
  transition:background .3s var(--ease);
}
.pillar:first-child{border-left:1px solid var(--line)}
.pillar::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease-out)}
.pillar:hover{background:var(--mist)}
.pillar:hover::after{transform:scaleX(1)}
.pillar__fig{height:104px;display:grid;place-items:center}
.pillar__fig img{max-height:104px;width:auto;transition:transform .5s var(--ease-out)}
.pillar:hover .pillar__fig img{transform:translateY(-6px) scale(1.05)}
.pillar h3{font-size:1.125rem}
.pillar p{font-size:.875rem;color:var(--muted);line-height:1.55}
@media (max-width:900px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillar:nth-child(odd){border-left:1px solid var(--line)}
}
@media (max-width:520px){
  .pillars{grid-template-columns:minmax(0,1fr)}
  .pillar{border-left:1px solid var(--line);gap:10px}
  .pillar__fig{height:76px;place-items:center start}
  .pillar__fig img{max-height:76px}
}

/* ---------- cards ---------- */
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;text-decoration:none;position:relative;
  transition:border-color .3s var(--ease),transform .4s var(--ease-out);
  height:100%;
}
.card:hover{border-color:var(--blue)}
a.card:hover{transform:translateY(-3px)}
.card__fig{aspect-ratio:16/11;overflow:hidden;background:var(--cyan-wash);position:relative}
.card__fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.card:hover .card__fig img{transform:scale(1.045)}
.card__b{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.card__b .meta{margin-top:auto;padding-top:6px}
.card h3{font-size:1.0625rem;line-height:1.28}
.card p{font-size:.875rem;color:var(--muted);line-height:1.55}
.card--flat{border-radius:0;border-left:0;border-right:0;border-top:0}

/* image fallback when a remote asset can't load */
.img-fail{background:linear-gradient(135deg,var(--cyan-wash),#fff 60%,var(--mist));position:relative}
.img-fail img{opacity:0}
.img-fail::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 26% 34%,rgba(78,195,232,.55) 0 9px,transparent 10px),
    radial-gradient(circle at 42% 58%,rgba(0,75,135,.4) 0 13px,transparent 14px),
    radial-gradient(circle at 63% 30%,rgba(78,195,232,.35) 0 7px,transparent 8px),
    radial-gradient(circle at 72% 63%,rgba(0,75,135,.28) 0 11px,transparent 12px);
}

/* ---------- event list (editorial rows) ---------- */
.evlist{border-top:1px solid var(--line)}
.ev{
  display:grid;grid-template-columns:132px minmax(0,1fr) 190px auto;
  gap:clamp(14px,2.4vw,32px);align-items:center;
  padding:clamp(18px,2.2vw,26px) 4px;border-bottom:1px solid var(--line);
  text-decoration:none;position:relative;transition:padding-left .4s var(--ease-out);
}
.ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease-out)}
.ev:hover{padding-left:18px}
.ev:hover::before{transform:scaleY(1)}
.ev__date{display:flex;flex-direction:column;line-height:1}
.ev__date b{font-size:1.7rem;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.ev__date i{font-style:normal;font-size:.8125rem;color:var(--muted);margin-top:5px}
.ev h3{font-size:1.1875rem;margin-bottom:5px}
.ev__where{font-size:.875rem;color:var(--muted)}
.ev__cta{color:var(--blue);font-size:.875rem;font-weight:500;white-space:nowrap}
@media (max-width:860px){
  .ev{grid-template-columns:100px minmax(0,1fr);gap:8px 16px;align-items:start}
  .ev>div,.ev>.tag,.ev__cta{grid-column:2;justify-self:start}
  .ev__date b{font-size:1.4rem}
  .ev h3{font-size:1.0625rem}
}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:.8125rem;font-weight:500;padding:.5em 1em;border-radius:999px;
  border:1px solid var(--line);color:var(--body);background:#fff;
  transition:all .22s var(--ease);
}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- deadlines ---------- */
.dl{background:var(--amber-wash);border:1px solid rgba(232,163,61,.35);border-radius:var(--r-md);overflow:hidden}
.dl__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.dl__col{padding:clamp(20px,2.4vw,30px);border-right:1px solid rgba(232,163,61,.3)}
.dl__col:last-child{border-right:0}
.dl__col h4{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--amber-dk)}
.dl__col h4 svg{width:17px;height:17px}
.dl__col li{display:flex;gap:12px;padding:8px 0;border-top:1px dashed rgba(232,163,61,.4);font-size:.875rem;line-height:1.45}
.dl__col li:first-child{border-top:0;padding-top:0}
.dl__col li b{color:var(--ink);font-weight:500;flex:0 0 58px}
.dl__col li a{color:var(--body);text-decoration:none}
.dl__col li a:hover{color:var(--blue)}
@media (max-width:820px){
  .dl__grid{grid-template-columns:minmax(0,1fr)}
  .dl__col{border-right:0;border-bottom:1px solid rgba(232,163,61,.3)}
  .dl__col:last-child{border-bottom:0}
}

/* ---------- news split ---------- */
.news{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,3.4vw,52px)}
@media (max-width:900px){.news{grid-template-columns:minmax(0,1fr)}}
.news__lead{text-decoration:none;display:block}
.news__lead figure{aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-md);background:var(--cyan-wash);margin-bottom:18px}
.news__lead img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.news__lead:hover img{transform:scale(1.04)}
.news__lead h3{font-size:clamp(1.3rem,2.2vw,1.75rem);margin:10px 0 8px;line-height:1.14}
.nlist li{border-top:1px solid var(--line)}
.nlist li:last-child{border-bottom:1px solid var(--line)}
.nlist a{display:block;padding:16px 0;text-decoration:none;transition:padding-left .36s var(--ease-out)}
.nlist a:hover{padding-left:12px}
.nlist h4{margin:6px 0 4px;font-size:1rem;line-height:1.3}
.nlist a:hover h4{color:var(--blue)}

/* ---------- quote ---------- */
.quote{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:860px){.quote{grid-template-columns:minmax(0,1fr)}}
.quote figure{border-radius:var(--r-md);overflow:hidden;background:var(--cyan-wash)}
.quote blockquote{
  font-family:var(--sans);font-size:clamp(1.3rem,2.5vw,2rem);
  line-height:1.38;color:#fff;font-weight:400;letter-spacing:-.01em;
}
.quote__by{margin-top:22px;display:flex;align-items:center;gap:12px;font-size:.875rem;color:#9FC4DE}
.quote__by b{color:#fff;font-weight:500}
.quote__by::before{content:"";width:28px;height:1px;background:var(--cyan)}

/* ---------- numbers ---------- */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.nums>div{background:var(--paper);padding:clamp(20px,2.6vw,32px) clamp(16px,2vw,26px)}
.nums b{display:block;font-size:clamp(2rem,4vw,3.1rem);font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.04em;}
.nums span{display:block;margin-top:10px;font-size:.875rem;color:var(--muted);line-height:1.4}
.band--mist .nums>div{background:var(--mist)}
@media (max-width:760px){.nums{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- countdown ---------- */
.cd{display:flex;gap:10px;flex-wrap:wrap}
.cd__u{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);padding:12px 14px;min-width:74px;text-align:center}
.cd__u b{display:block;font-size:1.6rem;font-weight:700;color:#fff;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cd__u span{display:block;margin-top:6px;font-size:.6875rem;color:#9FC4DE;letter-spacing:.06em}

/* ---------- membership ---------- */
.mship{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
@media (max-width:860px){.mship{grid-template-columns:minmax(0,1fr)}}
.mship__l{padding:clamp(26px,3.4vw,48px);background:var(--ink);color:#BFD6E6}
.mship__l h2{color:#fff;margin-bottom:14px}
.mship__r{padding:clamp(26px,3.4vw,48px);background:#fff}
.bene li{display:grid;grid-template-columns:22px 1fr;gap:14px;padding:15px 0;border-top:1px solid var(--line)}
.bene li:first-child{border-top:0;padding-top:0}
.bene svg{width:20px;height:20px;color:var(--cyan);margin-top:2px}
.bene b{display:block;color:var(--ink);font-weight:500;font-size:.9375rem;margin-bottom:2px}
.bene p{font-size:.875rem;color:var(--muted);line-height:1.5}

/* ---------- publications / resource rows ---------- */
.pub{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:clamp(16px,2.4vw,28px);align-items:start;padding:clamp(18px,2.2vw,26px) 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .3s var(--ease)}
.pub:first-child{border-top:1px solid var(--line)}
.pub:hover{background:var(--mist)}
.pub__yr{font-size:.875rem;color:var(--muted);padding-top:3px}
.pub h3{font-size:1.0625rem;margin-bottom:7px;line-height:1.3}
.pub p{font-size:.875rem;color:var(--muted);line-height:1.55;max-width:74ch}
.pub__tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pub__go{color:var(--blue);font-size:.875rem;font-weight:500;white-space:nowrap;padding-top:2px}
@media (max-width:760px){
  .pub{grid-template-columns:minmax(0,1fr);gap:8px}
  .pub__go{display:none}
}

/* ---------- people ---------- */
.person{text-align:left}
.person figure{aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--cyan-wash);width:112px;margin-bottom:14px;display:grid;place-items:center}
.person figure span{font-size:1.6rem;font-weight:700;color:var(--blue);letter-spacing:-.02em}
.person h4{margin-bottom:3px}
.person p{font-size:.875rem;color:var(--muted)}

/* ---------- logo strip ---------- */
.logos{display:flex;flex-wrap:wrap;gap:12px}
.logos div{
  flex:1 1 150px;min-height:78px;display:grid;place-items:center;padding:14px 18px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
  font-size:.875rem;font-weight:500;color:var(--ink-2);text-align:center;line-height:1.25;
  transition:border-color .25s var(--ease),color .25s var(--ease)
}
.logos div:hover{border-color:var(--cyan);color:var(--blue)}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__t{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 2px;text-align:left;font-size:1.0625rem;font-weight:500;color:var(--ink)}
.acc__t svg{width:14px;height:14px;flex:0 0 14px;color:var(--blue);transition:transform .3s var(--ease)}
.acc__i.is-open .acc__t svg{transform:rotate(45deg)}
.acc__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease-out)}
.acc__i.is-open .acc__p{grid-template-rows:1fr}
.acc__p>div{overflow:hidden;font-size:.9375rem}
.acc__p p{padding-bottom:20px;max-width:none;font-size:.9375rem}

/* ---------- forms ---------- */
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:.8125rem;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.75em .9em;font-size:.9375rem;
  background:#fff;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,75,135,.1)}

.search-modal{
  position:fixed;inset:0;z-index:120;display:grid;place-items:start center;padding:14vh 20px 20px;
  pointer-events:auto;
  background:rgba(0,75,135,.42);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .24s var(--ease),visibility .24s;
}
.search-modal.is-open{opacity:1;visibility:visible}
.search-modal__box{width:min(620px,100%);background:#fff;border-radius:var(--r-md);padding:22px;transform:translateY(-10px);transition:transform .3s var(--ease-out)}
.search-modal.is-open .search-modal__box{transform:none}
.search-modal input{width:100%;border:0;border-bottom:2px solid var(--line);padding:.6em 0;font-size:1.25rem;color:var(--ink)}
.search-modal input:focus{outline:0;border-bottom-color:var(--blue)}
.search-modal ul{margin-top:18px;display:grid;gap:2px}
.search-modal a{display:block;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-size:.9375rem}
.search-modal a:hover{background:var(--mist);color:var(--blue)}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#9FC0D8;padding-block:clamp(48px,6vw,84px) 28px}
.ftr a{color:#C9DDEC;text-decoration:none}
.ftr a:hover{color:#fff}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
@media (max-width:980px){.ftr__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__top{grid-template-columns:minmax(0,1fr)}}
.ftr__brand img,.ftr__brand svg{height:110px;width:auto;max-width:100%;margin-bottom:18px;filter:brightness(0) invert(1)}
.ftr address{font-style:normal;font-size:.9375rem;line-height:1.7}
.ftr h4{font-size:.8125rem;letter-spacing:.06em;color:#fff;margin-bottom:16px;font-weight:700;}
.ftr ul{display:grid;gap:9px;font-size:.9375rem}
.ftr__bot{margin-top:clamp(36px,5vw,64px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:.8125rem}
.ftr__legal{display:flex;flex-wrap:wrap;gap:8px 18px}
/* copyright + "Website by kd" credit (EASL Hub → Settings → Footer credit) */
.ftr__copy{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ftr__sep{opacity:.45}
.ftr .kd-credit{display:inline-flex;align-items:baseline;gap:6px;color:inherit;text-decoration:none;white-space:nowrap;transition:color .2s}
.ftr .kd-credit .kd{height:1.25em;width:auto;display:block;margin-bottom:-.03em} /* k sits on the text baseline */
.ftr .kd-credit .kd-d{fill:#8196FF;transition:fill .2s}
.ftr .kd-credit--mono .kd-d{fill:currentColor}
.ftr a.kd-credit:hover,.ftr a.kd-credit:focus-visible{color:#fff}
.ftr a.kd-credit:hover .kd-d,.ftr a.kd-credit:focus-visible .kd-d{fill:#fff}
.social{display:flex;gap:8px;margin-top:20px}
.social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:inline-flex;align-items:center;justify-content:center;line-height:0;padding:0;
  transition:background .2s var(--ease),border-color .2s}
.social a:hover{background:var(--blue);border-color:var(--blue)}
.social svg{width:17px;height:17px;display:block;flex:0 0 auto;margin:0}

/* ---------- scroll reveal (subtle, one per section) ---------- */
.rv{opacity:0;transform:translateY(18px)}
.rv.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- misc ---------- */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:70;width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s var(--ease),transform .3s var(--ease-out),visibility .25s,background .2s;
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--blue)}
.center{text-align:center}
.mt-l{margin-top:clamp(28px,3.4vw,48px)}
.mt-m{margin-top:20px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- data table (fees, roles) ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.9375rem}
.tbl caption{text-align:left;font-size:.8125rem;color:var(--muted);padding-bottom:12px}
.tbl th,.tbl td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font-size:.75rem;letter-spacing:.05em;color:var(--blue);font-weight:500;border-bottom:2px solid var(--blue);padding-bottom:8px}
.tbl tbody tr:hover{background:var(--mist)}
.tbl td:last-child,.tbl th:last-child{text-align:right;padding-right:0;white-space:nowrap}
.tbl .fee{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.tbl .fee--free{color:#1F7A4D}
.tbl td b{color:var(--ink);font-weight:500}
.tbl td span{display:block;color:var(--muted);font-size:.8125rem;margin-top:2px}
@media (max-width:640px){
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tbl tr{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .tbl td{border:0;padding:0}
  .tbl td:last-child{grid-row:1;grid-column:2}
}

/* ---------- role list (governance) ---------- */
.roles{border-top:2px solid var(--blue)}
.roles li{display:grid;grid-template-columns:230px minmax(0,1fr);gap:8px 28px;padding:16px 0;border-bottom:1px solid var(--line)}
.roles b{color:var(--ink);font-weight:500;font-size:.9375rem}
.roles p{font-size:.9375rem;color:var(--body)}
.roles p span{display:block;color:var(--muted);font-size:.8125rem;margin-top:3px}
@media (max-width:700px){.roles li{grid-template-columns:minmax(0,1fr);gap:4px}}

/* ---------- portrait card ---------- */
.folk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
@media (max-width:820px){.folk{grid-template-columns:minmax(0,1fr)}}
.folk__i{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
.folk__i figure{background:var(--cyan-wash)}
.folk__i figure img{width:100%;height:auto}
.folk__i .b{padding:20px 22px 24px}
.folk__i blockquote{font-family:var(--sans);font-size:1.125rem;line-height:1.5;color:var(--ink-2);font-weight:400;margin-bottom:16px}
.folk__i h4{margin-bottom:2px}

/* ---------- people grid (leadership) ---------- */
.secnav{position:sticky;top:64px;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.secnav__in{display:flex;gap:6px;overflow-x:auto;padding:12px 0;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.secnav__in::-webkit-scrollbar{display:none}
.secnav a{
  flex:0 0 auto;font-size:.8125rem;font-weight:500;color:var(--body);text-decoration:none;
  padding:.5em 1em;border:1px solid var(--line);border-radius:999px;white-space:nowrap;background:#fff;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.secnav a:hover{border-color:var(--blue);color:var(--blue)}

.ppl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 28px}
@media (max-width:980px){.ppl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ppl{grid-template-columns:minmax(0,1fr)}}
.ppl li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-2)}
.ppl figure{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--cyan-wash);flex:0 0 64px}
.ppl figure img{width:100%;height:100%;object-fit:cover}
.ppl b{display:block;color:var(--ink);font-weight:500;font-size:.9375rem;line-height:1.25}
.ppl span{display:block;font-size:.8125rem;color:var(--muted);line-height:1.35;margin-top:3px}
.ppl em{font-style:normal;color:var(--blue);font-weight:500}
.ppl--lead li{grid-template-columns:76px minmax(0,1fr)}
.ppl--lead figure{width:76px;height:76px;flex:0 0 76px}

.namelist{columns:3;column-gap:32px;font-size:.9375rem;line-height:1.85}
.namelist li{break-inside:avoid;color:var(--body)}
.namelist li span{color:var(--muted);font-size:.8125rem}
@media (max-width:900px){.namelist{columns:2}}
@media (max-width:560px){.namelist{columns:1}}

.body-head{margin-bottom:20px}
.body-head p{max-width:72ch;font-size:.9375rem;color:var(--body);margin-top:10px}
.sub-h{font-size:.75rem;letter-spacing:.06em;font-weight:700;color:var(--blue);margin:26px 0 8px;}
.sub-h:first-of-type{margin-top:0}
/* sections under a sticky section-nav need extra scroll clearance */
.secnav ~ section[id]{scroll-margin-top:136px}

/* ---------- governance section layout ---------- */
.gov{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:980px){.gov{grid-template-columns:minmax(0,1fr);gap:24px}}
.govnav{position:sticky;top:96px}
.govnav h4{font-size:.75rem;letter-spacing:.06em;color:var(--blue);font-weight:700;padding-bottom:.55rem;border-bottom:2px solid var(--blue);margin-bottom:6px;}
.govnav a{
  display:block;font-size:.875rem;color:var(--body);text-decoration:none;
  padding:9px 10px 9px 12px;border-left:1px solid var(--line);line-height:1.35;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.govnav a:hover{color:var(--blue);background:var(--mist);border-left-color:var(--cyan)}
.govnav a[aria-current="page"]{color:var(--ink);font-weight:500;border-left:2px solid var(--blue);background:var(--mist)}
.govnav__grp{margin-top:18px}
@media (max-width:980px){
  .govnav{position:static;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .govnav h4{display:none}
  .govnav__list{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .govnav__list::-webkit-scrollbar{display:none}
  .govnav__grp{margin-top:6px}
  .govnav a{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:.5em 1em;white-space:nowrap;font-weight:500;font-size:.8125rem;background:#fff}
  .govnav a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
}
.gov__meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}

/* ==========================================================================
   CONGRESS THEME LAYER
   Everything above is the shared EASL design system. This block retunes it
   for easlcongress.eu: red becomes the action colour, blue stays structural.
   ========================================================================== */
:root{
  --red:#ED3341;
  --red-dk:#B0121E;
  --red-wash:#FDECEE;
  --red-line:rgba(237,51,65,.3);
}

/* action colour */
.btn--solid{background:var(--red)}
.btn--solid:hover{background:var(--red-dk)}
.btn--line:hover{border-color:var(--red);background:var(--red);color:#fff}
.btn--light{color:var(--ink)}
.btn--light:hover{background:var(--red-wash);color:var(--red-dk)}
.btn--ghost{color:var(--red)}
.btn--ghost:hover{color:var(--ink)}
.ln{color:var(--red)}
.ln:hover{color:var(--ink)}
.prose a{color:var(--red)}
.prose a.btn,.legal a.btn{text-decoration:none}
.prose a.btn--solid,.legal a.btn--solid{color:#fff}
.prose a.btn--line,.legal a.btn--line{color:var(--ink)}
.prose a.btn--line:hover,.legal a.btn--line:hover{color:#fff}
.prose a.btn--light,.legal a.btn--light{color:var(--ink)}
.rail__label{color:var(--page-line);border-top-color:var(--page-line)}
.nav__link::after{background:var(--red)}
.nav__link[aria-current="page"]{color:var(--red)}
.mega a:hover{color:var(--red)}
.card:hover{border-color:var(--red)}
.ev::before{background:var(--red)}
.ev__cta{color:var(--red)}
.chip.is-on{background:var(--red);border-color:var(--red)}
.chip:hover{border-color:var(--red);color:var(--red)}
.acc__t svg{color:var(--red)}
.hero__pulse{background:var(--red);box-shadow:0 0 0 0 rgba(237,51,65,.7);animation:pulseRed 2.8s infinite}
@keyframes pulseRed{0%{box-shadow:0 0 0 0 rgba(237,51,65,.55)}70%{box-shadow:0 0 0 12px rgba(237,51,65,0)}100%{box-shadow:0 0 0 0 rgba(237,51,65,0)}}
.hero__kicker span{color:var(--red)}
.ticker__it::before{background:var(--red)}
.tag{background:var(--red-wash);color:var(--red-dk)}
.tag--blue{background:var(--cyan-wash);color:var(--blue-dk)}
.to-top{background:var(--red)}
.to-top:hover{background:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(237,51,65,.12)}
.search-modal input:focus{border-bottom-color:var(--red)}
.search-modal a:hover{color:var(--red)}
.pillar::after{background:var(--red)}
.govnav a[aria-current="page"]{border-left-color:var(--red)}
.quote__by::before{background:var(--red)}
:focus-visible{outline-color:var(--red)}

/* ---------- security strip (their real notice, given a real home) ---------- */
.alert{background:var(--ink);color:#fff}
.alert__in{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  font-size:.8125rem;line-height:1.35;
  justify-content:flex-end;text-align:right;   /* clear of the logo below */
}
@media (max-width:820px){
  .alert__in{justify-content:flex-start;text-align:left}
}
.alert__dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 7px;animation:pulseRed 2.8s infinite}
.alert b{font-weight:500;color:#fff}
.alert a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* ---------- congress header ----------
   Six top-level items (no CTA) need about 1000px to sit comfortably next to
   the logo and search, so the full nav shows at >=1025px and drops to the
   burger below that — before it would crowd or crop. */
@media (min-width:1025px){
  .nav{display:flex}
  .burger{display:none}
}
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:grid}
}
.nav{gap:clamp(16px,1.7vw,24px)}

/* ---------- congress header: logo lock-up + date badge ---------- */
.brand--congress img{height:110px;width:auto}
.hdr.is-stuck .brand--congress img{height:74px}
.hdr__in{height:144px}
.hdr.is-stuck .hdr__in{height:100px}
.whenwhere{
  display:flex;flex-direction:column;line-height:1.15;padding-left:16px;margin-left:16px;
  border-left:1px solid var(--line);
}
.whenwhere b{font-size:.875rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.whenwhere span{font-size:.75rem;color:var(--muted)}
@media (max-width:1320px){.whenwhere{display:none}}
@media (max-width:560px){.brand--congress img{height:72px}.hdr__in{height:104px}.drawer{padding-top:114px}}

/* ---------- hero: congress ---------- */
.hero--congress .hero__in{min-height:min(82vh,790px);padding-block:clamp(26px,4.4vw,58px) clamp(26px,3.6vw,44px)}
.hero__stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:900px){.hero__stage{grid-template-columns:minmax(0,1fr)}}
.hero__key img{width:100%;height:auto;border-radius:var(--r-md)}
.hero__when{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;margin-top:clamp(16px,2.4vw,26px)}
.hero__when b{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:700;color:var(--ink);letter-spacing:-.02em}
.hero__when span{font-size:.9375rem;color:var(--muted)}
.hero__when .dot{width:5px;height:5px;border-radius:50%;background:var(--red)}

/* countdown, light-background variant */
.cd--light .cd__u{background:#fff;border:1px solid var(--line)}
.cd--light .cd__u b{color:var(--ink)}
.cd--light .cd__u span{color:var(--muted)}

/* ---------- quick links ---------- */
.quick{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.quick a{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;
  padding:clamp(18px,2.2vw,26px) 10px;text-decoration:none;text-align:center;
  border-right:1px solid var(--line);position:relative;transition:background .28s var(--ease);
}
.quick a:last-child{border-right:0}
.quick a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transition:transform .38s var(--ease-out)}
.quick a:hover{background:var(--mist)}
.quick a:hover::after{transform:scaleX(1)}
.quick svg{width:26px;height:26px;color:var(--blue);transition:transform .38s var(--ease-out),color .28s var(--ease)}
.quick a:hover svg{transform:translateY(-3px);color:var(--red)}
.quick b{font-size:.875rem;font-weight:500;color:var(--ink);line-height:1.25}
@media (max-width:1100px){.quick{grid-template-columns:repeat(4,minmax(0,1fr))}.quick a:nth-child(4n){border-right:0}.quick a:nth-child(-n+4){border-bottom:1px solid var(--line)}}
@media (max-width:640px){.quick{grid-template-columns:repeat(2,minmax(0,1fr))}.quick a{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.quick a:nth-child(2n){border-right:0}.quick a:nth-last-child(-n+1){border-bottom:0}}

/* ---------- stat photos ---------- */
.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,22px)}
@media (max-width:820px){.statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.statcard{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/2;background:var(--cyan-wash)}
.statcard img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.statcard:hover img{transform:scale(1.05)}
.statcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,75,135,0) 32%,rgba(0,75,135,.82) 100%)}
.statcard figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff}
.statcard figcaption b{display:block;font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;letter-spacing:-.035em;line-height:1;}
.statcard figcaption span{display:block;font-size:.875rem;color:#CFE2F0;margin-top:5px}

/* ---------- deadline timeline ---------- */
/* ul.tl beats the ul[class]{padding:0} reset on specificity + source order */
ul.tl{--tl-rail:36px;position:relative;padding-left:var(--tl-rail);list-style:none;margin:0}
.tl li{position:relative;display:grid;grid-template-columns:172px minmax(0,1fr);gap:6px 26px;padding:16px 0}
/* the marker */
.tl li::before{
  content:"";position:absolute;left:calc(1px - var(--tl-rail));top:22px;
  width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--cyan);z-index:2;
}
.tl li.is-key::before{border-color:var(--red);background:var(--red);box-shadow:0 0 0 4px var(--red-wash)}
/* the connector — one segment per gap, so it starts and ends on a dot */
.tl li::after{
  content:"";position:absolute;left:calc(6px - var(--tl-rail));top:35px;bottom:-16px;width:1px;
  background:var(--line);z-index:1;
}
.tl li:last-child::after{content:none}
.tl li.is-key::after{background:var(--red-line)}
.tl time{font-size:.875rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:1px}
.tl li.is-key time{color:var(--red)}
.tl h3{font-size:1.0625rem;line-height:1.3}
.tl p{font-size:.875rem;color:var(--muted);margin-top:3px}
@media (max-width:640px){
  ul.tl{--tl-rail:26px}
  .tl li{grid-template-columns:minmax(0,1fr);gap:3px}
  .tl li::before{top:18px}
  .tl li::after{top:31px}
}

/* ---------- benefit rows with real imagery ---------- */
.bnf{display:grid;gap:2px}
.bnf li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:22px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.bnf figure{width:96px;height:96px;border-radius:var(--r-md);overflow:hidden;background:var(--cyan-wash);display:grid;place-items:center}
.bnf figure img{width:100%;height:100%;object-fit:contain}
.bnf b{display:block;color:var(--ink);font-size:1.0625rem;font-weight:500;margin-bottom:5px}
.bnf p{font-size:.9375rem;color:var(--body);line-height:1.6;max-width:70ch}
@media (max-width:560px){.bnf li{grid-template-columns:62px minmax(0,1fr);gap:16px}.bnf figure{width:62px;height:62px}}

/* ---------- organisers ---------- */
.orgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
@media (max-width:820px){.orgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.orgs figure{aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;background:var(--cyan-wash);margin-bottom:12px}
.orgs figure img{width:100%;height:100%;object-fit:cover}
.orgs b{display:block;color:var(--ink);font-size:.9375rem;font-weight:500}
.orgs span{display:block;font-size:.8125rem;color:var(--muted);margin-top:2px}

/* ---------- contact desk list ---------- */
.desks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 32px}
@media (max-width:700px){.desks{grid-template-columns:minmax(0,1fr)}}
.desks li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.desks b{color:var(--ink);font-weight:500;font-size:.9375rem}
.desks a{color:var(--red);font-size:.875rem;text-decoration:none;word-break:break-all}
.desks a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:560px){.desks li{grid-template-columns:minmax(0,1fr)}}

/* ---------- footer (congress runs dark with the EASL white mark) ---------- */
.ftr__note{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);padding:14px 16px;font-size:.8125rem;line-height:1.5;margin-top:20px;max-width:46ch}
.ftr__note b{color:#fff}

/* ---------- page-header motif ----------
   The liver, drawn as a tube map: octilinear segments, rounded joins,
   white station rings. pathLength="1" normalises the draw, so every line
   takes the same time no matter how long it actually is.            */
.motif{width:100%;max-width:520px;height:auto;margin-inline:auto;overflow:visible;position:relative;z-index:2}

.motif .route{stroke-dasharray:1;stroke-dashoffset:1}
.is-ready .motif .route{animation:draw 3.2s cubic-bezier(.33,0,.15,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.motif .stn{opacity:0;transform-box:fill-box;transform-origin:center}
.is-ready .motif .stn{animation:pop 1s var(--ease-out) forwards}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}

.motif .glow{opacity:0}
.is-ready .motif .glow{animation:glowIn 2.4s var(--ease-out) .3s forwards,breathe 11s ease-in-out 3s infinite}
@keyframes glowIn{to{opacity:1}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.motif .glow{transform-box:fill-box;transform-origin:center}

/* one service running the loop — slow enough to be background, not motion */
.motif .spark{stroke-dasharray:.035 .965;stroke-dashoffset:1;opacity:.85}
.is-ready .motif .spark{animation:travel 22s linear 3.6s infinite}
@keyframes travel{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .motif .route{stroke-dashoffset:0;animation:none}
  .motif .stn{opacity:1;animation:none}
  .motif .glow{opacity:1;animation:none}
  .motif .spark{display:none}
}

/* ---------- video facade: thumbnail fills the frame, minimal play mark ---------- */
.vplay{
  position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--ink);
  /* The film is cinemascope, so YouTube's 16:9 thumbnail has black bars baked
     in. Matching the frame to the footage crops those away exactly, with no
     horizontal loss. */
  aspect-ratio:2.35/1;
  cursor:pointer;border:0;padding:0;width:100%;min-width:0;display:block;
}
.vplay img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.vplay:hover img{transform:scale(1.035)}
.vplay::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,75,135,0) 42%,rgba(0,75,135,.78) 100%);
}
.vplay__cap{
  position:absolute;left:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:16px;
  padding:clamp(18px,2.4vw,28px);color:#fff;text-align:left;
}
.vplay__btn{
  width:52px;height:52px;flex:0 0 52px;border-radius:50%;
  background:var(--red);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  line-height:0;box-shadow:0 10px 30px -10px rgba(237,51,65,.85);
  transition:transform .34s var(--ease-out),background .24s var(--ease);
}
.vplay:hover .vplay__btn{transform:scale(1.1)}
.vplay__btn svg{width:17px;height:17px;display:block;margin-left:3px}
.vplay__cap b{font-size:clamp(1rem,1.5vw,1.25rem);font-weight:500;letter-spacing:-.015em;line-height:1.25}
/* the real player is 16:9 — give it its shape back once it loads */
@media (max-width:640px){.vplay{aspect-ratio:2/1}}
.vplay.is-live{cursor:default;aspect-ratio:16/9}
.vplay.is-live img{display:none}
.vplay.is-live::after,.vplay.is-live .vplay__cap{display:none}
.vplay iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:560px){.vplay__btn{width:44px;height:44px;flex:0 0 44px}.vplay__btn svg{width:14px;height:14px}}

/* ---------- glyph tiles (drawn, not cropped) ---------- */
.glyph{
  width:84px;height:84px;flex:0 0 84px;border-radius:var(--r-md);
  background:var(--red-wash);display:grid;place-items:center;
  transition:background .3s var(--ease);
}
.glyph svg{width:44px;height:44px;color:var(--red)}
.bnf li:hover .glyph{background:#fff;box-shadow:inset 0 0 0 1px var(--red-line)}
@media (max-width:560px){.glyph{width:62px;height:62px;flex:0 0 62px}.glyph svg{width:32px;height:32px}}

/* ---------- abstract media mark (dark band) ---------- */
.mediamark{width:100%;max-width:430px;margin-inline:auto;height:auto;overflow:visible}
.mediamark .mm-sweep{transform-box:fill-box;transform-origin:center;animation:mmspin 26s linear infinite}
@media (prefers-reduced-motion:reduce){.mediamark .mm-sweep{animation:none}}
@keyframes mmspin{to{transform:rotate(360deg)}}

/* ---------- testimonials ---------- */
.tmn{position:relative}
.tmn__view{overflow:hidden}
.tmn__track{display:flex;transition:transform .62s var(--ease-out)}
.tmn__i{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center;padding-right:2px}
@media (max-width:760px){.tmn__i{grid-template-columns:minmax(0,1fr);gap:20px}}
.tmn__i figure{width:200px;height:200px;border-radius:50%;overflow:hidden;background:var(--cyan-wash)}
@media (max-width:760px){.tmn__i figure{width:128px;height:128px}}
.tmn__i figure img{width:100%;height:100%;object-fit:cover}
.tmn__i blockquote{
  font-family:var(--sans);font-size:clamp(1.25rem,2.4vw,1.85rem);
  line-height:1.4;color:var(--ink);font-weight:400;letter-spacing:-.012em;
}
.tmn__q{width:34px;height:26px;color:var(--red);margin-bottom:14px}
.tmn__by{margin-top:20px;font-size:.9375rem;color:var(--muted)}
.tmn__by b{display:block;color:var(--ink);font-weight:500;font-size:1rem;margin-bottom:2px}
.tmn__nav{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,3vw,34px)}
.tmn__btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;line-height:0;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.tmn__btn:hover{border-color:var(--red);background:var(--red);color:#fff}
.tmn__btn svg{width:15px;height:15px;display:block}
.tmn__dots{display:flex;gap:7px;margin-left:6px}
.tmn__dots button{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .25s var(--ease),width .3s var(--ease-out)}
.tmn__dots button[aria-current="true"]{background:var(--red);width:22px;border-radius:4px}
.tmn__count{margin-left:auto;font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- organisers: bigger, static, three per row ---------- */
.orgs{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
@media (max-width:860px){.orgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.orgs{grid-template-columns:minmax(0,1fr)}}
.orgs figure{aspect-ratio:1;border-radius:var(--r-md);margin-bottom:14px;position:relative}
.orgs figure::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,75,135,.07);border-radius:var(--r-md)}
.orgs b{font-size:1.0625rem}
.orgs span{font-size:.875rem}

/* portrait feature (welcome message) */
.sgcard{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:start}
@media (max-width:820px){.sgcard{grid-template-columns:minmax(0,1fr)}}
.sgcard figure{width:260px;max-width:100%;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;background:var(--cyan-wash)}
.sgcard figure img{width:100%;height:100%;object-fit:cover}
.sgcard__name{margin-top:16px}
.sgcard__name b{display:block;color:var(--ink);font-size:1.125rem;font-weight:700}
.sgcard__name span{font-size:.875rem;color:var(--muted)}

/* ---------- legal pages ---------- */
.legal h2{font-size:clamp(1.3rem,2vw,1.6rem);margin:38px 0 12px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.0625rem;margin:22px 0 8px}
.legal p,.legal li{font-size:.9375rem;line-height:1.7;max-width:74ch}
.legal ul{list-style:disc;padding-left:20px;margin:10px 0 14px}
.legal li{margin-bottom:6px}
.legal a{color:var(--red);text-decoration:underline;text-underline-offset:3px}

/* ---------- "not live yet" dialog ---------- */
.soon{
  position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px;
  pointer-events:auto;
  background:rgba(0,75,135,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .24s var(--ease),visibility .24s;
}
.soon.is-open{opacity:1;visibility:visible}
.soon__box{
  width:min(460px,100%);background:#fff;border-radius:var(--r-md);
  padding:clamp(26px,3.4vw,38px);position:relative;
  transform:translateY(12px) scale(.98);transition:transform .34s var(--ease-out);
}
.soon.is-open .soon__box{transform:none}
.soon__x{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.soon__x:hover{background:var(--mist);color:var(--ink)}
.soon__x svg{width:14px;height:14px;display:block}
.soon__when{
  display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;
  letter-spacing:.04em;color:var(--red-dk);background:var(--red-wash);
  padding:.4em .75em;border-radius:2px;margin-bottom:16px;
}
.soon__when i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:0 0 6px;animation:pulseRed 2.8s infinite}
.soon h3{font-size:clamp(1.25rem,2vw,1.55rem);margin-bottom:8px}
.soon p{font-size:.9375rem;color:var(--body);line-height:1.6}
.soon__form{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap}
.soon__form input{
  flex:1 1 200px;min-width:0;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.78em .9em;font-size:.9375rem;background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.soon__form input:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(237,51,65,.12)}
.soon__form .btn{flex:0 0 auto}
.soon__note{margin-top:12px;font-size:.75rem;color:var(--muted);line-height:1.5}
.soon__ok{display:none;align-items:flex-start;gap:12px;margin-top:22px;padding:16px;border-radius:var(--r-sm);background:var(--mist)}
.soon__ok svg{width:20px;height:20px;flex:0 0 20px;color:#1F7A4D;margin-top:2px}
.soon__ok p{font-size:.875rem}
.soon.is-done .soon__form,.soon.is-done .soon__note{display:none}
.soon.is-done .soon__ok{display:flex}

/* ==========================================================================
   IDENTITY: tube networks.
   Sub-page headers get their own inline SVG composition — different geometry
   and a different set of the nine colours per page, generated in build.py.
   Full-width sections use the official PNG artwork as a soft texture.
   ========================================================================== */
.tubes{position:relative;overflow:hidden}

.tubenet{
  /* ---- LINE WEIGHT LIVES HERE ---- tune --tube-w and everything follows */
  --tube-w:4;                             /* route thickness, in viewBox units */
  --tube-stn:calc(var(--tube-w) * .68);   /* station ring weight               */
  --tube-r:calc(var(--tube-w) * 1.5px);     /* station radius  — needs a unit */
  --tube-r-hub:calc(var(--tube-w) * 1.9px); /* interchange radius            */
  position:absolute;right:0;top:0;width:100%;height:100%;z-index:0;
  pointer-events:none;overflow:visible;
}
.tubenet .rt{stroke-width:var(--tube-w)}
.tubenet .stn{stroke-width:var(--tube-stn);r:var(--tube-r)}
.tubenet .stn--hub{r:var(--tube-r-hub)}
.tubenet .rt{stroke-dasharray:1;stroke-dashoffset:1}
.is-ready .tubenet .rt{animation:draw 3.6s cubic-bezier(.33,0,.15,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.tubenet .stn{opacity:0;transform-box:fill-box;transform-origin:center}
.is-ready .tubenet .stn{animation:pop .9s var(--ease-out) forwards}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}

/* a narrow white veil, only under the headline column */
.tubes::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 22%,rgba(255,255,255,.5) 36%,rgba(255,255,255,0) 50%);
}

/* full-width sections: the official artwork, well under the text */
.tubes--soft::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/tube-lines.png") center/cover no-repeat;opacity:0;
}
.is-ready .tubes--soft::before{animation:tubesInSoft 1.8s var(--ease-out) .2s forwards}
@keyframes tubesInSoft{to{opacity:.3}}
.tubes--soft::after{content:none}

@media (prefers-reduced-motion:reduce){
  .tubenet .rt{stroke-dashoffset:0;animation:none}
  .tubenet .stn{opacity:1;animation:none}
  .tubes--soft::before{opacity:.3;animation:none}
}
@media (max-width:760px){
  .tubenet{opacity:.5}
  .tubes::after{background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.86) 100%)}
}

/* the liver key visual */
.organfig{position:relative;z-index:2;width:100%;max-width:400px;margin-inline:auto;display:block}
.tubes .organfig{opacity:0}
.is-ready .tubes .organfig{animation:organIn 1.4s var(--ease-out) .45s forwards}
@keyframes organIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tubes .organfig{opacity:1;animation:none}}

/* the page's own line, used sparingly: rail labels, crumb hover, header edge */
.phero{border-bottom:2px solid var(--page-line)}
.crumbs a:hover{color:var(--page-line)}

/* quick links: one identity colour each */
.quick a:nth-child(1) svg{color:var(--line-1)}
.quick a:nth-child(2) svg{color:var(--line-4)}
.quick a:nth-child(3) svg{color:var(--line-3)}
.quick a:nth-child(4) svg{color:var(--line-7)}
.quick a:nth-child(5) svg{color:var(--line-9)}
.quick a:nth-child(6) svg{color:var(--line-8)}
.quick a:nth-child(7) svg{color:var(--line-6)}
.quick a:nth-child(1)::after{background:var(--line-1)}
.quick a:nth-child(2)::after{background:var(--line-4)}
.quick a:nth-child(3)::after{background:var(--line-3)}
.quick a:nth-child(4)::after{background:var(--line-7)}
.quick a:nth-child(5)::after{background:var(--line-9)}
.quick a:nth-child(6)::after{background:var(--line-8)}
.quick a:nth-child(7)::after{background:var(--line-6)}
.quick a:hover svg{transform:translateY(-3px)}

/* ---------- dismissible security strip ---------- */
.alert{position:relative}
.alert__in{padding-right:calc(var(--gut) + 30px)}
.alert__x{
  position:absolute;right:calc(var(--gut) - 10px);top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;color:#fff;opacity:.65;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;
  transition:opacity .2s var(--ease),background .2s var(--ease);
}
.alert__x:hover{opacity:1;background:rgba(255,255,255,.14)}
.alert__x svg{width:11px;height:11px;display:block}
.alert.is-gone{display:none}

/* ==========================================================================
   WORDPRESS OVERRIDES
   Appended deliberately, and NOT part of the prototype mirror above.

   The prototype's components assume the global `margin:0` reset that cannot
   be carried into WordPress. Where a component never sets its own margins,
   Astra (and Astra Pro, which may enqueue after this file) supplies them.
   These rules are written at class specificity so they win on specificity
   rather than on load order, and they live at the end so they also win on
   source order. Add to this block rather than editing the mirror.
   ========================================================================== */

/* deadline timeline: note sat away from its heading on Astra's h3/p margins */
.tl h3{margin:0}
.tl p{margin:3px 0 0}
.tl time{margin:0}
.tl li > div{display:block}

/* rail: label and note keep their intended spacing, nothing else */
.rail__side p{margin:0}
.rail__note{margin-top:.5rem}

/* footer columns */
.ftr h4{margin:0 0 14px}
.ftr p,.ftr ul,.ftr li,.ftr address{margin:0}

/* header */
.hdr p,.alert p,.whenwhere b,.whenwhere span{margin:0}
.mega a span{margin:0}

/* testimonial slider */
.tmn__i blockquote{font-style:normal;quotes:none}
.tmn__i blockquote::before,.tmn__i blockquote::after{content:none}
.tmn__dots button{
  width:7px;height:7px;min-width:0;min-height:0;padding:0;border:0;
  box-shadow:none;line-height:0;font-size:0;
}
.tmn__i figure{margin:0}

/* A quote with no portrait: collapse the 200px figure column, or the text wraps
   into it and the flex track inherits that slide's height. */
.tmn__i--nofig{grid-template-columns:minmax(0,1fr)}

/* Section content sits above the tube artwork.
   `.tubes--soft::before` is absolutely positioned at z-index:0, and a positioned
   element paints above static content regardless of source order. The prototype
   survives this only because .rail__side (sticky) and .tmn (relative) are
   themselves positioned — anything static in a .tubes section would be buried.
   Lifting .wrap makes it deliberate and covers every child. */
.tubes > .wrap{position:relative;z-index:1}

/* Tube artwork: constrain the BOX, not the background-size.
   tube-lines.png is 1920x720. The prototype's sections are ~500px tall, so
   `cover` crops in and scales the art to ~0.69x — large, sparse shapes. A
   WordPress section is often much taller, and `cover` then scales by height
   instead (1.25x at 900px), making the lines heavier and denser.

   An earlier attempt here set `background-size:100% auto`, which scaled by
   width and zoomed the art OUT — busier than the design, not closer to it.

   A second attempt capped the height at 520px. That was based on a section
   height measured off screenshots, which turned out to include neighbouring
   sections: the real section is ~537px, i.e. already the prototype's height.
   The cap was therefore 17px short and left a visible gap at the bottom.

   The cap stays, but only as a guard against a pathologically tall .tubes
   section over-scaling the art. At normal heights it never engages. */
.tubes--soft::before{
  inset:auto 0;
  top:50%;
  height:min(100%,760px);
  transform:translateY(-50%);
  background-size:cover;
}

/* Astra gives blockquote left padding and a border, which pushed the quote
   ~40px right of the attribution line sharing its grid cell. */
.tmn__i blockquote{padding:0;border:0;margin:0}

/* Portraits: define the circle.
   .tmn__i figure sets background:var(--cyan-wash) on the assumption of cut-out
   portraits with transparency. EASL's are JPEGs on solid white, which paints
   over it and leaves the subject floating with no visible circle. Insetting the
   image leaves a ring of the wash colour, plus a hairline at the outer edge.
   Works for any portrait, including ones added later. */
.tmn__i figure{
  padding:7px;
  box-shadow:inset 0 0 0 1px rgba(0,75,135,.10);
}
.tmn__i figure img{border-radius:50%}

/* Quick links: icons in red, at EASL marketing's request.
   The prototype draws them in --blue and uses red only on hover, because red is
   the action colour in this system. With every icon already red, the hover had
   nowhere to go — so hover now darkens to --red-dk and keeps the lift, which
   preserves the affordance without introducing a second accent. */
/* Every quick-link icon in the accent red, at EASL marketing's request.
   The prototype gives each tile one of the nine subspecialty colours from
   `.quick a:nth-child(N) svg` — three classes of specificity, which a flat
   `.quick a svg` cannot beat however late it is loaded. Restated here with
   `:nth-child(n)`, which matches every child, ties on specificity and wins on
   order. Written that way rather than as seven rules so it still holds if
   marketing adds or removes a tile in the repeater.
   The hover underline goes with them: a red icon over a purple underline was
   the old per-tile colour showing through. */
.quick a:nth-child(n) svg{color:var(--red)}
.quick a:nth-child(n):hover svg{color:var(--red-dk)}
.quick a:nth-child(n)::after{background:var(--red)}

/* Heading scale, restated at class specificity.
   The prototype sets h1–h4 as bare element selectors. Astra (and Astra Pro)
   also set heading sizes, responsively — which is why these matched at 909px,
   where both land on the same clamp term, and diverged at desktop widths where
   Astra's own desktop value takes over.

   `.wrap` is the prototype's container and appears in every section we render,
   so `.wrap h2` is (0,1,1) and outranks a bare `h2` regardless of load order.
   Values are copied verbatim from the type scale above — if that changes, change
   it there first and mirror it here. */
.wrap h1,.wrap h2,.wrap h3,.wrap h4,.wrap .h-display{
  font-family:var(--sans);color:var(--ink);font-weight:700;
  line-height:1.06;letter-spacing:-.022em;text-wrap:balance;
}
.wrap .h-display{font-size:clamp(2.7rem,7.2vw,5.5rem);line-height:.94;letter-spacing:-.035em}
.wrap h1{font-size:clamp(2.2rem,5vw,3.9rem);letter-spacing:-.032em;line-height:1}
.wrap h2{font-size:clamp(1.8rem,3.4vw,2.85rem);letter-spacing:-.028em}
.wrap h3{font-size:clamp(1.2rem,1.7vw,1.45rem);letter-spacing:-.018em;line-height:1.22}
.wrap h4{font-size:1.0625rem;letter-spacing:-.01em;line-height:1.3}
.wrap .band--ink h2,.band--ink .wrap h2,.band--ink h2,.band--ink h3,.band--ink h4{color:#fff}

/* Phishing strip in the accent red, at EASL marketing's request.
   Was --ink. The pulsing dot was --red, which would vanish against it, so it
   becomes white with a white pulse.

   CONTRAST: white on --red (#ED3341) measures 4.08:1. The strip's text is
   13px, and WCAG AA wants 4.5:1 below 18.66px — so this narrowly fails, on a
   security warning people need to read. White on --red-dk (#B0121E) measures
   7.12:1 and still reads as red. If EASL will accept the darker shade, change
   the one value below. (The previous --ink was 8.91:1.) */
.alert{background:var(--red)}
.alert__dot{background:#fff;animation:pulseWhite 2.8s infinite}
@keyframes pulseWhite{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* Tube-line network in the homepage hero, at EASL marketing's request.
   `.tubenet` is position:absolute and needs a positioned, clipping ancestor —
   on inner pages that is `.phero.tubes`. Deliberately NOT reusing the `.tubes`
   class here: it carries `::after`, the white gradient veil, which would sit on
   top of the hero's own `.hero__veil`. */
.hero--tubes{position:relative;overflow:hidden}
.hero--tubes > .wrap{position:relative;z-index:2}

/* Keep the network inside the hero.
   The prototype sets `overflow:visible` on `.tubenet` (line ~1200) because the
   sub-page headers want strokes to bleed past the frame. Here that is what
   makes routes appear to run out of the hero and across the section below: a
   path or a station ring sitting on the bottom edge of the viewBox paints half
   its stroke width outside the SVG's own viewport, and `.hero`'s overflow rule
   only clips at the hero's border box — which the SVG fills exactly.
   `clip-path` clips regardless of how the SVG viewport is resolved, so it holds
   whatever Elementor wraps around the widget. Scoped to the hero so the inner
   page headers keep the prototype's behaviour. */
.hero--tubes .tubenet{overflow:hidden;clip-path:inset(0)}

/* The clearance the routes keep from the frame is set in assets/js/tubes.js —
   the PAD constant, in viewBox units. It is done in the geometry rather than
   here so the network stays centred in the hero and the padding scales with
   the drawing instead of fighting preserveAspectRatio. */

/* Push the network behind the key visual.
   It already is, in z-order: `.tubenet` is z-index 0 and `.hero__in` — which
   holds the image — is z-index 2. What makes routes look like they cross the
   liver is the artwork itself: it is fine red hatching on transparency, so
   anything behind it shows straight through the gaps at full strength.
   A soft white halo sitting between the two knocks the routes back where they
   pass under the image, without a mask and without touching the artwork. */
.hero--tubes .hero__key{position:relative}
.hero--tubes .hero__key::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:104%;aspect-ratio:1/1;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.86) 38%,
    rgba(255,255,255,.55) 58%,
    rgba(255,255,255,0) 76%);
}

/* The left-hand rail label and its rule in congress red, at EASL marketing's
   request — the highlight on the section's left column, everywhere it appears.
   The prototype paints both from --page-line, which resolves to the cyan
   subspecialty colour (--line-1). Overridden on `.rail__label` rather than on
   --page-line itself so the sub-page header underline and the breadcrumb hover
   that also read that variable keep the cyan.
   The note under the label stays --muted: it is supporting copy, not the
   highlight, and red body text at 13px would compete with the CTAs. */
.rail__label{color:var(--red);border-top-color:var(--red)}

/* Stop the headline reveal from slicing the type.
   `.reveal-line` is the mask each headline line slides up out of, so it has to
   be overflow:hidden — but overflow clips to the PADDING box, and the display
   scale runs at line-height:.94. Helvetica Neue's glyph box is about 1.16em
   tall (ascent .95 + descent .21), so a .94em box cuts the caps at the top and
   the descenders at the bottom: the "g" of Congress, and the tops of EASL.
   Padding opens the clip box back up; the matching negative margin takes the
   space straight back out, so the line spacing is unchanged.
   The start offset goes to 150% to match: the line has further to travel
   before it clears the taller box, and at 105% its top edge would already be
   showing inside the new padding before the animation began. */
.reveal-line{padding-block:.2em;margin-block:-.2em}
.reveal-line>span{transform:translateY(150%)}

/* ...and the reason the headline block then grew taller: adjacent block
   siblings COLLAPSE their margins, and two negative margins collapse to the
   more negative of the two, not their sum. So -.2em bottom against -.2em top
   gave back only .2em of the .4em the padding added, once per gap. Margins do
   not collapse inside a grid container, so making the headline a grid makes
   the compensation exact — each line's outer height comes back to the .94em it
   was before the padding. Grid items stretch by default, so the lines lay out
   exactly as blocks did otherwise. Scoped to the hero, which is the only place
   .reveal-line is rendered. */
.hero .h-display{display:grid}

/* Optical nudge under the first headline line.
   The leading is even — cap-top to cap-top measures 83px for both gaps at
   desktop size — but "Congress" hangs a descender into the second gap and
   "EASL" is caps only, so the first gap shows about 16px more white. This
   closes roughly half of that difference, which reads as even without pulling
   the baselines far off their rhythm.
   It is an optical correction tied to THIS headline: it assumes line 1 has no
   descender and line 2 does. If marketing rewrites the hero lines, re-check it
   — set --hd-nudge to 0 to go back to pure even leading, or to about .18em to
   close the gap completely. */
.hero .h-display{--hd-nudge:.09em}
.hero .h-display .reveal-line:first-child{margin-bottom:calc(-.2em - var(--hd-nudge))}

/* ==========================================================================
   VIDEO LIGHTBOX
   The prose-section video opens over the page instead of swapping in place.
   Markup is built by assets/js/video-modal.js; the trigger is the existing
   .vplay facade, which now carries data-yt-modal instead of data-yt.
   ========================================================================== */
.vmodal{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  padding:clamp(16px,4vw,56px);
  opacity:0;visibility:hidden;
  transition:opacity .34s var(--ease-out),visibility .34s var(--ease-out);
}
.vmodal.is-open{opacity:1;visibility:visible}
html.vmodal-open{overflow:hidden}

/* The scrim: EASL blue pooling behind the frame and falling away to near-black
   at the corners, so the eye lands on the film rather than on the edges of the
   screen. The blur is what separates it from the page underneath. */
.vmodal__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(130% 100% at 50% 44%,
      rgba(0,75,135,.58) 0%,
      rgba(3,26,48,.90) 55%,
      rgba(2,12,22,.97) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
}

.vmodal__box{
  position:relative;z-index:1;width:min(1180px,100%);
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .42s var(--ease-out) .04s,transform .42s var(--ease-out) .04s;
}
.vmodal.is-open .vmodal__box{opacity:1;transform:none}

.vmodal__bar{
  display:flex;align-items:center;gap:18px;
  margin-bottom:16px;color:#fff;
}
/* the white EASL mark, small, top left — same wordmark as the footer */
.vmodal__logo{
  height:clamp(34px,3.4vw,46px);width:auto;flex:0 0 auto;display:block;
  opacity:.95;
}
.vmodal__cap{
  flex:1 1 auto;min-width:0;
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  color:rgba(255,255,255,.92);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vmodal__close{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);color:#fff;border:0;padding:0;cursor:pointer;
  transition:background .24s var(--ease),transform .34s var(--ease-out);
}
.vmodal__close:hover{background:var(--red);transform:rotate(90deg)}
.vmodal__close:focus-visible{outline:2px solid #fff;outline-offset:3px}

.vmodal__frame{
  position:relative;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 46px 130px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.09);
}
.vmodal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

@media (max-width:640px){
  .vmodal__frame{border-radius:10px}
  .vmodal__cap{font-size:.8125rem}
  .vmodal__logo{height:28px}
}
@media (prefers-reduced-motion:reduce){
  .vmodal,.vmodal__box,.vmodal__close{transition:none}
  .vmodal__box{transform:none}
}

/* Keep the page-header content above the tube veil.
   `.tubes::after` is the white gradient that fades the network out under the
   title column — it is z-index 1, and the prototype relies on `.phero__in`
   being z-index 2 to sit above it. At one class of specificity that rule loses
   inside Elementor's wrappers, so the veil paints over the breadcrumb, title
   and lede and washes them out left-to-right, strongest at the left edge.
   Restated at class specificity, the same way the homepage hero's `.wrap` is.
   Also pinned on the figure, which the prototype animates in from z-index 2. */
.phero .wrap.phero__in{position:relative;z-index:2}
.phero .phero__grid,.phero .phero__fig{position:relative;z-index:2}
.phero .crumbs{position:relative;z-index:2}

/* Page-header height.
   The header's height is set by the key visual, not by the text, so the two
   have to move together — shrinking the padding alone just crops the air
   around an image that is still 400px wide. Compact lands about 25% shorter
   than the prototype default, Tall about 15% taller. */
.phero--compact .phero__in{padding-block:clamp(14px,2vw,28px) clamp(18px,2.2vw,34px)}
.phero--compact .organfig{max-width:300px}
.phero--tall .phero__in{padding-block:clamp(28px,3.8vw,56px) clamp(32px,4.2vw,64px)}
.phero--tall .organfig{max-width:460px}

/* Hold the root font-size at the browser default.
   Astra scales the root down below its tablet breakpoint — which this theme
   sets to 1024px — so at a 886px window the root is 14.583px rather than 16px
   and every rem in the design comes out ~9% small. Measured there:
   .rail__label 10.94px against the prototype's 12px, .lede 16.34px against
   17.92px. Headings looked right only because they are sized in vw and never
   touch the root.
   Two responsive type systems were fighting: the prototype already scales
   itself with clamp() and vw, so Astra's root scaling is a second, unrelated
   shrink stacked on top. This turns that one off and leaves the design's own.
   `html:root` is one point more specific than the `html` selector Astra uses,
   so it wins wherever Astra's dynamic CSS ends up in the cascade. */
html:root{font-size:100%}

/* Push the network behind the key visual on the inner pages too.
   Same reasoning as `.hero--tubes .hero__key` above: the routes are already
   behind the liver in z-order, but the artwork is fine red hatching on
   transparency, so anything behind it shows through the gaps at full strength.
   Sized off a variable rather than a percentage of the column, because here the
   image is capped and centred inside a wider column — a percentage of the
   column would spill a pale disc out past the artwork. The cap tracks the
   organfig max-width for each header height. */
.phero__fig{--fig-halo:440px}
.phero--compact .phero__fig{--fig-halo:340px}
.phero--tall .phero__fig{--fig-halo:500px}
.phero.tubes .phero__fig::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(100%,var(--fig-halo));aspect-ratio:1/1;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.86) 38%,
    rgba(255,255,255,.55) 58%,
    rgba(255,255,255,0) 76%);
}
/* On the mist background the halo has to match the band, not white, or it
   reads as a pale disc sitting on the page. */
.phero--mist.tubes .phero__fig::before{
  background:radial-gradient(closest-side,
    var(--mist) 0%,
    color-mix(in srgb,var(--mist) 86%,transparent) 38%,
    color-mix(in srgb,var(--mist) 55%,transparent) 58%,
    transparent 76%);
}

/* People grid: restore the name weight and the gap under the portrait.
   Measured against the prototype at the same scale: the name carried about a
   third more ink per row (bold rather than the design's medium 500), and the
   space between the portrait and the name was 8px instead of 18px — the
   figure's own margin was being zeroed.
   Both prototype rules are `.orgs figure` and `.orgs b`, one class and one
   element. Elementor's frontend reset matches that exactly and loads after us,
   so it wins on order. Going through the child combinator adds an element to
   our side and settles it regardless of load order. */
/* Spacing below the portrait: measured at 5px against the prototype's 23px,
   so the figure's bottom margin is being zeroed somewhere despite the weight
   rule beside it applying. Rather than keep hunting the reset, the gap is
   moved onto the name as padding — padding is not reset by any of the
   stylesheets in play, and the figure's margin is explicitly zeroed so the two
   can never stack if that reset ever goes away.
   One value to tune: the padding-top below. */
.orgs > div > figure{margin-bottom:0}
.orgs > div > b{padding-top:18px;font-weight:500;font-size:1.0625rem;color:var(--ink)}
.orgs > div > span{margin-top:2px;font-size:.875rem;color:var(--muted);line-height:1.4}

/* Bare buttons: the hover, focus and active states.
   The reset near the top of this block strips Astra's button styling from the
   elements the design draws as plain controls — but it only covers the resting
   state. Astra still paints its own hover and focus colours, which is where the
   full-width dark blue bar across an accordion header comes from: it is a
   <button>, so it gets the theme's button hover.
   :is() carries the specificity of its most specific argument, so this lands at
   two classes and beats Astra's element-level rules whatever the load order. */
:is(.alert__x,.icon-btn,.burger,.drawer__top,.soon__x,.acc__t,.vplay,.tmn__btn,.chip,.to-top):is(:hover,:focus,:active){
  background:none;background-color:transparent;box-shadow:none;color:inherit;
}
/* Keyboard focus still has to be visible — the rule above removes Astra's
   indicator, so put back one that belongs to this design rather than leaving
   keyboard users with nothing. :focus-visible means it shows for the keyboard
   and not on a mouse click. */
:is(.acc__t,.tmn__btn,.chip,.icon-btn,.burger,.to-top):focus-visible{
  outline:2px solid var(--red);outline-offset:-2px;
}
/* The accordion's own hover: the heading stays put, the plus mark warms up.
   That is the whole interaction in the prototype. */
.acc__t:hover{color:var(--ink)}
.acc__t:hover svg{color:var(--red-dk)}

/* Desks: the single-column variant, and the dark band.
   The prototype carries both as inline styles on the markup — grid-template
   -columns on the list, and white/cyan/translucent values on every <li>. They
   belong in the stylesheet: a widget that writes inline styles cannot be
   restyled later without editing PHP, and marketing would be pasting colours
   into content. */
.desks--stack{grid-template-columns:minmax(0,1fr)}
.band--ink .desks li{border-bottom-color:rgba(255,255,255,.14)}
.band--ink .desks b{color:#fff}
.band--ink .desks a{color:var(--cyan)}
.band--ink .desks a:hover{color:#fff}
/* The rail label on the dark band: red on dark navy is the one place the
   accent fails, so the prototype switches it to cyan. */
.band--ink .rail__label{color:var(--cyan);border-top-color:var(--cyan)}
.band--ink .rail__note{color:#A9C6DC}

/* ==========================================================================
   STAGE-2 COMPONENTS
   Built for the 2026 pages that will be rebuilt as 2027: registration fees,
   abstracts, venue, media, CME, sponsorship, information A–Z. Written in the
   design's own tokens rather than invented values, so they sit beside the
   prototype's components rather than next to them.
   ========================================================================== */

/* ---------- table ----------
   Fee tables are the reason this exists: four columns, many rows, read on a
   phone by people deciding what to pay. Below 760px each row becomes its own
   stacked block with the column header repeated beside every value — a
   horizontally scrolling table hides the column you are comparing against. */
.dtable{width:100%;border-collapse:collapse;font-size:.9375rem}
.dtable caption{text-align:left;font-size:.8125rem;color:var(--muted);padding-bottom:10px}
.dtable th,.dtable td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.dtable thead th{
  font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700;
  color:var(--blue);border-bottom:2px solid var(--blue);white-space:nowrap;
}
.dtable tbody th{font-weight:500;color:var(--ink)}
.dtable tbody tr:hover{background:var(--mist)}
.dtable td{color:var(--ink-2)}
.dtable .is-key{color:var(--red);font-weight:700}
.band--mist .dtable tbody tr:hover{background:#fff}
.band--ink .dtable th,.band--ink .dtable td{border-bottom-color:rgba(255,255,255,.14)}
.band--ink .dtable thead th{color:var(--cyan);border-bottom-color:var(--cyan)}
.band--ink .dtable tbody th{color:#fff}
.band--ink .dtable td{color:#C9DDEC}
.band--ink .dtable tbody tr:hover{background:rgba(255,255,255,.04)}

@media (max-width:760px){
  .dtable,.dtable tbody,.dtable tr,.dtable td,.dtable th{display:block}
  /* caption must go block too, or it collapses to a one-word-per-line sliver
     once the table itself is display:block */
  .dtable caption{display:block;width:auto}
  .dtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dtable tr{border:1px solid var(--line);border-radius:var(--r-md);padding:4px 14px;margin-bottom:14px}
  .dtable th,.dtable td{border-bottom:0;padding:9px 0}
  .dtable tbody th{font-size:1.0625rem;padding-top:14px}
  .dtable td::before{
    content:attr(data-label);display:block;
    font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;
    color:var(--muted);margin-bottom:2px;
  }
  .dtable td+td{border-top:1px solid var(--line)}
}

/* ---------- downloads ---------- */
.dl{display:grid;gap:10px}
.dl a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);
  text-decoration:none;background:#fff;
  transition:border-color .28s var(--ease),transform .28s var(--ease-out);
}
.dl a:hover{border-color:var(--red);transform:translateX(3px)}
.dl__ico{width:26px;height:26px;color:var(--red);flex:0 0 26px}
.dl b{display:block;color:var(--ink);font-weight:500;font-size:1rem;line-height:1.3}
.dl span{display:block;font-size:.8125rem;color:var(--muted);margin-top:3px}
.dl__meta{font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.band--mist .dl a{background:#fff}
.band--ink .dl a{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.band--ink .dl b{color:#fff}
.band--ink .dl a:hover{border-color:var(--cyan)}

/* ---------- logo grid ---------- */
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:center}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.logos__i{
  display:flex;align-items:center;justify-content:center;
  padding:22px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  min-height:110px;
}
.logos a.logos__i{transition:border-color .28s var(--ease)}
.logos a.logos__i:hover{border-color:var(--red)}
.logos__i img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain}
.logos__i figcaption{font-size:.8125rem;color:var(--muted);text-align:center}
.band--ink .logos__i{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}

/* ---------- compare: two or three parallel lists ---------- */
.cmp{display:grid;gap:clamp(16px,2.4vw,28px)}
.cmp--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cmp--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.cmp--2,.cmp--3{grid-template-columns:minmax(0,1fr)}}
.cmp__c{border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(18px,2.2vw,26px);background:#fff}
.cmp__c h3{margin:0 0 4px}
.cmp__c>p{margin:0 0 14px;font-size:.875rem;color:var(--muted)}
.cmp__c ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cmp__c li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;font-size:.9375rem;color:var(--ink-2);line-height:1.45}
.cmp__c li svg{width:18px;height:18px;margin-top:2px;flex:0 0 18px}
.cmp--yes li svg{color:var(--line-4)}
.cmp--no li svg{color:var(--red)}
.cmp__c--yes{border-top:3px solid var(--line-4)}
.cmp__c--no{border-top:3px solid var(--red)}
.band--mist .cmp__c{background:#fff}
.band--ink .cmp__c{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.band--ink .cmp__c li{color:#C9DDEC}

/* ---------- numbered steps ---------- */
.steps{display:grid;gap:0;counter-reset:step}
.steps__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,26px);padding:20px 0;border-bottom:1px solid var(--line)}
.steps__i:first-child{border-top:1px solid var(--line)}
.steps__n{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  display:grid;place-items:center;
  background:var(--red);color:#fff;font-weight:700;font-size:.9375rem;line-height:1;
}
.steps__i h3{margin:0 0 5px}
.steps__i p{margin:0;font-size:.9375rem;color:var(--ink-2);line-height:1.55;max-width:70ch}
.band--ink .steps__i{border-color:rgba(255,255,255,.14)}
.band--ink .steps__i p{color:#C9DDEC}

/* ---------- A–Z index ----------
   The letter row is navigation, so letters with no entries are shown disabled
   rather than hidden: a gap where D should be reads as a broken page, and the
   row shifting as entries are added would move a link under someone's cursor. */
.azn{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(20px,2.6vw,32px)}
.azn a,.azn span{
  display:grid;place-items:center;width:34px;height:34px;border-radius:8px;
  font-size:.875rem;font-weight:700;text-decoration:none;border:1px solid var(--line);
}
.azn a{color:var(--blue);background:#fff;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.azn a:hover{background:var(--red);border-color:var(--red);color:#fff}
.azn span{color:var(--line);background:transparent;border-style:dashed}
.az__l{
  font-size:.75rem;letter-spacing:.06em;font-weight:700;color:var(--red);
  border-top:2px solid var(--red);padding-top:.55rem;margin:clamp(22px,2.6vw,34px) 0 10px;display:block;
  scroll-margin-top:110px;
}
.az__l:first-child{margin-top:0}

/* ---------- card with a link ----------
   The anchor covers the whole card, so the entire tile is the target rather
   than a four-word link at the bottom. The visible text stays the card's own
   heading unless something better is typed — a row of cards each saying
   "read more" gives a screen-reader user a list of identical links. */
.card--link{position:relative}
.card__go{
  margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:7px;
  color:var(--red);font-size:.875rem;font-weight:500;text-decoration:none;
}
.card__go svg{transition:transform .28s var(--ease-out)}
.card--link:hover .card__go svg{transform:translateX(3px)}
.card--link .card__go::after{content:"";position:absolute;inset:0} /* full-card click only for link cards; reveal cards keep the arrow as a normal inline link so the summary can still toggle closed */
.card--link:hover{border-color:var(--red)}

/* Text widget: the full-measure variant.
   .prose caps lines at 68ch by default, which is where reading speed stops
   improving and tracking back to the next line starts costing. This releases
   that cap for the short blocks where the cap leaves an odd narrow column. */
.prose--wide p{max-width:none}

/* ---------- contact panel: the two-halves band ----------
   The prototype carried these as inline styles on every element. They live
   here instead, for the same reason .desks did: a widget that writes inline
   styles can never be restyled from the stylesheet, and every editor who
   duplicates the section duplicates the styling decisions with it. */
.mship--solo{grid-template-columns:minmax(0,1fr)}

/* The child combinator is load-bearing. `.mship__l h2` is (0,1,1), which ties
   with Elementor's global kit (`.elementor-kit-N h2`) and loses on load order,
   so the heading was being painted the kit's dark blue on a dark blue panel —
   present, taking up its space, invisible. Adding the element to our side of
   the selector takes it to (0,1,2) and settles it. Same trap as `.orgs`. */
/* The competition here is our OWN .wrap h2 rule further up this file, which
   paints every heading inside a .wrap --ink. A child combinator does not fix
   that: `>` contributes nothing to specificity, so .mship__l>h2 is (0,1,1) —
   an exact tie with .wrap h2, not a win. Adding .wrap to our side makes it
   (0,2,1) and settles it outright. (The .orgs fix worked because it added a
   real element to the selector, not because of the >.)

   Every section this widget renders into is inside a .wrap — section_open()
   emits one unconditionally — so the prefix is always satisfied. */
.wrap .mship__l h2{color:#fff;margin:0 0 16px}
.wrap .mship__b h3{color:var(--blue);margin:0 0 12px}

.mship__l p{margin:14px 0 0;font-size:1rem;line-height:1.6}
.mship__l p:first-of-type{margin-top:0}
.mship__l .mship__who{margin-top:16px}
.mship__l strong{color:#fff;font-weight:600;font-size:1.0625rem}
/* :not(.btn) matters — without it this rule (0,2,0) outranks .btn--light
   (0,1,0) and paints the button label white on a white button. */
.mship__l a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.mship__l a:not(.btn):hover{color:var(--cyan)}
.mship__l .btn-row{margin-top:26px}
.wrap .mship__l .btn--light{color:var(--ink)}
.wrap .mship__l .btn--light:hover{background:var(--cyan-wash);color:var(--ink)}

.mship__r .meta{margin:0 0 18px;max-width:52ch;font-size:.9375rem;line-height:1.55}
.mship__r .btn-row{margin-top:0}
/* Second and later blocks carry the rule, so the panel never ends on one. */
.mship__b+.mship__b{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.mship__b{scroll-margin-top:110px}
.mship__img{display:block;height:auto;margin-top:16px}

/* On the dark band the outer border would vanish against the panel it frames. */
.band--ink .mship{border-color:rgba(255,255,255,.14)}

/* ---------- search modal: the results list ----------
   The design's list reset is `ul[class],ol[class]` — it deliberately only
   touches lists that carry a class, so prose lists keep their bullets. The
   search results list is marked up with a data attribute and no class, so it
   never matched, and Astra's default disc bullets and left indent came through.

   Scoped on the attribute rather than given a class, because the attribute is
   what the JS binds to: one hook, not two that can drift apart. */
.search-modal ul[data-search-results]{
  list-style:none;margin:18px 0 0;padding:0;display:grid;gap:2px;
}
.search-modal ul[data-search-results] li{margin:0;padding:0;list-style:none}
.search-modal ul[data-search-results] li::marker{content:""}
.search-modal ul[data-search-results] a{
  display:block;padding:10px 12px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink);font-size:.9375rem;line-height:1.4;
}
.search-modal ul[data-search-results] a:hover{background:var(--mist);color:var(--red)}


/* ---------- header: fitting a longer main navigation ----------
   The 2027 menu grew from four top-level items to eight. Three things went
   wrong at once, and each needs its own fix.

   1. .whenwhere had neither a flex basis nor nowrap, so it was the first thing
      the flex row squeezed — collapsing "16–19 June 2027 · London, United
      Kingdom & online" into five stacked lines. It never wraps now.
   2. Below 1400px there is genuinely not enough room for logo + dates + eight
      items + search. The date block goes first: it is the only part that is
      pure decoration, because the hero states the dates on every page and the
      footer states them again.
   3. Between 1025 and 1279px the gaps tighten rather than letting anything
      overflow the viewport. 1024 and below is the burger, which is unaffected. */
.whenwhere{flex:0 0 auto}
.whenwhere b,.whenwhere span{white-space:nowrap}

@media (max-width:1399px){
  .whenwhere{display:none}
}
@media (min-width:1025px) and (max-width:1279px){
  .hdr__in{gap:14px}
  .nav{gap:2px}
  .nav__link{font-size:.9375rem;gap:.3em}
  .hdr__tools{gap:6px}
}


/* ---------- third-party embed (EASL Embed widget) ----------
   HotelMap's hotel listing, and whatever the registration and abstract
   platforms send later. The supplier injects its own markup with its own
   styling, so this does the three things we can do from outside it:

   1. Stacking. The section and the "loading" line share one grid cell, so the
      injected listing covers the placeholder the moment it arrives — no
      JavaScript of ours, no flash of two states at once.
   2. Reserved height. The widget writes an inline min-height on .embed, which
      holds the space open while an async script loads instead of shoving the
      rest of the page down under the reader's cursor.
   3. A frame, but only once there is something to frame. :has() asks whether
      the container holds anything that is not a <script> — an unloaded or
      ad-blocked embed leaves a bare "loading" line rather than an empty white
      card that looks broken. Browsers without :has() lose the frame and keep
      the content, which is the right way round. */
.embed{position:relative;display:grid}
.embed > *{grid-area:1 / 1}
.embed__ph{
  align-self:center;justify-self:center;margin:0;text-align:center;
  color:var(--muted);font-size:.9375rem;
}
.embed__in{position:relative;z-index:1;min-width:0;max-width:100%}
.embed--frame .embed__in:has(> :not(script)){
  background:#fff;border:1px solid #9fb0c2;border-radius:var(--r-md);
  padding:clamp(12px,2vw,20px);
}
/* Spacing: lift the fallback button off the frame, and the small print off the button. */
.embed__cta{margin-top:clamp(20px,3vw,30px)}
.embed__foot{margin-top:14px}
/* Cover the embed while the vendor script loads, so its start-up flash is hidden,
   then fade to reveal it (JS adds .is-ready). */
.embed--cloak .embed__ph{
  align-self:stretch;justify-self:stretch;z-index:3;margin:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #9fb0c2;border-radius:var(--r-md);
  color:var(--muted);font-size:.9375rem;transition:opacity .35s ease;
}
.embed--cloak.is-ready .embed__ph{opacity:0;visibility:hidden;pointer-events:none}
/* "About the partnership" note text at normal paragraph size (not the small .meta). */
.mship__notetext{font-size:1rem;line-height:1.65;color:var(--ink-2);max-width:66ch}
.mship__notetext p{margin:0 0 .9em}
.mship__notetext p:last-child{margin-bottom:0}
/* Suppliers size iframes in fixed pixels; ours fill the column instead. */
.embed__in iframe{display:block;width:100%;border:0;min-height:520px}
.embed__in img{max-width:100%;height:auto}

/* Editor-only: the canvas shows what the widget is, not a live vendor script
   rewriting the DOM under Elementor's selection handles. */
.embed__note{color:var(--muted);font-size:.875rem;margin:0}
.embed__code{
  margin:10px 0 0;padding:12px 14px;background:var(--mist);
  border:1px dashed var(--line);border-radius:var(--r-md);
  font-size:.8125rem;line-height:1.5;white-space:pre-wrap;word-break:break-all;
  color:var(--muted);
}

/* ---------- site modal (EASL Embed's button) ----------
   The video lightbox's chrome, reused for a supplier's whole site: same scrim,
   same bar, same close. Three differences, all because this is a website and
   not a film — the box is as tall as the viewport allows instead of 16:9, the
   frame is white rather than black because a booking site is a document, and
   the bar carries a permanent way out. Built by assets/js/site-modal.js. */
.vmodal--site .vmodal__box{
  width:min(1240px,100%);max-height:100%;
  display:flex;flex-direction:column;
}
.vmodal--site .vmodal__frame{
  aspect-ratio:auto;flex:1 1 auto;
  height:min(78vh,900px);background:#fff;
}
.vmodal__ext{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.5em;
  padding:8px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);color:#fff;
  font-size:.875rem;font-weight:500;line-height:1;text-decoration:none;
  transition:background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease);
}
.vmodal__ext:hover{background:#fff;color:var(--ink);border-color:#fff}
.vmodal__ext:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vmodal__hint{
  margin:12px 0 0;text-align:center;
  font-size:.8125rem;color:rgba(255,255,255,.82);
}

@media (max-width:640px){
  .vmodal--site .vmodal__frame{height:calc(100dvh - 150px)}
  .vmodal__ext span{display:none}
  .vmodal__ext{padding:9px 11px}
}

/* ---------- fee tables: breaks in headings, and two price sets ----------
   A column heading is a fee period and the dates it runs between; the widget
   splits them so the dates sit under the label instead of stretching the
   column. thead th is nowrap, which the sub-line has to opt out of or a date
   range sets the column width for the whole table. */
.dtable__sub{
  display:block;margin-top:3px;white-space:normal;
  font-size:.6875rem;font-weight:500;letter-spacing:.02em;
  text-transform:none;opacity:.78;
}

/* Two price sets in one cell — member and non-member, so the two fee tables
   that used to run one after the other become one table half the length. */
.dtable__v{display:block}
.dtable__v b{font-weight:600;color:inherit}
.dtable__v i{
  display:block;font-style:normal;margin-top:1px;
  font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}

/* Shown together: the second set is quieter, so the eye reads down one price
   column rather than bouncing between two of equal weight. */
.dtable--pair .dtable__v + .dtable__v{
  margin-top:7px;padding-top:7px;border-top:1px dotted var(--line);
}
.dtable--pair .dtable__v[data-set="b"] b{font-weight:500;color:var(--muted)}

/* Filtered to one audience. Everything keys off data-set on the table, which
   the markup sets before any script runs — "all" where the filter opens on
   both, "a" where it opens on one — so a blocked or slow script leaves a
   readable table rather than an empty one.

   In a single-audience view the per-cell labels go (the filter above says
   which set is on screen), the divider goes with them, and the second set
   stops being the quiet one: whichever is showing is now the only price in
   the cell and has to read like it. */
.dtable--pair[data-set="a"] .dtable__v[data-set="b"],
.dtable--pair[data-set="b"] .dtable__v[data-set="a"]{display:none}
.dtable--pair:not([data-set="all"]) .dtable__v i{display:none}
.dtable--pair:not([data-set="all"]) .dtable__v + .dtable__v{
  margin-top:0;padding-top:0;border-top:0;
}
.dtable--pair:not([data-set="all"]) .dtable__v[data-set="b"] b{
  font-weight:600;color:inherit;
}

.feeswitch{
  display:inline-flex;gap:3px;padding:4px;margin-bottom:16px;
  background:var(--mist);border:1px solid var(--line);border-radius:999px;
}
.feeswitch__b{
  appearance:none;border:0;cursor:pointer;
  padding:9px 18px;border-radius:999px;background:transparent;color:var(--ink);
  font:inherit;font-size:.875rem;font-weight:500;line-height:1;
  transition:background .24s var(--ease),color .24s var(--ease);
}
.feeswitch__b:hover{color:var(--red)}
.feeswitch__b.is-on{background:var(--red);color:#fff}
.feeswitch__b:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.band--mist .feeswitch{background:#fff}

@media (max-width:760px){
  /* In the stacked layout every value already carries its column label, so the
     set labels have to come back — there is no switch context inside a block. */
  .dtable--pair .dtable__v{display:inline-block;margin-right:18px}
  .dtable--pair .dtable__v + .dtable__v{margin-top:0;padding-top:0;border-top:0}
  .feeswitch{display:flex}
  .feeswitch__b{flex:1 1 0;padding:10px 8px}
}

/* ---------- the bar above a fee table, and the expanded view ----------
   The filter sits left, the expand control right, both on the table's top
   edge. When there is no filter the bar still exists, because that is what
   keeps "Expand" aligned with the table rather than floating over the heading. */
.dtable-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.dtable-bar .feeswitch{margin-bottom:0}

/* The reset has to outrank the theme's own button rules, which are element
   selectors carrying a pseudo-class — `button:hover` is (0,1,1) and beats a
   bare `.dtable-expand` (0,1,0), which is how this ended up a solid blue block
   with its label painted out on hover. Three classes deep settles it, and every
   property the theme sets is named rather than assumed. Same lesson as the
   contact panel heading: a combinator adds nothing, a class does. */
.wrap .dtable-bar .dtable-expand,
.wrap .dtable-bar .dtable-expand:hover,
.wrap .dtable-bar .dtable-expand:focus,
.wrap .dtable-bar .dtable-expand:active{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background:none;background-color:transparent;background-image:none;
  border:0;border-radius:0;box-shadow:none;text-shadow:none;text-decoration:none;
  min-width:0;min-height:0;line-height:1.2;
  padding:6px 2px;margin-left:auto;
  display:inline-flex;align-items:center;gap:.5em;
  font:inherit;font-size:.8125rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--red);
  transition:color .24s var(--ease);
}
.wrap .dtable-bar .dtable-expand:hover{color:var(--ink)}
.wrap .dtable-bar .dtable-expand:hover svg{transform:scale(1.12)}
.dtable-expand svg{transition:transform .24s var(--ease-out)}
.wrap .dtable-bar .dtable-expand:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Same trap, same fix, for the filter pills: they are buttons too. */
.wrap .feeswitch .feeswitch__b,
.wrap .feeswitch .feeswitch__b:hover,
.wrap .feeswitch .feeswitch__b:focus{
  appearance:none;-webkit-appearance:none;
  border:0;box-shadow:none;text-shadow:none;min-width:0;min-height:0;
  background-color:transparent;background-image:none;
  padding:9px 18px;border-radius:999px;color:var(--ink);
  font:inherit;font-size:.875rem;font-weight:500;line-height:1;
}
.wrap .feeswitch .feeswitch__b:hover{color:var(--red)}
.wrap .feeswitch .feeswitch__b.is-on,
.wrap .feeswitch .feeswitch__b.is-on:hover{background-color:var(--red);color:#fff}

/* The panel that moves into the window. Hidden in the page, so it must not
   claim layout there: [hidden] loses to the display rules below without this. */
.tfull[hidden]{display:none}
.tfull__bar{display:flex;justify-content:center;margin-bottom:22px}
.tfull__h{
  margin:0 0 14px;color:var(--blue);font-size:1.0625rem;font-weight:600;
}
.tfull__pane + .tfull__pane .tfull__h,
.tfull__pane .dtable + .tfull__h{margin-top:40px}
.tfull[data-view="combined"] [data-pane="detailed"],
.tfull[data-view="detailed"] [data-pane="combined"]{display:none}

/* The window itself: the video lightbox's chrome again, but a sheet of paper
   rather than a frame — white, square-ish, and scrolling inside itself so the
   page behind never moves.

   The grid row has to be pinned to the viewport for max-height:100% to mean
   anything: .vmodal is a centring grid whose row is auto-sized, so a tall table
   simply made the row taller than the screen and the sheet ran off the bottom
   with nothing to scroll. minmax(0,1fr) is what gives the percentage something
   real to resolve against, and min-height:0 lets the flex child shrink so the
   overflow lands on the sheet rather than on the page. */
.vmodal--table{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.vmodal--table .vmodal__box{
  width:min(1320px,100%);max-height:100%;min-height:0;
  display:flex;flex-direction:column;
}
.vmodal--table .vmodal__bar{flex:0 0 auto}
.vmodal__sheet{
  flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#fff;border-radius:14px;
  /* Nothing at the top. A sticky element stops at the scrollport edge, and the
     scrollport includes the container's padding — so a strip of table scrolled
     up into that padding and sat in plain sight above the switch. The top space
     belongs to the sticky bar now, as its own padding, where the table cannot
     get in front of it. */
  padding:0 clamp(18px,3vw,34px) clamp(18px,3vw,34px);
  box-shadow:0 46px 130px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.09);
}

/* What stays put while the prices scroll under it: the view switch, then the
   filter, then the column headings — in that order down the top of the sheet.
   The two offsets are measured and written onto the panel by
   assets/js/table-modal.js, because they depend on how those bars wrap at the
   width the window happens to be. The fallbacks are sane if that never runs. */
.vmodal--table .tfull__bar{
  position:sticky;top:0;z-index:3;background:#fff;
  padding:clamp(18px,3vw,34px) 0 14px;margin-bottom:0;
}
.vmodal--table .dtable-bar{
  position:sticky;top:var(--tfull-t1,74px);z-index:2;background:#fff;
  padding:6px 0 16px;margin-bottom:0;
}
/* The caption sits directly under the bar's shadow, so it needs the gap the
   shadow occupies plus a little of its own. */
.vmodal__sheet .dtable caption{padding-top:10px}
/* The last band in the stack casts a short shadow, so a row disappearing under
   it reads as passing behind something rather than being cut off. */
.vmodal--table .dtable-bar::after,
.tfull[data-view="detailed"] .tfull__bar::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:10px;
  background:linear-gradient(rgba(0,32,64,.09),rgba(0,32,64,0));
  pointer-events:none;
}
.vmodal__sheet .dtable thead th{
  position:sticky;top:var(--tfull-t2,130px);z-index:1;background:#fff;
}
/* The detailed view has no filter bar, so its headings stop one bar higher. */
.tfull[data-view="detailed"] .dtable thead th{top:var(--tfull-t1,74px)}
.feeswitch--view{margin-bottom:0}

@media (max-width:760px){
  .dtable-bar{gap:10px}
  .dtable-expand{margin-left:0}
  /* Stacked rows have no thead to stick, and the sheet needs the width. */
  .vmodal__sheet{padding:0 12px 14px;border-radius:10px}
  .vmodal--table .tfull__bar{padding-top:14px}
}

/* ---------- fee tables share one geometry ----------
   Two fee tables on one page have to line up, and left alone they do not: a
   browser sizes columns from content, and the onsite figures carry
   "(732.05 incl. VAT)" where the online ones are four characters. The onsite
   table came out with narrow value columns and a wide category column; the
   online one the opposite.

   table-layout:fixed takes that decision away — the first column is set here
   and the fee periods split what is left equally, whatever is in them. Only
   the fee tables get it: the nomenclature, CME and opening-hours tables have
   their own shapes and are better off sized by their content. */
.dtable--fees{table-layout:fixed}
.dtable--fees th:first-child{width:32%}
@media (max-width:1100px){
  .dtable--fees th:first-child{width:28%}
}
@media (max-width:760px){
  /* Rows become blocks down here, so a fixed grid has nothing to hold. */
  .dtable--fees{table-layout:auto}
  .dtable--fees th:first-child{width:auto}
}

/* ---------- a price and its VAT figure ----------
   The price is the line; the bracketed figure is a footnote to it, so it is
   set small and quiet under it rather than competing on the same line. The
   set label ("EASL member") stays smaller still and stays last: the reading
   order in the cell is what you pay, what that is with tax, who it is for. */
.dtable__v b{display:block}
.dtable__note{
  display:block;font-style:normal;margin-top:1px;
  font-size:.75rem;line-height:1.3;color:var(--muted);
}
.dtable--pair .dtable__v i{margin-top:3px}

/* ---------- the expanded table's bar, and its PDF ----------
   Three columns so the view switch sits centred whatever the button beside it
   is called: an empty cell, the switch, the button. */
.tfull__bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
}
.tfull__sp{display:block}
.tfull__pdf,
.vmodal__box .tfull__pdf:hover,
.vmodal__box .tfull__pdf:focus{
  appearance:none;-webkit-appearance:none;cursor:pointer;justify-self:end;
  background:none;background-color:transparent;background-image:none;
  border:0;border-radius:0;box-shadow:none;min-width:0;min-height:0;
  display:inline-flex;align-items:center;gap:.5em;padding:6px 2px;
  font:inherit;font-size:.8125rem;font-weight:500;line-height:1.2;
  letter-spacing:.04em;text-transform:uppercase;color:var(--red);
  transition:color .24s var(--ease);
}
.vmodal__box .tfull__pdf:hover{color:var(--ink)}
.vmodal__box .tfull__pdf:hover svg{transform:translateY(2px)}
.tfull__pdf svg{transition:transform .24s var(--ease-out)}
.vmodal__box .tfull__pdf:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* The header that only exists on paper. */
.tfull__print{display:none}
.tfull__logo{height:52px;width:auto;flex:0 0 auto}
.tfull__pt{display:flex;flex-direction:column;gap:2px}
.tfull__pt b{font-size:13pt;color:var(--blue);font-weight:600}
.tfull__pt span{font-size:8.5pt;color:var(--muted)}
.tfull__meta i{font-style:normal}

@media (max-width:760px){
  .tfull__bar{grid-template-columns:1fr;justify-items:center;gap:10px}
  .tfull__sp{display:none}
  .tfull__pdf{justify-self:center}
}

/* ---------- printing the expanded table ----------
   The window is already the thing the reader wants on paper, so printing takes
   it and drops everything else: the page behind it, the scrim, the chrome, the
   controls. No library and no server — the browser's own "Save as PDF" makes a
   file whose figures are still text, which a rasterised screenshot would not be.

   Scoped to html.is-printing, set by assets/js/table-modal.js only for this
   button, so an ordinary Ctrl+P anywhere on the site is untouched. */
@media print{
  html.is-printing,html.is-printing body{background:#fff;overflow:visible !important}
  html.is-printing body > *:not(.vmodal){display:none !important}

  html.is-printing .vmodal{
    position:static !important;display:block !important;padding:0 !important;
    opacity:1 !important;visibility:visible !important;
  }
  html.is-printing .vmodal__scrim,
  html.is-printing .vmodal__bar,
  html.is-printing .tfull__bar,
  html.is-printing .dtable-bar{display:none !important}

  html.is-printing .vmodal__box{
    width:100% !important;max-height:none !important;display:block !important;
  }
  html.is-printing .vmodal__sheet{
    overflow:visible !important;max-height:none !important;
    box-shadow:none !important;border-radius:0 !important;padding:0 !important;
  }

  html.is-printing .tfull__print{
    display:flex !important;align-items:center;gap:16px;
    padding-bottom:10px;margin-bottom:16px;border-bottom:2px solid #004B87;
  }

  /* Sticky is meaningless on paper and leaves headings floating mid-page. */
  html.is-printing .dtable thead th{position:static !important}
  /* Repeat the column headings at the top of every page, and never split a row
     across two — a fee cut in half by a page break is a fee read wrong. */
  html.is-printing .dtable thead{display:table-header-group}
  html.is-printing .dtable tr{break-inside:avoid;page-break-inside:avoid}
  html.is-printing .dtable{font-size:9.5pt}
  html.is-printing .dtable__note{font-size:7.5pt}
  html.is-printing .dtable__v i{font-size:6.5pt}
  html.is-printing .tfull__h{margin-top:18pt}

  @page{margin:14mm}
}

/* ---------- figure, and the image window it opens ---------- */
.figure{margin:0}
.figure img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.figure figcaption{margin-top:10px}
.figure__z{
  position:relative;display:block;text-decoration:none;
  border-radius:var(--r-md);overflow:hidden;
}
.figure__b{
  position:absolute;right:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:.5em;
  padding:8px 14px;border-radius:999px;
  background:rgba(0,75,135,.92);color:#fff;
  font-size:.75rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  transition:background .24s var(--ease),transform .28s var(--ease-out);
}
.figure__z:hover .figure__b{background:var(--red);transform:translateY(-2px)}
.figure__z:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.vmodal--img .vmodal__box{width:min(1400px,100%);max-height:100%;display:flex;flex-direction:column}
.vmodal--img .vmodal__bar{flex:0 0 auto}
.vmodal__img{
  flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
}
.vmodal__img img{
  max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border-radius:10px;background:#fff;
  box-shadow:0 46px 130px -34px rgba(0,0,0,.85);
}

/* ---------- journey planner ---------- */
.journey{max-width:640px}
.journey__l{
  display:block;margin-bottom:8px;
  font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.journey__row{display:flex;flex-wrap:wrap;gap:10px}
.wrap .journey__i{
  flex:1 1 260px;min-width:0;margin:0;
  padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;color:var(--ink);font:inherit;font-size:1rem;
  transition:border-color .24s var(--ease);
}
.wrap .journey__i:focus{border-color:var(--blue);outline:2px solid rgba(0,75,135,.18);outline-offset:0}
.journey__row .btn{flex:0 0 auto}
.journey__note{margin-top:10px;max-width:60ch}

/* ---------- about: picture beside the copy ----------
   Two columns inside the rail's content column, so the section keeps the page's
   spine rather than breaking out of it. The picture is slightly the narrower of
   the two: the text is what the reader came for.

   Below 900px it stacks — at that width two columns leave the copy at about
   thirty characters a line, which is a newspaper, not a paragraph. */
.abx{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(20px,3vw,44px);align-items:start;
}
@media (max-width:900px){
  .abx{grid-template-columns:minmax(0,1fr);gap:26px}
}
/* The stock frame is the film's own 2.35:1. A photograph of a building needs
   its sky and its feet. */
.vplay--wide{aspect-ratio:16/9}
.vplay--box{aspect-ratio:4/3}
@media (max-width:640px){
  .vplay--box{aspect-ratio:3/2}
}

/* ==========================================================================
   PASTED DOCUMENTS THAT ARE WIDER THAN THE WINDOW
   17 September 2026

   The terms and conditions came across from the old site carrying a wide
   definitions layout. Nothing in the page limited it, so the content box grew
   past the window; because the box is centred, it then overflowed BOTH edges
   and the page lost the first characters of every line as well as the last.
   The cookie policy does the same thing more mildly — the mobile audit put it
   at 400px over at 360px wide, the only page on the site that scrolled
   sideways.

   These documents are drafted elsewhere and pasted in, so the markup is not
   ours to control and the containment has to live here: whatever arrives, it
   stays inside its column. Applies at every width, not just on phones — the
   terms page proved the desktop needs it too.
   ========================================================================== */

/* A table too wide to fit becomes a table that scrolls, inside its own box,
   rather than one that drags the page along with it. .dtable is exempt: it is
   ours, it stacks into cards on small screens, and it must not scroll. */
.legal table:not(.dtable),
.prose table:not(.dtable){
  display:block;
  max-width:100%;
  overflow-x:auto;
}

/* Everything else a pasted document can be too wide for: an image with a width
   attribute from another theme, a code or pre block, an embed, and the long
   unbroken strings — URLs, email addresses, reference numbers — that legal
   text is full of. */
.legal img,.prose img,
.legal iframe,.prose iframe,
.legal video,.prose video{max-width:100%;height:auto}

.legal pre,.prose pre{max-width:100%; overflow-x:auto; white-space:pre-wrap}

.legal,.prose{overflow-wrap:break-word}

/* The backstop. If something still finds a way to be too wide, it is clipped
   at the column rather than allowed to widen the page — overflow-x:clip rather
   than hidden, because hidden would make this a scroll container and break any
   sticky positioning inside it. */
.legal{overflow-x:clip}


/* ---------- the figures row ----------
   "16–19 June" is half again as long as the other three figures, so at the
   drawn size it wrapped, which pushed its label below the other three and
   broke the line they read along.

   Two changes, both small. The cell is now a grid with the label on its own
   bottom row, so every label sits on the same line whatever the figure above
   it does — that holds for any future value, not just this one. And the figure
   caps a little smaller (2.7rem rather than 3.1rem, about a tenth) with a
   little less padding beside it, which is what it takes for the longest of the
   four to stay on one line. Measured: it needed 45px to fit a 258px cell and
   was being drawn at 50px. */
.nums>div{display:grid; grid-template-rows:1fr auto; padding-inline:clamp(14px,1.5vw,20px)}
.nums b{align-self:start; font-size:clamp(1.9rem,3.4vw,2.7rem)}
.nums span{margin-top:14px}

/* ---------- accordion rows carrying a subspecialty colour ----------
   The nine EASL track colours already live here as --line-1..9 and are used
   elsewhere as accents rather than as type — the quick-link icons, the rail
   underline. This keeps that habit, with an opt-out.

   Measured against white, as the accordion title is drawn (17px, weight 500,
   which WCAG counts as normal text and asks 4.5:1 of):

     General Hepatology      #004B87   8.91:1   passes
     Liver Tumours           #DB0B5B   4.99:1   passes
     Cirrhosis               #826B6A   4.93:1   passes
     Public Health           #508541   4.40:1   just under
     Metabolism              #1A9586   3.69:1   under
     Liver Transplantation   #A76EEE   3.44:1   under
     Immune-mediated         #FF6720   2.91:1   under
     Experimental            #5BC2E7   2.04:1   well under
     Viral Hepatitis         #FFBF3F   1.64:1   barely visible

   So "mark" is the default: a short bar in the track colour beside a title
   that stays in ink. The colour identifies the track just as well, and nobody
   has to read yellow on white. "text" is one setting away for anyone who wants
   to see it the other way. */
.acc__i[data-track="1"]{--track:var(--line-1)}
.acc__i[data-track="2"]{--track:var(--line-2)}
.acc__i[data-track="3"]{--track:var(--line-3)}
.acc__i[data-track="4"]{--track:var(--line-4)}
.acc__i[data-track="5"]{--track:var(--line-5)}
.acc__i[data-track="6"]{--track:var(--line-6)}
.acc__i[data-track="7"]{--track:var(--line-7)}
.acc__i[data-track="8"]{--track:var(--line-8)}
.acc__i[data-track="9"]{--track:var(--line-9)}
.acc__i[data-track="r"]{--track:var(--red)}  /* Nurses & Allied Health Professionals — brand red accent */

/* the default: a marker, title untouched */
.acc[data-track-style="mark"] .acc__i[data-track] .acc__t{padding-left:20px; position:relative}
.acc[data-track-style="mark"] .acc__i[data-track] .acc__t::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:1.15em; border-radius:3px; background:var(--track);
}

/* the other way, as asked for */
.acc[data-track-style="text"] .acc__i[data-track] .acc__t{color:var(--track)}


/* ------------------------------------------------------------------
   THE JOURNEY MARK — Haris's graphic, used as the file it is

   Small on purpose, and centred in its column rather than pushed to the
   column's right edge, which left it hard against the side of the band.
   The width is set inline on the element, so a stale stylesheet cannot
   let it draw at the .mediamark default of 430px.

   The aircraft in that file is white, so it only appears against a dark
   band. Do not put this mark on a light one.
   ------------------------------------------------------------------ */
.mediamark--wake{
  margin-inline:auto;   /* centred in its column */
  display:block;
  height:auto;
}


/* ------------------------------------------------------------------
   TEXT BANNER — the optional image under a text section's buttons

   The column less 100px. Settled by looking at it rather than by rule:
   68ch was too small, flush to the column was too big and sat wider than
   everything above it, 40px in was still close enough to the edge to
   read as full width. This sits inside the section instead of defining
   its edge, and still lands wider than the paragraph above.

   The widget's Maximum width field narrows it further where a section
   wants that.
   ------------------------------------------------------------------ */
.textbanner{max-width:calc(100% - 100px)}
.textbanner img{
  display:block; width:100%; height:auto;
  border-radius:10px;
  box-shadow:0 1px 2px rgba(11,46,79,.06), 0 6px 18px rgba(11,46,79,.08);
}
.textbanner a{display:block; border-radius:10px}
.textbanner a:focus-visible{outline:3px solid var(--cyan); outline-offset:3px}
/* it is an advert, so it should feel clickable */
.textbanner a img{transition:transform .25s ease, box-shadow .25s ease}
.textbanner a:hover img{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(11,46,79,.08), 0 12px 28px rgba(11,46,79,.14);
}
@media (prefers-reduced-motion:reduce){
  .textbanner a img,.textbanner a:hover img{transition:none; transform:none}
}


/* ------------------------------------------------------------------
   THE WAITING BUTTON

   A hero button with nothing to link to yet. It is deliberately NOT
   the solid red one: red says press me, and pressing this achieves
   nothing but a scroll. It is not disabled either — a greyed-out
   control invites a second click to check, and gives no reason.

   So it reads as a statement of fact that happens to be clickable.
   Outlined, in the cyan the rail labels use, with a clock rather than
   the dot the live buttons carry, so the two are distinguishable at a
   glance in a screenshot.
   ------------------------------------------------------------------ */
.btn--wait{
  background:transparent;
  color:var(--cyan);
  border:1.5px solid rgba(91,194,231,.5);
  display:inline-flex; align-items:center; gap:9px;
  cursor:pointer;
}
.btn--wait:hover{
  border-color:var(--cyan);
  background:rgba(91,194,231,.08);
  color:var(--cyan);
}
.btn--wait .btn__clock{display:inline-flex; flex:0 0 auto}
.btn--wait .btn__clock svg{display:block}
/* the hero is dark, so on a light band it needs the blue instead */
.band--paper .btn--wait,.band--mist .btn--wait{
  color:var(--blue); border-color:rgba(0,75,135,.35);
}
.band--paper .btn--wait:hover,.band--mist .btn--wait:hover{
  border-color:var(--blue); background:rgba(0,75,135,.06); color:var(--blue);
}


/* ------------------------------------------------------------------
   NOTICE — a bordered callout for one important line

   A left accent rather than a full frame, and the palest wash of the
   tone rather than a solid fill, so it reads as important without
   shouting — the site has one red button per page and this must not
   compete with it. Held to the reading measure so it lines up with the
   prose above and below.
   ------------------------------------------------------------------ */
.notice{
  display:flex; gap:13px; align-items:flex-start;
  max-width:68ch;
  padding:15px 18px;
  border:1px solid; border-left-width:4px; border-radius:8px;
}
.notice__i{flex:0 0 auto; display:inline-flex; margin-top:1px}
.notice__i svg{display:block}
.notice__t{margin:0; font-size:1.0625rem; line-height:1.55}
.notice__t a{color:inherit; text-decoration:underline; text-underline-offset:2px}

.notice--important{
  border-color:rgba(237,51,65,.28); border-left-color:var(--red, #ED3341);
  background:rgba(237,51,65,.05);
}
.notice--important .notice__i{color:var(--red, #ED3341)}

.notice--info{
  border-color:rgba(91,194,231,.4); border-left-color:var(--cyan, #5BC2E7);
  background:rgba(91,194,231,.08);
}
.notice--info .notice__i{color:var(--blue, #004B87)}

.notice--positive{
  border-color:rgba(80,133,65,.32); border-left-color:#508541;
  background:rgba(80,133,65,.06);
}
.notice--positive .notice__i{color:#508541}

/* on a dark band the wash and text invert */
.band--ink .notice__t{color:#eaf3fa}
.band--ink .notice--important{background:rgba(237,51,65,.14); border-color:rgba(237,51,65,.5)}


/* ------------------------------------------------------------------
   SUB-PAGE HEADER VEIL

   The inner-page header carries `.tubes`, which by default paints the
   flat left-to-right wipe (`.tubes::after`) that stops dead at the
   halfway mark. That leaves a heading exposed the moment it wraps or
   the subheader reaches past the middle — it ends up sitting on the
   tube lines at full strength.

   So the header gets the homepage's veil instead: a soft radial pool
   anchored at the top-left, where the breadcrumb, title and subheader
   sit, feathering out to the right and downward, with a gentle
   top-and-bottom fade under it. The lines re-emerge past the text
   rather than being cut off at a vertical line. Higher specificity
   than `.tubes::after`, so this wins wherever both could apply.

   The widget's "Readability veil" control adds .phero--noveil to opt a
   page out.
   ------------------------------------------------------------------ */
.phero.tubes::after{
  background:
    radial-gradient(115% 135% at 4% 38%,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.74) 42%,
      rgba(255,255,255,0)  74%),
    linear-gradient(180deg,
      rgba(255,255,255,.5) 0%,
      rgba(255,255,255,0) 34%,
      rgba(255,255,255,.55) 100%);
}
.phero.tubes.phero--noveil::after{content:none}

/* On a mist header the pool is tinted the same mist so it doesn't wash
   to pure white and leave a bright patch on a tinted band. */
.phero--mist.tubes::after{
  background:
    radial-gradient(115% 135% at 4% 38%,
      rgba(238,243,248,.97) 0%,
      rgba(238,243,248,.76) 42%,
      rgba(238,243,248,0)  74%),
    linear-gradient(180deg,
      rgba(238,243,248,.55) 0%,
      rgba(238,243,248,0) 34%,
      rgba(238,243,248,.6) 100%);
}

/* Narrow screens: the text is full width, so a top-down fade protects
   it better than a pool anchored to one corner. */
@media (max-width:760px){
  .phero.tubes::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.55) 46%,
      rgba(255,255,255,.9) 100%);
  }
  .phero--mist.tubes::after{
    background:linear-gradient(180deg,
      rgba(238,243,248,.93) 0%,
      rgba(238,243,248,.6) 46%,
      rgba(238,243,248,.92) 100%);
  }
}




/* ------------------------------------------------------------------
   COMPARE CARDS — offer panels that read as cards and invite a click

   The columns were already bordered panels; this lifts them on hover
   and gives the photo the same rounded corners as the card, so the
   image reads as part of the card rather than a rectangle dropped on
   it. The guide link at the foot jumps to the matching fees table.
   ------------------------------------------------------------------ */
.cmp__c{
  display:flex; flex-direction:column;
  transition:transform .25s var(--ease-out,ease), box-shadow .25s var(--ease-out,ease), border-color .25s;
}
.cmp__c:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 6px rgba(11,46,79,.06), 0 16px 40px rgba(11,46,79,.13);
  border-color:transparent;
}
.cmp__img{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:14px !important; margin-bottom:18px;
}
/* the guide link sits at the foot, pinned to the bottom so the two
   cards' links line up even when the lists differ in length */
.cmp__cta{
  margin-top:auto; padding-top:16px;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.9375rem; text-decoration:none;
  color:var(--blue);
}
.cmp__cta svg{transition:transform .2s var(--ease-out,ease)}
.cmp__c:hover .cmp__cta svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .cmp__c,.cmp__cta svg{transition:none}
  .cmp__c:hover{transform:none}
}

/* the "meet the team" image folded into the partner band */
.mship__team{margin-top:clamp(22px,3vw,34px); text-align:center}
.mship__team img{
  display:block; width:100%; height:auto; margin-inline:auto;
  border-radius:14px;
  box-shadow:0 2px 6px rgba(11,46,79,.06), 0 12px 32px rgba(11,46,79,.12);
}


/* ------------------------------------------------------------------
   PARTNER SHOWCASE — contact panel beside the team image

   The dark contact panel and the team image sit as two equal columns,
   the panel's content centred vertically so it doesn't strand at the
   top beside a tall image. The block text ("About the partnership")
   runs in a calm row beneath both. The image is shown whole, never
   cropped — the collage carries names at its edges.
   ------------------------------------------------------------------ */
.mship--showcase{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,28px); align-items:stretch;
}
.mship--showcase .mship__l{
  height:100%; display:flex; flex-direction:column; justify-content:center;
  border-radius:var(--r-md);
}
.mship__showimg{border-radius:var(--r-md); overflow:hidden; align-self:center}
.mship__showimg img{display:block; width:100%; height:auto}
/* Team image opens in the image lightbox on click. */
.mship__zoom{display:block; cursor:zoom-in}
.mship__zoom img{display:block; width:100%; height:auto}
.mship__note{
  margin-top:clamp(18px,2.4vw,28px);
  max-width:72ch;
}
.mship__noteblock + .mship__noteblock{margin-top:16px}
.mship__note h3{margin:0 0 6px}
@media (max-width:760px){
  .mship--showcase{grid-template-columns:minmax(0,1fr)}
}

/* Cards: click-to-expand mode (easl-cards "Expand text on click").
   Native <details>, so it works and is accessible with no JS. Image + heading
   are the summary; the text slides open on click. */
.card--reveal{padding:0;cursor:pointer}
.card--reveal>summary{list-style:none;display:block;outline:none}
.card--reveal>summary::-webkit-details-marker{display:none}
.card--reveal>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.card--reveal .card__head{display:flex;align-items:center;gap:12px;padding:16px 20px}
.card--reveal .card__head .tag{margin-right:auto}
.card--reveal .card__head h3{flex:1;margin:0}
.card--reveal .card__chev{flex:none;color:var(--blue);transition:transform .3s var(--ease-out)}
.card--reveal[open] .card__chev{transform:rotate(180deg)}
.card--reveal .card__b{padding:0 20px 20px;animation:easl-reveal .28s var(--ease-out)}
.card--reveal:hover{border-color:var(--blue)}
@keyframes easl-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.card--reveal .card__b{animation:none}.card--reveal .card__chev{transition:none}}

/* In burger mode the header has empty space — show the date/location there
   (hidden on true mobile where it would crowd). */
@media (min-width:700px) and (max-width:1024px){
  .whenwhere{display:flex!important;margin-inline:auto;border-left:0;padding-left:0}
}

/* Homepage hero tube-network reads tiny on tall phone screens because the
   900x520 viewBox letterboxes into a short band. Scale it up (growing toward
   the liver, lower-right) so it keeps the desktop concept at phone size. The
   hero clips the overflow. tubenet bigger on mobile */
@media (max-width:900px){
  .hero--tubes .tubenet{transform:translateY(7%) scale(1.55);transform-origin:80% 62%}
}
@media (max-width:560px){
  .hero--tubes .tubenet{transform:translateY(9%) scale(1.85);transform-origin:82% 60%}
}

/* Same mobile treatment as the homepage hero, for the sub-page headers: the
   tube network letterboxes small on phones, so scale it up (toward the right,
   away from the left-aligned title). The .tubes wrapper clips the overflow.
   sub-page hero tubes bigger on mobile */
@media (max-width:900px){
  .phero.tubes .tubenet{transform:scale(1.4);transform-origin:80% 52%}
}
@media (max-width:560px){
  .phero.tubes .tubenet{transform:scale(1.65);transform-origin:82% 52%}
}

/* ---------- optional third menu level (backup) ----------
   Renders only when the WP menu actually has sub-sub items; the design ships
   with two levels. Header mega: parent becomes a small heading with its
   children listed under it. Drawer: children indented under their parent. */
.mega a.mega__grp{font-weight:600;margin-bottom:1px}
.mega .mega__sub{display:flex;flex-direction:column;gap:1px;margin:1px 0 9px;padding-left:12px;border-left:2px solid var(--line)}
.mega .mega__sub a{padding:5px 0;font-size:.9rem;color:var(--muted)}
.mega .mega__sub a:hover{color:var(--blue)}
.drawer__sub3{display:flex;flex-direction:column;margin:1px 0 5px;padding-left:14px;border-left:2px solid var(--line)}
.drawer__sub3 a{font-size:.92rem;color:var(--muted);padding:7px 0}
.drawer__sub3 a:hover{color:var(--blue)}

/* ---------- image-forward card styles (EASL Cards "Reveal style") ----------
   hover / overlay / overlay_hover fill the card with the image and lay the
   heading + text over it. Fixed height, so hovering never reflows the grid. */
.card--img{position:relative;min-height:clamp(300px,32vw,372px);color:#fff;border:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));isolation:isolate}
.card--img .card__fig--fill{position:absolute;inset:0;aspect-ratio:auto;background:none;z-index:0}
.card--img .card__fig--fill img{width:100%;height:100%;object-fit:cover}
.card--img .card__panel{position:relative;z-index:2;margin-top:auto;width:100%;
  padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.card--img .card__panel h3{color:#fff;font-size:1.125rem;line-height:1.25;margin:0}
.card--img .card__panel .tag{align-self:flex-start;background:rgba(255,255,255,.16);color:#fff}
.card--img .card__panel p{color:rgba(255,255,255,.9);font-size:.875rem;line-height:1.5;margin:0}
.card--img .card__go{color:#fff}
.card--img .card__panel-body{display:flex;flex-direction:column;gap:8px}

/* overlay: permanent dark gradient, heading + text always shown */
.card--overlay::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,29,54,.9) 4%,rgba(0,29,54,.55) 34%,rgba(0,29,54,0) 66%);
  transition:background .9s var(--ease)}

/* overlay_hover: light until hover; text fades in on hover / focus / tap */
.card--onhover::after{background:linear-gradient(to top,rgba(0,29,54,.72) 0%,rgba(0,29,54,.15) 40%,rgba(0,29,54,0) 62%)}
.card--onhover:hover::after,.card--onhover:focus-within::after{background:linear-gradient(to top,rgba(0,29,54,.95) 12%,rgba(0,29,54,.80) 52%,rgba(0,29,54,.5) 92%)}
/* keep the overlaid text crisp so the scrim can stay light */
.card--overlay .card__panel h3,.card--overlay .card__panel p{text-shadow:0 1px 12px rgba(0,18,38,.55)}
.card--onhover .card__reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(8px);
  transition:grid-template-rows 1.15s var(--ease-out),opacity .95s var(--ease),transform 1.05s var(--ease-out)}
.card--onhover:hover .card__reveal,.card--onhover:focus-within .card__reveal{grid-template-rows:1fr;opacity:1;transform:none}
.card--onhover .card__reveal>.card__panel-body{overflow:hidden;min-height:0}

/* hover: image fills; a white panel holds the heading and opens its text on hover */
.card--slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,29,54,.45),rgba(0,29,54,0) 55%)}
.card--slide .card__panel{background:#fff;color:var(--ink);border-radius:var(--r-md);
  margin:auto 8px 8px;box-shadow:0 6px 22px rgba(0,40,80,.18)}
.card--slide .card__panel h3{color:var(--blue)}
.card--slide .card__panel .tag{background:var(--red-wash);color:var(--red-dk)}
.card--slide .card__panel p{color:var(--muted)}
.card--slide .card__go{color:var(--red)}
.card--slide .card__reveal{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .95s var(--ease-out),opacity .7s var(--ease)}
.card--slide:hover .card__reveal,.card--slide:focus-within .card__reveal{grid-template-rows:1fr;opacity:1;margin-top:6px}
.card--slide .card__reveal>.card__panel-body{overflow:hidden;min-height:0}

/* the whole-card link sits above the scrim so the card stays clickable */
.card--img.card--link .card__go::after{z-index:3}

/* ---------- "Coming soon" section note (EASL section trait) ---------- */
.soon-note{display:flex;flex-direction:column;gap:12px;padding:6px 0 2px;max-width:60ch}
.soon-note__badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--red-dk);background:var(--red-wash);padding:.45em .85em;border-radius:2px}
.soon-note__badge i{width:7px;height:7px;border-radius:50%;background:var(--red);
  animation:soonPulse 1.9s var(--ease) infinite}
.soon-note p{font-size:1.125rem;color:var(--muted);line-height:1.55;margin:0;max-width:52ch}
@keyframes soonPulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.soon-note__badge i{animation:none}}

/* ---------- expandable-card (click reveal) layouts ---------- */
/* Stop a closed card from stretching to the height of an open sibling in the
   same grid row — that empty tall box read as half-open. Applies to every
   reveal grid, including ones built before the layout options existed. */
.grid:has(> .card--reveal){align-items:start}
/* .card has height:100%, which would still force a closed card to fill an
   open sibling's tall row; let reveal cards size to their own content. */
.grid:has(> .card--reveal) > .card--reveal{height:auto;align-self:start}

/* LIST — one full-width bordered row per session */
.grid.rvl--list{grid-template-columns:1fr;gap:14px}

/* DIVIDER — minimal rows separated by hairlines (accordion-like), no card frame */
.grid.rvl--divider{grid-template-columns:1fr;gap:0}
.rvl--divider>.card--reveal{border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.rvl--divider>.card--reveal:last-child{border-bottom:1px solid var(--line)}
.rvl--divider>.card--reveal:hover{border-color:var(--blue)}
.rvl--divider .card__head{padding:18px 4px}
.rvl--divider .card__b{padding:0 4px 20px}

/* TINTED — cards whose header sits on a soft blue wash, for stronger grouping */
.rvl--tinted>.card--reveal .card__head{background:var(--cyan-wash)}
.rvl--tinted>.card--reveal[open] .card__head{border-bottom:1px solid var(--line)}

/* ---------- prose lists ----------
   Prose lists (easl-text WYSIWYG) came through with no left indent, so the
   bullets sat flush with the paragraph above. Give them a clear indent so the
   list reads as a nested block. */
.prose ul,.prose ol{padding-left:1.6em;margin:0 0 1.05em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{font-size:1.125rem;line-height:1.62;margin-bottom:.4em}
.prose li:last-child{margin-bottom:0}

/* ---------- accordion answer lists ----------
   The panel clips overflow (for the 0fr→1fr open animation), so a list with no
   left padding had its outside bullet markers cut off the left edge — they
   looked like they'd vanished. Indent the list and keep the markers. */
.acc__p ul,.acc__p ol{padding-left:1.6em;margin:0 0 20px;list-style-position:outside}
.acc__p ul{list-style:disc}
.acc__p ol{list-style:decimal}
.acc__p li{font-size:.9375rem;line-height:1.55;margin-bottom:.4em}
.acc__p li:last-child{margin-bottom:0}
/* List alignment in accordions. Numbers line up with the paragraph's left
   edge; a bullet list placed straight after a numbered list reads as its
   sub-list (bullets level with the numbered item's text); real nested lists
   (bullets indented inside a numbered item in the editor) get the same step. */
.acc__p ol{padding-left:1.35em}
.acc__p ol + ul{padding-left:2.7em}
.acc__p li > ul,.acc__p li > ol{margin:.5em 0 .2em;padding-left:1.35em}
.acc__p li > ul{list-style:disc}

/* ---------- heading icon (optional, section trait) ---------- */
.head-row h2:has(.head-ico){display:inline-flex;align-items:center;gap:.36em}
.head-ico{flex:none;width:.92em;height:.92em;color:currentColor;line-height:0;transform:translateY(-.06em)}
.head-ico--red{color:var(--red)}
.head-ico svg{width:100%;height:100%;display:block}
@media(max-width:480px){.ftr__brand img,.ftr__brand svg{height:84px}}

/* ---- EASL Gallery (photo grid + lightbox) ---- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gal__intro{margin:0 0 1.1rem;max-width:70ch}
@media(min-width:640px){
  .gal--3{grid-template-columns:repeat(3,1fr)}
  .gal--4{grid-template-columns:repeat(4,1fr)}
}
.gal__item{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#eef2f6;cursor:zoom-in}
.gal__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.gal__item:hover img,.gal__item:focus-visible img{transform:scale(1.06)}
.gal__item::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);pointer-events:none}
.gal__item:focus-visible{outline:2px solid var(--blue,#004B87);outline-offset:2px}

/* ---- Partner logo: small, floated to the right of the text ---- */
.partner-logo{float:right;width:150px;max-width:38%;height:auto;margin:.15rem 0 1rem 1.6rem}
@media(max-width:560px){.partner-logo{float:none;display:block;margin:0 0 1rem}}

/* ---- Lightbox gallery nav ---- */
.vmodal__count{margin-left:auto;margin-right:12px;font-size:13px;opacity:.7;font-variant-numeric:tabular-nums}
.vmodal--img .vmodal__img{position:relative}
.vmodal__nav{position:absolute;top:50%;transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;z-index:3}
.vmodal__nav:hover{background:rgba(0,0,0,.7)}
.vmodal__nav--prev{left:10px}
.vmodal__nav--next{right:10px}
.vmodal--gallery .vmodal__nav{display:inline-flex}

/* ---- Partner: two columns, text left, logo card right ---- */
.partner-2col{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:720px){.partner-2col{grid-template-columns:1.7fr 1fr;align-items:start;gap:32px}}
.partner-2col__text > :first-child{margin-top:0}
.partner-2col__logo{border:1px solid var(--line,#e2e8f0);border-radius:16px;padding:26px;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.partner-2col__logo img{width:100%;max-width:280px;height:auto;display:block}

/* ============ Programme at a glance ============ */
html:has(.pg){scrollbar-gutter:stable}
.pg{--pg-line:#d9e4ec;--pg-line2:#eef3f7;--pg-mut:#5E82A3;--pg-navy:#002D5A;--pg-blue:#004B87;--pg-h:40px;width:100%}
.pg__intro{margin:0 0 1rem;max-width:64ch;color:var(--pg-mut)}
/* toolbar */
.pg__tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.pg__spacer{flex:1 1 auto}
.pg__search{display:flex;align-items:center;gap:8px;height:var(--pg-h);flex:1 1 220px;min-width:180px;max-width:340px;border:1px solid var(--pg-line);padding:0 12px;background:#f6f9fc;color:var(--pg-mut)}
.pg__search input{border:0;background:none;width:100%;font-size:14px;color:var(--pg-navy)}
.pg__search input:focus{outline:none;box-shadow:none}
.pg__search:focus-within{border-color:var(--pg-blue);box-shadow:0 0 0 3px rgba(0,75,135,.12)}
.pg__btn,.pg__filterbtn{height:var(--pg-h);border:1px solid var(--pg-line);background:#fff;padding:0 13px;font-size:13.5px;font-weight:600;color:var(--pg-navy);cursor:pointer;display:inline-flex;gap:7px;align-items:center;border-radius:0}
.pg__btn:hover,.pg__filterbtn:hover{border-color:var(--pg-blue)}
.pg__btn--solid{background:var(--pg-navy);color:#fff;border-color:var(--pg-navy)}
.pg__btn[disabled]{opacity:.5;cursor:default}
/* track filter */
.pg__filter{position:relative}
.pg__filterbtn{min-width:130px;justify-content:space-between}
.pg__filter.is-open .pg__filterbtn{border-color:var(--pg-blue)}
.pg__menu{position:absolute;z-index:40;left:0;top:calc(100% + 5px);min-width:210px;max-height:300px;overflow:auto;background:#fff;border:1px solid var(--pg-line);box-shadow:0 12px 30px rgba(0,0,0,.14);padding:5px}
.pg__opt{display:flex;align-items:center;gap:9px;padding:7px 9px;font-size:13.5px;color:var(--pg-navy);cursor:pointer}
.pg__opt:hover{background:#f2f6fa}
.pg__opt input{accent-color:var(--pg-blue);width:15px;height:15px}
.pg__dot{width:11px;height:11px;flex:0 0 auto}
/* view icons */
.pg__viewicons{display:inline-flex;border:1px solid var(--pg-line);height:var(--pg-h)}
.pg__viewicons button{border:0;background:#fff;color:var(--pg-navy);cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:0 13px;font-size:13.5px;font-weight:600}
.pg__viewicons button svg{width:16px;height:16px;display:block;flex:0 0 auto}
.pg__viewicons button+button{border-left:1px solid var(--pg-line)}
.pg__viewicons button.is-sel{background:var(--pg-navy);color:#fff}
/* day selector */
.pg__days{display:inline-flex;flex-wrap:wrap;border:1px solid var(--pg-line);margin:0 0 10px}
.pg__days button{height:34px;border:0;background:#fff;padding:0 15px;font-size:12.5px;font-weight:700;color:var(--pg-navy);cursor:pointer}
.pg__days button+button{border-left:1px solid var(--pg-line)}
.pg__days button:hover:not(.is-sel){background:var(--pg-blue);color:#fff}
.pg__days button.is-sel{background:var(--pg-blue);color:#fff}
/* views */
.pg__view{display:none}
.pg__view.is-on{display:block}
/* grid */
.pg__stage{position:relative;overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--pg-line);background:#fff;scrollbar-color:var(--pg-blue) #eef3f7}
.pg__stage::-webkit-scrollbar{height:12px}
.pg__stage::-webkit-scrollbar-track{background:#eef3f7}
.pg__stage::-webkit-scrollbar-thumb{background:var(--pg-blue);border:3px solid #eef3f7}
.pg__stage::-webkit-scrollbar-thumb:hover{background:var(--pg-navy)}
/* synced top scrollbar */
.pg__xscroll{overflow-x:auto;overflow-y:hidden;height:14px;margin-bottom:5px;border:1px solid var(--pg-line);background:#eef3f7;scrollbar-color:var(--pg-blue) #eef3f7}
.pg__xscroll > div{height:1px}
.pg__xscroll::-webkit-scrollbar{height:12px}
.pg__xscroll::-webkit-scrollbar-track{background:#eef3f7}
.pg__xscroll::-webkit-scrollbar-thumb{background:var(--pg-blue);border:3px solid #eef3f7}
.pg__xscroll::-webkit-scrollbar-thumb:hover{background:var(--pg-navy)}
.pg__grid{display:grid;position:relative;grid-template-columns:54px repeat(var(--pg-days,4),minmax(var(--pg-colmin,200px),1fr))}
.pg__grid--one{grid-template-columns:54px minmax(0,1fr);min-width:360px}
.pg__head{position:sticky;top:0;z-index:8;background:var(--pg-blue);color:#fff;font-weight:700;font-size:13px;padding:9px 8px;text-align:center;border-left:1px solid rgba(255,255,255,.14)}
.pg__head--corner{border-left:0}
.pg__col{position:relative;border-left:1px solid var(--pg-line);overflow:hidden}
.pg__col--time{border-left:0}
.pg__z{position:absolute;left:0;right:0;background:#E7F1FA;z-index:0}
.pg__tick{position:absolute;left:0;right:0;border-top:1px solid var(--pg-line2);z-index:1}
.pg__tick--h{border-top-color:#cbd8e5}
.pg__tlabel{position:absolute;left:6px;font-size:11px;color:var(--pg-mut);transform:translateY(-6px);z-index:2;font-variant-numeric:tabular-nums}
.pg__blk{position:absolute;z-index:2;padding:4px 6px 3px;font-size:11px;line-height:1.22;overflow:hidden;border-radius:0}
.pg__blk .pg__t{font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pg__blk .pg__h{display:block;opacity:.85;font-size:10px;margin-top:2px;font-variant-numeric:tabular-nums}
.pg__blk:hover{z-index:9;box-shadow:0 3px 12px rgba(0,0,0,.28);outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}
.pg__blk.is-dim{opacity:.12}
.pg__note{margin:12px 2px 0;font-size:12px;color:var(--pg-mut)}
/* closing CTA */
.pg__cta{margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--pg-line);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pg__cta p{margin:0;color:var(--pg-mut);font-size:14px}
/* agenda */
.pg__agenda{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.pg__agenda{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pg__agenda{grid-template-columns:1fr}}
.pg__agday{position:sticky;top:0;z-index:5;margin:0}
.pg__aglist{list-style:none;margin:0;padding:0;border:1px solid var(--pg-line);border-top:0}
.pg__ag{display:flex;gap:9px;align-items:stretch;padding:9px 10px;border-top:1px solid var(--pg-line2)}
.pg__ag:first-child{border-top:0}
.pg__ag.is-dim{display:none}
.pg__agtime{flex:0 0 46px;font-size:11.5px;font-weight:700;color:var(--pg-navy);font-variant-numeric:tabular-nums;line-height:1.25}
.pg__agtime i{display:block;font-style:normal;font-weight:400;color:var(--pg-mut)}
.pg__agbar{flex:0 0 4px;align-self:stretch}
.pg__agttl{display:block;font-size:12.5px;font-weight:600;color:var(--pg-navy);line-height:1.2}
.pg__agcat{display:block;font-size:10.5px;color:var(--pg-mut);margin-top:2px}
.pg__agenda--one{grid-template-columns:1fr;max-width:none}
.pg__agenda--one .pg__agday{text-align:left;padding-left:14px}
.pg__agenda--one .pg__ag{padding:12px 14px}
.pg__agenda--one .pg__agtime{flex-basis:66px;font-size:13px}
.pg__agenda--one .pg__agttl{font-size:15px}
.pg__agenda--one .pg__agcat{font-size:11.5px}
/* expand -> modal, same scrim as the image/video windows */
html.pg-lock{overflow:hidden}
.pg__close{display:none}
.pg.is-expanded{position:fixed;inset:0;width:100%;margin:0;transform:none;z-index:9999;
  padding:clamp(18px,3vw,48px);display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(130% 100% at 50% 44%,rgba(0,75,135,.58) 0%,rgba(3,26,48,.90) 55%,rgba(2,12,22,.97) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%)}
.pg.is-expanded > *{align-self:center;max-width:1600px;width:100%}
.pg.is-expanded .pg__intro,.pg.is-expanded .pg__note,.pg.is-expanded .pg__cta{display:none}
.pg.is-expanded .pg__expand{display:none}
.pg.is-expanded .pg__close{display:inline-flex}
.pg.is-expanded .pg__tools{flex:0 0 auto;background:#fff;padding:12px;margin:0}
.pg.is-expanded .pg__days{flex:0 0 auto;background:#fff;margin:0;padding:0 12px 12px}
.pg.is-expanded .pg__view.is-on{flex:1 1 auto;min-height:0;overflow:auto;background:#fff;padding:0 12px 12px}
.pg.is-expanded .pg__stage{border:0;overflow:visible}
.pg.is-expanded .pg__blk{font-size:12.5px;padding:6px 8px 5px}
.pg.is-expanded .pg__blk .pg__t{-webkit-line-clamp:3}
@media print{
  .pg__tools,.pg__note,.pg__days,.pg__cta{display:none!important}
  .pg__stage{overflow:visible;border:0}
  .pg__grid{min-width:0}
  .pg__blk,.pg__head,.pg__z{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ============================================================
   Cookiebot consent banner — presentation variants.
   Chosen in EASL Hub → Settings; a <body> class (easl-cc-*) switches it.
   Only repositions/resizes Cookiebot's own dialog and drops the page-dimming
   backdrop — the consent logic, categories and buttons are untouched. Cookiebot
   sets inline styles, so these need !important to win.
   ============================================================ */
body[class*="easl-cc-"] #CybotCookiebotDialogBodyUnderlay{display:none!important}

/* Shared corner-card look. */
.easl-cc-corner-left #CybotCookiebotDialog,
.easl-cc-corner-right #CybotCookiebotDialog,
.easl-cc-minimal #CybotCookiebotDialog{
  top:auto!important;right:auto!important;bottom:24px!important;
  transform:none!important;margin:0!important;
  width:420px!important;max-width:calc(100vw - 40px)!important;
  max-height:calc(100vh - 48px)!important;overflow:auto!important;
  border-radius:14px!important;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06)!important;
}
.easl-cc-corner-left #CybotCookiebotDialog,
.easl-cc-minimal #CybotCookiebotDialog{left:24px!important}
.easl-cc-corner-right #CybotCookiebotDialog{right:24px!important;left:auto!important}
@media (max-width:520px){
  .easl-cc-corner-left #CybotCookiebotDialog,
  .easl-cc-corner-right #CybotCookiebotDialog,
  .easl-cc-minimal #CybotCookiebotDialog{
    left:12px!important;right:12px!important;bottom:12px!important;
    width:auto!important;max-width:none!important;
  }
}

/* Slim full-width bar along the bottom. */
.easl-cc-bar #CybotCookiebotDialog{
  top:auto!important;left:0!important;right:0!important;bottom:0!important;
  transform:none!important;margin:0!important;
  width:100%!important;max-width:100%!important;border-radius:0!important;
  max-height:60vh!important;overflow:auto!important;
  box-shadow:0 -10px 34px -14px rgba(0,0,0,.28)!important;
}

/* Minimal: smaller card, tab strip and Cookiebot logo hidden. Deny / Allow all /
   Customize stay — Customize still opens Cookiebot's full detail view. */
.easl-cc-minimal #CybotCookiebotDialog{width:380px!important}
.easl-cc-minimal #CybotCookiebotDialogNav,
.easl-cc-minimal #CybotCookiebotDialogPoweredbyImage,
.easl-cc-minimal .CybotCookiebotDialogPoweredbyLink,
.easl-cc-minimal #CybotCookiebotDialogPoweredByText{display:none!important}

/* On-brand buttons for the compact variants — Deny stays as prominent as Allow. */
body[class*="easl-cc-"] #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
body[class*="easl-cc-"] #CybotCookiebotDialogBodyButtonAccept{
  background:#004B87!important;border-color:#004B87!important;color:#fff!important;
}
body[class*="easl-cc-"] #CybotCookiebotDialogBodyButtonDecline{
  background:transparent!important;border:1px solid #004B87!important;color:#004B87!important;
}

/* Footer "Cookie settings" reopen link. */
.easl-cookie-reopen{cursor:pointer}

/* Hide Cookiebot's floating badge (#CookiebotWidget) — the little circle that
   sits in the corner after a visitor has answered. It is redundant here: the
   footer "Cookie settings" link reopens the panel on every page, and the badge
   overlaps the back-to-top button and the corner-card banner. Consent logic is
   untouched; only the badge is hidden. */
#CookiebotWidget{display:none!important}

/* Compact the consent card — shorter dialog, smaller buttons and toggles, tighter
   copy. Applies to every corner/bar variant (not Cookiebot's default centred
   dialog). Verified on live: card height ~524px -> ~399px. Consent controls and
   wording are unchanged; only sizing and spacing are reduced. */
body[class*="easl-cc-"] #CybotCookiebotDialogBodyContent{padding:12px 16px!important}
body[class*="easl-cc-"] #CybotCookiebotDialogBodyContentTitle{font-size:.95rem!important;margin-bottom:4px!important}
body[class*="easl-cc-"] #CybotCookiebotDialogBodyContentText{font-size:.78rem!important;line-height:1.4!important}
body[class*="easl-cc-"] #CybotCookiebotDialogHeader{padding:6px 14px!important;min-height:0!important}
body[class*="easl-cc-"] .CybotCookiebotDialogBodyBottomWrapper{padding:6px 16px!important;font-size:.75rem!important}
body[class*="easl-cc-"] #CybotCookiebotDialogBodyLevelButtonsSelectPane{padding:8px 12px!important}
body[class*="easl-cc-"] .CybotCookiebotDialogBodyLevelButtonWrapper{margin:0!important;padding:0!important}
body[class*="easl-cc-"] .CybotCookiebotDialogBodyLevelButtonDescription{font-size:.72rem!important;margin-top:2px!important}
body[class*="easl-cc-"] .CybotCookiebotDialogBodyLevelButtonSlider{transform:scale(.78)!important;transform-origin:left center!important}
body[class*="easl-cc-"] #CybotCookiebotDialogBodyButtonsWrapper{gap:6px!important;padding:8px 16px 12px!important}
body[class*="easl-cc-"] #CybotCookiebotDialogBodyButtonsWrapper .CybotCookiebotDialogBodyButton,
body[class*="easl-cc-"] #CybotCookiebotDialogBodyButtonsWrapper a,
body[class*="easl-cc-"] #CybotCookiebotDialogBodyButtonsWrapper button{padding:9px 10px!important;font-size:.8rem!important;min-height:0!important;line-height:1.15!important}

/* GPC ("signal is honored") row: only lay it out when Cookiebot actually shows
   it. Cookiebot hides it with an inline display:none when the browser sends no
   GPC signal (e.g. Chrome); forcing it visible leaked the raw
   [#GPC_BANNER_ICON#] [#GPC_TOAST_TEXT#] placeholders. */
body[class*="easl-cc-"] .CybotCookiebotDialogGpcContainer:not([style*="none"]){display:flex!important;align-items:center!important;gap:8px}

/* Expand (right end of the GPC row, or of our own "Cookie details" row when the
   browser sends no GPC signal) and shrink (header, only while expanded). */
body[class*="easl-cc-"] .CybotCookiebotDialogGpcContainer .easl-cc-expand{margin-left:auto!important}
body[class*="easl-cc-"] #CybotCookiebotDialog .easl-cc-row{display:flex!important;align-items:center;gap:8px;padding:10px 22px!important;margin:0!important;border-bottom:1px solid #d6d6d6;font-size:.9rem;line-height:1.3;color:#141414}
body.easl-cc-expanded #CybotCookiebotDialog .easl-cc-row{display:none!important}
.easl-cc-row__i{display:inline-flex;color:#004B87;flex:0 0 auto}
.easl-cc-row__i svg{width:18px;height:18px;display:block}
.easl-cc-row__t{flex:1 1 auto}
.easl-cc-expand,.easl-cc-shrink{display:inline-flex!important;align-items:center;justify-content:center;width:30px!important;height:30px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0 0 0 auto!important;border:0!important;background:transparent!important;color:#004B87!important;cursor:pointer;border-radius:7px!important;opacity:.75;flex:0 0 auto;box-shadow:none!important}
.easl-cc-expand:hover,.easl-cc-expand:focus-visible,.easl-cc-shrink:hover,.easl-cc-shrink:focus-visible{opacity:1;background:rgba(0,75,135,.10)!important;outline:none}
.easl-cc-expand svg,.easl-cc-shrink svg{width:18px;height:18px;display:block}
body[class*="easl-cc-"] #CybotCookiebotDialogHeader{position:relative!important}
.easl-cc-shrink{display:none!important;position:absolute!important;left:10px;top:50%;transform:translateY(-50%);z-index:2}
body.easl-cc-expanded .easl-cc-shrink{display:inline-flex!important}
/* Cookiebot slides width/left/top over .5s; with the transform switch that made
   expand/shrink jump across the page. Keep only its fade. */
body[class*="easl-cc-"] #CybotCookiebotDialog{transition:opacity .3s!important}

/* Expanded: centred, larger, with the page dimmed behind (like Cookiebot's own
   dialog). The tab strip comes back so Consent / Details / About are reachable. */
body.easl-cc-expanded #CybotCookiebotDialog{
  top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(900px,calc(100vw - 48px))!important;max-width:none!important;
  height:auto!important;max-height:min(86vh,780px)!important;
  box-shadow:0 0 0 100vmax rgba(8,22,38,.45),0 30px 80px -20px rgba(0,0,0,.5)!important;
}
body.easl-cc-expanded #CybotCookiebotDialogNav,
body.easl-cc-minimal.easl-cc-expanded #CybotCookiebotDialogNav{display:block!important}
body.easl-cc-expanded #CybotCookiebotDialogBodyContentText,
body.easl-cc-expanded .CybotCookiebotDialogBodyLevelButtonDescription{font-size:.85rem!important;line-height:1.5!important}
@media (max-width:520px){
  body.easl-cc-expanded #CybotCookiebotDialog{
    top:12px!important;left:12px!important;right:12px!important;bottom:12px!important;
    transform:none!important;width:auto!important;max-height:none!important;
  }
}

/* ============================================================
   EASL Floor Plan — interactive exhibition finder (widget: easl-floorplan)
   Plan + amenity icons are generated from the exhibition PDF; behaviour in
   assets/js/floorplan.js. Booth colours follow the PDF's own type coding.
   ============================================================ */
.fp{--fp-blue:#004B87;--fp-red:#ED3341;--fp-ink:#0d2a44;--fp-muted:#5b7994;--fp-line:#d7e3ee;--fp-line2:#eef3f7;--fp-bg:#f4f8fc;--fp-h:min(76vh,760px);
  display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start;margin-top:14px}
@media(max-width:820px){.fp{grid-template-columns:1fr}}
.fp__intro{margin:0 0 6px;color:var(--fp-muted)}
.fp__main,.fp__side{background:#fff;border:1px solid var(--fp-line);border-radius:14px;overflow:hidden}
.fp__bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--fp-line2)}
.fp__bar b{color:var(--fp-blue);font-size:18px}
.fp__zoom{display:inline-flex;align-items:center;border:1px solid var(--fp-line);border-radius:8px;overflow:hidden}
.fp__zbtn{-webkit-appearance:none;appearance:none;border:0!important;background:#fff!important;color:var(--fp-blue)!important;cursor:pointer;padding:4px 10px!important;min-height:0!important;font-size:14px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;box-shadow:none}
.fp__zbtn:hover{background:#eef4fa!important}
.fp__zpct{min-width:48px;border-left:1px solid var(--fp-line);border-right:1px solid var(--fp-line);font-size:12px;font-weight:600}
.fp__exp{-webkit-appearance:none;appearance:none;border:1px solid var(--fp-line)!important;background:#fff!important;color:var(--fp-blue)!important;cursor:pointer;width:34px!important;height:34px!important;min-height:0!important;border-radius:8px!important;padding:0!important;line-height:0;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;flex:0 0 auto}
.fp__exp:hover{border-color:var(--fp-blue)}
.fp__exp svg{width:18px;height:18px;display:block;flex:0 0 auto}
.fp__sel{margin-left:auto;font-size:13px;color:var(--fp-muted);text-align:right;min-height:20px}
.fp__sel b{color:var(--fp-blue);font-size:13px}
.fp__scroll{overflow:auto;background:var(--fp-bg);max-height:var(--fp-h);-webkit-overflow-scrolling:touch}
.fp:not(.fp--fit) .fp__scroll{cursor:grab}
.fp.fp--fit.fp--panzoom .fp__scroll{overflow:auto;max-height:calc(100vh - 220px);cursor:grab}
.fp__scroll.is-panning{cursor:grabbing}
.fp__imgwrap{position:relative;width:100%;line-height:0;margin:0 auto}
.fp__imgwrap img{width:100%;display:block;-webkit-user-drag:none;user-select:none}
.fp__marker{position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:rgba(237,51,65,.85);border:2px solid #fff;box-shadow:0 0 0 4px rgba(237,51,65,.16),0 2px 6px rgba(0,0,0,.4);z-index:10;pointer-events:none;opacity:0;transition:opacity .15s;display:none}
.fp__marker::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.fp__marker::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;border:2px solid rgba(237,51,65,.55);transform:translate(-50%,-50%);opacity:0}
.fp__marker.is-on::before{animation:fpPing 1.9s cubic-bezier(0,0,.2,1) infinite}
@keyframes fpPing{0%{transform:translate(-50%,-50%) scale(.75);opacity:.6}75%,100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}}
.fp__marker.is-on{display:block;opacity:1;animation:fpDrop .5s ease}
@keyframes fpDrop{0%{transform:translate(-50%,-50%) scale(.4)}60%{transform:translate(-50%,-50%) scale(1.15)}100%{transform:translate(-50%,-50%) scale(1)}}
.fp__tip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);display:flex;align-items:flex-start;gap:8px;background:#fff;border:1px solid var(--fp-line);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.20);padding:8px 12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:12}
.fp__marker.is-on .fp__tip{opacity:1}
.fp__tipdot{width:10px;height:10px;border-radius:50%;background:var(--fp-red);margin-top:3px;flex:0 0 auto}
.fp__tiptext{display:flex;flex-direction:column;line-height:1.25}
.fp__tiptext b{font-weight:700;color:var(--fp-ink);font-size:13px}
.fp__tiptext small{color:var(--fp-muted);font-size:11.5px}
.fp__tip::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:12px;background:#fff;border-right:1px solid var(--fp-line);border-bottom:1px solid var(--fp-line);transform:translate(-50%,-60%) rotate(45deg)}
.fp__tools{padding:12px;border-bottom:1px solid var(--fp-line2);display:flex;flex-direction:column;gap:10px}
.fp__searchrow{display:flex;gap:8px;align-items:stretch}
.fp__search{flex:1 1 auto;display:flex;align-items:center;gap:8px;border:1px solid var(--fp-line);border-radius:10px;padding:0 10px;background:#f6f9fc}
.fp__search:focus-within{border-color:var(--fp-blue);box-shadow:0 0 0 3px rgba(0,75,135,.12)}
.fp__search svg{width:16px;height:16px;color:var(--fp-muted);flex:0 0 auto}
.fp__search input{border:0;background:none;width:100%;font:inherit;color:var(--fp-ink);height:38px;outline:none}
.fp__filter{position:relative;flex:0 0 auto}
.fp__fbtn{-webkit-appearance:none;appearance:none;width:40px!important;height:40px!important;min-height:0!important;border:1px solid var(--fp-line)!important;background:#fff!important;color:var(--fp-blue)!important;border-radius:10px!important;cursor:pointer;padding:0!important;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;flex:0 0 auto}
.fp__fbtn:hover{border-color:var(--fp-blue)}
.fp__fbtn svg{width:19px;height:19px;display:block;flex:0 0 auto}
.fp__fbtn.is-active{background:var(--fp-blue)!important;color:#fff!important;border-color:var(--fp-blue)!important}
.fp__fmenu{position:absolute;right:0;top:46px;z-index:20;background:#fff;border:1px solid var(--fp-line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;min-width:210px}
.fp__fmenu button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:7px;font:inherit;font-size:13.5px;color:var(--fp-ink);cursor:pointer}
.fp__fmenu button:hover{background:var(--fp-line2)}
.fp__fmenu button.is-on{background:rgba(0,75,135,.10);color:var(--fp-blue);font-weight:600}
.fp__zones{display:flex;flex-wrap:wrap;gap:6px}
.fp__chip{border:1px solid var(--fp-line);background:#fff;color:var(--fp-blue);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:600;cursor:pointer}
.fp__chip:hover{border-color:var(--fp-blue)}
.fp__chip.is-on{background:var(--fp-blue);color:#fff;border-color:var(--fp-blue)}
.fp__count{font-size:12px;color:var(--fp-muted)}
.fp__list{list-style:none;margin:0;padding:6px;max-height:min(58vh,540px);overflow:auto}
.fp__row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.fp__row:hover{background:var(--fp-line2)}
.fp__row.is-on{background:rgba(237,51,65,.10);border-color:rgba(237,51,65,.35)}
.fp__nm{flex:1 1 auto;font-weight:600;color:var(--fp-ink);font-size:13.5px;line-height:1.25}
.fp__cd{flex:0 0 auto;font-weight:700;font-size:12px;color:#fff;background:var(--fp-blue);border-radius:6px;padding:3px 7px;font-variant-numeric:tabular-nums}
.fp__row.is-assoc .fp__cd{background:#0d6b70}
.fp__row.is-on .fp__cd{background:var(--fp-red)}
.fp__empty{padding:20px 12px;color:var(--fp-muted);text-align:center}
.fp__pdf{padding:12px;border-top:1px solid var(--fp-line2)}
.fp__dl{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;background:var(--fp-blue);color:#fff;border-radius:10px;padding:10px 14px;font-weight:600;font-size:14px;text-decoration:none}
.fp__dl:hover{background:#013a68;color:#fff}
.fp__dl svg{width:16px;height:16px;flex:0 0 auto}
.fp.fp--fit .fp__scroll{max-height:none;overflow:visible}
.fp.fp--fit .fp__side{position:sticky;top:16px;align-self:start;display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
@media(max-width:820px){.fp.fp--fit .fp__side{position:static;max-height:none}}
.fp__close{display:none}
.fp.fp--full{position:fixed;inset:0;z-index:9999;margin:0;background:#fff;padding:16px max(16px,3vw) 24px;grid-template-columns:minmax(0,1180px) 360px;gap:20px;justify-content:center;align-content:start;--fp-h:calc(100vh - 116px);overflow:auto;border-radius:0}
.fp.fp--full .fp__close{display:inline-flex;align-items:center;gap:6px;background:var(--fp-blue);color:#fff;border:0;border-radius:8px;padding:6px 12px;font-weight:600;font-size:13px;cursor:pointer}
.fp.fp--full .fp__close:hover{background:#013a68}
@media(max-width:820px){.fp.fp--full{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fp *{transition:none!important;animation:none!important}}