/* Assembling Intelligence — event archive */
@font-face{font-family:"Authentic Sans";src:url(../fonts/AUTHENTICSans-130.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Authentic Sans";src:url(../fonts/AUTHENTICSans-150.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Authentic Sans Condensed";src:url(../fonts/AUTHENTICSans-Condensed-150.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--bg:#fff;--fg:#000;--f:"Authentic Sans","Helvetica Neue",Arial,sans-serif;--fc:"Authentic Sans Condensed","Arial Narrow",var(--f);--pad:clamp(16px,3vw,40px);--line:2px solid var(--fg)}
*{box-sizing:border-box;margin:0;padding:0}
body{font:400 17px/1.2 var(--f);font-variant-emoji:text;background:var(--bg);color:var(--fg);transition:background .3s,color .3s}
.filter,.table,.row,.foot,.next__h{transition:border-color .3s,background-color .3s,color .3s} /* lines and the pill change color at the same pace as the page */
body:has(.viewer[open]){overflow:hidden}
a{color:inherit;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
img{display:block;max-width:100%}
ul{list-style:none}
.arr{display:inline-block;width:.68em;height:.68em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9 9 1M2.5 1H9v6.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9 9 1M2.5 1H9v6.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad)}

/* hero: logo across the top (inline SVG takes the text color), then tagline left and intro right.
   The intro takes the place and width of the table's type/place column and starts level with the tagline's first line */
.hero{padding:clamp(40px,9vh,100px) 0 clamp(28px,5vh,56px)}
.hero__row{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:0 var(--pad);align-items:start}
.logo{grid-column:1/-1;max-width:820px}
.logo :is(svg,img),.tagline--mark :is(svg,img){display:block;width:100%;height:auto}
.logo svg *,.tagline svg *,.foot svg *{fill:currentColor!important}
.logo svg{overflow:visible}
.logo__ph{display:block;font:700 clamp(44px,7vw,104px)/.95 var(--f)}
.tagline{grid-column:1;margin-top:20px;font:700 clamp(23px,2.7vw,40px)/1.12 var(--f);white-space:pre-line}
.intro{grid-column:2;margin:22px 10px 0 0} /* 22px: its first line starts level with the tagline's */
.intro p+p{margin-top:.7em}
.next{margin-top:22px;font-size:16px}
.next__h{display:inline-block;margin-right:10px;padding:5px 10px;border-radius:99px;background:var(--fg);color:var(--bg);font:700 13px/1 var(--fc);text-transform:uppercase}

/* archive and footer share one grid: side column (filters / logos) left, table columns (rows / credits) right */
.arch,.foot{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--pad)}
.arch{padding-top:34px}
.filters li{margin-bottom:2px}
.filter{display:flex;gap:12px;width:100%;padding:8px 0 6px;border-bottom:var(--line);font:400 19px/1.1 var(--f);text-transform:uppercase}
.filter::before{content:"+";width:.7em;font-weight:700;text-align:center}
.filter[aria-pressed=true]{font-weight:700}
.filter[aria-pressed=true]::before{content:"–"}
.table{border-bottom:var(--line)}
.head,.row,.credits{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(160px,300px);gap:0 16px;padding:0 10px}
.head{padding-bottom:6px;font:700 17px var(--f);text-transform:uppercase}
.row{padding-block:18px;line-height:1.35;border-top:var(--line);text-decoration:none;outline:0}
.row[data-open]{cursor:pointer}
.row[hidden]{display:none}
.row__date span{display:block}
.row__title,.ov__links{font-weight:700;font-size:clamp(24px,3vw,44px);line-height:1.05}
.row__meta{text-transform:uppercase;font-size:15px}

.foot{align-items:end;margin-top:70px;padding:26px 0 40px;border-top:var(--line)}
.foot__logos{display:flex;gap:20px;align-items:flex-end}
.foot__logos>*{display:block}
.foot :is(svg,img){display:block;height:clamp(56px,7vw,84px);width:auto;max-width:none}
.foot__ph{border:2px solid;padding:6px 8px;font:700 14px var(--fc)}
/* credits: first entry (team) under the event titles, the others stacked under the type/place column */
.credits{font-size:15px}
.credits li{grid-column:3}
.credits li:first-child{grid-area:1/2/span 20;max-width:66.67%}
.credits li:nth-child(n+3){margin-top:.7em}
.credits .role{display:block;margin-bottom:4px;text-transform:uppercase}

/* popup: the page behind keeps the event colors, the close button sits inside the window */
.viewer{width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;background:none;color:var(--fg)}
.viewer::backdrop{background:none}
.viewer__in{position:absolute;inset:4vh 0;display:flex;width:min(1100px,94vw);height:fit-content;max-height:92vh;margin:auto;border:var(--line);background:var(--bg)}
.viewer__body{outline:0;flex:1;min-width:0;max-height:calc(92vh - 4px);padding:28px;overflow:auto}
/* small popup asking before a link on the home page to another website is followed */
.leave .viewer__in{width:min(480px,94vw)}
.leave__actions{margin-top:26px}
.pill{display:inline-block;padding:7px 14px 6px;border:var(--line);border-radius:99px;font-size:15px;text-transform:uppercase;text-decoration:none}
.viewer__x{position:absolute;top:10px;right:12px;z-index:1;display:grid;place-items:center;width:40px;height:40px;font-size:34px;line-height:1}
.ov__meta,.ov__big{padding-right:44px}
.ov__meta{margin-bottom:14px;font:700 14px var(--fc);text-transform:uppercase}
.ov__big{font:700 clamp(26px,3.6vw,48px)/1.02 var(--f)}
.ov__big a,.ov__links a{text-decoration:none}
.ov__big a:hover,.ov__links a:hover{text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.08em}
.ov__txt{max-width:62ch;margin:18px 0;font-size:18px}
.ov__txt p+p{margin-top:.8em}
.ov__links{display:flex;flex-wrap:wrap;gap:.2em .9em;margin-top:22px} /* side by side, wrapping onto new lines */
.ov__credit{margin:-4px 0 18px;font-size:14px}

/* slider: photos, uploaded videos and YouTube/Vimeo players, one slide in view at a time; a video on its own is a slider of one */
.slider{position:relative;margin:22px 0 12px}
.slider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.slider__track::-webkit-scrollbar{display:none}
.slider__track>*{flex:0 0 100%;min-width:0;aspect-ratio:16/9;border:0;background:#000;object-fit:cover;scroll-snap-align:start}
.slider__track video{cursor:pointer}
.slider__btn{position:absolute;width:44px;height:44px;border:var(--line);border-radius:50%;background:var(--bg)}
.slider__btn::before{content:"";position:absolute;inset:0;margin:auto}
.slider__btn--prev,.slider__btn--next{top:50%;translate:0 -50%}
.slider__btn--prev::before,.slider__btn--next::before{width:10px;height:10px;border:solid;border-width:2px 2px 0 0}
.slider__btn--prev{left:12px}
.slider__btn--prev::before{rotate:-135deg;translate:2px 0}
.slider__btn--next{right:12px}
.slider__btn--next::before{rotate:45deg;translate:-2px 0}
.slider__count{position:absolute;right:12px;bottom:14px;padding:4px 12px;border-radius:99px;background:var(--bg);font:700 17px var(--fc)}
/* video controls: sound on/off (off by default) on every video; an uploaded video also has a play button while paused and a seek line along the bottom edge */
.slider__btn--sound{left:12px;bottom:14px}
/* on a YouTube/Vimeo player it sits above the player's own time bar and time label */
.slider[data-kind=iframe] .slider__btn--sound{bottom:120px}
.slider__btn--full{display:none;right:12px;top:14px} /* phones only, see below */
.slider__btn--full::before{width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E") center/contain no-repeat}
.slider:fullscreen{display:grid;margin:0;background:#000}
.slider:fullscreen .slider__track>*{height:100%;aspect-ratio:auto;object-fit:contain}
.slider__btn--play{inset:0;margin:auto;width:64px;height:64px}
.slider__btn--play::before{width:0;height:0;border:solid transparent;border-width:11px 0 11px 18px;border-left-color:currentColor;translate:3px 0}
.slider__btn--sound::before{width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 9.5v5h4l5 4v-13l-5 4z' fill='%23000' stroke-linejoin='round'/%3E%3Cpath d='m16 9.5 5 5m0-5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 9.5v5h4l5 4v-13l-5 4z' fill='%23000' stroke-linejoin='round'/%3E%3Cpath d='m16 9.5 5 5m0-5-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
.slider__btn--sound[aria-pressed=true]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 9.5v5h4l5 4v-13l-5 4z' fill='%23000' stroke-linejoin='round'/%3E%3Cpath d='M15.5 9a4.5 4.5 0 0 1 0 6M18 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 9.5v5h4l5 4v-13l-5 4z' fill='%23000' stroke-linejoin='round'/%3E%3Cpath d='M15.5 9a4.5 4.5 0 0 1 0 6M18 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E")}
/* texts on an uploaded video, in the event's colors: subtitles at the bottom, a name label top left */
.slider__caption,.slider__label{position:absolute;padding:5px 12px;background:var(--bg);font:700 clamp(13px,1.7vw,19px)/1.25 var(--f);pointer-events:none}
.slider__caption{left:50%;bottom:28px;translate:-50%;width:max-content;max-width:calc(100% - 150px);text-align:center;white-space:pre-line}
.slider__label{left:12px;top:14px;max-width:calc(100% - 24px)}
.slider__seek{position:absolute;inset:auto 0 0;height:14px;cursor:pointer}
.slider__seek::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--fg);transform-origin:0;scale:var(--at,0) 1}

@media (max-width:820px){
  .head{display:none}
  .hero,.foot{padding-inline:10px} /* same inset as the text of the event rows */
  .hero{padding-bottom:clamp(14px,2.5vh,28px)}
  .hero__row,.arch,.row,.foot{grid-template-columns:1fr}
  .tagline{white-space:normal} /* drop the fixed line breaks: the text runs across the full width */
  .intro{grid-column:1;margin:var(--pad) 0 0}
  .arch{gap:20px;padding-top:17px}
  .filters{display:flex;flex-wrap:wrap;gap:6px;padding-inline:10px}
  .filter{width:auto;padding:7px 12px 5px;border:2px solid;border-radius:99px;font-size:15px}
  .filter::before,.filter[aria-pressed=true]::before{content:none} /* no + / –: the whole page takes the colors of the chosen kind of event, the pill inverted */
  .filter[aria-pressed=true]{font-weight:400;background:var(--fg);color:var(--bg)}
  .row{gap:2px}
  .row__date{white-space:nowrap}
  .row__date span{display:inline}
  .table{border-bottom:0}
  .foot{gap:28px;margin-top:0}
  .credits{display:block;order:-1;padding:0}
  .credits li:first-child{max-width:none}
  .credits li+li{margin-top:.7em}
  .viewer__body{padding:20px 16px}
  .slider:not(.slider--video) .slider__track>*{aspect-ratio:1} /* photos only: square; with a video the slider stays 16:9 */
  .slider[data-kind=iframe] .slider__btn--sound{bottom:14px} /* small player: no room above its time bar, so the corner as on other slides */
  /* small player: the counter and the texts on a video shrink, and subtitles reflow to fit between the sound button and the counter */
  .slider__count{font-size:13px}
  .slider__caption,.slider__label{padding:3px 8px;font-size:11px}
  .slider__label{max-width:calc(100% - 80px)}
  .slider__btn--full:not([hidden]){display:block}
  .slider__caption{bottom:14px;max-width:calc(100% - 132px);white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  body,.filter,.table,.row,.foot,.next__h{transition:none}
  .slider__track{scroll-behavior:auto}
}