/* RAREPAD feed, page layout only.
   Colour, type, components and motion live in app/css/rarepad.css.
   Nothing here defines a colour, a radius, a shadow, a font or a component:
   these rules only place blocks the design system already styles. */

/* vertical rhythm of the front page */
.fd-ticker { margin-bottom: var(--s4); }
.fd-hero { margin-bottom: var(--s6); }
.fd-sec { margin: 0 0 var(--s6); }
.fd-state { margin: var(--s4) 0; }
.fd-state:empty { display: none; }
.fd-close { margin-top: var(--s5); }

/* The readings sit inside the hero: headline on the left, the four cells and the
   board stamp on the right once there is room for two columns. Under 900px they
   stack under the hero copy inside the same frame. The 380px column is wide
   enough for .rp-stats to lay its own cells out two up. */
.fd-readings { margin-top: var(--s5); }
.fd-hero-stamp { display: none; }

@media (min-width: 900px) {
  .fd-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--s6); align-items: start; }
  .fd-hero .rp-hero-in { max-width: 60ch; }
  .fd-readings { margin-top: 0; display: grid; gap: var(--s3); }
  .fd-readings .rp-fn { margin-top: 0; }
  .fd-hero-stamp { display: inline-flex; justify-self: end; }
}