/* The Moments header: the athlete's photograph, and their name across it.
 *
 * Loaded after mobile-import-library.css on purpose. The identity rules in
 * that sheet are written at full specificity with !important on nearly every
 * declaration, so these have to match the same selector chain and win the
 * source-order tie. Changing the order of the two <link> tags breaks the hero.
 *
 * Everything here is scoped to .is-posted-bytes-timeline, which is the Moments
 * timeline and nothing else. Seasons, TV, Map and Menu never carry it.
 *
 * One variable rule: --mobile-app-header-height is the real one, and it grows
 * from 74px to 100px when an offer pill is in the header. --mobile-header-height
 * does not exist anywhere in this repo; an earlier build of this hero used it
 * throughout and silently got a 46px fallback.
 */

/* The photograph runs to the top of the screen. The container is normally
   inset to sit below the header, so that inset comes off while a hero is
   present, and the header — which paints at a higher layer — sits on the
   picture. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline:has(.mobile-import-library__identity-hero, .mobile-import-library__identity-plate) {
    top: 0 !important;
}

/* The strip is a plain column while it carries a hero: no side padding, or a
   16px gutter would show as white rails down both edges of the photograph. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__profile-strip.is-identity:has(.mobile-import-library__identity-hero, .mobile-import-library__identity-plate) {
    gap: 14px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}

/* The rows under the photograph keep the gutter the strip used to give them. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__profile-strip.is-identity:has(.mobile-import-library__identity-hero, .mobile-import-library__identity-plate) > .mobile-import-library__identity-row,
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__profile-strip.is-identity:has(.mobile-import-library__identity-hero, .mobile-import-library__identity-plate) > .mobile-import-library__identity-links,
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__profile-strip.is-identity:has(.mobile-import-library__identity-hero, .mobile-import-library__identity-plate) > .mobile-import-library__identity-views {
    padding-right: 16px !important;
    padding-left: 16px !important;
}

/* In flow, not fixed. The hero has to scroll away with the timeline: pinning
   it would leave the feed sliding underneath a photograph that never moves,
   and reserving its height would mean a second box to keep in step. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* The deck measures the hero at 46.8% of the screen. dvh so that the iOS
       toolbar collapsing mid-scroll does not re-crop the picture; vh first for
       anything that does not know dvh. */
    height: 47vh !important;
    height: 47dvh !important;
    min-height: 300px !important;
    max-height: 520px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    /* Held under the photograph while it loads, so the caption never lands on
       white for a frame. */
    background: #101014 !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-photo {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    /* cover crops; contain would letterbox a portrait against black bars.
       The offset is the part that matters: these are full-body frames, and
       centring one in a half-screen box cuts the head off at the facemask.
       12% from the top holds the face for a standing figure without leaving
       a band of sky above a head-and-shoulders one. */
    object-fit: cover !important;
    object-position: center 12% !important;
    border-radius: 0 !important;
}

/* One wash, two jobs: enough shade under the header that the glyphs read
   against a bright sky, nothing at all across the middle where the athlete
   is, and a deep foot for the name to sit on. The upper stop is keyed to the
   header variable so it follows the safe-area inset and the taller pill
   state without a second rule. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-scrim {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background: linear-gradient(
        180deg,
        rgba(8, 8, 12, 0.55) 0%,
        rgba(8, 8, 12, 0.18) calc(var(--mobile-app-header-height, 74px) + 10px),
        rgba(8, 8, 12, 0) 46%,
        rgba(8, 8, 12, 0.42) 68%,
        rgba(8, 8, 12, 0.86) 100%
    ) !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-caption {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 18px 16px !important;
    text-align: left !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-name {
    /* Text flow, not a flex row.
     *
     * As flex, the name and the verified tick were siblings on one line: a
     * name long enough to wrap left the tick stranded at the far right of the
     * block, which a two-word business name does immediately. In normal flow
     * the tick is part of the sentence and follows the last word wherever it
     * lands. */
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    /* The clamp answers screen width; the scale answers name length, set
       inline per render. A short name keeps the full 34px. */
    font-size: calc(clamp(26px, 7.6vw, 34px) * var(--identity-name-scale, 1)) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.022em !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-verified {
    /* Inline, so it follows the last word of the name. As a block it sat on
       its own line and was pushed to the far right whenever the name wrapped
       to two lines -- which a business name usually does. */
    display: inline !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
    flex: 0 0 auto !important;
    color: #24c26a !important;
    -webkit-text-fill-color: #24c26a !important;
    font-size: 0.6em !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45) !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.94) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    letter-spacing: 0.005em !important;
    text-shadow: 0 1px 9px rgba(0, 0, 0, 0.55) !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-meta > span {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-stars {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    color: #ffc531 !important;
    -webkit-text-fill-color: #ffc531 !important;
    font-size: 12px !important;
}

/* The filled stars need the colour on the <i> itself, not inherited from the
   span around them. A `[data-theme="light"] *` rule sets every element on the
   page to #000000 !important, so a child that is not named directly is
   painted black however the parent is styled — which is what turned a four
   star rating into five identical dark ones. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-stars i.fa-star {
    color: #ffc531 !important;
    -webkit-text-fill-color: #ffc531 !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-stars i.is-empty {
    color: rgba(255, 255, 255, 0.32) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.32) !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-stars b {
    margin-left: 5px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

/* The review count beside a business rating. Without a colour of its own it
   inherits the theme's black and disappears into the photograph, the same way
   the rating would if the rule above did not exist. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-stars em {
    margin-left: 4px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-style: normal !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    opacity: 0.78 !important;
}

/* The separators inside the hero are white; the ones in the strip below the
   photograph stay the grey the base sheet gives them. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-caption .mobile-import-library__identity-dot {
    flex: 0 0 auto !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-rule {
    align-self: stretch !important;
    height: 1px !important;
    margin: 3px 0 2px !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.24) !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-org {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 9px rgba(0, 0, 0, 0.55) !important;
}


/* The base sheet paints the school dark for the no-photo line. Inside the
   hero it belongs to the caption, so it takes the caption's colour. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-org .mobile-import-library__identity-school {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: inherit !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-place {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: rgba(255, 255, 255, 0.74) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.74) !important;
    font-weight: 650 !important;
}

/* A street address is somewhere to go, so it takes taps. Styled as the text
   it replaces rather than as a button -- the arrow is what says it leads
   somewhere, the way the profile chips do. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-place.is-linked {
    border: 0 !important;
    background: transparent !important;
    padding: 2px 0 !important;
    font: inherit !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    /* A <button> does not inherit the caption's colour the way the <span> it
       replaced did, so the themes' forced black applies and the address goes
       dark against the photograph. */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-place.is-linked i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-place.is-linked:active {
    opacity: 0.7 !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-place-out {
    margin-left: 6px !important;
    font-size: 9px !important;
    opacity: 0.62 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-place i {
    font-size: 10px !important;
    opacity: 0.85 !important;
    /* The glyph took the theme's black and vanished against the photograph --
       the text beside it is white for the same reason. */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* The header is transparent while the hero is up, so its own drop shadow and
   any hairline under it would draw a line across the photograph. The fill
   itself is cleared in applyHeaderTheme(), which writes it inline. */
html body.is-athlete-hero #mobile-app-header {
    border-bottom: 0 !important;
    box-shadow: none !important;
}


/* The little avatar chip goes while the hero is up: the photograph behind it
   is the same picture, a great deal larger, so the chip is the athlete shown
   twice. Only on Moments — every other tab still needs the mark to say which
   app you are in. The chip's size and fill are written inline by
   enforceHeaderLogoChip(), which applyHeaderTheme() skips in the hero branch,
   so hiding the button here is enough to keep it away. */
html body.is-athlete-hero #mobile-app-header #mobile-header-blips-wrap,
html body.is-athlete-hero #mobile-app-header #mobile-app-header-logo,
html body.is-athlete-hero #mobile-app-header .mobile-app-header__profile-btn,
html body.is-athlete-hero #mobile-app-header #mobile-app-header-name {
    display: none !important;
}

/* The offer belongs under the photograph, not on it.
 *
 * The pill normally sits in the header, which on Moments is a transparent
 * strip over the athlete's chest — a white lozenge floating there reads as a
 * sticker on the picture, and it covers the one part of the frame the hero
 * exists to show. The deck puts the offer first on the white below instead:
 * its own row, the sponsor's mark, the offer, and the way to claim it.
 *
 * Moved with position rather than by relocating the node in JS, so the pill
 * stays where ensureHeaderPill() built it and there is nothing to keep in
 * step when it re-renders. The header is fixed, so `top` here is measured
 * from the viewport: the hero's height puts the row immediately under it.
 */
/* The slot is moved out of the header and into the strip by
   ensureHeaderPill(), so here it is an ordinary block between the photograph
   and the reach figures. No positioning at all: the header is fixed, and
   anything positioned against it hangs on screen for the whole scroll. */
/* The slot centres the pill rather than stretching it. In the header this is
   a flex row that lets the pill size to its own content; moved down here it
   has to keep doing that, or the offer becomes a band across the page
   instead of an object sitting on it. */
html body.is-athlete-hero .mobile-app-header__pill-slot {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 12px 0 0 !important;
    padding: 0 16px !important;
    pointer-events: auto !important;
}

/* Same pill as the header's, only lower down: it hugs its content and stops
   at 68vw the way the original does, rather than running edge to edge. The
   height comes up from 34px to fit a 26px sponsor mark, which is the one
   change — below the photograph there is room for the offer to be a slightly
   larger object than it can be inside a header bar. */
html body.is-athlete-hero .mobile-app-header__pill-slot .mobile-app-header__pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    max-width: min(94vw, 372px) !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 12px 0 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(22, 22, 28, 0.1) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 18, 28, 0.08) !important;
    text-align: left !important;
}

html body.is-athlete-hero .mobile-app-header__pill-mark {
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

html body.is-athlete-hero .mobile-app-header__pill-mark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* One line. "Zaxby's — FREE MEAL / $15 OFF" is twenty-nine characters and it
   has to share the row with the claim, so it is set a little tighter and
   ellipsised rather than allowed to wrap: two lines here push the mark and
   the claim out of line with each other and the row stops reading as one
   thing to tap. */
html body.is-athlete-hero .mobile-app-header__pill-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #16161c !important;
    -webkit-text-fill-color: #16161c !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.016em !important;
    text-align: left !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* The chevron becomes the call to action: red, and named, because "claim" is
   the word that tells somebody the offer is theirs to take.
 *
 * The base rule builds it as a 6px square with two borders turned 45deg — a
 * drawn arrowhead, not a glyph. All of that has to be undone before it can
 * hold a word: the rotation would tip the text on its side and the 6px box
 * would push it off the screen. */
html body.is-athlete-hero .mobile-app-header__pill-slot .mobile-app-header__pill .mobile-app-header__pill-chevron,
html body.is-athlete-hero .mobile-app-header__pill-chevron {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    transform: none !important;
    color: #d9261c !important;
    -webkit-text-fill-color: #d9261c !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow: none !important;
}

html body.is-athlete-hero .mobile-app-header__pill-chevron::before {
    content: 'Claim offer';
}

/* The arrowhead, redrawn after the word rather than instead of it. */
html body.is-athlete-hero .mobile-app-header__pill-chevron::after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 1.8px solid currentColor;
    border-right: 1.8px solid currentColor;
    transform: rotate(45deg);
}


/* The timeline runs to the edges, the way the photograph above it does.
 *
 * The moments were inset 18px inside a rounded card, which reads as a stack
 * of tiles on a page. Edge to edge they read as the feed itself — the same
 * decision the hero makes, carried down the screen, so the picture at the top
 * and the pictures below it share one margin rather than two.
 *
 * Only while a hero is up. The timeline keeps its gutter everywhere else.
 */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__list,
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__day-stack {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Square corners, because a rounded card at full width leaves four notches of
   page showing at the screen edge. */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__item {
    border-radius: 0 !important;
}

/* The separation the gutter used to give is carried by a hairline instead, so
   two moments in a row do not run together. */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__item + .mobile-import-library__item {
    border-top: 1px solid rgba(17, 20, 17, 0.08) !important;
}

/* One continuous feed: no page showing between the moments.
 *
 * The cards were separated by a ten pixel gap with the white list behind it,
 * so scrolling flashed a white band between every post. The gap goes and the
 * surface behind the stack is darkened to match the media, which means the
 * seam between two moments is the hairline rather than a strip of paper.
 */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__day-stack {
    gap: 0 !important;
}

html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__list,
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__day-group {
    background: #111411 !important;
}

/* The break between moments, without an edge to it.
 *
 * A border runs the full width and stops dead at both sides, which on
 * full-bleed media reads as a seam drawn on top of the picture rather than as
 * the space between two of them -- the eye finds the two hard ends first.
 *
 * The line is a gradient instead: strongest in the middle, gone before it
 * reaches either edge. Same job, no ends to notice. It is drawn on the item
 * rather than bordered so the fade is possible at all, and it sits above the
 * media so it is not lost against a bright frame.
 */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__item + .mobile-import-library__item {
    border-top: 0 !important;
    position: relative !important;
}

html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__item + .mobile-import-library__item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    /* Nothing for the first eighth, full strength across the middle, nothing
       again by the far edge. A little stronger than the old 7% because a line
       that fades has less of itself to be seen by. */
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.11) 22%,
        rgba(255, 255, 255, 0.11) 78%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
}

/* A post that does not fill the frame gets a blurred copy of itself behind it
   rather than black bars.
 *
 * The media is drawn twice: once blown up and blurred to fill the frame edge
 * to edge, and once at its own shape on top. Vertical video on a phone-shaped
 * card leaves nothing at the sides; a square post leaves two bands, and those
 * bands now carry the colour of the picture instead of a black rectangle.
 *
 * The copy is the same file the post already loaded, set as a background on
 * the container, so nothing extra is fetched.
 */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__thumb {
    position: relative !important;
    overflow: hidden !important;
    background-color: #111411 !important;
}

html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__thumb::before {
    content: '' !important;
    position: absolute !important;
    /* Overhung on every side: a blur samples past its own edge, and without
       the overhang the corners fade to the backing colour and the bars come
       back, softer. */
    inset: -8% !important;
    z-index: 0 !important;
    background-image: inherit !important;
    background-position: center !important;
    background-size: cover !important;
    filter: blur(26px) saturate(1.25) brightness(0.82) !important;
    transform: scale(1.06) !important;
    pointer-events: none !important;
}

/* The real media sits above its own blur. */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__thumb img,
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__thumb video {
    position: relative !important;
    z-index: 1 !important;
    /* Transparent, so the blur behind it is what shows in the letterbox
       rather than the flat colour that used to fill it. */
    background: transparent !important;
}

/* The month scrolls away with its moments.
 *
 * It was pinned to the top of the screen, so "JULY 2026" sat over the
 * photographs for the whole of July — a label parked on the athlete's face,
 * and the one thing on a full-bleed feed that never moves. It still marks
 * where a month begins; it just does not follow you down the page.
 */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__month-card,
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__item-date {
    position: static !important;
    top: auto !important;
}

/* The mark that says a link leaves the app.
 *
 * It was a bare ↗ character, which the phone draws as a blue boxed emoji —
 * a piece of system furniture sitting inside a quiet grey pill. A glyph in
 * the row's own colour reads as part of the button instead.
 */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-link-out {
    margin-left: 1px !important;
    color: rgba(22, 22, 28, 0.34) !important;
    -webkit-text-fill-color: rgba(22, 22, 28, 0.34) !important;
    font-size: 9px !important;
}

/* The search bar.
 *
 * It was a white pill on a white page held together by a hairline — the one
 * control on the screen you had to look for. Now it reads as a recessed slot:
 * a tinted well with the light coming from above, so it sits *in* the page
 * rather than floating on it, and the magnifier is dark enough to find at a
 * glance.
 */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__search {
    min-height: 46px !important;
    border: 1px solid rgba(17, 20, 28, 0.07) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #f3f4f7 0%, #eceef2 100%) !important;
    /* Inset at the top and a whisper of light at the bottom: the two together
       are what make a surface read as carved rather than drawn. */
    box-shadow:
        inset 0 1px 2px rgba(17, 20, 28, 0.07),
        0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transition: background 220ms cubic-bezier(.2,.8,.2,1),
                box-shadow 220ms cubic-bezier(.2,.8,.2,1),
                border-color 220ms cubic-bezier(.2,.8,.2,1) !important;
}

/* Typing lifts it out of the page: the well fills to white and the shadow
   turns outward, so the field looks raised while it has your attention. */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__search:focus-within {
    border-color: rgba(17, 20, 28, 0.14) !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 3px rgba(17, 20, 28, 0.05),
        0 10px 24px rgba(17, 20, 28, 0.1) !important;
}

html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__search i,
html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__search svg {
    color: rgba(22, 22, 28, 0.5) !important;
    -webkit-text-fill-color: rgba(22, 22, 28, 0.5) !important;
    font-size: 15px !important;
    transition: color 220ms cubic-bezier(.2,.8,.2,1) !important;
}

html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__search:focus-within i,
html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__search:focus-within svg {
    color: #16161c !important;
    -webkit-text-fill-color: #16161c !important;
}

html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline #mobile-import-library-source-input {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
}

html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline #mobile-import-library-source-input::placeholder {
    color: rgba(22, 22, 28, 0.42) !important;
    -webkit-text-fill-color: rgba(22, 22, 28, 0.42) !important;
    font-weight: 600 !important;
}

/* One gutter for everything above the feed.
 *
 * The blocks between the photograph and the moments each carried their own
 * inset — the offer at seventeen, the search at eight, the pills centred and
 * wrapping, the feed at zero — so five things stacked down the screen started
 * at five different places. The gaps between them were even; it was the left
 * edge that kept moving, and that is what reads as arbitrary.
 *
 * They share a gutter now, and the feed keeps its full bleed. The rhythm is
 * one step between related rows and a wider one before the moments, so the
 * feed clearly begins rather than being the next item in a list.
 */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline {
    --nst-gutter: 16px;
}

html body.is-athlete-hero .mobile-app-header__pill-slot,
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__profile-strip.is-identity:has(.mobile-import-library__identity-hero, .mobile-import-library__identity-plate) > .mobile-import-library__identity-row,
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__profile-strip.is-identity:has(.mobile-import-library__identity-hero, .mobile-import-library__identity-plate) > .mobile-import-library__identity-links {
    padding-right: var(--nst-gutter) !important;
    padding-left: var(--nst-gutter) !important;
}

/* The offer spans the gutter rather than floating inside it, so its edges
   line up with the rows beneath. */
html body.is-athlete-hero .mobile-app-header__pill-slot .mobile-app-header__pill {
    width: 100% !important;
    max-width: none !important;
}

/* The profile marks read as one row of five rather than four and an orphan:
   scrolled sideways they keep a single line and a single left edge. */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-links {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}

html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-links::-webkit-scrollbar {
    display: none !important;
}

/* The reach figures lead from the same edge as everything else, rather than
   sitting centred while the rows above and below start at the left. */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-row {
    justify-content: flex-start !important;
}

/* The search sits in the same gutter, and the feed gets a clear step before
   it so the moments read as a new section. */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__search {
    /* The row this sits in carries eight of the sixteen already, so the
       search takes the remainder rather than the whole gutter — the full
       amount on top of it pushed the field in past everything else. */
    margin-right: 8px !important;
    margin-left: 8px !important;
    margin-bottom: 22px !important;
    width: auto !important;
}

/* The caption has to read against whatever the photograph puts behind it.
 *
 * The scrim faded out at the middle and only deepened near the floor, which
 * is fine over a dark studio wall and useless over a white jersey — the
 * position, the class and the school landed on the brightest part of the
 * frame and disappeared. The wash now starts earlier and carries further, so
 * the whole caption sits on shade rather than only the name.
 */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-scrim {
    background: linear-gradient(
        180deg,
        rgba(8, 8, 12, 0.55) 0%,
        rgba(8, 8, 12, 0.18) calc(var(--mobile-app-header-height, 74px) + 10px),
        rgba(8, 8, 12, 0) 38%,
        rgba(8, 8, 12, 0.34) 58%,
        rgba(8, 8, 12, 0.72) 76%,
        rgba(8, 8, 12, 0.92) 100%
    ) !important;
}

/* And a shadow on the lines themselves, so a bright patch inside the wash
   still cannot swallow them. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-meta,
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-org {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 1px 14px rgba(0, 0, 0, 0.6) !important;
}

/* No box inside the box. The field draws its own focus outline on iOS, which
   reads as a second container nested in the search slot — the slot already
   shows focus by filling to white and lifting. */
html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline #mobile-import-library-source-input {
    outline: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline #mobile-import-library-source-input:focus,
html body.is-athlete-hero #mobile-import-library.mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline #mobile-import-library-source-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   The hero with no photograph.

   A business that has not uploaded an image still has a name, a rating, a
   category and an address -- the caption was never reading the picture. So
   the same caption is emitted in a plate instead of over a photograph, and
   the rules below undo the two things the photograph was paying for: white
   text with a shadow under it, and a 47vh box to sit at the bottom of.

   Everything else -- the name's clamp and --identity-name-scale, the star
   sizing, the rule, the address button and its arrow -- is inherited from the
   rules above, which are written against .identity-caption rather than
   against the hero. One caption, two backdrops.
   --------------------------------------------------------------------------- */

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    /* The panel starts at the top of the screen and the header is transparent
       over it, so the plate clears both itself: the header's own height,
       which already carries the safe-area inset, plus air under it. Without
       this the name would be printed through the menu button. */
    padding: calc(var(--mobile-app-header-height, 74px) + 26px) 0 8px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* In flow, not pinned to the bottom of a box that no longer exists. The side
   padding matches the caption's 18px so the name lines up with the photograph
   version exactly. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-caption {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    padding: 0 18px !important;
    gap: 8px !important;
}

/* Dark type from here down. Each element is named rather than left to
   inherit: a `[data-theme="light"] *` rule paints every element #000000
   !important, so a child that is not named directly is not actually taking
   its parent's colour -- it only looked that way against the photograph
   because the forced black and the wanted white were the same fight. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-name {
    color: #0b0b0f !important;
    -webkit-text-fill-color: #0b0b0f !important;
    text-shadow: none !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-meta,
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-org {
    color: rgba(11, 11, 15, 0.62) !important;
    -webkit-text-fill-color: rgba(11, 11, 15, 0.62) !important;
    /* The shadow was there to hold the line off a bright patch of photograph.
       On a flat panel it only smears the type. */
    text-shadow: none !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-org .mobile-import-library__identity-school {
    color: rgba(11, 11, 15, 0.72) !important;
    -webkit-text-fill-color: rgba(11, 11, 15, 0.72) !important;
}

/* The gold stays gold -- it reads on white as well as it did on the
   photograph, and it is the one colour on the line. Only the rating number
   and the review count, which were white to clear the picture, come back to
   dark. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-stars b {
    color: #0b0b0f !important;
    -webkit-text-fill-color: #0b0b0f !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-stars em {
    color: rgba(11, 11, 15, 0.6) !important;
    -webkit-text-fill-color: rgba(11, 11, 15, 0.6) !important;
    opacity: 1 !important;
}

/* An unfilled star was a white ghost for the same reason. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-stars i.is-empty {
    color: rgba(11, 11, 15, 0.2) !important;
    -webkit-text-fill-color: rgba(11, 11, 15, 0.2) !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-caption .mobile-import-library__identity-dot {
    background: rgba(11, 11, 15, 0.28) !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-rule {
    background: rgba(11, 11, 15, 0.1) !important;
}

/* The base sheet gives a <button> a white pill and a shadow. Over a
   photograph that never showed -- the hero's own rules painted it out -- but
   on the plate it came through as a container drawn around the address,
   which is the one thing on this screen that should not look like a chip.
   The arrow is what says it leads somewhere. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-place.is-linked {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 2px 0 !important;
}

/* The address is the one thing on the plate that leads somewhere, so it keeps
   more weight than the line it sits on. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-place,
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-place.is-linked,
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-place.is-linked i,
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-place i,
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-place-out {
    color: rgba(11, 11, 15, 0.78) !important;
    -webkit-text-fill-color: rgba(11, 11, 15, 0.78) !important;
}

/* The strip runs its padding to zero so the cards can go edge to edge, which
   is right for a photograph -- it bleeds -- and wrong for type, which was
   left printed against the screen edge. The caption keeps the 18px the
   caption over a photograph has, so the name starts on the same line in both. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-caption {
    padding: 0 18px !important;
}

/* The header sits on a light plate, not a photograph.
 *
 * The glass bubble behind each icon exists so a bare glyph does not vanish
 * when the picture puts something pale behind it. There is no picture here,
 * so the bubble is a grey disc on white and the glyph inside it goes pale for
 * a backdrop that never arrives. On the plate the buttons take the ordinary
 * light treatment: no bubble, dark glyph. */
html body.is-athlete-hero:has(.mobile-import-library__identity-plate) #mobile-app-header .mobile-app-header__more-btn,
html body.is-athlete-hero:has(.mobile-import-library__identity-plate) #mobile-app-header .mobile-app-header__login-btn,
html body.is-athlete-hero:has(.mobile-import-library__identity-plate) #mobile-app-header .mobile-app-header__tab,
html body.is-athlete-hero:has(.mobile-import-library__identity-plate) #mobile-app-header .mobile-app-header__blips-btn {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(17, 20, 17, 0.14) !important;
    color: rgba(17, 17, 17, 0.86) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.86) !important;
}

html body.is-athlete-hero:has(.mobile-import-library__identity-plate) #mobile-app-header .mobile-app-header__more-btn i,
html body.is-athlete-hero:has(.mobile-import-library__identity-plate) #mobile-app-header .mobile-app-header__more-btn span,
html body.is-athlete-hero:has(.mobile-import-library__identity-plate) #mobile-app-header .mobile-app-header__login-btn i,
html body.is-athlete-hero:has(.mobile-import-library__identity-plate) #mobile-app-header .mobile-app-header__tab i {
    color: rgba(17, 17, 17, 0.86) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.86) !important;
    background: transparent !important;
}

/* A school that resolved to a real place opens maps, the same as an address.
   Styled as the text it replaces rather than as a button -- the base sheet
   gives a <button> a white pill, and the school is a line of the caption, not
   a chip sitting in one. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-school.is-linked {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font: inherit !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    /* A <button> does not inherit the caption's colour the way the <span> it
       replaced did, so without this the theme's forced black applies and the
       school goes dark against the photograph. */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-school.is-linked:active {
    opacity: 0.7 !important;
}

/* On the plate there is no photograph to clear, so it reads dark like the
   rest of the line it belongs to. */
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-school.is-linked,
html body #mobile-import-library.mobile-import-library.is-light.is-home-embedded.is-posted-bytes-timeline .mobile-import-library__identity-plate .mobile-import-library__identity-school.is-linked i {
    color: rgba(11, 11, 15, 0.78) !important;
    -webkit-text-fill-color: rgba(11, 11, 15, 0.78) !important;
}