/* ========================================================== TINA FERNÁNDEZ TYPOGRAPHY SYSTEM text.css SOLO TIPOGRAFÍA. Layout, grids, margins, positioning and media structure remain in style.css / nav.css. ========================================================== */ /* ========================================================== 01 — TYPOGRAPHIC TOKENS ========================================================== */ :root { /* -------------------------------------------------------- FONT FAMILIES -------------------------------------------------------- */ --font-sans: "Geist", Arial, sans-serif; --font-comic: "Comic Relief", "Comic Sans MS", "Comic Sans", cursive; /* -------------------------------------------------------- 01 — HERO DISPLAY Exclusively: GRAPHIC DESIGN IS MY PASSION -------------------------------------------------------- */ --type-hero: clamp( 82px, 12.9vw, 218px ); --type-hero-comic: clamp( 82px, 12.9vw, 218px ); --leading-hero: .79; --tracking-hero: -.094em; /* -------------------------------------------------------- 02 — SECTION DISPLAY Good design happens when... Working with me IMPORTANT: Sized for a half-screen About column. -------------------------------------------------------- */ --type-section: clamp( 38px, 3.65vw, 60px ); --leading-section: .98; --tracking-section: -.058em; /* -------------------------------------------------------- 03 — EDITORIAL LARGE When I say graphic design... My speciality is making things hit different... -------------------------------------------------------- */ --type-editorial: clamp( 27px, 2.55vw, 42px ); --leading-editorial: 1.08; --tracking-editorial: -.048em; /* -------------------------------------------------------- 04 — BODY MEDIUM About 03 Work list rows Footer supporting copy -------------------------------------------------------- */ --type-body: clamp( 16px, 1.15vw, 19px ); --leading-body: 1.4; --tracking-body: -.025em; /* -------------------------------------------------------- 05 — BODY SMALL Working with me labels Soft skills Table headers Small descriptions -------------------------------------------------------- */ --type-small: clamp( 11px, .78vw, 13px ); --leading-small: 1.38; --tracking-small: -.015em; /* -------------------------------------------------------- 06 — META -------------------------------------------------------- */ --type-meta: clamp( 9px, .65vw, 11px ); --leading-meta: 1.2; --tracking-meta: -.01em; /* -------------------------------------------------------- 07 — NAVIGATION Independent from UI controls. -------------------------------------------------------- */ --type-nav: 15px; --leading-nav: 1.1; --tracking-nav: -.03em; /* -------------------------------------------------------- UI CONTROLS -------------------------------------------------------- */ --type-ui: 12px; --leading-ui: 1.15; --tracking-ui: -.02em; /* -------------------------------------------------------- METRIC 98 / 05 / 47 / 91 -------------------------------------------------------- */ --type-metric: clamp( 84px, 8.2vw, 140px ); --leading-metric: .72; --tracking-metric: -.1em; } /* ========================================================== 02 — GLOBAL ========================================================== */ html, body, button, input, textarea, select { font-family: var(--font-sans); } /* ========================================================== 03 — HERO Completely independent from the rest of the typography system. ========================================================== */ .hero-layer h1 { font-family: var(--font-sans) !important; font-size: var(--type-hero) !important; line-height: var(--leading-hero) !important; letter-spacing: var(--tracking-hero) !important; font-weight: 400 !important; } .hero-layer-comic h1 { font-family: var(--font-comic) !important; font-size: var(--type-hero-comic) !important; line-height: .81 !important; letter-spacing: -.086em !important; font-weight: 400 !important; } /* ========================================================== HERO IS / MY ========================================================== */ .is-my-block { font-size: .235em !important; line-height: 1 !important; letter-spacing: -.07em !important; font-weight: 500 !important; } .hero-layer-comic .is-my-block { font-size: .215em !important; line-height: 1.05 !important; letter-spacing: -.055em !important; font-weight: 400 !important; } /* ========================================================== 04 — SECTION DISPLAY GOOD DESIGN... WORKING WITH ME They share a role, but Good Design receives a very subtle size increase below. ========================================================== */ .about-reveal-line, .about-reveal-overlay, .about-work-heading h3 { font-family: var(--font-sans) !important; font-size: var(--type-section) !important; line-height: var(--leading-section) !important; letter-spacing: var(--tracking-section) !important; font-weight: 500 !important; } /* ========================================================== GOOD DESIGN Slightly larger than Working with me, but still calibrated to fit the About column. ========================================================== */ .about-reveal-line, .about-reveal-overlay { font-size: clamp( 40px, 3.78vw, 62px ) !important; line-height: .98 !important; letter-spacing: -.06em !important; } /* ========================================================== GOOD DESIGN — LINE STRUCTURE IMPORTANT FIX: authored lines stay intact on desktop, without extending outside the content column. ========================================================== */ .about-heading-reveal { font-family: var(--font-sans); } .about-reveal-line { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; align-items: baseline !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: .22em !important; white-space: nowrap !important; } .about-reveal-overlay { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; align-items: baseline !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: .22em !important; white-space: nowrap !important; } /* ========================================================== GOOD DESIGN — INDIVIDUAL WORDS ========================================================== */ .about-word { flex: 0 0 auto; min-width: 0; font-family: var(--font-sans) !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; font-weight: inherit !important; white-space: nowrap; } /* ========================================================== CREATIVITY / INTELLIGENCE SAME SIZE as the surrounding display. Typeface is the only hierarchy change. ========================================================== */ .about-word-comic { flex: 0 0 auto; font-family: var(--font-comic) !important; font-size: inherit !important; line-height: inherit !important; /* Less aggressive tracking. This also makes creativity / and / intelligence read as three properly separated units. */ letter-spacing: -.025em !important; font-weight: 400 !important; white-space: nowrap; } /* ========================================================== 05 — EDITORIAL LARGE When I say graphic design... My speciality is making things... ========================================================== */ .about-medium-copy { font-family: var(--font-sans) !important; font-size: var(--type-editorial) !important; line-height: var(--leading-editorial) !important; letter-spacing: var(--tracking-editorial) !important; font-weight: 450 !important; } /* ========================================================== EXPRESSIVE WORDS INSIDE EDITORIAL COPY Passion Hit different Feel Typeface changes. Size does not. ========================================================== */ .about-keyword { font-family: var(--font-comic) !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: -.025em !important; font-weight: 400 !important; } /* ========================================================== 06 — BODY MEDIUM About 03 Work List ========================================================== */ .about-small-copy, .work-list-row { font-family: var(--font-sans) !important; font-size: var(--type-body) !important; line-height: var(--leading-body) !important; letter-spacing: var(--tracking-body) !important; font-weight: 400 !important; } /* ========================================================== WORK LIST — PROJECT NAME ========================================================== */ .work-list-name { font-family: var(--font-sans) !important; font-size: var(--type-body) !important; line-height: 1.15 !important; letter-spacing: -.035em !important; font-weight: 550 !important; } /* ========================================================== WORK LIST — INFORMATION ========================================================== */ .work-list-row > span:not(.work-list-name):not(.work-list-arrow) { font-family: var(--font-sans) !important; font-size: var(--type-body) !important; line-height: 1.25 !important; letter-spacing: var(--tracking-body) !important; font-weight: 400 !important; } /* ========================================================== 07 — BODY SMALL Shared by: + People person Problem-solving instinct Supporting copy Work table headings ========================================================== */ .soft-skill-title, .soft-skill p, .work-stat-label, .work-stat-caption, .work-list-head, .project-info p { font-family: var(--font-sans) !important; font-size: var(--type-small) !important; line-height: var(--leading-small) !important; letter-spacing: var(--tracking-small) !important; } /* ========================================================== WORKING WITH ME + SOFT SKILLS SHARED LABEL STYLE Problem-solving instinct Actual chaos level Ideas before coffee People skills = + People person + Team-safe + Open-minded + Good under pressure ========================================================== */ .work-stat-label, .soft-skill-title { color: var(--black) !important; font-size: var(--type-small) !important; line-height: var(--leading-small) !important; letter-spacing: var(--tracking-small) !important; font-weight: 600 !important; text-transform: none !important; } /* ========================================================== WORKING WITH ME + SOFT SKILLS SHARED DESCRIPTION STYLE ========================================================== */ .work-stat-caption, .soft-skill p:not(.soft-skill-title) { color: var(--grey) !important; font-size: var(--type-small) !important; line-height: var(--leading-small) !important; letter-spacing: var(--tracking-small) !important; font-weight: 400 !important; text-transform: none !important; } /* ========================================================== WORK TABLE HEADER Project Category Discipline Tools Year ========================================================== */ .work-list-head { color: var(--grey) !important; font-family: var(--font-sans) !important; font-size: var(--type-small) !important; line-height: var(--leading-small) !important; letter-spacing: var(--tracking-small) !important; font-weight: 500 !important; text-transform: none !important; } /* ========================================================== 08 — META ========================================================== */ .hero-meta, .about-number, .work-stat-denominator, .footer-header, .footer-contact-label, .footer-bottom { font-family: var(--font-sans) !important; font-size: var(--type-meta) !important; line-height: var(--leading-meta) !important; letter-spacing: var(--tracking-meta) !important; } /* ========================================================== ABOUT NUMBERS ========================================================== */ .about-number { color: var(--grey); font-weight: 500 !important; } /* ========================================================== 09 — NAVIGATION Own independent scale. ========================================================== */ .nav-link { font-family: var(--font-sans); font-size: var(--type-nav) !important; line-height: var(--leading-nav) !important; letter-spacing: var(--tracking-nav) !important; font-weight: 450 !important; } .nav-link.is-current { font-family: var(--font-comic); font-size: var(--type-nav) !important; line-height: var(--leading-nav) !important; font-weight: 400 !important; } /* ========================================================== 10 — UI CONTROLS ========================================================== */ .hero-work-link, .work-view-toggle-button, .text-link { font-family: var(--font-sans); font-size: var(--type-ui) !important; line-height: var(--leading-ui) !important; letter-spacing: var(--tracking-ui) !important; font-weight: 450; } /* ========================================================== 11 — PROJECT CAROUSEL INFO ========================================================== */ .project-info h2 { font-family: var(--font-sans) !important; font-size: var(--type-body) !important; line-height: 1.1 !important; letter-spacing: -.035em !important; font-weight: 550 !important; } .project-info p { color: var(--grey) !important; font-family: var(--font-sans) !important; font-size: var(--type-small) !important; line-height: 1.3 !important; letter-spacing: var(--tracking-small) !important; font-weight: 400 !important; } /* ========================================================== 12 — PROJECT HOVER ========================================================== */ .project-hover-name { font-family: var(--font-sans) !important; font-size: var(--type-body) !important; line-height: 1.1 !important; letter-spacing: -.035em !important; font-weight: 550 !important; } .project-hover-disciplines { font-family: var(--font-sans) !important; font-size: var(--type-small) !important; line-height: 1.25 !important; letter-spacing: var(--tracking-small) !important; } /* ========================================================== 13 — METRICS 98 / 05 / 47 / 91 ========================================================== */ .counter-number { font-family: var(--font-sans) !important; font-size: var(--type-metric) !important; line-height: var(--leading-metric) !important; letter-spacing: var(--tracking-metric) !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; } .work-stat-denominator { color: var(--grey) !important; font-family: var(--font-sans) !important; font-size: var(--type-meta) !important; line-height: 1 !important; letter-spacing: var(--tracking-meta) !important; font-weight: 400 !important; } /* ========================================================== 14 — FOOTER ========================================================== */ .footer-heading { font-family: var(--font-sans) !important; font-size: clamp( 70px, 11.5vw, 200px ) !important; line-height: .78 !important; letter-spacing: -.085em !important; font-weight: 520 !important; } .footer-eyebrow, .footer-contact-value { font-family: var(--font-sans) !important; font-size: var(--type-body) !important; line-height: var(--leading-body) !important; letter-spacing: var(--tracking-body) !important; font-weight: 400 !important; } /* ========================================================== 15 — TABLET ========================================================== */ @media (min-width: 801px) and (max-width: 1100px) { :root { --type-section: clamp( 34px, 4vw, 44px ); --type-editorial: clamp( 24px, 2.8vw, 31px ); --type-body: clamp( 15px, 1.65vw, 18px ); --type-small: clamp( 11px, 1.15vw, 12px ); --type-nav: 15px; } /* Good Design stays slightly stronger than Working with me. */ .about-reveal-line, .about-reveal-overlay { font-size: clamp( 35px, 4.1vw, 45px ) !important; } } /* ========================================================== 16 — MOBILE Strong hierarchy: SECTION DISPLAY ↓ EDITORIAL ↓ BODY ↓ SMALL ========================================================== */ @media (max-width: 800px) { :root { /* ------------------------------------------------------ SECTION ------------------------------------------------------ */ --type-section: clamp( 30px, 8.3vw, 42px ); --leading-section: .98; --tracking-section: -.055em; /* ------------------------------------------------------ EDITORIAL LARGE ------------------------------------------------------ */ --type-editorial: clamp( 22px, 6.25vw, 31px ); --leading-editorial: 1.08; --tracking-editorial: -.045em; /* ------------------------------------------------------ BODY MEDIUM ------------------------------------------------------ */ --type-body: clamp( 15px, 4.35vw, 18px ); --leading-body: 1.4; /* ------------------------------------------------------ BODY SMALL ------------------------------------------------------ */ --type-small: clamp( 10px, 3vw, 12px ); --leading-small: 1.36; /* ------------------------------------------------------ META ------------------------------------------------------ */ --type-meta: clamp( 9px, 2.55vw, 10px ); /* ------------------------------------------------------ NAV ------------------------------------------------------ */ --type-nav: 15px; /* ------------------------------------------------------ UI ------------------------------------------------------ */ --type-ui: 11px; /* ------------------------------------------------------ METRIC ------------------------------------------------------ */ --type-metric: clamp( 60px, 18vw, 94px ); } /* ======================================================== GOOD DESIGN The key responsive correction. Each authored line remains one line whenever possible. Size is calculated for mobile width rather than desktop. ======================================================== */ .about-reveal-line, .about-reveal-overlay { font-size: clamp( 29px, 8.35vw, 40px ) !important; line-height: .99 !important; letter-spacing: -.052em !important; } /* Keep the authored lines compact. */ .about-reveal-line { display: flex !important; flex-wrap: nowrap !important; align-items: baseline !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; column-gap: .2em !important; white-space: nowrap !important; } .about-reveal-overlay { display: flex !important; flex-wrap: nowrap !important; align-items: baseline !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; column-gap: .2em !important; white-space: nowrap !important; } .about-word { flex: 0 0 auto; white-space: nowrap; } .about-word-comic { flex: 0 0 auto; font-size: inherit !important; line-height: inherit !important; letter-spacing: -.02em !important; white-space: nowrap; } /* ======================================================== WORKING WITH ME Same family, slightly calmer than Good Design. ======================================================== */ .about-work-heading h3 { font-size: var(--type-section) !important; line-height: var(--leading-section) !important; letter-spacing: var(--tracking-section) !important; } /* ======================================================== ABOUT 01 / 02 Clearly larger than body copy. ======================================================== */ .about-medium-copy { font-size: var(--type-editorial) !important; line-height: var(--leading-editorial) !important; letter-spacing: var(--tracking-editorial) !important; } /* ======================================================== ABOUT 03 / WORK LIST ======================================================== */ .about-small-copy, .work-list-row { font-size: var(--type-body) !important; line-height: var(--leading-body) !important; } /* ======================================================== WORK LIST NAME ======================================================== */ .work-list-name { font-size: var(--type-body) !important; } /* ======================================================== WORK LIST SECONDARY INFO ======================================================== */ .work-list-row span:nth-child(3), .work-list-row span:nth-child(5) { font-size: var(--type-small) !important; line-height: var(--leading-small) !important; } /* ======================================================== WORKING WITH ME LABELS + SOFT SKILLS ======================================================== */ .work-stat-label, .soft-skill-title { color: var(--black) !important; font-size: var(--type-small) !important; line-height: var(--leading-small) !important; font-weight: 600 !important; text-transform: none !important; } /* ======================================================== WORKING WITH ME DESCRIPTIONS + SOFT SKILLS ======================================================== */ .work-stat-caption, .soft-skill p:not(.soft-skill-title) { color: var(--grey) !important; font-size: var(--type-small) !important; line-height: var(--leading-small) !important; font-weight: 400 !important; } /* ======================================================== PROJECT INFO ======================================================== */ .project-info h2 { font-size: var(--type-body) !important; } .project-info p { font-size: var(--type-small) !important; } /* ======================================================== NAV ======================================================== */ .nav-link { font-size: var(--type-nav) !important; } /* ======================================================== FOOTER ======================================================== */ .footer-heading { font-size: clamp( 48px, 17vw, 100px ) !important; } .footer-eyebrow, .footer-contact-value { font-size: var(--type-body) !important; } } /* ========================================================== 17 — SMALL MOBILE ========================================================== */ @media (max-width: 480px) { :root { --type-section: clamp( 29px, 8.1vw, 36px ); --type-editorial: clamp( 21px, 6.1vw, 27px ); --type-body: clamp( 15px, 4.5vw, 17px ); --type-small: clamp( 10px, 3.1vw, 11px ); --type-nav: 15px; --type-metric: clamp( 52px, 17vw, 78px ); } /* Good Design still gets the small display bump. */ .about-reveal-line, .about-reveal-overlay { font-size: clamp( 29px, 8.3vw, 36px ) !important; column-gap: .18em !important; } } /* ========================================================== 18 — VERY NARROW MOBILE ========================================================== */ @media (max-width: 370px) { :root { --type-section: clamp( 27px, 8vw, 31px ); --type-editorial: clamp( 19px, 5.9vw, 23px ); --type-body: 15px; --type-small: 10px; --type-meta: 9px; --type-nav: 15px; --type-ui: 10px; --type-metric: clamp( 48px, 15.5vw, 65px ); } .about-reveal-line, .about-reveal-overlay { font-size: clamp( 27px, 7.9vw, 30px ) !important; column-gap: .15em !important; letter-spacing: -.055em !important; } } /* ========================================================== 19 — PROJECT PAGE TYPOGRAPHY The project template now consumes ONLY the tokens defined in this file. project.css controls layout; text.css controls type scale, leading, tracking and weight. ========================================================== */ /* PROJECT NUMBER / EYEBROW */ .project-index, .project-eyebrow { font-family: var(--font-sans) !important; font-size: var(--type-meta) !important; line-height: var(--leading-meta) !important; letter-spacing: var(--tracking-meta) !important; font-weight: 400 !important; } /* PROJECT TITLE */ .project-title { font-family: var(--font-sans) !important; font-size: var(--type-section) !important; line-height: var(--leading-section) !important; letter-spacing: var(--tracking-section) !important; font-weight: 500 !important; } /* CATEGORY / DISCIPLINES / YEAR / CLIENT / ROLE Both labels and values intentionally use BODY SMALL. */ .project-meta-row dt, .project-meta-row dd { font-family: var(--font-sans) !important; font-size: var(--type-small) !important; line-height: var(--leading-small) !important; letter-spacing: var(--tracking-small) !important; font-weight: 400 !important; } .project-meta-row dt { color: var(--project-soft-grey, var(--grey)) !important; } /* PROJECT DESCRIPTION */ .project-description, .project-description p { font-family: var(--font-sans) !important; font-size: var(--type-body) !important; line-height: var(--leading-body) !important; letter-spacing: var(--tracking-body) !important; font-weight: 400 !important; } /* ACTIVE MEDIA COMMENT — MOBILE + DESKTOP FOLLOWER */ .project-mobile-caption-main, .project-media-comment-main { font-family: var(--font-sans) !important; font-size: var(--type-body) !important; line-height: var(--leading-body) !important; letter-spacing: var(--tracking-body) !important; font-weight: 400 !important; } /* PROJECT CONTROLS */ .project-gallery-counter, .project-gallery-hint, .project-navigation-link { font-family: var(--font-sans) !important; font-size: var(--type-ui) !important; line-height: var(--leading-ui) !important; letter-spacing: var(--tracking-ui) !important; font-weight: 450 !important; } /* ========================================================== MOBILE PROJECT TYPE No new pixel sizes are introduced here. Everything inherits the mobile token values already declared earlier in this same text.css. ========================================================== */ @media (max-width: 800px) { .project-title { font-size: var(--type-section) !important; line-height: var(--leading-section) !important; letter-spacing: var(--tracking-section) !important; } .project-meta-row dt, .project-meta-row dd { font-size: var(--type-small) !important; line-height: var(--leading-small) !important; letter-spacing: var(--tracking-small) !important; } .project-description, .project-description p, .project-mobile-caption-main { font-size: var(--type-body) !important; line-height: var(--leading-body) !important; letter-spacing: var(--tracking-body) !important; } } /* ========================================================== 20 — AUTHORITATIVE TYPE MAPPING / REFINEMENT 02 Any component text added to the current site maps back to the tokens above. Layout CSS must not define its own scale. ========================================================== */ body, button, a, p, span, dt, dd, h1, h2, h3 { font-family: var(--font-sans); } /* Working with me: keep the black labels/titles exactly as they are. */ .work-stat-label, .soft-skill-title { font-size: var(--type-small) !important; line-height: var(--leading-small) !important; letter-spacing: var(--tracking-small) !important; font-weight: 600 !important; } /* Grey supporting copy is promoted to the same BODY scale used by Work. */ .work-stat-caption, .soft-skill p:not(.soft-skill-title) { color: var(--grey) !important; font-size: var(--type-body) !important; line-height: var(--leading-body) !important; letter-spacing: var(--tracking-body) !important; font-weight: 400 !important; } /* Project mobile media commentary: body scale, deliberately quieter. */ .project-mobile-caption-main { color: var(--project-grey, var(--grey)) !important; font-size: var(--type-body) !important; line-height: var(--leading-body) !important; letter-spacing: var(--tracking-body) !important; font-weight: 400 !important; } /* Project metadata always uses BODY SMALL, labels and values alike. */ .project-meta-row dt, .project-meta-row dd { font-size: var(--type-small) !important; line-height: var(--leading-small) !important; letter-spacing: var(--tracking-small) !important; font-weight: 400 !important; } /* ========================================================== 22 — PROJECT EXTERNAL LINKS ========================================================== */ .project-external-link { font-family: var(--font-sans) !important; font-size: var(--type-ui) !important; line-height: var(--leading-ui) !important; letter-spacing: var(--tracking-ui) !important; font-weight: 450 !important; } /* ========================================================== 23 — PROJECT UX FLOW ========================================================== */ .project-stage-guidance-main, .project-details-kicker, .project-details-next { font-family: var(--font-sans) !important; font-size: var(--type-ui) !important; line-height: var(--leading-ui) !important; letter-spacing: var(--tracking-ui) !important; font-weight: 450 !important; } .project-stage-guidance-small { font-family: var(--font-sans) !important; font-size: var(--type-small) !important; line-height: var(--leading-small) !important; letter-spacing: var(--tracking-small) !important; font-weight: 400 !important; } .project-details-title { font-family: var(--font-sans) !important; font-size: var(--type-section) !important; line-height: var(--leading-section) !important; letter-spacing: var(--tracking-section) !important; font-weight: 500 !important; } .project-details .project-description, .project-details .project-description p { font-family: var(--font-sans) !important; font-size: var(--type-editorial) !important; line-height: var(--leading-editorial) !important; letter-spacing: var(--tracking-editorial) !important; font-weight: 400 !important; } @media (max-width: 800px) { .project-details .project-description, .project-details .project-description p { font-size: var(--type-body) !important; line-height: var(--leading-body) !important; letter-spacing: var(--tracking-body) !important; } } /* ========================================================== 24 — PROJECT CHAPTER TYPOGRAPHY ========================================================== */ .project-section-tag, .project-chapter-index, .project-chapter-project, .project-chapter-guidance-main, .project-chapter-counter, .project-chapter-hint, .project-chapter-details-kicker, .project-chapter-next { font-family: var(--font-sans) !important; font-size: var(--type-ui) !important; line-height: var(--leading-ui) !important; letter-spacing: var(--tracking-ui) !important; font-weight: 450 !important; } .project-chapter-guidance-small { font-family: var(--font-sans) !important; font-size: var(--type-small) !important; line-height: var(--leading-small) !important; letter-spacing: var(--tracking-small) !important; font-weight: 400 !important; } .project-chapter-title, .project-chapter-details-title { font-family: var(--font-sans) !important; font-size: var(--type-section) !important; line-height: var(--leading-section) !important; letter-spacing: var(--tracking-section) !important; font-weight: 500 !important; } .project-chapter-description, .project-chapter-description p { font-family: var(--font-sans) !important; font-size: var(--type-editorial) !important; line-height: var(--leading-editorial) !important; letter-spacing: var(--tracking-editorial) !important; font-weight: 400 !important; } @media (max-width: 800px) { .project-chapter-description, .project-chapter-description p { font-size: var(--type-body) !important; line-height: var(--leading-body) !important; letter-spacing: var(--tracking-body) !important; } } /* ========================================================== 25 — PROJECT QUICK / PERSISTENT NAVIGATION ========================================================== */ .project-quick-link, .project-persistent-link { font-family: var(--font-sans) !important; font-size: var(--type-ui) !important; line-height: var(--leading-ui) !important; letter-spacing: var(--tracking-ui) !important; font-weight: 450 !important; } /* ========================================================== 2026-08-13 — PROJECT CONTROL SCALE UNIFICATION ========================================================== */ .project-index, .project-section-tag, .project-chapter-project-index, .project-chapter-index, .project-stage-guidance-main, .project-chapter-guidance-main, .project-action-link, .project-info-action, .project-external-link, .project-persistent-link, .project-gallery-counter, .project-chapter-counter { font-family: var(--font-sans) !important; font-size: var(--type-ui) !important; line-height: var(--leading-ui) !important; letter-spacing: var(--tracking-ui) !important; font-weight: 450 !important; } /* ========================================================== PROJECT ACTIONS — SAME SCALE AS WORKING WITH ME COPY ========================================================== */ .project-action-link, .project-info-action, .project-external-link, .project-persistent-link { font-family: var(--font-sans) !important; font-size: var(--type-body) !important; line-height: var(--leading-body) !important; letter-spacing: var(--tracking-body) !important; font-weight: 400 !important; } /* Work list hierarchy: metadata supports the project name. */ @media (min-width: 801px) { .work-list-row > span:nth-child(3), .work-list-row > span:nth-child(4) { font-size: var(--type-small) !important; line-height: var(--leading-small) !important; letter-spacing: var(--tracking-small) !important; } } @media (max-width: 800px) { .work-list-row > span:nth-child(3) { font-size: var(--type-meta) !important; line-height: var(--leading-meta) !important; letter-spacing: var(--tracking-meta) !important; } }