@font-face {
  font-family: 'OTTonal';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/OTTonal-Regular.woff2') format('woff2');
  font-display: block;
}

@font-face {
  font-family: 'OTTonal';
  font-style: italic;
  font-weight: 400;
  src: url('/assets/fonts/OTTonal-RegularItalic.woff2') format('woff2');
  font-display: block;
}

:root {
  --font-ottonal: OTTonal, Helvetiva Neue, Helvetica, Arial, sans-serif;

  --text-s-fs: 11px;
  --text-s-lh: 12px;
  --text-s-ls: 0.02em;

  --text-m-fs: 16px;
  --text-m-lh: 19px;
  --text-m-ls: 0;

  --text-l-fs: 20px;
  --text-l-lh: 24px;
  --text-l-ls: 0;

  --grid-cols: 16;
  --grid-margin: 20px;
  --grid-gap: 40px;
  --grid-colw: calc((100dvw - 2 * var(--grid-margin) - (var(--grid-cols) - 1) * var(--grid-gap)) / var(--grid-cols));

  --pane-bg: #F9F9F9;
  --pane-border: #D1D1C6;

  --intro-duration: 500ms;
  --intro-delay: 1500ms;
}

.text-s, .text-s-caps {
  font-size: var(--text-s-fs);
  line-height: var(--text-s-lh);
  letter-spacing: var(--text-s-ls);
}
.text-m, .text-m-caps {
  font-size: var(--text-m-fs);
  line-height: var(--text-m-lh);
  letter-spacing: var(--text-m-ls);
}
.text-l, .text-l-caps {
  font-size: var(--text-l-fs);
  line-height: var(--text-l-lh);
  letter-spacing: var(--text-l-ls);
}
.caps, .text-s-caps, .text-m-caps, .text-l-caps {
  text-transform: uppercase;
}

*, ::after, ::before, ::backdrop {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

[hidden] { display: none !important; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--font-ottonal);
  -webkit-tap-highlight-color: transparent;
  color: #17140F;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

:-moz-focusring {
  outline: auto;
}

summary {
  display: list-item;
}

ol, ul, menu {
  list-style: none;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}
img, video {
  max-width: 100%;
  height: auto;
}

button, input, select, optgroup, textarea {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}
button {
  cursor: pointer;
}

::placeholder {
  opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

textarea {
  resize: vertical;
}

.hidden {
  display: none !important;
}
.invisible, .skipper:not(:active, :focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  user-select: none;
}
.invisible::before,
.invisible::after {
  content: "\00a0";
}
.skipper {
  display: block;
  padding: 1rem;
}

.flow > * + * {
  margin-top: 12px;
}
.flow-s > * + * {
  margin-top: 6px;
}
:is(.flow, .flow-s) > :is(h1, h2, h3, h4, h5, h6) {
  text-transform: uppercase;
}
:is(.flow, .flow-s) > :is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 0;
}

a:not([class]), .link {
  color: #818178;
  transition: color 300ms ease-out;

  &:hover {
    color: #17140F;
  }
}

.container {
  display: grid;
  height: 100dvh;
}

@media (max-width: 767.98px) {
  .container {
    --collapse: 36px;
    --expand: calc(100dvh - 3 * var(--collapse));
    --equal: calc(100dvh / 4);
    transition: grid-template-rows 500ms ease-in-out;
  }
  app-controller[view="home"] .container {
    grid-template-rows: 0 var(--equal) var(--equal) 0 var(--equal) var(--equal);
  }
  app-controller[view="about"] .container {
    grid-template-rows: 0 var(--expand) var(--collapse) 0 var(--collapse) var(--collapse);
  }
  app-controller[view="map"] .container {
    grid-template-rows: 0 var(--collapse) var(--expand) 0 var(--collapse) var(--collapse);
  }
  app-controller[view="filter"] .container {
    grid-template-rows: 0 var(--collapse) var(--collapse) 0 var(--expand) var(--collapse);
  }
  app-controller[view="shader"] .container {
    grid-template-rows: 0 var(--collapse) var(--collapse) 0 var(--collapse) var(--expand);
  }
}

@media (min-width: 768px) {
  .container {
    transition: grid-template-columns 500ms ease-in-out;
  }
  app-controller[view="home"] .container {
    grid-template-columns: 0fr 4fr 4fr 0fr 4fr 4fr;
  }
  app-controller[view="about"] .container {
    grid-template-columns: 0fr 10fr 2fr 0fr 2fr 2fr;
  }
  app-controller[view="map"] .container {
    grid-template-columns: 0fr 2fr 10fr 0fr 2fr 2fr;
  }
  app-controller[view="filter"] .container {
    grid-template-columns: 0fr 2fr 6fr 0fr 6fr 2fr;
  }
  app-controller[view="shader"] .container {
    grid-template-columns: 0fr 2fr 2fr 0fr 2fr 10fr;
  }
  app-controller[modal="text"] .container {
    grid-template-columns: 8fr 2fr 2fr 0fr 2fr 2fr;
  }
  app-controller[modal="place"] .container {
    grid-template-columns: 0fr 2fr 2fr 8fr 2fr 2fr;
  }
}

.pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background-color: var(--pane-bg);
}
.pane-header {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
  overflow: hidden;
  pointer-events: none;
}
.pane-header > * {
  pointer-events: all;
}
.pane-inner, .pane-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.pane-content {
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .pane:not(:nth-child(1), :nth-child(2)) .pane-inner {
    border-top: 1px solid var(--pane-border);
  }
}
@media (min-width: 768px) {
  .pane:not(:last-child) .pane-inner {
    border-right: 1px solid var(--pane-border);
  }
}

@keyframes spin {
  to { transform: rotate(calc(var(--rot, 0deg) + 360deg)); }
}

.pane-button {
  position: relative;
}
.pane-button a {
  position: absolute;
  inset: 0;
}
.pane-button svg {
  transform: rotate(var(--rot, 0deg));
  transition: transform 500ms ease-out;
}
@media (hover: hover) {
  .pane-button:hover svg {
    animation: spin 1000ms linear infinite;
  }
}
.pane-button:has(> .pane-button-open) .pane-button-close {
  display: none;
}
.pane-button:not(:has(> .pane-button-open)) {
  --rot: 45deg;
}

@media (max-width: 767.98px) {
  app-controller[view="about"] .pane--about .pane-button { --rot: 45deg; }
  app-controller[view="about"] .pane--about .pane-button-open { display: none; }
  app-controller[view="about"] .pane--about .pane-button-close { display: initial; }

  app-controller[view="map"] .pane--map .pane-button { --rot: 45deg; }
  app-controller[view="map"] .pane--map .pane-button-open { display: none; }
  app-controller[view="map"] .pane--map .pane-button-close { display: initial; }

  app-controller[view="filter"] .pane--filter .pane-button { --rot: 45deg; }
  app-controller[view="filter"] .pane--filter .pane-button-open { display: none; }
  app-controller[view="filter"] .pane--filter .pane-button-close { display: initial; }

  app-controller[view="shader"] .pane--shader .pane-button { --rot: 45deg; }
  app-controller[view="shader"] .pane--shader .pane-button-open { display: none; }
  app-controller[view="shader"] .pane--shader .pane-button-close { display: initial; }
}
@media (min-width: 768px) {
  app-controller[view="about"][modal=""] .pane--about .pane-button { --rot: 45deg; }
  app-controller[view="about"][modal=""] .pane--about .pane-button-open { display: none; }
  app-controller[view="about"][modal=""] .pane--about .pane-button-close { display: initial; }

  app-controller[view="map"][modal=""] .pane--map .pane-button { --rot: 45deg; }
  app-controller[view="map"][modal=""] .pane--map .pane-button-open { display: none; }
  app-controller[view="map"][modal=""] .pane--map .pane-button-close { display: initial; }

  app-controller[view="filter"][modal=""] .pane--filter .pane-button { --rot: 45deg; }
  app-controller[view="filter"][modal=""] .pane--filter .pane-button-open { display: none; }
  app-controller[view="filter"][modal=""] .pane--filter .pane-button-close { display: initial; }

  app-controller[view="shader"][modal=""] .pane--shader .pane-button { --rot: 45deg; }
  app-controller[view="shader"][modal=""] .pane--shader .pane-button-open { display: none; }
  app-controller[view="shader"][modal=""] .pane--shader .pane-button-close { display: initial; }
}

.compass {
  width: 187px;
  height: 187px;
  transform-origin: center;
  transform: rotate(var(--compass-angle, 0deg));
}
.compass div {
  position: absolute;
  top: 97px;
  left: 99px;
  font-size: var(--text-s-fs);
  line-height: var(--text-s-lh);
  letter-spacing: var(--text-s-ls);
  color: #D81E05;
}

.compass--desktop {
  z-index: 4;
  position: fixed;
  inset: 0;
  margin: auto;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .compass--desktop {
    opacity: 0;
    transition: opacity var(--intro-duration) ease-in-out var(--intro-delay);
  }
  @starting-style {
    .compass--desktop {
      opacity: 1;
    }
  }
}

.compass--mobile {
  position: relative;
  margin-block: 60px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .compass--mobile {
    display: none;
  }
}

.pane--map .pane-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pane--map .pane-content::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #C5EBFA;
}
map-container {
  position: absolute !important;
}
@media (max-width: 767.98px) {
  map-container {
    inset-inline: 0 !important;
    width: 100%;
    height: calc(100dvh - 3 * var(--collapse));
  }
}
@media (min-width: 768px) {
  map-container {
    inset-block: 0 !important;
    width: calc(100dvw / 16 * 10);
    height: 100%;
  }
}

.pane--text .pane-inner {
  background-color: #EBEBE1;
}
@media (min-width: 768px) {
  .pane--text .pane-inner {
    position: absolute;
    inset-block: 0;
    width: calc(100dvw / 16 * 8);
  }
}

@media (max-width: 767.98px) {
  .pane--about .pane-inner {
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
@media (min-width: 768px) {
  .pane--about .pane-inner {
    display: grid;
    grid-template-columns: min(100%, 25dvw) minmax(0, 1fr);
  }
  .pane--about .pane-section {
    height: 100%;
    min-height: 0;
  }
  .pane--about .pane-section-content {
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .pane--about .pane-section:nth-child(2) .pane-section-content {
    position: absolute;
    inset-block: 0;
    width: calc(100dvw / 16 * 6);
  }
}

.maplibregl-marker {
  /* opacity is for initial appearance, the rest are from .button */
  transition:
    opacity var(--intro-duration) ease-in-out,
    color 300ms ease-out,
    background 300ms ease-out,
    border-radius 300ms ease-out
    !important;
}
.fadein {
  opacity: 1;
  transition: opacity var(--intro-duration) ease-in-out var(--intro-delay);
  transition: opacity var(--intro-duration) ease-in-out allow-discrete var(--intro-delay);
}
.fadein.nodelay {
  transition-delay: 0ms;
}
@starting-style {
  .fadein {
    opacity: 0;
  }
}

@media (min-width: 768px) {
  .about {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .about-text {
    flex: 1;
  }
}
.about-text {
  margin-block-end: 12px;
}
.about-text-more {
  opacity: 1;
  transition: opacity 1000ms ease-out;
  transition: opacity 1000ms ease-out allow-discrete;
}
@starting-style {
  html.loaded .about-text-more {
    opacity: 0;
  }
}
@media (min-width: 768px) {
  app-controller:is(:not([view="about"]), :not([modal=""])) .about-text-more {
    opacity: 0;
    display: none;
  }
}

.footer-mobile {
  margin-block-start: 115px;
}
@media (max-width: 767.98px) {
  .manifesto {
    margin-block: 120px;
  }
  .footer-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .footer-mobile {
    display: none;
  }
}

.pane--place {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pane--place .pane-content {
  position: absolute;
  inset-block: 0;
  width: calc(100dvw / 16 * 8);
}

.pane--shader .pane-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
simulation-container {
  display: block;
  position: absolute;
}
simulation-container::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg, transparent);
}
simulation-container canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 767.98px) {
  simulation-container {
    inset-inline: 0 !important;
    width: 100%;
    height: calc(100dvh - 3 * var(--collapse));
  }
}
@media (min-width: 768px) {
  simulation-container {
    inset-block: 0 !important;
    width: calc(100dvw / 16 * 10);
    height: 100%;
  }
}

.filter-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter, .buttons {
  margin-inline: -5px;
}
.filter {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filter-help {
  color: #D81E05;
}
filter-controller:not([active]) .filter-help--active,
filter-controller[active] .filter-help--idle {
  display: none;
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px;
}
fieldset:not([hidden]) {
  transition: opacity 500ms ease-out, display 500ms ease-out allow-discrete;
}
@starting-style {
  fieldset:not([hidden]) {
    opacity: 0;
  }
}
fieldset[hidden] {
  opacity: 0;
  display: none;
}

.tag {
  padding: 2px 12px;
  border-radius: 15px;
  background-color: #D1D1C6;
  user-select: none;
  white-space: nowrap;
  transition: color 300ms ease-out, background 300ms ease-out, border-radius 300ms ease-out, opacity 300ms ease-out;
}
.tag:not(:has(input:disabled)) {
  cursor: pointer;
}
.tag:has(input:disabled) {
  opacity: 0.5;
}
.tag:not(:has(input:disabled)):hover,
.tag:has(input:checked) {
  border-radius: 0;
  background-color: #17140F;
  color: #D1D1C6;
}
.tag input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.tag-prefix, .tag-suffix {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tag-prefix {
 margin-inline-start: 5px;
}
.tag-suffix {
 /* margin-inline-start: 5px; */
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.button, .pill {
  display: inline-flex;
  height: 16px;
  padding: 4px 12px 2px 12px;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;

  border-radius: 1px;
  background: #17140F;
  color: #F9F9F9;

  font-size: var(--text-s-fs);
  line-height: var(--text-s-lh);
  letter-spacing: var(--text-s-ls);
  text-transform: uppercase;
  text-align: center;

  transition: color 300ms ease-out, background 300ms ease-out, border-radius 300ms ease-out;
}
.button:hover, .pill {
  border-radius: 8px 8px 1px 8px;
  background: #D81E05;
  color: #FB9305;
}

.image-gallery {
  display: block;
  position: relative;
}
.image-gallery-figure {
  transition: opacity 300ms ease-out;
}
.image-gallery-figure--active {
  position: relative;
  z-index: 1;
}
.image-gallery-figure--preload {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.image-gallery img {
  width: 100%;
  aspect-ratio: 800 / 600;
  object-fit: cover;
  border-radius: 1px;
  cursor: pointer;
  background-color: var(--color);
}
.image-gallery figcaption {
  position: absolute;
  margin-block-start: 2px;
  margin-inline: 25px;
}
.image-gallery-nav {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  margin-block-start: 2px;
}

.place {
  display: grid;
  margin-block-end: 40px;
}
@media (min-width: 768px) {
  .place {
    grid-template-columns: repeat(8, 1fr);
    column-gap: var(--grid-gap);
    margin-block-end: 70px;
  }
  .place > * {
    grid-column: 2 / -2;
  }
  .place .image-gallery {
    grid-column: 1 / -1;
  }
}
.place-header {
  position: sticky;
  inset-block-start: 0;
  grid-column: 1 / -1;
  z-index: 2;
}
.place-title {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-start: -10px;
}
.place .image-gallery {
  margin-block-end: 20px;
}
.place-description {
  margin-block-end: 10px;
}
.place-links {
  margin-block-end: 20px;
}
.place-links a {
  font-feature-settings: 'ss01' on;
}
.place-disclaimer {
  margin-block-end: 12px;
  color: #D81E05;
}
.place-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 10px;
}
.place-facts dt {
  text-transform: uppercase;
  white-space: nowrap;
}

.dialog[open] {
  opacity: 1;
}
.dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  inset: 0;
  overscroll-behavior: contain;
  opacity: 0;
  background-color: #F9F9F9;
  transition:
    opacity 500ms ease-out,
    overlay 500ms ease-out,
    display 500ms ease-out;
  transition:
    opacity 500ms ease-out,
    overlay 500ms ease-out allow-discrete,
    display 500ms ease-out allow-discrete;
}
@starting-style {
  .dialog[open] {
    opacity: 0;
  }
}
.dialog::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display 500ms,
    overlay 500ms,
    background-color 500ms;
  transition:
    display 500ms allow-discrete,
    overlay 500ms allow-discrete,
    background-color 500ms;
}
.dialog[open]::backdrop {
  background-color: rgb(0 0 0 / 0%);
}
@starting-style {
  .dialog[open]::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}
.dialog-content {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  padding: 20px;
}
.dialog-header {
  z-index: 3;
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  pointer-events: none;
}
.dialog-button {
  pointer-events: all;
}
.dialog-button svg {
  transform: rotate(45deg);
}
@media not (hover: hover) {
  .dialog-button:focus-visible {
    outline: none;
  }
}

.news {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  align-items: baseline;
}
.news li, .news-item {
  display: contents;
}
.news li.more {
  display: none;
}
.news li:nth-child(5) ~ li.more {
  display: contents;
}
more-controller:not([open]) .news li:nth-child(5) ~ li:not(.more) {
  display: none;
}
.news li.more button {
  text-align: left;
}
.news-item time {
  font-variant-numeric: lining-nums proportional-nums ordinal;
  font-feature-settings: 'ss01' on;
}

@media (max-width: 767.98px) {
  .text {
    display: flex;
    flex-direction: column;
    gap: 80px;
  }
}
@media (min-width: 768px) {
  .text {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: var(--grid-gap);
  }
  .text-sidebar {
    grid-column: 1 / 3;
    align-self: self-start;
    position: sticky;
    top: 0;
  }
  .text-body {
    grid-column: 3 / -1;
    padding-block-end: 200px;
  }
}