/* leroymichaelson.com — prototype, v2: EDITORIAL Register decided 2026-07-26 after v1 (typographic-minimal, kept at style-v1-minimal.css) read as thin rather than restrained. The idea: hierarchy does the work that a photograph would normally do. Oversized display headline, a hard left rail of small-caps labels, asymmetric text column, hairline rules the full width of the page. Still text-only — image slots are marked for when the hero photo lands. Fonts are loaded from Google here for speed of iteration. THE REAL BUILD MUST SELF-HOST THEM. */ /* ---------- tokens ---------- */ :root { color-scheme: light dark; --display: "Instrument Serif", Charter, Georgia, "Times New Roman", serif; --body: Newsreader, Charter, Georgia, "Times New Roman", serif; --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --rail: 11rem; /* left label column */ --gutter: 3.5rem; --measure: 36rem; /* prose measure, independent of page width */ --page: 70rem; } /* ---------- PALETTES ---------- Each is light-dark(light, dark), so one `color-scheme` flip switches the whole site and every value lives on one line next to its counterpart. Switch with the prototype-only control (switcher.js) or by setting data-palette on . Roles, held constant across all four so they stay comparable: --paper / --paper-alt page and inset backgrounds --ink / -soft / -faint primary text, secondary text, labels and metadata --rule / --rule-hard hairlines, and the emphatic rules that structure the page --accent links and interactive text. Must stay readable — 4.5:1 minimum. --signal graphic emphasis only: diagram highlights, blocks. Never body text. --alarm one thing, once, or not at all. DEFAULT = archive. -------------------------------------------------------------- */ :root, [data-palette="archive"] { --paper: light-dark(#faf7f0, #12110e); --paper-alt: light-dark(#f1ece0, #1b1915); --ink: light-dark(#17150f, #f0ebe0); --ink-soft: light-dark(#55503f, #a8a08c); --ink-faint: light-dark(#766f5c, #847d6d); --rule: light-dark(#ddd6c6, #2f2c25); --rule-hard: light-dark(#17150f, #f0ebe0); --accent: light-dark(#9a3412, #e08c5a); --signal: light-dark(#b45309, #f59e0b); --alarm: light-dark(#a3141e, #f07178); } /* Cool graphite. Reads as instrument, not book. */ [data-palette="instrument"] { --paper: light-dark(#f6f8f8, #0e1113); --paper-alt: light-dark(#eaeef0, #171b1e); --ink: light-dark(#12181b, #e8edef); --ink-soft: light-dark(#46525a, #97a3a9); --ink-faint: light-dark(#687277, #767f83); --rule: light-dark(#d3dade, #252c30); --rule-hard: light-dark(#12181b, #e8edef); --accent: light-dark(#0d6a76, #56c8d6); --signal: light-dark(#0d6a76, #56c8d6); --alarm: light-dark(#b03a1a, #ff9d76); } /* The yellow is Memory Thread's, and it's there for a reason — David's peripheral vision. Used as a graphic block, never as text. Links get the readable dark amber. */ [data-palette="schoolbus"] { --paper: light-dark(#fbf9f3, #131210); --paper-alt: light-dark(#f3efe3, #1c1a15); --ink: light-dark(#1a1712, #f4f0e6); --ink-soft: light-dark(#544d3c, #a9a18c); --ink-faint: light-dark(#78715d, #847d6e); --rule: light-dark(#ded7c4, #302c22); --rule-hard: light-dark(#1a1712, #f4f0e6); --accent: light-dark(#8a5a00, #ffd100); --signal: light-dark(#ffd100, #ffd100); --alarm: light-dark(#c8102e, #ff6b7a); } /* Same yellow, cool neutral substrate. The contemporary reading of the object: links are ink with a yellow underline rather than a coloured accent, so nothing competes with the signal and contrast is ink-level by construction. */ [data-palette="highvis"] { --paper: light-dark(#fbfbfa, #0f0f11); --paper-alt: light-dark(#f0f0ef, #17181b); --ink: light-dark(#14151a, #f2f2f0); --ink-soft: light-dark(#4a4d55, #a3a5aa); --ink-faint: light-dark(#6d7178, #7c7f85); --rule: light-dark(#dedfe0, #26282c); --rule-hard: light-dark(#14151a, #f2f2f0); --accent: light-dark(#14151a, #f2f2f0); --underline: light-dark(#ffd100, #ffd100); --signal: light-dark(#ffd100, #ffd100); --alarm: light-dark(#c8102e, #ff6b7a); } /* Drafting, with the object's yellow reserved as signal. Blue and yellow are near-complementary, so a photograph of the device lands at maximum vividness against this substrate — and because yellow appears nowhere else in the interface, every occurrence of it means "the thing I made." Blue carries interaction, yellow carries the object. Two chromas, two jobs, no overlap. For plain blueprint, set --signal back to the accent blue: it's one line. */ [data-palette="blueprint"] { --paper: light-dark(#f7f7f5, #0d1017); --paper-alt: light-dark(#ebedee, #151a23); --ink: light-dark(#101623, #e9edf4); --ink-soft: light-dark(#414c60, #97a1b3); --ink-faint: light-dark(#667082, #757e8d); --rule: light-dark(#d3d8e0, #232b38); --rule-hard: light-dark(#101623, #e9edf4); --accent: light-dark(#1b4db1, #7ea8ff); --signal: light-dark(#ffd100, #ffd100); --alarm: light-dark(#a3141e, #ff8d95); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.6 var(--body); font-optical-sizing: auto; text-rendering: optimizeLegibility; } .page { max-width: var(--page); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); } /* ---------- masthead ---------- */ .masthead { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: baseline; justify-content: space-between; padding: 1.75rem 0 1.1rem; border-bottom: 1px solid var(--rule); } .masthead .sig { font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: none; } .masthead nav { font: 400 0.8125rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; } .masthead nav a { color: var(--ink-faint); text-decoration: none; margin-left: 1.75rem; padding-bottom: 0.2rem; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; } .masthead nav a:first-child { margin-left: 0; } .masthead nav a:hover { color: var(--ink); } .masthead nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--rule-hard); } /* ---------- hero ---------- */ .hero { padding: clamp(3.5rem, 11vh, 8rem) 0 clamp(2.5rem, 6vh, 4.5rem); } .hero h1 { font: 400 clamp(2.6rem, 7.2vw, 5.25rem)/1.02 var(--display); letter-spacing: -0.02em; margin: 0; max-width: 24ch; text-wrap: balance; } /* Deliberate break after the comma: the second clause hangs right of the first, so the turn in the sentence is visible rather than left to the wrap point. */ .hero h1 .indent { display: inline-block; padding-left: 1.5em; } /* Feature flags — see flags.js. Hides only; the markup is still in the source. */ [data-flags-off~="writing"] .flag-writing { display: none; } @media (max-width: 34rem) { .hero h1 .indent { padding-left: 0.75em; } } .hero .role { display: flex; align-items: center; gap: 1.25rem; margin-top: clamp(2rem, 5vh, 3.25rem); font: 500 0.75rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } .hero .role::after { content: ""; flex: 1; height: 1px; background: var(--rule); } /* ---------- the row system: label rail + body ---------- */ .row { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 var(--gutter); padding: clamp(2.5rem, 6vh, 4rem) 0; border-top: 1px solid var(--rule); } .row:first-of-type { border-top: 0; } .row > h2 { grid-column: 1; margin: 0; font: 500 0.75rem/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); position: sticky; top: 1.5rem; align-self: start; } .row-body { grid-column: 2; min-width: 0; } .row-body > :first-child { margin-top: 0; } .row-body > :last-child { margin-bottom: 0; } .prose { max-width: var(--measure); } @media (max-width: 46rem) { .row { grid-template-columns: 1fr; gap: 0.85rem 0; } .row > h2 { grid-column: 1; position: static; } .row-body { grid-column: 1; } } /* ---------- type ---------- */ p { margin: 0 0 1.2rem; max-width: var(--measure); } .lede { font-size: clamp(1.25rem, 2.1vw, 1.5rem); line-height: 1.45; letter-spacing: -0.01em; max-width: 30rem; } h3 { font: 400 1.5rem/1.25 var(--display); letter-spacing: -0.01em; margin: 0 0 0.4rem; } /* --underline defaults to the link colour; palettes that carry their signal in the underline (highvis) override it. Thicker when it's doing the identifying work. */ a { color: var(--accent); text-decoration-color: var(--underline, currentColor); text-decoration-thickness: var(--underline-weight, 1px); text-underline-offset: 0.15em; } [data-palette="highvis"] { --underline-weight: 2px; } em { font-style: italic; } /* ---------- work / writing entries ---------- */ .entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 2rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); transition: border-color .15s; } .entry:first-child { border-top: 1px solid var(--rule-hard); } .entry:hover { border-bottom-color: var(--rule-hard); } .entry h3 { grid-column: 1; } .entry h3 a { color: var(--ink); text-decoration: none; } .entry h3 a:hover { color: var(--accent); } .entry h3 a::after { content: " \2192"; color: var(--ink-faint); } .entry .year { grid-column: 2; grid-row: 1; font: 400 0.8125rem/1.6 var(--sans); letter-spacing: 0.08em; color: var(--ink-faint); white-space: nowrap; } .entry p { grid-column: 1; margin: 0; color: var(--ink-soft); font-size: 1.0625rem; max-width: 34rem; } .entry .meta { grid-column: 1 / -1; font: 400 0.8125rem/1.5 var(--sans); color: var(--ink-faint); margin-top: 0.5rem; } /* ---------- pillars: hanging index ---------- */ .pillars { counter-reset: pillar; } .pillar { counter-increment: pillar; position: relative; padding-left: 3.25rem; margin-bottom: 2.25rem; } .pillar:last-child { margin-bottom: 0; } .pillar::before { content: "0" counter(pillar); position: absolute; left: 0; top: 0.45rem; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.08em; color: var(--ink-faint); } .pillar p { margin-bottom: 0; color: var(--ink-soft); } @media (max-width: 30rem) { .pillar { padding-left: 0; } .pillar::before { position: static; display: block; margin-bottom: .5rem; } } /* ---------- process: horizontal steps ---------- */ .process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem 2.5rem; max-width: none; counter-reset: step; } .process li { counter-increment: step; border-top: 1px solid var(--rule-hard); padding-top: 0.85rem; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); } .process li::before { content: counter(step, decimal-leading-zero); display: block; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.6rem; } .process b { display: block; color: var(--ink); font: 400 1.1875rem/1.3 var(--display); margin-bottom: 0.25rem; } /* ---------- the one availability line ---------- */ .availability { font: 400 clamp(1.375rem, 2.6vw, 1.875rem)/1.35 var(--display); letter-spacing: -0.01em; color: var(--ink); max-width: 30ch; margin: 0; } .availability a { color: var(--ink); text-decoration-color: var(--rule); } .availability a:hover { color: var(--accent); } /* ---------- image slots (for when the photos land) ---------- */ .image-slot { border: 1px dashed var(--rule); background: var(--paper-alt); color: var(--ink-faint); font: 400 0.8125rem/1.6 var(--sans); letter-spacing: 0.04em; padding: clamp(2rem, 8vw, 5rem) 1.5rem; text-align: center; max-width: none; } /* Portrait — drop-in. Present a real file at assets/portrait.jpg and it renders; absent, the .missing class from the img's onerror turns it back into an instruction slot. */ .portrait { margin: 0; max-width: 23rem; } .portrait img { display: block; width: 100%; height: auto; background: var(--paper-alt); } .portrait figcaption { margin-top: 0.6rem; font: 400 0.75rem/1.5 var(--sans); letter-spacing: 0.03em; color: var(--ink-faint); } .portrait.missing::before { content: "IMAGE SLOT — portrait. Drop a file at assets/portrait.jpg (1200px+ on the long edge; a LinkedIn export is ~400px and will look soft here)."; display: block; border: 1px dashed var(--rule); background: var(--paper-alt); color: var(--ink-faint); font: 400 0.8125rem/1.6 var(--sans); padding: clamp(2rem, 8vw, 4rem) 1.5rem; text-align: center; } .image-slot.bleed { margin: 0 calc(-1 * clamp(1.25rem, 4vw, 3.5rem)); border-left: 0; border-right: 0; } /* ---------- article ---------- */ .article-head { padding: clamp(2.5rem, 8vh, 5rem) 0 2rem; border-bottom: 1px solid var(--rule-hard); } .article-head h1 { font: 400 clamp(2.1rem, 5vw, 3.5rem)/1.08 var(--display); letter-spacing: -0.02em; margin: 0; max-width: 30ch; text-wrap: balance; } .article-head .byline { font: 400 0.8125rem/1.5 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 1.5rem 0 0; } article { padding: 2.5rem 0 0; } article > * { margin-left: auto; margin-right: auto; } article p, article ol, article blockquote, article h2, article hr { max-width: var(--measure); } article h2 { font: 400 1.75rem/1.25 var(--display); letter-spacing: -0.01em; margin: 3rem auto 1rem; } article p.first::first-letter { float: left; font: 400 3.9rem/0.82 var(--display); padding: 0.1rem 0.55rem 0 0; color: var(--ink); } blockquote { margin: 2.5rem auto; padding: 0; border: 0; border-top: 1px solid var(--rule-hard); border-bottom: 1px solid var(--rule-hard); padding: 1.5rem 0; font: 400 clamp(1.375rem, 2.4vw, 1.75rem)/1.3 var(--display); letter-spacing: -0.01em; } blockquote p { font-size: inherit; line-height: inherit; margin: 0; max-width: none; } blockquote strong { font-weight: 400; } article ol { padding-left: 1.6rem; } article ol li { margin-bottom: 0.8rem; padding-left: 0.35rem; } article ol li strong { font-weight: 600; } hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem auto; } .figure-slot { border: 1px dashed var(--rule); background: var(--paper-alt); color: var(--ink-faint); font: 400 0.8125rem/1.6 var(--sans); padding: clamp(1.75rem, 6vw, 3.5rem) 1.5rem; text-align: center; margin: 2.75rem auto; max-width: 46rem; } /* ---------- footer ---------- */ footer { margin-top: clamp(4rem, 10vh, 7rem); padding: 1.5rem 0 3.5rem; border-top: 1px solid var(--rule-hard); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; font: 400 0.875rem/1.7 var(--sans); letter-spacing: 0.04em; color: var(--ink-faint); } footer a { color: var(--ink-soft); text-decoration-color: var(--rule); } footer a:hover { color: var(--accent); } footer .todo { flex-basis: 100%; } /* ---------- prototype-only: unresolved content ---------- Open decisions from docs/PERSONAL-BRAND-TODO.md. Loud on purpose — none of it can ship. Delete this rule and the copy should still read correctly, or it isn't finished. */ .todo { background: #fff3b0; color: #4a3a00; box-shadow: inset 0 0 0 1px #d9b800; padding: 0.05em 0.3em; font-family: var(--sans); font-size: 0.85em; letter-spacing: 0; } .todo::before { content: "TODO "; font-weight: 700; font-size: 0.85em; letter-spacing: 0.05em; }