/* Homepage. Loaded only on the front page. */

.k-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--k-space-7);
  align-items: center;
  padding-block: var(--k-space-8) var(--k-space-7);
}

.k-hero__text { max-width: 34rem; }

.k-hero .k-display { margin-block: var(--k-space-3) var(--k-space-4); }

.k-hero .k-lead { margin-bottom: var(--k-space-5); }

.k-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-3);
}

.k-hero__rail { margin-top: var(--k-space-6); margin-bottom: 0; }

.k-hero__media { display: flex; justify-content: center; }

.k-hero__media .k-plate { width: 100%; max-width: 34rem; }

/* Category rail: ruled rows rather than cards, so the catalogue reads as an
   index. The rule is the same hairline used throughout. */
.k-cat-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--k-rule);
}

.k-cat { border-bottom: 1px solid var(--k-rule); }

.k-cat__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-space-3);
  min-height: 68px;
  padding-block: var(--k-space-3);
  text-decoration: none;
  color: var(--k-ink);
  transition: padding-inline-start var(--k-duration) var(--k-ease);
}

.k-cat__link:hover,
.k-cat__link:focus-visible {
  padding-inline-start: var(--k-space-3);
  color: var(--k-ink);
}

.k-cat__name {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h2);
  line-height: 1.15;
}

.k-cat__count {
  font-size: var(--k-size-meta);
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
  font-variant-numeric: tabular-nums;
}

.k-founder { max-width: 46rem; }
.k-founder h2 { margin-block: var(--k-space-3) var(--k-space-4); }
.k-founder__body { color: color-mix(in srgb, var(--k-paper) 82%, transparent); }

@media (max-width: 60rem) {
  .k-hero {
    grid-template-columns: 1fr;
    gap: var(--k-space-5);
    padding-block: var(--k-space-6);
  }
  .k-hero__media { order: -1; }
  .k-cat__name { font-size: var(--k-size-h3); }
}

/* -------------------------------------------------------------------------
 * Social feed.
 *
 * Markup comes from the Kihara Social Feed plugin, which fetches server-side —
 * there is no embedded widget to fight with, so this is styled like any other
 * section of the site rather than around someone else's iframe.
 *
 * Deliberately quiet. These are other people's posts on our page: the section
 * gets a rule and a small-caps heading, the images carry the same plate the
 * catalogue uses, and the only accent is on the link. Nothing here competes
 * with the products above it.
 * ---------------------------------------------------------------------- */
.k-social {
  padding-block: var(--k-space-7);
  border-top: 1px solid var(--k-rule);
}

.k-social__heading {
  font-size: var(--k-size-h3);
  margin: 0 0 var(--k-space-5);
}

.k-social__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--k-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-social__item {
  display: flex;
  flex-direction: column;
}

.k-social__media {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: var(--k-space-3);
  overflow: hidden;
  background-color: var(--k-paper-sunk);
  border: 1px solid var(--k-rule);
}

.k-social__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.k-social__text {
  flex: 1 1 auto;
  margin: 0 0 var(--k-space-3);
  font-size: var(--k-size-small);
  line-height: 1.7;
  color: var(--k-ink);
  /* Captions are other people's writing and can carry unbroken handles or URLs. */
  overflow-wrap: anywhere;
}

.k-social__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-space-3);
  min-height: 48px;
  padding-top: var(--k-space-2);
  border-top: 1px solid var(--k-rule);
  font-size: var(--k-size-meta);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--k-ink-muted);
  transition: color var(--k-duration) var(--k-ease);
}

.k-social__link:hover,
.k-social__link:focus-visible {
  color: var(--k-forest);
}

.k-social__time {
  flex: 0 0 auto;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--k-ink-muted);
}