/* =======================================================================
   page.css - layout for long-form prose pages.

   Loaded ONLY by pages that need it, never by index.html. It adds nothing to
   the palette and nothing to the type scale: every value here resolves to a
   token already declared in style.css.

   Why this file exists: long pages were borrowing .about__say from the
   homepage, where that class is the left column of a two-column grid. Used
   alone it caps text at 58ch inside a 1560px shell, so the copy sits in a
   narrow strip against the left edge with the rest of the page empty. The
   fix is a narrower container with a real second column, not a wider measure.

   Constraints observed, from the site skill's site-profile.json:
     - --gold carries no text. It is used here as a rule only.
     - Gold-coloured type uses --gold-text, and only on --paper.
     - --muted has no text role and does not appear.
     - No font stack is redeclared, so Montserrat stays second and the
       U+02BB okina keeps its glyph.
     - Nothing is animated and nothing is hidden behind script, so the
       page ships settled with scripting off.
   ========================================================================== */

.pagebody {
  padding-block: var(--band);
}

/* Narrower than .shell on purpose. 1560px is a homepage width; prose does not
   want it. The header and footer keep .shell, which is the intended contrast. */
.pagebody__inner {
  width: min(100% - (var(--gutter) * 2), 1120px);
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
}

.pagebody__main > :first-child {
  margin-top: 0;
}

.pagebody__main h2 {
  font-size: var(--fs-500);
  margin-top: clamp(2.25rem, 3.5vw, 3.25rem);
  margin-bottom: 0.75rem;
}

.pagebody__main h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-400);
  color: var(--ink);
  line-height: 1.25;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

/* A ceiling, not the layout. The grid column governs the measure at desktop;
   this only stops a very wide single-column view from running long lines. */
.pagebody__main p {
  max-width: 72ch;
}

/* --- Contents aside ------------------------------------------------------ */

.toc {
  border-top: 3px solid var(--gold);
  padding-top: 1.25rem;
}

.toc__h {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-100);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 0.35rem;
}

.toc li {
  border-bottom: 1px solid var(--line);
}

.toc a {
  display: block;
  padding-block: 11px;
  font-size: var(--fs-200);
  color: var(--ink);
  text-decoration: none;
}

.toc a:hover {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.toc__cta {
  margin: 1.5rem 0 0;
}

/* Two columns once there is room for a 20rem aside beside a full measure.
   Below this the aside stacks ABOVE the article, which is the useful order
   for a contents list: after the article it would be decoration. */
@media (min-width: 1000px) {
  .pagebody__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  }
  .pagebody__main {
    grid-column: 1;
    grid-row: 1;
  }
  .pagebody__side {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 2rem;
  }
}