/* ════════════════════════════════════════════════════════════ Studio Barnes — About page section-layout options Toggled via the "Section layout" tweak (data-seclayout on ). editorial → the base layout in v2.css (no rules here) indexed → split story, divided number band, stacked rows Scoped to the three body sections; hero / cinematic / CTA unchanged. ════════════════════════════════════════════════════════════ */ /* ── Story + "I help turn messy…": single heading + paragraph copy, heading in the hero/display voice (Open Sans Light, tight tracking) ── */ body[data-page="about"] section[data-screen-label="The story"] .story-head, body[data-page="about"] section[data-screen-label="What I do"] .display-2 { font-size: clamp(30px, 4.2vw, 60px); font-weight: var(--weight-light); letter-spacing: -0.018em; line-height: 1.1; color: var(--sb-white); margin: 0; text-wrap: balance; } body[data-page="about"] section[data-screen-label="The story"] .story-body { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 38px); max-width: 64ch; } body[data-page="about"] .story-copy { display: flex; flex-direction: column; gap: var(--space-4); max-width: 60ch; } body[data-page="about"] .story-copy p { margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: var(--leading-body); color: var(--text-body); text-wrap: pretty; } body[data-page="about"] .story-copy__lead { color: var(--sb-white); } body[data-page="about"] .outgrown-copy p { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.6); } /* ── The Story: aside (label + portrait) beside the narrative ── */ body[data-page="about"] section[data-screen-label="The story"] .story-wrap { display: grid; grid-template-columns: minmax(230px, 0.78fr) minmax(0, 1.55fr); gap: clamp(32px, 5.5vw, 96px); align-items: start; } body[data-page="about"] section[data-screen-label="The story"] .story-aside { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); } body[data-page="about"] section[data-screen-label="The story"] .meta-label { margin: 0; } body[data-page="about"] .story-portrait { width: 100%; max-width: 340px; } body[data-page="about"] .story-portrait image-slot { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--sb-grey-800); } /* Indexed: pin the aside and tighten the measure */ [data-seclayout="indexed"] section[data-screen-label="The story"] .story-aside { position: sticky; top: calc(var(--nav-h) + 48px); } [data-seclayout="indexed"] section[data-screen-label="The story"] .story-body { max-width: 52ch; } /* ── The Numbers: one divided band inside a hairline card ── */ [data-seclayout="indexed"] section[data-screen-label="The numbers"] .stats { grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; } [data-seclayout="indexed"] section[data-screen-label="The numbers"] .stat { border-top: 0; border-left: 1px solid var(--border-subtle); padding: clamp(28px, 3.5vw, 52px); } [data-seclayout="indexed"] section[data-screen-label="The numbers"] .stat:first-child { border-left: 0; } [data-seclayout="indexed"] section[data-screen-label="The numbers"] .stat__value { font-size: clamp(38px, 4.6vw, 72px); } /* ── What you can expect: stacked, indexed rows ── */ [data-seclayout="indexed"] section[data-screen-label="What you can expect"] .num-grid { grid-template-columns: 1fr; gap: 0; } [data-seclayout="indexed"] section[data-screen-label="What you can expect"] .num-item { display: grid; grid-template-columns: clamp(76px, 9vw, 132px) minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(20px, 4vw, 64px); align-items: baseline; border-top: 1px solid var(--border-subtle); padding: clamp(28px, 4vw, 56px) 0; } [data-seclayout="indexed"] section[data-screen-label="What you can expect"] .num-item:last-child { border-bottom: 1px solid var(--border-subtle); } [data-seclayout="indexed"] section[data-screen-label="What you can expect"] .num-item__num { font-size: clamp(44px, 5.4vw, 80px); } [data-seclayout="indexed"] section[data-screen-label="What you can expect"] .num-item p { max-width: 46ch; } /* ── The numbers: lock each stat value to one 1em line box so the superscript on "15+" can't make that column taller than the others, keeping the labels and subheadings aligned across all three columns ── */ body[data-page="about"] .stats { align-items: start; } body[data-page="about"] .stats .stat__value { display: block; height: 1em; line-height: 1; overflow: visible; } body[data-page="about"] .stats .stat__value sup { font-size: 0.5em; vertical-align: 0.62em; line-height: 0; } /* ── responsive: collapse the indexed splits on small screens ── */ @media (max-width: 860px) { body[data-page="about"] section[data-screen-label="The story"] .story-wrap { grid-template-columns: 1fr; gap: var(--space-6); } [data-seclayout="indexed"] section[data-screen-label="The story"] .story-aside { position: static; } body[data-page="about"] .story-portrait { max-width: 280px; } [data-seclayout="indexed"] section[data-screen-label="The numbers"] .stats { grid-template-columns: 1fr; } [data-seclayout="indexed"] section[data-screen-label="The numbers"] .stat { border-left: 0; border-top: 1px solid var(--border-subtle); } [data-seclayout="indexed"] section[data-screen-label="The numbers"] .stat:first-child { border-top: 0; } [data-seclayout="indexed"] section[data-screen-label="What you can expect"] .num-item { grid-template-columns: 1fr; gap: var(--space-2); align-items: start; } }