/* ========================================================================== Site header — SINGLE SOURCE OF TRUTH. Loaded in the of both the landing (index.hbs) and every default-layout page (default.hbs), so the header is byte-for-byte identical everywhere and never drifts between templates. Layout: fixed paper bar, three zones — wordmark (left) · nav: About / Subscribe (center) · try it live (right) Relies on tokens defined by both loading contexts: --sic-*, --rule, --font-code, --font1, --sic-gold, --gold-tint, --landing-max, --landing-gutter. ========================================================================== */ .ls-brand { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: var(--sic-paper); border-bottom: 1px solid var(--rule); } .ls-brand-inner { /* content-box: the 960 is the CONTENT width; gutters sit outside it, so the wordmark lands at the same x as the editorial column edge. */ box-sizing: content-box; max-width: var(--landing-max, 960px); margin: 0 auto; padding: 14px var(--landing-gutter, 56px); min-height: 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; } .ls-brand a { text-decoration: none; } /* wordmark (left) */ .ls-brand .wordmark { justify-self: start; border: none; font-family: var(--font1), Georgia, serif; font-size: 19px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; color: var(--sic-ink); } .ls-brand .wordmark sup { vertical-align: baseline; font-size: 0.42em; position: relative; top: -1.9em; margin-left: 1px; } /* nav (center) — About / Subscribe */ .ls-brand-nav { justify-self: center; display: flex; gap: 24px; font-family: var(--font-code); font-size: 11px; line-height: 1; /* pin height: inner pages inherit a taller body line-height that would grow the bar */ letter-spacing: 0.16em; text-transform: uppercase; color: var(--sic-stone); } .ls-brand-nav a { border: none; color: var(--sic-stone); cursor: pointer; } .ls-brand-nav a:hover { color: var(--sic-ink); } /* CTA (right) — try it live pill */ .ls-brand-cta { justify-self: end; border: 1px dashed var(--sic-stone); border-radius: 999px; padding: 8px 16px; font-family: var(--font-code); font-size: 11px; line-height: 1; /* pin height so the bar is 61px everywhere */ letter-spacing: 0.12em; text-transform: uppercase; color: var(--sic-ink); white-space: nowrap; transition: border-color 0.2s, background 0.2s; } .ls-brand-cta:hover { border-color: var(--sic-gold); background: var(--gold-tint); } @media (max-width: 800px) { /* two zones on mobile: wordmark + the live CTA; About/Subscribe reachable in the footer (matches the landing's mobile header). */ .ls-brand-inner { padding: 12px 20px; grid-template-columns: 1fr auto; } .ls-brand-nav { display: none; } } /* ========================================================================== Site footer — same source of truth. Sits at the end of the landing and every default page. Full-width paper bar; inner uses content-box like .ls-brand-inner so its content aligns to the same 240 column. ========================================================================== */ .lp-footer { position: relative; z-index: 60; margin-top: 72px; border-top: 1px solid var(--rule); background: var(--sic-paper); } .lp-footer .lp-footer-inner { box-sizing: content-box; max-width: var(--landing-max, 960px); margin: 0 auto; padding: 18px var(--landing-gutter, 56px); display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 24px; font-family: var(--font-code); font-size: 10px; color: var(--sic-stone); letter-spacing: 0.10em; text-transform: uppercase; } .lp-footer p { margin: 0; } .lp-footer a { text-decoration: none; } .lp-footer .meta { text-align: right; } .lp-footer .legal { display: flex; gap: 18px; } .lp-footer .legal a { color: var(--sic-stone); border-bottom: 1px dotted var(--rule); } .lp-footer .legal a:hover { color: var(--sic-ink); border-bottom-color: var(--sic-ink); } .lp-footer .meta a { color: var(--sic-stone); border-bottom: 1px dotted var(--rule); } .lp-footer .meta a:hover { color: var(--sic-ink); border-bottom-color: var(--sic-ink); } @media (max-width: 767px) { .lp-footer .lp-footer-inner { flex-direction: column; align-items: flex-start; gap: 10px; } .lp-footer .meta { text-align: left; } }