/* =========================================
   CODEX MIRROR PLATFORM
   Emerald • Gold • Silver
   ========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.7;
    color: #f4e7b2;

    background-image: url("images/cmp-wallpaper.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ---------- GENERAL ---------- */

.container {
    width: min(1100px, 90%);
    margin: 0 auto;
}

strong,
.gold {
    color: #d8b65a;
    font-weight: 700;
}

/* ---------- HEADER ---------- */

.site-header {
    background: #042c21;
    border: none;
    border-bottom: 2px solid #d8b65a;
    padding: 22px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.site-title {
    color: #d8b65a;
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.site-nav a {
    color: #e5e8e6;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
}

.site-nav a:hover {
    color: #d8b65a;
}

.site-nav button {
    appearance: none;
    -webkit-appearance: none;

    padding: 9px 14px;

    color: #d8b65a;
    background: #042c21;

    border: 1px solid #d8b65a;
    border-radius: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;
    box-shadow: none;
}

.site-nav button:hover {
    color: #f4e7b2;
    background: #0a5941;
    border-color: #d8b65a;
}

/* ---------- HERO ---------- */

.hero {
    padding: 130px 0;
    text-align: center;
    background: transparent;
    border-bottom: 1px solid #aeb4b0;
}

.eyebrow {
    margin-bottom: 18px;
    color: #d8b65a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0;
    color: #e0bd60;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    line-height: 1.05;
    font-weight: 700;
}

.hero blockquote {
    max-width: 760px;
    margin: 40px auto;
    padding: 25px 30px;
    color: #f4e7b2;
    font-size: clamp(1.35rem, 3vw, 2.1rem);
    font-style: italic;
    border-top: 1px solid #aeb4b0;
    border-bottom: 1px solid #aeb4b0;
}

.hero-introduction {
    max-width: 680px;
    margin: 0 auto;
    color: #e5e8e6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
}

/* ---------- CONTENT SECTIONS ---------- */

.content-section {
    padding: 95px 0;
    border-bottom: none;
}

.content-section:nth-child(even) {
    background: rgba(3, 48, 35, 0.35);
}

.content-section h2 {
    margin-top: 0;
    color: #d8b65a;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.2;
    font-weight: 700;
}

.content-section p {
    max-width: 720px;
    color: #e5e8e6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
}

/* ---------- BUTTONS ---------- */

.button {
    display: inline-block;
    margin-top: 22px;
    padding: 13px 25px;
    color: #063b2b;
    background: #d8b65a;
    border: 1px solid #aeb4b0;
    border-radius: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.03em;
}

.button:hover {
    color: #fff;
    background: #0a5941;
}

/* ---------- FOOTER ---------- */

.site-footer {
    padding: 15px 0;
    background: #034d38;
    border-top: 2px solid #aeb4b0;
    text-align: center;
}

.site-footer p {
    margin: 0;
    color: #d8b65a;
}

.site-footer p {
    color: #aeb4b0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    margin: 0;
}

.site-wallpaper {
    position: fixed;
    inset: 0;
    z-index: -1;
}

/* ---------- MOBILE ---------- */

@media (max-width: 800px) {

    .site-header .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-nav {
        gap: 12px;
    }

    .hero {
        padding: 85px 0;
    }

    .content-section {
        padding: 65px 0;
    }
}

/* ---------- SITE BANNER ---------- */

.site-banner {
    width: 100%;
    border: none;
    background: #042c21;
}

.site-banner img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
/* ---------- PORTRAIT ---------- */

.portrait-section {
    padding: 50px 20px;
    text-align: center;
    background: transparent;
    border-bottom: none;
}

.portrait-section img {
    display: block;

    width: min(440px, 90vw);
    height: auto;

    margin: 0 auto;

    border: 3px solid #d8b65a;
    outline: 1px solid #aeb4b0;
    outline-offset: 6px;
}

/* ---------- MIRROR INTRODUCTION ---------- */

.mirror-introduction {
    max-width: 760px;
    margin: 55px auto 0;
    text-align: center;
}

.mirror-introduction h2 {
    margin-bottom: 35px;
    color: #d8b65a;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
}

.mirror-introduction p {
    margin: 0 auto 25px;
    color: #f4e7b2;
    font-size: 1.15rem;
}

.mirror-introduction strong {
    color: #d8b65a;
    font-weight: 700;
}

.breath-prompt-label {
    margin-top: 40px !important;
    color: #aeb4b0 !important;
}

/* ---------- POETIC LINEATION ---------- */

.poem {
    width: fit-content;
    max-width: 850px;
    margin: 0 auto;
    text-align: left;
}

.poem p {
    margin: 0 auto 38px;
    color: #f4e7b2;
    font-size: 1.15rem;
    line-height: 1.9;
}

.poem strong {
    color: #d8b65a;
    font-weight: 700;
}

.poem em {
    font-style: italic;
}

.breath-prompt-label {
    margin-top: 50px !important;
    margin-bottom: 22px !important;
    color: #aeb4b0 !important;
}

.breath-prompt-label {
    text-align: center;
}

.poem .button {
    display: block;
    width: fit-content;
    margin: 22px auto 0;
}

/* ---------- MIRROR TITLE ---------- */

.mirror-introduction h2 {
    text-align: center;
}


/* =========================================
   PAGE LAYOUT
========================================= */

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    width: 100%;
    margin: 0;
    padding: 0;
}


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

.site-footer {
    flex-shrink: 0;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 18px 0;
    box-sizing: border-box;

    background: #034d38;
    border-top: 2px solid #aeb4b0;

    text-align: center;
}

.site-footer p {
    margin: 0;
    padding: 0;

    color: #aeb4b0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
}


/* =========================================
   BREATH PROMPT PAGE
========================================= */

.breath-prompt-page {
    width: 100%;
    padding: 0;
    margin: 0;
}

.breath-prompt-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 35px 0 45px;
    text-align: center;
}

.breath-prompt-container h2 {
    margin: 0 0 25px;

    color: #d8b65a;

    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.2;
}

.breath-prompt-container .daily-quote-text {
    width: 100%;
    margin: 0 auto;

    padding: 35px 40px;

    color: #f4e7b2;

    background: rgba(3, 48, 35, 0.72);

    border: 1px solid #aeb4b0;

    box-shadow: none;

    text-align: left;
}

.breath-prompt-container .daily-quote-text strong {
    color: #d8b65a;
}

.breath-prompt-container .daily-quote-text p {
    color: #f4e7b2;
}

.breath-prompt-container .daily-quote-text hr {
    border: 0;
    border-top: 1px solid #aeb4b0;
    margin: 25px 0;
}


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

@media (max-width: 800px) {

    .breath-prompt-page {
        padding: 35px 0 45px;
    }

}

/* =========================================
   BREATH PROMPT BUTTON
========================================= */

.breath-prompt-button {
    display: inline-block;

    padding: 13px 25px;

    color: #d8b65a;

    background: #042c21;

    border: 1px solid #aeb4b0;
    border-radius: 3px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;
    letter-spacing: 0.03em;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.breath-prompt-button:hover {
    color: #f4e7b2;
    background: #0a5941;
    border-color: #d8b65a;
}

/* =========================================
   FINAL SITE FOOTER
========================================= */

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    width: 100%;
    margin: 0;
    padding: 0;
}

.site-footer {
    flex: 0 0 60px;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 18px 0;

    background: #034d38;
    border-top: 2px solid #aeb4b0;

    text-align: center;
}

.site-footer p {
    margin: 0;
    padding: 0;

    color: #aeb4b0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
}

/* =========================================
   FINAL BREATH PROMPT + FOOTER FIX
========================================= */

#breath-prompt {
    display: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

#breath-prompt .breath-prompt-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 45px 0 35px;
    text-align: center;
}

#breath-prompt .breath-prompt-label {
    margin: 0 0 15px !important;
}

#breath-prompt h2 {
    margin: 0 0 30px;
}

#breath-prompt .breath-prompt-sequence {
    margin: 0;
}

#breath-prompt .breath-prompt-day {
    margin: 25px 0 0;
}


/* =========================================
   FOOTER — ALWAYS AFTER PAGE CONTENT
========================================= */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 18px 0;
}


/* =========================================
   BANNER PROMPT BUTTONS
========================================= */

.daily-quote-banner-prompt {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 18px 20px;

    background: #042c21 !important;

    border: 1px solid #aeb4b0 !important;
    border-radius: 0;

    color: #d8b65a !important;

    font-family: Arial, Helvetica, sans-serif !important;

    cursor: pointer;
    text-align: center;

    box-shadow: none !important;
}

.daily-quote-banner-prompt strong {
    display: block;

    color: #d8b65a !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.95rem;
    font-weight: 700;

    letter-spacing: 0.18em;
}

.daily-quote-banner-prompt span {
    display: block;

    margin-top: 3px;

    color: #aeb4b0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.8rem;
}

.daily-quote-banner-prompt:hover {
    border-color: #d8b65a !important;
}

.daily-quote-banner-prompt:hover strong {
    color: #f4e7b2 !important;
}


/* =========================================
   IF THE BANNER PROMPTS ARE BUTTON ELEMENTS
========================================= */

.site-banner button,
.daily-quote-banner-prompt button {
    font-family: Arial, Helvetica, sans-serif !important;
    color: #d8b65a !important;
    background: #042c21 !important;
    border: 1px solid #aeb4b0 !important;
}

.site-banner button:hover,
.daily-quote-banner-prompt button:hover {
    color: #f4e7b2 !important;
    border-color: #d8b65a !important;
}

/* =========================================
   FINAL BREATH PROMPT SPACING FIX
========================================= */

#breath-prompt.content-section {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

#breath-prompt .breath-prompt-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 25px 0 30px !important;
}

#breath-prompt .breath-prompt-label {
    margin: 0 0 15px !important;
}

#breath-prompt h2 {
    margin: 0 0 25px !important;
}

#breath-prompt .breath-prompt-sequence {
    margin: 0 !important;
}

#breath-prompt .breath-prompt-day {
    margin: 20px 0 0 !important;
}


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

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    margin: 0 !important;
    padding: 0 !important;
}

.site-footer {
    flex-shrink: 0;
    width: 100%;
    height: 60px;
    margin: 0 !important;
    padding: 18px 0 !important;
}


/* =========================================
   HOME BREATH BUTTON
========================================= */

#home .button {
    display: block;
    width: fit-content;
    margin: 22px auto 0;

    color: #063b2b !important;
    background: #d8b65a !important;

    border: 1px solid #aeb4b0 !important;
    border-radius: 3px;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

#home .button:hover {
    color: #fff !important;
    background: #0a5941 !important;
    border-color: #d8b65a !important;
}

/* =========================================
   FINAL CODEX MIRROR PAGE LAYOUT
========================================= */

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    width: 100%;
    margin: 0;
    padding: 0;
}

.site-footer {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 18px 0;
    box-sizing: border-box;
    background: #034d38;
    border-top: 0;
    text-align: center;
    flex-shrink: 0;
}

.site-footer p {
    margin: 0;
    padding: 0;
    color: #aeb4b0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
}

/* =========================================
   BREATH PROMPT
========================================= */

#breath-prompt {
    width: 100%;
    margin: 0;
    padding: 0 !important;
    border: none !important;
}

#breath-prompt .breath-prompt-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 25px 0 30px !important;
    text-align: center;
}

#breath-prompt .breath-prompt-label {
    margin: 0 0 15px !important;
}

#breath-prompt h2 {
    margin: 0 0 25px !important;
}

#breath-prompt .breath-prompt-sequence {
    margin: 0 !important;
}

#breath-prompt .breath-prompt-day {
    margin: 20px 0 0 !important;
}

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

.site-footer {
    flex: 0 0 60px;
    width: 100%;
    height: 60px;
    margin: 0 !important;
    padding: 18px 0 !important;
    background: #034d38;
    border-top: 2px solid #aeb4b0;
    text-align: center;
}

.site-footer p {
    margin: 0;
    padding: 0;
    color: #aeb4b0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
}

/* =========================================
   CODEX — SUBSCRIBER MATERIALS
========================================= */

.codex-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.codex-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 45px 0 60px;
}

.codex-label {
    margin: 0 0 18px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;

    text-align: center;
}

.codex-subscriber-lock,
.codex-chapter {
    padding: 38px 42px;

    background: rgba(3, 48, 35, 0.78);

    border: 1px solid #d8b65a;
}

/* =========================================
   CODEX CHAPTER BOOKMARK
========================================= */

.codex-chapter {
    position: relative;

    scroll-margin-top: 180px;
}


/* =========================================
   BOOKMARK BUTTON
========================================= */

.codex-bookmark-button {
    position: absolute;

    top: 16px;
    right: 16px;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;

    color: #aeb4b0;
    background: #042c21;

    border: 1px solid #aeb4b0;
    border-radius: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;

    cursor: pointer;

    z-index: 5;
}

.codex-bookmark-button:hover {
    color: #d8b65a;

    border-color: #d8b65a;

    background: #0a5941;
}


/* =========================================
   ACTIVE BOOKMARK
========================================= */

.codex-bookmark-button.is-bookmarked {
    color: #042c21;
    background: #d8b65a;

    border-color: #d8b65a;
}

.codex-bookmark-button.is-bookmarked:hover {
    color: #042c21;
    background: #d8b65a;
}


/* =========================================
   BOOKMARK SYMBOL
========================================= */

.codex-bookmark-symbol {
    display: inline-block;

    font-size: 0.8rem;
    line-height: 1;
}

.codex-subscriber-lock {
    text-align: center;
}

.codex-subscriber-lock h2,
.codex-chapter h2 {
    margin: 0 0 24px;

    color: #d8b65a;
}

.codex-subscriber-lock p {
    margin: 0 auto;

    color: #f4e7b2;
}

.codex-chapter-number {
    margin: 0 0 8px;

    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.codex-chapter-body > p {
    margin: 0 0 22px;

    color: #f4e7b2;

    font-size: 1.08rem;
    line-height: 1.85;
}

.codex-reflection,
.codex-journal {
    margin-top: 34px;
    padding-top: 28px;

    border-top: 1px solid #d8b65a;
}

.codex-reflection h3,
.codex-journal h3 {
    margin: 0 0 14px;

    color: #d8b65a;
}

.codex-reflection p,
.codex-journal p {
    color: #f4e7b2;
}

.codex-journal-prompts p {
    margin-bottom: 16px;
}


/* =========================================
   CODEX REFLECTION ENTRY FIELDS
========================================= */

.codex-reflection-entry {
    display: block;

    width: 100%;
    min-height: 150px;

    margin: 18px 0 6px;
    padding: 16px 18px;

    color: #f4e7b2;
    background: rgba(4, 44, 33, 0.82);

    border: 1px solid #aeb4b0;
    border-radius: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1rem;
    line-height: 1.65;

    resize: vertical;

    outline: none;
}


/* =========================================
   REFLECTION FIELD FOCUS
========================================= */

.codex-reflection-entry:focus {
    border-color: #d8b65a;

    background: rgba(
        4,
        44,
        33,
        0.94
    );
}


/* =========================================
   REFLECTION PLACEHOLDER
========================================= */

.codex-reflection-entry::placeholder {
    color: #aeb4b0;

    opacity: 0.8;
}


/* =========================================
   REFLECTION SAVE STATUS
========================================= */

.codex-reflection-save-status {
    min-height: 20px;

    margin: 0 !important;

    color: #d8b65a !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.78rem !important;
    font-weight: 600;

    text-align: right;
}


/* =========================================
   INDIVIDUAL JOURNAL PROMPTS
========================================= */

.codex-journal-prompt {
    margin: 0 0 32px;
}


.codex-journal-prompt:last-child {
    margin-bottom: 0;
}


/* =========================================
   CODEX MOBILE
========================================= */

@media (max-width: 600px) {

    .codex-subscriber-lock,
    .codex-chapter {
        padding: 28px 22px;
    }

    .codex-chapter {
        padding-top: 65px;
    }

    .codex-bookmark-button {
        top: 14px;
        right: 14px;

        padding: 6px 9px;

        font-size: 0.72rem;
    }
}

.codex-release-note {
    margin: 18px 0 0;
    padding: 0;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;

    text-align: center;
}

/* =========================================
   DONATE PAGE
========================================= */

.donate-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.donate-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 45px 0 60px;
}

.donate-label {
    margin: 0 0 18px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;

    text-align: center;
}

.donate-content {
    padding: 38px 42px;

    background: rgba(3, 48, 35, 0.78);

    border: 1px solid #d8b65a;
}

.donate-content h2 {
    margin: 0 0 28px;

    color: #d8b65a;

    font-size: clamp(1.15rem, 4vw, 3.2rem);
    line-height: 1.2;

    text-align: center;
    white-space: nowrap;
}

.donate-content > p {
    max-width: 720px;
    margin: 0 auto 24px;

    color: #f4e7b2;

    font-size: 1.08rem;
    line-height: 1.85;
}

.donation-amount-section {
    margin-top: 35px;
    padding-top: 30px;

    border-top: 1px solid #d8b65a;

    text-align: center;
}

.donation-amount-section label {
    display: block;
    margin-bottom: 14px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.donation-amount-field {
    display: flex;
    align-items: center;

    width: min(260px, 100%);
    margin: 0 auto;

    background: #042c21;

    border: 1px solid #d8b65a;
}

.donation-amount-field span {
    padding: 10px 0 10px 14px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

.donation-amount-field input {
    width: 100%;
    padding: 11px 14px;

    color: #f4e7b2;
    background: transparent;

    border: none;
    outline: none;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

.donation-amount-field input::placeholder {
    color: #aeb4b0;
}

.donate-button {
    margin-top: 20px;
    padding: 12px 28px;

    color: #042c21;
    background: #d8b65a;

    border: 1px solid #d8b65a;
    border-radius: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;

    cursor: pointer;
}

.donate-button:hover {
    color: #f4e7b2;
    background: #0a5941;
}

.donation-landscape {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto 30px;

    border: 1px solid #d8b65a;
}


/* =========================================
   DONATE MOBILE
========================================= */

@media (max-width: 600px) {

    .donate-content {
        padding: 28px 22px;
    }
}

/* =========================================
   MISSION STATEMENT PAGE
========================================= */

.mission-statement-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.mission-statement-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 45px 0 60px;
}

.mission-statement-label {
    margin: 0 0 18px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;

    text-align: center;
}

.mission-statement-content {
    padding: 38px 42px;

    background: rgba(3, 48, 35, 0.78);

    border: 1px solid #d8b65a;
}

.mission-statement-content h2 {
    margin: 0 0 30px;

    color: #d8b65a;

    font-size: clamp(1.15rem, 4vw, 3.2rem);
    line-height: 1.2;

    text-align: center;
    white-space: nowrap;
}

.mission-statement-content p {
    max-width: 720px;
    margin: 0 auto 26px;

    color: #f4e7b2;

    font-size: 1.08rem;
    line-height: 1.85;
}

.mission-statement-content p:last-child {
    margin-bottom: 0;
}

.mission-statement-content strong {
    color: #d8b65a;
    font-weight: 700;
}


/* =========================================
   MISSION STATEMENT MOBILE
========================================= */

@media (max-width: 600px) {

    .mission-statement-content {
        padding: 28px 22px;
    }
}

/* =========================================
   BIOGRAPHY PAGE
========================================= */

.biography-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.biography-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 45px 0 60px;
}

.biography-label {
    margin: 0 0 18px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;

    text-align: center;
}

.biography-content {
    padding: 38px 42px;

    background: rgba(3, 48, 35, 0.78);

    border: 1px solid #d8b65a;
}

.biography-content p {
    max-width: 720px;
    margin: 0 auto 26px;

    color: #f4e7b2;

    font-size: 1.08rem;
    line-height: 1.85;
}

.biography-content strong {
    color: #d8b65a;
    font-weight: 700;
}

.biography-opening,
.biography-closing {
    color: #d8b65a !important;

    font-size: 1.18rem !important;
    text-align: center;
}

.biography-closing {
    margin-bottom: 0 !important;
}


/* =========================================
   BIOGRAPHY MOBILE
========================================= */

@media (max-width: 600px) {

    .biography-content {
        padding: 28px 22px;
    }
}

/* =========================================
   DAILY QUOTES — WELCOME PAGE
========================================= */

.daily-quotes-welcome-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.daily-quotes-welcome-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 45px 0 60px;
}

.daily-quotes-welcome-label {
    margin: 0 0 18px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;

    text-align: center;
}

.daily-quotes-welcome-content {
    padding: 38px 42px;

    background: rgba(3, 48, 35, 0.78);

    border: 1px solid #d8b65a;
}

.daily-quotes-welcome-content h2 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 30px;

    color: #d8b65a;

    font-size: min(2.8rem, 3.3vw);
    line-height: 1.2;

    text-align: center;
}

.daily-quotes-welcome-content h2 span {
    display: block;
    white-space: nowrap;
}

.daily-quotes-welcome-content p {
    max-width: 720px;
    margin: 0 auto 24px;

    color: #f4e7b2;

    font-size: 1.08rem;
    line-height: 1.85;
}

.daily-quotes-welcome-content strong {
    color: #d8b65a;
    font-weight: 700;
}

.daily-quotes-welcome-list {
    max-width: 720px;
    margin: 0 auto 28px;
    padding-left: 28px;

    color: #f4e7b2;

    font-size: 1.08rem;
    line-height: 1.75;
}

.daily-quotes-welcome-list li {
    margin-bottom: 18px;
}

.daily-quotes-welcome-closing {
    margin-top: 30px !important;

    text-align: center;
}

.daily-quotes-read-button {
    display: block;

    width: fit-content;
    margin: 28px auto 0;
    padding: 13px 25px;

    color: #063b2b;
    background: #d8b65a;

    border: 1px solid #aeb4b0;
    border-radius: 3px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;

    cursor: pointer;
}

.daily-quotes-read-button:hover {
    color: #ffffff;
    background: #0a5941;
    border-color: #d8b65a;
}


/* =========================================
   DAILY QUOTES — WELCOME MOBILE
========================================= */

@media (max-width: 600px) {

    .daily-quotes-welcome-content {
        padding: 28px 22px;
    }
}

/* =========================================
   CODEX — WELCOME PAGE
========================================= */

.codex-welcome-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.codex-welcome-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 45px 0 60px;
}

.codex-welcome-label {
    margin: 0 0 18px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;

    text-align: center;
}

.codex-welcome-content {
    padding: 38px 42px;

    background: rgba(3, 48, 35, 0.78);

    border: 1px solid #d8b65a;
}

.codex-welcome-content h2 {
    margin: 0 0 30px;

    color: #d8b65a;

    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.2;

    text-align: center;
}

.codex-welcome-content h3 {
    max-width: 720px;
    margin: 36px auto 18px;

    color: #d8b65a;

    font-size: 1.4rem;
    line-height: 1.3;
}

.codex-welcome-content p {
    max-width: 720px;
    margin: 0 auto 24px;

    color: #f4e7b2;

    font-size: 1.08rem;
    line-height: 1.85;
}

.codex-welcome-content strong {
    color: #d8b65a;
    font-weight: 700;
}

.codex-welcome-list {
    max-width: 720px;
    margin: 0 auto 30px;
    padding-left: 28px;

    color: #f4e7b2;

    font-size: 1.08rem;
    line-height: 1.75;
}

.codex-welcome-list li {
    margin-bottom: 18px;
}

.codex-welcome-thanks {
    margin-top: 30px !important;

    text-align: center;
}

.codex-dive-button {
    display: block;

    width: fit-content;
    margin: 30px auto 0;
    padding: 13px 28px;

    color: #063b2b;
    background: #d8b65a;

    border: 1px solid #aeb4b0;
    border-radius: 3px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;

    cursor: pointer;
}

.codex-dive-button:hover {
    color: #ffffff;
    background: #0a5941;
    border-color: #d8b65a;
}


/* =========================================
   CODEX — WELCOME MOBILE
========================================= */

@media (max-width: 600px) {

    .codex-welcome-content {
        padding: 28px 22px;
    }
}

/* =========================================
   CODEX — PRICING & MEMBERSHIP
========================================= */

.codex-pricing-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.codex-pricing-container {
    width: min(900px, 90%);
    margin: 0 auto;
    padding: 45px 0 60px;
}

.codex-pricing-label {
    margin: 0 0 18px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;

    text-align: center;
}

.codex-pricing-intro {
    margin-bottom: 32px;
    text-align: center;
}

.codex-pricing-intro h2 {
    margin: 0;

    color: #d8b65a;

    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.2;
}


/* =========================================
   MEMBERSHIP TIERS
========================================= */

.membership-tier {
    margin: 0 0 32px;
    padding: 38px 42px;

    background: rgba(3, 48, 35, 0.78);

    border: 1px solid #d8b65a;
}

.membership-tier-featured {
    border-width: 2px;
}

.membership-tier h3 {
    margin: 0 0 12px;

    color: #d8b65a;

    font-size: 1.55rem;
    line-height: 1.35;
}

.membership-tier h4 {
    margin: 0 0 20px;

    color: #f4e7b2;

    font-size: 1.15rem;
}

.membership-tier p,
.founding-member-note p {
    max-width: 760px;
    margin: 0 0 22px;

    color: #f4e7b2;

    font-size: 1.05rem;
    line-height: 1.8;
}

.membership-tier strong,
.founding-member-note strong {
    color: #d8b65a;
    font-weight: 700;
}

.membership-tier ul {
    margin: 0 0 26px;
    padding-left: 28px;

    color: #f4e7b2;

    font-size: 1.05rem;
    line-height: 1.75;
}

.membership-tier li {
    margin-bottom: 12px;
}

.membership-tier-badge {
    margin: 0 0 14px !important;

    color: #aeb4b0 !important;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.76rem !important;
    font-weight: 700;

    letter-spacing: 0.16em;
}

.membership-price {
    color: #d8b65a !important;

    font-size: 1.3rem !important;
    font-weight: 700;
}


/* =========================================
   MEMBERSHIP NOTE
========================================= */

.membership-note {
    margin: 28px 0 0;
    padding: 24px;

    background: rgba(4, 44, 33, 0.78);

    border: 1px solid #aeb4b0;
}

.membership-note p:last-child {
    margin-bottom: 0;
}


/* =========================================
   MEMBERSHIP BUTTONS
========================================= */

.membership-button {
    display: block;

    width: fit-content;
    margin: 28px auto 0;
    padding: 13px 25px;

    color: #063b2b;
    background: #d8b65a;

    border: 1px solid #aeb4b0;
    border-radius: 3px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;

    cursor: pointer;
}

.membership-button:hover {
    color: #ffffff;
    background: #0a5941;
    border-color: #d8b65a;
}

.membership-free-button {
    color: #d8b65a;
    background: #042c21;
}


/* =========================================
   FOUNDING MEMBER NOTE
========================================= */

.founding-member-note {
    padding: 38px 42px;

    background: rgba(3, 48, 35, 0.78);

    border: 1px solid #aeb4b0;
}

.founding-member-note h3 {
    margin: 0 0 24px;

    color: #d8b65a;

    font-size: 1.6rem;
    text-align: center;
}

.founding-member-final {
    text-align: center;
}


/* =========================================
   PRICING MOBILE
========================================= */

@media (max-width: 600px) {

    .membership-tier,
    .founding-member-note {
        padding: 28px 22px;
    }
}

/* =========================================
   FOUNDING MEMBERS IMAGE
========================================= */

.founding-members-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0 auto 30px;

    border: 1px solid #d8b65a;
}

/* =========================================
   DEEP DIVER WELCOME IMAGE
========================================= */

.deep-diver-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0 auto 30px;

    border: 1px solid #d8b65a;
}

/* =========================================
   CODEX CHAPTER IMAGE
========================================= */

.codex-chapter-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0 auto 30px;

    border: 1px solid #d8b65a;
}

/* =========================================
   LEGAL ATTRIBUTION — BOTTOM OF PAGE
========================================= */

main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.legal-attribution {
    margin-top: auto;
}

/* =========================================
   SUPPORT STATUS
========================================= */

.support-status {
    margin: 16px 0 0;

    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;

    text-align: center;
}

/* =========================================
   CODEX ARCHIVE
========================================= */

.codex-chapter-list {
    width: 100%;
}

.codex-chapter-list .codex-chapter {
    margin-bottom: 40px;
}

.codex-chapter-list .codex-chapter:last-child {
    margin-bottom: 0;
}

.codex-current-release {
    margin: 0 0 18px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.codex-chapter-image {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 0 auto 30px;
}

/* =========================================
   HOME — FULL WIDTH ARTWORK
========================================= */

body.is-home {
    background-image: none;
    background-color: #080706;
}

body.is-home .site-banner {
    display: none;
}

#home {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #080706;
}

#home .home-artwork {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.home-breath-action {
    position: absolute;
    bottom: 4%;
    left: 0;
    width: 100%;
    padding: 0 16px;
    text-align: center;
}

#home .home-breath-action .button {
    max-width: 100%;
    margin: 0 auto;
}

/* =========================================
   HEADER — TITLE + ACCOUNT CONTROLS
========================================= */

.site-header .container {
    display: block;
}


.header-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    width: 100%;

    gap: 30px;
}


.header-account-area {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    gap: 12px;
}


.header-auth-stack {
    display: flex;
    flex-direction: column;

    width: 110px;

    gap: 7px;
}


.header-auth-button {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;

    padding: 8px 12px;

    color: #d8b65a;
    background: #042c21;

    border: 1px solid #d8b65a;
    border-radius: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;

    cursor: pointer;
}


.header-auth-button:hover {
    color: #f4e7b2;
    background: #0a5941;
}


.site-nav {
    margin-top: 18px;
}



/* =========================================
   ACCOUNT MODALS
========================================= */

.account-modal {
    display: none;

    position: fixed;

    inset: 0;

    z-index: 1000;

    padding: 30px 20px;

    background: rgba(0, 0, 0, 0.72);

    overflow-y: auto;
}


.account-modal.account-modal-open {
    display: flex;

    align-items: center;
    justify-content: center;
}


.account-modal-panel {
    position: relative;

    width: min(460px, 100%);

    padding: 40px;

    color: #f4e7b2;
    background: #042c21;

    border: 1px solid #d8b65a;
}


.account-modal-panel h2 {
    margin: 0 0 28px;

    color: #d8b65a;

    text-align: center;
}


.account-modal-panel form {
    display: flex;
    flex-direction: column;

    gap: 12px;
}


.account-modal-panel label {
    color: #f4e7b2;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
}


.account-modal-panel input[type="email"],
.account-modal-panel input[type="password"] {
    width: 100%;

    padding: 12px;

    color: #f4e7b2;
    background: #063b2b;

    border: 1px solid #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}


.account-modal-close {
    position: absolute;

    top: 10px;
    right: 14px;

    padding: 0;

    color: #d8b65a;
    background: transparent;

    border: none;

    font-size: 1.8rem;

    cursor: pointer;
}


.account-submit-button {
    margin-top: 12px;
    padding: 12px 24px;

    color: #042c21;
    background: #d8b65a;

    border: 1px solid #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;

    cursor: pointer;
}


.account-submit-button:hover {
    color: #f4e7b2;
    background: #0a5941;
}


.account-switch-button {
    display: block;

    margin: 22px auto 0;
    padding: 0;

    color: #aeb4b0;
    background: transparent;

    border: none;

    font-family: Arial, Helvetica, sans-serif;

    cursor: pointer;
}


.account-switch-button:hover {
    color: #d8b65a;
}


body.account-modal-active {
    overflow: hidden;
}



/* =========================================
   NEWSLETTER
========================================= */

.newsletter-checkbox-row {
    display: flex !important;
    align-items: flex-start;

    gap: 10px;

    margin-top: 12px;

    cursor: pointer;
}


.newsletter-checkbox-row input {
    width: 22px;
    height: 22px;

    margin-top: 2px;

    flex-shrink: 0;

    cursor: pointer;
}


.newsletter-explanation {
    margin: 0;

    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
}


.membership-newsletter-option {
    margin: 25px 0;

    padding: 18px;

    border: 1px solid #aeb4b0;

    background: rgba(4, 44, 33, 0.65);
}


.membership-newsletter-option label {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    cursor: pointer;
}


.membership-newsletter-option input {
    width: 22px;
    height: 22px;

    margin-top: 2px;

    flex-shrink: 0;

    cursor: pointer;
}


.newsletter-status {
    margin: 10px 0 0;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
}


.membership-newsletter-login-note {
    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
}



/* =========================================
   ACCOUNT HEADER — MOBILE
========================================= */

@media (max-width: 800px) {

    .header-top-row {
        align-items: flex-start;
    }


    .header-auth-stack {
        width: 95px;
    }


    .header-auth-button {
        padding: 7px 8px;

        font-size: 0.75rem;
    }
}


@media (max-width: 500px) {

    .header-top-row {
        gap: 15px;
    }


    .site-title {
        font-size: 1.05rem;
    }


    .account-modal-panel {
        padding: 35px 22px;
    }
}

/* =========================================
   SIGNED-IN MEMBER CONTROLS
========================================= */

.header-auth-stack.header-member-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    width: auto;

    gap: 10px;
}


/* =========================================
   MEMBER PROFILE PICTURE
========================================= */

.header-profile-image {
    display: block;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    object-fit: cover;

    border: 2px solid #d8b65a;
    border-radius: 50%;

    outline: 1px solid #aeb4b0;
    outline-offset: 2px;

    background: #063b2b;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.header-profile-image:hover {
    opacity: 0.85;

    transform: scale(1.04);
}


/* =========================================
   SIGN OUT BUTTON BESIDE PROFILE PICTURE
========================================= */

.header-member-controls .header-auth-button {
    white-space: nowrap;
}

.header-member-button-stack {
    display: flex;
    flex-direction: column;

    width: 110px;

    gap: 7px;
}

.header-member-button-stack .header-auth-button {
    width: 100%;
}

/* =========================================
   PROFILE PHOTO — HEADER
========================================= */

.header-profile-shell {
    position: relative;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;
}


.header-profile-clip {
    position: relative;

    width: 46px;
    height: 46px;

    overflow: hidden;

    background: #063b2b;

    border: 2px solid #d8b65a;
    border-radius: 50%;

    outline: 1px solid #aeb4b0;
    outline-offset: 2px;
}


.header-profile-image {
    position: absolute;

    left: 50%;
    top: 50%;

    display: block;

    max-width: none;
    max-height: none;

    border: none;
    border-radius: 0;
    outline: none;

    background: transparent;

    cursor: pointer;

    user-select: none;
    -webkit-user-drag: none;

    transform-origin: center center;
}


.header-profile-image:hover {
    opacity: 0.86;
}


/* =========================================
   SMALL EDIT BUTTON
========================================= */

.header-profile-edit-button {
    position: absolute;

    right: -6px;
    bottom: -6px;

    z-index: 2;

    width: 21px;
    height: 21px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #042c21;
    background: #d8b65a;

    border: 1px solid #042c21;
    border-radius: 50%;

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
}


.header-profile-edit-button:hover {
    color: #f4e7b2;
    background: #0a5941;
    border-color: #d8b65a;
}


/* =========================================
   PROFILE PHOTO EDITOR
========================================= */

.profile-photo-editor {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 1500;

    padding: 30px 20px;

    background: rgba(0, 0, 0, 0.78);

    overflow-y: auto;
}


.profile-photo-editor.profile-photo-editor-open {
    display: flex;

    align-items: center;
    justify-content: center;
}


.profile-photo-editor-panel {
    position: relative;

    width: min(500px, 100%);

    padding: 38px 30px;

    color: #f4e7b2;
    background: #042c21;

    border: 1px solid #d8b65a;

    text-align: center;
}


.profile-photo-editor-panel h2 {
    margin: 0 0 10px;

    color: #d8b65a;
}


.profile-photo-editor-instructions {
    margin: 0 0 24px;

    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88rem;
}


.profile-photo-editor-close {
    position: absolute;

    top: 10px;
    right: 14px;

    padding: 0;

    color: #d8b65a;
    background: transparent;

    border: none;

    font-size: 1.8rem;

    cursor: pointer;
}


/* =========================================
   CIRCULAR CROP AREA
========================================= */

.profile-photo-crop-frame {
    position: relative;

    width: min(280px, 75vw);
    aspect-ratio: 1 / 1;

    margin: 0 auto 28px;

    overflow: hidden;

    background: #063b2b;

    border: 3px solid #d8b65a;
    border-radius: 50%;

    outline: 1px solid #aeb4b0;
    outline-offset: 5px;

    cursor: grab;

    touch-action: none;

    user-select: none;
}


.profile-photo-crop-frame.profile-photo-dragging {
    cursor: grabbing;
}


#profile-photo-editor-image {
    position: absolute;

    left: 50%;
    top: 50%;

    max-width: none;
    max-height: none;

    user-select: none;
    -webkit-user-drag: none;

    pointer-events: none;

    transform-origin: center center;
}


/* =========================================
   ZOOM
========================================= */

.profile-photo-zoom-controls {
    display: flex;

    align-items: center;
    justify-content: center;

    width: min(360px, 100%);

    margin: 0 auto 25px;

    gap: 12px;
}


.profile-photo-zoom-controls input {
    flex: 1;

    cursor: pointer;
}


.profile-photo-zoom-controls button {
    width: 38px;
    height: 38px;

    padding: 0;

    color: #d8b65a;
    background: #063b2b;

    border: 1px solid #d8b65a;

    font-size: 1.25rem;

    cursor: pointer;
}


.profile-photo-zoom-controls button:hover {
    color: #f4e7b2;
    background: #0a5941;
}


/* =========================================
   EDITOR BUTTONS
========================================= */

.profile-photo-editor-actions {
    display: flex;

    justify-content: center;

    gap: 12px;
}


.profile-photo-editor-actions button {
    min-width: 110px;

    padding: 11px 18px;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;

    cursor: pointer;
}


.profile-photo-secondary-button {
    color: #d8b65a;
    background: #042c21;

    border: 1px solid #d8b65a;
}


.profile-photo-save-button {
    color: #042c21;
    background: #d8b65a;

    border: 1px solid #d8b65a;
}


.profile-photo-secondary-button:hover,
.profile-photo-save-button:hover {
    color: #f4e7b2;
    background: #0a5941;
}


body.profile-photo-editor-active {
    overflow: hidden;
}

/* =========================================
   PROFILE IMAGE — STABLE MEMBERSTACK VERSION
========================================= */

.header-profile-shell {
    position: relative;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;
}


.header-profile-clip {
    position: relative;

    width: 46px;
    height: 46px;

    overflow: hidden;

    border: 2px solid #d8b65a;
    border-radius: 50%;

    outline: 1px solid #aeb4b0;
    outline-offset: 2px;

    background: #063b2b;
}


.header-profile-image {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border: none !important;
    border-radius: 50% !important;
    outline: none !important;

    transform: none !important;

    opacity: 1 !important;

    background: #063b2b;
}


/* =========================================
   PROFILE PICTURE — FINAL
========================================= */

.header-profile-shell {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
}


.header-profile-clip {
    position: relative;

    width: 46px;
    height: 46px;

    overflow: hidden;

    border: 2px solid #d8b65a;
    border-radius: 50%;

    outline: 1px solid #aeb4b0;
    outline-offset: 2px;

    background-color: #063b2b;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23063b2b'/%3E%3Ccircle cx='40' cy='29' r='14' fill='%23d8b65a'/%3E%3Cpath d='M15 75c3-18 14-27 25-27s22 9 25 27' fill='%23d8b65a'/%3E%3C/svg%3E");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.header-profile-image {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border: 0 !important;
    border-radius: 50% !important;
    outline: 0 !important;

    transform: none !important;

    background: transparent !important;

    cursor: pointer;
}

/* =========================================
   CUSTOMER SERVICE PAGE
========================================= */

.customer-service-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.customer-service-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 45px 0 60px;
}

.customer-service-label {
    margin: 0 0 18px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;

    text-align: center;
}

.customer-service-content {
    padding: 38px 42px;

    background: rgba(3, 48, 35, 0.78);

    border: 1px solid #d8b65a;

    text-align: center;
}

.customer-service-content h2 {
    margin: 0 0 25px;

    color: #d8b65a;

    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.2;
}

.customer-service-content > p {
    max-width: 700px;
    margin: 0 auto 35px;

    color: #f4e7b2;

    font-size: 1.08rem;
    line-height: 1.85;
}

.customer-service-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}

.customer-service-option {
    padding: 30px 25px;

    background: #042c21;

    border: 1px solid #d8b65a;
}

.customer-service-option h3 {
    margin: 0 0 12px;

    color: #d8b65a;
}

.customer-service-option p {
    margin: 0 0 22px;

    color: #f4e7b2;

    font-family: Arial, Helvetica, sans-serif;
}

.customer-service-button {
    display: inline-block;

    padding: 12px 20px;

    color: #042c21;
    background: #d8b65a;

    border: 1px solid #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.customer-service-button:hover {
    color: #f4e7b2;
    background: #0a5941;
}


/* =========================================
   CUSTOMER SERVICE MOBILE
========================================= */

@media (max-width: 600px) {

    .customer-service-content {
        padding: 28px 22px;
    }

    .customer-service-options {
        grid-template-columns: 1fr;
    }

    .customer-service-button {
        width: 100%;
        overflow-wrap: anywhere;
    }
}

/* =========================================
   COMMUNITY PAGE
========================================= */

.community-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.community-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 45px 0 60px;
}

.community-label {
    margin: 0 0 18px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;

    text-align: center;
}


/* =========================================
   COMMUNITY PAGE
========================================= */

.community-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.community-container {
    position: relative;

    width: min(850px, 90%);
    margin: 0 auto;
    padding: 45px 0 60px;
}


/* =========================================
   COMMUNITY FEED HEADER
========================================= */

.community-feed-header {
    position: sticky;
    top: 0;
    z-index: 90;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;

    padding: 12px 0;
    margin-bottom: 28px;

    background: rgba(4, 44, 33, 0.96);
}

.community-label {
    margin: 0 0 8px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.community-feed-header h2 {
    margin: 0;

    color: #d8b65a;

    font-size: clamp(2rem, 5vw, 3rem);
}


/* =========================================
   POST TO COMMUNITY DROPDOWN BUTTON
========================================= */

.community-post-toggle {
    position: static;

    z-index: 20;

    flex-shrink: 0;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 10px 16px;

    color: #042c21;
    background: #d8b65a;

    border: 1px solid #d8b65a;
    border-radius: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88rem;
    font-weight: 700;

    cursor: pointer;
}

.community-post-toggle:hover {
    color: #f4e7b2;
    background: #0a5941;
}

#community-post-toggle-arrow {
    font-size: 0.7rem;
}


/* =========================================
   POST COMPOSER DROPDOWN
========================================= */

.community-composer {
    padding: 28px 30px;
    margin-bottom: 30px;

    background: rgba(3, 48, 35, 0.88);

    border: 1px solid #d8b65a;
}S

.community-composer[hidden] {
    display: none !important;
}

.community-introduction {
    margin: 0 0 20px;

    color: #f4e7b2;

    text-align: left;
}

.community-post-input {
    display: block;

    width: 100%;
    min-height: 140px;

    padding: 16px;

    color: #f4e7b2;
    background: #042c21;

    border: 1px solid #aeb4b0;
    outline: none;

    resize: vertical;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

.community-post-input:focus {
    border-color: #d8b65a;
}

.community-post-input::placeholder {
    color: #aeb4b0;
}

.community-post-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 18px;
}

.community-post-status {
    margin: 0;

    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
}

.community-publish-button {
    padding: 12px 24px;

    color: #042c21;
    background: #d8b65a;

    border: 1px solid #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;

    cursor: pointer;
}

.community-publish-button:hover {
    color: #f4e7b2;
    background: #0a5941;
}


/* =========================================
   COMMUNITY FEED
========================================= */

.community-feed {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.community-post-card {
    padding: 28px 30px;

    background: rgba(3, 48, 35, 0.85);

    border: 1px solid #d8b65a;
}

.community-post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 18px;
}

.community-post-author {
    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
}

.community-post-date {
    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
}

/* =========================================
   COMMUNITY POST EDIT
========================================= */

.community-post-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin-left: auto;
}

.community-edited-label {
    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-style: italic;
}

.community-edit-button {
    padding: 6px 12px;

    color: #d8b65a;
    background: #042c21;

    border: 1px solid #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;

    cursor: pointer;
}

.community-edit-button:hover {
    color: #f4e7b2;
    background: #0a5941;
}


/* =========================================
   COMMUNITY EDIT FORM
========================================= */

.community-edit-form {
    margin: 0 0 22px;
}

.community-edit-textarea {
    display: block;

    width: 100%;
    min-height: 130px;

    padding: 14px;

    color: #f4e7b2;
    background: #042c21;

    border: 1px solid #d8b65a;
    outline: none;

    resize: vertical;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.08rem;
    line-height: 1.8;
}

.community-edit-textarea:focus {
    border-color: #f4e7b2;
}

.community-edit-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 12px;
}

.community-edit-cancel-button,
.community-edit-save-button {
    padding: 8px 15px;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;

    cursor: pointer;
}

.community-edit-cancel-button {
    color: #aeb4b0;
    background: #042c21;

    border: 1px solid #aeb4b0;
}

.community-edit-save-button {
    color: #042c21;
    background: #d8b65a;

    border: 1px solid #d8b65a;
}

.community-edit-cancel-button:hover,
.community-edit-save-button:hover {
    color: #f4e7b2;
    background: #0a5941;
}

.community-post-body {
    margin: 0 0 22px;

    color: #f4e7b2;

    font-size: 1.08rem;
    line-height: 1.8;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.community-post-actions {
    display: flex;
    align-items: center;
    gap: 20px;

    padding-top: 16px;

    border-top: 1px solid rgba(216, 182, 90, 0.45);
}

.community-action-button,
.community-comment-button {
    padding: 8px 15px;

    color: #d8b65a;
    background: #042c21;

    border: 1px solid #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;

    cursor: pointer;
}

.community-action-button:hover,
.community-comment-button:hover,
.community-action-button.is-liked {
    color: #f4e7b2;
    background: #0a5941;
}

.community-comment-count {
    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
}


/* =========================================
   COMMENTS
========================================= */

.community-comments {
    margin-top: 20px;
}

.community-comment {
    padding: 14px 16px;
    margin-bottom: 10px;

    background: rgba(4, 44, 33, 0.82);

    border-left: 2px solid #d8b65a;
}

.community-comment-header {
    margin-bottom: 5px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
}

.community-comment p {
    margin: 0;

    color: #f4e7b2;

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;

    overflow-wrap: anywhere;
}

.community-comment-form {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;

    margin-top: 18px;
}

.community-comment-input {
    grid-column: 1 / -1;
}

.community-comment-button {
    grid-column: 2;
}

.community-report-button {
    grid-column: 3;
}

.community-comment-input {
    flex: 1;

    padding: 10px 12px;

    color: #f4e7b2;
    background: #042c21;

    border: 1px solid #aeb4b0;
    outline: none;

    font-family: Arial, Helvetica, sans-serif;
}

.community-comment-input:focus {
    border-color: #d8b65a;
}

.community-comment-input::placeholder {
    color: #aeb4b0;
}

/* =========================================
   COMMUNITY REPORT BUTTON
========================================= */

.community-report-button {
    padding: 8px 15px;

    color: #aeb4b0;
    background: #042c21;

    border: 1px solid #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;

    cursor: pointer;
}

.community-report-button:hover {
    color: #f4e7b2;
    background: #0a5941;
    border-color: #d8b65a;
}


/* =========================================
   COMMUNITY REPORT — CUSTOMER SERVICE
========================================= */

.community-report-panel {
    margin: 30px 0;
    padding: 28px;

    background: #042c21;

    border: 1px solid #d8b65a;

    text-align: center;
}

.community-report-panel h3 {
    margin: 0 0 15px;

    color: #d8b65a;
}

.community-report-panel p {
    color: #f4e7b2;
}

.community-report-details {
    margin: 20px 0 0;

    color: #aeb4b0 !important;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;

    overflow-wrap: anywhere;
}

/* =========================================
   EMPTY COMMUNITY FEED
========================================= */

.community-empty-feed {
    padding: 35px;

    background: rgba(3, 48, 35, 0.78);

    border: 1px solid #d8b65a;

    text-align: center;
}

.community-empty-feed p {
    margin: 5px 0;

    color: #f4e7b2;
}


/* =========================================
   COMMUNITY MOBILE
========================================= */

@media (max-width: 600px) {

    .community-composer,
    .community-post-card {
        padding: 25px 20px;
    }

    .community-post-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .community-publish-button {
        width: 100%;
    }

    .community-post-header {
        flex-direction: column;
        align-items: flex-start;
    }


    .community-feed-header {
        align-items: flex-start;
    }

    .community-feed-header h2 {
        font-size: 1.8rem;
    }

    .community-post-toggle {
        padding: 9px 12px;
        font-size: 0.78rem;
    }

    .community-composer {
        padding: 22px 18px;
    }

}

/* =========================================
   PERSONAL JOURNAL PAGE
========================================= */

.personal-journal-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.personal-journal-container {
    width: min(850px, 90%);
    margin: 0 auto;
    padding: 35px 0 60px;
}


/* =========================================
   PERSONAL JOURNAL STICKY TOOLBAR
========================================= */

.personal-journal-toolbar {
    position: sticky;
    top: calc(
        var(--site-header-height, 120px)
        + 10px
    );
    z-index: 90;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 20px;
    padding: 12px 0;

    background: rgba(4, 44, 33, 0.96);
}

.personal-journal-heading {
    min-width: 0;
}

.personal-journal-label {
    margin: 0 0 8px;

    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.personal-journal-toolbar h2 {
    margin: 0;

    color: #d8b65a;

    font-size: clamp(2rem, 5vw, 3rem);
}


/* =========================================
   COMPOSE ENTRY BUTTON
========================================= */

.personal-journal-compose-toggle {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 10px 16px;

    color: #042c21;
    background: #d8b65a;

    border: 1px solid #d8b65a;
    border-radius: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88rem;
    font-weight: 700;

    cursor: pointer;
}

.personal-journal-compose-toggle:hover {
    color: #f4e7b2;
    background: #0a5941;
}

.personal-journal-compose-toggle:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#personal-journal-compose-arrow {
    font-size: 0.7rem;
}


/* =========================================
   JOURNAL DESCRIPTION
========================================= */

.personal-journal-description {
    margin: 0 0 28px;

    color: #f4e7b2;

    font-size: 1.05rem;
    line-height: 1.7;
}


/* =========================================
   JOURNAL COMPOSER
========================================= */

.personal-journal-composer {
    margin-bottom: 30px;
    padding: 28px 30px;

    background: rgba(3, 48, 35, 0.88);

    border: 1px solid #d8b65a;
}

.personal-journal-composer[hidden] {
    display: none !important;
}

.personal-journal-input {
    display: block;

    width: 100%;
    min-height: 180px;

    padding: 16px;

    color: #f4e7b2;
    background: #042c21;

    border: 1px solid #aeb4b0;
    outline: none;

    resize: vertical;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    line-height: 1.7;
}

.personal-journal-input:focus {
    border-color: #d8b65a;
}

.personal-journal-input::placeholder {
    color: #aeb4b0;
}


/* =========================================
   JOURNAL SAVE CONTROLS
========================================= */

.personal-journal-compose-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 18px;
}

.personal-journal-status {
    margin: 0;

    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
}

.personal-journal-save-button {
    padding: 12px 24px;

    color: #042c21;
    background: #d8b65a;

    border: 1px solid #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;

    cursor: pointer;
}

.personal-journal-save-button:hover {
    color: #f4e7b2;
    background: #0a5941;
}


/* =========================================
   JOURNAL ENTRIES
========================================= */

.personal-journal-entries {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.personal-journal-entry {
    padding: 28px 30px;

    background: rgba(3, 48, 35, 0.85);

    border: 1px solid #d8b65a;
}

.personal-journal-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 18px;
    padding-bottom: 12px;

    border-bottom: 1px solid rgba(
        216,
        182,
        90,
        0.45
    );
}

.personal-journal-entry-header strong {
    color: #d8b65a;

    font-family: Arial, Helvetica, sans-serif;
}

.personal-journal-entry-header span {
    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
}

.personal-journal-entry-body {
    margin: 0;
    padding: 0;

    color: #f4e7b2;

    font-size: 1.08rem;
    line-height: 1.85;

    text-align: left;

    white-space: pre-line;
    overflow-wrap: anywhere;
}


/* =========================================
   EMPTY JOURNAL
========================================= */

.personal-journal-empty {
    padding: 35px;

    background: rgba(3, 48, 35, 0.78);

    border: 1px solid #d8b65a;

    text-align: center;
}

.personal-journal-empty h3 {
    margin: 0 0 12px;

    color: #d8b65a;
}

.personal-journal-empty p {
    margin: 5px auto;

    color: #f4e7b2;
}


/* =========================================
   PERSONAL JOURNAL MOBILE
========================================= */

@media (max-width: 600px) {

    .personal-journal-toolbar {
        gap: 15px;
    }

    .personal-journal-toolbar h2 {
        font-size: 1.8rem;
    }

    .personal-journal-compose-toggle {
        padding: 9px 12px;

        font-size: 0.78rem;
    }

    .personal-journal-composer,
    .personal-journal-entry {
        padding: 22px 18px;
    }

    .personal-journal-compose-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .personal-journal-save-button {
        width: 100%;
    }

    .personal-journal-entry-header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================
   NEWSLETTER ARCHIVE PAGE
========================================= */

.newsletter-page {
    width: 100%;
    padding: 55px 0 80px;
}


.newsletter-page-container {
    width: min(980px, 92%);
}


.newsletter-page-heading {
    max-width: 840px;
    margin: 0 auto 42px;
    text-align: center;
}


.newsletter-page-heading h2 {
    margin: 0 0 18px;

    color: #d8b65a;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 5vw, 3.7rem);
    line-height: 1.12;
    font-weight: 700;
}


.newsletter-page-introduction {
    max-width: 720px;
    margin: 0 auto;

    color: #e5e8e6;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
}


/* =========================================
   NEWSLETTER EMAIL PREFERENCE
========================================= */

.newsletter-email-preference {
    max-width: 720px;

    margin: 28px auto 0;
    padding: 18px 20px;

    background: rgba(4, 44, 33, 0.82);

    border: 1px solid #d8b65a;

    text-align: left;
}


.newsletter-email-preference label {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    color: #f4e7b2;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;

    cursor: pointer;
}


.newsletter-email-preference input {
    width: 22px;
    height: 22px;

    margin-top: 2px;

    flex-shrink: 0;

    cursor: pointer;
}


.newsletter-email-note {
    margin: 9px 0 0;

    color: #aeb4b0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.84rem;
    line-height: 1.55;
}


/* =========================================
   NEWSLETTER ARCHIVE
========================================= */

.newsletter-archive {
    display: grid;

    gap: 42px;
}


/* =========================================
   INDIVIDUAL NEWSLETTER
========================================= */

.newsletter-issue-card {
    width: min(850px, 100%);

    margin: 0 auto;

    padding: clamp(
        32px,
        6vw,
        62px
    );

    color: #21394a;

    background: #fffdf8;

    border: 1px solid #d6c9a5;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.18);
}


/* =========================================
   NEWSLETTER HEADER
========================================= */

.newsletter-issue-header {
    text-align: center;
}


.newsletter-issue-number {
    margin: 0;

    color: #2b5a6f !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.05rem !important;
    font-weight: 400;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.newsletter-issue-ornament {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 12px;

    max-width: 500px;

    margin: 12px auto 18px;

    color: #c7aa5b;
}


.newsletter-issue-ornament span {
    display: block;

    height: 1px;

    background: #c7aa5b;
}


.newsletter-issue-ornament b {
    color: #c7aa5b;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
}


.newsletter-issue-header h3 {
    margin: 0;

    color: #123d58;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(
        1.8rem,
        4vw,
        2.55rem
    );

    line-height: 1.2;
    font-weight: 700;
}


.newsletter-issue-date {
    margin: 13px 0 32px !important;

    color: #697985 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================
   NEWSLETTER BODY
========================================= */

.newsletter-issue-body {
    color: #21394a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.06rem;
    line-height: 1.62;

    text-align: left;
}


.newsletter-issue-body p {
    max-width: none;

    margin: 0 0 22px;

    color: #21394a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: inherit;
    line-height: inherit;
}


.newsletter-issue-body strong {
    color: #123d58;

    font-weight: 700;
}


.newsletter-issue-body em {
    color: #21394a;
}


.newsletter-issue-body ul {
    margin:
        -7px
        0
        23px
        1.45rem;

    padding: 0;

    color: #21394a;
}


.newsletter-issue-body li {
    margin: 7px 0;

    padding-left: 3px;
}


.newsletter-empty-message {
    margin: 0 auto;

    color: #e5e8e6;

    font-family: Arial, Helvetica, sans-serif;

    text-align: center;
}


/* =========================================
   NEWSLETTER MOBILE
========================================= */

@media (max-width: 700px) {

    .newsletter-page {
        padding:
            38px
            0
            55px;
    }


    .newsletter-page-heading {
        margin-bottom: 32px;
    }


    .newsletter-issue-card {
        padding:
            30px
            22px;
    }


    .newsletter-issue-body {
        font-size: 1rem;
    }


    .newsletter-issue-ornament {
        gap: 8px;
    }
}


/* =========================================
   SYMBOLS PAGE
========================================= */

.symbols-page {
    width: 100%;
    margin: 0;
    padding: 55px 0 80px;
}


.symbols-container {
    width: min(1000px, 92%);
    margin: 0 auto;
}


.symbols-heading {
    margin: 0 auto 40px;
    text-align: center;
}


.symbols-heading h2 {
    margin: 0;

    color: #d8b65a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        2.2rem,
        5vw,
        3.7rem
    );

    line-height: 1.15;
}


/* =========================================
   SYMBOL DECK
========================================= */

.symbols-deck {
    width: 100%;
}

.symbols-deck-cover {
    display: block;
    width: min(420px, calc(100% - 32px));
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    list-style: none;
}

.symbols-deck-cover::-webkit-details-marker {
    display: none;
}

.symbols-deck-cover:focus-visible {
    outline: 2px solid #f4e7b2;
    outline-offset: 10px;
}

.symbols-deck-stack {
    position: relative;
    isolation: isolate;
    display: block;
    margin-bottom: 38px;
}

.symbols-deck-stack::before,
.symbols-deck-stack::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #063b2b;
    border: 1px solid #d8b65a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transform: translate(6px, 10px) rotate(2deg);
}

.symbols-deck-stack::before {
    transform: translate(-6px, 20px) rotate(-2deg);
    background: #042c21;
}

.symbols-deck-invitation {
    display: block;
    margin-bottom: 14px;
    color: #f4e7b2;
    font-size: 1.05rem;
    line-height: 1.6;
}

.symbols-deck-action {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    color: #042c21;
    background: #d8b65a;
    border: 1px solid #d8b65a;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.symbols-deck-cover:hover .symbols-deck-action,
.symbols-deck-close:hover {
    background: #f4e7b2;
}

.symbols-deck-close,
.symbols-deck[open] .symbols-deck-open,
.symbols-deck[open] .symbols-deck-invitation {
    display: none;
}

.symbols-deck[open] .symbols-deck-close {
    display: inline-flex;
    cursor: pointer;
    font-size: 1rem;
}

.symbols-deck-toolbar {
    position: sticky;
    top: var(--site-header-height, 120px);
    z-index: 90;
    padding: 12px 0;
    margin-bottom: 28px;
    text-align: center;
}

.symbols-deck-close:focus-visible {
    outline: 2px solid #f4e7b2;
    outline-offset: 4px;
}

.symbols-deck[open] .symbols-deck-cover {
    width: min(760px, 100%);
    margin-bottom: 0;
}

.symbols-deck[open] .symbols-deck-stack {
    margin-bottom: 20px;
}

.symbols-deck[open] .symbols-deck-stack::before,
.symbols-deck[open] .symbols-deck-stack::after {
    display: none;
}

/* =========================================
   SYMBOL CARD LIST
========================================= */

.symbols-card-list {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    gap: 45px;
}


/* =========================================
   INDIVIDUAL SYMBOL CARD
========================================= */

.symbols-card {
    display: block;

    width: min(
        760px,
        100%
    );

    height: auto;

    margin: 0 auto;

    border: 1px solid #d8b65a;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            0,
            0,
            0.32
        );
}


/* =========================================
   SYMBOLS MOBILE
========================================= */

@media (max-width: 800px) {

    .symbols-page {
        padding:
            35px
            0
            55px;
    }


    .symbols-heading {
        margin-bottom: 28px;
    }


    .symbols-card-list {
        gap: 28px;
    }


    .symbols-card {
        width: 100%;
    }
}

/* =========================================
   THRESHOLD SUBSCRIBER KIT
========================================= */

.codex-kit-heading,
#codex-kit-status {
    text-align: center;
}

.codex-kit-heading h2 {
    margin: 28px 0 12px;
    color: #d8b65a;
    font-size: clamp(2rem, 5vw, 3rem);
}

.codex-kit-note {
    color: #c5cbc7;
    font-size: 0.9rem;
}

.codex-kit-account-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 20px 0 36px;
}

.codex-subscriber-lock[hidden] {
    display: none;
}

.codex-container:has(.codex-subscriber-lock[hidden]) .codex-kit-account-actions {
    display: none;
}

.codex-kit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 44px 32px;
}

.codex-kit-item {
    min-width: 0;
    scroll-margin-top: calc(var(--site-header-height, 120px) + 16px);
}

.codex-kit-item[open] {
    grid-column: 1 / -1;
}

.codex-kit-cover {
    display: block;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    list-style: none;
}

.codex-kit-cover::-webkit-details-marker {
    display: none;
}

.codex-kit-cover img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #d8b65a;
    box-shadow: 5px 5px 0 #234336, 6px 6px 0 #d8b65a, 0 12px 28px #0006;
}

.codex-kit-title {
    display: block;
    margin-top: 24px;
    color: #d8b65a;
    font-size: 1.5rem;
    font-weight: 700;
}

.codex-kit-prompt {
    display: block;
    margin: 8px 0 18px;
    line-height: 1.6;
}

.codex-kit-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 12px 18px;
    color: #042c21;
    background: #d8b65a;
    border: 1px solid #d8b65a;
    font: 700 0.95rem/1.4 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.codex-kit-action:hover,
.codex-kit-cover:hover .codex-kit-action {
    background: #f4e7b2;
}

.codex-kit-cover:focus-visible,
.codex-kit-action:focus-visible {
    outline: 2px solid #f4e7b2;
    outline-offset: 6px;
}

.codex-kit-toolbar {
    position: sticky;
    top: var(--site-header-height, 120px);
    z-index: 90;
    padding: 12px 0;
    text-align: center;
    pointer-events: none;
}

.codex-kit-toolbar button {
    pointer-events: auto;
    box-shadow: 0 4px 16px #0005;
}

.codex-kit-item[open] .codex-kit-cover .codex-kit-action,
.codex-kit-item[open] .codex-kit-prompt {
    display: none;
}

.codex-kit-content {
    margin: 12px 0 28px;
    padding: clamp(20px, 5vw, 48px);
    background: #fffdf8;
    color: #263d48;
    font-size: 1.12rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.codex-kit-content p {
    max-width: none;
    margin: 0 0 1.2em;
    color: inherit;
    white-space: pre-wrap;
}

.codex-kit-content h3,
.codex-kit-content h4,
.codex-kit-content strong {
    color: #174855;
}

.codex-kit-content h3 {
    margin: 2.5em 0 1em;
    padding-top: 1em;
    border-top: 1px solid #d8b65a;
    font-size: 1.6rem;
    line-height: 1.4;
}

#kit-activity .codex-kit-content,
#kit-cards .codex-kit-content {
    padding: 0;
    background: transparent;
}

.kit-page {
    margin: 0 0 30px;
}

.kit-page img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #d8b65a;
}

.kit-page figcaption {
    padding-top: 8px;
    color: #f4e7b2;
    text-align: center;
    font: 0.8rem/1.5 Arial, Helvetica, sans-serif;
}

#kit-workbook .kit-page figcaption {
    color: #263d48;
}

@media (max-width: 600px) {
    .codex-kit-list {
        grid-template-columns: 1fr;
    }
}

/* Kit writing, drawing, and per-item bookmarks */
.codex-kit-toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kit-bookmark-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kit-bookmarked-page {
    outline: 3px solid #f6ce65;
    outline-offset: 5px;
    box-shadow: 0 0 12px 5px rgba(246, 206, 101, 0.55),
        0 0 30px 9px rgba(216, 164, 47, 0.3);
}
.kit-response { margin: 20px 0 28px; padding: 18px; background: #fffdf8; color: #263d48; border: 1px solid #d8b65a; font: 1rem/1.6 Arial, sans-serif; }
.kit-response label { display: block; margin-bottom: 10px; font-weight: 700; }
.kit-response textarea { display: block; width: 100%; min-height: 120px; padding: 12px; font: inherit; color: #263d48; background: #fff; border: 1px solid #71888b; resize: vertical; }
.kit-response-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kit-response button { padding: 10px 12px; color: #042c21; background: #e8cc7d; border: 1px solid #9c7c32; cursor: pointer; font: 700 0.85rem Arial, sans-serif; }
.kit-response :focus-visible { outline: 2px solid #174855; outline-offset: 3px; }
.kit-response .kit-save-status { margin: 12px 0 0; font-size: 0.8rem; color: #42585f; }
.kit-image-frame { position: relative; }
.kit-image-drawing { position: absolute; inset: 0; }
.kit-drawing-space { width: 100%; height: 260px; margin-top: 12px; border: 1px solid #71888b; background: #fff; }
.kit-image-drawing svg, .kit-drawing-space svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.kit-image-drawing polyline, .kit-drawing-space polyline { fill: none; stroke: #1553a0; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kit-response [hidden], .kit-image-drawing[hidden] { display: none !important; }
@media (max-width: 600px) { .codex-kit-toolbar .codex-kit-action { font-size: 0.78rem; padding: 9px; } }