/* =================================================================== NightOwl Book CMS — premium Single Post (is_singular('post')) Self-contained document; selectors are class-qualified on so they win over the theme's bare-element rules without !important. NightOwl palette: var(--nightowl-black) var(--nightowl-black-soft) var(--nightowl-gold) var(--nightowl-gold-light) var(--nightowl-cream) var(--nightowl-muted) Typography: shared design-system tokens — EB Garamond (display: title, section headings) / Source Serif 4 (body prose), self-hosted. No Google Fonts, no external requests, no JS. =================================================================== */ body.nsp-body { margin: 0; background: var(--nightowl-black); color: var(--nightowl-cream); font-family: var(--nightowl-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* safety for .alignwide / .alignfull breakout math */ } .nsp, .nsp *, .nsp *::before, .nsp *::after { box-sizing: border-box; } .nsp { display: flex; flex-direction: column; min-height: 100vh; } .nsp-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--nightowl-black-soft); color: var(--nightowl-gold-light); text-decoration: none; } .nsp-skip:focus { left: 12px; top: 12px; outline: 2px solid var(--nightowl-gold-light); } /* --- Article --- */ .nsp-main { flex: 1; width: 100%; } .nsp-article { width: 100%; } /* Hero (wider than the reading column) */ .nsp-hero { max-width: 1100px; margin: 0 auto; padding: 72px 24px 40px; text-align: center; } .nsp-eyebrow { margin: 0 0 18px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; } .nsp-eyebrow a { color: var(--nightowl-muted); text-decoration: none; transition: color 0.2s ease; } .nsp-eyebrow a:hover, .nsp-eyebrow a:focus-visible { color: var(--nightowl-gold-light); } .nsp-title { margin: 0 0 20px; font-family: var(--nightowl-font-display); font-weight: 400; font-size: clamp(32px, 5vw, 52px); line-height: 1.15; letter-spacing: 0.5px; background: var(--nightowl-gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--nightowl-gold); } .nsp-meta { margin: 0 0 26px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; letter-spacing: 0.6px; color: var(--nightowl-muted); } .nsp-meta .nsp-sep { margin: 0 10px; opacity: 0.6; } .nsp-divider { display: block; width: 96px; height: 1px; margin: 0 auto; background: linear-gradient(90deg, rgba(200, 148, 47, 0) 0%, rgba(200, 148, 47, 0.85) 50%, rgba(200, 148, 47, 0) 100%); } .nsp-hero-figure { max-width: 1100px; margin: 44px auto 0; padding: 0; } .nsp-hero-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--nightowl-gold-border); border-radius: 6px; background: var(--nightowl-black-soft); } .nsp-hero-figure figcaption { margin-top: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: var(--nightowl-muted); text-align: center; } /* Reading column */ .nsp-content { max-width: 820px; margin: 0 auto; padding: 40px 24px 8px; } /* --- Editorial prose --- */ .nsp-prose { font-size: 18px; line-height: 1.8; color: var(--nightowl-cream); } .nsp-prose > *:first-child { margin-top: 0; } .nsp-prose p { margin: 0 0 1.4em; } .nsp-prose h2 { margin: 2em 0 0.7em; font-family: var(--nightowl-font-display); font-weight: 400; font-size: 28px; line-height: 1.25; letter-spacing: 0.3px; color: var(--nightowl-gold); } .nsp-prose h3 { margin: 1.8em 0 0.6em; font-family: var(--nightowl-font-display); font-weight: 400; font-size: 22px; line-height: 1.3; color: var(--nightowl-gold-light); } .nsp-prose h4 { margin: 1.6em 0 0.5em; font-family: var(--nightowl-font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.4px; color: var(--nightowl-cream); } .nsp-prose strong { color: #f4ecd9; font-weight: 700; } .nsp-prose em { color: #efe4cf; } .nsp-prose a { color: var(--nightowl-gold-light); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(200, 148, 47, 0.5); transition: color 0.2s ease, text-decoration-color 0.2s ease; } .nsp-prose a:hover, .nsp-prose a:focus-visible { color: #f4d896; text-decoration-color: var(--nightowl-gold); } .nsp-prose ul, .nsp-prose ol { margin: 0 0 1.4em; padding-left: 1.5em; } .nsp-prose li { margin: 0 0 0.5em; } .nsp-prose ul li::marker { color: var(--nightowl-gold); } .nsp-prose ol li::marker { color: var(--nightowl-muted); } .nsp-prose blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 3px solid var(--nightowl-gold); color: #d9ccb3; font-style: italic; } .nsp-prose blockquote p:last-child { margin-bottom: 0; } .nsp-prose figure { margin: 1.8em 0; } .nsp-prose img { max-width: 100%; height: auto; display: block; border-radius: 4px; } .nsp-prose figcaption { margin-top: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: var(--nightowl-muted); text-align: center; } .nsp-prose hr { border: 0; height: 1px; width: 120px; margin: 2.6em auto; background: linear-gradient(90deg, rgba(200, 148, 47, 0) 0%, rgba(200, 148, 47, 0.8) 50%, rgba(200, 148, 47, 0) 100%); } /* Tables — never overflow the viewport on mobile */ .nsp-prose .wp-block-table, .nsp-prose figure.wp-block-table { margin: 1.8em 0; overflow-x: auto; } .nsp-prose table { width: 100%; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } .nsp-prose th, .nsp-prose td { border: 1px solid rgba(200, 148, 47, 0.24); padding: 10px 12px; text-align: left; vertical-align: top; } .nsp-prose thead th { color: var(--nightowl-gold-light); background: #0c0c0c; } /* Code */ .nsp-prose code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.88em; background: var(--nightowl-black-soft); color: var(--nightowl-gold-light); padding: 2px 6px; border-radius: 3px; border: 1px solid rgba(200, 148, 47, 0.22); } .nsp-prose pre { margin: 1.6em 0; padding: 16px 18px; background: var(--nightowl-black-soft); border: 1px solid rgba(200, 148, 47, 0.3); border-radius: 6px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; } .nsp-prose pre code { background: none; border: 0; padding: 0; color: var(--nightowl-cream); font-size: inherit; } /* Alignment classes */ .nsp-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; } .nsp-prose .alignleft { float: left; margin: 0.4em 1.6em 1em 0; max-width: 50%; } .nsp-prose .alignright { float: right; margin: 0.4em 0 1em 1.6em; max-width: 50%; } .nsp-prose .alignwide, .nsp-prose .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; } .nsp-prose .alignwide { margin-left: calc(50% - min(46vw, 550px)); margin-right: calc(50% - min(46vw, 550px)); max-width: min(92vw, 1100px); } .nsp-prose .alignwide img, .nsp-prose .alignfull img { width: 100%; } /* --- Article end --- */ .nsp-end { max-width: 820px; margin: 8px auto 0; padding: 8px 24px 64px; text-align: center; } .nsp-end-rule { display: block; width: 120px; height: 1px; margin: 0 auto 28px; background: linear-gradient(90deg, rgba(200, 148, 47, 0) 0%, rgba(200, 148, 47, 0.8) 50%, rgba(200, 148, 47, 0) 100%); } .nsp-end-cat { display: block; margin-bottom: 22px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } .nsp-end-cat a { color: var(--nightowl-muted); text-decoration: none; } .nsp-end-cat a:hover, .nsp-end-cat a:focus-visible { color: var(--nightowl-gold-light); } /* Prev / next (only rendered when siblings exist) */ .nsp-siblings { max-width: 1100px; margin: 0 auto; padding: 0 24px 72px; display: flex; gap: 20px; flex-wrap: wrap; } .nsp-sibling { flex: 1 1 260px; display: block; padding: 18px 20px; background: linear-gradient(180deg, #111, #0a0a0a); border: 1px solid var(--nightowl-gold-border); border-radius: 6px; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease; } .nsp-sibling:hover, .nsp-sibling:focus-visible { transform: translateY(-2px); border-color: rgba(200, 148, 47, 0.6); } .nsp-sibling--next { text-align: right; } .nsp-sibling-label { display: block; margin-bottom: 6px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--nightowl-muted); } .nsp-sibling-title { display: block; font-size: 16px; line-height: 1.35; color: var(--nightowl-gold); } /* --- Focus --- */ .nsp a:focus-visible, .nsp button:focus-visible { outline: 2px solid var(--nightowl-gold-light); outline-offset: 3px; border-radius: 2px; } /* --- Responsive --- */ @media (max-width: 1024px) { .nsp-hero { padding: 56px 20px 34px; } .nsp-content { padding: 34px 20px 8px; } } @media (max-width: 640px) { .nsp-hero { padding: 40px 16px 28px; } .nsp-content { padding: 28px 16px 8px; } .nsp-prose { font-size: 17px; line-height: 1.75; } .nsp-prose .alignleft, .nsp-prose .alignright { float: none; margin: 1.4em auto; max-width: 100%; } .nsp-siblings { padding: 0 16px 56px; } .nsp-sibling--next { text-align: left; } } /* --- Motion --- */ @media (prefers-reduced-motion: reduce) { .nsp-nav a, .nsp-cta, .nsp-eyebrow a, .nsp-prose a, .nsp-back, .nsp-end-cat a, .nsp-sibling, .nsp-footer-nav a { transition: none; } }