/* ========================================================================== */
/* MOBILE CANONICAL LAYER                                                     */
/* Desktop style.css remains locked. This file controls mobile presentation.  */
/* Philosophy: desktop compressed, with selective mobile reading refinements.  */
/* ========================================================================== */

@media screen and (max-width: 760px) {
    :root {
        --mobile-page-width: calc(100vw - 30px);
        --mobile-panel-padding: 18px;
        --mobile-section-gap: 20px;
        --mobile-button-height: 32px;
        --mobile-border: 1px solid var(--line);
    }

    html,
    body {
        overflow-x: hidden;
    }

    .top-bar {
        min-height: 22px;
        padding: 4px 10px;
        font-size: 10px;
        line-height: 1.2;
        letter-spacing: 0.16em;
    }

    /* ====================================================================== */
    /* MOBILE HEADER                                                          */
    /* Locked mobile arrangement: [Logo] [Hamburger] [Account Star]            */
    /* Logo is treated as a brand lockup, not a generic responsive image.      */
    /* ====================================================================== */

    .mockup-header {
        width: var(--mobile-page-width);
        height: auto;
        min-height: 70px;
        max-height: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 36px 36px;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 8px;
        row-gap: 6px;
        padding: 10px 0 8px;
        overflow: visible;
        position: relative;
    }

    .mockup-brand,
    .mockup-header .mockup-brand {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 54px;
        overflow: visible !important;
        align-self: center;
        justify-self: start;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .header-horizontal-logo,
    .mockup-header .header-horizontal-logo {
        display: block !important;
        width: clamp(300px, 74vw, 360px) !important;
        min-width: 300px !important;
        max-width: clamp(300px, 74vw, 360px) !important;
        height: auto !important;
        max-height: 58px !important;
        object-fit: contain !important;
        object-position: left center !important;
        transform: none !important;
        transform-origin: left center !important;
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.22));
    }

    .mobile-menu-toggle {
        grid-column: 2;
        grid-row: 1;
        width: 36px;
        height: 36px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        justify-self: end;
        align-self: center;
        flex-shrink: 0;
        border: 1px solid rgba(212, 175, 55, 0.62);
        background: rgba(0, 0, 0, 0.54);
        color: var(--gold);
        cursor: pointer;
        padding: 0;
        position: relative;
        z-index: 4;
    }

    .mobile-menu-toggle span,
    .mobile-menu-toggle::before,
    .mobile-menu-toggle::after {
        content: "";
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
        position: absolute;
    }

    .mobile-menu-toggle::before {
        transform: translateY(-6px);
    }

    .mobile-menu-toggle::after {
        transform: translateY(6px);
    }

    .header-seal-button {
        grid-column: 3;
        grid-row: 1;
        width: 36px;
        height: 36px;
        justify-self: end;
        align-self: center;
        flex-shrink: 0;
        z-index: 4;
    }

    .header-seal-button img {
        width: 30px;
        height: 30px;
    }

    .mockup-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        display: none;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 6px 0 0;
        border-top: 1px solid var(--line-soft);
        white-space: normal;
        overflow: visible;
    }

    .mockup-header.mobile-menu-open .mockup-nav,
    body.mobile-menu-open .mockup-nav {
        display: grid;
    }

    .mockup-nav a,
    .nav-user {
        display: block;
        width: 100%;
        padding: 8px 4px;
        border-bottom: 1px solid var(--line-soft);
        font-size: 10px;
        line-height: 1.05;
        letter-spacing: 0.1em;
    }

    /* ====================================================================== */
    /* UNIVERSAL MOBILE BUTTON SCALE                                          */
    /* ====================================================================== */

    .button,
    .hero-buttons .button,
    .featured-copy .button,
    .support-row-mockup .button,
    .membership-row-actions .button {
        min-height: var(--mobile-button-height);
        height: auto;
        padding: 7px 12px;
        font-size: 10px;
        line-height: 1.05;
        letter-spacing: 0.09em;
    }

    /* ====================================================================== */
    /* MOBILE HERO                                                            */
    /* ====================================================================== */

    .mockup-hero {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 17px;
        padding: 24px 15px 22px;
        background-position: center top;
    }

    .mockup-hero .hero-left,
    .mockup-hero .hero-right,
    .hero-center {
        width: var(--mobile-page-width);
        max-width: var(--mobile-page-width);
    }

    .hero-left h2 {
        font-size: clamp(29px, 8.2vw, 40px);
        line-height: 1.02;
        margin-bottom: 16px;
    }

    .hero-left p {
        max-width: 100%;
        font-size: 17px;
        line-height: 1.52;
        margin-bottom: 16px;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .hero-buttons .button {
        width: 100%;
    }

    .hero-video-stack,
    .hero-video-card,
    .video-mockup-card {
        width: var(--mobile-page-width);
        max-width: var(--mobile-page-width);
    }

    .hero-address-actions {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .hero-address-link {
        min-height: 32px;
        justify-content: center;
        padding: 7px 6px;
        font-size: 8px;
        letter-spacing: 0.05em;
    }

    .hero-address-link img,
    .hero-address-link svg {
        width: 12px;
        height: 12px;
    }

    /* ====================================================================== */
    /* PRINCIPLE ROWS                                                         */
    /* ====================================================================== */

    .mockup-hero .hero-right {
        gap: 0;
    }

    .mockup-hero .mockup-principle {
        grid-template-columns: 46px minmax(0, 1fr);
        column-gap: 12px;
        padding: 11px 0;
    }

    .mockup-hero .principle-icon {
        width: 38px;
        height: 38px;
    }

    .mockup-principle h3 {
        font-size: 18px;
        line-height: 1.05;
        margin-bottom: 3px;
    }

    .mockup-principle p {
        font-size: 13px;
        line-height: 1.32;
    }

    /* ====================================================================== */
    /* JOURNAL + EVENTS                                                       */
    /* ====================================================================== */

    .journal-events-section {
        width: var(--mobile-page-width);
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px 0 20px;
    }

    .journal-main {
        display: block;
    }

    .journal-main h2 {
        font-size: clamp(20px, 5.7vw, 26px);
        line-height: 1.03;
        margin-bottom: 13px;
        letter-spacing: 0.06em;
    }

    .featured-article-card {
        display: grid;
        grid-template-rows: auto auto;
        width: 100%;
    }

    .featured-image {
        min-height: 188px;
        background-size: cover;
        background-position: center center;
    }

    .featured-copy {
        margin-top: -42px;
        padding: 44px 16px 15px;
        gap: 9px;
        background: linear-gradient(to bottom, rgba(5, 5, 5, 0.58), rgba(5, 5, 5, 0.98) 40%);
        position: relative;
        z-index: 2;
    }

    .featured-copy h3 {
        font-size: 20px;
        line-height: 1.08;
    }

    .featured-copy p {
        font-size: 13px;
        line-height: 1.38;
    }

    .featured-copy .button {
        width: auto;
        min-width: 154px;
        justify-self: start;
    }

    .article-list-panel {
        display: block;
    }

    .article-list-panel article {
        min-height: 0;
        padding: 14px 28px 14px 0;
    }

    .article-list-panel h3 {
        font-size: 18px;
        line-height: 1.1;
    }

    .article-list-panel span {
        font-size: 13px;
        line-height: 1.3;
    }

    .article-list-panel small,
    .article-list-panel time,
    .article-list-panel .article-date {
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    .events-panel-mockup {
        display: block;
        padding: 17px 14px;
    }

    .events-panel-mockup h2 {
        font-size: clamp(22px, 6vw, 28px);
        line-height: 1.05;
        margin-bottom: 16px;
        letter-spacing: 0.05em;
    }

    .event-card-mockup {
        grid-template-columns: 66px minmax(0, 1fr);
        column-gap: 14px;
        padding: 13px 0;
    }

    .event-date-box {
        width: 50px;
        min-height: 46px;
        padding: 6px 4px;
    }

    .event-date-box span {
        font-size: 12px;
        letter-spacing: 0.08em;
    }

    .event-date-box strong {
        font-size: 26px;
        line-height: 1;
    }

    .event-card-mockup h3 {
        font-size: 17px;
        line-height: 1.12;
        margin-bottom: 5px;
    }

    .event-card-mockup p {
        font-size: 13px;
        line-height: 1.25;
        margin-bottom: 5px;
    }

    .events-panel-mockup .view-all,
    .events-panel-mockup a:last-child {
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    /* ====================================================================== */
    /* FEATURE GRID                                                           */
    /* ====================================================================== */

    .homepage-feature-links {
        width: var(--mobile-page-width);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    .homepage-feature-links a {
        min-height: 104px;
        padding: 13px 10px;
        border-right: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
    }

    .homepage-feature-links a:nth-child(2n) {
        border-right: 0;
    }

    .homepage-feature-links img {
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
    }

    .homepage-feature-links strong {
        font-size: 12px;
        line-height: 1.1;
    }

    .homepage-feature-links em,
    .homepage-feature-links small {
        font-size: 11px;
        line-height: 1.25;
    }

    /* ====================================================================== */
    /* SUPPORT / MAIL / CRYPTO                                                */
    /* ====================================================================== */

    .support-row-mockup {
        width: var(--mobile-page-width);
        grid-template-columns: 1fr;
        margin-top: 18px;
    }

    .support-party-box,
    .support-method-box {
        padding: 28px 22px;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .support-party-box {
        grid-template-columns: 96px minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        gap: 18px;
    }

    .support-seal-image {
        width: 92px;
        height: 92px;
        justify-self: center;
    }

    .support-party-copy {
        max-width: none;
    }

    .support-party-box h2,
    .support-method-box h2 {
        font-size: 25px;
        line-height: 1.08;
    }

    .support-party-box p,
    .support-method-box p {
        font-size: 14px;
        line-height: 1.38;
    }

    .mail-instruction-box {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 12px 14px;
        font-size: 13px;
    }

    .crypto-icons {
        gap: 13px;
        flex-wrap: wrap;
    }

    .crypto-icons img {
        width: 38px;
        height: 38px;
    }

    .support-row-mockup .button {
        width: auto;
        min-width: 180px;
    }

    /* ====================================================================== */
    /* MEMBERSHIP                                                            */
    /* Locked mobile arrangement: [shield] [heading], then text and buttons.   */
    /* ====================================================================== */

    .membership-row-mockup {
        width: var(--mobile-page-width);
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 10px;
        row-gap: 8px;
        padding: 22px 18px;
        align-items: center;
    }

    .membership-shield {
        width: 34px !important;
        height: 34px !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: center !important;
        margin: 0 !important;
        position: static !important;
        transform: none !important;
        z-index: 1;
    }

    .membership-row-copy,
    .membership-row-mockup > div:not(.membership-row-actions) {
        display: contents;
    }

    .membership-row-mockup h2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center;
        margin: 0 !important;
        font-size: 22px;
        line-height: 1.05;
        z-index: 2;
    }

    .membership-row-mockup p {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        font-size: 13px;
        line-height: 1.34;
    }

    .membership-row-actions {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        margin-top: 2px;
    }

    .membership-row-actions .button {
        width: 100%;
    }

    /* ====================================================================== */
    /* FOOTER                                                                 */
    /* ====================================================================== */

    .mockup-footer {
        width: var(--mobile-page-width);
        grid-template-columns: 1fr;
        gap: 0;
        padding: 28px 22px;
    }

    .footer-brand-block {
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 16px;
        padding: 0 0 22px;
    }

    .footer-emblem {
        width: 64px;
        height: 64px;
    }

    .footer-emblem img {
        width: 52px;
        height: 52px;
    }

    .footer-brand-copy h2 {
        font-size: 28px;
        line-height: 0.96;
    }

    .footer-brand-copy p {
        font-size: 18px;
        line-height: 1.25;
    }

    .footer-socials {
        grid-column: 1 / -1;
        justify-content: center;
        gap: 9px;
        flex-wrap: wrap;
        padding-top: 8px;
    }

    .footer-socials img {
        width: 38px;
        height: 38px;
    }

    .footer-link-column {
        padding: 22px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .footer-link-column h3 {
        font-size: 22px;
        line-height: 1.05;
    }

    .footer-link-column p,
    .footer-link-column a {
        font-size: 17px;
        line-height: 1.36;
    }

    .footer-bottom-line {
        width: var(--mobile-page-width);
        flex-direction: column;
        gap: 12px;
        padding: 20px 0;
        text-align: center;
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --mobile-page-width: calc(100vw - 24px);
        --mobile-panel-padding: 16px;
        --mobile-section-gap: 18px;
        --mobile-button-height: 32px;
    }

    .mockup-header {
        width: var(--mobile-page-width);
        min-height: 68px;
        grid-template-columns: minmax(0, 1fr) 34px 34px;
        column-gap: 7px;
    }

    .mockup-brand,
    .mockup-header .mockup-brand {
        height: 52px;
    }

    .header-horizontal-logo,
    .mockup-header .header-horizontal-logo {
        width: clamp(286px, 72vw, 330px) !important;
        min-width: 286px !important;
        max-width: clamp(286px, 72vw, 330px) !important;
        max-height: 56px !important;
        transform: none !important;
        transform-origin: left center !important;
    }

    .mobile-menu-toggle,
    .header-seal-button {
        width: 34px;
        height: 34px;
    }

    .header-seal-button img {
        width: 31px;
        height: 31px;
    }

    .hero-left h2 {
        font-size: clamp(28px, 7.8vw, 36px);
    }

    .hero-left p {
        font-size: 15px;
    }

    .hero-buttons {
        grid-template-columns: 1fr 1fr;
    }

    .hero-buttons .button {
        font-size: 10px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .hero-address-actions {
        grid-template-columns: 1fr;
    }

    .hero-address-link {
        min-height: 34px;
        justify-content: flex-start;
        padding-left: 12px;
        font-size: 9px;
    }

    .mockup-hero .mockup-principle {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 10px;
        padding: 10px 0;
    }

    .mockup-hero .principle-icon {
        width: 34px;
        height: 34px;
    }

    .mockup-principle h3 {
        font-size: 17px;
    }

    .mockup-principle p {
        font-size: 12px;
    }

    .journal-main h2 {
        font-size: clamp(22px, 6.4vw, 28px);
    }

    .featured-image {
        min-height: 178px;
    }

    .featured-copy {
        padding: 46px 16px 16px;
    }

    .featured-copy h3 {
        font-size: 21px;
    }

    .featured-copy p {
        font-size: 12px;
    }

    .article-list-panel h3 {
        font-size: 17px;
    }

    .article-list-panel span {
        font-size: 12px;
    }

    .events-panel-mockup {
        padding: 20px 16px;
    }

    .event-card-mockup {
        grid-template-columns: 58px minmax(0, 1fr);
        column-gap: 12px;
        padding: 12px 0;
    }

    .event-date-box {
        width: 52px;
        min-height: 62px;
    }

    .event-date-box strong {
        font-size: 28px;
    }

    .event-card-mockup h3 {
        font-size: 15px;
    }

    .event-card-mockup p {
        font-size: 12px;
    }

    .homepage-feature-links a {
        min-height: 118px;
        padding: 15px 10px;
    }

    .homepage-feature-links img {
        width: 40px;
        height: 40px;
    }

    .support-party-box {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 14px;
    }

    .support-seal-image {
        width: 72px;
        height: 72px;
    }

    .support-party-box h2,
    .support-method-box h2,
    .membership-row-mockup h2 {
        font-size: 23px;
    }

    .membership-row-mockup {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 8px 10px;
        padding: 22px 16px;
        align-items: center;
    }

    .membership-shield {
        width: 32px !important;
        height: 32px !important;
    }

    .membership-row-actions {
        grid-template-columns: 1fr;
    }

    .footer-brand-block {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .footer-emblem {
        width: 56px;
        height: 56px;
    }

    .footer-emblem img {
        width: 46px;
        height: 46px;
    }

    .footer-brand-copy h2 {
        font-size: 25px;
    }

    .footer-brand-copy p,
    .footer-link-column p,
    .footer-link-column a {
        font-size: 16px;
    }
}