:root{
  /* Bosphorus Dusk (Direction 3B): indigo shell, blush and warm paper grounds,
     deep terracotta for warm type, bright terracotta for rules and markers only */
  --navy:#1B2A5B; --navy-d:#101B3E; --navy-l:#2C3D78;
  --blue:#E0663C; --blue-d:#C4502B; --ice:#FBEEE7; --ice-2:#FCF4EF;
  --paper:#FDFAF8; --ink:#2B3048; --muted:#55596B;
  --line:rgba(27,42,91,.10);
  /* action tier: terracotta, reserved for Register and one accent per screen region */
  --ac:#C4502B; --ac-d:#A8411F; --ac-br:#E0663C; --ac-l:#F3B08C;
  --f:"Onest",system-ui,-apple-system,sans-serif;
  --pad:clamp(1.15rem,4.5vw,4.5rem);
  --e:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit} img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;color:var(--navy);line-height:1.08;letter-spacing:-.028em;font-weight:800}
p{margin:0 0 1.05rem}
[hidden]{display:none!important}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
@media(min-width:1700px){.wrap,.hero-in{max-width:1480px}}
@media(min-width:2100px){.wrap,.hero-in{max-width:1660px}body{font-size:18px}}
@media(max-width:520px){:root{--pad:1.1rem}.hero h1{font-size:clamp(1.75rem,7.6vw,2.4rem)}
  .brand img{width:52px}.brand .bn b{font-size:1rem}.brand .bn span{font-size:.62rem;letter-spacing:.12em}}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* motion */
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.pg{animation:up .5s var(--e) both}
.rv{transition:opacity .8s var(--e),transform .8s var(--e)}
.rv.pre{opacity:0;transform:translateY(24px)}
.rv.pre.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}.d4{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}

/* ---------- utility strip ---------- */
.util{background:var(--navy);color:#fff;font-size:.82rem;overflow:hidden;
  max-height:80px;transition:max-height .35s var(--e),opacity .3s var(--e)}
.util-in{max-width:1720px;margin:0 auto;padding:.62rem var(--pad);display:flex;align-items:center;
  justify-content:space-between;gap:1.4rem}
.u-l{display:flex;align-items:center;gap:.8rem;font-weight:500;color:rgba(255,255,255,.9)}
.u-l b{font-weight:800;letter-spacing:.01em}
.u-l i{display:block;width:1px;height:14px;background:rgba(255,255,255,.4)}
.u-c{display:flex;align-items:center;gap:.95rem;margin:0 auto;font-size:.86rem;
  color:rgba(255,255,255,.72);white-space:nowrap}
.u-c em{font-style:normal;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.75rem;color:rgba(255,255,255,.62)}
.u-c span{display:flex;align-items:baseline;gap:.34rem;font-size:.74rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.u-c b{font-size:1.36rem;font-weight:800;color:#F3B08C;font-variant-numeric:tabular-nums;letter-spacing:0}
.u-c i{display:block;align-self:center;width:1px;height:16px;background:rgba(255,255,255,.32)}
.u-c .lbl-long{display:inline}
.u-c .compact{display:none}
@media(max-width:1240px){
  .u-c{gap:.6rem;font-size:.8rem}
  .u-c b{font-size:1.2rem}
  .u-c em{display:none}
  .u-c .lbl-long{display:none}
}
@media(max-width:860px){
  .u-c span,.u-c i{display:none}
  .u-c .compact{display:flex;align-items:baseline;gap:.3rem}
}
@media(max-width:520px){.u-c{display:none}}
.u-r{display:flex;align-items:center;gap:1.6rem}
.u-r a{color:rgba(255,255,255,.9);text-decoration:none;font-weight:700;font-size:.92rem;
  letter-spacing:.09em;text-transform:uppercase;transition:color .25s var(--e)}
.u-r a:hover{color:#fff}
body.scrolled .util{max-height:0;opacity:0}
@media(max-width:820px){
  .util-in{justify-content:center;padding:.55rem var(--pad)}
  .u-l{font-size:.76rem;flex-wrap:wrap;justify-content:center;text-align:center}
  .u-r{display:none}
}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.93);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--e),padding .3s var(--e)}
.nav.stuck{box-shadow:0 8px 26px rgba(27,42,91,.10)}
.nav-in{max-width:1720px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.6rem)}
.brand{display:flex;align-items:center;gap:clamp(.85rem,1.3vw,1.25rem);text-decoration:none;
  padding:.95rem 0;flex:none;transition:opacity .25s var(--e)}
.brand:hover{opacity:.88}
.brand img{width:clamp(62px,5vw,92px);transition:width .3s var(--e)}
.brand .bar{display:block;width:1px;align-self:stretch;margin:.35rem 0;
  background:linear-gradient(180deg,transparent,rgba(27,42,91,.3) 22%,rgba(27,42,91,.3) 78%,transparent)}
.brand .bn b{display:block;font-size:clamp(1.3rem,1.85vw,1.95rem);font-weight:800;color:var(--navy);
  letter-spacing:-.026em;line-height:1.08;transition:font-size .3s var(--e)}
.brand .bn .sec{display:block;font-size:clamp(.7rem,.86vw,.92rem);font-weight:800;letter-spacing:.14em;
  color:var(--blue-d);margin-top:.3rem;white-space:nowrap;transition:font-size .3s var(--e)}
.nav.stuck .brand{padding:.6rem 0}
.nav.stuck .brand img{width:clamp(46px,3.2vw,58px)}
.nav.stuck .brand .bn b{font-size:clamp(1rem,1.2vw,1.22rem)}
.nav.stuck .brand .bn .sec{font-size:clamp(.6rem,.68vw,.7rem)}
.nav.stuck @media(max-width:560px){
  .brand img{width:52px}
  .brand .bn b{font-size:1.02rem}
  .brand .bn .sec{font-size:.58rem;letter-spacing:.09em;white-space:normal}
  }
.nav ul{list-style:none;display:flex;align-items:center;gap:clamp(1.05rem,1.9vw,2.2rem);margin:0 0 0 auto;padding:0}
.nav ul a{display:block;text-decoration:none;color:var(--ink);white-space:nowrap;position:relative;
  padding:1.55rem 0;font-size:.88rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  transition:color .25s var(--e)}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e)}
.nav ul a:hover{color:var(--navy)} .nav ul a:hover::after{transform:scaleX(1)}
.nav ul a.on{color:var(--navy)} .nav ul a.on::after{transform:scaleX(1)}
.navreg{flex:none;margin-left:clamp(.8rem,1.6vw,1.8rem)}
@media(max-width:1480px){
  .nav-in{flex-wrap:wrap;gap:1rem}
  .nav ul{order:3;flex:1 0 100%;margin:0;justify-content:space-between;
    gap:1rem;border-top:1px solid var(--line)}
  .nav ul a{padding:.95rem 0}
  .navreg{margin-left:auto}
}
@media(max-width:760px){
  .nav ul{justify-content:flex-start;gap:.9rem 1.1rem;flex-wrap:wrap}
  .nav ul a{padding:.65rem 0;font-size:.82rem;letter-spacing:.05em}
}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  /* fill the viewport below the utility bar and nav, so nothing from the
     next section shows on landing. --chrome is measured in app.js. */
  min-height:max(440px, calc(100vh - var(--chrome, 165px) + 3px));
  min-height:max(440px, calc(100svh - var(--chrome, 165px)));
  background:linear-gradient(150deg,#FDFAF8 0%,#FCF3EE 40%,#FBEEE7 72%,#F7E3D8 100%)}

/* key-visual.jpg is the right-hand panel of the supplied banner (anatomy render
   and the Bosphorus at dusk). The wrapper's width is the hero's height clamp
   times the artwork's aspect, so the panel always matches the image. */
.art-wrap{position:absolute;right:0;top:0;bottom:0;z-index:1;
  width:clamp(470px,47vw,1250px);overflow:hidden;pointer-events:none;
  animation:fadeIn .9s var(--e) both;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 11%);
          mask-image:linear-gradient(to right,transparent 0,#000 11%)}
.hero .art{display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center 45%;
  scale:1.03;translate:var(--px,0) var(--py,0);
  transition:translate .5s var(--e);animation:drift 20s .6s ease-in-out infinite}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* scale sits on the transform, the pointer parallax on translate, so the two
   never overwrite one another */
@keyframes drift{0%{scale:1.03}50%{scale:1.12}100%{scale:1.03}}

/* a slow gleam across the artwork */
.art-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(108deg,transparent 36%,rgba(255,255,255,.28) 50%,transparent 64%);
  background-size:300% 100%;animation:sweep 10s 1.5s ease-in-out infinite}
@keyframes sweep{0%{background-position:210% 0}60%,100%{background-position:-110% 0}}

/* keeps the title side legible whatever the artwork is doing */
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(96deg,#FCF3EE 0%,#FCF3EE 34%,
    rgba(253,250,248,.55) 46%,rgba(253,250,248,0) 58%)}

.hero-in{position:relative;z-index:5;max-width:1280px;margin:0 auto;width:100%;
  padding:clamp(1.9rem,3.1vw,3rem) var(--pad)}
.hero-txt{max-width:min(640px,46%)}
@media(min-width:1700px){.hero-in{max-width:1480px}}
@media(min-width:2100px){.hero-in{max-width:1660px}}

.kicker{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.05rem}
.kicker span{font-size:clamp(.86rem,1.25vw,1.02rem);font-weight:800;letter-spacing:.04em;
  color:var(--navy);white-space:nowrap}
.kicker span em{font-style:normal;color:var(--blue-d)}
.kicker i{flex:1;height:2px;max-width:110px;position:relative;
  background:linear-gradient(90deg,var(--navy),var(--ac-br))}
.kicker i::after{content:"";position:absolute;right:-6px;top:50%;width:13px;height:13px;
  border-radius:50%;border:2px solid var(--ac-br);background:var(--paper);transform:translateY(-50%)}

/* 2.5vw against a 640px column lands the 60-character title on two lines */
.hero h1{font-size:clamp(1.7rem,2.5vw,2.3rem);letter-spacing:-.032em;line-height:1.09;
  max-width:30ch;color:var(--navy);font-weight:800;text-wrap:balance}
.hero h1 .lt{font-weight:400}
/* full opacity on a real token, so contrast is predictable */
.hero .strap{font-size:clamp(.98rem,1.25vw,1.12rem);font-weight:400;color:var(--muted);
  margin:.85rem 0 0;max-width:38ch;letter-spacing:-.015em}

/* ---------- event bar: the dates and venue, at a size the room can read ---------- */
.ebar{position:relative;overflow:hidden;margin:clamp(1.25rem,2vw,1.7rem) 0 0;
  background:var(--navy);color:#fff;border-radius:12px;
  border-left:5px solid var(--ac-br);
  padding:clamp(.95rem,1.45vw,1.25rem) clamp(1.15rem,1.8vw,1.55rem);
  box-shadow:0 18px 44px rgba(16,27,62,.30);
  transition:transform .45s var(--e),box-shadow .45s var(--e)}
.ebar::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--ac-br) 0%,var(--ac-l) 40%,transparent 92%);
  background-size:220% 100%;animation:shimmer 7s 1s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.ebar:hover{transform:translateY(-3px);box-shadow:0 26px 56px rgba(16,27,62,.38)}
.ebar-row{display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.15rem);flex-wrap:wrap}
.ebar-item{display:flex;align-items:center;gap:.55rem}
.ebar-item img{width:28px;height:28px;flex:none;filter:brightness(0) invert(1);opacity:.9}
.ebar-item b{color:#fff;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.24rem,1.85vw,1.6rem);font-variant-numeric:tabular-nums}
/* the en dash in a date range reads as a separator, not a third numeral:
   lighter, a touch smaller, and given room to breathe on both sides */
.dash{font-style:normal;display:inline;font-weight:400;font-size:.72em;
  vertical-align:.08em;margin:0 .22em;opacity:.55}
.ebar-item .dash{font-size:.52em;font-weight:500;vertical-align:.16em;
  margin:0 .2em;opacity:1;color:rgba(255,255,255,.6)}
.ebar-sep{width:1px;align-self:stretch;min-height:1.7rem;
  background:rgba(255,255,255,.26);flex:none}
.ebar-foot{display:flex;align-items:baseline;justify-content:space-between;
  gap:.6rem .9rem;flex-wrap:wrap;margin:.8rem 0 0;padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.22)}
.ebar-venue{margin:0;font-size:clamp(1.04rem,1.22vw,1.16rem);font-weight:600;color:#fff}
.ebar-venue span{font-weight:400;color:#F6CDB5}
.ebar-early{display:flex;align-items:center;gap:.5rem;margin:0;white-space:nowrap;
  font-size:clamp(.96rem,1.1vw,1.04rem);font-weight:700;color:var(--ac-l)}
.ebar-early i{width:7px;height:7px;border-radius:50%;background:var(--ac-l);flex:none;
  animation:pulse 2.4s var(--e) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;
  margin-top:clamp(1.25rem,1.9vw,1.6rem)}

/* ---------- hero load sequence ---------- */
@keyframes heroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .kicker{animation:heroUp .55s var(--e) both}
.hero h1{animation:heroUp .55s .06s var(--e) both}
.hero .strap{animation:heroUp .55s .12s var(--e) both}
.hero .ebar{animation:heroUp .55s .18s var(--e) both}
.hero-cta{animation:heroUp .55s .24s var(--e) both}

/* ---------- hero stacked ---------- */
@media(max-width:1080px){
  .hero{flex-direction:column;min-height:0;overflow:visible}
  .hero::before{display:none}
  .art-wrap{position:relative;right:auto;top:auto;bottom:auto;order:2;
    width:100%;height:290px;-webkit-mask-image:none;mask-image:none}
  .art-wrap::after{display:none}
  .hero .art{object-position:center 42%;scale:1;animation:none}
  .hero-in{order:1;padding-bottom:clamp(1.4rem,2.6vw,1.9rem)}
  .hero-txt{max-width:none}
  .hero h1{max-width:28ch}
  .hero .strap{max-width:46ch}
  .ebar{max-width:560px}
}
@media(max-width:560px){
  .ebar-row{gap:.6rem}
  .ebar-sep{display:none}
  .ebar-item{width:100%}
  .ebar-foot{flex-direction:column;align-items:flex-start;gap:.5rem}
  .hero-cta .btn{width:100%}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;text-decoration:none;border:0;
  cursor:pointer;font-family:var(--f);font-weight:700;font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;
  padding:1.05rem 2.1rem;border-radius:100px;position:relative;overflow:hidden;
  transition:transform .35s var(--e),box-shadow .35s var(--e),background .35s var(--e),color .35s var(--e)}
.btn .a{display:inline-block;transition:transform .35s var(--e)}
.btn:hover .a{transform:translateX(4px)}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--e)}
.btn:hover::before{transform:translateX(120%)}
/* action tier - every Register button, in the nav, the hero and the sticky bar */
.btn-b{background:linear-gradient(135deg,var(--ac-br) 0%,var(--ac) 48%,var(--ac-d) 100%);color:#fff;
  box-shadow:0 8px 22px rgba(196,80,43,.36),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-b:hover{transform:translateY(-3px);
  background:linear-gradient(135deg,#EC8659 0%,var(--ac-br) 48%,var(--ac) 100%);
  box-shadow:0 14px 32px rgba(196,80,43,.46),inset 0 1px 0 rgba(255,255,255,.4)}

/* secondary solid - actions that are not registration */
.btn-navy,.btn-p{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(27,42,91,.28)}
.btn-navy:hover,.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(27,42,91,.4)}

/* secondary outline - deliberately quiet, so the action tier stays the loudest */
.btn-o{background:var(--paper);color:var(--navy);
  box-shadow:0 0 0 2px rgba(27,42,91,.38) inset,
    0 1px 2px rgba(16,27,62,.06),
    0 5px 12px rgba(224,102,60,.18),
    0 12px 28px rgba(196,80,43,.14)}
.btn-o:hover{background:var(--ice);color:var(--navy);transform:translateY(-2px);
  box-shadow:0 0 0 2px var(--navy) inset,
    0 2px 5px rgba(16,27,62,.08),
    0 8px 18px rgba(224,102,60,.26),
    0 20px 42px rgba(196,80,43,.22)}
/* the same outline over a photo */
.bleed .btn-o{background:rgba(255,255,255,.14);color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.85) inset}
.bleed .btn-o:hover{background:rgba(255,255,255,.26);color:#fff;
  box-shadow:0 0 0 2px #fff inset,0 10px 26px rgba(0,0,0,.26)}

.btn-w{background:var(--paper);color:var(--navy);
  box-shadow:0 1px 3px rgba(16,27,62,.14),
    0 6px 16px rgba(196,80,43,.24),
    0 16px 34px rgba(16,27,62,.26)}
.btn-w:hover{transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(16,27,62,.18),
    0 10px 24px rgba(196,80,43,.34),
    0 24px 48px rgba(16,27,62,.32)}
.navreg{padding:.82rem 1.3rem .82rem 1.6rem;font-size:.76rem}

/* the hero's Register carries the most weight on the page: larger, an arrow in
   a badge, and a slow attention ring */
.hero-cta .btn-b{font-size:.86rem;padding:1.1rem 1.3rem 1.1rem 2.15rem;
  animation:cta 3.4s var(--e) 1s infinite}
.hero-cta .btn-b .a{display:inline-flex;align-items:center;justify-content:center;
  width:29px;height:29px;border-radius:50%;background:rgba(255,255,255,.26);
  font-size:1rem;line-height:1;margin-left:.35rem;
  transition:transform .35s var(--e),background .35s var(--e)}
.hero-cta .btn-b:hover .a{transform:translateX(4px);background:rgba(255,255,255,.45)}
@keyframes cta{
  0%,100%{box-shadow:0 8px 22px rgba(196,80,43,.36),0 0 0 0 rgba(196,80,43,.42)}
  55%{box-shadow:0 13px 30px rgba(196,80,43,.46),0 0 0 13px rgba(196,80,43,0)}}

/* the two Register buttons that stay with you (nav and sticky bar): an arrow
   badge and a sheen that crosses every few seconds. Hover stops the sheen so
   the hover lift and sweep take over; the reduced-motion block turns it off. */
.navreg::before,.stick .btn-b::before{animation:regsheen 5.2s ease-in-out 1.6s infinite}
.navreg:hover::before,.stick .btn-b:hover::before{animation:none}
.navreg .a,.stick .btn-b .a{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.24);
  font-size:.9rem;line-height:1;letter-spacing:0;margin-right:-.7rem;
  transition:transform .35s var(--e),background .35s var(--e)}
.navreg:hover .a,.stick .btn-b:hover .a{background:rgba(255,255,255,.44)}
@keyframes regsheen{0%{transform:translateX(-120%)}24%,100%{transform:translateX(120%)}}

/* ---------- lower homepage ---------- */
.band-num{background:var(--navy);color:#fff;padding:clamp(1.6rem,2.6vw,2.2rem) 0}
.band-num .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.band-num .n{text-align:center;padding:.2rem 1.2rem;border-right:1px solid rgba(255,255,255,.18)}
.band-num .n:last-child{border-right:0}
.band-num b{display:block;font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.band-num span{display:block;font-size:.9rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#F3B08C;margin-top:.5rem}
/* figures still awaiting confirmation from ESSKA */
.band-num em{display:block;font-style:normal;font-size:.76rem;font-weight:600;
  letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.5);margin-top:.28rem}
@media(max-width:820px){.band-num .grid{grid-template-columns:1fr 1fr;row-gap:2rem}
  .band-num .n:nth-child(2n){border-right:0}}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.feature.flip>div:first-child{order:2}
@media(max-width:960px){.feature,.feature.flip>div:first-child{grid-template-columns:1fr;order:0}}
.shot{position:relative;overflow:hidden;border-radius:6px;background:var(--ice,#FBEEE7)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.5s var(--e)}
.shot:hover img{transform:scale(1.045)}
.shot.wide img{aspect-ratio:16/10}
.shot .cap{position:absolute;left:0;bottom:0;background:var(--navy);color:#fff;font-size:.83rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.65rem 1.1rem;border-radius:0 6px 0 0}

.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
@media(max-width:900px){.topics{grid-template-columns:1fr}}
.topic{background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:transform .45s var(--e),box-shadow .45s var(--e)}
.topic:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(27,42,91,.14)}
.topic .im{position:relative;overflow:hidden;background:#FBF1EB}
.topic .im img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform 1.4s var(--e)}
.topic:hover .im img{transform:scale(1.05)}
.topic .im .no{position:absolute;left:1rem;top:.9rem;background:var(--navy);color:#fff;font-size:.8rem;
  font-weight:800;letter-spacing:.12em;padding:.4rem .75rem;border-radius:100px}
/* reserve two lines for the title so the meta line and body copy sit on the
   same baseline across all three cards, however long a title runs */
/* the concrete shape of each strand, taken from the programme */
.topic .t-meta{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ac);margin:0 0 .6rem;line-height:1.45;
  /* two lines reserved as well, so the body copy starts level in all three */
  min-height:2.9em}
@media(max-width:900px){.topic .t-meta{min-height:0}}

.quote{max-width:820px;margin:0 auto;text-align:center}
.quote p{font-size:clamp(1.15rem,2.1vw,1.6rem);color:var(--navy);font-weight:400;line-height:1.45;letter-spacing:-.02em}
.quote .who{font-size:.86rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-d);margin-top:1.4rem}

/* ---------- subject section ---------- */
.subject{background:linear-gradient(160deg,#FDFAF8,#FBF1EB)}
.implant{position:relative;border-radius:8px;overflow:hidden;background:var(--paper);
  box-shadow:0 24px 60px rgba(27,42,91,.12),0 0 0 1px rgba(27,42,91,.07)}
.implant img{width:100%;aspect-ratio:11/9;object-fit:contain;background:var(--paper);display:block;
  transition:transform 1.4s var(--e)}
.implant:hover img{transform:scale(1.03)}
.implant::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--blue)}

/* ---------- topic cards: artwork at rest, detail on hover ---------- */
/* one picture per strand: the implant (revision), bacteria clusters (infection)
   and a planning scan with its alignment axis (future directions) */
.tile{position:relative;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate;
  min-height:clamp(340px,30vw,430px);padding:clamp(1.3rem,2vw,1.7rem);background:var(--navy-d)}
.tile .art{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--e)}
.tile.t1{background:#FBEEE7}
/* the photo has white margins: zoom past them, and fade through the site blue
   rather than grey so the title band stays in the palette */
.tile.t1 .art{object-position:34% 32%;transform:scale(1.14)}
.topic:hover .tile.t1 .art{transform:scale(1.19)}
.tile.t1::after{background:linear-gradient(180deg,rgba(243,176,140,0) 52%,rgba(224,102,60,.42) 72%,
  rgba(27,42,91,.9) 90%,rgba(16,27,62,.96) 100%)}
.topic:hover .tile .art{transform:scale(1.05)}
/* a navy fade at the foot, so the white title reads on every picture */
.tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,27,62,0) 42%,rgba(16,27,62,.5) 72%,rgba(16,27,62,.86) 100%)}
.tile:focus-visible{outline:3px solid var(--ac);outline-offset:-3px}

.tile .word{position:relative;z-index:2;color:#fff;font-size:clamp(1.6rem,2.7vw,2.2rem);
  font-weight:800;letter-spacing:-.03em;line-height:1;text-shadow:0 2px 16px rgba(16,27,62,.35);
  transition:opacity .35s var(--e),transform .45s var(--e)}

/* the detail covers the card on a solid navy panel, lifting in on hover or keyboard focus */
.tile .bd{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(1.4rem,2.2vw,1.9rem);
  background:rgba(16,27,62,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(14px);
  transition:opacity .38s var(--e),transform .45s var(--e)}
.tile:hover .bd,.tile:focus-within .bd{opacity:1;transform:none}
.tile:hover .word,.tile:focus-within .word{opacity:0;transform:translateY(-10px)}

.tile .bd h3{font-size:1.35rem;line-height:1.2;color:#fff;margin:0 0 .6rem;letter-spacing:-.02em}
.tile .bd .t-meta{font-size:.8rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#F3B08C;margin:0 0 .75rem;line-height:1.45;min-height:0}
.tile .bd p:not(.t-meta){font-size:1.02rem;color:#fff;margin:0;line-height:1.6}

/* no hover to give: picture on top with its title, the detail in white below */
@media (hover:none){
  .tile{min-height:0;display:block;padding:0;--pic:clamp(12rem,44vw,16rem)}
  .tile .art{position:relative;display:block;height:var(--pic)}
  .tile::after{bottom:auto;height:var(--pic)}
  .tile .word{position:absolute;left:clamp(1.3rem,2vw,1.7rem);top:calc(var(--pic) - 3.4rem)}
  .tile .bd{position:static;opacity:1;transform:none;background:var(--paper);
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:clamp(1.3rem,2vw,1.7rem)}
  .tile .bd h3{color:var(--navy)}
  .tile .bd .t-meta{color:var(--ac)}
  .tile .bd p:not(.t-meta){color:var(--muted)}
}

/* ---------- sections ---------- */
section{padding:clamp(3.6rem,7.5vw,7rem) 0}
.tint{background:var(--ice-2)}
.eyebrow{font-size:1rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--blue-d);margin:0 0 1rem}
h2{font-size:clamp(1.9rem,4vw,3.2rem)}
h2 .lt{font-weight:400}
.lead{font-size:1.12rem;color:var(--muted);max-width:58ch}
/* short lines that read better unbroken: lift the measure cap and let the
   container decide, so they only wrap when the screen is genuinely narrow */
.lead.one-line,.head .one-line,.bleed .one-line{max-width:none}
.head{max-width:820px;margin-bottom:3rem}
/* centred section heads (.center and .orn were used in the markup but never
   defined, so these sections were left-aligned with an unstyled rule) */
.center{text-align:center}
.head.center{max-width:820px;margin-left:auto;margin-right:auto}
.center .lead{margin-left:auto;margin-right:auto}
.orn{width:64px;height:3px;border:0;border-radius:2px;margin:1.5rem auto 0;
  background:linear-gradient(90deg,var(--ac-br),var(--blue))}

/* ---------- the chairs' letter ---------- */
.letter,.prose{max-width:68ch;margin:0 auto}
.letter p,.prose p{margin:0 0 1.15rem;color:var(--ink);line-height:1.75}
.letter .lead,.prose .lead{font-size:1.12rem;color:var(--navy);max-width:none;margin-bottom:1.35rem}

/* the chairs' welcome, set as a letter on headed paper rather than a text block
   beside a stock image: white card on the tinted ground, larger type */
.letterhead{position:relative;max-width:760px;margin:0 auto;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  padding:clamp(2rem,4vw,3.2rem) clamp(1.4rem,3.6vw,3.2rem) clamp(1.9rem,3.4vw,2.8rem);
  box-shadow:0 28px 64px rgba(27,42,91,.10)}
.letterhead::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--ac-br) 0%,var(--blue) 45%,transparent 92%)}
.lh-mark{width:58px;height:auto;margin:0 0 1.7rem}
.letterhead .salut{font-size:1.3rem;font-weight:800;color:var(--navy);margin:0 0 1.25rem;
  letter-spacing:-.015em}
.letterhead p{margin:0 0 1.35rem;color:var(--ink);font-size:1.15rem;line-height:1.78}
.letterhead .lead{font-size:1.36rem;line-height:1.58;color:var(--navy);font-weight:500;
  max-width:none;margin-bottom:1.6rem;letter-spacing:-.014em}
@media(max-width:620px){
  .letterhead p{font-size:1.05rem;line-height:1.72}
  .letterhead .lead{font-size:1.16rem}
}
.sign{margin-top:clamp(2.2rem,3.4vw,2.8rem);padding-top:1.8rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem 1.6rem}
@media(max-width:680px){.sign{grid-template-columns:1fr;gap:1.4rem}}
.sign figure{margin:0}
.sign img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:center top;
  display:block;margin:0 0 .85rem;background:var(--ice);
  box-shadow:0 0 0 3px var(--paper),0 6px 18px rgba(27,42,91,.20)}
.sign b{display:block;color:var(--navy);font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
.sign span{display:block;color:var(--muted);font-size:.9rem;margin-top:.25rem;line-height:1.45}
.letter-cta{margin-top:2.2rem;text-align:center}

/* ---------- venue: address, travel routes ---------- */
/* ---------- venue page: the hotel, its facts, and the rooms held for delegates ---------- */
.nowrap{white-space:nowrap}
.v-head{margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.v-head .lead{max-width:64ch;margin-top:1.1rem}
.v-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(1.6rem,3.5vw,3.2rem);align-items:stretch}
.v-photo{margin:0;border-radius:10px;overflow:hidden;background:var(--ice);min-height:340px;
  box-shadow:0 18px 44px rgba(27,42,91,.12)}
.v-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.v-photo:hover img{transform:scale(1.04)}
.v-card{display:flex;flex-direction:column;gap:1.5rem}
.v-card > p{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.7}
.v-facts{display:grid;grid-template-columns:1fr 1fr;column-gap:1.6rem;margin:0;border-top:1px solid var(--line)}
.v-facts > div{padding:.95rem 0;border-bottom:1px solid var(--line)}
.v-facts dt{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
/* values read like the description beside them: body weight and ink, not bold navy */
.v-facts dd{margin:0;color:var(--ink);font-weight:500;font-size:1rem;line-height:1.6}
.v-facts a{color:var(--ac-d);font-weight:500;text-decoration:underline;text-decoration-color:rgba(168,65,31,.25);text-underline-offset:3px}
.v-facts a:hover{text-decoration-color:currentColor}
.v-card .btn-row{margin-top:auto}
/* rooms sit right under the hotel: the text on the left, when booking opens on the right */
.v-stay{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);margin-top:clamp(2.4rem,5vw,3.6rem);
  border-radius:10px;overflow:hidden;background:var(--ice-2);border:1px solid var(--line)}
.v-stay-b{padding:clamp(1.5rem,3vw,2.3rem)}
.v-stay-b .eyebrow{margin:0 0 .45rem}
.v-stay-b h3{font-size:clamp(1.35rem,2vw,1.7rem);color:var(--navy);margin:0 0 .85rem;letter-spacing:-.02em}
.v-stay-b p:not(.eyebrow){margin:0 0 .65rem;color:var(--ink);max-width:70ch}
.v-stay-b p:last-child{margin-bottom:0;color:var(--muted)}
.v-stay-when{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,3vw,2.3rem);
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-d) 100%);color:#fff}
.v-stay-when span{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-l)}
.v-stay-when b{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:.45rem 0 .65rem}
.v-stay-when small{font-size:.88rem;color:rgba(255,255,255,.82);line-height:1.5}
@media(max-width:900px){
  .v-grid,.v-stay{grid-template-columns:1fr}
  .v-photo{min-height:0}.v-photo img{aspect-ratio:16/10;height:auto}
}
@media(max-width:520px){.v-facts{grid-template-columns:1fr}}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* an inline "read more" link, distinct from the button tiers */
.lnk{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ac);transition:gap .3s var(--e),color .3s var(--e)}
.lnk::after{content:"\2192";font-size:.95rem;line-height:1}
.lnk:hover{gap:.75rem;color:var(--ac-d)}

.routes{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.8rem}
.routes-top{margin-top:0}
/* each way in gets an icon tile and its one key fact */
.route-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}
.route-ic{flex:none;width:50px;height:50px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--navy-l),var(--navy-d));box-shadow:0 8px 18px rgba(27,42,91,.22);
  transition:transform .4s var(--e)}
.route:hover .route-ic{transform:rotate(-6deg) scale(1.06)}
.route-ic svg{width:25px;height:25px}
.route-tag{font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ac);
  background:var(--ice);border-radius:100px;padding:.42rem .85rem;white-space:nowrap}
@media(max-width:820px){.routes{grid-template-columns:1fr}}
.route{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:6px;padding:1.7rem 1.6rem;
  transition:transform .4s var(--e),box-shadow .4s var(--e),border-color .4s var(--e)}
.route:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(27,42,91,.13);
  border-color:transparent}
.route h3{font-size:1.08rem;color:var(--navy);margin-bottom:.6rem;letter-spacing:-.015em}
.route p{font-size:1rem;color:var(--muted);margin:0 0 1.2rem;line-height:1.65}
.route .lnk{margin-top:auto;align-self:flex-start}
.routes-note{margin:1.8rem 0 0;text-align:center;font-size:.88rem;color:var(--muted)}

/* stats */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
@media(max-width:820px){.nums{grid-template-columns:1fr 1fr}}
.num{padding:2.2rem 1.6rem 2.2rem 0;border-right:1px solid var(--line)}
.num:last-child{border-right:0}
.num b{display:block;font-size:clamp(2.6rem,5.2vw,4rem);font-weight:800;color:var(--navy);letter-spacing:-.045em;line-height:1}
.num b i{font-style:normal;color:var(--blue-d)}
.num span{display:block;font-size:.9rem;color:var(--muted);margin-top:.55rem;max-width:20ch}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:920px){.split{grid-template-columns:1fr}}
.frame{position:relative;border-radius:4px;overflow:hidden;background:var(--ice)}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--e)}
.frame:hover img{transform:scale(1.05)}
.frame .badge{position:absolute;left:0;bottom:0;background:var(--navy);color:#fff;font-size:.83rem;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:.75rem 1.3rem}
.stack{display:grid;gap:1.2rem}

/* list */
.pts{margin-top:2rem;border-top:1px solid var(--line)}
.pt{display:grid;grid-template-columns:48px 1fr;gap:1.2rem;padding:1.3rem 0;border-bottom:1px solid var(--line);align-items:start}
.pt i{font-style:normal;font-weight:800;color:var(--blue-d);font-size:.95rem;letter-spacing:.08em;padding-top:.2rem}
.pt b{display:block;color:var(--navy);font-weight:700;font-size:1.06rem}
.pt span{color:var(--muted);font-size:.95rem}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:2rem 1.8rem;
  transition:transform .4s var(--e),box-shadow .4s var(--e),border-color .4s var(--e)}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(27,42,91,.13);border-color:transparent}
.card .ic{width:46px;height:46px;border-radius:50%;background:var(--navy);display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:.9rem;margin-bottom:1.2rem}
.card h3{font-size:1.2rem;margin-bottom:.6rem}
.card p{font-size:.94rem;color:var(--muted);margin:0}

/* programme */
.sched{border-top:2px solid var(--navy)}
.day-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.2rem;margin:0;
  padding:1.1rem 0;border-bottom:1px solid var(--line)}
.day-head b{color:var(--navy);font-size:1.15rem;font-weight:800;letter-spacing:-.015em}
.day-head span{font-size:.86rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.day-head span:last-child{color:var(--ac);font-variant-numeric:tabular-nums}

/* ---------- programme: control panel ---------- */
.prog-controls{margin:0 0 1.3rem;background:var(--ice-2);border:1px solid var(--line);
  border-radius:10px;padding:clamp(1.2rem,2vw,1.6rem)}
.pctl-top{display:block}
.pctl-search{min-width:0}
.plbl{display:block;font-size:.86rem;font-weight:700;color:var(--navy);margin-bottom:.5rem}
#progQ{width:100%;font:inherit;font-family:var(--f);font-size:1.05rem;color:var(--ink);
  background:var(--paper);border:1.5px solid rgba(27,42,91,.22);border-radius:8px;padding:.85rem 1rem;
  transition:border-color .25s var(--e),box-shadow .25s var(--e)}
#progQ::placeholder{color:var(--muted);opacity:.8}
#progQ:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(196,80,43,.18)}
/* day chips on the left, the download on the right of the same line */
.pctl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.9rem 1.4rem;margin-top:1.1rem}
.pctl-row .pchips{margin-top:0}

/* Download the programme: one colour wherever it appears. Deep teal-blue,
   distinct from navy and from the Register cobalt, and dark enough to carry
   white button text at 4.9:1. A soft ring pulses out from it every few
   seconds; the reduced-motion block switches that off. */
.btn-dl{color:#fff;
  background:linear-gradient(135deg,#2C3D78 0%,#1B2A5B 55%,#101B3E 100%);
  box-shadow:0 8px 20px rgba(27,42,91,.34),inset 0 1px 0 rgba(255,255,255,.28);
  animation:dlpulse 3s var(--e) 1.2s infinite}
.btn-dl:hover{transform:translateY(-2px);animation-play-state:paused;
  background:linear-gradient(135deg,#36498A 0%,#2C3D78 55%,#1B2A5B 100%);
  box-shadow:0 13px 28px rgba(27,42,91,.44),inset 0 1px 0 rgba(255,255,255,.4)}
@keyframes dlpulse{
  0%,100%{box-shadow:0 8px 20px rgba(27,42,91,.34),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 0 rgba(27,42,91,.45)}
  60%{box-shadow:0 10px 24px rgba(27,42,91,.4),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 14px rgba(27,42,91,0)}}
.pctl-dl{flex:none;padding:.95rem 1.6rem;font-size:.78rem}

/* day switcher: one day at a time */
.pchips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.pchip{font:inherit;font-family:var(--f);font-size:.82rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);background:var(--paper);cursor:pointer;
  border:1.5px solid rgba(27,42,91,.22);border-radius:100px;padding:.7rem 1.5rem;
  box-shadow:0 1px 2px rgba(16,27,62,.05),
    0 4px 10px rgba(224,102,60,.16),
    0 10px 22px rgba(196,80,43,.11);
  transition:all .25s var(--e)}
.pchip:hover{border-color:var(--navy);background:var(--ice);
  box-shadow:0 2px 5px rgba(16,27,62,.07),
    0 7px 16px rgba(224,102,60,.24),
    0 16px 32px rgba(196,80,43,.18)}
.pchip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pchip:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.pempty{margin:2rem 0;font-size:1rem;color:var(--muted)}
.pempty button{font:inherit;font-family:var(--f);font-size:1rem;color:var(--ac);background:none;
  border:0;padding:0;cursor:pointer;text-decoration:underline;font-weight:700}

/* ---------- programme: day ---------- */
.pdays{margin-top:2.6rem}
/* .pday is a <section>, so the global section padding has to be cleared here */
.pday{padding:0;margin-bottom:3rem}
.pday:last-child{margin-bottom:0}
/* day header: a tear-off calendar badge, the day name, and one line of facts */
.pday-head{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;
  padding-bottom:1.2rem;border-bottom:2px solid var(--navy)}
.pcal{flex:none;display:flex;flex-direction:column;width:78px;text-align:center;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 6px 18px rgba(27,42,91,.14)}
.pcal-m{background:var(--navy);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;padding:.3rem 0}
.pcal-d{font-size:2rem;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.03em;
  padding:.45rem 0 .1rem}
.pcal-w{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-bottom:.45rem}
.pday-id{display:flex;flex-direction:column;gap:.6rem;min-width:0;flex:1 1 240px}
.pday-label{font-size:1.6rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1}
.pday-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.3rem;font-size:1rem;color:var(--ink)}
.pday-meta > span{display:inline-flex;align-items:center;gap:.45rem}
.pday-meta svg{width:18px;height:18px;flex:none;color:var(--ac)}
.pday-meta b{font-weight:700;color:var(--ac);font-variant-numeric:tabular-nums}
.pday-head .pcollapse{margin-left:auto}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pcollapse{font:inherit;font-family:var(--f);font-size:.78rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--paper);cursor:pointer;
  border:1.5px solid rgba(27,42,91,.26);border-radius:100px;padding:.65rem 1.35rem;
  box-shadow:0 1px 2px rgba(16,27,62,.05),
    0 4px 10px rgba(224,102,60,.16),
    0 10px 22px rgba(196,80,43,.11);
  transition:all .25s var(--e)}
.pcollapse:hover{border-color:var(--navy);background:var(--ice);
  box-shadow:0 2px 5px rgba(16,27,62,.07),
    0 7px 16px rgba(224,102,60,.24),
    0 16px 32px rgba(196,80,43,.18)}
.pcollapse:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
@media(max-width:560px){
  .pcal{width:64px}.pcal-d{font-size:1.6rem}
  .pday-label{font-size:1.4rem}
}

/* ---------- programme: rows ---------- */
.prow{border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
/* the whole header is one button, so any part of the block opens it */
.prow-btn,.prow-static{display:flex;align-items:flex-start;gap:1.4rem;width:100%;
  text-align:left;padding:1.2rem .8rem 1.2rem .6rem;background:none;border:0;
  font:inherit;font-family:var(--f)}
.prow-btn{cursor:pointer;border-radius:8px;transition:background .22s var(--e)}
.prow-btn:hover{background:var(--ice-2)}
.prow-btn:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.ptime{flex:0 0 82px;width:82px}
.pstart{display:block;font-size:1.05rem;font-weight:800;color:var(--ac);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.pdur{display:block;font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:.2rem}
.pmain-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.ptitle{font-size:1.12rem;font-weight:800;color:var(--navy);letter-spacing:-.018em;line-height:1.3}
.psub{font-size:.86rem;color:var(--muted)}
/* the session note leads the block, a step larger than the old talk count */
.psub-note{font-size:.95rem;line-height:1.55;color:var(--muted);max-width:74ch}
.psub-note .pnote-l{font-size:.74rem;margin-right:.6rem}

/* the affordance: a chevron that turns when the block is open */
.pchev{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ice);
  position:relative;margin-top:.15rem;
  transition:transform .3s var(--e),background .22s var(--e)}
.pchev::before,.pchev::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:2px;
  border-radius:2px;background:var(--navy)}
.pchev::before{transform:translate(-70%,-50%) rotate(45deg)}
.pchev::after{transform:translate(-30%,-50%) rotate(-45deg)}
.prow-btn:hover .pchev{background:var(--paper)}
.prow.is-open .pchev{transform:rotate(180deg);background:var(--ac)}
.prow.is-open .pchev::before,.prow.is-open .pchev::after{background:var(--paper)}

/* breaks stay quiet and are not interactive */
.prow.break{background:var(--ice-2)}
.prow.break .prow-static{padding-top:.85rem;padding-bottom:.85rem}
.prow.break .pstart{color:var(--muted);font-weight:700;font-size:.98rem}
.prow.break .ptitle{font-size:1rem;font-weight:600;color:var(--muted)}
.prow.break .pdur{opacity:.8}

/* talks line up under the title, clear of the time column */
.ptalks-wrap{padding:0 .8rem 1.3rem calc(82px + 1.4rem + .6rem)}
.ptalks{list-style:none;margin:0;padding:0 0 0 1.2rem;border-left:2px solid var(--ac-br);
  counter-reset:talk}
/* title left, speaker in its own right-hand column, so names line up */
.ptalk{display:grid;grid-template-columns:22px minmax(0,1fr) 240px;gap:.4rem .85rem;
  padding:.62rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.ptalk:last-child{border-bottom:0}
/* each talk is numbered within its session, so the count stays right if talks change */
.ptalk::before{counter-increment:talk;content:counter(talk);
  font-size:.78rem;font-weight:800;color:var(--ac-br);font-variant-numeric:tabular-nums;
  text-align:right;letter-spacing:.02em}
.ptx{font-size:1rem;color:var(--ink);line-height:1.45}
.psp{font-size:.92rem;font-weight:700;color:var(--navy);line-height:1.45}
@media(max-width:820px){
  .ptalk{grid-template-columns:22px 1fr;gap:.15rem .85rem}
  .psp{grid-column:2;font-size:.86rem}
  .psp:empty{display:none}
}
.pnote{margin:1rem 0 0 1.1rem;padding-top:.85rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--muted);line-height:1.6}
/* the note is metadata, so it carries a small label rather than reading as stray text */
.pnote-l{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ac);margin-right:.65rem}
.prog-note{margin:1.2rem 0 0;font-size:.84rem;color:var(--muted)}
mark{background:var(--ice);color:inherit;padding:0 .1em;border-radius:2px}

@media(max-width:700px){
  .prow-btn,.prow-static{flex-wrap:wrap;gap:.5rem 1rem;padding-left:.4rem}
  .ptime{flex:0 0 100%;width:auto;display:flex;align-items:baseline;gap:.7rem}
  .pdur{margin-top:0}
  .pmain-head{flex:1 1 auto}
  .ptalks-wrap{padding-left:1rem}
  .pctl-dl{width:100%;justify-content:center}
  .pcollapse{margin-left:0}
}
@media print{
  .prog-controls,.pcollapse,.pempty,.pchev{display:none!important}
  .pday[hidden]{display:block!important}
  .ptalks-wrap[hidden]{display:block!important}
  .ptalk[hidden]{display:list-item!important}
  .pday,.prow{break-inside:avoid}
}

/* programme summary tiles */
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:0 0 3rem}
@media(max-width:900px){.summary{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.summary{grid-template-columns:1fr}}
.sm{background:var(--ice-2);border-left:4px solid var(--ac-br);border-radius:0 6px 6px 0;
  padding:1.2rem 1.3rem}
.sm b{display:block;color:var(--navy);font-size:clamp(1.5rem,2.4vw,1.95rem);font-weight:800;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.sm span{display:block;color:var(--navy);font-weight:700;font-size:.92rem;margin-top:.5rem}
.sm em{display:block;font-style:normal;color:var(--muted);font-size:.82rem;margin-top:.2rem;
  line-height:1.4}
.prog-note{margin:1.2rem 0 0;font-size:.84rem;color:var(--muted)}

.fac-h{font-size:.98rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ac);margin:0 0 1.2rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.fac-h+.fac-grid{margin-bottom:2.8rem}
.slot b{display:block;color:var(--navy);font-size:1.05rem;font-weight:700}
.slot em{font-style:normal;font-size:.92rem;color:var(--muted)}
.slot .w{font-size:.88rem;color:var(--muted)}
.slot.key{background:linear-gradient(90deg,var(--ice),transparent 70%)}
.tabs{display:flex;gap:.6rem;margin-bottom:2.2rem;flex-wrap:wrap}
.tabs button{font:inherit;font-family:var(--f);font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.8rem 1.8rem;border-radius:100px;border:1.5px solid var(--line);background:var(--paper);color:var(--navy);cursor:pointer;transition:all .25s var(--e)}
.tabs button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* faculty */
.fac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:900px){.fac-grid{grid-template-columns:repeat(2,1fr)}}
.fac{text-align:center;padding:1.5rem .9rem;border:1px solid var(--line);border-radius:6px;background:var(--paper);transition:all .4s var(--e)}
.fac:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(27,42,91,.12);border-color:transparent}
.fac .av{width:62px;height:62px;margin:0 auto .8rem;border-radius:50%;background:var(--ice);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:1.1rem}
.fac b{display:block;color:var(--navy);font-size:.96rem;font-weight:700}
.fac span{display:block;font-size:.82rem;color:var(--muted);margin-top:.25rem;line-height:1.4}
.fac .c{font-size:.83rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.45rem}

/* full bleed CTA */
.bleed{position:relative;overflow:hidden;color:#fff;text-align:center;--x:0;padding:clamp(4rem,9vw,7.5rem) 0}
.bleed img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:0}
.bleed .scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(16,27,62,.72),rgba(16,27,62,.55) 45%,rgba(16,27,62,.85))}
.bleed .wrap{position:relative;z-index:3}
/* a picture-only banner: no copy to protect, so it keeps a set height and a
   lighter tint that lets the photo come through */
/* travel opener: the photo carries the section title and the
   public transport route from the airport, drawn as a line of stops */
.travel-hero{padding:clamp(3.8rem,7vw,6rem) 0 clamp(3.2rem,6vw,4.8rem)}
.journey{list-style:none;margin:clamp(2rem,4vw,2.8rem) auto 0;padding:clamp(1.3rem,2.4vw,1.9rem) clamp(1rem,2.6vw,2.2rem);
  max-width:1120px;display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto;
  align-items:start;column-gap:.5rem;text-align:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:16px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.jn-stop{display:flex;flex-direction:column;align-items:center;width:clamp(112px,11.5vw,150px)}
.jn-ic{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);color:var(--navy);box-shadow:0 8px 22px rgba(16,27,62,.3)}
.jn-ic svg{width:26px;height:26px}
.jn-end .jn-ic{background:linear-gradient(135deg,var(--ac-br),var(--ac-d));color:#fff;
  box-shadow:0 0 0 6px rgba(243,176,140,.3),0 8px 22px rgba(16,27,62,.3)}
.jn-t{display:flex;flex-direction:column;gap:.2rem}
.jn-stop .jn-t{margin-top:.75rem}
.jn-t b{color:#fff;font-size:.98rem;font-weight:700;line-height:1.3}
.jn-t small{color:var(--ac-l);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
.jn-leg{position:relative;padding-top:44px}
.jn-leg::before{content:"";position:absolute;left:.2rem;right:.2rem;top:26px;border-top:2px dashed rgba(255,255,255,.55)}
.jn-leg::after{content:"";position:absolute;right:.1rem;top:22px;width:8px;height:8px;
  border-top:2px solid rgba(255,255,255,.75);border-right:2px solid rgba(255,255,255,.75);transform:rotate(45deg)}
.jn-leg .jn-t b{font-size:.92rem}
.jn-leg .jn-t small{color:rgba(255,255,255,.78);letter-spacing:.02em;text-transform:none;font-weight:500;font-size:.84rem}
@media(max-width:900px){
  .journey{grid-template-columns:1fr;max-width:460px;text-align:left;row-gap:0}
  .jn-stop{flex-direction:row;width:auto;gap:1rem}
  .jn-stop .jn-t{margin-top:0}
  .jn-leg{padding:.9rem 0 .9rem 3.3rem;margin-left:26px;border-left:2px dashed rgba(255,255,255,.55)}
  .jn-leg::before,.jn-leg::after{display:none}
}
/* a soft pool of shade behind the centred copy, so the photo stays bright at
   the edges but the text sits on something calm */
.bleed .scrim::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 58% at 50% 52%,rgba(16,27,62,.42) 0%,rgba(16,27,62,.18) 60%,rgba(16,27,62,0) 100%)}
.bleed h2{color:#fff;max-width:18ch;margin:0 auto}
/* .bleed p sets margin for the body copy and was also zeroing the eyebrow's
   bottom margin, so the eyebrow sat flush against the heading */
.bleed .eyebrow{color:#F3B08C;margin:0 auto 1rem}
.bleed p{color:#fff;max-width:50ch;margin:1.3rem auto 0;font-size:1.12rem;font-weight:500;line-height:1.65;
  text-shadow:0 1px 2px rgba(16,27,62,.55),0 2px 18px rgba(16,27,62,.45)}
.bleed p{margin-left:auto;margin-right:auto}
.bleed .note-date{font-size:1.05rem;color:rgba(255,255,255,.94);margin:0 auto;letter-spacing:.005em}
.count{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin:2.6rem 0 .8rem}
.count div{min-width:98px;padding:1.1rem .6rem;border:1px solid rgba(255,255,255,.28);border-radius:4px;background:rgba(255,255,255,.08)}
.count b{display:block;font-size:clamp(1.9rem,4.6vw,2.8rem);font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.count span{display:block;font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:.55rem}
.bleed .go{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

/* table */
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;font-size:.87rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-d);font-weight:800;padding:0 0 .9rem;border-bottom:2px solid var(--navy)}
th:last-child,td:last-child{text-align:right;font-variant-numeric:tabular-nums}
td{padding:1.05rem 0;border-bottom:1px solid var(--line)}
tbody tr{transition:background .25s var(--e)} tbody tr:hover{background:var(--ice-2)}
td b{color:var(--navy);font-weight:700}
td small{display:block;color:var(--muted);font-size:.83rem;margin-top:.15rem}
.note{background:var(--ice);border-left:3px solid var(--blue);padding:1.3rem 1.5rem;margin-top:2rem;font-size:.93rem;color:var(--navy);border-radius:0 4px 4px 0}
.note b{display:block;font-weight:800;margin-bottom:.25rem}
.two{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:920px){.two{grid-template-columns:1fr}}
.box{background:var(--navy);color:rgba(255,255,255,.82);padding:2.1rem 1.9rem;border-radius:4px;text-align:center}
.box h3{color:#fff;margin-bottom:.7rem}
.box p{font-size:.92rem}
.box .btn{width:100%;justify-content:center;padding-inline:1rem}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1.5rem;flex-wrap:wrap;
  padding:1.1rem 0;border-bottom:1px solid var(--line);font-size:1.15rem;line-height:1.45}
.row:last-of-type{border-bottom:0}
/* label in body ink rather than the pale muted grey, so both halves read easily */
.row span{color:var(--ink);font-weight:500}
.row b{color:var(--navy);font-weight:700;text-align:right}

/* page header for inner pages */
.ph{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;
  min-height:clamp(280px,32vw,420px);padding:clamp(4rem,8vw,6rem) 0 clamp(2.2rem,4vw,3.4rem);
  background:var(--navy)}
.ph .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  transform:scale(1.04);animation:phpan 40s ease-in-out infinite alternate}
@keyframes phpan{from{transform:scale(1.04)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.ph .bg{animation:none}}
.ph .scrim.plain{background:
  radial-gradient(90% 130% at 12% 0%,#2C3D78 0%,#1B2A5B 45%,#101B3E 100%)}
.ph .scrim{position:absolute;inset:0;z-index:2;background:
  linear-gradient(100deg,rgba(16,27,62,.92) 0%,rgba(16,27,62,.72) 42%,rgba(16,27,62,.34) 100%)}
.ph .sky{position:absolute;left:0;right:0;bottom:0;z-index:3;width:100%;
  height:clamp(90px,14vh,180px);object-fit:cover;object-position:center bottom;opacity:.3;
  -webkit-mask-image:linear-gradient(to top,#000 35%,transparent);mask-image:linear-gradient(to top,#000 35%,transparent)}
.ph .wrap{position:relative;z-index:5;width:100%}
.ph h1{color:#fff;font-size:clamp(2.1rem,5vw,4rem)}
.ph h1 .lt{color:rgba(255,255,255,.62)}
.ph p{color:rgba(255,255,255,.86);margin-top:1rem;font-size:clamp(.95rem,1.25vw,1.08rem);max-width:none}
@media(min-width:900px){.ph p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.crumb{font-size:1.04rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#F3B08C;margin-bottom:.9rem}
.ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--blue);z-index:6}
.ph-meta{position:relative;z-index:5;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.6rem;
  padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.22)}
.ph-meta span{font-size:.92rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.84);display:flex;align-items:center}
.ph-meta span b{color:#fff;font-weight:800;font-size:1.12rem;letter-spacing:.02em}

/* form */
.form{max-width:640px}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.87rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-d);font-weight:800;margin-bottom:.45rem}
.field input,.field textarea,.field select{width:100%;font:inherit;font-family:var(--f);font-size:.95rem;padding:.85rem .95rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:4px;transition:all .25s var(--e)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-d);box-shadow:0 0 0 3px rgba(224,102,60,.18);outline:none}
.field textarea{min-height:130px;resize:vertical}

/* footer */
footer{background:var(--navy-d);color:rgba(255,255,255,.66);font-size:.9rem;padding:clamp(3rem,6vw,4.6rem) 0 2rem}
.f-grid{display:grid;grid-template-columns:1.7fr 1.1fr 1fr 1.1fr;gap:2.4rem}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
footer h4{color:#F3B08C;font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;margin:0 0 1.1rem}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.6rem}
footer a{text-decoration:none;cursor:pointer;transition:color .22s var(--e)}
footer a:hover{color:#fff;text-decoration:underline}
.f-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.f-brand img{width:46px}
.f-brand b{color:#fff;font-size:.95rem;font-weight:800;display:block;line-height:1.1}
.f-brand span{color:#F3B08C;font-size:.75rem;font-weight:700;letter-spacing:.19em;display:block;margin-top:.2rem}
.f-base{margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:rgba(255,255,255,.42)}

/* sticky register */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(16,27,62,.97);
  display:flex;align-items:center;gap:1.2rem;padding:.75rem max(var(--pad),calc((100% - 1720px)/2 + var(--pad)));  /* line the Register button up with the nav above */
  transform:translateY(130%);
  transition:transform .45s var(--e),background .4s var(--e),box-shadow .4s var(--e);
  border-top:1px solid rgba(255,255,255,.12)}
.stick.onlight{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  border-top:1px solid rgba(27,42,91,.14);
  box-shadow:0 -10px 34px rgba(27,42,91,.14)}
.stick.onlight .l{color:var(--navy)}
.stick.onlight .l b{color:var(--navy)}
.stick.onlight .l span{color:var(--muted)}
.stick.show{transform:none}
.stick .l{color:#fff;font-size:.9rem;line-height:1.3}
.stick .l b{display:block;font-weight:700}
.stick .l > span{display:block;color:#F3B08C;font-size:.84rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.15rem}
.stick .btn{margin-left:auto;flex:none;padding:.82rem 1.3rem .82rem 1.6rem;font-size:.76rem}  /* same size as the nav Register */
@media(max-width:900px){.stick .l b{font-size:.84rem}}
@media(max-width:640px){.stick .l > b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.stick .l > span{display:none}}

/* "TBC" stands in wherever a figure is not confirmed yet; the title gives the full words */
abbr.tbc{text-decoration:none;cursor:help;letter-spacing:.02em}
td abbr.tbc{font-weight:700;color:var(--muted)}

/* ---------- registration: fee periods, fee table, next steps ---------- */
.fee-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.8rem}
.fee-flag{margin:0;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);
  background:var(--ice);border-radius:100px;padding:.5rem 1rem}
.fee-periods{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.fee-period{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:1.15rem 1.3rem;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;transition:all .3s var(--e)}
.fee-period b{font-size:1.2rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.fee-period > span:not(.fp-tag){font-size:.98rem;color:var(--muted)}
.fp-tag{position:absolute;right:1rem;top:1rem;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  border-radius:100px;padding:.3rem .65rem;background:rgba(255,255,255,.18);color:#fff}
.fee-period.is-now,.fee-period.is-next{background:linear-gradient(145deg,var(--navy) 0%,var(--navy-d) 100%);border-color:var(--navy);
  box-shadow:0 14px 32px rgba(27,42,91,.22)}
.fee-period.is-now b,.fee-period.is-next b{color:#fff}
.fee-period.is-now > span:not(.fp-tag),.fee-period.is-next > span:not(.fp-tag){color:rgba(255,255,255,.85)}
.fee-table{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
table.fees{width:100%;border-collapse:collapse;font-size:1.02rem}
table.fees th,table.fees td{padding:1.05rem 1.3rem;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
table.fees thead th{background:var(--ice-2);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);border-bottom:2px solid var(--navy)}
table.fees th:first-child{text-align:left}
table.fees tbody th{font-weight:700;color:var(--navy);letter-spacing:0;text-transform:none;font-size:1.02rem}
table.fees td{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;font-size:1.08rem;width:15%}
table.fees tbody tr:last-child th,table.fees tbody tr:last-child td{border-bottom:0}
table.fees tbody tr:hover{background:var(--ice-2)}
table.fees .is-now,table.fees .is-next{background:rgba(196,80,43,.07);color:var(--ac-d)}
table.fees thead .is-now,table.fees thead .is-next{background:var(--navy);color:#fff;border-bottom-color:var(--navy)}
.fee-foot{margin:1rem 0 0;font-size:.95rem;color:var(--muted)}
.reg-next{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:clamp(2.4rem,5vw,3.4rem)}
.reg-card{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;padding:clamp(1.5rem,3vw,2.2rem);border-radius:10px}
.reg-card .eyebrow{margin:0}
.reg-card h3{font-size:clamp(1.3rem,2vw,1.6rem);margin:0;letter-spacing:-.02em}
.reg-card p:not(.eyebrow){margin:0 0 .6rem;line-height:1.65}
.reg-card .btn{margin-top:auto}
.reg-book{background:linear-gradient(145deg,var(--navy) 0%,var(--navy-d) 100%);color:#fff}
.reg-book .eyebrow{color:var(--ac-l)}
.reg-book h3{color:#fff}
.reg-book p:not(.eyebrow){color:rgba(255,255,255,.86)}
.reg-stay{background:var(--ice-2);border:1px solid var(--line)}
.reg-stay h3{color:var(--navy)}
.reg-stay p:not(.eyebrow){color:var(--muted)}
.btn.is-soon{cursor:default;opacity:.92;box-shadow:none}
.btn.is-soon:hover{transform:none}
.btn.is-soon::before{display:none}
@media(max-width:820px){
  .fee-periods,.reg-next{grid-template-columns:1fr}
  .fee-table{border:0;background:none;overflow:visible}
  table.fees thead{display:none}
  table.fees tbody{display:grid;gap:.9rem}
  table.fees tbody tr{display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}
  table.fees tbody th{grid-column:1/-1;text-align:left;background:var(--ice-2);border-bottom:1px solid var(--line)!important}
  table.fees td{width:auto;text-align:left;border-bottom:0;padding:.8rem 1rem}
  table.fees td::before{content:attr(data-label);display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
  table.fees td.is-now::before,table.fees td.is-next::before{color:var(--ac)}
}

/* ---------- industry: sponsorship contact and compliance status ----------
   Mostly white, slate and navy: the one blue on the page is the email button,
   so it is the obvious next step. */
.ph-ind .bg{object-position:30% 38%}
/* a neutral dark wash rather than the navy one, so the warm stone and sky of
   the artwork come through */
.ph-ind .scrim{background:linear-gradient(100deg,rgba(16,27,62,.88) 0%,rgba(16,27,62,.62) 42%,rgba(16,27,62,.12) 100%)}
.ind-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(1.4rem,3vw,2rem);align-items:stretch}
.ind-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
  padding:clamp(1.7rem,3.4vw,2.6rem);border-radius:14px}
.ind-card .eyebrow{margin:0;color:var(--muted)}
.ind-card h2,.ind-card h3{margin:0;letter-spacing:-.025em;color:var(--navy)}
.ind-card p:not(.eyebrow){margin:0;line-height:1.7;font-size:1.05rem;color:var(--ink)}
.ind-spon{background:var(--paper);border:1px solid var(--line);box-shadow:0 20px 48px rgba(16,27,62,.09)}
.ind-spon h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.ind-person{display:flex;align-items:center;gap:1rem;width:100%;margin:.4rem 0 .6rem;padding:1rem 1.15rem;
  background:var(--ice-2);border:1px solid var(--line);border-radius:12px}
.ind-av{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.04em}
img.ind-av{object-fit:cover;background:var(--ice);box-shadow:0 0 0 3px #fff,0 4px 12px rgba(16,27,62,.18)}
.ind-who{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ind-who b{font-size:1.15rem;color:var(--navy)}
.ind-who span{font-size:.92rem;color:var(--muted)}
.ind-who a{font-size:.98rem;font-weight:700;color:var(--navy);text-decoration:underline;
  text-decoration-color:rgba(27,42,91,.3);text-underline-offset:3px;overflow-wrap:anywhere}
.ind-who a:hover{text-decoration-color:var(--navy)}
.ind-spon .btn{margin-top:.3rem}
.ind-comp{background:var(--ice-2);border:1px solid var(--line)}
.ind-comp h3{font-size:clamp(1.35rem,2.2vw,1.7rem)}
.ind-comp p:not(.eyebrow){color:var(--muted)}
/* status tracker: done, in progress, still to come */
.ind-steps{list-style:none;margin:.6rem 0 0;padding:0;width:100%;display:flex;flex-direction:column}
.ind-steps li{position:relative;display:flex;gap:1rem;padding:0 0 1.35rem}
.ind-steps li:last-child{padding-bottom:0}
.ind-steps li::before{content:"";position:absolute;left:11px;top:26px;bottom:2px;width:2px;background:rgba(27,42,91,.14)}
.ind-steps li:last-child::before{display:none}
.ind-steps li.done::before{background:var(--navy)}
.ind-steps i{flex:none;position:relative;z-index:1;width:24px;height:24px;border-radius:50%;
  border:2px solid rgba(27,42,91,.22);background:var(--paper)}
.ind-steps li.done i{background:var(--navy);border-color:var(--navy)}
.ind-steps li.done i::after{content:"";position:absolute;left:6px;top:3px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.ind-steps li.now i{border-color:var(--navy);box-shadow:0 0 0 5px rgba(27,42,91,.08)}
.ind-steps li.now i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--navy)}
.ind-st{display:flex;flex-direction:column;gap:.1rem}
.ind-st b{color:var(--navy);font-size:1.02rem}
.ind-steps li:not(.done):not(.now) .ind-st b{color:var(--muted)}
.ind-st span{font-size:.9rem;color:var(--muted)}
@media(max-width:900px){.ind-grid{grid-template-columns:1fr}}

/* ---------- contacts: a light banner that carries the contacts themselves ---------- */
.pc{position:relative;overflow:hidden;background:linear-gradient(160deg,#FDFAF8 0%,var(--ice-2) 55%,var(--ice) 100%);
  padding:clamp(3.4rem,6vw,4.8rem) 0 clamp(2.2rem,3.6vw,3rem);border-bottom:4px solid var(--blue)}
.pc::before{content:"";position:absolute;right:-8%;top:-30%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(224,102,60,.14),rgba(224,102,60,0) 65%);pointer-events:none}
.pc-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.pc .crumb{color:var(--blue-d)}
.pc h1{font-size:clamp(2.1rem,5vw,4rem);color:var(--navy);margin:0}
.pc h1 .lt{font-weight:400}
.pc-sub{color:var(--muted);font-size:1.08rem;line-height:1.6;margin:1rem 0 0;max-width:46ch}
.pc-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.86rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pc-meta b{color:var(--navy);font-size:1rem;letter-spacing:.02em}
.qcs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.qc{display:flex;align-items:center;gap:1rem;text-decoration:none;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:.9rem 1rem .9rem 1rem;box-shadow:0 10px 26px rgba(27,42,91,.08);
  transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s var(--e)}
.qc:hover{transform:translateY(-3px);border-color:rgba(27,42,91,.28);box-shadow:0 16px 34px rgba(27,42,91,.14)}
.qc:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.qc-av{flex:none;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:.94rem;letter-spacing:.04em}
img.qc-av{object-fit:cover;background:var(--ice);box-shadow:0 0 0 3px #fff,0 4px 12px rgba(16,27,62,.16)}
.qc-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
.qc-t b{color:var(--navy);font-size:1.05rem}
.qc-t small{color:var(--muted);font-size:.88rem}
.qc-t em{font-style:normal;color:var(--navy);font-size:.88rem;font-weight:600;margin-top:.15rem;overflow-wrap:anywhere;opacity:.85}
.qc-m{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ice);color:var(--ac);
  transition:background .3s var(--e),color .3s var(--e)}
.qc:hover .qc-m{background:var(--ac);color:#fff}
.qc-m svg{width:19px;height:19px}
@media(max-width:900px){.pc-in{grid-template-columns:1fr}}

/* =====================================================================
   Final touches: light icons, soft shades, gentle movement. Each block is
   independent, so any one can be removed without touching the rest.
   ===================================================================== */

/* icons: homepage stats band */
.band-num .n-ic{display:grid;place-items:center;width:44px;height:44px;margin:0 auto .7rem;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--ac-l)}
.band-num .n-ic svg{width:22px;height:22px}

/* icons: programme summary tiles (top right, quiet) */
.sm{position:relative}
.sm-ic{position:absolute;right:1rem;top:1rem;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--paper);color:var(--blue-d);box-shadow:0 4px 12px rgba(27,42,91,.08)}
.sm-ic svg{width:20px;height:20px}

/* icons: venue facts */
.v-facts dt{display:flex;align-items:center;gap:.45rem}
.vf-ic{display:inline-grid;color:var(--blue-d)}
.vf-ic svg{width:16px;height:16px}

/* faculty: three soft shades cycle across the grid, so the wall of cards
   has some rhythm; the initials ring up on hover */
.fac-grid .fac:nth-child(3n+2) .av{background:#F7E3D8;color:var(--navy-l)}
.fac-grid .fac:nth-child(3n+3) .av{background:#FBEEE7;color:#C4502B}
.fac .av{transition:box-shadow .4s var(--e),transform .4s var(--e)}
.fac:hover .av{transform:scale(1.06);box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(224,102,60,.25)}

/* pale sections: a faint dot texture and a soft light in one corner */
.tint{background:
  radial-gradient(55% 60% at 100% 0%,rgba(224,102,60,.10),rgba(224,102,60,0) 70%),
  radial-gradient(circle at 1px 1px,rgba(27,42,91,.07) 1px,transparent 1.3px) 0 0/24px 24px,
  var(--ice-2)}

/* the chairs' letter sits in two pools of light */
.sec-letter{background:
  radial-gradient(38% 30% at 10% 22%,rgba(224,102,60,.10),rgba(224,102,60,0) 70%),
  radial-gradient(40% 36% at 92% 72%,rgba(224,102,60,.09),rgba(224,102,60,0) 70%),
  var(--ice-2)}

/* footer: a soft top light and the same Istanbul skyline as the page headers */
footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#16234D 0%,var(--navy-d) 45%)}
footer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(110px,14vw,190px);
  background:url("../img/skyline-istanbul.png") center bottom/cover no-repeat;opacity:.07;pointer-events:none}
footer > *{position:relative}

/* movement: the short blue rules draw in when their heading appears */
.rv.pre hr.orn{transform:scaleX(0)}
.rv.in hr.orn{transform:scaleX(1);transition:transform .9s .25s var(--e)}

/* movement: the route legs in the travel banner flow gently towards the hotel */
@media(min-width:901px){
  .jn-leg::before{border-top:0;height:2px;
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 7px,transparent 7px 13px);
    animation:jnflow 1.8s linear infinite}
}
@keyframes jnflow{to{background-position:13px 0}}

/* homepage venue heading stays on one line where there is room */
@media(min-width:961px){.h-fit{white-space:nowrap;font-size:clamp(1.9rem,3vw,2.8rem)}}

/* Short screens (a 13-inch laptop, say): the opening section still has to fit
   between the bars, so the spacing tightens while the title keeps its size. */
@media (min-width:1081px) and (max-height:900px){
  .hero-in{padding-block:clamp(1.1rem,2.4vh,1.9rem)}
  .kicker{margin-bottom:.7rem}
  .hero .strap{margin-top:.5rem}
  .hero .strap .strap-2{margin-top:.3rem}
  .ebar{margin-top:clamp(.8rem,1.6vh,1.2rem)}
  .hero-cta{margin-top:clamp(.9rem,1.7vh,1.3rem)}
}
@media (min-width:1081px) and (max-height:740px){
  .hero-in{padding-block:clamp(.7rem,1.7vh,1.3rem)}
  .hero .strap{font-size:clamp(1.02rem,1.5vw,1.2rem)}
  .ebar{padding:.75rem 1.1rem}
  .ebar-foot{margin-top:.55rem;padding-top:.55rem}
  .ebar-item b{font-size:clamp(1.1rem,1.5vw,1.3rem)}
  .ebar-item img{width:24px;height:24px}
  .hero-cta .btn{padding:.9rem 1.6rem}
  .hero-cta .btn-b{padding:.9rem 1.15rem .9rem 1.8rem}
}

/* the countdown label sits on the same line as the figures and their units */
.u-c em{transform:translateY(4px)}
@media(max-width:1240px){.u-c em{transform:none}}

/* ---------- venue: the conference area, text beside the two room photos ---------- */
.v-conf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,2.4vw,1.6rem);
  align-items:stretch;margin-top:clamp(2.2rem,4.5vw,3.2rem)}
.v-conf-t{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.3rem,2.6vw,1.8rem);background:var(--ice-2);
  border:1px solid var(--line);border-radius:10px}
.v-conf-t .eyebrow{margin:0}
.v-conf-t h3{margin:0;color:var(--navy);font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.02em}
.v-conf-t p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.65}
.v-conf figure{margin:0;position:relative;border-radius:10px;overflow:hidden;min-height:220px;background:var(--ice)}
.v-conf figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.v-conf figure:hover img{transform:scale(1.04)}
.v-conf figcaption{position:absolute;left:.8rem;bottom:.8rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:rgba(16,27,62,.62);padding:.3rem .65rem;border-radius:4px}
@media(max-width:900px){.v-conf{grid-template-columns:1fr 1fr}.v-conf-t{grid-column:1/-1}}

/* the utility link sits over the Register button, not past it */
.u-r{padding-right:clamp(.5rem,1.1vw,1.25rem)}

/* ---------- the chairs' letter: signatories alongside the text ---------- */
.letterhead{max-width:1060px;display:grid;grid-template-columns:minmax(0,248px) minmax(0,1fr);
  gap:clamp(1.5rem,3.2vw,3rem);align-items:start}
.letterhead .lh-mark{grid-column:1/-1}
.lh-chairs{position:sticky;top:110px;display:flex;flex-direction:column;gap:1.15rem;
  padding-right:clamp(1rem,2vw,1.6rem);border-right:1px solid var(--line)}
.lh-label{margin:0;font-size:.76rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--blue-d)}
.lh-chairs .sign{display:flex;flex-direction:column;gap:1.1rem;margin:0;padding:0;border-top:0;text-align:left}
.lh-chairs .sign figure{display:flex;align-items:center;gap:.85rem;text-align:left}
.lh-chairs .sign img{width:56px;height:56px;margin:0;flex:none}
.lh-chairs .sign b{font-size:.98rem;line-height:1.25}
.lh-chairs .sign span{font-size:.84rem;margin-top:.15rem}
.lh-quote{position:relative;margin:.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:1.02rem;line-height:1.5;color:var(--navy);font-weight:500}
.lh-quote::before{content:"\201C";display:block;font-size:2.4rem;line-height:.6;color:var(--blue-d);margin-bottom:.3rem}
.lh-main > p:last-of-type{margin-bottom:0}
.letterhead .letter-cta{margin-top:2rem;text-align:left}
@media(max-width:900px){
  .letterhead{grid-template-columns:1fr}
  .lh-chairs{position:static;border-right:0;border-bottom:1px solid var(--line);padding:0 0 1.5rem;margin-bottom:.4rem}
  .lh-chairs .sign{flex-direction:row;flex-wrap:wrap;gap:1rem 1.8rem}
  .lh-quote{display:none}
}

/* =====================================================================
   Istanbul (Bosphorus Dusk, Direction 3B)
   ===================================================================== */
/* key visual: keep the shoulder and the mosque both in view as the panel narrows */
.hero .art{object-position:38% 45%}
/* the shoulder icon is a filled disc, so it keeps its own colours */
.ebar-item img.ic-disc{filter:none;opacity:1;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
/* utility strip before dates are confirmed: month and city instead of a countdown */
.u-when em{display:inline!important;color:#F3B08C;transform:none!important}
@media(max-width:520px){.u-c.u-when{display:none}}
/* page headers */
.ph-programme .bg{object-position:60% 40%}
.ph-venue .bg{object-position:50% 60%}
.ph-registration .bg{object-position:45% 55%}
.ph-industry .bg{object-position:70% 35%}
.bleed .bg{object-position:60% 55%}

/* placeholder panel for anything ESSKA has not supplied yet */
.tba{max-width:820px;padding:clamp(1.4rem,3vw,2.1rem);border:1.5px dashed rgba(27,42,91,.22);
  border-radius:8px;background:var(--paper)}
.tint .tba{background:var(--paper)}
.tba .eyebrow{margin:0 0 .5rem;font-size:.8rem}
.tba h3{margin:0 0 .6rem;font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.02em}
.tba p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.65}
.tba-inline{margin:1.4rem 0 0}
.fee-head + .tba{margin-bottom:0}
abbr.tbc{text-decoration:none;cursor:help}

/* chairs not yet named: an initials circle in place of the photo */
.sign figure .sign-av{display:grid;place-items:center;width:84px;height:84px;margin:0 auto .9rem;border-radius:50%;
  background:var(--ice);color:var(--navy);font-size:1.25rem;font-weight:800;letter-spacing:.04em;line-height:1}
.lh-chairs .sign .sign-av{width:56px;height:56px;margin:0;flex:none}

/* topic cards: the moodboard's blush, indigo and terracotta blocks with the topic
   name, until the programme supplies artwork */
.tile.t1{background:linear-gradient(158deg,#FDFAF8 0%,#FBEEE7 55%,#F6D9C8 100%)}
.tile.t2{background:linear-gradient(158deg,#2C3D78 0%,#1B2A5B 55%,#101B3E 100%)}
.tile.t3{background:linear-gradient(158deg,#E0663C 0%,#C4502B 60%,#A8411F 100%)}
.tile.t1 .word{color:var(--navy);text-shadow:none}
.tile.t1::after{background:linear-gradient(180deg,rgba(27,42,91,0) 55%,rgba(27,42,91,.08) 100%)}
.tile.t2::after,.tile.t3::after{background:linear-gradient(180deg,rgba(16,27,62,0) 55%,rgba(16,27,62,.28) 100%)}
@media (hover:none){
  .tile{--pic:clamp(9rem,34vw,12rem)}
  .tile::before{content:"";display:block;height:var(--pic)}
  .tile .word{top:calc(var(--pic) - 3.2rem)}
}

/* the Istanbul title is short, so it sets larger than Rome's: light lead phrase
   on its own line, bold topic below, as in the moodboard */
.hero h1 .lt{display:block}
@media(min-width:1081px){
  .hero h1{font-size:clamp(2rem,3.4vw,3.3rem)}
  .hero-txt{max-width:min(680px,50%)}
}
/* three items instead of Rome's two (date, section, city): they share one row on
   desktop, so the figures set a step smaller */
@media(min-width:1081px){
  .ebar-row{flex-wrap:nowrap;gap:clamp(.55rem,1vw,.9rem)}
  .ebar-item{white-space:nowrap;gap:.45rem}
  .ebar-item b{font-size:clamp(1rem,1.3vw,1.22rem)}
  .ebar-item img{width:24px;height:24px}
}