/* backend/src/main/resources/static/modules_styles/pikiner_sites/components/rhythm-tuning.css */

/* ==============================================
   RHYTHM TUNING — the vertical spacing of the page

   The single source of truth for two distances, and they are different in
   kind. Between the sheets is the rhythm of the page: how far one block
   of text stands from the next. Inside a sheet is its padding: how far
   the text stands from the sheet's own edge. The starter's spacing scale
   governs neither — the first is section rhythm, which the contract keeps
   in its own token, and the second is a decision of this module's board.

   Written by the dev rhythm panel through PUT /api/rhythm-tuning and read
   back by GET — the store parses this file, so its shape is fixed: hand
   edits to VALUES survive a save, hand edits to structure do not.

   --gb-section-gap is a contract token declared in the starter's theme;
   this overrides it, and may, because module stylesheets are linked after
   the starter's. What keeps the override off the account pages is
   delivery — this file reaches only the pages of this module.

   The gap between sheets is counted in CELLS of the drawing board, not
   set in pixels: on a board the distance between two things is however
   many squares lie between them, so the rhythm follows --bp-cell and
   stays the same number of cells when the grid is retuned. It needs no
   ramp of its own for the same reason — the cell already steps with the
   viewport. The sheet padding below does step by media query, because it
   answers to the text rather than to the board.

   TWO WIDTHS, NOT ONE. --rh-sheet is how wide the sheet of paper is;
   --gb-measure is how long a line of running text may get on it. They
   were the same number until the sheet was asked to be wider, and one
   value cannot answer both: a sheet wide enough to fill a 1900px screen
   sets prose past a hundred characters a line, which is where the eye
   starts losing the start of the next one. Wide sheet, text column on
   the left axis, the far side of the sheet left as margin — which is how
   a drawing is laid out anyway.
   ============================================== */

:root {
  --rh-sheet: 60rem;
  --gb-measure: 46rem;
  --rh-pad-block: 3rem;
  --rh-pad-inline: 2rem;
}

/* Counted in cells of the board, not in pixels: --bp-cell is declared
   on .site-page, so this is too. */
.site-page {
  --gb-section-gap: calc(3 * var(--bp-cell));
}

@media (max-width: 767px) {
  :root {
    --rh-pad-block: 2rem;
    --rh-pad-inline: 1rem;
  }
}