, not inside a .v7-section). Matches the home page's hero pattern — the home uses the same 72px flush-edge for the breadcrumb area, then individual sections apply their own padding via .v7-section below. Mobile-first: narrow viewports use a ~16-24px gutter (clamp resolves to 1rem below ~400vw breakpoints). The 72px desktop flush-edge only applies at >=1024px so the page keeps full reading width on phones (where 72px+24px would consume ~50% of a 390px viewport). */ .v7-detail { padding-inline: clamp(1rem, 4vw, 1.5rem); } @media (min-width: 1024px) { .v7-detail { padding-left: 72px; padding-right: 72px; } } /* The breadcrumb at main level (inside .v7-detail's 72px page padding) needs an additional 24px left padding to align with the body content at x=96 (page 72 + section 24). This matches the header logo at px-[96px] and the section content's flush-at-x=96 position. The hero stays at x=72 (page padding edge) so the breadcrumb appears 24px more indented than the hero. On mobile, the breadcrumb sits flush at the page edge (no extra indent) — the 24px offset is a desktop-only design choice. */ .v7-detail .v7-breadcrumb { padding-left: 0; } @media (min-width: 1024px) { .v7-detail .v7-breadcrumb { padding-left: 24px; } } /* Section content flush at x=96 (matches the home page's content indent — both use the same `padding-inline: clamp(1.5rem, 6vw, 6rem)` at design-reference viewport which resolves to 6rem=96px). The .v7-detail page-level 72px padding places the section's left edge at x=72, and the section's own 24px horizontal padding pushes the content to x=96 (72 + 24 = 96). Internal containers (.v7-section-head, .v7-scale-grid, .v7-network-stack, .v7-hero-grid, .v7-access-stack, .v7-sources-stack) carry `max-width: 80rem` (or 60rem for the data tables) + `margin-inline: 0` to flush at the section's left edge (= x=96) — matching the breadcrumb and header logo position. The hero at x=72 stays 24px less indented than the content so it stands out as the page's visual anchor without dominating the layout. */ body .v7-section { padding-block: 72px 144px; padding-inline: 0; } /* Desktop-only 24px indent: aligns section content at x=96 (page 72 + section 24). On mobile the section sits flush at the page edge (x = .v7-detail padding-inline from the rule above) so the page keeps its full reading width. */ @media (min-width: 1024px) { body .v7-section { padding-left: 24px; padding-right: 24px; } } /* The FestivalHero component carries its own padding-inline (clamp 1.25rem..3rem, see FestivalHero.astro). With .v7-detail now at 72px page-level padding, the hero's own padding would compound and push the hero text right of x=72. Zero it out so the hero text starts at the same x=72 edge as the section title. */ .v7-detail .v7-hero { padding-left: 0; padding-right: 0; } /* The hero's internal 2-column grid (text + image) used to center itself with `max-width: 88rem; margin-inline: auto`. At wider viewports the grid centered inside the 88rem width, leaving empty margin on both sides — the image (right column) ended up far from the right edge. Anchor the grid to the page's left edge (x=72) so the text column starts at x=72 and the image column extends to the right edge of .v7-detail. */ .v7-detail .v7-hero-grid { /* Keep the hero grid centered in 88rem like the home page's hero. The home page's hero image is edge-to-edge (the image itself overflows the grid via absolute positioning / inset:0), so the centered grid is invisible — only the image is visible at the edges. Same approach for the festival. */ max-width: 88rem; margin-inline: auto; } /* All v7 containers (section-head, scale-grid, network-stack, hero-grid) used to carry `max-width: rem; margin-inline: auto` which centered them inside .v7-detail. That worked at narrow viewports (where the max-width exceeded viewport width, so the auto-margin was a no-op) but at wider viewports the centering pulled them away from x=72 and broke alignment with the breadcrumb, hero text, and answer summary. With the .v7-detail 72px padding now in place as the single source of truth, these containers should fill the content area starting at x=72 — no centering, no max-width. */ .v7-section-head { /* Flush at x=96 (matches the breadcrumb and header logo — 24px more indented than the hero at x=72 so the body content is visually distinct from the hero). max-width: 80rem constrains reading line length without centering the section-head off the page's left edge. */ max-width: 80rem; margin-inline: 0; margin-bottom: clamp(2.5rem, 4vw, 4rem); } .v7-section-title { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--aw-color-text-heading); margin: 0; text-wrap: balance; } .dark .v7-section-title { color: var(--aw-color-paper); } /* v7 subhead (h3) — paired with .v7-section-title above as the section→sub-section heading ladder. Lives in the global block on purpose: Astro scopes component