/*
 * Home page composition (T058, Phase 3R).
 *
 * Direction A "Ledger" as amended in design/creative-brief.md §13: seven
 * sections plus the ledger strip, on the §13.2 rhythm
 * (ivory - ivory ruled - ivory - paper-200 - petrol-950 - ivory -
 * paper-50 sheet on ivory - petrol-950 desk).
 *
 * Loaded on the front page only (enqueued by functions.php, T057).
 * Everything here is scoped under `.qlp-home`, the class front-page.html
 * puts on <main>, so no rule can reach another template.
 *
 * Tokens: every colour resolves a T057 `theme.json` preset custom property
 * with the brief's hex as the fallback, so the page is correct before and
 * after T057 lands. Logical properties only (constitution VII): no
 * left/right anywhere; horizontal motion follows `--qlp-motion-x`
 * (MOT-006).
 */

/* Arabic sample text in the Languages composition is the one place an
 * English document may load the Arabic subset (creative brief §13, C-09).
 * Scoped to [dir="ltr"] below, so the file is never fetched on /ar/, where
 * style.css already provides Cairo. */
@font-face {
	font-family: "QLP Cairo Arabic";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/cairo/cairo-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ------------------------------------------------------------------ tokens */

/* The page frame, the rhythm, the type roles and the motion scale belong to
 * style.css (brief §4.3/§4.4). This block only gives them short local
 * names, so the home composition breathes on exactly the same grid as every
 * other template and one change to the system moves both. */
.qlp-home {
	--qlp-petrol-950: var(--wp--preset--color--petrol-950, #071C1B);
	--qlp-petrol-900: var(--wp--preset--color--petrol-900, #0A2726);
	--qlp-petrol-800: var(--wp--preset--color--petrol-800, #103B3A);
	--qlp-petrol-700: var(--wp--preset--color--petrol-700, #17504E);
	--qlp-petrol-650: var(--wp--preset--color--petrol-650, #247874);
	--qlp-petrol-100: var(--wp--preset--color--petrol-100, #E7EEED);
	--qlp-petrol-50: var(--wp--preset--color--petrol-50, #F1F5F4);
	--qlp-paper-50: var(--wp--preset--color--paper-50, #FBF9F5);
	--qlp-ivory: var(--wp--preset--color--ivory, #F7F4EE);
	--qlp-paper-200: var(--wp--preset--color--paper-200, #EFE9DC);
	--qlp-paper-300: var(--wp--preset--color--paper-300, #E4DCCB);
	--qlp-ink: var(--wp--preset--color--ink, #16211F);
	--qlp-ink-700: var(--wp--preset--color--ink-700, #2C3A37);
	--qlp-muted: var(--wp--preset--color--muted, #57635F);
	--qlp-muted-400: var(--wp--preset--color--muted-400, #7C8985);
	--qlp-gold: var(--wp--preset--color--gold, #B28A53);
	--qlp-gold-line: var(--wp--preset--color--gold-line, #A57E4A);
	--qlp-gold-700: var(--wp--preset--color--gold-700, #81633A);
	--qlp-gold-300: var(--wp--preset--color--gold-300, #D9B57F);
	--qlp-gold-tint: var(--wp--preset--color--gold-tint, #F1E7D5);
	--qlp-on-dark: var(--wp--preset--color--on-dark, #F7F4EE);
	--qlp-on-dark-muted: var(--wp--preset--color--on-dark-muted, #C9D2D0);

	--qlp-f-ui: var(--qlp-font-ui);
	--qlp-f-display: var(--qlp-font-display);
	--qlp-f-body: var(--qlp-font-body);

	--qlp-x: var(--qlp-motion-x);
	--qlp-dur-fast: var(--qlp-motion-duration-fast);
	--qlp-dur-base: var(--qlp-motion-duration-base);
	--qlp-dur-slow: var(--qlp-motion-duration-slow);
	--qlp-ease: var(--qlp-motion-ease-out);
	--qlp-rise: var(--qlp-motion-distance);

	/* The only measure this file owns: the gap between the explorer's index
	 * and its sheet. --qlp-gutter, --qlp-content and --qlp-rhythm are
	 * inherited from style.css and never redefined here. */
	--qlp-ex-gap: 24px;
}

/* Arabic sets both roles in the UI face; the direction sign itself comes
 * from style.css, which already flips --qlp-motion-x on [dir="rtl"]. */
[dir="rtl"] .qlp-home {
	--qlp-f-display: var(--qlp-font-ui);
	--qlp-f-body: var(--qlp-font-ui);
}

@media (min-width: 1024px) {
	.qlp-home {
		--qlp-ex-gap: 40px;
	}
}

@media (min-width: 1440px) {
	.qlp-home {
		--qlp-ex-gap: 56px;
	}
}

/* -------------------------------------------------------------- scaffolding */

/* The pattern owns its own widths; neutralise the constrained layout and
 * flow gaps core prints around post content so sections can run edge to
 * edge and set their own rhythm. */
.qlp-home > .wp-block-post-content,
.qlp-home .wp-block-post-content > * {
	max-inline-size: none;
	margin-block: 0;
}

.qlp-home > .wp-block-post-content {
	padding-inline: 0;
}

/* The pattern sets every gap explicitly, so core's flow margins and the
 * browser's default heading/paragraph margins are cleared once, here. */
.qlp-home .wp-block-group > *,
.qlp-home :is(h1, h2, h3, p, ul, ol, details, fieldset, legend) {
	margin-block: 0;
}

.qlp-home .qlp-vh {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.qlp-home .qlp-section {
	position: relative;
	isolation: isolate;
}

.qlp-home .qlp-wrap {
	position: relative;
	max-inline-size: calc(var(--qlp-content) + var(--qlp-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--qlp-gutter);
}

.qlp-home .qlp-stack {
	display: flex;
	flex-direction: column;
	gap: var(--qlp-stack-gap, 20px);
}

/* ---------------------------------------------------------------- typography */

.qlp-home h1,
.qlp-home h2,
.qlp-home h3 {
	font-family: var(--qlp-f-display);
	font-weight: 600;
	color: var(--qlp-petrol-800);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.qlp-home h1 {
	font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	line-height: 1.05;
}

.qlp-home h2 {
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
	line-height: 1.15;
}

.qlp-home h3 {
	font-size: 1.375rem;
	line-height: 1.3;
}

/* Arabic display type: Cairo 700, ~7 % smaller nominal size with taller
 * leading, so the rendered block depth matches the English (brief §13). */
[dir="rtl"] .qlp-home h1,
[dir="rtl"] .qlp-home h2,
[dir="rtl"] .qlp-home h3 {
	font-weight: 700;
	letter-spacing: 0;
}

[dir="rtl"] .qlp-home h1 {
	font-size: clamp(2.25rem, 1.75rem + 2.6vw, 3.9rem);
	line-height: 1.3;
}

[dir="rtl"] .qlp-home h2 {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	line-height: 1.35;
}

[dir="rtl"] .qlp-home h3 {
	font-size: 1.25rem;
	line-height: 1.55;
}

.qlp-home p {
	font-family: var(--qlp-f-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--qlp-ink-700);
}

[dir="rtl"] .qlp-home p {
	line-height: 1.9;
}

.qlp-home .qlp-lead {
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--qlp-ink-700);
	max-inline-size: 52ch;
}

[dir="rtl"] .qlp-home .qlp-lead {
	font-size: 1.1875rem;
	line-height: 1.8;
}

/* ------------------------------------------------------------------ eyebrow */

/* The eyebrow is style.css's component, mark included: it draws the
 * verification mark on ::before, so the pattern inlines nothing and the home
 * page shows exactly the one mark every inner page shows. What is added here
 * is only what this page puts after the label. */
.qlp-home .qlp-eyebrow p {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	letter-spacing: inherit;
}

.qlp-home .qlp-eyebrow__pair {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	white-space: nowrap;
}

/* The only mark the hero eyebrow carries itself: the two-way rule between
 * the language names. */
.qlp-home .qlp-eyebrow__pair svg {
	inline-size: 22px;
	block-size: 16px;
	flex: none;
	color: var(--qlp-gold-line);
}

.qlp-home .qlp-eyebrow__sep {
	color: var(--qlp-gold-line);
	opacity: 0.8;
}

/* ------------------------------------------------------------ section heads */

.qlp-home .qlp-sechead {
	display: flex;
	flex-direction: column;
	gap: 18px;
	/* VR-F004: never a narrow one-word-per-line column at 1440 px. */
	max-inline-size: min(100%, 58.34%);
	margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.75rem);
}

@media (max-width: 899px) {
	.qlp-home .qlp-sechead {
		max-inline-size: 100%;
	}
}

.qlp-home .qlp-sechead .qlp-lead {
	max-inline-size: 58ch;
}

/* ----------------------------------------------------------------- controls */

.qlp-home .wp-block-button__link,
.qlp-home .qlp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-block-size: 48px;
	min-inline-size: 48px;
	padding: 0.72em 1.5em;
	border: 1px solid transparent;
	border-radius: 2px;
	background-color: var(--qlp-petrol-800);
	color: var(--qlp-ivory);
	font-family: var(--qlp-f-ui);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--qlp-dur-fast) var(--qlp-ease);
}

.qlp-home .wp-block-button__link:hover,
.qlp-home .qlp-btn:hover {
	background-color: var(--qlp-petrol-700);
	color: var(--qlp-ivory);
}

.qlp-home .wp-block-button__link::before {
	content: "";
	inline-size: 17px;
	block-size: 17px;
	flex: none;
	background-color: currentColor;
	opacity: 0.8;
	-webkit-mask: url("../svg/home/mark-verification.svg") no-repeat center / contain;
	mask: url("../svg/home/mark-verification.svg") no-repeat center / contain;
}

/* Text link with the register-line underscore and a direction-aware chevron. */
.qlp-home .qlp-linkline a {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	min-block-size: 32px;
	padding-block-end: 3px;
	border-block-end: 1px solid var(--qlp-gold-line);
	font-family: var(--qlp-f-ui);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--qlp-petrol-800);
	text-decoration: none;
	transition: border-color var(--qlp-dur-fast) var(--qlp-ease);
}

.qlp-home .qlp-linkline a::after {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	flex: none;
	border-block-start: 1.5px solid currentColor;
	border-inline-end: 1.5px solid currentColor;
	transform: rotate(calc(var(--qlp-x) * 45deg));
	transition: translate var(--qlp-dur-fast) var(--qlp-ease);
}

.qlp-home .qlp-linkline a:hover {
	border-block-end-color: var(--qlp-petrol-800);
}

.qlp-home .qlp-linkline a:hover::after {
	translate: calc(var(--qlp-x) * 3px) 0;
}

.qlp-home :is(a, button, summary, label, input):focus-visible {
	outline: 2px solid var(--qlp-focus);
	outline-offset: 2px;
	border-radius: 1px;
}

/* ------------------------------------------------------------------- motion */

/* MOT-002 / MOT-003: the resting state is the finished state. Only a page
 * that has JavaScript and has not asked for reduced motion is ever offset,
 * and motion.js (T057) puts it back by adding `is-visible`. */
.qlp-home .qlp-reveal {
	opacity: 1;
	transform: none;
}

html.js:not(.qlp-reduced) .qlp-home .qlp-reveal {
	transition:
		opacity var(--qlp-dur-base) var(--qlp-ease),
		transform var(--qlp-dur-base) var(--qlp-ease);
}

html.js:not(.qlp-reduced) .qlp-home .qlp-reveal:not(.is-visible):not(.qlp-reveal--line) {
	opacity: 0;
	transform: translate3d(0, var(--qlp-rise), 0);
}

html.js:not(.qlp-reduced) .qlp-home .qlp-reveal--x:not(.is-visible) {
	transform: translate3d(calc(var(--qlp-x) * var(--qlp-rise) * -1), 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.qlp-home .qlp-reveal,
	html.js .qlp-home .qlp-reveal {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}

	.qlp-home *,
	.qlp-home *::before,
	.qlp-home *::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0s !important;
		transition-duration: 0.001ms !important;
	}
}

/* -------------------------------------------------------------------- grids */

/* C-08: paper-200 rules on ivory with every eighth line in paper-300, at
 * whole-pixel spacing so nothing moires. */
.qlp-grid-light {
	background-image:
		repeating-linear-gradient(to bottom, var(--qlp-paper-300) 0 1px, transparent 1px 256px),
		repeating-linear-gradient(to bottom, var(--qlp-paper-200) 0 1px, transparent 1px 32px);
	background-position: 0 0;
}

.qlp-grid-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(to bottom, rgb(247 244 238 / 0.06) 0 1px, transparent 1px 256px),
		repeating-linear-gradient(to bottom, rgb(247 244 238 / 0.035) 0 1px, transparent 1px 32px);
}

/* --------------------------------------------------------------------- hero */

.qlp-home .qlp-hero {
	padding-block: clamp(2.75rem, 2rem + 2.5vw, 5.25rem) clamp(3.25rem, 2rem + 3vw, 6rem);
	background-color: var(--qlp-ivory);
	overflow: clip;
}

.qlp-home .qlp-hero__in {
	display: grid;
	gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
	align-items: center;
}

@media (min-width: 1024px) {
	.qlp-home .qlp-hero__in {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.qlp-home .qlp-hero__col {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	padding-inline-start: clamp(20px, 2vw, 28px);
}

/* The ruled margin of a legal page. */
.qlp-home .qlp-hero__col::before {
	content: "";
	position: absolute;
	inset-block: 4px;
	inset-inline-start: 0;
	inline-size: 1px;
	background-color: var(--qlp-gold-line);
}

.qlp-home .qlp-hero__col .qlp-eyebrow {
	margin-inline-start: calc((clamp(20px, 2vw, 28px) + 9px) * -1);
}

.qlp-home .qlp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 0.5rem + 1.6vw, 1.75rem);
	margin-block-start: 0.25rem;
}

.qlp-home .qlp-hero__actions .wp-block-buttons {
	margin: 0;
}

.qlp-home .qlp-hero__art {
	position: relative;
	min-inline-size: 0;

	/* The distance from this column's inline-end edge to the edge of the
	 * viewport: the wrap's own padding plus whatever centring margin is left
	 * over. The hero section clips, so a plate that uses it cannot put a
	 * scrollbar on the page. */
	--qlp-hero-bleed: calc(
		var(--qlp-gutter) +
		max(0px, (100vw - var(--qlp-content) - var(--qlp-gutter) * 2) / 2)
	);
}

/* IMG-HERO slot: a decorative container reserved for the editorial still
 * life (IMG-009, pending generation). No caption, ever (VR-F006).
 *
 * VR-F009: it is a registration frame, never a filled block. It has no
 * background of its own, so the hero's own precision grid rules straight
 * through it and its edge reads as part of that ruling; `inset-block: 0`
 * keeps it inside the hero's own bounds, so it can never reach the header.
 * Below 1024 px, where the hero stacks and the frame would sit beside the
 * sheets as a bare box, it collapses (see the compact rule further down).
 * The empty aria-hidden container itself stays, for T102. */
.qlp-home .qlp-hero__backdrop {
	position: absolute;
	inset-block: -6% -6%;
	inset-inline-end: calc(-1 * var(--qlp-hero-bleed));
	inline-size: calc(100% + var(--qlp-hero-bleed));
	z-index: 0;
	border: 1px solid var(--qlp-paper-300);
	border-radius: 2px;
}

/* T102, VR-F029: the same element once an approved master has been processed.
 * It is no longer a registration frame -- it is a photographic plate -- so the
 * frame's border and corner ticks come off, and the edge that faces the copy
 * dissolves into the ivory instead of ruling a hard line down the hero. The
 * fade direction is a token rather than a physical keyword, because a mask
 * gradient takes no logical keyword and C-07 forbids flipping the drawing.
 *
 * The plate is painted, not marked up, so its block size is the hero's and the
 * intrinsic ratio of the file can never move the hero (PERF-002). */
.qlp-home .qlp-hero__backdrop.qlp-image--painted {
	--qlp-plate-fade: to right;

	border-color: transparent;
	mask-image: linear-gradient(
		var(--qlp-plate-fade),
		transparent 0,
		rgb(0 0 0 / 0.55) 40px,
		#000 96px
	);
}

[dir="rtl"] .qlp-home .qlp-hero__backdrop.qlp-image--painted {
	--qlp-plate-fade: to left;
}

.qlp-home .qlp-hero__backdrop.qlp-image--painted::before,
.qlp-home .qlp-hero__backdrop.qlp-image--painted::after {
	content: none;
}

.qlp-home picture.qlp-hero__backdrop {
	display: block;
	overflow: clip;
}

.qlp-home .qlp-hero__backdrop .qlp-image__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.qlp-home .qlp-hero__backdrop::before,
.qlp-home .qlp-hero__backdrop::after {
	content: "";
	position: absolute;
	inline-size: 16px;
	block-size: 16px;
	inset-inline-start: -1px;
	border-color: var(--qlp-gold-line);
	border-style: solid;
	border-width: 0;
	opacity: 0.85;
}

.qlp-home .qlp-hero__backdrop::before {
	inset-block-start: -1px;
	border-block-start-width: 1px;
	border-inline-start-width: 1px;
}

.qlp-home .qlp-hero__backdrop::after {
	inset-block-end: -1px;
	border-block-end-width: 1px;
	border-inline-start-width: 1px;
}

/* -------------------------------------------------- aligned-page composition */

/* VR-F009: the composition is exactly two pages wide plus the offset
 * between them. The box is one sheet plus one page gutter, so the sheets
 * are the same size and the back one shows by exactly one gutter -- the
 * alignment idea, not a second, larger field of paper. Its block size comes
 * from the sheets themselves, so the composition can never reach past the
 * hero's own padding into the header. */
.qlp-home .qlp-align {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	inline-size: min(100%, calc(360px + var(--qlp-gutter)));
	margin-inline-start: auto;
}

.qlp-home .qlp-align__sheet {
	grid-area: 1 / 1;
	inline-size: calc(100% - var(--qlp-gutter));
	aspect-ratio: 34 / 47;
}

.qlp-home .qlp-align__sheet svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* C-07: offsets are logical, the reader's language is the front sheet, and
 * nothing is mirrored with scaleX.
 *
 * The two sheets share one grid cell, so they are the same size by
 * construction. The back one sits at the block start and the inline end;
 * the front one is pushed in by one gutter on the inline axis (the cell is
 * exactly that much wider than a sheet) and down by 32 of the sheet's 470
 * drawing units -- two ruled lines -- so every rule on one page still meets
 * a rule on the other. */
.qlp-home .qlp-align__sheet--reader {
	justify-self: start;
	align-self: start;
	margin-block-start: calc((100% - var(--qlp-gutter)) * 32 / 340);
	z-index: 2;
	filter: drop-shadow(0 26px 34px rgb(16 59 58 / 0.3));
}

.qlp-home .qlp-align__sheet--other {
	justify-self: end;
	align-self: start;
	z-index: 1;
	filter: drop-shadow(0 12px 20px rgb(16 59 58 / 0.12));
}

.qlp-home .qlp-align__face {
	fill: var(--qlp-paper-50);
	stroke: var(--qlp-paper-300);
}

.qlp-home .qlp-align__sheet--other .qlp-align__face {
	fill: var(--qlp-paper-200);
	stroke: var(--qlp-paper-300);
}

.qlp-home .qlp-align__rule {
	fill: var(--qlp-paper-300);
}

.qlp-home .qlp-align__rule--strong {
	fill: var(--qlp-muted-400);
	opacity: 0.7;
}

/* VR-F009: paper-300 on paper-200 is almost invisible, which is what made
 * the back sheet read as a flat block. Its ruling is drawn at the same
 * pitch as the front sheet's, one step darker so the two rulings read as
 * the same ruling. */
.qlp-home .qlp-align__sheet--other .qlp-align__rule {
	fill: var(--qlp-muted-400);
	opacity: 0.4;
}

.qlp-home .qlp-align__sheet--other .qlp-align__rule--strong {
	opacity: 0.6;
}

/* The register line, ruling the whole composition, tick to inline-end. */
.qlp-home .qlp-align__register {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 52.5%;
	block-size: 1px;
	z-index: 3;
	background-color: var(--qlp-gold-line);
	transform-origin: 0 50%;
}

[dir="rtl"] .qlp-home .qlp-align__register {
	transform-origin: 100% 50%;
}

.qlp-home .qlp-align__register::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: -6px;
	inline-size: 1px;
	block-size: 13px;
	background-color: var(--qlp-gold-line);
}

/* C-10: transform only, never the headline, once per session. The static
 * state is the aligned state, so no-JS and reduced motion are correct and
 * a second visit that never replays cannot strand the sheets.
 *
 * `backwards`, and only until `.is-settled`: the last frame of both
 * animations is the element's own default, so a forwards fill would hold
 * nothing new while keeping a finished animation — and its composited
 * layer — on the element for the life of the page. That layer is what made
 * the JS-on home capture differ from the reduced-motion one on the
 * register hairline (VR-F016, T103 §3). motion.js adds `.is-settled` on
 * `animationend`, which takes the animation off the element. */
html.js:not(.qlp-reduced) .qlp-home .qlp-align.is-aligned:not(.is-settled) .qlp-align__sheet--other {
	animation: qlp-align-sheet var(--qlp-dur-slow) var(--qlp-ease) backwards;
}

html.js:not(.qlp-reduced) .qlp-home .qlp-align.is-aligned:not(.is-settled) .qlp-align__register {
	animation: qlp-align-register var(--qlp-dur-slow) var(--qlp-ease) backwards;
}

@keyframes qlp-align-sheet {
	from {
		transform: translate3d(calc(var(--qlp-x) * 26px), -18px, 0);
	}

	to {
		transform: none;
	}
}

@keyframes qlp-align-register {
	from {
		opacity: 0;
		transform: scaleX(0.18);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 1023px) {
	/* VR-F009: the same box, centred. The back sheet stays behind the front
	 * one -- one gutter of it shows -- instead of sitting beside it. */
	.qlp-home .qlp-align {
		inline-size: min(100%, calc(360px + var(--qlp-gutter)));
		margin-inline: auto;
	}

	/* VR-F009: collapsed on the stacked hero — the container stays in the
	 * DOM, it just has no box. */
	.qlp-home .qlp-hero__backdrop {
		display: none;
	}
}

/* ------------------------------------------------------------- ledger strip */

.qlp-home .qlp-ledger {
	background-color: var(--qlp-ivory);
	border-block: 1px solid var(--qlp-paper-300);
}

.qlp-home .qlp-ledger__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qlp-home .qlp-ledger__list li {
	position: relative;
	padding-block: clamp(1.125rem, 0.75rem + 1.2vw, 1.625rem);
	padding-inline-start: 30px;
	font-family: var(--qlp-f-ui);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--qlp-ink-700);
}

/* A gold tick, the ledger's only gold (C-06: line and mark, never a fill). */
.qlp-home .qlp-ledger__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: calc(clamp(1.125rem, 0.75rem + 1.2vw, 1.625rem) + 0.62em);
	inline-size: 14px;
	block-size: 1px;
	background-color: var(--qlp-gold-line);
}

.qlp-home .qlp-ledger__list li::after {
	content: "";
	position: absolute;
	inset-inline-start: 13px;
	inset-block-start: calc(clamp(1.125rem, 0.75rem + 1.2vw, 1.625rem) + 0.62em - 4px);
	inline-size: 1px;
	block-size: 9px;
	background-color: var(--qlp-gold-line);
}

@media (min-width: 700px) {
	.qlp-home .qlp-ledger__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.qlp-home .qlp-ledger__list li + li {
		border-inline-start: 1px solid var(--qlp-paper-300);
		padding-inline-start: calc(clamp(18px, 2.2vw, 34px) + 30px);
	}

	.qlp-home .qlp-ledger__list li + li::before {
		inset-inline-start: clamp(18px, 2.2vw, 34px);
	}

	.qlp-home .qlp-ledger__list li + li::after {
		inset-inline-start: calc(clamp(18px, 2.2vw, 34px) + 13px);
	}
}

@media (max-width: 699px) {
	.qlp-home .qlp-ledger__list li + li {
		border-block-start: 1px solid var(--qlp-paper-300);
	}
}

/* ----------------------------------------------------- document-types explorer */

.qlp-home .qlp-explorer {
	padding-block: var(--qlp-rhythm);
	background-color: var(--qlp-ivory);
}

.qlp-home .qlp-ex {
	display: grid;
	grid-template-columns: minmax(0, 1fr);

	/* The sheet's own inset, shared with the plate that sits on it. */
	--qlp-ex-pad: clamp(28px, 3vw, 46px);

	/* How much of the sheet the plate takes on a wide screen. Where it
	 * starts is no longer a measurement: the plate is a cell of the sheet's
	 * own grid, on the same row as the prepare rows, so its top edge lands on
	 * the first prepare rule by construction (VR-F031). */
	--qlp-ex-plate: 38%;

	/* The plate's height below the sheet's wide layout, where it is in flow
	 * under the rows. A 3:2 crop at this height is 300 px wide, which fits
	 * the sheet at 360 px and is nowhere near full-bleed. */
	--qlp-ex-plate-stack: 200px;
}

/* T102 / VR-F031: the document plate belongs to the sheet -- to the sheet
 * that is open, at every width. It is emitted inside each panel, between the
 * prepare rows and the link, so it is shown and hidden by whatever shows and
 * hides its sheet: the wide layout's `visibility`, and the narrow layout's
 * `0fr -> 1fr` accordion, which it now collapses and expands with. That is
 * why it is in the markup four times rather than once. The four are the same
 * decorative slot pointing at the same derivative, so the browser makes one
 * request and assistive technology is told about none of them; a single
 * element cannot be inside four sheets, and a plate that sits outside them is
 * the orphan under the whole explorer that VR-F031 opened on. */
figure.qlp-explorer__art {
	margin: 0;
}


.qlp-home .qlp-explorer__art img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--qlp-paper-300);
	border-radius: 2px;
}
/* Below the sheet's wide layout the plate is in flow, under the rows and
 * above the link, at the sheet's inline-start and capped in height. The cap
 * is on the block axis and the width follows from the crop, which is what
 * keeps it from becoming a screen-high full-width image (VR-F031). */
@media (max-width: 1023px) {
	.qlp-home .qlp-explorer__art {
		align-self: start;
	}

	.qlp-home .qlp-explorer__art img {
		block-size: var(--qlp-ex-plate-stack);
		inline-size: auto;
		max-inline-size: 100%;
	}
}

.qlp-home .qlp-ex__set {
	display: contents;
	margin: 0;
	padding: 0;
	border: 0;
}

.qlp-home .qlp-ex__legend {
	padding: 0;
	margin-block-end: 14px;
	font-family: var(--qlp-f-ui);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--qlp-muted);
	grid-row: 1;
}

.qlp-home .qlp-ex__row {
	display: block;
	cursor: pointer;
}

.qlp-home .qlp-ex__row input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.qlp-home .qlp-ex__rowin {
	display: block;
	padding-block: 20px;
	padding-inline-start: 16px;
	border-block-start: 1px solid var(--qlp-paper-300);
	border-inline-start: 2px solid transparent;
	transition: background-color var(--qlp-dur-fast) var(--qlp-ease);
}

.qlp-home .qlp-ex__row--4 .qlp-ex__rowin {
	border-block-end: 1px solid var(--qlp-paper-300);
}

.qlp-home .qlp-ex__title {
	display: block;
	font-family: var(--qlp-f-ui);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--qlp-ink);
}

.qlp-home .qlp-ex__desc {
	display: block;
	margin-block-start: 5px;
	font-family: var(--qlp-f-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--qlp-muted);
}

[dir="rtl"] .qlp-home .qlp-ex__desc {
	font-family: var(--qlp-f-ui);
	line-height: 1.85;
}

.qlp-home .qlp-ex__row input:checked + .qlp-ex__rowin {
	background-color: var(--qlp-paper-50);
	border-inline-start-color: var(--qlp-gold-line);
}

.qlp-home .qlp-ex__row input:checked + .qlp-ex__rowin .qlp-ex__title {
	color: var(--qlp-petrol-800);
}

.qlp-home .qlp-ex__row input:focus-visible + .qlp-ex__rowin {
	outline: 2px solid var(--qlp-focus);
	outline-offset: -2px;
}

.qlp-home .qlp-ex__panel {
	min-inline-size: 0;
}

.qlp-home .qlp-ex__panel-in {
	display: flex;
	flex-direction: column;
	gap: clamp(0.875rem, 0.5rem + 0.8vw, 1.25rem);
	min-block-size: 0;
}

.qlp-home .qlp-ex__preplabel {
	display: flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--qlp-f-ui);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--qlp-gold-700);
}

[dir="rtl"] .qlp-home .qlp-ex__preplabel {
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.875rem;
}

.qlp-home .qlp-ex__preplabel::before {
	content: "";
	inline-size: 40px;
	block-size: 1px;
	flex: none;
	background-color: var(--qlp-gold-line);
}

.qlp-home .qlp-ex__prep {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: qlp-prep;
}

.qlp-home .qlp-ex__prep li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.1em 1.1em;
	align-items: baseline;
	padding-block: 14px;
	border-block-start: 1px solid var(--qlp-paper-300);
	font-family: var(--qlp-f-body);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--qlp-ink-700);
}

[dir="rtl"] .qlp-home .qlp-ex__prep li {
	font-family: var(--qlp-f-ui);
	line-height: 1.85;
}

.qlp-home .qlp-ex__prep li:last-child {
	border-block-end: 1px solid var(--qlp-paper-300);
}

.qlp-home .qlp-ex__prep li::before {
	counter-increment: qlp-prep;
	content: counter(qlp-prep, decimal-leading-zero);
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--qlp-f-body);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--qlp-gold-700);
}

.qlp-home .qlp-ex__panel .qlp-linkline {
	margin-block-start: 0.375rem;
}

@media (min-width: 900px) {
	.qlp-home .qlp-ex {
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		column-gap: var(--qlp-ex-gap);
	}

	.qlp-home .qlp-ex__legend {
		grid-column: 1;
	}

	.qlp-home .qlp-ex__row {
		grid-column: 1;
	}

	.qlp-home .qlp-ex__row--1 {
		grid-row: 2;
	}

	.qlp-home .qlp-ex__row--2 {
		grid-row: 3;
	}

	.qlp-home .qlp-ex__row--3 {
		grid-row: 4;
	}

	.qlp-home .qlp-ex__row--4 {
		grid-row: 5;
	}

	/* The selected tab runs under the sheet's edge, the way an index tab
	 * runs under the page it opens. */
	.qlp-home .qlp-ex__row input:checked + .qlp-ex__rowin {
		position: relative;
		z-index: 2;
		margin-inline-end: calc((var(--qlp-ex-gap) + 1px) * -1);
		padding-inline-end: calc(var(--qlp-ex-gap) + 17px);
	}

	/* VR-F011: the sheet is as tall as what is on it. It starts on the same
	 * rule as the first index row and ends just under its own last rule,
	 * instead of being stretched to the index column's height with an empty
	 * field above the link. */
	.qlp-home .qlp-ex__panel {
		grid-column: 2;
		grid-row: 2 / span 4;
		align-self: start;
		visibility: hidden;
		padding: var(--qlp-ex-pad);
		background-color: var(--qlp-paper-50);
		border: 1px solid var(--qlp-paper-300);
		border-radius: 2px;
		box-shadow: 0 24px 48px -32px rgb(16 59 58 / 0.35);
	}

	.qlp-home .qlp-ex:has(#qlp-dt-1:checked) .qlp-ex__panel--1,
	.qlp-home .qlp-ex:has(#qlp-dt-2:checked) .qlp-ex__panel--2,
	.qlp-home .qlp-ex:has(#qlp-dt-3:checked) .qlp-ex__panel--3,
	.qlp-home .qlp-ex:has(#qlp-dt-4:checked) .qlp-ex__panel--4 {
		visibility: visible;
	}

	@supports not selector(:has(*)) {
		.qlp-home .qlp-ex__panel--1 {
			visibility: visible;
		}
	}

}

/* Wide: the sheet is two columns of its own -- the label, the rows and the
 * link on the inline-start, the plate on the inline-end -- instead of the
 * sheet reserving a padding gutter and the plate being laid over it from the
 * outside. The plate shares the rows' grid row, so it starts on the first
 * prepare rule and needs no measured drop, and it stays `align-self: start`
 * so the sheet is still only as tall as what is on it (VR-F011). */
@media (min-width: 1024px) {
	.qlp-home .qlp-ex__panel-in {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--qlp-ex-plate);
		column-gap: var(--qlp-ex-pad);
		align-items: start;
	}

	.qlp-home .qlp-ex__preplabel {
		grid-column: 1;
		grid-row: 1;
	}

	.qlp-home .qlp-ex__prep {
		grid-column: 1;
		grid-row: 2;
	}

	.qlp-home .qlp-ex__panel .qlp-linkline {
		grid-column: 1;
		grid-row: 3;
	}

	.qlp-home .qlp-explorer__art {
		grid-column: 2;
		grid-row: 2 / span 2;
		align-self: start;
	}
}

@media (max-width: 899px) {
	.qlp-home .qlp-ex__legend {
		grid-row: 1;
	}

	.qlp-home .qlp-ex__row--1 {
		grid-row: 2;
	}

	.qlp-home .qlp-ex__panel--1 {
		grid-row: 3;
	}

	.qlp-home .qlp-ex__row--2 {
		grid-row: 4;
	}

	.qlp-home .qlp-ex__panel--2 {
		grid-row: 5;
	}

	.qlp-home .qlp-ex__row--3 {
		grid-row: 6;
	}

	.qlp-home .qlp-ex__panel--3 {
		grid-row: 7;
	}

	.qlp-home .qlp-ex__row--4 {
		grid-row: 8;
	}

	.qlp-home .qlp-ex__panel--4 {
		grid-row: 9;
	}

	.qlp-home .qlp-ex__panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--qlp-dur-base) var(--qlp-ease);
	}

	.qlp-home .qlp-ex__panel-in {
		overflow: hidden;
		min-block-size: 0;
	}

	.qlp-home .qlp-ex:has(#qlp-dt-1:checked) .qlp-ex__panel--1,
	.qlp-home .qlp-ex:has(#qlp-dt-2:checked) .qlp-ex__panel--2,
	.qlp-home .qlp-ex:has(#qlp-dt-3:checked) .qlp-ex__panel--3,
	.qlp-home .qlp-ex:has(#qlp-dt-4:checked) .qlp-ex__panel--4 {
		grid-template-rows: 1fr;
	}

	.qlp-home .qlp-ex__panel-in > * {
		margin-inline-start: 18px;
	}

	/* Block padding on a `0fr` grid child still paints, so the collapsed
	 * panel breathes through its children's margins instead. */
	.qlp-home .qlp-ex__panel-in {
		border-inline-start: 2px solid var(--qlp-gold-line);
	}

	.qlp-home .qlp-ex__panel-in > :first-child {
		margin-block-start: 8px;
	}

	.qlp-home .qlp-ex__panel-in > :last-child {
		margin-block-end: 26px;
	}

	@supports not selector(:has(*)) {
		.qlp-home .qlp-ex__panel--1 {
			grid-template-rows: 1fr;
		}
	}
}

@supports not selector(:has(*)) {
	.qlp-home .qlp-ex__row--1 .qlp-ex__rowin {
		background-color: var(--qlp-paper-50);
		border-inline-start-color: var(--qlp-gold-line);
	}
}

/* ------------------------------------------------------------------ journey */

.qlp-home .qlp-journey {
	padding-block: var(--qlp-rhythm);
	background-color: var(--qlp-paper-200);
}

.qlp-home .qlp-journey__track {
	position: relative;
	display: grid;
	gap: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}

/* The spine: one gold register line the stations hang from. */
.qlp-home .qlp-journey__track::before {
	content: "";
	position: absolute;
	background-color: var(--qlp-gold-line);
	transition: transform var(--qlp-dur-slow) var(--qlp-ease);
}

.qlp-home .qlp-journey__station {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.qlp-home .qlp-journey__station::before {
	content: "";
	display: block;
	inline-size: 30px;
	block-size: 30px;
	background-color: var(--qlp-petrol-800);
	-webkit-mask: var(--qlp-glyph) no-repeat center / contain;
	mask: var(--qlp-glyph) no-repeat center / contain;
}

.qlp-home .qlp-journey__station--1 {
	--qlp-glyph: url("../svg/home/journey-receive.svg");
}

.qlp-home .qlp-journey__station--2 {
	--qlp-glyph: url("../svg/home/journey-translate.svg");
}

.qlp-home .qlp-journey__station--3 {
	--qlp-glyph: url("../svg/home/journey-review.svg");
}

.qlp-home .qlp-journey__station--4 {
	--qlp-glyph: url("../svg/home/journey-deliver.svg");
}

.qlp-home .qlp-journey__station h3 {
	font-family: var(--qlp-f-ui);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--qlp-petrol-800);
}

.qlp-home .qlp-journey__station p {
	font-size: 1rem;
	color: var(--qlp-ink-700);
	max-inline-size: 34ch;
}

.qlp-home .qlp-journey__foot {
	margin-block-start: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

@media (min-width: 900px) {
	.qlp-home .qlp-journey__track {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 0.5rem + 2vw, 3rem);
		padding-block-start: 44px;
	}

	.qlp-home .qlp-journey__track::before {
		inset-inline: 0;
		inset-block-start: 14px;
		block-size: 1px;
		transform-origin: 0 50%;
	}

	[dir="rtl"] .qlp-home .qlp-journey__track::before {
		transform-origin: 100% 50%;
	}

	.qlp-home .qlp-journey__station {
		padding-block-start: 30px;
	}

	/* A tick rising from the spine to each station. */
	.qlp-home .qlp-journey__station::after {
		content: "";
		position: absolute;
		inset-block-start: -30px;
		inset-inline-start: 0;
		inline-size: 1px;
		block-size: 30px;
		background-color: var(--qlp-gold-line);
		opacity: 0.55;
	}
}

@media (max-width: 899px) {
	.qlp-home .qlp-journey__track {
		padding-inline-start: 34px;
	}

	.qlp-home .qlp-journey__track::before {
		inset-block: 8px 24px;
		inset-inline-start: 0;
		inline-size: 1px;
		transform-origin: 50% 0;
	}

	.qlp-home .qlp-journey__station::after {
		content: "";
		position: absolute;
		inset-block-start: 15px;
		inset-inline-start: -34px;
		inline-size: 26px;
		block-size: 1px;
		background-color: var(--qlp-gold-line);
		opacity: 0.55;
	}
}

html.js:not(.qlp-reduced) .qlp-home .qlp-journey__track:not(.is-visible)::before {
	transform: scaleX(0);
}

@media (max-width: 899px) {
	html.js:not(.qlp-reduced) .qlp-home .qlp-journey__track:not(.is-visible)::before {
		transform: scaleY(0);
	}
}

html.js:not(.qlp-reduced) .qlp-home .qlp-journey__station--2 {
	transition-delay: 90ms;
}

html.js:not(.qlp-reduced) .qlp-home .qlp-journey__station--3 {
	transition-delay: 180ms;
}

html.js:not(.qlp-reduced) .qlp-home .qlp-journey__station--4 {
	transition-delay: 270ms;
}

/* ---------------------------------------------------- precision + principles */

.qlp-home .qlp-precision {
	padding-block: var(--qlp-rhythm);
	background-color: var(--qlp-petrol-950);
	color: var(--qlp-on-dark);
	overflow: clip;
	--qlp-focus: var(--qlp-gold-300);
}

/* Louvred light, the only Dubai reference in the system (brief §8). */
.qlp-home .qlp-precision::after {
	content: "";
	position: absolute;
	inset: -10%;
	z-index: -1;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		to bottom,
		rgb(247 244 238 / 0.034) 0 11px,
		transparent 11px 34px,
		rgb(247 244 238 / 0.02) 34px 40px,
		transparent 40px 86px
	);
	transform: skewY(-2.2deg);
}

.qlp-home .qlp-precision__in {
	display: grid;

	/* The space between the band's own parts, which the narrow layout has to
	 * put back by hand once the wrappers are opened up. */
	--qlp-precision-gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

	gap: var(--qlp-precision-gap);
}

/* One column: the reading order the band had before the coda moved. Both
 * wrappers hand their children to the band's own grid so the paragraphs can
 * sit above the plate here and below the ledger's last row on a wide screen,
 * from one piece of markup. */
@media (max-width: 1023px) {
	.qlp-home .qlp-precision__side,
	.qlp-home .qlp-principles {
		display: contents;
	}

	.qlp-home .qlp-precision .qlp-eyebrow {
		grid-row: 1;
	}

	.qlp-home .qlp-precision__statement {
		grid-row: 2;
	}

	.qlp-home .qlp-precision__notes {
		grid-row: 3;
	}

	.qlp-home .qlp-confid__art {
		grid-row: 4;
	}

	.qlp-home .qlp-principles h3 {
		grid-row: 5;
	}

	.qlp-home .qlp-principles__list {
		grid-row: 6;
	}

	/* Opening the wrappers made every part a grid item, and a single row gap
	 * between all six pulled the eyebrow off its headline and the heading off
	 * its rows. The rhythm belongs to the parts, not to the band: the gap goes
	 * back to zero and each pair keeps the spacing it had, with the band's own
	 * gap left only where the band used to have it -- around the plate. */
	.qlp-home .qlp-precision__in {
		row-gap: 0;
	}

	.qlp-home .qlp-confid__art {
		margin-block: var(--qlp-precision-gap);
	}
}

/* T102 / VR-F032: the plate is the statement column's, and the statement
 * column is what had to change for it to fit there. The three support
 * paragraphs used to sit under the headline, which left the plate below them
 * and a tall void beside it under the ledger, because the two columns were
 * already the same height without it. The paragraphs are now the ledger's
 * coda, after row 04 and under the same hairline the rows use, and the
 * statement column reads eyebrow, headline, rule, plate. Fable authorised
 * that reading-order change on 2026-09-24; it is done in the grid, not in the
 * markup, so the narrow layout keeps the order it had.
 *
 * The figure spans its column so the rule above the plate is the column's
 * rule; the image inside it is capped and sits at the inline-start, which is
 * what keeps it from being a screenful of photograph at 768 px. */
figure.qlp-confid__art {
	margin: 0;
}

.qlp-home .qlp-confid__art img {
	display: block;
	inline-size: min(100%, 320px);
	block-size: auto;
	border: 1px solid rgb(165 126 74 / 0.32);
	border-radius: 2px;
}

.qlp-home .qlp-precision .qlp-eyebrow {
	color: var(--qlp-gold-300);
}

/* This band is a petrol ground that style.css does not know about by class,
 * so the system mark is lifted to the same gold as the label. */
.qlp-home .qlp-precision .qlp-eyebrow::before {
	background-color: var(--qlp-gold-300);
}

.qlp-home .qlp-precision__statement {
	font-family: var(--qlp-f-display);
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: var(--qlp-on-dark);
	max-inline-size: 22ch;
	text-wrap: balance;
}

[dir="rtl"] .qlp-home .qlp-precision__statement {
	font-size: clamp(1.375rem, 1.05rem + 1.35vw, 2.125rem);
	line-height: 1.6;
	letter-spacing: 0;
	font-weight: 700;
}

.qlp-home .qlp-precision__notes p {
	color: var(--qlp-on-dark-muted);
	font-size: 1rem;
	max-inline-size: 46ch;
}

.qlp-home .qlp-precision__notes {
	--qlp-stack-gap: 14px;
	margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	padding-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border-block-start: 1px solid rgb(165 126 74 / 0.5);
}

.qlp-home .qlp-principles h3 {
	font-family: var(--qlp-f-display);
	font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
	color: var(--qlp-on-dark);
	margin-block-end: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.qlp-home .qlp-principles__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: qlp-principle;
}

.qlp-home .qlp-principles__list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 clamp(1rem, 0.5rem + 1.4vw, 2rem);
	align-items: baseline;
	padding-block: clamp(1.125rem, 0.875rem + 0.8vw, 1.625rem);
	border-block-start: 1px solid rgb(165 126 74 / 0.42);
	font-family: var(--qlp-f-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--qlp-on-dark-muted);
}

[dir="rtl"] .qlp-home .qlp-principles__list li {
	font-family: var(--qlp-f-ui);
	line-height: 1.9;
}

.qlp-home .qlp-principles__list li:last-child {
	border-block-end: 1px solid rgb(165 126 74 / 0.42);
}

.qlp-home .qlp-principles__list li::before {
	counter-increment: qlp-principle;
	content: counter(qlp-principle, decimal-leading-zero);
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--qlp-f-display);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2.125rem);
	font-weight: 600;
	line-height: 1;
	color: var(--qlp-gold-300);
}

@media (min-width: 1024px) {
	.qlp-home .qlp-precision__in {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
		column-gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
		row-gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	}

	/* Two columns that each carry their own flow, so neither is held up by a
	 * row in the other. The statement column is eyebrow, headline, rule,
	 * plate; the ledger column is its heading, its four rows and the coda. */
	.qlp-home .qlp-precision__side {
		grid-column: 1;
	}

	.qlp-home .qlp-principles {
		grid-column: 2;
	}

	/* The coda is a part of the ledger, so it takes the ledger's rhythm: the
	 * rows' own hairline and the rows' own space above their text, not the
	 * larger gap it used when it was the statement column's tail. */
	.qlp-home .qlp-precision__notes {
		margin-block-start: 0;
		padding-block-start: clamp(1.125rem, 0.875rem + 0.8vw, 1.625rem);
		border-block-start-color: rgb(165 126 74 / 0.42);
	}

	/* Beside a 646 px ledger, a 46ch measure is a narrow ribbon in a wide
	 * column with a lot of height for three short paragraphs. The coda reads
	 * at the same measure as the rows above it. */
	.qlp-home .qlp-precision__notes p {
		max-inline-size: 62ch;
	}

	.qlp-home .qlp-confid__art {
		margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
		padding-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
		border-block-start: 1px solid rgb(165 126 74 / 0.42);
	}

	/* VR-F032, Fable's ruling of 2026-09-24 on the rendered comparison: 320 px
	 * left the English statement column visibly short of the ledger, and this
	 * is the cap that balances both languages -- every case closes within
	 * 52 px, against 142 px at 320 px. It is still a plate and not a panel:
	 * 420 px inside a 462 px column keeps the inline-end margin. Below this
	 * breakpoint the plate stays at 320 px, where it is in flow under the
	 * paragraphs and its height, not its width, is what is capped. */
	.qlp-home .qlp-confid__art img {
		inline-size: min(100%, 420px);
	}
}

/* ---------------------------------------------------------------- languages */

.qlp-home .qlp-languages {
	padding-block: var(--qlp-rhythm);
	background-color: var(--qlp-ivory);
}

.qlp-home .qlp-langs__study {
	display: grid;
	margin-block: clamp(1.75rem, 1.25rem + 2vw, 3rem);
	padding-block: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
	border-block: 1px solid var(--qlp-paper-300);
}

.qlp-home .qlp-langs__word {
	font-family: var(--qlp-f-display);
	font-weight: 600;
	font-size: clamp(2.75rem, 1.5rem + 6vw, 6.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--qlp-petrol-800);
	margin: 0;
}

.qlp-home .qlp-langs__word--ar {
	font-family: var(--wp--preset--font-family--cairo, Cairo, "Segoe UI", Tahoma, sans-serif);
	font-weight: 700;
	font-size: clamp(2.5rem, 1.35rem + 5.5vw, 6rem);
	letter-spacing: 0;
	line-height: 1.25;
}

[dir="ltr"] .qlp-home .qlp-langs__word--ar {
	font-family: "QLP Cairo Arabic", var(--wp--preset--font-family--cairo, Cairo), "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* The register line between the two settings: the alignment study itself. */
.qlp-home .qlp-langs__rule {
	position: relative;
	display: block;
	block-size: 1px;
	margin-block: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	background-color: var(--qlp-gold-line);
}

.qlp-home .qlp-langs__rule::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 50%;
	inline-size: 22px;
	block-size: 22px;
	translate: 0 -50%;
	background-color: var(--qlp-gold-line);
	-webkit-mask: url("../svg/home/mark-alignment.svg") no-repeat center / contain;
	mask: url("../svg/home/mark-alignment.svg") no-repeat center / contain;
}

.qlp-home .qlp-langs__foot {
	display: grid;
	gap: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
	align-items: end;
}

@media (min-width: 900px) {
	.qlp-home .qlp-langs__foot {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.qlp-home .qlp-langs__foot .qlp-linkline {
		justify-self: end;
	}
}

.qlp-home .qlp-langs__foot p {
	max-inline-size: 60ch;
}

/* ---------------------------------------------------------------- questions */

.qlp-home .qlp-questions {
	padding-block: var(--qlp-rhythm);
	background-color: var(--qlp-ivory);
}

.qlp-home .qlp-questions__sheet {
	padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
	background-color: var(--qlp-paper-50);
	border: 1px solid var(--qlp-paper-300);
	border-radius: 2px;
	box-shadow: 0 24px 48px -32px rgb(16 59 58 / 0.35);
}

.qlp-home .qlp-questions__sheet .wp-block-details {
	border-block-start: 1px solid var(--qlp-paper-300);
}

.qlp-home .qlp-questions__sheet .wp-block-details:last-of-type {
	border-block-end: 1px solid var(--qlp-paper-300);
}

.qlp-home .qlp-questions__sheet summary {
	position: relative;
	display: block;
	padding-block: clamp(1rem, 0.75rem + 0.8vw, 1.375rem);
	padding-inline-end: 44px;
	font-family: var(--qlp-f-ui);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--qlp-petrol-800);
	cursor: pointer;
	list-style: none;
}

.qlp-home .qlp-questions__sheet summary::-webkit-details-marker {
	display: none;
}

/* VR-F010: the disclosure marker is one SVG stroke, drawn twice from the
 * same asset and tinted with the element's own colour — never a character,
 * so no font can fail to supply it. Both strokes are placed with the same
 * logical inset and are only ever moved along the block axis, so they are
 * concentric in both directions; the upright stroke turns flat and fades
 * when the row opens, taking the plus to a minus. */
.qlp-home .qlp-questions__sheet summary::before,
.qlp-home .qlp-questions__sheet summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 8px;
	inset-block-start: 50%;
	inline-size: 15px;
	block-size: 15px;
	translate: 0 -50%;
	background-color: var(--qlp-gold-line);
	-webkit-mask: url("../svg/home/mark-minus.svg") no-repeat center / contain;
	mask: url("../svg/home/mark-minus.svg") no-repeat center / contain;
}

.qlp-home .qlp-questions__sheet summary::after {
	rotate: 90deg;
	transition:
		rotate var(--qlp-dur-base) var(--qlp-ease),
		opacity var(--qlp-dur-fast) var(--qlp-ease);
}

.qlp-home .qlp-questions__sheet details[open] summary::after {
	rotate: 0deg;
	opacity: 0;
}

.qlp-home .qlp-questions__sheet details > p {
	padding-block-end: clamp(1rem, 0.75rem + 0.8vw, 1.375rem);
	padding-inline-end: 44px;
	max-inline-size: 68ch;
}

.qlp-home .qlp-questions__foot {
	margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

/* -------------------------------------------------------------- quote desk */

/* The desk itself is the shared `cta-desk` template part (T057). Home only
 * guarantees it closes the page on the dark ground the rhythm calls for. */
.qlp-home .wp-block-template-part:last-child {
	display: block;
}