/* ---------------------------------------------------------------
   01 Selected work: four paper sheets laid on the drafting table.
   Base rules describe the stacked layout (phones, no JS, motion
   off). Under .js at 861px and wider the sheets sit in one row,
   the studio pins, and js/work.js scrubs the row with scroll.
   Loaded after story.css.
   --------------------------------------------------------------- */
.work {
  --sheet-w: clamp(520px, 40vw, 600px);
  --sheet-pad: clamp(1.6rem, 2.4vw, 2.4rem);
  padding: 0;
}
.work__sticky { position: relative; background: var(--ink-0); padding: var(--chapter-pad) 0; }
/* The table: a faint drafting grid, static, fading out to the edges */
.work__sticky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(233,230,223,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,230,223,0.16) 1px, transparent 1px),
    linear-gradient(rgba(233,230,223,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,230,223,0.045) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px;
  background-position: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 60%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 60%, #000 10%, transparent 75%);
  opacity: 0.5;
}
.work__head, .work__track { position: relative; }

/* ---------- Head ---------- */
.work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.work__head .kicker { margin-bottom: 1.2rem; }
.work__head .title { max-width: 16em; }
.work__progress { display: none; align-items: center; gap: 1.2rem; padding-bottom: 0.5rem; white-space: nowrap; }
.work__count { font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.08em; color: var(--text-on-ink-faint); }
.work__count b { font-weight: 500; color: var(--accent); }
.work__rule { position: relative; display: block; width: 9rem; height: 1px; background: var(--ink-line-strong); }
.work__rule i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left center; }

/* ---------- Track (stacked by default) ---------- */
.work__track { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto; }
/* Stacked on a wide screen (JS off or motion off): two columns, the end card across both */
@media (min-width: 861px) {
  .work__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet--end { grid-column: 1 / -1; }
}

/* ---------- One sheet of paper ---------- */
.sheet {
  --rot: 0deg; --lift: 0px; --rx: 0deg; --ry: 0deg;
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0; min-width: 0;
  padding: var(--sheet-pad); border-radius: 3px;
  background: var(--paper-0); color: var(--text-on-paper); border: 1px solid var(--paper-line);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 18px 40px -24px rgba(0,0,0,0.75);
  transform: perspective(1200px) translateY(var(--lift)) rotate(var(--rot)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin: 50% 50%;
  transition: transform 0.35s var(--ease-out);
}
/* Lift shadow: a static box-shadow whose opacity moves, never the shadow itself */
.sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 48px 80px -36px rgba(0,0,0,0.9), 0 10px 24px -14px rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.35s var(--ease-out);
}
/* Registration ticks in brass, top left and bottom right */
.sheet::after {
  content: ""; position: absolute; inset: 9px; pointer-events: none; opacity: 0.55;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 14px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 1px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 1px 14px no-repeat;
}
.sheet__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sheet .kicker { color: var(--text-on-paper-muted); }
.sheet .mono { font-size: 0.9rem; color: var(--text-on-paper-muted); }
.sheet .title { font-size: clamp(1.2rem, 0.9rem + 0.8vw, 1.6rem); max-width: 20ch; margin: 1.1rem 0 0; color: var(--text-on-paper); }
.sheet__pencil { display: block; width: min(11rem, 60%); height: 2px; margin: 0.8rem 0 0; border-radius: 1px;
  background: linear-gradient(90deg, rgba(201,168,106,0), var(--accent) 8%, var(--accent) 88%, rgba(201,168,106,0));
  transform: rotate(-0.5deg) scaleX(0); transform-origin: left center; transition: transform 0.9s var(--ease-out); }
.sheet.is-centre .sheet__pencil { transform: rotate(-0.5deg) scaleX(1); }
.sheet .body { font-size: 0.98rem; line-height: 1.6; color: var(--text-on-paper-muted); max-width: 30em; margin: 1rem 0 1.6rem; align-self: start; }
.sheet__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--paper-line); }
.sheet__arrow {
  flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--paper-line-strong); color: var(--text-on-paper);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform 0.35s var(--ease-out);
}
.sheet .cover { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }

/* Hover or keyboard focus: the sheet straightens and lifts */
.sheet:hover, .sheet:focus-within { --rot: 0deg; --lift: -8px; z-index: 3; }
.sheet:hover::before, .sheet:focus-within::before { opacity: 1; }
.sheet:hover .sheet__arrow, .sheet:focus-within .sheet__arrow { background: var(--text-on-paper); color: var(--paper-0); border-color: var(--text-on-paper); transform: translateX(3px); }

/* ---------- End card: paper on ink ---------- */
.sheet--end { background: var(--ink-2); color: var(--text-on-ink); border-color: var(--ink-line-strong); grid-template-rows: auto 1fr auto auto; }
/* A sentence, not a label: it earns body-size type */
.sheet--end .kicker { color: var(--text-on-ink-muted); font-size: 0.9rem; letter-spacing: 0.18em; max-width: 24em; line-height: 1.55; }
.sheet__clients { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0; align-content: start; }
.sheet__clients li { font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-ink); }
.sheet__clients li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin: 0 1rem; transform: translateY(-0.2em); }
.sheet--end .body { color: var(--text-on-ink-muted); margin: 1.4rem 0 1.4rem; }
.sheet--end .link { justify-self: start; position: relative; z-index: 2; }
.sheet--end:hover, .sheet--end:focus-within { --lift: -8px; }

/* =========== The studio, pinned: JS on, 861px and wider =========== */
@media (min-width: 861px) {
  .js .work__sticky {
    position: sticky; top: 0; height: 100vh; overflow: hidden; overflow: clip;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center;
    padding: 6.5rem 0 2.5rem;
  }
  .js .work__head { margin-bottom: 0; }
  .js .work__progress { display: inline-flex; }
  .js .work__track {
    display: flex; align-items: center; gap: clamp(2rem, 4vw, 4rem);
    width: 100%; min-width: 0; margin: 0; padding: 2.5rem calc(50% - var(--sheet-w) / 2) 3rem;
    will-change: transform;
  }
  .js .sheet { flex: none; width: var(--sheet-w); aspect-ratio: 3 / 2; will-change: transform; }
  .js .sheet .mono { white-space: nowrap; }
  .js .sheet[data-i="0"] { --rot: -1.4deg; }
  .js .sheet[data-i="1"] { --rot: 0.9deg; }
  .js .sheet[data-i="2"] { --rot: -0.6deg; }
  .js .sheet[data-i="3"] { --rot: 1.2deg; }
  .js .sheet--end { --rot: -0.8deg; }
  .js .sheet:hover, .js .sheet:focus-within { --rot: 0deg; }
}
/* Short laptops: tighten the studio so a sheet clears the fold */
@media (min-width: 861px) and (max-height: 720px) {
  .js .work__sticky { padding-top: 5.5rem; padding-bottom: 1.5rem; }
  .js .work__track { padding-top: 1.5rem; padding-bottom: 2rem; }
  .js .work__head .title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
}
@media (max-width: 860px) {
  .work { --sheet-pad: clamp(1.4rem, 5vw, 2rem); }
  .work__head { flex-direction: column; align-items: flex-start; }
  .sheet .title { max-width: none; }
  .sheet__top { flex-wrap: wrap; gap: 0.4rem 1rem; }
}