/* Woodsway base styles (Phase 0). Phase 1 expands this into the full public-site design. Colour tokens are set from config in the page , so the palette is driven by config, not here. */ :root { --maxw: 1080px; --radius: 14px; --muted: #5b665f; --hairline: rgba(31, 42, 38, 0.12); } * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--color-ink); background: var(--color-bg); line-height: 1.55; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--maxw); margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2rem); } .brand { font-weight: 700; font-size: 1.35rem; color: var(--color-ink); } .site-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; } .site-nav a { color: var(--color-ink); font-weight: 500; } .site-main { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); } h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; margin: 0 0 0.5rem; } .lede { font-size: 1.15rem; margin: 0.25rem 0 1rem; } .btn { display: inline-block; padding: 0.7rem 1.25rem; border-radius: 999px; font-weight: 600; border: 1px solid transparent; cursor: pointer; } .btn--primary { background: var(--color-primary); color: #fff; } .btn--primary:hover { filter: brightness(1.06); text-decoration: none; } .btn--ghost { background: transparent; border-color: rgba(31, 42, 38, 0.25); color: var(--color-ink); } .btn--ghost:hover { border-color: var(--color-ink); text-decoration: none; } .panel { max-width: 560px; margin: clamp(2rem, 8vw, 5rem) auto; padding: 2rem; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); } .site-footer { max-width: var(--maxw); margin: 3rem auto 2rem; padding-top: 1.5rem; padding-left: clamp(1rem, 4vw, 2rem); padding-right: clamp(1rem, 4vw, 2rem); border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: 0.9rem; } @media (max-width: 640px) { .site-header { flex-direction: column; align-items: flex-start; } }