/* public/design-system.css */ /* Latin: Fraunces (display serif) + Inter + JetBrains Mono. Indic scripts: Tiro family (designed to pair with classical Latin serifs) for Devanagari, Tamil, Telugu, Kannada, Bangla, Gurmukhi. Noto Serif fills the gaps Tiro doesn't cover (Malayalam, Gujarati, Oriya). The actual woff2 files only download for the language(s) currently rendered, so the upfront cost is a small CSS import. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Tiro+Devanagari+Hindi:ital@0;1&family=Tiro+Devanagari+Marathi:ital@0;1&family=Tiro+Tamil:ital@0;1&family=Tiro+Telugu:ital@0;1&family=Tiro+Kannada:ital@0;1&family=Tiro+Bangla:ital@0;1&family=Tiro+Gurmukhi&family=Noto+Serif+Malayalam:wght@400;700&family=Noto+Serif+Gujarati:wght@400;700&family=Noto+Serif+Oriya:wght@400;700&display=swap'); /* ── TOKENS ──────────────────────────────────────────────────────────────── */ :root { /* Paper reading surface */ --paper: #f5f0e8; --paper-rail: #ede5d9; --paper-callout: #f0e6d6; /* Ink (warm dark brown — not pure black) */ --ink: #1a1410; --ink-soft: #3d2f24; --ink-muted: #8a7560; --ink-faint: #b5a594; /* Accent — saffron orange */ --accent: #d4541e; --accent-deep: #b8431a; --accent-soft: #f9d9c5; /* Dark surfaces (homepage hero only) */ --dark: #1a1208; --dark-mid: #2d2010; /* Semantic states */ --color-open: #138808; --color-open-bg: rgba(19,136,8,0.10); --color-adopted: #8250df; --color-adopted-bg: rgba(130,80,223,0.10); --color-rejected: #cf222e; --color-rejected-bg: rgba(207,34,46,0.10); --color-pending: #d4a017; --color-comment: #5a8c6e; /* Lines */ --line: rgba(26,20,16,0.10); --line-soft: rgba(26,20,16,0.05); /* Typography */ --serif: 'Fraunces', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', Menlo, Consolas, monospace; /* Radius */ --radius: 2px; } /* ── Indic typography ───────────────────────────────────────────────────────── When the page language is set (i18n.js sets on switch), override --serif so headings, hero copy, body prose, etc. all render in a font that has the right script. Fraunces stays as Latin fallback for any English brand names mixed into the local-script copy. --mono is also redirected to the same serif: JetBrains Mono has no glyphs for Devanagari, Tamil, Telugu, Kannada, Malayalam, Bengali, Gujarati, Gurmukhi, or Oriya, and the system fallback is uniformly bad. We'd rather show an editorial serif for eyebrows / labels / meta in Indic mode than a broken monospace fallback. JetBrains Mono is preserved everywhere the language is English. */ :lang(hi) { --serif: 'Tiro Devanagari Hindi', 'Fraunces', Georgia, serif; --mono: 'Tiro Devanagari Hindi', 'JetBrains Mono', Menlo, monospace; } :lang(mr) { --serif: 'Tiro Devanagari Marathi', 'Fraunces', Georgia, serif; --mono: 'Tiro Devanagari Marathi', 'JetBrains Mono', Menlo, monospace; } :lang(ta) { --serif: 'Tiro Tamil', 'Fraunces', Georgia, serif; --mono: 'Tiro Tamil', 'JetBrains Mono', Menlo, monospace; } :lang(te) { --serif: 'Tiro Telugu', 'Fraunces', Georgia, serif; --mono: 'Tiro Telugu', 'JetBrains Mono', Menlo, monospace; } :lang(kn) { --serif: 'Tiro Kannada', 'Fraunces', Georgia, serif; --mono: 'Tiro Kannada', 'JetBrains Mono', Menlo, monospace; } :lang(bn) { --serif: 'Tiro Bangla', 'Fraunces', Georgia, serif; --mono: 'Tiro Bangla', 'JetBrains Mono', Menlo, monospace; } :lang(pa) { --serif: 'Tiro Gurmukhi', 'Fraunces', Georgia, serif; --mono: 'Tiro Gurmukhi', 'JetBrains Mono', Menlo, monospace; } :lang(ml) { --serif: 'Noto Serif Malayalam', 'Fraunces', Georgia, serif; --mono: 'Noto Serif Malayalam', 'JetBrains Mono', Menlo, monospace; } :lang(gu) { --serif: 'Noto Serif Gujarati', 'Fraunces', Georgia, serif; --mono: 'Noto Serif Gujarati', 'JetBrains Mono', Menlo, monospace; } :lang(od) { --serif: 'Noto Serif Oriya', 'Fraunces', Georgia, serif; --mono: 'Noto Serif Oriya', 'JetBrains Mono', Menlo, monospace; } /* ── RESET ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; } button { cursor: pointer; } img, svg { display: block; } /* ── NAV — paper variant (all interior pages) ───────────────────────────── */ .ds-nav { background: var(--paper); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; position: sticky; top: 0; z-index: 200; } .ds-nav-left { display: flex; align-items: center; gap: 14px; } .ds-nav-right { display: flex; align-items: center; gap: 16px; } .ds-nav-logo { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; } .ds-nav-logo span { color: var(--accent); } .ds-nav-platform-link { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--ink-muted); text-decoration: none; border-left: 1px solid var(--line); padding-left: 14px; transition: color 0.15s; } .ds-nav-platform-link:hover { color: var(--accent); } /* ── NAV — dark variant (homepage hero only) ─────────────────────────────── */ .ds-nav--dark { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.08); } .ds-nav--dark .ds-nav-logo { color: rgba(255,255,255,0.92); } .ds-nav--dark .ds-nav-platform-link { color: rgba(255,255,255,0.40); border-left-color: rgba(255,255,255,0.15); } .ds-nav--dark .ds-nav-platform-link:hover { color: var(--accent); } /* ── NAV — BEM-style alias used by editorial-panel / scholars / profile / admin pages ── */ .ds-nav__inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; } .ds-nav__brand { font-family: var(--serif); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; line-height: 1; } .ds-nav__brand em { color: var(--accent); font-style: normal; font-weight: 900; } .ds-nav__links { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; } .ds-nav__link { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); text-decoration: none; transition: color 0.15s; } .ds-nav__link:hover, .ds-nav__link[aria-current="page"] { color: var(--ink); } .ds-nav__link--external { color: var(--ink-muted); } /* ── MODE TABS ───────────────────────────────────────────────────────────── */ .ds-mode-tabs { display: flex; background: var(--paper-rail); padding: 3px; border-radius: var(--radius); gap: 0; } .ds-mode-tab { padding: 6px 14px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); background: transparent; border: none; cursor: pointer; border-radius: 1px; transition: all 0.15s; white-space: nowrap; } .ds-mode-tab:hover { color: var(--ink); } .ds-mode-tab.active { background: var(--ink); color: var(--paper); } /* ── VERSION PILL ROW ────────────────────────────────────────────────────── */ .ds-version-row { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--paper-rail); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 32px; flex-wrap: wrap; } .ds-version-label { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.10em; flex-shrink: 0; } .ds-version-pills { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; } .ds-version-pill { font-family: var(--mono); font-size: 11px; padding: 5px 10px; background: var(--paper); color: var(--ink-soft); border-radius: var(--radius); text-decoration: none; border: 1px solid transparent; transition: all 0.15s; } .ds-version-pill:hover { border-color: var(--ink-soft); } .ds-version-pill.current { background: var(--ink); color: var(--paper); } .ds-version-changes { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; flex-shrink: 0; } .ds-version-changes:hover { color: var(--accent); text-decoration-color: var(--accent); } /* ── ARTICLE HEADER ──────────────────────────────────────────────────────── */ .ds-article-eyebrow { display: inline-block; background: var(--accent); color: var(--paper); padding: 6px 12px; font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 24px; border-radius: var(--radius); } .ds-article-title { font-family: var(--serif); font-size: 52px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 24px; } .ds-article-subtitle { font-family: var(--serif); font-size: 19px; line-height: 1.5; font-style: italic; color: var(--ink-soft); margin-bottom: 24px; } .ds-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 40px; } .ds-article-meta-item { display: flex; align-items: center; gap: 6px; } /* ── BODY CONTENT ────────────────────────────────────────────────────────── */ .ds-section-heading { font-family: var(--serif); font-size: 28px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); border-left: 4px solid var(--accent); padding-left: 16px; margin-top: 56px; margin-bottom: 24px; } .ds-paragraph { font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--ink); margin-bottom: 24px; } .ds-drop-cap::first-letter { font-family: var(--serif); font-size: 80px; font-weight: 700; float: left; line-height: 0.85; margin: 8px 12px 0 -2px; color: var(--accent); } /* ── CALLOUT ─────────────────────────────────────────────────────────────── */ .ds-callout { background: var(--paper-callout); border-left: 4px solid var(--accent); padding: 24px 28px; margin: 32px 0; border-radius: 0 var(--radius) var(--radius) 0; } .ds-callout-eyebrow { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-weight: 500; } .ds-callout p { font-family: var(--serif); font-size: 17px; line-height: 1.65; color: var(--ink); } .ds-callout strong { font-weight: 700; } /* ── BUTTONS ─────────────────────────────────────────────────────────────── */ .ds-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-family: var(--sans); font-size: 13px; font-weight: 500; border-radius: var(--radius); border: none; cursor: pointer; text-decoration: none; transition: all 0.15s; white-space: nowrap; letter-spacing: 0.01em; } .ds-btn-primary, .ds-btn--primary { background: var(--accent); color: var(--paper); } .ds-btn-primary:hover, .ds-btn--primary:hover { background: var(--accent-deep); } .ds-btn-secondary, .ds-btn--secondary { background: var(--ink); color: var(--paper); } .ds-btn-secondary:hover, .ds-btn--secondary:hover { background: var(--ink-soft); } .ds-btn-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); } .ds-btn-ghost:hover { border-color: var(--ink-soft); color: var(--ink); } .ds-btn-sm { padding: 6px 12px; font-size: 12px; } .ds-btn-lg { padding: 14px 24px; font-size: 15px; } /* ── BADGES ──────────────────────────────────────────────────────────────── */ .ds-badge { display: inline-block; font-family: var(--mono); font-size: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.10em; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-muted); vertical-align: 1px; } .ds-badge-editor { background: var(--accent-soft); color: var(--accent-deep); border-color: rgba(212,84,30,0.3); } .ds-badge-invited { background: var(--paper-rail); color: var(--ink-soft); } .ds-badge-founding { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Status badges for amendments */ .ds-status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.10em; padding: 3px 8px; border-radius: var(--radius); } .ds-status-open { color: var(--color-open); background: var(--color-open-bg); } .ds-status-adopted { color: var(--color-adopted); background: var(--color-adopted-bg); } .ds-status-rejected { color: var(--color-rejected);background: var(--color-rejected-bg); } .ds-status-pending { color: var(--color-pending); background: rgba(212,160,23,0.10); } .ds-status-ready { color: var(--paper); background: var(--accent); } /* ── DELIBERATION COMPONENTS ─────────────────────────────────────────────── */ .ds-activity-card { background: var(--paper); border: 1px solid var(--line); padding: 14px; margin-bottom: 10px; cursor: pointer; transition: border-color 0.15s; border-radius: var(--radius); } .ds-activity-card:hover { border-color: var(--accent); } .ds-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .ds-card-type { font-family: var(--mono); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; padding: 3px 7px; border-radius: var(--radius); color: var(--paper); } .ds-card-type-amendment { background: var(--accent); } .ds-card-type-comment { background: var(--color-comment); } .ds-card-type-challenge { background: var(--accent-deep); } .ds-card-status { font-family: var(--mono); font-size: 9px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.10em; } .ds-card-title { font-family: var(--serif); font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 10px; color: var(--ink); } .ds-card-author { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .ds-card-avatar { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #c89b6a, #8b5e3c); flex-shrink: 0; overflow: hidden; } .ds-card-avatar img { width: 100%; height: 100%; object-fit: cover; } .ds-card-author-info { font-family: var(--sans); font-size: 11px; color: var(--ink-muted); line-height: 1.3; } .ds-card-author-name { color: var(--ink-soft); font-weight: 500; } .ds-card-progress { display: flex; gap: 10px; font-family: var(--mono); font-size: 9px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 8px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; } .ds-progress-item { display: flex; align-items: center; gap: 4px; } .ds-progress-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; } .ds-progress-dot.met { background: var(--color-open); } .ds-progress-dot.pending { background: var(--color-pending); } .ds-scope-toggle { display: flex; background: var(--paper-rail); padding: 3px; border-radius: var(--radius); margin-bottom: 16px; } .ds-scope-tab { flex: 1; padding: 6px 8px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--ink-muted); background: transparent; border: none; cursor: pointer; border-radius: 1px; transition: all 0.15s; text-align: center; } .ds-scope-tab:hover { color: var(--ink); } .ds-scope-tab.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.05); } /* ── USER + LANG ─────────────────────────────────────────────────────────── */ .ds-user-pill { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 12px; color: var(--ink-soft); font-weight: 500; text-decoration: none; } .ds-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #c89b6a, #8b5e3c); overflow: hidden; flex-shrink: 0; } .ds-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .ds-lang-select { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 6px 10px; font-family: var(--mono); font-size: 10px; border-radius: var(--radius); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; } /* ── RIGHT RAIL ──────────────────────────────────────────────────────────── */ .ds-rail-section { margin-bottom: 28px; } .ds-rail-eyebrow { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-muted); margin-bottom: 12px; font-weight: 500; } .ds-rail-button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--sans); font-size: 13px; color: var(--ink-soft); cursor: pointer; text-decoration: none; transition: all 0.15s; margin-bottom: 6px; text-align: left; } .ds-rail-button:hover { border-color: var(--ink-soft); color: var(--ink); } .ds-rail-button-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .ds-rail-stat-num { font-family: var(--serif); font-size: 28px; font-weight: 700; line-height: 1; color: var(--ink); } .ds-rail-stat-label { font-family: var(--sans); font-size: 12px; color: var(--ink-muted); } /* ── LAYOUT HELPERS ──────────────────────────────────────────────────────── */ .ds-three-col { display: grid; grid-template-columns: 240px 1fr 260px; min-height: calc(100vh - 65px); max-width: 1480px; margin: 0 auto; } .ds-content-col { padding: 32px 56px 120px; max-width: 740px; margin: 0 auto; width: 100%; } .ds-toc-col { padding: 40px 24px 40px 32px; position: sticky; top: 65px; height: calc(100vh - 65px); overflow-y: auto; } .ds-rail-col { padding: 40px 32px 40px 24px; position: sticky; top: 65px; height: calc(100vh - 65px); overflow-y: auto; } /* ── AMEND MODE AFFORDANCE ───────────────────────────────────────────────── */ .ds-paragraph-wrapper { position: relative; margin-bottom: 24px; } .ds-amend-affordance { position: absolute; left: -36px; top: 6px; width: 24px; height: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; } .ds-amend-affordance svg { width: 12px; height: 12px; stroke: var(--ink-soft); fill: none; stroke-width: 2; } .ds-amend-affordance:hover { border-color: var(--accent); background: var(--accent); } .ds-amend-affordance:hover svg { stroke: var(--paper); } body.mode-amend .ds-paragraph-wrapper:hover .ds-amend-affordance { display: flex; } /* ── ACTIVITY MARKERS ────────────────────────────────────────────────────── */ .ds-activity-markers { display: none; position: absolute; right: -180px; top: 4px; flex-direction: column; gap: 4px; width: 160px; } body.mode-comment .ds-paragraph-wrapper.has-activity .ds-activity-markers, body.mode-amend .ds-paragraph-wrapper.has-activity .ds-activity-markers { display: flex; } .ds-activity-marker { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--paper); border: 1px solid var(--line); font-family: var(--mono); font-size: 10px; color: var(--ink-soft); cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; width: fit-content; transition: all 0.15s; border-radius: var(--radius); } .ds-activity-marker:hover { border-color: var(--accent); color: var(--accent-deep); } .ds-marker-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .ds-marker-dot.amendment { background: var(--accent); } .ds-marker-dot.comment { background: var(--color-comment); } .ds-marker-dot.challenge { background: var(--accent-deep); } /* Deliberate mode paragraph highlights */ body.mode-comment .ds-paragraph-wrapper.has-activity { cursor: pointer; } body.mode-comment .ds-paragraph-wrapper.has-activity:hover { background: rgba(212,84,30,0.04); border-radius: var(--radius); } body.mode-comment .ds-paragraph-wrapper.is-active, body.mode-amend .ds-paragraph-wrapper.is-active { background: var(--accent-soft); margin-left: -16px; margin-right: -16px; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; } /* ── TABLE OF CONTENTS ───────────────────────────────────────────────────── */ .ds-toc-eyebrow { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-muted); margin-bottom: 24px; font-weight: 500; } .ds-toc-list { list-style: none; } .ds-toc-item { padding: 10px 0 10px 16px; font-family: var(--sans); font-size: 14px; color: var(--ink-soft); border-left: 3px solid transparent; margin-left: -16px; cursor: pointer; transition: color 0.15s; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ds-toc-item:hover { color: var(--ink); } .ds-toc-item.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; } .ds-toc-clauses { list-style: none; margin: 4px 0; } .ds-toc-clause { padding: 6px 0 6px 32px; font-family: var(--sans); font-size: 13px; color: var(--ink-muted); cursor: pointer; transition: color 0.15s; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ds-toc-clause:hover { color: var(--ink-soft); } .ds-toc-clause.active { color: var(--accent-deep); font-weight: 500; } .ds-toc-activity { background: var(--accent); color: var(--paper); font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 8px; font-weight: 500; display: none; flex-shrink: 0; } body.mode-comment .ds-toc-activity, body.mode-amend .ds-toc-activity { display: inline-block; } /* ── UTILITY ─────────────────────────────────────────────────────────────── */ .ds-eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-muted); } .ds-divider { border: none; border-top: 1px solid var(--line); margin: 24px 0; } .ds-surface { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } /* ── MOBILE ──────────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .ds-three-col { grid-template-columns: 240px 1fr; } .ds-rail-col { display: none; } } @media (max-width: 768px) { .ds-three-col { grid-template-columns: 1fr; } .ds-toc-col { display: none; } .ds-nav { padding: 12px 20px; } .ds-content-col { padding: 24px 20px 80px; } .ds-article-title { font-size: 32px; } .ds-section-heading { font-size: 24px; } .ds-paragraph { font-size: 17px; } .ds-drop-cap::first-letter { font-size: 64px; } }