/* ============================================================
   Selected work — the evidence, in two readings.

   The sheet was right and the captions were wrong. Six rooms on an
   unequal twelve-column grid still reads as composed; what made the
   section bland was that every figure was a silent picture with a
   name ruled off underneath it, so there was no reason to look at
   any one of them twice.

   Two changes:

     1. The caption moved onto the photograph. At rest it is the
        name over an ink floor; on hover an ink panel
        wipes up the frame and the rest of the entry — the sector,
        the year, and the one line that says what the room had to
        solve — arrives with it. The room is the subject and the
        writing is the reward for looking.

     2. The sheet has a second reading. `Gallery` is the composed
        grid; `Index` is the same six projects as ruled rows, which
        is how anyone comparing them actually wants to read them.
        The toggle is the section's own interaction, not a filter
        bolted on: both views are in the DOM, and the one you are
        not reading is inert.
   ============================================================ */

/* ============================================================
   The view switch
   ============================================================ */

.work__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.work__count {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.work__views {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.work__view {
  position: relative;
  padding: 0 0 0.4rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.work__view::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--wipe);
}
.work__view[aria-pressed='true'] { color: var(--fg); }
.work__view[aria-pressed='true']::after { transform: scaleX(1); }
@media (hover: hover) {
  .work__view:hover { color: var(--fg); }
}

/* The two readings occupy the same slot. `hidden` is doing real work
   here — it takes the inactive view out of the tab order and off the
   accessibility tree, so the section never has twelve links in it. */
.work__view-panel[hidden] { display: none; }

/* ============================================================
   Gallery — the composed sheet
   ============================================================ */

.work__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem) var(--gutter);
  margin-top: clamp(2rem, 4vw, 3rem);
  /* Not `stretch`. Every figure now owns its own overflow and carries
     its caption inside the frame, so a figure stretched to its row's
     height shows dead ground below the photograph instead of just
     ending — which is exactly what the tall neighbour's top margin
     used to do to the first frame. */
  align-items: start;
}

.work__item {
  position: relative;
  grid-column: span 12;
}

@media (min-width: 900px) {
  .work__item--a { grid-column: span 7; }
  /* Pushed down so the first two figures sit on different baselines —
     the whole reason the sheet reads as composed rather than tiled. */
  .work__item--b { grid-column: span 5; margin-top: clamp(3rem, 8vw, 8rem); }
  .work__item--c,
  .work__item--d,
  .work__item--e { grid-column: span 4; }
  .work__item--f { grid-column: span 12; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .work__item--c,
  .work__item--d { grid-column: span 6; }
}

/* ---- Aspect is set per figure, not globally ---- */
.work__item--a .media { aspect-ratio: 16 / 10; }
.work__item--b .media { aspect-ratio: 4 / 5; }
.work__item--c .media,
.work__item--d .media,
.work__item--e .media { aspect-ratio: 3 / 4; }
.work__item--f .media { aspect-ratio: 21 / 9; }

@media (max-width: 599px) {
  .work__item .media { aspect-ratio: 4 / 3; }
}

/* ---- The frame ----
   The <figure> is the frame. There is no wrapper inside it, because
   <figcaption> is only valid as a direct child of <figure> and every
   overlay here has to be a sibling of the caption to stack against
   it. So the figure owns the overflow and everything — photograph,
   panel, caption, mark, edge and hit area — is absolutely positioned
   against it. */

.work__item { overflow: hidden; }

/* Ink floor under the resting caption. */
.work__item::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgb(10 22 40 / 0.86) 0%,
    rgb(10 22 40 / 0.4) 46%,
    rgb(10 22 40 / 0) 100%);
  transition: opacity 0.6s var(--ease);
}

/* The panel that wipes up the photograph. Same gesture as the boot
   curtain and the service veil, one notch faster because it is the
   smallest of the three. */
.work__panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.1rem, 2vw, 1.75rem);
  background: linear-gradient(to top,
    rgb(6 14 28 / 0.93) 0%,
    rgb(6 14 28 / 0.78) 52%,
    rgb(6 14 28 / 0.34) 100%);
  clip-path: inset(100% 0% 0% 0%);
  transition: clip-path 0.7s var(--wipe);
  pointer-events: none;
}

/* ---- Caption, on the photograph ---- */

/* No longer a two-item row: the figure's ordinal is gone, so this is
   simply the name with the detail unfolding under it. */
.work__cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: clamp(1.1rem, 2vw, 1.75rem);
  pointer-events: none;
  color: var(--paper);
}

.work__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* The detail carried up by the panel. */
.work__detail {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.7s var(--ease), opacity 0.4s var(--ease);
}
.work__note {
  display: block;
  margin-top: 0.9rem;
  font-size: var(--t-small);
  line-height: 1.62;
  color: rgb(255 255 255 / 0.76);
  max-width: 40ch;
}
.work__meta {
  display: block;
  margin-top: 0.9rem;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue-soft);
}

/* The corner mark. It is the only thing that moves on entry rather
   than on the wipe, so the frame acknowledges the pointer before the
   panel has finished arriving.

   It draws the same symbol as every other arrow on the site, but
   without the slide-through: the badge already has an entrance of
   its own, and two gestures inside one 34px circle is one too many. */
.work__mark {
  position: absolute;
  top: clamp(0.9rem, 1.6vw, 1.4rem);
  right: clamp(0.9rem, 1.6vw, 1.4rem);
  z-index: 3;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  color: var(--paper);
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.7) translate(-6px, 6px);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.work__mark-arw {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The accent rule along the bottom edge — the reference's tell that
   a card is live, and the cheapest possible one. */
.work__edge {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  height: 3px;
  /* Not --accent: on the paper ground --accent resolves to the mid
     blue, and this bar is painted over the ink panel, where the mid
     blue is invisible. The soft steel is the blue that reads on ink
     — the same swap [data-ground='blue'] makes for a whole band. */
  background: var(--blue-soft);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--wipe);
  pointer-events: none;
}

/* ---- Live ---- */

@media (hover: hover) {
  .work__item:hover .work__panel,
  .work__item:focus-within .work__panel { clip-path: inset(0% 0% 0% 0%); }

  .work__item:hover .work__detail,
  .work__item:focus-within .work__detail { max-height: 14rem; opacity: 1; }

  .work__item:hover .work__mark,
  .work__item:focus-within .work__mark {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }

  .work__item:hover .work__edge,
  .work__item:focus-within .work__edge { transform: scaleX(1); }

  .work__item:hover::after,
  .work__item:focus-within::after { opacity: 0; }

  /* `scale`, not `transform`: revealMedia is holding a scrubbed
     yPercent on these for the whole time the sheet is on screen. */
  .work__item:hover .media img,
  .work__item:focus-within .media img {
    scale: 1.05;
    filter: saturate(1.02) contrast(1.06);
  }
}

/* No hover to reward: print the detail. */
@media (hover: none) {
  .work__panel { position: relative; inset: auto; clip-path: none; background: none; padding: 0; }
  .work__detail { max-height: none; opacity: 1; }
  .work__cap {
    position: relative;
    inset: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--fg);
  }
  .work__note { color: var(--muted); }
  .work__meta { color: var(--accent); }
  .work__item { overflow: visible; }
  .work__item::after { display: none; }
  .work__mark, .work__edge { display: none; }
}

.work__hit { position: absolute; inset: 0; z-index: 5; }
.work__hit:focus-visible { outline-offset: -5px; }

/* ============================================================
   Index — the same six as a ruled list

   Bare rows: name, sector, year. The thumbnail follows the pointer
   rather than sitting in the row, which is what keeps the list a
   list — six inline images would just be the gallery again, badly.
   ============================================================ */

.work__index-list { margin-top: clamp(2rem, 4vw, 3rem); }

.work__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 14rem) 5rem;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(1.1rem, 2vw, 1.6rem) 0;
  border-top: 1px solid var(--rule);
  /* The sweep below is a z-index:-1 pseudo-element. Without a
     stacking context of its own it would paint behind the section's
     background rather than behind the row's type, and never be
     seen at all. */
  isolation: isolate;
  transition: color 0.4s var(--ease);
}
.work__row:last-child { border-bottom: 1px solid var(--rule); }

.work__row-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.work__row-sector,
.work__row-year {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.work__row-year { text-align: right; }

/* The rule that sweeps the row on hover, behind the type. */
.work__row::before {
  content: '';
  position: absolute;
  inset: 0 -1rem;
  z-index: -1;
  background: var(--tint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--wipe);
}
@media (hover: hover) {
  .work__row:hover::before,
  .work__row:focus-within::before { transform: scaleX(1); }
  .work__row:hover .work__row-name,
  .work__row:focus-within .work__row-name { color: var(--accent); }
}

/* The thumbnail that follows the pointer.

   It is a sibling of #smooth-wrapper, not a child of the section it
   belongs to. `position: fixed` resolves against the nearest
   transformed ancestor, and ScrollSmoother transforms #smooth-content
   on every frame — inside it, "fixed" would mean "absolute, and
   sliding with the page". */
.work__peek {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  width: clamp(180px, 16vw, 260px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.work__peek img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
  .work__row { grid-template-columns: minmax(0, 1fr); }
  .work__row-year { text-align: left; }
  .work__peek { display: none; }
}

/* ============================================================
   Footer
   ============================================================ */

.work__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.work__footer p {
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 46ch;
}

@media (prefers-reduced-motion: reduce) {
  .work__panel, .work__detail, .work__mark, .work__edge,
  .work__row::before, .work__view::after { transition: none; }
  .work__peek { display: none; }
}