/* Shannon Hecker portfolio — shared typography (load last in ) */ :root { --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Noto Serif Display', Georgia, 'Times New Roman', serif; --t-micro: clamp(9px, 1vw, 10px); --t-tiny: clamp(11px, 1.2vw, 12px); --t-sm: clamp(13px, 1.4vw, 14px); --t-base: clamp(15px, 1.6vw, 17px); --t-md: clamp(17px, 1.8vw, 20px); --t-lg: clamp(22px, 2.4vw, 28px); --t-xl: clamp(30px, 3.8vw, 44px); --t-2xl: clamp(42px, 5.5vw, 60px); --t-hero: clamp(56px, 9vw, 112px); --t-section: clamp(22px, 2.8vw, 34px); --t-page-title: clamp(32px, 5vw, 56px); --t-work-hero: clamp(40px, 6vw, 80px); --t-section-block: clamp(24px, 3vw, 36px); --t-next-project: clamp(24px, 3vw, 40px); --t-next-label: clamp(20px, 2.6vw, 28px); --fw-body: 300; --fw-ui: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-body: 1.75; --lh-prose: 1.75; --lh-snug: 1.65; --track-overline: 0.22em; --track-overline-tight: 0.18em; --track-label: 0.14em; --track-ui: 0.01em; } /* ----- Global navigation ----- */ .nav-links a { font-size: var(--t-sm); font-weight: var(--fw-ui); letter-spacing: var(--track-ui); } .nav-cta { font-size: var(--t-sm); font-weight: var(--fw-ui); } .nav-drawer a { font-size: var(--t-lg); font-weight: var(--fw-semibold); } /* ----- Section headings (featured, about blocks, etc.) ----- */ .sh-eyebrow { font-size: var(--t-micro); font-weight: var(--fw-semibold); letter-spacing: var(--track-overline); text-transform: uppercase; } .sh-text { font-family: var(--font-display); font-size: var(--t-section); font-weight: var(--fw-ui); letter-spacing: -0.02em; } .sh-link { font-size: var(--t-sm); font-weight: var(--fw-ui); letter-spacing: var(--track-ui); text-transform: none; } /* Work listing hero */ .work-hero-eyebrow { font-size: var(--t-micro); font-weight: var(--fw-semibold); letter-spacing: var(--track-overline); text-transform: uppercase; } .work-hero-title { font-family: var(--font-display); font-size: var(--t-work-hero); font-weight: var(--fw-semibold); letter-spacing: -0.03em; } .work-hero-sub { font-size: var(--t-base); font-weight: var(--fw-body); line-height: var(--lh-body); } /* ----- Footer ----- */ .footer-copy { font-size: var(--t-sm); font-weight: var(--fw-body); } .footer-li { font-size: var(--t-sm); font-weight: var(--fw-medium); } /* ----- Chips & placeholders ----- */ .chip { font-size: var(--t-tiny); font-weight: var(--fw-medium); letter-spacing: 0.03em; } .ph { font-size: var(--t-micro); font-weight: var(--fw-semibold); letter-spacing: var(--track-label); } /* ----- Project grid cards (work + index work strip) ----- */ .pcard-title { font-size: clamp(15px, 1.7vw, 20px); font-weight: var(--fw-medium); letter-spacing: -0.02em; line-height: 1.2; } .pcard-num { font-size: var(--t-tiny); font-weight: var(--fw-medium); letter-spacing: 0.04em; } .pcard-desc { font-size: var(--t-sm); font-weight: var(--fw-body); line-height: 1.55; } .work .pcard-caption-title { font-size: var(--t-micro); font-weight: var(--fw-semibold); letter-spacing: var(--track-label); } /* ----- Case study / project template ----- */ .proj-breadcrumb { font-size: var(--t-tiny); font-weight: var(--fw-ui); } .proj-meta-label, .proj-eyebrow, .proj-section-label { font-size: var(--t-micro); font-weight: var(--fw-semibold); letter-spacing: var(--track-overline); text-transform: uppercase; } .proj-meta-label { letter-spacing: var(--track-overline-tight); } .proj-meta-value { font-size: var(--t-sm); font-weight: var(--fw-medium); } .proj-title-post { font-family: var(--font-display); font-size: var(--t-page-title); font-weight: var(--fw-ui); letter-spacing: -0.03em; line-height: 1.08; } .proj-lead { font-size: var(--t-md); font-weight: var(--fw-body); line-height: var(--lh-snug); } .proj-about-label { font-family: var(--font-display); font-size: var(--t-section); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.12; } .proj-about-h3, .proj-media-cap-label { font-size: var(--t-tiny); font-weight: var(--fw-semibold); letter-spacing: var(--track-label); text-transform: uppercase; } .proj-body { font-size: var(--t-base); font-weight: var(--fw-body); line-height: var(--lh-prose); } .proj-body strong { font-weight: var(--fw-semibold); } .proj-nda-body { font-size: var(--t-sm); font-weight: var(--fw-body); line-height: var(--lh-snug); color: var(--c-mid); } .proj-section-title { font-size: var(--t-section-block); font-weight: var(--fw-semibold); letter-spacing: -0.03em; } .proj-title { font-size: var(--t-2xl); font-weight: var(--fw-bold); letter-spacing: -0.04em; line-height: 0.95; text-transform: uppercase; } .proj-subtitle { font-size: var(--t-md); font-weight: var(--fw-body); line-height: var(--lh-snug); } .proj-nda-title { font-family: var(--font-display); font-size: clamp(28px, 4.2vw, 42px); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1.12; } .proj-nda-lead { font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 34px); font-weight: var(--fw-bold); letter-spacing: -0.025em; line-height: 1.15; } .proj-media-cap-text { font-size: var(--t-sm); font-weight: var(--fw-body); line-height: var(--lh-snug); } .proj-outcome-num { font-size: clamp(28px, 3.5vw, 44px); font-weight: var(--fw-bold); letter-spacing: -0.04em; } .proj-outcome-label { font-size: var(--t-tiny); font-weight: var(--fw-ui); } .proj-tag { font-size: var(--t-tiny); font-weight: var(--fw-ui); } .proj-next-label { font-family: var(--font-display); font-size: var(--t-next-label); font-weight: var(--fw-medium); letter-spacing: -0.02em; } .proj-next-link { font-size: var(--t-next-project); font-weight: var(--fw-ui); letter-spacing: -0.03em; } /* Featured strip meta line (index) */ .sh-meta { font-size: var(--t-tiny); font-weight: var(--fw-body); letter-spacing: 0.04em; color: var(--c-ghost); align-self: center; }