/*
Theme Name:  NoMoreGreens (PixieFreak child)
Theme URI:   https://nomoregreens.com
Description: Child theme of PixieFreak (pixiefreak-1) for the nomoregreens
             guild site. All facelift / restyle work lives here so the
             abandoned parent theme (last upstream release 2022-06-27) stays
             untouched and upgrade-safe. Parent assets are inherited via the
             parent's own functions.php; this stylesheet loads last so its
             rules win the cascade.
Author:      cloudar / bmiest
Template:    pixiefreak-1
Version:     0.2.0
Text Domain: nmg-child
*/

/* ==========================================================================
   FACELIFT — first pass (v0.2). Goal: keep the dark "No More Greens" identity
   but make it feel current and intentional — brighter brand green, tighter
   typography, elevated cards, polished buttons. Parent theme + panel untouched.
   Tune the tokens below first; most of the look flows from them.
   ========================================================================== */

:root {
    /* Accent — purple ("epic"), matching the hero-led front page, the restyled
       nav/footer and the `pixiefreak_primary_color` theme_mod. (The first pass
       used a brand green here; the chosen design moved the whole site to purple,
       so these tokens were repointed — the bright "GREENS" strikethrough green
       lives on in front.css/footer as a deliberate brand pop, not here.) */
    --nmg-green:        #a335ee;   /* primary accent (purple "epic")        */
    --nmg-green-deep:   #7b27b4;   /* pressed / gradient end                */
    --nmg-green-glow:   #b15cf0;   /* hover / highlights                    */

    /* Dark surface scale (cohered from the theme's #0a0c11 / #141a21 / …). */
    --nmg-bg:           #0a0c11;   /* page background                       */
    --nmg-surface:      #141a21;   /* cards / header                        */
    --nmg-surface-2:    #1b232d;   /* raised / hover surface                */
    --nmg-border:       #28323f;   /* hairline borders                     */

    /* Text. */
    --nmg-text:         #e7ebf0;
    --nmg-muted:        #9aa6b2;

    /* Shape + motion. */
    --nmg-radius:       12px;
    --nmg-radius-sm:    8px;
    --nmg-shadow:       0 10px 30px -12px rgba(0,0,0,.65);
    --nmg-ease:         .22s cubic-bezier(.4,0,.2,1);
}

/* --- Typography ----------------------------------------------------------- */
/* Montserrat is already loaded by the parent — we just use it more deliberately. */
body {
    color: var(--nmg-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .post-title, .widget-title {
    letter-spacing: -.015em;
    line-height: 1.12;
    font-weight: 700;
}

/* Eyebrow / category labels ("PROGRESS", "prog" tags) — tracked + branded. */
.post-tags, .badge, .label, .slider-category {
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .72rem;
}

a { transition: color var(--nmg-ease); }
a:hover { color: var(--nmg-green-glow); }

/* --- Buttons (READ MORE, .btn, .btn-primary, .button) --------------------- */
.btn, .btn-primary, .button, button.btn, input[type="submit"] {
    border-radius: var(--nmg-radius-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: transform var(--nmg-ease), box-shadow var(--nmg-ease),
                background var(--nmg-ease), filter var(--nmg-ease);
    border: 0;
}
.btn-primary, .button, .btn.btn-default, input[type="submit"] {
    background: linear-gradient(135deg, var(--nmg-green), var(--nmg-green-deep)) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px -8px rgba(163,53,238,.7);
}
.btn:hover, .btn-primary:hover, .button:hover, input[type="submit"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 12px 26px -10px rgba(177,92,240,.6);
}

/* --- Cards: news / progression grid + gallery ----------------------------- */
.card, .post-list .card, .card-info {
    background: var(--nmg-surface);
    border: 1px solid var(--nmg-border);
    border-radius: var(--nmg-radius);
    overflow: hidden;
    transition: transform var(--nmg-ease), box-shadow var(--nmg-ease),
                border-color var(--nmg-ease);
}
.card:hover, .post-list .card:hover {
    transform: translateY(-4px);
    border-color: var(--nmg-green);
    box-shadow: var(--nmg-shadow);
}
/* Stronger bottom-up gradient so overlaid titles stay legible on screenshots. */
.card .card-info, .post-list .card-info {
    background: linear-gradient(to top, rgba(10,12,17,.92) 30%, rgba(10,12,17,0));
}

/* --- Header / nav --------------------------------------------------------- */
.main-header {
    background: rgba(10,12,17,.85);
    backdrop-filter: saturate(140%) blur(8px);
    position: relative;
    /* U4: kill the parent theme's flat tan hairline under the subpage nav bar. */
    border-bottom: 0 !important;
    box-shadow: none !important;
}
/* U4 history: this used to add a 40px gradient strip BELOW the home nav to mask
   a hard edge over the hero. That strip read as a dark "band" between the bar and
   the slider on bright slides, so it's removed. The home nav is now a light
   top-anchored scrim that fades out within its own height (front.css), so there
   is no separate band and nothing to feather here. */
header .nav-placeholder .navbar {
    background: transparent !important;
    backdrop-filter: none;
}
.navbar .menu-item > a {
    position: relative;
    font-weight: 600;
    transition: color var(--nmg-ease);
}
/* Animated underline accent on hover / focus / current item.
 * Symmetric wipe: grows in from the left, retracts out to the right — so it
 * never "collapses back to the left", which read as a jittery snap on click. */
.navbar .menu-item > a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 2px;
    background: var(--nmg-green);
    transform: scaleX(0);
    transform-origin: right;            /* leave → wipe out to the right */
    transition: transform var(--nmg-ease);
}
.navbar .menu-item:hover > a::after,
.navbar .menu-item > a:focus-visible::after,
.navbar .current-menu-item > a::after {
    transform: scaleX(1);
    transform-origin: left;             /* enter → wipe in from the left */
}
@media (prefers-reduced-motion: reduce) {
    .navbar .menu-item > a::after { transition: none; }
}
/* Strip the parent/browser link chrome on the top nav so ONLY our animated
 * accent bar shows: kill the real text-decoration underline (the stray purple
 * line on hover/visited), the mobile tap-highlight box, and the text-selection
 * "dark bar" you get when clicking the item label. Scoped under the child body
 * class so it out-specifies the parent's customizer/inline nav styles. */
.wp-child-theme-nmg-child header .nav-placeholder .navbar .menu-item > a,
.wp-child-theme-nmg-child header .nav-placeholder .navbar .menu-item > a:link,
.wp-child-theme-nmg-child header .nav-placeholder .navbar .menu-item > a:visited,
.wp-child-theme-nmg-child header .nav-placeholder .navbar .menu-item > a:hover,
.wp-child-theme-nmg-child header .nav-placeholder .navbar .menu-item > a:focus,
.wp-child-theme-nmg-child header .nav-placeholder .navbar .menu-item > a:active {
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* --- Dropdown submenu: combat-log restyle --------------------------------- *
 * The parent theme paints the "Links" dropdown panel + items with the old
 * customizer accent colour (see pixiefreak-1/inc/inline/stylesheet.php). Scope
 * an override under the child-theme body class so it out-specifies that inline
 * style, and dress the panel in the dark rarity palette like the rest of the UI. */
.wp-child-theme-nmg-child header .nav-placeholder .navbar li.menu-item-has-children .sub-menu {
    background: var(--nmg-surface) !important;
    border: 1px solid var(--nmg-border);
    border-radius: var(--nmg-radius-sm);
    box-shadow: var(--nmg-shadow);
    padding: .3rem;
    overflow: hidden;
}
.wp-child-theme-nmg-child header .nav-placeholder .navbar li.menu-item-has-children .sub-menu li a {
    background: transparent !important;
    color: var(--nmg-muted) !important;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: var(--nmg-radius-sm);
    border-left: 2px solid transparent;
    transition: color var(--nmg-ease), background var(--nmg-ease), border-color var(--nmg-ease);
}
.wp-child-theme-nmg-child header .nav-placeholder .navbar li.menu-item-has-children .sub-menu li a:hover,
.wp-child-theme-nmg-child header .nav-placeholder .navbar li.menu-item-has-children .sub-menu li a:focus {
    background: var(--nmg-surface-2) !important;
    color: var(--nmg-green-glow) !important;
    border-left-color: var(--nmg-green) !important;
}

/* --- Section rhythm + the "Latest from…" heading -------------------------- */
.section-title, .widget-title {
    position: relative;
    padding-bottom: .5rem;
}
.section-title::after {
    content: "";
    display: block;
    width: 64px; height: 3px;
    margin-top: .75rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--nmg-green), transparent);
}

/* --- Focus visibility (a11y) ---------------------------------------------- */
a:focus-visible, .btn:focus-visible, button:focus-visible {
    outline: 2px solid var(--nmg-green-glow);
    outline-offset: 2px;
}

/* ==========================================================================
   INNER PAGES (single posts, pages, archives, shop) — site-wide.
   The parent paints a tall (600px) baked-in GREEN header band via
   `header.is-page[data-image]::after`. The actual image URL
   (…/nmgnewheadergreengradient.png) is injected into <head> by the parent's
   main.js AFTER the stylesheets load, so a child rule must use `!important`
   to win the cascade — overriding the `background` shorthand drops the URL.
   We replace that band with a slim dark banner + subtle purple glow that
   matches the home hero, and re-skin the template-page `.inner-header`
   masthead (About / Team / Player / Tournament) to match. Pure CSS, so the
   green stays gone across reseeds without touching the panel/Customizer/DB.
   `header.is-page` never matches the home page (its header has no .is-page
   class), so none of this leaks onto the front page.
   ========================================================================== */
/* keep the whole inner page on the dark surface */
body.is-inner-page { background: var(--nmg-bg); color: var(--nmg-text); }

/* the baked-in green band -> slim dark banner with a purple hero-glow */
header.is-page { background: var(--nmg-bg); }
header.is-page[data-image]::after {
    height: 240px !important;
    background:
        radial-gradient(120% 180% at 100% 0%, rgba(163, 53, 238, .22), transparent 60%),
        radial-gradient(110% 160% at 0% 10%, rgba(255, 128, 0, .07), transparent 55%),
        var(--nmg-bg) !important;
    border-bottom: 1px solid var(--nmg-border);
}

/* template-page masthead (.inner-header on About / Team / Player / Tournament) */
.inner-page .inner-header {
    height: auto !important;
    min-height: 0 !important;
    padding: 44px 0 !important;
    background:
        radial-gradient(120% 180% at 100% 0%, rgba(163, 53, 238, .20), transparent 60%),
        var(--nmg-surface) !important;
    border-bottom: 1px solid var(--nmg-border);
}
.inner-page .inner-header .inner-header-info figure.rounded,
.inner-page .inner-header .inner-header-info figure.rounded img {
    border: 1px solid var(--nmg-border);
}

/* archive / search title banner (.page-hero) — keep it dark + branded */
.page-hero { background: var(--nmg-bg); }
.page-hero .page-title { color: var(--nmg-text); }

/* news / archive listing area — parent paints `.news-page{background:#fff}`,
   which breaks the dark theme on the /news/ grid. Keep it on the dark surface
   (the grid cards are already dark with a purple hover overlay). */
.news-page { background: var(--nmg-bg) !important; }

/* --- Inner-page section surfaces (TODO #0a) -------------------------------
   The parent paints several inner-page *section* containers solid #fff, which
   breaks the dark theme and leaves the parent's dark body text unreadable on
   white (and dark-on-dark once we repaint). Repaint each onto the dark base
   and pin text/headings to readable tokens. Pure CSS → survives reseed.
   Offenders (from parent assets/css/main.css):
     .gallery            — Screenshots page
     .single-page        — single posts / page.php content section
     .stream-page,
     .streams:not(.page-bg) — Livestreams
     .shop               — WooCommerce (not seeded, covered for completeness)
     .sponsors .basic-sp — Sponsor page
     .tournament .news   — Tournament page                                  */
.gallery,
.single-page,
.stream-page,
.streams:not(.page-bg),
.shop,
.sponsors .basic-sp,
.tournament .news {
    background-color: var(--nmg-bg) !important;
    color: var(--nmg-text);
}
/* readable copy inside the repainted sections (parent assumed dark-on-white) */
.gallery, .gallery p, .gallery li,
.single-page, .single-page p, .single-page li,
.stream-page, .stream-page p,
.streams:not(.page-bg), .streams:not(.page-bg) p,
.sponsors .basic-sp, .sponsors .basic-sp p,
.tournament .news, .tournament .news p {
    color: var(--nmg-text);
}
.gallery h1, .gallery h2, .gallery h3, .gallery h4,
.single-page h1, .single-page h2, .single-page h3, .single-page h4,
.stream-page h1, .stream-page h2, .stream-page h3,
.streams:not(.page-bg) h1, .streams:not(.page-bg) h2, .streams:not(.page-bg) h3,
.sponsors .basic-sp h1, .sponsors .basic-sp h2, .sponsors .basic-sp h3,
.tournament .news h1, .tournament .news h2, .tournament .news h3 {
    color: var(--nmg-text);
}

/* minor light slivers the parent leaves around the edges */
#progressBar { background: var(--nmg-surface-2) !important; }
.news-container aside .sidebar-widget .tagcloud a {
    background-color: var(--nmg-surface-2) !important;
    border-color: var(--nmg-border) !important;
    color: var(--nmg-muted) !important;
}
.tournaments .section-header ul li:before,
.about-staff .section-header ul li:not(:first-child):before {
    background: var(--nmg-border) !important;
}

/* ==========================================================================
   SUBPAGE DESIGN SYSTEM (.nmg-page) — site-wide, shared by the redesigned
   inner pages (About first; News / Roster / Player to follow). Pages carrying
   a child template opt in via the `nmg-sub` body class (functions.php). The
   parent's empty `header.is-page::after` band is dropped here so each subpage's
   own masthead (.nmg-ph) is the top visual. px sizing (parent root = 10px).
   Tokens mirror the home design so the look is one system, not two.
   ========================================================================== */
body.nmg-sub { background: var(--nmg-bg); }
body.nmg-sub header.is-page { height: auto !important; min-height: 0 !important; }
body.nmg-sub header.is-page[data-image]::after { display: none !important; }
/* Match home: the subpage nav is the same .nav-placeholder, which carries the
   transparent-ish scrim from front.css. The only thing making subpages look
   like a solid bar was this header's flat var(--nmg-bg) fill behind the nav —
   drop it so the shared scrim governs and the bar reads transparent-ish too. */
body.nmg-sub header.is-page { background: transparent !important; border: 0 !important; box-shadow: none !important; }

.nmg-page {
    --disp: 'Chakra Petch', system-ui, sans-serif;
    --body: 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --epic: #a335ee; --epic-dim: #7b27b4; --legend: #ff8000; --green: #1eff00; --rare: #3fc7eb;
    --bg: #0a0c11; --surface: #141a21; --surface2: #1b232d; --border: #28323f;
    --txt: #e7ebf0; --muted: #9aa6b2;
    /* Muted-but-legible: for tracked micro-labels (WORLD/REGION/REALM, eyebrows,
       field labels) the plain --muted reads as a faint whisper on --bg. This is
       the readability floor for structural caps — brighter, still secondary. */
    --label: #b8c2cd;
    --maxw: 1280px;          /* content spine — widened from 1180 for breathing room */
    font-family: var(--body);
    color: var(--txt);
    background: var(--bg);
}
.nmg-page a { color: inherit; text-decoration: none; transition: color .2s; }
/* Horizontal gutter only — set as longhands on purpose. Section blocks below
   (.nmg-*-body, .nmg-statstrip, .nmg-crew, .nmg-pagination…) ALSO carry .nmg-wrap,
   so a `padding` SHORTHAND here (0,2,0) would out-specify their single-class
   vertical padding (0,1,0) and silently zero every top/bottom gap — header,
   body and footer would touch on the pixel. Touch only left/right here. */
.nmg-page .nmg-wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* shared bits (eyebrow / strike / buttons / section heads) — scoped to .nmg-page
   so they don't collide with the home-only versions under .nmg-front. */
.nmg-page .nmg-eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .24em;
    text-transform: uppercase; color: var(--label); margin: 0 0 15px; }
.nmg-page .nmg-eyebrow b { color: var(--epic); font-weight: 700; }
.nmg-page .nmg-strike { color: var(--green); position: relative; white-space: nowrap; }
.nmg-page .nmg-strike::after { content: ""; position: absolute; left: -1%; right: -1%; top: 54%;
    height: .07em; background: var(--green); transform: rotate(-2.4deg); box-shadow: 0 0 18px rgba(30,255,0,.4); }
.nmg-page .nmg-btn { font-family: var(--disp); font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; font-size: 13px; padding: 12px 22px; border-radius: 8px; border: 0;
    cursor: pointer; transition: .22s; display: inline-block; }
.nmg-page .nmg-btn-primary { background: linear-gradient(135deg, var(--epic), var(--epic-dim)); color: #fff;
    box-shadow: 0 8px 22px -10px rgba(163,53,238,.8); }
.nmg-page .nmg-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); color: #fff; }
.nmg-page .nmg-btn-ghost { background: transparent; color: var(--txt); border: 1px solid var(--border); }
.nmg-page .nmg-btn-ghost:hover { border-color: var(--epic); color: #fff; }
.nmg-page .nmg-sec-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 28px; }
.nmg-page .nmg-marker { font-family: var(--mono); color: var(--epic); font-weight: 700; font-size: 18px; }
.nmg-page .nmg-sec-head h2 { font-family: var(--disp); font-weight: 700; margin: 0;
    font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.01em; text-transform: uppercase; }

/* --- page masthead (.nmg-ph) ------------------------------------------------ */
/* .nmg-ph is a <header> element, so the parent's minified `header{height:988px}`
   would balloon it — pin height to its content. */
.nmg-ph { height: auto !important; min-height: 360px;
    /* The parent theme centers EVERY <header> (header{text-align:center;
       align-items:center}); our masthead is a <header>, so force it back to the
       left spine the rest of the page uses — otherwise the hero floats centered
       while the body is left-aligned (two competing alignment systems). */
    text-align: left !important;
    /* Cinematic, content-bottom-aligned masthead (mirrors the front-page hero
       overlay) instead of a flat top-padded band. */
    display: flex !important; flex-direction: column; justify-content: flex-end;
    align-items: stretch !important;
    position: relative; overflow: hidden; border-bottom: 1px solid var(--border);
    /* per-page accent (overridden per template below); drives the masthead tint
       AND the crest silhouette colour so each subpage reads distinct. */
    --ph-accent: var(--epic, #a335ee);
    padding: 120px 0 40px; background:
        radial-gradient(120% 150% at 86% -15%, color-mix(in srgb, var(--ph-accent) 34%, transparent), transparent 60%),
        radial-gradient(90% 150% at -5% 120%, rgba(255,128,0,.12), transparent 58%),
        var(--bg); }
/* faint tactical grid so an imageless masthead still reads as art-directed */
.nmg-ph::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
    mask-image: linear-gradient(to bottom, #000, transparent 72%); }
/* per-page backdrop image — now reads as cinematic, not a 14%-opacity ghost.
   Its own gradient scrim keeps the title legible over busy raid screenshots. */
.nmg-ph-bg { position: absolute; inset: 0; background-size: cover; background-position: center 26%;
    opacity: .5; filter: saturate(.92) contrast(1.03); z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.4) 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.4) 58%, transparent 100%); }
.nmg-ph-bg::after { content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(0deg, var(--bg) 1%, rgba(10,12,17,.1) 55%, transparent 78%),
        linear-gradient(90deg, rgba(10,12,17,.72), transparent 56%); }
/* combat-log scanline texture — subtle horizontal raster over the masthead,
   faded top+bottom so it never competes with the title. */
.nmg-ph::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
    opacity: .45;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%, transparent 94%);
    mask-image: linear-gradient(to bottom, transparent, #000 38%, transparent 94%); }
/* guild crest as a per-page accent silhouette (alpha mask → solid accent fill).
   Sits center-right, bleeding off the edge, behind the left-aligned title. */
.nmg-ph-emblem { content: ""; position: absolute; z-index: 0; pointer-events: none;
    top: 50%; right: clamp(-100px, -3vw, -24px); transform: translateY(-48%);
    width: clamp(240px, 30vw, 440px); aspect-ratio: 900 / 814; opacity: .15;
    background: var(--ph-accent, #a335ee);
    -webkit-mask: url("assets/img/nmg-emblem.png") no-repeat center / contain;
            mask: url("assets/img/nmg-emblem.png") no-repeat center / contain; }
/* per-page masthead accent (WoW quality palette; deliberately no guild-green) */
.nmg-apply       .nmg-ph { --ph-accent: #a335ee; } /* epic purple   */
.nmg-about       .nmg-ph { --ph-accent: #3fa7ff; } /* rare blue     */
.nmg-news        .nmg-ph,
.nmg-single      .nmg-ph { --ph-accent: #ff7a2f; } /* legendary org */
.nmg-gallery     .nmg-ph { --ph-accent: #25d0b4; } /* artifact teal */
.nmg-streams     .nmg-ph { --ph-accent: #9146ff; } /* twitch purple */
.nmg-progression .nmg-ph { --ph-accent: #f5b301; } /* astounding    */
.nmg-history     .nmg-ph { --ph-accent: #c9a36b; } /* heirloom tan  */
.nmg-teams       .nmg-ph { --ph-accent: #ff5f6d; } /* crimson       */
.nmg-sponsor     .nmg-ph { --ph-accent: #f5b301; }
.nmg-player-id   .nmg-ph { --ph-accent: #a335ee; }

/* The gradient masthead (accent wash + tactical grid + scanlines) stays on
   every subpage. Only the guild crest overlay (.nmg-ph-emblem) was dropped —
   it's no longer emitted (see nmg_ph_bg in functions.php). About + Apply
   additionally carry the guild header image on top of the gradient. */
@media (max-width: 600px) { .nmg-ph-emblem { opacity: .1; width: 200px; } }
.nmg-ph-in { position: relative; z-index: 1; }
.nmg-ph-title { font-family: var(--disp); font-weight: 700; color: var(--txt); margin: 0;
    font-size: clamp(34px, 4.6vw, 60px); line-height: .98; letter-spacing: -.015em; text-transform: uppercase; }
.nmg-ph-sub { font-family: var(--disp); font-weight: 500; color: var(--muted);
    font-size: clamp(15px, 1.5vw, 18px); margin: 14px 0 0; max-width: 640px; }
.nmg-ph-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.nmg-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px;
    letter-spacing: .04em; color: var(--muted); background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: 7px 14px; }
.nmg-pill i { color: var(--epic); }
.nmg-pill b { color: var(--txt); font-weight: 600; }
.nmg-ph-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Bulletproof left-align: the parent theme re-centers header content via several
   selectors (header{}, .inner-page-header{text-align:center;align-items:center}…),
   so a single rule on .nmg-ph loses through inheritance. Force every masthead
   descendant left, and pin the flex rows (pills/CTAs) to the start. */
.nmg-page .nmg-ph, .nmg-page .nmg-ph * { text-align: left !important; }
/* The masthead is a flex column whose <header> the parent tries to center; the
   inner wrap must STRETCH to the full --maxw box (then its own margin:auto
   centers that box) so its content sits on the exact same left spine as the
   stat strip / body below, instead of shrink-wrapping and floating to the middle. */
.nmg-page .nmg-ph-in { align-items: flex-start !important; align-self: stretch !important; width: 100%; }
.nmg-page .nmg-ph-meta, .nmg-page .nmg-ph-cta { justify-content: flex-start !important; }

/* --- About: story + stats --------------------------------------------------- */
/* Single centered column (Option 1): the whole About page shares one readable
   width, so hero + stat strip + body + crew all sit on the same spine — no
   lopsided right-rail void, and the hero can't drift out of alignment with the
   body. The masthead background still spans full width (only .nmg-ph-in narrows). */
/* Masthead + stats + crew share the site's full --maxw spine (matches the nav /
   footer / front page); only the running prose narrows to a readable measure,
   left-aligned on that same spine — so nothing floats at its own width. */
.nmg-statstrip { padding-top: 60px; }
.nmg-about-body { padding-top: 56px; padding-bottom: 8px; }
.nmg-prose { color: #cdd5de; line-height: 1.75; font-size: 16.5px; max-width: 70ch; }
/* Strong section separation: a section heading gets generous space ABOVE
   (chunks the wall of text into blocks) but stays tight to the body it owns.
   First child has no top gap so it aligns under the section head. */
.nmg-prose :is(h1, h2, h3, h4) { font-family: var(--disp); color: var(--txt); text-transform: none;
    letter-spacing: 0; line-height: 1.25; margin: 2.6em 0 .6em; }
.nmg-prose > :first-child { margin-top: 0; }
.nmg-prose h3 { font-size: 22px; } .nmg-prose h4 { font-size: 18px; margin-top: 1.9em; }
.nmg-prose p { margin: 0 0 1.25em; } .nmg-prose strong { color: var(--txt); }
.nmg-prose a { color: var(--epic); } .nmg-prose a:hover { color: var(--green); }
.nmg-prose ul, .nmg-prose ol { margin: 0 0 1.1em 1.2em; }
.nmg-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.nmg-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.nmg-stat-v { font-family: var(--disp); font-weight: 700; font-size: 26px; color: var(--txt); line-height: 1; }
.nmg-stat-l { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); }

/* --- About: crew ------------------------------------------------------------ */
.nmg-crew { padding-top: 72px; padding-bottom: 64px; }
.nmg-crew-cat { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); margin: 34px 0 16px; display: flex; align-items: center; gap: 10px; }
.nmg-crew-cat::before { content: ""; width: 18px; height: 2px; background: var(--epic); }
.nmg-crew-cat span { font-weight: 700; color: var(--epic); background: var(--surface2); border: 1px solid var(--border);
    border-radius: 5px; padding: 1px 7px; font-size: 11px; }
.nmg-crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.nmg-person { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 14px; position: relative; overflow: hidden; transition: .22s; }
.nmg-person::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--epic); opacity: .8; }
.nmg-person:hover { transform: translateY(-3px); border-color: var(--epic); }
.nmg-person-av { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none;
    border: 1px solid var(--border); background: var(--surface2); }
.nmg-person-av--ph { display: block; }
.nmg-person-meta { min-width: 0; }
.nmg-person-name { display: block; font-family: var(--disp); font-weight: 600; font-size: 17px; color: var(--txt); }
.nmg-person-role { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.nmg-person-social { list-style: none; display: flex; gap: 10px; margin: 8px 0 0; padding: 0; }
.nmg-person-social a { color: var(--muted); font-size: 14px; } .nmg-person-social a:hover { color: var(--epic); }

@media (max-width: 640px) {
    .nmg-statgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .nmg-ph { padding-top: 64px; }
    .nmg-crew-grid { grid-template-columns: 1fr; }
}

/* --- News: image-card grid + pagination ------------------------------------- */
/* News masthead carries no pills/CTAs, so tighten it vs the About masthead. */
.nmg-news .nmg-ph { padding: 52px 0 30px; }
/* Progression/History never got a masthead override, so they used the generic
   40px bottom padding and sat ~10px higher than the other subpages. Match them. */
.nmg-progression .nmg-ph,
.nmg-history .nmg-ph { padding: 52px 0 30px; }
.nmg-news-body { padding: 56px 0 76px; }
.nmg-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nmg-news-card { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 16px;
    overflow: hidden; border: 1px solid var(--border); background: var(--surface2); transition: border-color .22s, transform .22s; }
.nmg-news-card:hover { transform: translateY(-4px); border-color: var(--epic); }
.nmg-news-card:focus-visible { outline: 2px solid var(--epic); outline-offset: 2px; }
.nmg-news-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.nmg-news-card:hover .nmg-news-img { transform: scale(1.06); }
.nmg-news-card--noimg { background:
    radial-gradient(120% 160% at 100% 0%, rgba(163,53,238,.25), transparent 60%), var(--surface2); }
.nmg-news-grad { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(10,12,17,.96) 8%, rgba(10,12,17,.25) 52%, transparent 80%); }
.nmg-news-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px; }
.nmg-news-cat { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; font-weight: 700; color: #fff; background: rgba(163,53,238,.85);
    border-radius: 5px; padding: 3px 8px; margin-bottom: 9px; }
.nmg-news-title { font-family: var(--disp); font-weight: 600; color: #fff; font-size: 17px; line-height: 1.18;
    margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nmg-news-date { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
    color: var(--muted); margin-top: 8px; }
.nmg-news-empty { color: var(--muted); font-family: var(--mono); padding: 40px 0; }

.nmg-page .nmg-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 44px; }
.nmg-page .nmg-pagination .page-numbers { font-family: var(--mono); font-size: 13px; min-width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid var(--border);
    border-radius: 9px; color: var(--muted); transition: .2s; }
.nmg-page .nmg-pagination a.page-numbers:hover { border-color: var(--epic); color: var(--txt); }
.nmg-page .nmg-pagination .page-numbers.current { background: var(--epic); border-color: var(--epic); color: #fff; font-weight: 700; }
.nmg-page .nmg-pagination .page-numbers.dots { border-color: transparent; }

@media (max-width: 860px) { .nmg-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .nmg-news-grid { grid-template-columns: 1fr; } }

/* shared: section-head trailing meta (scoped subpage version) */
.nmg-page .nmg-sec-head .nmg-rest { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* --- Sponsors --------------------------------------------------------------- */
.nmg-sponsor .nmg-ph { padding: 56px 0 32px; }
.nmg-sponsor-body { padding: 36px 0 66px; }
.nmg-sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.nmg-sp-grid--head { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.nmg-sp-card { display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 26px; transition: .22s; }
.nmg-sp-card:hover { transform: translateY(-4px); border-color: var(--epic); }
.nmg-sp-card--head { background:
    radial-gradient(120% 160% at 100% 0%, rgba(163,53,238,.16), transparent 60%), var(--surface); padding: 32px; }
.nmg-sp-logo { height: 64px; display: flex; align-items: center; }
.nmg-sp-logo img { max-height: 64px; max-width: 200px; width: auto; object-fit: contain; }
.nmg-sp-card--head .nmg-sp-logo { height: 84px; } .nmg-sp-card--head .nmg-sp-logo img { max-height: 84px; }
.nmg-sp-body { flex: 1; }
.nmg-sp-name { font-family: var(--disp); font-weight: 600; font-size: 20px; color: var(--txt); margin: 0 0 6px; }
.nmg-sp-about { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.nmg-sp-social { list-style: none; display: flex; gap: 12px; margin: 12px 0 0; padding: 0; }
.nmg-sp-social a { color: var(--muted); font-size: 15px; } .nmg-sp-social a:hover { color: var(--epic); }
.nmg-sp-card .nmg-btn { align-self: flex-start; }

/* --- Gallery ---------------------------------------------------------------- */
.nmg-gallery .nmg-ph { padding: 52px 0 30px; }
.nmg-gallery-body { padding: 56px 0 76px; }
.nmg-gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.nmg-gal-item { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface2); }
.nmg-gal-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .3s; filter: saturate(.95); }
.nmg-gal-item:hover img { transform: scale(1.07); filter: saturate(1.1); }
.nmg-gal-item:hover { border-color: var(--epic); }
.nmg-gal-item:focus-visible { outline: 2px solid var(--epic); outline-offset: 2px; }

/* --- Livestreams ------------------------------------------------------------ */
.nmg-streams .nmg-ph { padding: 52px 0 30px; }
.nmg-streams-body { padding: 56px 0 76px; }
.nmg-stream-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nmg-stream-card { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface2); transition: .22s; }
.nmg-stream-card:hover { transform: translateY(-4px); border-color: var(--epic); }
.nmg-stream-card:focus-visible { outline: 2px solid var(--epic); outline-offset: 2px; }
.nmg-stream-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nmg-stream-grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10,12,17,.95) 6%, rgba(10,12,17,.15) 55%, transparent 80%); }
.nmg-stream-badge { position: absolute; top: 12px; left: 12px; z-index: 3; font-family: var(--mono); font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border-radius: 5px; padding: 4px 9px; }
.nmg-stream-badge.is-live { color: #fff; background: #e0245e; box-shadow: 0 0 14px rgba(224,36,94,.55); }
.nmg-stream-badge.is-live::before { content: "●"; margin-right: 5px; }
.nmg-stream-badge.is-off { color: var(--muted); background: var(--surface2); border: 1px solid var(--border); }
.nmg-stream-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-size: 30px; color: rgba(255,255,255,.85); opacity: 0; transition: opacity .22s; }
.nmg-stream-card:hover .nmg-stream-play { opacity: 1; }
.nmg-stream-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px; }
.nmg-stream-name { display: block; font-family: var(--disp); font-weight: 700; font-size: 18px; color: #fff; }
.nmg-stream-sub { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); margin-top: 4px; }

@media (max-width: 860px) {
    .nmg-gal-grid { grid-template-columns: repeat(3, 1fr); }
    .nmg-stream-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .nmg-gal-grid { grid-template-columns: repeat(2, 1fr); }
    .nmg-stream-grid { grid-template-columns: 1fr; }
}

/* --- Teams / Roster --------------------------------------------------------- */
.nmg-teams .nmg-ph { padding: 56px 0 32px; }
.nmg-teams-body { padding: 36px 0 66px; }
.nmg-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.nmg-team-card { display: flex; flex-direction: column; gap: 18px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 24px; transition: .22s; }
.nmg-team-card:hover { transform: translateY(-4px); border-color: var(--epic); }
.nmg-team-game { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--epic); background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; margin-bottom: 10px; }
.nmg-team-name { font-family: var(--disp); font-weight: 700; font-size: 18px; line-height: 1.25; margin: 0; }
.nmg-team-name a { color: var(--txt); } .nmg-team-name a:hover { color: var(--epic); }
.nmg-team-members { list-style: none; display: flex; margin: 0; padding: 0; }
.nmg-team-members li { margin-left: -10px; } .nmg-team-members li:first-child { margin-left: 0; }
.nmg-team-members img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface);
    background: var(--surface2); display: block; transition: transform .2s; }
.nmg-team-members li:hover img { transform: translateY(-3px); }
.nmg-team-more { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-left: -10px;
    background: var(--surface2); border: 2px solid var(--surface); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.nmg-team-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-top: 1px solid var(--border); padding-top: 16px; }
.nmg-team-from { font-family: var(--mono); font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.nmg-team-link { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--epic); }
.nmg-team-link:hover { color: var(--green); }
.nmg-team-link i { margin-left: 5px; }

/* --- Player detail ---------------------------------------------------------- */
.nmg-player-hero { padding: 56px 0 36px; }
.nmg-player-head { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.nmg-player-av { width: 132px; height: 132px; border-radius: 18px; object-fit: cover; border: 2px solid var(--border);
    background: var(--surface2); box-shadow: var(--nmg-shadow); flex: none; }
.nmg-player-id { min-width: 0; }
.nmg-player-id .nmg-ph-title { font-size: clamp(34px, 5.5vw, 64px); }
.nmg-player-class { font-family: var(--disp); font-weight: 500; color: var(--epic); font-size: clamp(15px, 1.7vw, 20px); margin: 6px 0 0; }
.nmg-player-body { display: grid; grid-template-columns: 1fr 300px; gap: 44px; padding-top: 40px; padding-bottom: 8px; align-items: start; }
.nmg-player-links { display: flex; flex-wrap: wrap; gap: 12px; }
.nmg-player-links .nmg-btn i { margin-left: 7px; font-size: .85em; }
.nmg-fact-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 8px 20px; }
.nmg-fact { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.nmg-fact:last-child { border-bottom: 0; }
.nmg-fact-l { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nmg-fact-v { font-weight: 600; color: var(--txt); font-size: 14px; text-align: right; }
.nmg-fact-link { color: var(--epic) !important; } .nmg-fact-link:hover { color: var(--green) !important; }
.nmg-player-social { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 20px; padding: 0 4px; }
.nmg-player-social a { color: var(--muted); font-size: 18px; } .nmg-player-social a:hover { color: var(--epic); }
.nmg-social-tag { font-family: var(--mono); font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 860px) {
    .nmg-player-body { grid-template-columns: 1fr; gap: 32px; }
    .nmg-player-av { width: 104px; height: 104px; }
}

/* --- Single team ------------------------------------------------------------ */
.nmg-team-single-body { padding: 36px 0 66px; }
.nmg-team-about { max-width: 760px; }
.nmg-team-socials { margin-top: 20px; }
.nmg-person--link { cursor: pointer; }
.nmg-person-tag { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--epic); background: var(--surface2); border: 1px solid var(--border);
    border-radius: 4px; padding: 2px 7px; }

/* ==========================================================================
   COMBAT-LOG layer — the signature device that ties subpages to the front
   page's data-rich, hero-led world: a monospace progression ribbon under each
   masthead, a cleaner sequence-free section head, and the redesigned single
   post (Dispatches article / Progression overview). Tokens inherited from
   .nmg-page above; sizes in px (parent root = 10px).
   ========================================================================== */

/* --- log-line ribbon (nmg_logline()) --------------------------------------- */
.nmg-page .nmg-logline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 11px;
    margin-top: 24px; padding: 10px 16px; max-width: 100%;
    font-family: var(--mono); font-size: 12px; letter-spacing: .03em; line-height: 1; color: var(--muted);
    background: rgba(7,10,14,.66); border: 1px solid var(--border); border-radius: 10px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nmg-logline b { color: var(--txt); font-weight: 700; }
.nmg-ll-mark { color: var(--legend); font-size: 11px; }
.nmg-ll-sep { color: var(--epic); opacity: .55; margin: 0 1px; }
.nmg-ll-k { color: var(--green); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.nmg-ll-ce { color: var(--legend); text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
    border: 1px solid var(--legend); border-radius: 5px; padding: 3px 8px;
    box-shadow: 0 0 14px rgba(255,128,0,.28); }
.nmg-ll-prog { color: var(--txt); font-weight: 700; }
.nmg-ll-date { color: var(--rare); opacity: .9; }

/* --- sequence-free section head (.nmg-head) — replaces decorative 01/02
   markers on pages whose sections aren't an ordered sequence (e.g. About). --- */
.nmg-page .nmg-head { margin: 0 0 26px; }
.nmg-page .nmg-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--epic); }
.nmg-page .nmg-kicker::before { content: ""; width: 26px; height: 2px; background: var(--epic); flex: none; }
.nmg-page .nmg-head h2 { font-family: var(--disp); font-weight: 700; margin: 0;
    font-size: clamp(24px, 3vw, 36px); letter-spacing: -.01em; text-transform: uppercase; line-height: 1.05; }

/* --- About: relabelled CTAs / clearer stats (template-side copy fixes pair
   with these). Give the stat values real presence. --- */
.nmg-stat-v { letter-spacing: -.01em; }

/* --- Single post: Dispatch article + Progression overview ------------------ */
/* The body uses the readable .nmg-prose measure, centered; the masthead carries
   the featured image full-bleed via .nmg-ph-bg + the log-line ribbon. */
.nmg-single .nmg-ph { padding-top: 124px; }
.nmg-single-body { padding: 56px 0 84px; }
.nmg-single-body .nmg-wrap { max-width: 820px; }
.nmg-single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
    font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--muted);
    padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--border); }
.nmg-single-meta .nmg-news-cat { position: static; margin: 0; }
.nmg-single-meta .nmg-author b { color: var(--txt); font-weight: 600; }
.nmg-single-prose { color: #cdd5de; line-height: 1.78; font-size: 17px; }
.nmg-single-prose > :first-child { margin-top: 0; }
.nmg-single-prose p { margin: 0 0 1.3em; }
.nmg-single-prose :is(h2, h3, h4) { font-family: var(--disp); color: var(--txt); letter-spacing: -.005em;
    line-height: 1.2; margin: 2em 0 .55em; }
.nmg-single-prose h2 { font-size: 27px; } .nmg-single-prose h3 { font-size: 22px; } .nmg-single-prose h4 { font-size: 18px; }
.nmg-single-prose a { color: var(--epic); } .nmg-single-prose a:hover { color: var(--green); }
.nmg-single-prose strong { color: var(--txt); }
.nmg-single-prose ul, .nmg-single-prose ol { margin: 0 0 1.2em 1.3em; }
.nmg-single-prose li { margin: 0 0 .4em; }
.nmg-single-prose img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); margin: 1.2em 0; }
.nmg-single-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--epic);
    color: var(--muted); font-style: italic; }
.nmg-single-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 14px; }
.nmg-single-prose :is(th, td) { border: 1px solid var(--border); padding: 9px 12px; text-align: left; }
.nmg-single-prose th { background: var(--surface2); color: var(--txt); font-family: var(--mono);
    text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }

/* progression callout — class-colored progress chip for `prog` (kill) posts */
.nmg-prog-chip { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px;
    font-family: var(--mono); padding: 12px 18px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--border); }
.nmg-prog-chip .nmg-pc-prog { font-size: 22px; font-weight: 700; color: var(--legend); letter-spacing: .02em; }
.nmg-prog-chip .nmg-pc-lab { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* share + tags footer of an article */
.nmg-single-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 18px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border); }
.nmg-share { display: flex; align-items: center; gap: 12px; }
.nmg-share-lab { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.nmg-share a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px;
    border: 1px solid var(--border); color: var(--muted); transition: .2s; }
.nmg-share a:hover { border-color: var(--epic); color: var(--txt); transform: translateY(-2px); }
.nmg-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.nmg-tags a { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted);
    background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; transition: .2s; }
.nmg-tags a:hover { border-color: var(--epic); color: var(--txt); }

/* back-to-news pager + post nav */
.nmg-postnav { display: flex; justify-content: space-between; gap: 14px; margin-top: 34px; }
.nmg-postnav a { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted);
    display: inline-flex; align-items: center; gap: 8px; transition: color .2s; max-width: 46%; }
.nmg-postnav a:hover { color: var(--epic); }

@media (max-width: 520px) {
    .nmg-ph { min-height: 300px; padding-top: 104px; }
    .nmg-single-foot { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   WAVE 1 — RESPONSIVE / MOBILE QA
   Breakpoints: 1024 (tablet-landscape), 768 (tablet-portrait), 480 (phone).
   Rules are additive — desktop styles above are untouched.
   ========================================================================== */

/* --- Overflow guard --------------------------------------------------------
   The absolute-positioned .nmg-ph-bg extends beyond the container on
   short viewports; clip at the header level so nothing bleeds sideways. */
.nmg-ph { overflow: hidden; }

/* --- Shared wrap padding -------------------------------------------------- */
@media (max-width: 480px) {
    /* Tighten horizontal gutters on small phones (28px → 16px). */
    .nmg-page .nmg-wrap { padding-left: 16px; padding-right: 16px; }
}

/* --- Page masthead (.nmg-ph) --------------------------------------------- */
/* Tablet-landscape: reduce generous padding so the masthead doesn't consume
   the whole fold when header + nav are already taller. */
@media (max-width: 1024px) {
    .nmg-single .nmg-ph { padding-top: 90px; }
}

@media (max-width: 768px) {
    /* Subpage mastheads (about/news/gallery/streams): scale down top padding. */
    .nmg-news .nmg-ph,
    .nmg-gallery .nmg-ph,
    .nmg-streams .nmg-ph { padding: 40px 0 24px; }

    /* About masthead — it carries pills + CTA which need room but not as much. */
    .nmg-about .nmg-ph { padding-top: 56px; padding-bottom: 28px; }

    /* Single-post: the 124px top-pad is too much once the nav collapses. */
    .nmg-single .nmg-ph { padding-top: 72px; }

    /* Masthead title: let it scale between 26px and 44px fluidly. */
    .nmg-ph-title { font-size: clamp(26px, 6vw, 44px) !important; }

    /* Log-line ribbon: allow full wrapping on narrower screens and prevent
       overflow from very long boss names. */
    .nmg-page .nmg-logline {
        font-size: 11px;
        gap: 8px;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Pills (.nmg-pill) row — already flex-wrap; just tighten gap. */
    .nmg-ph-meta { gap: 8px; }

    /* CTA buttons — ensure tap targets are at least 44px tall. */
    .nmg-ph-cta .nmg-btn { min-height: 44px; }

    /* Section-head flex row: at this width the auto-margin .nmg-rest overflows;
       switch to a column so header + count stack cleanly. */
    .nmg-page .nmg-sec-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .nmg-page .nmg-sec-head .nmg-rest { margin-left: 0; }
}

@media (max-width: 480px) {
    /* Phone: single-post masthead sits directly under the (now hidden) desktop nav. */
    .nmg-single .nmg-ph { padding-top: 64px; }

    /* Eyebrow + title: prevent overflow at 320-375px. */
    .nmg-ph-title { font-size: clamp(24px, 7vw, 36px) !important; }
    .nmg-eyebrow { font-size: 11px; }

    /* Log-line: hide the Cutting Edge badge on the smallest phones so the
       ribbon doesn't force two lines of wrapping. */
    .nmg-ll-ce { display: none; }

    /* CTA row: full width single-column on phones. */
    .nmg-ph-cta { flex-direction: column; gap: 10px; }
    .nmg-ph-cta .nmg-btn { width: 100%; justify-content: center; }
}

/* --- News grid + cards ---------------------------------------------------- */
@media (max-width: 1024px) {
    /* 3-col already drops to 2-col at 860px — no extra step needed here.
       Tighten card title size slightly on mid-range tablets. */
    .nmg-news-title { font-size: 15px; }
}

@media (max-width: 480px) {
    /* On phones the single-column card's aspect-ratio (16/10) is fine, but
       set a sensible min-height so very short viewports still show content. */
    .nmg-news-card { min-height: 180px; }

    /* News body: tighten vertical padding so the page doesn't feel empty. */
    .nmg-news-body { padding: 36px 0 48px; }
}

/* --- Gallery grid --------------------------------------------------------- */
@media (max-width: 1024px) {
    /* 4-col → 3-col at tablet-landscape (before the 860px rule kicks in). */
    .nmg-gal-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 860 → 3-col and 520 → 2-col already covered above; add 480px safety. */
@media (max-width: 480px) {
    /* Ensure 2-col is maintained even at 320px; 1-col would waste a lot of
       space for a screenshot gallery. */
    .nmg-gal-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .nmg-gallery-body { padding: 36px 0 48px; }
}

/* --- Streams grid --------------------------------------------------------- */
@media (max-width: 480px) {
    .nmg-streams-body { padding: 36px 0 48px; }
}

/* --- Stats strip (.nmg-statgrid) ----------------------------------------- */
@media (max-width: 768px) {
    /* 4 stats in 2 rows of 2 — already handled at 640px, but at tablet-portrait
       the gap is too generous; tighten it. */
    .nmg-statgrid { gap: 10px; }
    .nmg-stat { padding: 14px 12px; }
    .nmg-stat-v { font-size: 22px; }
}

/* --- Crew grid ------------------------------------------------------------ */
@media (max-width: 480px) {
    /* auto-fill minmax(220px) will already collapse on phones; explicit 1-col
       was added at 520px above. Tighten card padding on small phones. */
    .nmg-person { padding: 12px; gap: 10px; }
    .nmg-person-av { width: 48px; height: 48px; border-radius: 10px; }
}

/* --- Single-post layout --------------------------------------------------- */
@media (max-width: 768px) {
    /* Body section: reduce top/bottom padding on tablets. */
    .nmg-single-body { padding: 40px 0 56px; }

    /* Progress chip: scale down the boss-kill callout. */
    .nmg-prog-chip .nmg-pc-prog { font-size: 18px; }
    .nmg-prog-chip { padding: 10px 14px; gap: 10px; }

    /* Post navigation: allow links to take more horizontal space. */
    .nmg-postnav a { max-width: 48%; }
}

@media (max-width: 480px) {
    /* Single post body padding. */
    .nmg-single-body { padding: 28px 0 40px; }

    /* Progress chip: fully compact on phones. */
    .nmg-prog-chip .nmg-pc-prog { font-size: 16px; }
    .nmg-prog-chip .nmg-pc-lab { font-size: 10px; }

    /* Post nav: stack vertically so long titles don't get 46% clipped. */
    .nmg-postnav { flex-direction: column; gap: 10px; }
    .nmg-postnav a { max-width: 100%; }

    /* Share row tap targets: make icon buttons slightly larger. */
    .nmg-share a { width: 44px; height: 44px; }

    /* Prose: slightly reduce base font-size on phones. */
    .nmg-single-prose { font-size: 15.5px; }
}

/* --- About page body sections --------------------------------------------- */
@media (max-width: 768px) {
    .nmg-statstrip { padding-top: 40px; }
    .nmg-about-body { padding-top: 40px; }
    .nmg-crew { padding-top: 48px; padding-bottom: 40px; }
    /* Prose: let it stretch to 100% on tablets instead of capping at 70ch. */
    .nmg-prose { font-size: 15.5px; }
}

@media (max-width: 480px) {
    .nmg-statstrip { padding-top: 28px; }
    .nmg-about-body { padding-top: 28px; }
    .nmg-prose { font-size: 15px; }
}

/* --- Pagination ----------------------------------------------------------- */
@media (max-width: 480px) {
    /* Ensure page-number buttons stay at least 40px on small screens
       (they're already 40px tall by default — keep that but widen gap). */
    .nmg-page .nmg-pagination { gap: 6px; margin-top: 32px; }
    .nmg-page .nmg-pagination .page-numbers { font-size: 12px; }
}

/* --- Section head (gallery sections with .nmg-sec-head) ------------------- */
@media (max-width: 768px) {
    /* The gallery page uses .nmg-sec-head inline with a .nmg-marker number;
       at tablet the flex row is fine, but tighten the marker size. */
    .nmg-sec-head .nmg-marker { font-size: 10px; }
}

/* === W5.1 — Twitch featured embed ======================================== */

/*
 * .nmg-stream-feature — 16:9 responsive container for the featured Twitch
 * player iframe. Sits at the top of .nmg-streams-body, above the card grid.
 * Styled to match the combat-log dark panel aesthetic (same border/bg tokens
 * used by .nmg-ph and the stream cards).
 */
.nmg-stream-feature {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto 48px;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--nmg-border, rgba(255,255,255,.08));
    background: var(--nmg-surface, #0d0d0d);
    box-shadow: 0 4px 32px rgba(0,0,0,.6);
}

.nmg-stream-feature iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Tighten the bottom margin on mobile */
@media (max-width: 768px) {
    .nmg-stream-feature { margin-bottom: 32px; }
}

@media (max-width: 480px) {
    .nmg-stream-feature { margin-bottom: 24px; border-radius: 4px; }
}

/* === end W5.1 ============================================================= */

/* === W3.2 — roster teaser CTA === */
.nmg-roster-cta {
    margin-top: 28px;
    text-align: center;
}
.nmg-roster-cta__link {
    display: inline-block;
    padding: 12px 28px;
    text-decoration: none;
}
/* === end W3.2 ============================================================= */

/* ============================================================================
   W1.6 — Text wordmark logo (replaces image logo)
   Child header.php swaps pixiefreak_custom_logo() for an .nmg-wordmark anchor.
   Combat-log direction: Chakra Petch display face, epic accent, sits left.
   ========================================================================== */
.nav-placeholder .container .nmg-wordmark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    padding: 4px 0;
    margin-right: clamp(24px, 3vw, 52px);   /* breathing room before the nav links */
    flex: none;                     /* never let the nav squeeze it onto 2 lines */
}
.nav-placeholder .container .nmg-wordmark .nmg-wordmark-mark {
    font-family: 'Chakra Petch', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;            /* one line — "NO MORE GREENS" */
    color: #f1f3f6;
    transition: color .25s cubic-bezier(.4,0,.2,1), text-shadow .25s ease;
}
.nav-placeholder .container .nmg-wordmark:hover .nmg-wordmark-mark,
.nav-placeholder .container .nmg-wordmark:focus-visible .nmg-wordmark-mark {
    color: #fff;
    text-shadow: 0 0 18px rgba(163,53,238,.55);   /* --epic glow */
}
/* Strike the "Greens" tail green, matching the footer brand ("No More Greens"
   = no more green-quality drops). Mirrors .nmg-page .nmg-strike, re-scoped to
   the header which lives outside .nmg-page. */
.nav-placeholder .container .nmg-wordmark .nmg-wordmark-mark {
    background: none;
}
.nav-placeholder .container .nmg-wordmark .nmg-strike {
    color: #1eff00;   /* literal — --green is only defined inside .nmg-page; the
                         header sits outside it, so var(--green) resolved to nothing
                         and the strike rendered white + unstruck. */
    position: relative;
    white-space: nowrap;
}
.nav-placeholder .container .nmg-wordmark .nmg-strike::after {
    content: "";
    position: absolute;
    left: -1%;
    right: -1%;
    top: 54%;
    height: .09em;
    background: #1eff00;
    transform: rotate(-2.4deg);
    box-shadow: 0 0 18px rgba(30,255,0,.4);
}

/* ============================================================================
   Home hero — kill the stray carousel progress bar.
   The parent's Owl autoplay "progress-bar" (a full-width line) leaked out under
   the nav as a weird orange/grey strip instead of sitting at the hero foot. The
   hero already has a persistent brand overlay + thumbnail dots for slide nav, so
   the autoplay track is just noise. Hide the track only — the .thumbnails dots
   (slide navigation) are a separate element and stay.
   ========================================================================== */
.nmg-hero .slider-progress-bar { display: none !important; }

/* ============================================================================
   W1.7 — Comments + reply form styling (combat-log)
   Parent comments.php renders: article.comment-container > ul > li.comment
   (markup from inc/comment.php: .the_comment / .comment-author-avatar /
   .comment-body / .comment-meta / .comment-content / .comment-options) and the
   reply form from pixiefreak_comment_form(): #respond / .title #reply-title
   .pixiefreak-add-reply-text / .form-field / #author #email #url / #comment /
   submit button. All of this sits inside main.nmg-page .nmg-single-body, so we
   scope under .nmg-single for specificity + cohesion with the rest of the page.
   ========================================================================== */
.nmg-single .comment-container {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

/* "N thoughts on ..." heading */
.nmg-single .comment-container .comment-headtitle h3 {
    font-family: var(--disp);
    font-weight: 700;
    font-size: 2.1rem;
    color: var(--txt);
    margin: 0 0 1.5rem;
    letter-spacing: .01em;
}

/* comment list */
.nmg-single .comment-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nmg-single .comment-container ul ul.children {
    margin: 1rem 0 0 1.75rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--border);
}
.nmg-single .comment-container li.comment { margin: 0 0 1.25rem; }

.nmg-single .comment-container .the_comment {
    display: flex;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    position: relative;
}
.nmg-single .comment-container .the_comment::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--epic);
    opacity: .8;
    border-radius: 12px 0 0 12px;
}

.nmg-single .comment-container .comment-author-avatar {
    flex: 0 0 auto;
    margin: 0;
}
.nmg-single .comment-container .comment-author-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface2);
    display: block;
}

.nmg-single .comment-container .comment-body { flex: 1 1 auto; min-width: 0; }

.nmg-single .comment-container .comment-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mono);
    font-size: 1.17rem;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: .5rem;
}
.nmg-single .comment-container .comment-meta .comment-meta-author {
    color: var(--txt);
    font-weight: 700;
    text-decoration: none;
}
.nmg-single .comment-container .comment-meta .comment-meta-date { color: var(--muted); }

.nmg-single .comment-container .comment-content {
    font-family: var(--body);
    font-size: 1.5rem;
    line-height: 1.65;
    color: var(--txt);
}
.nmg-single .comment-container .comment-content p { margin: 0 0 .75em; }
.nmg-single .comment-container .comment-content a { color: var(--epic); }
.nmg-single .comment-container .comment-content a:hover { color: var(--green); }

/* per-comment actions (reply / delete / spam) */
.nmg-single .comment-container ul.comment-options {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: .75rem 0 0;
    padding: 0;
}
.nmg-single .comment-container ul.comment-options li { margin: 0; }
.nmg-single .comment-container ul.comment-options a {
    font-family: var(--mono);
    font-size: 1.125rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s ease;
}
.nmg-single .comment-container ul.comment-options a:hover { color: var(--epic); }
.nmg-single .comment-container ul.comment-options i { margin-right: .3rem; }

.nmg-single .comment-container .no-comments {
    font-family: var(--mono);
    font-size: 1.275rem;
    color: var(--muted);
}

/* ---- reply form (#respond) ------------------------------------------------ */
.nmg-single #respond {
    margin-top: 2.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.75rem 1.75rem 1.5rem;
}
.nmg-single #respond .title { margin-bottom: 1.25rem; }
.nmg-single #respond #reply-title,
.nmg-single #respond .pixiefreak-add-reply-text {
    font-family: var(--disp);
    font-weight: 700;
    font-size: 1.95rem;
    color: var(--txt);
    margin: 0;
    letter-spacing: .01em;
}
.nmg-single #respond #reply-title small a { color: var(--epic); font-size: 1.2rem; margin-left: .5rem; }

.nmg-single #respond .form-field {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.nmg-single #respond .form-field > input { flex: 1 1 220px; }

.nmg-single #respond input[type="text"],
.nmg-single #respond input[type="email"],
.nmg-single #respond input[type="url"],
.nmg-single #respond textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--body);
    font-size: 1.5rem;
    color: var(--txt);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .7rem .85rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.nmg-single #respond textarea {
    min-height: 150px;
    resize: vertical;
    margin-bottom: 1rem;
}
.nmg-single #respond input::placeholder,
.nmg-single #respond textarea::placeholder { color: var(--muted); opacity: .85; }
.nmg-single #respond input:focus,
.nmg-single #respond textarea:focus {
    outline: none;
    border-color: var(--epic);
    box-shadow: 0 0 0 3px rgba(163,53,238,.18);
}

.nmg-single #respond .comment-notes,
.nmg-single #respond .logged-in-as {
    font-family: var(--mono);
    font-size: 1.17rem;
    color: var(--muted);
    margin: 0 0 1rem;
}
.nmg-single #respond .comment-notes a,
.nmg-single #respond .logged-in-as a { color: var(--epic); }

/* submit — mirror .nmg-btn-primary (epic gradient) */
.nmg-single #respond .form-submit { margin: 0; }
.nmg-single #respond #submit,
.nmg-single #respond .form-submit button,
.nmg-single #respond .form-submit input[type="submit"] {
    font-family: var(--disp);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 1.425rem;
    color: #fff;
    background: linear-gradient(135deg, var(--epic), var(--epic-dim));
    border: none;
    border-radius: 8px;
    padding: .75rem 1.75rem;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.nmg-single #respond #submit:hover,
.nmg-single #respond .form-submit button:hover,
.nmg-single #respond .form-submit input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -12px rgba(163,53,238,.7);
    filter: brightness(1.06);
}

/* ============================================================================
   W1.8 — Readability sweep (CSS-only)
   The About-page Mythic-progression bracket is styled INLINE in page-about.php
   (Agent A's file), so we override from here with higher specificity
   (.nmg-page .nmg-progression ...) — that block renders in <body> after this
   stylesheet, so equal specificity would lose; the extra class wins regardless.
   Only content-bearing text is bumped; .nmg-prog-table th and .nmg-tier-badge
   stay as intentional mono micro-labels.
   ========================================================================== */
.nmg-page .nmg-progression table.nmg-prog-table { font-size: 1rem; }        /* was .85rem */
.nmg-page .nmg-progression table.nmg-prog-table td { font-size: 1rem; }
.nmg-page .nmg-progression .nmg-pt-name { font-size: 1.08rem; }             /* tier/raid name */
.nmg-page .nmg-progression .nmg-pt-xpac {
    font-size: .85rem;                                                       /* was .75rem */
    color: #b8c2cd;                                                          /* lift from --nmg-muted for contrast */
}
.nmg-page .nmg-progression .nmg-pt-kills { font-size: 1.08rem; }
/* world/region/realm rank chips — keep the numbers readable */
.nmg-page .nmg-progression .nmg-prog-rank { font-size: 1.2rem; }
.nmg-page .nmg-progression .nmg-prog-rank-chip-label { font-size: .74rem; color: #b8c2cd; }

/* General subpage readability: lift the smallest content-bearing pill/meta text
   a touch (intentional 10–12px mono eyebrows/labels are left alone). */
.nmg-page .nmg-single-meta { font-size: .9rem; }                            /* author/date/cat meta */