/* ==========================================================================
   Hedvika Marešová — portfolio

   Scaling system carried over from the mockups: 1rem = 1/120 of the viewport
   width (10px on a 1200px screen) and everything is sized in rem, so the whole
   layout scales proportionally on any screen, 4K included. Below 700px the
   base is pinned to 10px so text stays readable and the layout switches.
   ========================================================================== */

html {
  font-size: calc(100vw / 120);
  /* Hold the scrollbar's width whether or not the page scrolls. Without it a
     short page is a scrollbar wider than a long one, and the bar visibly jumps
     sideways on the way from the portfolio to a page that fits. No effect
     where scrollbars overlay the page, as they do on macOS by default. */
  scrollbar-gutter: stable;
}

:root {
  --ink: #1a1a1a;
  --paper: #ffffff;
  --placeholder: #e9e9e9;
  --placeholder-ink: #b5b5b5;
  --gray-block: #b8b4b1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Roboto", sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1.4;
}

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

img, video { max-width: 100%; }

/* eleventy-img wraps every <img> in a <picture>. It is a layout-neutral
   wrapper, so it is taken out of the box tree entirely and the <img> keeps
   participating directly in the flex and grid boxes that size it — which is
   what the .thumb / .g-item / .block-full rules below already assume. */
picture { display: contents; }

.page {
  width: 100%;
  margin: 0 auto;
  /* 4rem at the top, not 6: the index used to sit lower than every other page,
     which showed as the bar moving whenever you navigated. One value for all,
     and it is the tighter one — the content starts above the fold rather than
     a screen down. */
  padding: 4rem 14rem 8rem;
}

/* Visible to screen readers only — used for headings that the design drops
   but the document outline still needs. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
}

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

/* The header sits on the same 82% column as .intro and .gallery, so the bar
   starts exactly where the text on a project page does. EN is pushed to the
   far edge of that column; everything else stays left. */
header {
  display: flex;
  align-items: center;
  width: 82%;
  margin: 0 auto 3.5rem;
}

/* The artwork every bar points at with <use>. Deliberately not display:none —
   a <use> cannot reach into a subtree that has been taken out of rendering,
   and the whole bar would come up empty. */
.topbar-art {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The bar takes a fixed share of the column rather than filling it. It is one
   drawing scaled to its box, so its width is its size — 70% here is the bar
   about a third smaller than it was when it stretched the full page. */
.topbar-nav {
  flex: 0 0 70%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* No overflow rule here: an outer <svg> clips to its viewBox by default, which
   is exactly what turns the phone bars into crops of the same drawing. */
.topbar {
  display: block;
  width: 100%;
  height: auto;
}
.topbar--row { display: none; }

.tb-ink { fill: var(--ink); }

/* transparent rather than none — a fill of none takes no pointer events, and
   the letterforms on their own are a miserable target */
.tb-hit { fill: transparent; }

/* The "aktiv" state the designer drew: a scribbled bar behind portfolio, a
   cluster of blobs behind kontakt, letters knocked out white over both. */
.tb-active {
  opacity: 0;
  fill: var(--ink);
}
.tb-active.tb-scribble {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

/* Hover and keyboard focus paint the aktiv state; so does being the current
   page. For portfolio that means the index and every project page, so the
   scribble stays put the whole time you are browsing the work. */
.tb-link:hover .tb-active,
.tb-link:focus-visible .tb-active,
.tb-link[aria-current] .tb-active { opacity: 1; }

/* The logo came without an aktiv drawing, so its letters have to stay black —
   knocking them out would leave white on white. */
.tb-link:not(.tb-logo):hover .tb-ink,
.tb-link:not(.tb-logo):focus-visible .tb-ink,
.tb-link:not(.tb-logo)[aria-current] .tb-ink { fill: var(--paper); }

.tb-link:focus-visible {
  outline: 0.2rem solid var(--ink);
  outline-offset: 0.2rem;
}

.lang {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 1.3rem;
}

.lang a:hover {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}

/* ---------- portfolio index ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6rem 2.4rem;
}

.item .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--placeholder-ink);
  font-size: 1.1rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.thumb img,
.thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item .caption {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  /* 25% down from the 1.1rem the rest of the small type uses */
  font-size: 0.825rem;
  /* Titles print as they are typed in the CMS — no forced case. */
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.item:hover .caption { text-decoration: underline; text-underline-offset: 0.3rem; }

.down {
  display: flex;
  justify-content: flex-end;
  margin-top: 5rem;
  font-size: 3.4rem;
  line-height: 1;
}

/* ---------- detail: intro / text ---------- */

.intro {
  width: 82%;
  margin: 0 auto 4rem;
  display: grid;
  grid-template-columns: 1fr 2.3fr;
  gap: 5rem;
}

.intro .meta {
  font-family: "Roboto Mono", monospace;
  font-size: 1.05rem;
  line-height: 1.7;
}
.intro .meta .line { font-weight: 700; }
.intro .meta .credits { margin-top: 1.8rem; font-weight: 400; }

/* On a project the credits are a step below the venue lines above them: three
   points off the meta size on the 1200px design scale, with the leading pulled
   in to match. The contact page is left alone — the same block holds the
   e-mail and phone number there, which is what a visitor came for. */
.intro:not(.intro--single) .meta .credits {
  font-size: 0.75rem;
  line-height: 1.45;
}

.intro .text {
  column-count: 2;
  column-gap: 4rem;
  font-size: 1rem;
  line-height: 1.5;
}
.intro .text p { margin-bottom: 1.1em; }
.intro .text p:last-child { margin-bottom: 0; }

/* Links in the running text. Nearly everything else on the site is a link, so
   the global rule strips their decoration; inside a sentence it has to come
   back, or a linked exhibition title reads as the words around it. Thickness
   rather than colour, because the palette is black on white and stays that
   way. */
.intro .text a,
.intro .meta a {
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
}
.intro .text a:hover,
.intro .meta a:hover {
  text-decoration-thickness: 0.17em;
}

/* The institution list on the o mně page: a name, then the projects done for
   it in brackets. A list rather than a paragraph because it grows — Museum
   Kampa alone runs to several exhibitions. */
.refs {
  list-style: none;
  margin-top: 1.6em;
}
.refs li { margin-bottom: 0.5em; }
.refs li:last-child { margin-bottom: 0; }
.refs-name { font-weight: 500; }

/* the contact page runs a single column of text */
.intro--single { margin-bottom: 0; }
.intro--single .text { column-count: 1; }

/* ---------- detail: gallery ---------- */

.gallery {
  width: 82%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

/* A run of grid-shaped items. Rows are 0.25rem tall and each shape spans a
   whole number of them, which gives true masonry — two `wide` items stack in
   the third column beside a `tall` one, exactly as in the mockup.

   The spans are derived from the fixed layout: the gallery is 82% of the
   120rem page minus 28rem of padding = 75.44rem, so with three columns and a
   1.8rem gutter each column is 23.95rem wide. Each item carries a 1.8rem
   bottom margin (the row gap, taken out of its span), so the visible height
   is a quarter of the span minus 1.8:
     tall    23.95 x 4.35/3 = 34.72rem  -> span 146, renders 34.70rem
     square  23.95 x 1      = 23.95rem  -> span 103, renders 23.95rem
     wide    23.95 x 2.75/4 = 16.46rem  -> span 73,  renders 16.45rem
   All within 0.1% of the mockup. The quarter-rem unit is what lets two `wide`
   spans (73 + 73) come to exactly one `tall` span (146), so a stacked pair
   ends level with the tall items beside it and the next row starts clean.
   Recompute these if the page padding, gallery width or gutter change. */
.grid-run {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.8rem;
  row-gap: 0;
  grid-auto-rows: 0.25rem;
  grid-auto-flow: row dense;
  /* cancels the last row's bottom margin so the flex gap above isn't doubled */
  margin-bottom: -1.8rem;
}

.g-item {
  margin-bottom: 1.8rem;
  background: var(--placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--placeholder-ink);
  font-size: 1.1rem;
  overflow: hidden;
}
.g-item img,
.g-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.g-tall   { grid-row: span 146; }
.g-square { grid-row: span 103; }
.g-wide   { grid-row: span 73; }

/* The same two shapes at half the gallery width instead of a third, so two sit
   side by side rather than three. A run is either all thirds or all halves —
   groupMedia keeps them apart — so this only swaps the column count; the row
   unit, gutter and dense flow above still apply.

   Two columns of the 75.44rem gallery with a 1.8rem gutter are 36.82rem wide:
     tall-large  36.82 x 4.35/3 = 53.39rem
     wide-large  36.82 x 2.75/4 = 25.31rem
   The spans are tied to each other rather than to those numbers: 218 is exactly
   twice 109, so a stacked pair of wide-large still ends level with a tall-large
   beside it, the way 73 + 73 = 146 does at a third of the width. At this width
   the two cannot both hold, and keeping the pairing costs about 1% of height —
   tall-large renders 52.70rem and wide-large 25.45rem. */
.grid-run--large { grid-template-columns: repeat(2, 1fr); }

.g-tall-large { grid-row: span 218; }
.g-wide-large { grid-row: span 109; }

/* full-bleed item, keeps its own aspect ratio */
.block-full {
  background: var(--placeholder);
  overflow: hidden;
  line-height: 0;
}
.block-full img,
.block-full video {
  width: 100%;
  height: auto;
  display: block;
}

/* grey band with a centred portrait poster */
.mp4-block {
  position: relative;
  background: var(--gray-block);
  padding: 8rem 0 9rem;
  display: flex;
  justify-content: center;
}

.mp4-block .poster {
  width: 40%;
  aspect-ratio: 21 / 29.7;
  background: var(--paper);
  box-shadow: 0 0.4rem 2.5rem rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c9c9c9;
  font-size: 1.1rem;
  overflow: hidden;
}
.mp4-block .poster img,
.mp4-block .poster video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp4-block .mp4-label {
  position: absolute;
  left: 4%;
  bottom: 12%;
  font-family: "Times New Roman", Times, serif;
  font-size: 13rem;
  line-height: 1;
  color: #3d3d42;
  pointer-events: none;
}

/* ---------- small screens: stop shrinking, switch layout ---------- */

@media (max-width: 700px) {
  html { font-size: 10px; }

  .page { padding: 4rem 2rem 6rem; }

  /* The whole bar squeezed into a phone would set the nav about 7px tall, so
     the two cropped rows take over: logo above, nav below. The column is the
     full width here, as .intro and .gallery are. */
  header { flex-direction: column; align-items: flex-start; gap: 1.6rem; width: 100%; }
  header { margin-bottom: 4rem; }
  .topbar-nav { flex: 0 0 auto; width: 100%; gap: 1.8rem; }
  .topbar--full { display: none; }
  .topbar--row { display: block; }

  .grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.6rem; }

  .intro { width: 100%; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3rem; }
  /* Once the base is pinned at 10px, 0.75rem is 7.5px — too small to read on a
     phone, and there is no dense left column to keep it out of the way. The
     credits keep the meta size here; only the tighter leading carries over. */
  .intro:not(.intro--single) .meta .credits { font-size: 1.05rem; }
  /* The desktop text is set small to keep the gallery above the fold. On a
     phone the page scrolls anyway, so readability wins. */
  .intro .text { column-count: 1; font-size: 1.2rem; line-height: 1.6; }

  .gallery { width: 100%; gap: 0.96rem; }

  /* one column, natural aspect ratios — no span arithmetic */
  .grid-run {
    display: flex;
    flex-direction: column;
    gap: 0.96rem;
    margin-bottom: 0;
  }
  .g-item { margin-bottom: 0; }
  /* One column leaves nothing for a wider variant to be wider than, so the
     large shapes are simply their base shapes here. */
  .g-tall,
  .g-tall-large { aspect-ratio: 3 / 4.35; }
  .g-square     { aspect-ratio: 1 / 1; }
  .g-wide,
  .g-wide-large { aspect-ratio: 4 / 2.75; }

  .mp4-block { padding: 4rem 0 5rem; }
  .mp4-block .poster { width: 70%; }
  .mp4-block .mp4-label { font-size: 8rem; }
}