/* dark.css
 Shared base for the dark redesign pages (product/, for-captives/):
 the rules that flip style.css's light serif theme to the redesign's
 dark sans one. Load order: tokens.css → style.css → dark.css → the
 page stylesheet (page-specific overrides stay in the page's own file). */

/* Fonts (EB Garamond, JetBrains Mono) are loaded via <link> in each
   page — an @import here would serialize the font fetch behind this
   stylesheet. */

/* Design tokens (the ramps, semantic aliases, fonts, shape, motion)
   live in ../shared/tokens.css, loaded before style.css. story.js /
   problem.js and the page SVG defs use the same values as literals, so
   keep the ramps intact even where CSS doesn't reference every step. */

/* Base — box-sizing, margin reset, etc. come from ../shared/style.css;
   these rules flip its light serif theme to the redesign's dark sans one. */
body {
	background: var(--ink-950);
	color: var(--ink-50);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

/* Like the index: links inherit their text color, and orange is opted
   into per element (.amber-text, .pkAccent) rather than the default. */
a {
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
}

/* style.css pads main by the nav height because the index header is
   fixed and takes no space in the flow. These pages' .pkNav is sticky,
   so it holds its own, and the padding would push every section down by
   a nav's worth. */
.pkPage main,
.plPage main {
	padding-top: 0;
}

@media (prefers-reduced-motion: reduce){*{animation:none !important}}

/* ── Accent ─────────────────────────────────────────────────── */

.pkAccent {
	color: var(--piko-orange-500);
}

/* ── Nav ────────────────────────────────────────────────────── */

/* index-look trial: the nav adopts the index header's language — a
   sticky, blurred, hairline-ruled bar with the logo left, mixed-case
   serif links centered, and the demo button right. Sticky (not fixed,
   as on index) keeps the bar in flow, so the pages need no
   padding-top compensation; visually the two are identical. The bar
   follows its page: ink here, and the problem page (parchment, though
   it loads this file) flips it back to light. */
.pkNav {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	height: var(--nav-height);
	/* The shared --gutter (fluid below the 1600px design width) keeps
	   this bar's contents in the same spot as the index header at
	   every window width. Small screens get their own padding below. */
	padding: 0 var(--gutter);
	position: sticky;
	top: 0;
	z-index: 10;
	border-bottom: var(--hairline) solid var(--ink-700);
	/* The page's own ink, translucent — the dark counterpart of the
	   index header's translucent white. */
	background-color: var(--glass-dark);
	backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--shadow-bar-dark);
}

.pkNavBrand {
	display: flex;
	align-items: center;
	gap: var(--space-05);
}

/* Same artwork and sizing rule as the index header's logo (the shared
   orange mark needs no invert on ink). */
.pkNavLogo {
	width: auto;
	height: var(--logo-cap);
}

.pkNavLinks {
	justify-self: center;
}

.pkNavLink {
	margin: 0 var(--space-1);
	color: var(--ink-50);
	/* The stroke's slot is always reserved (transparent when idle) so
	   underlining doesn't grow the box and nudge the row. */
	border-bottom: var(--emphasis) solid transparent;
	transition: border-bottom var(--duration-ui) ease-in-out;
}

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

.pkNavLinkActive,
.pkNavLinkActive:hover {
	font-style: italic;
	border-bottom-color: var(--brand-primary);
}

/* Below the mobile threshold the links and the button both leave the
   bar for the glass menu (menu.js; base styles in style.css): the one
   row keeps brand and hamburger, one at each end. Mirrors the index
   header's rule in style.css; keep the two in step. */
@media (max-width: 900px) {
	.pkNav {
		/* Two items left, so the middle column carries the row's slack
		   rather than the vanished links'. */
		grid-template-columns: 1fr auto;
		padding: 0 var(--gutter-mobile);
	}

	.pkNavLinks,
	.pkNav .pkBtn {
		display: none;
	}
}

/* The hamburger in the dark bar's stroke color. (The problem page's
   light bar re-inks it in for-captives.css.) */
#menu-button {
	color: var(--ink-50);
}

/* ── Buttons ────────────────────────────────────────────────── */

/* The nav button is the index header's neutral .button translated to
   dark: parchment border and text, filling parchment with ink text on
   hover (the demo dialog's dark buttons use the same scheme). Orange
   buttons exist only where the index uses amber ones — the CTA. */
.pkBtn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-05);
	font-family: var(--font-sans);
	font-size: var(--text-control);
	border: var(--emphasis) solid var(--ink-50);
	border-radius: var(--radius);
	padding: var(--space-05) var(--space-1);
	color: var(--ink-50);
	background: transparent;
	cursor: pointer;
	transition:
		background-color var(--duration-ui) ease-in-out,
		color var(--duration-ui) ease-in-out;
}

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


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

/* The end-of-page CTA is the index CTA: a centered default-scale h1
   and an amber .button (the section's .dark class gives the button its
   index dark-section hover). It ends the page — there is no footer,
   as on the index. */
.pkCta {
	position: relative;
	padding: var(--stroke-cta) var(--gutter);
}

.pkCta .copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-copy);
}

.pkCta .copy .button {
	margin-top: var(--gap-copy);
}

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