/* extro.site: Extro's own look, light or dark following the device. */
:root { --ink: #111111; --page: #ffffff; --soft: rgba(17,17,17,0.72); --line: rgba(17,17,17,0.12); }
@media (prefers-color-scheme: dark) { :root { --ink: #f2f2f2; --page: #0b0b0c; --soft: rgba(242,242,242,0.72); --line: rgba(242,242,242,0.14); } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink); }
body { font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wordmark { font-family: "Times New Roman", Times, serif; font-weight: 400; letter-spacing: 0.015em; text-decoration: none; display: inline-block; }
.wordmark i { font-style: italic; }
.wordmark .r { letter-spacing: -0.015em; }
.underline { height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, #E07A3C, #9C5F7A, #2F5BB0); }
header.small { max-width: 720px; margin: 0 auto; padding: 28px 20px 0; }
header.small .wordmark { font-size: 30px; }
header.small .underline { width: 86px; margin-top: 4px; }
main { max-width: 720px; margin: 0 auto; padding: 24px 20px 64px; }
h1 { font-size: 32px; line-height: 1.2; margin: 28px 0 6px; font-weight: 650; }
h2 { font-size: 20px; margin: 32px 0 6px; font-weight: 650; }
p, li { color: var(--soft); }
p.lead { color: var(--ink); }
.meta { font-size: 14px; color: var(--soft); }
footer { max-width: 720px; margin: 0 auto; padding: 24px 20px 48px; border-top: 1px solid var(--line); font-size: 14px; color: var(--soft); display: flex; gap: 20px; flex-wrap: wrap; }
footer a { text-decoration: none; }
.home { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; text-align: center; }
.home .wordmark { font-size: clamp(56px, 14vw, 96px); line-height: 1; }
.home .underline { width: clamp(150px, 36vw, 250px); margin: 6px auto 0; }
.home .tagline { font-size: 21px; font-weight: 500; color: var(--ink); margin: 0; }
.home .note { max-width: 440px; margin: 0; }
.home footer { border: 0; justify-content: center; padding-top: 40px; }