/* Shared styles for CMS-rendered inner pages. Tokens and fonts come from transplant.css. */
body.inner { background: var(--bg); color: var(--text-body); font-family: var(--font); -webkit-font-smoothing: antialiased; margin: 0; }
body.inner a { color: inherit; }
.inner .reveal-scroll { opacity: 1 !important; transform: none !important; }

main.s { max-width: 760px; margin: 0 auto; padding: 64px 24px 24px; }
main.s.wide { max-width: var(--content-max); }
.crumbs { font-size: 14px; color: var(--text-muted); margin: 0 0 20px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.inner h1 { font-weight: 600; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--text); margin: 0.15em 0 0.3em; }
.inner .lede { font-size: 1.2rem; line-height: 1.55; color: var(--text-muted); margin: 0 0 1.2em; max-width: 46rem; }
.eyebrow { font-size: 14px; letter-spacing: 0.02em; color: var(--text-muted); margin: 0; }
.cover { width: 100%; border-radius: 24px; margin: 24px 0; display: block; }

.prose { font-size: 1.125rem; line-height: 1.7; }
.prose h2 { font-weight: 600; font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); margin: 2em 0 0.5em; }
.prose h3 { font-weight: 600; font-size: 1.25rem; color: var(--text); margin: 1.6em 0 0.4em; }
.prose a { color: var(--accent); }
.prose img { max-width: 100%; height: auto; border-radius: 16px; }
.prose blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 3px solid var(--accent-200); color: var(--text); }

.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff !important; padding: 12px 22px; border-radius: 100px; text-decoration: none; font-weight: 500; transition: background .25s var(--ease-out-spring), transform .25s var(--ease-out-spring); }
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn--ghost { background: #e5e5e7; color: #3a3a3a !important; }
.btn--ghost:hover { background: #dadadd; }

.page-section { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.listing-head { max-width: var(--content-max); margin: 0 auto; padding: 64px 24px 8px; }
.listing-head h1 { margin-top: 0; }
.case-studies--listing { margin-top: 24px; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; max-width: var(--content-max); margin: 32px auto 0; padding: 0 24px; }
.projects-grid .portfolio-card:hover img { transform: scale(1.04); }
.bento-grid--listing { max-width: var(--content-max); margin: 32px auto 0; padding: 0 24px; }
.listing-note { max-width: var(--content-max); margin: 40px auto 0; padding: 0 24px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Footer */
.site-footer { max-width: var(--content-max); margin: 96px auto 0; padding: 48px 24px 32px; border-top: 1px solid var(--border); display: grid; gap: 24px; }
.site-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-footer__top p { margin: 0; max-width: 28rem; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.site-footer__links, .site-footer__social { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { text-decoration: none; color: var(--text); font-size: 15px; }
.site-footer a:hover { color: var(--accent); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-muted); font-size: 14px; }
.site-footer__bottom a { color: var(--text-muted); }
body.inner { padding-bottom: 96px; }

@media (max-width: 640px) { main.s { padding-top: 40px; } }

/* Layout helpers that the homepage defines inline */
.section { max-width: var(--content-max); margin: 0 auto; padding-left: 24px; padding-right: 24px; }