/* ==========================================================================
   Composition layer — turning library sections into documents.

   Every section is authored at 1440px wide (the Figma frame). To place one on
   a US Letter page or a 16:9 slide you drop it inside a .sheet__frame, which
   scales the 1440 artboard down to the sheet width. Nothing inside the section
   needs to change, so a block behaves identically on the web page, in a
   one-pager and on a slide.

   Usage:
     <div class="sheet sheet--letter">
       <div class="sheet__frame"> ...paste section markup here... </div>
     </div>
   ========================================================================== */

:root {
  /* 1440 artboard → sheet width. Recomputed per sheet type below. */
  --artboard: 1440px;
}

.sheet {
  position: relative;
  margin: 0 auto 24px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .12);
  break-inside: avoid;
  page-break-inside: avoid;
}

/* `zoom` rather than `transform: scale()` on purpose: zoom reflows layout, so an
   auto-height sheet actually shrinks to its content and page breaks land in the
   right places when printing. Chrome and Safari support it; Firefox since 126. */
.sheet__frame {
  width: var(--artboard);
  zoom: var(--sheet-scale);
}

/* ---- US Letter portrait — 8.5 × 11in @ 96dpi = 816 × 1056 ---------------- */

.sheet--letter {
  width: 816px;
  height: 1056px;
  --sheet-scale: calc(816 / 1440);
}

/* Letter landscape */
.sheet--letter-landscape {
  width: 1056px;
  height: 816px;
  --sheet-scale: calc(1056 / 1440);
}

/* ---- 16:9 slide — 1280 × 720 ------------------------------------------- */

.sheet--slide {
  width: 1280px;
  height: 720px;
  --sheet-scale: calc(1280 / 1440);
}

/* A4 portrait — 210 × 297mm @ 96dpi */
.sheet--a4 {
  width: 794px;
  height: 1123px;
  --sheet-scale: calc(794 / 1440);
}

/* Let a sheet grow to whatever its content needs (a flowing one-pager). */
.sheet--auto { height: auto; }

/* Content that should sit inside the sheet's own margin rather than bleed. */
.sheet--pad .sheet__frame { padding-block: 24px; }

/* ---- Leave-behind reach block ------------------------------------------
   Printed paper cannot be clicked. A document built with
   doclinks.variant(html, "leave-behind") gains this next to its primary CTA:
   the destination as a scannable code and as text someone can type.
   The digital variant never emits it — there the button itself is the link. */
.fx-reach {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
  padding: 18px 30px 18px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 18px rgba(15, 23, 42, .22);
}
.fx-reach__code { display: flex; flex: none; }
.fx-reach__code svg { display: block; border-radius: 6px; }
.fx-reach__text { text-align: left; }
/* The closing CTA is a fixed-height photograph with absolutely positioned
   copy; adding a block to it would run off the bottom of the section, so the
   copy moves up by roughly the block's height when one is present. */
.fx-ready__content:has(.fx-reach) { top: 250px; }
.fx-reach__note {
  font-size: 17px; line-height: 24px; font-weight: 500; color: var(--neutral-500);
}
.fx-reach__url {
  font-size: 26px; line-height: 34px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--neutral-900);
}

/* ---- Print --------------------------------------------------------------- */

@page { size: letter portrait; margin: 0; }
@page landscape { size: letter landscape; margin: 0; }

@media print {
  body { background: #fff; margin: 0; }
  .sheet {
    margin: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  .no-print { display: none !important; }
}

/* ---- Deck behaviour (screen) -------------------------------------------- */
/* Give <body class="deck"> to scroll-snap through slides one at a time. */

.deck {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 100vh;
  margin: 0;
  background: #22262e;
  padding: 24px 0;
}
.deck .sheet { scroll-snap-align: center; }