:root { --navy: #171B2B; --navy-deep: #0D0F19; --paper: #F3EFE4; --ink: #171B2B; --ink-soft: #5B5F6E; --amber: #FF9640; --blue: #3ED0FF; --green: #6BD98A; --line-dark: #2C3148; --line-light: #DFD8C4; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); background-image: radial-gradient(circle at 1px 1px, rgba(23,27,43,0.035) 1px, transparent 0); background-size: 5px 5px; color: var(--ink); /* One family throughout, the way a book does it. Literata's optical-size axis carries it from body text up to the title, and serif text wants a little more line-height than sans. */ font-family: 'Literata', Georgia, serif; font-optical-sizing: auto; line-height: 1.7; -webkit-font-smoothing: antialiased; } .wrap { max-width: 840px; margin: 0 auto; padding: 0 28px; } a { color: inherit; } a:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; } /* ===== SITE NAV ===== Page-level navigation, distinct from the in-page contents list. Sits at the top of the dark band on every page. The markup is duplicated per page rather than injected by script.js, so crawlers and no-JS readers still get the links. */ .site-nav { padding-top: 26px; } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; } .site-nav a { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: 0.03em; color: #8B90A3; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 3px; display: inline-block; } .site-nav a.nav-home { display: inline-flex; align-items: center; padding-bottom: 1px; } .site-nav a.nav-home svg { width: 16px; height: 16px; display: block; } .site-nav a:hover { color: var(--paper); } /* The page you're on is lit, the way the contents dot is. */ .site-nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--blue); } /* The nav supplies the leading space the hero used to own. */ .site-nav + header.hero { padding-top: 56px; } /* ===== SECTION DIVIDERS ===== A small lit node + trace, echoing the flux-capacitor icon and the essay's own "connecting the dots" line. Marks section transitions instead of decorating them. */ .section-divider { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--blue); } .section-divider::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex-shrink: 0; } .section-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.35; } .section-divider.amber { color: var(--amber); } .section-divider.green { color: var(--green); } /* ===== HERO ===== */ .band-dark { background: var(--navy); background-image: radial-gradient(circle at 88% 8%, rgba(62,208,255,0.16), transparent 55%), radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0); background-size: auto, 5px 5px; color: var(--paper); } header.hero { padding: 84px 0 72px; position: relative; overflow: hidden; } .flux-icon { position: absolute; bottom: 40px; right: 16px; width: 88px; height: 88px; opacity: 0.8; animation: pulse 3.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(62,208,255,0.35)); } 50% { filter: drop-shadow(0 0 14px rgba(62,208,255,0.75)); } } /* The title carries the page: this is a manuscript, so it opens like one. */ .manuscript-title { font-family: 'Literata', serif; font-weight: 700; /* Sized to sit on one line at full width; wraps on narrow screens. Literata sets wider than Fraunces did, hence the smaller max. */ font-size: clamp(28px, 4.7vw, 40px); line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 14px; } /* Upright, so it reads as a book subtitle and stays distinct from the bold italic of the epigraph below. */ .manuscript-subtitle { font-family: 'Literata', serif; font-weight: 500; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.35; color: #BFC5D4; margin: 0 0 28px; } /* Keeps the hyphenated compound from splitting across lines. */ .nowrap { white-space: nowrap; } /* Author credit, photo and all — a long-form byline rather than a title-page credit, which is where this page's personality lives. */ .byline { display: flex; align-items: center; gap: 18px; margin: 0 0 44px; } .manuscript-byline { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--blue); letter-spacing: 0.04em; margin: 0 0 5px; } /* Dates the piece the way a book does, rather than as a timestamp. Bump the edition when the manuscript gains a new section. */ .manuscript-edition { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #8B90A3; letter-spacing: 0.03em; margin: 0; } /* Sets up the mantra: what I've done, then how I lead. */ .intro-bio { font-size: 17.5px; color: #D7DAE4; margin: 0 0 46px; } .intro-bio p { margin: 0 0 20px; } .intro-bio p:last-child { margin-bottom: 0; } .avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid transparent; /* Padding-box fill matches the dark band it now sits on. */ background: linear-gradient(var(--navy), var(--navy)) padding-box, linear-gradient(135deg, var(--amber), var(--blue)) border-box; flex-shrink: 0; } /* The mantra is the epigraph under the title: each principle reads like a lit indicator on a control panel, but it stays below the title in the hierarchy. */ .mantra-line { position: relative; font-family: 'Literata', serif; font-weight: 700; font-style: italic; /* Sized so the longest of the three sits on one line in the 840px column; it still wraps on narrow screens. */ font-size: clamp(19px, 2.9vw, 24px); line-height: 1.3; margin: 0 0 18px; padding-left: 26px; } .mantra-line:last-child { margin-bottom: 0; } .mantra-line::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; } .stmt-a { color: var(--blue); } .stmt-b { color: var(--amber); } .stmt-c { color: var(--green); } /* ===== CHAPTER LIST ===== The chapters, listed on the front page where the mantra used to sit. Same lit-node motif as the in-page contents list, on the dark band. */ .chapter-list { margin: 44px 0 0; } .chapter-list ol { list-style: none; margin: 0; padding: 0; } .chapter-list li { position: relative; padding-left: 26px; margin-bottom: 15px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .chapter-list li:last-child { margin-bottom: 0; } .chapter-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, #8B90A3); box-shadow: 0 0 8px var(--dot, transparent); } .chapter-list a { font-family: 'Literata', serif; font-weight: 600; font-size: clamp(18px, 2.6vw, 21px); color: var(--paper); text-decoration: none; border-bottom: 1px solid transparent; } .chapter-list a:hover { border-bottom-color: #8B90A3; } /* Says which chapters are still empty, so a click isn't a surprise. */ .chapter-soon { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #8B90A3; border: 1px solid var(--line-dark); border-radius: 3px; padding: 2px 7px; } /* ===== ESSAY (paper, primary content) ===== */ /* Vertical only — the horizontal padding belongs to .wrap, and the `padding` shorthand would zero it out on narrow screens. */ .essay-section { padding-top: 56px; padding-bottom: 20px; } .quote-card { border-left: 3px solid var(--blue); background: linear-gradient(to right, rgba(62,208,255,0.07), transparent 65%); border-radius: 0 6px 6px 0; padding: 14px 20px; margin: 34px 0; } .quote-card.amber { border-left-color: var(--amber); background: linear-gradient(to right, rgba(255,150,64,0.08), transparent 65%); } .quote-card.green { border-left-color: var(--green); background: linear-gradient(to right, rgba(107,217,138,0.08), transparent 65%); } /* Scoped to .quote-card so these beat `.essay-body p` on specificity — unscoped, the margins below silently lose and the cards go bottom-heavy. */ .quote-card .quote-text { font-family: 'Literata', serif; font-style: italic; font-weight: 500; font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0 0 8px; max-width: 680px; } .quote-card .quote-attr { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-soft); margin: 0; } a.jump-link { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--green); padding-bottom: 1px; } /* A section break inside the essay body rather than at the top of its own band, so it supplies the leading space the standalone version inherits. Matches the run-up a .pillar heading gets. */ .essay-body .section-divider { margin-top: 46px; } h2.section-head { font-family: 'Literata', serif; font-weight: 700; font-size: 24px; margin: 0 0 20px; scroll-margin-top: 28px; } /* ===== CONTENTS + PILLAR HEADINGS ===== The dot colours match each principle's colour in the epigraph, so the same three-colour thread runs from the title page through the essay. On paper the heading text stays ink — the accent lives in the dot, which keeps contrast high. */ .contents { margin: 0 0 48px; padding-bottom: 30px; border-bottom: 1px solid var(--line-light); } .contents-label { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ink-soft); letter-spacing: 0.04em; margin: 0 0 16px; } .contents ol { list-style: none; margin: 0; padding: 0; } .contents li { position: relative; padding-left: 26px; margin-bottom: 11px; } .contents li:last-child { margin-bottom: 0; } .contents li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--ink-soft)); } .contents a { font-size: 16px; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; } .contents a:hover { border-bottom-color: var(--ink-soft); } /* Wide screens: the contents leaves the flow and floats in the right margin, tracking your position. Below this width there isn't room beside the 840px column, so it stays an inline list at the top. */ @media (min-width: 1300px) { .contents { /* Wide enough for the longest label at its active (600) weight, so nothing reflows when the highlight moves. */ position: fixed; top: 50%; right: 24px; transform: translateY(-50%); width: 184px; margin: 0; padding: 0; border-bottom: none; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .contents.is-visible { opacity: 1; pointer-events: auto; } .contents-label { font-size: 11px; margin: 0 0 14px; } .contents li { margin-bottom: 13px; padding-left: 20px; } .contents li::before { width: 7px; height: 7px; opacity: 0.4; transition: opacity 0.2s ease, box-shadow 0.2s ease; } .contents a { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); transition: color 0.2s ease; } .contents li.is-active::before { opacity: 1; box-shadow: 0 0 8px var(--dot); } .contents li.is-active a { color: var(--ink); font-weight: 600; } } /* ===== CONTENTS: COMPACT BAR (below 1300px) ===== The floating tracker needs a right margin to live in, which doesn't exist at this width. Same job, re-housed: a bar on the bottom edge, in thumb reach, naming the section you're in and opening the full list on tap. script.js builds it by cloning the list above, so that list stays the only place sections are declared. */ .contents-mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; background: var(--navy); color: var(--paper); border-top: 1px solid var(--line-dark); box-shadow: 0 -6px 24px rgba(13,15,25,0.18); opacity: 0; pointer-events: none; transform: translateY(100%); transition: opacity 0.3s ease, transform 0.3s ease; /* Clears the iOS home indicator. */ padding-bottom: env(safe-area-inset-bottom); } .contents-mini.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .cm-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 14px 22px; background: none; border: 0; color: inherit; text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.02em; cursor: pointer; } .cm-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; } /* Same lit node as the epigraph and the pillar headings, carrying the colour of whichever section you're currently in. */ .cm-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--dot, #8B90A3); box-shadow: 0 0 8px var(--dot, transparent); transition: background 0.2s ease, box-shadow 0.2s ease; } /* Long section names truncate rather than wrapping the bar to two lines. */ .cm-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-chevron { width: 12px; height: 8px; flex-shrink: 0; color: #8B90A3; transition: transform 0.2s ease; } .contents-mini.is-open .cm-chevron { transform: rotate(180deg); } .cm-panel { border-bottom: 1px solid var(--line-dark); padding: 10px 22px 6px; max-height: 50vh; overflow-y: auto; } .cm-panel ol { list-style: none; margin: 0; padding: 0; } .cm-panel li { position: relative; padding-left: 22px; margin: 0; } .cm-panel li::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #8B90A3); opacity: 0.45; } .cm-panel li.is-active::before { opacity: 1; box-shadow: 0 0 8px var(--dot); } /* Generous tap targets — the whole row, not just the words. */ .cm-panel a { display: block; padding: 12px 0; font-size: 15px; color: #BFC5D4; text-decoration: none; } .cm-panel li.is-active a { color: var(--paper); font-weight: 600; } /* Above this the floating tracker takes over and the bar steps aside. */ @media (min-width: 1300px) { .contents-mini { display: none; } } .pillar { position: relative; font-family: 'Literata', serif; font-weight: 700; font-size: 25px; line-height: 1.3; color: var(--ink); margin: 46px 0 18px; padding-left: 26px; scroll-margin-top: 28px; } .pillar::before { content: ""; position: absolute; left: 0; top: 0.44em; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--ink-soft)); } .p-amber { --dot: var(--amber); } .p-blue { --dot: var(--blue); } .p-green { --dot: var(--green); } /* Fills .wrap; the slightly larger type keeps the wider measure comfortable. */ .essay-body { font-size: 17.5px; } .essay-body p { margin: 0 0 20px; } .recap-section { padding-top: 8px; padding-bottom: 64px; } blockquote.pull { font-family: 'Literata', serif; font-style: italic; font-weight: 600; font-size: clamp(21px, 3.4vw, 28px); line-height: 1.4; margin: 34px 0; padding-left: 22px; border-left: 4px solid var(--blue); } /* Author note sits at the back, the way a book's does */ .quotes-disclaimer { font-size: 13px; color: var(--ink-soft); margin: 26px 0 0; max-width: 620px; } /* A page that exists in the navigation but hasn't been written. */ header.hero-stub { padding-bottom: 56px; } .stub-note { font-size: 17.5px; color: var(--ink-soft); max-width: 620px; } /* ===== FOOTER ===== A slim amber bookend on every page now that the contact copy has its own page. Kept as a real