/*
 * Kontradiktion — the single-piece page: head, the prose measure with its
 * three-tier width grid, about-section and meta. The piece navigation is chrome
 * (a persistent bottom bar) and lives in chrome.css.
 * Media element internals live in media.css (loaded before this file).
 * Part of the split stylesheet set — see base.css for the map and load order.
 */

/* --- The article shell -----------------------------------------------------
   The piece deliberately does NOT use .k-site__inner: a 66rem cap on the
   <article> is a ceiling nothing inside can escape, so full-bleed media would
   be impossible. The cap moves onto the tracks instead (see .k-piece__body),
   and each non-body child carries its own measure below.
   overflow-x: clip is the backstop — if a child ever does overhang, it gets
   clipped instead of scrolling the page sideways. */
.k-site .k-piece {
	/* Undo the generic .k-piece/.k-edition cap in base.css (46rem + gutter). That
	   cap used to be overridden by .k-site__inner on the article; now that the
	   article carries no shell class, it would silently make pieces NARROWER than
	   before instead of allowing full-bleed. */
	max-width: none;
	padding: 3rem 0 5rem;
	overflow-x: clip;
}
.k-site .k-piece__head,
.k-site .k-piece__about {
	padding-inline: var(--k-gutter);
}

/* --- The sink: a chapter opening for text ---------------------------------
   A text piece used to begin hard against the top of the page, which on a short
   poem left the work stranded in the corner of an otherwise empty screen. Text
   and sound now open the way a chapter opens in a book — a quarter of the
   viewport of quiet above the first line (owner, 2026-08-14). "Sink" (or
   sinkage) is the typographic name for exactly this whitespace.

   Scoped to the formats whose work is NOT visual. An image, video or embed
   already owns the top of the viewport, and pushing it down would fight the
   height budget below — the media would shrink to stay in frame, or its controls
   would go back under the fold, which is the bug that budget exists to fix. The
   foreword lands here too (its format is text), which is right: front matter is
   the most book-like page on the site.

   The sink is a FLAT quarter — it does not shrink for a long piece, which would
   be the nicer behaviour (a work that fills the screen anyway gains nothing from
   a screenful of opening). That needs to compare content height against the
   viewport, and CSS cannot: flex-shrink, a grid minmax() track and margin:auto
   all only give way inside a container with a DEFINITE height, and pinning the
   article to 100svh makes a long piece overflow its own border box and paint over
   the footer. `container-type: size` fails for the same reason; calc-size() only
   sees an element's own intrinsic size. It was built with a JS measurement and
   deliberately reverted (owner, 2026-08-14) — pure CSS or not at all. */
body.k-piece-surface {
	--k-sink: 25vh;
	--k-sink: 25svh;
}
.k-site .k-piece--text,
.k-site .k-piece--sound {
	padding-top: var(--k-sink);
}

/* --- The height budget for visual work (2026-08-14) ------------------------
   Full-bleed used to mean "as wide as the viewport, whatever height follows".
   On a wide window that made a 16:9 video taller than the screen, putting its
   own controls below the fold — you had to scroll to pause the thing you were
   watching. Visual work now gets a height budget: the viewport, less the fixed
   bottom bar and a gutter's breathing room top and bottom. It is a MAX, so it
   only bites when the media would otherwise overflow; short media is untouched.

   svh, not vh: on mobile vh is the LARGEST viewport (URL bar retracted), which
   is exactly the case where the budget has to be conservative. The vh line is
   the fallback for browsers without svh — declared first so svh wins where it
   is understood. Staff also carry the admin bar, which is fixed above the page. */
body.k-piece-surface {
	--k-media-max-h: calc(100vh - var(--k-piecebar-h) - 2 * var(--k-gutter));
	--k-media-max-h: calc(100svh - var(--k-piecebar-h) - 2 * var(--k-gutter));
}
body.admin-bar.k-piece-surface {
	--k-media-max-h: calc(100vh - var(--k-piecebar-h) - var(--wp-admin--admin-bar--height, 32px) - 2 * var(--k-gutter));
	--k-media-max-h: calc(100svh - var(--k-piecebar-h) - var(--wp-admin--admin-bar--height, 32px) - 2 * var(--k-gutter));
}

/* --- A single piece: prose voice --- */
.k-piece__byline {
	font-style: italic;
	opacity: 0.75;
	margin-bottom: 1.5rem;
}
.k-piece__lead {
	font-size: 1.25rem;
	line-height: 1.6;
	margin-bottom: 1.75rem;
}
.k-piece p {
	line-height: 1.8;
}

/* --- Head: the credit line, BELOW the work ---------------------------------
   The work opens the page (adr/0008), so this is a credit line, not a masthead.
   Since 2026-08-14 it reads as one: title / artist / format on a single
   left-aligned row, separated by the same hairline slash the meta list uses.

   It was a large centred <h1> with the byline beneath. Under the work it names,
   that read as a caption whose picture had gone missing — the type was doing
   masthead work in a position that cannot carry it. Small and left-aligned, the
   same information stops competing with the piece. */
.k-site .k-piece__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.85rem;
	text-align: left;
	max-width: calc(var(--k-measure) + 2 * var(--k-gutter));
	margin: 3.5rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--k-rule);
}
/* Same separator idiom as .k-meta; the gap supplies the space on the left, the
   margin on the right, so the slash sits evenly between two items. */
.k-site .k-piece__head > * + *::before {
	content: "/";
	opacity: 0.5;
	margin-right: 0.85rem;
}
/* ONE metric for the whole line — title, artist and format are the same small
   tracked uppercase, and only BRIGHTNESS separates them (owner, 2026-08-14).
   Sizing the title up was the last thing still making this read as a stranded
   masthead; at the same size it reads as what it is, a credit. The byline also
   drops its italic here — at this size, beside uppercase tracking, it read as
   an error rather than an emphasis. */
.k-site .k-piece__head > * {
	margin: 0;
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 300;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}
/* The title is the only part in full white; artist and format stay chrome. */
.k-site .k-piece__title {
	color: var(--k-fg);
}
.k-site .k-piece__byline,
.k-site .k-piece__kind {
	color: var(--k-muted);
	opacity: 1;
}

/* --- Piece body: three width tiers ----------------------------------------
   Named-column grid with THREE nested spans, narrowest out:

     [text]   the prose measure (--k-measure) — body copy, always
     [media]  visual work, widening symmetrically to the --k-shell breakout
     [bleed]  true edge to edge — it spans the gutter tracks too

   The format picks a piece's default tier and a per-piece field can override it
   (see .k-piece--w-* below); body copy always stays at [text], because
   full-measure text reads badly — a deliberate deviation from the owner's
   "full width" request (2026-08-08).

   No `vw` units here, and no `margin-inline: calc(50% - 50vw)`. 100vw includes
   the OS scrollbar while the content box does not, so either would push the page
   sideways on every classic-scrollbar platform. Full-bleed is a grid TRACK,
   bounded by the parent, with overflow-x: clip on the article as the backstop.
   scripts/smoke.sh enforces this statically — headless Chromium has overlay
   scrollbars, so the bug is invisible to a rendered measurement. */
.k-piece__body {
	display: grid;
	grid-template-columns:
		[bleed-start] minmax(var(--k-gutter), 1fr)
		[media-start] minmax(0, calc((var(--k-shell) - var(--k-measure)) / 2))
		[text-start] min(var(--k-measure), 100%)
		[text-end] minmax(0, calc((var(--k-shell) - var(--k-measure)) / 2))
		[media-end] minmax(var(--k-gutter), 1fr)
		[bleed-end];
	max-width: none;
	margin-inline: auto;
}
.k-piece__body > * + * {
	margin-top: 1.4rem;
}
.k-piece__body > *,
.k-piece__body .k-piece__content > * {
	grid-column: text;
}
/* The text pattern's group wrapper dissolves into the grid, so media an
   editor drops inside it still breaks out. */
.k-piece__body > .k-piece__content {
	display: contents;
}
/* The breakout set: visual work only — audio players and buttons are UI and
   stay at the prose measure. An editor's bare-URL paste (an embed figure
   without any k-* class) is covered. */
.k-piece__body figure.wp-block-image,
.k-piece__body figure.wp-block-video,
.k-piece__body figure.wp-block-embed,
.k-piece__body figure.wp-block-gallery,
.k-piece__body .k-embed__frame {
	grid-column: media;
	width: 100%;
	/* auto, not 0: this file loads after media.css, so a 0 here would override
	   the centring of anything the height budget has narrowed (the ratio boxes
	   carry their own max-width). Both values equally undo WP's figure margins. */
	margin-inline: auto;
}
/* Replaced media (images, self-hosted video) stays centred in its track and
   inside the height budget. Giving BOTH dimensions `auto` under a max is what
   makes a replaced element shrink proportionally: it keeps its aspect ratio and
   simply gets smaller, rather than being letterboxed inside a box that is still
   the wrong shape. Ratio boxes (iframes) can't do this — they are capped by
   width in media.css, where their ratios are declared. */
.k-piece__body figure.wp-block-image img,
.k-piece__body figure.wp-block-video video {
	display: block;
	margin-inline: auto;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--k-media-max-h);
}

/* --- Width tier per piece --------------------------------------------------
   .k-piece--w-full   visual work runs edge to edge (image/video/embed default)
   .k-piece--w-wide   visual work breaks out to the shell (text/sound default)
   .k-piece--w-prose  nothing breaks out at all — a purely textual piece
   The class is emitted by single-piece.php from kontra_piece_width(): format
   default, per-piece override wins. Only the breakout set moves; body copy
   never leaves [text]. */
.k-piece--w-full .k-piece__body figure.wp-block-image,
.k-piece--w-full .k-piece__body figure.wp-block-video,
.k-piece--w-full .k-piece__body figure.wp-block-embed,
.k-piece--w-full .k-piece__body figure.wp-block-gallery,
.k-piece--w-full .k-piece__body .k-embed__frame {
	grid-column: bleed;
}
.k-piece--w-prose .k-piece__body figure.wp-block-image,
.k-piece--w-prose .k-piece__body figure.wp-block-video,
.k-piece--w-prose .k-piece__body figure.wp-block-embed,
.k-piece--w-prose .k-piece__body figure.wp-block-gallery,
.k-piece--w-prose .k-piece__body .k-embed__frame {
	grid-column: text;
}
/* Full-bleed fills its track up to the file's own resolution — it no longer
   forces `width: 100%` (2026-08-14). That upscaled a modest image to the
   viewport, and it fought the height budget above: a forced width leaves the
   height no way to give, so a tall image could only be letterboxed. "Edge to
   edge" is now a permission, not an obligation; work large enough to take it
   still does. */
.k-piece--w-full .k-piece__body figure.wp-block-image img,
.k-piece--w-full .k-piece__body figure.wp-block-video video {
	width: auto;
}

/* --- Below the work: about, meta, prev/next --- */
.k-piece__about {
	max-width: calc(var(--k-measure) + 2 * var(--k-gutter));
	margin: 2.5rem auto 0;
}
.k-piece__about .k-about__title {
	text-align: left;
}

/* Context lives behind one disclosure — the reader chooses to read about the
   work (2026-08-08). Native <details>, so it still opens without JS. */
.k-about__summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	justify-content: center;
	cursor: pointer;
	list-style: none;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--k-muted);
	padding: 0.6rem 0;
	transition: color 0.2s ease;
}
.k-about__summary::-webkit-details-marker {
	display: none;
}
.k-about__summary:hover,
.k-about__summary:focus-visible {
	color: var(--k-fg);
}
/* Own marker: a chevron that turns when the panel opens. */
.k-about__summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease;
}
.k-about[open] > .k-about__summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}
.k-about__panel {
	padding-top: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
	.k-about__summary,
	.k-about__summary::after {
		transition: none;
	}
}
.k-about__text {
	color: var(--k-muted);
}
.k-about__artists {
	margin-top: 2.5rem;
}
.k-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2rem;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-muted);
}
.k-meta > * + *::before {
	content: "/";
	opacity: 0.5;
	margin-right: 0.85rem;
}