/* Homepage: the flow, a run of words and pictures that wraps like a
   paragraph, set close so most of it reads at a glance. Each group in
   parentheses is a section of the site. The words are laid out here, then
   drawn in liquid type on a canvas behind the pictures (js/home.js); once
   that runs, the page's own copy of each word turns transparent but stays
   for links, screen readers, and as the fallback. */

.home {
  /* One row of the flow: the tallest a picture gets. */
  --row: clamp(38px, 6vw, 112px);
  /* The smallest type: counts beside the words, tags beside the pictures. */
  --small: clamp(0.625rem, 0.72vw, 0.8125rem);
  flex: 1 0 auto;
  /* Clear of the fixed nav, by most of a row. */
  padding: calc(56px + var(--row) * 0.7) 5vw 72px;
  color: #111;
  font-family: var(--font-sans);
  font-weight: 300;
}

/* White to match the liquid type's paper. It goes on the body, so the footer
   sits on the same white instead of the site's off-white. */
body:has(> .home) {
  background: #fff;
}

/* The greeting is the first group of the flow; this copy is for screen
   readers, who get the words of the flow as plain links instead. */
.home-greeting {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the flow ----------------------------------------------------------- */

.flow {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--row) * 0.16) calc(var(--row) * 0.2);
}

/* The liquid-type canvas: under the whole flow, and a little past its edges
   so a melting word's glow isn't cut off. */
.flow-stage {
  position: absolute;
  inset: -24px;
}

.flow-stage canvas {
  display: block;
}

/* A group is one section: its parentheses, word and pictures. It adds no box
   of its own, so its pieces still wrap one by one with the rest of the flow. */
.group {
  display: contents;
}

/* Pointing at a group brings it forward and fades the others back (js/home.js
   sets the classes; the canvas fades the words to match). */
.group > * {
  transition: opacity 0.25s ease;
}

.flow.is-focused .group:not(.is-active) > * {
  opacity: 0.22;
}

/* A word, or a parenthesis. The colour is the sketch's ink (js/home.js), for
   the fallback. */
.t {
  position: relative;
  font-size: calc(var(--row) * 0.74);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
}

.t,
a.t:link,
a.t:visited,
a.t:hover {
  color: #181818;
}

.home-live .t,
.home-live a.t:link,
.home-live a.t:visited,
.home-live a.t:hover {
  color: transparent;
}

.keep {
  display: flex;
  align-items: center;
  gap: calc(var(--row) * 0.2);
}

/* A section's word and its count, kept together. The count sits up at the
   top of the word like a superscript, and isn't drawn in liquid type. */
.w {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.n {
  margin-left: 0.15em;
  font-size: var(--small);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #111;
}

/* A few lines of text in the flow, about a row tall. */
.note {
  position: relative;
  width: clamp(15rem, calc(var(--row) * 5), 28rem);
  margin: 0;
  font-size: clamp(0.875rem, 1.1vw, 1.125rem);
  line-height: 1.3;
  color: #111;
  text-wrap: pretty;
}

.pic {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.3em;
  font-size: var(--small);
}

.pic img,
.pic video {
  display: block;
  width: auto;
  height: calc(var(--row) * var(--s, 1));
}

/* A picture's tag: a year and a venue, a medium, a lab, set small at its top
   right, the third size of type on the page after the words and the note. */
.cap {
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

a.pic:link,
a.pic:visited,
a.pic:hover {
  color: #111;
}

/* Pictures wait in greyscale, and a group's take their colour when it's
   brought forward. Only where there's a pointer to do it: a phone, which can't
   hover, keeps them in colour. */
@media (hover: hover) {
  .pic img,
  .pic video {
    filter: grayscale(1);
    transition: filter 0.3s ease;
  }

  .group.is-active .pic img,
  .group.is-active .pic video {
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .group > *,
  .pic img,
  .pic video {
    transition: none;
  }
}

.home a:focus-visible {
  outline: 2px solid #444;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Below desktop the nav is in the page rather than over it. */
@media (max-width: 1023px) {
  .home {
    padding: 40px 22px 56px;
  }
}

/* On a phone the desktop row bottoms out too small to see the pictures, so it
   follows the phone's width instead, and the note gets a line to itself
   rather than a narrow column between pictures. */
@media (max-width: 640px) {
  .home {
    --row: 14vw;
    padding-top: 24px;
  }

  .note {
    flex-basis: 100%;
    width: auto;
    margin: 2px 0 4px;
    font-size: 0.9375rem;
    line-height: 1.4;
  }
}