/*
 * HumanProse book typography: the brass drop cap of a finished result,
 * steady figures in counters and prices, hanging punctuation in prose, and
 * the brass fleurons between the home sections.
 *
 * Figures: the self-hosted subsets were checked in the browser. Hanken
 * Grotesk ("HP Sans") already draws equal-width figures and has no old-style
 * set; Instrument Serif ("HP Display") has proportional figures and neither a
 * tabular nor an old-style set. So counters ask for tabular figures (they win
 * wherever a face has them, and cost nothing where it does not) and prose
 * keeps the default lining figures: no oldstyle-nums anywhere.
 */

/* ---------- 1. Drop cap: a three-line brass initial (hp-typeset.js decides when) ---------- */
body.hp-ui .hp-dropcap:not(.hp-inking)::first-letter {
    font-family: var(--hx-f-display); font-style: normal; font-weight: 400;
    color: var(--hx-quill);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    body.hp-ui .hp-dropcap:not(.hp-inking)::first-letter {
        -webkit-initial-letter: 3; initial-letter: 3;
        margin-inline-end: .12em;
    }
}
@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
    body.hp-ui .hp-dropcap:not(.hp-inking)::first-letter {
        float: left; font-size: 3.55em; line-height: .8; margin: .08em .1em 0 -.02em;
    }
}

/* ---------- 2. Figures that hold still ---------- */
body.hp-ui :is(#inputStats, #limitStatus, #outputStats, #speedTimer, #resultDetails, #estimateText, #loadingStep,
    #usagePrimaryText, #creditsText, #planExpiryText, .account-strip, .hp-stream-status, .hp-review-count,
    .hp-flip, .hp-price, .hp-plan-per, .hp-calc-value, .hp-wordcount, .hp-demo-stats, .text-stats, .metric-value,
    .hp-tour-count, .hp-qa-num, .hp-qa-val) {
    font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- 3. Prose: hanging punctuation and kinder last lines ---------- */
body.hp-ui :is(#outputText, .document-text, .hpg-prose) {
    hanging-punctuation: first last;
    text-wrap: pretty;
}

/* ---------- 4. Fleurons between the home sections ---------- */
body.hp-ui .hp-fleuron {
    --hp-fleuron-y: 55px;
    position: relative; z-index: 1; height: 0; pointer-events: none;
}
body.hp-ui .hp-fleuron::before {
    content: ""; position: absolute; left: 50%; top: var(--hp-fleuron-y);
    width: 184px; height: 22px; translate: -50% -50%;
    background: linear-gradient(180deg, #dcb87e, var(--hx-quill) 55%, #9a6f35);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cg id='h'%3E%3Cpath d='M86.2 12C72 10.75 50 10.7 28.4 12.05C50 13.05 72 13.2 86.2 12Z'/%3E%3Cpath d='M29.2 12.04C22.4 12.4 17.1 11.2 16.6 8.7C16.2 6.7 18.3 5.6 19.9 6.5C21.3 7.3 21 9.3 19.4 9.4' fill='none' stroke='%23000' stroke-width='.75' stroke-linecap='round'/%3E%3Cpath d='M91.2 12 89.5 10.3 87.8 12 89.5 13.7Z'/%3E%3C/g%3E%3Cuse href='%23h' transform='matrix(-1 0 0 1 200 0)'/%3E%3Cpath fill-rule='evenodd' d='M100 2.2C103.9 6.4 104.6 11 100 21.8C95.4 11 96.1 6.4 100 2.2ZM100 7.2A1.25 1.25 0 1 0 100 9.7A1.25 1.25 0 1 0 100 7.2ZM99.55 10.6V18.2H100.45V10.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cg id='h'%3E%3Cpath d='M86.2 12C72 10.75 50 10.7 28.4 12.05C50 13.05 72 13.2 86.2 12Z'/%3E%3Cpath d='M29.2 12.04C22.4 12.4 17.1 11.2 16.6 8.7C16.2 6.7 18.3 5.6 19.9 6.5C21.3 7.3 21 9.3 19.4 9.4' fill='none' stroke='%23000' stroke-width='.75' stroke-linecap='round'/%3E%3Cpath d='M91.2 12 89.5 10.3 87.8 12 89.5 13.7Z'/%3E%3C/g%3E%3Cuse href='%23h' transform='matrix(-1 0 0 1 200 0)'/%3E%3Cpath fill-rule='evenodd' d='M100 2.2C103.9 6.4 104.6 11 100 21.8C95.4 11 96.1 6.4 100 2.2ZM100 7.2A1.25 1.25 0 1 0 100 9.7A1.25 1.25 0 1 0 100 7.2ZM99.55 10.6V18.2H100.45V10.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .9;
}
html[data-hp-theme="dark"] body.hp-ui .hp-fleuron::before {
    background: linear-gradient(180deg, #ecca8c, var(--hx-quill) 55%, #b8894a);
    opacity: .78;
}
/* The story ends on its own margin; the demo and the sections after it open with theirs. */
body.hp-ui .hp-fleuron--demo { --hp-fleuron-y: -15px; }
body.hp-ui .hp-fleuron--workflow { --hp-fleuron-y: 7px; }
@media (max-width: 640px) {
    body.hp-ui .hp-fleuron { --hp-fleuron-y: 40px; }
    body.hp-ui .hp-fleuron::before { width: 128px; height: 15px; }
    body.hp-ui .hp-fleuron--demo { --hp-fleuron-y: -10px; }
    body.hp-ui .hp-fleuron--workflow { --hp-fleuron-y: 8px; }
}
@media print {
    body.hp-ui .hp-fleuron { display: none; }
}