/* ================================================================
Primitives — Crown Social Agency
----------------------------------------------------------------
Layout objects (o-*), utilities (u-*), and the outer .wrapper.
Consumed across all public pages. See AGENTS.md §2–§4.
Public 12-column primitive vocabulary (current source of truth for
the editorial grid): .o-container, .o-grid, .o-col-{1..12} with
optional --md|--lg|--xl modifiers, and .u-offset-* (with breakpoint
variants). Layouts stay flexible—asymmetric spans, offsets, and
full-bleed omissions are first-class. Not every component must use all
12 tracks. See docs/design-decisions.md.
Load order: main.css (tokens) → primitives.css → components.css
================================================================ */
/* ================================================================
.wrapper — outermost body container
No width constraint; prevents horizontal scroll from full-bleed.
================================================================ */
.wrapper {
position: relative;
width: 100%;
overflow-x: clip;
}
/* ================================================================
.o-container — width-constrained, editorial horizontal margins.
To go full-bleed, omit this wrapper on the section.
================================================================ */
.o-container {
box-sizing: border-box;
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--spacing-md);
}
@media (min-width: 768px) {
.o-container {
padding-inline: var(--spacing-lg);
}
}
@media (min-width: 1024px) {
.o-container {
padding-inline: var(--spacing-xl);
}
}
.o-container--wide { max-width: var(--container-max-wide); }
.o-container--narrow { max-width: var(--container-max-narrow); }
/* ================================================================
.o-grid — 12-column CSS grid with responsive gap (editorial default).
Pair with .o-col-{1..12}[--md|--lg|--xl] and .u-offset-* as needed.
Implementation breakpoints here are unchanged; layout-state names
for QA live in docs/design-decisions.md and Tailwind screens in header.
================================================================ */
.o-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--spacing-md);
}
@media (min-width: 768px) {
.o-grid { gap: var(--spacing-lg); }
}
/* Defensive: prevent long content from forcing grid children wider than their track. */
.o-grid > * {
min-width: 0;
}
/* ================================================================
.o-col-{1..12} — column span at base
================================================================ */
.o-col-1 { grid-column-end: span 1; }
.o-col-2 { grid-column-end: span 2; }
.o-col-3 { grid-column-end: span 3; }
.o-col-4 { grid-column-end: span 4; }
.o-col-5 { grid-column-end: span 5; }
.o-col-6 { grid-column-end: span 6; }
.o-col-7 { grid-column-end: span 7; }
.o-col-8 { grid-column-end: span 8; }
.o-col-9 { grid-column-end: span 9; }
.o-col-10 { grid-column-end: span 10; }
.o-col-11 { grid-column-end: span 11; }
.o-col-12 { grid-column-end: span 12; }
/* ================================================================
.o-col-{1..12}--md — column span at ≥768
================================================================ */
@media (min-width: 768px) {
.o-col-1--md { grid-column-end: span 1; }
.o-col-2--md { grid-column-end: span 2; }
.o-col-3--md { grid-column-end: span 3; }
.o-col-4--md { grid-column-end: span 4; }
.o-col-5--md { grid-column-end: span 5; }
.o-col-6--md { grid-column-end: span 6; }
.o-col-7--md { grid-column-end: span 7; }
.o-col-8--md { grid-column-end: span 8; }
.o-col-9--md { grid-column-end: span 9; }
.o-col-10--md { grid-column-end: span 10; }
.o-col-11--md { grid-column-end: span 11; }
.o-col-12--md { grid-column-end: span 12; }
}
/* ================================================================
.o-col-{1..12}--lg — column span at ≥1024
================================================================ */
@media (min-width: 1024px) {
.o-col-1--lg { grid-column-end: span 1; }
.o-col-2--lg { grid-column-end: span 2; }
.o-col-3--lg { grid-column-end: span 3; }
.o-col-4--lg { grid-column-end: span 4; }
.o-col-5--lg { grid-column-end: span 5; }
.o-col-6--lg { grid-column-end: span 6; }
.o-col-7--lg { grid-column-end: span 7; }
.o-col-8--lg { grid-column-end: span 8; }
.o-col-9--lg { grid-column-end: span 9; }
.o-col-10--lg { grid-column-end: span 10; }
.o-col-11--lg { grid-column-end: span 11; }
.o-col-12--lg { grid-column-end: span 12; }
}
/* ================================================================
.o-col-{1..12}--xl — column span at ≥1280
================================================================ */
@media (min-width: 1280px) {
.o-col-1--xl { grid-column-end: span 1; }
.o-col-2--xl { grid-column-end: span 2; }
.o-col-3--xl { grid-column-end: span 3; }
.o-col-4--xl { grid-column-end: span 4; }
.o-col-5--xl { grid-column-end: span 5; }
.o-col-6--xl { grid-column-end: span 6; }
.o-col-7--xl { grid-column-end: span 7; }
.o-col-8--xl { grid-column-end: span 8; }
.o-col-9--xl { grid-column-end: span 9; }
.o-col-10--xl { grid-column-end: span 10; }
.o-col-11--xl { grid-column-end: span 11; }
.o-col-12--xl { grid-column-end: span 12; }
}
/* ================================================================
.u-offset-{1..11} — column-start offsets (push right by N cols)
Example: .u-offset-3 starts content at column 4.
================================================================ */
.u-offset-1 { grid-column-start: 2; }
.u-offset-2 { grid-column-start: 3; }
.u-offset-3 { grid-column-start: 4; }
.u-offset-4 { grid-column-start: 5; }
.u-offset-5 { grid-column-start: 6; }
.u-offset-6 { grid-column-start: 7; }
.u-offset-7 { grid-column-start: 8; }
.u-offset-8 { grid-column-start: 9; }
.u-offset-9 { grid-column-start: 10; }
.u-offset-10 { grid-column-start: 11; }
.u-offset-11 { grid-column-start: 12; }
@media (min-width: 768px) {
.u-offset-1--md { grid-column-start: 2; }
.u-offset-2--md { grid-column-start: 3; }
.u-offset-3--md { grid-column-start: 4; }
.u-offset-4--md { grid-column-start: 5; }
.u-offset-5--md { grid-column-start: 6; }
.u-offset-6--md { grid-column-start: 7; }
.u-offset-7--md { grid-column-start: 8; }
.u-offset-8--md { grid-column-start: 9; }
.u-offset-9--md { grid-column-start: 10; }
.u-offset-10--md { grid-column-start: 11; }
.u-offset-11--md { grid-column-start: 12; }
}
@media (min-width: 1024px) {
.u-offset-1--lg { grid-column-start: 2; }
.u-offset-2--lg { grid-column-start: 3; }
.u-offset-3--lg { grid-column-start: 4; }
.u-offset-4--lg { grid-column-start: 5; }
.u-offset-5--lg { grid-column-start: 6; }
.u-offset-6--lg { grid-column-start: 7; }
.u-offset-7--lg { grid-column-start: 8; }
.u-offset-8--lg { grid-column-start: 9; }
.u-offset-9--lg { grid-column-start: 10; }
.u-offset-10--lg { grid-column-start: 11; }
.u-offset-11--lg { grid-column-start: 12; }
}
@media (min-width: 1280px) {
.u-offset-1--xl { grid-column-start: 2; }
.u-offset-2--xl { grid-column-start: 3; }
.u-offset-3--xl { grid-column-start: 4; }
.u-offset-4--xl { grid-column-start: 5; }
.u-offset-5--xl { grid-column-start: 6; }
.u-offset-6--xl { grid-column-start: 7; }
.u-offset-7--xl { grid-column-start: 8; }
.u-offset-8--xl { grid-column-start: 9; }
.u-offset-9--xl { grid-column-start: 10; }
.u-offset-10--xl { grid-column-start: 11; }
.u-offset-11--xl { grid-column-start: 12; }
}
/* ================================================================
.u-stack — vertical rhythm (flow-column with gap)
Default gap = --spacing-md. Override via --stack-gap if needed.
================================================================ */
.u-stack {
display: flex;
flex-direction: column;
gap: var(--stack-gap, var(--spacing-md));
}
/* Neutralize native element margins so the stack's gap is the
single source of vertical rhythm. Without this, browser defaults
on ,
–, , etc. stack with the flex gap and produce
3× the intended spacing. */
.u-stack > * {
margin: 0;
}
.u-stack--sm { --stack-gap: var(--spacing-sm); }
.u-stack--md { --stack-gap: var(--spacing-md); }
.u-stack--lg { --stack-gap: var(--spacing-lg); }
.u-stack--xl { --stack-gap: var(--spacing-xl); }
.u-stack--xxl { --stack-gap: var(--spacing-xxl); }
/* ================================================================
.u-cluster — inline group with consistent gap (wraps)
================================================================ */
.u-cluster {
display: flex;
flex-wrap: wrap;
gap: var(--cluster-gap, var(--spacing-sm));
align-items: center;
}
.u-cluster--sm { --cluster-gap: var(--spacing-xs); }
.u-cluster--md { --cluster-gap: var(--spacing-sm); }
.u-cluster--lg { --cluster-gap: var(--spacing-md); }
/* Full-bleed media utility (media usage is_breakout = 1) */
.u-media-full-bleed {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* ================================================================
Swiss long-form layout objects (opt-in; compose under .t-case-study-layout--*)
================================================================ */
.o-swiss-narrow {
max-width: 38ch;
}
.o-swiss__kicker {
font-family: var(--font-mono);
font-size: 0.68rem;
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.o-swiss__heading {
font-weight: 500;
letter-spacing: -0.04em;
line-height: 1.05;
}
.o-swiss__copy {
max-width: 40ch;
font-size: 1rem;
line-height: 1.65;
}
.o-swiss__meta {
font-family: var(--font-mono);
font-size: 0.72rem;
line-height: 1.45;
letter-spacing: 0.04em;
color: var(--color-text-secondary);
}