/* Vardonne: the site's own layout over the platform base. Colour comes from
 * design.css (the platform tokens and the brand overlay); nothing here names a
 * colour of its own. Motion uses the platform's tokens. */
body { background: var(--vardonne-bone); }
.site-header { border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-block: var(--space-4); }
.wordmark { font-family: var(--font-family-display); font-size: var(--font-size-xl); letter-spacing: var(--font-tracking-tight); color: var(--text); text-decoration: none; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.site-nav a { color: var(--text); text-decoration: none; font-size: var(--font-size-sm); padding-block: var(--space-2); display: inline-block; min-height: var(--layout-touch-target); }
@media (hover: hover) {
  .wordmark:hover { color: var(--action); }
  .site-nav a:hover { color: var(--action); }
}
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--vardonne-gold); text-decoration-thickness: 2px; }
main { padding-block: var(--space-8) var(--space-9); }
.lede { font-family: var(--font-family-display); font-size: var(--font-size-3xl); line-height: var(--font-leading-tight); max-width: 22ch; text-wrap: balance; margin: 0 0 var(--space-5); }
.strap { font-size: var(--font-size-md); color: var(--text-muted); max-width: var(--layout-measure); margin: 0 0 var(--space-7); }
h1, h2, h3 { font-family: var(--font-family-display); font-weight: var(--font-weight-regular); }
h2 { margin-top: var(--space-8); }
.rule { border: 0; border-top: 2px solid var(--vardonne-gold); width: var(--space-8); margin: var(--space-7) 0 var(--space-5); }
.doors { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.doors li { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.doors h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-lg); }
.doors p { font-size: var(--font-size-base); }
.doors a { display: inline-block; min-height: var(--layout-touch-target); }
.prose { max-width: var(--layout-measure); }
.prose h2 { margin-top: var(--space-7); }
.prose dl div { border-top: 1px solid var(--line); padding: var(--space-4) 0; }
.prose dt { font-weight: var(--font-weight-semibold); }
.prose dd { margin: var(--space-1) 0 0; }
.form { max-width: var(--layout-container-sm); }
.form .field { margin-bottom: var(--space-5); }
.form textarea { min-height: 10rem; }
.form input, .form textarea { width: 100%; }
.notice { border-left: 3px solid var(--vardonne-gold); padding: var(--space-3) var(--space-4); background: var(--surface-sunken); max-width: var(--layout-measure); }
.site-footer { border-top: 1px solid var(--line); padding-block: var(--space-6); font-size: var(--font-size-sm); color: var(--text-muted); }
.site-footer p { margin-bottom: var(--space-2); }
.site-footer a { color: var(--text-muted); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-4); padding: 0; list-style: none; }