/* 刻 — the cut bench. Twelve engravings from design/compose-lab-*.js hung as
   a contact sheet. The page ground and dark tokens come from .plate-page in
   plate.css; each sheet's live title sits in the cartouche band the SVG
   reserves (y from 1052 of 1200), exactly as the 惊燕 plate's does, so the
   title inks are fixed dark on the sheet's fixed cream whatever the theme. */

.cuts-shell {
  width: var(--qb-content-width);
  margin-inline: auto;
  padding-block: var(--qb-chrome-clear-block) clamp(64px, 9vw, 112px);
}

.cuts-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr);
  gap: var(--space-5) var(--space-7);
  align-items: end;
  padding-bottom: var(--space-6);
  border-bottom: var(--line-thin) solid var(--line-dark);
}

.cuts-head h1 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 630;
  letter-spacing: -.04em;
  line-height: 1;
}

.cuts-head h1 b {
  color: var(--cinnabar-deep);
  font-family: var(--font-cjk);
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: .04em;
}

.cuts-lede {
  max-width: 40ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
}

.cuts-count {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: lowercase;
}

.cuts-bench {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px);
  padding-top: clamp(32px, 5vw, 56px);
}

.cut {
  min-width: 0;
  margin: 0;
}

/* The next five colours are literals on purpose, and must stay literals.
   #f3f2ea, #222a22, #b02e26 and #3c453c are the light-theme values of
   --paper, --ink, --cinnabar-deep and --ink-soft, but they are used here to
   match the raster, not the theme: the paper is baked into every cut's SVG
   and the live title is set into the cartouche band the generators reserve at
   CAPTION_TOP = 1052 of 1200. In the dark theme plate.css redefines --ink to
   #e8ede4 and --cinnabar-deep to #ee6a58, so tokens here would print light ink
   onto a sheet that is still cream and the band would come apart. plate.css
   freezes the same four for 惊燕 at lines 74, 79 and 87 for the same reason. */
.cut-sheet {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f3f2ea;
  border: var(--line-thin) solid var(--celadon-deep);
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(34, 42, 34, .16), 0 3px 8px rgba(34, 42, 34, .1);
}

.cut-sheet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f3f2ea;
}

.cut-title {
  position: absolute;
  z-index: 1;
  top: 88.2%;
  right: 5.5%;
  left: 5.5%;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  color: #222a22;
  font-weight: 400;
  line-height: 1.05;
}

.cut-title b {
  color: #b02e26;
  font-family: var(--font-cjk);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: .16em;
}

.cut-title span {
  color: #3c453c;
  font-family: var(--font-display);
  font-size: clamp(.8rem, 1.2vw, .96rem);
  letter-spacing: -.01em;
}

.cut figcaption {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.cut-desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.5;
}

.cut-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: lowercase;
}

.cut-meta output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cut-status:empty { display: none; }

.cut-recut {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: var(--line-thin) solid var(--line-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.cut-recut:hover { background: var(--paper-raised); }

.cut-recut:focus-visible {
  outline: 3px solid var(--cinnabar);
  outline-offset: 3px;
}

.cut[aria-busy="true"] .cut-recut { color: var(--ink-mute); }

@media (max-width: 760px) {
  .cuts-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cuts-lede { max-width: none; }
}

/* A recut fades the old sheet to paper while the next file arrives, then the
   new cut fades in. Under reduced motion the class does nothing and the swap
   is a plain replace. */
@media (prefers-reduced-motion: no-preference) {
  .cut-sheet img { transition: opacity 320ms var(--ease-out); }
  .cut.is-recutting .cut-sheet img { opacity: 0; }
  .cut-recut { transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out); }
}

@media (prefers-color-scheme: dark) {
  .cut-sheet {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .34), 0 3px 8px rgba(0, 0, 0, .22);
  }
}