/* Sample work: the papers a client holds, composed in wells the way the stage pictures compose them: each paper at its
   own stage size (stages-1.css), positioned, overlapping by 40 px or more, covering edges on gaps, never pulled apart.
   Each well starts at the text column and bleeds to the right edge like the page's other pictures; the kit's well
   (k-scene k-well k-files) gives the light. Tokens and kit classes only. */

/* The wells. */
.f-section > .site-wide.site-papers { grid-column: 5 / -1; width: calc(100% + 48px); margin-bottom: 40px; border-radius: 0 0 0 48px; }
.site-papers .s1-object, .site-papers .f-object { position: absolute; margin: 0; }
.site-papers .site-papers-fiction { position: absolute; left: 0; top: calc(100% + 12px); margin: 0; z-index: 41; }

/* Decide: the closed Blueprint, and the Fit Note tilted over its fore edge. */
.site-papers--decide { height: 520px; }
.site-papers--decide .s1-blueprint { left: 200px; top: 48px; width: 292px; height: 384px; z-index: 2; }
.site-papers--decide .s1-fit { left: 432px; top: 152px; width: 268px; height: 288px; z-index: 3; transform: rotate(-2deg);
  /* the kit's k-rotated rules, restated: the Fit Note's snapshot has no k-rotated class */
  --k-hair: var(--line-construction); --color-line-construction: var(--k-mat-shade-090); --k-ink-rule: var(--k-mat-shade-060); }

/* Build: the Handover open; the tests sheet over its empty top right, as in the Build picture; the access record's title
   strip above the tests, its face under them; the runbook behind the Handover's lower right, as in the Build picture. */
.site-papers--build { height: 1040px; }
.site-papers--build .f-reviewer-backing { left: 568px; top: 24px; width: 312px; height: 192px; z-index: 5; }
.site-papers--build .s1-tests { left: 552px; top: 120px; width: 328px; height: 280px; z-index: 6; transform: rotate(3deg); }
.site-papers--build .s1-handover { left: 48px; top: 244px; width: 652px; height: 760px; z-index: 4; }
.site-papers--build .s1-runbook { left: 576px; top: 704px; width: 312px; height: 272px; z-index: 3; transform: rotate(1.5deg); }

/* Care: the monthly note, whole, in a narrower well. Its footline is pinned to its foot, so the note keeps its full height. */
.f-section > .site-wide.site-papers--care { grid-column: 5 / 11; width: auto; border-radius: 0 0 48px 48px; height: 712px; }
.site-papers--care .s1-monthly { left: 48px; top: 48px; width: 576px; height: auto; z-index: 3; }
.site-papers--care .s1-monthly > .k-body { padding-bottom: 72px; }

/* Below the desktop frame: every well spans the page, and the phone gets its own composition. */
@media (max-width: 1023px) {
  .f-section > .site-wide.site-papers, .f-section > .site-wide.site-papers--care { grid-column: 1 / -1; width: calc(100% + 16px); border-radius: 0 0 0 32px; }
  .site-papers--decide { height: 680px; }
  .site-papers--decide .s1-blueprint { left: 16px; top: 40px; width: 240px; height: 320px; }
  .site-papers--decide .s1-fit { left: 96px; top: 320px; width: 260px; height: 290px; transform: rotate(-1.5deg); }
  .site-papers--build { height: 1660px; }
  .site-papers--build .s1-handover { left: 0; top: 32px; width: 286px; height: 980px; }
  .site-papers--build .f-reviewer-backing { left: 72px; top: 950px; width: 280px; height: 192px; z-index: 5; } /* over the Handover's empty foot */
  .site-papers--build .s1-tests { left: 24px; top: 1080px; width: 296px; height: 284px; transform: rotate(2deg); }
  /* The Build picture hides its runbook on a phone; here it is shown, its cover set for its own width. */
  .site-papers--build .s1-runbook { display: block; left: 80px; top: 1320px; width: 260px; height: 280px; transform: rotate(-1.5deg); }
  .site-papers--build .s1-runbook .k-body { padding: 56px 20px 20px 24px; }
  .site-papers--care { height: 600px; }
  .site-papers--care .s1-monthly { left: 16px; top: 40px; width: 310px; }
}

/* The advisory gallery (gallery-finish, #g-advisory) follows the example at the frame's section spacing: 96 px, 64 px on a
   phone (frame.css .f-section). On its job page the reserved joinery band above it gave that space. */
.site-gallery { margin-top: 96px; }
@media (max-width: 767px) { .site-gallery { margin-top: 64px; } }

/* The gallery's "Next" workflow links: a 24 px target box with no change to the layout (as the footer links). */
.site-gallery .g-next a { display: inline-block; padding-block: 4px; margin-block: -4px; }

/* Frame document labels belong to the explanation immediately below them. */
.site-page-sample-work .f-body > .site-list-label + p { margin-top: 8px; }

/* See-and-fix finish1: the section rule belongs above its heading, at the
   specified 16 px inset. Picture-to-text gaps inside each section stay intact. */
.site-page-sample-work .proof-shelf > .f-section { border-top: var(--line-structure) solid var(--color-line-structure); border-bottom: 0; padding-bottom: 0; }