/*
 * HeyHi design system: proof and news. What others can say for HeyHi (config/proof.yml, read by Proof): the logos of
 * businesses that use it, a customer's words and a few numbers; and what's new (config/news.yml, read by News). Each
 * shows only once it's real, so the homepage composes itself from whichever are filled in: the logos as a slim ruled
 * band under the opening, the words and the numbers after the standard, the news before the closing. Words about one
 * product show on its page too, as a slim band before its questions. The quote is drawn here once, for those and for
 * the founder's note.
 *
 * As with the product plates, rows of cells run from rail to rail, so their outer edges are the rails themselves, and
 * each cell's padding is the rails' inset, so its words keep to the page's content edge. On a phone there are no
 * rails, so the cells keep to the column.
 */

/* ---------- A quote: words set large, and who said them ---------- */
.quote { display: grid; gap: var(--space-6); }
.quote__words {
  max-width: 22em;
  font-family: var(--font-display); font-size: var(--text-heading); font-weight: 400; line-height: 1.16;
  letter-spacing: var(--tracking-heading); text-wrap: pretty;
}
/* The opening quote mark hangs outside the words' edge, so their first letters line up with the text around them */
.quote__words p { text-indent: -0.42em; }
/* Who said them, in mono: their photograph, when there is one, beside the credit, which wraps on its own */
.quote__by {
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mute);
}
.quote__credit { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); min-width: 0; }
.quote__name { color: var(--ink); }
.quote__photo { width: 44px; height: 44px; flex: none; border-radius: 50%; }
/* The product the words are about, underlined in amber as a link in a sentence is */
.quote__product {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 1.5px;
  text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast);
}
.quote__product:hover { text-decoration-color: currentColor; }
@media (max-width: 47.99em) { .quote__words p { text-indent: 0; } }

/* ---------- Logos: a slim ruled band under the opening ---------- */
/* A mono line, then the logos in cells divided by hairlines, two to a row on a phone and up to six on a wide screen,
   where a short last row keeps its cells' width. Every logo is drawn in one colour, so the band turns them all to the
   same quiet ink. */
.logos__title { padding-block: clamp(18px, 2vw, 26px); }
.logos__grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logos__item {
  display: grid; place-items: center; min-height: clamp(88px, 8.4vw, 124px); padding: var(--space-5) var(--space-4);
  border-top: 1px solid var(--line);
}
.logos__item:nth-child(even) { border-left: 1px solid var(--line); }
.logos__image {
  width: auto; height: clamp(22px, 2.2vw, 32px); max-width: 100%; object-fit: contain;
  filter: grayscale(1) brightness(0); opacity: 0.62;
}
@media (min-width: 48em) {
  .logos__grid {
    grid-template-columns: repeat(auto-fit, minmax(max(8rem, 100% / 6), 1fr));
    margin-inline: calc(-1 * var(--frame-inset));
  }
  .logos__item { border-left: 1px solid var(--line); }
}

/* ---------- Numbers: a row of ruled cells, each figure over what it counts ---------- */
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--line); }
.figures__item {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-6) var(--space-4) var(--space-7) 0;
  border-top: 1px solid var(--line);
}
.figures__item:nth-child(even) { padding-left: var(--space-5); border-left: 1px solid var(--line); }
.figures__value {
  margin: 0;
  font-family: var(--font-display); font-size: var(--text-title); font-weight: 400; line-height: 1;
  letter-spacing: var(--tracking-title); font-variant-numeric: lining-nums tabular-nums;
}
.figures__label {
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; line-height: 1.4;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mute);
}
@media (min-width: 48em) {
  .figures {
    grid-template-columns: repeat(auto-fit, minmax(max(11rem, 100% / 4), 1fr));
    margin-inline: calc(-1 * var(--frame-inset));
  }
  .figures__item, .figures__item:nth-child(even) {
    padding: var(--space-6) var(--frame-inset) var(--space-7); border-left: 1px solid var(--line);
  }
}

/* ---------- Proof, on the homepage: the words, then the numbers under them ---------- */
.proof .kicker { margin-bottom: clamp(28px, 3.4vw, 48px); }
.proof__figures { margin-top: clamp(56px, 6.4vw, 104px); }
.proof .kicker + .proof__figures { margin-top: 0; }

/* ---------- News: the latest three, a row ruled into cells ---------- */
/* Each cell its date and label in mono at the top, its title and a line more at its foot; a cell that leads somewhere
   is a link (its title's, stretched over it), with an arrow in its corner that moves when it's pointed at */
.news__head { display: grid; gap: var(--space-5); margin-bottom: clamp(36px, 4.4vw, 64px); }
.news__title {
  font-family: var(--font-display); font-size: var(--text-heading); font-weight: 400; line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.news__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.news__item {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-3);
  min-height: clamp(176px, 16vw, 240px); padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--line);
  transition: background-color var(--dur-ui) var(--ease-out);
}
.news__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding-right: 32px;
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mute);
}
.news__label { color: var(--ink); }
.news__headline {
  align-self: end; max-width: 22em;
  font-family: var(--font-text); font-size: var(--text-subheading); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em;
}
.news__headline a { text-decoration: none; }
.news__headline a::after { content: ""; position: absolute; inset: 0; }
.news__text { max-width: 30em; font-size: var(--text-small); line-height: 1.55; color: var(--ink-soft); }
.news__arrow {
  position: absolute; top: var(--space-5); right: 0; width: 18px; height: 18px; color: var(--ink-mute);
  transition: translate var(--dur-ui) var(--ease-out), color var(--dur-fast);
}
.news__item--link:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.news__item--link:hover .news__arrow { translate: 2px -2px; color: var(--ink); }
@supports selector(:has(a)) {
  .news__headline a:focus-visible { outline: none; }
  .news__item:has(.news__headline a:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
}
@media (min-width: 48em) {
  .news__list { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: calc(-1 * var(--frame-inset)); }
  .news__item { padding: var(--space-5) var(--frame-inset) var(--space-6); border-left: 1px solid var(--line); }
  .news__arrow { right: var(--frame-inset); }
}

/* ---------- On a product's page: a slim band of a customer's words ---------- */
.product-proof { padding-block: calc(var(--section) * 0.62); }
.product-proof__label { padding-top: 0.9em; }
@media (max-width: 63.99em) { .product-proof .split { gap: var(--space-5); } .product-proof__label { padding-top: 0; } }