/* Cover title/author voice — Trajan-adjacent roman caps (display only) Cinzel loaded from preconnect + stylesheet (not CSS @import). */ :root { /* Cover anchors — red/gold locked; parchment sample kept for accents */ --parchment: #f4eede; --deep-red: #6b2e2e; --gold: #c9a227; --gold-light: #d4af37; /* Lifted paper field — cleaner leaf, less ochre wash */ --surface: #faf8f3; --surface-raised: #ffffff; --text: #1f1c1a; --text-secondary: #4f4b46; --text-muted: #5f5a54; --cta-hover: #542424; /* Footer band: mid-deep crimson — darker than CTA, not near-black */ --footer-band: #551a22; --font-display: "Cinzel", "Times New Roman", Times, serif; --font-body: Georgia, "Times New Roman", Times, serif; } /* Skip link — keyboard/a11y */ .skip-link { position: absolute; left: 0.75rem; top: -3.5rem; z-index: 1000; padding: 0.55rem 0.9rem; background: var(--deep-red); color: #faf8f3; font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; text-decoration: none; border-radius: 4px; transition: top 0.15s ease; } .skip-link:focus { top: 0.75rem; outline: 2px solid var(--gold); outline-offset: 2px; } body { margin: 0; font-family: var(--font-body); background: var(--surface); color: var(--text); line-height: 1.65; } .hero { background: var(--surface); color: var(--text); padding: 3.5rem 1.5rem 3rem; padding-top: max(3.5rem, env(safe-area-inset-top, 0px) + 2rem); text-align: center; position: relative; border-bottom: 1px solid var(--gold); } .hero::after { content: none; } .book-cover { max-width: 320px; width: 86%; height: auto; margin: 0 auto 1.5rem; display: block; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 12px 28px rgba(0, 0, 0, 0.12); } /* Text H1 — title as language, not only image */ .site-title { margin: 0 auto 1.15rem; max-width: 22em; padding: 0; font-weight: 400; } .title-main { display: block; font-family: var(--font-display); font-size: clamp(1.55rem, 4.2vw, 2.05rem); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--deep-red); line-height: 1.2; margin-bottom: 0.55rem; } .title-sub { display: block; font-family: var(--font-body); font-size: clamp(0.98rem, 2.4vw, 1.12rem); font-weight: 400; font-style: normal; letter-spacing: 0.01em; text-transform: none; color: var(--text-secondary); line-height: 1.45; max-width: 28em; margin: 0 auto; } .tagline { font-size: 1.15rem; max-width: 34em; margin: 0 auto 1.1rem; color: var(--text); font-style: italic; line-height: 1.55; font-weight: 400; } .book-ref { font-family: var(--font-display); font-size: 0.72rem; color: var(--deep-red); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; max-width: 38em; margin: 0 auto; line-height: 1.6; opacity: 0.94; } main { max-width: 720px; margin: 0 auto; padding: 3.75rem 1.5rem 4rem; background: var(--surface); } section { margin-bottom: 4.25rem; } h2 { font-family: var(--font-display); color: var(--deep-red); border-bottom: 1px solid var(--gold); padding-bottom: 0.65rem; margin-bottom: 1.5rem; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; } .excerpt-block { margin: 0 0 2.25rem; padding: 0; max-width: 38em; } .excerpt-block:last-child { margin-bottom: 0.25rem; } .excerpt { margin: 0; border-left: 2px solid var(--gold); padding: 0.15rem 0 0.15rem 1.4rem; font-family: var(--font-body); font-style: italic; font-size: 1.08rem; line-height: 1.7; color: var(--text-secondary); font-weight: 400; } .attribution { display: block; margin: 0.75rem 0 0 1.4rem; padding: 0; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep-red); line-height: 1.4; } .author p { margin: 0 0 1rem; } .author p:last-child { margin-bottom: 0; } .author-links { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .author-links a { color: var(--deep-red); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .author-links a:hover { color: var(--cta-hover); border-bottom-color: rgba(201, 162, 39, 0.75); } .author-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .author-sep { color: var(--text-muted); font-weight: 400; letter-spacing: 0; } /* From the Author — lecture embed (book leaf, not promo chrome) */ .speech-block { margin: 0; padding: 0; } .speech-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1f1c1a; border: 1px solid rgba(201, 162, 39, 0.35); border-radius: 2px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.08); } .speech-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .speech-caption { margin: 1rem 0 0; padding: 0; } .speech-title { margin: 0 0 0.4rem; font-family: var(--font-body); font-size: 1.05rem; font-weight: 400; font-style: italic; line-height: 1.45; color: var(--text); } .speech-meta { margin: 0 0 0.65rem; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep-red); line-height: 1.5; } .speech-note { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--text-secondary); } /* Secondary media under primary speech — link-out only, no host chrome */ .author-media-secondary { margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(201, 162, 39, 0.28); } .author-media-secondary .speech-meta:first-child { margin: 0 0 0.55rem; } .speech-meta-secondary { margin: 0 0 0.75rem; color: var(--text-muted); font-weight: 600; } .author-media-secondary .speech-title { margin: 0 0 0.45rem; } .author-media-secondary .speech-note { margin: 0 0 1rem; } .author-media-link { margin: 0; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .author-media-link a { color: var(--deep-red); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .author-media-link a:hover { color: var(--cta-hover); border-bottom-color: rgba(201, 162, 39, 0.75); } .author-media-link a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .speaking-inquiry { margin: 1.35rem 0 0; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .speaking-inquiry a { color: var(--deep-red); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .speaking-inquiry a:hover { color: var(--cta-hover); border-bottom-color: rgba(201, 162, 39, 0.75); } .speaking-inquiry a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* TOC — classical book contents (label rail + title column) */ ul.toc { list-style: none; padding: 0.35rem 0 0; margin: 0; font-size: 1.02rem; line-height: 1.45; } ul.toc li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1.15rem; align-items: baseline; padding: 0.72rem 0; border-bottom: 1px solid rgba(201, 162, 39, 0.16); } ul.toc li:last-child { border-bottom: none; } .toc-label { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep-red); white-space: nowrap; line-height: 1.4; } .toc-title { font-family: var(--font-body); color: var(--text); font-size: 1.02rem; font-weight: 400; min-width: 0; line-height: 1.45; } /* Updates card */ #updates { background: var(--surface-raised); padding: 2.35rem 2rem; border: 1px solid rgba(201, 162, 39, 0.55); border-radius: 8px; margin-bottom: 3rem; box-sizing: border-box; } #updates h2 { margin-bottom: 0.75rem; } #updates form { margin-top: 1.5rem; position: relative; } #updates label { display: block; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 0.35rem; letter-spacing: 0.01em; } #updates input[type="text"], #updates input[type="email"] { width: 100%; padding: 0.8rem 1rem; border: 1px solid rgba(201, 162, 39, 0.55); background: var(--surface-raised); font-size: 1rem; border-radius: 6px; margin-bottom: 1rem; font-family: Georgia, "Times New Roman", serif; color: var(--text); box-sizing: border-box; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #updates input[type="text"]:focus, #updates input[type="email"]:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.18); } /* Formspree honeypot — off-screen, not display:none (bots still fill) */ #updates .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; margin: 0; padding: 0; border: 0; } #updates .cta { display: inline-flex; align-items: center; justify-content: center; background: var(--deep-red); color: #faf8f3; border: none; padding: 0.9rem 2rem; font-size: 0.98rem; font-weight: 600; letter-spacing: 0.03em; border-radius: 8px; cursor: pointer; width: 100%; text-align: center; font-family: Georgia, "Times New Roman", serif; transition: background-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); margin-top: 0.35rem; -webkit-tap-highlight-color: transparent; } #updates .cta:hover { background: var(--cta-hover); color: #faf8f3; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } #updates .cta:active { background: var(--cta-hover); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } #updates .cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } #updates .cta:focus:not(:focus-visible) { outline: none; } #updates .disclaimer { font-size: 0.82rem; color: var(--text-muted); margin-top: 1.15rem; line-height: 1.55; } /* Formspree redirect success (?notified=1) */ #updates .updates-thanks { margin-top: 0.35rem; } #updates .updates-thanks .thanks-lead { font-family: Cinzel, Georgia, "Times New Roman", serif; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--deep-red); margin: 0 0 0.85rem; outline: none; } #updates .updates-thanks p { margin: 0 0 0.85rem; line-height: 1.65; } #updates .updates-thanks .disclaimer { margin-top: 1rem; margin-bottom: 0; } #updates[data-state="thanks"] { border-color: rgba(107, 46, 46, 0.35); } /* Footer — mid-deep crimson colophon */ footer { background: var(--footer-band); color: rgba(250, 248, 243, 0.9); padding: 1.85rem 1.5rem 2.15rem; padding-bottom: max(2.15rem, env(safe-area-inset-bottom, 0px) + 1.25rem); text-align: center; border-top: 1px solid var(--gold); } .footer-content { max-width: 36em; margin: 0 auto; } .footer-copyright { font-size: 0.8rem; margin: 0 0 0.55rem; color: rgba(250, 248, 243, 0.72); letter-spacing: 0.05em; } /* Quiet colophon link — ecosystem, not primary CTA */ .pietas-quest-link { color: rgba(250, 248, 243, 0.88); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; padding: 0.2rem 0; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .pietas-quest-link:hover { color: var(--gold-light); text-decoration: none; border-bottom-color: rgba(212, 175, 55, 0.8); } .pietas-quest-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* —— Mobile craft —— */ @media (max-width: 640px) { .hero { padding: 2.25rem 1.15rem 2rem; padding-top: max(2.25rem, env(safe-area-inset-top, 0px) + 1.25rem); } .book-cover { max-width: 260px; margin-bottom: 1.15rem; } .site-title { margin-bottom: 0.9rem; } .title-main { letter-spacing: 0.07em; font-size: clamp(1.4rem, 7vw, 1.75rem); } .title-sub { font-size: 0.98rem; line-height: 1.4; max-width: 22em; } .tagline { font-size: 1.05rem; margin-bottom: 0.9rem; line-height: 1.5; } .book-ref { font-size: 0.68rem; letter-spacing: 0.08em; line-height: 1.55; max-width: 20em; } main { padding: 2.5rem 1.15rem 3rem; } section { margin-bottom: 3.25rem; } h2 { font-size: 1.2rem; letter-spacing: 0.045em; margin-bottom: 1.25rem; padding-bottom: 0.55rem; } .excerpt { font-size: 1.02rem; line-height: 1.65; padding-left: 1.1rem; } .attribution { margin-left: 1.1rem; letter-spacing: 0.08em; } .speech-title { font-size: 1rem; } .speech-meta { font-size: 0.68rem; letter-spacing: 0.06em; } .speech-note { font-size: 0.95rem; } .author-media-secondary { margin-top: 1.65rem; padding-top: 1.25rem; } .author-media-link { font-size: 0.72rem; letter-spacing: 0.06em; } .speaking-inquiry { font-size: 0.72rem; letter-spacing: 0.06em; } ul.toc li { grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: 0.85rem; padding: 0.62rem 0; } .toc-label { font-size: 0.68rem; letter-spacing: 0.06em; } .toc-title { font-size: 0.98rem; } #updates { padding: 1.75rem 1.25rem; margin-bottom: 2.5rem; border-radius: 6px; } #updates .cta { padding: 0.95rem 1.25rem; font-size: 0.95rem; } footer { padding: 1.6rem 1.15rem 1.85rem; padding-bottom: max(1.85rem, env(safe-area-inset-bottom, 0px) + 1.1rem); } } @media (max-width: 380px) { ul.toc li { grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: 0.7rem; } .book-ref { letter-spacing: 0.06em; } }