:root { color-scheme: light; --paper: #f2ede3; --paper-2: #ebe5d7; --paper-3: #e3dcc9; --ink: #1b1a17; --ink-2: #2c2a25; --ink-mute: #5b574d; --ink-fade: #8a8579; --rule: #cdc6b5; --rule-soft: #ddd6c4; --navy: #1e2a44; --navy-2: #2a3858; --navy-deep: #1e2a44; /* stays dark in both themes; for solid navy panels */ --ochre: #8a6e3c; --ochre-soft: #b89a63; --alert: #8a3c3c; --foot-bg: #1b1a17; --shell-max: 1180px; --measure: 38rem; /* ~65–70ch with our serif */ --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --sans: "Source Sans 3", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } /* Night palette — same warm ink-and-paper relationships, inverted. * data-theme is set on before first paint by the inline head * script (saved choice, else the OS preference). */ :root[data-theme="dark"] { color-scheme: dark; --paper: #181611; --paper-2: #1f1d16; --paper-3: #26231a; --ink: #e9e3d3; --ink-2: #d6cfbc; --ink-mute: #a49d8b; --ink-fade: #7c766a; --rule: #3a372c; --rule-soft: #2e2b22; --navy: #93a7d1; --navy-2: #a6b7db; --ochre: #c8a45f; --ochre-soft: #9c7f4f; --alert: #c08476; --foot-bg: #131109; } * { box-sizing: border-box; } html, body { background: var(--paper); } body { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.65; font-feature-settings: "kern", "liga", "onum"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- Shared shell ---------- */ .shell { max-width: var(--shell-max); margin: 0 auto; padding: 0 40px; } .narrow { max-width: 720px; margin: 0 auto; } /* ---------- Header ---------- */ .masthead { border-bottom: 1px solid var(--rule); background: var(--paper); } .masthead-row { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 0 18px; } .wordmark { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.005em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; gap: 12px; } .wordmark .mark { display: inline-block; width: 14px; height: 14px; background: var(--navy); transform: translateY(2px); } .wordmark .sub { font-family: var(--sans); font-weight: 500; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin-left: 4px; } .utility { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); display: flex; gap: 24px; align-items: center; } .utility a { color: var(--ink-mute); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; } .utility a:hover { color: var(--ochre); border-color: var(--ochre); } .utility .date { color: var(--ink-fade); border: none; letter-spacing: 0.14em; } /* ---------- View options (floating reader preferences) ---------- */ .view-options { position: fixed; right: 22px; bottom: 22px; z-index: 60; font-family: var(--sans); } .vo-toggle { appearance: none; cursor: pointer; background: var(--paper); color: var(--ink-mute); border: 1px solid var(--rule); font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 9px 14px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14); } .vo-toggle:hover, .vo-toggle[aria-expanded="true"] { color: var(--ochre); border-color: var(--ochre); } .vo-panel { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 230px; background: var(--paper); border: 1px solid var(--ink); padding: 16px 18px 18px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); } .vo-panel[hidden] { display: none; } .vo-label { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-fade); margin: 0 0 10px; } .vo-label:not(:first-child) { margin-top: 18px; } .vo-seg { display: flex; border: 1px solid var(--rule); } .vo-opt { flex: 1; appearance: none; cursor: pointer; background: var(--paper); border: none; border-right: 1px solid var(--rule); padding: 9px 10px; font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); text-align: center; text-decoration: none; white-space: nowrap; } .vo-opt:last-child { border-right: none; } .vo-opt:hover { color: var(--ochre); } .vo-opt.active { background: var(--ink); color: var(--paper); cursor: default; } @media (max-width: 480px) { .view-options { right: 14px; bottom: 14px; } } /* mobile nav toggle */ .nav-toggle { display: none; appearance: none; background: transparent; border: 1px solid var(--ink); color: var(--ink); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; } .nav-toggle .x { display: none; } .nav-toggle[aria-expanded="true"] .menu { display: none; } .nav-toggle[aria-expanded="true"] .x { display: inline; } nav.primary { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); } nav.primary ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; } nav.primary a { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; padding: 16px 22px 16px 0; margin-right: 22px; border-bottom: 1px solid transparent; } nav.primary a:hover { color: var(--ochre); } nav.primary li:first-child a { /* keep flush */ } /* ---------- Hero / mission ---------- */ .hero { padding: 96px 0 80px; border-bottom: 1px solid var(--rule); } .eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ochre); margin: 0 0 28px; display: flex; align-items: center; gap: 14px; } .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--ochre); } h1.hero-title { font-family: var(--serif); font-weight: 400; font-size: 58px; line-height: 1.06; letter-spacing: -0.018em; margin: 0 0 28px; max-width: 18ch; color: var(--ink); text-wrap: balance; } h1.hero-title em { font-style: italic; color: var(--navy); } .hero p.lede { font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 36rem; margin: 0; } .hero-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--rule); max-width: 900px; } .hero-meta .item { font-family: var(--sans); } .hero-meta .k { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-fade); margin: 0 0 8px; } .hero-meta .v { font-family: var(--serif); font-size: 17px; color: var(--ink-2); margin: 0; line-height: 1.45; } /* ---------- Section header ---------- */ .section { padding: 88px 0; border-bottom: 1px solid var(--rule); } .section-head { display: grid; grid-template-columns: 220px 1fr; gap: 56px; margin-bottom: 48px; } .section-head .label { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); padding-top: 6px; border-top: 1px solid var(--ink); } .section-head h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.18; letter-spacing: -0.012em; margin: 0 0 16px; max-width: 24ch; text-wrap: balance; } .section-head p { font-size: 17px; color: var(--ink-mute); max-width: 34rem; margin: 0; line-height: 1.6; } /* ---------- Start here grid ---------- */ .start-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); } .start-item { padding: 28px 24px 32px 0; border-right: 1px solid var(--rule); position: relative; } .start-item:last-child { border-right: none; padding-right: 0; } .start-item .num { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; color: var(--ochre); margin: 0 0 22px; } .start-item h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.25; letter-spacing: -0.005em; margin: 0 0 12px; color: var(--ink); text-wrap: balance; } .start-item p { font-size: 15.5px; line-height: 1.55; color: var(--ink-mute); margin: 0 0 28px; } .start-item .read { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--navy); padding-bottom: 3px; } .start-item .read:hover { color: var(--ochre); border-color: var(--ochre); } /* ---------- Featured articles ---------- */ .features { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; border-top: 1px solid var(--ink); padding-top: 36px; } .feature { display: flex; flex-direction: column; } .feature .kicker { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ochre); margin: 0 0 14px; } .feature h3 { font-family: var(--serif); font-weight: 400; line-height: 1.18; letter-spacing: -0.012em; margin: 0 0 14px; color: var(--ink); text-wrap: balance; } .feature.lead h3 { font-size: 30px; max-width: 22ch; } .feature:not(.lead) h3 { font-size: 22px; max-width: 22ch; } .feature p { font-size: 16px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 22px; } .feature .meta { margin-top: auto; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-fade); border-top: 1px solid var(--rule-soft); padding-top: 14px; display: flex; justify-content: space-between; } /* ---------- Footer ---------- */ footer.site-foot { background: var(--foot-bg); color: #d8d2c2; padding: 72px 0 36px; font-family: var(--sans); } footer.site-foot .shell { color: inherit; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid #3a382f; } .foot-grid h4 { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ochre-soft); margin: 0 0 18px; } .foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .foot-grid a { color: #d8d2c2; text-decoration: none; font-size: 14px; } .foot-grid a:hover { color: var(--ochre-soft); } .foot-mission { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: #ebe5d7; max-width: 32ch; margin: 0; } .foot-mission .mark { display: inline-block; width: 12px; height: 12px; background: var(--ochre-soft); margin-bottom: 18px; } .colophon { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; font-size: 11.5px; color: #7a766a; letter-spacing: 0.04em; } /* =================================================================== PAGE 2 — Case analysis =================================================================== */ .case-head { padding: 64px 0 48px; border-bottom: 1px solid var(--rule); } .case-breadcrumb { font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-fade); margin-bottom: 36px; } .case-breadcrumb a { color: var(--ink-mute); text-decoration: none; margin: 0 8px; } .case-breadcrumb a:first-child { margin-left: 0; } .case-breadcrumb .sep { color: var(--rule); } .case-title { display: grid; grid-template-columns: 1fr 280px; gap: 64px; align-items: end; } /* Legislation-page header: top-align the two columns so a short title * ("Texas") doesn't get pushed down by a taller facts panel, leaving a * band of dead space above it. */ .case-title.snug { align-items: start; } .case-title h1 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 52px; line-height: 1.06; letter-spacing: -0.018em; margin: 0 0 18px; max-width: 18ch; text-wrap: balance; } .case-citation { font-family: var(--sans); font-size: 14px; color: var(--ink-mute); letter-spacing: 0.02em; } .case-citation .cite { color: var(--ink); } .case-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 32px; font-family: var(--sans); font-size: 13px; padding: 18px 22px; background: var(--paper-2); border-left: 2px solid var(--navy); } .case-facts dt { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-fade); margin-top: 8px; } .case-facts dt:first-of-type { margin-top: 0; } .case-facts dd { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; } .vote-bar { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; color: var(--ink-2); } .vote-bar .swatch { display: inline-flex; overflow: hidden; width: 64px; height: 8px; border: 1px solid var(--ink); } .vote-bar .swatch i { display: block; height: 100%; background: var(--ink); } .vote-bar .swatch i.against { background: transparent; } /* At-a-glance */ .glance { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--ink); background: var(--paper); margin: 48px 0 64px; } .glance .col { padding: 28px 28px 32px; border-right: 1px solid var(--rule); } .glance .col:last-child { border-right: none; } .glance .col h4 { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ochre); margin: 0 0 14px; } .glance .col p { font-family: var(--serif); font-size: 16.5px; line-height: 1.55; color: var(--ink-2); margin: 0; } /* Case body */ .case-layout { display: grid; grid-template-columns: minmax(0, var(--measure)) 280px; gap: 88px; padding: 16px 0 96px; } .prose { color: var(--ink-2); font-size: 18.5px; line-height: 1.72; } .prose h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.008em; color: var(--ink); margin: 56px 0 18px; padding-top: 14px; border-top: 1px solid var(--rule); } .prose h2:has(> .n) { display: flex; align-items: baseline; gap: 14px; } .prose h2:first-child { margin-top: 0; border-top: none; padding-top: 0; } .prose h2 .n { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; color: var(--ochre); transform: translateY(-2px); } .prose h3 { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); margin: 36px 0 8px; } .prose p { margin: 0 0 18px; } .prose p + p { text-indent: 0; } .prose a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--ochre-soft); padding-bottom: 1px; } .prose a:hover { color: var(--ochre); } .prose sup.fn { font-family: var(--sans); font-size: 10px; color: var(--ochre); font-weight: 600; padding: 0 1px 0 2px; vertical-align: super; line-height: 0; } .prose sup.fn a { border: none; color: inherit; } .pullquote { margin: 40px -24px; padding: 28px 32px 28px 36px; border-left: 2px solid var(--navy); background: var(--paper-2); font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--ink); letter-spacing: -0.005em; } .pullquote cite { display: block; margin-top: 16px; font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } .pullquote cite::before { content: "— "; } /* Marginalia sidebar */ aside.margin { font-family: var(--sans); border-top: 1px solid var(--ink); padding-top: 16px; position: sticky; top: 24px; align-self: start; color: var(--ink-2); } aside.margin section { margin-bottom: 36px; } aside.margin h4 { font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; } aside.margin ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } aside.margin a { font-family: var(--serif); font-size: 15px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 8px; display: block; line-height: 1.4; } aside.margin a .src { display: block; font-family: var(--sans); font-size: 10.5px; color: var(--ink-fade); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 4px; } aside.margin a:hover { color: var(--ochre); border-color: var(--ochre); } /* Footnotes block */ .footnotes { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--ink); font-size: 14px; line-height: 1.55; color: var(--ink-mute); font-family: var(--serif); } .footnotes h4 { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 18px; } .footnotes ol { counter-reset: fn; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .footnotes li { counter-increment: fn; position: relative; padding-left: 36px; text-indent: 0; } .footnotes li::before { content: counter(fn); position: absolute; left: 0; top: 0; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--ochre); width: 22px; text-align: right; line-height: 1.85; } .footnotes a.back { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-fade); text-decoration: none; margin-left: 6px; } .footnotes a.back:hover { color: var(--ochre); } /* ---------- Status badge ---------- */ .status-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border: 1px solid currentColor; } .status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status-badge.controlling { color: var(--navy); } .status-badge.partial { color: var(--ochre); } .status-badge.overruled { color: var(--ink-fade); } .status-badge.procedural { color: var(--ink-mute); } /* ---------- Opinions (majority / concurrences / dissents) ---------- */ .opinions-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); margin: 24px 0 40px; } .opinion-item { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--rule-soft); } .opinion-item .who { font-family: var(--sans); } .opinion-item .role { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre); margin: 0 0 8px; } .opinion-item .author { font-family: var(--serif); font-size: 17px; color: var(--ink); margin: 0 0 4px; line-height: 1.35; } .opinion-item .joined { font-family: var(--sans); font-size: 12.5px; color: var(--ink-fade); line-height: 1.5; } .opinion-item .summary { font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--ink-2); margin: 0; } .opinion-item.solo-none .summary { color: var(--ink-fade); font-style: italic; } /* ---------- Key quotes ---------- */ .quote-list { display: flex; flex-direction: column; gap: 28px; margin: 24px 0 40px; } .quote-card { padding: 24px 28px; border-left: 2px solid var(--ochre); background: var(--paper-2); } .quote-card blockquote { margin: 0 0 14px; font-family: var(--serif); font-style: italic; font-size: 18.5px; line-height: 1.5; color: var(--ink); } .quote-card .attrib { display: flex; justify-content: space-between; gap: 16px; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .quote-card .attrib .loc { color: var(--ink-fade); text-transform: none; letter-spacing: 0.02em; } /* ---------- Perspectives (three framings) ---------- */ .perspectives { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); margin: 24px 0 40px; } .perspective-col { padding: 24px 26px 28px; border-right: 1px solid var(--rule); } .perspective-col:last-child { border-right: none; } .perspective-col.abolitionist { background: var(--paper); } .perspective-col.mainstream { background: var(--paper-2); } .perspective-col.prochoice { background: var(--paper); } .perspective-col h4 { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 14px; color: var(--ink-mute); } .perspective-col.abolitionist h4 { color: var(--navy); } .perspective-col p { font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; } /* ---------- Significance ---------- */ .significance-block { margin: 24px 0 40px; border-top: 1px solid var(--ink); padding-top: 24px; } .sig-overall { display: flex; align-items: baseline; gap: 20px; margin-bottom: 28px; } .sig-overall .num { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--navy); } .sig-overall .num sub { font-family: var(--sans); font-size: 16px; color: var(--ink-fade); } .sig-overall .rationale { font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink-mute); max-width: 34rem; } .sig-bars { display: flex; flex-direction: column; gap: 16px; } .sig-bar-row { display: grid; grid-template-columns: 220px 1fr 32px; align-items: center; gap: 16px; } .sig-bar-row .label { font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-mute); } .sig-bar-row .track { height: 6px; background: var(--rule-soft); position: relative; } .sig-bar-row .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ochre); } .sig-bar-row .val { font-family: var(--sans); font-size: 12.5px; color: var(--ink); text-align: right; } /* ---------- Sources & related (full width) ---------- */ .source-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin: 24px 0 40px; } .source-cols h4 { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); } .source-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .source-cols a { font-family: var(--serif); font-size: 15.5px; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 6px; display: inline-flex; align-items: baseline; gap: 8px; } .source-cols a::after { content: "↗"; font-family: var(--sans); font-size: 11px; color: var(--ochre); } .source-cols a:hover { color: var(--ochre); } .source-cols .empty { font-family: var(--sans); font-size: 13.5px; color: var(--ink-fade); font-style: italic; } .related-cases { margin: 24px 0 40px; } .related-cases h4 { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; } .case-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; } .case-chips:last-child { margin-bottom: 0; } .case-chip { font-family: var(--serif); font-size: 14.5px; color: var(--ink-2); text-decoration: none; padding: 8px 14px; border: 1px solid var(--rule); background: var(--paper); } .case-chip:hover { border-color: var(--ochre); color: var(--ochre); } /* ---------- Editorial note ---------- */ .editorial-note { margin: 40px 0; padding: 18px 24px; background: var(--paper-2); border-left: 2px solid var(--ink-fade); font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--ink-mute); } .editorial-note strong { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-fade); margin-bottom: 8px; } /* =================================================================== PAGE 3 — Objection / Response =================================================================== */ .obj-head { padding: 72px 0 56px; border-bottom: 1px solid var(--rule); } .obj-head .eyebrow { margin-bottom: 24px; } .obj-head h1 { font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1.1; letter-spacing: -0.018em; margin: 0 0 22px; max-width: 22ch; text-wrap: balance; } .obj-head .standfirst { font-size: 19px; line-height: 1.55; color: var(--ink-mute); max-width: 36rem; margin: 0; } .obj-meta { display: flex; gap: 36px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } .obj-meta span strong { color: var(--ink); font-weight: 600; margin-left: 8px; letter-spacing: 0.06em; } /* The strongest-version box */ .steelman { margin: 64px 0 56px; border: 1px solid var(--navy); background: var(--paper); position: relative; } .steelman::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--rule-soft); pointer-events: none; } .steelman .head { background: var(--navy-deep); color: #e8e2d2; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; padding: 12px 22px; display: flex; justify-content: space-between; align-items: center; } .steelman .head .source { color: var(--ochre-soft); font-weight: 500; letter-spacing: 0.14em; } .steelman .body { padding: 30px 36px 32px; font-family: var(--serif); font-size: 18.5px; line-height: 1.7; color: var(--ink); position: relative; } .steelman .body p { margin: 0 0 16px; } .steelman .body p:last-child { margin-bottom: 0; } .steelman .body .attribution { font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute); margin-top: 18px; } /* True/compelling section */ .concede { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 56px 0; } .concede h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; margin: 0 0 24px; color: var(--ink); text-wrap: balance; } .concede ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 56px; } .concede li { padding-left: 28px; position: relative; font-size: 17px; line-height: 1.55; color: var(--ink-2); } .concede li::before { content: ""; position: absolute; left: 0; top: 12px; width: 14px; height: 1.5px; background: var(--ochre); } /* Conversational call-out */ .convo { margin: 56px 0 24px; padding: 0; background: transparent; border-top: 1px solid var(--ink); padding-top: 32px; } .convo .label { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ochre); margin: 0 0 18px; } .convo h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0 0 28px; max-width: 24ch; text-wrap: balance; } .convo .turns { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); } .convo .turn { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); } .convo .turn .who { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); padding-top: 4px; } .convo .turn.them .who { color: var(--ink-fade); } .convo .turn .what { font-family: var(--serif); font-size: 17.5px; line-height: 1.55; color: var(--ink-2); } .convo .turn.them .what { color: var(--ink-mute); font-style: italic; } /* Related objections */ .related { padding: 64px 0 96px; } .related h3 { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 28px; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); } .related-item { padding: 24px 28px 28px 0; border-right: 1px solid var(--rule); } .related-item:last-child { border-right: none; padding-right: 0; } .related-item .num { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; color: var(--ochre); margin: 0 0 14px; } .related-item h4 { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.3; margin: 0 0 8px; color: var(--ink); text-wrap: balance; } .related-item p { font-size: 15px; line-height: 1.55; color: var(--ink-mute); margin: 0; } /* Sub-page-only headers */ .sub-masthead nav.primary a:nth-child(2) { color: var(--ochre); } /* ---------- In-page table of contents ---------- */ .toc { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 18px 0 22px; margin-bottom: 56px; font-family: var(--sans); } .toc .toc-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-fade); margin: 0 0 14px; } .toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 28px; } .toc li { counter-increment: toc; } .toc a { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink-2); font-family: var(--serif); font-size: 15.5px; line-height: 1.35; padding: 6px 0; border-bottom: 1px solid transparent; } .toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--ochre); flex: 0 0 auto; } .toc a:hover { color: var(--ochre); } /* ---------- Section locator (Case N of N, prev/next) ---------- */ .locator { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); gap: 16px; } .locator a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .locator a:hover { color: var(--ochre); } .locator .here { color: var(--ink); font-weight: 600; } .locator .here .of { color: var(--ink-fade); font-weight: 500; } .locator .step.disabled { color: var(--ink-fade); pointer-events: none; } .locator a .arrow { color: var(--ochre); } /* ---------- Homepage archive index ---------- */ .index-section { padding: 88px 0; border-bottom: 1px solid var(--rule); background: var(--paper); } .index-tabs { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 0; } .index-tabs a { flex: 1 1 auto; text-align: center; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; padding: 16px 12px; border-right: 1px solid var(--rule); background: var(--paper); } .index-tabs a:last-child { border-right: none; } .index-tabs a.active { color: var(--ink); background: var(--paper-2); } .index-tabs a .count { display: block; font-family: var(--serif); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-fade); margin-top: 6px; } .index-list { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--rule); } .index-row { display: grid; grid-template-columns: 56px 1fr 80px; gap: 24px; align-items: baseline; padding: 16px 0 14px; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit; } .index-row:last-child { border-bottom: none; } .index-row:hover { background: var(--paper-2); } .index-row:hover .title { color: var(--ochre); } .index-row .num { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--ochre); } .index-row .title { font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--ink); } .index-row .title em { color: var(--navy); } .index-row .title .cite-inline { display: block; font-size: 13px; color: var(--ink-fade); margin-top: 4px; font-family: var(--sans); letter-spacing: 0.04em; } .index-row .date, .index-row .len { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .index-row .len { text-align: right; } .index-foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute); } .index-foot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--navy); padding-bottom: 2px; } .index-foot a:hover { color: var(--ochre); border-color: var(--ochre); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { body { font-size: 17px; } .shell { padding: 0 24px; } .masthead-row { flex-wrap: wrap; gap: 12px; padding: 18px 0 14px; } .wordmark { font-size: 19px; } .wordmark .sub { display: none; } .utility { font-size: 10.5px; gap: 16px; } .utility a.hide-mob { display: none; } .nav-toggle { display: inline-block; } nav.primary { position: relative; } nav.primary ul { display: none; flex-direction: column; padding: 6px 0 12px; } nav.primary.open ul { display: flex; } nav.primary a { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--rule-soft); } nav.primary li:last-child a { border-bottom: none; } .hero { padding: 56px 0 48px; } h1.hero-title { font-size: 38px; } .hero p.lede { font-size: 17px; } .hero-meta { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; padding-top: 20px; } .section { padding: 56px 0; } .section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; } .section-head .label { padding-top: 8px; display: inline-block; } .section-head h2 { font-size: 26px; } .section-head p { font-size: 16px; } .start-grid { grid-template-columns: 1fr; } .start-item { padding: 22px 0 22px; border-right: none; border-bottom: 1px solid var(--rule); } .start-item:last-child { border-bottom: none; } .features { grid-template-columns: 1fr; gap: 32px; } .feature { border-bottom: 1px solid var(--rule-soft); padding-bottom: 28px; } .feature:last-child { border-bottom: none; padding-bottom: 0; } .feature.lead h3 { font-size: 24px; } .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 36px; } .foot-mission { font-size: 16px; } .colophon { flex-direction: column; align-items: flex-start; gap: 8px; } /* Case page */ .case-head { padding: 40px 0 32px; } .case-title { grid-template-columns: 1fr; gap: 28px; } .case-title h1 { font-size: 34px; } .case-facts { grid-template-columns: 1fr 1fr; } .glance { grid-template-columns: 1fr; margin: 32px 0 40px; } .glance .col { border-right: none; border-bottom: 1px solid var(--rule); } .glance .col:last-child { border-bottom: none; } .case-layout { grid-template-columns: 1fr; gap: 56px; padding: 8px 0 64px; } .prose { font-size: 17.5px; line-height: 1.7; } .prose h2 { font-size: 22px; } .pullquote { margin: 32px 0; padding: 22px 22px 22px 24px; font-size: 19px; } aside.margin { position: static; } .toc ol { grid-template-columns: 1fr; } .opinion-item { grid-template-columns: 1fr; gap: 8px; } .perspectives { grid-template-columns: 1fr; } .perspective-col { border-right: none; border-bottom: 1px solid var(--rule); } .perspective-col:last-child { border-bottom: none; } .sig-bar-row { grid-template-columns: 1fr; gap: 6px; } .sig-bar-row .val { text-align: left; } .source-cols { grid-template-columns: 1fr; gap: 32px; } .sig-overall { flex-direction: column; gap: 10px; } /* Objection page */ .obj-head { padding: 48px 0 36px; } .obj-head h1 { font-size: 32px; } .obj-head .standfirst { font-size: 17px; } .obj-meta { flex-direction: column; gap: 8px; font-size: 11px; } .steelman { margin: 40px 0; } .steelman .head { padding: 12px 18px; flex-direction: column; align-items: flex-start; gap: 4px; } .steelman .body { padding: 22px 22px; font-size: 17px; } .concede { padding: 40px 0; } .concede h2 { font-size: 24px; } .concede ul { grid-template-columns: 1fr; gap: 16px; } .convo .turn { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; } .convo .turn .who { padding-top: 0; } .related { padding: 48px 0 64px; } .related-grid { grid-template-columns: 1fr; } .related-item { padding: 20px 0; border-right: none; border-bottom: 1px solid var(--rule); } .related-item:last-child { border-bottom: none; } /* Index */ .index-section { padding: 56px 0; } .index-tabs { overflow-x: auto; flex-wrap: nowrap; } .index-tabs a { flex: 0 0 auto; padding: 14px 16px; font-size: 10.5px; } .index-tabs a .count { display: none; } .index-row { grid-template-columns: 44px 1fr; gap: 12px 16px; } .index-row .len { grid-column: 2; font-size: 10.5px; text-align: left; } .index-row .title { font-size: 17.5px; } .locator { flex-wrap: wrap; gap: 8px 14px; font-size: 10.5px; } .locator .step.next { margin-left: auto; } } @media (max-width: 480px) { .shell { padding: 0 18px; } h1.hero-title { font-size: 32px; } .case-title h1 { font-size: 28px; } .obj-head h1 { font-size: 26px; } .foot-grid { grid-template-columns: 1fr; } .case-facts { grid-template-columns: 1fr; } } /* =================================================================== PAGE 4/5 — Scripture index & detail =================================================================== */ .refutes-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; white-space: nowrap; } .refutes-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .refutes-badge.pro-choice { color: var(--navy); } .refutes-badge.pro-life-incr { color: var(--ochre); } .refutes-badge.both { color: var(--ink-2); } .refutes-badge.affirms { color: var(--ink-mute); border-style: dashed; } .theme-chip { font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); text-decoration: none; padding: 5px 11px; border: 1px solid var(--rule); background: var(--paper); display: inline-block; } .theme-chip:hover { border-color: var(--ochre); color: var(--ochre); } .verse-block { margin: 40px 0 48px; padding: 36px 40px; background: var(--paper-2); border-left: 2px solid var(--navy); position: relative; } .verse-block .transl { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ochre); margin: 0 0 16px; } .verse-block blockquote { margin: 0 0 14px; font-family: var(--serif); font-size: 23px; line-height: 1.55; color: var(--ink); } .verse-block blockquote sup { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ochre); margin-right: 4px; } .verse-block cite { display: block; font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .target-claim { margin: 0 0 40px; padding: 18px 24px; background: var(--paper); border: 1px solid var(--ink); } .target-claim strong { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-fade); margin-bottom: 10px; } .target-claim p { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink); margin: 0; } .discussion-list { counter-reset: dq; list-style: none; margin: 24px 0 40px; padding: 0; display: flex; flex-direction: column; gap: 20px; } .discussion-list li { counter-increment: dq; position: relative; padding-left: 40px; font-family: var(--serif); font-size: 17.5px; line-height: 1.6; color: var(--ink-2); } .discussion-list li::before { content: "Q" counter(dq); position: absolute; left: 0; top: 1px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--ochre); } .transcript-note { margin: 24px 0 40px; padding: 16px 22px; background: var(--paper-2); border-left: 2px solid var(--ink-fade); font-family: var(--sans); font-size: 13px; color: var(--ink-mute); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .transcript-note strong { color: var(--ink); font-weight: 600; letter-spacing: 0.02em; } .transcript-note .ts { font-family: var(--serif); font-style: italic; color: var(--ink-2); } /* Scripture index rows */ .scripture-row { display: grid; grid-template-columns: 56px 1.6fr 1fr 1fr; gap: 24px; align-items: start; padding: 20px 0 18px; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit; } .scripture-row:last-child { border-bottom: none; } .scripture-row:hover { background: var(--paper-2); } .scripture-row:hover .title { color: var(--ochre); } .scripture-row .num { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--ochre); } .scripture-row .ref-cell .title { display: block; font-family: var(--serif); font-size: 18.5px; line-height: 1.3; color: var(--ink); margin-bottom: 4px; } .scripture-row .ref-cell .claim { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-fade); font-style: italic; } .scripture-row .badges-cell { display: flex; flex-wrap: wrap; gap: 6px; } .scripture-row .themes-cell { display: flex; flex-wrap: wrap; gap: 6px; } .scripture-row .themes-cell span { font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-mute); } .scripture-row .themes-cell span::after { content: " ·"; color: var(--rule); } .scripture-row .themes-cell span:last-child::after { content: ""; } @media (max-width: 900px) { .scripture-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; } .scripture-row .num { display: none; } .verse-block { padding: 24px 22px; } .verse-block blockquote { font-size: 19px; } .target-claim p { font-size: 16px; } } /* =================================================================== PAGE 6/7 — Arguments index & detail =================================================================== */ .category-tag { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); } .mode-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; white-space: nowrap; } .mode-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .mode-badge.offensive { color: var(--navy); } .mode-badge.defensive { color: var(--ochre); } .mode-badge.both { color: var(--ink-2); border-style: dashed; } .point-list { list-style: none; margin: 24px 0 40px; padding: 0; display: flex; flex-direction: column; gap: 16px; } .point-list li { padding-left: 28px; position: relative; font-family: var(--serif); font-size: 17.5px; line-height: 1.6; color: var(--ink-2); } .point-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 14px; height: 1.5px; background: var(--ochre); } .opposing-block { margin: 40px 0 8px; padding: 22px 26px; background: var(--paper-2); border-left: 2px solid var(--ink-fade); } .opposing-block .src-tag { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-fade); margin: 0 0 12px; } .opposing-block p.claim-txt { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--ink); margin: 0; } .ref-list { display: flex; flex-direction: column; gap: 0; margin: 24px 0 40px; border-top: 1px solid var(--rule); } .ref-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); } .ref-row .ref-main a { font-family: var(--serif); font-size: 16px; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; } .ref-row .ref-main a:hover { color: var(--ochre); } .ref-row .ref-meta { font-family: var(--sans); font-size: 12px; color: var(--ink-fade); letter-spacing: 0.02em; margin-top: 4px; } .ref-row .ref-type { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; justify-self: end; } .ref-row .supports { grid-column: 1 / -1; font-family: var(--sans); font-size: 12.5px; color: var(--ink-mute); font-style: italic; margin-top: 2px; } .ref-row .supports strong { font-style: normal; font-weight: 600; color: var(--ink-2); } /* Arguments index rows */ .argument-row { display: grid; grid-template-columns: 56px 1.8fr 1fr; gap: 24px; align-items: start; padding: 20px 0 18px; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit; } .argument-row:last-child { border-bottom: none; } .argument-row:hover { background: var(--paper-2); } .argument-row:hover .title { color: var(--ochre); } .argument-row .num { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--ochre); } .argument-row .arg-cell .title { display: block; font-family: var(--serif); font-size: 18.5px; line-height: 1.3; color: var(--ink); margin-bottom: 4px; } .argument-row .arg-cell .cat { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-fade); } .argument-row .badges-cell { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; } @media (max-width: 900px) { .argument-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; } .argument-row .num { display: none; } .ref-row { grid-template-columns: 1fr; } .ref-row .ref-type { justify-self: start; } .opposing-block { padding: 18px 20px; } .opposing-block p.claim-txt { font-size: 17px; } } /* =================================================================== PAGE 8/9 — Directory index & detail =================================================================== */ .align-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; white-space: nowrap; } .align-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .align-badge.explicit { color: var(--navy); } .align-badge.sympathetic { color: var(--ochre); } .align-badge.mixed { color: var(--ink-2); border-style: dashed; } .status-dot { font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 6px; } .status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-fade); } .status-dot.active::before { background: #3f7d4f; } .status-dot.inactive::before { background: var(--ink-fade); } .featured-strip { margin: 8px 0 44px; padding-top: 4px; } .featured-strip .fs-label { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ochre); margin: 0 0 18px; } .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .featured-card { background: var(--paper); padding: 26px 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; position: relative; } .featured-card:hover { background: var(--paper-2); } .featured-card:hover .f-name { color: var(--ochre); } .featured-card .f-star { position: absolute; top: 22px; right: 22px; font-size: 14px; color: var(--ochre); } .featured-card .f-name { font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--ink); max-width: 22ch; } .featured-card .f-loc { font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-fade); } .featured-card .f-desc { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); margin-top: auto; } /* Directory index rows */ .directory-row { display: grid; grid-template-columns: 56px 1.8fr 1fr 120px; gap: 24px; align-items: start; padding: 20px 0 18px; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit; } .directory-row:last-child { border-bottom: none; } .directory-row:hover { background: var(--paper-2); } .directory-row:hover .title { color: var(--ochre); } .directory-row .num { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--ochre); } .directory-row .dir-cell .title { display: flex; align-items: baseline; gap: 8px; font-family: var(--serif); font-size: 18.5px; line-height: 1.3; color: var(--ink); margin-bottom: 4px; } .directory-row .dir-cell .title .star { color: var(--ochre); font-size: 13px; } .directory-row .dir-cell .desc { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-fade); } .directory-row .loc-cell { font-family: var(--sans); font-size: 13px; color: var(--ink-mute); line-height: 1.5; } .directory-row .loc-cell .scope { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-fade); margin-top: 3px; } .directory-row .badge-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .service-chip { font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-mute); padding: 5px 11px; border: 1px solid var(--rule); background: var(--paper); display: inline-block; } .contact-panel { margin: 24px 0 40px; padding: 24px 26px; background: var(--paper-2); border-left: 2px solid var(--navy); } .contact-panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; } .contact-panel dt { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-fade); white-space: nowrap; padding-top: 2px; } .contact-panel dd { margin: 0; font-family: var(--sans); font-size: 14.5px; color: var(--ink-2); } .contact-panel dd a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule); } .contact-panel dd a:hover { color: var(--ochre); border-color: var(--ochre); } .indicator-list { list-style: none; margin: 20px 0 40px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .indicator-list li { padding-left: 24px; position: relative; font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--ink-2); } .indicator-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; font-size: 13px; color: var(--navy); } @media (max-width: 900px) { .directory-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; } .directory-row .num { display: none; } .featured-grid { grid-template-columns: 1fr; } .contact-panel dl { grid-template-columns: 1fr; gap: 4px 0; } .contact-panel dt { margin-top: 8px; } } /* Print-aware accents */ @media print { body { background: white; } nav.primary, .utility, .view-options { display: none; } } /* ---------- Site additions (not in mockup) ---------- */ nav.primary a.active { color: var(--ochre); } .index-row.hidden, .scripture-row.hidden, .argument-row.hidden, .directory-row.hidden { display: none; } .meta-line { font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-fade); margin: 0 0 12px; } .badge-strip { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .title-note { font-family: var(--sans); font-size: 13px; color: var(--ink-fade); margin: 10px 0 0; max-width: 40rem; line-height: 1.5; } .verify-badge { display: inline-block; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border: 1px dashed var(--ochre); color: var(--ochre); white-space: nowrap; } .verify-badge.ok { border-style: solid; border-color: var(--rule); color: var(--ink-mute); } .law-cite { font-family: var(--sans); font-size: 12.5px; color: var(--ink-fade); letter-spacing: 0.02em; } .law-cite a { color: var(--navy); } /* ---------- Legislation: deep-research documents ---------- */ .verify-badge.semi { border-style: solid; border-color: var(--ochre-soft); color: var(--ochre); } .verify-badge.conflict { border-color: var(--alert); color: var(--alert); } .verify-badge.na { border-style: solid; border-color: var(--rule); color: var(--ink-fade); } .verify-badge.conf { border: none; padding: 3px 0; color: var(--ink-fade); } .mrs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule); margin: 20px 0 8px; } .mrs > div { background: var(--paper); padding: 12px 14px; min-width: 0; } .mrs h4 { margin: 0 0 6px; font: 600 10px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-fade); } .mrs p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink-2); } .finding-verdict { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0 0 10px; } h3 + .finding-verdict { margin-top: -6px; } details.finding-more { margin: 4px 0 18px; } details.finding-more > summary { cursor: pointer; display: inline-block; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); border-bottom: 1px solid var(--rule); padding-bottom: 2px; list-style: none; } details.finding-more > summary::-webkit-details-marker { display: none; } details.finding-more > summary::before { content: '+ '; color: var(--ochre); } details.finding-more[open] > summary::before { content: '− '; } details.finding-more > summary:hover { color: var(--ochre); } details.finding-more[open] { margin-bottom: 24px; } details.finding-more[open] > summary { margin-bottom: 14px; } .finding-analysis { border-left: 2px solid var(--rule); padding: 2px 0 2px 20px; margin: 20px 0; } .finding-analysis .fa-label { margin: 0 0 6px; font: 600 10px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-fade); } .finding-analysis p { font-size: 16px; color: var(--ink-mute); } .finding-note { font-size: 15px; color: var(--ink-mute); font-style: italic; } .finding-note strong { font-style: normal; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-fade); margin-right: 6px; } .law-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-family: var(--sans); font-size: 14.5px; } .law-table th { text-align: left; font: 600 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-fade); padding: 0 14px 10px 0; border-bottom: 1px solid var(--ink); } .law-table td { vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule-soft); line-height: 1.5; } .law-table td .law-cite { display: block; margin-top: 6px; } .law-timeline { list-style: none; margin: 20px 0; padding: 0; } .law-timeline li { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--rule-soft); } .law-timeline .date { font: 600 12px/1.7 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ochre); } .law-timeline p { margin: 0 0 6px; font-size: 16px; } .law-authorities { list-style: none; margin: 20px 0; padding: 0; } .law-authorities li { padding: 14px 0; border-top: 1px solid var(--rule-soft); font-size: 16.5px; } .law-authorities .why { margin: 4px 0 0; color: var(--ink-mute); font-size: 15px; } .index-row.is-pending { opacity: 0.5; cursor: default; } .index-row.is-pending:hover { background: transparent; } @media (max-width: 860px) { .mrs { grid-template-columns: repeat(2, 1fr); } .law-timeline li { grid-template-columns: 1fr; gap: 4px; } } /* ---------- "For your AI" homepage CTA ---------- */ .ai-cta { border: 1px solid var(--rule); background: var(--paper-2); } .ai-cta-head { background: var(--navy-deep); color: #e8e2d2; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; padding: 12px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .ai-cta-head .src { color: var(--ochre-soft); font-weight: 500; letter-spacing: 0.14em; } .ai-cta-body { padding: 30px 32px 20px; } .ai-prompt p { font-family: var(--serif); font-size: 17.5px; line-height: 1.62; color: var(--ink-2); margin: 0 0 15px; } .ai-prompt p:last-child { margin-bottom: 0; } .ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 8px 32px 28px; } .ai-btn { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .ai-btn.primary { appearance: none; border: 1px solid var(--navy); background: var(--navy); color: var(--paper); padding: 12px 22px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .ai-btn.primary:hover { background: var(--navy-2); border-color: var(--navy-2); } .ai-btn.primary.is-copied { background: var(--ochre); border-color: var(--ochre); color: var(--paper); } .ai-btn.link { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--navy); padding-bottom: 3px; } .ai-btn.link:hover { color: var(--ochre); border-color: var(--ochre); } .ai-hint { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--ink-mute); margin: 0; padding: 16px 32px 24px; border-top: 1px solid var(--rule-soft); } .ai-hint a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule); } .ai-hint a:hover { border-color: var(--navy); } .ai-hint code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; background: var(--paper-3); padding: 1px 5px; border-radius: 2px; } @media (max-width: 900px) { .ai-cta-body { padding: 24px 22px 16px; } .ai-prompt p { font-size: 16.5px; } .ai-actions { padding: 8px 22px 24px; gap: 14px 20px; } .ai-btn.primary { width: 100%; text-align: center; } .ai-hint { padding: 16px 22px 22px; } } /* View Options — "Use with AI" extras */ .vo-more { display: inline-block; margin-top: 14px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; } .vo-more:hover { color: var(--ochre); border-color: var(--ochre); } /* Inline monospace chip (e.g. a file extension in prose) */ .ai-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; background: var(--paper-3); padding: 1px 5px; border-radius: 2px; }