/* farrhq.com (WEB-014): the WEB-013 material. One ground, the device's own type, nothing else. */
:root { --bg: #f6f5f1; --fg: #161615; --mut: #71706a; --hair: rgba(0,0,0,.16);
        --font: -apple-system, BlinkMacSystemFont, ui-sans-serif, "Segoe UI", system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { :root { --bg: #0d0d0c; --fg: #efeee9; --mut: #85847f; --hair: rgba(255,255,255,.18); } }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 17px/1.6 var(--font); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased;
       display: flex; flex-direction: column; min-height: 100dvh; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--mut); }
a:hover { text-decoration-color: var(--fg); }
.home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        text-align: center; padding: 48px 28px; gap: 1.4rem; }
.h-name { margin: 0; font-weight: 300; font-size: 28px; letter-spacing: .44em; padding-left: .44em; line-height: 1; }
.h-line { margin: 0; max-width: 30em; font-size: 1.05rem; }
.h-in { margin: .4rem 0 0; color: var(--mut); font-size: .95rem; }
.h-foot { text-align: center; color: var(--mut); font-size: .82rem; padding: 18px 24px max(22px, env(safe-area-inset-bottom)); }
.page { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 72px 24px 48px; }
.page h1 { font-size: 1rem; font-weight: 300; letter-spacing: .2em; text-transform: uppercase; color: var(--mut); margin: 0 0 1.6rem; }
.page h2 { font-size: 1rem; font-weight: 600; margin: 1.6em 0 .4em; }
.page p, .page li { margin: 0 0 1em; }
.h-back { margin: 0 0 2rem; font-size: .9rem; color: var(--mut); }
.h-back a { text-decoration: none; letter-spacing: .3em; }
.draft { color: var(--mut); }