/* Narrative beats — the treatment for case studies that run several text-only
   rows in a row. Geometry encodes whose story a row tells, so consecutive rows
   are told apart by shape and type scale rather than by a new colour or a
   separator drawn between them.

   The ladder runs loud, quieter, quietest, loud. Each page cuts it to the
   number of rows it actually has: Clarus has three text rows and recruits its
   off-white "The tech" showcase band as the quiet third movement; Vine has two
   and truncates the ladder rather than compressing four rungs into two.

   On a phone every column split collapses, so the differentiation rides on
   devices that survive one column: which way the lockup leans, the character
   of the spine, the heading-scale step, band depth, and the progress rule at
   the head of each row.

   Four values are content-driven rather than shared, so they are set per page
   by a --clarus / --vine modifier: how many movements the rule divides into,
   the copy measure, and how far the opening copy is indented and how wide it
   runs. Everything else below is common. */

.beat {
  background-color: var(--pure-white);
  padding-inline: var(--container-padding);
}

.beat--clarus {
  --beat-seg-w: 25%;
  --beat-measure: 30rem;
  --beat-open-indent: 48%;
  --beat-open-measure: 560px;
}

.beat--vine {
  --beat-seg-w: 50%;
  --beat-measure: 28rem;
  --beat-open-indent: 38%;
  --beat-open-measure: 600px;
}

.beat__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.8125rem;
}

/* Chapter marker and separator in one: a hairline track with a solid segment
   that advances one movement at a time. Identical at every width, so the phone
   gets the same signal the desktop does. */
.beat__rule {
  grid-column: 1 / -1;
  grid-row: 1;
  height: 3px;
  margin-block-end: calc(var(--space-40) - 0.8125rem);
  background-image:
    linear-gradient(var(--dozen-blue), var(--dozen-blue)),
    linear-gradient(var(--light-purple), var(--light-purple));
  background-repeat: no-repeat;
  background-size:
    var(--beat-seg-w) 3px,
    100% 1px;
  background-position:
    var(--beat-seg) center,
    0 center;
}

.beat--open {
  --beat-seg: 0%;
}

.beat--work {
  --beat-seg: 33.3333%;
}

.beat--close,
.beat--design {
  --beat-seg: 100%;
}

/* Clarus only: the showcase band is the third movement, so it carries the rule
   without being a beat itself. */
.showcase--beat {
  --beat-seg: 66.6667%;
  --beat-seg-w: 25%;
}

.showcase--beat .beat__rule {
  margin-block-end: var(--space-40);
}

.beat__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: normal;
  line-height: 1.2;
  color: var(--dozen-dark);
}

.beat__subline {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: italic;
  line-height: 1.2;
  color: var(--dozen-blue);
}

.beat__copy {
  position: relative;
  margin-block-start: 1.375rem;
}

.beat__body {
  margin: 0;
  color: var(--dozen-dark);
}

/* Volume ladder. The client's own rows take h1; Dozen's take h2. */
.beat--open .beat__heading,
.beat--close .beat__heading {
  font-size: var(--h2-size);
}

.beat--work .beat__heading,
.beat--design .beat__heading {
  font-size: var(--h2-size);
}

.beat--open .beat__subline,
.beat--close .beat__subline {
  font-size: var(--h3-size);
}

.beat--work .beat__subline,
.beat--design .beat__subline {
  font-size: var(--h4-size);
}

/* Band depth tracks volume: the client rows get the air. Vine's opening row
   also opens that page's only stretch of white, so its top pad breaks it off
   the off-white band above and the pair is asymmetric. */
.beat--clarus.beat--open,
.beat--close {
  padding-block: var(--space-60);
}

.beat--work {
  padding-block: var(--space-40);
}

.beat--vine.beat--open {
  padding-block: var(--space-80) var(--space-40);
}

.beat--design {
  padding-block: var(--space-40) var(--space-60);
}

/* --open: the body hangs off a hairline spine, indented under the heading. The
   indent is fluid so the measure never collapses on a 320px board. */
.beat--open .beat__copy {
  border-inline-start: 1px solid var(--light-purple);
  padding-inline-start: clamp(0.625rem, 3.2vw, 1.25rem);
}

/* --work: the lockup turns right against a spine on the right edge, the copy
   stays left. Alignment costs no width, so this reads at 320px exactly as it
   does at 1440. The row gap closes so the two spine segments meet. */
.beat--work .beat__inner {
  row-gap: 0;
}

.beat--work .beat__rule {
  margin-block-end: var(--space-40);
}

.beat--work .beat__heading,
.beat--work .beat__subline {
  text-align: right;
  border-inline-end: 1px solid var(--light-purple);
  padding-inline-end: clamp(0.625rem, 3.2vw, 1.25rem);
}

.beat--work .beat__heading {
  padding-block-end: 0.8125rem;
}

.beat--work .beat__copy {
  margin-block-start: var(--space-40);
}

/* --close: the heading breaks left out of the text column and the body hangs
   off a pill-ended spine — the D terminal at hairline scale. The outdent is
   held to half the container padding so the type never reaches the edge. */
.beat--close .beat__heading {
  margin-inline-start: calc(-0.5 * var(--container-padding));
}

.beat--close .beat__copy {
  padding-inline-start: clamp(0.625rem, 3.2vw, 1.25rem);
}

.beat--close .beat__copy::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background-color: var(--dozen-blue);
}

/* --design: the mirror of --open on a phone. The lockup steps right and the
   body stays flush, so the two rows lean opposite ways. The heading cap forces
   a short, ragged stack against the full-width copy. */
.beat--design .beat__heading,
.beat--design .beat__subline {
  margin-inline-start: clamp(0.75rem, 4vw, 1.5rem);
}

.beat--design .beat__heading {
  max-width: 14ch;
}

/* Tablet: still one column, but there is enough width to hold the copy to a
   readable measure and to push the indents from a nudge to a real offset, so
   the shapes stay apart through the widest single-column tier. */
@media (min-width: 640px) {
  .beat__copy {
    max-width: var(--beat-measure);
  }

  .beat--open .beat__copy {
    margin-inline-start: 18%;
  }

  .beat--work .beat__copy {
    margin-inline-start: 0;
  }

  .beat--close .beat__copy {
    margin-inline-start: 24%;
  }

  .beat--design .beat__heading {
    max-width: 16ch;
  }

  .beat--design .beat__heading,
  .beat--design .beat__subline {
    margin-inline-start: 12%;
  }
}

@media (min-width: 1024px) {
  .beat__inner {
    column-gap: 82px;
  }

  .beat--open .beat__heading,
  .beat--close .beat__heading {
    font-size: var(--h1-size);
  }

  .beat--clarus.beat--open,
  .beat--close {
    padding-block: var(--space-100);
  }

  .beat--close {
    padding-block-end: var(--space-120);
  }

  .beat--work {
    padding-block: var(--space-80);
  }

  .beat--vine.beat--open {
    padding-block: var(--space-100) var(--space-80);
  }

  .beat--design {
    padding-block: var(--space-60) var(--space-80);
  }

  /* --open: heading across the measure, then the subline drops into the left
     gutter beside the paragraph it introduces. It used to sit on a line of its
     own at a quarter indent, which read as a stray line and left the whole
     left half of the row empty. */
  .beat--open .beat__inner {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .beat--open .beat__heading {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .beat--open .beat__subline {
    grid-column: 1;
    grid-row: 3;
    margin-inline-start: 0;
  }

  .beat--open .beat__copy {
    grid-column: 2;
    grid-row: 3;
    margin-block-start: 0;
    margin-inline-start: 0;
    max-width: var(--beat-open-measure);
    padding-inline-start: var(--space-40);
  }

  /* --work: copy left, heading hung right as marginalia, the spine moving to
     the inside edge of the marginal column. */
  .beat--work .beat__inner {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .beat--work .beat__copy {
    grid-column: 1;
    grid-row: 2 / span 2;
    margin-block-start: 0;
    max-width: 559px;
  }

  .beat--work .beat__heading {
    grid-column: 2;
    grid-row: 2;
  }

  .beat--work .beat__subline {
    grid-column: 2;
    grid-row: 3;
  }

  .beat--work .beat__heading,
  .beat--work .beat__subline {
    border-inline-end: 0;
    padding-inline-end: 0;
    border-inline-start: 1px solid var(--light-purple);
    padding-inline-start: var(--space-40);
  }

  /* --close: the arc opens back out. The heading still breaks the column to
     the left, and the subline takes the gutter beside the body rather than a
     line of its own. */
  .beat--close .beat__inner {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .beat--close .beat__heading {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .beat--close .beat__subline {
    grid-column: 1;
    grid-row: 3;
  }

  .beat--close .beat__copy {
    grid-column: 2;
    grid-row: 3;
    margin-block-start: 0;
    margin-inline-start: 0;
    max-width: 660px;
    padding-inline-start: var(--space-40);
  }

  /* --design: narrow heading column left, copy right. */
  .beat--design .beat__inner {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .beat--design .beat__heading {
    grid-column: 1;
    grid-row: 2;
    margin-inline-start: 0;
    max-width: none;
  }

  .beat--design .beat__subline {
    grid-column: 1;
    grid-row: 3;
    margin-inline-start: 0;
  }

  .beat--design .beat__copy {
    grid-column: 2;
    grid-row: 2 / span 2;
    margin-block-start: 0;
    max-width: 559px;
  }
}