/* Northbridge Modders — shared site stylesheet */

:root {
    --font-site: "Lato", Arial, Helvetica, sans-serif;
    --font-system: Arial, Helvetica, sans-serif;

    --brand: #4f7942;
    --brand-dark: #416535;
    --brand-tint: #eef4ec;

    --background: #ffffff;
    --surface-muted: #f7f8f6;
    --text-heading: #303030;
    --text-body: #5f5f5f;
    --text-muted: #8b8b8b;
    --text-label: #9b9b9b;

    --border: #dfdfdf;
    --border-control: #cecece;

    --sidebar-width: 338px;
    --content-padding-top: 68px;
    --content-padding-right: 72px;
    --content-padding-bottom: 72px;
    --content-padding-left: 64px;

    --button-radius: 2px;
    --field-radius: 2px;
    --transition: 0.2s ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--background);
    color: var(--text-body);
    font-family: var(--font-site);
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* Shared Northbridge controls */

.portal-button,
.mod-download-button,
.continue-reading,
.back-to-updates,
.login-card button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 12px 25px;
    border: 1px solid var(--brand);
    border-radius: var(--button-radius);
    background: var(--background);
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.portal-button:hover,
.mod-download-button:hover,
.continue-reading:hover,
.back-to-updates:hover,
.login-card button:hover {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.portal-button:focus-visible,
.mod-download-button:focus-visible,
.continue-reading:focus-visible,
.back-to-updates:focus-visible,
.login-card button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.portal-button--filled,
.login-card button {
    background: var(--brand);
    color: #ffffff;
}

.portal-button--filled:hover,
.login-card button:hover {
    border-color: var(--brand-dark);
    background: var(--brand-dark);
}

.site-input,
.site-select,
.login-card input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid var(--border-control);
    border-radius: var(--field-radius);
    background: var(--background);
    color: var(--text-heading);
    font-size: 15px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.site-input:focus,
.site-select:focus,
.login-card input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(79, 121, 66, 0.14);
}

/* Account login page */

.page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--surface-muted);
}

.login-card {
    width: 100%;
    max-width: 380px;
    padding: 42px 34px 36px;
    border: 1px solid var(--border);
    background: var(--background);
}

.lock-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 27px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-icon svg {
    width: 32px;
    height: 32px;
}

.login-card h1 {
    margin: 0 0 29px;
    color: var(--text-heading);
    text-align: center;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
}

.field {
    margin-bottom: 18px;
}

.field:nth-of-type(2) {
    margin-bottom: 28px;
}

.login-card label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.login-card button {
    width: 100%;
}

/* Shared Northbridge portal structure
   Existing pages may retain .downloads-portal and .downloads-content.
   New pages may use .portal-page and .portal-content. */

.downloads-portal,
.portal-page {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: var(--background);
    color: var(--text-heading);
    font-family: var(--font-site);
}

.portal-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    min-height: 100vh;
    flex-shrink: 0;
    padding: 68px 46px;
    background: var(--brand);
    color: #ffffff;
}

.sidebar-content {
    position: sticky;
    top: 68px;
}

.portal-brand {
    margin: 0;
    color: #ffffff;
    text-align: left;
    font-size: 35px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.portal-brand-subtitle {
    margin: 7px 0 33px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.portal-description {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 14px;
    line-height: 1.85;
}

.sidebar-divider {
    width: 100%;
    height: 1px;
    margin: 35px 0;
    background: rgba(255, 255, 255, 0.25);
}

.portal-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 19px;
}

.portal-nav a {
    display: block;
    width: 100%;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--transition);
}

.portal-nav a:hover,
.portal-nav a.active,
.portal-nav a[aria-current="page"] {
    color: #ffffff;
}

.sidebar-footer {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    line-height: 1.9;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.portal-content,
.downloads-content,
.about-content,
.updates-content,
.support-content,
.home-content {
    flex: 1;
    width: auto;
    max-width: none;
    padding:
        var(--content-padding-top)
        var(--content-padding-right)
        var(--content-padding-bottom)
        var(--content-padding-left);
}

/* Shared portal headers */

.portal-header,
.downloads-header,
.about-header,
.updates-header,
.support-header,
.home-header {
    width: 100%;
    padding-bottom: 42px;
    border-bottom: 1px solid var(--border);
}

.portal-label,
.downloads-label,
.updates-label,
.support-label,
.home-label {
    margin: 0 0 18px;
    color: var(--text-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.portal-header h2,
.downloads-header h2,
.about-header h2,
.updates-header h2,
.support-header h2,
.home-header h2 {
    margin: 0 0 16px;
    color: var(--text-heading);
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
}

.about-header h2 {
    margin-bottom: 0;
}

.portal-intro,
.downloads-intro,
.updates-intro,
.support-intro,
.home-intro {
    max-width: 720px;
    margin: 0;
    color: #777777;
    font-size: 16px;
    line-height: 1.65;
}

/* Downloads page */

.mod-list {
    width: 100%;
}

.mod-entry {
    width: 100%;
    padding: 42px 0 46px;
    border-bottom: 1px solid var(--border);
}

.mod-category {
    margin: 0 0 14px;
    color: var(--text-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.mod-entry h3 {
    margin: 0 0 16px;
    color: var(--text-heading);
    font-size: 31px;
    line-height: 1.2;
    font-weight: 700;
}

.mod-description {
    max-width: 720px;
    margin: 0 0 27px;
    color: #666666;
    font-size: 15px;
    line-height: 1.7;
}

.mod-features,
.idle-features {
    max-width: 700px;
    margin: -8px 0 25px;
    padding-left: 21px;
    color: #666666;
    font-size: 15px;
    line-height: 1.72;
}

.mod-features li,
.idle-features li {
    margin-bottom: 3px;
}

.mod-features li::marker,
.idle-features li::marker {
    color: var(--text-label);
}

.mod-features code {
    padding: 2px 5px;
    border-radius: 3px;
    background: #f2f2f2;
    color: #555555;
    font-family: "Courier New", monospace;
    font-size: 13px;
}

.mod-warning {
    max-width: 700px;
    margin: -7px 0 25px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.65;
    font-style: italic;
}

.mod-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.download-count {
    padding: 9px 14px;
    border: 1px solid #e2e2e2;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.idle-tagline {
    margin: 0 0 28px;
    color: #666666;
    font-size: 15px;
    line-height: 1.65;
}

.idle-actions {
    align-items: flex-start;
}

.idle-download-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.download-history {
    margin: 13px 0 0;
    color: var(--text-label);
    font-size: 12px;
    line-height: 1.7;
}

/* About page
   Uses .downloads-content for identical portal alignment and spacing. */

.about-copy {
    max-width: 720px;
    padding: 42px 0 12px;
}

.about-copy p {
    margin: 0;
    color: #555555;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
}

.about-copy p + p {
    margin-top: 34px;
}

.modders-section {
    width: 100%;
    max-width: 720px;
    margin-top: 38px;
    padding-top: 42px;
    border-top: 1px solid var(--border);
}

.modders-header {
    margin-bottom: 29px;
}

.modders-header .downloads-label {
    margin-bottom: 14px;
}

.modders-header h3 {
    margin: 0;
    color: var(--text-heading);
    font-size: 31px;
    line-height: 1.2;
    font-weight: 700;
}

.modder-profiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.modder-profile {
    overflow: hidden;
    border: 1px solid var(--border);
    background: #ffffff;
}

.modder-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    background: var(--surface-muted);
}

.modder-details {
    padding: 20px 21px 22px;
}

.modder-role {
    margin: 0 0 11px;
    color: var(--text-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.modder-details h4 {
    margin: 0 0 7px;
    color: var(--text-heading);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
}

.modder-name {
    margin: 0;
    color: #777777;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 760px) {
    .about-copy {
        padding-top: 34px;
    }

    .about-copy p {
        line-height: 1.72;
    }

    .about-copy p + p {
        margin-top: 28px;
    }

    .modders-section {
        margin-top: 30px;
        padding-top: 35px;
    }

    .modders-header h3 {
        font-size: 26px;
    }

    .modder-profiles {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}


/* Updates / blog page */

.updates-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 31px 0 30px;
    border-bottom: 1px solid var(--border);
}

.updates-sort-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.filter-group {
    min-width: 196px;
}

.filter-group label {
    display: block;
    margin: 0 0 8px;
    color: var(--text-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.date-filter {
    appearance: none;
    padding-right: 38px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 18px,
        calc(100% - 13px) 18px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.updates-list {
    width: 100%;
}

.update-entry {
    width: 100%;
    padding: 40px 0 44px;
    border-bottom: 1px solid var(--border);
}

.update-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    color: var(--text-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.update-meta .meta-divider {
    width: 1px;
    height: 12px;
    background: #d0d0d0;
}

.update-entry h3 {
    margin: 0 0 16px;
    color: var(--text-heading);
    font-size: 31px;
    line-height: 1.2;
    font-weight: 700;
}

.update-excerpt {
    max-width: 720px;
    margin: 0 0 28px;
    color: #666666;
    font-size: 15px;
    line-height: 1.72;
}

.update-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Home page
   Uses .downloads-content for identical portal alignment and spacing. */

.home-hero {
    width: 100%;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border);
}

.home-hero h2 {
    max-width: 780px;
    margin: 0 0 17px;
    color: var(--text-heading);
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
}

.home-tagline {
    max-width: 790px;
    margin: 0 0 19px;
    color: var(--brand);
    font-size: 21px;
    line-height: 1.5;
    font-weight: 400;
}

.home-introduction {
    max-width: 720px;
    margin: 0 0 32px;
    color: #666666;
    font-size: 16px;
    line-height: 1.72;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.home-section {
    width: 100%;
    padding: 42px 0 46px;
    border-bottom: 1px solid var(--border);
}

.home-section-header {
    margin-bottom: 28px;
}

.home-section-label {
    margin: 0 0 12px;
    color: var(--text-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.home-section h3 {
    margin: 0;
    color: var(--text-heading);
    font-size: 31px;
    line-height: 1.2;
    font-weight: 700;
}

.featured-mods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.featured-mod {
    display: flex;
    flex-direction: column;
    min-height: 278px;
    padding: 25px 23px 23px;
    border: 1px solid var(--border);
    background: #ffffff;
}

.featured-category {
    margin: 0 0 12px;
    color: var(--text-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.featured-mod h4 {
    margin: 0 0 13px;
    color: var(--text-heading);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
}

.featured-description {
    flex: 1;
    margin: 0 0 20px;
    color: #666666;
    font-size: 14px;
    line-height: 1.7;
}

.featured-downloads {
    margin: 0 0 19px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.featured-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

.featured-arrow {
    display: block;
    width: 15px;
    height: 15px;
    margin-left: 8px;
    flex: 0 0 auto;
}

.featured-arrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.featured-link:hover {
    color: var(--brand-dark);
}

.about-preview {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 42px;
}

.about-preview-text {
    max-width: 700px;
}

.about-preview-text p:not(.home-section-label) {
    margin: 18px 0 0;
    color: #666666;
    font-size: 16px;
    line-height: 1.72;
}

.read-more-button {
    flex-shrink: 0;
}

.archive-notice {
    padding: 41px 0 0;
}

.archive-notice-inner {
    max-width: 790px;
    padding: 26px 28px 28px;
    border-left: 3px solid var(--brand);
    background: var(--surface-muted);
}

.archive-notice h3 {
    margin: 0 0 13px;
    color: var(--text-heading);
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
}

.archive-notice p:not(.home-section-label) {
    margin: 0;
    color: #666666;
    font-size: 15px;
    line-height: 1.72;
}

.archive-notice a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}

.archive-notice a:hover {
    text-decoration: underline;
}

@media (max-width: 1080px) {
    .featured-mods {
        grid-template-columns: 1fr;
    }

    .featured-mod {
        min-height: 0;
    }

    .about-preview {
        display: block;
    }

    .read-more-button {
        margin-top: 27px;
    }
}

@media (max-width: 760px) {
    .home-hero {
        padding-bottom: 39px;
    }

    .home-hero h2 {
        font-size: 33px;
    }

    .home-tagline {
        font-size: 19px;
    }

    .home-section {
        padding: 36px 0 40px;
    }

    .home-section h3 {
        font-size: 26px;
    }

    .featured-mod {
        padding: 22px 20px;
    }

    .archive-notice {
        padding-top: 34px;
    }

    .archive-notice-inner {
        padding: 23px 21px 24px;
    }
}


/* Support page
   Uses .downloads-content for identical portal alignment and spacing. */

.support-contact {
    display: grid;
    grid-template-columns: minmax(350px, 1fr) minmax(270px, 340px);
    gap: 46px;
    padding: 42px 0 46px;
    border-bottom: 1px solid var(--border);
}

.support-section-label {
    margin: 0 0 13px;
    color: var(--text-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.support-contact-copy h3,
.support-section-header h3,
.support-links-copy h3 {
    margin: 0 0 17px;
    color: var(--text-heading);
    font-size: 31px;
    line-height: 1.2;
    font-weight: 700;
}

.support-contact-copy > p:not(.support-section-label) {
    max-width: 650px;
    margin: 0 0 30px;
    color: #666666;
    font-size: 15px;
    line-height: 1.72;
}

.support-address {
    align-self: start;
    padding: 26px 25px 27px;
    border: 1px solid var(--border);
    background: var(--surface-muted);
}

.support-address-label {
    margin: 0 0 12px;
    color: var(--text-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.support-email {
    margin: 0 0 15px;
    color: var(--text-heading);
    font-size: 18px;
    line-height: 1.45;
    font-weight: 700;
    word-break: break-word;
}

.support-response {
    margin: 0;
    color: #777777;
    font-size: 14px;
    line-height: 1.65;
}

.support-guides {
    padding: 42px 0 46px;
    border-bottom: 1px solid var(--border);
}

.support-section-header {
    margin-bottom: 29px;
}

.support-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.support-card {
    min-height: 232px;
    padding: 23px 22px 25px;
    border: 1px solid var(--border);
    background: #ffffff;
}

.support-card-number {
    margin: 0 0 18px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.19em;
}

.support-card h4 {
    margin: 0 0 13px;
    color: var(--text-heading);
    font-size: 21px;
    line-height: 1.28;
    font-weight: 700;
}

.support-card p:not(.support-card-number) {
    margin: 0;
    color: #666666;
    font-size: 14px;
    line-height: 1.7;
}

.support-links {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 42px;
    padding: 42px 0 46px;
    border-bottom: 1px solid var(--border);
}

.support-links-copy {
    max-width: 700px;
}

.support-links-copy p:not(.support-section-label) {
    margin: 0;
    color: #666666;
    font-size: 15px;
    line-height: 1.72;
}

.support-links .portal-button {
    flex-shrink: 0;
}

.support-warning {
    padding: 41px 0 0;
}

.support-warning-inner {
    max-width: 790px;
    padding: 26px 28px 28px;
    border-left: 3px solid var(--brand);
    background: var(--surface-muted);
}

.support-warning-inner h3 {
    margin: 0 0 13px;
    color: var(--text-heading);
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
}

.support-warning-inner p:not(.support-section-label) {
    margin: 0;
    color: #666666;
    font-size: 15px;
    line-height: 1.72;
}

@media (max-width: 1080px) {
    .support-contact {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .support-address {
        max-width: 520px;
    }

    .support-cards {
        grid-template-columns: 1fr;
    }

    .support-card {
        min-height: 0;
    }

    .support-links {
        display: block;
    }

    .support-links .portal-button {
        margin-top: 27px;
    }
}

@media (max-width: 760px) {
    .support-contact,
    .support-guides,
    .support-links {
        padding: 35px 0 39px;
    }

    .support-contact-copy h3,
    .support-section-header h3,
    .support-links-copy h3 {
        font-size: 26px;
    }

    .support-address {
        padding: 23px 21px 24px;
    }

    .support-cards {
        gap: 18px;
    }

    .support-card {
        padding: 21px 20px 23px;
    }

    .support-warning {
        padding-top: 34px;
    }

    .support-warning-inner {
        padding: 23px 21px 24px;
    }
}


/* Browser-style 404 page
   This page intentionally imitates a browser error rather than the site brand. */

.browser-error-page {
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    color: #202124;
    font-family: var(--font-system);
}

.browser-error-container {
    width: min(800px, calc(100% - 96px));
    margin: 0 auto;
    padding-top: 62px;
}

.broken-file-icon {
    width: 48px;
    height: 58px;
    margin-bottom: 52px;
    color: #5f6368;
}

.broken-file-icon svg {
    display: block;
    width: 48px;
    height: 48px;
}

.browser-error-container h1 {
    margin: 0 0 23px;
    padding: 0;
    color: #202124;
    text-align: left;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 400;
}

.browser-error-description {
    max-width: 760px;
    margin: 0 0 28px;
    color: #5f6368;
    font-size: 15px;
    line-height: 1.65;
}

.browser-error-description strong {
    color: #3c4043;
    font-weight: 600;
    word-break: break-all;
}

.browser-error-code {
    margin: 0 0 66px;
    color: #5f6368;
    font-size: 14px;
    line-height: 1.5;
}

.browser-reload-button {
    width: auto;
    min-width: 92px;
    padding: 11px 21px;
    border: none;
    border-radius: 4px;
    background: #1a73e8;
    color: #ffffff;
    font-family: var(--font-system);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.browser-reload-button:hover {
    background: #1765cc;
}

.browser-reload-button:active {
    background: #1558b0;
}

/* Responsive layout */

@media (max-width: 760px) {
    :root {
        --content-padding-top: 40px;
        --content-padding-right: 28px;
        --content-padding-bottom: 54px;
        --content-padding-left: 28px;
    }

    .downloads-portal,
    .portal-page {
        display: block;
    }

    .portal-sidebar {
        width: 100%;
        min-width: 0;
        min-height: auto;
        padding: 38px 28px;
    }

    .sidebar-content {
        position: static;
    }

    .portal-brand {
        font-size: 32px;
    }

    .portal-nav {
        gap: 14px;
    }

    .portal-header h2,
    .downloads-header h2,
    .about-header h2,
    .updates-header h2,
    .support-header h2,
    .home-header h2 {
        font-size: 33px;
    }

    .mod-entry h3,
    .update-entry h3 {
        font-size: 26px;
    }

    .mod-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .updates-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-group {
        width: 100%;
    }

    .update-meta {
        flex-wrap: wrap;
    }

    .login-card {
        padding: 35px 25px 31px;
    }
}

@media (max-width: 650px) {
    .browser-error-container {
        width: calc(100% - 48px);
        padding-top: 42px;
    }

    .broken-file-icon {
        margin-bottom: 38px;
    }

    .browser-error-container h1 {
        font-size: 23px;
    }

    .browser-error-code {
        margin-bottom: 46px;
    }
}


/* Updates page
   The filters occupy the otherwise empty upper-right space alongside the first
   preview on large screens, then return to the normal flow on smaller screens. */

.updates-archive {
    position: relative;
    width: 100%;
}

.updates-controls {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 2;
    padding: 0;
    background: #ffffff;
}

.updates-controls-fields {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 18px;
}

.updates-control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    min-width: 210px;
}

.updates-control:last-child {
    min-width: 230px;
}

.updates-control label {
    margin: 0;
    color: var(--text-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.updates-control select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 38px 10px 14px;
    border: 1px solid var(--border-control);
    border-radius: var(--field-radius);
    background: #ffffff;
    color: var(--text-heading);
    font-family: var(--font-site);
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.updates-control select:hover {
    border-color: #b8b8b8;
}

.updates-control select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(79, 121, 66, 0.14);
}

.updates-list {
    width: 100%;
}

.update-preview {
    width: 100%;
    padding: 42px 0 46px;
    border-bottom: 1px solid var(--border);
}

/* Leave the first preview's right side free for the archive controls. */
.update-preview:first-child {
    min-height: 316px;
    padding-right: 505px;
}

.update-preview h3 {
    max-width: 900px;
    margin: 0 0 16px;
    color: var(--text-heading);
    font-size: 31px;
    line-height: 1.2;
    font-weight: 700;
}

.update-preview:first-child h3,
.update-preview:first-child .update-excerpt {
    max-width: 770px;
}

.update-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    color: var(--text-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.update-meta span {
    margin: 0;
    color: #c7c7c7;
}

.update-excerpt {
    max-width: 720px;
    margin: 0 0 28px;
    color: #666666;
    font-size: 15px;
    line-height: 1.72;
}

.continue-arrow {
    display: block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    flex: 0 0 auto;
}

.continue-arrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.no-results {
    margin: 42px 0 0;
    color: #777777;
    font-size: 15px;
    line-height: 1.7;
}

.post-reader {
    display: none;
}

.post-reader.visible {
    display: block;
}

.back-to-updates {
    margin-bottom: 42px;
}

.full-post {
    max-width: 790px;
}

.full-post h2 {
    margin: 0 0 34px;
    color: var(--text-heading);
    font-size: 36px;
    line-height: 1.22;
    font-weight: 700;
}

.post-body {
    max-width: 720px;
}

.post-body p {
    margin: 0;
    color: #555555;
    font-size: 16px;
    line-height: 1.82;
}

/* Real paragraph spacing for full update posts. */
.post-body p + p {
    margin-top: 30px;
}

.post-body .concealed-text {
    margin-top: 55px;
    color: #ffffff;
    user-select: text;
}

@media (max-width: 1430px) {
    .updates-controls {
        position: static;
        margin-top: 28px;
        padding-bottom: 6px;
    }

    .updates-controls-fields {
        justify-content: flex-end;
    }

    .update-preview:first-child {
        min-height: 0;
        padding-right: 0;
    }
}

@media (max-width: 760px) {
    .updates-controls {
        margin-top: 24px;
        padding-bottom: 4px;
    }

    .updates-controls-fields {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .updates-control,
    .updates-control:last-child {
        width: 100%;
        min-width: 0;
    }

    .update-preview {
        padding: 34px 0 38px;
    }

    .update-preview h3 {
        font-size: 26px;
    }

    .full-post h2 {
        font-size: 30px;
    }

    .post-body p {
        line-height: 1.72;
    }

    .post-body p + p {
        margin-top: 26px;
    }
}


/* Compatibility selectors for the existing standalone 404 markup.
   These do not affect branded portal pages. */

.error-page .file-icon {
    display: block;
    width: 56px;
    height: auto;
    margin: 0 0 73px;
}

@media (max-width: 960px) {
    .error-page .file-icon {
        width: 46px;
        margin-bottom: 52px;
    }
}