/* K (2026-10-22): in light mode the grey cards read too dark. Card and panel washes (3–5.5% ink)
   are lightened to 60% of the design value; pills, inputs and buttons (6%+) and every hover state
   are unchanged. Dark mode is untouched. */
html:has(#top[data-theme="light"]) [style*="background: rgba(var(--ink),.03)"]:not(:hover) { background-color: rgba(var(--ink),.018) !important; }
html:has(#top[data-theme="light"]) [style*="background: rgba(var(--ink),.035)"]:not(:hover) { background-color: rgba(var(--ink),.021) !important; }
html:has(#top[data-theme="light"]) [style*="background: rgba(var(--ink),.04)"]:not(:hover) { background-color: rgba(var(--ink),.024) !important; }
html:has(#top[data-theme="light"]) [style*="background: rgba(var(--ink),.045)"]:not(:hover) { background-color: rgba(var(--ink),.027) !important; }
html:has(#top[data-theme="light"]) [style*="background: rgba(var(--ink),.05)"]:not(:hover) { background-color: rgba(var(--ink),.03) !important; }
html:has(#top[data-theme="light"]) [style*="background: rgba(var(--ink),.055)"]:not(:hover) { background-color: rgba(var(--ink),.033) !important; }

/* The footer "Skyfold" wordmark (about 3.35em wide) is sized to fit its card. The design's fixed
   300px (and 30vw on phones) clipped it to "Skyfol" below ~1400px wide. The px values are the page
   gutters + footer padding - the wordmark's negative margins at each breakpoint. */
footer .wordmark { font-size: min(300px, calc((100vw - 170px) / 3.4)) !important; }
@media (max-width: 760px) { footer .wordmark { font-size: calc((100vw - 72px) / 3.4) !important; } }