/* ============================================================================
   UNIÓN , brand identity pack. LAYOUT ONLY.

   Not one hex, font name, easing or duration lives here: every value is a
   token from the system. This file decides where things sit on the page and
   nothing about how any component looks, because how a component looks is
   already decided in the system and is lifted verbatim.
   ============================================================================ */

/* ------------------------------------------------------------- the page ---- */

body{background:var(--ground);color:var(--ink)}

/* The document rhythm. Every section is a full-bleed band; the copy inside it
   sits in a wrap. Horizontal padding lives on the wrap, vertical on the
   section, never the shorthand (it zeroes the other axis). */
.pk-section{padding-block:clamp(var(--s8),9vw,var(--s9));position:relative}
.pk-section--tight{padding-block:var(--s8)}
.pk-wrap{max-width:1360px;margin-inline:auto;padding-inline:var(--gutter)}
.pk-wrap--narrow{max-width:860px}

/* Ground flips are wrappers, never components. */
.pk-section.on-dark{background:var(--black)}
.pk-section.on-pink{background:var(--pink)}
.pk-section.on-coral{background:var(--coral)}
.pk-section.on-yellow{background:var(--yellow)}
.pk-section.on-dark,.pk-section.on-pink,
.pk-section.on-coral,.pk-section.on-yellow{color:var(--ink)}

/* ---------------------------------------------------------- section head ---- */

.pk-head{display:flex;align-items:baseline;gap:var(--s4);
  border-bottom:var(--rule) solid currentColor;
  padding-bottom:var(--s3);margin-bottom:var(--s6)}
.pk-head__no{font-size:var(--size-micro);letter-spacing:var(--track-micro);
  font-weight:700;text-transform:uppercase;flex:none;opacity:.7}
.pk-head__t{margin:0}
.pk-head__note{margin-left:auto;font-size:var(--size-small);text-align:right;
  max-width:34ch;min-width:18ch;flex:0 1 auto;text-wrap:balance}
@media (max-width:768px){
  .pk-head{flex-wrap:wrap;gap:var(--s2)}
  .pk-head__note{margin-left:0;text-align:left;max-width:none;width:100%}
}

/* A lede paragraph under a section head. */
.pk-lede{font-size:clamp(var(--size-body),2.2vw,27px);line-height:1.35;
  max-width:52ch;margin:0 0 var(--s7);font-weight:500;text-wrap:pretty}

/* ------------------------------------------------------------- the grid ---- */

.pk-grid{display:grid;gap:var(--s6)}
.pk-grid--2{grid-template-columns:repeat(2,1fr)}
.pk-grid--3{grid-template-columns:repeat(3,1fr)}
.pk-grid--4{grid-template-columns:repeat(4,1fr)}
.pk-grid--5{grid-template-columns:repeat(5,1fr)}
/* asymmetric splits, never 6/6 twice running */
.pk-grid--57{grid-template-columns:5fr 7fr}
.pk-grid--75{grid-template-columns:7fr 5fr}
.pk-grid--48{grid-template-columns:4fr 8fr}

@media (max-width:1100px){
  .pk-grid--4,.pk-grid--5{grid-template-columns:repeat(2,1fr)}
  .pk-grid--57,.pk-grid--75,.pk-grid--48{grid-template-columns:1fr}
}
@media (max-width:768px){
  .pk-grid--2,.pk-grid--3,.pk-grid--4,.pk-grid--5{grid-template-columns:1fr}
  .pk-grid{gap:var(--s5)}
}

/* ---------------------------------------------------------------- notes ---- */

/* The explanatory caption that sits under a specimen. This document is a
   reference, so almost every specimen carries one. */
/* `text-wrap:pretty` stops a paragraph ending on a single short word, which is
   the most common ugly wrap in a document this dense. It degrades to normal
   wrapping where it is not supported, so nothing depends on it. */
.pk-note{font-size:var(--size-small);line-height:1.5;max-width:46ch;margin:var(--s3) 0 0;
  text-wrap:pretty}
.pk-note b{font-weight:700}
.pk-note--wide{max-width:64ch}

/* A rule label: the small tracked caps line that names a specimen. */
.pk-tag{display:block;font-size:var(--size-micro);letter-spacing:var(--track-micro);
  font-weight:700;text-transform:uppercase;margin-bottom:var(--s2)}

/* do / do not */
.pk-verdict{display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--size-micro);letter-spacing:var(--track-micro);font-weight:700;
  text-transform:uppercase;margin-top:var(--s2)}
.pk-verdict::before{content:"";width:var(--s3);height:var(--s3);flex:none;
  background:currentColor}
.pk-verdict--no::before{background:none;
  box-shadow:inset 0 0 0 var(--rule) currentColor}

/* --------------------------------------------------------------- frames ---- */

/* A specimen sits in a frame so the page reads as a document ABOUT the work,
   and the work is never confused with the page's own chrome. The frame is a
   hairline and nothing else: no radius, no shadow, no grey. */
.pk-frame{border:var(--rule) solid var(--hairline);padding:var(--s5);
  background:var(--ground);display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;min-height:180px}
.on-dark .pk-frame{border-color:var(--hairline-on-dark);background:var(--black)}
.pk-frame--center{align-items:center;text-align:center}
.pk-frame--flush{padding:0;overflow:hidden}
.pk-frame--tall{min-height:320px}

/* A frame that carries its own ground, for showing a mark on each colour. */
.pk-frame--cream{background:var(--cream);color:var(--black)}
.pk-frame--black{background:var(--black);color:var(--cream);border-color:var(--hairline-on-dark)}
.pk-frame--pink{background:var(--pink);color:var(--black);border-color:transparent}
.pk-frame--coral{background:var(--coral);color:var(--black);border-color:transparent}
.pk-frame--yellow{background:var(--yellow);color:var(--black);border-color:transparent}

/* ------------------------------------------------------------ the marks ---- */

.pk-mark{display:block;width:100%;height:auto}
.pk-mark--sm{max-width:200px}
.pk-mark--md{max-width:340px}
.pk-mark--lg{max-width:100%}

/* --------------------------------------------------------- the IG sheet ---- */

/* Square, because the surface is square. The rounded preview beside it is what
   the platform actually crops to, so both are shown. */
.pk-ig{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
@media (max-width:1100px){.pk-ig{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.pk-ig{grid-template-columns:repeat(2,1fr)}}

.pk-ig__cell{display:flex;flex-direction:column;gap:var(--s2)}
.pk-ig__img{width:100%;aspect-ratio:1;display:block;object-fit:contain}
.pk-ig__round{border-radius:var(--radius-round);overflow:hidden}
.pk-ig__name{font-size:var(--size-micro);letter-spacing:var(--track-micro);
  font-weight:700;text-transform:uppercase}
.pk-ig__use{font-size:var(--size-small);line-height:1.4}

/* the profile row: the mark as the platform crops it, at true size */
.pk-avatars{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-end}
.pk-avatar{text-align:center}
.pk-avatar__img{width:110px;height:110px;border-radius:var(--radius-round);
  display:block;object-fit:cover}
.pk-avatar__img--sm{width:56px;height:56px}
.pk-avatar__cap{font-size:var(--size-micro);letter-spacing:var(--track-micro);
  font-weight:700;text-transform:uppercase;margin-top:var(--s2);display:block}

/* ---------------------------------------------------------- the pattern ---- */

/* A band is a BAND: full bleed, short, ruled top and bottom, read in passing.

   THE ARTWORK DOES NOT TILE. Measured at the join, the six drawn files
   mismatch left-to-right by 49 to 97 per cent, so `background-repeat` puts a
   hard seam through every repeat. Each file is a FINISHED band, not a tile.
   So it is laid in ONCE, sized to cover, and allowed to bleed off both ends:
   `no-repeat` + `cover`. That is also how a drawn band is meant to behave. */
.pk-band{width:100%;height:clamp(64px,9vw,132px);
  border-top:var(--rule) solid var(--black);
  border-bottom:var(--rule) solid var(--black);
  background-repeat:no-repeat;background-position:center;
  background-size:cover}
.pk-band--tall{height:clamp(96px,13vw,190px)}
@media (max-width:640px){
  .pk-band{height:clamp(48px,14vw,80px)}
  .pk-band--tall{height:clamp(64px,16vw,110px)}
}
/* The grounds a pattern band may sit on.

   THERE IS DELIBERATELY NO `--onPink`. The drawn artwork is itself largely
   pink: measured, the densest file is 45% pink ink and 22% black. On a pink
   ground that 45% vanishes into the ground and only the black strokes survive,
   which reads as a different and visibly broken pattern. Cream, yellow, coral
   and black all keep both inks visible. If a pink pattern band is ever wanted,
   it needs artwork drawn for pink, not this artwork on a pink box. */
.pk-band--onCream{background-color:var(--cream)}
.pk-band--onCoral{background-color:var(--coral)}
.pk-band--onYellow{background-color:var(--yellow)}
.pk-band--onBlack{background-color:var(--black)}

/* The fading window: the one pattern treatment the identity prefers.

   The fade must run to the GROUND colour, not to transparent. Masking a
   coloured band to transparent lets the page behind it show through as a pale
   wash, which reads as a grey glow at the edges, and grey is not in the
   palette. So the band paints its ground, and a gradient IN THAT GROUND
   COLOUR is laid over the artwork at each end. Each instance sets
   --fade-ground to whatever its own ground is. */
.pk-band--fade{position:relative;--fade-ground:var(--cream)}
.pk-band--fade::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,
    var(--fade-ground) 0%, transparent 18%,
    transparent 82%, var(--fade-ground) 100%)}

/* A specimen of the artwork itself, so the drawing can be seen whole before it
   is put to work. `contain`, because here the drawing IS the subject and must
   not be cropped. It does not tile, so it is never repeated. */
.pk-swatchpat{width:100%;aspect-ratio:16/9;
  border:var(--rule) solid var(--hairline);
  background-repeat:no-repeat;background-position:center;background-size:contain}

/* The tall artwork. Shown at its own proportion, one instance, never repeated:
   these files are finished pieces and do not tile. */
.pk-strip{width:100%;aspect-ratio:1/1.07;
  border:var(--rule) solid var(--hairline);
  background-repeat:no-repeat;background-position:center;background-size:cover}

/* -------------------------------------------------------------- devices ---- */

/* Each device gets a stage tall enough that it is never cropped, and a caption
   naming its verb, because the verb is the reason the device moves at all. */
.pk-device{display:grid;gap:var(--s4);align-content:start}
.pk-device__stage{border:var(--rule) solid var(--hairline);padding:var(--s5);
  min-height:220px;display:flex;align-items:center;justify-content:center;
  background:var(--cream);overflow:visible}
.pk-device__stage--dark{background:var(--black);border-color:var(--hairline-on-dark)}
.pk-device__stage--pink{background:var(--pink);border-color:transparent}
.pk-device__stage--coral{background:var(--coral);border-color:transparent}
.pk-device__verb{font-size:var(--size-micro);letter-spacing:var(--track-micro);
  font-weight:700;text-transform:uppercase}

/* ---------------------------------------------------------------- phone ---- */

/* The phone specimens. A real 390 viewport in an iframe, so what is shown is
   the actual page at the actual width, not a picture of it. */
.pk-phones{display:flex;gap:var(--s6);flex-wrap:wrap;justify-content:center}
.pk-phone{flex:none;width:390px;max-width:100%}
.pk-phone__screen{width:100%;height:760px;border:var(--rule-heavy) solid var(--black);
  background:var(--cream);display:block;overflow:hidden}
.on-dark .pk-phone__screen{border-color:var(--cream)}
.pk-phone__frame{width:390px;height:756px;border:0;display:block;
  transform-origin:0 0}
.pk-phone__cap{font-size:var(--size-micro);letter-spacing:var(--track-micro);
  font-weight:700;text-transform:uppercase;margin-top:var(--s3);display:block;
  text-align:center}
@media (max-width:900px){
  .pk-phone{width:100%;max-width:390px}
}

/* ------------------------------------------------------------- swatches ---- */

.pk-swatch{display:flex;flex-direction:column;justify-content:flex-end;
  min-height:190px;padding:var(--s4);border:var(--rule) solid var(--hairline)}
.pk-swatch__name{font-weight:900;font-stretch:var(--wdth-condensed);
  text-transform:uppercase;font-size:var(--size-title);line-height:var(--lh-title)}
.pk-swatch__hex{font-size:var(--size-micro);letter-spacing:var(--track-micro);
  font-weight:700;text-transform:uppercase;margin-top:var(--s1)}
.pk-swatch__role{font-size:var(--size-small);line-height:1.4;margin-top:var(--s2)}

/* ------------------------------------------------------------- the table ---- */

.pk-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pk-table{width:100%;border-collapse:collapse;min-width:560px}
.pk-table th,.pk-table td{text-align:left;padding:var(--s3) var(--s4);
  border-bottom:var(--rule) solid var(--hairline);font-size:var(--size-small);
  vertical-align:top}
.pk-table th{font-size:var(--size-micro);letter-spacing:var(--track-micro);
  font-weight:700;text-transform:uppercase;white-space:nowrap}
.on-dark .pk-table th,.on-dark .pk-table td{border-bottom-color:var(--hairline-on-dark)}

/* --------------------------------------------------------------- lists ----- */

.pk-rules{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4)}
/* The bullet is drawn from the list item itself rather than by a grid column.

   A grid here put every inline child in its own track, so an item containing a
   <b> laid the bold sentence out in a one-word-wide column beside the rest of
   its own paragraph. The marker is now a positioned square and the item stays
   ordinary flowing text, so any inline markup inside it wraps normally. */
.pk-rules li{position:relative;padding-left:calc(var(--s4) + var(--s3));
  font-size:var(--size-body);line-height:1.45;text-wrap:pretty}
.pk-rules li::before{content:"";position:absolute;left:0;top:.5em;
  width:var(--s4);height:var(--s4);background:var(--primary)}
.on-dark .pk-rules li::before{background:var(--yellow)}

/* ------------------------------------------------------------ contents ----- */

.pk-toc{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s7)}
@media (max-width:768px){.pk-toc{grid-template-columns:1fr}}
.pk-toc a{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:var(--rule) solid var(--hairline);
  text-decoration:none;color:inherit;align-items:baseline}
.pk-toc a:hover{background:var(--cream)}
.on-dark .pk-toc a{border-bottom-color:var(--hairline-on-dark)}
.on-dark .pk-toc a:hover{background:rgba(252,246,235,.08)}
.pk-toc__no{font-size:var(--size-micro);letter-spacing:var(--track-micro);
  font-weight:700}
.pk-toc__t{font-weight:900;font-stretch:var(--wdth-condensed);
  text-transform:uppercase;font-size:var(--size-title)}

/* ---------------------------------------------------------------- cover ---- */

.pk-cover{min-height:100svh;display:flex;flex-direction:column;
  justify-content:space-between;background:var(--coral);color:var(--black);
  padding-block:var(--s6);overflow:hidden;position:relative}
/* The cover is left-anchored like every other page, so its wraps run the full
   width rather than centring a narrower column inside a full-bleed field. */
.pk-cover .pk-wrap{max-width:none;width:100%;margin-inline:0}
.pk-cover__top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s4);font-size:var(--size-micro);letter-spacing:var(--track-micro);
  font-weight:700;text-transform:uppercase}
.pk-cover__mark{width:min(78vw,900px);height:auto;display:block;
  margin-block:var(--s7)}
.pk-cover__foot{display:flex;justify-content:flex-start;align-items:flex-end;
  gap:var(--s7);flex-wrap:wrap;
  /* clear of the character, who overlaps the bottom right */
  max-width:min(70ch,62%)}
@media (max-width:900px){.pk-cover__foot{max-width:none}}
.pk-cover__title{font-size:clamp(26px,3.4vw,52px);font-weight:900;
  font-stretch:var(--wdth-condensed);text-transform:uppercase;
  line-height:var(--lh-head);margin:0;padding-top:.22em;flex:none}
.pk-cover__meta{font-size:var(--size-small);line-height:1.5;max-width:30ch;
  margin:0;padding-bottom:.2em}

/* The character on the cover. He overlaps the right edge, which is deliberate,
   but he stands ON the bottom rather than being cut off by it: his feet are the
   whole point of the drawing. */
.pk-cover__mascot{position:absolute;right:calc(var(--gutter) * -.25);
  bottom:var(--s5);width:clamp(180px,24vw,340px);
  pointer-events:none;z-index:var(--z-body)}
@media (max-width:768px){.pk-cover__mascot{display:none}}

/* --------------------------------------------------------------- footer ---- */

.pk-foot{padding-block:var(--s8);background:var(--black);color:var(--cream)}
.pk-foot__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
@media (max-width:768px){.pk-foot__grid{grid-template-columns:1fr}}

/* ----------------------------------------------- the lifted component box ---
   Every included component arrives wrapped in `.spec-stage`, the design
   system's own documentation frame. That frame carries `padding: up to 72px
   var(--gutter)`, which is right inside the system's own pages and wrong here:
   this document already supplies the gutter through `.pk-wrap`, so the two
   stack and every component sits in a deep trough of empty space, indented
   from the section head above it.

   So the frame's padding is neutralised horizontally and trimmed vertically.
   Nothing about the component itself is touched: this is the wrapper the
   build puts around it, not the component's own markup or CSS.
   ---------------------------------------------------------------------------- */

/* `min-width:0` and `max-width:100%` are load-bearing, not tidying.

   A `.spec-stage` is a grid item inside `.pk-stack`, and a grid item defaults
   to `min-width:auto`, meaning it refuses to shrink below its content's
   intrinsic width. A component whose own grid is `repeat(auto-fit,
   minmax(260px,1fr))` then measures its widest natural layout instead of the
   viewport: at 390 the devices' anatomy diagram laid out at 1257px, running
   its labels and totem bars far outside the screen. `body{overflow:hidden}`
   hid the overflow, so the page did NOT pan and no page-level check caught it,
   yet three quarters of that component was unreachable on a phone. */
.pk-wrap .spec-stage,
.pk-section .spec-stage{padding-left:0;padding-right:0;
  padding-block:0;min-height:0;min-width:0;max-width:100%}

/* A lifted component's own prose was written for a narrower column than this
   document gives it, so at 1440 some paragraphs run past 90 characters a line,
   well beyond a comfortable measure. Cap the running text; anything that is a
   specimen, a grid or a table is left alone to use the full width.

   A `ch` is the width of a zero, which is wider than the average letter, so
   70ch measured out at about 95 real characters a line. 52ch lands the running
   text at roughly 70, which is the comfortable range. */
.pk-section .spec-stage > p,
.pk-section .spec-stage > .t-body,
.pk-section .spec-stage > .t-small{max-width:52ch}

/* A component that paints its own ground keeps its inner padding, or the
   colour would run edge to edge against its own content. */
.pk-wrap .spec-stage--black,.pk-wrap .spec-stage--pink,
.pk-wrap .spec-stage--coral,.pk-wrap .spec-stage--yellow{
  padding:var(--s6) var(--s5)}

/* ------------------------------------------------- the way back to the hub ---
   A real bar in the page flow, not a floating one.

   A floating button was tried first and covers content on a document this
   dense: the cover has no free corner (title bottom left, date top right,
   character bottom right), and once past the cover it sits over body copy at
   every width. Measured overlaps of 6,800px2 on desktop and two collisions on
   a phone. So it takes its own strip above everything, where it covers
   nothing and reads as the document's own chrome.

   Only shown when this document is served from inside a review site, so a
   standalone copy never carries a dead link.
   ---------------------------------------------------------------------------- */

.pk-back{display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--gutter);min-height:var(--tap-min);
  background:var(--black);color:var(--cream);text-decoration:none;
  font-size:var(--size-micro);letter-spacing:var(--track-micro);
  font-weight:700;text-transform:uppercase;
  /* FIXED, not sticky. `base.css` gives body `overflow:hidden auto`, which
     makes body a scroll container and silently breaks `position:sticky`: the
     bar scrolls away with the page. Fixed keeps it, and the body is padded by
     exactly its height below so it covers nothing. */
  position:fixed;top:0;left:0;right:0;z-index:var(--z-chrome)}
/* the room the fixed bar occupies, so it never sits over the cover */
body:has(.pk-back:not([hidden])){padding-top:var(--tap-min)}
.pk-back[hidden]{display:none}
.pk-back svg{flex:none;transition:transform var(--dur-state) var(--ease-out)}
.pk-back:hover svg{transform:translateX(-3px)}
.pk-back:focus-visible{outline:var(--focus-width) solid var(--focus-colour-on-dark);
  outline-offset:calc(var(--focus-offset) * -1)}

@media (prefers-reduced-motion:reduce){
  .pk-back svg{transition:none}
  .pk-back:hover svg{transform:none}
}

/* ------------------------------------------------------------ utilities ---- */

.pk-stack{display:grid;gap:var(--s4);align-content:start}

/* A row of specimen cards. The frames must share a height or each caption
   starts wherever its own image happens to end, and the row reads as ragged.
   A portrait lockup is much taller than a horizontal one at the same width, so
   the mark inside a fixed-height frame is capped by HEIGHT as well as width. */
/* A fixed height, so a row of specimen cards puts its captions on one line
   rather than each starting wherever its own image ends.

   The mark inside is constrained by giving the FRAME a content box the mark
   fills, and letting the drawing scale down inside it. A `<u-svg>` is a custom
   element that sizes to the SVG it injects, so it is made a flex item with its
   own min-height of 0: capping max-height on the element alone either fails to
   constrain the drawing or, if the inner svg's height is also overridden,
   collapses it to nothing. */
.pk-frame--tall{height:320px;min-height:0}
.pk-frame--tall > .pk-mark{flex:0 1 auto;min-height:0;max-height:100%}
.pk-frame--tall > u-svg.pk-mark{display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.pk-frame--tall > u-svg.pk-mark > svg{max-width:100%;max-height:100%}
.pk-stack--sm{gap:var(--s2)}
.pk-stack--lg{gap:var(--s6)}
.pk-bleed{margin-inline:calc(var(--gutter) * -1)}

/* Reduced motion: the document shows its final state and nothing loops. */
@media (prefers-reduced-motion:reduce){
  .pk-band{animation:none!important}
}