/* ==========================================================================
   MESCO 70th Anniversary — site stylesheet
   Tokens from mesco-design-system.html; hero motif from the A5 show invitation.
   ========================================================================== */

:root{
  /* color */
  --navy:#0B2A4A;
  --navy-deep:#071B32;
  --navy-mid:#12395E;
  --orange:#F0871F;
  --orange-deep:#C96A0C;
  --red:#E2231A;
  --paper:#F7F5F0;
  --silver:#ECEAE6;
  --steel:#5B6470;
  --ink:#15191E;
  --line:#DEDAD0;
  --line-dark:rgba(255,255,255,.14);
  --white:#FFFFFF;
  --mist:#9FB2C8;
  --mist-bright:#B9C7D6;

  /* type */
  --font-display:'Jost', sans-serif;
  --font-heading:'Jost', sans-serif;
  --font-cond:'Jost', sans-serif;
  --font-body:'Arimo', Arial, sans-serif;

  /* spacing */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:88px;

  /* radius */
  --radius-sm:3px; --radius-md:4px; --radius-pill:20px;

  --nav-h:76px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:var(--font-heading); font-weight:700; line-height:1.15;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:1160px; margin:0 auto; padding:0 var(--sp-4);}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--orange); color:var(--navy-deep);
  padding:12px 20px; font-weight:700; z-index:100;
}
.skip:focus{left:0;}
:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

/* ---------------------------------------------------------------- nav ---- */
.nav{
  background:var(--navy-deep);
  border-bottom:1px solid var(--line-dark);
  position:sticky; top:0; z-index:40;
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:var(--sp-3);}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand-plate{
  background:var(--white); border-radius:var(--radius-sm);
  padding:7px 11px; display:flex; align-items:center;
}
.brand-plate img{height:26px; width:auto;}
.brand-tag{
  font-family:var(--font-cond); font-weight:700; font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--orange); line-height:1.15;
}
.brand-tag span{display:block; color:var(--mist); font-weight:600; letter-spacing:.05em;}

.navlinks{display:flex; align-items:center; gap:28px;}
.navlinks a{
  color:#CBD6E2; font-size:14.5px; font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.navlinks a:hover{color:#fff;}
.navlinks a.current{color:#fff; border-bottom-color:var(--orange);}
.nav-cta{
  background:var(--orange); color:var(--navy-deep); font-weight:700; font-size:14px;
  padding:11px 20px; border-radius:var(--radius-sm); white-space:nowrap;
  transition:background .15s;
}
.nav-cta:hover{background:#FF9A2E;}
.nav-toggle{
  display:none; background:none; border:1px solid var(--line-dark); border-radius:var(--radius-sm);
  color:#fff; padding:9px 12px; font-size:13px; font-weight:600; letter-spacing:.04em;
}
.nav-drawer{display:none; background:var(--navy-deep); border-bottom:1px solid var(--line-dark);}
.nav-drawer.open{display:block;}
.nav-drawer a{
  display:block; padding:15px var(--sp-4); color:#CBD6E2; font-size:15.5px; font-weight:500;
  border-top:1px solid rgba(255,255,255,.07);
}
.nav-drawer a.current{color:#fff; box-shadow:inset 3px 0 0 var(--orange);}

/* -------------------------------------------------------------- buttons -- */
.btn-primary,.btn-dark,.btn-outline,.btn-light{
  display:inline-block; font-weight:700; font-size:15px; padding:15px 30px;
  border-radius:var(--radius-sm); border:none; text-align:center; transition:background .15s, color .15s;
}
.btn-primary{background:var(--orange); color:var(--navy-deep);}
.btn-primary:hover{background:#FF9A2E;}
.btn-dark{background:var(--navy-deep); color:#fff;}
.btn-dark:hover{background:var(--navy-mid);}
.btn-light{background:var(--white); color:var(--navy-deep); border:1px solid var(--line);}
.btn-light:hover{background:var(--silver);}
.btn-outline{background:transparent; color:var(--navy); border:1px solid var(--navy); padding:14px 28px;}
.btn-outline:hover{background:var(--navy); color:#fff;}
.btn-ghost{
  font-weight:600; font-size:15px; padding:15px 4px;
  border-bottom:1px solid rgba(255,255,255,.45); color:#fff;
}
.btn-ghost:hover{border-bottom-color:var(--orange); color:var(--orange);}
.link-arrow{
  display:inline-block; font-weight:600; color:var(--navy);
  border-bottom:2px solid var(--orange); padding-bottom:3px; margin-top:var(--sp-3);
}
.link-arrow:hover{color:var(--orange-deep);}

/* ----------------------------------------------------------------- hero -- */
.hero{
  position:relative; overflow:hidden;
  background:#F6F4F2;                 /* sampled from the printed invitation stock */
  padding:var(--sp-7) 0 var(--sp-6);
  border-bottom:1px solid var(--line);
}
.hero-ribbon{
  position:absolute; top:0; right:0; width:min(330px, 32%); height:auto;
  pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 42%);
          mask-image:linear-gradient(to right, transparent 0%, #000 42%);
}
.hero-inner{position:relative; z-index:2; max-width:680px;}
.hero-lockup{width:min(100%, 480px); margin-bottom:var(--sp-3);}
.kicker{
  font-family:var(--font-cond); font-size:15px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); margin-bottom:var(--sp-2);
}
.hero h1{
  font-family:var(--font-cond); font-weight:700; font-size:clamp(34px, 5.4vw, 56px);
  color:var(--navy); text-transform:uppercase; letter-spacing:.005em; line-height:1.02;
}
.hero-sub{font-size:17.5px; color:var(--steel); margin-top:var(--sp-2); max-width:520px;}
.hero-meta{display:flex; gap:var(--sp-5); margin-top:var(--sp-4); flex-wrap:wrap;}
.hero-meta .label{
  font-size:11.5px; color:var(--steel); text-transform:uppercase; letter-spacing:.07em; font-weight:600;
}
.hero-meta .value{font-size:16px; color:var(--navy); font-weight:600; margin-top:2px;}
.hero-actions{margin-top:var(--sp-5); display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap;}
.hero .btn-ghost{color:var(--navy); border-bottom-color:rgba(11,42,74,.45);}
.hero .btn-ghost:hover{color:var(--orange-deep); border-bottom-color:var(--orange);}

/* countdown */
.countdown{display:flex; gap:10px; margin-top:var(--sp-4);}
.countdown .unit{
  min-width:70px; text-align:center; background:var(--white);
  border:1px solid var(--line); padding:10px 6px; border-radius:var(--radius-sm);
}
.countdown .n{font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--navy); line-height:1.1;}
.countdown .u{
  font-size:10px; color:var(--steel); text-transform:uppercase; letter-spacing:.08em;
  margin-top:3px; font-weight:600;
}
.countdown.done{font-size:15px; color:var(--navy); font-weight:600;}

/* ----------------------------------------------------- page header (sub) -- */
.pageheader{background:var(--navy); padding:var(--sp-6) 0 var(--sp-5); position:relative; overflow:hidden;}
.pageheader::after{
  content:""; position:absolute; top:-70px; right:-90px; width:320px; height:320px;
  background:var(--red); clip-path:polygon(60% 0%, 100% 0%, 100% 100%, 20% 100%); opacity:.9;
}
.pageheader .wrap{position:relative; z-index:2;}
.pageheader .kicker{color:var(--orange); letter-spacing:.1em; font-size:13.5px;}
.pageheader h1{color:#fff; font-size:clamp(30px, 4.4vw, 42px); max-width:680px;}
.pageheader p{color:var(--mist-bright); font-size:16px; margin-top:12px; max-width:560px;}

/* ------------------------------------------------------------- sections -- */
section{padding:var(--sp-7) 0;}
section.tight{padding-top:0;}
section.ruled{border-bottom:1px solid var(--line);}
.eyebrow{
  color:var(--red); font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:12px;
}
.section-title{font-size:clamp(24px, 3.2vw, 30px); color:var(--navy); max-width:640px;}
.section-lead{font-size:16px; color:var(--steel); margin-top:14px; max-width:580px;}

/* dark variant */
.dark{background:var(--navy); color:#fff;}
.dark .eyebrow{color:var(--orange);}
.dark .section-title{color:#fff;}
.dark .section-lead{color:var(--mist-bright);}

/* info strip */
.infostrip{background:var(--orange);}
.infostrip .wrap{display:grid; grid-template-columns:repeat(4,1fr); padding:var(--sp-3) var(--sp-4);}
.infostrip .item{border-left:1px solid rgba(11,42,74,.25); padding-left:20px;}
.infostrip .item:first-child{border-left:none; padding-left:0;}
.infostrip .num{font-family:var(--font-display); font-weight:700; font-size:28px; color:var(--navy-deep); line-height:1.1;}
.infostrip .lbl{
  font-size:12.5px; color:var(--navy-deep); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; margin-top:3px;
}

/* grids of cards separated by hairlines */
.hairline-grid{display:grid; gap:1px; background:var(--line); margin-top:var(--sp-4); border:1px solid var(--line);}
.g-4{grid-template-columns:repeat(4,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-2{grid-template-columns:repeat(2,1fr);}

.navcard{background:var(--paper); padding:var(--sp-4) var(--sp-3); text-align:center; transition:background .15s;}
.navcard:hover{background:var(--white);}
.navcard .ic{
  width:46px; height:46px; border-radius:50%; background:var(--navy); color:var(--orange);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-2);
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.02em;
}
.navcard .label{font-family:var(--font-heading); font-weight:700; font-size:17px; color:var(--navy);}
.navcard .desc{font-size:13.5px; color:var(--steel); margin-top:6px;}

.focus-card{background:var(--paper); padding:var(--sp-4) var(--sp-3);}
.focus-card .tag{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;}
.focus-card.m .tag{color:var(--red);}
.focus-card.g .tag{color:var(--orange-deep);}
.focus-card.a .tag{color:var(--navy);}
.focus-card h3{font-size:20px; margin-top:8px; color:var(--ink);}
.focus-card p{font-size:14.5px; color:var(--steel); margin-top:8px;}

/* two-column story */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:start;}
.split.wide-left{grid-template-columns:1.25fr 1fr; align-items:start;}
.split p{color:var(--steel); font-size:16px; margin-top:14px;}
.figure{border:1px solid var(--line); background:var(--white); padding:var(--sp-2); max-width:430px; margin:0 auto;}
.figure img{width:100%;}
.figure figcaption{font-size:12.5px; color:var(--steel); margin-top:10px; text-align:center;}
.placeholder{
  background:repeating-linear-gradient(45deg,#E9E5DC,#E9E5DC 10px,#E1DCD0 10px,#E1DCD0 20px);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--steel); font-size:13px; text-align:center; padding:var(--sp-3); min-height:220px;
}

/* schedule preview rows on dark */
.sched-list{margin-top:var(--sp-4); border-top:1px solid var(--line-dark);}
.sched-row{
  display:grid; grid-template-columns:150px 1fr 110px; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:14.5px;
}
.sched-row .day{color:var(--orange); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em;}
.sched-row .t{color:#fff; font-weight:500;}
.sched-row .sp{color:var(--mist);}
.sched-row .go{color:var(--orange); font-weight:600; text-align:right;}
.view-all{
  display:inline-block; margin-top:var(--sp-3); color:#fff; font-weight:600;
  border-bottom:1px solid var(--orange); padding-bottom:3px;
}
.view-all:hover{color:var(--orange);}

/* CTA band */
.band{background:var(--orange); padding:var(--sp-6) 0;}
.band-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;}
.band h3{font-size:25px; color:var(--navy-deep);}
.band p{font-size:14.5px; color:var(--navy-deep); margin-top:6px; max-width:640px;}

/* ------------------------------------------------------------- timeline -- */
.timeline{margin-top:var(--sp-5); position:relative; padding-left:var(--sp-3); border-left:2px solid var(--line);}
.timeline::after{
  content:""; position:absolute; left:-2px; top:0; width:2px; background:var(--orange);
  height:var(--tl-fill, 0%); pointer-events:none;
}
.tl-item{position:relative; padding-bottom:var(--sp-5);}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:""; position:absolute; left:-31px; top:6px; width:12px; height:12px; border-radius:50%;
  background:var(--orange); border:2px solid var(--paper);
}
.tl-item.mark::before{background:var(--red);}
.tl-item .yr{font-family:var(--font-display); font-weight:700; font-size:23px; color:var(--navy); line-height:1.2;}
.tl-item .desc{font-size:15px; color:var(--steel); margin-top:5px; max-width:560px;}
.tl-item .desc.has-photo{
  max-width:680px; display:flex; gap:var(--sp-3); align-items:flex-start; flex-wrap:wrap;
}
.tl-item .desc-text{flex:1 1 300px; min-width:0;}
.tl-item .tl-photo{
  display:block; width:200px; max-width:100%; height:auto; flex-shrink:0; margin-top:0;
  box-sizing:border-box; padding:5px; background:var(--white);
  border-radius:var(--radius-sm); border:1px solid var(--line);
}
/* Reveal-on-scroll and parallax are added only once JS confirms it can run
   them smoothly — see site.js. Without JS, everything is simply visible. */
.timeline.has-reveal .tl-item{
  opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;
}
.timeline.has-reveal .tl-item.in-view{opacity:1; transform:none;}
.tl-item .tl-photo{will-change:transform;}

/* pillars (logo symbolism) */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:var(--sp-4); border:1px solid var(--line);}
.pillar{background:var(--white); padding:var(--sp-4) var(--sp-3);}
.pillar .mark{display:flex; align-items:flex-end; height:42px; margin-bottom:var(--sp-2);}
.pillar .mark-img{height:100%; width:auto; max-width:100%; object-fit:contain; object-position:left bottom;}
.pillar h3{font-size:19px; color:var(--navy);}
.pillar p{font-size:14.5px; color:var(--steel); margin-top:8px;}

/* stats */
.stat{background:var(--navy); color:#fff; padding:var(--sp-4) var(--sp-3); text-align:center;}
.stat .n{font-family:var(--font-display); font-weight:700; font-size:40px; color:var(--orange); line-height:1.05;}
.stat .l{font-size:12.5px; color:var(--mist-bright); text-transform:uppercase; letter-spacing:.05em; margin-top:8px;}

/* quote */
.leader{display:grid; grid-template-columns:200px 1fr; gap:var(--sp-5); align-items:start; margin-top:var(--sp-4);}
.leader-photo{
  width:200px; height:200px; border-radius:50%; overflow:hidden;
  background:repeating-linear-gradient(45deg,#E9E5DC,#E9E5DC 10px,#E1DCD0 10px,#E1DCD0 20px);
  display:flex; align-items:center; justify-content:center; color:var(--steel); font-size:12px; text-align:center; padding:12px;
}
.quote{
  font-family:var(--font-heading); font-weight:600; font-size:22px; color:var(--navy);
  line-height:1.4; border-left:3px solid var(--orange); padding-left:var(--sp-3);
}
.quote-attr{margin-top:var(--sp-2); padding-left:27px; font-size:14.5px; color:var(--steel);}
.quote-attr b{color:var(--ink); font-weight:600;}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:8px; margin-top:var(--sp-4);}
.gallery .g-item{
  background:repeating-linear-gradient(45deg,#E9E5DC,#E9E5DC 10px,#E1DCD0 10px,#E1DCD0 20px);
  display:flex; align-items:center; justify-content:center; color:var(--steel); font-size:11.5px;
  border:1px solid var(--line); text-align:center; padding:10px; overflow:hidden;
}
.gallery .g-item img{width:100%; height:100%; object-fit:cover;}
.gallery .big{grid-column:span 2; grid-row:span 2;}

/* ------------------------------------------------------------- schedule -- */
.filterbar{
  background:var(--white); border-bottom:1px solid var(--line);
  position:sticky; top:var(--nav-h); z-index:30;
}
.filterbar .wrap{display:flex; gap:var(--sp-4); align-items:center; padding:14px var(--sp-4); flex-wrap:wrap;}
.filter-group{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.filter-group .label{
  font-size:11.5px; color:var(--steel); text-transform:uppercase; letter-spacing:.06em;
  margin-right:4px; font-weight:600;
}
.chip{
  font-size:13px; font-weight:500; padding:7px 14px; border:1px solid var(--line);
  border-radius:var(--radius-pill); color:var(--steel); background:var(--white);
  transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{border-color:var(--navy); color:var(--navy);}
.chip.on{background:var(--navy); color:#fff; border-color:var(--navy);}

.day-block{padding:var(--sp-6) 0; border-bottom:1px solid var(--line); scroll-margin-top:150px;}
.day-block[hidden]{display:none;}
.day-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4);
}
.day-head h2{font-size:27px; color:var(--navy);}
.day-head .cap{font-size:13px; color:var(--steel); font-weight:600;}

/* The programme reads down the day: a time rail on the left, and whatever runs
   at that hour on the right, so overlapping sessions sit side by side. */
.programme{border-top:1px solid var(--line);}
.prog-row{
  display:grid; grid-template-columns:132px 1fr; gap:var(--sp-3);
  padding:var(--sp-3) 0; border-bottom:1px solid var(--line);
}
.prog-row[hidden]{display:none;}
.prog-time{
  font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--navy);
  line-height:1.2; padding-top:3px;
}
.prog-sessions{
  /* auto-fill, not auto-fit: a lone session keeps a card's width instead of
     stretching across the row. */
  /* Never more than two sessions run at once, so the rail holds two columns:
     a pair fills the row, a lone session keeps a card's width. */
  /* min() keeps the track from forcing 360px on a narrow phone, which would
     otherwise push the page wider than the viewport. */
  display:grid; gap:var(--sp-2);
  grid-template-columns:repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}

.cell{
  background:var(--white); border:1px solid var(--line);
  padding:var(--sp-3) var(--sp-2); display:flex; flex-direction:column;
}
.cell[hidden]{display:none;}
.cell .co{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--red); margin-bottom:4px;
}
.cell .st{font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.28;}
.cell .sp{font-size:13.5px; color:var(--steel); margin-top:6px; display:flex; flex-direction:column; gap:6px;}
.cell .sp-person{display:flex; align-items:center; gap:8px;}
.sp-photo{
  width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:var(--silver); border:1px solid var(--line);
}
.cell .where{font-size:12.5px; color:var(--steel); margin-top:6px;}
.cell .reg{margin-top:auto; padding-top:14px; font-size:13px; font-weight:700; color:var(--navy);}
.cell .reg span{border-bottom:2px solid var(--orange); padding-bottom:2px;}
.cell .reg:hover span{color:var(--orange-deep);}


.callout{
  border-left:3px solid var(--orange); background:var(--white); border:1px solid var(--line);
  border-left:3px solid var(--orange); padding:var(--sp-3); margin-top:var(--sp-4);
}
.callout h3{font-size:18px; color:var(--navy); margin-bottom:6px;}
.callout p{font-size:14.5px; color:var(--steel);}
.callout p + p{margin-top:10px;}

/* --------------------------------------------------------------- venue --- */
.info-row{display:flex; gap:var(--sp-2); padding:14px 0; border-bottom:1px solid var(--line);}
.info-row:last-child{border-bottom:none;}
.info-row .k{
  width:120px; flex-shrink:0; font-size:11.5px; color:var(--steel); text-transform:uppercase;
  letter-spacing:.05em; font-weight:700; padding-top:2px;
}
.info-row .v{font-size:15px; color:var(--ink);}
.info-row .v a{color:var(--navy); border-bottom:1px solid var(--orange);}

.map-embed{width:100%; height:340px; border:1px solid var(--line); background:var(--silver); object-fit:cover; display:block;}

.route{background:var(--white); border:1px solid var(--line); padding:var(--sp-3); display:flex; gap:var(--sp-3);}
.route .no{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center;
}
.route h3{font-size:18px; color:var(--navy);}
.route .stop{font-size:14.5px; color:var(--ink); margin-top:4px;}
.route .pic{font-size:13.5px; color:var(--steel); margin-top:8px;}
.route .pic a{color:var(--navy); border-bottom:1px solid var(--orange); font-weight:600;}
.route-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2); margin-top:var(--sp-4);}
.subhead{font-size:19px; color:var(--navy); margin-top:var(--sp-5);}

.tip-card{background:var(--paper); padding:var(--sp-4) var(--sp-3);}
.tip-card .tag{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--red);}
.tip-card h3{font-size:18px; margin-top:8px; color:var(--ink);}
.tip-card p{font-size:14px; color:var(--steel); margin-top:8px;}

/* --------------------------------------------------------- celebration --- */
.gala-hero{
  background:var(--navy-deep);
  background-image:linear-gradient(150deg,#0D2340 0%, #071B32 55%, #050F1E 100%);
  padding:var(--sp-7) 0; color:#fff; position:relative; overflow:hidden;
}
.gala-hero .wrap{position:relative; z-index:2;}
.gala-split{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-6); align-items:center;}
.gala-hero .kicker{color:var(--orange);}
.gala-hero h1{font-family:var(--font-cond); text-transform:uppercase; font-size:clamp(36px,5.6vw,60px); color:#fff; line-height:1.02;}
.gala-hero p.lead{color:var(--mist-bright); font-size:17px; margin-top:var(--sp-2); max-width:480px;}
.gala-facts{margin-top:var(--sp-4); border-top:1px solid var(--line-dark);}
.gala-facts .row{display:flex; gap:var(--sp-3); padding:14px 0; border-bottom:1px solid var(--line-dark);}
.gala-facts .k{
  width:110px; flex-shrink:0; font-size:11.5px; color:var(--mist); text-transform:uppercase;
  letter-spacing:.06em; font-weight:700; padding-top:3px;
}
.gala-facts .v{font-size:16px; color:#fff; font-weight:500;}
.invite-frame{border:1px solid rgba(255,255,255,.18); padding:10px; background:rgba(255,255,255,.04);}

/* -------------------------------------------------------------- contact -- */
.contact-card{background:var(--white); padding:var(--sp-4) var(--sp-3);}
.contact-card .ic{
  width:46px; height:46px; border-radius:50%; background:var(--navy); color:var(--orange);
  display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:var(--sp-2);
}
.contact-card .label{
  font-size:11.5px; color:var(--steel); text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.contact-card .value{font-size:18px; color:var(--navy); font-weight:600; margin-top:6px; word-break:break-word;}
.contact-card .value a{border-bottom:1px solid var(--orange);}
.contact-card .hint{font-size:13.5px; color:var(--steel); margin-top:8px;}

/* --------------------------------------------------------------- notes --- */
.todo{
  border:1px dashed var(--orange); background:#FEF6EC; padding:12px 14px;
  font-size:13px; color:#8A5410; margin-top:var(--sp-3); border-radius:var(--radius-sm);
}
.todo b{color:#6E4109;}

/* -------------------------------------------------------------- footer --- */
footer{background:var(--navy-deep); color:var(--mist); padding:var(--sp-5) 0 var(--sp-3); margin-top:0;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-4);}
.foot-grid h4{
  color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px;
}
.foot-grid a,.foot-grid p{font-size:14px; color:var(--mist); display:block; margin-bottom:8px;}
.foot-grid a:hover{color:#fff;}
.foot-plate{background:#fff; border-radius:var(--radius-sm); padding:8px 12px; display:inline-block; margin-bottom:14px;}
.foot-plate img{height:28px;}
.foot-bottom{
  margin-top:var(--sp-5); padding-top:var(--sp-3); border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; font-size:12.5px; color:#6E85A0; flex-wrap:wrap; gap:12px;
}

/* --------------------------------------------------------- responsive ---- */
@media (max-width:980px){
  .g-4{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .gala-split{grid-template-columns:1fr;}
}
@media (max-width:860px){
  :root{--sp-7:56px; --sp-6:44px;}
  .navlinks,.nav-cta{display:none;}
  .nav-toggle{display:block;}
  .split,.split.wide-left,.leader{grid-template-columns:1fr; gap:var(--sp-4);}
  .leader-photo{margin:0 auto;}
  .g-3,.g-2,.pillars,.route-grid{grid-template-columns:1fr;}
  .infostrip .wrap{grid-template-columns:1fr 1fr; gap:var(--sp-3);}
  .infostrip .item:nth-child(3){border-left:none; padding-left:0;}
  .sched-row{grid-template-columns:1fr; gap:4px; padding:14px 0;}
  .sched-row .go{text-align:left;}
  .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:130px;}
  .tl-item .desc.has-photo{gap:var(--sp-2);}
  .tl-item .tl-photo{width:150px;}
  .hero-ribbon{width:230px; opacity:.55;}
  .band-inner{align-items:flex-start;}
  /* Three chip groups stack to ~235px on a phone; pinning that much of the
     viewport costs more than the convenience is worth. */
  .filterbar{position:static;}
  .filterbar .wrap{gap:var(--sp-2); padding-top:var(--sp-2); padding-bottom:var(--sp-2);}
  .prog-row{grid-template-columns:1fr; gap:var(--sp-2);}
  .prog-time{font-size:17px; color:var(--red);}
  .day-head h2{font-size:23px;}
  }
@media (max-width:520px){
  .wrap{padding:0 20px;}
  .navcard{padding:var(--sp-3) 12px;}
  .navcard .ic{width:38px; height:38px; font-size:13px; margin-bottom:10px;}
  .navcard .label{font-size:15px;}
  .navcard .desc{font-size:12.5px;}
  .countdown .unit{min-width:0; flex:1;}
  .gallery{grid-template-columns:1fr;}
  .gallery .big{grid-column:span 1;}
  .foot-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

@media print{
  .nav,.filterbar,.band,.nav-drawer,.hero-ribbon{display:none;}
  body{background:#fff;}
  .prog-row{page-break-inside:avoid;}
}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* five-up nav card grid */
.g-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:980px){ .g-5{grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){ .g-5{grid-template-columns:repeat(2,1fr);} }

/* ---------------------------------------------- session detail disclosure -- */
.cell details.more{margin-top:10px;}
.cell details.more summary{
  font-size:12.5px; font-weight:700; color:var(--navy); cursor:pointer;
  list-style:none; display:inline-flex; align-items:center; gap:6px;
  padding:2px 0; letter-spacing:.01em;
}
.cell details.more summary::-webkit-details-marker{display:none;}
.cell details.more summary::after{content:"\25BE"; font-size:9px; color:var(--orange-deep);}
.cell details.more[open] summary::after{content:"\25B4";}
.cell details.more summary:hover{color:var(--orange-deep);}
.cell details.more p{font-size:13.5px; color:var(--steel); margin-top:9px; line-height:1.52;}
.cell details.more p.who{font-size:12.5px; color:var(--ink); margin-top:8px;}
.cell details.more p.who b{color:var(--navy); font-weight:700;}
#toggle-details[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy);}

@media print{
  .cell details.more[open] summary::after,
  .cell details.more summary::after{content:"";}
}

/* live seat counts injected into the schedule grid */
.cell .seats{font-size:12px; font-weight:700; color:var(--steel); margin-top:6px;}
.cell .seats.low{color:var(--orange-deep);}
.cell .seats.full{color:var(--red);}

/* ------------------------------------------------------- legacy gallery -- */
.gal-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:var(--sp-3); margin-top:var(--sp-4);
  grid-auto-rows:auto; align-items:stretch;
}
.gal-item{margin:0; border:1px solid var(--line); background:var(--white);}
.gal-item.wide{grid-column:span 2;}
.gal-item.tall{grid-row:span 2;}
.gal-item{display:flex; flex-direction:column;}
.gal-item.tall .gal-btn{flex:1; display:flex;}
.gal-item.tall .gal-btn img{aspect-ratio:auto; height:100%;}
.gal-btn{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  line-height:0; position:relative; overflow:hidden;
}
.gal-btn img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block;
  transform:scale(1.14); will-change:transform;
}
.gal-item.tall .gal-btn img{aspect-ratio:3/4;}
.gal-item.wide .gal-btn img{aspect-ratio:16/9;}
/* Reveal-on-scroll, added only once JS confirms it can run smoothly. */
.gal-grid.has-reveal .gal-item{
  opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;
}
.gal-grid.has-reveal .gal-item.in-view{opacity:1; transform:none;}
.gal-btn::after{
  content:""; position:absolute; inset:0; background:var(--navy); opacity:0;
  transition:opacity .15s;
}
.gal-btn:hover::after{opacity:.08;}
.gal-cap{padding:var(--sp-2) var(--sp-2) var(--sp-3);}
.gal-era{
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--red); line-height:1.2;
  letter-spacing:.02em;
}
.gal-text{font-size:14px; color:var(--steel); margin-top:6px; line-height:1.5;}

/* An entry whose file has not been added yet. */
.gal-item.is-missing .gal-btn{cursor:default;}
.gal-item.is-missing .gal-btn img{display:none;}
.gal-item.is-missing .gal-btn::before{
  content:"Photograph to be added"; display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; background:repeating-linear-gradient(45deg,#E9E5DC,#E9E5DC 10px,#E1DCD0 10px,#E1DCD0 20px);
  font-family:var(--font-body); font-size:12.5px; color:var(--steel); line-height:1.4; text-align:center;
}
.gal-item.is-missing.wide .gal-btn::before{aspect-ratio:16/9;}
.gal-item.is-missing.tall .gal-btn::before{aspect-ratio:3/4;}

/* lightbox */
.lightbox{
  border:none; padding:0; background:transparent; max-width:min(1100px, 94vw); max-height:94vh;
}
.lightbox::backdrop{background:rgba(7,27,50,.92);}
.lightbox-inner{background:var(--navy-deep); color:#fff; display:flex; flex-direction:column;}
.lightbox img{width:100%; max-height:74vh; object-fit:contain; background:#050F1E; display:block;}
.lightbox-cap{padding:var(--sp-3); display:flex; gap:var(--sp-3); align-items:flex-start;}
.lightbox-cap .gal-era{color:var(--orange); flex-shrink:0;}
.lightbox-cap .gal-text{color:var(--mist-bright); margin-top:0; font-size:14.5px;}
.lightbox-close{
  position:absolute; top:8px; right:8px; background:rgba(0,0,0,.55); color:#fff; border:0;
  width:40px; height:40px; font-size:22px; line-height:1; cursor:pointer; border-radius:var(--radius-sm);
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.55); color:#fff;
  border:0; width:44px; height:56px; font-size:22px; cursor:pointer;
}
.lightbox-nav.prev{left:8px;} .lightbox-nav.next{right:8px;}
.lightbox-nav:hover,.lightbox-close:hover{background:var(--orange); color:var(--navy-deep);}
.lightbox-wrap{position:relative;}

@media (max-width:760px){
  .gal-grid{grid-template-columns:1fr;}
  .gal-item.wide{grid-column:span 1;}
  .lightbox-cap{flex-direction:column; gap:6px;}
}

/* ------------------------------------------------- 1986 / 2026 pairing --- */
.pair-figure{border:1px solid var(--line); background:var(--white); padding:var(--sp-2); max-width:none;}
.pair-figure img{width:100%; display:block;}
.pair-figure figcaption{font-size:12.5px; color:var(--steel); margin-top:10px; text-align:center;}
.then-now{width:100%; border-collapse:collapse; margin-top:var(--sp-3);}
.then-now th{
  text-align:left; font-family:var(--font-display); font-size:19px; color:var(--navy);
  padding:0 12px 10px 0; border-bottom:1px solid var(--line); font-weight:700;
}
.then-now th:first-child{
  font-family:var(--font-body); font-size:11.5px; font-weight:700; color:var(--steel);
  text-transform:uppercase; letter-spacing:.06em; width:96px;
}
.then-now td{
  padding:12px 12px 12px 0; border-bottom:1px solid var(--line);
  font-size:14.5px; color:var(--ink); vertical-align:top;
}
.then-now td:first-child{
  font-size:11.5px; font-weight:700; color:var(--steel);
  text-transform:uppercase; letter-spacing:.05em; padding-top:15px;
}
.then-now tr:last-child td{border-bottom:none;}
.then-now .same{color:var(--navy);}
@media (max-width:860px){
  .then-now th:first-child,.then-now td:first-child{width:auto;}
  .then-now{font-size:13.5px;}
}

/* unapproved copy standing in for a named person — must be impossible to miss */
.draft-flag{
  border:2px dashed var(--red); background:#FDF1F0; padding:12px 14px; margin-bottom:var(--sp-3);
  font-size:13px; color:#8A1F19; line-height:1.5; border-radius:var(--radius-sm);
}
.draft-flag b{color:var(--red);}
.draft-flag code{background:rgba(0,0,0,.05); padding:1px 5px; border-radius:2px; font-size:12px;}
.quote-cont{margin-top:var(--sp-2);}

/* dating for the by-the-numbers figures */
.stat-note{font-size:12.5px; color:var(--steel); margin-top:var(--sp-2);}

/* ------------------------------------------- schedule: category filtering -- */
.filter-empty{
  margin-top:var(--sp-3); font-size:15px; color:var(--steel); font-style:italic;
}

/* ------------------------------------------------------ supplier logo wall -- */
.supplier-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--sp-4);
}
.supplier-card{
  background:var(--white); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; padding:var(--sp-3) 18px; text-align:center;
}
.supplier-logo{
  height:72px; width:100%; display:flex; align-items:center; justify-content:center;
}
/* width/height:100% (not just max-*) so object-fit scales small source
   files up to fill the tile, same as it scales large ones down. */
.supplier-logo img{width:100%; height:100%; object-fit:contain;}
.supplier-name{font-size:12.5px; color:var(--steel); line-height:1.3;}

/* A supplier confirmed but without a logo file yet. */
.supplier-logo.is-missing{
  width:100%; height:100%; border-radius:var(--radius-sm);
  background:repeating-linear-gradient(45deg,#E9E5DC,#E9E5DC 8px,#E1DCD0 8px,#E1DCD0 16px);
}
@media (max-width:640px){
  .supplier-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));}
  .supplier-logo{height:56px;}
}