/* ───── Art ─────
   The frame, the header and the set heads come from page.css; what is left
   here is the gallery itself. */

/* Uniform tiles rather than true-aspect cards: the pieces range from 9:16 to
   16:9, and letting each keep its own ratio left ragged holes across every
   row. Each tile crops to a common frame; opening a piece shows it uncropped.

   Fixed-width tracks rather than fractional ones: with 1fr a set holding one
   piece stretched that tile across the whole row. The rows are centred under
   their heading, which puts the gallery on the same axis as the short film
   above it. */
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 250px));
  justify-content: center;
  gap: 1rem;
}

/* Two columns at phone width. One column blew each piece up to the full
   measure, which turned a fourteen-piece gallery into a very long scroll. */
@media (max-width: 720px) {
  .art-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
}

.art-card {
  margin: 0;
  background: rgba(var(--bg-rgb), 0.5);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  background: var(--wash);
  transition: border-color var(--ease), box-shadow var(--ease);
}

.art-card:is(:hover, .is-hover) {
  border-color: rgba(var(--fg-rgb), 0.75);
  box-shadow: 0 0 16px rgba(var(--fg-rgb), 0.22);
}

/* A feature piece spans two columns where there is room for it. */
.art-card.is-openable {
  cursor: zoom-in;
}

/* Every tile is the same shape. The pieces range from 9:16 to 16:9, and
   letting each keep its own ratio left the gallery ragged — tiny landscape
   cards beside towering portrait ones. Tiles crop to a common frame; opening
   a piece shows it uncropped and full length. */
/* The music video is 16:9; cropping it into the portrait tile lost most of
   the frame, so it takes two columns at its own ratio. */
.art-card--wide {
  grid-column: span 2;
}

.art-card--wide .art-media {
  aspect-ratio: 16 / 9;
}



.art-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg);
  overflow: hidden;
}



.art-media video,
.art-media iframe,
.art-media .art-still,
.art-play img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: none;
  filter: none;
}

.art-play {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: var(--bg);
  cursor: pointer;
  display: block;
}

.art-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--fg-rgb), 0.8);
  border-radius: 50%;
  color: var(--fg);
  font-size: 1.1rem;
  background: rgba(var(--bg-rgb), 0.55);
  text-shadow: 0 0 10px rgba(var(--fg-rgb), 0.8);
  transition: all 0.2s ease;
}

.art-play:is(:hover, .is-hover) .art-play-icon {
  background: rgba(var(--fg-rgb), 0.16);
  box-shadow: 0 0 20px rgba(var(--fg-rgb), 0.45);
}

.art-caption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--rule);
  flex: 1;
}

.art-card-title {
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  color: var(--fg);
}

/* The "how it was made" line: the part that makes the work legible as craft. */
.art-card-made {
  font-size: var(--t-label);
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  line-height: 1.45;
}

.art-empty {
  border: 1px dashed var(--rule-strong);
  padding: 2.5rem;
  text-align: center;
  color: var(--ink-dim);
  line-height: 2;
}

.art-empty code {
  background: rgba(var(--fg-rgb), 0.08);
  color: var(--fg);
  padding: 0.15em 0.45em;
}


/* ───── Viewer ───── */
body.art-viewer-open {
  overflow: hidden;
}

.art-viewer[hidden] {
  display: none;
}

.art-viewer {
  position: fixed;
  inset: 0;
  background: rgba(var(--bg-rgb), 0.97);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.art-viewer-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: 0;
}

.art-viewer-stage video,
.art-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid rgba(var(--fg-rgb), 0.25);
  filter: none;
}

.art-viewer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: rgba(var(--fg-rgb), 0.78);
  flex-wrap: wrap;
}

.art-viewer-keys {
  color: var(--ink-faint);
}

.art-viewer-close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: var(--ink-dim);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--ease);
}

.art-viewer-close:is(:hover, .is-hover) {
  color: var(--fg);
}

/* ───── Technique sets ───── */
/* Pieces made the same way sit on the same row, with a quiet rule between
   sets. The heads themselves are the shared .set-head from page.css. */
.art-set {
  margin-bottom: 2.5rem;
}

/* Fourteen saturated pieces at once was a wall of colour. Tiles rest slightly
   held back and come to full strength under the cursor, which also makes the
   hover state obvious. */
.art-media video,
.art-play img {
  filter: saturate(0.82) brightness(0.78);
  transition: filter 0.2s ease;
}

.art-card:is(:hover, .is-hover) .art-media video,
.art-card:is(:hover, .is-hover) .art-play img {
  filter: saturate(1.02) brightness(1);
}

/* The charcoal drawings are white chalk on black — already low-key, so the
   resting dim that calms the colour pieces would black them out entirely. */
.art-media .art-still {
  filter: brightness(1.05);
  transition: filter 0.2s ease;
}

.art-card:is(:hover, .is-hover) .art-media .art-still {
  filter: brightness(1.25);
}

/* ───── Short film ───── */
/* One piece, centred, sized so the section stands about as tall as a row of
   tiles rather than swallowing the screen. */
.art-film {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

/* A still that opens the film on Vimeo, rather than an embedded player: the
   player arrives wrapped in a title bar, avatar and share row that has nothing
   to do with this page. */
.art-film-frame {
  position: relative;
  display: block;
  /* The film is vertical; the still keeps its own shape, sized so the section
     stands about as tall as a row of tiles. */
  /* Sized off a tile rather than a fixed height: the tiles shrink with the
     window, and a fixed film towered over them. One tile wide, and taller by
     the difference between its 4:5 crop and the film's own shape. */
  width: min(250px, 45vw);
  aspect-ratio: 1280 / 1830;
  background: var(--bg);
  overflow: hidden;
  border: 1px solid var(--rule);
  transition: border-color var(--ease), box-shadow var(--ease);
}

.art-film-frame:is(:hover, .is-hover) {
  border-color: rgba(var(--fg-rgb), 0.75);
  box-shadow: 0 0 16px rgba(var(--fg-rgb), 0.22);
}

.art-film-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.78);
  transition: filter 0.2s ease;
}

.art-film-frame:is(:hover, .is-hover) img {
  filter: saturate(1.02) brightness(1);
}

.art-film-meta {
  position: absolute;
  right: 0.6rem;
  bottom: 0.5rem;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: rgba(var(--fg-rgb), 0.85);
  background: rgba(var(--bg-rgb), 0.6);
  padding: 0.1rem 0.4rem;
}

/* ───── Call to action ───── */
.art-cta {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.art-cta-line {
  font-size: var(--t-small);
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  margin-bottom: 1.1rem;
  text-transform: uppercase;
}

.art-cta-links {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Two lines inside one .btn: what it is, then what is on it. */
.art-cta-links .btn {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 190px;
  padding: 0.75rem 1.2rem;
}

.art-cta-name {
  font-size: var(--t-small);
  letter-spacing: 0.18em;
}

.art-cta-what {
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-transform: none;
}

.art-cta-links .btn:is(:hover, .is-hover) .art-cta-what {
  color: var(--bg);
}

@media (hover: none) {
  .art-cta-links .btn:is(:hover, .is-hover) .art-cta-what {
    color: var(--ink-faint);
  }
}

/* JS-driven mirror of :hover — see js/components/hover.js. */
.art-card.is-hover {
  border-color: rgba(var(--fg-rgb), 0.75);
  box-shadow: 0 0 16px rgba(var(--fg-rgb), 0.22);
}

.art-card.is-hover .art-media video,
.art-card.is-hover .art-play img {
  filter: saturate(1.02) brightness(1);
}

.art-card.is-hover .art-media .art-still {
  filter: brightness(1.25);
}

@media (hover: none) {
  .art-card:is(:hover, .is-hover) {
    border-color: rgba(var(--fg-rgb), 0.22);
    box-shadow: none;
  }
}