/* Pewterkit design v2 "the gallery" (WHIP-SHIP DESIGN-V2.md v2.1, Elon 24 Oct 2026), shared by the hub and the brand partials.
   v2.1: the typeface is Geist, self-hosted from pewterkit/brand (fonts/, OFL), with system-ui as the fallback only; tile surfaces come
   from the Pewterkit brand tokens (tokens.css: canvas, pewter-50, ink #16181b, muted #686e77, hairline #e7e8ea, pewter ramp; dark
   canvas #0d0f11, surface #15181b, ink #eceef1, hairline #2a2e34), not Apple's hex values, with a visible step between tiles in dark.
   Layout grammar unchanged (§2 type scale, 80/48px tiles, one shadow, weights 400/600, fade-up once, reduced motion).
   Light: canvas #fff · pewter-50 #f4f5f6 bands and footer · ink #16181b product tile with its card on #1f2328 + hairline.
   Dark: canvas #15181b (brand surface) · bands and footer #2a2e34 · the product tile is the deepest stage, #0d0f11 (brand dark
   canvas), with its card on #1f2328 + hairline. Neighbouring tiles differ by ≥1.3:1 in luminance (1.31 canvas/band, 1.41
   band/tile, 1.41 tile/footer, 1.31 legal reading tile/footer). Muted on dark is pewter-400 #a3a9b1 (≥4.5:1 on every dark surface).
   Accent: §2/§7, Signhome's #3b5bdb on light surfaces, one blue #6f8cff on every dark surface (dark mode and the product tile),
   ≥4.5:1 for links there; the button on the product tile is #6f8cff with dark ink, so its edge clears 3:1 on the card. Buttons, links, focus ring, step numbers only.
   Pewterkit signature: the pewter mark (#6b727c, dark #a3a9b1) and the pewter underline on "your" domain. Neither is an action colour. */
@font-face { font-family: "Geist"; src: url("./fonts/Geist-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("./fonts/GeistMono-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --v-canvas: #ffffff; --v-parch: #f4f5f6; --v-ink: #16181b; --v-muted: #686e77; --v-hair: #e7e8ea;
  --v-foot: #f4f5f6; --v-tile-line: #4a5059;
  --v-tile: #16181b; --v-tile-ink: #eceef1; --v-tile-muted: #a3a9b1; --v-tile-hair: #353a41;
  --v-accent: #3b5bdb; --v-accent-ink: #ffffff; --v-accent-on-tile: #6f8cff; --v-tile-card: #1f2328; --v-tile-card-muted: #a3a9b1; --v-pewter: #6b727c;
  --v-shadow: 0 5px 30px rgba(0,0,0,.18);
  --v-mark: #6b727c; --v-mark-notch: #ffffff;
  --v-sans: "Geist", system-ui, sans-serif;
  --v-mono: "Geist Mono", ui-monospace, monospace;
  --v-nav: 52px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --v-canvas: #15181b; --v-parch: #2a2e34; --v-ink: #eceef1; --v-muted: #a3a9b1; --v-hair: #353a41;
    --v-tile: #0d0f11; --v-tile-ink: #eceef1; --v-tile-muted: #a3a9b1; --v-tile-hair: #353a41;
    --v-accent: #6f8cff; --v-accent-ink: #0d0f11; --v-accent-on-tile: #6f8cff; --v-tile-card: #1f2328; --v-tile-card-muted: #a3a9b1; --v-tile-line: #4a5059;
    --v-foot: #2a2e34;
    --v-pewter: #a3a9b1; --v-mark: #a3a9b1; --v-mark-notch: #0d0f11; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--v-nav) + 16px); }
body { margin: 0; background: var(--v-canvas); color: var(--v-ink); font: 400 17px/1.47 var(--v-sans); letter-spacing: 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { hyphens: none; } /* §2: hyphens none; compounds are kept whole with no-wrap spans */
h1, h2, h3 { font-weight: 600; color: inherit; text-wrap: balance; hyphens: none; margin: 0 0 16px; }
b, strong, th, summary { font-weight: 600; }
p { margin: 0 0 16px; }
p, li, td { text-wrap: pretty; }
a { color: var(--v-link, var(--v-accent)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
/* inline links: a 44px-tall tap area without changing the line layout */
main p a, main li a, main td a { padding: 14px 0; }
.v-fine a { display: inline-block; padding: 14px 0; margin: -14px 0; }
:focus-visible { outline: 2px solid var(--v-link, var(--v-accent)); outline-offset: 3px; border-radius: 4px; }
code { font-family: var(--v-mono); font-size: 1em; overflow-wrap: anywhere; }
.v-dom { font-family: var(--v-mono); font-size: 1em; letter-spacing: 0; white-space: nowrap; } /* Geist Mono: code and domains only */
.nw { white-space: nowrap; }
/* "your" domain: the one quiet Pewterkit treatment for the own domain wherever it appears (pewter underline, not the action colour) */
.v-own { text-decoration: underline; text-decoration-color: var(--v-pewter); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* the pewter mark as a small signature glyph (hero line, tool card, footer) */
.v-mark { display: inline-block; flex: none; width: 18px; height: 18px; color: var(--v-mark); }
img, svg { display: block; max-width: 100%; }
.pk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hub-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; margin: 0; padding: 12px 20px;
  background: var(--v-canvas); color: var(--v-ink); border-radius: 9999px; outline: 2px solid var(--v-accent); }

/* shared nav (partials/nav.html): translucent, hairline; the mark in strong graphite, wordmark in ink */
.pk-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pk-nav { position: sticky; top: 0; z-index: 50; height: var(--v-nav); background: color-mix(in srgb, var(--v-canvas) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--v-hair); }
.pk-nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pk-nav__brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--v-ink); text-decoration: none; --pk-pewter-600: var(--v-mark); --pk-canvas: var(--v-mark-notch); }
.pk-nav__brand svg { height: 30px; width: auto; }
.pk-nav__links { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pk-nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 12px; color: var(--v-ink); text-decoration: none; }
@media (max-width: 640px) { .pk-nav__brand svg { height: 22px; } } /* below the 28px H1 */

/* tiles: full width, no radius; the colour change is the divider (§2 space: 80px, 48px on phones) */
.t { padding: 80px 0; background: var(--v-canvas); color: var(--v-ink); }
.t--parch { background: var(--v-parch); }
.t--dark { background: var(--v-tile); color: var(--v-tile-ink); --v-muted: var(--v-tile-muted); --v-hair: var(--v-tile-hair); --v-link: var(--v-accent-on-tile); }
.t--first { padding-top: 64px; }
.t__in { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.t__in--wide { max-width: 1200px; }
.t__in--c { text-align: center; }
.t h2 { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; }
.v-hero { font-size: 56px; line-height: 1.07; letter-spacing: -0.02em; margin: 0 auto 16px; max-width: 18ch; }
.v-lead { font-size: 21px; line-height: 1.3; color: var(--v-muted); margin: 0 auto 32px; max-width: 34em; text-wrap: balance; }
.v-fine { font-size: 12px; line-height: 1.4; color: var(--v-muted); }
@media (max-width: 1068px) { .v-hero { font-size: 40px; } }
@media (max-width: 640px) { .t { padding: 64px 0 48px; } .t--first { padding-top: 48px; } .v-hero { font-size: 34px; } .t h2 { font-size: 34px; } .v-lead { font-size: 21px; } }
@media (max-width: 419px) { .v-hero { font-size: 28px; } .t h2 { font-size: 28px; } }

/* at most one card per tile: 18px radius, 1px hairline, no shadow */
.v-card { background: var(--v-canvas); color: var(--v-ink); border: 1px solid var(--v-hair); border-radius: 18px; padding: 32px; text-align: left; }
/* the card in the dark product tile is raised: one step lighter than its tile (light mode #2a2e34 on #16181b; dark #353a41 on #2a2e34) */
.t--dark .v-card { background: var(--v-tile-card); color: var(--v-tile-ink); --v-muted: var(--v-tile-card-muted); border-color: var(--v-tile-line); } /* pewter hairline */
.t--dark .v-btn, .t--dark .v-btn:hover { background: var(--v-accent-on-tile); color: #0d0f11; } /* on the product tile: the on-dark blue, edge ≥3:1 on the card */
@media (max-width: 640px) { .v-card { padding: 24px; } }

/* pills */
.v-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 9999px; border: 0;
  background: var(--v-accent); color: var(--v-accent-ink); font: 600 17px/1 var(--v-sans); text-decoration: none; cursor: pointer;
  transition: transform 120ms ease-out, opacity 120ms ease-out; white-space: nowrap; letter-spacing: -0.01em; }
.v-btn:hover { color: var(--v-accent-ink); opacity: .9; text-decoration: none; }
.v-btn:active { transform: scale(.97); }
.v-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 9999px;
  border: 1px solid var(--v-hair); color: var(--v-muted); letter-spacing: 0; vertical-align: middle; }

/* shared footer (partials/footer.html): parchment, dense links with 44px rows */
.pk-footer { background: var(--v-foot); color: var(--v-muted); border-top: 1px solid var(--v-hair); padding: 40px 0 32px; font-size: 12px; line-height: 1.4; }
.pk-footer .pk-container { max-width: 1200px; }
.pk-footer__top { display: grid; grid-template-columns: 1.3fr .7fr 1.3fr; gap: 32px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--v-hair); }
.pk-footer .pk-nav__brand svg { height: 34px; } /* the footer lockup: the pewter mark + wordmark, larger */
.pk-footer h2 { font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0; color: var(--v-ink); margin: 12px 0 2px; }
.pk-footer ul { list-style: none; margin: 0; padding: 0; }
.pk-footer li { font-size: 12px; line-height: 1.2; }
.pk-footer li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--v-muted); text-decoration: none; }
.pk-footer li a:hover { color: var(--v-ink); text-decoration: underline; }
.pk-footer li:not(:has(a)) { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--v-ink); }
.pk-footer .pk-tag { display: inline-flex; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: 9999px; border: 1px solid var(--v-hair); color: var(--v-muted); }
.pk-footer__legal { margin: 0; }
.pk-footer__about { margin: 8px 0 0; max-width: 26em; font-size: 12px; line-height: 1.43; color: var(--v-muted); }
/* legal links: two short columns, each link 44px tall */
.pk-footer__top > div:last-child ul { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 32px; }
/* the operator line: each segment with its separator stays whole (no line starts with '·'); stacked one per line on phones */
.pk-footer__seg { white-space: nowrap; }
@media (max-width: 640px) {
  .pk-footer__seg { display: block; white-space: normal; } .pk-footer__sep { display: none; }
  .pk-footer__top > div:last-child ul { grid-template-columns: repeat(2, max-content); }
  .pk-footer__top { grid-template-columns: 1fr 1fr; gap: 8px 24px; }
  .pk-footer__top > div:first-child { grid-column: 1 / -1; }
}

/* Motion: buttons press to .97; the hero visual is the page's one animation. No scroll reveals (see hub/build.mjs). All off under
   prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) { .v-btn { transition: none; } .v-btn:active { transform: none; } }