/* ============================================================================
   UNIÓN , base. Reset, the type voices, and the documentation chrome.
   Lane F owns this file. Every value comes from tokens.css.

   The chrome is deliberately plain and quiet, cream ground, black rules, micro
   labels, so it never competes with the components it frames. It is still set in
   Archivo at the brand's own condensed width, so the document reads as UNIÓN's
   own paperwork rather than a generic docs theme.
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* an author display: rule otherwise beats the hidden attribute */
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 var(--size-body)/var(--lh-body) var(--font);overflow-x:hidden}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:var(--focus-width) solid var(--focus-colour);outline-offset:var(--focus-offset)}
u-svg{display:block}
u-svg svg{width:100%;height:auto}
.u-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ============================================================================
   THE TYPE VOICES. Straight off the posters. These are the only type styles in
   the system; a component sets a voice class, it does not set a font shorthand.
   ============================================================================ */
/* MEASURED, 20 Sep 2026: at these leadings (.82 to .9) the acute on a capital Ó sits
   ABOVE the line box and is clipped by any ancestor that hides its overflow. The
   accent is not optional in this brand, so every display voice declares the overflow
   it needs. Do not remove this: the word silently becomes UNION without it. */
.t-mega,.t-display,.t-head,.t-title,.t-wide{margin:0;text-transform:uppercase;
  font-family:var(--font);font-weight:900;font-stretch:var(--wdth-condensed);
  padding-top:.22em;overflow:visible}  /* room for the acute on the Ó at lh .82 */
.t-mega{font-size:var(--size-mega);line-height:var(--lh-mega);letter-spacing:-.015em}
.t-display{font-size:var(--size-display);line-height:var(--lh-display);letter-spacing:-.01em}
.t-head{font-size:var(--size-head);line-height:var(--lh-head)}
.t-title{font-size:var(--size-title);line-height:var(--lh-title)}
/* the one WIDE voice: the SET TIMES headline. 800, not 900, at 125% width. */
.t-wide{font-weight:800;font-stretch:var(--wdth-wide);font-size:var(--size-wide);line-height:var(--lh-head)}
.t-micro{font:700 var(--size-micro)/1.35 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase;margin:0}
.t-body{font:400 var(--size-body)/var(--lh-body) var(--font);max-width:66ch;margin:0}
.t-small{font:400 var(--size-small)/1.5 var(--font);max-width:66ch;margin:0}

/* The handwritten aside in the mockups ("MUSIC PEOPLE TOGETHER") is a DRAWN thing,
   Louis's own hand. No script font is loaded and none should be. This is the
   stand-in: Archivo at full width, rotated off the baseline, with a drawn
   underline stroke that has the brand's round cap. Never sold as the real one. */
/* .t-aside REMOVED 20 Sep: Louis ruled the slanted, underlined aside out. If a handwritten
   aside is ever wanted it is his drawn artwork as an image, never type set at an angle. */

/* ============================================================================
   DOCUMENTATION CHROME , the sidebar
   Desktop (1100+): a fixed left rail, the 8 pages, and under the current page
   its own sections, built by union.js from the .spec elements on the page.
   Under 1100 it becomes a top bar with a menu button.
   ============================================================================ */
:root{--nav-w:236px}

.ds-nav{position:fixed;inset:0 auto 0 0;width:var(--nav-w);z-index:var(--z-chrome);
  background:var(--cream);border-right:var(--rule) solid var(--black);
  display:flex;flex-direction:column;overflow:hidden}
.ds-nav__brand{display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s4) var(--s3);border-bottom:var(--rule) solid var(--black);flex:0 0 auto}
.ds-nav__brand u-svg{width:98px;flex:none}
/* the soundwave beside the wordmark. It runs "intro" on load and "eq" on hover:
   the identity's own animation, in the documentation's own chrome. */
.ds-nav__brand .ds-nav__wave{width:30px}
.ds-nav__brand span{font:700 10px/1.3 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase;opacity:.65}
.ds-nav__scroll{flex:1 1 auto;overflow-y:auto;padding:var(--s3) 0 var(--s7)}
.ds-nav__burger{display:none}

.ds-nav a{display:block;text-decoration:none}
.ds-nav__page{padding:9px var(--s4);font:900 13px/1.15 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase;letter-spacing:.015em;
  display:grid;grid-template-columns:20px 1fr;gap:var(--s3);align-items:baseline}
.ds-nav__page i{font:700 10px/1.3 var(--font);font-style:normal;letter-spacing:.1em;opacity:.5}
.ds-nav__page:hover{background:var(--pink)}
.ds-nav__page[aria-current="page"]{background:var(--black);color:var(--cream)}
.ds-nav__page[aria-current="page"] i{opacity:.7}
/* the current page's own sections, built from the .spec list */
.ds-nav__secs{margin:0;padding:var(--s2) 0 var(--s3);list-style:none;
  border-bottom:1px solid var(--hairline)}
.ds-nav__secs a{padding:5px var(--s4) 5px var(--s6);font:700 11px/1.3 var(--font);
  letter-spacing:.04em;opacity:.78}
.ds-nav__secs a:hover{background:var(--yellow);opacity:1}
.ds-nav__secs a.is-here{opacity:1;background:var(--yellow)}

@media (max-width:1099px){
  :root{--nav-w:0px}
  .ds-nav{inset:0 0 auto 0;width:auto;height:auto;max-height:100dvh;
    border-right:0;border-bottom:var(--rule) solid var(--black)}
  .ds-nav__brand{border-bottom:0;justify-content:space-between;padding:var(--s3) var(--s4)}
  .ds-nav__burger{display:grid;place-items:center;gap:var(--s1);
    width:var(--tap-min);height:var(--tap-min);padding:0;cursor:pointer;
    appearance:none;border:var(--rule) solid var(--black);background:var(--yellow)}
  .ds-nav__burger i{display:block;width:20px;height:3px;background:var(--black);
    border-radius:var(--radius-round);grid-area:1/1;
    transition:transform var(--dur-state) var(--ease-out)}
  .ds-nav__burger i:nth-child(1){transform:translateY(-6px)}
  .ds-nav__burger i:nth-child(3){transform:translateY(6px)}
  .ds-nav[data-open="1"] .ds-nav__burger i:nth-child(1){transform:rotate(45deg)}
  .ds-nav[data-open="1"] .ds-nav__burger i:nth-child(2){transform:scaleX(0)}
  .ds-nav[data-open="1"] .ds-nav__burger i:nth-child(3){transform:rotate(-45deg)}
  .ds-nav__scroll{display:none;border-top:var(--rule) solid var(--black);max-height:70dvh}
  .ds-nav[data-open="1"] .ds-nav__scroll{display:block}
  .ds-nav__page{min-height:var(--tap-min);align-items:center;font-size:15px}
  .ds-nav__secs a{min-height:38px;display:flex;align-items:center}
}

/* ============================================================================
   THE PAGE FRAME
   ============================================================================ */
.ds-main{margin-left:var(--nav-w);min-width:0}
@media (max-width:1099px){.ds-main{margin-left:0;padding-top:76px}}

.ds-head{padding:var(--s8) var(--gutter) var(--s6);border-bottom:var(--rule) solid var(--black)}
.ds-head__no{display:block;margin:0 0 var(--s3);opacity:.6}
.ds-head h1{margin:0 0 var(--s4)}
.ds-head p{max-width:60ch}

/* ============================================================================
   .spec , one documented component. The unit every lane repeats.
   ============================================================================ */
.spec{border-bottom:var(--rule) solid var(--black);position:relative;scroll-margin-top:var(--s4)}
@media (max-width:1099px){.spec{scroll-margin-top:84px}}

.spec-head{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s2) var(--s5);
  align-items:baseline;padding:var(--s3) var(--gutter);
  border-bottom:1px solid var(--hairline);position:relative;z-index:var(--z-body)}
.spec-head__id{font:900 var(--size-title)/1 var(--font);font-stretch:var(--wdth-condensed)}
.spec-head__name{font:700 12px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase}
.spec-head__q{grid-column:2;opacity:.75;font-size:var(--size-small);max-width:70ch}
.spec-head__ref{grid-column:3;grid-row:1;font:700 10px/1 var(--font);
  letter-spacing:.14em;text-transform:uppercase;padding:5px 7px;
  background:var(--black);color:var(--cream);white-space:nowrap}
@media (max-width:700px){
  .spec-head{grid-template-columns:auto 1fr}
  .spec-head__ref{grid-column:2;grid-row:2;justify-self:start}
  .spec-head__q{grid-column:1/-1}
}

/* the stage is where the live component sits. Overflow is VISIBLE by default so a
   ribbon may bleed off the edge; a stage that must clip adds --clip and then owes
   the boundary rule (a fade, or the stroke's own round cap) on the cut edge. */
.spec-stage{position:relative;padding:clamp(28px,5vw,72px) var(--gutter);min-height:200px}
.spec-stage--clip{overflow:hidden}
.spec-stage--black{background:var(--black);color:var(--cream);
  --ground:var(--black);--ink:var(--cream);--focus-colour:var(--focus-colour-on-dark)}
.spec-stage--pink{background:var(--pink);--ground:var(--pink)}
.spec-stage--coral{background:var(--coral);--ground:var(--coral)}
.spec-stage--yellow{background:var(--yellow);--ground:var(--yellow)}
.spec-stage--tight{padding-left:0;padding-right:0}
.spec-stage > *:not(.rv){position:relative;z-index:var(--z-body)}

/* a wrapping row of labelled state cells, so a state can be read without interacting */
.spec-states{display:flex;flex-wrap:wrap;gap:var(--s5);padding:var(--s5) var(--gutter);
  border-top:1px solid var(--hairline);background:var(--cream);color:var(--black);
  position:relative;z-index:var(--z-body)}
.spec-states__cell{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;
  min-width:0}
.spec-states__cell > .t-micro{opacity:.6}
.spec-states--dark{background:var(--black);color:var(--cream);
  --ground:var(--black);--ink:var(--cream);--focus-colour:var(--focus-colour-on-dark)}

.spec-notes{border-top:1px solid var(--hairline);background:var(--cream);color:var(--black);
  position:relative;z-index:var(--z-body)}
.spec-notes > summary{cursor:pointer;padding:var(--s3) var(--gutter);list-style:none;
  font:700 var(--size-micro)/1.35 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase;display:flex;align-items:center;gap:var(--s3);min-height:var(--tap-min)}
.spec-notes > summary::-webkit-details-marker{display:none}
.spec-notes > summary::before{content:"";width:13px;height:13px;flex:none;
  background:var(--black);clip-path:polygon(0 0,100% 50%,0 100%);
  transition:transform var(--dur-state) var(--ease-out)}
.spec-notes[open] > summary::before{transform:rotate(90deg)}
.spec-notes > summary:hover{background:var(--yellow)}
.spec-notes__body{padding:0 var(--gutter) var(--s6);display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.spec-notes__body > section{min-width:0}
.spec-notes__body h4{margin:0 0 var(--s2);font:700 var(--size-micro)/1.35 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase;opacity:.6}
.spec-notes__body p,.spec-notes__body ul{margin:0 0 var(--s3);font-size:var(--size-small);
  line-height:1.5;max-width:56ch}
.spec-notes__body ul{padding-left:1.1em}
.spec-notes__body li{margin-bottom:var(--s1)}
.spec-notes__body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--yellow);padding:1px 4px}
.spec-notes__code{grid-column:1/-1}

/* code block with a copy button */
.ds-code{position:relative;background:var(--black);color:var(--cream);
  border:var(--rule) solid var(--black)}
.ds-code pre{margin:0;padding:var(--s4) var(--s4) var(--s5);overflow-x:auto;
  font:400 12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}
.ds-code__copy{position:absolute;top:var(--s2);right:var(--s2);appearance:none;cursor:pointer;
  border:var(--rule) solid var(--cream);background:var(--black);color:var(--cream);
  font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;
  padding:8px 10px;min-height:32px;transition:background var(--dur-state) var(--ease-out)}
.ds-code__copy:hover{background:var(--pink);color:var(--black);border-color:var(--pink)}
.ds-code__copy:focus-visible{outline-color:var(--focus-colour-on-dark)}
.ds-code__copy[data-done="1"]{background:var(--yellow);color:var(--black);border-color:var(--yellow)}

/* ============================================================================
   SMALL SHARED DOC FURNITURE , used by the foundation pages
   ============================================================================ */
.ds-lede{padding:var(--s6) var(--gutter);border-bottom:1px solid var(--hairline);
  display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ds-lede p{margin:0;max-width:52ch;font-size:var(--size-small);line-height:1.55}

.ds-grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ds-row{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start}
.ds-rule{height:var(--rule);background:var(--black);border:0;margin:var(--s5) 0}

/* DO / DO NOT pairs. The label is a drawn tag, not a coloured badge. */
.ds-judge{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ds-judge__item{min-width:0}
.ds-judge__tag{display:inline-block;padding:5px 10px;margin:0 0 var(--s3);
  font:900 12px/1 var(--font);font-stretch:var(--wdth-condensed);text-transform:uppercase;
  letter-spacing:.08em;background:var(--black);color:var(--cream)}
.ds-judge__tag--yes{background:var(--pink);color:var(--black)}
.ds-judge__tag--no{background:var(--black);color:var(--cream);text-decoration:line-through;
  text-decoration-thickness:2px}
.ds-judge figcaption{margin:var(--s3) 0 0;font-size:var(--size-small);line-height:1.5;max-width:48ch}

/* a measured table (contrast matrix, sizes) */
.ds-table{width:100%;border-collapse:collapse;font-size:var(--size-small)}
/* a wide table scrolls inside its own window on a phone; it never clips its last column */
.ds-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.ds-table-scroll .ds-table{min-width:640px}
.ds-table th,.ds-table td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--hairline);
  vertical-align:middle}
.ds-table thead th{font:700 10px/1.3 var(--font);letter-spacing:var(--track-micro);
  text-transform:uppercase;border-bottom:var(--rule) solid var(--black)}
.ds-table td.is-fail{text-decoration:line-through;text-decoration-thickness:2px;opacity:.65}
.ds-table__swatch{display:inline-block;width:18px;height:18px;vertical-align:-4px;
  margin-right:6px;box-shadow:inset 0 0 0 1px var(--hairline)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}