/* The index borrows the album's continuous film rails. The approved logo stays untouched. */
.work-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 0 46px; gap: 24px; }
.work-brand { display: block; width: 146px; margin-left: -27px; }
.work-brand img { display: block; width: 100%; height: auto; }
.work-author, .work-back { font-size: 12px; color: var(--quiet); }
.work-back { padding: 10px 0; }
.work-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 64px; }
.work-heading h1 { font-size: 23px; font-weight: 400; letter-spacing: -.45px; margin: 0; }
.work-heading > span { font-size: 11px; color: var(--quiet); }
.category-window { --cover-height: clamp(215px, calc((100vw - 120px) / 4.917041), 252px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #a8aa9f #e9e9e1; scroll-snap-type: x proximity; padding: 6px 0 16px; }
.category-window:focus-visible { outline: 1px solid #86632c; outline-offset: 5px; }
.category-strip { position: relative; display: flex; gap: 8px; padding: 0 8px; width: max-content; max-width: none; background: var(--film); }
.category-strip::before, .category-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 21px; z-index: 1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='21' viewBox='0 0 42 21'%3E%3Crect x='8' width='16' height='21' rx='3' fill='%23faf9f6'/%3E%3C/svg%3E") repeat-x; }
.category-strip::before { top: 6px; }
.category-strip::after { bottom: 6px; }
.category-frame { display: block; flex: 0 0 auto; width: calc(var(--cover-height) * var(--ratio)); scroll-snap-align: start; scroll-margin-left: 8px; }
.category-frame img { display: block; width: 100%; height: var(--cover-height); object-fit: contain; }
.category-rail { display: block; position: relative; height: 48px; color: var(--edge); font-family: "Courier New", monospace; }
.rail-above > span { position: absolute; bottom: 4px; left: 7px; font-size: 9px; font-weight: 600; line-height: 12px; letter-spacing: 1.3px; white-space: nowrap; }
.rail-below { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 5px 7px 0; }
.category-number { font-size: 11px; line-height: 14px; }
.category-name { font-size: 12px; font-weight: 600; line-height: 14px; white-space: nowrap; }
.category-frame:focus-visible { outline: 2px solid var(--edge); outline-offset: -2px; }
.strip-hint { display: none; color: var(--quiet); font-size: 11px; margin: 8px 0 0; }
.work-footer { display: flex; justify-content: space-between; gap: 24px; padding: 58px 0 32px; color: var(--quiet); font-size: 10px; }
.work-skip { position: fixed; top: 8px; left: 8px; z-index: 5; padding: 12px; background: var(--page); transform: translateY(-160%); }
.work-skip:focus { transform: none; }
#bodies { outline: none; }
.series-window { --cover-height: clamp(220px, 25vw, 316px); }
@media (hover: hover) { .category-frame:hover .category-name { text-decoration: underline; text-underline-offset: 3px; } .work-back:hover { text-decoration: underline; text-underline-offset: 5px; } }
@media (max-width: 1177px) { .strip-hint { display: block; } }
@media (max-width: 700px) {
  .work-header { padding: 18px 0 36px; }
  .work-brand { width: 124px; margin-left: -23px; }
  .work-author, .work-back { font-size: 11px; }
  .work-heading { margin-bottom: 36px; }
  .work-heading h1 { font-size: 22px; }
  .work-heading > span { font-size: 10px; }
  .category-window { --cover-height: clamp(205px, 55vw, 270px); }
  .category-strip::before, .category-strip::after { height: 16px; background-size: 34px 16px; }
  .category-rail { height: 43px; }
  .rail-above > span { font-size: 8px; letter-spacing: 1px; }
  .work-footer { flex-wrap: wrap; padding-top: 42px; gap: 14px; }
}

/* Individual cut frames on paper. Series and album strips keep their existing layout. */
.category-pieces {
  --side-rail: 43px;
  /* Match the approved album image height; do not shrink to fit four across. */
  --cover-height: clamp(216px, 23vw, 316px);
  overflow: visible;
  padding: 6px 0 16px;
  scroll-snap-type: none;
}
.category-pieces .category-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  padding: 0;
  gap: 56px 48px;
  align-items: center;
  justify-items: center;
  background: transparent;
}
.category-pieces .category-strip::before,
.category-pieces .category-strip::after { content: none; }
.category-pieces .category-frame {
  position: relative;
  width: calc(var(--cover-height) * var(--ratio) + 16px);
  max-width: 100%;
  padding: 0 8px;
  background: var(--film);
}
.category-pieces .category-frame img { height: auto; }
.category-pieces .category-rail { height: 43px; }
.category-pieces .rail-above > span { bottom: 2px; }
.category-pieces .rail-below { padding-top: 2px; }
.category-pieces .category-name,
.category-pieces .category-number { font-size: 11px; line-height: 12px; }
.category-pieces .category-frame::before,
.category-pieces .category-frame::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 21px;
  z-index: 1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='21' viewBox='0 0 42 21'%3E%3Crect x='8' width='16' height='21' rx='3' fill='%23faf9f6'/%3E%3C/svg%3E") repeat-x center;
}
.category-pieces .category-frame::before { top: 6px; }
.category-pieces .category-frame::after { bottom: 6px; }
.category-pieces .category-frame:focus-visible { outline-color: #86632c; outline-offset: 6px; }

/* Approved 0.8-degree maximum: individual cut frames rest lightly on the paper.
   Rotate the complete piece, leaving some straight. Album strips stay untouched. */
.category-pieces .category-strip > .category-frame {
  transform: rotate(calc(var(--frame-tilt, 0deg) * var(--tilt-scale, 1)));
  transform-origin: center;
}
.category-pieces .category-strip > .category-frame:nth-child(8n + 1) { --frame-tilt: -.7deg; }
.category-pieces .category-strip > .category-frame:nth-child(8n + 2) { --frame-tilt: .5deg; }
.category-pieces .category-strip > .category-frame:nth-child(8n + 4) { --frame-tilt: .8deg; }
.category-pieces .category-strip > .category-frame:nth-child(8n + 5) { --frame-tilt: -.5deg; }
.category-pieces .category-strip > .category-frame:nth-child(8n + 6) { --frame-tilt: .75deg; }
.category-pieces .category-strip > .category-frame:nth-child(8n) { --frame-tilt: -.8deg; }
@media (max-width: 700px) {
  .category-pieces .category-strip { --tilt-scale: .45; }
}

@media (max-width: 860px) {
  .category-pieces .category-strip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  /* Only the narrowest phones need a fit-to-page cap instead of horizontal scroll. */
  .category-pieces { --side-rail: 36px; --cover-height: min(clamp(200px, 55vw, 280px), calc((100vw - 56px) / 1.500375)); }
  .category-pieces .category-strip { gap: 42px; }
  .category-pieces .category-rail { height: 36px; }
  .category-pieces .category-name,
  .category-pieces .category-number { font-size: 10px; }
  .category-pieces .category-frame::before,
  .category-pieces .category-frame::after { height: 16px; background-size: 34px 16px; }
}

/* Portrait cut pieces turn the film edges, never the photograph or album strips. */
.category-pieces .category-frame.is-portrait {
  /* Same outer height as landscape: image + two horizontal rails, less cut edges. */
  --portrait-image-height: calc(var(--cover-height) + 2 * var(--side-rail) - 16px);
  width: calc(var(--portrait-image-height) * var(--ratio) + 2 * var(--side-rail));
  padding: 8px var(--side-rail);
}
.category-pieces .is-portrait .category-rail {
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: var(--side-rail);
  height: auto;
}
.category-pieces .is-portrait .rail-above { left: 0; }
.category-pieces .is-portrait .rail-above > span {
  top: 0;
  bottom: auto;
  left: auto;
  right: 2px;
  writing-mode: vertical-rl;
}
.category-pieces .is-portrait .rail-below {
  right: 0;
  flex-direction: column;
  padding: 0 0 0 2px;
}
.category-pieces .is-portrait .rail-below > span { writing-mode: vertical-rl; }
.category-pieces .category-frame.is-portrait::before,
.category-pieces .category-frame.is-portrait::after {
  top: 4px;
  bottom: 4px;
  width: 21px;
  height: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='42' viewBox='0 0 21 42'%3E%3Crect y='8' width='21' height='16' rx='3' fill='%23faf9f6'/%3E%3C/svg%3E") repeat-y center;
}
.category-pieces .category-frame.is-portrait::before { left: 6px; right: auto; }
.category-pieces .category-frame.is-portrait::after { left: auto; right: 6px; }
@media (max-width: 700px) {
  .category-pieces .category-frame.is-portrait::before,
  .category-pieces .category-frame.is-portrait::after { width: 16px; background-size: 16px 34px; }
}