/* ==========================================================================
   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);
    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. */
.hk-prize:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--shadow-lg);
}

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

.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;
}

/* ---- Featured projects -------------------------------------------------- */

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

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

.hk-featured__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.hk-featured__card > .hk-art {
    align-self: stretch;
    margin-bottom: 8px;
}

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

.hk-featured__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 2px 0 4px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-body);
}

/* ---- 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;
    gap: 12px;
}

/* Two groups side by side, sized so that all five cards come out equally wide
   and line up: the second column is one card, out of the width left after the
   three gaps between the jury's cards and the 32px between the groups. */
.hk-prizes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc((100% - 68px) / 5);
    gap: 32px;
}

.hk-prize-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hk-prize-group__title {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-default);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 16px;
    color: var(--text-strong);
}

.hk-prize-group__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1;
    gap: 12px;
    padding-top: 16px;
}

.hk-prize-group--podium .hk-prize-group__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 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: 200px;
    padding: 64px 30px 24px;
    border-radius: var(--radius-xl);
    background:
        linear-gradient(90deg, var(--banner-fade), var(--banner-fade) 50%, transparent),
        var(--banner-art) right top / cover no-repeat,
        var(--banner-bg);
    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;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 12px;
}

/* 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 wordmark is light next to the mascot, so it runs a little taller. */
.hk-banner--hugging-face .hk-banner__logo {
    height: 32px;
}

.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;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-default);
}

/* The rank sits in a circle centred on the card's top edge. */
.hk-prize__rank {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--sf-violet);
    color: #fff;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 22px;
    line-height: 1;
}

.hk-prize__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

/* The Core Team's pick has no product to photograph, so a voucher in Upsun's
   lime takes the photo's place. It looks the same in both themes. */
.hk-prize--pick .hk-prize__rank {
    background: #0c0f10;
    color: #d0f302;
}

.hk-prize__voucher {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    background: #d0f302 url("../images/banners/upsun-art-y-LZBor.svg") center bottom / 100% auto no-repeat;
    color: #0c0f10;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 34px;
    letter-spacing: -0.02em;
    padding: 44px 0 40%;
}

.hk-prize__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 16px;
}

.hk-prize__name {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 17px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-strong);
}

.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: start;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-subtle);
    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;
    max-width: 100%;
    height: 24px;
    object-fit: contain;
}

/* 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: 18px;
}
.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);
}

/* Its light green half would turn dark when inverted and disappear. */
[data-theme='dark'] .hk-prize__sponsor-logo[alt='SensioLabs'] {
    filter: brightness(0) invert(1);
}

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

/* Three seats a row on a six-column track, so a row of two can sit centred. */
.hk-jury > .hk-juror {
    grid-column: span 2;
}

.hk-jury > .hk-juror:nth-child(3n + 1):nth-last-child(2) {
    grid-column: 2 / span 2;
}

/* 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(4, 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:
        background-color var(--dur-base) var(--ease-out),
        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 rest monochrome, inverted, since most of them are dark wordmarks; on
   hover the card lights up so they can show their colours there too. */
.hk-sponsor__logo {
    width: auto;
    max-width: 100%;
    height: 38px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.9;
    transition:
        filter var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
}

/* As on the prize cards, each logo gets the height that gives it about the
   same area as the others, so a long wordmark goes lower and a compact one
   higher; Sulu's hairline strokes run a touch larger to carry the same weight. */
.hk-sponsor__logo[alt='Sulu'] {
    height: 42px;
}
.hk-sponsor__logo[alt='Upsun'],
.hk-sponsor__logo[alt='Private Packagist'],
.hk-sponsor__logo[alt='JetBrains'] {
    height: 36px;
}
.hk-sponsor__logo[alt='Hugging Face'] {
    height: 34px;
}
.hk-sponsor__logo[alt='SensioLabs'],
.hk-sponsor__logo[alt='baksla.sh'] {
    height: 29px;
}

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

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

[data-theme='dark'] .hk-sponsor:hover {
    background-color: #fff;
    border-color: #fff;
}

[data-theme='dark'] .hk-sponsor:hover .hk-sponsor__logo {
    filter: none;
}

/* ---- 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%);
}

/* A YouTube or Vimeo preview covers the artwork, dimmed a little so the
   white play button stays readable on bright frames. */
.hk-art__thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    transition: filter var(--dur-base) var(--ease-out);
}

a.hk-art:hover .hk-art__thumbnail {
    filter: brightness(0.95);
}

.hk-art__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.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: 32px;
}

.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: clamp(200px, 30vw, 420px) minmax(0, 1fr);
    gap: 14px 28px;
    padding-block: 24px;
    border-top: 1px solid var(--border-subtle);
    align-items: start;
}

.hk-project-row > .hk-art {
    grid-row: span 2;
}

.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;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.hk-project-row__repo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.hk-project-row__repo:hover {
    color: var(--text-strong);
}

.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;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.hk-project-row__desc.is-expanded {
    display: block;
}

.hk-project-row__more {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.hk-project-row__more:hover {
    color: var(--text-strong);
}

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

.hk-project-row__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.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;
}

.hk-reactions--bar {
    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__update {
    grid-column: 1 / -1;
}

.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;
    flex-wrap: wrap;
    gap: 8px 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-featured {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hk-prizes {
        grid-template-columns: minmax(0, 1fr);
    }
    .hk-prize-group__cards,
    .hk-prize-group--podium .hk-prize-group__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .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 > .hk-art {
        grid-row: auto;
    }
    .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-featured {
        grid-template-columns: minmax(0, 1fr);
    }
    .hk-criteria,
    .hk-jury {
        grid-template-columns: minmax(0, 1fr);
    }
    .hk-jury > .hk-juror,
    .hk-jury > .hk-juror:nth-child(3n + 1):nth-last-child(2) {
        grid-column: auto;
    }
    .hk-prize-group__cards,
    .hk-prize-group--podium .hk-prize-group__cards {
        grid-template-columns: minmax(0, 1fr);
    }
    .hk-banner {
        justify-content: flex-start;
        min-height: 0;
        padding: 22px;
    }
    .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;
    }
}