:root { color-scheme: light; --ink: #171a18; --muted: #6f736e; --paper: #f6f3ec; --card: #fffdf8; --line: #d9d5ca; --green: #1f5b45; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: Inter, "Noto Sans SC", system-ui, sans-serif; line-height: 1.6; }
a { color: inherit; }
.contact-header { width: min(980px, calc(100% - 40px)); height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.contact-brand { font-size: 1.05rem; font-weight: 760; letter-spacing: .18em; text-decoration: none; }
.contact-back { color: var(--muted); font-size: .88rem; text-underline-offset: 4px; }
.contact-main { width: min(720px, calc(100% - 40px)); margin: clamp(65px, 12vh, 140px) auto 100px; padding: clamp(30px, 6vw, 64px); background: var(--card); border: 1px solid var(--line); border-radius: 24px; }
.contact-kicker { margin: 0; color: var(--green); font-size: .75rem; font-weight: 750; letter-spacing: .15em; }
h1 { margin: 18px 0; font-size: clamp(2.2rem, 7vw, 4rem); letter-spacing: -.045em; line-height: 1.1; }
.contact-main > p:not(.contact-kicker) { color: var(--muted); }
.contact-email { display: inline-flex; align-items: center; gap: 14px; margin: 22px 0 25px; padding: 13px 18px; color: #fff; background: var(--green); border-radius: 10px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.contact-email:hover { background: #143d2f; }
.contact-email:focus-visible, .contact-back:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.contact-hint { margin: 0; font-size: .83rem; }
@media (max-width: 540px) { .contact-header { width: calc(100% - 26px); height: 65px; } .contact-main { width: calc(100% - 26px); margin: 45px auto 70px; } .contact-email { max-width: 100%; font-size: .88rem; } }