/* The sheet: a panel that slides up over the page (a project, for now a placeholder). The page behind eases back and dims
   (home.css), the backdrop fades in, and the sheet rises. Opening and closing use the motion tokens: it arrives slowly with
   --ease-out and leaves faster with --ease-in-out. js/sheet.js adds .is-open to the layer. */

.sheet-layer { position: fixed; inset: 0; z-index: var(--z-sheet); }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 17, 0.5);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out);
}
.sheet-layer.is-open .sheet-backdrop {
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.sheet {
  position: absolute;
  top: var(--sheet-top);
  bottom: 0;
  left: var(--pad);
  right: var(--pad);
  max-width: 1400px;
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;   /* images and videos loading in below must never move the place you are reading */
  background: var(--s-bg, var(--paper-light));   /* a project can set its own colours (--s-bg, --s-ink) */
  color: var(--s-ink, var(--ink));
  border-radius: calc(var(--r) * 2) calc(var(--r) * 2) 0 0;
  outline: none;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-in-out);
}
.sheet-layer.is-open .sheet {
  transform: none;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* the bar stays at the top while the sheet scrolls: a grab handle, the name on the left, what kind of thing it is in the middle, and close */
.sheet-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--pad);
  background: var(--s-bg, var(--paper-light));
}
.sheet-bar .sheet-close { justify-self: end; }
.sheet-grab { position: absolute; top: 8px; left: 50%; width: 44px; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.22; transform: translateX(-50%); }
.sheet-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line, rgba(29, 29, 27, 0.22));
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.sheet-close:hover { background: rgba(29, 29, 27, 0.07); }

.sheet-content {
  display: grid;
  gap: var(--gap);
  padding: 0 var(--pad) calc(var(--pad) * 2);
}

.sheet .box { background: var(--box); border-radius: var(--r); }   /* a placeholder picture inside a sheet */

/* the contents (a placeholder case study): a hero, the title and facts, some words, then a gallery */
.sheet-hero { aspect-ratio: 16 / 9; }
/* the hero a little smaller than the sheet, with the project's number turned on its side beside it */
.sheet-top { position: relative; width: 85%; margin-inline: auto; }
.sheet-no { position: absolute; top: 50%; right: 100%; margin-right: clamp(16px, 4vw, 56px); translate: 0 -50%; writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--fs-s); font-weight: var(--fw-medium); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.sheet-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  padding: calc(var(--gap) * 2) 0;
}
.sheet-head .t-display { grid-column: span 7; }
.sheet-meta { grid-column: 9 / -1; display: grid; gap: 12px; margin: 0; align-content: start; }
.sheet-meta div { display: grid; grid-template-columns: 6em 1fr; }
.sheet-meta dt { opacity: 0.55; }
.sheet-meta dd { margin: 0; }
.sheet-copy { max-width: 60ch; }
.sheet-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.sheet-gallery .box { aspect-ratio: 4 / 5; }
.sheet-wide { aspect-ratio: 16 / 9; }

/* a case study: a hero picture, then the gallery in two columns (a wide cell spans both): pictures, videos and words */
.sheet-photo { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: color-mix(in srgb, currentColor 8%, transparent); }
.sheet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet-gallery { grid-template-columns: 1fr 1fr; }
.cell { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); background: color-mix(in srgb, currentColor 8%, transparent); }
.cell.is-wide { grid-column: 1 / -1; }
.cell img, .cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* a quote runs the full width, with no box; a page in a window is shown from its top, in its own colour */
.cell--quote { aspect-ratio: auto; background: none; overflow: visible; padding: calc(var(--pad) * 2) 0; }
.cell--quote blockquote { margin: 0; max-width: 28ch; }
.cell--quote figcaption { margin-top: 1.4em; font-weight: var(--fw-medium); }
.cell--window img { inset: 6% 6% auto 6%; width: 88%; height: auto; border-radius: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); }
.cell--text { display: flex; flex-direction: column; justify-content: center; gap: 1em; padding: calc(var(--pad) * 1.2); }
.cell--text .t-body { max-width: 34ch; }

/* the logo archive's sheet: the marks as a grid, each on its own colour */
.sheet-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.sheet-logos .box { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.sheet-logos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 760px) {
  .sheet-top { width: 100%; }
  .sheet-no { display: none; }
  .sheet-logos { grid-template-columns: 1fr 1fr; }
  .sheet-gallery { grid-template-columns: 1fr; }
  .cell--text { aspect-ratio: auto !important; padding: var(--pad); }
  .sheet { left: 0; right: 0; }
  .sheet-head { grid-template-columns: 1fr; }
  .sheet-head .t-display, .sheet-meta { grid-column: auto; }
}