/* * DWF Custom Theme - content flow (3.3.0, Claude MV, 2026-10-27). * * Why this file exists: dwf-gtg-component-library.css (loaded after base.css) * resets h1-h4, p, ul, ol and blockquote margins to 0 so its components lay * out predictably. That reset also removed every paragraph and heading gap in * ordinary page content, which is what Eric marked on the live Constitution, * Bill of Rights and Amendment Process pages (10/24: "Style guide needs some * form of adjustment to provide more spacing for paragraphs"; "paragraph needs * better formatting so it's easy to read"). These rules put the reading * rhythm back for page and post content only (.post-content), without * touching the inside of components, which keep their own spacing. * * Loaded on every front-end page after the component library (functions.php). * The Style Guide's dwf-master-stylesheet.css carries the same block so guide * and site stay identical (Instructions: theme first, the guide copies it). */ /* ---------- Paragraphs and lists: space between consecutive blocks ---------- */ .post-content :is(p,ul,ol) + :is(p,ul,ol){margin-top:1em} .post-content :is(.section,.article) > :is(p,ul,ol){line-height:1.65} .post-content :is(.section,.article) > :is(ul,ol){padding-left:1.4em} .post-content :is(.section,.article) > :is(ul,ol) li + li{margin-top:.35em} /* ---------- Headings: the same space above and below every h2 (Eric, 10/24) ---------- */ /* 3.4.14: h2 size and spacing now come from the sitewide heading scale at the end of this file */ .post-content > h2:first-child, .post-content .section:first-child > h2:first-child{margin-top:0} .post-content > h3, .post-content :is(.section,.article) > h3{margin:32px 0 10px} /* 3.4.4 (Eric, About Us 10/29/26: "give content space to breathe"): plain pages (About Us, How This Site Came to Be) use h4 headings and bare lists straight in the content; same room as h3, and the lists get the article list spacing. */ .post-content > :is(h4,h5){margin:32px 0 10px} .post-content > :is(ul,ol){padding-left:1.4em;line-height:1.65} .post-content > :is(ul,ol) li + li{margin-top:.35em} /* ---------- A component after an intro paragraph gets breathing room ---------- */ .post-content :is(p,h2,h3) + :is(.powers-grid,.link-rows,.entry-directory,.date-cards,.side-tabs,.process-paths,.stepper-connected,.phase-cards,.process-card-chain,.statement-strip,.dwf-reader,.accent-card,.callout-block){margin-top:22px} .post-content :is(.entry-directory,.date-cards,.side-tabs,.process-paths,.phase-cards,.statement-strip,.dwf-reader,.accent-card) + :is(p,h3){margin-top:22px} /* ---------- A card, quote or strip placed between sections or after a component ---------- */ .post-content :is(p,ul,ol) + .snapshot-strip{margin-top:28px} .post-content :is(.process-card-chain,.date-cards,.entry-directory,.stepper-connected,.powers-grid,.link-rows,.side-tabs,.process-paths,.phase-cards) + :is(.callout-block,.accent-card,.quote,blockquote.quote,.statement-strip){margin-top:32px} /* 3.4.0: a pull quote after a card row gets more room above it (Eric, Executive Branch notes 10/29/26: "little more space above"). */ .post-content :is(.process-card-chain,.powers-grid,.link-rows,.box,.accent-card-row) + :is(.quote,blockquote.quote){margin-top:56px} .post-content .section + :is(.accent-card,.quote,blockquote.quote,.statement-strip,.callout-block){margin-top:36px} /* ---------- Page head: the intro runs the full width of the page (Eric, 10/24: "expand paragraph and make full width") ---------- */ .post-content .page-head p{max-width:none} .post-content .page-head p + p{margin-top:.8em} /* ---------- Snapshot strip and quote under the page head ---------- */ .post-content .page-head + .snapshot-strip{margin-top:24px} .post-content .snapshot-strip{padding-bottom:28px} /* 3.4.0: no dividing line (Eric, 10/29/26). */ .post-content .snapshot-strip + :is(.quote,blockquote.quote){margin-top:36px} .post-content :is(.quote,blockquote.quote) + :is(h2,.section){margin-top:56px} .post-content :is(p,ul,ol) + :is(.quote,blockquote.quote){margin-top:36px} /* ---------- Dividing lines: one look, used sparingly (Eric, 10/24 typography notes) ---------- */ .post-content hr{border:0;border-top:1px solid var(--rule);margin:48px 0;height:0} /* ---------- Accent card icon: larger (Eric, 10/24: "icon should be bigger") ---------- */ .accent-card img.icon{width:40px;height:40px} /* ---------- Entry Directory: titles that link to their own page ---------- */ .entry-item__title a{color:inherit;text-decoration:none} .entry-item__title a:hover,.entry-item__title a:focus-visible{text-decoration:underline} .entry-item__title a::after{content:' \2192';color:var(--offer-accent,var(--ink))} .entry-item__badge{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;background:var(--soft);font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);vertical-align:2px} /* ---------- Linked cards: the whole card is the link, the text is not underlined ---------- */ a.date-card,a.date-card:hover{text-decoration:none;color:inherit} a.date-card:hover{border-color:var(--ink)} a.date-card .date-card__foot{text-decoration:none} /* ---------- A "next" link at the end of a page, right-aligned (Eric, 10/24) ---------- */ .post-content .next-link{text-align:right;margin-top:24px} .post-content .next-link a{font-weight:700} /* ---------- The reader: a long official text in a scroll box ---------- Was only styled inside .dwf-record (single-record.css, executive orders). Founding documents use it in ordinary page content (Eric, 10/24: "Include a similar full text scroll box for constitution and each of the federalist papers"), so the same rules apply wherever .dwf-reader appears. Script: assets/js/record-reader.js, enqueued when the content contains data-dwf-reader (functions.php, dwf_maybe_enqueue_reader). */ :is(.post-content,.dwf-branch-article) .dwf-reader{border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#fff} :is(.post-content,.dwf-branch-article) .dwf-reader-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:12px 16px;background:var(--soft);border-bottom:1px solid var(--rule)} :is(.post-content,.dwf-branch-article) .dwf-reader-bar label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} :is(.post-content,.dwf-branch-article) .dwf-reader-bar input[type="search"]{flex:1 1 40%;min-width:0;font-family:var(--font);font-size:14px;padding:7px 14px;border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--ink)} :is(.post-content,.dwf-branch-article) .dwf-reader-jumps{display:flex;flex-wrap:wrap;gap:8px;flex:1 0 100%} :is(.post-content,.dwf-branch-article) .dwf-reader-jumps button{appearance:none;border:1px solid var(--rule);background:#fff;border-radius:999px;padding:5px 12px;font-family:var(--font);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer} :is(.post-content,.dwf-branch-article) .dwf-reader-jumps button:hover{border-color:var(--ink)} :is(.post-content,.dwf-branch-article) .dwf-reader-bar .filter-count{flex:1 0 100%;font-size:12px;color:var(--muted);min-height:0} :is(.post-content,.dwf-branch-article) .dwf-reader-bar .filter-count:empty{display:none} :is(.post-content,.dwf-branch-article) .dwf-reader-body{height:70vh;min-height:320px;max-height:720px;overflow-y:auto;padding:24px 5%;font-family:var(--serif);font-size:17px;line-height:1.7} :is(.post-content,.dwf-branch-article) .dwf-reader-body p{margin:0 0 1.1em} :is(.post-content,.dwf-branch-article) .dwf-reader-body h3{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:2.2em 0 .8em} :is(.post-content,.dwf-branch-article) .dwf-reader-body h3:first-child{margin-top:0} :is(.post-content,.dwf-branch-article) .dwf-reader-body h4{font-family:var(--font);font-size:14px;font-weight:700;margin:1.4em 0 .5em} :is(.post-content,.dwf-branch-article) .dwf-reader-body .caption{text-align:center;font-variant:small-caps;letter-spacing:.02em} :is(.post-content,.dwf-branch-article) .dwf-reader-body .sub{padding-left:1.6em} :is(.post-content,.dwf-branch-article) .dwf-reader-body .superseded{color:var(--muted)} :is(.post-content,.dwf-branch-article) .dwf-reader-body ul{padding-left:1.4em;margin:0 0 1.1em} :is(.post-content,.dwf-branch-article) .dwf-reader-body li + li{margin-top:.4em} :is(.post-content,.dwf-branch-article) .dwf-reader-body mark{background:var(--soft);color:var(--ink);box-shadow:0 0 0 2px var(--ink);border-radius:2px} :is(.post-content,.dwf-branch-article) .dwf-reader-note{font-family:var(--font);font-size:13px;color:var(--muted);border:1px dashed var(--rule);border-radius:8px;padding:12px 14px} :is(.post-content,.dwf-branch-article) .dwf-reader-body:focus-visible,:is(.post-content,.dwf-branch-article) .dwf-reader-jumps button:focus-visible{outline:2px solid var(--ink);outline-offset:2px} :is(.post-content,.dwf-branch-article) .dwf-reader + .footnote{margin-top:12px} .post-content .footnote{font-size:12.5px;line-height:1.55;color:var(--muted)} @media print{:is(.post-content,.dwf-branch-article) .dwf-reader-body{height:auto;max-height:none;overflow:visible}} /* ---------- Accordion: common questions (new component, Eric 10/24: "I like this accordion format, make match" the guide) ---------- Native
/, so it works with no script and with the keyboard. Soft panels like the guide's boxes, ink question, a plus that turns to a minus when open. Markup:
Question?

Answer.

...
*/ .dwf-accordion{display:grid;gap:10px} .dwf-accordion details{background:var(--soft);border-radius:10px;padding:0 20px} .dwf-accordion summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:15px;font-weight:700;line-height:1.4;color:var(--ink)} .dwf-accordion summary::-webkit-details-marker{display:none} .dwf-accordion summary::after{content:'+';flex:0 0 auto;font-size:20px;font-weight:400;line-height:1;color:var(--muted)} .dwf-accordion details[open] summary::after{content:'\2212'} .dwf-accordion details > :not(summary){margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--muted)} .dwf-accordion summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px} /* ---------- Founding documents: the four-link navigation at the bottom of each page ---------- */ :is(.post-content,.dwf-branch-article) .founding-nav{margin-top:56px;padding-top:28px;border-top:1px solid var(--rule)} :is(.post-content,.dwf-branch-article) .founding-nav > h2{margin-top:0} @media (max-width:700px){ .post-content h2, .post-content :is(.quote,blockquote.quote) + :is(h2,.section){margin-top:40px} :is(.post-content,.dwf-branch-article) .dwf-reader-body{height:60vh;padding:18px 16px;font-size:16px} } /* ===================================================================== Style Guide decisions from Eric's 10/24 screenshots (typoggraphy.png, tabbed.png in the Resource Hub _Inbox/Style Guide 102426/). These are sitewide, not limited to .post-content. Claude MV, 2026-10-27. ===================================================================== */ /* "No dividing lines" between the topics of a side-tab list, or between the feature rows inside a Side Tabs Enhanced panel. The active topic is still marked (color, and the ink line on the left of the side-tab switcher). */ .side-tabs__nav label, .side-tabs__nav button, .side-tabs__feature, .side-nav label, .side-panel a{border-bottom:0} .side-tabs__nav label,.side-tabs__nav button{padding:11px 0} .side-tabs__feature{padding:10px 0} /* Italic inside a heading: "use

text

instead of setting up separate classes" (Eric). Any h1-h4 can carry or for the serif italic, and .rust on that word for the rust color ("something deeper."). */ :is(h1,h2,h3,h4) :is(em,i){font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em} :is(h1,h2,h3,h4) .rust{color:var(--rust,var(--dwf-red))} /* Pull line: "just like a quote, but without the big quotes" (Eric). Same type as the quote component's text; no marks, no rust. */ .pull{font-family:var(--serif);font-style:normal;font-size:22px;line-height:1.4;color:var(--ink);text-align:left} /* Branch-article pages set every article paragraph to 20px; the pull line keeps its 22px and sits apart from the paragraph above (Federalist pages, 3.3.0). */ .dwf-branch-article.dwf-branch-article .article > p.pull{font-size:22px;margin-top:32px;margin-bottom:8px} /* Status pills: "should be same format as pill list" (Eric). Rounded, soft background, sentence case, like .pill; the state colors stay. */ .psc-status-pill,.caw-status-pill{border-radius:999px;background:var(--soft);padding:5px 12px;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:none} /* ===================================================================== Component fixes from Eric's 10/24 markup of the New Components, Cards and Archives pages ("new components.png", "new components 2.png", filed in AI-Chats-and-Handoffs/Status/Eric-Feedback/Eric-Feedback-10-24-26/). Claude MV, 2026-10-27. ===================================================================== */ /* Panels get the color boxes' rounded corners (12px), so every box like this updates together. */ .statement-strip,.offer-card,.door-lead,.compare-wrap{border-radius:12px} /* Offer Pair: on the dark premium card the label and title are white. */ .offer-card--premium .offer-card__label, .offer-card--premium .offer-card__title{color:#fff} /* Buttons and links inside cards sit on the right, the sitewide default. */ .door-card__link,.starter-card__link,.resource-card__link,.type-card__link{align-self:flex-end;text-align:right} .tool-promo__dl{display:flex;width:max-content;margin-left:auto} a.door-card,a.starter-card,a.resource-card,a.type-card{text-decoration:none;color:inherit} /* Feature Overview: no dark text or pink on the dark band, the description uses the full width, and the light version's link stays red. Pick the band's color by the Color Rules (an agency topic takes --agencies; anything generic uses the light, beige version). */ .feature-overview.is-dark .feature-overview__title, .feature-overview.is-dark .feature-overview__title em, .feature-overview.is-dark .feature-overview__stat-num{color:#fff} .feature-overview__desc{max-width:none} /* Moment Timeline: the line runs through the centre of the dots (72px year column + 12px gap + half of the 28px dot column). */ .moment-timeline::before{left:97px} /* Topic Columns: no lines between items; .has-icons swaps the bullets for an icon ( as the item's first child). */ .topic-col__item + .topic-col__item{border-top:0} .topic-columns.has-icons .topic-col__item{grid-template-columns:20px 1fr} .topic-columns.has-icons .topic-col__item::before{content:none} .topic-col__icon{width:20px;height:20px;object-fit:contain;margin-top:1px} /* Type Cards: separate cards (thin border, rounded), no background on the chip, no watermark letter ("never use letters: use icons or nothing"), no dividing lines. Keep the footer link on one line by keeping it short. */ .type-cards{gap:16px;background:none;border:0;border-radius:0;overflow:visible} .type-card{border:1px solid var(--rule);border-radius:12px} .type-card__chip{background:none;padding:0} .type-card__num{display:none} .type-card__fact,.type-card__foot{border-top:0} .type-card__link{white-space:nowrap} /* Cards with a colored top line (Starter, Resource): no top line; a thin border with round corners instead. Starter Cards put the icon to the left of the text, not on top. */ .starter-card,.resource-card{border:1px solid var(--rule);border-radius:12px} .resource-card{box-shadow:none} .resource-card.is-free,.resource-card.is-soon,.starter-card.is-accent{border-top-color:var(--rule)} .starter-card{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;align-content:start} .starter-card > :not(.starter-card__icon){grid-column:2} .starter-card__icon{grid-column:1;grid-row:1 / span 3;margin:2px 0 0} .starter-card__link{justify-self:end} /* Compare Table: the "not included" mark sits in the middle of its circle. */ .compare-status::before{line-height:1} .compare-status--locked::before{content:"\2013";padding-bottom:1px} /* Full-width opening paragraph right under the top row (Federalist pages, 3.3.0; Eric's federalist.png: "opening paragraph full width"). Room between it and the quote's source line. */ .dwf-branch-article.dwf-branch-article .dwf-top-row + .dwf-full-row{margin-top:36px} /* 3.3.3: interactive widgets (pages built as .dwf-widget / .dwf-widget--name) get white input fields on every page (Eric 10/28/26: "white back (all pages)"). The doubled attribute selector outranks the per-page widget CSS, which set beige (--parchment) backgrounds. Sliders, checkboxes and radios keep their own look. */ [class*="dwf-widget--"][class*="dwf-widget--"] :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea,.input-wrap){background:var(--paper)} /* 3.3.3: Big Stat. One big number with its unit on the left, the sentence that explains it on the right, on a soft panel (Eric 10/28/26, from the minimum-wage line on "How Long Would It Take to Earn That?": "for all elements like this, use similar widget"). Stack several in .big-stat-list. Markup:
66 years
Optional label

Sentence.

Optional small note.

*/ .big-stat-list{display:grid;gap:14px;margin:22px 0} .big-stat{display:flex;align-items:center;gap:28px;background:var(--soft);border-radius:12px;padding:24px 28px} .big-stat__figure{flex:0 0 auto;text-align:center;min-width:24%} .big-stat__num{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(40px,6vw,64px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums} .big-stat__unit{display:block;font-size:17px;color:var(--ink);margin-top:6px} .big-stat__body{flex:1;min-width:0} .big-stat__eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .big-stat__text{margin:0;font-size:clamp(16px,1.9vw,19px);line-height:1.45;color:var(--ink)} .big-stat__note{margin:8px 0 0;font-size:12.5px;color:var(--muted)} @media (max-width:600px){.big-stat{flex-direction:column;text-align:center;gap:10px}} /* ---------- 3.4.14 (Eric 11/1/26): ONE text size, ONE paragraph spacing, ONE heading scale, sitewide ---------- Eric: the backup site's chapters "just look right" (chapter h1 + h4 headings, normal paragraph spacing); "one size and paragraph spacing sitewide"; h2s were "overpowering the rest of the content"; plain paragraph text was a different size on different pages; "we shouldn't have these top beige sections". Why it was off: dwf-gtg-component-library.css sets body to 16px and zeroes p/h margins; base.css scales h2 to 50px; chapter text was 18px and had no spacing at all (it sits in .dwf-toc-editable-intro, not .post-content). These rules cover running text in every content area (page/post content, entry content, chapters), plain HTML only: element selectors, no classes needed in the content, rem/em units, no fixed widths. Components keep their own sizes (the rules only reach direct children of the content area or of a .section/.article inside it). Change the size once here (--dwf-text-size) and every page follows. */ :root{--dwf-text-size:1rem;--dwf-text-leading:1.45;--dwf-block-gap:1em} /* 3.4.16 (Eric 11/1 11:10: 3.4.14 "paragraph text is too big"; chapters "look much more professional"): 16px Arial, tighter leading, closer to the backup chapters' 1.3 */ :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > :is(p,ul,ol,blockquote,table), :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) :is(.section,.article) > :is(p,ul,ol), :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > .box-beige:first-child > :is(p,ul,ol){font-size:var(--dwf-text-size);line-height:var(--dwf-text-leading);margin:0 0 var(--dwf-block-gap)} :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) :is(p,ul,ol) + :is(p,ul,ol){margin-top:0} :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > :is(ul,ol), :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) :is(.section,.article) > :is(ul,ol){padding-left:1.4em} :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > :is(ul,ol) li + li{margin-top:.35em} /* Headings: the backup chapter h4 look (bold, a step above the text), as a literal hierarchy h2 > h3 > h4 */ :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > h2, :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > .box-beige:first-child > h2, :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) :is(.section,.article) > h2{font-size:calc(var(--dwf-text-size) * 1.2);line-height:1.3;letter-spacing:-.01em;margin:1.6em 0 .55em} :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > h3, :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) :is(.section,.article) > h3{font-size:calc(var(--dwf-text-size) * 1.12);line-height:1.3;letter-spacing:-.01em;margin:1.5em 0 .5em} :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > h4, :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) :is(.section,.article) > h4{font-size:calc(var(--dwf-text-size) * 1.05);line-height:1.3;letter-spacing:0;margin:1.4em 0 .5em} :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > :is(h5,h6){font-size:var(--dwf-text-size);line-height:1.3;margin:1.3em 0 .45em} :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > :first-child, :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > .box-beige:first-child > :first-child, :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) .section:first-child > :first-child{margin-top:0} /* A beige box that opens the content (e.g. "The short version" on Terms/Privacy) is plain text now */ :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > .box-beige:first-child{background:none;border:0;border-radius:0;padding:0;margin:0 0 var(--dwf-block-gap);color:inherit} /* Images in running text never overflow their column */ :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) img{max-width:100%;height:auto} /* ---------- 3.4.18 (Eric 11/1/26): every page title looks like the backup site's chapter title ---------- "can we make the titles sitewide like the backup title (not italic and a different font than the other pages)". Backup chapter title (public-square-civic-theme 1.5.2, .dwf-toc-content-main h1): Arial, weight 800, 42px, line-height 1.08, letter-spacing -.02em, upright, title red. Here in rem with a fluid clamp (no px widths). Not changed, as Eric asked: chapter hubs (body.single-chapter_hub, .dwf-hub-wrap) and the member dashboard (Public Square title, hidden on the dashboard) keep their own title style for now. Branch article and record pages keep their branch color; only the font, size and slant change there. */ :root{--dwf-title-size:clamp(1.875rem,1.25rem + 2vw,2.625rem)} body:not(.single-chapter_hub) :is(.psc-entry-title,.dwf-page-title,.page-head h1,.dwf-toc-content-main h1,.dwf-state-hero h1,.dwfgt-page .dwfgt-logo-title){ font-family:var(--dwf-font,Arial,Helvetica,sans-serif)!important; font-style:normal!important; font-weight:800!important; font-size:var(--dwf-title-size)!important; line-height:1.08!important; letter-spacing:-.02em!important; margin:0 0 .45em!important; } body:not(.single-chapter_hub) :is(.psc-entry-title,.page-head h1,.dwf-toc-content-main h1,.dwf-state-hero h1,.dwfgt-page .dwfgt-logo-title), body:not(.single-chapter_hub) .dwf-page-title:not(.dwf-branch-article .dwf-page-title):not(.dwf-record .dwf-page-title){color:var(--dwf-red)!important} /* Room below a video or embed before the text starts (Eric 11/1: "can we get a bit of space?") */ :is(.post-content,.dwf-entry-content,.entry-content,.dwf-toc-editable-intro) > :is(figure,iframe,video,.wp-block-embed,.wp-block-image,.epyt-video-wrapper,.epyt-gallery,.wp-video,div:has(> iframe),p:has(> iframe)){margin-bottom:var(--dwf-block-gap,1em)} /* ---------- 3.4.19 (Claude MV helper, 11/1/26): plain HTML looks right with no classes ---------- Content is plain HTML (prompt 88: no inline CSS, no layout classes), so the theme styles the bare elements. One place, every page follows. */ /* No breadcrumbs anywhere (sitewide rule), including any a plugin or old content still prints. */ .dwf-breadcrumbs,.psc-breadcrumbs,.psc-global-breadcrumbs{display:none!important} /* Tables: full width, readable cells, a header row, sideways scroll on a phone instead of squashing. */ :is(.post-content,.dwf-entry-content,.entry-content) table:not([class]){width:100%;border-collapse:collapse;margin:0 0 var(--dwf-block-gap,1em);font-size:var(--dwf-text-size,1rem);line-height:var(--dwf-text-leading,1.45)} :is(.post-content,.dwf-entry-content,.entry-content) table:not([class]) :is(th,td){padding:.6em .8em;border-bottom:1px solid var(--rule,#d9d4cc);text-align:left;vertical-align:top} :is(.post-content,.dwf-entry-content,.entry-content) table:not([class]) th{font-weight:700;color:var(--dwf-ink,#1a1a1a);border-bottom:2px solid var(--dwf-red)} :is(.post-content,.dwf-entry-content,.entry-content) table:not([class]) tbody tr:nth-child(even){background:rgba(0,0,0,.025)} @media (max-width:700px){ :is(.post-content,.dwf-entry-content,.entry-content) table:not([class]){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} :is(.post-content,.dwf-entry-content,.entry-content) table:not([class]) :is(th,td){min-width:8em} } /* A bare blockquote: one quiet quote style, body text size (no oversized pull quote). */ :is(.post-content,.dwf-entry-content,.entry-content) blockquote:not([class]){margin:1.4em 0;padding:.2em 0 .2em 1.2em;border-left:4px solid var(--dwf-red);background:none;font-size:var(--dwf-text-size,1rem);line-height:var(--dwf-text-leading,1.45);font-style:italic;color:var(--dwf-ink,#1a1a1a)} :is(.post-content,.dwf-entry-content,.entry-content) blockquote:not([class]) > :last-child{margin-bottom:0} :is(.post-content,.dwf-entry-content,.entry-content) blockquote:not([class]) cite{display:block;margin-top:.5em;font-style:normal;font-weight:700} /* No faint dividing rules: an
in content is space only. */ :is(.post-content,.dwf-entry-content,.entry-content) hr{border:0!important;height:0;margin:2em 0;background:none} /* No bullets inside boxed panels. */ :is(.box,.box-beige,.accent-card,.callout-block) ul{list-style:none;padding-left:0} /* Images and embeds never overflow the column. */ :is(.post-content,.dwf-entry-content,.entry-content) :is(img,video,iframe){max-width:100%} :is(.post-content,.dwf-entry-content,.entry-content) img{height:auto} /* ---------- 3.4.20 (Claude MV helper, 11/1/26): plain pages read like a page, not a wall ---------- Eric's screenshot of "How This Site Came to Be": "could use a visual upgrade". Lines ran the full 96% site width (~180 characters at 1440px); the quote was tiny text between huge quote marks; sections ran together. Fixed here for every plain page and post (plain HTML, no classes), one change for the pattern: - Scope: regular pages (page.php, default template) and blog posts whose content is plain HTML. Pages built from components (.page-head, .page-cap, .section, .article, family hero) and posts with a floated box are left exactly as they were. Chapters, chapter hubs, umbrella pages and plugin templates use other wrappers and are not touched. - Measure: running text capped at a readable line length (ch, never px), left-aligned under the title. Tables and media keep the full width. Phones: everything is full width (min(100%, ...)). - Lede: the first paragraph a step larger, in the muted color, with more room below. - Bare blockquote = the design system's pull quote: Georgia italic, a step larger, red rule at left, no decorative quote glyphs. (Replaces the 3.4.19 body-size quote on these pages only.) - Rhythm: more space above an h2 than below it. Lists: red bullets. */ body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > :is(p,ul,ol,h2,h3,h4,h5,h6){max-width:min(100%,72ch)} body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > p:first-child{font-size:calc(var(--dwf-text-size,1rem) * 1.2);line-height:1.45;color:var(--muted,#66615b);margin-bottom:1.4em;max-width:min(100%,60ch)} body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > h2{margin:2.1em 0 .5em} body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > :is(h3,h4){margin:1.7em 0 .45em} body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > :is(h2,h3,h4):first-child{margin-top:0} body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > :is(ul,ol){padding-left:1.5em} body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > ul > li::marker{color:var(--dwf-red)} body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > blockquote:not([class]){ max-width:min(100%,52ch);margin:1.8em 0;padding:.15em 0 .15em 1.1em;border:0;border-left:4px solid var(--dwf-red);background:none; font-family:var(--serif,Georgia,"Times New Roman",serif);font-style:italic;font-size:calc(var(--dwf-text-size,1rem) * 1.3);line-height:1.4;color:var(--ink,#171717);quotes:none} body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > blockquote:not([class]) :is(p,li){font:inherit;color:inherit;margin:0 0 .5em} body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > blockquote:not([class]) > :last-child{margin-bottom:0} body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > blockquote:not([class])::before, body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > blockquote:not([class])::after, body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > blockquote:not([class]) p::before, body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > blockquote:not([class]) p::after{content:none} body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > blockquote:not([class]) cite{display:block;margin-top:.5em;font-family:var(--dwf-font,Arial,Helvetica,sans-serif);font-style:normal;font-size:var(--dwf-text-size,1rem);font-weight:700} @media (max-width:600px){ body:is(.page-template-default,.single-post) .post-content:not(:has(> :is(.page-head,.page-cap,.section,.article,.dwf-family-hero,.alignright,.alignleft))) > blockquote:not([class]){font-size:calc(var(--dwf-text-size,1rem) * 1.15);padding-left:.9em} }