@font-face {
  font-family: "AnkaCoder-r";
  src: url("../fonts/AnkaCoder-r.ttf") format("truetype");
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 5px;
  width: 9px;
}

::-webkit-scrollbar-thumb { background: black; }

:root { --color-primary: rgba(232, 228, 232, 1); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  font-family: "AnkaCoder-r", "Breite", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 18px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  scroll-behavior: smooth;
  background: rgba(232, 228, 232, 1);
}
body { scrollbar-width: thin; scrollbar-color: black transparent; }
p, ul, ol {
  font-size: 1.1em;
  font-family: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.3;
}
strong { font-weight: 500; }
small { font-size: 1em; }
h1 { margin: 0; font-size: 4em; font-weight: normal; text-transform: uppercase; line-height: 1; }
h2 { margin: 0; font-size: 2em; font-weight: normal; text-transform: uppercase; line-height: 1; }
h3 { margin: 0; font-size: 1em; font-weight: normal; text-transform: uppercase; line-height: 1; }
a { color: black; text-decoration: none; }
a:hover { border: 0; }
img { max-width: 100%; }
main { width: 100%; height: 95vh; }
button, input { font: inherit; }
button { color: inherit; }

#tranzit { display: flex; flex-flow: column nowrap; height: 100vh; }
.invert { filter: invert(100%); }
.indent { max-width: 600px; }
.single { padding: 1em; height: 95vh; overflow-y: auto; }
.single-no-padding { padding: 0; }
.single a { border-bottom: 2px solid black; }
.single a:hover { border-bottom: none; }
.loading {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: white;
}

.site-header,
.menu-container header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5vh;
  padding: 0 calc(5vh / 2.5);
}
.site-header { z-index: 5; border-bottom: 1px solid transparent; }
.site-header.border { border-bottom: 1px solid black; }
.site-header nav a { margin: 0 0 0 0.5em; padding: 0 0 0.1em; line-height: 1; text-transform: uppercase; }
.menu-action { padding: 0; border: 0; background: transparent; text-transform: uppercase; cursor: pointer; }

.tranzit-logo { display: flex; align-items: center; }
.tranzit-logo .logo {
  max-height: 1em;
  width: auto;
  margin: 0 0.5em 0 0;
  fill: currentColor;
}
.tranzit-logo small { color: currentColor; text-transform: uppercase; }

.menu-container {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  color: var(--color-primary);
  background: black;
}
.menu-container[hidden] { display: none; }
.menu-container a { color: var(--color-primary); }
.menu-container nav a:hover { color: silver; }
.menu-content { display: flex; justify-content: space-between; padding: 0 calc(5vh / 2.5); }
.locales a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  margin: 0 0 1em;
  text-transform: uppercase;
  color: var(--color-primary);
  border-radius: 100px;
  border: 1px solid var(--color-primary);
}
.locales a:hover { color: black; background: silver; border-color: silver; }
.locales .active { color: black; background: var(--color-primary); }

.single-index { display: flex; flex-flow: column nowrap; height: 95vh; }
.scroll-area {
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  flex: 1;
}
.scroll-visual { flex: 4; }
.area-visual { display: flex; }
.area-visual img { max-width: initial; height: calc(100vh / 2); }
.area-heading { display: flex; flex-flow: row nowrap; padding: 1em; }
.area-events { padding: 18px; font-size: 0; }
.event-link { display: inline-block; font-size: 18px; }
.event small {
  display: block;
  text-transform: uppercase;
  padding: 0.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
}
.event-title {
  position: relative;
  white-space: nowrap;
}
.event-title-static {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-title-marquee {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: max-content;
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}
.event-link:hover .event-title.is-overflowing .event-title-static,
.event-link:focus-visible .event-title.is-overflowing .event-title-static,
.event-overview-link:hover .event-title.is-overflowing .event-title-static,
.event-overview-link:focus-visible .event-title.is-overflowing .event-title-static {
  visibility: hidden;
}
.event-link:hover .event-title.is-overflowing .event-title-marquee,
.event-link:focus-visible .event-title.is-overflowing .event-title-marquee,
.event-overview-link:hover .event-title.is-overflowing .event-title-marquee,
.event-overview-link:focus-visible .event-title.is-overflowing .event-title-marquee {
  visibility: visible;
  animation: event-title-marquee var(--event-title-duration, 2.5s) linear infinite alternate;
}
@keyframes event-title-marquee {
  0%, 15% { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--event-title-distance, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .event-title-static { visibility: visible !important; }
  .event-title-marquee { visibility: hidden !important; animation: none !important; }
}
.event {
  min-width: 300px;
  max-width: 300px;
  margin: 0 1em 0 0;
  border: 2px solid black;
  transition: all 500ms;
}
.event section:nth-of-type(2) { display: flex; justify-content: space-between; border-top: 2px solid black; }
.event-link:last-child .event { margin: 0; }
.home-events-row {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.home-events-row .home-events {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.home-events-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: 100%;
}
.home-events-page-link {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 1em;
}
.home-events-mobile-link,
.home-about-short { display: none; }

.single-event small { text-transform: uppercase; display: inline-block; }
.single-event .info { margin: 1em 0 2em; }
.description h2 { margin: 0 0 -0.5em; text-transform: initial; }
.single-about h2,
.single-contact h2,
.single-hungarian-film-days h2 { margin: 1.5em 0 -0.25em; text-transform: initial; }

.events-heading { margin-bottom: 1em; }
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 18.75rem));
  gap: 1em;
}
.single .event-overview-link {
  display: block;
  min-width: 0;
  border-bottom: 0;
}
.event-overview-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  margin: 0;
}
.event-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: black;
  border-bottom: 2px solid black;
}
.event-card-image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-card-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1em;
}
.event-card-placeholder .tranzit-logo { justify-content: center; }
.home-event-image { display: none; }
.events-more {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 3em;
  padding: 0.75em;
  border: 2px solid black;
  text-transform: uppercase;
}
.events-more[aria-busy="true"] { opacity: 0.5; }

.single-archive { display: flex; overflow: hidden; height: 95vh; }
.single-archive .side { width: 100%; overflow-y: auto; }
.single-archive .side.left { display: flex; flex-flow: column nowrap; border-right: 1px solid black; }
.single-archive .side.right { display: flex; flex-flow: column nowrap; justify-content: space-between; }
.single-archive .browser { display: flex; flex-flow: column nowrap; height: 80vh; overflow-y: auto; }
.archive-notice { margin: 0; padding: 1em; text-transform: uppercase; }
.single-archive input[name="search"] {
  box-sizing: border-box;
  width: 100%;
  height: 4vh;
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-family: "AnkaCoder-r", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-primary);
  border: 0;
}
.single-archive input[name="search"]:focus { outline: 0; }
.single-archive .top { display: flex; justify-content: space-between; align-items: center; height: 5vh; padding: 1em; border-bottom: 1px solid black; }
.single-archive .top-tags { justify-content: flex-start; flex-flow: row wrap; height: 10vh; overflow-x: auto; overflow-y: hidden; }

@media (max-width: 800px) {
  .events-grid { grid-template-columns: 1fr; }

  body {
    font-size: 16px;
    overflow-x: hidden;
  }

  p,
  ul,
  ol {
    font-size: 1rem;
    line-height: 1.5;
  }

  h1 { font-size: 3.25rem; line-height: 0.8; }
  h2 { font-size: 1.75rem; line-height: 1.1; }
  h3 { font-size: 1rem; line-height: 1.25; }

  #tranzit {
    min-height: calc(var(--vh, 1vh) * 100);
    height: auto;
  }

  main {
    min-height: calc((var(--vh, 1vh) * 100) - 3.5rem);
    height: calc((var(--vh, 1vh) * 100) - 3.5rem);
  }

  .site-header,
  .menu-container header {
    min-height: 3.5rem;
    height: 3.5rem;
    padding: 0 1rem;
  }

  .site-header > a,
  .menu-container header > a,
  .menu-action {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .menu-action {
    margin-right: -0.75rem;
    padding: 0.75rem;
    touch-action: manipulation;
  }

  .tranzit-logo .logo { max-height: 1.1rem; }
  .tranzit-logo small { font-size: 0.875rem; }

  .menu-container {
    position: fixed;
    min-height: calc(var(--vh, 1vh) * 100);
    height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
  }

  .menu-content { padding: 0.75rem 1rem 2rem; }
  .menu-container h1 { font-size: 2.5rem; line-height: 0.8; }
  .menu-container nav > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.15rem 0;
    touch-action: manipulation;
  }

  .locales a {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    touch-action: manipulation;
  }

  .single {
    height: 100%;
    padding: 1.25rem 1rem 2.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .single-no-padding { padding: 0; }
  .indent { width: 100%; }

  .single h1 { margin-bottom: 1.25rem; }
  .single p { margin: 0.75rem 0 1.25rem; }
  .single li + li { margin-top: 0.5rem; }
  .single a { overflow-wrap: anywhere; }

  .single-event h2 { margin-bottom: 0.75rem; }
  .single-event .info {
    margin: 0 0 1.75rem;
    line-height: 1.4;
  }
  .description h2,
  .single-about h2,
  .single-contact h2,
  .single-hungarian-film-days h2 {
    margin: 2rem 0 0.75rem;
  }
  .single-event img {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
  }

  .single-index {
    display: block;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .single-index .scroll-area {
    flex: none;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .scroll-visual {
    height: clamp(18rem, calc(var(--vh, 1vh) * 48), 26rem);
  }
  .area-visual { height: 100%; }
  .area-visual img {
    width: 100vw;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
  }
  .home-link {
    min-height: 5.5rem;
    overflow: hidden;
  }
  .home-link .area-heading {
    width: 100%;
    padding: 1.25rem 1rem;
  }
  .home-link .area-heading a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    touch-action: manipulation;
  }
  .home-link h1 { font-size: clamp(2.75rem, 14vw, 3.25rem); }
  .home-about-full { display: none; }
  .home-about-short { display: inline; }
  .home-events-row {
    display: block;
    flex: none;
    width: 100%;
  }
  .home-events-track {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .single-index .home-events {
    display: block;
    width: 100%;
    overflow: visible;
    white-space: normal;
  }
  .home-events-page-link { display: none; }
  .single-index .home-events-mobile-link { display: flex; }
  .home-events-row .area-events {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
  }
  .event-link {
    display: none;
    width: 100%;
    font-size: 16px;
    touch-action: manipulation;
  }
  .event-link:nth-child(-n + 3) { display: block; }
  .event {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .event small { padding: 0.65rem 0.75rem; }
  .home-event-image { display: block; }

  .single-archive { height: 100%; }
  .single-archive .side.left { border-right: 0; }
  .single-archive .side.right { display: none; }
  .single-archive .browser { flex: 1; height: auto; }
  .single-archive .top {
    min-height: 3.5rem;
    height: auto;
    padding: 0.75rem 1rem;
  }
  .single-archive .top-tags { display: none; }
  .single-archive input[name="search"] {
    min-height: 44px;
    height: auto;
    font-size: 1rem;
  }
  .archive-notice {
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.5;
  }
}
@media (max-width: 375px) {
  .single-contact h1,
  .single-hungarian-film-days h1 { word-break: break-all; }
}
@media (max-width: 325px) { .event p { font-size: 1em; } }
@media (min-width: 800px) {
  .event:hover, .event:active { max-width: 800px; transform: translateY(5px); }
}
@media (min-width: 801px) {
  .site-header,
  .menu-container header {
    justify-content: flex-start;
    gap: 1.5em;
  }
}