/* ==========================================================================
   exe.cute v3 — 07 · Selected work (the grid)

   Ported from the clone's work section (clones/haoqi/css/work.css), re-voiced
   for exe.cute's tokens: the 12-column grid and the row-gap-equals-one-column
   rhythm survive; the palette becomes --bone/--ink and the type becomes
   Hanken Grotesk + DM Mono.

   The images are NOT in the DOM — see js/gl/image-layers.js. Each .work__media
   is a transparent placeholder whose getBoundingClientRect() the WebGL layer
   samples every frame, so its box must stay exact: no padding hacks, the
   aspect-ratio is the real one.
   ========================================================================== */

.work {
  position: relative;
  padding: clamp(96px, 16vh, 200px) var(--gutter);
}

/* A mono section head, in the .section__meta register but two-column: the
   count sits on the right gutter like the pillars counter does. */
.work__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(48px, 8vh, 110px);
}

.work__count {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--bone-70);           /* 8.27:1 — same as the readout */
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   The grid. 12 columns, no column gap; the ROW gap equals exactly one column
   width, written from js/ui/work.js (the calc below is the pre-JS fallback).
   That is the clone's whole vertical rhythm: a card and its caption, then one
   module of air, then the next row.
   -------------------------------------------------------------------------- */
.work__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 100%;
  column-gap: 0;
  row-gap: calc((100vw - var(--gutter) * 2) / 12);
}

.work__item {
  grid-column: span 12;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   The card. The 8px padding is the clone's and it is load-bearing: the WebGL
   image draws inside .work__media, so the padding is what keeps the image off
   the section's own edge.
   -------------------------------------------------------------------------- */
.work__card {
  display: block;
  padding: 8px;
  color: var(--bone);
}

.work__card > * + * { margin-top: 12px; }

/* The placeholder. NO background — the WebGL layer fills it; a background here
   would sit UNDER the texture and double-paint. aspect-ratio comes inline. */
.work__media {
  position: relative;
  width: 100%;
  background: transparent;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* The small mono tag, top-right of the media box. --accent-deep clears 5.2:1
   under --bone; the clone's lime has no exe.cute equivalent. */
.work__label {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 2px 6px;
  background: var(--accent-deep);
  color: var(--bone);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.64rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   The caption: title left, year (+ kind, externals only) right. Uppercase
   small caps register like the readout.
   -------------------------------------------------------------------------- */
.work__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  text-transform: lowercase;
}

.work__title {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.work__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--bone-70);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.work__kind { display: none; }

/* The dotted hover frame — the page's ONE hover language (base.css's .frame),
   tightened to the card box. */
.work__card.frame::before { inset: 0; border-radius: 2px; }

/* --------------------------------------------------------------------------
   Placement — a 2x2 GRID, not the clone's stagger. Four projects, two rows of
   two: every card takes six of the twelve columns, so the row gap (one column
   width, written from js/ui/work.js) is also the gutter between the pair. The
   clone's offset composition (5/span 8, 1/span 6, 7/span 6, 5/span 4) was
   tried here first and rejected: with four cards it leaves the fourth row
   three-quarters empty, which reads as a missing project rather than as
   negative space.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .work__caption {
    font-size: 0.88rem;
  }
  .work__kind {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
  }
  .work__item--piggybanq,
  .work__item--jarvis,
  .work__item--numerology,
  .work__item--briefr { grid-column: span 6; }
}

/* --------------------------------------------------------------------------
   Reduced motion / no WebGL: the texture never arrives, so the placeholder
   shows its aspect box as a hairline frame. base.css's html.no-gl class and
   the media query both land here; a static <img> would fight the WebGL layer
   where it DOES run, so the fallback is a boxed frame instead.
   -------------------------------------------------------------------------- */
html.no-gl .work__media {
  border: 1px solid var(--bone-12);
}

@media (prefers-reduced-motion: reduce) {
  .work__card.frame::before { transition: none; }
}