/* Recognizing access to Indigenous lands — the Figma frames from the "FRAnew" column (885:4661 onwards),
   placed as they are. Like Wayfinding, the page takes the frames' beige, every frame shares one scale
   (one Figma px = 100cqi / 2688) and each frame runs to the right edge of the page. */
.fra { --cream: #f5f6ea; --olive: #b9b14b; --k: calc(100cqi / 2688); }
body.fra { background: var(--cream); }

/* Cover: full width */
.fra-cover { background: var(--olive); }
.fra-cover > img { display: block; width: 100%; height: auto; }

/* Content column runs to the right edge of the page */
.fra .study { grid-template-columns: var(--sidenav-w) minmax(0, 1fr); justify-content: stretch; padding-right: 0; }
@media (max-width: 1024px) { .fra .study { grid-template-columns: minmax(0, 1fr); } }
.study > main { container-type: inline-size; padding: 0 0 120px; }

/* A frame: Figma width, flush right, with the Figma spacing above it */
.shot { position: relative; width: calc(var(--w) * var(--k)); margin: calc(var(--gap) * var(--k)) 0 0 auto; }
.shot img { display: block; width: 100%; height: auto; }

/* Story: its gradient starts in the page beige, so it spans the full column. The space above it
   puts the opening quote in the middle of the screen when you arrive at it. */
.shot--story { --pt: max(24px, calc((100svh - 57px) / 2 - 480 * var(--k)));
  width: 100%; padding-top: var(--pt); isolation: isolate; }
/* The frame's beige-to-grey gradient runs the full width of the page, so it has no visible edge */
.shot--story::before { content: ""; position: absolute; z-index: -1; top: var(--pt); bottom: 0; right: 0; left: -100vw;
  background: linear-gradient(#f5f6ea, #cacaca); }
.fra .sidenav { z-index: 2; }

/* How might we: alone in the middle of its own screen */
.shot--center { width: 100%; min-height: calc(100svh - 57px); display: flex; align-items: center; justify-content: flex-end; }
.shot--center .shot__inner { width: calc(var(--w) * var(--k) * var(--s, 1)); }
/* Frames shown a little smaller than their Figma size, centred in the column */
.shot--small { width: calc(var(--w) * var(--k) * var(--s)); margin-left: auto; margin-right: auto; }

/* Future scope: the ochre frame continues to the right edge */
.shot--ochre { background: #bebc49; }

@media (max-width: 760px) {
  .shot--story { --pt: 24px; }
  .shot--center { min-height: 0; padding: 48px 0; }
}

/* Framework and macro audit: one shared smaller scale, still flush right, so the split circle and the right-edge bleed line up */
.shot--scaled { width: calc(var(--w) * var(--k) * var(--s)); margin-left: auto; margin-right: auto; }
/* Centred, the circles that ran off the frame's right edge would end in a hard line; fade that edge into the page beige */
.shot--scaled img { -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); mask-image: linear-gradient(to right, #000 92%, transparent); }