/* ===========================================================
       Theme: Helldivers Ship Name — managed democracy / propaganda
       Activated by body.pk-page--hsn
       Original execution; nothing official from the game franchise.
       =========================================================== */
    body.pk-page--hsn {
        --hsn-ink:        #07060a;
        --hsn-ink-2:      #100d05;
        --hsn-paper:      #f7d54a;
        --hsn-paper-dim:  #c4a52f;
        --hsn-blood:      #d11a1a;
        --hsn-blood-dim:  #8b0c0c;
        --hsn-fg:         #f7d54a;
        --hsn-fg-mut:     #b89a36;
        --hsn-fg-dim:     #6f5e21;

        background: var(--hsn-ink);
        color: var(--hsn-fg);
        font-family: 'Oswald', 'Impact', system-ui, sans-serif;
        min-height: 100vh;
        position: relative;
    }

    /* Scanlines + radial vignette */
    body.pk-page--hsn::before,
    body.pk-page--hsn::after {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
    }
    body.pk-page--hsn::before {
        background:
            radial-gradient(720px 520px at 50% 0%, rgba(247,213,74,0.08), transparent 65%),
            radial-gradient(520px 420px at 90% 100%, rgba(209,26,26,0.10), transparent 60%),
            linear-gradient(180deg, var(--hsn-ink) 0%, var(--hsn-ink-2) 100%);
    }
    body.pk-page--hsn::after {
        background-image: repeating-linear-gradient(
            0deg,
            rgba(247,213,74,0.025) 0px,
            rgba(247,213,74,0.025) 1px,
            transparent 1px,
            transparent 3px
        );
        opacity: 0.7;
        mix-blend-mode: screen;
    }

    body.pk-page--hsn > *:not(.pk-nav):not(.pk-mnav) { position: relative; z-index: 1; }
    body.pk-page--hsn > .pk-nav { z-index: 50; }

    body.pk-page--hsn .pk-nav {
        background: rgba(7,6,10,0.92) !important;
        border-bottom: 1px solid rgba(247,213,74,0.22) !important;
    }
    body.pk-page--hsn .pk-nav__links a { color: var(--hsn-fg) !important; }
    body.pk-page--hsn .pk-nav__links a:hover { color: var(--hsn-paper) !important; }
    body.pk-page--hsn .pk-nav__dd-trigger { color: var(--hsn-fg) !important; }
    body.pk-page--hsn .pk-nav__dd-trigger:hover,
    body.pk-page--hsn .pk-nav__dd.is-open .pk-nav__dd-trigger,
    body.pk-page--hsn .pk-nav__dd-trigger.is-current { color: var(--hsn-paper) !important; }
    body.pk-page--hsn .pk-nav__lang {
        background: rgba(247,213,74,0.06) !important;
        border-color: rgba(247,213,74,0.22) !important;
    }
    body.pk-page--hsn .pk-nav__lang a {
        color: var(--hsn-fg-mut) !important;
    }
    body.pk-page--hsn .pk-nav__lang a:hover { color: var(--hsn-paper) !important; }
    body.pk-page--hsn .pk-nav__lang a.is-active {
        background: var(--hsn-paper) !important;
        color: #100d05 !important;
    }
    body.pk-page--hsn .pk-nav__burger {
        background: rgba(247,213,74,0.06) !important;
        border-color: rgba(247,213,74,0.22) !important;
        color: var(--hsn-fg) !important;
    }

    /* ============== HERO ============== */
    .hsn-hero {
        text-align: center;
        padding: 56px 24px 28px;
        max-width: 1000px;
        margin: 0 auto;
    }
    .hsn-hero__stamp {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 16px;
        margin-bottom: 18px;
        font-family: 'Oswald', sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: var(--hsn-blood);
        border: 2px solid var(--hsn-blood);
        background: rgba(209,26,26,0.06);
        position: relative;
        transform: rotate(-1.5deg);
    }
    .hsn-hero__stamp i { font-size: 14px; }
    .hsn-hero__h1 {
        font-family: 'Russo One', 'Oswald', sans-serif;
        font-size: clamp(2.4rem, 7vw, 5.2rem);
        line-height: 0.95;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        margin: 16px 0 18px;
        color: var(--hsn-paper);
        text-shadow:
            3px 3px 0 var(--hsn-blood-dim),
            6px 6px 0 var(--hsn-ink-2);
        font-weight: 400;
    }
    .hsn-hero__sub {
        max-width: 720px;
        margin: 0 auto 8px;
        font-family: 'Oswald', sans-serif;
        font-size: clamp(1rem, 1.5vw, 1.18rem);
        font-weight: 500;
        line-height: 1.55;
        color: var(--hsn-fg);
        letter-spacing: 0.02em;
    }
    .hsn-hero__sub strong { color: var(--hsn-paper); font-weight: 700; }
    .hsn-hero__motto {
        margin-top: 18px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.30em;
        text-transform: uppercase;
        color: var(--hsn-fg-mut);
    }
    .hsn-hero__motto::before, .hsn-hero__motto::after { content: ' ✦ '; color: var(--hsn-blood); }

    .hsn-stars {
        display: flex; justify-content: center; gap: 8px;
        margin: 22px 0 8px;
        color: var(--hsn-paper);
        font-size: 14px;
    }

    /* ============== GENERATOR PANEL ============== */
    .hsn-panel {
        max-width: 760px;
        margin: 28px auto 0;
        padding: 32px 28px 28px;
        background:
            linear-gradient(180deg, rgba(247,213,74,0.04), rgba(247,213,74,0.01));
        border: 2px solid var(--hsn-paper);
        border-radius: 0;
        position: relative;
    }
    .hsn-panel::before, .hsn-panel::after {
        content: '';
        position: absolute;
        width: 14px; height: 14px;
        border: 2px solid var(--hsn-paper);
        background: var(--hsn-ink);
    }
    .hsn-panel::before { top: -8px; left: -8px; }
    .hsn-panel::after  { top: -8px; right: -8px; }
    .hsn-panel__corners-bottom { position: absolute; left: 0; right: 0; bottom: 0; }
    .hsn-panel__corners-bottom::before,
    .hsn-panel__corners-bottom::after {
        content: '';
        position: absolute;
        width: 14px; height: 14px;
        border: 2px solid var(--hsn-paper);
        background: var(--hsn-ink);
        bottom: -8px;
    }
    .hsn-panel__corners-bottom::before { left: -8px; }
    .hsn-panel__corners-bottom::after  { right: -8px; }

    .hsn-panel__label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--hsn-paper-dim);
        text-align: center;
        margin: 0 0 12px;
    }
    .hsn-result {
        display: block;
        text-align: center;
        font-family: 'Russo One', 'Oswald', sans-serif;
        font-size: clamp(1.5rem, 4.4vw, 2.7rem);
        line-height: 1.2;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--hsn-paper);
        min-height: 2.2em;
        padding: 22px 12px;
        background: rgba(0,0,0,0.4);
        border: 1px dashed rgba(247,213,74,0.35);
        margin: 0 0 22px;
        word-break: break-word;
    }
    .hsn-result.is-empty { color: var(--hsn-fg-dim); font-family: 'Oswald', sans-serif; font-size: clamp(0.95rem, 1.6vw, 1.05rem); letter-spacing: 0.10em; }

    .hsn-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .hsn-btn {
        appearance: none;
        cursor: pointer;
        font-family: 'Oswald', sans-serif;
        font-weight: 700;
        font-size: 0.92rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 14px 22px;
        border-radius: 0;
        border: 2px solid var(--hsn-paper);
        background: transparent;
        color: var(--hsn-paper);
        display: inline-flex; align-items: center; gap: 8px;
        transition: background .15s ease, color .15s ease, transform .15s ease;
    }
    .hsn-btn:hover {
        background: var(--hsn-paper);
        color: var(--hsn-ink);
        transform: translateY(-1px);
    }
    .hsn-btn--primary {
        background: var(--hsn-paper);
        color: var(--hsn-ink);
        box-shadow: 4px 4px 0 var(--hsn-blood-dim);
    }
    .hsn-btn--primary:hover {
        background: #fff3a0;
        color: var(--hsn-ink);
        transform: translate(-1px, -1px);
        box-shadow: 5px 5px 0 var(--hsn-blood);
    }
    .hsn-btn--primary:active {
        transform: translate(2px, 2px);
        box-shadow: 1px 1px 0 var(--hsn-blood-dim);
    }
    .hsn-btn.is-success {
        background: #82d96e !important;
        border-color: #82d96e !important;
        color: var(--hsn-ink) !important;
    }

    /* ============== SAMPLES ============== */
    .hsn-samples {
        max-width: 880px;
        margin: 36px auto 0;
        padding: 0 24px;
    }
    .hsn-samples__title {
        text-align: center;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.30em;
        text-transform: uppercase;
        color: var(--hsn-blood);
        margin: 0 0 14px;
    }
    .hsn-samples__grid {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .hsn-samples__chip {
        appearance: none;
        cursor: pointer;
        background: rgba(247,213,74,0.04);
        border: 1px solid rgba(247,213,74,0.30);
        color: var(--hsn-fg);
        font-family: 'Oswald', sans-serif;
        font-weight: 600;
        font-size: 0.92rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 12px 14px;
        text-align: center;
        transition: background .12s ease, border-color .12s ease, color .12s ease;
    }
    .hsn-samples__chip:hover {
        background: rgba(247,213,74,0.10);
        border-color: var(--hsn-paper);
        color: var(--hsn-paper);
    }

    /* ============== SECTIONS ============== */
    .hsn-section {
        max-width: 880px;
        margin: 64px auto 0;
        padding: 0 24px;
    }
    .hsn-section__title {
        font-family: 'Russo One', 'Oswald', sans-serif;
        font-size: clamp(1.4rem, 3vw, 1.9rem);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--hsn-paper);
        margin: 0 0 14px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(247,213,74,0.30);
    }
    .hsn-section__body {
        font-family: 'Oswald', sans-serif;
        font-weight: 500;
        font-size: 1.02rem;
        line-height: 1.7;
        color: var(--hsn-fg);
        letter-spacing: 0.01em;
    }
    .hsn-section__body strong { color: var(--hsn-paper); font-weight: 700; }
    .hsn-section__body em { color: var(--hsn-blood); font-style: normal; font-weight: 600; }

    /* FAQ */
    .hsn-faq { display: grid; gap: 8px; }
    .hsn-faq__item {
        background: rgba(247,213,74,0.03);
        border: 1px solid rgba(247,213,74,0.22);
        border-radius: 0;
        overflow: hidden;
    }
    .hsn-faq__q {
        padding: 14px 18px;
        font-family: 'Oswald', sans-serif;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        cursor: pointer;
        list-style: none;
        color: var(--hsn-paper);
        font-size: 0.95rem;
        display: flex; justify-content: space-between; align-items: center;
    }
    .hsn-faq__q::-webkit-details-marker { display: none; }
    .hsn-faq__q::after {
        content: '+';
        color: var(--hsn-blood);
        font-size: 1.4rem;
        line-height: 1;
        transition: transform .2s ease;
    }
    .hsn-faq__item[open] .hsn-faq__q::after { transform: rotate(45deg); }
    .hsn-faq__a {
        padding: 0 18px 16px;
        color: var(--hsn-fg);
        line-height: 1.7;
        font-size: 0.97rem;
        font-family: 'Oswald', sans-serif;
        font-weight: 500;
    }
    .hsn-faq__a strong { color: var(--hsn-paper); }
    .hsn-faq__a em { color: var(--hsn-blood); font-style: normal; font-weight: 600; }

    /* ============== RELATED PAGES (override brand-styles defaults)
       The dark theme works against this page already, but the default
       cyan accent + plain look feels out-of-palette. Re-skin to paper /
       blood-red for cohesion. */
    body.pk-page--hsn .pk-related {
        max-width: 880px;
        margin: 64px auto 24px;
        padding: 0 24px 24px;
    }
    body.pk-page--hsn .pk-related h2 {
        font-family: 'Russo One', 'Oswald', sans-serif;
        font-size: clamp(1.4rem, 3vw, 1.9rem);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--hsn-paper);
        text-align: left;
        margin: 0 0 14px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(247,213,74,0.30);
    }
    body.pk-page--hsn .pk-related .pk-calc-related a {
        background: rgba(247,213,74,0.04);
        border: 1px solid rgba(247,213,74,0.30);
        border-radius: 0;
        color: var(--hsn-fg);
        font-family: 'Oswald', sans-serif;
        font-weight: 600;
        letter-spacing: 0.02em;
        transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    }
    body.pk-page--hsn .pk-related .pk-calc-related a:hover {
        background: var(--hsn-paper);
        color: var(--hsn-ink);
        border-color: var(--hsn-paper);
        transform: translateY(-1px);
    }
    body.pk-page--hsn .pk-related .pk-calc-related a i {
        color: var(--hsn-blood);
    }
    body.pk-page--hsn .pk-related .pk-calc-related a:hover i {
        color: var(--hsn-blood-dim);
    }

    @media (max-width: 640px) {
        .hsn-hero { padding: 36px 18px 18px; }
        .hsn-panel { padding: 26px 18px 22px; }
        .hsn-section { margin-top: 48px; }
    }

    @media (prefers-reduced-motion: reduce) {
        body.pk-page--hsn::after { display: none; }
    }