/* Folio — every colour, size, radius and shadow is a design token, so Format restyles the whole site. */
body { margin: 0; font-family: var(--font-sans); background: var(--color-background); color: var(--color-foreground); line-height: var(--leading-relaxed); }
a { color: var(--color-primary); }
nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: baseline; padding: var(--space-lg); }
nav .name { margin-right: auto; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-foreground); text-decoration: none; }
nav a { font-size: var(--text-sm); color: var(--color-muted-foreground); text-decoration: none; }
main { max-width: 48rem; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
h1 { margin: 0 0 var(--space-md); font-size: var(--text-4xl); line-height: var(--leading-tight); }
h2 { margin: var(--space-2xl) 0 var(--space-sm); font-size: var(--text-xl); }
p { margin: 0 0 var(--space-md); }
.lead { font-size: var(--text-xl); color: var(--color-muted-foreground); }
.work { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.piece { display: block; padding: var(--space-lg); color: var(--color-card-foreground); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; }
.piece h3 { margin: 0 0 var(--space-xs); font-size: var(--text-lg); }
.piece p { margin: 0; font-size: var(--text-sm); color: var(--color-muted-foreground); }
.facts { display: grid; gap: var(--space-sm); padding: 0; list-style: none; }
.facts li { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.hear { display: grid; gap: var(--space-sm); max-width: 28rem; }
.hear label { display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted-foreground); }
.hear input { padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background); color: var(--color-foreground); font: inherit; }
.hear button { padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-primary-foreground); font: inherit; cursor: pointer; }
.status { min-height: 1.5em; font-size: var(--text-sm); color: var(--color-muted-foreground); }
footer { padding: var(--space-xl) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted-foreground); }
input, select, textarea { box-sizing: border-box; max-width: 100%; min-width: 0; }