/* for-captives.css
 Page styles for the "The problem" page. Design tokens and the dark base
 come from ../shared/dark.css; this file holds only what is specific to
 this page. Loaded after style.css and dark.css. */

/* ── Page shell ─────────────────────────────────────────────── */

/* Bright variant: this page reads like the index — parchment page, ink
   text. Everything dark.css darkens is flipped back here (this file
   loads after it); the product page keeps the dark base. */
body {
	background: var(--parchment);
	color: var(--ink);
	-webkit-font-smoothing: auto;
}

/* The canvas takes the CLOSING BAND's ink rather than the page's
   parchment: the page height is fractional and the scrollable area
   rounds out past it, leaving a hairline of canvas below the CTA that
   would read as a light bar under the ink band. Nothing inside the
   page can cover it — it lies below the last element, and .plPage's
   overflow-x: clip computes the vertical axis to clip as well, so
   even a box-shadow bleed would be cut off. .plPage paints the
   parchment over all the content, so only that remainder changes. */
html {
	background: var(--ink);
}

.plPage {
	background: var(--parchment);
	overflow-x: clip;
}

/* This page is parchment though it loads dark.css, so the nav follows
   it back to the index header's light bar. */
.pkNav {
	background-color: var(--glass-light);
	border-bottom-color: var(--rule);
	box-shadow: var(--shadow-bar);
}

.pkNavLink {
	color: var(--ink);
}

.pkNavLink:hover {
	border-bottom-color: var(--ink);
}

#menu-button {
	color: var(--ink);
}

/* The index header's neutral ink button. */
.pkBtn {
	border-color: var(--ink);
	color: var(--ink);
}

.pkBtn:hover {
	background-color: var(--ink);
	color: var(--parchment);
}

/* ── Hero ───────────────────────────────────────────────────── */

/* The overture mirrors the product page's pkIntro: eyebrow, display
   line, and lede all on one center axis in the CTA's vocabulary (the
   old block-centered/flush-left mix read as neither centered nor
   anchored). */
.plHero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--gap-copy);
	padding: var(--stroke-hero) var(--gutter-mobile);
}

.plHeroTitle {
	font-family: var(--font-serif-display);
	font-weight: 400;
	font-size: var(--text-display);
	line-height: 1.2;
	margin: 0;
}

.plHeroLede {
	max-width: var(--measure);
	font-size: var(--text-lede);
	/* the block stays on the overture's center axis; the paragraph
	   itself reads flush-left inside it */
	text-align: left;
	/* extra half-step over the flex gap: eyebrow + title read as one
	   grouped unit, the lede as its supporting line */
	margin: var(--space-05) 0 0;
}

/* ── Problem rows ───────────────────────────────────────────── */

/* index-look trial: rows mirror the homepage's two-column sections —
   equal columns, 8rem-scale gap, index gutters (both clamped so the
   design width matches index at 1600px without breaking mobile). */
.plRow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	/* Same column gap as the product spread — the pages share one
	   text-to-art breathing distance. */
	gap: var(--gap-spread);
	/* The band stroke, not the index's 8rem: its sections earn 8rem
	   with ~450px copy blocks and height-capped art; these rows carry
	   less content, so the same air would read (and did read) as
	   sparseness. The art cap below keeps the box from adding slack
	   on top. */
	padding: var(--stroke-band) var(--gutter);
}

/* Even rows (.plRowFlip) put the artwork on the left — markup order
   alone does the flip; the columns are equal either way in the index
   vocabulary, so the class is a marker in the HTML, not a style hook. */

/* The index's same-ground seam device (section.about-us drops its top
   padding after the for-captives teaser): where two parchment rows
   meet with no tonal edge between them, the second row collapses its
   top padding so the seam reads as one 8rem stroke, not two. The fold
   row's edges already divide its neighboring seams. */
.plRow:not(.plRowFold) + .plRow:not(.plRowFold) {
	padding-top: 0;
}

.plTxt {
	display: flex;
	flex-direction: column;
	/* tight title-to-body gap, same as the product rail's step blocks */
	gap: var(--gap-step);
	max-width: var(--measure);
}

/* Orange accent headings, the index's section-h1 pattern. */
.plStepTitle {
	font-family: var(--font-serif-display);
	font-weight: 400;
	font-size: var(--text-heading);
	color: var(--piko-orange-500);
	margin: 0;
}

/* Same step vocabulary as the product rail: body-size copy beside the
   artwork (~45 characters at the measure). */
.plStepBody {
	font-size: var(--text-body);
	margin: 0;
}

.plArt {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--parchment);
	/* The index's other seam device (.product .composition caps at
	   20rem): the art must not inflate the stanza beyond its content.
	   24rem, not 20: the taller cap keeps the xMidYMid-slice crop well
	   inside what the fade masks dissolve — and scene 02's full-height
	   page fits uncropped. */
	max-height: 24rem;
}

/* ── Tonal fold trial ───────────────────────────────────────── */

/* Row 2 sits on the index's half-tone cream: one deeper band to
   break the run of parchment stanzas before the ink CTA's band. The
   art box goes transparent so the band, not parchment, is the scene's
   ground (problem.js tunes the lens backdrop to this tone). */
.plRowFold {
	background: var(--paper-deep);
}

.plRowFold .plArt {
	background: transparent;
}

/* Soft edges only where documents genuinely cross the frame (the drift
   field, the slipping-away scene, and the heap's inbound cards): the
   scene dissolves into the page background, with mid-stops easing the
   ramp into a gentle fade. The ramp is kept short so moving cards stay
   solid almost to the frame edge. The one static composition (the
   magnifier) renders unmasked. */
.plArtFade {
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.4) 5.5%, #000 12%, #000 88%, rgb(0 0 0 / 0.4) 94.5%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.4) 5.5%, #000 12%, #000 88%, rgb(0 0 0 / 0.4) 94.5%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.4) 5.5%, #000 12%, #000 88%, rgb(0 0 0 / 0.4) 94.5%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.4) 5.5%, #000 12%, #000 88%, rgb(0 0 0 / 0.4) 94.5%, transparent 100%);
	mask-composite: intersect;
}

.plArt svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ── CTA ────────────────────────────────────────────────────── */

/* The shared .pkCta component (../shared/dark.css). On this light page
   it keeps the index's dark-band treatment — the homepage ends the same
   way: an ink section on parchment. */
.pkCta {
	background-color: var(--ink);
	color: var(--parchment);
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.plHero,
	.plRow {
		padding-left: var(--gutter-mobile);
		padding-right: var(--gutter-mobile);
	}

	/* The overture's centered axis is a wide-page device: there the
	   32rem lede is a block centered in a much wider column, so title
	   and lede read as one centered mass. On a phone the lede fills the
	   gutter box, so its flush-left edge fights the centered title —
	   and every heading below on this page is flush-left. The whole
	   overture ranges left instead, as the index hero does. */
	.plHero {
		/* Top stroke down to the hero clamp's own floor: the 4rem bar
		   overhead is already a band of air, and the full 7vh on top of
		   it opened the page on nothing. The foot keeps the clamp — it
		   answers to the row below, which hasn't changed. */
		padding-top: var(--space-2);
		align-items: flex-start;
		text-align: left;
	}

	.plRow {
		grid-template-columns: 1fr;
		gap: var(--space-15);
		padding-top: var(--stroke-mobile);
		padding-bottom: var(--stroke-mobile);
	}

	/* The last row is the run-up to the closing band: its foot takes
	   the deeper stroke the CTA gave back (--stroke-cta-lead). */
	.plRow:has(+ .pkCta) {
		padding-bottom: var(--stroke-cta-lead);
	}

	/* Restated here as a decision, not an inheritance: the desktop
	   seam rule outranks the stroke above by specificity anyway, and
	   it stays right when stacked — two strokes where the fold band's
	   tonal edge divides the seam, one where the ground runs on. */
	.plRow:not(.plRowFold) + .plRow:not(.plRowFold) {
		padding-top: 0;
	}

	/* stacked column: full-width art again — the desktop cap would
	   crop the scenes far past what the masks cover */
	.plArt {
		max-height: none;
	}

	.plRow > .plArt {
		order: 1;
	}

	.plRow > .plTxt {
		order: 2;
	}

	/* The crop, for the two scenes composed as fields. Everything here
	   is drawn in one 1200x900 viewBox, so a 4:3 box fits the whole
	   scene at whatever the column gives it — on a phone that is a 28%
	   scale-down of artwork laid out for a ~600px column. The dense
	   compositions (02's magnifier, 04's heap) survive that; 01's drift
	   field and 03's departing files do not, because their subject *is*
	   the spread, and at 28% the spread is empty parchment around a
	   30px card.

	   A taller box makes xMidYMid slice zoom instead of fit: at 20rem
	   the scale goes 0.28 -> 0.37 on a 390px phone, so cards render at
	   a third again their fitted size and the frame holds the middle
	   ~900 units of the field. The fade below already dissolves all
	   four edges, which is what a crop wants.

	   A floor rather than an aspect: the crop is only wanted where the
	   column is too narrow to render the field legibly, and a portrait
	   aspect would follow the column up to a 996px-tall box at the
	   threshold. As a min-height it lapses on its own — past ~537px of
	   column the 4:3 box is already taller than the floor, so the
	   scene goes back to fitting whole, at the scale the crop was
	   buying anyway. One breakpoint, as the site keeps everywhere.

	   width: 100% is load-bearing, not tidiness: with the column's width
	   left to the grid, aspect-ratio resolves the *width* from the
	   raised height instead of the other way round, and the box grows
	   to 538px inside a 340px column. */
	.plArt:has(> #plA),
	.plArt:has(> #plC) {
		width: 100%;
		min-height: 20rem;
	}

	/* Scene 02's page is drawn to fill its frame, so it can't be
	   cropped down the way the fields can — a height cap would take the
	   document's own top and bottom edges off. It scales instead:
	   narrower box, whole composition, the index's own device for the
	   same problem (.product .composition caps its width and centres).
	   The heap is left at full width — it is the page's last scene and
	   the smallest-drawn of the four already.

	   A definite width, not max-width: `margin-inline: auto` takes the
	   item out of the grid's stretch, and with only a maximum to go on
	   the box falls back to the SVG's default intrinsic 300x225 — which
	   binds instead of the cap on any column past ~350px, pinning the
	   scene to 300px all the way to the threshold. */
	.plArt:has(> #plB) {
		width: 85%;
		margin-inline: auto;
	}

	/* The tuck, the index's stacked-teaser device (index.css): there the
	   scenes dissolve over their lower three-fifths under a 4rem
	   pull-up. Same 4rem pull-up here, over an 8rem ramp — the crop
	   above buys the scenes their legibility back, and the price is
	   height, so the fade takes it out again. Weight, not just pixels:
	   an 8rem ramp is half of a 24rem field box and two-thirds of a
	   16rem one, so what's left reads as ground the copy sits on rather
	   than a picture with a caption under it.

	   The ramp is a length, not a percentage, precisely because the two
	   boxes are different heights: a proportional ramp would dissolve
	   half again as much of the cropped fields as of the others, and
	   the fields' foot is the emptiest part of the frame already.

	   The matching pull at the head is not a fade but a crop of dead
	   air: every scene is composed with clearance above its subject —
	   the heap most of all, since its cards fly in from off-frame — and
	   stacked, that clearance lands on top of the row's stroke and
	   reads as one long gap before the picture starts. 3rem comes off
	   the top of all four, which is the stroke itself on the rows that
	   carry one, so the scenes hang from the copy above rather than
	   floating between. */
	.plArt {
		margin-top: calc(-1 * var(--space-3));
		margin-bottom: calc(-1 * var(--space-4));
		/* set below for the fold row, which needs some of it back */
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-8)), transparent 100%);
		mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-8)), transparent 100%);
	}

	/* Half the pull on the fold row: its top edge is the only one of the
	   four that is a real tonal edge, and art run flush to a tonal edge
	   reads as a mistake rather than as bleed — on the parchment rows
	   there is no edge there to butt against. Same reasoning the desktop
	   seam rule uses to let fold rows keep both their strokes. */
	.plRowFold .plArt {
		margin-top: calc(-1 * var(--space-15));
	}

	/* Where the four-sided fade applies, the same ramp replaces that
	   mask's short bottom feather; the top feather and both sides keep
	   their desktop stops (the crop pushes cards through the sides, so
	   those matter more here, not less). */
	.plArtFade {
		-webkit-mask-image:
			linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.4) 5.5%, #000 12%, #000 88%, rgb(0 0 0 / 0.4) 94.5%, transparent 100%),
			linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.4) 5.5%, #000 12%, #000 calc(100% - var(--space-8)), transparent 100%);
		mask-image:
			linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.4) 5.5%, #000 12%, #000 88%, rgb(0 0 0 / 0.4) 94.5%, transparent 100%),
			linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.4) 5.5%, #000 12%, #000 calc(100% - var(--space-8)), transparent 100%);
	}
}