/* Public pages reuse the Folio shell, page header and page navigation so the
   anonymous surface and the workspace read as one product. */

/* Same document reset as the workspace: without it the browser's default body
   margin and white page background show as a frame around the canvas. */
html,
body {
  margin: 0;
  min-height: 100%;
}

/* The same root background the workspace carries, in the colour these pages sit on:
   pulled past its edge the page shows the root, and unpainted that is white. The
   literal repeats the token because the token arrives with a later import. */
html {
  background: var(--folio-semantic-color-background-canvas, #f1eee5);
}

body {
  background: var(--folio-semantic-color-background-canvas, #f1eee5);
}

[hidden] {
  display: none !important;
}

.public-shell {
  /* The workspace fills its 1420px frame with side rails; the public pages have
     none, so their frame is the reading column plus the shared gutter and the
     whole block centres instead of hugging the left edge. Redefining the frame
     token keeps the header, content and footer on one origin. */
  --folio-component-workspace-maxWidth: calc(
    var(--folio-component-workspace-readingMaxWidth) + var(--folio-layout-frame-gutter) * 2
  );
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* The same slab the workspace carries, measured from this header and in the colour the
   public pages sit on. */
.public-page-header {
  position: relative;
}

.public-top-shade {
  background: var(--folio-semantic-color-background-canvas);
  height: 500px;
  inset-inline: 0;
  pointer-events: none;
  position: absolute;
  top: -500px;
}

/* The workspace header pairs navigation with search; the public one carries
   navigation alone. */
.public-page-header {
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
}

.public-main,
.public-footer {
  margin-inline: auto;
  max-width: var(--folio-component-workspace-maxWidth);
  padding-inline: var(--folio-layout-frame-gutter);
  width: min(100%, var(--folio-component-workspace-maxWidth));
}

.public-main {
  flex: 1 1 auto;
  padding-block: var(--folio-primitive-space-32) var(--folio-primitive-space-48);
}

.public-reader {
  max-width: var(--folio-component-workspace-readingMaxWidth);
  width: 100%;
}

.public-title {
  font-size: calc(var(--folio-semantic-typography-baseSize) * 1.9);
  font-weight: var(--folio-semantic-typography-bookWeight);
  line-height: 1.2;
  margin: 0 0 var(--folio-primitive-space-16);
}

.public-lead {
  font-size: calc(var(--folio-semantic-typography-baseSize) * 1.12);
  line-height: var(--folio-semantic-typography-readerLineHeight);
  margin: 0;
}

.public-section {
  margin-top: var(--folio-primitive-space-32);
}

.public-subtitle {
  font-size: calc(var(--folio-semantic-typography-baseSize) * 1.25);
  font-weight: var(--folio-semantic-typography-bookWeight);
  margin: 0 0 var(--folio-primitive-space-8);
}

.public-main p {
  line-height: var(--folio-semantic-typography-readerLineHeight);
  margin: 0 0 var(--folio-primitive-space-12);
}

.public-note {
  color: var(--folio-semantic-color-text-secondary);
}

.public-action {
  margin-top: var(--folio-primitive-space-8);
  text-decoration: none;
}

.public-footer {
  border-top: var(--folio-primitive-border-thin) solid
    var(--folio-semantic-color-border-subtle);
  padding-block: var(--folio-primitive-space-16);
}

.public-footer a {
  color: var(--folio-semantic-color-text-secondary);
  font-family: var(--folio-semantic-typography-interfaceFamily);
}