.contest-hero-v2,
.contest-hero-info,
.contest-hero-related,
.contest-hero-results {
    --hero-ink-rgb: 21 20 25;
    --hero-ink: rgb(var(--hero-ink-rgb));
    --hero-surface: #1f1b25;
    --hero-accent: #754dca;
    --hero-accent-hover: #623db3;
    --hero-on-accent: #fff;
    --hero-accent-light: #c7aff2;
    --hero-on-light: #251a36;
    --hero-accent-dark: #584470;
    --hero-gutter: clamp(20px, 4vw, 76px);
    color: #fff;
    background: var(--hero-ink);
    font-family: system-ui, sans-serif;
}
.contest-hero-gold,
.contest-hero-gold ~ .contest-hero-related {
    --hero-ink-rgb: 23 22 20;
    --hero-surface: #211e19;
    --hero-accent: #ffda8c;
    --hero-accent-hover: #f4c56d;
    --hero-on-accent: #2c2111;
    --hero-accent-light: #ffda8c;
    --hero-on-light: #2c2111;
    --hero-accent-dark: #60471f;
}
.contest-hero-photo {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: clamp(530px, 71vh, 790px);
}
.contest-hero-photo .contest-hero-frame,
.contest-hero-shade {
    position: absolute;
    inset: 0;
    margin: 0;
}
.contest-hero-v2 [hidden] { display: none !important; }
.contest-hero-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 43%;
}
.contest-hero-frame figcaption {
    position: absolute;
    z-index: 1;
    right: var(--hero-gutter);
    bottom: 13px;
    max-width: calc(100% - 40px);
    padding: 3px 8px;
    border-radius: 4px;
    background: #101014ad;
    color: #fff;
    font-size: 12px;
    text-align: right;
}
.contest-hero-shade {
    pointer-events: none;
    background:
        linear-gradient(to top, var(--hero-ink), rgb(var(--hero-ink-rgb) / .95) 5%, rgb(var(--hero-ink-rgb) / .65) 18%, rgb(var(--hero-ink-rgb) / .25) 30%, rgb(var(--hero-ink-rgb) / 0) 42%),
        linear-gradient(90deg, #101014e8, #101014b8 24%, #10101450 44%, transparent 69%),
        linear-gradient(180deg, #10101483 0%, transparent 16%);
}
.contest-hero-inner {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(42px, 7vh, 76px);
    min-width: 0;
    padding: 24px var(--hero-gutter) 55px;
}
.contest-hero-crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; }
.contest-hero-crumbs a,
.contest-hero-crumbs span { color: #fff; text-shadow: 0 1px 4px #000; }
.contest-hero-crumbs a::after { content: '›'; margin-left: 10px; opacity: .7; }
.contest-hero-copy { align-self: center; max-width: min(680px, 55vw); }
.contest-hero-format {
    display: inline-block;
    padding: 6px 17px;
    border-radius: 24px;
    background: var(--hero-accent-light);
    color: var(--hero-on-light);
    font-size: 14px;
    font-weight: 750;
}
.contest-hero-v2 #contest-hero-title {
    margin: 14px 0 22px;
    width: auto;
    color: #fff;
    font: 760 clamp(43px, 5.1vw, 77px)/1.02 system-ui, sans-serif;
    letter-spacing: -.05em;
    text-transform: none;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 16px #0004;
}
.contest-hero-dates { margin: 0 0 21px; font-size: clamp(15px, 1.5vw, 20px); }
.contest-hero-dates i { margin-right: 6px; }
.contest-hero-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.contest-hero-stats > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 18px;
    border-right: 1px solid #ffffff45;
    font-size: 13px;
    line-height: 1.15;
}
.contest-hero-stats strong { display: block; margin-bottom: 2px; font-size: clamp(20px, 2.2vw, 31px); font-weight: 550; }
.contest-hero-stats i { font-size: clamp(17px, 2vw, 25px); }
.contest-hero-stage {
    padding: 8px 12px;
    border-radius: 9px;
    background: var(--hero-accent-dark);
    font-size: 14px;
    font-weight: 650;
}
.contest-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.contest-hero-primary,
.contest-hero-secondary,
.contest-hero-v2 .contest-hero-vote a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 49px;
    margin: 0;
    padding: 9px 17px;
    border: 1px solid #ffffff7d;
    border-radius: 9px;
    color: #fff;
    background: #17131a90;
    font: 650 15px/1.25 system-ui, sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.contest-hero-primary,
.contest-hero-v2 .contest-hero-vote a.btn {
    min-width: min(210px, 100%);
    border: 1px solid transparent !important;
    background: var(--hero-accent);
    color: var(--hero-on-accent) !important;
}
.contest-hero-primary:hover,
.contest-hero-v2 .contest-hero-vote a.btn:hover { background: var(--hero-accent-hover); }
.contest-hero-vote a.btn-lg::after { content: '→' / ''; }
.contest-hero-secondary {
    color: var(--hero-accent-light);
    border-color: var(--hero-accent-light);
}
.contest-hero-secondary:hover { color: #fff; background: var(--hero-accent-dark); }
.contest-hero-notice { margin-top: 8px; color: #eee9f4; font-size: 13px; }
.contest-hero-notice:empty, .contest-hero-share-status:empty { display: none; }
.contest-hero-share-status { margin-top: 6px; font-size: 13px; }
.contest-hero-share-url { display: block; max-width: 100%; width: 370px; margin-top: 8px; color: #18151f; }
.contest-hero-controls {
    position: absolute;
    top: 50%;
    right: var(--hero-gutter);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(-50%);
}
.contest-hero-controls button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hero-accent-light);
    border-radius: 50%;
    color: var(--hero-accent-light);
    background: #1010148f;
    font: 27px/1 system-ui, sans-serif;
    cursor: pointer;
}
.contest-hero-controls button:hover { background: #101014db; }
.contest-hero-sponsor { position: absolute; right: var(--hero-gutter); bottom: 35px; }
.contest-hero-sponsor img { max-width: min(26vw, 220px); max-height: 70px; }
.contest-hero-tabs {
    display: flex;
    gap: clamp(14px, 2.6vw, 46px);
    padding-inline: var(--hero-gutter);
    overflow-x: auto;
    background: linear-gradient(var(--hero-ink), var(--hero-surface));
    scrollbar-width: thin;
}
.contest-hero-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 58px;
    padding: 10px 3px 7px;
    border-bottom: 3px solid transparent;
    color: #eae7ef;
    font-weight: 650;
    white-space: nowrap;
}
.contest-hero-tabs a[aria-current] { color: #fff; border-bottom-color: var(--hero-accent-light); }
.contest-hero-tabs a:hover { color: #fff; }
.contest-hero-tabs .contest-hero-format-link { margin-left: auto; color: var(--hero-accent-light); }
.contest-hero-v2 :is(a, button, input):focus-visible { outline: 2px solid var(--hero-accent-light); outline-offset: 2px; }
.contest-hero-info,
.contest-hero-related { padding-inline: max(var(--hero-gutter), (100% - 1400px) / 2); }
.contest-hero-info {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: clamp(30px, 5vw, 86px);
    padding-block: clamp(24px, 3vw, 44px);
    background: linear-gradient(var(--hero-surface), var(--hero-ink) 270px);
}
.contest-hero-info-main { max-width: 88ch; }
.contest-hero-info section { overflow-wrap: anywhere; }
.contest-hero-info-main > * + *,
.contest-hero-info-side > * + * {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #ffffff25;
}
.contest-hero-info-side {
    min-width: 0;
    padding-left: clamp(20px, 3vw, 52px);
    border-left: 1px solid #ffffff30;
}
.contest-hero-facts { display: grid; gap: 12px; margin: 0; }
.contest-hero-facts > div { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.contest-hero-facts dt { font-weight: 650; }
.contest-hero-facts i { width: 24px; color: var(--hero-accent-light); }
.contest-hero-facts dd { margin: 0; color: #ded8e6; }
.contest-hero-info h2, .contest-hero-results #contest-results-title {
    width: auto;
    margin: 0 0 12px;
    color: inherit;
    font: 740 clamp(23px, 2.35vw, 34px)/1.18 system-ui, sans-serif;
    letter-spacing: -.026em;
    text-transform: none;
    text-shadow: none;
}
.contest-hero-info-side h2 { font-size: clamp(19px, 1.6vw, 24px); }
#contest-rules [style*="#ecd3fb" i] { color: #251a36; }
#contest-rules [style*="#ecd3fb" i] a { color: #4b2681; }
.contest-hero-info p { margin: 0 0 .7em; font-size: 16px; line-height: 1.55; }
.contest-hero-info img { max-width: 100%; height: auto; }
.contest-hero-info a { color: var(--hero-accent-light); }
.contest-hero-info .contest-hero-jury a { color: var(--hero-accent-light) !important; }
.contest-hero-info .contest-hero-jury .row { margin: 0 !important; }
.contest-hero-related { padding-bottom: 28px; }
.contest-hero-related > .row { margin-inline: 0; }
.contest-hero-results {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding: 18px var(--hero-gutter);
}
.contest-hero-results #contest-results-title { margin: 0; }
.contest-hero-results nav { display: flex; flex-wrap: wrap; gap: 8px; }
.contest-hero-results nav a {
    padding: 8px 12px;
    border-radius: 8px;
    color: #eee9f4;
}
.contest-hero-results nav a:hover { background: var(--hero-accent-dark); color: #fff; }
.contest-hero-results nav a[aria-current] { background: var(--hero-accent-light); color: var(--hero-on-light); }
.contest-hero-results nav a:focus-visible { outline: 2px solid var(--hero-accent-light); outline-offset: 2px; }
:is(#contest-voting, #contest-description, #contest-rules, #contest-results) { scroll-margin-top: 75px; }

@media (max-width: 700px) {
    .contest-hero-photo { min-height: 70vh; min-height: 70svh; }
    .contest-hero-inner { gap: clamp(110px, 23svh, 240px); padding: 14px var(--hero-gutter) 36px; }
    .contest-hero-frame img { object-position: center 30%; }
    .contest-hero-frame figcaption { bottom: 6px; font-size: 10px; }
    .contest-hero-shade {
        background: linear-gradient(to top, var(--hero-ink), rgb(var(--hero-ink-rgb) / .91) 18%, rgb(var(--hero-ink-rgb) / .53) 49%, rgb(var(--hero-ink-rgb) / 0) 75%),
            linear-gradient(180deg, #10101499, transparent 16%);
    }
    .contest-hero-copy { align-self: end; max-width: 100%; }
    .contest-hero-v2 #contest-hero-title { margin: 9px 0 11px; font-size: clamp(31px, 8vw, 48px); }
    .contest-hero-format { font-size: 12px; }
    .contest-hero-dates { margin-bottom: 12px; }
    .contest-hero-stats { gap: 8px 9px; }
    .contest-hero-stats > div { padding-right: 9px; gap: 6px; font-size: 11px; }
    .contest-hero-stage { padding: 6px 8px; font-size: 12px; }
    .contest-hero-actions { margin-top: 14px; }
    .contest-hero-primary, .contest-hero-vote { flex: 0 0 100%; }
    .contest-hero-v2 .contest-hero-vote a.btn-lg { width: 100%; }
    .contest-hero-controls { top: 52px; flex-direction: row; transform: none; }
    .contest-hero-controls button { width: 36px; height: 36px; }
    .contest-hero-tabs { gap: 16px; }
    .contest-hero-tabs a { min-height: 50px; font-size: 14px; }
    .contest-hero-info { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .contest-hero-info-side { padding: 20px 0 0; border: 0; border-top: 1px solid #ffffff30; }
}
