:root{
  /* Athens Stone (Direction 2C): ESSKA navy shell, sand and warm paper grounds,
     bronze for warm type, gold for rules and markers only */
  --navy:#12294D; --navy-d:#08182F; --navy-l:#26406B;
  --blue:#C98A34; --blue-d:#8A5A1C; --ice:#EDE3D0; --ice-2:#F4EFE4;
  --paper:#FDFBF7; --ink:#2B3448; --muted:#4C5568;
  --line:rgba(18,41,77,.12);
  /* action tier: deeper and more saturated than --blue, so every Register
     button separates from the rest of the page */
  --ac:#A8702A; --ac-d:#8A5A1C; --ac-br:#C98A34; --ac-l:#E2C48F;
  --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:#E2C48F;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(18,41,77,.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(18,41,77,.3) 22%,rgba(18,41,77,.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,#FDFBF7 0%,#F4EFE4 40%,#EEE6D6 72%,#E9DFCB 100%)}

/* photo-01-hero.png is photo-01 with its dead left margin cropped off (871x1000).
   The original's left third was a near-white margin, which left the knee and the
   Colosseum squeezed into a narrow strip. 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,#F7F2E8 0%,#F7F2E8 34%,
    rgba(253,251,247,.55) 46%,rgba(253,251,247,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(8,24,47,.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(8,24,47,.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:#E8D3AE}
.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(2.6rem,3.6vw,3.2rem)}

/* ---------- 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(138,90,28,.36),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-b:hover{transform:translateY(-3px);
  background:linear-gradient(135deg,#D9A55A 0%,var(--ac-br) 48%,var(--ac) 100%);
  box-shadow:0 14px 32px rgba(138,90,28,.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(18,41,77,.28)}
.btn-navy:hover,.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(18,41,77,.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(18,41,77,.38) inset,
    0 1px 2px rgba(8,24,47,.06),
    0 5px 12px rgba(201,138,52,.18),
    0 12px 28px rgba(138,90,28,.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(8,24,47,.08),
    0 8px 18px rgba(201,138,52,.26),
    0 20px 42px rgba(138,90,28,.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(8,24,47,.14),
    0 6px 16px rgba(138,90,28,.24),
    0 16px 34px rgba(8,24,47,.26)}
.btn-w:hover{transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(8,24,47,.18),
    0 10px 24px rgba(138,90,28,.34),
    0 24px 48px rgba(8,24,47,.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(138,90,28,.36),0 0 0 0 rgba(138,90,28,.42)}
  55%{box-shadow:0 13px 30px rgba(138,90,28,.46),0 0 0 13px rgba(138,90,28,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:#E2C48F;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,#EDE3D0)}
.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(18,41,77,.14)}
.topic .im{position:relative;overflow:hidden;background:#F4EFE4}
.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,#FDFBF7,#F2ECDF)}
.implant{position:relative;border-radius:8px;overflow:hidden;background:var(--paper);
  box-shadow:0 24px 60px rgba(18,41,77,.12),0 0 0 1px rgba(18,41,77,.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:#EFE7D8}
/* 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(226,196,143,0) 52%,rgba(201,138,52,.42) 72%,
  rgba(18,41,77,.9) 90%,rgba(8,24,47,.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(8,24,47,0) 42%,rgba(8,24,47,.5) 72%,rgba(8,24,47,.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(8,24,47,.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(8,24,47,.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:#E2C48F;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(18,41,77,.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(18,41,77,.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(18,41,77,.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(138,90,28,.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(18,41,77,.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(18,41,77,.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(18,41,77,.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(18,41,77,.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(138,90,28,.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,#2A4A7A 0%,#1C375F 55%,#12294D 100%);
  box-shadow:0 8px 20px rgba(18,41,77,.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,#33568A 0%,#2A4A7A 55%,#1C375F 100%);
  box-shadow:0 13px 28px rgba(18,41,77,.44),inset 0 1px 0 rgba(255,255,255,.4)}
@keyframes dlpulse{
  0%,100%{box-shadow:0 8px 20px rgba(18,41,77,.34),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 0 rgba(18,41,77,.45)}
  60%{box-shadow:0 10px 24px rgba(18,41,77,.4),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 14px rgba(18,41,77,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(18,41,77,.22);border-radius:100px;padding:.7rem 1.5rem;
  box-shadow:0 1px 2px rgba(8,24,47,.05),
    0 4px 10px rgba(201,138,52,.16),
    0 10px 22px rgba(138,90,28,.11);
  transition:all .25s var(--e)}
.pchip:hover{border-color:var(--navy);background:var(--ice);
  box-shadow:0 2px 5px rgba(8,24,47,.07),
    0 7px 16px rgba(201,138,52,.24),
    0 16px 32px rgba(138,90,28,.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(18,41,77,.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(18,41,77,.26);border-radius:100px;padding:.65rem 1.35rem;
  box-shadow:0 1px 2px rgba(8,24,47,.05),
    0 4px 10px rgba(201,138,52,.16),
    0 10px 22px rgba(138,90,28,.11);
  transition:all .25s var(--e)}
.pcollapse:hover{border-color:var(--navy);background:var(--ice);
  box-shadow:0 2px 5px rgba(8,24,47,.07),
    0 7px 16px rgba(201,138,52,.24),
    0 16px 32px rgba(138,90,28,.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(18,41,77,.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(8,24,47,.72),rgba(8,24,47,.55) 45%,rgba(8,24,47,.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 Colosseum 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(8,24,47,.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(226,196,143,.3),0 8px 22px rgba(8,24,47,.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(8,24,47,.42) 0%,rgba(8,24,47,.18) 60%,rgba(8,24,47,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:#E2C48F;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(8,24,47,.55),0 2px 18px rgba(8,24,47,.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%,#1F3A66 0%,#12294D 45%,#08182F 100%)}
.ph .scrim{position:absolute;inset:0;z-index:2;background:
  linear-gradient(100deg,rgba(10,26,50,.92) 0%,rgba(10,26,50,.72) 42%,rgba(10,26,50,.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:#E2C48F;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);box-shadow:0 0 0 3px rgba(201,138,52,.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:#E2C48F;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:#E2C48F;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(8,24,47,.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(18,41,77,.14);
  box-shadow:0 -10px 34px rgba(18,41,77,.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:#E2C48F;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(18,41,77,.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(138,90,28,.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(17,22,38,.88) 0%,rgba(17,22,38,.62) 42%,rgba(17,22,38,.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(8,24,47,.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(8,24,47,.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(18,41,77,.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(18,41,77,.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(18,41,77,.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(18,41,77,.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,#FDFBF7 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(201,138,52,.14),rgba(201,138,52,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(18,41,77,.08);
  transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s var(--e)}
.qc:hover{transform:translateY(-3px);border-color:rgba(18,41,77,.28);box-shadow:0 16px 34px rgba(18,41,77,.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(8,24,47,.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(18,41,77,.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:#E6E9EF;color:var(--navy-l)}
.fac-grid .fac:nth-child(3n+3) .av{background:#F1E6CF;color:#8A5A1C}
.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(201,138,52,.25)}

/* pale sections: a faint dot texture and a soft light in one corner */
.tint{background:
  radial-gradient(55% 60% at 100% 0%,rgba(201,138,52,.10),rgba(201,138,52,0) 70%),
  radial-gradient(circle at 1px 1px,rgba(18,41,77,.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(201,138,52,.10),rgba(201,138,52,0) 70%),
  radial-gradient(40% 36% at 92% 72%,rgba(226,196,143,.09),rgba(226,196,143,0) 70%),
  var(--ice-2)}

/* footer: a soft top light and the same Rome skyline as the page headers */
footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#173058 0%,var(--navy-d) 45%)}
footer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(110px,14vw,190px);
  background:none;opacity:0;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)}}

/* =====================================================================
   Athens placeholders and topic cards. Placeholders mark where the
   supplied graphics will go; replace each with an <img> as it arrives.
   ===================================================================== */
.ph-note{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-d);opacity:.8}
.ph-note small{font-size:.74rem;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.art-ph{background:linear-gradient(165deg,#F4EFE4 0%,#EADFC9 55%,#DECBA6 100%);
  display:flex;align-items:flex-end;justify-content:flex-end;padding:2rem 2.4rem}
.ph-img{display:flex;align-items:flex-end;padding:1.4rem 1.6rem;
  background:linear-gradient(160deg,#F1E9DA 0%,#E6D8BD 100%)}
.shot.ph-img{aspect-ratio:16/10;border-radius:8px}
.v-photo.ph-img{min-height:340px}
/* the closing banner and page headers have no photo yet: navy ground */
.bleed-plain{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-d) 100%)}
/* topic cards, as in the moodboard: sand, navy and bronze grounds */
.tile.t1{background:linear-gradient(160deg,#F4EFE4 0%,#E9DDC6 100%)}
.tile.t1::after{background:none}
.tile.t1 .word{color:var(--navy);text-shadow:none}
.tile.t2{background:linear-gradient(160deg,#1C3A66 0%,var(--navy) 45%,var(--navy-d) 100%)}
.tile.t3{background:linear-gradient(150deg,#C98A34 0%,#A8702A 50%,#8A5A1C 100%)}
.tile.t2::after,.tile.t3::after{background:linear-gradient(180deg,rgba(8,24,47,0) 55%,rgba(8,24,47,.35) 100%)}
/* "to be announced" panels */
.tba{max-width:760px;margin:0 auto;text-align:center;padding:clamp(1.8rem,4vw,2.6rem);
  background:var(--paper);border:1px solid var(--line);border-radius:8px}
.tba .eyebrow{margin:0 0 .5rem}
.tba h3{color:var(--navy);font-size:clamp(1.3rem,2.2vw,1.6rem);margin:0 0 .6rem;letter-spacing:-.02em}
.tba p:not(.eyebrow){margin:0;color:var(--muted)}
.fee-head + .tba{margin:0 0 0;max-width:none}
.tba-days{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.2rem}
.tba-day{display:flex;align-items:center;gap:1.2rem;padding:1.3rem 1.4rem;background:var(--paper);
  border:1px solid var(--line);border-radius:8px}
.tba-day p{margin:.35rem 0 0;color:var(--muted)}
@media(max-width:700px){.tba-days{grid-template-columns:1fr}}

/* Athens hero: a short title, so it can be set large on two lines as in the
   moodboard (H1 44/1.1, sub 30/1.2 at 400) */
.hero h1{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.08;max-width:12ch}
.hero .strap{font-size:clamp(1.2rem,1.9vw,1.75rem);font-weight:400;line-height:1.25}
/* date and city side by side where there is room */
@media(min-width:1181px){
  .hero-txt{max-width:min(760px,50%)}
  .ebar-row{flex-wrap:nowrap}
  .ebar-item b{white-space:nowrap}
}
.art-ph{align-items:center;justify-content:center;text-align:center}
/* the placeholder is a div, so it needs the flex layout back from .hero .art */
.hero .art-ph{display:flex}
/* the homepage Register button keeps the slow attention ring, as on the Rome site */

/* =====================================================================
   Athens content: brief received 11 September 2026
   ===================================================================== */
.hero .strap .strap-2{display:block;margin-top:.45rem;font-size:.6em;font-weight:500;letter-spacing:.01em;color:var(--blue-d)}
/* a chair without a photo yet: initials in the same circle */
.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-weight:800;font-size:1.25rem;letter-spacing:.04em}
/* stats band values that are not plain counts */
.band-num .n b abbr{text-decoration:none}
/* journey with three stops */
.journey.j3{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;max-width:900px}
/* conference area: text beside two 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(8,24,47,.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}}
/* fee periods: two, not three */
.fee-periods.two{grid-template-columns:repeat(2,1fr)}
/* compliance confirmed */
.ind-ok{display:inline-flex;align-items:center;gap:.55rem;margin-top:.4rem!important;padding:.5rem .9rem;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)!important}
.ind-ok i{position:relative;width:18px;height:18px;border-radius:50%;background:var(--navy);flex:none}
.ind-ok i::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* sponsorship packages: two equal columns, each with its own heading */
.pk-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.6vw,1.8rem);align-items:stretch}
.pk-col{display:flex;flex-direction:column;gap:1rem}
.pk-col-h{margin:0;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-d)}
.pk-main{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden;
  padding:clamp(1.5rem,2.8vw,2.1rem);border-radius:12px;color:#fff;
  background:linear-gradient(150deg,#1C3A66 0%,var(--navy) 45%,var(--navy-d) 100%)}
.pk-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pk-main .eyebrow{margin:0;color:var(--ac-l)}
.pk-tag{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.pk-price{margin:.9rem 0 .4rem;font-size:clamp(1.9rem,3.1vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff}
.pk-price small{font-size:.4em;font-weight:600;letter-spacing:.02em;opacity:.8}
.pk-lead{margin:0 0 1.2rem;color:rgba(255,255,255,.86);line-height:1.6}
.pk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.pk-list li{position:relative;padding-left:1.6rem;line-height:1.5;font-size:.95rem}
.pk-list li::before{content:"";position:absolute;left:.2rem;top:.3em;width:6px;height:11px;
  border:solid var(--blue);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pk-main .pk-list li{color:rgba(255,255,255,.92)}
.pk-main .pk-list li::before{border-color:var(--ac-l)}
.pk-item{flex:1;display:flex;flex-direction:column;padding:clamp(1.1rem,2vw,1.4rem) clamp(1.2rem,2.2vw,1.5rem);
  background:var(--paper);border:1px solid var(--line);border-radius:10px}
.pk-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;margin-bottom:.85rem}
.pk-item h3{margin:0;color:var(--navy);font-size:1.08rem;letter-spacing:-.01em;line-height:1.3}
.pk-price-sm{display:flex;flex-direction:column;align-items:flex-end;margin:0;flex:none;
  font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.15;white-space:nowrap}
.pk-price-sm small{margin-top:.15rem;font-size:.66rem;font-weight:600;letter-spacing:0;color:var(--muted);white-space:normal;text-align:right;max-width:17ch}
.pk-item .pk-list li{color:var(--ink);font-size:.92rem}
.pk-note{margin:auto 0 0;padding-top:.7rem;font-size:.85rem;color:var(--muted)}
@media(max-width:900px){.pk-grid{grid-template-columns:1fr}}

/* the signature block styles its own spans; the initials circle needs the stronger selector */
.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}

/* =====================================================================
   Athens artwork (crops of the supplied key-visual banners)
   ===================================================================== */
/* key visual: the hip joint stays in view as the panel narrows */
.hero .art{object-position:22% 42%}
/* page headers: keep the subject on the right, clear of the title */
.ph-programme .bg{object-position:60% 45%}
.ph-venue .bg{object-position:50% 62%}
.ph-registration .bg{object-position:52% 62%}

/* topic cards now carry pictures: white titles over a navy foot, as in Rome */
.tile.t1,.tile.t2,.tile.t3{background:var(--navy-d)}
.tile.t1::after,.tile.t2::after,.tile.t3::after{
  background:linear-gradient(180deg,rgba(8,24,47,0) 42%,rgba(8,24,47,.5) 72%,rgba(8,24,47,.88) 100%)}
.tile.t1 .word{color:#fff;text-shadow:0 2px 16px rgba(8,24,47,.35)}
.tile.t1 .art{object-position:center 40%;transform:none}
.topic:hover .tile.t1 .art{transform:scale(1.05)}
.tile.t3 .art{object-position:55% 45%}
/* closing banner and travel banner: Acropolis and city under the navy scrim */
.bleed .bg{object-position:60% 45%}
.travel-hero .bg{object-position:50% 70%}

/* 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(2.2rem,4.8vh,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}
}

/* ---------- Athens: the chairs' letter reads as a letter with its signatories
   alongside, rather than one long column ---------- */
.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,.lh-chairs .sign .sign-av{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}
/* a line from the letter itself, set as a quiet pull quote */
.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(--ac-br);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}
}

/* ---------- Athens contacts: dark cards against the light banner ---------- */
.pc .qc{background:linear-gradient(150deg,#1C3A66 0%,var(--navy) 58%,var(--navy-d) 100%);
  border-color:rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(8,24,47,.22)}
.pc .qc:hover{border-color:rgba(226,196,143,.5);box-shadow:0 20px 44px rgba(8,24,47,.3)}
.pc .qc-av{box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.pc .qc-t b{color:#fff}
.pc .qc-t small{color:#E8D3AE}
.pc .qc-t em{color:var(--ac-l);opacity:1}
.pc .qc-m{background:rgba(255,255,255,.12);color:var(--ac-l)}
.pc .qc:hover .qc-m{background:var(--ac-br);color:var(--navy-d)}

/* 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}}

/* footer: a faint Athens skyline along the bottom, as on the Rome site */
footer::before{background:url("../img/skyline-athens.svg") center bottom/cover no-repeat;opacity:.1}
/* contacts: a lighter banner than the section below, and warm cards instead of blue */
.pc{background:linear-gradient(165deg,#FFFFFF 0%,#FDFBF7 58%,#FBF6EC 100%)}
.pc .qc{background:#F6F0E3;border-color:rgba(138,90,28,.18);box-shadow:0 8px 22px rgba(18,41,77,.07)}
.pc .qc:hover{border-color:rgba(138,90,28,.4);box-shadow:0 16px 34px rgba(18,41,77,.12)}
.pc .qc-av{box-shadow:0 0 0 2px #FDFBF7}
.pc .qc-t b{color:var(--navy)}
.pc .qc-t small{color:var(--muted)}
.pc .qc-t em{color:var(--blue-d);opacity:1}
.pc .qc-m{background:#FDFBF7;color:var(--blue-d);border:1px solid rgba(138,90,28,.2)}
.pc .qc:hover .qc-m{background:var(--ac-br);color:#fff;border-color:transparent}

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

/* contacts: the enquiry section sits a clear step deeper than the banner */
#contacts .tint{background:
  radial-gradient(55% 60% at 100% 0%,rgba(201,138,52,.12),rgba(201,138,52,0) 70%),
  radial-gradient(circle at 1px 1px,rgba(18,41,77,.09) 1px,transparent 1.3px) 0 0/24px 24px,
  #EDE3D0}
.pc .qc{background:#F3EAD7;border-color:rgba(138,90,28,.28);box-shadow:0 10px 26px rgba(18,41,77,.09)}

/* the dysplasia card: the same supplied render, treated as imaging so it reads
   differently from the natural-colour FAI card next to it */
.tile.t2{background:linear-gradient(160deg,#1E3F70 0%,#12294D 55%,#08182F 100%)}
.tile.t2 .art{mix-blend-mode:luminosity;opacity:.92;filter:contrast(1.12) brightness(1.04)}
.tile.t2::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(226,196,143,.16) 0 1px,transparent 1px 44px),
             repeating-linear-gradient(90deg,rgba(226,196,143,.16) 0 1px,transparent 1px 44px)}

/* ---------- topic cards: the moodboard's sand, navy and bronze blocks, with a
   quiet texture and the topic name ---------- */
.tile.t1{background:linear-gradient(158deg,#FBF6EC 0%,#F1E7D4 55%,#E4D4B4 100%)}
.tile.t2{background:linear-gradient(158deg,#22467C 0%,#12294D 55%,#08182F 100%)}
.tile.t3{background:linear-gradient(158deg,#D9A455 0%,#A8702A 55%,#7A4F18 100%)}
.tile.t1 .word{color:var(--navy);text-shadow:none}
.tile.t1::after{background:linear-gradient(180deg,rgba(18,41,77,0) 55%,rgba(18,41,77,.10) 100%)}
.tile.t2::after,.tile.t3::after{background:linear-gradient(180deg,rgba(8,24,47,0) 55%,rgba(8,24,47,.32) 100%)}
.tile::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,currentColor 1px,transparent 1.4px);
  background-size:26px 26px}
.tile.t1::before{color:rgba(18,41,77,.5);opacity:.14}
.tile.t2::before{color:rgba(226,196,143,.9);opacity:.16}
.tile.t3::before{color:rgba(253,251,247,.9);opacity:.18}

/* the cards carry artwork again: the render for FAI, technical graphics for the
   other two; the dot texture would fight them */
.tile::before{content:none}
.tile.t1 .art{object-position:center 40%}
.tile.t2 .art,.tile.t3 .art{object-position:center}
.tile.t1 .word{color:var(--navy);text-shadow:none}

/* Dysplasia and Return to sport: supplied artwork with the title built in, so
   the overlay title is kept for screen readers only; the corners are transparent
   and sit on matching navy */
.tile.t2,.tile.t3{background:linear-gradient(160deg,#EEF3FA 0%,#A9C0E2 38%,#2C5A96 72%,#12295A 100%)}  /* matches the pale-top artwork behind its rounded corners */
.tile.t2 .art,.tile.t3 .art{object-position:left center}
.tile.t2 .word,.tile.t3 .word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tile.t2::after,.tile.t3::after{background:none}
/* FAI sits beside two cards with white titles, so its title matches them */
.tile.t1 .word{color:#fff;text-shadow:0 2px 16px rgba(8,24,47,.35)}
.tile.t1::after{background:linear-gradient(180deg,rgba(8,24,47,0) 45%,rgba(8,24,47,.5) 74%,rgba(8,24,47,.85) 100%)}

/* the supplied card artwork is square with its title printed inside, so the
   cards are square at every width and nothing is cropped away */
.topics .tile{min-height:0;aspect-ratio:1/1}
.tile.t2 .art,.tile.t3 .art{object-position:center}
@media(max-width:900px){
  .topics{justify-items:center}
  .topic{width:100%;max-width:520px}
}
@media (hover:none){
  .topics .tile{aspect-ratio:auto}
  .tile.t2 .art,.tile.t3 .art{height:auto;aspect-ratio:1/1}
}



/* Registration and Industry: built from the key visual's own pieces.
   Registration shows the Acropolis in the circular reveal; Industry shows the
   round icons on the line-and-dot path above the blue skyline. */
.ph-registration,.ph-industry{background:linear-gradient(120deg,#0E2552 0%,#17376F 48%,#2A5596 100%)}
.ban-circle{position:absolute;z-index:2;top:50%;right:clamp(-160px,-6vw,-40px);width:clamp(340px,34vw,520px);aspect-ratio:1;
  transform:translateY(-50%);border-radius:50%;overflow:hidden;pointer-events:none;
  box-shadow:0 0 0 10px rgba(169,192,226,.14),0 0 0 22px rgba(169,192,226,.07),0 30px 70px rgba(4,12,32,.45)}
.ban-circle img{width:100%;height:100%;object-fit:cover;object-position:74% 60%}
.ban-icons{position:absolute;z-index:2;right:clamp(28px,4.5vw,84px);top:50%;transform:translateY(-84%);
  width:clamp(290px,27vw,410px);height:200px;pointer-events:none}
.ban-icons svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ban-icons img{position:absolute;width:clamp(62px,5.2vw,80px);height:auto;border-radius:50%;
  box-shadow:0 0 0 4px rgba(238,243,250,.9),0 14px 30px rgba(4,12,32,.35)}
.ban-icons .i1{left:0;top:112px}.ban-icons .i2{left:40%;top:34px}.ban-icons .i3{right:0;top:104px}
.ban-sky{position:absolute;right:0;bottom:0;z-index:1;width:clamp(420px,46vw,680px);aspect-ratio:1536/290;pointer-events:none;
  background:linear-gradient(90deg,rgba(176,204,240,.08),rgba(176,204,240,.32));
  -webkit-mask:url("../img/skyline-blue.png") center bottom/100% 100% no-repeat;mask:url("../img/skyline-blue.png") center bottom/100% 100% no-repeat}
/* on narrow screens the text spans the banner, so the circle and icons step aside */
@media(max-width:900px){.ban-circle,.ban-icons{display:none}.ban-sky{width:70%}}
@media(max-width:600px){.ban-sky{display:none}}

/* contacts: one general enquiries box in place of named contacts */
.pc-box{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;padding:clamp(1.5rem,3vw,2.2rem);
  background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(18,41,77,.10)}
.pc-box .eyebrow{margin:0}
.pc-box h3{margin:0;color:var(--navy);font-size:clamp(1.3rem,2.2vw,1.6rem);letter-spacing:-.02em}
.pc-box p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.65}
.pc-box .btn{margin-top:.4rem}
.pc-box .pc-box-office{margin-top:.6rem!important;padding-top:.9rem;border-top:1px solid var(--line);width:100%;font-size:.92rem}
.pc-box .pc-box-office b{display:block;color:var(--navy);font-weight:700}
.pc-box .pc-box-office a{color:inherit;text-decoration:underline;text-underline-offset:3px}
#enquiry-form{scroll-margin-top:140px}

/* chairs' letter: larger photos (156px, 126px on narrow screens), each set above its name so long role titles keep room */
.lh-chairs .sign{gap:1.5rem}
.lh-chairs .sign figure{flex-direction:column;align-items:flex-start;gap:.6rem}
.lh-chairs .sign img,.lh-chairs .sign .sign-av{width:156px;height:156px}
.lh-chairs .sign b{font-size:1.02rem}
@media(max-width:900px){
  .lh-chairs .sign img,.lh-chairs .sign .sign-av{width:126px;height:126px}
}

/* all three topic cards now use supplied artwork with the title printed inside,
   so FAI follows the same treatment as the other two */
.tile.t1{background:linear-gradient(160deg,#EEF3FA 0%,#A9C0E2 38%,#2C5A96 72%,#12295A 100%)}
.tile.t1 .art{object-position:center}
.tile.t1 .word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tile.t1::after{background:none}

/* Registration and Industry banners, softer: the site's deep navy rather than a bright blue
   sweep, and the Acropolis circle drawn fully inside the banner, muted and edged
   with a thin sand line so it sits with the photo headers on the other pages */
.ph-registration,.ph-industry{background:
  radial-gradient(60% 120% at 82% 50%,rgba(38,64,107,.55) 0%,rgba(38,64,107,0) 70%),
  linear-gradient(120deg,#08182F 0%,#0F2446 55%,#16305A 100%)}
.ph-registration .ban-circle{right:clamp(24px,6vw,120px);width:clamp(280px,25vw,400px);
  box-shadow:0 0 0 1px rgba(226,196,143,.42),0 0 0 14px rgba(169,192,226,.05),0 24px 60px rgba(4,12,32,.40)}
.ph-registration .ban-circle img{object-position:70% 58%;filter:saturate(.72) brightness(.9) contrast(.96)}
.ph-registration .ban-circle::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(200deg,rgba(8,24,47,0) 40%,rgba(8,24,47,.38) 100%),rgba(18,41,77,.14)}
/* Industry: the round icons and skyline muted to match */
.ph-industry .ban-icons{right:clamp(40px,7vw,140px)}
.ph-industry .ban-icons img{filter:saturate(.72) brightness(.92);
  box-shadow:0 0 0 1px rgba(226,196,143,.42),0 0 0 6px rgba(169,192,226,.08),0 14px 30px rgba(4,12,32,.35)}
.ph-industry .ban-icons svg{opacity:.6}
.ph-industry .ban-sky{background:linear-gradient(90deg,rgba(176,204,240,.05),rgba(176,204,240,.2))}

/* =====================================================================
   Buttons: the same two on all five sites. A solid pill with a round
   badge for actions, and an underlined text link for everything else.
   Only the colours below change from site to site.
   ===================================================================== */
:root{--pill:#9A6424;--pill-h:#8A5A1C;--pill-sh:154,100,36;--tl:#8A5A1C;--tl-h:#6E4714;--tl-u:rgba(201,138,52,.45)}
.pill{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:1rem;
  height:52px;padding:0 7px 0 28px;border:0;border-radius:999px;background:var(--pill);color:#fff;
  text-decoration:none;cursor:pointer;font-family:var(--f);font-size:15px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:0 10px 24px rgba(var(--pill-sh),.28);
  transition:transform .35s var(--e),box-shadow .35s var(--e),background .25s var(--e)}
.pill-i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.2);transition:background .25s var(--e)}
.pill-i svg{display:block;width:11px;height:13px;margin-left:2px;fill:#fff;
  animation:tri 2.6s var(--e) 1.2s infinite;transition:transform .35s var(--e)}
/* movement: the triangle pulses gently at rest; on hover the pill lifts, a soft
   sheen crosses it and the triangle nudges forward. The reduced-motion block
   near the top of this file switches the movement off. */
@keyframes tri{0%,62%,100%{transform:none;opacity:1}76%{transform:translateX(2px) scale(1.18);opacity:.85}}
.pill::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--e)}
.pill:hover{background:var(--pill-h);transform:translateY(-2px);box-shadow:0 14px 30px rgba(var(--pill-sh),.36)}
.pill:hover::after{transform:translateX(120%)}
.pill:hover .pill-i{background:rgba(255,255,255,.3)}
.pill:hover .pill-i svg{animation:none;transform:translateX(2px)}
.pill:active{transform:none;box-shadow:0 6px 14px rgba(var(--pill-sh),.28)}
.pill:focus-visible{outline:2px solid var(--pill);outline-offset:3px}
/* not open yet (the Register card, on a dark panel): quiet, but still readable */
.pill.is-disabled,.pill.is-disabled:hover{cursor:default;transform:none;background:rgba(255,255,255,.14);
  color:rgba(255,255,255,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.pill.is-disabled .pill-i{background:rgba(255,255,255,.12)}
.pill.is-disabled .pill-i svg{animation:none;transform:none;opacity:.7}
.pill.is-disabled::after{display:none}
/* the sticky-bar Register, and the nav one a step up from that */
.pill-sm{height:44px;padding:0 5px 0 20px;gap:.75rem;font-size:13px}
.pill-sm .pill-i{width:34px;height:34px}
.pill-sm .pill-i svg{width:9px;height:11px;margin-left:1px}
@media(min-width:761px){
  .navreg.pill-sm{height:48px;padding:0 6px 0 24px;font-size:14px}
  .navreg.pill-sm .pill-i{width:36px;height:36px}
  .navreg.pill-sm .pill-i svg{width:10px;height:12px}
}

.tlink{display:inline-flex;align-items:center;padding:.3rem 0 .55rem;color:var(--tl);text-decoration:none;
  font-family:var(--f);font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;
  background:linear-gradient(var(--tl-h),var(--tl-h)) left bottom/0 3px no-repeat,
    linear-gradient(var(--tl-u),var(--tl-u)) left bottom/100% 3px no-repeat;
  transition:color .25s var(--e),background-size .45s var(--e)}
/* on hover the underline fills from the left in the full colour */
.tlink:hover{color:var(--tl-h);background-size:100% 3px,100% 3px}
.tlink:focus-visible{outline:2px solid var(--tl);outline-offset:4px;border-radius:2px}
/* over photos and dark panels */
.bleed .tlink,.reg-book .tlink{--tl:#fff;--tl-h:#fff;--tl-u:rgba(255,255,255,.45)}

/* where the two sit */
.hero-cta{gap:1rem 2rem;align-items:center}
.bleed .go{align-items:center;gap:1rem 2rem}
.btn-row{align-items:center;gap:1rem 2rem}
.stick .pill{margin-left:auto;flex:none}
.reg-card .pill,.reg-card .tlink{margin-top:auto}
.ind-spon .pill{margin-top:.3rem}
.pc-box .pill{margin-top:.4rem}
.tlink.pctl-dl{flex:none;padding:.3rem 0 .55rem;font-size:15px}
@media(max-width:700px){.tlink.pctl-dl{width:auto}}
@media(max-width:560px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .pill > span:first-child{flex:1;text-align:center}
  .hero-cta .tlink{align-self:center}
}

/* ---------- more room above the hero buttons, and more life in them ---------- */
/* every pill: on hover the badge turns solid white and the triangle takes the
   pill colour; pressing squeezes it slightly */
.pill-i{transition:background .3s var(--e),transform .35s var(--e),box-shadow .35s var(--e)}
.pill-i svg path{transition:fill .3s var(--e)}
.pill:hover .pill-i{background:#fff;transform:scale(1.08)}
.pill:hover .pill-i svg{fill:var(--pill-h)}
.pill:active{transform:scale(.98)}
.pill.is-disabled:hover .pill-i{background:rgba(255,255,255,.12);transform:none}
.pill.is-disabled:hover .pill-i svg{fill:#fff}

/* Register now in the hero, the main action on the page: a sheen crosses it every
   few seconds, and a soft ring breathes out of the badge in time with the triangle.
   Hover takes over from both; the reduced-motion block switches them off. */
.hero-cta .pill{height:56px;padding:0 8px 0 32px;font-size:16px;gap:1.15rem;
  box-shadow:0 12px 28px rgba(var(--pill-sh),.32)}
.hero-cta .pill .pill-i{width:40px;height:40px;animation:ring 2.6s var(--e) 1.2s infinite}
.hero-cta .pill .pill-i svg{width:12px;height:14px}
.hero-cta .pill::after{animation:sweep-pill 5.5s ease-in-out 2s infinite}
@keyframes sweep-pill{0%,70%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}
@keyframes ring{0%,55%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}90%,100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.hero-cta .pill:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(var(--pill-sh),.42)}
.hero-cta .pill:hover .pill-i{animation:none}
.hero-cta .pill:hover::after{animation:none;transform:translateX(120%)}
.hero-cta .pill:active{transform:translateY(-1px) scale(.98)}

/* the text link beside it: lifts a touch as its underline fills */
.tlink{transition:color .25s var(--e),background-size .45s var(--e),transform .35s var(--e)}
.tlink:hover{transform:translateY(-1px)}

/* hero buttons arrive after the box: a short rise, the link a beat later */
.hero-cta{animation:none}
.hero-cta > *{animation:heroUp .6s var(--e) backwards}  /* backwards, so the hover lift is not held at rest */
.hero-cta > .pill{animation-delay:.3s}
.hero-cta > .tlink{animation-delay:.42s}

/* ---------- the play circle, the PDF link and the hero alignment ---------- */
:root{--pill-c:#E2C48F;--pill-c-rgb:226,196,143}
/* the circle takes a light tint of the site colour, so it stands out against the
   darker pill; the triangle sits in the pill's deep tone */
.pill-i{background:var(--pill-c)}
.pill-i svg{fill:var(--pill-h)}
.pill:hover .pill-i{background:#fff}
/* the pill no longer clips, so the pulse ring can travel past its edge; the sheen
   moves its gradient instead of itself and stays inside the rounded shape */
.pill{overflow:visible}
.pill::after{border-radius:inherit;transform:none;transition:background-position .7s var(--e);
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.24) 50%,transparent 60%) 130% 0/250% 100% no-repeat}
.pill:hover::after{transform:none;background-position:-30% 0}
/* every Register pill: the circle breathes and sends out a soft ring, with the
   triangle nudging forward on each beat; hover holds it still and turns it white */
@keyframes badge-pulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(var(--pill-c-rgb),.6)}
  35%{transform:scale(1.1)}
  70%{transform:scale(1);box-shadow:0 0 0 11px rgba(var(--pill-c-rgb),0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(var(--pill-c-rgb),0)}}
.pill[data-go="registration"] .pill-i,.hero-cta .pill .pill-i{animation:badge-pulse 2.2s var(--e) 1s infinite}
.pill[data-go="registration"] .pill-i svg{animation:tri 2.2s var(--e) 1s infinite}
.pill[data-go="registration"]:hover .pill-i,.hero-cta .pill:hover .pill-i{animation:none;transform:scale(1.08)}
.pill[data-go="registration"]:hover .pill-i svg{animation:none}
/* the hero sheen now crosses by moving its gradient */
@keyframes sweep-pill{0%,70%{background-position:130% 0}90%,100%{background-position:-30% 0}}
.hero-cta .pill:hover::after{animation:none;background-position:-30% 0}
.pill.is-disabled .pill-i{background:rgba(255,255,255,.12)}
.pill.is-disabled .pill-i svg{fill:#fff}

/* Download the programme: a down arrow leads the label and dips on hover */
.tlink-dl{gap:.6rem}
.tlink-dl .dl-ic{width:14px;height:17px;flex:none;display:block}
.tlink-dl .dl-ic path:first-child{transition:transform .35s var(--e)}
.tlink-dl:hover .dl-ic path:first-child{transform:translateY(2px)}

/* hero: Register on the left edge of the date box, the link on its right edge */
.hero-cta{justify-content:space-between;width:100%}
.hero-cta .tlink{margin-left:auto}
@media(max-width:1080px){.hero-cta{max-width:560px}}
@media(max-width:560px){.hero-cta .tlink{align-self:flex-end}}

/* ---------- hero link: one line with Register, a lighter shade ---------- */
/* the hero link and every Download link take a lighter tone of the site colour
   (still 4.5:1 on the page ground); hover goes back to the deep tone */
.hero-cta .tlink,.tlink-dl{--tl:#98672A}
/* Register and its link stay on one line, centred on each other, from tablet width
   up: both scale down a little on narrower screens instead of wrapping */
@media(min-width:561px){
  .hero-cta{flex-wrap:nowrap;align-items:center}
  .hero-cta .pill{flex:none;font-size:clamp(13px,1.15vw,16px);padding-left:clamp(22px,2.2vw,32px);gap:clamp(.7rem,1vw,1.15rem)}
  .hero-cta .tlink{flex:none;margin-left:auto;font-size:clamp(12px,1.05vw,15px)}
}
@media(min-width:1081px) and (max-width:1299px){
  .hero-cta .pill{letter-spacing:.1em}
  .hero-cta .tlink{letter-spacing:.09em}
}
@media(min-width:561px) and (max-width:1080px){
  .hero-cta .pill{font-size:15px;padding-left:28px}
  .hero-cta .tlink{font-size:14px;letter-spacing:.1em}
}

/* ---------- Register: shading inside, the pulse around the whole pill ---------- */
:root{--pill-l:#A46B28}
/* depth: a light-to-deep gradient, a thin gloss along the top edge and a soft
   shade along the bottom; the circle stays light with the darker triangle */
.pill{background:linear-gradient(135deg,var(--pill-l) 0%,var(--pill) 52%,var(--pill-h) 100%);
  box-shadow:0 10px 24px rgba(var(--pill-sh),.28),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 8px rgba(0,0,0,.14)}
.pill:hover{background:linear-gradient(135deg,var(--pill) 0%,var(--pill-h) 100%);
  box-shadow:0 14px 30px rgba(var(--pill-sh),.36),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 8px rgba(0,0,0,.16)}
.pill:active{box-shadow:0 6px 14px rgba(var(--pill-sh),.28),inset 0 2px 6px rgba(0,0,0,.18)}
.hero-cta .pill{box-shadow:0 12px 28px rgba(var(--pill-sh),.32),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 9px rgba(0,0,0,.15)}
.hero-cta .pill:hover{box-shadow:0 18px 38px rgba(var(--pill-sh),.42),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 9px rgba(0,0,0,.16)}
/* the circle keeps its beat (a gentle swell, the triangle nudging forward) but no
   longer sends out a ring of its own */
@keyframes badge-pulse{0%,70%,100%{transform:scale(1)}35%{transform:scale(1.1)}}
/* the ring now travels out from the edge of the whole Register pill, on the same beat */
.pill::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none}
.pill[data-go="registration"]::before{--ring:var(--pill-sh);animation:pill-ring 2.2s var(--e) 1s infinite}
.bleed .pill[data-go="registration"]::before,.stick:not(.onlight) .pill[data-go="registration"]::before{--ring:var(--pill-c-rgb)}
@keyframes pill-ring{
  0%{box-shadow:0 0 0 0 rgba(var(--ring),.5)}
  70%{box-shadow:0 0 0 14px rgba(var(--ring),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--ring),0)}}
.pill[data-go="registration"]:hover::before{animation:none}
@media(min-width:1081px) and (max-width:1199px){.hero-cta .tlink{letter-spacing:.06em;gap:.45rem}}

/* ---------- Register: one even shading, the same on every site ---------- */
/* a soft light from the top and a little shade at the bottom, laid over the
   diagonal light-to-deep gradient, so the pill reads as rounded, not flat */
.pill{background:
  linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.12) 100%),
  linear-gradient(135deg,var(--pill-l) 0%,var(--pill) 55%,var(--pill-h) 100%)}
.pill:hover{background:
  linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.14) 100%),
  linear-gradient(135deg,var(--pill) 0%,var(--pill-h) 100%)}
/* the automatic sheen could be caught halfway, leaving a pale band across the
   pill; it now crosses only on hover. The pulse ring and the circle's beat stay. */
.hero-cta .pill::after{animation:none}

/* ---------- Register: a visible edge, stronger shading, pulse on the hero only ---------- */
:root{--pill-edge:#6B4513}
/* a firm border in the deepest tone, a bright hairline just inside the top, and a
   clearer light-to-deep gradient, so the pill reads as a raised button */
.pill{border:1.5px solid var(--pill-edge);
  background:
    linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.07) 42%,rgba(0,0,0,0) 58%,rgba(0,0,0,.24) 100%),
    linear-gradient(135deg,var(--pill-l) 0%,var(--pill) 48%,var(--pill-edge) 100%);
  box-shadow:0 10px 24px rgba(var(--pill-sh),.32),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.14)}
.pill:hover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 42%,rgba(0,0,0,0) 58%,rgba(0,0,0,.26) 100%),
    linear-gradient(135deg,var(--pill) 0%,var(--pill-h) 55%,var(--pill-edge) 100%);
  box-shadow:0 14px 30px rgba(var(--pill-sh),.4),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.16)}
.pill:active{box-shadow:0 6px 14px rgba(var(--pill-sh),.3),inset 0 2px 6px rgba(0,0,0,.22)}
.hero-cta .pill{box-shadow:0 12px 28px rgba(var(--pill-sh),.36),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.15)}
.hero-cta .pill:hover{box-shadow:0 18px 38px rgba(var(--pill-sh),.46),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.16)}
.pill.is-disabled,.pill.is-disabled:hover{border-color:rgba(255,255,255,.22)}

/* the pulse (ring, circle beat, triangle nudge) belongs to the homepage Register
   only; the nav, sticky-bar and banner Register keep just the hover shine */
.pill[data-go="registration"]::before{animation:none}
.pill[data-go="registration"] .pill-i,.pill[data-go="registration"] .pill-i svg{animation:none}
.hero-cta .pill::before{--ring:var(--pill-sh);animation:pill-ring 2.2s var(--e) 1s infinite}
.hero-cta .pill .pill-i{animation:badge-pulse 2.2s var(--e) 1s infinite}
.hero-cta .pill .pill-i svg{animation:tri 2.2s var(--e) 1s infinite}
.hero-cta .pill:hover::before,.hero-cta .pill:hover .pill-i,.hero-cta .pill:hover .pill-i svg{animation:none}

/* =====================================================================
   Buttons, final design (register-cta-4a), the same on all five sites.
   Register: a pale fill, a 2px border and a soft halo in the site colour,
   dark label, and a solid disc with a white triangle. Programme link: dark
   caps with a solid underline and a download glyph. Only the colours below
   change from site to site; this block overrides the earlier button styles.
   ===================================================================== */
:root{--cta-fill:#F4E7D1;--cta-fill-h:#EBD8B5;--cta-border:#9A6424;--cta-rgb:154,100,36;--cta-ink:#5A3A10;--cta-ink-h:#3F280A}

.pill,.hero-cta .pill{height:auto;display:inline-flex;align-items:center;gap:18px;padding:7px 9px 7px 25px;
  background:var(--cta-fill);border:2px solid var(--cta-border);color:var(--cta-ink);
  box-shadow:0 0 0 4px rgba(var(--cta-rgb),.12);
  font-size:15px;font-weight:700;letter-spacing:.1em;transform:none;
  transition:background .18s,box-shadow .18s}
.pill:hover,.pill:focus-visible,.hero-cta .pill:hover,.hero-cta .pill:focus-visible{background:var(--cta-fill-h);
  box-shadow:0 0 0 7px rgba(var(--cta-rgb),.16);outline:none;transform:none}
.pill:active,.hero-cta .pill:active{transform:none;box-shadow:0 0 0 5px rgba(var(--cta-rgb),.18)}
.pill::after{display:none}
.pill-i,.hero-cta .pill .pill-i,.pill:hover .pill-i,.pill[data-go="registration"]:hover .pill-i,.hero-cta .pill:hover .pill-i{
  width:34px;height:34px;background:var(--cta-border);box-shadow:none;transform:none}
.pill-i svg,.pill:hover .pill-i svg,.hero-cta .pill .pill-i svg{width:10px;height:12px;margin-left:2px;fill:#fff;transform:none}

/* the homepage Register keeps its gentle pulse: the halo breathes out on a slow
   beat and stops on hover. The nav, sticky-bar and banner Register don't pulse. */
.hero-cta .pill .pill-i,.hero-cta .pill .pill-i svg{animation:none}
.hero-cta .pill::before{--ring:var(--cta-rgb);animation:pill-ring 2.4s var(--e) 1s infinite}
.hero-cta .pill:hover::before,.hero-cta .pill:focus-visible::before{animation:none}

/* the smaller Register in the sticky bar, and the nav one a step up */
.pill-sm{padding:5px 6px 5px 18px;gap:12px;font-size:13px}
.pill-sm .pill-i{width:30px;height:30px}
.pill-sm .pill-i svg{width:9px;height:11px;margin-left:1px}
@media(min-width:761px){
  .navreg.pill-sm{height:auto;padding:6px 7px 6px 22px;gap:14px;font-size:14px}
  .navreg.pill-sm .pill-i{width:32px;height:32px}
  .navreg.pill-sm .pill-i svg{width:9px;height:11px}
}

/* not open yet, on the dark Register card */
.pill.is-disabled,.pill.is-disabled:hover{cursor:default;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);
  color:rgba(255,255,255,.88);box-shadow:none}
.pill.is-disabled .pill-i{background:rgba(255,255,255,.2)}
.pill.is-disabled::before{animation:none}

/* the text link */
.tlink,.hero-cta .tlink,.tlink-dl,.tlink.pctl-dl{--tl:var(--cta-ink);color:var(--cta-ink);gap:10px;padding:0 0 6px;
  font-size:14px;font-weight:700;letter-spacing:.16em;background:none;border-bottom:3px solid currentColor;
  transform:none;transition:color .18s,border-color .18s}
.tlink:hover,.tlink:focus-visible,.hero-cta .tlink:hover{color:var(--cta-ink-h);transform:none}
.tlink:focus-visible{outline:2px solid var(--cta-border);outline-offset:4px}
.tlink .dl-ic,.tlink-dl .dl-ic{width:14px;height:16px}
.tlink-dl:hover .dl-ic path:first-child{transform:none}
.bleed .tlink,.reg-book .tlink{color:#fff}
.bleed .tlink:hover,.reg-book .tlink:hover{color:#fff;opacity:.85}

/* hero: the pair stays on one line under the date box, Register on its left
   edge and the link on its right; both scale down a little on narrower screens */
@media(min-width:561px){
  .hero-cta .pill{font-size:clamp(13px,1.05vw,15px);padding-left:clamp(18px,1.75vw,25px);gap:clamp(12px,1.25vw,18px)}
  .hero-cta .tlink{font-size:clamp(12px,.97vw,14px);letter-spacing:.16em}
}
@media(min-width:561px) and (max-width:1080px){
  .hero-cta .pill{font-size:15px;padding-left:25px;gap:18px}
  .hero-cta .tlink{font-size:13px;letter-spacing:.12em}
}
@media(min-width:1081px) and (max-width:1199px){.hero-cta .tlink{letter-spacing:.07em;gap:7px}}
@media(min-width:1200px) and (max-width:1299px){.hero-cta .tlink{letter-spacing:.12em}}
@media(max-width:560px){.hero-cta .pill > span:first-child{flex:1;text-align:center}}

/* the sticky-bar Register matches the nav Register at the top right */
@media(min-width:761px){
  .stick .pill-sm{height:auto;padding:6px 7px 6px 22px;gap:14px;font-size:14px}
  .stick .pill-sm .pill-i{width:32px;height:32px}
  .stick .pill-sm .pill-i svg{width:9px;height:11px}
}

/* photo spots 50% larger: faculty circles (62px to 93px) and the Corporate
   Relations Manager's photo on the Industry page (56px to 84px) */
.fac .av{width:93px;height:93px;font-size:1.65rem;margin-bottom:1rem}
.ind-av,img.ind-av{width:84px;height:84px}
.ind-person{gap:1.25rem}


/* Industry: the Corporate Relations Manager card, a step larger all round */
.ind-person{gap:1.6rem;padding:1.5rem 1.75rem;border-radius:16px;margin:.8rem 0 1rem}
.ind-av,img.ind-av{width:112px;height:112px}
img.ind-av{box-shadow:0 0 0 4px #fff,0 6px 16px rgba(0,0,0,.16)}
.ind-who{gap:.3rem}
.ind-who b{font-size:1.5rem;letter-spacing:-.015em}
.ind-who span{font-size:1.1rem}
.ind-who a{font-size:1.18rem;text-underline-offset:4px}
@media(max-width:560px){
  .ind-person{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.25rem}
  .ind-av,img.ind-av{width:96px;height:96px}
  .ind-who b{font-size:1.3rem}
}

/* Registration banner: a sand line drawing of a Greek temple front on the right
   of the navy, over a soft glow; the heading side stays plain */
.ph-registration{background:
  radial-gradient(50% 100% at 80% 55%,rgba(226,196,143,.13) 0%,rgba(226,196,143,0) 70%),
  radial-gradient(60% 120% at 82% 50%,rgba(38,64,107,.6) 0%,rgba(38,64,107,0) 70%),
  linear-gradient(120deg,#08182F 0%,#0F2446 55%,#16305A 100%)}
.ph-registration .wrap{padding-bottom:0}
.ban-art{position:absolute;inset:0;z-index:1;pointer-events:none}
.ban-art i{position:absolute;inset:0}
/* temple front */
.reg-temple .ban-art i:first-child{background:url("../img/banner-temple.svg") right clamp(24px,7vw,130px) center/auto 76% no-repeat;opacity:.5}
@media(max-width:900px){.reg-temple .ban-art i:first-child{opacity:.2}}

/* footer skyline: the Athens silhouette from the ESSKA banners, lifted to a pale
   blue so it shows on the navy (the earlier drawing was in the footer's own navy
   and could not be seen) */
footer::before{background:url("../img/skyline-blue.png") center bottom/cover no-repeat;opacity:.16;filter:brightness(2.2) saturate(.6)}

/* footer text about 15% larger than the original (links, headings, brand, address,
   base line), with the spacing and the logo scaled to match */
footer{font-size:1.04rem}
footer h4{font-size:.97rem;margin-bottom:1.25rem}
footer li{margin-bottom:.68rem}
.f-grid{gap:2.4rem 2.8rem}
.f-brand{gap:.9rem;margin-bottom:1.25rem}
.f-brand img{width:54px}
.f-brand b{font-size:1.1rem}
.f-brand span{font-size:.86rem;letter-spacing:.17em;margin-top:.25rem}
.f-base{font-size:.9rem;margin-top:2.8rem}
@media(min-width:901px) and (max-width:1200px){.f-grid{grid-template-columns:1.5fr 1.1fr 1fr 1.2fr;gap:2rem}}

/* ---------- Download links: underline under the words only ----------
   The rule used to run under the arrow as well. It now sits on the label, and the
   arrow is set so its tip lands exactly on that line. The glyph is one chubby,
   round-capped arrow (no tray) that dips gently on a slow beat, and again on hover.
   The reduced-motion block near the top of this file switches the movement off. */
.tlink-dl,.tlink.tlink-dl,.hero-cta .tlink.tlink-dl,.tlink.pctl-dl.tlink-dl{
  align-items:flex-end;gap:10px;border-bottom:0;padding-bottom:0}
.tlink-dl > span{display:block;padding-bottom:6px;border-bottom:3px solid currentColor}
.tlink .dl-ic,.tlink-dl .dl-ic{width:19px;height:19px;flex:none;display:block;
  /* 3px clears the underline stroke, so the arrow stops on top of the line */
  margin-bottom:1px;overflow:visible;
  transition:transform .28s var(--e);animation:dl-dip 4.2s var(--e) 1.6s infinite}
@keyframes dl-dip{0%,74%,100%{transform:translateY(0)}86%{transform:translateY(2.5px)}}
.tlink-dl:hover .dl-ic,.tlink-dl:focus-visible .dl-ic{animation:none;transform:translateY(2.5px)}
.tlink-dl .dl-ic path{transition:none;transform:none}

/* ---------- the chairs' photos: a shaded ring in the site colour ----------
   The ring is the element's border, filled with a gold gradient (light at the top
   left, deepest at the foot); the first background layer keeps the inside of the
   circle clear, so the photo is clipped to it as before. */
:root{--ring-1:#E2C48F;--ring-2:#C98A34;--ring-3:#8A5A1C}
.sign img,.sign figure .sign-av{
  border:3px solid transparent;border-radius:50%;
  background-image:linear-gradient(var(--paper),var(--paper)),
    linear-gradient(145deg,var(--ring-1) 0%,var(--ring-2) 52%,var(--ring-3) 100%);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 6px 18px rgba(0,0,0,.16)}
.sign figure .sign-av{background-image:linear-gradient(var(--ice),var(--ice)),
    linear-gradient(145deg,var(--ring-1) 0%,var(--ring-2) 52%,var(--ring-3) 100%)}
/* the letter's larger circles carry a proportionally thicker ring */
.lh-chairs .sign img,.lh-chairs .sign .sign-av{border-width:5px}
@media(max-width:900px){.lh-chairs .sign img,.lh-chairs .sign .sign-av{border-width:4px}}

/* ---------- underlined links: the site colour on hover ----------
   At rest the label and its underline are dark ink; hovering (or tabbing to it)
   turns both, and the download arrow with them, deep gold. On photos and dark panels
   the light tone of the same colour is used instead of plain white. */
:root{--tl-hover:#8A5A1C}
.tlink:hover,.tlink:focus-visible,
.hero-cta .tlink:hover,.hero-cta .tlink:focus-visible,
.tlink-dl:hover,.tlink-dl:focus-visible,
.tlink.pctl-dl:hover,.tlink.pctl-dl:focus-visible{color:var(--tl-hover)}
.bleed .tlink:hover,.bleed .tlink:focus-visible,
.reg-book .tlink:hover,.reg-book .tlink:focus-visible{color:var(--ac-l);opacity:1}

/* ---------- the date-box icons ----------
   ESSKA supplies these as a solid disc with the calendar and the pin punched out of
   it, so the drawn lines are holes and the shape's interior belongs to the disc.
   icon-date.png and icon-place.png are those two rebuilt without the disc: just the
   shape, filled in a light tint of the site colour with its lines a step deeper, so
   it stands out against the dark date box. They carry their own colour, so the
   white-out filter the older icons needed is switched off here. */
.ebar-item img{filter:none;opacity:1}
/* ---------- the chairs' letter: a larger ESSKA mark, set in from the edge ----------
   The mark at the head of the letter grows from 58px to 88px and moves right, in line
   with the chairs' photographs below it rather than hard against the card's edge. */
.lh-mark{width:88px;margin-left:clamp(.4rem,1.6vw,1.5rem)}
@media(max-width:620px){.lh-mark{width:70px;margin-left:.2rem}}

/* ---------- header: the ESSKA mark centred over WELCOME ----------
   Where the menu drops to its own row, the mark sits centred above the first link.
   The logo file has a little blank margin, so its drawn circle is centred rather
   than its box: the circle's centre is 48.8% across the image, and WELCOME is about
   80px wide (75px on narrow screens, where the menu type is smaller). */
@media(max-width:1480px){
  .brand{margin-left:calc(40px - .488 * clamp(72px,6vw,108px))}
  .nav.stuck .brand{margin-left:calc(40px - .488 * clamp(52px,3.7vw,66px))}
}
@media(max-width:760px){
  .brand,.nav.stuck .brand{margin-left:calc(37px - .488 * clamp(72px,6vw,108px))}
}
@media(max-width:520px){
  .brand,.nav.stuck .brand{margin-left:calc(37px - .488 * 60px)}
}

/* ---------- the chairs' letter: the opening paragraph in the site colour ---------- */
.letterhead .lead{color:#9A6424}

/* ---------- header: a larger mark, and the wordmark set on its baseline ----------
   The mark grows again, the subtitle under "Focus Meeting 2027" steps up with it,
   and the two now sit on a common bottom line: the subtitle's capitals end where the
   drawn logo ends (the image has a little blank margin below "ESSKA", about 7% of its
   width, which the subtitle's own margin takes up). The centring over WELCOME above
   follows the new widths. */
.brand{align-items:flex-end}
.brand img{width:clamp(72px,6vw,108px)}
.brand .bn .sec{font-size:clamp(.8rem,1vw,1.06rem);margin-bottom:calc(.072 * clamp(72px,6vw,108px) - .2em)}
.nav.stuck .brand img{width:clamp(52px,3.7vw,66px)}
.nav.stuck .brand .bn .sec{font-size:clamp(.66rem,.76vw,.78rem);margin-bottom:calc(.072 * clamp(52px,3.7vw,66px) - .2em)}
@media(max-width:520px){
  .brand img,.nav.stuck .brand img{width:60px}
  .brand .bn .sec,.nav.stuck .brand .bn .sec{font-size:.64rem;margin-bottom:calc(.072 * 60px - .2em)}
}

/* ---------- the chairs' letter: plain greeting, and a closing strip ----------
   "Dear Colleagues," reads as the opening of a letter rather than a heading, so it
   drops the bold. The programme link leaves the text column and becomes the foot of
   the whole card: a pale band in the site colour, edged along the top with the same
   gradient rule that runs across the head of the card, the link on its left. */
.letterhead .salut{font-weight:400}
.letterhead .letter-cta{grid-column:1/-1;text-align:center;border-top:0;
  margin:clamp(2.2rem,4vw,3rem) calc(-1 * clamp(1.4rem,3.6vw,3.2rem)) calc(-1 * clamp(1.9rem,3.4vw,2.8rem));
  padding:clamp(1.4rem,2.6vw,1.9rem) clamp(1.4rem,3.6vw,3.2rem) clamp(1.5rem,2.8vw,2rem);
  background:
    linear-gradient(90deg,var(--ac-br) 0%,var(--blue) 45%,transparent 92%) top left/100% 3px no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--ac-br) 13%,var(--paper)) 0%,color-mix(in srgb,var(--ac-br) 5%,var(--paper)) 100%)}

/* =====================================================================
   Registration buttons from the new mock-ups (piloted on Rome)
   ===================================================================== */

/* 1. homepage Register now: a rectangle with softened corners instead of a pill;
   the halo and its gentle pulse follow the new shape */
.hero-cta .pill{border-radius:12px}

/* 2. the Register tab hanging from the top of the header: a shaded gold panel
   (lighter at the top left, deepening to the foot, with a fine highlight along the
   top edge) rather than a flat block, the early-rate date under a hairline */
.nav-in{position:relative}
.reg-tab{position:absolute;top:0;right:var(--pad);z-index:5;display:flex;flex-direction:column;gap:.7rem;
  min-width:clamp(210px,15vw,250px);padding:1.15rem 1.4rem 1.2rem;border-radius:0 0 16px 16px;
  text-decoration:none;color:#fff;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(242,215,160,.38) 0%,rgba(242,215,160,0) 55%),
    linear-gradient(165deg,#BF8538 0%,#9A6424 48%,#6F4613 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(70,42,10,.25),
    0 10px 24px rgba(138,90,28,.28),0 2px 6px rgba(15,18,23,.12);
  transition:box-shadow .3s var(--e),transform .3s var(--e),filter .3s var(--e)}
.reg-tab-top{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.3);
  font-size:15px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.reg-tab-note{font-size:.84rem;font-weight:500;color:#FBEBD0;letter-spacing:.01em;line-height:1.2}
.reg-arrow{width:16px;height:12px;flex:none;transition:transform .3s var(--e)}
.reg-tab:hover,.reg-tab:focus-visible{filter:brightness(1.08);transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(70,42,10,.25),
    0 16px 32px rgba(138,90,28,.34),0 3px 8px rgba(15,18,23,.14)}
.reg-tab:hover .reg-arrow,.reg-tab:focus-visible .reg-arrow,
.stick-reg:hover .reg-arrow,.stick-reg:focus-visible .reg-arrow{transform:translateX(3px)}
.reg-tab:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
/* the tab sits in the header's own height; when the header compacts on scroll it
   drops the note and tightens */
.nav.stuck .reg-tab{padding:.75rem 1.2rem .8rem;gap:0;min-width:0}
.nav.stuck .reg-tab-top{padding-bottom:0;border-bottom:0;font-size:13px}
.nav.stuck .reg-tab-note{display:none}
@media(max-width:1480px){.navreg.reg-tab{margin-left:0}}
@media(max-width:760px){
  .navreg.reg-tab{position:static;margin-left:auto;align-self:center;border-radius:10px;padding:.65rem 1rem;gap:0;min-width:0}
  .reg-tab-top{padding-bottom:0;border-bottom:0;font-size:12px;gap:.7rem}
  .reg-tab-note{display:none}
}

/* 3. the sticky bar: meeting and date on the left, the early rate and an outlined
   Register on the right. On the dark bar the outline is white; when the bar turns
   white over the dark sections it takes the site gold, still without a fill */
.stick{justify-content:space-between}
.stick .l{display:flex;align-items:center;gap:1.1rem;min-width:0}
.stick .l b{display:inline;font-size:1.08rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.stick-sep{display:block;width:1px;height:1.6rem;background:rgba(255,255,255,.28);flex:none}
.stick .l > span{display:block;margin:0;color:#E2C48F;font-size:.98rem;font-weight:500;letter-spacing:0;
  text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stick-early{margin:0 0 0 auto;text-align:right;line-height:1.25;color:#fff}
.stick-early small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#E2C48F}
.stick-early > span{font-size:.95rem;font-weight:500}
.stick-reg{flex:none;display:inline-flex;align-items:center;gap:1rem;padding:.8rem 1.35rem;border-radius:10px;
  border:1.5px solid rgba(255,255,255,.85);color:#fff;background:transparent;text-decoration:none;
  font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  transition:background .2s var(--e),border-color .2s var(--e),color .2s var(--e)}
.stick-reg:hover,.stick-reg:focus-visible{background:rgba(255,255,255,.1);border-color:#fff}
.stick.onlight .stick-sep{background:rgba(18,41,77,.18)}
.stick.onlight .l > span{color:var(--muted)}
.stick.onlight .stick-early{color:var(--navy)}
.stick.onlight .stick-early small{color:#8A5A1C}
.stick.onlight .stick-reg{border-color:#8A5A1C;color:#8A5A1C}
.stick.onlight .stick-reg:hover,.stick.onlight .stick-reg:focus-visible{background:rgba(138,90,28,.07)}
.stick-reg:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:900px){.stick .l > span,.stick-sep{display:none}}
@media(max-width:640px){.stick-early{display:none}.stick .l b{font-size:.95rem}}

/* =====================================================================
   Buttons as soft rectangles on every site, a stronger Send enquiry and a lighter
   Email about sponsorship
   ===================================================================== */
/* one shape for everything you press: rounded rectangles instead of pills (the small
   disc inside a Register button stays round) */
.pill,.hero-cta .pill,.btn{border-radius:12px}
.pill-sm,.pchip,.pcollapse,.tabs button{border-radius:10px}

/* the enquiry form's Send enquiry: the one action on the Contacts page, so it takes
   the same shaded fill as the Register tab in the header, with white lettering */
.form .pill,.form .pill:hover,.form .pill:focus-visible{color:#fff;border-color:transparent;
  background:radial-gradient(120% 110% at 0% 0%,rgba(242,215,160,.35) 0%,rgba(242,215,160,0) 55%),
    linear-gradient(165deg,#BF8538 0%,#9A6424 48%,#6F4613 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 10px 24px rgba(138,90,28,.3),0 2px 6px rgba(0,0,0,.1)}
.form .pill:hover,.form .pill:focus-visible{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 32px rgba(138,90,28,.36),0 3px 8px rgba(0,0,0,.12)}
.form .pill .pill-i,.form .pill:hover .pill-i{background:#fff}
.form .pill .pill-i svg,.form .pill:hover .pill-i svg{fill:#9A6424}

/* Email about sponsorship: quieter and more refined next to the contact details, a
   barely-tinted fill and a fine border, deepening only on hover */
.ind-spon .pill{background:color-mix(in srgb,var(--cta-fill) 32%,#fff);border-width:1.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);font-weight:700;letter-spacing:.12em;gap:14px;padding:6px 7px 6px 22px}
.ind-spon .pill .pill-i{width:30px;height:30px}
.ind-spon .pill .pill-i svg{width:9px;height:11px}
.ind-spon .pill:hover,.ind-spon .pill:focus-visible{background:var(--cta-fill);
  box-shadow:0 0 0 4px rgba(var(--cta-rgb),.1)}

/* Get directions, on the venue card: the same lighter, finer treatment as Email about
   sponsorship, so a secondary action beside the venue facts stays quiet */
.v-card .btn-row .pill{background:color-mix(in srgb,var(--cta-fill) 32%,#fff);border-width:1.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);font-weight:700;letter-spacing:.12em;gap:14px;padding:6px 7px 6px 22px}
.v-card .btn-row .pill .pill-i{width:30px;height:30px}
.v-card .btn-row .pill .pill-i svg{width:9px;height:11px}
.v-card .btn-row .pill:hover,.v-card .btn-row .pill:focus-visible{background:var(--cta-fill);
  box-shadow:0 0 0 4px rgba(var(--cta-rgb),.1)}

/* ---------- Register tab and Send enquiry: richer shading ----------
   Four layers over the site colour instead of one gradient: a soft gloss across the
   top, a clear light source at the top left, the colour itself running light to deep,
   and a shaded corner at the bottom right, with a bright top edge and a shadow inside
   the foot, so the button reads as a lit, rounded surface rather than a flat panel. */
.reg-tab,.form .pill,.form .pill:hover,.form .pill:focus-visible{background:
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 50%),
    radial-gradient(95% 130% at 100% 100%,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 62%),
    radial-gradient(110% 95% at 0% 0%,rgba(242,215,160,.6) 0%,rgba(242,215,160,.18) 32%,rgba(242,215,160,0) 58%),
    linear-gradient(158deg,#BF8538 0%,#9A6424 46%,#6F4613 100%)}
.reg-tab{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -4px 10px rgba(0,0,0,.2),
    0 12px 28px rgba(138,90,28,.34),0 2px 6px rgba(0,0,0,.12)}
.reg-tab:hover,.reg-tab:focus-visible{box-shadow:inset 0 1px 0 rgba(255,255,255,.46),inset 0 -4px 10px rgba(0,0,0,.2),
    0 18px 36px rgba(138,90,28,.4),0 3px 8px rgba(0,0,0,.14)}
.reg-tab-top{border-bottom-color:transparent;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.12)) left bottom/100% 1px no-repeat}
.nav.stuck .reg-tab-top{background:none}
.form .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -4px 10px rgba(0,0,0,.18),0 10px 24px rgba(138,90,28,.32),0 2px 6px rgba(0,0,0,.1)}

/* programme breaks: the title centred in the height of the row, level with the
   middle of the time and duration beside it, rather than hanging at the top */
.prow.break .prow-static{align-items:center}
.prow.break .ptitle{line-height:1.2}

/* ---------- the header matches the sticky bar (as piloted on Rome) ----------
   The hanging tab gives way to the same pair as the bar at the foot of the page: the
   early-rate date, then an outlined Register with an arrow, in the site colour on the
   white header. */
.nav-cta{display:flex;align-items:center;gap:1.4rem}
.nav-early{margin:0;text-align:right;line-height:1.25;color:var(--navy)}
.nav-early small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8A5A1C}
.nav-early > span{font-size:.98rem;font-weight:500}
.nav-reg{flex:none;display:inline-flex;align-items:center;gap:1.1rem;padding:.9rem 1.5rem;border-radius:10px;
  border:1.5px solid #8A5A1C;color:#8A5A1C;background:transparent;text-decoration:none;
  font-size:15px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  transition:background .2s var(--e)}
.nav-reg:hover,.nav-reg:focus-visible{background:rgba(138,90,28,.07)}
.nav-reg:hover .reg-arrow,.nav-reg:focus-visible .reg-arrow{transform:translateX(3px)}
.nav-reg:focus-visible{outline:2px solid #8A5A1C;outline-offset:3px}
.nav.stuck .nav-reg{padding:.65rem 1.2rem;font-size:13px}
.nav.stuck .nav-early > span{font-size:.88rem}
@media(max-width:760px){
  .nav-early{display:none}
  .nav-reg{padding:.6rem 1rem;font-size:12px;gap:.7rem}
}
/* an earlier Register style padded .navreg and ran a sheen over it; the new wrapper
   needs neither, so its right edge lines up with the menu below */
.navreg.nav-cta{padding:0;background:none;box-shadow:none;border:0}
.navreg.nav-cta::before,.navreg.nav-cta::after{content:none;animation:none}

/* ---------- topic cards the same size as on the other five sites ----------
   The cards were square, so they came out shorter than everywhere else. They now take
   the shared height (340px to 430px, width from the three-column grid). All three
   artworks are square with the title printed inside, close to the edges, so they are
   not cropped to the taller card: each sits whole at the foot, and the space above
   continues its own colours (left to right, deepening downwards) and fades into it. */
.topics .tile{min-height:clamp(340px,30vw,430px);aspect-ratio:auto}
.tile.t1 .art,.tile.t2 .art,.tile.t3 .art{inset:auto 0 0 0;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%)}
.tile.t1{background:linear-gradient(180deg,rgba(21,47,90,0) 25%,#152f5a 100%),linear-gradient(90deg,#fafcfe,#f1f6fd)}
.tile.t2{background:linear-gradient(180deg,rgba(14,41,91,0) 25%,#0e295b 100%),linear-gradient(90deg,#6691cd,#a7c0e2)}
.tile.t3{background:linear-gradient(180deg,rgba(6,21,45,0) 25%,#06152d 100%),linear-gradient(90deg,#0f2d57,#1a447e)}
/* an earlier rule left the Dysplasia artwork 8% see-through, which let the fill above
   show through as a band once the card grew taller */
.tile.t2 .art{opacity:1}
@media (hover:none){.topics .tile{min-height:0}}

/* the room booking button on the dark accommodation panel: the outlined Register style,
   white on the dark ground, sitting under the note */
.v-stay-when .stay-book{align-self:flex-start;margin-top:1.1rem}

/* ---------- Athens: the hotel booking link, easy to find on every page ----------
   One bed glyph marks "Book a room" wherever it appears, so it reads as the hotel
   action and not a second Register: in the utility strip, the hero date box, the
   sticky bar, the homepage venue block, the venue banner and card, the Registration
   page and the footer. Register keeps the arrow; booking keeps the bed. */
.bed-ic{width:20px;height:20px;flex:none}

/* hero date box: a full-width strip along its foot */
.ebar-book{display:flex;align-items:center;gap:.7rem;margin:.8rem 0 0;padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.22);color:#E8D3AE;text-decoration:none;
  font-size:clamp(.96rem,1.1vw,1.04rem);line-height:1.3}
.ebar-book b{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(226,196,143,.55);
  text-underline-offset:4px;text-decoration-thickness:2px}
.ebar-book .bed-ic{color:var(--ac-l)}
.ebar-book .reg-arrow{margin-left:auto;color:var(--ac-l)}
.ebar-book:hover b{text-decoration-color:#fff}
.ebar-book:hover .reg-arrow{transform:translateX(3px)}
.ebar-book:focus-visible{outline:2px solid #E2C48F;outline-offset:4px;border-radius:2px}

/* the Book a room button: the Register shape, with the bed in the disc */
.pill-book .pill-i .bed-ic{width:20px;height:20px;color:#fff}
.v-card .btn-row .pill.pill-book{background:var(--cta-fill);border-width:2px;
  box-shadow:0 0 0 4px rgba(var(--cta-rgb),.12);font-weight:700;letter-spacing:.1em;gap:18px;padding:7px 9px 7px 25px}
.v-card .btn-row .pill.pill-book .pill-i{width:34px;height:34px}
.v-card .btn-row .pill.pill-book:hover,.v-card .btn-row .pill.pill-book:focus-visible{background:var(--cta-fill-h);
  box-shadow:0 0 0 7px rgba(var(--cta-rgb),.16)}
.v-card .btn-row{gap:1rem 1.2rem}
.v-card .btn-row .tlink{margin-left:.4rem}

/* venue facts: the inline link gets an arrow and a firmer weight */
.v-facts a.vf-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:700}
.v-facts a.vf-link .reg-arrow{width:14px;height:10px}
.v-facts a.vf-link:hover .reg-arrow{transform:translateX(3px)}

/* venue banner: an outlined white button at the end of the meta line */
.ph-meta .ph-book{margin-left:auto;gap:.7rem}
.ph-meta .ph-book span{font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;display:inline}
@media(max-width:700px){.ph-meta .ph-book{margin-left:0}}

/* accommodation panel on the Venue page: filled, so it is the strongest thing there */
.v-stay-when .stay-book{background:var(--cta-fill);border-color:var(--cta-fill);color:var(--cta-ink)}
.v-stay-when .stay-book:hover,.v-stay-when .stay-book:focus-visible{background:#fff;border-color:#fff}


.pill.pill-book .pill-i svg.bed-ic,.v-card .btn-row .pill.pill-book .pill-i svg.bed-ic{width:20px;height:20px;margin:0;fill:none;stroke:#fff}
.v-stay-when .stay-book,.v-stay-when .stay-book span{color:var(--cta-ink)}
.v-stay-when .stay-book span{font-size:14px;letter-spacing:.16em}
.v-stay-when .stay-book span{white-space:nowrap;letter-spacing:.12em}

/* the contact address never breaks at its hyphen */
a[href^="mailto:focus-meetings@"]{white-space:nowrap}

/* ---------- Register in the "Join us" countdown band: quieter ----------
   On the photograph it sits beside the white "See what's on" link, so it takes the same
   white: a see-through glass fill, a fine white outline and a small translucent disc,
   with no halo, ring or pulse. It firms up a little on hover. */
.bleed .pill,.bleed .pill[data-go="registration"]{background:rgba(255,255,255,.08);color:#fff;
  border:1.5px solid rgba(255,255,255,.72);box-shadow:none;backdrop-filter:blur(6px);
  font-size:14px;font-weight:700;letter-spacing:.14em;gap:14px;padding:6px 7px 6px 22px}
.bleed .pill::before,.bleed .pill::after{content:none;animation:none}
.bleed .pill .pill-i,.bleed .pill[data-go="registration"] .pill-i,
.bleed .pill:hover .pill-i,.bleed .pill[data-go="registration"]:hover .pill-i{
  width:30px;height:30px;background:rgba(255,255,255,.18);box-shadow:none;animation:none;transform:none}
.bleed .pill .pill-i svg,.bleed .pill:hover .pill-i svg{width:9px;height:11px;fill:#fff;animation:none}
.bleed .pill:hover,.bleed .pill:focus-visible{background:rgba(255,255,255,.16);border-color:#fff;
  box-shadow:none;transform:none;color:#fff}
.bleed .pill:hover .pill-i svg{transform:translateX(1px)}

/* ---------- Athens hero: Register now and the programme link in the first screen ----------
   The date box gains no extra row for the hotel link: the venue takes the first line of
   its foot, and the early rate and "Book a room" share the second, one at each end. On
   screens shorter than 900px the title runs on one line, which returns another row, so
   the two buttons stay above the fold on a 13-inch laptop. */
.ebar-foot{align-items:center;row-gap:.5rem}
.ebar-foot .ebar-venue{flex-basis:100%}
.ebar-foot .ebar-book{margin:0 0 0 auto;padding:0;border:0;gap:.55rem;white-space:nowrap}
.ebar-foot .ebar-book .bed-ic{width:18px;height:18px}
.ebar-foot .ebar-book .reg-arrow{margin-left:.15rem}
@media (max-width:1599px){.eb-more{display:none}}
@media (max-width:560px){.ebar-foot .ebar-book{margin-left:0}}
@media (min-width:1081px) and (max-height:900px){
  .hero h1{white-space:nowrap;font-size:clamp(2.2rem,3.5vw,3.3rem)}
  .hero .strap{margin-top:.35rem}
  .ebar-foot{margin-top:.6rem;padding-top:.6rem}
  .hero-cta{margin-top:clamp(1.4rem,3.2vh,2.2rem)}
}
@media (min-width:1081px) and (max-height:740px){
  .hero-cta{margin-top:1.1rem}
  .kicker{margin-bottom:.5rem}
}

/* the countdown-band Register in the site's own colours: the outline, the label and the
   disc take a light-to-main gradient of the palette instead of plain white */
.bleed .pill,.bleed .pill[data-go="registration"]{--g:linear-gradient(120deg,#F4E2BC 0%,#E2C48F 50%,#C98A34 100%);
  position:relative;border:0;padding:7.5px 8.5px 7.5px 23.5px;background:rgba(201,138,52,.12)}
.bleed .pill::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  padding:1.5px;background:var(--g);animation:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.bleed .pill > span:first-child{background:var(--g);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.bleed .pill .pill-i,.bleed .pill[data-go="registration"] .pill-i,
.bleed .pill:hover .pill-i,.bleed .pill[data-go="registration"]:hover .pill-i{background:var(--g)}
.bleed .pill .pill-i svg,.bleed .pill:hover .pill-i svg{fill:#08182F}
.bleed .pill:hover,.bleed .pill:focus-visible{background:rgba(201,138,52,.24)}

/* Contacts: the team and address come straight after the message, and the jump to the
   form is a quiet link with a down arrow, like Download the programme, not a button */
.pc-box .pc-box-office{margin-top:.2rem!important}
.pc-box .pc-jump{margin-top:.5rem;font-size:13px}
.pc-sub a[data-go]{color:var(--cta-border);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(var(--cta-rgb),.35)}
.pc-sub a[data-go]:hover{text-decoration-color:currentColor}

/* ---------- Contacts: one light gradient for the whole page ----------
   The banner and the enquiry form share a single wash from the paper colour to a
   light tint of the palette, with no glows or dot pattern. The sponsorship line is
   its own paragraph, and the rule in the enquiry box now sits above the form link. */
#contacts{background:linear-gradient(172deg,var(--paper) 0%,
  color-mix(in srgb,var(--ice) 30%,var(--paper)) 50%,color-mix(in srgb,var(--ice) 62%,var(--paper)) 100%)}
#contacts .pc,#contacts .tint{background:transparent}
#contacts .pc::before{content:none}
.pc-sub.pc-sub-2{margin-top:.85rem}
.pc-box .pc-box-office{border-top:0;padding-top:0;margin-top:.5rem!important}
.pc-jump-row{width:100%;margin-top:.7rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.pc-box .pc-jump-row .pc-jump{margin-top:0}

/* ---------- Contacts refinements ----------
   The team and address a step larger, the address in the site colour, a little more
   air above the form link, and Send enquiry keeps its shading but lighter: the site
   colour lifts towards a pale top-left instead of sinking into a dark corner. */
.pc-box .pc-box-office{font-size:1.02rem}
.pc-box .pc-box-office b{font-size:1.06rem}
.pc-box .pc-box-office a{color:var(--cta-border);text-decoration-color:rgba(var(--cta-rgb),.4)}
.pc-box .pc-box-office a:hover{text-decoration-color:currentColor}
.pc-jump-row{margin-top:1.2rem;padding-top:1.5rem}
.form .pill,.form .pill:hover,.form .pill:focus-visible{background:
    linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.06) 40%,rgba(255,255,255,0) 55%),
    linear-gradient(158deg,color-mix(in srgb,var(--cta-border) 72%,#fff) 0%,var(--cta-border) 55%,
      color-mix(in srgb,var(--cta-border) 90%,#000) 100%)}
.form .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(0,0,0,.08),
  0 8px 18px rgba(var(--cta-rgb),.22),0 1px 3px rgba(0,0,0,.06)}
.form .pill:hover,.form .pill:focus-visible{filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 6px rgba(0,0,0,.08),
  0 12px 24px rgba(var(--cta-rgb),.28),0 2px 4px rgba(0,0,0,.08)}
.form .pill .pill-i svg,.form .pill:hover .pill-i svg{fill:var(--cta-border)}

/* ---------- Athens: see-through Register now and Book a room ----------
   The hero Register now and the three Book a room buttons (homepage venue block, venue
   card, Registration page accommodation card) drop their tinted fill so the page shows
   through; outline, halo, disc, hover fill and animations are unchanged. */
.hero-cta .pill,.feature .pill.pill-book,.v-card .btn-row .pill.pill-book,.reg-stay .pill.pill-book{background:transparent}

/* date ranges: the en dash stays small and sits close to the numbers on both sides,
   so "8–9 October" reads as one date rather than three separate pieces */
.dash{font-size:.7em;font-weight:500;margin:0 .06em;vertical-align:.1em;opacity:.7}
.ebar-item .dash{font-size:.6em;margin:0 .08em;vertical-align:.14em;opacity:1}
.u-c i.dash,.u-l i.dash{display:inline!important;width:auto;height:auto;background:none;align-self:auto}

/* ---------- see-through Register now, and Get directions in the site's dark tone ----------
   The hero Register now drops its tinted fill so the page shows through (outline, halo,
   disc and animations unchanged). Get directions on the venue card takes the standard
   button size, the same as Book a room, in the palette's darkest colour instead of the
   main accent, so it reads as the secondary action. */
.hero-cta .pill{background:transparent}
.v-card .btn-row .pill:not(.pill-book){background:transparent;border:2px solid var(--navy);color:var(--navy);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--navy) 10%,transparent);
  font-weight:700;letter-spacing:.1em;gap:18px;padding:7px 9px 7px 25px}
.v-card .btn-row .pill:not(.pill-book) .pill-i{width:34px;height:34px;background:var(--navy)}
.v-card .btn-row .pill:not(.pill-book) .pill-i svg{width:10px;height:12px;fill:#fff}
.v-card .btn-row .pill:not(.pill-book):hover,.v-card .btn-row .pill:not(.pill-book):focus-visible{
  background:color-mix(in srgb,var(--navy) 7%,transparent);border-color:var(--navy);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--navy) 12%,transparent)}
/* Book a room and Get directions side by side at exactly the same width */
.v-card .btn-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:560px}
.v-card .btn-row .pill{justify-content:space-between;width:100%;box-sizing:border-box}
@media(max-width:520px){.v-card .btn-row{grid-template-columns:1fr}}

/* the line under Send enquiry explaining that it opens the visitor's email app */
.form-note{margin:.9rem 0 0;font-size:.9rem;color:var(--muted);line-height:1.55;max-width:52ch}
.form-note a{color:var(--cta-border);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(var(--cta-rgb),.4)}

/* ---------- Send enquiry: light, with the shading cut into the surface ----------
   The solid dark block gives way to a pale tint of the site colour: white at the top
   edge falling to a deeper tint at the foot, a fine inner shadow along the top and
   sides so the face sits slightly below its border, dark ink lettering and the disc in
   the site colour. It presses in a little further on hover and click. */
.form .pill,.form .pill:hover,.form .pill:focus-visible{color:var(--cta-ink);
  border:1.5px solid var(--cta-border);
  background:linear-gradient(180deg,#fff 0%,var(--cta-fill) 46%,
    color-mix(in srgb,var(--cta-fill) 76%,var(--cta-border)) 100%)}
.form .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
  inset 0 2px 4px rgba(var(--cta-rgb),.22),inset 0 -1px 0 rgba(255,255,255,.5),
  0 1px 2px rgba(var(--cta-rgb),.18),0 6px 14px rgba(var(--cta-rgb),.14)}
.form .pill:hover,.form .pill:focus-visible{filter:none;transform:none;
  background:linear-gradient(180deg,#fff 0%,var(--cta-fill-h) 46%,
    color-mix(in srgb,var(--cta-fill-h) 72%,var(--cta-border)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
  inset 0 3px 6px rgba(var(--cta-rgb),.26),0 1px 2px rgba(var(--cta-rgb),.2),
  0 8px 18px rgba(var(--cta-rgb),.18)}
.form .pill:active{transform:none;
  box-shadow:inset 0 2px 6px rgba(var(--cta-rgb),.32),0 1px 2px rgba(var(--cta-rgb),.16)}
.form .pill .pill-i,.form .pill:hover .pill-i{background:var(--cta-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.form .pill .pill-i svg,.form .pill:hover .pill-i svg{fill:#fff}

/* ---------- small phones (430px and under) ----------
   A responsiveness sweep at 320 to 390px found three places whose smallest possible
   width was wider than the screen, which pushed the whole page sideways: the header
   brand beside the Register button, the sponsorship card (the round photo and the long
   email address on one line), and the "Opens ..." button in the registration card.
   Everything here only tightens those. */
@media(max-width:430px){
  .brand img,.nav.stuck .brand img{width:46px}
  .brand .bn b,.nav.stuck .brand .bn b{font-size:.92rem}
  .brand .bn .sec,.nav.stuck .brand .bn .sec{font-size:.54rem;letter-spacing:.08em;margin-bottom:0}
  .brand{gap:.6rem}
  .nav-reg{padding:.5rem .7rem;font-size:11px;gap:.45rem}
  .kicker{flex-wrap:wrap;gap:.7rem}
  /* the sponsorship contact: photo above the name, and a long email may break */
  .ind-person,.ind-person.ind-person{flex-direction:column;align-items:flex-start;gap:.8rem;padding:1rem}
  .ind-av,img.ind-av{width:64px;height:64px}
  .ind-who a{overflow-wrap:anywhere;word-break:break-word}
  .ind-card,.reg-card{padding:1.15rem}
  /* buttons may set their label over two lines rather than force the page wider */
  .pill{font-size:12px;letter-spacing:.06em;padding-left:16px;gap:10px}
  .pill > span:first-child{white-space:normal;text-align:left}
  .pill-i{width:28px;height:28px}
  .hero-cta .pill{font-size:13px}
}
@media(max-width:430px){
  /* remaining narrow-screen pinch points found by the sweep at 320px */
  .prog-controls,.pctl-row{flex-wrap:wrap}
  .prog-controls input,.prog-controls .pfield{min-width:0}
  .fac-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fac,.route,.routes > *{min-width:0}
  .fac b,.fac span{overflow-wrap:anywhere}
  .routes{grid-template-columns:1fr}
}
@media(max-width:430px){
  /* the programme's Download link and the faculty country labels were the last two
     things wider than a 320px screen */
  .pctl-row .tlink,.tlink.pctl-dl{font-size:11px;letter-spacing:.05em;gap:.45rem}
  .pctl-row .tlink > span,.tlink.pctl-dl > span{white-space:normal}
  .fac b,.fac .c,.fac span{overflow-wrap:anywhere;hyphens:auto}
}
@media(max-width:430px){
  /* the "Opens first" tag sat on top of the period name once the card narrowed */
  .fee-period{padding-top:1rem}
  .fp-tag{position:static;align-self:flex-start;order:-1;margin-bottom:.15rem}
}

/* =====================================================================
   PHONE LAYOUT PASS — everything below is inside phone-only media queries,
   so the desktop layout is untouched.
   ===================================================================== */

/* 1. Header: the logo and Register sit on one line, properly centred on each
   other, and the menu becomes an even three-by-two grid underneath instead of a
   ragged wrap. */
@media(max-width:760px){
  .nav-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem 1rem;padding-block:.5rem}
  .brand,.nav.stuck .brand{align-items:center;padding:.35rem 0}
  .nav-cta{justify-self:end}
  .nav ul{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;
    border-top:1px solid var(--line)}
  .nav ul li{display:flex;justify-content:center}
  .nav ul a{width:100%;text-align:center;padding:.72rem .25rem;font-size:.75rem;letter-spacing:.05em}
  .nav ul a::after{left:14%;right:14%;height:3px}
}

/* 2. The hero pair: Register now full width, the programme link centred under it. */
@media(max-width:560px){
  .hero-cta{flex-direction:column;align-items:stretch;gap:.9rem}
  .hero-cta .pill{width:100%;justify-content:space-between}
  .hero-cta .tlink,.hero-cta .tlink.tlink-dl{align-self:center;margin-left:0;justify-content:center}
}

/* 3. The chairs' letter reads in the right order: the message first, the chairs
   after it as a row of three, rather than three portraits before the first word. */
@media(max-width:900px){
  .letterhead{display:flex;flex-direction:column}
  .letterhead .lh-mark{order:1}
  .letterhead .lh-main{order:2}
  .letterhead .letter-cta{order:4;text-align:center;margin-top:1.6rem}
  .letterhead .lh-chairs{order:3;border-bottom:0;border-top:1px solid var(--line);
    padding:1.6rem 0 0;margin:1.8rem 0 0}
  .lh-chairs .lh-label{text-align:center}
  .lh-chairs .sign{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem .8rem;text-align:center}
  .lh-chairs .sign figure{flex-direction:column;align-items:center;text-align:center;gap:.55rem}
  .lh-chairs .sign img,.lh-chairs .sign .sign-av{width:84px;height:84px;margin:0 auto}
  .lh-chairs .sign b{font-size:.88rem;line-height:1.2}
  .lh-chairs .sign span{font-size:.74rem;line-height:1.3}
}
@media(max-width:430px){
  .lh-chairs .sign img,.lh-chairs .sign .sign-av{width:72px;height:72px}
  .lh-chairs .sign b{font-size:.8rem}
  .lh-chairs .sign span{font-size:.68rem}
}

/* 4. Fact rows (venue address, dates, meeting rooms): label above value, both
   ranged left, instead of a label and a right-aligned value pulling apart. */
@media(max-width:560px){
  .row{flex-direction:column;align-items:flex-start;gap:.15rem;padding:.8rem 0}
  .row span{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .row b{text-align:left}
}

/* 5. One rule for buttons on a phone: every filled button is full width with its
   disc at the right-hand end, and text links sit centred under them. */
@media(max-width:560px){
  .btn-row{flex-direction:column;align-items:stretch;gap:.8rem}
  .btn-row .pill,.v-card .btn-row .pill,.reg-card .pill,.ind-spon .pill,.form .pill,
  .pc-box .pill,.v-stay-when .stay-book,.band-go .pill{width:100%;justify-content:space-between}
  .btn-row .tlink,.reg-card .tlink,.band-go .tlink{align-self:center}
  .v-card .btn-row{display:flex}
}

/* 6. The early-rate countdown keeps its four boxes on one line, and the four
   figures under the hero become a single column of rows rather than a 2x2 block. */
@media(max-width:560px){
  .count{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;flex-wrap:nowrap;margin-top:2rem}
  .count div{min-width:0;padding:.7rem .2rem}
  .count b{font-size:1.45rem}
  .count span{font-size:.56rem;letter-spacing:.06em;margin-top:.35rem}
  .band-num .grid{grid-template-columns:1fr;row-gap:0}
  .band-num .n{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:0 1.1rem;
    text-align:left;padding:.9rem .2rem;border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .band-num .n:last-child{border-bottom:0}
  .band-num .n-ic{grid-row:span 3;margin:0}
  .band-num b{font-size:1.6rem}
  .band-num span{margin-top:.1rem;font-size:.72rem}
  .band-num em{margin-top:.1rem}
}

/* =====================================================================
   PHONE MENU — the six links move behind a menu button and open as a panel.
   Desktop (above 760px) keeps the row of links: the button is hidden and the
   list is the ordinary nav again.
   ===================================================================== */
.nav-burger{display:none}
@media(max-width:760px){
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
    border:1.5px solid rgba(18,41,77,.2);border-radius:12px;background:#fff;cursor:pointer;
    transition:border-color .2s var(--e),background .2s var(--e)}
  .nav-burger:focus-visible{outline:2px solid #8A5A1C;outline-offset:3px}
  .nb-bars{display:grid;gap:5px}
  .nb-bars i{display:block;width:20px;height:2px;border-radius:2px;background:var(--navy);
    transition:transform .28s var(--e),opacity .2s var(--e)}
  .nav.is-open .nav-burger{border-color:#8A5A1C;background:#FBF4E8}
  .nav.is-open .nb-bars i:first-child{transform:translateY(7px) rotate(45deg)}
  .nav.is-open .nb-bars i:nth-child(2){opacity:0}
  .nav.is-open .nb-bars i:last-child{transform:translateY(-7px) rotate(-45deg)}

  /* the header itself: logo left, then Register and the menu button */
  .nav-in{display:flex;flex-wrap:nowrap;align-items:center;gap:.7rem;padding-block:.6rem}
  .nav-cta{margin-left:auto}
  .nav-burger{order:3;flex:none}

  /* the panel */
  .nav ul#menu{position:absolute;left:0;right:0;top:100%;z-index:90;display:block;
    margin:0;padding:1.5rem 1.4rem 1.7rem;border-top:0;
    background:linear-gradient(168deg,#16325C 0%,var(--navy) 46%,var(--navy-d) 100%);
    box-shadow:0 26px 50px rgba(8,24,47,.4);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .28s var(--e),transform .28s var(--e),visibility .28s}
  body.menu-open .nav ul#menu{opacity:1;visibility:visible;transform:none}
  .nav ul#menu li{display:block}
  .nav ul#menu a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    width:auto;padding:1.15rem .2rem;font-size:1.08rem;font-weight:600;letter-spacing:0;
    text-transform:none;text-align:left;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.14)}
  .nav ul#menu a::after{content:"→";position:static;transform:none;width:auto;height:auto;
    background:none;color:rgba(255,255,255,.45);font-size:1rem;transition:transform .25s var(--e)}
  .nav ul#menu a:hover::after,.nav ul#menu a:focus-visible::after{transform:translateX(3px);color:#E2C48F}
  .nav ul#menu a.on{color:#E2C48F;font-weight:800}
  .nav ul#menu a.on::after{content:"";width:8px;height:8px;border-radius:50%;background:#E2C48F}

  /* the two actions at the foot of the panel, with room around them */
  .menu-foot{padding-top:1.6rem}
  .menu-foot .pill.pill-menu{display:flex;width:100%;justify-content:space-between;
    background:#F4E7D1;border:2px solid #9A6424;color:#5A3A10;box-shadow:0 0 0 4px rgba(154,100,36,.18);
    padding:10px 10px 10px 22px;font-size:13px}
  .menu-foot .pill.pill-menu .pill-i{width:32px;height:32px;background:#9A6424}
  .menu-book{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.9rem;
    padding:.85rem 1rem;border:1.5px solid rgba(255,255,255,.55);border-radius:12px;color:#fff;
    text-decoration:none;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
  .menu-book .bed-ic{width:19px;height:19px;color:#E2C48F}
  .menu-early{margin:1rem 0 0;text-align:center;font-size:.86rem;color:rgba(255,255,255,.7)}
  .menu-early::before{content:"Early rate ";color:#E2C48F;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;font-size:.7rem}
  /* the panel hangs from the header, so the header needs to sit above the page */
  .nav{position:sticky;z-index:95}
  .nav-in{position:relative}
}
@media(min-width:761px){
  .menu-foot{display:none}
}
@media(max-width:620px){
  /* on a narrow phone the header carries the logo and the menu button only: Register
     is the first thing inside the panel, and the sticky bar keeps it in reach */
  .nav .nav-cta{display:none}
  .nav-burger{margin-left:auto}
}
@media(min-width:621px) and (max-width:760px){
  .nav-reg{padding:.55rem .8rem;font-size:11px;gap:.5rem}
}
@media(max-width:760px){
  /* the two actions are buttons, not list links: no inherited arrow, and Register
     keeps its dark ink label on the pale fill */
  .menu-foot a::after{content:none!important}
  .menu-foot .pill.pill-menu,.menu-foot .pill.pill-menu > span:first-child{color:#5A3A10}
  .menu-foot a{border-bottom:0;padding:0}
  .menu-book{padding:.9rem 1rem}
}
@media(max-width:760px){
  /* the panel's link rules are stronger than the button's, so restate the button here */
  .nav ul#menu .menu-foot .menu-book{display:flex;justify-content:center;align-items:center;gap:.6rem;
    text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:800;
    padding:.9rem 1rem;border:1.5px solid rgba(255,255,255,.55);border-radius:12px;color:#fff}
  .nav ul#menu .menu-foot .menu-book:hover,.nav ul#menu .menu-foot .menu-book:focus-visible{
    border-color:#E2C48F;color:#fff}
}
@media(max-width:360px){
  /* the smallest phones: the brand and the kicker rule step down again */
  .brand img,.nav.stuck .brand img{width:38px}
  .brand .bn b,.nav.stuck .brand .bn b{font-size:.84rem}
  .brand .bn .sec,.nav.stuck .brand .bn .sec{font-size:.48rem;letter-spacing:.06em}
  .brand{gap:.45rem;margin-left:0!important}
  .kicker i{display:none}
  .kicker{gap:.5rem}
}
@media(max-width:560px){
  /* the two fee periods stack, so neither card is left short beside the other */
  .fee-periods,.fee-periods.two{grid-template-columns:1fr}
  .fee-period{padding:1rem 1.15rem}
}
/* =====================================================================
   PHONE: a shorter homepage — the figures and the topic cards become
   swipeable rows instead of tall stacks, and the panel's Register now is a
   proper filled button. Phone widths only; desktop is untouched.
   ===================================================================== */
@media(max-width:760px){
  /* 1. Register now in the menu panel: filled in the site colour with a white
     disc, so it reads as the main action rather than a pale slab */
  .menu-foot .pill.pill-menu{height:52px;padding:0 8px 0 22px;font-size:13.5px;font-weight:800;
    letter-spacing:.06em;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px rgba(0,0,0,.28);
    background:linear-gradient(180deg,color-mix(in srgb,var(--cta-border) 84%,#fff) 0%,var(--cta-border) 58%,
      color-mix(in srgb,var(--cta-border) 88%,#000) 100%)}
  .menu-foot .pill.pill-menu,.menu-foot .pill.pill-menu > span:first-child{color:#fff}
  .menu-foot .pill.pill-menu .pill-i{width:34px;height:34px;background:#fff}
  .menu-foot .pill.pill-menu .pill-i svg{fill:var(--cta-border)}

  /* 2. the figures: one card at a time, swipeable, with the next one peeking */
  .band-num .grid{display:flex;grid-template-columns:none;gap:.9rem;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:.2rem}
  .band-num .grid::-webkit-scrollbar{display:none}
  .band-num .n{flex:0 0 76%;scroll-snap-align:center;display:flex;flex-direction:column;
    align-items:flex-start;text-align:left;gap:.15rem;padding:1.15rem 1.25rem;border-right:0;
    border-bottom:0;border:1px solid rgba(255,255,255,.18);border-radius:12px;
    background:rgba(255,255,255,.05)}
  .band-num .n-ic{grid-row:auto;margin:0 0 .6rem}
  .band-num b{font-size:1.9rem}
  .band-num span{margin-top:.2rem}
  .band-dots{display:flex;justify-content:center;gap:.4rem;margin-top:1rem}
  .band-dots i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);
    transition:background .25s var(--e),transform .25s var(--e)}
  .band-dots i.on{background:var(--ac-l);transform:scale(1.25)}

  /* 3. the topic cards: the same swipeable row, so the section is one card tall */
  .topics{display:flex;grid-template-columns:none;gap:1rem;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding:.2rem var(--pad) .4rem}
  .topics::-webkit-scrollbar{display:none}
  .topic{flex:0 0 82%;scroll-snap-align:center}
  .swipe-hint{display:flex;align-items:center;justify-content:center;gap:.45rem;margin:.9rem 0 0;
    font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .swipe-hint i{display:block;width:26px;height:1px;background:currentColor;opacity:.4}
}
@media(min-width:761px){.band-dots,.swipe-hint{display:none}}
@media(max-width:760px){
  /* Programme page, phones only: the day-by-day figures become a swipeable row like the
     homepage band, and the two day buttons sit side by side instead of stacking */
  .summary{display:flex;grid-template-columns:none;gap:.9rem;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding:.2rem var(--pad) .4rem;margin-bottom:2rem}
  .summary::-webkit-scrollbar{display:none}
  .summary .sm{flex:0 0 76%;scroll-snap-align:center;min-width:0}
  .pchips{flex-wrap:nowrap;gap:.5rem}
  .pchips .pchip{flex:1 1 0;min-width:0;text-align:center;padding:.7rem .5rem;
    font-size:.72rem;letter-spacing:.04em}
}
@media(max-width:430px){
  .pchips .pchip{font-size:.66rem;letter-spacing:.02em;padding:.65rem .35rem}
}
@media(max-width:560px){
  /* the day buttons keep to one line: the date is already in the day heading below */
  .pchips .pchip{white-space:nowrap}
  .pchip-date{display:none}
}
@media(max-width:560px){
  /* the day buttons take the full width of the row, sharing it equally */
  .pctl-row .pchips{flex:1 1 100%;width:100%}
  .pchips .pchip{flex:1 1 50%}
}
@media(max-width:760px){
  /* Register now in the menu panel matches the homepage button: white face, the site
     colour for the outline, the lettering and the disc */
  .menu-foot .pill.pill-menu{background:#fff;border:2px solid var(--cta-border);
    box-shadow:0 0 0 4px rgba(var(--cta-rgb),.22)}
  .menu-foot .pill.pill-menu,.menu-foot .pill.pill-menu > span:first-child{color:var(--cta-ink)}
  .menu-foot .pill.pill-menu .pill-i{background:var(--cta-border)}
  .menu-foot .pill.pill-menu .pill-i svg{fill:#fff}
  .menu-foot .pill.pill-menu:hover,.menu-foot .pill.pill-menu:focus-visible{
    background:var(--cta-fill);box-shadow:0 0 0 7px rgba(var(--cta-rgb),.26)}
}
@media(max-width:760px){
  /* the panel's Register now is set in capitals, like the homepage button (the panel's
     link rules set the menu items in sentence case, so restate it here) */
  .nav ul#menu .menu-foot .pill.pill-menu,
  .nav ul#menu .menu-foot .pill.pill-menu > span:first-child{
    text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:13px}
}
@media(max-width:760px){
  /* a little more room between the outline and the R */
  .nav ul#menu .menu-foot .pill.pill-menu{padding:0 8px 0 46px}
}