/* ==========================================================================
   DISCOVR DJ HOUSE, the inner pages (programme, speakers, play, party). The
   home keeps its own stylesheet inside index.html; nav.css is shared by all.
   SYSTEM. 10px unit for margins, gaps and radii. Black #101010 page, nothing
   boxed except the hero, the photos, the fields, the rows and the ticket.
   PTDJA Type (rounded Benzin, Medium) for the typographic compositions, Geist Mono
   for every other word. Small type is small: 11 to 14px, uppercase.
   ========================================================================== */
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PTDJA Type";src:url("../fonts/PTDJA_Type-Medium-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --u:10px;
  --bg:#101010;
  --ink:#101010;
  --white:#FAFAFA;
  --grey:#7E7E7E;
  --dim:#3A3A3A;
  --field:#202020;
  --panel:#171717;
  --fline:#404040;
  --ring:#3A3A3A;
  --yellow:#F6E820;
  --ade:#FFFF07;
  --wa:#25D366;
  --red:#E5261F;
  --fd:"PTDJA Type","Arial Narrow",Arial,sans-serif;
  --fm:"Geist Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --glide:cubic-bezier(.25,.46,.45,.94);   /* the card hover: a soft start and a long, even landing */
  --sec:100px;
}
@media (min-width:900px){:root{--sec:150px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--white);font-family:var(--fm);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
p,h1,h2,h3{margin:0}
h1,h2,h3{font-weight:inherit}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:0}
button{background:none;border:0;padding:0;cursor:pointer;text-align:left}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:3px}

.frame{padding:var(--u);max-width:1600px;margin:0 auto}
.sec{padding-top:var(--sec)}

/* Small type */
.mono{font-family:var(--fm);font-size:13px;line-height:1.45;text-transform:uppercase}
.xs{font-size:11px;letter-spacing:.02em}
.grey{color:var(--grey)}
.yel{color:var(--yellow)}
.sq{display:inline-block;width:8px;height:8px;background:currentColor;vertical-align:baseline;flex:none}
.sq--blink{animation:blink 1.1s steps(2,end) infinite}
@keyframes blink{to{opacity:0}}

/* Section label: 01/ WHAT HAPPENS */
.lab{display:flex;align-items:flex-start;gap:14px;font-size:13px;text-transform:uppercase;line-height:1.2}
.lab b{font-weight:400;font-size:16px;line-height:1;display:grid}
.lab b small{font-size:13px;line-height:.9;color:var(--grey)}

/* Paragraph with the square in front */
.para{display:grid;grid-template-columns:8px 1fr;gap:0 26px;font-size:14px;line-height:1.5;text-transform:none;max-width:56ch}
.para .sq{margin-top:5px}
.para a{color:var(--white);text-decoration:underline;text-underline-offset:2px}
.para a:hover{color:var(--yellow)}
@media (min-width:900px){.para{font-size:16px;line-height:1.45}}

/* Chips */
.chip{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:34px;padding:0 14px;border-radius:5px;border:.5px solid var(--fline);background:var(--field);color:var(--white);font-size:12px;font-weight:500;text-transform:uppercase;line-height:1;text-decoration:none;white-space:nowrap;transition:box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
@media (hover:hover){.chip:hover{background:var(--white);color:var(--ink);border-color:var(--white)}}
.chip .ar{transition:transform .25s var(--ease)}
@media (hover:hover){.chip:hover .ar{transform:translateX(3px)}}
.chip--y{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.chip--w{background:var(--white);color:var(--ink);border-color:var(--white)}
.chip--big{height:46px;padding:0 18px;font-size:13px}
.chip--wide{width:100%}
.chip svg.ico{width:18px;height:18px;flex:none}
.chip--line{display:inline-flex;align-items:center;gap:8px;height:auto;padding:0;border:0;background:none;color:var(--white);font-size:12px;font-weight:500;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.chip--line:hover{background:none;color:var(--yellow)}}

/* ==========================================================================
   COMPOSITIONS. Big words in PTDJA Type, small numbers, arrow glyphs, each row
   laid out on purpose. Font size follows the screen width, the widest row
   decides (script). A word in yellow is the one the copy stresses.
   ========================================================================== */
.tw{font-family:var(--fd);font-weight:500;text-transform:uppercase;line-height:.92;letter-spacing:0;font-size:clamp(30px,9.2vw,112px);display:grid;gap:.02em}
.tw__row{display:flex;align-items:flex-start;gap:.3em}
.tw__row--sb{justify-content:space-between}
.tw__row--r{justify-content:flex-end}
.tw__row--in{padding-left:1.4em}
.tw__row--in2{padding-left:.6em}
.tw__n{font-family:var(--fm);font-size:11px;line-height:1;letter-spacing:.02em;padding-top:.14em;flex:none}
/* the clip that hides the letters before they rise is given room above and below the line box, so
   the tops and the feet of the capitals are never shaved; the negative margins keep the layout */
.tw__w{display:inline-flex;align-items:center;gap:.06em;white-space:nowrap;overflow:hidden;padding:.2em 0 .12em;margin:-.2em 0 -.12em;text-decoration:none;color:inherit;flex:none;transition:color .5s ease}
.tw__w > span{display:inline-block;transform:translateY(130%);transition:transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.tw__w svg{width:.76em;height:.76em;flex:none;transform:translateY(130%);transition:transform .9s var(--ease),color .5s ease;transition-delay:calc(var(--i,0) * 90ms)}
.in .tw__w > span,.in .tw__w svg{transform:none}
html:not(.js) .tw__w > span,html:not(.js) .tw__w svg{transform:none}
.tw svg{stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:square}
/* The display face is PTDJA Type, Benzin with every corner rounded in the font itself, so no rounding filter is applied at render time */
.tw__w.on,.tw__w.y{color:var(--yellow)}
.four .tw__w{transition:color .12s steps(2,end)}
.tw__w.gl{animation:wglitch .38s steps(5,end) both}
@keyframes wglitch{
  0%{clip-path:inset(0);transform:none}
  20%{clip-path:inset(10% 0 55% 0);transform:translateX(-10px)}
  40%{clip-path:inset(45% 0 10% 0);transform:translateX(12px) skewX(-8deg)}
  60%{clip-path:inset(0 0 65% 0);transform:translateX(-6px)}
  80%{clip-path:inset(30% 0 30% 0);transform:translateX(8px)}
  100%{clip-path:inset(0);transform:none}
}

/* ==========================================================================
   PAGE HEAD. The title as a composition, the copy under it with the square.
   ========================================================================== */
.pg{margin-top:50px;display:grid;gap:24px}
.pg .para{margin-top:6px}
@media (min-width:900px){.pg{margin-top:80px;grid-template-columns:1fr 1fr;gap:40px;align-items:end}.pg .para{margin:0 0 .3em}}
/* THE LANDING HERO (Play). The image fills the screen inside the 10px frame, 10px corners, over black,
   at .5 opacity so it reads darker; it fades and settles in once. A soft shade at the foot keeps the
   title legible on the pale stone. The header rides on it, the lockup and the title at the lower left. */
.lh{position:relative;height:calc(100vh - 20px);height:calc(100svh - 20px);min-height:520px;border-radius:var(--u);overflow:hidden;background:#000;isolation:isolate}
.lh picture,.lh__img{position:absolute;inset:0;width:100%;height:100%}
.lh__img{object-fit:cover;opacity:.5;animation:lhin 1.6s var(--ease) both}
@keyframes lhin{from{opacity:0;transform:scale(1.04)}to{opacity:.5;transform:none}}
.lh::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 45%)}
.lh .hdr.hdr--page{position:absolute;z-index:3;top:var(--u);left:var(--u);right:var(--u);padding:0}
.lh__in{position:absolute;z-index:2;left:16px;right:16px;bottom:28px;display:grid;justify-items:start;gap:22px}
.lh__logo{width:clamp(150px,44vw,300px);height:auto;color:var(--yellow);fill:currentColor}
.lh__t{font-size:clamp(28px,8vw,84px);color:var(--white)}
.lh__p{margin-top:-4px;color:var(--white)}
.pg--after{margin-top:56px}
@media (min-width:900px){
  .lh .hdr.hdr--page{top:20px;left:20px;right:20px}
  .lh__in{left:32px;right:32px;bottom:max(40px,11vh);gap:30px}
  .pg--after{margin-top:90px}
}
@media (prefers-reduced-motion:reduce){.lh__img{animation:none;opacity:.5}}

/* The two landings, Play & Release and Party with us: one column on every screen. A small line
   in the mono over the title (what and when), the title with its rows flush left, the copy under
   it at the size of the card copy. */
.pg--lp{grid-template-columns:1fr;gap:26px;align-items:start;margin-top:64px}
.pg__eb{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--grey);line-height:1.3}
.pg__eb span{display:inline-flex;align-items:center;gap:10px}
.pg__eb .sq{width:6px;height:6px;background:var(--yellow)}
.pg__p{font-size:clamp(15px,4.2vw,18px);font-weight:500;text-transform:uppercase;line-height:1.6;letter-spacing:0;max-width:34em;margin-top:10px}
.pg__p .mk{display:inline;background:var(--yellow);color:var(--ink);padding:.05em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pg__p.pg__p--s{font-size:13px}
/* The slots, two panels right under the hero: Academy students and non students, Geist Mono only.
   The label line (what the slots are for, and of 50+ on the right), the count, and one small square per
   slot, which light up one after another when the panel comes in. Side by side from 720px. */
.sl{display:grid;gap:10px;margin-top:10px}
.sl__h,.sl__b{background:var(--panel);border-radius:var(--u);padding:15px}
.sl__h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px}
.sl__t{display:inline-flex;align-items:center;gap:10px;font-size:clamp(18px,5.4vw,24px);font-weight:500;text-transform:uppercase;line-height:1.1;color:var(--white)}
.sl__t .sq{width:6px;height:6px;background:var(--yellow)}
.sl__t b{font-weight:500;color:var(--yellow)}
.sl__s{font-size:11px;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;color:var(--grey)}
.sl__b{display:grid;gap:14px;align-content:start}
.sl__n{font-size:clamp(18px,5.4vw,24px);font-weight:500;text-transform:uppercase;line-height:1.15;color:var(--white)}
.sl__n b{font-weight:500;color:var(--yellow)}
.sl__w{display:block}
.sl__cells{display:flex;flex-wrap:wrap;gap:4px;max-width:calc(20 * 12px)}
.sl__cells i{width:8px;height:8px;border-radius:1px;background:var(--yellow);transition:opacity .3s ease,transform .3s var(--ease);transition-delay:calc(var(--k) * 18ms)}
/* Non students in white, numbers and squares, so the two groups never read the same */
.sl__b--ns .sl__n b{color:var(--white)}
.sl__b--ns .sl__cells i{background:var(--white)}
html.js .sl__b:not(.in) .sl__cells i{opacity:.12;transform:scale(.6)}
@media (min-width:720px){.sl{grid-template-columns:1fr 1fr}.sl__h{grid-column:1/-1}}
@media (min-width:900px){.sl__h,.sl__b{padding:20px}.sl__b{gap:18px}.sl__s{font-size:12px}.sl__cells{gap:5px;max-width:calc(20 * 15px)}.sl__cells i{width:10px;height:10px}}
@media (min-width:900px){.pg--lp{grid-template-columns:1fr;gap:34px;margin-top:120px}.pg__p{margin-top:14px;font-size:18px}.pg__p.pg__p--s{font-size:14px}}

/* A section head inside a page */
.sh{display:grid;gap:22px}
@media (min-width:900px){.sh{grid-template-columns:1fr 1fr;gap:40px;align-items:end}.sh .para{margin-bottom:.3em}}

/* ==========================================================================
   THE PROGRAMME. Mobile first and on one axis: every slot has its time in a
   column of its own on the left (start in yellow, end in grey under it) and
   its panel on the right (type, title, credits, abstract), so the eye reads
   the times straight down and the panels straight down. The Ten in Ten DJ
   sets are slim yellow tinted bands on the same axis. Each day opens on a
   yellow band. The filters are radio buttons read by :has(), no script. The
   Calendar is a box in the sticky column on a wide screen and a bar always at
   the foot of the screen on the phone, over a dark blurred fade so it stands
   off the page (site.js lights the day on screen). On the phone a long
   abstract waits behind Read more.
   ========================================================================== */
/* the sentence sits close under the title */
.page--prog .pg--lp{gap:18px}
.page--prog .pg__p{margin-top:0}
.prog{display:grid;gap:44px;margin-top:44px}
.prog__side{display:grid;gap:var(--u);align-content:start;min-width:0}
.prog__days{display:grid;gap:52px;min-width:0}

/* one slot: the time column, then the panel */
.tl{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.tl__r{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:start}
.tl__k{display:grid;gap:6px;padding-top:16px;font-size:12.5px;font-weight:500;line-height:1;letter-spacing:0;color:var(--yellow);white-space:nowrap}
.tl__k time + time{font-weight:400;color:var(--grey)}   /* start and end the same size, every slot alike */
.tl__card{min-width:0;padding:14px;border-radius:var(--u);background:var(--panel)}
.tl__t,.tl__m{min-width:0}
.tl__tg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
.tl__y{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;background:#262626;font-size:10px;letter-spacing:.05em;text-transform:uppercase;line-height:1;color:#D2D2D2}
/* the wellness track's curator: an outlined pill beside the type, no logo */
.tl__cur{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;border:.5px solid #4A4A4A;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:#BDBDBD;white-space:nowrap}
.tl__tg--every{margin:9px 0 0}
.tl__r--hi .tl__y{background:var(--yellow);color:var(--ink)}
.tl__h{font-family:var(--fm);font-size:14px;font-weight:500;text-transform:uppercase;line-height:1.3;letter-spacing:0;color:var(--white);margin:0}
/* the credits: a small grey label, then the names, light, with what is in brackets grey */
.tl__w{display:grid;gap:5px;margin-top:10px;font-size:12.5px;line-height:1.5}
.tl__w p{display:grid;gap:1px}   /* the phone: the label over the names, so the names get the full width */
.tl__w b{padding-top:2px;font-size:10px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.tl__nm{color:#E2E2E2}
.tl__nm span{color:var(--grey)}
.tl__s{margin-top:7px;font-size:12px;line-height:1.5;color:var(--grey)}
.tl__ab{margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--grey);max-width:60ch}
/* the Ten in Ten sets: a slim band tinted yellow on the same axis, the DJ light, or grey while to be selected */
.tl__r--i .tl__k{padding-top:11px}
.tl__r--i .tl__card{padding:10px 14px;background:rgba(246,232,32,.075)}
.tl__i{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;font-size:12px;line-height:1.35}
.tl__i b{font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--yellow)}
.tl__dj{color:#E2E2E2}
.tl__dj--tbc{color:#9A9A9A}
/* Read more: only on the phone and only with the script; a boxed button, the plus turns into a cross */
.tl__more{display:none;align-items:center;gap:10px;height:38px;padding:0 14px;margin-top:14px;border-radius:7px;background:#262626;font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1;color:var(--white);transition:background-color .3s var(--glide)}
.tl__more:active{background:#333}
.tl__more i{position:relative;width:9px;height:9px;flex:none;transition:transform .5s var(--glide)}
.tl__more i::before,.tl__more i::after{content:"";position:absolute;left:0;top:4px;width:9px;height:1.5px;background:var(--yellow)}
.tl__more i::after{transform:rotate(90deg)}
.tl__r.is-open .tl__more i{transform:rotate(45deg)}
@keyframes abin{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
@media (max-width:899px){
  html.js .tl__r--long .tl__more{display:inline-flex}
  html.js .tl__r--long:not(.is-open) .tl__ab{display:none}
  html.js .tl__r--long.is-open .tl__ab{animation:abin .5s var(--glide) both}
}

/* the side boxes: a label row on top (Calendar, Filter, Every day) */
.pidx__k,.every__k,.fbox__k{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;color:var(--grey)}
.pidx__k > span:first-child,.every__k > span:first-child,.fbox__k > span:first-child{display:inline-flex;align-items:center;gap:10px;color:var(--white)}
.pidx__k .sq,.every__k .sq,.fbox__k .sq{width:6px;height:6px;background:var(--yellow)}
.every{background:var(--panel);border-radius:var(--u);padding:15px}
.every__k{padding-bottom:6px}
.tl--every{gap:0}
.tl--every .tl__r{grid-template-columns:66px minmax(0,1fr);gap:14px;padding:12px 0 2px}
.tl--every .tl__k{padding-top:0;font-size:13px;text-transform:uppercase}

/* the filters: chips in one row that scrolls sideways on the phone; the chosen one is yellow */
.fbox{min-width:0}
.fbox__k{padding:0 0 10px}
.flt{display:flex;gap:6px;overflow-x:auto;margin:0 calc(-1 * var(--u));padding:0 var(--u) 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.flt::-webkit-scrollbar{display:none}
.flt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.flt label{flex:none;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px;border-radius:7px;background:var(--panel);font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--white);cursor:pointer;transition:background-color .35s var(--glide),color .35s var(--glide)}
.flt label small{font-size:10px;font-weight:400;color:var(--grey);transition:color .35s var(--glide)}
.flt input:checked + label{background:var(--yellow);color:var(--ink)}
.flt input:checked + label small{color:rgba(16,16,16,.6)}
.flt input:focus-visible + label{outline:1px solid var(--yellow);outline-offset:2px}
@media (hover:hover){.flt input:not(:checked) + label:hover{background:var(--field)}}
/* what the filter hides, and the line for a day it leaves empty */
.prog:has(#flt-wellness:checked) .prog__days .tl__r:not([data-c="wellness"]),
.prog:has(#flt-panel:checked) .prog__days .tl__r:not([data-c="panel"]),
.prog:has(#flt-masterclass:checked) .prog__days .tl__r:not([data-c="masterclass"]),
.prog:has(#flt-workshop:checked) .prog__days .tl__r:not([data-c="workshop"]),
.prog:has(#flt-tenin:checked) .prog__days .tl__r:not([data-c="tenin"]),
.prog:has(#flt-highlight:checked) .prog__days .tl__r:not([data-c="highlight"]){display:none}
.pday__none{display:none;padding:14px 2px 0;font-size:12px;line-height:1.5;color:var(--grey)}
.pday__none span{display:none}
.prog:has(#flt-wellness:checked) .pday:not(:has([data-c="wellness"])) .pday__none,
.prog:has(#flt-panel:checked) .pday:not(:has([data-c="panel"])) .pday__none,
.prog:has(#flt-masterclass:checked) .pday:not(:has([data-c="masterclass"])) .pday__none,
.prog:has(#flt-workshop:checked) .pday:not(:has([data-c="workshop"])) .pday__none,
.prog:has(#flt-tenin:checked) .pday:not(:has([data-c="tenin"])) .pday__none,
.prog:has(#flt-highlight:checked) .pday:not(:has([data-c="highlight"])) .pday__none{display:block}
.prog:has(#flt-wellness:checked) .pday__none [data-n="wellness"],
.prog:has(#flt-panel:checked) .pday__none [data-n="panel"],
.prog:has(#flt-masterclass:checked) .pday__none [data-n="masterclass"],
.prog:has(#flt-workshop:checked) .pday__none [data-n="workshop"],
.prog:has(#flt-tenin:checked) .pday__none [data-n="tenin"],
.prog:has(#flt-highlight:checked) .pday__none [data-n="highlight"]{display:inline}

/* a day opens on a yellow band: Day 01 and the tag on one line, the date under them */
.pday{scroll-margin-top:96px}
body.landing .pday{scroll-margin-top:var(--u)}
.pday__h{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n t" "d d";align-items:end;gap:10px 16px;margin-bottom:8px;padding:14px 15px 16px;border-radius:var(--u);background:var(--yellow);color:var(--ink)}
.pday__n{grid-area:n;font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1.3}
.pday.is-today .pday__n::after{content:"Today";margin-left:10px;padding:2px 6px;border-radius:3px;background:var(--ink);color:var(--yellow)}
.pday__d{grid-area:d;font-family:var(--fd);font-weight:500;text-transform:uppercase;font-size:clamp(22px,6.4vw,34px);line-height:.94;letter-spacing:0}
.pday__t{grid-area:t;font-size:11px;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;text-align:right;opacity:.7}

/* the Calendar. Phone: a bar always at the foot of the screen over a dark blurred fade, the three days
   side by side, the one on screen yellow. z-index 9: over the page, under the cookie banner (iubenda, 10) */
.pidx{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pidx__a{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--white);text-decoration:none;font-weight:500;text-transform:uppercase;line-height:1}
.pidx__n,.pidx__t{color:var(--grey)}
.pidx__scrim{display:none}
@media (max-width:899px){
  .pidx{position:fixed;z-index:9;left:var(--u);right:var(--u);bottom:calc(var(--u) + env(safe-area-inset-bottom,0px));max-width:420px;margin:0 auto;padding:4px;border-radius:var(--u);background:rgba(30,30,30,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:.5px solid #4A4A4A;box-shadow:0 10px 30px rgba(0,0,0,.55)}
  .pidx__scrim{display:block;position:fixed;z-index:8;left:0;right:0;bottom:0;height:calc(96px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,rgba(16,16,16,.92) 40%,rgba(16,16,16,0));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-mask-image:linear-gradient(to top,#000 50%,transparent);mask-image:linear-gradient(to top,#000 50%,transparent);pointer-events:none}
  /* the bar is always on screen: the page ends far enough below it that the footer stays readable */
  .page--prog #main{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .pidx__k{display:none}
  .pidx__a{height:44px;border-radius:7px;font-size:12px;transition:background-color .45s var(--glide),color .45s var(--glide)}
  .pidx__n,.pidx__t{display:none}
  .pidx__a.is-on{background:var(--yellow);color:var(--ink)}
  .pidx__a.is-today .pidx__d::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:middle;background:var(--yellow)}
  .pidx__a.is-today.is-on .pidx__d::after{background:var(--ink)}
}
@media (min-width:640px){
  .tl__r{grid-template-columns:62px minmax(0,1fr);gap:14px}
  .tl__k{padding-top:20px;font-size:14px}
  .tl__card{padding:18px 20px}
  .tl__r--i .tl__k{padding-top:12px}
  .tl__r--i .tl__card{padding:12px 20px}
  .tl__i{font-size:13px}
  .tl__h{font-size:15px}
  .tl__w,.tl__ab{font-size:13px}
  .tl__w p{grid-template-columns:78px minmax(0,1fr);gap:8px}
}
/* Wide screen: Calendar, Filter and Every day as boxes in a sticky column on the left, the days on the right */
@media (min-width:900px){
  .page--prog .pg--lp{gap:22px}
  .prog{grid-template-columns:270px minmax(0,1fr);gap:40px;margin-top:80px}
  .prog__side{position:sticky;top:110px;align-self:start}
  body.landing .prog__side{top:30px}
  body.landing .pday{scroll-margin-top:30px}
  .prog__days{gap:80px}
  .pday{scroll-margin-top:110px}
  .pday__h{margin-bottom:10px;padding:18px 24px 22px}
  .pday__n,.pday__t{font-size:12px}
  .tl{gap:10px}
  .tl__r{grid-template-columns:66px minmax(0,1fr);gap:16px}
  .tl__k{padding-top:24px;font-size:15px}
  .tl__card{padding:22px 24px}
  .tl__r--i .tl__k{padding-top:13px}
  .tl__r--i .tl__card{padding:13px 24px}
  .pidx{grid-template-columns:1fr;gap:2px;padding:15px 8px 8px;border-radius:var(--u);background:var(--panel)}
  .pidx__k{padding:0 7px 10px}
  .pidx__a{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;gap:6px 0;justify-content:stretch;align-items:baseline;padding:12px 10px;border-radius:7px;color:var(--grey);font-size:17px;transition:color .45s var(--glide),background-color .45s var(--glide)}
  .pidx__n{grid-row:1 / 3;font-size:11px;font-weight:400;transition:color .45s var(--glide)}
  .pidx__t{grid-column:2;font-size:11px;font-weight:400;letter-spacing:.02em}
  .pidx__a:hover{color:var(--white)}
  .pidx__a.is-on{color:var(--white);background:var(--field)}
  .pidx__a.is-on .pidx__n{color:var(--yellow)}
  .pidx__a.is-today .pidx__t::after{content:"Today";margin-left:10px;color:var(--yellow)}
  .fbox{padding:15px;border-radius:var(--u);background:var(--panel)}
  .flt{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .flt label{height:32px;padding:0 11px;background:#222}
  @media (hover:hover){.flt input:not(:checked) + label:hover{background:#2C2C2C}}
  .every{padding:15px 15px 13px}
  .tl--every .tl__r{grid-template-columns:62px minmax(0,1fr);gap:12px;padding:12px 0 2px}
  .tl--every .tl__h{font-size:13px}
  .tl--every .tl__s{font-size:12px}
}
/* Wider: each panel reads across, type, title and credits on the left, the abstract on the right */
@media (min-width:1200px){
  .prog{grid-template-columns:300px minmax(0,1fr);gap:50px}

  .prog__days .tl__card .tl__t{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 36px;align-items:start}
  .prog__days .tl__h{font-size:16px}
  .prog__days .tl__ab{margin-top:0;font-size:13.5px}
}

/* ==========================================================================
   SPEAKERS. A rail you swipe on the phone, four to a row on a wide screen.
   ========================================================================== */
.rail{display:flex;gap:var(--u);overflow-x:auto;scroll-snap-type:x mandatory;margin:34px calc(-1 * var(--u)) 0;padding:0 var(--u) 6px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.spk{flex:0 0 62vw;scroll-snap-align:start;display:grid;gap:10px;align-content:start;min-width:0}
.spk__ph{margin:0;aspect-ratio:1;border-radius:var(--u);overflow:hidden;background:#1a1a1a;position:relative}
.spk__ph img{width:100%;height:100%;object-fit:cover}
.spk__ph.miss img{display:none}
.spk__ph.miss::after{content:"";position:absolute;left:14px;bottom:14px;width:8px;height:8px;background:var(--yellow)}
.spk b{display:block;font-family:var(--fd);font-weight:500;text-transform:uppercase;font-size:clamp(15px,4.4vw,18px);line-height:.98;letter-spacing:0;margin-top:4px}
.spk span{display:block;font-size:12px;text-transform:uppercase;color:var(--grey);line-height:1.35}
.swipe{margin-top:14px;font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--grey);text-align:right}
@media (min-width:900px){
  .rail{display:grid;grid-template-columns:repeat(4,1fr);margin:50px 0 0;padding:0;overflow:visible;gap:34px var(--u)}
  .spk{flex:none}
  .spk b{font-size:clamp(16px,1.4vw,20px)}
  .swipe{display:none}
}

/* ==========================================================================
   CARDS. Play & Release and Party with us. A photo and a dark panel, 10px apart,
   both with 10px corners. Inside the panel 15px of room: the number and the day
   in the mono at the top, the title in PTDJA Type at 32px 15px under it, the
   copy in grey at 18px 40px under that, the call to action at the foot. On Play the photo is always the left column: 285 by 375 from 720px,
   a narrower column with everything scaled down under that (Marco wants the same
   card, small, on the phone too). On Party the photo sits on top and the three
   panels share one height, so the three calls to action land on the same line;
   on the phone they stack. The panel has no stroke. On a wide screen the call to action rests grey and turns yellow while the card is under the pointer, and on Play the photo column widens by 10px, 285 to 295, on a slow symmetric ease, as the panel gives way; on the phone the call to action is always yellow.
   ========================================================================== */
.pcs,.pts{display:grid;gap:20px;margin-top:64px;grid-auto-rows:1fr}
.pc,.pt{display:grid;gap:var(--u);min-width:0}
.pc{grid-template-columns:38% 1fr;gap:8px}
.pc__ph,.pt__ph{position:relative;margin:0;border-radius:var(--u);overflow:hidden;background:#1A1A1A}
.pt__ph{aspect-ratio:4/3}
.pc__ph img,.pt__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc__b,.pt__b{background:var(--panel);border-radius:var(--u);padding:15px;display:flex;flex-direction:column;min-width:0}
.pc__k{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;line-height:1;text-transform:uppercase;color:var(--grey)}
.pc__k time{color:var(--yellow);font-weight:500;white-space:nowrap}
.pc__t{font-family:var(--fd);font-weight:500;text-transform:uppercase;font-size:24px;line-height:1.05;margin-top:15px}
.pc__p{font-size:15px;line-height:1.6;color:var(--grey);margin-top:28px;max-width:60ch}
/* Party: one night is the card (photo and panel) over the box that says how to get in. Under 900px the
   photo sits left of the panel and the box runs full width under both; from 900 the three nights stand in
   three columns on one subgrid (see below), so photos, panels and boxes line up across the row. */
.pt{grid-template-columns:38% 1fr;grid-template-rows:1fr auto;gap:8px}
.pt__how{grid-column:1/-1}
.pts{row-gap:32px}   /* more room between two nights than between a card and its own box */
/* number, tag and date on one line; the tag is an outlined pill, Free in yellow */
.pt .pc__k{align-items:center}
.pt__tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-right:auto;border-radius:4px;border:.5px solid #4A4A4A;font-size:9.5px;letter-spacing:.04em;line-height:1;color:#BDBDBD;white-space:nowrap}
.pt__tag--free{border-color:rgba(246,232,32,.5);color:var(--yellow)}
/* the facts: a small grey label over the value, beside it from 720 */
.pt__f{display:grid;gap:12px;margin:22px 0 0}
.pt__f div{display:grid;gap:3px;min-width:0}
.pt__f dt{font-size:10px;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;color:var(--grey)}
.pt__f dd{margin:0;font-size:14px;line-height:1.45;color:#E2E2E2}
/* the nhow student code over Get tickets: the code selects in one tap, Copy (with the script) puts it on
   the clipboard */
.pt__code{display:grid;gap:6px;justify-items:start}
.pt__code p{font-size:10px;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;color:var(--grey)}
.pt__code span{display:inline-flex;align-items:center;gap:4px;padding:3px;border-radius:6px;background:#0C0C0C}
.pt__code code{padding:0 8px;font-family:var(--fm);font-size:13px;font-weight:500;letter-spacing:.02em;line-height:30px;color:var(--yellow);-webkit-user-select:all;user-select:all}
.pt__cp{display:none;align-items:center;height:30px;padding:0 11px;border:0;border-radius:4px;background:#262626;font-family:var(--fm);font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--white);cursor:pointer;transition:background-color .35s var(--glide),color .35s var(--glide)}
html.js .pt__cp{display:inline-flex}
.pt__cp.ok{background:var(--yellow);color:var(--ink)}
.pt__st b{font-weight:500;color:var(--yellow)}
/* how to get in: a label, then the steps numbered in small squares */
.pt__how{background:var(--panel);border-radius:var(--u);padding:15px;min-width:0}
.pt__hk{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;color:var(--grey)}
.pt__hk .sq,.pbuy__k .sq{flex:none;width:6px;height:6px;background:var(--yellow)}
.pt__st{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;counter-reset:st}
.pt__st li{counter-increment:st;display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:baseline;font-size:12.5px;line-height:1.5;color:#BDBDBD}
.pt__st li::before{content:counter(st);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;background:#262626;font-size:10px;font-weight:500;line-height:1;color:var(--yellow)}
/* Before you buy: one box for the whole page, tinted yellow like the Ten in Ten bands, no stroke */
.pbuy{display:grid;gap:14px;margin-top:20px;padding:15px;border-radius:var(--u);background:rgba(246,232,32,.075)}
.pbuy__k{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;color:var(--yellow)}
.pbuy__l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pbuy__l li{position:relative;padding-left:17px;font-size:13px;line-height:1.6;color:#E2E2E2;max-width:70ch}
.pbuy__l li::before{content:"";position:absolute;left:1px;top:.65em;width:5px;height:5px;background:var(--yellow)}
.pbuy__l a,.pt__st a{color:var(--white);text-decoration:underline;text-underline-offset:2px;transition:color .3s var(--glide)}
@media (hover:hover){.pbuy__l a:hover,.pt__st a:hover{color:var(--yellow)}}
.pc__cta{margin-top:auto;padding-top:34px;display:grid;gap:12px;justify-items:start}
.pc__note{font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--grey);line-height:1.4}
.pc__note a{color:var(--white);text-decoration:underline;text-underline-offset:2px;transition:color .3s var(--glide)}
@media (hover:hover){.pc__note a:hover{color:var(--yellow)}}
.chip--xl{height:56px;padding:0 28px;font-size:14px;border-radius:8px;border:0;background:var(--yellow);color:var(--ink)}
/* Under 720px the same card, small: the photo column 38 percent wide, 10px of room in the panel, the
   number at 9px, the title at 14px, the copy at 11px and the chip at 34px */
/* Party under 900px: the same card as Play, photo left and panel right, instead of the photo on top */
@media (max-width:899.98px){
  .pt__ph{aspect-ratio:auto}
}
@media (min-width:720px) and (max-width:899.98px){
  .pt{grid-template-columns:285px 1fr;grid-template-rows:minmax(375px,1fr) auto;gap:var(--u)}
}
@media (max-width:719.98px){
  .pc .pc__b,.pt .pt__b{padding:12px}
  .pc .pc__k,.pt .pc__k{font-size:9px}
  .pc .pc__t,.pt .pc__t{font-size:13px;line-height:1.1;margin-top:12px}
  .pc .pc__p{font-size:10.5px;line-height:1.55;margin-top:12px}
  .pt .pt__tag{height:16px;padding:0 5px;font-size:8px;border-radius:3px}
  .pt__tag-w{display:none}   /* "Guest list" on the phone, where "Student guest list" pushes the date off the panel; the note under the facts says who it is for */
  .pt .pt__f{gap:8px;margin-top:12px}
  .pt .pt__f div{gap:2px}
  .pt .pt__f dt{font-size:8.5px}
  .pt .pt__f dd{font-size:10.5px;line-height:1.5}
  .pt .pt__code{gap:5px}
  .pt .pt__code p{font-size:8.5px}
  .pt .pt__code code{padding:0 6px;font-size:10.5px;line-height:24px}
  .pt .pt__cp{height:24px;padding:0 8px;font-size:9px}
  .pt .pt__how{padding:12px}
  .pt .pt__hk{font-size:9.5px;gap:8px}
  .pt .pt__hk .sq{width:5px;height:5px}
  .pt .pt__st{margin-top:10px;gap:7px}
  .pt .pt__st li{grid-template-columns:18px 1fr;gap:9px;font-size:11.5px}
  .pt .pt__st li::before{width:18px;height:18px;font-size:9.5px}
  .pbuy{padding:12px}
  .pbuy__k{font-size:9.5px;gap:8px}
  .pbuy__l li{font-size:11.5px;padding-left:15px}
  .pc .pc__cta,.pt .pc__cta{padding-top:20px;gap:10px}
  .pt .pc__note{font-size:9px;line-height:1.5}
  .pc .chip--xl,.pt .chip--xl{height:34px;padding:0 14px;font-size:10px;border-radius:6px}
}
/* the narrowest phones (320): a slimmer photo column on Party, so the number, tag and date row and the
   longest call to action keep to the panel */
@media (max-width:359.98px){
  .pt{grid-template-columns:31% 1fr}
  .pt .pc__k{gap:6px}
  .pt .pt__code code{padding:0 5px;font-size:10px}
  .pt .pt__cp{padding:0 6px}
}
@media (min-width:720px){
  .pc{grid-template-columns:285px 1fr;grid-template-rows:minmax(375px,auto);gap:var(--u)}
  .pc__p{margin-top:40px}
  .pt__f div{grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:baseline}
}
@media (min-width:900px){
  .pcs,.pts{margin-top:100px;gap:30px 20px}
  /* three nights, three columns: each article spans three rows of the list (photo, panel, box) on a
     subgrid, so every panel takes the tallest panel's height and the calls to action sit on one line */
  .pts{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}   /* four nights: two by two up to 1199px, four in a row from 1200 */
  .pt{grid-row:span 3;grid-template-columns:none;grid-template-rows:subgrid;gap:var(--u)}
  .pt__how{grid-column:auto;padding:20px 15px}
  .pt__st li{font-size:13px}
  /* the box takes the columns of the cards, so the label starts with the words of the first panel and the
     list with the words of the second */
  .pbuy{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px;padding:20px 0;align-items:baseline}
  .pbuy > *{padding:0 15px}
  .pbuy__l{grid-column:span 1}
  .pbuy__l li{font-size:14px}
}
@media (min-width:1200px){
  .pts{grid-template-columns:repeat(4,1fr)}
  .pbuy{grid-template-columns:repeat(4,1fr)}
  .pbuy__l{grid-column:span 3}
}
@media (hover:hover) and (min-width:900px){
  /* The move under the pointer, without changing any size: nothing is laid out again, so it glides at
     sub pixel precision. The layout gives the photo 295px and the panel what is left; at rest a clip
     shows 285px of the photo, the panel's background reaches 10px further left under its own clip, and
     the words sit 10px to the left. Under the pointer the photo clip opens by 10px, the background clip
     gives way by the same 10px and the words slide back, all on one curve. The date stays put. */
  .pc{grid-template-columns:295px 1fr}
  .pc .pc__ph{clip-path:inset(0 10px 0 0 round var(--u));transition:clip-path .6s var(--glide)}
  .pc .pc__b{background:none;position:relative;isolation:isolate}
  .pc .pc__b::before{content:"";position:absolute;top:0;bottom:0;left:-10px;right:0;z-index:-1;border-radius:var(--u);background:var(--panel);clip-path:inset(0 0 0 0 round var(--u));transition:clip-path .6s var(--glide)}
  .pc .pc__n,.pc .pc__t,.pc .pc__p,.pc .pc__cta{transform:translate3d(-10px,0,0);transition:transform .6s var(--glide)}
  /* the card under the pointer is marked .is-hover by site.js, also while the page scrolls under a still
     pointer (browsers refresh :hover only when the mouse moves); without the script :hover does it */
  html:not(.js) .pc:hover .pc__ph,.pc.is-hover .pc__ph{clip-path:inset(0 0 0 0 round var(--u))}
  html:not(.js) .pc:hover .pc__b::before,.pc.is-hover .pc__b::before{clip-path:inset(0 0 0 10px round var(--u))}
  html:not(.js) .pc:hover .pc__n,html:not(.js) .pc:hover .pc__t,html:not(.js) .pc:hover .pc__p,html:not(.js) .pc:hover .pc__cta,
  .pc.is-hover .pc__n,.pc.is-hover .pc__t,.pc.is-hover .pc__p,.pc.is-hover .pc__cta{transform:translate3d(0,0,0)}
  .pc .chip--xl,.pt .chip--xl{background:#242424;color:var(--white);transition:background .6s var(--glide),color .6s var(--glide)}
  html:not(.js) .pc:hover .chip--xl,html:not(.js) .pt:hover .chip--xl,.pc.is-hover .chip--xl,.pt.is-hover .chip--xl{background:var(--yellow);color:var(--ink)}
}
}

/* ==========================================================================
   BAND. Reserve your spot, the one sentence and the yellow chip.
   ========================================================================== */
.band{display:grid;gap:22px;padding-top:var(--sec)}
.band .chip{justify-self:start}
@media (min-width:900px){.band{grid-template-columns:1fr 1fr;gap:40px;align-items:end}.band__side{display:grid;gap:26px;justify-items:start}}

/* ==========================================================================
   FOOTER. The marks and the host, the chip, the one line. As on the home.
   ========================================================================== */
.ftr{margin-top:var(--sec);display:grid;gap:20px;padding-bottom:var(--u)}
.ftr__top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ftr__logos{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ftr__host{display:flex;align-items:center;gap:10px;margin:0;color:var(--grey)}
.ftr__host span{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.ftr .lg-wnc{height:11px;width:auto;color:var(--grey)}
@media (min-width:900px){.ftr .lg-wnc{height:12px}}
.ftr .lg-ptdja{height:20px;width:auto}
.ftr .lg-at{height:13px;width:auto}
.ftr__line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding-top:var(--u);font-size:11px;letter-spacing:.02em;color:var(--grey);text-transform:uppercase}
.lg-ptdja path,.lg-ptdja rect{fill:currentColor}
.lg-ptdja .y{fill:var(--ade)}
.lg-at path,.lg-at rect,.lg-at polygon{fill:currentColor}
.lg-ade .bg{fill:var(--ade)}
.lg-ade .g{fill:#121212}

/* ==========================================================================
   THE FORK. Are you an Academy student? A dark panel over the page.
   ========================================================================== */
.fork{border:.5px solid var(--fline);background:var(--panel);color:var(--white);padding:0;max-width:440px;width:calc(100% - 20px);border-radius:var(--u);margin:auto}
.fork::backdrop{background:rgba(16,16,16,.82)}
.fork[open]{animation:forkin .45s var(--ease) both}
@keyframes forkin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fork__in{padding:24px 20px 20px;display:grid;gap:14px}
.fork__t{font-family:var(--fd);font-weight:500;text-transform:uppercase;font-size:clamp(24px,7vw,32px);line-height:.94;letter-spacing:0}
.fork__p{font-size:13px;line-height:1.5;color:var(--grey);max-width:40ch}
.fork__act{display:grid;gap:8px;margin-top:8px}
.fork__act .chip{width:100%}
.fork__close{justify-self:start;font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--grey);text-decoration:underline;text-underline-offset:3px;margin-top:4px}
.fork__close:hover{color:var(--white)}
@media (min-width:900px){.fork__in{padding:28px 26px 24px}}

/* ==========================================================================
   THE STUDENT QUESTION before the Play form. The page behind is blurred and
   darkened, a dark panel settles in the middle: what you are applying for,
   the question, one line on how the slots are split, two answers.
   ========================================================================== */
html.ask-open{overflow:hidden}
.ask{border:0;padding:0;margin:auto;background:transparent;color:var(--white);width:calc(100% - 20px);max-width:460px;overflow:visible}
.ask::backdrop{background:rgba(8,8,8,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ask[open]{animation:askin .5s var(--glide) both}
.ask[open]::backdrop{animation:askbg .5s var(--glide) both}
@keyframes askin{from{opacity:0;transform:translate3d(0,12px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes askbg{from{opacity:0}to{opacity:1}}
/* the campus popup opens from the question, over a backdrop already there: only its panel moves in */
.ask--st[open]::backdrop{animation:none}
.ask__in{position:relative;background:var(--panel);border-radius:var(--u);padding:22px 18px 18px;display:grid;gap:16px}
.ask__x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:8px;background:#242424;display:grid;place-items:center;transition:background .3s ease}
.ask__x i{position:absolute;width:14px;height:1.5px;background:var(--white)}
.ask__x i:first-child{transform:rotate(45deg)}
.ask__x i:last-child{transform:rotate(-45deg)}
.ask__x:hover{background:#333}
.ask__k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-right:44px;font-size:11px;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;color:var(--grey)}
.ask__k .sq{width:6px;height:6px;background:var(--yellow)}
.ask__k b{font-weight:500;color:var(--white)}
.ask__t{font-family:var(--fd);font-weight:500;text-transform:uppercase;font-size:clamp(22px,6.6vw,30px);line-height:1.05;margin-top:4px}
.ask__p{font-size:13px;line-height:1.6;color:var(--grey);max-width:40ch}
.ask__act{display:grid;gap:8px;margin-top:6px}
/* the two answers carry the same weight: both dark with a yellow arrow, both turn yellow under the
   pointer or the finger */
.ask__act .chip{width:100%;justify-content:space-between;height:52px;padding:0 18px;font-size:13px;background:#242424;color:var(--white);transition:background .45s var(--glide),color .45s var(--glide)}
.ask__act .chip .ar{color:var(--yellow);transition:color .45s var(--glide),transform .45s var(--glide)}
.ask__act .chip:hover,.ask__act .chip:active,.ask__act .chip:focus-visible{background:var(--yellow);color:var(--ink);animation:none}
.ask__act .chip:hover .ar,.ask__act .chip:active .ar,.ask__act .chip:focus-visible .ar{color:var(--ink)}
@media (min-width:900px){.ask__in{padding:28px 26px 24px;gap:18px}}
@media (prefers-reduced-motion:reduce){.ask[open],.ask[open]::backdrop{animation:none}}

/* A call to action tears for a third of a second when the pointer lands on it.
   Only where there is a real pointer, so a tap on a phone never triggers it.
   The WhatsApp button is left out: it already has its own loop to keep. */
@keyframes btnglitch{
  0%,80%{clip-path:none;transform:none}
  82%{clip-path:inset(0 0 62% 0);transform:translate3d(-8px,0,0)}
  85%{clip-path:inset(52% 0 0 0);transform:translate3d(9px,0,0)}
  88%{clip-path:inset(26% 0 34% 0);transform:translate3d(-5px,0,0)}
  91%{clip-path:inset(0 0 16% 0);transform:translate3d(5px,0,0)}
  94%{clip-path:none;transform:translate3d(-2px,0,0)}
  96%,100%{clip-path:none;transform:none}
}
@keyframes ctaglitch{
  0%{clip-path:none;transform:none}
  16%{clip-path:inset(0 0 58% 0);transform:translate3d(-5px,0,0)}
  32%{clip-path:inset(48% 0 0 0);transform:translate3d(6px,0,0)}
  50%{clip-path:inset(24% 0 32% 0);transform:translate3d(-3px,0,0)}
  68%{clip-path:inset(0 0 14% 0);transform:translate3d(3px,0,0)}
  86%{clip-path:inset(0);transform:translate3d(-1px,0,0)}
  100%{clip-path:none;transform:none}
}
@media (hover:hover) and (min-width:900px){
  .chip:hover{animation:ctaglitch .34s steps(1,end) 1}
  .chip--xl:hover{animation:none}
}

/* Reveal helpers */
html.js [data-rv]{opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-rv].in{opacity:1;transform:none}

/* Wipe: the yellow sheet that covers the page between one page and the next,
   and between the form and the pass. */
.wipe{position:fixed;inset:0;z-index:100;background:var(--yellow);transform:translateY(101%);pointer-events:none}
.wipe.up{transition:transform .5s var(--ease);transform:translateY(0)}
.wipe.out{transition:transform .5s var(--ease);transform:translateY(-101%)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  html.js [data-rv]{opacity:1;transform:none}
  .tw__w > span,.tw__w svg{transform:none !important}
}