/* ============================================================ Letters (the blog that is never called a blog). Loads AFTER main.css. Dark reading world, Oneness-adjacent. Adapted from design-system letters/letters.css with committed variants baked in: paper=wine, letter column=standard. (Original with all variants: reference/design-drop/letters/) Production mechanisms (all deliberate, keep): data-index: lines | desk (index A/B toggle — visitor-facing easter egg, persists in localStorage) data-size: s | m | l (letter reader type size, A/A/A) data-pointer: newsletter | coherence (end-of-letter pointer, picked per letter in its markup) ============================================================ */ /* ---------- dark tokens (Oneness palette family, wine paper) ---------- */ body.page-letters { --paper: rgb(26, 10, 11); --paper-deep: rgb(18, 7, 8); --wine: rgb(133, 66, 72); --wine-soft: rgb(189, 124, 130); /* labels & accents — AA on wine */ --cream-soft: rgba(236, 231, 217, .82); background: var(--paper); color: var(--cream); } body.page-letters .site-header { background: var(--paper); } body.page-letters main a:not(.btn) { color: var(--wine-soft); } body.page-letters main a:not(.btn):hover { opacity: .75; } .l-eyebrow { letter-spacing: .16em; text-transform: uppercase; color: var(--wine-soft); } /* ---------- quiet subscribe capture — the real Beehiiv embed ---------- */ .l-capture { width: 320px; max-width: 100%; } .l-capture iframe { display: block; width: 100%; height: 52px; border: 0; } /* ============================================================ A · THE INDEX — two live forms behind the faint A/B toggle: data-index="lines" — first lines fading out (default) data-index="desk" — overlapping letterhead sheets ============================================================ */ .l-head { padding: calc(var(--header-h) + 96px) 24px 56px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; } .l-head h1 { color: var(--cream); } .l-head .tagline { font-size: 20px; color: var(--cream-soft); } /* on-page A/B view toggle — intentionally faint, top right */ .l-viewtoggle { position: fixed; top: calc(var(--header-h) + 14px); right: 24px; z-index: 10; display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em; color: var(--cream); opacity: .35; transition: opacity .25s ease; } .l-viewtoggle:hover, .l-viewtoggle:focus-within { opacity: .9; } .l-viewtoggle button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 8px 4px; } .l-viewtoggle button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; } .l-viewtoggle .sep { opacity: .5; } .l-index { max-width: 660px; margin: 0 auto; padding: 0 24px 88px; } /* subscribe capture below the stack */ .l-sub { display: flex; justify-content: center; padding: 0 24px 140px; } /* "the latest" pill */ .l-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(189, 124, 130, .5); color: var(--wine-soft); font-size: 11px; letter-spacing: .12em; } /* shared entry bones */ .l-entry { display: block; } .l-entry__date { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wine-soft); } .l-entry h2 { font-family: var(--font-display); font-size: 30px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.13; margin: 0; color: var(--cream); } .l-entry__tease { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--cream-soft); } .l-entry__body { margin: 0; font-family: var(--font-serif); font-size: 19px; line-height: 1.65; color: var(--cream-soft); max-height: 4.9em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%); mask-image: linear-gradient(to bottom, black 55%, transparent 100%); } .l-entry__more { font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--wine-soft); } /* --- desk form --- */ html[data-index="desk"] .l-entry { position: relative; background: rgb(33, 15, 16); border: 1px solid rgba(236, 231, 217, .14); border-radius: 14px; padding: 30px 36px 34px; box-shadow: 0 -14px 30px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 8px; /* own compositor layer: rotated cards painted into Chrome's scroll tiles rasterize through a different path and split the dark ground into two subtly different tones on P3 displays (boundary moved on hover) */ will-change: transform; } html[data-index="desk"] .l-entry + .l-entry { margin-top: -16px; } html[data-index="desk"] .l-entry:nth-child(odd) { transform: rotate(-.5deg); } html[data-index="desk"] .l-entry:nth-child(even) { transform: rotate(.45deg); background: rgb(30, 13, 14); } html[data-index="desk"] .l-entry:hover { border-color: rgba(236, 231, 217, .35); z-index: 5; } html[data-index="desk"] .l-key { position: absolute; top: 30px; right: 32px; width: 44px; height: 14px; background-size: 100% 100%; opacity: .8; } html[data-index="desk"] .l-entry h2 { padding-right: 60px; } html[data-index="desk"] .l-entry__body, html[data-index="desk"] .l-entry__more { display: none; } /* --- first-lines form (default) --- */ html[data-index="lines"] .l-entry { display: flex; flex-direction: column; gap: 12px; } html[data-index="lines"] .l-entry + .l-entry { margin-top: 60px; } html[data-index="lines"] .l-key, html[data-index="lines"] .l-entry__tease { display: none; } html[data-index="lines"] .l-entry:hover .l-entry__more { text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ B · THE SINGLE LETTER — the 11pm reading experience ============================================================ */ .lt-main { padding: calc(var(--header-h) + 72px) 24px 140px; } .lt-wrap { max-width: 68ch; margin: 0 auto; } .lt-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 44px; } .lt-back { font-family: var(--font-ui); font-size: 14px; font-weight: 500; } /* reader type-size control — A / A / A (production, not a preview tweak) */ .lt-tools { display: flex; gap: 8px; } .lt-size-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; cursor: pointer; border: 1px solid rgba(236, 231, 217, .25); border-radius: 8px; color: var(--cream); font-family: var(--font-serif); transition: background .2s ease, border-color .2s ease; } .lt-size-btn:hover { border-color: rgba(236, 231, 217, .5); } .lt-size-btn[aria-pressed="true"] { background: rgba(236, 231, 217, .14); border-color: rgba(236, 231, 217, .65); } .lt-size-btn--s { font-size: 14px; } .lt-size-btn--m { font-size: 18px; } .lt-size-btn--l { font-size: 22px; } .lt-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 44px; } .lt-head h1 { font-family: var(--font-display); font-size: clamp(36px, 4.2vw, 52px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; margin: 0; color: var(--cream); } .lt-dateline { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--cream-soft); margin: 0; } .lt-body { font-size: 20px; line-height: 1.7; letter-spacing: -0.01em; color: var(--cream); } html[data-size="s"] .lt-body { font-size: 18px; } html[data-size="l"] .lt-body { font-size: 22px; } .lt-body p { margin: 0 0 1.35em; } .lt-body h2 { font-family: var(--font-display); font-size: 1.45em; font-weight: 400; letter-spacing: -0.03em; line-height: 1.2; margin: 1.8em 0 .7em; color: var(--cream); } .lt-body em { font-style: italic; } /* the one textural image (optional — letters can run text-only) */ .lt-image { margin: 2.2em 0; height: 320px; border-radius: 44px; background: var(--paper-deep); box-shadow: inset 0 0 0 1px rgba(133, 66, 72, .45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center; color: var(--cream-soft); } .lt-image .ui-label { letter-spacing: .14em; text-transform: uppercase; color: var(--wine-soft); } .lt-image__spec { font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.5; max-width: 34ch; margin: 0; } /* sign-off — the brand italic doing the handwriting's job */ .lt-signoff { margin-top: 56px; display: flex; flex-direction: column; gap: 14px; } .lt-signoff__name { font-family: "TT Ramillas Trl Variable Italic Variable Regular", "TT Ramillas Trl Variable Italic Variable Regular Placeholder", serif; font-size: 34px; letter-spacing: -0.02em; color: var(--cream); margin: 0; } .lt-author { font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--wine-soft); margin: 0; } /* end-of-letter pointer — ONE calm pointer, never a related-posts wall */ .lt-pointer { margin-top: 72px; padding-top: 44px; border-top: 1px solid rgba(236, 231, 217, .13); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .lt-pointer p { margin: 0; } .lt-pointer__lead { font-family: var(--font-serif); font-style: italic; font-size: 21px; color: var(--cream); } .lt-pointer__micro { font-family: var(--font-serif-2); font-size: 17px; color: var(--cream-soft); } .lt-pointer--news, .lt-pointer--coh { display: none; } html[data-pointer="newsletter"] .lt-pointer--news { display: flex; } html[data-pointer="coherence"] .lt-pointer--coh { display: flex; } /* ---------- responsive ---------- */ @media (max-width: 809.98px) { .l-head { padding: calc(var(--header-h) + 56px) 24px 40px; } .l-index { padding-bottom: 64px; } .l-sub { padding-bottom: 100px; } .l-entry h2 { font-size: 25px; } .l-entry__body { font-size: 18px; } html[data-index="desk"] .l-entry { padding: 24px 24px 28px; } html[data-index="desk"] .l-entry h2 { padding-right: 48px; } html[data-index="desk"] .l-key { top: 24px; right: 24px; } html[data-index="lines"] .l-entry + .l-entry { margin-top: 48px; } .l-viewtoggle { top: calc(var(--header-h) + 6px); right: 14px; } .lt-main { padding-top: calc(var(--header-h) + 48px); padding-bottom: 100px; } .lt-body { font-size: 18px; } html[data-size="s"] .lt-body { font-size: 17px; } html[data-size="l"] .lt-body { font-size: 20px; } .lt-image { height: 260px; border-radius: 32px; } } /* ---------- coming soon (launch filler, 2026-08-20) ---------- */ .l-soon { min-height: calc(72vh / var(--page-zoom)); padding: calc(var(--header-h) + 96px) 24px 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; } .l-soon .l-key { width: 56px; height: 17px; background-size: 100% 100%; margin-bottom: 10px; } .l-soon h1 { color: var(--cream); } .l-soon__line { font-size: 20px; color: var(--cream-soft); } .l-soon .l-capture { margin-top: 22px; }