trykeyline 0.0.0-stage → 0.1.0

package/plugins/keyline/skills/keyline/glass/layout/assets/layout-tokens.css

@@ -0,0 +1,199 @@
+/* ─────────────────────────────────────────────────────────────────────────
+   Layout and hierarchy — tokens and structural primitives
+   ───────────────────────────────────────────────────────────────────────── */
+
+@theme {
+  /* ── The measure ────────────────────────────────────────────────────────
+     640px outer, 32px padding → 576px of text. At 16px prose that's ~75–85
+     characters per line: the top of the comfortable range, which is the
+     right place for a site that expects sustained reading (long lines are
+     efficient once the reader is committed, and 1.75 leading pays for the
+     longer return sweep).
+
+     EVERY page uses this. The payoff isn't visual consistency, it's
+     positional continuity: clicking from a summary into its detail view
+     doesn't move the text, so the transition reads as expansion rather than
+     as arriving at a different document. */
+  --container-col: 640px;
+
+  /* The outer frame that rails anchor to, alongside the column. Anchoring
+     both to the SAME frame is what makes the gap between them hold steady
+     from 1280px up — a rail positioned against the viewport instead drifts
+     away from the content it indexes as the window grows. */
+  --container-frame: 1280px;
+  --rail-width: 196px;
+}
+
+@layer base {
+  /* Apple-style continuous corners on every rounded element.
+
+     A standard border-radius is a quarter-circle: constant curvature that
+     drops abruptly to zero where it meets the straight edge. The eye reads
+     that discontinuity as a slight hardness. A superellipse varies curvature
+     continuously into the edge.
+
+     superellipse(k) uses exponent 2^k — k=1 is a normal round corner, k=2 a
+     full iOS squircle, so 1.5 lands about halfway. Not 2, because a full
+     squircle is noticeable at small sizes (it starts to look like a swollen
+     rectangle); halfway reads as "well-drawn corner" rather than as an
+     effect.
+
+     Unsupported browsers ignore it and fall back to normal rounding. Keep it
+     that way — nothing else in the layout should depend on it. */
+  *,
+  *::before,
+  *::after {
+    corner-shape: superellipse(1.5);
+  }
+}
+
+@layer components {
+  .col {
+    max-width: var(--container-col);
+    margin: 0 auto;
+    padding: 0 32px;
+  }
+
+  /* Skip link. Parked off-screen with a TRANSFORM, never display:none —
+     which would take it out of the tab order and defeat the point. Every
+     page needs a matching id="main". */
+  .skip {
+    position: absolute;
+    left: 16px;
+    top: 16px;
+    z-index: 100;
+    background: var(--color-gray-1000);
+    color: var(--color-background-100);
+    padding: 10px 14px;
+    font-size: 13px;
+    text-decoration: none;
+    border-radius: 6px;
+    transform: translateY(-200%);
+    transition: transform 150ms var(--ease-geist);
+  }
+  .skip:focus {
+    transform: translateY(0);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Print. A real presentation, not an afterthought.
+
+   The .reveal reset is the one people forget: scroll-triggered content is at
+   opacity: 0 until an IntersectionObserver fires, and printing never fires
+   it — so the page prints blank without this.
+   ───────────────────────────────────────────────────────────────────────── */
+@media print {
+  nav,
+  footer,
+  .skip {
+    display: none;
+  }
+
+  body {
+    background: #fff;
+    color: #000;
+    font-size: 11pt;
+  }
+
+  .reveal {
+    opacity: 1;
+    transform: none;
+  }
+
+  /* An underlined URL-less link is noise on paper. */
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   REFERENCE — apply these in components; they're documentation, not classes.
+
+   ── The radius ladder ──────────────────────────────────────────────────
+   Nesting rule: INNER = OUTER − the padding between them. Geometry, not
+   taste — two concentric rounded rectangles share a centre of curvature
+   only if their radii differ by exactly the gap between their edges.
+
+     rounded-full     pills, tags, dots, markers
+     rounded-[5px]    a lettermark box
+     rounded-md    6  tooltips, the skip link
+     rounded-[9px] 9  small cards in a stack
+     rounded-[10px]10 avatar inside a button · a list highlight bar
+     rounded-xl   12  cards, hover panels, disclosures, icon buttons
+     rounded-2xl  16  outer containers — a dock, a sheet, a pocket
+
+   Worked example:
+     Dock          rounded-2xl (16)  p-1 (4)
+       Icon button rounded-[12px]          16 − 4 = 12  ✓
+         Avatar    rounded-[10px]          12 − 2 = 10  ✓
+
+   Radius scales with SIZE, not importance — and sub-proportionally, because
+   a large element with a proportional radius reads as a lozenge.
+
+   ── Hairline weights ───────────────────────────────────────────────────
+   The choice is about what the line is DOING:
+
+     0.5px   internal articulation — a divider between icon groups inside
+             one dock. Renders as a true sub-pixel hairline on retina and
+             rounds UP to 1px elsewhere, so it degrades rather than vanishes.
+     1px     a real edge — where a card ends.
+     2px     a mark with editorial weight — a blockquote rule, a focus ring.
+
+   On translucent surfaces use the ALPHA ramp (border-gray-alpha-400). A
+   solid border on glass doesn't participate in what's behind it and reads as
+   a pasted-on frame.
+
+   An <hr> needs border-0 before you give it a background, or you get the UA
+   border AND your line. Non-semantic dividers get aria-hidden.
+
+   ── The z-index ladder ─────────────────────────────────────────────────
+   Ordered by PERMANENCE, not importance. Gaps of 10 so something can be
+   inserted without renumbering.
+
+     100   skip link — must beat everything, including modals
+      60   a once-a-session overlay — over the dock, under the skip link
+      50   fixed navigation
+      40   tap-outside catcher — under the nav, over the page
+      30   a pocket front, above the cards it contains
+      20   hover cards, dropdowns
+      10   a hovered item lifting above its siblings
+     -10   a sliding highlight, behind content inside `isolate`
+
+   60 is what the gaps were for: a greeting overlay arrived long after this
+   ladder was set and slotted in without touching an existing value.
+
+   Two pairs to understand rather than copy. 40/50: a full-screen catcher
+   must be above the page (to catch the click) and below the menu it
+   dismisses (or it eats the menu's own clicks). 60/100: a splash overlay
+   covers the navigation — or it isn't covering the page — but must never
+   cover the skip link, because a keyboard user tabbing during a two-second
+   greeting has to be able to get past it.
+
+   ── Two techniques ─────────────────────────────────────────────────────
+   isolate + negative z: a highlight bar behind icons but in front of its
+   container's background. `-z-10` alone drops it behind the container;
+   `isolate` scopes the negative z inside.
+
+   pointer-events-none on a full-width strip, auto on the content: a fixed
+   nav strip spans the viewport for centring but must not swallow every click
+   along the bottom of the page.
+
+   And the strip carries NO TRANSFORM. A transform makes an element the
+   containing block for position:fixed descendants — a full-bleed w-screen
+   overlay inside it would be trapped in the strip's bounds. Same class of
+   problem as transforms weakening backdrop-filter: when something positioned
+   or filtered behaves inexplicably, check every ancestor for transform,
+   filter, perspective, contain, and will-change.
+
+   ── Viewport units ─────────────────────────────────────────────────────
+   Use dvh, never vh. `vh` refers to the viewport WITHOUT mobile browser
+   chrome, so a 100vh element extends under the address bar and its bottom is
+   unreachable. `dvh` tracks the actual visible area.
+
+   ── Bottom padding ─────────────────────────────────────────────────────
+   Anything with fixed bottom chrome needs pb-28 (112px) audited page by
+   page, or the last line sits under the nav. The most common "looks fine on
+   my long page" bug.
+   ───────────────────────────────────────────────────────────────────────── */

package/plugins/keyline/skills/keyline/glass/layout/guide.md

@@ -0,0 +1,258 @@
+# Glass Layout
+
+> **Glass preset.** This is the layout system running on [modimihir.com](https://modimihir.com), with its real values, meant to be copied whole. Read it beside `domains/layout/guide.md`, which holds the laws; this guide holds glass's values, recipes and decisions for them, and says where glass differs. Under any other preset, `domains/layout/guide.md` leads and this guide is only a worked example.
+
+For mostly-text interfaces, where layout should get out of the way. One decision drives the rest: **a single 640px reading measure on every page**, so moving between pages never moves the text.
+
+## 1. One measure
+
+```css
+.col {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+```
+
+At most 576px of text, roughly 75–85 characters at 16px: the top of comfortable, chosen for sustained reading. **Every page uses the class** (layout law 1).
+
+- **Non-text content may leave the column**: a masonry image wall has no reading measure, so it goes full-bleed.
+- **An article's cover image stays in it.** Bled wide, it becomes a banner *above* the article, not part of it.
+- **Dividers are column width** (layout law 1).
+
+## 2. Rails live outside the column, anchored to a wider frame
+
+```tsx
+<div className="relative mx-auto max-w-[1280px]">
+  {/* Absolute, so it sits outside the reading column entirely */}
+  <div className="absolute inset-y-0 left-8 hidden w-[196px] xl:block">
+    <div className="sticky top-28 max-h-[calc(100dvh-11rem)] overflow-y-auto">
+      <SectionNav … />
+    </div>
+  </div>
+
+  <div className="col">{/* the reading column, untouched */}</div>
+</div>
+```
+
+Rail and column share one centred 1280px frame, so their gap holds from 1280px up (layout law 4, which explains the absolute wrapper, the sticky child and the `dvh` cap). **`xl:block`**: below 1280px there's no margin, and the rail becomes a disclosure above the text (§6).
+
+## 3. Spacing groups; asymmetry is the mechanism
+
+```
+mt-11  (44px)   ← heading
+mb-3   (12px)
+                ← the paragraph it introduces
+```
+
+~3.5:1 above to below makes them one unit (layout law 2). It holds at every scale:
+
+| Relationship | Inner | Outer | Ratio |
+|---|---|---|---|
+| Heading → its paragraph | 12px below | 44px above | 3.7:1 |
+| List items → the next block | 8px between | 24px below | 3:1 |
+| Bio paragraphs → the links after | 16px between | 32px after last | 2:1 |
+| Section heading → its content | 16–32px | 36px+ between sections | ~2:1 |
+
+**Home sections** use `py-9` (36px each side), symmetric, since they're peers. Long pages use `mt-16 border-t pt-10` (64px, hairline, 40px): the rule marks a real change of subject.
+
+**Glass's divider** (layout law 3): the home page rules off its three substantial sections — Work, Experience, Life — and lets the two that read as a coda to Life, Watching and Socials, follow on without a rule.
+
+→ The full spacing scale and where each value is used: `glass/layout/measure-and-rhythm.md`
+
+## 4. The radius ladder nests
+
+```
+rounded-full     pills, tags, dots
+rounded-md    6  tooltips
+rounded-[9px] 9  small cards in a stack
+rounded-[10px]10 an avatar inside a button
+rounded-xl   12  cards, hover panels, disclosures
+rounded-[12px]12 icon buttons, highlight bars
+rounded-2xl  16  the outer container (a dock, a sheet)
+```
+
+Each nesting is derived by layout law 5; the dock and the sheet are worked through in `glass/layout/radius-and-elevation.md`.
+
+```css
+* , *::before, *::after {
+  corner-shape: superellipse(1.5);
+}
+```
+
+Glass sets the corner shape on everything, pseudo-elements included, with no exception for pills and circles.
+
+## 5. Hairlines: 0.5px vs 1px
+
+| Weight | For |
+|---|---|
+| `0.5px` | Chrome borders, dividers, glass edges |
+| `1px` | Card borders, rings, disclosure outlines |
+| `2px` | Quote rules, focus rings |
+| `1px` (`h-px`) | Table-of-contents markers |
+
+Weight follows the job (layout law 6): dividing icon groups inside one dock, 0.5px; defining a card's edge, 1px. On translucent surfaces the edge is the **alpha ramp** (`border-gray-alpha-400`; see `glass/color/guide.md`).
+
+## 6. Two presentations, not one responsive layout
+
+Where pointer and touch interact differently, glass ships **two components** (layout law 8):
+
+```tsx
+<nav aria-label="Primary" className="pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center">
+  <MobileDock />   {/* sm:hidden — avatar + a menu button opening a sheet */}
+  <DesktopDock />  {/* hidden sm:block — hover-revealed icons, sliding highlight */}
+</nav>
+```
+
+The desktop dock reveals pages and settings **on hover**, collapsing on scroll; touch fires none of it. `SectionNav` (a sticky rail) and `SectionNavCompact` (a `<details>` disclosure) likewise render one tree through a shared `Rows`.
+
+### The same fork, chosen by the reader
+
+Galleries offer a masonry **wall** (everything at once) or a **roll** (one photograph above a filmstrip), picked from a small dock: same data, same route. The state lives in a module both sides subscribe to, as with theme or sound:
+
+```ts
+let current: GalleryLayout = "grid";
+export function setGalleryLayout(layout: GalleryLayout) {
+  current = layout;
+  for (const fn of listeners) fn(layout);
+}
+```
+
+**The gallery layout doesn't persist** (layout law 9). The theme persists forever; the gallery layout lives in module memory and resets to the wall as each collection mounts. *The wall shows the whole collection, what you want on arrival; the roll is somewhere you go on purpose, and neither a previous visit nor the other gallery should decide it for you.* The switch opens on the photograph nearest the viewport's centre (`glass/motion/shared-element.md`), and each tile declares its own aspect ratio so one image travels between layouts undistorted.
+
+→ Both docks, the table of contents, the gallery, the touch audit and the breakpoints in use: `glass/layout/adaptive-presentations.md`
+
+## 7. Content gating: no empty states
+
+One flag, three places (layout law 10):
+
+```ts
+// content/index.ts — one derivation, everything else reads it.
+export const has = { writing: posts.length > 0, /* … */ };
+
+export const sectionHasContent = { /* home-page sections */ };
+/** Route path → whether it should exist. Unlisted paths always exist. */
+export const routeEnabled: Record<string, boolean> = { "/writing": has.writing, /* … */ };
+```
+
+```ts
+const PAGES = [
+  has.experience && { to: "/experience", … },
+  has.playground && { to: "/playground", … },
+  has.writing    && { to: "/writing", … },
+].filter(Boolean);
+```
+
+An empty collection loses its **nav icon**, **route** and **home-page entry** from one flag. On the file-based router the gate is in the page, and a catch-all sends the rest, old links included, somewhere real:
+
+```tsx
+// app/writing/page.tsx
+export default function Page() {
+  if (!has.writing) redirect("/");
+  return <Writing />;
+}
+
+// app/[...rest]/page.tsx — anything that isn't a real route lands somewhere real.
+export default function CatchAll() {
+  redirect("/");
+}
+```
+
+**`routeEnabled` outlived the client router**: the sitemap, metadata and nav still read it. Sections drop out *before* dividers are placed:
+
+```tsx
+const shown = site.sections.filter((name) => SECTIONS[name] && sectionHasContent[name]);
+```
+
+```tsx
+// One or two folders stay folder-sized and centred rather than stretching
+// across a three-up grid. (640px column − gaps) ÷ 3 ≈ 200px each.
+const COLS  = ["", "grid-cols-1", "grid-cols-2", "grid-cols-3"];
+const WIDTH = ["", "max-w-[200px]", "max-w-[420px]", ""];
+```
+
+Asked to shrink the folders by a quarter, shrink them and keep three to a row (layout law 8).
+
+## 8. The z-index ladder
+
+| z | Layer |
+|---|---|
+| 100 | Skip link — must beat everything |
+| 60 | A once-a-session overlay — over the dock, under the skip link |
+| 50 | Fixed navigation |
+| 40 | Tap-outside catcher — under the nav, over the page |
+| 30 | A pocket front, over its own contents |
+| 20 | Hover cards, dropdowns |
+| 10 | A hovered item lifting above its siblings |
+| −10 | A sliding highlight, behind content inside `isolate` |
+
+Ordered by permanence (layout law 7). The gaps paid off: a later greeting overlay took 60 without renumbering, covering the dock — or it wouldn't cover the page — but never the skip link, so keyboard users can tab past a two-second greeting. The pocket front at 30 is glass's own rung.
+
+The nav strip spans the viewport for centring, so it passes clicks through:
+
+```tsx
+<nav className="pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center">
+  <div className="pointer-events-auto">{/* the dock */}</div>
+</nav>
+```
+
+The strip carries **no transform**, which would trap the mobile sheet's full-bleed overlay inside it (layout law 7).
+
+→ The radius nestings, hairline classes and stacking-context code: `glass/layout/radius-and-elevation.md`
+
+## 9. Structural accessibility
+
+Layout law 12, in glass's markup:
+
+```tsx
+<a href="#main" className="skip">Skip to content</a>
+```
+
+- **`<nav>` labels**: "Primary", "On this page".
+- **Heading levels**: `h1` page, `h2` sections, `h3` sub-sections, `h4` cards; two elements at 14px/500 can be `h3` and `h4`.
+- **Menu triggers** carry `aria-haspopup` beside `aria-expanded` and `aria-controls`.
+
+### A disclosure should hide its content, not remove it
+
+Where a custom animation rules out `<details>`, glass collapses height to zero (layout law 11):
+
+```tsx
+<motion.div
+  initial={false}
+  animate={{ height: open ? "auto" : 0 }}
+  inert={!open}
+  aria-hidden={!open}
+  className="overflow-hidden"
+>
+```
+
+The content stays in the served HTML, for crawlers, `llms.txt` and find-in-page.
+
+```css
+@media print {
+  nav, footer, .skip { display: none; }
+  .reveal { opacity: 1; transform: none; }
+  a { color: inherit; text-decoration: none; }
+}
+```
+
+## Assets
+
+- `glass/layout/assets/layout-tokens.css` — column, spacing, radius ladder, continuous corners, hairlines, skip link, print.
+- `glass/layout/assets/SectionNav.tsx` — two presentations of one tree, with shared row rendering.
+
+## Checklist
+
+The domain checklist applies in full; these are glass's values for it.
+
+- [ ] `.col` — 640px, 32px padding — on every page; article covers stay in it.
+- [ ] Rails in the 1280px frame: `left-8`, `w-[196px]`, `sticky top-28`, `max-h-[calc(100dvh-11rem)]`, shown from `xl`.
+- [ ] Prose headings `mt-11` / `mb-3`; home sections `py-9`; long pages `mt-16 border-t pt-10`, the first `mt-14`.
+- [ ] Rules between Work, Experience and Life only; Watching and Socials follow on.
+- [ ] Radii from the ladder: 6 / 9 / 10 / 12 / 16px and full; `superellipse(1.5)` on everything.
+- [ ] 0.5px chrome, 1px object edges, 2px marks; `gray-alpha` on translucent surfaces.
+- [ ] `MobileDock` / `DesktopDock` and `SectionNav` / `SectionNavCompact`, sharing data and rows.
+- [ ] The gallery opens on the wall; its layout lives in module memory.
+- [ ] `pb-28` under the dock on every page that can end near the viewport bottom.
+- [ ] z-index on the ladder: 100 / 60 / 50 / 40 / 30 / 20 / 10 / −10.
+- [ ] Dynamic Tailwind classes written as literal strings.

package/plugins/keyline/skills/keyline/glass/layout/measure-and-rhythm.md

@@ -0,0 +1,134 @@
+# Measure and rhythm
+
+Glass's values for layout laws 1–3; the derivations and reasons every preset shares are in `domains/layout/measure-and-rhythm.md`.
+
+## The measure
+
+`.col` (§1 of the guide) is 640px outer with 32px padding each side → **576px of text**.
+
+At 16px prose that's roughly 75–85 characters per line, at the top of the comfortable range on purpose: long lines are efficient once the reader is committed, and 1.75 leading compensates for the longer return sweep. At 14px UI copy the column holds ~85–95 characters, which is fine because that text is scanned, not read.
+
+The padding does double duty: on a 375px phone the column is `375 − 64 = 311px`, and on desktop the 32px keeps text off the edge of a maximised window.
+
+That 311px once forced a responsive type step (a 30px title wrapping to three lines) until an 18px type ceiling removed it: layout law 1's narrowest-measure check, settled in the scale.
+
+640px also equals Tailwind's `sm` breakpoint — convenient, not meaningful: below it the column is padding-limited, so the two coincide naturally.
+
+The summary and detail pairs it keeps still: home-page role summary → `/experience`, writing index → article.
+
+## What's allowed outside the column
+
+**Non-text content.** The image galleries are a full-bleed CSS-columns masonry on a grey field with 4px gaps; confining it to 640px would only make the images small.
+
+```tsx
+<main className="min-h-[100dvh] bg-gray-100 p-1 pb-28">
+  <div className="columns-3 gap-1 sm:columns-4">
+```
+
+Note `columns-3` then `sm:columns-4`: fewer columns on a phone, more on desktop — against the mobile-first instinct for grids, and right here because the tiles are photographs.
+
+**Rails**, anchored to a wider frame (§2 of the guide), and **fixed chrome**: the nav strip spans the viewport for centring.
+
+## Dividers at column width
+
+```tsx
+export function Divider() {
+  return (
+    <div className="col my-3" aria-hidden>
+      <hr className="border-0 h-[0.5px] bg-gray-alpha-300" />
+    </div>
+  );
+}
+```
+
+Reusing `.col` makes it exactly as wide as the text it separates. The `<hr>` reset and `aria-hidden` are layout law 6's; the half-pixel box is a gap the site still has (`glass/layout/radius-and-elevation.md`).
+
+`my-3` (12px) on top of the sections' own `py-9` (36px) → 48px between the content of adjacent sections, the hairline centred in it.
+
+## The spacing scale
+
+Tailwind's 4px scale, with a preference for a few well-worn values:
+
+| Value | px | Typical use |
+|---|---|---|
+| `0.5` | 2 | Nudges between adjacent icons |
+| `1` | 4 | Gallery gaps, dock padding |
+| `1.5` | 6 | Sub-title under a heading |
+| `2` | 8 | List items, tag gaps |
+| `2.5` | 10 | Row padding, marker gaps |
+| `3` | 12 | Heading → paragraph, container padding |
+| `3.5` | 14 | Heading → list |
+| `4` | 16 | Paragraph gaps, grid gaps |
+| `5` | 20 | Quote indent, section heading → content |
+| `6` | 24 | Prose paragraph gaps, meta rows |
+| `7` | 28 | Capability groups |
+| `8` | 32 | Section heading → content, column padding |
+| `9` | 36 | Home section padding |
+| `10` | 40 | Section content after a rule |
+| `11` | 44 | Prose heading top margin |
+| `14` | 56 | First section on a long page |
+| `16` | 64 | Between major sections on a long page |
+| `20`/`28` | 80/112 | Page top/bottom padding |
+
+The values in heaviest use are `2.5`, `3.5`, `9`, `11` — the half-steps and odd numbers. They exist because 8/12/36/44 are where the *asymmetry ratios* land, not because the scale demanded them.
+
+## Asymmetry, in detail
+
+Layout law 2 at glass's values, beyond the guide's table (§3):
+
+| Relationship | Inner | Outer | Ratio |
+|---|---|---|---|
+| Role title → its description | 2px | 6px | 3:1 |
+| Case study title → body | 6px | 20px (between cards) | 3.3:1 |
+| Capability heading → body | 8px | 32px (between capabilities) | 4:1 |
+
+## Section rhythm
+
+**Home page — peers.**
+
+```tsx
+<section className="py-9">   {/* 36px symmetric */}
+```
+
+**Long pages — hierarchy.**
+
+```tsx
+<section className="mt-16 border-t border-gray-alpha-300 pt-10">
+```
+
+64px above the rule, 40px below. The first section on such a page uses `mt-14` (56px) with no rule — there's nothing above it to separate from.
+
+## Not every boundary gets a rule
+
+```tsx
+const SECTIONS = {
+  work:       { node: <Work />,       rule: true },
+  experience: { node: <Experience />, rule: true },
+  life:       { node: <MyLife />,     rule: true },
+  watching:   { node: <Watching />,   rule: false },
+  socials:    { node: <Socials />,    rule: false },
+};
+```
+
+Glass's divider decision (layout law 3): Work, Experience and Life are the substantial blocks and get separated; Watching and Socials read as a **coda** to Life, so they follow without a rule. The flag lives in layout code beside the sections, never in config (`domains/layout/measure-and-rhythm.md`, section rhythm).
+
+## Page padding
+
+```tsx
+className="pb-20 pt-28 sm:pt-20"     // long page
+className="pb-28 pt-28 sm:pt-20"     // index page
+className="pt-28 pb-14 sm:pt-20 sm:pb-11"   // hero
+```
+
+**Top padding is generous** — 112px, 80px on phones; a long top margin signals "this is a document."
+
+**Bottom padding accounts for the fixed dock.** `pb-28` (112px) on pages whose content can end near the viewport bottom, so the last line is never under the nav. A page ending in a footer can use less, because the footer's own `pb-28` covers it.
+
+## `dvh` over `vh`
+
+Anything sized to the viewport uses `dvh` (`domains/layout/measure-and-rhythm.md`, viewport units):
+
+```tsx
+className="min-h-[100dvh]"
+className="max-h-[calc(100dvh-11rem)]"
+```