/* ------------------------------------------------------------------------
   TYPE. Two faces and a fixed ladder of sizes.

   LanaPixel does headlines, labels, buttons and numbers. It is a pixel font,
   so every size it is ever set at is a whole multiple of 11px and every line
   height is a whole number of pixels. Smoothing is off.

   The system sans-serif does body copy. Long paragraphs in a pixel font do
   not get read, and that is the whole reason for the split.
   ------------------------------------------------------------------------ */

.px{
  font-family:var(--face-pixel);
  font-weight:400;
  font-smooth:never;
  -webkit-font-smoothing:none;
  letter-spacing:0;
  /* A long word can still be wider than a phone. Only bites on overflow. */
  overflow-wrap:break-word;
}

/* --- the display headline ------------------------------------------------
   The biggest thing that will ever be on the page. The shadow is a hard
   offset in a palette colour, never a blur: a blur would smooth the one
   thing on the page that must not be smoothed.
   ------------------------------------------------------------------------ */
.display{
  font-size:var(--f-display);
  line-height:var(--lh-display);
  color:var(--ink-bright);
  text-shadow:0 4px 0 var(--depth-far);
  max-width:18ch;
}

.h2{
  font-size:var(--f-h2);
  line-height:var(--lh-h2);
  color:var(--ink-bright);
  text-shadow:0 4px 0 var(--depth-far);
  max-width:20ch;
}

.h3{
  font-size:var(--f-h3);
  line-height:var(--lh-h3);
  color:var(--accent);
}

/* The lit words inside a headline. <em> only for the emphasis it means, the
   slant is turned off because a pixel font has no italic. */
.display em,.h2 em,.h3 em{font-style:normal;color:var(--accent)}

/* Danger red, and it does not appear anywhere above station 4. That is a rule
   in docs/design-direction.md section 5: red means something on this page
   because it is held back until the Hollowlands. Issue 7 added .h3. */
.h2 em.hot,.h3 em.hot{color:var(--danger-hot)}

.kicker{
  font-family:var(--face-pixel);
  font-smooth:never;
  -webkit-font-smoothing:none;
  font-size:var(--f-kicker);
  line-height:var(--lh-kicker);
  letter-spacing:var(--tr-kicker);
  text-transform:uppercase;
  color:var(--accent-shade);
}

/* --- body ---------------------------------------------------------------- */
.lede{
  font-size:var(--f-body);
  line-height:var(--lh-body);
  color:var(--ink);
  max-width:var(--measure);
}

.body{color:var(--ink);max-width:var(--measure)}
.muted{color:var(--ink-muted)}

.small{
  font-size:var(--f-small);
  line-height:var(--lh-small);
  color:var(--ink-muted);
}

/* A caption under a piece of art. Pixel face, because it is a label. */
.cap{
  font-family:var(--face-pixel);
  font-smooth:never;
  -webkit-font-smoothing:none;
  font-size:var(--f-kicker);
  line-height:var(--lh-kicker);
  letter-spacing:var(--tr-kicker);
  text-transform:uppercase;
  color:var(--ink-muted);
  text-align:center;
}

/* --- the mask a headline arrives through ---------------------------------
   The wrapper clips, the span inside slides up. No fade, no scale: scaling a
   pixel font through fractional sizes is exactly what the type rules exist
   to prevent. The padding is there so the 4px hard shadow is not clipped.
   ------------------------------------------------------------------------ */
.mask{overflow:hidden;padding-bottom:6px}
.mask > span{display:block;will-change:transform}

/* --- the same mask, one per word ------------------------------------------
   js/words.js cuts a headline into <span class="word"><span>word</span></span>
   so the line can assemble a word at a time. The outer box clips and the inner
   box is the only thing that moves.

   The three fiddly bits, all of them load bearing:

   1. vertical-align:bottom. An inline-block with overflow:hidden takes its
      baseline from its bottom margin edge, so without this every word sits at
      a different height inside the same line box and the headline stair-steps.
   2. line-height is inherited from the headline, so the clipping box is
      exactly one line tall and translateY(120%) puts a word right out of it.
   3. The 4px hard shadow lives in the padding, and the negative margin takes
      that padding back out of the layout so the line spacing does not change.
   ------------------------------------------------------------------------ */
.word{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:8px;
  margin-bottom:-8px;
}
.word > span{display:inline-block;will-change:transform}