/*
 * The Crypto Secret — the full-bleed section-band system (Story 1.2).
 *
 * ONE RULE governs the palette (tokens.md, "The one rule that governs the
 * palette"): sections alternate full-bleed grounds — cream -> black -> orange
 * -> cream -> ... — and each section owns exactly ONE. Orange grounds take
 * black type; black grounds take cream type; cream grounds take the body
 * colour. That pairing is contrast correctness, not taste: body copy on black
 * set in --tcs-body lands at roughly 2.4:1 and fails, which is why
 * --tcs-body-dark exists and is used here.
 *
 * WHY FULL-BLEED IS ITS OWN PROBLEM.
 * GeneratePress wraps page content in .container.grid-container with a
 * max-width, and .inside-article adds its own padding. Left alone, every band
 * below renders as a coloured rectangle floating inside a white gutter — the
 * single most visible way this design can be got wrong. Two mechanisms could
 * defeat it and only one is safe:
 *
 *   - `alignfull`, which GeneratePress implements with a 100vw width plus a
 *     negative margin (generatepress/assets/css/main.css:475-480). 100vw
 *     INCLUDES the classic scrollbar's width, so on any platform that reserves
 *     scrollbar gutter the band is wider than the viewport and the document
 *     scrolls horizontally — the exact failure the I/O matrix forbids
 *     ("document.body.scrollWidth <= window.innerWidth at every width").
 *
 *   - the `full-width-content` body class, set from the _generate-full-width-
 *     content post meta (generatepress/inc/markup.php:74-87), which clears the
 *     container max-width AND the .inside-article padding
 *     (main.css:1279-1296) without ever mentioning a viewport unit.
 *
 * The second is what this file relies on, and the belt-and-braces overrides
 * below make the bands correct even if that meta is missing on a given page.
 * Nothing here uses 100vw, by decision.
 */

/* ---------------------------------------------------------------------------
 * 1. Defeat the container.
 *
 * Scoped to .tcs-bands so this file can never widen an ordinary page that
 * merely happens to load the stylesheet. The class goes on the template's
 * wrapper; the selectors below walk UP from it via :has(), and the
 * body-class selectors cover the browsers where :has() is unavailable.
 * ------------------------------------------------------------------------- */

.full-width-content .site-content .content-area,
.full-width-content .container.grid-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.full-width-content .site-main,
.full-width-content .inside-article,
.full-width-content .entry-content {
	margin: 0;
	padding: 0;
}

/*
 * The same neutralisation keyed off the bands themselves rather than off the
 * body class, for the case where the post meta was never set. :has() is
 * supported everywhere the rest of this design system is; where it is not,
 * the rules above still apply because the template also sets the meta.
 */
.grid-container:has(> .tcs-bands),
.entry-content:has(> .tcs-bands),
.inside-article:has(.tcs-bands),
.site-main:has(.tcs-bands) {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/*
 * The bands wrapper itself. `width: 100%` rather than `100vw`, so the
 * scrollbar cannot push the document wider than the viewport.
 */
.tcs-bands {
	width: 100%;
	max-width: 100%;
	margin: 0;
	/*
	 * A band's own content (a marquee track at width: max-content, an
	 * absolutely positioned aurora blob) is deliberately wider than the
	 * viewport. Clipping it here is what keeps body.scrollWidth equal to
	 * window.innerWidth instead of letting one decorative element scroll the
	 * whole document sideways.
	 */
	overflow-x: clip;
}

/* ---------------------------------------------------------------------------
 * 2. The band.
 *
 * Padding is 92px 40px desktop / 56px 20px mobile, straight from the shipped
 * --tcs-section-* tokens (tokens.md, "Shape & spacing").
 * ------------------------------------------------------------------------- */

.tcs-band {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding: var(--tcs-section-y) var(--tcs-section-x);
	font-family: var(--tcs-font);
	font-size: var(--tcs-fs-body);
	line-height: var(--tcs-lh-body);
}

/* ---------------------------------------------------------------------------
 * 3. Ground / text pairing.
 *
 * Each modifier sets the ground AND the type colour together. They are one
 * decision, not two: a band that sets only its background is how cream body
 * copy ends up on a cream ground, or dark body copy on black.
 * ------------------------------------------------------------------------- */

.tcs-band--cream {
	background: var(--tcs-cream);
	color: var(--tcs-body);
}

.tcs-band--black {
	background: var(--tcs-black);
	color: var(--tcs-body-dark); /* NOT --tcs-body: ~2.4:1 on black, fails */
}

.tcs-band--orange {
	background: var(--tcs-orange);
	color: var(--tcs-black);
}

/*
 * Headings sit at full strength against the ground; the band colour above is
 * the BODY colour. On cream that is black, on black it is cream, on orange it
 * is black — the pairing tokens.md states.
 */
.tcs-band--cream :is(h1, h2, h3, h4, h5, h6),
.tcs-band--orange :is(h1, h2, h3, h4, h5, h6) {
	color: var(--tcs-black);
}

.tcs-band--black :is(h1, h2, h3, h4, h5, h6) {
	color: var(--tcs-cream);
}

/*
 * Links: amber on light grounds (orange fails contrast as a link on cream —
 * tokens.md, --tcs-amber), orange on dark. On the orange ground the link is
 * black, since orange-on-orange is invisible.
 */
.tcs-band--cream a:not(.tcs-btn) {
	color: var(--tcs-amber);
}

.tcs-band--black a:not(.tcs-btn) {
	color: var(--tcs-orange);
}

.tcs-band--orange a:not(.tcs-btn) {
	color: var(--tcs-black);
}

/*
 * :not(.tcs-btn) IS LOAD-BEARING. Without it these three rules, at one
 * class plus one type selector (0,1,1), outrank motion.css's single-class
 * button skins (.tcs-btn--orange, 0,1,0): an orange button on a black band
 * took --tcs-orange text on an --tcs-orange ground and its label vanished
 * until :hover (two classes) restored it — the pricing card's "Get the
 * book" shipped exactly that way. A button paints its own label colour;
 * the band's link colour is for prose links only.
 */

/* Rules and borders follow the ground the same way. */
.tcs-band--cream :is(hr, .tcs-rule) {
	border: 0;
	border-top: var(--tcs-border-width) solid var(--tcs-border);
}

.tcs-band--black :is(hr, .tcs-rule) {
	border: 0;
	border-top: var(--tcs-border-width) solid var(--tcs-border-dark);
}

/* ---------------------------------------------------------------------------
 * 4. Padding modifiers — the four bands in Main.dc.html that deviate.
 *
 * Four of the home page's bands are NOT 92px 40px. Rather than let epic 2
 * re-author a padding shorthand per section (and drift), each deviation the
 * artboard actually contains gets a name here. The line number is the band in
 * design/canvas/Main.dc.html that establishes it.
 * ------------------------------------------------------------------------- */

/* Main.dc.html:394 — `padding: 88px 40px` */
.tcs-band--tight {
	padding-top: 88px;
	padding-bottom: 88px;
}

/* Main.dc.html:520 — `padding: 84px 40px 0`, a band whose content runs to the
 * bottom edge (the closing wordmark bleeds off). */
.tcs-band--flush-bottom {
	padding-top: 84px;
	padding-bottom: 0;
}

/* Main.dc.html:453 — `padding: 66px 40px`, the short orange band. */
.tcs-band--short {
	padding-top: 66px;
	padding-bottom: 66px;
}

/* Main.dc.html:423 — `padding: 92px 0 88px`. Zero side padding because the
 * band holds edge-to-edge marquee tracks; the inner content supplies its own
 * inset. */
.tcs-band--bleed-x {
	padding: 92px 0 88px;
}

/* ---------------------------------------------------------------------------
 * 5. Inner measure.
 *
 * The band is full-bleed; its CONTENT is not. Home is authored at 1440 and
 * inner pages at 1240 (epic-1-context.md, "Layout").
 * ------------------------------------------------------------------------- */

.tcs-band__inner {
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
}

.tcs-band__inner--narrow {
	max-width: 1160px;
}

/* ---------------------------------------------------------------------------
 * 5a. The inner-page ground.
 *
 * Design-audit 2026-09-03: every inner page sat on a flat cream slab while
 * the home hero sat on graph paper under an orange aurora, so the two read
 * as different sites. --paper carries the hero's lattice (hero.css:194, same
 * 54px pitch and 5% ink) and one static glow to the top-left, masked so both
 * fade before the band's edges. Purely decorative, static, behind content.
 * ------------------------------------------------------------------------- */

/* `clip`, not `hidden`: hidden would make the band a scroll container and
 * un-stick the FAQ intro and the legal sidebar inside it. */
.tcs-band--paper {
	overflow: clip;
}

.tcs-band--paper::before {
	content: "";
	position: absolute;
	inset: 0;
	/*
	 * PRE-DECLARED FALLBACK (code-review fix, 2026-09-04). color-mix() is a
	 * 2023 feature; on an older evergreen browser the color-mix()
	 * declaration below is invalid and the whole background-image
	 * declaration containing it is dropped, leaving this earlier rgba()
	 * one in effect instead of no lattice at all. rgba(12,12,13,.05) is
	 * --tcs-black (#0C0C0D) at 5% alpha — the same colour color-mix()
	 * computes, spelled out so it parses everywhere.
	 */
	background-image:
		linear-gradient(rgba(12, 12, 13, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(12, 12, 13, .05) 1px, transparent 1px);
	background-image:
		linear-gradient(color-mix(in srgb, var(--tcs-black) 5%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--tcs-black) 5%, transparent) 1px, transparent 1px);
	background-size: 54px 54px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 0%, #000, transparent);
	mask-image: radial-gradient(ellipse 70% 60% at 30% 0%, #000, transparent);
	pointer-events: none;
}

.tcs-band--paper::after {
	content: "";
	position: absolute;
	top: -260px;
	left: -120px;
	width: 720px;
	height: 720px;
	border-radius: var(--tcs-radius-full);
	/*
	 * Same pre-declared fallback (code-review fix, 2026-09-04): rgba(247,
	 * 147, 26, .22) is --tcs-orange (#F7931A) at 22% alpha, standing in for
	 * the color-mix() below on browsers that cannot parse it, so the glow
	 * is not silently dropped along with the lattice above.
	 */
	background: rgba(247, 147, 26, .22);
	background: radial-gradient(circle, color-mix(in srgb, var(--tcs-orange) 22%, transparent), transparent 62%);
	pointer-events: none;
}

.tcs-band--paper > * {
	position: relative;
	z-index: 1;
}

/* One eyebrow style for every inner-page title (contact.css:54 and
 * legal.css already draw it; FAQ and Account now share it). */
.tcs-page-eyebrow {
	display: block;
	font-size: var(--tcs-fs-eyebrow);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-amber);
}

/*
 * On a --bleed-x band the band itself has no side padding, so the inner
 * measure supplies it — otherwise text would touch the viewport edge.
 */
.tcs-band--bleed-x > .tcs-band__inner {
	padding-inline: var(--tcs-section-x);
}

/* ---------------------------------------------------------------------------
 * 6. Mobile.
 *
 * 56px 20px. The deviating modifiers collapse back to the standard mobile
 * rhythm: an 88-vs-92px distinction is invisible at 390px, while carrying it
 * through would make the modifiers override the mobile padding and leave
 * desktop spacing on a phone.
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {

	.tcs-band {
		padding: var(--tcs-section-y-mobile) var(--tcs-section-x-mobile);
	}

	.tcs-band--tight,
	.tcs-band--short {
		padding-top: var(--tcs-section-y-mobile);
		padding-bottom: var(--tcs-section-y-mobile);
	}

	.tcs-band--flush-bottom {
		padding-top: var(--tcs-section-y-mobile);
		padding-bottom: 0;
	}

	.tcs-band--bleed-x {
		padding: var(--tcs-section-y-mobile) 0;
	}

	.tcs-band--bleed-x > .tcs-band__inner {
		padding-inline: var(--tcs-section-x-mobile);
	}
}