/* HyperKit — Sketch Heading
 *
 * A display heading built from inline segments. Per-segment font size is a
 * scale of the heading's base em, so one typography control drives the whole
 * thing and each segment just multiplies it. The underline is an SVG that
 * stretches to its segment's width and sits just beneath the baseline.
 */

.hk-sh {
    margin: 0;
    --hk-sh-uline-color: #e5322d;
    --hk-sh-uline-weight: 4;
}

.hk-sh-line {
    display: block;
}

.hk-sh-seg {
    /* font-size is set inline per segment: calc(1em * scale). */
    display: inline;
    line-height: 0.95;
}

/* Underlined segment — becomes the positioning context for its stroke. */
.hk-sh-mark {
    position: relative;
    display: inline-block;
    line-height: 0.95;
}

.hk-sh-uline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.12em;
    width: 100%;
    height: 0.34em;
    overflow: visible;
    pointer-events: none;
}
.hk-sh-uline path {
    fill: none;
    stroke: var(--hk-sh-uline-color, #e5322d);
    stroke-width: var(--hk-sh-uline-weight, 4);
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Non-scaling stroke keeps the line an even thickness even though the
     * SVG is stretched horizontally to the segment width. */
    vector-effect: non-scaling-stroke;
}

.hk-sh-sub {
    margin-top: 28px;
    line-height: 1.4;
}