/* Event directories. Builds on /style.css; colours reuse the bead-kind
 * palette so a fair reads like a visit and a talk like a listen. */

.ev-meta{font:.85rem var(--mono);color:var(--faint);margin:.2rem 0 1.4rem;max-width:40rem}
.ev-meta code{color:var(--ink)}
.ev-intro{color:var(--faint);font-size:.95rem;margin:-.4rem 0 1rem;max-width:38rem}

/* controls: category chips and day jump, pinned while scrolling */
.ev-controls{position:sticky;top:0;z-index:2;background:var(--plaster);
  border-bottom:1px solid var(--edge);padding:.8rem 0 .7rem;margin:1.6rem 0 0}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{font:600 .72rem var(--disp);letter-spacing:.12em;text-transform:uppercase;
  background:var(--card);color:var(--faint);border:1px solid var(--edge);
  border-radius:999px;padding:.45rem .85rem;cursor:pointer;min-height:2.1rem}
.chip:hover{color:var(--ink);border-color:var(--thread)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--plaster);border-color:var(--ink)}
.jump{display:flex;gap:1rem;overflow-x:auto;margin-top:.7rem;padding-bottom:.2rem;
  font:.78rem var(--mono);white-space:nowrap;scrollbar-width:thin}
.jump a{color:var(--faint);text-decoration:none}
.jump a:hover,.jump a[aria-current]{color:var(--accent)}

section.day{margin:2.4rem 0;scroll-margin-top:7.5rem}
.ev-sub{font:600 .7rem var(--disp);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:1.3rem 0 .5rem}

/* one event */
.ev{--k:var(--ink);display:grid;grid-template-columns:9.5rem 1fr;gap:.2rem 1.1rem;
  background:var(--card);border:1px solid var(--edge);border-left:3px solid var(--k);
  border-radius:8px;padding:.85rem 1.1rem;margin:0 0 .6rem;
  box-shadow:0 1px 2px rgba(27,29,34,.05);scroll-margin-top:7.5rem}
.ev-fairs{--k:var(--visit)}
.ev-talks{--k:var(--listen)}
.ev-exhibitions{--k:var(--read)}
.ev-galleries{--k:var(--dwell)}
.ev-nights{--k:var(--performance)}
.ev-when{font:600 .78rem var(--mono);color:var(--k);padding-top:.2rem}
.ev h3{font:600 1rem/1.35 var(--disp);letter-spacing:.02em;margin:0}
.ev-where{margin:.15rem 0 0;font-size:.9rem}
.ev-where a{color:var(--faint);text-decoration-color:var(--thread)}
.ev-where a:hover{color:var(--accent)}
.ev details{margin-top:.35rem;font-size:.92rem}
.ev summary{cursor:pointer;font:600 .7rem var(--disp);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);width:max-content}
.ev summary:hover{color:var(--accent)}
.ev details p{margin:.55rem 0 0;max-width:40rem}
.ev-links{font:.8rem var(--mono)}
.ev-ref{font-size:.82rem;color:var(--faint)}
.ev-ref code{font:.74rem var(--mono);color:var(--ink);word-break:break-all}
.copy{font:600 .66rem var(--disp);letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid var(--edge);border-radius:6px;color:var(--accent);
  padding:.2rem .5rem;margin-left:.3rem;cursor:pointer}

/* directory of directories */
.dirs .card{border-left-color:var(--accent)}
.dirs .when{font:.78rem var(--mono);color:var(--faint);margin:.1rem 0 .4rem}

@media (max-width:40rem){
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -1.4rem;padding:0 1.4rem}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .jump{margin:.6rem -1.4rem 0;padding:0 1.4rem .2rem}
  .ev{grid-template-columns:1fr}
  .ev-when{padding-top:0}
  section.day{scroll-margin-top:9rem}
}

/* long NSIDs in the explainer cards */
.card code{overflow-wrap:anywhere}

/* one event's own page */
.event-page{--k:var(--ink)}
.event-page.ev-fairs{--k:var(--visit)}
.event-page.ev-talks{--k:var(--listen)}
.event-page.ev-exhibitions{--k:var(--read)}
.event-page.ev-galleries{--k:var(--dwell)}
.event-page.ev-nights{--k:var(--performance)}
.ev-kind{font:600 .75rem var(--disp);letter-spacing:.16em;text-transform:uppercase;
  color:var(--k);margin:1.6rem 0 -1.4rem}
.event-page .hero h1{max-width:46rem}
.ev-facts{display:grid;grid-template-columns:5rem 1fr;gap:.4rem 1rem;margin:0 0 1.6rem;max-width:40rem}
.ev-facts dt{font:600 .72rem var(--disp);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding-top:.3rem}
.ev-facts dd{margin:0;font-size:1.05rem}
.ev-desc{max-width:40rem}

/* "I went" on the week page */
.ev-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.35rem}
.ev-actions details{margin-top:0}
.went-btn{font:600 .7rem var(--disp);letter-spacing:.14em;text-transform:uppercase;
  color:var(--k);border:1px solid currentColor;border-radius:999px;
  padding:.3rem .8rem;text-decoration:none;white-space:nowrap}
.went-btn:hover{background:var(--k);color:var(--card);border-color:var(--k)}
.ev h3 a{color:inherit;text-decoration:none}
.ev h3 a:hover{color:var(--accent);text-decoration:underline}

/* who went */
.went-count{font:.75rem var(--mono);color:var(--faint)}
.who-list{list-style:none;margin:1rem 0;padding:0;max-width:44rem}
.who-bead{display:grid;grid-template-columns:2.4rem 1fr;gap:.9rem;padding:.9rem 0;
  border-bottom:1px solid var(--edge)}
.who-av{width:2.4rem;height:2.4rem;border-radius:50%;object-fit:cover;background:var(--wash)}
.who-av-none{display:grid;place-items:center;font:600 .95rem var(--disp);color:var(--faint)}
.who-body p{margin:0}
.who-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem}
.who-name{font:600 .95rem var(--disp);color:var(--ink);text-decoration:none}
.who-name:hover{color:var(--accent);text-decoration:underline}
.who-handle{font:.75rem var(--mono);color:var(--faint)}
.who-day{font:600 .72rem var(--mono);color:var(--accent);margin-left:auto}
.who-event{font-size:.9rem;color:var(--faint)}
.who-note{margin-top:.35rem!important;font-size:.98rem;overflow-wrap:anywhere}
.who-rec{font:.72rem var(--mono);margin-top:.35rem!important}
.who-rec a{color:var(--faint)}
.who-foot{font-size:.85rem;color:var(--faint);max-width:40rem}

/* a film festival (layout: films) */
.ev-films,.event-page.ev-films{--k:var(--watch)}
.film-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.film-find input,.film-find select{font:.92rem var(--body);color:var(--ink);background:var(--card);
  border:1px solid var(--edge);border-radius:999px;padding:.38rem .9rem;min-width:0}
.film-find input{width:min(20rem,100%);min-width:15rem}
.film-find input:focus,.film-find select:focus{outline:2px solid var(--watch);outline-offset:1px}
.film-count{font:.75rem var(--mono);color:var(--faint);margin:.5rem 0 0}
.jump[data-for="az"]{gap:.85rem}
.film-credit{margin:.15rem 0 0;font-size:.9rem;color:var(--faint)}
.film-prog{margin:.15rem 0 0;font-size:.88rem;color:var(--faint)}
.film-prog b{font-weight:600;color:var(--ink)}
.film-shows{list-style:none;margin:.45rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .5rem}
.film-shows li{font:.76rem var(--mono);border:1px solid var(--edge);border-radius:6px;padding:.15rem .45rem;background:var(--wash)}
.film-shows li.today{border-color:var(--watch);color:var(--watch)}
.sc-where{color:var(--faint)}
.ev-facts .film-shows{margin:0;flex-direction:column}
.ev-facts .film-shows li{background:none;border:0;padding:0;font:1rem var(--body)}
.ev-facts .film-shows .sc-when{font:600 .9rem var(--mono);margin-right:.4rem}
.slot .ev-where{color:var(--faint)}
section.letter .sec{font-size:1.4rem}
@media (max-width:40rem){
  .film-find,.film-find input,.film-find select{width:100%}
}
.film-find .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}