/* ==========================================================================
   dulus.ai — sponsors.css
   /sponsors/ only, loaded after dulus.css: a short page of thanks. The
   opening (headline and lede, entering on CSS alone like the other heroes),
   the wall of programs, the thank-you and the closing ask. Every class
   starts sp-.

   The wall is a ruled grid. Each tile draws the hairline above it and the
   one to its left, so the rules arrive with the tiles as they reveal, and
   the wall clips away the left-hand rules at its own edge. The two
   programs Dulus runs on most visibly (observability and the edge) take a
   double tile and a sentence; the other eight take a single tile and a
   phrase.

   The marks are the sponsors' own, from simple-icons (CC0), inline and in
   one colour: ink at rest, gold on hover or focus. Each is sized by the
   area of its box, corrected for how much ink it carries, so a wide cloud
   and a solid square read at the same optical size: --w and --h in the
   markup, times the tile's --mk. AWS and Amplitude are not in simple-icons,
   so their tiles set the name in the display face (.sp-word).
   ========================================================================== */

/* ----------------------------------------------------------------- hero -- */

.sp-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(56px, 7.5vw, 124px)) 0 clamp(48px, 5vw, 80px);
  overflow: clip;
  isolation: isolate;
}
.sp-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36% 56% at 80% 56%, rgba(245, 152, 42, 0.11), transparent 70%),
    radial-gradient(20% 28% at 82% 50%, rgba(255, 210, 122, 0.06), transparent 70%),
    radial-gradient(54% 60% at 0% 0%, rgba(200, 92, 35, 0.07), transparent 70%);
  /* fades out before the section ends, so the light never stops on a line */
  -webkit-mask: linear-gradient(180deg, #000 50%, transparent 96%);
  mask: linear-gradient(180deg, #000 50%, transparent 96%);
}
/* The headline takes the width it needs; the lede keeps at least 20rem
   beside it, so a longer translation wraps the headline, never the lede
   into a sliver. */
.sp-hero__grid {
  display: grid;
  grid-template-columns: auto minmax(20rem, 26rem);
  grid-template-areas:
    "eyebrow ."
    "title   lede";
  justify-content: space-between;
  align-items: end;
  column-gap: clamp(40px, 6vw, 112px);
  row-gap: 28px;
}
.sp-hero__eyebrow {
  grid-area: eyebrow;
}
/* Two lines, each entering on its own: the one who builds, then the many
   who back. */
.sp-hero__title {
  grid-area: title;
  font-size: clamp(3.1rem, 0.9rem + 6.2vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
}
.sp-hero__title > span,
.sp-hero__title > .serif {
  display: block;
  width: fit-content;
}
.sp-hero__title > span {
  animation: rise 1.1s var(--ease-out) 60ms both;
}
.sp-hero__title > .serif {
  /* background-clip: text only paints inside the box: make room for the
     descenders of "by" and "many" so the plumage reaches them. */
  padding: 0 0.1em 0.16em 0;
  margin-bottom: -0.16em;
  font-size: 1.04em;
  animation: rise 1.2s var(--ease-out) 200ms both;
}
.sp-hero__lede {
  --d: 380ms;
  grid-area: lede;
  padding-bottom: 0.35em;
}

/* ----------------------------------------------------------------- wall -- */

.sp-wall {
  position: relative;
  padding-bottom: calc(var(--section) * 0.9);
}
.sp-wall__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 32px;
  padding-bottom: 18px;
}
.sp-wall__title {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.sp-wall__note {
  font-size: var(--fs-xs);
  color: var(--ink-4);
}

.sp-wall__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--line-2);
  /* Hides the left-hand rules of the first column, and nothing else: the
     other sides stay open so a rising tile is never cut off. */
  clip-path: inset(-80px -80px -80px 0);
}

/* Names sit at the same height across a row whatever the length of the
   line under them; any spare height falls below. */
.sp-tile {
  --mk: 34px; /* the optical size of this tile's mark */
  --gap: clamp(30px, 3vw, 44px); /* from the mark to the name */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: calc(var(--mk) * 1.2) var(--gap) auto auto 1fr;
  grid-template-areas:
    "mark go"
    ".    ."
    "name name"
    "what what"
    ".    .";
  padding: clamp(22px, 2.3vw, 32px);
}
/* The rule above the tile: a hairline that fills with plumage from the
   left while the tile is hovered or focused. */
.sp-tile::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: 0;
  height: 1px;
  background: var(--plumage-x) 0 0 / 0% 100% no-repeat, var(--line-2);
  transition: background-size var(--t-slow) var(--ease-out);
}
/* The rule to its left. */
.sp-tile::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 1px;
  background: var(--line-2);
}
.sp-tile--lead {
  --mk: 48px;
  --gap: clamp(36px, 4vw, 60px);
  grid-column: span 2;
  padding: clamp(24px, 3vw, 44px);
}

.sp-mark,
.sp-word {
  grid-area: mark;
  align-self: center;
  justify-self: start;
  color: var(--ink-2);
  transition: color var(--t) var(--ease), filter var(--t) var(--ease);
}
.sp-mark {
  width: calc(var(--w) * var(--mk));
  height: calc(var(--h) * var(--mk));
  overflow: visible;
  fill: currentColor;
}
/* A wordmark is set heavier and tighter than any name on the page, so it
   reads as a mark rather than as a label. */
.sp-word {
  font-family: var(--display);
  font-size: calc(var(--k) * var(--mk));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.sp-word--caps {
  letter-spacing: 0;
}

.sp-tile__go {
  grid-area: go;
  width: 18px;
  height: 18px;
  color: var(--ink-4);
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}

.sp-tile__name {
  grid-area: name;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: wrap; /* greedy, so narrow tiles all break as "… for / Startups" */
}
.sp-tile--lead .sp-tile__name {
  font-size: clamp(1.45rem, 1.1rem + 0.9vw, 1.95rem);
  letter-spacing: -0.03em;
}
.sp-tile__what {
  grid-area: what;
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-3);
}
.sp-tile--lead .sp-tile__what {
  max-width: 33rem;
  margin-top: 12px;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
}
.sp-tile__what strong {
  font-weight: 560;
}

/* The program's name is the link; it stretches over the whole tile, and
   carries a little warm light into it on hover. */
.sp-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(90% 75% at 0% 0%, rgba(250, 211, 139, 0.06), transparent 72%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.sp-tile__link:focus-visible {
  outline: none;
}
.sp-tile__link:focus-visible::after {
  opacity: 1;
  outline: 2px solid var(--gold-1);
  outline-offset: -7px;
  border-radius: 14px;
}

.sp-tile:hover .sp-tile__link::after {
  opacity: 1;
}
.sp-tile:hover::before,
.sp-tile:focus-within::before {
  background-size: 100% 100%, auto;
}
.sp-tile:hover .sp-mark,
.sp-tile:hover .sp-word,
.sp-tile:focus-within .sp-mark,
.sp-tile:focus-within .sp-word {
  color: var(--gold);
  filter: drop-shadow(0 6px 18px rgba(245, 152, 42, 0.32));
}
.sp-tile:hover .sp-tile__go,
.sp-tile:focus-within .sp-tile__go {
  color: var(--gold-ink);
  transform: translate(2px, -2px);
}

/* ------------------------------------------------------------- thank you -- */

.sp-thanks {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-top: clamp(88px, 10vw, 144px);
  text-align: center;
}
.sp-thanks__line {
  max-width: 18ch;
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.25rem + 2.7vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.sp-thanks__from {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* ------------------------------------------------------------ the ask --- */

.sp-back {
  position: relative;
  padding: clamp(104px, 11vw, 176px) 0;
  border-top: 1px solid var(--line);
  overflow: clip;
  isolation: isolate;
}
.sp-back__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 58% at 50% 36%, rgba(245, 152, 42, 0.13), transparent 70%),
    radial-gradient(24% 26% at 50% 22%, rgba(255, 210, 122, 0.08), transparent 70%);
}
.sp-back__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 26px;
  text-align: center;
}
.sp-back__bird {
  width: 64px;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(245, 152, 42, 0.55));
}
.sp-back__lede {
  margin-inline: auto;
}
.sp-back__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 1120px) {
  .sp-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "lede";
    row-gap: 26px;
  }
  /* alone on its row, the headline can grow again; both lines still fit
     on one line each at 320px */
  .sp-hero__title {
    font-size: clamp(2.7rem, 0.4rem + 11vw, 6.2rem);
  }
  .sp-hero__lede {
    max-width: 36rem;
    padding-bottom: 0;
  }
}

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

@media (max-width: 760px) {
  .sp-tile {
    --mk: 30px;
    --gap: 26px;
    padding: 20px 18px 22px;
  }
  .sp-tile--lead {
    --mk: 42px;
    --gap: 32px;
    padding: 24px 20px 26px;
  }
  .sp-tile__name {
    font-size: 1.0625rem;
  }
  .sp-tile__what {
    font-size: 0.875rem;
  }
}

@media (max-width: 520px) {
  .sp-back__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .sp-back__ctas .btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------- preferences -- */

@media (prefers-reduced-motion: reduce) {
  /* Final state at once: dulus.css shortens durations, but a delay would
     still hold the start state. */
  .sp-hero .rise,
  .sp-hero__title > span,
  .sp-hero__title > .serif {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .sp-hero__glow,
  .sp-back__glow,
  .sp-tile__link::after {
    background: none;
  }
  .sp-tile::before,
  .sp-tile::after {
    background: CanvasText;
  }
  .sp-mark,
  .sp-word {
    color: CanvasText;
    filter: none;
  }
}