/* The creator page's stages: each section's copy (./creators.css lays out
   the story they scroll through), and the stage's callouts
   (src/creators/callouts.js). Type follows the homepage: RER display lines,
   Inter Tight for the copy, IBM Plex Mono for the callouts and the small
   print. */

/* Hero: the homepage hero's headline, subhead and buttons. The headline's
   two sentences each hold one line in the copy column on wide screens (the
   longer, GET PAID LIKE SAAS., is 16.4 caps wide: 3vw a cap keeps it
   inside the column's 50vw, and 48px inside its 800px). */
.creators .hero .copy-block { padding-top: 40px; }
.creators .headline { margin: 0; font-size: clamp(20px, min(max(26px, 3vw), 5.6svh), 48px); line-height: 0; color: var(--paper); }
.creators .subhead {
  margin: clamp(12px, min(2.4vw, 3.4svh), 40px) 0 0;
  max-width: 30em;
  font-size: clamp(13px, min(max(17px, 1.45vw), 3.4svh), 23px);
  font-weight: 300;
  line-height: 1.38;
  color: var(--text);
  text-wrap: pretty;
}
.creators .actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.24vw, 19px);
  margin-top: clamp(12px, min(2.9vw, 3.6svh), 44px);
}
/* A short viewport's buttons. */
.creators .actions .pill { --rer-h: clamp(36px, min(max(44px, 3.4vw), 10svh), 54px); font-size: clamp(13px, min(max(15px, 1.17vw), 3.6svh), 18px); }

/* The split: the rule in full, a little larger than body copy. */
.creators .rule { max-width: 27em; }

/* Without the hassle: the line and its lead across the top, the three
   roles in columns along the bottom, the subject between them. */
.creators .hassle .copy-block { justify-content: space-between; padding-top: clamp(20px, 11svh, 140px); padding-bottom: clamp(12px, 4svh, 48px); }
.creators .hassle .copy-block > * { width: auto; max-width: none; }
.creators .hassle-top .body { max-width: 46em; margin-top: clamp(8px, 2svh, 16px); }
.creators .roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 64px); }
.creators .roles .body { margin: 0; font-size: var(--role-size); max-width: 26em; }
/* Each role's column is headed by its name (a real heading, h3); on narrow
   screens the name runs into its sentence. */
.creators .role { --role-size: clamp(12px, min(max(15px, 1.1vw), 3svh), 18px); }
.creators .role-name { margin: 0 0 clamp(2px, 1svh, 8px); font-size: calc(var(--role-size) * 1.25); font-weight: 600; line-height: 1.45; color: var(--paper); }
/* A short viewport (a landscape phone): the line and its lead keep to the
   copy's column, leaving the stage room beside them. */
@media (max-height: 540px) and (min-aspect-ratio: 1/1) {
  .creators .hassle .hassle-top { width: var(--copy-width); }
}
.creators .hassle .mono { margin-top: clamp(6px, 1.6svh, 14px); }
.creators .hassle .mono + .mono { margin-top: 2px; }
.creators .text-link {
  display: inline-flex;
  gap: 0.5em;
  margin-top: clamp(6px, 2svh, 18px);
  font-size: clamp(12px, min(max(15px, 1.05vw), 3.2svh), 17px);
  color: var(--text);
  border-bottom: 1px solid rgba(236, 235, 231, 0.35);
  padding-bottom: 2px;
  transition: border-color 160ms ease, color 160ms ease;
}
.creators .text-link:hover { color: #fff; border-color: #fff; }
.creators .text-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Control: the line and its body at the left, beside the knolled row;
   our own apps' categories along the bottom (names only). */
.creators .control .copy-block { justify-content: space-between; padding-top: 22svh; padding-bottom: clamp(12px, 5svh, 56px); }
.creators .control-bottom { width: auto; max-width: none; }
.creators .control .own { margin-bottom: clamp(6px, 1.6svh, 14px); }
.creators .categories {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.creators .categories li {
  --pad-y: clamp(6px, 2svh, 18px);
  --rer-h: calc(1lh + 2 * var(--pad-y) + 2px);
  padding: var(--pad-y) clamp(10px, 2svh, 20px);
  border: 1px solid rgba(236, 235, 231, 0.28);
  border-radius: calc(var(--rer-h) * var(--rer-corner)) var(--rer-radius);
  font-size: clamp(12px, min(max(15px, 1.05vw), 3.2svh), 18px);
  color: var(--text);
}

/* Publish: the close's line (the hero's, at the hero's size, a sentence to
   a line), the buttons, then eligibility in plain words, a sentence to a
   line. */
.creators .display-close { font-size: clamp(20px, min(max(26px, 3vw), 5.6svh), 48px); }
.creators .eligibility {
  margin: clamp(10px, min(3vw, 3.4svh), 44px) 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(12px, min(max(15px, 1.1vw), 3.2svh), 18px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-soft);
}
.creators .eligibility li { max-width: 34em; }

/* Callouts: a ring on the object, a hairline out to a mono label. */
.creators .callout-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.creators .callout-lines line { stroke: var(--hairline); stroke-width: 1; }
.creators .callout-lines circle { fill: rgba(0, 0, 0, 0.3); stroke: var(--ring); stroke-width: 1.2; }
.creators .callout-labels { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.creators .callout {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: clamp(11px, 0.88vw, 14px);
  line-height: 1.34;
  letter-spacing: 0.01em;
  color: var(--text-soft);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

/* Narrow: one column; the roles and the categories stack. */
@media (max-width: 900px) and (max-aspect-ratio: 1/1) {
  .creators .headline, .creators .display-close { font-size: 34px; }
  .creators .subhead { font-size: 16px; margin-top: 16px; }
  .creators .actions { margin-top: 20px; }
  .creators .hassle .copy-block, .creators .control .copy-block { padding-top: 64px; }
  /* The hassle stage's copy, the page's longest, is set in three pages
     (the line and its lead; the three roles; the mono lines and the
     link), stacked in one place, each from its top, the place as tall as
     the tallest: one is shown at a time (./copy.js), the others stand
     beside it, clipped, so every line is whole whenever it is shown. */
  .creators .hassle .copy-block { display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip; padding-bottom: 16svh; }
  .creators .hassle-bottom { display: contents; }
  .creators .hassle [data-page] { grid-area: 1 / 1; align-self: start; margin: 0; }
  .creators .hassle-notes > .mono:first-child { margin-top: 0; }
  .creators .roles { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .creators .role { --role-size: 15px; }
  .creators .role-name, .creators .role .body { display: inline; }
  .creators .role-name { margin: 0; font-size: 1em; }
  /* The categories run as one line of names, parted by dots, not a grid
     of outlined boxes. */
  .creators .categories { display: block; font-size: 14px; line-height: 1.7; color: var(--text); }
  .creators .categories li { display: inline; padding: 0; border: 0; font-size: inherit; white-space: nowrap; }
  .creators .categories li:not(:last-child)::after { content: "\00B7"; margin: 0 0.55em; color: var(--text-soft); }
  .creators .control-bottom { margin-top: 20px; }
  .creators .eligibility { font-size: 14px; margin-top: 20px; }
}
@media (max-width: 420px) and (max-aspect-ratio: 1/1) {
  .creators .actions .pill { --rer-h: 44px; padding: 0 16px; font-size: 14px; }
  .creators .actions { gap: 10px; }
}