/* ============================================================
   The Roofline mark — ported from _ds/_ds_bundle.js (Roofline.jsx),
   NOT redrawn. Path data, stroke widths, opacities and the
   proportional sizing are lifted verbatim; the React component sized
   everything off a single `size` prop, so here that becomes --mark
   and every dimension is a calc() of it.

   Structure, top to bottom:
     three nested rooflines (two ink, the crown in gold)
     gold rule
     the mirrored JJ cipher (second J is scale(-1) — it is a mirror,
       not the letter J twice, and that reflection is the whole idea)
     — XL — in gold
     optional tagline
   ============================================================ */

.rf {
  --mark: 215px;
  --rf-gold: var(--bronze);
  --rf-ink: currentColor;
  width: var(--mark);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-brand);
  line-height: 1;
}

/* On navy the gilt lifts to bronze-light, per the token file's dark scope. */
.rf.on-navy { --rf-gold: var(--bronze-light); color: var(--cream); }

.rf-roof { width: calc(var(--mark) * 0.47); display: block; }

.rf-rule {
  width: calc(var(--mark) * 0.30);
  height: max(2px, calc(var(--mark) * 0.0071));
  border-radius: 2px;
  background: var(--rf-gold);
  margin-top: calc(var(--mark) * 0.043);
}

.rf-jj {
  display: flex;
  align-items: flex-start;
  margin-top: calc(var(--mark) * 0.057);
  font-weight: 600;
  font-size: calc(var(--mark) * 0.133);
}
.rf-jj span { display: inline-block; transform-origin: top center; }
.rf-jj span:first-child { transform: scaleY(1.12); }
.rf-jj span:last-child  { transform: scale(-1, 1.12); margin-left: calc(var(--mark) * -0.005); }

.rf-xl {
  display: flex;
  align-items: center;
  gap: calc(var(--mark) * 0.031);
  color: var(--rf-gold);
  margin-top: calc(var(--mark) * 0.052);
  font-weight: 400;
  font-size: calc(var(--mark) * 0.036);
  letter-spacing: .28em;
  text-indent: .28em;
}
.rf-xl i { width: calc(var(--mark) * 0.071); height: 1px; background: currentColor; }

.rf-tag {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: max(7px, calc(var(--mark) * 0.0226));
  letter-spacing: .4em;
  text-indent: .4em;
  text-transform: uppercase;
  opacity: .62;
  margin-top: calc(var(--mark) * 0.038);
}