/* ==========================================================================
   Symfony AI & MCP Hackathon — application styles
   --------------------------------------------------------------------------
   Built on the Symfony AI design system tokens. The layout follows the
   editorial "lean" direction the design landed on: hairline rules instead of
   boxes, mono eyebrows, oversized display headlines, one violet accent.
   ========================================================================== */

@import url("tokens/fonts-AWmfIiq.css");
@import url("tokens/colors-MXcWvAN.css");
@import url("tokens/typography-ZRsyaWg.css");
@import url("tokens/spacing-bHNLD9U.css");
@import url("tokens/base-u_cJ7uw.css");

/* ---- Page shell -------------------------------------------------------- */

body {
    font-size: 16px;
    line-height: 1.5;
}

.hk-page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: var(--bg-page);
    color: var(--text-body);
}

.hk-main {
    flex: 1;
}

.hk-shell {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 32px;
}

/* Every screen fades in the way the prototype's screens did. */
.hk-screen {
    animation: hk-fade 0.3s ease;
    padding-block: 64px 96px;
}

.hk-screen--tight {
    padding-block: 40px 96px;
}

@keyframes hk-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hk-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes hk-shift-text {
    0% {
        color: var(--sf-violet);
    }
    25% {
        color: var(--sf-purple);
    }
    50% {
        color: var(--sf-magenta);
    }
    75% {
        color: var(--sf-blue);
    }
    100% {
        color: var(--sf-violet);
    }
}

@keyframes hk-word {
    0% {
        opacity: 0;
        transform: translateY(0.35em);
        filter: blur(6px);
    }
    12% {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
    88% {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-0.35em);
        filter: blur(6px);
    }
}

@keyframes hk-progress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* ---- Typography helpers ------------------------------------------------ */

.hk-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hk-eyebrow--accent {
    color: var(--sf-violet);
}

.hk-mono {
    font-family: var(--font-mono);
}

.hk-muted {
    color: var(--text-muted);
}

.hk-accent {
    color: var(--sf-violet);
}

.hk-title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(36px, 4.5vw, 56px);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text-strong);
    margin: 16px 0 0;
}

.hk-section-title {
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--text-strong);
    margin: 0;
}

.hk-subtitle {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: -0.02em;
    color: var(--text-strong);
    margin: 0;
}

/* ---- Header ------------------------------------------------------------ */

.hk-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg-page) 88%, transparent);
    backdrop-filter: blur(12px);
}

.hk-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 18px;
}

.hk-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hk-brand:hover {
    color: inherit;
}

.hk-brand__mark {
    height: 30px;
    display: block;
}

.hk-brand__name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--text-strong);
}

.hk-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
}

.hk-nav a:not(.hk-btn) {
    color: var(--text-body);
}
.hk-nav a:not(.hk-btn):hover {
    color: var(--sf-violet);
}
.hk-nav a.is-active:not(.hk-btn) {
    color: var(--sf-violet);
}

.hk-nav__me {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 18px;
    border-left: 1px solid var(--border-default);
}

/* ---- Avatars ----------------------------------------------------------- */

.hk-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: var(--sf-violet);
    color: #fff;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 11px;
}

.hk-avatar--xs {
    width: 22px;
    height: 22px;
    font-size: 9px;
}
.hk-avatar--sm {
    width: 28px;
    height: 28px;
    font-size: 10px;
}
.hk-avatar--md {
    width: 32px;
    height: 32px;
    font-size: 11px;
}
.hk-avatar--lg {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

.hk-avatar-stack {
    display: flex;
    padding-left: 8px;
}

.hk-avatar-stack .hk-avatar {
    border: 2px solid var(--bg-page);
    margin-left: -8px;
}

.hk-avatar-stack--sm {
    padding-left: 6px;
}
.hk-avatar-stack--sm .hk-avatar {
    margin-left: -6px;
}

/* ---- Buttons (design-system Button, as CSS) ---------------------------- */

.hk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 0.9375rem;
    line-height: 1.2;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform var(--dur-fast) var(--ease-std),
        box-shadow var(--dur-fast) var(--ease-std),
        background var(--dur-fast) var(--ease-std),
        color var(--dur-fast) var(--ease-std);
}

.hk-btn:hover {
    transform: translateY(-1px);
}

.hk-btn--sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
    gap: 0.4rem;
}
.hk-btn--lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.0625rem;
    gap: 0.6rem;
}
.hk-btn--block {
    width: 100%;
}

.hk-btn--primary {
    background: var(--sf-violet);
    color: #fff;
    border-color: var(--sf-violet);
}
.hk-btn--primary:hover {
    color: #fff;
    box-shadow: 0 6px 20px rgba(90, 85, 165, 0.4);
}

.hk-btn--dark {
    background: var(--neutral-950);
    color: #fff;
    border-color: var(--neutral-950);
}
.hk-btn--dark:hover {
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* On the dark surface the near-black CTA disappears — the design system
   prescribes the light button there instead. */
[data-theme='dark'] .hk-btn--dark {
    background: #fff;
    color: var(--neutral-950);
    border-color: #fff;
}

[data-theme='dark'] .hk-btn--dark:hover {
    color: var(--neutral-950);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.hk-btn--outline {
    background: transparent;
    color: var(--text-strong);
    border-color: var(--border-strong);
}
.hk-btn--outline:hover {
    background: var(--neutral-950);
    border-color: var(--neutral-950);
    color: #fff;
}

.hk-btn--ghost {
    background: transparent;
    color: var(--text-strong);
}
.hk-btn--ghost:hover {
    background: rgba(90, 85, 165, 0.1);
    color: var(--text-strong);
}

.hk-btn__icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
}

/* The SVG fills the box, or it keeps its intrinsic 150px height and the glyph
   sits off-center. */
.hk-btn__icon svg {
    width: 100%;
    height: 100%;
}

/* ---- Tags / filters / badges ------------------------------------------- */

.hk-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1;
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-body);
    border: 1px solid var(--border-default);
    cursor: pointer;
    transition:
        border-color var(--dur-fast) var(--ease-std),
        background var(--dur-fast) var(--ease-std),
        color var(--dur-fast) var(--ease-std);
}

.hk-tag:hover {
    border-color: var(--link);
    color: var(--text-body);
}

.hk-tag.is-active {
    background: var(--sf-violet);
    color: #fff;
    border-color: transparent;
}

.hk-tag.is-active:hover {
    color: #fff;
}

.hk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
    padding: 0.18em 0.6em;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    background: var(--bg-secondary);
    color: var(--text-body);
    border: 1px solid var(--border-subtle);
}

.hk-badge--sm {
    font-size: 0.625rem;
    padding: 0.1em 0.5em;
}
.hk-badge--solid {
    background: var(--sf-violet);
    color: #fff;
    border-color: transparent;
}
.hk-badge--success {
    background: rgba(28, 165, 116, 0.14);
    color: var(--success);
    border-color: transparent;
}
.hk-badge--warning {
    background: rgba(217, 119, 6, 0.14);
    color: var(--warning);
    border-color: transparent;
}

/* A project's tags: free text, so a small pill keeps "Deep Research" in one piece. */
.hk-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.65em;
    font-size: 12px;
    line-height: 1.4;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--sf-violet), transparent 88%);
    color: var(--sf-violet);
}

.hk-chip--lg {
    font-size: 13px;
}

/* ---- Tag input (Tom Select) ----------------------------------------------
   Restyled to match .hk-field inputs; the selected tags render as chips. */

.hk-field .ts-wrapper.multi .ts-control {
    min-height: 44px;
    padding: 0.4rem 0.5rem;
    gap: 6px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--text-strong);
}

.hk-field .ts-wrapper.focus .ts-control {
    border-color: var(--sf-accent);
    box-shadow: var(--shadow-focus);
}

.hk-field .ts-wrapper.multi .ts-control > input {
    min-width: 8rem;
    padding: 0.2rem 0.35rem !important;
    color: var(--text-strong);
}

.hk-field .ts-wrapper.multi .ts-control > div.item {
    margin: 0;
    padding: 0.2em 0.3em 0.2em 0.7em;
    font-size: 0.82rem;
    line-height: 1.4;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--sf-violet);
    color: #fff;
}

.hk-field .ts-wrapper.plugin-remove_button .item .remove {
    margin-left: 4px;
    padding: 0 0.4em;
    border: 0;
    border-radius: var(--radius-pill);
    color: inherit;
    opacity: 0.75;
}

.hk-field .ts-wrapper.plugin-remove_button .item .remove:hover {
    background: rgba(255, 255, 255, 0.18);
    opacity: 1;
}

.hk-field .ts-dropdown {
    margin-top: 6px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-body);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.hk-field .ts-dropdown .option,
.hk-field .ts-dropdown .create,
.hk-field .ts-dropdown .no-results {
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
}

.hk-field .ts-dropdown .active {
    background: color-mix(in oklch, var(--sf-violet), transparent 88%);
    color: var(--text-strong);
}

.hk-field .ts-dropdown .create strong {
    color: var(--sf-violet);
}

.hk-field .ts-dropdown .highlight {
    background: none;
    color: var(--sf-violet);
    font-weight: var(--weight-semibold);
}

/* ---- Callout ----------------------------------------------------------- */

.hk-callout {
    border-left: 3px solid var(--success);
    background: var(--bg-secondary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-body);
}

.hk-callout__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    color: var(--success);
    margin-bottom: 0.2rem;
}

/* ---- Forms ------------------------------------------------------------- */

.hk-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hk-field label,
.hk-label {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 0.8125rem;
    color: var(--text-strong);
}

.hk-field input[type='text'],
.hk-field input[type='url'],
.hk-field input[type='email'] {
    width: 100%;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--text-strong);
    outline: none;
    transition:
        border-color var(--dur-fast),
        box-shadow var(--dur-fast);
}

.hk-field input:focus {
    border-color: var(--sf-accent);
    box-shadow: var(--shadow-focus);
}

.hk-field--mono input {
    font-family: var(--font-mono);
}

.hk-field--invalid input {
    border-color: var(--danger);
}

.hk-field__hint {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.hk-field__error {
    font-size: 0.78rem;
    color: var(--danger);
}

.hk-textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--text-strong);
    resize: vertical;
    outline: none;
}

.hk-textarea:focus {
    border-color: var(--sf-accent);
    box-shadow: var(--shadow-focus);
}

.hk-textarea--round {
    border-radius: 12px;
}

/* ---- Rules and hairline lists ------------------------------------------ */

.hk-rule-top {
    border-top: 1px solid var(--border-default);
}
.hk-hairline {
    border-top: 1px solid var(--border-subtle);
}

.hk-divider-gradient {
    height: 1px;
    background: linear-gradient(90deg, var(--border-default), var(--sf-accent), transparent);
}

/* ---- Landing: hero ----------------------------------------------------- */

.hk-hero {
    padding-block: 72px 0;
}

.hk-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hk-hero__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
}

.hk-hero__headline {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(48px, 7.5vw, 104px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--text-strong);
    margin: 28px 0 0;
    max-width: 14ch;
    text-wrap: balance;
}

/* The verb cycles think → act → chat → AI while shifting through the spectrum. */
.hk-hero__word {
    display: inline-block;
    color: var(--sf-violet);
    animation: hk-shift-text 60s ease-in-out infinite;
}

.hk-hero__word span {
    display: inline-block;
    animation: hk-word 2.5s ease both;
}

.hk-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: end;
    margin-top: 44px;
}

.hk-hero__lead {
    font-size: 20px;
    line-height: 1.5;
    color: var(--text-body);
    margin: 0;
    max-width: 36ch;
    text-wrap: pretty;
}

.hk-hero__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ---- Landing: countdown strip ------------------------------------------ */

.hk-countdown {
    margin-top: 72px;
}

.hk-countdown__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
}

.hk-countdown__cell {
    padding: 28px 0 26px;
    border-right: 1px solid var(--border-subtle);
}

.hk-countdown__cell + .hk-countdown__cell {
    padding-left: 28px;
}
.hk-countdown__cell:last-child {
    border-right: 0;
}

.hk-countdown__value {
    font-family: var(--font-mono);
    font-size: clamp(48px, 7vw, 96px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.hk-countdown__cell:last-child .hk-countdown__value {
    color: var(--sf-violet);
}

.hk-countdown__label {
    margin-top: 12px;
}

/* ---- Landing: marquee -------------------------------------------------- */

.hk-marquee {
    margin-top: 56px;
    overflow: hidden;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding-block: 14px;
}

.hk-marquee__inner {
    display: flex;
    align-items: center;
}

.hk-marquee__label {
    flex: none;
    padding-right: 24px;
    border-right: 1px solid var(--border-default);
    margin-right: 24px;
}

.hk-marquee__viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.hk-marquee__track {
    display: flex;
    gap: 10px;
    width: max-content;
    animation: hk-marquee 40s linear infinite;
}

.hk-marquee__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    font-size: 13px;
    color: var(--text-strong);
    white-space: nowrap;
}

/* ---- Landing: criteria ------------------------------------------------- */

.hk-band {
    padding-block: 88px 0;
}

.hk-band__head {
    text-align: center;
}

.hk-band__head h2 {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.5vw, 44px);
    letter-spacing: -0.025em;
    color: var(--text-strong);
    margin: 0;
}

/* The design system's heading underline sits flush left; centre it under a centred heading. */
.hk-band__head .sf-heading-accent::after {
    left: 50%;
    translate: -50% 0;
}

.hk-band__head p {
    font-size: 16px;
    color: var(--text-muted);
    margin: 12px auto 0;
}

/* The sunken cards darken very slightly towards the bottom, and on hover take
   the design system's card lift: 2px up plus the violet-tinted shadow. The
   prize cards share the lift, but sit raised on white instead. */
.hk-issue-cta,
.hk-promo {
    background: linear-gradient(180deg, var(--surface-sunken) 35%, color-mix(in oklch, var(--surface-sunken), black 4%));
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

.hk-prize {
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

.hk-prize:hover,
.hk-issue-cta:hover,
.hk-promo:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklch, var(--sf-violet), transparent 75%);
}

@media (prefers-reduced-motion: reduce) {
    .hk-issue-cta:hover,
    .hk-promo:hover {
        transform: none;
    }
}

/* The prize cards also grow a little, as the one thing on the page to covet,
   lifting off whatever pedestal they stand on. */
.hk-prize:hover {
    transform: translateY(calc(-1 * var(--rise) - 4px)) scale(1.03);
    box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
    .hk-prize:hover {
        transform: translateY(calc(-1 * var(--rise)));
    }
}

.hk-criteria {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 32px;
    margin-top: 40px;
}

/* Open columns under a rule rather than boxes, so the page isn't all cards;
   the rule turns violet under the pointer. */
.hk-criterion {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    border-top: 2px solid var(--border-subtle);
    transition: border-color var(--dur-base) var(--ease-out);
}

.hk-criterion:hover {
    border-top-color: var(--sf-violet);
}

.hk-criterion__num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--sf-violet);
}

.hk-criterion__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-strong);
    margin-top: 28px;
    text-wrap: balance;
}

.hk-criterion__text {
    font-size: 14px;
    color: var(--text-muted);
    margin: 12px 0 0;
    line-height: 1.55;
    text-wrap: pretty;
}

/* ---- Two-column editorial rows (brief / jury / sponsors) --------------- */

.hk-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 40px;
    align-items: start;
}

/* Heading on top, content at full width underneath. */
.hk-split--rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.hk-brief {
    margin: 0;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    column-gap: 32px;
    font-size: 16px;
}

.hk-brief dt,
.hk-brief dd {
    padding-block: 18px;
    border-top: 1px solid var(--border-subtle);
    margin: 0;
}

.hk-brief dt {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hk-brief dd {
    color: var(--text-strong);
}

.hk-brief dt:last-of-type,
.hk-brief dd:last-of-type {
    border-bottom: 1px solid var(--border-subtle);
}

.hk-brief code {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--sf-violet);
}

.hk-prizes-stack {
    display: grid;
}

/* The cards stand on a podium: the sponsor banners right below are the floor,
   and a pedestal under each card is lower the further down the ranking it is,
   so 1st stands highest and 4th just above the floor. The top margin leaves
   room for the highest card and for the rank circles on the cards' top edge. */
.hk-prizes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 114px;
}

/* The pedestals sit 8px in from the cards' edges, so the floor's top corners
   round off by just that much and end where the outer pedestals begin; its
   bottom corners match. */
.hk-prizes + .hk-banners > .hk-banner:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.hk-prizes + .hk-banners > .hk-banner:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.hk-prize-slot {
    --rise: 0px;
    position: relative;
    display: flex;
}

/* Down the ranking, the pedestal gets lower and the rank's violet lighter. */
.hk-prize-slot:nth-child(1) {
    --rise: 78px;
    --rank-violet: 100%;
}
.hk-prize-slot:nth-child(2) {
    --rise: 56px;
    --rank-violet: 89%;
}
.hk-prize-slot:nth-child(3) {
    --rise: 34px;
    --rank-violet: 78%;
}
.hk-prize-slot:nth-child(4) {
    --rise: 12px;
    --rank-violet: 68%;
}

.hk-prize-slot::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: calc(var(--rise) + 24px);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: linear-gradient(180deg, color-mix(in oklch, var(--sf-violet), transparent 55%), color-mix(in oklch, var(--sf-violet), transparent 82%));
}

/* A sponsor's perk as a wide banner in the sponsor's own colours: the artwork
   stays calm on the left for the text and in the top right corner for the logo.
   It looks the same in both themes, so each sponsor sets its own ink. */
.hk-banner {
    --banner-ink: #fff;
    --banner-muted: rgba(255, 255, 255, 0.8);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    min-height: 160px;
    padding: 24px 30px;
    border-radius: var(--radius-xl);
    background: var(--banner-bg) var(--banner-art) right top / cover no-repeat;
    color: var(--banner-ink);
    text-decoration: none;
    overflow: hidden;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.hk-banner:hover {
    color: var(--banner-ink);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
    .hk-banner:hover {
        transform: none;
    }
}

/* The sponsor banners stack into one block: no gap between them, and only the
   block's outer corners are rounded. */
.hk-banners {
    display: grid;
}

.hk-banners > .hk-banner:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}

.hk-banners > .hk-banner:not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* JetBrains: what all three places win, said once above them. */
.hk-banner--jetbrains {
    --banner-bg: #05000c;
    --banner-art: url("../images/banners/jetbrains-art-Diq-sRs.svg");
    --banner-fade: rgba(5, 0, 12, 0.75);
}

/* Hugging Face: the inference credits every developer gets. */
.hk-banner--hugging-face {
    --banner-bg: #fffaea;
    --banner-art: url("../images/banners/hugging-face-art-kIwFe3u.svg");
    --banner-fade: rgba(255, 250, 234, 0.85);
    --banner-ink: #1a1203;
    --banner-muted: rgba(26, 18, 3, 0.72);
    border: 1px solid #ffe8a3;
}

/* The logo file carries ~10px of empty space on its right at this size, so it
   sits that much closer to the edge to line up with the JetBrains logo. */
.hk-banner--hugging-face .hk-banner__logo {
    top: 16px;
    right: 16px;
    height: 46px;
}

.hk-banner__logo {
    position: absolute;
    top: 22px;
    right: 26px;
    width: auto;
    height: 28px;
}

.hk-banner__eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--banner-muted);
}

.hk-banner__title {
    max-width: 22ch;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 26px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.hk-banner__body {
    font-size: 14px;
    color: var(--banner-muted);
}

.hk-prize {
    position: relative;
    z-index: 1;
    flex: 1;
    transform: translateY(calc(-1 * var(--rise)));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 0 22px 26px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    text-align: center;
}

/* The rank sits in a circle centred on the card's top edge. */
.hk-prize__rank {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: -32px 0 14px;
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--sf-violet) var(--rank-violet, 100%), white);
    box-shadow: 0 0 0 6px var(--bg-page);
    color: #fff;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 30px;
    line-height: 1;
}

.hk-prize__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: 14px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.hk-prize__name {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 17px;
    letter-spacing: -0.01em;
}

.hk-prize__detail {
    font-size: 14px;
}

/* Who gives the prize, at the foot of the card, lined up across all three. */
/* The logo gets a fixed-height row, so the labels line up whatever its shape. */
.hk-prize__sponsor {
    display: grid;
    grid-template-rows: auto 26px;
    justify-items: center;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    text-decoration: none;
}

.hk-prize__sponsor-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hk-prize__sponsor-logo {
    width: auto;
    height: 24px;
}

/* The logos differ wildly in shape, so each gets the height that gives it about
   the same area as the others: a long wordmark goes lower, and Sulu's hairline
   strokes a touch larger to carry the same weight. */
.hk-prize__sponsor-logo[alt='Private Packagist'] {
    height: 15px;
}
.hk-prize__sponsor-logo[alt='SensioLabs'] {
    height: 19px;
}
.hk-prize__sponsor-logo[alt='Sulu'] {
    height: 26px;
}

[data-theme='dark'] .hk-prize__sponsor-logo {
    filter: grayscale(1) invert(1);
}

.hk-jury {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* Portraits straight on the page, no box around them. */
.hk-juror {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    text-align: center;
}

.hk-juror__photos {
    display: flex;
    flex: none;
}

.hk-juror__photo {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: linear-gradient(135deg, var(--violet-100), var(--violet-300));
    box-shadow: 0 0 0 3px var(--surface-sunken);
}

/* The photos link to the same websites as the names, but keyboard and screen
   reader users get each link once, on the name. */
.hk-juror__photo-link {
    position: relative;
    display: block;
    transition: transform var(--dur-base) var(--ease-out);
}

/* The face under the pointer grows and, in a duo, comes out on top. */
.hk-juror__photo-link:hover {
    z-index: 1;
    transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
    .hk-juror__photo-link:hover {
        transform: none;
    }
}

/* A duo shares one seat: the second photo tucks slightly under the first. */
.hk-juror__photo-link + .hk-juror__photo-link {
    margin-left: -8px;
}

.hk-juror__name {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 16px;
    color: var(--text-strong);
}

.hk-juror__link {
    color: inherit;
    text-decoration: none;
}

.hk-juror__link:hover {
    color: var(--sf-violet);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hk-sponsors {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}

.hk-sponsor {
    height: 96px;
    padding: 0 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.hk-sponsor:hover {
    border-color: color-mix(in oklch, var(--sf-violet), transparent 75%);
    box-shadow: var(--shadow-md);
}

/* Logos sit quietly in grey and take their own colours on hover. In dark mode
   they stay monochrome, inverted, since most of them are dark wordmarks. */
.hk-sponsor__logo {
    max-width: 100%;
    max-height: 40px;
    filter: grayscale(1);
    opacity: 0.75;
    transition:
        filter var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
}

.hk-sponsor:hover .hk-sponsor__logo {
    filter: none;
    opacity: 1;
}

[data-theme='dark'] .hk-sponsor__logo,
[data-theme='dark'] .hk-sponsor:hover .hk-sponsor__logo {
    filter: grayscale(1) invert(1);
}

/* ---- Landing: "break it before 1.0" ------------------------------------ */

.hk-stabilize__lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-strong);
    margin: 0;
    text-wrap: pretty;
}

.hk-stabilize__body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 16px 0 0;
    text-wrap: pretty;
}

.hk-issue-ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.hk-issue-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
}

.hk-issue-cta__url {
    font-size: 15px;
    color: var(--text-strong);
    margin-top: 6px;
    word-break: break-all;
}

/* ---- Landing: closing -------------------------------------------------- */

.hk-closing {
    padding-block: 112px 0;
}

.hk-closing__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-default);
    padding-bottom: 40px;
}

.hk-closing h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(36px, 5vw, 64px);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text-strong);
    margin: 0;
}

/* ---- Showcase (post-event) --------------------------------------------- */

.hk-showcase {
    margin-top: 72px;
}

.hk-showcase__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--border-default);
    padding-top: 20px;
}

.hk-showcase__body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 32px;
    margin-top: 24px;
    align-items: stretch;
}

.hk-showcase__queue {
    display: flex;
    flex-direction: column;
}

.hk-showcase__item {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding-block: 14px;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    background: transparent;
    cursor: pointer;
    color: inherit;
    width: 100%;
}

.hk-showcase__num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    width: 24px;
}

.hk-showcase__item.is-current .hk-showcase__num {
    color: var(--sf-violet);
}

.hk-showcase__title {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 15px;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Video art (the gradient covers) ----------------------------------- */

.hk-art {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--code-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
}

.hk-art--feature {
    border-radius: var(--radius-xl);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 20px 60px rgba(90, 85, 165, 0.2);
}

.hk-art--thumb {
    border-radius: var(--radius-md);
}

.hk-art::before {
    content: '';
    position: absolute;
    inset: 0;
}

.hk-art--0::before {
    background: radial-gradient(500px 260px at 15% 100%, rgba(219, 39, 119, 0.45), transparent 70%), radial-gradient(400px 260px at 90% 0%, rgba(127, 91, 255, 0.45), transparent 70%);
}

.hk-art--1::before {
    background: radial-gradient(500px 260px at 85% 100%, rgba(29, 78, 216, 0.5), transparent 70%), radial-gradient(400px 260px at 10% 0%, rgba(90, 85, 165, 0.6), transparent 70%);
}

.hk-art--2::before {
    background: radial-gradient(500px 260px at 50% 120%, rgba(76, 29, 149, 0.7), transparent 70%), radial-gradient(400px 260px at 100% 0%, rgba(219, 39, 119, 0.35), transparent 70%);
}

.hk-art--3::before {
    background: radial-gradient(500px 260px at 0% 50%, rgba(127, 91, 255, 0.5), transparent 70%), radial-gradient(400px 260px at 100% 100%, rgba(28, 165, 116, 0.35), transparent 70%);
}

.hk-art__play {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
}

.hk-art__play--sm {
    width: auto;
    height: auto;
    background: none;
    border: 0;
    backdrop-filter: none;
    font-size: 20px;
}

.hk-art__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 28px;
    background: linear-gradient(180deg, transparent, rgba(21, 16, 40, 0.9));
    color: #fff;
}

.hk-art__caption > * {
    display: block;
}

.hk-art__caption-title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 26px;
    letter-spacing: -0.02em;
    margin-top: 6px;
}

.hk-art__duration {
    position: absolute;
    right: 16px;
    bottom: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 3px 8px;
    border-radius: var(--radius-xs);
}

.hk-art__empty {
    position: relative;
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hk-art__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
}

.hk-art__progress i {
    display: block;
    height: 100%;
    background: #fff;
    animation: hk-progress 8s linear;
}

/* ---- Team screen ------------------------------------------------------- */

.hk-team-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    margin-top: 56px;
    border-top: 1px solid var(--border-default);
    padding-top: 36px;
}

/* Solo-only: one column, but the hairline above still spans the page. */
.hk-team-choice--single {
    grid-template-columns: minmax(0, 520px);
}

.hk-team-choice h2 {
    margin: 8px 0 6px;
}

.hk-team-choice p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 22px;
}

/* ---- Project form ------------------------------------------------------ */

.hk-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 40px;
    margin-top: 56px;
    border-top: 1px solid var(--border-default);
    padding-top: 36px;
    align-items: start;
}

.hk-form-aside {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: 96px;
}

.hk-form-fields {
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: 640px;
}

.hk-form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.hk-aside-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 10px 0 0;
}

.hk-aside-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    margin-right: 16px;
    font-size: 13px;
    color: var(--sf-violet);
}

.hk-aside-link:hover {
    color: var(--link-hover);
}

/* ---- Projects listing -------------------------------------------------- */

.hk-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.hk-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-default);
    align-items: center;
}

.hk-tag__count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.hk-tag.is-active .hk-tag__count {
    color: rgba(255, 255, 255, 0.7);
}

.hk-tag-search input {
    width: 150px;
    padding: 0.4rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1;
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-strong);
    border: 1px dashed var(--border-strong);
    outline: none;
    transition:
        border-color var(--dur-fast) var(--ease-std),
        box-shadow var(--dur-fast) var(--ease-std);
}

.hk-tag-search input::placeholder {
    color: var(--text-muted);
}

.hk-tag-search input:focus {
    border-style: solid;
    border-color: var(--sf-accent);
    box-shadow: var(--shadow-focus);
    width: 190px;
}

.hk-project-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) auto;
    gap: 28px;
    padding-block: 24px;
    border-top: 1px solid var(--border-subtle);
    align-items: start;
}

.hk-project-row__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 24px;
    letter-spacing: -0.02em;
    color: var(--text-strong);
}

.hk-project-row__team {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.hk-project-row__desc {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.55;
    margin: 10px 0 0;
    max-width: 62ch;
    text-wrap: pretty;
}

.hk-project-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.hk-project-row__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.hk-empty {
    padding: 48px 0;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 15px;
}

/* ---- Reactions --------------------------------------------------------- */

.hk-reactions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 260px;
}

.hk-reactions--bar {
    justify-content: flex-start;
    max-width: none;
    align-items: center;
    margin-top: 28px;
    padding-block: 18px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.hk-reaction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-strong);
    transition: transform 0.15s;
}

.hk-reaction:hover {
    transform: translateY(-1px);
}

.hk-reaction.is-mine {
    background: var(--violet-50);
    border-color: var(--sf-violet);
}

.hk-reaction__emoji {
    font-size: 15px;
    line-height: 1;
}
.hk-reaction__count {
    font-variant-numeric: tabular-nums;
}

.hk-reactions--bar .hk-reaction {
    padding: 8px 14px;
    font-size: 14px;
    gap: 8px;
}
.hk-reactions--bar .hk-reaction__emoji {
    font-size: 18px;
}
.hk-reactions--bar .hk-reaction__count {
    font-weight: var(--weight-semibold);
}

/* ---- Project detail ---------------------------------------------------- */

.hk-detail {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 48px;
    margin-top: 28px;
    align-items: start;
}

.hk-detail__lead {
    font-size: 18px;
    color: var(--text-body);
    line-height: 1.6;
    margin: 20px 0 0;
    max-width: 62ch;
    text-wrap: pretty;
}

.hk-detail__aside {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
}

.hk-detail__aside-block {
    padding-block: 20px;
    border-top: 1px solid var(--border-subtle);
}

.hk-detail__aside-block:first-child {
    padding-top: 0;
    border-top: 0;
}

.hk-detail__aside-block:last-child {
    border-bottom: 1px solid var(--border-subtle);
}

.hk-detail__team-name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--text-strong);
    margin-top: 8px;
}

.hk-repo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-strong);
    word-break: break-all;
}

.hk-comment {
    display: flex;
    gap: 14px;
    padding-block: 18px;
    border-top: 1px solid var(--border-subtle);
}

.hk-comment__head {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.hk-comment__author {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 14px;
    color: var(--text-strong);
}

.hk-comment__text {
    font-size: 15px;
    line-height: 1.6;
    margin: 4px 0 0;
    color: var(--text-body);
    white-space: pre-line;
}

.hk-comment-form {
    display: flex;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
}

/* ---- Dashboard --------------------------------------------------------- */

.hk-dashboard-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.hk-dashboard-clock {
    font-family: var(--font-mono);
    font-size: 32px;
    letter-spacing: -0.03em;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
}

.hk-dashboard-clock small {
    color: var(--text-muted);
    font-size: 16px;
}

/* The Hugging Face coupon card. */
.hk-promo {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px 16px;
    padding: 20px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    color: inherit;
    text-decoration: none;
}

.hk-promo__logo {
    width: 44px;
    height: auto;
}

.hk-promo__title {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 17px;
    line-height: 1.3;
    color: var(--text-strong);
}

.hk-promo__body {
    grid-column: 1 / -1;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.hk-promo__cta {
    grid-column: 1 / -1;
    justify-content: center;
}

/* Reactions, bug reporting and the coupon share one row under the dashboard;
   the coupon lines up with the members column above it. */
.hk-dashboard-extras {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border-default);
}

.hk-dashboard-extras__info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

@media (max-width: 860px) {
    .hk-dashboard-extras {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

@media (max-width: 640px) {
    .hk-dashboard-extras__info {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hk-dashboard-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 48px;
    margin-top: 48px;
    border-top: 1px solid var(--border-default);
    padding-top: 32px;
    align-items: start;
}

.hk-check {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 16px;
    border-top: 1px solid var(--border-subtle);
}

.hk-check__mark {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-300);
    color: #fff;
    font-size: 12px;
}

.hk-check.is-done .hk-check__mark {
    background: var(--success);
}

.hk-check__label {
    width: 160px;
    flex: none;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 15px;
    color: var(--text-strong);
}

.hk-check__value {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hk-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 12px;
    border-top: 1px solid var(--border-subtle);
}

.hk-member__name {
    font-size: 14px;
    color: var(--text-strong);
    font-weight: var(--weight-semibold);
}

.hk-invite {
    margin-top: 12px;
    padding-block: 16px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hk-invite__code {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--text-strong);
    margin-top: 4px;
}

/* ---- Footer ------------------------------------------------------------ */

.hk-footer {
    padding-block: 20px 40px;
}

.hk-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
    font-size: 13px;
    color: var(--text-muted);
}

.hk-footer__plain {
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--weight-regular);
    color: var(--text-muted);
    background: none;
    border: 0;
}

.hk-footer__plain:hover {
    background: none;
    color: var(--sf-violet);
    transform: none;
}

.hk-footer__links {
    display: flex;
    gap: 18px;
}

/* ---- Connect dialog ---------------------------------------------------- */

.hk-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: hk-fade 0.2s ease;
    border: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

.hk-modal[open] {
    display: flex;
}

.hk-modal::backdrop {
    background: transparent;
}

.hk-modal__card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    color: oklch(28% 0.01 264.531);
}

.hk-modal__head {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sf-violet);
    font-size: 36px;
}

.hk-modal__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 18px;
    color: oklch(14.5% 0 0);
}

.hk-modal__host {
    font-family: var(--font-mono);
    font-size: 12px;
    color: oklch(50% 0.012 264.531);
}

.hk-modal__card p {
    font-size: 15px;
    line-height: 1.55;
    margin: 22px 0 0;
}

.hk-modal__card ul {
    margin: 12px 0 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.8;
}

.hk-modal__actions {
    display: flex;
    gap: 10px;
    margin-top: 26px;
}

/* ---- Utilities --------------------------------------------------------- */

.hk-stack-sm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hk-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hk-row--between {
    justify-content: space-between;
}
.hk-row--wrap {
    flex-wrap: wrap;
}
.hk-push {
    margin-left: auto;
}
.hk-mt-1 {
    margin-top: 6px;
}
.hk-mt-2 {
    margin-top: 10px;
}
.hk-mt-3 {
    margin-top: 12px;
}
.hk-mt-4 {
    margin-top: 20px;
}
.hk-mt-5 {
    margin-top: 24px;
}
.hk-mt-6 {
    margin-top: 28px;
}
.hk-mt-8 {
    margin-top: 40px;
}
.hk-mt-10 {
    margin-top: 48px;
}
.hk-mt-12 {
    margin-top: 56px;
}
.hk-mt-16 {
    margin-top: 80px;
}
.hk-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1000px) {
    .hk-criteria {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hk-sponsors {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .hk-prizes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 48px;
        margin: 36px 0 28px;
    }
    .hk-prizes + .hk-banners > .hk-banner:first-child {
        border-top-left-radius: var(--radius-xl);
        border-top-right-radius: var(--radius-xl);
    }
    .hk-prizes + .hk-banners > .hk-banner:last-child {
        border-bottom-left-radius: var(--radius-xl);
        border-bottom-right-radius: var(--radius-xl);
    }
    .hk-prize-slot {
        --rise: 0px !important;
    }
    .hk-prize-slot::after {
        display: none;
    }
    .hk-issue-ctas {
        grid-template-columns: minmax(0, 1fr);
    }
    .hk-showcase__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .hk-shell {
        padding-inline: 20px;
    }
    .hk-nav {
        gap: 14px;
        font-size: 13px;
    }
    .hk-hero__body,
    .hk-split,
    .hk-detail,
    .hk-dashboard-body,
    .hk-form-layout,
    .hk-team-choice {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .hk-hero__actions {
        justify-content: flex-start;
    }
    .hk-form-aside,
    .hk-detail__aside {
        position: static;
    }
    .hk-project-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .hk-project-row__side {
        align-items: flex-start;
    }
    .hk-reactions {
        justify-content: flex-start;
        max-width: none;
    }
    .hk-countdown__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hk-countdown__cell:nth-child(2) {
        border-right: 0;
    }
    .hk-countdown__cell:nth-child(odd) {
        padding-left: 0;
    }
    .hk-sponsors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hk-criteria,
    .hk-jury {
        grid-template-columns: minmax(0, 1fr);
    }
    .hk-prizes {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
    }
    .hk-banner {
        justify-content: flex-start;
        min-height: 0;
        padding: 22px;
        background-image: linear-gradient(90deg, var(--banner-fade), transparent), var(--banner-art);
    }
    .hk-banner__logo {
        position: static;
        align-self: flex-start;
        height: 22px;
        margin-bottom: 14px;
    }
    .hk-banner__title {
        font-size: 21px;
    }
    .hk-brief {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }
    .hk-brief dd {
        border-top: 0;
        padding-top: 0;
    }
    .hk-check__label {
        width: auto;
    }
    .hk-nav__list-secondary {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hk-marquee__track,
    .hk-hero__word,
    .hk-hero__word span,
    .hk-art__progress i {
        animation: none !important;
    }
    .hk-screen {
        animation: none;
    }
}