/* Work detail pages (works/*.html): the Back link, the project heading and
   the column of boards. Loaded after css/style.css, which supplies the header,
   contact block and footer.

   ---------- Boards (画板) ----------
   A board is one Figma frame rebuilt in HTML. Inside, everything is written at
   the frame's own size in plain px (copy the numbers straight from Figma), and
   the whole board is scaled as one picture to fit the column:

     <figure class="board" style="--board-w: 840; --board-h: 613.2" data-reveal>
       <div class="board__stage"> …absolutely positioned layers… </div>
     </figure>

   - --board-w / --board-h: the frame's size in Figma (numbers, no px).
   - The board keeps that aspect ratio at every width; js/board.js sets
     --board-scale = shown width ÷ --board-w, so the content shrinks with it.
   - On wide screens a board is shown at its real size (840px column), never
     enlarged. Boards stack in .boards with --board-gap between them. */

.work {
  --column: 840px;
  --project-color: var(--accent); /* each project page sets its own brand colour */
  width: min(var(--column), 100% - 2 * var(--gutter));
  margin: clamp(40px, 5.8vw, 84px) auto 0;
}

/* ---------- Back ---------- */
.work-back {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: pre;
  transition: color var(--hover-dur) var(--hover-ease);
}
.work-back:hover { color: var(--accent); }

/* ---------- Project heading ---------- */
.work-head { margin-top: clamp(48px, 5.6vw, 80px); }
.work-head__brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.work-head__logo {
  flex: none;
  width: clamp(48px, 4.2vw, 60px);
  height: auto;
}
.work-head__title {
  font-size: clamp(38px, 1.6rem + 2.2vw, 52px);
  line-height: normal;
  color: var(--project-color);
}
.work-head__link {
  display: inline-block;
  margin-top: 10px;
  font-size: clamp(18px, 1rem + 0.4vw, 22px);
  font-weight: 400;
  overflow-wrap: anywhere;
  transition: color var(--hover-dur) var(--hover-ease);
}
.work-head__link:hover { color: var(--accent); }
.work-head__summary {
  margin-top: clamp(36px, 3.9vw, 56px);
  font-size: 16px;
  font-weight: 600;
}
.work-head__summary + .work-head__summary { margin-top: 17px; }

/* ---------- Boards ---------- */
.boards {
  --board-gap: clamp(24px, 3.3vw, 48px);
  display: grid;
  gap: var(--board-gap);
  margin-top: clamp(96px, 18.2vw, 262px);
}
.board {
  position: relative;
  margin: 0;
  aspect-ratio: var(--board-w) / var(--board-h);
  overflow: hidden;
}
.board__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--board-w) * 1px);
  height: calc(var(--board-h) * 1px);
  transform-origin: 0 0;
  transform: scale(var(--board-scale, 1));
}
/* Tablets and phones: js/board.js crops a board sideways to its content (--crop-x, --crop-w in Figma px). */
.board[data-cropped] { aspect-ratio: var(--crop-w) / var(--board-h); }
.board[data-cropped] > .board__stage {
  transform: translateX(calc(var(--crop-x) * var(--board-scale) * -1px)) scale(var(--board-scale, 1));
}

@media (max-width: 767px) {
  .work-head__summary { font-size: 15px; }
}