/* ============================================================ christopherigweze.com — config 01 (composed / quiet) ============================================================ */ @import url('colors_and_type.css'); * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); } /* ============================================================ staging banner — renders only on non-production hosts. StagingBanner in components/Nav.jsx toggles .has-staging-banner on when active so layout reserves 24px at top. ============================================================ */ .pf-staging-banner { position: fixed; top: 0; left: 0; right: 0; height: 24px; background: var(--paper); color: var(--stone); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; z-index: 100; border-bottom: 0.5px solid var(--ink); } body.has-staging-banner { padding-top: 24px; } /* outer shell: asymmetric. content column sits left, nav pushes right. */ .pf-shell { max-width: 1320px; margin: 0 auto; padding: 0 72px; } /* ----- nav (top-right, small mono) ----- */ .pf-nav { display: flex; align-items: center; justify-content: space-between; padding: 28px 0 24px; } .pf-brand { border: none; display: inline-flex; } .pf-brand img { height: 40px; display: block; } .pf-links { display: flex; gap: 32px; } .pf-link { font-family: var(--font-mono); font-size: 14px; color: var(--ink); border: none; text-decoration: none; transition: color var(--dur-base) var(--ease-std); } .pf-link:hover { color: var(--rust); } .pf-link.is-active { color: var(--rust); } /* ============================================================ home — hero ============================================================ */ .pf-hero { padding: 96px 0 104px; display: flex; flex-direction: column; gap: 28px; max-width: 1100px; } .pf-hero-stamp { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); display: flex; gap: 14px; align-items: center; } .pf-hero-stamp::before { content: ''; width: 24px; height: 1px; background: var(--ink); display: inline-block; } .pf-hero-title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(96px, 13vw, 176px); line-height: 0.9; letter-spacing: -0.045em; margin: 0; color: var(--ink); } .pf-hero-dot { color: var(--rust); } /* the one rust on this page */ .pf-hero-lede { font-family: var(--font-mono); font-size: 17px; line-height: 1.7; max-width: 620px; color: var(--ink); margin: 0; } .pf-hero-sub { color: var(--stone); max-width: 620px; margin: 0; font-family: var(--font-mono); font-size: 15px; line-height: 1.7;} .pf-hero-cta { display: flex; gap: 16px; align-items: center; margin-top: 20px; font-family: var(--font-mono); font-size: 13px; } .pf-hero-sep { color: var(--stone); } .pf-btn-link { font-family: var(--font-mono); font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std); } .pf-btn-link:hover { color: var(--rust); border-bottom-color: var(--rust); } .pf-hero-cv { margin-top: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--stone); } .pf-hero-cv a { color: var(--stone); border-bottom: 1px solid var(--stone); padding-bottom: 1px; transition: color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std); } .pf-hero-cv a:hover { color: var(--rust); border-bottom-color: var(--rust); } /* ============================================================ section head: "2. the work · last updated ..." ============================================================ */ .pf-section-head { display: flex; justify-content: space-between; align-items: baseline; padding: 28px 0 20px; border-top: 0.5px solid var(--ink); } .pf-anchor { font-family: var(--font-sans); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); } .pf-section-meta { font-family: var(--font-mono); font-size: 12px; color: var(--stone); } /* ============================================================ work index ============================================================ */ .pf-worklist { padding: 16px 0 104px; } .pf-entry { padding: 40px 0; border-bottom: 0.5px solid var(--ink); } .pf-entry-head { display: grid; grid-template-columns: 56px 1fr auto; align-items: start; gap: 24px; } .pf-entry-num { font-family: var(--font-mono); font-size: 12px; color: var(--stone); padding-top: 6px; } .pf-entry-name { font-family: var(--font-sans); font-weight: 500; font-size: 40px; letter-spacing: -0.03em; line-height: 1; margin: 0 0 12px; color: var(--ink); } .pf-entry-meta { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--stone); } .pf-entry-status { color: var(--ink); } .pf-entry-open { font-family: var(--font-mono); font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--ink); white-space: nowrap; margin-top: 14px; align-self: start; } .pf-entry-open:hover { color: var(--rust); border-bottom-color: var(--rust); } .pf-entry-body { font-family: var(--font-mono); font-size: 14px; line-height: 1.75; max-width: 720px; color: var(--ink); margin: 18px 0 0 80px; } /* home · selected work: demote title to match /writing post title rhythm. /work page entries keep the base 40px since they're the feature there. */ [data-screen-label="home-selected-work"] .pf-entry-name { font-size: 22px; letter-spacing: -0.02em; line-height: 1.25; } /* ============================================================ short-about block on home ============================================================ */ .pf-short-about { padding: 32px 0 104px; display: grid; grid-template-columns: 80px 1fr; gap: 24px; } .pf-short-about .pf-section-head { grid-column: 1 / -1; margin-bottom: 20px; } .pf-short-about-body { grid-column: 2 / 3; max-width: 640px; display: flex; flex-direction: column; gap: 18px; } .pf-short-about-body p { font-family: var(--font-mono); font-size: 15px; line-height: 1.75; color: var(--ink); margin: 0; } .pf-short-about-cta { display: flex; gap: 14px; align-items: center; font-family: var(--font-mono); font-size: 13px; color: var(--stone); margin-top: 6px; } /* ============================================================ footer ============================================================ */ .pf-footer { display: flex; align-items: center; justify-content: space-between; padding: 28px 0 56px; border-top: 0.5px solid var(--ink); } .pf-footer-l img { height: 32px; display: block; } .pf-footer-r { display: flex; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--stone); } /* ============================================================ work writeup (project detail page) ============================================================ */ .pf-back { font-family: var(--font-mono); font-size: 12px; color: var(--stone); border: none; display: inline-flex; gap: 10px; align-items: center; margin-top: 56px; } .pf-back:hover { color: var(--rust); } .pf-back-arrow { font-family: var(--font-mono); } /* writeup hero */ .pf-wp-hero { padding: 64px 0 72px; display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; } .pf-wp-num { font-family: var(--font-mono); font-size: 12px; color: var(--stone); padding-top: 14px; } .pf-wp-head { display: flex; flex-direction: column; gap: 24px; max-width: 900px; } .pf-wp-kicker { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); } .pf-wp-title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(72px, 10vw, 136px); line-height: 0.9; letter-spacing: -0.045em; margin: 0; color: var(--ink); } .pf-wp-lede { font-family: var(--font-mono); font-size: 17px; line-height: 1.7; max-width: 640px; color: var(--ink); margin: 0; } /* fact sheet: left column, hairline rules */ .pf-wp-factsheet { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 28px 0 40px; border-top: 0.5px solid var(--ink); border-bottom: 0.5px solid var(--ink); } .pf-wp-factsheet-kicker { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); padding-top: 4px; } .pf-wp-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 48px; max-width: 820px; } .pf-wp-facts li { display: grid; grid-template-columns: 92px 1fr; gap: 16px; font-family: var(--font-mono); font-size: 13px; padding: 6px 0; } .pf-wp-facts .k { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); padding-top: 3px; } .pf-wp-facts .v { color: var(--ink); } /* writeup body sections */ .pf-wp-section { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 56px 0 16px; } .pf-wp-section-label { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); padding-top: 6px; } .pf-wp-section-body { max-width: 680px; display: flex; flex-direction: column; gap: 20px; } .pf-wp-section-body h2 { font-family: var(--font-sans); font-weight: 500; font-size: 40px; letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 8px; color: var(--ink); } .pf-wp-section-body p { font-family: var(--font-mono); font-size: 15px; line-height: 1.75; color: var(--ink); margin: 0; } .pf-wp-section-body p.stone { color: var(--stone); } /* terminal block — an ink slab with a mono paste */ .pf-wp-terminal { background: var(--ink); color: var(--paper); padding: 22px 24px 24px; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; border-radius: var(--r-sm); margin: 8px 0 0; overflow-x: auto; } .pf-wp-terminal .tl-stamp { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); margin-bottom: 12px; } .pf-wp-terminal .tl-line { white-space: pre; } .pf-wp-terminal .tl-prompt { color: var(--stone); } .pf-wp-terminal .tl-cmd { color: var(--paper); } .pf-wp-terminal .tl-dim { color: var(--stone); } .pf-wp-terminal .tl-ok { color: var(--paper); } .pf-wp-terminal .tl-warn { color: var(--rust); } /* terminal is where rust lives for this page */ /* list of bullet-less narrative items ("what it does / what it doesn't") */ .pf-wp-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; } .pf-wp-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 14px 0; border-top: 0.5px solid var(--ink); font-family: var(--font-mono); font-size: 14px; line-height: 1.65; color: var(--ink); } .pf-wp-list li:last-child { border-bottom: 0.5px solid var(--ink); } .pf-wp-list .idx { font-family: var(--font-mono); font-size: 11px; color: var(--stone); padding-top: 2px; } /* status strip — no progress bars. just the facts. */ .pf-wp-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 28px 0; border-top: 0.5px solid var(--ink); border-bottom: 0.5px solid var(--ink); margin: 8px 0 0; } .pf-wp-status dt { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); margin-bottom: 8px; } .pf-wp-status dd { font-family: var(--font-sans); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .pf-wp-status dd small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--stone); letter-spacing: 0; } /* changelog list */ .pf-wp-changelog { list-style: none; padding: 0; margin: 8px 0 0; } .pf-wp-changelog li { display: grid; grid-template-columns: 88px 72px 1fr; gap: 20px; padding: 14px 0; border-top: 0.5px solid var(--ink); font-family: var(--font-mono); font-size: 13px; color: var(--ink); line-height: 1.65; } .pf-wp-changelog li:last-child { border-bottom: 0.5px solid var(--ink); } .pf-wp-changelog .cl-date { color: var(--stone); } .pf-wp-changelog .cl-tag { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); padding-top: 3px; } /* up-next footer */ .pf-wp-next { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 56px 0 72px; border-top: 0.5px solid var(--ink); margin-top: 56px; } .pf-wp-next-label { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); } .pf-wp-next-body a { font-family: var(--font-sans); font-weight: 500; font-size: 40px; letter-spacing: -0.03em; line-height: 1; color: var(--ink); border: none; display: inline-flex; align-items: baseline; gap: 16px; } .pf-wp-next-body a:hover { color: var(--rust); } .pf-wp-next-body a .arr { font-family: var(--font-mono); font-size: 20px; color: var(--stone); } .pf-wp-next-body a:hover .arr { color: var(--rust); } .pf-wp-next-sub { font-family: var(--font-mono); font-size: 13px; color: var(--stone); margin-top: 10px; } /* writing — post list */ .pf-writing-list { padding: 8px 0 24px; list-style: none; margin: 0; } .pf-writing-post { display: grid; grid-template-columns: 160px 1fr 80px; gap: 24px; padding: 24px 0; border-top: 0.5px solid var(--ink); align-items: baseline; } .pf-writing-post:last-child { border-bottom: 0.5px solid var(--ink); } .pf-writing-post-date { font-family: var(--font-mono); font-size: 12px; color: var(--stone); padding-top: 4px; } .pf-writing-post-main { display: flex; flex-direction: column; gap: 10px; max-width: 720px; } .pf-writing-post-title { font-family: var(--font-sans); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); border: none; padding: 0; display: inline; transition: color var(--dur-base) var(--ease-std); } .pf-writing-post-title:hover { color: var(--rust); } .pf-writing-post-excerpt { font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--ink); margin: 0; } .pf-writing-post-time { font-family: var(--font-mono); font-size: 12px; color: var(--stone); text-align: right; padding-top: 4px; white-space: nowrap; } .pf-writing-status { font-family: var(--font-mono); font-size: 12px; color: var(--stone); padding: 16px 0 8px; } .pf-writing-footer-link { padding: 40px 0 8px; font-family: var(--font-mono); font-size: 13px; } .pf-writing-footer-link a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; } .pf-writing-footer-link a:hover { color: var(--rust); border-bottom-color: var(--rust); } @media (max-width: 900px) { .pf-writing-post { grid-template-columns: 1fr; } .pf-writing-post-time { text-align: left; } } /* ============================================================ home — currently building / writing teaser / trajectory line ============================================================ */ .pf-currently { padding: 16px 0 80px; display: grid; grid-template-columns: 120px 1fr; gap: 24px; } .pf-currently .pf-section-head { grid-column: 1 / -1; margin-bottom: 16px; } .pf-currently-label { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); padding-top: 4px; } .pf-currently-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; max-width: 820px; } .pf-currently-list li { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline; padding: 16px 0; border-top: 0.5px solid var(--ink); font-family: var(--font-mono); font-size: 14px; line-height: 1.65; color: var(--ink); } .pf-currently-list li:last-child { border-bottom: 0.5px solid var(--ink); } .pf-currently-list .cb-name { font-family: var(--font-sans); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); margin-right: 12px; } .pf-currently-list .cb-desc { color: var(--ink); } .pf-currently-list .cb-status { font-family: var(--font-mono); font-size: 11px; color: var(--stone); white-space: nowrap; } .pf-writing-teaser { padding: 16px 0 80px; display: grid; grid-template-columns: 120px 1fr; gap: 24px; } .pf-writing-teaser .pf-section-head { grid-column: 1 / -1; margin-bottom: 16px; } .pf-writing-teaser-body { max-width: 720px; display: flex; flex-direction: column; gap: 16px; } .pf-writing-teaser-body p { font-family: var(--font-mono); font-size: 15px; line-height: 1.75; color: var(--ink); margin: 0; } .pf-trajectory-line { padding: 56px 0 40px; border-top: 0.5px solid var(--ink); display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: baseline; } .pf-trajectory-line-label { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); } .pf-trajectory-line-body { max-width: 720px; font-family: var(--font-sans); font-weight: 500; font-size: 28px; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); } .pf-trajectory-line-body a { border-bottom: 1px solid var(--ink); } /* ============================================================ work — tabs ============================================================ */ .pf-work-tabs { display: flex; gap: 0; padding: 24px 0 0; border-bottom: 0.5px solid var(--ink); } .pf-work-tab { font-family: var(--font-mono); font-size: 13px; background: transparent; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 14px 0 16px; margin-right: 40px; color: var(--stone); cursor: pointer; position: relative; transition: color var(--dur-base) var(--ease-std); } .pf-work-tab:hover { color: var(--ink); } .pf-work-tab.is-active { color: var(--ink); } .pf-work-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.5px; height: 1px; background: var(--rust); } .pf-work-tab .pf-work-tab-count { font-family: var(--font-mono); font-size: 11px; color: var(--stone); margin-left: 8px; } .pf-work-intro { padding: 28px 0 0; max-width: 720px; font-family: var(--font-mono); font-size: 14px; line-height: 1.75; color: var(--stone); } /* placeholder badge for unfinished writeups */ .pf-placeholder-chip { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); display: inline-block; padding: 4px 8px; border: 0.5px solid var(--stone); border-radius: var(--r-sm); margin-top: 12px; } /* ============================================================ experience — timeline ============================================================ */ .pf-exp-hero { padding: 64px 0 48px; display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; } .pf-exp-hero .pf-wp-num { padding-top: 14px; } .pf-exp-hero-body { max-width: 900px; display: flex; flex-direction: column; gap: 24px; } .pf-exp-list { padding: 8px 0 40px; } .pf-exp-entry { display: grid; grid-template-columns: 120px 200px 1fr; gap: 24px; padding: 36px 0; border-top: 0.5px solid var(--ink); } .pf-exp-entry:last-child { border-bottom: 0.5px solid var(--ink); } .pf-exp-dates { font-family: var(--font-mono); font-size: 12px; color: var(--stone); padding-top: 4px; line-height: 1.6; } .pf-exp-company { font-family: var(--font-sans); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); padding-top: 2px; } .pf-exp-company .pf-exp-role { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--stone); letter-spacing: 0; margin-top: 6px; line-height: 1.6; } .pf-exp-body { display: flex; flex-direction: column; gap: 14px; max-width: 620px; } .pf-exp-context { font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--ink); margin: 0; } .pf-exp-stack { font-family: var(--font-mono); font-size: 12px; color: var(--stone); display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; } .pf-exp-ships { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 10px; } .pf-exp-ships li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--ink); } .pf-exp-ships li::before { content: '·'; color: var(--stone); font-family: var(--font-mono); } .pf-exp-links { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; margin-top: 6px; } .pf-exp-links a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; } .pf-exp-links a:hover { color: var(--rust); border-bottom-color: var(--rust); } .pf-exp-before { padding: 64px 0 24px; margin-top: 24px; border-top: 0.5px solid var(--ink); } .pf-exp-before .pf-wp-section-label { margin-bottom: 16px; } /* ============================================================ about — CV-driven sections ============================================================ */ .pf-about-grid { padding: 0 0 64px; } .pf-about-section { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 40px 0; border-top: 0.5px solid var(--ink); } .pf-about-section:last-of-type { border-bottom: 0.5px solid var(--ink); } .pf-about-section-label { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); padding-top: 4px; } .pf-about-section-body { max-width: 720px; display: flex; flex-direction: column; gap: 16px; } .pf-about-section-body h3 { font-family: var(--font-sans); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 4px; } .pf-about-section-body p, .pf-about-section-body li { font-family: var(--font-mono); font-size: 14px; line-height: 1.75; color: var(--ink); margin: 0; } .pf-about-kv { list-style: none; padding: 0; margin: 0; } .pf-about-kv li { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 10px 0; border-top: 0.5px solid var(--ink); font-family: var(--font-mono); font-size: 13px; color: var(--ink); } .pf-about-kv li:last-child { border-bottom: 0.5px solid var(--ink); } .pf-about-kv .k { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); padding-top: 3px; } .pf-about-cv { margin-top: 32px; display: flex; gap: 16px; align-items: center; } /* ============================================================ trajectory — three horizons ============================================================ */ .pf-horizons { padding: 8px 0 40px; } .pf-horizon { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 48px 0; border-top: 0.5px solid var(--ink); } .pf-horizon:last-child { border-bottom: 0.5px solid var(--ink); } .pf-horizon-key { display: flex; flex-direction: column; gap: 4px; } .pf-horizon-num { font-family: var(--font-mono); font-size: 12px; color: var(--stone); } .pf-horizon-span { font-family: var(--font-sans); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); } .pf-horizon-body { max-width: 640px; display: flex; flex-direction: column; gap: 16px; } .pf-horizon-body h3 { font-family: var(--font-sans); font-weight: 500; font-size: 28px; letter-spacing: -0.02em; color: var(--ink); margin: 0; } /* ============================================================ coming-soon (writing / principles / trajectory shells) ============================================================ */ .pf-soon { padding: 48px 0 96px; display: grid; grid-template-columns: 120px 1fr; gap: 24px; } .pf-soon-label { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); padding-top: 4px; } .pf-soon-body { max-width: 620px; display: flex; flex-direction: column; gap: 20px; } .pf-soon-body p { font-family: var(--font-mono); font-size: 15px; line-height: 1.75; color: var(--ink); margin: 0; } .pf-soon-body p.stone { color: var(--stone); } /* ============================================================ footer — socials ============================================================ */ .pf-footer-r.socials { gap: 14px; } .pf-footer-l.socials a, .pf-footer-r.socials a { font-family: var(--font-mono); font-size: 11px; color: var(--stone); border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std); } .pf-footer-l.socials a:hover, .pf-footer-r.socials a:hover { color: var(--rust); border-bottom-color: var(--rust); } .pf-footer-r.socials .sep, .pf-footer-l.socials .sep { color: var(--stone); } /* ============================================================ narrow layouts (additions) ============================================================ */ @media (max-width: 900px) { .pf-exp-entry { grid-template-columns: 1fr; gap: 12px; } .pf-horizon { grid-template-columns: 1fr; gap: 16px; } .pf-about-section, .pf-currently, .pf-writing-teaser, .pf-trajectory-line, .pf-soon { grid-template-columns: 1fr; } .pf-work-tab { margin-right: 24px; } } /* narrow layouts */ @media (max-width: 900px) { .pf-shell { padding: 0 32px; } .pf-wp-hero, .pf-wp-factsheet, .pf-wp-section, .pf-wp-next, .pf-short-about { grid-template-columns: 1fr; } .pf-wp-facts { grid-template-columns: 1fr; } .pf-wp-status { grid-template-columns: repeat(2, 1fr); gap: 20px; } .pf-entry-head { grid-template-columns: 40px 1fr; } .pf-entry-open { grid-column: 2 / 3; } .pf-entry-body { margin-left: 56px; } .pf-wp-changelog li { grid-template-columns: 80px 1fr; } .pf-wp-changelog .cl-tag { grid-column: 1 / 2; padding-top: 0; } }