and the footer (§18g). padding-left compensates the tracking added after the final letter, so the word sits optically centred instead of half a letter-space to the left. */ .site-header{padding:34px 24px 0;text-align:center} .site-wordmark{display:inline-block;margin:0 0 20px;padding-left:.28em;font:400 20px/1 Spectral,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);text-decoration:none} .site-wordmark:hover{color:var(--ink);text-decoration:none} /* When the switch has tripped, the banner sits above the masthead and carries its own weight; the header tightens so the two do not read as one stack. */ p.site-banner + .site-header{padding-top:26px} .site-nav{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;font:400 11px/1 Spectral,serif;letter-spacing:.24em;text-transform:uppercase} .site-nav a{text-decoration:none;color:var(--dim)}.site-nav a:hover{color:var(--ink)} main{max-width:38rem;margin:0 auto;padding:0 24px 120px} /* ---- letter ---------------------------------------------------------------- */ .home-feature{padding-top:8px} .letter-head{text-align:center;margin-bottom:52px} /* The sigil is a server-rendered inline SVG (see the {% sigil %} tag). This box only sizes and centres it; all marks come from the SVG itself. An empty .letter-sigil (unpublished letter, no seed) collapses to nothing. */ .letter-sigil{display:block;width:30px;height:30px;margin:0 auto 26px} .letter-sigil:empty{display:none} .letter-sigil svg{display:block;width:100%;height:100%} .letter-title{margin:0 0 14px;font:400 33px/1.22 Spectral,serif;letter-spacing:-.01em} .letter-addressed{margin:0;font:italic 300 17px/1.4 Spectral,serif;color:var(--dim)} .letter-body{text-wrap:pretty} .letter-body p{margin:0 0 1.5em} .letter-body p+p{text-indent:1.6em;margin-top:-1.5em} .letter-body p:first-child::first-letter{float:left;font-size:66px;line-height:.82;padding:6px 10px 0 0;font-weight:400} .letter-meta{margin-top:64px;text-align:center} .letter-signature{margin:0 0 40px;font:italic 400 21px/1.3 Spectral,serif} .letter-stamp{margin:0;padding-top:30px;border-top:1px solid var(--rule);display:grid;gap:18px} .letter-stamp dt{font:400 9px/1 Spectral,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:6px} .letter-stamp dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink)} .letter-stamp dd a{color:var(--ink)} .epoch-marker{color:var(--dim);font-style:italic;max-width:30rem;margin:0 auto!important} .letter-chain{display:flex;justify-content:center;gap:12px;align-items:baseline;flex-wrap:wrap} .chain-hash{font:400 12px/1 "IBM Plex Mono",monospace;color:var(--dim)} .letter-license{margin:34px 0 0;font:400 9px/1 Spectral,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)} /* ---- prediction (inside .letter-meta) -------------------------------------- A ruled aside under the stamp, labelled in the same small caps as everything else. data-status tints only the status line — the one place in the archive where colour carries meaning, because "correct" and "incorrect" are the one pair of words a reader must not confuse. Never tint the statement itself. */ .prediction{margin:34px auto 0;max-width:30rem;padding-top:22px;border-top:1px solid var(--rule)} .prediction::before{content:"Prediction";display:block;margin-bottom:12px;font:400 9px/1 Spectral,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)} .prediction-statement{margin:0;font:300 18px/1.6 Spectral,serif;color:var(--ink);text-wrap:pretty} .prediction-date{margin:10px 0 0;font:400 13px/1.5 Spectral,serif;letter-spacing:.06em;color:var(--dim)} .prediction-resolution{margin:12px 0 0;font:italic 300 15px/1.6 Spectral,serif;color:var(--dim)} .prediction[data-status=correct] .prediction-date{color:var(--verdict-correct)} .prediction[data-status=incorrect] .prediction-date{color:var(--verdict-incorrect)} .prediction[data-status=ambiguous] .prediction-date{color:var(--verdict-ambiguous)} .prediction[data-status=unresolvable] .prediction-date{color:var(--verdict-unresolvable)} .home-invitation{margin-top:82px;padding-top:34px;border-top:1px solid var(--rule);text-align:center;font-size:17px;color:var(--dim)} .home-invitation p{margin:0 auto .9em;max-width:30rem} /* ---- page-prose ----------------------------------------------------------- RULING (amends §18): .page-prose is a long-form container, not a centred card. Centring is reserved for the title and the single lede paragraph that follows it; everything after reads left-aligned at the letter measure. This is why /guidelines/, /terms/, /succession/ and the honesty page need no variant class — the same rule serves a two-line tombstone and a 2,000-word policy page. Utility pages simply never reach the third element. */ .page-prose{text-wrap:pretty} .page-prose h1{margin:0 0 16px;font:400 30px/1.2 Spectral,serif;text-align:center} .page-prose h1+p{margin:0 0 1.1em;color:var(--dim);text-align:center;max-width:32rem;margin-inline:auto} .page-prose h2{margin:2.2em 0 .6em;font:400 21px/1.3 Spectral,serif;color:var(--ink)} .page-prose p{margin:0 0 1.1em;color:var(--ink)} .page-prose ul{margin:0 0 1.3em;padding-left:1.4em;list-style:none} .page-prose li{margin:0 0 .5em;position:relative} .page-prose li::before{content:"·";position:absolute;left:-1.1em;color:var(--faint)} .page-prose li time{color:var(--dim);font-style:italic} .page-prose strong{font-weight:500} .page-prose code{font:400 12px/1.5 "IBM Plex Mono",monospace;color:var(--dim);word-break:break-all} /* Pagination and other bare nav rows borrowing .page-prose. */ nav.page-prose{display:flex;justify-content:center;align-items:baseline;gap:22px;margin-top:34px;font:400 11px/1 Spectral,serif;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)} nav.page-prose a{text-decoration:none;color:var(--dim)} nav.page-prose a:hover{color:var(--ink)} /* Search form: bare form/label/input/button inside .page-prose. RULING: it adopts the composer's field treatment (a ruled line to write on) without adopting its class names — one input, no borrowed markup. */ .page-prose form{display:grid;justify-items:center;gap:14px;max-width:26rem;margin:26px auto 0} .page-prose label{font:400 9px/1.5 Spectral,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)} .page-prose input[type=search]{-webkit-appearance:none;appearance:none;width:100%;font:300 20px/1.6 Spectral,serif;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;padding:8px 0;text-align:center} .page-prose input[type=search]:focus{outline:0;border-color:var(--ink)} .page-prose button{font:400 11px/1 Spectral,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:14px 34px;cursor:pointer} .page-prose button:hover{background:var(--ink);color:var(--paper)} /* Endowment progress bar (spec §12.3). A ruled line that fills with ink and then disappears for good — the server stops rendering it once reached. */ .page-prose progress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:2px;margin:0 0 1.6em;border:0;background:var(--rule)} .page-prose progress::-webkit-progress-bar{background:var(--rule)} .page-prose progress::-webkit-progress-value{background:var(--ink)} .page-prose progress::-moz-progress-bar{background:var(--ink)} /* ---- archive index --------------------------------------------------------- */ .archive-list{list-style:none;margin:0;padding:0} .archive-entry{padding:30px 0;border-bottom:1px solid var(--rule);text-align:center} .archive-entry a{display:block;font:400 22px/1.35 Spectral,serif;text-decoration:none;max-width:26rem;margin:0 auto 10px} .archive-entry a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--rule)} .archive-entry p{margin:0;font:italic 300 14px/1.5 Spectral,serif;color:var(--dim)} /* Epoch frontier and closing notes — used in .archive-entry rows and standalone. */ .epoch-note{margin:12px auto 0!important;max-width:28rem;font:italic 300 15px/1.6 Spectral,serif;color:var(--dim)} .epoch-note+.epoch-note{margin-top:8px!important} /* ---- composer -------------------------------------------------------------- */ .composer{display:flex;flex-direction:column;gap:34px} .composer-field{display:flex;flex-direction:column;gap:10px} .composer-label{font:400 9px/1.5 Spectral,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)} .composer input[type=text],.composer input[type=date],.composer-body{font:300 19px/1.7 Spectral,serif;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:8px 0;width:100%;border-radius:0} .composer input[type=date]{-webkit-appearance:none;appearance:none;font-size:17px;max-width:16rem} .composer input[type=text]:focus,.composer input[type=date]:focus,.composer-body:focus{outline:0;border-color:var(--ink)} .composer-body{min-height:300px;resize:vertical;border:1px solid var(--rule);padding:20px 22px;background:#fff} .composer-count{margin:0;font:italic 300 14px/1 Spectral,serif;color:var(--dim)} .composer-options{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .composer-options legend{padding:0;margin-bottom:14px;font:400 9px/1 Spectral,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)} .composer-options label,.composer-consent label{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.5} /* The tags fieldset is the one long list of short options: twelve checkboxes set in a single column would out-measure the letter itself. Columns only when the fieldset actually contains checkboxes — the radio fieldsets keep their single column, where each option is a sentence. */ .composer-options:has(input[type=checkbox]){display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:12px 24px;padding-top:26px} /* A legend in a grid fieldset is taken out of flow, so its own margin does nothing — the fieldset's padding-top is what opens the space. */ .composer-options:has(input[type=checkbox]) legend{margin-bottom:0} /* The prediction fieldset nests .composer-field children; give them room. */ .composer-options .composer-field{margin-top:6px} .composer input[type=radio],.composer input[type=checkbox]{accent-color:var(--ink);margin-top:5px;flex:none} .composer-consent{padding-top:26px;border-top:1px solid var(--rule);color:var(--dim);font-style:italic} .composer-error{margin:0;font:italic 300 15px/1.5 Spectral,serif;color:var(--verdict-incorrect)} .composer>.composer-error{padding-bottom:6px;border-bottom:1px solid var(--verdict-incorrect)} .composer-submit{align-self:center;font:400 11px/1 Spectral,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:18px 44px;cursor:pointer} .composer-submit:hover{background:var(--ink);color:var(--paper)} /* Honeypot: the classless hidden div stays hidden even if a browser ignores [hidden] because of a display rule elsewhere. */ .composer [hidden]{display:none!important} /* ---- footer ---------------------------------------------------------------- */ .site-footer{padding:0 24px 70px} .site-footer p{max-width:38rem;margin:0 auto;padding-top:26px;border-top:1px solid var(--rule);text-align:center;font:italic 300 14px/1.5 Spectral,serif;color:var(--dim)} /* Ten links separated by literal "·" text nodes in the template. Deliberately NOT flex — flex would promote each separator to its own box and the row would break in the wrong places. Inline flow lets it wrap as a sentence. */ .site-footer nav{max-width:34rem;margin:14px auto 0;text-align:center;font:400 10px/2.2 Spectral,serif;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)} .site-footer nav a{color:var(--dim);text-decoration:none;white-space:nowrap} .site-footer nav a:hover{color:var(--ink)} @media (max-width:640px){ main{padding-bottom:80px} .letter-body p:first-child::first-letter{font-size:52px} .letter-title{font-size:28px} .page-prose h1{font-size:26px} .site-wordmark{font-size:17px;margin-bottom:18px} .site-nav{gap:20px} } @media print{ /* The nav, footer and banner go; the wordmark stays. A printed letter should say where it came from, and the name is the shortest way to say it. */ .site-nav,.site-footer,p.site-banner,.home-invitation{display:none} .site-header{padding:0 0 26px} .site-wordmark{font-size:13px;margin:0;color:#22211D} body{background:#fff} main{max-width:none;padding:0} }

/* archive.css — owned by the design session (spec §18). Delivery 3, 2026-08-12. * Direction: Vellum. For Dear Successor (dearsuccessor.org, spec §5). * Complete file — replaces delivery 2 wholesale, not a patch. * Styles the templates as they stand at P3 verbatim; no markup changes required. * * Fonts are self-hosted (static/css/fonts.css, linked ahead of this file). * This stylesheet makes no external requests of any kind. */ :root{ /* Vellum palette. The archive has NO accent hue: emphasis is weight, italics, space and small caps. */ --paper:#FBF9F4; /* page ground, never pure white */ --paper-well:#F2EEE2; /* faint warm ground: banner, well, sheet edges */ --ink:#22211D; /* body ink, never pure black */ --dim:#807A6E; /* metadata, captions, italic asides */ --faint:#A19A8C; /* the quietest legible step */ --rule:#E2DDD0; /* hairlines */ --rule-strong:#CFC8B8; /* Prediction verdicts — the only hues in the system, muted to sit on vellum. They appear on one line of one block and nowhere else. */ --verdict-correct:#4C6440; --verdict-incorrect:#8E4034; --verdict-ambiguous:#7A6A4E; --verdict-unresolvable:#6B6250; /* Names the server-rendered sigil SVG references. Same values as above; kept under the design system's canonical names so the SVG is portable. */ --ink-0:#22211D; --seal-1:#807A6E; --border-ink:#22211D; } /* Night scope. Opt-in by system preference only — no toggle, no stored state, nothing for a reader to configure. The vellum inverts to a warm dark ground and no hue is introduced; the ink ladder simply runs the other way. --ink-0 and --border-ink move apart here: ink lightens to near-paper while the sigil's ring stays a step darker so the seal keeps its edge. */ @media (prefers-color-scheme: dark){ :root{ --paper:#171613; --paper-well:#26241F; --ink:#EFEBE0; --dim:#9C9587; --faint:#756E62; --rule:#302D27; --rule-strong:#443F37; --verdict-correct:#8FAE7F; --verdict-incorrect:#C97F70; --verdict-ambiguous:#B3A183; --verdict-unresolvable:#9C9587; --ink-0:#EFEBE0; --seal-1:#9C9587; --border-ink:#CDC7B9; } .composer-body{background:#1E1D19} } *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font:300 18px/1.72 Spectral,Georgia,serif;-webkit-font-smoothing:antialiased} a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--rule)} a:hover{text-decoration-color:var(--ink)} :focus-visible{outline:2px solid var(--ink);outline-offset:3px} /* ---- banner (dead man's switch, spec §10.7) -------------------------------- First child of , present only when tripped. It is a notice, not an alarm: same vellum family, one hairline, no icon, no colour. The archive states what happened in the same voice it states everything else. */ p.site-banner{margin:0;padding:18px 24px;background:var(--paper-well);border-bottom:1px solid var(--rule-strong);text-align:center;font:italic 300 15px/1.6 Spectral,serif;color:var(--dim)} p.site-banner a{color:var(--ink)} /* ---- masthead -------------------------------------------------------------- The wordmark is the whole of the site's identity: the name in the body face, small caps, widely tracked, centred above the nav. No mark, no rule, and no tagline — the descriptor lives in and the footer (§18g). padding-left compensates the tracking added after the final letter, so the word sits optically centred instead of half a letter-space to the left. */ .site-header{padding:34px 24px 0;text-align:center} .site-wordmark{display:inline-block;margin:0 0 20px;padding-left:.28em;font:400 20px/1 Spectral,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);text-decoration:none} .site-wordmark:hover{color:var(--ink);text-decoration:none} /* When the switch has tripped, the banner sits above the masthead and carries its own weight; the header tightens so the two do not read as one stack. */ p.site-banner + .site-header{padding-top:26px} .site-nav{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;font:400 11px/1 Spectral,serif;letter-spacing:.24em;text-transform:uppercase} .site-nav a{text-decoration:none;color:var(--dim)}.site-nav a:hover{color:var(--ink)} main{max-width:38rem;margin:0 auto;padding:0 24px 120px} /* ---- letter ---------------------------------------------------------------- */ .home-feature{padding-top:8px} .letter-head{text-align:center;margin-bottom:52px} /* The sigil is a server-rendered inline SVG (see the {% sigil %} tag). This box only sizes and centres it; all marks come from the SVG itself. An empty .letter-sigil (unpublished letter, no seed) collapses to nothing. */ .letter-sigil{display:block;width:30px;height:30px;margin:0 auto 26px} .letter-sigil:empty{display:none} .letter-sigil svg{display:block;width:100%;height:100%} .letter-title{margin:0 0 14px;font:400 33px/1.22 Spectral,serif;letter-spacing:-.01em} .letter-addressed{margin:0;font:italic 300 17px/1.4 Spectral,serif;color:var(--dim)} .letter-body{text-wrap:pretty} .letter-body p{margin:0 0 1.5em} .letter-body p+p{text-indent:1.6em;margin-top:-1.5em} .letter-body p:first-child::first-letter{float:left;font-size:66px;line-height:.82;padding:6px 10px 0 0;font-weight:400} .letter-meta{margin-top:64px;text-align:center} .letter-signature{margin:0 0 40px;font:italic 400 21px/1.3 Spectral,serif} .letter-stamp{margin:0;padding-top:30px;border-top:1px solid var(--rule);display:grid;gap:18px} .letter-stamp dt{font:400 9px/1 Spectral,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:6px} .letter-stamp dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink)} .letter-stamp dd a{color:var(--ink)} .epoch-marker{color:var(--dim);font-style:italic;max-width:30rem;margin:0 auto!important} .letter-chain{display:flex;justify-content:center;gap:12px;align-items:baseline;flex-wrap:wrap} .chain-hash{font:400 12px/1 "IBM Plex Mono",monospace;color:var(--dim)} .letter-license{margin:34px 0 0;font:400 9px/1 Spectral,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)} /* ---- prediction (inside .letter-meta) -------------------------------------- A ruled aside under the stamp, labelled in the same small caps as everything else. data-status tints only the status line — the one place in the archive where colour carries meaning, because "correct" and "incorrect" are the one pair of words a reader must not confuse. Never tint the statement itself. */ .prediction{margin:34px auto 0;max-width:30rem;padding-top:22px;border-top:1px solid var(--rule)} .prediction::before{content:"Prediction";display:block;margin-bottom:12px;font:400 9px/1 Spectral,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)} .prediction-statement{margin:0;font:300 18px/1.6 Spectral,serif;color:var(--ink);text-wrap:pretty} .prediction-date{margin:10px 0 0;font:400 13px/1.5 Spectral,serif;letter-spacing:.06em;color:var(--dim)} .prediction-resolution{margin:12px 0 0;font:italic 300 15px/1.6 Spectral,serif;color:var(--dim)} .prediction[data-status=correct] .prediction-date{color:var(--verdict-correct)} .prediction[data-status=incorrect] .prediction-date{color:var(--verdict-incorrect)} .prediction[data-status=ambiguous] .prediction-date{color:var(--verdict-ambiguous)} .prediction[data-status=unresolvable] .prediction-date{color:var(--verdict-unresolvable)} .home-invitation{margin-top:82px;padding-top:34px;border-top:1px solid var(--rule);text-align:center;font-size:17px;color:var(--dim)} .home-invitation p{margin:0 auto .9em;max-width:30rem} /* ---- page-prose ----------------------------------------------------------- RULING (amends §18): .page-prose is a long-form container, not a centred card. Centring is reserved for the title and the single lede paragraph that follows it; everything after reads left-aligned at the letter measure. This is why /guidelines/, /terms/, /succession/ and the honesty page need no variant class — the same rule serves a two-line tombstone and a 2,000-word policy page. Utility pages simply never reach the third element. */ .page-prose{text-wrap:pretty} .page-prose h1{margin:0 0 16px;font:400 30px/1.2 Spectral,serif;text-align:center} .page-prose h1+p{margin:0 0 1.1em;color:var(--dim);text-align:center;max-width:32rem;margin-inline:auto} .page-prose h2{margin:2.2em 0 .6em;font:400 21px/1.3 Spectral,serif;color:var(--ink)} .page-prose p{margin:0 0 1.1em;color:var(--ink)} .page-prose ul{margin:0 0 1.3em;padding-left:1.4em;list-style:none} .page-prose li{margin:0 0 .5em;position:relative} .page-prose li::before{content:"·";position:absolute;left:-1.1em;color:var(--faint)} .page-prose li time{color:var(--dim);font-style:italic} .page-prose strong{font-weight:500} .page-prose code{font:400 12px/1.5 "IBM Plex Mono",monospace;color:var(--dim);word-break:break-all} /* Pagination and other bare nav rows borrowing .page-prose. */ nav.page-prose{display:flex;justify-content:center;align-items:baseline;gap:22px;margin-top:34px;font:400 11px/1 Spectral,serif;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)} nav.page-prose a{text-decoration:none;color:var(--dim)} nav.page-prose a:hover{color:var(--ink)} /* Search form: bare form/label/input/button inside .page-prose. RULING: it adopts the composer's field treatment (a ruled line to write on) without adopting its class names — one input, no borrowed markup. */ .page-prose form{display:grid;justify-items:center;gap:14px;max-width:26rem;margin:26px auto 0} .page-prose label{font:400 9px/1.5 Spectral,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)} .page-prose input[type=search]{-webkit-appearance:none;appearance:none;width:100%;font:300 20px/1.6 Spectral,serif;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;padding:8px 0;text-align:center} .page-prose input[type=search]:focus{outline:0;border-color:var(--ink)} .page-prose button{font:400 11px/1 Spectral,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:14px 34px;cursor:pointer} .page-prose button:hover{background:var(--ink);color:var(--paper)} /* Endowment progress bar (spec §12.3). A ruled line that fills with ink and then disappears for good — the server stops rendering it once reached. */ .page-prose progress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:2px;margin:0 0 1.6em;border:0;background:var(--rule)} .page-prose progress::-webkit-progress-bar{background:var(--rule)} .page-prose progress::-webkit-progress-value{background:var(--ink)} .page-prose progress::-moz-progress-bar{background:var(--ink)} /* ---- archive index --------------------------------------------------------- */ .archive-list{list-style:none;margin:0;padding:0} .archive-entry{padding:30px 0;border-bottom:1px solid var(--rule);text-align:center} .archive-entry a{display:block;font:400 22px/1.35 Spectral,serif;text-decoration:none;max-width:26rem;margin:0 auto 10px} .archive-entry a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--rule)} .archive-entry p{margin:0;font:italic 300 14px/1.5 Spectral,serif;color:var(--dim)} /* Epoch frontier and closing notes — used in .archive-entry rows and standalone. */ .epoch-note{margin:12px auto 0!important;max-width:28rem;font:italic 300 15px/1.6 Spectral,serif;color:var(--dim)} .epoch-note+.epoch-note{margin-top:8px!important} /* ---- composer -------------------------------------------------------------- */ .composer{display:flex;flex-direction:column;gap:34px} .composer-field{display:flex;flex-direction:column;gap:10px} .composer-label{font:400 9px/1.5 Spectral,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)} .composer input[type=text],.composer input[type=date],.composer-body{font:300 19px/1.7 Spectral,serif;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:8px 0;width:100%;border-radius:0} .composer input[type=date]{-webkit-appearance:none;appearance:none;font-size:17px;max-width:16rem} .composer input[type=text]:focus,.composer input[type=date]:focus,.composer-body:focus{outline:0;border-color:var(--ink)} .composer-body{min-height:300px;resize:vertical;border:1px solid var(--rule);padding:20px 22px;background:#fff} .composer-count{margin:0;font:italic 300 14px/1 Spectral,serif;color:var(--dim)} .composer-options{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .composer-options legend{padding:0;margin-bottom:14px;font:400 9px/1 Spectral,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)} .composer-options label,.composer-consent label{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.5} /* The tags fieldset is the one long list of short options: twelve checkboxes set in a single column would out-measure the letter itself. Columns only when the fieldset actually contains checkboxes — the radio fieldsets keep their single column, where each option is a sentence. */ .composer-options:has(input[type=checkbox]){display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:12px 24px;padding-top:26px} /* A legend in a grid fieldset is taken out of flow, so its own margin does nothing — the fieldset's padding-top is what opens the space. */ .composer-options:has(input[type=checkbox]) legend{margin-bottom:0} /* The prediction fieldset nests .composer-field children; give them room. */ .composer-options .composer-field{margin-top:6px} .composer input[type=radio],.composer input[type=checkbox]{accent-color:var(--ink);margin-top:5px;flex:none} .composer-consent{padding-top:26px;border-top:1px solid var(--rule);color:var(--dim);font-style:italic} .composer-error{margin:0;font:italic 300 15px/1.5 Spectral,serif;color:var(--verdict-incorrect)} .composer>.composer-error{padding-bottom:6px;border-bottom:1px solid var(--verdict-incorrect)} .composer-submit{align-self:center;font:400 11px/1 Spectral,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:18px 44px;cursor:pointer} .composer-submit:hover{background:var(--ink);color:var(--paper)} /* Honeypot: the classless hidden div stays hidden even if a browser ignores [hidden] because of a display rule elsewhere. */ .composer [hidden]{display:none!important} /* ---- footer ---------------------------------------------------------------- */ .site-footer{padding:0 24px 70px} .site-footer p{max-width:38rem;margin:0 auto;padding-top:26px;border-top:1px solid var(--rule);text-align:center;font:italic 300 14px/1.5 Spectral,serif;color:var(--dim)} /* Ten links separated by literal "·" text nodes in the template. Deliberately NOT flex — flex would promote each separator to its own box and the row would break in the wrong places. Inline flow lets it wrap as a sentence. */ .site-footer nav{max-width:34rem;margin:14px auto 0;text-align:center;font:400 10px/2.2 Spectral,serif;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)} .site-footer nav a{color:var(--dim);text-decoration:none;white-space:nowrap} .site-footer nav a:hover{color:var(--ink)} @media (max-width:640px){ main{padding-bottom:80px} .letter-body p:first-child::first-letter{font-size:52px} .letter-title{font-size:28px} .page-prose h1{font-size:26px} .site-wordmark{font-size:17px;margin-bottom:18px} .site-nav{gap:20px} } @media print{ /* The nav, footer and banner go; the wordmark stays. A printed letter should say where it came from, and the name is the shortest way to say it. */ .site-nav,.site-footer,p.site-banner,.home-invitation{display:none} .site-header{padding:0 0 26px} .site-wordmark{font-size:13px;margin:0;color:#22211D} body{background:#fff} main{max-width:none;padding:0} }