@font-face {
  font-family: "STK Bureau";
  src: url("assets/STKBureauSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  font: 400 16px/1.5 "STK Bureau", Arial, sans-serif;
  font-synthesis: none;
  --base: #fff;
  --neutral: #222;
  --page: #fff;
  --soft: color-mix(in srgb, var(--neutral) 86%, var(--base));
  --muted: color-mix(in srgb, var(--neutral) 68%, var(--base));
  --link-ink: rgba(0, 0, 0, .75);
  --line: rgba(0, 0, 0, .06);
  --hover: color-mix(in srgb, var(--neutral) 4%, var(--base));
  --pressed: color-mix(in srgb, var(--neutral) 7%, var(--base));
  --surface: #fff;
  --surface-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
    0 0 2px rgba(0, 0, 0, .02),
    0 0 6px rgba(0, 0, 0, .03),
    0 6px 30px rgba(0, 0, 0, .07),
    0 0 0 1px rgba(0, 0, 0, .02);
  --pressed-outline: inset 0 0 0 1px rgba(0, 0, 0, .03);
  --pill-fill: rgba(255, 255, 255, .8);
  --pill-hover: rgba(43, 43, 43, .03);
  --pill-pressed: rgba(43, 43, 43, .06);
  --header-height: 56px;
  --day-width: clamp(320px, calc((100vw - 640px) / 4), 400px);
  --gap: 8px;
  --inset: 16px;
  --edge: 24px;
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--neutral);
  background: var(--page);
}
* { box-sizing: border-box; font-weight: inherit; }
html, body { width: 100%; height: 100%; margin: 0; background: #fff; }
body { overflow: hidden; background: var(--page); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--muted); outline-offset: 4px; }
.control {
  flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%;
  font: inherit; color: inherit; background: transparent; cursor: pointer;
  transition: background 160ms ease;
}
.surface { border: 0; background: var(--surface); box-shadow: var(--surface-shadow); }
.pill .control:where(:not(:disabled):active) { box-shadow: var(--pressed-outline); }
.control:where(:not(.event-card):not(:disabled):hover) { background: var(--hover); }
.control:where(:not(.event-card):not(:disabled):active) { background: var(--pressed); }
.control:disabled { opacity: .3; cursor: default; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; }
.art { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; -webkit-user-drag: none; }
.art-frame { display: block; flex: 0 0 auto; position: relative; width: min(100%, var(--art-size)); aspect-ratio: 1; margin-inline: auto; overflow: hidden; }
.art-frame > .art { position: absolute; inset: 0; height: 100%; transform: scale(var(--art-scale, 1)) translate(var(--art-x, 0%), var(--art-y, 0%)); transform-origin: center; }

.calendar-heading { position: sticky; top: 0; z-index: 10; width: max-content; min-width: 100%; height: var(--header-height); background: var(--page); border-bottom: 1px solid var(--line); }
.calendar-scroller {
  position: fixed; inset: 0; overflow: auto; background: #fff;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto; scroll-padding-top: var(--header-height);
  scrollbar-width: none; cursor: grab;
}
.calendar-scroller::-webkit-scrollbar { display: none; }
.calendar-scroller.is-dragging { user-select: none; }
.calendar-scroller.is-dragging, .calendar-scroller.is-dragging * { cursor: grabbing; }
.track { display: flex; width: max-content; }
#calendar-track { min-height: calc(100% - var(--header-height)); }
.calendar-heading .track { height: 100%; }
.column { --column-size: calc(var(--day-width) * var(--span, 1)); flex: 0 0 var(--column-size); width: var(--column-size); min-width: 0; border-right: 1px solid var(--line); }
.column:last-child { border-right: 0; }
.column.today { border-left: 1px solid var(--line); }
.intro { --column-size: 640px; border-right: 0; }
.intro-heading, .day-heading { display: flex; align-items: center; gap: var(--gap); padding: 0 var(--edge); white-space: nowrap; }
.day-heading h2 { color: var(--soft); }
.day-heading.is-selected h2 { color: var(--neutral); }
.day-label { color: var(--muted); }
.project-intro { padding: var(--edge); }
.project-intro p { margin-top: var(--inset); color: var(--muted); }
.intro-art { width: 240px; margin-bottom: var(--inset); mix-blend-mode: normal; }
.intro-logo { position: relative; aspect-ratio: 1; }
.logo-video { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.intro-logo.is-playing .logo-video { opacity: 1; }
.intro-logo.is-playing .logo-fallback { visibility: hidden; }
.day-column { display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap) var(--gap) 140px; }
.event-card {
  --event-color: var(--neutral);
  display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; width: 100%;
  padding: var(--inset); border-radius: 16px;
  overflow: hidden; text-align: left;
  background: color-mix(in srgb, var(--event-color) 10%, var(--surface)); box-shadow: none;
}
.event-card:focus-visible { outline-offset: -3px; }
.event-card:hover .event-title, .event-card:active .event-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.event-card.is-repeat { flex-direction: row; align-items: flex-start; gap: 10px; }
.is-repeat .event-title { flex: 1; min-width: 0; }
.event-category-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--dot-color); }
.event-category-label { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; color: var(--muted); }
#event-detail > .event-category-label { padding-right: 32px; }
.event-title, .event-date, .detail-facts dd { overflow-wrap: anywhere; }
.event-title, .dialog-title, .dialog-description { letter-spacing: -.015em; }
.event-date { margin-top: 4px; color: var(--muted); }
.event-availability { margin-top: 8px; color: var(--muted); }
.event-art { --art-size: 300px; margin-top: var(--inset); mix-blend-mode: multiply; }

.floating-controls {
  --control-size: 48px;
  --label-padding: 18px;
  position: fixed; z-index: 20; bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); display: flex; align-items: center;
  gap: var(--gap); width: max-content; max-width: calc(100vw - 24px);
}
.pill {
  --hover: var(--pill-hover);
  --pressed: var(--pill-pressed);
  display: flex; align-items: center; padding: 4px; border-radius: 999px;
  background: var(--pill-fill);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  transition: background .15s cubic-bezier(.4,0,.2,1), transform .16s cubic-bezier(.22,1,.36,1);
}
.pill .icon-button { width: var(--control-size); height: var(--control-size); }
.intro-discover { display: none; align-items: center; min-height: 52px; margin-top: var(--inset); padding: 12px 18px; border-radius: 999px; background: var(--surface); box-shadow: var(--surface-shadow); }
.intro-discover:hover { background: color-mix(in srgb, var(--neutral) 9%, var(--base)); }
.intro-discover:active { background: color-mix(in srgb, var(--neutral) 12%, var(--base)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

dialog {
  width: calc(100vw - 40px); max-width: 440px; max-height: calc(100dvh - 64px);
  margin: auto; padding: var(--edge); border-radius: 20px; color: inherit; overflow: auto;
}
dialog::backdrop { background: transparent; }
.tray-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .12); opacity: 0; pointer-events: none; transition: opacity var(--modal-open-dur) var(--modal-ease); }
.tray-scrim.is-open { opacity: 1; }
.tray-scrim.is-closing { opacity: 0; transition-duration: var(--modal-close-dur); }
.t-modal {
  transform: scale(var(--modal-scale)); transform-origin: center; opacity: 0; pointer-events: none;
  transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.t-modal.is-closing { transform: scale(var(--modal-scale-close)); opacity: 0; pointer-events: none; transition-duration: var(--modal-close-dur); }
.dialog-close { position: absolute; top: var(--inset); right: var(--inset); }
.dialog-title { padding-right: 32px; }
.dialog-description { margin-top: var(--inset); color: var(--soft); }
.detail-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: var(--inset) 0 0; }
.detail-facts dt { color: var(--muted); }
.detail-facts dt:not(:first-child) { margin-top: 12px; }
.detail-facts dd { margin: 0; }
.detail-art { --art-size: 310px; margin: var(--inset) auto; }
.quiet-link { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link-ink) 20%, transparent); transition: border-bottom-color .15s ease; }
.quiet-link:hover { border-bottom-color: color-mix(in srgb, var(--link-ink) 60%, transparent); }
.dialog-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--inset); margin-top: var(--inset); }
.detail-map { margin-top: 4px; }
.filter-pill { min-width: 0; }
.filter-trigger { display: flex; align-items: center; justify-content: center; flex-shrink: 1; min-width: 0; width: auto; height: var(--control-size); padding: 0 16px; gap: 8px; border-radius: 999px; }
.filter-trigger svg { flex-shrink: 0; }
.filter-trigger.has-filters { background: rgba(43, 43, 43, .06); }
#filter-count { flex-shrink: 0; color: var(--muted); font: inherit; font-variant-numeric: tabular-nums; }
#filter-dialog {
  --filter-control-size: 48px;
  --hover: rgba(34, 34, 34, .04); --pressed: rgba(34, 34, 34, .08);
  position: fixed; inset: auto 0 24px; margin: 0 auto;
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  padding: 16px; border: 0; border-radius: 28px; background: #fff; color: var(--neutral);
  overflow: hidden; box-shadow: var(--surface-shadow);
}
#filter-dialog[open] { display: flex; flex-direction: column; }
#filter-dialog::backdrop { background: transparent; }
#filter-title { display: flex; align-items: center; flex-shrink: 0; height: var(--filter-control-size); padding: 0 64px 0 16px; font-size: 16px; }
#close-filters { top: 16px; right: 16px; width: var(--filter-control-size); height: var(--filter-control-size); border-radius: 999px; }
#filter-dialog .control:focus-visible { outline: 2px solid var(--neutral); outline-offset: -2px; }
#filter-options { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; min-height: 0; overflow-y: auto; }
.filter-option { display: flex; align-items: center; flex-shrink: 0; width: 100%; height: var(--filter-control-size); padding: 0 16px; border: 0; border-radius: 999px; text-align: left; font-size: 16px; line-height: 1.5; cursor: pointer; transition: background .14s, color .14s; }
.filter-option[aria-pressed="false"] { background: transparent; color: var(--muted); }
.filter-option[aria-pressed="false"]:hover { background: var(--hover); }
.filter-option[aria-pressed="true"] { background: color-mix(in srgb, var(--event-color) 10%, var(--surface)); color: var(--neutral); }
.filter-option[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--event-color) 16%, var(--surface)); }
.filter-actions { display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
.filter-action { flex: 1; height: var(--filter-control-size); padding: 0 16px; border: 0; border-radius: 999px; font-size: 16px; transition: background .14s, color .14s, transform .16s cubic-bezier(.22, 1, .36, 1); }
#filter-reset { flex: 0 0 auto; background: #f2f2f2; color: var(--neutral); }
#filter-reset:hover { background: #eaeaea; }
#filter-apply { background: var(--neutral); color: white; }
#filter-apply:hover { background: #3d3d3d; }
#filter-apply:active { transform: scale(.97); }

@media (max-width: 599px) {
  .floating-controls { --label-padding: 8px; }
  :root { --day-width: 100vw; }
  .calendar-scroller { overflow-y: hidden; overscroll-behavior: none; }
  #calendar-track { height: calc(100% - var(--header-height)); min-height: 0; }
  .intro { --column-size: 100vw; }
  .intro-discover { display: inline-flex; }
  .project-intro, .day-column {
    height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: none;
    scrollbar-width: none; padding-bottom: calc(114px + env(safe-area-inset-bottom));
  }
  .column::-webkit-scrollbar { display: none; }
  .event-art { --art-size: 240px; }
  dialog {
    position: fixed; inset: auto 12px calc(14px + env(safe-area-inset-bottom)); width: auto;
    max-width: none; max-height: calc(100dvh - 40px - env(safe-area-inset-bottom)); margin: 0; border-radius: 22px;
  }
  #filter-dialog { inset: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 24px); margin: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; }
  .detail-art { --art-size: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .t-modal, .tray-scrim { transition: none; }
  #filter-apply:active { transform: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.empty-period { padding: var(--inset); color: var(--muted); }
@media (max-width: 359px) {
  .floating-controls { gap: 6px; }
}

#event-detail > .dialog-title { display: flex; align-items: center; min-height: 48px; }