/* Work index + detail — Apple product scroll on detail. */

.section .sheet-head .display {
  max-width: 16ch;
}

.detail-head .display {
  max-width: 18ch;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
}

.detail-drawing__frame {
  position: relative;
  overflow: clip;
  margin-top: var(--s-5);
  border: var(--hair) solid var(--line-quiet);
  border-radius: var(--radius);
  padding: clamp(2rem, 5.5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  background: var(--field-deep);
  width: min(100%, var(--maxw));
}

.detail-drawing__depth {
  position: absolute;
  /* Bleeds horizontally past its frame on purpose, but the frame sits at
     the page gutter on mobile, so the bleed pushed the document 5px wider
     than the viewport. Vertical bleed only below the breakpoint. */
  inset: -10% -8%;
  background: radial-gradient(
    ellipse at 50% 40%,
    color-mix(in oklab, var(--line) 9%, transparent),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.detail-drawing__frame .drawing {
  position: relative;
  z-index: 1;
}

/* Narrative sticky stack */
.narrative-stack {
  width: min(100%, var(--maxw));
  margin-inline: auto;
  margin-bottom: var(--s-7);
}

.narrative-stack__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}

.narrative-stack__card {
  display: grid;
  gap: var(--s-4);
  padding: clamp(2rem, 4vw, 3.25rem);
  min-height: clamp(18rem, 48vh, 28rem);
  border: var(--hair) solid var(--line-quiet);
  border-radius: var(--radius);
  background: var(--field);
}

.narrative-stack__num { margin: 0; }
.narrative-stack__text {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.55;
  color: var(--text-dim);
}
.narrative-stack__text--emphasis {
  color: var(--text);
  font-weight: 500;
}

@media (max-width: 760px) {
}

@media (min-width: 900px) {
  .narrative-stack {
    height: 280vh;
  }
  .narrative-stack__pin {
    position: sticky;
    top: calc(var(--rail-h) + 1.25rem);
    height: calc(100svh - var(--rail-h) - 2.5rem);
    display: grid;
    align-items: center;
  }
  .narrative-stack__list {
    position: relative;
    height: min(62vh, 32rem);
    display: block;
  }
  .narrative-stack__card {
    position: absolute;
    inset: 0;
    min-height: 0;
    will-change: transform, opacity;
  }
  .narrative-stack__card:nth-child(1) { z-index: 1; }
  .narrative-stack__card:nth-child(2) { z-index: 2; }
  .narrative-stack__card:nth-child(3) { z-index: 3; }
}

html.no-motion .narrative-stack { height: auto; }
html.no-motion .narrative-stack__pin { position: relative; top: auto; height: auto; }
html.no-motion .narrative-stack__list { height: auto; display: grid; gap: var(--s-5); }
html.no-motion .narrative-stack__card { position: relative; inset: auto; }

/* Case anatomy heading, detail page. */
.case-anatomy__title {
  font-size: var(--t-h2);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  max-width: 24ch;
}

/* Register rows now carry a headline metric instead of a status word. */
.entry__metric {
  display: block;
  font-size: 1.0625rem;
  color: var(--text);
  text-align: right;
}
.entry__metricKey { display: block; margin-top: 2px; text-align: right; color: var(--text-faint); }


@media (max-width: 760px) {
  .detail-drawing__depth { inset: -10% 0; }
}