/* SignTooling: the Tooling family's ink and yellow, one short list. No framework, no script. */
:root { --ink: #161617; --yellow: #e8c547; --paper: #f6f5f1; --line: #e2dfd6; --muted: #6b6a66; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 1rem; background: var(--paper); color: #2b2a28; font: 16px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.container { max-width: 820px; margin: 0 auto; }
a { color: #5c4a00; }

.site-header { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 1rem; background: var(--ink); color: #fff; border-radius: 10px; }
.site-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; color: inherit; text-decoration: none; }
.site-mark { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; }
.site-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.site-name { font-size: 1.125rem; font-weight: 700; }
.site-tag { font-size: 0.8125rem; color: #bdbbb3; }
.site-nav { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.site-pill { padding: 0.35rem 0.8rem; border: 1px solid #4a4a4d; border-radius: 999px; color: #ecebe4; font-size: 0.875rem; text-decoration: none; white-space: nowrap; }
.site-pill:hover { background: #2a2a2c; }
.site-pill.is-current { background: var(--yellow); border-color: var(--yellow); color: var(--ink); font-weight: 600; }

.hero { padding: 1.75rem 0.25rem 0.5rem; }
.hero h1 { margin: 0 0 0.5rem; font-size: 1.75rem; line-height: 1.2; color: var(--ink); }
.hero p { margin: 0; max-width: 60ch; color: var(--muted); font-size: 1.0625rem; }

.doc-group { margin-top: 1.5rem; }
.doc-group h2 { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #7a6200; }
.doc { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1rem; margin-bottom: 0.6rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.doc-text { flex: 1; min-width: 0; }
.doc h3 { margin: 0; font-size: 1.0625rem; color: var(--ink); }
.doc p { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.btn-sign { flex-shrink: 0; min-width: 5.5rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 1.25rem; border-radius: 8px; background: var(--ink); color: var(--yellow); font-weight: 600; text-decoration: none; }
.btn-sign:hover { background: #2a2a2c; }
.btn-sign:focus-visible, .site-pill:focus-visible, a:focus-visible { outline: 3px solid rgba(232, 197, 71, 0.9); outline-offset: 2px; }

.prose { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem 1.5rem; margin-top: 0.5rem; }
.prose h2 { margin: 1.5rem 0 0.4rem; font-size: 1.0625rem; color: var(--ink); }
.prose ol { margin: 0; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose p { margin: 0 0 0.5rem; }

.site-foot { margin: 2rem 0.25rem 1rem; color: var(--muted); font-size: 0.875rem; }
@media (max-width: 560px) { .site-tag { display: none; } .site-nav { margin-left: 0; width: 100%; } }