/* AspiringPeasant — base element rules + chrome utilities. Relocated from the mocks' inline styles and tokens/typography.css. */ * { box-sizing: border-box; } body { font-family: var(--font-text); font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-body); background: var(--bg-page); margin: 0; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--text-display); line-height: var(--leading-tight); margin: 0; } a { color: var(--link); text-decoration-color: var(--link-underline); text-underline-offset: 3px; } a:hover { color: var(--link-hover); text-decoration-color: currentColor; } /* height:auto is load-bearing: Ghost emits real pixel width/height attributes on content images, which browsers apply as presentational hints. Overriding only width leaves the height hint intact and the image stretches vertically. */ img { max-width: 100%; height: auto; } ::selection { background: var(--selection-bg); } /* Layout shell */ .shell { max-width: var(--page-max); margin: 0 auto; padding: 0 40px; } /* On-sky nav links */ .navlink { font-family: var(--font-ui); font-size: 14.5px; font-weight: 500; color: var(--nav-link); text-decoration: none; transition: color var(--dur-drift) var(--ease-drift); } .navlink:hover { color: var(--nav-link-hover); } .navlink--current { color: var(--nav-link-hover); } .navlink--pill { border: 1px solid var(--nav-pill-border); border-radius: var(--radius-sm); padding: 8px 16px; } /* Footer links */ .floater { color: var(--footer-link); text-decoration: none; } .floater:hover { color: var(--footer-link-hover); } /* Skip link (a11y; net-new) */ .ap-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--bg-card); color: var(--text-display); font-family: var(--font-ui); font-size: 14px; border-radius: var(--radius-sm); } .ap-skip:focus { left: 12px; top: 12px; } /* Focus visibility (net-new; mocks only covered .ap-btn/.ap-input) */ .navlink:focus-visible, .floater:focus-visible, a.ap-tag:focus-visible, a.ap-card:focus-visible, a.ap-row:focus-visible, .ap-theme-toggle:focus-visible, .ap-wordmark:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Reduced motion (a11y; net-new — flag: design spec has no media queries) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } a.ap-card:hover { transform: none; } }