/* asquared · Grid Typography, the pages (pages.css, PAGES.md).

   Loaded after style.css by every page except the homepage: the blog index,
   the articles, About and Contact. style.css stays the source of the tokens
   (--ground, --ink, --mint, --g, --cols), the module (.wrap: 63 units, 8
   columns of 7 + 1-unit gutters; 4 columns on phones), the header, the
   footer and the components; this file adds only what a page needs around
   them. Each page's own layout lives in its own stylesheet (blog/blog.css,
   blog/article.css, about/about.css, contact/contact.css). */

/* ---------- the page: the footer rests on the window's bottom edge on short pages ---------- */

body.p-body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body.p-body > main { flex: 1 0 auto; }
body.p-body > .site-foot { flex: none; }

/* ---------- the page head: the modular title on its grid field ----------
   On desktop the header lies over the page's first three units (the mark on
   rows 1-2, as on the homepage), so the title starts on row 4. Elsewhere the
   header is in the flow and the same four units separate them. */

/* the unit (--g) is defined inside .wrap (style.css), so spacing in units
   sits on the grid, not on the section */
.p-head > .wrap > .p-grid { padding-top: calc(var(--g) * 4); }
.p-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--g);
}
.p-title {
  grid-column: 1 / -1;
  margin: 0 0 calc(var(--g) * 2);
  font-size: inherit;
  line-height: 1;
}
/* a page's real heading set in Geist under a modular masthead (articles) */
.p-h1 {
  grid-column: 1 / -1;
  margin: 0;
  font-weight: 600;
  font-size: clamp(32px, 1.1rem + 3vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .p-h1 { grid-column: 1 / span 6; }
}

/* a page section: the homepage's title-section rhythm (7 units above) */
.p-sec > .wrap > .p-grid { padding-top: calc(var(--g) * 7); }
.p-sec:last-child > .wrap > .p-grid { padding-bottom: calc(var(--g) * 7); }
@media (max-width: 639px) {
  .p-sec > .wrap > .p-grid { padding-top: 72px; }
  .p-sec:last-child > .wrap > .p-grid { padding-bottom: 72px; }
}

/* ---------- the footer's entrance on a page (IO-owned F1) ----------
   The homepage's footer is cut-owned (B6); on a page it plays when it comes
   into view. The footer mark never animates: only the legal line beside it
   and the links are withheld until enter.js prepares the row. */
html.is-motion body .site-foot .f-row[data-in]:not([data-in-by]):not(.m-in):not(.m-prep) { clip-path: none; }
html.is-motion body .site-foot .f-row[data-in]:not(.m-in) { border-top-color: transparent; }
html.is-motion body .site-foot .f-row[data-in]:not(.m-in):not(.m-prep) .f-legal { clip-path: inset(0 calc(100% - 28px) 0 0); }
html.is-motion body .site-foot .f-row[data-in]:not(.m-in):not(.m-prep) .f-links a { clip-path: inset(0 100% 0 0); }

/* ---------- TURN on any picture (enter.js recipes.turn) ----------
   The cell grammar's faces for an image that turns in as a tile, as the
   homepage's app icons do: its dark back (a logo grey), the turn, the image. */
html.is-motion img[data-s="0"] { filter: brightness(.17); }
html.is-motion img[data-s="1"] { filter: brightness(.15); }
html.is-motion img[data-s="3"] { filter: brightness(.85); }

/* ---------- a page's own mint field (data-mint): the one active field ----------
   Mint appears as one field on a page. A field that shows only while it is
   the active one (data-mint="hover") is mint while hovered, focused within
   or .is-on; the lean (motion.js) keeps it flat while it shows. */
[data-mint=""],
[data-mint="on"] { background: var(--mint); color: var(--ink); }
[data-mint="hover"]:hover,
[data-mint="hover"]:focus-within,
[data-mint="hover"].is-on { background: var(--mint); color: var(--ink); }
/* one active field at a time: a field holding the keyboard's focus keeps the
   mint and a hovered one waits; a field focused by a click (a link row after
   Back, a radio) gives way to the one under the pointer */
:root:has([data-mint="hover"]:focus-visible, [data-mint="hover"] :focus-visible) [data-mint="hover"]:hover:not(:focus-within):not(.is-on),
:root:has([data-mint="hover"]:hover) [data-mint="hover"]:focus-within:not(:hover):not(:focus-visible):not(:has(:focus-visible)):not(.is-on) { background: transparent; }

@media print {
  html.is-motion body .site-foot .f-row[data-in] .f-legal,
  html.is-motion body .site-foot .f-row[data-in] .f-links a { clip-path: none !important; }
}