/* The shell every page that is not the hero uses: a scrolling sheet laid on the same lattice,
   with the homepage's own tokens, navigation and contact menu coming from home-v2.css. No type
   values here — those are the typekit's, as everywhere else. */

/* The homepage is a hero and pins itself to the viewport. These scroll. */
body.page{height:auto;overflow:auto}
/* The rules are painted to the viewport, so they stay put while the content moves past them —
   which is right: a grid is a property of the page, not of the scroll position. */
body.page .grid{position:fixed}

/* Spans major rule to major rule, which page.js sets from the same lattice it draws. */
/* Not positioned, so the name panel inside it is placed against the page's corner rather than the
   sheet's — the same corner the homepage card sits in. */
.sheet{width:var(--sheet-w,1100px);max-width:calc(100vw - var(--edge) * 2);margin:0 auto;padding:calc(var(--edge) * 2) 0 96px;display:flex;flex-direction:column;gap:28px}
/* Clear of both the brand on the left and the navigation on the right. */
@media(min-width:901px){.sheet{padding-top:92px}}

/* The side panel: pinned to the top left the way the homepage's card is, at the page's inset
   rather than at the sheet's edge, and staying put while the page scrolls under it. Identity sits
   at the top of it, because a page with a surface should not also float a second thing beside it.

   The sheet keeps its own span, first major rule to last, because that is what makes the work
   page's six columns divide exactly. Shifting it right to sit beside the panel would leave ten
   subdivisions, and ten does not divide by six. So the content clears the panel vertically. */
/* Just the name, as a way home, pinned at the page's inset like the navigation opposite it so the
   way home is always in the same corner. Below 900 it goes back into the flow (below). */
.side-panel{position:fixed;top:var(--edge);left:var(--edge);z-index:3;display:flex;flex-direction:column;gap:11px;padding:4px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius)}
/* Flex rather than block, because the mark now sits beside the name. The same lockup the homepage
   card holds, in the one place every other page keeps identity. */
/* Padded like a navigation link inside a bar padded like the navigation, so the name and the
   navigation are the same height across the top of the page. */
.side-home{display:flex;align-items:center;gap:7px;padding:4px 8px;margin:0;border-radius:2px;color:var(--ink);transition:background-color .15s,color .15s}
.side-home:hover,.side-home:focus-visible{background:var(--surface-sunk);color:var(--line)}
.side-list{display:flex;flex-direction:column;gap:1px;padding-top:10px;border-top:1px solid var(--hairline)}
.side-row{display:block;width:100%;padding:6px 7px;border-radius:2px;text-align:left;color:var(--text);transition:background-color .14s,color .14s}
.side-row:hover{background:var(--surface-sunk)}
.side-row.is-on{background:#333dbe12;color:var(--line)}

@media(min-width:901px){
  /* page.js sets --sheet-top from the panel's measured height; the 92px is only what stands until
     it does. */
  body.has-panel .sheet{padding-top:var(--sheet-top,92px)}
}
/* Pinning a panel to a phone's corner would cover the page it belongs to, so below 900 it goes
   back into the flow at the top of the sheet. */
@media(max-width:900px){
  .side-panel{position:static;width:100%;margin-bottom:6px}
}

.intro{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.intro h1{margin:0;color:var(--ink)}
.intro .lede{margin:0;max-width:52ch}

/* A titled block: a heading, then whatever the page puts below. No rule under the heading: the
   type and the space already say where the block starts. */
.block{display:flex;flex-direction:column;gap:14px}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.block-id{display:flex;flex-direction:column;gap:3px}
.block-name{margin:0;color:var(--ink)}
.block-meta{margin:0;color:var(--text);opacity:.7}
.block-link{color:var(--line);white-space:nowrap}
.block-link.is-empty{color:var(--text);opacity:.5}
.block-what{margin:0;color:var(--text);max-width:62ch}

.colophon{margin:4px 0 0;color:var(--text);opacity:.7;max-width:62ch}

/* Dated rows, shared by the about and work pages: the date on the first quarter, the thing and its line beside it. */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.rows li{display:grid;grid-template-columns:25% minmax(0,1fr);column-gap:16px;row-gap:3px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.rows .t-micro{grid-row:1 / 3;color:var(--line);padding-top:4px}
.rows .t-sub{color:var(--ink)}
.rows .t-read{color:var(--text);max-width:62ch}
@media(max-width:600px){.rows li{grid-template-columns:100%}.rows .t-micro{grid-row:auto}}