/* ==========================================================================
   Danger Aware Contests — Modern theme
   ==========================================================================

   Applies the design system from CentralPlatform.ModernDangerAware.Web
   (Fredoka display / Poppins body, teal + amber + pink) to this host.

   This loads LAST, after bootstrap.css and the legacy custom.css/dashboard.css,
   and is deliberately an override layer rather than a replacement: the contest
   views are ported legacy markup that still relies on Bootstrap 4's grid,
   DataTables, Owl Carousel, Magnific Popup and Dropzone. Rewriting all 35 of
   them would risk the voting and entry flows for a purely visual change, so the
   legacy class names are re-pointed at the modern tokens instead.

   The one trick worth knowing: custom.css sets every text element to
   var(--Grandstander). Redefining that variable here (rather than restating its
   long selector list) retargets the whole legacy font stack in one line.
   ========================================================================== */

:root {
    /* Brand teal scale */
    --teal-950: #0B2A26;
    --teal-900: #0F3D38;
    --teal-800: #14524B;
    --teal-700: #17685F;
    --teal-600: #1D7A6E;
    --teal-500: #2A9D8F;
    --teal-400: #4DB8AA;
    --teal-200: #B9E3DC;
    --teal-100: #DDF1ED;
    --teal-50: #EFF8F6;
    /* Amber accent */
    --amber-600: #D97706;
    --amber-500: #FF6B35;
    --amber-400: #FFD23F;
    --amber-100: #FEF3C7;
    --amber-50: #FFF7ED;
    /* Neutrals */
    --ink: #1A1A2E;
    --ink-2: #374151;
    --ink-3: #6B7280;
    --ink-4: #6B7280;
    --bg: #F3F4F6;
    --surface: #FFFFFF;
    --surface-2: #F3F6F4;
    --line: #E3E9E6;
    --line-2: #D2DCD8;
    /* Category accents */
    --purple: #7C3AED;
    --purple-soft: #F3EEFF;
    --purple-950: #3B0764;
    --blue: #0369A1;
    --blue-soft: #EFF6FF;
    --orange: #C2410C;
    --orange-soft: #FFF7ED;
    --pink: #E91E8C;
    --pink-soft: #FFF0FA;
    --indigo: #3730A3;
    --indigo-soft: #EEF2FF;
    --green: #065F46;
    --green-soft: #ECFDF5;
    --gold: #B45309;
    --gold-soft: #FFFBEB;
    --danger: #DC2626;
    --danger-soft: #FEF2F2;
    /* Shape */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-full: 999px;
    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(19, 34, 31, .06);
    --shadow-sm: 0 2px 6px rgba(19, 34, 31, .06), 0 1px 2px rgba(19, 34, 31, .04);
    --shadow-md: 0 10px 28px -10px rgba(19, 34, 31, .16), 0 2px 6px rgba(19, 34, 31, .05);
    --shadow-lg: 0 28px 56px -20px rgba(19, 34, 31, .24), 0 10px 20px -10px rgba(19, 34, 31, .08);
    --shadow-xl: 0 40px 80px -24px rgba(19, 34, 31, .32);
    --shadow-teal: 0 14px 32px -12px rgba(29, 122, 110, .55);
    --shadow-amber: 0 14px 32px -12px rgba(245, 158, 11, .6);
    /* Type */
    --font-display: "Fredoka", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    --header-h: 72px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* custom.css points every text element at this. Re-aiming it at the modern
       body face converts the whole legacy stylesheet in one declaration. */
    --Grandstander: var(--font-body);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

main, .page-main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6,
.navbar-brand, .btn, button, .card-top h5, .nav-link {
    font-family: var(--font-display);
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--ink);
}

h1 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 600; }
h2 { font-size: clamp(25px, 3.2vw, 35px); font-weight: 600; }
h3 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 500; }
h4 { font-size: 20px; font-weight: 500; }
h5 { font-size: 16.5px; font-weight: 500; }

a { color: var(--teal-700); transition: color .2s var(--ease); }
a:hover { color: var(--pink); text-decoration: none; }

::selection { background: var(--teal-200); color: var(--teal-950); }

:focus-visible {
    outline: 3px solid var(--teal-500);
    outline-offset: 3px;
    border-radius: 6px;
}

.wrap {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
}
@media (min-width: 640px)  { .wrap { padding-inline: 28px; } }
@media (min-width: 1024px) { .wrap { padding-inline: 32px; } }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    top: -100px; left: 16px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--teal-600);
    color: #fff;
    border-radius: var(--r-sm);
    font-weight: 600;
    transition: top .2s;
}
.skip-link:focus { top: 12px; color: #fff; }

/* The legacy layout's decorative corner blobs. The modern chrome replaces them,
   and they sat on top of the sticky header, so they are retired outright. */
.top-right-image, .banImage, .BottomImage { display: none !important; }

/* --------------------------------------------------------------------------
   Legacy colour utilities, re-pointed
   -------------------------------------------------------------------------- */
.pink, .pink:hover     { color: var(--pink) !important; }
.purple, .purple:hover { color: var(--purple) !important; }
.orange, .orange:hover { color: var(--orange) !important; }
.green, .green:hover   { color: var(--green) !important; }
.black                 { color: var(--ink-2) !important; }
.text-dark             { color: var(--ink-2) !important; }
.text-red, .text-danger { color: var(--danger) !important; }
.text-muted            { color: var(--ink-3) !important; }

.bold      { font-weight: 700 !important; }
.semi-bold { font-weight: 600 !important; }

.bg-orange       { background: var(--teal-950) !important; }
.bg-light-orange { background: var(--teal-50) !important; }
.border-30       { border-radius: var(--r-full) !important; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--r-full);
    border: 1.5px solid transparent;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
    will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus  { box-shadow: none; }
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed; box-shadow: none !important; transform: none !important;
}

.btn-sm, a.btn-sm, .table tbody tr td a.btn-sm {
    padding: 9px 16px !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
}
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }
.btn-rounded { border-radius: var(--r-full) !important; }

.btn-pink, .btn-pink:focus {
    background: linear-gradient(135deg, #F2408E, var(--pink));
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 14px 32px -12px rgba(233, 30, 140, .6);
}
.btn-pink:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(233, 30, 140, .7); }

.btn-green, .btn-green:focus, .btn-primary, .btn-primary:focus {
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-teal);
}
.btn-green:hover, .btn-primary:hover, .btn-primary.focus {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -14px rgba(29, 122, 110, .65) !important;
}

.btn-orange, .btn-orange:focus {
    background: var(--amber-400);
    color: #3B1E00 !important;
    border-color: transparent;
    box-shadow: var(--shadow-amber);
}
.btn-orange:hover { color: #3B1E00 !important; transform: translateY(-2px); box-shadow: 0 22px 44px -14px rgba(245, 158, 11, .7); }

.btn-purple, .btn-purple:focus {
    background: var(--purple);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 14px 32px -12px rgba(124, 58, 237, .55);
}
.btn-purple:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(124, 58, 237, .65); }

.btn-blue, .btn-blue:focus {
    background: var(--blue);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 14px 32px -12px rgba(3, 105, 161, .5);
}
.btn-blue:hover { color: #fff !important; transform: translateY(-2px); }

.btn-brown, .btn-brown:focus {
    background: var(--indigo);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 14px 32px -12px rgba(55, 48, 163, .5);
}
.btn-brown:hover { color: #fff !important; transform: translateY(-2px); }

.btn-red, .btn-red:focus, .btn-danger, .btn-danger:focus {
    background: var(--danger) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 14px 32px -12px rgba(220, 38, 38, .5);
}
.btn-red:hover, .btn-danger:hover { color: #fff !important; transform: translateY(-2px); }

.btn-outline-orange, .btn-outline-secondary, .btn-light, .btn-default {
    background: var(--surface);
    color: var(--teal-700) !important;
    border: 1.5px solid var(--line-2);
    font-weight: 500;
}
.btn-outline-orange:hover, .btn-outline-orange:focus,
.btn-outline-secondary:hover, .btn-light:hover, .btn-default:hover {
    border-color: var(--teal-500);
    background: var(--teal-50);
    color: var(--teal-700) !important;
    transform: translateY(-2px);
}
.input-group .input-group-append .btn-outline-orange { border-left: 0; }

.btn-secondary, .btn-secondary:focus {
    background: var(--surface-2);
    color: var(--ink-2) !important;
    border-color: var(--line-2);
}
.btn-secondary:hover { background: var(--line); color: var(--ink) !important; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 250, 245, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s, background .3s;
}
.site-header.is-scrolled {
    border-bottom-color: var(--line);
    box-shadow: 0 8px 30px -18px rgba(19, 34, 31, .25);
    background: rgba(255, 255, 255, .88);
}

.header-row {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand:hover { color: inherit; }
.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--pink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 32px -12px rgba(233, 30, 140, .55);
    transition: transform .3s var(--ease-spring);
    overflow: hidden;
}
.brand-mark img { width: 30px; height: 30px; object-fit: contain; }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
/* The main site's wordmark (site.css .brand-logo). It ships at 1920x540, so it is sized by height
   and told not to shrink, or `img { max-width: 100% }` squashes the nav out of the header row. */
.brand-logo { flex: none; width: auto; height: 48px; }
/* Which Danger Aware site this is: a lockup with the shared wordmark (a rule, then the site name),
   not a pill, so it cannot be mistaken for the first item of the nav beside it. */
.brand-site {
    padding-left: 12px;
    border-left: 2px solid var(--line-2);
    color: var(--pink);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}
@media (max-width: 575.98px) {
    .brand-logo { height: 38px; }
    .brand-site { display: none; }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); letter-spacing: -.01em; }
.brand-tag {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pink);
    margin-top: 3px;
}

/* The links sit in one pale track; the current page is the filled pink pill. */
.main-nav {
    display: none;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border: 1px solid var(--line);
}
.main-nav a {
    position: relative;
    padding: 8px 16px;
    border-radius: var(--r-full);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink-2);
    white-space: nowrap;   /* "Search Contests" and "My Profile" broke onto two lines */
    transition: color .2s, background .2s, box-shadow .2s;
}
.main-nav a:hover { color: var(--pink); background: var(--surface); }
.main-nav a.is-active {
    color: #fff;
    background: linear-gradient(135deg, #FF4FA7, var(--pink));
    box-shadow: 0 8px 18px -10px rgba(233, 30, 140, .9);
}

/* Between the nav breakpoint and a wide screen there is not room for everything: the account
   chip drops to its avatar and Visit Website to its icon, both keeping their titles. */
.header-actions .btn { white-space: nowrap; }
@media (max-width: 1359.98px) {
    .header-user .name { display: none; }
    .header-user { padding: 6px; }
    .header-actions .btn-label { display: none; }
}

.header-actions { display: flex; align-items: center; gap: 8px; }

.header-user {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border-radius: var(--r-full);
    background: var(--surface);
    border: 1.5px solid var(--line-2);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
    max-width: 220px;
}
.header-user .avatar {
    width: 26px; height: 26px;
    border-radius: var(--r-full);
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}
.header-user .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) { .header-user { display: inline-flex; } }

.header-form { margin: 0; display: inline-flex; }

.nav-toggle {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    padding: 0;
}
.nav-toggle .bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle .bars i {
    position: absolute; left: 0; width: 100%; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease);
}
.nav-toggle .bars i:nth-child(1) { top: 0; }
.nav-toggle .bars i:nth-child(2) { top: 5px; }
.nav-toggle .bars i:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.mobile-nav {
    display: grid;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    padding: 0;
    transition: max-height .4s var(--ease), opacity .3s, transform .3s, padding .3s;
}
.mobile-nav.is-open { max-height: 520px; opacity: 1; transform: none; padding: 8px 0 18px; }
.mobile-nav a, .mobile-nav button {
    padding: 12px 16px;
    border-radius: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 16px;
    color: var(--ink-2);
    text-align: left;
    background: none;
    border: 0;
    width: 100%;
}
.mobile-nav a:hover, .mobile-nav a.is-active { background: var(--teal-50); color: var(--teal-700); }
.mobile-nav .mobile-cta { margin-top: 6px; text-align: center; }
.mobile-nav .mobile-user {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
}

@media (min-width: 1024px) {
    .main-nav { display: flex; }
    .nav-toggle, .mobile-nav { display: none; }
}

/* --------------------------------------------------------------------------
   Hero / banner
   -------------------------------------------------------------------------- */
.banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, var(--teal-950) 0%, var(--teal-800) 45%, var(--teal-600) 100%);
    color: #fff;
    padding: 64px 0 76px;
    margin-bottom: 8px;
}
.banner::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    pointer-events: none;
}
.banner::after {
    content: "";
    position: absolute; width: 900px; height: 900px; border-radius: 50%;
    right: -340px; top: -460px;
    background: radial-gradient(circle at center, rgba(233, 30, 140, .22), rgba(255, 255, 255, 0) 62%);
    pointer-events: none;
}
.banner > .container { position: relative; z-index: 1; }
.banner h1, .banner h2, .banner h3, .banner h4, .banner h5 { color: #fff !important; }
.banner .pink   { color: var(--amber-400) !important; }
.banner .purple { color: #fff !important; }
.banner .orange { color: var(--teal-200) !important; }
.banner p, .banner .text-dark { color: rgba(255, 255, 255, .86) !important; }
.banner img { border-radius: var(--r-lg); }

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
    margin-bottom: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-pill::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--amber-400);
    box-shadow: 0 0 0 4px rgba(251, 191, 36, .25);
    animation: pulseDot 2.2s infinite;
}
@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 4px rgba(251, 191, 36, .25); }
    50%      { box-shadow: 0 0 0 8px rgba(251, 191, 36, .08); }
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

/* Section heading above a card grid or table. */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 48px 0 22px;
}
.section-head h3, .section-head h2 { margin-bottom: 0; }
.section-head .section-sub { color: var(--ink-3); font-size: 14.5px; }

/* Interior page heading, for views that open straight into content. The main site's
   .page-head (site.css): centred, with the faint grid and the light bloom top right. */
.page-head {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--teal-950), var(--teal-600));
    color: #fff;
    padding: 72px 0 76px;
    margin-bottom: 36px;
    text-align: center;
}
.page-head::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    pointer-events: none;
}
.page-head::after {
    content: "";
    position: absolute; width: 900px; height: 900px; border-radius: 50%;
    right: -320px; top: -480px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}
.page-head .container { position: relative; z-index: 1; }
.page-head h1, .page-head h2, .page-head h3 { color: #fff !important; margin-bottom: 14px; }
.page-head h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -.03em; }
.page-head p {
    max-width: 640px;
    margin: 0 auto;
    font-size: 17.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .84) !important;
}
@media (max-width: 767.98px) { .page-head { padding: 52px 0 56px; } }

/* --------------------------------------------------------------------------
   Chips & meta
   -------------------------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--r-full);
    background: var(--teal-50);
    color: var(--teal-800);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.chip-open     { background: var(--teal-50);   color: var(--teal-800); }
.chip-soon     { background: var(--purple-soft); color: var(--purple); }
.chip-ending   { background: var(--amber-50);  color: var(--amber-600); }
.chip-closed   { background: var(--green-soft); color: var(--green); }
/* On the dark page-head band the soft chip fills lose contrast, so they go glass. */
.page-head .chip, .banner .chip {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
}

/* Label/value pairs, replacing the legacy stacked "Start Date:" headings. */
.meta-grid {
    display: grid;
    gap: 18px 32px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.meta-grid .meta-item { min-width: 0; }
.meta-grid .meta-label {
    display: block;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.meta-grid .meta-value { color: var(--ink); font-size: 15.5px; margin-bottom: 0; }
.meta-grid .meta-full { grid-column: 1 / -1; }

/* Winners podium */
.winner-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .winner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.winner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--line);
}
.winner-position {
    flex: none;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, var(--amber-400), #F59E0B);
    color: #3B1E00;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
}
/* Second and third place step down from gold without losing contrast. */
.winner:nth-child(2) .winner-position { background: linear-gradient(135deg, #E5E7EB, #9CA3AF); color: #1F2937; }
.winner:nth-child(3) .winner-position { background: linear-gradient(135deg, #F5C9A5, #C2764B); color: #3B1E00; }
.winner-name  { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--ink); margin-bottom: 2px; }
.winner-votes { color: var(--ink-3); font-size: 13.5px; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.home-cards .card {
    border-radius: var(--r-lg);
    position: relative;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.home-cards .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.card .card-body { padding: 24px; }
.card .card-footer {
    border-top: 1px solid var(--line);
    background: var(--surface);
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
    padding: 18px 20px;
}

/* Contest phase colours. The legacy names are kept because the views compute
   them from ContestPhase; only the palette moves to the modern accents:
   orange = open, purple = ending soon, red = upcoming, green = closed. */
.card .card-top {
    /* The bottom padding is the room the image box overlaps into (see .card-image margin). */
    padding: 18px 20px 38px;
    border-radius: 0;
    border-bottom-right-radius: var(--r-lg);
    border-bottom-left-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
}
.card .card-top h5 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 4px;
}
.card .card-top p { font-weight: 600; font-size: 15px; margin-bottom: 0; }

.card-orange .card-top { background: linear-gradient(135deg, var(--teal-500), var(--teal-700)); }
.card-purple .card-top { background: linear-gradient(135deg, #FB923C, var(--amber-500)); }
.card-red    .card-top { background: linear-gradient(135deg, #A78BFA, var(--purple)); }
.card-green  .card-top { background: linear-gradient(135deg, #10B981, var(--green)); }

.card .card-image {
    padding: 6px;
    border-radius: var(--r-md);
    border: 2px solid var(--line);
    text-align: center;
    width: 92%;
    max-width: 92%;
    /* A fixed overlap, not -10%: a percentage margin is taken from the card's width, so on a
       wide card it climbed past .card-top's padding and covered the dates. */
    margin: -22px auto 0 auto;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 1;
}
.card.card-orange .card-image { border-color: var(--teal-200); }
.card.card-purple .card-image { border-color: #FED7AA; }
.card.card-red    .card-image { border-color: #DDD6FE; }
.card.card-green  .card-image { border-color: #A7F3D0 !important; }

.card .card-image .imgDiv {
    background-color: var(--surface-2);
    border-radius: var(--r-sm);
    width: 100%;
    max-width: 100%;
    text-align: center;
    background-position: center;
    background-size: cover;
    height: 230px;
}

/* Phase ribbon over the image. */
.card-red .ending, .card-purple .ending, .card-green .ending, .card-orange .ending {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 92%;
    padding: 9px 18px;
    border-radius: var(--r-full);
    color: #fff;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.card-red .ending    { background: rgba(124, 58, 237, .94); }
.card-purple .ending { background: rgba(255, 107, 53, .94); }
.card-green .ending  { background: rgba(6, 95, 70, .94); }
.card-orange .ending { background: rgba(15, 118, 110, .94); }
.card .ending h4 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 0;
    color: #fff !important;
}

.cardborder {
    padding: 6px;
    position: relative;
    border-radius: var(--r-md);
    border: 2px solid var(--teal-200);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s;
}
.cardborder:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--teal-400); }
.cardborder .image { border-radius: var(--r-sm); }

.select-winner {
    background: linear-gradient(135deg, #F2408E, var(--pink));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: var(--r-full);
    position: absolute;
    top: 10px;
    right: 6px;
    padding: 5px 12px;
    box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */
.card-body p + p { margin-top: 14px; }

.plain-list {
    list-style: none;
    padding: 0;
    margin: 18px 0;
    display: grid;
    gap: 10px;
}
.plain-list li {
    position: relative;
    padding-left: 26px;
    color: var(--ink-2);
    font-size: 15px;
}
.plain-list li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--teal-500);
}

code {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    padding: 2px 7px;
    font-size: 13px;
    color: var(--teal-800);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.control-label, label {
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .01em;
    margin-bottom: 7px;
}
.control-label i { color: var(--teal-600); margin-right: 4px; }

.form-control, .custom-select, select.form-control {
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-sm);
    padding: 11px 16px;
    height: auto;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    transition: border-color .2s, box-shadow .2s;
}
.form-control::placeholder { color: var(--ink-4); }
.form-control:focus, .custom-select:focus {
    border-color: var(--teal-500);
    box-shadow: 0 0 0 4px rgba(42, 157, 143, .14) !important;
    background: var(--surface);
}
textarea.form-control { min-height: 120px; }

.input-group .form-control { height: auto; }
.input-group-text {
    border: 1.5px solid var(--line-2);
    background: var(--surface-2);
    color: var(--ink-3);
    border-radius: var(--r-sm);
}

.validation-summary-errors, .field-validation-error, .text-danger { color: var(--danger) !important; font-size: 13.5px; }
.validation-summary-errors ul { margin-bottom: 0; padding-left: 18px; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table {
    background: var(--surface);
    border-radius: var(--r-md);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ink-2);
}
.table thead th {
    background: var(--teal-50);
    color: var(--teal-800);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
    vertical-align: middle;
}
.table tbody td {
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
    vertical-align: middle;
    font-size: 14.5px;
}
.table tbody tr { transition: background .2s; }
.table tbody tr:hover { background: var(--teal-50); }
.table tbody tr:last-child td { border-bottom: 0; }
.table-bordered, .table-bordered td, .table-bordered th { border: 0; }
.table-bordered tbody td { border-bottom: 1px solid var(--line); }

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    padding: 6px;
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-full);
    padding: 7px 14px;
    outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--teal-500); }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--ink-3); font-size: 13.5px; }
.dataTables_wrapper .pagination .page-link {
    border: 0;
    color: var(--teal-700);
    border-radius: var(--r-full) !important;
    margin: 0 2px;
    font-weight: 600;
    font-size: 13.5px;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
    color: #fff;
    box-shadow: var(--shadow-teal);
}
.dataTables_wrapper .pagination .page-link:hover { background: var(--teal-50); }

/* Bootstrap pagination used by the paged contest lists */
.pagination .page-link {
    border: 1px solid var(--line);
    color: var(--teal-700);
    border-radius: var(--r-full) !important;
    margin: 0 3px;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 14px;
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
    border-color: transparent;
    color: #fff;
}
.pagination .page-item.disabled .page-link { color: var(--ink-4); background: var(--surface-2); }

/* --------------------------------------------------------------------------
   Badges, alerts, modals
   -------------------------------------------------------------------------- */
.badge {
    padding: 5px 11px;
    border-radius: var(--r-full);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .03em;
}
.badge-success { background: var(--green-soft); color: var(--green); }
.badge-warning { background: var(--amber-100); color: var(--amber-600); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); }
.badge-info    { background: var(--blue-soft); color: var(--blue); }
.badge-primary { background: var(--teal-50); color: var(--teal-800); }
.badge-secondary { background: var(--surface-2); color: var(--ink-2); }

.alert {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px 20px;
    font-size: 14.5px;
    box-shadow: var(--shadow-xs);
}
.alert-success { background: var(--green-soft); border-color: #A7F3D0; color: var(--green); }
.alert-danger  { background: var(--danger-soft); border-color: #FECACA; color: var(--danger); }
.alert-warning { background: var(--amber-50); border-color: var(--amber-100); color: var(--amber-600); }
.alert-info    { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); }

.modal-content, .modal-header, .modal-footer { border-radius: var(--r-lg); }
.modal-content { border: 0; box-shadow: var(--shadow-xl); overflow: hidden; }
.modal-header {
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 20px 24px;
    background: var(--surface);
}
.modal-header .modal-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--line); border-radius: 0; padding: 16px 24px; }

/* --------------------------------------------------------------------------
   Third-party widgets
   -------------------------------------------------------------------------- */
.carousel-single .owl-nav { text-align: center; margin: 18px 0 0; }
.carousel-single.owl-carousel .owl-nav .owl-prev,
.carousel-single.owl-carousel .owl-nav .owl-next,
.image-carousel.owl-carousel .owl-nav .owl-prev,
.image-carousel.owl-carousel .owl-nav .owl-next {
    font-size: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
    height: 38px;
    width: 38px;
    line-height: 0;
    border-radius: var(--r-full);
    margin: 5px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.carousel-single.owl-carousel .owl-nav .owl-prev:hover,
.carousel-single.owl-carousel .owl-nav .owl-next:hover,
.owl-theme .owl-nav [class*='owl-']:hover {
    background: linear-gradient(135deg, #F2408E, var(--pink)) !important;
    color: #fff;
    transform: translateY(-2px);
}
.image-carousel .owl-nav { position: absolute; top: 43%; width: 100%; }
.image-carousel .owl-next { right: -15px; position: absolute; }
.image-carousel .owl-prev { left: -15px; position: absolute; }

.mfp-bg { background: rgba(11, 42, 38, .82) !important; }
.mfp-figure figure {
    border-radius: var(--r-lg) !important;
    background: #fff !important;
    border: 4px solid var(--teal-500) !important;
}
.mfp-arrow-right:after  { border-left: 17px solid var(--teal-500) !important; }
.mfp-arrow-right:before { border-left: 27px solid var(--teal-500) !important; }
.mfp-arrow-left:before  { border-right: 27px solid var(--teal-500) !important; }
.mfp-arrow-left:after   { border-right: 17px solid var(--teal-500) !important; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: #1E3A5F;
    color: #fff;
    padding: 68px 0 30px;
    position: relative;
    margin-top: 64px;
}
.site-footer::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal-500), var(--amber-500), transparent);
    opacity: .6;
}
.footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 768px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; } }
/* This host has three footer columns, not the main site five. */
@media (min-width: 768px)  { .footer-grid.is-compact { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid.is-compact { grid-template-columns: 1.8fr 1fr 1fr; } }
.site-footer .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.footer-address { margin: 14px 0 0; font-size: 13.5px; line-height: 1.7; color: #8FA5A2; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-tag  { color: var(--teal-400); }
.footer-blurb { margin: 22px 0 14px; max-width: 320px; font-size: 14.5px; line-height: 1.7; color: #C9D6D3; }
.footer-legal {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
    font-size: 12.5px; font-weight: 600; color: #C9D6D3;
}
.footer-col h3 {
    color: #fff; font-size: 13px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: 20px;
}
.site-footer ul { display: grid; gap: 11px; list-style: none; padding: 0; margin: 0; }
.site-footer ul li { padding-bottom: 0; }
.site-footer ul li a, .footer-col a {
    color: #A8B8B5;
    font-family: var(--font-body);
    font-size: 14.5px;
    display: inline-block;
    transition: color .2s, padding-left .2s;
}
.site-footer ul li a:hover, .footer-col a:hover { color: #fff; padding-left: 4px; }
.footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 52px; padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px; color: #6B9490;
}

/* The main site's footer (ModernDangerAware.Web site.css), carried here so the two sites end
   the same way. .is-main is its six-column grid; the rules below are the parts this host had no
   equivalent for. Bootstrap 4 styles .badge and gives every p a bottom margin, so both are reset. */
.brand-logo-footer { height: 54px; }
@media (max-width: 767px) {
    .footer-grid.is-main { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
    .footer-grid.is-main > :first-child, .footer-grid.is-main > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) { .footer-grid.is-main { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr; gap: 32px; } }
.footer-col h3 { font-weight: 800; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
    color: #A8B8B5; font-size: 15px;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.footer-social a:hover { background: var(--teal-700); color: #fff; transform: translateY(-2px); }
.help-box {
    margin-top: 26px; padding: 18px;
    border-radius: var(--r-md);
    background: #ffffff30;
    border: 1px solid #fff;
}
.help-box p { margin: 0; }
.help-box .head { color: var(--amber-400); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.help-box .line { margin-top: 6px; font-size: 13px; }
.help-box .tel { margin-top: 6px; font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -.01em; }
.help-box .tel a { color: #fff; }
.footer-bottom p { margin: 0; }
.footer-bottom .badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
    color: #A8B8B5; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: normal;
}

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */
.account-content-center {
    min-height: calc(100vh - var(--header-h));
    align-items: center;
    display: flex;
    padding: 48px 0;
    position: relative;
}
.auth-shell {
    background: linear-gradient(140deg, var(--teal-950) 0%, var(--teal-800) 50%, var(--teal-600) 100%);
    position: relative;
    /* x only: this class is on <body>, whose overflow propagates to the viewport,
       so plain `hidden` stopped the taller auth pages (Register) from scrolling.
       The glow below still needs clipping on the right. */
    overflow-x: hidden;
}
.auth-shell::after {
    content: "";
    position: absolute; width: 820px; height: 820px; border-radius: 50%;
    right: -320px; top: -420px;
    background: radial-gradient(circle at center, rgba(233, 30, 140, .2), rgba(255, 255, 255, 0) 62%);
    pointer-events: none;
}
.auth-shell .account-content-center { position: relative; z-index: 1; }
.auth-shell h1, .auth-shell h2, .auth-shell h3, .auth-shell h4 { color: #fff !important; }
.auth-shell .pink   { color: var(--amber-400) !important; }
.auth-shell .purple { color: #fff !important; }
.auth-shell .orange { color: var(--teal-200) !important; }
.auth-shell p, .auth-shell .text-dark { color: rgba(255, 255, 255, .84) !important; }
.auth-shell .site-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: rgba(255, 255, 255, .12);
}
.auth-shell .brand-name { color: #fff; }
.auth-shell .brand-tag  { color: var(--amber-400); }
.auth-shell .brand-site { border-left-color: rgba(255, 255, 255, .25); color: var(--amber-400); }
.auth-shell .main-nav { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.auth-shell .main-nav a { color: rgba(255, 255, 255, .82); }
.auth-shell .main-nav a:hover, .auth-shell .main-nav a.is-active { color: #fff; background: rgba(255, 255, 255, .12); }
.auth-shell .nav-toggle { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }

/* The unselected auth header action, on glass rather than the light surface the
   .btn-outline-* variants assume. */
.btn-glass-outline, .btn-glass-outline:focus {
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .32);
    color: #fff !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn-glass-outline:hover {
    background: rgba(255, 255, 255, .22);
    color: #fff !important;
    transform: translateY(-2px);
}
.auth-shell .mobile-nav a { color: #fff; }
.auth-shell .mobile-nav a:hover, .auth-shell .mobile-nav a.is-active { background: rgba(255, 255, 255, .14); color: #fff; }

/* The auth card itself sits on the dark shell, so it stays light. */
.auth-shell .card {
    background: var(--surface);
    border: 0;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl);
}
.auth-shell .card h1, .auth-shell .card h2, .auth-shell .card h3, .auth-shell .card h4 { color: var(--ink) !important; }
.auth-shell .card .orange { color: var(--teal-700) !important; }
.auth-shell .card .pink   { color: var(--pink) !important; }
.auth-shell .card p, .auth-shell .card .text-dark { color: var(--ink-2) !important; }
.auth-shell .card label, .auth-shell .card .control-label { color: var(--ink-2) !important; }
.auth-shell .card a.control-label:hover { color: var(--pink) !important; }
.auth-shell .card.bg-light-orange { background: var(--surface) !important; }

/* --------------------------------------------------------------------------
   Contest cards, the contest grid and the contest detail page
   --------------------------------------------------------------------------
   The home page and the contest page were the two views still wearing the
   legacy chrome: an Owl carousel of cards that showed two dates and a picture
   but never the title of the contest, and a detail page whose entries were
   hidden behind a click. Both are grids now; these are the styles they need. */

/* Hero lead and the fact strip under the hero actions. */
.hero-lead {
    max-width: 56ch;
    font-size: 16.5px;
    color: rgba(255, 255, 255, .9) !important;
    margin-bottom: 0;
}
.hero-facts {
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}
.hero-facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
}
.hero-facts i { color: var(--amber-400); font-size: 15px; }

/* The grid itself. auto-fit keeps one contest looking deliberate rather than
   stranded in a four-up carousel, and twelve of them still fill the rows. */
.contest-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr));
    align-items: stretch;
}
.grid-more { margin-top: 18px; color: var(--ink-3); font-size: 14.5px; }
.grid-more a { font-weight: 500; }

.contest-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s;
}
.contest-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--teal-200); }
.contest-card:focus-within { border-color: var(--teal-500); box-shadow: var(--shadow-md); }

.contest-card-media { position: relative; display: block; z-index: 2; }
.contest-card-img {
    display: block;
    height: 190px;
    background: var(--surface-2) center / cover no-repeat;
    border-bottom: 1px solid var(--line);
}
.contest-card-img.is-empty {
    display: grid;
    place-items: center;
    color: var(--teal-400);
    font-size: 34px;
    background: linear-gradient(135deg, var(--teal-50), var(--purple-soft));
}
.contest-card-chip { position: absolute; top: 12px; left: 12px; box-shadow: var(--shadow-sm); }

.contest-card-body { padding: 18px 20px 6px; flex: 1 0 auto; }
.contest-card-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.contest-card-title a { color: var(--ink); }
.contest-card-title a:hover { color: var(--pink); }

/* The stretched-link trick: the title covers the card, so the whole card is the
   hit target while the buttons below stay clickable on top of it. */
.stretch-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.contest-card-school, .contest-card-countdown {
    display: flex; align-items: center; gap: 7px;
    font-size: 13.5px; color: var(--ink-3); margin-bottom: 6px;
}
.contest-card-countdown.is-live { color: var(--teal-700); font-weight: 500; }
.contest-card.is-ending .contest-card-countdown.is-live { color: var(--amber-600); }

.contest-card-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.contest-card-dates dt {
    font-family: var(--font-display);
    font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 2px;
}
.contest-card-dates dd { font-size: 14px; color: var(--ink-2); margin: 0; }

.contest-card-stats {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    margin: 12px 0 0; font-size: 13px; color: var(--ink-3);
}
.contest-card-stats strong { color: var(--ink); font-family: var(--font-display); }

.contest-card-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    padding: 16px 20px 18px;
}
.contest-card-actions .btn { flex: 1 1 0; min-width: 0; }

/* Shown when a grid has nothing to put in it, rather than an empty rail. */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    border: 1px dashed var(--line-2);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.empty-state-icon {
    display: grid; place-items: center;
    width: 62px; height: 62px; margin: 0 auto 18px;
    border-radius: var(--r-full);
    background: var(--teal-50);
    color: var(--teal-600);
    font-size: 27px;
}
.empty-state h4 { font-size: 19px; margin-bottom: 8px; }
.empty-state p { color: var(--ink-3); max-width: 46ch; margin: 0 auto 20px; }

/* "How it works" on the home page. */
.steps {
    list-style: none;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    padding: 0;
    margin: 0 0 12px;
}
.step {
    position: relative;
    padding: 26px 22px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.step-n {
    display: grid; place-items: center;
    width: 38px; height: 38px; margin-bottom: 14px;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, #F2408E, var(--pink));
    color: #fff;
    font-family: var(--font-display); font-weight: 600; font-size: 17px;
    box-shadow: 0 10px 22px -10px rgba(233, 30, 140, .7);
}
.step h4 { font-size: 17px; margin-bottom: 6px; }
.step p { color: var(--ink-3); font-size: 14.5px; margin-bottom: 0; }

/* Basic Rules: the long legacy paragraph, with the entry form beside it. */
.rules-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 820px) { .rules-grid { grid-template-columns: minmax(0, 1fr) 260px; } }
.rules-aside {
    padding: 22px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--line);
    text-align: center;
}
.rules-aside i { font-size: 30px; color: var(--pink); }
.rules-aside p { font-size: 13.5px; color: var(--ink-3); margin: 10px 0 16px; }

/* Contest detail: the meta panel and the image of the contest, side by side. */
.contest-overview {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 860px) { .contest-overview { grid-template-columns: minmax(0, 1fr) 260px; } }
.contest-poster {
    padding: 6px;
    border-radius: var(--r-md);
    border: 2px solid var(--teal-200);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.contest-poster img { display: block; width: 100%; border-radius: var(--r-sm); }

/* The header band on the contest page: back link, headline stats, actions. */
.back-link {
    /* Flex rather than inline-flex, so the phase chip below starts its own line. */
    display: flex; width: max-content; align-items: center; gap: 8px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 14px;
}
.back-link:hover { color: #fff !important; }

.head-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 34px;
    margin-top: 22px;
}
.head-stat { display: flex; flex-direction: column; gap: 2px; }
.head-stat strong {
    font-family: var(--font-display);
    font-size: 24px; font-weight: 600; line-height: 1.1; color: #fff;
}
.head-stat span {
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}
.head-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.detail-shell { padding-bottom: 56px; }
.detail-shell > .card:first-child { margin-top: 32px; }

/* Winners keep the podium, with the winning entry alongside the position. */
.winner-thumb {
    width: 54px; height: 54px; flex: none;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
}

/* Entries. Legacy showed a strip of thumbnails and revealed one entry at a time
   below it; every entry now carries its own name, count and Vote button. */
.entry-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    margin-bottom: 8px;
}
.entry-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.entry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.entry-image {
    position: relative;
    display: block;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.entry-image img { display: block; width: 100%; height: 200px; object-fit: contain; padding: 10px; }
.entry-rank {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: var(--r-full);
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
    color: #3B1E00;
    background: linear-gradient(135deg, var(--amber-400), #F59E0B);
    box-shadow: var(--shadow-sm);
}
.entry-rank.rank-2 { background: linear-gradient(135deg, #E5E7EB, #9CA3AF); color: #1F2937; }
.entry-rank.rank-3 { background: linear-gradient(135deg, #F5C9A5, #C2764B); }

.entry-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1 0 auto; }
.entry-name {
    font-size: 16px; font-weight: 600; margin-bottom: 2px;
    overflow-wrap: anywhere;
}
.entry-school { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.entry-votes {
    display: flex; align-items: center; gap: 6px;
    font-size: 13.5px; color: var(--ink-3);
    margin: 0 0 12px;
}
.entry-votes i { color: var(--pink); font-size: 13px; }
.entry-votes strong { font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.entry-body .btn { margin-top: auto; }
.entry-message {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--ink-2);
    text-align: center;
}
.entry-message:empty { display: none; }

@media (max-width: 575.98px) {
    .contest-card-actions { flex-direction: column; }
    .head-stats { gap: 10px 24px; }
    .head-stat strong { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
/* Transform-only entrance, matching the main site: an element that never
   animates stays fully legible rather than stranded at opacity 0. */
@keyframes revealIn { from { transform: translateY(14px); } to { transform: none; } }
[data-reveal] { animation: revealIn .6s var(--ease) both; animation-delay: var(--d, 0ms); }
[data-reveal].is-in { animation: none; transform: none; }
html.js [data-reveal].is-deferred { animation-play-state: paused; }
html.js [data-reveal].is-deferred.is-in { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { animation: none; transform: none; }
    html { scroll-behavior: auto; }
    .btn:hover, .home-cards .card:hover, .cardborder:hover { transform: none !important; }
}