/*
 * PAHAL — layout.
 *
 * The structural signature of this site is the SECTION INDEX: a full-width
 * hairline carrying a two-digit number and a label. It repeats down every
 * page, so the site reads as one continuous document rather than a stack of
 * unrelated blocks. It is the cheapest possible way to look designed, and the
 * hardest to mistake for a template.
 */

/* ---- Containers ------------------------------------------------- */

.pahal-container {
	width: 100%;
	max-width: var(--pahal-width-wide);
	margin-inline: auto;
	padding-inline: var(--pahal-gutter);
}

.pahal-container--narrow { max-width: var(--pahal-width-content); }
.pahal-container--full   { max-width: none; padding-inline: 0; }

/* ---- Section rhythm --------------------------------------------- */

/*
 * Deliberately uneven. A page whose sections all breathe identically has no
 * pulse — tight sections make loose ones feel generous.
 */
/*
 * Rhythm note. These were 2xl/3xl at desktop, which — once the spacing tokens
 * were actually resolving — put 240px of nothing between every pair of bands
 * and made a rich page feel like a slideshow. A band's own padding is only half
 * the gap a reader sees; two adjacent bands contribute one each. 5rem a side
 * reads as generous, 7.5rem a side reads as unfinished.
 */
.pahal-section { padding-block: var(--pahal-space-l); }

@media (min-width: 64em) { .pahal-section { padding-block: var(--pahal-space-xl); } }

.pahal-section--tight { padding-block: var(--pahal-space-m); }

@media (min-width: 64em) { .pahal-section--tight { padding-block: var(--pahal-space-l); } }

.pahal-section--loose { padding-block: var(--pahal-space-xl); }

@media (min-width: 64em) { .pahal-section--loose { padding-block: var(--pahal-space-2xl); } }

.pahal-section--flush-top    { padding-block-start: 0; }
.pahal-section--flush-bottom { padding-block-end: 0; }

/*
 * Bands re-declare the surface roles they change, not just a background colour.
 * A component dropped onto a sand band then picks its own contrast up from the
 * band instead of assuming it is sitting on canvas.
 */
.pahal-section--canvas { background-color: var(--pahal-canvas); --pahal-surface: var(--pahal-canvas); --pahal-hover-fill: var(--pahal-sand); }
.pahal-section--sand   { background-color: var(--pahal-sand);   --pahal-surface: var(--pahal-sand);   --pahal-surface-raised: var(--pahal-canvas); --pahal-hover-fill: var(--pahal-white); }
.pahal-section--deep   { background-color: var(--pahal-sand-deep); --pahal-surface: var(--pahal-sand-deep); --pahal-surface-raised: var(--pahal-canvas); --pahal-hover-fill: var(--pahal-canvas); }
.pahal-section--tint   { background-color: var(--pahal-terracotta-tint); --pahal-surface: var(--pahal-terracotta-tint); --pahal-hover-fill: var(--pahal-white); }

/* ---- Grid -------------------------------------------------------- */

.pahal-grid {
	display: grid;
	gap: var(--pahal-space-m);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 48em) { .pahal-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 64em) { .pahal-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pahal-space-l); } }

.pahal-col-full { grid-column: 1 / -1; }

@media (min-width: 48em) {
	.pahal-col-4, .pahal-col-3 { grid-column: span 4; }
	.pahal-col-5, .pahal-col-6, .pahal-col-7, .pahal-col-8, .pahal-col-9 { grid-column: span 8; }
}

@media (min-width: 64em) {
	.pahal-col-3 { grid-column: span 3; }
	.pahal-col-4 { grid-column: span 4; }
	.pahal-col-5 { grid-column: span 5; }
	.pahal-col-6 { grid-column: span 6; }
	.pahal-col-7 { grid-column: span 7; }
	.pahal-col-8 { grid-column: span 8; }
	.pahal-col-9 { grid-column: span 9; }
	.pahal-start-2 { grid-column-start: 2; }
	.pahal-start-3 { grid-column-start: 3; }
}

/*
 * Editorial split. 7/5 and top-aligned, never 6/6 and never centred:
 * symmetry and vertical centring are what make a layout read as a template.
 */
.pahal-split { display: grid; gap: var(--pahal-space-l); align-items: start; }

@media (min-width: 64em) {
	.pahal-split { grid-template-columns: 7fr 5fr; gap: var(--pahal-space-xl); }
	.pahal-split--balanced { grid-template-columns: 6fr 6fr; }
	.pahal-split--minor    { grid-template-columns: 5fr 7fr; }
	.pahal-split--reverse > :first-child { order: 2; }
}

/* ---- Utilities ---------------------------------------------------- */

.pahal-stack > * + * { margin-top: var(--pahal-space-s); }
.pahal-stack--tight > * + * { margin-top: var(--pahal-space-2xs); }
.pahal-stack--loose > * + * { margin-top: var(--pahal-space-m); }

.pahal-cluster { display: flex; flex-wrap: wrap; gap: var(--pahal-space-xs); align-items: center; }

.pahal-cards {
	display: grid;
	gap: var(--pahal-space-m);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

/* ---- Section headings --------------------------------------------- */

/*
 * A section opener is three things in a fixed order — eyebrow, heading, lead —
 * with the heading given room to sit rather than floating in a corner. The
 * earlier version let a bare heading start a section with nothing above or
 * below it, which is exactly what makes a big display face look stranded.
 */
/*
 * Spacing is relative to type size, not absolute.
 *
 * These were l/xl, set when section headings ran to 52px. Against the current
 * 30px they left a visible void between a heading and the thing it introduces —
 * and generous whitespace around small type is its own "generated layout" tell.
 * The gap should read as one step in a rhythm, not as a gap.
 */
.pahal-section-head {
	max-width: 40ch;
	margin-bottom: var(--pahal-space-m);
}

@media (min-width: 64em) { .pahal-section-head { margin-bottom: var(--pahal-space-l); } }

.pahal-section-head--wide { max-width: 56ch; }
.pahal-section-head > * + * { margin-top: var(--pahal-space-s); }
.pahal-section-head .pahal-lead { margin-top: var(--pahal-space-s); }

/* Heading beside a lead — gives a display heading a counterweight. */
.pahal-section-head--split { max-width: none; }

@media (min-width: 64em) {
	.pahal-section-head--split {
		display: grid;
		grid-template-columns: 7fr 5fr;
		/*
		 * Row and column gaps are deliberately different. The eyebrow occupies
		 * its own full-width row, so a single `gap` of 5rem pushed the heading
		 * eighty pixels clear of the label that introduces it — they stopped
		 * reading as one unit. The columns still need the wide gutter.
		 */
		column-gap: var(--pahal-space-xl);
		row-gap: var(--pahal-space-s);
		align-items: end;
	}

	.pahal-section-head--split > * + * { margin-top: 0; }
	.pahal-section-head--split .pahal-eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
	.pahal-section-head--split .pahal-lead { margin-top: 0; }
}

.pahal-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: var(--pahal-space-s);
	font-family: var(--pahal-font-sans);
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-accent-text);
}

/* The leading rule that turns a label into a mark. */
.pahal-eyebrow::before {
	content: "";
	width: 2.25rem;
	height: 1px;
	flex: none;
	background-color: currentColor;
}

.pahal-eyebrow--plain::before { display: none; }

.pahal-lead {
	max-width: 52ch;
	font-size: var(--pahal-text-lead);
	line-height: 1.6;
	color: var(--pahal-text-soft);
}

/* An opening statement set in the display face — used once per page, at most. */
.pahal-statement {
	max-width: 30ch;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-display-m);
	font-weight: 500;
	line-height: var(--pahal-leading-display);
	letter-spacing: var(--pahal-track-display);
	color: var(--pahal-text-heading);
	text-wrap: balance;
}

/* ---- Bleeds -------------------------------------------------------- */

.pahal-bleed { position: relative; width: 100%; }
.pahal-bleed img { width: 100%; object-fit: cover; }

/* Pulls a figure past the container edge into the viewport margin. */
@media (min-width: 64em) {
	.pahal-bleed-right { margin-right: calc(var(--pahal-gutter) * -1); }
	.pahal-bleed-left  { margin-left: calc(var(--pahal-gutter) * -1); }
}