/* Mythiq.net Design System & Main Stylesheet */

/* --- Fonts & Base Reset --- */
@import url('../external/fonts.googleapis.com/css2');

/* Design tokens (:root variables) live in assets/css/ui.css — loaded before
   this sheet by every shell. Do not re-declare them here. */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    /* The header floats over the page, so anchor jumps would otherwise land
       their target underneath it. */
    scroll-padding-top: calc(var(--header-offset) + var(--header-height) + 16px);
}

body {
    background-color: var(--bg-color);
    color: var(--text-white);
    font-family: var(--font-body);
    overflow-x: hidden;
    /* Base type matches the live theme exactly: Catamaran 19px/28px. */
    font-size: 19px;
    line-height: 28px;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-speed), background-color var(--transition-speed);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Mirrors the live layout: sections are inset 65px and the boxed container
   caps content at 1580px. The extra 10px is the column gutter, so text lands
   on x=75 at a 1600px viewport exactly like production. */
.container {
    max-width: 1710px;
    margin: 0 auto;
    padding: 0 75px;
    width: 100%;
}

.section-padding {
    padding: 100px 0;
}

/* --- Header & Navigation --- */
/* Production renders the nav as a floating, blurred pill inset 16px from the
   top of the viewport — not a flush full-width bar. */
header {
    position: fixed;
    top: var(--header-offset);
    left: 0;
    width: 100%;
    padding: 0 16px;
    z-index: 1000;
    background: none;
}

/* Positioned so the dropdown panels can anchor to the PILL — full bleed across
   it and flush under its bottom edge, the way live's megamenu hangs off the
   header. Nothing inside the bar between here and .nav-panel may be positioned,
   or the panel would anchor to that instead. */
header .navbar {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--header-height);
    padding: 0 41px;
    border-radius: var(--radius-lg);
}

/*
 * THE PILL'S GLASS LIVES HERE, NOT ON .navbar, AND THAT IS LOAD-BEARING.
 *
 * An element with a backdrop-filter becomes a BACKDROP ROOT: a descendant's own
 * backdrop-filter can then only sample what is painted inside that root, which
 * for the dropdown panel is nothing at all. With the blur on .navbar the panel
 * was translucent but perfectly sharp — the page read straight through it, and
 * no amount of blur on the panel did anything, because it was sampling an empty
 * backdrop rather than the page.
 *
 * Moving the pill's tint and blur onto a pseudo-element leaves .navbar itself
 * filter-free, so the panel is no longer inside a backdrop root and blurs the
 * page like the pill does. The pseudo-element has no descendants of its own, so
 * it roots nothing.
 *
 * z-index: -1 puts it behind the bar's contents; it stays above the page because
 * <header> establishes the stacking context both of them live in.
 */
header .navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    /* THE FILL AND THE BLUR ARE A CONTRACT, NOT A CHOICE. `.news-toolbar-inner`
       and `.wow-bar` restate exactly these two values so the three pills read as
       one system — change them here and both of those drift. What follows is
       edge treatment only, which is the nav's own. */
    background-color: rgba(18, 18, 20, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    /*
     * THE LIFT IS ALWAYS ON.
     *
     * It was briefly tied to scroll position, which is the usual trick — and it
     * was wrong here: the shadow snapped in on the first pixel of a wheel, so
     * the bar flinched instead of settling. This pill floats over the page at
     * every scroll position, top of the document included, so it casts at every
     * scroll position too. Nothing about the bar now answers to the page.
     *
     * It is the news toolbar's shape (`0 Ypx Bpx -Spx`, no border, so it reads
     * as the pill lifting off the page rather than a divider planted in it) cut
     * lighter — that bar only casts while it is stuck, for the moment it has to
     * separate itself from rows sliding under it, whereas this one casts all
     * day. At that duty a shadow you can see is a shadow you get tired of; this
     * one is meant to be felt and not read. The inset hairline is the lit top
     * edge every glass surface here carries — the dropdown panel declares the
     * same one.
     */
    box-shadow: 0 10px 20px -18px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: background-color var(--transition-speed);
}

header .logo img {
    height: 25px;
    width: auto;
    /* The wordmark is the one thing in the bar that is never in a hover or
       current state, so it gets the quietest possible acknowledgement. */
    transition: opacity var(--transition-speed);
}

header .logo:hover img {
    opacity: 0.82;
}

header .nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    height: 40px;
    margin-left: 15px;
}

/* Deliberately unpositioned — see the note on header .navbar. */
header .nav-item {
    height: 100%;
    display: flex;
    align-items: center;
}

/* The word + its caret, as one control. */
.nav-trigger {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

header .nav-link {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 19px;
    line-height: 40px;
    /* Uppercase at 19px sets tight; a third of a pixel of tracking is what stops
       the words reading as blocks. It is also what gives the travelling rule
       below a word-shaped target rather than a smear. */
    letter-spacing: 0.02em;
    /* 13, not 10, so the two words WITHOUT a caret are not visibly closer
       together than the two with one: 26px between plain neighbours against
       13 + the caret's own 11 either side of its glyph. The measured underline
       subtracts this same number — see main.js. */
    padding: 0 13px;
    height: 100%;
    display: flex;
    align-items: center;
    /* NOT #fff at rest. Four words all at full white is four things shouting at
       once and leaves the section you are actually in with nothing to say — the
       hierarchy is now rest / hovered / here, in that order. */
    color: rgba(247, 247, 247, 0.72);
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--transition-speed);
}

/* The caret is its own control, not decoration inside the link: the word goes
   to the section hub and this opens the panel. That split is what makes the
   menu work on a phone and from the keyboard — see the note in header.php. */
.nav-caret {
    background: none;
    border: none;
    padding: 0 11px 0 0;
    height: 100%;
    display: flex;
    align-items: center;
    color: inherit;
    font-size: 10px;
    cursor: pointer;
    /* A caret is a promise, not a label: it should be legible when you look for
       it and invisible when you are reading the words. */
    opacity: 0.45;
    transition: opacity var(--transition-speed);
}

header .nav-item:hover .nav-caret,
header .nav-item.is-open .nav-caret,
header .nav-item.is-current .nav-caret,
header .nav-item:focus-within .nav-caret {
    opacity: 1;
}

.nav-caret i {
    transition: transform var(--transition-speed);
}

/* Brand-blue rule that wipes in from the left on hover. It belongs to the
   TRIGGER, not the link, so it underlines the word and its caret as one
   control. Offset from the trigger's centre rather than its bottom, since the
   trigger is full-height inside the header pill and much taller than the
   text.
   THIS IS THE NO-JS FALLBACK. main.js retires it (.has-ink on the bar) in
   favour of one rule that travels between the words — see .nav-ink below. */
header .nav-trigger::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    top: calc(50% + 13px);
    height: 2px;
    border-radius: var(--radius-sm);
    background-color: var(--mythiq-blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-speed);
}

/* The section you are reading stays underlined. The nav never showed this
   before, so every page looked like the front page. */
header .nav-item.is-current .nav-trigger::after,
header .nav-item:hover .nav-trigger::after,
header .nav-item.is-open .nav-trigger::after,
header .nav-item:focus-within .nav-trigger::after {
    transform: scaleX(1);
}

/* --- The travelling rule ---------------------------------------------------
   The per-trigger ::after above is the no-JS fallback. Once main.js has
   measured the words it sets .has-ink on the bar, those go, and this single
   rule slides between them instead: one mark that moves rather than four that
   take turns appearing. It rests under the section you are in, so the bar
   always says where you are.

   Position and width arrive as --nav-ink-x / --nav-ink-w on .navbar, measured
   from the pill's own left edge — the same pair the dropdown panel reads to
   light its seam under the word that opened it. Both are composited properties
   at 2px tall, so this costs nothing to move. */
.navbar.has-ink .nav-trigger::after {
    display: none;
}

.nav-ink {
    position: absolute;
    /* The trigger's own rule sat at its centre + 13px, and the trigger is
       centred in the pill — so the same offset off the pill's centre lands the
       travelling rule on exactly the old line. */
    top: calc(50% + 13px);
    left: 0;
    height: 2px;
    width: var(--nav-ink-w, 0px);
    border-radius: var(--radius-sm);
    /* Lit in the middle and fading at both ends, so a rule that is moving reads
       as light travelling rather than a bar sliding. */
    background-image: linear-gradient(90deg,
        transparent,
        var(--mythiq-blue) 18%,
        var(--mythiq-hover-blue) 50%,
        var(--mythiq-blue) 82%,
        transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--mythiq-hover-blue) 35%, transparent);
    transform: translate3d(var(--nav-ink-x, 0px), 0, 0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.34s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
}

/* Set by main.js only once there is something to point at — a 0px-wide rule at
   x=0 would otherwise flash in the corner of the pill on first paint. */
.nav-ink.is-on {
    opacity: 1;
}

/* .is-open belongs in this list as much as :hover does — a panel opened by tap
   or by Enter has no pointer over it, and without this its word stayed at rest
   grey with its own menu hanging off it. */
header .nav-item:hover .nav-link,
header .nav-item.is-open .nav-link,
header .nav-item.is-current .nav-link,
header .nav-link:focus-visible {
    color: #ffffff;
}

header .nav-item:hover .nav-caret i,
header .nav-item.is-open .nav-caret i,
header .nav-item:focus-within .nav-caret i {
    transform: rotate(180deg);
}

.nav-caret:focus-visible,
.nav-panel-link:focus-visible,
.nav-panel-foot:focus-visible,
.nav-game:focus-visible {
    outline: 2px solid var(--mythiq-hover-blue);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* --- Dropdown panel --------------------------------------------------------
   The live site's megamenu: a bar the full width of the header, hanging off the
   bottom of it as one continuous surface, columns of plain links under a
   heading with a blue icon, and a centred "View all …" across the foot.

   It is inset by 16px on each side because that is header's own horizontal
   padding — the panel's edges have to line up with the floating pill above it
   or the two do not read as one object. It sits BEHIND the header (z-index 999
   against the header's 1000), so it slides out from under the bar rather than
   over it.

   Sizing is the one thing that is not copied from live: the old rebuild kept
   live's `repeat(4, 1fr)` while filling three of the columns, so a menu of
   eight links spanned 1468px with a quarter of it blank. The grid below is
   driven by how many columns the section actually has. */
.nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Glass, continuous with the pill above it — same tint, more blur, because
       this surface is five times the height and a 15px blur over 300px still
       reads as "picture behind glass" rather than "surface". The saturate is
       what stops a heavily blurred backdrop going grey.

       Legibility is bought back inside rather than with opacity: the top-down
       scrim below deepens the tint where the headings and the first row of
       links sit, and every surface on top of it (cards, tiles, hover states)
       is a dark wash rather than a white one. The brand-blue radials are what
       keep it from reading as smoked glass — they pick up the same light the
       header's hover glow throws. */
    background-color: rgba(18, 18, 20, 0.74);
    background-image:
        linear-gradient(180deg, rgba(12, 12, 14, 0.55), rgba(12, 12, 14, 0.12) 55%, rgba(12, 12, 14, 0.3)),
        radial-gradient(90% 150% at 8% -30%, color-mix(in srgb, var(--mythiq-blue) 18%, transparent), transparent 60%),
        radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--mythiq-blue) 8%, transparent), transparent 55%);
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    /* Cast shadow, plus the lit top edge every glass surface has. */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* 41px matches header .navbar's own gutter, so the first heading lines up
       with the logo and the nav above it. */
    padding: 42px 41px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 999;
}

/* A blue filament along the seam where the panel meets the pill, brightest
   under the word that opened it — and it means that literally now. The hot spot
   is centred on --nav-ink-x + half of --nav-ink-w, the same measurement the
   travelling rule above rides on, so the light that marks the word bleeds
   through the seam into the panel it opened. The panel is positioned against
   .navbar, which is where those numbers are measured from, so the two agree
   without any arithmetic.
   The fallbacks in the calc() are what a reader with JS off gets: the old fixed
   gradient, roughly where the first word sits. */
.nav-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background-image:
        radial-gradient(160px 100% at calc(var(--nav-ink-x, 190px) + var(--nav-ink-w, 70px) / 2) 50%,
            color-mix(in srgb, var(--mythiq-hover-blue) 85%, transparent),
            transparent 70%),
        linear-gradient(90deg,
            transparent,
            color-mix(in srgb, var(--mythiq-blue) 40%, transparent) 22%,
            color-mix(in srgb, var(--mythiq-blue) 40%, transparent) 45%,
            transparent);
}

/* The trigger is 40px tall inside a 66px pill, so 13px of the pill sits between
   it and the panel. Without this, moving the pointer straight down off the word
   crosses that strip, leaves the item, and the menu shuts in your face — which
   is what the old megamenu did. */
.nav-item.has-panel .nav-trigger::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 13px;
}

/* Note the third selector: focus INSIDE the panel, not anywhere in the item.
   Focusing the caret must not open the panel — Enter is what opens it, which is
   how a disclosure is expected to behave — but once it is open, tabbing through
   its links has to keep it that way. */
.nav-item.has-panel:hover > .nav-panel,
.nav-item.has-panel.is-open > .nav-panel,
.nav-item.has-panel > .nav-panel:focus-within {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Closing an open panel with the caret leaves the pointer inside the item, and
   the :hover rule above would reopen it on the spot. main.js sets this until
   the pointer leaves. */
.nav-item.has-panel.is-suppressed:hover > .nav-panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
}

/* While a panel is down, the pill and the panel are one surface, so the pill
   gives up its bottom corners to it. */
header .navbar:has(.nav-item.has-panel:not(.is-suppressed):hover),
header .navbar:has(.nav-item.has-panel.is-open),
header .navbar:has(.nav-panel:focus-within) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Link columns first, then whatever the section adds beside them. */
.nav-panel-body {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* --- Staggered entrance ---
   The panel fades in as one surface; its columns follow a beat behind it, each
   a little after the last, so the menu assembles left to right instead of
   arriving as a block. Transform and opacity only — both composited, so this
   costs nothing on the main thread.

   The :is() is what keeps this to one rule per state instead of three; the
   closed state is the default below, and every open state restores it. */
.nav-group,
.nav-card,
.nav-rail {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

:is(.nav-item.has-panel:hover, .nav-item.has-panel.is-open) :is(.nav-group, .nav-card, .nav-rail),
.nav-panel:focus-within :is(.nav-group, .nav-card, .nav-rail) {
    opacity: 1;
    transform: none;
}

.nav-group:nth-child(2),
.nav-card:nth-child(2) {
    transition-delay: 0.05s;
}

.nav-group:nth-child(3),
.nav-card:nth-child(3),
.nav-rail {
    transition-delay: 0.1s;
}

/* Closing is immediate: a menu that fades out in pieces reads as lag. */
.nav-item.has-panel:not(:hover):not(.is-open) :is(.nav-group, .nav-card, .nav-rail) {
    transition-duration: 0s;
    transition-delay: 0s;
}

/* Live's column rhythm, but only as many columns as the section has — a
   two-column menu is not stretched across four. 300px rather than live's ~390
   because a third column arrived (the shelves) and three at 390 crowded the
   games rail beside them down to a sliver; the rows are short and read fine
   narrower. */
.nav-panel-groups {
    flex: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 300px);
    justify-content: start;
}

.nav-group {
    min-width: 0;
    padding-right: 40px;
}

.nav-group-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-white);
    margin-bottom: 14px;
}

.nav-group-title i {
    color: var(--mythiq-blue);
    font-size: 17px;
    margin-right: 10px;
}

.nav-group-list {
    list-style: none;
}

/* A row, not a bare line: icon chip, label, the section's own count, and a
   chevron that arrives on hover. Live's menu is plain text at 19px/43px and the
   rhythm is kept — the row is the same height, it just carries more. */
.nav-panel-link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    margin-left: -10px;
    padding: 0 12px 0 10px;
    border-radius: var(--radius-lg);
    font-size: 19px;
    color: var(--text-light);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.nav-panel-ico {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--mythiq-hover-blue);
    background-color: color-mix(in srgb, var(--mythiq-blue) 18%, transparent);
    transition: background-color var(--transition-speed), color var(--transition-speed),
                box-shadow var(--transition-speed);
}

.nav-panel-label {
    flex: 1;
    min-width: 0;
}

/* The catalogue's own numbers, straight from the queries the games rail below
   already makes — a menu that says how much is behind a link. */
.nav-panel-count {
    flex: none;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background-color: rgba(10, 10, 12, 0.5);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    color: var(--text-muted);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.nav-panel-go {
    flex: none;
    font-size: 11px;
    color: var(--mythiq-hover-blue);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--transition-speed), transform var(--transition-speed);
}

.nav-panel-link:hover {
    color: var(--text-white);
    background-color: rgba(10, 10, 12, 0.55);
}

.nav-panel-link:hover .nav-panel-ico {
    background-color: var(--mythiq-blue);
    color: #ffffff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mythiq-blue) 15%, transparent);
}

.nav-panel-link:hover .nav-panel-count {
    background-color: color-mix(in srgb, var(--mythiq-blue) 20%, transparent);
    color: var(--text-light);
}

.nav-panel-link:hover .nav-panel-go {
    opacity: 1;
    transform: none;
}

/* The page you are already on. */
.nav-panel-link.is-here {
    color: var(--text-white);
    background-color: color-mix(in srgb, var(--mythiq-blue) 22%, transparent);
}

.nav-panel-link.is-here .nav-panel-ico {
    background-color: var(--mythiq-blue);
    color: #ffffff;
}

/* --- Key-art cards (the Tools panel) ---
   Three tools, three covers, one row across the bar. The art is the same key
   art the front page uses for the same three tools. */
.nav-cards {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 16px;
}

.nav-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background-color: rgba(10, 10, 12, 0.45);
    transition: border-color var(--transition-speed), background-color var(--transition-speed),
                transform var(--transition-speed), box-shadow var(--transition-speed),
                opacity 0.3s ease;
}

.nav-card:hover {
    border-color: color-mix(in srgb, var(--mythiq-blue) 65%, transparent);
    background-color: rgba(10, 10, 12, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.nav-card.is-here {
    border-color: color-mix(in srgb, var(--mythiq-blue) 55%, transparent);
    background-color: rgba(10, 10, 12, 0.6);
}

.nav-card-art {
    flex: none;
    width: 62px;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: #26272b;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mythiq-blue);
    font-size: 20px;
}

.nav-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.nav-card:hover .nav-card-art img {
    transform: scale(1.06);
}

.nav-card-text {
    flex: 1;
    min-width: 0;
}

.nav-card-title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var(--text-white);
}

.nav-card-meta {
    display: block;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-card-go {
    flex: none;
    font-size: 12px;
    color: var(--mythiq-hover-blue);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--transition-speed), transform var(--transition-speed);
}

.nav-card:hover .nav-card-go {
    opacity: 1;
    transform: none;
}

/* --- Games rail inside the Mods panel ---
   It fills the columns the Mods menu does not use. The bar runs the width of
   the header whatever is in it, and four links would leave two thirds of it
   empty; this is the part of the catalogue worth spending that space on. */
.nav-rail {
    flex: 1;
    min-width: 0;
    padding-left: 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* Under ~1520px the bar is no longer wide enough for three link columns AND a
   row of tiles beside them, and the rail would break into a ragged block three
   rows deep. It goes below the columns instead, where a single row still fits
   at the 1025px the desktop nav bottoms out at. */
@media (max-width: 1520px) {
    .nav-panel-body {
        flex-wrap: wrap;
    }
    .nav-rail {
        flex-basis: 100%;
        margin-top: 26px;
        padding: 26px 0 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
}

.nav-rail-items {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.nav-game {
    width: 86px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-game-art {
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: #26272b;
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: border-color var(--transition-speed), transform var(--transition-speed),
                box-shadow var(--transition-speed);
}

.nav-game-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.nav-game:hover .nav-game-art {
    border-color: color-mix(in srgb, var(--mythiq-blue) 70%, transparent);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45), 0 0 0 4px color-mix(in srgb, var(--mythiq-blue) 12%, transparent);
}

.nav-game:hover .nav-game-art img {
    transform: scale(1.07);
}

.nav-game-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24px;
    color: var(--text-muted);
}

/* Centres its arrow without a height of its own — the aspect-ratio on
   .nav-game-art is what sizes every tile, and a height:100% here would stretch
   this one to the flex column instead and push its caption out of line. */
.nav-game-art--all {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--mythiq-hover-blue);
    background-color: color-mix(in srgb, var(--mythiq-blue) 10%, transparent);
    border-style: dashed;
}

.nav-game-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    color: var(--text-light);
    /* Two lines, then ellipsis — "World of Warcraft Classic" must not push the
       tile taller than the one beside it — and two lines' worth of room even
       when the name needs one, so the counts below sit on a single line. */
    min-height: 30px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-game:hover .nav-game-name {
    color: var(--mythiq-hover-blue);
}

.nav-game-count {
    font-size: 11px;
    line-height: 14px;
    color: var(--text-muted);
}

/* --- Panel footer link ---
   Centred across the whole bar under a hairline, exactly as live closes its
   megamenu with "View all projects". The negative margins undo the panel's
   padding so the rule runs edge to edge. */
.nav-panel-foot {
    display: block;
    margin: 34px -41px 0;
    padding: 22px 41px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    font-size: 19px;
    line-height: 26px;
    color: var(--text-muted);
}

.nav-panel-foot:hover {
    color: var(--mythiq-hover-blue);
}

@media (prefers-reduced-motion: reduce) {
    /* The rule still marks the word, it just stops travelling to it. Opacity is
       left alone so it does not snap in and out of existence. */
    .nav-ink {
        transition: opacity 0.2s ease;
    }
    header .nav-trigger::after,
    .nav-caret i,
    .nav-panel,
    .nav-panel-go,
    .nav-card,
    .nav-card-art img,
    .nav-game-art,
    .nav-game-art img {
        transition: none;
    }
    /* The staggered entrance is motion for its own sake — the panel simply
       appears, contents and all. */
    .nav-group,
    .nav-card,
    .nav-rail {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .nav-panel {
        transform: none;
    }
    .nav-card:hover,
    .nav-game:hover .nav-game-art,
    .nav-card:hover .nav-card-art img,
    .nav-game:hover .nav-game-art img {
        transform: none;
    }
}

/* --- Nav actions, right ----------------------------------------------------
   Six controls of four different shapes used to sit here in one undifferentiated
   run of 25px gaps: three brand glyphs, a solid blue block, a name and a disc.
   They are now two CLUSTERS — where the site lives, then what you do here —
   divided by a hairline, and every control in them shares one geometry: a
   quiet 30-36px square that fills faintly under the pointer. The only saturated
   colour left in the bar is the one the search button takes on hover, which is
   what makes it read as the action rather than as decoration. */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto; /* nav sits next to the logo; actions push to the right */
}

.nav-socials {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 15px;
}

/* The divider between the two clusters. :has() rather than :empty because the
   row is PHP-rendered and carries whitespace: a site with every social setting
   blank would otherwise print a rule with nothing on one side of it. */
.nav-socials::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 20px;
    margin-top: -10px;
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-socials:not(:has(a)) {
    padding-right: 0;
}

.nav-socials:not(:has(a))::after {
    display: none;
}

.nav-social-link {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 15px;
    transition: color var(--transition-speed), background-color var(--transition-speed);
}

/* Recolour and a faint fill, not a scale: ui.css sets "hover is a recolor only,
   no lifts" for every button on the site, and the transform here was not even
   transitioned — it snapped. */
.nav-social-link:hover {
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.07);
}

/* Was a solid blue 36px block — the loudest thing in a bar whose whole idea is
   restraint, and lit at full strength whether or not anyone was going to use
   it. It is a glass control at rest now and takes the brand blue, with the same
   4px halo the panel's icon chips use, only under the pointer. */
.nav-search-btn {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    border: 1px solid rgba(255, 255, 255, 0.09);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background-color var(--transition-speed),
                border-color var(--transition-speed),
                color var(--transition-speed),
                box-shadow var(--transition-speed);
}

.nav-search-btn:hover {
    background-color: var(--mythiq-blue);
    border-color: color-mix(in srgb, var(--mythiq-blue) 70%, transparent);
    color: #ffffff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mythiq-blue) 15%, transparent);
}

.nav-account {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-account-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-light);
    cursor: pointer;
}

/* The whole control is one link now, so hovering the avatar highlights the
   label too rather than only a direct hover on the text. */
.nav-account:hover .nav-account-text {
    color: var(--mythiq-hover-blue);
}

/* Signed out: a glass disc with the icon set's own user glyph. The gravatar
   placeholder that used to fill it (a photographic grey head, at full
   brightness) read as a real person's avatar and pulled the eye to the one
   control in the bar that has nothing to report yet. `.is-authed` further down
   overrides all of this with the member's initial on brand blue, which is what
   the bar SHOULD shout about. */
.nav-avatar {
    /* Rendered as a <span> in the mobile drawer, so it has to be told. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed),
                color var(--transition-speed);
}

.nav-account:hover .nav-avatar,
.mobile-menu-account:hover .nav-avatar {
    color: var(--text-light);
}

/* The same halo the search button and the panel's icon chips take, so every
   round-trip through this bar answers the pointer the same way. */
.nav-account:hover .nav-avatar,
.nav-account:focus-visible .nav-avatar,
.mobile-menu-account:hover .nav-avatar {
    border-color: color-mix(in srgb, var(--mythiq-hover-blue) 55%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mythiq-blue) 15%, transparent);
}

.nav-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 22px;
    cursor: pointer;
    /* 44px hit area — the glyph alone was 30x28, under the touch minimum. */
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-right: -10px;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.nav-hamburger:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

/* --- Mobile Menu Drawer (Off-canvas Left) --- */
/* Slides on a transform rather than `left`, so the width can be relative: a
   fixed 300px drawer with a fixed -320px offset left no room for a narrower
   phone and had to be re-measured every time either number moved. */
.mobile-menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(330px, 88vw);
    height: 100dvh;
    background-color: #1a1b1e;
    z-index: 1500;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
    padding: 30px 20px calc(20px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.3s;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobile-menu-drawer.open {
    transform: none;
    visibility: visible;
}

/* The consent banner sits at z-index 10000 and covers the bottom of the drawer
   — which is now where the account row and the socials live. The drawer is a
   modal surface while it is open, so the banner goes behind it and comes back
   the moment it closes. */
body.drawer-open .cookies-banner {
    z-index: 1300;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-drawer {
        transition: none;
    }
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.mobile-menu-logo img {
    height: 32px;
}

.mobile-menu-close {
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 20px;
    cursor: pointer;
    /* Same reason as .nav-hamburger — the glyph was a 25x23 target. */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -10px -12px -10px 0;
}

.mobile-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.mobile-nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 6px;
    margin-bottom: 6px;
}

/* The link and the caret are separate targets. The old drawer hung the
   accordion on the link itself and preventDefault()ed it, so the Tools section
   — the only top-level page with children at the time — could not be opened
   from a phone at all. */
.mobile-nav-row {
    display: flex;
    align-items: center;
}

/* Padding rather than a bare line of text, so each row is a 44px tap target. */
.mobile-nav-link {
    flex: 1;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
}

.mobile-nav-item.is-current .mobile-nav-link {
    color: var(--mythiq-hover-blue);
}

.mobile-nav-caret {
    flex: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 13px;
    cursor: pointer;
    margin-right: -10px;
}

.mobile-nav-caret i {
    transition: transform var(--transition-speed);
}

.mobile-nav-caret[aria-expanded="true"] i {
    transform: rotate(180deg);
    color: var(--mythiq-hover-blue);
}

.mobile-submenu {
    padding: 4px 0 10px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Beats the element rule above — [hidden] alone would lose to it. */
.mobile-submenu[hidden] {
    display: none;
}

.mobile-submenu-title {
    font-size: 11px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: bold;
    margin: 10px 0 2px;
}

.mobile-submenu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 20px;
    color: var(--text-light);
}

.mobile-submenu-link i {
    width: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--mythiq-blue);
}

.mobile-submenu-link.is-here {
    background-color: color-mix(in srgb, var(--mythiq-blue) 14%, transparent);
    color: var(--text-white);
}

/* --- Drawer footer: account + socials ---
   Everything the header hides below 1024px (the account label, the social
   links) has to be reachable somewhere, and this drawer is the only somewhere
   there is. */
.mobile-menu-foot {
    margin-top: auto;
    padding-top: 24px;
}

.mobile-menu-account {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background-color: rgba(255, 255, 255, 0.03);
}

.mobile-menu-account:hover {
    border-color: var(--mythiq-blue);
}

.mobile-menu-account .nav-avatar {
    flex: none;
}

.mobile-menu-account-text {
    flex: 1;
    min-width: 0;
}

.mobile-menu-account-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: var(--text-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-menu-account-sub {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-muted);
}

.mobile-menu-account > i {
    font-size: 12px;
    color: var(--text-muted);
}

.mobile-menu-socials {
    padding-top: 20px;
    display: flex;
    justify-content: center;
    gap: 24px;
}

.mobile-menu-socials .nav-social-link {
    font-size: 18px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1400;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- Fullscreen Search Overlay ---
 *
 * The site's search lives in two places — this layer, which is chrome and is on
 * every page, and the /search/ results page, whose styles are in search.css and
 * are scoped so they cannot reach in here. The one thing they SHARE is the
 * scope switcher (.search-scopes/.search-scope, below): it is the same control
 * answering the same question in both places, so it is defined once, here,
 * where the global stylesheet can reach both.
 *
 * TOP-ALIGNED, not centred. The panel grows and shrinks on every keystroke, and
 * a vertically centred column makes the field itself jump each time the result
 * count changes — the one element the reader is looking at is the one that will
 * not hold still. */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(32, 33, 37, 0.98);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(80px, 14vh, 160px) 20px 20px;
}

.search-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* The layer scrolls its own results; the page behind it must not move. Unlike
   the drawer's lock this is not inside a media query — the overlay is the
   fullscreen layer at every width. */
body.search-open {
    overflow: hidden;
}

.search-close-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 32px;
    cursor: pointer;
    transition: transform var(--transition-speed);
}

.search-close-btn:hover {
    transform: rotate(90deg);
    color: var(--mythiq-hover-blue);
}

.search-form-container {
    width: 100%;
    max-width: 720px;
    text-align: center;
    /* The column is a fixed height box so the results can scroll inside it
       rather than pushing the field off the top of a phone. */
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
}

/* The form is the fixed part of the column; only the results below it flex. */
.search-overlay [data-search-form] { flex: 0 0 auto; }

/* --- The scope switcher, shared with /search/ ---
 *
 * The same underline tabs the mod detail page uses (.mods-tab in mods.css):
 * heading type, muted until chosen, a 2px blue rule under the active word, all
 * sitting on one hairline. Not pills — this site has no chips anywhere.
 *
 * Two active selectors because the two instances are different elements for
 * good reason: <button aria-pressed> in the overlay, where the control filters
 * a listbox inside a live form, and <a aria-current> on /search/, where
 * changing scope is navigation to a url worth having. */
.search-scopes {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    margin-bottom: 8px;
}

.search-scopes::-webkit-scrollbar { display: none; }

.search-scope {
    flex: 0 0 auto;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 16px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-speed), border-color var(--transition-speed);
}

.search-scope:hover { color: var(--text-white); }

.search-scope[aria-pressed="true"],
.search-scope[aria-current="true"] {
    color: var(--text-white);
    border-bottom-color: var(--mythiq-blue);
}

.search-scope:focus-visible {
    outline: 2px solid var(--mythiq-hover-blue);
    outline-offset: -2px;
}

.search-input {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 3px solid var(--text-muted);
    color: var(--text-white);
    font-size: 32px;
    font-family: var(--font-heading);
    font-weight: 700;
    padding: 10px 0;
    text-align: center;
    outline: none;
    transition: border-color var(--transition-speed);
}

.search-input:focus {
    border-color: var(--mythiq-hover-blue);
}

.search-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex: 0 0 auto;
    order: 3;   /* under the results, which is where a running count belongs */
}

.search-hint {
    flex: 0 0 auto;
    order: 4;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.7;
}

.search-hint[hidden] { display: none; }

/* --- Live results inside the overlay ---
 *
 * Deliberately quieter and tighter than the same rows on /search/ (search.css):
 * this is a jump list somebody is reading while still typing, not a page they
 * came to read. Same tokens, one step down in size and padding. */
.search-live {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Scrolling to the end of the list must not start scrolling the page
       underneath — the page is locked, but the rubber-banding still reads as
       the layer coming loose. */
    overscroll-behavior: contain;
    margin-top: 20px;
    text-align: left;
}

.search-live[hidden] { display: none; }

.search-live-group + .search-live-group { margin-top: 20px; }

.search-live-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.search-live-group-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
}

.search-live-group-title i {
    color: var(--mythiq-blue);
    font-size: 12px;
}

.search-live-more {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-speed);
}

.search-live-more:hover,
.search-live-more:focus-visible { color: var(--mythiq-hover-blue); }

.search-live-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-speed);
}

/* Hover and the keyboard highlight are the same state on purpose — two
   different-looking "current rows" in one list is two cursors. */
.search-live-row.is-active,
.search-live-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.search-live-row:focus-visible {
    outline: 2px solid var(--mythiq-hover-blue);
    outline-offset: -2px;
}

.search-live-main { min-width: 0; }

.search-live-title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    color: var(--text-white);
}

.search-live-row.is-active .search-live-title,
.search-live-row:hover .search-live-title { color: var(--mythiq-hover-blue); }

/* The matched run inside a title. A <mark> defaults to black on yellow, which
   on this surface is a highlighter pen; the mark here is the accent colour and
   nothing else. */
.search-live-title mark {
    background: none;
    color: var(--mythiq-blue);
    font-weight: 700;
}

.search-live-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.45;
}

.search-live-meta {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.search-live-empty {
    padding: 24px 0;
    color: var(--text-muted);
    font-size: 15px;
}

/* On a phone the layer is nearly the whole screen and the keyboard takes the
   bottom half of it, so the chrome around the list gets out of the way: the
   field comes down to a readable size, the keyboard hint goes (there is no
   keyboard to hint at), and what is left of the height goes to results. */
@media (max-width: 640px) {
    .search-overlay {
        padding: 72px 16px 16px;
    }
    .search-close-btn {
        top: 14px;
        right: 14px;
        font-size: 26px;
    }
    .search-input {
        font-size: 22px;
    }
    .search-hint { display: none; }
    .search-live { margin-top: 14px; }
    .search-live-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .search-live-meta { white-space: normal; }
}

/* --- Hero Section --- */
.hero {
    min-height: 1100px;
    background-image: url('../img/uploads/2021/01/Mythiqnet_bg3-min.jpg');
    background-position: top center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(32, 33, 37, 0.24) 55%, #202125 100%);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    /* Keeps the headline readable where the oversized deck reaches it: text
       always paints above the tiles, never under them. */
    position: relative;
    z-index: 3;
}

.hero-subtitle {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 1px;
    color: var(--text-white);
    margin-bottom: 10px;
}

.hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 53px;
    line-height: 1.25;
    color: #ffffff;
    margin-bottom: 25px;
}

/* Typewriter rotation */
.cd-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
    color: var(--mythiq-blue);
    vertical-align: top;
}

.cd-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
    opacity: 0;
    font-weight: 800;
}

.cd-words-wrapper b.is-visible {
    position: relative;
    opacity: 1;
    animation: push-in 0.6s;
}

.cd-words-wrapper b.is-hidden {
    animation: push-out 0.6s forwards;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* The story-btn's 2px border adds 4px to its outer box next to the
   borderless hero-btn, so shave the padding here — the pair then measures
   identical (font and text inset included), and the story section's own
   Learn more button is untouched. */
.hero-actions .story-btn {
    padding: 18px 38px;
}

.hero-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mythiq-blue);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    text-transform: none;
    padding: 20px 40px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-speed);
}

.hero-btn:hover {
    background-color: var(--mythiq-hover-blue);
}

.hero-graphic {
    display: flex;
    justify-content: flex-end;
    /* Pull the graphic's right edge out to the viewport border, so the deck
       bleeds off the page instead of stopping at the container gutter.
       .hero's overflow:hidden absorbs the overhang; reset in <=1024px. */
    margin-right: calc(50% - 50vw);
}

/* --- Hero Tools Deck --- */
/* Replaces the old intro_image composite. A strict grid wall of small square
   slots filling the right half of the screen to its edge; every even row sits
   shifted half a cell, brick-style, which is where the zig-zag comes from.
   Each slot carries a placeholder shell PLUS every face it may become — a
   tool, a hub, or a live mod dealt server-side (index.php) — and main.js §7
   fades one or two slots every few seconds into a different face, or back
   into its shell, so tiles read as placeholders one moment and live services
   the next. Without JS each slot simply rests on its first face. */
.hero-deck {
    position: relative;
    /* Deliberately oversized: Filip wants big squares over safe margins.
       Where the wall would reach the text column (laptop widths), it slides
       UNDER it — .hero-content paints above (see its z-index), so a tile may
       pass behind the headline rather than over it. */
    width: min(58vw, 1120px);
    margin-left: auto;
    animation: hd-enter 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

/* Ambient glow behind the field. */
.hd-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92%;
    height: 72%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--mythiq-hover-blue) 15%, transparent) 0%,
        transparent 72%);
    animation: hd-breathe 6s ease-in-out infinite;
    pointer-events: none;
}

/* The wall: one grid per row so whole rows can sit offset from each other.
   --hd-shift is roughly half a cell at each breakpoint; odd rows take it,
   the right-hand overflow bleeds off the viewport (.hero clips it) while
   the left edge steps in and out — the zig-zag silhouette. */
.hd-stage {
    --hd-shift: 66px;
    position: relative;
}

.hd-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.hd-row:nth-child(even) {
    transform: translateX(var(--hd-shift));
}

.hd-slot {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
}

/* Empty shells: quiet dark-glass cells with their skeleton title bars, the
   resting state of a slot. The old shimmer sweep is gone — it read as
   "content loading". What idles instead is one soft brand-blue aura deep in
   the cell, breathing slowly on its own clock: standby light, not progress
   bar. The aura's base opacity is its reduced-motion resting state. */
.hd-tile {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background-color: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 0.45s ease;
    /* Entrance, then the idle pulse. The pulse rides background/border
       ALPHA rather than opacity on purpose: .is-dim drives this element's
       real opacity during swaps, and a running animation would override
       it. Same slow breathing read, no tug-of-war. */
    animation: hd-tile-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards,
               hd-tile-breathe var(--pulse-dur, 11s) ease-in-out infinite;
}

.hd-tile::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(closest-side,
        rgba(0, 162, 237, 0.16) 0%,
        rgba(0, 162, 237, 0) 70%);
    opacity: 0.4;
    animation: hd-idle-glow var(--glow-dur, 6s) ease-in-out infinite;
}

/* Skeleton title lines, echoing the real card's plate. */
.hd-tile span {
    position: absolute;
    left: 14px;
    display: block;
    height: 7px;
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, 0.06);
}

.hd-tile span:first-child { bottom: 27px; width: 58%; }
.hd-tile span:last-child  { bottom: 15px; width: 38%; }

/* Dealing is random server-side, so offsets by slot position give the wall
   an unrepeatable rhythm without pretending to be hand-placed. The aura and
   the surface pulse deliberately run on DIFFERENT clocks per tile, so no two
   cells ever breathe in step. */
.hd-slot:nth-child(2n) .hd-tile { --glow-dur: 7.5s; --pulse-dur: 13s; }
.hd-slot:nth-child(3n) .hd-tile { --glow-dur: 5s;   --pulse-dur: 9s; }
.hd-row:nth-child(even) .hd-tile::before { animation-delay: -2.4s; }
.hd-row:nth-child(odd) .hd-tile::before  { animation-delay: -4.8s; }

/* A slot mid-swap dims whatever it shows. The EXIT gets its own gentler
   curve here: sink, shrink and soften out of focus — the card reads as
   dissolving into the wall rather than being switched off. Coming back,
   the base spring above takes over and the face pops in past 1.0 before
   settling. [hidden] needs restating because the display rules below would
   otherwise out-rank the UA stylesheet's. */
.hd-card[hidden] {
    display: none;
}

.hd-slot.is-dim > .hd-tile {
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
    transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}

.hd-slot.is-dim > .hd-card {
    opacity: 0;
    transform: scale(0.86) translateY(8px);
    filter: blur(7px) saturate(0.6);
    pointer-events: none;
    transition: opacity 0.38s ease-in,
                transform 0.38s ease-in,
                filter 0.38s ease-in;
}

/* The flash the slot gives as its new face materialises. */
.hd-slot.is-landing {
    box-shadow: 0 0 28px -8px var(--shadow-glow),
                inset 0 0 18px -12px var(--shadow-glow);
}

/* The faces themselves — tools, hubs and mods share one card. They fill
   their slot absolutely, so a wide feature band shows more art while every
   card keeps the same proportions.
   The BASE transition is the entrance: a soft spring (slight overshoot on
   the scale-back) with the blur burning off. The exit lives on .is-dim
   below, so arriving and leaving get different curves. */
.hd-card {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 2;
    border-radius: var(--radius-md);
    background-color: var(--card-bg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
                0 24px 44px -18px rgba(2, 1, 1, 0.55);
    overflow: hidden;
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.55s cubic-bezier(0.3, 1.35, 0.5, 1),
                filter 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.3s ease;
    animation: hd-card-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.hd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
                0 34px 54px -20px var(--shadow-glow);
}

/* Same lit edge as .game-box::after. */
.hd-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: var(--radius-md);
    padding: 1px;
    background: linear-gradient(155deg,
        var(--mythiq-hover-blue) 0%,
        color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent) 42%,
        rgba(255, 255, 255, 0.22) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-speed);
    pointer-events: none;
}

.hd-card:hover::after,
.hd-card:focus-visible::after {
    opacity: 1;
}

.hd-card:focus-visible {
    outline: 2px solid var(--mythiq-hover-blue);
    outline-offset: 4px;
}

/* Cover art — same treatment as .game-box-img. */
.hd-card-art {
    position: absolute;
    inset: 0;
    background-image: var(--cover);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.02);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.hd-card:hover .hd-card-art {
    transform: scale(1.08);
}

/* Keeps the top of the art from washing out against the page. */
.hd-card-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 10, 12, 0.42) 0%,
        rgba(10, 10, 12, 0) 30%);
    pointer-events: none;
}

/* Faces without artwork (hubs, coverless mods): the same brand gradient
   .game-box falls back to, with a single glyph standing in for the photo. */
.hd-card-art--flat {
    background-image: radial-gradient(120% 120% at 20% 0%,
            rgba(35, 143, 204, 0.38) 0%,
            rgba(35, 143, 204, 0) 62%),
        linear-gradient(145deg, #23252b 0%, #16171a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hd-card-art--flat i {
    position: relative;
    z-index: 1;
    font-size: 22px;
    color: #7fd4ff;
    text-shadow: 0 0 22px var(--shadow-glow);
}

/* Title band — one gradient ramp instead of .game-box's three blurred
   copies. Scaled for the small square cells: two short lines maximum. */
.hd-card-plate {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    padding: 30px 12px 11px;
    background: linear-gradient(180deg,
        rgba(24, 24, 25, 0) 0%,
        rgba(24, 24, 25, 0.88) 40%,
        rgba(24, 24, 25, 0.97) 100%);
}

.hd-card-tag {
    display: block;
    font-family: var(--font-heading);
    font-size: 8px;
    line-height: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mythiq-hover-blue);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-card-title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    color: var(--text-white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hd-card-open {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--mythiq-blue) 88%, transparent);
    color: #ffffff;
    font-size: 11px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-speed), transform var(--transition-speed);
}

.hd-card:hover .hd-card-open {
    opacity: 1;
    transform: none;
}

@keyframes hd-enter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes hd-tile-in {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
}

@keyframes hd-card-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
}

@keyframes hd-idle-glow {
    0%, 100% { opacity: 0.15; transform: scale(0.96); }
    50%      { opacity: 0.8; transform: scale(1.02); }
}

/* The empty tile's slow surface pulse: the glass brightens and dims over
   many seconds. Alpha channels only — see the note on .hd-tile for why this
   is not an opacity animation. */
@keyframes hd-tile-breathe {
    0%, 100% {
        border-color: rgba(255, 255, 255, 0.07);
        background-color: rgba(255, 255, 255, 0.02);
    }
    50% {
        border-color: rgba(255, 255, 255, 0.14);
        background-color: rgba(255, 255, 255, 0.055);
    }
}

@keyframes hd-breathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* Reduced motion: the wall freezes on whatever each slot first showed —
   no swaps, no idle glow, no entrance, and the zig-zag offsets stay (they
   are static layout, not motion). main.js §7 never starts its loop. */
@media (prefers-reduced-motion: reduce) {
    .hero-deck,
    .hd-tile,
    .hd-card {
        animation: none;
    }
    .hd-tile::before {
        animation: none;
        opacity: 0.3;
    }
    .hd-glow {
        animation: none;
    }
    .hd-card,
    .hd-tile {
        transition: none;
    }
}

/* Asymmetrical Triangle Shape Divider */
.hero-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 3;
}

.hero-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
    transform: rotateY(180deg);
}

.hero-divider .shape-fill {
    fill: rgba(32, 33, 37, 0.55);
}

/* --- Projects Section --- */
/* The title block overlaps the hero by 200px, exactly as on the live page. */
.projects-section {
    position: relative;
    z-index: 10;
    margin-top: -200px;
    padding-bottom: 14px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-left: 3px solid var(--mythiq-blue);
    padding-left: 10px;
    margin-bottom: 25px;
}

.section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 53px;
    text-transform: uppercase;
    line-height: 53px;
    color: var(--text-white);
}

.section-subtitle {
    font-size: 19px;
    line-height: 28px;
    color: var(--text-muted);
    margin-top: 5px;
}

.btn-view-all {
    display: inline-flex;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
    align-items: center;
    gap: 8px;
    background-color: rgba(0, 0, 0, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-white);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    text-transform: none;
}

.btn-view-all:hover {
    background-color: var(--mythiq-hover-blue);
    border-color: var(--mythiq-hover-blue);
}

/* --- Homepage section framing -----------------------------------------------
   "View all" sits after the grid in the markup so a phone can drop it below the
   cards, where it closes off a scrollable shelf instead of adding a third line
   to the header. Grid areas put it back on the header's right edge here, so the
   desktop composition is the one it always was. The shared margin-bottom is
   what lands it on the header's baseline, replacing the old align-items:
   flex-end it got as a flex child. */
.projects-section > .container,
.news-section > .container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "head more"
        "grid grid";
    align-items: end;
    column-gap: 20px;
}
.projects-section > .container > .section-header,
.news-section > .container > .section-header { grid-area: head; }
.projects-grid,
.news-grid { grid-area: grid; }
.projects-section > .container > .btn-view-all,
.news-section > .container > .btn-view-all {
    grid-area: more;
    margin-bottom: 25px;
}

/* --- Project game boxes -----------------------------------------------------
   A card is one square cover, nothing more. There is no plate under the art —
   the title sits on the art itself, over a progressive blur that ramps from
   clear to frosted as it reaches the bottom edge. Hovering lifts the card and
   grows that band upward to make room for the synopsis.
   Every accent is the brand blue and every size comes from the site's own
   scale — the cards carry no colour or type of their own.
   -------------------------------------------------------------------------- */
/* auto-fit + 1fr: however many cases there are, they share the full container
   width. Three fill it today; dropping a fourth into the markup needs no CSS
   change — the tracks just resize. The 240px floor is what decides when the
   row wraps on narrower screens. */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

/* Every card is exactly its own art: square, nothing below it. Rows line up
   without needing the titles to be the same number of lines.
   --cover is the cover image, set inline in the markup. It is a variable
   rather than a background on one element because the blur layers need to
   paint the same image, and --ramp is the run the frost fades in across. */
.game-box {
    --ramp: 90px;
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    background-color: var(--card-bg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
                0 24px 44px -18px rgba(2, 1, 1, 0.55);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform;
}

.game-box:hover,
.game-box:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
                0 44px 74px -26px var(--shadow-glow);
}

.game-box:focus-visible {
    outline: 2px solid var(--mythiq-hover-blue);
    outline-offset: 4px;
}

/* Accent ring drawn as a 1px gradient outline (gradient fill + xor mask keeps
   only the border band), lit on hover so the case edge catches the brand
   blue. */
.game-box::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: var(--radius-md);
    padding: 1px;
    background: linear-gradient(155deg,
        var(--mythiq-hover-blue) 0%,
        color-mix(in srgb, var(--mythiq-hover-blue) 0%, transparent) 42%,
        rgba(255, 255, 255, 0.22) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-speed);
    pointer-events: none;
}

.game-box:hover::after,
.game-box:focus-visible::after {
    opacity: 1;
}

/* Cover art ------------------------------------------------------------- */
/* Square, not 3:4. Two of the three covers are 500x500 sources, so a portrait
   crop cut their sides off. */
.game-box-art {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* The art is its own layer so it can push in slowly on hover without dragging
   the frosted band with it. */
.game-box-img {
    position: absolute;
    inset: 0;
    background-image: var(--cover);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.game-box:hover .game-box-img,
.game-box:focus-visible .game-box-img {
    transform: scale(1.07);
}

/* Keeps the top of the art from washing out against the page. */
.game-box-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 10, 12, 0.42) 0%,
        rgba(10, 10, 12, 0) 30%);
    z-index: 1;
    pointer-events: none;
}

/* Title band ------------------------------------------------------------- */
/* Anchored to the bottom edge and sized by its own content, so when the
   synopsis expands on hover the frosted band grows with it. */
/* --ramp is also the plate's top padding, so the frost is at full strength
   everywhere text sits, whatever height the plate grows to on hover. Every
   stop below is measured from the bottom edge, never as a percentage of the
   plate, or expanding the plate would dilute the fade and strand the title on
   bare art. */
.game-box-plate {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
}

/* Progressive blur: three copies of the cover, each blurrier than the last and
   each masked to fade out earlier in the ramp, so the art goes soft gradually
   instead of hitting one hard blur line.
   These are real blurred copies (`filter`) rather than `backdrop-filter`
   layers. backdrop-filter is the tidier way to write this, but it silently
   renders nothing in enough situations — Safari drops it whenever the element
   is also masked, and any filtering ancestor detaches it from its backdrop —
   and a bottom band that only sometimes blurs is worse than none. */
.game-box-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.game-box-veil span {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Square and pinned to the bottom edge: exactly the box `.game-box-img` paints
   into, so `cover` frames the image identically and the blurred copy lines up
   with the sharp art no matter how tall the plate is. */
.game-box-veil span::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-image: var(--cover);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Slightly oversized: blur samples transparency past an element's edges,
       which would thin the copy out along the card's bottom edge. */
    transform: scale(1.06);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.game-box:hover .game-box-veil span::before,
.game-box:focus-visible .game-box-veil span::before {
    transform: scale(1.13);
}

.game-box-veil span:nth-child(1) {
    -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--ramp)), transparent 100%);
    mask-image: linear-gradient(to top, #000 calc(100% - var(--ramp)), transparent 100%);
}

.game-box-veil span:nth-child(1)::before {
    filter: blur(4px);
}

.game-box-veil span:nth-child(2) {
    -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--ramp)), transparent calc(100% - var(--ramp) * 0.4));
    mask-image: linear-gradient(to top, #000 calc(100% - var(--ramp)), transparent calc(100% - var(--ramp) * 0.4));
}

.game-box-veil span:nth-child(2)::before {
    filter: blur(11px);
}

.game-box-veil span:nth-child(3) {
    -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--ramp)), transparent calc(100% - var(--ramp) * 0.72));
    mask-image: linear-gradient(to top, #000 calc(100% - var(--ramp)), transparent calc(100% - var(--ramp) * 0.72));
}

.game-box-veil span:nth-child(3)::before {
    filter: blur(26px);
}

/* Darkens the frosted run just enough to hold white text at any brightness of
   cover art. Blur alone doesn't guarantee contrast. */
.game-box-veil::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(10, 10, 12, 0.8) 0%,
        rgba(10, 10, 12, 0.72) calc(100% - var(--ramp)),
        rgba(10, 10, 12, 0.3) calc(100% - var(--ramp) * 0.45),
        rgba(10, 10, 12, 0) 100%);
}

.game-box-plate-inner {
    position: relative;
    z-index: 1;
    padding: var(--ramp) 20px 20px;
}

.game-box-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.game-box-heading h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.4px;
    color: var(--text-white);
}

/* The arrow is the affordance on touch, where the synopsis never shows. */
.game-box-arrow {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-muted);
    transition: transform var(--transition-speed),
                color var(--transition-speed);
}

.game-box:hover .game-box-arrow,
.game-box:focus-visible .game-box-arrow {
    transform: translateX(4px);
    color: var(--mythiq-hover-blue);
}

/* Carries what used to be the chip on the art: platform first in brand blue,
   then the tool type. */
.game-box-meta {
    margin-top: 3px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: var(--mythiq-blue);
}

.game-box-meta span {
    color: var(--text-muted);
}

.game-box-meta span::before {
    content: "·";
    margin: 0 6px;
}

/* Synopsis ---------------------------------------------------------------- */
/* Gated behind (hover: hover): on a touch screen there is no hover, so this
   block — and the Explore button inside it — would be dead weight in the DOM,
   permanently invisible. Touch gets the whole case as one big tap target
   instead; the synopsis lives on the tool's own page. */
.game-box-reveal {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    /* 0fr -> 1fr animates the row height without anyone having to know what
       that height is, so a longer synopsis needs no CSS change. */
    .game-box-reveal {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
                    opacity 0.3s ease;
    }

    .game-box-reveal > div {
        overflow: hidden;
    }

    .game-box:hover .game-box-reveal,
    .game-box:focus-visible .game-box-reveal {
        grid-template-rows: 1fr;
        opacity: 1;
    }
}

.game-box-reveal p {
    padding-top: 14px;
    font-size: 14px;
    line-height: 22px;
    color: var(--text-light);
}

.game-box-cta {
    display: inline-flex;
    transition: background-color var(--transition-speed);
    align-items: center;
    margin-top: 16px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: var(--text-white);
    background-color: var(--mythiq-blue);
    border-radius: var(--radius-sm);
    padding: 11px 20px;
}

.game-box:hover .game-box-cta {
    background-color: var(--mythiq-hover-blue);
}

@media (prefers-reduced-motion: reduce) {
    .game-box,
    .game-box:hover,
    .game-box:focus-visible {
        transform: none;
    }
    /* No lift, no zoom — the synopsis still opens, it just doesn't slide. */
    .game-box-img,
    .game-box:hover .game-box-img,
    .game-box:focus-visible .game-box-img {
        transform: none;
    }
    .game-box-reveal {
        transition: opacity var(--transition-speed);
    }
    .game-box-arrow,
    .game-box:hover .game-box-arrow,
    .game-box:focus-visible .game-box-arrow {
        transform: none;
    }
}

/* --- Latest News Section --- */
.news-section {
    background-image: url('../img/uploads/2020/07/pattern_bg.png');
    background-position: bottom left;
    background-repeat: repeat;
    position: relative;
    margin-top: 200px;
    padding-bottom: 30px;
}

.news-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #202125 0%, rgba(32, 33, 37, 0) 100%);
    z-index: 1;
}

/* The story section below is pulled up 75px and would otherwise cover the last
   news cards. Only the content is lifted above it — the section background
   stays put, so the blue still bleeds up behind the cards as it does on live. */
.news-section .container {
    position: relative;
    z-index: 6;
}

/* News Grid Masonry — asymmetric 882/557 columns, matching production */
.news-grid {
    display: grid;
    grid-template-columns: 882fr 557fr;
    gap: 30px;
    /* Cards run 10px wider than the text column on each side (x=65 not 75). */
    margin: 0 -10px;
}

.news-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.news-card {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0px 0px 75px 0px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition-speed);
    cursor: pointer;
}

.news-card.tall,
.news-card.medium {
    height: 400px;
}

.news-card.short {
    height: 255px;
}

.news-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    z-index: 1;
}

.news-card:hover .news-card-bg {
    transform: scale(1.05);
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(32, 33, 37, 0.77);
    transition: background-color var(--transition-speed);
    z-index: 2;
}

.news-card:hover::before {
    background-color: color-mix(in srgb, var(--mythiq-hover-blue) 28%, transparent);
}

.news-card-content {
    position: relative;
    z-index: 3;
    padding: 40px;
    /* Live text column is 80% of the card, inset 40px from the left edge. */
    width: calc(80% + 80px);
}

.news-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    padding: 8px 10px 5px;
    border-radius: var(--radius-md);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.news-card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.385;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 4px;
}

.news-card.tall .news-card-title,
.news-card.medium .news-card-title {
    font-size: 40px;
}

.news-card-date {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 2px;
    color: var(--mythiq-blue);
    font-weight: 400;
}

/* --- Story Section --- */
/* 650px tall and pulled 75px up into the news section, per the live page.
   It ends exactly where the footer starts — no overhang. */
.story-section {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
    z-index: 5;
    margin-top: -75px;
    background-image: url('../img/uploads/2021/01/Mythiqnet_bg3-min.jpg');
    background-position: center;
    background-size: cover;
}

/* YouTube Video Background container */
.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.video-background iframe {
    width: 100vw;
    height: 56.25vw; /* 16:9 Aspect Ratio */
    min-height: 100vh;
    min-width: 177.77vh; /* 16:9 Aspect Ratio */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.story-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--mythiq-blue) 0%, var(--mythiq-hover-blue) 100%);
    opacity: 0.9;
    z-index: 2;
}

.story-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 80px;
}

.story-subtitle {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 1px;
    color: var(--text-white);
    margin-bottom: 29px;
}

.story-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 59px;
    line-height: 59px;
    letter-spacing: 1px;
    color: var(--text-white);
    margin-bottom: 24px;
}

.story-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    text-transform: none;
    padding: 20px 40px;
    border: 2px solid #ffffff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.story-btn:hover {
    background-color: var(--text-white);
    color: #000000;
}

.video-control-btn {
    position: absolute;
    bottom: 30px;
    right: 40px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
}

/* --- Footer --- */
footer {
    background-color: var(--footer-bg);
    padding: 80px 0 72px;
    position: relative;
}

footer .container {
    max-width: 1600px;
    padding: 0 80px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-bottom: 72px;
}

.footer-col {
    padding: 0 10px;
}

.footer-col h3 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 17px;
    line-height: 17px;
    text-transform: uppercase;
    color: var(--text-white);
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #54595F;
}

/* Two balanced columns filled top-to-bottom (Home/Projects/News, then
   About/Community/My Account) — matching the live footer's reading order. */
.footer-links-container {
    column-count: 2;
    column-gap: 0;
    margin-top: 20px;
}

.footer-link {
    display: block;
    width: max-content;
    font-size: 13px;
    line-height: 13px;
    color: var(--text-muted);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    margin-left: -20px; /* text aligns with the column heading */
    transition: color var(--transition-speed);
}

.footer-link:hover,
.footer-link:focus-visible {
    color: #ffffff;
}

/* --- Bottom bar -------------------------------------------------------------
   The wordmarks and the legal fine print are one block, joined by a rule, so
   the text reads as attached to the marks rather than parked in open space.
   The socials bookend the far end. The 10px side margin — not padding — puts
   the content and the divider on the same x as the column headings above.
   -------------------------------------------------------------------------- */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 0 10px;
    padding-top: 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-identity {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
}

/* flex-start, not center: with the cap heights matched below, aligning the box
   tops lands both cap tops within a quarter-pixel of each other. Centring the
   boxes would throw them out by ~1.5px. */
.footer-logos {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    flex-shrink: 0;
}

/* Sized so the LETTERS are the same height, which is what reads as "same
   size". Measured cap bands: Mythiq fills 72.5% of its box (the rest is the
   y/q descenders), Akizavo 89.5% — so equal CSS heights would render Akizavo's
   caps 1.23x taller. These two give both a ~13px cap height. */
.footer-logo--mythiq img {
    height: 18px;
    width: auto;
}

.footer-logo--akizavo img {
    height: 14.5px;
    width: auto;
}

.footer-logo {
    display: block;
    opacity: 0.7;
    transition: opacity var(--transition-speed);
}

.footer-logo:hover,
.footer-logo:focus-visible {
    opacity: 1;
}

.footer-legal {
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 0;
}

/* Both legal lines clear 4.5:1 against --footer-bg; the hierarchy between them
   comes from size and a brightness step, not from dropping below AA. */
.footer-copyright {
    font-size: 13px;
    line-height: 20px;
    color: #999aa0;
}

.footer-trademark {
    font-size: 12px;
    line-height: 18px;
    color: #828287;
}

/* Bare glyphs with a hover backdrop, matching the header's social links. */
.footer-socials {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-right: -9px; /* optical: last glyph aligns with the column edge */
}

.footer-social-btn {
    color: #828287;
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-speed),
                background-color var(--transition-speed);
}

.footer-social-btn:hover,
.footer-social-btn:focus-visible {
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.07);
}

.footer-link:focus-visible,
.footer-logo:focus-visible,
.footer-social-btn:focus-visible {
    outline: 2px solid var(--mythiq-hover-blue);
    outline-offset: 2px;
}

/* --- Cookies Banner Popup --- */
/* Hidden state slides fully off-screen via translateY so any banner height
   works — on mobile the stacked layout is taller than a fixed px offset,
   which left part of it peeking above the viewport edge. */
.cookies-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--footer-bg);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    padding: 10px 30px;
}

.cookies-banner.show {
    transform: translateY(0);
}

.cookies-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1580px;
    margin: 0 auto;
    gap: 30px;
}

.cookies-text {
    font-size: 15px;
    line-height: 22.5px;
    color: var(--text-white);
}

.cookies-actions {
    display: flex;
    gap: 0;
    flex-shrink: 0;
}

/* Cookie banner buttons ride the shared .btn system (ui.css). The "Learn
   more" action reads as a quiet text link inside the banner. */
.btn-cookie-info {
    background: none;
    border-color: transparent;
    color: var(--mythiq-blue);
}

.btn-cookie-info:hover {
    background: none;
    border-color: transparent;
    color: var(--mythiq-hover-blue);
}

/* --- Keyframe Animations --- */
@keyframes push-in {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes push-out {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}


/* --- Interior Page Hero (wow-dungeons / about / etc.) --- */
.page-hero {
    min-height: 60vh;
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: var(--header-height);
    overflow: hidden;
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(32, 33, 37, 0.55) 0%, #202125 100%);
    z-index: 1;
}

.page-hero-content {
    position: relative;
    z-index: 2;
}

.page-hero-logo {
    max-width: 220px;
    margin: 0 auto 20px;
}

.page-hero h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 48px;
    /* Without this the 28px body line-height is inherited, and any article
       whose headline wraps prints its second line on top of the first. */
    line-height: 1.15;
    color: var(--text-white);
}

.page-intro {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.7;
    max-width: 900px;
    margin-bottom: 40px;
}

/* --- WoW Classic Dungeons hero --- */
.wow-hero {
    position: relative;
    padding: 250px 0;
    text-align: center;
    background-image: url('../img/uploads/2021/06/bg_fallback.jpg');
    background-position: center;
    background-size: cover;
}

.wow-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(32, 33, 37, 0.57) 0%, #202125 100%);
}

.wow-hero-content {
    position: relative;
    z-index: 1;
}

.wow-hero-logo {
    width: 172px;
    height: auto;
    margin: 0 auto 50px;
}

.wow-hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 59px;
    line-height: 59px;
    color: #a58655;
}

/* Caption flanked by rules, as on live */
.wow-hero-rule {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: 25px auto 0;
    padding: 0 20px;
    font-size: 25px;
    line-height: 25px;
    color: var(--text-white);
}

.wow-hero-rule::before,
.wow-hero-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #a58655;
}

.wow-hero-text {
    max-width: 1200px;
    margin: 25px auto 0;
    padding: 0 20px;
    font-size: 19px;
    line-height: 28px;
    color: var(--text-white);
}

.wow-hero-more {
    margin-top: 35px;
}

.wow-hero-more summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 28px;
    color: #a58655;
    cursor: pointer;
    list-style: none;
}

.wow-hero-more summary::-webkit-details-marker { display: none; }

.wow-hero-more summary::after {
    content: '\f078'; /* chevron-down */
    font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    font-size: 12px;
    transition: transform var(--transition-speed);
}

.wow-hero-more[open] summary::after { transform: rotate(180deg); }

/* --- Dungeon list: filter bar + full-bleed card grid --- */
/* Both expansions render into one grid, so the controls below are the only
   way to narrow it. Gold (#a58655) is the page's WoW accent throughout. */
/* One bar holds the search, the expansion picker and the three drop-downs, and
   it follows the reader down the grid — 41 cards is a long scroll to make
   before changing a filter.
   It is built as a second floating pill under the nav rather than a full-width
   strip: same 16px side inset as `header`, same radius, fill and blur as
   `.navbar`, and the same 16px gap above it that the nav keeps from the top of
   the viewport. The nav never changes on scroll, so neither does this — pinned
   or not, the two read as one system. */
.wow-filters {
    position: sticky;
    top: calc(var(--header-offset) * 2 + var(--header-height));
    z-index: 20;
    margin-top: 55px;
    padding: 0 var(--header-offset);
}

.wow-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 44px controls + 10px either side + the border lands the pill on
       --header-height, so it is the nav bar's twin. */
    padding: 10px;
    background-color: rgba(18, 18, 20, 0.8);
    /* Transparent rather than absent so the focus ring cannot resize the pill. */
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.wow-bar:focus-within {
    border-color: #a58655;
    box-shadow: 0 0 0 4px rgba(165, 134, 85, 0.18);
}

/* Icon, field and reset travel together, so that they wrap as one unit once
   the bar runs out of room. */
.wow-bar-field {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
}

.wow-bar-icon {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 16px;
}

/* Every control in the bar is pinned to one height so the row reads as a
   single object; selects need appearance:none to honour it at all in Safari. */
.wow-bar-search,
.wow-bar-level,
.wow-select select,
.wow-seg-btn {
    height: 44px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 44px;
}

.wow-bar-search {
    flex: 1 1 200px;
    min-width: 0;
    background: none;
    border: 0;
    color: var(--text-white);
    font-size: 17px;
    padding: 0 4px 0 0;
}

.wow-bar-search:focus { outline: none; }
.wow-bar-search::placeholder { color: var(--text-muted); }
/* Safari draws its own clear button inside search fields; ours is the one. */
.wow-bar-search::-webkit-search-cancel-button { display: none; }

.wow-bar-clear {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    transition: color var(--transition-speed), background-color var(--transition-speed);
}

.wow-bar-clear:hover { color: var(--text-white); background-color: rgba(255, 255, 255, 0.08); }

.wow-bar-div {
    flex: 0 0 auto;
    width: 1px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.14);
    margin: 0 2px;
}

/* Expansion picker — one segmented control instead of the old tab strip. */
.wow-segment {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    padding: 3px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.wow-seg-btn {
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-light);
    font-family: var(--font-heading);
    font-weight: 700;
    height: 38px;
    line-height: 38px;
    font-size: 15px;
    padding: 0 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-speed), background-color var(--transition-speed);
}

.wow-seg-short { display: none; }
.wow-seg-btn:hover { color: var(--text-white); background-color: rgba(255, 255, 255, 0.07); }
.wow-seg-btn.is-active { color: #191919; background-color: #a58655; }
.wow-seg-btn:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 2px; }

.wow-bar-level {
    flex: 0 0 auto;
    width: 92px;
    text-align: center;
}

/* Spinners would break the shared control height and are useless for a value
   typed once. */
.wow-bar-level::-webkit-outer-spin-button,
.wow-bar-level::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wow-bar-level { -moz-appearance: textfield; }

.wow-select {
    flex: 0 0 auto;
    position: relative;
    display: flex;
}

.wow-bar-level,
.wow-select select {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    color: var(--text-white);
    padding: 0 14px;
    cursor: pointer;
}

.wow-bar-level { cursor: text; }
.wow-bar-level::placeholder { color: var(--text-muted); }
/* Room on the right for the caret drawn by ::after. */
.wow-select select { padding-right: 34px; }
.wow-bar-level:focus-visible,
.wow-select select:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 2px; }
/* Options render in the OS menu, which does not inherit the dark canvas. */
.wow-select select option { background-color: var(--card-bg); color: var(--text-white); }

/* The native caret cannot be styled, so it is replaced. pointer-events:none
   keeps clicks falling through to the select underneath. */
.wow-select::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    pointer-events: none;
}

/* Result count, sort note and reset ride with the list heading rather than the
   bar, which keeps the sticky strip one row tall. */
.wow-listmeta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 17px;
    line-height: 28px;
    color: var(--text-muted);
}

.wow-listmeta strong { color: var(--text-white); font-weight: 700; }
.wow-listmeta-sep { color: rgba(255, 255, 255, 0.25); }

.wow-clear {
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: underline;
    padding: 0;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.wow-clear:hover { color: var(--mythiq-hover-blue); }

.wow-empty {
    margin-top: 60px;
    margin-bottom: 40px;
    text-align: center;
    font-size: 19px;
    color: var(--text-muted);
}

.wow-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 30px;
    /* The filter bar sits directly above and already carries its own rule. */
    padding: 32px 40px 25px;
    max-width: 1600px;
}

.wow-list-head h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 39px;
    line-height: 39px;
    color: var(--text-white);
}

.wow-list-head p {
    font-size: 19px;
    line-height: 28px;
    color: var(--text-muted);
}

/* Full-bleed rows of four: 345x320 cards on a 395x370 pitch (live layout). */
.dungeon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    padding: 0 35px;
}

.dungeon-card {
    position: relative;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    overflow: hidden;
    /* Transparent by default so the hover outline doesn't shift the layout. */
    border: 1px solid transparent;
    transition: transform var(--transition-speed), border-color var(--transition-speed),
                box-shadow var(--transition-speed);
}

/* Filtered-out cards; the flex display would otherwise beat [hidden]. */
.dungeon-card[hidden] { display: none; }

.dungeon-card:hover,
.dungeon-card:focus-within {
    transform: translateY(-6px);
    border-color: rgba(165, 134, 85, 0.55);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55);
}

/* Artwork block; the card name sits at its bottom edge. */
.dungeon-card-art {
    position: relative;
    height: 196px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 20px 1px;
    overflow: hidden;
}

/* Artwork lives on its own layer so hover can scale it inside the card. */
.dungeon-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 0.5s ease;
}

.dungeon-card:hover .dungeon-card-img,
.dungeon-card:focus-within .dungeon-card-img { transform: scale(1.07); }

/* Darkens the artwork and lands on solid card colour at the bottom. */
.dungeon-card-shade {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(24, 24, 25, 0.45) 0%, rgba(24, 24, 25, 0.55) 60%, var(--card-bg) 100%);
    transition: background-image var(--transition-speed);
}

.dungeon-card:hover .dungeon-card-shade,
.dungeon-card:focus-within .dungeon-card-shade {
    background-image: linear-gradient(180deg, rgba(24, 24, 25, 0.25) 0%, rgba(24, 24, 25, 0.45) 60%, var(--card-bg) 100%);
}

/* Expansion tag — the grid mixes Classic and TBC, so each card says which. */
.dungeon-exp {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-light);
    background-color: rgba(10, 11, 13, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-sm);
    padding: 6px 9px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.dungeon-card-body {
    padding: 4px 20px 0;
}

.dungeon-card-art .dungeon-card-row,
.dungeon-card-body,
.dungeon-card-zone {
    position: relative;
    z-index: 1;
}

.dungeon-card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.dungeon-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    color: var(--text-white);
}

.dungeon-wing {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--mythiq-blue);
    margin-top: 4px;
}

.dungeon-abbr {
    color: rgba(255, 255, 255, 0.5);
    font-size: 19px;
    line-height: 19px;
    white-space: nowrap;
}

.dungeon-level {
    font-size: 19px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    color: #a58655;
}

.dungeon-min {
    font-size: 19px;
    line-height: 28px;
    color: var(--text-muted);
    cursor: help;
    white-space: nowrap;
}

.dungeon-card-zone {
    margin-top: auto;
    padding: 0 20px 20px;
    text-align: center;
    font-size: 19px;
    line-height: 19px;
    color: var(--text-muted);
}

.dungeon-card-zone a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
}

.dungeon-card-zone a:hover {
    color: var(--mythiq-hover-blue);
}

/* The zone line is the map trigger, so the card hover advertises it. */
.dungeon-card:hover .dungeon-card-zone a { color: var(--text-light); }
.dungeon-card .dungeon-card-zone a:hover { color: var(--mythiq-hover-blue); }
.dungeon-card-zone a:focus-visible { outline: 2px solid var(--mythiq-hover-blue); outline-offset: 2px; }
.dungeon-card-zone a i { transition: transform var(--transition-speed); }
.dungeon-card-zone a:hover i { transform: scale(1.15); }

/* --- Entrance map lightbox --- */
.wow-lightbox {
    /* The dialog itself is the click-to-close backdrop surface, so it fills
       the viewport and centres the figure rather than sizing to it. */
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: 0;
    padding: 40px 20px;
    background: none;
    overflow: auto;
    color: var(--text-white);
}

.wow-lightbox::backdrop {
    background-color: rgba(8, 8, 10, 0.85);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.wow-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wow-lightbox-fig {
    max-width: 1100px;
    width: 100%;
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.wow-lightbox-fig img {
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    background-color: #0b0b0d;
}

.wow-lightbox-cap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 22px;
}

.wow-lightbox-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    color: var(--text-white);
}

.wow-lightbox-sub {
    font-size: 17px;
    line-height: 26px;
    color: #a58655;
}

.wow-lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(10, 11, 13, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: var(--text-white);
    font-size: 20px;
    cursor: pointer;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.wow-lightbox-close:hover {
    background-color: #a58655;
    border-color: #a58655;
}

/* Card lift and artwork pan are decoration; the colour changes carry the
   same information without motion. */
@media (prefers-reduced-motion: reduce) {
    .dungeon-card,
    .dungeon-card-img,
    .dungeon-card-zone a i {
        transition: none;
    }
    .dungeon-card:hover,
    .dungeon-card:focus-within {
        transform: none;
    }
    .dungeon-card:hover .dungeon-card-img,
    .dungeon-card:focus-within .dungeon-card-img {
        transform: none;
    }
}

/* --- "Explore more tools" CTA band (the tool pages) --- */
.moretools-section {
    min-height: 400px;
    display: flex;
    align-items: center;
    background-image: url('../img/uploads/2021/05/moretools_bg-1.jpg');
    background-position: center;
    background-size: cover;
}

.moretools-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
}

.moretools-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 59px;
    line-height: 59px;
    color: var(--text-white);
}

.moretools-text {
    font-size: 19px;
    line-height: 28px;
    color: var(--text-white);
    margin-top: 10px;
}

.moretools-btn {
    justify-self: start;
    gap: 12px;
    background-color: #a58655;
}

.moretools-btn:hover {
    background-color: #b99a68;
}

/* The WoW page runs this band edge to edge, 100px below the dungeon grid. */
.wow-moretools {
    margin-top: 100px;
}

.wow-moretools .container {
    max-width: 1600px;
    padding: 0 20px;
}

.page-hero-subtitle {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px;
    color: var(--mythiq-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
}

/* --- Supported games logo grid (fuelcalc) --- */
/* All seven logos sit on one even row at desktop. */
.supported-games {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.game-logo {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    padding: 25px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    transition: border-color var(--transition-speed), transform var(--transition-speed);
}

.game-logo:hover {
    border-color: var(--mythiq-hover-blue);
    transform: translateY(-3px);
}

.game-logo img {
    max-height: 50px;
    max-width: 100%;
    width: auto;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter var(--transition-speed), opacity var(--transition-speed);
}

.game-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* --- News listing page ------------------------------------------------------
   The newsroom is built from three bands: a masthead that carries the page's
   identity, one cover story overlapping up into it, and the archive behind a
   sticky filter/search toolbar.
   It borrows the card language already approved for the homepage tool cases —
   6px radius, a 1px ring drawn in `box-shadow`, the lift-on-hover curve and the
   gradient accent ring — so a news card and a tool case read as the same
   family. No colour or type size here is new: everything comes from the tokens
   at the top of this file and the sizes the rest of the site already uses.
   -------------------------------------------------------------------------- */

/* Shared visually-hidden helper: the page's h1 and the search field's label
   both need an accessible name the design deliberately doesn't draw. */
.news-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Hero: the lead story --- */
/* There is no title band above this. The newest article, full-bleed, IS the
   top of the page. */
.news-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(84vh, 780px);
    padding: calc(var(--header-offset) + var(--header-height) + 60px) 0 90px;
    overflow: hidden;
}

.news-hero-img {
    position: absolute;
    inset: 0;
    background-image: var(--cover);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Two ramps. The upward one lands on the page colour exactly, so the hero
   melts into the archive below instead of ending on a cut line; the sideways
   one, underneath it, holds the text column dark through the middle of the
   band whatever the art is doing there.
   Order matters: the first layer paints on top. With the sideways ramp above,
   the bottom-left corner resolved to its own near-black instead of #202125 and
   the seam came back. */
.news-hero-scrim {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg, #202125 0%, rgba(32, 33, 37, 0.72) 24%, rgba(32, 33, 37, 0) 66%),
        linear-gradient(100deg, rgba(10, 10, 12, 0.94) 0%, rgba(10, 10, 12, 0.85) 30%, rgba(10, 10, 12, 0.42) 62%, rgba(10, 10, 12, 0.06) 88%);
}

.news-hero-content {
    position: relative;
    z-index: 1;
}

.news-hero-inner {
    max-width: 780px;
}

.news-hero-flags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.news-badge-accent {
    background-color: var(--mythiq-blue);
    color: #ffffff;
}

.news-hero-date {
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 1px;
    color: var(--text-light);
    margin-left: 4px;
}

.news-hero-headline {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 59px;
    line-height: 1.08;
    letter-spacing: 1px;
    color: #ffffff;
}

.news-hero-headline a:hover {
    color: var(--mythiq-hover-blue);
}

.news-hero-excerpt {
    font-size: 19px;
    line-height: 28px;
    color: var(--text-light);
    max-width: 680px;
    margin-top: 20px;
}

.news-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    color: var(--text-white);
    background-color: var(--mythiq-blue);
    border-radius: var(--radius-sm);
    padding: 14px 24px;
}

.news-hero-cta:hover {
    background-color: var(--mythiq-hover-blue);
}

.news-hero-cta i {
    font-size: 13px;
    transition: transform var(--transition-speed);
}

.news-hero-cta:hover i {
    transform: translateX(4px);
}

/* --- Fallback band --- */
/* Only ever seen with nothing published: the hero has no lead story to carry,
   so the admin-set title stands in. */
.news-fallback {
    position: relative;
    background-position: center;
    background-size: cover;
    padding: 185px 0 110px;
}

.news-fallback-scrim {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(110% 80% at 10% 0%, color-mix(in srgb, var(--mythiq-blue) 22%, transparent) 0%, color-mix(in srgb, var(--mythiq-blue) 0%, transparent) 62%),
        linear-gradient(180deg, rgba(32, 33, 37, 0.48) 0%, rgba(32, 33, 37, 0.86) 58%, #202125 100%);
}

.news-fallback-content {
    position: relative;
    z-index: 1;
    border-left: 3px solid var(--mythiq-blue);
    padding-left: 10px;
}

.news-hero-eyebrow {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 1px;
    color: var(--mythiq-blue);
}

.news-hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 59px;
    line-height: 59px;
    text-transform: uppercase;
    color: var(--text-white);
    margin-top: 12px;
}

/* --- Archive --- */
.news-archive {
    padding: 100px 0 120px;
}

/* One step down from the site's 53px section title: the cover story's headline
   has to stay the loudest thing on the page. 39px is the size the legal pages
   already use for a section title, not a new one. */
.news-archive .section-title {
    font-size: 39px;
    line-height: 39px;
}

.news-archive .section-header {
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

/* Sticky toolbar.
   At rest it has NO chrome at all — no panel, no rules — so the archive reads
   as one continuous block: title, chips, rows. A permanently drawn bar cut the
   page in half and left the heading stranded above it the moment you scrolled.
   The backdrop only fades in once the bar is actually stuck, which is the one
   moment it has to separate itself from the rows sliding underneath.
   `.is-stuck` is set by news-filter.js off a sentinel above this element; the
   blur is animated from 0 rather than switched on, so nothing pops.

   WHEN STUCK IT IS THE NAV BAR'S TWIN, NOT A FULL-WIDTH BAND. The header is a
   floating pill inset --header-offset from the viewport, so a band that ran
   edge to edge underneath it read as a different kind of object bolted to the
   page — square corners butting against the pill's rounded ones, and the two
   sets of side edges disagreeing. The pill here takes the same side inset, the
   same 10px radius and the same glass as `header .navbar::before`, and hangs
   one --header-offset below the nav, which is the gap the nav itself keeps
   from the top of the viewport. `.wow-filters` is built the same way and for
   the same reason.

   SIZED TO THE NAV, NOT TO THE ARTICLE ROWS. .container caps at 1710px while
   the nav pill is the full viewport less 32px, so the bar cannot align with
   both; it belongs to the chrome that floats above the page, so it follows the
   nav. That is why the inner div is not a .container — see news_index.php.

   THE GAP UNDER THE NAV IS ONE NUMBER, NOT TWO. `top` parks this box flush on
   the nav pill's bottom edge and the stuck padding-top is the whole of the
   visible gap. Splitting it — an extra --header-offset in `top` AND a padding
   on top of that — is how it silently became 30px while reading as though it
   were 16px. Keep the spacing in the padding, where it can be seen. */
.news-toolbar {
    position: sticky;
    top: calc(var(--header-offset) + var(--header-height));
    z-index: 20;
    padding: 4px var(--header-offset) 30px;
    transition: padding-top 0.25s ease;
}

/* The whole of the gap between the two pills. Deliberately tighter than the
   16px the nav keeps from the top of the viewport: that inset separates the
   nav from the edge of the screen, whereas these two are one stack, and the
   closer spacing is what makes the bar read as hanging off the nav rather than
   floating on its own. */
.news-toolbar.is-stuck {
    padding-top: 8px;
}

/* The pill itself. At rest every one of these is the "off" end of the
   transition, so the chips sit on bare page; .is-stuck fades the glass in.
   41px of side padding is .navbar's, which lines the first chip up with the
   logo in the bar above. */
.news-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
    padding: 0 41px;
    border-radius: var(--radius-lg);
    background-color: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transition: background-color 0.25s ease, backdrop-filter 0.25s ease,
                -webkit-backdrop-filter 0.25s ease, box-shadow 0.25s ease,
                padding-top 0.25s ease, padding-bottom 0.25s ease;
}

/* 14px either side of the 38px search field lands the pill on exactly 66px —
   --header-height, so it measures the same as the nav. Holds down to 768px,
   below which the phone rule deliberately stacks the chips over the search. */
.news-toolbar.is-stuck .news-toolbar-inner {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: rgba(18, 18, 20, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    /* A soft drop, no border: it reads as the pill lifting off the page rather
       than a divider planted in it. */
    box-shadow: 0 18px 26px -22px rgba(0, 0, 0, 0.9);
}

/* Category chips.
   ONE ROW THAT SCROLLS SIDEWAYS, AT EVERY WIDTH. Wrapping them is what turns
   the bar into a slab — six categories, two of them as long as "Mythiq.net
   Endurance GT Series", wrap to three and four rows anywhere under about
   1700px, and a 174px pill hanging under a 66px nav is not the twin this bar
   is supposed to be. Held to one row it stays exactly --header-height however
   many categories the archive grows, and the chip clipped at the right edge is
   what signals there are more. (This treatment was already here below 1024px
   for the same reason; it just had not needed to apply higher up until the
   archive grew.) */
.news-filters {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.news-filters::-webkit-scrollbar {
    display: none;
}

.news-filters:empty {
    display: none;
}

.news-chip {
    display: inline-flex;
    align-items: center;
    /* Never shrink: in a nowrap rail a shrinking chip squashes its label
       instead of letting the rail scroll. */
    flex: 0 0 auto;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-light);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color var(--transition-speed), background-color var(--transition-speed), border-color var(--transition-speed);
}

.news-chip:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.25);
}

.news-chip.is-active {
    background-color: var(--mythiq-blue);
    border-color: var(--mythiq-blue);
    color: #ffffff;
}

.news-chip:focus-visible {
    outline: 2px solid var(--mythiq-hover-blue);
    outline-offset: 2px;
}

.news-chip-count {
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background-color: rgba(0, 0, 0, 0.28);
    color: inherit;
}

/* Search box */
/* Hidden in the markup and revealed by news-filter.js: with scripting off it
   would be a text field that filters nothing. */
.news-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 300px;
    min-width: 220px;
}

.news-search[hidden] {
    display: none;
}

.news-search > i {
    position: absolute;
    left: 16px;
    font-size: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

/* Visually hidden, kept for the accessible name. */
.news-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.news-search input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 20px;
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    padding: 8px 18px 8px 42px;
    transition: border-color var(--transition-speed), background-color var(--transition-speed);
    -webkit-appearance: none;
    appearance: none;
}

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

.news-search input:focus {
    outline: none;
    border-color: var(--mythiq-blue);
    background-color: rgba(255, 255, 255, 0.07);
}

/* The default control is a dark glyph on a dark field — invisible, so it only
   reads as a dead spot. Clearing the field is the "All" chip's job. */
.news-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Sits on the right of the archive's section header, opposite the subtitle,
   rather than as a line of its own above the list — one stratum fewer between
   the heading and the first row. */
.news-result-count {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.news-result-count[hidden] {
    display: none;
}

/* Archive list ---------------------------------------------------------------
   Rows, not cards. With a hero this large above it, a second block of boxes
   competed with it; a ruled list reads as an archive, fits far more of each
   headline on a line, and lets the eye run straight down the dates.
   -------------------------------------------------------------------------- */
.news-list {
    display: block;
}

/* Year groups ------------------------------------------------------------- */
.news-year + .news-year {
    margin-top: 56px;
}

.news-year[hidden] {
    display: none;
}

/* The year sits on the left and the rule runs out to the container edge —
   the same device as the accent bar on .section-header, turned on its side. */
.news-year-label {
    display: flex;
    align-items: center;
    gap: 22px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 5px;
    color: var(--text-light);
    margin-bottom: 6px;
}

.news-year-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.12);
}

/* Rows -------------------------------------------------------------------- */
/* The negative margin lets the hover wash bleed past the text column so it
   reads as a full-width row rather than a floating panel. */
.news-row {
    display: grid;
    grid-template-columns: 260px 1fr auto;
    align-items: center;
    gap: 34px;
    padding: 26px 20px;
    margin: 0 -20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}

.news-row[hidden] {
    display: none;
}

.news-row:hover,
.news-row:focus-visible {
    background-color: rgba(255, 255, 255, 0.03);
    /* Brand accent bar, drawn inside so it can't shift the row's geometry. */
    box-shadow: inset 3px 0 0 var(--mythiq-blue);
}

.news-row:focus-visible {
    outline: 2px solid var(--mythiq-hover-blue);
    outline-offset: -2px;
}

.news-row-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: #101012;
}

.news-row-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.news-row:hover .news-row-media img,
.news-row:focus-visible .news-row-media img {
    transform: scale(1.06);
}

/* Keeps the top of the art from washing out against the page. */
.news-row-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(10, 10, 12, 0.3) 0%, rgba(10, 10, 12, 0) 34%);
    pointer-events: none;
}

.news-row-body {
    display: block;
    min-width: 0;
}

/* Category first in brand blue, then the date — the meta line the tool cases
   and the hero flags already use. */
.news-row-meta {
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.news-row-cat {
    color: var(--mythiq-blue);
    text-transform: uppercase;
}

.news-row-date {
    color: var(--text-muted);
}

.news-row-date::before {
    content: "·";
    margin: 0 8px;
}

.news-row-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: 0.3px;
    color: #ffffff;
    margin-top: 8px;
}

.news-row:hover .news-row-title,
.news-row:focus-visible .news-row-title {
    color: var(--mythiq-hover-blue);
}

/* Two lines: enough to carry the gist, never enough to unbalance a row. */
.news-row-excerpt {
    font-size: 16px;
    line-height: 26px;
    color: var(--text-light);
    max-width: 820px;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-row-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    font-size: 14px;
    color: var(--text-muted);
    transition: color var(--transition-speed), border-color var(--transition-speed), transform var(--transition-speed);
}

.news-row:hover .news-row-arrow,
.news-row:focus-visible .news-row-arrow {
    color: var(--mythiq-hover-blue);
    border-color: var(--mythiq-hover-blue);
    transform: translateX(4px);
}

.news-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 70px 30px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
}

.news-empty[hidden] {
    display: none;
}

.news-empty-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    color: var(--text-white);
}

.news-empty-text {
    font-size: 17px;
    line-height: 26px;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .news-row-media img,
    .news-row:hover .news-row-media img,
    .news-row:focus-visible .news-row-media img {
        transform: none;
    }
    .news-hero-cta i,
    .news-hero-cta:hover i,
    .news-row-arrow,
    .news-row:hover .news-row-arrow,
    .news-row:focus-visible .news-row-arrow {
        transform: none;
    }
}

@media (max-width: 1400px) {
    .news-hero { min-height: min(80vh, 700px); }
    .news-hero-headline { font-size: 50px; }
    .news-row { grid-template-columns: 230px 1fr auto; gap: 28px; }
    .news-row-title { font-size: 24px; }
}

@media (max-width: 1024px) {
    .news-archive .section-title { font-size: 32px; line-height: 32px; }
    .news-row { grid-template-columns: 190px 1fr; gap: 22px; padding: 22px 20px; }
    .news-row-title { font-size: 21px; }
    .news-row-excerpt { font-size: 15px; line-height: 24px; }
    /* The row itself is the affordance once space is tight. */
    .news-row-arrow { display: none; }
    .news-year + .news-year { margin-top: 44px; }
    /* The one-row chip rail is now the base rule (see .news-filters); all this
       breakpoint still has to do is give the search box less of the row. */
    .news-search { flex: 0 0 240px; min-width: 0; }
    .news-hero { min-height: min(76vh, 620px); padding-bottom: 70px; }
    .news-hero-inner { max-width: 620px; }
    .news-hero-headline { font-size: 40px; }
    .news-fallback { padding: 165px 0 90px; }
    .news-hero-title { font-size: 46px; line-height: 46px; }
    .news-archive { padding: 80px 0 90px; }
}

@media (max-width: 768px) {
    .news-hero { min-height: min(78vh, 560px); padding-bottom: 56px; }
    /* The sideways ramp does nothing once the text spans the full width, and it
       only darkens art that is already behind the upward ramp. */
    .news-hero-scrim {
        background-image: linear-gradient(0deg, #202125 0%, rgba(32, 33, 37, 0.9) 22%, rgba(10, 10, 12, 0.72) 55%, rgba(10, 10, 12, 0.45) 100%);
    }
    .news-hero-headline { font-size: 31px; letter-spacing: 0.5px; }
    .news-hero-excerpt { font-size: 17px; margin-top: 16px; }
    .news-hero-cta { margin-top: 24px; }
    .news-fallback { padding: 140px 0 70px; }
    .news-hero-eyebrow { font-size: 19px; }
    .news-hero-title { font-size: 38px; line-height: 38px; }
    /* Sides keep the inset — this is still the nav pill's twin here. The gap
       under the nav is not overridden: it is 8px everywhere, and a phone is
       the last place to want more of it. */
    .news-toolbar { padding: 2px var(--header-offset) 22px; }
    /* A phone has no room for chips and a search field side by side, so the
       two stack — the chip row still scrolls, now edge to edge. */
    .news-toolbar-inner { flex-wrap: wrap; gap: 12px; }
    .news-filters {
        flex: 1 1 100%;
        margin: 0 -20px;
        padding: 0 20px;
    }
    .news-search { flex: 1 1 100%; }
    /* Compact rows: a square thumb, meta and headline. The excerpt is dropped
       rather than squeezed into a 3-word column — the headline carries it. */
    .news-row {
        grid-template-columns: 104px 1fr;
        gap: 16px;
        align-items: flex-start;
        padding: 18px 20px;
    }
    .news-row-media { aspect-ratio: 1 / 1; }
    .news-row-excerpt { display: none; }
    .news-row-title { font-size: 18px; line-height: 1.3; margin-top: 6px; }
    .news-row-meta { font-size: 12px; }
    .news-year + .news-year { margin-top: 34px; }
}

/* --- Blog post article ------------------------------------------------------
   The hero is the shared .page-hero. Below it the page is a reading layout:
   the prose in a measured column, a sticky rail of what to read next beside
   it, then a previous/next pager and a strip of ways onward — an article used
   to end in a single "back to all news" link, so reading two in a row meant a
   round trip through the archive.

   Widths: the reading column is capped at 760px (~80 characters at the 16px
   prose size) and the whole grid is centred at 1160px rather than filling the
   1710px container, which would strand the rail half a screen from the text
   it belongs to. The pager and the onward strip repeat that 1160px so every
   band below the hero lines up on the same two edges.
   -------------------------------------------------------------------------- */

/* Reading position. Fixed above the floating header pill (z-index 1000) and
   revealed by article.js only when there is something to report. */
.article-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1001;
    background-color: rgba(255, 255, 255, 0.06);
}

.article-progress[hidden] {
    display: none;
}

.article-progress > span {
    display: block;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background-image: linear-gradient(90deg, var(--mythiq-blue), var(--mythiq-hover-blue));
}

/* Date and reading time under the headline, in the hero. Replaces the bare
   .news-card-date the page used to print there, and keeps its blue. */
.article-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin-top: 18px;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 1px;
    color: var(--mythiq-blue);
}

.article-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.article-hero-meta i {
    font-size: 13px;
}

.article-shell {
    padding: 80px 0 20px;
}

.article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 70px;
    align-items: start;
    /* 1310 = the 1160px reading layout + .container's own 75px gutters, which
       this element carries because it IS the container. The two bands below
       repeat the same figure so every edge lines up. */
    max-width: 1310px;
    margin: 0 auto;
}

.article-main {
    min-width: 0;
}

.article-body {
    max-width: 760px;
}

/* Defaults for tags the author can write but cannot class — clean_html()
   allows h2-h6, lists, blockquote, figure and hr, and until now only the
   classed variants below had any styling at all.
   :where() keeps these at zero specificity, so .article-lead / .article-heading
   / .article-list still win however they are nested. */
.article-body :where(h2, h3, h4, h5, h6) {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--text-white);
    line-height: 1.25;
    margin: 40px 0 18px;
}

.article-body :where(h2) { font-size: 30px; color: var(--mythiq-blue); }
.article-body :where(h3) { font-size: 24px; }
.article-body :where(h4, h5, h6) { font-size: 20px; }

.article-body :where(ul, ol) {
    padding-left: 1.3em;
    margin-bottom: 22px;
}

.article-body :where(ul, ol) li {
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-light);
}

/* Editorial pull-quote: boxless, serif italic, hanging solid-blue quote glyph.
   clean_html() allows <cite> inside it for uppercase attribution. */
.article-body :where(blockquote) {
    position: relative;
    margin: 44px 0;
    padding: .25rem 0 .25rem 3.2rem;
    border: none;
    background: none;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.3em;
    line-height: 1.55;
    font-style: italic;
    color: var(--text-white);
}

.article-body :where(blockquote)::before {
    content: '\201C';
    position: absolute;
    left: 0;
    top: -.15em;
    font-size: 4.6rem;
    line-height: 1;
    font-style: normal;
    color: var(--mythiq-blue);
}

.article-body :where(blockquote) p { margin: 0 0 .75rem; }

.article-body :where(blockquote) > :last-child { margin-bottom: 0; }

.article-body :where(blockquote) cite {
    display: block;
    margin-top: .8rem;
    font-family: var(--font);
    font-size: .78rem;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.article-body :where(blockquote) cite::before {
    content: '\2014\00a0'; /* em-dash before attribution */
}

.article-body :where(img) {
    border-radius: var(--radius-sm);
    margin: 26px 0;
}

.article-body :where(figure) {
    margin: 30px 0;
}

.article-body :where(figcaption) {
    font-size: 14px;
    line-height: 22px;
    color: var(--text-muted);
    margin-top: 10px;
}

.article-body :where(hr) {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 44px 0;
}

/* Code chunks written by the news editor's code-block tool: display-safe,
   entity-encoded text in a dark inset panel. */
.article-body :where(pre) {
    background: #121214;
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-white);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem;
    line-height: 1.6;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 26px 0;
}

.article-body :where(code) {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
    background: rgba(255, 255, 255, 0.08);
    padding: .12em .35em;
    border-radius: 5px;
}

.article-body :where(pre code) {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
}

/* Inline imagery flagged data-zoom by the editor opens fullscreen on click
   (assets/js/article.js); the cursor advertises it. */
.article-body :where(img)[data-zoom] { cursor: zoom-in; }

/* Disclaimer notice container — one box that can hold several points,
   wrapped by the editor's disclaimer tool around whole blocks. */
.article-body .article-disclaimer {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--text-light);
    background: rgba(35, 143, 204, 0.07);
    border-left: 3px solid var(--mythiq-blue);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 14px 18px;
    margin: 30px 0;
}

.article-body .article-disclaimer > :first-child { margin-top: 0; }

.article-body .article-disclaimer > :last-child { margin-bottom: 0; }

.article-body .article-disclaimer ul,
.article-body .article-disclaimer ol { margin-bottom: .75rem; }

/* Fullscreen lightbox for zoom-flagged article images. */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 10, 12, .93);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
    animation: lb-fade .18s ease;
}

.lightbox-overlay img {
    max-width: min(1400px, 94vw);
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    margin: 0;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

@keyframes lb-fade { from { opacity: 0 } to { opacity: 1 } }

.article-body > :first-child {
    margin-top: 0;
}

/* An in-body call to action. The seeded SRFC article ships one and nothing
   styled it, so it rendered as a stray heading above a loose button. */
.article-body .gc-cta {
    margin-top: 50px;
    padding: 34px 36px;
    border-radius: var(--radius-md);
    background-color: var(--card-bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    text-align: center;
}

.article-body .gc-cta h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.3;
    color: var(--text-white);
    margin: 0 0 20px;
}

.article-head-image {
    width: 100%;
    border-radius: var(--radius-sm);
    margin-bottom: 30px;
}

.article-lead {
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1.45;
    color: var(--text-white);
    font-weight: 600;
    margin-bottom: 30px;
}

.article-body p {
    font-size: 18px;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 22px;
}

.article-body p a {
    color: var(--mythiq-hover-blue);
    text-decoration: underline;
}

.article-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 30px;
    color: var(--mythiq-blue);
    margin: 40px 0 20px;
}

.article-list {
    list-style: none;
    margin-bottom: 22px;
    padding-left: 0;
}

.article-list li {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.8;
    padding-left: 28px;
    position: relative;
}

.article-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--mythiq-blue);
}

.article-image {
    width: 100%;
    border-radius: var(--radius-sm);
    margin: 25px 0;
}

/* --- Article foot: category + share ---------------------------------------- */
.article-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    max-width: 760px;
    margin-top: 50px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.article-foot-cat {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.03);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--text-light);
    transition: color var(--transition-speed), border-color var(--transition-speed), background-color var(--transition-speed);
}

.article-foot-cat i {
    font-size: 11px;
    color: var(--mythiq-blue);
}

.article-foot-cat:hover {
    border-color: var(--mythiq-blue);
    background-color: color-mix(in srgb, var(--mythiq-blue) 14%, transparent);
    color: var(--mythiq-hover-blue);
}

.article-share {
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-share-label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 4px;
}

.article-share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-light);
    font-size: 15px;
    cursor: pointer;
    transition: color var(--transition-speed), border-color var(--transition-speed), background-color var(--transition-speed);
}

.article-share-btn[hidden] {
    display: none;
}

.article-share-btn:hover,
.article-share-btn.is-copied {
    border-color: var(--mythiq-blue);
    background-color: color-mix(in srgb, var(--mythiq-blue) 16%, transparent);
    color: var(--mythiq-hover-blue);
}

.article-share-btn:focus-visible {
    outline: 2px solid var(--mythiq-hover-blue);
    outline-offset: 3px;
}

/* Confirmation for the copy button, which otherwise gives no sign it fired. */
.article-share-copied {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background-color: #0f0f11;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-white);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed);
}

.article-share-btn.is-copied .article-share-copied {
    opacity: 1;
}

/* --- Sidebar rail ----------------------------------------------------------
   Sticky by the same device as the mod page's download panel: the WHOLE aside
   is the sticky unit (a sticky first child keeps its place in flow and would
   slide down over the panel beneath it), and it is capped to the viewport with
   its own scroll so a rail taller than the screen cannot pin its top and put
   its bottom permanently out of reach.
   -------------------------------------------------------------------------- */
.article-side {
    position: sticky;
    top: calc(var(--header-offset) + var(--header-height) + 24px);
    align-self: start;
    min-width: 0;
    max-height: calc(100vh - var(--header-offset) - var(--header-height) - 48px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.article-side::-webkit-scrollbar { width: 6px; }
.article-side::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.18); border-radius: var(--radius-pill); }
.article-side::-webkit-scrollbar-track { background: transparent; }

/* The panel is the fuel calculator's results card: a blurred glass plate, a
   dark title bar ruled in brand blue, and a thicker translucent bottom edge.
   Every value here is lifted from .results / .section-title / .content-wrapper
   in assets/css/fuel-calc.css so the two read as the same component — that file
   is only loaded on /fuelcalc/, which is why they are restated rather than
   shared. */
.article-panel {
    border-radius: var(--radius-sm);
    background: rgba(17, 17, 17, 0.4);
    border: 1px solid rgba(77, 77, 77, 0.2);
    border-bottom: solid 5px rgba(255, 255, 255, 0.1);
    box-shadow: rgba(0, 0, 0, 0.16) 0 10px 36px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    isolation: isolate;
}

.article-panel-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #ffffff;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid var(--mythiq-blue);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.article-panel-body {
    padding: 8px 24px 20px;
}

.article-mini-list {
    list-style: none;
    padding: 0;
}

.article-mini-list li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.article-mini {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px 0;
}

.article-mini-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: #101012;
}

.article-mini-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.article-mini:hover .article-mini-media img {
    transform: scale(1.07);
}

.article-mini-body {
    min-width: 0;
}

.article-mini-meta {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Two lines. Three fitted more headlines whole but made each row ~100px, and
   the rail is height-capped — the extra line came straight out of the number
   of articles a reader can see without scrolling it. */
.article-mini-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: var(--text-white);
    margin-top: 5px;
}

.article-mini:hover .article-mini-title {
    color: var(--mythiq-hover-blue);
}

.article-panel-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--mythiq-blue);
}

.article-panel-more:hover {
    color: var(--mythiq-hover-blue);
}

.article-panel-more i {
    font-size: 11px;
    transition: transform var(--transition-speed);
}

.article-panel-more:hover i {
    transform: translateX(3px);
}

/* --- Previous / next -------------------------------------------------------
   Each card carries its own article's art, dimmed under a scrim that ramps
   away from the text — outward on each side, so the pair reads as two arrows
   pointing away from the article you just finished.
   -------------------------------------------------------------------------- */
.article-pager {
    padding: 60px 0 100px;
}

.article-pager-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1310px;
    margin: 0 auto;
}

.article-pager.is-single .article-pager-grid {
    grid-template-columns: minmax(0, 1fr);
}

.article-pager-card {
    position: relative;
    display: flex;
    min-height: 168px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--card-bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: box-shadow var(--transition-speed);
}

.article-pager-card:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mythiq-blue) 55%, transparent);
}

.article-pager-card:focus-visible {
    outline: 2px solid var(--mythiq-hover-blue);
    outline-offset: 2px;
}

.article-pager-art {
    position: absolute;
    inset: 0;
    background-image: var(--cover);
    background-size: cover;
    background-position: center;
    opacity: 0.34;
    transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.article-pager-card:hover .article-pager-art {
    opacity: 0.5;
    transform: scale(1.05);
}

.article-pager-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(15, 15, 17, 0.95) 0%, rgba(15, 15, 17, 0.78) 52%, rgba(15, 15, 17, 0.42) 100%);
    pointer-events: none;
}

.article-pager-card.is-next::after {
    background-image: linear-gradient(270deg, rgba(15, 15, 17, 0.95) 0%, rgba(15, 15, 17, 0.78) 52%, rgba(15, 15, 17, 0.42) 100%);
}

.article-pager-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 26px 30px;
}

.article-pager-card.is-next .article-pager-inner {
    align-items: flex-end;
    text-align: right;
}

.article-pager-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mythiq-blue);
}

.article-pager-label i {
    font-size: 12px;
    transition: transform var(--transition-speed);
}

.article-pager-card.is-prev:hover .article-pager-label i {
    transform: translateX(-4px);
}

.article-pager-card.is-next:hover .article-pager-label i {
    transform: translateX(4px);
}

.article-pager-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    color: #ffffff;
    transition: color var(--transition-speed);
}

.article-pager-card:hover .article-pager-title {
    color: var(--mythiq-hover-blue);
}

.article-pager-meta {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .article-mini:hover .article-mini-media img,
    .article-pager-card:hover .article-pager-art,
    .article-pager-label i,
    .article-pager-card.is-prev:hover .article-pager-label i,
    .article-pager-card.is-next:hover .article-pager-label i,
    .article-panel-more:hover i {
        transform: none;
    }
}

@media (max-width: 1200px) {
    .article-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
    .article-pager-title { font-size: 20px; }
}

/* The rail stops being a rail: below this the body would be squeezed under
   half its measure, so the panel drops under the article at full width. */
@media (max-width: 1024px) {
    .article-shell { padding: 60px 0 20px; }
    .article-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
        max-width: 900px;
    }
    .article-body,
    .article-foot { max-width: none; }
    .article-side {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .article-pager { padding: 50px 0 80px; }
    .article-pager-grid { max-width: 900px; }
}

@media (max-width: 768px) {
    .article-shell { padding: 46px 0 10px; }
    .article-foot { flex-direction: column; align-items: flex-start; }
    .article-pager-grid { grid-template-columns: minmax(0, 1fr); }
    /* Both cards ramp the same way once they are stacked — a right-aligned
       card under a left-aligned one reads as two unrelated blocks. */
    .article-pager-card.is-next::after {
        background-image: linear-gradient(90deg, rgba(15, 15, 17, 0.95) 0%, rgba(15, 15, 17, 0.78) 52%, rgba(15, 15, 17, 0.42) 100%);
    }
    .article-pager-card.is-next .article-pager-inner { align-items: flex-start; text-align: left; }
    .article-pager-card { min-height: 138px; }
    .article-pager-inner { padding: 22px 24px; }
    .article-pager-title { font-size: 19px; }
}


/* --- Legal pages (terms of use / privacy policy / cookies policy) --- */
/* Pinned to the live pages at a 1600px viewport: 600px hero, 59px/700 hero
   title, then a 3px blue rule + 39px/500 uppercase title band, then the body
   at the site's base type (Catamaran 19px/28px). */
.legal-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 600px;
    background-position: top center;
    background-size: cover;
}

.legal-hero-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(32, 33, 37, 0.24) 0%, #202125 100%);
}

.legal-hero-content {
    position: relative;
    z-index: 1;
}

.legal-hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 59px;
    line-height: 59px;
    color: var(--text-white);
    text-align: center;
}

.legal-titlebar {
    padding: 12px 0;
}

.legal-titlebar-inner {
    display: flex;
    align-items: center;
    gap: 49px;
}

.legal-titlebar-rule {
    flex: none;
    width: 87px;
    height: 3px;
    background-color: var(--mythiq-blue);
}

.legal-titlebar-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 39px;
    line-height: 39px;
    text-transform: uppercase;
    color: var(--text-white);
}

.legal-body {
    padding: 10px 0 80px;
}

.legal-article p {
    margin-bottom: 10px;
}

.legal-article a {
    color: var(--mythiq-blue);
}

.legal-article a:hover {
    color: var(--mythiq-hover-blue);
}

.legal-h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 37.5px;
    color: var(--text-white);
    margin-top: 38px;
}

.legal-h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 33px;
    color: var(--text-white);
    margin-top: 30px;
}

/* Elementor zeroes list padding on the live pages, which hides every bullet
   and number off the left edge; the rebuild indents them so they show. */
.legal-article ul,
.legal-article ol {
    margin-bottom: 10px;
    padding-left: 1.4em;
}

.legal-article li {
    margin-bottom: 6px;
}

/* --- Responsive Media Queries --- */
@media (max-width: 1200px) {
    header .navbar {
        padding: 0 20px;
    }
    /* The panel's gutter tracks the pill's, or its first heading stops lining
       up with the logo above it. */
    .nav-panel {
        padding-left: 20px;
        padding-right: 20px;
    }
    .nav-panel-foot {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    /* And so does the news toolbar's, for the same reason — it is the same
       pill one row further down. Longhand, so it cannot reset the vertical
       padding .is-stuck sets. */
    .news-toolbar-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .hero .container {
        padding: 0 40px;
    }
}

@media (max-width: 1024px) {
    /* Header modifications — the drawer takes over from here down, and it now
       carries the socials and the account row that these rules hide. The
       travelling rule goes with the words it underlines; leaving it would park
       a 2px blue mark under the logo. */
    header .nav-primary,
    header .nav-socials,
    header .nav-ink,
    header .nav-account-text {
        display: none;
    }
    header .nav-hamburger {
        display: flex;
    }
    /* The drawer scrolls; the page behind it must not. */
    body.drawer-open {
        overflow: hidden;
    }
    /* Match the hamburger's touch target. */
    .nav-search-btn {
        width: 44px;
        height: 44px;
    }
    
    /* Hero layout */
    .hero {
        min-height: auto;
        padding: 140px 0 100px 0;
    }
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }
    .hero-content {
        align-items: center;
    }
    .hero-title {
        font-size: 40px;
    }
    .hero-btn {
        align-self: center;
    }
    .hero-actions {
        justify-content: center;
    }
    .hero-graphic {
        justify-content: center;
        /* Back inside the container: the right-edge bleed is a desktop read. */
        margin-right: 0;
    }
    .hero-deck {
        width: min(660px, 100%);
        margin-left: 0;
        margin-right: 0;
    }
    .hd-stage {
        --hd-shift: 48px;
    }
    .hd-row {
        /* Four-up below the fold: seven-square rows wrap to 4+3, which the
           brick offset makes read as one ragged zig-zag rather than a bug. */
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-bottom: 10px;
    }
    /* Projects modifications */
    .projects-section {
        margin-top: 0;
        padding-top: 60px;
    }
    /* .projects-section's -200px lifts it over the hero divider and
       .news-section's +200px puts the flow back. Cancelling only the lift left
       the counterweight behind as 200px of empty screen between the tools shelf
       and "Latest news". Both halves go, and the section takes the same 60px of
       padding its neighbour just did. */
    .news-section {
        margin-top: 0;
        padding-top: 60px;
    }
    .projects-grid {
        gap: 20px;
    }
    /* Under ~310px of card, "· Online tool" wraps the platform onto a second
       line — and it says the same thing on all three cards. The platform is
       the part worth the space. */
    .game-box-meta span {
        display: none;
    }

    /* Dungeon grid */
    .dungeon-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-hero h1 {
        font-size: 38px;
    }
    
    /* News Section */
    .news-grid {
        grid-template-columns: 1fr;
    }
    
}

@media (max-width: 768px) {
    .section-title {
        font-size: 38px;
    }

    /* --- Hero deck as a centred backdrop ---
       On phones the wall is decoration, not a section of its own: a bounded
       band of tiles sits just under the centred headline, dissolving out at
       its bottom edge; tiles go inert (no links, no labels — see main.js §7
       for the matching tabindex/aria pass), and one gradient spans the
       ENTIRE hero top-to-bottom over everything. */
    /* Full first screen: hero owns the whole viewport on phones (svh keeps
       it stable against the collapsing browser chrome), and the flex centre
       already in .hero drops the headline into the middle of it. */
    .hero {
        min-height: 100vh;
        min-height: 100svh;
    }
    /* THE gradient of the section — the only one. It runs from the very top
       edge to the very bottom with no flat lead-in, so it can never look
       like it "starts" somewhere in the middle. z-index:1 puts it above the
       tiles and below .container's text. */
    .hero::before {
        background: linear-gradient(180deg,
            rgba(32, 33, 37, 0.38) 0%,
            rgba(32, 33, 37, 0.52) 55%,
            rgba(32, 33, 37, 0.68) 100%);
    }
    /* Tighten the two-row stack, then pull the strip up so its centre sits
       roughly on the headline's centre: the text reads as printed ON the
       tile field (it paints above — see .hero-content's z-index), with a
       short tail of tiles below the button dissolving out via the mask. */
    .hero .container {
        gap: 24px;
    }
    /* A bounded strip directly under the headline: fixed 300px height in
       normal flow (no absolute-positioning maths to get wrong), tiles
       cascade down and DISSOLVE out through a mask at the bottom edge —
       so the strip ends softly instead of cutting tiles mid-row. */
    .hero-graphic {
        position: relative;
        height: 300px;
        margin-right: 0;
        margin-top: -260px;
        pointer-events: none;
        overflow: hidden;
    }
    .hd-stage {
        --hd-shift: 40px;
        -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 97%);
        mask-image: linear-gradient(180deg, #000 58%, transparent 97%);
    }
    .hero-deck {
        width: min(118%, 560px);
        margin: 0 auto;
    }
    .hd-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-bottom: 10px;
    }
    /* Decoration here: nobody taps a tile, so nothing may look tappable. */
    .hd-card {
        pointer-events: none;
    }
    .hd-card-plate,
    .hd-card-open {
        display: none;
    }
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    /* The homepage's section heads adopt the mods catalogue's rhythm
       (.mods-row-title / .mods-row-sub, 22/28 and 15/22). A 38px uppercase slab
       under a 53px line-height owned most of a phone screen, and read as a
       different site to the /mods/ rows it sits one tap away from. Desktop keeps
       the 53px caps — this is a small-screen treatment, not a rebrand. */
    .projects-section .section-title,
    .news-section .section-title {
        font-size: 22px;
        line-height: 28px;
        text-transform: none;
    }
    .projects-section .section-subtitle,
    .news-section .section-subtitle {
        font-size: 15px;
        line-height: 22px;
        margin-top: 4px;
    }

    /* Below the cards, full width: it terminates the shelf rather than pushing
       the cards further down the fold, and clears the 44px touch minimum. */
    .projects-section > .container,
    .news-section > .container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "grid"
            "more";
    }
    .projects-section > .container > .btn-view-all,
    .news-section > .container > .btn-view-all {
        margin: 22px 0 0;
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .story-title {
        font-size: 40px;
    }
    /* 30/40px headlines wrapped to five or six lines on a phone and swallowed
       the card art behind them. */
    .news-card-title {
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: 0.5px;
    }
    .news-card.tall .news-card-title,
    .news-card.medium .news-card-title {
        font-size: 24px;
    }
    .news-card-date {
        font-size: 14px;
        letter-spacing: 1.5px;
    }
    .news-card.tall,
    .news-card.medium {
        height: 300px;
    }
    .news-card.short {
        height: 220px;
    }
    /* 650px of section for three short lines left huge voids above and below.
       The -75px pull is a wide-screen flourish — it bleeds the blue up behind
       the news cards, which on a phone only put "View all" on a blue field and
       made it read as the story section's button. The sections butt up instead. */
    .story-section {
        min-height: 420px;
        padding: 64px 0;
        margin-top: 0;
    }
    .story-subtitle {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 16px;
    }
    .cookies-container {
        flex-direction: column;
        text-align: center;
    }
    .cookies-actions {
        width: 100%;
        justify-content: center;
    }
}

/* Phones get a swipeable shelf instead of a grid. A 3-item grid leaves an
   orphan on the second row with dead space beside it, and one-per-row makes
   each case ~400px tall. A shelf keeps the cases a readable size, scrolls
   naturally under the thumb, and absorbs a fourth without reflowing. */
@media (max-width: 640px) {
    .projects-grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Bleed to the screen edges so a partly-visible next case signals that
           the row scrolls; the padding puts the first one back on the text
           grid. 20px is .container's gutter below 768px. */
        margin-inline: -20px;
        padding-inline: 20px;
        scroll-padding-inline: 20px;
    }
    .projects-grid::-webkit-scrollbar {
        display: none;
    }
    .game-box {
        flex: 0 0 61%;
        max-width: 240px;
        scroll-snap-align: start;
    }
    .game-box-heading h3 {
        font-size: 15px;
        line-height: 20px;
    }
    /* Shorter ramp: a 90px run of blur is most of a 240px card. */
    .game-box {
        --ramp: 56px;
    }
    .game-box-plate-inner {
        padding: var(--ramp) 14px 15px;
    }
    .game-box-meta {
        font-size: 12px;
        line-height: 17px;
    }
}

/* Touch-target pass. Everything here was under the 44px minimum; the fixes
   add hit area via padding so nothing changes size visually. */
@media (max-width: 768px) {
    .btn-view-all {
        padding: 14px 22px;
    }
    .footer-link {
        padding: 16px 20px;
    }
    .search-close-btn {
        width: 44px;
        height: 44px;
    }
    /* The scope tabs are the phone's only way to narrow a search, so they get
       the touch target too — via padding, so the underline still sits tight
       under the word. */
    .search-scope {
        padding: 14px 16px;
    }
    .footer-social-btn {
        width: 44px;
        height: 44px;
    }
    .btn-cookie-info,
    .btn-cookie-accept {
        padding: 15px 24px;
    }
    /* Wordmark links: padding only, so the logos stay the same size. */
    .logo,
    .mobile-menu-logo {
        padding: 10px 0;
    }
    .footer-logo {
        padding: 14px 0;
    }
    .footer-logos {
        margin: -14px 0;
    }
}

@media (max-width: 480px) {
    .dungeon-grid {
        grid-template-columns: 1fr;
    }
    .hero-title {
        font-size: 32px;
    }
    .hd-stage {
        --hd-shift: 34px;
    }
    .hd-row {
        gap: 8px;
        margin-bottom: 8px;
    }
    .story-title {
        font-size: 32px;
    }
    .btn-cookie-info,
    .btn-cookie-accept {
        width: 100%;
    }
    .cookies-actions {
        flex-direction: column;
        gap: 10px;
    }
}

/* --- Footer responsive ---
   Kept together so the reflow sequence reads in one place. */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 48px;
    }
    /* The identity block and the socials stop sharing a line here. */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }
}

/* The wordmarks and the legal text stop sitting side by side — the dividing
   rule moves from vertical to a plain stack. */
@media (max-width: 620px) {
    .footer-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .footer-legal {
        padding-left: 0;
        border-left: none;
    }
}

@media (max-width: 480px) {
    .footer-logos {
        gap: 20px;
    }
    .footer-logo--mythiq img {
        height: 16px;
    }
    .footer-logo--akizavo img {
        height: 12.9px;
    }
}

/* ---------------------------------------------------------------------------
   Responsive rules for the rebuilt page sections (hero/calculator/clock/
   dungeons/footer). The desktop values above are pinned to the live 1600px
   design, so everything narrower is scaled down here.
   --------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .container {
        padding: 0 40px;
    }
    footer .container,
    .wow-moretools .container {
        padding: 0 40px;
    }
    .story-content {
        padding: 0 40px;
    }
    .fuelcalc-section,
    .fuelcalc-inner {
        padding-left: 40px;
        padding-right: 40px;
    }
    .dungeon-grid {
        gap: 30px;
        padding: 0 20px;
    }
    .wow-list-head {
        padding: 45px 20px 20px;
    }
}

@media (max-width: 1024px) {
    .fuelcalc-section {
        padding-top: 130px;
        padding-bottom: 100px;
    }
    .wow-hero {
        padding: 160px 0 90px;
    }
    /* Below this the row runs out of width; the bar keeps its shell and wraps
       inside it, so the dividers — which only read across a single row — go. */
    .wow-bar {
        flex-wrap: wrap;
    }
    /* A wrapped bar is two to four rows tall. Pinned under the nav that is a
       third of a phone screen spent on chrome, so it stops following here. */
    .wow-filters {
        position: static;
    }
    .wow-bar-field {
        flex: 1 1 100%;
    }
    .wow-bar-div {
        display: none;
    }
    .srfc-strategy {
        padding: 90px 0;
    }
    .srfc-strategy-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .srfc-strategy-right {
        padding-left: 0;
    }
    .srfc-games {
        padding: 70px 0 90px;
    }
    .supported-games {
        grid-template-columns: repeat(4, 1fr);
    }
    .moretools-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .moretools-title,
    .story-title,
    .wow-hero-title,
    .srfc-title {
        font-size: 42px;
        line-height: 1.1;
    }
    .srfc-eyebrow,
    .srfc-title-sm,
    .wow-list-head h2 {
        font-size: 30px;
        line-height: 1.15;
    }
}

@media (max-width: 768px) {
    .container,
    footer .container,
    .wow-moretools .container {
        padding: 0 20px;
    }
    .story-content {
        padding: 0 20px;
    }
    .fuelcalc-section,
    .fuelcalc-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .fuelcalc-head {
        padding-left: 0;
        margin-bottom: 40px;
    }
    .news-grid {
        margin: 0;
    }
    .wow-hero-rule {
        gap: 15px;
        font-size: 19px;
    }
    /* The bar keeps its shell but its contents stack: search on the first row,
       expansion picker on the second, the three drop-downs sharing the third. */
    .wow-segment {
        flex: 1 1 100%;
        justify-content: space-between;
    }
    .wow-seg-btn {
        flex: 1 1 0;
        padding: 0 8px;
    }
    .wow-bar-level {
        flex: 1 1 90px;
        width: auto;
    }
    .wow-select {
        flex: 1 1 150px;
    }
    .wow-select select {
        width: 100%;
    }
    .wow-list-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .dungeon-grid {
        gap: 20px;
        padding: 0 20px;
    }
    /* Clock scales with the viewport instead of its fixed 500px box. */
    .clockcontainer {
        width: 300px !important;
        height: 300px !important;
    }
    .outCircle {
        width: 215px !important;
        height: 215px !important;
        top: -310px !important;
        left: 30px !important;
    }
    .clocktext {
        font-size: 40px !important;
    }
    .moretools-title {
        font-size: 34px;
    }
    .supported-games {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    /* A third of this row is not enough for "Burning Crusade"; the cards call
       it TBC too. */
    .wow-seg-long { display: none; }
    .wow-seg-short { display: inline; }
    /* Count and sort note stack, so the separator between them has nothing
       left to separate. */
    .wow-listmeta {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .wow-listmeta-sep { display: none; }
    .dungeon-card-body,
    .dungeon-card-art {
        padding-left: 15px;
        padding-right: 15px;
    }
    .dungeon-name {
        font-size: 20px;
    }
    .dungeon-abbr,
    .dungeon-level,
    .dungeon-min,
    .dungeon-card-zone {
        font-size: 16px;
    }
    .wow-hero-title,
    .moretools-title,
    .srfc-title {
        font-size: 32px;
    }
}

/* --- Legal pages responsive (desktop values above are pinned to live 1600px) --- */
@media (max-width: 1024px) {
    .legal-hero {
        min-height: 460px;
    }
    .legal-hero-title {
        font-size: 46px;
        line-height: 50px;
    }
    .legal-titlebar-inner {
        gap: 30px;
    }
    .legal-titlebar-title {
        font-size: 32px;
        line-height: 36px;
    }
}

@media (max-width: 768px) {
    .legal-hero {
        min-height: 380px;
    }
    .legal-hero-title {
        font-size: 34px;
        line-height: 40px;
        text-align: left;
    }
    /* Live drops the rule and centres the title on phones. */
    .legal-titlebar-inner {
        justify-content: center;
        gap: 0;
    }
    .legal-titlebar-rule {
        display: none;
    }
    .legal-titlebar-title {
        font-size: 27px;
        line-height: 32px;
        text-align: center;
    }
    .legal-h2 {
        font-size: 25px;
        line-height: 32px;
    }
    .legal-h3 {
        font-size: 21px;
        line-height: 29px;
    }
    .legal-body {
        padding: 14px 0 60px;
    }
}

/* --- Signed-in account chrome ------------------------------------------- */
/* Signed out the disc is a hairline glass circle with a muted user glyph in it
   (see .nav-avatar). Signed in it becomes the member's initial on brand blue —
   the one saturated mark the bar carries at rest, and it earns it by reporting
   real session state. The whole control is a link to the account hub. */
.nav-avatar.is-authed {
    background-image: none;
    background-color: var(--mythiq-blue);
    border-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    font-size: 15px;
}