/* product.css
 Page styles for the Piko Platform 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. */

/* The canvas takes the CLOSING BAND's parchment, not the page's ink:
   the page height is fractional and the scrollable area rounds out
   past it, leaving a hairline of canvas below the CTA — here a dark
   one under this page's light band (the mirror of the other three).
   Nothing inside the page can cover it: it lies below the last
   element, and .pkPage's overflow-x: clip computes the vertical axis
   to clip too, so even a box-shadow bleed would be cut off. .pkPage
   paints the ink over all the content, so only that remainder
   changes. */
html {
	scroll-behavior: auto;
	background: var(--parchment);
}

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

.pkPage {
	background: var(--ink-950);
	overflow-x: clip;
}

/* Nav, buttons, accent, and footer are shared with the other dark page —
   see ../shared/dark.css. */

/* ── Intro ──────────────────────────────────────────────────── */

/* Editorial hierarchy: the page label ("The Piko Platform") is a
   small-caps eyebrow; the manifesto is the display line, with its
   middle word carrying the italic and the accent. A centered poster
   in the CTA's vocabulary — eyebrow, display line, and lede all share
   one center axis (the block-centered/flush-left mix read as neither
   centered nor anchored). */
.pkIntro {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--gap-copy);
	padding: var(--stroke-hero) var(--gutter-mobile);
}

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

.pkIntroLede {
	max-width: var(--measure);
	font-size: var(--text-lede);
	color: var(--ink-50);
	/* the block stays on the poster'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;
}

/* ── Scroll story ───────────────────────────────────────────── */

.pkStory {
	position: relative;
	height: 460vh; /* story.js re-derives this from its scrollLength prop */
}

.pkPin {
	position: sticky;
	/* Pinned below the sticky 6rem nav bar so the story never scrolls
	   under it (story.js measures live, so the choreography follows). */
	top: var(--nav-height);
	height: calc(100vh - var(--nav-height));
	width: 100%;
	/* Clip like overflow:hidden on the bottom and sides, but let content
	   overflow 6rem upward — exiting text passes visibly beneath the
	   translucent nav instead of being sheared off at its lower edge. */
	clip-path: inset(calc(-1 * var(--nav-height)) 0 0 0);
	display: flex;
	align-items: stretch;
	/* The spread is a symmetric composition: equal 12rem gutters both
	   sides, a generous gap between the columns, text 40% / art the
	   rest. Gap and padding must stay identical to .pkCopy's. */
	gap: var(--gap-spread);
	padding: 0 var(--gutter);
}

/* Invisible stand-in for the copy column so the stage keeps the exact
   geometry it had when the copy lived inside the pin. */
.pkPin::before {
	content: "";
	flex: 0 0 40%;
	max-width: var(--measure);
}

/* The copy overlays the pin (same column geometry as the pin's stand-in);
   story.js moves each step through the viewport in pin-space, so text
   position never fights compositor scrolling. */
.pkCopy {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	gap: var(--gap-spread);
	padding: 0 var(--gutter);
	pointer-events: none;
}

.pkRail {
	flex: 0 0 40%;
	max-width: var(--measure);
	position: relative;
}

/* Steps are parked offscreen until story.js places them (its first frame
   runs before first paint); the transform is then driven per frame. */
.pkCap {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	transform: translateY(-150vh);
	display: flex;
	flex-direction: column;
	/* tight title-to-body gap: each step reads as one coherent block */
	gap: var(--gap-step);
	pointer-events: auto;
}

/* index-look trial: the step pairs follow the homepage section
   vocabulary — orange accent heading at the shared heading size (the
   index's h1 size) over parchment copy at the index base size. */
/* Orange accent headings, the index's section-h1 pattern. */
.pkStepTitle {
	font-family: var(--font-serif-display);
	font-weight: 400;
	font-size: var(--text-heading);
	color: var(--piko-orange-500);
	margin: 0;
}

/* Rail measure: the lede size is for full-width sections; in this
   narrow column the body size gives a classic ~45-character line. */
.pkStepBody {
	font-size: var(--text-body);
	color: var(--ink-50);
	margin: 0;
}

.pkStageWrap {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Asymmetric inset: the extra 10vh below lifts the artwork's center
	   onto the same ~45% axis the reading line docks at (story.js yMid),
	   so text and art face each other across the gap — above true center
	   because step 1 docks there from page load, and the lift keeps the
	   opening beat from drifting too far below the intro. The top guard
	   keeps the artwork (and, at beat 4, the platform screen) off the
	   nav's lower edge on wide, short windows where the stage is
	   height-constrained. */
	padding: var(--space-2) 0 calc(var(--space-2) + 10vh);
}

/* No edge fade: story.js clamps every scattered position so documents
   never touch the stage edge (margin = card half-diagonal + wobble),
   and the gather grid sits deep inside — nothing to hide. */
#pkStage {
	width: 100%;
	height: 100%;
	display: block;
}

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

/* The shared .pkCta component (../shared/dark.css), inverted to a light
   parchment band on this dark page — the mirror of the problem page's
   ink band on parchment. */
.pkCta {
	background-color: var(--parchment);
	color: var(--ink);
}

@media (max-width:900px){
  /* Top stroke down to the hero clamp's own floor: below the threshold
     the bar overhead is itself 4rem of air, so the full 7vh on top of
     it left the page opening on a band of nothing. The foot keeps the
     clamp — it answers to the section below, which hasn't changed. */
  .pkIntro{padding-top:var(--space-2);
    padding-left:var(--gutter-mobile);padding-right:var(--gutter-mobile)}
  /* svh, not vh: iOS's vh is the large viewport, so a vh-sized pin
     overflows the visible screen while the URL bar is expanded and the
     reading position sinks below it. svh never changes during a scroll,
     which also keeps the ignored height-only resizes truly layout-free. */
  .pkPin{flex-direction:column !important;gap:0 !important;padding:0 !important;
    height:calc(100svh - var(--nav-height))}
  .pkPin::before{content:none}
  /* The stage takes the height the tallest step leaves over — story.js
     (mobileCaps) measures the steps and sets --pk-art, since only it
     knows how tall they came out. The fallback covers first paint. */
  .pkStageWrap{flex:none !important;width:100%;height:var(--pk-art,45svh);padding:0}
  /* No mask: each step waits as a faded sliver below the reading block,
     sweeps up to one fixed reading position and fades out there
     (story.js mobileCaps) instead of travelling the whole pin. The pin's
     own clip hides the waiting step's overflow past the fold. */
  .pkCopy{display:block;padding:0 var(--gutter-mobile)}
  .pkRail{width:100%;max-width:none;height:100%}
  /* Two steps down the scale. At --text-heading the longest titles wrap
     to two lines on every phone (and the pair of extra lines is what
     pushed step 4 past the fold); at the lede size all four sit on one
     line down to 360px, so the steps also share a block rhythm — which
     is what lets them crossfade in place without the heading jumping.
     The body follows one step down to keep the pair in proportion. */
  .pkStepTitle{font-size:var(--text-lede)}
  .pkStepBody{font-size:var(--text-body-mobile)}
  /* The run-up to the closing band, as on the other three pages. A
     MARGIN, not the others' padding: the pin sticks within the
     story's padding box, so padding here would simply hold the last
     step on screen 4rem longer instead of opening a gap. The margin
     lands outside that box — the story ends, the page runs on in ink,
     then the CTA. */
  .pkStory{margin-bottom:var(--stroke-cta-lead)}
}

/* The demo dialog is glass over this page's artwork, and the artwork
   drifts every frame even at rest. The blur then resamples per frame —
   the dialog shimmers — and the scene's bright dashboard card reads
   through the dark glass as a white patch at the dialog's corner. A
   still backdrop removes both; the artwork returns when the dialog
   closes. */
body:has(#demo[open]) #pkStage,
body:has(#menu[open]) #pkStage {
	visibility: hidden;
}