/* ============================================================================
   UNIÓN , 01 Foundations and brand. Lane F's own page CSS.
   No hex, font, easing or duration here: tokens.css is the only file with those.
   ============================================================================ */

/* ---- the identity, in three lines ---- */
.f-idea{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:start}
.f-idea__n{display:block;margin:0 0 var(--s3);opacity:.5}
.f-idea p{margin:0;font-size:var(--size-small);line-height:1.55;max-width:44ch}
.f-idea__show{margin:0 0 var(--s4);min-height:84px;display:flex;align-items:center}
.f-idea__show u-svg{width:min(240px,100%)}
.f-idea__show .d-wave{height:62px}

/* ---- logos ---- */
/* every cell is the same height, so the row reads as a set rather than a ragged
   stack. The portrait lockups are naturally much taller than the horizontal, so
   they are sized by HEIGHT and the horizontal ones by width. */
.f-logos{display:grid;gap:var(--s5);align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.f-logo-item{display:flex;flex-direction:column;gap:var(--s3)}
.f-logo{padding:var(--s5);display:flex;align-items:center;justify-content:center;
  height:250px;box-shadow:inset 0 0 0 1px var(--hairline)}
.f-logo u-svg,.f-logo img{width:min(190px,100%);height:auto;
  max-height:100%;object-fit:contain}
/* a portrait stack is tall and narrow: let its height set the size */
.f-logo u-svg svg{max-height:200px;width:auto;margin:0 auto}
.f-logo--black{background:var(--black)} .f-logo--pink{background:var(--pink)}
.f-logo--coral{background:var(--coral)} .f-logo--yellow{background:var(--yellow)}
.f-logo--cream{background:var(--cream)}
.f-logo__cap{margin:var(--s3) 0 0;opacity:.6}
.f-logo-item > .t-micro{display:block;margin:var(--s3) 0 0;opacity:.6;max-width:30ch}

/* clear space: the drawn box round the mark, measured in the mark's own cap height */
.f-clear{position:relative;display:inline-block;padding:var(--s7)}
.f-clear::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 6px,var(--hairline) 6px 7px)}
.f-clear u-svg{position:relative;width:min(280px,60vw);
  box-shadow:0 0 0 var(--s7) var(--cream)}

/* minimum sizes, shown at their real size and no other */
.f-min{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-end}
.f-min__item{display:flex;flex-direction:column;gap:var(--s2)}
.f-min__item u-svg{display:block}
.f-min__item img{display:block;height:auto}

/* the misuse row. Each wrong thing is SHOWN wrong and struck. */
.f-misuse{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.f-misuse__box{position:relative;background:var(--cream);padding:var(--s5);min-height:130px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--hairline)}
.f-misuse__box u-svg,.f-misuse__box img{width:min(160px,100%);height:auto}
/* the cross is drawn in the brand's own round-capped stroke, not a glyph */
.f-misuse__box::after{content:"";position:absolute;inset:var(--s3);
  background:
    linear-gradient(to bottom right,transparent calc(50% - 2px),var(--black) calc(50% - 2px),
      var(--black) calc(50% + 2px),transparent calc(50% + 2px)),
    linear-gradient(to bottom left,transparent calc(50% - 2px),var(--black) calc(50% - 2px),
      var(--black) calc(50% + 2px),transparent calc(50% + 2px));
  opacity:.85;pointer-events:none}
.f-misuse__stretch{transform:scaleX(1.6)}
.f-misuse figcaption{margin:var(--s3) 0 0;font:700 var(--size-micro)/1.4 var(--font);
  letter-spacing:.08em;text-transform:uppercase}

/* ---- the soundwave, shown honestly at its floor ---- */
.f-wave-scale{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-end}
.f-wave-scale figure{margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.f-wave-scale u-svg{display:block}
.f-wave-scale figcaption{opacity:.65}
.f-wave-scale .is-bad{position:relative}
.f-wave-scale .is-bad::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;
  height:2px;background:var(--black)}

/* ---- the soundwave, moving ---- */
.f-wave-modes{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.f-wm{margin:0;border:var(--rule) solid var(--black);display:flex;flex-direction:column;
  min-width:0}
.f-wm figcaption{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);background:var(--black);color:var(--cream);
  border-bottom:var(--rule) solid var(--black)}
.f-wm figcaption b{font:900 17px/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase}
.f-wm__play{appearance:none;border:var(--rule) solid var(--cream);background:none;
  color:var(--cream);cursor:pointer;padding:6px 10px;min-height:32px;
  font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
.f-wm__play:hover{background:var(--cream);color:var(--black)}
.f-wm__play:focus-visible{outline-color:var(--focus-colour-on-dark)}
.f-wm__stage{flex:1 1 auto;min-height:150px;display:flex;align-items:center;
  justify-content:center;padding:var(--s5);background:var(--cream)}
.f-wm__stage u-svg{width:110px}
.f-wm__stage--pink{background:var(--pink)} .f-wm__stage--coral{background:var(--coral)}
.f-wm__stage--yellow{background:var(--yellow)}
.f-wm__stage--black{background:var(--black)}
.f-wm p{margin:0;padding:var(--s3) var(--s4);border-top:1px solid var(--hairline);
  font-size:12.5px;line-height:1.45}
.f-wm p code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:var(--yellow);padding:1px 4px}

/* ---- colour ---- */
.f-swatches{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:var(--rule) solid var(--black)}
.f-swatch{padding:var(--s6) var(--s4) var(--s4);min-height:190px;display:flex;
  flex-direction:column;justify-content:flex-end;gap:var(--s1);
  border-right:var(--rule) solid var(--black)}
.f-swatch:last-child{border-right:0}
.f-swatch b{font:900 var(--size-title)/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase}
.f-swatch code{font:700 11px/1.4 var(--font);letter-spacing:.1em}
.f-swatch span{font-size:13px;line-height:1.4;opacity:.8}
@media (max-width:700px){.f-swatch{border-right:0;border-bottom:var(--rule) solid var(--black)}
  .f-swatch:last-child{border-bottom:0}}

.f-stages{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.f-stage{background:var(--stage);color:var(--black);padding:var(--s5);
  border:var(--rule) solid var(--black)}
.f-stage b{display:block;font:900 clamp(20px,2.4vw,30px)/.95 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase}
.f-stage span{display:block;margin-top:var(--s2);font-size:13px}

.f-matrix{overflow-x:auto}
.f-matrix td:first-child{white-space:nowrap}
.f-matrix__eg{display:inline-block;padding:3px 9px;font:900 15px/1.3 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase}
/* a display-only pair is shown at the size it is ACTUALLY allowed at, because a
   small specimen of a display pair is a misrepresentation of the rule */
.f-matrix__eg--display{padding:5px 12px;font-size:26px;line-height:1.05}
.f-matrix__v{font-variant-numeric:tabular-nums;font-weight:700}

/* ---- type ---- */
.f-spec{display:grid;gap:var(--s4) var(--s5);grid-template-columns:minmax(0,1fr) 210px;
  align-items:start;padding:var(--s5) 0;border-top:1px solid var(--hairline)}
.f-spec:first-child{border-top:0}
.f-spec__live{min-width:0;overflow-x:clip;overflow-y:visible;padding-top:28px}
/* overflow:hidden here cut the acute off the mega UNIÓN specimen (20 Sep). Never clip Y on display type. */
.f-spec__meta{font-size:13px;line-height:1.5}
.f-spec__meta b{display:block;font:700 var(--size-micro)/1.35 var(--font);
  letter-spacing:var(--track-micro);text-transform:uppercase;opacity:.6;margin-bottom:var(--s1)}
.f-spec__meta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
@media (max-width:760px){.f-spec{grid-template-columns:1fr}}

/* the 10x demonstration: display next to body, at their real ratio.
   align-items:baseline would drop the body copy onto the display's own baseline and
   read as an overlap; the two sit on a shared bottom edge instead. */
.f-ratio{display:flex;gap:var(--s6);align-items:flex-end;flex-wrap:wrap}
.f-ratio__big{line-height:.82;flex:0 1 auto}
.f-ratio__small{max-width:30ch;flex:0 1 30ch;padding-bottom:.5em}

/* ---- space, shape, rules, focus ---- */
.f-space{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-end}
.f-space__bar{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.f-space__bar i{display:block;height:28px;background:var(--black)}
.f-shape{display:flex;flex-wrap:wrap;gap:var(--s5)}
.f-shape__item{width:150px}
.f-shape__item i{display:block;height:96px;background:var(--pink);
  box-shadow:inset 0 0 0 var(--rule) var(--black)}
.f-shape__item:nth-child(2) i{border-radius:var(--radius-card);background:var(--coral)}
.f-shape__item:nth-child(3) i{border-radius:var(--radius-round);background:var(--yellow)}
.f-shape__item span{display:block;margin-top:var(--s2)}
.f-rules{display:flex;flex-direction:column;gap:var(--s4);max-width:560px}
.f-rules div{display:flex;align-items:center;gap:var(--s4)}
.f-rules i{flex:1 1 auto;background:var(--black)}

/* ---- motion, the eight verbs ---- */
.f-verbs{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.f-verb{border:var(--rule) solid var(--black);background:var(--cream);display:flex;
  flex-direction:column;min-width:0}
.f-verb__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:var(--rule) solid var(--black);background:var(--black);
  color:var(--cream)}
.f-verb__head b{font:900 17px/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase}
.f-verb__play{appearance:none;border:var(--rule) solid var(--cream);background:none;
  color:var(--cream);cursor:pointer;padding:6px 10px;min-height:32px;
  font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase}
.f-verb__play:hover{background:var(--cream);color:var(--black)}
.f-verb__play:focus-visible{outline-color:var(--focus-colour-on-dark)}
.f-verb__stage{flex:1 1 auto;min-height:140px;display:flex;align-items:center;
  justify-content:center;padding:var(--s5);overflow:hidden}
.f-verb__note{margin:0;padding:var(--s3) var(--s4);border-top:1px solid var(--hairline);
  font-size:12.5px;line-height:1.45}
.f-verb__note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:var(--yellow);padding:1px 4px}

/* the flood demo: the pink arrives from the tag and the type flips to black,
   which is exactly what .d-slab does. No blend modes: a blend would invent a
   sixth colour, and the system has five. */
.f-flood{position:relative;display:inline-flex;align-items:stretch;overflow:hidden;
  background:var(--black);color:var(--cream)}
.f-flood__fill{position:absolute;inset:0;background:var(--pink);z-index:var(--z-river);
  clip-path:inset(0 100% 0 0)}
.f-flood .d-label{position:relative;z-index:var(--z-body)}
.f-flood__t{position:relative;z-index:var(--z-body);padding:var(--s4) var(--s5);
  font:900 18px/1 var(--font);font-stretch:var(--wdth-condensed);text-transform:uppercase;
  white-space:nowrap;transition:color var(--dur-flood) var(--ease-verb-flood)}
.f-flood.is-flooded .f-flood__t{color:var(--black)}

/* a token name never breaks mid-word: it is a name, not prose */
.f-verb__note code{white-space:nowrap}

/* the small objects the verbs act on */
.f-obj{background:var(--pink);color:var(--black);padding:var(--s4) var(--s5);
  font:900 18px/1 var(--font);font-stretch:var(--wdth-condensed);text-transform:uppercase;
  display:inline-block}
.f-obj--slab{background:var(--black);color:var(--cream)}
.f-obj--draw{width:100%;max-width:220px}
.f-obj--draw path{fill:none;stroke:var(--black);stroke-width:11;stroke-linecap:round}

/* ---- pattern ---- */
.f-pat{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.f-pat__demo{position:relative;height:210px;overflow:hidden;background:var(--cream);
  box-shadow:inset 0 0 0 1px var(--hairline)}
.f-pat__demo--dark{background:var(--black)}
.f-pat__demo p{position:absolute;left:var(--s4);bottom:var(--s4);margin:0;z-index:var(--z-raise);
  background:var(--cream);color:var(--black);padding:var(--s2) var(--s3);
  font:900 15px/1 var(--font);font-stretch:var(--wdth-condensed);text-transform:uppercase}

/* the ribbon library. Each stroke at ITS OWN proportion, on the right ground.
   Never a swatch box: the stroke runs past the cell's edge and is read as a stroke. */
/* The library is an INDEX of strokes, not a sheet of swatches. A cell with a
   coloured ground and a shape centred inside it is exactly the "pattern as a
   swatch box" the brief forbids, which is what the first build of this was.
   So: no cell ground at all on the light strokes, and each stroke is sized past
   its cell so it runs over the edge and reads as a drawn mark. The cream strokes
   still need a dark ground to be visible, so those keep one and are labelled as
   dark-ground-only, which is information rather than decoration. */
/* the strokes run over their cells on purpose, so the GRID clips the bleed at its
   own edge rather than letting it push the page sideways */
.f-ribbons{display:grid;gap:var(--s7) var(--s5);overflow:hidden;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
/* the stroke fills its cell and is allowed to breathe past it slightly, so it
   reads as a drawn mark rather than a specimen in a box, but not so far that
   neighbours collide and the index stops being readable. */
.f-ribbon{position:relative;height:96px;display:flex;align-items:center;
  justify-content:center;margin:0;overflow:visible;min-width:0}
.f-ribbon u-svg{width:88%;flex:none}
.f-ribbon u-svg svg{overflow:visible}
/* only the cream strokes carry a ground, because without one they are invisible */
.f-ribbon--dark{background:var(--black)}
.f-ribbon--dark u-svg{width:96%}
/* the label sits BELOW the cell, clear of the stroke, so neither has to give way */
.f-ribbon figcaption{position:absolute;left:0;right:0;bottom:-18px;margin:0;
  font:700 9px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;
  color:var(--black);opacity:.5;text-align:center}
.f-ribbon--dark figcaption{color:var(--black);opacity:.5}

/* ---- voice and placeholders ---- */
.f-voice{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.f-voice__card{border-left:var(--rule-heavy) solid var(--black);padding-left:var(--s4)}
.f-voice__card 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}
.f-voice__card p{margin:0 0 var(--s3);font-size:var(--size-small);line-height:1.5;max-width:42ch}
.f-place{display:flex;flex-wrap:wrap;gap:var(--s3)}
.f-place code{font:900 14px/1 var(--font);font-stretch:var(--wdth-condensed);
  text-transform:uppercase;letter-spacing:.04em;background:var(--black);color:var(--cream);
  padding:var(--s2) var(--s3)}

/* ---- applications, the mockup gallery ----
   MASONRY at each image's own ratio. Never cropped, never forced to a square. */
.f-gallery{column-count:4;column-gap:var(--s4)}
@media (max-width:1240px){.f-gallery{column-count:3}}
@media (max-width:820px){.f-gallery{column-count:2}}
@media (max-width:460px){.f-gallery{column-count:1}}
.f-gallery figure{break-inside:avoid;margin:0 0 var(--s4);position:relative}
.f-gallery img{width:100%;height:auto;display:block}
.f-gallery figcaption{position:absolute;left:0;bottom:0;margin:0;padding:4px 7px;
  font:700 9px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
  background:var(--black);color:var(--cream)}