/* ============================================================ About page — scoped refinements Linked AFTER styles.css. Scoped via .about-page on . Do NOT redefine global classes here. ============================================================ */ /* ---- 1. Bio column — flow, not card UI -------------------- */ /* The bio sits in a stretched split next to a full-height portrait. The default .card border + bg makes it feel like a UI tile. Inside about-page we lift those tile decorations for the bio stack only, keeping editorial flow. */ .about-page .about-bio, .about-page .about-credits { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; transition: none; } .about-page .about-bio:hover, .about-page .about-credits:hover { transform: none; box-shadow: none; } .about-page .about-bio h3 { font-family: var(--ff-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--stone); font-weight: 500; margin: 0 0 1.25rem 0; display: flex; align-items: center; gap: 0.75rem; } .about-page .about-bio h3::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--oxblood); } .about-page .about-bio p { font-size: 1.06rem; line-height: 1.72; color: var(--text-2); max-width: 56ch; } .about-page .about-bio p:first-of-type { font-family: var(--serif); font-size: clamp(1.18rem, 1.8vw, 1.4rem); font-weight: 300; font-style: normal; line-height: 1.45; color: var(--ink); max-width: 30ch; margin-bottom: 1.5rem; } .about-page .about-bio p:first-of-type::first-letter { font-family: var(--serif); font-size: 3.2em; font-weight: 400; float: left; line-height: 0.85; margin: 0.08em 0.12em 0 -0.04em; color: var(--oxblood); } /* ---- 2. Credibility index — editorial mono row, not bullets */ .about-page .about-credits { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1.75rem, 3vw, 2rem); border-top: 1px solid var(--whisper); } .about-page .about-credits h3 { font-family: var(--ff-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--stone); font-weight: 500; margin: 0 0 1.25rem 0; } .about-page .credit-strip { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .about-page .credit-strip li { display: grid; grid-template-columns: 28px 1fr; column-gap: 1rem; align-items: baseline; padding: 0.95rem 0; border-bottom: 1px solid var(--whisper); font-family: var(--serif); font-size: 1.02rem; font-weight: 400; line-height: 1.45; color: var(--ink); } .about-page .credit-strip li::before { content: counter(credit, decimal-leading-zero); counter-increment: credit; font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; color: var(--oxblood); } .about-page .credit-strip { counter-reset: credit; } .about-page .credit-strip li:first-child { border-top: 1px solid var(--whisper); } /* Hide the global ::before check icon inside our scoped strip */ .about-page .credit-strip li > * { /* placeholder so the rule above wins specificity */ } /* ---- 3. Credentials section — section eyebrow rhythm ------- */ .about-page .credentials-section .eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; } .about-page .credentials-section .eyebrow::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--oxblood); } .about-page .credentials-section .credentials-lead { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 400; font-style: normal; line-height: 1.32; letter-spacing: -0.01em; color: var(--ink); max-width: 22ch; margin: 1rem 0 clamp(2rem, 4vw, 3rem); } .about-page .credentials-section .credentials-lead em { font-style: italic; color: var(--oxblood); } /* Trophy image — slightly tighter aspect, no rounded "card" look */ .about-page .about-experience .media-placeholder--wide { border-radius: var(--radius); margin-top: clamp(2.5rem, 5vw, 4rem); aspect-ratio: 16 / 9; min-height: 0; padding: 0; } .about-page .about-experience .media-placeholder--wide > img { object-position: center top; } /* ---- 4. Positioning section ------------------------------- */ .about-page .positioning-section .positioning-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .about-page .positioning-section .positioning-eyebrow::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--oxblood); } .about-page .positioning-section h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 1.5rem; } .about-page .positioning-section h2 em { font-style: italic; font-weight: 300; } .about-page .positioning-section .lead { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.35rem); font-weight: 300; line-height: 1.55; color: var(--text); max-width: 38ch; } .about-page .positioning-section .positioning-link { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); font-family: var(--ff-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--oxblood); padding-bottom: 4px; transition: color 0.25s ease, gap 0.3s var(--ease-out-quint, ease); } .about-page .positioning-section .positioning-link:hover { color: var(--oxblood); gap: 0.9rem; } /* ---- 5. Section rhythm: tighten consecutive warm sections -- */ /* The bio (warm) → credentials (bone) → positioning (warm) flow needs slightly compressed transitions so the page reads as a single editorial spread instead of separate marketing blocks. */ .about-page main > section + section { /* allow each section to keep its own padding; nothing to do globally */ } /* ---- 6. Hero — refine type rhythm ------------------------- */ .about-page .hero--with-inset .hero__title { letter-spacing: -0.018em; } .about-page .hero--with-inset .hero__lead { max-width: 42ch; } /* ---- 7. Reveal-on-scroll (subtle) ------------------------- */ /* The base [data-reveal] selector already provides opacity/translate. Nothing to add here — the new data-reveal attributes added in HTML inherit the global behavior. */ /* Responsive tweaks */ @media (max-width: 860px) { .about-page .about-bio p:first-of-type { max-width: none; } .about-page .positioning-section h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); } } /* ================================================================ 2026-07 client copy revisions — additive rules only. ================================================================ */ /* Hero body — three intro paragraphs under the lead line */ .about-page .about-hero__body { margin-top: 1.5rem; max-width: 58ch; } .about-page .about-hero__body p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.65; color: var(--stone); margin: 0 0 0.85em; } .about-page .about-hero__body p:last-child { margin-bottom: 0; } .about-page .about-hero__closer { color: var(--ink); font-size: 1.15rem !important; font-weight: 500; margin-top: 1rem !important; } /* Built by experience — 2-column groups */ .about-experience__head { max-width: 620px; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .about-experience__title { font-family: var(--serif); font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0.75rem 0 0; } .about-experience__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem); } .about-experience__col { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); } @media (max-width: 800px) { .about-experience__grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); } } .cred-group { padding: 0; } .cred-group__title { font-family: var(--ff-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--oxblood); margin: 0 0 1.15rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--whisper); } .cred-group__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; } .cred-group__list li { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.35; } .cred-group__list li strong { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; color: var(--ink); } .cred-group__list li span { font-family: var(--ff-body); font-size: 0.9rem; color: var(--stone); } .cred-group__list--dense { gap: 0.55rem; } .cred-group__list--dense li strong { font-size: 0.98rem; } .cred-group__prose p { font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--stone); margin: 0 0 0.75em; } .cred-group__prose p:last-child { margin-bottom: 0; }