/* ==========================================================================
   Work: a camera over a table (scripts/work.js).

   All the projects lie on one table, like prints. Scrolling moves a camera:
   it starts on the whole table, pushes in on each project until it fills the
   left of the screen (its words beside it), pulls back a little to travel to
   the next, and ends on the whole table again. The keys and the pictures
   themselves move the camera too.

   Without JS, or with reduced motion, the table is a plain grid (the first
   block below). The camera only starts once scripts/work.js adds .is-live.
   ========================================================================== */
.work {
  --cw-key: #26241f;
  --cw-key-lo: #1d1b17;
  --cw-key-base: #050504;
  --cw-key-edge: rgb(0 0 0 / 0.55);
  --cw-key-shine: rgb(255 255 255 / 0.07);
  --cw-led-off: #4a463c;
  --cw-print: #171614;
}
[data-theme="light"] .work {
  --cw-key: #ffffff;
  --cw-key-lo: #f1f0ea;
  --cw-key-base: #b9b7ad;
  --cw-key-edge: rgb(32 34 29 / 0.22);
  --cw-key-shine: #ffffff;
  --cw-led-off: #cfcdc3;
  --cw-print: #e2e0d8;
}

/* ---------- Plain: a grid of projects ---------- */
.cw { padding: var(--s15) var(--margin) var(--s12); }
.cw__table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s6) var(--s4);
}
.cw__title { grid-column: 1 / -1; margin: 0; }
.cw-tile { margin: 0; }
.cw-tile__pic {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 6px;
  background: var(--cw-print);
}
.cw-tile__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.cw-tile__pic:hover img { transform: scale(1.02); }
.cw-tile__pic:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.cw-tile__name {
  margin-top: var(--s2);
  color: var(--paper-dim);
  font: 500 13px/16px var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cw-tile__meta {
  margin-top: 4px;
  color: var(--paper-mute);
  font: 500 12px/16px var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cw-tile__line { margin-top: var(--s1, 8px); color: var(--paper); font-size: 16px; line-height: 1.45; }

/* ---------- Live: the camera ---------- */
.cw.is-live { height: calc((var(--stops) - 1) * 75svh + 100svh); padding: 0; }
.cw.is-live .cw__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
/* The table, in its own units; the camera is a transform on it */
.cw.is-live .cw__table {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 0 0;
  will-change: transform;
}
.cw.is-live .cw__title {
  position: absolute;
  font-size: 156px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  max-width: 7ch;
}
.cw.is-live .cw-tile {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  transition: opacity 200ms linear;
}
.cw.is-live .cw-tile__pic { box-shadow: 0 2px 0 rgb(0 0 0 / 0.25), 0 40px 80px -30px rgb(0 0 0 / 0.75); }
[data-theme="light"] .cw.is-live .cw-tile__pic { box-shadow: 0 2px 0 rgb(32 34 29 / 0.08), 0 40px 80px -36px rgb(32 34 29 / 0.45); }
.cw.is-live .cw-tile__pic:focus-visible { outline-width: 6px; outline-offset: 8px; }
.cw.is-live .cw-tile__name { margin-top: 18px; font-size: 24px; line-height: 1; }
.cw.is-live .cw-tile__meta, .cw.is-live .cw-tile__line { display: none; }

/* Up close: a veil falls over the right of the table so the other
   prints never show through the words */
.cw.is-live .cw__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 60%, var(--ink) 64%);
  opacity: var(--cw-veil, 0);
}
.cw-hud, .cw-keys, .cw-hint { z-index: 2; }
.cw-hud {
  position: absolute;
  left: 62%;
  right: var(--margin);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.cw-hud__body {
  max-width: 420px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 260ms linear, transform 420ms var(--ease);
}
.cw.is-close .cw-hud { pointer-events: auto; }
.cw.is-close .cw-hud__body { opacity: 1; transform: none; transition-delay: 80ms; }
.cw-hud__body.is-swap { opacity: 0 !important; transform: translateY(12px) !important; transition: none !important; }
.cw-hud__kicker {
  font: 500 12px/16px var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.cw-hud__name { margin-top: var(--s2); font-size: clamp(40px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.01em; }
.cw-hud__line { margin-top: var(--s2); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; color: var(--paper); }
.cw-hud .cta { margin-top: var(--s4); }

/* Keys: one per project */
.cw-keys {
  position: absolute;
  left: var(--margin);
  bottom: 24px;
  display: flex;
  gap: 8px;
}
.cw-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 3px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 9px;
  color: var(--paper);
  font: 500 12px/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(180deg, var(--cw-key), var(--cw-key-lo));
  box-shadow: inset 0 1px 0 var(--cw-key-shine), 0 0 0 1px var(--cw-key-edge), 0 3px 0 var(--cw-key-base);
  transition: transform var(--press) var(--ease), box-shadow var(--press) var(--ease), filter var(--press) var(--ease);
}
.cw-key:hover { filter: brightness(1.12); }
.cw-key[aria-pressed="true"], .cw-key:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45), 0 0 0 1px var(--cw-key-edge), 0 1px 0 var(--cw-key-base);
}
[data-theme="light"] .cw-key[aria-pressed="true"] { box-shadow: inset 0 1px 2px rgb(32 34 29 / 0.2), 0 0 0 1px var(--cw-key-edge), 0 1px 0 var(--cw-key-base); }
.cw-key:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.cw-key__led { width: 6px; height: 6px; border-radius: 50%; background: var(--cw-led-off); transition: background-color 120ms linear, box-shadow 120ms linear; }
.cw-key[aria-pressed="true"] .cw-key__led { background: #c6f432; box-shadow: 0 0 6px 1px rgb(198 244 50 / 0.75); }

.cw-hint {
  position: absolute;
  right: var(--margin);
  bottom: 36px;
  font: 500 12px/16px var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-mute);
  opacity: 0;
  transition: opacity 240ms linear;
}
.cw-hint.is-shown { opacity: 1; }
/* Not enough room beside five named keys */
@media (max-width: 1099px) { .cw-hint { display: none; } }

/* Phones: the picture on top, the words under it */
@media (max-width: 767px) {
  .cw-hud { left: var(--margin); right: var(--margin); top: calc(128px + var(--cw-pic, (100vw - 32px) / 1.5) + 16px); transform: none; }
  .cw.is-live .cw__stage::after { background: linear-gradient(180deg, transparent calc(128px + var(--cw-pic, (100vw - 32px) / 1.5) + 4px), var(--ink) calc(128px + var(--cw-pic, (100vw - 32px) / 1.5) + 16px)); }
  /* room is short under the picture: no credit line, and the two keys share a row */
  .cw-hud__credit { display: none; }
  .cw-hud .cw-hud__ctas { flex-wrap: nowrap; }
  .cw-hud .cw-hud__ctas .cta { min-height: 42px; padding: 0 14px 0 12px; font-size: 12px; white-space: nowrap; }

  .cw-hud__name { font-size: 34px; margin-top: 10px; }
  .cw-hud__line { font-size: 16px; line-height: 1.45; margin-top: 10px; }
  .cw-hud .cta { margin-top: var(--s2); }
  .cw-keys { bottom: 96px; left: 16px; right: 16px; justify-content: space-between; gap: 6px; }
  /* Three keys share the width, each with its name */
  .cw-key { flex: 1; justify-content: center; gap: 6px; padding: 0 6px; font-size: 11px; white-space: nowrap; }
  .cw.is-close .cw-tile__name { opacity: 0; }
  .cw.is-live .cw__title { max-width: 6ch; }
  .cw { padding-top: var(--s12); }
}
/* Very short phone screens (a small iPhone with Safari's bars): the line goes,
   the name and the keys stay */
@media (max-width: 767px) and (max-height: 620px) {
  .cw-hud__line, .cw-hud__kicker { display: none; }
  .cw-hud__name { font-size: 28px; margin-top: 0; }
  .cw-hud .cw-hud__ctas { margin-top: 10px; }
}

/* A tile with more than one picture: they cross-fade in place (scripts/live.js).
   The live website window slides, because that reads as a page being scrolled.
   Prints on a table do not slide, they are swapped, so these fade. */
.rota {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.rota img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.rota img.is-on { z-index: 2; opacity: 1; }
.rota img.is-off { z-index: 1; opacity: 0; }

/* A project whose picture is its film (scripts/live.js) */
.tile-film { display: block; width: 100%; height: 100%; }
.tile-film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #15161a;
}

/* A project shown as mockups: no frame of ours, just the devices (index.html) */
.cw-tile--bare .cw-tile__pic {
  background: none;
  border-radius: 0;
  overflow: visible;
}
.cw.is-live .cw-tile--bare .cw-tile__pic { box-shadow: none; }
.cw-duo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
/* The picture wrapper only chooses a file; the imgs stay positioned in the duo */
.cw-duo picture { display: contents; }
.cw-duo picture source { display: none; }
/* These beat the tile's own picture rule, which crops any img to fill */
.cw-tile__pic .cw-duo__mac {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The phone stands beside the laptop, overlapping its corner, as it did before */
.cw-tile__pic .cw-duo__phone {
  position: absolute;
  right: 2%;
  bottom: 6%;
  width: 18%;
  height: auto;
  object-fit: contain;
}