/* ------------------------------------------------------------------
   Brussels Diwali Festival
   Lamps in the dark. Deep indigo ground, marigold light, photographs
   doing the work. Almost no chrome.
------------------------------------------------------------------ */

:root{
  --night:#0B0E24;
  --night-2:#141A3A;
  --aubergine:#1E1233;
  --ink:#F2EFE6;
  --ink-2:#AFB4CE;
  --ink-3:#7B819E;
  --line:rgba(242,239,230,.14);

  --marigold:#E8A33B;
  --saffron:#FF9933;
  --ember:#F6DFA6;
  --green:#3E9A63;

  --display:'Rozha One',Georgia,serif;
  --text:Mukta,system-ui,-apple-system,sans-serif;

  --pad:22px;
  --max:1240px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night)}
body{
  margin:0;font-family:var(--text);font-size:17px;line-height:1.68;
  color:var(--ink);overflow-x:hidden;
  background:
    radial-gradient(1200px 800px at 12% -5%, rgba(232,163,59,.10), transparent 62%),
    radial-gradient(1000px 700px at 92% 18%, rgba(126,44,92,.22), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--aubergine) 48%, var(--night) 100%);
  background-attachment:fixed;
}
img,picture,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--marigold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:var(--marigold);color:#1A1000;padding:10px 14px;z-index:99}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.col{max-width:44rem}

.kicker{
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 16px;
}
.kicker.gold{color:var(--marigold)}
.hero .kicker{color:var(--ember);text-shadow:0 1px 3px rgba(6,8,24,.9),0 2px 24px rgba(6,8,24,.8)}

/* ---------------- top bar ---------------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(11,14,36,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
/* A masthead rather than an app bar: roughly 40% more height, and the
   organiser's mark sitting last on the right the way it does on a letterhead. */
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:14px}
.bar-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 auto}
.bar-right{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-left:24px}
.brand{min-width:0;overflow:hidden}
/* The masthead title. Big enough to be the name of the thing rather than a
   label on a toolbar, and it is the element that gives way when the bar runs
   out of room. */
.brand span{font-size:clamp(15px,1.9vw,26px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  display:inline;overflow:hidden;text-overflow:ellipsis;line-height:1.1}
.brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The mark, first thing on the left, ahead of the name it belongs to. */
.bar-org{display:flex;align-items:center;flex:none}
.bar-org:hover{opacity:.85}
.bar-logo{height:48px;width:auto;flex:none;display:block}
/* Still the loudest control in the bar. */
.bar-cta{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#1A1000;background:var(--marigold);border-radius:100px;padding:9px 18px;
  white-space:nowrap;flex:none}
.bar-cta:hover{background:var(--ember)}
/* One row on a phone, and it must never wrap. What buys the room: the ticket
   button becomes a quiet text link, so the only gold on the first screen is
   the hero's, and the three language pills collapse into one button that opens
   the other two. */
@media(max-width:820px){
  .bar{flex-wrap:nowrap;gap:8px;padding-block:9px}
  .bar-left{flex:1 1 auto;gap:9px;min-width:0}
  .bar-right{flex:0 0 auto;margin-left:8px;gap:10px}
  .brand span{font-size:13px;letter-spacing:.04em}
  .bar-logo{height:34px}

  /* Quiet on a phone. The hero carries the one gold button. */
  .bar-cta{background:none;color:var(--ink);padding:0 2px;font-size:11px;
    letter-spacing:.09em;min-height:44px;display:flex;align-items:center}
  .bar-cta:hover{background:none;color:var(--marigold)}

}
@media(max-width:400px){
  .wm-b{display:none}
  .brand span{font-size:13.5px;letter-spacing:.05em}
  .bar-logo{height:32px}
}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-top:158px;padding-bottom:clamp(48px,9vh,110px);overflow:hidden}
/* One rhythm down the hero rather than seven different margins. The hero is
   allowed to run past a single screen on a phone: cramming it in was what made
   it feel stacked. */
@media(max-width:820px){
  .hero{--step:20px;padding-top:calc(var(--hdr,64px) + 96px);
    padding-bottom:56px;min-height:0}
  .hero .kicker{margin:0 0 var(--step)}
  .hero h1{margin:0 0 var(--step)}
  .hero .tagline{margin:0 0 var(--step)}
  .hero-line{margin:0 0 var(--step)}
  .lamps{margin:calc(var(--step) * 1.5) 0}
  .days{margin:0 0 calc(var(--step) * 1.6);gap:22px}
  .hero-actions{gap:calc(var(--step) * .7)}
}
.hero-media{position:absolute;inset:0}
.hero-media picture,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* No autoplay for anyone who has asked the system to stop moving things.
   The still underneath shows instead. */
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-fallback{width:100%;height:100%;background:var(--night-2)}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(11,14,36,.55) 0%, rgba(11,14,36,.06) 22%,
    rgba(11,14,36,.06) 44%, rgba(11,14,36,.55) 72%, rgba(11,14,36,.94) 92%,
    var(--night) 100%)}
/* A little lift so the footage keeps the colour it had in the edit. */
.hero-media picture img,.hero-video{filter:saturate(1.12) contrast(1.04)}
.hero-body{position:relative;text-align:center}
/* Text sits in its own pool of shadow rather than dimming the whole frame. */
.hero-body::before{content:"";position:absolute;left:50%;top:50%;
  translate:-50% -50%;width:min(150%,1700px);height:190%;z-index:0;
  background:radial-gradient(52% 46% at 50% 52%, rgba(6,8,24,.90),
    rgba(6,8,24,.55) 62%, transparent 78%)}
.hero-body > *{position:relative;z-index:1}

/* Back to the size it was. The masthead wordmark carries the weight now. */
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,9vw,6.4rem);line-height:1.02;letter-spacing:-.01em;
  margin:0 0 6px;text-shadow:0 2px 40px rgba(11,14,36,.65);
}
.hero h1 em{font-style:normal;color:var(--ember)}

.lamps{display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(6px,2vw,16px);margin:26px 0 30px}
.lamp{filter:drop-shadow(0 0 6px rgba(232,163,59,.75))}
.lamp .flame{animation:flicker 3.4s ease-in-out infinite}
.lamp:nth-child(2n) .flame{animation-delay:-.7s}
.lamp:nth-child(3n) .flame{animation-delay:-1.5s}
@keyframes flicker{0%,100%{opacity:1}45%{opacity:.72}}

.days{display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,4vw,44px);flex-wrap:wrap;margin:0 0 36px;
  text-shadow:0 1px 24px rgba(11,14,36,.9)}
.day{display:flex;flex-direction:column;gap:2px}
.day-label{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--marigold)}
.day-date{font-family:var(--display);font-size:clamp(1.15rem,3vw,1.7rem);letter-spacing:.01em}
.day-hours{font-size:13px;color:#CFD3E6}
.day-rule{width:1px;height:40px;background:var(--line)}

.hero-actions{display:flex;flex-direction:column;align-items:center;gap:12px}
.btn{display:inline-block;background:var(--marigold);color:#1A1000;
  font-weight:700;font-size:16px;letter-spacing:.01em;
  padding:15px 34px;border-radius:100px;border:none;cursor:pointer}
.btn:hover{background:var(--ember)}
.btn-note{font-size:13.5px;color:#D6D9EA;letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(6,8,24,.9)}
/* Second line of the hero note. Same size, quieter, so the first line leads. */
.btn-note-2{opacity:.72}

.hero-scroll{position:absolute;bottom:18px;left:50%;translate:-50% 0;
  width:22px;height:36px;border:1.5px solid var(--line);border-radius:12px}
.hero-scroll::after{content:"";position:absolute;left:50%;top:8px;translate:-50% 0;
  width:3px;height:7px;border-radius:2px;background:var(--marigold);
  animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
@media(max-width:640px){.hero-scroll{display:none}}

/* ---------------- bands ---------------- */
.band{padding:clamp(64px,10vh,120px) 0}
.section-h,h2{font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.01em;margin:0 0 26px}
.lede{font-size:clamp(1.02rem,2vw,1.16rem);line-height:1.68;color:var(--ink-2);margin:0 0 1.1em;max-width:42rem}
.lede:last-child{margin-bottom:0}

/* ---------------- cards ---------------- */
.cards{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:rgba(242,239,230,.045);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .25s ease, transform .25s ease}
.card:hover{border-color:rgba(232,163,59,.5);transform:translateY(-3px)}
.card-img,.card-img img{width:100%;display:block}
.card-img img{aspect-ratio:4/3;object-fit:cover}
.card-img.awaiting{aspect-ratio:4/3;background:var(--night-2);
  display:flex;align-items:flex-end;padding:14px 16px}
.card-img.awaiting span{font-size:12.5px;color:var(--ink-3)}
.card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--display);font-weight:400;font-size:1.6rem;margin:0 0 10px;letter-spacing:-.005em}
.card p{margin:0 0 18px;color:var(--ink-2);font-size:15.5px;line-height:1.6;flex:1}
.more{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marigold);display:inline-flex;align-items:center;gap:7px}
.more::after{content:"›";font-size:17px;line-height:1;transition:transform .2s ease}
.card:hover .more::after{transform:translateX(3px)}

/* ---------------- gallery rail ---------------- */
.gallery{padding-bottom:clamp(48px,8vh,96px)}
.rail{list-style:none;display:flex;gap:16px;margin:0;padding:4px var(--pad) 22px;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rail li{flex:0 0 auto;width:min(84vw,620px);scroll-snap-align:center}
.shot,.shot img{width:100%;border-radius:16px;display:block}
.shot img{aspect-ratio:3/2;object-fit:cover}

/* ---------------- accordion ---------------- */
.accordion{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-size:clamp(1.15rem,2.6vw,1.5rem);letter-spacing:-.005em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;translate:0 -50%;
  width:15px;height:15px;
  background:
    linear-gradient(var(--marigold),var(--marigold)) center/15px 1.5px no-repeat,
    linear-gradient(var(--marigold),var(--marigold)) center/1.5px 15px no-repeat;
  transition:transform .2s ease}
details[open] summary::after{background:linear-gradient(var(--marigold),var(--marigold)) center/15px 1.5px no-repeat}
.answer{padding:0 0 24px}
.answer p{margin:0;color:var(--ink-2);max-width:44rem}

/* ---------------- register ---------------- */
.register{position:relative}
.register::before{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 340px at 50% 40%, rgba(232,163,59,.12), transparent 70%);
  pointer-events:none}
.register .wrap{position:relative;text-align:left}
form{margin-top:26px;max-width:30rem}
.field{display:flex;gap:10px;flex-wrap:wrap}
input[type=email]{flex:1 1 210px;min-width:0;background:rgba(242,239,230,.07);
  border:1px solid var(--line);border-radius:100px;color:var(--ink);
  font-family:var(--text);font-size:16px;padding:14px 20px}
input[type=email]::placeholder{color:var(--ink-3)}
.err{color:var(--saffron);font-size:14px;margin:12px 0 0}
.done{color:var(--marigold);font-size:15.5px;margin:26px 0 0}
/* Both are live regions that stay in the DOM and collapse when empty, so a
   screen reader announces the text arriving rather than the node appearing. */
.err:empty,.done:empty{display:none}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--line);padding:56px 0 46px;background:rgba(11,14,36,.6)}
.foot{display:grid;gap:30px 50px;grid-template-columns:1fr}
@media(min-width:760px){.foot{grid-template-columns:1.6fr 1fr 1fr}}
.foot p{margin:0 0 6px;color:var(--ink-2);font-size:15px}
.foot a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px}
.foot a:hover{border-bottom-color:var(--marigold)}
.motto{font-family:var(--display);font-size:1.5rem;color:var(--ink);margin:0 0 14px}
.fine{font-size:13.5px;color:var(--ink-3);line-height:1.7}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lamp .flame,.hero-scroll::after{animation:none}
  .card{transition:none}
}


/* ---------------- pill sub-nav ------------------------------------------ */
/* Sits below the masthead, always, because the offset is the masthead's own
   measured height rather than a number that was right once. In the flow while
   the hero is on screen, fixed only after it. */
.pillbar{position:absolute;top:calc(var(--hdr,76px) + 16px);left:0;right:0;z-index:30;
  display:flex;justify-content:center;padding:0 var(--pad);pointer-events:none}
.pillbar.stuck{position:fixed;top:calc(var(--hdr,76px) + 10px)}
.pillbar.stuck .pill{padding:5px 16px;
  background:rgba(242,239,230,.94);backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(4,6,20,.5)}
.pillbar.stuck .pill a{padding:4px 10px}

/* Anchor jumps land below whatever is actually pinned: masthead plus pill on
   a wide screen, masthead alone on a phone where the pill scrolls away. */
html{scroll-padding-top:calc(var(--hdr,76px) + var(--pill,46px) + 24px)}
section[id],header[id]{scroll-margin-top:calc(var(--hdr,76px) + var(--pill,46px) + 24px)}
@media(max-width:820px){
  html{scroll-padding-top:calc(var(--hdr,64px) + 16px)}
  section[id],header[id]{scroll-margin-top:calc(var(--hdr,64px) + 16px)}
}
.pill{pointer-events:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  justify-content:center;background:var(--ink);border-radius:100px;
  padding:9px 22px;box-shadow:0 8px 34px rgba(4,6,20,.4);max-width:100%;
  transition:padding .22s ease, background .22s ease, box-shadow .22s ease}
.pill-name{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rust,#B4531C);padding-right:10px;white-space:nowrap}
.pill-rule{width:1px;height:16px;background:rgba(20,17,13,.18);margin-right:8px}
.pill a{font-size:14.5px;font-weight:500;color:#4A443B;padding:5px 11px;border-radius:100px;
  white-space:nowrap}
.pill a:hover{color:#14110D}
.pill a.on{color:#14110D;font-weight:600;box-shadow:inset 0 -2px 0 var(--marigold)}
@media(max-width:820px){
  /* Absolute, not fixed: the bottom ticket bar already takes a fixed strip and
     a second one would leave too little of a phone screen for the page. The
     pill scrolls away with the hero instead. */
  /* Never pinned on a phone, and always clear of the masthead. Centred like
     everything else on the page: it started at the left back when it held a
     label, a divider and five links and had to scroll sideways. Three links
     fit, so left aligning it just left it sitting off centre. */
  .pillbar,.pillbar.stuck{position:absolute;top:calc(var(--hdr,64px) + 14px);
    padding:0 12px;justify-content:center}
  .pillbar.stuck .pill{padding:7px 8px;background:var(--ink);
    backdrop-filter:none;box-shadow:0 8px 34px rgba(4,6,20,.4)}
  .pill{padding:7px 8px;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pill::-webkit-scrollbar{display:none}
  .pill-name,.pill-rule{display:none}
  .pill a{font-size:13.5px;padding:5px 10px;flex:0 0 auto}
}

/* ---------------- stats -------------------------------------------------- */
.statrow{padding:clamp(44px,7vh,80px) 0 0}
.stats{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(28px,7vw,90px);text-align:center}
.stat{display:flex;flex-direction:column;gap:6px}
.stat .n{font-family:var(--display);font-size:clamp(2.4rem,6vw,3.6rem);
  line-height:1;color:var(--marigold)}
.stat .l{font-size:12.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---------------- split section ------------------------------------------ */
.split-grid{display:grid;gap:34px 52px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.split-grid{grid-template-columns:1fr 1fr;gap:0 64px}}
.split-media{border-radius:18px;overflow:hidden}
.split-img,.split-img img{width:100%;display:block}
.split-img img{aspect-ratio:4/3;object-fit:cover}
.split-img.awaiting{aspect-ratio:4/3;background:var(--night-2);
  display:flex;align-items:flex-end;padding:16px 18px;border-radius:18px}
.split-img.awaiting span{font-size:12.5px;color:var(--ink-3)}
.split-text h2{margin-bottom:20px}

/* ---------------- footer -------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:66px 0 50px;background:rgba(8,10,28,.72)}
.foot-top{text-align:center;padding-bottom:44px;border-bottom:1px solid var(--line)}
.foot-mark{font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 12px}
.foot-motto{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.1rem);
  color:var(--ink);margin:0 0 22px}
.foot-social{display:flex;justify-content:center;gap:26px}
.foot-social a{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2)}
.foot-social a:hover{color:var(--marigold)}
.foot-cols{display:grid;gap:34px 44px;grid-template-columns:1fr;padding-top:44px}
@media(min-width:700px){.foot-cols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.foot-cols{grid-template-columns:repeat(4,1fr)}}
.foot-cols a{display:block;font-size:15px;color:var(--ink-2);margin-bottom:9px}
.foot-cols a:hover{color:var(--ink)}
.col-h{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--marigold);margin:0 0 16px}
.foot-cols .fine{font-size:14px;color:var(--ink-3);line-height:1.75;margin:0}

/* ---------------- price stair ---------------- */
.prices{list-style:none;margin:26px 0 12px;padding:0;max-width:34rem;
  border-top:1px solid var(--line)}
.prices li{border-bottom:1px solid var(--line)}
/* Three parts per line: what it is, what it costs, and the one condition
   that matters. The note drops to its own row so a long condition never
   squeezes the price. */
.prices li{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:4px 18px;padding:14px 0}
.prices .t-label{font-size:16.5px;font-weight:600;color:var(--ink)}
.prices .t-price{font-family:var(--display);font-size:1.5rem;line-height:1;
  color:var(--marigold);justify-self:end}
.prices .t-note{grid-column:1/-1;font-size:14.5px;color:var(--ink-2)}
.price-note{font-size:14px;color:var(--ink-3);letter-spacing:.02em;margin:6px 0 0}
.ticket-cta{margin:26px 0 0}

/* ---------------- mobile sticky ticket bar ---------------- */
/* Phones are most of the traffic and the hero CTA scrolls away fast, so the
   price and a way back to it stay pinned. Desktop keeps the top bar CTA. */
.stickybar{display:none}
@media(max-width:720px){
  /* Held off screen until the hero is behind the reader, so its gold button and
     the hero's are never on the same screen. */
  .stickybar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    transform:translateY(110%);visibility:hidden;
    transition:transform .28s ease, visibility .28s;
    background:rgba(11,14,36,.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    padding-block:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .stickybar.show{transform:none;visibility:visible}
  .sb-in{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .sb-txt{font-size:14px;font-weight:600;color:var(--ink)}
  .sb-cta{flex:none;background:var(--marigold);color:#1A1000;
    font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    border-radius:100px;padding:11px 18px}
  .sb-cta:hover{background:var(--ember)}
  /* keep the footer clear of the bar */
  footer{padding-bottom:74px}
}

/* ---------------- the four pillars ---------------- */
/* Alternating splits. Four of these stacked would be a lot of air at the
   full band rhythm, so they sit a little tighter. */
.pillar{padding-block:clamp(52px,7.5vh,92px)}
.pillar-grid{display:grid;gap:30px 56px;grid-template-columns:1fr;align-items:center}
.pillar-media{border-radius:18px;overflow:hidden}
.pillar-img,.pillar-img img{width:100%;display:block}
.pillar-img img{aspect-ratio:4/3;object-fit:cover}
.pillar-text h2{margin-bottom:20px}
.pillar-text .lede:last-child{margin-bottom:0}
@media(min-width:900px){
  .pillar-grid{grid-template-columns:1fr 1fr;gap:0 64px}
  /* Image right, text left on every second band. Mobile keeps DOM order,
     so the photograph stays above the writing there. */
  .pillar.flip .pillar-media{order:2}
}
/* No photograph yet: one column, text given a comfortable measure. */
.pillar.noimg .pillar-grid{grid-template-columns:1fr}
.pillar.noimg .pillar-text{max-width:44rem}

.ticket-note{font-size:15.5px;color:var(--ink-3);margin-top:18px}

/* ---------------- tagline ---------------- */
.hero-line{font-size:clamp(14.5px,2.2vw,17px);line-height:1.45;color:#D6D9EA;
  max-width:34rem;margin:12px auto 0;
  text-shadow:0 1px 3px rgba(6,8,24,.9),0 2px 24px rgba(6,8,24,.7)}
.tagline{font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,3.2vw,2rem);line-height:1.15;letter-spacing:.005em;
  color:var(--ember);margin:2px 0 0;
  text-shadow:0 1px 3px rgba(6,8,24,.9),0 2px 30px rgba(6,8,24,.75)}

/* ---------------- quotes ---------------- */
.quote-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:820px){.quote-grid{grid-template-columns:repeat(2,1fr)}}
.quote{margin:0;background:rgba(242,239,230,.045);border:1px solid var(--line);
  border-radius:18px;padding:28px 30px}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.1rem,2.3vw,1.45rem);line-height:1.4;color:var(--ink)}
.quote figcaption{margin-top:18px;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--marigold)}
.quote figcaption span{display:block;margin-top:4px;font-weight:500;
  letter-spacing:.02em;text-transform:none;font-size:14px;color:var(--ink-3)}

/* ---------------- partners ---------------- */
/* A rail rather than a grid: the list grows every year and a rail takes
   twenty logos as gracefully as it takes five. */
.partner-rail{list-style:none;display:flex;align-items:center;gap:14px;
  margin:26px 0 0;padding:4px var(--pad) 22px;
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.partner-rail::-webkit-scrollbar{height:6px}
.partner-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.partner{flex:0 0 auto;scroll-snap-align:start;
  display:flex;align-items:center;justify-content:center;
  min-width:168px;height:96px;padding:16px 22px;
  background:rgba(242,239,230,.045);border:1px solid var(--line);border-radius:14px}
.partner img{max-height:100%;width:auto;object-fit:contain;
  filter:grayscale(1) brightness(1.7);opacity:.85;transition:filter .25s ease,opacity .25s ease}
.partner a:hover img{filter:none;opacity:1}
.partner span{font-size:14.5px;font-weight:600;color:var(--ink-2);text-align:center}

/* ---------------- language switch ---------------- */
.langsw{position:relative;display:flex;align-items:center;gap:2px;
  border:1px solid var(--line);border-radius:100px;padding:3px;flex:none}
/* The single button is the phone shape; a wide screen never shows it. */
.lang-cur{display:none}
.lang-list{display:flex;align-items:center;gap:2px}
.langsw a{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);
  padding:5px 9px;border-radius:100px;line-height:1}
.langsw a:hover{color:var(--ink)}
.langsw a.on{background:rgba(242,239,230,.12);color:var(--ink)}

/* The phone shape. These have to come after the rules above, not before them:
   as part of the header block they were being overridden by the base
   .lang-list and the menu rendered permanently open. */
@media(max-width:820px){
  .langsw{border:0;padding:0}
  .lang-cur{display:flex;align-items:center;justify-content:center;gap:5px;
    min-height:44px;min-width:44px;padding:0 8px;background:none;border:0;
    cursor:pointer;color:var(--ink-2);font:inherit;font-size:11.5px;
    font-weight:700;letter-spacing:.08em}
  .lang-cur svg{transition:transform .18s ease}
  .langsw.open .lang-cur{color:var(--ink)}
  .langsw.open .lang-cur svg{transform:rotate(180deg)}
  /* The menu, not a row. The current language is already on the button. */
  .lang-list{position:absolute;top:calc(100% + 6px);right:0;z-index:60;
    display:none;flex-direction:column;gap:2px;padding:6px;
    background:rgba(20,26,58,.98);border:1px solid var(--line);
    border-radius:14px;box-shadow:0 12px 34px rgba(4,6,20,.55)}
  .langsw.open .lang-list{display:flex}
  .lang-list a{min-height:44px;min-width:60px;display:flex;align-items:center;
    justify-content:center;font-size:12.5px;border-radius:9px}
  .lang-list a.on{display:none}
}

/* ---------------- Atomium strip ---------------- */
/* A band, not a section: about a third the height of a content band, one line
   of type, nothing else to read. */
.astrip{display:flex;align-items:center;justify-content:center;
  min-height:clamp(148px,17vw,226px);background-color:var(--night-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.astrip p{margin:0;text-align:center;font-weight:700;
  font-size:clamp(1.02rem,2.2vw,1.5rem);line-height:1.3;color:var(--ink);
  text-shadow:0 2px 16px rgba(6,8,24,.85),0 1px 3px rgba(6,8,24,.9)}

/* ---------------- what awaits you ---------------- */
/* Five senses. One column on a phone so the page stays short, a row of five on
   a wide screen. The list sits inside the section's own column now, so the
   cards line up with the heading above them instead of running wider than it. */
.senses{list-style:none;margin:30px 0 0;padding:0;
  display:grid;gap:18px;grid-template-columns:1fr;align-items:stretch}
@media(min-width:760px){.senses{grid-template-columns:repeat(5,1fr);gap:20px}}
/* Equal height by grid, and a column inside each card so the title sits on one
   line across all five and the text starts at the same height. */
.sense{display:flex;flex-direction:column;
  background:rgba(242,239,230,.045);border:1px solid var(--line);
  border-radius:16px;padding:22px;height:100%}
.sense h3{font-family:var(--display);font-weight:400;font-size:1.5rem;
  line-height:1.1;margin:0 0 12px;color:var(--marigold);
  min-height:1.65rem;display:flex;align-items:flex-end}
.sense p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);flex:1 1 auto}
/* On a phone the five "What awaits you" cards become one row swiped sideways
   instead of five stacked cards. */
@media(max-width:759px){
  .senses{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:22px;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
  .senses::-webkit-scrollbar{display:none}
  .sense{flex:0 0 78%;scroll-snap-align:start;height:auto}
}

/* ---------------- panel galleries ---------------- */
/* Swipeable rail, one photograph at a time, snapping so a half image is never
   left on screen. Only ever rendered when a panel has real pictures. */
.pgal{position:relative;margin:16px -22px -22px;border-radius:0 0 15px 15px;overflow:hidden}
.pgal-rail{list-style:none;display:flex;gap:0;margin:0;padding:0;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.pgal-rail::-webkit-scrollbar{display:none}
.pgal-rail li{flex:0 0 100%;scroll-snap-align:center}
.pgal-rail img{width:100%;height:170px;object-fit:cover;display:block}
/* An edge fade says there is more to the right without needing an arrow. */
.pgal::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;
  pointer-events:none;background:linear-gradient(90deg,transparent,rgba(11,14,36,.55))}
.pgal-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;
  justify-content:center;gap:6px;pointer-events:none}
.pgal-dots span{width:5px;height:5px;border-radius:50%;
  background:rgba(242,239,230,.45);transition:background .2s ease}
.pgal-dots span.on{background:var(--marigold)}
@media (prefers-reduced-motion:reduce){.pgal-rail{scroll-behavior:auto}}

/* ---------------- hour by hour ---------------- */
/* A rule down the left with a lamp-coloured node per entry. Vertical at every
   width: a day is a sequence, and a sequence reads down. */
.tl{list-style:none;margin:26px 0 0;padding:0 0 0 22px;position:relative}
.tl::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;
  width:1px;background:var(--line)}
.tl li{position:relative;padding:0 0 26px}
.tl li::before{content:"";position:absolute;left:-22px;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--marigold);
  box-shadow:0 0 0 3px rgba(232,163,59,.18)}
.tl-when{display:block;font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--marigold);margin-bottom:4px}
.tl-body h3{font-family:var(--display);font-weight:400;font-size:1.32rem;
  line-height:1.15;margin:0 0 4px}
.tl-body p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.tl-note{margin:4px 0 0;font-size:14px;color:var(--ink-3);font-style:italic}

/* ---------------- footer heritage line ---------------- */
.foot-heritage{border-top:1px solid var(--line);margin-top:8px;padding-top:18px}
.foot-heritage p{margin:0;font-size:13.5px;color:var(--ink-3);letter-spacing:.02em}

/* ---------------- embedded checkout ---------------- */
/* The box claims its height before the widget exists, so the iframe arriving
   does not shove the rest of the page down under the reader's thumb. */
.tt-mount{position:relative;margin:26px 0 0;min-height:520px;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(242,239,230,.045)}
@media(max-width:520px){.tt-mount{min-height:560px}}
.tt-mount iframe{display:block;width:100%;border:0}
.tt-loading{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;margin:0;padding:20px;text-align:center;
  font-size:15px;color:var(--ink-3)}
.tt-loading::before{content:"";width:14px;height:14px;margin-right:10px;
  border:2px solid var(--line);border-top-color:var(--marigold);border-radius:50%;
  animation:ttspin .9s linear infinite}
@keyframes ttspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tt-loading::before{animation:none}}
/* Once the iframe has painted, the placeholder must not sit over it. */
.tt-mount.loaded .tt-loading{display:none}
.tt-loading.failed::before{display:none}

.tt-fallback{margin:14px 0 0;font-size:14px;color:var(--ink-3)}
.tt-fallback a{color:var(--marigold);text-decoration:underline;
  text-underline-offset:2px}
.tt-fallback a:hover{color:var(--ember)}

/* ======================= partners page and strip ======================= */
/* Indigo ground, Rozha One headings, Mukta body, marigold accents, same as
   everywhere else. No photograph on this page: the logos are the picture. */

/* Clear of the masthead AND the pill nav under it. The landing page gets that
   space from the hero; this page has no hero, so it asks for it. */
.partners{padding-top:calc(var(--hdr,76px) + 96px)}
@media(max-width:820px){.partners{padding-top:calc(var(--hdr,64px) + 78px)}}
.p-intro{max-width:760px;padding-block:8px 44px}
.p-intro h1{font-family:'Rozha One',serif;font-weight:400;line-height:1.06;
  font-size:clamp(34px,7vw,64px);color:var(--ink);margin:0 0 18px;letter-spacing:.005em}
.p-intro p{font-size:clamp(16px,2.1vw,19px);line-height:1.62;color:var(--ink);opacity:.86;margin:0}

/* The intro carried its own max-width, which overrode the .wrap container and
   re-centred it, so it sat indented from the tier labels and cards that share
   that container. From 800px up it uses the same container as everything else
   and the paragraph does the measuring instead, which is what keeps the left
   edges flush.

   800 rather than 900 because that is where the indent actually starts: below
   roughly 805px the container is already narrower than the 760px cap, so the
   block is flush regardless and there was nothing to fix. */
@media(min-width:800px){
  .p-intro{max-width:var(--max);padding-block:8px 24px}
  /* One line. Scaled from the viewport so the longest of the three, the
     French, still fits at 900px, and capped where the design caps. */
  .p-intro h1{font-size:clamp(40px,5.2vw,64px);white-space:nowrap;margin:0 0 14px}
  .p-intro p{max-width:62ch}
}

.p-sec{padding-block:0 52px}
.p-tier{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marigold);margin:0 0 20px;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* The mark itself. A card only where a logo needs one; see CARD_TIERS. */
.p-mark{display:flex;align-items:center;justify-content:center;
  min-height:96px;padding:8px;border-radius:12px;transition:transform .2s ease}
.p-mark.is-card{background:#fff;padding:20px}
.p-mark:hover{transform:translateY(-2px)}
.p-mark:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}
.p-img{max-width:100%;max-height:112px;width:auto;height:auto;display:block}

/* Presenting and patronage: one full-width card each, logo beside the text. */
.p-feature{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(20px,4vw,48px);
  align-items:center;background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:18px;padding:clamp(20px,3.5vw,36px)}
.p-feature + .p-feature{margin-top:18px}
.p-feature .p-mark{min-height:130px}
.p-feature .p-img{max-height:140px}
.p-body h3{font-family:'Rozha One',serif;font-weight:400;font-size:clamp(22px,3.2vw,30px);
  color:var(--ink);margin:0 0 10px;line-height:1.15}
.p-body p{margin:0 0 14px;font-size:16.5px;line-height:1.62;color:var(--ink);opacity:.84}
.p-link{font-size:14px;font-weight:600;color:var(--marigold);text-decoration:none;
  border-bottom:1px solid transparent}
.p-link:hover{border-bottom-color:currentColor}

/* Institutional and network: two columns, logo on top. */
.p-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.p-card{background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:18px;padding:clamp(18px,2.6vw,28px)}
.p-card h3{font-family:'Rozha One',serif;font-weight:400;font-size:21px;
  color:var(--ink);margin:18px 0 8px;line-height:1.18}
.p-card p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink);opacity:.82}

/* Community, media, suppliers: a logo grid, name on hover. */
.p-logos{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.p-logos a{display:block;text-decoration:none;position:relative}
/* Under the mark, not inside it: a carded logo would otherwise print this in
   near white on the white card. */
.p-name{display:block;text-align:center;margin-top:8px;font-size:13px;color:var(--ink);
  opacity:0;transition:opacity .18s ease}
.p-logos li:hover .p-name,.p-logos a:focus-visible + .p-name{opacity:.8}

.p-become{max-width:760px;padding-block:8px 72px}
.p-become h2{font-family:'Rozha One',serif;font-weight:400;font-size:clamp(26px,4.4vw,40px);
  color:var(--ink);margin:0 0 14px;line-height:1.1}
.p-become p{margin:0 0 22px;font-size:17px;line-height:1.62;color:var(--ink);opacity:.86}
.p-cta{display:inline-block;background:var(--marigold);color:#1A1000;font-weight:700;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:100px;padding:13px 26px;text-decoration:none}
.p-cta:hover{background:var(--ember)}

@media(max-width:760px){
  .p-feature{grid-template-columns:1fr;gap:20px;text-align:left}
  .p-feature .p-mark{justify-content:flex-start}
  .p-feature .p-mark.is-card{justify-content:center}
  .p-grid{grid-template-columns:1fr}
  .p-logos{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .p-name{opacity:.7}
}

/* ------- in the news ------- */
/* A list of links, nothing more: no thumbnails and no excerpts, so the row
   is the three facts that matter. It shares .wrap and .p-sec with the tier
   sections above it, which is what keeps the left edge flush with the cards.

   The outlet column is sized to hold the longest name on one line and the
   date column to its own content, so the titles all start and the months all
   end on the same vertical. */
.n-list{list-style:none;margin:0;padding:0}
.n-item{display:grid;grid-template-columns:minmax(120px,170px) 1fr auto;
  column-gap:24px;align-items:baseline;padding-block:15px}
.n-item + .n-item{border-top:1px solid var(--line)}
.n-outlet{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--marigold)}
.n-title{font-size:16.5px;line-height:1.5;color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent}
.n-title:hover,.n-title:focus-visible{border-bottom-color:var(--marigold)}
/* ink-2 rather than ink-3. The month is small body text, and ink-3 measures
   4.4:1 against the darkest part of the ground behind this block, under the
   4.5:1 floor. ink-2 is still clearly the quiet third of the row. */
.n-date{font-size:13.5px;color:var(--ink-2);white-space:nowrap}
/* The agency a dispatch came through, in the outlet's own line. */
.n-via{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-2)}
/* A chip saying the piece is in another language than this page. */
.n-lang{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:4px;
  border:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--ink-2);vertical-align:2px}
/* A film rather than an article. */
.n-play{width:11px;height:11px;margin-right:7px;fill:var(--marigold);vertical-align:baseline}
/* The same dispatch, carried by other outlets. */
.n-also{grid-column:2;margin-top:6px;font-size:13px;color:var(--ink-2)}
.n-also a{color:var(--ink-2);border-bottom:1px solid var(--line);text-decoration:none}
.n-also a:hover{color:var(--ink);border-bottom-color:var(--marigold)}
.n-also a + a{margin-left:10px}
/* From three cuttings on the partners page to all of them. */
.n-more{margin:20px 0 0}
.n-more-link{font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--marigold);text-decoration:none;border-bottom:1px solid transparent}
.n-more-link:hover{border-bottom-color:currentColor}

@media(max-width:760px){
  /* One column. The outlet leads, the title carries the tap target, and the
     month closes the row. */
  .n-item{grid-template-columns:1fr;row-gap:5px;padding-block:17px}
  .n-title{font-size:17px}
  .n-also{grid-column:1;margin-top:2px}
}

/* ==================================================================
   The programme page
   ------------------------------------------------------------------
   The same room as the rest of the site: the night ground, Rozha One
   headings at the sizes the landing and partners pages use, hairline
   cards, marigold as the accent and never as a floor. The first build
   gave this page its own palette and its own type scale, and it read
   as a different website bolted on. Nothing here should be larger or
   louder than its counterpart on /partners/, with one exception: the
   party, which is the finale and is allowed one step more.

   One page per day. The switch is a link, so everything below works
   with JavaScript off.
================================================================== */

/* ---------------- intro ---------------- */
/* Clear of the masthead and the pill under it, the same reckoning the
   partners page makes. */
.pg-intro{padding-top:calc(var(--hdr,76px) + 96px);padding-bottom:clamp(28px,4vw,44px)}
@media(max-width:820px){.pg-intro{padding-top:calc(var(--hdr,64px) + 78px)}}
.pg-kicker{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--marigold);margin:0 0 16px}
/* The partners h1, to the pixel. */
.pg-h1{font-family:var(--display);font-weight:400;line-height:1.06;
  font-size:clamp(34px,5.2vw,64px);color:var(--ink);margin:0 0 16px;letter-spacing:.005em}
.pg-lede{font-size:clamp(16px,2.1vw,19px);line-height:1.62;color:var(--ink);opacity:.86;
  margin:0 0 30px;max-width:62ch}
/* The tier label from the partners page: small, tracked, on a hairline. */
.pg-choose{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marigold);margin:0 0 20px;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* Two columns at every width, phones included: the choice is the point of
   this block, and a stacked pair reads as a list of one. */
.pg-days{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px)}
/* min-width:0 because a grid item defaults to min-width:auto, so its longest
   unbreakable word sets the track width and pushes the page sideways. */
.pg-day{min-width:0;position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;
  background:rgba(255,255,255,.035);border:2px solid var(--line);border-radius:18px;
  padding:clamp(14px,2.6vw,28px);color:var(--ink);
  transition:transform .18s ease,border-color .18s ease,opacity .18s ease,box-shadow .18s ease}
/* Each day has its own photograph. With one, the card is a picture with the
   words on its lower half; without one it is the plain card it always was. */
.pg-day:has(.pg-day-img){min-height:clamp(200px,27vw,330px)}
.pg-day-img{position:absolute;inset:0;z-index:-2;transition:filter .18s ease}
.pg-day-img img{width:100%;height:100%;object-fit:cover}
.pg-day:has(.pg-day-img)::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(11,14,36,.95), rgba(11,14,36,.72) 46%, rgba(11,14,36,.12))}
.pg-day:has(.pg-day-img) > span{text-shadow:0 1px 3px rgba(6,8,24,.85),0 2px 18px rgba(6,8,24,.6)}

/* The day you are on: a marigold frame, a glow under it and a filled status
   chip. The other day steps back, and comes forward again under a pointer or
   a keyboard, so it still reads as something to press. */
.pg-day.is-here{border-color:var(--marigold);background:rgba(232,163,59,.12);
  box-shadow:0 0 0 1px var(--marigold),0 18px 48px -20px rgba(232,163,59,.7)}
.pg-day:not(.is-here){opacity:.6}
.pg-day:not(.is-here) .pg-day-img{filter:grayscale(.75) brightness(.8)}
.pg-day:not(.is-here):hover,.pg-day:not(.is-here):focus-visible{opacity:1;
  transform:translateY(-2px);border-color:rgba(232,163,59,.6)}
.pg-day:not(.is-here):hover .pg-day-img,
.pg-day:not(.is-here):focus-visible .pg-day-img{filter:none}

/* On the home page neither day is "the one you are on", so neither steps
   back: both are doors into the programme. */
.pg-day.is-open{opacity:1}
.pg-day.is-open .pg-day-img{filter:none}
.pg-home .pg-lede{margin-bottom:30px}
.pg-home-more{margin:clamp(24px,3.4vw,36px) 0 0}
.pg-home-cta{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border:1px solid var(--marigold);border-radius:100px;
  padding:12px 24px;color:var(--marigold);text-decoration:none}
.pg-home-cta:hover{background:var(--marigold);color:#1A1000}

/* Day, then date, then everything else. */
.pg-day-name{font-family:var(--display);font-weight:400;line-height:1.02;
  font-size:clamp(19px,5.6vw,46px);overflow-wrap:anywhere}
.pg-day-date{margin-top:4px;font-size:clamp(12.5px,1.9vw,19px);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--marigold)}
/* The theme word, then its Hindi under it as a subheading. */
.pg-day-theme{display:flex;flex-direction:column;margin-top:clamp(10px,1.6vw,18px)}
.pg-day-hi{font-family:var(--display);font-weight:400;font-size:clamp(14px,1.9vw,20px);
  line-height:1.35;color:var(--marigold)}
/* Sized against the card, which is half the viewport: the Dutch
   "Ontmoetingen" is twelve characters and has to fit at 320px. */
.pg-day-word{font-family:var(--display);font-weight:400;line-height:1.15;
  font-size:clamp(15px,4.4vw,34px);overflow-wrap:anywhere}
.pg-day-tag{font-size:15px;line-height:1.55;opacity:.86;margin-top:4px}
.pg-day-pill{align-self:flex-start;margin-top:14px;font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--marigold)}
.pg-day.is-here .pg-day-pill{background:var(--marigold);color:#1A1000;border-radius:100px;
  padding:4px 12px;text-shadow:none}
.pg-day:not(.is-here) .pg-day-pill::after{content:" \2192"}
.pg-night{margin:18px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

@media(max-width:480px){
  .pg-day{border-radius:14px}
  .pg-day:has(.pg-day-img){min-height:190px}
  /* The tagline is the first thing to go: at this width the day, the date,
     the word and the status are the whole decision. */
  .pg-day-tag{display:none}
  /* "Programme affiché" has to stay on one line in half a phone. */
  .pg-day-pill{margin-top:10px;font-size:10px;letter-spacing:.04em;padding-inline:8px;white-space:nowrap}
}

/* ---------------- don't miss ---------------- */
/* The highlights, above the day cards. A sideways row that snaps card by
   card: three in view on a desktop, two on a tablet, one and the edge of the
   next on a phone, which is what says "there is more". It scrolls by hand
   with no script at all; with the script it rolls slowly on its own. */
.pg-miss{margin:0 0 clamp(30px,4.4vw,48px)}
/* On the programme page the row stands as a section of its own, after the
   party and before the ticket. */
.pg-missband{padding-top:clamp(52px,8vw,96px)}
.pg-missband .pg-miss{margin-bottom:0}
.pg-miss-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pg-miss-h{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--marigold)}
.pg-miss-nav{display:flex;gap:8px}
.pg-miss-nav[hidden]{display:none}
.pg-miss-nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.pg-miss-nav button:hover{border-color:var(--marigold);color:var(--marigold)}
.pg-miss-nav button:focus-visible{outline:2px solid var(--marigold);outline-offset:2px}
.pg-miss-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pg-tiles{--gap:clamp(10px,1.6vw,18px);display:flex;gap:var(--gap);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  /* Room for the lift on hover, which the scroller would otherwise clip. */
  padding-block:4px;margin-block:-4px}
.pg-tiles::-webkit-scrollbar{display:none}
/* With the script running the row rolls instead of scrolling: the cards sit
   in a strip that is moved by a transform, so the motion is even and stays on
   the compositor. Sideways drags belong to the row, up and down to the page. */
.pg-tiles.is-rolling{display:block;overflow:hidden;scroll-snap-type:none;touch-action:pan-y;
  cursor:grab;-webkit-user-select:none;user-select:none}
.pg-tiles.is-rolling:active{cursor:grabbing}
.pg-roll{display:flex;gap:var(--gap);will-change:transform}
.pg-roll .pg-tile{-webkit-user-drag:none}
.pg-tile{flex:0 0 calc((100% - 2 * var(--gap)) / 3);scroll-snap-align:start;
  min-width:0;min-height:clamp(210px,25vw,310px);position:relative;display:flex;
  align-items:flex-end;border-radius:18px;overflow:hidden;text-decoration:none;isolation:isolate;
  background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--ink);
  transition:transform .18s ease,border-color .18s ease}
.pg-tile:hover{transform:translateY(-2px);border-color:rgba(232,163,59,.5)}
.pg-tile:focus-visible{outline:2px solid var(--marigold);outline-offset:-2px}
.pg-tile.has-photo{background:var(--night)}
.pg-tile-img{position:absolute;inset:0;z-index:-2}
.pg-tile-img img{width:100%;height:100%;object-fit:cover}
.pg-tile.has-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(11,14,36,.95), rgba(11,14,36,.62) 40%, rgba(11,14,36,0) 78%)}
/* Which day it is on, since the row sits above the choice of day. */
.pg-tile-when{position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:rgba(11,14,36,.72);border:1px solid var(--line);border-radius:100px;padding:4px 10px}
.pg-tile-in{display:block;padding:clamp(14px,2vw,22px);
  text-shadow:0 1px 3px rgba(6,8,24,.85),0 2px 18px rgba(6,8,24,.6)}
.pg-tile-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--marigold);margin-bottom:8px}
.pg-tile-title{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(19px,2.2vw,25px);line-height:1.16;margin-bottom:6px;overflow-wrap:anywhere}
.pg-tile-line{display:block;font-size:14.5px;line-height:1.5;opacity:.86}
@media(max-width:900px){
  .pg-tile{flex-basis:calc((100% - var(--gap)) / 2.15)}
}
@media(max-width:560px){
  .pg-tile{flex-basis:78%;min-height:200px}
  .pg-tile-kicker{font-size:11px;margin-bottom:6px}
  .pg-tile-line{font-size:14px}
}

/* ---------------- the day bar ---------------- */
/* Which day am I looking at, answered at any scroll depth. It parks under the
   masthead, and under the pill nav as well on the widths where the pill goes
   fixed; below 820px the pill scrolls away and the bar takes its place. A
   quiet strip between two hairlines, not a second header. */
.pg-bar{position:sticky;top:calc(var(--hdr,76px) + var(--pill,46px) + 20px);z-index:28;
  background:rgba(11,14,36,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--hdr,76px) + var(--pill,46px) + 20px)}
@media(max-width:820px){
  .pg-bar{top:var(--hdr,64px);scroll-margin-top:var(--hdr,64px)}
}
.pg-bar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-block:9px}
.pg-bar-now{margin:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pg-bar-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2)}
.pg-bar-date{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.2;
  color:var(--marigold)}
.pg-bar-word{font-size:14px;color:var(--ink-2)}
/* The four chapters, reachable from anywhere on the page. */
.pg-bar-jump{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);
  min-width:0;overflow-x:auto;scrollbar-width:none}
.pg-bar-jump::-webkit-scrollbar{display:none}
.pg-bar-jump a{font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none;
  white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:1px}
.pg-bar-jump a:hover{color:var(--ink);border-bottom-color:var(--marigold)}
.pg-bar-jump a:focus-visible{outline:2px solid var(--marigold);outline-offset:3px}
.pg-bar-days{display:flex;gap:8px;flex:none}
.pg-bar-pill{font-size:12.5px;font-weight:700;border-radius:100px;padding:6px 14px;
  border:1px solid var(--line);color:var(--ink);text-decoration:none;white-space:nowrap}
.pg-bar-pill:hover{border-color:var(--marigold)}
.pg-bar-pill.is-here{background:var(--marigold);border-color:var(--marigold);color:#1A1000}
/* On a phone the shortcuts drop to a line of their own and scroll sideways
   rather than wrapping. The second row comes from flex order and a full-width
   basis, so the markup is the same at every width. */
@media(max-width:820px){
  .pg-bar-in{gap:7px 10px}
  .pg-bar-now{order:1}
  .pg-bar-days{order:2}
  .pg-bar-jump{order:3;flex-basis:100%;gap:16px;
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
}
@media(max-width:560px){
  .pg-bar-in{padding-block:8px}
  .pg-bar-date{font-size:16.5px}
  /* The date and the two pills share one line at this width only once the
     label and the day word give up their room. The filled pill and the
     marigold date already say which day you are on. */
  .pg-bar-label,.pg-bar-word{display:none}
  .pg-bar-pill{font-size:12px;padding:5px 11px}
  .pg-bar-jump a{font-size:13px}
}
@media(max-width:360px){
  .pg-bar-date{font-size:15px}
  .pg-bar-pill{padding:5px 9px}
}

/* ---------------- chapters ---------------- */
/* A chapter is a section like any other on the site: a small tracked label,
   a heading at the site's h2 size, a line under it, then cards. With a
   photograph the heading sits on it, full bleed, the way the Atomium band
   does on the landing page. Without one there is simply no band. */
/* Each chapter has a ground of its own, taken from its photograph: the blue
   of the daytime sky, the red of the stage, the gold of the evening haze. All
   three are kept as dark as the night ground, so the cards and the type stay
   exactly what they are everywhere else on the site and only the hue turns.
   The colour lives here and nowhere else: none of it is in the markup or the
   data. --ch is also what the photograph fades into at the foot of the band. */
.pg-ch{--ch:var(--night);padding-top:clamp(52px,8vw,96px);padding-bottom:clamp(44px,6.5vw,80px);
  background:linear-gradient(180deg, var(--ch), var(--ch2,var(--ch)))}
.pg-ch:has(> .pg-band.has-photo){padding-top:0}
#chapter-welcome{--ch:#0E2B40;--ch2:#0B1F33}
#chapter-heritage{--ch:#3A0C18;--ch2:#260A19}
#chapter-colours{--ch:#30260A;--ch2:#211A0B}
.pg-band{position:relative;isolation:isolate}
.pg-band.has-photo{display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(260px,34vw,420px)}
.pg-band-img{position:absolute;inset:0;z-index:-2}
.pg-band-img img{width:100%;height:100%;object-fit:cover}
.pg-band.has-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  /* Dark only where the words are. The first pass dimmed the whole frame and
     the photograph, which is the point of the band, barely showed. */
  background:linear-gradient(to top, rgba(11,14,36,.94), rgba(11,14,36,.62) 34%, rgba(11,14,36,0) 72%)}
/* The same fade, into the chapter's own ground instead of the night. */
@supports (background:color-mix(in srgb, red 50%, transparent)){
  .pg-ch .pg-band.has-photo::after{background:linear-gradient(to top, var(--ch),
    color-mix(in srgb, var(--ch) 64%, transparent) 34%, transparent 72%)}
}
/* On a phone the words climb higher up the photograph, so the fade does too. */
@media(max-width:760px){
  @supports (background:color-mix(in srgb, red 50%, transparent)){
    .pg-ch .pg-band.has-photo::after{background:linear-gradient(to top, var(--ch),
      color-mix(in srgb, var(--ch) 50%, transparent) 40%, transparent 80%)}
  }
}
.pg-band.has-photo .pg-band-in{padding-block:clamp(22px,3vw,36px);
  text-shadow:0 1px 3px rgba(6,8,24,.85),0 2px 22px rgba(6,8,24,.7)}
/* The site's kicker. The day leads it, in ink, so every chapter says which
   day it belongs to without a pill. */
.pg-band-label{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--marigold)}
.pg-band-day{color:var(--ink)}
.pg-band-hi{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.35;
  color:var(--marigold);margin:6px 0 0}
/* The site's h2, to the pixel. */
.pg-band-h{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.6vw,3.2rem);color:var(--ink);margin:0}
.pg-band-promise{margin:12px 0 0;font-size:clamp(1.02rem,2vw,1.16rem);line-height:1.6;
  color:var(--ink-2);max-width:42rem}
@media(max-width:760px){
  .pg-band-label{letter-spacing:.16em}
  .pg-band-hi{font-size:19px}
}

/* A jump has to clear the masthead, the pill and the day bar, or the chapter
   title it was aimed at lands underneath them. */
.page-programme section[id]{scroll-margin-top:calc(var(--hdr,76px) + var(--pill,46px) + 20px + 40px)}
@media(max-width:820px){
  .page-programme section[id]{scroll-margin-top:calc(var(--hdr,64px) + 70px)}
}

.pg-body{padding-top:clamp(22px,3vw,34px)}
/* auto-fill, not auto-fit: a chapter with two acts keeps the same card width
   as a chapter with eight, instead of two cards stretched across the page. */
.pg-acts{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.pg-act,.pg-t2b-card{min-width:0}
/* The partners card. */
.pg-act{display:flex;flex-direction:column;background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:18px;padding:14px 14px 18px}
/* The photograph leads the card, as it does on the party cards below: wide,
   on top, the same shape on every card so a row reads as a row. */
.pg-act-img,.pg-act-ph{flex:none;width:100%;aspect-ratio:16/10;border-radius:12px;
  overflow:hidden;margin-bottom:14px}
.pg-act-img img{width:100%;height:100%;object-fit:cover}
/* No photograph yet: a lamp on a warm ground, so the card keeps its shape and
   the gap reads as a choice rather than a hole. */
.pg-act-ph{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 70% 80% at 50% 62%, rgba(232,163,59,.22), transparent 70%),
    rgba(255,255,255,.03);border:1px solid var(--line)}
.pg-act-ph svg{width:44px;height:44px;opacity:.9}
/* On a phone the cards stack one per row, so a card with no photograph is
   simply a shorter card. */
@media(max-width:600px){.pg-act-ph{display:none}}
.pg-act-body{min-width:0}
.pg-act-tag{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--marigold)}
/* overflow-wrap because the thumbnail takes 86px out of the card the moment a
   photograph exists, and the Dutch "Conservatoriumconcert" is twenty one
   letters with nowhere to break. It fitted while the cards were text only and
   ran past the edge as soon as the first act photo landed. */
.pg-act-name{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:20px;
  line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.pg-act-line{margin:0;font-size:15px;line-height:1.6;color:var(--ink);opacity:.82;
  overflow-wrap:anywhere}
.pg-act-only{margin:12px 0 0;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.pg-act-only::before{content:"";display:inline-block;width:6px;height:6px;
  background:var(--marigold);transform:rotate(45deg);margin-right:8px;vertical-align:1px}

/* ---------------- the featured artist ---------------- */
/* The partners page's feature card, with a marigold hairline: the one act of
   the day that is set apart. */
.pg-feat{display:grid;grid-template-columns:minmax(180px,250px) 1fr;gap:clamp(20px,4vw,48px);
  align-items:center;background:rgba(232,163,59,.07);border:1px solid rgba(232,163,59,.55);
  border-radius:18px;padding:clamp(20px,3.5vw,36px);margin-bottom:clamp(12px,1.6vw,18px)}
.pg-feat-img{aspect-ratio:4/5;border-radius:12px;overflow:hidden}
.pg-feat-img img{width:100%;height:100%;object-fit:cover}
.pg-feat-pills{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase}
.pg-pill-gold{color:var(--marigold)}
.pg-pill-ink{color:var(--ink-2)}
.pg-pill-ink::before{content:"\00B7";margin:0 .6em}
.pg-feat-hi{font-family:var(--display);font-weight:400;font-size:20px;line-height:1;
  color:var(--marigold);margin-left:.35em}
.pg-feat-name{font-family:var(--display);font-weight:400;line-height:1.1;
  font-size:clamp(26px,3.6vw,38px);color:var(--ink);margin:0 0 6px}
.pg-feat-title{margin:0 0 12px;font-size:16.5px;font-weight:600;color:var(--ember)}
.pg-feat-line{margin:0;font-size:16.5px;line-height:1.62;color:var(--ink);opacity:.84;max-width:62ch}
.pg-feat-bio{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink);opacity:.8;max-width:62ch}
/* Without a photograph the block is one column, so the empty track does not
   open a hole beside the name. */
.pg-feat:not(:has(.pg-feat-img)){grid-template-columns:1fr}
@media(max-width:760px){
  .pg-feat{grid-template-columns:1fr}
  .pg-feat-img{aspect-ratio:16/10}
}

/* ---------------- chapter four ---------------- */
/* The finale, and the one place this page is allowed to be louder than the
   rest of the site: a marigold rule, a pool of warm light of the kind the
   sign-up section has, and a title one step above the other chapters. It
   still stays under the landing page's own h1. */
.pg-t2b{--ch:var(--night);padding-block:clamp(52px,8vw,96px);
  border-top:1px solid rgba(232,163,59,.4);border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 460px at 16% 0%, rgba(232,163,59,.17), transparent 66%),
    radial-gradient(800px 520px at 92% 24%, rgba(126,44,92,.34), transparent 62%),
    rgba(11,14,36,.5)}
.pg-t2b:has(.pg-band.has-photo){padding-top:0}
.pg-t2b .pg-band.has-photo{min-height:clamp(340px,46vw,560px)}
.pg-band-kicker{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2.6vw,28px);line-height:1.2;color:var(--marigold)}
.pg-t2b .pg-band-h{font-size:clamp(1.7rem,8.6vw,4.75rem);line-height:1.04;
  /* One long token: at 320px it must be allowed to break rather than push the
     page sideways. */
  overflow-wrap:anywhere}
/* The 2 in Ticket2Bollywood, in the accent colour, so the name reads as a mark. */
.pg-t2b-2{color:var(--marigold)}
.pg-t2b-intro{margin:0 0 26px;font-size:clamp(1.02rem,2vw,1.16rem);line-height:1.62;
  color:var(--ink);opacity:.86;max-width:60ch}
.pg-t2b-cards{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.pg-t2b-card{background:rgba(255,255,255,.045);border:1px solid var(--line);
  border-radius:18px;overflow:hidden}
.pg-t2b-card.is-headline{border-color:var(--marigold);background:rgba(232,163,59,.11)}
/* The party cards carry their photo edge to edge, so the stand-in does too. */
.pg-t2b-ph .pg-act-ph{aspect-ratio:auto;height:150px;margin:0;border-radius:0;
  border-width:0 0 1px}
.pg-t2b-img{height:150px}
.pg-t2b-img img{width:100%;height:150px;object-fit:cover}
.pg-t2b-body{padding:clamp(16px,2vw,24px)}
.pg-t2b-step{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--marigold)}
.pg-t2b-name{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.15;
  margin:0 0 4px;color:var(--ink)}
.pg-t2b-sub{margin:0 0 8px;font-size:14.5px;font-weight:600;color:var(--ember)}
.pg-t2b-line{margin:0;font-size:15px;line-height:1.6;color:var(--ink);opacity:.82}

.pg-swap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:clamp(26px,4vw,44px);padding-top:22px;
  border-top:1px solid var(--line)}
.pg-swap-was{margin:0;font-size:16.5px;color:var(--ink);opacity:.86}
.pg-swap-cta{flex:none;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--marigold);border-radius:100px;padding:12px 24px;
  color:var(--marigold);text-decoration:none}
.pg-swap-cta:hover{background:var(--marigold);color:#1A1000}

/* ---------------- tickets and the strip under them ---------------- */
.pg-ticket{padding-block:clamp(56px,8vw,96px) clamp(40px,6vw,64px)}
.pg-ticket-h{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.6vw,3.2rem);color:var(--ink);margin:0 0 14px;max-width:20ch}
.pg-ticket-note{margin:0 0 24px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
/* The partners call to action. */
.pg-ticket-cta{display:inline-block;background:var(--marigold);color:#1A1000;font-weight:700;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:100px;padding:13px 26px;text-decoration:none}
.pg-ticket-cta:hover{background:var(--ember)}

.pg-between{padding-block:0 clamp(56px,8vw,96px)}
.pg-between-h{margin:0 0 20px;padding-bottom:10px;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--marigold)}
.pg-between-row{display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.pg-between-item{min-width:0;background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:18px;padding:clamp(16px,2vw,22px)}
.pg-between-t{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:21px;
  line-height:1.18;color:var(--marigold)}
.pg-between-l{margin:0;font-size:15px;line-height:1.6;color:var(--ink);opacity:.82}
@media(max-width:560px){.pg-between-row{grid-template-columns:1fr 1fr}}
/* The small print: the programme can still move. */
.pg-fine{margin:clamp(28px,4vw,44px) 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-3);
  text-align:center}

@media(prefers-reduced-motion:reduce){
  .pg-day,.pg-day-img,.pg-tile{transition:none}
  .pg-day:hover,.pg-tile:hover{transform:none}
}

/* ------- the strip above the footer on the landing page ------- */
.p-strip{border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.p-strip-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
  padding-block:22px;text-decoration:none}
.p-strip-label{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);opacity:.55}
.p-strip-logos{display:flex;align-items:center;gap:clamp(18px,3.2vw,38px);flex-wrap:wrap}
.p-strip-mark{display:inline-flex;align-items:center;justify-content:center;
  filter:grayscale(1);opacity:.7;transition:filter .22s ease,opacity .22s ease}
.p-strip-mark.is-card{background:#fff;border-radius:8px;padding:6px 10px}
.p-strip-img{height:34px;width:auto;max-width:132px;object-fit:contain;display:block}
.p-strip-in:hover .p-strip-mark,.p-strip-in:focus-visible .p-strip-mark{filter:none;opacity:1}
.p-strip-in:focus-visible{outline:3px solid var(--marigold);outline-offset:-3px}
@media(max-width:560px){
  .p-strip-in{gap:14px;padding-block:18px}
  .p-strip-img{height:26px;max-width:104px}
  .p-strip-mark.is-card{padding:5px 8px}
}
@media(prefers-reduced-motion:reduce){
  .p-mark,.p-strip-mark,.p-name,.n-title{transition:none}
  .p-mark:hover{transform:none}
}