/* ==========================================================================
   Default theme
   --------------------------------------------------------------------------
   The five themes added since this one each got a block language of their
   own; this one kept the shape it was born with: a dozen bands, each an
   eyebrow, a centred title, a green dash and a row of four equal cards on the
   same flat ground. Nothing was wrong with any single band. Twelve of them in
   a row is what made the page feel like nothing was happening.

   So the bands alternate rather than repeat, two of them stop being grids and
   become the shapes their content actually is (a strip of figures, a table of
   votes), and the cards answer the pointer. The palette, the type and the
   angular buttons are the theme's own and do not change.

   Loaded automatically for this theme only: ThemeManager emits
   assets/themes/{slug}/style.css after the base CSS, so nothing here can
   reach another theme.
   ========================================================================== */

:root {
    --ds-gap: clamp(54px, 5.6vw, 84px);
    --ds-line: var(--ms-bd-1, rgba(255, 255, 255, .07));
    --ds-panel: var(--ms-bg-2, rgba(255, 255, 255, .025));
}

/* ---------- band rhythm ----------------------------------------------- */

/*
 * Every block is wrapped in a band and the bands alternate: plain, then a
 * tinted panel ruled off top and bottom with a wash of the theme colour
 * behind it. Two neighbours are never the same ground, which is the whole
 * trick: the eye gets a seam to count the page by.
 */

.ds-band > section,
.ds-band > div > section { padding: var(--ds-gap) 0 !important; }

.ds-band--tint {
    position: relative;
    background: var(--ds-panel);
    border-top: 1px solid var(--ds-line);
    border-bottom: 1px solid var(--ds-line);
}

.ds-band--tint::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(70% 120% at 50% 0%,
        color-mix(in srgb, var(--tg-theme-primary) 7%, transparent), transparent 70%);
}

.ds-band--tint > * { position: relative; }

/* The hero already ends on a hard green wedge; a ruled band straight after it
   doubles the seam, so the first band never draws its top edge. */
.ds-band:first-of-type.ds-band--tint { border-top: 0; }

/* ---------- section titles -------------------------------------------- */

/* The dash under every title was doing the same job twelve times. It stays on
   the centred titles and goes on the aligned ones, where the heading already
   has a rule of its own to sit against. */

.ds-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 34px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ds-line);
}

.ds-head__text { min-width: 0; }

.ds-head .sub-title {
    display: block;
    margin-bottom: 6px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.ds-head .title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

.ds-head__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-bottom: 3px;
    color: var(--tg-theme-primary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: gap .18s ease, color .18s ease;
}

.ds-head__link:hover { gap: 13px; color: var(--ms-fg-0, #fff); }

/* ---------- cards answer the pointer ----------------------------------- */

.ds-band .mustack-card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ds-band a.mustack-card:hover,
.ds-band .mustack-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tg-theme-primary) 42%, transparent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}

@media (prefers-reduced-motion: reduce) {
    .ds-band .mustack-card { transition: none; }
    .ds-band .mustack-card:hover { transform: none; }
}

/* ---------- hero: the live strip --------------------------------------- */

/*
 * This was a translucent grey box floating over the artwork, wide enough to
 * cover the character's face and carrying a progress bar nobody reads. The
 * same facts (who is on, which server, what it runs at) now sit in one line
 * under the buttons, where they read as a caption to the pitch rather than a
 * widget parked on top of it.
 */

.ds-live {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    max-width: 640px;
}

.ds-live__item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: .84rem;
    color: rgba(255, 255, 255, .62);
}

.ds-live__item b {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.ds-live__dot {
    width: 8px;
    height: 8px;
    align-self: center;
    border-radius: 50%;
    background: var(--tg-theme-primary);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tg-theme-primary) 65%, transparent);
    animation: dsPulse 2s infinite;
}

@keyframes dsPulse {
    70%  { box-shadow: 0 0 0 9px rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ds-live__dot { animation: none; }
}

.ds-live__sep {
    width: 1px;
    height: 20px;
    align-self: center;
    background: rgba(255, 255, 255, .16);
}

.ds-live__srv {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    color: rgba(255, 255, 255, .62);
}

.ds-live__srv b { color: #fff; font-weight: 700; }

.ds-live__srv a {
    color: rgba(255, 255, 255, .5);
    font-size: .76rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ds-live__srv a:hover { color: var(--tg-theme-primary); }

/* The hero ends on a hard wedge; the strip needs clearance from it. */
.slider__area .slider__content { padding-bottom: 26px; }

/*
 * Every other theme lays a scrim under its hero copy; this one never did, so
 * the headline, the tagline and the clock were all competing with whatever
 * the artwork happened to be doing behind them. It fades out well before the
 * art's subject, so the picture still reads as the picture.
 */
/* Anchored off the copy but run well past the top of it, or the scrim ends
   part-way up the banner and leaves a seam across the artwork. The section
   clips it. */
.slider__area { overflow: hidden; }

.slider__area .slider__content::before {
    content: "";
    position: absolute;
    inset: -340px -90px -120px -50vw;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(3, 7, 9, .88) 0%,
        rgba(3, 7, 9, .74) 52%,
        rgba(3, 7, 9, .34) 78%,
        transparent 100%);
}

.slider__area .slider__content > * { position: relative; }

/* The tagline was set in wide caps at half contrast and read as decoration.
   It is the one sentence that says what the server is. */
.slider__content > p {
    max-width: 46ch;
    font-size: 1.02rem;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, .82);
}

/* ---------- server figures: a strip, not four tiles -------------------- */

/*
 * Four boxes with the same bar-chart glyph told the reader nothing the
 * numbers did not. One rule-divided strip, an icon per figure, and the live
 * count carrying the pulse the hero uses for the same fact.
 */

.ds-figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    border: 1px solid var(--ds-line);
    background: var(--ms-bg-1, rgba(255, 255, 255, .02));
}

.ds-fig {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px 24px;
    border-right: 1px solid var(--ds-line);
}

.ds-fig:last-child { border-right: 0; }

.ds-fig__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: var(--tg-theme-primary);
    font-size: 1.15rem;
    background: color-mix(in srgb, var(--tg-theme-primary) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--tg-theme-primary) 26%, transparent);
}

.ds-fig__text { min-width: 0; }

.ds-fig__num {
    display: block;
    color: var(--ms-fg-0, #fff);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ds-fig__label {
    display: block;
    margin-top: 2px;
    color: var(--tg-body-color);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

@media (max-width: 767.98px) {
    .ds-fig { border-right: 0; border-bottom: 1px solid var(--ds-line); }
    .ds-fig:last-child { border-bottom: 0; }
}

/* ---------- class breakdown: the leader gets the room ------------------ */

/*
 * A seven-up grid of equals hid the one thing the block is for: which class
 * the server actually plays. The leader takes a double tile with its share
 * called out; the rest stay as they were.
 */

.ds-class {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--ds-line);
    background: var(--ms-bg-1, rgba(255, 255, 255, .02));
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease;
}

.ds-class:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tg-theme-primary) 40%, transparent);
}

.ds-class__art {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 132px;
    object-fit: cover;
    object-position: center 28%;
}

.ds-class__body { flex: 0 0 auto; padding: 13px 15px 15px; }

.ds-class__name {
    color: var(--ms-fg-0, #fff);
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ds-class__bar {
    height: 4px;
    margin: 9px 0;
    background: var(--ms-bg-3, rgba(255, 255, 255, .1));
    overflow: hidden;
}

.ds-class__bar span {
    display: block;
    height: 100%;
    background: var(--tg-theme-primary);
}

.ds-class__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ds-class__row b { color: var(--ms-fg-0, #fff); font-variant-numeric: tabular-nums; }

.ds-class__row em {
    color: var(--tg-theme-primary);
    font-style: normal;
    font-weight: 700;
    font-size: .78rem;
}

/* The lead tile is artwork with the figures written over it. */
.ds-class--lead .ds-class__art { min-height: 292px; }

.ds-class--lead .ds-class__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 18px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .55) 55%, transparent);
}

.ds-class--lead .ds-class__name { font-size: 1.02rem; }
.ds-class--lead .ds-class__row b { font-size: 1.3rem; font-weight: 800; }
.ds-class--lead .ds-class__row em { font-size: .98rem; }

.ds-class__crown {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: var(--tg-theme-primary);
    color: #0b120f;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ---------- shop packs -------------------------------------------------- */

.ds-pack {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--ds-line);
    background: var(--ms-bg-1, rgba(255, 255, 255, .02));
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ds-pack:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tg-theme-primary) 42%, transparent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}

.ds-pack__art {
    position: relative;
    display: grid;
    place-items: center;
    height: 128px;
    background:
        radial-gradient(60% 80% at 50% 40%,
            color-mix(in srgb, var(--tg-theme-primary) 12%, transparent), transparent 70%),
        var(--ms-shade-1, rgba(0, 0, 0, .25));
    border-bottom: 1px solid var(--ds-line);
}

.ds-pack__art img { max-height: 98px; width: auto; transition: transform .25s ease; }
.ds-pack:hover .ds-pack__art img { transform: scale(1.06); }
.ds-pack__art i { font-size: 2rem; color: var(--tg-theme-primary); }

.ds-pack__body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 16px;
    margin-top: auto;
}

.ds-pack__name { color: var(--ms-fg-0, #fff); font-weight: 700; font-size: .9rem; }

.ds-pack__price {
    flex: 0 0 auto;
    text-align: right;
    color: var(--tg-theme-secondary);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ds-pack__price span {
    display: block;
    color: var(--tg-body-color);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---------- community: a band, not a card row -------------------------- */

.ds-comm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--ds-line);
    background:
        radial-gradient(80% 140% at 0% 50%,
            color-mix(in srgb, var(--tg-theme-primary) 9%, transparent), transparent 65%),
        var(--ms-bg-1, rgba(255, 255, 255, .02));
}

.ds-comm__lead .sub-title {
    display: block;
    margin-bottom: 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.ds-comm__lead h3 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

.ds-comm__lead p {
    margin: 0;
    max-width: 42ch;
    color: var(--tg-body-color);
    font-size: .95rem;
}

.ds-comm__links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.ds-comm__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    border: 1px solid var(--ds-line);
    background: var(--ms-shade-1, rgba(0, 0, 0, .25));
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.ds-comm__link:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tg-theme-primary) 45%, transparent);
    background: color-mix(in srgb, var(--tg-theme-primary) 10%, transparent);
}

.ds-comm__link i { font-size: 1.3rem; color: var(--tg-theme-primary); }

.ds-comm__link span {
    color: var(--ms-fg-0, #fff);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* The first link is the one the server actually wants joined. */
.ds-comm__link.is-primary {
    background: color-mix(in srgb, var(--tg-theme-primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--tg-theme-primary) 48%, transparent);
}

@media (max-width: 991.98px) {
    .ds-comm { grid-template-columns: 1fr; }
}

/* ---------- votes: what it pays, not just where -------------------------- */

/*
 * The strip listed site names and nothing else, though every site carries a
 * reward and a cooldown the admin has already configured. Those are the two
 * questions a player has, so they are the two columns.
 */

.ds-votes { border: 1px solid var(--ds-line); background: var(--ms-bg-1, rgba(255, 255, 255, .02)); }

.ds-vote {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 90px 120px;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ds-line);
    transition: background .16s ease;
}

.ds-vote:last-child { border-bottom: 0; }
.ds-vote:hover { background: color-mix(in srgb, var(--tg-theme-primary) 6%, transparent); }

.ds-vote__site {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: var(--ms-fg-0, #fff);
    font-weight: 700;
    font-size: .92rem;
}

.ds-vote__site img { max-height: 26px; width: auto; }

.ds-vote__reward { color: var(--tg-body-color); font-size: .86rem; }

.ds-vote__reward b {
    color: var(--tg-theme-secondary);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ds-vote__cd {
    color: var(--tg-body-color);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ds-vote__cd i { color: var(--tg-theme-primary); margin-right: 5px; }

.ds-vote__go {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid color-mix(in srgb, var(--tg-theme-primary) 45%, transparent);
    color: var(--tg-theme-primary);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}

.ds-vote__go:hover { background: var(--tg-theme-primary); color: #0b120f; }

@media (max-width: 767.98px) {
    .ds-vote { grid-template-columns: 1fr auto; gap: 8px 14px; }
    .ds-vote__cd { grid-column: 1; }
    .ds-vote__go { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- market highlights ------------------------------------------ */

/*
 * Five cards whose titles wrap to different depths were sitting at five
 * different heights. The card fills its column and the price line is pushed
 * to the bottom, so the row reads as one object again.
 */

.ds-band a:has(> .hm-item) { display: block; height: 100%; }

.ds-band .hm-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ds-band .hm-item > *:last-child { margin-top: auto; }

.ds-band .hm-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}

@media (prefers-reduced-motion: reduce) {
    .ds-band .hm-item { transition: none; }
    .ds-band .hm-item:hover { transform: none; }
}

/* ---------- hero: kicker, logo and plates ------------------------------- */

/*
 * The banner used to be the pitch on the left and the site logo again on the
 * right, 200px of the one thing the header had already said. The right half
 * carries the server's numbers now, on plates cut the same way the theme cuts
 * its buttons, and the live count is the plate that moves.
 */

.ds-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 6px 14px 6px 12px;
    color: var(--tg-theme-primary);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--tg-theme-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tg-theme-primary) 34%, transparent);
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.ds-kicker i { font-size: .82em; }

.ds-kicker em {
    padding-left: 10px;
    border-left: 1px solid color-mix(in srgb, var(--tg-theme-primary) 40%, transparent);
    color: rgba(255, 255, 255, .72);
    font-style: normal;
    font-weight: 700;
}

.ds-hero__logo { margin-bottom: 22px; text-align: center; }

.ds-hero__logo img {
    width: auto;
    filter: drop-shadow(0 0 34px color-mix(in srgb, var(--tg-theme-primary) 30%, transparent));
}

.ds-side {
    max-width: 540px;
    margin-left: auto;
}

.ds-plates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ds-plate {
    position: relative;
    padding: 16px 18px 14px;
    text-align: left;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--tg-theme-primary) 13%, transparent), transparent 62%),
        rgba(4, 8, 11, .9);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .42);
    border: 1px solid color-mix(in srgb, var(--tg-theme-primary) 28%, transparent);
    /* The theme cuts its buttons; these are cut to match. */
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

/* A hairline across the top catches the light the way the buttons do. */
.ds-plate::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--tg-theme-primary) 65%, transparent), transparent);
}

.ds-plate > i {
    display: block;
    margin-bottom: 9px;
    color: var(--tg-theme-primary);
    font-size: .95rem;
}

.ds-plate > .ds-live__dot { display: block; margin: 4px 0 13px; }

.ds-plate b {
    display: block;
    color: var(--tg-theme-secondary);
    font-size: clamp(1.25rem, 2vw, 1.62rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.ds-plate em {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, .55);
    font-style: normal;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* The live count is the server talking back, so it reads as the live one:
   white rather than gold, and the only plate with the pulse on it. */
.ds-plate--live b { color: #fff; }

.ds-plate--live {
    border-color: color-mix(in srgb, var(--tg-theme-primary) 48%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--tg-theme-primary) 22%, transparent), transparent 66%),
        rgba(4, 8, 11, .9);
}

/* An odd number of rates would leave the live plate stranded in its own row,
   so it takes the full width when it is the only thing on the last line. */
.ds-plate--live:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 991.98px) {
    /* Stacked, the banner logo is the third time the visitor has seen the
       same mark on one screen. The rest of the column is worth keeping. */
    .ds-hero__logo { display: none; }
    /* Clear of the wedge the banner ends on. */
    .ds-side { max-width: 560px; margin: 22px auto 40px; }
}

@media (max-width: 767.98px) {
    .ds-kicker { font-size: .68rem; letter-spacing: .14em; }
}

/* ---------- the countdown banner --------------------------------------- */

/*
 * With a launch running the banner used to centre a clock in an empty column.
 * It is the same two-column banner as the other hero now, so the clock aligns
 * with the copy above it rather than with the middle of the page.
 */

.ds-launch .slider__content { text-align: left; margin-bottom: 0; }

.ds-launch .launch-hero__countdown { justify-content: flex-start; margin-left: 0; }

.ds-launch .launch-hero__local-time { text-align: left !important; }

.ds-launch .launch-hero__finished,
.ds-launch .launch-hero__prereg { text-align: left; margin-left: 0; }

@media (max-width: 991.98px) {
    .ds-launch .slider__content,
    .ds-launch .launch-hero__local-time { text-align: center !important; }
    .ds-launch .launch-hero__countdown { justify-content: center; }
}

/* ---------- news: fill the band you were given ------------------------- */

/*
 * The grid is three-up, so a server with one post published left two thirds
 * of a full-height band empty -- which is the state most installs are in for
 * their first week. Few posts spread out instead: one lies down with its
 * artwork beside the copy, two take half the row each.
 */

.ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(1) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

.ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(1) .blog-post-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: stretch;
}

.ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(1) .news-thumb,
.ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(1) .news-thumb img {
    height: 100% !important;
    min-height: 240px;
}

.ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(1) .blog-post-content {
    align-self: center;
}

.ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(2),
.ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(2) ~ [class*="col-"] {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
}

@media (max-width: 767.98px) {
    .ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(1) .blog-post-item {
        grid-template-columns: 1fr;
    }
    .ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(1) .news-thumb,
    .ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(1) .news-thumb img {
        min-height: 0;
        height: 190px !important;
    }
    .ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(2),
    .ds-band .blog-area .row > [class*="col-"]:first-child:nth-last-child(2) ~ [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* ---------- the banner's second column --------------------------------- */

/* The trailer sets the column's width and the plates sit under it at the
   same one, so the two read as one stack rather than two widths. */

.ds-side .ms-hv { max-width: none; margin: 0 0 14px; }

.ds-side .ms-hv__title { margin-top: 9px; }

/* With a trailer above them the plates are the footnote, not the headline. */
.ds-side .ms-hv + .ds-plates .ds-plate { padding: 13px 15px 12px; }

.ds-side .ms-hv + .ds-plates .ds-plate b { font-size: clamp(1.1rem, 1.7vw, 1.4rem); }

.ds-side .ms-hv + .ds-plates .ds-plate > i,
.ds-side .ms-hv + .ds-plates .ds-plate > .ds-live__dot { margin-bottom: 7px; }

/* The line naming the server belongs with the buttons it sits under, not
   adrift at the foot of the column. */
.slider__content .ds-live { margin-top: 20px; padding-top: 14px; }

/* ---------- the clock joins the plates --------------------------------- */

/*
 * The countdown came from the template as soft rounded boxes, which read as a
 * different component sitting next to the angular plates beside it. Same cut,
 * same ground, same hairline: one hero, not two widgets.
 */

.ds-launch .launch-hero__cd-value {
    position: relative;
    border-radius: 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--tg-theme-primary) 13%, transparent), transparent 62%),
        rgba(4, 8, 11, .9);
    border: 1px solid color-mix(in srgb, var(--tg-theme-primary) 28%, transparent);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    box-shadow: 0 16px 38px rgba(0, 0, 0, .42);
}

.ds-launch .launch-hero__cd-value::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--tg-theme-primary) 65%, transparent), transparent);
}

/* The caption under the trailer lands on the brightest part of the artwork. */
.ds-side .ms-hv__title { text-shadow: 0 2px 10px rgba(0, 0, 0, .85); }

/* The wrapper keeps no ground of its own; the panel above is the object. */
.ds-launch .launch-hero__cd-item { background: none; border: 0; box-shadow: none; }

.ds-launch .launch-hero__cd-label {
    margin-top: 9px;
    color: rgba(255, 255, 255, .55);
}