/* =========================================================
   Max Weber — portfolio
   Values from Figma: Explorations › "Max Portfolio Screens" (3861:6)
   ========================================================= */

:root {
  --ink:        #131313;
  --chip:       #f0f0f0;
  --chip-ink:   #131313;
  --cta:        #131313;
  --cta-ink:    #efefef;
  --sheet:      #fafafa;
  --tile:       #f4f4f4;
  --white:      #ffffff;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: #000;
  color: var(--ink);
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Header — logo hard left, Work / Music / Are.na in the middle,
   CV / Contact hard right (20px insets)
   ========================================================= */
.site-header {
  position: absolute;
  inset: 20px 20px auto 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  z-index: 10;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.logo { display: block; height: 34px; }
.logo img { height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__group { display: flex; align-items: center; gap: 4px; }
/* centred on the screen (the header spans it, with equal insets both sides) */
.nav__group--middle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: var(--chip);
  color: var(--chip-ink);
  border: 0;
  font: 500 12px/1 "Inter Tight", sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip:hover { background: #e2e2e2; }
.chip--dark { background: var(--cta); color: var(--cta-ink); }
.chip--dark:hover { background: #2a2a2a; }

/* ENG / SLO (assets/i18n.js): chips like the nav, bottom left - on phones
   they move into the MENU list. Under the open views (their veils cover it). */
.lang-switch {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 4;
  display: flex;
  gap: 4px;
}
/* the page in one language: what comes in both shows only the one in use */
/* the work page: where the filter (centred at the foot) would reach it, it sits a row up */
@media (max-width: 900px) { body[data-page="work"] .lang-switch { bottom: 52px; } }
html[lang="sl"] [data-lang-only="en"],
html:not([lang="sl"]) [data-lang-only="sl"] { display: none !important; }

.chip:focus-visible,
.house:focus-visible,
.social a:focus-visible,
.cv-tag--link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* =========================================================
   Full-bleed photo pages
   The stage keeps the photo's 1513:1009 frame and covers the
   viewport, so anything placed on it in % stays pinned to the
   same spot in the picture at every screen size.
   ========================================================= */
.photo-page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}
.stage {
  --ratio: 1.4995;
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 100dvh * var(--ratio));
  height: max(100dvh, 100vw / var(--ratio));
  transform: translate(-50%, -50%);
}
.stage > .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   Home — the hut by the lake is the door to the work
   ========================================================= */
.house {
  position: absolute;
  /* Figma: Vector 77 at (726, 438) on a 1513 × 1009 photo offset by (-1, -13) */
  left: 48.05%;
  top: 44.70%;
  width: 8.328%;
  height: 8.176%;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.house svg { width: 100%; height: 100%; overflow: visible; display: block; }
.house path {
  fill: #efefef;
  fill-opacity: 0;
  stroke: #efefef;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-dasharray: 1;   /* path has pathLength="1" */
  stroke-dashoffset: 1;
  transition:
    stroke-dashoffset 0.6s var(--ease),
    fill-opacity 0.35s var(--ease) 0s;
}
/* hover: the outline draws itself round the hut, then the shape fills in */
.house:hover path,
.house:focus-visible path {
  stroke-dashoffset: 0;
  fill-opacity: 1;
  transition:
    stroke-dashoffset 0.6s var(--ease),
    fill-opacity 0.4s var(--ease) 0.4s;
}
.house:active svg { transform: scale(0.97); transition: transform 0.1s; }

/* click: step into the hut — the vector zooms until its white fills the
   screen (the zoom itself is driven from app.js), then the work page opens */
.house.is-entering { pointer-events: none; z-index: 5; }
.house.is-entering path {
  fill: #ffffff;
  fill-opacity: 1;
  stroke-opacity: 0;
  transition: fill 0.35s var(--ease), stroke-opacity 0.2s var(--ease);
}
.is-entering-hut .site-header {
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

/* no hover on touch screens — let the outline breathe as a hint instead */
@media (hover: none) {
  .house path { stroke-dashoffset: 0; animation: house-hint 2.4s var(--ease) infinite; }
}
@keyframes house-hint {
  0%, 100% { stroke-opacity: 0; }
  50%      { stroke-opacity: 0.85; }
}

/* =========================================================
   Work — Osmo Supply infinite draggable grid, full screen
   ========================================================= */
.work-page { background: var(--white); min-height: 100vh; }
body[data-page="work"] { overflow: hidden; }

.infinite-view {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--white);
}

/* ---------- Osmo Supply — Infinite Draggable Grid (Basic) ---------- */
.infinite-grid {
  touch-action: none;
  width: 100%;
  height: 100svh;
  position: relative;
  overflow: clip;
  cursor: grab;
  transition: opacity 0.5s ease;
  opacity: 1;
}

.infinite-grid[data-infinite-grid-status="loading"] {
  opacity: 0;
}

.infinite-grid[data-infinite-grid-status="dragging"] {
  cursor: grabbing;
}

.infinite-grid__collection {
  will-change: transform;
  width: 100%;
  height: 100%;
  position: absolute;
}

.infinite-grid__list {
  grid-template-columns: repeat(var(--grid-columns), auto);
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
}

.infinite-grid__item {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 10em;      /* changed from 13em on request — smaller cards */
  padding: 1.75em;
  font-size: clamp(1.5em, 2vw, 3em);
  display: flex;
}

.infinite-grid__card {
  -webkit-user-select: none;
  user-select: none;
  border-radius: .125em;
  width: 80%;
  height: 100%;
  position: relative;
}

.infinite-grid__card.is--landscape {
  width: 100%;
  height: 75%;
}

/* added: a video tile's preview loop, over its still while it's on screen (app.js) */
.infinite-grid__card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.infinite-grid__card-video.is-playing { opacity: 1; }
/* added: the work filter - chips like the nav, centred at the foot of the page */
.work-filter {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100vw - 28px);
  transition: opacity 0.3s ease;
}
.is-project-open .work-filter { opacity: 0; pointer-events: none; }
/* tiles outside the chosen category stay in place, faded */
body[data-page="work"] .infinite-grid__card { transition: opacity 0.35s ease; }
body[data-page="work"] .infinite-grid__card.is-dimmed { opacity: 0.12; }
@media (max-width: 640px) {
  .work-filter { bottom: 28px; gap: 2px; }
  .work-filter .chip { padding: 6px 8px; }
}

/* added: square corners on the work page */
body[data-page="work"] .infinite-grid__card,
body[data-page="work"] .work-expand__card,
body[data-page="work"] .work-expand__player { border-radius: 0; }

/* added: the page's title, as a tile in the grid (scales with the cards) */
.grid-title {
  margin: 0;
  font: 400 1.1em/1.05 "Inter Tight", sans-serif;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  -webkit-user-select: none;
  user-select: none;
}
.work-page--dark .grid-title { color: #efefef; }
/* it rides above the grid on its own (see app.js), over one hidden tile */
.grid-title-tile {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.infinite-grid__item.is--under-title { visibility: hidden; }

/* added: album covers are square — the card fills the whole cell */
.infinite-grid__card.is--square {
  width: 100%;
  height: 100%;
}

.infinite-grid__card-img {
  pointer-events: none;
  object-fit: contain;      /* changed from cover — works are always shown whole, never cropped */
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
}
/* ---------- end Osmo Supply (grid) ---------- */

/* Keep the browser's own drag-and-drop and text selection out of the grid:
   with a selection on the page, pressing and moving would otherwise pick the
   images up as a drag ghost and freeze the grid underneath. (app.js also
   cancels dragstart and clears any selection on press.) */
.infinite-grid {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.infinite-grid img { -webkit-user-drag: none; }

/* ---------- Osmo Supply — Scramble Text Cursor ----------
   As supplied, recoloured to the Figma pill (#efefef / #131313, square) and
   without the chevron, removed on request. */
.cursor {
  z-index: 25;
  pointer-events: none;
  padding-top: 1em;
  padding-left: .5em;
  padding-right: 1em;
  position: fixed;
  top: 0;
  left: 0;
}

.cursor-scramble {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  opacity: 0;
  color: #131313;              /* changed from #fff */
  background-color: #efefef;   /* changed from #000 */
  border-radius: 0;            /* changed from .25em — square like the site's chips */
  justify-content: center;
  align-items: center;
  height: 2em;
  padding-left: .75em;
  padding-right: .75em;
  display: flex;
  position: relative;
}

.cursor-scramble__text {
  letter-spacing: -.01em;
  white-space: nowrap;
  font-size: .875em;
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  [data-cursor] .cursor-scramble {
    transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.2s ease 0.1s;
    transform: translateX(0%) scale(1) rotate(0.001deg);
  }

  [data-cursor="active"] .cursor-scramble {
    transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.2s ease 0s;
    opacity: 1;
    transform: translateX(0%) scale(1) rotate(0.001deg);
  }

  [data-cursor="active-edge"] .cursor-scramble {
    transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.2s ease 0s;
    opacity: 1;
    transform: translateX(-100%) scale(1) rotate(0.001deg);
  }
}

@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none;
  }
}
/* ---------- end Osmo Supply (cursor) ---------- */

/* =========================================================
   Work — a clicked card opens to the centre
   (Figma: Work — Grid 4)
   ========================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font: 500 14px/1 "Inter Tight", sans-serif;
  white-space: nowrap;
}
.pill[hidden] { display: none; }
.pill--dark { background: var(--cta); color: var(--cta-ink); }
/* added: a white pill - the credit at the end of a project */
.pill--white { background: #ffffff; color: var(--ink); box-shadow: 0 1px 6px rgba(19, 19, 19, 0.08); }
/* 8px under the last image, like the pills over the first (the column gap is 24px) */
.project__credit { margin: -16px 0 0; display: flex; justify-content: center; cursor: auto; }

.work-expand {
  position: fixed;
  inset: 0;
  z-index: 5;            /* under the header, which stays usable */
  cursor: zoom-out;
}
.work-expand[hidden] { display: none; }
.work-expand__veil {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0.7;
}
/* sized to the work's own proportions (app.js), so nothing is cropped or letterboxed */
.work-expand__card {
  position: absolute;
  overflow: hidden;
  border-radius: 0.125em;
  transform-origin: 0 0;
}
.work-expand__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.work-expand .pill {
  position: absolute;
  max-width: calc(100vw - 32px);
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
/* Spotify's player under an opened album */
.work-expand__player {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  background: #121212;
  cursor: auto;
}
.work-expand__player[hidden] { display: none; }
.work-expand__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   Work — an opened project (app.js; Figma: Work — Open project)
   ========================================================= */
.project {
  position: fixed;
  inset: 0;
  z-index: 5;            /* under the header, which stays usable */
  cursor: zoom-out;
}
.project[hidden] { display: none; }
.project__veil {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0.7;
}
/* the column scrolls the whole height of the screen, under the header */
.project__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.project__scroll::-webkit-scrollbar { display: none; }
.project__col {
  width: min(640px, 100vw - 32px);   /* set exactly by app.js */
  margin: 0 auto;
  padding: 102px 0;
  display: flex;
  flex-direction: column;
  align-items: center;   /* landscapes span it, portraits sit in the middle */
  gap: 24px;
}
/* name and categories, 8px over the first image */
.project__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: -16px;
  align-self: stretch;
  cursor: auto;
}
.project__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  transform-origin: 0 0;
  cursor: auto;
}

/* =========================================================
   Music — the work page on black
   ========================================================= */
body[data-page="music"],
.work-page--dark,
.work-page--dark .infinite-view { background: #000; }
/* the dark Contact chip would vanish on black — give it a light edge */
.work-page--dark .chip--dark { box-shadow: inset 0 0 0 1px rgba(239, 239, 239, 0.45); }
/* an opened cover: black veil, light pills */
body[data-page="music"] .work-expand__veil { background: #000; opacity: 0.8; }
body[data-page="music"] .pill--dark { background: #efefef; color: var(--ink); }

/* =========================================================
   Are.na — the boards, live (assets/arena.js)
   ========================================================= */
.arena-page { background: var(--white); min-height: 100vh; }
.arena { padding: 120px 20px 64px; }
.arena-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 56px;
}
.arena-title { margin: 0; font: 400 32px/1 "Inter Tight", sans-serif; color: var(--ink); }

.board { margin-bottom: 44px; }
.board__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.board__title {
  font: 500 14px/1 "Inter Tight", sans-serif;
  color: var(--ink);
  text-decoration: none;
}
a.board__title:hover { text-decoration: underline; text-underline-offset: 3px; }

/* one row per board, scrolling sideways; every block keeps its own proportions */
.board__strip {
  display: flex;
  gap: 6px;
  height: 140px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.board__strip::-webkit-scrollbar { display: none; }
.block { flex: 0 0 auto; height: 100%; display: block; color: var(--ink); text-decoration: none; }
.block img { height: 100%; width: auto; display: block; }
.block:hover img { opacity: 0.85; }
.block--text,
.block--more {
  width: 140px;
  padding: 10px;
  overflow: hidden;
  font: 400 11px/1.35 "Inter Tight", sans-serif;
}
.block--text { background: var(--tile); }
.block--more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chip);
  font: 500 12px/1 "Inter Tight", sans-serif;
  text-transform: uppercase;
  text-align: center;
}
.block--more:hover { background: #e2e2e2; }

.skeleton { background: var(--tile); animation: arena-pulse 1.6s ease-in-out infinite; }
.board--loading .board__title { display: inline-block; width: 120px; height: 14px; }
.board--loading .block { width: 110px; }
.arena-fallback { font: 400 14px/1.5 "Inter Tight", sans-serif; color: var(--ink); }
.arena-fallback a { color: inherit; }

/* =========================================================
   CV — the A4 sheet, laid out on the Figma's 595 × 842 grid
   and scaled as one piece to fit the window
   ========================================================= */
.cv-wrap {
  --s: 1;
  position: absolute;
  left: 50%;
  top: calc(50% - 20px);   /* the sheet and the download button under it (16 + 24px), centred together */
  width: calc(595px * var(--s));
  height: calc(842px * var(--s));
  transform: translate(-50%, -50%);
  z-index: 1;
}
.cv {
  position: absolute;
  left: 0;
  top: 0;
  width: 595px;
  height: 842px;
  background: var(--sheet);
  color: #000;
  overflow: hidden;
  transform: scale(var(--s));
  transform-origin: 0 0;
  font-size: 12px;
}
.cv p { margin: 0; }

/* Figma trims every text box to cap-height / baseline. */
.cv .t { line-height: normal; margin-block: -0.242em; }
@supports (text-box: trim-both cap alphabetic) {
  .cv .t { text-box: trim-both cap alphabetic; margin-block: 0; }
}
.cv .med  { font-weight: 500; }
.cv .semi { font-weight: 600; }
.cv .o50  { opacity: 0.5; }
.cv .o20  { opacity: 0.2; }
.cv .o30  { opacity: 0.3; }
.cv .cv-ink { color: #131313; }

.cv-block { position: absolute; display: flex; flex-direction: column; align-items: flex-start; }
.cv-block .head { padding: 4px 0; }
.gap4  { gap: 4px; }
.gap8  { gap: 8px; }
.gap12 { gap: 12px; }
.gap24 { gap: 24px; }

.cv-tags { position: absolute; display: flex; align-items: center; }
.cv-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 5px;
  background: #d9d9d9;
  color: #000;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
}
.cv-tag--green  { background: #baee7b; }
.cv-tag--orange { background: #f46a2f; }
.cv-tag--pink   { background: #f2b3ff; }
.cv-tag--blue   { background: #a0b3c5; }
.cv-tag--rose   { background: #f47eb1; }
.cv-tag--sky    { background: #62adf9; }
.cv-tag--link { flex: 1 0 0; justify-content: center; }
.cv-tag--link:hover { filter: brightness(0.92); }

.cv-mark { position: absolute; left: 20px; top: 20px; width: 22px; height: 17px; }
.cv-rule { position: absolute; left: 0; width: 595px; height: 1px; }

/* the photo: 84px, opening to 164px on hover from the middle of its right
   edge - the right edge and the vertical centre (y 246) stay put, so it grows
   out to the left edge of the orange "2D+3D" pill (x 411) */
.cv-photo {
  position: absolute;
  right: 20px;
  top: 246px;
  transform: translateY(-50%);
  width: 84px;
  height: 84px;
  overflow: hidden;
  transition: width 0.45s var(--ease), height 0.45s var(--ease);
}
.cv-photo:hover { width: 164px; height: 164px; }
.cv--sl .cv-photo:hover { width: 192px; height: 192px; }   /* the Slovenian 2D+3D pill sits further left (x 383) */
.cv-photo img { position: absolute; left: -21%; top: -7%; width: 142%; height: 142%; max-width: none; }

/* the download button, centred under the sheet */
.cv-download {
  position: absolute;
  left: 50%;
  top: calc(100% + 16px);
  transform: translateX(-50%);
}

/* printing the page (and so the PDF): just the sheet, on A4 */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fafafa; }
  .stage, .site-header, .cv-download, .lang-switch { display: none !important; }
  .cv-wrap { position: static; transform: none; width: 210mm; height: 297mm; }
  .cv { transform: none; zoom: 1.33389; }   /* 595 px wide sheet = 210 mm */
  .cv, .cv * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .enter, .enter-in, .enter-fade { animation: none !important; }   /* no entrance - each keeps its own opacity */
  .cv-rule { margin-top: -0.25px; }   /* at some fractional positions the PDF drops a 1px line; this keeps both */
}

/* =========================================================
   Contact
   ========================================================= */
.social {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  padding: 10px;
  z-index: 1;
}
.social a {
  display: inline-flex;
  padding: 6px 12px;
  color: var(--cta-ink);
  font: 500 16px/1 "Inter Tight", sans-serif;
  text-decoration: none;
  background: var(--cta);
  transition: background-color 0.2s var(--ease);
}
.social a:hover { background: #2a2a2a; }
.social a:focus-visible { outline-color: var(--ink); }  /* light text would make a light ring on the sky */

/* =========================================================
   Page transitions
   ========================================================= */
@view-transition { navigation: auto; }

/* home → work: the landscape lifts away and the work rises in */
html:active-view-transition-type(rise)::view-transition-old(root) {
  animation: vt-lift 0.6s var(--ease) both;
}
html:active-view-transition-type(rise)::view-transition-new(root) {
  animation: vt-rise 0.6s var(--ease) both;
}
@keyframes vt-lift { to   { transform: translateY(-100%); } }
@keyframes vt-rise { from { transform: translateY(100%); } }

/* arriving through the hut: the page is already white, so the header
   surfaces and the work fades in card by card (app.js) */
.from-hut .site-header { animation: hut-in 0.6s var(--ease) 0.05s both; }
@keyframes hut-in {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

/* =========================================================
   Page entrance — home, CV and contact
   The photo fades up, then the logo and nav chips rise in one after
   another, then the page's own content (the CV sheet and its sections,
   the contact links). Uses `translate`, which stacks with the transforms
   these elements already have for centring.
   ========================================================= */
@keyframes enter-rise {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes enter-fade { from { opacity: 0; } }

.enter-fade { animation: enter-fade 0.9s var(--ease) both; }
.enter {
  animation: enter-rise 0.7s var(--ease) both;
  animation-delay: calc(0.15s + var(--i, 0) * 80ms);
}
/* the CV's sections, a quick cascade once the sheet has landed */
.enter-in {
  animation: enter-rise 0.6s var(--ease) both;
  animation-delay: calc(0.6s + var(--j, 0) * 35ms);
}

/* =========================================================
   Small screens
   ========================================================= */
@media (max-width: 640px) {
  .site-header { inset: 14px 14px auto 14px; }
  .logo, .logo img { height: 28px; }
  .social { gap: 8px; flex-direction: column; align-items: center; }
  .nav, .nav__group { gap: 2px; }
  .nav .chip { padding: 6px 8px; }
  /* no room for three groups in a row on a phone: the middle one goes under them */
  .nav__group--middle { top: 38px; }
  .arena { padding: 96px 16px 48px; }
  .board__strip { height: 110px; }
  .block--text, .block--more { width: 110px; }
}

/* =========================================================
   Phones: one MENU chip; the pages as a full-screen list
   (app.js; Figma: Mobile nav - fix)
   ========================================================= */
.nav-toggle,
.site-menu { display: none; }
@media (max-width: 640px) {
  .site-header .nav { display: none; }
  .nav-toggle { display: inline-flex; padding: 6px 8px; }
  .site-header .logo,
  .nav-toggle { position: relative; z-index: 2; }   /* above the open list */
  .site-menu:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: #ffffff;
  }
  .site-menu .chip { font-size: 22px; padding: 10px 16px; }
  .lang-switch { display: none; }
  .site-menu .lang-switch { display: flex; position: absolute; left: 14px; bottom: 14px; gap: 2px; }
  .site-menu .lang-switch .chip { font-size: 12px; padding: 6px 8px; }
  body.menu-open { overflow: hidden; }
  /* the white logo turns dark on the white list */
  .menu-open .site-header--light .logo img { filter: invert(1); }
  /* music is black: the list is too */
  body[data-page="music"] .site-menu { background: #000; }
  body[data-page="music"].menu-open .site-header--light .logo img { filter: none; }
  body[data-page="music"] .site-menu .chip { background: #2a2a2a; color: #efefef; }
  body[data-page="music"] .site-menu .chip--dark,
  body[data-page="music"] .nav-toggle.chip--dark { background: #efefef; color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .house path, .chip { transition: none; animation: none; }
  .from-hut .site-header { animation: none; }
  .enter, .enter-in, .enter-fade { animation: none; }
  .skeleton { animation: none; }
  @view-transition { navigation: none; }
}