/* [fontpage_home]: the homepage block. Sizes follow the old hand-made block (a 1vw top bar, names in vw). */
.fph { width: 100%; font-family: "Suun-Regular", sans-serif; color: #000; }
.fph *, .fph *::before, .fph *::after { box-sizing: border-box; }
.fph a, .fph a:hover, .fph a:focus, .fph a:visited { text-decoration: none !important; }
.fph a { color: inherit; }
.fph .fph__who a, .fph a.fph__title, .fph a.fph__title:hover { color: #000 !important; }
.fph__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; row-gap: 0; }
.fph__item { grid-column: span 6; min-width: 0; display: flex; flex-direction: column; }
.fph__item[data-cols="1"] { grid-column: span 12; }
.fph__item[data-cols="3"] { grid-column: span 4; }

/* Top bar: an orange hairline, icon + name, category, number of styles, and the pill. */
.fph__bar { display: flex; justify-content: space-between; align-items: center; gap: 1em; font-size: clamp(11px, 1vw, 20px); border-top: 1px solid #ff8662; padding-top: 0.5vw; color: #ff8662; }
.fph__left { display: flex; align-items: center; gap: 0.6vw; min-width: 0; }
.fph__who { display: inline-flex; align-items: center; gap: 0.4em; }
.fph__meta { white-space: nowrap; }
.fph__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.2em; border: 1px solid #ff8662; border-radius: 0.22em;
  color: #ff8662; position: relative; flex: none;
  background: #fff; isolation: isolate;   /* the colour-font blend works on its own white square, not on whatever is behind the page */
}
.fph__letters { font-size: 0.72em; line-height: 1; letter-spacing: 0; }
.fph__icon--colour::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; mix-blend-mode: screen; pointer-events: none; }
.fph .fph__pill { background: #ff8662; color: #fff !important; padding: 0.15em 0.6em; border-radius: 100vmax; white-space: nowrap; transition: background 0.2s ease; }
.fph__pill:hover { background: #000; }

/* Stage: the name, with the hover slideshow on top of it. Each family box is about 40vh tall. */
.fph__item { min-height: 40vh; }
.fph__item[data-cols="1"] { min-height: 68vh; }
.fph__stage { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; padding: 0vw 3% 3vw; }
.fph__title { display: inline-block; white-space: nowrap; line-height: 1; letter-spacing: -0.01em; transition: none; }
.fph__imgs { --fph-img-shift: 0px;   /* fine-tune: a negative value moves the images up */
  position: absolute; inset: 0; background: #fff; display: none; pointer-events: none; text-align: center; }
.fph__imgs img { position: absolute; top: calc((100% - 3vw) / 2); left: 50%;   /* centre of the name: the stage minus its 3vw bottom padding */
  transform: translate(-50%, calc(-50% + var(--fph-img-shift))); height: 60%; width: auto; max-width: 96%; object-fit: contain; opacity: 0; }
.fph__item[data-cols="3"] .fph__imgs img { height: 80%; }
.fph__imgs img.is-seen { opacity: 1; }
/* The fade from one image to the next. (The site's own `.col img` rule sets 300ms; this is a third of that and wins over it.) */
.fph .fph__imgs img { transition: opacity 100ms ease-out; }

/* Phones and touch screens: one column, just the name. */
@media (max-width: 800px), (hover: none) {
  .fph__grid { grid-template-columns: 1fr; }
  .fph__item, .fph__item[data-cols="1"], .fph__item[data-cols="3"] { grid-column: auto; }
  .fph__bar { font-size: 13px; padding-top: 10px; }
  .fph__item, .fph__item[data-cols="1"] { min-height: 0; }
  .fph__stage { min-height: 38vw; padding: 8% 6% 18px; }
  .fph__imgs { display: none !important; }
}