/* ============================================================
   automate vc — black, framed document + events
   ============================================================ */

@font-face {
  font-family: "Ease Rounded";
  src: url("assets/EaseRounded-Bold.woff2") format("woff2"),
       url("assets/EaseRounded-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --serif: "Times New Roman", Times, serif;
  --display: "Ease Rounded", "Times New Roman", serif;
  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.09);
  --dim: rgba(255, 255, 255, 0.55);
  --pad: clamp(20px, 4vw, 52px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--serif);
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
::selection { background: #fff; color: #000; }

/* ---- header ----------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 2.2vw, 28px) var(--pad);
}
.brand { display: inline-flex; }
.brand img {
  height: clamp(19px, 2.2vw, 26px);
  width: auto; display: block;
  opacity: 0.96; transition: opacity .2s ease;
}
.brand:hover img { opacity: 1; }

.tabs {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.2vw, 30px);
  font-family: var(--serif);
  font-size: clamp(15px, 1.3vw, 18px);
}
.tabs a { color: var(--dim); transition: color .2s ease; }
.tabs a:hover { color: #fff; }
.tabs a[aria-current="page"] {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* ---- footer (socials) ------------------------------------- */

.footer {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(18px, 3vh, 34px) var(--pad);
  font-family: var(--serif);
  font-size: clamp(14px, 1.2vw, 17px);
}
.footer a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  color: var(--dim);
  transition: color .2s ease;
}
.footer a:hover { color: #fff; }

/* ============================================================
   HOME — framed document
   ============================================================ */

.page-home { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }

.home-main { display: grid; place-items: center; min-height: 0; padding: 12px var(--pad); }

.frame {
  --side: min(84vmin, 600px);
  display: flex;
  align-items: stretch;
  max-width: 95vw;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}

/* left column — the document */
.doc {
  flex: 0 0 auto;
  width: var(--side);
  min-height: var(--side);
  padding: clamp(26px, 4.4vmin, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 2vmin, 22px);
}

/* underlined "Events" toggle under the document text */
.events-toggle {
  align-self: flex-start;
  margin-top: clamp(8px, 1.6vmin, 16px);
  font-family: var(--serif);
  font-size: clamp(15px, 2vmin, 19px);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s ease;
}
.events-toggle:hover { color: var(--dim); }
.events-toggle .chev { display: inline-block; }
.frame.expanded .events-toggle { display: none; }   /* moves to the panel title when open */

/* right column — events, slides open */
.events-panel {
  flex: 0 0 auto;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  transition: width .55s cubic-bezier(.2,.7,.2,1), visibility 0s .55s;
}
.frame.expanded .events-panel {
  width: min(40vw, 420px);
  border-left: 1px solid var(--line);
  visibility: visible;
  transition: width .55s cubic-bezier(.2,.7,.2,1), visibility 0s 0s;
}
.events-panel__inner {
  width: min(40vw, 420px);
  height: 100%;
  max-height: var(--side);
  padding: clamp(20px, 3vmin, 30px);
  display: flex;
  flex-direction: column;
}
.panel-title {
  flex: none;                         /* firm — stays while the list scrolls */
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 2.4vmin, 25px);
  letter-spacing: 0.004em;
  margin-bottom: clamp(14px, 2.2vmin, 22px);
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: color .2s ease;
}
.panel-title:hover { color: var(--dim); }
.panel-title .chev { font-size: 0.82em; }

/* compact cards inside the panel; the list scrolls under the firm title */
.events-panel .ev-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  gap: 12px;
}
.events-panel .ev-card__row { grid-template-columns: clamp(80px, 28%, 108px) 1fr; gap: 13px; padding: 13px; }
.events-panel .ev-card__title { font-size: clamp(15px, 1.9vmin, 18px); }
.events-panel .ev-card__meta { font-size: clamp(12px, 1.5vmin, 14px); margin: 7px 0 10px; }
.events-panel .ev-card__cue { font-size: clamp(12px, 1.4vmin, 14px); padding-top: 10px; }
.events-panel .dir { margin-inline: 13px; padding-block: 14px 16px; }
.events-panel .dir__line { font-size: clamp(12px, 1.5vmin, 14px); }

/* small invader figure */
.stage {
  position: relative;
  width: clamp(82px, 14vmin, 124px);
  aspect-ratio: 1 / 1;
  align-self: center;            /* invader centred over the text */
  margin-bottom: clamp(6px, 1.6vmin, 16px);
}
.stage canvas { display: block; width: 100% !important; height: 100% !important; }
.stage__fallback { position: absolute; inset: 0; display: none; place-items: center; }
.stage.no-webgl .stage__fallback { display: grid; }
.stage__fallback svg { width: 100%; height: auto; }

.doc-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 5.2vmin, 52px);
  line-height: 0.98;
  letter-spacing: 0.004em;
}

.doc-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 2.1vmin, 20px);
  line-height: 1.35;
}

.doc-body { display: flex; flex-direction: column; gap: clamp(8px, 1.5vmin, 15px); }
.doc-body p {
  font-family: var(--serif);
  font-size: clamp(13px, 1.85vmin, 16px);
  line-height: 1.5;
  text-align: justify;           /* Blocksatz */
}
.doc-body .muted { color: var(--dim); }

/* ============================================================
   EVENTS
   ============================================================ */

.page-events { min-height: 100%; display: flex; flex-direction: column; }
.events-main {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding: clamp(28px, 6vh, 80px) var(--pad) clamp(40px, 8vh, 90px);
}

.events-title {
  font-family: var(--display);          /* Ease Bold, matching the home title */
  font-weight: 700;
  font-size: clamp(28px, 5.2vmin, 52px);
  line-height: 0.98;
  letter-spacing: 0.004em;
  margin-bottom: clamp(30px, 6vh, 60px);
}

.ev-list { display: flex; flex-direction: column; gap: 18px; }

/* rectangular, clickable card that expands to reveal the directory */
.ev-card {
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.ev-card:hover,
.ev-card:focus-visible { border-color: var(--line); background: rgba(255, 255, 255, 0.02); outline: none; }

.ev-card__row {
  display: grid;
  grid-template-columns: clamp(116px, 16vw, 168px) 1fr;
  gap: clamp(18px, 2.6vw, 34px);
  align-items: center;
  padding: clamp(16px, 2vw, 26px);
}

.ev-card__cover {
  width: 100%;
  aspect-ratio: 1 / 1;     /* square */
  object-fit: cover;
  display: block;          /* rectangular — no radius */
}

.ev-card__info { display: flex; flex-direction: column; justify-content: center; }
.ev-card__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.ev-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 10px 0 14px;
  font-family: var(--serif);
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--dim);
}
.ev-card__meta .v { color: #fff; }

.ev-card__desc {
  font-family: var(--serif);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.55;
  max-width: 64ch;
}
.ev-card__desc--placeholder { color: rgba(255, 255, 255, 0.34); font-style: italic; }

.ev-card__cue {
  font-family: var(--serif);
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--dim);
  transition: color .2s ease;
}
.ev-card__cue .arrow { display: inline-block; transition: transform .3s ease; }
.ev-card.open .ev-card__cue .arrow { transform: rotate(90deg); }
.ev-card:hover .ev-card__cue,
.ev-card:focus-visible .ev-card__cue { color: #fff; }

/* expandable directory */
.ev-card__dir {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.ev-card.open .ev-card__dir { grid-template-rows: 1fr; }
.ev-card__dir-inner { overflow: hidden; min-height: 0; }

.dir {
  margin: 0 clamp(16px, 2vw, 26px);
  padding: clamp(16px, 2vw, 22px) 0 clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.3vw, 13px);
}
.dir__line {
  font-family: var(--serif);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--dim);
}
.dir__label { color: var(--dim); margin-right: 4px; }
.dir a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s ease;
}
.dir a:hover { color: var(--dim); }
.dir__empty { font-style: italic; color: var(--dim); }

/* ---- simple text pages (contact / imprint) ---------------- */

.page-text {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(64px, 16vh, 180px) var(--pad) clamp(48px, 10vh, 120px);
}
.page-text h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 76px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin-bottom: clamp(26px, 5vh, 48px);
}
.page-text p {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.85;
}
.page-text a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.page-text a:hover { color: var(--dim); }
.page-text .muted { color: var(--dim); }

@media (max-width: 600px) {
  .ev-card__row { grid-template-columns: clamp(96px, 30%, 132px) 1fr; }
}

/* ---- home on small / short screens: don't clip the frame --- */
@media (max-height: 720px) {
  .page-home { overflow: auto; }
}
@media (max-width: 640px) {
  .page-home { overflow: auto; height: auto; min-height: 100%; }
  .home-main { padding-block: 22px; align-items: stretch; }
  .frame { max-width: none; width: 100%; }
  .doc { width: 100%; min-height: 0; justify-content: flex-start; }
  .tabs { font-size: 15px; gap: 16px; }
}

/* ---- motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .brand img, .tabs a, .footer a, .ev-card, .ev-card__link { transition: none; }
}