/* ========================================================================== Proper Tools — Field Manual shared stylesheet Supports two reading modes: observational notes and narrative vignettes. Per-page accent colour comes in via --fm-accent declared in the page . Per-page mode is selected via class on the article element: .fm-piece.fm-note — observational/analytical pieces (essayistic) .fm-piece.fm-vignette — narrative pieces (linear reading) Default accent is slate; override per-page. ========================================================================== */ :root { --fm-accent: #5A6A78; /* slate, default */ --fm-accent-soft: rgba(90,106,120, 0.16); --fm-accent-bg: rgba(90,106,120, 0.035); --fm-accent-rule: rgba(90,106,120, 0.22); } /* ---------- Page card ---------- */ .fm-page.section-card { background: linear-gradient(to bottom, rgba(255,255,255,0.985), rgba(255,255,255,0.968)), radial-gradient(circle at top center, var(--fm-accent-bg), transparent 48%); border-left: 3px solid var(--fm-accent-rule); box-shadow: 0 10px 30px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.92) inset; padding-top: var(--sp-5); } /* ---------- Article container (shared by both modes) ---------- */ .essay.fm-piece { max-width: 66ch; font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif; color: rgba(17,17,17,0.96); } .essay.fm-note { font-size: 1.12rem; line-height: 1.70; } .essay.fm-vignette { font-size: 1.13rem; line-height: 1.78; } /* ---------- Kicker ---------- */ .fm-piece .fm-kicker { font-size: var(--fs-sm); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0,0,0,0.50); margin-bottom: var(--sp-1); } /* ---------- Title ---------- */ .fm-piece h1 { font-family: "Doves Headline", Georgia, serif; font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 var(--sp-1); max-width: none; } /* ---------- Subtitle ---------- */ .fm-piece .fm-subtitle { font-size: var(--fs-md); font-style: italic; color: rgba(0,0,0,0.74); margin-top: 0; margin-bottom: var(--sp-1); line-height: 1.4; max-width: 52ch; } /* ---------- Meta block ---------- */ .fm-piece .fm-meta { margin-top: var(--sp-2); margin-bottom: var(--sp-5); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--fs-sm); line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0,0,0,0.56); } .fm-piece .fm-reading-time { margin-top: var(--sp-1); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0,0,0,0.44); } /* ========================================================================== MODE: Observational note (.fm-note) For essayistic pieces with section breaks, headings, footnotes. ========================================================================== */ /* Drop cap on first paragraph for notes */ .fm-note > p:first-of-type::first-letter { float: left; font-family: "Doves Headline", Georgia, serif; font-size: 3.6em; line-height: 0.86; padding-right: 0.08em; padding-top: 0.06em; color: var(--fm-accent); opacity: 0.92; } /* Body paragraphs in notes */ .fm-note p { margin: var(--sp-2) 0 0; max-width: none; text-wrap: pretty; } .fm-note p:first-child { margin-top: 0; } /* Section headings in notes */ .fm-note h2 { font-family: "Doves Headline", Georgia, serif; font-size: var(--fs-lg); line-height: 1.15; letter-spacing: -0.005em; margin-top: var(--sp-8); margin-bottom: var(--sp-2); color: var(--pt-ink); } /* Section divider for notes — fleuron */ .fm-note hr { margin: var(--sp-5) 0; border: none; border-top: 1px solid var(--fm-accent-soft); position: relative; } .fm-note hr::after { content: "✢"; position: relative; top: -0.88em; display: block; width: 2ch; margin: 0 auto; text-align: center; background: var(--pt-paper); color: var(--fm-accent); opacity: 0.55; font-size: 0.9rem; } /* Inline emphasis on key italicized words in notes */ .fm-note em { font-style: italic; color: rgba(0,0,0,0.92); } /* ---------- Footnotes ---------- */ .fm-note .footnotes { margin-top: var(--sp-8); padding-top: var(--sp-3); border-top: 1px solid var(--fm-accent-soft); font-size: 0.96rem; line-height: 1.6; color: rgba(0,0,0,0.78); } .fm-note .footnotes ol { padding-left: var(--sp-3); margin: 0; } .fm-note .footnotes li { margin-bottom: var(--sp-2); } .fm-note .footnotes li:last-child { margin-bottom: 0; } .fm-note .footnotes p { margin: 0; } .fm-note sup a, .fm-note .footnote-ref { text-decoration: none; color: var(--fm-accent); padding: 0 0.15em; font-weight: 500; } .fm-note sup a:hover { text-decoration: underline; } .fm-note .footnote-backref { margin-left: 0.4em; text-decoration: none; color: var(--fm-accent); opacity: 0.7; } .fm-note .footnote-backref:hover { opacity: 1; text-decoration: none; } /* ========================================================================== MODE: Narrative vignette (.fm-vignette) For story pieces. Linear reading, no section breaks within prose, careful treatment of dedications and authorial notes at the end. ========================================================================== */ /* No drop cap on vignettes — stories should start small and unannounced */ /* Body paragraphs in vignettes — generous spacing for narrative rhythm */ .fm-vignette p { margin: var(--sp-3) 0 0; max-width: none; text-wrap: pretty; } .fm-vignette p:first-child { margin-top: 0; } /* Italic emphasis (song titles, deployable phrases, internal speech) */ .fm-vignette em { font-style: italic; color: rgba(0,0,0,0.92); } /* Dialogue uses standard paragraph treatment — no special class needed. The story's rhythm comes from paragraph breaks, not from typographic ornament. Trust the prose. */ /* Section divider for vignettes — used only before the closing caboose, not within the story prose itself */ .fm-vignette hr { margin: var(--sp-8) 0 var(--sp-5); border: none; border-top: 1px solid var(--fm-accent-soft); } /* ---------- Dedication / closing caboose for vignettes ---------- */ .fm-vignette .fm-caboose { margin-top: var(--sp-3); font-size: 0.96rem; line-height: 1.6; color: rgba(0,0,0,0.66); font-style: italic; max-width: 58ch; } .fm-vignette .fm-caboose p { margin-top: var(--sp-2); } .fm-vignette .fm-caboose p:first-child { margin-top: 0; } .fm-vignette .fm-caboose a { color: var(--fm-accent); font-style: italic; } .fm-vignette .fm-caboose a:hover { color: var(--fm-accent); filter: brightness(0.85); } /* The dedication line — set apart with deliberate breathing room. Marks Scott Hutchison's lyric as the closing breath of the page. */ .fm-vignette .fm-dedication { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--fm-accent-soft); font-style: italic; color: rgba(0,0,0,0.62); font-size: 0.94rem; line-height: 1.5; text-align: center; max-width: 52ch; margin-left: auto; margin-right: auto; } .fm-vignette .fm-dedication p { margin: 0; } /* ========================================================================== SHARED: License coda for both modes ========================================================================== */ .fm-piece .fm-coda { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--fm-accent-soft); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--fs-sm); line-height: 1.5; color: rgba(0,0,0,0.52); max-width: 56ch; margin-left: auto; margin-right: auto; text-align: center; } .fm-piece .fm-coda p { margin: 0.4em 0; } .fm-piece .fm-coda a { color: var(--fm-accent); } .fm-piece .fm-coda .fm-attribution { font-size: var(--fs-xs); font-style: italic; color: rgba(0,0,0,0.44); margin-top: var(--sp-2); } /* ========================================================================== SHARED: Companion cross-links For pointing to other pieces in the triptych or related Commons texts. ========================================================================== */ .fm-piece .fm-companions { margin: var(--sp-3) 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 2px solid var(--fm-accent-rule); background: var(--fm-accent-bg); font-size: var(--fs-sm); line-height: 1.55; color: rgba(0,0,0,0.72); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .fm-piece .fm-companions p { margin: 0.3em 0; } .fm-piece .fm-companions a { font-style: italic; color: var(--fm-accent); } .fm-piece .fm-companions a:hover { filter: brightness(0.85); } /* ========================================================================== Mobile ========================================================================== */ @media (max-width: 720px) { .essay.fm-piece { font-size: 1.05rem; } .essay.fm-note { line-height: 1.66; } .essay.fm-vignette { line-height: 1.74; } .fm-piece h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); } .fm-note h2 { font-size: 1.4rem; margin-top: var(--sp-5); } .fm-note > p:first-of-type::first-letter { font-size: 3.2em; } .fm-piece .fm-subtitle { max-width: none; } .fm-vignette p { margin-top: var(--sp-2); } .fm-vignette .fm-caboose, .fm-vignette .fm-dedication, .fm-piece .fm-coda { max-width: none; } }