/* Debutly site. A rehearsal room: a cool stage floor, a run sheet taped to it, and spike tape,
   the coloured tape crews put on the floor to mark where each performer stands. Each tape
   colour marks one simulated customer, never decoration. */

:root {
  --floor: #eceef0;
  --floor-deep: #dfe3e7;
  --paper: #ffffff;
  --ink: #14202b;
  --ink-soft: #4e5b68;
  --line: #c9cfd6;
  --pink: #f2386e;
  --yellow: #f5c518;
  --blue: #2f6bff;
  --green: #1fa971;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;

  --measure: 66ch;
  --gutter: clamp(16px, 4vw, 48px);
  --page: 1200px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--floor);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--body);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  z-index: 10;
}

.skip:focus {
  top: 12px;
}

/* Spike tape: a short strip with torn ends, in the colour of whoever it marks. */
.tape,
.mark,
.sheet::before,
.sheet::after,
.finding::before {
  background: var(--tape, var(--pink));
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 88% 0, 94% 12%, 100% 4%, 100% 92%, 94% 100%, 88% 90%, 12% 100%, 6% 88%, 0 96%);
}

/* Header */
.top {
  max-width: var(--page);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 900 1.75rem/1 var(--display);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.mark {
  display: inline-block;
  width: 26px;
  height: 11px;
  transform: rotate(-8deg);
}

.top nav {
  display: flex;
  gap: 22px;
  font-size: 1rem;
}

.top nav a {
  text-decoration: none;
}

.top nav a:hover {
  text-decoration: underline;
}

/* Hero */
main {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero {
  padding: clamp(32px, 7vw, 96px) 0 clamp(28px, 4vw, 48px);
}

h1 {
  font: 900 clamp(4rem, 13vw, 10.5rem) / 0.86 var(--display);
  letter-spacing: -0.01em;
  margin: 0 0 clamp(24px, 4vw, 40px);
  max-width: 11ch;
}

.hero-text {
  display: grid;
  gap: 28px;
  max-width: var(--measure);
}

.lede {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.5;
  margin: 0;
}

.actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.button {
  display: inline-block;
  padding: 13px 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
}

.button:hover {
  background: var(--floor-deep);
}

.button-primary {
  background: var(--ink);
  color: var(--paper);
}

.button-primary:hover {
  background: #26394b;
}

/* The stage: the cast beside the run sheet taped to the floor */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding: clamp(24px, 4vw, 56px) 0 clamp(56px, 8vw, 104px);
}

.small-heading {
  font: 800 1.6rem/1.1 var(--display);
  letter-spacing: 0.01em;
  margin: 0 0 18px;
}

.cast-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.role {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}

.role .tape {
  display: block;
  height: 14px;
  margin-top: 6px;
  transform: rotate(-4deg);
}

.role:nth-child(even) .tape {
  transform: rotate(3deg);
}

.note {
  margin: 26px 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 44ch;
}

.sheet {
  position: relative;
  margin: 0;
  background: var(--paper);
  padding: clamp(26px, 3.5vw, 40px);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(20, 32, 43, 0.35);
  transform: rotate(-0.7deg);
}

/* Two pieces of tape hold the sheet to the floor. */
.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  width: 96px;
  height: 26px;
  opacity: 0.92;
}

.sheet::before {
  --tape: var(--yellow);
  top: -12px;
  left: 28px;
  transform: rotate(-5deg);
}

.sheet::after {
  --tape: var(--blue);
  bottom: -12px;
  right: 32px;
  transform: rotate(4deg);
}

.sheet-title {
  font: 800 1.45rem/1.1 var(--display);
  margin: 0 0 18px;
}

.log {
  list-style: none;
  margin: 0;
  padding: 0;
  font: 400 0.98rem/1.45 var(--mono);
}

.log li {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  gap: 6px 12px;
  padding: 9px 0;
  border-top: 1px solid var(--floor-deep);
}

.log .who {
  font-weight: 700;
  border-left: 5px solid var(--tape);
  padding-left: 8px;
}

.log .flag {
  grid-column: 2;
  justify-self: start;
  font: 700 0.8rem/1 var(--body);
  background: var(--ink);
  color: var(--paper);
  padding: 4px 8px;
  border-radius: 3px;
}

.log.playing li {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}

.log.playing li.shown {
  opacity: 1;
  transform: none;
}

.sheet-foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  font-weight: 700;
}

/* Sections below the stage */
.band {
  padding: clamp(56px, 8vw, 104px) 0;
  border-top: 2px solid var(--ink);
}

h2 {
  font: 900 clamp(2.4rem, 5vw, 3.75rem) / 0.95 var(--display);
  letter-spacing: -0.005em;
  margin: 0 0 clamp(24px, 3vw, 36px);
}

h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 8px;
}

.section-lede {
  max-width: var(--measure);
  margin: -12px 0 32px;
  color: var(--ink-soft);
}

/* How it works: a real sequence, so it is numbered. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: block;
  font: 900 3.4rem/1 var(--display);
  margin-bottom: 10px;
  color: var(--ink);
}

.steps p {
  margin: 0;
  color: var(--ink-soft);
}

/* The sample report */
.report {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.finding {
  position: relative;
  background: var(--paper);
  padding: 30px 28px 24px;
  box-shadow: 0 1px 0 var(--line);
}

.finding::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 22px;
  width: 64px;
  height: 18px;
  transform: rotate(-3deg);
}

.severity {
  margin: 0 0 6px;
  font-weight: 700;
}

.seen {
  font-weight: 400;
  color: var(--ink-soft);
}

.repro {
  margin: 12px 0 0;
  padding-left: 1.3em;
  color: var(--ink-soft);
  font-size: 1rem;
}

.repro li + li {
  margin-top: 4px;
}

.env-note {
  padding: 28px;
  border: 2px dashed var(--ink-soft);
  align-self: start;
}

.env-note p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* What gets rehearsed */
.features {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px clamp(32px, 5vw, 72px);
}

.features div {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.features dt {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.features dd {
  margin: 0;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* Open source and quick start */
.open {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.open-text p {
  margin: 0 0 16px;
  max-width: 48ch;
}

.open-text .actions {
  margin-top: 10px;
}

.code {
  margin: 0;
  background: var(--ink);
  color: #e8edf2;
  padding: clamp(20px, 3vw, 32px);
  overflow-x: auto;
  font: 400 0.92rem/1.6 var(--mono);
  border-radius: 6px;
}

.code .comment {
  color: #9fb0c1;
}

.code-note {
  margin-top: 14px;
}

.code-note code {
  font: 400 0.92em var(--mono);
}

/* Footer */
.foot {
  /* The same width as the sections above, so its rule lines up with theirs. */
  width: min(calc(var(--page) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: 32px 0 48px;
  border-top: 2px solid var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  font-size: 1rem;
}

.foot p {
  margin: 0;
}

.foot-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Narrow screens */
@media (max-width: 900px) {
  .stage,
  .open {
    /* minmax(0, …): a long line of code scrolls in its box instead of widening the page. */
    grid-template-columns: minmax(0, 1fr);
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report,
  .features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 1.0625rem;
  }

  /* On a phone the header keeps the links that leave the page: Docs and GitHub. */
  .top nav a[href^="#"] {
    display: none;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .sheet {
    transform: none;
  }

  .log li {
    grid-template-columns: 1fr;
  }

  .log .flag {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Which customer each tape marks. */
.t-pink {
  --tape: var(--pink);
}

.t-blue {
  --tape: var(--blue);
}

.t-yellow {
  --tape: var(--yellow);
}

.t-green {
  --tape: var(--green);
}