/*
 * The fighter profile, in the modern-sport canon.
 *
 * The owner's standing decision (2026-08-29): this page sits alongside
 * UFC.com, F1.com and ESPN's fighter pages and competes on their terms -
 * photo-forward hero where a photograph exists, one hot accent, bold gauges
 * and numerals, card surfaces with real radii and lift. Executed straight,
 * no metaphor. The data honesty rules are unchanged: a value the database
 * does not hold keys out and says so; nothing is invented to fill a slot.
 *
 * Scoped under .pf so the rest of the site's incumbent system is untouched
 * while the new world proves itself surface by surface.
 */

.pf {
    --pf-field: #0b0d11;
    --pf-field-deep: #07080b;
    --pf-card: #14171d;
    --pf-card-2: #1a1e26;
    --pf-line: #262b33;
    --pf-line-2: #333a45;
    --pf-ink: #f2f4f7;
    --pf-ink-2: #9aa3b0;

    /* The dim step, and it used to be #6b7482, which measured 3.80:1 on
       --pf-card. Everything wearing it is small text - a metric sub-line, a
       year under the career strip, a per-round detail - so all of it sat under
       the 4.5:1 floor while looking merely quiet. #7d8695 is 4.89:1 on the
       card and 5.29:1 on the field, and still a clear step below --pf-ink-2's
       7.04:1, so the three-level hierarchy survives the lift. */
    --pf-ink-3: #7d8695;
    --pf-hot: #e8332a;
    --pf-hot-2: #ff4a3d;
    --pf-hot-deep: #a31710;
    --pf-sub: #3b8ff3;
    --pf-gold: #f0b429;
    --pf-gold-2: #ffcf56;
    --pf-gold-deep: #b07d0a;
    --pf-on-gold: #221703;
    --pf-radius: 12px;
    --pf-radius-sm: 7px;

    background: var(--pf-field);
    color: var(--pf-ink);
}

/* ------------------------------------------------------------------ hero */

.pf-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 520px at 78% 0%, rgba(232, 51, 42, 0.16), transparent 62%),
        linear-gradient(180deg, #101319 0%, var(--pf-field) 100%);
    border-bottom: 1px solid var(--pf-line);
}

/* The arena: the owner's generated haze, screened over the field and the
   slash below it so both glow through the smoke. Decorative, aria-hidden,
   and cheap - one 73KB jpg. */
.pf-hero__atmo {
    position: absolute;
    inset: 0;
    background: url('/img/atmosphere/haze-white.jpg') center 30% / cover no-repeat;
    mix-blend-mode: screen;
    opacity: 0.5;
    pointer-events: none;
}

/* The signature slash: one hot diagonal rising behind the portrait, the
   page's single big gesture. */
.pf-hero::before {
    content: '';
    position: absolute;
    top: -12%;
    right: -6%;
    width: 46%;
    height: 130%;
    background: linear-gradient(135deg, var(--pf-hot-2) 0%, var(--pf-hot-deep) 78%);
    transform: skewX(-12deg);
    transform-origin: top right;
    opacity: 0.92;
}

.pf-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(7, 8, 11, 0.55) 100%);
    pointer-events: none;
}

.pf-hero .frame {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    align-items: end;
    gap: var(--s-6);
    min-height: 470px;
    padding-top: var(--s-7);
}

.pf-hero__id {
    padding-bottom: var(--s-8);
}

.pf-hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

/* The flag, leading the eyebrow line. Sized to sit between the alias's cap
   height and its baseline so the row reads as one line rather than as a badge
   dropped into it, and plated with a hairline because a white flag on a dark
   field otherwise has no bottom edge. */
.pf-hero__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 33px;
    border: 1px solid var(--pf-line-2);
    border-radius: 3px;
    overflow: hidden;
    background: var(--pf-card);
    flex: none;
}

/* The plate around it is the border here, so the shared `.flag` rule's own
   1px edge is dropped rather than drawn twice. */
.pf-hero__flag .flag {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    vertical-align: baseline;
    object-fit: cover;
}

/* The keyed-out slot, at the flag's own size. It is drawn rather than left
   out because a missing flag reads as a broken image, where an empty plate
   with the marker in it reads as what it is. */
.pf-hero__flag .flag--absent {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        135deg,
        transparent 0 5px,
        rgba(255, 255, 255, 0.045) 5px 10px
    );
}

.pf-hero__flag .flag--absent .nodata {
    font-size: 0.8125rem;
}

/* The written fallback, which telestrator.css sizes for a table cell. In the
   hero it fills the plate rather than sitting inside it. */
.pf-hero__flag .flag--named {
    width: 100%;
    height: 100%;
    color: var(--pf-ink-2);
}

a.pf-hero__flag {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

a.pf-hero__flag:hover,
a.pf-hero__flag:focus-visible {
    border-color: var(--pf-ink-2);
    transform: translateY(-1px);
}

.pf-hero__alias {
    font-weight: 800;
    font-stretch: 72%;
    font-size: clamp(1.375rem, 2.6vw, 2rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pf-hot-2);
}

.pf-hero__meta {
    font-family: var(--mono);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    letter-spacing: 0.06em;
    color: var(--pf-ink-2);
    text-transform: uppercase;
}

.pf-hero__name {
    margin: 0;
    font-weight: 900;
    font-stretch: 62%;
    font-size: clamp(3.25rem, 8.4vw, 6.75rem);
    line-height: 0.88;
    letter-spacing: 0.002em;
    text-transform: uppercase;
    text-wrap: balance;
}

.pf-hero__record {
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
    margin-top: var(--s-5);
}

.pf-hero__record b {
    font-weight: 900;
    font-stretch: 66%;
    font-size: clamp(2.25rem, 4.6vw, 3.75rem);
    line-height: 1;
    letter-spacing: 0.01em;
}

.pf-hero__record span {
    font-family: var(--mono);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pf-ink-2);
}

/* The portrait, treated: grayscale under a hot scrim, faded into the field
   on its left and lower edges so a square Commons crop reads as art
   direction rather than as a pasted sticker. */
.pf-hero__art {
    position: relative;
    align-self: end;
    min-height: 380px;
}

/* The duotone sandwich, built to survive stacking-context isolation: a mask
   isolates any blend inside it, so the image cannot multiply against the
   hero's slash directly. Instead the photo span carries its own red plate
   in the same colours as the slash, the grayscale image multiplies against
   that plate inside one group, and the two fades sit one per wrapper - the
   art fades in from the left, the photo fades down from the top - so their
   nesting multiplies into the intersection with no mask-composite at all. */
.pf-hero__art .pf-hero__photo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(470px, 100%);
    background: linear-gradient(135deg, var(--pf-hot-2) 0%, var(--pf-hot-deep) 85%);
    /* One corner-anchored radial fades the top and left edges together -
       no second mask layer, so no composite for a legacy alias to break. */
    -webkit-mask-image: radial-gradient(130% 130% at 96% 100%, #000 56%, transparent 82%);
    mask-image: radial-gradient(130% 130% at 96% 100%, #000 56%, transparent 82%);
}

.pf-hero__art img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    /* Full duotone: grayscale, multiplied into the plate, so the
       photograph's own background - a white wall, a press-room banner,
       whatever Commons happened to hold - becomes the red it sits on and
       every portrait on the site shares one art direction. */
    filter: grayscale(1) contrast(1.12) brightness(1.05);
    mix-blend-mode: multiply;
}

/* No photograph: the record itself becomes the art - a monumental ghosted
   numeral pair over the slash, stated as what it is. */
.pf-hero__ghost {
    position: absolute;
    right: 6%;
    bottom: 12%;
    text-align: right;
    z-index: 2;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.pf-hero__ghost b {
    display: block;
    font-weight: 900;
    font-stretch: 62%;
    font-size: clamp(5rem, 11vw, 9rem);
    line-height: 0.82;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.92);
}

.pf-hero__ghost span {
    display: block;
    margin-top: var(--s-2);
    font-family: var(--mono);
    font-size: 0.9375rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------ stat deck */

/* The card row overlaps the hero's bottom edge, the modern-sport handshake
   between hero and body. */
.pf-deck {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: var(--s-4);
    margin-top: calc(-1 * var(--s-7));
    padding-bottom: var(--s-2);
}

.pf-card {
    background: linear-gradient(180deg, var(--pf-card-2) 0%, var(--pf-card) 100%);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    padding: var(--s-4) var(--s-5);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.pf-card__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-ink-2);
}

.pf-card__value {
    display: block;
    margin-top: var(--s-2);
    font-weight: 900;
    font-stretch: 68%;
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
    line-height: 1;
}

.pf-card__value small {
    font-family: var(--mono);
    font-weight: 500;
    font-stretch: 100%;
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--pf-ink-2);
}

.pf-card__raw {
    display: block;
    margin-top: var(--s-2);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    color: var(--pf-ink-2);
}

.pf-card--gauge {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4);
}

.pf-gauge {
    width: 74px;
    height: 74px;
}

.pf-gauge circle {
    fill: none;
    stroke-width: 8;
}

.pf-gauge__track { stroke: var(--pf-line); }

.pf-gauge__arc {
    stroke: var(--pf-hot);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.pf-gauge__num {
    font-family: var(--mono);
    font-size: 17px;
    font-weight: 700;
    fill: var(--pf-ink);
}

/* ---------------------------------------------------------------- bands */

.pf-band {
    padding-block: var(--s-8);
}

.pf-band + .pf-band {
    border-top: 1px solid var(--pf-line);
}

.pf-h2 {
    margin: 0 0 var(--s-2);
    font-weight: 900;
    font-stretch: 68%;
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.pf-sub {
    margin: 0 0 var(--s-5);
    max-width: 68ch;
    color: var(--pf-ink-2);
    font-size: 0.9375rem;
}

.pf-note {
    max-width: 68ch;
    color: var(--pf-ink-3);
    font-size: 0.8125rem;
}

/* -------------------------------------------------------- opponent mix */

.pf-mix {
    display: grid;
    gap: var(--s-2);
}

.pf-mix__row {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 44px 96px minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4);
    background: var(--pf-card);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-sm);
    padding: 11px var(--s-4);
}

.pf-mix__row--leaf {
    background: transparent;
    border-color: transparent;
    padding-block: 5px;
    margin-left: var(--s-4);
}

.pf-mix__label {
    font-weight: 800;
    font-stretch: 74%;
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pf-mix__row--leaf .pf-mix__label {
    font-weight: 600;
    color: var(--pf-ink-2);
    text-transform: none;
    font-stretch: 90%;
    letter-spacing: 0;
}

.pf-mix__n {
    font-family: var(--mono);
    font-size: 0.875rem;
    color: var(--pf-ink-2);
    text-align: right;
}

.pf-mix__rec {
    font-family: var(--mono);
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.pf-mix__rec small {
    display: block;
    font-weight: 400;
    font-size: 0.6875rem;
    color: var(--pf-ink-3);
}

.pf-mix__bar {
    display: flex;
    height: 12px;
    border-radius: 999px;
    background: var(--pf-line);
    overflow: hidden;
    min-width: 0;
}

.pf-mix__seg--win { background: linear-gradient(90deg, var(--pf-gold-2), var(--pf-gold)); }
.pf-mix__seg--loss { background: var(--pf-line-2); }
.pf-mix__seg--draw { background: var(--pf-ink-3); }

/* ---------------------------------------------------------- career strip */

.pf-strip {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 280px;
    padding: var(--s-4) var(--s-5) 30px;
    background:
        linear-gradient(rgba(20, 23, 29, 0.93), rgba(20, 23, 29, 0.93)),
        url('/img/atmosphere/canvas-worn.jpg') center / cover;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--pf-line-2) transparent;
}

.pf-strip__bout {
    flex: 1 1 0;
    min-width: 12px;
    max-width: 52px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
}

.pf-strip__stem {
    width: 100%;
    min-height: 5px;
    border-radius: 4px 4px 0 0;
    transition: filter 120ms ease, transform 120ms ease;
}

.pf-strip__bout--win .pf-strip__stem {
    background: linear-gradient(180deg, var(--pf-gold-2) 0%, var(--pf-gold-deep) 100%);
}

.pf-strip__bout--loss .pf-strip__stem {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--pf-line-2);
}

.pf-strip__bout--draw .pf-strip__stem {
    background: var(--pf-ink-3);
}

.pf-strip__bout:hover .pf-strip__stem,
.pf-strip__bout:focus-visible .pf-strip__stem {
    filter: brightness(1.25);
    transform: translateY(-2px);
}

.pf-strip__bout--year::after {
    content: attr(data-year);
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: var(--pf-ink-3);
    border-left: 1px solid var(--pf-line-2);
    padding-left: 5px;
    line-height: 1;
    white-space: nowrap;
}

.pf-strip-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    margin-top: var(--s-3);
    font-size: 0.75rem;
    color: var(--pf-ink-2);
}

.pf-strip-key i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 7px;
    vertical-align: -1px;
}

/* -------------------------------------------------------------- output */

.pf-duo {
    display: grid;
    gap: var(--s-6);
    align-items: start;
}

@media (min-width: 880px) {
    .pf-duo {
        grid-template-columns: 1.1fr 0.9fr;
        gap: var(--s-8);
    }
}

.pf-duo > div {
    min-width: 0;
}

.pf-panel {
    background: var(--pf-card);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    padding: var(--s-5);
}

.pf-panel + .pf-panel {
    margin-top: var(--s-5);
}

.pf-panel__title {
    margin: 0 0 var(--s-4);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-ink-2);
}

.pf-stat {
    display: grid;
    grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-4);
    padding: 9px 0;
}

.pf-stat + .pf-stat {
    border-top: 1px solid var(--pf-line);
}

.pf-stat__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pf-ink-2);
}

.pf-stat__bar {
    height: 10px;
    border-radius: 999px;
    background: var(--pf-line);
    overflow: hidden;
    min-width: 0;
}

.pf-stat__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pf-hot-2), var(--pf-hot));
}

.pf-stat__value {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.0625rem;
    font-weight: 700;
    white-space: nowrap;
}

.pf-stat__value small {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--pf-ink-3);
}

/* ------------------------------------------------------------ win ways */

.pf-ways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s-4);
}

.pf-ways .pf-card__value {
    color: var(--pf-ink);
}

.pf-ways__detail {
    display: block;
    margin-top: var(--s-2);
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--pf-ink-3);
}

/* --------------------------------------------------------------- table */

.pf-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    background: var(--pf-card);
}

.pf-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pf-table th {
    padding: 12px var(--s-4);
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pf-ink-2);
    border-bottom: 1px solid var(--pf-line-2);
    white-space: nowrap;
}

.pf-table td {
    padding: 11px var(--s-4);
    border-bottom: 1px solid var(--pf-line);
    vertical-align: middle;
}

.pf-table tbody tr:last-child td {
    border-bottom: 0;
}

.pf-table tbody tr[data-row-href] {
    cursor: pointer;
}

.pf-table tbody tr[data-row-href]:hover,
.pf-table tbody tr[data-row-href]:focus-within {
    background: var(--pf-card-2);
}

.pf-table .num {
    text-align: right;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

.pf-table a {
    color: var(--pf-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--pf-line-2);
}

.pf-table a:hover {
    color: var(--pf-hot-2);
    border-bottom-color: var(--pf-hot-2);
}

.pf-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pf-pill--win {
    background: linear-gradient(135deg, var(--pf-gold-2), var(--pf-gold));
    color: var(--pf-on-gold);
}

.pf-pill--loss {
    border: 1px solid var(--pf-line-2);
    color: var(--pf-ink-2);
}

.pf-pill--draw {
    border: 1px solid var(--pf-line-2);
    color: var(--pf-ink-3);
}

/* ---------------------------------------------------------------- spec */

.pf-spec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s-4);
    margin: 0;
}

.pf-spec > div {
    background: var(--pf-card);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-sm);
    padding: var(--s-4);
}

.pf-spec dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-ink-2);
}

.pf-spec dd {
    margin: 7px 0 0;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.15;
}

/* Stance is a word, not a figure, so it takes the prose face. The Comparable
   Column Rule owns this: mono is for things that could sit one above the
   other and be compared, and nothing compares "Orthodox" down a column. */
.pf-spec dd.pf-spec__word {
    font-family: var(--sans);
    letter-spacing: 0.005em;
}

/* The metric sub-line under an imperial figure. **`margin-left: 0` is a fix,
   not tidiness.** `.alt` carries an 8px left margin in telestrator.css for
   the case where it sits inside a sentence, and `.spec dd .alt` there zeroes
   it for a spec cell - but this page's cells are `.pf-spec`, which that
   selector never reached. So every second line here sat 8px to the right of
   the figure it belonged under: `193 CM` indented from `6'4"`, the date of
   birth indented from the age. */
.pf-spec dd small,
.pf-spec dd .alt {
    display: block;
    margin-left: 0;
    margin-top: 5px;
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--pf-ink-2);
}

.pf-style {
    margin-top: var(--s-5);
    background:
        linear-gradient(90deg, rgba(232, 51, 42, 0.14), transparent 55%),
        var(--pf-card);
    border: 1px solid var(--pf-line);
    border-left: 3px solid var(--pf-hot);
    border-radius: var(--pf-radius-sm);
    padding: var(--s-4) var(--s-5);
    max-width: 760px;
}

.pf-style strong {
    display: block;
    font-weight: 900;
    font-stretch: 68%;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pf-style em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 0.8125rem;
    color: var(--pf-ink-2);
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 880px) {
    .pf-hero .frame {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding-top: var(--s-6);
    }

    .pf-hero::before {
        width: 74%;
        right: -18%;
    }

    .pf-hero__art {
        order: -1;
        min-height: 250px;
        margin-inline: calc(-1 * var(--s-4));
    }

    .pf-hero__art .pf-hero__photo {
        width: min(320px, 84%);
    }

    /* Stacked above the name, the giant ghosted numerals would print the
       record twice in a row - the real record line is inches below. The
       silhouette and the honesty caption stay. */
    .pf-hero__ghost b {
        display: none;
    }

    .pf-hero__ghost b {
        font-size: clamp(4.5rem, 22vw, 7rem);
    }

    .pf-hero__id {
        padding-bottom: var(--s-7);
    }

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

    /* Two cards to a row leaves the gauge cards about 46px for their label,
       and `TAKEDOWN` is one unbreakable 90px word, so it was printing off the
       card's own edge. Stacked, the label gets the full width and needs no
       hyphen. */
    .pf-card--gauge {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        gap: var(--s-3);
    }

    .pf-mix__row {
        grid-template-columns: minmax(0, 1fr) 36px 84px;
    }

    .pf-mix__bar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-strip__bout:hover .pf-strip__stem {
        transform: none;
    }
}