/* =========================================================
   AUDIENCE — 09, who it is for
   ========================================================= */

.audience {
  background: var(--ink-100);
  overflow: hidden;
}

.audience__head {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: clamp(1.55rem, 3.6vw, 2.61rem);
}

.audience__head .h-sec em {
  font-style: italic;
  color: var(--gold-200);
}

/* ---------------- tabs ---------------- */

.audience__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

@media (max-width: 760px) {
  .audience__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.audience__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.25rem 1rem 1.25rem 0;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}

/* The active rule draws across from the left, so switching tab has a
   direction rather than only a state. */
.audience__tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--gold-300);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-chisel);
}

.audience__tab.is-active::after {
  transform: scaleX(1);
}

.audience__tab-n {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--gold-300);
  opacity: 0.6;
  transition: opacity 0.4s var(--ease-out);
}

.audience__tab-l {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
  color: var(--bone-400);
  transition: color 0.4s var(--ease-out);
}

.audience__tab:hover .audience__tab-l {
  color: var(--bone-200);
}

.audience__tab.is-active .audience__tab-n {
  opacity: 1;
}

.audience__tab.is-active .audience__tab-l {
  color: var(--bone-100);
}

/* ---------------- panel ---------------- */

.audience__panel {
  display: grid;
  grid-template-columns: 1fr;
  padding-top: clamp(1.55rem, 3.6vw, 2.9rem);
  max-width: 46rem;
}

@media (max-width: 900px) {
  .audience__panel {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* A small mineral-coloured badge beside the title. (A giant icon used
   to fill the left half; it read as clip art.) */
.audience__badge {
  --tone: #e8c872;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  font-size: 1.35rem;
  color: #17140c;
  background: linear-gradient(145deg, var(--tone), color-mix(in srgb, var(--tone) 50%, #000));
  box-shadow: 0 10px 26px -14px var(--tone);
}

.audience__badge--garnet { --tone: #e59384; }
.audience__badge--water  { --tone: #8fb8dc; }
.audience__badge--sage   { --tone: #a9cf9b; }

.audience__panel-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.audience__panel-body > * {
  will-change: transform, opacity;
}

.audience__panel-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--bone-100);
  max-width: 20ch;
}

.audience__panel-text {
  max-width: 48ch;
  font-size: var(--step-0);
  color: var(--bone-300);
}

.audience__panel-go {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1.3em;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-100);
  border: 1px solid rgba(201, 162, 39, 0.4);
  transition: background 0.3s, color 0.3s;
}

.audience__panel-go:hover {
  background: var(--gold-300);
  color: var(--ink-100);
}

.audience__panel-go .ico {
  transition: transform 0.35s var(--ease-out);
}

.audience__panel-go:hover .ico {
  transform: translateX(4px);
}

.audience__tab-n .ico {
  font-size: 1.1rem;
}