/* Hallmark · shape: a flock in formation, then one bird per section · genre: modern-minimal · theme: custom · job: try · idea: "Three birds, three flights: each app moves the way its bird flies, and the page is quiet around them" · vibe: "native, quiet, one bird colour per room"
 * paper: #FFFFFF day / #111113 night (Flock's own grounds) · accent: none global; violet, amber, magenta each kept to its bird's section · display: system SF Pro (PHILOSOPHY.md: native first) · body: system SF Pro · hero: the three marks fly into formation once on load, each in its own flight · nav: wordmark and one link · footer: one line, the maker · imagery: the product (real apps, demo data) · signature: the flock taking off: Mynah climbs, Raven glides, Peregrine dives
 * axes: light/grotesk-heavy/neutral · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R3 V2 · weakest: V, the system face is the brand's rule; the birds carry the voice instead */
/* Hallmark · waive 1 · PHILOSOPHY.md rule 1 sets SF Pro for every Flock surface · the brief outranks the face catalog; the system face is the brand */
/* Hallmark · waive 26b · the only button never disables (copy-to-clipboard, hidden without the Clipboard API) · there is no disabled state to style */
@import url("./tokens.css");
@import url("./base.css");

body { font-size: var(--text-md); line-height: 1.6; }
.container { max-width: var(--container); }

/* Chrome */
.top { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-lg); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 600; font-size: var(--text-lg); text-decoration: none; color: var(--color-ink); border-radius: var(--radius-control); }
.wordmark svg { width: 28px; height: 28px; }
.top-link { color: var(--color-muted); text-decoration: none; font-size: var(--text-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-control); transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.top-link:hover { color: var(--color-ink); background: var(--color-paper-2); }
.top-link:active { background: var(--color-paper-3); }

/* Marks: one source path per bird; the ground and bird colours come from tokens */
.tile-ground { fill: var(--color-tile); stroke: var(--color-tile-ring); stroke-width: 8; }
.bird-mynah { fill: var(--color-mynah); }
.bird-peregrine { fill: var(--color-peregrine); }
.bird-raven { fill: var(--color-raven); }
.bird-flock { fill: var(--color-flock); }

/* Hero: the flock */
.hero { padding-block: var(--space-xl) var(--section-gap-s); }
.formation { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; margin-bottom: var(--space-xl); }
.flyer { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--color-ink-2); font-size: var(--text-md); text-align: center; border-radius: var(--radius-field); padding: var(--space-xs); transition: color var(--dur-micro) var(--ease-out); }
.flyer svg { width: clamp(96px, 14vw, 172px); height: auto; aspect-ratio: 1; margin-bottom: var(--altitude, 0); }
.flyer-name { font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.25em; }
.flyer:hover .flyer-name { text-decoration-color: currentColor; }
.flyer-tag { font-size: var(--text-sm); color: var(--color-muted); max-width: 24ch; text-wrap: balance; }
.flyer:hover { color: var(--color-ink); }
.flyer:active svg { transform: scale(0.97); }
/* Altitudes live on the birds, so the names share one baseline: low on the left, level in the middle, high on the right where the dive starts */
.flyer--mynah { --altitude: 0px; }
.flyer--raven { --altitude: clamp(24px, 4vw, 56px); }
.flyer--peregrine { --altitude: clamp(48px, 8vw, 112px); }
.flyer svg { animation: var(--dur-flight) var(--ease-out) both; }
.flyer--mynah svg { animation-name: climb; animation-delay: 80ms; }
.flyer--raven svg { animation-name: glide; animation-delay: 260ms; }
.flyer--peregrine svg { animation-name: dive; animation-delay: 440ms; }
@keyframes climb { from { transform: translate(-48px, 72px) rotate(6deg); opacity: 0; } 40% { opacity: 1; } }
@keyframes glide { from { transform: translateX(-160px); opacity: 0; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flyer svg { animation: none; } }
@keyframes dive { from { transform: translate(-56px, -96px) rotate(-8deg); opacity: 0; } 40% { opacity: 1; } }

.hero h1 { font-size: var(--text-display); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 0.95; }
.hero .lead { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-muted); }

/* Prose bands */
.band { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.prose { max-width: var(--measure); display: grid; gap: var(--space-md); }
.intro .prose { font-size: var(--text-lead); line-height: 1.55; }
.intro .prose p:last-child { color: var(--color-muted); }

/* App sections: the mark in the margin, the words in the column, the app below */
.app { display: grid; grid-template-columns: var(--margin-col) minmax(0, var(--measure)) minmax(0, 1fr); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.app--mynah { --bird: var(--color-mynah); --bird-ink: var(--color-mynah-ink); }
.app--peregrine { --bird: var(--color-peregrine); --bird-ink: var(--color-peregrine-ink); }
.app--raven { --bird: var(--color-raven); --bird-ink: var(--color-raven-ink); }
.app-mark { grid-column: 1; width: var(--margin-col); height: var(--margin-col); position: sticky; top: var(--space-xl); }
.app-body { grid-column: 2; display: grid; gap: var(--space-md); min-width: 0; }
.app h2, .section-title { font-size: var(--text-section); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.tagline { font-size: var(--text-lead); font-weight: 600; line-height: 1.35; }
.features { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; border-top: var(--rule-hair) solid var(--color-rule); }
.features li { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.features strong { color: var(--color-ink); }
.features strong { font-weight: 600; }
.install { margin-top: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-field); min-width: 0; }
.install-set { display: grid; gap: var(--space-xs); }
.install-set .install { margin-top: 0; }
.install code { font-family: var(--font-outlier); font-size: var(--text-sm); flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding-block: var(--space-xs); user-select: all; }
.copy { flex: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); padding: var(--space-2xs) var(--space-sm); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.copy:hover { border-color: var(--color-muted); }
.copy:active { background: var(--color-paper-3); }
.copy[data-state="done"] { border-color: var(--bird, var(--color-ink)); }
.meta { font-size: var(--text-sm); color: var(--color-muted); }
.meta a, .prose a { color: var(--bird-ink, var(--color-ink)); font-weight: 500; border-radius: 2px; }
.meta a:hover, .prose a:hover { text-decoration-thickness: 2px; }
.app-shot { grid-column: 2 / -1; margin: var(--space-md) 0 0; min-width: 0; }
.app-shot img { border-radius: var(--radius-shot); border: var(--rule-hair) solid var(--color-rule); width: 100%; }
.app-shot--panel { max-width: 400px; }
.app-shot--panel img { border-radius: var(--radius-shot); }

/* Installing */
.inline-code { font-family: var(--font-outlier); font-size: 0.9em; background: var(--color-paper-2); padding: 0.1em 0.35em; border-radius: 4px; }

/* Footer */
.foot { padding-block: var(--space-xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.foot a { color: var(--color-muted); }
.foot a:hover { color: var(--color-ink); }

@media (max-width: 60rem) {
  .app { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .app-mark { grid-column: 1; position: static; width: 72px; height: 72px; }
  .app-body, .app-shot { grid-column: 1; }
}
@media (max-width: 40rem) {
  .formation { margin-bottom: var(--space-lg); }
  .flyer svg { width: 92px; }
  .install { align-items: flex-start; }
  .install code { white-space: normal; overflow-wrap: break-word; overflow-x: visible; }
  .copy { min-height: 44px; padding-inline: var(--space-md); }
  .flyer-tag { display: none; }
  .app-shot--panel { max-width: none; }
}